wallpaper-engine-dsh 1.0.8 → 2.1.0

package/README.md

@@ -8,11 +8,11 @@ A DSH bundle that turns your local **Wallpaper Engine** library into the live ba
 
 **The library, rendered live.** The grid lists every wallpaper the browser can genuinely render — video and web wallpapers. Scene and application wallpapers are Wallpaper Engine's private `.pkg` scene packages; since no browser can execute them, they are filtered out rather than offered as degraded stills. Everything listed plays for real, badged Video or Web, and a search box narrows large libraries by title or workshop id instantly.
 
-**Legibility on any wallpaper.** Text stays readable by construction, not by luck. The veil always opposes the text colour — black in the dark theme, white in the light theme — so neither a pitch-black nor a pure-white wallpaper can swallow the UI. On top of that, a Smart veil samples the wallpaper's brightness every few seconds and automatically strengthens the veil when a scene drifts too bright (or too dark) for the current theme (web wallpapers' pixels are unreadable inside the sandbox, so their preview still stands in as the sample); it also strengthens the border contrast and the glass frosting on the same evidence. Dropdowns, menus, and dialogs sit on DSH's opaque surfaces and are never affected.
+**Legibility on any wallpaper.** Text stays readable by construction, not by luck. The veil always opposes the text colour — black in the dark theme, white in the light theme — so neither a pitch-black nor a pure-white wallpaper can swallow the UI. On top of that, a Smart veil samples the wallpaper's brightness every few seconds and automatically strengthens the veil when a scene drifts too bright (or too dark) for the current theme (web wallpapers' pixels are unreadable inside the sandbox, so their preview still stands in as the sample). While a wallpaper is active, dropdown menus, the slash-command popup, the queue-dock panel, the settings dialog, and the image lightbox all render as frosted glass: the shell's own menu primitive carries an isolation property that silently kills its internal blur layer, so the plugin applies the blur on the surface element itself and deepens the menu fill, keeping overlay text readable over any wallpaper. Everything reverts to the host look when the wallpaper is off.
 
 **Manual framing.** Pick a base layout — Cover, Contain, Stretch, Original, or Free — then frame the shot yourself. **Adjust** opens the live wallpaper fullscreen: scroll to zoom, drag to pan. In the first four layouts the crop is clamped so the image always fills the screen with no exposed edges; **Free** places the wallpaper at natural size on a black canvas where it can be dragged anywhere, zoomed from 0.1× to 4×, and rotated to any angle (±90° buttons or Alt+drag), with just enough kept on screen that it can never be dragged out of sight. **Mirror** flips the wallpaper horizontally and works in every layout — a flip never exposes an edge. Esc or Done finishes, the framing persists, and **Reset crop** restores the default in one click. Web wallpapers take the same select and the same zoom/pan/rotate framing — the transform applies to the iframe directly.
 
-**Four live sliders.** Wallpaper blur, Scrim, Borders, and Glass — every change lands instantly and persists. Blur renders in place: composition, layout, and crop stay identical at every blur level, and within one blur radius of the screen edge the picture fades softly into the veil beneath the UI chrome. A whisper of dither noise keeps smooth gradients band-free; at zero blur the media bypasses the filter pipeline entirely for bit-exact pixels.
+**Four live sliders.** Wallpaper blur, Scrim, Borders, and Glass — every change lands instantly and persists. Blur renders in place: composition, layout, and crop stay identical at every blur level, and within one blur radius of the screen edge the picture fades softly into the veil beneath the UI chrome. A whisper of dither noise keeps smooth gradients band-free; at zero blur the media bypasses the filter pipeline entirely for bit-exact pixels. The Glass slider's colour melt is anchored to the shell's own menu material: at the 40px ceiling it reproduces the host recipe blur(40px) saturate(150%) exactly, so full glass reads as one system with the shell's native frost.
 
 **Rotation lists.** Build any number of carousel lists, each with its own wallpapers, interval (1–120 min), and order (sequence or random). Auto-rotate arms once the active list holds at least two usable wallpapers; the status row always reports whether rotation is actually running. Your first playable Wallpaper Engine playlist is imported automatically on first run; any other playlist can be imported into any list.
 
@@ -48,6 +48,14 @@ Restart `dsh web`, then open **Settings → General → Wallpaper Engine**.
 
 Your selection and every knob persist in the browser's `localStorage`.
 
+## Desktop
+
+The desktop shell and the browser share the same frontend and the same injection pipeline; the `platform: "web"` declaration works as-is, with no separate desktop package.
+
+- **Windows**: the main window is opaque and the wallpaper renders at the DOM layer. The window-controls strip at the top is an opaque host-owned overlay; the plugin blends the wallpaper into it with a short fade in the overlay's own colour, and the fade switches off in fullscreen.
+- **macOS**: the shell sidebar is the system's native vibrant material, so what shows behind the wallpaper there is the system material rather than the wallpaper itself — host behaviour.
+- **With system transparency effects off** (`prefers-reduced-transparency`), all glass and blur falls back to solid surfaces; the wallpaper stays, and legibility is carried by the veil and the solids.
+
 ## How it works
 
 The bundle has two halves:

package/README.zh.md

@@ -8,11 +8,11 @@
 
 **只列出能真实播放的壁纸。** 网格中列出浏览器可以真实渲染的全部类型——视频与网页壁纸。场景/应用壁纸是 Wallpaper Engine 私有的 `.pkg` 场景包,浏览器无法执行,因此直接过滤,不以降级的静态图代替。列出的每张壁纸都真实播放,并按 视频/网页 标注类型;搜索框可按标题或创意工坊 ID 筛选较大的壁纸库。
 
-**任何壁纸上文字都可读。** 遮罩颜色始终与文字颜色相反:深色主题用黑色遮罩,浅色主题用白色遮罩,因此过亮或过暗的壁纸都不会盖住文字。在此基础上,「智能可视」每隔几秒采样一次壁纸亮度,亮度过高或过低时自动加强遮罩(网页壁纸的像素在沙箱中读不到,改用其预览图作为采样依据)。下拉菜单、弹窗等浮层显示在 DSH 原生的不透明表面上,不受影响。
+**任何壁纸上文字都可读。** 遮罩颜色始终与文字颜色相反:深色主题用黑色遮罩,浅色主题用白色遮罩,因此过亮或过暗的壁纸都不会盖住文字。在此基础上,「智能可视」每隔几秒采样一次壁纸亮度,亮度过高或过低时自动加强遮罩(网页壁纸的像素在沙箱中读不到,改用其预览图作为采样依据)。壁纸激活时,下拉菜单、斜杠命令提示框、队列面板、设置弹窗与图片灯箱统一为磨砂玻璃:外壳的菜单原语自身带隔离属性,其内部模糊层在宿主原样下并不生效,插件改为在 surface 元素上施加模糊,并把菜单底色加深,保证浮层文字在任意壁纸上可读;关闭壁纸后恢复宿主原样。
 
 **手动取景。** 先选基础排布(填充、适应、拉伸、原始、自由),再手动调整画面:点「调整画面」将壁纸全屏展开,滚轮缩放,拖动平移。前四种排布下裁剪范围经过限制,画面始终铺满屏幕,不露出边缘;「自由」把壁纸按原始大小放在黑色画布上,可拖动到任意位置,缩放范围 0.1–4×,并可旋转任意角度(±90° 按钮或 Alt+拖动),同时始终保留一小块在屏幕内,不会拖丢。「镜像」水平翻转壁纸,所有排布下都可用——翻转不会破坏铺满。按 Esc 或点「完成」退出,取景设置会保存,「重置裁剪」可一键恢复默认。网页壁纸使用相同的排布下拉与缩放/平移/旋转取景(变换直接作用于 iframe)。
 
-**四个实时滑杆。** 壁纸模糊、暗化、边框、玻璃,每一步调节立即生效并保存。模糊在原位渲染:任意模糊度下,画面的比例、排布与取景完全一致;屏幕边缘一个模糊半径内的画面向遮罩过渡,被界面边饰覆盖,通常不可见。模糊时叠加轻微噪声,消除渐变色带;模糊为零时媒体完全绕过滤镜管线,像素保持不变。
+**四个实时滑杆。** 壁纸模糊、暗化、边框、玻璃,每一步调节立即生效并保存。模糊在原位渲染:任意模糊度下,画面的比例、排布与取景完全一致;屏幕边缘一个模糊半径内的画面向遮罩过渡,被界面边饰覆盖,通常不可见。模糊时叠加轻微噪声,消除渐变色带;模糊为零时媒体完全绕过滤镜管线,像素保持不变。玻璃滑杆的「色彩熔融」在 40px 满档时正好等于外壳官方菜单材质的配方(blur(40px) saturate(150%)),满档玻璃与外壳原生磨砂观感一致。
 
 **轮播列表。** 可以创建任意多个列表,各自指定壁纸集合、切换间隔(1–120 分钟)与顺序(顺序/随机)。当前列表至少有两张可用壁纸时才会自动轮转;状态行始终显示轮转是否正在运行。首次运行会自动导入第一个可播放的 Wallpaper Engine 播放列表,其他播放列表也可随时导入到任意列表。
 
@@ -48,6 +48,14 @@ dsh plugin --profile web add link:<克隆文件夹的绝对路径>
 
 你的选择与每一项调节都持久化在浏览器的 `localStorage` 中。
 
+## 桌面端
+
+桌面端与浏览器共用同一前端和同一注入管道,`platform: "web"` 声明即可生效,无需单独的桌面包。
+
+- **Windows**:主窗口不透明,壁纸渲染在 DOM 层。顶部窗口控制按钮条是宿主维护的实色 overlay,插件用一条与 overlay 同色的短渐变把壁纸衔接过去,弱化接缝;进入全屏时自动关闭。
+- **macOS**:外壳侧栏为系统原生 vibrant 材质,壁纸在其后播放时透出的是系统材质而非壁纸本身,为外壳既定行为。
+- **系统关闭透明效果**(`prefers-reduced-transparency`)时,玻璃与模糊全部退为实色表面,壁纸保留,可读性由遮罩与实色表面保证。
+
 ## 工作原理
 
 bundle 分为两半:

package/lib/client.js

@@ -10,6 +10,12 @@ 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 own dark-mode body
+		// attribute still exists in 0.2.1-rc.5 (its writer moved to the layout
+		// theme presenter), but the stylesheet never keys off host DOM internals:
+		// the client derives dark from the shell's theme service and mirrors it
+		// here, so a host-side restructure can never silently break the glass.
+		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 +1099,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 +1172,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,
@@ -1186,9 +1204,22 @@ window.__ModuleLoader__.load({
 		  s.setProperty("--webg-scrim-color", veilColor);
 		  s.setProperty("--webg-border-alpha", String(selection.border));
 		  s.setProperty("--webg-blur", selection.blur + "px");
-		  // The glass "colour melt" scales with blur radius: 0 blur → no melt.
-		  s.setProperty("--webg-saturate", String(1.15 + selection.blur * 0.028));
+		  // The glass "colour melt" anchors at the shell's own menu material: the
+		  // slider's 40px ceiling reproduces the host recipe blur(40px) saturate(150%)
+		  // exactly, so full glass and the host's frosted chrome read as one system.
+		  s.setProperty("--webg-saturate", String(1 + selection.blur * 0.0125));
 		  s.setProperty("--webg-glass-brightness", "1.04");
+		  // Modal masks (settings dialog, image lightbox) read the shell's mask-blur
+		  // token — wire it to the glass slider so modals frost the app behind them
+		  // instead of showing the wallpaper sharply through a translucent mask.
+		  // Capped: a 40px blur on a full-viewport backdrop costs more GPU than the
+		  // effect is worth.
+		  // Gated on an active selection: this is a HOST token, so masks must not
+		  // blur the app while no wallpaper runs. At 0 blur: none - no layer, no cost.
+		  s.setProperty("--dsw-mask-blur",
+		    selection.id && selection.blur > 0
+		      ? "blur(" + Math.min(selection.blur, 20) + "px)"
+		      : "none");
 		  // At 0 blur, keep the media OUT of the filter pipeline entirely: even
 		  // blur(0px) forces an extra raster/compositing pass, and the noise overlay
 		  // would still occupy a layer at opacity 0. filter:none + display:none keep
@@ -1226,6 +1257,7 @@ window.__ModuleLoader__.load({
 		  s.removeProperty("--webg-scrim-color");
 		  s.removeProperty("--webg-border-alpha");
 		  s.removeProperty("--webg-blur");
+		  s.removeProperty("--dsw-mask-blur"); // restore the host's own mask token
 		  s.removeProperty("--webg-saturate");
 		  s.removeProperty("--webg-glass-brightness");
 		  s.removeProperty("--webg-media-filter");
@@ -1911,7 +1943,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,20 +1961,97 @@ 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);
 		  }
 		  body[${ACTIVE_ATTR}] [data-composer-card],
 		  body[${ACTIVE_ATTR}] [class*="_bubble"] {
-		    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05) 38%, rgba(255, 255, 255, 0.02));
-		    -webkit-backdrop-filter: blur(var(--webg-blur, 16px)) saturate(var(--webg-saturate, 1.8)) brightness(var(--webg-glass-brightness, 1.04)) contrast(1.01);
-		    backdrop-filter: blur(var(--webg-blur, 16px)) saturate(var(--webg-saturate, 1.8)) brightness(var(--webg-glass-brightness, 1.04)) contrast(1.01);
+		    background-image: linear-gradient(165deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06) 32%, rgba(255, 255, 255, 0.02));
+		    -webkit-backdrop-filter: blur(var(--webg-blur, 16px)) saturate(var(--webg-saturate, 1.2)) brightness(var(--webg-glass-brightness, 1.04)) contrast(1.01);
+		    backdrop-filter: blur(var(--webg-blur, 16px)) saturate(var(--webg-saturate, 1.2)) brightness(var(--webg-glass-brightness, 1.04)) contrast(1.01);
 		    box-shadow:
-		      inset 0 1px 0 rgba(255, 255, 255, 0.32),
-		      inset 0 -1px 0 rgba(255, 255, 255, 0.08),
-		      inset 0 0 0 0.5px rgba(255, 255, 255, 0.08),
-		      0 12px 40px rgba(0, 0, 0, 0.12);
+		      inset 0 1px 0 rgba(255, 255, 255, 0.36),
+		      inset 0 -1px 0 rgba(255, 255, 255, 0.10),
+		      inset 0 0 0 0.5px rgba(255, 255, 255, 0.10),
+		      0 12px 40px rgba(0, 0, 0, 0.14);
+		  }
+
+		  /* Menu + queue-dock surface repair (wallpaper active). The shell's
+		     menu primitive parks fill and blur on a child layer while the
+		     surface element itself is isolated - an isolated ancestor forms
+		     a backdrop root, so the blur only samples the panel interior.
+		     Same on the queue dock panel (:before carries the blur). With a
+		     wallpaper active, menus showed sharp content through a 45% fill.
+		     An element's OWN backdrop-filter ignores its own isolation, so
+		     the filter moves onto the surface element; fill deepened 72%. */
+		  body[${ACTIVE_ATTR}] { --dsw-menu-surface-fill: rgba(67, 69, 74, 0.72); }
+		  body[${ACTIVE_ATTR}]:not([${DARK_ATTR}]) { --dsw-menu-surface-fill: rgba(248, 249, 250, 0.72); }
+		  body[${ACTIVE_ATTR}] [data-menu-material],
+		  body[${ACTIVE_ATTR}] [data-composer-dock] [class*="_panel"] {
+		    -webkit-backdrop-filter: blur(var(--webg-blur, 16px)) saturate(var(--webg-saturate, 1.2)) brightness(var(--webg-glass-brightness, 1.04)) contrast(1.01);
+		    backdrop-filter: blur(var(--webg-blur, 16px)) saturate(var(--webg-saturate, 1.2)) brightness(var(--webg-glass-brightness, 1.04)) contrast(1.01);
+		  }
+
+		  /* Settings modal and sibling dialogs: the shell paints dialogs on
+		     an opaque layer-2 panel. While a wallpaper is active, dialogs
+		     join the glass system - the mask behind them already frosts the
+		     app (the mask blur token is wired to the glass slider in
+		     applyEffects). color-mix keeps the host hue at 80% opacity.
+		     [class*="_dialog_"] matches only the module-suffix panel class;
+		     compounds like _dialogHeader lack the underscore segment. */
+		  body[${ACTIVE_ATTR}] [class*="_dialog_"] {
+		    background-color: color-mix(in srgb, var(--dsw-alias-bg-layer-2) 80%, transparent);
+		    -webkit-backdrop-filter: blur(var(--webg-blur, 16px)) saturate(var(--webg-saturate, 1.2)) brightness(var(--webg-glass-brightness, 1.04)) contrast(1.01);
+		    backdrop-filter: blur(var(--webg-blur, 16px)) saturate(var(--webg-saturate, 1.2)) brightness(var(--webg-glass-brightness, 1.04)) contrast(1.01);
+		  }
+
+		  /* Windows desktop: the window-controls strip is an opaque host
+		     overlay (titleBarOverlay colour, fed from the renderer-measured
+		     palette). Blend the wallpaper up into it with a short fade from
+		     the overlay's own colour (dark #1b1b1c / light #f9fafb), scoped
+		     to the desktop marker html[data-windows-titlebar] (absent in
+		     browsers) and off in fullscreen. Pure CSS: the fill var flips
+		     with the plugin dark mirror attribute, no JS involved. */
+		  body[${DARK_ATTR}] { --webg-titlebar-fill: #1b1b1c; }
+		  body:not([${DARK_ATTR}]) { --webg-titlebar-fill: #f9fafb; }
+		  html[data-windows-titlebar]:not([data-fullscreen]) body[${ACTIVE_ATTR}] .webg-scrim::before {
+		    content: ""; position: absolute; top: 0; left: 0; right: 0;
+		    height: var(--dsh-windows-titlebar-height, 40px);
+		    background: linear-gradient(var(--webg-titlebar-fill, #1b1b1c), transparent);
+		  }
+
+		  /* Accessibility: prefers-reduced-transparency (Windows transparency
+		     effects off, macOS Reduce transparency). Glass off, surfaces back
+		     to solid fills; the wallpaper stays, legibility carried by the
+		     veil and the solids. Selectors mirror the glass rules above so
+		     this block wins by document order. */
+		  @media (prefers-reduced-transparency: reduce) {
+		    body[${ACTIVE_ATTR}] {
+		      --dsw-specific-input-major: #26272c;
+		      --dsw-specific-bubble: #26272c;
+		      --dsw-menu-surface-fill: #43454a;
+		      --dsw-mask-blur: none !important;
+		    }
+		    body[${ACTIVE_ATTR}]:not([${DARK_ATTR}]) {
+		      --dsw-specific-input-major: #f8f9fa;
+		      --dsw-specific-bubble: #f4f5f6;
+		      --dsw-menu-surface-fill: #f8f9fa;
+		      --dsw-mask-blur: none !important;
+		    }
+		    body[${ACTIVE_ATTR}] [data-composer-card],
+		    body[${ACTIVE_ATTR}] [class*="_bubble"],
+		    body[${ACTIVE_ATTR}] [data-menu-material],
+		    body[${ACTIVE_ATTR}] [data-composer-dock] [class*="_panel"],
+		    body[${ACTIVE_ATTR}] [class*="_dialog_"] {
+		      -webkit-backdrop-filter: none;
+		      backdrop-filter: none;
+		      background-image: none;
+		      box-shadow: var(--dsw-elevation-soft, 0 3px 8px rgba(0, 0, 0, 0.08));
+		    }
+		    body[${ACTIVE_ATTR}] [class*="_dialog_"] {
+		      background-color: var(--dsw-alias-bg-layer-2);
+		    }
 		  }
 
 		  /* ── Picker chrome (token-driven, theme-aware) ── */
@@ -2170,7 +2279,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 +2310,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 +2378,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 +2388,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 +2406,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.1.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": {