文档

架构

应用 → @selrux/ui（主题、Token、配置、语言、反馈）→ @selrux/headless（行为）→ @base-ui/react 与 React 19。

分层

@selrux/ui

64 个组件目录，每个子路径独立入口，无包根聚合导出
Token 写在 @layer srx 内，挂在 .srx-ui 根上
ConfigProvider 提供配置域；locale 内置 zh-CN / en-US
App 反馈门面：useMessage、useNotification、useModal

src/components/*
src/styles/tokens.css
src/config/config-provider.tsx
src/locale/zh-CN.ts
src/app/index.ts

tsx

123456const buttonClassName = cva('srx-button', {
  variants: {
    color: { primary: 'srx-button--primary' },
    variant: { solid: 'srx-button--solid' },
  },
});

属性与调用向下状态与事件向上

层	职责	依赖
@selrux/ui	主题组件、CVA 变体、Token 与样式聚合、ConfigProvider、语言包、App 反馈门面	@selrux/headless 0.4.0、class-variance-authority、lucide-react
@selrux/headless	行为、状态、焦点、浮层	@base-ui/react 1.6.0、react-resizable-panels、@selrux/virtual-list

目录职责

src/

12345678src/components   # 组件、Props、变体、样式及测试（模式示例：components/button）
src/theme        # 主题类型与默认颜色
src/styles       # tokens.css 与 styles.css 聚合
src/config       # ConfigProvider 配置域
src/locale       # 语言包（zh-CN / en-US）
src/app          # message / modal / notification 反馈门面
src/entries      # 显式入口与包边界测试
build/           # build.mjs、discover-entries、emit-public-types、bundle-styles、check-artifacts

Token 作用域

所有 Token 写在 @layer srx 内，并挂在 .srx-ui 根上；明暗与外观通过 data-mode="dark"、data-appearance="layered" 切换。ConfigProvider 的 colors 键与 CSS 变量一一对应，例如 primary → --srx-primary、primaryForeground → --srx-primary-foreground。

css

1234@layer srx {
  .srx-ui { --srx-primary: #8e51ff; --srx-radius-md: .375rem; /* … */ }
  .srx-ui[data-mode='dark'] { /* 暗色覆盖 */ }
}

构建流水线

pnpm build 运行 node build/build.mjs：发现入口、打包 JS（Vite）、生成公开类型声明、聚合样式，并检查产物与依赖 external 边界。产物输出到 dist/，发布时仅包含 dist 与 THIRD_PARTY_NOTICES.md。

入口与导出

公开子路径以 package.json 的 exports 为准，入口契约由 src/entries/package-boundary.test.ts 守护。组件入口自动引入自身样式（dist/css/*.css，手动引入用 @selrux/ui/css/*），sideEffects 只标记 CSS 文件，打包器按需保留。