deepseek-harness-background 0.5.5 → 0.6.0

package/lib/client.js

@@ -62,8 +62,9 @@ window.__ModuleLoader__.load({
 		* button, scroll-to-bottom), the load-earlier history button, the composer
 		* dock family (agent task strips: TodoPanel / GoalBar / QueueDock) and its
 		* takeover panels (approval, question, plan review), the subagent lineage
-		* popover, the home hero "preview" badge, the sidebar build badge, and the
-		* timeline rail (the official-rail rules below).
+		* popover, the home hero "preview" badge, the sidebar build badge, the turn
+		* deliverables (the changed-files card and the diff hover preview it opens),
+		* and the timeline rail (the official-rail rules below).
 		* Every glassed surface shares ONE recipe:
 		* fill from the painter's --dsw-specific-input-major token (same alpha
 		* curve + theme dimming), the full shared blur/saturate/brightness chain
@@ -71,10 +72,14 @@ window.__ModuleLoader__.load({
 		* surface reads heavier than the composer card. Dialogs, the settings UI,
 		* menus, tooltips, toasts and every hover/accent fill keep the OFFICIAL
 		* opaque paints — they are reading surfaces and must stay legible.
+		* The same rule excludes the HoverCard primitive's compact pod (a fixed
+		* #2C2C2E chip): it is hover FEEDBACK, not a floating card, and the official
+		* opaque paint is what keeps its label legible over any wallpaper.
 		*
 		* Selectors target authored attributes (`data-dsh-bg`, `data-composer-card`,
-		* `data-terminal`…), the `:global` `.md-code-block` anchor, and CSS-module
-		* SUFFIX conventions (`_bubble`, `_newSession`…) audited for collisions.
+		* `data-terminal`, `data-changes-hover-preview`…), the `:global`
+		* `.md-code-block` anchor, and CSS-module SUFFIX conventions (`_bubble`,
+		* `_newSession`…) audited for collisions.
 		*
 		* MAINTENANCE NOTE: the suffix anchors are the host's only stable-enough
 		* integration surface today, but a host restyle that renames them silently
@@ -83,11 +88,14 @@ window.__ModuleLoader__.load({
 		* suffix entries.
 		* `_bubble` excludes `role="tooltip"` (Tooltip.module.css shares the suffix),
 		* `_add` is scoped under `[data-composer-card]` (DiffBlock line markers share
-		* it), `_newSession` excludes `Label` (the button's inner label span) and
-		* `_toBottom` excludes `Slot` (the zero-height sticky wrapper) — both share
-		* the substring with the chrome control but must keep their own paint, and
-		* the subagent popover is `role="tree"` + `_menu` so the generic menu
-		* surface stays untouched.
+		* it), `_newSession` is scoped to the `button` element — an element test, not
+		* another suffix exclusion, because 0.1.7-rc.2 added `newSessionLabelMask` /
+		* `newSessionContent` / `newSessionShortcut` INSIDE the button and each of
+		* those spans would otherwise take the chrome paint (the composer-sized
+		* second box the user sees inside the control) — and `_toBottom` excludes
+		* `Slot` (the zero-height sticky wrapper) — both share the substring with the
+		* chrome control but must keep their own paint, and the subagent popover is
+		* `role="tree"` + `_menu` so the generic menu surface stays untouched.
 		*/
 		const BACKGROUND_CSS = `
   .dsh-bg-layer {
@@ -96,6 +104,11 @@ window.__ModuleLoader__.load({
   .dsh-bg-layer .dsh-bg-image {
     width: 100%; height: 100%; display: block; border: 0; background: transparent;
     object-fit: var(--bg-object-fit, cover);
+    /* Normalized crop framing: percent object-position is the position of the
+       image inside its own overflow, so one stored 0..1 value holds for every
+       window size and every source. Both axes are always written; the axis
+       with no overflow simply ignores its value. */
+    object-position: calc(var(--bg-offset-x, 0.5) * 100%) calc(var(--bg-offset-y, 0.5) * 100%);
     opacity: var(--bg-opacity, 1);
     filter: blur(var(--bg-wallpaper-blur, 0px));
     /* Blur thins the edges; scale the image up to hide the fringe. */
@@ -112,6 +125,21 @@ window.__ModuleLoader__.load({
   body[data-ds-dark-theme] .dsh-bg-scrim {
     background: rgba(0, 0, 0, var(--bg-scrim, 0.25));
   }
+  /* Desktop window drag (Electron on macOS): the shell marks a chrome row
+     \`data-window-drag\` and one rule subtracts every other body-level box
+     (\`html[data-platform='darwin'] body > :not(#root) { -webkit-app-region:
+     no-drag; }\`, ui-web base.css). Chromium collects app-region boxes by
+     geometry in DOM order and the LAST box containing a point decides, so
+     these two decorative layers — body children that follow #root — would
+     swallow the drag surface of the whole window (traffic-light strip,
+     conversation header, dock strip). They never take the pointer, so they
+     must not join the composition at all: a computed \`none\` is the one value
+     Chromium does not collect. The shell rule carries #root's id specificity,
+     so a plain declaration cannot outrank it — this needs \`!important\`. */
+  body > .dsh-bg-layer,
+  body > .dsh-bg-scrim {
+    -webkit-app-region: none !important;
+  }
 
   /* Active: make the app frame + sidebar background transparent so all columns
      share the same wallpaper + scrim backdrop. */
@@ -128,7 +156,6 @@ window.__ModuleLoader__.load({
      light glass slightly DIMS, dark glass keeps a slight lift. Gated on the
      GLASS ATTR (wallpaper active AND panelOpacity < 1): maxing the panel
      slider returns these surfaces to the exact official paints. */
-  body[data-dsh-bg-glass] [data-composer-card],
   body[data-dsh-bg-glass] [class*="_bubble"]:not([role="tooltip"]),
   /* The read_image toolview (dsh >= 0.1.2-rc.1 ToolRow) collapses its result
      into an image body card; glass it like the other content blocks. */
@@ -141,7 +168,7 @@ window.__ModuleLoader__.load({
   body[data-dsh-bg-glass] [data-web],
   body[data-dsh-bg-glass] [class*="_ioCard"],
   body[data-dsh-bg-glass] [class*="_instructionsCard"],
-  body[data-dsh-bg-glass] [class*="_markdown"] :not(pre) > code {
+  body[data-dsh-bg-glass] [class*="_markdown"]:not(pre) > code {
     background-image: linear-gradient(180deg, rgba(255, 255, 255, var(--bg-glass-sheen, 0.07)), rgba(255, 255, 255, var(--bg-glass-sheen-mid, 0.02)) 38%, rgba(255, 255, 255, 0.01));
     -webkit-backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.42)) brightness(var(--bg-glass-brightness, 1)) contrast(1.01);
     backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.42)) brightness(var(--bg-glass-brightness, 1)) contrast(1.01);
@@ -152,6 +179,37 @@ window.__ModuleLoader__.load({
       0 12px 40px rgba(0, 0, 0, 0.12);
   }
 
+  /* ---- Composer card: the filter rides a pseudo-element ------------------
+     Chromium makes every element that carries a backdrop-filter a Backdrop
+     Root, and a filter inside one can only sample what that element itself
+     paints. The composer hosts the picker menu as an absolutely positioned
+     child ([data-composer-card] > … conversation.input.overlay), so with the
+     filter on the card itself that menu sampled the card's own paint only and
+     read as flat transparency over the wallpaper. Moving the filter to a
+     positioned ::before breaks the root — the pseudo-element is not an
+     ancestor of the menu, so the menu blurs the wallpaper again. The card
+     keeps its own frost (the ::before supplies it) and needs no layout change:
+     ui-conversation already declares it position: relative as the overlay
+     anchor context. */
+  body[data-dsh-bg-glass] [data-composer-card] {
+    background-color: var(--dsw-specific-input-major);
+    background-image: linear-gradient(180deg, rgba(255, 255, 255, var(--bg-glass-sheen, 0.07)), rgba(255, 255, 255, var(--bg-glass-sheen-mid, 0.02)) 38%, rgba(255, 255, 255, 0.01));
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.32),
+      inset 0 -1px 0 rgba(255, 255, 255, 0.08),
+      inset 0 0 0 0.5px rgba(255, 255, 255, 0.08),
+      0 12px 40px rgba(0, 0, 0, 0.12);
+  }
+  body[data-dsh-bg-glass] [data-composer-card]::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    border-radius: inherit;
+    -webkit-backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.42)) brightness(var(--bg-glass-brightness, 1)) contrast(1.01);
+    backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.42)) brightness(var(--bg-glass-brightness, 1)) contrast(1.01);
+  }
+
   /* The sticky code-block header officially occludes scrolled code with
      bg-base (transparent under a wallpaper): refill it with the banner token
      (itself translucent glass) so code stays hidden beneath the sticky bar. */
@@ -178,7 +236,7 @@ window.__ModuleLoader__.load({
      caps), sheen = the shared sheen vars. Hover = the same white glass at the
      boosted alpha var. Gated on data-dsh-bg-glass (off when the panel is
      fully opaque). */
-  body[data-dsh-bg-glass] [class*="_newSession"]:not([class*="Label"]),
+  body[data-dsh-bg-glass] button[class*="_newSession"],
   body[data-dsh-bg-glass] [data-composer-card] [class*="_add"],
   body[data-dsh-bg-glass] [class*="_toBottom"]:not([class*="Slot"]) {
     background-color: var(--dsw-specific-input-major);
@@ -190,15 +248,15 @@ window.__ModuleLoader__.load({
       inset 0 0 0 0.5px rgba(255, 255, 255, 0.12),
       0 4px 14px rgba(0, 0, 0, 0.08);
   }
-  body[data-dsh-bg-glass] [class*="_newSession"]:not([class*="Label"]):hover,
+  body[data-dsh-bg-glass] button[class*="_newSession"]:hover,
   body[data-dsh-bg-glass] [data-composer-card] [class*="_add"]:hover:not(:disabled),
   body[data-dsh-bg-glass] [class*="_toBottom"]:not([class*="Slot"]):hover {
     background-color: color-mix(in srgb, rgb(255 255 255) calc(var(--bg-glass-alpha-strong, 0.8) * 100%), transparent);
   }
   /* Collapsed rail renders the new-session control as a bare icon — keep the
      official transparent paint (and its official translucent hover). */
-  body[data-dsh-bg-glass] [class*="_collapsed"] [class*="_newSession"],
-  body[data-dsh-bg-glass] [class*="_collapsed"] [class*="_newSession"]:hover {
+  body[data-dsh-bg-glass] [data-sidebar-collapsed="true"] [class*="_newSession"],
+  body[data-dsh-bg-glass] [data-sidebar-collapsed="true"] [class*="_newSession"]:hover {
     background-color: transparent;
     background-image: none;
     box-shadow: none;
@@ -278,19 +336,74 @@ window.__ModuleLoader__.load({
     backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.42)) brightness(var(--bg-glass-brightness, 1)) contrast(1.01);
   }
 
+  /* ---- Turn deliverables: the changed-files card + its hover preview -----
+     Both paint with the official opaque --dsw-alias-bg-layer-1 (the token the
+     painter deliberately keeps opaque, because it backs the settings UI,
+     dialogs and menus), so each needs an EXPLICIT fill on top of the shared
+     sheen/blur chain — the token-mediated rule above cannot reach them.
+     [data-changed-files] is the card a turn tail renders; its header and
+     rows carry their own fills, so the card surface alone is glassed and the
+     contents keep their official paints. [data-changes-hover-preview] is
+     the fixed HoverCard the changed-files rows open on hover and the shared
+     component behind every diff preview; its width/height are set by the
+     hover-card primitive, so this only supplies the material. The preview's
+     official elevation shadow rides its own token untouched — only the fill
+     and the filter chain are taken over here. */
+  body[data-dsh-bg-glass] [data-changed-files],
+  body[data-dsh-bg-glass] [data-changes-hover-preview] {
+    background-color: var(--dsw-specific-input-major);
+    background-image: linear-gradient(180deg, rgba(255, 255, 255, var(--bg-glass-sheen, 0.07)), rgba(255, 255, 255, var(--bg-glass-sheen-mid, 0.02)) 38%, rgba(255, 255, 255, 0.01));
+    -webkit-backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.42)) brightness(var(--bg-glass-brightness, 1)) contrast(1.01);
+    backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.42)) brightness(var(--bg-glass-brightness, 1)) contrast(1.01);
+    box-shadow: var(--dsw-elevation-panel, 0 4px 14px rgba(0, 0, 0, 0.08));
+  }
+
+  /* The card's header paints the official opaque fill (--changes-fill is a
+     static neutral), so the glass card underneath never shows through: hand
+     that one surface back to the card by clearing its fill, and give the
+     header's own hover/focus feedback the translucent interactive token the
+     card's rows already use. */
+  body[data-dsh-bg-glass] [data-changed-files] > :first-child {
+    background-color: transparent;
+  }
+  body[data-dsh-bg-glass] [data-changed-files] > :first-child:hover:not(:disabled),
+  body[data-dsh-bg-glass] [data-changed-files] > :first-child:focus-visible {
+    background-color: var(--dsw-alias-interactive-bg-hover);
+  }
+
+  /* ---- Docked stat dialogs (turn time, session stats, token usage) -------
+     These portal to document.body, so unlike the picker menu above they do
+     reach the wallpaper; their official menu skin is a 40px blur under a flat
+     58% fill, which on a soft wallpaper still reads as plain transparency. The
+     official fill and its readable contrast stay, and the shared sheen +
+     exposure chain joins them to the same glass family as every other panel —
+     including the user's blur slider (--bg-glass-blur). Anchors are the
+     panels' own detail lists: class hashes are never structural hooks. */
+  body[data-dsh-bg-glass] [role="dialog"]:has([data-turn-usage-details]),
+  body[data-dsh-bg-glass] [role="dialog"]:has([data-session-stats-details]),
+  body[data-dsh-bg-glass] [role="dialog"]:has([data-session-stats-usage]) {
+    background-image: linear-gradient(180deg, rgba(255, 255, 255, var(--bg-glass-sheen, 0.07)), rgba(255, 255, 255, var(--bg-glass-sheen-mid, 0.02)) 38%, rgba(255, 255, 255, 0.01));
+    -webkit-backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.42)) brightness(var(--bg-glass-brightness, 1)) contrast(1.01);
+    backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.42)) brightness(var(--bg-glass-brightness, 1)) contrast(1.01);
+  }
+
   /* ---- Official turn rail (dsh >= 0.1.2, TurnNavigator) -----------------
      The enhance mode borrows the kernel's rail untouched, so its hover
      preview card keeps the OFFICIAL opaque fill (bg-layer-1, not mediated
      by any overridden token) — the "悬浮反馈形态不透明" complaint. Glass it
      explicitly with the same explicit-fill recipe as the chrome buttons
-     (fill = the painter's composer token + shared blur/sheen). Anchors are
-     structural, never class names: the kernel's module-CSS class hashes are
-     not a stable contract, but nav[style*="--turn-natural-height"] (its
-     inline rail metrics) and the preview's role="tooltip" are. No edge
+     (fill = the painter's composer token + shared blur/sheen). The anchor is
+     the rail's SEAT, the same one timeline/official-enhance.tsx identifies it
+     by: the only nav inside the conversation scrollport. 0.1.7 virtualized
+     the rail (commit f89cd786aa), which deleted the turn-natural-height
+     inline metric that used to sit on that nav — the nav carries no style
+     attribute at all now — so the selector that keyed on it matched nothing
+     and the preview went bare. The scrollport attribute and the preview's
+     role="tooltip" are the structural hooks; class hashes never are. No edge
      dissolve on the marks column: the first and last tick dashes straddle
      the marks box edges by 1px, so a fade zone sized off the box height
      swallows them instead of the band. */
-  body[data-dsh-bg-glass] nav[style*="--turn-natural-height"] [role="tooltip"] {
+  body[data-dsh-bg-glass] [data-conversation-scroll] nav [role="tooltip"] {
     background-color: var(--dsw-specific-input-major);
     background-image: linear-gradient(180deg, rgba(255, 255, 255, var(--bg-glass-sheen, 0.07)), rgba(255, 255, 255, var(--bg-glass-sheen-mid, 0.02)) 38%, rgba(255, 255, 255, 0.01));
     -webkit-backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.42)) brightness(var(--bg-glass-brightness, 1)) contrast(1.01);
@@ -321,6 +434,8 @@ window.__ModuleLoader__.load({
 		const DEFAULT_FIT = "cover";
 		/** Image positioning modes. `cover` fills the frame (cropping as needed); `contain` fits the whole image inside the frame (letterboxing). */
 		const FIT_MODES = ["cover", "contain"];
+		/** Default framing offset — the image sits centered on both axes. */
+		const DEFAULT_OFFSET = .5;
 		//#endregion
 		//#region src/client/backdrop.ts
 		/**
@@ -525,6 +640,8 @@ window.__ModuleLoader__.load({
 				this.hasSource = true;
 				document.body.style;
 				this.setVar("--bg-object-fit", settings.fit);
+				this.setVar("--bg-offset-x", String(settings.offsetX));
+				this.setVar("--bg-offset-y", String(settings.offsetY));
 				this.setVar("--bg-opacity", String(settings.opacity));
 				this.setVar("--bg-wallpaper-blur", `${settings.wallpaperBlur}px`);
 				this.setVar("--bg-wallpaper-scale", (1 + settings.wallpaperBlur * .006).toFixed(4));
@@ -592,7 +709,13 @@ window.__ModuleLoader__.load({
 						this.setVar("--bg-wallpaper-blur", `${value}px`);
 						this.setVar("--bg-wallpaper-scale", (1 + Number(value) * .006).toFixed(4));
 						break;
-					case "fit": this.setVar("--bg-object-fit", String(value));
+					case "fit":
+						this.setVar("--bg-object-fit", String(value));
+						break;
+					case "offsetX":
+						this.setVar("--bg-offset-x", String(value));
+						break;
+					case "offsetY": this.setVar("--bg-offset-y", String(value));
 				}
 			}
 			/**
@@ -689,6 +812,8 @@ window.__ModuleLoader__.load({
 			"--bg-opacity",
 			"--bg-scrim",
 			"--bg-object-fit",
+			"--bg-offset-x",
+			"--bg-offset-y",
 			"--bg-wallpaper-blur",
 			"--bg-wallpaper-scale",
 			"--bg-glass-blur",
@@ -706,6 +831,8 @@ window.__ModuleLoader__.load({
 		function paintPreviewSurface(el, settings) {
 			const s = el.style;
 			s.setProperty("--bg-object-fit", settings.fit);
+			s.setProperty("--bg-offset-x", String(settings.offsetX));
+			s.setProperty("--bg-offset-y", String(settings.offsetY));
 			s.setProperty("--bg-opacity", String(settings.opacity));
 			s.setProperty("--bg-scrim", String(settings.scrim));
 			s.setProperty("--bg-wallpaper-blur", `${settings.wallpaperBlur}px`);
@@ -951,6 +1078,8 @@ window.__ModuleLoader__.load({
 			"background.fit": "填充方式",
 			"background.cover": "铺满",
 			"background.contain": "完整",
+			"background.previewPanHint": "拖动预览可调整图片位置，双击居中",
+			"background.repositionReset": "重置位置",
 			"background.clear": "清除背景",
 			"background.uploadFailed": "上传失败，请重试",
 			"background.saveFailed": "保存失败，请重试",
@@ -982,6 +1111,8 @@ window.__ModuleLoader__.load({
 			"background.fit": "Fit",
 			"background.cover": "Cover",
 			"background.contain": "Contain",
+			"background.previewPanHint": "Drag the preview to reposition the image; double-click to recenter",
+			"background.repositionReset": "Reset position",
 			"background.clear": "Clear background",
 			"background.uploadFailed": "Upload failed, try again",
 			"background.saveFailed": "Save failed, try again",
@@ -1115,7 +1246,7 @@ window.__ModuleLoader__.load({
 		const settingsClient = new SettingsClient();
 		//#endregion
 		//#region \0dsh-css:D:\Project\deepseek-harness-background\src\client\SettingsRow.module.css.mjs
-		const css = ".-ozqdq_row{border-bottom:1px solid var(--dsw-alias-border-l2);flex-direction:column;gap:14px;padding:16px 0;display:flex}.-ozqdq_header{flex-direction:column;gap:4px;display:flex}.-ozqdq_titleRow{justify-content:space-between;align-items:center;gap:12px;min-height:22px;display:flex}.-ozqdq_clearBtn{border-radius:12px;flex:none;height:24px;padding:0 10px;font-size:12px;line-height:24px}.-ozqdq_title{color:var(--dsw-alias-label-primary);font-size:14px;font-weight:400;line-height:22px}.-ozqdq_desc{color:var(--dsw-alias-label-tertiary);font-size:12px;font-weight:400;line-height:18px}.-ozqdq_notice{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:8px;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;display:flex}.-ozqdq_noticeText{color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}.-ozqdq_noticeBtn{color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:none;flex:none;padding:0;font-size:12px;line-height:18px;text-decoration:underline}.-ozqdq_noticeBtn:hover{color:var(--dsw-alias-label-primary)}.-ozqdq_preview{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:12px;height:132px;position:relative;overflow:hidden}.-ozqdq_previewImg{object-fit:var(--bg-object-fit,cover);width:100%;height:100%;opacity:var(--bg-opacity,1);filter:blur(var(--bg-wallpaper-blur,0px));transform:scale(var(--bg-wallpaper-scale,1));display:block;position:absolute;inset:0}.-ozqdq_previewScrim{background:rgba(255, 255, 255, var(--bg-scrim,.25));position:absolute;inset:0}body[data-ds-dark-theme] .-ozqdq_previewScrim{background:rgba(0, 0, 0, var(--bg-scrim,.25))}.-ozqdq_previewGlass{background:var(--bg-preview-glass,#ffffff24);width:44%;height:46px;backdrop-filter:blur(var(--bg-glass-blur,16px)) saturate(var(--bg-glass-saturate,1.42)) brightness(var(--bg-glass-brightness,1));border:1px solid #ffffff38;border-radius:10px;justify-content:center;align-items:center;display:flex;position:absolute;bottom:16px;left:16px;box-shadow:inset 0 1px #ffffff4d}.-ozqdq_previewGlassText{color:#0f172ac7;text-shadow:0 1px 2px #fff6;white-space:nowrap;font-size:11px;line-height:1}body[data-ds-dark-theme] .-ozqdq_previewGlassText{color:#ffffffd9;text-shadow:0 1px 2px #00000059}.-ozqdq_previewEmpty{color:var(--dsw-alias-label-tertiary);justify-content:center;align-items:center;font-size:12px;line-height:1.5;display:flex;position:absolute;inset:0}.-ozqdq_section{flex-direction:column;gap:8px;display:flex}.-ozqdq_sectionLabel{color:var(--dsw-alias-label-tertiary);letter-spacing:.01em;font-size:12px;font-weight:500;line-height:18px}.-ozqdq_sourceRow{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.-ozqdq_urlRow{align-items:center;gap:8px;display:flex}.-ozqdq_urlInput{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);min-width:0;height:32px;font:inherit;color:var(--dsw-alias-label-primary);border-radius:8px;flex:1;padding:0 10px;font-size:13px;line-height:1.5}.-ozqdq_urlInput::placeholder{color:var(--dsw-alias-label-dimmed)}.-ozqdq_urlInput:focus-visible{border-color:var(--dsw-alias-brand-primary);outline:none}.-ozqdq_hint{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:1.5}.-ozqdq_enabledBadge{white-space:nowrap;background:var(--dsw-alias-state-success-tertiary);color:var(--dsw-alias-state-success-primary);border-radius:999px;align-items:center;gap:4px;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px;display:inline-flex}.-ozqdq_btn{border:1px solid var(--dsw-alias-border-l2);height:28px;font:inherit;color:var(--dsw-alias-label-primary);cursor:pointer;white-space:nowrap;background:0 0;border-radius:14px;justify-content:center;align-items:center;padding:0 12px;font-size:12px;line-height:18px;transition:background-color .15s,border-color .15s,color .15s;display:inline-flex}.-ozqdq_btn:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}.-ozqdq_btn:active:not(:disabled){background:var(--dsw-alias-interactive-bg-active)}.-ozqdq_btn:disabled{opacity:.45;cursor:default}.-ozqdq_btnPrimary{background:var(--dsw-alias-button-primary-fill);color:var(--dsw-alias-label-primary-foreground);border-color:#0000}.-ozqdq_btnPrimary:hover:not(:disabled){background:var(--dsw-alias-button-primary-hover)}.-ozqdq_btnDanger{color:var(--dsw-alias-label-error)}.-ozqdq_btnDanger:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover-danger)}.-ozqdq_sliderRow{align-items:center;gap:10px;display:flex}.-ozqdq_sliderLabel{color:var(--dsw-alias-label-primary);flex:0 0 96px;font-size:13px;line-height:1.5}.-ozqdq_slider{-webkit-appearance:none;appearance:none;cursor:pointer;background:0 0;flex:1;min-width:0;height:18px;margin:0}.-ozqdq_slider::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--dsw-alias-brand-primary) var(--bg-fill,0%), var(--dsw-alias-border-l3) var(--bg-fill,0%));border-radius:2px;height:4px}.-ozqdq_slider::-moz-range-track{background:var(--dsw-alias-border-l3);border-radius:2px;height:4px}.-ozqdq_slider::-moz-range-progress{background:var(--dsw-alias-brand-primary);border-radius:2px;height:4px}.-ozqdq_slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border:2px solid var(--dsw-alias-brand-primary);width:14px;height:14px;box-shadow:0 0 0 3px color-mix(in srgb, var(--dsw-alias-brand-primary) 14%, transparent), 0 1px 3px #00000047;background:#fff;border-radius:50%;margin-top:-5px}.-ozqdq_slider::-moz-range-thumb{border:2px solid var(--dsw-alias-brand-primary);width:14px;height:14px;box-shadow:0 0 0 3px color-mix(in srgb, var(--dsw-alias-brand-primary) 14%, transparent), 0 1px 3px #00000047;background:#fff;border-radius:50%}.-ozqdq_slider:hover::-webkit-slider-thumb{box-shadow:0 0 0 5px color-mix(in srgb, var(--dsw-alias-brand-primary) 18%, transparent), 0 1px 4px #0000004d}.-ozqdq_slider:hover::-moz-range-thumb{box-shadow:0 0 0 5px color-mix(in srgb, var(--dsw-alias-brand-primary) 18%, transparent), 0 1px 4px #0000004d}.-ozqdq_slider:active::-webkit-slider-thumb{box-shadow:0 0 0 7px color-mix(in srgb, var(--dsw-alias-brand-primary) 22%, transparent), 0 1px 5px #00000052;transform:scale(1.12)}.-ozqdq_slider:active::-moz-range-thumb{box-shadow:0 0 0 7px color-mix(in srgb, var(--dsw-alias-brand-primary) 22%, transparent), 0 1px 5px #00000052;transform:scale(1.12)}.-ozqdq_slider:focus-visible{outline:none}.-ozqdq_slider:focus-visible::-webkit-slider-thumb{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}.-ozqdq_slider:focus-visible::-moz-range-thumb{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}.-ozqdq_sliderValue{text-align:right;font-variant-numeric:tabular-nums;color:var(--dsw-alias-label-secondary);flex:0 0 52px;font-size:13px;line-height:1.5}.-ozqdq_segRow{align-items:center;gap:10px;display:flex}.-ozqdq_segLabel{color:var(--dsw-alias-label-primary);flex:0 0 96px;font-size:13px;line-height:1.5}.-ozqdq_segGroup{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:9px;flex:1;gap:2px;min-width:0;padding:2px;display:inline-flex}.-ozqdq_segBtn{height:24px;font:inherit;color:var(--dsw-alias-label-secondary);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:7px;flex:1;padding:0 16px;font-size:12px;line-height:24px}.-ozqdq_segBtn:hover:not(.-ozqdq_segActive){color:var(--dsw-alias-label-primary)}.-ozqdq_segActive{background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-primary);font-weight:500}.-ozqdq_error{color:var(--dsw-alias-label-error);font-size:12px;line-height:1.5}.-ozqdq_clearRow{align-items:center;gap:10px;display:flex}.-ozqdq_switch{background:var(--dsw-alias-border-l3);cursor:pointer;border:none;border-radius:11px;flex:none;width:40px;height:22px;padding:0;transition:background-color .15s;position:relative}.-ozqdq_switch[aria-checked=true]{background:var(--dsw-alias-brand-primary)}.-ozqdq_switch:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}.-ozqdq_switchKnob{background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .15s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #00000047}.-ozqdq_switch[aria-checked=true] .-ozqdq_switchKnob{transform:translate(18px)}@media (prefers-reduced-motion:reduce){.-ozqdq_btn,.-ozqdq_switch,.-ozqdq_switchKnob{transition:none}}";
+		const css = ".-ozqdq_row{border-bottom:1px solid var(--dsw-alias-border-l2);flex-direction:column;gap:14px;padding:16px 0;display:flex}.-ozqdq_header{flex-direction:column;gap:4px;display:flex}.-ozqdq_titleRow{justify-content:space-between;align-items:center;gap:12px;min-height:22px;display:flex}.-ozqdq_clearBtn{border-radius:12px;flex:none;height:24px;padding:0 10px;font-size:12px;line-height:24px}.-ozqdq_title{color:var(--dsw-alias-label-primary);font-size:14px;font-weight:400;line-height:22px}.-ozqdq_desc{color:var(--dsw-alias-label-tertiary);font-size:12px;font-weight:400;line-height:18px}.-ozqdq_notice{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:8px;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;display:flex}.-ozqdq_noticeText{color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}.-ozqdq_noticeBtn{color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:none;flex:none;padding:0;font-size:12px;line-height:18px;text-decoration:underline}.-ozqdq_noticeBtn:hover{color:var(--dsw-alias-label-primary)}.-ozqdq_ratioFrame{justify-content:center;display:flex}.-ozqdq_preview{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:12px;flex:none;width:100%;height:132px;position:relative;overflow:hidden}.-ozqdq_preview[data-pan]{cursor:move;touch-action:none}.-ozqdq_preview:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}.-ozqdq_previewImg{object-fit:var(--bg-object-fit,cover);object-position:calc(var(--bg-offset-x,.5) * 100%) calc(var(--bg-offset-y,.5) * 100%);width:100%;height:100%;opacity:var(--bg-opacity,1);filter:blur(var(--bg-wallpaper-blur,0px));transform:scale(var(--bg-wallpaper-scale,1));display:block;position:absolute;inset:0}.-ozqdq_previewScrim{background:rgba(255, 255, 255, var(--bg-scrim,.25));position:absolute;inset:0}body[data-ds-dark-theme] .-ozqdq_previewScrim{background:rgba(0, 0, 0, var(--bg-scrim,.25))}.-ozqdq_previewGlass{background:var(--bg-preview-glass,#ffffff24);width:44%;height:46px;backdrop-filter:blur(var(--bg-glass-blur,16px)) saturate(var(--bg-glass-saturate,1.42)) brightness(var(--bg-glass-brightness,1));border:1px solid #ffffff38;border-radius:10px;justify-content:center;align-items:center;display:flex;position:absolute;bottom:16px;left:16px;box-shadow:inset 0 1px #ffffff4d}.-ozqdq_previewGlassText{color:#0f172ac7;text-shadow:0 1px 2px #fff6;white-space:nowrap;font-size:11px;line-height:1}body[data-ds-dark-theme] .-ozqdq_previewGlassText{color:#ffffffd9;text-shadow:0 1px 2px #00000059}.-ozqdq_previewEmpty{color:var(--dsw-alias-label-tertiary);justify-content:center;align-items:center;font-size:12px;line-height:1.5;display:flex;position:absolute;inset:0}.-ozqdq_previewReset{z-index:2;height:22px;font:inherit;color:#fff;cursor:pointer;backdrop-filter:blur(4px);background:#0f172a73;border:none;border-radius:11px;padding:0 9px;font-size:11px;line-height:22px;transition:background-color .15s;position:absolute;top:8px;right:8px}.-ozqdq_previewReset:hover{background:#0f172aa6}.-ozqdq_section{flex-direction:column;gap:8px;display:flex}.-ozqdq_sectionLabel{color:var(--dsw-alias-label-tertiary);letter-spacing:.01em;font-size:12px;font-weight:500;line-height:18px}.-ozqdq_sourceRow{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.-ozqdq_urlRow{align-items:center;gap:8px;display:flex}.-ozqdq_urlInput{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);min-width:0;height:32px;font:inherit;color:var(--dsw-alias-label-primary);border-radius:8px;flex:1;padding:0 10px;font-size:13px;line-height:1.5}.-ozqdq_urlInput::placeholder{color:var(--dsw-alias-label-dimmed)}.-ozqdq_urlInput:focus-visible{border-color:var(--dsw-alias-brand-primary);outline:none}.-ozqdq_hint{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:1.5}.-ozqdq_enabledBadge{white-space:nowrap;background:var(--dsw-alias-state-success-tertiary);color:var(--dsw-alias-state-success-primary);border-radius:999px;align-items:center;gap:4px;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px;display:inline-flex}.-ozqdq_btn{border:1px solid var(--dsw-alias-border-l2);height:28px;font:inherit;color:var(--dsw-alias-label-primary);cursor:pointer;white-space:nowrap;background:0 0;border-radius:14px;justify-content:center;align-items:center;padding:0 12px;font-size:12px;line-height:18px;transition:background-color .15s,border-color .15s,color .15s;display:inline-flex}.-ozqdq_btn:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}.-ozqdq_btn:active:not(:disabled){background:var(--dsw-alias-interactive-bg-active)}.-ozqdq_btn:disabled{opacity:.45;cursor:default}.-ozqdq_btnPrimary{background:var(--dsw-alias-button-primary-fill);color:var(--dsw-alias-label-primary-foreground);border-color:#0000}.-ozqdq_btnPrimary:hover:not(:disabled){background:var(--dsw-alias-button-primary-hover)}.-ozqdq_btnDanger{color:var(--dsw-alias-label-error)}.-ozqdq_btnDanger:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover-danger)}.-ozqdq_sliderRow{align-items:center;gap:10px;display:flex}.-ozqdq_sliderLabel{color:var(--dsw-alias-label-primary);flex:0 0 96px;font-size:13px;line-height:1.5}.-ozqdq_slider{-webkit-appearance:none;appearance:none;cursor:pointer;background:0 0;flex:1;min-width:0;height:18px;margin:0}.-ozqdq_slider::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--dsw-alias-brand-primary) var(--bg-fill,0%), var(--dsw-alias-border-l3) var(--bg-fill,0%));border-radius:2px;height:4px}.-ozqdq_slider::-moz-range-track{background:var(--dsw-alias-border-l3);border-radius:2px;height:4px}.-ozqdq_slider::-moz-range-progress{background:var(--dsw-alias-brand-primary);border-radius:2px;height:4px}.-ozqdq_slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border:2px solid var(--dsw-alias-brand-primary);width:14px;height:14px;box-shadow:0 0 0 3px color-mix(in srgb, var(--dsw-alias-brand-primary) 14%, transparent), 0 1px 3px #00000047;background:#fff;border-radius:50%;margin-top:-5px}.-ozqdq_slider::-moz-range-thumb{border:2px solid var(--dsw-alias-brand-primary);width:14px;height:14px;box-shadow:0 0 0 3px color-mix(in srgb, var(--dsw-alias-brand-primary) 14%, transparent), 0 1px 3px #00000047;background:#fff;border-radius:50%}.-ozqdq_slider:hover::-webkit-slider-thumb{box-shadow:0 0 0 5px color-mix(in srgb, var(--dsw-alias-brand-primary) 18%, transparent), 0 1px 4px #0000004d}.-ozqdq_slider:hover::-moz-range-thumb{box-shadow:0 0 0 5px color-mix(in srgb, var(--dsw-alias-brand-primary) 18%, transparent), 0 1px 4px #0000004d}.-ozqdq_slider:active::-webkit-slider-thumb{box-shadow:0 0 0 7px color-mix(in srgb, var(--dsw-alias-brand-primary) 22%, transparent), 0 1px 5px #00000052;transform:scale(1.12)}.-ozqdq_slider:active::-moz-range-thumb{box-shadow:0 0 0 7px color-mix(in srgb, var(--dsw-alias-brand-primary) 22%, transparent), 0 1px 5px #00000052;transform:scale(1.12)}.-ozqdq_slider:focus-visible{outline:none}.-ozqdq_slider:focus-visible::-webkit-slider-thumb{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}.-ozqdq_slider:focus-visible::-moz-range-thumb{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}.-ozqdq_sliderValue{text-align:right;font-variant-numeric:tabular-nums;color:var(--dsw-alias-label-secondary);flex:0 0 52px;font-size:13px;line-height:1.5}.-ozqdq_segRow{align-items:center;gap:10px;display:flex}.-ozqdq_segLabel{color:var(--dsw-alias-label-primary);flex:0 0 96px;font-size:13px;line-height:1.5}.-ozqdq_segGroup{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:9px;flex:1;gap:2px;min-width:0;padding:2px;display:inline-flex}.-ozqdq_segBtn{height:24px;font:inherit;color:var(--dsw-alias-label-secondary);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:7px;flex:1;padding:0 16px;font-size:12px;line-height:24px}.-ozqdq_segBtn:hover:not(.-ozqdq_segActive){color:var(--dsw-alias-label-primary)}.-ozqdq_segActive{background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-primary);font-weight:500}.-ozqdq_error{color:var(--dsw-alias-label-error);font-size:12px;line-height:1.5}.-ozqdq_clearRow{align-items:center;gap:10px;display:flex}.-ozqdq_switch{background:var(--dsw-alias-border-l3);cursor:pointer;border:none;border-radius:11px;flex:none;width:40px;height:22px;padding:0;transition:background-color .15s;position:relative}.-ozqdq_switch[aria-checked=true]{background:var(--dsw-alias-brand-primary)}.-ozqdq_switch:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}.-ozqdq_switchKnob{background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .15s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #00000047}.-ozqdq_switch[aria-checked=true] .-ozqdq_switchKnob{transform:translate(18px)}@media (prefers-reduced-motion:reduce){.-ozqdq_btn,.-ozqdq_switch,.-ozqdq_switchKnob{transition:none}}";
 		const tagId = "deepseek-harness-background/SettingsRow.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
 			const tag = document.createElement("style");
@@ -1125,44 +1256,46 @@ window.__ModuleLoader__.load({
 			document.head.appendChild(tag);
 		}
 		var SettingsRow_module_css_default = {
-			"previewGlassText": "-ozqdq_previewGlassText",
-			"title": "-ozqdq_title",
-			"switchKnob": "-ozqdq_switchKnob",
-			"sliderValue": "-ozqdq_sliderValue",
-			"error": "-ozqdq_error",
-			"urlRow": "-ozqdq_urlRow",
-			"btn": "-ozqdq_btn",
-			"sliderLabel": "-ozqdq_sliderLabel",
-			"slider": "-ozqdq_slider",
-			"clearBtn": "-ozqdq_clearBtn",
+			"segBtn": "-ozqdq_segBtn",
+			"noticeBtn": "-ozqdq_noticeBtn",
 			"preview": "-ozqdq_preview",
+			"previewEmpty": "-ozqdq_previewEmpty",
+			"clearRow": "-ozqdq_clearRow",
+			"previewGlass": "-ozqdq_previewGlass",
+			"segGroup": "-ozqdq_segGroup",
+			"noticeText": "-ozqdq_noticeText",
+			"segActive": "-ozqdq_segActive",
+			"switch": "-ozqdq_switch",
+			"btn": "-ozqdq_btn",
+			"desc": "-ozqdq_desc",
+			"row": "-ozqdq_row",
+			"ratioFrame": "-ozqdq_ratioFrame",
+			"urlRow": "-ozqdq_urlRow",
 			"urlInput": "-ozqdq_urlInput",
-			"segRow": "-ozqdq_segRow",
-			"enabledBadge": "-ozqdq_enabledBadge",
 			"titleRow": "-ozqdq_titleRow",
+			"btnPrimary": "-ozqdq_btnPrimary",
 			"sectionLabel": "-ozqdq_sectionLabel",
+			"section": "-ozqdq_section",
+			"previewGlassText": "-ozqdq_previewGlassText",
+			"segRow": "-ozqdq_segRow",
+			"notice": "-ozqdq_notice",
 			"sourceRow": "-ozqdq_sourceRow",
-			"segBtn": "-ozqdq_segBtn",
-			"row": "-ozqdq_row",
-			"noticeBtn": "-ozqdq_noticeBtn",
-			"previewImg": "-ozqdq_previewImg",
-			"switch": "-ozqdq_switch",
+			"slider": "-ozqdq_slider",
+			"sliderValue": "-ozqdq_sliderValue",
+			"error": "-ozqdq_error",
+			"hint": "-ozqdq_hint",
+			"enabledBadge": "-ozqdq_enabledBadge",
 			"btnDanger": "-ozqdq_btnDanger",
-			"segLabel": "-ozqdq_segLabel",
-			"previewGlass": "-ozqdq_previewGlass",
-			"previewEmpty": "-ozqdq_previewEmpty",
-			"noticeText": "-ozqdq_noticeText",
+			"sliderRow": "-ozqdq_sliderRow",
+			"previewImg": "-ozqdq_previewImg",
+			"switchKnob": "-ozqdq_switchKnob",
+			"previewReset": "-ozqdq_previewReset",
+			"title": "-ozqdq_title",
+			"clearBtn": "-ozqdq_clearBtn",
 			"header": "-ozqdq_header",
-			"section": "-ozqdq_section",
 			"previewScrim": "-ozqdq_previewScrim",
-			"desc": "-ozqdq_desc",
-			"notice": "-ozqdq_notice",
-			"sliderRow": "-ozqdq_sliderRow",
-			"segGroup": "-ozqdq_segGroup",
-			"hint": "-ozqdq_hint",
-			"btnPrimary": "-ozqdq_btnPrimary",
-			"segActive": "-ozqdq_segActive",
-			"clearRow": "-ozqdq_clearRow"
+			"sliderLabel": "-ozqdq_sliderLabel",
+			"segLabel": "-ozqdq_segLabel"
 		};
 		//#endregion
 		//#region src/client/SettingsRow.tsx
@@ -1195,6 +1328,8 @@ window.__ModuleLoader__.load({
 			blur: 16,
 			wallpaperBlur: 0,
 			fit: DEFAULT_FIT,
+			offsetX: DEFAULT_OFFSET,
+			offsetY: DEFAULT_OFFSET,
 			timeline: true
 		};
 		/** Per-field slider geometry: 5% steps for ratios, fine px steps for radii so
@@ -1237,13 +1372,26 @@ window.__ModuleLoader__.load({
 			const prefix = `${BACKGROUND_API_PREFIX}/image/`;
 			return url.startsWith(prefix) ? url.slice(prefix.length) : "";
 		}
+		/** Cap on the preview card's height. Past it the card shrinks as a whole —
+		* width follows the ratio — and centers, so a very tall (or very wide) window
+		* keeps the exact viewport ratio instead of squashing the crop. */
+		const PREVIEW_MAX_HEIGHT = 360;
+		/** Clamp a framing offset into its schema domain, trimming the float dust the
+		* pointer-delta division leaves behind (0.30000000000000004 → 0.3). */
+		function clampOffset(value) {
+			return Math.round((value < 0 ? 0 : value > 1 ? 1 : value) * 1e4) / 1e4;
+		}
+		/** Round ratio dust out of an inline px box (400 / (4/3) is 300.00000000000006). */
+		function trimPx(value) {
+			return Math.round(value * 100) / 100;
+		}
 		/** Read the settings store (uSES-friendly). */
 		function readSnapshot() {
 			return settingsClient.getSnapshot();
 		}
 		/** Field-wise equality for distinguishing our own saves from external changes. */
 		function sameSettings(a, b) {
-			return a.enabled === b.enabled && a.uploadId === b.uploadId && a.url === b.url && a.opacity === b.opacity && a.scrim === b.scrim && a.panelOpacity === b.panelOpacity && a.blur === b.blur && a.wallpaperBlur === b.wallpaperBlur && a.fit === b.fit && a.timeline === b.timeline;
+			return a.enabled === b.enabled && a.uploadId === b.uploadId && a.url === b.url && a.opacity === b.opacity && a.scrim === b.scrim && a.panelOpacity === b.panelOpacity && a.blur === b.blur && a.wallpaperBlur === b.wallpaperBlur && a.fit === b.fit && a.offsetX === b.offsetX && a.offsetY === b.offsetY && a.timeline === b.timeline;
 		}
 		/**
 		* A stepped range control. While dragging it re-renders only itself: the value
@@ -1337,6 +1485,14 @@ window.__ModuleLoader__.load({
 			const [noticeDismissed, setNoticeDismissed] = (0, react.useState)(false);
 			const fileInput = (0, react.useRef)(null);
 			const previewRef = (0, react.useRef)(null);
+			const frameRef = (0, react.useRef)(null);
+			const [viewport, setViewport] = (0, react.useState)(() => ({
+				w: window.innerWidth,
+				h: window.innerHeight
+			}));
+			const [frameWidth, setFrameWidth] = (0, react.useState)(0);
+			const [imgMeta, setImgMeta] = (0, react.useState)(null);
+			const panRef = (0, react.useRef)(null);
 			const draftRef = (0, react.useRef)(DEFAULTS);
 			const editingRef = (0, react.useRef)(false);
 			const lastSavedRef = (0, react.useRef)(null);
@@ -1394,6 +1550,36 @@ window.__ModuleLoader__.load({
 					saveNowRef.current(draftRef.current);
 				}, 120);
 			}, []);
+			(0, react.useEffect)(() => {
+				let raf = 0;
+				const sync = () => {
+					raf = 0;
+					setViewport({
+						w: window.innerWidth,
+						h: window.innerHeight
+					});
+				};
+				const onResize = () => {
+					if (raf !== 0) return;
+					raf = window.requestAnimationFrame(sync);
+				};
+				window.addEventListener("resize", onResize);
+				return () => {
+					window.removeEventListener("resize", onResize);
+					if (raf !== 0) window.cancelAnimationFrame(raf);
+				};
+			}, []);
+			(0, react.useEffect)(() => {
+				const el = frameRef.current;
+				if (el === null) return;
+				if (typeof ResizeObserver === "undefined") {
+					setFrameWidth(el.clientWidth);
+					return;
+				}
+				const observer = new ResizeObserver(() => setFrameWidth(el.clientWidth));
+				observer.observe(el);
+				return () => observer.disconnect();
+			}, []);
 			(0, react.useEffect)(() => {
 				if (snapshot.status !== "ready" || snapshot.value === void 0) return;
 				const saved = lastSavedRef.current;
@@ -1494,8 +1680,109 @@ window.__ModuleLoader__.load({
 				setDraft(next);
 				saveNow(next);
 			};
+			/** Natural aspect ratio of the loaded source (null until loaded / on error). */
+			const imageAspect = imgMeta !== null && imgMeta.w > 0 && imgMeta.h > 0 ? imgMeta.w / imgMeta.h : null;
+			/** Preview card box at the live viewport ratio, capped at PREVIEW_MAX_HEIGHT
+			* (past the cap the card shrinks as a whole and the frame centers it); a
+			* width of 0 means "not measured yet" (CSS fallbacks apply). */
+			const cardRatio = viewport.w > 0 && viewport.h > 0 ? viewport.w / viewport.h : 16 / 9;
+			const cardWidth = frameWidth > 0 ? trimPx(Math.min(frameWidth, PREVIEW_MAX_HEIGHT * cardRatio)) : 0;
+			const cardHeight = cardWidth > 0 ? trimPx(cardWidth / cardRatio) : 0;
+			/** The axis the cover crop has slack on — and therefore the only one the
+			* user may pan. A landscape source in a portrait frame overflows sideways
+			* (pan x); a portrait source in a landscape frame overflows vertically
+			* (pan y). null for `contain`, an unloaded source, an unmeasured card or an
+			* exact ratio match (nothing to pan, and no division by zero). */
+			const panAxis = draft.fit === "cover" && imageAspect !== null && cardWidth > 0 && Math.abs(imageAspect - cardRatio) >= 1e-4 ? imageAspect > cardRatio ? "x" : "y" : null;
+			/** Whether a pan has moved the crop off center (drives the recenter chip). */
+			const offsetMoved = draft.offsetX !== .5 || draft.offsetY !== .5;
+			/** Overflow (px) of the rendered image past the card on one axis, measured
+			* from the live DOM (the same frame the wallpaper layer uses), or null when
+			* that axis has nothing to pan. */
+			const overflowFor = (axis) => {
+				const el = previewRef.current;
+				if (el === null || imgMeta === null) return null;
+				const fw = el.clientWidth;
+				const fh = el.clientHeight;
+				if (fw <= 0 || fh <= 0 || imgMeta.w <= 0 || imgMeta.h <= 0) return null;
+				const scale = Math.max(fw / imgMeta.w, fh / imgMeta.h);
+				const overflow = axis === "x" ? imgMeta.w * scale - fw : imgMeta.h * scale - fh;
+				return overflow > 0 ? overflow : null;
+			};
+			/** Write one framing offset live: CSS variables only, no React state — the
+			* pan hot path mirrors ControlSlider's onLive. */
+			const setOffsetLive = (key, value) => {
+				const next = {
+					...draftRef.current,
+					[key]: value
+				};
+				draftRef.current = next;
+				paintBackgroundKnob(key, value);
+				if (previewRef.current) paintPreviewSurface(previewRef.current, next);
+			};
+			const handlePanDown = (e) => {
+				if (panAxis === null) return;
+				const overflow = overflowFor(panAxis);
+				if (overflow === null) return;
+				e.currentTarget.setPointerCapture(e.pointerId);
+				e.preventDefault();
+				markEditing();
+				panRef.current = {
+					axis: panAxis,
+					startPos: panAxis === "x" ? e.clientX : e.clientY,
+					startOffset: panAxis === "x" ? draftRef.current.offsetX : draftRef.current.offsetY,
+					overflow
+				};
+			};
+			const handlePanMove = (e) => {
+				const pan = panRef.current;
+				if (pan === null) return;
+				const delta = (pan.axis === "x" ? e.clientX : e.clientY) - pan.startPos;
+				setOffsetLive(pan.axis === "x" ? "offsetX" : "offsetY", clampOffset(pan.startOffset - delta / pan.overflow));
+			};
+			const handlePanUp = (e) => {
+				if (panRef.current === null) return;
+				panRef.current = null;
+				if (e.currentTarget.hasPointerCapture(e.pointerId)) e.currentTarget.releasePointerCapture(e.pointerId);
+				setDraft({ ...draftRef.current });
+				onCommit();
+			};
+			/** Arrow-key pan on the movable axis (Shift = coarse step). */
+			const nudgeOffset = (axis, direction, coarse) => {
+				const key = axis === "x" ? "offsetX" : "offsetY";
+				setOffsetLive(key, clampOffset(draftRef.current[key] + direction * (coarse ? .1 : .02)));
+				setDraft({ ...draftRef.current });
+				onCommit();
+			};
+			const handlePanKeyDown = (e) => {
+				if (panAxis === null) return;
+				if (panAxis === "x" && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
+					e.preventDefault();
+					nudgeOffset("x", e.key === "ArrowLeft" ? -1 : 1, e.shiftKey);
+					return;
+				}
+				if (panAxis === "y" && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+					e.preventDefault();
+					nudgeOffset("y", e.key === "ArrowUp" ? -1 : 1, e.shiftKey);
+				}
+			};
+			/** Recenter the crop on both axes (recenter chip / double-click). */
+			const handleResetOffset = () => {
+				const next = {
+					...draftRef.current,
+					offsetX: DEFAULT_OFFSET,
+					offsetY: DEFAULT_OFFSET
+				};
+				draftRef.current = next;
+				setDraft(next);
+				paintLive(next);
+				saveNow(next);
+			};
 			const sourceUrl = draft.uploadId ? `${BACKGROUND_API_PREFIX}/image/${draft.uploadId}` : draft.url;
 			const hasImage = sourceUrl !== "";
+			(0, react.useEffect)(() => {
+				setImgMeta(null);
+			}, [sourceUrl]);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: SettingsRow_module_css_default.row,
 				children: [
@@ -1531,27 +1818,55 @@ window.__ModuleLoader__.load({
 						})]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: SettingsRow_module_css_default.preview,
-						ref: previewRef,
-						children: hasImage ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-								className: SettingsRow_module_css_default.previewImg,
-								src: sourceUrl,
-								alt: "",
-								draggable: false,
-								referrerPolicy: "no-referrer"
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: SettingsRow_module_css_default.previewScrim }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: SettingsRow_module_css_default.previewGlass,
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: SettingsRow_module_css_default.previewGlassText,
-									children: t("background.previewGlass")
+						className: SettingsRow_module_css_default.ratioFrame,
+						ref: frameRef,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: SettingsRow_module_css_default.preview,
+							ref: previewRef,
+							"data-pan": panAxis ?? void 0,
+							style: cardHeight > 0 ? {
+								width: `${cardWidth}px`,
+								height: `${cardHeight}px`
+							} : void 0,
+							tabIndex: panAxis === null ? void 0 : 0,
+							"aria-label": panAxis === null ? void 0 : t("background.previewPanHint"),
+							onPointerDown: handlePanDown,
+							onPointerMove: handlePanMove,
+							onPointerUp: handlePanUp,
+							onPointerCancel: handlePanUp,
+							onKeyDown: handlePanKeyDown,
+							onDoubleClick: panAxis === null ? void 0 : handleResetOffset,
+							children: [hasImage ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+									className: SettingsRow_module_css_default.previewImg,
+									src: sourceUrl,
+									alt: "",
+									draggable: false,
+									referrerPolicy: "no-referrer",
+									onLoad: (e) => setImgMeta({
+										w: e.currentTarget.naturalWidth,
+										h: e.currentTarget.naturalHeight
+									}),
+									onError: () => setImgMeta(null)
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: SettingsRow_module_css_default.previewScrim }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: SettingsRow_module_css_default.previewGlass,
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: SettingsRow_module_css_default.previewGlassText,
+										children: t("background.previewGlass")
+									})
 								})
-							})
-						] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: SettingsRow_module_css_default.previewEmpty,
-							children: t("background.noPreview")
+							] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: SettingsRow_module_css_default.previewEmpty,
+								children: t("background.noPreview")
+							}), panAxis !== null && offsetMoved && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: SettingsRow_module_css_default.previewReset,
+								onPointerDown: (e) => e.stopPropagation(),
+								onClick: handleResetOffset,
+								children: t("background.repositionReset")
+							})]
 						})
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {