@linhey/rhine-design 0.0.0-stage → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# 版本记录
+
+## 0.2.0
+
+- 定位为个人通用设计系统 linhay/rhine-design，独立迭代。
+- 包名由 @tod-ai/design-kit 改为 @linhey/rhine-design；更新安装记录、导入语句与固定版本，不提供旧名别名。
+- 通用规范与演示移除特定产品定位；原产品页面、历史图稿和专属规范移回消费项目，Git历史保留。
+- Logo默认字标与可访问名称改为Rhine Design，新增wordmark配置；自定义文字须显式传入。
+- 保留三角几何、动画配方与tod-样式命名空间。
+- 配置公开 npm 分发，随包提供 rhine-design skill、任务/API 索引与接入指引；发布状态以 registry 为准。
+- GitHub 仓库公开，安装文档改用无需认证的 HTTPS 克隆方式。
+- 采用 Apache-2.0 许可证，补齐 LICENSE、NOTICE 和贡献指南；README 面向外部开发者组织接入文档。
+
+## 0.1.0
+
+首次独立提取：40组件、字体规范、10组动效与启动演示，独立测试与构建。旧产品专属定位已由0.2.0取代。

package/CONTRIBUTING.md

@@ -0,0 +1,44 @@
+# 参与 Rhine Design
+
+欢迎通过 Issue 或 Pull Request 改进组件、设计规范、文档和示例。
+
+## 本地开发
+
+使用 Node 24 与 npm：
+
+```sh
+git clone https://github.com/linhay/rhine-design.git
+cd rhine-design
+npm ci
+npm run dev
+```
+
+展台地址为 `http://127.0.0.1:18309/`。`components/` 是组件源码与契约，`preview/` 使用同一组件演示交互，`tests/` 验证组件行为，`skills/rhine-design/` 提供 AI 助手的检索入口。
+
+## 修改组件
+
+优先组合已有组件和 tokens。新增能力时，同步更新组件契约与展台示例，展示相关的默认、禁用、加载、错误和长文本状态。使用语义化 HTML，保证键盘操作和焦点行为，并提供减少动态效果。
+
+运行检查：
+
+```sh
+npm run check
+```
+
+它包含测试、类型检查、展台构建和 CSS/SVG 产物检查。视觉变化还需检查 400/520/880 宽度、200% 缩放和相关交互。纯文档修改检查链接与示例即可。
+
+`dist/` 是展台构建结果；包导出源码。修改打包配置时，请在仓库外安装实际 tarball 验证。不要删除入口和 CSS 的 `sideEffects`；Logo 依赖 SVG `?no-inline`。本地链接消费项目时，Vite 使用 `resolve.dedupe: ['react', 'react-dom']` 避免重复 React。
+
+## 文档与 AI skill
+
+README 面向首次接触项目的开发者，优先解释用途、安装、示例、兼容性和文档入口。维护者操作放在专门文档中。
+
+组件 API 变更时，更新契约、示例以及 skill 的 `references/API_MAP.md` 或 `TASK_MAP.md`。索引指向真实源码，不复制第二份 API 定义；skill 的版本信息随包版本更新。
+
+## 提交 Pull Request
+
+说明解决的问题、变更后的行为，以及已执行的验证。涉及视觉或动效时附上截图或录屏；涉及破坏性 API 变更时提供迁移说明并更新 [CHANGELOG](CHANGELOG.md)。
+
+问题反馈请提供包版本、组件名、预期与实际行为、最小复现。删除复现中的私人数据和凭据。
+
+维护者发布步骤见 [RELEASING](docs/RELEASING.md)。项目采用 [Apache-2.0](LICENSE) 许可证。

package/LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/NOTICE

@@ -0,0 +1,4 @@
+Rhine Design
+Copyright 2026 linhay
+
+Licensed under the Apache License, Version 2.0.

package/README.md

@@ -1,3 +1,145 @@
-# Temporary Holding Version
+<p align="center">
+  <img src="components/assets/logo.svg" width="96" height="96" alt="Rhine Design 三角构架标志" />
+</p>
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+<h1 align="center">莱茵设计 · Rhine Design</h1>
+
+<p align="center">暖白与苔绿，三角与细线。让界面拥有清晰的秩序与克制的节奏。</p>
+
+<p align="center">
+  <a href="#quick-start">快速接入</a> ·
+  <a href="#components">组件</a> ·
+  <a href="#documentation">设计规范</a> ·
+  <a href="#ai-skills">AI Skills</a> ·
+  <a href="CONTRIBUTING.md">参与贡献</a> ·
+  <a href="CHANGELOG.md">版本记录</a>
+</p>
+
+Rhine Design 是面向 React 应用的开源设计系统，适合桌面工具、管理界面和数据密集型应用。它将设计规范、40 个组件和动效示例放在一起，帮助团队建立一致、可复用的界面语言。
+
+- **一致的视觉语言**：色彩、字体、文字层级、间距、几何与焦点规则。
+- **40 个可组合组件**：覆盖布局、表单、数据、导航、浮层和反馈。
+- **可验证的动效**：10 组播放 / 重播 / 复位演示，以及三角构架启动编排。
+- **面向开发协作**：组件契约、交互展台和 AI skill 帮助设计与实现保持一致。
+
+基于 React 与 Radix UI，采用 [Apache-2.0](LICENSE) 许可证。
+
+<a id="quick-start"></a>
+
+## 快速接入
+
+需要 **React 19**。当前已验证的构建环境为 **Vite**，开发建议使用 **Node 24**。
+
+首次 npm 发布尚未完成，目前可在你的 React 项目中通过公开仓库安装：
+
+```sh
+npm install git+https://github.com/linhay/rhine-design.git
+```
+
+包的导入名称为 `@linhey/rhine-design`。正式项目建议在 Git URL 后附加 `#<commit>` 固定源码版本，并提交 lockfile。
+
+```tsx
+import { Button, Stack, Surface, Text } from '@linhey/rhine-design';
+
+export function Welcome() {
+  return (
+    <div className="tod-theme">
+      <Surface>
+        <Stack gap={4}>
+          <Text as="h1" variant="title">开始新的工作</Text>
+          <Text tone="muted">用统一的组件，构建属于你的工作空间。</Text>
+          <Button onClick={() => { /* 在这里处理点击 */ }}>继续</Button>
+        </Stack>
+      </Surface>
+    </div>
+  );
+}
+```
+
+入口自动加载样式，用 `.tod-theme` 包裹页面即可使用默认主题。布局和颜色变量使用 `--tod-*` 前缀；完整定义见 [tokens.css](components/tokens.css)。
+
+### 兼容范围
+
+- 包导出 TS/TSX、CSS 和 SVG 源码，构建器需支持 CSS 导入与 Vite 的 SVG `?no-inline` 引用；目前未验证其他构建器和 SSR。
+- 浮层挂载到最近的 `.tod-theme`。请将主题根放在页面根部，避免对它使用 `transform`、裁剪或 `contain`。
+- 组件提供呈现与交互，应用负责数据请求、搜索、分页和操作结果。
+- 当前提供默认暖白主题；Logo 支持独立的深浅配色，完整组件深色主题尚未提供。
+
+<a id="components"></a>
+
+## 组件
+
+| 类别 | 组件 |
+| --- | --- |
+| 品牌与文字 | Logo · Text |
+| 操作 | Button · Icon · IconButton · Link · CopyButton |
+| 布局 | Surface · Toolbar · Divider · Stack · Inline · Grid |
+| 表单与选择 | TextField · Textarea · Select · Checkbox · RadioGroup · Switch · SearchField · Combobox · SelectionCard |
+| 导航与展开 | Tabs · SegmentedControl · Disclosure |
+| 数据 | Metric · KeyValue · DataTable · Pagination |
+| 浮层 | Dialog · ConfirmDialog · Popover · Menu · Tooltip |
+| 状态与反馈 | Badge · Notice · Toast · Progress · Skeleton · EmptyState |
+
+参数、状态和组合示例见[组件 API](components/README.md)与[常用组件契约](components/COMMON_COMPONENTS.md)。
+
+<a id="documentation"></a>
+
+## 设计规范与展台
+
+| 主题 | 文档 | 本地展台锚点 |
+| --- | --- | --- |
+| 视觉基础与组合原则 | [设计规范](docs/DESIGN_SYSTEM.md) | `/#foundation` |
+| 字体、文字层级与数值 | [Typography](components/TYPOGRAPHY.md) | `/#typography` |
+| 品牌几何与 Logo | [Logo 契约](components/README.md#品牌标志) | `/#brand` |
+| 动效、交互与减少动态 | [Motion](components/MOTION.md) | `/#motion` |
+| 启动动画与就绪衔接 | [Startup](components/STARTUP.md) | `/#startup` |
+| 系统覆盖与演进方向 | [组件系统对照](docs/DESIGN_SYSTEM_AUDIT.md) | — |
+
+本地展台包含组件状态、键盘操作、长文本、加载与错误示例。动效可播放、重播、复位和慢放，并支持减少动态模式。
+
+```sh
+git clone https://github.com/linhay/rhine-design.git
+cd rhine-design
+npm ci
+npm run dev
+```
+
+打开 `http://127.0.0.1:18309/`，使用上表中的锚点访问对应章节。
+
+<a id="ai-skills"></a>
+
+## AI Skills
+
+[`rhine-design` skill](skills/rhine-design/SKILL.md) 帮助 AI 编程助手查找组件 API、遵循字体与动效规范，并优先复用已有组件。它适用于支持 `SKILL.md` 的工具；Codex 可通过 `$rhine-design` 调用。
+
+安装组件包后，在你的项目根目录执行：
+
+```sh
+mkdir -p .agents/skills
+cp -R node_modules/@linhey/rhine-design/skills/rhine-design .agents/skills/
+```
+
+然后向助手提出具体任务，例如：
+
+> 使用 $rhine-design 设计一个设置页面，包含搜索、选项开关和保存反馈；复用现有组件，并提供键盘操作与减少动态效果。
+
+skill 中提供以下参考入口：
+
+| 文件 | 用途 |
+| --- | --- |
+| [SKILL.md](skills/rhine-design/SKILL.md) | 使用范围、设计先行流程、版本与源码定位 |
+| [TASK_MAP.md](skills/rhine-design/references/TASK_MAP.md) | 按字体、表单、数据、浮层、动效等任务选择规范 |
+| [API_MAP.md](skills/rhine-design/references/API_MAP.md) | 按组件名定位真实实现和公开入口 |
+| [integration.md](skills/rhine-design/references/integration.md) | 主题、构建、数据所有权与迁移注意事项 |
+
+升级组件时请同步更新 skill；如果已做本地定制，先比较差异再合并。其他工具请将同一 skill 目录放入其支持的技能路径。
+
+## 参与贡献
+
+欢迎提交问题、文档改进和组件提案。遇到问题时，请在 [Issues](https://github.com/linhay/rhine-design/issues) 提供组件名、版本、预期行为及最小复现。
+
+开发环境、验证命令和 PR 说明见 [贡献指南](CONTRIBUTING.md)。版本变化和升级说明见 [CHANGELOG](CHANGELOG.md)。
+
+## 许可证
+
+[Apache License 2.0](LICENSE)。版权声明见 [NOTICE](NOTICE)。第三方依赖遵循各自的许可证。

package/components/Actions.tsx

@@ -0,0 +1,40 @@
+import { forwardRef, useEffect, useRef, useState, type AnchorHTMLAttributes, type ButtonHTMLAttributes } from 'react';
+import { Button } from './components';
+
+const paths = {
+  close: 'm5 5 10 10M15 5 5 15',
+  chevronDown: 'm5 8 5 5 5-5',
+  chevronLeft: 'm12 5-5 5 5 5',
+  chevronRight: 'm8 5 5 5-5 5',
+  copy: 'M7 7h9v10H7zM4 13H3V3h9v1',
+  refresh: 'M16 7A6 6 0 1 0 16 13M16 3v4h-4',
+  search: 'M8.5 3a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11M13 13l4 4',
+  info: 'M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16M10 9v5M10 6v.5',
+  external: 'M11 3h6v6M17 3 9 11M7 3H3v14h14v-4',
+  check: 'm4 10 4 4 8-8',
+  more: 'M4 10h.1M10 10h.1M16 10h.1',
+} as const;
+export type IconName = keyof typeof paths;
+export function Icon({ name, size = 20 }: { name: IconName; size?: 16 | 20 }) {
+  return <svg className="tod-icon" width={size} height={size} viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d={paths[name]} /></svg>;
+}
+export const IconButton = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement> & { label: string; icon: IconName }>(function IconButton({ label, icon, className = '', type = 'button', ...props }, ref) {
+  return <button {...props} ref={ref} type={type} aria-label={label} className={`tod-button tod-button--quiet tod-icon-button ${className}`}><Icon name={icon} /></button>;
+});
+export function Link({ children, className = '', target, rel, ...props }: AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }) {
+  return <a {...props} target={target} rel={target === '_blank' ? `${rel || ''} noopener noreferrer`.trim() : rel} className={`tod-link ${className}`}>{children}{target === '_blank' && <><Icon name="external" size={16} /><span className="tod-sr-only">（新窗口打开）</span></>}</a>;
+}
+export function CopyButton({ value, label = '复制', copy = text => navigator.clipboard.writeText(text) }: { value: string; label?: string; copy?: (value: string) => Promise<void> }) {
+  const [status, setStatus] = useState<'idle' | 'busy' | 'success' | 'error'>('idle');
+  const pending = useRef(false);
+  const epoch = useRef(0);
+  useEffect(() => { epoch.current++; pending.current = false; setStatus('idle'); return () => { epoch.current++; }; }, [value]);
+  const run = async () => {
+    if (pending.current) return;
+    pending.current = true; const request = epoch.current; setStatus('busy');
+    try { await copy(value); if (request === epoch.current) setStatus('success'); }
+    catch { if (request === epoch.current) setStatus('error'); }
+    finally { if (request === epoch.current) pending.current = false; }
+  };
+  return <span className="tod-copy"><Button variant="secondary" busy={status === 'busy'} busyLabel="正在复制" onClick={run}><Icon name="copy" size={16} /> {label}</Button><span role={status === 'error' ? 'alert' : 'status'} className={status === 'error' ? 'tod-text--error' : 'tod-text--muted'}>{status === 'success' ? '已复制' : status === 'error' ? '复制失败，请重试' : ''}</span></span>;
+}

package/components/COMMON_COMPONENTS.md

@@ -0,0 +1,70 @@
+# 莱茵设计 · 常用组件契约 V1.4
+
+本文件定义[莱茵设计](../README.md)的常用组件契约。先固定契约和组件展台，再验证；默认优先复用本目录，页面先改设计稿，再按授权接入App。具体业务由宿主定义，不进入通用契约。
+
+## 范围与契约
+
+| 组件 | 最小职责与边界 |
+| --- | --- |
+| Metric | 标题、值、单位、说明、loading/unknown；不计算或格式化金额 |
+| KeyValue | 原生dl键值信息；值允许换行，不隐藏长标识 |
+| DataTable | 原生表格、caption、行键、列定义、加载/空/失败、排序事件；不本地筛选排序分页 |
+| Pagination | 受控页码、总数、每页大小、加载禁用；总数未知时只依赖hasNext |
+| Link | 原生链接，区分跳转与按钮动作，外部新窗口标识 |
+| Icon / IconButton | 少量常用16/20px线性图标、44px操作目标、可访问名称 |
+| CopyButton | 显式点击后复制；等待真实Promise成功才提示，失败可重试；可注入原生clipboard适配器 |
+| Checkbox | 原生复选框、混合态、label/hint；选中由调用方控制 |
+| RadioGroup | fieldset/legend与原生radio，独立组名、禁用项、键盘导航 |
+| Switch | 原生checkbox加switch语义；只用于二元偏好，不替代账号选择 |
+| Textarea | 可见label、hint/error、只读/禁用；允许垂直调整，不做富文本 |
+| SearchField | 受控输入；提交/清空事件；中文输入法组合中不提交，不触发隐式全量本地过滤 |
+| Combobox | 受控查询与选中值；候选由调用方返回；方向键/Enter/Escape，IME保护，加载/无结果/错误 |
+| Tooltip | 鼠标与键盘说明、Escape、可悬停；不可放交互控件或关键信息 |
+| Toast | 单条通知、关闭；成功可定时、警告错误持久；hover/focus/页面隐藏暂停计时，无全局队列 |
+| Dialog / ConfirmDialog | 标题描述、焦点限制及归还、Escape、滚动；确认默认聚焦取消，异步失败保留内容 |
+| Popover | 按钮触发非模态详情、边缘避让、Escape与焦点归还；不替代Tooltip |
+| Menu | 操作项/禁用/危险项；方向键/Home/End/输入字符跳转；不是表单选择器 |
+| Divider / Stack / Inline / Grid | 语义分隔线、纵排、可换行横排、自适应网格；只消费间距tokens |
+
+共24个新增组件，与已有16个合计40个。复杂浮层使用Radix无样式基础，避免维护重复焦点/菜单/碰撞实现；样式由Rhine Design定义。原生表单、数据与布局不引入额外框架。
+
+## 动效与状态
+
+补充参考：[Transitions.dev UX与动效映射](./MOTION.md)。方向感知菜单、内容衔接与结果淡入已在`#motion`展台提供播放/重播候选；尚未推广到通用默认或App，以下为现有组件基线。
+
+- 输入/按钮/选择器沿用120ms交互；Switch滑块120ms，不延迟checked；焦点即时。
+- 浮层进入160ms，opacity与最多3px位移；模态缩放不作用于文字。关闭立即恢复焦点，不等待退出动画。Tooltip延迟300ms，focus无需等待；减少动态去除视觉过渡。
+- Toast进入180ms，成功默认5秒后关闭；计时与视觉动画独立，减少动态不使通知瞬间消失。
+- 指标不滚动计数，表格不做逐行飞入。加载保留已有数据，未知不显示0；分页动作不移动键盘焦点。
+- Portal浮层保持同一字体、颜色与减少动态偏好；在嵌套Dialog内的浮层不得被底层页面遮挡。
+
+## 接入契约
+
+统一从 套件的`components/index.ts` 导入，并在页面根部使用 `.tod-theme`。主题根不要放在带transform、overflow裁剪或contain的局部面板；浮层挂到最近主题根，保持token和减少动态偏好。Dialog、Popover、Menu的trigger与Tooltip的children必须是单个可聚焦、可接收ref和事件的元素；使用Button/IconButton即可。Dialog受控时必须同时传open与onOpenChange。
+
+```tsx
+<Stack gap={4}>
+  <Grid minWidth={180}>
+    <Metric label="请求次数" value={stats?.requests ?? null} />
+    <Metric label="预估费用" value={formattedCost} description="包含未计价请求" />
+  </Grid>
+  <DataTable caption="请求明细" rows={rows} rowKey={row => row.id}
+    columns={columns} loading={loading} error={error}
+    sort={sort} onSortChange={requestSort} onRetry={reload} />
+  <Pagination page={page} pageSize={10} total={total}
+    loading={loading} onPageChange={requestPage} />
+</Stack>
+```
+
+示例中的数据与回调由业务层提供。DataTable的columns使用`key/header/render`，可指定`align`与`sortable`；排序回传`{key, direction: 'asc' | 'desc'}`，不会改动rows。Pagination的page从1开始，pageSize须为正整数；total未知时省略并传hasNext，不臆造页数。KeyValue使用`items[{key,label,value}]`；Metric的null/undefined显示未知，0原样保留。
+
+- SearchField传`value/onValueChange/onSearch`；Enter或搜索按钮提交，清空回传空查询。Combobox传`query/onQueryChange/value/onValueChange/options`；options为`{value,label,disabled?}`，查询输入与选中ID分开管理。业务层负责服务端搜索、防抖、取消与过期结果保护，组件不拉全量过滤。
+- Checkbox接受原生input属性及indeterminate；混合状态在点击后应由调用方重算，不使用readOnly模拟锁定（原生checkbox无只读行为）。RadioGroup与Switch都是受控，Textarea沿用原生readOnly和disabled语义。
+- CopyButton接受`value/label/copy?`，copy适配器返回Promise。等待成功后提示；value变化后忽略旧请求结果，错误不暴露异常正文。宿主原生平台接入应提供平台适配器并做真实剪贴板验收。
+- ConfirmDialog的`onConfirm`返回void或Promise；等待时阻止再次确认、取消和Escape，成功后关闭，失败保留内容供重试。任务超时/取消能力由业务回调负责，不让Promise无限悬挂。默认焦点在取消按钮。
+- Toast由`open/onOpenChange/title/description/tone/duration`控制；默认5秒，duration≤0常驻，warning/error始终常驻。重复打开同一条已打开通知不会重置计时；要作为新通知应更换key或先关闭。不要把凭证、异常正文等敏感数据放进通知。
+- Stack/Inline/Grid的gap取`1/2/3/4/6/8/12`，对应间距token；Grid的minWidth以px计，窄容器自动收缩。Icon的name使用导出IconName类型，不以自由文本插入SVG。
+
+## 设计展台验收
+
+展示40组件的真实实现；新增数据、表单、操作/布局、反馈/浮层四组。合成数据只演示事件与状态；Clipboard仅复制明确的演示字符串。测试覆盖分页边界、请求状态、异步复制失败、IME、候选列表、通知计时、浮层焦点/Escape与窄窗；原生宿主原生平台和屏幕阅读器仍需App接入后单独验收。

package/components/Data.tsx

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+import { Button, EmptyState, Notice, Skeleton } from './components';
+import { Text } from './Typography';
+
+export function Metric({ label, value, unit, description, loading = false }: { label: string; value: ReactNode; unit?: string; description?: string; loading?: boolean }) {
+  return <div className="tod-metric" aria-busy={loading}><Text variant="caption" tone="muted">{label}</Text>{loading ? <Skeleton lines={1} label={`正在读取${label}`} /> : <Text variant="metric">{value ?? '—'}{unit && <span className="tod-metric__unit"> {unit}</span>}</Text>}{description && <Text variant="caption" tone="muted">{description}</Text>}</div>;
+}
+export function KeyValue({ items }: { items: { key: string; label: string; value: ReactNode }[] }) {
+  return <dl className="tod-key-value">{items.map(item => <div key={item.key}><dt>{item.label}</dt><dd>{item.value ?? '—'}</dd></div>)}</dl>;
+}
+export interface DataColumn<T> { key: string; header: string; render: (row: T) => ReactNode; align?: 'left' | 'right'; sortable?: boolean }
+export interface TableSort { key: string; direction: 'asc' | 'desc' }
+export interface DataTableProps<T> {
+  caption: string; columns: DataColumn<T>[]; rows: T[]; rowKey: (row: T) => string;
+  loading?: boolean; error?: string; emptyTitle?: string; sort?: TableSort;
+  onSortChange?: (sort: TableSort) => void; onRetry?: () => void;
+}
+export function DataTable<T>({ caption, columns, rows, rowKey, loading = false, error, emptyTitle = '暂无记录', sort, onSortChange, onRetry }: DataTableProps<T>) {
+  return <div className="tod-data" aria-busy={loading}>
+    {error && <Notice tone="error" title="读取失败" action={onRetry && <Button variant="secondary" onClick={onRetry} disabled={loading}>重试</Button>}>{error}{rows.length > 0 && ' · 以下保留上次读取的记录。'}</Notice>}
+    {loading && <p role="status" className="tod-text tod-text--caption tod-text--muted">{rows.length ? '正在刷新，保留当前记录…' : '正在读取…'}</p>}
+    <div className="tod-table-scroll" role="region" aria-label={`${caption}，可横向滚动`} tabIndex={0}>
+      <table className="tod-table"><caption>{caption}</caption><thead><tr>{columns.map(column => <th scope="col" key={column.key} data-align={column.align} aria-sort={column.sortable ? sort?.key === column.key ? sort.direction === 'asc' ? 'ascending' : 'descending' : 'none' : undefined}>{column.sortable && onSortChange ? <button type="button" disabled={loading} onClick={() => onSortChange({ key: column.key, direction: sort?.key === column.key && sort.direction === 'asc' ? 'desc' : 'asc' })}>{column.header}<span aria-hidden="true">{sort?.key === column.key ? sort.direction === 'asc' ? ' ↑' : ' ↓' : ' ↕'}</span></button> : column.header}</th>)}</tr></thead>
+      <tbody>{rows.map(row => <tr key={rowKey(row)}>{columns.map(column => <td key={column.key} data-align={column.align}>{column.render(row) ?? '—'}</td>)}</tr>)}</tbody></table>
+    </div>
+    {!rows.length && !loading && !error && <EmptyState title={emptyTitle} description="当前条件下没有可展示的数据。" />}
+  </div>;
+}
+export function Pagination({ page, pageSize, total, hasNext = false, loading = false, onPageChange }: {
+  page: number; pageSize: number; total?: number; hasNext?: boolean; loading?: boolean; onPageChange: (page: number) => void;
+}) {
+  const size = Math.max(1, Math.floor(pageSize));
+  const count = total === undefined ? undefined : Math.max(0, Math.floor(total));
+  const pages = count === undefined ? undefined : Math.max(1, Math.ceil(count / size));
+  const current = Math.max(1, Math.floor(page));
+  const next = pages === undefined ? hasNext : current < pages;
+  return <nav className="tod-pagination" aria-label="分页">
+    <span className="tod-text tod-text--caption tod-text--numeric">{count === undefined ? `第 ${current} 页` : `第 ${current} / ${pages} 页 · 共 ${count} 条`}</span>
+    <Button variant="secondary" disabled={loading || current <= 1} onClick={() => onPageChange(current - 1)}>上一页</Button>
+    <Button variant="secondary" disabled={loading || !next} onClick={() => onPageChange(current + 1)}>下一页</Button>
+  </nav>;
+}