dsh-background-by-model 0.7.5 → 0.7.6

package/lib/client.js

@@ -55,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://…",
@@ -112,7 +121,6 @@ window.__ModuleLoader__.load({
 			rotEvery1m: "1 分钟",
 			rotEvery5m: "5 分钟",
 			rotEvery30m: "30 分钟",
-			rotEvery1h: "1 小时",
 			bgModeFit: "适应",
 			bgModeFill: "填充",
 			bgModeStretch: "拉伸",
@@ -142,6 +150,24 @@ 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: "节日特殊背景",
@@ -199,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://…",
@@ -256,7 +291,6 @@ window.__ModuleLoader__.load({
 			rotEvery1m: "1 min",
 			rotEvery5m: "5 min",
 			rotEvery30m: "30 min",
-			rotEvery1h: "1 h",
 			bgModeFit: "Fit",
 			bgModeFill: "Fill",
 			bgModeStretch: "Stretch",
@@ -286,6 +320,24 @@ 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",
@@ -914,7 +966,7 @@ window.__ModuleLoader__.load({
 		* 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.8 keeps `bgMode` at the RULE
+		* 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
@@ -1033,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();
@@ -1128,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 = "";
@@ -1371,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. */
@@ -1394,10 +1414,6 @@ window.__ModuleLoader__.load({
 			{
 				ms: 18e5,
 				key: "rotEvery30m"
-			},
-			{
-				ms: 36e5,
-				key: "rotEvery1h"
 			}
 		];
 		/**
@@ -1601,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", {});
@@ -2042,6 +2104,34 @@ 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}
@@ -2067,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)}
@@ -2084,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}
@@ -2137,7 +2226,7 @@ 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)}
@@ -2225,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}
@@ -4163,6 +4323,18 @@ window.__ModuleLoader__.load({
 			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
 		/**
@@ -4490,6 +4662,42 @@ window.__ModuleLoader__.load({
 			})] });
 		}
 		//#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
@@ -5266,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("");
 		}
@@ -5283,152 +5481,287 @@ 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);
+						})()
+					})
+				]
+			})] });
+		}
+		/**
+		* 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 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 }) {
+		function RuleCard({ p, rule, index, total, active, liveIndex, notify, sel, onSel, onRemove }) {
 			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). */
@@ -5444,10 +5777,11 @@ window.__ModuleLoader__.load({
 			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);
@@ -5459,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
@@ -5493,7 +5826,7 @@ window.__ModuleLoader__.load({
 						pending--;
 						if (pending === 0) {
 							p.addRuleImages(rule.id, out.filter((x) => typeof x === "string"));
-							setSel(first);
+							onSel(first);
 						}
 					});
 				});
@@ -5528,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;
@@ -5618,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 = () => {
@@ -5640,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
@@ -5689,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",
@@ -5756,7 +6092,7 @@ window.__ModuleLoader__.load({
 													draggedRef.current = false;
 													return;
 												}
-												setSel(i);
+												onSel(i);
 											},
 											onDoubleClick: () => {
 												if (!active) {
@@ -5905,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", {
@@ -6109,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: [
@@ -6201,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",
@@ -6263,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
@@ -6309,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",
@@ -6440,70 +6836,210 @@ 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 },
@@ -6637,6 +7173,33 @@ 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;
@@ -6982,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;
@@ -7163,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();
@@ -7490,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);
 					}
 				};
 			};