dsh-background-by-model 0.9.2 → 0.10.0

package/lib/client.js

@@ -330,6 +330,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 +421,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 +448,6 @@ window.__ModuleLoader__.load({
 				match: "",
 				enabled: true,
 				color: null,
-				wallpaperOpacity: 1,
-				brightness: 100,
-				blur: 0,
 				rotate: defaultRotation()
 			};
 		}
@@ -547,28 +558,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 +617,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 +672,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 +935,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 +1117,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,
@@ -3197,13 +3250,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 +3286,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 +3298,7 @@ window.__ModuleLoader__.load({
 			pending = null;
 			front = 0;
 			layers = null;
+			wpAlpha = 1;
 			wpEl?.remove();
 			wpEl = null;
 		}
@@ -3239,9 +3306,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 +3341,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 +3380,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 +3389,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 +3437,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 +3487,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 +3502,7 @@ window.__ModuleLoader__.load({
 			}
 			if (ls[front].url === url) {
 				paintLayer(ls[front], url);
+				wpAlpha = rWop();
 				applyWpEffects();
 				return;
 			}
@@ -3418,7 +3523,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 +3540,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 +3567,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 +3643,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 +4689,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 +4728,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 +4916,7 @@ window.__ModuleLoader__.load({
 			ruleBrightness: "图片亮度",
 			ruleBlur: "图片模糊",
 			ruleEffectPick: "调节项",
+			ruleEffectNoImage: "添加图片后可分别设置每张图的透明度、亮度与模糊",
 			rotTitle: "多图轮换",
 			rotEnable: "轮换这组图",
 			rotNeedTwo: "至少两张图才能轮换",
@@ -4936,6 +5100,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",
@@ -5222,37 +5387,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 +5485,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 +6750,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 +6859,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 +6889,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 +7471,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 },
@@ -8550,13 +8813,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 +8889,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 +8963,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();