dsh-cuigengji-plugin 0.4.2 → 0.4.4

package/src/client/launcher.tsx

@@ -1,78 +1,78 @@
-import React, {useEffect, useRef, useState} from 'react';
-import type {SnapshotSelectorHook} from '@deepseek-ai/dsh-client-store';
-import {styles} from './style.ts';
-import avatar from './assets/avatar.png';
-
-interface Workspace {workspaceId:string;title?:string;name?:string;cwd?:string;path?:string}
-interface Props {
-  wide:boolean;
-  useNovelSession:SnapshotSelectorHook<string|undefined>;
-  useNovelWorkspaces:SnapshotSelectorHook<{items:Workspace[];phase:string}>;
-  useSessions:SnapshotSelectorHook<{byId:Record<string,{id:string;retainedBy:{mainView?:number}}>}>;
-  openNovel:(id:string)=>void;
-  revealConversation:()=>void;
-  openWorkspace:(id:string,beforeOpen:(id:string)=>void)=>Promise<void>;
-}
-const launcherStyle=`
-.cg-launcher {position:relative;width:100%;min-width:0;margin:4px 0;}
-.cg-launcher-button {box-sizing:border-box;display:flex;align-items:center;gap:9px;width:100%;min-height:38px;border:1px solid transparent;border-radius:9px;padding:8px 10px;background:transparent;color:var(--dsw-alias-label-primary,#252936);font:500 13px/20px var(--dsw-font-family,system-ui,sans-serif);cursor:pointer;-webkit-app-region:no-drag;transition:background 120ms;}
-.cg-launcher-button:hover {background:var(--dsw-alias-interactive-bg-hover,#4d6bfe10);}
-.cg-launcher-button:focus-visible {outline:2px solid var(--dsw-focus-ring-color,#4d6bfe);outline-offset:-2px;}
-.cg-launcher-button svg {flex:none;color:var(--dsw-alias-label-secondary,#6c7769);}
-.cg-launcher-button[data-compact=true] {width:36px;min-height:36px;justify-content:center;padding:8px;}
-.cg-launcher-hint {position:absolute;bottom:100%;left:0;z-index:100;width:220px;box-sizing:border-box;padding:12px;border:1px solid var(--dsw-alias-border-l1,#dde0e6);border-radius:10px;background:var(--dsw-alias-bg-base,#ffffff);color:var(--dsw-alias-label-primary,#252936);box-shadow:0 8px 24px #0002;font:13px/1.6 system-ui;}
-.cuigengji.cg-launcher-dialog {height:fit-content;min-height:0;padding:24px;width:min(400px,calc(100vw - 32px));max-height:80dvh;border:1px solid var(--cg-line);border-radius:16px;background:var(--cg-paper);box-shadow:0 16px 60px #0003;}
-.cg-launcher-dialog::backdrop {background:#0005;}
-.cg-launcher-dialog h2 {font-size:18px;margin:0 0 8px;}
-.cg-launcher-dialog .launcher-intro {display:flex;align-items:center;gap:18px;margin-bottom:20px;}
-.cg-launcher-dialog .launcher-intro img {display:block;width:76px;height:76px;border-radius:18px;background:#fff;flex:none;}
-.cg-launcher-dialog .launcher-intro span {display:block;font-size:11px;color:var(--cg-accent);margin-bottom:6px;}
-.cg-launcher-dialog .launcher-intro h2 {font-weight:600;line-height:1.5;margin:0;}
-.cg-launcher-dialog>p {line-height:1.8;margin:0 0 20px;}
-.cg-launcher-dialog .launcher-actions {display:flex;justify-content:flex-end;gap:8px;margin-top:20px;}
-`;
-
-export function BookIcon() {
-  return <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.65" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 5.5C9 3.5 5.5 3.5 3 4.5v14c2.5-1 6-1 9 1 3-2 6.5-2 9-1v-14c-2.5-1-6-1-9 1Z"/><path d="M12 5.5v14M6 8h3M15 8h3"/></svg>;
-}
-
-/** Root sidebar entry: independent of message count and the hidden blank-session header. */
-export function Launcher({wide,useNovelSession,useNovelWorkspaces,useSessions,openNovel,revealConversation,openWorkspace}:Props) {
-  const mounted=useNovelSession(value=>value), workspaces=useNovelWorkspaces(value=>value), sessions=useSessions(value=>value);
-  const [choosing,setChoosing]=useState(false), [workspace,setWorkspace]=useState('');
-  const [pending,setPending]=useState<string|null>(null), [busy,setBusy]=useState(false), [error,setError]=useState('');
-  const dialog=useRef<HTMLDialogElement>(null), trigger=useRef<HTMLButtonElement>(null);
-  useEffect(()=>{if(choosing)dialog.current?.showModal();},[choosing]);
-  useEffect(()=>{
-    if(!pending||!mounted)return;
-    setPending(null);
-    if(mounted!==pending)return;
-    try {openNovel(mounted);} catch(e) {setError(e instanceof Error?e.message:String(e));}
-  },[mounted,pending,openNovel]);
-  const close=()=>{dialog.current?.close();setChoosing(false);trigger.current?.focus();};
-  const open=()=>{
-    setError('');
-    try {
-      if(mounted){openNovel(mounted);return;}
-      const selected=Object.values(sessions.byId).find(s=>(s.retainedBy.mainView||0)>0)?.id;
-      if(selected){setPending(selected);revealConversation();return;}
-      setWorkspace(workspaces.items[0]?.workspaceId||'');setChoosing(true);
-    } catch(e) {setError(e instanceof Error?e.message:String(e));}
-  };
-  const connect=async()=>{
-    if(busy||!workspace)return;
-    setBusy(true);setError('');
-    try {await openWorkspace(workspace,id=>setPending(id));close();}
-    catch(e){setPending(null);setError(e instanceof Error?e.message:String(e));}
-    finally {setBusy(false);}
-  };
-  return <div className="cg-launcher"><style>{launcherStyle}</style>
-    <button ref={trigger} className="cg-launcher-button" data-compact={!wide} type="button" title="催更姬 · 写作工作台" aria-label="打开催更姬" onClick={open}><BookIcon/>{wide&&<span>催更姬</span>}</button>
-    {error&&!choosing&&<div className="cg-launcher-hint" role="alert">{error}</div>}
-    {choosing&&<dialog ref={dialog} className="cuigengji cg-launcher-dialog" aria-label="打开写作工作台" onCancel={e=>{e.preventDefault();if(!busy)close();}}><style>{styles}</style>
-      <div className="launcher-intro"><img src={avatar} width={76} height={76} alt="催更姬头像"/><div><span>催更姬 · 写作助手</span><h2>故事，从这里开始。</h2></div></div><p className="muted">选择一个 DSH 工作区即可开始，无需先发消息。</p>
-      {workspaces.items.length?<label>工作区<select aria-label="工作区" value={workspace} disabled={busy} onChange={e=>setWorkspace(e.target.value)}>{workspaces.items.map(w=><option key={w.workspaceId} value={w.workspaceId}>{w.title||w.name||w.cwd||w.path||w.workspaceId}</option>)}</select></label>:<p>{workspaces.phase==='ready'?'请先在 DSH 左侧添加一个工作区，然后从这里进入。':'正在读取工作区…'}</p>}
-      {error&&<p role="alert">{error}</p>}<div className="launcher-actions"><button onClick={close} disabled={busy}>取消</button><button className="primary" onClick={connect} disabled={busy||!workspace}>{busy?'正在打开…':'进入工作台'}</button></div>
-    </dialog>}
-  </div>;
-}
+import React, {useEffect, useRef, useState} from 'react';
+import type {SnapshotSelectorHook} from '@deepseek-ai/dsh-client-store';
+import {styles} from './style.ts';
+import avatar from './assets/avatar.png';
+
+interface Workspace {workspaceId:string;title?:string;name?:string;cwd?:string;path?:string}
+interface Props {
+  wide:boolean;
+  useNovelSession:SnapshotSelectorHook<string|undefined>;
+  useNovelWorkspaces:SnapshotSelectorHook<{items:Workspace[];phase:string}>;
+  useSessions:SnapshotSelectorHook<{byId:Record<string,{id:string;retainedBy:{mainView?:number}}>}>;
+  openNovel:(id:string)=>void;
+  revealConversation:()=>void;
+  openWorkspace:(id:string,beforeOpen:(id:string)=>void)=>Promise<void>;
+}
+const launcherStyle=`
+.cg-launcher {position:relative;width:100%;min-width:0;margin:4px 0;}
+.cg-launcher-button {box-sizing:border-box;display:flex;align-items:center;gap:9px;width:100%;min-height:38px;border:1px solid transparent;border-radius:9px;padding:8px 10px;background:transparent;color:var(--dsw-alias-label-primary,#252936);font:500 13px/20px var(--dsw-font-family,system-ui,sans-serif);cursor:pointer;-webkit-app-region:no-drag;transition:background 120ms;}
+.cg-launcher-button:hover {background:var(--dsw-alias-interactive-bg-hover,#4d6bfe10);}
+.cg-launcher-button:focus-visible {outline:2px solid var(--dsw-focus-ring-color,#4d6bfe);outline-offset:-2px;}
+.cg-launcher-button svg {flex:none;color:var(--dsw-alias-label-secondary,#6c7769);}
+.cg-launcher-button[data-compact=true] {width:36px;min-height:36px;justify-content:center;padding:8px;}
+.cg-launcher-hint {position:absolute;bottom:100%;left:0;z-index:100;width:220px;box-sizing:border-box;padding:12px;border:1px solid var(--dsw-alias-border-l1,#dde0e6);border-radius:10px;background:var(--dsw-alias-bg-base,#ffffff);color:var(--dsw-alias-label-primary,#252936);box-shadow:0 8px 24px #0002;font:13px/1.6 system-ui;}
+.cuigengji.cg-launcher-dialog {height:fit-content;min-height:0;padding:24px;width:min(400px,calc(100vw - 32px));max-height:80dvh;border:1px solid var(--cg-line);border-radius:16px;background:var(--cg-paper);box-shadow:0 16px 60px #0003;}
+.cg-launcher-dialog::backdrop {background:#0005;}
+.cg-launcher-dialog h2 {font-size:18px;margin:0 0 8px;}
+.cg-launcher-dialog .launcher-intro {display:flex;align-items:center;gap:18px;margin-bottom:20px;}
+.cg-launcher-dialog .launcher-intro img {display:block;width:76px;height:76px;border-radius:18px;background:#fff;flex:none;}
+.cg-launcher-dialog .launcher-intro span {display:block;font-size:11px;color:var(--cg-accent);margin-bottom:6px;}
+.cg-launcher-dialog .launcher-intro h2 {font-weight:600;line-height:1.5;margin:0;}
+.cg-launcher-dialog>p {line-height:1.8;margin:0 0 20px;}
+.cg-launcher-dialog .launcher-actions {display:flex;justify-content:flex-end;gap:8px;margin-top:20px;}
+`;
+
+export function BookIcon() {
+  return <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.65" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 5.5C9 3.5 5.5 3.5 3 4.5v14c2.5-1 6-1 9 1 3-2 6.5-2 9-1v-14c-2.5-1-6-1-9 1Z"/><path d="M12 5.5v14M6 8h3M15 8h3"/></svg>;
+}
+
+/** Root sidebar entry: independent of message count and the hidden blank-session header. */
+export function Launcher({wide,useNovelSession,useNovelWorkspaces,useSessions,openNovel,revealConversation,openWorkspace}:Props) {
+  const mounted=useNovelSession(value=>value), workspaces=useNovelWorkspaces(value=>value), sessions=useSessions(value=>value);
+  const [choosing,setChoosing]=useState(false), [workspace,setWorkspace]=useState('');
+  const [pending,setPending]=useState<string|null>(null), [busy,setBusy]=useState(false), [error,setError]=useState('');
+  const dialog=useRef<HTMLDialogElement>(null), trigger=useRef<HTMLButtonElement>(null);
+  useEffect(()=>{if(choosing)dialog.current?.showModal();},[choosing]);
+  useEffect(()=>{
+    if(!pending||!mounted)return;
+    setPending(null);
+    if(mounted!==pending)return;
+    try {openNovel(mounted);} catch(e) {setError(e instanceof Error?e.message:String(e));}
+  },[mounted,pending,openNovel]);
+  const close=()=>{dialog.current?.close();setChoosing(false);trigger.current?.focus();};
+  const open=()=>{
+    setError('');
+    try {
+      if(mounted){openNovel(mounted);return;}
+      const selected=Object.values(sessions.byId).find(s=>(s.retainedBy.mainView||0)>0)?.id;
+      if(selected){setPending(selected);revealConversation();return;}
+      setWorkspace(workspaces.items[0]?.workspaceId||'');setChoosing(true);
+    } catch(e) {setError(e instanceof Error?e.message:String(e));}
+  };
+  const connect=async()=>{
+    if(busy||!workspace)return;
+    setBusy(true);setError('');
+    try {await openWorkspace(workspace,id=>setPending(id));close();}
+    catch(e){setPending(null);setError(e instanceof Error?e.message:String(e));}
+    finally {setBusy(false);}
+  };
+  return <div className="cg-launcher"><style>{launcherStyle}</style>
+    <button ref={trigger} className="cg-launcher-button" data-compact={!wide} type="button" title="催更姬 · 写作工作台" aria-label="打开催更姬" onClick={open}><BookIcon/>{wide&&<span>催更姬</span>}</button>
+    {error&&!choosing&&<div className="cg-launcher-hint" role="alert">{error}</div>}
+    {choosing&&<dialog ref={dialog} className="cuigengji cg-launcher-dialog" aria-label="打开写作工作台" onCancel={e=>{e.preventDefault();if(!busy)close();}}><style>{styles}</style>
+      <div className="launcher-intro"><img src={avatar} width={76} height={76} alt="催更姬头像"/><div><span>催更姬 · 写作助手</span><h2>故事，从这里开始。</h2></div></div><p className="muted">选择一个 DSH 工作区即可开始，无需先发消息。</p>
+      {workspaces.items.length?<label>工作区<select aria-label="工作区" value={workspace} disabled={busy} onChange={e=>setWorkspace(e.target.value)}>{workspaces.items.map(w=><option key={w.workspaceId} value={w.workspaceId}>{w.title||w.name||w.cwd||w.path||w.workspaceId}</option>)}</select></label>:<p>{workspaces.phase==='ready'?'请先在 DSH 左侧添加一个工作区，然后从这里进入。':'正在读取工作区…'}</p>}
+      {error&&<p role="alert">{error}</p>}<div className="launcher-actions"><button onClick={close} disabled={busy}>取消</button><button className="primary" onClick={connect} disabled={busy||!workspace}>{busy?'正在打开…':'进入工作台'}</button></div>
+    </dialog>}
+  </div>;
+}

package/src/client/shared/creation.tsx

@@ -1,34 +1,34 @@
-import {DocumentTextarea} from './workspace.tsx';
-import React, {useRef} from 'react';
-import {useDraft} from './state.js';
-import {useDialog} from '../dialog.tsx';
-import {GroupSelect, type GroupItem} from './groups.tsx';
-
-export interface DocumentDraft {title: string; summary: string; content: string; groupId: string | null}
-interface Props {
-  draftKey: string; label: string; initial: DocumentDraft; groups: GroupItem[];
-  busy: boolean; context?: string; chapter?: boolean;
-  close: () => void; createGroup: (name: string) => Promise<GroupItem | null>;
-  save: (value: DocumentDraft, requestId: string) => Promise<boolean | undefined>;
-}
-/** Creation remains local until save. In particular, cancelling a continuation creates no node or edge. */
-export function CreateDocument({draftKey,label,initial,groups,busy,context,chapter,close,createGroup,save}: Props) {
-  const {value,change,accept,dirty,cacheError} = useDraft(draftKey,initial);
-  const request = useRef({payload:'',id:''});
-  const submit = async () => {
-    const payload=JSON.stringify(value);
-    if(request.current.payload!==payload)request.current={payload,id:crypto.randomUUID()};
-    if(await save(value,request.current.id)){accept(initial);close();}
-  };
-  const {ask,confirm} = useDialog();
-  const set = (field: keyof DocumentDraft, next: string | null) => change((old: DocumentDraft)=>({...old,[field]:next}));
-  const cancel = async () => {if(!dirty || await confirm('取消新建并丢弃这份草稿？')) {accept(initial);close();}};
-  return <section className="creation"><header className="creation-bar"><button disabled={busy} onClick={cancel}>‹ 取消</button><span className="grow">{label}</span><button className="primary" disabled={busy||!value.title.trim()} onClick={submit}>创建</button></header>
-    <div className="creation-scroll"><div className="creation-document">{context&&<p className="creation-context">{context}</p>}<div className="creation-settings">
-      {chapter?<label>所属卷<select value={value.groupId||''} onChange={e=>set('groupId',e.target.value||null)}><option value="">未分卷</option>{groups.map(g=><option value={g.id} key={g.id}>{g.name}</option>)}</select></label>:<GroupSelect groups={groups} value={value.groupId} onChange={id=>set('groupId',id)}/>}
-      <button disabled={busy} onClick={async()=>{const name=await ask(chapter?'新卷名称':'新建分组名称');if(name?.trim()){const g=await createGroup(name);if(g)set('groupId',g.id);}}}>＋ {chapter?'新建卷':'新建分组'}</button></div>
-      <fieldset className="editor-fields document-fields" disabled={busy}><label>标题<input autoFocus placeholder="写一个清晰的标题" value={value.title} onChange={e=>set('title',e.target.value)}/></label>
-      {!chapter&&<label><span>摘要 <small>可选</small></span><DocumentTextarea placeholder="用几句话概括，方便之后查找" value={value.summary} onChange={e=>set('summary',e.target.value)}/></label>}
-      <label><span>正文 <small>可选</small></span><DocumentTextarea className="prose" placeholder="从这里开始，自由记录内容…" value={value.content} onChange={e=>set('content',e.target.value)}/></label></fieldset>{cacheError&&<p role="alert">{cacheError}</p>}
-    </div></div></section>;
-}
+import {DocumentTextarea} from './workspace.tsx';
+import React, {useRef} from 'react';
+import {useDraft} from './state.js';
+import {useDialog} from '../dialog.tsx';
+import {GroupSelect, type GroupItem} from './groups.tsx';
+
+export interface DocumentDraft {title: string; summary: string; content: string; groupId: string | null}
+interface Props {
+  draftKey: string; label: string; initial: DocumentDraft; groups: GroupItem[];
+  busy: boolean; context?: string; chapter?: boolean;
+  close: () => void; createGroup: (name: string) => Promise<GroupItem | null>;
+  save: (value: DocumentDraft, requestId: string) => Promise<boolean | undefined>;
+}
+/** Creation remains local until save. In particular, cancelling a continuation creates no node or edge. */
+export function CreateDocument({draftKey,label,initial,groups,busy,context,chapter,close,createGroup,save}: Props) {
+  const {value,change,accept,dirty,cacheError} = useDraft(draftKey,initial);
+  const request = useRef({payload:'',id:''});
+  const submit = async () => {
+    const payload=JSON.stringify(value);
+    if(request.current.payload!==payload)request.current={payload,id:crypto.randomUUID()};
+    if(await save(value,request.current.id)){accept(initial);close();}
+  };
+  const {ask,confirm} = useDialog();
+  const set = (field: keyof DocumentDraft, next: string | null) => change((old: DocumentDraft)=>({...old,[field]:next}));
+  const cancel = async () => {if(!dirty || await confirm('取消新建并丢弃这份草稿？')) {accept(initial);close();}};
+  return <section className="creation"><header className="creation-bar"><button disabled={busy} onClick={cancel}>‹ 取消</button><span className="grow">{label}</span><button className="primary" disabled={busy||!value.title.trim()} onClick={submit}>创建</button></header>
+    <div className="creation-scroll"><div className="creation-document">{context&&<p className="creation-context">{context}</p>}<div className="creation-settings">
+      {chapter?<label>所属卷<select value={value.groupId||''} onChange={e=>set('groupId',e.target.value||null)}><option value="">未分卷</option>{groups.map(g=><option value={g.id} key={g.id}>{g.name}</option>)}</select></label>:<GroupSelect groups={groups} value={value.groupId} onChange={id=>set('groupId',id)}/>}
+      <button disabled={busy} onClick={async()=>{const name=await ask(chapter?'新卷名称':'新建分组名称');if(name?.trim()){const g=await createGroup(name);if(g)set('groupId',g.id);}}}>＋ {chapter?'新建卷':'新建分组'}</button></div>
+      <fieldset className="editor-fields document-fields" disabled={busy}><label>标题<input autoFocus placeholder="写一个清晰的标题" value={value.title} onChange={e=>set('title',e.target.value)}/></label>
+      {!chapter&&<label><span>摘要 <small>可选</small></span><DocumentTextarea placeholder="用几句话概括，方便之后查找" value={value.summary} onChange={e=>set('summary',e.target.value)}/></label>}
+      <label><span>正文 <small>可选</small></span><DocumentTextarea className="prose" placeholder="从这里开始，自由记录内容…" value={value.content} onChange={e=>set('content',e.target.value)}/></label></fieldset>{cacheError&&<p role="alert">{cacheError}</p>}
+    </div></div></section>;
+}

package/src/client/shared/detail-page.tsx

@@ -1,61 +1,61 @@
-import React, {createContext, useContext, useLayoutEffect, useRef, useState} from 'react';
-import {createPortal} from 'react-dom';
-
-/** Keep the overview mounted for canvas state, but remove it from layout and focus. */
-export function OverviewPage({active, children}: {active:boolean; children:React.ReactNode}) {
-  const root = useRef<HTMLDivElement>(null);
-  const positions = useRef(new Map<HTMLElement, {top:number; left:number}>());
-  const focus = useRef<HTMLElement | null>(null);
-  const wasActive = useRef(active);
-  useLayoutEffect(() => {
-    if (active && !wasActive.current) {
-      positions.current.forEach((position, element) => {
-        if (root.current?.contains(element)) element.scrollTo(position.left, position.top);
-        else positions.current.delete(element);
-      });
-      if (focus.current && root.current?.contains(focus.current)) focus.current.focus({preventScroll:true});
-    }
-    wasActive.current = active;
-  }, [active]);
-  return <div ref={root} className="overview-page" hidden={!active}
-    onFocusCapture={event => {focus.current = event.target as HTMLElement;}}
-    onScrollCapture={event => {
-      if (!active) return;
-      const element = event.target as HTMLElement;
-      positions.current.set(element, {top:element.scrollTop, left:element.scrollLeft});
-    }}>{children}</div>;
-}
-
-/** Related entries form a back trail; the last entry remains highlighted in overview. */
-export function useDetailTrail(current:string | null) {
-  const [trail, setTrail] = useState<string[]>([]);
-  const [lastOpened, setLastOpened] = useState(current);
-  return {
-    previous: trail.at(-1), lastOpened,
-    visit(id:string) {
-      if (current && current !== id) setTrail(items => [...items, current]);
-      setLastOpened(id);
-    },
-    back(id:string) {setTrail(items => items.slice(0, -1)); setLastOpened(id);},
-    clear() {setTrail([]);},
-  };
-}
-
-const ActionSlot = createContext<HTMLDivElement | null>(null);
-export function DetailActions({children}: {children:React.ReactNode}) {
-  const slot = useContext(ActionSlot);
-  return slot ? createPortal(children, slot) : null;
-}
-
-/** Navigation and edit controls stay outside the single scrolling document. */
-export function DetailPage({className, backLabel, onBack, children}: {
-  className:string; backLabel:string; onBack:()=>void; children:React.ReactNode;
-}) {
-  const [slot, setSlot] = useState<HTMLDivElement | null>(null);
-  const back = useRef<HTMLButtonElement>(null);
-  useLayoutEffect(() => {back.current?.focus({preventScroll:true});}, []);
-  return <section className={`detail-page ${className}`} aria-label="条目详情">
-    <header className="detail-bar"><button ref={back} className="detail-back" onClick={onBack}>{backLabel}</button><div className="detail-actions" ref={setSlot}/></header>
-    <div className="detail-scroll"><div className="detail-document"><ActionSlot.Provider value={slot}>{children}</ActionSlot.Provider></div></div>
-  </section>;
-}
+import React, {createContext, useContext, useLayoutEffect, useRef, useState} from 'react';
+import {createPortal} from 'react-dom';
+
+/** Keep the overview mounted for canvas state, but remove it from layout and focus. */
+export function OverviewPage({active, children}: {active:boolean; children:React.ReactNode}) {
+  const root = useRef<HTMLDivElement>(null);
+  const positions = useRef(new Map<HTMLElement, {top:number; left:number}>());
+  const focus = useRef<HTMLElement | null>(null);
+  const wasActive = useRef(active);
+  useLayoutEffect(() => {
+    if (active && !wasActive.current) {
+      positions.current.forEach((position, element) => {
+        if (root.current?.contains(element)) element.scrollTo(position.left, position.top);
+        else positions.current.delete(element);
+      });
+      if (focus.current && root.current?.contains(focus.current)) focus.current.focus({preventScroll:true});
+    }
+    wasActive.current = active;
+  }, [active]);
+  return <div ref={root} className="overview-page" hidden={!active}
+    onFocusCapture={event => {focus.current = event.target as HTMLElement;}}
+    onScrollCapture={event => {
+      if (!active) return;
+      const element = event.target as HTMLElement;
+      positions.current.set(element, {top:element.scrollTop, left:element.scrollLeft});
+    }}>{children}</div>;
+}
+
+/** Related entries form a back trail; the last entry remains highlighted in overview. */
+export function useDetailTrail(current:string | null) {
+  const [trail, setTrail] = useState<string[]>([]);
+  const [lastOpened, setLastOpened] = useState(current);
+  return {
+    previous: trail.at(-1), lastOpened,
+    visit(id:string) {
+      if (current && current !== id) setTrail(items => [...items, current]);
+      setLastOpened(id);
+    },
+    back(id:string) {setTrail(items => items.slice(0, -1)); setLastOpened(id);},
+    clear() {setTrail([]);},
+  };
+}
+
+const ActionSlot = createContext<HTMLDivElement | null>(null);
+export function DetailActions({children}: {children:React.ReactNode}) {
+  const slot = useContext(ActionSlot);
+  return slot ? createPortal(children, slot) : null;
+}
+
+/** Navigation and edit controls stay outside the single scrolling document. */
+export function DetailPage({className, backLabel, onBack, children}: {
+  className:string; backLabel:string; onBack:()=>void; children:React.ReactNode;
+}) {
+  const [slot, setSlot] = useState<HTMLDivElement | null>(null);
+  const back = useRef<HTMLButtonElement>(null);
+  useLayoutEffect(() => {back.current?.focus({preventScroll:true});}, []);
+  return <section className={`detail-page ${className}`} aria-label="条目详情">
+    <header className="detail-bar"><button ref={back} className="detail-back" onClick={onBack}>{backLabel}</button><div className="detail-actions" ref={setSlot}/></header>
+    <div className="detail-scroll"><div className="detail-document"><ActionSlot.Provider value={slot}>{children}</ActionSlot.Provider></div></div>
+  </section>;
+}

package/src/client/shared/drafts.js

@@ -1,17 +1,17 @@
-export const draftKey = (scope, entity) => `cuigengji:draft:v2:${scope}:${entity}`;
-export const changed = state => JSON.stringify(state.value) !== JSON.stringify(state.base);
-export function restoreDraft(storage, key, initial) {
-  try {
-    const cached = JSON.parse(storage.getItem(key));
-    if (cached && cached.base && cached.value && typeof cached.base === 'object' && typeof cached.value === 'object'
-        && Number.isSafeInteger(cached.base.revision ?? 0)) return cached;
-  } catch {}
-  return { base: initial, value: initial };
-}
-export function persistDraft(storage, key, state) {
-  if (changed(state)) storage.setItem(key, JSON.stringify(state));
-  else storage.removeItem(key);
-}
-export function rebaseDraft(state, server) {
-  return { base: server, value: { ...server, ...state.value, revision: server.revision, contentHash: server.contentHash } };
-}
+export const draftKey = (scope, entity) => `cuigengji:draft:v2:${scope}:${entity}`;
+export const changed = state => JSON.stringify(state.value) !== JSON.stringify(state.base);
+export function restoreDraft(storage, key, initial) {
+  try {
+    const cached = JSON.parse(storage.getItem(key));
+    if (cached && cached.base && cached.value && typeof cached.base === 'object' && typeof cached.value === 'object'
+        && Number.isSafeInteger(cached.base.revision ?? 0)) return cached;
+  } catch {}
+  return { base: initial, value: initial };
+}
+export function persistDraft(storage, key, state) {
+  if (changed(state)) storage.setItem(key, JSON.stringify(state));
+  else storage.removeItem(key);
+}
+export function rebaseDraft(state, server) {
+  return { base: server, value: { ...server, ...state.value, revision: server.revision, contentHash: server.contentHash } };
+}

package/src/client/shared/evidence.jsx

@@ -1,11 +1,11 @@
-import React,{useState} from 'react';
-import {useResource} from './state.js';
-import {ResourceState} from './ui.jsx';
-export function ChapterEvidence({call,novelId,source,title,onChapter}) {
- const [open,setOpen]=useState(false);
- return <section className="source-row"><span>{title||'已删除或缺失章节'} · 引用版本{source.revision}</span><button onClick={()=>setOpen(!open)}>{open?'收起引用正文':'查看引用版本'}</button><button onClick={()=>onChapter?.(source.chapterId)}>打开当前正文</button>{open&&<Version {...{call,novelId,source}}/>}</section>;
-}
-function Version({call,novelId,source}) {
- const resource=useResource(()=>call('chapter.history',{novelId,chapterId:source.chapterId,includeContent:true}).then(versions=>{const value=versions.find(v=>v.revision===source.revision);if(!value)throw new Error('引用版本不存在');return value;}),[call,novelId,source.chapterId,source.revision]);
- return <ResourceState resource={resource}>{resource.value&&<pre aria-label="引用的历史正文">{resource.value.content}</pre>}</ResourceState>;
-}
+import React,{useState} from 'react';
+import {useResource} from './state.js';
+import {ResourceState} from './ui.jsx';
+export function ChapterEvidence({call,novelId,source,title,onChapter}) {
+ const [open,setOpen]=useState(false);
+ return <section className="source-row"><span>{title||'已删除或缺失章节'} · 引用版本{source.revision}</span><button onClick={()=>setOpen(!open)}>{open?'收起引用正文':'查看引用版本'}</button><button onClick={()=>onChapter?.(source.chapterId)}>打开当前正文</button>{open&&<Version {...{call,novelId,source}}/>}</section>;
+}
+function Version({call,novelId,source}) {
+ const resource=useResource(()=>call('chapter.history',{novelId,chapterId:source.chapterId,includeContent:true}).then(versions=>{const value=versions.find(v=>v.revision===source.revision);if(!value)throw new Error('引用版本不存在');return value;}),[call,novelId,source.chapterId,source.revision]);
+ return <ResourceState resource={resource}>{resource.value&&<pre aria-label="引用的历史正文">{resource.value.content}</pre>}</ResourceState>;
+}

package/src/client/shared/groups.tsx

@@ -1,34 +1,34 @@
-import React from 'react';
-import { useDialog } from '../dialog.tsx';
-import type { Group } from '../../domain/memory/groups.ts';
-import {FilterControl} from './workspace.tsx';
-
-export type GroupItem = Pick<Group, 'id' | 'name' | 'summary' | 'revision'>;
-interface Props {
-  groups: GroupItem[];
-  value: string;
-  onChange: (value: string) => void;
-  prefix: 'planning' | 'graph';
-  novelId: string;
-  busy: boolean;
-  call: (action: string, args: Record<string, unknown>) => Promise<unknown>;
-  run: (task: () => Promise<unknown>) => unknown;
-}
-export const filterGroup = (value: string): string | null | undefined => value === '__ungrouped' ? null : value || undefined;
-export function GroupSelect({ groups, value, onChange }: { groups: GroupItem[]; value?: string | null; onChange: (id: string | null) => void }) {
-  return <label>分组<select value={value || ''} onChange={e => onChange(e.target.value || null)}><option value="">未分组</option>{groups.map(g => <option key={g.id} value={g.id}>{g.name}</option>)}</select></label>;
-}
-export function Groups({ groups, value, onChange, prefix, novelId, busy, call, run }: Props) {
-  const { ask, confirm } = useDialog();
-  const selected = groups.find(g => g.id === value);
-  const mutate = (action: string, args: Record<string, unknown>) => call(`${prefix}.group.${action}`, { novelId, requestId: crypto.randomUUID(), ...args });
-  return <div className="group-toolbar">
-    <FilterControl label={prefix === 'planning' ? '规划分组' : '设定分组'} value={value} change={onChange}><option value="">全部分组</option><option value="__ungrouped">未分组</option>{groups.map(g => <option key={g.id} value={g.id}>{g.name}</option>)}</FilterControl>
-    <button className="group-new" disabled={busy} onClick={async () => { const name = await ask('新建分组名称'); if (name?.trim()) run(async () => { const group = await mutate('create', { name }) as GroupItem; onChange(group.id); }); }}>＋ 新建分组</button>
-    {selected && <details className="menu"><summary aria-label="管理分组">···</summary><div className="menu-panel">
-      {selected && <><button disabled={busy} onClick={async () => { const name = await ask('分组名称', selected.name); if (name?.trim()) run(() => mutate('update', { groupId: selected.id, expectedRevision: selected.revision, name })); }}>重命名</button>
-        <button disabled={busy} onClick={async () => { const summary = await ask('分组描述', selected.summary); if (summary !== null) run(() => mutate('update', { groupId: selected.id, expectedRevision: selected.revision, summary })); }}>编辑描述</button>
-        <button className="danger" disabled={busy} onClick={async () => { if (await confirm(`删除分组“${selected.name}”？内容将保留在未分组中。`)) run(async () => { await mutate('delete', { groupId: selected.id, expectedRevision: selected.revision, confirm: true }); onChange('__ungrouped'); }); }}>删除分组</button></>}
-    </div></details>}
-  </div>;
-}
+import React from 'react';
+import { useDialog } from '../dialog.tsx';
+import type { Group } from '../../domain/memory/groups.ts';
+import {FilterControl} from './workspace.tsx';
+
+export type GroupItem = Pick<Group, 'id' | 'name' | 'summary' | 'revision'>;
+interface Props {
+  groups: GroupItem[];
+  value: string;
+  onChange: (value: string) => void;
+  prefix: 'planning' | 'graph';
+  novelId: string;
+  busy: boolean;
+  call: (action: string, args: Record<string, unknown>) => Promise<unknown>;
+  run: (task: () => Promise<unknown>) => unknown;
+}
+export const filterGroup = (value: string): string | null | undefined => value === '__ungrouped' ? null : value || undefined;
+export function GroupSelect({ groups, value, onChange }: { groups: GroupItem[]; value?: string | null; onChange: (id: string | null) => void }) {
+  return <label>分组<select value={value || ''} onChange={e => onChange(e.target.value || null)}><option value="">未分组</option>{groups.map(g => <option key={g.id} value={g.id}>{g.name}</option>)}</select></label>;
+}
+export function Groups({ groups, value, onChange, prefix, novelId, busy, call, run }: Props) {
+  const { ask, confirm } = useDialog();
+  const selected = groups.find(g => g.id === value);
+  const mutate = (action: string, args: Record<string, unknown>) => call(`${prefix}.group.${action}`, { novelId, requestId: crypto.randomUUID(), ...args });
+  return <div className="group-toolbar">
+    <FilterControl label={prefix === 'planning' ? '规划分组' : '设定分组'} value={value} change={onChange}><option value="">全部分组</option><option value="__ungrouped">未分组</option>{groups.map(g => <option key={g.id} value={g.id}>{g.name}</option>)}</FilterControl>
+    <button className="group-new" disabled={busy} onClick={async () => { const name = await ask('新建分组名称'); if (name?.trim()) run(async () => { const group = await mutate('create', { name }) as GroupItem; onChange(group.id); }); }}>＋ 新建分组</button>
+    {selected && <details className="menu"><summary aria-label="管理分组">···</summary><div className="menu-panel">
+      {selected && <><button disabled={busy} onClick={async () => { const name = await ask('分组名称', selected.name); if (name?.trim()) run(() => mutate('update', { groupId: selected.id, expectedRevision: selected.revision, name })); }}>重命名</button>
+        <button disabled={busy} onClick={async () => { const summary = await ask('分组描述', selected.summary); if (summary !== null) run(() => mutate('update', { groupId: selected.id, expectedRevision: selected.revision, summary })); }}>编辑描述</button>
+        <button className="danger" disabled={busy} onClick={async () => { if (await confirm(`删除分组“${selected.name}”？内容将保留在未分组中。`)) run(async () => { await mutate('delete', { groupId: selected.id, expectedRevision: selected.revision, confirm: true }); onChange('__ungrouped'); }); }}>删除分组</button></>}
+    </div></details>}
+  </div>;
+}