dsh-background-by-model 0.7.4 → 0.7.5

package/lib/client.js

@@ -33,6 +33,7 @@ window.__ModuleLoader__.load({
 			uiOpacityBg: "主背景",
 			uiOpacitySide: "左侧栏",
 			uiOpacityCard: "卡片与菜单面板",
+			uiOpacityCode: "代码块",
 			uiOpacityInput: "输入框与控件",
 			uiSop: "设置界面透明度",
 			uiChatRegion: "对话文本框",
@@ -83,6 +84,7 @@ window.__ModuleLoader__.load({
 			ruleColorTargetImage: "作用于选中的图片：",
 			ruleColorTargetRule: "作用于本规则（它还没有图片）",
 			ruleLayout: "布局模式",
+			ruleLayoutNoImage: "添加图片后可分别设置每张图的布局模式",
 			ruleFramingEdit: "编辑位置",
 			ruleOpacity: "背景透明度",
 			ruleBlur: "背景模糊",
@@ -141,6 +143,7 @@ window.__ModuleLoader__.load({
 			importDone: "已导入配置",
 			importFail: "导入失败，文件格式不正确",
 			footerTag: "按模型换背景插件",
+			repoLink: "在 GitHub 上打开仓库",
 			holidayTitle: "节日特殊背景",
 			holidayEnable: "启用节日特殊背景（中秋当天、国庆 10 月 1–7 日）",
 			trTitle: "切换效果",
@@ -174,6 +177,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",
@@ -224,6 +228,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",
@@ -282,6 +287,7 @@ window.__ModuleLoader__.load({
 			importDone: "Profile imported",
 			importFail: "Import failed — invalid file",
 			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 +584,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 +732,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 +742,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 +879,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 +913,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.8 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 +935,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 +948,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 +974,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 +987,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
 				}))
@@ -1194,7 +1228,6 @@ window.__ModuleLoader__.load({
 				match: "",
 				enabled: true,
 				color: null,
-				bgMode: "fit",
 				wallpaperOpacity: 1,
 				blur: 0,
 				rotate: defaultRotation()
@@ -1255,8 +1288,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);
@@ -1510,7 +1552,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,
@@ -1603,10 +1645,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 +1820,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)),
@@ -2002,7 +2046,11 @@ window.__ModuleLoader__.load({
 /* ── 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}
@@ -2093,6 +2141,11 @@ window.__ModuleLoader__.load({
 .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 +2204,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}
@@ -2425,6 +2482,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 +2499,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 +2726,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 +2738,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 +2808,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 +2839,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 +2930,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 +4157,12 @@ 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" })
+		});
 		//#endregion
 		//#region src/client/components/ErrorBoundary.tsx
 		/**
@@ -4139,6 +4233,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 +4342,12 @@ window.__ModuleLoader__.load({
 				labelKey: "uiOpacityCard",
 				Icon: ChatIcon
 			},
+			{
+				opKey: "code",
+				labelKey: "uiOpacityCode",
+				Icon: CodeIcon,
+				noBlur: true
+			},
 			{
 				opKey: "input",
 				labelKey: "uiOpacityInput",
@@ -4278,9 +4391,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 +4464,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,7 +4485,7 @@ window.__ModuleLoader__.load({
 								}
 							})
 						]
-					}, blurKey);
+					}, blurKey ?? opKey);
 				})
 			})] });
 		}
@@ -5450,6 +5563,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) => {
@@ -5932,12 +6046,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),
@@ -6270,12 +6389,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,
@@ -6393,8 +6507,12 @@ window.__ModuleLoader__.load({
 				/* @__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 +6576,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 })
@@ -6519,10 +6641,21 @@ window.__ModuleLoader__.load({
 			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 +6664,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 {}
@@ -7091,6 +7226,7 @@ window.__ModuleLoader__.load({
 							const slot = nextSlot();
 							const image = {
 								slot,
+								bgMode: "fit",
 								bgState: { ...DEFAULT_BG_STATE },
 								color: null
 							};
@@ -7111,6 +7247,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 +7288,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 +7365,7 @@ window.__ModuleLoader__.load({
 						const winner = winnerId();
 						rule.images.push({
 							slot,
+							bgMode: "fit",
 							bgState: { ...DEFAULT_BG_STATE },
 							color: null
 						});