# ICEN UI（@icen.ai/ui）

> 零依赖设计系统：tokens（6 预设 × 明暗）+ 无框架组件 CSS + 行为 JS + AI 原生组件族（7 态状态机 / 多模态内容模型 / provider 定价审计）+ 图表通用层（ChartSpec 纯 JSON，模型可直接调用）+ 工具体系（UI 能力注册为模型工具，OpenAI/MCP/manifest 三出口）。

用法：先 `bun add @icen.ai/ui`，`@import "@icen.ai/ui/tokens.css"` 再引组件；npm 包内 `AGENTS.md` 有消费方速查，`registry.json` 是 slug 机器清单。

## 规格与手册

- [AGENTS.md 消费方速查 + ai-native 规格 + 组件全表（全文）](https://ui.icen.ai/llms-full.txt): 安装颗粒度/图表/AI 族/绑定/Provider/工具体系，全部带可复制示例

## 基础
- [按钮（btn）](https://ui.icen.ai/components/btn/): 5 变体
- [面板（panel）](https://ui.icen.ai/components/panel/): 白卡片容器
- [徽章（pill）](https://ui.icen.ai/components/pill/): 语义色状态徽章，纪律：仅绿 / 黄 / 红 + 品牌 accent
- [标签（tag）](https://ui.icen.ai/components/tag/): 中性展示标签
- [标签页（tabs）](https://ui.icen.ai/components/tabs/): 与 behaviors/tabs 配套的 data 契约分区导航——下面是可点击切换的 live demo
- [指标卡（stat）](https://ui.icen.ai/components/stat/): stat-grid 自适应网格 + stat-card
- [轻提示（toast）](https://ui.icen.ai/components/toast/): 与 behaviors/toast 配套
- [工具条（toolbar）](https://ui.icen.ai/components/toolbar/): 横向承载按钮 / 控件的容器
- [分栏拖拽（split-pane）](https://ui.icen.ai/components/split-pane/): 与 behaviors/split-pane 配套：可拖拽的分栏容器，支持水平 / 垂直方向，双击分隔条复位 50%，键盘 ←→ ↑↓ 调整

## 表单
- [表单布局（form）](https://ui.icen.ai/components/form/): 字段结构
- [输入框（input）](https://ui.icen.ai/components/input/): wrapper 式输入族：三档尺寸，前后缀、清除钮、密码切换、错误/禁用态，含多行与搜索框
- [选择器（select）](https://ui.icen.ai/components/select/): 触发器与 input 同视觉
- [滑块（slider）](https://ui.icen.ai/components/slider/): 透明原生 range 覆盖层驱动填充与滑块
- [标签输入（tag-input）](https://ui.icen.ai/components/tag-input/): Enter / 逗号提交、重复静默清空、空草稿 Backspace 删尾、blur 提交
- [开关与选择（switch）](https://ui.icen.ai/components/switch/): 纯 CSS 状态组件：开关两档尺寸
- [分段选择（segmented）](https://ui.icen.ai/components/segmented/): 同族四件：分段控件
- [上传（upload）](https://ui.icen.ai/components/upload/): 点击 / Enter / Space 打开文件选择
- [日期选择（date-picker）](https://ui.icen.ai/components/date-picker/): 与 behaviors/date-picker 配套：点击触发器弹出日历面板，支持月份导航 / 今日 / 清除 / min-max 限制 / 周首日配置

## 浮层
- [对话框（modal）](https://ui.icen.ai/components/modal/): data-modal 契约 + behaviors/modal：焦点陷阱、滚动锁、Esc/遮罩关闭、焦点还原
- [下拉菜单（dropdown）](https://ui.icen.ai/components/dropdown/): trigger + [data-dropdown-menu] 模板
- [右键菜单（context-menu）](https://ui.icen.ai/components/context-menu/): 全局单例：registerContextMenu
- [浮层（popover）](https://ui.icen.ai/components/popover/): computePopoverLayout 纯函数选侧
- [提示（tooltip）](https://ui.icen.ai/components/tooltip/): 纯 CSS：data-tooltip 文案 + data-tooltip-side 方向
- [命令面板（command-palette）](https://ui.icen.ai/components/command-palette/): 与 behaviors/command-palette 配套：⌘K / Ctrl+K 唤起的命令面板，搜索过滤、↑↓ 导航、Enter 执行、ESC 关闭，常用于编辑器 / 后台快速跳转

## 数据展示
- [卡片（card）](https://ui.icen.ai/components/card/): 四变体
- [空状态（empty）](https://ui.icen.ai/components/empty/): 图标 + 标题 + 描述 + 可选动作按钮
- [头像（avatar）](https://ui.icen.ai/components/avatar/): xs 20 / sm 28 / 默认 36 / lg 48
- [媒体卡（media-card）](https://ui.icen.ai/components/media-card/): 2/3 封面
- [评分（rating）](https://ui.icen.ai/components/rating/): is-filled 实星 / is-half 半星
- [键盘键（kbd）](https://ui.icen.ai/components/kbd/): 按键帽
- [列表（list）](https://ui.icen.ai/components/list/): 行间 1px 分隔线 + hover 底色的分隔列表
- [折叠面板（accordion）](https://ui.icen.ai/components/accordion/): 与 behaviors/accordion 配套
- [时间线（timeline）](https://ui.icen.ai/components/timeline/): 五档语义色圆点 + 连接线，时间右对齐 tabular-nums
- [描述列表（desc）](https://ui.icen.ai/components/desc/): desc--bordered 格线列表
- [树形（tree）](https://ui.icen.ai/components/tree/): 与 behaviors/tree 配套：三层可折叠 + 叶子单选 + 禁用节点
- [轮播（carousel）](https://ui.icen.ai/components/carousel/): 与 behaviors/carousel 配套：箭头 / 自动圆点 / 循环切换
- [徽标（badge）](https://ui.icen.ai/components/badge/): 角标式徽标：数字计数 / 纯圆点，挂在外层元素的角上
- [滚动容器（scroll-area）](https://ui.icen.ai/components/scroll-area/): 显式带视觉边界的滚动区
- [表格（table）](https://ui.icen.ai/components/table/): table-wrap 负责窄屏横向滚动
- [数据表格（datatable）](https://ui.icen.ai/components/datatable/): createTable 函数式 API：搜索 / 排序 / 筛选 / 多选

## 反馈
- [警示（alert）](https://ui.icen.ai/components/alert/): info / success / warning / error 四态警示条，带关闭按钮
- [结果页（result）](https://ui.icen.ai/components/result/): 终态展示
- [进度条（progress）](https://ui.icen.ai/components/progress/): 默认 6px 轨道 / progress--sm 4px，右侧 tabular-nums 百分比标签
- [加载指示（spinner）](https://ui.icen.ai/components/spinner/): sm 16px / 默认 20px / lg 32px，1s 线性旋转
- [骨架屏（skeleton）](https://ui.icen.ai/components/skeleton/): 呼吸脉冲占位块
- [复制按钮（copy）](https://ui.icen.ai/components/copy/): 与 behaviors/copy 配套：命中 .copy-btn[data-copy] 写入剪贴板，成功后文本变「已复制」1.4s 还原
- [通知栈（notification）](https://ui.icen.ai/components/notification/): 与 behaviors/notification 配套：工程级持久通知栈——进度通知、Promise confirm、多按钮、hover 暂停+倒计时进度、优先级置顶、已读未读、自定义图标/头像、详情链接、localStorage 持久化、多容器

## 图表
- [图表总览（charts）](https://ui.icen.ai/components/charts/): 零依赖纯 SVG/DOM 渲染
- [折线图（chart-line）](https://ui.icen.ai/components/chart-line/): 面积渐变 + 网格 + 数据点的折线趋势图
- [柱状图（chart-bar）](https://ui.icen.ai/components/chart-bar/): renderVBar 垂直柱状 + renderHBar 水平条形两种形态，同一 kit 入口
- [饼图（chart-pie）](https://ui.icen.ai/components/chart-pie/): 环形分割图
- [雷达图（chart-radar）](https://ui.icen.ai/components/chart-radar/): N 轴蛛网雷达图
- [热力图（chart-heatmap）](https://ui.icen.ai/components/chart-heatmap/): GitHub 式贡献图热力格
- [面积图（chart-area）](https://ui.icen.ai/components/chart-area/): 以面积填充为主体的趋势图
- [堆叠条（chart-stack）](https://ui.icen.ai/components/chart-stack/): 100% 堆叠条形图
- [仪表盘（chart-gauge）](https://ui.icen.ai/components/chart-gauge/): 环形单值仪表盘
- [迷你趋势（chart-sparkline）](https://ui.icen.ai/components/chart-sparkline/): 无轴迷你趋势线
- [散点气泡（chart-scatter）](https://ui.icen.ai/components/chart-scatter/): 散点/气泡图
- [贡献日历（chart-calendar）](https://ui.icen.ai/components/chart-calendar/): 贡献日历

## 导航
- [顶栏（nav）](https://ui.icen.ai/components/nav/): 三段式玻璃顶栏
- [侧栏（sidebar）](https://ui.icen.ai/components/sidebar/): 分组可折叠
- [面包屑（breadcrumb）](https://ui.icen.ai/components/breadcrumb/): 分隔符由 .breadcrumb-sep 的 ::after
- [分页（pagination）](https://ui.icen.ai/components/pagination/): 纯样式契约
- [步骤条（steps）](https://ui.icen.ai/components/steps/): 三态 finish / process / wait，连接线颜色跟随已完成步骤
- [回到顶部（back-top）](https://ui.icen.ai/components/back-top/): 与 behaviors/back-top 配套：滚动超过阈值
- [布局工具（layout）](https://ui.icen.ai/components/layout/): stack / divider / surface / text / grid / center / container / aspect / visually-hidden 全部工具类，无 JS

## AI 原生
- [AI 总览（ai-overview）](https://ui.icen.ai/components/ai-overview/): 一段可播放的完整对话《分析 AI 迭代历史》——把 AI 族全部能力按真实工作流串起来：思考
- [AI 会话（ai-chat）](https://ui.icen.ai/components/ai-chat/): AI 会话容器
- [AI 消息（ai-message）](https://ui.icen.ai/components/ai-message/): 消息行基元 .ai-msg：user / assistant / system / tool 四角色
- [AI 推理（ai-reasoning）](https://ui.icen.ai/components/ai-reasoning/): 推理块 .ai-reasoning：流式中 head 显示 shimmer「正在思考…」
- [AI 输入台（ai-composer）](https://ui.icen.ai/components/ai-composer/): AI 输入台：autosize
- [AI 工具调用（ai-tool-call）](https://ui.icen.ai/components/ai-tool-call/): 工具调用卡 .ai-tool：kind 修饰类
- [AI 子智能体（ai-subagent）](https://ui.icen.ai/components/ai-subagent/): 子智能体卡 .ai-subagent：activities
- [AI 差异审阅（ai-diff）](https://ui.icen.ai/components/ai-diff/): 差异审阅卡 .ai-diff：parseUnifiedDiff
- [AI 文件标签（ai-files）](https://ui.icen.ai/components/ai-files/): 文件 chips .ai-file-chip
- [AI 任务清单（ai-todo）](https://ui.icen.ai/components/ai-todo/): 任务清单 .ai-todo：进度条
- [AI 用量条（ai-usage）](https://ui.icen.ai/components/ai-usage/): 上下文用量 .ai-usage 双形态：分段条
- [AI 上下文面板（ai-context）](https://ui.icen.ai/components/ai-context/): 上下文抽屉 .ai-context：触发器 [data-ai-context-open] 全局委托开合