deepseek-harness-background 0.2.0

package/lib/client.js

@@ -0,0 +1,1116 @@
+window.__ModuleLoader__.load({
+	id: "deepseek-harness-background",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		let react = require("react");
+		let react_jsx_runtime = require("react/jsx-runtime");
+		//#region src/client/background-css.ts
+		/**
+		* Background CSS — the stylesheet injected once into the document when the
+		* plugin first runs. It defines the behind-body wallpaper layer, the scrim,
+		* and the frosted-glass panels, all driven by CSS variables the painter writes
+		* onto `document.body`. Kept in a single idempotent `<style data-plugin-css>`
+		* tag (mirrors the reference `dsh-wallpaper-engine` bundle).
+		*/
+		/** Unique id stamped on the injected style element (dedup key). */
+		const BACKGROUND_CSS_TAG = "deepseek-harness-background/styles";
+		/** Body attribute the painter sets while a wallpaper is active. */
+		const ACTIVE_ATTR = "data-dsh-bg";
+		/**
+		* The backdrop CSS. The wallpaper is a fixed `z-index:-2` element (below the
+		* scrim at `-1`, below the UI). While active, the official surface tokens are
+		* made transparent (so the wallpaper shows through every column) and the
+		* opaque input / bubble surfaces turn into translucent frosted glass.
+		* Selectors target authored attributes (`data-dsh-bg`, `data-composer-card`)
+		* and CSS-module SUFFIX conventions (`_bubble`) — the same stable anchors the
+		* reference engine uses, since hashed prefixes change across shell rebuilds.
+		*/
+		const BACKGROUND_CSS = `
+  .dsh-bg-layer {
+    position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
+  }
+  .dsh-bg-layer .dsh-bg-image {
+    width: 100%; height: 100%; display: block; border: 0; background: transparent;
+    object-fit: var(--bg-object-fit, cover);
+    opacity: var(--bg-opacity, 1);
+    filter: blur(var(--bg-wallpaper-blur, 0px));
+    /* Blur thins the edges; scale the image up to hide the fringe. */
+    transform: scale(var(--bg-wallpaper-scale, 1));
+    transform-origin: center;
+  }
+  /* Scrim is theme-aware: a WHITE veil in the light scheme (it lifts the art
+     toward the near-white surface so dark text keeps contrast) and a BLACK veil
+     in the dark scheme (it dims the art so light text keeps contrast). */
+  .dsh-bg-scrim {
+    position: fixed; inset: 0; z-index: -1; pointer-events: none;
+    background: rgba(255, 255, 255, var(--bg-scrim, 0.25));
+  }
+  body[data-ds-dark-theme] .dsh-bg-scrim {
+    background: rgba(0, 0, 0, var(--bg-scrim, 0.25));
+  }
+
+  /* Active: make the app frame + sidebar background transparent so all columns
+     share the same wallpaper + scrim backdrop. */
+  body[data-dsh-bg] {
+    --dsw-alias-bg-base: transparent;
+    --dsw-specific-sidebar-fill: transparent;
+  }
+
+  /* Frosted glass over the opaque conversation surfaces (composer + bubbles).
+     The surface translucency is driven by --dsw-specific-input-major /
+     --dsw-specific-bubble, which the painter writes (theme-aware) so that a
+     fully-opaque panel restores the official surfaces. The blur here comes
+     from --bg-glass-blur; a faint top-weighted specular sheen makes the
+     translucent surfaces read as wet glass. */
+  body[data-dsh-bg] [data-composer-card],
+  body[data-dsh-bg] [class*="_bubble"] {
+    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05) 38%, rgba(255, 255, 255, 0.02));
+    -webkit-backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.6)) brightness(var(--bg-glass-brightness, 1.04)) contrast(1.01);
+    backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.6)) brightness(var(--bg-glass-brightness, 1.04)) contrast(1.01);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, var(--bg-glass-highlight, 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, var(--bg-glass-shadow, 0.12));
+  }
+`;
+		/**
+		* Inject the backdrop stylesheet once. Safe to call repeatedly; a second call
+		* is a no-op (dedup key on the style tag).
+		*/
+		function injectBackgroundCss() {
+			if (document.querySelector(`style[data-plugin-css="deepseek-harness-background/styles"]`)) return;
+			const tag = document.createElement("style");
+			tag.dataset.plugin = "deepseek-harness-background";
+			tag.dataset.pluginCss = BACKGROUND_CSS_TAG;
+			tag.textContent = BACKGROUND_CSS;
+			document.head.appendChild(tag);
+		}
+		//#endregion
+		//#region src/settings.ts
+		/** Browser-facing base path of the background API (shared with the host routes). */
+		const BACKGROUND_API_PREFIX = "/api/bg-wallpaper";
+		/** Maximum scrim opacity (a nearly opaque veil keeps text legible over any art). */
+		const SCRIM_MAX = .95;
+		/** Default scrim strength applied over user art (a light readability veil). */
+		const DEFAULT_SCRIM = .25;
+		/** Default panel opacity (0..1); 1 = fully opaque official surfaces, 0 = fully transparent glass. */
+		const DEFAULT_PANEL_OPACITY = .15;
+		/** Default background rendering mode. */
+		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"];
+		//#endregion
+		//#region src/client/backdrop.ts
+		/**
+		* Background painter — renders the user background behind the whole app frame:
+		* a fixed `z-index:-2` wallpaper element plus a `z-index:-1` scrim on
+		* `document.body`, driven by the `data-dsh-bg` body attribute and a set of
+		* CSS variables. It also applies the frosted-glass surface tokens so the
+		* wallpaper shows through translucent input / bubble panels.
+		*
+		* Retraction discipline mirrors the reference skin plugins: every property /
+		* DOM node this painter owns is restored to its prior state on dispose, and
+		* the `data-ds-dark-theme` observer is disconnected.
+		*/
+		/** Class names the layer and scrim elements carry. */
+		const LAYER_CLASS = "dsh-bg-layer";
+		const IMAGE_CLASS = "dsh-bg-image";
+		const SCRIM_CLASS = "dsh-bg-scrim";
+		/** Surface tokens this painter overwrites (restored on dispose). */
+		const SURFACE_TOKENS = ["--dsw-specific-input-major", "--dsw-specific-bubble"];
+		/** Fraction of the official white surface alpha kept at the most transparent panel setting. */
+		const GLASS_MIN_ALPHA = .05;
+		/**
+		* Resolve the effective background image url for a section.
+		* @param settings - resolved background section.
+		* @returns the image url, or '' when no source is set.
+		*/
+		function backgroundImageUrl(settings, uploadBase) {
+			if (settings.uploadId) return `${uploadBase}/image/${settings.uploadId}`;
+			return settings.url;
+		}
+		/**
+		* Manage the behind-body wallpaper + scrim layers and the glass surface.
+		*/
+		var BackgroundPainter = class {
+			layer = null;
+			img = null;
+			scrim = null;
+			observer;
+			active = false;
+			settings;
+			savedTokens = /* @__PURE__ */ new Map();
+			savedVars = /* @__PURE__ */ new Map();
+			/** Remember + hijack a property only once so dispose restores the original. */
+			rememberOnce(prop) {
+				if (this.savedTokens.has(prop) || this.savedVars.has(prop)) return;
+				const value = document.body.style.getPropertyValue(prop);
+				if (SURFACE_TOKENS.includes(prop)) this.savedTokens.set(prop, value);
+				else this.savedVars.set(prop, value);
+			}
+			/**
+			* Apply the latest settings. Idempotent.
+			* @param settings - resolved background section.
+			* @param uploadBase - the API base for resolving uploads.
+			*/
+			apply(settings, uploadBase) {
+				this.settings = settings;
+				if (!settings.enabled) {
+					this.dispose();
+					return;
+				}
+				injectBackgroundCss();
+				this.rememberOnce("--dsw-alias-bg-base");
+				this.rememberOnce("--dsw-specific-sidebar-fill");
+				document.body.style.setProperty("--dsw-alias-bg-base", "transparent");
+				document.body.style.setProperty("--dsw-specific-sidebar-fill", "transparent");
+				const url = backgroundImageUrl(settings, uploadBase);
+				if (url === "") {
+					this.applySurfaceGlass(settings, true);
+					this.active = false;
+					this.removeLayers();
+					document.body.removeAttribute(ACTIVE_ATTR);
+					return;
+				}
+				if (!this.layer) {
+					this.layer = document.createElement("div");
+					this.layer.className = LAYER_CLASS;
+					this.img = document.createElement("img");
+					this.img.className = IMAGE_CLASS;
+					this.img.alt = "";
+					this.layer.appendChild(this.img);
+					document.body.appendChild(this.layer);
+				}
+				if (this.img && this.img.src !== url) this.img.src = url;
+				if (!this.scrim) {
+					this.scrim = document.createElement("div");
+					this.scrim.className = SCRIM_CLASS;
+					document.body.appendChild(this.scrim);
+				}
+				document.body.setAttribute(ACTIVE_ATTR, "on");
+				this.active = true;
+				document.body.style;
+				this.setVar("--bg-object-fit", settings.fit);
+				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));
+				this.setVar("--bg-scrim", String(settings.scrim));
+				this.setVar("--bg-glass-blur", `${settings.blur}px`);
+				this.setVar("--bg-glass-saturate", String(1.15 + settings.blur * .03));
+				this.applySurfaceGlass(settings, false);
+				if (!this.observer) {
+					this.observer = new MutationObserver(() => this.applySurfaceGlass(this.settings, false));
+					this.observer.observe(document.body, {
+						attributes: true,
+						attributeFilter: ["data-ds-dark-theme"]
+					});
+				}
+			}
+			/** Write one owned CSS variable onto body. */
+			setVar(name, value) {
+				this.rememberOnce(name);
+				document.body.style.setProperty(name, value);
+			}
+			/**
+			* Update one effect knob without re-running the full apply. This is the hot
+			* path for slider drags (many events per second): only the single CSS
+			* variable changes, the DOM layers are untouched.
+			* @param key - the knob to update.
+			* @param value - its new value in its canonical unit.
+			*/
+			setKnob(key, value) {
+				if (this.settings === void 0 || !this.settings.enabled) return;
+				switch (key) {
+					case "opacity":
+						this.setVar("--bg-opacity", String(value));
+						break;
+					case "scrim":
+						this.setVar("--bg-scrim", String(value));
+						break;
+					case "blur":
+						this.setVar("--bg-glass-blur", `${value}px`);
+						this.setVar("--bg-glass-saturate", String(1.15 + Number(value) * .03));
+						break;
+					case "wallpaperBlur":
+						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));
+				}
+			}
+			/**
+			* Apply the translucent-glass surface tokens (or restore the official ones
+			* when the panel is fully opaque / there is no background).
+			* @param settings - resolved section (for panelOpacity).
+			* @param forceRestore - true to restore official surfaces regardless (used
+			*   when no source is set, so leftover glass tokens never linger).
+			*/
+			applySurfaceGlass(settings, forceRestore) {
+				const s = document.body.style;
+				const inDark = document.body.dataset.dsDarkTheme !== void 0;
+				for (const token of SURFACE_TOKENS) this.rememberOnce(token);
+				const restore = () => {
+					for (const token of SURFACE_TOKENS) {
+						const original = this.savedTokens.get(token);
+						if (original !== void 0 && original !== "") s.setProperty(token, original);
+						else s.removeProperty(token);
+					}
+				};
+				if (forceRestore || settings === void 0 || settings.panelOpacity >= 1) {
+					restore();
+					this.setVar("--bg-glass-blur", "0px");
+					return;
+				}
+				const alpha = GLASS_MIN_ALPHA + settings.panelOpacity * .85;
+				const clamped = Math.max(0, Math.min(.9, alpha));
+				const factor = inDark ? .4 : .8;
+				s.setProperty("--dsw-specific-input-major", `rgba(255, 255, 255, ${(clamped * factor).toFixed(3)})`);
+				s.setProperty("--dsw-specific-bubble", `rgba(255, 255, 255, ${(clamped * factor * .8).toFixed(3)})`);
+			}
+			/** Remove the wallpaper + scrim layers and clear the active attribute. */
+			removeLayers() {
+				if (this.layer) {
+					this.layer.remove();
+					this.layer = null;
+					this.img = null;
+				}
+				if (this.scrim) {
+					this.scrim.remove();
+					this.scrim = null;
+				}
+			}
+			/** Restore every owned property and remove the layers. */
+			dispose() {
+				this.observer?.disconnect();
+				this.observer = void 0;
+				this.removeLayers();
+				const s = document.body.style;
+				document.body.removeAttribute(ACTIVE_ATTR);
+				for (const [prop, value] of this.savedTokens) s.setProperty(prop, value);
+				for (const [prop, value] of this.savedVars) s.setProperty(prop, value);
+				this.savedTokens.clear();
+				this.savedVars.clear();
+				this.active = false;
+				this.settings = void 0;
+			}
+			/** @returns whether a wallpaper is currently rendered. */
+			isActive() {
+				return this.active;
+			}
+		};
+		/** Module-level painter singleton shared by the settings row preview and the live apply. */
+		const backgroundPainter = new BackgroundPainter();
+		/**
+		* Apply the given settings through the shared painter (idempotent). Convenience
+		* used by the settings row for live previews and by the plugin apply to render
+		* the persisted section.
+		* @param settings - settings to apply (may be an unsaved draft for preview).
+		*/
+		function paintBackground(settings) {
+			backgroundPainter.apply(settings, BACKGROUND_API_PREFIX);
+		}
+		/**
+		* Update one effect knob on the live backdrop without re-running the full
+		* apply — the hot path for slider drags (see BackgroundPainter.setKnob).
+		* @param key - the knob to update.
+		* @param value - its new value.
+		*/
+		function paintBackgroundKnob(key, value) {
+			backgroundPainter.setKnob(key, value);
+		}
+		/** Preview variables the settings-surface preview card consumes. */
+		const PREVIEW_VARS = [
+			"--bg-opacity",
+			"--bg-scrim",
+			"--bg-object-fit",
+			"--bg-wallpaper-blur",
+			"--bg-wallpaper-scale",
+			"--bg-glass-blur",
+			"--bg-glass-saturate",
+			"--bg-preview-glass"
+		];
+		/**
+		* Push the effect knobs onto one element (the settings-surface preview card)
+		* so dragging a slider updates the card without touching the live backdrop.
+		* The card's CSS reads the same variable names as the painter writes on body.
+		* @param el - the preview element.
+		* @param settings - the draft settings to render (may be unsaved).
+		*/
+		function paintPreviewSurface(el, settings) {
+			const s = el.style;
+			s.setProperty("--bg-object-fit", settings.fit);
+			s.setProperty("--bg-opacity", String(settings.opacity));
+			s.setProperty("--bg-scrim", String(settings.scrim));
+			s.setProperty("--bg-wallpaper-blur", `${settings.wallpaperBlur}px`);
+			s.setProperty("--bg-wallpaper-scale", (1 + settings.wallpaperBlur * .006).toFixed(4));
+			const inDark = document.body.dataset.dsDarkTheme !== void 0;
+			if (settings.panelOpacity >= 1) {
+				s.setProperty("--bg-glass-blur", "0px");
+				s.setProperty("--bg-preview-glass", "var(--dsw-alias-bg-layer-1)");
+				return;
+			}
+			s.setProperty("--bg-glass-blur", `${settings.blur}px`);
+			s.setProperty("--bg-glass-saturate", String(1.15 + settings.blur * .03));
+			const alpha = GLASS_MIN_ALPHA + settings.panelOpacity * .85;
+			const clamped = Math.max(0, Math.min(.9, alpha));
+			const factor = inDark ? .4 : .8;
+			s.setProperty("--bg-preview-glass", `rgba(255, 255, 255, ${(clamped * factor * .8).toFixed(3)})`);
+		}
+		/** Remove every preview variable from an element (restores CSS defaults). */
+		function clearPreviewSurface(el) {
+			for (const name of PREVIEW_VARS) el.style.removeProperty(name);
+		}
+		//#endregion
+		//#region src/client/locales.ts
+		/** Chinese copy. */
+		const zh = {
+			"background.title": "自定义背景",
+			"background.description": "为整个应用界面设置背景图片，可调不透明度、遮罩、面板透明与毛玻璃模糊",
+			"background.upload": "上传图片",
+			"background.uploading": "上传中…",
+			"background.uploadMinetypes": "支持 JPG / PNG / WebP / GIF",
+			"background.urlPlaceholder": "或粘贴图片 http(s) 链接后回车",
+			"background.applyUrl": "应用链接",
+			"background.enabled": "背景已启用",
+			"background.source": "图片",
+			"background.effects": "效果",
+			"background.noPreview": "上传图片或粘贴链接后，此处实时预览效果",
+			"background.previewGlass": "毛玻璃",
+			"background.opacity": "不透明度",
+			"background.scrim": "遮罩",
+			"background.panelOpacity": "面板不透明度",
+			"background.blur": "毛玻璃模糊",
+			"background.wallpaperBlur": "壁纸模糊",
+			"background.fit": "填充方式",
+			"background.cover": "铺满",
+			"background.contain": "完整",
+			"background.clear": "清除背景",
+			"background.uploadFailed": "上传失败，请重试",
+			"background.saveFailed": "保存失败，请重试"
+		};
+		/** English copy. */
+		const en = {
+			"background.title": "Custom Background",
+			"background.description": "Set a background image behind the whole app surface with adjustable opacity, scrim, panel transparency and glass blur",
+			"background.upload": "Upload image",
+			"background.uploading": "Uploading…",
+			"background.uploadMinetypes": "JPG / PNG / WebP / GIF",
+			"background.urlPlaceholder": "Or paste an image http(s) link and press Enter",
+			"background.applyUrl": "Apply URL",
+			"background.enabled": "Background on",
+			"background.source": "Image",
+			"background.effects": "Effects",
+			"background.noPreview": "Upload an image or paste a link to preview live here",
+			"background.previewGlass": "Glass",
+			"background.opacity": "Opacity",
+			"background.scrim": "Scrim",
+			"background.panelOpacity": "Panel opacity",
+			"background.blur": "Glass blur",
+			"background.wallpaperBlur": "Wallpaper blur",
+			"background.fit": "Fit",
+			"background.cover": "Cover",
+			"background.contain": "Contain",
+			"background.clear": "Clear background",
+			"background.uploadFailed": "Upload failed, try again",
+			"background.saveFailed": "Save failed, try again"
+		};
+		//#endregion
+		//#region node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+		function r(e) {
+			var t, f, n = "";
+			if ("string" == typeof e || "number" == typeof e) n += e;
+			else if ("object" == typeof e) if (Array.isArray(e)) {
+				var o = e.length;
+				for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+			} else for (f in e) e[f] && (n && (n += " "), n += f);
+			return n;
+		}
+		function clsx() {
+			for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+			return n;
+		}
+		//#endregion
+		//#region src/client/settings-client.ts
+		/**
+		* Observable settings client (getSnapshot/subscribe — the uSES currency).
+		* Methods are arrow properties so React's useSyncExternalStore can call them
+		* without an owning `this`.
+		*/
+		var SettingsClient = class {
+			snapshot = { status: "loading" };
+			listeners = /* @__PURE__ */ new Set();
+			/** Monotonic request id; the latest save wins even when POSTs interleave. */
+			saveSeq = 0;
+			/** Pending save promise (used by the row's flush-on-unmount). */
+			pending;
+			/** @returns the current sync snapshot (stable reference until the next change). */
+			getSnapshot = () => this.snapshot;
+			/** Observe snapshot replacements. @returns the disposer removing this listener. */
+			subscribe = (listener) => {
+				this.listeners.add(listener);
+				return () => {
+					this.listeners.delete(listener);
+				};
+			};
+			notify() {
+				for (const listener of this.listeners) listener();
+			}
+			/** Await any in-flight save (used before teardown so edits are not dropped). */
+			async flush() {
+				await this.pending;
+			}
+			/** Fetch the section from the host. */
+			async load() {
+				try {
+					const response = await fetch(`${BACKGROUND_API_PREFIX}/settings`);
+					if (!response.ok) throw new Error(`HTTP ${response.status}`);
+					const body = await response.json();
+					if (!body.ok || body.value === void 0) throw new Error("unexpected payload");
+					this.snapshot = {
+						status: "ready",
+						value: body.value
+					};
+				} catch {
+					this.snapshot = { status: "error" };
+				}
+				this.notify();
+			}
+			/**
+			* Persist the section through the host route. Concurrent calls are
+			* serialized by a request sequence: an older save that resolves after a
+			* newer one must not clobber the newer snapshot with its stale value.
+			* @param section - the complete next section.
+			* @returns whether the host accepted the write.
+			*/
+			async save(section) {
+				const seq = ++this.saveSeq;
+				const run = async () => {
+					try {
+						const response = await fetch(`${BACKGROUND_API_PREFIX}/settings`, {
+							method: "POST",
+							headers: { "content-type": "application/json" },
+							body: JSON.stringify(section)
+						});
+						const body = await response.json();
+						if (!response.ok || !body.ok || body.value === void 0) return false;
+						if (seq !== this.saveSeq) return true;
+						this.snapshot = {
+							status: "ready",
+							value: body.value
+						};
+						this.notify();
+						return true;
+					} catch {
+						return false;
+					}
+				};
+				const promise = run();
+				this.pending = promise;
+				return promise;
+			}
+			/**
+			* Upload a local image file; on success stores its id into the snapshot and
+			* returns the resolved background url (or null on failure).
+			* @param file - the chosen image file.
+			* @returns the resolved image url, or null.
+			*/
+			async upload(file) {
+				try {
+					const response = await fetch(`${BACKGROUND_API_PREFIX}/upload`, {
+						method: "POST",
+						headers: { "content-type": file.type },
+						body: file
+					});
+					const body = await response.json();
+					if (!response.ok || !body.ok || body.id === void 0 || body.url === void 0) return null;
+					return body.url ?? null;
+				} catch {
+					return null;
+				}
+			}
+		};
+		/** Shared client for the painter and the settings row. */
+		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_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.6));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:#fff;opacity:.8;text-shadow:0 1px 2px #00000059;white-space:nowrap;font-size:11px;line-height:1}.-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}@media (prefers-reduced-motion:reduce){.-ozqdq_btn{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");
+			tag.dataset.plugin = "deepseek-harness-background";
+			tag.dataset.pluginCss = tagId;
+			tag.textContent = css;
+			document.head.appendChild(tag);
+		}
+		var SettingsRow_module_css_default = {
+			"titleRow": "-ozqdq_titleRow",
+			"clearBtn": "-ozqdq_clearBtn",
+			"preview": "-ozqdq_preview",
+			"previewGlass": "-ozqdq_previewGlass",
+			"header": "-ozqdq_header",
+			"previewEmpty": "-ozqdq_previewEmpty",
+			"sectionLabel": "-ozqdq_sectionLabel",
+			"btnDanger": "-ozqdq_btnDanger",
+			"sliderRow": "-ozqdq_sliderRow",
+			"segGroup": "-ozqdq_segGroup",
+			"clearRow": "-ozqdq_clearRow",
+			"slider": "-ozqdq_slider",
+			"sliderValue": "-ozqdq_sliderValue",
+			"hint": "-ozqdq_hint",
+			"segLabel": "-ozqdq_segLabel",
+			"segBtn": "-ozqdq_segBtn",
+			"sliderLabel": "-ozqdq_sliderLabel",
+			"segRow": "-ozqdq_segRow",
+			"desc": "-ozqdq_desc",
+			"urlRow": "-ozqdq_urlRow",
+			"previewImg": "-ozqdq_previewImg",
+			"segActive": "-ozqdq_segActive",
+			"error": "-ozqdq_error",
+			"title": "-ozqdq_title",
+			"urlInput": "-ozqdq_urlInput",
+			"btn": "-ozqdq_btn",
+			"btnPrimary": "-ozqdq_btnPrimary",
+			"previewGlassText": "-ozqdq_previewGlassText",
+			"enabledBadge": "-ozqdq_enabledBadge",
+			"row": "-ozqdq_row",
+			"previewScrim": "-ozqdq_previewScrim",
+			"section": "-ozqdq_section",
+			"sourceRow": "-ozqdq_sourceRow"
+		};
+		//#endregion
+		//#region src/client/SettingsRow.tsx
+		/**
+		* Background settings row — the editable form rendered inside the General
+		* settings section (`settings.general.item` slot), in the same visual area as
+		* the official Appearance row. Layout mirrors the reference wallpaper engine
+		* picker (preview surface + grouped sections), styled with the harness alias
+		* tokens so it reads as part of the settings chrome.
+		*
+		* Interaction model (fixes the previous jank):
+		*  - Sliders STEP in 5% (or 2px/5px) increments, so dragging snaps between
+		*    discrete values instead of firing dozens of sub-percent updates.
+		*  - While dragging, only the CSS variables change: the slider holds its own
+		*    state (no parent re-render) and the preview card repaints in isolation.
+		*    React's onChange maps to the native `input` event and would fire on every
+		*    step, so a commit is deferred to release (pointerup / keyup / blur) and
+		*    debounced — one POST per gesture, never per tick.
+		*  - A `lastSavedRef` distinguishes our own saves from external changes, so
+		*    the snapshot sync can never clobber a draft the user is still editing.
+		*/
+		/** Defaults mirror the host schema (also the pre-load draft fallback). */
+		const DEFAULTS = {
+			enabled: false,
+			uploadId: "",
+			url: "",
+			opacity: 1,
+			scrim: DEFAULT_SCRIM,
+			panelOpacity: DEFAULT_PANEL_OPACITY,
+			blur: 16,
+			wallpaperBlur: 0,
+			fit: DEFAULT_FIT
+		};
+		/** Per-field slider geometry: 5% steps for ratios, fine px steps for radii so
+		* the two blur sliders feel smooth near small values. Bounds come from the
+		* shared settings constants so the schema boundary and the UI cannot drift. */
+		const SLIDER_SPEC = {
+			opacity: {
+				min: 0,
+				max: 1,
+				step: .05,
+				unit: "percent"
+			},
+			scrim: {
+				min: 0,
+				max: SCRIM_MAX,
+				step: .05,
+				unit: "percent"
+			},
+			panelOpacity: {
+				min: 0,
+				max: 1,
+				step: .05,
+				unit: "percent"
+			},
+			blur: {
+				min: 0,
+				max: 40,
+				step: 1,
+				unit: "px"
+			},
+			wallpaperBlur: {
+				min: 0,
+				max: 60,
+				step: 2,
+				unit: "px"
+			}
+		};
+		/** Derive the bare upload id from a resolve url like /api/bg-wallpaper/image/<id>. */
+		function stripId(url) {
+			const prefix = `${BACKGROUND_API_PREFIX}/image/`;
+			return url.startsWith(prefix) ? url.slice(prefix.length) : "";
+		}
+		/** 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 stepped range control. While dragging it re-renders only itself: the value
+		* is local state, `onLive(name, value)` repaints (CSS variables, no React
+		* state), and `onCommit()` fires once on release through a debounced save.
+		*/
+		function ControlSlider(props) {
+			const { name, label, value, onLive, onCommit } = props;
+			const spec = SLIDER_SPEC[name];
+			const [local, setLocal] = (0, react.useState)(value);
+			const localRef = (0, react.useRef)(value);
+			const dragging = (0, react.useRef)(false);
+			const onLiveRef = (0, react.useRef)(onLive);
+			const onCommitRef = (0, react.useRef)(onCommit);
+			onLiveRef.current = onLive;
+			onCommitRef.current = onCommit;
+			(0, react.useEffect)(() => {
+				if (!dragging.current && localRef.current !== value) {
+					localRef.current = value;
+					setLocal(value);
+				}
+			}, [value]);
+			const handleLive = (e) => {
+				dragging.current = true;
+				const v = Number(e.currentTarget.value);
+				localRef.current = v;
+				setLocal(v);
+				syncTrackFill(e.currentTarget);
+				onLiveRef.current(name, v);
+			};
+			const handleCommit = () => {
+				if (!dragging.current) return;
+				dragging.current = false;
+				onCommitRef.current();
+			};
+			const text = spec.unit === "percent" ? `${Math.round(local * 100)}%` : `${local}px`;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: SettingsRow_module_css_default.sliderRow,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: SettingsRow_module_css_default.sliderLabel,
+						children: label
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						type: "range",
+						className: SettingsRow_module_css_default.slider,
+						ref: (el) => {
+							if (el) syncTrackFill(el);
+						},
+						min: spec.min,
+						max: spec.max,
+						step: spec.step,
+						value: String(local),
+						"aria-label": label,
+						onInput: handleLive,
+						onPointerUp: handleCommit,
+						onKeyUp: (e) => {
+							if (e.key.startsWith("Arrow") || e.key === "Home" || e.key === "End" || e.key === "PageUp" || e.key === "PageDown") handleCommit();
+						},
+						onBlur: handleCommit
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: SettingsRow_module_css_default.sliderValue,
+						children: text
+					})
+				]
+			});
+		}
+		/** Write the filled-track fraction (%) of a range input into its --bg-fill
+		* variable (webkit has no range-progress pseudo-element; moz draws its own). */
+		function syncTrackFill(el) {
+			const min = Number(el.min);
+			const max = Number(el.max);
+			const value = Number(el.value);
+			const pct = max === min ? 0 : (value - min) / (max - min) * 100;
+			el.style.setProperty("--bg-fill", `${pct}%`);
+		}
+		/**
+		* The background settings row. A draft mirrors the persisted section; dragging
+		* repaints the preview card and the live backdrop through CSS variables, and a
+		* release commits once through the plugin's own host route.
+		*/
+		function BackgroundSettingsRow({ t }) {
+			const snapshot = (0, react.useSyncExternalStore)(settingsClient.subscribe, readSnapshot);
+			const [draft, setDraft] = (0, react.useState)(DEFAULTS);
+			const [uploading, setUploading] = (0, react.useState)(false);
+			const [urlText, setUrlText] = (0, react.useState)("");
+			const [error, setError] = (0, react.useState)("");
+			const fileInput = (0, react.useRef)(null);
+			const previewRef = (0, react.useRef)(null);
+			const draftRef = (0, react.useRef)(DEFAULTS);
+			const editingRef = (0, react.useRef)(false);
+			const lastSavedRef = (0, react.useRef)(null);
+			const dirtyRef = (0, react.useRef)(false);
+			const commitTimer = (0, react.useRef)(void 0);
+			const editingTimer = (0, react.useRef)(void 0);
+			/** Repaint the live backdrop + preview card from one draft (no React state). */
+			const paintLive = (0, react.useCallback)((next) => {
+				paintBackground(next);
+				if (previewRef.current) paintPreviewSurface(previewRef.current, next);
+			}, []);
+			/** Mark the row as being edited; clears after a quiet 600ms window. */
+			const markEditing = (0, react.useCallback)(() => {
+				editingRef.current = true;
+				clearTimeout(editingTimer.current);
+				editingTimer.current = window.setTimeout(() => {
+					editingRef.current = false;
+				}, 600);
+			}, []);
+			/** Slider live handler (stable identity for the memoized sliders). */
+			const onLive = (0, react.useCallback)((key, value) => {
+				const next = {
+					...draftRef.current,
+					[key]: value
+				};
+				draftRef.current = next;
+				markEditing();
+				if (key === "panelOpacity") paintBackground(next);
+				else paintBackgroundKnob(key, value);
+				if (previewRef.current) paintPreviewSurface(previewRef.current, next);
+			}, [markEditing]);
+			/** Persist one section through the host route and adopt it on success. */
+			const saveNow = (0, react.useCallback)(async (next) => {
+				dirtyRef.current = true;
+				const ok = await settingsClient.save(next);
+				if (ok) dirtyRef.current = false;
+				setError(ok ? "" : t("background.saveFailed"));
+				if (ok) {
+					lastSavedRef.current = next;
+					draftRef.current = next;
+					setDraft(next);
+					if (!next.uploadId) setUrlText(next.url);
+				}
+			}, [t]);
+			/** Debounced commit: one POST per drag gesture, from the latest draft. */
+			const onCommit = (0, react.useCallback)(() => {
+				clearTimeout(commitTimer.current);
+				commitTimer.current = window.setTimeout(() => {
+					saveNow(draftRef.current);
+				}, 120);
+			}, [saveNow]);
+			(0, react.useEffect)(() => {
+				if (snapshot.status !== "ready" || snapshot.value === void 0) return;
+				const saved = lastSavedRef.current;
+				if ((saved === null || !sameSettings(saved, snapshot.value)) && !editingRef.current) {
+					lastSavedRef.current = snapshot.value;
+					draftRef.current = snapshot.value;
+					setDraft(snapshot.value);
+					setUrlText(snapshot.value.uploadId ? "" : snapshot.value.url);
+					if (previewRef.current) paintPreviewSurface(previewRef.current, snapshot.value);
+				}
+			}, [snapshot]);
+			(0, react.useEffect)(() => () => {
+				clearTimeout(commitTimer.current);
+				clearTimeout(editingTimer.current);
+				if (dirtyRef.current) settingsClient.flush();
+			}, []);
+			const handleFile = async (file) => {
+				if (!file) return;
+				markEditing();
+				setUploading(true);
+				setError("");
+				try {
+					const url = await settingsClient.upload(file);
+					if (url === null) {
+						setError(t("background.uploadFailed"));
+						return;
+					}
+					const next = {
+						...draftRef.current,
+						uploadId: stripId(url),
+						url: "",
+						enabled: true
+					};
+					draftRef.current = next;
+					setDraft(next);
+					setUrlText("");
+					paintLive(next);
+					await saveNow(next);
+				} finally {
+					setUploading(false);
+				}
+			};
+			const handleUrlSubmit = () => {
+				const url = urlText.trim();
+				if (!/^https?:\/\//i.test(url)) {
+					setError(t("background.saveFailed"));
+					return;
+				}
+				markEditing();
+				const next = {
+					...draftRef.current,
+					uploadId: "",
+					url,
+					enabled: true
+				};
+				draftRef.current = next;
+				setDraft(next);
+				paintLive(next);
+				saveNow(next);
+			};
+			const handleClear = () => {
+				const next = {
+					...draftRef.current,
+					uploadId: "",
+					url: "",
+					enabled: false
+				};
+				draftRef.current = next;
+				setDraft(next);
+				setUrlText("");
+				if (previewRef.current) clearPreviewSurface(previewRef.current);
+				paintBackground(next);
+				saveNow(next);
+			};
+			const handleFit = (mode) => {
+				markEditing();
+				const next = {
+					...draftRef.current,
+					fit: mode
+				};
+				draftRef.current = next;
+				setDraft(next);
+				paintLive(next);
+				saveNow(next);
+			};
+			const sourceUrl = draft.uploadId ? `${BACKGROUND_API_PREFIX}/image/${draft.uploadId}` : draft.url;
+			const hasImage = sourceUrl !== "";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: SettingsRow_module_css_default.row,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: SettingsRow_module_css_default.header,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: SettingsRow_module_css_default.titleRow,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: SettingsRow_module_css_default.title,
+								children: t("background.title")
+							}), hasImage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: clsx(SettingsRow_module_css_default.btn, SettingsRow_module_css_default.btnDanger, SettingsRow_module_css_default.clearBtn),
+								onClick: handleClear,
+								children: t("background.clear")
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: SettingsRow_module_css_default.desc,
+							children: t("background.description")
+						})]
+					}),
+					/* @__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
+							}),
+							/* @__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.jsxs)("div", {
+						className: SettingsRow_module_css_default.section,
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: SettingsRow_module_css_default.sectionLabel,
+								children: t("background.source")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: SettingsRow_module_css_default.sourceRow,
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+										type: "file",
+										ref: fileInput,
+										hidden: true,
+										accept: "image/jpeg,image/png,image/webp,image/gif",
+										onChange: (e) => {
+											handleFile(e.currentTarget.files?.[0]);
+											e.currentTarget.value = "";
+										}
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: clsx(SettingsRow_module_css_default.btn, SettingsRow_module_css_default.btnPrimary),
+										disabled: uploading,
+										onClick: () => fileInput.current?.click(),
+										children: uploading ? t("background.uploading") : t("background.upload")
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: SettingsRow_module_css_default.hint,
+										children: t("background.uploadMinetypes")
+									}),
+									draft.uploadId && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										className: SettingsRow_module_css_default.enabledBadge,
+										children: ["✓ ", t("background.enabled")]
+									})
+								]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: SettingsRow_module_css_default.urlRow,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									className: SettingsRow_module_css_default.urlInput,
+									value: urlText,
+									placeholder: t("background.urlPlaceholder"),
+									onKeyDown: (e) => {
+										if (e.key === "Enter") handleUrlSubmit();
+									},
+									onChange: (e) => setUrlText(e.currentTarget.value)
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: SettingsRow_module_css_default.btn,
+									disabled: !urlText.trim(),
+									onClick: handleUrlSubmit,
+									children: t("background.applyUrl")
+								})]
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: SettingsRow_module_css_default.section,
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: SettingsRow_module_css_default.sectionLabel,
+								children: t("background.effects")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ControlSlider, {
+								name: "opacity",
+								label: t("background.opacity"),
+								value: draft.opacity,
+								onLive,
+								onCommit
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ControlSlider, {
+								name: "scrim",
+								label: t("background.scrim"),
+								value: draft.scrim,
+								onLive,
+								onCommit
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ControlSlider, {
+								name: "panelOpacity",
+								label: t("background.panelOpacity"),
+								value: draft.panelOpacity,
+								onLive,
+								onCommit
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ControlSlider, {
+								name: "blur",
+								label: t("background.blur"),
+								value: draft.blur,
+								onLive,
+								onCommit
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ControlSlider, {
+								name: "wallpaperBlur",
+								label: t("background.wallpaperBlur"),
+								value: draft.wallpaperBlur,
+								onLive,
+								onCommit
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: SettingsRow_module_css_default.segRow,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: SettingsRow_module_css_default.segLabel,
+									children: t("background.fit")
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: SettingsRow_module_css_default.segGroup,
+									role: "group",
+									"aria-label": t("background.fit"),
+									children: FIT_MODES.map((mode) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: clsx(SettingsRow_module_css_default.segBtn, draft.fit === mode && SettingsRow_module_css_default.segActive),
+										onClick: () => handleFit(mode),
+										children: t(mode === "cover" ? "background.cover" : "background.contain")
+									}, mode))
+								})]
+							})
+						]
+					}),
+					error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: SettingsRow_module_css_default.error,
+						role: "alert",
+						children: error
+					}),
+					hasImage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: SettingsRow_module_css_default.clearRow,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: clsx(SettingsRow_module_css_default.btn, SettingsRow_module_css_default.btnDanger),
+							onClick: handleClear,
+							children: t("background.clear")
+						})
+					})
+				]
+			});
+		}
+		//#endregion
+		//#region src/client/index.ts
+		/**
+		* Service injections this entry declares: the `slots` (runtime) and `locale`
+		* services only — the settings surface talks to the plugin's own host route
+		* over plain same-origin fetch, so no settings/connection service is needed.
+		*/
+		const inject = ["slots", "locale"];
+		/**
+		* Client plugin body: paint the persisted background live and register the
+		* General-settings row.
+		* @param ctx - client cordis context (slots/locale injected).
+		*/
+		function apply(ctx) {
+			const paint = () => {
+				const snapshot = settingsClient.getSnapshot();
+				const value = snapshot.status === "ready" ? snapshot.value : void 0;
+				if (value === void 0 || !value.enabled) {
+					backgroundPainter.dispose();
+					return;
+				}
+				paintBackground(value);
+			};
+			const unsubscribe = settingsClient.subscribe(paint);
+			settingsClient.load();
+			ctx.effect(() => ctx.locale.register("ui-background", {
+				zh,
+				en
+			}), "deepseek-harness-background: dictionaries");
+			ctx.slots.inject("settings.general.item", () => ctx.slots.register({
+				name: "settings.general.item",
+				id: "deepseek-harness-background",
+				order: 600,
+				locale: "ui-background"
+			}, BackgroundSettingsRow));
+			ctx.effect(() => () => {
+				unsubscribe();
+				backgroundPainter.dispose();
+			}, "deepseek-harness-background: background surface");
+		}
+		//#endregion
+		exports.apply = apply;
+		exports.inject = inject;
+		return module.exports;
+	}
+});
+
+//# sourceMappingURL=client.js.map