dsh-flyout-sidebar 0.1.7 → 0.1.9

package/dist/client.js

@@ -62,19 +62,27 @@
 	* --dsw-alias-* 设计令牌，深浅主题自动跟随。
 	*/
 	const styleCss = `
-html #root {
-  margin-right: calc(var(--dsh-sidebar-width, 0px) + var(--dsh-flyout-sidebar-width, 0px));
-  transition: margin-right var(--ds-transition-duration-slow, 200ms) var(--ds-ease-in-out, ease);
-}
-body[data-dsh-flyout-dragging] #root {
-  transition: none;
+/* 面板关闭时:corner 触发按钮滑回右上角(占 right 12~48px 区间),左上角
+   panel 不动,日志按钮让位留白 —— 与 better-sidebar 折叠态给右上角按钮组
+   让位(right 10→70px)的思路一致,避免两块按钮挤在一起(见下方 64px 规则)。 */
+/* 面板打开:header 已被 AppFrame grid 推挤到面板左缘(components.tsx 追加
+   轨道),这里只需再留固定 16px 间距,日志按钮与面板保持恒定距离 —— 不能
+   再按面板宽让位一次,否则推挤 + padding 叠加,日志按钮会被推出去两倍
+   面板宽(距面板过远)。用 !important 压过宿主/其它插件的同规则。 */
+body.dsh-flyout-sidebar-open header:has([data-slot="conversation.session.header.utilities"]) {
+  padding-right: 16px !important;
+  transition: padding-right var(--ds-transition-duration-slow, 200ms) var(--ds-ease-in-out, ease);
 }
-header:has([data-slot="conversation.session.header.utilities"]) {
-  padding-right: max(28px, calc(60px - var(--dsh-flyout-sidebar-width, 0px)));
+/* 面板收起:日志按钮让位到 64px(= corner 按钮 48px 左缘 + 16px 间距)。
+   声明在 open 规则之后,同特异性时保证 open 状态生效。 */
+body:not(.dsh-flyout-sidebar-open) header:has([data-slot="conversation.session.header.utilities"]) {
+  padding-right: 64px !important;
   transition: padding-right var(--ds-transition-duration-slow, 200ms) var(--ds-ease-in-out, ease);
 }
+body[data-dsh-flyout-dragging] header:has([data-slot="conversation.session.header.utilities"]) {
+  transition: none;
+}
 @media (prefers-reduced-motion: reduce) {
-  html #root { transition: none; }
   header:has([data-slot="conversation.session.header.utilities"]) { transition: none; }
   .artifacts-preview-overlay, .artifacts-panel, .artifacts-corner-btn { transition: none; }
 }
@@ -211,11 +219,19 @@ body[data-dsh-flyout-dragging] .artifacts-preview-overlay { transition: none; }
 .artifacts-corner-btn {
   position: fixed; top: 0; right: calc(var(--dsh-sidebar-width, 0px) + 12px);
   z-index: 10000; width: 36px; height: 28px; padding: 0;
-  border: none; background: transparent; color: var(--dsw-alias-label-secondary);
+  border: none; background: transparent;
+  /* 颜色带多级回退：某些宿主的 --dsw-alias-* 令牌缺失时兜底到常规文字色，
+     保证触发图标始终可见（曾被误报为“图标不显示”）。 */
+  color: var(--dsw-alias-label-secondary, var(--dsw-alias-label-tertiary, var(--ds-text-2, #555)));
   cursor: pointer; align-items: center; justify-content: center; display: inline-flex;
   transition: transform var(--ds-transition-duration-slow, 200ms) var(--ds-ease-in-out, ease),
     right var(--ds-transition-duration-slow, 200ms) var(--ds-ease-in-out, ease), color .15s;
 }
+/* better-sidebar 折叠时其右上角折叠按钮组占 right 10→70px；触发按钮避开它，
+   否则两者重叠抢点击（坐标约定见 better-sidebar layout.css 的 78px 注释）。 */
+body[data-dsh-sidebar-collapsed] .artifacts-corner-btn {
+  right: 78px;
+}
 /* 面板打开时随面板一起滑出屏右缘（推拉动画的另一半） */
 .artifacts-corner-btn.artifacts-slid-out {
   transform: translateX(calc(100% + 24px));
@@ -378,15 +394,17 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 }
 .fs-settings-toggle[data-on="true"]::after { transform: translateX(18px); }
 `;
-	/** 注入样式（幂等：已存在则跳过） */
+	/** 注入样式（幂等：内容不一致时替换，使热重载后新样式必然生效） */
 	function insertStyles() {
 		if (typeof document === "undefined") return;
 		const id = "dsh-flyout-sidebar-styles";
-		if (document.getElementById(id)) return;
-		const el = document.createElement("style");
-		el.id = id;
-		el.textContent = styleCss;
-		document.head.appendChild(el);
+		let el = document.getElementById(id);
+		if (!el) {
+			el = document.createElement("style");
+			el.id = id;
+			document.head.appendChild(el);
+		}
+		if (el.textContent !== styleCss) el.textContent = styleCss;
 	}
 	//#endregion
 	//#region src/shared/ext.js
@@ -859,21 +877,26 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 		/**
 		* 从宿主拉取插件配置（config 已由 cordis 校验填充默认值）并通知订阅者。
 		* 配置保存在宿主侧，页面内不持久化；面板打开即用最新值。
+		*
+		* syncDefaultOpen=true（启动首次加载、settings scope 配置变更回调）时，
+		* 若本次拉取确实改动了 defaultOpen 字段，则实时同步边栏开合 —— 用户在
+		* 设置卡片切换「默认展开」开关后边栏立即跟随展开/收起。面板摊开时例行
+		* 拉取（刷新 minPanelWidth 等设置）不传此 flag：只刷新配置，绝不回写
+		* 开合状态，否则刚点开的边栏会被 defaultOpen 当场压回（点击无反应）。
 		*/
-		load() {
+		load(opts) {
+			const syncDefaultOpen = !!(opts && opts.syncDefaultOpen);
 			fetch("/flyout-sidebar/config").then((res) => res.ok ? res.json() : Promise.reject(/* @__PURE__ */ new Error("HTTP " + res.status))).then((out) => {
 				const next = {
 					...this.data,
 					...out.config || {}
 				};
+				const defaultOpenChanged = typeof next.defaultOpen === "boolean" && next.defaultOpen !== this.data.defaultOpen;
 				this.data = next;
 				for (const fn of this.listeners) try {
 					fn(next);
 				} catch {}
-				if (typeof next.defaultOpen === "boolean" && next.defaultOpen !== store.open) {
-					store.open = next.defaultOpen;
-					setSlide({ slidOut: !next.defaultOpen });
-				}
+				if (syncDefaultOpen && defaultOpenChanged && next.defaultOpen !== store.open) store.setOpen(next.defaultOpen);
 			}).catch(() => {});
 		},
 		subscribe(fn) {
@@ -2415,6 +2438,20 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 		});
 		return /* @__PURE__ */ h(Fragment, null, rows);
 	}
+	/** 定位 DSH AppFrame：CSS Grid 容器，内联 style 设 gridTemplateColumns，
+	*  第一列即左侧栏宽（折叠时为 0px）。 */
+	function findAppFrame() {
+		const nodes = document.querySelectorAll("#root *");
+		for (let i = 0; i < nodes.length; i++) {
+			const el = nodes[i];
+			const cols = el.style.gridTemplateColumns;
+			if (cols) {
+				const first = cols.split(/\s+/)[0];
+				if (first && first.endsWith("px")) return el;
+			}
+		}
+		return null;
+	}
 	function ArtifactsPanel() {
 		const open = useOpen();
 		const settings = useSettings();
@@ -2620,18 +2657,6 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 		}, []);
 		React.useEffect(() => {
 			const root = document.documentElement;
-			const findAppFrame = () => {
-				const nodes = document.querySelectorAll("#root *");
-				for (let i = 0; i < nodes.length; i++) {
-					const el = nodes[i];
-					const cols = el.style.gridTemplateColumns;
-					if (cols) {
-						const first = cols.split(/\s+/)[0];
-						if (first && first.endsWith("px")) return el;
-					}
-				}
-				return null;
-			};
 			const readAndSet = (frame) => {
 				if (!frame) return 0;
 				const cols = frame.style.gridTemplateColumns;
@@ -2685,8 +2710,58 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 		React.useEffect(() => {
 			const root = document.documentElement;
 			root.style.setProperty("--dsh-flyout-sidebar-width", open ? widthPx + "px" : "0px");
+			document.body.classList.toggle("dsh-flyout-sidebar-open", open);
+			const push = {
+				frame: null,
+				suffix: null
+			};
+			const applyPush = (frame, w) => {
+				if (!frame) return;
+				push.frame = frame;
+				let cols = frame.style.gridTemplateColumns || "";
+				if (push.suffix && cols.endsWith(push.suffix)) cols = cols.slice(0, cols.length - push.suffix.length);
+				const next = w > 0 ? cols.trim() !== "" ? cols + " " + w + "px" : w + "px" : cols;
+				push.suffix = w > 0 ? " " + w + "px" : null;
+				if (frame.style.gridTemplateColumns !== next) frame.style.gridTemplateColumns = next;
+			};
+			const observeFrame = (frame) => {
+				if (!frame) return null;
+				const obs = new MutationObserver(() => {
+					if (frame && document.contains(frame)) applyPush(frame, open ? widthPx : 0);
+				});
+				obs.observe(frame, {
+					attributes: true,
+					attributeFilter: ["style"]
+				});
+				return obs;
+			};
+			let frame = findAppFrame();
+			applyPush(frame, open ? widthPx : 0);
+			let styleObs = observeFrame(frame);
+			let subtreeObs = null;
+			if (typeof MutationObserver === "function") {
+				subtreeObs = new MutationObserver(() => {
+					if (!frame || !document.contains(frame)) {
+						styleObs?.disconnect();
+						frame = findAppFrame();
+						if (frame) {
+							applyPush(frame, open ? widthPx : 0);
+							styleObs = observeFrame(frame);
+						}
+					}
+				});
+				subtreeObs.observe(document.body, {
+					childList: true,
+					subtree: true,
+					attributes: false
+				});
+			}
 			return () => {
+				styleObs?.disconnect();
+				subtreeObs?.disconnect();
+				applyPush(push.frame, 0);
 				root.style.setProperty("--dsh-flyout-sidebar-width", "0px");
+				document.body.classList.remove("dsh-flyout-sidebar-open");
 			};
 		}, [open, widthPx]);
 		React.useEffect(() => {
@@ -2738,16 +2813,19 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 					(ctx.reflect?.inject("layout"))?.toggleSidebar?.();
 				} catch {}
 			};
+			const startX = e.clientX;
 			let lastMouseX = e.clientX;
 			let rafId = null;
 			let collapseTriggered = false;
+			let draggedLeft = false;
 			const tick = () => {
 				rafId = requestAnimationFrame(tick);
 				const cursorW = window.innerWidth - lastMouseX - rightOffset;
 				const sidebarW = getSidebarWidth();
 				const maxW = window.innerWidth - sidebarW - rightOffset;
 				const w = Math.min(cursorW, maxW);
-				if (!collapseTriggered && sidebarW > 0 && cursorW >= maxW - 2) {
+				if (lastMouseX < startX - 8) draggedLeft = true;
+				if (!collapseTriggered && sidebarW > 0 && draggedLeft && cursorW >= maxW - 2) {
 					collapseTriggered = true;
 					triggerSidebarCollapse();
 				}
@@ -3032,7 +3110,7 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 						order: 50,
 						label: "Artifacts Panel"
 					}, () => /* @__PURE__ */ h(ArtifactsPanel, null)));
-					settingsStore.load();
+					settingsStore.load({ syncDefaultOpen: true });
 					ctx.inject(["settingsScope"], (sctx) => {
 						const binder = sctx.get("settingsScope");
 						if (!binder) return;
@@ -3050,7 +3128,7 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 						};
 						sctx.effect(() => scope.subscribe(() => {
 							publishLocal(scope.getSnapshot());
-							settingsStore.load();
+							settingsStore.load({ syncDefaultOpen: true });
 						}), "flyout: settings scope");
 						const useSettingsSnapshot = (selector) => React.useSyncExternalStore((cb) => {
 							localListeners.add(cb);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-flyout-sidebar",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "可弹出侧边栏 · A DeepSeek Harness sidebar that shows artifacts and pops out into a larger web tab.",
   "license": "MIT",
   "type": "module",