dsh-background-by-model 0.9.1 → 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,
@@ -1167,6 +1220,50 @@ window.__ModuleLoader__.load({
 			const parts = [d.provider, d.model].filter((s) => typeof s === "string" && s !== "");
 			return parts.length > 0 ? parts.join(" ") : null;
 		}
+		/**
+		* What the store occupies and what nothing points at — read-only.
+		*
+		* `keep` is this bundle's live slot list, which the node half unions with the config
+		* on disk (see `storeUsage`): the two are written at different moments, and the
+		* report must never call a file an orphan in the gap between an upload's bytes
+		* landing and its rule entry arriving. Sending the list can therefore only SPARE a
+		* slot, never condemn one.
+		*/
+		async function readStoreUsage(keep) {
+			const data = await rpcCall("storeUsage", { keep });
+			if (data === null || typeof data !== "object") return null;
+			const d = data;
+			return {
+				totalBytes: numberOr(d.totalBytes, 0),
+				usedBytes: numberOr(d.usedBytes, 0),
+				orphanBytes: numberOr(d.orphanBytes, 0),
+				files: numberOr(d.files, 0),
+				slots: Array.isArray(d.slots) ? d.slots.filter((s) => typeof s === "string") : [],
+				orphans: Array.isArray(d.orphans) ? d.orphans.filter((o) => o !== null && typeof o === "object" && typeof o.slot === "string").map((o) => ({
+					slot: o.slot,
+					bytes: numberOr(o.bytes, 0)
+				})) : [],
+				trusted: d.trusted === true
+			};
+		}
+		/**
+		* Delete every stored image nothing points at. The one destructive half of the
+		* pair, and it takes the same `keep` for the same reason.
+		*/
+		async function pruneOrphanImages(keep) {
+			const data = await rpcCall("pruneOrphans", { keep });
+			if (data === null || typeof data !== "object") return null;
+			const d = data;
+			return {
+				removed: Array.isArray(d.removed) ? d.removed.filter((s) => typeof s === "string") : [],
+				failed: Array.isArray(d.failed) ? d.failed.filter((s) => typeof s === "string") : [],
+				freedBytes: numberOr(d.freedBytes, 0),
+				refused: d.refused === true
+			};
+		}
+		function numberOr(value, fallback) {
+			return typeof value === "number" && isFinite(value) && value >= 0 ? value : fallback;
+		}
 		//#endregion
 		//#region src/client/utils/color.ts
 		function hsvToHsl(h, s, v) {
@@ -1927,6 +2024,13 @@ window.__ModuleLoader__.load({
 .dab-profile-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;margin-bottom:13px;color:var(--dsw-alias-brand-primary);background:var(--dsw-alias-bg-layer-2);background:color-mix(in srgb,var(--dsw-alias-brand-primary) 12%,transparent)}
 .dab-profile-title{font-size:14px;font-weight:650}
 .dab-profile-desc{font-size:12px;color:var(--dsw-alias-label-tertiary);line-height:1.55;margin:5px 0 15px}
+/* The image store's three numbers. A row of VALUES with a caption under each,
+   not a sentence: they are read as a measurement ("how much is orphaned"), and a
+   sentence makes the reader hunt for the one number that matters. */
+.dab-store-stats{display:flex;gap:16px;margin:2px 0 14px}
+.dab-store-stat{display:flex;flex-direction:column;gap:2px;min-width:0}
+.dab-store-stat-v{font-size:14px;font-weight:650;font-family:var(--dab-mono);letter-spacing:.01em;color:var(--dsw-alias-label-primary)}
+.dab-store-stat-k{font-size:11px;color:var(--dsw-alias-label-tertiary);white-space:nowrap}
 .dab-footer{margin-top:6px;padding:14px 4px 0;border-top:1px solid var(--dsw-alias-border-l2);display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--dsw-alias-label-tertiary)}
 .dab-footer-mono{font-family:var(--dab-mono);letter-spacing:.02em}
 /* Same reset as the brand: the package name links to the repository, and the
@@ -3146,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() {
@@ -3170,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). */
@@ -3181,6 +3298,7 @@ window.__ModuleLoader__.load({
 			pending = null;
 			front = 0;
 			layers = null;
+			wpAlpha = 1;
 			wpEl?.remove();
 			wpEl = null;
 		}
@@ -3188,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
@@ -3218,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
@@ -3229,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) {
@@ -3236,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
@@ -3288,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";
@@ -3334,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;
 				}
@@ -3347,6 +3502,7 @@ window.__ModuleLoader__.load({
 			}
 			if (ls[front].url === url) {
 				paintLayer(ls[front], url);
+				wpAlpha = rWop();
 				applyWpEffects();
 				return;
 			}
@@ -3367,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);
@@ -3380,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
@@ -3398,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. */
@@ -3461,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
 		/**
@@ -4248,6 +4462,11 @@ window.__ModuleLoader__.load({
 			className,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M7.2 1.8l1.2 3.1 3.1 1.2-3.1 1.2-1.2 3.1-1.2-3.1L2.9 6.1 6 4.9l1.2-3.1z" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 10.5l.5 1.2 1.2.5-1.2.5-.5 1.2-.5-1.2-1.2-.5 1.2-.5.5-1.2z" })]
 		});
+		const RefreshIcon = ({ size, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Glyph, {
+			size,
+			className,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M13.2 8A5.2 5.2 0 1 1 11.5 4.2" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M13.4 1.8v2.9h-2.9" })]
+		});
 		const DownloadIcon = ({ size, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Glyph, {
 			size,
 			className,
@@ -4470,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
@@ -4509,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();
@@ -4697,6 +4916,7 @@ window.__ModuleLoader__.load({
 			ruleBrightness: "图片亮度",
 			ruleBlur: "图片模糊",
 			ruleEffectPick: "调节项",
+			ruleEffectNoImage: "添加图片后可分别设置每张图的透明度、亮度与模糊",
 			rotTitle: "多图轮换",
 			rotEnable: "轮换这组图",
 			rotNeedTwo: "至少两张图才能轮换",
@@ -4767,6 +4987,18 @@ window.__ModuleLoader__.load({
 			recFailTooLarge: "这份推荐配置体积过大，未做任何改动",
 			recFailImage: "这张壁纸没拿到（素材库里缺这个文件）：",
 			recFailApply: "未能写入推荐配置，你原来的配置没有被改动",
+			storeCardTitle: "图片存储",
+			storeCardDesc: "因意外导致的孤儿图片这里可以清掉",
+			storeOrphans: "可清理",
+			storeFiles: "个可删文件",
+			storeReading: "正在读取…",
+			storeUnknown: "读不到存储信息（宿主进程可能是旧版插件，重启 DSH 后可用）",
+			storeCleanNone: "没有多余的文件",
+			storeClean: "清理",
+			storeDoneFreed: "已清理，释放",
+			storePartial: "有些文件没能删除：",
+			storeRefused: "配置文件读不出来（theme-config.json 解析失败），现在分不清哪些图片还在用，所以没有删除任何东西。修好或删掉那个文件后重启 DSH 再试",
+			storeRefresh: "重新读取",
 			footerTag: "按模型换背景插件",
 			repoLink: "在 GitHub 上打开仓库",
 			holidayTitle: "节日特殊背景",
@@ -4868,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",
@@ -4938,6 +5171,18 @@ window.__ModuleLoader__.load({
 			recFailTooLarge: "The recommended profile is too large. Nothing was changed.",
 			recFailImage: "Could not fetch this wallpaper — the asset host has no such file:",
 			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",
+			storeOrphans: "Cleanable",
+			storeFiles: "deletable files",
+			storeReading: "Reading…",
+			storeUnknown: "Could not read the store — the host process may be an older build; restart DSH",
+			storeCleanNone: "Nothing to clean up",
+			storeClean: "Clean up",
+			storeDoneFreed: "Cleaned up, freed",
+			storePartial: "Some files could not be deleted: ",
+			storeRefused: "The config file could not be read (theme-config.json does not parse), so nothing on disk can be told apart from an orphan. Nothing was deleted — fix or remove that file and restart DSH",
+			storeRefresh: "Refresh",
 			footerTag: "Per-model wallpaper plugin",
 			repoLink: "Open the repository on GitHub",
 			holidayTitle: "Holiday backgrounds",
@@ -5142,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", {
@@ -5197,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",
@@ -6467,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: [
@@ -6533,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 }) {
@@ -6562,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 });
@@ -7135,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 },
@@ -7316,6 +7659,41 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/format.ts
+		/**
+		* Byte counts as a person reads them — the only two sentences this plugin says
+		* about size, in one place so their difference cannot be an accident.
+		*
+		* They are NOT the same question, which is why there are two:
+		*
+		*   - a download's size describes ONE file that just arrived;
+		*   - a storage figure describes a total that is routinely zero.
+		*
+		* The floor below is right for the first and wrong for the second, and the wrong
+		* answer is not a crash: it is a card that offers to clean up 1 KB and a button
+		* that refuses to, on a store where there is nothing to clean. Neither number is
+		* ever deleted or written — these are display strings — but a maintenance panel
+		* whose numbers disagree with its own button is worse than no panel.
+		*/
+		/**
+		* Size of one download, at the precision a person reads it at.
+		*
+		* Floors at 1 KB on purpose: it is shown beside a file that just arrived, and
+		* "0 KB" beside a picture that downloaded fine reads as a failure.
+		*/
+		const fmtBytes = (n) => n >= 1048576 ? `${(n / 1024 / 1024).toFixed(1)} MB` : `${Math.max(1, Math.round(n / 1024))} KB`;
+		/**
+		* A figure on the storage card, where zero is a real and — on a tidy store — the
+		* usual answer.
+		*
+		* `fmtBytes` would print "1 KB" for it, so the card claimed 1 KB of waste while
+		* the clean button sat disabled (its condition is `orphanBytes === 0`, which was
+		* true all along). Rounding remains conservative in the other direction: a real
+		* orphan is never allowed to read as zero, because a number that cannot go down
+		* is exactly the complaint this feature exists to answer.
+		*/
+		const fmtStoreBytes = (n) => n > 0 ? fmtBytes(n) : "0 KB";
+		//#endregion
 		//#region src/client/components/pages/ProfilePage.tsx
 		/** Chip labels, keyed by the value they set — so no chip can be built from a
 		*  value the schema does not accept, and `check:ui` still sees every key used. */
@@ -7359,8 +7737,6 @@ window.__ModuleLoader__.load({
 			"too many images": "recFailTooMany",
 			"too large": "recFailTooLarge"
 		};
-		/** Size of a download, at the precision a person reads it at. */
-		const fmtBytes = (n) => n >= 1048576 ? `${(n / 1024 / 1024).toFixed(1)} MB` : `${Math.max(1, Math.round(n / 1024))} KB`;
 		function ProfilePage({ p, notify }) {
 			const { t, exportTheme, importTheme, setTransition } = p;
 			const importRef = (0, react.useRef)(null);
@@ -7463,6 +7839,46 @@ window.__ModuleLoader__.load({
 				setPending(null);
 				notify(ok ? t("recDone") : t("recFailApply"), ok);
 			};
+			const [usage, setUsage] = (0, react.useState)(null);
+			/** Distinguishes "not asked yet" from "asked, and the host cannot answer". */
+			const [usageRead, setUsageRead] = (0, react.useState)(false);
+			const [storeBusy, setStoreBusy] = (0, react.useState)(false);
+			const refreshStore = async () => {
+				const next = await p.readStoreUsage();
+				setUsage(next);
+				setUsageRead(true);
+			};
+			(0, react.useEffect)(() => {
+				let live = true;
+				(async () => {
+					const next = await p.readStoreUsage();
+					if (!live) return;
+					setUsage(next);
+					setUsageRead(true);
+				})();
+				return () => {
+					live = false;
+				};
+			}, [store.rulesRev]);
+			const onClean = async () => {
+				setStoreBusy(true);
+				const res = await p.pruneOrphanImages();
+				await refreshStore();
+				setStoreBusy(false);
+				if (res === null) {
+					notify(t("storeUnknown"), false);
+					return;
+				}
+				if (res.refused) {
+					notify(t("storeRefused"), false);
+					return;
+				}
+				if (res.failed.length > 0) {
+					notify(`${t("storePartial")}${res.failed.join(", ")}`, false);
+					return;
+				}
+				notify(res.removed.length === 0 ? t("storeCleanNone") : `${t("storeDoneFreed")} ${fmtStoreBytes(res.freedBytes)}`, true);
+			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
 					className: "dab-head dab-rise",
@@ -7745,6 +8161,74 @@ window.__ModuleLoader__.load({
 									}
 								})
 							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+							className: "dab-card dab-card-hover",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "dab-profile-ico",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrashIcon, { size: 17 })
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "dab-profile-title",
+									children: t("storeCardTitle")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "dab-profile-desc",
+									children: t("storeCardDesc")
+								}),
+								usage === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "dab-hint",
+									style: { marginBottom: 12 },
+									children: usageRead ? t("storeUnknown") : t("storeReading")
+								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "dab-store-stats",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "dab-store-stat",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "dab-store-stat-v",
+											children: fmtStoreBytes(usage.orphanBytes)
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "dab-store-stat-k",
+											children: t("storeOrphans")
+										})]
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "dab-store-stat",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "dab-store-stat-v",
+											children: usage.orphans.length
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "dab-store-stat-k",
+											children: t("storeFiles")
+										})]
+									})]
+								}), usage.trusted ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "dab-hint dab-stale",
+									style: { marginBottom: 12 },
+									children: t("storeRefused")
+								})] }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									style: {
+										display: "flex",
+										gap: 8,
+										flexWrap: "wrap"
+									},
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+										type: "button",
+										className: "dab-btn",
+										disabled: storeBusy || usage === null || usage.orphanBytes === 0 || !usage.trusted,
+										title: usage !== null && !usage.trusted ? t("storeRefused") : usage !== null && usage.orphanBytes === 0 ? t("storeCleanNone") : t("storeClean"),
+										onClick: () => void onClean(),
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrashIcon, { size: 14 }), t("storeClean")]
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+										type: "button",
+										className: "dab-btn dab-btn-ghost",
+										disabled: storeBusy,
+										onClick: () => void refreshStore(),
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RefreshIcon, { size: 14 }), t("storeRefresh")]
+									})]
+								})
+							]
 						})
 					]
 				}),
@@ -8329,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);
@@ -8411,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;
@@ -8463,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();
@@ -8648,6 +9143,12 @@ window.__ModuleLoader__.load({
 					applyRecommended: async (preset) => {
 						if (!canWriteConfig()) return false;
 						return await applyThemeFile({ applyActive }, preset, true);
+					},
+					readStoreUsage: () => readStoreUsage(cfg.rules.flatMap(ruleSlots)),
+					pruneOrphanImages: async () => {
+						const res = await pruneOrphanImages(cfg.rules.flatMap(ruleSlots));
+						for (const slot of res?.removed ?? []) setImage(slot, null);
+						return res;
 					}
 				};
 			};