dsh-background-by-model 0.3.1 → 0.4.0

package/lib/client.js

@@ -32,29 +32,30 @@ window.__ModuleLoader__.load({
 			uiOpacity: "透明度",
 			uiBlur: "模糊度",
 			uiOpacityBg: "主背景",
-			uiOpacitySide: "侧边栏",
+			uiOpacitySide: "左侧栏",
 			uiOpacityCard: "对话框中选项面板",
 			uiOpacityInput: "输入框与控件",
 			uiSop: "设置界面透明度",
 			uiChatRegion: "对话文本框",
 			uiTrajectory: "轨迹页",
-			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: "匹配串",
@@ -102,7 +103,7 @@ window.__ModuleLoader__.load({
 			extractColor: "从图片提取主题色",
 			extracting: "取色中…",
 			extractNoWp: "请先为该规则选择图片",
-			extractDone: "已应用图片主色调",
+			extractDone: "已应用图片配色",
 			extractFail: "未在这张图里找到鲜明的颜色，请换一张",
 			eyedropper: "从图片取色",
 			pickerTitle: "从图片取色",
@@ -136,29 +137,30 @@ window.__ModuleLoader__.load({
 			uiOpacity: "Opacity",
 			uiBlur: "Blur",
 			uiOpacityBg: "Main background",
-			uiOpacitySide: "Sidebar",
+			uiOpacitySide: "Left panel",
 			uiOpacityCard: "Cards & panels",
 			uiOpacityInput: "Input & controls",
 			uiSop: "Settings interface opacity",
 			uiChatRegion: "Conversation text frame",
 			uiTrajectory: "Trajectory view",
-			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",
@@ -206,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",
@@ -227,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,
@@ -235,6 +237,7 @@ window.__ModuleLoader__.load({
 			iw: 0,
 			ih: 0
 		};
+		/** Every accepted `bgMode`, in UI order. */
 		const BG_MODES$1 = [
 			"fit",
 			"fill",
@@ -242,6 +245,137 @@ 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`)
+		*   `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,
@@ -284,38 +418,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,
-				input: 0
-			},
-			settingsOpacity: 1,
-			chatTextOpacity: 0,
-			trajectoryOpacity: 1
-		};
-		function freshConfig() {
-			return {
-				rules: [],
-				opacities: { ...DEFAULT_CONFIG.opacities },
-				blurs: { ...DEFAULT_CONFIG.blurs },
-				settingsOpacity: DEFAULT_CONFIG.settingsOpacity,
-				chatTextOpacity: DEFAULT_CONFIG.chatTextOpacity,
-				trajectoryOpacity: DEFAULT_CONFIG.trajectoryOpacity
-			};
-		}
-		let cfg = freshConfig();
+		freshThemeConfig();
+		let cfg = freshThemeConfig();
 		const images = /* @__PURE__ */ new Map();
 		const displayUrls = /* @__PURE__ */ new Map();
 		function revokeDisplay(slot) {
@@ -412,8 +516,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;
 		}
@@ -444,100 +546,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",
-				"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);
 		}
-		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 ?? {})
-			};
+		/** 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;
 		}
 		/** 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",
-				"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)
-			};
-			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;
 			}
@@ -894,7 +929,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;
@@ -1133,6 +1168,23 @@ 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)}";
+		/** Paint the file-preview panel's surface from its own slider. */
+		function applyRightbarOverrides(op) {
+			const root = document.documentElement;
+			if (!rHasColor()) {
+				root.style.removeProperty("--dsh-any-bg-rightbar");
+				return;
+			}
+			const [h, s, l] = rColor();
+			const base = genTokens(h, s, l).tokens["--dsw-alias-bg-base"];
+			if (base !== void 0) root.style.setProperty("--dsh-any-bg-rightbar", toRgba(base, op));
+		}
+		/** Extra backdrop frost for the file-preview panel (0 = no frost of its own). */
+		function applyRightbarBlur(px) {
+			if (px > 0) document.documentElement.style.setProperty("--dsh-any-blur-rightbar", `blur(${px}px)`);
+			else document.documentElement.style.removeProperty("--dsh-any-blur-rightbar");
+		}
 		let frameEl = null;
 		let sidebarEl = null;
 		let centerEl = null;
@@ -1221,6 +1273,7 @@ window.__ModuleLoader__.load({
 			applyCardPanelsBlur(blurs.card);
 			applySettingsBlur(blurs.settings);
 			applyInputBlur(blurs.input);
+			applyRightbarBlur(blurs.rightbar);
 			applyViewCards();
 		}
 		/** Live per-part blur update during slider drag (no full re-apply). */
@@ -1237,6 +1290,10 @@ window.__ModuleLoader__.load({
 				applyInputBlur(v);
 				return;
 			}
+			if (part === "rightbar") {
+				applyRightbarBlur(v);
+				return;
+			}
 			if (part === "chat" || part === "trajectory") {
 				applyViewCards();
 				return;
@@ -1728,6 +1785,7 @@ window.__ModuleLoader__.load({
 				baseTokenKey = "";
 				lastBgKey = "";
 			}
+			applyRightbarOverrides(rRightbarOpacity());
 			applyPartBlurs(rBlurs());
 		}
 		function teardownWp() {
@@ -1748,6 +1806,8 @@ window.__ModuleLoader__.load({
 			document.documentElement.style.removeProperty("--dsh-any-blur-settings");
 			document.documentElement.style.removeProperty("--dsh-any-blur-card-panels");
 			document.documentElement.style.removeProperty("--dsh-any-input-blur");
+			document.documentElement.style.removeProperty("--dsh-any-bg-rightbar");
+			document.documentElement.style.removeProperty("--dsh-any-blur-rightbar");
 			for (const v of Object.values(OPACITY_VARS)) document.documentElement.style.removeProperty(v);
 			baseTokenKey = "";
 			lastBgKey = "";
@@ -2149,12 +2209,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)}
@@ -2413,6 +2467,22 @@ window.__ModuleLoader__.load({
 				rx: "2"
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M6.6 2.2v11.6" })]
 		});
+		/** Mirror of SidebarIcon: the file-preview panel docked to the right edge. */
+		const PreviewIcon = ({ size, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Glyph, {
+			size,
+			className,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+					x: "2.2",
+					y: "2.2",
+					width: "11.6",
+					height: "11.6",
+					rx: "2"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M9.4 2.2v11.6" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M11 5.6h1.2M11 8h1.2" })
+			]
+		});
 		const ChatIcon = ({ size, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Glyph, {
 			size,
 			className,
@@ -2594,6 +2664,11 @@ window.__ModuleLoader__.load({
 				labelKey: "uiOpacitySide",
 				Icon: SidebarIcon
 			},
+			{
+				isRightbar: true,
+				labelKey: "uiPreview",
+				Icon: PreviewIcon
+			},
 			{
 				opKey: "card",
 				labelKey: "uiOpacityCard",
@@ -2621,7 +2696,7 @@ window.__ModuleLoader__.load({
 			}
 		];
 		function InterfacePage({ p }) {
-			const { t, setOps, setBlurs, setSop } = p;
+			const { t, setOps, setBlurs, setSop, setRightbarOpacity } = p;
 			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 },
@@ -2637,20 +2712,15 @@ 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", {
 				className: "dab-grid-parts",
 				children: PARTS.map((part, i) => {
-					const { labelKey, Icon, isSettings, isChat, isTrajectory } = part;
+					const { labelKey, Icon, isSettings, isChat, isTrajectory, isRightbar } = part;
 					const opKey = part.opKey;
-					const blurKey = isChat ? "chat" : isTrajectory ? "trajectory" : isSettings ? "settings" : opKey;
-					const opacity = isChat ? rChatTextOpacity() : isTrajectory ? rTrajectoryOpacity() : isSettings ? rSop() : rOps()[opKey];
+					const blurKey = isChat ? "chat" : isTrajectory ? "trajectory" : isRightbar ? "rightbar" : isSettings ? "settings" : 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",
 						style: { "--d": i + 1 },
@@ -2687,6 +2757,9 @@ window.__ModuleLoader__.load({
 									} else if (isTrajectory) {
 										cfg.trajectoryOpacity = op;
 										applyTrajectoryOverrides(op);
+									} else if (isRightbar) {
+										cfg.rightbarOpacity = op;
+										applyRightbarOverrides(op);
 									} else if (isSettings) {
 										cfg.settingsOpacity = op;
 										applySettingsOverrides(op);
@@ -2708,7 +2781,8 @@ window.__ModuleLoader__.load({
 										cfg.trajectoryOpacity = op;
 										applyTrajectoryOverrides(op);
 										saveConfig();
-									} else if (isSettings) setSop(op);
+									} else if (isRightbar) setRightbarOpacity(op);
+									else if (isSettings) setSop(op);
 									else {
 										const ops = { ...rOps() };
 										ops[opKey] = op;
@@ -3520,7 +3594,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",
@@ -3544,48 +3631,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", {
@@ -3608,6 +3697,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, {
@@ -4295,7 +4408,7 @@ window.__ModuleLoader__.load({
 			}, "dsh-background-by-model: skin dispose");
 			const styleEl = document.createElement("style");
 			styleEl.dataset.plugin = "dsh-background-by-model";
-			styleEl.textContent = `body[data-ds-dark-theme="dsh-background-by-model"]::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,255,255,0.03) 0%,transparent 60%)}${SETTINGS_STYLE_RULE}${TRAJECTORY_STYLE_RULE}${INPUT_BLUR_RULE}[data-composer-card] textarea::placeholder,[data-composer-card] input::placeholder,[data-composer-card] [contenteditable]::placeholder,[data-cordis-panel] input::placeholder,[data-cordis-panel] textarea::placeholder,.dab-input::placeholder,.dab-input textarea::placeholder,.dab-input input::placeholder{color:var(--dsh-any-placeholder,var(--dsw-alias-label-caption,#8a8f98))!important;font-style:italic;opacity:.85}`;
+			styleEl.textContent = `body[data-ds-dark-theme="dsh-background-by-model"]::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,255,255,0.03) 0%,transparent 60%)}${SETTINGS_STYLE_RULE}${TRAJECTORY_STYLE_RULE}${RIGHTBAR_STYLE_RULE}${INPUT_BLUR_RULE}[data-composer-card] textarea::placeholder,[data-composer-card] input::placeholder,[data-composer-card] [contenteditable]::placeholder,[data-cordis-panel] input::placeholder,[data-cordis-panel] textarea::placeholder,.dab-input::placeholder,.dab-input textarea::placeholder,.dab-input input::placeholder{color:var(--dsh-any-placeholder,var(--dsw-alias-label-caption,#8a8f98))!important;font-style:italic;opacity:.85}`;
 			document.head.appendChild(styleEl);
 			ctx.effect(() => () => {
 				styleEl?.parentNode?.removeChild(styleEl);
@@ -4428,6 +4541,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();
@@ -4482,6 +4625,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);
@@ -4494,6 +4638,7 @@ window.__ModuleLoader__.load({
 							setImage(rule.slot, res.dataUrl ?? null);
 							if (id === activeRuleId) applyActive();
 							else sync();
+							maybeAutoExtract(id);
 						}
 						return res;
 					},
@@ -4528,6 +4673,16 @@ window.__ModuleLoader__.load({
 						applySettingsOverrides(v);
 						saveConfig();
 					},
+					setRightbarOpacity: (v) => {
+						cfg.rightbarOpacity = v;
+						applyRightbarOverrides(rRightbarOpacity());
+						saveConfig();
+					},
+					setAutoExtract: (v) => {
+						cfg.autoExtract = v;
+						saveConfig();
+						sync();
+					},
 					exportTheme: () => {
 						const images = {};
 						for (const rule of cfg.rules) {