@linhey/rhine-design 0.2.0 → 0.4.0

package/components/Overlays.tsx

@@ -11,14 +11,20 @@ import { IconButton } from './Actions';
 function useScope() {
   const ref = useRef<HTMLSpanElement>(null);
   const [container, setContainer] = useState<HTMLElement>();
-  useLayoutEffect(() => { setContainer((ref.current?.closest('.tod-theme') as HTMLElement) || document.body); }, []);
+  useLayoutEffect(() => { setContainer((ref.current?.closest('.rhine-theme') as HTMLElement) || document.body); }, []);
   return { ref, container };
 }
-export interface DialogProps { trigger: ReactElement; title: string; description: string; children: ReactNode; open?: boolean; onOpenChange?: (open: boolean) => void }
-export function Dialog({ trigger, title, description, children, open, onOpenChange }: DialogProps) {
+export interface DialogProps { trigger: ReactElement; title: string; description: string; children: ReactNode; open?: boolean; onOpenChange?: (open: boolean) => void; sidePanel?: ReactNode | ((closeButton: ReactElement) => ReactNode) }
+export function Dialog(props: DialogProps) {
+  return <DialogFrame {...props}/>;
+}
+export function Drawer(props: Omit<DialogProps, 'sidePanel'>) { return <DialogFrame {...props} drawer />; }
+function DialogFrame({ trigger, title, description, children, open, onOpenChange, sidePanel, drawer = false }: DialogProps & { drawer?: boolean }) {
   const { ref, container } = useScope();
-  return <span className="tod-overlay-anchor" ref={ref}><DialogBase.Root open={open} onOpenChange={onOpenChange}><DialogBase.Trigger asChild>{trigger}</DialogBase.Trigger><DialogBase.Portal container={container}>
-    <DialogBase.Overlay className="tod-overlay" /><DialogBase.Content className="tod-dialog"><div className="tod-dialog__head"><DialogBase.Title className="tod-text tod-text--section">{title}</DialogBase.Title><DialogBase.Close asChild><IconButton label="关闭对话框" icon="close" /></DialogBase.Close></div><DialogBase.Description className="tod-text tod-text--body tod-text--muted">{description}</DialogBase.Description><div className="tod-dialog__body">{children}</div></DialogBase.Content>
+  const sideNavigation = typeof sidePanel === 'function';
+  const closeButton = <DialogBase.Close asChild><IconButton label={drawer ? '关闭抽屉' : '关闭对话框'} icon="close" /></DialogBase.Close>;
+  return <span className="rhine-overlay-anchor" ref={ref}><DialogBase.Root open={open} onOpenChange={onOpenChange}><DialogBase.Trigger asChild>{trigger}</DialogBase.Trigger><DialogBase.Portal container={container}>
+    <DialogBase.Overlay className="rhine-overlay" /><DialogBase.Content className={`rhine-dialog${drawer ? ' rhine-drawer' : ''}${sidePanel ? ' rhine-dialog--split' : ''}${sideNavigation ? ' rhine-dialog--side-navigation' : ''}`}><div className="rhine-dialog__main"><div className="rhine-dialog__head"><DialogBase.Title className="rhine-text rhine-text--section">{title}</DialogBase.Title>{!sideNavigation && closeButton}</div><DialogBase.Description className="rhine-text rhine-text--body rhine-text--muted">{description}</DialogBase.Description><div className="rhine-dialog__body">{children}</div></div>{sidePanel && <div className="rhine-dialog__side">{typeof sidePanel === 'function' ? sidePanel(closeButton) : sidePanel}</div>}</DialogBase.Content>
   </DialogBase.Portal></DialogBase.Root></span>;
 }
 export function ConfirmDialog({ trigger, title, description, confirmLabel = '确认操作', danger = false, onConfirm }: { trigger: ReactElement; title: string; description: string; confirmLabel?: string; danger?: boolean; onConfirm: () => Promise<void> | void }) {
@@ -32,22 +38,22 @@ export function ConfirmDialog({ trigger, title, description, confirmLabel = '确
     catch { if (mounted.current) setError(true); }
     finally { pending.current = false; if (mounted.current) setBusy(false); }
   };
-  return <span className="tod-overlay-anchor" ref={ref}><AlertBase.Root open={open} onOpenChange={next => { if (!pending.current) { setOpen(next); setError(false); } }}><AlertBase.Trigger asChild>{trigger}</AlertBase.Trigger><AlertBase.Portal container={container}><AlertBase.Overlay className="tod-overlay" /><AlertBase.Content className="tod-dialog" aria-busy={busy} onEscapeKeyDown={event => { if (busy) event.preventDefault(); }}>
-    <AlertBase.Title className="tod-text tod-text--section">{title}</AlertBase.Title><AlertBase.Description className="tod-text tod-text--body tod-text--muted">{description}</AlertBase.Description>{error && <Notice tone="error" title="操作未完成">请重试，或取消后检查。</Notice>}
-    <div className="tod-dialog__actions"><AlertBase.Cancel asChild><Button variant="secondary" disabled={busy}>取消</Button></AlertBase.Cancel><Button variant={danger ? 'danger' : 'primary'} busy={busy} onClick={run}>{confirmLabel}</Button></div>
+  return <span className="rhine-overlay-anchor" ref={ref}><AlertBase.Root open={open} onOpenChange={next => { if (!pending.current) { setOpen(next); setError(false); } }}><AlertBase.Trigger asChild>{trigger}</AlertBase.Trigger><AlertBase.Portal container={container}><AlertBase.Overlay className="rhine-overlay" /><AlertBase.Content className="rhine-dialog" aria-busy={busy} onEscapeKeyDown={event => { if (busy) event.preventDefault(); }}>
+    <AlertBase.Title className="rhine-text rhine-text--section">{title}</AlertBase.Title><AlertBase.Description className="rhine-text rhine-text--body rhine-text--muted">{description}</AlertBase.Description>{error && <Notice tone="error" title="操作未完成">请重试，或取消后检查。</Notice>}
+    <div className="rhine-dialog__actions"><AlertBase.Cancel asChild><Button variant="secondary" disabled={busy}>取消</Button></AlertBase.Cancel><Button variant={danger ? 'danger' : 'primary'} busy={busy} onClick={run}>{confirmLabel}</Button></div>
   </AlertBase.Content></AlertBase.Portal></AlertBase.Root></span>;
 }
 interface OverlayControl { open?: boolean; onOpenChange?: (open: boolean) => void; side?: 'top' | 'right' | 'bottom' | 'left' }
 export function Popover({ trigger, title, children, open, onOpenChange, side }: OverlayControl & { trigger: ReactElement; title: string; children: ReactNode }) {
   const { ref, container } = useScope();
-  return <span className="tod-overlay-anchor" ref={ref}><PopoverBase.Root open={open} onOpenChange={onOpenChange}><PopoverBase.Trigger asChild>{trigger}</PopoverBase.Trigger><PopoverBase.Portal container={container}><PopoverBase.Content className="tod-popover" aria-label={title} side={side} sideOffset={8} collisionPadding={12}><div className="tod-dialog__head"><strong>{title}</strong><PopoverBase.Close asChild><IconButton label="关闭详情" icon="close" /></PopoverBase.Close></div>{children}</PopoverBase.Content></PopoverBase.Portal></PopoverBase.Root></span>;
+  return <span className="rhine-overlay-anchor" ref={ref}><PopoverBase.Root open={open} onOpenChange={onOpenChange}><PopoverBase.Trigger asChild>{trigger}</PopoverBase.Trigger><PopoverBase.Portal container={container}><PopoverBase.Content className="rhine-popover" aria-label={title} side={side} sideOffset={8} collisionPadding={12}><div className="rhine-dialog__head"><strong>{title}</strong><PopoverBase.Close asChild><IconButton label="关闭详情" icon="close" /></PopoverBase.Close></div>{children}</PopoverBase.Content></PopoverBase.Portal></PopoverBase.Root></span>;
 }
 export interface MenuItem { id: string; label: string; disabled?: boolean; danger?: boolean; onSelect: () => void }
 export function Menu({ trigger, label, items, open, onOpenChange, side }: OverlayControl & { trigger: ReactElement; label: string; items: MenuItem[] }) {
   const { ref, container } = useScope();
-  return <span className="tod-overlay-anchor" ref={ref}><MenuBase.Root open={open} onOpenChange={onOpenChange}><MenuBase.Trigger asChild>{trigger}</MenuBase.Trigger><MenuBase.Portal container={container}><MenuBase.Content className="tod-menu" aria-label={label} side={side} sideOffset={8} collisionPadding={12}>{items.map(item => <MenuBase.Item key={item.id} disabled={item.disabled} onSelect={item.onSelect} className="tod-menu__item" data-danger={item.danger}>{item.label}</MenuBase.Item>)}</MenuBase.Content></MenuBase.Portal></MenuBase.Root></span>;
+  return <span className="rhine-overlay-anchor" ref={ref}><MenuBase.Root open={open} onOpenChange={onOpenChange}><MenuBase.Trigger asChild>{trigger}</MenuBase.Trigger><MenuBase.Portal container={container}><MenuBase.Content className="rhine-menu" aria-label={label} side={side} sideOffset={8} collisionPadding={12}>{items.map(item => <MenuBase.Item key={item.id} disabled={item.disabled} onSelect={item.onSelect} className="rhine-menu__item" data-danger={item.danger}>{item.label}</MenuBase.Item>)}</MenuBase.Content></MenuBase.Portal></MenuBase.Root></span>;
 }
 export function Tooltip({ children, content, open, onOpenChange, side }: OverlayControl & { children: ReactElement; content: string }) {
   const { ref, container } = useScope();
-  return <span className="tod-overlay-anchor" ref={ref}><TooltipBase.Provider delayDuration={300}><TooltipBase.Root open={open} onOpenChange={onOpenChange}><TooltipBase.Trigger asChild>{children}</TooltipBase.Trigger><TooltipBase.Portal container={container}><TooltipBase.Content className="tod-tooltip" side={side} sideOffset={8} collisionPadding={12}>{content}</TooltipBase.Content></TooltipBase.Portal></TooltipBase.Root></TooltipBase.Provider></span>;
+  return <span className="rhine-overlay-anchor" ref={ref}><TooltipBase.Provider delayDuration={300}><TooltipBase.Root open={open} onOpenChange={onOpenChange}><TooltipBase.Trigger asChild>{children}</TooltipBase.Trigger><TooltipBase.Portal container={container}><TooltipBase.Content className="rhine-tooltip" side={side} sideOffset={8} collisionPadding={12}>{content}</TooltipBase.Content></TooltipBase.Portal></TooltipBase.Root></TooltipBase.Provider></span>;
 }

package/components/README.md

@@ -1,35 +1,43 @@
-# 莱茵设计 · 通用组件 V1.4
+# 莱茵设计 · 通用组件
 
-本目录提供[莱茵设计 · Rhine Design](../README.md)的 React 组件、设计变量和 API 契约。组件接收应用传入的数据与动作，不绑定特定后端或原生平台。包名为`@linhey/rhine-design`；样式变量和类名使用`tod-`命名空间。
+本目录提供[莱茵设计 · 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.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="tod-theme">
+    <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>
   );
 }
 ```
 
-入口 `index.ts` 自动导入组件 CSS。使用一个 `.tod-theme` 包裹组件树，获得字体、盒模型、焦点和动效降级规则。主题根放在页面根部，不加transform、裁剪或contain；浮层Portal挂在最近的主题根以继承变量和减少动态偏好。独立运行与跨项目导入方式见[套件入口](../README.md)；跨仓复用核对React19与套件package.json中的5个Radix依赖，不导入展台。
+入口 `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`：`tod-` 前缀组件样式，业务页面可组合布局但不覆盖组件状态。
+- `styles.css`：`rhine-` 前缀组件样式，业务页面可组合布局但不覆盖组件状态。
 - `components.tsx`：原有基础组件；`Actions/Data/Forms/Layout/Overlays/Toast.tsx`承载新增组件。表单与业务数据由调用方控制，浮层开关、通知计时及复制结果只管理局部交互。
 - `../preview/`：使用同一组件实现的开发预览，独立 HTML 入口，无业务客户端依赖。
 - [index.html](../index.html)：Vite 开发入口，在套件根运行 `npm run dev` 后访问 `http://127.0.0.1:18309/`。
@@ -67,7 +75,7 @@ export function Example() {
 
 启动动画候选见[三角构架归位](./STARTUP.md)与`/#startup`。专属分镜不改变通用Logo入场参数，也不作为真实初始化等待门槛。
 
-用户指定的Transitions.dev参考与莱茵设计取舍见[UX与动效补充](./MOTION.md)。`/#motion`已提供10组播放、重播、复位与4倍慢放示例，可逐例切换减少动态。方向展开、内容淡入与结果反馈仅在实验室作为候选实现；通用默认实现仍以下表和实际组件为准。
+用户指定的Transitions.dev参考与莱茵设计取舍见[UX与动效补充](./MOTION.md)。`/#motion`已提供12组播放、重播、复位与4倍慢放示例，可逐例切换减少动态。方向展开、内容淡入与结果反馈仅在实验室作为候选实现；通用默认实现仍以下表和实际组件为准。
 
 ### 品牌标志
 
@@ -113,11 +121,11 @@ export function Example() {
 | Dialog / ConfirmDialog / Popover / Menu / Tooltip / Combobox | 160ms / standard | opacity，非模态最多3px位移 | 关闭立即归还焦点；Tooltip悬停延迟300ms，键盘无延迟 |
 | Toast | 180ms / standard | opacity + translateY(3px→0) | 成功默认5秒；hover/focus/页面隐藏暂停；错误持久；计时不依赖动画 |
 
-缓动变量：`--tod-ease-standard: cubic-bezier(.2,0,0,1)`；`--tod-ease-exit: cubic-bezier(.4,0,1,1)`。
+缓动变量：`--rhine-ease-standard: cubic-bezier(.2,0,0,1)`；`--rhine-ease-exit: cubic-bezier(.4,0,1,1)`。
 
 ### 降级与中断
 
-- 系统 `prefers-reduced-motion: reduce` 始终优先；组件容器也可用 `data-tod-motion="reduced"` 显式减少动态。
+- 系统 `prefers-reduced-motion: reduce` 始终优先；组件容器也可用 `data-rhine-motion="reduced"` 显式减少动态。
 - 减少动态时过渡与循环动画全部关闭，直接到达最终状态。未知进度保留静态轨迹与「处理中」文字，骨架保留静态结构。
 - Disclosure 的在途 Web Animation 在系统偏好变化或预览切换减少动态时取消并完成当前意图。没有 Web Animations 支持时立即展开/收起。
 - 原生 details 保证完全关闭后隐藏内容不再接收 Tab。收起时把内部焦点送回 summary；卸载取消未完成动画。

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

@@ -10,13 +10,13 @@ export function Select({ label, hint, error, id: providedId, className = '', chi
   const generatedId = useId();
   const id = providedId || generatedId;
   const description = [props['aria-describedby'], hint && `${id}-hint`, error && `${id}-error`].filter(Boolean).join(' ');
-  return <div className={`tod-field ${className}`}>
+  return <div className={`rhine-field ${className}`}>
     <label htmlFor={id}>{label}</label>
-    <div className="tod-select">
+    <div className="rhine-select">
       <select {...props} id={id} aria-invalid={error ? true : props['aria-invalid']} aria-describedby={description || undefined}>{children}</select>
-      <svg className="tod-select__arrow" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="m4 6 4 4 4-4" /></svg>
+      <svg className="rhine-select__arrow" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="m4 6 4 4 4-4" /></svg>
     </div>
-    {hint && <span id={`${id}-hint`} className="tod-field__hint">{hint}</span>}
-    {error && <span id={`${id}-error`} className="tod-field__error" role="alert">{error}</span>}
+    {hint && <span id={`${id}-hint`} className="rhine-field__hint">{hint}</span>}
+    {error && <span id={`${id}-error`} className="rhine-field__error" role="alert">{error}</span>}
   </div>;
 }

package/components/StatusTimeline.tsx

@@ -0,0 +1,29 @@
+import { useId, useState } from 'react';
+import { Text } from './Typography';
+
+export type TimelineStatus = 'healthy' | 'recovered' | 'degraded' | 'failed' | 'unknown';
+export interface TimelineSegment { id: string; label: string; status: TimelineStatus }
+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 }: { label: string; segments: TimelineSegment[]; startLabel: string; endLabel: string; compact?: boolean }) {
+  const [index, setIndex] = useState<number>();
+  const detailId = useId();
+  const selected = Math.min(index ?? segments.length - 1, segments.length - 1);
+  const segment = segments[selected];
+  return <div className={`rhine-timeline${compact ? ' rhine-timeline--compact' : ''}`}>
+    <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 type="range" min={0} max={Math.max(0, segments.length - 1)} value={Math.max(0, selected)} disabled={!segments.length}
+        aria-label={label} aria-valuetext={segment ? `${segment.label} · ${timelineLabels[segment.status]}` : '暂无记录'} aria-describedby={detailId}
+        onChange={event => setIndex(Number(event.target.value))}
+        onPointerMove={event => { if (event.pointerType !== 'mouse' || !segments.length) return; const rect = event.currentTarget.getBoundingClientRect(); setIndex(Math.min(segments.length - 1, Math.max(0, Math.floor((event.clientX - rect.left) / rect.width * segments.length)))); }} />
+    </div>
+    <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="rhine-timeline__detail" variant="caption">{segment ? `${segment.label} · ${timelineLabels[segment.status]}` : '暂无记录'}</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)。
 
 ## 字体与字重
 
@@ -8,7 +8,7 @@
 - 代码与路径：`ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace`。模型 ID、路径、协议值用等宽；普通英文说明仍用界面字体。
 - 常规400、标签500、标题600。避免轻字重、小字号粗细堆叠、650等中间字重和浏览器伪斜体；不全局使用700。Logo字标遵循品牌组件，不作为业务文字模板。
 - 系统字体选择与语义字号层级参考 [Fluent Typography](https://fluent2.microsoft.design/typography)；具体尺寸和中文规则是本项目的设计决策，不复制其全部字号。
-- `.tod-theme` 禁止字体伪造；不同系统的字面宽度可能不同，不能用固定字符串宽度或固定容器高度实现布局。
+- `.rhine-theme` 禁止字体伪造；不同系统的字面宽度可能不同，不能用固定字符串宽度或固定容器高度实现布局。
 
 ## 文字层级
 
@@ -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/Toast.tsx

@@ -16,8 +16,8 @@ export function Toast({ open, onOpenChange, title, description, tone = 'success'
     const started = Date.now(); const timer = setTimeout(() => close.current(false), Math.max(0, remaining.current));
     return () => { clearTimeout(timer); remaining.current = Math.max(0, remaining.current - (Date.now() - started)); };
   }, [open, hover, focus, hidden, tone, duration, title, description]);
-  return <div className="tod-toast-region" aria-label="通知">
-    <div role={tone === 'error' ? 'alert' : 'status'} aria-atomic="true" className={open ? `tod-toast tod-tone-${tone}` : 'tod-sr-only'}
+  return <div className="rhine-toast-region" aria-label="通知">
+    <div role={tone === 'error' ? 'alert' : 'status'} aria-atomic="true" className={open ? `rhine-toast rhine-tone-${tone}` : 'rhine-sr-only'}
       onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} onFocus={() => setFocus(true)} onBlur={event => { if (!event.currentTarget.contains(event.relatedTarget)) setFocus(false); }}>
       {open && <><div><strong>{title}</strong>{description && <p>{description}</p>}</div><IconButton label="关闭通知" icon="close" onClick={() => onOpenChange(false)} /></>}
     </div>

package/components/Toolbar.tsx

@@ -7,8 +7,8 @@ export interface ToolbarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'titl
 
 // A native-control group keeps normal Tab navigation, not toolbar arrow-key semantics.
 export function Toolbar({ title, description, children, className = '', ...props }: ToolbarProps) {
-  return <div {...props} role="group" aria-label={props['aria-label'] || title} className={`tod-toolbar ${className}`}>
-    <div className="tod-toolbar__intro"><strong className="tod-text tod-text--label">{title}</strong>{description && <p className="tod-text tod-text--caption tod-text--muted">{description}</p>}</div>
-    <div className="tod-toolbar__controls">{children}</div>
+  return <div {...props} role="group" aria-label={props['aria-label'] || title} className={`rhine-toolbar ${className}`}>
+    <div className="rhine-toolbar__intro"><strong className="rhine-text rhine-text--label">{title}</strong>{description && <p className="rhine-text rhine-text--caption rhine-text--muted">{description}</p>}</div>
+    <div className="rhine-toolbar__controls">{children}</div>
   </div>;
 }

package/components/Typography.tsx

@@ -9,5 +9,5 @@ export interface TextProps extends HTMLAttributes<HTMLElement> {
 }
 
 export function Text({ as: Element = 'p', variant = 'body', tone = 'default', numeric = false, className = '', ...props }: TextProps) {
-  return <Element {...props} className={`tod-text tod-text--${variant} tod-text--${tone}${numeric ? ' tod-text--numeric' : ''} ${className}`} />;
+  return <Element {...props} className={`rhine-text rhine-text--${variant} rhine-text--${tone}${numeric ? ' rhine-text--numeric' : ''} ${className}`} />;
 }

package/components/common.css

@@ -1,69 +1,78 @@
-.tod-icon { display:inline-block; vertical-align:middle; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
-.tod-icon-button { padding:10px; width:44px; height:44px; flex:none; }
-.tod-link { color:var(--tod-green); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
-.tod-link:hover { text-decoration-thickness:2px; }
-.tod-link>.tod-icon { margin-left:4px; }
-.tod-copy { display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; }
-.tod-copy>[role] { font-size:var(--tod-text-caption); }
-.tod-stack { display:flex; flex-direction:column; min-width:0; }
-.tod-inline { display:flex; align-items:center; flex-wrap:wrap; gap:var(--tod-space-3); min-width:0; }
-.tod-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--tod-grid-min)),1fr)); min-width:0; }
-.tod-grid>*,.tod-stack>* { min-width:0; }
-.tod-divider { border:0; border-top:1px solid var(--tod-line); margin:0; width:100%; }
-.tod-metric { min-width:0; display:grid; gap:8px; align-content:start; }
-.tod-metric__unit { font-size:var(--tod-text-caption); font-weight:400; color:var(--tod-muted); }
-.tod-key-value { margin:0; display:grid; gap:12px; }
-.tod-key-value>div { display:grid; grid-template-columns:minmax(80px,1fr) minmax(0,2fr); gap:16px; }
-.tod-key-value dt { color:var(--tod-muted); font-size:12px; }.tod-key-value dd { margin:0; overflow-wrap:anywhere; }
-.tod-data { display:grid; gap:12px; min-width:0; }
-.tod-table-scroll { overflow:auto; max-width:100%; }
-.tod-table { width:100%; min-width:500px; border-collapse:collapse; text-align:left; font-size:12px; }
-.tod-table caption { text-align:left; font-size:16px; font-weight:600; margin-bottom:16px; }
-.tod-table th,.tod-table td { padding:12px; border-bottom:1px solid var(--tod-line); max-width:240px; overflow-wrap:anywhere; }
-.tod-table th { color:var(--tod-muted); font-weight:500; }.tod-table td { font-variant-numeric:tabular-nums; }
-.tod-table [data-align=right] { text-align:right; }.tod-table tbody tr:hover { background:var(--tod-selected); }
-.tod-table th button { font:inherit; color:inherit; background:none; border:0; min-height:44px; cursor:pointer; padding:0; }
-.tod-table th button:disabled { cursor:default; }
-.tod-pagination { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:12px; }
-.tod-check>label,.tod-radio-group>label { display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; overflow-wrap:anywhere; }
-.tod-check input,.tod-radio-group input { width:18px; height:18px; accent-color:var(--tod-green); flex:none; margin:0; }
-.tod-check input:disabled+span,.tod-radio-group input:disabled+span,.tod-radio-group:disabled span { color:var(--tod-muted); cursor:default; }
-.tod-radio-group { border:0; padding:0; margin:0; min-width:0; }.tod-radio-group legend { font-weight:500; padding:0; }
-.tod-switch label { display:flex; position:relative; align-items:center; gap:12px; min-height:44px; cursor:pointer; }
-.tod-switch input { position:absolute; opacity:0; width:1px; height:1px; }
-.tod-switch__track { display:inline-flex; width:36px; height:22px; border:1px solid var(--tod-control); border-radius:12px; padding:3px; flex:none; background:var(--tod-surface); transition:background-color var(--tod-duration-hover) var(--tod-ease-standard); }
-.tod-switch__track>span { width:14px; height:14px; border-radius:50%; background:var(--tod-muted); transition:transform var(--tod-duration-hover) var(--tod-ease-standard); }
-.tod-switch input:checked+.tod-switch__track { background:var(--tod-green); border-color:var(--tod-green); }
-.tod-switch input:checked+.tod-switch__track>span { transform:translateX(14px); background:var(--tod-surface); }
-.tod-switch input:focus-visible+.tod-switch__track { outline:2px solid var(--tod-green); outline-offset:3px; }
-.tod-switch input:disabled~span { opacity:.6; cursor:default; }
-.tod-field textarea { font:var(--tod-text-body)/var(--tod-leading-body) var(--tod-font); color:var(--tod-ink); background:var(--tod-surface); border:1px solid var(--tod-control); border-radius:var(--tod-radius-control); padding:10px 12px; min-height:88px; resize:vertical; width:100%; transition:border-color var(--tod-duration-hover) var(--tod-ease-standard); }
-.tod-field textarea[aria-invalid=true] { border-color:var(--tod-error); }.tod-field textarea:disabled { color:var(--tod-muted); background:var(--tod-selected); }
-.tod-search>.tod-inline>input { flex:1 1 140px; width:auto; }.tod-search input::-webkit-search-cancel-button { appearance:none; }
-.tod-combobox { position:relative; }
-.tod-combobox__input { position:relative; }.tod-combobox__input input { padding-right:40px; }
-.tod-combobox__arrow { position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; }
-.tod-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(--tod-surface); color:var(--tod-ink); border:1px solid var(--tod-control); border-radius:4px; box-shadow:0 8px 24px #242b2818; }
-.tod-combobox__list [role=option],.tod-combobox__empty { padding:12px; min-height:44px; cursor:pointer; overflow-wrap:anywhere; }
-.tod-combobox__list [role=option][data-active=true],.tod-combobox__list [role=option][aria-selected=true] { background:var(--tod-selected); }
-.tod-combobox__list [role=option][aria-disabled=true],.tod-combobox__empty { color:var(--tod-muted); cursor:default; }
-.tod-overlay-anchor { display:inline-block; vertical-align:middle; max-width:100%; }
-.tod-overlay { position:fixed; inset:0; background:#242b2870; z-index:40; }
-.tod-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(--tod-line); border-radius:4px; background:var(--tod-surface); color:var(--tod-ink); box-shadow:0 16px 48px #242b2826; }
-.tod-dialog>p { margin-top:12px; }.tod-dialog>.tod-notice { margin-top:16px; }
-.tod-dialog__head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
-.tod-dialog__head>:first-child { min-width:0; overflow-wrap:anywhere; }
-.tod-dialog__body { margin-top:24px; }.tod-dialog__actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:12px; margin-top:24px; }
-.tod-popover,.tod-menu { z-index:50; background:var(--tod-surface); color:var(--tod-ink); border:1px solid var(--tod-control); border-radius:4px; box-shadow:0 8px 24px #242b2820; max-width:calc(100vw - 24px); overflow:auto; }
-.tod-popover { width:300px; padding:16px; max-height:var(--radix-popover-content-available-height); }
-.tod-menu { min-width:180px; max-height:var(--radix-dropdown-menu-content-available-height); padding:4px; }
-.tod-menu__item { min-height:44px; padding:10px 12px; cursor:pointer; outline:none; overflow-wrap:anywhere; }
-.tod-menu__item[data-highlighted] { background:var(--tod-selected); box-shadow:inset 0 0 0 2px var(--tod-green); }
-.tod-menu__item[data-disabled] { color:var(--tod-muted); cursor:default; }.tod-menu__item[data-danger=true] { color:var(--tod-error); }
-.tod-tooltip { z-index:60; background:var(--tod-ink); color:var(--tod-surface); padding:8px 12px; border-radius:3px; max-width:min(280px,calc(100vw - 24px)); font-size:12px; line-height:18px; overflow-wrap:anywhere; }
-.tod-toast-region { position:relative; }.tod-toast { display:flex; align-items:start; gap:12px; justify-content:space-between; padding:16px; background:var(--tod-tone-bg); border-left:3px solid var(--tod-tone); color:var(--tod-ink); animation:tod-enter var(--tod-duration-panel) var(--tod-ease-standard); }
-.tod-toast p { margin:4px 0 0; overflow-wrap:anywhere; }.tod-toast strong { overflow-wrap:anywhere; }.tod-toast>div { min-width:0; }
-.tod-dialog[data-state=open],.tod-overlay[data-state=open] { animation:tod-overlay-fade var(--tod-duration-overlay) var(--tod-ease-standard); }
-.tod-popover[data-state=open],.tod-menu[data-state=open],.tod-combobox__list[data-state=open],.tod-tooltip[data-state=delayed-open],.tod-tooltip[data-state=instant-open] { animation:tod-enter var(--tod-duration-overlay) var(--tod-ease-standard); }
-@keyframes tod-overlay-fade { from { opacity:0; } to { opacity:1; } }
-@media(forced-colors:active) { .tod-switch__track { border-color:ButtonText; }.tod-switch input:checked+.tod-switch__track { background:Highlight; }.tod-switch__track>span { background:ButtonText; }.tod-switch input:checked+.tod-switch__track>span { background:HighlightText; }.tod-dialog,.tod-tooltip,.tod-menu,.tod-popover { border:1px solid CanvasText; } }
+.rhine-icon { display:inline-block; vertical-align:middle; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
+.rhine-icon-button { padding:10px; width:44px; height:44px; flex:none; }
+.rhine-link { color:var(--rhine-green); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
+.rhine-link:hover { text-decoration-thickness:2px; }
+.rhine-link>.rhine-icon { margin-left:4px; }
+.rhine-copy { display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; }
+.rhine-copy>[role] { font-size:var(--rhine-text-caption); }
+.rhine-stack { display:flex; flex-direction:column; min-width:0; }
+.rhine-inline { display:flex; align-items:center; flex-wrap:wrap; gap:var(--rhine-space-3); min-width:0; }
+.rhine-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--rhine-grid-min)),1fr)); min-width:0; }
+.rhine-grid>*,.rhine-stack>* { min-width:0; }
+.rhine-divider { border:0; border-top:1px solid var(--rhine-line); margin:0; width:100%; }
+.rhine-metric { min-width:0; display:grid; gap:8px; align-content:start; }
+.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: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: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 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; }
+.rhine-check>label,.rhine-radio-group>label { display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; overflow-wrap:anywhere; }
+.rhine-check input,.rhine-radio-group input { width:18px; height:18px; accent-color:var(--rhine-green); flex:none; margin:0; }
+.rhine-check input:disabled+span,.rhine-radio-group input:disabled+span,.rhine-radio-group:disabled span { color:var(--rhine-muted); cursor:default; }
+.rhine-radio-group { border:0; padding:0; margin:0; min-width:0; }.rhine-radio-group legend { font-weight:500; padding:0; }
+.rhine-switch label { display:flex; position:relative; align-items:center; gap:12px; min-height:44px; cursor:pointer; }
+.rhine-switch input { position:absolute; opacity:0; width:1px; height:1px; }
+.rhine-switch__track { display:inline-flex; width:36px; height:22px; border:1px solid var(--rhine-control); border-radius:12px; padding:3px; flex:none; background:var(--rhine-surface); transition:background-color var(--rhine-duration-hover) var(--rhine-ease-standard); }
+.rhine-switch__track>span { width:14px; height:14px; border-radius:50%; background:var(--rhine-muted); transition:transform var(--rhine-duration-hover) var(--rhine-ease-standard); }
+.rhine-switch input:checked+.rhine-switch__track { background:var(--rhine-green); border-color:var(--rhine-green); }
+.rhine-switch input:checked+.rhine-switch__track>span { transform:translateX(14px); background:var(--rhine-surface); }
+.rhine-switch input:focus-visible+.rhine-switch__track { outline:2px solid var(--rhine-green); outline-offset:3px; }
+.rhine-switch input:disabled~span { opacity:.6; cursor:default; }
+.rhine-field textarea { font:var(--rhine-text-body)/var(--rhine-leading-body) var(--rhine-font); color:var(--rhine-ink); background:var(--rhine-surface); border:1px solid var(--rhine-control); border-radius:var(--rhine-radius-control); padding:10px 12px; min-height:88px; resize:vertical; width:100%; transition:border-color var(--rhine-duration-hover) var(--rhine-ease-standard); }
+.rhine-field textarea[aria-invalid=true] { border-color:var(--rhine-error); }.rhine-field textarea:disabled { color:var(--rhine-muted); background:var(--rhine-selected); }
+.rhine-search>.rhine-inline>input { flex:1 1 140px; width:auto; }.rhine-search input::-webkit-search-cancel-button { appearance:none; }
+.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 [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,.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 { 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; }
+.rhine-menu__item[data-highlighted] { background:var(--rhine-selected); box-shadow:inset 0 0 0 2px var(--rhine-green); }
+.rhine-menu__item[data-disabled] { color:var(--rhine-muted); cursor:default; }.rhine-menu__item[data-danger=true] { color:var(--rhine-error); }
+.rhine-tooltip { z-index:60; background:var(--rhine-ink); color:var(--rhine-surface); padding:8px 12px; border-radius:3px; max-width:min(280px,calc(100vw - 24px)); font-size:12px; line-height:18px; overflow-wrap:anywhere; }
+.rhine-toast-region { position:relative; }.rhine-toast { display:flex; align-items:start; gap:12px; justify-content:space-between; padding:16px; background:var(--rhine-tone-bg); border-left:3px solid var(--rhine-tone); color:var(--rhine-ink); animation:rhine-enter var(--rhine-duration-panel) var(--rhine-ease-standard); }
+.rhine-toast p { margin:4px 0 0; overflow-wrap:anywhere; }.rhine-toast strong { overflow-wrap:anywhere; }.rhine-toast>div { min-width:0; }
+.rhine-dialog[data-state=open],.rhine-overlay[data-state=open] { animation:rhine-overlay-fade var(--rhine-duration-overlay) var(--rhine-ease-standard); }
+.rhine-popover[data-state=open],.rhine-menu[data-state=open],.rhine-combobox__list[data-state=open],.rhine-tooltip[data-state=delayed-open],.rhine-tooltip[data-state=instant-open] { animation:rhine-enter var(--rhine-duration-overlay) var(--rhine-ease-standard); }
+@keyframes rhine-overlay-fade { from { opacity:0; } to { opacity:1; } }
+@media(forced-colors:active) { .rhine-switch__track { border-color:ButtonText; }.rhine-switch input:checked+.rhine-switch__track { background:Highlight; }.rhine-switch__track>span { background:ButtonText; }.rhine-switch input:checked+.rhine-switch__track>span { background:HighlightText; }.rhine-dialog,.rhine-tooltip,.rhine-menu,.rhine-popover { border:1px solid CanvasText; } }