@linhey/rhine-design 0.6.0 → 0.9.0

package/preview/DateRangeFilterGallery.tsx

@@ -0,0 +1,109 @@
+import { useState } from 'react';
+import { Button, DateRangePicker, Divider, Icon, Inline, Popover, SegmentedControl, Stack, Surface, Text, type DateRange } from '../components';
+
+const quickRanges = [
+  { value: 'today', label: '今天', range: { start: '2026-10-24', end: '2026-10-24' } },
+  { value: 'yesterday', label: '昨天', range: { start: '2026-10-23', end: '2026-10-23' } },
+  { value: 'week', label: '本周', range: { start: '2026-10-19', end: '2026-10-24' } },
+];
+const moreRanges = [
+  { label: '最近 7 天', range: { start: '2026-10-18', end: '2026-10-24' } },
+  { label: '最近 30 天', range: { start: '2026-09-25', end: '2026-10-24' } },
+  { label: '本月', range: { start: '2026-10-01', end: '2026-10-24' } },
+  { label: '上月', range: { start: '2026-09-01', end: '2026-09-30' } },
+];
+const min = '2025-01-01', max = '2026-12-31';
+const rangeLabel = ({ start, end }: DateRange) => `${start} — ${end}`;
+
+// Preview composition only: the host owns presets, calendar boundaries and data queries.
+export function DateRangeFilterExample({ label = '时间范围', initialValue = quickRanges[0].range, disabled = false, longLabels = false }: {
+  label?: string; initialValue?: DateRange; disabled?: boolean; longLabels?: boolean;
+}) {
+  const [value, setValue] = useState(initialValue);
+  const [draft, setDraft] = useState(value);
+  const [open, setOpen] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [applied, setApplied] = useState(0);
+  const selected = quickRanges.find(item => item.range.start === value.start && item.range.end === value.end)?.value ?? '';
+  const canApply = !disabled && !!draft.start && !!draft.end && draft.start <= draft.end && draft.start >= min && draft.end <= max && !error;
+  const commit = (range: DateRange) => {
+    if (disabled) return;
+    setValue(range); setApplied(count => count + 1); setOpen(false);
+  };
+  const changeOpen = (next: boolean) => {
+    if (next && disabled) return;
+    if (next) { setDraft(value); setError(null); }
+    setOpen(next);
+  };
+  return <Stack gap={3}>
+    <Inline gap={2} role="group" aria-label={label}>
+      <Text variant="caption" tone="muted">{label}</Text>
+      <SegmentedControl label={`${label}快捷选择`} items={quickRanges.map(item => ({
+        value: item.value, label: longLabels ? `${item.label}的完整自然日范围` : item.label, disabled,
+      }))} value={selected} onValueChange={key => {
+        const preset = quickRanges.find(item => item.value === key);
+        if (preset) commit(preset.range);
+      }} />
+      <Popover title={`${label}设置`} open={open} onOpenChange={changeOpen} trigger={
+        <Button variant="secondary" disabled={disabled} aria-label={`${label}：${rangeLabel(value)}，选择日期`}>
+          {rangeLabel(value)} <Icon name="chevronDown" size={16} />
+        </Button>
+      }>
+        <Stack gap={4}>
+          <Stack gap={2}>
+            <Text variant="caption" tone="muted">选择预设后立即应用</Text>
+            <Inline gap={2} aria-label="更多时间预设">
+              {moreRanges.map(item => <Button key={item.label} variant="secondary" onClick={() => commit(item.range)}>{item.label}</Button>)}
+            </Inline>
+          </Stack>
+          <Divider />
+          <form onSubmit={event => {
+            event.preventDefault();
+            if (canApply && event.currentTarget.checkValidity()) commit(draft);
+          }}>
+            <Stack gap={3}>
+              <DateRangePicker label="自定义日期" value={draft} onValueChange={setDraft} onValidationChange={setError}
+                min={min} max={max} required clearable={false} hint="填写完整日期后，点击应用。" />
+              <Inline gap={2}>
+                <Button variant="secondary" onClick={() => setOpen(false)}>取消</Button>
+                <Button type="submit" disabled={!canApply}>应用日期</Button>
+              </Inline>
+            </Stack>
+          </form>
+        </Stack>
+      </Popover>
+    </Inline>
+    <Text variant="caption" tone="muted" role="status">已应用：{rangeLabel(value)} · 本次操作 {applied} 次</Text>
+  </Stack>;
+}
+
+export function DateRangeFilterGallery() {
+  return <section id="date-range-filter">
+    <div className="ds-section-title"><span>RANGE</span><h2>日期筛选 · 快捷选择与自定义</h2></div>
+    <p className="ds-caption">常用日期是一组互斥选项；具体日期持续可见。更多预设即选即用，自定义日期在确认后生效。</p>
+    <Stack gap={4}>
+      <Surface>
+        <Stack gap={4}>
+          <Text as="h3" variant="heading">日常筛选</Text>
+          <DateRangeFilterExample />
+          <Text variant="caption" tone="muted">固定演示日期为 2026-10-24。选择只更新本地样例，不请求业务数据。</Text>
+        </Stack>
+      </Surface>
+      <Surface>
+        <Stack gap={4}>
+          <Text as="h3" variant="heading">跨年范围与长标签</Text>
+          <DateRangeFilterExample label="对比时间范围" initialValue={{ start: '2025-12-28', end: '2026-01-06' }} longLabels />
+          <Text variant="caption" tone="muted">超出快捷项的日期不冒充任何预设。窄容器允许换行，完整年份和操作保留。</Text>
+        </Stack>
+      </Surface>
+      <Surface>
+        <Stack gap={4}>
+          <Text as="h3" variant="heading">暂不可更改</Text>
+          <DateRangeFilterExample label="归档日期范围" disabled />
+          <Text variant="caption" tone="muted">归档结果的统计范围固定，保持日期可读。</Text>
+        </Stack>
+      </Surface>
+      <Text variant="caption" tone="muted">方向键切换快捷项；Escape 或取消退出草稿并归还焦点，点击外部控件按原生焦点行为继续。所有主题使用同一组公开组件。</Text>
+    </Stack>
+  </section>;
+}

package/preview/ExtensionsGallery.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { AppShell, Background, Button, Checkbox, DataTable, DateField, DateRangePicker, Dialog, EmptyState, MediaCard, MediaViewer, Notice, NumberField, Pagination, RemoteMultiSelect, Select, SideNav, Skeleton, Stack, Surface, TextField, TreeSelect, type AppShellProps, type DateRange, type TreeNode, type TableSort } from '../components';
+import { AppShell, AppShellToggle, IconButton, Inline, Background, Button, Checkbox, DataTable, DateField, DateRangePicker, Dialog, EmptyState, MediaCard, MediaViewer, Notice, NumberField, Pagination, RemoteMultiSelect, Select, SideNav, Skeleton, Stack, Surface, TextField, TreeSelect, type AppShellProps, type DateRange, type TreeNode, type TableSort } from '../components';
 import type { Choice } from '../components/components';
 import './extensions.css';
 
@@ -16,16 +16,24 @@ export function ShellGallery() {
   const [navDrawerOpen, setNavDrawerOpen] = useState(false);
   const [current, setCurrent] = useState('inbox'), [draft, setDraft] = useState('主题切换和侧栏折叠会保留这段内容。');
   const [plain, setPlain] = useState(true), [state, setState] = useState('ready');
+  const [inlineControls, setInlineControls] = useState(true);
   return <section><div className="ds-section-title"><span>LAYOUT</span><h2>画布与应用外壳</h2></div>
     <p className="ds-caption">单侧栏适合简单工具；双左栏适合目录与列表；左右栏适合编辑器与检查器。可用宽度不足 1120px 时次栏转抽屉，不足 760px 时全局导航也转抽屉。正文始终保留。</p>
-    <div className="ds-extension-controls"><Select label="布局方案" value={layout} onChange={event => setLayout(event.target.value as AppShellProps['layout'])}><option value="single">单侧栏</option><option value="double-left">双左侧栏</option><option value="left-right">左右侧栏</option></Select><Checkbox label="纯色背景" checked={plain} onChange={event => setPlain(event.target.checked)} /><StateControl value={state} onChange={setState} /></div>
-    <div className="ds-shell-stage"><AppShell layout={layout} decoration={plain ? 'none' : 'theme'}
-      navigation={{ label: '全局导航', open: navOpen, onOpenChange: setNavOpen, drawerOpen: navDrawerOpen, onDrawerOpenChange: setNavDrawerOpen, content: <SideNav aria-label="应用导航" currentId={current} groups={[{ label: '工作空间', items: [{ id: 'inbox', label: '收件箱', href: '#app-shell' }, { id: 'archive', label: longName, href: '#app-shell' }] }]} onNavigate={(item, event) => { event.preventDefault(); setCurrent(item.id); setNavDrawerOpen(false); }} /> }}
-      secondary={{ label: layout === 'left-right' ? '辅助详情' : '上下文目录', open: secondaryOpen, onOpenChange: setSecondaryOpen, content: <Stack gap={4}><strong>{current === 'inbox' ? '收件箱' : longName}</strong>{state === 'loading' ? <Skeleton label="目录加载中" /> : state === 'error' ? <Notice title="目录读取失败" tone="error">可以继续编辑正文。</Notice> : state === 'empty' ? <EmptyState title="目录暂无内容" description="选择其他项目或继续编辑正文。" /> : <><p>当前条目、所属目录和属性。</p><Button variant="secondary" disabled={state === 'disabled'}>上下文操作</Button></>}</Stack> }}
-      header={<Dialog title="背景与浮层" description="浮层仍然挂载在唯一主题根；不受局部背景裁剪。" trigger={<Button>打开对话框</Button>}><TextField label="对话框输入" placeholder="试试 Tab 和 Escape" /></Dialog>}>
-      <Stack gap={6}><div><p className="ds-kicker">CURRENT TASK / {current}</p><h3>同一主题，独立正文背景</h3><p>正文默认使用纯色背景。关闭“纯色背景”可显式启用主题纹理；纸面主题保持纯净。</p></div>
+    <div className="ds-extension-controls"><Select label="布局方案" value={layout} onChange={event => setLayout(event.target.value as AppShellProps['layout'])}><option value="single">单侧栏</option><option value="double-left">双左侧栏</option><option value="left-right">左右侧栏</option></Select><Checkbox label="使用正文导航栏" checked={inlineControls} onChange={event => setInlineControls(event.target.checked)} /><Checkbox label="纯色背景" checked={plain} onChange={event => setPlain(event.target.checked)} /><StateControl value={state} onChange={setState} /></div>
+    <div className="ds-shell-stage"><AppShell controls={inlineControls ? 'inline' : 'header'} layout={layout} decoration={plain ? 'none' : 'theme'}
+      navigation={{ label: '全局导航', open: navOpen, onOpenChange: setNavOpen, drawerOpen: navDrawerOpen, onDrawerOpenChange: setNavDrawerOpen, content: <Stack gap={4}>{inlineControls && <Inline><strong>Rhine Workspace</strong><AppShellToggle placement="panel" iconOnly /></Inline>}<SideNav aria-label="应用导航" currentId={current} groups={[{ label: '工作空间', items: [{ id: 'inbox', label: '收件箱', href: '#app-shell' }, { id: 'archive', label: longName, href: '#app-shell' }] }]} onNavigate={(item, event) => { event.preventDefault(); setCurrent(item.id); setNavDrawerOpen(false); }} /></Stack> }}
+      secondary={{ label: layout === 'left-right' ? '辅助详情' : '上下文目录', open: secondaryOpen, onOpenChange: setSecondaryOpen, content: <Stack gap={4}>{inlineControls && <AppShellToggle panel="secondary" placement="panel" />}<strong>{current === 'inbox' ? '收件箱' : longName}</strong>{state === 'loading' ? <Skeleton label="目录加载中" /> : state === 'error' ? <Notice title="目录读取失败" tone="error">可以继续编辑正文。</Notice> : state === 'empty' ? <EmptyState title="目录暂无内容" description="选择其他项目或继续编辑正文。" /> : <><p>当前条目、所属目录和属性。</p><Button variant="secondary" disabled={state === 'disabled'}>上下文操作</Button></>}</Stack> }}
+      contentHeader={inlineControls ? <nav aria-label="工作区导航"><Inline>
+        <AppShellToggle placement="content" iconOnly />
+        <h1>{current === 'inbox' ? '收件箱' : longName}</h1>
+        <div className="rhine-shell__navigation-actions"><AppShellToggle panel="secondary" placement="content" />
+          <Dialog title="工作区信息" description="查看当前工作区的信息。关闭后返回导航入口。" trigger={<IconButton icon="info" label="工作区信息" title="工作区信息" />}><TextField label="对话框输入" placeholder="试试 Tab 和 Escape" /></Dialog>
+        </div>
+      </Inline></nav> : undefined}
+      header={inlineControls ? undefined : <Dialog title="背景与浮层" description="浮层仍然挂载在唯一主题根；不受局部背景裁剪。" trigger={<Button>打开对话框</Button>}><TextField label="对话框输入" placeholder="试试 Tab 和 Escape" /></Dialog>}>
+      <Stack gap={6}>{!inlineControls && <h1 className="rhine-sr-only">{current === 'inbox' ? '收件箱' : longName}</h1>}<p>本地草稿 · 整理工作区，继续你的记录。</p>
         <Surface><Stack gap={4}><TextField label="正文草稿" value={draft} onChange={event => setDraft(event.target.value)} /><Button disabled={state === 'disabled'}>继续当前任务</Button></Stack></Surface>
-        {Array.from({ length: 5 }, (_, i) => <Surface key={i}><h3>内容段落 {i + 1}</h3><p>滚动正文时顶部操作栏保持可达；每栏仅有一个滚动容器。Tab 可依次访问导航、正文与辅助详情。</p></Surface>)}
+        {Array.from({ length: 5 }, (_, i) => <Surface key={i}><h3>内容段落 {i + 1}</h3><p>滚动正文时导航栏保持可达；每栏仅有一个滚动容器。Tab 可依次访问导航、正文与辅助详情。</p></Surface>)}
       </Stack>
     </AppShell></div>
     <div className="ds-extension-grid ds-gap-top">{(['canvas','content','sidebar'] as const).map(role => <Background key={role} roleTone={role} decoration={plain ? 'none' : 'theme'} className="ds-background-swatch"><strong>{role}</strong><Surface>Surface 始终提供不透明阅读表面。</Surface></Background>)}</div>
@@ -76,20 +84,21 @@ export function AdvancedDataGallery() {
 
 export function MediaGallery() {
   const [selected, setSelected] = useState(false), [open, setOpen] = useState(false), [index, setIndex] = useState(0), [metadata, setMetadata] = useState(true), [version, setVersion] = useState('original');
-  const titles = ['山野 · 午后的光', longName, '视频预览示例'];
+  const titles = ['山野 · 午后的光', '远山手记 · 原始影像与拍摄记录', '暮色之间 · 动态影像'];
   const [retried, setRetried] = useState(false);
-  return <section><div className="ds-section-title"><span>MEDIA</span><h2>媒体保持比例，画布保持中性</h2></div><p className="ds-caption">照片、RAW、Live 和视频共享卡片契约。中性暗色查看器独立于三套界面主题；媒体请求、视频播放、下载与版本资源均由宿主提供。示例只使用本地内嵌矢量预览。</p>
-    <MediaViewer open={open} onOpenChange={setOpen} trigger={<Button>打开全屏查看器</Button>} title={titles[index]} description={`${index + 1} / 3 · 左右方向键切换；输入和播放器保留自身按键`} onPrevious={() => setIndex(current => Math.max(0, current - 1))} onNext={() => setIndex(current => Math.min(2, current + 1))} previousDisabled={index === 0} nextDisabled={index === 2} metadataOpen={metadata} onMetadataOpenChange={setMetadata}
+  return <section className="ds-media-gallery"><div className="ds-section-title"><span>MEDIA</span><h2>影像与收藏</h2></div><p className="ds-media-intro">浏览、选择，或打开一张影像。保留画面的原始比例，让每一份作品有自己的位置。</p><div className="ds-media-toolbar"><span role="status">3 份资源 · {selected ? '已选 1 项' : '未选择'}</span>
+    <MediaViewer open={open} onOpenChange={setOpen} trigger={<Button>打开全屏查看器</Button>} title={titles[index]} description={`${index + 1} / 3 · 左右方向键切换影像`} onPrevious={() => setIndex(current => Math.max(0, current - 1))} onNext={() => setIndex(current => Math.min(2, current + 1))} previousDisabled={index === 0} nextDisabled={index === 2} metadataOpen={metadata} onMetadataOpenChange={setMetadata}
       actions={<><label>资源版本 <select aria-label="资源版本" value={version} onChange={event => setVersion(event.target.value)}><option value="original">原始资源</option><option value="preview">预览资源</option></select></label><a href={sampleImage} download="rhine-demo.svg">下载演示资源</a></>}
       metadata={<><h3>媒体信息</h3><p>{titles[index]}</p><p>类型：{index === 2 ? '视频' : '照片'}</p><p>版本：{version}</p><p>日期：未知</p><Dialog title="资源说明" description="Escape 先关闭此层，再关闭媒体查看器。" trigger={<button type="button">打开资源说明</button>}><p>业务元数据由宿主管理。</p></Dialog></>}
     >{index === 2 ? <video controls poster={sampleImage} aria-label="视频播放器示例" /> : <img src={sampleImage} alt="山峰与太阳构成的演示插画" />}</MediaViewer>
-    <div className="ds-extension-grid ds-gap-top">
-      <MediaCard title={titles[0]} kind="photo" date="2026-10-23" preview={<img src={sampleImage} alt="山野插画" />} onOpen={() => { setIndex(0); setOpen(true); }} selected={selected} onSelectedChange={setSelected} />
+    </div><div className="ds-media-grid">
+      <MediaCard title={titles[0]} kind="photo" date="2026-10-23" preview={<img src={sampleImage} alt="山野插画" />} onOpen={() => { setIndex(0); setOpen(true); }} selected={selected} onSelectedChange={setSelected} aspectRatio="3 / 2" />
       <MediaCard title={titles[1]} kind="RAW" preview={<img src={sampleImage} alt="原始预览" />} aspectRatio="3 / 2" onOpen={() => { setIndex(1); setOpen(true); }} />
-      <MediaCard title="视频，保持原始比例" kind="video" preview={<img src={sampleImage} alt="视频封面" />} onOpen={() => { setIndex(2); setOpen(true); }} />
-      <MediaCard title="加载中的 Live 资源" kind="Live" state="loading" onOpen={() => setOpen(true)} />
-      <MediaCard title="不可解码的文件" kind="RAW" state={retried ? 'ready' : 'error'} preview={retried ? <img src={sampleImage} alt="重试后恢复的示例预览" /> : undefined} onOpen={() => { setIndex(1); setOpen(true); }} actions={<Button variant="secondary" onClick={() => setRetried(true)} disabled={retried}>{retried ? '预览已恢复' : '重试预览'}</Button>} />
-      <MediaCard title="尚无预览的资源" kind="photo" state="empty" onOpen={() => setOpen(true)} />
-    </div>
+      <MediaCard title={titles[2]} date="2026-10-21" aspectRatio="3 / 2" kind="video" preview={<img src={sampleImage} alt="视频封面" />} onOpen={() => { setIndex(2); setOpen(true); }} />
+    </div><div className="ds-media-section-heading"><h3>状态与反馈</h3><p>加载、读取失败和缺少预览时，资源信息仍然保留。</p></div><div className="ds-media-grid ds-media-states">
+      <MediaCard aspectRatio="3 / 2" title="加载中的 Live 资源" kind="Live" state="loading" onOpen={() => setOpen(true)} />
+      <MediaCard aspectRatio="3 / 2" title="不可解码的文件" kind="RAW" state={retried ? 'ready' : 'error'} preview={retried ? <img src={sampleImage} alt="重试后恢复的示例预览" /> : undefined} onOpen={() => { setIndex(1); setOpen(true); }} actions={<Button variant="secondary" onClick={() => setRetried(true)} disabled={retried}>{retried ? '预览已恢复' : '重试预览'}</Button>} />
+      <MediaCard aspectRatio="3 / 2" title="尚无预览的资源" kind="photo" state="empty" onOpen={() => setOpen(true)} />
+    </div><p className="ds-caption ds-media-note">展台使用本地矢量插画；视频项展示封面与控件，不包含可播放文件。</p>
   </section>;
 }

package/preview/GalleryShell.tsx

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

package/preview/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/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

@@ -1,47 +1,64 @@
 import { useState } from 'react';
-import { Badge, Button, Inline, Logo, OrbitBackdrop, Stack, Surface, Switch, Text, TextField } from '../components';
+import { OrbitEntryExample } from './BackgroundFiltersFixture';
+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">420 个环节点、185 条空间曲线与发射箭头组成同一幅画面。用于入口和品牌叙事，内容可立即阅读，不表示加载或业务进度。</p>
+    <p className="ds-caption">莱茵的折纸鸟、战术的悬浮源石晶簇、橙趣的草莓甜甜圈。每个主题都有自己的物件，也可以切换到原始深色星空。</p>
     <Inline gap={3}>
-      <Badge>0.6.0</Badge>
+      <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={replay} className="ds-gap-top" reducedMotion={reduced} style={{ minHeight: 560 }}>
-      <Logo variant="lockup" size={40} />
-      <Stack gap={3}>
-        <Text as="h3" variant="title">连接彼此，探索更多。</Text>
-        <Text tone="muted">在有序的轨迹中，留下新的可能。<br />艺术背景不阻挡内容与操作。</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>
-      <Text variant="caption" tone="muted">空间、连接与持续探索。</Text>
-    </OrbitBackdrop>
-    <p className="ds-caption">暂停后在原画面继续；系统、顶部或本节减少动态均保留静态画面。视口不超过 760px、页面隐藏或画面离屏时停帧。重播只重建这幅艺术，不执行任何业务操作。</p>
+    <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>
+    <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>;
 }