@linhey/rhine-design 0.8.0 → 0.9.0

package/preview/ListFilterBarGallery.tsx

@@ -0,0 +1,170 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  Badge, Button, Checkbox, DateRangePicker, EmptyState, Inline, ListFilterBar,
+  Select, Skeleton, Stack, Surface, Text, type DateRange,
+} from '../components';
+
+type PreviewState = 'normal' | 'loading' | 'empty' | 'error' | 'disabled';
+const records = [
+  { id: 'design-review', title: '核对页面设计与窄屏布局', person: '示例成员', state: 'done', reviewed: true, date: '2026-10-24' },
+  { id: 'component-review', title: '整理共享组件与交互规则', person: '组件维护者', state: 'running', reviewed: false, date: '2026-10-23' },
+];
+const dateLabel = ({ start, end }: DateRange) => start || end ? `${start || '不限开始'} — ${end || '不限结束'}` : undefined;
+
+function usePreviewRefresh() {
+  const [refreshing, setRefreshing] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => () => { if (timer.current) clearTimeout(timer.current); }, []);
+  return {
+    refreshing,
+    refresh: () => {
+      if (timer.current) clearTimeout(timer.current);
+      setRefreshing(true);
+      timer.current = setTimeout(() => setRefreshing(false), 600);
+    },
+  };
+}
+
+function SessionListExample({ mode, embedded = false }: { mode: PreviewState; embedded?: boolean }) {
+  const [query, setQuery] = useState('');
+  const [state, setState] = useState('all');
+  const [sort, setSort] = useState('newest');
+  const [person, setPerson] = useState('all');
+  const [reviewed, setReviewed] = useState(false);
+  const [range, setRange] = useState<DateRange>({ start: '', end: '' });
+  const [dateResetKey, setDateResetKey] = useState(0);
+  const [exportCount, setExportCount] = useState(0);
+  const { refreshing, refresh } = usePreviewRefresh();
+  const disabled = mode === 'disabled';
+  const pending = mode === 'loading' || refreshing;
+  const label = embedded ? '人员会话筛选' : '录制会话筛选';
+  const reset = () => { setQuery(''); setState('all'); setSort('newest'); setPerson('all'); setReviewed(false); setRange({ start: '', end: '' }); setDateResetKey(key => key + 1); };
+  // Gallery records are synthetic; production hosts send these values to their own query service.
+  const rows = mode === 'empty' ? [] : records.filter(row =>
+    (state === 'all' || row.state === state) &&
+    (person === 'all' || row.person === person) &&
+    (!reviewed || row.reviewed) &&
+    (!range.start || row.date >= range.start) && (!range.end || row.date <= range.end) &&
+    `${row.title} ${row.person} ${row.id}`.includes(query.trim()),
+  ).slice().sort((a, b) => sort === 'oldest' ? a.id.localeCompare(b.id) : b.id.localeCompare(a.id));
+  const common = [
+    {
+      id: 'status', label: '会话状态', activeLabel: state === 'all' ? undefined : state === 'done' ? '已完成' : '进行中',
+      onClear: disabled ? undefined : () => setState('all'),
+      control: <Select label="会话状态" value={state} disabled={disabled} onChange={event => setState(event.target.value)}>
+        <option value="all">全部状态</option><option value="running">进行中</option><option value="done">已完成</option>
+      </Select>,
+    },
+    {
+      id: 'sort', label: '排序', activeLabel: sort === 'newest' ? undefined : '最早事件优先',
+      onClear: disabled ? undefined : () => setSort('newest'),
+      control: <Select label="排序" value={sort} disabled={disabled} onChange={event => setSort(event.target.value)}>
+        <option value="newest">最后事件最新</option><option value="oldest">最早事件优先</option>
+      </Select>,
+    },
+  ];
+  const reviewField = {
+    id: 'reviewed', label: '审查', activeLabel: reviewed ? '只看已审查' : undefined,
+    onClear: disabled ? undefined : () => setReviewed(false),
+    control: <Checkbox label="只看已审查" checked={reviewed} disabled={disabled} onChange={event => setReviewed(event.target.checked)} />,
+  };
+  return <Stack gap={4} style={embedded ? { maxWidth: 420, width: '100%' } : undefined}>
+    <ListFilterBar label={label}
+      search={{ label: '搜索会话', placeholder: '搜索消息或会话 ID', value: query, disabled, onChange: event => setQuery(event.target.value) }}
+      primary={embedded ? common : [...common, reviewField]}
+      filters={[
+        ...(embedded ? [reviewField] : []),
+        {
+          id: 'person', label: '人员', activeLabel: person === 'all' ? undefined : person,
+          onClear: disabled ? undefined : () => setPerson('all'),
+          control: <Select label="人员" value={person} disabled={disabled} onChange={event => setPerson(event.target.value)}>
+            <option value="all">全部人员</option><option>示例成员</option><option>组件维护者</option>
+          </Select>,
+        },
+        {
+          id: 'date', label: '最后事件日期', activeLabel: dateLabel(range),
+          onClear: disabled ? undefined : () => setRange({ start: '', end: '' }),
+          control: <DateRangePicker key={dateResetKey} label="最后事件日期" value={range} onValueChange={setRange} disabled={disabled}
+            presets={[{ label: '今天', value: { start: '2026-10-24', end: '2026-10-24' } }]} />,
+        },
+      ]}
+      onReset={disabled ? undefined : reset}
+      refresh={{ onClick: refresh, busy: pending, disabled }}
+      action={embedded ? undefined : <Button variant="secondary" disabled={disabled || pending} onClick={() => setExportCount(count => count + 1)}>导出示例</Button>}
+      result={pending ? undefined : `${rows.length} 条结果`}
+      pending={pending}
+      error={mode === 'error' ? '读取失败，当前保留上次结果。请刷新重试。' : undefined}
+    />
+    {pending ? <Skeleton label="正在读取会话" lines={3} /> : rows.length ? rows.map(row => <Surface key={row.id}>
+      <Stack gap={2}>
+        <Inline gap={2}><Text as="h4" variant="label">{row.person}</Text><Badge>{row.state === 'done' ? '已完成' : '进行中'}</Badge></Inline>
+        <Text>{row.title}</Text><Text variant="caption" tone="muted">{row.id}</Text>
+      </Stack>
+    </Surface>) : <EmptyState title="没有匹配的会话" description="试试其他条件。" action={!disabled ? <Button variant="secondary" onClick={reset}>清除筛选</Button> : undefined} />}
+    {!!exportCount && <Text role="status" variant="caption" tone="muted">已触发 {exportCount} 次示例操作；展台不生成或下载文件。</Text>}
+  </Stack>;
+}
+
+function StatisticsExample({ mode }: { mode: PreviewState }) {
+  const [scope, setScope] = useState('all');
+  const [platform, setPlatform] = useState('all');
+  const [metric, setMetric] = useState('cost');
+  const [range, setRange] = useState<DateRange>({ start: '2026-10-24', end: '2026-10-24' });
+  const [dateResetKey, setDateResetKey] = useState(0);
+  const { refreshing, refresh } = usePreviewRefresh();
+  const disabled = mode === 'disabled';
+  const pending = mode === 'loading' || refreshing;
+  const reset = () => { setScope('all'); setPlatform('all'); setMetric('cost'); setRange({ start: '2026-10-24', end: '2026-10-24' }); setDateResetKey(key => key + 1); };
+  return <Stack gap={4}>
+    <ListFilterBar label="部门用量筛选"
+      primary={[
+        { id: 'platform', label: '平台', activeLabel: platform === 'all' ? undefined : platform, onClear: disabled ? undefined : () => setPlatform('all'),
+          control: <Select label="平台" value={platform} disabled={disabled} onChange={event => setPlatform(event.target.value)}><option value="all">全部平台</option><option>OpenAI</option></Select> },
+        { id: 'metric', label: '排行依据', activeLabel: metric === 'cost' ? undefined : 'Token 排行', onClear: disabled ? undefined : () => setMetric('cost'),
+          control: <Select label="排行依据" value={metric} disabled={disabled} onChange={event => setMetric(event.target.value)}><option value="cost">消费排行</option><option value="tokens">Token 排行</option></Select> },
+      ]}
+      filters={[
+        { id: 'scope', label: '统计范围', activeLabel: scope === 'all' ? undefined : scope, onClear: disabled ? undefined : () => setScope('all'),
+          control: <Select label="统计范围" value={scope} disabled={disabled} onChange={event => setScope(event.target.value)}><option value="all">所有可见部门</option><option>示例团队 / 跨部门体验与可访问性协作小组</option></Select> },
+        { id: 'range', label: '统计日期', activeLabel: range.start === '2026-10-24' && range.end === '2026-10-24' ? undefined : dateLabel(range),
+          onClear: disabled ? undefined : () => setRange({ start: '2026-10-24', end: '2026-10-24' }),
+          control: <DateRangePicker key={dateResetKey} label="统计日期" value={range} onValueChange={setRange} disabled={disabled} clearable={false} /> },
+      ]}
+      onReset={disabled ? undefined : reset} refresh={{ onClick: refresh, busy: pending, disabled }} pending={pending}
+      result={pending ? undefined : mode === 'empty' ? '当前范围无用量' : `${dateLabel(range)} · ${scope === 'all' ? '所有可见部门' : scope}`}
+      error={mode === 'error' ? '统计读取失败，暂不能确认当前范围结果。' : undefined}
+    />
+    {pending ? <Skeleton label="正在读取用量" lines={2} /> : mode === 'empty' ? <EmptyState title="当前范围没有用量" description="可更改范围或日期后重试。" /> : <Surface><Stack gap={2}>
+      <Text as="h4" variant="label">示例统计结果</Text><Text variant="caption" tone="muted">统计范围、日期与排行方式由宿主控制；此处仅展示合成数据。</Text>
+      <Text numeric>{metric === 'cost' ? '$ 8.42' : '1,400,000 Token'}</Text>
+    </Stack></Surface>}
+  </Stack>;
+}
+
+export function ListFilterBarGallery() {
+  const [mode, setMode] = useState<PreviewState>('normal');
+  return <section id="list-filter-bar">
+    <div className="ds-section-title"><span>FILTERS</span><h2>列表筛选 · 限制常显复杂度</h2></div>
+    <p className="ds-caption">搜索、最多两个常显条件和一个业务操作；其他条件按需展开。对应 Rhine #19，查询与权限由宿主管理。</p>
+    <Stack gap={6}>
+      <Select label="示例状态" value={mode} onChange={event => setMode(event.target.value as PreviewState)}>
+        <option value="normal">正常 / 有数据</option><option value="loading">加载中</option><option value="empty">无结果</option><option value="error">读取失败</option><option value="disabled">条件不可修改</option>
+      </Select>
+      <Stack gap={3}>
+        <Text as="h3" variant="heading">独立列表</Text>
+        <Text variant="caption" tone="muted">传入的第三个常显条件“审查”自动归入更多筛选；不会继续增加顶部行数。</Text>
+        <SessionListExample mode={mode} />
+      </Stack>
+      <Stack gap={3}>
+        <Text as="h3" variant="heading">嵌入人员详情 · 420px 容器</Text>
+        <Text variant="caption" tone="muted">同一组件随实际容器重排，窄区域仍保留结果、刷新和退出筛选的入口。</Text>
+        <SessionListExample mode={mode} embedded />
+      </Stack>
+      <Stack gap={3}>
+        <Text as="h3" variant="heading">统计范围 · 无搜索框</Text>
+        <StatisticsExample mode={mode} />
+      </Stack>
+      <Text variant="caption" tone="muted">筛选即时改变宿主状态，关闭抽屉不撤销条件。加载、错误和结果在抽屉内同样可见；用 Escape 关闭并返回入口。</Text>
+    </Stack>
+  </section>;
+}

package/preview/OrbitGallery.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { OrbitEntryExample } from './BackgroundFiltersFixture';
 import { Badge, Button, Disclosure, Inline, OrbitBackdrop, SegmentedControl, Stack, Surface, Switch, Text, TextField } from '../components';
 
 export function OrbitGallery() {
@@ -46,5 +47,18 @@ export function OrbitGallery() {
         </Stack></div>
       </OrbitBackdrop>
     </Disclosure>
+    <Disclosure title="查看入口与全页背景组合">
+      <Text tone="muted">文字保留在上方，艺术位于右下角；无框背景下的表单使用 Surface 保持清晰。</Text>
+      <div className="ds-orbit-layout-container"><div className="ds-orbit-layout-examples ds-gap-top">
+        <OrbitBackdrop className="ds-orbit-corner-example" appearance={appearance} reducedMotion={reduced} composition="corner" controls={false} role="region" aria-label="右下角艺术与文字">
+          <Stack gap={4}>
+            <Text variant="overline">RHINE STUDIO</Text>
+            <Text as="h3" variant="title">从这里，<br />继续创造。</Text>
+            <Text tone="muted">让内容拥有清晰的阅读空间。</Text>
+          </Stack>
+        </OrbitBackdrop>
+        <OrbitEntryExample appearance={appearance} reduced={reduced} />
+      </div></div>
+    </Disclosure>
   </section>;
 }

package/preview/main.tsx

@@ -1,3 +1,4 @@
+import { BackgroundFiltersFixture } from './BackgroundFiltersFixture';
 import { StrictMode, useEffect, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { Badge, Button, Checkbox, Disclosure, EmptyState, Logo, Notice, Progress, SegmentedControl, Select, SelectionCard, Skeleton, Surface, Tabs, Text, TextField, Toolbar, type TextVariant } from '../components/index';
@@ -19,6 +20,7 @@ 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() {
@@ -44,6 +46,7 @@ function Gallery() {
     {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 />}
@@ -135,4 +138,4 @@ function Gallery() {
 
 }
 
-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>);
+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

@@ -26,4 +26,19 @@ body { 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/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.' };
+}