@sine-kits/ui

供平台应用和独立 Kit 安装使用的纯 React 控件、主题 tokens、class-name 工具与 SVG 资源。0.1.0 输出 ESM JavaScript 和 TypeScript 声明，React / React DOM 19.2.1 为 peer dependency。包不依赖 Next、平台配置、会话、数据库或平台翻译文件。

使用

import { Button } from '@sine-kits/ui/button';
import { Card, CardContent } from '@sine-kits/ui/card';
import { cn } from '@sine-kits/ui/cn';
import '@sine-kits/ui/styles.css';

styles.css 是可独立使用的编译后 Tailwind v4 CSS，包含组件工具类、动画和全部主题 tokens。独立 Kit 无需平台源码就能显示控件。

已有 Tailwind 编译流程的宿主应改为导入 @sine-kits/ui/tokens.css，并为安装包的 dist 添加 @source 扫描，映射标准 shadcn tokens 到 Tailwind theme。平台应用已有该映射。两个样式入口不要同时引入。

控件逐项显式导出；根入口也导出控件、cn 和主题工具。通用 hooks 位于 @sine-kits/ui/hooks/use-mobile、use-as-ref、use-lazy-ref、use-isomorphic-layout-effect。SVG 是原始资源，例如 @sine-kits/ui/icons/github.svg，宿主自行选择 URL 或 SVGR 加载方式。

FileUpload 仅负责文件选择、校验与进度呈现；网络上传由消费方提供 onUpload 回调，并通过 onProgress / onSuccess / onError 更新状态。业务文案、API、认证与语言上下文不属于公共控件包。

主题

import { applyThemeToDocument } from '@sine-kits/ui/themes';
applyThemeToDocument('dark', 'perplexity');

支持 light / dark，配色为 default、claude、cosmic-night、modern-minimal、ocean-breeze、perplexity。原始单主题 CSS 通过 @sine-kits/ui/styles/themes/<name>.css 导出。存储工具的 key 由宿主注入，不读取平台默认配置。

构建与分发

• pnpm build：生成 ESM、.d.ts、源码/声明映射，复制 CSS/SVG，编译独立 CSS。
• pnpm dev：先完成构建，再监听 TypeScript 与静态资源变动。
• pnpm typecheck：包级 TypeScript 检查。
• pnpm clean：只删除生成的 dist。
• pnpm pack：prepack 先构建，安装包携带 dist 和 src，声明映射在包内可解析。

客户端入口保留 use client，CSS 声明为有副作用的资源。运行/构建依赖显式声明，不依赖平台 hoist。构建环境为 Node 24.15.x。

F0 通过有认证的私有 registry 分发；UNLICENSED 不声称拥有上游代码的公开再分发许可，公开发布前必须核对。平台主题/语言/身份呈现在私有 @sine-kits/app-shell；认证、连接、推广、AI 和营销组件由各应用持有。