wallpaper-engine-dsh 0.1.0 → 0.1.3

package/lib/client.js

@@ -14,6 +14,10 @@ window.__ModuleLoader__.load({
 		const SCRIM_ID = "wallpaper-engine-dsh-scrim";
 		const STYLE_TAG_ID = "wallpaper-engine-dsh/styles";
 		const CROSSFADE_MS = 520;
+		/** Battery at or below this level (and discharging) auto-pauses playback. */
+		const BATTERY_SAVER_LEVEL = 0.2;
+		/** Below this FPS the picker shows a performance hint. */
+		const LOW_FPS = 24;
 
 		// Respect the OS "reduce motion" preference: start paused rather than
 		// autoplaying a video loop at someone who asked for less motion.
@@ -21,6 +25,182 @@ window.__ModuleLoader__.load({
 		  typeof window.matchMedia === "function" &&
 		  window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 
+		// ── i18n ─────────────────────────────────────────────────────────────────────
+		const STRINGS = {
+		  zh: {
+		    settingsLabel: "壁纸背景 (Wallpaper Engine)",
+		    scanning: "正在扫描 Wallpaper Engine…",
+		    connError: "未能连接 Wallpaper Engine:",
+		    retry: "重试",
+		    refreshing: "刷新中…",
+		    refresh: "刷新",
+		    pause: "暂停",
+		    play: "播放",
+		    close: "关闭",
+		    searchPlaceholder: "搜索壁纸(标题或 ID)…",
+		    matched: (m, n) => "匹配 " + m + " / " + n + " 张",
+		    emptyNoInstall: "未检测到 Wallpaper Engine — 请确认已通过 Steam 安装",
+		    emptyNoUsable: (n) => "已发现 " + n + " 张壁纸,但都缺少可播放内容或预览图",
+		    emptyNoProjects: "未在任何项目目录中发现壁纸(默认项目/我的项目/创意工坊)",
+		    noMatch: (q) => "没有匹配「" + q + "」的壁纸",
+		    closeCard: "✕ 关闭",
+		    closeTitle: "关闭壁纸",
+		    noPreview: "无预览",
+		    badgeVideo: "视频",
+		    badgeWeb: "网页",
+		    badgeStill: "静态",
+		    rotationList: "轮播列表",
+		    selectList: "— 选择轮播列表 —",
+		    noLists: "— 暂无轮播列表 —",
+		    groupOption: (name, count, interval) => name + "(" + count + " 可用 · " + interval + " 分钟)",
+		    newList: "新建",
+		    editList: "编辑",
+		    deleteList: "删除",
+		    name: "名称",
+		    interval: "间隔",
+		    order: "顺序",
+		    sequence: "顺序",
+		    random: "随机",
+		    minutes: (m) => m + " 分钟",
+		    filterPlaceholder: "搜索以筛选…",
+		    noUsable: "没有可用壁纸",
+		    selectedCount: (n) => "已选 " + n + " 个",
+		    importPlaylist: "从 WE 播放列表导入…",
+		    playlistOption: (name, count) => name + "(" + count + " 可播放)",
+		    save: "保存",
+		    cancel: "取消",
+		    autoRotate: "自动轮转",
+		    intervalTitle: "当前列表的切换间隔",
+		    needList: "请先选择或新建一个轮播列表",
+		    needTwo: "当前列表至少需要 2 张可用壁纸",
+		    wallpaperBlur: "壁纸模糊",
+		    scrim: "暗化",
+		    border: "边框",
+		    glass: "玻璃",
+		    pauseOnHidden: "页面隐藏时暂停",
+		    pauseOnBattery: "低电量时暂停",
+		    fpsTitle: "页面当前渲染帧率",
+		    lowFpsHint: "帧率偏低,可尝试暂停视频、增大壁纸模糊或换用静态壁纸",
+		    language: "语言",
+		    langAuto: "自动",
+		    fit: "排布",
+		    fitCover: "填充",
+		    fitContain: "适应",
+		    fitFill: "拉伸",
+		    fitNone: "原始",
+		    position: "对齐",
+		    posCenter: "居中",
+		    posTop: "顶部",
+		    posBottom: "底部",
+		    posLeft: "居左",
+		    posRight: "居右",
+		    statusGroup: (name, total, usable, interval, order) =>
+		      "列表「" + name + "」:" + total + " 项 · " + usable + " 可用 · 每 " + interval + " 分钟 · " + order,
+		    statusUsable: (n) => n + " 张可用壁纸",
+		    autoRotating: "自动轮转中",
+		    autoPaused: "已自动暂停",
+		    confirmDelete: (name) => "删除轮播列表「" + name + "」?",
+		    defaultGroupName: (n) => "轮播列表 " + n,
+		    defaultGroupBase: "轮播列表",
+		  },
+		  en: {
+		    settingsLabel: "Wallpaper Engine",
+		    scanning: "Scanning Wallpaper Engine…",
+		    connError: "Could not reach Wallpaper Engine: ",
+		    retry: "Retry",
+		    refreshing: "Refreshing…",
+		    refresh: "Refresh",
+		    pause: "Pause",
+		    play: "Play",
+		    close: "Close",
+		    searchPlaceholder: "Search wallpapers (title or ID)…",
+		    matched: (m, n) => m + " / " + n + " matched",
+		    emptyNoInstall: "Wallpaper Engine not found — make sure it is installed via Steam",
+		    emptyNoUsable: (n) => "Found " + n + " wallpapers, but none have playable media or a preview image",
+		    emptyNoProjects: "No wallpapers found in any project folder (defaults / my projects / workshop)",
+		    noMatch: (q) => "No wallpapers match \"" + q + "\"",
+		    closeCard: "✕ Close",
+		    closeTitle: "Clear wallpaper",
+		    noPreview: "No preview",
+		    badgeVideo: "Video",
+		    badgeWeb: "Web",
+		    badgeStill: "Still",
+		    rotationList: "Rotation list",
+		    selectList: "— Select a list —",
+		    noLists: "— No lists yet —",
+		    groupOption: (name, count, interval) => name + "(" + count + " usable · " + interval + " min)",
+		    newList: "New",
+		    editList: "Edit",
+		    deleteList: "Delete",
+		    name: "Name",
+		    interval: "Interval",
+		    order: "Order",
+		    sequence: "Sequence",
+		    random: "Random",
+		    minutes: (m) => m + " min",
+		    filterPlaceholder: "Filter…",
+		    noUsable: "No usable wallpapers",
+		    selectedCount: (n) => n + " selected",
+		    importPlaylist: "Import from WE playlist…",
+		    playlistOption: (name, count) => name + "(" + count + " playable)",
+		    save: "Save",
+		    cancel: "Cancel",
+		    autoRotate: "Auto-rotate",
+		    intervalTitle: "Switch interval for the current list",
+		    needList: "Create or select a rotation list first",
+		    needTwo: "The list needs at least 2 usable wallpapers",
+		    wallpaperBlur: "Wallpaper blur",
+		    scrim: "Scrim",
+		    border: "Borders",
+		    glass: "Glass",
+		    pauseOnHidden: "Pause when tab hidden",
+		    pauseOnBattery: "Pause on low battery",
+		    fpsTitle: "Current page frame rate",
+		    lowFpsHint: "Low frame rate — try pausing the video, raising wallpaper blur, or using a still wallpaper",
+		    language: "Language",
+		    langAuto: "Auto",
+		    fit: "Fit",
+		    fitCover: "Cover",
+		    fitContain: "Contain",
+		    fitFill: "Stretch",
+		    fitNone: "Original",
+		    position: "Align",
+		    posCenter: "Center",
+		    posTop: "Top",
+		    posBottom: "Bottom",
+		    posLeft: "Left",
+		    posRight: "Right",
+		    statusGroup: (name, total, usable, interval, order) =>
+		      "List \"" + name + "\": " + total + " items · " + usable + " usable · every " + interval + " min · " + order,
+		    statusUsable: (n) => n + " usable wallpapers",
+		    autoRotating: "Auto-rotating",
+		    autoPaused: "Auto-paused",
+		    confirmDelete: (name) => "Delete rotation list \"" + name + "\"?",
+		    defaultGroupName: (n) => "Rotation list " + n,
+		    defaultGroupBase: "Rotation list",
+		  },
+		};
+
+		/** Language the DSH shell reports via its locale service (null = unknown). */
+		let shellLang = null;
+
+		function browserLang() {
+		  if (typeof navigator !== "undefined" && navigator.language) {
+		    return String(navigator.language).toLowerCase().startsWith("zh") ? "zh" : "en";
+		  }
+		  return null;
+		}
+
+		function resolveLang() {
+		  if (selection.lang === "zh" || selection.lang === "en") return selection.lang;
+		  return shellLang || browserLang() || "zh";
+		}
+
+		/** Current string table. */
+		function S() {
+		  return STRINGS[resolveLang()];
+		}
+
 		// ── Defaults ─────────────────────────────────────────────────────────────────
 		const DEFAULTS = {
 		  scrim: 0.25,
@@ -32,18 +212,22 @@ window.__ModuleLoader__.load({
 		  rotationGroupId: "",
 		  rotationGroups: [],
 		  rotationSeeded: false,
+		  pauseOnHidden: true,
+		  pauseOnBattery: true,
+		  lang: "auto",
+		  fit: "cover",
+		  position: "center",
 		};
 
+		const FIT_MODES = ["cover", "contain", "fill", "none"];
+		const POSITIONS = ["center", "top", "bottom", "left", "right"];
+
 		// ── Persisted selection ─────────────────────────────────────────────────────
 		function clampNum(v, lo, hi, fallback) {
 		  return typeof v === "number" && isFinite(v) && v >= lo && v <= hi ? v : fallback;
 		}
 
-		// Rotation groups are user-defined carousel lists: each holds wallpaper ids
-		// picked from the inventory, its own switch interval (minutes) and order.
-		// Fully client-side (localStorage) — rotation never depends on Wallpaper
-		// Engine's own config.json playlist paths.
-		function readRotationGroups(raw) {
+		function readRotationGroups(raw, baseName) {
 		  if (!Array.isArray(raw)) return [];
 		  const groups = [];
 		  for (const g of raw) {
@@ -52,7 +236,7 @@ window.__ModuleLoader__.load({
 		    if (!id) continue;
 		    groups.push({
 		      id,
-		      name: typeof g.name === "string" && g.name.trim() ? g.name.trim() : "轮播列表",
+		      name: typeof g.name === "string" && g.name.trim() ? g.name.trim() : baseName,
 		      interval: clampNum(g.interval, 1, 1440, DEFAULTS.rotationInterval),
 		      order: g.order === "random" ? "random" : "sequence",
 		      wallpaperIds: Array.isArray(g.wallpaperIds)
@@ -76,8 +260,13 @@ window.__ModuleLoader__.load({
 		      wallpaperBlur: clampNum(o.wallpaperBlur, 0, 60, DEFAULTS.wallpaperBlur),
 		      rotationEnabled: o.rotationEnabled === true,
 		      rotationGroupId: typeof o.rotationGroupId === "string" ? o.rotationGroupId : "",
-		      rotationGroups: readRotationGroups(o.rotationGroups),
+		      rotationGroups: readRotationGroups(o.rotationGroups, STRINGS.zh.defaultGroupBase),
 		      rotationSeeded: o.rotationSeeded === true,
+		      pauseOnHidden: o.pauseOnHidden !== false,
+		      pauseOnBattery: o.pauseOnBattery !== false,
+		      lang: o.lang === "zh" || o.lang === "en" ? o.lang : "auto",
+		      fit: FIT_MODES.indexOf(o.fit) >= 0 ? o.fit : DEFAULTS.fit,
+		      position: POSITIONS.indexOf(o.position) >= 0 ? o.position : DEFAULTS.position,
 		    };
 		  } catch {
 		    return { id: "", ...DEFAULTS };
@@ -92,6 +281,10 @@ window.__ModuleLoader__.load({
 		  playing: !REDUCED_MOTION,
 		  loading: false,
 		  rotationTimer: null,
+		  // Reasons playback is auto-paused (hidden tab / low battery). Distinct from
+		  // the user's play/pause choice: effective playback = playing && no reasons.
+		  autoPauseReasons: new Set(),
+		  fps: null, // last sampled frames-per-second, null when unsampled
 		  // Live draft of the group being created/edited (null when editor closed).
 		  editing: null,
 		  inventory: { installDir: null, wallpapers: [], total: 0, portableCount: 0, playlists: [], error: null },
@@ -120,10 +313,34 @@ window.__ModuleLoader__.load({
 		      rotationGroupId: selection.rotationGroupId,
 		      rotationGroups: selection.rotationGroups,
 		      rotationSeeded: selection.rotationSeeded,
+		      pauseOnHidden: selection.pauseOnHidden,
+		      pauseOnBattery: selection.pauseOnBattery,
+		      lang: selection.lang,
+		      fit: selection.fit,
+		      position: selection.position,
 		    }));
 		  } catch { /* storage full / blocked → session-only state, not fatal */ }
 		}
 
+		// ── Wallpaper predicates ─────────────────────────────────────────────────────
+		// playable: real media (video/web) renders live.
+		// static:   scene/application with a preview image renders as a still.
+		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);
+		}
+
+		function selectableInventory() {
+		  return selection.inventory.wallpapers.filter(isSelectable);
+		}
+
 		// ── Inventory ────────────────────────────────────────────────────────────────
 		async function loadInventory(forceRefresh) {
 		  selection.loading = true;
@@ -173,8 +390,8 @@ window.__ModuleLoader__.load({
 		    persistSelection();
 		  }
 
-		  // Drop a selection whose wallpaper vanished or stopped being playable.
-		  if (selection.id && !selection.inventory.wallpapers.some((w) => w.id === selection.id && isPlayable(w))) {
+		  // Drop a selection whose wallpaper vanished or became unusable.
+		  if (selection.id && !selection.inventory.wallpapers.some((w) => w.id === selection.id && isSelectable(w))) {
 		    selection.id = "";
 		    persistSelection();
 		  }
@@ -190,14 +407,6 @@ window.__ModuleLoader__.load({
 		  emit();
 		}
 
-		function isPlayable(w) {
-		  return Boolean(w && w.playable && (w.type === "video" || w.type === "web"));
-		}
-
-		function playableInventory() {
-		  return selection.inventory.wallpapers.filter(isPlayable);
-		}
-
 		// ── Rotation groups ─────────────────────────────────────────────────────────
 		function activeRotationGroup() {
 		  return selection.rotationGroups.find((g) => g.id === selection.rotationGroupId) || null;
@@ -206,7 +415,7 @@ window.__ModuleLoader__.load({
 		function groupWallpapers(group) {
 		  if (!group || !Array.isArray(group.wallpaperIds)) return [];
 		  const byId = new Map(selection.inventory.wallpapers.map((w) => [w.id, w]));
-		  return group.wallpaperIds.map((id) => byId.get(id)).filter(isPlayable);
+		  return group.wallpaperIds.map((id) => byId.get(id)).filter(isSelectable);
 		}
 
 		function rotationCandidates() {
@@ -220,14 +429,14 @@ window.__ModuleLoader__.load({
 		function seedGroupsFromPlaylists() {
 		  const source = selection.inventory.playlists.find((p) => (p.portableCount || 0) >= 2);
 		  if (!source) return false;
-		  const ids = Array.isArray(source.wallpaperIds) ? source.wallpaperIds.filter((id) => {
-		    const w = selection.inventory.wallpapers.find((x) => x.id === id);
-		    return isPlayable(w);
-		  }) : [];
+		  const byId = new Map(selection.inventory.wallpapers.map((w) => [w.id, w]));
+		  const ids = Array.isArray(source.wallpaperIds)
+		    ? source.wallpaperIds.filter((id) => isSelectable(byId.get(id)))
+		    : [];
 		  if (ids.length < 2) return false;
 		  selection.rotationGroups.push({
 		    id: nextGroupId(),
-		    name: typeof source.name === "string" && source.name.trim() ? source.name.trim() : "轮播列表",
+		    name: typeof source.name === "string" && source.name.trim() ? source.name.trim() : S().defaultGroupBase,
 		    interval: DEFAULTS.rotationInterval,
 		    order: source.order === "random" ? "random" : "sequence",
 		    wallpaperIds: ids,
@@ -286,7 +495,7 @@ window.__ModuleLoader__.load({
 		function startCreateGroup() {
 		  selection.editing = {
 		    id: nextGroupId(),
-		    name: "轮播列表 " + (selection.rotationGroups.length + 1),
+		    name: S().defaultGroupName(selection.rotationGroups.length + 1),
 		    interval: DEFAULTS.rotationInterval,
 		    order: "sequence",
 		    wallpaperIds: [],
@@ -300,7 +509,7 @@ window.__ModuleLoader__.load({
 		  const idx = selection.rotationGroups.findIndex((g) => g.id === draft.id);
 		  const cleaned = {
 		    id: draft.id,
-		    name: typeof draft.name === "string" && draft.name.trim() ? draft.name.trim() : "轮播列表",
+		    name: typeof draft.name === "string" && draft.name.trim() ? draft.name.trim() : S().defaultGroupBase,
 		    interval: clampNum(draft.interval, 1, 1440, DEFAULTS.rotationInterval),
 		    order: draft.order === "random" ? "random" : "sequence",
 		    wallpaperIds: Array.isArray(draft.wallpaperIds)
@@ -346,8 +555,8 @@ window.__ModuleLoader__.load({
 
 		function importPlaylistIntoDraft(playlist) {
 		  if (!selection.editing || !playlist || !Array.isArray(playlist.wallpaperIds)) return;
-		  const playable = new Set(playableInventory().map((w) => w.id));
-		  selection.editing.wallpaperIds = playlist.wallpaperIds.filter((id) => playable.has(id));
+		  const usable = new Set(selectableInventory().map((w) => w.id));
+		  selection.editing.wallpaperIds = playlist.wallpaperIds.filter((id) => usable.has(id));
 		  emit();
 		}
 
@@ -357,32 +566,52 @@ window.__ModuleLoader__.load({
 		  const w = selection.id
 		    ? selection.inventory.wallpapers.find((x) => x.id === selection.id)
 		    : null;
-		  if (!w || !isPlayable(w)) {
+		  if (isPlayable(w)) {
+		    selection.url = w.media;
+		    selection.type = w.type; // "video" | "web"
+		  } else if (w && isStatic(w)) {
+		    selection.url = w.preview;
+		    selection.type = "image";
+		  } else {
 		    selection.url = null;
 		    selection.type = null;
-		  } else {
-		    selection.url = w.media;
-		    selection.type = w.type;
 		  }
 		  syncRotationTimer();
 		  emit();
 		}
 
+		// ── Auto-pause (resource monitor) ───────────────────────────────────────────
+		function setAutoPause(reason, on) {
+		  const had = selection.autoPauseReasons.size > 0;
+		  if (on) selection.autoPauseReasons.add(reason);
+		  else selection.autoPauseReasons.delete(reason);
+		  if ((selection.autoPauseReasons.size > 0) !== had) emit();
+		}
+
+		function effectivePlaying() {
+		  return selection.playing && selection.autoPauseReasons.size === 0;
+		}
+
 		// ── Behind-body layer: wallpaper + scrim, with crossfade ────────────────────
+		// Set by a media error handler to force a remount with fresh URLs; cleared
+		// once the remount happens.
+		let forceRemount = false;
+		let lastMediaRecoveryAt = 0;
+
 		function buildMedia(sel) {
-		  const media = sel.type === "video"
-		    ? document.createElement("video")
-		    : document.createElement("iframe");
+		  let media;
 		  if (sel.type === "video") {
+		    media = document.createElement("video");
 		    media.src = sel.url;
-		    media.autoplay = !REDUCED_MOTION;
+		    media.autoplay = effectivePlaying();
 		    media.loop = true;
 		    media.muted = true;
 		    media.setAttribute("playsinline", "");
 		    media.className = "webg-media";
-		  } else {
-		    // SECURITY: sandboxed, opaque origin. allow-scripts alone runs the
-		    // wallpaper's animation but denies it DSH's localStorage/cookies/APIs.
+		  } else if (sel.type === "web") {
+		    // Sandboxed opaque origin: wallpaper JS runs but cannot touch DSH
+		    // storage or APIs.
+		    media = document.createElement("iframe");
 		    media.src = sel.url;
 		    media.setAttribute("sandbox", "allow-scripts");
 		    media.setAttribute("referrerpolicy", "no-referrer");
@@ -390,24 +619,45 @@ window.__ModuleLoader__.load({
 		    media.setAttribute("scrolling", "no");
 		    media.setAttribute("title", "Wallpaper Engine web wallpaper");
 		    media.className = "webg-media webg-iframe";
+		  } else {
+		    // Static wallpaper: the scene/application preview as a still image.
+		    media = document.createElement("img");
+		    media.src = sel.url;
+		    media.alt = "";
+		    media.draggable = false;
+		    media.setAttribute("decoding", "async");
+		    media.className = "webg-media";
 		  }
+		  // Self-heal: if the media fails to load (e.g. its token died on an
+		  // inventory rebuild), refetch fresh URLs and remount — throttled to once
+		  // per 10 s so a permanently-broken wallpaper cannot loop.
+		  media.addEventListener("error", () => {
+		    const now = Date.now();
+		    if (now - lastMediaRecoveryAt < 10000) return;
+		    lastMediaRecoveryAt = now;
+		    forceRemount = true;
+		    loadInventory(true);
+		  });
 		  return media;
 		}
 
 		function syncLayers() {
 		  const existing = document.getElementById(LAYER_ID);
+		  const hasTimeout = typeof window !== "undefined" && typeof window.setTimeout === "function";
 
 		  if (selection.url) {
-		    const wantKey = selection.type + "\u0000" + selection.url;
+		    // Key by wallpaper id, NOT by media URL: inventory rebuilds re-mint
+		    // tokens, so a URL-keyed comparison would reload the playing video on
+		    // every refresh. A genuinely dead URL is recovered via forceRemount.
+		    const wantKey = selection.type + "|" + selection.id;
 		    const gotKey = existing && existing.dataset.webgKey;
 
-		    if (existing && gotKey === wantKey) {
+		    if (existing && gotKey === wantKey && !forceRemount) {
 		      // Same wallpaper — only play/pause may have changed.
 		    } else {
-		      // Crossfade: keep the old layer alive while the new one fades in on
-		      // top, then remove the old one after the transition settles. The old
-		      // layer surrenders the id FIRST — getElementById must resolve to the
-		      // new layer for the play/pause step below.
+		      forceRemount = false;
+		      // Crossfade: the new layer fades in over the old one; the old layer
+		      // surrenders the id FIRST so getElementById resolves to the new one.
 		      if (existing) existing.removeAttribute("id");
 		      const node = document.createElement("div");
 		      node.id = LAYER_ID;
@@ -415,38 +665,43 @@ window.__ModuleLoader__.load({
 		      node.dataset.webgKey = wantKey;
 		      node.appendChild(buildMedia(selection));
 		      document.body.appendChild(node);
-		      // Force a style flush so the enter transition actually runs.
-		      void node.offsetHeight;
+		      void node.offsetHeight; // style flush so the enter transition runs
 		      node.classList.remove("webg-layer--enter");
 		      if (existing) {
 		        existing.classList.add("webg-layer--leave");
 		        const stale = existing;
-		        if (typeof window !== "undefined" && typeof window.setTimeout === "function") {
-		          window.setTimeout(() => stale.remove(), CROSSFADE_MS + 120);
-		        } else {
-		          stale.remove();
-		        }
+		        if (hasTimeout) window.setTimeout(() => stale.remove(), CROSSFADE_MS + 120);
+		        else stale.remove();
 		      }
 		    }
 		    const node = document.getElementById(LAYER_ID);
 		    const video = node && node.querySelector("video");
 		    if (video) {
-		      if (selection.playing) { try { const p = video.play(); if (p && p.catch) p.catch(() => {}); } catch {} }
+		      if (effectivePlaying()) { try { const p = video.play(); if (p && p.catch) p.catch(() => {}); } catch {} }
 		      else video.pause();
 		    }
 		  } else if (existing) {
+		    // Clearing: fade out, then tear down scrim + frame transparency when the
+		    // fade completes — unless a new wallpaper was applied meanwhile.
+		    existing.removeAttribute("id");
 		    existing.classList.add("webg-layer--leave");
 		    const stale = existing;
-		    if (typeof window !== "undefined" && typeof window.setTimeout === "function") {
-		      window.setTimeout(() => stale.remove(), CROSSFADE_MS + 120);
-		    } else {
+		    const finish = () => {
 		      stale.remove();
-		    }
+		      if (!document.getElementById(LAYER_ID)) {
+		        const s = document.getElementById(SCRIM_ID);
+		        if (s) s.remove();
+		        document.body.removeAttribute(ACTIVE_ATTR);
+		      }
+		    };
+		    if (hasTimeout) window.setTimeout(finish, CROSSFADE_MS + 120);
+		    else finish();
 		  }
 
-		  // Scrim: always present while a wallpaper is active.
-		  const scrim = document.getElementById(SCRIM_ID);
+		  // Scrim: present while a wallpaper is active. On clear it outlives the
+		  // layer until the fade-out finishes, so the veil fades WITH the wallpaper.
 		  if (selection.url) {
+		    const scrim = document.getElementById(SCRIM_ID);
 		    if (!scrim) {
 		      const s = document.createElement("div");
 		      s.id = SCRIM_ID;
@@ -454,9 +709,6 @@ window.__ModuleLoader__.load({
 		      document.body.appendChild(s);
 		    }
 		    document.body.setAttribute(ACTIVE_ATTR, "on");
-		  } else {
-		    if (scrim) scrim.remove();
-		    document.body.removeAttribute(ACTIVE_ATTR);
 		  }
 		}
 
@@ -472,6 +724,10 @@ window.__ModuleLoader__.load({
 		  s.setProperty("--webg-wallpaper-blur", selection.wallpaperBlur + "px");
 		  // Scaling compensates the transparent fringe CSS blur reveals at edges.
 		  s.setProperty("--webg-wallpaper-scale", (1 + selection.wallpaperBlur * 0.006).toFixed(4));
+		  // Canvas fit: object-fit/position for video and still wallpapers (iframes
+		  // ignore object-fit — web wallpapers always fill their layer).
+		  s.setProperty("--webg-fit", selection.fit);
+		  s.setProperty("--webg-position", selection.position);
 
 		  // Write the scrim colour directly too, then force a synchronous layout, so
 		  // slider feedback lands on this frame even on stalled compositors.
@@ -491,6 +747,8 @@ window.__ModuleLoader__.load({
 		  s.removeProperty("--webg-glass-brightness");
 		  s.removeProperty("--webg-wallpaper-blur");
 		  s.removeProperty("--webg-wallpaper-scale");
+		  s.removeProperty("--webg-fit");
+		  s.removeProperty("--webg-position");
 		  const scrim = document.getElementById(SCRIM_ID);
 		  if (scrim) scrim.style.background = "";
 		}
@@ -512,30 +770,50 @@ window.__ModuleLoader__.load({
 		  );
 		}
 
-		function ThumbCard(w, selected, onClick) {
+		function typeBadge(w, t) {
+		  if (w.type === "video") return t.badgeVideo;
+		  if (w.type === "web") return t.badgeWeb;
+		  return t.badgeStill;
+		}
+
+		function matchesQuery(w, q) {
+		  if (!q) return true;
+		  const needle = q.toLowerCase();
+		  return (w.title || "").toLowerCase().includes(needle) || (w.id || "").toLowerCase().includes(needle);
+		}
+
+		function ThumbCard(w, selected, onClick, t) {
 		  return React.createElement("button", {
 		    key: w.id,
 		    className: "webg-card" + (selected ? " webg-card--selected" : ""),
 		    type: "button",
 		    onClick: onClick,
-		    title: w.title,
+		    title: w.title + "(" + typeBadge(w, t) + ")",
 		  },
 		  w.preview
 		    ? React.createElement("img", {
-		        src: w.preview, alt: w.title, loading: "lazy",
+		        src: w.preview, alt: w.title, loading: "lazy", decoding: "async",
 		        onError: (e) => { e.target.style.display = "none"; },
 		      })
-		    : React.createElement("span", { className: "webg-card-placeholder" }, "无预览"),
-		  React.createElement("span", { className: "webg-card-type" }, w.type === "video" ? "视频" : "网页"),
+		    : React.createElement("span", { className: "webg-card-placeholder" }, t.noPreview),
+		  React.createElement("span", { className: "webg-card-type" }, typeBadge(w, t)),
 		  React.createElement("span", { className: "webg-card-title" }, w.title),
 		  );
 		}
 
 		function WallpaperPicker() {
 		  const sel = useStore();
+		  const [query, setQuery] = React.useState("");
+		  const [editorQuery, setEditorQuery] = React.useState("");
+		  const t = S();
 		  const onTogglePlay = () => { selection.playing = !selection.playing; emit(); };
 		  const onClear = () => applySelection("");
 		  const onRefresh = () => loadInventory(true);
+		  const onLangChange = (e) => {
+		    selection.lang = e.target.value;
+		    persistSelection();
+		    emit();
+		  };
 		  const onGroupChange = (e) => {
 		    selection.rotationGroupId = e.target.value;
 		    if (selection.rotationEnabled) {
@@ -576,99 +854,155 @@ window.__ModuleLoader__.load({
 		    const group = activeRotationGroup();
 		    if (!group) return;
 		    if (typeof window !== "undefined" && typeof window.confirm === "function") {
-		      if (!window.confirm("删除轮播列表「" + group.name + "」?")) return;
+		      if (!window.confirm(t.confirmDelete(group.name))) return;
 		    }
 		    deleteGroup(group.id);
 		  };
+		  const onTogglePauseOnHidden = () => {
+		    selection.pauseOnHidden = !selection.pauseOnHidden;
+		    if (!selection.pauseOnHidden) setAutoPause("hidden", false);
+		    persistSelection();
+		    emit();
+		  };
+		  const onTogglePauseOnBattery = () => {
+		    selection.pauseOnBattery = !selection.pauseOnBattery;
+		    if (!selection.pauseOnBattery) setAutoPause("battery", false);
+		    persistSelection();
+		    emit();
+		  };
 
 		  const onScrim = (pct) => { selection.scrim = pct / 100; persistSelection(); applyEffects(); emit(); };
 		  const onBorder = (pct) => { selection.border = pct / 100; persistSelection(); applyEffects(); emit(); };
 		  const onBlur = (px) => { selection.blur = px; persistSelection(); applyEffects(); emit(); };
 		  const onWallpaperBlur = (px) => { selection.wallpaperBlur = px; persistSelection(); applyEffects(); emit(); };
+		  const onFit = (e) => {
+		    selection.fit = FIT_MODES.indexOf(e.target.value) >= 0 ? e.target.value : "cover";
+		    persistSelection();
+		    applyEffects();
+		    emit();
+		  };
+		  const onPosition = (e) => {
+		    selection.position = POSITIONS.indexOf(e.target.value) >= 0 ? e.target.value : "center";
+		    persistSelection();
+		    applyEffects();
+		    emit();
+		  };
 
 		  if (!sel.loaded) {
 		    return React.createElement("div", { className: "webg-picker" },
-		      React.createElement("span", { className: "webg-hint" }, "正在扫描 Wallpaper Engine…"));
+		      React.createElement("span", { className: "webg-hint" }, t.scanning));
 		  }
 		  if (sel.inventory.error) {
 		    return React.createElement("div", { className: "webg-picker" },
 		      React.createElement("div", { className: "webg-error" },
-		        "未能连接 Wallpaper Engine:" + sel.inventory.error),
+		        t.connError + sel.inventory.error),
 		      React.createElement("button", {
 		        className: "webg-btn", type: "button", onClick: onRefresh, disabled: sel.loading,
-		      }, sel.loading ? "刷新中…" : "重试"));
+		      }, sel.loading ? t.refreshing : t.retry));
 		  }
 
-		  const playableList = playableInventory();
+		  const usableList = selectableInventory();
+		  const q = query.trim();
+		  const filteredList = usableList.filter((w) => matchesQuery(w, q));
 		  const groups = sel.rotationGroups;
 		  const group = activeRotationGroup();
 		  const candidates = rotationCandidates();
-		  const playableCount = candidates.length;
+		  const usableCount = candidates.length;
 		  const editing = sel.editing;
+		  const autoPaused = sel.autoPauseReasons.size > 0;
 		  const INTERVALS = [1, 5, 10, 30, 60, 120];
 
 		  return React.createElement("div", { className: "webg-picker" },
+		    // ── Search + language ──
+		    React.createElement("div", { className: "webg-row" },
+		      React.createElement("input", {
+		        className: "webg-text webg-search", type: "search",
+		        placeholder: t.searchPlaceholder,
+		        value: query,
+		        onInput: (e) => setQuery(e.target.value),
+		      }),
+		      q && React.createElement("span", { className: "webg-hint" },
+		        t.matched(filteredList.length, usableList.length)),
+		      React.createElement("label", { className: "webg-lang" },
+		        React.createElement("span", { className: "webg-hint" }, t.language),
+		        React.createElement("select", {
+		          className: "webg-select webg-lang-select",
+		          value: sel.lang,
+		          onChange: onLangChange,
+		        },
+		        React.createElement("option", { value: "auto" }, t.langAuto),
+		        React.createElement("option", { value: "zh" }, "中文"),
+		        React.createElement("option", { value: "en" }, "English"),
+		        ),
+		      ),
+		    ),
+		    // ── Grid ──
 		    React.createElement("div", { className: "webg-grid" },
 		      React.createElement("button", {
 		        className: "webg-card" + (sel.id ? "" : " webg-card--selected"),
 		        type: "button",
 		        onClick: onClear,
-		        title: "关闭壁纸",
+		        title: t.closeTitle,
 		      },
-		      React.createElement("span", { className: "webg-card-close" }, "✕ 关闭"),
+		      React.createElement("span", { className: "webg-card-close" }, t.closeCard),
 		      ),
-		      playableList.length === 0
+		      usableList.length === 0
 		        ? React.createElement("span", { className: "webg-hint" },
-		            sel.inventory.total > 0
-		              ? "已发现 " + sel.inventory.total + " 张壁纸,但没有可嵌入的 Video/Web 类型"
-		              : "未发现壁纸 — 请先在 Wallpaper Engine 中订阅 Video/Web 类型")
-		        : playableList.map((w) => ThumbCard(w, w.id === sel.id, () => applySelection(w.id))),
+		            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))
+		          : filteredList.map((w) => ThumbCard(w, w.id === sel.id, () => applySelection(w.id), t)),
 		    ),
+		    // ── Actions ──
 		    React.createElement("div", { className: "webg-row" },
 		      React.createElement("button", {
 		        className: "webg-btn", type: "button",
 		        onClick: onTogglePlay, disabled: !sel.url || sel.type !== "video",
-		      }, sel.playing ? "暂停" : "播放"),
+		      }, sel.playing ? t.pause : t.play),
 		      React.createElement("button", {
 		        className: "webg-btn", type: "button",
 		        onClick: onClear, disabled: !sel.id,
-		      }, "关闭"),
+		      }, t.close),
 		      React.createElement("button", {
 		        className: "webg-btn", type: "button",
 		        onClick: onRefresh, disabled: sel.loading,
-		      }, sel.loading ? "刷新中…" : "刷新"),
+		      }, sel.loading ? t.refreshing : t.refresh),
 		    ),
 		    // ── Rotation groups ──
 		    React.createElement("div", { className: "webg-row webg-playlist-row" },
-		      React.createElement("span", { className: "webg-hint webg-label" }, "轮播列表"),
+		      React.createElement("span", { className: "webg-hint webg-label" }, t.rotationList),
 		      React.createElement("select", {
 		        className: "webg-select webg-playlist-select",
 		        value: sel.rotationGroupId,
 		        onChange: onGroupChange,
 		        disabled: groups.length === 0,
 		      },
-		      React.createElement("option", { value: "" }, groups.length ? "— 选择轮播列表 —" : "— 暂无轮播列表 —"),
+		      React.createElement("option", { value: "" }, groups.length ? t.selectList : t.noLists),
 		      ...groups.map((g) => React.createElement("option", {
 		        key: g.id, value: g.id,
-		      }, g.name + "(" + groupWallpapers(g).length + " 可播放 · " + g.interval + " 分钟)")),
+		      }, t.groupOption(g.name, groupWallpapers(g).length, g.interval))),
 		      ),
 		      React.createElement("button", {
 		        className: "webg-btn", type: "button", onClick: startCreateGroup,
-		      }, "新建"),
+		      }, t.newList),
 		      React.createElement("button", {
 		        className: "webg-btn", type: "button",
 		        onClick: () => startEditGroup(sel.rotationGroupId),
 		        disabled: !sel.rotationGroupId,
-		      }, "编辑"),
+		      }, t.editList),
 		      React.createElement("button", {
 		        className: "webg-btn", type: "button",
 		        onClick: onDeleteGroup,
 		        disabled: !sel.rotationGroupId,
-		      }, "删除"),
+		      }, t.deleteList),
 		    ),
 		    editing && React.createElement("div", { className: "webg-editor" },
 		      React.createElement("div", { className: "webg-row" },
-		        React.createElement("span", { className: "webg-hint webg-label" }, "名称"),
+		        React.createElement("span", { className: "webg-hint webg-label" }, t.name),
 		        React.createElement("input", {
 		          className: "webg-text", type: "text",
 		          value: editing.name,
@@ -676,54 +1010,68 @@ window.__ModuleLoader__.load({
 		        }),
 		      ),
 		      React.createElement("div", { className: "webg-row" },
-		        React.createElement("span", { className: "webg-hint webg-label" }, "间隔"),
+		        React.createElement("span", { className: "webg-hint webg-label" }, t.interval),
 		        React.createElement("select", {
 		          className: "webg-select",
 		          value: String(editing.interval),
 		          onChange: (e) => { editing.interval = clampNum(Number(e.target.value), 1, 1440, DEFAULTS.rotationInterval); emit(); },
 		        },
 		        ...INTERVALS.map((minutes) =>
-		          React.createElement("option", { key: minutes, value: String(minutes) }, minutes + " 分钟"),
+		          React.createElement("option", { key: minutes, value: String(minutes) }, t.minutes(minutes)),
 		        )),
-		        React.createElement("span", { className: "webg-hint webg-label" }, "顺序"),
+		        React.createElement("span", { className: "webg-hint webg-label" }, t.order),
 		        React.createElement("select", {
 		          className: "webg-select webg-playlist-select",
 		          value: editing.order,
 		          onChange: (e) => { editing.order = e.target.value; emit(); },
 		        },
-		        React.createElement("option", { value: "sequence" }, "顺序"),
-		        React.createElement("option", { value: "random" }, "随机"),
+		        React.createElement("option", { value: "sequence" }, t.sequence),
+		        React.createElement("option", { value: "random" }, t.random),
 		        ),
 		      ),
+		      React.createElement("input", {
+		        className: "webg-text", type: "search",
+		        placeholder: t.filterPlaceholder,
+		        value: editorQuery,
+		        onInput: (e) => setEditorQuery(e.target.value),
+		      }),
 		      React.createElement("div", { className: "webg-editor-grid" },
-		        playableInventory().length === 0
-		          ? React.createElement("span", { className: "webg-hint" }, "没有可播放的 Video/Web 壁纸")
-		          : playableInventory().map((w) => {
-		              const checked = editing.wallpaperIds.indexOf(w.id) >= 0;
-		              return React.createElement("button", {
-		                key: w.id,
-		                className: "webg-editor-card" + (checked ? " webg-editor-card--checked" : ""),
-		                type: "button",
-		                title: w.title,
-		                onClick: () => {
-		                  const i = editing.wallpaperIds.indexOf(w.id);
-		                  if (i >= 0) editing.wallpaperIds.splice(i, 1);
-		                  else editing.wallpaperIds.push(w.id);
-		                  emit();
-		                },
+		        (() => {
+		          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);
+		          }
+		          if (pool.length === 0) {
+		            return React.createElement("span", { className: "webg-hint" }, t.noMatch(eq));
+		          }
+		          return pool.map((w) => {
+		            const checked = editing.wallpaperIds.indexOf(w.id) >= 0;
+		            return React.createElement("button", {
+		              key: w.id,
+		              className: "webg-editor-card" + (checked ? " webg-editor-card--checked" : ""),
+		              type: "button",
+		              title: w.title + "(" + typeBadge(w, t) + ")",
+		              onClick: () => {
+		                const i = editing.wallpaperIds.indexOf(w.id);
+		                if (i >= 0) editing.wallpaperIds.splice(i, 1);
+		                else editing.wallpaperIds.push(w.id);
+		                emit();
 		              },
-		              w.preview
-		                ? React.createElement("img", {
-		                    src: w.preview, alt: w.title, loading: "lazy",
-		                    onError: (e) => { e.target.style.display = "none"; },
-		                  })
-		                : React.createElement("span", { className: "webg-card-placeholder" }, "无预览"),
-		              checked && React.createElement("span", { className: "webg-editor-check" }, "✓"),
-		              );
-		            }),
+		            },
+		            w.preview
+		              ? React.createElement("img", {
+		                  src: w.preview, alt: w.title, loading: "lazy", decoding: "async",
+		                  onError: (e) => { e.target.style.display = "none"; },
+		                })
+		              : React.createElement("span", { className: "webg-card-placeholder" }, t.noPreview),
+		            checked && React.createElement("span", { className: "webg-editor-check" }, "✓"),
+		            );
+		          });
+		        })(),
 		      ),
 		      React.createElement("div", { className: "webg-row" },
-		        React.createElement("span", { className: "webg-hint" }, "已选 " + editing.wallpaperIds.length + " 个"),
+		        React.createElement("span", { className: "webg-hint" }, t.selectedCount(editing.wallpaperIds.length)),
 		        sel.inventory.playlists.length > 0 && React.createElement("select", {
 		          className: "webg-select webg-playlist-select",
 		          value: "",
@@ -732,58 +1080,108 @@ window.__ModuleLoader__.load({
 		            if (p) importPlaylistIntoDraft(p);
 		          },
 		        },
-		        React.createElement("option", { value: "" }, "从 WE 播放列表导入…"),
+		        React.createElement("option", { value: "" }, t.importPlaylist),
 		        ...sel.inventory.playlists.map((p) => React.createElement("option", {
 		          key: p.id, value: p.id,
-		        }, p.name + "(" + (p.portableCount || 0) + " 可播放)")),
+		        }, t.playlistOption(p.name, p.portableCount || 0))),
 		        ),
 		      ),
 		      React.createElement("div", { className: "webg-row" },
 		        React.createElement("button", {
 		          className: "webg-btn webg-btn--primary", type: "button",
 		          onClick: saveEditingGroup,
-		        }, "保存"),
+		        }, t.save),
 		        React.createElement("button", {
 		          className: "webg-btn", type: "button",
 		          onClick: cancelEditGroup,
-		        }, "取消"),
+		        }, t.cancel),
 		      ),
 		    ),
 		    React.createElement("div", { className: "webg-row webg-rotation-row" },
-		      React.createElement("label", { className: "webg-rotation-toggle" },
+		      React.createElement("label", { className: "webg-toggle" },
 		        React.createElement("input", {
 		          type: "checkbox",
 		          checked: sel.rotationEnabled,
 		          onChange: onToggleRotation,
-		          disabled: !sel.rotationGroupId || playableCount < 2,
+		          disabled: !sel.rotationGroupId || usableCount < 2,
 		        }),
-		        "自动轮转",
+		        t.autoRotate,
 		      ),
 		      React.createElement("select", {
 		        className: "webg-select webg-rotation-interval",
 		        value: String(group ? group.interval : DEFAULTS.rotationInterval),
 		        onChange: onGroupInterval,
-		        disabled: !sel.rotationEnabled || !sel.rotationGroupId || playableCount < 2,
-		        title: "当前列表的切换间隔",
+		        disabled: !sel.rotationEnabled || !sel.rotationGroupId || usableCount < 2,
+		        title: t.intervalTitle,
 		      },
 		      ...INTERVALS.map((minutes) =>
-		        React.createElement("option", { key: minutes, value: String(minutes) }, minutes + " 分钟"),
+		        React.createElement("option", { key: minutes, value: String(minutes) }, t.minutes(minutes)),
 		      )),
-		      !sel.rotationGroupId && React.createElement("span", { className: "webg-hint" }, "请先选择或新建一个轮播列表"),
-		      sel.rotationGroupId && playableCount < 2 && React.createElement("span", { className: "webg-hint" }, "当前列表至少需要 2 个可播放壁纸"),
+		      !sel.rotationGroupId && React.createElement("span", { className: "webg-hint" }, t.needList),
+		      sel.rotationGroupId && usableCount < 2 && React.createElement("span", { className: "webg-hint" }, t.needTwo),
 		    ),
+		    // ── Effects ──
 		    sel.id && React.createElement(React.Fragment, null,
-		      SliderRow("壁纸模糊", 0, 60, 1, sel.wallpaperBlur, onWallpaperBlur, sel.wallpaperBlur + "px"),
-		      SliderRow("暗化", 0, 90, 5, Math.round(sel.scrim * 100), onScrim, Math.round(sel.scrim * 100) + "%"),
-		      SliderRow("边框", 0, 90, 5, Math.round(sel.border * 100), onBorder, Math.round(sel.border * 100) + "%"),
-		      SliderRow("玻璃", 0, 40, 1, sel.blur, onBlur, sel.blur + "px"),
+		      // Canvas fit only matters for video/still wallpapers — an iframe
+		      // ignores object-fit and always fills its layer.
+		      sel.type !== "web" && React.createElement("div", { className: "webg-row webg-fit-row" },
+		        React.createElement("span", { className: "webg-hint webg-label" }, t.fit),
+		        React.createElement("select", {
+		          className: "webg-select webg-fit-select",
+		          value: sel.fit,
+		          onChange: onFit,
+		        },
+		        ...[t.fitCover, t.fitContain, t.fitFill, t.fitNone].map((label, i) =>
+		          React.createElement("option", { key: FIT_MODES[i], value: FIT_MODES[i] }, label),
+		        )),
+		        React.createElement("span", { className: "webg-hint webg-label" }, t.position),
+		        React.createElement("select", {
+		          className: "webg-select webg-position-select",
+		          value: sel.position,
+		          onChange: onPosition,
+		        },
+		        ...[t.posCenter, t.posTop, t.posBottom, t.posLeft, t.posRight].map((label, i) =>
+		          React.createElement("option", { key: POSITIONS[i], value: POSITIONS[i] }, label),
+		        )),
+		      ),
+		      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.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"),
 		    ),
+		    // ── Resource monitor ──
+		    sel.id && React.createElement("div", { className: "webg-row webg-monitor-row" },
+		      React.createElement("label", { className: "webg-toggle" },
+		        React.createElement("input", {
+		          type: "checkbox", checked: sel.pauseOnHidden, onChange: onTogglePauseOnHidden,
+		        }),
+		        t.pauseOnHidden,
+		      ),
+		      React.createElement("label", { className: "webg-toggle" },
+		        React.createElement("input", {
+		          type: "checkbox", checked: sel.pauseOnBattery, onChange: onTogglePauseOnBattery,
+		        }),
+		        t.pauseOnBattery,
+		      ),
+		      sel.fps !== null && React.createElement("span", {
+		        className: "webg-hint webg-fps" + (sel.fps < LOW_FPS ? " webg-fps--low" : ""),
+		        title: t.fpsTitle,
+		      }, sel.fps + " fps"),
+		    ),
+		    sel.id && sel.fps !== null && sel.fps < LOW_FPS && sel.type === "video" &&
+		      React.createElement("div", { className: "webg-row" },
+		        React.createElement("span", { className: "webg-hint" }, t.lowFpsHint),
+		      ),
+		    // ── Status ──
 		    React.createElement("div", { className: "webg-row" },
 		      React.createElement("span", { className: "webg-hint" },
 		        (group
-		          ? "列表「" + group.name + "」:" + group.wallpaperIds.length + " 项 · " + playableCount + " 可播放 · 每 " + group.interval + " 分钟 · " + (group.order === "random" ? "随机" : "顺序")
-		          : playableList.length + " 个可播放壁纸") +
-		        (sel.rotationEnabled ? " · 自动轮转中" : "")),
+		          ? t.statusGroup(group.name, group.wallpaperIds.length, usableCount, group.interval,
+		              group.order === "random" ? t.random : t.sequence)
+		          : t.statusUsable(usableList.length)) +
+		        (sel.rotationEnabled ? " · " + t.autoRotating : "") +
+		        (autoPaused ? " · " + t.autoPaused : "") +
+		        (sel.inventory.installDir ? " · " + sel.inventory.installDir : "")),
 		    ),
 		  );
 		}
@@ -801,7 +1199,9 @@ window.__ModuleLoader__.load({
 		  .webg-layer--enter { opacity: 0; }
 		  .webg-layer--leave { opacity: 0; }
 		  .webg-layer .webg-media {
-		    width: 100%; height: 100%; object-fit: cover; display: block;
+		    width: 100%; height: 100%; object-fit: var(--webg-fit, cover);
+		    object-position: var(--webg-position, center);
+		    display: block;
 		    background: transparent; border: 0;
 		    filter: blur(var(--webg-wallpaper-blur, 0px));
 		    transform: scale(var(--webg-wallpaper-scale, 1));
@@ -813,6 +1213,7 @@ window.__ModuleLoader__.load({
 		    position: fixed; inset: 0; z-index: -1;
 		    pointer-events: none;
 		    background: var(--webg-scrim-color, rgba(0, 0, 0, 0.25));
+		    transition: background 120ms linear;
 		  }
 
 		  /* While active: transparent frame + sidebar, higher border contrast. */
@@ -861,7 +1262,9 @@ window.__ModuleLoader__.load({
 		  }
 
 		  /* ── Picker chrome (token-driven, theme-aware) ── */
-		  .webg-picker { display: flex; flex-direction: column; gap: 10px; }
+		  /* padding-top lifts the first row off the settings-section divider so the
+		     search/language row breathes; gap keeps every row evenly spaced. */
+		  .webg-picker { display: flex; flex-direction: column; gap: 12px; padding-top: 10px; }
 		  .webg-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
 		  .webg-hint { font-size: 0.8em; opacity: 0.7; color: var(--dsw-alias-label-tertiary, inherit); }
 		  .webg-error {
@@ -904,13 +1307,23 @@ window.__ModuleLoader__.load({
 		    font-size: 0.85em;
 		  }
 		  .webg-text { flex: 1; min-width: 0; }
+		  .webg-search { max-width: 320px; }
+		  .webg-lang { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
 		  .webg-playlist-select { flex: 1; min-width: 0; }
 		  .webg-rotation-interval { margin-left: auto; }
-		  .webg-rotation-toggle { display: inline-flex; align-items: center; gap: 6px; accent-color: var(--dsw-alias-brand-primary, #3964fe); }
+		  .webg-toggle {
+		    display: inline-flex; align-items: center; gap: 6px;
+		    accent-color: var(--dsw-alias-brand-primary, #3964fe);
+		    font-size: 0.85em; cursor: pointer;
+		  }
 
 		  .webg-slider { flex: 1; accent-color: var(--dsw-alias-brand-primary, #3964fe); }
 		  .webg-slider-row { display: flex; align-items: center; gap: 8px; }
 
+		  .webg-monitor-row { gap: 14px; }
+		  .webg-fps { font-variant-numeric: tabular-nums; }
+		  .webg-fps--low { color: var(--dsw-alias-state-warn-primary, #b93); opacity: 1; }
+
 		  /* Wallpaper thumbnail grid. */
 		  .webg-grid {
 		    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
@@ -994,8 +1407,26 @@ window.__ModuleLoader__.load({
 		const inject = ["slots"];
 
 		function apply(ctx) {
-		  // 1. Styles: owned by the fiber — injected on apply, REMOVED on dispose
-		  //    (a module-level injection would leak styling past plugin stop).
+		  // 0. Language: follow the shell's locale service when present, and react
+		  //    to its change events. Everything is optional — without the service
+		  //    the browser language decides, and the manual override always wins.
+		  const localeSvc = typeof ctx.get === "function" ? ctx.get("locale") : undefined;
+		  if (localeSvc && typeof localeSvc.getLocale === "function") {
+		    try {
+		      const snap = localeSvc.getLocale();
+		      if (snap && snap.active) shellLang = snap.active === "en" ? "en" : "zh";
+		    } catch { /* keep browser fallback */ }
+		  }
+		  if (typeof ctx.on === "function") {
+		    try {
+		      ctx.on("locale/change", (snap) => {
+		        const next = snap && snap.active === "en" ? "en" : "zh";
+		        if (next !== shellLang) { shellLang = next; emit(); }
+		      });
+		    } catch { /* event bus unavailable → static language */ }
+		  }
+
+		  // 1. Styles: owned by the fiber — injected on apply, REMOVED on dispose.
 		  if (ctx.effect && typeof document !== "undefined") {
 		    ctx.effect(() => {
 		      let tag = document.querySelector("style[data-plugin-css=" + JSON.stringify(STYLE_TAG_ID) + "]");
@@ -1032,11 +1463,83 @@ window.__ModuleLoader__.load({
 		    });
 		  }
 
-		  // 3. Settings row (this slot is NOT the overlay; safe to register into).
+		  // 3. Resource monitor: auto-pause on hidden tab / low battery, FPS meter.
+		  if (ctx.effect && typeof document !== "undefined" &&
+		      typeof document.addEventListener === "function") {
+		    ctx.effect(() => {
+		      const onVisibility = () => {
+		        if (!selection.pauseOnHidden) return;
+		        setAutoPause("hidden", document.visibilityState === "hidden");
+		      };
+		      document.addEventListener("visibilitychange", onVisibility);
+		      onVisibility();
+		      return () => {
+		        document.removeEventListener("visibilitychange", onVisibility);
+		        setAutoPause("hidden", false);
+		      };
+		    });
+		  }
+		  if (ctx.effect && typeof navigator !== "undefined" &&
+		      typeof navigator.getBattery === "function") {
+		    ctx.effect(() => {
+		      let battery = null;
+		      let cancelled = false;
+		      const update = () => {
+		        if (!battery || !selection.pauseOnBattery) return;
+		        setAutoPause("battery", !battery.charging && battery.level <= BATTERY_SAVER_LEVEL);
+		      };
+		      navigator.getBattery().then((b) => {
+		        if (cancelled) return;
+		        battery = b;
+		        b.addEventListener("chargingchange", update);
+		        b.addEventListener("levelchange", update);
+		        update();
+		      }).catch(() => {});
+		      return () => {
+		        cancelled = true;
+		        if (battery) {
+		          battery.removeEventListener("chargingchange", update);
+		          battery.removeEventListener("levelchange", update);
+		        }
+		        setAutoPause("battery", false);
+		      };
+		    });
+		  }
+		  if (ctx.effect && typeof window !== "undefined" &&
+		      typeof window.requestAnimationFrame === "function") {
+		    ctx.effect(() => {
+		      // FPS sampler: counts rAF callbacks once per second. rAF stops by
+		      // itself in hidden tabs, so the meter idles exactly when the page does.
+		      let running = true;
+		      let rafId = 0;
+		      let frames = 0;
+		      let window0 = 0;
+		      const loop = (t) => {
+		        if (!running) return;
+		        frames++;
+		        if (window0 === 0) window0 = t;
+		        else if (t - window0 >= 1000) {
+		          selection.fps = Math.round((frames * 1000) / (t - window0));
+		          frames = 0;
+		          window0 = t;
+		          emit();
+		        }
+		        rafId = window.requestAnimationFrame(loop);
+		      };
+		      rafId = window.requestAnimationFrame(loop);
+		      return () => {
+		        running = false;
+		        if (typeof window.cancelAnimationFrame === "function") window.cancelAnimationFrame(rafId);
+		        selection.fps = null;
+		      };
+		    });
+		  }
+
+		  // 4. Settings row (this slot is NOT the overlay; safe to register into).
 		  if (ctx.slots) {
 		    ctx.slots.inject("settings.general.item", () =>
 		      ctx.slots.register(
-		        { name: "settings.general.item", id: "we-background", order: 500, label: "壁纸背景 (Wallpaper Engine)" },
+		        { name: "settings.general.item", id: "we-background", order: 500, label: S().settingsLabel },
 		        () => React.createElement(WallpaperPicker),
 		      ),
 		    );