@1outres/dsh-plugin-background 0.1.1 → 0.3.0

package/README.md

@@ -2,9 +2,18 @@
 
 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.
+the image can be blurred. The Settings dialog stays opaque so its controls remain
+readable over any image.
 
-Installed through the [`@1outres/dsh-plugins`](../dsh-plugins) bundle.
+Install just this plugin:
+
+```sh
+dsh plugin add @1outres/dsh-plugin-background
+```
+
+Or install it with every plugin in the repository through the
+[`@1outres/dsh-plugins`](../dsh-plugins) bundle. Enable one or the other: both
+insert the same `background` row.
 
 ## Settings
 
@@ -44,7 +53,10 @@ a component. Instead it:
 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
+3. restores the opaque alias colors inside the body-portaled Settings dialog
+   (`[data-shortcut-modal="settings"]`), so opening Settings never shows the
+   image through the panel;
+4. 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.

package/cordis.patch.yml

@@ -0,0 +1,6 @@
+# Installs this plugin on its own (dsh plugin add @1outres/dsh-plugin-background).
+# The @1outres/dsh-plugins bundle inserts the same "background" row, so select
+# one bundle or the other, never both.
+- insert:
+    - id: background
+      name: "@1outres/dsh-plugin-background"

package/lib/client.js

@@ -104,6 +104,7 @@ window.__ModuleLoader__.load({
 		  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",
+		  enableHint: "Turns the wallpaper off without clearing the image or the readability controls.",
 		  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.",
@@ -126,6 +127,7 @@ window.__ModuleLoader__.load({
 		};
 
 		// src/client/SettingsPage.tsx
+		var import_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 		var import_react = require("react");
 		var import_jsx_runtime = require("react/jsx-runtime");
 		var FIELDS = ["enabled", "image", "panelOpacity", "dim", "blur"];
@@ -166,6 +168,21 @@ window.__ModuleLoader__.load({
 		  fontSize: 12,
 		  lineHeight: 1.5
 		};
+		var switchHintStyle = {
+		  ...hintStyle,
+		  marginTop: 4
+		};
+		var switchRowStyle = {
+		  display: "flex",
+		  alignItems: "center",
+		  justifyContent: "space-between",
+		  gap: 24,
+		  marginTop: 22
+		};
+		var switchTitleStyle = {
+		  fontSize: 13,
+		  fontWeight: 600
+		};
 		var errorStyle = {
 		  margin: 0,
 		  color: "var(--dsw-alias-state-error-primary)",
@@ -214,6 +231,51 @@ window.__ModuleLoader__.load({
 		  fontSize: 13,
 		  lineHeight: 1.6
 		};
+		var SLIDER_COMMIT_DELAY = 300;
+		function useSliderDraft(committed, commit) {
+		  const [value, setValue] = (0, import_react.useState)(committed);
+		  const latest = (0, import_react.useRef)(committed);
+		  const dirty = (0, import_react.useRef)(false);
+		  const inFlight = (0, import_react.useRef)(0);
+		  const timer = (0, import_react.useRef)(void 0);
+		  (0, import_react.useEffect)(() => {
+		    if (dirty.current || inFlight.current > 0) return;
+		    latest.current = committed;
+		    setValue(committed);
+		  }, [committed]);
+		  (0, import_react.useEffect)(
+		    () => () => {
+		      window.clearTimeout(timer.current);
+		    },
+		    []
+		  );
+		  const send = () => {
+		    window.clearTimeout(timer.current);
+		    timer.current = void 0;
+		    if (!dirty.current) return;
+		    dirty.current = false;
+		    const sent = latest.current;
+		    inFlight.current += 1;
+		    void commit(sent).then((accepted) => {
+		      inFlight.current -= 1;
+		      if (accepted || dirty.current || inFlight.current > 0) return;
+		      latest.current = committed;
+		      setValue(committed);
+		    });
+		  };
+		  const change = (next) => {
+		    if (next === latest.current) return;
+		    latest.current = next;
+		    dirty.current = true;
+		    setValue(next);
+		    window.clearTimeout(timer.current);
+		    timer.current = window.setTimeout(send, SLIDER_COMMIT_DELAY);
+		  };
+		  const flush = () => {
+		    send();
+		  };
+		  return { value, change, flush };
+		}
 		function SettingsPage({ form, t }) {
 		  const subscribe = (0, import_react.useCallback)((listener) => form.subscribe(listener), [form]);
 		  const getSnapshot = (0, import_react.useCallback)(() => form.getSnapshot(), [form]);
@@ -231,12 +293,22 @@ window.__ModuleLoader__.load({
 		  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 write = (field, value) => form.set(field, value).then(
+		    (accepted) => {
+		      setWriteError(!accepted);
+		      return accepted;
+		    },
+		    () => {
+		      setWriteError(true);
+		      return false;
+		    }
+		  );
+		  const opacitySlider = useSliderDraft(config.panelOpacity, (value) => write("panelOpacity", value));
+		  const dimSlider = useSliderDraft(config.dim, (value) => write("dim", value));
+		  const blurSlider = useSliderDraft(config.blur, (value) => write("blur", value));
 		  const commitImage = () => {
 		    const next = draft.trim();
-		    if (next !== config.image) write("image", next);
+		    if (next !== config.image) void write("image", next);
 		  };
 		  const onImageChange = (event) => {
 		    setDraft(event.target.value);
@@ -254,23 +326,30 @@ window.__ModuleLoader__.load({
 		    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 dim = dimColor(dimSlider.value);
+		  const alpha = clamp(opacitySlider.value, 0, 100) / 100;
+		  const blur = clamp(blurSlider.value, 0, 40);
 		  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.jsxs)("div", { style: switchRowStyle, children: [
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { minWidth: 0 }, children: [
+		        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: switchTitleStyle, children: t("enable") }),
+		        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: switchHintStyle, children: t("enableHint") })
+		      ] }),
 		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-		        "input",
+		        import_dsh_client_ui_primitives.Switch,
 		        {
-		          type: "checkbox",
 		          checked: config.enabled,
 		          disabled,
-		          onChange: (event) => write("enabled", event.target.checked)
+		          label: t("enable"),
+		          title: disabled ? t("readOnly") : void 0,
+		          onChange: (next) => {
+		            void write("enabled", next);
+		          }
 		        }
 		      )
 		    ] }),
@@ -307,7 +386,7 @@ window.__ModuleLoader__.load({
 		              backgroundImage: imageCssValue(source),
 		              backgroundPosition: "center",
 		              backgroundSize: "cover",
-		              filter: `blur(${clamp(config.blur, 0, 40)}px)`,
+		              filter: `blur(${blur}px)`,
 		              transform: "scale(1.06)"
 		            }
 		          }
@@ -364,7 +443,7 @@ window.__ModuleLoader__.load({
 		      /* @__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),
+		          Math.round(opacitySlider.value),
 		          "%"
 		        ] })
 		      ] }),
@@ -376,10 +455,14 @@ window.__ModuleLoader__.load({
 		          min: 0,
 		          max: 100,
 		          step: 1,
-		          value: config.panelOpacity,
+		          value: opacitySlider.value,
 		          disabled,
 		          style: sliderStyle,
-		          onChange: (event) => write("panelOpacity", Number(event.target.value))
+		          onChange: (event) => opacitySlider.change(Number(event.target.value)),
+		          onPointerUp: opacitySlider.flush,
+		          onPointerCancel: opacitySlider.flush,
+		          onKeyUp: opacitySlider.flush,
+		          onBlur: opacitySlider.flush
 		        }
 		      ),
 		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: hintStyle, children: t("panelOpacityHint") })
@@ -388,7 +471,7 @@ window.__ModuleLoader__.load({
 		      /* @__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),
+		          Math.round(dimSlider.value),
 		          "%"
 		        ] })
 		      ] }),
@@ -400,10 +483,14 @@ window.__ModuleLoader__.load({
 		          min: 0,
 		          max: 100,
 		          step: 1,
-		          value: config.dim,
+		          value: dimSlider.value,
 		          disabled,
 		          style: sliderStyle,
-		          onChange: (event) => write("dim", Number(event.target.value))
+		          onChange: (event) => dimSlider.change(Number(event.target.value)),
+		          onPointerUp: dimSlider.flush,
+		          onPointerCancel: dimSlider.flush,
+		          onKeyUp: dimSlider.flush,
+		          onBlur: dimSlider.flush
 		        }
 		      ),
 		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: hintStyle, children: t("dimHint") })
@@ -412,7 +499,7 @@ window.__ModuleLoader__.load({
 		      /* @__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),
+		          Math.round(blurSlider.value),
 		          " px"
 		        ] })
 		      ] }),
@@ -424,10 +511,14 @@ window.__ModuleLoader__.load({
 		          min: 0,
 		          max: 40,
 		          step: 1,
-		          value: config.blur,
+		          value: blurSlider.value,
 		          disabled,
 		          style: sliderStyle,
-		          onChange: (event) => write("blur", Number(event.target.value))
+		          onChange: (event) => blurSlider.change(Number(event.target.value)),
+		          onPointerUp: blurSlider.flush,
+		          onPointerCancel: blurSlider.flush,
+		          onKeyUp: blurSlider.flush,
+		          onBlur: blurSlider.flush
 		        }
 		      ),
 		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: hintStyle, children: t("blurHint") })
@@ -469,6 +560,18 @@ window.__ModuleLoader__.load({
 		  z-index: 2;
 		}
 		`;
+		var SETTINGS_DIALOG = '[data-shortcut-modal="settings"]';
+		function settingsSurfaceCss(solid) {
+		  const declarations = Object.entries(solid).filter(([, value]) => isSafeCssValue(value)).map(([name, value]) => `  ${name}: ${value};`);
+		  if (declarations.length === 0) return "";
+		  return `html[data-dsh-background="on"] ${SETTINGS_DIALOG} {
+		${declarations.join("\n")}
+		}
+		`;
+		}
+		function isSafeCssValue(value) {
+		  return value.length > 0 && !/[{;}@]/.test(value) && !value.includes("\n");
+		}
 
 		// src/client/index.tsx
 		var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -479,13 +582,18 @@ window.__ModuleLoader__.load({
 		function apply(ctx) {
 		  const t = ctx.locale.bind(CONFIG_NAMESPACE);
 		  ctx.effect(() => ctx.locale.register(CONFIG_NAMESPACE, { en }), "background: dictionaries");
+		  let styleTag;
 		  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();
+		    styleTag = tag;
+		    return () => {
+		      tag.remove();
+		      styleTag = void 0;
+		    };
 		  }, "background: stylesheet");
 		  const form = ctx.configForms.get(CONFIG_NAMESPACE);
 		  let tokenDispose;
@@ -501,14 +609,17 @@ window.__ModuleLoader__.load({
 		    tokenDispose?.();
 		    tokenDispose = void 0;
 		    const tokens = {};
+		    const solid = {};
 		    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 };
+		      solid[name] = base;
 		    }
 		    if (Object.keys(tokens).length > 0) tokenDispose = ctx.theme.overrideTokens(PLUGIN_ID, tokens);
+		    if (styleTag !== void 0) styleTag.textContent = BACKGROUND_CSS + settingsSurfaceCss(solid);
 		  };
 		  const deactivate = () => {
 		    activeConfig = void 0;
@@ -519,6 +630,7 @@ window.__ModuleLoader__.load({
 		    root.style.removeProperty("--dsh-background-image");
 		    root.style.removeProperty("--dsh-background-blur");
 		    root.style.removeProperty("--dsh-background-dim");
+		    if (styleTag !== void 0) styleTag.textContent = BACKGROUND_CSS;
 		  };
 		  const applyConfig = (config) => {
 		    if (applying) return;

package/package.json

@@ -1,7 +1,12 @@
 {
   "name": "@1outres/dsh-plugin-background",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "Set a background image behind the DeepSeek Harness Web UI, with panel opacity, dim and blur controls.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/1outres/my-dsh-plugins.git",
+    "directory": "packages/dsh-plugin-background"
+  },
   "type": "module",
   "main": "lib/index.js",
   "exports": {
@@ -10,11 +15,9 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "lib"
+    "lib",
+    "cordis.patch.yml"
   ],
-  "scripts": {
-    "prepublishOnly": "node ../../scripts/build.mjs"
-  },
   "keywords": [
     "dsh",
     "dsh-plugin",
@@ -38,6 +41,11 @@
     "react": "^18.2.0"
   },
   "dsh": {
+    "bundle": {
+      "patch": [
+        "./cordis.patch.yml"
+      ]
+    },
     "client": {
       "platform": "web",
       "inject": [
@@ -46,5 +54,9 @@
         "@deepseek-ai/dsh-client-ui-theme"
       ]
     }
-  }
-}
+  },
+  "devDependencies": {
+    "@deepseek-ai/dsh-client-ui-primitives": "0.2.1-rc.5"
+  },
+  "scripts": {}
+}