dsh-any-background 0.2.6 → 0.2.7

package/lib/client.js

@@ -44,6 +44,8 @@ window.__ModuleLoader__.load({
 			uiSop: "设置界面透明度",
 			uiChatRegion: "对话文本框",
 			uiTrajectory: "轨迹页",
+			uiPanelRegion: "better-sidebar 工作台",
+			uiProduced: "产出物/高亮内容",
 			bgTitle: "背景",
 			bgChoose: "选择图片或视频",
 			bgRemove: "移除背景",
@@ -207,6 +209,8 @@ window.__ModuleLoader__.load({
 			uiSop: "Settings interface opacity",
 			uiChatRegion: "Conversation text frame",
 			uiTrajectory: "Trajectory view",
+			uiPanelRegion: "better-sidebar workbench",
+			uiProduced: "Produced / highlights",
 			bgTitle: "Background",
 			bgChoose: "Choose image or video",
 			bgRemove: "Remove background",
@@ -361,7 +365,9 @@ window.__ModuleLoader__.load({
 				settings: 0,
 				chat: 0,
 				trajectory: 0,
-				input: 0
+				input: 0,
+				panel: 0,
+				produced: 0
 			},
 			settingsOpacity: 1,
 			wallpaperOpacity: 1,
@@ -387,6 +393,8 @@ window.__ModuleLoader__.load({
 			regenerateOnReload: false,
 			chatTextOpacity: 0,
 			trajectoryOpacity: 1,
+			panelOpacity: 1,
+			producedOpacity: 1,
 			profiles: [],
 			rotation: {
 				enabled: false,
@@ -523,7 +531,9 @@ window.__ModuleLoader__.load({
 				"settings",
 				"chat",
 				"trajectory",
-				"input"
+				"input",
+				"panel",
+				"produced"
 			]) {
 				const v = b[k];
 				out[k] = typeof v === "number" ? Math.min(60, Math.max(0, v)) : DEFAULT_CONFIG.blurs[k];
@@ -539,6 +549,12 @@ window.__ModuleLoader__.load({
 		function rSop() {
 			return clamp01(cfg.settingsOpacity, DEFAULT_CONFIG.settingsOpacity);
 		}
+		function rPanelOpacity() {
+			return clamp01(cfg.panelOpacity, DEFAULT_CONFIG.panelOpacity);
+		}
+		function rProducedOpacity() {
+			return clamp01(cfg.producedOpacity, DEFAULT_CONFIG.producedOpacity);
+		}
 		function rBgState() {
 			return cfg.bgState;
 		}
@@ -599,7 +615,9 @@ window.__ModuleLoader__.load({
 				wallpaperOpacity: rWop(),
 				blur: rBl(),
 				chatTextOpacity: rChatTextOpacity(),
-				trajectoryOpacity: rTrajectoryOpacity()
+				trajectoryOpacity: rTrajectoryOpacity(),
+				panelOpacity: rPanelOpacity(),
+				producedOpacity: rProducedOpacity()
 			};
 		}
 		/** Apply an appearance snapshot onto cfg (meta fields untouched). */
@@ -618,6 +636,8 @@ window.__ModuleLoader__.load({
 			cfg.blur = typeof ap.blur === "number" ? Math.min(60, Math.max(0, ap.blur)) : DEFAULT_CONFIG.blur;
 			cfg.chatTextOpacity = clamp01(ap.chatTextOpacity, DEFAULT_CONFIG.chatTextOpacity);
 			cfg.trajectoryOpacity = clamp01(ap.trajectoryOpacity, DEFAULT_CONFIG.trajectoryOpacity);
+			cfg.panelOpacity = clamp01(ap.panelOpacity, DEFAULT_CONFIG.panelOpacity);
+			cfg.producedOpacity = clamp01(ap.producedOpacity, DEFAULT_CONFIG.producedOpacity);
 		}
 		const num = (n, def) => typeof n === "number" ? n : def;
 		const cl = (n, lo, hi, def) => typeof n === "number" ? Math.min(hi, Math.max(lo, n)) : def;
@@ -648,7 +668,9 @@ window.__ModuleLoader__.load({
 						wallpaperOpacity: clamp01(ac.wallpaperOpacity, DEFAULT_CONFIG.wallpaperOpacity),
 						blur: num(ac.blur, DEFAULT_CONFIG.blur),
 						chatTextOpacity: clamp01(ac.chatTextOpacity, DEFAULT_CONFIG.chatTextOpacity),
-						trajectoryOpacity: clamp01(ac.trajectoryOpacity, DEFAULT_CONFIG.trajectoryOpacity)
+						trajectoryOpacity: clamp01(ac.trajectoryOpacity, DEFAULT_CONFIG.trajectoryOpacity),
+						panelOpacity: clamp01(ac.panelOpacity, DEFAULT_CONFIG.panelOpacity),
+						producedOpacity: clamp01(ac.producedOpacity, DEFAULT_CONFIG.producedOpacity)
 					}
 				});
 			}
@@ -711,7 +733,9 @@ window.__ModuleLoader__.load({
 				"settings",
 				"chat",
 				"trajectory",
-				"input"
+				"input",
+				"panel",
+				"produced"
 			]) blurs[k] = num(bl[k], DEFAULT_CONFIG.blurs[k]);
 			const bgType = [
 				"video",
@@ -749,6 +773,8 @@ window.__ModuleLoader__.load({
 				regenerateOnReload: typeof c.regenerateOnReload === "boolean" ? c.regenerateOnReload : DEFAULT_CONFIG.regenerateOnReload,
 				chatTextOpacity: clamp01(c.chatTextOpacity, DEFAULT_CONFIG.chatTextOpacity),
 				trajectoryOpacity: clamp01(c.trajectoryOpacity, DEFAULT_CONFIG.trajectoryOpacity),
+				panelOpacity: clamp01(c.panelOpacity, DEFAULT_CONFIG.panelOpacity),
+				producedOpacity: clamp01(c.producedOpacity, DEFAULT_CONFIG.producedOpacity),
 				profiles: adoptProfiles(c.profiles),
 				rotation: adoptRotation(c.rotation),
 				schedule: adoptSchedule(c.schedule),
@@ -2418,7 +2444,8 @@ window.__ModuleLoader__.load({
 		}
 		const SETTINGS_PANEL_SEL = "[role=\"dialog\"][aria-modal=\"true\"][aria-labelledby]";
 		const SETTINGS_STYLE_RULE = `${SETTINGS_PANEL_SEL}{background:var(--dsh-any-bg-settings-surface,var(--dsw-alias-bg-layer-2));backdrop-filter:var(--dsh-any-blur-settings,none);--dsw-alias-bg-layer-1:var(--dsh-any-bg-settings-layer-1);--dsw-alias-bg-layer-2:var(--dsh-any-bg-settings-layer-2);--dsw-alias-bg-layer-3:var(--dsh-any-bg-settings-layer-3)}${SETTINGS_PANEL_SEL} .dab-card{backdrop-filter:var(--dsh-any-blur-card-panels,none);-webkit-backdrop-filter:var(--dsh-any-blur-card-panels,none)}`;
-		const INPUT_BLUR_RULE = "[data-composer-card],[data-cordis-panel]{-webkit-backdrop-filter:var(--dsh-any-input-blur,none);backdrop-filter:var(--dsh-any-input-blur,none)}[data-cordis-panel]{--dsw-specific-menu:var(--dsh-any-op-menu-cordis)!important}";
+		const POPOVER_BLUR_RULE = "[role=\"menu\"]:not([data-dockkit-tab-menu]),[role=\"listbox\"],body > [role=\"tree\"],body > [role=\"dialog\"]:not([aria-modal=\"true\"]){backdrop-filter:var(--dsh-any-blur-card-panels,none);-webkit-backdrop-filter:var(--dsh-any-blur-card-panels,none)}";
+		const INPUT_BLUR_RULE = "[data-composer-card]{position:relative;isolation:isolate}[data-composer-card]::before{content:\"\";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;-webkit-backdrop-filter:var(--dsh-any-input-blur,none);backdrop-filter:var(--dsh-any-input-blur,none)}[data-cordis-panel]{-webkit-backdrop-filter:var(--dsh-any-input-blur,none);backdrop-filter:var(--dsh-any-input-blur,none)}[data-cordis-panel]{--dsw-specific-menu:var(--dsh-any-op-menu-cordis)!important}";
 		function applyInputBlur(px) {
 			if (px > 0) document.documentElement.style.setProperty("--dsh-any-input-blur", `blur(${px}px)`);
 			else document.documentElement.style.removeProperty("--dsh-any-input-blur");
@@ -2431,6 +2458,63 @@ window.__ModuleLoader__.load({
 			if (px > 0) document.documentElement.style.setProperty("--dsh-any-part-blur-global", `blur(${px}px)`);
 			else document.documentElement.style.removeProperty("--dsh-any-part-blur-global");
 		}
+		const PANEL_TOKEN_RULE = "[data-dsh-bottom-panel],[data-sidebar-right-panel]{--dsw-alias-bg-base:var(--dsh-any-panel-bg-base);--dsw-alias-bg-layer-1:var(--dsh-any-panel-layer-1);--dsw-alias-bg-layer-2:var(--dsh-any-panel-layer-2);--dsw-alias-bg-layer-3:var(--dsh-any-panel-layer-3);position:fixed!important;z-index:26!important}[data-sidebar-right-panel][data-sidebar-right-panel=\"fullscreen\"]{z-index:40!important}";
+		const PANEL_BLUR_RULE = "[data-dsh-bottom-panel],[data-sidebar-right-panel]{-webkit-backdrop-filter:var(--dsh-any-blur-panel,none);backdrop-filter:var(--dsh-any-blur-panel,none)}";
+		const PRODUCED_RULE = "[data-code-block-content] pre,[data-code-block-banner],[data-composer-chip],:not(pre)>code{-webkit-backdrop-filter:var(--dsh-any-blur-prod,none);backdrop-filter:var(--dsh-any-blur-prod,none)}@supports (background:color-mix(in srgb,red 50%,transparent)){.md-code-block{background:transparent!important}.md-code-block>div{background-color:transparent!important}.md-code-block [data-code-block-content] pre{background-color:color-mix(in srgb,var(--dsl-code-block-background,var(--dsw-alias-markdown-code-block,transparent)) var(--dsh-any-prod-pct,100%),transparent)!important}.md-code-block [data-code-block-banner]{background-color:color-mix(in srgb,var(--dsl-code-block-banner-background-color,var(--dsw-alias-markdown-code-block-banner,transparent)) var(--dsh-any-prod-pct,100%),transparent)!important}[data-code-block-content]{--shiki-background:color-mix(in srgb,var(--dsw-alias-markdown-code-block,var(--dsl-code-block-background,transparent)) var(--dsh-any-prod-pct,100%),transparent)}:not(pre)>code{background-color:color-mix(in srgb,var(--dsw-alias-markdown-inline-code,transparent) var(--dsh-any-prod-pct,100%),transparent)!important}[data-composer-chip]>*{background-color:color-mix(in srgb,var(--dsw-alias-interactive-bg-hover,transparent) var(--dsh-any-prod-pct,100%),transparent)!important}}";
+		/** The host's own default colors for the panel layer tokens, used when the
+		*  plugin has no palette (no picked color, no wallpaper verdict, no forced
+		*  scheme). Without these the panel's re-scope would resolve to invalid vars
+		*  and the panel would have no background — reading the host's resolved value
+		*  keeps the panel opaque by default and lets the slider retint it like every
+		*  other homepage part. Reads from the live `:root` so a custom host skin or
+		*  theme override wins. */
+		function readHostLayerTokens() {
+			if (typeof getComputedStyle === "undefined") return null;
+			const root = document.documentElement;
+			const cs = getComputedStyle(root);
+			const base = cs.getPropertyValue("--dsw-alias-bg-base").trim();
+			const layer1 = cs.getPropertyValue("--dsw-alias-bg-layer-1").trim();
+			const layer2 = cs.getPropertyValue("--dsw-alias-bg-layer-2").trim();
+			const layer3 = cs.getPropertyValue("--dsw-alias-bg-layer-3").trim();
+			if (!base && !layer1 && !layer2 && !layer3) return null;
+			return {
+				base,
+				layer1,
+				layer2,
+				layer3
+			};
+		}
+		function applyPanelOverrides(op) {
+			const tokens = paletteTokens();
+			const root = document.documentElement;
+			if (tokens !== null) {
+				const base = tokens["--dsw-alias-bg-base"];
+				const layer1 = tokens["--dsw-alias-bg-layer-1"];
+				const layer2 = tokens["--dsw-alias-bg-layer-2"];
+				const layer3 = tokens["--dsw-alias-bg-layer-3"];
+				if (base !== void 0) root.style.setProperty("--dsh-any-panel-bg-base", toRgba(base, op));
+				if (layer1 !== void 0) root.style.setProperty("--dsh-any-panel-layer-1", toRgba(layer1, op));
+				if (layer2 !== void 0) root.style.setProperty("--dsh-any-panel-layer-2", toRgba(layer2, op));
+				if (layer3 !== void 0) root.style.setProperty("--dsh-any-panel-layer-3", toRgba(layer3, op));
+				return;
+			}
+			const host = readHostLayerTokens();
+			if (host === null) {
+				root.style.setProperty("--dsh-any-panel-bg-base", "transparent");
+				root.style.setProperty("--dsh-any-panel-layer-1", "transparent");
+				root.style.setProperty("--dsh-any-panel-layer-2", "transparent");
+				root.style.setProperty("--dsh-any-panel-layer-3", "transparent");
+				return;
+			}
+			if (host.base) root.style.setProperty("--dsh-any-panel-bg-base", toRgba(host.base, op));
+			if (host.layer1) root.style.setProperty("--dsh-any-panel-layer-1", toRgba(host.layer1, op));
+			if (host.layer2) root.style.setProperty("--dsh-any-panel-layer-2", toRgba(host.layer2, op));
+			if (host.layer3) root.style.setProperty("--dsh-any-panel-layer-3", toRgba(host.layer3, op));
+		}
+		function applyPanelBlur(px) {
+			if (px > 0) document.documentElement.style.setProperty("--dsh-any-blur-panel", `blur(${px}px)`);
+			else document.documentElement.style.removeProperty("--dsh-any-blur-panel");
+		}
 		function applySettingsOverrides(op) {
 			const [h, s, l] = rColor();
 			const tokens = genTokens(h, s, l, rColorScheme()).tokens;
@@ -2548,7 +2632,7 @@ window.__ModuleLoader__.load({
 		let frameEl = null;
 		let sidebarEl = null;
 		let centerEl = null;
-		let detailsEl = null;
+		let rightEl = null;
 		const PART_BLUR_CLASS = "dab-part-blur";
 		const PART_UNDERLAY_CLASS = "dab-part-underlay";
 		const PART_BLUR_RULE = `${PART_BLUR_CLASS}{isolation:isolate}.${PART_UNDERLAY_CLASS}{position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;backdrop-filter:var(--dsh-any-part-blur,none);-webkit-backdrop-filter:var(--dsh-any-part-blur,none)}`;
@@ -2560,16 +2644,32 @@ window.__ModuleLoader__.load({
 			partBlurStyleEl.textContent = PART_BLUR_RULE;
 			document.head.appendChild(partBlurStyleEl);
 		}
+		/** Find one direct child of `frame` whose `[data-rightbar-col]` marker matches.
+		*  The rightbar is its own grid track, NOT a "details" twin of the center
+		*  column, so it must never receive the main-bg tint or blur underlay. */
+		function findRightbarInFrame(frame) {
+			for (let i = 0; i < frame.children.length; i++) {
+				const child = frame.children[i];
+				if (child instanceof HTMLElement && child.dataset.rightbarCol !== void 0) return child;
+			}
+			return null;
+		}
 		function discoverParts() {
 			const overlay = document.querySelector("[data-shell-overlay]");
 			if (overlay === null) return;
 			const frame = overlay.parentElement;
 			if (frame === null) return;
 			frameEl = frame;
+			rightEl = findRightbarInFrame(frame);
 			const idx = Array.from(frame.children).indexOf(overlay);
-			sidebarEl = frame.children[idx - 3] ?? null;
-			centerEl = frame.children[idx - 2] ?? null;
-			detailsEl = frame.children[idx - 1] ?? null;
+			if (rightEl !== null) {
+				const rightIdx = Array.from(frame.children).indexOf(rightEl);
+				sidebarEl = frame.children[rightIdx - 2] ?? null;
+				centerEl = frame.children[rightIdx - 1] ?? null;
+			} else {
+				sidebarEl = frame.children[idx - 3] ?? null;
+				centerEl = frame.children[idx - 2] ?? null;
+			}
 		}
 		function setBlur(el, px) {
 			if (el === null) return;
@@ -2601,10 +2701,14 @@ window.__ModuleLoader__.load({
 			if (px > 0) document.documentElement.style.setProperty("--dsh-any-blur-settings", `blur(${px}px)`);
 			else document.documentElement.style.removeProperty("--dsh-any-blur-settings");
 		}
-		/** Apply the main-background opacity to the center/details columns instead of
+		/** Apply the main-background opacity to the center column instead of
 		*  the frame. The frame's translucent bg-base sits UNDER the sidebar, so
 		*  reducing the main-bg opacity stacked a second alpha onto the sidebar; moving
-		*  the alpha onto the columns keeps the sidebar owned by its own slider. */
+		*  the alpha onto the column keeps the sidebar owned by its own slider. The
+		*  rightbar (DSH 0.1.5-rc.1+) is intentionally NOT tinted here — it sits on
+		*  its own grid track, paints its own surfaces from its own tokens, and
+		*  inheriting the main-bg tint would blend it into the page and make the
+		*  right panel disappear. */
 		function applyPartOpacities(ops) {
 			const tokens = paletteTokens();
 			if (tokens === null) return;
@@ -2613,12 +2717,12 @@ window.__ModuleLoader__.load({
 			const base = tokens["--dsw-alias-bg-base"];
 			frameEl.style.background = "transparent";
 			if (centerEl !== null) centerEl.style.background = base !== void 0 ? toRgba(base, ops.bg) : "transparent";
-			if (detailsEl !== null) detailsEl.style.background = base !== void 0 ? toRgba(base, ops.bg) : "transparent";
+			if (rightEl !== null) rightEl.style.background = "";
 		}
 		/** Blur of the option panels inside the settings dialog (.dab-card), owned by
 		*  the "dialog option panel" (card) blur slider. Written as a plugin-owned
 		*  variable consumed by SETTINGS_STYLE_RULE — deliberately NOT applied to the
-		*  homepage center/details columns, which this slider must never touch. */
+		*  homepage center column, which this slider must never touch. */
 		function applyCardPanelsBlur(px) {
 			if (px > 0) document.documentElement.style.setProperty("--dsh-any-blur-card-panels", `blur(${px}px)`);
 			else document.documentElement.style.removeProperty("--dsh-any-blur-card-panels");
@@ -2629,13 +2733,31 @@ window.__ModuleLoader__.load({
 			setBlur(frameEl, 0);
 			setBlur(sidebarEl, blurs.sidebar);
 			setBlur(centerEl, blurs.bg);
-			setBlur(detailsEl, blurs.bg);
+			setBlur(rightEl, 0);
 			applyBgBlurGlobal(blurs.bg);
 			applyCardPanelsBlur(blurs.card);
 			applySettingsBlur(blurs.settings);
 			applyInputBlur(blurs.input);
+			applyPanelBlur(blurs.panel);
+			applyProduced();
 			applyViewCards();
 		}
+		/** Produced/artifact surfaces (conversation code blocks + their banner +
+		*  composer chips): re-write the root blur and the alpha percentage consumed by
+		*  PRODUCED_RULE. The percentage is an alpha for the surface's OWN host color —
+		*  1 (100%) reproduces the untouched host look and lowering it fades exactly
+		*  that color out — so no palette sampling is involved and the surfaces keep
+		*  following the active theme/wallpaper color on their own. */
+		function applyProduced() {
+			const px = rBlurs().produced;
+			const root = document.documentElement;
+			if (px > 0) root.style.setProperty("--dsh-any-blur-prod", `blur(${px}px)`);
+			else root.style.removeProperty("--dsh-any-blur-prod");
+			let opacity = rProducedOpacity();
+			if (opacity < 0) opacity = 0;
+			if (opacity > 1) opacity = 1;
+			root.style.setProperty("--dsh-any-prod-pct", `${Math.round(opacity * 100)}%`);
+		}
 		/** Live per-part blur update during slider drag (no full re-apply). */
 		function setPartBlur(part, v) {
 			if (part === "settings") {
@@ -2650,6 +2772,14 @@ window.__ModuleLoader__.load({
 				applyInputBlur(v);
 				return;
 			}
+			if (part === "panel") {
+				applyPanelBlur(v);
+				return;
+			}
+			if (part === "produced") {
+				applyProduced();
+				return;
+			}
 			if (part === "chat" || part === "trajectory") {
 				applyViewCards();
 				return;
@@ -2657,7 +2787,6 @@ window.__ModuleLoader__.load({
 			discoverParts();
 			if (part === "bg") {
 				setBlur(centerEl, v);
-				setBlur(detailsEl, v);
 				applyBgBlurGlobal(v);
 			} else setBlur(sidebarEl, v);
 		}
@@ -2858,7 +2987,7 @@ window.__ModuleLoader__.load({
 		function watchParts() {
 			if (partsObserver !== null || typeof MutationObserver === "undefined") return;
 			partsObserver = new MutationObserver(() => {
-				if (frameEl !== null && sidebarEl !== null && centerEl !== null && detailsEl !== null && document.body.contains(frameEl) && viewTargets.every((el) => el !== null && document.body.contains(el))) return;
+				if (frameEl !== null && sidebarEl !== null && centerEl !== null && rightEl !== null && document.body.contains(frameEl) && viewTargets.every((el) => el !== null && document.body.contains(el))) return;
 				applyPartBlurs(rBlurs());
 				applyPartOpacities(rOps());
 			});
@@ -3174,6 +3303,7 @@ window.__ModuleLoader__.load({
 				applySettingsOverrides(rSop());
 				applyTrajectoryOverrides(rTrajectoryOpacity());
 			}
+			applyPanelOverrides(rPanelOpacity());
 			applyPartBlurs(rBlurs());
 		}
 		function teardownWp() {
@@ -3202,6 +3332,13 @@ window.__ModuleLoader__.load({
 			document.documentElement.style.removeProperty("--dsh-any-blur-card-panels");
 			document.documentElement.style.removeProperty("--dsh-any-input-blur");
 			document.documentElement.style.removeProperty("--dsh-any-part-blur-global");
+			document.documentElement.style.removeProperty("--dsh-any-panel-bg-base");
+			document.documentElement.style.removeProperty("--dsh-any-panel-layer-1");
+			document.documentElement.style.removeProperty("--dsh-any-panel-layer-2");
+			document.documentElement.style.removeProperty("--dsh-any-panel-layer-3");
+			document.documentElement.style.removeProperty("--dsh-any-blur-panel");
+			document.documentElement.style.removeProperty("--dsh-any-blur-prod");
+			document.documentElement.style.removeProperty("--dsh-any-prod-pct");
 			for (const v of Object.values(OPACITY_VARS)) document.documentElement.style.removeProperty(v);
 			baseTokenKey = "";
 			lastBgKey = "";
@@ -3215,10 +3352,10 @@ window.__ModuleLoader__.load({
 			setBlur(frameEl, 0);
 			setBlur(sidebarEl, 0);
 			setBlur(centerEl, 0);
-			setBlur(detailsEl, 0);
+			setBlur(rightEl, 0);
 			if (frameEl !== null) frameEl.style.removeProperty("background");
 			if (centerEl !== null) centerEl.style.removeProperty("background");
-			if (detailsEl !== null) detailsEl.style.removeProperty("background");
+			if (rightEl !== null) rightEl.style.removeProperty("background");
 			stopWatchingParts();
 		}
 		/** Live wallpaper-opacity updates during slider drag (no full re-apply). */
@@ -3673,6 +3810,12 @@ window.__ModuleLoader__.load({
 				})
 			]
 		});
+		/** Bottom workbench panel (dsh-better-sidebar): a window with a docked strip. */
+		const PanelIcon = ({ size, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Glyph, {
+			size,
+			className,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M2.4 2.7h11.2v10.6H2.4z" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M2.4 10.1h11.2" })]
+		});
 		const SlidersIcon = ({ size, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Glyph, {
 			size,
 			className,
@@ -4772,6 +4915,65 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/client/env.ts
+		/**
+		* Host capability detection — which third-party plugins are actually present.
+		*
+		* The host exposes no plugin registry on the client context, so presence is
+		* inferred from the stable DOM markers those plugins mount. Detection runs
+		* once (plugin boot) and is re-armed by a cheap body-level MutationObserver so
+		* a plugin that mounts after this one still flips the cached verdict. The
+		* verdict is sticky-true for the session: whether a detected plugin's surface
+		* is currently collapsed must not hide the settings that govern it.
+		*/
+		/** Persistent container + surfaces dsh-better-sidebar mounts when loaded.
+		*  `[data-dsh-better-sidebar]` is the plugin's host wrapper — always appended
+		*  to document.body on mount — so it is the authoritative "plugin is loaded"
+		*  signal and the body childList observer fires exactly when it appears. The
+		*  panel surfaces we actually style are listed only as reinforcement: they are
+		*  conditionally rendered (collapsed panels drop them), so they must never be
+		*  the sole signal. */
+		const BETTER_SIDEBAR_MARKERS = [
+			"[data-dsh-better-sidebar]",
+			"[data-dsh-panel-host]",
+			"[data-dsh-bottom-panel]",
+			"[data-sidebar-right-panel]"
+		];
+		let betterSidebar = false;
+		const subs = /* @__PURE__ */ new Set();
+		/** Read snapshot of whether the better-sidebar plugin is present. */
+		function rBetterSidebar() {
+			return betterSidebar;
+		}
+		function emit() {
+			subs.forEach((cb) => cb());
+		}
+		function sync() {
+			if (document.querySelector(BETTER_SIDEBAR_MARKERS.join(",")) !== null && !betterSidebar) {
+				betterSidebar = true;
+				emit();
+			}
+		}
+		/** React hook: re-renders the caller when better-sidebar presence changes. */
+		function useBetterSidebar() {
+			return (0, react.useSyncExternalStore)(subscribe, rBetterSidebar);
+		}
+		/** Subscribe to verdict changes. */
+		function subscribe(cb) {
+			subs.add(cb);
+			return () => {
+				subs.delete(cb);
+			};
+		}
+		/** Start detection (probe once, then watch body mounts). Returns an
+		*  unsubscribe for plugin teardown. */
+		function startBetterSidebarWatch() {
+			sync();
+			const observer = new MutationObserver(sync);
+			observer.observe(document.body, { childList: true });
+			return () => observer.disconnect();
+		}
+		//#endregion
 		//#region src/client/components/pages/InterfacePage.tsx
 		const PARTS = [
 			{
@@ -4808,10 +5010,22 @@ window.__ModuleLoader__.load({
 				isTrajectory: true,
 				labelKey: "uiTrajectory",
 				Icon: TrajectoryIcon
+			},
+			{
+				isProduced: true,
+				labelKey: "uiProduced",
+				Icon: TextIcon
+			},
+			{
+				isPanel: true,
+				labelKey: "uiPanelRegion",
+				Icon: PanelIcon
 			}
 		];
 		function InterfacePage({ p }) {
-			const { t, setOps, setBlurs, setSop } = p;
+			const { t, setOps, setBlurs, setSop, setPanelOp } = p;
+			const hasBetterSidebar = useBetterSidebar();
+			const parts = PARTS.filter((part) => !(part.isPanel && !hasBetterSidebar));
 			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 },
@@ -4831,11 +5045,11 @@ 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 } = part;
+				children: parts.map((part, i) => {
+					const { labelKey, Icon, isSettings, isChat, isTrajectory, isPanel, isProduced } = 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" : isSettings ? "settings" : isPanel ? "panel" : isProduced ? "produced" : opKey;
+					const opacity = isChat ? rChatTextOpacity() : isTrajectory ? rTrajectoryOpacity() : isSettings ? rSop() : isPanel ? rPanelOpacity() : isProduced ? rProducedOpacity() : rOps()[opKey];
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 						className: "dab-card dab-card-hover dab-rise",
 						style: { "--d": i + 1 },
@@ -4875,6 +5089,12 @@ window.__ModuleLoader__.load({
 									} else if (isSettings) {
 										cfg.settingsOpacity = op;
 										applySettingsOverrides(op);
+									} else if (isPanel) {
+										cfg.panelOpacity = op;
+										applyPanelOverrides(op);
+									} else if (isProduced) {
+										cfg.producedOpacity = op;
+										applyProduced();
 									} else {
 										const ops = { ...rOps() };
 										ops[opKey] = op;
@@ -4894,7 +5114,12 @@ window.__ModuleLoader__.load({
 										applyTrajectoryOverrides(op);
 										saveConfig();
 									} else if (isSettings) setSop(op);
-									else {
+									else if (isPanel) setPanelOp(op);
+									else if (isProduced) {
+										cfg.producedOpacity = op;
+										applyProduced();
+										saveConfig();
+									} else {
 										const ops = { ...rOps() };
 										ops[opKey] = op;
 										setOps(ops);
@@ -5846,7 +6071,9 @@ window.__ModuleLoader__.load({
 			settings: 0,
 			chat: 0,
 			trajectory: 0,
-			input: 0
+			input: 0,
+			panel: 0,
+			produced: 0
 		};
 		const BUILTIN_PRESETS = [
 			{
@@ -5864,7 +6091,9 @@ window.__ModuleLoader__.load({
 					wallpaperOpacity: 1,
 					blur: 0,
 					chatTextOpacity: 0,
-					trajectoryOpacity: 1
+					trajectoryOpacity: 1,
+					panelOpacity: 1,
+					producedOpacity: 1
 				}
 			},
 			{
@@ -5888,13 +6117,16 @@ window.__ModuleLoader__.load({
 						card: 12,
 						settings: 20,
 						trajectory: 8,
-						input: 14
+						input: 14,
+						panel: 12
 					},
 					settingsOpacity: .88,
 					wallpaperOpacity: 1,
 					blur: 0,
 					chatTextOpacity: 0,
-					trajectoryOpacity: .85
+					trajectoryOpacity: .85,
+					panelOpacity: .85,
+					producedOpacity: 1
 				}
 			},
 			{
@@ -5912,7 +6144,9 @@ window.__ModuleLoader__.load({
 					wallpaperOpacity: 1,
 					blur: 0,
 					chatTextOpacity: 0,
-					trajectoryOpacity: 1
+					trajectoryOpacity: 1,
+					panelOpacity: 1,
+					producedOpacity: 1
 				}
 			},
 			{
@@ -5936,13 +6170,16 @@ window.__ModuleLoader__.load({
 						card: 14,
 						settings: 22,
 						trajectory: 10,
-						input: 16
+						input: 16,
+						panel: 16
 					},
 					settingsOpacity: .85,
 					wallpaperOpacity: .92,
 					blur: 2,
 					chatTextOpacity: 0,
-					trajectoryOpacity: .8
+					trajectoryOpacity: .8,
+					panelOpacity: .8,
+					producedOpacity: 1
 				}
 			},
 			{
@@ -5966,13 +6203,16 @@ window.__ModuleLoader__.load({
 						card: 10,
 						settings: 18,
 						trajectory: 6,
-						input: 20
+						input: 20,
+						panel: 18
 					},
 					settingsOpacity: .8,
 					wallpaperOpacity: 1,
 					blur: 0,
 					chatTextOpacity: 0,
-					trajectoryOpacity: .78
+					trajectoryOpacity: .78,
+					panelOpacity: .75,
+					producedOpacity: 1
 				}
 			},
 			{
@@ -5994,7 +6234,9 @@ window.__ModuleLoader__.load({
 					wallpaperOpacity: 1,
 					blur: 0,
 					chatTextOpacity: 0,
-					trajectoryOpacity: 1
+					trajectoryOpacity: 1,
+					panelOpacity: 1,
+					producedOpacity: 1
 				}
 			}
 		];
@@ -6584,7 +6826,7 @@ window.__ModuleLoader__.load({
 			}, "dsh-any-background: skin dispose");
 			const styleEl = document.createElement("style");
 			styleEl.dataset.plugin = "dsh-any-background";
-			styleEl.textContent = `body[data-ds-dark-theme="dsh-any-background"]::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}${MOBILE_HEADER_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-any-background"]::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}${POPOVER_BLUR_RULE}${TRAJECTORY_STYLE_RULE}${INPUT_BLUR_RULE}${MOBILE_HEADER_RULE}${PANEL_TOKEN_RULE}${PANEL_BLUR_RULE}${PRODUCED_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);
@@ -6829,6 +7071,7 @@ window.__ModuleLoader__.load({
 			ctx.effect(() => () => {
 				teardownWp();
 			}, "dsh-any-background: wp cleanup");
+			ctx.effect(() => startBetterSidebarWatch(), "dsh-any-background: better-sidebar watch");
 			ctx.effect(() => ctx.on("theme/change", () => {
 				if (rHasColor() || rBgDark() !== null || rSchemeOverride() !== "auto") {
 					const snapshot = ctx.theme.getTheme();
@@ -7006,6 +7249,11 @@ window.__ModuleLoader__.load({
 						applySettingsOverrides(v);
 						saveConfig();
 					},
+					setPanelOp: (v) => {
+						cfg.panelOpacity = v;
+						applyPanelOverrides(v);
+						saveConfig();
+					},
 					extractColor: async () => {
 						const url = rWp();
 						if (!url) return false;