deepseek-harness-background 0.5.6 → 0.6.1

package/lib/client.js

@@ -104,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. */
@@ -120,6 +125,30 @@ window.__ModuleLoader__.load({
   body[data-ds-dark-theme] .dsh-bg-scrim {
     background: rgba(0, 0, 0, var(--bg-scrim, 0.25));
   }
+  /* Desktop window drag: 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, and on Windows the caption strip that
+     owns drag and double-click maximize). They never take the pointer, so they
+     must not join the composition at all.
+
+     The value that achieves that is \`initial\`, NOT \`none\`: Chromium maps the
+     \`none\` keyword onto \`no-drag\`, so a \`-webkit-app-region: none\` layer IS
+     collected and DOES punch a hole exactly like \`no-drag\` does. Measured, not
+     assumed — getComputedStyle on the Windows 0.2.0-rc.2 desktop build returns
+     "no-drag" for it, and with these two full-viewport layers in that state the
+     whole window stopped dragging and double-click maximize stopped working;
+     \`initial\` is the one declaration that reads back as "none" and leaves the
+     composition. 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: initial !important;
+  }
 
   /* Active: make the app frame + sidebar background transparent so all columns
      share the same wallpaper + scrim backdrop. */
@@ -136,7 +165,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. */
@@ -160,6 +188,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. */
@@ -308,6 +367,78 @@ window.__ModuleLoader__.load({
     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. The anchor is the header ELEMENT, not the card's
+     first child: a single-file turn renders that same header through the
+     HoverCard primitive, which wraps its anchor in a span (ui-primitives
+     HoverCard.tsx), so a child-position anchor reached only that wrapper and
+     left the real header's fill in place — the whole card stayed opaque. */
+  body[data-dsh-bg-glass] [data-changed-files] button[class*="_header"] {
+    background-color: transparent;
+  }
+  body[data-dsh-bg-glass] [data-changed-files] button[class*="_header"]:hover:not(:disabled),
+  body[data-dsh-bg-glass] [data-changed-files] button[class*="_header"]:focus-visible {
+    background-color: var(--dsw-alias-interactive-bg-hover);
+  }
+
+  /* ---- Delivered file cards ([data-presented-file]) ---------------------
+     The deliverable grid's file card paints --deliverable-fill, a static
+     neutral (--dsw-static-neutral-50, or 850 in dark) that no overridden token
+     reaches, so it stayed fully opaque over every wallpaper. It takes the same
+     explicit-fill recipe as the changed-files card, plus its own hover state:
+     the module's .file:hover repaints the fill with --deliverable-hover, the
+     other static neutral. This rule outranks it (two attributes + body against
+     one class + pseudo-class), so the fill and the sheen both survive hover.
+     The card's inner tile and icon already paint with translucent color-mix
+     fills and need nothing here. */
+  body[data-dsh-bg-glass] [data-presented-file] {
+    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:
+      inset 0 1px 0 rgba(255, 255, 255, 0.32),
+      inset 0 0 0 0.5px rgba(255, 255, 255, 0.08),
+      0 4px 14px rgba(0, 0, 0, 0.08);
+  }
+  body[data-dsh-bg-glass] [data-presented-file]:hover {
+    background-color: color-mix(in srgb, rgb(255 255 255) calc(var(--bg-glass-alpha-strong, 0.8) * 100%), transparent);
+  }
+
+  /* ---- 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);
+  }
+
+  /* ---- Sidebar bonus notice (the account notice card) -------------------
+     The account notice portals an aside straight onto document.body and paints
+     --dsw-specific-input-major — a token the painter DOES turn translucent —
+     but its own module adds no backdrop-filter, so over a wallpaper it reads as
+     flat transparency instead of frosted glass. Same shape as the dock family
+     above: token fill + the shared sheen and exposure chain. The anchor is that
+     aside with its own role="status" child (the notice copy); the host ships no
+     data attribute for the card, and the direct-child step keeps the rule on
+     the portaled body child rather than any nested status region. */
+  body[data-dsh-bg-glass] > aside:has(> [role="status"]) {
+    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
@@ -330,6 +461,106 @@ window.__ModuleLoader__.load({
     -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);
   }
+
+  /* ---- Transcript tool cards the whitelist missed -----------------------
+     Three tool-row surfaces still painted an opaque ground over a wallpaper.
+     Two of them carry a fill no overridden token reaches: the present tool's
+     result box paints --dsw-alias-bg-layer-1 (the token the painter keeps
+     opaque on purpose, because it backs the settings UI and the dialogs), and
+     the schedule_create card reuses the delivery card's static neutral
+     (--card-fill = --dsw-static-neutral-50 / 850 — its own module header says
+     the box is the delivery card). Both need an explicit fill on top of
+     the shared sheen chain, and the schedule card's own hover repaints from the
+     other static neutral, so the glass fill has to be restated there.
+
+     The turn-trigger card is the odd one out: 0.2.0-rc.2 split its fill per
+     scheme (--dsw-alias-turn-trigger-bg, set to the painter's
+     --dsw-alias-markdown-code-block in light but to an untouched
+     --dsw-alias-interactive-bg-hover in dark), which left the very same card
+     translucent in light and fully opaque in dark. One explicit fill — the
+     painter's composer token, the same one every other glass surface uses —
+     ends that split, for the resting and the hover state alike.
+
+     Anchors are the rows' own data-tool / data-turn-trigger marks; class hashes
+     never are. */
+  body[data-dsh-bg-glass] [data-tool="present"] pre,
+  body[data-dsh-bg-glass] [data-tool="schedule_create"],
+  body[data-dsh-bg-glass] [data-turn-trigger] {
+    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:
+      inset 0 1px 0 rgba(255, 255, 255, 0.32),
+      inset 0 0 0 0.5px rgba(255, 255, 255, 0.08),
+      0 4px 14px rgba(0, 0, 0, 0.08);
+  }
+  body[data-dsh-bg-glass] [data-tool="schedule_create"]:hover,
+  body[data-dsh-bg-glass] [data-turn-trigger]:hover {
+    background-color: color-mix(in srgb, rgb(255 255 255) calc(var(--bg-glass-alpha-strong, 0.8) * 100%), transparent);
+  }
+
+  /* ---- Platform overlay return bar (Account settings -> usage / top-up) --
+     The isolated native Platform view paints its whole surface with
+     --dsw-alias-bg-base, the very token the painter sets to transparent while a
+     wallpaper is active, so the 48px return bar went see-through even though
+     the native child below it is opaque. dsh itself calls this surface the
+     opaque native Platform page (ui-chat README), so the ground comes back
+     here, from the two literals --dsw-alias-bg-base is defined with in
+     ui-theme, one per scheme. The anchor is the overlay's own aria-modal dialog
+     with the Platform return bar as a direct child: no other dialog carries
+     data-window-drag. Gated on data-dsh-bg (a wallpaper is active), NOT on the
+     glass gate — a fully opaque panel setting must not hand this surface back
+     to transparency. */
+  body[data-dsh-bg] [role="dialog"][aria-modal="true"]:has(> header[data-window-drag]) {
+    background-color: var(--dsw-static-neutral-bluish-00);
+  }
+  body[data-ds-dark-theme][data-dsh-bg] [role="dialog"][aria-modal="true"]:has(> header[data-window-drag]) {
+    background-color: var(--dsw-static-neutral-bluish-950);
+  }
+
+  /* ---- Other surfaces that lean on the base token for their ground ------
+     The same mechanism as the Platform overlay above, in three more places.
+     dsh paints each of these with --dsw-alias-bg-base and leans on that fill:
+     - a Reasoning row's pinned disclosure header masks the thinking prose
+       scrolling under it (the sheet's own selector is
+       .root[data-expanded] [data-open] [data-disclosure-row]);
+     - the compaction marker's pinned toggle masks the summary prose under it
+       (its sheet says so out loud: the fill is what masks the prose);
+     - the inspect buttons of the tool rows and of the skill row are quiet
+       in-flow affordances that deliberately take the base ground instead of
+       the heavier overlay token.
+     With the base token transparent they lose that ground and the prose they
+     are supposed to mask shows through. The literals below are the token's own
+     two definitions, one per scheme; the anchors are ReasoningRow's own
+     data-variant mark, the compaction icon the marker ships, and the class
+     suffix those inspect buttons share across three packages. */
+  body[data-dsh-bg] [data-variant="think"][data-expanded] [data-open] [data-disclosure-row],
+  body[data-dsh-bg] [class*="_compactionButton"]:has([data-compaction-icon="context"]),
+  body[data-dsh-bg] [class*="_inspectButton"] {
+    background-color: var(--dsw-static-neutral-bluish-00);
+  }
+  body[data-ds-dark-theme][data-dsh-bg] [data-variant="think"][data-expanded] [data-open] [data-disclosure-row],
+  body[data-ds-dark-theme][data-dsh-bg] [class*="_compactionButton"]:has([data-compaction-icon="context"]),
+  body[data-ds-dark-theme][data-dsh-bg] [class*="_inspectButton"] {
+    background-color: var(--dsw-static-neutral-bluish-950);
+  }
+
+  /* ---- The ask-user transcript card -------------------------------------
+     A message-flow card like the changed-files one, but its ground is
+     --dsw-alias-bg-base rather than an opaque-token family the painter never
+     overrides — so with the base transparent the card had no ground at all and
+     its question/answer text sat straight on the wallpaper. It takes the
+     shared frosted recipe. The anchor is the tool row's own mark plus the card
+     class, because the card element itself carries no data attribute; the
+     class is matched by SUFFIX, so a sibling class such as _cardBody can never
+     be swept in. */
+  body[data-dsh-bg-glass] [data-tool="ask_user_question"] [class$="_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));
+    -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);
+  }
 `;
 		/**
 		* Inject the backdrop stylesheet once. Safe to call repeatedly; a second call
@@ -355,6 +586,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
 		/**
@@ -559,6 +792,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));
@@ -626,7 +861,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));
 				}
 			}
 			/**
@@ -723,6 +964,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",
@@ -740,6 +983,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`);
@@ -985,6 +1230,8 @@ window.__ModuleLoader__.load({
 			"background.fit": "填充方式",
 			"background.cover": "铺满",
 			"background.contain": "完整",
+			"background.previewPanHint": "拖动预览可调整图片位置，双击居中",
+			"background.repositionReset": "重置位置",
 			"background.clear": "清除背景",
 			"background.uploadFailed": "上传失败，请重试",
 			"background.saveFailed": "保存失败，请重试",
@@ -1016,6 +1263,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",
@@ -1149,7 +1398,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");
@@ -1159,44 +1408,46 @@ window.__ModuleLoader__.load({
 			document.head.appendChild(tag);
 		}
 		var SettingsRow_module_css_default = {
-			"sectionLabel": "-ozqdq_sectionLabel",
+			"preview": "-ozqdq_preview",
+			"notice": "-ozqdq_notice",
 			"row": "-ozqdq_row",
+			"section": "-ozqdq_section",
+			"slider": "-ozqdq_slider",
+			"clearRow": "-ozqdq_clearRow",
 			"previewGlass": "-ozqdq_previewGlass",
-			"switchKnob": "-ozqdq_switchKnob",
-			"clearBtn": "-ozqdq_clearBtn",
+			"previewReset": "-ozqdq_previewReset",
+			"btnDanger": "-ozqdq_btnDanger",
 			"segRow": "-ozqdq_segRow",
-			"desc": "-ozqdq_desc",
-			"sourceRow": "-ozqdq_sourceRow",
-			"btnPrimary": "-ozqdq_btnPrimary",
+			"ratioFrame": "-ozqdq_ratioFrame",
 			"titleRow": "-ozqdq_titleRow",
-			"noticeBtn": "-ozqdq_noticeBtn",
-			"section": "-ozqdq_section",
+			"header": "-ozqdq_header",
+			"title": "-ozqdq_title",
+			"clearBtn": "-ozqdq_clearBtn",
+			"btnPrimary": "-ozqdq_btnPrimary",
 			"sliderRow": "-ozqdq_sliderRow",
-			"enabledBadge": "-ozqdq_enabledBadge",
-			"noticeText": "-ozqdq_noticeText",
-			"urlRow": "-ozqdq_urlRow",
-			"previewScrim": "-ozqdq_previewScrim",
-			"sliderLabel": "-ozqdq_sliderLabel",
 			"sliderValue": "-ozqdq_sliderValue",
-			"header": "-ozqdq_header",
+			"segActive": "-ozqdq_segActive",
+			"switch": "-ozqdq_switch",
+			"switchKnob": "-ozqdq_switchKnob",
+			"desc": "-ozqdq_desc",
 			"error": "-ozqdq_error",
-			"urlInput": "-ozqdq_urlInput",
 			"hint": "-ozqdq_hint",
-			"btnDanger": "-ozqdq_btnDanger",
-			"title": "-ozqdq_title",
-			"previewImg": "-ozqdq_previewImg",
-			"segLabel": "-ozqdq_segLabel",
-			"switch": "-ozqdq_switch",
-			"preview": "-ozqdq_preview",
-			"segGroup": "-ozqdq_segGroup",
+			"sourceRow": "-ozqdq_sourceRow",
+			"enabledBadge": "-ozqdq_enabledBadge",
 			"previewGlassText": "-ozqdq_previewGlassText",
-			"segActive": "-ozqdq_segActive",
-			"btn": "-ozqdq_btn",
-			"clearRow": "-ozqdq_clearRow",
-			"notice": "-ozqdq_notice",
-			"segBtn": "-ozqdq_segBtn",
+			"segLabel": "-ozqdq_segLabel",
+			"sliderLabel": "-ozqdq_sliderLabel",
 			"previewEmpty": "-ozqdq_previewEmpty",
-			"slider": "-ozqdq_slider"
+			"noticeBtn": "-ozqdq_noticeBtn",
+			"sectionLabel": "-ozqdq_sectionLabel",
+			"noticeText": "-ozqdq_noticeText",
+			"previewImg": "-ozqdq_previewImg",
+			"previewScrim": "-ozqdq_previewScrim",
+			"btn": "-ozqdq_btn",
+			"urlRow": "-ozqdq_urlRow",
+			"segGroup": "-ozqdq_segGroup",
+			"urlInput": "-ozqdq_urlInput",
+			"segBtn": "-ozqdq_segBtn"
 		};
 		//#endregion
 		//#region src/client/SettingsRow.tsx
@@ -1229,6 +1480,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
@@ -1271,13 +1524,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
@@ -1371,6 +1637,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);
@@ -1428,6 +1702,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;
@@ -1528,8 +1832,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: [
@@ -1565,27 +1970,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", {