dsh-background-by-model 0.3.1 → 0.3.2

package/lib/client.js

@@ -38,6 +38,8 @@ window.__ModuleLoader__.load({
 			uiSop: "设置界面透明度",
 			uiChatRegion: "对话文本框",
 			uiTrajectory: "轨迹页",
+			uiPreview: "文件预览侧栏",
+			uiPreviewHint: "点开文件后出现在右侧的那一栏。透明度默认跟随「主背景」，拖动本卡片后单独生效；模糊会在主背景模糊之上再叠加一层",
 			uiScopeHint: "界面页的设置是全局的，所有模型共用",
 			statusTitle: "当前生效",
 			statusModel: "当前模型",
@@ -142,6 +144,8 @@ window.__ModuleLoader__.load({
 			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",
@@ -299,11 +303,13 @@ window.__ModuleLoader__.load({
 				settings: 0,
 				chat: 0,
 				trajectory: 0,
+				rightbar: 0,
 				input: 0
 			},
 			settingsOpacity: 1,
 			chatTextOpacity: 0,
-			trajectoryOpacity: 1
+			trajectoryOpacity: 1,
+			rightbarOpacity: null
 		};
 		function freshConfig() {
 			return {
@@ -312,7 +318,8 @@ window.__ModuleLoader__.load({
 				blurs: { ...DEFAULT_CONFIG.blurs },
 				settingsOpacity: DEFAULT_CONFIG.settingsOpacity,
 				chatTextOpacity: DEFAULT_CONFIG.chatTextOpacity,
-				trajectoryOpacity: DEFAULT_CONFIG.trajectoryOpacity
+				trajectoryOpacity: DEFAULT_CONFIG.trajectoryOpacity,
+				rightbarOpacity: DEFAULT_CONFIG.rightbarOpacity
 			};
 		}
 		let cfg = freshConfig();
@@ -462,6 +469,7 @@ window.__ModuleLoader__.load({
 				"settings",
 				"chat",
 				"trajectory",
+				"rightbar",
 				"input"
 			]) out[k] = clamp$1(b[k], 0, 60, DEFAULT_CONFIG.blurs[k]);
 			return out;
@@ -475,6 +483,11 @@ window.__ModuleLoader__.load({
 		function rTrajectoryOpacity() {
 			return clamp01(cfg.trajectoryOpacity, DEFAULT_CONFIG.trajectoryOpacity);
 		}
+		/** 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),
@@ -522,6 +535,7 @@ window.__ModuleLoader__.load({
 				"settings",
 				"chat",
 				"trajectory",
+				"rightbar",
 				"input"
 			]) blurs[k] = clamp$1(bl[k], 0, 60, DEFAULT_CONFIG.blurs[k]);
 			cfg = {
@@ -535,7 +549,8 @@ window.__ModuleLoader__.load({
 				blurs,
 				settingsOpacity: clamp01(c.settingsOpacity, DEFAULT_CONFIG.settingsOpacity),
 				chatTextOpacity: clamp01(c.chatTextOpacity, DEFAULT_CONFIG.chatTextOpacity),
-				trajectoryOpacity: clamp01(c.trajectoryOpacity, DEFAULT_CONFIG.trajectoryOpacity)
+				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)) {
 				activeRuleId = null;
@@ -1133,6 +1148,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 +1253,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 +1270,10 @@ window.__ModuleLoader__.load({
 				applyInputBlur(v);
 				return;
 			}
+			if (part === "rightbar") {
+				applyRightbarBlur(v);
+				return;
+			}
 			if (part === "chat" || part === "trajectory") {
 				applyViewCards();
 				return;
@@ -1728,6 +1765,7 @@ window.__ModuleLoader__.load({
 				baseTokenKey = "";
 				lastBgKey = "";
 			}
+			applyRightbarOverrides(rRightbarOpacity());
 			applyPartBlurs(rBlurs());
 		}
 		function teardownWp() {
@@ -1748,6 +1786,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 = "";
@@ -2413,6 +2453,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 +2650,11 @@ window.__ModuleLoader__.load({
 				labelKey: "uiOpacitySide",
 				Icon: SidebarIcon
 			},
+			{
+				isRightbar: true,
+				labelKey: "uiPreview",
+				Icon: PreviewIcon
+			},
 			{
 				opKey: "card",
 				labelKey: "uiOpacityCard",
@@ -2621,7 +2682,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 },
@@ -2647,10 +2708,10 @@ 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;
+					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 +2748,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 +2772,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;
@@ -2735,7 +2800,12 @@ 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);
 				})
@@ -4295,7 +4365,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);
@@ -4528,6 +4598,11 @@ window.__ModuleLoader__.load({
 						applySettingsOverrides(v);
 						saveConfig();
 					},
+					setRightbarOpacity: (v) => {
+						cfg.rightbarOpacity = v;
+						applyRightbarOverrides(rRightbarOpacity());
+						saveConfig();
+					},
 					exportTheme: () => {
 						const images = {};
 						for (const rule of cfg.rules) {