用途:在 Remix 中编写或修改 packages/ui 组件 API 时使用。公开的 remix/ui/* 与 @remix-run/ui/* 入口来自 packages/ui/src/*。
主要能力与分层:组件模块放在 packages/ui/src/<name>/,常见文件有 index.ts(x)(公开入口)、primitives.ts(x)(无头行为)、README.md、.demo.tsx、index.test.tsx 与 primitives.test.tsx、shared/(视觉 token、图标、可复用样式混入)。分层从低到高:样式辅助返回 css(...) 描述符;无头原语负责行为、ARIA、注册、键盘、refs 与公开事件;样式包装组合原语、共享样式与结构,不重复原语行为。组合向下流动,例如 select 组合 popover 与 listbox。新增或移动公开入口需同步更新 packages/ui/package.json 的 exports 与 publishConfig.exports。
使用方式:原语模块用命名导出,调用方以命名空间导入,如 import * as select from '@remix-run/ui/select/primitives',使用 Context、ItemContext、GroupContext 提供者与 trigger、popover、list、option、hiddenInput 等混入。组件采用两阶段形态,从 handle.props 读取 props,用 handle.update()、handle.queueTask() 调度渲染与 DOM 工作。上下文用带 getter 与方法的普通对象,事件用冒泡 DOM 事件(如 rmx:<component>-<action>)与 on... 混入。样式使用 css(...) 描述符与 componentStyleValues 等共享 token。
适用场景与限制:适用于修改 packages/ui 内组件;行为变更测试原语层,样式包装测试组合、属性、隐藏输入与公开事件;新增内置组件需加入 demo 的 componentDemoModules 允许列表。应避免在 src/lib 下新增公开 API、用命名空间对象分组导出、在高层重复实现 popover/listbox 等行为、用 DOM 事件做内部重渲染信号等反模式。具体命令、收费与平台信息暂未提供。