dsh-plugin-lookatstudy 0.20.1 → 0.21.0

package/lib/client.js

@@ -817,6 +817,11 @@ window.__ModuleLoader__.load({
 .lks-ui[data-lks-theme='light'] .lks14-threadmenu{background:rgb(255 255 255/0.98);border-color:var(--border-faint);box-shadow:0 12px 32px -8px rgb(0 0 0/0.18)}
 .lks-ui[data-lks-theme='light'] .lks14-ctxpanel{background:rgb(255 255 255/0.98);box-shadow:0 8px 24px rgb(0 0 0/0.12)}
 /* ambient glyph motion sleeps under reduced-motion (A7 never had a guard) */
+/* v0.29 pane-resize: the grip line lights the upstream accent under the skin
+   (base sheet's host-token color is the no-skin fallback; the handle itself
+   is structural lks14- and lives in styles.ts) */
+.lks-ui .lks14-panehandle:hover::after,.lks-ui .lks14-panehandle[data-dragging='true']::after{background:color-mix(in srgb,var(--accent) 55%,transparent)}
+
 @media (prefers-reduced-motion: reduce){
   .lks-ui .lks-lessorow.st-mastered .lks-lessorow-glyph svg,.lks-ui .lks-hdr-xp .lks-hdr-glyph,.lks-ui .lks-hdr-streak .lks-hdr-glyph{animation:none}
 }
@@ -887,7 +892,7 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 .lks14-col{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
 
 /* 左 rail: course picker, tree, review, import */
-.lks14-rail{flex:0 0 300px;border-right:none;padding:0;overflow:hidden;position:relative}
+.lks14-rail{flex:0 0 var(--lks-rail-w,300px);border-right:none;padding:0;overflow:hidden;position:relative;transition:flex-basis 150ms ease}
 .lks14-railhead{display:flex;align-items:center;gap:6px;margin-top:10px}
 .lks14-railtitle{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
 .lks14-railsub{font-size:12px;color:var(--dsw-alias-label-secondary);margin:6px 0}
@@ -902,7 +907,7 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 .lks14-hint{font-size:11.5px;color:var(--dsw-alias-label-tertiary);margin-top:6px;line-height:1.6}
 
 /* 中 chat: the tutor stream + its own composer (upstream ChatStream/ChatComposer) */
-.lks14-chat{flex:0 0 auto;width:clamp(480px,45%,800px);min-width:0;border-right:none}
+.lks14-chat{flex:0 0 auto;width:var(--lks-chat-w,clamp(480px,45%,800px));min-width:0;border-right:none;transition:width 150ms ease}
 .lks14-chatlesson{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;color:var(--dsw-alias-label-tertiary)}
 .lks14-pills{display:inline-flex;gap:2px}
 .lks14-pill{border:none;background:none;color:var(--dsw-alias-label-tertiary);font:inherit;font-size:12px;padding:2px 8px;border-radius:7px;cursor:pointer}
@@ -933,6 +938,22 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 .lks14-composertext{flex:1;font:inherit;font-size:13px;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);border-radius:10px;padding:7px 10px;resize:none;box-sizing:border-box}
 .lks14-composertext:focus{outline:none;border-color:var(--dsw-alias-state-business-primary)}
 
+/* ============================================================
+ * v0.29 pane-resize 拖拽手柄(PaneResizeHandle)——
+ * 栏间 6px 竖条,视觉握线默认隐形、hover/拖拽亮 accent;
+ * 命中区触屏 44px(触屏密度红线),细指针收窄 12px(不吃栏内容点击)。
+ * pane 分隔语汇 = surface 色阶不加描边:握线是 hover 才现身的交互
+ * affordance,不是常驻分隔线,不违反 v0.6「pane 间无 border」。
+ * ============================================================ */
+.lks14-panehandle{position:relative;flex:none;width:6px;cursor:col-resize;touch-action:none;z-index:5}
+.lks14-panehandle::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:44px;transform:translateX(-50%)}
+@media (pointer:fine){.lks14-panehandle::before{width:12px}}
+.lks14-panehandle::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);border-radius:1px;background:transparent;transition:background 120ms}
+.lks14-panehandle:hover::after,.lks14-panehandle[data-dragging='true']::after{background:color-mix(in srgb,var(--dsw-alias-state-business-primary) 55%,transparent)}
+/* 拖拽中:全局列宽光标 + 禁文本选择(宽度直写不经过 React) */
+body.pane-dragging{cursor:col-resize;user-select:none}
+body.pane-dragging *{cursor:col-resize}
+
 /* 右 notebook: 讲解/概念图/笔记 (upstream NotebookPanel) */
 .lks14-note{flex:1 1 auto;min-width:440px;padding:0;overflow-y:auto}
 .lks14-lessonhead{margin:10px 0 6px}
@@ -1001,6 +1022,7 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
   .lks14-body[data-pane='rail'] .lks14-righthalf{display:none}
   .lks14-body[data-pane='chat'] .lks14-rail,.lks14-body[data-pane='chat'] .lks14-note,
   .lks14-body[data-pane='note'] .lks14-rail,.lks14-body[data-pane='note'] .lks14-chat{display:none}
+  .lks14-panehandle{display:none}
   .lks14-body[data-pane='rail'] .lks14-rail{display:flex;max-height:none;flex:1 1 auto}
   .lks14-body[data-pane='note'] .lks14-note{display:flex}
 }
@@ -2129,6 +2151,9 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			"note.retryRender": "重试渲染",
 			"zoom.in": "放大面板字号",
 			"zoom.out": "缩小面板字号",
+			"pane.rail.aria": "调整课程栏宽度",
+			"pane.chat.aria": "调整对话栏宽度",
+			"pane.tip": "拖拽调宽,双击重置",
 			"palette.label": "命令面板",
 			"palette.placeholder": "搜索课时/课程,或选择动作…",
 			"palette.lessons": "课时",
@@ -2472,6 +2497,9 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			"note.retryRender": "Retry render",
 			"zoom.in": "Increase panel font size",
 			"zoom.out": "Decrease panel font size",
+			"pane.rail.aria": "Resize the course pane width",
+			"pane.chat.aria": "Resize the chat pane width",
+			"pane.tip": "Drag to resize, double-click to reset",
 			"palette.label": "Command palette",
 			"palette.placeholder": "Search lessons/courses or pick an action…",
 			"palette.lessons": "Lesson",
@@ -3327,6 +3355,149 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			}
 			return out.join("\n");
 		}
+		const CHAT_MAX = 1100;
+		const clampNum = (v, min, max) => Math.min(max, Math.max(min, v));
+		/** 对话栏未定制时的默认宽数值形式(= clamp(480px,45%,800px) 在 rowW 下;rowW = 容器宽 − rail 有效宽)。 */
+		function defaultChatWidth(rowW) {
+			return clampNum(rowW * .45, 480, 800);
+		}
+		/** 课程栏拖拽候选钳制:reserved = 对话栏有效宽 + NOTE_MIN + 手柄。 */
+		function clampRailCandidate(next, containerW, reserved) {
+			return clampNum(next, 240, Math.min(480, Math.max(240, containerW - reserved)));
+		}
+		/** 对话栏拖拽候选钳制:reserved = 课程栏有效宽 + NOTE_MIN;极端挤压允许压到硬底。 */
+		function clampChatCandidate(next, rowW, reserved) {
+			return clampNum(next, 480, Math.min(CHAT_MAX, Math.max(320, rowW - reserved)));
+		}
+		/** 存储值解析:空/非数/超区间 → null(回默认;历史脏值不硬吃)。 */
+		function parseStoredWidth(v, min, max) {
+			if (v == null || v.trim() === "") return null;
+			const n = Number(v);
+			if (!Number.isFinite(n) || n < min || n > max) return null;
+			return Math.round(n);
+		}
+		/**
+		* The panel root's font-zoom factor (E7 zoom scales the px-fixed layout) —
+		* getBoundingClientRect returns VISUAL px under zoom while flex-basis/width
+		* apply in LAYOUT px, so every drag measurement divides by this (upstream had
+		* no zoom; this is the one place our port must normalize).
+		*/
+		function panelZoomOf(el) {
+			const z = el?.closest(".lks14")?.style.zoom;
+			const n = z === void 0 || z === "" ? NaN : Number(z);
+			return Number.isFinite(n) && n > 0 ? n : 1;
+		}
+		/**
+		* 渲染时有效宽度求解(持久化值 × 当前容器宽):拖拽钳制保证提交时刻不溢出,
+		* 但宿主列后来变窄会破坏旧组合 —— 存储值按当前容器重新压回预算。
+		* 返回 null = 未定制(挂 CSS 默认)。求解序 acyclic:rail 基准(默认 300 是
+		* 常数)→ row 宽 → chat 默认(% 对 row)→ rail 预算按 chat 有效宽。
+		*/
+		function solvePaneWidths(railStored, chatStored, containerW) {
+			const rowW = Math.max(0, containerW - (railStored ?? 300) - 12);
+			const chat = chatStored == null ? null : clampChatCandidate(chatStored, rowW, 440);
+			const chatBasis = chat ?? defaultChatWidth(rowW);
+			return {
+				rail: railStored == null ? null : clampRailCandidate(railStored, containerW, chatBasis + 440 + 12),
+				chat
+			};
+		}
+		//#endregion
+		//#region src/client/paneresize.tsx
+		/**
+		* PaneResizeHandle —— 栏间拖拽手柄(ported from upstream LookatStudy v0.29
+		* issue #14, src/renderer/components/PaneResizeHandle.tsx @ v0.33.2, MIT —
+		* adapted 2026-09-12; structural deviations recorded here):
+		*  - the drag target is the handle's OWN previousElementSibling (the column it
+		*    follows in the DOM), not a document.querySelector testid anchor;
+		*  - rail widths apply through flex-basis (its class is flex:0 0 basis), chat
+		*    widths through width (flex-basis:auto) — the side prop picks the channel;
+		*  - on commit the parent's layout effect clears the inline width once the
+		*    container-level CSS vars carry the truth (same paint, no flash), so this
+		*    component only writes during the drag and hands over on finish.
+		*
+		* 命中区触屏 44px / 细指针 12px(styles.ts ::before);拖拽期宽度 imperative
+		* 直写目标元素(对话栏是消息流整树,逐帧 setState 不可接受),100ms 节流,
+		* 松手终值必达;双击 = 重置回响应式默认(清 inline + onCommit(null),类/clamp
+		* 接管)。a11y:role=separator + aria-label;键盘调整不在本期范围。
+		*/
+		/** 拖拽中宽度应用节流(松手必应用终值,不受节流影响)。 */
+		const DRAG_APPLY_MIN_MS = 100;
+		/** Inline width ← px;null clears it (class/var/CSS default takes over). */
+		function applyWidth(el, side, px) {
+			if (side === "rail") el.style.flexBasis = px === null ? "" : `${String(px)}px`;
+			else el.style.width = px === null ? "" : `${String(px)}px`;
+		}
+		function PaneResizeHandle(props) {
+			const [dragging, setDragging] = (0, react.useState)(false);
+			const dragRef = (0, react.useRef)(null);
+			/** props 进 effect 闭包会滞后:拖拽全程用 ref 取最新。 */
+			const propsRef = (0, react.useRef)(props);
+			propsRef.current = props;
+			(0, react.useEffect)(() => {
+				if (!dragging) return;
+				document.body.classList.add("pane-dragging");
+				const onMove = (e) => {
+					const d = dragRef.current;
+					if (d == null) return;
+					const now = performance.now();
+					if (now - d.lastAppliedAt < DRAG_APPLY_MIN_MS) return;
+					d.lastAppliedAt = now;
+					applyWidth(d.targetEl, propsRef.current.side, propsRef.current.clampLive(d.startW + (e.clientX - d.startX)));
+				};
+				const finish = (e) => {
+					const d = dragRef.current;
+					dragRef.current = null;
+					setDragging(false);
+					if (d == null) return;
+					d.targetEl.style.transition = "";
+					const finalW = propsRef.current.clampLive(d.startW + (e.clientX - d.startX));
+					applyWidth(d.targetEl, propsRef.current.side, finalW);
+					propsRef.current.onCommit(finalW);
+				};
+				window.addEventListener("pointermove", onMove);
+				window.addEventListener("pointerup", finish);
+				window.addEventListener("pointercancel", finish);
+				return () => {
+					document.body.classList.remove("pane-dragging");
+					window.removeEventListener("pointermove", onMove);
+					window.removeEventListener("pointerup", finish);
+					window.removeEventListener("pointercancel", finish);
+				};
+			}, [dragging]);
+			const startDrag = (e) => {
+				if (e.button !== 0) return;
+				const target = e.currentTarget.previousElementSibling;
+				if (!(target instanceof HTMLElement)) return;
+				e.preventDefault();
+				dragRef.current = {
+					startX: e.clientX,
+					startW: target.getBoundingClientRect().width / panelZoomOf(target),
+					lastAppliedAt: 0,
+					targetEl: target
+				};
+				target.style.transition = "none";
+				setDragging(true);
+				try {
+					e.currentTarget.setPointerCapture(e.pointerId);
+				} catch {}
+			};
+			return (0, react.createElement)("div", {
+				role: "separator",
+				"aria-orientation": "vertical",
+				"aria-label": props.side === "rail" ? tr("pane.rail.aria") : tr("pane.chat.aria"),
+				"data-tooltip": tr("pane.tip"),
+				"data-testid": `pane-handle-${props.side}`,
+				"data-dragging": dragging ? "true" : void 0,
+				className: "lks14-panehandle",
+				onPointerDown: startDrag,
+				onDoubleClick: (e) => {
+					const target = e.currentTarget.previousElementSibling;
+					if (target instanceof HTMLElement) applyWidth(target, props.side, null);
+					props.onCommit(null);
+				}
+			});
+		}
 		//#endregion
 		//#region src/client/views.tsx
 		/**
@@ -6948,6 +7119,56 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 					localStorage.setItem("dsh-plugin-lookatstudy:zoom", String(clamped));
 				} catch {}
 			};
+			const [railW, setRailW] = (0, react.useState)(() => parseStoredWidth(localStorage.getItem("dsh-plugin-lookatstudy:pane-rail"), 240, 480));
+			const [chatW, setChatW] = (0, react.useState)(() => parseStoredWidth(localStorage.getItem("dsh-plugin-lookatstudy:pane-chat"), 480, CHAT_MAX));
+			const [paneBoxW, setPaneBoxW] = (0, react.useState)(0);
+			const bodyEl = (0, react.useRef)(null);
+			const rowEl = (0, react.useRef)(null);
+			const panesCustom = railW !== null || chatW !== null;
+			(0, react.useEffect)(() => {
+				const el = bodyEl.current;
+				if (el === null || !panesCustom) return;
+				const ro = new ResizeObserver((entries) => {
+					for (const entry of entries) setPaneBoxW(Math.round(entry.contentRect.width));
+				});
+				ro.observe(el);
+				return () => {
+					ro.disconnect();
+				};
+			}, [panesCustom]);
+			const solvedPanes = solvePaneWidths(railW, chatW, paneBoxW > 0 ? paneBoxW : bodyEl.current?.clientWidth ?? 0);
+			(0, react.useLayoutEffect)(() => {
+				const el = bodyEl.current;
+				if (el === null) return;
+				if (solvedPanes.rail !== null) el.style.setProperty("--lks-rail-w", `${String(solvedPanes.rail)}px`);
+				else el.style.removeProperty("--lks-rail-w");
+				if (solvedPanes.chat !== null) el.style.setProperty("--lks-chat-w", `${String(solvedPanes.chat)}px`);
+				else el.style.removeProperty("--lks-chat-w");
+				for (const col of el.querySelectorAll(".lks14-rail, .lks14-chat")) {
+					col.style.flexBasis = "";
+					col.style.width = "";
+				}
+			}, [solvedPanes.rail, solvedPanes.chat]);
+			const commitPaneWidth = (which, px) => {
+				const key = which === "rail" ? "dsh-plugin-lookatstudy:pane-rail" : "dsh-plugin-lookatstudy:pane-chat";
+				const value = px === null ? null : Math.round(px);
+				if (which === "rail") setRailW(value);
+				else setChatW(value);
+				try {
+					if (value === null) localStorage.removeItem(key);
+					else localStorage.setItem(key, String(value));
+				} catch {}
+			};
+			const railClampLive = (px) => {
+				const el = bodyEl.current;
+				const containerW = (el?.getBoundingClientRect().width ?? 1280) / panelZoomOf(el);
+				const rowW = Math.max(0, containerW - 300 - 12);
+				return clampRailCandidate(px, containerW, (solvedPanes.chat ?? defaultChatWidth(rowW)) + 440 + 12);
+			};
+			const chatClampLive = (px) => {
+				const el = rowEl.current;
+				return clampChatCandidate(px, (el?.getBoundingClientRect().width ?? 900) / panelZoomOf(el), 440);
+			};
 			const paletteBus = (0, react.useRef)({});
 			const [paletteOpen, setPaletteOpen] = (0, react.useState)(false);
 			(0, react.useEffect)(() => {
@@ -7279,6 +7500,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			const progress = data?.progress ?? null;
 			const body = (0, react.createElement)("div", {
 				className: "lks14-body",
+				ref: bodyEl,
 				"data-pane": narrowPane,
 				onTouchStart: (e) => {
 					const t = e.touches[0];
@@ -7310,6 +7532,10 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				importProgress,
 				stop,
 				paletteBus
+			}), (0, react.createElement)(PaneResizeHandle, {
+				side: "rail",
+				clampLive: railClampLive,
+				onCommit: (px) => commitPaneWidth("rail", px)
 			}), (0, react.createElement)("div", { className: "lks14-righthalf" }, (0, react.createElement)("div", { className: "lks14-appheader" }, (0, react.createElement)("span", { className: "lks-hdr-title" }, lesson?.courseTitle ?? tr("tab.label")), (0, react.createElement)("span", {
 				className: "lks-hdr-xp",
 				"data-tooltip": tr("header.xp", { xp: progress?.totalXp ?? 0 })
@@ -7339,7 +7565,10 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				onClick: () => {
 					setZoom(zoomTier + .1);
 				}
-			}, "A+"))), (0, react.createElement)("div", { className: "lks14-row" }, examLessonActive ? (0, react.createElement)("div", { className: "lks14-col lks14-chat" }, (0, react.createElement)(ExamView, {
+			}, "A+"))), (0, react.createElement)("div", {
+				className: "lks14-row",
+				ref: rowEl
+			}, examLessonActive ? (0, react.createElement)("div", { className: "lks14-col lks14-chat" }, (0, react.createElement)(ExamView, {
 				lessonId: lesson.lessonId,
 				sectionTitle: lesson.sectionTitle,
 				paused: examLeave !== null,
@@ -7365,6 +7594,10 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				contextMeter,
 				contextBreakdown: breakdown,
 				uploadAttachment
+			}), (0, react.createElement)(PaneResizeHandle, {
+				side: "chat",
+				clampLive: chatClampLive,
+				onCommit: (px) => commitPaneWidth("chat", px)
 			}), (0, react.createElement)(NotebookPane, {
 				data,
 				deleteNote,