@michengai/dsh-codex-ui 0.2.54 → 0.2.55

package/dist/client.js

@@ -4246,19 +4246,19 @@ header [data-dcu-title-folder] svg,header [data-dcu-title-more] svg{display:bloc
 		//#region src/client/TurnNavigator.tsx
 		const stylesheet = `
 .dcu-turn-navigator{position:fixed;z-index:20;top:50%;left:var(--dcu-turn-left,288px);transform:translateY(-50%);width:16px;max-height:calc(100vh - 120px);overflow:visible;pointer-events:none}
-.dcu-turn-list{display:grid;gap:2px;margin:0;padding:4px 0;list-style:none;max-height:inherit;overflow-y:auto;scrollbar-width:none;width:min(296px,calc(100vw - 64px));pointer-events:none}
-.dcu-turn-list::-webkit-scrollbar{display:none}
+.dcu-turn-scroll{width:16px;max-height:inherit;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;pointer-events:none}
+.dcu-turn-scroll::-webkit-scrollbar{display:none}
+.dcu-turn-list{display:grid;gap:2px;margin:0;padding:4px 0;list-style:none;width:16px;pointer-events:none}
 .dcu-turn-link{pointer-events:auto;position:relative;display:flex;align-items:center;width:16px;height:8px;overflow:visible;padding:0;border:0;border-radius:4px;background:transparent;color:var(--dsw-alias-label-tertiary);font:13px/18px var(--dsw-font-family);text-align:left;cursor:pointer;transition:color 320ms cubic-bezier(.16,1,.3,1)}
 .dcu-turn-link::before{width:var(--dcu-tick-w,5px);height:var(--dcu-tick-h,1px);flex:0 0 var(--dcu-tick-w,5px);border-radius:1px;background:currentcolor;content:'';transition:width 360ms cubic-bezier(.16,1,.3,1),height 360ms cubic-bezier(.16,1,.3,1),flex-basis 360ms cubic-bezier(.16,1,.3,1),background-color 320ms cubic-bezier(.16,1,.3,1)}
-.dcu-turn-summary{position:absolute;left:16px;top:50%;transform:translateY(-50%);box-sizing:border-box;width:max-content;max-width:240px;height:32px;padding:0 12px;border-radius:16px;background:var(--dsw-alias-button-floating-hover,#3a3d3c);color:var(--dsw-alias-label-primary);box-shadow:none;opacity:0;pointer-events:none;z-index:2;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:32px;transition:opacity 220ms cubic-bezier(.16,1,.3,1)}
+.dcu-turn-summary{position:absolute;left:16px;top:var(--dcu-summary-top,50%);transform:translateY(-50%);box-sizing:border-box;width:max-content;max-width:240px;height:32px;padding:0 12px;border-radius:16px;background:#3a3d3c;color:#e8ebe9;box-shadow:0 8px 24px rgba(0,0,0,.28);pointer-events:none;z-index:2;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:32px}
 .dcu-turn-link[data-active=true]{color:var(--dsw-alias-label-primary)}
-.dcu-turn-link[data-active=true] .dcu-turn-summary{opacity:1}
 .dcu-turn-link[aria-current=true]{color:var(--dsw-alias-label-primary)}
 .dcu-turn-link[aria-current=true]::before{width:var(--dcu-tick-w,5px);flex-basis:var(--dcu-tick-w,5px);height:var(--dcu-tick-h,1px)}
 .dcu-turn-navigator[data-hovering=true] .dcu-turn-link[aria-current=true]{color:var(--dsw-alias-label-tertiary)}
 .dcu-turn-navigator[data-hovering=true] .dcu-turn-link[data-active=true]{color:var(--dsw-alias-label-primary)}
 .dcu-turn-link:focus-visible{outline:0;box-shadow:0 0 0 2px var(--dsw-alias-button-info-fill)}
-@media (prefers-reduced-motion:reduce){.dcu-turn-link,.dcu-turn-link::before,.dcu-turn-summary{transition:none}}
+@media (prefers-reduced-motion:reduce){.dcu-turn-link,.dcu-turn-link::before{transition:none}}
 @media (max-width:760px){.dcu-turn-summary{max-width:200px}}
 `;
 		function tickMarkSize(index, hoverAt, _isCurrent) {
@@ -4320,8 +4320,12 @@ header [data-dcu-title-folder] svg,header [data-dcu-title-more] svg{display:bloc
 			const [current, setCurrent] = (0, react.useState)(turns[0]?.key ?? null);
 			const [hoverAt, setHoverAt] = (0, react.useState)(null);
 			const [railLeft, setRailLeft] = (0, react.useState)(288);
+			const [summaryTop, setSummaryTop] = (0, react.useState)(0);
+			const navRef = (0, react.useRef)(null);
+			const listRef = (0, react.useRef)(null);
 			const turnKeys = (0, react.useMemo)(() => turns.map((turn) => turn.key).join("|"), [turns]);
 			const activeIndex = hoverAt === null ? -1 : Math.max(0, Math.min(turns.length - 1, Math.round(hoverAt)));
+			const activeTurn = activeIndex >= 0 ? turns[activeIndex] : void 0;
 			(0, react.useEffect)(() => {
 				const sidebar = document.querySelector(".dcu-root");
 				const update = () => {
@@ -4363,63 +4367,83 @@ header [data-dcu-title-folder] svg,header [data-dcu-title-more] svg{display:bloc
 					if (frame !== null) window.cancelAnimationFrame(frame);
 				};
 			}, [turnKeys, turns]);
+			(0, react.useEffect)(() => {
+				const nav = navRef.current;
+				const list = listRef.current;
+				if (nav === null || list === null || activeIndex < 0) return;
+				const button = list.querySelectorAll(".dcu-turn-link")[activeIndex];
+				if (button === void 0) return;
+				const next = Math.round(button.getBoundingClientRect().top + button.getBoundingClientRect().height / 2 - nav.getBoundingClientRect().top);
+				setSummaryTop((previous) => previous === next ? previous : next);
+			}, [activeIndex, turns.length]);
 			if (turns.length === 0) return null;
 			const moveHover = (event) => {
 				setHoverAt(hoverIndexFromPoint(event.currentTarget, event.clientY, turns.length));
 			};
-			const style = { "--dcu-turn-left": `${railLeft}px` };
+			const style = {
+				"--dcu-turn-left": `${railLeft}px`,
+				"--dcu-summary-top": `${summaryTop}px`
+			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("nav", {
+				ref: navRef,
 				className: "dcu-turn-navigator",
 				"data-hovering": hoverAt !== null || void 0,
 				"aria-label": t("turns.label"),
 				style,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: stylesheet }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
-					className: "dcu-turn-list",
-					onMouseMove: moveHover,
-					onMouseLeave: () => {
-						setHoverAt(null);
-					},
-					children: turns.map((turn, index) => {
-						const mark = tickMarkSize(index, hoverAt, current === turn.key);
-						const active = hoverAt !== null && index === activeIndex;
-						const tickStyle = hoverAt === null ? void 0 : {
-							"--dcu-tick-w": `${mark.width}px`,
-							"--dcu-tick-h": `${mark.height}px`
-						};
-						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							className: "dcu-turn-link",
-							"data-active": active || void 0,
-							"aria-current": current === turn.key || void 0,
-							"aria-label": t("turns.jump", {
-								index: index + 1,
-								summary: turn.summary
-							}),
-							title: turn.summary,
-							style: tickStyle,
-							onFocus: () => {
-								setHoverAt(index);
-							},
-							onBlur: () => {
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: stylesheet }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dcu-turn-scroll",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
+							ref: listRef,
+							className: "dcu-turn-list",
+							onMouseMove: moveHover,
+							onMouseLeave: () => {
 								setHoverAt(null);
 							},
-							onClick: () => {
-								const host = conversationScrollRoot();
-								const anchor = host === null ? null : conversationAnchor(host, turn.key);
-								if (host === null || anchor === null) return;
-								const reduceMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
-								host.scrollTo({
-									top: host.scrollTop + anchor.getBoundingClientRect().top - host.getBoundingClientRect().top - 12,
-									behavior: reduceMotion ? "auto" : "smooth"
-								});
-							},
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "dcu-turn-summary",
-								children: turn.summary
+							children: turns.map((turn, index) => {
+								const mark = tickMarkSize(index, hoverAt, current === turn.key);
+								const active = hoverAt !== null && index === activeIndex;
+								const tickStyle = hoverAt === null ? void 0 : {
+									"--dcu-tick-w": `${mark.width}px`,
+									"--dcu-tick-h": `${mark.height}px`
+								};
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dcu-turn-link",
+									"data-active": active || void 0,
+									"aria-current": current === turn.key || void 0,
+									"aria-label": t("turns.jump", {
+										index: index + 1,
+										summary: turn.summary
+									}),
+									title: turn.summary,
+									style: tickStyle,
+									onFocus: () => {
+										setHoverAt(index);
+									},
+									onBlur: () => {
+										setHoverAt(null);
+									},
+									onClick: () => {
+										const host = conversationScrollRoot();
+										const anchor = host === null ? null : conversationAnchor(host, turn.key);
+										if (host === null || anchor === null) return;
+										const reduceMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+										host.scrollTo({
+											top: host.scrollTop + anchor.getBoundingClientRect().top - host.getBoundingClientRect().top - 12,
+											behavior: reduceMotion ? "auto" : "smooth"
+										});
+									}
+								}) }, turn.key);
 							})
-						}) }, turn.key);
+						})
+					}),
+					activeTurn !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dcu-turn-summary",
+						children: activeTurn.summary
 					})
-				})]
+				]
 			});
 		}
 		//#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@michengai/dsh-codex-ui",
-  "version": "0.2.54",
+  "version": "0.2.55",
   "description": "以 Codex 风格重构 DSH Web 侧栏的独立客户端插件",
   "license": "Apache-2.0",
   "publishConfig": {