dsh-plugin-workbench 0.0.12 → 0.0.13

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## [0.0.13] - 2026-08-26
+
+### Fixed
+
+- **预览分栏宽度拖拽：一拖就骤然缩小到最窄，之后无法拖动、无法复原**。根因：
+  拖拽计算"预览最大宽度"时用 `handle.parentElement` 测量中间列宽度，但 slot 系统把
+  slot 内容包在一层 `display: contents` 的包装元素里——该包装层不参与布局，
+  `getBoundingClientRect().width` 恒为 **0**，于是
+  `max = max(240, 0 - 240) = 240`，第一次 `pointermove` 就把宽度钳到最小宽度 240，
+  之后每次移动都被钳在 240，表现为骤然缩小且拖不回来（100% 复现，与窗口/鼠标操作
+  无关）。修复：`laidOutParent()` 跳过所有 `display: contents` 层，取真正参与布局的
+  flex 容器（中间列）再测量；持久化宽度恢复时同样用它校准。
+- 拖拽健壮性（防同类"卡死"）：`setPointerCapture` 保证 `pointerup` 在指针移出窗口后
+  也能派发并清理监听器；监听 `pointercancel`；每次 `pointerdown` 防御性移除上一次
+  残留的监听器；组件卸载时清理窗口监听器；拖拽中每步实时重测中间列宽度。
+
+### Added
+
+- **预览宽度持久化**：拖拽后的分栏宽度写入 localStorage，刷新/重开会话后恢复
+  （自动按当前窗宽 clamp 在有效区间内）。
+
+
 ## [0.0.12] - 2026-08-25
 
 - 相关插件段新增 dsh-plugin-windows-guard（Windows 环境防坑守则 skill 插件，互相引流）。

package/lib/client.js

@@ -15324,6 +15324,20 @@ window.__ModuleLoader__.load({
 		const PREVIEW_MIN = 240;
 		const CHAT_MIN = 240;
 		const PREVIEW_TOO_LARGE_LABEL = "512KB";
+		/** Persisted split width (px) — survives reloads so a drag is never lost. */
+		const PREVIEW_WIDTH_KEY = "dsh-plugin-workbench:preview-width";
+		/** Read the persisted preview width; `null` means "use the default 55%". */
+		function storedPreviewWidth() {
+			try {
+				if (typeof window === "undefined") return null;
+				const raw = window.localStorage.getItem(PREVIEW_WIDTH_KEY);
+				if (raw === null) return null;
+				const px = Number(raw);
+				return Number.isFinite(px) && px > 0 ? px : null;
+			} catch {
+				return null;
+			}
+		}
 		/** Same-origin raw-bytes route registered by the host half (see src/index.ts). */
 		const RAW_PREFIX = "/dsh-plugin-files/raw";
 		/** Same-origin SSE endpoint pushed by the host half (see src/index.ts). */
@@ -15385,6 +15399,22 @@ window.__ModuleLoader__.load({
 		function clamp(value, min, max) {
 			return Math.min(max, Math.max(min, value));
 		}
+		/**
+		* Nearest ancestor that actually takes part in layout. The slot system wraps
+		* each slot's content in a `display: contents` element: children still join
+		* the OUTER flex row, but the wrapper itself reports a 0×0 bounding rect.
+		* Measuring that (the old `handle.parentElement`) made `max` collapse to
+		* `PREVIEW_MIN` on the first move — the pane jumped to its minimum width and
+		* could never be dragged back out. Skip every `display: contents` layer.
+		*/
+		function laidOutParent(el) {
+			let node = el?.parentElement ?? null;
+			while (node !== null) {
+				if (getComputedStyle(node).display !== "contents") return node;
+				node = node.parentElement;
+			}
+			return null;
+		}
 		/** Parent directory of a path ('C:/a/b.md' → 'C:/a'; '' when there is none). */
 		function dirnameOf(path) {
 			const idx = Math.max(path.lastIndexOf("/"), path.lastIndexOf("\\"));
@@ -15436,6 +15466,8 @@ window.__ModuleLoader__.load({
 			const highlightRef = (0, react.useRef)(null);
 			const textareaRef = (0, react.useRef)(null);
 			const gutterRef = (0, react.useRef)(null);
+			const dragMoveRef = (0, react.useRef)(() => void 0);
+			const dragUpRef = (0, react.useRef)(() => void 0);
 			const refresh = (0, react.useCallback)(() => bump((v) => v + 1), []);
 			const tabsRef = (0, react.useRef)(tabs);
 			(0, react.useEffect)(() => {
@@ -15625,26 +15657,72 @@ window.__ModuleLoader__.load({
 					document.body.style.removeProperty("--dsh-preview-width");
 				};
 			}, [isOpen]);
+			(0, react.useEffect)(() => {
+				const saved = storedPreviewWidth();
+				if (saved === null) return;
+				const preview = previewRef.current;
+				const center = laidOutParent(preview);
+				if (preview === null || preview === void 0 || center === null || center === void 0) return;
+				const centerWidth = center.getBoundingClientRect().width;
+				const max = Math.max(PREVIEW_MIN, centerWidth - CHAT_MIN);
+				setPreviewWidth(clamp(saved, PREVIEW_MIN, max));
+			}, [isOpen]);
+			(0, react.useEffect)(() => () => {
+				window.removeEventListener("pointermove", dragMoveRef.current);
+				window.removeEventListener("pointerup", dragUpRef.current);
+				window.removeEventListener("pointercancel", dragUpRef.current);
+			}, []);
+			/**
+			* Start a split-width drag. Robustness notes (the "pane suddenly shrinks
+			* and freezes" bug class):
+			*
+			* - Pointer capture reroutes every later pointer event to the handle, so
+			*   `pointerup` fires EVEN when the mouse is released outside the window.
+			*   Without it the up event is lost, `onUp` never runs, and the leftover
+			*   `onMove` keeps rewriting the width from its stale baseline on every
+			*   mouse move anywhere on the page — that is the "cannot drag / cannot
+			*   restore" state.
+			* - `pointercancel` is cleaned up too (browser steals the pointer, e.g. a
+			*   tablet palm or an OS gesture).
+			* - Pointerdown defensively removes any previous listeners first, so even a
+			*   capture-less leftover cannot survive into a second drag.
+			* - The max is re-measured every move: the chat minimum is relative to the
+			*   CURRENT center column, which can change while the drag is in flight.
+			*/
 			const onHandleDown = (0, react.useCallback)((e) => {
 				e.preventDefault();
 				const handle = handleRef.current;
 				const preview = previewRef.current;
 				if (handle === null || preview === null) return;
-				const center = handle.parentElement;
+				const center = laidOutParent(handle);
 				if (center === null) return;
 				const startX = e.clientX;
 				const startWidth = preview.getBoundingClientRect().width;
-				const centerWidth = center.getBoundingClientRect().width;
-				const max = Math.max(PREVIEW_MIN, centerWidth - CHAT_MIN);
 				const onMove = (ev) => {
-					setPreviewWidth(clamp(startWidth + ev.clientX - startX, PREVIEW_MIN, max));
+					const centerWidth = center.getBoundingClientRect().width;
+					const max = Math.max(PREVIEW_MIN, centerWidth - CHAT_MIN);
+					const width = clamp(startWidth + ev.clientX - startX, PREVIEW_MIN, max);
+					setPreviewWidth(width);
+					try {
+						window.localStorage.setItem(PREVIEW_WIDTH_KEY, String(width));
+					} catch {}
 				};
 				const onUp = () => {
-					window.removeEventListener("pointermove", onMove);
-					window.removeEventListener("pointerup", onUp);
+					window.removeEventListener("pointermove", dragMoveRef.current);
+					window.removeEventListener("pointerup", dragUpRef.current);
+					window.removeEventListener("pointercancel", dragUpRef.current);
 				};
+				window.removeEventListener("pointermove", dragMoveRef.current);
+				window.removeEventListener("pointerup", dragUpRef.current);
+				window.removeEventListener("pointercancel", dragUpRef.current);
+				dragMoveRef.current = onMove;
+				dragUpRef.current = onUp;
 				window.addEventListener("pointermove", onMove);
 				window.addEventListener("pointerup", onUp);
+				window.addEventListener("pointercancel", onUp);
+				try {
+					handle.setPointerCapture(e.pointerId);
+				} catch {}
 			}, []);
 			const onSave = (0, react.useCallback)(async () => {
 				if (active === void 0) return;