@linhey/rhine-design 0.6.0 → 0.9.0

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,11 @@
+import { BackgroundFiltersFixture } from './BackgroundFiltersFixture';
 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';
@@ -12,8 +16,12 @@ 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 { ListFilterBarGallery } from './ListFilterBarGallery';
+import { CompactAccountGallery } from './CompactAccountGallery';
 
 function Gallery() {
   const [motion, setMotion] = useState('system');
@@ -21,6 +29,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);
@@ -32,10 +41,17 @@ 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 === 'list-filter-bar' && <ListFilterBarGallery />}
+    {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 />}
@@ -99,7 +115,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>}
@@ -122,4 +138,4 @@ function Gallery() {
 
 }
 
-createRoot(document.getElementById('root')!).render(<StrictMode><Gallery /></StrictMode>);
+createRoot(document.getElementById('root')!).render(<StrictMode>{['orbit-entry', 'list-filters'].includes(new URLSearchParams(location.search).get('fixture') || '') ? <BackgroundFiltersFixture /> : 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,21 @@ 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); }
+.ds-orbit-layout-container { container-type:inline-size; }
+.ds-orbit-layout-examples { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--rhine-space-6); }
+.ds-orbit-corner-example { min-height:620px; }
+@container (max-width:760px) { .ds-orbit-layout-examples { grid-template-columns:1fr; } }
 @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; } }
+
+.ds-orbit-entry-container { container-type:inline-size; min-width:0; }
+.ds-orbit-entry { position:relative; isolation:isolate; display:grid; grid-template-columns:1fr 1fr; gap:var(--rhine-space-6); min-height:620px; padding:var(--rhine-space-6); }
+.ds-orbit-entry-background { position:absolute; inset:0 auto 0 0; width:50%; z-index:-1; pointer-events:none; }
+.ds-orbit-entry-intro, .ds-orbit-entry-form { min-width:0; align-self:start; }
+.ds-orbit-entry-form { background:var(--rhine-surface); }
+.ds-orbit-entry:has([data-rhine-orbit-appearance="original"]) .ds-orbit-entry-intro { color:#f2f7ff; }
+@container (max-width:760px) {
+  .ds-orbit-entry { grid-template-columns:1fr; padding-bottom:300px; }
+  .ds-orbit-entry-background { width:100%; }
+}

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-background-filters.js

@@ -0,0 +1,58 @@
+// Run against a fixed production preview on 18484 with playwright-cli run-code --filename.
+async page => {
+  const errors=[],failures=[]; let filterCases=0,orbitCases=0;
+  page.on('pageerror',e=>errors.push(String(e)));
+  const check=(ok,detail)=>{if(!ok) failures.push(detail);};
+  const horizontal=async root=>root.evaluate(e=>{const r=e.getBoundingClientRect();return r.left>=-1&&r.right<=innerWidth+1&&e.scrollWidth<=e.clientWidth+1;});
+  for(const theme of ['rhine','arknights','neo-brutalism']) for(const width of [400,520,880]) for(const zoom of [1,2]) {
+    await page.setViewportSize({width,height:1000});
+    await page.goto(`http://127.0.0.1:18484/?fixture=list-filters&theme=${theme}&zoom=${zoom}`);
+    const bars=page.locator('.rhine-list-filter-bar');
+    for(let i=0;i<3;i++) {
+      const bar=bars.nth(i), trigger=bar.getByRole('button',{name:/^更多筛选/});
+      if(i<2) check(await bar.locator('.rhine-list-filter-bar__search label').evaluate(e=>{const r=e.getBoundingClientRect();return r.width>20&&r.height>10;}),{theme,width,zoom,i,kind:'visible-search-label'});
+      check(await bar.getByRole('combobox').count()===2,{theme,width,zoom,i,kind:'primary-limit'});
+      await trigger.click(); const dialog=page.getByRole('dialog');
+      await dialog.evaluate(e=>Promise.all(e.getAnimations().map(a=>a.finished)));
+      check(await horizontal(dialog),{theme,width,zoom,i,kind:'drawer-overflow'});
+      if(i<2) await dialog.getByRole('checkbox',{name:'只看已审查'}).check();
+      else await dialog.getByRole('combobox',{name:'统计范围'}).selectOption({label:'示例团队 / 跨部门体验与可访问性协作小组'});
+      await page.keyboard.press('Escape'); await dialog.waitFor({state:'detached'});
+      await page.waitForFunction(e=>e===document.activeElement,await trigger.elementHandle());
+      check(await trigger.evaluate(e=>e===document.activeElement),{theme,width,zoom,i,kind:'return-focus'});
+      check(await horizontal(bar),{theme,width,zoom,i,kind:'summary-overflow'});
+      const chip=bar.getByRole('button',{name:/^清除/}).first(); await chip.click();
+      check(await bar.evaluate(e=>e.contains(document.activeElement)),{theme,width,zoom,i,kind:'clear-focus'});
+      await page.getByRole('combobox',{name:'示例状态'}).selectOption('loading');
+      await trigger.click();
+      check(await dialog.getByRole('status').textContent().then(t=>t.includes('正在更新结果')),{theme,width,zoom,i,kind:'pending'});
+      await page.keyboard.press('Escape'); await dialog.waitFor({state:'detached'});
+      await page.getByRole('combobox',{name:'示例状态'}).selectOption('error');
+      await trigger.click(); check(await dialog.getByText('未能更新结果',{exact:true}).isVisible(),{theme,width,zoom,i,kind:'error'});
+      await page.keyboard.press('Escape'); await dialog.waitFor({state:'detached'});
+      await page.getByRole('combobox',{name:'示例状态'}).selectOption('empty');
+      check(await bar.getByRole('status').textContent().then(t=>/0 条|无用量/.test(t)),{theme,width,zoom,i,kind:'empty'});
+      await page.getByRole('combobox',{name:'示例状态'}).selectOption('disabled');
+      check(await bar.getByRole('button',{name:'刷新',exact:true}).isDisabled(),{theme,width,zoom,i,kind:'disabled'});
+      await page.getByRole('combobox',{name:'示例状态'}).selectOption('normal');
+      filterCases++;
+    }
+  }
+  for(const theme of ['rhine','arknights','neo-brutalism']) for(const width of [400,520,880,1280]) for(const zoom of [1,2]) {
+    await page.setViewportSize({width,height:1000});
+    await page.goto(`http://127.0.0.1:18484/?fixture=orbit-entry&theme=${theme}&zoom=${zoom}`);
+    const input=page.getByRole('textbox',{name:'示例昵称'}); await input.fill('保留草稿');
+    const handle=await input.elementHandle();
+    const canvas=await page.locator('.rhine-orbit canvas').first().elementHandle();
+    const layout=await page.locator('.ds-orbit-entry').evaluate(e=>{
+      const r=e.getBoundingClientRect(), bg=e.querySelector('.rhine-orbit'), c=bg.querySelector('canvas').getBoundingClientRect(), intro=e.querySelector('.ds-orbit-entry-intro').getBoundingClientRect(), form=e.querySelector('.ds-orbit-entry-form');
+      return {inside:r.left>=0&&r.right<=innerWidth+1,clear:intro.bottom<=c.top,formClear:getComputedStyle(form).backgroundColor!=='rgba(0, 0, 0, 0)',noControl:!bg.querySelector('button'),noFrame:getComputedStyle(bg).borderTopWidth==='0px'&&getComputedStyle(bg).boxShadow==='none',full:Math.abs(bg.getBoundingClientRect().width-r.width)<2, narrow:e.parentElement.clientWidth<=760};
+    });
+    check(layout.inside&&layout.clear&&layout.formClear&&layout.noControl&&layout.noFrame&&layout.full===layout.narrow,{theme,width,zoom,kind:'orbit-layout',layout});
+    await page.getByRole('combobox',{name:'验收主题'}).selectOption(theme==='rhine'?'arknights':'rhine');
+    await page.setViewportSize({width:width+80,height:1000});
+    check(await handle.evaluate(e=>e.isConnected&&e.value==='保留草稿')&&await canvas.evaluate(e=>e.isConnected),{theme,width,zoom,kind:'stable-nodes'});
+    orbitCases++;
+  }
+  return {pass:!failures.length&&!errors.length,filterCases,orbitCases,failures,errors};
+}

package/scripts/check-background-motion.js

@@ -0,0 +1,169 @@
+async page => {
+  await page.addInitScript(() => {
+  if (window.__donutProof) return;
+  const proof = window.__donutProof = { contexts: [], pending: new Set(), rafScheduled: 0, rafFired: 0, rafCancelled: 0, listeners: new Map(), observerCreates: {}, observerDisconnects: {}, orbitObservers: {}, orbitDisconnects: {} };
+  let targetID = 0, listenerID = 0;
+  const targets = new WeakMap(), listeners = new WeakMap();
+  const targetName = target => {
+    if (!targets.has(target)) targets.set(target, ++targetID);
+    const kind = target === window ? 'window' : target === document ? 'document' : target instanceof HTMLCanvasElement ? 'canvas' : target instanceof MediaQueryList ? 'media' : '';
+    return kind ? `${kind}:${targets.get(target)}` : '';
+  };
+  const nativeAdd = EventTarget.prototype.addEventListener;
+  const nativeRemove = EventTarget.prototype.removeEventListener;
+  EventTarget.prototype.addEventListener = function (type, listener, options) {
+    const target = targetName(this);
+    if (target && listener && (typeof listener === 'object' || typeof listener === 'function')) {
+      if (!listeners.has(listener)) listeners.set(listener, ++listenerID);
+      const key = `${target}:${type}:${listeners.get(listener)}:${Boolean(typeof options === 'boolean' ? options : options?.capture)}`;
+      proof.listeners.set(key, { target, type });
+    }
+    return nativeAdd.call(this, type, listener, options);
+  };
+  EventTarget.prototype.removeEventListener = function (type, listener, options) {
+    const target = targetName(this);
+    if (target && listener) proof.listeners.delete(`${target}:${type}:${listeners.get(listener)}:${Boolean(typeof options === 'boolean' ? options : options?.capture)}`);
+    return nativeRemove.call(this, type, listener, options);
+  };
+  const nativeRequest = requestAnimationFrame, nativeCancel = cancelAnimationFrame;
+  window.requestAnimationFrame = callback => {
+    proof.rafScheduled++;
+    const id = nativeRequest(time => { proof.pending.delete(id); proof.rafFired++; callback(time); });
+    proof.pending.add(id);
+    return id;
+  };
+  window.cancelAnimationFrame = id => { proof.pending.delete(id); proof.rafCancelled++; nativeCancel(id); };
+  for (const name of ['ResizeObserver', 'IntersectionObserver', 'MutationObserver']) {
+    const Native = window[name];
+    window[name] = class extends Native {
+      constructor(callback) { super(callback); proof.observerCreates[name] = (proof.observerCreates[name] || 0) + 1; }
+      observe(target, ...args) { if (target instanceof HTMLCanvasElement && target.classList.contains('rhine-orbit-canvas') && !this.orbit) { this.orbit = true; proof.orbitObservers[name] = (proof.orbitObservers[name] || 0) + 1; } return super.observe(target, ...args); }
+      disconnect() { if(this.orbit) proof.orbitDisconnects[name] = (proof.orbitDisconnects[name] || 0) + 1; proof.observerDisconnects[name] = (proof.observerDisconnects[name] || 0) + 1; return super.disconnect(); }
+    };
+  }
+  const locations = new WeakMap(), contexts = new WeakMap();
+  const record = gl => {
+    if (!contexts.has(gl)) {
+      const entry = { canvas: gl.canvas, draws: 0, frames: 0, samples: [], time: null, matrices: [], resources: {}, lost: 0, restored: 0, queued: false };
+      contexts.set(gl, entry); proof.contexts.push(entry);
+      nativeAdd.call(gl.canvas, 'webglcontextlost', () => entry.lost++);
+      nativeAdd.call(gl.canvas, 'webglcontextrestored', () => entry.restored++);
+    }
+    return contexts.get(gl);
+  };
+  const scheduleSample = gl => {
+    const entry = record(gl);
+    if (entry.queued) return;
+    entry.queued = true;
+    queueMicrotask(() => {
+      entry.queued = false; entry.frames++;
+      const now = performance.now();
+      const retainSample = !entry.samples.length || now - entry.samples.at(-1).at >= 180;
+      try {
+        const canvas = document.createElement('canvas'); canvas.width = 100; canvas.height = 72;
+        const context = canvas.getContext('2d'); context.drawImage(gl.canvas, 0, 0, 100, 72);
+        const pixels = context.getImageData(0, 0, 100, 72).data;
+        let hash = 2166136261, painted = 0, bright = 0, min = 255, max = 0;
+        for (let i = 0; i < pixels.length; i += 4) {
+          for (let j = 0; j < 4; j++) hash = Math.imul(hash ^ pixels[i + j], 16777619);
+          if (pixels[i + 3]) painted++;
+          const luminance = (pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3;
+          if (luminance > 100) bright++;
+          min = Math.min(min, luminance); max = Math.max(max, luminance);
+        }
+        entry.latest = { at: now, time: entry.time, hash: hash >>> 0, painted, bright, min, max, matrices: entry.matrices.slice(0, 40) };
+        if (retainSample) entry.samples.push(entry.latest);
+        if (entry.samples.length > 700) entry.samples.shift();
+      } catch (error) { entry.sampleError = String(error); }
+      entry.matrices = [];
+    });
+  };
+  for (const Proto of [window.WebGLRenderingContext?.prototype, window.WebGL2RenderingContext?.prototype].filter(Boolean)) {
+    for (const name of ['drawArrays', 'drawElements', 'drawArraysInstanced', 'drawElementsInstanced']) {
+      const native = Proto[name]; if (!native || native.__donutProof) continue;
+      const wrapped = function (...args) { const result = native.apply(this, args); record(this).draws++; scheduleSample(this); return result; };
+      wrapped.__donutProof = true; Proto[name] = wrapped;
+    }
+    const nativeLocation = Proto.getUniformLocation;
+    if (!nativeLocation.__donutProof) {
+      const wrapped = function (program, name) { const value = nativeLocation.call(this, program, name); if (value) locations.set(value, name); return value; };
+      wrapped.__donutProof = true; Proto.getUniformLocation = wrapped;
+    }
+    for (const name of ['uniform1f', 'uniformMatrix4fv']) {
+      const native = Proto[name]; if (native.__donutProof) continue;
+      const wrapped = function (...args) {
+        const result = native.apply(this, args), uniform = locations.get(args[0]);
+        if (name === 'uniform1f' && /^(time|uTime)$/.test(uniform)) record(this).time = args[1];
+        if (name === 'uniformMatrix4fv' && uniform === 'modelViewMatrix') record(this).matrices.push(Array.from(args[2], value => Number(value.toFixed(5))));
+        return result;
+      };
+      wrapped.__donutProof = true; Proto[name] = wrapped;
+    }
+    for (const kind of ['Buffer', 'Texture', 'Program', 'Shader', 'Framebuffer', 'Renderbuffer', 'VertexArray']) {
+      for (const action of ['create', 'delete']) {
+        const name = action + kind, native = Proto[name]; if (!native || native.__donutProof) continue;
+        const wrapped = function (...args) { const result = native.apply(this, args); const entry = record(this); if (action === 'create' ? result : args[0]) entry.resources[name] = (entry.resources[name] || 0) + 1; return result; };
+        wrapped.__donutProof = true; Proto[name] = wrapped;
+      }
+    }
+  }
+  window.__donutSnapshot = () => ({
+    pendingRafs: proof.pending.size, rafScheduled: proof.rafScheduled, rafFired: proof.rafFired, rafCancelled: proof.rafCancelled,
+    listeners: [...proof.listeners.values()], observerCreates: proof.observerCreates, observerDisconnects: proof.observerDisconnects, orbitObservers: proof.orbitObservers, orbitDisconnects: proof.orbitDisconnects,
+    contexts: proof.contexts.filter(entry => entry.canvas.classList.contains('rhine-orbit-canvas')).map(entry => ({
+      example: entry.canvas.closest('.rhine-orbit')?.getAttribute('aria-label') || null,
+      kind: entry.canvas.dataset.orbitArtwork || 'donut', active: !entry.canvas.hidden, canvasConnected: entry.canvas.isConnected, draws: entry.draws, frames: entry.frames, time: entry.time, samples: entry.samples, latest: entry.latest,
+      resources: entry.resources, lost: entry.lost, restored: entry.restored, sampleError: entry.sampleError, width: entry.canvas.width, height: entry.canvas.height,
+    })),
+  });
+}
+);
+
+  const results=[],errors=[]; page.on('pageerror',e=>errors.push(String(e)));
+  const snap=()=>page.evaluate(()=>window.__donutSnapshot());
+  for(const theme of ['rhine','arknights','neo-brutalism']) {
+    await page.setViewportSize({width:1280,height:1000});
+    await page.goto(`http://127.0.0.1:18484/?fixture=orbit-entry&theme=${theme}`);
+    const root=page.locator('.rhine-orbit'), canvas=root.locator('canvas').first();
+    await root.scrollIntoViewIfNeeded();
+    await page.waitForFunction(()=>window.__donutSnapshot().contexts.some(c=>c.canvasConnected&&c.active&&c.latest?.painted>50));
+    const active=s=>s.contexts.find(c=>c.canvasConnected&&c.active);
+    const a=active(await snap()); await page.waitForTimeout(450); const b=active(await snap());
+    const playing=a.latest.hash!==b.latest.hash&&b.draws>a.draws;
+    await page.getByRole('checkbox',{name:'减少入口动态'}).check();
+    await page.waitForTimeout(150);const c=active(await snap());await page.waitForTimeout(350); const d=active(await snap());
+    const manual=c.draws===d.draws&&c.latest.hash===d.latest.hash;
+    await page.getByRole('checkbox',{name:'减少入口动态'}).uncheck();
+    await page.emulateMedia({reducedMotion:'reduce'});await page.waitForTimeout(150);const e=active(await snap());await page.waitForTimeout(350);const f=active(await snap());
+    const system=e.draws===f.draws;
+    await page.emulateMedia({reducedMotion:'no-preference'});await page.waitForTimeout(350);const resumed=active(await snap()).draws>f.draws;
+    await root.evaluate(e=>e.style.display='none');await page.waitForTimeout(150);const g=active(await snap());await page.waitForTimeout(350);const h=active(await snap());
+    const empty=g.draws===h.draws;
+    await root.evaluate(e=>e.style.display='');await page.waitForTimeout(200);
+    await page.locator('.ds-orbit-entry-container').evaluate(e=>e.style.marginTop='2200px');await page.evaluate(()=>scrollTo(0,0));await page.waitForTimeout(150);const j=active(await snap());await page.waitForTimeout(350);const k=active(await snap());
+    const offscreen=j.draws===k.draws;
+    await page.locator('.ds-orbit-entry-container').evaluate(e=>e.style.marginTop=''); await root.scrollIntoViewIfNeeded();await page.waitForTimeout(250);
+    const other=await page.context().newPage();await other.goto('about:blank');await other.bringToFront();await page.waitForTimeout(250);
+    const actualHidden=await page.evaluate(()=>document.hidden);
+    await page.evaluate(()=>{Object.defineProperty(document,'hidden',{configurable:true,value:true});document.dispatchEvent(new Event('visibilitychange'));});
+    await page.waitForTimeout(150);
+    const hidden=await page.evaluate(()=>document.hidden);const l=active(await snap());await page.waitForTimeout(350);const m=active(await snap());
+    const hiddenPause=hidden&&l.draws===m.draws;
+    await other.close();await page.bringToFront();
+    await page.evaluate(()=>{delete document.hidden;document.dispatchEvent(new Event('visibilitychange'));});
+    await page.getByRole('checkbox',{name:'挂载入口'}).uncheck();await page.waitForTimeout(150);const disposed=await snap();
+    await page.waitForTimeout(350);const end=await snap();
+    const cleanup=end.contexts.every(c=>!c.canvasConnected)&&end.pendingRafs===0&&JSON.stringify(end.contexts.map(c=>c.draws))===JSON.stringify(disposed.contexts.map(c=>c.draws))&&['ResizeObserver','IntersectionObserver','MutationObserver'].every(n=>end.orbitObservers[n]>0&&end.orbitObservers[n]===end.orbitDisconnects[n]);
+    results.push({theme,playing,manual,system,resumed,empty,offscreen,actualHidden,hidden,hiddenPause,cleanup,pending:end.pendingRafs,observers:{created:end.observerCreates,disconnected:end.observerDisconnects,orbitCreated:end.orbitObservers,orbitDisconnected:end.orbitDisconnects},resources:end.contexts.map(c=>c.resources)});
+  }
+  const fallback=await page.context().newPage();
+  await fallback.addInitScript(()=>{HTMLCanvasElement.prototype.getContext=function(){return null;};});
+  const fallbacks=[];
+  for(const theme of ['rhine','arknights','neo-brutalism']) {
+    await fallback.goto(`http://127.0.0.1:18484/?fixture=orbit-entry&theme=${theme}`);
+    await fallback.waitForFunction(()=>document.querySelector('.rhine-orbit')?.dataset.rhineOrbitState==='unavailable');
+    fallbacks.push(await fallback.locator('.rhine-orbit').evaluate(e=>{const c=getComputedStyle(e.querySelector('canvas')),p=getComputedStyle(e,'::after');return {theme:e.closest('[data-rhine-theme]').dataset.rhineTheme,pass:c.width===p.width&&c.height===p.height&&c.right===p.right&&c.bottom===p.bottom&&p.backgroundImage.includes('svg')};}));
+  }
+  await fallback.close();
+  return {pass:results.every(r=>r.playing&&r.manual&&r.system&&r.resumed&&r.empty&&r.offscreen&&r.hiddenPause&&r.cleanup)&&fallbacks.every(r=>r.pass)&&!errors.length,results,fallbacks,errors};
+}

package/scripts/check-filter-native-date.js

@@ -0,0 +1,47 @@
+async page => {
+  await page.goto(`http://127.0.0.1:18484/?fixture=list-filters&theme=neo-brutalism&proof=${Date.now()}#list-filter-bar`);
+  const checks = [];
+  const check = (name, pass, evidence = {}) => checks.push({ name, pass: Boolean(pass), ...evidence });
+  await page.getByRole('group', { name: '录制会话筛选', exact: true }).getByRole('button', { name: /^更多筛选/ }).click();
+  const dialog = page.getByRole('dialog', { name: '录制会话筛选', exact: true });
+  const start = dialog.getByLabel('开始日期', { exact: true });
+  const end = dialog.getByLabel('结束日期', { exact: true });
+  const inspect = () => start.evaluate(element => ({ value: element.value, badInput: element.validity.badInput, invalid: element.getAttribute('aria-invalid') }));
+  await start.fill('2026-10-20'); await end.fill('2026-10-24');
+  await start.focus(); await page.keyboard.press('ArrowLeft'); await page.keyboard.press('ArrowLeft'); await page.keyboard.press('Backspace');
+  await page.waitForTimeout(100);
+  let value = await inspect();
+  check('Deleting a native date segment keeps accepted range and reports invalid', value.badInput && value.invalid === 'true' && (await page.locator('#list-filter-bar .rhine-list-filter-bar__active').first().innerText()).includes('2026-10-20 — 2026-10-24'), value);
+  await page.keyboard.type('2026'); await page.waitForTimeout(100); value = await inspect();
+  check('Typing the complete year repairs native draft', value.value === '2026-10-20' && !value.badInput && value.invalid !== 'true', value);
+  await dialog.getByRole('button', { name: '清空日期', exact: true }).click();
+  await start.evaluate(element => { window.nativeDateEvents = []; for (const name of ['input', 'change', 'keyup', 'blur']) element.addEventListener(name, event => window.nativeDateEvents.push({ event: event.type, key: event.key, value: element.value, badInput: element.validity.badInput })); });
+  await start.focus(); await page.keyboard.type('2'); await page.waitForTimeout(100); value = await inspect();
+  check('Empty date native fragment is invalid even when no input/change fires', value.badInput && value.invalid === 'true' && await dialog.getByRole('button', { name: '清空日期', exact: true }).isEnabled(), { ...value, events: await page.evaluate(() => window.nativeDateEvents) });
+  if (await dialog.getByRole('button', { name: '清空日期', exact: true }).isEnabled()) {
+    await dialog.getByRole('button', { name: '清空日期', exact: true }).click(); await page.waitForTimeout(100); value = await inspect();
+    check('Clear removes an empty native fragment and validation error', value.value === '' && !value.badInput && value.invalid !== 'true', value);
+  }
+  await dialog.getByRole('button', { name: '今天', exact: true }).click();
+  await start.focus(); await page.keyboard.press('ArrowLeft'); await page.keyboard.press('ArrowLeft'); await page.keyboard.press('Backspace');
+  await dialog.getByRole('button', { name: '今天', exact: true }).click(); await page.waitForTimeout(100); value = await inspect();
+  check('Applying the same preset clears a rejected native draft', value.value === '2026-10-24' && !value.badInput && value.invalid !== 'true', value);
+  await page.keyboard.press('Escape'); await dialog.waitFor({state:'detached'});
+  for (let i=0;i<3;i++) {
+    const bar=page.locator('.rhine-list-filter-bar').nth(i);
+    if(await bar.getByRole('button',{name:'重置筛选',exact:true}).count()) await bar.getByRole('button',{name:'重置筛选',exact:true}).click();
+    await bar.getByRole('button',{name:/^更多筛选/}).click(); const panel=page.getByRole('dialog');
+    if(i<2) await panel.getByRole('checkbox',{name:'只看已审查'}).check();
+    else await panel.getByRole('combobox',{name:'统计范围'}).selectOption({label:'示例团队 / 跨部门体验与可访问性协作小组'});
+    const date=panel.getByLabel('开始日期',{exact:true});
+    await date.focus();
+    if(i===2){await page.keyboard.press('ArrowLeft');await page.keyboard.press('ArrowLeft');await page.keyboard.press('Backspace');}
+    else await page.keyboard.type('2');
+    await page.waitForFunction(e=>e.validity.badInput&&e.getAttribute('aria-invalid')==='true',await date.elementHandle());
+    await panel.getByRole('button',{name:'重置筛选',exact:true}).click();
+    const clean=await date.evaluate(e=>!e.validity.badInput&&e.getAttribute('aria-invalid')!=='true');
+    check(`Overall reset clears default-valued native draft in example ${i}`,clean&&await panel.evaluate(e=>e.contains(document.activeElement)));
+    await page.keyboard.press('Escape');await panel.waitFor({state:'detached'});
+  }
+  return { complete: checks.every(item => item.pass), checks, scope: 'Real native date segmentation in isolated Chromium; keyboard presses use page.keyboard so locator focus does not reset year digit buffering.' };
+}