@linhey/rhine-design 0.10.0 → 0.11.0

package/preview/SpacingGallery.tsx

@@ -1,10 +1,11 @@
 import { useState } from 'react';
-import { Button, DataTable, Grid, Inline, Notice, Select, Stack, Surface, Text, type Spacing } from '../components';
+import { Button, DataTable, Grid, Inline, Notice, SegmentedControl, Select, Stack, Surface, Text, type Spacing } from '../components';
 import './spacing.css';
 
 const scale: Spacing[] = [1, 2, 3, 4, 6, 8, 12];
 export function SpacingGallery() {
   const [state, setState] = useState('normal');
+  const [metric, setMetric] = useState('volume');
   const [selected, setSelected] = useState<string[]>(['research']);
   return <section id="spacing">
     <div className="ds-section-title"><span>SPACE</span><h2>间距与组合 · 让关系可见</h2></div>
@@ -12,6 +13,13 @@ export function SpacingGallery() {
       <Text tone="muted">同组紧、组间松。间距使用已有 token；gap 的数字是后缀，例如 gap=4 对应16px。</Text>
       <Surface><Stack gap={4}>{scale.map(space => <div className="ds-spacing-scale" key={space}><Text variant="code">space-{space}</Text><span className="ds-spacing-bar" style={{width:`var(--rhine-space-${space})`}} aria-hidden="true"/><Text numeric variant="caption">{space * 4}px</Text></div>)}</Stack></Surface>
       <Select label="卡片内容状态" value={state} onChange={event=>setState(event.target.value)}><option value="normal">默认</option><option value="loading">检查中</option><option value="error">读取失败</option><option value="long">长文案</option></Select>
+      <Surface><Stack gap={4}>
+        <Inline gap={4} style={{justifyContent:'space-between'}}>
+          <Stack gap={2}><Text as="h3" variant="heading">{state==='long'?'长标题示例：按业务维度查看统计分布':'统计分布'}</Text></Stack>
+          <SegmentedControl size="compact" label="统计维度" items={[{value:'volume',label:'用量'},{value:'count',label:'次数',disabled:state==='loading'}]} value={metric} onValueChange={setMetric}/>
+        </Inline>
+        {state==='error'?<Notice tone="error" title="统计暂不可用">保留所选维度，可重新读取。</Notice>:<Text tone="muted">{state==='loading'?'正在读取统计…':`当前维度：${metric==='volume'?'用量':'次数'}。紧凑视觉 32px，点击区域至少 44px；标题与操作居中对齐，窄窗自然换行。`}</Text>}
+      </Stack></Surface>
       <Grid gap={6} minWidth={280}>
         <Stack gap={3}>
           <Text variant="caption" tone="muted">24px 内边距 · 8px 标题/说明 · 16px 内容/操作</Text>

package/preview/SummaryTabsGallery.tsx

@@ -0,0 +1,37 @@
+import { useState } from 'react';
+import { Badge, KeyValue, Select, Stack, Surface, Tabs, Text, TextField, Toolbar } from '../components';
+
+export function SummaryTabsGallery() {
+  const [width, setWidth] = useState('520');
+  const [scenario, setScenario] = useState('normal');
+  const [selected, setSelected] = useState('primary');
+  const pending = scenario === 'loading', failed = scenario === 'error';
+  return <section id="summary-tabs"><Stack gap={6}>
+    <Toolbar title="带摘要的页签" description="名称与状态在同一组，身份摘要紧随；每个对象的状态始终可见。">
+      <Select label="局部容器宽度" value={width} onChange={event => setWidth(event.target.value)}>
+        <option value="320">320px · 窄容器</option><option value="520">520px · 标准</option><option value="100%">自适应</option>
+      </Select>
+      <Select label="摘要页签场景" value={scenario} onChange={event => {setScenario(event.target.value); if(event.target.value === 'disabled') setSelected('primary');}}>
+        <option value="normal">正常</option><option value="loading">读取中</option><option value="error">读取失败</option><option value="disabled">禁用</option><option value="long">长身份与名称</option>
+      </Select>
+    </Toolbar>
+    <Surface><Stack gap={6}>
+      <div style={{width: width === '100%' ? width : `${width}px`, maxWidth:'100%'}}>
+        <Tabs label="摘要页签规范示例" value={selected} onValueChange={setSelected} items={[
+          {value:'primary',label:scenario === 'long' ? '跨部门联合研究工作区' : '主工作区',description:pending ? '尚未读取当前身份' : scenario === 'long' ? '研究项目 · 跨区域联合研发与长期设计验证团队' : '研发 · 研究项目',
+            status:<Badge tone={failed ? 'error' : pending ? 'neutral' : 'success'}>{failed ? '读取失败' : pending ? '读取中' : '同步中'}</Badge>,
+            content:<Stack gap={4}><Text>主工作区内容</Text><TextField label="主工作区草稿" placeholder="切换后保留已输入内容"/></Stack>},
+          {value:'team',label:'协作工作区',description:'协作 · 设计项目',disabled:scenario === 'disabled',status:<Badge>{scenario === 'disabled' ? '暂不可用' : '已停止'}</Badge>,
+            content:<Stack gap={4}><Text>协作工作区内容</Text><TextField label="协作工作区草稿" placeholder="与另一页签独立"/></Stack>},
+        ]}/>
+      </div>
+      <Text variant="caption" tone="muted">先输入草稿，再使用左右方向键或 Home / End 切换。场景与主题变化不清空面板。</Text>
+    </Stack></Surface>
+    <Surface><Stack gap={4}><Text as="h2" variant="heading">尺寸与层级</Text><KeyValue items={[
+      {key:'title',label:'名称',value:'14 / 22 · 600'}, {key:'description',label:'身份摘要',value:'12 / 18 · 400'},
+      {key:'padding',label:'上下内距',value:'12px / 12px'}, {key:'status',label:'名称到状态',value:'8px'},
+      {key:'identity',label:'名称组到摘要',value:'4px'}, {key:'tabs',label:'页签之间',value:'16px'},
+      {key:'panel',label:'分隔线到面板',value:'24px'}, {key:'selected',label:'选中指示线',value:'2px，覆盖当前页签宽度'},
+    ]}/><Text variant="caption" tone="muted">状态复用 Badge，各主题保留自己的文字与边框；不固定总高度。</Text></Stack></Surface>
+  </Stack></section>;
+}

package/preview/main.tsx

@@ -1,7 +1,7 @@
 import { BackgroundFiltersFixture } from './BackgroundFiltersFixture';
 import { StrictMode, useEffect, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
-import { Badge, Button, Checkbox, Disclosure, EmptyState, Logo, Notice, Progress, SegmentedControl, Select, SelectionCard, Skeleton, Surface, Tabs, Text, TextField, Toolbar, type TextVariant } from '../components/index';
+import { Badge, Button, Checkbox, Disclosure, EmptyState, Link, Logo, Notice, Progress, SegmentedControl, Select, SelectionCard, Skeleton, Surface, Tabs, Text, TextField, Toolbar, type TextVariant } from '../components/index';
 import './preview.css';
 import { OverlayBoundsFixture, OverlayBoundsGallery } from './OverlayBoundsGallery';
 import { SettingsDialogGallery, SettingsDialogFixture } from './SettingsDialogGallery';
@@ -11,6 +11,7 @@ import { MotionGallery } from './MotionGallery';
 import { StartupGallery } from './StartupGallery';
 import { PatternGallery } from './PatternGallery';
 import { GalleryShell } from './GalleryShell';
+import { componentCount } from './packageInfo';
 import { SpacingGallery } from './SpacingGallery';
 import { LineHeightGallery } from './LineHeightGallery';
 import { SubscriptionGallery } from './SubscriptionGallery';
@@ -26,6 +27,7 @@ import { CompactFilterBarGallery } from './CompactFilterBarGallery';
 import { DenseFilterControlsGallery } from './DenseFilterControlsGallery';
 import { CheckboxRowGallery } from './CheckboxRowGallery';
 import { ComponentTypographyGallery } from './ComponentTypographyGallery';
+import { SummaryTabsGallery } from './SummaryTabsGallery';
 
 function Gallery() {
   const [motion, setMotion] = useState('system');
@@ -55,6 +57,7 @@ function Gallery() {
     {section === 'compact-filters' && <><CompactFilterBarGallery /><DenseFilterControlsGallery /></>}
     {section === 'checkbox-rows' && <CheckboxRowGallery />}
     {section === 'component-typography' && <ComponentTypographyGallery />}
+    {section === 'summary-tabs' && <SummaryTabsGallery />}
     {section === 'backgrounds' && <BackgroundGallery />}
     {section === 'app-shell' && <ShellGallery />}
     {section === 'orbit' && <OrbitGallery />}
@@ -64,7 +67,7 @@ function Gallery() {
     {section === 'media' && <MediaGallery />}
     {section === 'subscriptions' && <SubscriptionGallery />}
     {section === 'top' && <>
-      <div className="ds-hero"><div><p className="ds-kicker">FOUNDATIONS / COMPONENTS / MOTION</p><h1>精密，有序。<br /><span>每一次交互都有回应。</span></h1><p>60 个通用组件，共用一套视觉变量和动效规则。<br />这里运行的就是后续业务页面可直接导入的 React 组件。</p></div></div>
+      <div className="ds-hero"><div><p className="ds-kicker">FOUNDATIONS / COMPONENTS / MOTION</p><h1>精密，有序。<br /><span>每一次交互都有回应。</span></h1><p>{componentCount} 个通用组件，共用一套视觉变量和动效规则。<br />展台运行当前源码，可能包含未发布能力；接入前请核对安装版本与<Link href="https://github.com/linhay/rhine-design/blob/main/CHANGELOG.md">版本记录</Link>。</p></div></div>
       <div className="ds-overview-links">{[
         ['foundation','视觉基础','从色彩、间距与材质开始。'],
         ['typography','字体与文字','清晰的层级，稳定的阅读节奏。'],
@@ -125,6 +128,7 @@ function Gallery() {
         <div className="ds-grid"><div><Checkbox label="显示卡片勾选框" checked={showSelectionIndicator} onChange={event => setShowSelectionIndicator(event.target.checked)} /><SelectionCard showIndicator={showSelectionIndicator} label="可选择容器" selected={selected} onSelectedChange={setSelected}><span className="ds-caption">适用于账号、模板或可取消选择项。<br />同一位置切换底色与边框，不抬升卡片。</span><div className="ds-gap-top"><Badge tone={selected?'success':'neutral'}>{selected?'已选择':'未选择'}</Badge></div></SelectionCard><p className="ds-caption">SelectionCard · 背景与边界 120ms</p></div>
         <Surface><div className="ds-component-title"><h3>SegmentedControl</h3><span>原生单选 / 120ms</span></div><SegmentedControl label="展示指标" items={[{value:'tokens',label:'Token'},{value:'requests',label:'请求数'},{value:'cost',label:'费用',disabled:true}]} value={metric} onValueChange={setMetric} /><p className="ds-caption">当前指标：{metric==='tokens'?'Token':'请求数'}。方向键切换，自动跳过禁用项。</p></Surface></div>
         <Surface className="ds-gap-top"><div className="ds-component-title"><h3>Tabs</h3><span>下划线与内容进入 180ms</span></div><Tabs label="组件说明" value={tab} onValueChange={setTab} items={[{value:'tokens',label:'视觉变量',content:<p>颜色、间距、字体与动效集中定义。业务页面只消费语义变量。</p>},{value:'disabled',label:'预留示例',disabled:true,content:null},{value:'motion',label:'动效规则',content:<p>内容进入最多移动 3px。保留隐藏面板状态，切换不触发重复业务操作。</p>}]} /></Surface>
+        <Text className="ds-gap-top">需要同时展示对象身份和状态时，查看<a href="#summary-tabs">带摘要的页签规范与交互展台</a>。</Text>
       </section>}
 
       {section === 'feedback' && <section id="feedback"><div className="ds-section-title"><span>04</span><h2>告诉用户发生了什么</h2></div>
@@ -137,7 +141,7 @@ function Gallery() {
       </section>}
 
       {section === 'disclosure' && <section id="disclosure"><div className="ds-section-title"><span>05</span><h2>逐步展开，保持可读</h2></div>
-        <div className="ds-grid"><Surface><div className="ds-component-title"><h3>Disclosure</h3><span>实测高度 / 200ms</span></div><Disclosure title="查看组件动画规则"><p>展开和收起都支持中途反向。关闭后内容不参与 Tab 导航。</p><Button variant="secondary" onClick={()=>setNotice(true)}>内容内操作</Button><p>减少动态模式直接到达最终状态，信息不会丢失。</p></Disclosure></Surface>
+        <div className="ds-grid"><Surface><div className="ds-component-title"><h3>Disclosure</h3><span>实测高度 / 200ms</span></div><Disclosure title="查看组件动画规则"><p>展开和收起都支持中途反向。关闭后内容不参与 Tab 导航。</p><Button variant="secondary" onClick={()=>setNotice(true)}>内容内操作</Button><p>减少动态模式直接到达最终状态，信息不会丢失。</p></Disclosure><Disclosure title="相邻分组共用一条分隔线"><p>分组连续排列，不加组间 gap；相邻边框合并，展开和收起各自独立。</p></Disclosure></Surface>
         <EmptyState title="暂无记录" description="用一句话说明当前状态，按业务需要提供一个下一步操作。" action={<Button variant="secondary" onClick={()=>setNotice(true)}>演示下一步</Button>} /></div>
       </section>}
       {['data','forms','utilities','overlays'].includes(section) && <CommonGallery key={section} section={section} />}

package/preview/packageInfo.ts

@@ -0,0 +1,5 @@
+import { version } from '../package.json';
+
+export const packageVersion = version;
+// Public components in components/index.ts; excludes types and the separate theme entry.
+export const componentCount = 67;

package/review/canvas.tsx

@@ -0,0 +1,107 @@
+import { Component, useEffect, type ReactNode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { flushSync } from 'react-dom';
+import { ThemeProvider } from '../components/theme';
+import { Notice } from '../components';
+import { defineReview, catalogInfo, parseReviewState, serializeReviewState } from './state';
+import { createMockFetch, installIsolation, type ReviewHttpHandler } from './isolation';
+import { ReviewLifecycle } from './lifecycle';
+import { isReviewMessage, sendReview } from './protocol';
+import type { ReviewCatalog, ReviewEnvironment, ReviewScene, ReviewSelection, ReviewSession } from './types';
+import './review.css';
+
+class RenderBoundary extends Component<{ children: ReactNode; report(message: string): void }, { error: boolean }> {
+  state = { error: false };
+  static getDerivedStateFromError() { return { error: true }; }
+  componentDidCatch(error: Error) { this.props.report(`场景渲染失败：${error.message}`); }
+  render() { return this.state.error ? <p role="alert">场景渲染失败，请查看评审反馈并重置。</p> : this.props.children; }
+}
+
+export async function mountReviewCanvas(loadCatalog: () => Promise<{ default: ReviewCatalog }>) {
+  let state: ReviewSelection | undefined;
+  let requestId = 0;
+  const report = (message: string, kind = 'info', scene = state?.scene) => sendReview(parent, { type: 'feedback', message, kind, scene });
+  const failed = () => sendReview(parent, { type: 'failed', requestId });
+  const isolation = installIsolation(message => report(message, 'error'));
+  // The handler slot is changed only by the currently active setup context.
+  let http: ReviewHttpHandler | undefined;
+  let requestSignal = AbortSignal.abort();
+  window.fetch = createMockFetch(() => http, () => requestSignal, message => report(message, 'error'));
+  const root = createRoot(document.getElementById('root')!);
+  const media = matchMedia('(prefers-reduced-motion: reduce)');
+  let session: ReviewSession | undefined;
+  let scene: ReviewScene | undefined;
+  let renderGeneration = 0;
+  const environment = (): ReviewEnvironment => ({
+    theme: state!.theme, motion: state!.motion,
+    reducedMotion: state!.motion === 'reduced' || (state!.motion === 'system' && media.matches),
+    paused: state!.motion === 'paused',
+  });
+  const render = () => {
+    if (!session || !scene || !state) return;
+    const env = environment();
+    document.documentElement.style.zoom = String(state.zoom);
+    document.documentElement.dataset.rhineMotion = env.reducedMotion ? 'reduced' : env.paused ? 'paused' : 'full';
+    const committedRequest = requestId;
+    const renderedScene = scene.id;
+    const content = <RenderBoundary key={renderGeneration} report={message => { report(message, 'error', renderedScene); failed(); }}>
+      <SceneContent session={session} environment={env} committed={() => sendReview(parent, { type: 'rendered', requestId: committedRequest })} />
+    </RenderBoundary>;
+    root.render(scene.themeRoot === 'host' ? content : <ThemeProvider theme={env.theme} data-rhine-motion={env.reducedMotion ? 'reduced' : env.paused ? 'paused' : 'full'}>{content}</ThemeProvider>);
+  };
+  let catalog: ReviewCatalog;
+  try { catalog = defineReview((await loadCatalog()).default); }
+  catch (error) { report(`场景目录加载失败：${String(error)}`, 'error'); failed(); root.render(<Notice title="场景目录加载失败" />); return; }
+  const info = catalogInfo(catalog);
+  const lifecycle = new ReviewLifecycle({
+    clear() {
+      session = undefined; scene = undefined; renderGeneration++;
+      flushSync(() => root.render(null));
+    },
+    context(signal, selected) {
+      isolation.reset();
+      requestSignal = signal;
+      http = undefined;
+      return {
+        mockHttp(next) { signal.throwIfAborted(); http = next; },
+        report(message, kind) { if (!signal.aborted) report(message, kind, selected.id); },
+      };
+    },
+    ready(next, selected) { session = next; scene = selected; render(); },
+    error(error, selected) { report(`场景生命周期失败：${String(error)}`, 'error', selected); },
+    failed,
+  });
+  const ready = () => sendReview(parent, { type: 'ready', catalog: info });
+  let selectionKey = '';
+  const receive = (event: MessageEvent) => {
+    if (!isReviewMessage(event, parent)) return;
+    if (event.data.type === 'hello') { ready(); return; }
+    if (event.data.type !== 'select' || typeof event.data.hash !== 'string' || !Number.isSafeInteger(event.data.requestId)) return;
+    requestId = event.data.requestId;
+    state = parseReviewState(event.data.hash, info);
+    const selection = state;
+    // Canonicalizing in both documents prevents unsupported values from crossing the boundary.
+    const key = JSON.stringify([state.scene, state.dimensions]);
+    if (key !== selectionKey || event.data.reset === true) {
+      selectionKey = key;
+      report('正在初始化合成场景…');
+      void lifecycle.select(catalog.scenes.find(s => s.id === selection.scene)!, selection.dimensions, event.data.reset ? 'reset' : 'select');
+    } else render();
+    sendReview(parent, { type: 'state', hash: serializeReviewState(state) });
+  };
+  window.addEventListener('message', receive);
+  media.addEventListener('change', render);
+  const rejection = (event: PromiseRejectionEvent) => { if (event.reason?.name !== 'AbortError') report(`异步操作失败：${String(event.reason)}`, 'error'); };
+  window.addEventListener('unhandledrejection', rejection);
+  window.addEventListener('pagehide', () => {
+    window.removeEventListener('message', receive);
+    media.removeEventListener('change', render);
+    window.removeEventListener('unhandledrejection', rejection);
+    void lifecycle.dispose();
+  }, { once: true });
+  ready();
+}
+function SceneContent({ session, environment, committed }: { session: ReviewSession; environment: ReviewEnvironment; committed(): void }) {
+  useEffect(committed, [committed]);
+  return session.render(environment);
+}

package/review/dev-client.mjs

@@ -0,0 +1,17 @@
+// Style-only development client. The review server intentionally has no HMR transport.
+// CSS transformed by Vite 6/8 imports these helpers even with server.hmr:false.
+const styles = new Map();
+export function updateStyle(id, content) {
+  let style = styles.get(id);
+  if (!style) { style = document.createElement('style'); style.dataset.reviewStyle = id; document.head.append(style); styles.set(id, style); }
+  style.textContent = content;
+}
+export function removeStyle(id) { styles.get(id)?.remove(); styles.delete(id); }
+export function createHotContext() {
+  const noop = () => {};
+  return { data: {}, accept: noop, acceptExports: noop, dispose: noop, prune: noop, decline: noop, invalidate: noop, on: noop, off: noop, send: noop };
+}
+export function injectQuery(url, query) {
+  const [path, hash] = url.split('#');
+  return `${path}${path.includes('?') ? '&' : '?'}${query}${hash === undefined ? '' : `#${hash}`}`;
+}

package/review/feedback.ts

@@ -0,0 +1,17 @@
+export interface ReviewFeedback {
+  id: number;
+  scene: string;
+  message: string;
+  kind: 'info' | 'error';
+}
+export interface ReviewFeedbackLog {
+  entries: ReviewFeedback[];
+  errors: number;
+  omittedErrors: number;
+}
+export const emptyFeedback = (): ReviewFeedbackLog => ({ entries: [], errors: 0, omittedErrors: 0 });
+export function appendFeedback(log: ReviewFeedbackLog, entry: ReviewFeedback): ReviewFeedbackLog {
+  const entries = [...log.entries, { ...entry, message: entry.message.slice(0, 2000) }];
+  const omitted = entries.splice(0, Math.max(0, entries.length - 20));
+  return { entries, errors: log.errors + Number(entry.kind === 'error'), omittedErrors: log.omittedErrors + omitted.filter(item => item.kind === 'error').length };
+}

package/review/index.ts

@@ -0,0 +1,2 @@
+export { defineReview, parseReviewState, serializeReviewState } from './state';
+export type { ReviewCatalog, ReviewCatalogInfo, ReviewContext, ReviewDimension, ReviewEnvironment, ReviewMotion, ReviewOption, ReviewScene, ReviewSceneInfo, ReviewSelection, ReviewSession } from './types';

package/review/isolation.ts

@@ -0,0 +1,64 @@
+export type ReviewHttpHandler = (request: Request) => Response | undefined | Promise<Response | undefined>;
+export class MemoryStorage implements Storage {
+  private values = new Map<string, string>();
+  get length() { return this.values.size; }
+  clear() { this.values.clear(); }
+  getItem(key: string) { return this.values.get(String(key)) ?? null; }
+  key(index: number) { return [...this.values.keys()][index] ?? null; }
+  removeItem(key: string) { this.values.delete(String(key)); }
+  setItem(key: string, value: string) { this.values.set(String(key), String(value)); }
+}
+export function createMockFetch(getHandler: () => ReviewHttpHandler | undefined, getSignal: () => AbortSignal, report: (message: string) => void): typeof fetch {
+  return async (input, init) => {
+    const url = typeof input === 'string' ? new URL(input, location.href).href : input;
+    const request = new Request(url, init);
+    const signal = AbortSignal.any([request.signal, getSignal()]);
+    signal.throwIfAborted();
+    const scoped = new Request(request, { signal, credentials: 'omit' });
+    const handler = getHandler();
+    // Race cancellation even if a product handler ignores its signal or never resolves.
+    return new Promise<Response>((resolve, reject) => {
+      const abort = () => reject(signal.reason ?? new DOMException('Aborted', 'AbortError'));
+      signal.addEventListener('abort', abort, { once: true });
+      Promise.resolve().then(() => { signal.throwIfAborted(); return handler?.(scoped); }).then(response => {
+        signal.throwIfAborted();
+        if (!response) {
+          const message = `未实现模拟请求：${scoped.method} ${new URL(scoped.url).pathname}`;
+          report(message);
+          throw new Error(message);
+        }
+        resolve(response);
+      }).catch(reject).finally(() => signal.removeEventListener('abort', abort));
+    });
+  };
+}
+/** Defense in depth for trusted synthetic product code; not an untrusted-code sandbox. */
+export function installIsolation(report: (message: string) => void) {
+  const storage = [new MemoryStorage(), new MemoryStorage()];
+  Object.defineProperty(window, 'localStorage', { configurable: true, value: storage[0] });
+  Object.defineProperty(window, 'sessionStorage', { configurable: true, value: storage[1] });
+  Object.defineProperty(document, 'cookie', { configurable: true, get: () => '', set: () => { report('预览不写入会话 Cookie'); } });
+  const blocked = (name: string) => { const message = `预览未实现操作：${name}`; report(message); throw new Error(message); };
+  for (const name of ['XMLHttpRequest', 'WebSocket', 'EventSource', 'Worker', 'SharedWorker'] as const) {
+    Object.defineProperty(window, name, { configurable: true, value: function () { return blocked(name); } });
+  }
+  Object.defineProperty(window, 'indexedDB', { configurable: true, get: () => blocked('IndexedDB') });
+  Object.defineProperty(window, 'caches', { configurable: true, get: () => blocked('CacheStorage') });
+  Object.defineProperty(navigator, 'serviceWorker', { configurable: true, get: () => blocked('ServiceWorker') });
+  Object.defineProperty(navigator, 'sendBeacon', { configurable: true, value: () => { report('预览不发送 Beacon'); return false; } });
+  Object.defineProperty(navigator, 'clipboard', { configurable: true, value: { writeText: async () => blocked('Clipboard'), readText: async () => blocked('Clipboard') } });
+  window.open = () => { report('预览不打开外部窗口'); return null; };
+  document.addEventListener('click', event => {
+    const link = (event.target as Element)?.closest?.('a');
+    if (!link || event.defaultPrevented) return;
+    const url = new URL(link.href);
+    const localHash = url.origin === location.origin && url.pathname === location.pathname && url.search === location.search && Boolean(url.hash);
+    if (link.hasAttribute('download') || link.target || !localHash) {
+      event.preventDefault(); report('预览不执行下载或整页跳转；产品路由需使用 SPA 导航适配');
+    }
+  });
+  document.addEventListener('submit', event => {
+    if (!event.defaultPrevented) { event.preventDefault(); report('预览表单需要产品 onSubmit 模拟适配'); }
+  });
+  return { reset: () => storage.forEach(item => item.clear()) };
+}

package/review/lifecycle.ts

@@ -0,0 +1,59 @@
+import type { ReviewContext, ReviewScene, ReviewSession } from './types';
+
+export class ReviewLifecycle {
+  private generation = 0;
+  private active?: { scene: string; abort: AbortController; cleanups: (() => void | Promise<void>)[]; session?: ReviewSession; disposed: boolean; disposal?: Promise<void> };
+  constructor(private readonly hooks: {
+    clear(): void;
+    ready(session: ReviewSession, scene: ReviewScene): void;
+    error(error: unknown, scene?: string): void;
+    failed?(scene: string): void;
+    context(signal: AbortSignal, scene: ReviewScene): Pick<ReviewContext, 'mockHttp' | 'report'>;
+  }) {}
+  private cleanup(run: NonNullable<ReviewLifecycle['active']>, reset: boolean): Promise<void> {
+    if (run.disposal) return run.disposal;
+    run.disposed = true;
+    run.abort.abort();
+    const operations = [...run.cleanups.reverse()];
+    if (run.session) {
+      if (reset && run.session.reset) operations.unshift(() => run.session!.reset!());
+      operations.push(() => run.session!.dispose());
+    }
+    run.disposal = (async () => {
+      for (const operation of operations) {
+        try { await operation(); } catch (error) { this.hooks.error(error, run.scene); }
+      }
+    })();
+    return run.disposal;
+  }
+  async select(scene: ReviewScene, dimensions: Record<string, string>, reason: 'select' | 'reset' = 'select') {
+    const generation = ++this.generation;
+    const previous = this.active;
+    try { this.hooks.clear(); } catch (error) { this.hooks.error(error, previous?.scene); }
+    if (previous) await this.cleanup(previous, reason === 'reset');
+    if (generation !== this.generation) return;
+    const run = { scene: scene.id, abort: new AbortController(), cleanups: [] as (() => void | Promise<void>)[], session: undefined as ReviewSession | undefined, disposed: false };
+    this.active = run;
+    const context: ReviewContext = {
+      ...this.hooks.context(run.abort.signal, scene), dimensions: Object.freeze({ ...dimensions }), signal: run.abort.signal, reason,
+      onDispose: cleanup => {
+        if (run.disposed) void Promise.resolve().then(cleanup).catch(error => this.hooks.error(error, scene.id));
+        else run.cleanups.push(cleanup);
+      },
+    };
+    try {
+      const session = await scene.setup(context);
+      if (generation !== this.generation || run.disposed) { await session.dispose(); return; }
+      run.session = session;
+      this.hooks.ready(session, scene);
+    } catch (error) {
+      if (!run.abort.signal.aborted) { this.hooks.error(error, scene.id); this.hooks.failed?.(scene.id); }
+      await this.cleanup(run, false);
+    }
+  }
+  async dispose() {
+    ++this.generation;
+    try { this.hooks.clear(); } catch (error) { this.hooks.error(error, this.active?.scene); }
+    if (this.active) await this.cleanup(this.active, false);
+  }
+}

package/review/protocol.ts

@@ -0,0 +1,7 @@
+export const protocol = 'rhine-review/2';
+export function isReviewMessage(event: MessageEvent, source: Window | null): boolean {
+  return event.origin === location.origin && event.source === source && event.data?.protocol === protocol;
+}
+export function sendReview(target: Window, data: Record<string, unknown>) {
+  target.postMessage({ ...data, protocol }, location.origin);
+}

package/review/review.css

@@ -0,0 +1,41 @@
+html, body, #root { margin: 0; min-height: 100%; }
+.rhine-review-shell { min-height: 100vh; background: var(--rhine-bg); color: var(--rhine-ink); }
+.rhine-review-header { display: flex; gap: 12px; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--rhine-line); flex-wrap: wrap; }
+.rhine-review-brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
+.rhine-review-brand strong { display: block; font-size: 16px; line-height: 24px; font-weight: 600; }
+.rhine-review-brand small { display: block; font-size: 12px; line-height: 18px; font-weight: 400; opacity: .7; }
+.rhine-review-menu { display: none; }
+.rhine-review-body { display: grid; grid-template-columns: 232px minmax(0, 1fr); }
+.rhine-review-directory { padding: 20px; border-right: 1px solid var(--rhine-line); }
+.rhine-review-directory h2 { margin-top: 24px; font-size: 12px; line-height: 18px; font-weight: 600; opacity: .7; }
+.rhine-review-directory a { display: block; padding: 10px 12px; color: inherit; text-decoration: none; font-size: 14px; line-height: 22px; font-weight: 400; overflow-wrap: anywhere; }
+.rhine-review-directory a[aria-current] { background: var(--rhine-selected); font-weight: 600; box-shadow: inset 3px 0 var(--rhine-green); }
+.rhine-review-main { min-width: 0; }
+.rhine-review-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 20px; }
+.rhine-review-controls > .rhine-field { flex: 1 1 140px; min-width: 0; }
+.rhine-review-feedback, .rhine-review-notes { padding: 12px 20px; font-size: 13px; line-height: 20px; font-weight: 400; overflow-wrap: anywhere; }
+.rhine-review-feedback[role=alert] { border-left: 3px solid var(--rhine-error); }
+.rhine-review-feedback p { margin: 0 0 8px; }
+.rhine-review-feedback [role=alert] { border-left: 3px solid var(--rhine-error); padding-left: 10px; }
+.rhine-review-options { margin: 0 20px; padding: 0 0 8px; font-size: 13px; line-height: 20px; font-weight: 400; }
+.rhine-review-options summary, .rhine-review-log summary { cursor: pointer; padding: 10px 0; }
+.rhine-review-options .rhine-review-controls { padding: 12px 0; }
+.rhine-review-options p { color: var(--rhine-muted); margin: 0; }
+.rhine-review-recovery { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
+.rhine-review-log ol { max-height: 240px; overflow: auto; padding-left: 24px; }
+.rhine-review-log li { padding: 8px 0; }
+.rhine-review-log li strong, .rhine-review-log li span { display: block; }
+.rhine-review-log li[data-kind=error] { color: var(--rhine-error); }
+.rhine-review-size { margin: 0; padding: 8px 20px; color: var(--rhine-muted); font-size: 12px; line-height: 18px; font-weight: 400; }
+.rhine-review-viewport { overflow: auto; padding: 16px; background: var(--rhine-surface); }
+.rhine-review-viewport iframe { display: block; border: 1px solid var(--rhine-line); min-height: 650px; height: 72vh; margin: 0 auto; background: var(--rhine-bg); box-sizing: border-box; }
+.rhine-review-notes summary { cursor: pointer; min-height: 32px; }
+[data-rhine-motion=paused] *, [data-rhine-motion=paused] *::before, [data-rhine-motion=paused] *::after { animation-play-state: paused !important; }
+@media (max-width: 760px) {
+  .rhine-review-menu { display: inline-flex; }
+  .rhine-review-body { grid-template-columns: minmax(0, 1fr); }
+  .rhine-review-directory { display: none; border-bottom: 1px solid var(--rhine-line); }
+  .rhine-review-directory[data-open=true] { display: block; }
+  .rhine-review-header { padding: 12px; }
+  .rhine-review-controls { padding: 12px; }
+}