wallpaper-engine-dsh 1.0.2 → 1.0.4

package/lib/client.js

@@ -14,6 +14,8 @@ window.__ModuleLoader__.load({
 		const SCRIM_ID = "wallpaper-engine-dsh-scrim";
 		const STYLE_TAG_ID = "wallpaper-engine-dsh/styles";
 		const CROSSFADE_MS = 520;
+		/** Crossfade settle time before a leaving layer is detached. */
+		const LEAVE_MS = CROSSFADE_MS + 120;
 		/** 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. */
@@ -271,9 +273,9 @@ window.__ModuleLoader__.load({
 		      autoScrim: o.autoScrim !== false,
 		      lang: o.lang === "zh" || o.lang === "en" ? o.lang : "auto",
 		      fit: FIT_MODES.indexOf(o.fit) >= 0 ? o.fit : DEFAULTS.fit,
-		      zoom: Math.max(1, clampNum(o.zoom, 0.25, 4, DEFAULTS.zoom)),
-		      // Pan may have been persisted with a larger headroom than the zoom
-		      // allows (older builds let zoom go below 1) — clampCrop re-seats it.
+		      // Older builds could persist zoom < 1 / unclamped pans — clampCrop()
+		      // at store creation re-seats both into the gap-free envelope.
+		      zoom: clampNum(o.zoom, 0.25, 4, DEFAULTS.zoom),
 		      offsetX: clampNum(o.offsetX, -200, 200, DEFAULTS.offsetX),
 		      offsetY: clampNum(o.offsetY, -200, 200, DEFAULTS.offsetY),
 		    };
@@ -339,21 +341,19 @@ window.__ModuleLoader__.load({
 		}
 
 		// ── Wallpaper predicates ─────────────────────────────────────────────────────
-		// playable: real media (video/web) renders live.
 		// 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.
+		// rather than offered as degraded preview stills. A wallpaper is selectable
+		// exactly when it is playable (real media renders live); preview-only
+		// entries exist in the inventory for the decode-fallback lookup but are
+		// never offered in the grid.
 		function isPlayable(w) {
 		  return Boolean(w && w.playable && (w.type === "video" || w.type === "web"));
 		}
 
-		function isSelectable(w) {
-		  return isPlayable(w);
-		}
-
 		function selectableInventory() {
-		  return selection.inventory.wallpapers.filter(isSelectable);
+		  return selection.inventory.wallpapers.filter(isPlayable);
 		}
 
 		// ── Inventory ────────────────────────────────────────────────────────────────
@@ -403,25 +403,20 @@ window.__ModuleLoader__.load({
 		    selection.rotationGroupId = "";
 		    persistSelection();
 		  }
-		  if (selection.rotationEnabled) {
-		    if (!selection.rotationGroupId) {
-		      const usable = firstUsableGroup();
-		      if (usable) selection.rotationGroupId = usable.id;
-		      else selection.rotationEnabled = false;
-		    } else if (rotationCandidates().length < 2) {
-		      const usable = firstUsableGroup();
-		      if (usable && usable.id !== selection.rotationGroupId) selection.rotationGroupId = usable.id;
-		      else if (!usable) selection.rotationEnabled = false;
-		    }
+		  // Rotation bookkeeping. A chosen list is never migrated away from — a
+		  // list with fewer than 2 usable wallpapers simply keeps rotation
+		  // disarmed (the timer needs a pair to alternate), and a hand-picked
+		  // wallpaper outside the active list keeps playing until the next
+		  // rotation tick brings the list back around.
+		  if (selection.rotationEnabled && !selection.rotationGroupId) {
+		    const usable = firstUsableGroup();
+		    if (usable) selection.rotationGroupId = usable.id;
+		    else selection.rotationEnabled = false;
 		    persistSelection();
 		  }
 
 		  // 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();
-		  }
-		  if (selection.rotationEnabled && selection.id && !rotationCandidates().some((w) => w.id === selection.id)) {
+		  if (selection.id && !selection.inventory.wallpapers.some((w) => w.id === selection.id && isPlayable(w))) {
 		    selection.id = "";
 		    persistSelection();
 		  }
@@ -441,7 +436,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(isSelectable);
+		  return group.wallpaperIds.map((id) => byId.get(id)).filter(isPlayable);
 		}
 
 		function rotationCandidates() {
@@ -457,7 +452,7 @@ window.__ModuleLoader__.load({
 		  if (!source) return false;
 		  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)))
+		    ? source.wallpaperIds.filter((id) => isPlayable(byId.get(id)))
 		    : [];
 		  if (ids.length < 2) return false;
 		  selection.rotationGroups.push({
@@ -672,7 +667,7 @@ window.__ModuleLoader__.load({
 		    media.setAttribute("frameborder", "0");
 		    media.setAttribute("scrolling", "no");
 		    media.setAttribute("title", S().iframeTitle);
-		    media.className = "webg-media webg-iframe";
+		    media.className = "webg-media";
 		  } else {
 		    // Static fallback: a playable wallpaper demoted after repeated media
 		    // failures — its preview still beats a black screen.
@@ -689,7 +684,10 @@ window.__ModuleLoader__.load({
 		}
 
 		function attachStillSampling(media, sel) {
-		  const type = (sel && sel.type) || (media.tagName === "IMG" ? "image" : null);
+		  const type = sel && sel.type;
+		  // Web wallpapers cannot be sampled — the sandboxed iframe's origin is
+		  // opaque, so its pixels are unreadable. Only video/img frames feed the
+		  // smart veil.
 		  if (type !== "video" && type !== "image") return;
 		  media.addEventListener(type === "video" ? "loadeddata" : "load", () => {
 		    sampleWallpaperLuminance();
@@ -717,9 +715,10 @@ window.__ModuleLoader__.load({
 		      // 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.
+		    } else {
+		      // Unrenderable here with no preview to fall back on (or the entry has
+		      // vanished from the inventory entirely): clear the selection rather
+		      // than leave a dead element on the layer.
 		      applySelection("");
 		    }
 		  });
@@ -792,11 +791,10 @@ window.__ModuleLoader__.load({
 		  };
 		  const onPointerMove = (e) => {
 		    if (!drag) return;
-		    // 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;
+		    // translate % refers to the media box, which is the viewport exactly —
+		    // divide the pixel delta by it so the content tracks the cursor 1:1.
+		    const w = overlay.clientWidth || 1;
+		    const h = overlay.clientHeight || 1;
 		    selection.offsetX += ((e.clientX - drag.x) / w) * 100;
 		    selection.offsetY += ((e.clientY - drag.y) / h) * 100;
 		    clampCrop(); // gap-free guarantee: pan never outruns the zoom headroom
@@ -874,6 +872,30 @@ window.__ModuleLoader__.load({
 		  return token;
 		}
 
+		/**
+		 * Swap re-minted URLs into the LIVE media element instead of remounting.
+		 * An explicit refresh re-mints every token, so the element's old URL is
+		 * already dead — the next seek or buffer-miss would 404 on it and trigger
+		 * a full recovery restart. Hot-swapping keeps the element identity (and
+		 * for video, the playback position) intact across the token change.
+		 */
+		function refreshLiveMediaUrls(layer) {
+		  const video = layer.querySelector("video");
+		  if (video && video.getAttribute("src") !== selection.url) {
+		    const at = video.currentTime;
+		    video.src = selection.url;
+		    if (at > 0) {
+		      video.addEventListener("loadedmetadata", () => {
+		        try { video.currentTime = at; } catch { /* not seekable yet */ }
+		      }, { once: true });
+		    }
+		  }
+		  const img = layer.querySelector("img");
+		  if (img && img.getAttribute("src") !== selection.url) img.src = selection.url;
+		  const frame = layer.querySelector("iframe");
+		  if (frame && frame.getAttribute("src") !== selection.url) frame.src = selection.url;
+		}
+
 		function syncLayers() {
 		  const existing = document.getElementById(LAYER_ID);
 
@@ -885,7 +907,9 @@ window.__ModuleLoader__.load({
 		    const gotKey = existing && existing.dataset.webgKey;
 
 		    if (existing && gotKey === wantKey && !forceRemount) {
-		      // Same wallpaper — only play/pause may have changed.
+		      // Same wallpaper — adopt any re-minted URL, then only play/pause may
+		      // have changed.
+		      refreshLiveMediaUrls(existing);
 		    } else {
 		      forceRemount = false;
 		      // Crossfade: the new layer fades in over the old one; the old layer
@@ -902,7 +926,7 @@ window.__ModuleLoader__.load({
 		      if (existing) {
 		        existing.classList.add("webg-layer--leave");
 		        const stale = existing;
-		        schedule(() => stale.remove(), CROSSFADE_MS + 120);
+		        schedule(() => stale.remove(), LEAVE_MS);
 		      }
 		    }
 		    const node = document.getElementById(LAYER_ID);
@@ -924,7 +948,7 @@ window.__ModuleLoader__.load({
 		        if (s) s.remove();
 		        document.body.removeAttribute(ACTIVE_ATTR);
 		      }
-		    }, CROSSFADE_MS + 120);
+		    }, LEAVE_MS);
 		  }
 
 		  // Scrim: present while a wallpaper is active. On clear it outlives the
@@ -946,6 +970,11 @@ window.__ModuleLoader__.load({
 		// sample; iframes of web wallpapers can never be sampled — opaque origin).
 		let sampledLuminance = null;
 		let sampleCanvas = null;
+		// Snapshot of every input applyEffects reads, from its last full write. The
+		// store emits once per second for the FPS readout — without this guard every
+		// tick would rewrite all CSS variables AND force a synchronous layout for
+		// nothing. clearEffects() resets it so the next apply always writes.
+		let lastEffectKey = null;
 
 		/** Average Rec.601 luminance (0..1) of the current video/img, or null. */
 		function sampleWallpaperLuminance() {
@@ -973,11 +1002,18 @@ window.__ModuleLoader__.load({
 		}
 
 		function applyEffects() {
-		  const s = document.body.style;
 		  // The veil OPPOSES the text colour: dark theme (light text) darkens bright
 		  // wallpapers, light theme (dark text) brightens dark ones — either way the
 		  // text side wins. This is what makes ANY wallpaper survivable.
 		  const dark = Boolean(document.body.hasAttribute && document.body.hasAttribute("data-ds-dark-theme"));
+		  const key = [
+		    dark, selection.scrim, selection.border, selection.blur, selection.wallpaperBlur,
+		    selection.autoScrim, sampledLuminance, selection.fit, selection.zoom,
+		    selection.offsetX, selection.offsetY,
+		  ].join("\u0000");
+		  if (key === lastEffectKey) return; // nothing it reads changed → no writes, no reflow
+		  lastEffectKey = key;
+		  const s = document.body.style;
 		  let alpha = selection.scrim;
 		  if (selection.autoScrim && sampledLuminance !== null) {
 		    // Distance of the wallpaper's brightness from the "comfortable middle"
@@ -994,7 +1030,6 @@ window.__ModuleLoader__.load({
 		  // The glass "colour melt" scales with blur radius: 0 blur → no melt.
 		  s.setProperty("--webg-saturate", String(1.15 + selection.blur * 0.028));
 		  s.setProperty("--webg-glass-brightness", "1.04");
-		  s.setProperty("--webg-wallpaper-blur", selection.wallpaperBlur + "px");
 		  // At 0 blur, keep the media OUT of the filter pipeline entirely: even
 		  // blur(0px) forces an extra raster/compositing pass, and the noise overlay
 		  // would still occupy a layer at opacity 0. filter:none + display:none keep
@@ -1025,13 +1060,13 @@ window.__ModuleLoader__.load({
 		}
 
 		function clearEffects() {
+		  lastEffectKey = null;
 		  const s = document.body.style;
 		  s.removeProperty("--webg-scrim-color");
 		  s.removeProperty("--webg-border-alpha");
 		  s.removeProperty("--webg-blur");
 		  s.removeProperty("--webg-saturate");
 		  s.removeProperty("--webg-glass-brightness");
-		  s.removeProperty("--webg-wallpaper-blur");
 		  s.removeProperty("--webg-media-filter");
 		  s.removeProperty("--webg-noise-display");
 		  s.removeProperty("--webg-noise-opacity");
@@ -1085,6 +1120,16 @@ window.__ModuleLoader__.load({
 		  return (w.title || "").toLowerCase().includes(needle) || (w.id || "").toLowerCase().includes(needle);
 		}
 
+		/** Preview <img>, or the "no preview" placeholder — shared by grid + editor. */
+		function PreviewMedia(w, t) {
+		  return 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);
+		}
+
 		function ThumbCard(w, selected, onClick, t) {
 		  return React.createElement("button", {
 		    key: w.id,
@@ -1093,426 +1138,484 @@ window.__ModuleLoader__.load({
 		    onClick: onClick,
 		    title: w.title + "(" + typeBadge(w, t) + ")",
 		  },
-		  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),
+		  PreviewMedia(w, t),
 		  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 = () => {
-		    // A manual refresh also retries wallpapers previously demoted to their
-		    // preview after decode failures.
-		    demotedToPreview.clear();
-		    mediaFailures.clear();
-		    lastRecoveryAt.clear();
-		    loadInventory(true);
-		  };
-		  const onLangChange = (e) => {
-		    selection.lang = e.target.value;
-		    persistSelection();
-		    emit();
-		  };
-		  const onGroupChange = (e) => {
-		    selection.rotationGroupId = e.target.value;
-		    if (selection.rotationEnabled) {
-		      const first = rotationCandidates()[0];
-		      if (first) applySelection(first.id);
-		      else applySelection("");
-		      return;
-		    }
-		    persistSelection();
-		    syncRotationTimer();
-		    emit();
-		  };
-		  const onToggleRotation = () => {
-		    selection.rotationEnabled = !selection.rotationEnabled;
-		    // The checkbox is disabled without a usable group, so a group id always
-		    // exists here when enabling.
-		    if (selection.rotationEnabled &&
-		        !rotationCandidates().some((w) => w.id === selection.id)) {
-		      const first = rotationCandidates()[0];
-		      if (first) { applySelection(first.id); return; }
-		    }
-		    persistSelection();
-		    syncRotationTimer();
-		    emit();
-		  };
-		  const onGroupInterval = (e) => {
-		    const group = activeRotationGroup();
-		    if (!group) return;
-		    group.interval = clampNum(Number(e.target.value), 1, 1440, DEFAULTS.rotationInterval);
-		    persistSelection();
-		    syncRotationTimer();
-		    emit();
-		  };
-		  const onDeleteGroup = () => {
-		    const group = activeRotationGroup();
-		    if (!group) return;
-		    if (typeof window !== "undefined" && typeof window.confirm === "function") {
-		      if (!window.confirm(t.confirmDelete(group.name))) return;
-		    }
-		    deleteGroup(group.id);
-		  };
-		  const onTogglePauseOnHidden = () => {
-		    selection.pauseOnHidden = !selection.pauseOnHidden;
-		    if (selection.pauseOnHidden) {
-		      // Re-enabling while already hidden must re-apply the reason — the
-		      // visibilitychange listener only fires on CHANGES.
-		      if (typeof document !== "undefined" && document.visibilityState === "hidden") {
-		        setAutoPause("hidden", true);
-		      }
-		    } else {
-		      setAutoPause("hidden", false);
-		    }
-		    persistSelection();
-		    emit();
-		  };
-		  const onTogglePauseOnBattery = () => {
-		    selection.pauseOnBattery = !selection.pauseOnBattery;
-		    if (selection.pauseOnBattery) applyBatteryPause(); // re-evaluate NOW
-		    else setAutoPause("battery", false);
-		    persistSelection();
-		    emit();
-		  };
-		  const onToggleAutoScrim = () => {
-		    selection.autoScrim = !selection.autoScrim;
-		    persistSelection();
-		    applyEffects();
-		    emit();
-		  };
+		/** Preset switch intervals offered by the rotation UI (minutes). */
+		const ROTATION_INTERVALS = [1, 5, 10, 30, 60, 120];
+
+		/**
+		 * <option> list for an interval select. 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.
+		 */
+		function intervalOptions(current, t) {
+		  return [...new Set([...ROTATION_INTERVALS, current])]
+		    .sort((x, y) => x - y)
+		    .map((minutes) => React.createElement("option", {
+		      key: minutes, value: String(minutes),
+		    }, t.minutes(minutes)));
+		}
 
-		  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();
-		  };
+		// ── Picker actions (module scope) ────────────────────────────────────────────
+		// Every control mutates the shared selection store and emits; none closes
+		// over React state, so they live outside the component — stable across
+		// re-renders (the picker re-renders once per second for the FPS readout)
+		// and testable without mounting anything.
 
-		  if (!sel.loaded) {
-		    return React.createElement("div", { className: "webg-picker" },
-		      React.createElement("span", { className: "webg-hint" }, t.scanning));
+		function onTogglePlay() { selection.playing = !selection.playing; emit(); }
+
+		function onClear() { applySelection(""); }
+
+		function onRefresh() {
+		  // A manual refresh also retries wallpapers previously demoted to their
+		  // preview after decode failures.
+		  demotedToPreview.clear();
+		  mediaFailures.clear();
+		  lastRecoveryAt.clear();
+		  loadInventory(true);
+		}
+
+		function onLangChange(e) {
+		  selection.lang = e.target.value;
+		  persistSelection();
+		  emit();
+		}
+
+		function onGroupChange(e) {
+		  selection.rotationGroupId = e.target.value;
+		  if (selection.rotationEnabled) {
+		    const first = rotationCandidates()[0];
+		    if (first) applySelection(first.id);
+		    else applySelection("");
+		    return;
 		  }
-		  if (sel.inventory.error) {
-		    return React.createElement("div", { className: "webg-picker" },
-		      React.createElement("div", { className: "webg-error" },
-		        t.connError + sel.inventory.error),
-		      React.createElement("button", {
-		        className: "webg-btn", type: "button", onClick: onRefresh, disabled: sel.loading,
-		      }, sel.loading ? t.refreshing : t.retry));
+		  persistSelection();
+		  syncRotationTimer();
+		  emit();
+		}
+
+		function onToggleRotation() {
+		  selection.rotationEnabled = !selection.rotationEnabled;
+		  // The checkbox is disabled without a usable group, so a group id always
+		  // exists here when enabling.
+		  if (selection.rotationEnabled &&
+		      !rotationCandidates().some((w) => w.id === selection.id)) {
+		    const first = rotationCandidates()[0];
+		    if (first) { applySelection(first.id); return; }
 		  }
+		  persistSelection();
+		  syncRotationTimer();
+		  emit();
+		}
 
-		  const usableList = selectableInventory();
-		  const q = query.trim();
-		  const filteredList = usableList.filter((w) => matchesQuery(w, q));
-		  const groups = sel.rotationGroups;
+		function onGroupInterval(e) {
 		  const group = activeRotationGroup();
-		  const candidates = rotationCandidates();
-		  const usableCount = candidates.length;
-		  const editing = sel.editing;
-		  const autoPaused = sel.autoPauseReasons.size > 0;
-		  const INTERVALS = [1, 5, 10, 30, 60, 120];
+		  if (!group) return;
+		  group.interval = clampNum(Number(e.target.value), 1, 1440, DEFAULTS.rotationInterval);
+		  persistSelection();
+		  syncRotationTimer();
+		  emit();
+		}
 
-		  return React.createElement("div", { className: "webg-picker" },
-		    // ── Search + language ──
+		function onDeleteGroup() {
+		  const group = activeRotationGroup();
+		  if (!group) return;
+		  if (typeof window !== "undefined" && typeof window.confirm === "function") {
+		    if (!window.confirm(S().confirmDelete(group.name))) return;
+		  }
+		  deleteGroup(group.id);
+		}
+
+		function onTogglePauseOnHidden() {
+		  selection.pauseOnHidden = !selection.pauseOnHidden;
+		  if (selection.pauseOnHidden) {
+		    // Re-enabling while already hidden must re-apply the reason — the
+		    // visibilitychange listener only fires on CHANGES.
+		    if (typeof document !== "undefined" && document.visibilityState === "hidden") {
+		      setAutoPause("hidden", true);
+		    }
+		  } else {
+		    setAutoPause("hidden", false);
+		  }
+		  persistSelection();
+		  emit();
+		}
+
+		function onTogglePauseOnBattery() {
+		  selection.pauseOnBattery = !selection.pauseOnBattery;
+		  if (selection.pauseOnBattery) applyBatteryPause(); // re-evaluate NOW
+		  else setAutoPause("battery", false);
+		  persistSelection();
+		  emit();
+		}
+
+		function onToggleAutoScrim() {
+		  selection.autoScrim = !selection.autoScrim;
+		  persistSelection();
+		  applyEffects();
+		  emit();
+		}
+
+		function onScrim(pct) { selection.scrim = pct / 100; persistSelection(); applyEffects(); emit(); }
+		function onBorder(pct) { selection.border = pct / 100; persistSelection(); applyEffects(); emit(); }
+		function onBlur(px) { selection.blur = px; persistSelection(); applyEffects(); emit(); }
+		function onWallpaperBlur(px) { selection.wallpaperBlur = px; persistSelection(); applyEffects(); emit(); }
+
+		function onFit(e) {
+		  selection.fit = FIT_MODES.indexOf(e.target.value) >= 0 ? e.target.value : "cover";
+		  persistSelection();
+		  applyEffects();
+		  emit();
+		}
+
+		// ── Picker sections (presentational; every input arrives as an argument) ────
+		// WallpaperPicker composes these in a fixed order. Each one owns exactly one
+		// visual row/block of the settings panel and produces the same DOM the old
+		// monolithic render did.
+
+		function SearchRow(t, sel, query, setQuery, matched, total) {
+		  return 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),
+		    }),
+		    query.trim() && React.createElement("span", { className: "webg-hint" },
+		      t.matched(matched, total)),
+		    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"),
+		      ),
+		    ),
+		  );
+		}
+
+		function WallpaperGrid(t, sel, usableList, filteredList, q) {
+		  return React.createElement("div", { className: "webg-grid" },
+		    React.createElement("button", {
+		      className: "webg-card" + (sel.id ? "" : " webg-card--selected"),
+		      type: "button",
+		      onClick: onClear,
+		      title: t.closeTitle,
+		    },
+		    React.createElement("span", { className: "webg-card-close" }, t.closeCard),
+		    ),
+		    usableList.length === 0
+		      ? React.createElement("span", { className: "webg-hint" },
+		          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)),
+		  );
+		}
+
+		function ActionRow(t, sel) {
+		  return React.createElement("div", { className: "webg-row" },
+		    React.createElement("button", {
+		      className: "webg-btn", type: "button",
+		      onClick: onTogglePlay, disabled: !sel.url || sel.type !== "video",
+		    }, 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 ? t.refreshing : t.refresh),
+		  );
+		}
+
+		function RotationListRow(t, sel, groups) {
+		  return React.createElement("div", { className: "webg-row webg-playlist-row" },
+		    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 ? t.selectList : t.noLists),
+		    ...groups.map((g) => React.createElement("option", {
+		      key: g.id, value: g.id,
+		    }, 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),
+		  );
+		}
+
+		/** One toggleable wallpaper chip inside the group editor. */
+		function EditorCard(w, editing, t) {
+		  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();
+		    },
+		  },
+		  PreviewMedia(w, t),
+		  checked && React.createElement("span", { className: "webg-editor-check" }, "✓"),
+		  );
+		}
+
+		function GroupEditorPanel(t, sel, usableList, editorQuery, setEditorQuery) {
+		  const editing = sel.editing;
+		  return React.createElement("div", { className: "webg-editor" },
 		    React.createElement("div", { className: "webg-row" },
+		      React.createElement("span", { className: "webg-hint webg-label" }, t.name),
 		      React.createElement("input", {
-		        className: "webg-text webg-search", type: "search",
-		        placeholder: t.searchPlaceholder,
-		        value: query,
-		        onInput: (e) => setQuery(e.target.value),
+		        className: "webg-text", type: "text",
+		        value: editing.name,
+		        onInput: (e) => { editing.name = e.target.value; emit(); },
 		      }),
-		      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: t.closeTitle,
+		    React.createElement("div", { className: "webg-row" },
+		      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(); },
+		      },
+		      ...intervalOptions(editing.interval, t)),
+		      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("span", { className: "webg-card-close" }, t.closeCard),
+		      React.createElement("option", { value: "sequence" }, t.sequence),
+		      React.createElement("option", { value: "random" }, t.random),
 		      ),
-		      usableList.length === 0
-		        ? React.createElement("span", { className: "webg-hint" },
-		            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 ? 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 ? t.refreshing : t.refresh),
+		    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" },
+		      (() => {
+		        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) => EditorCard(w, editing, t));
+		      })(),
 		    ),
-		    // ── Rotation groups ──
-		    React.createElement("div", { className: "webg-row webg-playlist-row" },
-		      React.createElement("span", { className: "webg-hint webg-label" }, t.rotationList),
-		      React.createElement("select", {
+		    React.createElement("div", { className: "webg-row" },
+		      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: sel.rotationGroupId,
-		        onChange: onGroupChange,
-		        disabled: groups.length === 0,
+		        value: "",
+		        onChange: (e) => {
+		          const p = sel.inventory.playlists.find((pl) => pl.id === e.target.value);
+		          if (p) importPlaylistIntoDraft(p);
+		        },
 		      },
-		      React.createElement("option", { value: "" }, groups.length ? t.selectList : t.noLists),
-		      ...groups.map((g) => React.createElement("option", {
-		        key: g.id, value: g.id,
-		      }, t.groupOption(g.name, groupWallpapers(g).length, g.interval))),
+		      React.createElement("option", { value: "" }, t.importPlaylist),
+		      ...sel.inventory.playlists.map((p) => React.createElement("option", {
+		        key: p.id, value: p.id,
+		      }, t.playlistOption(p.name, p.portableCount || 0))),
 		      ),
+		    ),
+		    React.createElement("div", { className: "webg-row" },
 		      React.createElement("button", {
-		        className: "webg-btn", type: "button", onClick: startCreateGroup,
-		      }, t.newList),
+		        className: "webg-btn webg-btn--primary", type: "button",
+		        onClick: saveEditingGroup,
+		      }, t.save),
 		      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),
+		        onClick: cancelEditGroup,
+		      }, t.cancel),
 		    ),
-		    editing && React.createElement("div", { className: "webg-editor" },
-		      React.createElement("div", { className: "webg-row" },
-		        React.createElement("span", { className: "webg-hint webg-label" }, t.name),
-		        React.createElement("input", {
-		          className: "webg-text", type: "text",
-		          value: editing.name,
-		          onInput: (e) => { editing.name = e.target.value; emit(); },
-		        }),
-		      ),
-		      React.createElement("div", { className: "webg-row" },
-		        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(); },
-		        },
-		        // 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),
-		        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" }, t.sequence),
-		        React.createElement("option", { value: "random" }, t.random),
-		        ),
-		      ),
+		  );
+		}
+
+		function RotationControlsRow(t, sel, group, usableCount) {
+		  return React.createElement("div", { className: "webg-row webg-rotation-row" },
+		    React.createElement("label", { className: "webg-toggle" },
 		      React.createElement("input", {
-		        className: "webg-text", type: "search",
-		        placeholder: t.filterPlaceholder,
-		        value: editorQuery,
-		        onInput: (e) => setEditorQuery(e.target.value),
+		        type: "checkbox",
+		        checked: sel.rotationEnabled,
+		        onChange: onToggleRotation,
+		        disabled: !sel.rotationGroupId || usableCount < 2,
 		      }),
-		      React.createElement("div", { className: "webg-editor-grid" },
-		        (() => {
-		          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", 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" }, t.selectedCount(editing.wallpaperIds.length)),
-		        sel.inventory.playlists.length > 0 && React.createElement("select", {
-		          className: "webg-select webg-playlist-select",
-		          value: "",
-		          onChange: (e) => {
-		            const p = sel.inventory.playlists.find((pl) => pl.id === e.target.value);
-		            if (p) importPlaylistIntoDraft(p);
-		          },
-		        },
-		        React.createElement("option", { value: "" }, t.importPlaylist),
-		        ...sel.inventory.playlists.map((p) => React.createElement("option", {
-		          key: p.id, value: p.id,
-		        }, 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),
-		      ),
+		      t.autoRotate,
 		    ),
-		    React.createElement("div", { className: "webg-row webg-rotation-row" },
-		      React.createElement("label", { className: "webg-toggle" },
-		        React.createElement("input", {
-		          type: "checkbox",
-		          checked: sel.rotationEnabled,
-		          onChange: onToggleRotation,
-		          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 || usableCount < 2,
-		        title: t.intervalTitle,
+		    React.createElement("select", {
+		      className: "webg-select webg-rotation-interval",
+		      value: String(group ? group.interval : DEFAULTS.rotationInterval),
+		      onChange: onGroupInterval,
+		      disabled: !sel.rotationEnabled || !sel.rotationGroupId || usableCount < 2,
+		      title: t.intervalTitle,
+		    },
+		    ...intervalOptions(group ? group.interval : DEFAULTS.rotationInterval, t)),
+		    !sel.rotationGroupId && React.createElement("span", { className: "webg-hint" }, t.needList),
+		    sel.rotationGroupId && usableCount < 2 && React.createElement("span", { className: "webg-hint" }, t.needTwo),
+		  );
+		}
+
+		function EffectsPanel(t, sel) {
+		  return React.createElement(React.Fragment, null,
+		    // object-fit only means something for video/still wallpapers — an
+		    // iframe ignores it and always fills its layer — so the base-mode
+		    // select is hidden for web. The manual crop (drag / wheel in the
+		    // adjust overlay) is a plain CSS transform and applies to EVERY kind,
+		    // so 调整画面 / 重置裁剪 stay available even for iframes.
+		    React.createElement("div", { className: "webg-row webg-fit-row" },
+		      sel.type !== "web" && React.createElement("span", { className: "webg-hint webg-label" }, t.fit),
+		      sel.type !== "web" && React.createElement("select", {
+		        className: "webg-select webg-fit-select",
+		        value: sel.fit,
+		        onChange: onFit,
 		      },
-		      ...[...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),
-		    ),
-		    // ── Effects ──
-		    sel.id && React.createElement(React.Fragment, null,
-		      // Canvas fit only matters for video/still wallpapers — an iframe
-		      // ignores object-fit and always fills its layer. Manual crop (drag /
-		      // wheel in the adjust overlay) replaced the old fixed anchor select.
-		      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),
-		        )),
+		      ...[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("button", {
+		        className: "webg-btn", type: "button", onClick: enterAdjust,
+		        disabled: sel.adjusting,
+		      }, t.adjust),
+		      (sel.zoom !== 1 || sel.offsetX !== 0 || sel.offsetY !== 0) &&
 		        React.createElement("button", {
-		          className: "webg-btn", type: "button", onClick: () => enterAdjust(),
-		          disabled: sel.adjusting,
-		        }, t.adjust),
-		        (sel.zoom !== 1 || sel.offsetX !== 0 || sel.offsetY !== 0) &&
-		          React.createElement("button", {
-		            className: "webg-btn", type: "button", onClick: resetCrop,
-		          }, t.resetCrop),
-		      ),
-		      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.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"),
-		      ),
+		          className: "webg-btn", type: "button", onClick: resetCrop,
+		        }, t.resetCrop),
 		    ),
-		    // ── 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,
-		      ),
-		      React.createElement("label", { className: "webg-toggle", title: t.autoScrimTitle },
-		        React.createElement("input", {
-		          type: "checkbox", checked: sel.autoScrim, onChange: onToggleAutoScrim,
-		        }),
-		        t.autoScrim,
-		      ),
-		      sel.fps !== null && React.createElement("span", {
-		        className: "webg-hint webg-fps" + (sel.fps < LOW_FPS ? " webg-fps--low" : ""),
-		        title: t.fpsTitle,
-		      }, sel.fps + " fps"),
+		    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.min(90, Math.round(sel.scrim * 100)), onScrim,
+		        Math.round(sel.scrim * 100) + "%"),
+		      SliderRow(t.border, 0, 90, 5, Math.min(90, Math.round(sel.border * 100)), onBorder,
+		        Math.round(sel.border * 100) + "%"),
+		      SliderRow(t.glass, 0, 40, 1, sel.blur, onBlur, sel.blur + "px"),
+		    ),
+		  );
+		}
+
+		function MonitorRow(t, sel) {
+		  return 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,
+		    ),
+		    React.createElement("label", { className: "webg-toggle", title: t.autoScrimTitle },
+		      React.createElement("input", {
+		        type: "checkbox", checked: sel.autoScrim, onChange: onToggleAutoScrim,
+		      }),
+		      t.autoScrim,
 		    ),
+		    sel.fps !== null && React.createElement("span", {
+		      className: "webg-hint webg-fps" + (sel.fps < LOW_FPS ? " webg-fps--low" : ""),
+		      title: t.fpsTitle,
+		    }, sel.fps + " fps"),
+		  );
+		}
+
+		function StatusRow(t, sel, group, usableCount, usableTotal) {
+		  // "Auto-rotating" is claimed only when the timer is genuinely armed —
+		  // rotation may be enabled on a list with fewer than 2 usable wallpapers,
+		  // in which case nothing switches until the list grows.
+		  const rotating = sel.rotationEnabled && usableCount >= 2;
+		  return React.createElement("div", { className: "webg-row" },
+		    React.createElement("span", { className: "webg-hint" },
+		      (group
+		        ? t.statusGroup(group.name, group.wallpaperIds.length, usableCount, group.interval,
+		            group.order === "random" ? t.random : t.sequence)
+		        : t.statusUsable(usableTotal)) +
+		      (rotating ? " · " + t.autoRotating : "") +
+		      (sel.autoPauseReasons.size > 0 ? " · " + t.autoPaused : "") +
+		      (sel.id && demotedToPreview.has(sel.id) ? " · " + t.decodeFallback : "") +
+		      (sel.inventory.installDir ? " · " + sel.inventory.installDir : "")),
+		  );
+		}
+
+		function WallpaperPicker() {
+		  const sel = useStore();
+		  const [query, setQuery] = React.useState("");
+		  const [editorQuery, setEditorQuery] = React.useState("");
+		  const t = S();
+
+		  if (!sel.loaded) {
+		    return React.createElement("div", { className: "webg-picker" },
+		      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" },
+		        t.connError + sel.inventory.error),
+		      React.createElement("button", {
+		        className: "webg-btn", type: "button", onClick: onRefresh, disabled: sel.loading,
+		      }, sel.loading ? t.refreshing : t.retry));
+		  }
+
+		  const usableList = selectableInventory();
+		  const q = query.trim();
+		  const filteredList = usableList.filter((w) => matchesQuery(w, q));
+		  const groups = sel.rotationGroups;
+		  const group = activeRotationGroup();
+		  const usableCount = rotationCandidates().length;
+		  const editing = sel.editing;
+
+		  return React.createElement("div", { className: "webg-picker" },
+		    SearchRow(t, sel, query, setQuery, filteredList.length, usableList.length),
+		    WallpaperGrid(t, sel, usableList, filteredList, q),
+		    ActionRow(t, sel),
+		    RotationListRow(t, sel, groups),
+		    editing && GroupEditorPanel(t, sel, usableList, editorQuery, setEditorQuery),
+		    RotationControlsRow(t, sel, group, usableCount),
+		    sel.id && EffectsPanel(t, sel),
+		    sel.id && MonitorRow(t, sel),
 		    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
-		          ? 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.id && demotedToPreview.has(sel.id) ? " · " + t.decodeFallback : "") +
-		        (sel.inventory.installDir ? " · " + sel.inventory.installDir : "")),
-		    ),
+		        React.createElement("span", { className: "webg-hint" }, t.lowFpsHint)),
+		    StatusRow(t, sel, group, usableCount, usableList.length),
 		  );
 		}
 
@@ -1528,17 +1631,18 @@ window.__ModuleLoader__.load({
 		  }
 		  .webg-layer--enter { opacity: 0; }
 		  .webg-layer--leave { opacity: 0; }
-		  /* Overscan: the media is LARGER than the layer by one blur radius on every
-		     side, so the transparent fringe CSS blur produces is clipped by the
-		     layer's overflow:hidden instead of compensated with a content-warping
-		     scale. 1× is the fringe a Gaussian kernel actually needs; more would
-		     double GPU fill and mis-anchor non-center object-positions. A slight
-		     saturate keeps blurred colours from washing out. */
+		  /* The media box is ALWAYS exactly the layer. Blur must never re-frame the
+		     content: enlarging the box for overscan made object-fit:cover scale the
+		     picture up to fill the bigger box, silently cropping the wallpaper's
+		     four edges — and once cropped, no zoom could bring them back. Instead the
+		     Gaussian's natural edge fade (≤ one blur radius, under the veil and the
+		     UI chrome) is accepted. A slight saturate keeps blurred colours from
+		     washing out. */
 		  .webg-layer .webg-media {
 		    position: absolute;
-		    inset: calc(-1 * var(--webg-wallpaper-blur, 0px));
-		    width: calc(100% + 2 * var(--webg-wallpaper-blur, 0px));
-		    height: calc(100% + 2 * var(--webg-wallpaper-blur, 0px));
+		    inset: 0;
+		    width: 100%;
+		    height: 100%;
 		    max-width: none; max-height: none;
 		    object-fit: var(--webg-fit, cover);
 		    object-position: center;
@@ -1631,10 +1735,10 @@ window.__ModuleLoader__.load({
 		    -webkit-backdrop-filter: blur(var(--webg-blur, 16px)) saturate(var(--webg-saturate, 1.8)) brightness(var(--webg-glass-brightness, 1.04)) contrast(1.01);
 		    backdrop-filter: blur(var(--webg-blur, 16px)) saturate(var(--webg-saturate, 1.8)) brightness(var(--webg-glass-brightness, 1.04)) contrast(1.01);
 		    box-shadow:
-		      inset 0 1px 0 rgba(255, 255, 255, var(--webg-glass-highlight, 0.32)),
+		      inset 0 1px 0 rgba(255, 255, 255, 0.32),
 		      inset 0 -1px 0 rgba(255, 255, 255, 0.08),
 		      inset 0 0 0 0.5px rgba(255, 255, 255, 0.08),
-		      0 12px 40px rgba(0, 0, 0, var(--webg-glass-shadow, 0.12));
+		      0 12px 40px rgba(0, 0, 0, 0.12);
 		  }
 
 		  /* ── Picker chrome (token-driven, theme-aware) ── */