@linhey/rhine-design 0.10.0 → 0.11.1

package/examples/review/platform/Workspace.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useRef, useState } from 'react';
+import { Button, Notice, Stack, Text, TextField } from '@linhey/rhine-design';
+import type { ReviewEnvironment } from '@linhey/rhine-design/review';
+import '../product.css';
+interface Client { read(): string; save(value: string): Promise<void> }
+export function Workspace({ client, environment, dimensions }: { client: Client; environment: ReviewEnvironment; dimensions: Readonly<Record<string, string>> }) {
+  const [draft, setDraft] = useState(client.read);
+  const [saved, setSaved] = useState(false);
+  const canvas = useRef<HTMLCanvasElement>(null);
+  const count = useRef(0);
+  useEffect(() => {
+    const target = canvas.current!;
+    const context = target.getContext('2d')!;
+    let frame = 0;
+    const draw = () => {
+      count.current++;
+      target.dataset.frames = String(count.current);
+      context.clearRect(0, 0, 320, 100);
+      context.fillStyle = environment.theme === 'arknights' ? '#d0ef82' : environment.theme === 'neo-brutalism' ? '#e95725' : '#507058';
+      context.beginPath(); context.arc(160 + Math.sin(count.current / 25) * 110, 50, 14, 0, Math.PI * 2); context.fill();
+      if (!environment.paused && !environment.reducedMotion) frame = requestAnimationFrame(draw);
+    };
+    draw();
+    return () => cancelAnimationFrame(frame);
+  }, [environment.paused, environment.reducedMotion, environment.theme]);
+  return <div className="review-product"><Stack gap={4}><Text as="h1" variant="title">桌面工作区</Text>
+    {dimensions.connection === 'error' ? <Notice title="合成连接失败" /> : dimensions.connection === 'waiting' ? <p role="status">等待模拟连接…</p> : <p>平台模拟已连接 · {dimensions.quota === 'empty' ? '暂无用量' : '合成用量 42'}</p>}
+    <TextField label="工作区名称" value={draft} onChange={event => { setDraft(event.target.value); setSaved(false); }} />
+    <Button disabled={dimensions.connection !== 'ready'} onClick={async () => { await client.save(draft); setSaved(true); }}>保存工作区</Button>
+    {saved && <p role="status">内存工作区已保存</p>}
+    <canvas ref={canvas} width={320} height={100} aria-label="合成动态画布" />
+    <p>{environment.reducedMotion ? '减少动态' : environment.paused ? '已暂停' : '动态播放'}</p>
+  </Stack></div>;
+}

package/examples/review/platform/catalog.tsx

@@ -0,0 +1,46 @@
+import { defineReview, type ReviewScene } from '@linhey/rhine-design/review';
+const workspace: ReviewScene = {
+  id: 'workspace', title: '桌面工作区', group: '平台接口',
+  motionControls: ['full', 'paused'],
+  source: 'examples/review/platform/Workspace.tsx',
+  description: '仅注入内存平台 client，不调用原生配置、下载或业务剪贴板。Canvas 通过显式环境属性暂停、减少动态和恢复。',
+  dimensions: [
+    { id: 'connection', label: '连接阶段', options: [{ id: 'ready', label: '已连接' }, { id: 'waiting', label: '等待连接' }, { id: 'error', label: '连接失败' }] },
+    { id: 'quota', label: '用量状态', options: [{ id: 'normal', label: '正常用量' }, { id: 'empty', label: '暂无用量' }] },
+  ],
+  async setup(context) {
+    const { Workspace } = await import('./Workspace');
+    context.signal.throwIfAborted();
+    let current = '合成工作区';
+    const client = {
+      read: () => current,
+      save: async (value: string) => { context.signal.throwIfAborted(); current = value; context.report('已更新内存工作区名称'); },
+    };
+    return {
+      render: environment => <Workspace client={client} environment={environment} dimensions={context.dimensions} />,
+      dispose() { current = ''; },
+    };
+  },
+};
+export default defineReview({
+  title: '桌面工作区 · 平台示例', scenes: [workspace, {
+    id: 'slow', title: '慢速初始化', group: '生命周期', description: '等待期间可以切回工作区；定时器与迟到结果必须清理。',
+    async setup(context) {
+      await new Promise<void>((resolve, reject) => {
+        const timer = setTimeout(resolve, 4000);
+        context.onDispose(() => { clearTimeout(timer); reject(new DOMException('Disposed', 'AbortError')); });
+      });
+      context.signal.throwIfAborted();
+      return { render: () => <p>慢速初始化完成</p>, dispose() {} };
+    },
+  }, {
+    id: 'stuck-cleanup', title: '清理挂起恢复', group: '故障恢复', description: '离开此场景会遇到永不结束的合成清理；10 秒后可在外层重新载入画布恢复。',
+    setup: () => ({ render: () => <p>此场景模拟清理挂起，请切换到桌面工作区验证恢复。</p>, dispose: () => new Promise<void>(() => {}) }),
+  }, {
+    id: 'cleanup-error', title: '清理错误留存', group: '故障恢复',
+    setup: () => ({ render: () => <p>离开此场景后，合成清理错误应保留到显式确认。</p>, dispose() { throw new Error('合成清理失败'); } }),
+  }, {
+    id: 'failure', title: '渲染错误边界', group: '生命周期',
+    setup: () => ({ render() { throw new Error('合成渲染失败'); }, dispose() {} }),
+  }],
+});

package/examples/review/platform/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { reviewPlugin } from '@linhey/rhine-design/review/vite';
+export default defineConfig(({ command }) => ({
+  root: import.meta.dirname, base: command === 'serve' ? '/review-platform/' : './',
+  plugins: [react(), reviewPlugin({ catalog: './catalog.tsx' })],
+  build: { outDir: '../../../dist/review-platform', emptyOutDir: true },
+}));

package/examples/review/product.css

@@ -0,0 +1,3 @@
+.review-product { padding: 24px; max-width: 840px; margin: 0 auto; overflow-wrap: anywhere; }
+.review-product canvas { display: block; max-width: 100%; border: 1px solid var(--rhine-line); }
+@media (max-width: 400px) { .review-product { padding: 12px; } }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linhey/rhine-design",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",
@@ -23,7 +23,12 @@
     "./styles.css": "./components/styles.css",
     "./theme-arknights.css": "./components/theme-arknights.css",
     "./theme-neo-brutalism.css": "./components/theme-neo-brutalism.css",
-    "./logo.svg": "./components/assets/logo.svg"
+    "./logo.svg": "./components/assets/logo.svg",
+    "./review": "./review/index.ts",
+    "./review/vite": {
+      "types": "./review/vite.d.mts",
+      "import": "./review/vite.mjs"
+    }
   },
   "sideEffects": [
     "./components/index.ts",
@@ -47,15 +52,22 @@
     "vitest.config.ts",
     "package-lock.json",
     "scripts",
-    "skills"
+    "skills",
+    "review",
+    "examples/review/*/*.ts",
+    "examples/review/*/*.tsx",
+    "examples/review/*.css"
   ],
   "scripts": {
     "dev": "vite --host 127.0.0.1 --port 18309 --strictPort",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "build": "npm run typecheck && vite build && node scripts/check-build.mjs",
-    "check": "npm run test && npm run build",
-    "prepublishOnly": "npm run check"
+    "check": "npm run test && npm run build && npm run review:build && node scripts/check-review-package.mjs",
+    "prepublishOnly": "npm run check",
+    "review:http": "vite --config examples/review/http/vite.config.ts --host 127.0.0.1 --port 18340 --strictPort",
+    "review:platform": "vite --config examples/review/platform/vite.config.ts --host 127.0.0.1 --port 18341 --strictPort",
+    "review:build": "vite build --config examples/review/http/vite.config.ts && vite build --config examples/review/platform/vite.config.ts"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/preview/CommonGallery.tsx

@@ -30,6 +30,6 @@ export function CommonGallery({ section }: { section?: string }) {
       <Menu label="更多操作" trigger={<Button variant="secondary">更多操作</Button>} items={[{id:'refresh',label:'刷新',onSelect:()=>setAction('菜单：刷新')},{id:'disabled',label:'导出（暂不可用）',disabled:true,onSelect:()=>{}},{id:'archive',label:'归档示例',danger:true,onSelect:()=>setAction('菜单：归档示例')}]}/>
       <Dialog trigger={<Button variant="secondary">打开对话框</Button>} title="编辑工作区" description="此对话框仅演示输入、焦点与关闭行为。"><Stack><TextField label="工作区名称" defaultValue="研究工作区"/><Textarea label="工作区说明"/><Popover trigger={<Button variant="secondary">对话框内详情</Button>} title="嵌套详情"><Text>Escape先关闭当前气泡，再返回对话框。</Text></Popover></Stack></Dialog>
       <ConfirmDialog trigger={<Button variant="danger">打开确认框</Button>} title="停止演示任务？" description="这是合成操作，不会修改实际同步。默认焦点在取消按钮。" confirmLabel="停止演示任务" danger onConfirm={async()=>{if(confirmFail)throw new Error('demo');setAction('确认已完成（演示）');}}/>
-    </Inline><Checkbox label="模拟确认操作失败" checked={confirmFail} onChange={event=>setConfirmFail(event.target.checked)}/><Text variant="caption" tone="muted">{action}。Tab/方向键/Escape可操作；减少动态保留相同功能。</Text><Divider/><Inline><Button variant="secondary" onClick={()=>{setToastTone('success');setToast(true);}}>显示成功通知</Button><Button variant="secondary" onClick={()=>{setToastTone('error');setToast(true);}}>显示错误通知</Button></Inline><Toast open={toast} onOpenChange={setToast} tone={toastTone} title={toastTone==='success'?'演示操作已完成':'演示操作失败'} description={toastTone==='success'?'5秒后关闭；悬停、聚焦或页面隐藏时暂停。':'错误通知保持显示，请重试或手动关闭。'}/></Stack></Surface></section>}
+    </Inline><Checkbox label="模拟确认操作失败" checked={confirmFail} onChange={event=>setConfirmFail(event.target.checked)}/><Text variant="caption" tone="muted">{action}。Tab/方向键/Escape可操作；减少动态保留相同功能。</Text><Divider/><Inline><Button variant="secondary" onClick={()=>{setToastTone('success');setToast(true);}}>显示成功通知</Button><Button variant="secondary" onClick={()=>{setToastTone('error');setToast(true);}}>显示错误通知</Button></Inline><Toast placement="floating" open={toast} onOpenChange={setToast} tone={toastTone} title={toastTone==='success'?'演示操作已完成':'演示操作失败'} description={toastTone==='success'?'5秒后关闭；悬停、聚焦或页面隐藏时暂停。':'错误通知保持显示，请重试或手动关闭。'}/></Stack></Surface></section>}
   </>;
 }

package/preview/DenseFilterControlsGallery.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Button, DateRangePicker, Inline, RemoteMultiSelect, Stack, Surface, Text, type Choice, type DateRange } from '../components';
+import { Button, DateRangePicker, Dialog, Inline, RemoteMultiSelect, Stack, Surface, Text, type Choice, type DateRange } from '../components';
 
 const departments: Choice[] = Array.from({ length: 100 }, (_, i) => ({ value: `synthetic-${i}`, label: `合成部门 ${i + 1}${i % 8 === 0 ? ' · 跨团队协作与长期计划' : ''}` }));
 
@@ -12,9 +12,12 @@ export function DenseFilterControlsGallery() {
   const options = departments.filter(item => item.label.includes(query));
   return <Surface><Stack gap={4}>
     <Text as="h2" variant="heading">密集筛选控件</Text>
-    <Text tone="muted">100 个合成部门、90 个已选项；可搜索、展开移除或清空。日期保留原生键盘和日历。</Text>
+    <Text tone="muted">100 个合成部门、90 个已选项；可搜索、再次点选取消、完成选择收起、展开移除或清空。日期保留原生键盘和日历。</Text>
     <Inline gap={2}><Button variant="secondary" onClick={() => setSelected(departments)}>全选部门</Button><Button variant="quiet" onClick={() => setSelected([])}>清空部门</Button></Inline>
     <RemoteMultiSelect label="部门" query={query} onQueryChange={setQuery} value={selected} onValueChange={setSelected} options={options} maxVisibleTags={2} placeholder="搜索部门" />
+    <Dialog trigger={<Button variant="secondary">在弹窗内选择</Button>} title="搜索多选" description="再次点击已选项可取消；完成选择只收起列表，不提交表单。">
+      <RemoteMultiSelect label="弹窗部门" query={query} onQueryChange={setQuery} value={selected} onValueChange={setSelected} options={options} maxVisibleTags={2}/>
+    </Dialog>
     <DateRangePicker compact label="日期区间" value={date} onValueChange={setDate} min="2026-01-01" max="2026-12-31" clearable={false} required onValidationChange={setError} />
     <Text variant="caption" tone="muted">{error || `${date.start} 至 ${date.end}`}</Text>
   </Stack></Surface>;

package/preview/GalleryShell.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState, type ReactNode } from 'react';
 import { Breadcrumbs, Button, Logo, SegmentedControl, Select, SideNav } from '../components';
 import { ThemeProvider, themes, useTheme, type ThemeName } from '../components/theme';
+import { componentCount, packageVersion } from './packageInfo';
 import './shell.css';
 import './theme-arknights.css';
 import './theme-neo-brutalism.css';
@@ -9,7 +10,7 @@ export const galleryGroups = [
   { label: '开始', items: [['top', '设计总览'], ['subscriptions', '订阅管理示例'], ['compact-filters', '紧凑与大量筛选'], ['checkbox-rows', '侧栏双行多选'], ['component-typography', '组件文字配对']] },
   { label: '应用能力', items: [['app-shell', '背景与多侧栏'], ['advanced-forms', '复杂表单'], ['advanced-data', '受控数据表'], ['media', '媒体卡片与查看器'], ['monitoring', '健康详情与图表']] },
   { label: '设计语言', items: [['foundation', '视觉基础'], ['backgrounds', '场景背景'], ['spacing', '间距与组合'], ['typography', '字体与文字'], ['brand', '品牌标志']] },
-  { label: '通用组件', items: [['actions', '按钮与输入'], ['selection', '选择与切换'], ['feedback', '状态与加载'], ['disclosure', '展开与组合'], ['data', '数据与分页'], ['forms', '表单与选择'], ['utilities', '操作与布局'], ['overlays', '浮层与反馈'], ['overlay-bounds', '浮层缩放与边界'], ['settings-dialog', '设置导航弹窗'], ['theme-picker', '主题预览与选择'], ['navigation', '导航与步骤'], ['form-workflow', '表单流程']] },
+  { label: '通用组件', items: [['actions', '按钮与输入'], ['selection', '选择与切换'], ['summary-tabs', '带摘要的页签'], ['feedback', '状态与加载'], ['disclosure', '展开与组合'], ['data', '数据与分页'], ['forms', '表单与选择'], ['utilities', '操作与布局'], ['overlays', '浮层与反馈'], ['overlay-bounds', '浮层缩放与边界'], ['settings-dialog', '设置导航弹窗'], ['theme-picker', '主题预览与选择'], ['navigation', '导航与步骤'], ['form-workflow', '表单流程']] },
   { label: '交互与动效', items: [['patterns', '场景与交互指南'], ['compact-account', '紧凑账号与凭证'], ['list-filter-bar', '列表筛选栏'], ['date-range-filter', '日期筛选组合'], ['motion', '动效实验室'], ['startup', '启动动画'], ['orbit', '轨道星空'], ['neutron-star', '中子星']] },
 ] as const;
 export type GallerySection = typeof galleryGroups[number]['items'][number][0];
@@ -94,7 +95,7 @@ function GalleryContent({ motion, onMotionChange, children }: GalleryShellProps)
       <SideNav id="gallery-navigation" className="ds-sidebar-nav" aria-label="组件目录" currentId={section} groups={galleryGroups.map(group=>({label:group.label,items:group.items.map(([id,label])=>({id,label,href:`#${id}`}))}))} onNavigate={item=>{
         setMenuOpen(false); if(section===item.id) main.current?.focus({preventScroll:true});
       }}/>
-      <div className="ds-sidebar-foot"><span>COMPONENT LIBRARY</span><span>66 个组件 · 0.8.0</span><span className="ak-readout">{readout}</span></div>
+      <div className="ds-sidebar-foot"><span>COMPONENT LIBRARY</span><span>{componentCount} 个组件 · 源码包版本 {packageVersion}</span><span>发布范围见版本记录</span><span className="ak-readout">{readout}</span></div>
     </aside>
     <main className="ds-workspace" id="gallery-content" ref={main} tabIndex={-1} aria-label={label}>
       <header className="ds-workspace-head"><Breadcrumbs label="展台位置" items={[{label:"组件展台",href:"#top"},{label}]} /><div className="ds-head-controls"><SegmentedControl label="动效偏好" items={[{value:'system',label:'跟随系统'},{value:'reduced',label:'减少动态'}]} value={motion} onValueChange={onMotionChange} /><Select label="界面主题" value={theme} onChange={event => {

package/preview/OrbitGallery.tsx

@@ -12,7 +12,7 @@ export function OrbitGallery() {
     <div className="ds-section-title"><span>ORBIT</span><h2>轨道星空 · 品牌艺术背景</h2></div>
     <p className="ds-caption">莱茵的折纸鸟、战术的悬浮源石晶簇、橙趣的草莓甜甜圈。每个主题都有自己的物件，也可以切换到原始深色星空。</p>
     <Inline gap={3}>
-      <Badge>0.7.0</Badge>
+      <Badge>主题艺术自 0.8.0 提供</Badge>
       <SegmentedControl label="画面风格" value={appearance} onValueChange={value => setAppearance(value as 'theme' | 'original')} items={[{ value: 'theme', label: '跟随主题' }, { value: 'original', label: '原始深色' }]} />
       <Button variant="secondary" onClick={() => setReplay(value => value + 1)}>重播轨道</Button>
       <Switch label="减少轨道动态" checked={reduced} onCheckedChange={setReduced} />

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()) };
+}