选择库 是做什么的？
在做任何决定之前，应用 product-ui §1（品味日志和优先级）和 §5（哪个技能负责什么）。一条命名某个库的日志规则优先。
当没有指定任务而调用时，用一行文字询问任务，然后停止。
决策顺序
按顺序执行以下步骤，在第一个完全解决任务的步骤处停止。
- 已经安装了哪些？ 读取
package.json。如果列表中的库或竞品已经完成了该工作，就使用它。用一行文字指出更好的选择，且未经要求绝不更改依赖项。原因：为同一工作引入第二个库会使 bundle 翻倍并增加约定冲突。 - 平台能否完全解决？ 检查下表。原因：平台方案无 bundle 成本、无升级路径且无废弃风险。
- 目录中是否有条目？ 打开 references/catalogue.md，找到对应类别，并选用标记为默认的条目。推荐一个库，而不是一个菜单。
- 该条目是否仍被维护？ 检查状态列。如果标记为未维护，切勿推荐它；使用条目中指定的替代品。
- 没有合适的？ 说“此任务不在列表中”，然后根据你自己的知识选择并通过下面的验证步骤检查。原因：未经验证的包通常是废弃代码进入项目的途径。
“完全解决”意味着满足任务中的所有需求，包括键盘、焦点和屏幕阅读器行为。如果有一项需求不满足，转到步骤 3。
优先使用平台方案
| 任务 | 平台方案 | 何时转向库 |
|---|---|---|
| 模态框 | <dialog> 配合 showModal() | 当你需要支持跨浏览器的堆叠对话框（带退出动画），或非模态焦点管理时 |
| 弹出框、下拉面板、工具提示类卡片 | popover 属性，并在支持的地方使用 CSS 锚点定位 | 任何地方都需要碰撞翻转，或需要使用 roving focus 的菜单时 |
| 手风琴、折叠面板 | <details name> | 你需要受控状态或超出 interpolate-size 能力的动画高度时 |
| 暗色模式（无切换按钮） | prefers-color-scheme、color-scheme、light-dark() | 用户手动选择主题且需要持久化时 |
| 日期、时间、月份输入 | <input type="date"> 及其同类 | 你需要范围选择、自定义日历或一致的外观时 |
| 数字格式化、相对时间、复数、列表 | Intl.NumberFormat、RelativeTimeFormat、PluralRules、ListFormat | 永远不要。始终使用 Intl |
| 一次性验证码、单字段输入 | <input autocomplete="one-time-code" inputmode="numeric"> | 你需要每个数字一个输入框时 |
| 进入、退出和布局动画 | CSS transitions、@starting-style、WAAPI、View Transitions | 你需要弹簧动画、手势或可中断的布局动画时 |
| 表单验证 | 约束验证（required、pattern、setCustomValidity） | 你需要跨字段或异步规则，或类型化 schema 时 |
| 少数选项的选择框 | <select> | 你需要搜索、多选或富样式行时 |
| 粘性表头、滚动吸附、延迟列表 | CSS position: sticky、scroll-snap、content-visibility: auto | 列表包含 1000+ 行时 |
无效/有效对
| 错误用法 | 正确用法 | 原因 |
|---|---|---|
使用手写焦点陷阱的 <div> 模态框 | <dialog> 和 showModal() | 焦点陷阱、Esc 键关闭及 inert 背景自动生效 |
npm i react-beautiful-dnd | @dnd-kit/react | 前者已废弃且未维护 |
npm i vaul 做抽屉 | Base UI Drawer 或样式化为片状的 <dialog> | vaul 的 README 自身表明已废弃 |
| 使用模态框库构建的 toast | Base UI Toast | 堆叠、悬停暂停和滑动关闭已内置 |
使用 setInterval 计数数字 | NumberFlow | 数字以正确布局和减少动画效果滚动 |
一次性渲染 5000 个 <tr> | 在 TanStack Table 下使用 TanStack Virtual，或用于列表的 Virtuoso | 渲染成本随行数增加，而非视口大小 |
使用货币包替换 new Intl.NumberFormat | Intl.NumberFormat | 浏览器内置区域规则 |
推荐前验证
对任何包（无论是在目录中还是不在）运行此检查。目录状态可能已经过时。
npm view <pkg> time.modified license version
- 已维护：最后一次发布在 12 个月内，或仓库在 6 个月内有推送并发布了版本。
- 缓慢：功能完整，12–24 个月内无发布，仓库仍在回复问题。可用。注明其更新缓慢。
- 未维护：已归档、README 明确声明未维护，或 24 个月以上无发布且存在未修复的严重问题。切勿推荐。
- 检查许可证。报告任何非 MIT、ISC、BSD 或 Apache-2.0 的许可证（MPL-2.0 和 AGPL 需要加注说明）。
- 检查同行依赖项与项目的 React 版本兼容性。
回答格式
单一块，无菜单：
Base UI Toast 用于 toast 消息。它支持堆叠、悬停时暂停和滑动关闭。不适合需要操作按钮的场合（操作按钮应保留在屏幕上）。MIT 许可证，已维护。
npm i @base-ui/react。
始终给出：用途说明，何时不应使用，许可证，以及你实际看到的状态和日期。
完成前检查
package.json已读取，所选库不与已安装的库冲突。- 已检查平台方案，如果跳过了，原因仅是一句理由。
- 已对所选库执行
npm view，答案中的状态是今天的状态，而非目录中的。 - 没有推荐任何标记为“未维护”的包。