wallpaper-engine-dsh 1.0.8 → 2.0.0

package/lib/client.js

@@ -10,6 +10,11 @@ window.__ModuleLoader__.load({
 		const SETTINGS_KEY = "wallpaper-engine-dsh:selection";
 		const INVENTORY_URL = "/we-background/inventory";
 		const ACTIVE_ATTR = "data-webg-wallpaper";
+		// Plugin-owned dark-theme signal for CSS. The shell's old dark-mode body
+		// attribute is gone in DSH >= 0.2.1-rc.5; the client now derives dark from
+		// the shell's theme service and mirrors it here, so the stylesheet never
+		// keys off host DOM internals.
+		const DARK_ATTR = "data-webg-dark";
 		const LAYER_ID = "wallpaper-engine-dsh-layer";
 		const SCRIM_ID = "wallpaper-engine-dsh-scrim";
 		const STYLE_TAG_ID = "wallpaper-engine-dsh/styles";
@@ -1093,6 +1098,9 @@ window.__ModuleLoader__.load({
 		// tick would rewrite all CSS variables AND force a synchronous layout for
 		// nothing. clearEffects() resets it so the next apply always writes.
 		let lastEffectKey = null;
+		// Resolved dark-theme state, driven by the shell theme service (or the OS
+		// prefers-color-scheme fallback). Mirrored onto body[DARK_ATTR] for CSS.
+		let themeDark = false;
 
 		/** Average Rec.601 luminance (0..1) of a drawable media frame, or null. */
 		function luminanceOf(media) {
@@ -1163,7 +1171,16 @@ window.__ModuleLoader__.load({
 		  // The veil OPPOSES the text colour: dark theme (light text) darkens bright
 		  // wallpapers, light theme (dark text) brightens dark ones — either way the
 		  // text side wins. This is what makes ANY wallpaper survivable.
-		  const dark = Boolean(document.body.hasAttribute && document.body.hasAttribute("data-ds-dark-theme"));
+		  const dark = themeDark;
+		  if (typeof document !== "undefined" && document.body) {
+		    if (dark) {
+		      if (!(document.body.hasAttribute && document.body.hasAttribute(DARK_ATTR))) {
+		        document.body.setAttribute(DARK_ATTR, "");
+		      }
+		    } else if (document.body.hasAttribute && document.body.hasAttribute(DARK_ATTR)) {
+		      document.body.removeAttribute(DARK_ATTR);
+		    }
+		  }
 		  const roundedLum = sampledLuminance !== null ? Math.round(sampledLuminance * 100) / 100 : null;
 		  const key = [
 		    dark, selection.scrim, selection.border, selection.blur, selection.wallpaperBlur,
@@ -1911,7 +1928,7 @@ window.__ModuleLoader__.load({
 
 		  /* Light-scheme text ramp: grays were tuned against a near-white page and
 		     lose contrast over busy wallpapers — push them darker while active. */
-		  body[${ACTIVE_ATTR}]:not([data-ds-dark-theme]) {
+		  body[${ACTIVE_ATTR}]:not([${DARK_ATTR}]) {
 		    --dsw-alias-label-primary: rgb(0, 0, 0);
 		    --dsw-alias-label-primary-dimmed: rgb(10, 10, 12);
 		    --dsw-alias-label-secondary: rgb(40, 42, 46);
@@ -1929,7 +1946,7 @@ window.__ModuleLoader__.load({
 		    --dsw-specific-input-major: rgba(255, 255, 255, 0.15);
 		    --dsw-specific-bubble: rgba(255, 255, 255, 0.12);
 		  }
-		  body[data-ds-dark-theme][${ACTIVE_ATTR}] {
+		  body[${DARK_ATTR}][${ACTIVE_ATTR}] {
 		    --dsw-specific-input-major: rgba(255, 255, 255, 0.06);
 		    --dsw-specific-bubble: rgba(255, 255, 255, 0.05);
 		  }
@@ -2170,7 +2187,10 @@ window.__ModuleLoader__.load({
 		`;
 
 		// ── Plugin exports ──────────────────────────────────────────────────────────
-		const inject = ["slots"];
+		// The client runner (dsh-cordis-client-runner) rejects ctx.get() of any
+		// service this plugin does not declare. slots registers the settings row,
+		// locale drives the bilingual UI, theme drives the veil/scheme reactions.
+		const inject = ["slots", "locale", "theme"];
 
 		function apply(ctx) {
 		  // A plugin UPDATE re-applies this module WITHOUT re-evaluating it: the old
@@ -2198,6 +2218,42 @@ window.__ModuleLoader__.load({
 		    } catch { /* event bus unavailable → static language */ }
 		  }
 
+		  // 0b. Theme: follow the shell's theme service (snapshot.active.colorScheme
+		  //     is "light"|"dark"; "theme/change" emits the new snapshot). Without
+		  //     the service, fall back to the OS prefers-color-scheme media query.
+		  //     A flip re-runs applyEffects() so the veil colour (black ↔ white) and
+		  //     the DARK_ATTR mirror follow immediately.
+		  const themeSvc = typeof ctx.get === "function" ? ctx.get("theme") : undefined;
+		  if (themeSvc && typeof themeSvc.getTheme === "function") {
+		    try {
+		      const snap = themeSvc.getTheme();
+		      themeDark = Boolean(snap && snap.active && snap.active.colorScheme === "dark");
+		    } catch { /* keep previous state */ }
+		    if (typeof ctx.on === "function") {
+		      try {
+		        ctx.on("theme/change", (snap) => {
+		          const next = Boolean(snap && snap.active && snap.active.colorScheme === "dark");
+		          if (next !== themeDark) { themeDark = next; applyEffects(); }
+		        });
+		      } catch { /* event bus unavailable → static theme */ }
+		    }
+		  } else if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
+		    try {
+		      const mq = window.matchMedia("(prefers-color-scheme: dark)");
+		      themeDark = Boolean(mq && mq.matches);
+		      if (typeof mq.addEventListener === "function") {
+		        const onScheme = (e) => {
+		          const next = Boolean(e && e.matches);
+		          if (next !== themeDark) { themeDark = next; applyEffects(); }
+		        };
+		        mq.addEventListener("change", onScheme);
+		        if (typeof ctx.effect === "function") {
+		          ctx.effect(() => () => mq.removeEventListener("change", onScheme));
+		        }
+		      }
+		    } catch { /* no matchMedia → light default */ }
+		  }
+
 		  // 1. Styles: owned by the fiber — injected on apply, REMOVED on dispose.
 		  if (ctx.effect && typeof document !== "undefined") {
 		    ctx.effect(() => {
@@ -2230,12 +2286,6 @@ window.__ModuleLoader__.load({
 		          applyEffects();
 		        }, 2500);
 		      }
-		      // A theme switch flips the veil colour immediately (black ↔ white).
-		      let observer = null;
-		      if (typeof MutationObserver === "function") {
-		        observer = new MutationObserver(() => applyEffects());
-		        observer.observe(document.body, { attributes: true, attributeFilter: ["data-ds-dark-theme"] });
-		      }
 		      return () => {
 		        // Stop any in-flight inventory fetch from committing state (and
 		        // re-arming the rotation timer) after teardown began.
@@ -2246,7 +2296,6 @@ window.__ModuleLoader__.load({
 		        // removes the bar and its listeners) before tearing layers down.
 		        exitAdjust();
 		        if (samplerId !== null) window.clearInterval(samplerId);
-		        if (observer) observer.disconnect();
 		        sampledLuminance = null;
 		        if (previewProbe) { previewProbe.remove(); previewProbe = null; }
 		        clearRotationTimer();
@@ -2265,6 +2314,7 @@ window.__ModuleLoader__.load({
 		        if (scrim) scrim.remove();
 		        clearEffects();
 		        document.body.removeAttribute(ACTIVE_ATTR);
+		        document.body.removeAttribute(DARK_ATTR);
 		      };
 		    });
 		  }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wallpaper-engine-dsh",
-  "version": "1.0.8",
+  "version": "2.0.0",
   "description": "Wallpaper Engine library as the DSH web GUI background — video/web/still wallpapers, rotation lists, search, resource monitor, bilingual UI.",
   "type": "module",
   "main": "lib/index.js",
@@ -53,7 +53,7 @@
     },
     "client": {
       "inject": [
-        "@deepseek-ai/dsh-client-runtime"
+        "@deepseek-ai/dsh-client-ui-settings-general"
       ],
       "platform": "web",
       "immediately": true
@@ -71,23 +71,28 @@
     "release:major": "npm version major -m \"chore: release v%s\" && git push --follow-tags"
   },
   "engines": {
+    "dsh": ">=0.2.1-rc.5",
     "node": ">=18.17"
   },
   "peerDependencies": {
     "@deepseek-ai/cordis": "^4.0.1",
-    "@deepseek-ai/dsh-client-runtime": ">=0.1.0-rc.6",
-    "@deepseek-ai/dsh-client-ui-slots": ">=0.1.0-rc.6",
-    "@deepseek-ai/dsh-host-webserver": ">=0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-locale": ">=0.2.1-rc.5",
+    "@deepseek-ai/dsh-client-ui-settings-general": ">=0.2.1-rc.5",
+    "@deepseek-ai/dsh-client-ui-theme": ">=0.2.1-rc.5",
+    "@deepseek-ai/dsh-host-webserver": ">=0.2.1-rc.5",
     "react": "^18.2.0"
   },
   "peerDependenciesMeta": {
     "@deepseek-ai/cordis": {
       "optional": true
     },
-    "@deepseek-ai/dsh-client-runtime": {
+    "@deepseek-ai/dsh-client-locale": {
       "optional": true
     },
-    "@deepseek-ai/dsh-client-ui-slots": {
+    "@deepseek-ai/dsh-client-ui-settings-general": {
+      "optional": true
+    },
+    "@deepseek-ai/dsh-client-ui-theme": {
       "optional": true
     },
     "@deepseek-ai/dsh-host-webserver": {