@linhey/rhine-design 0.5.0 → 0.8.0

package/preview/MonitoringGallery.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { TimelineListGallery } from './TimelineListGallery';
 import { Select, Stack, StackedBar, StatusTimeline, Surface, TimelineLegend, TrendChart, type ChartPoint, type TimelineSegment } from '../components';
 
 export function MonitoringGallery() {
@@ -15,6 +16,7 @@ export function MonitoringGallery() {
   }));
   const feedback = { stale: state === 'stale' ? '最后采集于 20 分钟前，请核对来源。' : undefined, error: state === 'error' ? '本次读取失败，保留上次采样。' : undefined };
   return <section><div className="ds-section-title"><span>MONITORING</span><h2>看见证据，也看见缺口</h2></div>
+    <TimelineListGallery />
     <p className="ds-caption">计数与口径由宿主提供。未知保持未知，折线在缺失处断开；图例与数据表提供文字替代，不生成健康评分。时段详情支持鼠标、键盘、触屏和 Escape，并自动避让视口。</p>
     <Select label="监控演示状态" value={state} onChange={event => setState(event.target.value)}><option value="ready">默认 / 含缺失采样</option><option value="empty">空数据</option><option value="stale">陈旧数据</option><option value="error">错误 / 保留旧数据</option><option value="unknown">占比总量未知</option></Select>
     <Surface className="ds-gap-top"><Stack gap={4}><h3>结构化时段详情</h3><StatusTimeline label="结构化健康历史" startLabel="10:00 UTC+8" endLabel="10:40 UTC+8" segments={segments} /><TimelineLegend /><p>方向键与 Home/End 切换时段；轻触健康条查看同一份完整详情。</p><StatusTimeline compact label="紧凑结构化历史" startLabel="10:00" endLabel="10:40" segments={segments} /></Stack></Surface>

package/preview/NeutronStarGallery.tsx

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import { Badge, Button, Disclosure, Inline, NeutronStarBackdrop, Select, Stack, Surface, Switch, Text, TextField } from '../components';
+
+export function NeutronStarGallery() {
+  const [replay, setReplay] = useState(0);
+  const [reduced, setReduced] = useState(false);
+  const [appearance, setAppearance] = useState<'theme' | 'original'>('theme');
+
+  return <section id="neutron-star">
+    <div className="ds-section-title"><span>NEUTRON STAR</span><h2>中子星 · 磁场与星尘</h2></div>
+    <p className="ds-caption">磁场线、流动粒子与极向喷流围绕星核运行。先看完整的艺术画面，再展开控制与内容组合；装饰不表示加载或业务进度。</p>
+    <Stack gap={4}>
+      <NeutronStarBackdrop key={replay} data-neutron-example="artwork" aria-label="中子星艺术" role="group" appearance={appearance} reducedMotion={reduced} style={{ minHeight: 560 }} />
+      <Disclosure title="演示控制">
+        <Stack gap={4}>
+          <Inline gap={3}>
+            <Badge>源码候选</Badge>
+            <Button variant="secondary" onClick={() => setReplay(value => value + 1)}>重播中子星</Button>
+            <Switch label="减少中子星动态" checked={reduced} onCheckedChange={setReduced} />
+          </Inline>
+          <Select label="艺术配色" value={appearance} onChange={event => setAppearance(event.target.value as 'theme' | 'original')}>
+            <option value="theme">跟随界面主题</option>
+            <option value="original">原始深空</option>
+          </Select>
+          <Text variant="caption" tone="muted">顶部切换界面主题；艺术配色改变时继续当前时间。暂停后原地继续，重播只重新创建上方艺术，不清空下方输入。</Text>
+        </Stack>
+      </Disclosure>
+      <Disclosure title="查看内容组合">
+        <NeutronContentExample appearance={appearance} reducedMotion={reduced} />
+      </Disclosure>
+    </Stack>
+    <p className="ds-caption">28 条磁场线、560 个流动粒子、700 颗星尘、极向喷流与星核；星系以 28 秒有效播放时间完成一轮深度公转。系统、顶部或本节减少动态均保留静态画面；页面隐藏、离屏或尺寸为零时停止逐帧绘制。</p>
+  </section>;
+}
+
+function NeutronContentExample({ appearance, reducedMotion }: { appearance: 'theme' | 'original'; reducedMotion: boolean }) {
+  const [name, setName] = useState('Rhine Observatory');
+  return <NeutronStarBackdrop data-neutron-example="content" aria-label="中子星内容组合" role="group" appearance={appearance} reducedMotion={reducedMotion} style={{ minHeight: 460 }}>
+    <Stack style={{ padding: 'var(--rhine-space-6)' }}>
+      <Surface style={{ maxWidth: 400 }}>
+        <Stack gap={4}>
+          <Stack gap={2}>
+            <Text as="h3" variant="heading">保持内容清晰</Text>
+            <Text tone="muted">卡片、文字与操作使用当前界面主题，艺术层独立绘制。</Text>
+          </Stack>
+          <TextField label="观测名称" value={name} onChange={event => setName(event.target.value)} hint="本地演示草稿；切换配色或重播不会清空。" />
+          <Inline gap={2}>
+            <Button>开始观测</Button>
+            <Button variant="secondary">查看介绍</Button>
+            <Button disabled>暂不可用</Button>
+          </Inline>
+        </Stack>
+      </Surface>
+    </Stack>
+  </NeutronStarBackdrop>;
+}

package/preview/OrbitGallery.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import { Badge, Button, Disclosure, Inline, OrbitBackdrop, SegmentedControl, Stack, Surface, Switch, Text, TextField } from '../components';
+
+export function OrbitGallery() {
+  const [replay, setReplay] = useState(0);
+  const [reduced, setReduced] = useState(false);
+  const [appearance, setAppearance] = useState<'theme' | 'original'>('theme');
+  const [artworkName, setArtworkName] = useState('Orbit workspace');
+  const [workspaceName, setWorkspaceName] = useState('Rhine Studio');
+  return <section id="orbit">
+    <div className="ds-section-title"><span>ORBIT</span><h2>轨道星空 · 品牌艺术背景</h2></div>
+    <p className="ds-caption">莱茵的折纸鸟、战术的悬浮源石晶簇、橙趣的草莓甜甜圈。每个主题都有自己的物件，也可以切换到原始深色星空。</p>
+    <Inline gap={3}>
+      <Badge>0.7.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} />
+    </Inline>
+    <OrbitBackdrop key={`art-${replay}`} className="ds-gap-top ds-orbit-artwork" appearance={appearance} reducedMotion={reduced} role="region" aria-label="轨道背景预览" />
+    <p className="ds-caption">纸鸟在飞行中连续折叠成纸蝴蝶，再舒展还原；晶簇与甜甜圈缓缓旋转。切换主题保留播放位置，窄屏也能播放；暂停或开启减少动态后保持当前形态。</p>
+    <Disclosure title="查看组合控件示例">
+      <Text tone="muted">输入框与按钮的叠加效果单独展示，不遮挡上方轨道。</Text>
+      <OrbitBackdrop key={`controls-${replay}`} className="ds-gap-top" appearance={appearance} reducedMotion={reduced} role="region" aria-label="轨道上的控件组合">
+        <div className="ds-orbit-example-content"><Stack gap={6}>
+          <Stack gap={3}>
+            <Text as="h3" variant="heading">直接叠加</Text>
+            <TextField label="直接叠加的输入框" value={artworkName} onChange={event => setArtworkName(event.target.value)} hint="提示文字随当前内容前景保持可读。" />
+            <Inline gap={2}>
+              <Button>开始探索</Button>
+              <Button variant="secondary">查看轨道</Button>
+              <Button variant="quiet">了解更多</Button>
+              <Button variant="quiet" busy busyLabel="示例处理中">示例处理中</Button>
+              <Button variant="quiet" disabled>暂不可用</Button>
+            </Inline>
+          </Stack>
+          <Surface><Stack gap={3}>
+            <Text as="h3" variant="heading">带底色的内容</Text>
+            <Text tone="muted">Surface 与控件保留当前主题的完整配色。</Text>
+            <TextField label="工作空间名称" value={workspaceName} onChange={event => setWorkspaceName(event.target.value)} hint="这是可编辑的本地展台示例。" />
+            <Inline gap={2}>
+              <Button>继续探索</Button>
+              <Button variant="secondary">查看介绍</Button>
+              <Button variant="quiet">更多介绍</Button>
+            </Inline>
+          </Stack></Surface>
+        </Stack></div>
+      </OrbitBackdrop>
+    </Disclosure>
+  </section>;
+}

package/preview/OverlayBoundsGallery.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+import { Button, DateRangePicker, Inline, Menu, Popover, Select, Stack, Text, TextField, Tooltip } from '../components';
+import { ThemeProvider, themes, type ThemeName } from '../components/theme';
+
+export function OverlayBoundsFixture() {
+  const query = new URLSearchParams(location.search);
+  const theme = query.get('theme') as ThemeName || 'rhine';
+  const zoom = Number(query.get('zoom')) || 1;
+  const scope = query.get('scope') || 'document';
+  const edge = query.get('edge') || 'bottom-right';
+  const side = (query.get('side') || 'top') as 'top' | 'bottom' | 'left' | 'right';
+  const [draft, setDraft] = useState('研究工作区');
+  const [range, setRange] = useState({ start: '', end: '' });
+  const [action, setAction] = useState('尚未操作');
+  useEffect(() => {
+    const previous = document.documentElement.style.zoom;
+    document.documentElement.style.zoom = scope === 'document' ? String(zoom) : '1';
+    return () => { document.documentElement.style.zoom = previous; };
+  }, [scope, zoom]);
+  const scale = scope === 'content' ? 1 : zoom;
+  return <ThemeProvider theme={theme} data-rhine-motion="reduced" style={{ zoom: scope === 'theme' ? zoom : 1 }}>
+    <div data-testid="overlay-bounds" style={{ display: 'grid', alignItems: edge.startsWith('top') ? 'start' : 'end', justifyItems: edge.endsWith('left') ? 'start' : 'end', padding: 12, width: `calc(100vw / ${scale})`, height: `calc(100dvh / ${scale})`, boxSizing: 'border-box' }}>
+      <Stack gap={2} style={{ maxWidth: '100%', zoom: scope === 'content' ? zoom : 1 }}>
+        <Popover title="工作区与日期详情" side={side} trigger={<Button variant="secondary">账号与日期</Button>}>
+          <Stack gap={3}><Text>研究工作区的长名称与说明，测试换行和完整阅读。</Text><Text>long-unbroken-account-address@example.invalid</Text>
+            <TextField label="草稿名称" value={draft} onChange={event => setDraft(event.target.value)} />
+            <DateRangePicker label="日期范围" value={range} onValueChange={setRange} />
+            <Text>内容超出可用高度时在浮层内滚动；缩放不清空草稿。</Text>
+            <Inline><Button variant="secondary" onClick={() => setAction('已取消')}>取消日期</Button><Button onClick={() => setAction('已应用')}>应用日期</Button></Inline>
+          </Stack>
+        </Popover>
+        <Menu label="对象操作" side={side} trigger={<Button variant="secondary">对象操作</Button>} items={['查看完整信息', '复制演示地址', '导出演示内容', '暂不可用', '最后一项操作'].map((label, i) => ({ id: String(i), label, disabled: i === 3, onSelect: () => setAction(label) }))} />
+        <Tooltip side={side} content="很长的辅助说明也应在可用范围内换行，保留用户需要的字体大小。"><Button variant="quiet">辅助说明</Button></Tooltip>
+        <Text role="status" variant="caption">{action}</Text>
+      </Stack>
+    </div>
+  </ThemeProvider>;
+}
+
+export function OverlayBoundsGallery() {
+  const [theme, setTheme] = useState('neo-brutalism'), [width, setWidth] = useState('400'), [zoom, setZoom] = useState('2');
+  const [scope, setScope] = useState('document'), [edge, setEdge] = useState('bottom-right'), [side, setSide] = useState('top');
+  const choices = (label: string, value: string, set: (value: string) => void, values: string[]) => <Select label={label} value={value} onChange={event => set(event.target.value)}>{values.map(item => <option key={item}>{item}</option>)}</Select>;
+  const params = new URLSearchParams({ fixture: 'overlay-bounds', theme, zoom, scope, edge, side });
+  return <Stack gap={4}><Text as="h2" variant="section">浮层缩放与边界</Text><Text tone="muted">独立文档验证 CSS zoom；它不等同于浏览器原生缩放。示例不访问业务数据。</Text>
+    <Inline>{choices('样机主题', theme, setTheme, themes.map(item => item.name))}{choices('样机宽度', width, setWidth, ['400', '520', '880'])}{choices('CSS zoom', zoom, setZoom, ['1', '2'])}{choices('缩放范围', scope, setScope, ['document', 'theme', 'content'])}{choices('锚点位置', edge, setEdge, ['top-left', 'top-right', 'bottom-left', 'bottom-right'])}{choices('优先方向', side, setSide, ['top', 'right', 'bottom', 'left'])}</Inline>
+    <iframe title="浮层边界样机" src={`?${params}`} style={{ width: Number(width), maxWidth: '100%', height: 758, border: '1px solid var(--rhine-line)', background: 'var(--rhine-bg)' }} />
+  </Stack>;
+}

package/preview/SettingsDialogGallery.tsx

@@ -0,0 +1,33 @@
+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';
+
+export function SettingsDialogGallery() {
+  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>
+    <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); }} />}>
+      <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>}
+      </Stack>
+    </Dialog>
+    <Text>已保存名称：{saved}</Text>
+  </Stack>;
+}
+
+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>;
+}

package/preview/ThemePickerGallery.tsx

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+import { Button, Checkbox, Dialog, Stack, Text, TextField } from '../components';
+import { ThemePicker } from '../components/ThemePicker';
+import { ThemeProvider, themes, useTheme, type ThemeName } from '../components/theme';
+
+export function ThemePickerGallery() {
+  const { theme, setTheme } = useTheme();
+  const [disabled, setDisabled] = useState(false), [longNames, setLongNames] = useState(false), [failed, setFailed] = useState(false);
+  const [draft, setDraft] = useState('切换主题时保留');
+  const options = themes.map(item => ({ value: item.name, label: longNames ? `${item.label} · 适合长时间阅读与资源管理的工作区外观` : item.label, previewSrc: failed ? '/missing-theme-preview.png' : undefined }));
+  return <Stack gap={4}><Text as="h2" variant="section">先比较，再应用</Text><Text tone="muted">预览来自同一组官方组件，保持各自的配色。选择即应用；偏好是否保存由宿主管理。</Text>
+    <ThemePicker value={theme} onValueChange={setTheme} options={options} disabled={disabled} />
+    <Stack gap={2}><Checkbox label="长主题名称" checked={longNames} onChange={event => setLongNames(event.target.checked)} /><Checkbox label="禁用主题选择" checked={disabled} onChange={event => setDisabled(event.target.checked)} /><Checkbox label="模拟预览失败" checked={failed} onChange={event => setFailed(event.target.checked)} /></Stack>
+    <TextField label="未保存草稿" value={draft} onChange={event => setDraft(event.target.value)} />
+    <Dialog trigger={<Button variant="secondary">弹窗内切换主题</Button>} title="外观设置" description="切换后当前弹窗与草稿保持打开"><Stack gap={4}><TextField label="弹窗草稿" defaultValue="继续编辑" /><ThemePicker value={theme} onValueChange={setTheme} /></Stack></Dialog>
+  </Stack>;
+}
+
+export function ThemePickerFixture() {
+  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 defaultTheme={(params.get('theme') || 'rhine') as ThemeName} data-rhine-motion="reduced"><div style={{padding:16}}><ThemePickerGallery /></div></ThemeProvider>;
+}

package/preview/ThemeSample.tsx

@@ -0,0 +1,14 @@
+import { Badge, Button, Inline, SideNav, Stack, Surface, Text } from '../components';
+import { ThemeProvider, type ThemeName } from '../components/theme';
+
+/** Synthetic, deterministic source for the shipped 960 × 600 theme previews. */
+export function ThemeSample() {
+  const theme = (new URLSearchParams(location.search).get('theme') || 'rhine') as ThemeName;
+  return <ThemeProvider theme={theme} data-rhine-motion="reduced" style={{ boxSizing: 'border-box', width: 960, height: 600, padding: 32, display: 'grid', gridTemplateColumns: '200px minmax(0,1fr)', gap: 28 }}>
+    <SideNav aria-label="样本导航" currentId="library" groups={[{ label: '研究工作区', items: [{ id: 'library', label: '资源库', href: '#library' }, { id: 'collections', label: '收藏集', href: '#collections' }, { id: 'activity', label: '最近活动', href: '#activity' }] }]} />
+    <Stack gap={4}><Inline><Text as="h1" variant="title">让内容保持清晰</Text><Badge tone="success">已同步</Badge></Inline><Text tone="muted">相同的页面，比较每种主题的表面、文字与操作。</Text>
+      <Surface><Stack gap={4}><Text as="h2" variant="heading">本周研究计划</Text><Text>整理资料与发现，在需要时继续工作。</Text><Inline><Button>新建项目</Button><Button variant="secondary">查看详情</Button></Inline></Stack></Surface>
+      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>{['设计与观察', '记录与归档'].map((title, i) => <Surface key={title}><Stack gap={3}><div aria-hidden="true" style={{height:80,background:'var(--rhine-selected)',border:'1px solid var(--rhine-line)',display:'grid',placeItems:'center'}}><span style={{fontSize:40,color:'var(--rhine-green)'}}>{i ? '◷' : '△'}</span></div><Text variant="heading">{title}</Text><Text variant="caption" tone="muted">12 项合成资料 · 随时继续</Text></Stack></Surface>)}</div>
+    </Stack>
+  </ThemeProvider>;
+}

package/preview/TimelineListGallery.tsx

@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import { Button, Dialog, Inline, Notice, Select, Skeleton, Stack, StatusTimelineList, Surface, Text, TimelineLegend, type StatusTimelineItem, type TimelineSegment } from '../components';
+
+export function TimelineListGallery() {
+  const [state, setState] = useState('ready');
+  const segments: TimelineSegment[] = Array.from({ length: 96 }, (_, i) => ({
+    id: String(i), label: `10/23 ${String(Math.floor(i / 4)).padStart(2, '0')}:${String(i % 4 * 15).padStart(2, '0')} · UTC+8`,
+    status: i % 29 === 0 ? 'failed' : i % 17 === 0 ? 'degraded' : i % 13 === 0 ? 'recovered' : i % 7 === 0 ? 'unknown' : 'healthy',
+  }));
+  const items: StatusTimelineItem[] = state === 'empty' ? [] : ['资源 A', '资源 B'].map((title, i) => ({
+    id: String(i), title: state === 'long' ? `${title} · 跨区域协作工作空间 / very-long-resource-name-without-a-break-2026` : title,
+    summary: <>7 日剩余 <strong>{i ? '—' : '78%'}</strong></>,
+    note: state === 'partial' ? '记录不完整，仅展示已确认的时段。' : undefined,
+    timeline: state === 'unavailable' ? null : { startLabel: '10/23 00:00 · UTC+8', endLabel: '10/24 00:00 · UTC+8', segments, disabled: state === 'disabled' },
+  }));
+  const content = <Stack gap={3}>
+    {state === 'loading' ? <Skeleton label="正在读取历史记录" lines={3} /> : <>
+      {state === 'error' && <Notice tone="error" title="读取失败，保留上次记录">请重试或检查数据来源；旧记录不代表当前状态。</Notice>}
+      <StatusTimelineList label="资源历史记录" items={items} />
+    </>}
+  </Stack>;
+  return <Surface className="ds-gap-top"><Stack gap={4}>
+    <Text as="h3" variant="section">多条历史记录</Text>
+    <Text tone="muted">标题、摘要、分隔、紧凑时间条与详情统一组合；同一列表只展开一条详情。示例数据不连接任何服务。</Text>
+    <Select label="历史列表状态" value={state} onChange={event => setState(event.target.value)}>
+      <option value="ready">默认</option><option value="loading">首次加载</option><option value="error">读取失败 / 保留旧记录</option>
+      <option value="empty">空列表</option><option value="unavailable">历史未知</option><option value="partial">不完整</option>
+      <option value="disabled">禁用</option><option value="long">长名称</option>
+    </Select>
+    {content}<TimelineLegend />
+    <Dialog title="资源范围" description="左侧操作，右侧查看当前范围的记录；纯演示，不保存设置。" trigger={<Button variant="secondary">在分栏弹窗中查看</Button>}
+      sidePanel={closeButton => <Stack gap={4}><Inline style={{ justifyContent: 'space-between' }}><Text as="h3">资源 · {items.length}</Text>{closeButton}</Inline>{content}</Stack>}>
+      <Text>同一组件也可嵌入侧栏；在两条时间轴间悬停或按 Tab，检查详情互斥与焦点。</Text>
+    </Dialog>
+  </Stack></Surface>;
+}

package/preview/extensions.css

@@ -4,3 +4,12 @@
 .ds-extension-controls .rhine-select { width:auto; max-width:100%; }
 .ds-shell-stage { height:680px; max-height:85dvh; min-height:380px; min-width:0; }
 .ds-background-swatch { display:grid; gap:24px; padding:24px; border:1px solid var(--rhine-line); }
+
+.ds-media-intro { max-width:58ch; color:var(--rhine-muted); margin:0 0 24px; line-height:var(--rhine-leading-body); }
+.ds-media-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:16px 0; margin-bottom:24px; border-block:1px solid var(--rhine-control); }
+.ds-media-toolbar>span { font:var(--rhine-text-caption)/var(--rhine-leading-caption) var(--rhine-mono); }
+.ds-media-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:24px; align-items:start; }
+.ds-media-section-heading { margin-top:48px; margin-bottom:24px; }
+.ds-media-section-heading h3 { font-size:var(--rhine-text-section); margin:0 0 8px; }
+.ds-media-section-heading p { color:var(--rhine-muted); margin:0; }
+.ds-media-note { margin-top:24px; }

package/preview/main.tsx

@@ -1,7 +1,10 @@
 import { StrictMode, useEffect, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
-import { Badge, Button, 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, 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';
+import { ThemePickerGallery, ThemePickerFixture } from './ThemePickerGallery';
 import { CommonGallery } from './CommonGallery';
 import { MotionGallery } from './MotionGallery';
 import { StartupGallery } from './StartupGallery';
@@ -11,8 +14,12 @@ import { SpacingGallery } from './SpacingGallery';
 import { LineHeightGallery } from './LineHeightGallery';
 import { SubscriptionGallery } from './SubscriptionGallery';
 import { BackgroundGallery } from './BackgroundGallery';
+import { OrbitGallery } from './OrbitGallery';
+import { NeutronStarGallery } from './NeutronStarGallery';
 import { AdvancedDataGallery, AdvancedFormsGallery, MediaGallery, ShellGallery } from './ExtensionsGallery';
 import { MonitoringGallery } from './MonitoringGallery';
+import { DateRangeFilterGallery } from './DateRangeFilterGallery';
+import { CompactAccountGallery } from './CompactAccountGallery';
 
 function Gallery() {
   const [motion, setMotion] = useState('system');
@@ -20,6 +27,7 @@ function Gallery() {
   const [previewPage, setPreviewPage] = useState('oauth');
   const [busy, setBusy] = useState(false);
   const [selected, setSelected] = useState(false);
+  const [showSelectionIndicator, setShowSelectionIndicator] = useState(false);
   const [tab, setTab] = useState('tokens');
   const [metric, setMetric] = useState('tokens');
   const [progress, setProgress] = useState<number | null>(38);
@@ -31,15 +39,22 @@ function Gallery() {
   useEffect(() => () => { if (timer.current) clearTimeout(timer.current); }, []);
   const simulate = () => { setBusy(true); timer.current = setTimeout(() => { setBusy(false); setNotice(true); }, 900); };
   return <GalleryShell motion={motion} onMotionChange={setMotion}>{section => <>
+    {section === 'theme-picker' && <ThemePickerGallery />}
+    {section === 'settings-dialog' && <SettingsDialogGallery />}
+    {section === 'overlay-bounds' && <OverlayBoundsGallery />}
     {section === 'monitoring' && <MonitoringGallery />}
+    {section === 'date-range-filter' && <DateRangeFilterGallery />}
+    {section === 'compact-account' && <CompactAccountGallery />}
     {section === 'backgrounds' && <BackgroundGallery />}
     {section === 'app-shell' && <ShellGallery />}
+    {section === 'orbit' && <OrbitGallery />}
+    {section === 'neutron-star' && <NeutronStarGallery />}
     {section === 'advanced-forms' && <AdvancedFormsGallery />}
     {section === 'advanced-data' && <AdvancedDataGallery />}
     {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>59 个通用组件，共用一套视觉变量和动效规则。<br />这里运行的就是后续业务页面可直接导入的 React 组件。</p></div></div>
+      <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-overview-links">{[
         ['foundation','视觉基础','从色彩、间距与材质开始。'],
         ['typography','字体与文字','清晰的层级，稳定的阅读节奏。'],
@@ -97,7 +112,7 @@ function Gallery() {
       </section>}
 
       {section === 'selection' && <section id="selection"><div className="ds-section-title"><span>03</span><h2>选择清楚，位置稳定</h2></div>
-        <div className="ds-grid"><div><SelectionCard 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>
+        <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>
       </section>}
@@ -120,4 +135,4 @@ function Gallery() {
 
 }
 
-createRoot(document.getElementById('root')!).render(<StrictMode><Gallery /></StrictMode>);
+createRoot(document.getElementById('root')!).render(<StrictMode>{new URLSearchParams(location.search).get('fixture') === 'overlay-bounds' ? <OverlayBoundsFixture /> : new URLSearchParams(location.search).get('fixture') === 'settings-dialog' ? <SettingsDialogFixture /> : new URLSearchParams(location.search).get('fixture') === 'theme-picker' ? <ThemePickerFixture /> : <Gallery />}</StrictMode>);

package/preview/preview.css

@@ -1,4 +1,10 @@
 body { margin:0; }
+.compact-gallery { padding-block:var(--rhine-space-6); }
+.compact-gallery-stage { max-width:100%; min-width:0; }
+.compact-gallery-examples { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:var(--rhine-space-6); align-items:start; }
+.compact-gallery-examples>* { min-width:0; }
+.compact-gallery-fact-pair { align-items:baseline; }
+.compact-gallery-fact-pair>* { min-width:0; overflow-wrap:anywhere; }
 .ds-type-row { display:grid; grid-template-columns:180px minmax(0,1fr); align-items:baseline; gap:12px 24px; padding:16px 0; border-bottom:1px solid var(--rhine-line); }
 .ds-type-row:last-child { border:0; }
 .ds-type-copy { display:grid; gap:12px; margin-top:16px; max-width:60ch; }
@@ -18,4 +24,6 @@ body { margin:0; }
 .ds-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start; }.ds-grid>* { min-width:0; }.ds-component-title { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:20px; }.ds-component-title h3 { font:600 16px var(--rhine-mono); margin:0; }.ds-component-title>span { color:var(--rhine-muted); font-size:12px; }
 .ds-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }.ds-caption { font-size:12px; line-height:1.8; color:var(--rhine-muted); }.ds-gap-top { margin-top:20px; }.ds-badges { margin-bottom:24px; }.ds-loaded { min-height:72px; margin:0; }
 .ds-footer { border-top:1px solid var(--rhine-ink); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:24px 0; color:var(--rhine-muted); font-size:12px; }
+.ds-orbit-artwork { min-height:clamp(360px, 52vw, 560px); }
+.ds-orbit-example-content { width:min(100%, 560px); }
 @media(max-width:760px) { .ds-hero,.ds-grid { grid-template-columns:1fr; gap:24px; }.ds-hero { padding-top:32px; }.ds-hero h1 { font-size:32px; letter-spacing:-1px; }.ds-palette { grid-template-columns:repeat(auto-fit,minmax(min(100%,90px),1fr)); }.ds-palette>div>div { height:64px; }.ds-section-title h2 { font-size:19px; } }

package/preview/theme-sample.html

@@ -0,0 +1 @@
+<!doctype html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Theme preview source</title><style>body{margin:0}</style></head><body><div id="root"></div><script type="module">import React from 'react'; import {createRoot} from 'react-dom/client'; import {ThemeSample} from './ThemeSample'; createRoot(document.getElementById('root')).render(React.createElement(ThemeSample));</script></body></html>

package/scripts/check-overlay-bounds.js

@@ -0,0 +1,76 @@
+// First run: npm run build && npx vite preview --host 127.0.0.1 --port 18480 --strictPort
+// Fixed regression port 18480 differs from npm run dev (18309).
+// Run with playwright-cli run-code --filename scripts/check-overlay-bounds.js against port 18480.
+async page => {
+  const errors = [], failures = [], cases = [];
+  let tooltipCases = 0;
+  page.on('pageerror', error => errors.push(String(error)));
+  const bounds = async locator => locator.evaluate(element => {
+    const rect = element.getBoundingClientRect();
+    return { x: rect.x, y: rect.y, right: rect.right, bottom: rect.bottom, width: rect.width, height: rect.height, viewportWidth: innerWidth, viewportHeight: innerHeight };
+  });
+  const contained = rect => rect.x >= -1 && rect.y >= -1 && rect.right <= rect.viewportWidth + 1 && rect.bottom <= rect.viewportHeight + 1 && rect.width > 0 && rect.height > 0;
+  for (const theme of ['rhine', 'arknights', 'neo-brutalism']) for (const width of [400, 520, 880]) for (const zoom of [1, 2]) for (const scope of ['document', 'theme', 'content']) for (const [edge, side] of [['top-left', 'left'], ['top-right', 'top'], ['bottom-left', 'bottom'], ['bottom-right', 'right']]) {
+    const spec = { theme, width, zoom, scope, edge, side };
+    await page.setViewportSize({ width, height: 758 });
+    await page.goto(`http://127.0.0.1:18480/?${new URLSearchParams({ fixture: 'overlay-bounds', theme, zoom: String(zoom), scope, edge, side })}`);
+    const trigger = page.getByRole('button', { name: '账号与日期', exact: true });
+    await trigger.click();
+    const popup = page.getByRole('dialog', { name: '工作区与日期详情' });
+    await popup.waitFor();
+    const popupRect = await bounds(popup);
+    const draft = popup.getByRole('textbox', { name: '草稿名称' });
+    await draft.fill('保留中的草稿');
+    const draftRect = await bounds(draft);
+    const apply = popup.getByRole('button', { name: '应用日期', exact: true });
+    await apply.scrollIntoViewIfNeeded();
+    const applyRect = await bounds(apply);
+    await apply.click();
+    const applied = await page.getByRole('status').innerText();
+    const close = popup.getByRole('button', { name: '关闭详情', exact: true });
+    await close.scrollIntoViewIfNeeded();
+    const closeRect = await bounds(close);
+    await close.click();
+    await page.waitForFunction(() => document.activeElement?.textContent === '账号与日期');
+    const focusReturned = await trigger.evaluate(element => element === document.activeElement);
+    const menuTrigger = page.getByRole('button', { name: '对象操作', exact: true });
+    await menuTrigger.click();
+    const menu = page.getByRole('menu', { name: '对象操作' });
+    await menu.waitFor();
+    const menuRect = await bounds(menu);
+    await menu.press('End');
+    const last = menu.getByRole('menuitem', { name: '最后一项操作' });
+    await last.scrollIntoViewIfNeeded();
+    const lastRect = await bounds(last);
+    await last.click();
+    const selected = await page.getByRole('status').innerText();
+    const pass = [popupRect, draftRect, applyRect, closeRect, menuRect, lastRect].every(contained) && applied === '已应用' && selected === '最后一项操作' && focusReturned;
+    cases.push({ ...spec, pass });
+    if (!pass) failures.push({ ...spec, popupRect, draftRect, applyRect, closeRect, menuRect, lastRect, focusReturned, applied, selected });
+  }
+  for (const theme of ['rhine','arknights','neo-brutalism']) for (const width of [400,520,880]) for (const zoom of [1,2]) for (const scope of ['document','theme','content']) {
+    await page.setViewportSize({width,height:758});
+    await page.goto(`http://127.0.0.1:18480/?fixture=overlay-bounds&theme=${theme}&zoom=${zoom}&scope=${scope}&edge=bottom-right&side=right`);
+    await page.getByRole('button',{name:'辅助说明',exact:true}).focus();
+    const tooltip=page.getByRole('tooltip'); await tooltip.waitFor();
+    const tooltipRect=await bounds(tooltip);
+    if(!contained(tooltipRect)) failures.push({kind:'tooltip',theme,width,zoom,scope,tooltipRect});
+    tooltipCases++;
+    await page.keyboard.press('Escape');
+    await tooltip.waitFor({state:'detached'});
+  }
+  // Re-scaling an already open portal must preserve the input node and value.
+  await page.goto('http://127.0.0.1:18480/?fixture=overlay-bounds&theme=neo-brutalism&zoom=1');
+  await page.setViewportSize({ width: 400, height: 758 });
+  await page.getByRole('button', { name: '账号与日期', exact: true }).click();
+  const draft = page.getByRole('textbox', { name: '草稿名称' });
+  await draft.fill('动态缩放保留');
+  const input = await draft.elementHandle();
+  await page.evaluate(() => { document.documentElement.style.zoom = '2'; });
+  await page.waitForTimeout(150);
+  const stable = await input.evaluate(element => element.isConnected && element.value === '动态缩放保留');
+  const dynamicBounds = await bounds(page.getByRole('dialog', { name: '工作区与日期详情' }));
+  await page.keyboard.press('Escape');
+  const escaped = await page.getByRole('dialog').waitFor({state:'detached'}).then(() => true, () => false);
+  return { pass: failures.length === 0 && errors.length === 0 && stable && contained(dynamicBounds) && escaped, cases: cases.length, tooltipCases, failures, errors, dynamic: { stable, bounds: dynamicBounds, escaped } };
+}

package/scripts/check-settings-theme.js

@@ -0,0 +1,88 @@
+// First run: npm run build && npx vite preview --host 127.0.0.1 --port 18480 --strictPort
+// Fixed regression port 18480 differs from npm run dev (18309).
+// playwright-cli run-code --filename scripts/check-settings-theme.js (preview on port 18480).
+async page => {
+  const errors = [], failures = [];
+  page.on('pageerror', error => errors.push(String(error)));
+  const box = async locator => locator.evaluate(e => { const r = e.getBoundingClientRect(); return { x:r.x, y:r.y, right:r.right, bottom:r.bottom, w:innerWidth, h:innerHeight }; });
+  const inside = r => r.x >= -1 && r.y >= -1 && r.right <= r.w + 1 && r.bottom <= r.h + 1;
+  let settingsCases = 0, themeCases = 0;
+  for (const theme of ['rhine','arknights','neo-brutalism']) for (const width of [400,520,880,1440]) for (const zoom of [1,2]) {
+    await page.setViewportSize({width,height:900});
+    await page.goto(`http://127.0.0.1:18480/?fixture=settings-dialog&theme=${theme}&zoom=${zoom}`);
+    const url = page.url();
+    const host = page.getByRole('textbox',{name:'宿主查询'});
+    await host.fill('查询保留');
+    await page.getByRole('button',{name:'打开设置',exact:true}).click();
+    const outer = page.getByRole('dialog',{name:'设置',exact:true});
+    const outerBounds = await box(outer);
+    const help = outer.getByRole('button',{name:'设置帮助',exact:true});
+    await help.focus(); await page.getByRole('tooltip').waitFor();
+    await page.keyboard.press('Escape'); await page.getByRole('tooltip').waitFor({state:'detached'});
+    if (!await outer.isVisible()) throw new Error('Tooltip Escape closed the settings dialog');
+    await outer.getByRole('textbox',{name:'工作区名称'}).fill('已保存草稿');
+    const save = outer.getByRole('button',{name:'保存设置',exact:true});
+    await save.scrollIntoViewIfNeeded(); const saveBounds=await box(save); await save.click();
+    await outer.getByRole('status').getByText('已保存演示草稿').waitFor();
+    await outer.getByRole('link',{name:'用户管理与权限',exact:true}).click();
+    const edit = outer.getByRole('button',{name:'编辑成员 12',exact:true});
+    await edit.click();
+    const inner=page.getByRole('dialog',{name:'编辑成员 12',exact:true});
+    await inner.waitFor(); const innerBounds=await box(inner);
+    await inner.getByRole('textbox',{name:'成员备注'}).fill('临时备注');
+    await page.keyboard.press('Escape');
+    await inner.waitFor({state:'detached'});
+    await page.waitForFunction(()=>document.activeElement?.textContent==='编辑成员 12');
+    const outerOpen=await outer.isVisible();
+    await page.keyboard.press('Tab');
+    const trapped=await outer.evaluate(e=>e.contains(document.activeElement));
+    await outer.getByRole('link',{name:'公开项目',exact:true}).click();
+    for (const state of ['loading','error','empty','normal']) await outer.getByRole('combobox',{name:'项目状态'}).selectOption(state);
+    const close=outer.getByRole('button',{name:'关闭对话框',exact:true});
+    await close.scrollIntoViewIfNeeded(); const closeBounds=await box(close); await close.click();
+    await page.waitForFunction(()=>document.activeElement?.textContent==='打开设置');
+    const pass=[outerBounds,saveBounds,innerBounds,closeBounds].every(inside)&&outerOpen&&trapped&&page.url()===url&&await host.inputValue()==='查询保留';
+    if(!pass) failures.push({kind:'settings',theme,width,zoom,outerBounds,saveBounds,innerBounds,closeBounds,outerOpen,trapped});
+    settingsCases++;
+  }
+  for (const theme of ['rhine','arknights','neo-brutalism']) for (const width of [390,400,520,880,889,1440]) for (const zoom of [1,2]) {
+    await page.setViewportSize({width,height:900});
+    await page.goto(`http://127.0.0.1:18480/?fixture=theme-picker&theme=${theme}&zoom=${zoom}`);
+    const draft=page.getByRole('textbox',{name:'未保存草稿',exact:true}); await draft.fill('保留原始输入节点');
+    const handle=await draft.elementHandle();
+    await page.waitForFunction(()=>[...document.querySelectorAll('.rhine-theme-preview img')].every(e=>e.complete&&e.naturalWidth===960));
+    const srcs=await page.locator('.rhine-theme-preview img').evaluateAll(es=>es.map(e=>e.currentSrc));
+    for (const name of ['莱茵 · 纸面','明日方舟 · 战术终端','橙趣 · 粗描边']) {
+      const radio=page.getByRole('radio',{name,exact:true});
+      await page.locator('label.rhine-theme-option').filter({has:radio}).click();
+      if(!await radio.isChecked()) failures.push({kind:'theme-selection',theme,width,zoom,name});
+    }
+    await page.getByRole('checkbox',{name:'长主题名称',exact:true}).check();
+    const overflow=await page.evaluate(()=>document.documentElement.scrollWidth>innerWidth+1);
+    const cards=await page.locator('.rhine-theme-option').evaluateAll(es=>es.map(e=>{const r=e.getBoundingClientRect();return {x:r.x,right:r.right,width:innerWidth,height:r.height};}));
+    const stable=await handle.evaluate(e=>e.isConnected&&e.value==='保留原始输入节点');
+    const srcsAfter=await page.locator('.rhine-theme-preview img').evaluateAll(es=>es.map(e=>e.currentSrc));
+    await page.getByRole('button',{name:'弹窗内切换主题',exact:true}).click();
+    const dialog=page.getByRole('dialog',{name:'外观设置',exact:true});
+    const innerDraft=dialog.getByRole('textbox',{name:'弹窗草稿',exact:true}); await innerDraft.fill('继续编辑，不关闭');
+    const innerHandle=await innerDraft.elementHandle();
+    const radio=dialog.getByRole('radio',{name:'莱茵 · 纸面',exact:true});
+    await dialog.locator('label.rhine-theme-option').filter({has:page.getByRole('radio',{name:'莱茵 · 纸面',exact:true})}).click();
+    await radio.focus(); await page.keyboard.press('ArrowRight');
+    const keyboard=await dialog.getByRole('radio',{name:'明日方舟 · 战术终端',exact:true}).isChecked();
+    const dialogStable=await innerHandle.evaluate(e=>e.isConnected&&e.value==='继续编辑，不关闭');
+    await page.keyboard.press('Escape');
+    await dialog.waitFor({state:'detached'});
+    await page.getByRole('checkbox',{name:'模拟预览失败',exact:true}).check();
+    await page.waitForFunction(()=>document.querySelectorAll('.rhine-theme-preview[data-state=error]').length===3);
+    const fallback=page.getByRole('radio',{name:/橙趣/});
+    await page.locator('label.rhine-theme-option').filter({has:fallback}).click();
+    const fallbackSelectable=await fallback.isChecked();
+    await page.getByRole('checkbox',{name:'禁用主题选择',exact:true}).check();
+    const disabled=await page.getByRole('radio').evaluateAll(es=>es.every(e=>e.matches(':disabled')));
+    const pass=!overflow&&cards.every(r=>r.x>=-1&&r.right<=r.width+1&&r.height>=44)&&stable&&JSON.stringify(srcs)===JSON.stringify(srcsAfter)&&keyboard&&dialogStable&&fallbackSelectable&&disabled;
+    if(!pass) failures.push({kind:'theme',theme,width,zoom,overflow,cards,stable,keyboard,dialogStable,fallbackSelectable,disabled});
+    themeCases++;
+  }
+  return {pass:failures.length===0&&errors.length===0,settingsCases,themeCases,failures,errors};
+}