dsh-background-by-model 0.7.1 → 0.7.3

package/lib/client.js

@@ -26,7 +26,7 @@ window.__ModuleLoader__.load({
 			pageProfile: "配置",
 			descInterface: "为主界面的各个区域单独调节透明度与模糊，营造空间层次感。这里的设置对所有模型生效",
 			descModelBg: "每条规则 = 一个匹配串 + 一组背景图与外观。切换模型时，从上往下找第一条匹配串出现在模型名里的规则；都没中就使用第 1 条。一条规则可以放多张图，按你设的节奏轮换",
-			descProfile: "把当前全部规则连同图片导出备份，或从文件一键恢复",
+			descProfile: "调整壁纸切换效果，并把当前全部规则连同图片导出备份，或从文件一键恢复",
 			uiTitle: "主界面",
 			uiOpacity: "透明度",
 			uiBlur: "模糊度",
@@ -44,8 +44,6 @@ window.__ModuleLoader__.load({
 			statusNoteNoSession: "会话服务已就绪，但还没有当前会话 id",
 			statusNoteNoProjection: "拿不到本会话的模型选择投影（binding / projections 不可用）",
 			statusNoteEmptySelection: "本会话的模型选择投影还没有值（切一次模型即可写入）",
-			rulesTitle: "规则列表",
-			rulesHint: "从上到下即为优先级。规则 1 同时兼任兜底：所有匹配串都没命中时使用它",
 			hostStaleHint: "检测到 DSH 主进程仍在运行旧版插件：新版配置格式它还读不懂，为避免丢规则，本次只改界面不写入配置。重启 DSH 后多图与轮换即可正常保存",
 			tryoutTitle: "匹配试跑",
 			tryoutPlaceholder: "输入模型名，如 deepseek-flash",
@@ -55,7 +53,6 @@ window.__ModuleLoader__.load({
 			tryoutNone: "没有可用规则（规则需要启用，并且有图片或主题色）",
 			tryoutEmpty: "输入模型名即可试跑",
 			autoExtract: "选图后自动取主题色",
-			autoExtractHint: "只在图片还没有自己的颜色时自动取色，绝不覆盖你手动选的颜色",
 			ruleAdd: "新增规则",
 			ruleFallbackBadge: "兜底",
 			ruleMatchPlaceholder: "如 flash / glm（忽略大小写，留空则不参与匹配）",
@@ -71,7 +68,7 @@ window.__ModuleLoader__.load({
 			ruleUrlApplying: "加载中…",
 			ruleUrlBadHttp: "仅支持 http/https 图片网址",
 			ruleUrlFail: "获取图片失败",
-			ruleImageRemove: "移除图片",
+			ruleImageRemove: "移除",
 			ruleEmptyHint: "这条规则还没有图片，也没有自己的主题色：没有可显示的内容，匹配和兜底都会跳过它",
 			ruleColorOnlyHint: "这条规则还没有图片：不会铺壁纸，界面只用这个主题色",
 			ruleImagePendingHint: "这张图片还没有取到内容，稍后会自己出现（也可以直接替换它）",
@@ -102,13 +99,12 @@ window.__ModuleLoader__.load({
 			rotOnSwitch: "切换模型时也换一张",
 			rotNext: "下一张",
 			rotNextInactive: "只有正在生效的规则能换画面上的图",
-			rotPos: "当前第",
+			rotPos: "第",
 			rotShowing: "正在显示",
-			rotAddImage: "添加图片",
-			rotReplaceImage: "替换这张",
-			rotImageEarlier: "前移一张",
-			rotImageLater: "后移一张",
-			rotMakeFirst: "设为第一张",
+			rotAddImage: "添加",
+			rotReplaceImage: "替换",
+			rotDragHint: "拖动排序",
+			rotDblHint: "双击切换",
 			rotEvery10s: "10 秒",
 			rotEvery30s: "30 秒",
 			rotEvery1m: "1 分钟",
@@ -146,7 +142,22 @@ window.__ModuleLoader__.load({
 			importFail: "导入失败，文件格式不正确",
 			footerTag: "按模型换背景插件",
 			holidayTitle: "节日特殊背景",
-			holidayEnable: "启用节日特殊背景（中秋当天、国庆 10 月 1–7 日）"
+			holidayEnable: "启用节日特殊背景（中秋当天、国庆 10 月 1–7 日）",
+			trTitle: "切换效果",
+			trEffect: "切换方式",
+			trEffectFade: "淡入淡出",
+			trEffectNone: "直接切换",
+			trEffectZoom: "缩放淡入",
+			trEffectSlide: "平移推入",
+			trEasing: "缓动",
+			trEasingEase: "标准",
+			trEasingLinear: "匀速",
+			trEasingOut: "先快后慢",
+			trEasingInOut: "两端慢",
+			trDuration: "切换时长",
+			trPreview: "试放",
+			trHint: "效果对所有换图生效：切模型、轮换、手动下一张、节日。「直接切换」和 0 秒一样是硬切",
+			trReducedHint: "系统开启了「减少动态效果」，实际切换不会播放动画"
 		};
 		const en = {
 			nav: "Model background",
@@ -156,7 +167,7 @@ window.__ModuleLoader__.load({
 			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 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",
+			descProfile: "Tune how the wallpaper switches, and back up every rule together with its image — or restore one from a file",
 			uiTitle: "Interface",
 			uiOpacity: "Opacity",
 			uiBlur: "Blur",
@@ -174,8 +185,6 @@ 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",
@@ -185,7 +194,6 @@ window.__ModuleLoader__.load({
 			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 an image that has no color of its own yet — a color you picked is never overwritten",
 			ruleAdd: "Add rule",
 			ruleFallbackBadge: "fallback",
 			ruleMatchPlaceholder: "e.g. flash / glm (case-insensitive, empty never matches)",
@@ -201,7 +209,7 @@ window.__ModuleLoader__.load({
 			ruleUrlApplying: "Loading…",
 			ruleUrlBadHttp: "Only http/https image URLs are supported",
 			ruleUrlFail: "Could not fetch the image",
-			ruleImageRemove: "Remove image",
+			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",
@@ -234,11 +242,10 @@ window.__ModuleLoader__.load({
 			rotNextInactive: "Only the active rule can step the background",
 			rotPos: "Image",
 			rotShowing: "On screen",
-			rotAddImage: "Add images",
-			rotReplaceImage: "Replace this image",
-			rotImageEarlier: "Move earlier",
-			rotImageLater: "Move later",
-			rotMakeFirst: "Make first",
+			rotAddImage: "Add",
+			rotReplaceImage: "Replace",
+			rotDragHint: "drag to reorder",
+			rotDblHint: "double-click to show",
 			rotEvery10s: "10 s",
 			rotEvery30s: "30 s",
 			rotEvery1m: "1 min",
@@ -276,9 +283,106 @@ window.__ModuleLoader__.load({
 			importFail: "Import failed — invalid file",
 			footerTag: "Per-model wallpaper plugin",
 			holidayTitle: "Holiday backgrounds",
-			holidayEnable: "Enable holiday backgrounds (Mid-Autumn day, Oct 1–7)"
+			holidayEnable: "Enable holiday backgrounds (Mid-Autumn day, Oct 1–7)",
+			trTitle: "Switch effect",
+			trEffect: "Transition",
+			trEffectFade: "Cross-fade",
+			trEffectNone: "Instant",
+			trEffectZoom: "Zoom in",
+			trEffectSlide: "Slide in",
+			trEasing: "Easing",
+			trEasingEase: "Standard",
+			trEasingLinear: "Linear",
+			trEasingOut: "Ease out",
+			trEasingInOut: "Ease in-out",
+			trDuration: "Duration",
+			trPreview: "Preview",
+			trHint: "The effect applies to every change: model switch, rotation, manual next, holidays. “Instant” and 0 s are the same hard cut",
+			trReducedHint: "Your system asks for reduced motion, so a real switch will not animate"
 		};
 		//#endregion
+		//#region src/client/transition.ts
+		/**
+		* Resolve the duration one switch uses, in ms (`0` = a hard cut).
+		*
+		*   1. `effect: 'none'` is a hard cut whatever the duration says — asking for no
+		*      animation and asking for 0 ms are the same request, and the effect is the
+		*      more explicit of the two;
+		*   2. otherwise the global `durationMs` decides, because a rule has no notion of
+		*      a transition and there is exactly one duration for every switch.
+		*
+		* A non-finite or negative value answers `0` (a hard cut) rather than a default:
+		* animating for an unknown length is the one answer that cannot be right. The
+		* input is already clamped by the shared sanitizer (`./schema`), so this is a
+		* guard against a hand-edited config, not a second clamp.
+		*/
+		function resolveFadeMs(transition) {
+			if (transition.effect === "none") return 0;
+			return Number.isFinite(transition.durationMs) && transition.durationMs > 0 ? transition.durationMs : 0;
+		}
+		/**
+		* The transform the incoming layer starts from, per effect.
+		*
+		* `zoom` starts ABOVE 1 and settles back to exactly `none`, never below or past
+		* it: the wallpaper would otherwise be left larger than the viewport, cropping a
+		* `fit` framing the user committed by hand. `slide` is a small push because a
+		* full-width travel of a full-bleed wallpaper reads as two wallpapers, not one
+		* transition.
+		*/
+		const START_TRANSFORM = {
+			fade: "none",
+			none: "none",
+			zoom: "scale(1.06)",
+			slide: "translateX(6%)"
+		};
+		/** The properties one effect actually animates — an unchanged property must not
+		*  be put on the transition list, or `fade` would stop being byte-for-byte the
+		*  cross-fade every release so far performed. */
+		function animatedProps(effect) {
+			return effect === "fade" ? ["opacity"] : ["opacity", "transform"];
+		}
+		/**
+		* Decide one switch: whether to animate, from what, to what, and on what curve.
+		*
+		* `canAnimate` is the caller's answer to "is there anything to animate from" —
+		* a first paint has no previous layer, and a wallpaper at 0% opacity is not on
+		* screen — plus the window-visibility question the caller already owns. It is
+		* passed in rather than computed here so this stays a pure function of its
+		* inputs.
+		*
+		* `reducedMotion` is honoured as a hard veto rather than a shortened duration:
+		* the point of the preference is that the interface stops moving, and a fast
+		* animation is still an animation.
+		*/
+		function transitionPlan(input) {
+			const still = {
+				opacity: "1",
+				transform: "none"
+			};
+			const moves = input.durationMs > 0;
+			if (!input.canAnimate || input.reducedMotion || input.effect === "none" || !moves) return {
+				animate: false,
+				durationMs: 0,
+				from: still,
+				to: still,
+				transition: "none",
+				willChange: ""
+			};
+			const props = animatedProps(input.effect);
+			const timing = `${input.durationMs}ms ${input.easing}`;
+			return {
+				animate: true,
+				durationMs: input.durationMs,
+				from: {
+					opacity: "0",
+					transform: START_TRANSFORM[input.effect]
+				},
+				to: still,
+				transition: props.map((p) => `${p} ${timing}`).join(", "),
+				willChange: props.join(", ")
+			};
+		}
+		//#endregion
 		//#region src/holiday.ts
 		const HOLIDAYS = [{
 			id: "mid-autumn",
@@ -457,15 +561,12 @@ window.__ModuleLoader__.load({
 		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
+			advanceOnSwitch: false
 		};
 		/** A fresh rotation block (never hand out the shared default object). */
 		function defaultRotation() {
@@ -522,6 +623,32 @@ window.__ModuleLoader__.load({
 			rightbar: 0,
 			input: 0
 		};
+		/** Longest allowed switch duration; 0 is a hard cut. */
+		const TRANSITION_MAX_MS = 3e3;
+		/** Every accepted `effect`, in UI order. */
+		const TRANSITION_EFFECTS = [
+			"fade",
+			"none",
+			"zoom",
+			"slide"
+		];
+		/** Every accepted `easing`, in UI order. */
+		const TRANSITION_EASINGS = [
+			"ease",
+			"linear",
+			"ease-out",
+			"ease-in-out"
+		];
+		/** The shipped default: the cross-fade this plugin already performed, at 320 ms. */
+		const DEFAULT_TRANSITION = {
+			effect: "fade",
+			easing: "ease",
+			durationMs: 320
+		};
+		/** A fresh transition block (never hand out the shared default object). */
+		function defaultTransition() {
+			return { ...DEFAULT_TRANSITION };
+		}
 		/** 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) {
@@ -625,6 +752,7 @@ window.__ModuleLoader__.load({
 				rules: [],
 				opacities: { ...DEFAULT_PART_OPACITIES },
 				blurs: { ...DEFAULT_PART_BLURS },
+				transition: defaultTransition(),
 				settingsOpacity: 1,
 				chatTextOpacity: 0,
 				trajectoryOpacity: 1,
@@ -670,8 +798,7 @@ window.__ModuleLoader__.load({
 				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)
+				advanceOnSwitch: r.advanceOnSwitch === true
 			};
 		}
 		/** Own-property test for values that may be anything at all (a raw JSON entry). */
@@ -679,6 +806,54 @@ window.__ModuleLoader__.load({
 			return Object.prototype.hasOwnProperty.call(o, key);
 		}
 		/**
+		* The duration a config written before the switch effect carries on any of its
+		* rules, or `undefined` when it carries none worth adopting.
+		*
+		* `rotate.fadeMs` was the per-rule duration from 0.7.0 on, and it had NO control
+		* anywhere — it could only be hand-edited, which is why the global setting
+		* replaced it. This is the one-shot lift that keeps such a hand-tuned value from
+		* being silently dropped on upgrade: the first rule whose value differs from the
+		* 320 ms every build shipped is adopted as the global duration. Values that are
+		* all the default are ignored, so an ordinary config keeps the ordinary default,
+		* and rules that DISAGREE cannot be represented by one global number — the first
+		* deliberate value wins, and the others are gone with the field they lived on.
+		*/
+		function legacyFadeMs(rawRules) {
+			if (!Array.isArray(rawRules)) return void 0;
+			for (const entry of rawRules) {
+				const rotate = entry?.rotate;
+				if (rotate === null || typeof rotate !== "object") continue;
+				const value = rotate.fadeMs;
+				if (typeof value !== "number" || !isFinite(value)) continue;
+				if (value === DEFAULT_TRANSITION.durationMs) continue;
+				return clamp$1(value, 0, TRANSITION_MAX_MS, DEFAULT_TRANSITION.durationMs);
+			}
+		}
+		/**
+		* Coerce one persisted transition block; a config written before this setting
+		* existed has no `transition` key at all and gets the shipped default, which is
+		* the behaviour it already had.
+		*
+		* `legacyMs` is the per-rule `fadeMs` this shape replaced (see `legacyFadeMs`),
+		* adopted only when the incoming config has no `durationMs` of its own — so a
+		* deliberate hand-tuned blend survives the upgrade instead of being dropped with
+		* the field it used to live on.
+		*
+		* `durationMs` is clamped with `0` kept as a real value (a hard cut) rather than
+		* read as "absent": 0 is exactly how a hard cut is asked for without changing
+		* the effect.
+		*/
+		function normalizeTransition(raw, legacyMs) {
+			const t = raw ?? {};
+			const d = DEFAULT_TRANSITION;
+			const fallback = typeof legacyMs === "number" && isFinite(legacyMs) ? legacyMs : d.durationMs;
+			return {
+				effect: TRANSITION_EFFECTS.includes(t.effect) ? t.effect : d.effect,
+				easing: TRANSITION_EASINGS.includes(t.easing) ? t.easing : d.easing,
+				durationMs: clamp$1(t.durationMs, 0, TRANSITION_MAX_MS, fallback)
+			};
+		}
+		/**
 		* 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
@@ -815,6 +990,7 @@ window.__ModuleLoader__.load({
 				rules,
 				opacities,
 				blurs,
+				transition: normalizeTransition(r.transition, legacyFadeMs(r.rules)),
 				settingsOpacity: clamp01(r.settingsOpacity, 1),
 				chatTextOpacity: clamp01(r.chatTextOpacity, 0),
 				trajectoryOpacity: clamp01(r.trajectoryOpacity, 1),
@@ -1092,13 +1268,26 @@ window.__ModuleLoader__.load({
 		function rBgState() {
 			return activeImage()?.bgState ?? DEFAULT_BG_STATE;
 		}
-		/** Rotation of the active rule; the shipped default when nothing is active. */
-		function rRotation() {
-			return activeRule()?.rotate ?? defaultRotation();
+		/**
+		* The GLOBAL wallpaper-switch transition (effect, easing, duration).
+		*
+		* Read from the config on every apply rather than cached: the Config page edits
+		* it while a wallpaper is on screen, and the next switch has to use what the
+		* user just chose.
+		*/
+		function rTransition() {
+			return cfg.transition ?? DEFAULT_TRANSITION;
 		}
-		/** Cross-fade duration the active rule asks for, in ms (0 = hard cut). */
+		/**
+		* Duration the next switch runs for, in ms (`0` = a hard cut).
+		*
+		* The two rungs are `resolveFadeMs`'s business (./transition): the effect can
+		* veto the animation outright, and otherwise the global duration decides. It is
+		* deliberately NOT a per-rule value — a rule has no notion of a transition, and
+		* the per-rule field this replaced had no control anywhere to set it with.
+		*/
 		function rFadeMs() {
-			return rRotation().fadeMs;
+			return resolveFadeMs(rTransition());
 		}
 		/** Paintable URL of the active rule's CURRENT image, or null when it has none. */
 		function rWp() {
@@ -1321,7 +1510,7 @@ window.__ModuleLoader__.load({
 			const d = data;
 			const slots = Array.isArray(d.slots) ? d.slots.filter((s) => typeof s === "string") : [];
 			const schema = typeof d.schema === "number" && isFinite(d.schema) ? d.schema : null;
-			hostShape = schema === null ? "legacy" : schema >= 4 ? "current" : "legacy";
+			hostShape = schema === null ? "legacy" : schema >= 5 ? "current" : "legacy";
 			if (hostShape === "legacy") holdWrite();
 			return {
 				config: d.config,
@@ -1379,6 +1568,57 @@ window.__ModuleLoader__.load({
 			return parts.length > 0 ? parts.join(" ") : null;
 		}
 		//#endregion
+		//#region src/client/palette-fade.ts
+		/**
+		* Whether a palette change may interpolate at all.
+		*
+		* Only while the SCHEME stays put. A light↔dark flip is not a tint of the same
+		* palette, it is a different palette: interpolating between them walks the whole
+		* interface through mid-tones whose ink is wrong in both directions (dark text
+		* half-way into a dark palette), which looks worse than the switch it replaces.
+		* The wallpaper has no such problem — one image fades into another either way —
+		* so its own animation is deliberately untouched by this.
+		*
+		* `previous === null` means nothing has been painted yet (the first apply after a
+		* load): there is no colour to come from, so there is nothing to fade.
+		*/
+		function paletteFadeAllowed(previous, next) {
+			return previous === next;
+		}
+		/** One `@property` block per registered token. */
+		function registrations(names, initial) {
+			return names.map((n) => `@property ${n}{syntax:'<color>';inherits:true;initial-value:${initial[n]}}`).join("");
+		}
+		/**
+		* The stylesheet for one state: the registrations always, the transition only
+		* while a palette change is actually being painted.
+		*
+		* `durationMs = 0` deliberately emits NO transition rule. That is not only
+		* "instant": it is what keeps a slider drag instant, because the same call sites
+		* rewrite the `body{…}` rule on every frame of a drag and a live transition on
+		* those tokens would make the alphas lag behind the pointer.
+		*/
+		function paletteFadeCss(input) {
+			const names = Object.keys(input.initial).filter((n) => n.startsWith("--"));
+			if (names.length === 0) return "";
+			const css = registrations(names, input.initial);
+			if (!(input.durationMs > 0) || input.selectors.length === 0) return css;
+			const list = names.map((n) => `${n} ${input.durationMs}ms ${input.easing}`).join(",");
+			return `${css}${input.selectors.join(",")}{transition:${list}}`;
+		}
+		/**
+		* The same fade for an element the plugin paints INLINE (its columns and cards).
+		*
+		* No custom property is involved there — the element's own `background-color` is
+		* what changes — so the standard property is what has to be told. `0` means
+		* `none` rather than an empty value: an empty value would leave whatever the host
+		* had declared on that element, and the point of the 0 case is that a drag must
+		* not fade at all.
+		*/
+		function paletteFadeInline(durationMs, easing) {
+			return durationMs > 0 ? `background-color ${durationMs}ms ${easing}` : "none";
+		}
+		//#endregion
 		//#region src/client/utils/color.ts
 		function hsvToHsl(h, s, v) {
 			const l = v * (1 - s / 2);
@@ -1898,6 +2138,11 @@ window.__ModuleLoader__.load({
 
 /* ── profile page ────────────────────────────────────────────────────────── */
 .dab-profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:13px}
+/* The switch-effect preview: a two-tone swatch that replays the chosen effect in
+   the panel. It exists because a wallpaper fading into ITSELF is invisible —
+   the one thing a transition setting must not leave the user guessing about. */
+.dab-tr-preview{position:relative;overflow:hidden;flex:1;min-width:0;height:74px;border-radius:12px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);background-image:linear-gradient(120deg,color-mix(in srgb,var(--dsw-alias-label-tertiary) 24%,transparent),transparent 70%)}
+.dab-tr-preview-in{position:absolute;inset:0;background-image:linear-gradient(120deg,var(--dsw-alias-brand-primary),color-mix(in srgb,var(--dsw-alias-brand-primary) 50%,var(--dsw-alias-bg-layer-1)))}
 .dab-profile-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;margin-bottom:13px;color:var(--dsw-alias-brand-primary);background:var(--dsw-alias-bg-layer-2);background:color-mix(in srgb,var(--dsw-alias-brand-primary) 12%,transparent)}
 .dab-profile-title{font-size:14px;font-weight:650}
 .dab-profile-desc{font-size:12px;color:var(--dsw-alias-label-tertiary);line-height:1.55;margin:5px 0 15px}
@@ -1956,16 +2201,28 @@ window.__ModuleLoader__.load({
 .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 edited one is ringed, the one
-   the wallpaper is actually painting carries a live dot. Drops land here, which
-   is why the border reacts to a drag rather than to hover. */
+/* 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:pointer;transition:border-color .2s,box-shadow .2s,transform .18s}
+.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)}
-.dab-strip-item.is-live{box-shadow:0 0 0 2px var(--dsw-alias-brand-primary)}
+/* 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}
@@ -2319,19 +2576,70 @@ window.__ModuleLoader__.load({
 		}
 		let pendingOps = null;
 		let tokensRaf = null;
+		/** When the pending frame was armed, so a frame that never ran can be spotted. */
+		let tokensArmedAt = 0;
+		/** A frame outstanding for longer than this is treated as lost (see below). */
+		const STALE_TOKENS_RAF_MS = 1e3;
+		/** The fingerprint of the palette + colour in force; see `applyCustomTokensNow`. */
+		function paletteKey(src, color) {
+			return src.own ? `own:${color[0]}|${color[1]}|${color[2]}` : `host:${HOST_SURFACE_TOKENS.map((n) => src.tokens[n] ?? "").join("|")}`;
+		}
+		/**
+		* Re-emit the interface palette, coalescing a slider drag into one frame.
+		*
+		* A PALETTE change is never coalesced, and that distinction is the whole point:
+		* this call is the only writer of the palette's INK. Every other surface has a
+		* second, synchronous writer (the dialog's layer tokens come from
+		* `applySettingsOverrides`, the columns' backgrounds from the view cards, the
+		* `--dsh-any-op-*` alphas from the same callback as the ink), so a palette update
+		* that is deferred and then lost leaves the surfaces on the NEW colour and the
+		* ink on the previous one — a dark palette with dark text, which reads as
+		* "the theme colour did nothing" and only a reload clears it.
+		*
+		* Measured in the field: a window that is not rendering can swallow the frame
+		* (the id stays armed, so every later update parks behind it), and a failure
+		* inside the write used to be swallowed by an empty `catch`. Both are handled
+		* here — a changed palette goes through synchronously, a stale frame is dropped
+		* instead of blocking forever, and the failure is logged (see `applyCustomTokensNow`).
+		*/
 		function applyCustomTokens(ops) {
 			pendingOps = ops;
-			if (tokensRaf !== null) return;
+			const src = palette();
+			if (src !== null && paletteKey(src, rColor()) !== baseTokenKey) {
+				flushTokens();
+				return lastFadeable;
+			}
+			if (tokensRaf !== null) {
+				if (Date.now() - tokensArmedAt <= STALE_TOKENS_RAF_MS) return false;
+				window.cancelAnimationFrame(tokensRaf);
+				tokensRaf = null;
+			}
+			tokensArmedAt = Date.now();
 			tokensRaf = requestAnimationFrame(() => {
 				tokensRaf = null;
-				if (pendingOps === null) return;
-				const o = pendingOps;
-				pendingOps = null;
-				applyCustomTokensNow(o);
+				flushTokens();
 			});
+			return false;
+		}
+		/** Run the pending token write now (one funnel, so no path can skip it). */
+		function flushTokens() {
+			if (pendingOps === null) return;
+			const o = pendingOps;
+			pendingOps = null;
+			applyCustomTokensNow(o);
 		}
 		let lastBgKey = "";
+		/**
+		* Whether the palette write in flight may fade — the answer `applyCustomTokens`
+		* hands back to the callers that paint their own surfaces inline.
+		*
+		* It has to travel out of `applyCustomTokensNow` (which is where the decision is
+		* made) because those callers run AFTER it in the same task, and re-deciding
+		* there would be a second opinion on the same question.
+		*/
+		let lastFadeable = false;
 		function applyCustomTokensNow(ops) {
+			lastFadeable = false;
 			const src = palette();
 			if (src === null) {
 				clearCustomTokens();
@@ -2343,8 +2651,18 @@ window.__ModuleLoader__.load({
 			const [h, s, l] = rColor();
 			try {
 				const forceDark = own && l < .55;
-				const key = own ? `own:${h}|${s}|${l}` : `host:${HOST_SURFACE_TOKENS.map((n) => tokens[n] ?? "").join("|")}`;
-				if (key !== baseTokenKey) {
+				const key = paletteKey(src, [
+					h,
+					s,
+					l
+				]);
+				const paletteChanged = key !== baseTokenKey;
+				const scheme = own ? forceDark ? "dark" : "light" : resolveHostDark() ? "dark" : "light";
+				const fadeable = paletteChanged && paletteFadeAllowed(paletteScheme, scheme);
+				lastFadeable = fadeable;
+				applyPaletteFade(fadeable);
+				if (paletteChanged) {
+					paletteScheme = scheme;
 					if (own) {
 						if (forceDark) document.body.setAttribute(DARK_ATTR, OWN_SCHEME);
 						else document.body.removeAttribute(DARK_ATTR);
@@ -2367,9 +2685,11 @@ window.__ModuleLoader__.load({
 				const bgKey = `${baseTokenKey}|${ops.bg}`;
 				if (bgKey !== lastBgKey) {
 					lastBgKey = bgKey;
-					applyPartOpacities(ops);
+					applyPartOpacities(ops, fadeable);
 				}
-			} catch {}
+			} catch (e) {
+				console.warn("dsh-background-by-model: could not re-emit the palette tokens", e);
+			}
 		}
 		const SETTINGS_PANEL_SEL = "[role=\"dialog\"][aria-modal=\"true\"][aria-labelledby]";
 		const SETTINGS_STYLE_RULE = `${SETTINGS_PANEL_SEL}{background:var(--dsh-any-bg-settings-surface,var(--dsw-alias-bg-layer-2));backdrop-filter:var(--dsh-any-blur-settings,none);}html[${THEMED_ATTR}] ${SETTINGS_PANEL_SEL}{--dsw-alias-bg-layer-1:var(--dsh-any-bg-settings-layer-1);--dsw-alias-bg-layer-2:var(--dsh-any-bg-settings-layer-2);--dsw-alias-bg-layer-3:var(--dsh-any-bg-settings-layer-3)}${SETTINGS_PANEL_SEL} .dab-card{backdrop-filter:var(--dsh-any-blur-card-panels,none);-webkit-backdrop-filter:var(--dsh-any-blur-card-panels,none)}`;
@@ -2404,6 +2724,100 @@ window.__ModuleLoader__.load({
 			write("--dsh-any-traj-layer-2", "--dsw-alias-bg-layer-2");
 			write("--dsh-any-traj-layer-3", "--dsw-alias-bg-layer-3");
 		}
+		/** Elements whose own token declarations change when the palette does: the body
+		*  (which everything else inherits), and the two surfaces that RE-declare the
+		*  layer tokens instead of inheriting them. */
+		const FADE_SELECTORS = [
+			"body",
+			SETTINGS_PANEL_SEL,
+			"[data-conversation-composer-overlay]"
+		];
+		/** The token names the plugin re-emits. One palette is enough: every branch
+		*  defines the same set, and an unknown name would only be registered when the
+		*  host can answer for it (see `fadeInitials`). */
+		function fadeTokenNames() {
+			return Object.keys(genTokens(220, .55, .25).tokens);
+		}
+		let fadeStyleEl = null;
+		let fadeInitials = null;
+		let fadeCssCache = "";
+		/** The scheme the last written palette had, so a FLIP can be told from a tint. */
+		let paletteScheme = null;
+		function ensureFadeSheet() {
+			if (fadeStyleEl?.isConnected) return fadeStyleEl;
+			fadeStyleEl = document.createElement("style");
+			fadeStyleEl.dataset.plugin = "dsh-background-by-model-fade";
+			markOwnSheet(fadeStyleEl);
+			document.head.appendChild(fadeStyleEl);
+			return fadeStyleEl;
+		}
+		/**
+		* The host's own value for each token — the `initial-value` a registration needs,
+		* and the test for whether a token may be registered at all.
+		*
+		* Read with the plugin's token sheet muted, for the same reason `readHostPalette`
+		* does it: our rule re-emits the very names being asked for. Cached, because the
+		* answer only changes with the host's scheme and a stale hint is only ever used
+		* for a token the host does not publish anyway.
+		*/
+		function fadeInitialsOf(names) {
+			if (fadeInitials !== null) return fadeInitials;
+			const sheet = tokenStyleEl;
+			const muted = sheet !== null && sheet.isConnected && !sheet.disabled;
+			if (muted) sheet.disabled = true;
+			try {
+				const computed = getComputedStyle(document.body);
+				const out = {};
+				for (const name of names) {
+					const used = resolveCssColor(computed.getPropertyValue(name));
+					if (used !== null) out[name] = used;
+				}
+				fadeInitials = out;
+				return out;
+			} catch {
+				fadeInitials = {};
+				return fadeInitials;
+			} finally {
+				if (muted) sheet.disabled = false;
+			}
+		}
+		/** How long a colour change may take, or `0` for "do not animate it".
+		*
+		* The same decision the wallpaper layer makes (`transitionPlan` over the global
+		* effect, the resolved duration and the OS preference), so the two halves of one
+		* switch can never disagree about whether they are animating. */
+		function paletteFadeMs() {
+			const tr = rTransition();
+			const plan = transitionPlan({
+				effect: tr.effect,
+				easing: tr.easing,
+				durationMs: rFadeMs(),
+				canAnimate: true,
+				reducedMotion: prefersReducedMotion()
+			});
+			return plan.animate ? plan.durationMs : 0;
+		}
+		/** Arm the fade for a palette change, or disarm it for anything else.
+		*
+		* `animate` is false on every pass that only moves an alpha (a slider drag): the
+		* tokens are rewritten there too, and a live transition would make the surface
+		* lag behind the pointer. */
+		function applyPaletteFade(animate) {
+			const initials = fadeInitialsOf(fadeTokenNames());
+			const css = paletteFadeCss({
+				selectors: FADE_SELECTORS,
+				initial: initials,
+				durationMs: animate ? paletteFadeMs() : 0,
+				easing: rTransition().easing
+			});
+			if (css === fadeCssCache) return;
+			fadeCssCache = css;
+			ensureFadeSheet().textContent = css;
+		}
+		/** Inline `transition` for an element the plugin paints itself; `0` disarms it. */
+		function fadeInlineFor(animate) {
+			return paletteFadeInline(animate ? paletteFadeMs() : 0, rTransition().easing);
+		}
 		const RIGHTBAR_STYLE_RULE = "div[data-sidebar-right-panel]:not(:has([data-dockkit-content],[data-dockkit-empty]))[data-sidebar-right-open],div[data-sidebar-right-panel] [data-dockkit-content]:not([data-dockkit-float]),div[data-sidebar-right-panel] [data-dockkit-empty]{background:var(--dsh-any-bg-rightbar,var(--dsw-alias-bg-base))!important}div[data-sidebar-right-panel][data-sidebar-right-open]{-webkit-backdrop-filter:var(--dsh-any-blur-rightbar,none);backdrop-filter:var(--dsh-any-blur-rightbar,none)}";
 		/** Paint the file-preview panel's surface from its own slider. */
 		function applyRightbarOverrides(op) {
@@ -2481,7 +2895,7 @@ window.__ModuleLoader__.load({
 		*  the frame. The frame's translucent bg-base sits UNDER the sidebar, so
 		*  reducing the main-bg opacity stacked a second alpha onto the sidebar; moving
 		*  the alpha onto the columns keeps the sidebar owned by its own slider. */
-		function applyPartOpacities(ops) {
+		function applyPartOpacities(ops, fade = false) {
 			discoverParts();
 			if (frameEl === null) return;
 			const base = palette()?.tokens["--dsw-alias-bg-base"];
@@ -2494,8 +2908,15 @@ window.__ModuleLoader__.load({
 				return;
 			}
 			frameEl.style.background = "transparent";
-			if (centerEl !== null) centerEl.style.background = withAlpha(base, ops.bg);
-			if (detailsEl !== null) detailsEl.style.background = withAlpha(base, ops.bg);
+			const transition = fadeInlineFor(fade);
+			if (centerEl !== null) {
+				centerEl.style.transition = transition;
+				centerEl.style.background = withAlpha(base, ops.bg);
+			}
+			if (detailsEl !== null) {
+				detailsEl.style.transition = transition;
+				detailsEl.style.background = withAlpha(base, ops.bg);
+			}
 		}
 		/** Blur of the option panels inside the settings dialog (.dab-card), owned by
 		*  the "dialog option panel" (card) blur slider. Written as a plugin-owned
@@ -2705,10 +3126,11 @@ window.__ModuleLoader__.load({
 			if (!tableFixStyleEl.isConnected) document.head.appendChild(tableFixStyleEl);
 		}
 		/** Re-derive the conversation view cards from the current config. */
-		function applyViewCards() {
+		function applyViewCards(fade = false) {
 			discoverParts();
 			if (centerEl === null) return;
 			const surface = palette()?.tokens["--dsw-alias-bg-layer-1"];
+			const transition = fadeInlineFor(fade);
 			VIEW_CARDS.forEach((spec, i) => {
 				const target = discoverViewTarget(i, spec);
 				if (target === null) return;
@@ -2718,6 +3140,7 @@ window.__ModuleLoader__.load({
 				if (!plain) {
 					if (!target.hasAttribute(spec.mark)) stashCardPrev(target, spec.prev, false);
 					const borderAlpha = opacity > 0 ? Math.min(1, opacity * 1.5) : blurPx > 0 ? .35 : 0;
+					target.style.transition = transition;
 					target.style.background = surface !== void 0 ? withAlpha(surface, opacity) : "transparent";
 					target.style.border = surface !== void 0 ? `1px solid ${withAlpha(surface, borderAlpha)}` : "1px solid transparent";
 					target.style.borderRadius = "16px";
@@ -2840,6 +3263,13 @@ window.__ModuleLoader__.load({
 			l.el.style.backgroundImage = "";
 			l.el.style.backgroundSize = "";
 			l.el.style.backgroundPosition = "";
+			l.el.style.transform = "none";
+		}
+		/** Write the two properties a switch animates. Both are always written, so a
+		*  layer can never keep half of a previous effect. */
+		function applyLayerStyle(el, style) {
+			el.style.opacity = style.opacity;
+			el.style.transform = style.transform;
 		}
 		/** Intrinsic-size cache for the center mode (native pixels of the current image). */
 		let imgNat = null;
@@ -2908,13 +3338,18 @@ window.__ModuleLoader__.load({
 				});
 			}
 		}
-		/** Whether a switch should animate: nothing to fade from, an invisible
-		*  wallpaper and a reduced-motion preference all switch instantly. */
-		function canFade(from) {
+		/** Whether there is anything to animate FROM: a wallpaper on screen that is
+		*  actually visible. The duration question belongs to `rFadeMs`, and the
+		*  `reduced-motion` veto to `transitionPlan` — this answers only the layer half,
+		*  so a first paint (no previous image) never fades in from nothing. */
+		function canAnimateFrom(from) {
 			if (from.url === null) return false;
-			if (rWop() <= .01) return false;
+			return rWop() > .01;
+		}
+		/** Whether the OS asks for reduced motion right now. */
+		function prefersReducedMotion() {
 			const mm = typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
-			return mm === null || !mm.matches;
+			return mm !== null && mm.matches;
 		}
 		/** End an in-flight fade: promote the incoming layer, free the one under it. */
 		function finishFade(idx) {
@@ -2927,6 +3362,7 @@ window.__ModuleLoader__.load({
 			front = idx;
 			const el = layers[idx].el;
 			el.style.opacity = "1";
+			el.style.transform = "none";
 			el.style.willChange = "";
 			clearLayer(layers[idx === 0 ? 1 : 0]);
 		}
@@ -2943,6 +3379,7 @@ window.__ModuleLoader__.load({
 			const el = layers[idx].el;
 			el.style.transition = "none";
 			el.style.opacity = "1";
+			el.style.transform = "none";
 			el.style.willChange = "";
 			clearLayer(layers[idx === 0 ? 1 : 0]);
 		}
@@ -2958,6 +3395,7 @@ window.__ModuleLoader__.load({
 			const el = layers[idx].el;
 			el.style.transition = "none";
 			el.style.opacity = "0";
+			el.style.transform = "none";
 			el.style.willChange = "";
 			clearLayer(layers[idx]);
 		}
@@ -2988,27 +3426,34 @@ window.__ModuleLoader__.load({
 			const idx = front === 0 ? 1 : 0;
 			const target = ls[idx];
 			const el = target.el;
+			const tr = rTransition();
+			const plan = transitionPlan({
+				effect: tr.effect,
+				easing: tr.easing,
+				durationMs: rFadeMs(),
+				canAnimate: canAnimateFrom(from),
+				reducedMotion: prefersReducedMotion()
+			});
 			el.style.transition = "none";
-			el.style.opacity = "0";
+			el.style.willChange = plan.willChange;
+			applyLayerStyle(el, plan.from);
 			el.style.zIndex = "1";
 			from.el.style.zIndex = "0";
 			paintLayer(target, url);
 			applyWpEffects();
-			const fadeMs = rFadeMs();
-			if (!canFade(from) || fadeMs <= 0) {
-				el.style.opacity = "1";
+			if (!plan.animate) {
+				applyLayerStyle(el, plan.to);
 				front = idx;
 				clearLayer(from);
 				return;
 			}
-			el.style.willChange = "opacity";
 			pending = idx;
 			requestAnimationFrame(() => {
 				if (pending !== idx || layers === null) return;
-				el.style.transition = `opacity ${fadeMs}ms ease`;
-				el.style.opacity = "1";
+				el.style.transition = plan.transition;
+				applyLayerStyle(el, plan.to);
 			});
-			fadeTimer = window.setTimeout(() => finishFade(idx), fadeMs + 160);
+			fadeTimer = window.setTimeout(() => finishFade(idx), plan.durationMs + 160);
 		}
 		function applyWpEffects() {
 			if (wpEl === null || layers === null) return;
@@ -3035,11 +3480,12 @@ window.__ModuleLoader__.load({
 				clearCustomTokens();
 				clearOwnedSurfaces();
 			}
-			applyCustomTokens(rOps());
+			const paletteMoved = applyCustomTokens(rOps());
 			applySettingsOverrides(rSop());
 			applyTrajectoryOverrides(rTrajectoryOpacity());
 			applyRightbarOverrides(rRightbarOpacity());
 			applyPartBlurs(rBlurs());
+			applyViewCards(paletteMoved);
 		}
 		function teardownWp() {
 			dropWpContainer();
@@ -4772,15 +5218,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: {
@@ -4800,11 +5237,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, {
@@ -4834,6 +5266,12 @@ window.__ModuleLoader__.load({
 			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);
@@ -4961,8 +5399,61 @@ window.__ModuleLoader__.load({
 			const rotatable = rule.images.length >= 2;
 			const preset = ROTATE_PRESETS.find((x) => x.ms === rule.rotate.intervalMs);
 			const selSlot = image?.slot ?? null;
-			const moveSel = (dir) => {
-				if (selSlot !== null) p.moveRuleImage(rule.id, selSlot, dir);
+			/** 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;
@@ -5089,9 +5580,26 @@ window.__ModuleLoader__.load({
 										const thumb = p.imageOf(img.slot);
 										return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 											type: "button",
-											className: `dab-strip-item${i === selIdx ? " is-sel" : ""}${liveIndex === i ? " is-live" : ""}`,
-											title: `${i + 1} / ${rule.images.length}`,
-											onClick: () => setSel(i),
+											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,
@@ -5102,6 +5610,8 @@ window.__ModuleLoader__.load({
 													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(),
@@ -5162,38 +5672,6 @@ window.__ModuleLoader__.load({
 											},
 											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadIcon, { size: 13 }), t("rotReplaceImage")]
 										}) : null,
-										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,
-										rule.images.length >= 2 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-												type: "button",
-												className: "dab-icon-btn",
-												disabled: selIdx === 0,
-												title: t("rotImageEarlier"),
-												onClick: () => moveSel(-1),
-												children: "↑"
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-												type: "button",
-												className: "dab-icon-btn",
-												disabled: selIdx === rule.images.length - 1,
-												title: t("rotImageLater"),
-												onClick: () => moveSel(1),
-												children: "↓"
-											}),
-											selIdx !== 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-												type: "button",
-												className: "dab-btn dab-btn-ghost",
-												onClick: () => {
-													if (selSlot !== null) p.setCurrentImage(rule.id, selSlot);
-												},
-												children: t("rotMakeFirst")
-											}) : null
-										] }) : null,
 										selSlot !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 											type: "button",
 											className: "dab-btn dab-btn-ghost dab-btn-danger",
@@ -5401,14 +5879,19 @@ window.__ModuleLoader__.load({
 									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: [
@@ -5596,11 +6079,58 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/client/components/pages/ProfilePage.tsx
+		/** Chip labels, keyed by the value they set — so no chip can be built from a
+		*  value the schema does not accept, and `check:ui` still sees every key used. */
+		const EFFECT_KEYS = {
+			fade: "trEffectFade",
+			none: "trEffectNone",
+			zoom: "trEffectZoom",
+			slide: "trEffectSlide"
+		};
+		const EASING_KEYS = {
+			ease: "trEasingEase",
+			linear: "trEasingLinear",
+			"ease-out": "trEasingOut",
+			"ease-in-out": "trEasingInOut"
+		};
 		function ProfilePage({ p, notify }) {
-			const { t, exportTheme, importTheme } = p;
+			const { t, exportTheme, importTheme, setTransition } = p;
 			const importRef = (0, react.useRef)(null);
 			p.useStore((s) => s.rev + s.rulesRev);
 			const holidays = cfg.holidays;
+			const tr = cfg.transition;
+			const previewRef = (0, react.useRef)(null);
+			/** The OS preference, read at render: it vetoes the real switch (see
+			*  `transitionPlan`), so the card has to say so rather than show a preview of
+			*  something the interface will not do. */
+			const reduced = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+			/**
+			* Play the effect on the preview swatch, for the duration a real switch would
+			* use right now: the wallpaper fading into ITSELF is invisible, which is the
+			* one thing a transition setting must not leave the user guessing about.
+			*/
+			const play = () => {
+				const el = previewRef.current;
+				if (el === null) return;
+				const plan = transitionPlan({
+					effect: tr.effect,
+					easing: tr.easing,
+					durationMs: rFadeMs(),
+					canAnimate: true,
+					reducedMotion: false
+				});
+				el.style.transition = "none";
+				el.style.opacity = plan.from.opacity;
+				el.style.transform = plan.from.transform;
+				requestAnimationFrame(() => {
+					el.style.transition = plan.transition;
+					el.style.opacity = plan.to.opacity;
+					el.style.transform = plan.to.transform;
+				});
+			};
+			(0, react.useEffect)(() => {
+				if (!reduced) play();
+			}, [tr.effect, tr.easing]);
 			const onImport = async (file) => {
 				try {
 					const ok = await importTheme(file);
@@ -5648,9 +6178,106 @@ window.__ModuleLoader__.load({
 						})]
 					})
 				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+					className: "dab-card dab-rise",
+					style: { "--d": 1 },
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dab-part-head",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "dab-part-ico",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SparkleIcon, { size: 16 })
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "dab-part-name",
+								children: t("trTitle")
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "dab-swatch-title",
+							children: t("trEffect")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "dab-chip-row",
+							children: TRANSITION_EFFECTS.map((effect) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: `dab-chip${tr.effect === effect ? " is-active" : ""}`,
+								onClick: () => setTransition({ effect }),
+								children: t(EFFECT_KEYS[effect])
+							}, effect))
+						}),
+						tr.effect === "none" ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "dab-swatch-title",
+							style: { marginTop: 12 },
+							children: t("trEasing")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "dab-chip-row",
+							children: TRANSITION_EASINGS.map((easing) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: `dab-chip${tr.easing === easing ? " is-active" : ""}`,
+								onClick: () => setTransition({ easing }),
+								children: t(EASING_KEYS[easing])
+							}, easing))
+						})] }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "dab-swatch-title",
+							style: { marginTop: 12 },
+							children: t("trDuration")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							style: { marginTop: 2 },
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LiveSlider, {
+								label: t("trDuration"),
+								min: 0,
+								max: 3e3,
+								step: 50,
+								def: tr.durationMs,
+								fmt: (v) => `${v} ms`,
+								onInput: (v) => {
+									cfg.transition = normalizeTransition({
+										...cfg.transition,
+										durationMs: v
+									});
+									saveConfig();
+								},
+								onChange: (v) => setTransition({ durationMs: v })
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: 12,
+								marginTop: 13
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "dab-tr-preview",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									ref: previewRef,
+									className: "dab-tr-preview-in"
+								})
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								className: "dab-btn",
+								disabled: reduced,
+								onClick: play,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SparkleIcon, { size: 14 }), t("trPreview")]
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dab-hint",
+							style: { marginTop: 10 },
+							children: t("trHint")
+						}),
+						reduced ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dab-hint",
+							style: { marginTop: 6 },
+							children: t("trReducedHint")
+						}) : null
+					]
+				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "dab-profile-grid dab-rise",
-					style: { "--d": 2 },
+					style: { "--d": 3 },
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 						className: "dab-card dab-card-hover",
 						children: [
@@ -5714,7 +6341,7 @@ window.__ModuleLoader__.load({
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("footer", {
 					className: "dab-footer dab-rise",
-					style: { "--d": 3 },
+					style: { "--d": 4 },
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "dab-footer-mono",
 						children: "dsh-background-by-model"
@@ -6314,6 +6941,23 @@ window.__ModuleLoader__.load({
 				saveConfig();
 				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 {
 					const snapshot = ctx.locale.getSnapshot();
@@ -6390,6 +7034,8 @@ window.__ModuleLoader__.load({
 						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 = {
@@ -6398,13 +7044,14 @@ window.__ModuleLoader__.load({
 								color: null
 							};
 							rule.images.push(image);
+							added.push(slot);
 							setImage(slot, dataUrl);
 							writeImage(slot, dataUrl);
 						}
 						rulesRev++;
 						persistConfig();
 						repaintIfMoved(id, winner);
-						maybeAutoExtract(id, rule.images[rule.images.length - 1]?.slot);
+						maybeAutoExtractEach(id, added);
 					},
 					removeRuleImage: (id, slot) => {
 						const rule = ruleById(id);
@@ -6422,34 +7069,21 @@ window.__ModuleLoader__.load({
 						}
 						repaintIfMoved(id, winner);
 					},
-					moveRuleImage: (id, slot, dir) => {
-						const rule = ruleById(id);
-						if (rule === null) return;
-						const idx = rule.images.findIndex((i) => i.slot === slot);
-						const to = idx + dir;
-						if (idx < 0 || to < 0 || to >= rule.images.length) return;
-						const winner = winnerId();
-						const [image] = rule.images.splice(idx, 1);
-						rule.images.splice(to, 0, image);
-						rulesRev++;
-						if (id === activeRuleId) {
-							setRotIndex(Math.max(0, to));
-							scheduleRotation(true);
-						}
-						persistConfig();
-						repaintIfMoved(id, winner);
-					},
-					setCurrentImage: (id, slot) => {
+					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.unshift(image);
+						rule.images.splice(at, 0, image);
 						rulesRev++;
 						if (id === activeRuleId) {
-							setRotIndex(0);
+							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();
@@ -6484,6 +7118,15 @@ window.__ModuleLoader__.load({
 						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;
@@ -6585,6 +7228,24 @@ window.__ModuleLoader__.load({
 						saveConfig();
 						sync();
 					},
+					/**
+					* Patch the GLOBAL wallpaper-switch transition (effect, easing, where the
+					* duration comes from).
+					*
+					* Deliberately no `applyWp()`: this setting decides what the NEXT switch
+					* looks like and nothing on screen changes right now, so re-running the
+					* whole apply (token rewrite, every interface part) for something that
+					* paints nothing would be the expensive way to say "saved". The Config
+					* page's own preview plays the effect instead.
+					*/
+					setTransition: (patch) => {
+						cfg.transition = normalizeTransition({
+							...cfg.transition,
+							...patch
+						});
+						sync();
+						saveConfig();
+					},
 					setHolidaysEnabled: (v) => {
 						cfg.holidays.enabled = v;
 						persistConfig();
@@ -6600,7 +7261,7 @@ window.__ModuleLoader__.load({
 							if (url !== null) images[slot] = url;
 						}
 						const payload = {
-							version: 5,
+							version: 6,
 							exportedAt: (/* @__PURE__ */ new Date()).toISOString(),
 							config: cfg,
 							images