dsh-background-by-model 0.3.2 → 0.4.1

package/lib/client.js

@@ -32,31 +32,30 @@ window.__ModuleLoader__.load({
 			uiOpacity: "透明度",
 			uiBlur: "模糊度",
 			uiOpacityBg: "主背景",
-			uiOpacitySide: "侧边栏",
-			uiOpacityCard: "对话框中选项面板",
+			uiOpacitySide: "左侧栏",
+			uiOpacityCard: "卡片与菜单面板",
 			uiOpacityInput: "输入框与控件",
 			uiSop: "设置界面透明度",
 			uiChatRegion: "对话文本框",
 			uiTrajectory: "轨迹页",
-			uiPreview: "文件预览侧栏",
-			uiPreviewHint: "点开文件后出现在右侧的那一栏。透明度默认跟随「主背景」，拖动本卡片后单独生效；模糊会在主背景模糊之上再叠加一层",
-			uiScopeHint: "界面页的设置是全局的，所有模型共用",
-			statusTitle: "当前生效",
-			statusModel: "当前模型",
-			statusUnknown: "未检测到当前模型",
+			uiPreview: "右侧栏",
 			statusUnknownHint: "检测不到时一律使用第 1 条可用规则；切换一次模型或稍等片刻会自动重试",
-			statusSourceDefault: "宿主默认",
 			statusSourceDefaultHint: "只读到宿主默认模型，它不是本会话当前选择的模型；本会话的模型选择可用后会自动纠正",
 			statusNoteNoService: "仍未拿到会话服务（会话控制器晚于本插件加载），正在自动重试",
 			statusNoteNoSession: "会话服务已就绪，但还没有当前会话 id",
 			statusNoteNoProjection: "拿不到本会话的模型选择投影（binding / projections 不可用）",
 			statusNoteEmptySelection: "本会话的模型选择投影还没有值（切一次模型即可写入）",
-			statusNone: "还没有可用规则（规则需要启用并选择图片）",
-			statusHit: "命中",
-			statusFallback: "未命中 · 使用兜底",
-			statusRule: "规则",
 			rulesTitle: "规则列表",
 			rulesHint: "从上到下即为优先级。规则 1 同时兼任兜底：所有匹配串都没命中时使用它",
+			tryoutTitle: "匹配试跑",
+			tryoutPlaceholder: "输入模型名，如 deepseek-flash",
+			tryoutUseCurrent: "填入当前模型",
+			tryoutHit: "命中规则",
+			tryoutFallback: "无匹配 · 走兜底规则",
+			tryoutNone: "没有可用规则（规则需要启用并有图片）",
+			tryoutEmpty: "输入模型名即可试跑",
+			autoExtract: "选图后自动取主题色",
+			autoExtractHint: "只在规则还没有颜色时自动取色，绝不覆盖你手动选的颜色",
 			ruleAdd: "新增规则",
 			ruleFallbackBadge: "兜底",
 			ruleMatchLabel: "匹配串",
@@ -104,7 +103,7 @@ window.__ModuleLoader__.load({
 			extractColor: "从图片提取主题色",
 			extracting: "取色中…",
 			extractNoWp: "请先为该规则选择图片",
-			extractDone: "已应用图片主色调",
+			extractDone: "已应用图片配色",
 			extractFail: "未在这张图里找到鲜明的颜色，请换一张",
 			eyedropper: "从图片取色",
 			pickerTitle: "从图片取色",
@@ -138,31 +137,30 @@ window.__ModuleLoader__.load({
 			uiOpacity: "Opacity",
 			uiBlur: "Blur",
 			uiOpacityBg: "Main background",
-			uiOpacitySide: "Sidebar",
-			uiOpacityCard: "Cards & panels",
+			uiOpacitySide: "Left panel",
+			uiOpacityCard: "Cards & menus",
 			uiOpacityInput: "Input & controls",
 			uiSop: "Settings interface opacity",
 			uiChatRegion: "Conversation text frame",
 			uiTrajectory: "Trajectory view",
-			uiPreview: "File preview panel",
-			uiPreviewHint: "The column that slides in on the right when you open a file. Its opacity follows the Main background until you drag this card; its blur stacks on top of the Main background blur",
-			uiScopeHint: "Interface settings are global — every model shares them",
-			statusTitle: "Active now",
-			statusModel: "Current model",
-			statusUnknown: "No model detected",
+			uiPreview: "Right panel",
 			statusUnknownHint: "Without a detected model rule 1 is always used; switching the model once or waiting a moment retries automatically",
-			statusSourceDefault: "host default",
 			statusSourceDefaultHint: "Only the host-wide default model could be read — that is not necessarily this session's selection. It self-corrects once this session's model selection is available.",
 			statusNoteNoService: "The sessions service is not available yet (the session controller loads after this plugin); retrying automatically",
 			statusNoteNoSession: "The sessions service is up but reports no current session yet",
 			statusNoteNoProjection: "This session's model-selection projection is unreachable (no binding / projections)",
 			statusNoteEmptySelection: "The model-selection projection exists but carries no value yet (selecting a model once writes it)",
-			statusNone: "No usable rule yet (a rule needs to be enabled and have an image)",
-			statusHit: "matched",
-			statusFallback: "no match · using the fallback",
-			statusRule: "Rule",
 			rulesTitle: "Rules",
 			rulesHint: "Top to bottom is the priority. Rule 1 doubles as the fallback — it is used when no match string hits",
+			tryoutTitle: "Match test",
+			tryoutPlaceholder: "Type a model name, e.g. deepseek-flash",
+			tryoutUseCurrent: "Use current model",
+			tryoutHit: "matches rule",
+			tryoutFallback: "no match · fallback rule",
+			tryoutNone: "No usable rule (a rule needs to be enabled and have an image)",
+			tryoutEmpty: "Type a model name to test the list",
+			autoExtract: "Extract the theme color when an image is chosen",
+			autoExtractHint: "Only fills a rule that has no color yet — a color you picked is never overwritten",
 			ruleAdd: "Add rule",
 			ruleFallbackBadge: "fallback",
 			ruleMatchLabel: "Match",
@@ -210,7 +208,7 @@ window.__ModuleLoader__.load({
 			extractColor: "Extract from image",
 			extracting: "Extracting…",
 			extractNoWp: "Choose an image for this rule first",
-			extractDone: "Image color applied",
+			extractDone: "Image colors applied",
 			extractFail: "No vivid color found in this image, try another",
 			eyedropper: "Eyedropper",
 			pickerTitle: "Pick from image",
@@ -231,7 +229,7 @@ window.__ModuleLoader__.load({
 			footerTag: "Per-model wallpaper plugin"
 		};
 		//#endregion
-		//#region src/client/state.ts
+		//#region src/schema.ts
 		const DEFAULT_BG_STATE = {
 			zoom: 1,
 			x: 0,
@@ -239,6 +237,7 @@ window.__ModuleLoader__.load({
 			iw: 0,
 			ih: 0
 		};
+		/** Every accepted `bgMode`, in UI order. */
 		const BG_MODES$1 = [
 			"fit",
 			"fill",
@@ -246,6 +245,138 @@ window.__ModuleLoader__.load({
 			"tile",
 			"center"
 		];
+		/**
+		* Main interface opacities (0..1), global (Interface page):
+		*   `bg`      main background (`--dsw-alias-bg-base`)
+		*   `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`)
+		*   `input`   input/control surfaces (`--dsw-specific-input-major`)
+		*/
+		const PART_OPACITY_KEYS = [
+			"bg",
+			"sidebar",
+			"card",
+			"input"
+		];
+		const DEFAULT_PART_OPACITIES = {
+			bg: .85,
+			sidebar: .93,
+			card: 1,
+			input: 1
+		};
+		/**
+		* Interface blur (px, 0..60), global (Interface page):
+		*   `bg`         main background (AppFrame grid)
+		*   `sidebar`    sidebar column
+		*   `card`       cards/panels (center + details columns, dialog option panels)
+		*   `settings`   settings panel
+		*   `chat`       conversation text region (message column of the chat view)
+		*   `trajectory` trajectory view surface
+		*   `rightbar`   file-preview panel — the right sidebar a file click opens
+		*   `input`      input/control surfaces ([data-composer-card], [data-cordis-panel])
+		*/
+		const PART_BLUR_KEYS = [
+			"bg",
+			"sidebar",
+			"card",
+			"settings",
+			"chat",
+			"trajectory",
+			"rightbar",
+			"input"
+		];
+		const DEFAULT_PART_BLURS = {
+			bg: 0,
+			sidebar: 0,
+			card: 0,
+			settings: 0,
+			chat: 0,
+			trajectory: 0,
+			rightbar: 0,
+			input: 0
+		};
+		/** A default config with independent nested objects (never hand out the shared ones). */
+		function freshThemeConfig() {
+			return {
+				rules: [],
+				opacities: { ...DEFAULT_PART_OPACITIES },
+				blurs: { ...DEFAULT_PART_BLURS },
+				settingsOpacity: 1,
+				chatTextOpacity: 0,
+				trajectoryOpacity: 1,
+				rightbarOpacity: null,
+				autoExtract: true
+			};
+		}
+		/** Slot names reach the filesystem, so they are strictly whitelisted. */
+		const SLOT_RE = /^[A-Za-z0-9_-]{1,32}$/;
+		function clamp$1(n, lo, hi, def) {
+			return typeof n === "number" && isFinite(n) ? Math.min(hi, Math.max(lo, n)) : def;
+		}
+		const clamp01 = (n, def) => clamp$1(n, 0, 1, def);
+		function normalizeBgState(s) {
+			const v = s ?? {};
+			return {
+				zoom: clamp$1(v.zoom, .1, 10, 1),
+				x: typeof v.x === "number" && isFinite(v.x) ? v.x : 0,
+				y: typeof v.y === "number" && isFinite(v.y) ? v.y : 0,
+				iw: typeof v.iw === "number" && v.iw > 0 ? v.iw : 0,
+				ih: typeof v.ih === "number" && v.ih > 0 ? v.ih : 0
+			};
+		}
+		/** One `[h, s, l]` triple, or null when the value is not a complete finite triple. */
+		function normalizeHsl(raw) {
+			if (!Array.isArray(raw) || raw.length !== 3) return null;
+			if (!raw.every((n) => typeof n === "number" && isFinite(n))) return null;
+			return [
+				clamp$1(raw[0], 0, 360, 220),
+				clamp$1(raw[1], 0, 1, .55),
+				clamp$1(raw[2], 0, 1, .25)
+			];
+		}
+		/** Coerce one persisted rule, or null when it lacks a usable id/slot. */
+		function normalizeRule(raw) {
+			const r = raw ?? {};
+			const id = typeof r.id === "string" && r.id !== "" ? r.id : null;
+			const slot = typeof r.slot === "string" && SLOT_RE.test(r.slot) ? r.slot : null;
+			if (id === null || slot === null) return null;
+			const mode = BG_MODES$1.includes(r.bgMode) ? r.bgMode : "fit";
+			return {
+				id,
+				slot,
+				match: typeof r.match === "string" ? r.match : "",
+				enabled: r.enabled !== false,
+				color: normalizeHsl(r.color),
+				bgMode: mode,
+				wallpaperOpacity: clamp01(r.wallpaperOpacity, 1),
+				blur: clamp$1(r.blur, 0, 60, 0),
+				bgState: normalizeBgState(r.bgState)
+			};
+		}
+		/** Coerce an unknown persisted value into a valid ThemeConfig, falling back per-field. */
+		function normalizeConfig(raw) {
+			const r = raw ?? {};
+			const rules = Array.isArray(r.rules) ? r.rules.map(normalizeRule).filter((x) => x !== null) : [];
+			const ops = r.opacities ?? {};
+			const bl = r.blurs ?? {};
+			const blurs = {};
+			for (const k of PART_BLUR_KEYS) blurs[k] = clamp$1(bl[k], 0, 60, DEFAULT_PART_BLURS[k]);
+			const opacities = {};
+			for (const k of PART_OPACITY_KEYS) opacities[k] = clamp01(ops[k], DEFAULT_PART_OPACITIES[k]);
+			return {
+				rules,
+				opacities,
+				blurs,
+				settingsOpacity: clamp01(r.settingsOpacity, 1),
+				chatTextOpacity: clamp01(r.chatTextOpacity, 0),
+				trajectoryOpacity: clamp01(r.trajectoryOpacity, 1),
+				rightbarOpacity: typeof r.rightbarOpacity === "number" && isFinite(r.rightbarOpacity) ? clamp01(r.rightbarOpacity, 1) : null,
+				autoExtract: r.autoExtract !== false
+			};
+		}
+		//#endregion
+		//#region src/client/state.ts
 		const PALETTE = [
 			[
 				356,
@@ -288,41 +419,8 @@ window.__ModuleLoader__.load({
 				.58
 			]
 		];
-		const DEFAULT_CONFIG = {
-			rules: [],
-			opacities: {
-				bg: .85,
-				sidebar: .93,
-				card: 1,
-				input: 1
-			},
-			blurs: {
-				bg: 0,
-				sidebar: 0,
-				card: 0,
-				settings: 0,
-				chat: 0,
-				trajectory: 0,
-				rightbar: 0,
-				input: 0
-			},
-			settingsOpacity: 1,
-			chatTextOpacity: 0,
-			trajectoryOpacity: 1,
-			rightbarOpacity: null
-		};
-		function freshConfig() {
-			return {
-				rules: [],
-				opacities: { ...DEFAULT_CONFIG.opacities },
-				blurs: { ...DEFAULT_CONFIG.blurs },
-				settingsOpacity: DEFAULT_CONFIG.settingsOpacity,
-				chatTextOpacity: DEFAULT_CONFIG.chatTextOpacity,
-				trajectoryOpacity: DEFAULT_CONFIG.trajectoryOpacity,
-				rightbarOpacity: DEFAULT_CONFIG.rightbarOpacity
-			};
-		}
-		let cfg = freshConfig();
+		freshThemeConfig();
+		let cfg = freshThemeConfig();
 		const images = /* @__PURE__ */ new Map();
 		const displayUrls = /* @__PURE__ */ new Map();
 		function revokeDisplay(slot) {
@@ -419,8 +517,6 @@ window.__ModuleLoader__.load({
 			}
 			return `r${Date.now()}`;
 		}
-		const clamp01 = (n, def) => typeof n === "number" && isFinite(n) ? Math.min(1, Math.max(0, n)) : def;
-		const clamp$1 = (n, lo, hi, def) => typeof n === "number" && isFinite(n) ? Math.min(hi, Math.max(lo, n)) : def;
 		function rHasColor() {
 			return activeRule()?.color !== null && activeRule() !== null;
 		}
@@ -451,108 +547,33 @@ window.__ModuleLoader__.load({
 		function rOps() {
 			const o = cfg.opacities ?? {};
 			const out = {};
-			for (const k of [
-				"bg",
-				"sidebar",
-				"card",
-				"input"
-			]) out[k] = clamp01(o[k], DEFAULT_CONFIG.opacities[k]);
+			for (const k of PART_OPACITY_KEYS) out[k] = clamp01(o[k], DEFAULT_PART_OPACITIES[k]);
 			return out;
 		}
 		function rBlurs() {
 			const b = cfg.blurs ?? {};
 			const out = {};
-			for (const k of [
-				"bg",
-				"sidebar",
-				"card",
-				"settings",
-				"chat",
-				"trajectory",
-				"rightbar",
-				"input"
-			]) out[k] = clamp$1(b[k], 0, 60, DEFAULT_CONFIG.blurs[k]);
+			for (const k of PART_BLUR_KEYS) out[k] = clamp$1(b[k], 0, 60, DEFAULT_PART_BLURS[k]);
 			return out;
 		}
 		function rSop() {
-			return clamp01(cfg.settingsOpacity, DEFAULT_CONFIG.settingsOpacity);
+			return clamp01(cfg.settingsOpacity, 1);
 		}
 		function rChatTextOpacity() {
-			return clamp01(cfg.chatTextOpacity, DEFAULT_CONFIG.chatTextOpacity);
+			return clamp01(cfg.chatTextOpacity, 0);
 		}
 		function rTrajectoryOpacity() {
-			return clamp01(cfg.trajectoryOpacity, DEFAULT_CONFIG.trajectoryOpacity);
+			return clamp01(cfg.trajectoryOpacity, 1);
 		}
 		/** Own opacity of the file-preview panel; while unowned it IS the main background's. */
 		function rRightbarOpacity() {
 			const own = cfg.rightbarOpacity;
 			return typeof own === "number" && isFinite(own) ? clamp01(own, 1) : rOps().bg;
 		}
-		function adoptBgState(s) {
-			return {
-				zoom: clamp$1(s.zoom, .1, 10, 1),
-				x: typeof s.x === "number" && isFinite(s.x) ? s.x : 0,
-				y: typeof s.y === "number" && isFinite(s.y) ? s.y : 0,
-				iw: typeof s.iw === "number" && s.iw > 0 ? s.iw : 0,
-				ih: typeof s.ih === "number" && s.ih > 0 ? s.ih : 0
-			};
-		}
-		/** Coerce one persisted rule, or null when it lacks a usable id/slot. */
-		function normalizeRule(raw) {
-			const r = raw ?? {};
-			const id = typeof r.id === "string" && r.id !== "" ? r.id : null;
-			const slot = typeof r.slot === "string" && /^[A-Za-z0-9_-]{1,32}$/.test(r.slot) ? r.slot : null;
-			if (id === null || slot === null) return null;
-			const c = r.color;
-			const color = Array.isArray(c) && c.length === 3 && c.every((n) => typeof n === "number" && isFinite(n)) ? [
-				clamp$1(c[0], 0, 360, 220),
-				clamp$1(c[1], 0, 1, .55),
-				clamp$1(c[2], 0, 1, .25)
-			] : null;
-			return {
-				id,
-				slot,
-				match: typeof r.match === "string" ? r.match : "",
-				enabled: r.enabled !== false,
-				color,
-				bgMode: BG_MODES$1.includes(r.bgMode) ? r.bgMode : "fit",
-				wallpaperOpacity: clamp01(r.wallpaperOpacity, 1),
-				blur: clamp$1(r.blur, 0, 60, 0),
-				bgState: adoptBgState(r.bgState ?? {})
-			};
-		}
 		/** Move a possibly-absent partial config into the shape the UI reads. */
 		function adoptConfig(raw) {
-			const c = raw ?? {};
-			const rules = Array.isArray(c.rules) ? c.rules.map(normalizeRule).filter((r) => r !== null) : [];
-			const ops = c.opacities ?? {};
-			const bl = c.blurs ?? {};
-			const blurs = {};
-			for (const k of [
-				"bg",
-				"sidebar",
-				"card",
-				"settings",
-				"chat",
-				"trajectory",
-				"rightbar",
-				"input"
-			]) blurs[k] = clamp$1(bl[k], 0, 60, DEFAULT_CONFIG.blurs[k]);
-			cfg = {
-				rules,
-				opacities: {
-					bg: clamp01(ops.bg, DEFAULT_CONFIG.opacities.bg),
-					sidebar: clamp01(ops.sidebar, DEFAULT_CONFIG.opacities.sidebar),
-					card: clamp01(ops.card, DEFAULT_CONFIG.opacities.card),
-					input: clamp01(ops.input, DEFAULT_CONFIG.opacities.input)
-				},
-				blurs,
-				settingsOpacity: clamp01(c.settingsOpacity, DEFAULT_CONFIG.settingsOpacity),
-				chatTextOpacity: clamp01(c.chatTextOpacity, DEFAULT_CONFIG.chatTextOpacity),
-				trajectoryOpacity: clamp01(c.trajectoryOpacity, DEFAULT_CONFIG.trajectoryOpacity),
-				rightbarOpacity: typeof c.rightbarOpacity === "number" && isFinite(c.rightbarOpacity) ? clamp01(c.rightbarOpacity, 1) : null
-			};
-			if (activeRuleId !== null && !rules.some((r) => r.id === activeRuleId)) {
+			cfg = normalizeConfig(raw);
+			if (activeRuleId !== null && !cfg.rules.some((r) => r.id === activeRuleId)) {
 				activeRuleId = null;
 				activeMatched = false;
 			}
@@ -706,90 +727,95 @@ window.__ModuleLoader__.load({
 			const l = (d) => Math.max(0, Math.min(1, lit + d));
 			const hsl = (hh, ss, ll) => `hsl(${Math.round(hh)},${Math.round(ss * 100)}%,${Math.round(ll * 100)}%)`;
 			const rgba = (hh, ss, ll, a) => `hsla(${Math.round(hh)},${Math.round(ss * 100)}%,${Math.round(ll * 100)}%,${a})`;
-			if (dark) return {
-				colorScheme: "dark",
-				tokens: {
-					"--dsw-alias-bg-base": hsl(h(0), s(0), l(-.04)),
-					"--dsw-alias-bg-layer-1": hsl(h(0), s(0), l(.02)),
-					"--dsw-alias-bg-layer-2": hsl(h(0), s(0), l(.07)),
-					"--dsw-alias-bg-layer-3": hsl(h(0), s(-.05), l(.12)),
-					"--dsw-alias-bg-overlay": hsl(h(0), s(-.05), l(.12)),
-					"--dsw-alias-bg-module-platform": hsl(h(0), s(0), l(.05)),
-					"--dsw-alias-bg-multi-select": hsl(h(0), s(0), l(.1)),
-					"--dsw-alias-bg-skeleton": "rgba(255,255,255,0.08)",
-					"--dsw-alias-border-l1": rgba(h(0), s(-.1), l(.18), .12),
-					"--dsw-alias-border-l2": rgba(h(0), s(-.1), l(.22), .22),
-					"--dsw-alias-border-l3": "rgba(255,255,255,0.16)",
-					"--dsw-alias-border-l4": "rgba(255,255,255,0.2)",
-					"--dsw-alias-border-inverted": "rgba(255,255,255,0.06)",
-					"--dsw-alias-label-primary": hsl(0, 0, 1),
-					"--dsw-alias-label-secondary": "rgba(255,255,255,0.85)",
-					"--dsw-alias-label-tertiary": "rgba(255,255,255,0.7)",
-					"--dsw-alias-label-caption": "rgba(255,255,255,0.5)",
-					"--dsw-alias-label-dimmed": "rgba(255,255,255,0.35)",
-					"--dsw-alias-label-quaternary": "rgba(255,255,255,0.25)",
-					"--dsw-alias-label-primary-dimmed": "rgba(255,255,255,0.92)",
-					"--dsw-alias-label-primary-foreground": hsl(0, 0, 1),
-					"--dsw-alias-label-primary-inverted": hsl(h(0), s(.08), Math.min(l(.06), .16)),
-					"--dsw-alias-label-primary-bluish": hsl(0, 0, 1),
-					"--dsw-alias-brand-primary": hsl(h(0), s(.1), Math.max(l(.2), .5)),
-					"--dsw-alias-brand-text": l(.2) > .6 ? "#000" : "#fff",
-					"--dsw-alias-button-primary-fill": hsl(h(0), s(.1), Math.max(l(.2), .5)),
-					"--dsw-alias-button-primary-hover": hsl(h(0), s(.1), Math.max(l(.28), .58)),
-					"--dsw-alias-button-primary-dimmed": hsl(h(0), s(0), l(.07)),
-					"--dsw-alias-button-elevated-fill": hsl(h(0), s(0), l(.04)),
-					"--dsw-alias-button-floating-fill": hsl(h(0), s(0), l(.02)),
-					"--dsw-alias-button-floating-hover": hsl(h(0), s(0), l(.1)),
-					"--dsw-alias-button-tool-bar-fill": "rgba(255,255,255,0.08)",
-					"--dsw-alias-button-tool-bar-hover": "rgba(255,255,255,0.12)",
-					"--dsw-alias-button-ghost-active-fill": hsl(h(0), s(0), l(.06)),
-					"--dsw-alias-button-ghost-active-border": "rgba(255,255,255,0.16)",
-					"--dsw-alias-button-ghost-active-hover": hsl(h(0), s(0), l(.09)),
-					"--dsw-alias-button-info-fill": "#679efe",
-					"--dsw-alias-button-info-hover": "#4176e6",
-					"--dsw-alias-button-contrast-fill": hsl(0, 0, 1),
-					"--dsw-alias-interactive-bg-hover": rgba(h(0), s(0), Math.max(l(.15), .4), .12),
-					"--dsw-alias-interactive-bg-hover-solid": rgba(h(0), s(0), Math.max(l(.15), .4), .16),
-					"--dsw-alias-interactive-bg-hover-accent": "rgba(255,255,255,0.24)",
-					"--dsw-alias-interactive-bg-hover-danger": "rgba(242,90,90,0.15)",
-					"--dsw-alias-interactive-bg-active": rgba(h(0), s(0), Math.max(l(.15), .4), .2),
-					"--dsw-alias-markdown-code-block": hsl(h(0), s(0), l(-.06)),
-					"--dsw-alias-markdown-code-block-banner": hsl(h(0), s(0), l(-.02)),
-					"--dsw-alias-markdown-inline-code": hsl(h(0), s(0), l(.04)),
-					"--dsw-alias-markdown-placeholder": hsl(h(0), s(0), l(-.02)),
-					"--dsw-alias-markdown-tag": hsl(h(0), s(0), l(.05)),
-					"--dsw-alias-markdown-citation": hsl(h(0), s(0), l(.06)),
-					"--dsw-alias-markdown-code-segment-selected": hsl(h(0), s(0), l(.05)),
-					"--dsw-alias-markdown-code-segment-unselected": hsl(h(0), s(0), l(-.05)),
-					"--dsw-alias-state-error-primary": "#ff5c72",
-					"--dsw-alias-state-error-secondary": "#ff8aa0",
-					"--dsw-alias-state-success-primary": "#3ddc84",
-					"--dsw-alias-state-success-secondary": "#69eea4",
-					"--dsw-alias-state-success-tertiary": "#233c2c",
-					"--dsw-alias-state-warn-primary": "#ffb347",
-					"--dsw-alias-state-warn-secondary": "#ffc980",
-					"--dsw-alias-state-warn-tertiary": "#27241f",
-					"--dsw-alias-state-warn-label": "#dd8629",
-					"--dsw-alias-state-business-primary": "#679efe",
-					"--dsw-alias-state-business-tertiary": "#34415b",
-					"--dsw-specific-sidebar-fill": hsl(h(0), s(0), l(-.06)),
-					"--dsw-specific-sidebar-nav-item-active": hsl(h(0), s(0), l(.04)),
-					"--dsw-specific-sidebar-nav-item-hover": hsl(h(0), s(0), l(0)),
-					"--dsw-specific-input-major": hsl(h(0), s(0), l(.02)),
-					"--dsw-specific-menu": hsl(h(0), s(0), l(.08)),
-					"--dsw-specific-bubble": hsl(h(0), s(0), l(.03)),
-					"--dsw-specific-bubble-highlight": hsl(h(0), s(0), l(.08)),
-					"--dsw-specific-selector": hsl(h(0), s(0), l(.05)),
-					"--dsw-specific-login-input": hsl(h(0), s(0), l(.03)),
-					"--dsw-specific-tip": hsl(h(0), s(0), l(.05)),
-					"--dsw-alias-toast-bg": hsl(h(0), s(0), l(.08)),
-					"--dsw-alias-tooltip-bg": hsl(h(0), s(0), l(.08)),
-					"--dsw-alias-scrollbar-bg-l1": hsl(h(0), s(-.05), l(.12)),
-					"--dsw-alias-scrollbar-bg-l2": hsl(h(0), s(-.05), l(.16)),
-					"--dsw-alias-scrollbar-hover-l1": hsl(h(0), s(-.05), l(.22)),
-					"--dsw-alias-scrollbar-hover-l2": hsl(h(0), s(-.05), l(.22))
-				}
-			};
+			if (dark) {
+				const menuFill = hsl(h(0), s(0), l(.08));
+				return {
+					colorScheme: "dark",
+					tokens: {
+						"--dsw-alias-bg-base": hsl(h(0), s(0), l(-.04)),
+						"--dsw-alias-bg-layer-1": hsl(h(0), s(0), l(.02)),
+						"--dsw-alias-bg-layer-2": hsl(h(0), s(0), l(.07)),
+						"--dsw-alias-bg-layer-3": hsl(h(0), s(-.05), l(.12)),
+						"--dsw-alias-bg-overlay": hsl(h(0), s(-.05), l(.12)),
+						"--dsw-alias-bg-module-platform": hsl(h(0), s(0), l(.05)),
+						"--dsw-alias-bg-multi-select": hsl(h(0), s(0), l(.1)),
+						"--dsw-alias-bg-skeleton": "rgba(255,255,255,0.08)",
+						"--dsw-alias-border-l1": rgba(h(0), s(-.1), l(.18), .12),
+						"--dsw-alias-border-l2": rgba(h(0), s(-.1), l(.22), .22),
+						"--dsw-alias-border-l3": "rgba(255,255,255,0.16)",
+						"--dsw-alias-border-l4": "rgba(255,255,255,0.2)",
+						"--dsw-alias-border-inverted": "rgba(255,255,255,0.06)",
+						"--dsw-alias-label-primary": hsl(0, 0, 1),
+						"--dsw-alias-label-secondary": "rgba(255,255,255,0.85)",
+						"--dsw-alias-label-tertiary": "rgba(255,255,255,0.7)",
+						"--dsw-alias-label-caption": "rgba(255,255,255,0.5)",
+						"--dsw-alias-label-dimmed": "rgba(255,255,255,0.35)",
+						"--dsw-alias-label-quaternary": "rgba(255,255,255,0.25)",
+						"--dsw-alias-label-primary-dimmed": "rgba(255,255,255,0.92)",
+						"--dsw-alias-label-primary-foreground": hsl(0, 0, 1),
+						"--dsw-alias-label-primary-inverted": hsl(h(0), s(.08), Math.min(l(.06), .16)),
+						"--dsw-alias-label-primary-bluish": hsl(0, 0, 1),
+						"--dsw-alias-brand-primary": hsl(h(0), s(.1), Math.max(l(.2), .5)),
+						"--dsw-alias-brand-text": l(.2) > .6 ? "#000" : "#fff",
+						"--dsw-alias-button-primary-fill": hsl(h(0), s(.1), Math.max(l(.2), .5)),
+						"--dsw-alias-button-primary-hover": hsl(h(0), s(.1), Math.max(l(.28), .58)),
+						"--dsw-alias-button-primary-dimmed": hsl(h(0), s(0), l(.07)),
+						"--dsw-alias-button-elevated-fill": hsl(h(0), s(0), l(.04)),
+						"--dsw-alias-button-floating-fill": hsl(h(0), s(0), l(.02)),
+						"--dsw-alias-button-floating-hover": hsl(h(0), s(0), l(.1)),
+						"--dsw-alias-button-tool-bar-fill": "rgba(255,255,255,0.08)",
+						"--dsw-alias-button-tool-bar-hover": "rgba(255,255,255,0.12)",
+						"--dsw-alias-button-ghost-active-fill": hsl(h(0), s(0), l(.06)),
+						"--dsw-alias-button-ghost-active-border": "rgba(255,255,255,0.16)",
+						"--dsw-alias-button-ghost-active-hover": hsl(h(0), s(0), l(.09)),
+						"--dsw-alias-button-info-fill": "#679efe",
+						"--dsw-alias-button-info-hover": "#4176e6",
+						"--dsw-alias-button-contrast-fill": hsl(0, 0, 1),
+						"--dsw-alias-interactive-bg-hover": rgba(h(0), s(0), Math.max(l(.15), .4), .12),
+						"--dsw-alias-interactive-bg-hover-solid": rgba(h(0), s(0), Math.max(l(.15), .4), .16),
+						"--dsw-alias-interactive-bg-hover-accent": "rgba(255,255,255,0.24)",
+						"--dsw-alias-interactive-bg-hover-danger": "rgba(242,90,90,0.15)",
+						"--dsw-alias-interactive-bg-active": rgba(h(0), s(0), Math.max(l(.15), .4), .2),
+						"--dsw-alias-markdown-code-block": hsl(h(0), s(0), l(-.06)),
+						"--dsw-alias-markdown-code-block-banner": hsl(h(0), s(0), l(-.02)),
+						"--dsw-alias-markdown-inline-code": hsl(h(0), s(0), l(.04)),
+						"--dsw-alias-markdown-placeholder": hsl(h(0), s(0), l(-.02)),
+						"--dsw-alias-markdown-tag": hsl(h(0), s(0), l(.05)),
+						"--dsw-alias-markdown-citation": hsl(h(0), s(0), l(.06)),
+						"--dsw-alias-markdown-code-segment-selected": hsl(h(0), s(0), l(.05)),
+						"--dsw-alias-markdown-code-segment-unselected": hsl(h(0), s(0), l(-.05)),
+						"--dsw-alias-state-error-primary": "#ff5c72",
+						"--dsw-alias-state-error-secondary": "#ff8aa0",
+						"--dsw-alias-state-success-primary": "#3ddc84",
+						"--dsw-alias-state-success-secondary": "#69eea4",
+						"--dsw-alias-state-success-tertiary": "#233c2c",
+						"--dsw-alias-state-warn-primary": "#ffb347",
+						"--dsw-alias-state-warn-secondary": "#ffc980",
+						"--dsw-alias-state-warn-tertiary": "#27241f",
+						"--dsw-alias-state-warn-label": "#dd8629",
+						"--dsw-alias-state-business-primary": "#679efe",
+						"--dsw-alias-state-business-tertiary": "#34415b",
+						"--dsw-specific-sidebar-fill": hsl(h(0), s(0), l(-.06)),
+						"--dsw-specific-sidebar-nav-item-active": hsl(h(0), s(0), l(.04)),
+						"--dsw-specific-sidebar-nav-item-hover": hsl(h(0), s(0), l(0)),
+						"--dsw-specific-input-major": hsl(h(0), s(0), l(.02)),
+						"--dsw-specific-menu": menuFill,
+						"--dsw-menu-surface-fill": menuFill,
+						"--dsw-specific-bubble": hsl(h(0), s(0), l(.03)),
+						"--dsw-specific-bubble-highlight": hsl(h(0), s(0), l(.08)),
+						"--dsw-specific-selector": hsl(h(0), s(0), l(.05)),
+						"--dsw-specific-login-input": hsl(h(0), s(0), l(.03)),
+						"--dsw-specific-tip": hsl(h(0), s(0), l(.05)),
+						"--dsw-alias-toast-bg": hsl(h(0), s(0), l(.08)),
+						"--dsw-alias-tooltip-bg": hsl(h(0), s(0), l(.08)),
+						"--dsw-alias-scrollbar-bg-l1": hsl(h(0), s(-.05), l(.12)),
+						"--dsw-alias-scrollbar-bg-l2": hsl(h(0), s(-.05), l(.16)),
+						"--dsw-alias-scrollbar-hover-l1": hsl(h(0), s(-.05), l(.22)),
+						"--dsw-alias-scrollbar-hover-l2": hsl(h(0), s(-.05), l(.22))
+					}
+				};
+			}
+			const menuFill = hsl(h(0), s(-.12), l(.15));
 			return {
 				colorScheme: "light",
 				tokens: {
@@ -820,7 +846,8 @@ window.__ModuleLoader__.load({
 					"--dsw-specific-sidebar-nav-item-active": hsl(h(0), s(-.08), l(.05)),
 					"--dsw-specific-sidebar-nav-item-hover": hsl(h(0), s(-.12), l(0)),
 					"--dsw-specific-input-major": hsl(h(0), s(-.12), l(.1)),
-					"--dsw-specific-menu": hsl(h(0), s(-.12), l(.15)),
+					"--dsw-specific-menu": menuFill,
+					"--dsw-menu-surface-fill": menuFill,
 					"--dsw-alias-scrollbar-bg-l1": hsl(h(0), s(-.1), l(-.08)),
 					"--dsw-alias-scrollbar-bg-l2": hsl(h(0), s(-.08), l(-.12)),
 					"--dsw-alias-scrollbar-hover-l1": hsl(h(0), s(-.08), l(-.16)),
@@ -909,7 +936,7 @@ window.__ModuleLoader__.load({
 							const max = Math.max(r, gg, b), min = Math.min(r, gg, b);
 							const v = max / 255;
 							const s = max === 0 ? 0 : (max - min) / max;
-							totalLum += v;
+							totalLum += (.2126 * r + .7152 * gg + .0722 * b) / 255;
 							sampled++;
 							if (s < .08 || v < .12 || v > .97) continue;
 							const key = r >> 4 << 8 | gg >> 4 << 4 | b >> 4;
@@ -1059,7 +1086,8 @@ window.__ModuleLoader__.load({
 					"--dsw-alias-bg-layer-1",
 					"--dsw-alias-bg-layer-2",
 					"--dsw-alias-bg-layer-3",
-					"--dsw-specific-menu"
+					"--dsw-specific-menu",
+					"--dsw-menu-surface-fill"
 				]
 			},
 			{
@@ -1074,7 +1102,8 @@ window.__ModuleLoader__.load({
 			"--dsw-alias-bg-layer-2": "--dsh-any-op-card-2",
 			"--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-specific-menu": "--dsh-any-op-menu",
+			"--dsw-menu-surface-fill": "--dsh-any-op-menu"
 		};
 		let baseTokenKey = "";
 		let pendingOps = null;
@@ -1148,7 +1177,7 @@ window.__ModuleLoader__.load({
 			if (layer2 !== void 0) document.documentElement.style.setProperty("--dsh-any-traj-layer-2", toRgba(layer2, op));
 			if (layer3 !== void 0) document.documentElement.style.setProperty("--dsh-any-traj-layer-3", toRgba(layer3, op));
 		}
-		const RIGHTBAR_STYLE_RULE = "div[data-sidebar-right-panel]{background:var(--dsh-any-bg-rightbar,var(--dsw-alias-bg-base))!important;-webkit-backdrop-filter:var(--dsh-any-blur-rightbar,none);backdrop-filter:var(--dsh-any-blur-rightbar,none)}";
+		const RIGHTBAR_STYLE_RULE = "div[data-sidebar-right-panel]:not(:has([data-dockkit-content],[data-dockkit-empty]))[data-sidebar-right-open],div[data-sidebar-right-panel] [data-dockkit-content]:not([data-dockkit-float]),div[data-sidebar-right-panel] [data-dockkit-empty]{background:var(--dsh-any-bg-rightbar,var(--dsw-alias-bg-base))!important}div[data-sidebar-right-panel][data-sidebar-right-open]{-webkit-backdrop-filter:var(--dsh-any-blur-rightbar,none);backdrop-filter:var(--dsh-any-blur-rightbar,none)}";
 		/** Paint the file-preview panel's surface from its own slider. */
 		function applyRightbarOverrides(op) {
 			const root = document.documentElement;
@@ -1867,6 +1896,46 @@ window.__ModuleLoader__.load({
 				model
 			};
 		}
+		/** A non-empty string id, or null. */
+		function asId(value) {
+			return typeof value === "string" && value !== "" ? value : null;
+		}
+		/**
+		* The id of the session the main view is showing.
+		*
+		* The model is read per session, so this hop has to answer before any of the
+		* others can. 0.1.7 moved the answer: `sessions.list` stopped publishing a single
+		* `current` id in favour of a row table (`ids` / `byId` / `phase`), and the main
+		* view's session is now whatever holds a `mainView` retention — the same row the
+		* host's own `uiSession.current` binding source is built from. Reading only
+		* `list.current` therefore finds nothing on 0.1.7, and a plugin with no session
+		* id can only ever fall back to rule 1: the background stops following the model.
+		*
+		* The hops are tried in order of authority and every one is optional, so this
+		* answers on both host generations — and while `uiSession` is still mounting.
+		*/
+		function resolveMainSessionId(uiCurrent, snapshot) {
+			const fromUiSession = asId(uiCurrent?.key);
+			if (fromUiSession !== null) return fromUiSession;
+			const legacy = asId(snapshot?.current);
+			if (legacy !== null) return legacy;
+			const byId = snapshot?.byId;
+			if (byId !== void 0 && byId !== null) {
+				for (const row of Object.values(byId)) if ((row?.retainedBy?.mainView ?? 0) > 0) {
+					const id = asId(row?.id);
+					if (id !== null) return id;
+				}
+			}
+			return null;
+		}
+		/** Read `uiSession.current` (if that service is on this host) and resolve. */
+		function mainSessionId(ctx, list) {
+			let uiCurrent;
+			try {
+				uiCurrent = ctx.get("uiSession")?.current?.getSnapshot?.();
+			} catch {}
+			return resolveMainSessionId(uiCurrent, list?.getSnapshot());
+		}
 		/**
 		* Watch the current session's model selection.
 		*
@@ -1925,7 +1994,7 @@ window.__ModuleLoader__.load({
 			};
 			const note = () => {
 				if (service === null) return "no-service";
-				if ((list?.getSnapshot()?.current ?? null) === null) return "no-session";
+				if (sessionId === null) return "no-session";
 				if (projected === null && directory === null) return "no-projection";
 				return "empty-selection";
 			};
@@ -1957,7 +2026,7 @@ window.__ModuleLoader__.load({
 				onChange(text, name !== "" ? name : model !== "" ? model : provider, "session", noteValue);
 			};
 			const bind = () => {
-				const id = list?.getSnapshot()?.current ?? null;
+				const id = mainSessionId(ctx, list);
 				if (id === sessionId && (directory !== null || projected !== null)) {
 					emit(false);
 					return;
@@ -1990,7 +2059,7 @@ window.__ModuleLoader__.load({
 			};
 			const tick = () => {
 				if (list === null) return;
-				if ((list.getSnapshot()?.current ?? null) !== sessionId || directory === null && projected === null) bind();
+				if (mainSessionId(ctx, list) !== sessionId || directory === null && projected === null) bind();
 				else emit(false);
 			};
 			/**
@@ -2189,12 +2258,6 @@ window.__ModuleLoader__.load({
 .dab-crash-desc{font-size:12px;color:var(--dsw-alias-label-tertiary);text-align:center;line-height:1.5}
 
 /* ── model rules ─────────────────────────────────────────────────────────── */
-.dab-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--dsw-alias-label-secondary,var(--dsw-alias-label-tertiary))}
-.dab-status-model{font-family:var(--dab-mono);font-size:12.5px;font-weight:600;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-2);border-radius:8px;padding:3px 9px}
-.dab-status-arrow{color:var(--dsw-alias-brand-primary);font-weight:700}
-.dab-status-hit{color:var(--dsw-alias-brand-primary);font-weight:600}
-.dab-status-none{color:var(--dsw-alias-state-error-primary)}
-.dab-status-src{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--dsw-alias-state-warning-primary,var(--dsw-alias-label-tertiary));background:var(--dsw-alias-interactive-bg-hover);border-radius:6px;padding:2px 7px}
 .dab-rules{display:flex;flex-direction:column;gap:12px}
 .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)}
@@ -2698,11 +2761,6 @@ window.__ModuleLoader__.load({
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 						className: "dab-desc",
 						children: t("descInterface")
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "dab-hint",
-						style: { marginTop: 7 },
-						children: t("uiScopeHint")
 					})
 				]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2800,12 +2858,7 @@ window.__ModuleLoader__.load({
 									blurs[blurKey] = v;
 									setBlurs(blurs);
 								}
-							}),
-							isRightbar ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "dab-hint",
-								style: { marginTop: 9 },
-								children: t("uiPreviewHint")
-							}) : null
+							})
 						]
 					}, blurKey);
 				})
@@ -3590,7 +3643,20 @@ window.__ModuleLoader__.load({
 			const { t, useStore } = p;
 			const store = useStore((s) => s);
 			const rules = cfg.rules;
-			const activeIndex = store.activeRuleId === null ? -1 : rules.findIndex((r) => r.id === store.activeRuleId);
+			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(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",
@@ -3614,48 +3680,50 @@ window.__ModuleLoader__.load({
 					className: "dab-card dab-rise",
 					style: { "--d": 1 },
 					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "dab-swatch-title",
+							children: t("tryoutTitle")
+						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "dab-status",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("statusModel") }),
-								store.model !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "dab-status-model",
-									children: store.model
-								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "dab-status-none",
-									children: t("statusUnknown")
-								}),
-								store.model !== "" && store.modelSource === "default" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "dab-status-src",
-									children: t("statusSourceDefault")
-								}) : null,
-								store.model !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "dab-status-arrow",
-									children: "→"
-								}) : null,
-								activeIndex >= 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-									className: store.matched ? "dab-status-hit" : "",
-									children: [
-										store.matched ? t("statusHit") : t("statusFallback"),
-										" · ",
-										t("statusRule"),
-										" ",
-										activeIndex + 1
-									]
-								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "dab-status-none",
-									children: t("statusNone")
-								})
-							]
+							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]
 						}),
-						store.model === "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						/* @__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: 9 },
+							style: { marginTop: 6 },
 							children: t("statusSourceDefaultHint")
 						}) : null,
 						MODEL_NOTE_KEYS[store.modelNote] !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
@@ -3678,6 +3746,30 @@ window.__ModuleLoader__.load({
 							style: { marginBottom: 11 },
 							children: t("rulesHint")
 						}),
+						/* @__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",
+								children: t("autoExtract")
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dab-hint",
+							style: { marginBottom: 11 },
+							children: t("autoExtractHint")
+						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "dab-rules",
 							children: rules.map((rule, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuleCard, {
@@ -4498,6 +4590,36 @@ window.__ModuleLoader__.load({
 				zh,
 				en
 			}), "dsh-background-by-model: i18n");
+			/**
+			* The automatic half of "extract from image": fill a rule's theme color from
+			* the picture it just received, but only while the rule has no color at all —
+			* a color the user picked (or a previous extraction produced) is never
+			* overwritten, so this cannot fight a deliberate choice.
+			*
+			* The decode is asynchronous, so the "still empty?" question is asked AGAIN on
+			* arrival: a color chosen while it ran must win over the one being computed.
+			*/
+			const maybeAutoExtract = async (id) => {
+				if (!cfg.autoExtract) return;
+				const rule = ruleById(id);
+				if (rule === null || rule.color !== null) return;
+				const url = displayImageOf(rule.slot);
+				if (url === null) return;
+				let hsl = null;
+				try {
+					hsl = await extractWallpaperColor(url, rule.bgState);
+				} catch {
+					hsl = null;
+				}
+				if (hsl === null) return;
+				const current = ruleById(id);
+				if (current === null || current.color !== null) return;
+				current.color = hsl;
+				rulesRev++;
+				saveConfig();
+				if (id === activeRuleId) applyActive();
+				else sync();
+			};
 			const sectionInject = (actions) => {
 				bound = actions;
 				sync();
@@ -4552,6 +4674,7 @@ window.__ModuleLoader__.load({
 						dataUrl === null ? deleteImage(rule.slot) : writeImage(rule.slot, dataUrl);
 						if (id === activeRuleId) applyActive();
 						else sync();
+						if (dataUrl !== null) maybeAutoExtract(id);
 					},
 					setRuleImageFromUrl: async (id, url) => {
 						const rule = ruleById(id);
@@ -4564,6 +4687,7 @@ window.__ModuleLoader__.load({
 							setImage(rule.slot, res.dataUrl ?? null);
 							if (id === activeRuleId) applyActive();
 							else sync();
+							maybeAutoExtract(id);
 						}
 						return res;
 					},
@@ -4603,6 +4727,11 @@ window.__ModuleLoader__.load({
 						applyRightbarOverrides(rRightbarOpacity());
 						saveConfig();
 					},
+					setAutoExtract: (v) => {
+						cfg.autoExtract = v;
+						saveConfig();
+						sync();
+					},
 					exportTheme: () => {
 						const images = {};
 						for (const rule of cfg.rules) {