dsh-background-by-model 0.7.4 → 0.7.6

package/lib/client.js

@@ -33,6 +33,7 @@ window.__ModuleLoader__.load({
 			uiOpacityBg: "主背景",
 			uiOpacitySide: "左侧栏",
 			uiOpacityCard: "卡片与菜单面板",
+			uiOpacityCode: "代码块",
 			uiOpacityInput: "输入框与控件",
 			uiSop: "设置界面透明度",
 			uiChatRegion: "对话文本框",
@@ -54,12 +55,21 @@ window.__ModuleLoader__.load({
 			tryoutEmpty: "输入模型名即可试跑",
 			autoExtract: "选图后自动取主题色",
 			ruleAdd: "新增规则",
+			ruleNoneHint: "还没有规则，点上面的「新增规则」新建一条",
 			ruleFallbackBadge: "兜底",
 			ruleMatchPlaceholder: "如 flash / glm（忽略大小写，留空则不参与匹配）",
 			ruleEnabled: "启用",
 			ruleUp: "上移",
 			ruleDown: "下移",
 			ruleRemove: "删除规则",
+			tabListLabel: "规则",
+			tabPick: "选择规则",
+			tabMore: "更多规则",
+			tabUnnamed: "未命名规则",
+			tabLive: "正在使用",
+			tabRotating: "轮换中",
+			tabOff: "已停用",
+			ruleRemoveConfirm: "再点一次删除",
 			ruleNoImage: "尚未选择图片",
 			ruleFromUrl: "从网址",
 			ruleUrlPlaceholder: "粘贴图片网址 https://…",
@@ -83,6 +93,7 @@ window.__ModuleLoader__.load({
 			ruleColorTargetImage: "作用于选中的图片：",
 			ruleColorTargetRule: "作用于本规则（它还没有图片）",
 			ruleLayout: "布局模式",
+			ruleLayoutNoImage: "添加图片后可分别设置每张图的布局模式",
 			ruleFramingEdit: "编辑位置",
 			ruleOpacity: "背景透明度",
 			ruleBlur: "背景模糊",
@@ -110,7 +121,6 @@ window.__ModuleLoader__.load({
 			rotEvery1m: "1 分钟",
 			rotEvery5m: "5 分钟",
 			rotEvery30m: "30 分钟",
-			rotEvery1h: "1 小时",
 			bgModeFit: "适应",
 			bgModeFill: "填充",
 			bgModeStretch: "拉伸",
@@ -140,7 +150,26 @@ window.__ModuleLoader__.load({
 			toastExportDone: "配置文件已开始下载",
 			importDone: "已导入配置",
 			importFail: "导入失败，文件格式不正确",
+			recCardTitle: "推荐配置",
+			recCardDesc: "从项目素材库下载作者维护的一整套配置（规则、壁纸与接口设置），一键替换当前的全部内容",
+			recAdopt: "采用推荐配置",
+			recBusy: "正在下载",
+			recConfirmTitle: "替换当前的全部配置？",
+			recConfirmBody: "会先删除你现在的全部规则与壁纸，再写入这份推荐配置。删除的文件无法恢复。",
+			recStatRules: "条规则",
+			recStatImages: "张壁纸",
+			recConfirmOk: "删除并替换",
+			recConfirmCancel: "取消",
+			recDone: "已采用推荐配置",
+			recFailNetwork: "推荐配置下载失败，请检查网络后重试",
+			recFailNotProfile: "素材库返回的内容不是配置，请稍后重试",
+			recFailNewer: "这份推荐配置需要更新的插件版本，未做任何改动",
+			recFailTooMany: "这份推荐配置列出的图片数量超出限制，未做任何改动",
+			recFailTooLarge: "这份推荐配置体积过大，未做任何改动",
+			recFailImage: "这张壁纸没拿到（素材库里缺这个文件）：",
+			recFailApply: "未能写入推荐配置，你原来的配置没有被改动",
 			footerTag: "按模型换背景插件",
+			repoLink: "在 GitHub 上打开仓库",
 			holidayTitle: "节日特殊背景",
 			holidayEnable: "启用节日特殊背景（中秋当天、国庆 10 月 1–7 日）",
 			trTitle: "切换效果",
@@ -174,6 +203,7 @@ window.__ModuleLoader__.load({
 			uiOpacityBg: "Main background",
 			uiOpacitySide: "Left panel",
 			uiOpacityCard: "Cards & menus",
+			uiOpacityCode: "Code blocks",
 			uiOpacityInput: "Input & controls",
 			uiSop: "Settings interface opacity",
 			uiChatRegion: "Conversation text frame",
@@ -195,12 +225,21 @@ window.__ModuleLoader__.load({
 			tryoutEmpty: "Type a model name to test the list",
 			autoExtract: "Extract the theme color when an image is chosen",
 			ruleAdd: "Add rule",
+			ruleNoneHint: "No rules yet — use “Add rule” in the tab strip above",
 			ruleFallbackBadge: "fallback",
 			ruleMatchPlaceholder: "e.g. flash / glm (case-insensitive, empty never matches)",
 			ruleEnabled: "Enabled",
 			ruleUp: "Move up",
 			ruleDown: "Move down",
 			ruleRemove: "Remove rule",
+			tabListLabel: "Rules",
+			tabPick: "Pick a rule",
+			tabMore: "More rules",
+			tabUnnamed: "Unnamed rule",
+			tabLive: "In use",
+			tabRotating: "Rotating",
+			tabOff: "Disabled",
+			ruleRemoveConfirm: "Click again to delete",
 			ruleNoImage: "No image yet",
 			ruleFromUrl: "From URL",
 			ruleUrlPlaceholder: "Paste an image URL https://…",
@@ -224,6 +263,7 @@ window.__ModuleLoader__.load({
 			ruleColorTargetRule: "Applies to this rule (it has no image yet)",
 			ruleColorExtract: "Extract from image",
 			ruleLayout: "Layout mode",
+			ruleLayoutNoImage: "Add an image to give each one its own layout mode",
 			ruleFramingEdit: "Edit position",
 			ruleOpacity: "Background opacity",
 			ruleBlur: "Background blur",
@@ -251,7 +291,6 @@ window.__ModuleLoader__.load({
 			rotEvery1m: "1 min",
 			rotEvery5m: "5 min",
 			rotEvery30m: "30 min",
-			rotEvery1h: "1 h",
 			bgModeFit: "Fit",
 			bgModeFill: "Fill",
 			bgModeStretch: "Stretch",
@@ -281,7 +320,26 @@ window.__ModuleLoader__.load({
 			toastExportDone: "Export started",
 			importDone: "Profile imported",
 			importFail: "Import failed — invalid file",
+			recCardTitle: "Recommended profile",
+			recCardDesc: "Download the author's own full setup — rules, wallpapers and interface settings — and replace everything with it",
+			recAdopt: "Use recommended profile",
+			recBusy: "Downloading",
+			recConfirmTitle: "Replace your entire profile?",
+			recConfirmBody: "Every rule and wallpaper you have is deleted first, then this profile is written in its place. Deleted files cannot be recovered.",
+			recStatRules: "rules",
+			recStatImages: "wallpapers",
+			recConfirmOk: "Delete and replace",
+			recConfirmCancel: "Cancel",
+			recDone: "Recommended profile applied",
+			recFailNetwork: "Could not download the recommended profile — check your connection and retry",
+			recFailNotProfile: "The asset host answered with something that is not a profile — try again later",
+			recFailNewer: "This profile needs a newer plugin version. Nothing was changed.",
+			recFailTooMany: "The recommended profile names more images than the plugin will fetch. Nothing was changed.",
+			recFailTooLarge: "The recommended profile is too large. Nothing was changed.",
+			recFailImage: "Could not fetch this wallpaper — the asset host has no such file:",
+			recFailApply: "Could not write the recommended profile — your own is untouched",
 			footerTag: "Per-model wallpaper plugin",
+			repoLink: "Open the repository on GitHub",
 			holidayTitle: "Holiday backgrounds",
 			holidayEnable: "Enable holiday backgrounds (Mid-Autumn day, Oct 1–7)",
 			trTitle: "Switch effect",
@@ -578,18 +636,22 @@ window.__ModuleLoader__.load({
 		*   `sidebar` sidebar (`--dsw-specific-sidebar-fill`)
 		*   `card`    cards/panels (`--dsw-alias-bg-layer-1/2/3`, `--dsw-specific-menu`
 		*             and its 0.1.7 alias `--dsw-menu-surface-fill`)
+		*   `code`    code blocks, banner included (`--dsw-alias-markdown-code-block`,
+		*             `--dsw-alias-markdown-code-block-banner`)
 		*   `input`   input/control surfaces (`--dsw-specific-input-major`)
 		*/
 		const PART_OPACITY_KEYS = [
 			"bg",
 			"sidebar",
 			"card",
+			"code",
 			"input"
 		];
 		const DEFAULT_PART_OPACITIES = {
 			bg: .85,
 			sidebar: .93,
 			card: 1,
+			code: 1,
 			input: 1
 		};
 		/**
@@ -722,7 +784,9 @@ window.__ModuleLoader__.load({
 		*
 		* Holidays default to `fill` rather than a rule's `fit`: these are full-bleed
 		* festival wallpapers, and `fit` would letterbox them on every aspect ratio the
-		* art was not cut for.
+		* art was not cut for. The mode now lives on the IMAGE (see `BgImage.bgMode`), so
+		* that default is written there — and `fill` is what a holiday's read-back
+		* sanitizer refuses to lose (see `normalizeHolidayRule`).
 		*/
 		function defaultHolidayRule(def) {
 			const color = hexToHsl(def.color);
@@ -730,13 +794,13 @@ window.__ModuleLoader__.load({
 				id: def.id,
 				images: [{
 					slot: def.slot,
+					bgMode: "fill",
 					bgState: { ...DEFAULT_BG_STATE },
 					color
 				}],
 				match: "",
 				enabled: true,
 				color,
-				bgMode: "fill",
 				wallpaperOpacity: 1,
 				blur: 0,
 				rotate: defaultRotation()
@@ -867,12 +931,21 @@ window.__ModuleLoader__.load({
 		* 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.
+		*
+		* `inheritMode` is the same one-shot lift for the layout mode, and it is the
+		* caller's to resolve because the two callers answer differently: a user rule
+		* passes the mode its config carried at the RULE level (a schema-5 config, where
+		* 适应/填充 was one choice for the whole rotation), a holiday passes `fill` (its
+		* own default, which is not up for the lift to change). An entry that HAS a
+		* `bgMode` key keeps it — including one that has just been set to a value equal
+		* to the default, which is a decision and not an absence.
 		*/
-		function normalizeImage(raw, inherit = null) {
+		function normalizeImage(raw, inherit = null, inheritMode = "fit") {
 			const i = raw ?? {};
 			if (typeof i.slot !== "string" || !SLOT_RE.test(i.slot)) return null;
 			return {
 				slot: i.slot,
+				bgMode: BG_MODES$1.includes(i.bgMode) ? i.bgMode : inheritMode,
 				bgState: normalizeBgState(i.bgState),
 				color: hasOwn(i, "color") ? normalizeHsl(i.color) : inherit
 			};
@@ -892,6 +965,14 @@ window.__ModuleLoader__.load({
 		* 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.
 		*
+		* The layout mode makes the same trip in the other direction, and this is the
+		* last release that has to: a config written before 0.7.5 keeps `bgMode` at the RULE
+		* level, where one value covered every picture of a rotation, so it is read here
+		* once and handed to each image as its inherited mode. What the user chose
+		* therefore survives the move the same way it survived the color's — the mode is
+		* not reset to the default on upgrade, and the field it used to live on is simply
+		* not written back.
+		*
 		* 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
@@ -906,11 +987,12 @@ window.__ModuleLoader__.load({
 			const id = typeof r.id === "string" && r.id !== "" ? r.id : null;
 			if (id === null) return null;
 			const color = normalizeHsl(r.color);
+			const mode = BG_MODES$1.includes(r.bgMode) ? r.bgMode : "fit";
 			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);
+				const image = normalizeImage(entry, color, mode);
 				if (image === null || seen.has(image.slot)) continue;
 				seen.add(image.slot);
 				images.push(image);
@@ -918,21 +1000,22 @@ window.__ModuleLoader__.load({
 			const legacySlot = typeof r.slot === "string" && SLOT_RE.test(r.slot) ? r.slot : null;
 			if (images.length === 0 && legacySlot !== null) images.push({
 				slot: legacySlot,
+				bgMode: mode,
 				bgState: normalizeBgState(r.bgState),
 				color
 			});
 			if (images.length === 0 && !hadList) return null;
-			const mode = BG_MODES$1.includes(r.bgMode) ? r.bgMode : "fit";
+			const rotate = normalizeRotation(r.rotate);
+			if (images.length < 2) rotate.enabled = false;
 			return {
 				id,
 				images,
 				match: typeof r.match === "string" ? r.match : "",
 				enabled: r.enabled !== false,
 				color,
-				bgMode: mode,
 				wallpaperOpacity: clamp01(r.wallpaperOpacity, 1),
 				blur: clamp$1(r.blur, 0, 60, 0),
-				rotate: normalizeRotation(r.rotate)
+				rotate
 			};
 		}
 		/**
@@ -943,9 +1026,12 @@ window.__ModuleLoader__.load({
 		* 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.
+		* Everything else is sanitized exactly like a rule's field — except three things
+		* that stay the definition's own: the image list and the rotation (so a festival
+		* can never be swapped or cycled), and the layout mode, which is the definition's
+		* `fill` for the same reason the color is its own — full-bleed art letterboxed by
+		* a stale `fit` is the one thing this feature must not do, and the mode is not
+		* editable for a holiday anywhere in the panel.
 		*/
 		function normalizeHolidayRule(def, raw) {
 			const r = raw ?? {};
@@ -953,11 +1039,11 @@ window.__ModuleLoader__.load({
 			return {
 				...base,
 				enabled: r.enabled !== false,
-				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),
 				images: base.images.map((image) => ({
 					slot: image.slot,
+					bgMode: image.bgMode,
 					bgState: normalizeBgState(r.images?.[0]?.bgState ?? r.bgState),
 					color: image.color
 				}))
@@ -999,50 +1085,6 @@ window.__ModuleLoader__.load({
 				holidays: normalizeHolidays(r.holidays)
 			};
 		}
-		//#endregion
-		//#region src/client/state.ts
-		const PALETTE = [
-			[
-				356,
-				.72,
-				.55
-			],
-			[
-				24,
-				.78,
-				.55
-			],
-			[
-				44,
-				.8,
-				.55
-			],
-			[
-				152,
-				.62,
-				.5
-			],
-			[
-				174,
-				.68,
-				.48
-			],
-			[
-				208,
-				.72,
-				.55
-			],
-			[
-				252,
-				.68,
-				.6
-			],
-			[
-				300,
-				.64,
-				.58
-			]
-		];
 		freshThemeConfig();
 		let cfg = freshThemeConfig();
 		const images = /* @__PURE__ */ new Map();
@@ -1094,6 +1136,10 @@ window.__ModuleLoader__.load({
 				return null;
 			}
 		}
+		function clearImages() {
+			for (const slot of Array.from(displayUrls.keys())) revokeDisplay(slot);
+			images.clear();
+		}
 		let activeRuleId = null;
 		let activeMatched = false;
 		let modelLabel = "";
@@ -1194,7 +1240,6 @@ window.__ModuleLoader__.load({
 				match: "",
 				enabled: true,
 				color: null,
-				bgMode: "fit",
 				wallpaperOpacity: 1,
 				blur: 0,
 				rotate: defaultRotation()
@@ -1255,8 +1300,17 @@ window.__ModuleLoader__.load({
 				.25
 			];
 		}
+		/**
+		* Layout mode of the CURRENT image (per image, see BgImage).
+		*
+		* Read from the image and never from the rule, which no longer has a mode at all:
+		* a rotation through a photo and a screenshot has to be able to letterbox one and
+		* fill the other, and a rule-level answer would be the wrong one for half the
+		* list. A rule with no image has nothing to place, so it answers with the
+		* default — the renderer's null case, painted as "no wallpaper".
+		*/
 		function rBgMode() {
-			return activeRule()?.bgMode ?? "fit";
+			return activeImage()?.bgMode ?? "fit";
 		}
 		function rWop() {
 			return clamp01(activeRule()?.wallpaperOpacity, 1);
@@ -1329,6 +1383,14 @@ window.__ModuleLoader__.load({
 			}
 			rotIndex = 0;
 		}
+		function resetConfig() {
+			cfg = freshThemeConfig();
+			clearImages();
+			activeRuleId = null;
+			activeMatched = false;
+			modelLabel = "";
+			rotIndex = 0;
+		}
 		//#endregion
 		//#region src/client/rotation.ts
 		/** Dwell-time presets the settings UI offers, in ms. */
@@ -1352,10 +1414,6 @@ window.__ModuleLoader__.load({
 			{
 				ms: 18e5,
 				key: "rotEvery30m"
-			},
-			{
-				ms: 36e5,
-				key: "rotEvery1h"
 			}
 		];
 		/**
@@ -1510,7 +1568,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 >= 5 ? "current" : "legacy";
+			hostShape = schema === null ? "legacy" : schema >= 6 ? "current" : "legacy";
 			if (hostShape === "legacy") holdWrite();
 			return {
 				config: d.config,
@@ -1559,6 +1617,52 @@ window.__ModuleLoader__.load({
 				error: v?.error ?? "failed"
 			};
 		}
+		/**
+		* The profile's manifest and config, in one answer. Reads nothing, writes nothing.
+		*
+		* Raw rather than `rpcCall` for the same reason `fetchImageUrl` is: the node half
+		* answers this one with a value that CARRIES its own failure, and the `error`
+		* inside it is the only thing worth showing the user — the generic "rpc failed"
+		* log would throw that distinction away.
+		*/
+		async function fetchPresetConfig() {
+			return unwrapPreset(await rpcRaw("fetchPresetConfig", {}));
+		}
+		/** One of the profile's wallpapers, addressed by the slot the config names. */
+		async function fetchPresetImage(slot) {
+			return unwrapPreset(await rpcRaw("fetchPresetImage", { slot }));
+		}
+		/**
+		* The envelope both profile calls share: a transport failure and a value-level
+		* failure have to come out the same shape, because the page renders one message
+		* either way and must not have to know which layer said no.
+		*/
+		function unwrapPreset(res) {
+			if (!res) return {
+				ok: false,
+				error: "no response"
+			};
+			if (res.ok !== true) return {
+				ok: false,
+				error: res.error?.message ?? "request failed"
+			};
+			const v = res.value;
+			if (v?.ok !== true) return {
+				ok: false,
+				error: typeof v?.error === "string" ? v.error : "failed"
+			};
+			return v;
+		}
+		/**
+		* Empty the store: the config and every rule image.
+		*
+		* Only the recommended profile uses this, and only after its download has
+		* already succeeded — see `applyRecommended`. Nothing else in the plugin deletes
+		* the user's configuration wholesale.
+		*/
+		async function resetStore() {
+			return await rpcCall("resetStore", {}) === true;
+		}
 		/** Host default model — used only when the per-session services are absent. */
 		async function readDefaultModel() {
 			const data = await rpcCall("defaultModel", {});
@@ -1603,10 +1707,11 @@ window.__ModuleLoader__.load({
 			if (names.length === 0) return "";
 			const css = registrations(names, input.initial);
 			if (!(input.durationMs > 0)) return css;
+			const written = new Set(input.written);
 			const timing = (n) => `${n} ${input.durationMs}ms ${input.easing}`;
 			return `${css}${input.scopes.map((s) => ({
 				selector: s.selector,
-				transitions: [...s.tokens.filter((n) => names.includes(n)), ...s.properties ?? []]
+				transitions: [...s.tokens.filter((n) => names.includes(n) && written.has(n)), ...s.properties ?? []]
 			})).filter((s) => s.transitions.length > 0).map((s) => `${s.selector}{transition:${s.transitions.map(timing).join(",")}}`).join("")}`;
 		}
 		/**
@@ -1777,6 +1882,7 @@ window.__ModuleLoader__.load({
 					"--dsw-alias-interactive-bg-hover": rgba(h(0), s(0), l(-.3), .08),
 					"--dsw-alias-interactive-bg-active": rgba(h(0), s(0), l(-.3), .14),
 					"--dsw-alias-markdown-code-block": hsl(h(0), s(-.1), l(-.03)),
+					"--dsw-alias-markdown-code-block-banner": hsl(h(0), s(-.1), l(-.06)),
 					"--dsw-alias-markdown-inline-code": hsl(h(0), s(-.08), l(.04)),
 					"--dsw-specific-sidebar-fill": hsl(h(0), s(-.1), l(-.03)),
 					"--dsw-specific-sidebar-nav-item-active": hsl(h(0), s(-.08), l(.05)),
@@ -1998,11 +2104,43 @@ window.__ModuleLoader__.load({
 .dab-root{position:relative;color:var(--dsw-alias-label-primary);animation:dab-fade-in .35s ease both;container-type:inline-size;display:flex;flex-direction:column;align-items:center;width:100%;min-width:0;--dab-mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,"Courier New",monospace}
 .dab-root *,.dab-root *::before,.dab-root *::after{box-sizing:border-box}
 .dab-root button{font-family:inherit}
+/* ── scrollbars: the same bar as the settings panel we sit inside ────────────
+ * The host styles scrollbars globally off its --dsh-scrollbar-* tokens, but those
+ * declarations describe the app shell and its own scroll containers; a strip
+ * nested this deep got the platform default instead — a thick light bar with
+ * arrows, which is what the tab strip used to show beside the panel's own slim
+ * vertical one.
+ *
+ * So the plugin declares the block for its OWN scroll containers. The values are
+ * the host theme package's, for the layer-2 surface this panel is painted in:
+ * 5px, rounded, layer-2 tint, transparent track. Two notes for whoever edits it:
+ *
+ *   - the tokens go ON THE SCROLLER (the selector that carries the overflow), not
+ *     on .dab-root. A container that declares scrollbar-width:thin (as the nav
+ *     rail does on narrow panels) paints its own standard bar regardless of the
+ *     webkit block, and the host's standard-property fallback reads the thumb
+ *     token from that same element.
+ *   - every selector here is scoped to a dab- class: the stylesheet is injected
+ *     into the host page once, so a bare webkit-scrollbar selector would restyle
+ *     the whole harness. */
+.dab-tabs,.dab-pick-menu{--dsh-scrollbar-thumb:var(--dsw-alias-scrollbar-bg-l2);--dsh-scrollbar-thumb-hover:var(--dsw-alias-scrollbar-hover-l2);--dsh-scrollbar-width:5px}
+.dab-tabs::-webkit-scrollbar,.dab-pick-menu::-webkit-scrollbar{width:var(--dsh-scrollbar-width,5px);height:var(--dsh-scrollbar-width,5px)}
+.dab-tabs::-webkit-scrollbar-track,.dab-pick-menu::-webkit-scrollbar-track{background:transparent}
+.dab-tabs::-webkit-scrollbar-thumb,.dab-pick-menu::-webkit-scrollbar-thumb{background:var(--dsh-scrollbar-thumb);background-clip:content-box;border-radius:999px}
+.dab-tabs::-webkit-scrollbar-thumb:hover,.dab-pick-menu::-webkit-scrollbar-thumb:hover{background:var(--dsh-scrollbar-thumb-hover)}
+.dab-tabs::-webkit-scrollbar-corner,.dab-pick-menu::-webkit-scrollbar-corner{background:transparent}
+/* The host hides the platform's stepper arrows; without this the strip keeps the
+   little os arrows at both ends of the track while the panel's bar has none. */
+.dab-tabs::-webkit-scrollbar-button,.dab-pick-menu::-webkit-scrollbar-button{display:none}
 
 /* ── shell: nav rail + page body ─────────────────────────────────────────── */
 .dab-shell{display:grid;grid-template-columns:158px minmax(0,1fr);gap:26px;align-items:start;padding-bottom:8px;width:100%;max-width:980px;margin:0 auto}
 .dab-nav{position:sticky;top:0;display:flex;flex-direction:column;gap:18px}
-.dab-brand{display:flex;align-items:center;gap:10px;padding:2px 6px}
+/* The brand is an <a> (it opens the repository): an anchor brings its own colour
+   and underline, so both are reset here rather than left to the host's link
+   styles, which would repaint the tile's label. */
+.dab-brand{display:flex;align-items:center;gap:10px;padding:2px 6px;color:inherit;text-decoration:none}
+.dab-brand:hover .dab-brand-name{color:var(--dsw-alias-brand-primary)}
 .dab-brand-tile{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;color:var(--dsw-alias-label-primary-inverted);background:var(--dsw-alias-brand-primary);box-shadow:0 4px 14px -4px var(--dsw-alias-brand-primary)}
 .dab-brand-name{font-size:13px;font-weight:650;letter-spacing:.01em;line-height:1.25}
 .dab-brand-tag{font-size:9px;letter-spacing:.16em;font-weight:600;color:var(--dsw-alias-label-quaternary,var(--dsw-alias-label-tertiary));text-transform:uppercase}
@@ -2019,7 +2157,10 @@ window.__ModuleLoader__.load({
 .dab-head{margin:2px 0 5px}
 .dab-overline{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--dsw-alias-brand-primary);opacity:.9}
 .dab-h1{margin:4px 0 0;font-size:21px;font-weight:700;letter-spacing:-.01em}
-.dab-desc{margin:6px 0 0;font-size:12.5px;line-height:1.55;color:var(--dsw-alias-label-tertiary);max-width:56ch}
+/* No max-width on the page description: it is a single line of context under the
+   title, and capping it at a prose measure left it wrapping early with dead space
+   to its right while the cards below ran the full width of the panel. */
+.dab-desc{margin:6px 0 0;font-size:12.5px;line-height:1.55;color:var(--dsw-alias-label-tertiary)}
 .dab-card{background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l2);border-radius:16px;padding:18px}
 .dab-card-hover{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
 .dab-card-hover:hover{transform:translateY(-2px);box-shadow:0 10px 28px -12px rgba(0,0,0,.28)}
@@ -2036,10 +2177,6 @@ window.__ModuleLoader__.load({
 
 /* ── swatches ────────────────────────────────────────────────────────────── */
 .dab-swatch-title{font-size:12px;font-weight:600;margin-bottom:10px;color:var(--dsw-alias-label-secondary,var(--dsw-alias-label-tertiary))}
-.dab-swatches{display:flex;flex-wrap:wrap;gap:9px}
-.dab-swatch{width:25px;height:25px;border-radius:50%;border:0;padding:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease}
-.dab-swatch:hover{transform:scale(1.2)}
-.dab-swatch.is-on{box-shadow:0 0 0 2px var(--dsw-alias-bg-layer-1),0 0 0 4px var(--dsw-alias-brand-primary)}
 
 /* ── wheel card ──────────────────────────────────────────────────────────── */
 .dab-wheel-card{position:relative;display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;padding:24px 18px}
@@ -2089,10 +2226,15 @@ window.__ModuleLoader__.load({
 .dab-btn-danger{color:var(--dsw-alias-state-error-primary)}
 .dab-btn-ghost{background:transparent;border-color:transparent;color:var(--dsw-alias-label-secondary,var(--dsw-alias-label-tertiary))}
 .dab-btn-ghost:hover:not(:disabled){background:var(--dsw-alias-bg-layer-2);box-shadow:none}
-.dab-btn:focus-visible,.dab-nav-item:focus-visible,.dab-seg-item:focus-visible,.dab-swatch:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
+.dab-btn:focus-visible,.dab-nav-item:focus-visible,.dab-seg-item:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
 .dab-chip-row{display:flex;flex-wrap:wrap;gap:8px}
 .dab-chip{height:30px;padding:0 14px;border-radius:99px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-secondary,var(--dsw-alias-label-tertiary));font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .22s ease}
 .dab-chip:hover{border-color:var(--dsw-alias-brand-primary);color:var(--dsw-alias-label-primary)}
+/* A mode chip on a rule with no picture: there is nothing to lay out. It reads
+   as unavailable rather than as an active choice, and the hover that would
+   promise otherwise is dropped with it. */
+.dab-chip:disabled{opacity:.45;cursor:not-allowed}
+.dab-chip:disabled:hover{border-color:var(--dsw-alias-border-l2);color:var(--dsw-alias-label-secondary,var(--dsw-alias-label-tertiary))}
 .dab-chip.is-active{background:var(--dsw-alias-brand-primary);color:var(--dsw-alias-label-primary-inverted);border-color:transparent}
 
 /* ── sliders ─────────────────────────────────────────────────────────────── */
@@ -2151,6 +2293,10 @@ window.__ModuleLoader__.load({
 .dab-profile-desc{font-size:12px;color:var(--dsw-alias-label-tertiary);line-height:1.55;margin:5px 0 15px}
 .dab-footer{margin-top:6px;padding:14px 4px 0;border-top:1px solid var(--dsw-alias-border-l2);display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--dsw-alias-label-tertiary)}
 .dab-footer-mono{font-family:var(--dab-mono);letter-spacing:.02em}
+/* Same reset as the brand: the package name links to the repository, and the
+   underline appears on hover where it reads as an affordance instead of chrome. */
+.dab-footer a{color:inherit;text-decoration:none}
+.dab-footer a:hover{color:var(--dsw-alias-brand-primary);text-decoration:underline}
 
 /* ── toast ───────────────────────────────────────────────────────────────── */
 .dab-toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:99px;background:var(--dsw-alias-bg-layer-3,var(--dsw-alias-bg-layer-2));border:1px solid var(--dsw-alias-border-l2);box-shadow:0 10px 30px -8px rgba(0,0,0,.38);font-size:12.5px;z-index:10001;animation:dab-toast-in .32s cubic-bezier(.22,1,.36,1) both}
@@ -2168,12 +2314,83 @@ window.__ModuleLoader__.load({
 .dab-modal-card{animation:dab-zoom-in .3s cubic-bezier(.22,1,.36,1) both;max-width:calc(100vw - 40px);max-height:calc(100vh - 120px);overflow:auto}
 .dab-overlay .dab-btn{background:rgba(255,255,255,.94);color:#14161a;border-color:transparent}
 .dab-overlay .dab-btn-primary{background:var(--dsw-alias-brand-primary);color:var(--dsw-alias-label-primary-inverted)}
+/* The destructive choice has to survive the white-on-dark treatment above: a
+   confirmation whose "delete everything" button looks exactly like its "cancel"
+   is the one place where losing the distinction actually costs something. */
+.dab-overlay .dab-btn-danger{background:#dc2626;color:#fff;border-color:transparent}
 .dab-crash{display:flex;flex-direction:column;gap:10px;align-items:center;padding:28px 18px;border:1px solid var(--dsw-alias-border-l2);border-radius:16px}
 .dab-crash-title{font-size:15px;font-weight:650}
 .dab-crash-desc{font-size:12px;color:var(--dsw-alias-label-tertiary);text-align:center;line-height:1.5}
 
 /* ── model rules ─────────────────────────────────────────────────────────── */
-.dab-rules{display:flex;flex-direction:column;gap:12px}
+/* ── rule tab strip ──────────────────────────────────────────────────────────
+ * The rules are edited ONE at a time: every rule is a tab in a single sideways
+ * scrolling row, and the page renders exactly one editor under it. The height of
+ * this panel is therefore a function of one card, not of the rule count — which
+ * is what the stacked accordion could not promise.
+ *
+ * The strip scrolls instead of wrapping for the same reason: a wrapped strip
+ * would grow a row taller with every rule and hand the page height straight back
+ * to the list. Tabs are fixed-height and the match label elides, so switching
+ * rules can never reflow the row either. */
+/* Deliberately NOT sticky: the horizontal scroller above the tabs clips on BOTH
+   axes, so the "which rule" menu — an absolutely positioned child — would be cut
+   off at the strip's own bottom edge instead of floating over the page.
+   Switching rules stays a click near the top of the panel, which is one screen
+   away at every realistic rule count. */
+/* The tiles are aligned by their TOP edge, not by centering: the strip's box is
+   taller than a tab (its height includes the horizontal scrollbar, which no other
+   tile in the row has), so centering against the row would put the two icon
+   buttons a few pixels below the tabs they sit beside. Top alignment makes the
+   strip's top and the buttons' top the same line; the strip's own 3px top padding
+   is mirrored on the buttons, and everything below the bar comes from the strip's
+   bottom padding — so the bar keeps the same distance from the TAB bottoms and
+   from the icon tiles' bottoms. */
+.dab-tabs-row{display:flex;align-items:flex-start;gap:8px;padding-bottom:0;margin-bottom:6px}
+/* The strip is the scroller the scrollbar block above is written for. Its bottom
+   padding is the whole gap under the tiles: the bar is painted at the bottom of
+   this box, so this is what keeps it off the tabs (and, because the row adds
+   nothing here, off the icon buttons beside them too). */
+.dab-tabs{flex:1;min-width:0;display:flex;align-items:center;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;padding:3px 2px 8px}
+.dab-tab{height:34px;flex:none;display:flex;align-items:center;gap:7px;padding:0 11px;border-radius:10px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-tertiary);font-size:12.5px;cursor:pointer;max-width:196px;transition:color .2s,border-color .2s,background .2s,opacity .2s}
+.dab-tab:hover{color:var(--dsw-alias-label-primary);border-color:color-mix(in srgb,var(--dsw-alias-brand-primary) 45%,var(--dsw-alias-border-l2))}
+.dab-tab:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}
+/* The selected tab reads like the nav rail's own indicator: a brand tint, a
+   brand border, and the label lifted to full contrast. */
+.dab-tab.is-active{color:var(--dsw-alias-brand-primary);font-weight:600;border-color:color-mix(in srgb,var(--dsw-alias-brand-primary) 40%,transparent);background:color-mix(in srgb,var(--dsw-alias-brand-primary) 13%,transparent)}
+.dab-tab.is-off{opacity:.5}
+.dab-tab:not(.is-active).is-off:hover{opacity:.75}
+.dab-tab-thumb{width:20px;height:20px;flex:none;border-radius:5px;object-fit:cover;border:1px solid var(--dsw-alias-border-l2)}
+.dab-tab-num{font-family:var(--dab-mono);font-size:10.5px;font-weight:700;opacity:.8}
+.dab-tab-match{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.dab-tab-live{width:6px;height:6px;flex:none;border-radius:50%;background:var(--dsw-alias-brand-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--dsw-alias-brand-primary) 25%,transparent);animation:dab-pulse 1.8s ease-in-out infinite}
+.dab-tab-rot{flex:none;font-size:11px;line-height:1;opacity:.75}
+/* The strip's two actions — add a rule, open the rule list — are square icon
+   tiles beside the scroller rather than tiles inside it: inside, a long rule list
+   pushed them off the end, so the one control that ADDS a rule could only be
+   reached by scrolling to the bottom of the rules. They keep the tab's box so the
+   row stays one height, and the icon is the whole label (title + aria-label). */
+/* The top margin mirrors the strip's own padding-top, so the icon inside the tile
+   sits on the same line as the text inside the tabs. */
+.dab-tab-icon{width:34px;margin-top:3px;padding:0;justify-content:center;color:var(--dsw-alias-label-tertiary);max-width:none}
+.dab-tab-icon:hover{color:var(--dsw-alias-brand-primary);border-color:var(--dsw-alias-brand-primary);background:color-mix(in srgb,var(--dsw-alias-brand-primary) 8%,transparent)}
+
+/* ── "which rule" picker (the strip's overflow menu) ───────────────────────── */
+.dab-pick{position:relative;flex:none}
+.dab-pick-scrim{position:fixed;inset:0;z-index:40;background:transparent}
+.dab-pick-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:41;min-width:220px;max-height:284px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding:5px;border-radius:12px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);box-shadow:0 18px 44px -14px rgba(0,0,0,.45);animation:dab-rise-in .18s ease both}
+.dab-pick-item{display:flex;align-items:center;gap:9px;padding:7px 9px;border:0;border-radius:8px;background:transparent;color:var(--dsw-alias-label-secondary,var(--dsw-alias-label-tertiary));font-size:12.5px;text-align:left;cursor:pointer}
+.dab-pick-item:hover{background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary)}
+.dab-pick-item.is-active{color:var(--dsw-alias-brand-primary);font-weight:600;background:color-mix(in srgb,var(--dsw-alias-brand-primary) 12%,transparent)}
+.dab-pick-match{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.dab-pick-n{flex:none;font-family:var(--dsw-mono);font-size:10.5px;opacity:.7}
+
+/* ── one rule editor (the tab panel's content) ─────────────────────────────── */
+.dab-rule-panel{min-height:0}
+/* The armed delete button stops being a 28px icon box and says what the second
+   click will do — a worded state, not only a colour one. */
+.dab-icon-btn.is-armed{width:auto;padding:0 9px;color:var(--dsw-alias-state-error-primary);border-color:var(--dsw-alias-state-error-primary);background:color-mix(in srgb,var(--dsw-alias-state-error-primary) 12%,transparent)}
+.dab-confirm-txt{font-size:11px;font-weight:600;white-space:nowrap}
 .dab-rule{background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l2);border-radius:16px;padding:14px;transition:border-color .25s,box-shadow .25s,opacity .25s}
 .dab-rule.is-active{border-color:var(--dsw-alias-brand-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--dsw-alias-brand-primary) 16%,transparent)}
 .dab-rule.is-off{opacity:.55}
@@ -2425,6 +2642,10 @@ window.__ModuleLoader__.load({
 					"--dsw-menu-surface-fill"
 				]
 			},
+			{
+				part: "code",
+				names: ["--dsw-alias-markdown-code-block", "--dsw-alias-markdown-code-block-banner"]
+			},
 			{
 				part: "input",
 				names: ["--dsw-specific-input-major"]
@@ -2438,7 +2659,9 @@ window.__ModuleLoader__.load({
 			"--dsw-alias-bg-layer-3": "--dsh-any-op-card-3",
 			"--dsw-specific-input-major": "--dsh-any-op-input",
 			"--dsw-specific-menu": "--dsh-any-op-menu",
-			"--dsw-menu-surface-fill": "--dsh-any-op-menu"
+			"--dsw-menu-surface-fill": "--dsh-any-op-menu",
+			"--dsw-alias-markdown-code-block": "--dsh-any-op-code",
+			"--dsw-alias-markdown-code-block-banner": "--dsh-any-op-code-banner"
 		};
 		let baseTokenKey = "";
 		const HOST_SURFACE_TOKENS = Object.keys(OPACITY_VARS);
@@ -2663,7 +2886,7 @@ window.__ModuleLoader__.load({
 				const scheme = own ? forceDark ? "dark" : "light" : resolveHostDark() ? "dark" : "light";
 				const fadeable = paletteChanged && paletteFadeAllowed(paletteScheme, scheme);
 				lastFadeable = fadeable;
-				applyPaletteFade(fadeable);
+				applyPaletteFade(fadeable, Object.keys(tokens));
 				if (paletteChanged) {
 					paletteScheme = scheme;
 					if (own) {
@@ -2675,7 +2898,7 @@ window.__ModuleLoader__.load({
 						const opVar = OPACITY_VARS[name];
 						decls.push(`${name}:${opVar !== void 0 ? `var(${opVar})` : value}!important`);
 					}
-					ensureTokenStyle().textContent = `body{${decls.join(";")}}`;
+					ensureTokenStyle().textContent = `:root,body{${decls.join(";")}}`;
 					if (own) {
 						for (const name of appliedTokenNames) document.body.style.removeProperty(name);
 						appliedTokenNames = Object.keys(tokens);
@@ -2745,14 +2968,26 @@ window.__ModuleLoader__.load({
 			"--dsw-alias-bg-layer-2",
 			"--dsw-alias-bg-layer-3"
 		];
-		/** 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`). */
+		/** The token names a palette CAN carry — deliberately the widest branch.
+		*
+		*  `genTokens(220, 0.55, 0.25)` resolves to the DARK branch (l = 0.25), and that
+		*  branch is the superset: the light one emits roughly thirty fewer aliases (no
+		*  bubble, selector, tip, tooltip/toast, toolbar and markdown state tokens). This
+		*  list is therefore what the REGISTRATIONS are emitted for — a later light→dark
+		*  change has to find the dark names already registered — and NOT the transition
+		*  list, which is narrowed per apply to the palette in force (`written` in
+		*  ./palette-fade). Assuming the two branches carry the same set is exactly the
+		*  mistake that let the fade animate host-owned tokens: a name only the dark
+		*  branch declares is, under a light palette, the HOST's value.
+		*
+		*  An unknown name is only registered when the host can answer for it (see
+		*  `fadeInitials`). */
 		function fadeTokenNames() {
 			return Object.keys(genTokens(220, .55, .25).tokens);
 		}
 		/** One `transition` list per element that DECLARES palette tokens, each carrying
-		*  only the tokens that element actually declares.
+		*  only the tokens that element actually declares — and, at emission, only those
+		*  the palette in force writes (see `written`).
 		*
 		*  Two of the entries carry a STANDARD property instead, because those surfaces
 		*  are not painted from a registered token: the settings dialog's plate and the
@@ -2764,6 +2999,10 @@ window.__ModuleLoader__.load({
 		*  re-declares IS one, naming the token is what reaches it. */
 		function fadeScopes() {
 			return [
+				{
+					selector: ":root",
+					tokens: fadeTokenNames()
+				},
 				{
 					selector: "body",
 					tokens: fadeTokenNames()
@@ -2851,12 +3090,21 @@ window.__ModuleLoader__.load({
 		*
 		* `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) {
+		* lag behind the pointer.
+		*
+		* `written` is the token set of the palette IN FORCE — `Object.keys(tokens)` of
+		* the very block this pass is about to write — and only those may carry a
+		* transition: a name the palette does not write still belongs to the host, and a
+		* transition on it animates the host's own scheme change at this plugin's
+		* duration (see ./palette-fade for the report that shape produced). The
+		* registrations stay on the full set, so a later palette of the other branch
+		* still has them in place. */
+		function applyPaletteFade(animate, written) {
 			const initials = fadeInitialsOf(fadeTokenNames());
 			const css = paletteFadeCss({
 				scopes: fadeScopes(),
 				initial: initials,
+				written,
 				durationMs: animate ? paletteFadeMs() : 0,
 				easing: rTransition().easing
 			});
@@ -4069,6 +4317,24 @@ window.__ModuleLoader__.load({
 				rx: "2"
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M8 6.6v2M7 8h2" })]
 		});
+		/** Angle brackets: the code-block surface on the Interface page. */
+		const CodeIcon = ({ size, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Glyph, {
+			size,
+			className,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5.7 4.3 2.4 8l3.3 3.7M10.3 4.3 13.6 8l-3.3 3.7" })
+		});
+		/** Appends a rule — the tab strip's own action, beside the strip it adds to. */
+		const PlusIcon = ({ size, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Glyph, {
+			size,
+			className,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M8 3.4v9.2M3.4 8h9.2" })
+		});
+		/** Opens the "which rule" menu: down means a list drops out under the button. */
+		const ChevronDownIcon = ({ size, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Glyph, {
+			size,
+			className,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M4.3 6.4 8 10.1l3.7-3.7" })
+		});
 		//#endregion
 		//#region src/client/components/ErrorBoundary.tsx
 		/**
@@ -4139,6 +4405,19 @@ window.__ModuleLoader__.load({
 			return target ? (0, react_dom.createPortal)(children, target) : null;
 		}
 		//#endregion
+		//#region src/client/repo.ts
+		/**
+		* The project's public repository — the ONE address the shell links to.
+		*
+		* Both links the interface ships (the brand in the header, the package name in
+		* the profile footer) read this constant: two literals would drift the day the
+		* repository moves, and a link that points at the wrong place is indistinguishable
+		* from a link that works until someone clicks it. `scripts/ui-strings-check.ts`
+		* holds it against `package.json`'s `repository`, which is what npm and the
+		* plugin market read.
+		*/
+		const REPO_URL = "https://github.com/HarmlessFunny/dsh-background-by-model";
+		//#endregion
 		//#region src/client/components/LiveSlider.tsx
 		/**
 		* Zero-lag slider: the thumb and value label update through DOM refs while
@@ -4235,6 +4514,12 @@ window.__ModuleLoader__.load({
 				labelKey: "uiOpacityCard",
 				Icon: ChatIcon
 			},
+			{
+				opKey: "code",
+				labelKey: "uiOpacityCode",
+				Icon: CodeIcon,
+				noBlur: true
+			},
 			{
 				opKey: "input",
 				labelKey: "uiOpacityInput",
@@ -4278,9 +4563,9 @@ window.__ModuleLoader__.load({
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "dab-grid-parts",
 				children: PARTS.map((part, i) => {
-					const { labelKey, Icon, isSettings, isChat, isTrajectory, isRightbar } = part;
+					const { labelKey, Icon, isSettings, isChat, isTrajectory, isRightbar, noBlur } = part;
 					const opKey = part.opKey;
-					const blurKey = isChat ? "chat" : isTrajectory ? "trajectory" : isRightbar ? "rightbar" : isSettings ? "settings" : opKey;
+					const blurKey = isChat ? "chat" : isTrajectory ? "trajectory" : isRightbar ? "rightbar" : isSettings ? "settings" : noBlur ? null : opKey;
 					const opacity = isChat ? rChatTextOpacity() : isTrajectory ? rTrajectoryOpacity() : isRightbar ? rRightbarOpacity() : isSettings ? rSop() : rOps()[opKey];
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 						className: "dab-card dab-card-hover dab-rise",
@@ -4351,7 +4636,7 @@ window.__ModuleLoader__.load({
 									}
 								}
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LiveSlider, {
+							blurKey !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LiveSlider, {
 								label: t("uiBlur"),
 								min: 0,
 								max: 60,
@@ -4372,11 +4657,47 @@ window.__ModuleLoader__.load({
 								}
 							})
 						]
-					}, blurKey);
+					}, blurKey ?? opKey);
 				})
 			})] });
 		}
 		//#endregion
+		//#region src/client/rules-view.ts
+		/**
+		* The rule the editor should show.
+		*
+		* `sel` wins whenever it is still in the list: the selection is the user's, and
+		* a model switch, a reorder or an image edit must not move it. The fallbacks run
+		* only when there is no selection at all, or when the rule it named is gone
+		* (deleted here, or replaced wholesale by an import or by the persisted config
+		* landing after the first render — whose ids are not the ones we started with).
+		* The active rule is preferred over the first one so that opening the panel
+		* lands on the rule the current model is using.
+		*/
+		function resolveTab(rules, sel, activeId) {
+			if (rules.length === 0) return null;
+			if (sel !== null) {
+				const held = rules.find((r) => r.id === sel);
+				if (held !== void 0) return held;
+			}
+			if (activeId !== null) {
+				const live = rules.find((r) => r.id === activeId);
+				if (live !== void 0) return live;
+			}
+			return rules[0] ?? null;
+		}
+		/**
+		* The rule to show once `id` has been removed: the next one, or the previous one
+		* when the removed rule was last. Deliberately NOT the first rule — the user is
+		* working down a list, and jumping to the top loses their place — and `null`
+		* when it was the only rule, which the panel renders as "no rules yet".
+		*/
+		function neighbourAfter(rules, id) {
+			const i = rules.findIndex((r) => r.id === id);
+			if (i < 0) return null;
+			return rules[i + 1] ?? rules[i - 1] ?? null;
+		}
+		//#endregion
 		//#region src/client/utils/image.ts
 		/**
 		* Read a chosen image file as a data URL WITHOUT re-encoding: the original
@@ -5153,16 +5474,6 @@ window.__ModuleLoader__.load({
 			.55,
 			.25
 		];
-		/**
-		* Failing-hop codes the model watcher can report, mapped to their copy. Only
-		* these are rendered: `waiting` and `fallback` already have their own hints.
-		*/
-		const MODEL_NOTE_KEYS = {
-			"no-service": "statusNoteNoService",
-			"no-session": "statusNoteNoSession",
-			"no-projection": "statusNoteNoProjection",
-			"empty-selection": "statusNoteEmptySelection"
-		};
 		function toHex(rgb) {
 			return "#" + rgb.map((v) => Math.round(v).toString(16).padStart(2, "0")).join("");
 		}
@@ -5170,171 +5481,307 @@ window.__ModuleLoader__.load({
 			const { t, useStore } = p;
 			const store = useStore((s) => s);
 			const rules = cfg.rules;
-			const [text, setText] = (0, react.useState)("");
-			const [touched, setTouched] = (0, react.useState)(false);
+			const [selId, setSelId] = (0, react.useState)(() => resolveTab(rules, null, store.activeRuleId)?.id ?? null);
+			/** True once the user has picked a tab themselves, which stops the follow above. */
+			const pickedRef = (0, react.useRef)(false);
 			(0, react.useEffect)(() => {
-				if (!touched) setText(store.model);
-			}, [store.model, touched]);
-			const probe = text.trim();
-			const result = (() => {
-				if (probe === "") return null;
-				const hit = matchRule(rules, probe);
-				const rule = hit.rule;
-				if (rule === null) return null;
-				const n = rules.findIndex((r) => r.id === rule.id) + 1;
-				return `${hit.matched ? t("tryoutHit") : t("tryoutFallback")} ${n}`;
-			})();
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
-					className: "dab-head dab-rise",
-					style: { "--d": 0 },
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "dab-overline",
-							children: "Rules"
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
-							className: "dab-h1",
-							children: t("pageModelBg")
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "dab-desc",
-							children: t("descModelBg")
-						})
-					]
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-					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")
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							style: {
-								marginTop: 10,
-								display: "flex",
-								flexWrap: "wrap",
-								gap: 8,
-								alignItems: "center"
-							},
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-								type: "text",
-								className: "dab-urlinput",
-								value: text,
-								placeholder: t("tryoutPlaceholder"),
-								onChange: (e) => {
-									setTouched(true);
-									setText(e.target.value);
-								}
-							}), store.model !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: "dab-btn",
-								onClick: () => {
-									setTouched(true);
-									setText(store.model);
-								},
-								children: t("tryoutUseCurrent")
-							}) : null]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "dab-hint",
-							style: { marginTop: 9 },
-							children: probe === "" ? t("tryoutEmpty") : result === null ? t("tryoutNone") : result
-						}),
-						store.model === "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "dab-hint",
-							style: { marginTop: 6 },
-							children: t("statusUnknownHint")
-						}) : null,
-						store.model !== "" && store.modelSource === "default" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "dab-hint",
-							style: { marginTop: 6 },
-							children: t("statusSourceDefaultHint")
-						}) : null,
-						MODEL_NOTE_KEYS[store.modelNote] !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				if (pickedRef.current) return;
+				const held = resolveTab(rules, selId, store.activeRuleId);
+				if (held !== null && held.id !== selId) setSelId(held.id);
+			}, [
+				store.rulesRev,
+				store.activeRuleId,
+				selId,
+				rules
+			]);
+			const active = resolveTab(rules, selId, store.activeRuleId)?.id ?? null;
+			const [selImage, setSelImage] = (0, react.useState)({});
+			const selIdxOf = (id) => selImage[id] ?? 0;
+			const setSelIdxOf = (id, i) => setSelImage((m) => m[id] === i ? m : {
+				...m,
+				[id]: i
+			});
+			/** Select a rule as the edited one; keyboard stepping shares this. */
+			const selectRule = (id) => {
+				pickedRef.current = true;
+				setSelId(id);
+			};
+			/** Delete a rule and land on its neighbour — never on the first rule. */
+			const removeRule = (id) => {
+				if (id === active) {
+					const next = neighbourAfter(rules, id);
+					pickedRef.current = true;
+					setSelId(next?.id ?? null);
+				}
+				setSelImage((m) => {
+					const n = { ...m };
+					delete n[id];
+					return n;
+				});
+				p.removeRule(id);
+			};
+			const addRule = () => {
+				pickedRef.current = true;
+				setSelId(p.addRule());
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+				className: "dab-head dab-rise",
+				style: { "--d": 0 },
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dab-overline",
+						children: "Rules"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+						className: "dab-h1",
+						children: t("pageModelBg")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dab-desc",
+						children: t("descModelBg")
+					})
+				]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: "dab-rise",
+				style: { "--d": 1 },
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dab-chip-row",
+						style: {
+							marginBottom: 12,
+							alignItems: "center"
+						},
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: `dab-toggle${cfg.autoExtract ? " is-on" : ""}`,
+							role: "switch",
+							"aria-checked": cfg.autoExtract,
+							title: t("autoExtract"),
+							onClick: () => p.setAutoExtract(!cfg.autoExtract),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "dab-toggle-knob" })
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: "dab-hint",
-							style: { marginTop: 6 },
-							children: t(MODEL_NOTE_KEYS[store.modelNote])
-						}) : null
-					]
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-					className: "dab-rise",
-					style: { "--d": 2 },
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "dab-chip-row",
-							style: {
-								marginBottom: 12,
-								alignItems: "center"
-							},
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: `dab-toggle${cfg.autoExtract ? " is-on" : ""}`,
-								role: "switch",
-								"aria-checked": cfg.autoExtract,
-								title: t("autoExtract"),
-								onClick: () => p.setAutoExtract(!cfg.autoExtract),
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "dab-toggle-knob" })
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							children: t("autoExtract")
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RulesTabs, {
+						rules,
+						activeId: active,
+						liveId: store.activeRuleId,
+						p,
+						onSelect: selectRule,
+						onAdd: addRule
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dab-rule-panel",
+						role: "tabpanel",
+						id: active === null ? void 0 : `dab-rule-panel-${active}`,
+						"aria-labelledby": active === null ? void 0 : `dab-rule-tab-${active}`,
+						children: (() => {
+							const idx = rules.findIndex((r) => r.id === active);
+							const rule = idx < 0 ? void 0 : rules[idx];
+							if (rule === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 								className: "dab-hint",
-								children: t("autoExtract")
-							})]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "dab-rules",
-							children: rules.map((rule, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuleCard, {
+								style: { padding: "4px 2px" },
+								children: t("ruleNoneHint")
+							});
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuleCard, {
 								p,
 								rule,
-								index: i,
+								index: idx,
 								total: rules.length,
 								liveIndex: rule.id === store.activeRuleId ? store.rotIndex : -1,
 								active: rule.id === store.activeRuleId,
-								notify
-							}, rule.id))
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-							type: "button",
-							className: "dab-btn dab-btn-primary",
-							style: { marginTop: 12 },
-							onClick: () => {
-								p.addRule();
-							},
-							children: ["+ ", t("ruleAdd")]
-						})
-					]
-				})
-			] });
+								notify,
+								sel: selIdxOf(rule.id),
+								onSel: (i) => setSelIdxOf(rule.id, i),
+								onRemove: () => removeRule(rule.id)
+							}, rule.id);
+						})()
+					})
+				]
+			})] });
 		}
-		function RuleCard({ p, rule, index, total, active, liveIndex, notify }) {
+		/**
+		* The rule tab strip: every rule is one tab, and the tab at the end appends a
+		* new rule — so what the user browses and what they add to live in one row.
+		*
+		* A tab carries what the card head used to: its number, a thumbnail of the first
+		* image, the match string, and two states that are worth knowing WITHOUT opening
+		* it — whether the rule is the one in use, and whether it rotates or is off. The
+		* strip scrolls sideways rather than wrapping, because a wrapped strip would put
+		* the page height back in the hands of the rule count, which is the whole thing
+		* this layout exists to prevent.
+		*/
+		function RulesTabs({ rules, activeId, liveId, p, onSelect, onAdd }) {
 			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);
-			const [urlErr, setUrlErr] = (0, react.useState)(null);
-			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);
+			const items = (0, react.useRef)([]);
+			const [pick, setPick] = (0, react.useState)(false);
+			/** Select a rule and bring its tab into view — the strip is wider than the page. */
+			const go = (i) => {
+				const rule = rules[i];
+				if (rule === void 0) return;
+				onSelect(rule.id);
+				items.current[i]?.scrollIntoView({
+					block: "nearest",
+					inline: "nearest"
+				});
+			};
+			const onKeys = (e) => {
+				const i = rules.findIndex((r) => r.id === activeId);
+				if (i < 0) return;
+				if (e.key === "ArrowRight") {
+					e.preventDefault();
+					go(Math.min(i + 1, rules.length - 1));
+				} else if (e.key === "ArrowLeft") {
+					e.preventDefault();
+					go(Math.max(i - 1, 0));
+				} else if (e.key === "Home") {
+					e.preventDefault();
+					go(0);
+				} else if (e.key === "End") {
+					e.preventDefault();
+					go(rules.length - 1);
+				}
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dab-tabs-row",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dab-tabs",
+						role: "tablist",
+						"aria-label": t("tabListLabel"),
+						onKeyDown: onKeys,
+						children: rules.map((rule, i) => {
+							const on = rule.id === activeId;
+							const live = rule.id === liveId;
+							const thumb = rule.images[0] === void 0 ? null : p.imageOf(rule.images[0].slot);
+							const match = rule.match.trim();
+							const title = [
+								match === "" ? t("tabUnnamed") : match,
+								`${rule.images.length}`,
+								live ? t("tabLive") : null,
+								rule.images.length >= 2 && rule.rotate.enabled ? t("tabRotating") : null,
+								rule.enabled ? null : t("tabOff")
+							].filter((x) => x !== null).join(" · ");
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								role: "tab",
+								"aria-selected": on,
+								id: `dab-rule-tab-${rule.id}`,
+								"aria-controls": `dab-rule-panel-${rule.id}`,
+								tabIndex: on ? 0 : -1,
+								ref: (el) => {
+									items.current[i] = el;
+								},
+								className: `dab-tab${on ? " is-active" : ""}${rule.enabled ? "" : " is-off"}${live ? " is-live" : ""}`,
+								title,
+								onClick: () => go(i),
+								children: [
+									thumb === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+										className: "dab-tab-thumb",
+										src: thumb,
+										alt: "",
+										draggable: false
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dab-tab-num",
+										children: i + 1
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dab-tab-match",
+										children: match === "" ? t("tabUnnamed") : match
+									}),
+									rule.enabled && live ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dab-tab-live",
+										title: t("tabLive")
+									}) : null,
+									rule.enabled && rule.images.length >= 2 && rule.rotate.enabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dab-tab-rot",
+										title: t("tabRotating"),
+										children: "⟳"
+									}) : null
+								]
+							}, rule.id);
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "dab-tab dab-tab-icon",
+						onClick: onAdd,
+						title: t("ruleAdd"),
+						"aria-label": t("ruleAdd"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlusIcon, { size: 16 })
+					}),
+					rules.length > 3 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dab-pick",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "dab-tab dab-tab-icon",
+							"aria-haspopup": "listbox",
+							"aria-expanded": pick,
+							title: t("tabPick"),
+							"aria-label": t("tabPick"),
+							onClick: () => setPick((o) => !o),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDownIcon, { size: 16 })
+						}), pick ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "dab-pick-scrim",
+							onClick: () => setPick(false)
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "dab-pick-menu",
+							role: "listbox",
+							"aria-label": t("tabMore"),
+							children: rules.map((rule, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								role: "option",
+								"aria-selected": rule.id === activeId,
+								className: `dab-pick-item${rule.id === activeId ? " is-active" : ""}`,
+								onClick: () => {
+									setPick(false);
+									go(i);
+								},
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dab-tab-num",
+										children: i + 1
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dab-pick-match",
+										children: rule.match.trim() === "" ? t("tabUnnamed") : rule.match
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dab-pick-n",
+										children: rule.images.length
+									})
+								]
+							}, rule.id))
+						})] }) : null]
+					}) : null
+				]
+			});
+		}
+		function RuleCard({ p, rule, index, total, active, liveIndex, notify, sel, onSel, onRemove }) {
+			const { t } = p;
+			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);
+			const [urlErr, setUrlErr] = (0, react.useState)(null);
+			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);
+			/** Two-step delete: this card is the only place the rule can be removed from. */
+			const [confirmRemove, setConfirmRemove] = (0, react.useState)(false);
 			/** 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 [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);
@@ -5346,9 +5793,8 @@ window.__ModuleLoader__.load({
 			const [h, s, l] = ownColor ?? SEED_COLOR;
 			const wheel = hslToHsv(h, s, l);
 			(0, react.useEffect)(() => {
-				if (open) p.loadRuleImages(rule.id);
+				p.loadRuleImages(rule.id);
 			}, [
-				open,
 				rule.id,
 				rule.images.length,
 				p
@@ -5380,7 +5826,7 @@ window.__ModuleLoader__.load({
 						pending--;
 						if (pending === 0) {
 							p.addRuleImages(rule.id, out.filter((x) => typeof x === "string"));
-							setSel(first);
+							onSel(first);
 						}
 					});
 				});
@@ -5415,7 +5861,7 @@ window.__ModuleLoader__.load({
 				setUrlBusy(false);
 				setUrlOpen(false);
 				setUrlVal("");
-				setSel(first);
+				onSel(first);
 			};
 			const onExtract = async () => {
 				if (url === null || extracting || image === void 0) return;
@@ -5450,6 +5896,7 @@ 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 bgMode = image?.bgMode ?? "fit";
 			/** How far the pointer must travel before a click turns into a drag. */
 			const DRAG_SLOP = 5;
 			const tileDown = (i, slot) => (e) => {
@@ -5504,13 +5951,13 @@ window.__ModuleLoader__.load({
 				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);
+				onSel(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)));
+				onSel(Math.max(0, Math.min(at, rule.images.length - 2)));
 			};
 			/** Commit the custom dwell time the moment it is typed (seconds → ms). */
 			const commitSeconds = () => {
@@ -5526,14 +5973,6 @@ window.__ModuleLoader__.load({
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "dab-rule-head",
 						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: "dab-icon-btn",
-								onClick: () => setOpen((o) => !o),
-								title: open ? "Collapse" : "Expand",
-								"aria-expanded": open,
-								children: open ? "▾" : "▸"
-							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: "dab-rule-num",
 								children: index + 1
@@ -5575,14 +6014,25 @@ window.__ModuleLoader__.load({
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
-								className: "dab-icon-btn dab-icon-btn-danger",
-								title: t("ruleRemove"),
-								onClick: () => p.removeRule(rule.id),
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrashIcon, { size: 13 })
+								className: `dab-icon-btn dab-icon-btn-danger${confirmRemove ? " is-armed" : ""}`,
+								title: confirmRemove ? t("ruleRemoveConfirm") : t("ruleRemove"),
+								onBlur: () => setConfirmRemove(false),
+								onClick: () => {
+									if (!confirmRemove) {
+										setConfirmRemove(true);
+										return;
+									}
+									setConfirmRemove(false);
+									onRemove();
+								},
+								children: confirmRemove ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dab-confirm-txt",
+									children: t("ruleRemoveConfirm")
+								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrashIcon, { size: 13 })
 							})
 						]
 					}),
-					open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "dab-rule-body",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "dab-rule-cols",
@@ -5642,7 +6092,7 @@ window.__ModuleLoader__.load({
 													draggedRef.current = false;
 													return;
 												}
-												setSel(i);
+												onSel(i);
 											},
 											onDoubleClick: () => {
 												if (!active) {
@@ -5791,140 +6241,6 @@ window.__ModuleLoader__.load({
 									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", {
@@ -5932,12 +6248,17 @@ window.__ModuleLoader__.load({
 										children: t("ruleLayout")
 									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 										className: "dab-chip-row",
+										style: { marginTop: 8 },
 										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 }),
+											className: `dab-chip${bgMode === m.mode ? " is-active" : ""}`,
+											disabled: image === void 0,
+											title: image === void 0 ? t("ruleLayoutNoImage") : void 0,
+											onClick: () => {
+												if (image !== void 0) p.setImageMode(rule.id, image.slot, m.mode);
+											},
 											children: t(m.key)
-										}, m.mode)), url !== null && rule.bgMode === "fit" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+										}, m.mode)), url !== null && bgMode === "fit" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 											type: "button",
 											className: "dab-btn",
 											onClick: () => setEditorOpen(true),
@@ -5990,71 +6311,53 @@ window.__ModuleLoader__.load({
 										style: { marginTop: 6 },
 										children: t("ruleColorPendingImageHint")
 									})
-								] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										style: {
-											display: "flex",
-											gap: 16,
-											alignItems: "center",
-											flexWrap: "wrap"
-										},
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorWheel, {
+								] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									style: {
+										display: "flex",
+										gap: 16,
+										alignItems: "center",
+										flexWrap: "wrap"
+									},
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorWheel, {
+										hue: wheel[0],
+										sat: wheel[1],
+										lit: wheel[2],
+										onChange: onColor
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "dab-inputs",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorInputs, {
 											hue: wheel[0],
 											sat: wheel[1],
 											lit: wheel[2],
 											onChange: onColor
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-											className: "dab-inputs",
-											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorInputs, {
-												hue: wheel[0],
-												sat: wheel[1],
-												lit: wheel[2],
-												onChange: onColor
-											})
-										})]
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "dab-chip-row",
-										style: { marginTop: 12 },
-										children: [
-											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-												type: "button",
-												className: "dab-btn",
-												disabled: url === null || extracting,
-												onClick: () => void onExtract(),
-												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SparkleIcon, { size: 13 }), extracting ? t("extracting") : t("ruleColorExtract")]
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-												type: "button",
-												className: "dab-btn",
-												disabled: url === null,
-												onClick: () => setPickerOpen(true),
-												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PipetteIcon, { size: 13 }), t("eyedropper")]
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-												type: "button",
-												className: "dab-btn dab-btn-ghost",
-												onClick: () => setColor(null),
-												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SunIcon, { size: 13 }), t("ruleColorNone")]
-											})
-										]
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										className: "dab-swatches",
-										style: { marginTop: 12 },
-										children: PALETTE.map(([sh, ss, sl], i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										})
+									})]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "dab-chip-row",
+									style: { marginTop: 12 },
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 											type: "button",
-											className: "dab-swatch",
-											style: { background: `hsl(${sh} ${Math.round(ss * 100)}% ${Math.round(sl * 100)}%)` },
-											title: toHex(hslToRgb(sh, ss, sl)).toUpperCase(),
-											onClick: () => setColor([
-												sh,
-												ss,
-												sl
-											])
-										}, i))
-									})
-								] }),
+											className: "dab-btn",
+											disabled: url === null || extracting,
+											onClick: () => void onExtract(),
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SparkleIcon, { size: 13 }), extracting ? t("extracting") : t("ruleColorExtract")]
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+											type: "button",
+											className: "dab-btn",
+											disabled: url === null,
+											onClick: () => setPickerOpen(true),
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PipetteIcon, { size: 13 }), t("eyedropper")]
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+											type: "button",
+											className: "dab-btn dab-btn-ghost",
+											onClick: () => setColor(null),
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SunIcon, { size: 13 }), t("ruleColorNone")]
+										})
+									]
+								})] }),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 									style: { marginTop: 16 },
 									children: [
@@ -6082,10 +6385,136 @@ window.__ModuleLoader__.load({
 											children: t("ruleBlurHint")
 										})
 									]
+								}),
+								/* @__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,
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+													type: "button",
+													className: "dab-btn",
+													disabled: !active || !rotatable,
+													onClick: () => p.rotateNow(rule.id),
+													children: t("rotNext")
+												}),
+												rotatable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dab-hint",
+													style: { padding: 0 },
+													children: active ? `${t("rotShowing")} ${Math.min(liveIndex + 1, rule.images.length)} / ${rule.images.length}` : t("rotNextInactive")
+												}) : 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",
+													style: { alignItems: "center" },
+													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.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")
+														})
+													]
+												})
+											]
+										}) : null
+									]
 								})
 							] })]
 						})
-					}) : null,
+					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 						ref: fileRef,
 						type: "file",
@@ -6144,12 +6573,57 @@ window.__ModuleLoader__.load({
 			"ease-out": "trEasingOut",
 			"ease-in-out": "trEasingInOut"
 		};
+		/**
+		* Failing-hop codes the model watcher can report, mapped to their copy. Only
+		* these are rendered: `waiting` and `fallback` already have their own hints.
+		*/
+		const MODEL_NOTE_KEYS = {
+			"no-service": "statusNoteNoService",
+			"no-session": "statusNoteNoSession",
+			"no-projection": "statusNoteNoProjection",
+			"empty-selection": "statusNoteEmptySelection"
+		};
+		/**
+		* The ways the recommended-profile download can fail, mapped to their copy.
+		*
+		* They are worth telling apart because they ask different things of the user and
+		* of whoever maintains the assets repository: nothing answering is a network to
+		* retry, a mirror that answered with something that is not a profile is not
+		* going to start working on a retry, a profile written for a newer plugin is a
+		* "update this build", and too many images is a profile nobody should install.
+		* A failure that names a SLOT is a fifth case and is rendered separately — that
+		* one is the author's file naming, and only the slot tells them which.
+		*/
+		const REC_ERROR_KEYS = {
+			"download failed": "recFailNetwork",
+			"not a profile": "recFailNotProfile",
+			"newer version": "recFailNewer",
+			"too many images": "recFailTooMany",
+			"too large": "recFailTooLarge"
+		};
+		/** Size of a download, at the precision a person reads it at. */
+		const fmtBytes = (n) => n >= 1048576 ? `${(n / 1024 / 1024).toFixed(1)} MB` : `${Math.max(1, Math.round(n / 1024))} KB`;
 		function ProfilePage({ p, notify }) {
 			const { t, exportTheme, importTheme, setTransition } = p;
 			const importRef = (0, react.useRef)(null);
 			p.useStore((s) => s.rev + s.rulesRev);
 			const holidays = cfg.holidays;
 			const tr = cfg.transition;
+			const store = p.useStore((s) => s);
+			const [text, setText] = (0, react.useState)("");
+			const [touched, setTouched] = (0, react.useState)(false);
+			(0, react.useEffect)(() => {
+				if (!touched) setText(store.model);
+			}, [store.model, touched]);
+			const probe = text.trim();
+			const result = (() => {
+				if (probe === "") return null;
+				const hit = matchRule(cfg.rules, probe);
+				const rule = hit.rule;
+				if (rule === null) return null;
+				const n = cfg.rules.findIndex((r) => r.id === rule.id) + 1;
+				return `${hit.matched ? t("tryoutHit") : t("tryoutFallback")} ${n}`;
+			})();
 			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
@@ -6190,6 +6664,47 @@ window.__ModuleLoader__.load({
 					notify(t("importFail"), false);
 				}
 			};
+			const [pending, setPending] = (0, react.useState)(null);
+			const [recBusy, setRecBusy] = (0, react.useState)(false);
+			const [recDone, setRecDone] = (0, react.useState)(0);
+			const [recTotal, setRecTotal] = (0, react.useState)(0);
+			/** What the confirmation describes: countable facts about the download. */
+			const recStats = (() => {
+				if (pending === null) return null;
+				const rules = pending.config?.rules;
+				const images = pending.images ?? {};
+				let bytes = 0;
+				for (const url of Object.values(images)) bytes += url.length;
+				return {
+					rules: Array.isArray(rules) ? rules.length : 0,
+					images: Object.keys(images).length,
+					bytes
+				};
+			})();
+			const onRecommended = async () => {
+				setRecBusy(true);
+				setRecDone(0);
+				setRecTotal(0);
+				const res = await p.fetchRecommended((done, total) => {
+					setRecDone(done);
+					setRecTotal(total);
+				});
+				setRecBusy(false);
+				if (!res.ok) {
+					notify(res.slot === void 0 ? t(REC_ERROR_KEYS[res.error] ?? "recFailNetwork") : `${t("recFailImage")} ${res.slot}`, false);
+					return;
+				}
+				setPending(res.preset);
+			};
+			const onConfirmRecommended = async () => {
+				const preset = pending;
+				if (preset === null) return;
+				setRecBusy(true);
+				const ok = await p.applyRecommended(preset);
+				setRecBusy(false);
+				setPending(null);
+				notify(ok ? t("recDone") : t("recFailApply"), ok);
+			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
 					className: "dab-head dab-rise",
@@ -6270,12 +6785,7 @@ window.__ModuleLoader__.load({
 							}, 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,
@@ -6326,75 +6836,219 @@ window.__ModuleLoader__.load({
 						}) : null
 					]
 				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+					className: "dab-card dab-rise",
+					style: { "--d": 2 },
+					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")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: {
+								marginTop: 10,
+								display: "flex",
+								flexWrap: "wrap",
+								gap: 8,
+								alignItems: "center"
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								type: "text",
+								className: "dab-urlinput",
+								value: text,
+								placeholder: t("tryoutPlaceholder"),
+								onChange: (e) => {
+									setTouched(true);
+									setText(e.target.value);
+								}
+							}), store.model !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "dab-btn",
+								onClick: () => {
+									setTouched(true);
+									setText(store.model);
+								},
+								children: t("tryoutUseCurrent")
+							}) : null]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dab-hint",
+							style: { marginTop: 9 },
+							children: probe === "" ? t("tryoutEmpty") : result === null ? t("tryoutNone") : result
+						}),
+						store.model === "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dab-hint",
+							style: { marginTop: 6 },
+							children: t("statusUnknownHint")
+						}) : null,
+						store.model !== "" && store.modelSource === "default" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dab-hint",
+							style: { marginTop: 6 },
+							children: t("statusSourceDefaultHint")
+						}) : null,
+						MODEL_NOTE_KEYS[store.modelNote] !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dab-hint",
+							style: { marginTop: 6 },
+							children: t(MODEL_NOTE_KEYS[store.modelNote])
+						}) : null
+					]
+				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "dab-profile-grid dab-rise",
 					style: { "--d": 3 },
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-						className: "dab-card dab-card-hover",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "dab-profile-ico",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DownloadIcon, { size: 17 })
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "dab-profile-title",
-								children: t("exportCardTitle")
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "dab-profile-desc",
-								children: t("exportCardDesc")
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-								type: "button",
-								className: "dab-btn dab-btn-primary",
-								onClick: () => {
-									exportTheme();
-									notify(t("toastExportDone"));
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+							className: "dab-card dab-card-hover",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "dab-profile-ico",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SparkleIcon, { size: 17 })
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "dab-profile-title",
+									children: t("recCardTitle")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "dab-profile-desc",
+									children: t("recCardDesc")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+									type: "button",
+									className: "dab-btn dab-btn-primary",
+									disabled: recBusy || store.hostStale,
+									title: store.hostStale ? t("hostStaleHint") : t("recAdopt"),
+									onClick: () => void onRecommended(),
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SparkleIcon, { size: 14 }), !recBusy ? t("recAdopt") : recTotal > 0 ? `${t("recBusy")} ${recDone}/${recTotal}` : t("recBusy")]
+								})
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+							className: "dab-card dab-card-hover",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "dab-profile-ico",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DownloadIcon, { size: 17 })
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "dab-profile-title",
+									children: t("exportCardTitle")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "dab-profile-desc",
+									children: t("exportCardDesc")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+									type: "button",
+									className: "dab-btn dab-btn-primary",
+									onClick: () => {
+										exportTheme();
+										notify(t("toastExportDone"));
+									},
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DownloadIcon, { size: 14 }), t("exportTheme")]
+								})
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+							className: "dab-card dab-card-hover",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "dab-profile-ico",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadIcon, { size: 17 })
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "dab-profile-title",
+									children: t("importCardTitle")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "dab-profile-desc",
+									children: t("importCardDesc")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+									type: "button",
+									className: "dab-btn",
+									onClick: () => importRef.current?.click(),
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadIcon, { size: 14 }), t("importTheme")]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									ref: importRef,
+									type: "file",
+									accept: "application/json,.json",
+									style: { display: "none" },
+									onChange: (e) => {
+										const f = e.target.files?.[0];
+										if (!f) return;
+										onImport(f);
+										e.target.value = "";
+									}
+								})
+							]
+						})
+					]
+				}),
+				pending !== null && recStats !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "dab-overlay",
+					onClick: (e) => {
+						if (e.target === e.currentTarget && !recBusy) setPending(null);
+					},
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "dab-overlay-title",
+							children: t("recConfirmTitle")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dab-modal-card",
+							style: {
+								maxWidth: "min(92vw, 460px)",
+								textAlign: "center"
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "dab-overlay-hint",
+								style: { lineHeight: 1.7 },
+								children: t("recConfirmBody")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "dab-overlay-hint",
+								style: {
+									marginTop: 10,
+									fontFamily: "var(--dab-mono, monospace)"
 								},
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DownloadIcon, { size: 14 }), t("exportTheme")]
-							})
-						]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-						className: "dab-card dab-card-hover",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "dab-profile-ico",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadIcon, { size: 17 })
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "dab-profile-title",
-								children: t("importCardTitle")
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "dab-profile-desc",
-								children: t("importCardDesc")
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								children: `${recStats.rules} ${t("recStatRules")} · ${recStats.images} ${t("recStatImages")} · ${fmtBytes(recStats.bytes)}`
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: {
+								display: "flex",
+								gap: 10
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
 								className: "dab-btn",
-								onClick: () => importRef.current?.click(),
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadIcon, { size: 14 }), t("importTheme")]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-								ref: importRef,
-								type: "file",
-								accept: "application/json,.json",
-								style: { display: "none" },
-								onChange: (e) => {
-									const f = e.target.files?.[0];
-									if (!f) return;
-									onImport(f);
-									e.target.value = "";
-								}
-							})
-						]
-					})]
-				}),
+								disabled: recBusy,
+								onClick: () => setPending(null),
+								children: t("recConfirmCancel")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "dab-btn dab-btn-danger",
+								disabled: recBusy,
+								onClick: () => void onConfirmRecommended(),
+								children: t("recConfirmOk")
+							})]
+						})
+					]
+				}) }) : null,
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("footer", {
 					className: "dab-footer dab-rise",
 					style: { "--d": 4 },
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
 						className: "dab-footer-mono",
+						href: REPO_URL,
+						target: "_blank",
+						rel: "noreferrer noopener",
+						title: t("repoLink"),
 						children: "dsh-background-by-model"
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("footerTag") })]
 				})
@@ -6458,8 +7112,12 @@ window.__ModuleLoader__.load({
 						className: "dab-shell",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("nav", {
 							className: "dab-nav",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
 								className: "dab-brand",
+								href: REPO_URL,
+								target: "_blank",
+								rel: "noreferrer noopener",
+								title: t("repoLink"),
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 									className: "dab-brand-tile",
 									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SunIcon, { size: 15 })
@@ -6515,14 +7173,52 @@ window.__ModuleLoader__.load({
 			"connection"
 		];
 		const CUSTOM_ID = "custom-color";
+		/**
+		* Ceiling on what one recommended profile may add up to, across every wallpaper.
+		*
+		* The node half caps each file and the number of files, but it answers one
+		* independent call at a time and never sees a running total — the client is the
+		* only side that does, so the total is bounded here. The real profile is 2.2 MB
+		* of images across seven of them, so this is generous by design: it exists to
+		* stop a config that names sixty-four eight-megabyte slots from turning one
+		* button press into half a gigabyte, not to second-guess the author.
+		*/
+		const PRESET_TOTAL_MAX = 33554432;
+		/**
+		* How many wallpapers of a profile are in flight at once.
+		*
+		* Measured rather than guessed. The real seven-file profile, fetched against the
+		* live asset host: 8.3 s one at a time, 4.8 s with four in flight (25 s when the
+		* CDN edge was still cold). What is being paid is per-request latency, and the
+		* host speaks HTTP/2 — the bytes are identical either way and the connection is
+		* reused — so overlapping them buys wall-clock time and risks nothing but a
+		* little contention.
+		*
+		* Four rather than all seven: a burst that wide competes for the same bandwidth
+		* and makes the per-file timeout harder to reason about, and four already hides
+		* most of the latency. Whichever worker finishes first takes the next file, so
+		* the pool stays busy to the end rather than idling on the largest one.
+		*/
+		const PRESET_CONCURRENCY = 4;
 		function apply(ctx) {
 			initRpc((endpoint, payload) => ctx.connection.rpc.call(RPC_CHANNEL, endpoint, payload).then((res) => res));
 			let customDispose = null;
 			let skinTimer = null;
+			/** Colour scheme of the skin this plugin has registered, or null when none is. */
+			let skinScheme = null;
+			/** Scheme the host currently holds for our theme id; null when it is not there. */
+			const registeredScheme = () => {
+				const theme = ctx.theme.getTheme().themes.find((t) => t.id === CUSTOM_ID);
+				return theme === void 0 ? null : theme.colorScheme;
+			};
 			const registerCustom = (h, s, l) => {
+				const { colorScheme, tokens } = genTokens(h, s, l);
+				if (skinScheme === colorScheme && registeredScheme() !== null) {
+					if (ctx.theme.getTheme().preference !== CUSTOM_ID) ctx.theme.setTheme(CUSTOM_ID);
+					return;
+				}
 				customDispose?.();
 				try {
-					const { colorScheme, tokens } = genTokens(h, s, l);
 					customDispose = ctx.theme.register({
 						id: CUSTOM_ID,
 						colorScheme,
@@ -6531,12 +7227,14 @@ window.__ModuleLoader__.load({
 				} catch {
 					customDispose = null;
 				}
+				skinScheme = registeredScheme() ?? colorScheme;
 				if (ctx.theme.getTheme().themes.some((t) => t.id === CUSTOM_ID)) ctx.theme.setTheme(CUSTOM_ID);
 			};
 			/** A rule without a saved color means "follow the system theme". */
 			const dropCustom = () => {
 				customDispose?.();
 				customDispose = null;
+				skinScheme = null;
 				try {
 					if (ctx.theme.getTheme().preference === CUSTOM_ID) ctx.theme.setTheme("system");
 				} catch {}
@@ -6847,10 +7545,12 @@ window.__ModuleLoader__.load({
 			/**
 			* The slot of the holiday that could paint TODAY, or null.
 			*
-			* Gated on the CALENDAR, not merely on the switch. Now that the override is on
-			* by default and invisible, a profile that simply is not on a holiday must not
-			* pull ~730 KB of bundled art (≈970 KB of base64 over this channel) at every
-			* boot just because the feature is armed.
+			* Gated on the CALENDAR, not merely on the switch — and this gate is worth more
+			* than it used to be. The art does not ship in the package any more: the first
+			* read on the day sends the node half to the network, so a profile that is
+			* simply not on a holiday must not merely avoid ~730 KB of base64 over this
+			* channel, it must avoid starting a download at all. On every other day this
+			* returns null and nothing is fetched, cached or paid for.
 			*/
 			const todayHolidaySlot = () => {
 				if (!cfg.holidays.enabled) return null;
@@ -7028,6 +7728,53 @@ window.__ModuleLoader__.load({
 					matched: activeMatched
 				};
 			};
+			/**
+			* Write a whole theme file into the store: its rules, its wallpapers, nothing
+			* else. The ONE door both imports come through — the file the user picked and
+			* the profile downloaded from the project's asset host — so a downloaded
+			* profile cannot arrive by a laxer route than a hand-picked file does.
+			*
+			* `wipeFirst` is the entire difference between them, and it belongs to the
+			* recommended profile alone. `nextSlot` hands slots out as `m1`, `m2`, … — a
+			* counter, not a random token — so a downloaded profile and the store it lands
+			* in collide on those names as a matter of course rather than by coincidence.
+			* Emptying the store first is what makes "replace everything with this"
+			* literally true, instead of overwriting whichever of the user's own pictures
+			* happened to share a name. The file path keeps the older behaviour: it
+			* replaces the rules but pre-emptively deletes nothing.
+			*
+			* The wipe happens HERE rather than before the download, and that ordering is
+			* the one thing worth being pedantic about: an unreachable CDN must not cost
+			* the user their configuration on the way to a profile that never arrived. By
+			* the time this runs the bytes are already in hand, so the caller has nothing
+			* left to fail at.
+			*/
+			const applyThemeFile = async (data, wipeFirst) => {
+				if (typeof data.version === "number" && data.version > 6) return false;
+				if (typeof data.config !== "object" || data.config === null) return false;
+				if (wipeFirst) {
+					await resetStore();
+					resetConfig();
+				}
+				adoptConfig(data.config);
+				const incoming = data.images ?? {};
+				const keep = /* @__PURE__ */ new Set();
+				for (const slot of cfg.rules.flatMap(ruleSlots)) {
+					keep.add(slot);
+					const raw = incoming[slot];
+					if (typeof raw === "string" && /^data:image\//.test(raw)) {
+						setImage(slot, raw);
+						writeImage(slot, raw);
+					} else {
+						setImage(slot, null);
+						deleteImage(slot);
+					}
+				}
+				for (const slot of Object.keys(incoming)) if (!keep.has(slot) && /^[A-Za-z0-9_-]{1,32}$/.test(slot)) deleteImage(slot);
+				persistConfig();
+				applyActive();
+				return true;
+			};
 			const sectionInject = (actions) => {
 				bound = actions;
 				sync();
@@ -7091,6 +7838,7 @@ window.__ModuleLoader__.load({
 							const slot = nextSlot();
 							const image = {
 								slot,
+								bgMode: "fit",
 								bgState: { ...DEFAULT_BG_STATE },
 								color: null
 							};
@@ -7111,6 +7859,7 @@ window.__ModuleLoader__.load({
 						if (idx < 0) return;
 						const winner = winnerId();
 						rule.images.splice(idx, 1);
+						if (rule.images.length < 2 && rule.rotate.enabled) patchRotation(rule, { enabled: false });
 						if (id === activeRuleId) setRotIndex(0);
 						rulesRev++;
 						persistConfig();
@@ -7151,6 +7900,29 @@ window.__ModuleLoader__.load({
 						saveConfig();
 						repaintIfMoved(id, winner);
 					},
+					/**
+					* Store ONE image's layout mode. Addressed by slot like `setImageFraming`,
+					* for the same reason: how a picture meets the viewport is a property of the
+					* picture, and 适应 on a tall screenshot says nothing about the landscape
+					* photo beside it in the rotation.
+					*
+					* A mode is a placement, not a paint: it changes nothing about WHICH image is
+					* on screen, only how it is laid out. So the patch is written, sanitized, and
+					* the layer repainted through the same `repaintIfMoved` the framing commit
+					* uses — that call repaints the current image whether or not the winner
+					* moved, which is what makes the chips feel live.
+					*/
+					setImageMode: (id, slot, mode) => {
+						const rule = ruleById(id);
+						const image = rule?.images.find((i) => i.slot === slot);
+						if (rule === null || image === void 0) return;
+						const winner = winnerId();
+						image.bgMode = mode;
+						normalizeRuleInPlace(rule);
+						rulesRev++;
+						saveConfig();
+						repaintIfMoved(id, winner);
+					},
 					setRuleRotation: (id, patch) => {
 						const rule = ruleById(id);
 						if (rule === null) return;
@@ -7205,6 +7977,7 @@ window.__ModuleLoader__.load({
 						const winner = winnerId();
 						rule.images.push({
 							slot,
+							bgMode: "fit",
 							bgState: { ...DEFAULT_BG_STATE },
 							color: null
 						});
@@ -7329,29 +8102,93 @@ window.__ModuleLoader__.load({
 						try {
 							const data = JSON.parse(await file.text());
 							if (!data || typeof data !== "object") return false;
-							const d = data;
-							if (typeof d.config !== "object" || d.config === null) return false;
-							adoptConfig(d.config);
-							const incoming = d.images ?? {};
-							const keep = /* @__PURE__ */ new Set();
-							for (const slot of cfg.rules.flatMap(ruleSlots)) {
-								keep.add(slot);
-								const raw = incoming[slot];
-								if (typeof raw === "string" && /^data:image\//.test(raw)) {
-									setImage(slot, raw);
-									writeImage(slot, raw);
-								} else {
-									setImage(slot, null);
-									deleteImage(slot);
-								}
-							}
-							for (const slot of Object.keys(incoming)) if (!keep.has(slot) && /^[A-Za-z0-9_-]{1,32}$/.test(slot)) deleteImage(slot);
-							persistConfig();
-							applyActive();
-							return true;
+							return await applyThemeFile(data, false);
 						} catch {
 							return false;
 						}
+					},
+					/**
+					* Fetch the project's recommended profile. Downloads only.
+					*
+					* Split from applying it on purpose: the page has to ask before anything is
+					* destroyed, and a confirmation can only describe what is actually in hand
+					* — "7 rules, 7 wallpapers, 2.9 MB" — which means the download comes first
+					* and the question second.
+					*
+					* The profile is a DIRECTORY now, so this is a pool rather than one call:
+					* the manifest and config say which slots exist, and each wallpaper is one
+					* request, up to `PRESET_CONCURRENCY` of them at a time. What the fan-out
+					* buys is wall-clock time — the real profile measured 8.3 s fetched one at
+					* a time against 4.8 s with four in flight — while each file keeps its own
+					* mirror fallback, its own validation, and its own slot name in a failure.
+					*
+					* STRICT, and the pool is what makes that a decision rather than a
+					* formality: the first wallpaper that cannot be had stops the queue, so the
+					* files nobody has asked for yet are never asked for. Whatever was already
+					* in flight finishes and is thrown away. Nothing has been touched at this
+					* point, so "the author renamed a file" arrives as an error naming the file
+					* rather than as a profile that is quietly missing a picture — and that
+					* loudness is the whole reason this feature is allowed to follow a branch.
+					*/
+					fetchRecommended: async (onProgress) => {
+						const head = await fetchPresetConfig();
+						if (!head.ok) return {
+							ok: false,
+							error: head.error
+						};
+						const slots = head.slots;
+						const images = {};
+						let next = 0;
+						let done = 0;
+						let bytes = 0;
+						/** Latched by the first worker to fail, so the rest stop asking. */
+						let stopped = false;
+						onProgress?.(0, slots.length);
+						const worker = async () => {
+							for (;;) {
+								if (stopped || next >= slots.length) return null;
+								const slot = slots[next++];
+								const got = await fetchPresetImage(slot);
+								if (!got.ok) {
+									stopped = true;
+									return {
+										error: got.error,
+										slot
+									};
+								}
+								images[slot] = got.dataUrl;
+								bytes += got.dataUrl.length;
+								if (bytes > PRESET_TOTAL_MAX) {
+									stopped = true;
+									return { error: "too large" };
+								}
+								onProgress?.(++done, slots.length);
+							}
+						};
+						const failure = (await Promise.all(Array.from({ length: Math.min(PRESET_CONCURRENCY, slots.length) }, worker))).find((r) => r !== null) ?? null;
+						if (failure !== null) return {
+							ok: false,
+							error: failure.error,
+							slot: failure.slot
+						};
+						return {
+							ok: true,
+							preset: {
+								version: head.version,
+								exportedAt: (/* @__PURE__ */ new Date()).toISOString(),
+								config: head.config,
+								images
+							}
+						};
+					},
+					/**
+					* Replace EVERYTHING with a downloaded profile: empty the store, then write
+					* the profile into it. Irreversible by design, which is why the page asks
+					* first and why nothing here is offered as an undo.
+					*/
+					applyRecommended: async (preset) => {
+						if (!canWriteConfig()) return false;
+						return await applyThemeFile(preset, true);
 					}
 				};
 			};