@icen.ai/ui 0.8.0 → 0.8.1

package/dist/ui.css

@@ -1339,7 +1339,9 @@
   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
 
-  /* ── Typography 字体 ── */
+  /* ── Typography 字体 ──
+     --line-height-heading 不在此定义：typography.css 独家拥有（icen 品牌 1.2），
+     各 .style-* profile 需要差异化时在自己的块里覆盖。 */
   --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   --font-mono-paper: ui-monospace, SFMono-Regular, 'JetBrains Mono', 'Courier New', monospace;
@@ -1347,7 +1349,6 @@
   --letter-spacing-body: 0;
   --letter-spacing-heading: 0;
   --line-height-body: 1.5;
-  --line-height-heading: 1.2;
 }
 
 /* ══════════════════════════════════════════════════════════════
@@ -1821,6 +1822,7 @@
  * @icen.ai/ui — Typography Tokens（icen canonical）
  * 美学基调：等宽数字精密感 × 衬线书卷气（宋体标题）
  * 默认（:root）即 icen 品牌形态；.style-modern 显式回退 system-ui 栈（见 style-profiles.css）
+ * 工具类：.font-math（数字密集区，"Numeric Math" 数学字体 + tabular-nums）
  */
 
 /* ── 数学/等宽数字字体（数字密集区的精密感） ── */
@@ -1843,6 +1845,7 @@
   --font-heading: 'Songti SC', 'STSong', 'Noto Serif SC', 'Source Han Serif SC', SimSun, serif;
   --font-cjk: var(--font-heading);
   --line-height-body: 1.7;
+  /* 独家定义（style-profiles.css 的 :root 不再重复；profile 差异化在各 .style-* 块覆盖） */
   --line-height-heading: 1.2;
 }
 
@@ -1878,7 +1881,7 @@ h1, h2, h3, h4, h5, h6 {
  * ════════════════════════════════════════════════════════════════════════
  * icen 组件契约（统一抽象）
  * ════════════════════════════════════════════════════════════════════════
- * 所有 51 个组件遵循同一套抽象，由两层共同支撑：
+ * 所有 56 个组件遵循同一套抽象，由两层共同支撑：
  *
  * ── 层 1：--icen-* 原语 token（所有组件自洽消费）
  *    --icen-ring / --icen-ring-soft / --icen-ring-error /
@@ -1926,7 +1929,7 @@ h1, h2, h3, h4, h5, h6 {
  * 暴露的契约：
  *   - 元素基线：box-sizing / body / a / code / pre / img / ::selection
  *   - 滚动条：贴 --token-scrollbar-*（retro profile 另有硬覆盖）
- *   - 工具类：.mono / .dim / .faint / .sr-only / .skip-link
+ *   - 工具类：.mono / .serif / .dim / .faint / .numeric / .sr-only / .skip-link
  *   - z-index 标尺：--z-* （浮层一律 portal 到 body）
  *   - 共享 keyframes：icen-pop-in（弹层进场）/ icen-spin（旋转）/ icen-skeleton-pulse（骨架脉冲）
  *   - 交互基元 class：.pressable / .control / .field / .lift / .surface-elevated / .focus-ring / .motion
@@ -1938,7 +1941,7 @@ h1, h2, h3, h4, h5, h6 {
    ───────────────────────────────────────────────────────────────
    所有组件消费的"原语级"变量：聚焦环、悬停、按下、禁用、过渡。
    风格 profile（如 .style-retro）只需覆盖这里的少数变量，
-   即可让 51 个组件整体换肤；组件自身无需感知风格切换。
+   即可让 56 个组件整体换肤；组件自身无需感知风格切换。
    ══════════════════════════════════════════════════════════════ */
 :root {
   /* ── 聚焦环（focus-visible） ── */
@@ -2262,6 +2265,7 @@ html {
        <span class="field-label">姓名</span>
        <span class="control"><input /></span>
        <span class="field-hint">必填</span>
+       <span class="field-error">错误</span>
      </label> */
 .field {
   display: flex;
@@ -4122,7 +4126,7 @@ html {
   user-select: none;
 }
 
-/* 大号变体（常驻工具栏/头部用） */
+/* 大号变体（消费方变体，常驻头部大号环；behavior 不产出，由使用方手写标记） */
 .ai-usage-ring--lg {
   width: 44px;
   height: 44px;
@@ -5056,7 +5060,7 @@ html {
  *   </span>
  *
  * 变体：--dot 纯圆点 / --sm 小号 / --lg 大号 / --bottom 底部角
- * 语义色：--success（在线）/ --warning / --error / --accent
+ * 语义色：--success（在线）/ --warning / --error / --info / --accent
  */
 
 .badge-host {
@@ -5269,38 +5273,6 @@ html {
   background: var(--token-fill-1);
 }
 
-/* ── 溢出下拉（behavior 可选：点击 … 展开被折叠的中间路径） ── */
-.breadcrumb-dropdown {
-  position: relative;
-}
-.breadcrumb-dropdown-menu {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  min-width: 160px;
-  padding: 4px;
-  background: var(--token-card-strong);
-  border: 1px solid var(--token-outline);
-  border-radius: var(--radius-md);
-  box-shadow: var(--token-shadow-overlay);
-  z-index: var(--z-popover);
-  animation: icen-pop-in var(--icen-tx-fast);
-}
-.breadcrumb-dropdown-menu[hidden] { display: none; }
-.breadcrumb-dropdown-menu a {
-  display: block;
-  padding: 4px var(--density-space-sm);
-  font-size: var(--density-font-size-sm);
-  color: var(--token-text-muted);
-  text-decoration: none;
-  border-radius: var(--radius-sm);
-  transition: background-color var(--icen-tx-fast), color var(--icen-tx-fast);
-}
-.breadcrumb-dropdown-menu a:hover {
-  background: var(--token-fill-1);
-  color: var(--token-text);
-}
-
 /* ── 面包屑分隔符变体 ── */
 .breadcrumb--slash .breadcrumb-sep::after { content: '/'; }
 .breadcrumb--arrow .breadcrumb-sep::after { content: '→'; }
@@ -6013,12 +5985,6 @@ html {
   height: 132px;
   flex-shrink: 0;
 }
-.chart-donut-center {
-  font-variant-numeric: tabular-nums;
-  text-anchor: middle;
-  fill: var(--token-text);
-  font-weight: 600;
-}
 
 
 /* ── components/chart-radar.css ── */
@@ -6201,7 +6167,7 @@ html {
   font-variant-numeric: tabular-nums;
 }
 
-/* ── 调色盘：多系列图（donut/stack/line/radar）由 behavior 选用 ── */
+/* ── 调色盘：手写 markup 调色盘；behavior 走 charts.ts PALETTE_VARS 内联同值（两处值需人工同步） ── */
 .chart-tone-1 { --chart-tone: var(--token-accent); }
 .chart-tone-2 { --chart-tone: var(--token-accent-cold); }
 .chart-tone-3 { --chart-tone: var(--token-success); }
@@ -6550,6 +6516,9 @@ svg circle[data-chart-mark].is-hover { stroke-width: 3; }
  *
  * 包含：kbd（按键）/ code-inline（行内代码）/ list（分隔列表）/ accordion（手风琴，behaviors/accordion 配套）/
  *       timeline（时间线）/ desc（描述列表）/ tree（树形，behaviors/tree 配套）
+ * markup API 变体（正文"增强"段，behavior 不产出、由手写 markup 消费）：
+ *   .accordion--cards / .code-inline--success|--warning|--error /
+ *   .timeline--right|--alternate|--sm / .timeline-extra / .timeline-dot--sm 及 dot 语义色（--error 等）
  * 规格源自 opengal src/presentation/ui/data/exhibit.tsx 与 data/display.tsx。
  */
 
@@ -7078,22 +7047,6 @@ svg circle[data-chart-mark].is-hover { stroke-width: 3; }
   background: var(--token-outline-soft);
 }
 
-/* 树节点复选框（checkbox tree） */
-.tree-checkbox {
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
-  margin-right: 2px;
-}
-
-/* 树拖拽视觉态 */
-.tree-node.is-dragging {
-  opacity: 0.5;
-}
-.tree-node.is-drop-target {
-  box-shadow: inset 0 -2px var(--token-accent);
-}
-
 /* 树搜索高亮 */
 .tree-label mark {
   background: color-mix(in srgb, var(--token-warning) 30%, transparent);
@@ -7654,7 +7607,7 @@ svg circle[data-chart-mark].is-hover { stroke-width: 3; }
   background: color-mix(in srgb, var(--token-accent-subtle) 82%, var(--token-fill-1));
 }
 
-/* ── 行状态类（rowClassName 产出） ── */
+/* ── 行状态类（rowClassName 产出；--danger/--warning/--success 同族语义行底色） ── */
 .dt-row--danger { background: color-mix(in srgb, var(--token-error) 6%, transparent) !important; }
 .dt-row--danger:hover { background: color-mix(in srgb, var(--token-error) 10%, transparent) !important; }
 .dt-row--warning { background: color-mix(in srgb, var(--token-warning) 6%, transparent) !important; }
@@ -7667,7 +7620,7 @@ svg circle[data-chart-mark].is-hover { stroke-width: 3; }
  *
  * 契约：
  *   <div class="date-picker" data-date-picker data-date-picker-input="id">
- *     <button class="date-picker-trigger" type="button" aria-haspopup="dialog">
+ *     <button class="date-picker-trigger [--sm|--lg]" type="button" aria-haspopup="dialog">
  *       <span class="date-picker-value">2026-07-29</span>
  *       <svg class="date-picker-icon">…日历 svg…</svg>
  *     </button>
@@ -10239,7 +10192,7 @@ svg circle[data-chart-mark].is-hover { stroke-width: 3; }
  *
  * 完整契约（由 behavior 渲染）：
  *   <div class="notification-container" role="region" aria-label="通知" data-position="top-right">
- *     <div class="notification [notification--success|warning|error|info]
+ *     <div class="notification [notification--success|warning|error]
  *          [.is-priority] [.is-unread] [.is-progress] [.is-clickable] [.is-paused]
  *          [.has-avatar]" role="alert|button">
  *       <span class="notification-icon">…svg 或 img.notification-avatar…</span>
@@ -10311,7 +10264,7 @@ svg circle[data-chart-mark].is-hover { stroke-width: 3; }
 .notification.notification--success { border-left-color: var(--token-success); }
 .notification.notification--warning { border-left-color: var(--token-warning); }
 .notification.notification--error   { border-left-color: var(--token-error); }
-.notification.notification--info    { border-left-color: var(--token-info); }
+/* info 为基类默认配色（基类左侧边即 --token-info），无修饰类 */
 
 /* ── 优先级：高优先级强调（左侧加粗 + 更强阴影）── */
 .notification.is-priority {
@@ -10368,7 +10321,6 @@ svg circle[data-chart-mark].is-hover { stroke-width: 3; }
 .notification--success .notification-icon { color: var(--token-success); }
 .notification--warning .notification-icon { color: var(--token-warning); }
 .notification--error   .notification-icon { color: var(--token-error); }
-.notification--info    .notification-icon { color: var(--token-info); }
 
 /* 头像（圆形图） */
 .notification-avatar {
@@ -10630,7 +10582,9 @@ svg circle[data-chart-mark].is-hover { stroke-width: 3; }
  *     <button class="page-btn motion" aria-label="下一页">›</button>
  *   </nav>
  *
- * 翻页逻辑由消费方实现，这里只提供静态样式契约。
+ * 点击接线由 behaviors/controls.ts 的 initPagination() 提供（.page-btn 激活位移 +
+ * icen:page-change，上下页按钮按 aria-label / data-dir 推断方向）；总页数与省略号
+ * 折叠策略由消费方维护，这里只提供样式契约。
  */
 
 .pagination {
@@ -11347,7 +11301,15 @@ svg circle[data-chart-mark].is-hover { stroke-width: 3; }
  *        …
  *      </div>
  *
- * segmented/toggle 是纯 CSS 状态组件（.is-active）；stepper/otp 由 behaviors/input.ts 接线。
+ * segmented / stepper 由 behaviors/controls.ts 接线（initSegmented / initStepper，
+ * 派 icen:segmented-change / icen:stepper-change）；otp 由 behaviors/input.ts 的
+ * initInput 接线；toggle-group 为纯 CSS 状态组件（.is-active，使用方自行驱动）。
+ *
+ * 增强段（正文"增强"段）：
+ *   变体：segmented--block / segmented--ghost / toggle-group--block / toggle-group--ghost
+ *   槽位：stepper-unit（步进器单位后缀）/ otp-separator（OTP 分组分隔符）
+ *   状态类（消费方施加）：.otp.is-complete（behavior 接线中）/ .otp.is-error /
+ *         .segmented.is-error / .segmented.is-disabled / .toggle-group.is-error / .toggle-group.is-disabled
  */
 
 /* ── 分段控件（排他单选） ── */
@@ -11662,14 +11624,24 @@ svg circle[data-chart-mark].is-hover { stroke-width: 3; }
  *
  * 完整契约：
  *   <div class="select [data-disabled] [.is-open]" data-select
- *        [data-select-search] [data-select-multiple] [data-select-max="3"]>
+ *        [data-select-search] [data-select-multiple] [data-select-max="3"]
+ *        [data-panel-width="220"] [data-panel-min="200"]
+ *        [data-panel-max="360"] [data-panel-max-height="320"]>
+ *     <!-- 选项 .select-option 内支持任意 HTML（色卡 / 图标 / 多行）；
+ *          面板尺寸为全库统一 PanelSizing 契约（behaviors/popover.ts） -->
  *     <button class="select-trigger pressable focus-ring [--sm|--lg]" aria-haspopup="listbox"
  *             aria-expanded="false" [disabled]>
  *       <span class="select-leading">…</span>           可选前缀
- *       <span class="select-value is-empty">占位</span>
- *       <button class="select-clear" aria-label="清除">×</button>  ← 多选时可选
+ *       <span class="select-value is-empty">占位</span>   多选有选中时 behavior 隐藏它
+ *       <span class="select-chips">                     ← 多选选中态由 behavior 渲染（勿手写）
+ *         <span class="select-chip">标签<span class="select-chip-x" role="button" tabindex="-1">×</span></span>
+ *         <span class="select-chip select-chip--more">+2</span>
+ *       </span>
  *       <svg class="select-chevron">…</svg>
  *     </button>
+ *     <button class="select-clear" aria-label="清除全部" hidden>×</button>  ← 多选可选：
+ *         与 trigger 同级（不能嵌套在 button 内），绝对定位叠进 trigger 右侧；
+ *         behavior 在有选中时自动显示
  *     <div class="select-panel" hidden role="listbox">
  *       <div class="select-search">                      ← data-select-search 时 behavior 自动注入
  *         <input class="select-search-input" placeholder="搜索…" />
@@ -11867,8 +11839,13 @@ svg circle[data-chart-mark].is-hover { stroke-width: 3; }
   box-shadow: var(--icen-control-focus-shadow);
 }
 
-/* ── 多选清除按钮 ── */
+/* ── 多选清除按钮（与 trigger 同级，绝对定位叠进 trigger 右侧、chevron 左侧） ── */
 .select-clear {
+  position: absolute;
+  top: 50%;
+  right: calc(var(--density-space-sm) + 20px);
+  transform: translateY(-50%);
+  z-index: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -11889,6 +11866,53 @@ svg circle[data-chart-mark].is-hover { stroke-width: 3; }
   color: var(--token-text);
   background: var(--token-fill-1);
 }
+/* 有清除钮时 trigger 右侧让位（clear 18px + chevron 14px + 间距） */
+.select:has(.select-clear) .select-trigger { padding-right: 52px; }
+
+/* ── 多选 chips（tag 式展示；× 仅 hover 对应 chip 时出现） ── */
+.select-chips {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+}
+.select-chip {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  font-size: var(--density-font-size-xs);
+  line-height: 1.6;
+  color: var(--token-text);
+  background: var(--token-fill-2);
+  border-radius: var(--radius-sm);
+  padding: 0 7px;
+  white-space: nowrap;
+}
+.select-chip-x {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0;
+  opacity: 0;
+  overflow: hidden;
+  margin-left: 0;
+  color: var(--token-text-faint);
+  border-radius: var(--radius-full);
+  font-size: var(--density-font-size-md);
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    width var(--icen-tx-fast),
+    opacity var(--icen-tx-fast),
+    margin-left var(--icen-tx-fast),
+    color var(--icen-tx-fast);
+}
+.select-chip:hover .select-chip-x,
+.select-chip-x:focus-visible { width: 12px; opacity: 1; margin-left: 4px; }
+.select-chip-x:hover { color: var(--token-error); }
+.select-chip--more { color: var(--token-text-muted); background: var(--token-fill-1); }
 
 /* ── 多选 trigger 高度自适应（chips 可能换行） ── */
 .select[data-select-multiple] .select-trigger {
@@ -11921,6 +11945,7 @@ svg circle[data-chart-mark].is-hover { stroke-width: 3; }
 @media (prefers-reduced-motion: reduce) {
   .select-panel { animation: none; }
   .select-search-input,
+  .select-chip-x,
   .select-clear { transition: none; }
 }
 
@@ -12905,7 +12930,8 @@ svg circle[data-chart-mark].is-hover { stroke-width: 3; }
  * @icen.ai/ui — Component: steps（步骤条，横向默认 / .steps--vertical 垂直）
  *
  * 完整契约：
- *   <ol class="steps [steps--vertical] [steps--sm|steps--lg]" aria-label="进度">
+ *   <ol class="steps [steps--vertical] [steps--sm|steps--lg] [steps--dots|steps--progress|steps--connected]"
+ *        aria-label="进度">
  *     <li class="step [step--finish|step--process|step--wait] [.step--error]">
  *       <span class="step-line"></span>                   ← 横向：右半段连线；末步自动隐藏
  *       <span class="step-dot">[✓ | ! | 数字]</span>
@@ -12917,7 +12943,11 @@ svg circle[data-chart-mark].is-hover { stroke-width: 3; }
  *   </ol>
  *
  * 四态：finish / process / wait / error（错误用 error 色 dot + 描边）。
- * 点击 .step[role=button] 由使用方实现跳转。
+ * 变体与增强（正文下半段）：--dots 纯点紧凑 / --progress 步骤间填充进度线 / --connected 虚线连接；
+ *   dot 内可放 svg.step-dot-icon；step-desc 旁可加 .step-extra 富化描述；
+ *   可点击步骤标 .step--clickable（与 controls.ts initSteps 的 JSDoc 同口径）。
+ * 点击 .step[role=button] 由 behaviors/controls.ts 的 initSteps() 接线（激活态位移 +
+ * icen:step-change）；跳转业务仍由使用方监听事件实现。
  */
 
 .steps {
@@ -13044,7 +13074,9 @@ svg circle[data-chart-mark].is-hover { stroke-width: 3; }
   padding: 0;
   font-size: 0;
 }
-.steps--dots .step-line { top: 20px; }
+/* 线 top = dot 高度一半：默认 32→16 / sm 24→12 / lg 40→20 / dots 10→5；
+   本块位于尺寸变体之后，同等特异性下靠源顺序生效，dots 与 --sm/--lg 叠加时以 5px 为准 */
+.steps--dots .step-line { top: 5px; }
 .steps--dots .step-title,
 .steps--dots .step-desc { display: none; }
 .steps--dots .step { flex: none; }
@@ -13074,8 +13106,11 @@ svg circle[data-chart-mark].is-hover { stroke-width: 3; }
 }
 
 /* ── 进度条变体（步骤间的填充进度，非离散连线） ── */
+/* 高度 1px→3px 时线只向下扩张 2px，整体上移 1px 使线心与 1px 基线居中一致；
+   用 translateY 而非改 top，可同时适配 --sm(12px)/--lg(20px) 的不同基线 */
 .steps--progress .step-line {
   height: 3px;
+  transform: translateY(-1px);
   border-radius: var(--radius-full);
   background: var(--token-fill-2);
   overflow: hidden;
@@ -13138,7 +13173,9 @@ svg circle[data-chart-mark].is-hover { stroke-width: 3; }
 /* ── components/switch.css ── */
 /*
  * @icen.ai/ui — Component: switch / checkbox / radio（开关 / 勾选 / 单选行）
- * 纯 CSS 状态组件：状态全走 aria-checked / .is-selected；交互由使用方或演示页脚本切换。
+ * 状态组件：状态全走 aria-checked / .is-selected；交互由 behaviors/controls.ts 的
+ * initSwitch() 接线（点击 / Space / Enter 翻转并派 icen:switch-change / icen:check-change），
+ * 不接线时亦可由使用方自行驱动状态。
  *
  * 完整契约：
  *   <button class="switch [--sm|--lg]" role="switch" aria-checked="true|false" [disabled]>
@@ -13919,6 +13956,29 @@ svg circle[data-chart-mark].is-hover { stroke-width: 3; }
   .page-tab, .tabs a, .page-tab-close { transition: none; }
 }
 
+/* ── 指示条（[data-tabs-ink]，与 behaviors/tabs 配套；本节为追加）── */
+/* tablist（.tabs）挂 data-tabs-ink 时，行为层创建并移动 .tabs-ink：
+   宽 / translateX 由 JS 内联写入（布局定位，同 popover 模式）；
+   此处只负责视觉（高度 / 圆角 / 背景）与位移过渡（--duration / --ease token）。 */
+.tabs[data-tabs-ink] {
+  position: relative;
+}
+.tabs-ink {
+  position: absolute;
+  bottom: -1px; /* 盖在容器 1px 底边线上，与活动 tab 的 2px 下划线同高 */
+  left: 0;
+  height: 2px;
+  border-radius: var(--radius-full);
+  background: var(--token-accent);
+  pointer-events: none;
+  transition:
+    width var(--duration-normal) var(--ease-out),
+    transform var(--duration-normal) var(--ease-out);
+}
+@media (prefers-reduced-motion: reduce) {
+  .tabs-ink { transition: none; }
+}
+
 
 /* ── components/tag-input.css ── */
 /*
@@ -13993,12 +14053,7 @@ svg circle[data-chart-mark].is-hover { stroke-width: 3; }
   max-width: 100%;
   animation: tag-pop var(--icen-tx-fast);
 }
-.tag-chip-label {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 200px;
-}
+/* readonly 变体（消费方手写标记，behavior 不产出） */
 .tag-chip--readonly { background: var(--token-fill-2); color: var(--token-text-muted); }
 
 @keyframes tag-pop {
@@ -14875,21 +14930,6 @@ button.tag,
   box-shadow: var(--icen-ring);
 }
 
-/* 进度条（behavior 可选注入 .upload-list-item-progress） */
-.upload-list-item-progress {
-  height: 2px;
-  width: 100%;
-  background: var(--token-fill-2);
-  border-radius: var(--radius-full);
-  overflow: hidden;
-  margin-top: 2px;
-}
-.upload-list-item-progress-bar {
-  height: 100%;
-  background: var(--token-accent);
-  border-radius: var(--radius-full);
-  transition: width var(--icen-tx-normal) var(--ease-out);
-}
 .upload-list-item.is-error {
   border-color: var(--token-error);
 }

package/docs/spec/ai-native.md

@@ -291,7 +291,7 @@ warning），点击弹层展示完整清单（popover + renderAiTodo 只读）
 </aside>
 ```
 
-- `initAiContext(root?)`：触发器 `[data-ai-context-open]` 全局委托开合；抽屉 fixed 右侧滑入（`--z-chrome`），Esc/外点关闭；`.ai-context--inline` 变体为页面流内嵌（不做 fixed）。
+- `initAiContext(root?)`：触发器 `[data-ai-context-open]` 全局委托开合；抽屉 fixed 右侧滑入（`--z-chrome`），Esc/外点关闭；`.ai-context--inline` 变体为页面流内嵌（不做 fixed）。开/合从抽屉根派 `icen:ai-context-open` / `icen:ai-context-close` `{}`。
 - `renderAiContext(el, { usage?, files?, mcpServers?, skills? })`：组合渲染（内部复用 renderAiUsage / ai-files chip / ai-item 行）。
 - MCP server 行：`.ai-item` 基元 + `is-done`（已连接）/`is-error`（断开）。
 
@@ -388,10 +388,14 @@ export function svgIcon(svg: string): SVGElement | null;  // DOMParser 消毒（
 - `setComposerRefs(el, sources: { kind: 'file'|'folder'|'doc'|'agent', id, label, sub? }[])`：
   任意位置输入 `@` 触发弹层（分组按 kind + 图标）；选中后文本插入 `@label ` 且 refs chip 行 +1，
   派 `icen:ai-ref { action: 'add', ref }`；chip × 移除（同时删文本里首个 `@label`）派 `{ action: 'remove' }`。
+  kind 开放注册：`registerRefKind(kind, { label, icon?, order? })`（照 registerAiKind 的 Map + 兜底模式）；
+  未知且未注册的 kind 不丢弃——通用文档图标 + kind 原文兜底，order 缺省排最后。
 - `setComposerUsage(el, usage, opts)`：工具条右侧挂 `renderAiUsageRing`。
 - 历史：输入为空时按 `↑` 取回上一条已发送文本（会话内历史数组，每 composer 独立）。
 - 运行态（v1 已有 queue/stop）补充：运行中按 `↑` 把最后一条排队消息取回输入框重新编辑（Claude Code 模式）。
 - 弹层接管时键盘事件 preventDefault；IME 组合态安全（沿用 v1）。
+- 三弹层尺寸走 PanelSizing 契约：composer 根 `data-panel-*` 为用户覆盖（三弹层共用），
+  `bindComposer` opts.popoverSizing 整体覆盖，原内置魔数仅为默认。
 - 图标对齐修复：工具条按钮统一 28px 方形、svg 14px 居中、gap 走 density token。
 
 事件新增：`icen:ai-model-change` / `icen:ai-command` / `icen:ai-ref`（全 bubbles）。
@@ -528,12 +532,11 @@ export function normalizeContentParts(raw: unknown): AiContentPart[];
 ### 10.3 工具与文本
 
 ```ts
-export function isAiContentPartArray(v: unknown): v is AiContentPart[];   // 守卫（tool output 多模态探测）
 export function contentToText(content: AiContent): string;                // 拼接全部 text 部件（复制/降级传输用）
 export function aiContentUrl(part: AiContentPart): string | undefined;    // url 或 data URI（渲染 src）
 ```
 
-`AiToolCallModel.output` 保持 `unknown`；`renderAiToolCall` 内部用 `isAiContentPartArray` 探测——数组部件渲染媒体/链接，其余保持 JSON `<pre>`（**MCP 回执的多模态呈现零改动打通**）。
+`AiToolCallModel.output` 保持 `unknown`；`renderAiToolCall` 内部用 `normalizeContentParts` 归一探测——数组部件渲染媒体/链接，其余保持 JSON `<pre>`（**MCP 回执的多模态呈现零改动打通**）。
 
 ### 10.4 估算器
 
@@ -628,7 +631,7 @@ registerAiTool(def) / unregisterAiTool(name) / getAiTool(name) / listAiTools()
 
 ```ts
 createAiToolArea(el, { tools?: string[]; max?: number; itemMinHeight?: number }) → AiToolArea
-// tools 白名单支持通配 'chart-*'；max 超出 LRU 淘汰最旧挂载
+// tools 白名单支持通配 'chart-*'；max 超出 FIFO 淘汰最旧挂载（present:'data' 的工具不占挂载位、不参与淘汰）
 // AiToolArea: { el, count, call(name, input), can(name), setTools, setMax, clear, onChange(fn) }
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@icen.ai/ui",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Icen Design System — 设计 tokens（6 预设 × 明暗）+ 无框架组件 CSS/行为 JS + AI 原生组件族（7 态状态机/多模态/定价审计）+ 图表通用层（ChartSpec 纯 JSON）+ AI 工具体系",
   "repository": {
     "type": "git",