wallpaper-engine-dsh 0.1.8 → 0.1.9

package/README.md

@@ -2,11 +2,11 @@
 
 [English](README.md) | [中文](README.zh.md)
 
-A DSH bundle that turns your local **Wallpaper Engine** library into the live background of the DSH web GUI (`dsh web`). Video wallpapers play behind the chat, web wallpapers render in place, and scene/application wallpapers join in as still images — with crossfade transitions, liquid-glass panels, rotation lists, search, a resource monitor, and a bilingual UI.
+A DSH bundle that turns your local **Wallpaper Engine** library into the live background of the DSH web GUI (`dsh web`). Video wallpapers play behind the chat and web wallpapers render in place — with crossfade transitions, liquid-glass panels, rotation lists, search, a resource monitor, and a bilingual UI.
 
 ## Features
 
-- **Whole-library browsing** — video and web wallpapers render live; scene and application wallpapers show their preview as a static background. Everything with a preview or playable file is selectable, badged by type (Video / Web / Still).
+- **Renderable-only browsing** — video and web wallpapers render live and are the only kinds listed: scene and application wallpapers are Wallpaper Engine's private `.pkg` scene packages, which no browser can render, so they are filtered out instead of offered as degraded stills. A video the browser cannot decode falls back to its preview image until you refresh.
 - **Search** — filter the grid instantly by title or workshop id.
 - **Rotation lists** — any number of carousel lists, each with its own wallpapers, interval (1–120 min) and order (sequence/random). Your first playable Wallpaper Engine playlist is imported automatically; others can be imported into any list.
 - **Four live sliders** — Wallpaper blur, Scrim, Borders, Glass — all instant and persisted.
@@ -50,13 +50,13 @@ The bundle has two halves:
   - `GET /we-background/inventory[?refresh=1]`
   - `GET /we-background/media/<token>[/asset…]` — with HTTP Range support for video seeking; web wallpapers can fetch their bundled sub-assets
   - `GET /we-background/preview/<token>`
-- A **browser plugin** renders the chosen wallpaper on a fixed layer behind the app frame, contributes the settings UI, and keeps every effect on DSH design tokens so themes apply cleanly. Wallpaper blur is clipped overscan (no content warping) with a whisper of dither noise to keep gradients band-free; a video the browser cannot decode falls back to the wallpaper's preview image. Scene and application wallpapers can only show their workshop preview — the bundle reads each preview's pixel size and presents low-resolution ones as sharp centered art over a blurred copy of themselves, instead of a mushy fullscreen stretch.
+- A **browser plugin** renders the chosen wallpaper on a fixed layer behind the app frame, contributes the settings UI, and keeps every effect on DSH design tokens so themes apply cleanly. Wallpaper blur is clipped overscan (no content warping) with a whisper of dither noise to keep gradients band-free; a video that repeatedly fails to decode (an unsupported container) falls back to its preview still, and the next Refresh retries the live media.
 
 The host answers from a 30-second inventory cache with stable per-wallpaper tokens (an in-flight stream is never killed by a background rebuild); discovery is resolved asynchronously and cached for ten minutes. The bundle registers no model tools and adds no prompt text.
 
 ## Limitations
 
-- Scene and application wallpapers render as still images; their live animation remains Wallpaper Engine's desktop job.
+- Scene and application wallpapers are not listed at all: 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.
 - The glass effect reads DSH design tokens; if a future shell redesign renames them, frosting degrades to plain transparency.
 

package/README.zh.md

@@ -2,11 +2,11 @@
 
 [English](README.md) | [中文](README.zh.md)
 
-一个 DSH bundle：把本机 **Wallpaper Engine** 壁纸库变成 DSH web GUI(`dsh web`)的动态背景。视频壁纸在聊天界面背后播放，网页壁纸原地渲染，场景/应用壁纸以预览图作为静态背景——带交叉淡入、液态玻璃面板、轮播列表、搜索和资源监控。
+一个 DSH bundle：把本机 **Wallpaper Engine** 壁纸库变成 DSH web GUI(`dsh web`)的动态背景。视频壁纸在聊天界面背后播放，网页壁纸原地渲染——带交叉淡入、液态玻璃面板、轮播列表、搜索和资源监控。
 
 ## 功能
 
-- **全库浏览** —— 视频与网页壁纸动态渲染；场景与应用壁纸显示预览图作为静态背景。凡是有预览图或可播放文件的壁纸都可选用，按类型标注角标（视频 / 网页 / 静态）。
+- **只列可原生渲染的壁纸** —— 视频与网页壁纸动态渲染,且是列表中仅有的两类:场景/应用壁纸是 Wallpaper Engine 私有的 `.pkg` 场景包,浏览器无法渲染,因此直接从列表中过滤,而不是以降级的静态图充数。浏览器解不了的视频会临时退到预览图,下次刷新即重试原媒体。
 - **搜索** —— 按标题或创意工坊 ID 即时筛选网格。
 - **轮播列表** —— 可建任意多个列表，各自拥有壁纸集合、切换间隔（1–120 分钟）和顺序（顺序/随机）。首次运行自动导入第一个可播放的 Wallpaper Engine 播放列表，其余列表可随时导入。
 - **四个实时滑杆** —— 壁纸模糊、暗化、边框、玻璃，即时生效并持久保存。
@@ -50,13 +50,13 @@ bundle 分为两半：
   - `GET /we-background/inventory[?refresh=1]`
   - `GET /we-background/media/<token>[/资源…]` —— 支持 HTTP Range，视频可拖动进度；网页壁纸可加载其打包的子资源
   - `GET /we-background/preview/<token>`
-- **浏览器插件** 把选中的壁纸渲染在应用框架之下的固定层，提供设置界面，所有视觉效果都读 DSH 设计令牌，主题切换自然生效。壁纸模糊采用裁边式超采样（内容不变形），叠加微量抖动噪声消除渐变色带；浏览器解不了的视频会自动改用该壁纸的预览图。场景与应用壁纸在浏览器里只能显示工坊预览图——插件会读取每张预览图的像素尺寸，低分辨率的以「清晰原图居中 + 自身高斯模糊铺底」的氛围方式呈现，而不是拉伸成一片糊。
+- **浏览器插件** 把选中的壁纸渲染在应用框架之下的固定层，提供设置界面，所有视觉效果都读 DSH 设计令牌，主题切换自然生效。壁纸模糊采用裁边式超采样（内容不变形），叠加微量抖动噪声消除渐变色带；反复解码失败的视频（不支持的容器）退到预览图，下次刷新重试原媒体。
 
 清单由宿主缓存 30 秒，媒体令牌按壁纸稳定复用（后台重建不会掐断播放中的流）；安装发现异步执行并缓存 10 分钟。本插件不注册模型工具，不占用 prompt。
 
 ## 限制
 
-- 场景与应用壁纸以静态图呈现，其动态渲染仍是 Wallpaper Engine 桌面的职责。
+- 场景与应用壁纸完全不出现在列表里：它们是 Wallpaper Engine 私有的 `.pkg` 场景包，动态渲染只能由桌面端的 Wallpaper Engine 完成。
 - 网页壁纸与页面存储隔离，需要跨加载保存状态的壁纸无法保留状态。
 - 玻璃效果读 DSH 设计令牌；若未来外壳重构重命名令牌，磨砂会退化为普通半透明。
 

package/lib/client.js

@@ -19,12 +19,6 @@ window.__ModuleLoader__.load({
 		/** Below this FPS the picker shows a performance hint. */
 		const LOW_FPS = 24;
 
-		/**
-		 * Below this preview width a fullscreen cover render is pure upscale mush —
-		 * present as ambient (sharp contain over a blurred copy of itself) instead.
-		 */
-		const LOW_RES_PREVIEW_PX = 1200;
-
 		// Respect the OS "reduce motion" preference: start paused rather than
 		// autoplaying a video loop at someone who asked for less motion.
 		const REDUCED_MOTION = typeof window !== "undefined" &&
@@ -54,7 +48,6 @@ window.__ModuleLoader__.load({
 		    noPreview: "无预览",
 		    badgeVideo: "视频",
 		    badgeWeb: "网页",
-		    badgeStill: "静态",
 		    rotationList: "轮播列表",
 		    selectList: "— 选择轮播列表 —",
 		    noLists: "— 暂无轮播列表 —",
@@ -100,8 +93,6 @@ window.__ModuleLoader__.load({
 		    adjustDone: "完成",
 		    adjustHint: "拖动平移 · 滚轮缩放 · Esc 或点「完成」退出",
 		    resetCrop: "重置裁剪",
-		    ambientNote: "预览分辨率低,已氛围化显示",
-		    lowResBadge: "低清",
 		    statusGroup: (name, total, usable, interval, order) =>
 		      "列表「" + name + "」:" + total + " 项 · " + usable + " 可用 · 每 " + interval + " 分钟 · " + order,
 		    statusUsable: (n) => n + " 张可用壁纸",
@@ -134,7 +125,6 @@ window.__ModuleLoader__.load({
 		    noPreview: "No preview",
 		    badgeVideo: "Video",
 		    badgeWeb: "Web",
-		    badgeStill: "Still",
 		    rotationList: "Rotation list",
 		    selectList: "— Select a list —",
 		    noLists: "— No lists yet —",
@@ -180,8 +170,6 @@ window.__ModuleLoader__.load({
 		    adjustDone: "Done",
 		    adjustHint: "Drag to pan · wheel to zoom · Esc or Done to exit",
 		    resetCrop: "Reset crop",
-		    ambientNote: "Low-res preview — ambient fill",
-		    lowResBadge: "Low-res",
 		    statusGroup: (name, total, usable, interval, order) =>
 		      "List \"" + name + "\": " + total + " items · " + usable + " usable · every " + interval + " min · " + order,
 		    statusUsable: (n) => n + " usable wallpapers",
@@ -297,7 +285,6 @@ window.__ModuleLoader__.load({
 		  ...readPersisted(),
 		  url: null,
 		  type: null,
-		  previewW: null, // pixel width of the still being shown (ambient decisions)
 		  adjusting: false, // crop-adjust overlay open (not persisted)
 		  playing: !REDUCED_MOTION,
 		  loading: false,
@@ -348,17 +335,16 @@ window.__ModuleLoader__.load({
 
 		// ── Wallpaper predicates ─────────────────────────────────────────────────────
 		// playable: real media (video/web) renders live.
-		// static:   scene/application with a preview image renders as a still.
+		// Renderable kinds ONLY — scene/application wallpapers are .pkg scene
+		// packages the browser cannot render (their live animation is Wallpaper
+		// Engine's desktop job), so they are filtered out of the grid entirely
+		// rather than offered as degraded preview stills.
 		function isPlayable(w) {
 		  return Boolean(w && w.playable && (w.type === "video" || w.type === "web"));
 		}
 
-		function isStatic(w) {
-		  return Boolean(w && !isPlayable(w) && typeof w.preview === "string" && w.preview);
-		}
-
 		function isSelectable(w) {
-		  return isPlayable(w) || isStatic(w);
+		  return isPlayable(w);
 		}
 
 		function selectableInventory() {
@@ -366,13 +352,22 @@ window.__ModuleLoader__.load({
 		}
 
 		// ── Inventory ────────────────────────────────────────────────────────────────
+		// Monotonic token for in-flight inventory fetches: a fetch that started
+		// before a newer one must not commit its (older) state afterwards, and a
+		// fetch still in flight at dispose must not commit anything at all — its
+		// applySelection call would re-arm the rotation timer on a torn-down store.
+		let inventoryEpoch = 0;
+		let disposed = false;
+
 		async function loadInventory(forceRefresh) {
+		  const epoch = ++inventoryEpoch;
 		  selection.loading = true;
 		  emit();
 		  try {
 		    const res = await fetch(forceRefresh ? INVENTORY_URL + "?refresh=1" : INVENTORY_URL, { cache: "no-store" });
 		    if (!res.ok) throw new Error("inventory HTTP " + res.status);
 		    const data = await res.json();
+		    if (disposed || epoch !== inventoryEpoch) return;
 		    selection.inventory = {
 		      installDir: data.installDir || null,
 		      wallpapers: Array.isArray(data.wallpapers) ? data.wallpapers : [],
@@ -382,11 +377,13 @@ window.__ModuleLoader__.load({
 		      error: null,
 		    };
 		  } catch (err) {
+		    if (disposed || epoch !== inventoryEpoch) return;
 		    selection.inventory = {
 		      installDir: null, wallpapers: [], total: 0, portableCount: 0, playlists: [],
 		      error: String(err && err.message ? err.message : err),
 		    };
 		  }
+		  if (disposed || epoch !== inventoryEpoch) return;
 		  selection.loading = false;
 		  selection.loaded = true;
 
@@ -604,17 +601,14 @@ window.__ModuleLoader__.load({
 		  if (isPlayable(w) && !demotedToPreview.has(selection.id)) {
 		    selection.url = w.media;
 		    selection.type = w.type; // "video" | "web"
-		    selection.previewW = null;
-		  } else if (w && w.preview) {
-		    // Static path: scene/application wallpapers, and playable wallpapers
-		    // demoted after repeated media failures (undecodable container…).
+		  } else if (isPlayable(w) && w.preview) {
+		    // Playable wallpaper demoted after repeated media failures (an
+		    // undecodable container) — its preview still is the graceful fallback.
 		    selection.url = w.preview;
 		    selection.type = "image";
-		    selection.previewW = typeof w.previewW === "number" ? w.previewW : null;
 		  } else {
 		    selection.url = null;
 		    selection.type = null;
-		    selection.previewW = null;
 		  }
 		  syncRotationTimer();
 		  emit();
@@ -646,11 +640,10 @@ window.__ModuleLoader__.load({
 		// Set by a media error handler to force a remount with fresh URLs; cleared
 		// once the remount happens.
 		let forceRemount = false;
-		let lastMediaRecoveryAt = 0;
-		// Media failure bookkeeping: the first error for a wallpaper may just be a
-		// stale token (fixed by a refresh+remount); a SECOND error for the same id
-		// means the bytes themselves are unusable (e.g. an mkv/avi Chromium cannot
-		// decode) — demote it to its preview image instead of looping forever.
+		// Per-wallpaper recovery timestamps: the first error for a wallpaper may
+		// just be a stale token; a SECOND error for the same id means the bytes are
+		// unusable — demote it to its preview instead of looping forever.
+		const lastRecoveryAt = new Map(); // wallpaperId → last recovery timestamp
 		const mediaFailures = new Map(); // wallpaperId → consecutive failure count
 		const demotedToPreview = new Set(); // wallpaperIds now rendered as stills
 
@@ -676,33 +669,14 @@ window.__ModuleLoader__.load({
 		    media.setAttribute("title", S().iframeTitle);
 		    media.className = "webg-media webg-iframe";
 		  } else {
-		    // Static wallpaper: the scene/application preview as a still image.
+		    // Static fallback: a playable wallpaper demoted after repeated media
+		    // failures — its preview still beats a black screen.
 		    media = document.createElement("img");
 		    media.src = sel.url;
 		    media.alt = "";
 		    media.draggable = false;
 		    media.setAttribute("decoding", "async");
 		    media.className = "webg-media";
-		    // Low-resolution previews (many workshop scenes ship 256–500px thumbs)
-		    // look terrible stretched fullscreen under cover. Present them like
-		    // music-app artwork instead: the image at its natural sharpness
-		    // (contain), over a heavily blurred full-bleed copy of itself.
-		    if (sel.fit === "cover" && typeof sel.previewW === "number" &&
-		        sel.previewW > 0 && sel.previewW < LOW_RES_PREVIEW_PX) {
-		      const wrap = document.createElement("div");
-		      wrap.className = "webg-ambient";
-		      const bg = document.createElement("img");
-		      bg.src = sel.url;
-		      bg.alt = "";
-		      bg.draggable = false;
-		      bg.className = "webg-ambient-bg";
-		      wrap.appendChild(bg);
-		      media.classList.add("webg-ambient-fg");
-		      wrap.appendChild(media);
-		      attachStillSampling(media);
-		      attachMediaError(media, sel);
-		      return wrap;
-		    }
 		  }
 		  attachStillSampling(media, sel);
 		  attachMediaError(media, sel);
@@ -725,16 +699,23 @@ window.__ModuleLoader__.load({
 		    mediaFailures.set(id, count);
 		    const w = selection.inventory.wallpapers.find((x) => x.id === id);
 		    if (count === 1) {
-		      // Maybe just a dead token: refetch fresh URLs and remount (throttled).
+		      // Maybe just a dead token: refetch fresh URLs and remount. Throttled
+		      // PER WALLPAPER — a global window would strand a video whose first
+		      // error lands soon after an unrelated recovery (no remount, no second
+		      // error, blank layer until a manual refresh).
 		      const now = Date.now();
-		      if (now - lastMediaRecoveryAt < 10000) return;
-		      lastMediaRecoveryAt = now;
+		      if (now - (lastRecoveryAt.get(id) || 0) < 10000) return;
+		      lastRecoveryAt.set(id, now);
 		      forceRemount = true;
 		      loadInventory(true);
 		    } else if (w && w.preview && !demotedToPreview.has(id)) {
 		      // The media itself is unusable here — fall back to the still preview.
 		      demotedToPreview.add(id);
 		      applySelection(id);
+		    } else if (!w || (!w.preview && !w.media)) {
+		      // Nothing renderable at all (preview-less or vanished from the
+		      // inventory): clear the selection instead of a black screen loop.
+		      applySelection("");
 		    }
 		  });
 		}
@@ -794,8 +775,11 @@ window.__ModuleLoader__.load({
 		  };
 		  const onPointerMove = (e) => {
 		    if (!drag) return;
-		    const w = overlay.clientWidth || 1;
-		    const h = overlay.clientHeight || 1;
+		    // translate % refers to the MEDIA BOX, which (blur overscan) is wider
+		    // than the viewport by 2× the wallpaper blur — divide by that, so the
+		    // content tracks the cursor 1:1 at any blur setting.
+		    const w = (overlay.clientWidth || 1) + 2 * selection.wallpaperBlur;
+		    const h = (overlay.clientHeight || 1) + 2 * selection.wallpaperBlur;
 		    // True clamping (clampNum is a validate-or-fallback for persisted data).
 		    selection.offsetX = Math.min(200, Math.max(-200,
 		      selection.offsetX + ((e.clientX - drag.x) / w) * 100));
@@ -809,10 +793,20 @@ window.__ModuleLoader__.load({
 		    drag = null;
 		    persistSelection();
 		  };
+		  // pointercancel (touch gesture takeover): end the drag without losing the
+		  // current offsets — otherwise drag stays "stuck" until the next pointerup.
+		  const onPointerCancel = () => {
+		    if (!drag) return;
+		    drag = null;
+		    persistSelection();
+		  };
 		  const onWheel = (e) => {
 		    if (typeof e.preventDefault === "function") e.preventDefault();
-		    const next = clampNum(selection.zoom * Math.exp(-(e.deltaY || 0) * 0.0012),
-		      0.25, 4, selection.zoom);
+		    // True clamping to [0.25, 4] — clampNum is a validate-or-fallback for
+		    // persisted data and would REJECT an out-of-range zoom instead of
+		    // pinning it to the boundary.
+		    const next = Math.min(4, Math.max(0.25,
+		      selection.zoom * Math.exp(-(e.deltaY || 0) * 0.0012)));
 		    selection.zoom = Math.round(next * 100) / 100;
 		    applyEffects();
 		    persistSelection();
@@ -823,6 +817,7 @@ window.__ModuleLoader__.load({
 		  overlay.addEventListener("pointerdown", onPointerDown);
 		  overlay.addEventListener("pointermove", onPointerMove);
 		  overlay.addEventListener("pointerup", onPointerUp);
+		  overlay.addEventListener("pointercancel", onPointerCancel);
 		  overlay.addEventListener("wheel", onWheel, { passive: false });
 		  done.addEventListener("click", onDone);
 		  document.addEventListener("keydown", onKey);
@@ -831,6 +826,7 @@ window.__ModuleLoader__.load({
 		    overlay.removeEventListener("pointerdown", onPointerDown);
 		    overlay.removeEventListener("pointermove", onPointerMove);
 		    overlay.removeEventListener("pointerup", onPointerUp);
+		    overlay.removeEventListener("pointercancel", onPointerCancel);
 		    overlay.removeEventListener("wheel", onWheel);
 		    done.removeEventListener("click", onDone);
 		    document.removeEventListener("keydown", onKey);
@@ -847,12 +843,6 @@ window.__ModuleLoader__.load({
 		  emit();
 		}
 
-		function isAmbientActive(sel) {
-		  return sel.type === "image" && sel.fit === "cover" &&
-		    typeof sel.previewW === "number" && sel.previewW > 0 &&
-		    sel.previewW < LOW_RES_PREVIEW_PX;
-		}
-
 		// Crossfade/clear leave timers: tracked so dispose can cancel them instead of
 		// letting them fire on torn-down nodes afterwards.
 		const pendingTimers = new Set();
@@ -958,6 +948,7 @@ window.__ModuleLoader__.load({
 		    const g = sampleCanvas.getContext("2d", { willReadFrequently: true });
 		    g.drawImage(media, 0, 0, 16, 16);
 		    const d = g.getImageData(0, 0, 16, 16).data;
+		    if (!d || d.length < 4) return; // unreadable frame → keep previous sample
 		    let sum = 0;
 		    for (let i = 0; i < d.length; i += 4) {
 		      sum += 0.299 * d[i] + 0.587 * d[i + 1] + 0.114 * d[i + 2];
@@ -1059,7 +1050,9 @@ window.__ModuleLoader__.load({
 		      min: String(min), max: String(max), step: String(step),
 		      value: String(value),
 		      style: { "--webg-p": String(pct) },
-		      onInput: set,
+		      // React normalizes onChange on range inputs to the DOM input event —
+		      // it fires CONTINUOUSLY while dragging. Registering onInput too would
+		      // run the handler twice per tick.
 		      onChange: set,
 		    }),
 		    React.createElement("span", { className: "webg-hint webg-value" }, suffix),
@@ -1068,8 +1061,7 @@ window.__ModuleLoader__.load({
 
 		function typeBadge(w, t) {
 		  if (w.type === "video") return t.badgeVideo;
-		  if (w.type === "web") return t.badgeWeb;
-		  return t.badgeStill;
+		  return t.badgeWeb;
 		}
 
 		function matchesQuery(w, q) {
@@ -1093,8 +1085,6 @@ window.__ModuleLoader__.load({
 		      })
 		    : React.createElement("span", { className: "webg-card-placeholder" }, t.noPreview),
 		  React.createElement("span", { className: "webg-card-type" }, typeBadge(w, t)),
-		  (typeof w.previewW === "number" && w.previewW > 0 && w.previewW < LOW_RES_PREVIEW_PX) &&
-		    React.createElement("span", { className: "webg-card-lowres" }, t.lowResBadge),
 		  React.createElement("span", { className: "webg-card-title" }, w.title),
 		  );
 		}
@@ -1111,6 +1101,7 @@ window.__ModuleLoader__.load({
 		    // preview after decode failures.
 		    demotedToPreview.clear();
 		    mediaFailures.clear();
+		    lastRecoveryAt.clear();
 		    loadInventory(true);
 		  };
 		  const onLangChange = (e) => {
@@ -1326,7 +1317,10 @@ window.__ModuleLoader__.load({
 		          value: String(editing.interval),
 		          onChange: (e) => { editing.interval = clampNum(Number(e.target.value), 1, 1440, DEFAULTS.rotationInterval); emit(); },
 		        },
-		        ...INTERVALS.map((minutes) =>
+		        // A persisted interval outside the preset steps (imported groups,
+		        // hand-edited storage) still gets a matching option — otherwise the
+		        // select would silently display the first preset instead of reality.
+		        ...[...new Set([...INTERVALS, editing.interval])].sort((x, y) => x - y).map((minutes) =>
 		          React.createElement("option", { key: minutes, value: String(minutes) }, t.minutes(minutes)),
 		        )),
 		        React.createElement("span", { className: "webg-hint webg-label" }, t.order),
@@ -1424,9 +1418,10 @@ window.__ModuleLoader__.load({
 		        disabled: !sel.rotationEnabled || !sel.rotationGroupId || usableCount < 2,
 		        title: t.intervalTitle,
 		      },
-		      ...INTERVALS.map((minutes) =>
-		        React.createElement("option", { key: minutes, value: String(minutes) }, t.minutes(minutes)),
-		      )),
+		      ...[...new Set([...INTERVALS, group ? group.interval : DEFAULTS.rotationInterval])]
+		        .sort((x, y) => x - y).map((minutes) =>
+		          React.createElement("option", { key: minutes, value: String(minutes) }, t.minutes(minutes)),
+		        )),
 		      !sel.rotationGroupId && React.createElement("span", { className: "webg-hint" }, t.needList),
 		      sel.rotationGroupId && usableCount < 2 && React.createElement("span", { className: "webg-hint" }, t.needTwo),
 		    ),
@@ -1453,12 +1448,11 @@ window.__ModuleLoader__.load({
 		          React.createElement("button", {
 		            className: "webg-btn", type: "button", onClick: resetCrop,
 		          }, t.resetCrop),
-		        isAmbientActive(sel) &&
-		          React.createElement("span", { className: "webg-hint" }, t.ambientNote),
 		      ),
 		      React.createElement("div", { className: "webg-effects" },
 		        SliderRow(t.wallpaperBlur, 0, 60, 1, sel.wallpaperBlur, onWallpaperBlur, sel.wallpaperBlur + "px"),
-		        SliderRow(t.scrim, 0, 90, 5, Math.round(sel.scrim * 100), onScrim, Math.round(sel.scrim * 100) + "%"),
+		        SliderRow(t.scrim, 0, 90, 5, Math.min(90, Math.round(sel.scrim * 100)), onScrim,
+		          Math.round(sel.scrim * 100) + "%"),
 		        SliderRow(t.border, 0, 90, 5, Math.round(sel.border * 100), onBorder, Math.round(sel.border * 100) + "%"),
 		        SliderRow(t.glass, 0, 40, 1, sel.blur, onBlur, sel.blur + "px"),
 		      ),
@@ -1542,26 +1536,6 @@ window.__ModuleLoader__.load({
 		    transform-origin: center center;
 		  }
 
-		  /* Ambient presentation for low-resolution stills: the sharp image (fg,
-		     contain) floats over a heavily blurred full-bleed copy of itself (bg).
-		     The fg keeps the user's wallpaper-blur/crop; the bg has its own fixed
-		     blur with its own overscan, so its fringe never shows. */
-		  .webg-ambient {
-		    position: absolute;
-		    inset: calc(-1 * var(--webg-wallpaper-blur, 0px));
-		    overflow: hidden;
-		  }
-		  .webg-ambient-bg {
-		    position: absolute; inset: -64px;
-		    width: calc(100% + 128px); height: calc(100% + 128px);
-		    object-fit: cover; display: block;
-		    filter: blur(48px) saturate(1.25) brightness(0.92);
-		  }
-		  .webg-ambient .webg-media {
-		    inset: 0; width: 100%; height: 100%;
-		    object-fit: contain;
-		  }
-
 		  /* Crop-adjust overlay: topmost, transparent — only its hint bar is chrome.
 		     The live layer is moved INSIDE, so editing is what-you-see. */
 		  .webg-adjust {
@@ -1804,11 +1778,6 @@ window.__ModuleLoader__.load({
 		    font-size: 10px; line-height: 1.5;
 		    color: #fff; background: rgba(0, 0, 0, 0.5);
 		  }
-		  .webg-card-lowres {
-		    position: absolute; top: 4px; left: 4px; padding: 1px 6px; border-radius: 4px;
-		    font-size: 10px; line-height: 1.5;
-		    color: #fff; background: rgba(0, 0, 0, 0.5);
-		  }
 		  .webg-card-title {
 		    position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px;
 		    font-size: 11px; line-height: 1.2; color: #fff;
@@ -1919,6 +1888,9 @@ window.__ModuleLoader__.load({
 		        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.
+		        disposed = true;
 		        unsubLayers();
 		        unsubEffects();
 		        // Close the crop-adjust overlay if it is open (moves the layer back,

package/lib/core.js

@@ -25,59 +25,6 @@ export const WE_APPID = '431960';
 /** Wallpaper kinds WE can declare. */
 export const KINDS = Object.freeze(['scene', 'video', 'web', 'application']);
 
-// ── 6. Image dimension sniffing ─────────────────────────────────────────────
-
-/**
- * Read pixel dimensions from an image's header bytes (JPEG/PNG/GIF/WebP).
- * Used to tell the client how sharp a scene/application preview really is —
- * workshop previews range from 256px thumbnails to full renders, and the UI
- * presents low-resolution ones differently.
- *
- * Header-only: reads at most 64 KiB, never decodes pixels. Returns
- * `{ w, h }` or null for unrecognized/truncated data.
- *
- * @param {Buffer|Uint8Array} b
- * @returns {{ w: number, h: number } | null}
- */
-export function sniffImageSize(b) {
-  if (!b || b.length < 10) return null; // GIF needs 10; other formats check their own reach
-  // PNG: 8-byte signature, then IHDR with width/height big-endian at 16/20.
-  if (b[0] === 0x89 && b[1] === 0x50 && b[2] === 0x4E && b[3] === 0x47) {
-    if (b.length < 24) return null;
-    return { w: b.readUInt32BE(16), h: b.readUInt32BE(20) };
-  }
-  // GIF: logical screen dimensions little-endian at 6/8.
-  const sig6 = b.toString('latin1', 0, 6);
-  if (sig6 === 'GIF87a' || sig6 === 'GIF89a') {
-    return { w: b.readUInt16LE(6), h: b.readUInt16LE(8) };
-  }
-  // JPEG: walk markers to the first start-of-frame segment.
-  if (b[0] === 0xFF && b[1] === 0xD8) {
-    let i = 2;
-    while (i + 9 < b.length) {
-      if (b[i] !== 0xFF) { i++; continue; }
-      const marker = b[i + 1];
-      if (marker >= 0xC0 && marker <= 0xCF && marker !== 0xC4 && marker !== 0xC8 && marker !== 0xCC) {
-        return { w: b.readUInt16BE(i + 7), h: b.readUInt16BE(i + 5) };
-      }
-      i += 2 + b.readUInt16BE(i + 2);
-    }
-    return null;
-  }
-  // WebP: RIFF container; VP8X carries canvas size minus one, uint24 LE.
-  if (b.toString('latin1', 0, 4) === 'RIFF' && b.toString('latin1', 8, 12) === 'WEBP' &&
-      b.toString('latin1', 12, 16) === 'VP8X' && b.length >= 30) {
-    return {
-      w: 1 + b[24] + (b[25] << 8) + (b[26] << 16),
-      h: 1 + b[27] + (b[28] << 8) + (b[29] << 16),
-    };
-  }
-  return null;
-}
-
-/** Kinds whose only browser-renderable asset is the preview image. */
-const PREVIEW_ONLY_KINDS = new Set(['scene', 'application']);
-
 /** Kinds this bundle can render in a browser. */
 export const PORTABLE_KINDS = Object.freeze(['video', 'web']);
 
@@ -101,6 +48,15 @@ export function parseKeyValues(text) {
   const src = String(text);
   const n = src.length;
   let i = 0;
+  let depth = 0;
+  const MAX_DEPTH = 100; // pathological nesting degrades, never overflows
+
+  // `__proto__`/`constructor`/`prototype` keys would corrupt (or fabricate
+  // via) the prototype chain through plain assignment — parse and discard.
+  const POISON_KEYS = new Set(['__proto__', 'constructor', 'prototype']);
+  const safeAssign = (obj, key, val) => {
+    if (!POISON_KEYS.has(key)) obj[key] = val;
+  };
 
   const skipSpace = () => {
     for (;;) {
@@ -136,6 +92,18 @@ export function parseKeyValues(text) {
   const value = () => {
     skipSpace();
     if (src[i] !== '{') return token();
+    if (++depth > MAX_DEPTH) {
+      // Too deep: consume the block without building it, keep parsing.
+      let d = 1;
+      i++;
+      while (i < n && d > 0) {
+        if (src[i] === '{') d++;
+        else if (src[i] === '}') d--;
+        i++;
+      }
+      depth--;
+      return null;
+    }
     i++;
     const obj = {};
     for (;;) {
@@ -143,8 +111,9 @@ export function parseKeyValues(text) {
       if (i >= n) break;
       if (src[i] === '}') { i++; break; }
       const key = token();
-      obj[key] = value();
+      safeAssign(obj, key, value());
     }
+    depth--;
     return obj;
   };
 
@@ -154,7 +123,7 @@ export function parseKeyValues(text) {
     if (i >= n) break;
     const key = token();
     if (!key) { i++; continue; }
-    root[key] = value();
+    safeAssign(root, key, value());
   }
   return root;
 }
@@ -499,7 +468,8 @@ export function pathKey(file) {
  * to an enumerated wallpaper id. Strategy order:
  *   1. exact normalized path match against enumerated main files,
  *   2. workshop url fragment `…/431960/<projectId>/…`,
- *   3. trailing project-folder name (covers install-relative entries).
+ *   3. trailing project-folder name (covers install-relative entries),
+ *   4. bare workshop id.
  * @param {string} item
  * @param {Map<string, string>} byPath pathKey(fileAbs) → id
  * @param {Map<string, unknown>} byId id → project
@@ -512,6 +482,7 @@ export function resolvePlaylistItem(item, byPath, byId) {
   if (workshop && byId.has(workshop[1])) return workshop[1];
   const folder = /[\\/]([^\\/]+)[\\/][^\\/]+$/i.exec(item);
   if (folder && byId.has(folder[1])) return folder[1];
+  if (typeof item === 'string' && byId.has(item)) return item; // bare id
   return null;
 }
 
@@ -604,8 +575,11 @@ export async function buildInventoryFrom(discovery = {}, io = {}) {
 
   const wallpapers = [];
   for (const p of projects) {
-    const portable = PORTABLE_KINDS.includes(p.type);
-    const hasMedia = portable && await exists(p.fileAbs);
+    // Renderable kinds ONLY: scene/application wallpapers are .pkg scene
+    // packages no browser can render, and their preview stills are a
+    // degraded experience — skip them instead of offering them.
+    if (!PORTABLE_KINDS.includes(p.type)) continue;
+    const hasMedia = await exists(p.fileAbs);
     const hasPreview = Boolean(p.previewAbs) && await exists(p.previewAbs);
     const mediaToken = hasMedia
       ? mint({ abs: p.fileAbs, rootDir: p.type === 'web' ? p.dir : null, key: `${p.id}:media` })
@@ -613,24 +587,15 @@ export async function buildInventoryFrom(discovery = {}, io = {}) {
     const previewToken = hasPreview
       ? mint({ abs: p.previewAbs, rootDir: null, key: `${p.id}:preview` })
       : null;
-    // Preview pixel size matters for scene/application wallpapers: the
-    // preview is ALL the browser can show, so the client needs to know how
-    // sharp it is. Sniff only for preview-only kinds (videos don't care).
-    let previewSize = null;
-    if (hasPreview && PREVIEW_ONLY_KINDS.has(p.type) &&
-        typeof io.readBuffer === 'function') {
-      try { previewSize = sniffImageSize(await io.readBuffer(p.previewAbs, 65536)); }
-      catch { previewSize = null; }
-    }
     wallpapers.push({
       id: p.id,
       title: p.title,
       type: p.type,
       playable: hasMedia && Boolean(mediaToken),
       media: hasMedia && mediaToken ? `${base}/media/${mediaToken}` : null,
+      // The preview stays in the payload even though stills are never
+      // selected: it is the decode-failure fallback for playable entries.
       preview: hasPreview && previewToken ? `${base}/preview/${previewToken}` : null,
-      previewW: previewSize ? previewSize.w : null,
-      previewH: previewSize ? previewSize.h : null,
     });
   }
   const playableIds = new Set(wallpapers.filter((w) => w.playable).map((w) => w.id));
@@ -647,7 +612,11 @@ export async function buildInventoryFrom(discovery = {}, io = {}) {
     const seen = new Set();
     for (const item of playlist.items) {
       const id = resolvePlaylistItem(item, byPath, byId);
-      if (id && !seen.has(id)) { seen.add(id); ids.push(id); }
+      // Only ids present IN THE PAYLOAD: a scene/application item resolves
+      // to an enumerated project but is filtered from wallpapers[] — keeping
+      // it would hand the client a dangling id it cannot render or look up.
+      // Such items count as unresolved (they are, for our purposes).
+      if (id && playableIds.has(id) && !seen.has(id)) { seen.add(id); ids.push(id); }
     }
     return {
       id: `pl-${index}`,

package/lib/index.js

@@ -44,7 +44,7 @@ import {
 } from 'node:fs';
 import { execFile } from 'node:child_process';
 import { randomBytes } from 'node:crypto';
-import { join } from 'node:path';
+import { join, dirname } from 'node:path';
 
 import * as core from './core.js';
 
@@ -61,15 +61,6 @@ const asyncIo = {
   readFileSync: (p, encoding) => fsp.readFile(p, encoding),
   readdirSync: (p) => fsp.readdir(p),
   statSync: (p) => fsp.stat(p),
-  // Header-only binary read for the image dimension sniffer (64 KiB cap).
-  readBuffer: async (p, max) => {
-    const fh = await fsp.open(p, 'r');
-    try {
-      const buf = Buffer.alloc(Math.min(max, 65536));
-      const { bytesRead } = await fh.read(buf, 0, buf.length, 0);
-      return buf.subarray(0, bytesRead);
-    } finally { await fh.close(); }
-  },
 };
 
 /** Steam root recorded by the Windows installer; null elsewhere/on failure. */
@@ -164,14 +155,22 @@ export function createRouteRegistrar(webServer, opts = {}) {
   // ── Inventory (cached) ──────────────────────────────────────────────────
   let cache = null; // { at: number, payload: object }
   let discoveryCache = null; // { at: number, value: object }
+  let discovering = null; // in-flight discovery (cold-start dedupe)
   let building = null; // in-flight build promise (request coalescing)
 
   async function getDiscovery(force) {
     const fresh = discoveryCache && Date.now() - discoveryCache.at < discoveryTtlMs;
     if (!force && fresh) return discoveryCache.value;
-    const value = await discoverFn();
-    discoveryCache = { at: Date.now(), value };
-    return value;
+    // Concurrent callers (registration warm-up + first request) share ONE
+    // discovery run instead of racing reg.exe twice at cold start.
+    if (discovering && !force) return discovering;
+    discovering = discoverFn()
+      .then((value) => {
+        discoveryCache = { at: Date.now(), value };
+        return value;
+      })
+      .finally(() => { if (!force) discovering = null; });
+    return discovering;
   }
 
   async function buildInventory(force) {
@@ -189,8 +188,14 @@ export function createRouteRegistrar(webServer, opts = {}) {
     if (!force && cache && Date.now() - cache.at < inventoryTtlMs) {
       return Promise.resolve(cache.payload);
     }
-    // Coalesce concurrent builds (double-clicked 刷新, parallel clients).
-    if (building) return building;
+    // Coalesce concurrent NON-forced builds (double-clicked 刷新 within the
+    // same tick, parallel clients). A forced refresh must never be folded
+    // into a non-forced in-flight build — the whole point of ?refresh=1 is
+    // the remint, so it waits for the current build and then rebuilds.
+    if (building) {
+      if (!force) return building;
+      return building.catch(() => {}).then(() => getInventory(true));
+    }
     building = buildInventory(force)
       .then((payload) => { cache = { at: Date.now(), payload }; return payload; })
       .finally(() => { building = null; });
@@ -216,10 +221,18 @@ export function createRouteRegistrar(webServer, opts = {}) {
         res.end();
         return;
       }
-      res.setHeader('Content-Type', core.mimeFor(absPath));
+      const mime = core.mimeFor(absPath);
+      res.setHeader('Content-Type', mime);
       res.setHeader('Accept-Ranges', 'bytes');
       res.setHeader('Cache-Control', 'no-store');
       res.setHeader('X-Content-Type-Options', 'nosniff');
+      if (mime === 'text/html' || mime === 'image/svg+xml') {
+        // Script-capable documents (web wallpapers, SVG previews) get a
+        // sandboxed CSP even on direct top-level navigation, so they can
+        // never execute against the DSH origin. The client's iframe sandbox
+        // already covers embedding; this is the server-side backstop.
+        res.setHeader('Content-Security-Policy', 'sandbox');
+      }
 
       const range = core.parseRangeHeader(req.headers.range, st.size);
       if (range && range.error) {
@@ -246,6 +259,16 @@ export function createRouteRegistrar(webServer, opts = {}) {
       // leave the already-announced Content-Length unsatisfied and the
       // client hanging — destroy the response instead.
       stream.on('error', () => { res.destroy(); });
+      // A file that SHRANK between stat and open streams fewer bytes than
+      // the announced Content-Length without any open error — count what
+      // actually went out and tear the response down on a short read so the
+      // client sees a retryable network failure, not a silent truncation.
+      const expected = range ? range.end - range.start + 1 : st.size;
+      let sent = 0;
+      stream.on('data', (chunk) => { sent += chunk.length; });
+      stream.on('end', () => {
+        if (sent !== expected) res.destroy();
+      });
       stream.pipe(res);
     }).catch(() => {
       res.statusCode = 404;
@@ -254,6 +277,27 @@ export function createRouteRegistrar(webServer, opts = {}) {
     });
   }
 
+  /**
+   * Real-path containment check (symlink defense). The lexical
+   * isInsideDir() passes above reject `..`-style escapes, but a symlink
+   * placed inside a wallpaper dir pointing outside would sail through
+   * lexically and be followed at open time. Resolve BOTH sides with
+   * realpath and re-check: a symlinked target resolves outside the real
+   * root and is refused. Resolves null when the path does not exist.
+   */
+  const realRootCache = new Map(); // token → realpath(root) | null
+  async function realPathWithin(entry, candidateAbs) {
+    let rootReal = realRootCache.get(entry.key || entry.abs);
+    if (rootReal === undefined) {
+      rootReal = await fsp.realpath(entry.rootDir || dirname(entry.abs)).catch(() => null);
+      realRootCache.set(entry.key || entry.abs, rootReal);
+    }
+    if (!rootReal) return null;
+    const realAbs = await fsp.realpath(candidateAbs).catch(() => null);
+    if (!realAbs || !core.isInsideDir(rootReal, realAbs)) return null;
+    return realAbs;
+  }
+
   // ── Routes ──────────────────────────────────────────────────────────────
   const disposers = [];
 
@@ -262,14 +306,24 @@ export function createRouteRegistrar(webServer, opts = {}) {
     path: `${BASE}/inventory`,
     handler: (req, res) => {
       if (req.method !== 'GET' && req.method !== 'HEAD') {
+        res.setHeader('Allow', 'GET, HEAD');
         sendJson(req, res, 405, { error: 'method not allowed' });
         return;
       }
-      const url = new URL(req.url || '/', 'http://x');
+      let url;
+      try {
+        url = new URL(req.url || '/', 'http://x');
+      } catch {
+        sendJson(req, res, 400, { error: 'bad request' });
+        return;
+      }
       getInventory(url.searchParams.get('refresh') === '1')
         .then((payload) => sendJson(req, res, 200, payload))
         .catch((err) => {
-          sendJson(req, res, 500, { error: String(err && err.message ? err.message : err) });
+          // Loopback-only, but the raw message can carry absolute paths —
+          // genericise for the wire, keep detail in the server log.
+          console.error('[we-background] inventory build failed:', err && err.stack || err);
+          sendJson(req, res, 500, { error: 'inventory build failed' });
         });
     },
   }));
@@ -281,6 +335,7 @@ export function createRouteRegistrar(webServer, opts = {}) {
       path: `${BASE}/${seg}`,
       handler: (req, res) => {
         if (req.method !== 'GET' && req.method !== 'HEAD') {
+          res.setHeader('Allow', 'GET, HEAD');
           sendJson(req, res, 405, { error: 'method not allowed' });
           return;
         }
@@ -333,7 +388,17 @@ export function createRouteRegistrar(webServer, opts = {}) {
             return;
           }
         }
-        serveFile(abs, req, res);
+        // Symlink backstop: serve only what realpath still keeps inside the
+        // entry's real root (404 — indistinguishable from a vanished file).
+        realPathWithin(entry, abs).then((real) => {
+          if (!real) {
+            res.statusCode = 404;
+            res.setHeader('Content-Length', '0');
+            res.end();
+            return;
+          }
+          serveFile(real, req, res);
+        });
       },
     }));
   }

package/lib/types/index.d.ts

@@ -4,10 +4,14 @@
  * mirrored on the default export.
  */
 
+/**
+ * One inventory entry. Scene/application wallpapers are filtered out at the
+ * source — the wire only ever carries the browser-renderable kinds.
+ */
 export interface WallpaperSummary {
   id: string;
   title: string;
-  type: 'scene' | 'video' | 'web' | 'application';
+  type: 'video' | 'web';
   playable: boolean;
   media: string | null;
   preview: string | null;

package/package.json

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