@linhey/rhine-design 0.3.0 → 0.5.0

package/components/README.md

@@ -1,25 +1,31 @@
-# 莱茵设计 · 通用组件 V1.4
+# 莱茵设计 · 通用组件
 
 本目录提供[莱茵设计 · Rhine Design](../README.md)的 React 组件、设计变量和 API 契约。组件接收应用传入的数据与动作，不绑定特定后端或原生平台。包名为`@linhey/rhine-design`；样式变量和类名使用`rhine-`命名空间。
 
-共40个组件。已有16个基础组件，新增24个数据、表单、操作、浮层和布局组件，见[常用组件契约](./COMMON_COMPONENTS.md)。[字体与文字规范](./TYPOGRAPHY.md)与[主流系统对照与缺口](../docs/DESIGN_SYSTEM_AUDIT.md)共同约束复用。静态页面样稿也使用同源Toolbar/Select CSS，不运行React。
+0.5.0 共59个组件；0.4.0为48个，0.3.0为40个。新增导航、表单流程及健康时间轴组件见[场景与交互规范](../docs/INTERACTION_PATTERNS.md)，原24个扩展组件见[常用组件契约](./COMMON_COMPONENTS.md)。[字体与文字规范](./TYPOGRAPHY.md)与[主流系统对照与缺口](../docs/DESIGN_SYSTEM_AUDIT.md)共同约束复用。静态页面样稿也使用同源Toolbar/Select CSS，不运行React。
 
 页面改动遵循：优先复用组件 → 先在设计稿/展台修改并验证 → 再按任务授权实现到App。缺组件先补组件与展台，不在业务页另写同用途样式；同一任务已授权设计和实现时连续推进，无需重复确认。
 
+## 间距组合
+
+[间距规范](SPACING.md)定义尺度、分组与卡片配方：Surface负责24px内边距，嵌套Stack提供8px标题/说明和16px内容/操作间隔，Inline提供8px按钮间隔；Surface不自动给子元素加间距。展台`#spacing`可检查默认、加载、错误和长文案。
+
 ## 使用
 
 先按[套件接入说明](../README.md#quick-start)安装组件包，再导入：
 
 ```tsx
-import { Button, Notice, Progress, Surface } from '@linhey/rhine-design';
+import { Button, Inline, Notice, Progress, Stack, Surface } from '@linhey/rhine-design';
 
 export function Example() {
   return (
     <div className="rhine-theme">
       <Surface>
+        <Stack gap={4}>
         <Notice tone="warning" title="需要处理">请检查后重试。</Notice>
         <Progress label="任务进度" value={null} />
-        <Button variant="secondary" onClick={() => { /* 业务动作 */ }}>重试</Button>
+        <Inline gap={2}><Button variant="secondary" onClick={() => { /* 业务动作 */ }}>重试</Button></Inline>
+        </Stack>
       </Surface>
     </div>
   );
@@ -28,6 +34,8 @@ export function Example() {
 
 入口 `index.ts` 自动导入组件 CSS。使用一个 `.rhine-theme` 包裹组件树，获得字体、盒模型、焦点和动效降级规则。主题根放在页面根部，不加transform、裁剪或contain；浮层Portal挂在最近的主题根以继承变量和减少动态偏好。独立运行与跨项目导入方式见[套件入口](../README.md)；跨仓复用核对React19与套件package.json中的5个Radix依赖，不导入展台。
 
+0.4.0 新增主题入口 `@linhey/rhine-design/theme`，导出 `ThemeProvider`、`useTheme`、`themes`、`ThemeName` 和 `ThemeProviderProps`（自 0.4.0 提供）。Provider 自动生成主题根并加载内置主题；用 `setTheme('arknights')` 切换，受控偏好与存储由宿主管理。支持并列 Provider，暂不支持嵌套覆盖。完整契约及代码见[主题 API](../docs/THEMING.md)。
+
 - `tokens.css`：唯一色彩、尺寸与动画变量来源。
 - `styles.css`：`rhine-` 前缀组件样式，业务页面可组合布局但不覆盖组件状态。
 - `components.tsx`：原有基础组件；`Actions/Data/Forms/Layout/Overlays/Toast.tsx`承载新增组件。表单与业务数据由调用方控制，浮层开关、通知计时及复制结果只管理局部交互。
@@ -38,6 +46,8 @@ export function Example() {
 
 ## 组件契约
 
+0.5.0 的 Background、AppShell、MediaCard、MediaViewer、DateField、DateRangePicker、NumberField、TreeSelect、RemoteMultiSelect、TrendChart、StackedBar，以及 DataTable/Pagination 和 StatusTimeline 详情扩展见[应用组件契约](../docs/APPLICATION_COMPONENTS.md)。新增 11 个，总数 59；npm 0.4.0 为 48 个。
+
 | 组件 | 关键输入 | 状态与边界 |
 | --- | --- | --- |
 | Button | variant=primary/secondary/quiet/danger；busy；busyLabel；原生按钮属性 | 默认 type=button；busy 保留焦点并拦截再次 click，不自动把业务标记成功；disabled 使用原生禁用 |
@@ -47,6 +57,7 @@ export function Example() {
 | Toolbar | title；description；children；HTML div属性 | 自适应控件组合，role=group与普通Tab顺序；不伪装为需要方向键导航的ARIA toolbar；不含业务状态 |
 | Badge | tone=neutral/success/warning/error；children | 只读短状态，颜色必须配文字，不做可点击按钮 |
 | Surface | HTML div 属性 | 静态分区，无点击语义；不是弹窗或导航 |
+| Background（0.5.0） | roleTone=canvas/content/sidebar/surface/overlay/media；decoration=auto/theme/none；appearance={color,textColor,texture,textureSize}；HTML div 属性 | 默认正文纯色；仅画布默认使用主题纹理；局部覆盖不创建主题根或定位上下文；完整配置见[场景背景](../docs/THEMING.md#场景背景050) |
 | SelectionCard | label；selected；onSelectedChange；disabled；children | 原生 checkbox 可取消；是否单选由上层控制；内部不嵌套按钮/链接/其他输入 |
 | TextField | label；hint；error；原生 input 属性 | label 与 id 自动关联；错误与提示组成 aria-describedby；输入值由调用方管理 |
 | Tabs | label；items[{value,label,content,disabled?}]；value；onValueChange | value 必须指向有效可用项；唯一 value；左右/Home/End，跳过禁用项；隐藏面板保留挂载但退出可访问树 |
@@ -67,7 +78,7 @@ export function Example() {
 
 启动动画候选见[三角构架归位](./STARTUP.md)与`/#startup`。专属分镜不改变通用Logo入场参数，也不作为真实初始化等待门槛。
 
-用户指定的Transitions.dev参考与莱茵设计取舍见[UX与动效补充](./MOTION.md)。`/#motion`已提供10组播放、重播、复位与4倍慢放示例，可逐例切换减少动态。方向展开、内容淡入与结果反馈仅在实验室作为候选实现；通用默认实现仍以下表和实际组件为准。
+用户指定的Transitions.dev参考与莱茵设计取舍见[UX与动效补充](./MOTION.md)。`/#motion`已提供12组播放、重播、复位与4倍慢放示例，可逐例切换减少动态。方向展开、内容淡入与结果反馈仅在实验室作为候选实现；通用默认实现仍以下表和实际组件为准。
 
 ### 品牌标志
 
@@ -135,3 +146,7 @@ export function Example() {
 在仓库根执行npm run check。浏览器核对400/520/880/1200宽度、200%缩放、键盘/焦点、展开反向、减少动态中断与加载宽度。JSDOM不代替视觉或原生辅助技术验收。
 
 本仓构建产物是独立展台；消费项目只导入组件入口，避免把preview中的模拟流程打入业务产物。版本变化和迁移见[CHANGELOG](../CHANGELOG.md)。
+
+## 背景与外壳（0.5.0）
+
+新增 `Background` 与 `AppShell`，0.5.0 共 59 个组件；npm 0.4.0 仍为 48 个。Background 支持六类 roleTone、auto/theme/none 装饰策略及 appearance 局部覆盖；AppShell 提供组合展台使用的固定顶部操作区与响应式侧栏。完整 API、最小接入、背景滚动及 Portal 边界见[背景与应用外壳契约](../docs/APPLICATION_COMPONENTS.md)。

package/components/SPACING.md

@@ -0,0 +1,82 @@
+# 间距与组合
+
+间距表达信息关系：同组紧、组间松、区域之间留白。颜色和边框不能代替分组。此规范适用于所有消费项目，真实示例见展台 `#spacing`。
+
+## 尺度与用途
+
+唯一尺寸来源是 [tokens.css](tokens.css)。`Stack / Inline / Grid` 的 `gap` 是 token 后缀，不是 px：`gap={4}` 表示16px。
+
+| Token / gap | 尺寸 | 默认用途 |
+| --- | --- | --- |
+| `--rhine-space-1` / 1 | 4px | 标签与紧随其后的短提示、图标微间隔 |
+| `--rhine-space-2` / 2 | 8px | 标题与说明、字段标签与控件、同组按钮 |
+| `--rhine-space-3` / 3 | 12px | 同组信息行、密集工具栏项目 |
+| `--rhine-space-4` / 4 | 16px | 内容与操作、表单字段、普通列表/网格项 |
+| `--rhine-space-6` / 6 | 24px | Surface内边距、卡片之间、模块内部的独立信息组 |
+| `--rhine-space-8` / 8 | 32px | 页面主要章节之间、宽屏页面边距 |
+| `--rhine-space-12` / 12 | 48px | 独立大区域或品牌留白，不用于普通表单 |
+
+0只表示无间隔，不新增token。1px边线、控件高度、焦点环偏移不属于间距尺度。宿主既有窄窗20px边距可作为明确记录的布局例外，不能变成随处使用的新gap。
+
+## 视觉间距与操作范围
+
+分别定义可见图形、文字行盒、可点击范围与焦点环。视觉对齐按可见内容和行盒测量，操作范围不得为压缩列表而缩小；允许透明命中区向外扩展，但不能覆盖相邻按钮、链接或输入。不能同时叠加父gap、条目padding和控件内部透明留白来表达同一段距离。
+
+有分隔线的重复条目，分隔线前后使用同一组间距；首项不重复叠加区域顶部间距，末项为按需详情与焦点环留出空间。不要在分隔线后立刻贴标题、却把全部留白放到前一条末尾。
+
+密集健康列表：名称/额度行与20px健康条间隔8px，条目之间分隔线两侧各16px；首项不额外叠加顶部内距。compact时间轴的44px命中区在可见条上下各扩展12px，不占据文档流留白；调用方须保留这段安全空间，避免与相邻可点击控件重叠。不要再把44px命中框的内部空白叠加到视觉gap上。
+
+这是紧凑健康列表的配方，不要求所有列表都采用20px图形或16px内距。浮层的自然高度和单层滚动规则见[交互规范](../docs/INTERACTION_PATTERNS.md#弹窗高度与滚动归属)。
+
+## 默认卡片配方：24 / 8 / 16
+
+- 外层 `Surface` 负责24px内边距与边界，不自动给任意子节点添加margin。`SelectionCard`同样使用24px内边距，组件自身提供标题与内容间的8px；内容内部仍由调用方分组。
+- 标题与说明放进 `Stack gap={2}`，保持8px间隔。
+- 内容组与操作组放进 `Stack gap={4}`，保持16px间隔。
+- 操作组使用 `Inline gap={2}`，按钮间隔8px、允许换行、保持内容宽度。
+- 卡片之间用 `Stack gap={6}` 或 `Grid gap={6}`，保持24px间隔。不要同时设置父级gap与子级margin来叠加同一段距离。
+
+```tsx
+<Surface>
+  <Stack gap={4}>
+    <Stack gap={2}>
+      <Text as="h2" variant="heading">应用更新</Text>
+      <Text tone="muted">当前版本已是最新。</Text>
+    </Stack>
+    <Inline gap={2}>
+      <Button variant="secondary" onClick={checkUpdate}>检查更新</Button>
+    </Inline>
+  </Stack>
+</Surface>
+```
+
+页面已有h1时卡片通常用h2；标题等级由结构决定，不能用字号决定。不要为布局引入空Text、空段落或连续br。
+
+行高与间距分别管理：正文14/22px、标题16/24px，独立正文段落默认12px段间距；不是在每一行之间再加gap。详见[行高规范](TYPOGRAPHY.md#行高段落与控件)。
+
+## 常见组合
+
+| 场景 | 内部 | 组间 / 区域 | 组件选择 |
+| --- | --- | --- | --- |
+| 信息与设置卡片 | 标题/说明8px | 内容/动作16px；卡片24px | Surface +嵌套Stack +Inline |
+| 表单 | 标签/控件由字段组件负责 | 字段16px；字段组24px；提交区24px | TextField/Fieldset +Stack |
+| 工具栏 | 同组按钮8px | 独立组16px，窄屏换行 | Toolbar/Inline |
+| 数据列表 | 同项说明4–8px | 列表项16px；筛选/表格/分页16–24px | Stack +DataTable/Pagination |
+| 浮层 | 标题/说明由浮层组件负责 | 正文组16px；操作区24px | Dialog/Drawer +Stack/Inline |
+| 反馈 | 提示内部由Notice负责 | 与前后内容16px | Notice放入Stack，不覆盖其内部样式 |
+
+这些是组合默认值，不重新覆盖现有组件内部的padding、gap或状态样式。要改变组件密度，先在库中定义并验证，不能在业务页用后代选择器临时压缩。
+
+## 长文本、窄窗与状态变化
+
+保持8/16/24的关系，不因窄屏把所有间距归零。长文本自然换行、卡片随内容增高；多列转单列，按钮换行，不缩小字号或点击区域。保持至少44px操作目标及焦点环空间。
+
+加载保留已有文案和按钮位置，只改变真实状态；额外进度或错误信息作为独立组加入16px间距。错误文案常驻直至处理，不用固定卡高或裁剪限制。状态元素移除后不保留空白占位组；不要用空的Inline或Stack充当spacer。
+
+间距本身不动画。状态变化复用现有组件动效，不为留白增加缩放、弹跳或循环；减少动态保留同样布局与操作。
+
+## 验收
+
+检查默认、加载、错误、长文案；400/520/880px及200%等效重排；文字、焦点与按钮不裁切；不存在父gap叠加子margin或按钮意外撑满。以真实边界间距为准，行高内部的字形留白不当成额外margin测量。
+
+本规范与展台随main更新；现有gap API在npm0.3.0可用，文档章节不代表已发布新版本。

package/components/StatusTimeline.tsx

@@ -0,0 +1,67 @@
+import { useId, useLayoutEffect, useRef, useState } from 'react';
+import * as PopoverBase from '@radix-ui/react-popover';
+import { Text } from './Typography';
+import { KeyValue } from './Data';
+import { Button } from './components';
+
+export type TimelineStatus = 'healthy' | 'recovered' | 'degraded' | 'failed' | 'unknown';
+export interface TimelineDetail {
+  start: string; end: string; reason?: string;
+  counts?: { id: string; label: string; value: number | null; unit?: string }[];
+  methodology?: string;
+}
+export interface TimelineSegment { id: string; label: string; status: TimelineStatus; detail?: TimelineDetail }
+export interface StatusTimelineProps {
+  label: string; segments: TimelineSegment[]; startLabel: string; endLabel: string; compact?: boolean; disabled?: boolean;
+  activeId?: string; defaultActiveId?: string; onActiveChange?: (id: string) => void;
+  open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void;
+}
+export const timelineLabels: Record<TimelineStatus, string> = { healthy: '有输出·未见异常', recovered: '重试已恢复', degraded: '异常·结果待确认', failed: '存在最终失败', unknown: '未知 / 无数据' };
+
+/** Host supplies ordered, validated evidence; this component never computes a health score. */
+export function StatusTimeline({ label, segments, startLabel, endLabel, compact = false, disabled = false, activeId, defaultActiveId, onActiveChange, open: controlledOpen, defaultOpen = false, onOpenChange }: StatusTimelineProps) {
+  const [localId, setLocalId] = useState(defaultActiveId);
+  const [localOpen, setLocalOpen] = useState(defaultOpen), [container, setContainer] = useState<HTMLElement>();
+  const open = controlledOpen ?? localOpen;
+  const setOpen = (next: boolean) => { if (disabled && next) return; if (controlledOpen === undefined) setLocalOpen(next); if (next !== open) onOpenChange?.(next); };
+  const root = useRef<HTMLDivElement>(null), slider = useRef<HTMLInputElement>(null), popup = useRef<HTMLDivElement>(null), returning = useRef(false), focusDetail = useRef(false);
+  useLayoutEffect(() => { setContainer(root.current?.closest<HTMLElement>('.rhine-theme') ?? document.body); }, []);
+  const detailId = useId();
+  const matched = segments.findIndex(item => item.id === (activeId ?? localId));
+  const selected = matched < 0 ? segments.length - 1 : matched;
+  const select = (index: number) => { const next = segments[index]?.id; if (!next || disabled) return; if (activeId === undefined) setLocalId(next); if (next !== segments[selected]?.id) onActiveChange?.(next); };
+  const segment = segments[selected];
+  const summary = segment ? `${segment.label} · ${timelineLabels[segment.status]}` : '暂无记录';
+  const hasPopup = !disabled && !!segment && (compact || !!segment.detail);
+  return <div ref={root} className={`rhine-timeline${compact ? ' rhine-timeline--compact' : ''}`}>
+    <PopoverBase.Root open={open && hasPopup} onOpenChange={setOpen}><PopoverBase.Anchor asChild><div className="rhine-timeline__track">
+      <div className="rhine-timeline__bars" aria-hidden="true">{segments.map((item, i) => <span key={item.id} data-status={item.status} data-selected={i === selected} />)}</div>
+      <input ref={slider} type="range" min={0} max={Math.max(0, segments.length - 1)} value={Math.max(0, selected)} disabled={disabled || !segments.length}
+        aria-label={label} aria-valuetext={segment ? `${segment.label} · ${timelineLabels[segment.status]}` : '暂无记录'} aria-describedby={detailId}
+        aria-details={open && hasPopup ? `${detailId}-popup` : undefined} aria-controls={open && hasPopup ? `${detailId}-popup` : undefined} aria-haspopup={hasPopup ? 'dialog' : undefined}
+        onFocus={() => { if (!returning.current) setOpen(true); returning.current = false; }}
+        onKeyDown={event => {
+          if (event.key === 'Escape' && open && hasPopup) { event.preventDefault(); event.stopPropagation(); setOpen(false); }
+          if ((event.key === 'Enter' || event.key === ' ') && hasPopup) { event.preventDefault(); if (open) popup.current?.querySelector<HTMLButtonElement>('button')?.focus(); else { focusDetail.current = true; setOpen(true); } }
+        }}
+        onChange={event => { select(Number(event.target.value)); setOpen(true); }}
+        onPointerDown={() => setOpen(true)}
+        onPointerMove={event => { if (disabled || event.pointerType !== 'mouse' || !segments.length) return; const rect = event.currentTarget.getBoundingClientRect(); if (rect.width) select(Math.min(segments.length - 1, Math.max(0, Math.floor((event.clientX - rect.left) / rect.width * segments.length)))); setOpen(true); }} />
+    </div></PopoverBase.Anchor><PopoverBase.Portal container={container}><PopoverBase.Content ref={popup} id={`${detailId}-popup`} className="rhine-timeline-popover" side="top" sideOffset={8} collisionPadding={12} aria-label={`${label}时段详情`}
+      onOpenAutoFocus={event => { event.preventDefault(); if (focusDetail.current) { focusDetail.current = false; popup.current?.querySelector<HTMLButtonElement>('button')?.focus(); } }} onCloseAutoFocus={event => { event.preventDefault(); focusDetail.current = false; if (document.activeElement === document.body || popup.current?.contains(document.activeElement)) { returning.current = true; slider.current?.focus(); } }}
+      onInteractOutside={event => { if (root.current?.contains(event.target as Node)) event.preventDefault(); }}>
+      <div className="rhine-dialog__head"><strong>{summary}</strong><PopoverBase.Close asChild><Button variant="quiet" aria-label="关闭时段详情">关闭</Button></PopoverBase.Close></div>
+      {segment?.detail && <><KeyValue items={[
+        { key: 'start', label: '开始时间', value: segment.detail.start }, { key: 'end', label: '结束时间', value: segment.detail.end },
+        { key: 'reason', label: '状态原因', value: segment.detail.reason || '未提供' },
+        ...(segment.detail.counts ?? []).map(item => ({ key: `count-${item.id}`, label: item.label, value: item.value === null || !Number.isFinite(item.value) ? '未知' : `${item.value}${item.unit ? ` ${item.unit}` : ''}` })),
+      ]} /><p className="rhine-text rhine-text--caption">统计口径：{segment.detail.methodology || '未提供，需向数据来源确认。'}</p></>}
+    </PopoverBase.Content></PopoverBase.Portal></PopoverBase.Root>
+    <div className={compact ? 'rhine-sr-only' : 'rhine-timeline__range'}><Text variant="caption" tone="muted">{startLabel}</Text><Text variant="caption" tone="muted">{endLabel}</Text></div>
+    <Text id={detailId} className={compact && segment ? 'rhine-sr-only' : 'rhine-timeline__summary'} variant="caption">{summary}</Text>
+  </div>;
+}
+
+export function TimelineLegend() {
+  return <ul className="rhine-timeline__legend" aria-label="健康记录图例">{Object.entries(timelineLabels).map(([status, label]) => <li key={status}><span data-status={status} aria-hidden="true"/>{label}</li>)}</ul>;
+}

package/components/TYPOGRAPHY.md

@@ -1,6 +1,6 @@
-# 莱茵设计 · 字体与文字规范 V1.3
+# 莱茵设计 · 字体与文字规范 V1.4
 
-2026-10-22。适用于使用莱茵设计的中文界面与中英文混排。变量定义在 [tokens.css](./tokens.css)，样式与 React 入口分别为 [typography.css](./typography.css)、[Typography.tsx](./Typography.tsx)。归属与接入见[套件入口](../README.md)。
+2026-10-23。适用于使用莱茵设计的中文界面与中英文混排。变量定义在 [tokens.css](./tokens.css)，样式与 React 入口分别为 [typography.css](./typography.css)、[Typography.tsx](./Typography.tsx)。归属与接入见[套件入口](../README.md)。
 
 ## 字体与字重
 
@@ -34,6 +34,38 @@
 <Text as="code" variant="code">gpt-6.1-sol</Text>
 ```
 
+## 行高、段落与控件
+
+字号与行高成对使用，`Text`按variant同时设置两者；不在业务页单改字号而继承父级行高，不使用`normal`或固定容器高度猜测文本尺寸。上表是100%缩放的CSS尺寸，缩放后保持比例与自然换行，不以压低行高塞回原高度。
+
+| 内容 | 字号 / 行高 | Token | 多行规则 |
+| --- | --- | --- | --- |
+| 大标题 | 30 / 38px | `--rhine-leading-title` | 换行仍为38px，不压成单行 |
+| 分区标题 | 18 / 26px | `--rhine-leading-section` | 行距保持，标题之后的间隔另计 |
+| 卡片标题 | 16 / 24px | `--rhine-leading-heading` | 中英文混排同一行高 |
+| 正文、表单标签、按钮 | 14 / 22px | `--rhine-leading-body` | 两行正文占44px，三行占66px |
+| 时间、来源、辅助说明 | 12 / 18px | `--rhine-leading-caption` | 两行36px；重要正文不要降为辅助字号 |
+| 代码、路径 | 12 / 20px | `--rhine-leading-code` | 长标识可换行，行距不随字体回退变化 |
+| 指标 | 26 / 32px；紧凑20 / 26px | `--rhine-leading-metric` / `--rhine-leading-metric-compact` | 字号与行高一起切换，单位不得把整行撑乱 |
+
+- 行高是行框高度，包含字形上下留白，不等于两行字形之间的空白；不能把行高22px理解为额外22px的gap。
+- 一个段落自然换行时不增加margin；两个独立段落默认用`Stack gap={3}`（12px）。标题与说明仍为8px，正文组与操作为16px，遵循[间距规范](SPACING.md)。标题/段落默认无浏览器自带margin。
+- 按钮文字采用14/22，最小操作目标44px通过padding与min-height保证；不要把line-height设置为44px来垂直居中。长按钮文案可换行并增高，禁止固定height裁切。
+- 现有紧凑组件的例外：Badge与Notice说明为12/20px，数据表普通文本为12/22px；这些是组件内部的既有密度，不用后代CSS临时覆盖。数据表中的技术标识仍使用Text code的12/20px。Logo字标是单行品牌几何，line-height=1仅限该品牌组件，不用于正文。
+- 在行内混用不同字号时，行框可能由最大的子元素决定；需要固定对齐的指标、单位和标签使用组件既有组合，不承诺所有混排整行都等于单个Text的行高。
+- 行高、字距与字号不做动画；状态文字立即更新，减少动态不改变排版。
+
+展台`#typography`的「多行行高与段落」使用真实Text和Stack，可显示行框辅助线；辅助线只标注每行区域，不模拟字体基线，也不进入产品。
+
+```tsx
+<Stack gap={3}>
+  <Text>第一段说明自然换行，每行22px；段内不添加额外gap。</Text>
+  <Text>第二段由Stack与前一段保持12px距离。</Text>
+</Stack>
+```
+
+验收：400/520/880px与200%等效重排下检查标题、长正文、路径、操作按钮；计算样式与token一致，文字不裁切，长文增高不挤压操作。系统纯文本放大和原生辅助技术另行验收。此补充随main更新，不代表新npm版本已发布。
+
 ## 混排、数字与单位
 
 - 中文正文不增加字距，不做两端强制分散；段落左对齐，长说明建议不超过60ch。居中仅用于简短空态与品牌展示。

package/components/background.css

@@ -0,0 +1,43 @@
+/* Each container resets its paint so local overrides never leak into nested scenes.
+   Background paint does not create a containing block or intercept pointer events. */
+.rhine-background {
+  --rhine-background-color: var(--rhine-content-bg);
+  --rhine-background-foreground: var(--rhine-content-text);
+  --rhine-background-image: var(--rhine-content-texture);
+  --rhine-background-size: var(--rhine-background-scale);
+  min-width: 0;
+  color: var(--rhine-background-foreground);
+  background-color: var(--rhine-background-color);
+  background-image: var(--rhine-background-image);
+  background-size: var(--rhine-background-size);
+  background-position: 0 0;
+  background-attachment: scroll;
+}
+.rhine-background[data-tone=canvas] {
+  --rhine-background-color: var(--rhine-canvas-bg);
+  --rhine-background-foreground: var(--rhine-canvas-text);
+  --rhine-background-image: var(--rhine-canvas-texture);
+}
+.rhine-background[data-tone=sidebar] {
+  --rhine-background-color: var(--rhine-sidebar-bg);
+  --rhine-background-foreground: var(--rhine-sidebar-text);
+  --rhine-background-image: var(--rhine-sidebar-texture);
+}
+.rhine-background[data-tone=surface] {
+  --rhine-background-color: var(--rhine-surface-bg);
+  --rhine-background-foreground: var(--rhine-surface-text);
+  --rhine-background-image: var(--rhine-surface-texture);
+}
+.rhine-background[data-tone=overlay] {
+  --rhine-background-color: var(--rhine-overlay-bg);
+  --rhine-background-foreground: var(--rhine-overlay-text);
+  --rhine-background-image: var(--rhine-overlay-texture);
+}
+.rhine-background[data-tone=media] {
+  --rhine-background-color: var(--rhine-media-bg);
+  --rhine-background-foreground: var(--rhine-media-text);
+  --rhine-background-image: var(--rhine-media-texture);
+  color-scheme: dark;
+}
+.rhine-background[data-decoration=theme] { --rhine-background-image: var(--rhine-background-texture); }
+.rhine-background[data-decoration=none] { background-image: none; }

package/components/charts.css

@@ -0,0 +1,27 @@
+.rhine-chart { min-width:0; margin:0; display:grid; gap:16px; }
+.rhine-chart figcaption { display:grid; gap:4px; overflow-wrap:anywhere; }
+.rhine-chart figcaption strong { font-size:16px; line-height:24px; }
+.rhine-chart figcaption>span,.rhine-chart figcaption p { font-size:12px; line-height:20px; color:var(--rhine-muted); margin:0; }
+.rhine-chart__plot { width:100%; height:180px; overflow:visible; }
+.rhine-chart__scale,.rhine-chart__range { display:flex; justify-content:space-between; gap:16px; font-size:12px; line-height:20px; color:var(--rhine-muted); overflow-wrap:anywhere; }
+.rhine-chart__range>* { min-width:0; }
+.rhine-chart__range>:last-child { text-align:right; }
+.rhine-chart__grid { fill:none; stroke:var(--rhine-chart-grid); stroke-width:1; }
+.rhine-chart__highlight { fill:var(--rhine-selected); stroke:var(--rhine-green); stroke-width:1; vector-effect:non-scaling-stroke; }
+.rhine-chart__inspection { margin:0; min-height:44px; font-size:14px; line-height:22px; overflow-wrap:anywhere; }
+.rhine-chart__line { fill:none; stroke:var(--rhine-chart-series-1); stroke-width:2; }
+.rhine-chart__bar,.rhine-chart__point { fill:var(--rhine-chart-series-1); }
+.rhine-chart__missing { fill:none; stroke:var(--rhine-chart-missing); stroke-width:2; }
+.rhine-chart__legend { margin:0; font-size:12px; line-height:20px; }
+.rhine-chart__legend>span { display:inline-block; width:12px; height:12px; background:var(--rhine-chart-series-1); margin-right:8px; }
+.rhine-chart__data { min-width:0; }
+.rhine-chart__data summary { min-height:44px; padding:12px 4px; cursor:pointer; }
+.rhine-chart__stack { height:32px; display:flex; gap:2px; border:1px solid var(--rhine-line); }
+.rhine-chart__stack>span { flex-basis:0; min-width:0; }
+.rhine-chart [data-tone="1"] { background:var(--rhine-chart-series-1); }
+.rhine-chart [data-tone="2"] { background:var(--rhine-chart-series-2); }
+.rhine-chart [data-tone="3"] { background:var(--rhine-chart-series-3); }
+.rhine-chart [data-tone="4"] { background:var(--rhine-chart-series-4); }
+.rhine-chart__parts { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px 16px; font-size:14px; line-height:22px; }
+.rhine-chart__parts li { min-width:0; overflow-wrap:anywhere; }
+.rhine-chart__parts li>span { display:inline-block; width:12px; height:12px; margin-right:8px; border:1px solid var(--rhine-control); }

package/components/common.css

@@ -14,14 +14,14 @@
 .rhine-metric__unit { font-size:var(--rhine-text-caption); font-weight:400; color:var(--rhine-muted); }
 .rhine-key-value { margin:0; display:grid; gap:12px; }
 .rhine-key-value>div { display:grid; grid-template-columns:minmax(80px,1fr) minmax(0,2fr); gap:16px; }
-.rhine-key-value dt { color:var(--rhine-muted); font-size:12px; }.rhine-key-value dd { margin:0; overflow-wrap:anywhere; }
+.rhine-key-value dt { color:var(--rhine-muted); font-size:var(--rhine-text-caption); line-height:var(--rhine-leading-caption); }.rhine-key-value dd { margin:0; overflow-wrap:anywhere; }
 .rhine-data { display:grid; gap:12px; min-width:0; }
 .rhine-table-scroll { overflow:auto; max-width:100%; }
 .rhine-table { width:100%; min-width:500px; border-collapse:collapse; text-align:left; font-size:12px; }
-.rhine-table caption { text-align:left; font-size:16px; font-weight:600; margin-bottom:16px; }
+.rhine-table caption { text-align:left; font-size:var(--rhine-text-heading); line-height:var(--rhine-leading-heading); font-weight:var(--rhine-weight-heading); margin-bottom:var(--rhine-space-4); }
 .rhine-table th,.rhine-table td { padding:12px; border-bottom:1px solid var(--rhine-line); max-width:240px; overflow-wrap:anywhere; }
 .rhine-table th { color:var(--rhine-muted); font-weight:500; }.rhine-table td { font-variant-numeric:tabular-nums; }
-.rhine-table [data-align=right] { text-align:right; }.rhine-table tbody tr:hover { background:var(--rhine-selected); }
+.rhine-table [data-align=right] { text-align:right; }.rhine-table tbody tr:hover { background:var(--rhine-table-hover-bg); }
 .rhine-table th button { font:inherit; color:inherit; background:none; border:0; min-height:44px; cursor:pointer; padding:0; }
 .rhine-table th button:disabled { cursor:default; }
 .rhine-pagination { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:12px; }
@@ -43,18 +43,27 @@
 .rhine-combobox { position:relative; }
 .rhine-combobox__input { position:relative; }.rhine-combobox__input input { padding-right:40px; }
 .rhine-combobox__arrow { position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; }
-.rhine-combobox__list { z-index:50; width:var(--radix-popover-trigger-width); max-width:calc(100vw - 24px); max-height:min(240px,var(--radix-popover-content-available-height)); overflow:auto; background:var(--rhine-surface); color:var(--rhine-ink); border:1px solid var(--rhine-control); border-radius:4px; box-shadow:0 8px 24px #242b2818; }
+.rhine-combobox__list { z-index:50; width:var(--radix-popover-trigger-width); max-width:calc(100vw - 24px); max-height:min(240px,var(--radix-popover-content-available-height)); overflow:auto; background:var(--rhine-overlay-bg); color:var(--rhine-overlay-text); border:1px solid var(--rhine-control); border-radius:4px; box-shadow:0 8px 24px #242b2818; }
 .rhine-combobox__list [role=option],.rhine-combobox__empty { padding:12px; min-height:44px; cursor:pointer; overflow-wrap:anywhere; }
 .rhine-combobox__list [role=option][data-active=true],.rhine-combobox__list [role=option][aria-selected=true] { background:var(--rhine-selected); }
 .rhine-combobox__list [role=option][aria-disabled=true],.rhine-combobox__empty { color:var(--rhine-muted); cursor:default; }
 .rhine-overlay-anchor { display:inline-block; vertical-align:middle; max-width:100%; }
-.rhine-overlay { position:fixed; inset:0; background:#242b2870; z-index:40; }
-.rhine-dialog { position:fixed; z-index:41; top:50%; left:50%; transform:translate(-50%,-50%); width:min(480px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:24px; border:1px solid var(--rhine-line); border-radius:4px; background:var(--rhine-surface); color:var(--rhine-ink); box-shadow:0 16px 48px #242b2826; }
-.rhine-dialog>p { margin-top:12px; }.rhine-dialog>.rhine-notice { margin-top:16px; }
+.rhine-overlay { position:fixed; inset:0; background:var(--rhine-backdrop-bg); z-index:40; }
+.rhine-dialog { position:fixed; z-index:41; top:50%; left:50%; transform:translate(-50%,-50%); width:min(480px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:24px; border:1px solid var(--rhine-line); border-radius:4px; background:var(--rhine-overlay-bg); color:var(--rhine-overlay-text); box-shadow:0 16px 48px #242b2826; }
+.rhine-dialog>p,.rhine-dialog__main>p { margin-top:12px; }.rhine-dialog>.rhine-notice { margin-top:16px; }
+.rhine-dialog__main { min-width:0; }
+.rhine-dialog--split { width:min(960px,calc(100vw - 32px)); display:grid; grid-template-columns:minmax(240px,0.8fr) minmax(0,1.2fr); gap:24px; }
+.rhine-dialog--split .rhine-dialog__head { padding-right:24px; }
+.rhine-dialog--split .rhine-dialog__head>.rhine-icon-button { position:absolute; top:16px; right:16px; }
+.rhine-dialog__side { min-width:0; border-left:1px solid var(--rhine-line); padding:40px 0 0 24px; }
+.rhine-dialog--side-navigation .rhine-dialog__side { padding-top:0; }
+.rhine-dialog--side-navigation .rhine-dialog__main>.rhine-dialog__head { min-height:44px; padding-right:0; }
+@media(max-width:720px) { .rhine-dialog--split { grid-template-columns:minmax(0,1fr); }.rhine-dialog__side { border-left:0; border-top:1px solid var(--rhine-line); padding:24px 0 0; } }
+@media(max-width:720px) { .rhine-dialog--side-navigation .rhine-dialog__side { padding-top:16px; } }
 .rhine-dialog__head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
 .rhine-dialog__head>:first-child { min-width:0; overflow-wrap:anywhere; }
 .rhine-dialog__body { margin-top:24px; }.rhine-dialog__actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:12px; margin-top:24px; }
-.rhine-popover,.rhine-menu { z-index:50; background:var(--rhine-surface); color:var(--rhine-ink); border:1px solid var(--rhine-control); border-radius:4px; box-shadow:0 8px 24px #242b2820; max-width:calc(100vw - 24px); overflow:auto; }
+.rhine-popover,.rhine-menu { z-index:50; background:var(--rhine-overlay-bg); color:var(--rhine-overlay-text); border:1px solid var(--rhine-control); border-radius:4px; box-shadow:0 8px 24px #242b2820; max-width:calc(100vw - 24px); overflow:auto; }
 .rhine-popover { width:300px; padding:16px; max-height:var(--radix-popover-content-available-height); }
 .rhine-menu { min-width:180px; max-height:var(--radix-dropdown-menu-content-available-height); padding:4px; }
 .rhine-menu__item { min-height:44px; padding:10px 12px; cursor:pointer; outline:none; overflow-wrap:anywhere; }

package/components/data.css

@@ -0,0 +1,6 @@
+.rhine-data .rhine-table tbody th[scope=row] { position:static; top:auto; z-index:auto; color:var(--rhine-ink); background:var(--rhine-surface); font-weight:var(--rhine-weight-label); }
+.rhine-data .rhine-table tbody th[scope=row][data-sticky] { position:sticky; z-index:1; }
+.rhine-data .rhine-table tr[data-selected=true] th[scope=row] { background:var(--rhine-table-selected-bg); }
+.rhine-table__radio { display:flex; align-items:center; gap:8px; min-height:44px; cursor:pointer; }
+.rhine-table__radio input { flex:none; width:18px; height:18px; accent-color:var(--rhine-green); }
+.rhine-table__radio:has(input:disabled) { color:var(--rhine-muted); cursor:default; }

package/components/drawer-placement.css

@@ -0,0 +1,4 @@
+.rhine-dialog.rhine-drawer[data-side=left] { left:0; right:auto; animation-name:rhine-drawer-enter-left; }
+.rhine-dialog.rhine-drawer[data-side=right] { left:auto; right:0; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-drawer[data-side=left] { border-radius:0 24px 24px 0; box-shadow:5px 0 0 var(--rhine-ink); }
+@keyframes rhine-drawer-enter-left { from { opacity:0; transform:translateX(-3px); } to { opacity:1; transform:translateX(0); } }

package/components/extensions.css

@@ -0,0 +1,70 @@
+.rhine-shell { height:100%; min-height:0; min-width:0; display:flex; flex-direction:column; border:1px solid var(--rhine-line); background:var(--rhine-canvas-bg); }
+.rhine-shell__header { flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px; border-bottom:1px solid var(--rhine-line); background:var(--rhine-surface); }
+.rhine-shell__body { display:flex; flex:1; min-height:0; min-width:0; }
+.rhine-shell__nav, .rhine-shell__secondary { flex:0 0 224px; min-width:0; overflow:auto; padding:16px; background:var(--rhine-sidebar-bg); border-right:1px solid var(--rhine-line); overflow-wrap:anywhere; }
+.rhine-shell__secondary { flex-basis:256px; }
+.rhine-shell[data-layout=left-right] .rhine-shell__secondary { order:2; border-right:0; border-left:1px solid var(--rhine-line); }
+.rhine-shell__content { flex:1; min-width:0; min-height:0; overflow:auto; padding:24px; overflow-wrap:anywhere; }
+.rhine-date-range { margin:0; min-width:0; padding:16px; border:1px solid var(--rhine-line); background:var(--rhine-field-group-bg); }
+.rhine-date-range legend { padding:0 4px; font-weight:600; }
+.rhine-date-range__fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:16px; margin-bottom:16px; }
+.rhine-date-range input { max-width:100%; min-width:0; }
+.rhine-number-field { display:grid; gap:8px; min-width:0; }
+.rhine-multi-select { min-width:0; }
+.rhine-multi-select__tags { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:8px 0; }
+.rhine-multi-select__tags li { display:flex; align-items:center; max-width:100%; padding-left:12px; border:1px solid var(--rhine-line); background:var(--rhine-selected); border-radius:var(--rhine-radius-control); }
+.rhine-multi-select__tags li>span { min-width:0; overflow-wrap:anywhere; }
+.rhine-multi-select__tags .rhine-button { flex:none; }
+.rhine-tree { min-width:0; padding:8px; border:1px solid var(--rhine-line); background:var(--rhine-field-group-bg); }
+.rhine-tree [role=group] { padding-left:var(--rhine-tree-indent); }
+.rhine-tree__row { display:flex; align-items:center; gap:8px; min-height:44px; padding:4px; overflow-wrap:anywhere; cursor:pointer; }
+.rhine-tree__row>span:last-of-type { min-width:0; flex:1; }
+.rhine-tree__row[data-selected=true] { background:var(--rhine-selected); }
+.rhine-tree [aria-disabled=true]>.rhine-tree__row { color:var(--rhine-muted); cursor:default; }
+.rhine-tree__row button { min-height:44px; min-width:44px; border:1px solid var(--rhine-line); background:var(--rhine-surface); color:var(--rhine-ink); font:inherit; cursor:pointer; }
+.rhine-tree__spacer { flex:0 0 12px; }
+.rhine-data[data-density=compact] { --rhine-table-cell-padding:6px 12px; }
+.rhine-data .rhine-table-scroll { max-width:100%; overflow:auto; scroll-padding:48px; }
+.rhine-data .rhine-table :is(th,td) { padding:var(--rhine-table-cell-padding); overflow-wrap:anywhere; font-size:14px; }
+.rhine-table th { background:var(--rhine-table-header-bg); }
+.rhine-table td { background:var(--rhine-surface); }
+.rhine-table tbody tr:hover:not([data-selected=true]) > :is(td,th[scope=row]) { background:var(--rhine-table-hover-bg); }
+.rhine-table tr[data-selected=true] td { background:var(--rhine-table-selected-bg); }
+.rhine-table[data-sticky-header=true] th { position:sticky; top:0; z-index:2; }
+.rhine-table :is(th,td)[data-sticky] { position:sticky; z-index:1; box-shadow:0 0 0 1px var(--rhine-line); }
+.rhine-table[data-sticky-header=true] th[data-sticky] { z-index:3; }
+.rhine-table__depth { display:block; white-space:nowrap; color:var(--rhine-muted); font-size:12px; }
+.rhine-table .rhine-check label { min-height:44px; }
+.rhine-pagination .rhine-select { width:auto; }
+.rhine-media-card { min-width:0; border:1px solid var(--rhine-line); border-radius:var(--rhine-radius-card); background:var(--rhine-surface); }
+.rhine-media-card[data-selected=true] { border:2px solid var(--rhine-green); }
+.rhine-media-card__open { display:block; width:100%; min-width:0; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
+.rhine-media-card__open:disabled { cursor:default; opacity:.6; }
+.rhine-media-card__preview { position:relative; display:flex; align-items:center; justify-content:center; width:100%; overflow:hidden; background:var(--rhine-media-canvas); color:var(--rhine-media-text); border-radius:var(--rhine-radius-card) var(--rhine-radius-card) 0 0; }
+.rhine-media-card__preview :is(img,video) { width:100%; height:100%; object-fit:contain; }
+.rhine-media-card__kind { position:absolute; top:8px; left:8px; padding:4px 8px; background:var(--rhine-media-overlay); color:var(--rhine-media-text); border:1px solid var(--rhine-media-border); font-size:12px; }
+.rhine-media-card__caption { display:grid; gap:4px; padding:16px; overflow-wrap:anywhere; }
+.rhine-media-card__caption>span { font-size:12px; color:var(--rhine-muted); }
+.rhine-media-card>.rhine-check { padding:0 16px 12px; overflow-wrap:anywhere; }
+.rhine-media-card>.rhine-check label { min-height:44px; }
+.rhine-media-viewer { position:fixed; inset:0; z-index:41; width:100%; height:100dvh; display:flex; flex-direction:column; background:var(--rhine-media-canvas); color:var(--rhine-media-text); color-scheme:dark; overflow:auto; }
+.rhine-media-viewer__header { flex:none; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding:16px; background:var(--rhine-media-overlay); border-bottom:1px solid var(--rhine-media-border); }
+.rhine-media-viewer__header>div { min-width:0; }
+.rhine-media-viewer__header h2 { font-size:18px; line-height:26px; overflow-wrap:anywhere; margin:0; }
+.rhine-media-viewer__header p { color:var(--rhine-media-muted); font-size:12px; margin:4px 0 0; }
+.rhine-media-viewer__actions { display:flex; flex-wrap:wrap; gap:8px; }
+.rhine-media-viewer :is(button,select,a) { min-height:44px; min-width:44px; max-width:100%; padding:8px 12px; border:1px solid var(--rhine-media-border); border-radius:4px; background:var(--rhine-media-overlay); color:var(--rhine-media-text); font:inherit; overflow-wrap:anywhere; }
+.rhine-media-viewer button { cursor:pointer; }
+.rhine-media-viewer button:disabled { color:var(--rhine-media-muted); opacity:.5; cursor:default; }
+.rhine-theme .rhine-media-viewer.rhine-media-viewer :is(button,input,select,textarea,summary,a,[tabindex]):focus-visible { outline:3px solid var(--rhine-media-focus); outline-offset:-3px; }
+.rhine-media-viewer__body { display:grid; grid-template-columns:var(--rhine-media-columns); flex:1; min-height:0; min-width:0; }
+.rhine-media-viewer__canvas { display:flex; align-items:center; justify-content:center; min-height:0; min-width:0; overflow:auto; padding:16px; }
+.rhine-media-viewer__canvas :is(img,video) { display:block; max-width:100%; max-height:100%; object-fit:contain; }
+.rhine-media-viewer__metadata { min-width:0; overflow:auto; padding:24px; border-left:1px solid var(--rhine-media-border); background:var(--rhine-media-overlay); overflow-wrap:anywhere; }
+@media(max-width:760px) {
+  .rhine-media-viewer__body { display:flex; flex-direction:column; overflow:auto; }
+  .rhine-media-viewer__canvas { flex:1 0 220px; }
+  .rhine-media-viewer__canvas :is(img,video) { max-height:50dvh; }
+  .rhine-media-viewer__metadata { flex:none; overflow:visible; border-left:0; border-top:1px solid var(--rhine-media-border); }
+  .rhine-shell__content { padding:16px; }
+}

package/components/index.ts

@@ -1,4 +1,16 @@
 import './styles.css';
+export { Background } from './Background';
+export type { BackgroundProps, BackgroundRole, BackgroundDecoration, BackgroundAppearance } from './Background';
+export { AppShell } from './AppShell';
+export type { AppShellProps, ShellPanel } from './AppShell';
+export { MediaCard, MediaViewer } from './Media';
+export type { MediaCardProps, MediaViewerProps } from './Media';
+export { DateField, DateRangePicker, NumberField, RemoteMultiSelect, TreeSelect } from './AdvancedForms';
+export type { DateFieldProps, DateRange, DateRangePickerProps, NumberFieldProps, RemoteMultiSelectProps, TreeNode, TreeSelectProps } from './AdvancedForms';
+export { StatusTimeline, TimelineLegend } from './StatusTimeline';
+export type { TimelineSegment, TimelineStatus, TimelineDetail, StatusTimelineProps } from './StatusTimeline';
+export { TrendChart, StackedBar } from './Charts';
+export type { ChartPoint, ChartPart, TrendChartProps, StackedBarProps } from './Charts';
 
 export { Logo } from './Logo';
 export type { LogoProps } from './Logo';
@@ -13,12 +25,16 @@ export type { IconName } from './Actions';
 export { Divider, Stack, Inline, Grid } from './Layout';
 export type { Spacing } from './Layout';
 export { Metric, KeyValue, DataTable, Pagination } from './Data';
-export type { DataColumn, DataTableProps, TableSort } from './Data';
+export type { DataColumn, DataTableProps, TableSort, PaginationProps } from './Data';
 export { Checkbox, RadioGroup, Switch, Textarea, SearchField, Combobox } from './Forms';
 export type { ComboboxProps } from './Forms';
-export { Dialog, ConfirmDialog, Popover, Menu, Tooltip } from './Overlays';
+export { Dialog, Drawer, ConfirmDialog, Popover, Menu, Tooltip } from './Overlays';
 export type { DialogProps, MenuItem } from './Overlays';
 export { Toast } from './Toast';
+export { SideNav, Breadcrumbs, Steps } from './Navigation';
+export type { NavItem, NavGroup, SideNavProps, BreadcrumbItem, BreadcrumbsProps, StepItem, StepsProps } from './Navigation';
+export { Fieldset, ErrorSummary } from './FormWorkflow';
+export type { FieldsetProps, FieldError, ErrorSummaryProps } from './FormWorkflow';
 
 export { Button, Badge, Surface, SelectionCard, TextField, Tabs, SegmentedControl, Notice, Progress, Skeleton, Disclosure, EmptyState } from './components';
 export type { ButtonProps, Tone, Choice, TabItem } from './components';

package/components/media-parity.css

@@ -0,0 +1,3 @@
+.rhine-media-card__actions { display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 12px; }
+.rhine-media-card__asset { position:absolute; inset:0; }
+.rhine-media-card__asset:not([hidden]) { display:flex; align-items:center; justify-content:center; }

package/components/patterns.css

@@ -0,0 +1,39 @@
+.rhine-side-nav__group { margin-top:var(--rhine-space-4); }
+.rhine-side-nav__group:first-child { margin-top:0; }
+.rhine-side-nav__group>p { margin:0 var(--rhine-space-3) var(--rhine-space-2); font-size:var(--rhine-text-caption); line-height:var(--rhine-leading-caption); color:var(--rhine-muted); }
+.rhine-side-nav ul,.rhine-breadcrumbs ol,.rhine-steps { margin:0; padding:0; list-style:none; }
+.rhine-side-nav ul { display:grid; gap:var(--rhine-space-1); }
+.rhine-side-nav a { min-height:44px; padding:var(--rhine-space-2) var(--rhine-space-3); display:flex; align-items:center; gap:var(--rhine-space-3); border-inline-start:2px solid transparent; border-radius:var(--rhine-radius-control); text-decoration:none; font-size:var(--rhine-text-body); line-height:var(--rhine-leading-body); color:var(--rhine-ink); transition:background-color var(--rhine-duration-hover) var(--rhine-ease-standard); overflow-wrap:anywhere; }
+.rhine-side-nav__label { min-width:0; }
+.rhine-side-nav .rhine-icon { flex-shrink:0; color:var(--rhine-muted); }
+.rhine-side-nav a:hover { background:var(--rhine-bg); }
+.rhine-side-nav a[aria-current=page] { background:var(--rhine-selected); border-color:var(--rhine-green); color:var(--rhine-green); font-weight:600; }
+.rhine-side-nav a[aria-current=page] .rhine-icon { color:var(--rhine-green); }
+.rhine-breadcrumbs ol { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; }
+.rhine-breadcrumbs li { display:flex; align-items:center; gap:12px; min-width:0; overflow-wrap:anywhere; font-size:var(--rhine-text-caption); line-height:var(--rhine-leading-caption); color:var(--rhine-muted); }
+.rhine-breadcrumbs a { display:inline-flex; align-items:center; min-height:44px; color:var(--rhine-green); text-underline-offset:3px; }
+.rhine-breadcrumbs [aria-current=page] { color:var(--rhine-ink); font-weight:600; }
+.rhine-breadcrumbs__separator { color:var(--rhine-control); }
+.rhine-steps { display:grid; gap:0; }
+.rhine-steps li { border-inline-start:2px solid var(--rhine-line); }
+.rhine-steps li>div,.rhine-steps button { display:flex; gap:16px; align-items:flex-start; padding:16px; width:100%; text-align:start; color:var(--rhine-muted); }
+.rhine-steps button { border:0; background:none; font:inherit; cursor:pointer; }
+.rhine-steps button:hover { background:var(--rhine-selected); }
+.rhine-steps strong,.rhine-steps small { display:block; overflow-wrap:anywhere; }
+.rhine-steps small { margin-top:4px; font-size:12px; font-weight:400; }
+.rhine-steps__number { flex:0 0 28px; font:14px/24px var(--rhine-mono); }
+.rhine-steps li[data-state=current],.rhine-steps li[data-state=complete] { border-color:var(--rhine-green); }
+.rhine-steps li[data-state=current]>div { background:var(--rhine-selected); color:var(--rhine-green); animation:rhine-pattern-enter var(--rhine-duration-panel) var(--rhine-ease-standard); }
+.rhine-steps li[data-state=error] { border-color:var(--rhine-error); }
+.rhine-steps li[data-state=error]>div { color:var(--rhine-error); background:var(--rhine-error-bg); }
+.rhine-fieldset { background:var(--rhine-surface-bg); color:var(--rhine-surface-text); min-width:0; margin:0; padding:20px; border:1px solid var(--rhine-line); border-radius:var(--rhine-radius-card); }
+.rhine-fieldset legend { padding:0 8px; font-weight:600; }
+.rhine-fieldset>p { margin:0 0 20px; color:var(--rhine-muted); font-size:12px; }
+.rhine-fieldset__body { display:grid; gap:16px; }
+.rhine-error-summary { padding:20px; border:1px solid var(--rhine-error); border-inline-start:3px solid var(--rhine-error); background:var(--rhine-error-bg); }
+.rhine-error-summary h3 { margin:0 0 8px; font-size:16px; }
+.rhine-error-summary ul { padding-inline-start:20px; margin:0; }
+.rhine-error-summary a { display:inline-block; padding:10px 0; color:var(--rhine-error); text-underline-offset:3px; overflow-wrap:anywhere; }
+.rhine-dialog.rhine-drawer { inset-block:0; inset-inline-end:0; inset-inline-start:auto; width:min(440px,100%); max-height:100dvh; margin:0; transform:none; border-radius:0; animation:rhine-drawer-enter var(--rhine-duration-overlay) var(--rhine-ease-standard); }
+@keyframes rhine-drawer-enter { from { opacity:0; transform:translateX(3px); } to { opacity:1; transform:translateX(0); } }
+@keyframes rhine-pattern-enter { from { opacity:.65; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }