@1outres/dsh-plugin-background 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 1outres
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,57 @@
-# Temporary Holding Version
+# @1outres/dsh-plugin-background
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Paint an image behind the whole DeepSeek Harness Web UI. The interface stays
+usable: panels become translucent, a configurable veil keeps text readable, and
+the image can be blurred.
+
+Installed through the [`@1outres/dsh-plugins`](../dsh-plugins) bundle.
+
+## Settings
+
+Open **Settings → Background**.
+
+| Field             | Default | Meaning                                                                                |
+| ----------------- | ------- | -------------------------------------------------------------------------------------- |
+| Enable background | on      | Master switch. No image set means no visual change.                                    |
+| Image path or URL | empty   | Absolute path on the machine running DSH, or an `https://` URL.                        |
+| Panel opacity     | 70%     | How opaque interface surfaces stay over the image. 100% hides the image behind panels. |
+| Dim               | 30%     | Black veil between the image and the interface; raise it when text is hard to read.    |
+| Blur              | 0 px    | Blurs the image (0–40 px).                                                             |
+
+**Reset to defaults** clears the stored overrides and falls back to the schema
+defaults.
+
+### Local images
+
+Local paths are served through the Harness's authenticated `GET /api/file?path=`
+route, so the image never leaves the Host. Example:
+
+```
+/home/you/Pictures/wallpaper.jpg
+```
+
+The route is authenticated by the existing browser session; nothing is copied
+into the profile. URLs must be `https://` because the GUI is served over HTTPS
+and browsers block mixed content.
+
+## How it works
+
+There is no background slot in the Harness shell, so this plugin does not render
+a component. Instead it:
+
+1. injects one global stylesheet that paints `html::before` (image),
+   `html::after` (veil) and lifts `#root` above both;
+2. reads the active theme's alias colors from the stylesheet and re-registers
+   them through `ctx.theme.overrideTokens()` as `color-mix(... transparent)`
+   surfaces, so panels, cards, popovers and the sidebar let the image through;
+3. registers a `settings.section` page that reads and writes the Host settings
+   entry (`background`) through `ctx.configForms`.
+
+Theme switches re-read the palette, so the effect follows light and dark mode.
+
+## Limits
+
+- One image, shared by every authenticated browser.
+- No per-theme image, video, GIF rotation or slideshow (v1).
+- The image is repainted by the browser; large files are fine, but the Host has
+  to read them on every load through `/api/file`.

package/lib/client.js

@@ -0,0 +1,583 @@
+/* Generated by scripts/build.mjs — do not edit. */
+window.__ModuleLoader__.load({
+	id: "@1outres/dsh-plugin-background",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		"use strict";
+		var __defProp = Object.defineProperty;
+		var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+		var __getOwnPropNames = Object.getOwnPropertyNames;
+		var __hasOwnProp = Object.prototype.hasOwnProperty;
+		var __export = (target, all) => {
+		  for (var name in all)
+		    __defProp(target, name, { get: all[name], enumerable: true });
+		};
+		var __copyProps = (to, from, except, desc) => {
+		  if (from && typeof from === "object" || typeof from === "function") {
+		    for (let key of __getOwnPropNames(from))
+		      if (!__hasOwnProp.call(to, key) && key !== except)
+		        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+		  }
+		  return to;
+		};
+		var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+		// src/client/index.tsx
+		var index_exports = {};
+		__export(index_exports, {
+		  apply: () => apply,
+		  inject: () => inject
+		});
+		module.exports = __toCommonJS(index_exports);
+
+		// src/client/config.ts
+		var CONFIG_NAMESPACE = "background";
+		var DEFAULT_CONFIG = {
+		  enabled: true,
+		  image: "",
+		  panelOpacity: 70,
+		  dim: 30,
+		  blur: 0
+		};
+		var TOKEN_NAMES = [
+		  "--dsw-alias-bg-base",
+		  "--dsw-alias-bg-layer-1",
+		  "--dsw-alias-bg-layer-2",
+		  "--dsw-alias-bg-layer-3",
+		  "--dsw-alias-bg-layer-4",
+		  "--dsw-alias-bg-overlay",
+		  "--dsw-specific-sidebar-fill"
+		];
+		function normalizeConfig(value) {
+		  return {
+		    enabled: typeof value?.enabled === "boolean" ? value.enabled : DEFAULT_CONFIG.enabled,
+		    image: typeof value?.image === "string" ? value.image : DEFAULT_CONFIG.image,
+		    panelOpacity: typeof value?.panelOpacity === "number" ? value.panelOpacity : DEFAULT_CONFIG.panelOpacity,
+		    dim: typeof value?.dim === "number" ? value.dim : DEFAULT_CONFIG.dim,
+		    blur: typeof value?.blur === "number" ? value.blur : DEFAULT_CONFIG.blur
+		  };
+		}
+
+		// src/client/format.ts
+		function clamp(value, min, max) {
+		  if (!Number.isFinite(value)) return min;
+		  return Math.min(max, Math.max(min, value));
+		}
+		function isRemoteUrl(value) {
+		  return /^https?:\/\//i.test(value.trim());
+		}
+		function isAbsolutePath(value) {
+		  const trimmed = value.trim();
+		  return trimmed.startsWith("/") || /^[A-Za-z]:[\\/]/.test(trimmed);
+		}
+		function resolveImageSource(value, base) {
+		  const trimmed = value.trim();
+		  if (trimmed.length === 0) return void 0;
+		  if (isRemoteUrl(trimmed)) return trimmed;
+		  if (!isAbsolutePath(trimmed)) return void 0;
+		  try {
+		    return new URL(`api/file?path=${encodeURIComponent(trimmed)}`, base).href;
+		  } catch {
+		    return void 0;
+		  }
+		}
+		function imageCssValue(url) {
+		  return `url(${JSON.stringify(url)})`;
+		}
+		function alphaColor(color, percent) {
+		  const clamped = clamp(percent, 0, 100);
+		  if (clamped >= 100) return color;
+		  return `color-mix(in srgb, ${color} ${formatNumber(clamped)}%, transparent)`;
+		}
+		function dimColor(percent) {
+		  return `rgba(0, 0, 0, ${formatNumber(clamp(percent, 0, 100) / 100)})`;
+		}
+		function formatNumber(value) {
+		  if (Number.isInteger(value)) return String(value);
+		  return value.toFixed(3).replace(/0+$/, "").replace(/\.$/, "");
+		}
+
+		// src/client/i18n.ts
+		var en = {
+		  nav: "Background",
+		  title: "Background",
+		  description: "Paint an image behind the whole interface. Point at an absolute path on the machine running DSH, or at an https URL.",
+		  enable: "Enable background",
+		  image: "Image path or URL",
+		  imageHint: "Absolute local path, for example /home/you/wallpaper.jpg, or an https:// URL. Local images are served through the authenticated file route, so they never leave the Host.",
+		  invalidImage: "Enter an absolute path or an http(s) URL.",
+		  preview: "Preview",
+		  previewTitle: "Background",
+		  previewBody: "Panels stay readable over the image.",
+		  previewEmpty: "Set an image to preview it here.",
+		  previewFailed: "This image could not be loaded.",
+		  panelOpacity: "Panel opacity",
+		  panelOpacityHint: "How opaque interface panels stay over the image.",
+		  dim: "Dim",
+		  dimHint: "Darkens the image so text stays readable.",
+		  blur: "Blur",
+		  blurHint: "Blurs the image; higher values hide detail.",
+		  reset: "Reset to defaults",
+		  loading: "Loading configuration\u2026",
+		  unavailable: "This configuration is not available.",
+		  readOnly: "Configuration is read-only.",
+		  writeError: "The Host refused the change."
+		};
+
+		// src/client/SettingsPage.tsx
+		var import_react = require("react");
+		var import_jsx_runtime = require("react/jsx-runtime");
+		var FIELDS = ["enabled", "image", "panelOpacity", "dim", "blur"];
+		var sectionStyle = {
+		  maxWidth: 680,
+		  padding: "4px 0 32px",
+		  color: "var(--dsw-alias-label-primary)"
+		};
+		var headingStyle = {
+		  margin: 0,
+		  fontSize: 18,
+		  fontWeight: 600,
+		  lineHeight: 1.4
+		};
+		var introStyle = {
+		  margin: "8px 0 0",
+		  color: "var(--dsw-alias-label-secondary)",
+		  fontSize: 13,
+		  lineHeight: 1.6
+		};
+		var fieldStyle = {
+		  display: "flex",
+		  flexDirection: "column",
+		  gap: 6,
+		  marginTop: 22
+		};
+		var labelRowStyle = {
+		  display: "flex",
+		  alignItems: "center",
+		  justifyContent: "space-between",
+		  gap: 12,
+		  fontSize: 13,
+		  fontWeight: 600
+		};
+		var hintStyle = {
+		  margin: 0,
+		  color: "var(--dsw-alias-label-tertiary)",
+		  fontSize: 12,
+		  lineHeight: 1.5
+		};
+		var errorStyle = {
+		  margin: 0,
+		  color: "var(--dsw-alias-state-error-primary)",
+		  fontSize: 12,
+		  lineHeight: 1.5
+		};
+		var inputStyle = {
+		  width: "100%",
+		  boxSizing: "border-box",
+		  padding: "8px 10px",
+		  borderRadius: 8,
+		  border: "1px solid var(--dsw-alias-border-l2)",
+		  background: "var(--dsw-specific-input-major, var(--dsw-alias-bg-layer-1))",
+		  color: "inherit",
+		  font: "inherit",
+		  outline: "none"
+		};
+		var sliderStyle = {
+		  width: "100%",
+		  accentColor: "var(--dsw-alias-brand-primary)"
+		};
+		var previewStyle = {
+		  position: "relative",
+		  height: 180,
+		  marginTop: 16,
+		  borderRadius: 10,
+		  overflow: "hidden",
+		  border: "1px solid var(--dsw-alias-border-l2)",
+		  background: "var(--dsw-alias-bg-layer-2)",
+		  display: "flex",
+		  alignItems: "center",
+		  justifyContent: "center"
+		};
+		var buttonStyle = {
+		  marginTop: 26,
+		  padding: "8px 12px",
+		  borderRadius: 8,
+		  border: "1px solid var(--dsw-alias-border-l2)",
+		  background: "var(--dsw-alias-bg-layer-1)",
+		  color: "inherit",
+		  font: "inherit",
+		  cursor: "pointer"
+		};
+		var mutedStyle = {
+		  color: "var(--dsw-alias-label-tertiary)",
+		  fontSize: 13,
+		  lineHeight: 1.6
+		};
+		function SettingsPage({ form, t }) {
+		  const subscribe = (0, import_react.useCallback)((listener) => form.subscribe(listener), [form]);
+		  const getSnapshot = (0, import_react.useCallback)(() => form.getSnapshot(), [form]);
+		  const snapshot = (0, import_react.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+		  const config = normalizeConfig(snapshot.value);
+		  const [draft, setDraft] = (0, import_react.useState)(config.image);
+		  const [previewFailure, setPreviewFailure] = (0, import_react.useState)(
+		    null
+		  );
+		  const [writeError, setWriteError] = (0, import_react.useState)(false);
+		  (0, import_react.useEffect)(() => {
+		    setDraft(config.image);
+		  }, [config.image]);
+		  const source = resolveImageSource(config.image, document.baseURI);
+		  const draftSource = resolveImageSource(draft, document.baseURI);
+		  const draftInvalid = draft.trim().length > 0 && draftSource === void 0;
+		  const previewFailed = previewFailure !== null && previewFailure.src === source && previewFailure.failed;
+		  const write = (field, value) => {
+		    void form.set(field, value).then((accepted) => setWriteError(!accepted)).catch(() => setWriteError(true));
+		  };
+		  const commitImage = () => {
+		    const next = draft.trim();
+		    if (next !== config.image) write("image", next);
+		  };
+		  const onImageChange = (event) => {
+		    setDraft(event.target.value);
+		  };
+		  const onImageKeyDown = (event) => {
+		    if (event.key === "Enter") {
+		      event.preventDefault();
+		      event.currentTarget.blur();
+		    }
+		  };
+		  const reset = () => {
+		    void Promise.all(FIELDS.map((field) => form.unset(field))).then((results) => setWriteError(results.some((accepted) => !accepted))).catch(() => setWriteError(true));
+		  };
+		  if (snapshot.status === "unavailable") {
+		    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: mutedStyle, children: t("unavailable") });
+		  }
+		  const disabled = snapshot.writable === false;
+		  const dim = dimColor(config.dim);
+		  const alpha = clamp(config.panelOpacity, 0, 100) / 100;
+		  const dark = document.body.hasAttribute("data-ds-dark-theme");
+		  const surfaceColor = dark ? `rgba(21, 21, 23, ${alpha})` : `rgba(255, 255, 255, ${alpha})`;
+		  const surfaceText = dark ? "#e9ecf2" : "#0f1115";
+		  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: sectionStyle, children: [
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { style: headingStyle, children: t("title") }),
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: introStyle, children: t("description") }),
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: { ...labelRowStyle, marginTop: 22, cursor: "pointer" }, children: [
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: t("enable") }),
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+		        "input",
+		        {
+		          type: "checkbox",
+		          checked: config.enabled,
+		          disabled,
+		          onChange: (event) => write("enabled", event.target.checked)
+		        }
+		      )
+		    ] }),
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: fieldStyle, children: [
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { style: labelRowStyle, htmlFor: "dsh-background-image", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: t("image") }) }),
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+		        "input",
+		        {
+		          id: "dsh-background-image",
+		          type: "text",
+		          spellCheck: false,
+		          autoComplete: "off",
+		          placeholder: "/home/you/wallpaper.jpg",
+		          value: draft,
+		          disabled,
+		          style: inputStyle,
+		          onChange: onImageChange,
+		          onBlur: commitImage,
+		          onKeyDown: onImageKeyDown
+		        }
+		      ),
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: hintStyle, children: t("imageHint") }),
+		      draftInvalid ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: errorStyle, children: t("invalidImage") }) : null
+		    ] }),
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: fieldStyle, children: [
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: labelRowStyle, children: t("preview") }),
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: previewStyle, children: source ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+		        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+		          "div",
+		          {
+		            style: {
+		              position: "absolute",
+		              inset: 0,
+		              backgroundImage: imageCssValue(source),
+		              backgroundPosition: "center",
+		              backgroundSize: "cover",
+		              filter: `blur(${clamp(config.blur, 0, 40)}px)`,
+		              transform: "scale(1.06)"
+		            }
+		          }
+		        ),
+		        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { position: "absolute", inset: 0, background: dim } }),
+		        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+		          "div",
+		          {
+		            style: {
+		              position: "relative",
+		              padding: "12px 16px",
+		              borderRadius: 10,
+		              maxWidth: "72%",
+		              textAlign: "center",
+		              background: surfaceColor,
+		              color: surfaceText,
+		              boxShadow: "0 1px 3px rgba(0, 0, 0, 0.18)"
+		            },
+		            children: [
+		              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { style: { display: "block", fontSize: 13 }, children: t("previewTitle") }),
+		              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { display: "block", marginTop: 4, fontSize: 12, opacity: 0.75 }, children: t("previewBody") })
+		            ]
+		          }
+		        ),
+		        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+		          "img",
+		          {
+		            src: source,
+		            alt: "",
+		            style: { display: "none" },
+		            onError: () => setPreviewFailure({ src: source, failed: true }),
+		            onLoad: () => setPreviewFailure({ src: source, failed: false })
+		          }
+		        ),
+		        previewFailed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+		          "span",
+		          {
+		            style: {
+		              position: "absolute",
+		              inset: 0,
+		              display: "flex",
+		              alignItems: "center",
+		              justifyContent: "center",
+		              background: "rgba(0, 0, 0, 0.55)",
+		              color: "#fff",
+		              fontSize: 12
+		            },
+		            children: t("previewFailed")
+		          }
+		        ) : null
+		      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: mutedStyle, children: t("previewEmpty") }) })
+		    ] }),
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: fieldStyle, children: [
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: labelRowStyle, htmlFor: "dsh-background-panel-opacity", children: [
+		        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: t("panelOpacity") }),
+		        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: mutedStyle, children: [
+		          Math.round(config.panelOpacity),
+		          "%"
+		        ] })
+		      ] }),
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+		        "input",
+		        {
+		          id: "dsh-background-panel-opacity",
+		          type: "range",
+		          min: 0,
+		          max: 100,
+		          step: 1,
+		          value: config.panelOpacity,
+		          disabled,
+		          style: sliderStyle,
+		          onChange: (event) => write("panelOpacity", Number(event.target.value))
+		        }
+		      ),
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: hintStyle, children: t("panelOpacityHint") })
+		    ] }),
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: fieldStyle, children: [
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: labelRowStyle, htmlFor: "dsh-background-dim", children: [
+		        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: t("dim") }),
+		        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: mutedStyle, children: [
+		          Math.round(config.dim),
+		          "%"
+		        ] })
+		      ] }),
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+		        "input",
+		        {
+		          id: "dsh-background-dim",
+		          type: "range",
+		          min: 0,
+		          max: 100,
+		          step: 1,
+		          value: config.dim,
+		          disabled,
+		          style: sliderStyle,
+		          onChange: (event) => write("dim", Number(event.target.value))
+		        }
+		      ),
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: hintStyle, children: t("dimHint") })
+		    ] }),
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: fieldStyle, children: [
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: labelRowStyle, htmlFor: "dsh-background-blur", children: [
+		        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: t("blur") }),
+		        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: mutedStyle, children: [
+		          Math.round(config.blur),
+		          " px"
+		        ] })
+		      ] }),
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+		        "input",
+		        {
+		          id: "dsh-background-blur",
+		          type: "range",
+		          min: 0,
+		          max: 40,
+		          step: 1,
+		          value: config.blur,
+		          disabled,
+		          style: sliderStyle,
+		          onChange: (event) => write("blur", Number(event.target.value))
+		        }
+		      ),
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: hintStyle, children: t("blurHint") })
+		    ] }),
+		    snapshot.writable === false ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: hintStyle, children: t("readOnly") }) : null,
+		    writeError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: errorStyle, children: t("writeError") }) : null,
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", style: buttonStyle, onClick: reset, disabled, children: t("reset") })
+		  ] });
+		}
+
+		// src/client/styles.ts
+		var BACKGROUND_CSS = `
+		html[data-dsh-background="on"]::before {
+		  content: "";
+		  position: fixed;
+		  inset: 0;
+		  z-index: 0;
+		  pointer-events: none;
+		  background-image: var(--dsh-background-image, none);
+		  background-position: center center;
+		  background-repeat: no-repeat;
+		  background-size: cover;
+		  filter: blur(var(--dsh-background-blur, 0px));
+		  transform: scale(1.06);
+		  transform-origin: center center;
+		}
+
+		html[data-dsh-background="on"]::after {
+		  content: "";
+		  position: fixed;
+		  inset: 0;
+		  z-index: 1;
+		  pointer-events: none;
+		  background: var(--dsh-background-dim, rgba(0, 0, 0, 0.3));
+		}
+
+		html[data-dsh-background="on"] #root {
+		  position: relative;
+		  z-index: 2;
+		}
+		`;
+
+		// src/client/index.tsx
+		var import_jsx_runtime2 = require("react/jsx-runtime");
+		var inject = ["slots", "locale", "configForms", "theme"];
+		var PLUGIN_ID = "@1outres/dsh-plugin-background";
+		var ATTRIBUTE = "data-dsh-background";
+		var OVERLAY_TOKEN = "--dsw-alias-bg-overlay";
+		function apply(ctx) {
+		  const t = ctx.locale.bind(CONFIG_NAMESPACE);
+		  ctx.effect(() => ctx.locale.register(CONFIG_NAMESPACE, { en }), "background: dictionaries");
+		  ctx.effect(() => {
+		    const tag = document.createElement("style");
+		    tag.dataset.plugin = PLUGIN_ID;
+		    tag.dataset.pluginCss = `${PLUGIN_ID}/background.css`;
+		    tag.textContent = BACKGROUND_CSS;
+		    document.head.append(tag);
+		    return () => tag.remove();
+		  }, "background: stylesheet");
+		  const form = ctx.configForms.get(CONFIG_NAMESPACE);
+		  let tokenDispose;
+		  let activeConfig;
+		  let applying = false;
+		  let signature = "";
+		  const themeSignature = (snapshot) => `${snapshot.active.id}:${snapshot.active.colorScheme}`;
+		  const readBaseColor = (name) => {
+		    const value = getComputedStyle(document.body).getPropertyValue(name).trim();
+		    return value.length > 0 ? value : void 0;
+		  };
+		  const applyTokens = (config) => {
+		    tokenDispose?.();
+		    tokenDispose = void 0;
+		    const tokens = {};
+		    for (const name of TOKEN_NAMES) {
+		      const base = readBaseColor(name);
+		      if (base === void 0) continue;
+		      const percent = name === OVERLAY_TOKEN ? Math.min(100, config.panelOpacity + 20) : config.panelOpacity;
+		      const value = alphaColor(base, percent);
+		      tokens[name] = { light: value, dark: value };
+		    }
+		    if (Object.keys(tokens).length > 0) tokenDispose = ctx.theme.overrideTokens(PLUGIN_ID, tokens);
+		  };
+		  const deactivate = () => {
+		    activeConfig = void 0;
+		    tokenDispose?.();
+		    tokenDispose = void 0;
+		    const root = document.documentElement;
+		    root.removeAttribute(ATTRIBUTE);
+		    root.style.removeProperty("--dsh-background-image");
+		    root.style.removeProperty("--dsh-background-blur");
+		    root.style.removeProperty("--dsh-background-dim");
+		  };
+		  const applyConfig = (config) => {
+		    if (applying) return;
+		    applying = true;
+		    try {
+		      activeConfig = config;
+		      signature = themeSignature(ctx.theme.getTheme());
+		      const source = config.enabled ? resolveImageSource(config.image, document.baseURI) : void 0;
+		      if (source === void 0) {
+		        deactivate();
+		        return;
+		      }
+		      const root = document.documentElement;
+		      root.setAttribute(ATTRIBUTE, "on");
+		      root.style.setProperty("--dsh-background-image", imageCssValue(source));
+		      root.style.setProperty("--dsh-background-blur", `${clamp(config.blur, 0, 40)}px`);
+		      root.style.setProperty("--dsh-background-dim", dimColor(config.dim));
+		      applyTokens(config);
+		    } finally {
+		      applying = false;
+		    }
+		  };
+		  const sync = () => applyConfig(normalizeConfig(form.getSnapshot().value));
+		  ctx.effect(() => {
+		    const off = form.subscribe(sync);
+		    sync();
+		    return () => {
+		      off();
+		      deactivate();
+		    };
+		  }, "background: configuration");
+		  ctx.on("theme/change", (snapshot) => {
+		    if (applying) return;
+		    if (themeSignature(snapshot) === signature) return;
+		    signature = themeSignature(snapshot);
+		    if (activeConfig !== void 0) applyConfig(activeConfig);
+		  });
+		  const Page = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SettingsPage, { form, t });
+		  ctx.effect(
+		    () => ctx.configForms.whileServed(
+		      [CONFIG_NAMESPACE],
+		      () => ctx.slots.inject(
+		        "settings.section",
+		        () => ctx.slots.register(
+		          {
+		            name: "settings.section",
+		            id: "background",
+		            order: 60,
+		            label: () => t("nav"),
+		            locale: CONFIG_NAMESPACE
+		          },
+		          Page
+		        )
+		      )
+		    ),
+		    "background: settings section"
+		  );
+		}
+
+		return module.exports;
+	}
+});

package/lib/index.js

@@ -0,0 +1,22 @@
+// src/index.ts
+import z from "@deepseek-ai/schemastery";
+var Config = z.object({
+  enabled: z.boolean().default(true).volatile(),
+  image: z.string().default("").volatile(),
+  panelOpacity: z.number().min(0).max(100).step(1).default(70).volatile(),
+  dim: z.number().min(0).max(100).step(1).default(30).volatile(),
+  blur: z.number().min(0).max(40).step(1).default(0).volatile()
+});
+function apply(ctx) {
+  ctx.inject(["settings"], (child) => {
+    const settings = child.settings;
+    child.effect(
+      () => settings.configure({ auto: false }, ctx.fiber),
+      "background: settings page policy"
+    );
+  });
+}
+export {
+  Config,
+  apply
+};

package/package.json

@@ -1,6 +1,50 @@
 {
   "name": "@1outres/dsh-plugin-background",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "Set a background image behind the DeepSeek Harness Web UI, with panel opacity, dim and blur controls.",
+  "type": "module",
+  "main": "lib/index.js",
+  "exports": {
+    ".": "./lib/index.js",
+    "./client": "./lib/client.js",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "prepublishOnly": "node ../../scripts/build.mjs"
+  },
+  "keywords": [
+    "dsh",
+    "dsh-plugin",
+    "background",
+    "wallpaper",
+    "deepseek-harness"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "dsh": ">=0.2.1-rc.5 <0.3.0",
+    "node": ">=22"
+  },
+  "dependencies": {
+    "@deepseek-ai/schemastery": "~3.18.5"
+  },
+  "peerDependencies": {
+    "@deepseek-ai/cordis": "~4.0.5",
+    "react": "^18.2.0"
+  },
+  "dsh": {
+    "client": {
+      "platform": "web",
+      "inject": [
+        "@deepseek-ai/dsh-client-ui-renderer",
+        "@deepseek-ai/dsh-client-ui-settings",
+        "@deepseek-ai/dsh-client-ui-theme"
+      ]
+    }
+  }
+}