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

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") })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1outres/dsh-plugin-background",
-  "version": "0.2.0",
+  "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",
@@ -55,5 +55,8 @@
       ]
     }
   },
+  "devDependencies": {
+    "@deepseek-ai/dsh-client-ui-primitives": "0.2.1-rc.5"
+  },
   "scripts": {}
 }