wallpaper-engine-dsh 1.0.7 → 2.0.0

package/README.md

@@ -64,6 +64,7 @@ Media serving is defensive by design: tokens are unguessable 72-bit values, stab
 
 - Scene and application wallpapers are not listed: they are Wallpaper Engine's private `.pkg` scene packages, and their live animation can only be rendered by Wallpaper Engine itself on the desktop.
 - Web wallpapers run isolated from the page's storage, so ones that persist state across loads won't keep it.
+- Web wallpapers with sound may stay silent until you interact with the page — browsers gate audio in sandboxed documents on a user gesture, and wallpapers that rely on Wallpaper Engine's system-audio feed (visualizers) have no signal to draw from.
 - The glass effect reads DSH design tokens; if a future shell redesign renames them, frosting degrades to plain transparency.
 
 ## Development

package/README.zh.md

@@ -64,6 +64,7 @@ bundle 分为两半:
 
 - 场景与应用壁纸不出现在列表中:它们是 Wallpaper Engine 私有的 `.pkg` 场景包,动态渲染只能由桌面端的 Wallpaper Engine 完成。
 - 网页壁纸与页面存储隔离,需要跨加载保存状态的壁纸无法保留状态。
+- 带声音的网页壁纸可能在你与页面交互前保持静默——浏览器对沙箱文档的音频有自动播放限制;依赖 Wallpaper Engine 系统音频输入的壁纸(如音频可视化)在浏览器中没有信号可画。
 - 玻璃效果读 DSH 设计令牌;若未来外壳重构重命名令牌,磨砂会退化为普通半透明。
 
 ## 开发

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";
@@ -688,6 +693,7 @@ window.__ModuleLoader__.load({
 		    media = document.createElement("iframe");
 		    media.src = sel.url;
 		    media.setAttribute("sandbox", "allow-scripts");
+		    media.setAttribute("allow", "autoplay");
 		    media.setAttribute("referrerpolicy", "no-referrer");
 		    media.setAttribute("frameborder", "0");
 		    media.setAttribute("scrolling", "no");
@@ -1019,7 +1025,13 @@ window.__ModuleLoader__.load({
 		      if (existing) {
 		        existing.classList.add("webg-layer--leave");
 		        const stale = existing;
-		        schedule(() => stale.remove(), LEAVE_MS);
+		        schedule(() => {
+		          const v = stale.querySelector("video");
+		          if (v) { v.pause(); v.removeAttribute("src"); if (typeof v.load === "function") v.load(); }
+		          const f = stale.querySelector("iframe");
+		          if (f) { f.src = "about:blank"; }
+		          stale.remove();
+		        }, LEAVE_MS);
 		      }
 		    }
 		    const node = document.getElementById(LAYER_ID);
@@ -1035,11 +1047,18 @@ window.__ModuleLoader__.load({
 		    existing.classList.add("webg-layer--leave");
 		    const stale = existing;
 		    schedule(() => {
+		      const v = stale.querySelector("video");
+		      if (v) { v.pause(); v.removeAttribute("src"); if (typeof v.load === "function") v.load(); }
+		      const f = stale.querySelector("iframe");
+		      if (f) { f.src = "about:blank"; }
 		      stale.remove();
 		      if (!document.getElementById(LAYER_ID)) {
 		        const s = document.getElementById(SCRIM_ID);
 		        if (s) s.remove();
 		        document.body.removeAttribute(ACTIVE_ATTR);
+		        if (previewProbe) { previewProbe.remove(); previewProbe = null; }
+		        sampledLuminance = null;
+		        clearEffects();
 		      }
 		    }, LEAVE_MS);
 		  }
@@ -1060,6 +1079,9 @@ window.__ModuleLoader__.load({
 		      if (selection.type === "web") {
 		        const w = selection.inventory.wallpapers.find((x) => x.id === selection.id);
 		        if (w && w.preview) probePreviewLuminance(w.preview);
+		      } else if (previewProbe) {
+		        previewProbe.remove();
+		        previewProbe = null;
 		      }
 		    }
 		}
@@ -1076,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) {
@@ -1146,10 +1171,20 @@ 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,
-		    selection.autoScrim, sampledLuminance, selection.fit, selection.zoom,
+		    selection.autoScrim, roundedLum, selection.fit, selection.zoom,
 		    selection.offsetX, selection.offsetY, selection.rotation, selection.mirrored,
 		  ].join("\u0000");
 		  if (key === lastEffectKey) return; // nothing it reads changed → no writes, no reflow
@@ -1200,9 +1235,6 @@ window.__ModuleLoader__.load({
 		  // slider feedback lands on this frame even on stalled compositors.
 		  const scrim = document.getElementById(SCRIM_ID);
 		  if (scrim) scrim.style.background = veilColor;
-		  if (document.body && document.body.offsetHeight !== undefined) {
-		    void document.body.offsetHeight;
-		  }
 		}
 
 		function clearEffects() {
@@ -1242,7 +1274,7 @@ window.__ModuleLoader__.load({
 		    }
 		    onInput(v);
 		  };
-		  return React.createElement(React.Fragment, null,
+		  return React.createElement(React.Fragment, { key: label },
 		    React.createElement("span", { className: "webg-hint webg-label" }, label),
 		    React.createElement("input", {
 		      className: "webg-slider", type: "range",
@@ -1446,6 +1478,7 @@ window.__ModuleLoader__.load({
 		      className: "webg-text webg-search", type: "search",
 		      placeholder: t.searchPlaceholder,
 		      value: query,
+		      onChange: (e) => setQuery(e.target.value),
 		      onInput: (e) => setQuery(e.target.value),
 		    }),
 		    query.trim() && React.createElement("span", { className: "webg-hint" },
@@ -1476,14 +1509,14 @@ window.__ModuleLoader__.load({
 		    React.createElement("span", { className: "webg-card-close" }, t.closeCard),
 		    ),
 		    usableList.length === 0
-		      ? React.createElement("span", { className: "webg-hint" },
+		      ? React.createElement("span", { className: "webg-hint webg-grid-empty" },
 		          sel.inventory.installDir
 		            ? (sel.inventory.total > 0
 		                ? t.emptyNoUsable(sel.inventory.total)
 		                : t.emptyNoProjects)
 		            : t.emptyNoInstall)
 		      : filteredList.length === 0
-		        ? React.createElement("span", { className: "webg-hint" }, t.noMatch(q))
+		        ? React.createElement("span", { className: "webg-hint webg-grid-empty" }, t.noMatch(q))
 		        : filteredList.map((w) => ThumbCard(w, w.id === sel.id, () => applySelection(w.id), t)),
 		  );
 		}
@@ -1563,7 +1596,9 @@ window.__ModuleLoader__.load({
 		      React.createElement("input", {
 		        className: "webg-text", type: "text",
 		        value: editing.name,
-		        onInput: (e) => { editing.name = e.target.value; emit(); },
+		        onChange: (e) => { editing.name = e.target.value; if (!e.nativeEvent || !e.nativeEvent.isComposing) emit(); },
+		        onInput: (e) => { editing.name = e.target.value; },
+		        onCompositionEnd: (e) => { editing.name = e.target.value; emit(); },
 		      }),
 		    ),
 		    React.createElement("div", { className: "webg-row" },
@@ -1588,6 +1623,7 @@ window.__ModuleLoader__.load({
 		      className: "webg-text", type: "search",
 		      placeholder: t.filterPlaceholder,
 		      value: editorQuery,
+		      onChange: (e) => setEditorQuery(e.target.value),
 		      onInput: (e) => setEditorQuery(e.target.value),
 		    }),
 		    React.createElement("div", { className: "webg-editor-grid" },
@@ -1595,10 +1631,10 @@ window.__ModuleLoader__.load({
 		        const eq = editorQuery.trim();
 		        const pool = usableList.filter((w) => matchesQuery(w, eq));
 		        if (usableList.length === 0) {
-		          return React.createElement("span", { className: "webg-hint" }, t.noUsable);
+		          return React.createElement("span", { className: "webg-hint webg-grid-empty" }, t.noUsable);
 		        }
 		        if (pool.length === 0) {
-		          return React.createElement("span", { className: "webg-hint" }, t.noMatch(eq));
+		          return React.createElement("span", { className: "webg-hint webg-grid-empty" }, t.noMatch(eq));
 		        }
 		        return pool.map((w) => EditorCard(w, editing, t));
 		      })(),
@@ -1685,7 +1721,7 @@ window.__ModuleLoader__.load({
 		        className: "webg-btn", type: "button", onClick: enterAdjust,
 		        disabled: sel.adjusting,
 		      }, t.adjust),
-		      (sel.zoom !== 1 || sel.offsetX !== 0 || sel.offsetY !== 0) &&
+		      (sel.zoom !== 1 || sel.offsetX !== 0 || sel.offsetY !== 0 || sel.rotation !== 0) &&
 		        React.createElement("button", {
 		          className: "webg-btn", type: "button", onClick: resetCrop,
 		        }, t.resetCrop),
@@ -1892,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);
@@ -1910,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);
 		  }
@@ -2070,6 +2106,11 @@ window.__ModuleLoader__.load({
 		    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
 		    gap: 8px; max-height: 300px; overflow-y: auto; padding: 2px;
 		  }
+		  .webg-grid-empty {
+		    grid-column: 1 / -1;
+		    display: flex; align-items: center; justify-content: center;
+		    padding: 24px 12px; text-align: center;
+		  }
 		  .webg-card {
 		    position: relative; width: 100%; padding: 0; cursor: pointer;
 		    aspect-ratio: 16 / 9; display: block; overflow: hidden;
@@ -2146,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
@@ -2174,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(() => {
@@ -2206,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.
@@ -2222,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();
@@ -2241,6 +2314,7 @@ window.__ModuleLoader__.load({
 		        if (scrim) scrim.remove();
 		        clearEffects();
 		        document.body.removeAttribute(ACTIVE_ATTR);
+		        document.body.removeAttribute(DARK_ATTR);
 		      };
 		    });
 		  }
@@ -2323,7 +2397,7 @@ window.__ModuleLoader__.load({
 		  if (ctx.slots) {
 		    ctx.slots.inject("settings.general.item", () =>
 		      ctx.slots.register(
-		        { name: "settings.general.item", id: "we-background", order: 500, label: S().settingsLabel },
+		        { name: "settings.general.item", id: "we-background", order: 500, label: () => S().settingsLabel },
 		        () => React.createElement(WallpaperPicker),
 		      ),
 		    );

package/lib/core.js

@@ -174,8 +174,10 @@ export function steamProbeDirs(platform = process.platform, home = homedir) {
       return [
         'C:\\Program Files (x86)\\Steam',
         'C:\\Program Files\\Steam',
+        'C:\\SteamLibrary',
         'D:\\Steam',
         'D:\\SteamLibrary',
+        'E:\\Steam',
         'E:\\SteamLibrary',
       ];
     case 'darwin':
@@ -536,9 +538,13 @@ export function mimeFor(absPath) {
     js: 'text/javascript; charset=utf-8', mjs: 'text/javascript; charset=utf-8',
     css: 'text/css; charset=utf-8', json: 'application/json; charset=utf-8',
     jpg: 'image/jpeg', jpeg: 'image/jpeg', gif: 'image/gif',
-    png: 'image/png', webp: 'image/webp', svg: 'image/svg+xml',
+    png: 'image/png', webp: 'image/webp', svg: 'image/svg+xml', ico: 'image/x-icon',
     mp3: 'audio/mpeg', ogg: 'audio/ogg', wav: 'audio/wav',
+    flac: 'audio/flac', aac: 'audio/aac', m4a: 'audio/mp4',
     woff: 'font/woff', woff2: 'font/woff2', ttf: 'font/ttf',
+    otf: 'font/otf', eot: 'application/vnd.ms-fontobject',
+    wasm: 'application/wasm', txt: 'text/plain; charset=utf-8',
+    xml: 'application/xml; charset=utf-8',
   }[ext] || 'application/octet-stream';
 }
 

package/lib/index.js

@@ -265,7 +265,7 @@ export function createRouteRegistrar(webServer, opts = {}) {
       // unguessable token remains the only capability — wildcard origin
       // grants nothing beyond what a known URL already grants.
       res.setHeader('Access-Control-Allow-Origin', '*');
-      if (mime === 'text/html' || mime === 'image/svg+xml') {
+      if (mime.startsWith('text/html') || mime === 'image/svg+xml') {
         // Script-capable documents (web wallpapers, SVG previews) get a
         // sandbox CSP even on direct top-level navigation, so they can
         // never execute against the DSH origin. `allow-scripts` keeps the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wallpaper-engine-dsh",
-  "version": "1.0.7",
+  "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": {