@linhey/rhine-design 0.8.0 → 0.9.1

package/docs/LIST_FILTER_BAR.md

@@ -0,0 +1,76 @@
+# 列表筛选栏
+
+`ListFilterBar` 把列表顶部限制为搜索、最多两个常显条件、更多筛选、结果反馈、刷新与一个业务操作。它统一信息层级与布局，不承接查询、权限、分页或业务筛选状态。需求来源为 [#19](https://github.com/linhay/rhine-design/issues/19)，真实展台为 `/#list-filter-bar`。
+
+**版本边界：本组件在 0.9.0 新增。** 0.8.0 及更早版本不提供该组件；消费时必须核对实际导出及固定源码/安装快照。图库跟随源码，不能代替 npm 发布证据。
+
+## 先决定常显内容
+
+- 搜索在用户确实需要查找记录时提供；统计范围等场景无需填充一个无用搜索框。
+- 搜索 label 持续可见，不以 placeholder 代替。#22 的 `f0f8495` 已移除早期候选隐藏搜索 label 的 CSS；消费旧安装副本时须核对，不能以源码文档描述代替实际安装行为。
+- `primary` 只常显前两项，超出的项目自动进入“更多筛选”。选择高频且互相独立的条件，例如状态和排序；不要为了展开所有控件增加第二个筛选栏。
+- 其他条件进入同一个 Drawer。字段自己的 label 持续可见，组件不重复加可见标题，也不提供任意 `children` 让页面插回一排控件。
+- 非默认条件用短摘要说明当前限制；单项清除与整体重置都由宿主定义。默认排序、默认统计日期等是否需要摘要由宿主的 `activeLabel` 决定，不把所有非空值都视为筛选。
+- 结果数量、更新中与错误反馈在栏内呈现；Drawer 打开时同样显示反馈。失败不能藏在遮罩后的页面上，也不能把旧数量当作新条件已经成功。
+- 刷新之外最多一个业务操作。多记录的选择、批量操作属于结果区，录制启停等对象设置也不塞进筛选栏。
+- 平级工作区已有侧栏身份时不重复大标题。组件的 `label` 提供可访问分组名称，宿主仍负责页面标题、主内容名称及路由焦点。
+
+布局按组件实际容器宽度重排，窄嵌入区域和 200% 内容缩放保持完整文字、可达操作和 44px 目标；不以省略日期、缩小文字或横向撑破页面换取一行。三套主题使用同一组件结构与 tokens。
+
+## 公共契约
+
+| 属性 | 输入与责任 |
+| --- | --- |
+| `label` | 必填分组名称，也是更多筛选 Drawer 的标题 |
+| `search` | 可选原生 input 属性加必填 `label`；支持受控 value、change、composition、disabled；内部为 TextField |
+| `primary` | `ListFilterField[]`；最多前两项常显，其他顺序移入 Drawer |
+| `filters` | `ListFilterField[]`；按顺序追加到 Drawer |
+| `onReset` | 宿主清除搜索与恢复各条件默认值；有搜索或 activeLabel 才显示重置入口 |
+| `refresh` | `{onClick,busy?,disabled?}`；原生共享 Button，不自动执行请求 |
+| `action` | 可选单个 ReactElement，代表一个业务操作；消费方不能用 Fragment 或自建按钮组绕过数量限制 |
+| `result` | 宿主提供的结果摘要；数量未知时明确显示未知，不用已加载条数冒充总数 |
+| `pending` / `error` | 正在更新 / 失败说明；在栏与已展开 Drawer 中保持一致 |
+| `className` | 只用于外层组合布局，不覆盖组件内部视觉或状态 |
+
+字段包含 `{id,label,control,activeLabel?,onClear?}`。`id` 在当前栏内唯一，用于稳定标识；它不是输入框 DOM id。`control` 提供真实受控组件及自己的可见/可访问标签；字段包装只添加分组语义。`activeLabel` 是宿主判断后的非默认条件摘要；`onClear` 缺省时摘要只读。不同实例的输入 DOM id 仍须唯一，优先使用组件自动生成的 id。
+
+```tsx
+<ListFilterBar
+  label="会话筛选"
+  search={{ label: '搜索会话', value: query, onChange: event => setQuery(event.target.value) }}
+  primary={[
+    {
+      id: 'state', label: '会话状态',
+      control: <Select label="会话状态" value={state} onChange={event => setState(event.target.value)}>
+        <option value="all">全部状态</option><option value="done">已完成</option>
+      </Select>,
+      activeLabel: state === 'all' ? undefined : '已完成',
+      onClear: () => setState('all'),
+    },
+  ]}
+  filters={additionalFields}
+  onReset={resetFilters}
+  refresh={{ onClick: reload, busy: loading }}
+  result={total === null ? '总数待确认' : `${total} 条结果`}
+  pending={loading}
+  error={error}
+/>
+```
+
+示例中的状态、函数与额外字段由宿主提供。使用受控 `search.value` 才能准确决定搜索是否需要重置；组件不解析其他控件的值。
+
+## 状态与查询边界
+
+更多筛选是同一组状态的展开视图，不建立另一套草稿/应用流程。普通选择即时回传宿主；关闭、点击外部与 Escape 只收起抽屉，不撤销已经接受的条件。业务本来要求完整范围显式应用的日期控件可以保留其局部草稿，但应在 Drawer 内内联展示，不再嵌套日期 Drawer。
+
+服务端搜索、权限裁剪、默认值、URL 与偏好、请求防抖、IME、取消和过期响应保护都留在宿主。输入中的值不等于最后接受的结果；失败保留还是回滚条件按接口契约处理，并把结果/错误传入组件。不要为了接入组件改成拉取全量数据在浏览器过滤。
+
+Drawer 复用已有模态、Escape 与焦点归还；移除当前聚焦摘要时焦点回到有效控件。忙碌与禁用不同：busy 保留焦点，禁用字段由宿主明确传入；不因一次后台刷新禁用所有条件。只读身份应从传入字段中移除其无权使用的条件，不能只改变颜色或 CSS 隐藏。
+
+## 真实展台与验收
+
+`preview/ListFilterBarGallery.tsx` 提供独立会话列表、420px 嵌入列表、无搜索统计范围三种组合。独立例子刻意传入第三项 primary，以验证运行时移入 Drawer；全局状态选择使用真实控件演示正常、加载、无结果、错误与禁用。记录与操作均为合成示例，无业务请求或文件下载。
+
+验收至少覆盖：三主题与真实窄容器；400/520/880px、200% CSS zoom；主条件上限；输入法、键盘和焦点；多个活跃条件的完整摘要、单项/全量重置；Drawer 内加载与失败；筛选后总数、分页与迟到响应。图库证明共享组件组合，产品的服务端权限、导出和查询契约仍分别验收。
+
+Drawer 中的原生日期还须检查实际文本编辑区：完整值、最后日期片段与日历图标均可见并可操作；input/document 的 scrollWidth 不溢出不代表原生编辑区没有裁字。重复分组内距的共享修复由 [#25](https://github.com/linhay/rhine-design/issues/25) 跟踪；不在业务页复制日期内部 CSS。

package/docs/ORBIT_BACKDROP.md

@@ -71,3 +71,28 @@ CSS zoom 不能替代浏览器原生缩放；`document.hidden` 事件模拟不
 ![战术源石晶簇](assets/orbit-crystal.png)
 
 ![草莓甜甜圈](assets/orbit-strawberry.png)
+
+## 入口文字与全页背景（0.9.0 新增）
+
+| 输入 | 契约 |
+| --- | --- |
+| `controls?: boolean`（0.9.0） | 默认 `true`；`false` 不渲染局部暂停按钮，并移除为控件预留的额外底部内边距。它不解除已经暂停的状态，也不覆盖系统、prop 或祖先减少动态 |
+| `composition?: 'full' \| 'corner'`（0.9.0） | 默认 `full` 保留现有构图；`corner` 将实际绘制区域和静态降级艺术一起放至右下角，宽度最多 480px、高度为容器的 44% 且最多 360px |
+| `framed?: boolean`（0.9.0） | 默认 `true` 保留主题面板边框、圆角与阴影；`false` 移除这三项装饰，用于宿主定位的全页背景，背景艺术与内容内边距仍保留 |
+
+[Issue #17](https://github.com/linhay/rhine-design/issues/17) 补充入口页面的公共构图能力。需要保留上方文字阅读空间时使用 `composition="corner"`，让完整艺术在右下方较小的绘制区域内重绘；Canvas2D、可选 WebGL 和 Canvas 不可用时的静态 SVG 使用相同几何，不裁去艺术的一部分来伪造位置变化。宿主将标题和正文组合在上方；`corner` 不替宿主判断任意内容高度，长文案仍需真实布局验证。
+
+```tsx
+<OrbitBackdrop composition="corner" controls={false} style={{ minHeight: 640 }}>
+  <Stack gap={4}>
+    <Text as="h1" variant="title">继续创造</Text>
+    <Text>从这里进入工作空间。</Text>
+  </Stack>
+</OrbitBackdrop>
+```
+
+宽度不足以保留独立艺术栏时，宿主可将同一组件定位为整个页面的背景，使用 `framed={false}` 去掉面板装饰；前景表单使用 `Surface` 保障可读性。响应式断点、业务内容和页面高度归宿主布局负责，禁止通过业务选择器覆盖内部 Canvas 或控件。
+
+`controls={false}` 只移除局部控制界面，不关闭动画、不禁用系统或手动减少动态，也不创建额外帧循环。默认用法继续提供暂停入口；用户明确采用无局部按钮的装饰背景时，可由宿主统一动效偏好控制。重新显示控件保留其原暂停状态；改变构图和面板边框不重挂载画布或重置子元素状态。该组合在 0.9.0 新增，旧版本不提供这些选项。
+
+展台中的 `OrbitEntryExample` 按实际容器 760px 重排：宽容器独立艺术栏，窄容器扩展为整页背景，表单保留实色 Surface。布局变更不重挂载画布或输入；`?fixture=orbit-entry` 提供独立验收入口。

package/package.json

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

package/preview/BackgroundFiltersFixture.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+import { Button, Checkbox, OrbitBackdrop, Select, Stack, Surface, Text, TextField } from '../components';
+import { ThemeProvider, themes, type ThemeName } from '../components/theme';
+import { ListFilterBarGallery } from './ListFilterBarGallery';
+
+export function OrbitEntryExample({ reduced = false, appearance = 'theme' }: { reduced?: boolean; appearance?: 'theme' | 'original' }) {
+  return <div className="ds-orbit-entry-container"><div className="ds-orbit-entry">
+    <OrbitBackdrop className="ds-orbit-entry-background" appearance={appearance} composition="corner" controls={false} framed={false} reducedMotion={reduced} aria-hidden="true" />
+    <Stack gap={4} className="ds-orbit-entry-intro"><Text variant="overline">RHINE STUDIO</Text><Text as="h3" variant="title">从这里，继续创造。</Text><Text>让内容拥有清晰的阅读空间。</Text></Stack>
+    <Surface className="ds-orbit-entry-form"><Stack gap={4}><Text as="h3" variant="heading">欢迎回来</Text><TextField label="示例昵称" placeholder="输入你的昵称" /><Button>进入工作空间</Button></Stack></Surface>
+  </div></div>;
+}
+
+export function BackgroundFiltersFixture() {
+  const params = new URLSearchParams(location.search);
+  const zoom = Number(params.get('zoom')) || 1;
+  const [theme, setTheme] = useState<ThemeName>((params.get('theme') || 'rhine') as ThemeName);
+  const [reduced, setReduced] = useState(false), [mounted, setMounted] = useState(true);
+  useEffect(() => { document.documentElement.style.zoom = String(zoom); return () => { document.documentElement.style.zoom = ''; }; }, [zoom]);
+  return <ThemeProvider theme={theme} onThemeChange={setTheme}><div style={{ padding: 12 }}>
+    {params.get('fixture') === 'list-filters' ? <ListFilterBarGallery /> : <Stack gap={4}>
+      <Select label="验收主题" value={theme} onChange={event => setTheme(event.target.value as ThemeName)}>{themes.map(item => <option key={item.name} value={item.name}>{item.label}</option>)}</Select>
+      <Checkbox label="减少入口动态" checked={reduced} onChange={event => setReduced(event.target.checked)} />
+      <Checkbox label="挂载入口" checked={mounted} onChange={event => setMounted(event.target.checked)} />
+      {mounted && <OrbitEntryExample reduced={reduced} />}
+    </Stack>}
+  </div></ThemeProvider>;
+}

package/preview/CompactAccountGallery.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import {
-  Badge, Button, ButtonLink, Checkbox, Disclosure, Divider, Inline, KeyValue,
+  Badge, Button, ButtonLink, Checkbox, Disclosure, Divider, Grid, Inline,
   Notice, Progress, Select, Skeleton, Stack, StatusTimelineList, Surface, Text,
   TextField, TimelineLegend, Tooltip, type TimelineSegment, type TimelineStatus,
 } from '../components';
@@ -45,29 +45,29 @@ export function CompactAccountExample({ state = 'normal' }: { state?: AccountSta
     </Stack>
     <Stack gap={1}>
       <StatusTimelineList label="资源用量与异常记录" items={[{
-        id: 'resource-a', title: '用量与异常记录',
-        note: unknown ? '历史记录不完整，仅展示已确认的时段。' : undefined,
+        id: 'resource-a', title: '用量与异常记录', summary: '24小时窗口 · 15分钟',
+        note: `10/23 00:00 – 10/24 00:00 · 上海${unknown ? ' · 历史记录不完整，仅展示已确认的时段。' : ''}`,
         timeline: { startLabel: '10/23 00:00 · 上海', endLabel: '10/24 00:00 · 上海', segments: unknown ? segments.slice(0, 48) : segments },
       }]} />
       <TimelineLegend compact label="历史状态图例" items={compactAccountLegend} />
     </Stack>
-    <Stack gap={2} data-testid="compact-account-facts">
-      <Inline gap={4}>
+    <Stack gap={3} className="compact-gallery-facts" data-testid="compact-account-facts">
+      <Grid gap={2} className="compact-gallery-facts-meta">
         <Tooltip content="数值越小，调度优先级越高；这不是健康评分。"><Text as="span" variant="caption" tabIndex={0}>优先级 <strong>0</strong></Text></Tooltip>
         <Text as="span" variant="caption">API-Key <strong>{unknown ? '—' : zero ? '0' : '3'}</strong></Text>
-      </Inline>
-      <KeyValue items={[
-        { key: 'expires', label: '到期', value: long ? '2027-10-24 23:59 · 上海（运营设置的账号期限）' : '未设置' },
-        ...(long ? [{ key: 'subscription-expires', label: '订阅到期', value: '2026-11-24 08:30 · 上海（当前服务套餐期限）' }] : []),
-      ]} />
-      <Inline gap={4} className="compact-gallery-fact-pair">
-        <Text as="span" variant="caption">今日消费 <strong>{unknown ? '—' : zero ? '$0.00' : long ? '$12,345.67 / $24,691.34' : '$2.40'}</strong></Text>
-        <Text as="span" variant="caption">本周期 <strong>{unknown ? '—' : zero ? '$0.00' : long ? '$123,456.78 / $246,913.56' : '$18.50'}</strong></Text>
-      </Inline>
-      <Inline gap={4} className="compact-gallery-fact-pair">
-        <Text as="span" variant="caption">今日生图 <strong>{unknown ? '—' : zero ? '0' : '8'}</strong></Text>
-        <Text as="span" variant="caption">本周期生图 <strong>{unknown ? '—' : zero ? '0' : '24'}</strong></Text>
-      </Inline>
+        <Text as="span" variant="caption" className="compact-gallery-facts-expiry">到期 <strong>{long ? '2027-10-24 23:59 · 上海（运营设置的账号期限）' : '未设置'}</strong></Text>
+        {long && <Text as="span" variant="caption" className="compact-gallery-facts-subscription">订阅到期 <strong>2026-11-24 08:30 · 上海（当前服务套餐期限）</strong></Text>}
+      </Grid>
+      <Stack gap={2}>
+        <Grid gap={2} className="compact-gallery-fact-pair">
+          <Text as="span" variant="caption">今日消费 <strong>{unknown ? '—' : zero ? '$0.00' : long ? '$12,345.67 / $24,691.34' : '$2.40'}</strong></Text>
+          <Text as="span" variant="caption">本周期 <strong>{unknown ? '—' : zero ? '$0.00' : long ? '$123,456.78 / $246,913.56' : '$18.50'}</strong></Text>
+        </Grid>
+        <Grid gap={2} className="compact-gallery-fact-pair">
+          <Text as="span" variant="caption">今日生图 <strong>{unknown ? '—' : zero ? '0' : '8'}</strong></Text>
+          <Text as="span" variant="caption">本周期生图 <strong>{unknown ? '—' : zero ? '0' : '24'}</strong></Text>
+        </Grid>
+      </Stack>
     </Stack>
   </Stack></Surface>;
 }

package/preview/DateRangeFilterGallery.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Button, DateRangePicker, Divider, Icon, Inline, Popover, SegmentedControl, Stack, Surface, Text, type DateRange } from '../components';
+import { Button, DateField, DateRangePicker, Divider, Icon, Inline, Popover, SegmentedControl, Select, Stack, Surface, Text, type DateRange } from '../components';
 
 const quickRanges = [
   { value: 'today', label: '今天', range: { start: '2026-10-24', end: '2026-10-24' } },
@@ -78,6 +78,10 @@ export function DateRangeFilterExample({ label = '时间范围', initialValue =
 }
 
 export function DateRangeFilterGallery() {
+  const [narrowWidth, setNarrowWidth] = useState('150');
+  const [narrowRange, setNarrowRange] = useState<DateRange>({ start: '2026-10-24', end: '2026-10-25' });
+  const [singleDate, setSingleDate] = useState('2026-10-24');
+  const [resetRevision, setResetRevision] = useState(0);
   return <section id="date-range-filter">
     <div className="ds-section-title"><span>RANGE</span><h2>日期筛选 · 快捷选择与自定义</h2></div>
     <p className="ds-caption">常用日期是一组互斥选项；具体日期持续可见。更多预设即选即用，自定义日期在确认后生效。</p>
@@ -103,6 +107,19 @@ export function DateRangeFilterGallery() {
           <Text variant="caption" tone="muted">归档结果的统计范围固定，保持日期可读。</Text>
         </Stack>
       </Surface>
+      <Stack gap={3}>
+        <Text as="h3" variant="heading">窄容器中的完整日期</Text>
+        <Text variant="caption" tone="muted">只改变实际容器宽度，不缩小字号。请聚焦日期并编辑最后一段，确认完整年月日与日历入口仍可见；尺寸适配自 0.9.1 提供。</Text>
+        <Select label="日期容器宽度" value={narrowWidth} onChange={event => setNarrowWidth(event.target.value)}>
+          <option value="150">150 CSS px</option><option value="200">200 CSS px</option><option value="280">280 CSS px</option>
+        </Select>
+        <Stack gap={3} style={{ width: Number(narrowWidth), maxWidth: '100%' }}>
+          <DateRangePicker key={resetRevision} label="局部日期" value={narrowRange} onValueChange={setNarrowRange} />
+          <Inline><DateField key={resetRevision} label="独立日期" value={singleDate} onValueChange={setSingleDate} /></Inline>
+          <Button variant="secondary" onClick={() => { setNarrowRange({ start: '2026-10-24', end: '2026-10-25' }); setSingleDate('2026-10-24'); setResetRevision(value => value + 1); }}>重置示例日期</Button>
+        </Stack>
+        <Text variant="caption" role="status">已接受日期：{narrowRange.start || '不限开始'} — {narrowRange.end || '不限结束'}</Text>
+      </Stack>
       <Text variant="caption" tone="muted">方向键切换快捷项；Escape 或取消退出草稿并归还焦点，点击外部控件按原生焦点行为继续。所有主题使用同一组公开组件。</Text>
     </Stack>
   </section>;

package/preview/GalleryShell.tsx

@@ -10,7 +10,7 @@ export const galleryGroups = [
   { 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', '浮层与反馈'], ['overlay-bounds', '浮层缩放与边界'], ['settings-dialog', '设置导航弹窗'], ['theme-picker', '主题预览与选择'], ['navigation', '导航与步骤'], ['form-workflow', '表单流程']] },
-  { label: '交互与动效', items: [['patterns', '场景与交互指南'], ['date-range-filter', '日期筛选组合'], ['compact-account', '紧凑账号与凭证'], ['motion', '动效实验室'], ['startup', '启动动画'], ['orbit', '轨道星空'], ['neutron-star', '中子星']] },
+  { 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]);

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/SpacingGallery.tsx

@@ -1,10 +1,11 @@
 import { useState } from 'react';
-import { Button, Grid, Inline, Notice, Select, Stack, Surface, Text, type Spacing } from '../components';
+import { Button, DataTable, Grid, Inline, Notice, Select, Stack, Surface, Text, type Spacing } from '../components';
 import './spacing.css';
 
 const scale: Spacing[] = [1, 2, 3, 4, 6, 8, 12];
 export function SpacingGallery() {
   const [state, setState] = useState('normal');
+  const [selected, setSelected] = useState<string[]>(['research']);
   return <section id="spacing">
     <div className="ds-section-title"><span>SPACE</span><h2>间距与组合 · 让关系可见</h2></div>
     <Stack gap={6}>
@@ -27,6 +28,19 @@ export function SpacingGallery() {
           <Text variant="caption" tone="muted">Surface只负责边界与内边距。避免父gap与子margin重复累加；不固定卡高，不为空白增加动效。</Text>
         </Stack></Surface>
       </Grid>
+      <Stack gap={3}>
+        <Text as="h3" variant="heading">纯表格 · 取消容器外围内距</Text>
+        <Text variant="caption" tone="muted">Surface padding="none" 自 0.9.1 提供；表头和单元格保留原有间距。切换主题并勾选行，检查边界和文字。</Text>
+        <Surface padding="none">
+          <DataTable caption="示例部门用量" rows={[
+            { id: 'research', name: '研发协作组', requests: 128 },
+            { id: 'accessibility', name: '跨部门体验与可访问性协作小组', requests: 42 },
+          ]} columns={[
+            { key: 'name', header: '部门', render: row => row.name, rowHeader: true },
+            { key: 'requests', header: '请求', render: row => row.requests, align: 'right' },
+          ]} rowKey={row => row.id} rowLabel={row => row.name} selection={{ keys: selected, onChange: setSelected }} />
+        </Surface>
+      </Stack>
     </Stack>
   </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

@@ -3,8 +3,15 @@ body { margin:0; }
 .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; }
+.compact-gallery-facts { container-type:inline-size; }
+.compact-gallery-facts-meta { grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr); align-items:baseline; }
+.compact-gallery-facts-subscription { grid-column:1 / -1; }
+.compact-gallery-fact-pair { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:baseline; }
+.compact-gallery-facts-meta>*,.compact-gallery-fact-pair>* { min-width:0; overflow-wrap:anywhere; }
+@container (max-width:360px) {
+  .compact-gallery-facts-meta { grid-template-columns:repeat(2,minmax(0,1fr)); }
+  .compact-gallery-facts-expiry { grid-column:1 / -1; }
+}
 .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; }
@@ -26,4 +33,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%; }
+}