dsh-background-by-model 0.6.0 → 0.7.2

package/lib/client.js

@@ -25,7 +25,7 @@ window.__ModuleLoader__.load({
 			pageModelBg: "模型背景",
 			pageProfile: "配置",
 			descInterface: "为主界面的各个区域单独调节透明度与模糊，营造空间层次感。这里的设置对所有模型生效",
-			descModelBg: "每条规则 = 一个匹配串 + 一套背景外观。切换模型时，从上往下找第一条匹配串出现在模型名里的规则；都没中就使用第 1 条",
+			descModelBg: "每条规则 = 一个匹配串 + 一组背景图与外观。切换模型时，从上往下找第一条匹配串出现在模型名里的规则；都没中就使用第 1 条。一条规则可以放多张图，按你设的节奏轮换",
 			descProfile: "把当前全部规则连同图片导出备份，或从文件一键恢复",
 			uiTitle: "主界面",
 			uiOpacity: "透明度",
@@ -44,17 +44,15 @@ window.__ModuleLoader__.load({
 			statusNoteNoSession: "会话服务已就绪，但还没有当前会话 id",
 			statusNoteNoProjection: "拿不到本会话的模型选择投影（binding / projections 不可用）",
 			statusNoteEmptySelection: "本会话的模型选择投影还没有值（切一次模型即可写入）",
-			rulesTitle: "规则列表",
-			rulesHint: "从上到下即为优先级。规则 1 同时兼任兜底：所有匹配串都没命中时使用它",
+			hostStaleHint: "检测到 DSH 主进程仍在运行旧版插件：新版配置格式它还读不懂，为避免丢规则，本次只改界面不写入配置。重启 DSH 后多图与轮换即可正常保存",
 			tryoutTitle: "匹配试跑",
 			tryoutPlaceholder: "输入模型名，如 deepseek-flash",
 			tryoutUseCurrent: "填入当前模型",
 			tryoutHit: "命中规则",
 			tryoutFallback: "无匹配 · 走兜底规则",
-			tryoutNone: "没有可用规则（规则需要启用并有图片）",
+			tryoutNone: "没有可用规则（规则需要启用，并且有图片或主题色）",
 			tryoutEmpty: "输入模型名即可试跑",
 			autoExtract: "选图后自动取主题色",
-			autoExtractHint: "只在规则还没有颜色时自动取色，绝不覆盖你手动选的颜色",
 			ruleAdd: "新增规则",
 			ruleFallbackBadge: "兜底",
 			ruleMatchPlaceholder: "如 flash / glm（忽略大小写，留空则不参与匹配）",
@@ -63,8 +61,6 @@ window.__ModuleLoader__.load({
 			ruleDown: "下移",
 			ruleRemove: "删除规则",
 			ruleNoImage: "尚未选择图片",
-			rulePickImage: "选择图片",
-			ruleChangeImage: "更换图片",
 			ruleFromUrl: "从网址",
 			ruleUrlPlaceholder: "粘贴图片网址 https://…",
 			ruleUrlApply: "应用",
@@ -72,19 +68,49 @@ window.__ModuleLoader__.load({
 			ruleUrlApplying: "加载中…",
 			ruleUrlBadHttp: "仅支持 http/https 图片网址",
 			ruleUrlFail: "获取图片失败",
-			ruleImageRemove: "移除图片",
-			ruleEmptyHint: "这条规则还没有图片，不会被匹配到，也不会作为兜底",
+			ruleImageRemove: "移除",
+			ruleEmptyHint: "这条规则还没有图片，也没有自己的主题色：没有可显示的内容，匹配和兜底都会跳过它",
+			ruleColorOnlyHint: "这条规则还没有图片：不会铺壁纸，界面只用这个主题色",
+			ruleImagePendingHint: "这张图片还没有取到内容，稍后会自己出现（也可以直接替换它）",
 			ruleColor: "主题色",
 			ruleColorNone: "跟随系统主题",
 			ruleColorNoneHint: "未设颜色时跟随系统主题：界面用宿主的配色，壁纸与各部位的透明度、模糊照旧生效",
 			ruleColorPick: "自定义颜色",
 			ruleColorPickHint: "优先从本图取色，取不到就用默认色",
+			ruleColorNoImageHint: "这条规则还没有图片，取不到色：选一个颜色可以只铺主题色，或先添加图片",
+			ruleColorPendingImageHint: "这张图片还没有取到内容，暂时取不了色：可以直接选一个颜色，或等它加载完",
 			ruleColorExtract: "从本图提取",
+			ruleColorTargetImage: "作用于选中的图片：",
+			ruleColorTargetRule: "作用于本规则（它还没有图片）",
 			ruleLayout: "布局模式",
 			ruleFramingEdit: "编辑位置",
 			ruleOpacity: "背景透明度",
 			ruleBlur: "背景模糊",
 			ruleBlurHint: "背景模糊作用于壁纸层；界面页里的模糊作用于界面各区域，两者互不影响",
+			rotTitle: "多图轮换",
+			rotEnable: "轮换这组图",
+			rotNeedTwo: "至少两张图才能轮换",
+			rotEvery: "每张停留",
+			rotCustom: "自定义秒数",
+			rotSeconds: "秒",
+			rotOrder: "换图顺序",
+			rotOrderSeq: "按顺序",
+			rotOrderShuffle: "随机",
+			rotOnSwitch: "切换模型时也换一张",
+			rotNext: "下一张",
+			rotNextInactive: "只有正在生效的规则能换画面上的图",
+			rotPos: "第",
+			rotShowing: "正在显示",
+			rotAddImage: "添加",
+			rotReplaceImage: "替换",
+			rotDragHint: "拖动排序",
+			rotDblHint: "双击切换",
+			rotEvery10s: "10 秒",
+			rotEvery30s: "30 秒",
+			rotEvery1m: "1 分钟",
+			rotEvery5m: "5 分钟",
+			rotEvery30m: "30 分钟",
+			rotEvery1h: "1 小时",
 			bgModeFit: "适应",
 			bgModeFill: "填充",
 			bgModeStretch: "拉伸",
@@ -125,7 +151,7 @@ window.__ModuleLoader__.load({
 			pageModelBg: "Model background",
 			pageProfile: "Profile",
 			descInterface: "Tune opacity and blur per surface to build depth. These settings are global and apply to every model",
-			descModelBg: "Each rule is a match string plus one look. On a model switch the list is scanned top-down for the first match string contained in the model name; if nothing hits, rule 1 is used",
+			descModelBg: "Each rule is a match string plus a set of wallpapers and one look. On a model switch the list is scanned top-down for the first match string contained in the model name; if nothing hits, rule 1 is used. A rule can hold several images and rotate through them on a rhythm you set",
 			descProfile: "Back up every rule together with its image, or restore one from a file",
 			uiTitle: "Interface",
 			uiOpacity: "Opacity",
@@ -144,17 +170,15 @@ window.__ModuleLoader__.load({
 			statusNoteNoSession: "The sessions service is up but reports no current session yet",
 			statusNoteNoProjection: "This session's model-selection projection is unreachable (no binding / projections)",
 			statusNoteEmptySelection: "The model-selection projection exists but carries no value yet (selecting a model once writes it)",
-			rulesTitle: "Rules",
-			rulesHint: "Top to bottom is the priority. Rule 1 doubles as the fallback — it is used when no match string hits",
+			hostStaleHint: "The DSH host process is still running the older plugin, which cannot read the new config shape. To avoid dropping rules, this session changes the interface but holds every config write — restart DSH and multi-image plus rotation will save normally",
 			tryoutTitle: "Match test",
 			tryoutPlaceholder: "Type a model name, e.g. deepseek-flash",
 			tryoutUseCurrent: "Use current model",
 			tryoutHit: "matches rule",
 			tryoutFallback: "no match · fallback rule",
-			tryoutNone: "No usable rule (a rule needs to be enabled and have an image)",
+			tryoutNone: "No usable rule (a rule needs to be enabled and carry an image or a theme color)",
 			tryoutEmpty: "Type a model name to test the list",
 			autoExtract: "Extract the theme color when an image is chosen",
-			autoExtractHint: "Only fills a rule that has no color yet — a color you picked is never overwritten",
 			ruleAdd: "Add rule",
 			ruleFallbackBadge: "fallback",
 			ruleMatchPlaceholder: "e.g. flash / glm (case-insensitive, empty never matches)",
@@ -163,8 +187,6 @@ window.__ModuleLoader__.load({
 			ruleDown: "Move down",
 			ruleRemove: "Remove rule",
 			ruleNoImage: "No image yet",
-			rulePickImage: "Choose image",
-			ruleChangeImage: "Replace image",
 			ruleFromUrl: "From URL",
 			ruleUrlPlaceholder: "Paste an image URL https://…",
 			ruleUrlApply: "Apply",
@@ -172,19 +194,49 @@ window.__ModuleLoader__.load({
 			ruleUrlApplying: "Loading…",
 			ruleUrlBadHttp: "Only http/https image URLs are supported",
 			ruleUrlFail: "Could not fetch the image",
-			ruleImageRemove: "Remove image",
-			ruleEmptyHint: "This rule has no image — it can neither match nor serve as the fallback",
+			ruleImageRemove: "Remove",
+			ruleEmptyHint: "This rule has no image and no theme color of its own: it has nothing to show, so matching and the fallback both skip it",
+			ruleColorOnlyHint: "No image in this rule yet: no wallpaper is shown, and the interface is painted from this theme color alone",
+			ruleImagePendingHint: "This image has no content yet — it appears once it loads; you can also replace it",
 			ruleColor: "Theme color",
 			ruleColorNone: "Follow system theme",
 			ruleColorNoneHint: "Without a color this rule follows the system theme: the host palette paints the interface while the wallpaper and every opacity/blur slider keep working",
 			ruleColorPick: "Custom color",
 			ruleColorPickHint: "Extracts from this image when it can, otherwise uses a default color",
+			ruleColorNoImageHint: "This rule has no image to take a color from: pick a color to tint the interface alone, or add an image first",
+			ruleColorPendingImageHint: "This image has no content yet, so there is nothing to extract from: pick a color directly, or wait for it to load",
+			ruleColorTargetImage: "Applies to the selected image:",
+			ruleColorTargetRule: "Applies to this rule (it has no image yet)",
 			ruleColorExtract: "Extract from image",
 			ruleLayout: "Layout mode",
 			ruleFramingEdit: "Edit position",
 			ruleOpacity: "Background opacity",
 			ruleBlur: "Background blur",
 			ruleBlurHint: "Background blur affects the wallpaper layer; the blur on the Interface page affects interface surfaces — they are independent",
+			rotTitle: "Image rotation",
+			rotEnable: "Rotate these images",
+			rotNeedTwo: "At least two images are needed to rotate",
+			rotEvery: "Dwell time per image",
+			rotCustom: "Custom seconds",
+			rotSeconds: "s",
+			rotOrder: "Order",
+			rotOrderSeq: "In order",
+			rotOrderShuffle: "Shuffle",
+			rotOnSwitch: "Also step on a model switch",
+			rotNext: "Next image",
+			rotNextInactive: "Only the active rule can step the background",
+			rotPos: "Image",
+			rotShowing: "On screen",
+			rotAddImage: "Add",
+			rotReplaceImage: "Replace",
+			rotDragHint: "drag to reorder",
+			rotDblHint: "double-click to show",
+			rotEvery10s: "10 s",
+			rotEvery30s: "30 s",
+			rotEvery1m: "1 min",
+			rotEvery5m: "5 min",
+			rotEvery30m: "30 min",
+			rotEvery1h: "1 h",
 			bgModeFit: "Fit",
 			bgModeFill: "Fill",
 			bgModeStretch: "Stretch",
@@ -351,7 +403,7 @@ window.__ModuleLoader__.load({
 			if (!master || todayId === null) return null;
 			const item = items.find((i) => i.id === todayId);
 			if (item === void 0 || !item.enabled) return null;
-			return hasImage(item.slot) ? item : null;
+			return item.images.some((image) => hasImage(image.slot)) ? item : null;
 		}
 		//#endregion
 		//#region src/schema.ts
@@ -391,6 +443,26 @@ window.__ModuleLoader__.load({
 			"tile",
 			"center"
 		];
+		/** Every accepted `rotate.order`, in UI order. */
+		const ROTATE_ORDERS = ["order", "shuffle"];
+		/** Fastest allowed dwell time — below this the cross-fade never settles. */
+		const ROTATE_MIN_MS = 5e3;
+		/** Slowest allowed dwell time (24 h): one image per day is still "rotation". */
+		const ROTATE_MAX_MS = 864e5;
+		/** Longest allowed cross-fade; 0 is a hard cut. */
+		const ROTATE_FADE_MAX_MS = 3e3;
+		/** Everything off: the shipped default, and what a config predating this feature gets. */
+		const DEFAULT_ROTATION = {
+			enabled: false,
+			intervalMs: 6e4,
+			order: "order",
+			advanceOnSwitch: false,
+			fadeMs: 320
+		};
+		/** A fresh rotation block (never hand out the shared default object). */
+		function defaultRotation() {
+			return { ...DEFAULT_ROTATION };
+		}
 		/**
 		* Main interface opacities (0..1), global (Interface page):
 		*   `bg`      main background (`--dsw-alias-bg-base`)
@@ -442,6 +514,37 @@ window.__ModuleLoader__.load({
 			rightbar: 0,
 			input: 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) {
+			return rule.images.map((i) => i.slot);
+		}
+		/**
+		* Whether a rule has anything to show at all: an image, or a theme color of its
+		* own. Used by matching (`usable` in ./client/modelbg) and by the panel's copy.
+		*
+		* An image is the obvious way a rule paints, and until 0.7 it was the ONLY one —
+		* which stopped being true the moment the last image became removable. A
+		* rule-level theme color is the second: it recolors the interface through the
+		* token palette with no wallpaper involved, so a rule whose pictures were all
+		* removed still paints, and treating it as unusable made every control left on
+		* its card (the wheel, the swatches, the clear-to-system-theme button) dead — the
+		* one state where the panel was confidently showing a lie. It also silently
+		* handed the model to the NEXT rule, so clearing the default rule's images put
+		* another model's wallpaper on the screen.
+		*
+		* Note that a per-image color (0.7.1) does not enter this question at all: an
+		* image is already enough, so the answer here is about the IMAGE LIST being
+		* non-empty, never about what those images are painted in.
+		*
+		* A rule with no image and no color of its own paints nothing: the system theme
+		* is not a paint of this rule's own, so such a rule is skipped by matching, which
+		* is what makes a freshly added rule (empty, colorless) invisible until the user
+		* gives it something.
+		*/
+		function ruleCanPaint(rule) {
+			return rule.enabled && (ruleSlots(rule).length > 0 || rule.color !== null);
+		}
 		/**
 		* `#RRGGBB` → the `[h, s, l]` triple every rule stores (`s` and `l` in 0..1), or
 		* null when the string is not a hex color.
@@ -487,16 +590,21 @@ window.__ModuleLoader__.load({
 		* art was not cut for.
 		*/
 		function defaultHolidayRule(def) {
+			const color = hexToHsl(def.color);
 			return {
 				id: def.id,
-				slot: def.slot,
+				images: [{
+					slot: def.slot,
+					bgState: { ...DEFAULT_BG_STATE },
+					color
+				}],
 				match: "",
 				enabled: true,
-				color: hexToHsl(def.color),
+				color,
 				bgMode: "fill",
 				wallpaperOpacity: 1,
 				blur: 0,
-				bgState: { ...DEFAULT_BG_STATE }
+				rotate: defaultRotation()
 			};
 		}
 		/** Every built-in holiday at its default, in `HOLIDAYS` order. */
@@ -546,34 +654,115 @@ window.__ModuleLoader__.load({
 				clamp$1(raw[2], 0, 1, .25)
 			];
 		}
-		/** Coerce one persisted rule, or null when it lacks a usable id/slot. */
+		/** Coerce one persisted rotation block; a config without one gets the shipped default. */
+		function normalizeRotation(raw) {
+			const r = raw ?? {};
+			const d = DEFAULT_ROTATION;
+			return {
+				enabled: r.enabled === true,
+				intervalMs: clamp$1(r.intervalMs, ROTATE_MIN_MS, ROTATE_MAX_MS, d.intervalMs),
+				order: ROTATE_ORDERS.includes(r.order) ? r.order : d.order,
+				advanceOnSwitch: r.advanceOnSwitch === true,
+				fadeMs: clamp$1(r.fadeMs, 0, ROTATE_FADE_MAX_MS, d.fadeMs)
+			};
+		}
+		/** Own-property test for values that may be anything at all (a raw JSON entry). */
+		function hasOwn(o, key) {
+			return Object.prototype.hasOwnProperty.call(o, key);
+		}
+		/**
+		* Coerce one persisted image entry, or null when it lacks a usable slot.
+		*
+		* `inherit` is the RULE's own color, and it is applied only to an entry that has
+		* no `color` key at all — the shape every release before 0.7.1 wrote, where a
+		* rule's color was the only color there was. Lifting it here, once, is what makes
+		* an upgrade a no-op on screen: a themed wallpaper keeps its theme instead of
+		* silently dropping to the system palette, and it happens in the shared sanitizer
+		* so both halves lift identically.
+		*
+		* The KEY's presence is the whole distinction, which is why `null` is not the
+		* same as absent: an entry with `color: null` is an image the user explicitly set
+		* to "follow the system theme", and re-inheriting the rule's color over that
+		* would undo a deliberate choice on every load.
+		*/
+		function normalizeImage(raw, inherit = null) {
+			const i = raw ?? {};
+			if (typeof i.slot !== "string" || !SLOT_RE.test(i.slot)) return null;
+			return {
+				slot: i.slot,
+				bgState: normalizeBgState(i.bgState),
+				color: hasOwn(i, "color") ? normalizeHsl(i.color) : inherit
+			};
+		}
+		/**
+		* Coerce one persisted rule, or null when it names no image AT ALL.
+		*
+		* Accepts BOTH image shapes: the 0.7 list (`images`), and the single
+		* `slot`/`bgState` pair every earlier version wrote — the latter is lifted to a
+		* one-entry list here rather than at a dozen call sites, which is what keeps the
+		* rest of the codebase free of "old config" branches. Duplicate slots inside one
+		* rule are dropped: two entries pointing at the same bytes would only make the
+		* rotation look stuck.
+		*
+		* The rule's color is resolved FIRST and handed to every image entry, because it
+		* is what an entry written before 0.7.1 inherits (`normalizeImage`). The rule keeps
+		* it as well: it is not a default for its images at paint time any more, but it
+		* is still what the rule paints once its last picture is gone.
+		*
+		* An EMPTY list is a legitimate rule, not a broken one: removing a rule's last
+		* picture has to be expressible, and forcing an entry back in is what produced a
+		* phantom blank image that took slot 1 and could never be deleted again (the next
+		* upload landed at position 2 and the rule kept painting nothing). What such a
+		* rule then does is `ruleCanPaint`'s business: with a color of its own it paints
+		* the interface, with neither it is skipped by matching — which the card's own
+		* hint says in so many words. Only a rule that names no image anywhere — no list,
+		* no legacy slot, or a slot that could never be a filename — is dropped.
+		*/
 		function normalizeRule(raw) {
 			const r = raw ?? {};
 			const id = typeof r.id === "string" && r.id !== "" ? r.id : null;
-			const slot = typeof r.slot === "string" && SLOT_RE.test(r.slot) ? r.slot : null;
-			if (id === null || slot === null) return null;
+			if (id === null) return null;
+			const color = normalizeHsl(r.color);
+			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);
+				if (image === null || seen.has(image.slot)) continue;
+				seen.add(image.slot);
+				images.push(image);
+			}
+			const legacySlot = typeof r.slot === "string" && SLOT_RE.test(r.slot) ? r.slot : null;
+			if (images.length === 0 && legacySlot !== null) images.push({
+				slot: legacySlot,
+				bgState: normalizeBgState(r.bgState),
+				color
+			});
+			if (images.length === 0 && !hadList) return null;
 			const mode = BG_MODES$1.includes(r.bgMode) ? r.bgMode : "fit";
 			return {
 				id,
-				slot,
+				images,
 				match: typeof r.match === "string" ? r.match : "",
 				enabled: r.enabled !== false,
-				color: normalizeHsl(r.color),
+				color,
 				bgMode: mode,
 				wallpaperOpacity: clamp01(r.wallpaperOpacity, 1),
 				blur: clamp$1(r.blur, 0, 60, 0),
-				bgState: normalizeBgState(r.bgState)
+				rotate: normalizeRotation(r.rotate)
 			};
 		}
 		/**
 		* Coerce one persisted holiday entry.
 		*
-		* `id`, `slot` and `color` come from the DEFINITION, never from disk: a holiday's
-		* slot is the only thing tying it to its bytes, and its theme color is a fixed
-		* part of what that holiday looks like — so a stale or hand-edited value would
-		* either orphan the wallpaper, point the holiday at a rule's image, or paint a
-		* festival in a color it does not have. Everything else is sanitized exactly like
-		* a rule's field.
+		* `id`, `images` and every theme color (the rule's and each image's) come from
+		* the DEFINITION, never from disk: a holiday's slot is the only thing tying it to
+		* its bytes, and its theme color is a fixed part of what that holiday looks like —
+		* so a stale or hand-edited value would either orphan the wallpaper, point the
+		* holiday at a rule's image, or paint a festival in a color it does not have.
+		* Everything else is sanitized exactly like a rule's field — except the image
+		* list and the rotation, which stay the definition's own single image and stay
+		* off, so a festival can never be swapped or cycled.
 		*/
 		function normalizeHolidayRule(def, raw) {
 			const r = raw ?? {};
@@ -584,7 +773,11 @@ window.__ModuleLoader__.load({
 				bgMode: BG_MODES$1.includes(r.bgMode) ? r.bgMode : base.bgMode,
 				wallpaperOpacity: clamp01(r.wallpaperOpacity, base.wallpaperOpacity),
 				blur: clamp$1(r.blur, 0, 60, base.blur),
-				bgState: normalizeBgState(r.bgState)
+				images: base.images.map((image) => ({
+					slot: image.slot,
+					bgState: normalizeBgState(r.images?.[0]?.bgState ?? r.bgState),
+					color: image.color
+				}))
 			};
 		}
 		/** Coerce the whole holiday block; unknown ids are dropped, missing ones defaulted. */
@@ -720,13 +913,68 @@ window.__ModuleLoader__.load({
 		let activeRuleId = null;
 		let activeMatched = false;
 		let modelLabel = "";
+		/**
+		* Which image of the ACTIVE rule is painted right now.
+		*
+		* Deliberately NOT persisted: a background that comes back on image 3 of 7 after
+		* a reload, with no way to say why, is worse than one that starts at the first
+		* image every time. Clamped to the rule's own length on every read, so an index
+		* left over from a longer list can never point at nothing.
+		*/
+		let rotIndex = 0;
 		function setActive(ruleId, matched) {
+			if (ruleId !== activeRuleId) rotIndex = 0;
 			activeRuleId = ruleId;
 			activeMatched = matched;
 		}
 		function setModelLabel(label) {
 			modelLabel = label;
 		}
+		/** The image index the render layer is on, clamped into `rule`'s own range. */
+		function imageIndexOf(rule) {
+			if (rule.images.length === 0) return 0;
+			const i = Math.floor(rotIndex);
+			return i >= 0 && i < rule.images.length ? i : 0;
+		}
+		/** Point the active rule at another of its images (the rotation's one mutator). */
+		function setRotIndex(i) {
+			rotIndex = Math.floor(i);
+		}
+		/** The image the active rule is painting now, or null when it has none. */
+		function activeImage() {
+			const rule = activeRule();
+			if (rule === null) return null;
+			return rule.images[imageIndexOf(rule)] ?? null;
+		}
+		/** Slot of the active rule's current image; '' when there is nothing to paint. */
+		function activeSlot() {
+			return activeImage()?.slot ?? "";
+		}
+		/**
+		* The theme color in force right now, or null for "follow the system theme".
+		*
+		* Two rungs, in this order and no others:
+		*   1. the color of the IMAGE that is on screen, when the rule has one;
+		*   2. the rule's own color, which is all an image-less rule has to paint with.
+		*
+		* There is deliberately no third rung where an image INHERITS its rule's color:
+		* a rule's color is not a default for its pictures (see `BgRule.color`). If it
+		* were, a rotation through a green picture, a red one and a system-themed one
+		* could not be expressed at all — clearing a picture's color would only hand it
+		* back to the rule's, and the clear button would look broken. Images that predate
+		* per-image colors get the rule's color LIFTED onto them at read time instead
+		* (`normalizeImage`), so nothing loses its theme on upgrade.
+		*
+		* The image is the one being PAINTED (`imageIndexOf`), not the one the panel has
+		* selected — the panel's selection is an editing cursor and must not repaint the
+		* interface while the user is fixing another picture's framing.
+		*/
+		function activeColor() {
+			const rule = activeRule();
+			if (rule === null) return null;
+			if (rule.images.length === 0) return rule.color;
+			return activeImage()?.color ?? null;
+		}
 		/**
 		* One rule by id — from the USER's list first, then from the holiday overrides.
 		*
@@ -745,22 +993,46 @@ window.__ModuleLoader__.load({
 		function holidayById(id) {
 			return cfg.holidays.items.find((r) => r.id === id) ?? null;
 		}
-		function newRule(id, slot) {
+		/**
+		* A fresh rule, holding NO image yet.
+		*
+		* It used to be born with an allocated slot and an empty entry, which is what put
+		* a blank tile at position 1 of a new rule's strip — and, worse, stopped the
+		* picture the user added next from being the first one (a rule paints its first
+		* image). A rule with no pictures is a valid state: `ruleCanPaint` (./schema) skips
+		* it — it has no image and no color yet — until either arrives, and the slot is
+		* allocated when the first picture does.
+		*/
+		function newRule(id) {
 			return {
 				id,
-				slot,
+				images: [],
 				match: "",
 				enabled: true,
 				color: null,
 				bgMode: "fit",
 				wallpaperOpacity: 1,
 				blur: 0,
-				bgState: { ...DEFAULT_BG_STATE }
+				rotate: defaultRotation()
 			};
 		}
-		/** First free image slot (`m1`, `m2`, …). */
+		/** Every slot any rule owns — the user's rules and the holiday entries alike. */
+		function takenSlots() {
+			const taken = /* @__PURE__ */ new Set();
+			for (const rule of cfg.rules) for (const slot of ruleSlots(rule)) taken.add(slot);
+			for (const rule of cfg.holidays.items) for (const slot of ruleSlots(rule)) taken.add(slot);
+			return taken;
+		}
+		/**
+		* First free image slot (`m1`, `m2`, …).
+		*
+		* Scans EVERY slot in the config, not just the primary one of each rule: with
+		* several images per rule, "the slots this file already uses" is the only set
+		* that can be safely handed out, and a collision here would silently point two
+		* cards at the same bytes (and let one card's delete orphan the other).
+		*/
 		function nextSlot() {
-			const taken = new Set(cfg.rules.map((r) => r.slot));
+			const taken = takenSlots();
 			for (let i = 1; i < 1e3; i++) {
 				const slot = `m${i}`;
 				if (!taken.has(slot)) return slot;
@@ -776,11 +1048,24 @@ window.__ModuleLoader__.load({
 			}
 			return `r${Date.now()}`;
 		}
+		/** Patch one rule's rotation block, through the shared sanitizer so a live edit
+		*  can never hold a value the next load would clamp differently. */
+		function patchRotation(rule, patch) {
+			rule.rotate = normalizeRotation({
+				...rule.rotate,
+				...patch
+			});
+		}
+		/** Re-sanitize one rule in place, so what the UI holds equals what would persist. */
+		function normalizeRuleInPlace(rule) {
+			const normalized = normalizeRule(rule);
+			if (normalized !== null) Object.assign(rule, normalized);
+		}
 		function rHasColor() {
-			return activeRule()?.color !== null && activeRule() !== null;
+			return activeColor() !== null;
 		}
 		function rColor() {
-			return activeRule()?.color ?? [
+			return activeColor() ?? [
 				220,
 				.55,
 				.25
@@ -795,13 +1080,22 @@ window.__ModuleLoader__.load({
 		function rBl() {
 			return clamp$1(activeRule()?.blur, 0, 60, 0);
 		}
+		/** Framing of the CURRENT image (per image, see BgImage). */
 		function rBgState() {
-			return activeRule()?.bgState ?? DEFAULT_BG_STATE;
+			return activeImage()?.bgState ?? DEFAULT_BG_STATE;
 		}
-		/** Paintable URL of the active rule's image, or null when it has none. */
+		/** Rotation of the active rule; the shipped default when nothing is active. */
+		function rRotation() {
+			return activeRule()?.rotate ?? defaultRotation();
+		}
+		/** Cross-fade duration the active rule asks for, in ms (0 = hard cut). */
+		function rFadeMs() {
+			return rRotation().fadeMs;
+		}
+		/** Paintable URL of the active rule's CURRENT image, or null when it has none. */
 		function rWp() {
-			const rule = activeRule();
-			return rule === null ? null : displayImageOf(rule.slot);
+			const slot = activeSlot();
+			return slot === "" ? null : displayImageOf(slot);
 		}
 		function rOps() {
 			const o = cfg.opacities ?? {};
@@ -836,12 +1130,126 @@ window.__ModuleLoader__.load({
 				activeRuleId = null;
 				activeMatched = false;
 			}
+			rotIndex = 0;
+		}
+		//#endregion
+		//#region src/client/rotation.ts
+		/** Dwell-time presets the settings UI offers, in ms. */
+		const ROTATE_PRESETS = [
+			{
+				ms: 1e4,
+				key: "rotEvery10s"
+			},
+			{
+				ms: 3e4,
+				key: "rotEvery30s"
+			},
+			{
+				ms: 6e4,
+				key: "rotEvery1m"
+			},
+			{
+				ms: 3e5,
+				key: "rotEvery5m"
+			},
+			{
+				ms: 18e5,
+				key: "rotEvery30m"
+			},
+			{
+				ms: 36e5,
+				key: "rotEvery1h"
+			}
+		];
+		/**
+		* The index to paint after the current one, or null when there is nowhere to go
+		* (fewer than two images — the caller must not start a timer at all then).
+		*
+		* `order` walks the list and wraps; `shuffle` picks uniformly among every index
+		* EXCEPT the current one, because landing on the same image reads as a missed
+		* tick. `current` outside the list is treated as 0 rather than trusted: it comes
+		* from the UI as often as from the timer, and a stale index must not be able to
+		* index past the end.
+		*
+		* `rand` is injectable so the shuffle branch is testable without stubbing a
+		* global.
+		*/
+		function nextIndex(len, order, current, rand = Math.random) {
+			if (!Number.isFinite(len) || len < 2) return null;
+			const count = Math.floor(len);
+			const cur = Number.isFinite(current) && current >= 0 && current < count ? Math.floor(current) : 0;
+			if (order === "shuffle") {
+				const roll = Math.min(Math.floor(Math.max(rand(), 0) * (count - 1)), count - 2);
+				return roll >= cur ? roll + 1 : roll;
+			}
+			return (cur + 1) % count;
+		}
+		/**
+		* Whether a rotation is worth running: two images, the switch on, and a positive
+		* dwell time. Kept here (rather than at the call site) so the UI's "rotating"
+		* badge and the timer agree by construction — a badge that says "rotating" while
+		* no timer exists is the one failure this feature can produce silently.
+		*/
+		function isRotating(len, enabled, intervalMs) {
+			return enabled && len >= 2 && Number.isFinite(intervalMs) && intervalMs > 0;
+		}
+		//#endregion
+		//#region src/client/repaint.ts
+		/**
+		* The repaint decision, as a pure function.
+		*
+		* Every edit to a rule ends with the same question: does the interface have to be
+		* repainted, or is refreshing the panel's readout enough? Repainting is the
+		* expensive half (the theme skin is re-registered, the wallpaper layer is
+		* rewritten, the host's theme is switched), so it must not be done for a rule
+		* that is not the one on screen — but it MUST be done the moment the edit
+		* changes what should be on screen.
+		*
+		* The naive test — "is the edited rule the active one?" — is wrong in exactly the
+		* case that kept being reported as "更新的不太及时，只有我动调色盘或者切模型的时候
+		* 才出现": an edit that CREATES the winner. Uploading a rule's first picture, or
+		* an auto-extracted color landing on a rule that had none, makes that rule
+		* paintable *through that very edit* (see `ruleCanPaint`), so the rule is not the
+		* active one at the moment of the check; the wallpaper and the skin then only
+		* showed up later, when an unrelated drag or model switch happened to re-run the
+		* resolution.
+		*
+		* Sampling the winner on BOTH sides of the edit is what makes such a change land
+		* at once, and `editedId === winnerAfter` additionally covers the edit that does
+		* not move the resolution but changes the look of the rule that IS painting (a
+		* color, a slider, a framing).
+		*
+		* `null` is "nothing of ours is painting" (the interface falls back to the host's
+		* own look), which is a winner like any other id.
+		*
+		* Kept free of imports on purpose: `scripts/repaint-check.ts` exercises it on
+		* plain node, the same way `rotation.ts` is exercised. A rule's `color`/`match`
+		* are the inputs that make the resolution move, which is why they are the fields
+		* whose write paths all end here.
+		*/
+		function shouldRepaint(editedId, winnerBefore, winnerAfter) {
+			return winnerAfter === editedId || winnerAfter !== winnerBefore;
 		}
 		//#endregion
 		//#region src/client/rpc.ts
 		const RPC_CHANNEL = "/dsh-background-by-model";
 		const RPC_NS = "dshBackgroundByModel";
 		const rpcEndpoint = (method) => `${RPC_NS}/${method}`;
+		let hostShape = "unknown";
+		let warnedLegacy = false;
+		/** Whether this bundle may write its config to the host it is talking to. */
+		function canWriteConfig() {
+			return hostShape !== "legacy";
+		}
+		/** Whether the running host process is older than this client bundle. */
+		function hostIsLegacy() {
+			return hostShape === "legacy";
+		}
+		function holdWrite() {
+			if (warnedLegacy) return;
+			warnedLegacy = true;
+			console.warn("dsh-background-by-model: the running host is an older build that cannot read the multi-image config shape — holding config writes so its sanitizer cannot drop this profile's rules. Restart DSH to load the new node half.");
+		}
 		let rpcCallFn = null;
 		function initRpc(call) {
 			rpcCallFn = call;
@@ -870,6 +1278,10 @@ window.__ModuleLoader__.load({
 		const SAVE_DEBOUNCE_MS = 250;
 		let saveTimer;
 		function saveConfig() {
+			if (!canWriteConfig()) {
+				holdWrite();
+				return;
+			}
 			if (saveTimer !== void 0) window.clearTimeout(saveTimer);
 			saveTimer = window.setTimeout(() => {
 				saveTimer = void 0;
@@ -880,10 +1292,18 @@ window.__ModuleLoader__.load({
 			if (saveTimer === void 0) return;
 			window.clearTimeout(saveTimer);
 			saveTimer = void 0;
+			if (!canWriteConfig()) {
+				holdWrite();
+				return;
+			}
 			rpcCall("writeConfig", { config: cfg });
 		}
 		/** Persist the current config immediately (no debounce). */
 		function persistConfig() {
+			if (!canWriteConfig()) {
+				holdWrite();
+				return;
+			}
 			rpcCall("writeConfig", { config: cfg });
 		}
 		/** Load the persisted config plus the list of stored image slots. */
@@ -892,9 +1312,13 @@ window.__ModuleLoader__.load({
 			if (data === null || typeof data !== "object") return null;
 			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 = schema === null ? "legacy" : schema >= 4 ? "current" : "legacy";
+			if (hostShape === "legacy") holdWrite();
 			return {
 				config: d.config,
-				slots
+				slots,
+				schema
 			};
 		}
 		/** Read one rule image as a data URL (null when the slot is empty). */
@@ -1371,6 +1795,9 @@ window.__ModuleLoader__.load({
 .dab-wheel-glow{position:absolute;width:230px;height:230px;border-radius:50%;filter:blur(48px);opacity:.2;background:var(--c,#888);pointer-events:none;transition:background .4s ease}
 .dab-wheel{position:relative;cursor:crosshair;border-radius:50%;box-shadow:0 12px 32px -14px rgba(0,0,0,.4)}
 .dab-hint{font-size:11.5px;line-height:1.55;color:var(--dsw-alias-label-tertiary);padding:0 4px}
+/* The "your edits are being held" notice: it reports a state the user has to act
+   on, so it is tinted like a warning rather than left as grey hint text. */
+.dab-stale{color:var(--dsw-alias-state-error-primary);background:color-mix(in srgb,var(--dsw-alias-state-error-primary) 10%,transparent);border:1px solid color-mix(in srgb,var(--dsw-alias-state-error-primary) 35%,transparent);border-radius:9px;padding:8px 10px}
 
 /* ── precise color inputs ────────────────────────────────────────────────── */
 .dab-inputs{display:flex;flex-direction:column;gap:10px;min-width:172px}
@@ -1505,12 +1932,60 @@ window.__ModuleLoader__.load({
 .dab-icon-btn:disabled{opacity:.35;cursor:not-allowed}
 .dab-icon-btn-danger:hover:not(:disabled){color:var(--dsw-alias-state-error-primary);border-color:var(--dsw-alias-state-error-primary)}
 .dab-rule-body{margin-top:13px;display:flex;flex-direction:column;gap:13px}
-.dab-rule-thumb{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l2);cursor:pointer}
+.dab-rule-thumb{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l2)}
 .dab-rule-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
 .dab-rule-thumb-empty{position:absolute;inset:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1.5px dashed var(--dsw-alias-border-l2);border-radius:9px;color:var(--dsw-alias-label-tertiary);font-size:12px;text-align:center;padding:0 10px}
-.dab-rule-thumb.is-over .dab-rule-thumb-empty{border-color:var(--dsw-alias-brand-primary);color:var(--dsw-alias-brand-primary)}
+/* The empty tile is the upload button while the rule has no picture at all, so
+   it is a real <button> (focusable, keyboard-reachable) reset down to the box the
+   plain preview occupies — a button brings its own padding, font and border. The
+   dashed frame it looks like is .dab-rule-thumb-empty, which is why the hover and
+   the drag highlight have to reach it through a descendant selector too. */
+.dab-rule-thumb-add{display:block;width:100%;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;transition:border-color .2s,background .2s}
+.dab-rule-thumb-add:hover,.dab-rule-thumb-add.is-over{border-color:var(--dsw-alias-brand-primary);background:color-mix(in srgb,var(--dsw-alias-brand-primary) 6%,var(--dsw-alias-bg-layer-2))}
+.dab-rule-thumb-add:hover .dab-rule-thumb-empty,.dab-rule-thumb-add.is-over .dab-rule-thumb-empty{border-color:var(--dsw-alias-brand-primary);color:var(--dsw-alias-brand-primary)}
+.dab-rule-thumb-add:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
 .dab-rule-cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start}
 .dab-rule-section-title{font-size:12px;font-weight:600;margin-bottom:9px;color:var(--dsw-alias-label-secondary,var(--dsw-alias-label-tertiary))}
+
+/* ── image strip (multi-image rules) ─────────────────────────────────────── */
+/* A horizontally scrolling row of thumbnails: the one open for editing is
+   ringed, and the one the wallpaper is actually painting carries a live dot —
+   but deliberately NO ring of its own. Two tiles ringed at once read as "two
+   things are selected", which is the one question a row of near-identical
+   thumbnails must not leave open: being on screen is the dot, and nothing
+   else. FILES dropped here are added, which is why the container's border
+   reacts to a drag; a TILE dragged across the row reorders it instead, and that
+   is what the is-dragging / dab-strip-bar pair below is for. */
+.dab-strip{display:flex;gap:7px;margin-top:9px;padding:7px;border-radius:12px;border:1.5px dashed var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);overflow-x:auto;scrollbar-width:thin}
+.dab-strip.is-over{border-color:var(--dsw-alias-brand-primary);background:color-mix(in srgb,var(--dsw-alias-brand-primary) 8%,transparent)}
+.dab-strip-item{position:relative;flex:none;width:62px;height:44px;padding:0;border-radius:8px;overflow:hidden;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);cursor:grab;user-select:none;transition:border-color .2s,box-shadow .2s,transform .18s}
+.dab-strip-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
+.dab-strip-item:hover{transform:translateY(-1px);border-color:var(--dsw-alias-brand-primary)}
+.dab-strip-item.is-sel{border-color:var(--dsw-alias-brand-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--dsw-alias-brand-primary) 40%,transparent)}
+/* The tile being dragged out of the row, and the 2px bar that says where it will
+   land. The bar is drawn INSIDE the tile it precedes (at its left edge) or inside
+   the last tile (at its right edge, for a drop past the end): a bar as its own flex
+   item would push the tiles sideways, and a target that slides away as the pointer
+   approaches it is how a drop ends up one slot off. */
+.dab-strip-item.is-dragging{cursor:grabbing;opacity:.45;transform:none;border-style:dashed}
+.dab-strip-bar{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--dsw-alias-brand-primary);z-index:2}
+.dab-strip-bar.is-end{left:auto;right:0}
+.dab-strip-wait{position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 4px,color-mix(in srgb,var(--dsw-alias-label-tertiary) 14%,transparent) 4px 8px)}
+.dab-strip-num{position:absolute;left:3px;bottom:2px;font-family:var(--dab-mono);font-size:9.5px;line-height:1;padding:1px 4px;border-radius:5px;background:rgba(0,0,0,.45);color:#fff}
+.dab-strip-live{position:absolute;right:3px;top:3px;width:7px;height:7px;border-radius:50%;background:var(--dsw-alias-brand-primary);box-shadow:0 0 0 2px rgba(0,0,0,.35);animation:dab-pulse 1.8s ease-in-out infinite}
+/* Each image's OWN theme color, when it has one. It shares the right edge with
+   the live dot but sits at the bottom, where nothing else is: the item number is
+   bottom-LEFT. Two rings (dark outside, light inside) keep the swatch readable
+   over a dark and a light thumbnail alike. */
+.dab-strip-dot{position:absolute;right:3px;bottom:3px;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.35)}
+.dab-strip-add{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:62px;height:44px;border-radius:8px;border:1.5px dashed var(--dsw-alias-border-l2);background:transparent;color:var(--dsw-alias-label-tertiary);font-size:9.5px;line-height:1.15;cursor:pointer;transition:border-color .2s,color .2s}
+.dab-strip-add:hover{border-color:var(--dsw-alias-brand-primary);color:var(--dsw-alias-brand-primary)}
+.dab-strip-pos{display:inline-flex;align-items:center;font-family:var(--dab-mono);font-size:11px;color:var(--dsw-alias-label-tertiary);padding:0 4px}
+
+/* ── rotation panel ──────────────────────────────────────────────────────── */
+.dab-rot-panel{margin-top:10px;padding:12px;border-radius:12px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2)}
+.dab-num-sec{flex:none;width:88px;min-width:0}
+
 @container (max-width:760px){.dab-rule-cols{grid-template-columns:1fr}}
 
 /* ── host self-check ─────────────────────────────────────────────────────── */
@@ -1570,6 +2045,9 @@ window.__ModuleLoader__.load({
 @keyframes dab-toast-in{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
 @keyframes dab-zoom-in{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:none}}
 @keyframes dab-flow{to{background-position:300% 50%}}
+/* The strip's "this is the image on screen" dot. It is the only marker that says
+   the rotation is alive, so it breathes rather than merely sitting there. */
+@keyframes dab-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.72)}}
 
 /* ── responsive & motion preferences ─────────────────────────────────────── */
 @container (max-width:620px){
@@ -2315,7 +2793,6 @@ window.__ModuleLoader__.load({
 				themeObserver = null;
 			};
 		}
-		const FADE_MS = 320;
 		let layers = null;
 		/** Index of the layer the user is looking at. */
 		let front = 0;
@@ -2521,7 +2998,8 @@ window.__ModuleLoader__.load({
 			from.el.style.zIndex = "0";
 			paintLayer(target, url);
 			applyWpEffects();
-			if (!canFade(from)) {
+			const fadeMs = rFadeMs();
+			if (!canFade(from) || fadeMs <= 0) {
 				el.style.opacity = "1";
 				front = idx;
 				clearLayer(from);
@@ -2531,10 +3009,10 @@ window.__ModuleLoader__.load({
 			pending = idx;
 			requestAnimationFrame(() => {
 				if (pending !== idx || layers === null) return;
-				el.style.transition = `opacity ${FADE_MS}ms ease`;
+				el.style.transition = `opacity ${fadeMs}ms ease`;
 				el.style.opacity = "1";
 			});
-			fadeTimer = window.setTimeout(() => finishFade(idx), 480);
+			fadeTimer = window.setTimeout(() => finishFade(idx), fadeMs + 160);
 		}
 		function applyWpEffects() {
 			if (wpEl === null || layers === null) return;
@@ -2599,9 +3077,9 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/client/modelbg.ts
-		/** Rules that can actually paint: enabled and carrying an image slot. */
+		/** Rules that can actually paint: see `ruleCanPaint` (./schema). */
 		function usable(rules) {
-			return rules.filter((r) => r.enabled && r.slot !== "");
+			return rules.filter(ruleCanPaint);
 		}
 		/**
 		* Resolve the rule for one model text.
@@ -2609,6 +3087,10 @@ window.__ModuleLoader__.load({
 		* Top→bottom, first case-insensitive substring hit wins; an empty `match` never
 		* hits on its own. When nothing hits, the FIRST usable rule is the fallback
 		* (rule 1 deliberately doubles as both a matcher and the fallback).
+		*
+		* "Usable" is `ruleCanPaint` — an image, or a theme color of its own — so a rule
+		* whose pictures were all removed still holds the models it matches (and paints
+		* its color alone) instead of quietly handing them to the next rule.
 		*/
 		function matchRule(rules, modelText) {
 			const list = usable(rules);
@@ -4232,6 +4714,11 @@ window.__ModuleLoader__.load({
 					className: "dab-card dab-rise",
 					style: { "--d": 1 },
 					children: [
+						store.hostStale ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dab-hint dab-stale",
+							style: { marginBottom: 10 },
+							children: t("hostStaleHint")
+						}) : null,
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "dab-swatch-title",
 							children: t("tryoutTitle")
@@ -4289,15 +4776,6 @@ window.__ModuleLoader__.load({
 					className: "dab-rise",
 					style: { "--d": 2 },
 					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "dab-swatch-title",
-							children: t("rulesTitle")
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "dab-hint",
-							style: { marginBottom: 11 },
-							children: t("rulesHint")
-						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "dab-chip-row",
 							style: {
@@ -4317,11 +4795,6 @@ window.__ModuleLoader__.load({
 								children: t("autoExtract")
 							})]
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "dab-hint",
-							style: { marginBottom: 11 },
-							children: t("autoExtractHint")
-						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "dab-rules",
 							children: rules.map((rule, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuleCard, {
@@ -4329,6 +4802,7 @@ window.__ModuleLoader__.load({
 								rule,
 								index: i,
 								total: rules.length,
+								liveIndex: rule.id === store.activeRuleId ? store.rotIndex : -1,
 								active: rule.id === store.activeRuleId,
 								notify
 							}, rule.id))
@@ -4346,10 +4820,16 @@ window.__ModuleLoader__.load({
 				})
 			] });
 		}
-		function RuleCard({ p, rule, index, total, active, notify }) {
+		function RuleCard({ p, rule, index, total, active, liveIndex, notify }) {
 			const { t } = p;
 			const [open, setOpen] = (0, react.useState)(active);
 			const [dragOver, setDragOver] = (0, react.useState)(false);
+			const pendingDrag = (0, react.useRef)(null);
+			/** Insertion slot of the drag in flight (index of the tile it goes BEFORE). */
+			const dragAt = (0, react.useRef)(null);
+			const [drop, setDrop] = (0, react.useState)(null);
+			/** Set while a drag is real, so the click that ends it is not also a selection. */
+			const draggedRef = (0, react.useRef)(false);
 			const [urlOpen, setUrlOpen] = (0, react.useState)(false);
 			const [urlVal, setUrlVal] = (0, react.useState)("");
 			const [urlBusy, setUrlBusy] = (0, react.useState)(false);
@@ -4357,49 +4837,98 @@ window.__ModuleLoader__.load({
 			const [editorOpen, setEditorOpen] = (0, react.useState)(false);
 			const [pickerOpen, setPickerOpen] = (0, react.useState)(false);
 			const [extracting, setExtracting] = (0, react.useState)(false);
+			const [secDraft, setSecDraft] = (0, react.useState)(null);
+			/** Whether the next file picked replaces the selected image or is added. */
+			const [replace, setReplace] = (0, react.useState)(false);
 			const fileRef = (0, react.useRef)(null);
-			const url = p.imageOf(rule.slot);
-			const [h, s, l] = rule.color ?? SEED_COLOR;
+			const [sel, setSel] = (0, react.useState)(0);
+			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);
+			const ownColor = image === void 0 ? rule.color : image.color;
+			const setColor = (color) => {
+				if (image === void 0) p.setRule(rule.id, { color });
+				else p.setImageColor(rule.id, image.slot, color);
+			};
+			const [h, s, l] = ownColor ?? SEED_COLOR;
 			const wheel = hslToHsv(h, s, l);
+			(0, react.useEffect)(() => {
+				if (open) p.loadRuleImages(rule.id);
+			}, [
+				open,
+				rule.id,
+				rule.images.length,
+				p
+			]);
 			const onColor = (nh, ns, nl) => {
 				const [sh, ss, sl] = hsvToHsl(nh, ns, nl);
-				p.setRule(rule.id, { color: [
+				setColor([
 					sh,
 					ss,
 					sl
-				] });
+				]);
 			};
-			const onFile = (f) => {
-				readImg(f, (d) => {
-					if (d !== null) p.setRuleImage(rule.id, d);
+			const onFiles = (files) => {
+				const list = files.filter((f) => f.type.startsWith("image/"));
+				if (list.length === 0) return;
+				if (replace) {
+					const slot = rule.images[selIdx]?.slot;
+					if (slot !== void 0) readImg(list[0], (d) => {
+						if (d !== null) p.setRuleImage(rule.id, slot, d);
+					});
+					return;
+				}
+				const out = [];
+				const first = rule.images.length;
+				let pending = list.length;
+				list.forEach((f, i) => {
+					readImg(f, (d) => {
+						if (d !== null) out[i] = d;
+						pending--;
+						if (pending === 0) {
+							p.addRuleImages(rule.id, out.filter((x) => typeof x === "string"));
+							setSel(first);
+						}
+					});
 				});
 			};
 			const onDrop = (e) => {
 				e.preventDefault();
 				setDragOver(false);
-				const f = e.dataTransfer.files?.[0];
-				if (f && f.type.startsWith("image/")) onFile(f);
+				const files = Array.from(e.dataTransfer.files ?? []);
+				if (files.length > 0) onFiles(files);
 			};
 			const applyUrl = async () => {
-				const u = urlVal.trim();
-				if (!/^https?:\/\//i.test(u)) {
+				const urls = urlVal.split(/\s+/).map((u) => u.trim()).filter((u) => u !== "");
+				if (urls.length === 0) {
+					setUrlErr(t("ruleUrlBadHttp"));
+					return;
+				}
+				if (urls.some((u) => !/^https?:\/\//i.test(u))) {
 					setUrlErr(t("ruleUrlBadHttp"));
 					return;
 				}
 				setUrlBusy(true);
 				setUrlErr(null);
-				const res = await p.setRuleImageFromUrl(rule.id, u);
+				const first = rule.images.length;
+				for (const u of urls) {
+					const res = await p.addRuleImageFromUrl(rule.id, u);
+					if (!res.ok) {
+						setUrlBusy(false);
+						setUrlErr(res.error === "invalid url" || res.error === "unsupported scheme" ? t("ruleUrlBadHttp") : res.error ?? t("ruleUrlFail"));
+						return;
+					}
+				}
 				setUrlBusy(false);
-				if (res.ok) {
-					setUrlOpen(false);
-					setUrlVal("");
-				} else setUrlErr(res.error === "invalid url" || res.error === "unsupported scheme" ? t("ruleUrlBadHttp") : res.error ?? t("ruleUrlFail"));
+				setUrlOpen(false);
+				setUrlVal("");
+				setSel(first);
 			};
 			const onExtract = async () => {
-				if (url === null || extracting) return;
+				if (url === null || extracting || image === void 0) return;
 				setExtracting(true);
 				try {
-					const ok = await p.extractColor(rule.id);
+					const ok = await p.extractColor(rule.id, image.slot);
 					notify(ok ? t("extractDone") : t("extractFail"), ok);
 				} catch {
 					notify(t("extractFail"), false);
@@ -4414,17 +4943,90 @@ window.__ModuleLoader__.load({
 			* extract button runs and returns false when nothing vivid was found.)
 			*/
 			const onPickColor = async () => {
-				if (url !== null) {
+				if (url !== null && image !== void 0) {
 					setExtracting(true);
 					try {
-						if (await p.extractColor(rule.id)) return;
+						if (await p.extractColor(rule.id, image.slot)) return;
 					} catch {} finally {
 						setExtracting(false);
 					}
 				}
-				p.setRule(rule.id, { color: SEED_COLOR });
+				setColor(SEED_COLOR);
 			};
 			const cls = `dab-rule${active ? " is-active" : ""}${rule.enabled ? "" : " is-off"}`;
+			const rotatable = rule.images.length >= 2;
+			const preset = ROTATE_PRESETS.find((x) => x.ms === rule.rotate.intervalMs);
+			const selSlot = image?.slot ?? null;
+			/** How far the pointer must travel before a click turns into a drag. */
+			const DRAG_SLOP = 5;
+			const tileDown = (i, slot) => (e) => {
+				if (e.button !== 0 || e.pointerType === "touch") return;
+				e.currentTarget.setPointerCapture(e.pointerId);
+				pendingDrag.current = {
+					x: e.clientX,
+					y: e.clientY,
+					from: i,
+					slot,
+					id: e.pointerId
+				};
+				draggedRef.current = false;
+			};
+			const tileMove = (e) => {
+				const pen = pendingDrag.current;
+				if (pen === null || pen.id !== e.pointerId) return;
+				const cur = dragAt.current;
+				if (cur === null) {
+					if (Math.abs(e.clientX - pen.x) + Math.abs(e.clientY - pen.y) < DRAG_SLOP) return;
+					draggedRef.current = true;
+				}
+				const strip = e.currentTarget.parentElement;
+				const list = strip === null ? [] : [...strip.querySelectorAll(".dab-strip-item")];
+				let at = list.length;
+				for (let i = 0; i < list.length; i++) {
+					const box = list[i].getBoundingClientRect();
+					if (e.clientX < box.left + box.width / 2) {
+						at = i;
+						break;
+					}
+				}
+				if (cur !== null && cur.at === at) return;
+				dragAt.current = {
+					from: pen.from,
+					at
+				};
+				setDrop({
+					from: pen.from,
+					at
+				});
+			};
+			/** End a drag: commit the new order, or just forget it on a cancel. */
+			const tileUp = (commit) => (e) => {
+				const pen = pendingDrag.current;
+				pendingDrag.current = null;
+				if (pen !== null && e.currentTarget.hasPointerCapture(pen.id)) e.currentTarget.releasePointerCapture(pen.id);
+				const end = dragAt.current;
+				dragAt.current = null;
+				setDrop(null);
+				if (!commit || pen === null || end === null) return;
+				const to = end.at > pen.from ? end.at - 1 : end.at;
+				if (to === pen.from) return;
+				p.moveRuleImageTo(rule.id, pen.slot, to);
+				setSel(to);
+			};
+			const removeSel = () => {
+				if (selSlot === null) return;
+				const at = selIdx;
+				p.removeRuleImage(rule.id, selSlot);
+				setSel(Math.max(0, Math.min(at, rule.images.length - 2)));
+			};
+			/** Commit the custom dwell time the moment it is typed (seconds → ms). */
+			const commitSeconds = () => {
+				if (secDraft === null) return;
+				const secs = Number(secDraft.trim());
+				setSecDraft(null);
+				if (!Number.isFinite(secs) || secs <= 0) return;
+				p.setRuleRotation(rule.id, { intervalMs: Math.round(secs * 1e3) });
+			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 				className: cls,
 				children: [
@@ -4492,33 +5094,126 @@ window.__ModuleLoader__.load({
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "dab-rule-cols",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: `dab-rule-thumb${dragOver ? " is-over" : ""}`,
-									onClick: () => fileRef.current?.click(),
+								url !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "dab-rule-thumb",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+										src: url,
+										alt: "",
+										draggable: false
+									})
+								}) : rule.images.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: `dab-rule-thumb dab-rule-thumb-add${dragOver ? " is-over" : ""}`,
+									title: t("rotAddImage"),
 									onDragOver: (e) => {
 										e.preventDefault();
 										setDragOver(true);
 									},
 									onDragLeave: () => setDragOver(false),
 									onDrop,
-									children: url !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-										src: url,
-										alt: "",
-										draggable: false
-									}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									onClick: () => {
+										setReplace(false);
+										fileRef.current?.click();
+									},
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										className: "dab-rule-thumb-empty",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadIcon, { size: 18 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("rotAddImage") })]
+									})
+								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "dab-rule-thumb",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 										className: "dab-rule-thumb-empty",
 										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadIcon, { size: 18 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("ruleNoImage") })]
 									})
 								}),
+								rule.images.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: `dab-strip${dragOver ? " is-over" : ""}`,
+									onDragOver: (e) => {
+										e.preventDefault();
+										setDragOver(true);
+									},
+									onDragLeave: () => setDragOver(false),
+									onDrop,
+									children: [rule.images.map((img, i) => {
+										const thumb = p.imageOf(img.slot);
+										return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+											type: "button",
+											className: `dab-strip-item${i === selIdx ? " is-sel" : ""}${drop !== null && drop.from === i ? " is-dragging" : ""}`,
+											title: `${i + 1} / ${rule.images.length} · ${t("rotDragHint")} · ${t("rotDblHint")}`,
+											onPointerDown: tileDown(i, img.slot),
+											onPointerMove: tileMove,
+											onPointerUp: tileUp(true),
+											onPointerCancel: tileUp(false),
+											onClick: () => {
+												if (draggedRef.current) {
+													draggedRef.current = false;
+													return;
+												}
+												setSel(i);
+											},
+											onDoubleClick: () => {
+												if (!active) {
+													notify(t("rotNextInactive"));
+													return;
+												}
+												p.showRuleImage(rule.id, img.slot);
+											},
+											children: [
+												thumb !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+													src: thumb,
+													alt: "",
+													draggable: false
+												}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "dab-strip-wait" }),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dab-strip-num",
+													children: i + 1
+												}),
+												drop !== null && drop.at === i ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "dab-strip-bar" }) : null,
+												drop !== null && drop.at === rule.images.length && i === rule.images.length - 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "dab-strip-bar is-end" }) : null,
+												img.color !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dab-strip-dot",
+													title: toHex(hslToRgb(img.color[0], img.color[1], img.color[2])).toUpperCase(),
+													style: { background: `hsl(${img.color[0]} ${Math.round(img.color[1] * 100)}% ${Math.round(img.color[2] * 100)}%)` }
+												}) : null,
+												liveIndex === i ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dab-strip-live",
+													title: t("rotShowing")
+												}) : null
+											]
+										}, img.slot);
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+										type: "button",
+										className: "dab-strip-add",
+										title: t("rotAddImage"),
+										onClick: () => {
+											setReplace(false);
+											fileRef.current?.click();
+										},
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadIcon, { size: 16 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("rotAddImage") })]
+									})]
+								}) : null,
 								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 									className: "dab-chip-row",
 									style: { marginTop: 10 },
 									children: [
+										rule.images.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+											className: "dab-strip-pos",
+											children: [
+												t("rotPos"),
+												" ",
+												selIdx + 1,
+												" / ",
+												rule.images.length
+											]
+										}) : null,
 										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 											type: "button",
 											className: "dab-btn",
-											onClick: () => fileRef.current?.click(),
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadIcon, { size: 13 }), url === null ? t("rulePickImage") : t("ruleChangeImage")]
+											onClick: () => {
+												setReplace(false);
+												fileRef.current?.click();
+											},
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadIcon, { size: 13 }), t("rotAddImage")]
 										}),
 										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 											type: "button",
@@ -4526,16 +5221,19 @@ window.__ModuleLoader__.load({
 											onClick: () => setUrlOpen((o) => !o),
 											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkIcon, { size: 13 }), t("ruleFromUrl")]
 										}),
-										url !== null && rule.bgMode === "fit" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+										selSlot !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 											type: "button",
-											className: "dab-btn",
-											onClick: () => setEditorOpen(true),
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditIcon, { size: 13 }), t("ruleFramingEdit")]
+											className: "dab-btn dab-btn-ghost",
+											onClick: () => {
+												setReplace(true);
+												fileRef.current?.click();
+											},
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadIcon, { size: 13 }), t("rotReplaceImage")]
 										}) : null,
-										url !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+										selSlot !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 											type: "button",
 											className: "dab-btn dab-btn-ghost dab-btn-danger",
-											onClick: () => p.setRuleImage(rule.id, null),
+											onClick: removeSel,
 											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrashIcon, { size: 13 }), t("ruleImageRemove")]
 										}) : null
 									]
@@ -4590,24 +5288,168 @@ window.__ModuleLoader__.load({
 									},
 									children: urlErr
 								}) : null,
-								url === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								rule.images.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 									className: "dab-hint",
 									style: { marginTop: 8 },
-									children: t("ruleEmptyHint")
+									children: rule.color === null ? t("ruleEmptyHint") : t("ruleColorOnlyHint")
 								}) : null,
+								rule.images.length > 0 && url === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "dab-hint",
+									style: { marginTop: 8 },
+									children: t("ruleImagePendingHint")
+								}) : null,
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									style: { marginTop: 14 },
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											className: "dab-rule-section-title",
+											children: t("rotTitle")
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "dab-chip-row",
+											style: { alignItems: "center" },
+											children: [
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+													type: "button",
+													className: `dab-toggle${rule.rotate.enabled ? " is-on" : ""}`,
+													role: "switch",
+													"aria-checked": rule.rotate.enabled,
+													title: t("rotEnable"),
+													disabled: !rotatable,
+													onClick: () => p.setRuleRotation(rule.id, { enabled: !rule.rotate.enabled }),
+													children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "dab-toggle-knob" })
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dab-hint",
+													style: { padding: 0 },
+													children: t("rotEnable")
+												}),
+												!rotatable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dab-hint",
+													style: { padding: 0 },
+													children: t("rotNeedTwo")
+												}) : null
+											]
+										}),
+										rotatable && rule.rotate.enabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "dab-rot-panel",
+											children: [
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+													className: "dab-rule-section-title",
+													children: t("rotEvery")
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+													className: "dab-chip-row",
+													children: [
+														ROTATE_PRESETS.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+															type: "button",
+															className: `dab-chip${item.ms === rule.rotate.intervalMs ? " is-active" : ""}`,
+															onClick: () => p.setRuleRotation(rule.id, { intervalMs: item.ms }),
+															children: t(item.key)
+														}, item.ms)),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+															type: "number",
+															className: "dab-num dab-num-sec",
+															min: 5,
+															max: 86400,
+															step: 5,
+															value: secDraft ?? (preset === void 0 ? Math.round(rule.rotate.intervalMs / 1e3) : ""),
+															placeholder: t("rotCustom"),
+															onChange: (e) => setSecDraft(e.target.value),
+															onBlur: commitSeconds,
+															onKeyDown: (e) => {
+																if (e.key === "Enter") {
+																	e.preventDefault();
+																	commitSeconds();
+																}
+															}
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+															className: "dab-hint",
+															style: { padding: 0 },
+															children: t("rotSeconds")
+														})
+													]
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+													className: "dab-rule-section-title",
+													style: { marginTop: 12 },
+													children: t("rotOrder")
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+													className: "dab-chip-row",
+													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+														type: "button",
+														className: `dab-chip${rule.rotate.order === "order" ? " is-active" : ""}`,
+														onClick: () => p.setRuleRotation(rule.id, { order: "order" }),
+														children: t("rotOrderSeq")
+													}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+														type: "button",
+														className: `dab-chip${rule.rotate.order === "shuffle" ? " is-active" : ""}`,
+														onClick: () => p.setRuleRotation(rule.id, { order: "shuffle" }),
+														children: t("rotOrderShuffle")
+													})]
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+													className: "dab-chip-row",
+													style: {
+														marginTop: 12,
+														alignItems: "center"
+													},
+													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+														type: "button",
+														className: `dab-toggle${rule.rotate.advanceOnSwitch ? " is-on" : ""}`,
+														role: "switch",
+														"aria-checked": rule.rotate.advanceOnSwitch,
+														title: t("rotOnSwitch"),
+														onClick: () => p.setRuleRotation(rule.id, { advanceOnSwitch: !rule.rotate.advanceOnSwitch }),
+														children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "dab-toggle-knob" })
+													}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														className: "dab-hint",
+														style: { padding: 0 },
+														children: t("rotOnSwitch")
+													})]
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+													className: "dab-chip-row",
+													style: {
+														marginTop: 12,
+														alignItems: "center"
+													},
+													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+														type: "button",
+														className: "dab-btn",
+														disabled: !active,
+														onClick: () => p.rotateNow(rule.id),
+														children: t("rotNext")
+													}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														className: "dab-hint",
+														style: { padding: 0 },
+														children: active ? `${t("rotShowing")} ${rule.images.length === 0 ? 0 : Math.min(liveIndex + 1, rule.images.length)} / ${rule.images.length}` : t("rotNextInactive")
+													})]
+												})
+											]
+										}) : null
+									]
+								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 									style: { marginTop: 14 },
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 										className: "dab-rule-section-title",
 										children: t("ruleLayout")
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 										className: "dab-chip-row",
-										children: BG_MODES.map((m) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										children: [BG_MODES.map((m) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 											type: "button",
 											className: `dab-chip${rule.bgMode === m.mode ? " is-active" : ""}`,
 											onClick: () => p.setRule(rule.id, { bgMode: m.mode }),
 											children: t(m.key)
-										}, m.mode))
+										}, m.mode)), url !== null && rule.bgMode === "fit" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+											type: "button",
+											className: "dab-btn",
+											onClick: () => setEditorOpen(true),
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditIcon, { size: 13 }), t("ruleFramingEdit")]
+										}) : null]
 									})]
 								})
 							] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
@@ -4615,7 +5457,12 @@ window.__ModuleLoader__.load({
 									className: "dab-rule-section-title",
 									children: t("ruleColor")
 								}),
-								rule.color === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "dab-hint",
+									style: { marginTop: 6 },
+									children: image === void 0 ? t("ruleColorTargetRule") : `${t("ruleColorTargetImage")} ${selIdx + 1} / ${rule.images.length}`
+								}),
+								ownColor === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 										className: "dab-chip-row",
 										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
@@ -4637,10 +5484,18 @@ window.__ModuleLoader__.load({
 										style: { marginTop: 8 },
 										children: t("ruleColorNoneHint")
 									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									url !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 										className: "dab-hint",
 										style: { marginTop: 6 },
 										children: t("ruleColorPickHint")
+									}) : image === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "dab-hint",
+										style: { marginTop: 6 },
+										children: t("ruleColorNoImageHint")
+									}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "dab-hint",
+										style: { marginTop: 6 },
+										children: t("ruleColorPendingImageHint")
 									})
 								] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -4686,7 +5541,7 @@ window.__ModuleLoader__.load({
 											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 												type: "button",
 												className: "dab-btn dab-btn-ghost",
-												onClick: () => p.setRule(rule.id, { color: null }),
+												onClick: () => setColor(null),
 												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SunIcon, { size: 13 }), t("ruleColorNone")]
 											})
 										]
@@ -4699,11 +5554,11 @@ window.__ModuleLoader__.load({
 											className: "dab-swatch",
 											style: { background: `hsl(${sh} ${Math.round(ss * 100)}% ${Math.round(sl * 100)}%)` },
 											title: toHex(hslToRgb(sh, ss, sl)).toUpperCase(),
-											onClick: () => p.setRule(rule.id, { color: [
+											onClick: () => setColor([
 												sh,
 												ss,
 												sl
-											] })
+											])
 										}, i))
 									})
 								] }),
@@ -4742,27 +5597,29 @@ window.__ModuleLoader__.load({
 						ref: fileRef,
 						type: "file",
 						accept: "image/*",
+						multiple: true,
 						style: { display: "none" },
 						onChange: (e) => {
-							const f = e.target.files?.[0];
-							if (!f) return;
-							onFile(f);
+							const files = Array.from(e.target.files ?? []);
+							if (files.length === 0) return;
+							onFiles(files);
 							e.target.value = "";
+							setReplace(false);
 						}
 					}),
-					editorOpen && url !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BgEditor, {
+					editorOpen && url !== null && image !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BgEditor, {
 						url,
-						state: rule.bgState,
+						state: image.bgState,
 						t,
 						onClose: () => setEditorOpen(false),
 						onCommit: (z, x, y, iw, ih) => {
-							p.setRule(rule.id, { bgState: {
+							p.setImageFraming(rule.id, image.slot, {
 								zoom: z,
 								x,
 								y,
 								iw,
 								ih
-							} });
+							});
 							setEditorOpen(false);
 						}
 					}) : null,
@@ -5047,6 +5904,35 @@ window.__ModuleLoader__.load({
 					if (ctx.theme.getTheme().preference === CUSTOM_ID) ctx.theme.setTheme("system");
 				} catch {}
 			};
+			/**
+			* Re-emit the interface palette for whatever is painted RIGHT NOW.
+			*
+			* Called from two places, and the second one is why this is a function: a
+			* model switch (`applyActive`) and a ROTATION STEP (`paintImage`). A theme color
+			* belongs to an image since 0.7.1, so stepping to the next picture changes the
+			* palette as much as switching models does — and a step that only repainted the
+			* wallpaper would leave the previous picture's color on the interface until
+			* something else happened to re-run an apply (dragging the wheel, switching
+			* models), which is precisely the "it only updates when I touch the color wheel"
+			* report this plugin already had once.
+			*
+			* The debounce is for the OTHER caller: a color drag runs a full apply dozens of
+			* times per second, and the host-visible skin switch (dispose + register +
+			* activate) must not happen on every pointer move. A rotation step pays the same
+			* 60 ms, which is invisible next to a dwell time of 5 s or more.
+			*/
+			const applyPalette = () => {
+				const color = activeColor();
+				if (skinTimer !== null) window.clearTimeout(skinTimer);
+				if (color === null) {
+					skinTimer = null;
+					dropCustom();
+				} else skinTimer = window.setTimeout(() => {
+					skinTimer = null;
+					registerCustom(color[0], color[1], color[2]);
+				}, 60);
+				syncHostScheme();
+			};
 			ctx.effect(() => () => {
 				if (skinTimer !== null) window.clearTimeout(skinTimer);
 				customDispose?.();
@@ -5074,9 +5960,13 @@ window.__ModuleLoader__.load({
 					modelSource: "session",
 					modelNote: "waiting",
 					activeRuleId: null,
-					matched: false
+					matched: false,
+					rotIndex: 0,
+					rotTotal: 0,
+					rotating: false,
+					hostStale: false
 				}),
-				actions: { sync: (d, url, r, rr, model, source, note, id, matched) => {
+				actions: { sync: (d, url, r, rr, model, source, note, id, matched, rotIndex, rotTotal, rotating, hostStale) => {
 					if (r > d.rev) {
 						d.url = url;
 						d.rev = r;
@@ -5087,12 +5977,31 @@ window.__ModuleLoader__.load({
 					d.modelNote = note;
 					d.activeRuleId = id;
 					d.matched = matched;
+					d.rotIndex = rotIndex;
+					d.rotTotal = rotTotal;
+					d.rotating = rotating;
+					d.hostStale = hostStale;
 				} }
 			});
 			let bound = null;
+			/** Rotation facts of whatever is painted now, for the section's readout. */
+			const rotationFacts = () => {
+				const rule = activeRule();
+				if (rule === null) return {
+					index: 0,
+					total: 0,
+					rotating: false
+				};
+				return {
+					index: imageIndexOf(rule),
+					total: rule.images.length,
+					rotating: isRotating(rule.images.length, rule.rotate.enabled, rule.rotate.intervalMs) && !document.hidden
+				};
+			};
 			const sync = () => {
 				rev++;
-				bound?.sync(rWp(), rev, rulesRev, modelLabel !== "" ? modelLabel : modelText, modelSource, modelNote, activeRuleId, activeMatched);
+				const rot = rotationFacts();
+				bound?.sync(rWp(), rev, rulesRev, modelLabel !== "" ? modelLabel : modelText, modelSource, modelNote, activeRuleId, activeMatched, rot.index, rot.total, rot.rotating, hostIsLegacy());
 			};
 			/**
 			* Publish the scheme the host's own preference resolves to. The theme service
@@ -5108,27 +6017,141 @@ window.__ModuleLoader__.load({
 					setHostScheme(null);
 				}
 			};
-			/** Resolve the active rule for the current model and repaint everything. */
-			const applyActive = () => {
+			/**
+			* Which rule wins for the current model RIGHT NOW, and whether it was a
+			* substring hit (a holiday override is never a "match" of the model).
+			*
+			* Read by the repaint AND by the panel's write path, which has to know whether
+			* an edit changed the answer: `color`, `enabled` and `match` all feed the
+			* resolution (a rule with no image still paints from its own color — see
+			* `ruleCanPaint`). Without this, editing a rule that was not the active one —
+			* giving an emptied rule its first color, typing a match string that should
+			* promote it — changed nothing on screen until some unrelated event happened to
+			* re-run the resolution.
+			*/
+			const resolveRule = () => {
 				const holiday = activeHolidayRule();
-				const { rule, matched } = holiday !== null ? {
+				return holiday !== null ? {
 					rule: holiday,
 					matched: false
 				} : matchRule(cfg.rules, modelText);
+			};
+			/** Id of the rule that would paint right now; `null` = the host's own look. */
+			const winnerId = () => resolveRule().rule?.id ?? null;
+			/**
+			* Close a rule edit: repaint when it could have moved what is on screen, and
+			* merely refresh the panel's readout when it could not.
+			*
+			* `winnerBefore` is sampled by the caller BEFORE its mutation (`winnerId()`),
+			* and the comparison itself lives in ./repaint, where it is checked on plain
+			* node. Every write path below ends here — the old per-path test
+			* (`id === activeRuleId`) missed the edit that CREATES the winner, which is the
+			* "上传图片 / 提取主题色之后界面不动，动一下调色盘或切模型才出现" report.
+			*/
+			const repaintIfMoved = (id, winnerBefore) => {
+				if (shouldRepaint(id, winnerBefore, winnerId())) applyActive();
+				else sync();
+			};
+			/**
+			* Resolve the active rule for the current model and repaint everything.
+			*
+			* @param advance - true only on a MODEL switch: the rotation of the rule that
+			*   took over may then step once (`rotate.advanceOnSwitch`), which is how a
+			*   model gets "a different picture every time" without any timer at all.
+			*/
+			const applyActive = (advance = false) => {
+				const { rule, matched } = resolveRule();
 				setActive(rule === null ? null : rule.id, matched);
-				const color = rule === null ? null : rule.color;
-				if (skinTimer !== null) window.clearTimeout(skinTimer);
-				if (color === null) {
-					skinTimer = null;
-					dropCustom();
-				} else skinTimer = window.setTimeout(() => {
-					skinTimer = null;
-					registerCustom(color[0], color[1], color[2]);
-				}, 60);
-				syncHostScheme();
+				if (advance && rule !== null && rule.rotate.advanceOnSwitch) {
+					const next = nextIndex(rule.images.length, rule.rotate.order, imageIndexOf(rule));
+					if (next !== null) setRotIndex(next);
+				}
+				scheduleRotation();
+				applyPalette();
 				applyWp();
 				sync();
 			};
+			let rotTimer = null;
+			/** Identity of the schedule currently armed; a change means "re-arm". */
+			let rotSig = "";
+			/** Warm one image so a later switch fades toward bytes that are already here. */
+			const warmImage = (rule, idx) => {
+				const slot = rule.images[idx]?.slot;
+				if (slot !== void 0) loadSlot(slot);
+			};
+			/** Show the image at `idx` at once, loading it first when it is not in memory. */
+			const paintImage = (rule, idx) => {
+				const slot = rule.images[idx]?.slot;
+				if (slot === void 0) return;
+				applyPalette();
+				if (imageOf(slot) !== null) {
+					applyWp();
+					sync();
+					return;
+				}
+				loadSlot(slot).then(() => {
+					applyWp();
+					sync();
+				});
+			};
+			const rotateTick = () => {
+				const rule = activeRule();
+				if (rule === null) return;
+				const next = nextIndex(rule.images.length, rule.rotate.order, imageIndexOf(rule));
+				if (next === null) {
+					scheduleRotation(true);
+					return;
+				}
+				setRotIndex(next);
+				paintImage(rule, next);
+				const after = nextIndex(rule.images.length, rule.rotate.order, next);
+				if (after !== null) warmImage(rule, after);
+			};
+			/**
+			* Arm (or re-arm) the rotation for the active rule.
+			*
+			* Idempotent by SIGNATURE rather than by "already armed": a slider drag on the
+			* active rule re-runs the whole apply dozens of times per second, and restarting
+			* the interval on each of those would mean the dwell timer never elapses while
+			* the user is dragging (and a 10 s rotation would never advance). The signature
+			* carries exactly the inputs the schedule depends on, so a real change — another
+			* rule, another interval, the tab becoming visible again — re-arms while a
+			* repaint does not.
+			*/
+			const scheduleRotation = (force = false) => {
+				const rule = activeRule();
+				const sig = rule === null ? "" : [
+					rule.id,
+					rule.rotate.enabled,
+					rule.rotate.intervalMs,
+					rule.rotate.order,
+					rule.images.length,
+					document.hidden
+				].join("|");
+				if (!force && sig === rotSig) return;
+				rotSig = sig;
+				if (rotTimer !== null) {
+					window.clearInterval(rotTimer);
+					rotTimer = null;
+				}
+				if (rule === null || document.hidden) return;
+				if (!isRotating(rule.images.length, rule.rotate.enabled, rule.rotate.intervalMs)) return;
+				const next = nextIndex(rule.images.length, rule.rotate.order, imageIndexOf(rule));
+				if (next !== null) warmImage(rule, next);
+				rotTimer = window.setInterval(rotateTick, rule.rotate.intervalMs);
+			};
+			ctx.effect(() => () => {
+				if (rotTimer !== null) {
+					window.clearInterval(rotTimer);
+					rotTimer = null;
+				}
+			}, "dsh-background-by-model: rotation timer");
+			const onVisibility = () => {
+				scheduleRotation();
+				sync();
+			};
+			document.addEventListener("visibilitychange", onVisibility);
+			ctx.effect(() => () => document.removeEventListener("visibilitychange", onVisibility), "dsh-background-by-model: rotation visibility");
 			/**
 			* The holiday the background must follow right now, or null.
 			*
@@ -5150,7 +6173,7 @@ window.__ModuleLoader__.load({
 				modelSource = source;
 				modelNote = note;
 				setModelLabel(label !== "" ? label : text);
-				if (textChanged) applyActive();
+				if (textChanged) applyActive(true);
 				else sync();
 			});
 			ctx.effect(() => () => offModel(), "dsh-background-by-model: model watch");
@@ -5197,29 +6220,55 @@ window.__ModuleLoader__.load({
 				const id = activeHoliday();
 				if (id === null) return null;
 				const item = holidayById(id);
-				return item !== null && item.enabled ? item.slot : null;
+				if (item === null || !item.enabled) return null;
+				return ruleSlots(item)[0] ?? null;
 			};
-			/** Every slot that can paint: the stored ones plus every slot the config names. */
-			const allSlots = (stored) => {
+			/**
+			* The slots boot hydrates, in no particular order: the FIRST image of every
+			* rule, today's holiday, and the image the current model paints.
+			*
+			* That first-image set is exactly what this plugin loaded per rule before
+			* multi-image existed — a rule card draws its first image as its thumbnail, so
+			* the settings page looks the same as it always did. Everything past the first
+			* image of a rule is read ON DEMAND: by the rotation (which warms the image it
+			* is about to need as soon as its schedule is armed) and by the settings page
+			* when a card is expanded. Hydrating every image of every rule here would mean
+			* twenty full-size data URLs over this channel before the first frame on a
+			* five-rule setup with four pictures each, which is the one cost this feature
+			* must not pay.
+			*
+			* The slot list the store knows about (`readPersisted().slots`) is deliberately
+			* NOT hydrated any more: an orphaned slot that no rule references has no card to
+			* appear on, so pulling its bytes over the channel at boot is pure waste. It
+			* stays on disk — and is still reported by the node half — until a rule
+			* references it again or it is deleted with its rule.
+			*/
+			const bootSlots = () => {
 				const holiday = todayHolidaySlot();
+				const firsts = cfg.rules.map((r) => r.images[0]?.slot).filter((slot) => slot !== void 0);
+				const current = prioritySlot();
 				return Array.from(/* @__PURE__ */ new Set([
-					...stored,
-					...cfg.rules.map((r) => r.slot),
-					...holiday === null ? [] : [holiday]
+					...firsts,
+					...holiday === null ? [] : [holiday],
+					...current === null ? [] : [current]
 				]));
 			};
 			/**
 			* The slot that paints before anything else: the holiday in force when there
-			* is one, otherwise the slot the current model's rule uses. A holiday outranks
-			* the rule here for the same reason it outranks it when painting.
+			* is one, otherwise the FIRST image of the current model's rule. A holiday
+			* outranks the rule here for the same reason it outranks it when painting.
+			*
+			* Always the first image (never the one `advanceOnSwitch` would step to): boot
+			* paints without an advance, and hydrating an image the first frame is not going
+			* to use would leave the frame blank until the real one arrived.
 			*/
-			const prioritySlot = () => todayHolidaySlot() ?? matchRule(cfg.rules, modelText).rule?.slot ?? null;
+			const prioritySlot = () => todayHolidaySlot() ?? matchRule(cfg.rules, modelText).rule?.images[0]?.slot ?? null;
 			(async () => {
 				const persisted = await loadPersisted();
 				if (persisted !== null) {
 					adoptConfig(persisted.config);
 					const first = prioritySlot();
-					const slots = allSlots(persisted.slots);
+					const slots = bootSlots();
 					const order = first === null ? slots : [first, ...slots.filter((s) => s !== first)];
 					for (const slot of order) {
 						await loadSlot(slot);
@@ -5233,7 +6282,7 @@ window.__ModuleLoader__.load({
 			}, "dsh-background-by-model: wp cleanup");
 			ctx.effect(() => ctx.on("theme/change", () => {
 				syncHostScheme();
-				if (activeRuleColor() !== null) {
+				if (activeColor() !== null) {
 					const snapshot = ctx.theme.getTheme();
 					if (snapshot.preference !== CUSTOM_ID && snapshot.themes.some((t) => t.id === CUSTOM_ID)) ctx.theme.setTheme(CUSTOM_ID);
 				}
@@ -5264,34 +6313,64 @@ window.__ModuleLoader__.load({
 				en
 			}), "dsh-background-by-model: i18n");
 			/**
-			* The automatic half of "extract from image": fill a rule's theme color from
-			* the picture it just received, but only while the rule has no color at all —
-			* a color the user picked (or a previous extraction produced) is never
-			* overwritten, so this cannot fight a deliberate choice.
+			* The automatic half of "extract from image": fill an IMAGE's theme color from
+			* its own bytes when it has none of its own, and only then — a color the user
+			* picked (or a previous extraction produced) is never overwritten, so this
+			* cannot fight a deliberate choice.
+			*
+			* `slot` names the image that just arrived, because a rule's images each carry
+			* their own palette since 0.7.1 and the one the user just added is the one they
+			* are looking at. Omitted (or unknown) falls back to the rule's first image.
+			*
+			* The question is asked of the IMAGE, not of the rule: a rule whose pictures
+			* were all cleared and then re-filled must theme each new picture, and a rule
+			* with a color of its own still has no say over the colors of its pictures.
 			*
 			* The decode is asynchronous, so the "still empty?" question is asked AGAIN on
 			* arrival: a color chosen while it ran must win over the one being computed.
 			*/
-			const maybeAutoExtract = async (id) => {
+			const maybeAutoExtract = async (id, slot) => {
 				if (!cfg.autoExtract) return;
-				const rule = ruleById(id);
-				if (rule === null || rule.color !== null) return;
-				const url = displayImageOf(rule.slot);
+				/** The entry this extraction is about, re-resolved on every read. */
+				const target = (rule) => {
+					if (rule === null) return void 0;
+					return (slot === void 0 ? void 0 : rule.images.find((i) => i.slot === slot)) ?? rule.images[0];
+				};
+				const image = target(ruleById(id));
+				if (image === void 0 || image.color !== null) return;
+				const url = displayImageOf(image.slot);
 				if (url === null) return;
 				let hsl = null;
 				try {
-					hsl = await extractWallpaperColor(url, rule.bgState);
+					hsl = await extractWallpaperColor(url, image.bgState);
 				} catch {
 					hsl = null;
 				}
 				if (hsl === null) return;
-				const current = ruleById(id);
-				if (current === null || current.color !== null) return;
+				const current = target(ruleById(id));
+				if (current === void 0 || current.color !== null) return;
+				const winner = winnerId();
 				current.color = hsl;
 				rulesRev++;
 				saveConfig();
-				if (id === activeRuleId) applyActive();
-				else sync();
+				repaintIfMoved(id, winner);
+			};
+			/**
+			* The batch form, for one upload that carried several pictures.
+			*
+			* EVERY picture that arrived is themed from its own bytes, the first ones
+			* included. The single-slot reading of an upload ("the last image added is the
+			* one being looked at") is true of the CARD's selection and false of the
+			* palette: since a theme color belongs to an image, a batch that themed only
+			* its last file left the rest of a fresh rotation on the system theme, with
+			* nothing in the interface to say why.
+			*
+			* Sequential on purpose: a batch is a handful of full-size photos, and ten
+			* parallel decodes buy nothing the user can see, while landing the colors in
+			* list order does (the card fills in from its first picture).
+			*/
+			const maybeAutoExtractEach = async (id, slots) => {
+				for (const slot of slots) await maybeAutoExtract(id, slot);
 			};
 			const activeLang = () => {
 				try {
@@ -5322,7 +6401,7 @@ window.__ModuleLoader__.load({
 					readModelFacts,
 					imageOf: (slot) => displayImageOf(slot),
 					addRule: () => {
-						const rule = newRule(nextRuleId(), nextSlot());
+						const rule = newRule(nextRuleId());
 						cfg.rules.push(rule);
 						rulesRev++;
 						persistConfig();
@@ -5333,9 +6412,13 @@ window.__ModuleLoader__.load({
 						const idx = cfg.rules.findIndex((r) => r.id === id);
 						if (idx < 0) return;
 						const [rule] = cfg.rules.splice(idx, 1);
-						if (rule !== void 0 && !cfg.rules.some((r) => r.slot === rule.slot)) {
-							setImage(rule.slot, null);
-							deleteImage(rule.slot);
+						if (rule !== void 0) {
+							const stillUsed = takenSlots();
+							for (const slot of ruleSlots(rule)) {
+								if (stillUsed.has(slot)) continue;
+								setImage(slot, null);
+								deleteImage(slot);
+							}
 						}
 						rulesRev++;
 						persistConfig();
@@ -5354,50 +6437,182 @@ window.__ModuleLoader__.load({
 					setRule: (id, patch) => {
 						const rule = ruleById(id);
 						if (rule === null) return;
+						const winner = winnerId();
 						Object.assign(rule, patch);
-						const normalized = normalizeRule(rule);
-						if (normalized !== null) Object.assign(rule, normalized);
+						normalizeRuleInPlace(rule);
 						rulesRev++;
 						saveConfig();
-						if (id === activeRuleId) applyActive();
-						else sync();
+						repaintIfMoved(id, winner);
+					},
+					addRuleImages: (id, dataUrls) => {
+						const rule = ruleById(id);
+						if (rule === null || dataUrls.length === 0) return;
+						const winner = winnerId();
+						/** Slots of THIS batch, in list order — the extraction below is per slot. */
+						const added = [];
+						for (const dataUrl of dataUrls) {
+							const slot = nextSlot();
+							const image = {
+								slot,
+								bgState: { ...DEFAULT_BG_STATE },
+								color: null
+							};
+							rule.images.push(image);
+							added.push(slot);
+							setImage(slot, dataUrl);
+							writeImage(slot, dataUrl);
+						}
+						rulesRev++;
+						persistConfig();
+						repaintIfMoved(id, winner);
+						maybeAutoExtractEach(id, added);
 					},
-					setRuleImage: (id, dataUrl) => {
+					removeRuleImage: (id, slot) => {
 						const rule = ruleById(id);
 						if (rule === null) return;
-						setImage(rule.slot, dataUrl);
-						dataUrl === null ? deleteImage(rule.slot) : writeImage(rule.slot, dataUrl);
-						if (id === activeRuleId) applyActive();
-						else sync();
-						if (dataUrl !== null) maybeAutoExtract(id);
+						const idx = rule.images.findIndex((i) => i.slot === slot);
+						if (idx < 0) return;
+						const winner = winnerId();
+						rule.images.splice(idx, 1);
+						if (id === activeRuleId) setRotIndex(0);
+						rulesRev++;
+						persistConfig();
+						if (!takenSlots().has(slot)) {
+							setImage(slot, null);
+							deleteImage(slot);
+						}
+						repaintIfMoved(id, winner);
+					},
+					moveRuleImageTo: (id, slot, to) => {
+						const rule = ruleById(id);
+						if (rule === null) return;
+						const idx = rule.images.findIndex((i) => i.slot === slot);
+						if (idx < 0) return;
+						const at = Math.max(0, Math.min(rule.images.length - 1, Math.trunc(to)));
+						if (at === idx) return;
+						const winner = winnerId();
+						const painted = id === activeRuleId ? rule.images[imageIndexOf(rule)]?.slot ?? null : null;
+						const [image] = rule.images.splice(idx, 1);
+						rule.images.splice(at, 0, image);
+						rulesRev++;
+						if (id === activeRuleId) {
+							const keep = painted === null ? -1 : rule.images.findIndex((i) => i.slot === painted);
+							setRotIndex(keep < 0 ? Math.min(at, rule.images.length - 1) : keep);
+							scheduleRotation(true);
+						}
+						persistConfig();
+						repaintIfMoved(id, winner);
+					},
+					setImageFraming: (id, slot, bgState) => {
+						const rule = ruleById(id);
+						const image = rule?.images.find((i) => i.slot === slot);
+						if (image === void 0) return;
+						const winner = winnerId();
+						image.bgState = bgState;
+						normalizeRuleInPlace(rule);
+						rulesRev++;
+						saveConfig();
+						repaintIfMoved(id, winner);
+					},
+					setRuleRotation: (id, patch) => {
+						const rule = ruleById(id);
+						if (rule === null) return;
+						patchRotation(rule, patch);
+						rulesRev++;
+						persistConfig();
+						scheduleRotation();
+						sync();
 					},
-					setRuleImageFromUrl: async (id, url) => {
+					rotateNow: (id) => {
+						const rule = ruleById(id);
+						if (rule === null || id !== activeRuleId) return;
+						const next = nextIndex(rule.images.length, rule.rotate.order, imageIndexOf(rule));
+						if (next === null) return;
+						setRotIndex(next);
+						paintImage(rule, next);
+						scheduleRotation(true);
+					},
+					showRuleImage: (id, slot) => {
+						const rule = ruleById(id);
+						if (rule === null || id !== activeRuleId) return;
+						const idx = rule.images.findIndex((i) => i.slot === slot);
+						if (idx < 0) return;
+						setRotIndex(idx);
+						paintImage(rule, idx);
+						scheduleRotation(true);
+					},
+					loadRuleImages: async (id) => {
+						const rule = ruleById(id);
+						if (rule === null) return;
+						for (const slot of ruleSlots(rule)) await loadSlot(slot);
+						sync();
+					},
+					setRuleImage: (id, slot, dataUrl) => {
+						const rule = ruleById(id);
+						if (rule === null || !rule.images.some((i) => i.slot === slot)) return;
+						const winner = winnerId();
+						setImage(slot, dataUrl);
+						dataUrl === null ? deleteImage(slot) : writeImage(slot, dataUrl);
+						repaintIfMoved(id, winner);
+						if (dataUrl !== null) maybeAutoExtract(id, slot);
+					},
+					addRuleImageFromUrl: async (id, url) => {
 						const rule = ruleById(id);
 						if (rule === null) return {
 							ok: false,
 							error: "unknown rule"
 						};
-						const res = await fetchImageUrl(rule.slot, url);
-						if (res.ok) {
-							setImage(rule.slot, res.dataUrl ?? null);
-							if (id === activeRuleId) applyActive();
-							else sync();
-							maybeAutoExtract(id);
-						}
+						const slot = nextSlot();
+						const res = await fetchImageUrl(slot, url);
+						if (!res.ok) return res;
+						const winner = winnerId();
+						rule.images.push({
+							slot,
+							bgState: { ...DEFAULT_BG_STATE },
+							color: null
+						});
+						setImage(slot, res.dataUrl ?? null);
+						rulesRev++;
+						persistConfig();
+						repaintIfMoved(id, winner);
+						maybeAutoExtract(id, slot);
 						return res;
 					},
-					extractColor: async (id) => {
+					/**
+					* Store ONE image's theme color (null = that image follows the system
+					* theme). Addressed by slot exactly like `setImageFraming`, because the
+					* color belongs to the image: editing image 3's color must not rewrite
+					* image 1's, and it must not touch the RULE's color either — that one is
+					* what the rule paints once its last picture is gone, and it is edited only
+					* while there is no image to edit (the panel's own branch).
+					*/
+					setImageColor: (id, slot, color) => {
+						const rule = ruleById(id);
+						const image = rule?.images.find((i) => i.slot === slot);
+						if (rule === null || rule === void 0 || image === void 0) return;
+						const winner = winnerId();
+						image.color = color;
+						normalizeRuleInPlace(rule);
+						rulesRev++;
+						saveConfig();
+						repaintIfMoved(id, winner);
+					},
+					extractColor: async (id, slot) => {
 						const rule = ruleById(id);
 						if (rule === null) return false;
-						const url = displayImageOf(rule.slot);
+						const image = rule.images.find((i) => i.slot === slot) ?? rule.images[0];
+						if (image === void 0) return false;
+						const url = displayImageOf(image.slot);
 						if (url === null) return false;
-						const hsl = await extractWallpaperColor(url, rule.bgState);
+						const hsl = await extractWallpaperColor(url, image.bgState);
 						if (hsl === null) return false;
-						rule.color = hsl;
+						const current = ruleById(id)?.images.find((i) => i.slot === image.slot);
+						if (current === void 0) return false;
+						const winner = winnerId();
+						current.color = hsl;
 						rulesRev++;
 						saveConfig();
-						if (id === activeRuleId) applyActive();
-						else sync();
+						repaintIfMoved(id, winner);
 						return true;
 					},
 					setOps: (ops) => {
@@ -5436,13 +6651,13 @@ window.__ModuleLoader__.load({
 					},
 					exportTheme: () => {
 						const images = {};
-						const slots = cfg.rules.map((r) => r.slot);
+						const slots = cfg.rules.flatMap(ruleSlots);
 						for (const slot of slots) {
 							const url = imageOf(slot);
 							if (url !== null) images[slot] = url;
 						}
 						const payload = {
-							version: 3,
+							version: 5,
 							exportedAt: (/* @__PURE__ */ new Date()).toISOString(),
 							config: cfg,
 							images
@@ -5464,7 +6679,7 @@ window.__ModuleLoader__.load({
 							adoptConfig(d.config);
 							const incoming = d.images ?? {};
 							const keep = /* @__PURE__ */ new Set();
-							for (const slot of cfg.rules.map((r) => r.slot)) {
+							for (const slot of cfg.rules.flatMap(ruleSlots)) {
 								keep.add(slot);
 								const raw = incoming[slot];
 								if (typeof raw === "string" && /^data:image\//.test(raw)) {
@@ -5544,7 +6759,7 @@ window.__ModuleLoader__.load({
 			}, "dsh-background-by-model: nav icon watch");
 			const restoreSaved = () => {
 				syncHostScheme();
-				const color = activeRuleColor();
+				const color = activeColor();
 				if (color !== null) {
 					const snapshot = ctx.theme.getTheme();
 					if (!snapshot.themes.some((t) => t.id === CUSTOM_ID)) registerCustom(color[0], color[1], color[2]);
@@ -5558,7 +6773,7 @@ window.__ModuleLoader__.load({
 			}, "dsh-background-by-model: boot restore");
 			const watchdogId = window.setInterval(() => {
 				syncHostScheme();
-				const color = activeRuleColor();
+				const color = activeColor();
 				if (color === null) {
 					refreshSystemTheme();
 					return;
@@ -5585,12 +6800,6 @@ window.__ModuleLoader__.load({
 			window.addEventListener("pagehide", onPageHide);
 			ctx.effect(() => () => window.removeEventListener("pagehide", onPageHide), "dsh-background-by-model: pagehide flush");
 		}
-		/** Color of the currently active rule, or null when it uses the system theme. */
-		function activeRuleColor() {
-			if (activeRuleId === null) return null;
-			const rule = ruleById(activeRuleId);
-			return rule === null ? null : rule.color;
-		}
 		//#endregion
 		exports.apply = apply;
 		exports.inject = inject;