@linhey/rhine-design 0.11.1 → 0.11.2

package/docs/TRAY_USAGE.md

@@ -0,0 +1,34 @@
+# 托盘用量与账号组合（#56，未发布）
+
+本规范采用issue #56在2026-10-27的两条最新评论，取代旧“管理/查看用量/打开应用为次级动作、切换留在主窗口”的建议；最新偏好同时移除可见标题/关闭整行。本轮不改版本，不代表npm 0.11.1冻结制品或消费应用已经包含新能力。
+
+## 信息顺序与动作
+
+顶部从当前Agent的明确账号Select开始，显示完整账号名、本周期剩余额度及周期/时区。高频账号切换在上下文内完成；纯数值和名称不伪装成按钮。底部保留今日预估消费及币种、请求数、待计价数和更新时间。不放管理、查看用量或打开应用按钮。共享成员各列周期剩余，不累加百分比；多个连接共用同一上游时明确其共享关系。
+
+未知额度显示未知/不可用，不传Progress的0值冒充。加载提供Skeleton，低额度有文字说明；未匹配连接不猜测余额。刷新失败可保留可信缓存但明确上次数据和时间；账号目录过期禁用切换。未登录仅显示登录提示，移除旧账号、用量和共享成员内容。
+
+## 通用Popover API
+
+`Popover.showHeader?: boolean` 默认true，保留已有可见标题及关闭按钮。设false只移除该行；必填、非空的`title`仍作为dialog的aria-label。不要用空title消除重复标题。触发器必须是具名、可聚焦并接收ref的元素，如IconButton；图标切换、外点和Escape沿用Radix，键盘关闭归还触发器，外点不抢走用户点击的焦点。隐藏头部适用于内容已有明确起点的简洁详情，复杂任务继续使用有可见退出入口的Dialog。
+
+```tsx
+<Popover title="账号与用量概览" showHeader={false} open={open} onOpenChange={setOpen}
+  trigger={<IconButton icon="chart" label="切换用量面板" />}>
+  <Stack>{/* Select / Metric / Progress / Notice / Skeleton */}</Stack>
+</Popover>
+```
+
+只使用公共Popover的边界、滚动、缩放与主题能力，不覆盖其内部选择器、不另造产品托盘组件。浏览器浮层不是原生系统菜单或真实桌面托盘。
+
+## 宿主切换契约
+
+宿主保有已确认账号和待确认目标两个状态。立即锁住请求入口并禁用当前账号选择；请求完成前保留已确认账号和额度。只有确认成功才同时替换账号与额度；失败保留原值、允许同一目标重试。其他Agent和今日统计不跟随目标账号切换重置。加载、目录过期、连接处理中、未匹配和未登录不可切换；同步请求锁防止同一事件批次重复提交。
+
+为反馈保留稳定空间。示例让空闲、处理、失败加重试、成功四种反馈共同参与同一网格的固有尺寸，非当前状态visibility:hidden且aria-hidden，不能聚焦；无需截断长错误或写死单行高度。状态切换保持同一视口下反馈区和内容高度；视口、文字长度变化可自然重排。
+
+场景重置、身份失效、切换目录和卸载时取消模拟任务，并用递增请求标识拒绝迟到结果。实际请求取消、鉴权、目录校验、账号与额度的一致性由产品宿主实现；库不请求网络、不承诺业务事务。示例首次失败后可重试成功，仅为可复现测试。
+
+## 展台
+
+`#tray-usage` 和 `?fixture=tray-usage` 默认显示图标与展开面板；重置恢复初始合成数据。提供九种数据场景、长账号、首次切换失败，第二Agent和底部统计用于核对隔离。共享12成员使用Popover内部滚动。验收脚本 `scripts/check-tray-usage.js` 使用当前生产origin；`native=1`只选择原生缩放矩阵，运行前仍须在独立Chrome设置真实200%网页缩放。

package/docs/TRAY_USAGE_VERIFICATION.md

@@ -0,0 +1,13 @@
+# 托盘用量组合验收（#56，未发布）
+
+2026-10-27，Node24 / macOS / Chrome，合成账号与用量；源码绑定本记录所属PR最终head。入口 `?fixture=tray-usage`，回归脚本 `scripts/check-tray-usage.js` 从当前页面取生产origin。未连接账号服务或原生托盘。
+
+- PASS：`npm run check`，43文件/323测试，类型、生产构建、评审示例与包内容检查。新增4项行为测试覆盖header默认兼容及可访问名称、重复提交/确认前原值/失败重试/数据隔离、禁用条件/重置和退出登录拒绝迟到结果、未知与缓存标记。
+- PASS：生产Chrome三主题 × 400/520/880 × 100%/200% CSS zoom，18组；九种数据场景、长名称、共享12成员和末项/底部可达、未知无百分比进度、过期禁用和缓存标记、未登录无旧数据。
+- PASS：切换前、处理中、失败、成功四阶段的反馈区高度与内容scrollHeight一致；确认前选择值仍为原账号，失败保留，重试成功，第二Agent/今日统计文本不变。图标切换、外点、Escape、Enter重开、焦点返回、重置通过。浮层无可见标题/关闭行，dialog名称仍非空；页面异常0。
+- PASS：独立Chrome profile的真实网页缩放200%，CSS zoom=1，400/520/880读回200/260/440 CSS px，三主题9组通过。`native=1`只选择矩阵，运行前须手动设置真实浏览器缩放；不是CSS或设备缩放模拟。
+- PASS：系统reduce与系统no-preference下的手动reduced分别测试；Popover、Skeleton和设置示例spinner的计算动画时长均0s。回归脚本手动阶段明确撤销系统reduce，避免混淆两条路径。此项也补充#53的独立手动减少动态证据。
+- FAIL（保留）：首轮点击被面板覆盖的外部场景控件超时；第二轮外点关闭等待超时，未确认组件根因；后续点击被面板遮挡的标题再次超时。最终先Escape关闭以切场景、待160ms进场结束后点击可见页面边缘，全部矩阵通过，不删除旧日志或把重试推定为组件修复。
+- N/A：真实账号目录/权限/切换事务、生产计费、原生系统托盘、npm发布和消费应用升级。浏览器行为不外推原生能力。
+
+生产主JS SHA-256 `c4bc41938a91450005d390625c231fff9ad0d53e5b91dcfde807fee36b4deb58`；CSS `5fd6e5023f2891b183dedad7f16b61bde46b5d585ea611d3fe21e00cbfdbf3ce`。截图、各次原始失败、矩阵JSON与制品保留于本地任务证据，公开记录不包含机器路径。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linhey/rhine-design",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

package/preview/ButtonActionsGallery.tsx

@@ -0,0 +1,25 @@
+import { useEffect, useRef, useState } from 'react';
+import { Button, ConfirmDialog, Inline, Select, Stack, Surface, Text, Toolbar } from '../components';
+
+export function ButtonActionsGallery() {
+  const [width,setWidth]=useState('520'),[state,setState]=useState('normal');
+  const [busy,setBusy]=useState<string|null>(null),[result,setResult]=useState('');
+  const lock=useRef(false),timer=useRef<ReturnType<typeof setTimeout>|undefined>(undefined);
+  useEffect(()=>()=>clearTimeout(timer.current),[]);
+  const run=(id:string)=>{if(lock.current)return;lock.current=true;setBusy(id);setResult('');timer.current=setTimeout(()=>{setBusy(null);lock.current=false;setResult(`${id}：合成操作完成，未改变真实会话。`);},700)};
+  return <section id="button-actions"><Stack gap={6}>
+    <Toolbar title="动作语义与尺寸" description="层级和后果决定配色；大尺寸强调独立操作，不自动表示危险。">
+      <Select label="按钮容器宽度" value={width} onChange={e=>setWidth(e.target.value)}>{['400','520','880'].map(v=><option key={v}>{v}</option>)}</Select>
+      <Select label="按钮状态" value={state} onChange={e=>setState(e.target.value)}><option value="normal">正常</option><option value="disabled">禁用</option><option value="busy">处理中</option><option value="long">长标签</option></Select>
+    </Toolbar>
+    <div style={{width:`${width}px`,maxWidth:'100%'}} data-button-actions><Stack gap={6}>
+      {(['standard','large'] as const).map(size=><Surface key={size}><Stack gap={3}><Text as="h3" variant="heading">{size==='standard'?'标准尺寸':'大尺寸 · 独立设置动作'}</Text><Inline gap={3}>
+        <Button size={size} variant="primary" disabled={state==='disabled'} busy={state==='busy'||busy===`${size}退出登录`} onClick={()=>run(`${size}退出登录`)}>{state==='long'?'退出当前合成工作区并保留已确认的设置':'退出登录'}</Button>
+        <Button size={size} variant="secondary" disabled={state==='disabled'} busy={state==='busy'||busy===`${size}断开连接`} onClick={()=>run(`${size}断开连接`)}>{state==='long'?'断开当前连接并保留可重新连接的配置':'断开连接'}</Button>
+        <ConfirmDialog trigger={<Button size={size} variant="danger" disabled={state==='disabled'} busy={state==='busy'}>{state==='long'?'永久删除选中的合成记录且无法恢复':'删除记录'}</Button>} title="删除合成记录" description="这条合成记录将无法恢复。这里只演示确认，不删除真实数据。" confirmLabel="确认删除" danger onConfirm={()=>setResult('删除：合成确认完成，未删除真实数据。')} />
+      </Inline><Text variant="caption">{size==='standard'?'14/22，至少44px，横内距16px':'16/24，至少52px，横内距24px'}。退出/断开可恢复，不自动使用危险色；删除明确提示不可恢复。</Text></Stack></Surface>)}
+      <Surface><Stack gap={3}><Text as="h3" variant="heading">窄表单的独立全宽动作</Text><Button size="large" style={{width:'100%'}} onClick={()=>run('全宽退出')} busy={busy==='全宽退出'}>退出登录</Button><Text variant="caption">使用原生width，长文自然换行；不要给所有工具栏动作铺满宽度。</Text></Stack></Surface>
+      <Text role="status">{result}</Text>
+    </Stack></div>
+  </Stack></section>;
+}

package/preview/ChatGallery.tsx

@@ -0,0 +1,98 @@
+import { useEffect, useRef, useState } from 'react';
+import { Badge, Button, ChatCard, ChatThread, Checkbox, Inline, Select, Stack, Surface, Text, Toolbar, type ChatEntry, type ChatStatus } from '../components';
+import './chat-gallery.css';
+
+const members = [{ id: 'a', name: '成员 A' }, { id: 'b', name: '成员 B' }, { id: 'c', name: '成员 C' }];
+const paragraph = '先保留原始证据，再比较两个版本的差异。长段落应完整换行，错误原因和未知状态不会被折叠隐藏；消息、引用与结构化结果各有清晰归属。';
+function message(id: string, member: number, minute: number, content: ChatEntry['content'], day = '今天 · 10 月 27 日'): ChatEntry {
+  return { id, kind: 'message', member: members[member], day, time: `10:${String(minute).padStart(2, '0')}`, dateTime: `2026-10-${day.startsWith('昨天') ? '26' : '27'}T10:${String(minute).padStart(2, '0')}:00+08:00`, content };
+}
+const history = [
+  message('history-a', 0, 10, <p>这是更早的合成记录。资料清单包含版本说明、公开摘要和未确认项。</p>, '昨天 · 10 月 26 日'),
+  message('history-b', 1, 12, <><p>{paragraph}</p><p>{paragraph}</p><pre><code>{'const evidence = { source: "sample", verified: false };\n// 未确认不等于零，也不等于完成。'}</code></pre></>, '昨天 · 10 月 26 日'),
+];
+const states: [ChatStatus, string][] = [
+  ['pending', '资料核对请求，等待成员回应。'], ['accepted', '成员 B 已接受；尚未执行。'],
+  ['declined', '另一个可选请求被成员 C 拒绝，本分支结束。'], ['blocked', '等待公开资料补全，不显示无限加载。'],
+  ['running', '正在比较已到达的资料。'], ['partial', '已找到两处差异，结论仍不完整。'],
+  ['failed', '来源样例暂不可用。保留部分结果，可由有权限的成员稍后重试。'],
+  ['unknown', '来源没有提供最终状态，不能推断成功。'], ['cancelled', '成员停止了该分支，已有内容保留。'],
+  ['expired', '请求超过有效期，后续操作由宿主决定。'], ['succeeded', '独立的摘要归档已确认完成。'],
+];
+
+/** A host example using public exports only; all timers and transitions are synthetic host state. */
+export function ChatGallery() {
+  const [scene, setScene] = useState('pair');
+  const [layout, setLayout] = useState('after');
+  const [width, setWidth] = useState('880');
+  const [request, setRequest] = useState<ChatStatus>('pending');
+  const [older, setOlder] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [historyError, setHistoryError] = useState('');
+  const [failHistory, setFailHistory] = useState(false);
+  const [streamState, setStreamState] = useState<ChatStatus>('unknown');
+  const [chunks, setChunks] = useState(0);
+  const [arrivals, setArrivals] = useState(0);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const running = streamState === 'running';
+  useEffect(() => {
+    if (!running) return;
+    const interval = setInterval(() => setChunks(value => value + 1), 220);
+    return () => clearInterval(interval);
+  }, [running]);
+  useEffect(() => { if (chunks >= 24 && running) setStreamState('partial'); }, [chunks, running]);
+  useEffect(() => () => { if (timer.current) clearTimeout(timer.current); }, []);
+  function resetScene(next: string) {
+    if (timer.current) clearTimeout(timer.current);
+    setScene(next); setOlder(false); setLoading(false); setHistoryError(''); setChunks(0); setStreamState('unknown'); setArrivals(0); setRequest('pending');
+  }
+  const before = layout === 'before';
+  const requestCard = before ? <Surface><Stack gap={3}><Badge>待回应</Badge><Text as="h3" variant="heading">资料核对请求</Text><Text>比较版本并附上依据。</Text><Button variant="quiet">查看条款</Button></Stack></Surface>
+    : <ChatCard title="资料核对请求" status={request} summary="比较版本并附上依据。" actions={<><Button variant="quiet" aria-disabled={request !== 'pending'} onClick={() => { if (request === 'pending') setRequest('accepted'); }}>接受请求</Button><Button variant="quiet" aria-disabled={request !== 'pending'} onClick={() => { if (request === 'pending') setRequest('declined'); }}>拒绝请求</Button></>}>
+      <p>仅比较公开的合成资料，保留未知项；接受不代表运行完成。</p><a href="https://example.com">来源示例 · example.com</a>
+    </ChatCard>;
+  const pair: ChatEntry[] = [
+    message('a1', 0, 23, <p>需要一起核对资料变化。</p>),
+    message('a2', 0, 24, requestCard),
+    message('b1', 1, 25, <><p>先查看这段依据：</p><blockquote>“比较版本并附上依据。”<br /><a href="https://example.com">公开来源示例</a></blockquote><p>{paragraph}</p></>),
+    message('b2', 1, 26, <><pre><code>{'const result = {\n  status: "partial",\n  source: "synthetic-example-with-a-very-long-unbroken-identifier-0123456789"\n};'}</code></pre><p><strong>尚未确认：</strong>补全来源后再形成最终结论。</p></>),
+    message('a3', 0, 32, <ChatCard title="来源核验" status="failed" summary="公开样例暂不可用，已保留部分内容。请稍后重新核对。"><p>{paragraph.repeat(3)}</p></ChatCard>),
+    message('b3', 1, 33, <ChatCard title="结果摘要" status="unknown" summary="尚未收到最终确认，不将结束视为成功。"><p>完整产物由宿主在独立详情视图呈现；聊天内保留摘要和来源。</p></ChatCard>),
+  ];
+  const team: ChatEntry[] = [pair[0], pair[1], { id: 'event1', kind: 'event', day: '今天 · 10 月 27 日', content: '10:25 · 成员 C 加入记录（合成事件）' },
+    message('c1', 2, 25, <><p>我补充一份公开来源，成员身份没有左右主从之分。</p><blockquote>{paragraph}</blockquote></>), pair[2], pair[3], pair[4], pair[5]];
+  const observing = scene === 'observer';
+  const observation: ChatEntry[] = states.map(([status, summary], index) => message(`observation-${status}`, index % 3, index + 20,
+    <ChatCard title={`记录 ${index + 1} · 资料核对`} status={status} summary={summary}><p>{paragraph}</p><pre><code>{`{ "state": "${status}", "synthetic": true }`}</code></pre></ChatCard>));
+  const entries = [ ...(older ? history : []), ...(observing ? observation : scene === 'team' ? team : pair),
+    ...Array.from({ length: arrivals }, (_, i) => message(`arrival-${i}`, 2, 40, <p>新到达的合成消息 {i + 1}。上翻历史时不会强制回到这里。</p>)),
+    ...(chunks || running || streamState === 'cancelled' || streamState === 'failed' ? [message('stream', 1, 45,
+      <ChatCard title="合成流式记录" status={streamState} summary={<><p>{streamState === 'cancelled' ? '生成已取消；保留部分内容，未确认成功。' : streamState === 'failed' ? '合成连接中断；保留部分内容，未确认成功。' : '文字逐段到达，终态由宿主提供。'}</p><p>{paragraph.repeat(Math.ceil(chunks / 3)).slice(0, chunks * 25)}</p></>}><p>分片计数：{chunks}。仅用于合成演示，未调用模型。</p></ChatCard>)] : []),
+  ];
+  return <section id="agent-chat"><Stack gap={6}>
+    <Toolbar title="Agent Chat · 对话与记录" description="正文优先，成员平等；摘要紧随消息，阅读位置由读者掌握。">
+      <Select label="聊天场景" value={scene} onChange={e => resetScene(e.target.value)}><option value="pair">两成员连续对话</option><option value="team">三成员与事件混排</option><option value="observer">只读观察与历史</option></Select>
+      <Select label="聊天容器宽度" value={width} onChange={e => setWidth(e.target.value)}><option>400</option><option>520</option><option>880</option></Select>
+      <Select label="排版对照" value={layout} onChange={e => setLayout(e.target.value)}><option value="after">规范组合</option><option value="before">问题结构复现</option></Select>
+    </Toolbar>
+    <div className="chat-gallery-canvas" style={{ width: `${width}px` }}>
+      {before ? <Surface><Stack gap={6}>{entries.map(entry => <div key={entry.id}>{entry.kind === 'message' && <Inline gap={2}><Text>{entry.member.name}</Text><Text variant="caption">{entry.time}</Text></Inline>}{entry.content}</div>)}</Stack></Surface>
+        : <ChatThread key={scene} label="合成聊天消息" entries={entries} readOnly={observing} hasEarlier={!older} loadingEarlier={loading} historyError={historyError}
+          announcement={running ? '正在接收合成记录' : streamState === 'cancelled' ? '已取消，保留部分内容' : streamState === 'failed' ? '连接中断，未完成' : ''}
+          onLoadEarlier={() => {
+            setLoading(true); setHistoryError('');
+            timer.current = setTimeout(() => { setLoading(false); if (failHistory) setHistoryError('合成历史加载失败。取消下方失败模拟后，可重新加载。'); else setOlder(true); timer.current = null; }, 600);
+          }} />}
+    </div>
+    <Surface><Stack gap={3}><Text as="h2" variant="heading">合成数据演示控制</Text><Text tone="muted">此处只控制展台数据，不代表成员操作。上翻消息或打开详情后，播放新记录检查阅读位置。</Text>
+      <Inline gap={2}>
+        <Button variant="secondary" onClick={() => setArrivals(value => value + 1)}>到达一条合成消息</Button>
+        <Button variant="secondary" disabled={running} onClick={() => { setChunks(0); setStreamState('running'); }}>播放合成流式记录</Button>
+        <Button variant="quiet" aria-disabled={!running} onClick={() => { if (running) setStreamState('cancelled'); }}>取消演示生成</Button>
+        <Button variant="quiet" aria-disabled={!running} onClick={() => { if (running) setStreamState('failed'); }}>模拟连接失败</Button>
+      </Inline>
+      <Checkbox label="下次历史加载失败" checked={failHistory} onChange={event => setFailHistory(event.target.checked)} />
+      <Text variant="caption">离开本章节或切换场景会清理计时器；自然结束保留「部分结果」，不会自行宣称成功。</Text>
+    </Stack></Surface>
+  </Stack></section>;
+}

package/preview/CompactSelectionGallery.tsx

@@ -0,0 +1,76 @@
+import { useEffect, useRef, useState } from 'react';
+import { Badge, Button, Dialog, Icon, Inline, Menu, Select, Stack, Surface, Tabs, Text, Toolbar } from '../components';
+import './compact-selection.css';
+
+export function CompactSelectionGallery() {
+  const [width, setWidth] = useState('880'), [scenario, setScenario] = useState('normal');
+  const [selected, setSelected] = useState('a'), [pending, setPending] = useState<string | null>(null), [error, setError] = useState('');
+  const [confirmed, setConfirmed] = useState('alpha'), [draft, setDraft] = useState('alpha');
+  const [dialogOwner, setDialogOwner] = useState('a');
+  const [open, setOpen] = useState(false), [saving, setSaving] = useState(false), [saveError, setSaveError] = useState('');
+  const [page, setPage] = useState('two'), [tab, setTab] = useState('one'), [layout, setLayout] = useState<'content' | 'fill'>('content');
+  const request = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const saveRequest = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const locked = useRef(false), saveLock = useRef(false);
+  useEffect(() => () => { clearTimeout(request.current); clearTimeout(saveRequest.current); }, []);
+  const choose = (id: string) => {
+    if (locked.current || id === selected) return;
+    locked.current = true; setPending(id); setError('');
+    request.current = setTimeout(() => {
+      if (scenario === 'error') setError('切换失败，保留最后确认项。'); else setSelected(id);
+      locked.current = false; setPending(null);
+    }, 700);
+  };
+  const changeOpen = (next: boolean) => {
+    if (saveLock.current) return;
+    setOpen(next); setDraft(confirmed); setSaveError(''); setPage('two');
+  };
+  const save = () => {
+    if (saveLock.current || draft === confirmed) return;
+    saveLock.current = true; setSaving(true); setSaveError('');
+    saveRequest.current = setTimeout(() => {
+      if (scenario === 'error') setSaveError('保存失败，请重试；确认值未改变。'); else setConfirmed(draft);
+      saveLock.current = false; setSaving(false);
+    }, 700);
+  };
+  const groupName = (value: string) => ({alpha:'示例组',beta:'联合研究组',none:'未绑定',unknown:'未知组'})[value] || value || '未选择';
+  useEffect(() => { if (page !== 'loading') return; const timer = setTimeout(() => setPage('two'), 600); return () => clearTimeout(timer); }, [page]);
+  const count = page === 'four' ? 4 : page === 'two' ? 2 : page === 'last' ? 1 : 0;
+  const items = [
+    { id:'a', name: scenario === 'long' ? '跨区域联合研究与长期设计验证的合成对象名称' : '合成对象 A', menu:false },
+    { id:'b', name: scenario === 'long' ? '跨区域联合研究与长期设计验证的合成备用对象' : '合成对象 B', menu:true },
+  ];
+  return <section id="compact-selection"><Stack gap={6}>
+    <Toolbar title="紧凑选择与预览保存" description="正文配对、稳定状态位和动作列；选择先预览，保存后才确认。">
+      <Select label="组合宽度" value={width} onChange={e=>setWidth(e.target.value)}>{['400','520','880'].map(v=><option key={v}>{v}</option>)}</Select>
+      <Select label="组合场景" value={scenario} onChange={e=>setScenario(e.target.value)}><option value="normal">正常</option><option value="long">长名称与多行标签</option><option value="error">失败</option><option value="unbound">未绑定</option><option value="unknown">未知</option><option value="disabled">只读</option><option value="loading">加载</option></Select>
+      <Select label="页签布局" value={layout} onChange={e=>setLayout(e.target.value as 'content'|'fill')}><option value="content">内容宽度左对齐</option><option value="fill">均分铺满</option></Select>
+    </Toolbar>
+    <div className="ds-compact-selection" style={{width:`${width}px`,maxWidth:'100%'}}>
+      <Tabs label="选择摘要" layout={layout} value={tab} onValueChange={setTab} items={[
+        {value:'one',label:'工作区',status:<Badge>{pending?'处理中':'可用'}</Badge>,content:<Text>合成身份完整展示在这里，不在页签重复第二行。</Text>},
+        {value:'two',label:'备用区',status:<Badge>已停止</Badge>,content:<Text>备用区身份与说明。</Text>},
+      ]}/>
+      <div className="ds-compact-selection__cards">{items.map(item=><Surface key={item.id} padding="none" className="ds-choice-card" data-card={item.id}>
+        <div className="ds-choice-card__info"><Inline gap={2}><Text as="h3" variant="heading">{item.name}</Text><span className="ds-choice-card__status">{selected===item.id?<Badge tone="success">当前项</Badge>:null}</span></Inline>
+          <Text variant="caption" tone="muted">研究类型 · 合成额度 120</Text>
+          <div className="ds-inline-choice"><Text variant="body">{scenario==='long'?'授权分组与跨区域研究范围':'授权分组'}</Text>
+            <Dialog trigger={<Button variant="secondary" contentAlign="between" disabled={scenario==='disabled'} busy={scenario==='loading'} aria-label={`选择 ${item.name} 的授权分组`} style={{width:180,maxWidth:'100%'}} onClick={()=>{}}>{scenario==='unbound'?'未绑定':scenario==='unknown'?'未知组':groupName(confirmed)}<Icon name="chevronDown" /></Button>}
+              title="分组选择" description="选择仅更新预览；保存后生效。" height={560} open={open && item.id===dialogOwner} onOpenChange={next=>{if(next) setDialogOwner(item.id);changeOpen(next);}}
+              footer={<Inline style={{justifyContent:'flex-end'}}><Button busy={saving} disabled={draft===confirmed || !draft} onClick={save}>保存</Button></Inline>}
+              sidePanel={<Stack gap={3}><Text as="h3" variant="heading">预览：{groupName(draft)}</Text><Text>已确认：{groupName(confirmed)}</Text><Select label="预览内容" value={page} onChange={e=>setPage(e.target.value)}><option value="two">两条</option><option value="four">四条</option><option value="last">末页一条</option><option value="empty">空组</option><option value="loading">异步加载</option><option value="error">读取错误</option></Select>
+                {count>0?Array.from({length:count},(_,i)=><Text key={i}>合成记录 {i+1}：用于比较候选内容。{'长详情用于验证内部滚动。'.repeat(5)}</Text>):<Text role="status">{page==='loading'?'正在读取预览…':page==='error'?'预览读取失败，请重试。':'暂无记录'}</Text>}</Stack>}>
+              <Stack gap={4}><Select label="候选分组" value={draft} disabled={saving} onChange={e=>setDraft(e.target.value)}><option value="">未选择</option><option value="alpha">示例组</option><option value="beta">联合研究组</option><option value="none">未绑定</option><option value="unknown">未知组</option></Select><Text role="status">{saving?'正在保存…':saveError}</Text></Stack>
+            </Dialog>
+          </div>
+        </div>
+        <div className="ds-choice-card__actions"><Dialog trigger={<Button variant="secondary" style={{width:64}}>详情</Button>} title={`${item.name}详情`} description="只读详情在其他写入处理中仍可访问。"><Text>纯合成记录。</Text></Dialog>
+          {item.menu?<Menu label={`${item.name}操作`} trigger={<Button variant="secondary" style={{width:112}} disabled={!!pending && pending!==item.id} busy={pending===item.id}>切换操作</Button>} items={[{id:'choose',label:'设为当前项',disabled:!!pending||selected===item.id,onSelect:()=>choose(item.id)}]}/>:<Button style={{width:112}} busy={pending===item.id} disabled={selected===item.id||(!!pending&&pending!==item.id)} onClick={()=>choose(item.id)}>设为当前</Button>}
+        </div>
+      </Surface>)}</div>
+      <Text role="status">{error}</Text>
+      <Surface padding="none" className="ds-choice-card"><div><Text as="h3" variant="heading">永久不可用对象</Text><Text>已停用 · 无法切换，详情仍可访问。</Text></div><Dialog trigger={<Button variant="secondary" style={{width:64}}>详情</Button>} title="停用详情" description="原因保留可见。"><Text>合成停用原因。</Text></Dialog></Surface>
+      <Surface><Stack gap={2}><Text as="h3" variant="heading">密度反例（不推荐）</Text><Inline><Text variant="caption">授权分组</Text><Button variant="secondary">示例组<Icon name="chevronDown" /></Button><Button variant="secondary">详情</Button></Inline><Text variant="caption">caption 12/18 辅助标签搭配标准按钮，文字份量失配。上方推荐行采用14/22标签和值，标题16/24保留层级，命中均不小于44px。</Text></Stack></Surface>
+    </div>
+  </Stack></section>;
+}

package/preview/GalleryShell.tsx

@@ -10,8 +10,8 @@ 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', '选择与切换'], ['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', '中子星']] },
+  { label: '通用组件', items: [['button-actions', '动作语义与尺寸'], ['actions', '按钮与输入'], ['selection', '选择与切换'], ['summary-tabs', '带摘要的页签'], ['feedback', '状态与加载'], ['disclosure', '展开与组合'], ['data', '数据与分页'], ['forms', '表单与选择'], ['utilities', '操作与布局'], ['overlays', '浮层与反馈'], ['overlay-bounds', '浮层缩放与边界'], ['tray-usage', '托盘用量组合'], ['settings-composition', '设置页组合'], ['settings-dialog', '设置导航弹窗'], ['theme-picker', '主题预览与选择'], ['nav-actions', '导航行操作'], ['navigation', '导航与步骤'], ['form-workflow', '表单流程']] },
+  { label: '交互与动效', items: [['patterns', '场景与交互指南'], ['agent-chat', '聊天消息与记录'], ['compact-selection', '紧凑选择与保存'], ['compact-account', '紧凑账号与凭证'], ['single-search', '单输入搜索'], ['list-filter-bar', '列表筛选栏'], ['date-range-filter', '日期筛选组合'], ['motion', '动效实验室'], ['startup', '启动动画'], ['orbit', '轨道星空'], ['neutron-star', '中子星']] },
 ] as const;
 export type GallerySection = typeof galleryGroups[number]['items'][number][0];
 const entries = galleryGroups.flatMap(group => [...group.items]);

package/preview/NavActionsGallery.tsx

@@ -0,0 +1,24 @@
+import { useRef, useState } from 'react';
+import { Dialog, Select, SideNav, Stack, Text, Toolbar } from '../components';
+export function NavActionsGallery() {
+  const [width, setWidth] = useState('520');
+  const [long, setLong] = useState(false);
+  const [current, setCurrent] = useState('a');
+  const [open, setOpen] = useState(false);
+  const returnFocus = useRef<HTMLButtonElement | null>(null);
+  const label = long ? '跨区域联合研究项目与长期设计验证的合成工作区' : '合成工作区';
+  return <section id="nav-actions"><Stack gap={6}>
+    <Toolbar title="导航行操作" description="导航链接与更多操作互为兄弟，空动作不占位。">
+      <Select label="导航容器宽度" value={width} onChange={e => setWidth(e.target.value)}>{['400', '520', '880'].map(value => <option key={value}>{value}</option>)}</Select>
+      <Select label="导航标题" value={long ? 'long' : 'normal'} onChange={e => setLong(e.target.value === 'long')}><option value="normal">普通</option><option value="long">长标题</option></Select>
+    </Toolbar>
+    <div style={{ width: `${width}px`, maxWidth: '100%' }}><SideNav aria-label="行操作示例" currentId={current} onNavigate={(item, event) => { event.preventDefault(); setCurrent(item.id); }} groups={[{ label: '合成项目', items: [
+      { id: 'a', label, href: '#nav-actions', icon: 'chart', actions: [{ id: 'details', label: '查看详情', onSelect: trigger => { returnFocus.current = trigger; setOpen(true); } }, { id: 'disabled', label: '暂不可用动作', disabled: true, onSelect: () => {} }] },
+      { id: 'b', label: '没有动作的工作区', href: '#nav-actions', actions: [] },
+    ] }]} /></div>
+    <Text role="status">当前导航：{current === 'a' ? label : '没有动作的工作区'}</Text>
+    <Dialog trigger={<button hidden type="button">受控详情入口</button>} title="工作区详情" description="由菜单打开的受控 Dialog。关闭后回到原行更多按钮。" open={open} onOpenChange={setOpen} onCloseAutoFocus={event => { event.preventDefault(); returnFocus.current?.focus(); }}>
+      <Text>纯合成内容；动作由调用方提供，不含权限判断。</Text>
+    </Dialog>
+  </Stack></section>;
+}

package/preview/SettingsCompositionGallery.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useRef, useState } from 'react';
+import { AppShell, AppShellToggle, Button, Checkbox, Inline, Select, SideNav, Stack, Surface, Text } from '../components';
+import { ThemeProvider, type ThemeName } from '../components/theme';
+
+export function SettingsCompositionGallery() {
+  const [open, setOpen] = useState(true), [state, setState] = useState('current');
+  const [long, setLong] = useState(false), [action, setAction] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  useEffect(() => () => clearTimeout(timer.current), []);
+  const reset = () => { clearTimeout(timer.current); setOpen(true); setState('current'); setLong(false); setAction(false); };
+  const check = () => { clearTimeout(timer.current); setState('checking'); timer.current = setTimeout(() => setState('available'), 1200); };
+  return <Stack>
+    <Text as="h2" variant="section">设置页组合</Text><Text>未发布示例 · 合成更新数据，宿主负责真实检查与安装。</Text>
+    <Select label="更新状态" value={state} onChange={e => { clearTimeout(timer.current); setState(e.target.value); }}>
+      <option value="current">已是最新</option><option value="checking">检查中</option><option value="available">可安装</option><option value="error">检查失败</option>
+    </Select>
+    <Inline><Checkbox label="长产品名与状态" checked={long} onChange={e => setLong(e.target.checked)} /><Checkbox label="显示顶部动作" checked={action} onChange={e => setAction(e.target.checked)} /><Button variant="secondary" onClick={reset}>重置设置示例</Button></Inline>
+    <div style={{ height: 520 }}>
+      <AppShell label="设置组合工作区" layout="single" controls="inline" collapseEmptyContentHeader navigation={{ label: '设置导航', open, onOpenChange: setOpen, content: <Stack><Inline><Text>演示工作区</Text><AppShellToggle placement="panel" iconOnly /></Inline><SideNav currentId="settings" groups={[{ label: '偏好', items: [{ id: 'settings', href: '#settings-composition', label: '设置', icon: 'settings' }] }]} onNavigate={(_, event) => event.preventDefault()} /></Stack> }}
+        contentHeader={<><AppShellToggle placement="content" iconOnly />{action && <Button variant="quiet" onClick={() => setAction(false)}>完成顶部操作</Button>}</>}>
+        <Stack><Text as="h1" variant="heading">设置</Text><Surface>
+          <Inline style={{ alignItems: 'flex-start', justifyContent: 'space-between' }}>
+            <Stack gap={2} style={{ flex: '1 1 180px', minWidth: 0, overflowWrap: 'anywhere' }}><Text as="h2" variant="heading">{long ? 'Rhine Studio · 用于跨地区协作的超长产品身份与版本名称' : 'Rhine Studio'}</Text><Text tone="muted">演示版本 · 关于</Text></Stack>
+            <Stack gap={2} data-testid="update-area" style={{ flex: '1 1 200px', minWidth: 0, alignItems: 'flex-end', textAlign: 'end', overflowWrap: 'anywhere' }}>
+              <Text role="status">{state === 'checking' ? '正在检查更新，请稍候…' : state === 'error' ? '检查失败，请重试。' : state === 'available' ? '发现可安装的演示更新。' : '当前已是最新版本。'}{long && '此说明包含完整的更新渠道和网络检查信息，会随可用空间自然换行。'}</Text>
+              <Button variant="secondary" busy={state === 'checking'} busyLabel="正在检查更新" onClick={() => state === 'available' ? setState('current') : check()}>{state === 'error' ? '重试检查' : state === 'available' ? '安装演示更新' : '检查更新'}</Button>
+            </Stack>
+          </Inline>
+        </Surface></Stack>
+      </AppShell>
+    </div>
+  </Stack>;
+}
+export function SettingsCompositionFixture() {
+  const params = new URLSearchParams(location.search), zoom = Number(params.get('zoom')) || 1;
+  useEffect(() => { document.documentElement.style.zoom = String(zoom); return () => { document.documentElement.style.zoom = ''; }; }, [zoom]);
+  return <ThemeProvider theme={(params.get('theme') || 'rhine') as ThemeName} data-rhine-motion={params.get('motion') || 'system'}><div style={{ padding: 16 }}><SettingsCompositionGallery /></div></ThemeProvider>;
+}

package/preview/SettingsDialogGallery.tsx

@@ -1,27 +1,67 @@
 import { useEffect, useRef, useState } from 'react';
-import { Button, Dialog, EmptyState, Notice, Select, SideNav, Skeleton, Stack, Text, TextField, Tooltip } from '../components';
-import { ThemeProvider, type ThemeName } from '../components/theme';
+import { Button, Checkbox, Dialog, Drawer, EmptyState, Notice, RemoteMultiSelect, Select, SideNav, Skeleton, Stack, Text, TextField, type Choice } from '../components';
+import { ThemeProvider, themes, useTheme, type ThemeName } from '../components/theme';
+import './settings-dialog-gallery.css';
 
+const members: Choice[] = Array.from({ length: 30 }, (_, i) => ({ value: `member-${i}`, label: `合成成员 ${i + 1}` }));
 export function SettingsDialogGallery() {
+  const { theme, setTheme } = useTheme();
   const [section, setSection] = useState('account'), [state, setState] = useState('normal');
   const [draft, setDraft] = useState('研究工作区'), [saved, setSaved] = useState('研究工作区');
   const [busy, setBusy] = useState(false), [message, setMessage] = useState('');
-  const [open, setOpen] = useState(false);
-  const draftEdited = useRef(false);
-  const save = async () => { const submitted = draft; draftEdited.current = false; setBusy(true); await new Promise(resolve => setTimeout(resolve, 300)); setSaved(submitted); if (!draftEdited.current) setDraft(submitted); setBusy(false); setMessage('已保存演示草稿'); };
-  return <Stack gap={4}><Text as="h2" variant="section">设置导航对话框</Text><Text>窄导航与宽任务内容。这里只操作合成数据；切换栏目不会改变宿主地址。</Text>
+  const [open, setOpen] = useState(false), [longNav, setLongNav] = useState(false), [longActions, setLongActions] = useState(false);
+  const [outcome, setOutcome] = useState('success'), [loadingSection, setLoadingSection] = useState(false);
+  const [query, setQuery] = useState(''), [selected, setSelected] = useState<Choice[]>([]);
+  const draftEdited = useRef(false), pending = useRef(false);
+  const saveTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const sectionTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  useEffect(() => () => { clearTimeout(saveTimer.current); clearTimeout(sectionTimer.current); }, []);
+  const save = () => {
+    if (pending.current) return;
+    pending.current = true;
+    const submitted = draft; draftEdited.current = false; setBusy(true); setMessage('');
+    saveTimer.current = setTimeout(() => {
+      if (outcome === 'success') { setSaved(submitted); if (!draftEdited.current) setDraft(submitted); setMessage('已保存演示草稿'); }
+      else setMessage(outcome === 'conflict' ? '内容已更新，请核对后重新保存' : '保存失败，草稿已保留');
+      pending.current = false; setBusy(false);
+    }, 500);
+  };
+  const navigate = (id: string) => {
+    clearTimeout(sectionTimer.current); setSection(id); setLoadingSection(id === 'async');
+    if (id === 'async') sectionTimer.current = setTimeout(() => setLoadingSection(false), 500);
+  };
+  const items = [{ id: 'account', label: '账号', href: '#account' }, { id: 'users', label: '用户管理与权限', href: '#users' }, { id: 'public', label: '公开项目', href: '#public' }, { id: 'async', label: '异步栏目', href: '#async' }, ...(longNav ? Array.from({ length: 20 }, (_, i) => ({ id: `extra-${i}`, label: `扩展设置 ${i + 1} · 长栏目名称`, href: `#extra-${i}` })) : [])];
+  return <Stack gap={4}><Text as="h2" variant="section">设置导航对话框</Text><Text>稳定窗口、独立正文滚动；使用合成数据。</Text>
     <TextField label="宿主查询" defaultValue="保留这条查询" />
-    <Dialog title="设置" description="管理演示账号与公开项目" trigger={<Button>打开设置</Button>} open={open} onOpenChange={next => { setOpen(next); if (next) { draftEdited.current = false; setDraft(saved); setMessage(''); } }}
-      navigation={<SideNav aria-label="设置导航" currentId={section} groups={[{ label: '偏好与管理', items: [{ id: 'account', label: '账号', href: '#account' }, { id: 'users', label: '用户管理与权限', href: '#users' }, { id: 'public', label: '公开项目', href: '#public' }] }]} onNavigate={(item, event) => { event.preventDefault(); setSection(item.id); }} />}>
+    <Checkbox label="长导航" checked={longNav} onChange={event => setLongNav(event.target.checked)} />
+    <Checkbox label="长操作文案" checked={longActions} onChange={event => setLongActions(event.target.checked)} />
+    <Select label="保存结果" value={outcome} onChange={event => setOutcome(event.target.value)}><option value="success">成功</option><option value="error">失败</option><option value="conflict">冲突</option></Select>
+    <Dialog title="设置" height={640} trigger={<Button>打开设置</Button>} open={open} onOpenChange={next => { setOpen(next); if (next) { draftEdited.current = false; setDraft(saved); setMessage(''); } }}
+      footer={<>
+        <Button variant="secondary" aria-label="撤销全部未保存的修改" disabled={busy} onClick={() => { draftEdited.current = false; setDraft(saved); setMessage('已撤销未保存修改'); }}><span className={longActions ? 'rhine-settings-action-full' : undefined}>{longActions ? '撤销全部未保存的修改' : '撤销'}</span>{longActions && <span className="rhine-settings-action-short">撤销</span>}</Button>
+        <Button variant="secondary" aria-label="关闭设置" onClick={() => setOpen(false)}>关闭</Button>
+        <Button busy={busy} aria-label="保存当前工作区设置" onClick={save}><span className={longActions ? 'rhine-settings-action-full' : undefined}>{longActions ? '保存当前工作区设置' : '保存'}</span>{longActions && <span className="rhine-settings-action-short">保存</span>}</Button>
+      </>}
+      navigation={<SideNav aria-label="设置导航" currentId={section} groups={[{ label: '偏好与管理', items }]} onNavigate={(item, event) => { event.preventDefault(); navigate(item.id); }} />}>
       <Stack gap={4}>
-        <Tooltip content="选择栏目以管理设置；保存后生效，取消仅丢弃未保存的修改。"><Button variant="quiet">设置帮助</Button></Tooltip>
-        {section === 'account' && <><Text as="h3" variant="heading">账号</Text><TextField label="工作区名称" value={draft} onChange={event => { draftEdited.current = true; setDraft(event.target.value); }} /><Button busy={busy} onClick={save}>保存设置</Button><Button variant="secondary" onClick={() => { draftEdited.current = false; setDraft(saved); setMessage('已撤销未保存修改'); }}>取消草稿</Button></>}
-        {section === 'users' && <><Text as="h3" variant="heading">用户管理</Text>{Array.from({length: 12}, (_, i) => <Stack key={i} gap={2}><Text>演示成员 {i + 1} · 长名称研究工作组</Text><Dialog trigger={<Button variant="secondary">编辑成员 {i + 1}</Button>} title={`编辑成员 ${i + 1}`} description="内层 Escape 只关闭当前编辑"><TextField label="成员备注" defaultValue="合成备注" /></Dialog></Stack>)}</>}
-        {section === 'public' && <><Text as="h3" variant="heading">公开项目</Text><Select label="项目状态" value={state} onChange={event => setState(event.target.value)}><option value="normal">正常</option><option value="loading">加载</option><option value="error">失败</option><option value="empty">空态</option></Select>{state === 'loading' ? <Skeleton label="正在读取项目" /> : state === 'error' ? <Notice tone="error" title="项目读取失败" action={<Button onClick={() => setState('normal')}>重试</Button>} /> : state === 'empty' ? <EmptyState title="暂无公开项目" description="添加项目后会显示在这里。" /> : <TextField label="项目标题" defaultValue="公开研究计划" />}</>}
-        {message && <Text role="status">{message}</Text>}
+        {busy ? <Text role="status">正在保存</Text> : message ? <Notice tone={outcome !== 'success' && !message.startsWith('已撤销') ? 'error' : 'neutral'} title={message} /> : draft !== saved ? <Text role="status">有未保存的修改</Text> : null}
+        {section === 'account' && <><Text as="h3" variant="heading">账号</Text><TextField label="工作区名称" value={draft} onChange={event => { draftEdited.current = true; setDraft(event.target.value); setMessage(''); }} />
+          <Select label="界面主题" value={theme} onChange={event => setTheme(event.target.value as ThemeName)}>{themes.map(item => <option key={item.name} value={item.name}>{item.label}</option>)}</Select>
+          <RemoteMultiSelect label="授权成员" query={query} onQueryChange={setQuery} value={selected} onValueChange={setSelected} options={members.filter(item => item.label.includes(query))} maxVisibleTags={2} />
+        </>}
+        {section === 'users' && <><Text as="h3" variant="heading">用户管理</Text>{Array.from({length: 30}, (_, i) => <Stack key={i} gap={2}><Text>演示成员 {i + 1} · 长名称研究工作组</Text><Dialog trigger={<Button variant="secondary">编辑成员 {i + 1}</Button>} title={`编辑成员 ${i + 1}`}><TextField label="成员备注" defaultValue="合成备注" /></Dialog></Stack>)}</>}
+        {section === 'public' && <><Text as="h3" variant="heading">公开项目</Text><Select label="项目状态" value={state} onChange={event => setState(event.target.value)}><option value="normal">正常</option><option value="loading">加载</option><option value="error">失败</option><option value="empty">空态</option></Select>{state === 'loading' ? <Skeleton label="正在读取项目" /> : state === 'error' ? <Notice tone="error" title="项目读取失败" action={<Button onClick={() => setState('normal')}>重试</Button>} /> : state === 'empty' ? <EmptyState title="暂无公开项目" description="" /> : <TextField label="项目标题" defaultValue="公开研究计划" />}</>}
+        {section === 'async' && (loadingSection ? <Skeleton label="正在读取栏目" /> : <Text>异步栏目已就绪</Text>)}
+        {section.startsWith('extra-') && <Text>扩展栏目 {Number(section.slice(6)) + 1}</Text>}
       </Stack>
     </Dialog>
     <Text>已保存名称：{saved}</Text>
+    <Drawer title="普通抽屉" trigger={<Button variant="secondary">普通抽屉示例</Button>}><TextField label="抽屉输入" /></Drawer>
+    <Dialog title="辅助分栏" trigger={<Button variant="secondary">辅助分栏示例</Button>} sidePanel={<Text>辅助内容</Text>}><TextField label="分栏输入" /></Dialog>
+    <Dialog title="有界普通表单" height={640} trigger={<Button variant="secondary">有界普通表单示例</Button>} footer={<Button>确认</Button>}><Stack>{Array.from({length:30}, (_,i)=><TextField key={i} label={`表单字段 ${i+1}`} />)}</Stack></Dialog>
+    <Dialog title="自动高度操作区" trigger={<Button variant="secondary">自动高度操作区示例</Button>} footer={<>{Array.from({length:20}, (_,i)=><Button key={i}>长操作 {i+1}</Button>)}</>}><Text>短正文仍然可读。</Text></Dialog>
+    <Dialog title="纯文本长正文" height={400} trigger={<Button variant="secondary">纯文本长正文示例</Button>} footer={<Button>阅读完成</Button>}><Stack>{Array.from({length:30}, (_,i)=><Text key={i}>合成说明第 {i+1} 段，仅用于键盘滚动验证。</Text>)}</Stack></Dialog>
+    <Dialog title="短对话框" trigger={<Button variant="secondary">普通短弹窗</Button>}><TextField label="简短输入" /></Dialog>
   </Stack>;
 }
 
@@ -29,5 +69,5 @@ export function SettingsDialogFixture() {
   const params = new URLSearchParams(location.search);
   const zoom = Number(params.get('zoom')) || 1;
   useEffect(() => { document.documentElement.style.zoom = String(zoom); return () => { document.documentElement.style.zoom = ''; }; }, [zoom]);
-  return <ThemeProvider theme={(params.get('theme') || 'rhine') as ThemeName} data-rhine-motion="reduced"><div style={{padding:16}}><SettingsDialogGallery /></div></ThemeProvider>;
+  return <ThemeProvider defaultTheme={(params.get('theme') || 'rhine') as ThemeName} data-rhine-motion={params.get('motion') || 'reduced'}><div style={{padding:16}}><SettingsDialogGallery /></div></ThemeProvider>;
 }

package/preview/SingleSearchGallery.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useId, useState } from 'react';
+import { Select, Stack, Text, TextField, Toolbar } from '../components';
+
+// Synthetic host: debounce, composition, cancellation and results belong here, not in TextField.
+export function SingleSearchGallery() {
+  const [width, setWidth] = useState('520');
+  const [scenario, setScenario] = useState('normal');
+  const [query, setQuery] = useState('');
+  const [composing, setComposing] = useState(false);
+  const [feedback, setFeedback] = useState('');
+  const [failed, setFailed] = useState(false);
+  const feedbackId = useId();
+  const disabled = scenario === 'disabled';
+  useEffect(() => {
+    setFeedback(''); setFailed(false);
+    if (!query.trim() || composing || disabled) return;
+    let active = true;
+    const controller = new AbortController();
+    let response: ReturnType<typeof setTimeout>;
+    const debounce = setTimeout(() => {
+      if (!active) return;
+      setFeedback('正在搜索…');
+      if (scenario === 'loading') return;
+      response = setTimeout(() => {
+        if (!active || controller.signal.aborted) return;
+        const error = scenario === 'error';
+        setFailed(error);
+        setFeedback(error ? '搜索失败，请修改查询后重试。' : scenario === 'empty' ? '没有匹配结果。' : `找到与“${query}”相关的 2 条合成结果。`);
+      }, 500);
+    }, 250);
+    return () => { active = false; controller.abort(); clearTimeout(debounce); clearTimeout(response); };
+  }, [query, composing, disabled, scenario]);
+  return <section id="single-search"><Stack gap={6}>
+    <Toolbar title="单输入搜索" description="只有一个搜索条件时，直接使用正文级输入；反馈按需放在结果区。">
+      <Select label="搜索容器宽度" value={width} onChange={e => setWidth(e.target.value)}>{['400', '520', '880'].map(value => <option key={value}>{value}</option>)}</Select>
+      <Select label="搜索场景" value={scenario} onChange={e => setScenario(e.target.value)}>
+        <option value="normal">正常</option><option value="loading">加载</option><option value="empty">无结果</option><option value="error">错误</option><option value="disabled">禁用</option><option value="long">长占位</option>
+      </Select>
+    </Toolbar>
+    <div style={{ width: `${width}px`, maxWidth: '100%' }} data-search-example>
+      <TextField label="搜索合成条目" labelVisibility="hidden" type="search" value={query} disabled={disabled}
+        placeholder={scenario === 'long' ? '搜索名称、描述或跨区域联合研究项目中的合成关键词' : '搜索名称或关键词'}
+        aria-describedby={feedback ? feedbackId : undefined} aria-invalid={failed || undefined}
+        onChange={e => setQuery(e.target.value)} onCompositionStart={() => setComposing(true)} onCompositionEnd={e => { setQuery(e.currentTarget.value); setComposing(false); }}
+        onKeyDown={e => { if (e.key === 'Escape' && !composing && !e.nativeEvent.isComposing) { e.preventDefault(); setQuery(''); } }} />
+      <div id={feedbackId} role="status" aria-live="polite" aria-atomic="true">{feedback && <Text tone={failed ? 'error' : 'muted'}>{feedback}</Text>}</div>
+    </div>
+    <Text variant="caption" tone="muted">输入后等待 250ms，再模拟 500ms 请求；组合输入期间不查询。Escape 清空并保持焦点，离开章节取消等待。</Text>
+  </Stack></section>;
+}

package/preview/SummaryTabsGallery.tsx

@@ -2,12 +2,16 @@ import { useState } from 'react';
 import { Badge, KeyValue, Select, Stack, Surface, Tabs, Text, TextField, Toolbar } from '../components';
 
 export function SummaryTabsGallery() {
+  const [layout, setLayout] = useState<'content' | 'fill'>('content');
+  const [single, setSingle] = useState(false);
   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={layout} onChange={e=>setLayout(e.target.value as 'content'|'fill')}><option value="content">内容宽度左对齐</option><option value="fill">均分铺满</option></Select>
+      <Select label="摘要行数" value={single?'single':'double'} onChange={e=>setSingle(e.target.value==='single')}><option value="single">名称与短状态</option><option value="double">双行摘要</option></Select>
       <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>
@@ -17,11 +21,11 @@ export function SummaryTabsGallery() {
     </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' ? '研究项目 · 跨区域联合研发与长期设计验证团队' : '研发 · 研究项目',
+        <Tabs layout={layout} label="摘要页签规范示例" value={selected} onValueChange={setSelected} items={[
+          {value:'primary',label:scenario === 'long' ? '跨部门联合研究工作区' : '主工作区',description:single ? undefined : 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>,
+          {value:'team',label:'协作工作区',description:single ? undefined : '协作 · 设计项目',disabled:scenario === 'disabled',status:<Badge>{scenario === 'disabled' ? '暂不可用' : '已停止'}</Badge>,
             content:<Stack gap={4}><Text>协作工作区内容</Text><TextField label="协作工作区草稿" placeholder="与另一页签独立"/></Stack>},
         ]}/>
       </div>