dsh-background-by-model 0.9.2 → 0.11.0

package/lib/client.js

@@ -103,12 +103,14 @@ window.__ModuleLoader__.load({
 			id: "mid-autumn",
 			slot: "h-midautumn",
 			asset: "mid-autumn.webp",
+			source: "/bfs/new_dyn/42e22801827aff71267b03c95fcfd7834168597.png@1672w.webp",
 			color: "#384A77",
 			kind: "lunar"
 		}, {
 			id: "national-day",
 			slot: "h-nationalday",
 			asset: "national-day.webp",
+			source: "/bfs/new_dyn/30e97211189f7869dae83b909d2a3cc84168597.png@3456w.webp",
 			color: "#FFF6EB",
 			kind: "gregorian"
 		}];
@@ -330,6 +332,28 @@ window.__ModuleLoader__.load({
 		function defaultTransition() {
 			return { ...DEFAULT_TRANSITION };
 		}
+		/**
+		* One image entry for a place that CREATES a picture rather than reads one back
+		* (a fresh holiday, and every upload in the panel).
+		*
+		* The two effects whose neutral value is also the shipped default are written
+		* explicitly (`opacity`, `blur`), even though `normalizeImage` would default them:
+		* the read-time lifts key off the ABSENCE of a key, so an entry created without one
+		* would come back as "written before this field existed" and inherit whatever the
+		* rule happened to carry. `brightness` is the one field whose absence is meaningful
+		* (see `BgImage.brightness`), so it is left out — "untouched" is exactly what a new
+		* picture is.
+		*/
+		function defaultImage(slot, color = null, bgMode = "fit") {
+			return {
+				slot,
+				bgMode,
+				bgState: { ...DEFAULT_BG_STATE },
+				color,
+				opacity: 1,
+				blur: 0
+			};
+		}
 		/** Every slot a rule owns, in order. The one thing the render and store layers
 		*  ask of the image list, so a rule's slots are never enumerated ad hoc. */
 		function ruleSlots(rule) {
@@ -399,18 +423,10 @@ window.__ModuleLoader__.load({
 			const color = hexToHsl(def.color);
 			return {
 				id: def.id,
-				images: [{
-					slot: def.slot,
-					bgMode: "fill",
-					bgState: { ...DEFAULT_BG_STATE },
-					color
-				}],
+				images: [defaultImage(def.slot, color, "fill")],
 				match: "",
 				enabled: true,
 				color,
-				wallpaperOpacity: 1,
-				brightness: 100,
-				blur: 0,
 				rotate: defaultRotation()
 			};
 		}
@@ -434,9 +450,6 @@ window.__ModuleLoader__.load({
 				match: "",
 				enabled: true,
 				color: null,
-				wallpaperOpacity: 1,
-				brightness: 100,
-				blur: 0,
 				rotate: defaultRotation()
 			};
 		}
@@ -547,28 +560,41 @@ window.__ModuleLoader__.load({
 				durationMs: clamp$1(t.durationMs, 0, TRANSITION_MAX_MS, fallback)
 			};
 		}
+		/** The inherit block for a caller that has no rule-level values at all. */
+		const DEFAULT_IMAGE_INHERIT = {
+			color: null,
+			opacity: 1,
+			brightness: void 0,
+			blur: 0
+		};
 		/**
 		* Coerce one persisted image entry, or null when it lacks a usable slot.
 		*
-		* `inherit` (the RULE's colour) is applied only to an entry with no `color` KEY at
-		* all — the shape written before per-image colours, where the rule's colour was the
-		* only one there was. The key's PRESENCE is the whole distinction: `color: null` is
-		* a deliberate "follow the system theme" and must not be re-inherited on every load.
+		* `inherit` is the rule-level block this entry may take its values from, and each
+		* field is lifted ONLY when the entry has no key of its own — that absence is the
+		* whole signal. `color: null` is a deliberate "follow the system theme" and must
+		* not be re-inherited on every load; `brightness` keeps its key absent when neither
+		* side ever named one, so an upgrade never writes a default nobody chose.
 		*
 		* `inheritMode` is the same one-shot lift for the layout mode. It is the caller's to
 		* resolve because the callers answer differently: a user rule passes the mode its
 		* config carried at the RULE level (schema 5), a holiday passes its own `fill`. An
 		* entry that HAS a `bgMode` key keeps it, even when it equals the default.
 		*/
-		function normalizeImage(raw, inherit = null, inheritMode = "fit") {
+		function normalizeImage(raw, inherit = DEFAULT_IMAGE_INHERIT, inheritMode = "fit") {
 			const i = raw ?? {};
 			if (typeof i.slot !== "string" || !SLOT_RE$1.test(i.slot)) return null;
-			return {
+			const image = {
 				slot: i.slot,
 				bgMode: BG_MODES$1.includes(i.bgMode) ? i.bgMode : inheritMode,
 				bgState: normalizeBgState(i.bgState),
-				color: hasOwn(i, "color") ? normalizeHsl(i.color) : inherit
+				color: hasOwn(i, "color") ? normalizeHsl(i.color) : inherit.color,
+				opacity: clamp01(i.opacity, inherit.opacity),
+				blur: clamp$1(i.blur, 0, 60, inherit.blur)
 			};
+			const brightness = i.brightness === void 0 ? inherit.brightness : clamp$1(i.brightness, 0, 200, 100);
+			if (brightness !== void 0) image.brightness = brightness;
+			return image;
 		}
 		/**
 		* Coerce one persisted rule, or null when it names no image ANYWHERE.
@@ -593,38 +619,45 @@ window.__ModuleLoader__.load({
 			if (id === null) return null;
 			const color = normalizeHsl(r.color);
 			const mode = BG_MODES$1.includes(r.bgMode) ? r.bgMode : "fit";
+			const inherit = {
+				color,
+				opacity: clamp01(r.wallpaperOpacity, 1),
+				brightness: r.brightness === void 0 ? void 0 : clamp$1(r.brightness, 0, 200, 100),
+				blur: clamp$1(r.blur, 0, 60, 0)
+			};
 			const images = [];
 			const seen = /* @__PURE__ */ new Set();
 			const hadList = Array.isArray(r.images);
 			if (hadList) for (const entry of r.images) {
-				const image = normalizeImage(entry, color, mode);
+				const image = normalizeImage(entry, inherit, mode);
 				if (image === null || seen.has(image.slot)) continue;
 				seen.add(image.slot);
 				images.push(image);
 			}
 			const legacySlot = typeof r.slot === "string" && SLOT_RE$1.test(r.slot) ? r.slot : null;
-			if (images.length === 0 && legacySlot !== null) images.push({
-				slot: legacySlot,
-				bgMode: mode,
-				bgState: normalizeBgState(r.bgState),
-				color
-			});
+			if (images.length === 0 && legacySlot !== null) {
+				const image = {
+					slot: legacySlot,
+					bgMode: mode,
+					bgState: normalizeBgState(r.bgState),
+					color,
+					opacity: inherit.opacity,
+					blur: inherit.blur
+				};
+				if (inherit.brightness !== void 0) image.brightness = inherit.brightness;
+				images.push(image);
+			}
 			if (images.length === 0 && !hadList) return null;
 			const rotate = normalizeRotation(r.rotate);
 			if (images.length < 2) rotate.enabled = false;
-			const brightness = r.brightness === void 0 ? void 0 : clamp$1(r.brightness, 0, 200, 100);
-			const rule = {
+			return {
 				id,
 				images,
 				match: typeof r.match === "string" ? r.match : "",
 				enabled: r.enabled !== false,
 				color,
-				wallpaperOpacity: clamp01(r.wallpaperOpacity, 1),
-				blur: clamp$1(r.blur, 0, 60, 0),
 				rotate
 			};
-			if (brightness !== void 0) rule.brightness = brightness;
-			return rule;
 		}
 		/**
 		* Coerce one persisted holiday entry.
@@ -641,17 +674,29 @@ window.__ModuleLoader__.load({
 			return {
 				...base,
 				enabled: r.enabled !== false,
-				wallpaperOpacity: clamp01(r.wallpaperOpacity, base.wallpaperOpacity),
-				brightness: clamp$1(r.brightness, 0, 200, base.brightness ?? 100),
-				blur: clamp$1(r.blur, 0, 60, base.blur),
-				images: base.images.map((image) => ({
-					slot: image.slot,
-					bgMode: image.bgMode,
-					bgState: normalizeBgState(r.images?.[0]?.bgState ?? r.bgState),
-					color: image.color
-				}))
+				images: base.images.map((image) => {
+					const stored = r.images?.[0];
+					const merged = {
+						slot: image.slot,
+						bgMode: image.bgMode,
+						bgState: normalizeBgState(stored?.bgState ?? r.bgState),
+						color: image.color,
+						opacity: clamp01(stored?.opacity ?? legacyWallpaperOpacity(r.wallpaperOpacity), image.opacity),
+						blur: clamp$1(stored?.blur ?? r.blur, 0, 60, image.blur)
+					};
+					const brightness = stored?.brightness === void 0 ? r.brightness === void 0 ? void 0 : clamp$1(r.brightness, 0, 200, 100) : clamp$1(stored.brightness, 0, 200, 100);
+					if (brightness !== void 0) merged.brightness = brightness;
+					return merged;
+				})
 			};
 		}
+		/**
+		* The rule-level opacity a schema-9 holiday entry carried, or `undefined` so the
+		* caller can tell "absent" from "set to 1" and leave `clamp01` its default.
+		*/
+		function legacyWallpaperOpacity(raw) {
+			return typeof raw === "number" && isFinite(raw) ? raw : void 0;
+		}
 		/** Coerce the whole holiday block; unknown ids are dropped, missing ones defaulted. */
 		function normalizeHolidays(raw) {
 			const r = raw ?? {};
@@ -892,24 +937,34 @@ window.__ModuleLoader__.load({
 		function rBgMode() {
 			return activeImage()?.bgMode ?? "fit";
 		}
+		/**
+		* Opacity of the wallpaper layer, 0..1 (per image, see BgImage).
+		*
+		* Read from the image being painted, not from the rule: one rule's rotation can go
+		* through a full-bleed photo and a faint decorative plate, and a rule-level answer
+		* would be wrong for one of them. A rule with no image paints nothing at all, so
+		* there is no layer for the value to describe.
+		*/
 		function rWop() {
-			return clamp01(activeRule()?.wallpaperOpacity, 1);
+			return clamp01(activeImage()?.opacity, 1);
 		}
 		/**
 		* Brightness of the wallpaper layer, in percent (100 = the picture exactly as the
 		* file has it).
 		*
-		* Read from the ACTIVE rule like the opacity and blur beside it, and defaulted the
-		* same way: a rule whose `brightness` key is absent — every config written before
-		* the setting existed — is left alone, so an upgrade changes nothing on screen.
-		* The default and the ceiling live in ../schema, so the render layer holds no
-		* numbers of its own (see ./wallpaper's `wpFilter`).
+		* Read from the CURRENT image, like the opacity and blur beside it, and defaulted
+		* the same way: an image whose `brightness` key is absent — every config written
+		* before the setting existed, and every picture whose rule never named one — is
+		* left alone, so an upgrade changes nothing on screen. The default and the ceiling
+		* live in ../schema, so the render layer holds no numbers of its own (see
+		* ./wallpaper's `wpFilter`).
 		*/
 		function rBrightness() {
-			return clamp$1(activeRule()?.brightness, 0, 200, 100);
+			return clamp$1(activeImage()?.brightness, 0, 200, 100);
 		}
+		/** Blur of the CURRENT image, in px (0 = the picture as its file has it). */
 		function rBl() {
-			return clamp$1(activeRule()?.blur, 0, 60, 0);
+			return clamp$1(activeImage()?.blur, 0, 60, 0);
 		}
 		/** Framing of the CURRENT image (per image, see BgImage). */
 		function rBgState() {
@@ -1064,7 +1119,7 @@ window.__ModuleLoader__.load({
 			const d = data;
 			const slots = Array.isArray(d.slots) ? d.slots.filter((s) => typeof s === "string") : [];
 			const schema = typeof d.schema === "number" && isFinite(d.schema) ? d.schema : null;
-			hostShape = typeof schema === "number" && schema >= 9 ? "current" : "legacy";
+			hostShape = typeof schema === "number" && schema >= 10 ? "current" : "legacy";
 			if (hostShape === "legacy") holdWrite();
 			return {
 				config: d.config,
@@ -1114,17 +1169,13 @@ window.__ModuleLoader__.load({
 			};
 		}
 		/**
-		* The profile's manifest and config, in one answer. Reads nothing, writes nothing.
+		* One of the profile's wallpapers, addressed by the slot the built-in config names.
 		*
 		* Raw rather than `rpcCall` for the same reason `fetchImageUrl` is: the node half
-		* answers this one with a value that CARRIES its own failure, and the `error`
-		* inside it is the only thing worth showing the user — the generic "rpc failed"
-		* log would throw that distinction away.
+		* answers this one with a value that CARRIES its own failure, and the `error` inside
+		* it is the only thing worth showing the user — the generic "rpc failed" log would
+		* throw that distinction away.
 		*/
-		async function fetchPresetConfig() {
-			return unwrapPreset(await rpcRaw("fetchPresetConfig", {}));
-		}
-		/** One of the profile's wallpapers, addressed by the slot the config names. */
 		async function fetchPresetImage(slot) {
 			return unwrapPreset(await rpcRaw("fetchPresetImage", { slot }));
 		}
@@ -3197,13 +3248,25 @@ window.__ModuleLoader__.load({
 		/** Index of the layer fading in right now, if any. */
 		let pending = null;
 		let fadeTimer = null;
+		/** The wallpaper's steady opacity — the ACTIVE picture's, as last committed.
+		*
+		*  Mirrored rather than read back off the style string, because a repaint that
+		*  runs in the middle of a fade (a theme re-registration, a panel re-render) has
+		*  to re-write the value the fade is HEADING for; reading `rWop()` there would
+		*  snap the whole layer to the incoming picture's alpha and cut the fade short.
+		*/
+		let wpAlpha = 1;
 		function createLayer() {
 			const el = document.createElement("div");
 			el.dataset.dabWpLayer = "";
 			el.style.cssText = "position:absolute;inset:0;opacity:0;background-repeat:no-repeat;background-position:center;";
 			return {
 				el,
-				url: null
+				url: null,
+				posX: null,
+				posY: null,
+				brightness: 100,
+				blur: 0
 			};
 		}
 		function ensureWpContainer() {
@@ -3221,6 +3284,7 @@ window.__ModuleLoader__.load({
 			layers = [a, b];
 			front = 0;
 			pending = null;
+			wpAlpha = 1;
 			document.body.prepend(wpEl);
 		}
 		/** Drop the whole wallpaper layer (no rule carries an image). */
@@ -3232,6 +3296,7 @@ window.__ModuleLoader__.load({
 			pending = null;
 			front = 0;
 			layers = null;
+			wpAlpha = 1;
 			wpEl?.remove();
 			wpEl = null;
 		}
@@ -3239,9 +3304,14 @@ window.__ModuleLoader__.load({
 		function clearLayer(l) {
 			if (l.url === null) return;
 			l.url = null;
+			l.posX = null;
+			l.posY = null;
+			l.brightness = 100;
+			l.blur = 0;
 			l.el.style.backgroundImage = "";
 			l.el.style.backgroundSize = "";
 			l.el.style.backgroundPosition = "";
+			l.el.style.inset = "0px";
 			l.el.style.transform = "none";
 		}
 		/** Write the two properties a switch animates. Both are always written, so a
@@ -3269,6 +3339,34 @@ window.__ModuleLoader__.load({
 			img.onerror = () => cb(0, 0);
 			img.src = url;
 		}
+		/** How far a layer's box is grown on every side to hide a blurred edge.
+		*
+		*  `filter: blur(σ)` convolves the layer's own rendering with a Gaussian of
+		*  standard deviation σ and treats everything outside the box as transparent, so
+		*  the outermost pixels come out half opaque and the image fades inward over
+		*  ~2σ — composited over the page behind it, that half-transparent rim is the
+		*  black border the blur slider paints, and it grows thicker with the slider.
+		*  Growing the box by 2σ puts every visible pixel at least 2σ inside the edge,
+		*  where ~2% of the page still shows through the outermost row: gone to the eye.
+		*  Two sigma rather than three is the trade for the `cover` modes, which pay for
+		*  the growth by framing slightly tighter — a fifth of the image at most, at the
+		*  slider's maximum, where the detail a wider frame would reveal is blurred out.
+		*/
+		function wpBlurPad(blur) {
+			return blur > 0 ? Math.ceil(blur * 2) + 2 : 0;
+		}
+		/** Grow a layer's box by `pad` on every side while keeping its image on the same
+		*  pixels. The background positioning area starts at the border box, so a box
+		*  whose origin moved by -pad needs a numeric placement moved by +pad; `center`
+		*  (and the box-relative `cover` / `100% 100%` sizes) sit in the middle of a
+		*  symmetrically grown box and need no compensation. The container clips the
+		*  growth, so nothing about the visible layout changes: it exists only to give
+		*  the blur pixels to sample beyond the viewport. */
+		function writeLayerBox(l, pad) {
+			const { posX, posY } = l;
+			l.el.style.inset = `${-pad}px`;
+			l.el.style.backgroundPosition = posX === null || posY === null ? "center" : `${posX + pad}px ${posY + pad}px`;
+		}
 		/** Paint one layer's image and its placement. The placement always follows the
 		*  ACTIVE rule: the incoming layer is painted right after a switch, and a
 		*  repaint of the same URL (framing edit, viewport resize) must use the rule's
@@ -3280,6 +3378,8 @@ window.__ModuleLoader__.load({
 			const mode = rBgMode();
 			const next = `url("${url}")`;
 			if (el.style.backgroundImage !== next) el.style.backgroundImage = next;
+			l.posX = null;
+			l.posY = null;
 			if (mode === "fit") {
 				el.style.backgroundRepeat = "no-repeat";
 				if (bg.iw > 0) {
@@ -3287,35 +3387,31 @@ window.__ModuleLoader__.load({
 					const w = bg.iw * fit * bg.zoom;
 					const h = bg.ih * fit * bg.zoom;
 					el.style.backgroundSize = `${w}px ${h}px`;
-					el.style.backgroundPosition = `${bg.x * window.innerWidth - w / 2}px ${bg.y * window.innerHeight - h / 2}px`;
-				} else {
-					el.style.backgroundSize = "contain";
-					el.style.backgroundPosition = "center";
-				}
+					l.posX = bg.x * window.innerWidth - w / 2;
+					l.posY = bg.y * window.innerHeight - h / 2;
+				} else el.style.backgroundSize = "contain";
 			} else if (mode === "fill") {
 				el.style.backgroundRepeat = "no-repeat";
 				el.style.backgroundSize = "cover";
-				el.style.backgroundPosition = "center";
 			} else if (mode === "stretch") {
 				el.style.backgroundRepeat = "no-repeat";
 				el.style.backgroundSize = "100% 100%";
-				el.style.backgroundPosition = "center";
 			} else if (mode === "tile") {
 				el.style.backgroundRepeat = "repeat";
 				el.style.backgroundSize = "auto";
-				el.style.backgroundPosition = "0px 0px";
+				l.posX = 0;
+				l.posY = 0;
 			} else {
 				el.style.backgroundRepeat = "no-repeat";
 				el.style.backgroundSize = "contain";
-				el.style.backgroundPosition = "center";
 				imageNatSize(url, (w, h) => {
 					if (l.url !== url || el.style.backgroundImage !== next || rBgMode() !== "center") return;
-					if (w > 0 && h > 0) {
-						el.style.backgroundSize = `${w}px ${h}px`;
-						el.style.backgroundPosition = "center";
-					}
+					if (w > 0 && h > 0) el.style.backgroundSize = `${w}px ${h}px`;
 				});
 			}
+			l.brightness = rBrightness();
+			l.blur = rBl();
+			applyLayerEffects(l);
 		}
 		/** Whether there is anything to animate FROM: a wallpaper on screen that is
 		*  actually visible. The duration question belongs to `rFadeMs`, and the
@@ -3339,6 +3435,10 @@ window.__ModuleLoader__.load({
 			}
 			pending = null;
 			front = idx;
+			if (wpEl !== null) {
+				wpEl.style.transition = "none";
+				wpEl.style.opacity = String(wpAlpha);
+			}
 			const el = layers[idx].el;
 			el.style.opacity = "1";
 			el.style.transform = "none";
@@ -3385,12 +3485,14 @@ window.__ModuleLoader__.load({
 			if (pending !== null) {
 				if (ls[pending].url === url) {
 					paintLayer(ls[pending], url);
+					wpAlpha = rWop();
 					applyWpEffects();
 					return;
 				}
 				if (ls[front].url === url) {
 					cancelFade();
 					paintLayer(ls[front], url);
+					wpAlpha = rWop();
 					applyWpEffects();
 					return;
 				}
@@ -3398,6 +3500,7 @@ window.__ModuleLoader__.load({
 			}
 			if (ls[front].url === url) {
 				paintLayer(ls[front], url);
+				wpAlpha = rWop();
 				applyWpEffects();
 				return;
 			}
@@ -3418,7 +3521,11 @@ window.__ModuleLoader__.load({
 			applyLayerStyle(el, plan.from);
 			el.style.zIndex = "1";
 			from.el.style.zIndex = "0";
+			const toAlpha = rWop();
+			const fadeAlpha = plan.animate && Math.abs(toAlpha - wpAlpha) > .001;
+			if (fadeAlpha) wpEl.style.transition = "none";
 			paintLayer(target, url);
+			if (!fadeAlpha) wpAlpha = toAlpha;
 			applyWpEffects();
 			if (!plan.animate) {
 				applyLayerStyle(el, plan.to);
@@ -3431,15 +3538,24 @@ window.__ModuleLoader__.load({
 				if (pending !== idx || layers === null) return;
 				el.style.transition = plan.transition;
 				applyLayerStyle(el, plan.to);
+				if (fadeAlpha) {
+					wpEl.style.transition = plan.transition;
+					wpEl.style.opacity = String(toAlpha);
+					wpAlpha = toAlpha;
+				}
 			});
 			fadeTimer = window.setTimeout(() => finishFade(idx), plan.durationMs + 160);
 		}
 		/**
-		* The `filter` a wallpaper layer carries, from the active rule's brightness and
-		* blur.
+		* The `filter` ONE LAYER carries, from the brightness and blur of the picture
+		* painted on IT.
+		*
+		* Both are per image (see BgImage): one rule's rotation can run a daylight photo
+		* and a night shot, and a rule-level answer forced the second one to live at the
+		* first one's exposure.
 		*
 		* ONE declaration, because the two are one CSS property: assigning `filter` twice
-		* would leave whichever ran last, so a rule that is both brightened and blurred
+		* would leave whichever ran last, so an image that is both brightened and blurred
 		* would silently lose one of them. Brightness is written first and blur second for
 		* a reason that is visible: blurring a dimmed picture softens the highlights the
 		* dimming just brought down, while dimming an already-blurred one simply darkens
@@ -3449,21 +3565,34 @@ window.__ModuleLoader__.load({
 		* The neutral brightness is LEFT OUT rather than written as `brightness(100%)`.
 		* A layer with neither effect gets `''`, which is what an untouched wallpaper has
 		* always carried, and keeps the layer off the compositor's filter path entirely.
+		*
+		* The numbers are the LAYER's, not live reads: during a switch the two layers
+		* hold two different photos, and a live read made the outgoing one jump to the
+		* incoming one's exposure at the first frame of every fade.
 		*/
-		function wpFilter() {
+		function wpFilter(brightness, blur) {
 			const parts = [];
-			const brightness = rBrightness();
 			if (brightness !== 100) parts.push(`brightness(${brightness}%)`);
-			const blur = rBl();
 			if (blur > 0) parts.push(`blur(${blur}px)`);
 			return parts.join(" ");
 		}
 		function applyWpEffects() {
 			if (wpEl === null || layers === null) return;
-			wpEl.style.opacity = String(rWop());
-			const filter = wpFilter();
-			layers[0].el.style.filter = filter;
-			layers[1].el.style.filter = filter;
+			wpEl.style.opacity = String(wpAlpha);
+			applyLayerEffects(layers[0]);
+			applyLayerEffects(layers[1]);
+		}
+		/** Write what a layer takes from ITS picture: the filter, and the box growth that
+		*  keeps a blurred edge from drawing a dark rim.
+		*
+		*  ONE function for both, because the two are one visible decision — the same
+		*  blur that makes `filter` non-empty is what makes the pad non-zero — and
+		*  because BOTH update paths (a full repaint and a drag frame) write it, so a
+		*  blur dragged to its top cannot leave the rim behind until the slider is
+		*  released. */
+		function applyLayerEffects(l) {
+			l.el.style.filter = wpFilter(l.brightness, l.blur);
+			writeLayerBox(l, wpBlurPad(l.blur));
 		}
 		/** Repaint the wallpaper layer, the token palette and every interface part from
 		*  the ACTIVE rule. This is the single entry point a rule switch goes through. */
@@ -3512,6 +3641,38 @@ window.__ModuleLoader__.load({
 			tableFixStyleEl = null;
 			stopWatchingParts();
 		}
+		/** Live wallpaper-opacity updates during slider drag (no full re-apply).
+		*
+		*  The container is the one holder of this value (see `applyWpEffects`), so the
+		*  mirror and the style are written together — a later repaint then re-asserts
+		*  what the drag ended on rather than the value it started from. */
+		function setWpOpacity(v) {
+			wpAlpha = v;
+			if (wpEl) wpEl.style.opacity = String(v);
+		}
+		/**
+		* Live wallpaper-filter updates during a slide, with no full re-apply.
+		*
+		* Deliberately parameterless: the filter composes TWO settings (brightness and
+		* blur), so a function trusting one caller's value would write half of it and
+		* drop the other. Both are read back from the store instead (./state), which is
+		* the same store the drag has already written to before calling this.
+		*
+		* Written onto the layer PAINTING that picture rather than onto both: during a
+		* switch the other layer is still showing the previous photo, and giving it this
+		* one's brightness and blur is exactly the snap this snapshot exists to prevent.
+		*/
+		function setWpFilter() {
+			if (layers === null) return;
+			const url = rWp();
+			if (url === null) return;
+			for (const l of layers) {
+				if (l.url !== url) continue;
+				l.brightness = rBrightness();
+				l.blur = rBl();
+				applyLayerEffects(l);
+			}
+		}
 		//#endregion
 		//#region src/client/cadence.ts
 		/**
@@ -4526,7 +4687,7 @@ window.__ModuleLoader__.load({
 				if (url !== null) images[slot] = url;
 			}
 			return {
-				version: 9,
+				version: 10,
 				exportedAt: (/* @__PURE__ */ new Date()).toISOString(),
 				config: cfg,
 				images
@@ -4565,7 +4726,7 @@ window.__ModuleLoader__.load({
 		* "replace everything with this" literally true.
 		*/
 		async function applyThemeFile(host, data, wipeFirst) {
-			if (typeof data.version === "number" && data.version > 9) return false;
+			if (typeof data.version === "number" && data.version > 10) return false;
 			if (typeof data.config !== "object" || data.config === null) return false;
 			if (wipeFirst) {
 				await resetStore();
@@ -4753,6 +4914,7 @@ window.__ModuleLoader__.load({
 			ruleBrightness: "图片亮度",
 			ruleBlur: "图片模糊",
 			ruleEffectPick: "调节项",
+			ruleEffectNoImage: "添加图片后可分别设置每张图的透明度、亮度与模糊",
 			rotTitle: "多图轮换",
 			rotEnable: "轮换这组图",
 			rotNeedTwo: "至少两张图才能轮换",
@@ -4806,7 +4968,7 @@ window.__ModuleLoader__.load({
 			importDone: "已导入配置",
 			importFail: "导入失败，文件格式不正确",
 			recCardTitle: "推荐配置",
-			recCardDesc: "从项目素材库下载作者维护的一整套配置（规则、壁纸与接口设置），一键替换当前的全部内容",
+			recCardDesc: "换上作者维护的一整套配置（规则与界面数值随插件内置，壁纸从图床下载），一键替换当前的全部内容",
 			recAdopt: "采用推荐配置",
 			recBusy: "正在下载",
 			recConfirmTitle: "替换当前的全部配置？",
@@ -4816,12 +4978,9 @@ window.__ModuleLoader__.load({
 			recConfirmOk: "删除并替换",
 			recConfirmCancel: "取消",
 			recDone: "已采用推荐配置",
-			recFailNetwork: "推荐配置下载失败，请检查网络后重试",
-			recFailNotProfile: "素材库返回的内容不是配置，请稍后重试",
-			recFailNewer: "这份推荐配置需要更新的插件版本，未做任何改动",
-			recFailTooMany: "这份推荐配置列出的图片数量超出限制，未做任何改动",
+			recFailNetwork: "壁纸下载失败，请检查网络后重试（已下到的会留到下一次）",
 			recFailTooLarge: "这份推荐配置体积过大，未做任何改动",
-			recFailImage: "这张壁纸没拿到（素材库里缺这个文件）：",
+			recFailImage: "这张壁纸没拿到（图床上这个地址没有回应）：",
 			recFailApply: "未能写入推荐配置，你原来的配置没有被改动",
 			storeCardTitle: "图片存储",
 			storeCardDesc: "因意外导致的孤儿图片这里可以清掉",
@@ -4936,6 +5095,7 @@ window.__ModuleLoader__.load({
 			ruleBrightness: "Image brightness",
 			ruleBlur: "Image blur",
 			ruleEffectPick: "Effect",
+			ruleEffectNoImage: "Add an image to give each one its own opacity, brightness and blur",
 			rotTitle: "Image rotation",
 			rotEnable: "Rotate these images",
 			rotNeedTwo: "At least two images are needed to rotate",
@@ -4989,7 +5149,7 @@ window.__ModuleLoader__.load({
 			importDone: "Profile imported",
 			importFail: "Import failed — invalid file",
 			recCardTitle: "Recommended profile",
-			recCardDesc: "Download the author's own full setup — rules, wallpapers and interface settings — and replace everything with it",
+			recCardDesc: "Install the author's own full setup — rules and interface numbers ship with the plugin, wallpapers are downloaded from the image host — replacing everything you have",
 			recAdopt: "Use recommended profile",
 			recBusy: "Downloading",
 			recConfirmTitle: "Replace your entire profile?",
@@ -4999,12 +5159,9 @@ window.__ModuleLoader__.load({
 			recConfirmOk: "Delete and replace",
 			recConfirmCancel: "Cancel",
 			recDone: "Recommended profile applied",
-			recFailNetwork: "Could not download the recommended profile — check your connection and retry",
-			recFailNotProfile: "The asset host answered with something that is not a profile — try again later",
-			recFailNewer: "This profile needs a newer plugin version. Nothing was changed.",
-			recFailTooMany: "The recommended profile names more images than the plugin will fetch. Nothing was changed.",
+			recFailNetwork: "Could not download the wallpapers — check your connection and retry (what arrived is kept for the next try)",
 			recFailTooLarge: "The recommended profile is too large. Nothing was changed.",
-			recFailImage: "Could not fetch this wallpaper — the asset host has no such file:",
+			recFailImage: "Could not fetch this wallpaper — the image host does not answer for that address:",
 			recFailApply: "Could not write the recommended profile — your own is untouched",
 			storeCardTitle: "Image storage",
 			storeCardDesc: "Orphaned image files left behind by an accident can be cleared here",
@@ -5041,41 +5198,6 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region src/preset.ts
 		/**
-		* JSON with object keys in a fixed (sorted) order — the same string for the same
-		* value, whatever order the object that carried it happened to build its keys in.
-		*
-		* `JSON.stringify` alone is not an identity for a value that came off the wire and
-		* through a sanitizer: key order is an accident of how the object was assembled,
-		* and a resume that missed on it would silently re-download everything (the safe
-		* direction) while a resume that MATCHED on a value it should not have would be
-		* the unsafe one — so this is deliberately total as well: anything JSON cannot
-		* carry (a function, a `Symbol`, `undefined`) serializes as `null` and an
-		* `undefined` property is skipped, exactly as `JSON.stringify` treats it.
-		*/
-		function canonical(value) {
-			if (Array.isArray(value)) return `[${value.map(canonical).join(",")}]`;
-			if (value !== null && typeof value === "object") return `{${Object.entries(value).filter(([, v]) => v !== void 0).sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0).map(([k, v]) => `${JSON.stringify(k)}:${canonical(v)}`).join(",")}}`;
-			return JSON.stringify(value) ?? "null";
-		}
-		/**
-		* The identity of one revision of the profile: the manifest's shape version plus
-		* the config, in canonical form.
-		*
-		* The profile is served at ONE version of the assets repository, but a version
-		* reference is only as fixed as the tag behind it: re-point the tag and every
-		* edge that has not been purged keeps answering with the previous bytes of the
-		* same URL. So "the profile" is still not guaranteed to be one fixed thing, and
-		* the bytes a previous attempt is holding are only known to belong to what is
-		* being installed when that config comes back the same. Order-insensitivity is
-		* what lets this be a comparison of VALUES rather than of spellings —
-		* `normalizeConfig` (./schema) rebuilds the config it reads, so pinning the key
-		* to the exact key order the wire happened to use would make the hold useless
-		* the moment anything upstream normalized differently.
-		*/
-		function presetKey(version, config) {
-			return `${version}\n${canonical(config)}`;
-		}
-		/**
 		* The bytes of a failed attempt that may be reused for the revision `key` names.
 		*
 		* A fresh object every time, never the held record itself: the caller fills it in
@@ -5099,6 +5221,145 @@ window.__ModuleLoader__.load({
 		function presetMissing(slots, images) {
 			return slots.filter((slot) => images[slot] === void 0);
 		}
+		/** Every slot the profile installs, in list order — the download set. */
+		const PROFILE_SLOTS = [
+			{
+				slot: "m1",
+				path: "/bfs/new_dyn/e4565384e7e5b2d75756e577f505534b4168597.png"
+			},
+			{
+				slot: "m2",
+				path: "/bfs/new_dyn/aa6e8649701c91e5ac8f43ff28b97a924168597.png"
+			},
+			{
+				slot: "m3",
+				path: "/bfs/new_dyn/5da92b31df5ee2a20b17ec6be353cf5c4168597.png"
+			},
+			{
+				slot: "m4",
+				path: "/bfs/new_dyn/14bb1e53cb2c13ca80bd23e3c1d2a04e4168597.png"
+			},
+			{
+				slot: "m5",
+				path: "/bfs/new_dyn/f51fff40de2d6eaa5a73d177f7bbfa794168597.png"
+			},
+			{
+				slot: "m6",
+				path: "/bfs/new_dyn/cfa71d4e60a2f12aaeec3efe1aa680b34168597.png"
+			},
+			{
+				slot: "m7",
+				path: "/bfs/new_dyn/c09d34b79d9b447d7db98da68b97afc54168597.png"
+			}
+		].map((i) => i.slot);
+		/**
+		* Identity of this generation of the built-in profile.
+		*
+		* Only one thing reads it: what a failed download KEEPS for the next press
+		* (`PresetHeld.key` in ./preset). Editing the rules or the pictures below must bump
+		* it, or a retry could staple a wallpaper from the old set to a config from the new
+		* one — the same reason the remote profile was compared by value rather than
+		* assumed. Nothing else in the plugin persists it.
+		*/
+		const RECOMMENDED_REVISION = "builtin-1";
+		/**
+		* One rule of the profile: the match string, its picture and that picture's color.
+		*
+		* The color is a per-image value (schema 10), and the triple here is the one the
+		* profile has always carried — an HSL accent per model, used to tint the interface
+		* while its wallpaper is on screen.
+		*/
+		function profileRule(id, match, slot, color) {
+			return {
+				id,
+				images: [defaultImage(slot, color, "fill")],
+				match,
+				enabled: true,
+				color: null,
+				rotate: defaultRotation()
+			};
+		}
+		/**
+		* The profile, as a fresh config every call.
+		*
+		* ORDER IS THE FALLBACK: matching runs top→bottom and the first usable rule is what
+		* an unmatched model gets, so `deepseek` leads — the model this plugin was written
+		* for. Everything below the rules is the interface numbers a fresh install already
+		* starts on (`DEFAULT_PART_OPACITIES` and friends), which is what makes installing
+		* the profile "add the rules and the pictures" on a clean store.
+		*
+		* Deliberately NOT taken from `freshThemeConfig()`: that one seeds a single BLANK
+		* rule, and this one must not inherit it.
+		*/
+		function recommendedConfig() {
+			return {
+				rules: [
+					profileRule("r1", "deepseek", "m3", [
+						191.88931210132625,
+						.5046198735613555,
+						.82
+					]),
+					profileRule("r2", "gpt", "m1", [
+						263.5122459614382,
+						.31076923076923096,
+						.82
+					]),
+					profileRule("r3", "claude", "m2", [
+						18.923814597762384,
+						.5486699795381468,
+						.6
+					]),
+					profileRule("r4", "qwen", "m4", [
+						26.25977410947,
+						.6228354978354975,
+						.82
+					]),
+					profileRule("r5", "glm", "m5", [
+						30.15559737458117,
+						.6552284141830319,
+						.7646280172718907
+					]),
+					profileRule("r6", "kimi", "m6", [
+						229.39645097591443,
+						.5752269829617896,
+						.2
+					]),
+					profileRule("r7", "grok", "m7", [
+						217.3791348600509,
+						.7702645947081058,
+						.2
+					])
+				],
+				opacities: { ...DEFAULT_PART_OPACITIES },
+				transition: defaultTransition(),
+				settingsOpacity: 1,
+				chatTextOpacity: DEFAULT_CHAT_TEXT_OPACITY,
+				trajectoryOpacity: DEFAULT_TRAJECTORY_OPACITY,
+				rightbarOpacity: DEFAULT_RIGHTBAR_OPACITY,
+				pageOpacity: 0,
+				autoExtract: true,
+				holidays: {
+					enabled: true,
+					items: defaultHolidayRules()
+				}
+			};
+		}
+		/**
+		* The profile as the document both imports consume — the same shape `exportTheme`
+		* writes, so everything downstream (the wipe, the slot loop) is the hand-picked
+		* file's path.
+		*
+		* `images` is filled by the caller as the downloads land, which is what makes a
+		* partially downloaded profile a resumable one rather than an all-or-nothing press.
+		*/
+		function recommendedThemeFile(images = {}) {
+			return {
+				version: 10,
+				exportedAt: (/* @__PURE__ */ new Date()).toISOString(),
+				config: recommendedConfig(),
+				images
+			};
+		}
 		//#endregion
 		//#region src/client/repaint.ts
 		/**
@@ -5222,37 +5483,80 @@ window.__ModuleLoader__.load({
 		//#region src/client/components/LiveSlider.tsx
 		/**
 		* Zero-lag slider: the thumb and value label update through DOM refs while
-		* dragging (onInput) so the caller can mutate the live UI directly without a
-		* React re-render; onChange commits the settled value. Double-click resets to
-		* the canonical default. The track fill is a gradient driven by the --pct
-		* custom property, updated imperatively alongside the thumb.
+		* dragging, so the caller can preview the change without a React re-render; the
+		* settled value is committed ONCE, when the gesture ends.
+		*
+		* The split is the whole point and it is not an optimisation detail. A range
+		* input fires `input` on every frame of a drag, and React's `change` handler for
+		* one is wired to that same event — so a slider that commits from `onChange`
+		* commits dozens of times a second, and every commit is a full repaint (skin,
+		* palette, wallpaper layer). That is why dragging a wallpaper effect cost a whole
+		* `applyActive()` per frame while the cheap live writers beside it were never
+		* reached.
+		*
+		* The gesture's end is therefore read from the events that actually end one: the
+		* native `change` event, a pointer released over the track, and a blur. No timer
+		* is armed — nothing here may compete with the plugin's one scheduler.
 		*/
 		function LiveSlider({ min, max, step, def, fmt, label, ariaLabel, onInput, onChange }) {
 			const inputRef = (0, react.useRef)(null);
 			const valRef = (0, react.useRef)(null);
+			/**
+			* The value the current gesture has reached but has not committed yet.
+			*
+			* Non-null is also the answer to "is a gesture in flight?", which the `def` sync
+			* below has to ask: the model watch re-emits on its own beat, and the render that
+			* causes would otherwise snap the knob back to the committed value mid-drag.
+			*/
+			const pending = (0, react.useRef)(null);
+			/** `onChange` is read through a ref so the native listener cannot go stale. */
+			const commitRef = (0, react.useRef)(onChange);
+			commitRef.current = onChange;
 			const paint = (el, v) => {
 				el.style.setProperty("--pct", String((v - min) / (max - min) * 100));
 			};
-			(0, react.useEffect)(() => {
+			/** Move the knob and the label without calling anybody back. */
+			const show = (v) => {
 				if (inputRef.current) {
-					inputRef.current.value = String(def);
-					paint(inputRef.current, def);
+					inputRef.current.value = String(v);
+					paint(inputRef.current, v);
 				}
-				if (valRef.current) valRef.current.textContent = fmt(def);
+				if (valRef.current) valRef.current.textContent = fmt(v);
+			};
+			const commit = () => {
+				const v = pending.current;
+				if (v === null) return;
+				pending.current = null;
+				commitRef.current(v);
+			};
+			/** One frame of a gesture: the caller's cheap path, then remember the value. */
+			const live = (v) => {
+				show(v);
+				pending.current = v;
+				onInput?.(v);
+			};
+			(0, react.useEffect)(() => {
+				if (pending.current !== null) return;
+				show(def);
 			}, [
 				def,
 				fmt,
 				min,
 				max
 			]);
-			const apply = (v) => {
-				if (inputRef.current) {
-					inputRef.current.value = String(v);
-					paint(inputRef.current, v);
-				}
-				if (valRef.current) valRef.current.textContent = fmt(v);
-				onInput?.(v);
-				onChange(v);
+			(0, react.useEffect)(() => {
+				const el = inputRef.current;
+				if (el === null) return;
+				const onEnd = () => commit();
+				el.addEventListener("change", onEnd);
+				return () => {
+					el.removeEventListener("change", onEnd);
+					commit();
+				};
+			}, []);
+			const reset = () => {
+				live(def);
+				commit();
 			};
 			const name = label ?? ariaLabel;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -5277,15 +5581,10 @@ window.__ModuleLoader__.load({
 						defaultValue: def,
 						"aria-label": name,
 						title: name !== void 0 ? `${name} · ${fmt(def)}` : fmt(def),
-						onDoubleClick: () => apply(def),
-						onInput: (e) => {
-							const el = e.target;
-							const v = Number(el.value);
-							paint(el, v);
-							onInput?.(v);
-							if (valRef.current) valRef.current.textContent = fmt(v);
-						},
-						onChange: (e) => onChange(Number(e.target.value))
+						onDoubleClick: reset,
+						onInput: (e) => live(Number(e.target.value)),
+						onPointerUp: commit,
+						onBlur: commit
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						ref: valRef,
 						className: "dab-slider-val",
@@ -6547,49 +6846,92 @@ window.__ModuleLoader__.load({
 			});
 		}
 		/**
-		* The rule's three wallpaper effects on ONE row: the menu names the target and a
-		* single track edits it.
+		* The selected image's three paint effects on ONE row: the menu names the target
+		* and a single track edits it.
+		*
+		* Per IMAGE, like the layout mode, the framing and the colour above it. The move
+		* is the same argument: a rotation through a daylight photo and a night shot does
+		* not want one exposure, and a rule-level value forced one of them to live at the
+		* other's compromise. A rule with no picture has nothing to expose, so the row is
+		* DISABLED (not hidden) there — the same way the layout chips behave.
 		*
 		* The three ranges are not interchangeable — opacity and brightness are
 		* percentages (brightness ceilings at the shared `WALLPAPER_BRIGHTNESS_MAX`),
 		* blur is pixels — so changing the menu swaps the whole track: limits, formatter
 		* and writer together. It never reinterprets one track under another name. The
-		* `key` remounts the input so `defaultValue` starts at the new field's current
-		* value; LiveSlider's drag-live path then works exactly as it did when the three
-		* tracks were stacked.
+		* `key` remounts the input so `defaultValue` starts at the new target's value.
+		*
+		* A drag has TWO writers, and which one runs is the whole reason this row is not
+		* a one-liner. `onInput` runs on every frame and must cost a wallpaper-layer
+		* property write (./wallpaper's `setWpOpacity` / `setWpFilter`) — the same cheap
+		* path the Interface page uses. `onChange` runs once, when the gesture ends, and
+		* is the one that goes through `setImageEffects`: that is a full repaint (skin,
+		* palette, wallpaper), and paying it per frame made a drag stall on a big image.
 		*/
-		function WallpaperEffectRow({ p, rule, field, onField }) {
+		function WallpaperEffectRow({ p, rule, image, painted, field, onField, active }) {
 			const { t } = p;
+			/**
+			* One frame of a drag: write the image in place, then touch only the layer
+			* property that field owns.
+			*
+			* Gated on `active && painted`: the wallpaper layer paints the ACTIVE rule's
+			* CURRENT image, so previewing any other one would write this card's numbers onto
+			* a different picture's pixels — the visible lie the per-image split makes
+			* possible and this gate prevents. The commit still lands, addressed by slot.
+			*
+			* Writing in place rather than through `setImageEffects` is deliberate and narrow:
+			* that one bumps `rulesRev` and closes with a repaint, which is exactly the
+			* per-frame cost being removed. Nothing is lost — the gesture's `onChange` hands
+			* the settled value over, and that path clamps and saves.
+			*/
+			const preview = (patch, paint) => {
+				if (!active || !painted || image === void 0) return;
+				Object.assign(image, patch);
+				paint();
+			};
+			const slot = image?.slot;
 			const spec = field === "opacity" ? {
 				label: t("ruleOpacity"),
 				min: 0,
 				max: 100,
 				step: 1,
-				def: Math.round(rule.wallpaperOpacity * 100),
+				def: Math.round((image?.opacity ?? 1) * 100),
 				fmt: (v) => `${v}%`,
-				onChange: (v) => p.setRule(rule.id, { wallpaperOpacity: v / 100 })
+				preview: (v) => preview({ opacity: v / 100 }, () => setWpOpacity(v / 100)),
+				onChange: (v) => {
+					if (slot !== void 0) p.setImageEffects(rule.id, slot, { opacity: v / 100 });
+				}
 			} : field === "brightness" ? {
 				label: t("ruleBrightness"),
 				min: 0,
 				max: 200,
 				step: 1,
-				def: rule.brightness ?? 100,
+				def: image?.brightness ?? 100,
 				fmt: (v) => `${v}%`,
-				onChange: (v) => p.setRule(rule.id, { brightness: v })
+				preview: (v) => preview({ brightness: v }, setWpFilter),
+				onChange: (v) => {
+					if (slot !== void 0) p.setImageEffects(rule.id, slot, { brightness: v });
+				}
 			} : {
 				label: t("ruleBlur"),
 				min: 0,
 				max: 60,
 				step: 1,
-				def: rule.blur,
+				def: image?.blur ?? 0,
 				fmt: (v) => `${v}px`,
-				onChange: (v) => p.setRule(rule.id, { blur: v })
+				preview: (v) => preview({ blur: v }, setWpFilter),
+				onChange: (v) => {
+					if (slot !== void 0) p.setImageEffects(rule.id, slot, { blur: v });
+				}
 			};
+			const disabled = image === void 0;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "dab-wp-row",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
 					className: "dab-select",
 					value: field,
+					disabled,
+					title: disabled ? t("ruleEffectNoImage") : void 0,
 					"aria-label": t("ruleEffectPick"),
 					onChange: (e) => onField(e.target.value),
 					children: [
@@ -6613,8 +6955,9 @@ window.__ModuleLoader__.load({
 					step: spec.step,
 					def: spec.def,
 					fmt: spec.fmt,
+					onInput: spec.preview,
 					onChange: spec.onChange
-				}, field)]
+				}, `${field}:${slot ?? ""}`)]
 			});
 		}
 		function RuleCard({ p, rule, index, total, active, liveIndex, notify, sel, onSel, field, onField, onRemove }) {
@@ -6642,6 +6985,15 @@ window.__ModuleLoader__.load({
 			const selIdx = rule.images.length === 0 ? 0 : Math.min(sel, rule.images.length - 1);
 			const image = rule.images[selIdx];
 			const url = image === void 0 ? null : p.imageOf(image.slot);
+			/**
+			* Whether the image being EDITED is also the one on screen.
+			*
+			* The wallpaper layer paints the active rule's CURRENT image, so a drag preview
+			* may only write a layer property when the two coincide — otherwise the card's
+			* numbers would land on another picture's pixels. This is the per-image split's
+			* own version of the `active` gate beside it.
+			*/
+			const painted = active && selIdx === liveIndex;
 			const ownColor = image === void 0 ? rule.color : image.color;
 			const setColor = (color) => {
 				if (image === void 0) p.setRule(rule.id, { color });
@@ -7215,14 +7567,21 @@ window.__ModuleLoader__.load({
 										})
 									]
 								})] }),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 									style: { marginTop: 16 },
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WallpaperEffectRow, {
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WallpaperEffectRow, {
 										p,
 										rule,
+										image,
+										painted,
 										field,
-										onField
-									})
+										onField,
+										active
+									}), image === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "dab-hint",
+										style: { marginTop: 8 },
+										children: t("ruleEffectNoImage")
+									}) : null]
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 									style: { marginTop: 14 },
@@ -7459,19 +7818,15 @@ window.__ModuleLoader__.load({
 		/**
 		* The ways the recommended-profile download can fail, mapped to their copy.
 		*
-		* They are worth telling apart because they ask different things of the user and
-		* of whoever maintains the assets repository: nothing answering is a network to
-		* retry, a mirror that answered with something that is not a profile is not
-		* going to start working on a retry, a profile written for a newer plugin is a
-		* "update this build", and too many images is a profile nobody should install.
-		* A failure that names a SLOT is a fifth case and is rendered separately — that
-		* one is the author's file naming, and only the slot tells them which.
+		* Two cases, because the profile is now only PICTURES: the rules and their numbers
+		* are compiled in, so there is no manifest to be malformed, no shape to be too new
+		* and no config to name too many slots. What is left is the network ("retry") and
+		* the cap on the total ("nobody should install this"). A failure that names a SLOT
+		* is rendered separately — that one is about one BFS address, and the slot is what
+		* says which.
 		*/
 		const REC_ERROR_KEYS = {
 			"download failed": "recFailNetwork",
-			"not a profile": "recFailNotProfile",
-			"newer version": "recFailNewer",
-			"too many images": "recFailTooMany",
 			"too large": "recFailTooLarge"
 		};
 		function ProfilePage({ p, notify }) {
@@ -8155,12 +8510,12 @@ window.__ModuleLoader__.load({
 		/**
 		* Ceiling on what one recommended profile may add up to, across every wallpaper.
 		*
-		* The node half caps each file and the number of files, but it answers one
-		* independent call at a time and never sees a running total — the client is the
-		* only side that does, so the total is bounded here. The real profile is 2.2 MB
-		* of images across seven of them, so this is generous by design: it exists to
-		* stop a config that names sixty-four eight-megabyte slots from turning one
-		* button press into half a gigabyte, not to second-guess the author.
+		* The node half caps ONE file, but it answers one independent call at a time and
+		* never sees a running total — the client is the only side that does, so the total
+		* is bounded here. The real profile is 2.2 MB of images across seven of them, so
+		* this is generous by design: it exists so that a build which grew a wrong URL
+		* (or an edge that served an upload instead of the transform) cannot turn one
+		* button press into half a gigabyte.
 		*/
 		const PRESET_TOTAL_MAX = 33554432;
 		/**
@@ -8171,7 +8526,8 @@ window.__ModuleLoader__.load({
 		* CDN edge was still cold). What is being paid is per-request latency, and the
 		* host speaks HTTP/2 — the bytes are identical either way and the connection is
 		* reused — so overlapping them buys wall-clock time and risks nothing but a
-		* little contention.
+		* little contention. The same holds for the Bilibili edges the pictures come from
+		* now (see `PROFILE_HOSTS` in ../profile).
 		*
 		* Four rather than all seven: a burst that wide competes for the same bandwidth
 		* and makes the per-file timeout harder to reason about, and four already hides
@@ -8550,13 +8906,7 @@ window.__ModuleLoader__.load({
 						const added = [];
 						for (const dataUrl of dataUrls) {
 							const slot = nextSlot();
-							const image = {
-								slot,
-								bgMode: "fit",
-								bgState: { ...DEFAULT_BG_STATE },
-								color: null
-							};
-							rule.images.push(image);
+							rule.images.push(defaultImage(slot));
 							added.push(slot);
 							setImage(slot, dataUrl);
 							writeImage(slot, dataUrl);
@@ -8632,6 +8982,28 @@ window.__ModuleLoader__.load({
 						saveConfig();
 						repaintIfMoved(id, winner);
 					},
+					/**
+					* Store ONE image's three paint effects. Addressed by slot like the mode and
+					* the framing: how a picture is exposed belongs to that picture, and a rule's
+					* rotation can run a daylight photo next to a night shot.
+					*
+					* `normalizeRuleInPlace` is the clamp, so a drag can never write a value the
+					* next load would trim; the layer's own preview path (`setWpOpacity` /
+					* `setWpFilter`) has already painted the value for the frames of the gesture.
+					*/
+					setImageEffects: (id, slot, patch) => {
+						const rule = ruleById(id);
+						const image = rule?.images.find((i) => i.slot === slot);
+						if (rule === null || image === void 0) return;
+						const winner = winnerId();
+						if (patch.opacity !== void 0) image.opacity = patch.opacity;
+						if (patch.brightness !== void 0) image.brightness = patch.brightness;
+						if (patch.blur !== void 0) image.blur = patch.blur;
+						normalizeRuleInPlace(rule);
+						rulesRev++;
+						saveConfig();
+						repaintIfMoved(id, winner);
+					},
 					setRuleRotation: (id, patch) => {
 						const rule = ruleById(id);
 						if (rule === null) return;
@@ -8684,12 +9056,7 @@ window.__ModuleLoader__.load({
 						const res = await fetchImageUrl(slot, url);
 						if (!res.ok) return res;
 						const winner = winnerId();
-						rule.images.push({
-							slot,
-							bgMode: "fit",
-							bgState: { ...DEFAULT_BG_STATE },
-							color: null
-						});
+						rule.images.push(defaultImage(slot));
 						setImage(slot, res.dataUrl ?? null);
 						rulesRev++;
 						persistConfig();
@@ -8786,30 +9153,28 @@ window.__ModuleLoader__.load({
 						}
 					},
 					/**
-					* Fetch the project's recommended profile. Downloads only — applying it is
-					* separate, because the page has to ask before anything is destroyed and the
-					* question should describe what is actually in hand.
+					* Fetch the recommended profile's wallpapers. Downloads only — applying them
+					* is separate, because the page has to ask before anything is destroyed and
+					* the question should describe what is actually in hand.
 					*
-					* The profile is a DIRECTORY, so this is a pool rather than one call: the
-					* config names the slots and each wallpaper is one request, up to
-					* `PRESET_CONCURRENCY` at a time. Each file keeps its own mirror fallback,
-					* retry rounds (the node half's business, ./preset), validation and slot name
-					* in a failure.
+					* The RULES are not fetched at all: they are compiled into the bundle
+					* (./profile), so this is a set of picture transfers and nothing else. That
+					* is why there is no manifest round, no shape gate and no "not a profile"
+					* failure left — nothing remote can decide what this installs.
+					*
+					* Each slot is one request, up to `PRESET_CONCURRENCY` at a time, and each
+					* file keeps its own host fallback, retry rounds (the node half's business,
+					* ./preset), validation and slot name in a failure.
 					*
 					* STRICT: the first wallpaper that cannot be had stops the queue. What had
 					* already arrived is kept for the next press (`presetHeld` below) — the
 					* difference between retrying one file and retrying the lot. Nothing is
-					* touched here, so "the author renamed a file" arrives as an error naming the
-					* file rather than as a profile quietly missing a picture.
+					* touched here, so a wrong URL arrives as an error naming the slot rather
+					* than as a profile quietly missing a picture.
 					*/
 					fetchRecommended: async (onProgress) => {
-						const head = await fetchPresetConfig();
-						if (!head.ok) return {
-							ok: false,
-							error: head.error
-						};
-						const slots = head.slots;
-						const key = presetKey(head.version, head.config);
+						const slots = PROFILE_SLOTS;
+						const key = RECOMMENDED_REVISION;
 						const images = presetResume(presetHeld, key);
 						let bytes = 0;
 						for (const url of Object.values(images)) bytes += url.length;
@@ -8857,12 +9222,7 @@ window.__ModuleLoader__.load({
 						presetHeld = null;
 						return {
 							ok: true,
-							preset: {
-								version: head.version,
-								exportedAt: (/* @__PURE__ */ new Date()).toISOString(),
-								config: head.config,
-								images
-							}
+							preset: recommendedThemeFile(images)
 						};
 					},
 					/** Replace EVERYTHING with a downloaded profile: empty the store, then write it. */