dsh-cuigengji-plugin 0.4.2 → 0.4.4

package/src/client/shared/preferences.tsx

@@ -1,104 +1,104 @@
-import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
-import manifest from '../../../package.json' with { type: 'json' };
-import aboutSticker from '../assets/haoye.png';
-
-export interface Preferences {
-  fontSize: number; leading: number; directory: boolean;
-  planningView: 'canvas' | 'list'; memoryView: 'canvas' | 'list'; motion: 'system' | 'reduce';
-}
-export const defaults: Preferences = { fontSize: 18, leading: 1.95, directory: true, planningView: 'canvas', memoryView: 'list', motion: 'system' };
-const key = 'cuigengji:workbench:preferences:v1';
-function read(): Preferences {
-  try {
-    const p = JSON.parse(localStorage.getItem(key) || '{}');
-    return {fontSize: [16,18,20,22].includes(p.fontSize) ? p.fontSize : defaults.fontSize,
-      leading: [1.7,1.95,2.2].includes(p.leading) ? p.leading : defaults.leading,
-      directory: typeof p.directory === 'boolean' ? p.directory : defaults.directory,
-      planningView: p.planningView === 'list' ? 'list' : 'canvas', memoryView: p.memoryView === 'canvas' ? 'canvas' : 'list',
-      motion: p.motion === 'reduce' ? 'reduce' : 'system'};
-  } catch { return defaults; }
-}
-const Context = createContext({ preferences: defaults, update: (_: Partial<Preferences>) => {}, error: '' });
-export const useWorkbenchPreferences = () => useContext(Context);
-export function PreferencesProvider({children}: {children: React.ReactNode}) {
-  const [preferences, set] = useState(read), [error, setError] = useState('');
-  const update = (next: Partial<Preferences>) => set(previous => {
-    const value = {...previous, ...next};
-    try {localStorage.setItem(key, JSON.stringify(value)); setError('');}
-    catch {setError('当前浏览器无法保存偏好，本次会话仍然生效。');}
-    return value;
-  });
-  useEffect(() => {const sync = (e: StorageEvent) => {if(e.key === key) set(read());}; window.addEventListener('storage', sync); return () => window.removeEventListener('storage', sync);}, []);
-  return <Context.Provider value={{preferences, update, error}}>{children}</Context.Provider>;
-}
-export function Modal({title, close, children, className = ''}: {title: string; close: () => void; children: React.ReactNode; className?: string}) {
-  const ref = useRef<HTMLDialogElement>(null);
-  useEffect(() => {const previous = document.activeElement as HTMLElement | null; ref.current?.showModal(); return () => {previous?.focus();};}, []);
-  return <dialog className={`utility-modal ${className}`} ref={ref} aria-label={title} onCancel={e => {e.preventDefault();close();}}>
-    <header className="utility-head"><h2>{title}</h2><button type="button" aria-label={`关闭${title}`} onClick={close}>×</button></header>
-    <div className="utility-content">{children}</div>
-  </dialog>;
-}
-export function PreferencesDialog({close, novelTitle, onPreset}: {close: () => void; novelTitle?: string; onPreset?: () => void}) {
-  const {preferences:p, update, error} = useWorkbenchPreferences();
-  return <Modal title="设置" close={close}>
-    {onPreset && <section className="preference-section"><div className="preference-work-heading"><h3>当前作品</h3><small title={novelTitle}>{novelTitle}</small></div><button className="preference-action" onClick={onPreset} aria-label="写作预设"><span><strong>写作预设</strong><small>叙述风格、表达习惯，以及希望 AI 遵守的写作要求</small></span><span aria-hidden="true">›</span></button></section>}
-    <section className="preference-section"><h3>正文显示</h3><div className="split">
-    <label>字号<select aria-label="默认正文字号" value={p.fontSize} onChange={e=>update({fontSize:Number(e.target.value)})}>{[16,18,20,22].map(n=><option key={n} value={n}>{n}</option>)}</select></label>
-    <label>行距<select aria-label="正文行距" value={p.leading} onChange={e=>update({leading:Number(e.target.value)})}><option value={1.7}>紧凑</option><option value={1.95}>适中</option><option value={2.2}>宽松</option></select></label></div>
-    <div className="reading-preview"><small>阅读预览</small><p style={{fontSize:p.fontSize,lineHeight:p.leading}}>雨停以后，街道重新安静下来。窗边的灯仍亮着，故事还在继续。</p></div></section>
-    <section className="preference-section"><h3>打开工作台时</h3><label className="preference-row">默认展开目录<input type="checkbox" checked={p.directory} onChange={e=>update({directory:e.target.checked})}/></label>
-      <label className="preference-row">规划默认视图<select value={p.planningView} onChange={e=>update({planningView:e.target.value as Preferences['planningView']})}><option value="canvas">流程图</option><option value="list">列表</option></select></label>
-      <label className="preference-row">设定默认视图<select value={p.memoryView} onChange={e=>update({memoryView:e.target.value as Preferences['memoryView']})}><option value="list">列表</option><option value="canvas">关系图</option></select></label><p className="muted">下次进入对应页面时生效。</p></section>
-    <section className="preference-section"><label className="preference-row">动画效果<select value={p.motion} onChange={e=>update({motion:e.target.value as Preferences['motion']})}><option value="system">跟随系统</option><option value="reduce">减少动态效果</option></select></label></section>
-    <footer className="utility-footer"><button onClick={()=>update(defaults)}>恢复默认设置</button><small role="status">{error || '偏好自动保存在此浏览器'}</small></footer>
-  </Modal>;
-}
-export function ProseDisplay() {
-  const {preferences:p, update} = useWorkbenchPreferences();
-  return <details className="menu prose-display"><summary aria-label="正文显示设置"><span aria-hidden="true">Aa</span>显示</summary><div className="menu-panel">
-    <label>字号<select aria-label="正文字号" value={p.fontSize} onChange={event=>update({fontSize:Number(event.target.value)})}>{[16,18,20,22].map(value=><option key={value} value={value}>{value}</option>)}</select></label>
-    <label>行距<select aria-label="当前正文行距" value={p.leading} onChange={event=>update({leading:Number(event.target.value)})}><option value={1.7}>紧凑</option><option value={1.95}>适中</option><option value={2.2}>宽松</option></select></label>
-  </div></details>;
-}
-export function AboutDialog({close}: {close: () => void}) {
-  const [copyStatus, setCopyStatus] = useState('');
-  const groupNumber = useRef<HTMLElement>(null);
-  const copyGroup = async () => {
-    try {
-      await navigator.clipboard.writeText('1026457465');
-      setCopyStatus('群号已复制');
-    } catch {
-      const selection = window.getSelection();
-      if (groupNumber.current && selection) {
-        const range = document.createRange();
-        range.selectNodeContents(groupNumber.current);
-        selection.removeAllRanges(); selection.addRange(range);
-      }
-      setCopyStatus('可选中群号，按 Ctrl+C 复制。');
-    }
-  };
-  return <Modal title="关于催更姬" close={close} className="about-modal">
-    <section className="about-overview">
-      <div>
-        <div className="about-identity"><h2>催更姬</h2><span className="about-version">v{manifest.version}</span></div>
-        <p className="about-tagline">让大肥鱼成为你的小说写作助手。</p>
-      </div>
-      <img className="about-sticker" src={aboutSticker} width={384} height={384} alt="好耶！紫发少女的欢呼贴纸"/>
-      <p className="about-description">为 DSH 打造的小说写作插件。把正文、情节规划、人物与世界设定放在同一个工作台，让你和 AI 一起讨论、整理并推进故事。</p>
-    </section>
-    <div className="about-contacts" aria-label="交流与支持">
-      <button type="button" className="about-contact" onClick={copyGroup} aria-label="复制交流群号 1026457465" title="复制群号">
-        <span className="about-contact-label">交流群</span><strong ref={groupNumber}>1026457465</strong><span className="about-contact-mark" aria-hidden="true">{copyStatus === '群号已复制' ? '✓' : '⧉'}</span>
-      </button>
-      <a className="about-contact" href="https://ifdian.net/a/cuigengji" target="_blank" rel="noopener noreferrer">
-        <span className="about-contact-label">爱发电</span><strong>支持催更姬</strong><span className="about-contact-mark" aria-hidden="true">↗</span>
-      </a>
-      <a className="about-contact" href="https://github.com/mistnest/dsh-cuigengji-plugin" target="_blank" rel="noopener noreferrer">
-        <span className="about-contact-label">GitHub</span><strong>查看开源项目</strong><span className="about-contact-mark" aria-hidden="true">↗</span>
-      </a>
-    </div>
-    <p className="about-copy-status" role="status">{copyStatus}</p>
-    <footer className="about-welcome"><p>欢迎交流、合作与投喂。</p><p>每一份支持都会化作开发所需的 Token，让催更姬更新得更快一点。</p></footer>
-  </Modal>;
-}
+import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
+import manifest from '../../../package.json' with { type: 'json' };
+import aboutSticker from '../assets/haoye.png';
+
+export interface Preferences {
+  fontSize: number; leading: number; directory: boolean;
+  planningView: 'canvas' | 'list'; memoryView: 'canvas' | 'list'; motion: 'system' | 'reduce';
+}
+export const defaults: Preferences = { fontSize: 18, leading: 1.95, directory: true, planningView: 'canvas', memoryView: 'list', motion: 'system' };
+const key = 'cuigengji:workbench:preferences:v1';
+function read(): Preferences {
+  try {
+    const p = JSON.parse(localStorage.getItem(key) || '{}');
+    return {fontSize: [16,18,20,22].includes(p.fontSize) ? p.fontSize : defaults.fontSize,
+      leading: [1.7,1.95,2.2].includes(p.leading) ? p.leading : defaults.leading,
+      directory: typeof p.directory === 'boolean' ? p.directory : defaults.directory,
+      planningView: p.planningView === 'list' ? 'list' : 'canvas', memoryView: p.memoryView === 'canvas' ? 'canvas' : 'list',
+      motion: p.motion === 'reduce' ? 'reduce' : 'system'};
+  } catch { return defaults; }
+}
+const Context = createContext({ preferences: defaults, update: (_: Partial<Preferences>) => {}, error: '' });
+export const useWorkbenchPreferences = () => useContext(Context);
+export function PreferencesProvider({children}: {children: React.ReactNode}) {
+  const [preferences, set] = useState(read), [error, setError] = useState('');
+  const update = (next: Partial<Preferences>) => set(previous => {
+    const value = {...previous, ...next};
+    try {localStorage.setItem(key, JSON.stringify(value)); setError('');}
+    catch {setError('当前浏览器无法保存偏好，本次会话仍然生效。');}
+    return value;
+  });
+  useEffect(() => {const sync = (e: StorageEvent) => {if(e.key === key) set(read());}; window.addEventListener('storage', sync); return () => window.removeEventListener('storage', sync);}, []);
+  return <Context.Provider value={{preferences, update, error}}>{children}</Context.Provider>;
+}
+export function Modal({title, close, children, className = ''}: {title: string; close: () => void; children: React.ReactNode; className?: string}) {
+  const ref = useRef<HTMLDialogElement>(null);
+  useEffect(() => {const previous = document.activeElement as HTMLElement | null; ref.current?.showModal(); return () => {previous?.focus();};}, []);
+  return <dialog className={`utility-modal ${className}`} ref={ref} aria-label={title} onCancel={e => {e.preventDefault();close();}}>
+    <header className="utility-head"><h2>{title}</h2><button type="button" aria-label={`关闭${title}`} onClick={close}>×</button></header>
+    <div className="utility-content">{children}</div>
+  </dialog>;
+}
+export function PreferencesDialog({close, novelTitle, onPreset}: {close: () => void; novelTitle?: string; onPreset?: () => void}) {
+  const {preferences:p, update, error} = useWorkbenchPreferences();
+  return <Modal title="设置" close={close}>
+    {onPreset && <section className="preference-section"><div className="preference-work-heading"><h3>当前作品</h3><small title={novelTitle}>{novelTitle}</small></div><button className="preference-action" onClick={onPreset} aria-label="写作预设"><span><strong>写作预设</strong><small>叙述风格、表达习惯，以及希望 AI 遵守的写作要求</small></span><span aria-hidden="true">›</span></button></section>}
+    <section className="preference-section"><h3>正文显示</h3><div className="split">
+    <label>字号<select aria-label="默认正文字号" value={p.fontSize} onChange={e=>update({fontSize:Number(e.target.value)})}>{[16,18,20,22].map(n=><option key={n} value={n}>{n}</option>)}</select></label>
+    <label>行距<select aria-label="正文行距" value={p.leading} onChange={e=>update({leading:Number(e.target.value)})}><option value={1.7}>紧凑</option><option value={1.95}>适中</option><option value={2.2}>宽松</option></select></label></div>
+    <div className="reading-preview"><small>阅读预览</small><p style={{fontSize:p.fontSize,lineHeight:p.leading}}>雨停以后，街道重新安静下来。窗边的灯仍亮着，故事还在继续。</p></div></section>
+    <section className="preference-section"><h3>打开工作台时</h3><label className="preference-row">默认展开目录<input type="checkbox" checked={p.directory} onChange={e=>update({directory:e.target.checked})}/></label>
+      <label className="preference-row">规划默认视图<select value={p.planningView} onChange={e=>update({planningView:e.target.value as Preferences['planningView']})}><option value="canvas">流程图</option><option value="list">列表</option></select></label>
+      <label className="preference-row">设定默认视图<select value={p.memoryView} onChange={e=>update({memoryView:e.target.value as Preferences['memoryView']})}><option value="list">列表</option><option value="canvas">关系图</option></select></label><p className="muted">下次进入对应页面时生效。</p></section>
+    <section className="preference-section"><label className="preference-row">动画效果<select value={p.motion} onChange={e=>update({motion:e.target.value as Preferences['motion']})}><option value="system">跟随系统</option><option value="reduce">减少动态效果</option></select></label></section>
+    <footer className="utility-footer"><button onClick={()=>update(defaults)}>恢复默认设置</button><small role="status">{error || '偏好自动保存在此浏览器'}</small></footer>
+  </Modal>;
+}
+export function ProseDisplay() {
+  const {preferences:p, update} = useWorkbenchPreferences();
+  return <details className="menu prose-display"><summary aria-label="正文显示设置"><span aria-hidden="true">Aa</span>显示</summary><div className="menu-panel">
+    <label>字号<select aria-label="正文字号" value={p.fontSize} onChange={event=>update({fontSize:Number(event.target.value)})}>{[16,18,20,22].map(value=><option key={value} value={value}>{value}</option>)}</select></label>
+    <label>行距<select aria-label="当前正文行距" value={p.leading} onChange={event=>update({leading:Number(event.target.value)})}><option value={1.7}>紧凑</option><option value={1.95}>适中</option><option value={2.2}>宽松</option></select></label>
+  </div></details>;
+}
+export function AboutDialog({close}: {close: () => void}) {
+  const [copyStatus, setCopyStatus] = useState('');
+  const groupNumber = useRef<HTMLElement>(null);
+  const copyGroup = async () => {
+    try {
+      await navigator.clipboard.writeText('1026457465');
+      setCopyStatus('群号已复制');
+    } catch {
+      const selection = window.getSelection();
+      if (groupNumber.current && selection) {
+        const range = document.createRange();
+        range.selectNodeContents(groupNumber.current);
+        selection.removeAllRanges(); selection.addRange(range);
+      }
+      setCopyStatus('可选中群号，按 Ctrl+C 复制。');
+    }
+  };
+  return <Modal title="关于催更姬" close={close} className="about-modal">
+    <section className="about-overview">
+      <div>
+        <div className="about-identity"><h2>催更姬</h2><span className="about-version">v{manifest.version}</span></div>
+        <p className="about-tagline">让大肥鱼成为你的小说写作助手。</p>
+      </div>
+      <img className="about-sticker" src={aboutSticker} width={384} height={384} alt="好耶！紫发少女的欢呼贴纸"/>
+      <p className="about-description">为 DSH 打造的小说写作插件。把正文、情节规划、人物与世界设定放在同一个工作台，让你和 AI 一起讨论、整理并推进故事。</p>
+    </section>
+    <div className="about-contacts" aria-label="交流与支持">
+      <button type="button" className="about-contact" onClick={copyGroup} aria-label="复制交流群号 1026457465" title="复制群号">
+        <span className="about-contact-label">交流群</span><strong ref={groupNumber}>1026457465</strong><span className="about-contact-mark" aria-hidden="true">{copyStatus === '群号已复制' ? '✓' : '⧉'}</span>
+      </button>
+      <a className="about-contact" href="https://ifdian.net/a/cuigengji" target="_blank" rel="noopener noreferrer">
+        <span className="about-contact-label">爱发电</span><strong>支持催更姬</strong><span className="about-contact-mark" aria-hidden="true">↗</span>
+      </a>
+      <a className="about-contact" href="https://github.com/mistnest/dsh-cuigengji-plugin" target="_blank" rel="noopener noreferrer">
+        <span className="about-contact-label">GitHub</span><strong>查看开源项目</strong><span className="about-contact-mark" aria-hidden="true">↗</span>
+      </a>
+    </div>
+    <p className="about-copy-status" role="status">{copyStatus}</p>
+    <footer className="about-welcome"><p>欢迎交流、合作与投喂。</p><p>每一份支持都会化作开发所需的 Token，让催更姬更新得更快一点。</p></footer>
+  </Modal>;
+}

package/src/client/shared/select-style.ts

@@ -1,25 +1,25 @@
-/** Native customizable selects keep form, keyboard and accessibility semantics. */
-export const selectStyles = `
-.cuigengji select {cursor:pointer;min-height:34px;line-height:1.4;background-color:var(--cg-paper);}
-.cuigengji select:disabled {cursor:default;opacity:.5;}
-.cuigengji select:not(:disabled):hover {border-color:color-mix(in srgb,var(--cg-accent) 45%,var(--cg-line));}
-.cuigengji select option {font:inherit;background:var(--cg-paper);color:var(--cg-ink);}
-@supports (appearance:base-select) {
-  .cuigengji select,.cuigengji select::picker(select) {appearance:base-select;}
-  .cuigengji select {display:inline-flex;align-items:center;gap:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
-  .cuigengji select::picker-icon {content:'';width:10px;height:6px;border:0;background:currentColor;clip-path:polygon(0 0,50% 65%,100% 0,100% 35%,50% 100%,0 35%);rotate:0deg;flex:none;margin:0 1px 0 auto;opacity:.6;transition:rotate 120ms;}
-  .cuigengji select:open::picker-icon {rotate:180deg;}
-  .cuigengji select::picker(select) {font:400 13px/1.5 var(--dsw-font-family,system-ui,'Microsoft YaHei',sans-serif);color:var(--cg-ink);background:var(--cg-paper);border:1px solid var(--cg-line);border-radius:12px;padding:5px;margin-block:6px;min-width:anchor-size(width);max-width:calc(100vw - 24px);max-height:min(320px,60dvh);box-shadow:0 8px 28px #0000001c,0 2px 6px #0000000a;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;}
-  .cuigengji select option {display:flex;align-items:center;gap:12px;min-height:36px;padding:8px 12px;border-radius:7px;white-space:normal;overflow-wrap:anywhere;cursor:pointer;}
-  .cuigengji select option:checked {color:var(--cg-accent);background:var(--cg-wash);font-weight:600;}
-  .cuigengji select option:hover,.cuigengji select option:focus {background:color-mix(in srgb,var(--cg-accent) 12%,var(--cg-paper));outline:none;}
-  .cuigengji select option::checkmark {order:2;margin-left:auto;color:var(--cg-accent);font-size:12px;}
-  .cuigengji select option:disabled {opacity:.45;cursor:default;}
-  .cuigengji .filter-control select {appearance:base-select;padding-right:2px;min-height:0;}
-  .cuigengji .filter-chevron {display:none;}
-  .cuigengji .book-picker {padding:7px 10px;border:1px solid transparent;border-radius:8px;background:transparent;font-weight:600;}
-  .cuigengji .book-picker:hover,.cuigengji .book-picker:open {background:var(--cg-wash);border-color:var(--cg-line);}
-}
-@media (prefers-reduced-motion:reduce) {.cuigengji select::picker-icon {transition:none;}}
-.cuigengji[data-motion=reduce] select::picker-icon {transition:none;}
-`;
+/** Native customizable selects keep form, keyboard and accessibility semantics. */
+export const selectStyles = `
+.cuigengji select {cursor:pointer;min-height:34px;line-height:1.4;background-color:var(--cg-paper);}
+.cuigengji select:disabled {cursor:default;opacity:.5;}
+.cuigengji select:not(:disabled):hover {border-color:color-mix(in srgb,var(--cg-accent) 45%,var(--cg-line));}
+.cuigengji select option {font:inherit;background:var(--cg-paper);color:var(--cg-ink);}
+@supports (appearance:base-select) {
+  .cuigengji select,.cuigengji select::picker(select) {appearance:base-select;}
+  .cuigengji select {display:inline-flex;align-items:center;gap:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+  .cuigengji select::picker-icon {content:'';width:10px;height:6px;border:0;background:currentColor;clip-path:polygon(0 0,50% 65%,100% 0,100% 35%,50% 100%,0 35%);rotate:0deg;flex:none;margin:0 1px 0 auto;opacity:.6;transition:rotate 120ms;}
+  .cuigengji select:open::picker-icon {rotate:180deg;}
+  .cuigengji select::picker(select) {font:400 13px/1.5 var(--dsw-font-family,system-ui,'Microsoft YaHei',sans-serif);color:var(--cg-ink);background:var(--cg-paper);border:1px solid var(--cg-line);border-radius:12px;padding:5px;margin-block:6px;min-width:anchor-size(width);max-width:calc(100vw - 24px);max-height:min(320px,60dvh);box-shadow:0 8px 28px #0000001c,0 2px 6px #0000000a;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;}
+  .cuigengji select option {display:flex;align-items:center;gap:12px;min-height:36px;padding:8px 12px;border-radius:7px;white-space:normal;overflow-wrap:anywhere;cursor:pointer;}
+  .cuigengji select option:checked {color:var(--cg-accent);background:var(--cg-wash);font-weight:600;}
+  .cuigengji select option:hover,.cuigengji select option:focus {background:color-mix(in srgb,var(--cg-accent) 12%,var(--cg-paper));outline:none;}
+  .cuigengji select option::checkmark {order:2;margin-left:auto;color:var(--cg-accent);font-size:12px;}
+  .cuigengji select option:disabled {opacity:.45;cursor:default;}
+  .cuigengji .filter-control select {appearance:base-select;padding-right:2px;min-height:0;}
+  .cuigengji .filter-chevron {display:none;}
+  .cuigengji .book-picker {padding:7px 10px;border:1px solid transparent;border-radius:8px;background:transparent;font-weight:600;}
+  .cuigengji .book-picker:hover,.cuigengji .book-picker:open {background:var(--cg-wash);border-color:var(--cg-line);}
+}
+@media (prefers-reduced-motion:reduce) {.cuigengji select::picker-icon {transition:none;}}
+.cuigengji[data-motion=reduce] select::picker-icon {transition:none;}
+`;

package/src/client/shared/state.js

@@ -1,95 +1,95 @@
-import { draftKey, restoreDraft, persistDraft, rebaseDraft } from './drafts.js';
-import { createContext, useContext, useEffect, useRef, useState } from 'react';
-import {useWorkbenchRefresh} from './refresh.tsx';
-const memoryDrafts = new Map();
-function initialDraft(key, entityKey, initial) {
-  if (memoryDrafts.has(key)) return memoryDrafts.get(key);
-  if (typeof localStorage === 'undefined') return {base:initial,value:initial};
-  // One-time recovery of the previous chapter-only draft format.
-  const match = /^([^:]+):chapter:(.+)$/.exec(entityKey);
-  try {
-    if (match && localStorage.getItem(key) === null && !localStorage.getItem(`${key}:migrated`)) {
-      const old = JSON.parse(localStorage.getItem(`cuigengji:draft:${match[1]}:${match[2]}`));
-      if (old?.base && typeof old.content === 'string') {
-        persistDraft(localStorage,key,{base:old.base,value:{...old.base,content:old.content,title:old.title??old.base.title,volumeId:old.volumeId??old.base.volumeId}});
-      }
-      localStorage.setItem(`${key}:migrated`,'true');
-    }
-  } catch {}
-  return restoreDraft(localStorage,key,initial);
-}
-export const SessionScope = createContext('local');
-export function readLocal(key, fallback) {
-  try { const value = localStorage.getItem(key); return value === null ? fallback : JSON.parse(value); } catch { return fallback; }
-}
-export function usePreference(name, fallback) {
-  const scope = useContext(SessionScope);
-  const key = `cuigengji:ui:${scope}:${name}`;
-  const [value, setValue] = useState(() => readLocal(key, fallback));
-  const update = next => setValue(previous => {
-    const value = typeof next === 'function' ? next(previous) : next;
-    try { localStorage.setItem(key, JSON.stringify(value)); } catch {}
-    return value;
-  });
-  return [value, update];
-}
-// Components using this hook mount only after the server value is available.
-// The server revision is retained in the draft; restoration never adopts a newer CAS base.
-export function useDraft(entityKey, initial) {
-  const scope = useContext(SessionScope);
-  const key = draftKey(scope, entityKey);
-  const [state, setState] = useState(() => initialDraft(key,entityKey,initial));
-  const [cacheError, setCacheError] = useState('');
-  const current = useRef(state); current.current = state;
-  const dirty = JSON.stringify(state.value) !== JSON.stringify(state.base);
-  const persist = next => {
-    if (JSON.stringify(next.value) === JSON.stringify(next.base)) memoryDrafts.delete(key);
-    else memoryDrafts.set(key, next);
-    try {
-      persistDraft(localStorage, key, next);
-      setCacheError('');
-    } catch { setCacheError('本地草稿缓存失败，请先保存再离开。'); }
-  };
-  const change = next => {
-    const value = typeof next === 'function' ? next(current.current.value) : next;
-    const updated = { ...current.current, value };
-    current.current = updated; setState(updated); persist(updated);
-  };
-  const accept = value => { const next = { base: value, value }; current.current = next; setState(next); persist(next); };
-  useEffect(() => {
-    const warn = event => { if (dirty) { event.preventDefault(); event.returnValue = ''; } };
-    window.addEventListener('beforeunload', warn);
-    return () => window.removeEventListener('beforeunload', warn);
-  }, [dirty]);
-  const rebase = server => { const next = rebaseDraft(current.current, server); current.current = next; setState(next); persist(next); };
-  return { value: state.value, base: state.base, change, accept, rebase, dirty, cacheError };
-}
-export function useResource(loader, deps) {
-  const refreshRevision = useWorkbenchRefresh().revision;
-  const [state, setState] = useState({ value: null, error: '', loading: true });
-  const [retry, setRetry] = useState(0);
-  useEffect(() => {
-    let live = true;
-    setState(s => ({ ...s, loading: true, error: '' }));
-    Promise.resolve().then(loader).then(value => live && setState({ value, loading: false, error: '' }), error => live && setState(s => ({ ...s, loading: false, error: error.message || String(error) })));
-    return () => { live = false; };
-  }, [...deps, retry, refreshRevision]);
-  return { ...state, retry: () => setRetry(n => n + 1) };
-}
-
-export function useScrollPosition(name) {
-  const scope = useContext(SessionScope);
-  const ref = useRef(null);
-  const key = `cuigengji:scroll:${scope}:${name}`;
-  useEffect(() => {
-    const element = ref.current;
-    if (!element) return;
-    element.scrollTop = readLocal(key, 0);
-    let timer;
-    const save = () => { try { localStorage.setItem(key, JSON.stringify(element.scrollTop)); } catch {} };
-    const scroll = () => { clearTimeout(timer); timer = setTimeout(save, 150); };
-    element.addEventListener('scroll', scroll);
-    return () => { clearTimeout(timer); save(); element.removeEventListener('scroll', scroll); };
-  }, [key]);
-  return ref;
-}
+import { draftKey, restoreDraft, persistDraft, rebaseDraft } from './drafts.js';
+import { createContext, useContext, useEffect, useRef, useState } from 'react';
+import {useWorkbenchRefresh} from './refresh.tsx';
+const memoryDrafts = new Map();
+function initialDraft(key, entityKey, initial) {
+  if (memoryDrafts.has(key)) return memoryDrafts.get(key);
+  if (typeof localStorage === 'undefined') return {base:initial,value:initial};
+  // One-time recovery of the previous chapter-only draft format.
+  const match = /^([^:]+):chapter:(.+)$/.exec(entityKey);
+  try {
+    if (match && localStorage.getItem(key) === null && !localStorage.getItem(`${key}:migrated`)) {
+      const old = JSON.parse(localStorage.getItem(`cuigengji:draft:${match[1]}:${match[2]}`));
+      if (old?.base && typeof old.content === 'string') {
+        persistDraft(localStorage,key,{base:old.base,value:{...old.base,content:old.content,title:old.title??old.base.title,volumeId:old.volumeId??old.base.volumeId}});
+      }
+      localStorage.setItem(`${key}:migrated`,'true');
+    }
+  } catch {}
+  return restoreDraft(localStorage,key,initial);
+}
+export const SessionScope = createContext('local');
+export function readLocal(key, fallback) {
+  try { const value = localStorage.getItem(key); return value === null ? fallback : JSON.parse(value); } catch { return fallback; }
+}
+export function usePreference(name, fallback) {
+  const scope = useContext(SessionScope);
+  const key = `cuigengji:ui:${scope}:${name}`;
+  const [value, setValue] = useState(() => readLocal(key, fallback));
+  const update = next => setValue(previous => {
+    const value = typeof next === 'function' ? next(previous) : next;
+    try { localStorage.setItem(key, JSON.stringify(value)); } catch {}
+    return value;
+  });
+  return [value, update];
+}
+// Components using this hook mount only after the server value is available.
+// The server revision is retained in the draft; restoration never adopts a newer CAS base.
+export function useDraft(entityKey, initial) {
+  const scope = useContext(SessionScope);
+  const key = draftKey(scope, entityKey);
+  const [state, setState] = useState(() => initialDraft(key,entityKey,initial));
+  const [cacheError, setCacheError] = useState('');
+  const current = useRef(state); current.current = state;
+  const dirty = JSON.stringify(state.value) !== JSON.stringify(state.base);
+  const persist = next => {
+    if (JSON.stringify(next.value) === JSON.stringify(next.base)) memoryDrafts.delete(key);
+    else memoryDrafts.set(key, next);
+    try {
+      persistDraft(localStorage, key, next);
+      setCacheError('');
+    } catch { setCacheError('本地草稿缓存失败，请先保存再离开。'); }
+  };
+  const change = next => {
+    const value = typeof next === 'function' ? next(current.current.value) : next;
+    const updated = { ...current.current, value };
+    current.current = updated; setState(updated); persist(updated);
+  };
+  const accept = value => { const next = { base: value, value }; current.current = next; setState(next); persist(next); };
+  useEffect(() => {
+    const warn = event => { if (dirty) { event.preventDefault(); event.returnValue = ''; } };
+    window.addEventListener('beforeunload', warn);
+    return () => window.removeEventListener('beforeunload', warn);
+  }, [dirty]);
+  const rebase = server => { const next = rebaseDraft(current.current, server); current.current = next; setState(next); persist(next); };
+  return { value: state.value, base: state.base, change, accept, rebase, dirty, cacheError };
+}
+export function useResource(loader, deps) {
+  const refreshRevision = useWorkbenchRefresh().revision;
+  const [state, setState] = useState({ value: null, error: '', loading: true });
+  const [retry, setRetry] = useState(0);
+  useEffect(() => {
+    let live = true;
+    setState(s => ({ ...s, loading: true, error: '' }));
+    Promise.resolve().then(loader).then(value => live && setState({ value, loading: false, error: '' }), error => live && setState(s => ({ ...s, loading: false, error: error.message || String(error) })));
+    return () => { live = false; };
+  }, [...deps, retry, refreshRevision]);
+  return { ...state, retry: () => setRetry(n => n + 1) };
+}
+
+export function useScrollPosition(name) {
+  const scope = useContext(SessionScope);
+  const ref = useRef(null);
+  const key = `cuigengji:scroll:${scope}:${name}`;
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    element.scrollTop = readLocal(key, 0);
+    let timer;
+    const save = () => { try { localStorage.setItem(key, JSON.stringify(element.scrollTop)); } catch {} };
+    const scroll = () => { clearTimeout(timer); timer = setTimeout(save, 150); };
+    element.addEventListener('scroll', scroll);
+    return () => { clearTimeout(timer); save(); element.removeEventListener('scroll', scroll); };
+  }, [key]);
+  return ref;
+}

package/src/client/shared/ui.jsx

@@ -1,19 +1,19 @@
-import React from 'react';
-export function ResourceState({ resource, children }) {
-  if (resource.loading && resource.value === null) return <p className="empty" role="status">正在读取…</p>;
-  return <>{resource.error&&<div className="notice error" role="alert">{resource.error}<button onClick={resource.retry}>重试</button></div>}{children}</>;
-}
-// Deliberately small Markdown reader: React escapes all text, no HTML or unsafe links.
-export function ReadingText({ text = '' }) {
-  return <div className="reading-text">{text.split(/\n\s*\n/).map((block, i) => {
-    const heading = /^(#{1,3})\s+(.+)$/.exec(block);
-    if (heading) return <h3 key={i}>{heading[2]}</h3>;
-    return <p key={i}>{block.split(/(\*\*[^*]+\*\*)/g).map((part,j) => part.startsWith('**') && part.endsWith('**') ? <strong key={j}>{part.slice(2,-2)}</strong> : part)}</p>;
-  })}</div>;
-}
-export function SaveBar({ dirty, busy, error, invalid, onSave, children, label = '保存修改' }) {
-  return <footer className="savebar"><div role="status" className={error || invalid ? 'error-text' : 'muted'}>{error || invalid || (dirty ? '本地草稿 · 尚未保存到作品' : '已保存')}{children}</div><button className="primary" disabled={!dirty || busy || !!invalid} onClick={onSave}>{busy ? '请稍候…' : label}</button></footer>;
-}
-export function saveShortcut(event, save) {
-  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's') { event.preventDefault(); event.stopPropagation(); save(); }
-}
+import React from 'react';
+export function ResourceState({ resource, children }) {
+  if (resource.loading && resource.value === null) return <p className="empty" role="status">正在读取…</p>;
+  return <>{resource.error&&<div className="notice error" role="alert">{resource.error}<button onClick={resource.retry}>重试</button></div>}{children}</>;
+}
+// Deliberately small Markdown reader: React escapes all text, no HTML or unsafe links.
+export function ReadingText({ text = '' }) {
+  return <div className="reading-text">{text.split(/\n\s*\n/).map((block, i) => {
+    const heading = /^(#{1,3})\s+(.+)$/.exec(block);
+    if (heading) return <h3 key={i}>{heading[2]}</h3>;
+    return <p key={i}>{block.split(/(\*\*[^*]+\*\*)/g).map((part,j) => part.startsWith('**') && part.endsWith('**') ? <strong key={j}>{part.slice(2,-2)}</strong> : part)}</p>;
+  })}</div>;
+}
+export function SaveBar({ dirty, busy, error, invalid, onSave, children, label = '保存修改' }) {
+  return <footer className="savebar"><div role="status" className={error || invalid ? 'error-text' : 'muted'}>{error || invalid || (dirty ? '本地草稿 · 尚未保存到作品' : '已保存')}{children}</div><button className="primary" disabled={!dirty || busy || !!invalid} onClick={onSave}>{busy ? '请稍候…' : label}</button></footer>;
+}
+export function saveShortcut(event, save) {
+  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's') { event.preventDefault(); event.stopPropagation(); save(); }
+}

package/src/client/shared/workspace.tsx

@@ -1,16 +1,16 @@
 import React, {useLayoutEffect, useRef, useState} from 'react';
-export function DocumentTextarea(props: React.TextareaHTMLAttributes<HTMLTextAreaElement>) {
-  const ref = useRef<HTMLTextAreaElement>(null);
-  const fit = () => {const el=ref.current;if(el){el.style.height='0px';el.style.height=`${el.scrollHeight}px`;}};
-  useLayoutEffect(fit,[props.value]);
-  useLayoutEffect(()=>{const el=ref.current;if(!el)return;let width=0;const observer=new ResizeObserver(entries=>{const next=entries[0].contentRect.width;if(next!==width){width=next;fit();}});observer.observe(el);return()=>observer.disconnect();},[]);
-  return <textarea {...props} ref={ref} style={{...props.style,overflow:'hidden',resize:'none'}}/>;
-}
-export function ViewSwitch({value,change,graph}: {value:string;change:(value:string)=>void;graph:string}) {
-  return <div className="segmented" aria-label="显示方式"><button aria-pressed={value==='list'} onClick={()=>change('list')}>列表</button><button aria-pressed={value==='canvas'} onClick={()=>change('canvas')}>{graph}</button></div>;
-}
+export function DocumentTextarea(props: React.TextareaHTMLAttributes<HTMLTextAreaElement>) {
+  const ref = useRef<HTMLTextAreaElement>(null);
+  const fit = () => {const el=ref.current;if(el){el.style.height='0px';el.style.height=`${el.scrollHeight}px`;}};
+  useLayoutEffect(fit,[props.value]);
+  useLayoutEffect(()=>{const el=ref.current;if(!el)return;let width=0;const observer=new ResizeObserver(entries=>{const next=entries[0].contentRect.width;if(next!==width){width=next;fit();}});observer.observe(el);return()=>observer.disconnect();},[]);
+  return <textarea {...props} ref={ref} style={{...props.style,overflow:'hidden',resize:'none'}}/>;
+}
+export function ViewSwitch({value,change,graph}: {value:string;change:(value:string)=>void;graph:string}) {
+  return <div className="segmented" aria-label="显示方式"><button aria-pressed={value==='list'} onClick={()=>change('list')}>列表</button><button aria-pressed={value==='canvas'} onClick={()=>change('canvas')}>{graph}</button></div>;
+}
 export function FilterControl({label,value,change,children}: {label:string;value:string;change:(v:string)=>void;children:React.ReactNode}) {
-  return <label className={`filter-control ${value?'is-active':''}`}><span className="filter-prefix">{label}</span><select aria-label={label} value={value} onChange={e=>change(e.target.value)}>{children}</select><span className="filter-chevron" aria-hidden="true"/></label>;
+  return <label className={`filter-control ${value?'is-active':''}`}><span className="filter-prefix">{label}</span><select aria-label={label} value={value} onChange={e=>change(e.target.value)}>{children}</select><span className="filter-chevron" aria-hidden="true"/></label>;
 }
 export function SearchControl({label,value,change}:{label:string;value:string;change:(value:string)=>void}) {
   const [open,setOpen]=useState(false);