@icen.ai/ui 0.8.0 → 0.9.0

package/dist/components/ai-panel.css

@@ -399,7 +399,7 @@
   user-select: none;
 }
 
-/* 大号变体（常驻工具栏/头部用） */
+/* 大号变体（消费方变体，常驻头部大号环；behavior 不产出，由使用方手写标记） */
 .ai-usage-ring--lg {
   width: 44px;
   height: 44px;
@@ -680,3 +680,220 @@
   .ai-context { transition: none; }
   .ai-item-status { animation: none; }
 }
+
+/* ══════════════ ai-feedback · 回答反馈（§5.27，behaviors/ai-feedback.ts） ══════════════ */
+
+/*
+ *   <div class="ai-feedback [.is-done]">
+ *     <div class="ai-feedback-votes">
+ *       <button class="ai-feedback-vote is-up [.is-picked]" aria-pressed>svg</button>
+ *       <button class="ai-feedback-vote is-down [.is-picked]" aria-pressed>svg</button>
+ *     </div>
+ *     <div class="ai-feedback-reasons" hidden>
+ *       <button class="ai-feedback-chip [.is-picked]">答案有误</button>…
+ *       <button class="ai-feedback-submit">提交</button>
+ *     </div>
+ *     <div class="ai-feedback-done" hidden>感谢反馈，已关联到该条回答的追踪记录</div>
+ *   </div>
+ *   双钮 28px；is-picked accent 边；.is-done 终态隐藏控件只留小字感谢文案。
+ */
+
+.ai-feedback {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--density-space-sm);
+  min-width: 0;
+}
+
+.ai-feedback-votes {
+  display: inline-flex;
+  gap: 4px;
+}
+
+/* 双钮：28px 方形图标钮 */
+.ai-feedback-vote {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--token-text-muted);
+  cursor: pointer;
+  transition:
+    color var(--icen-tx-fast),
+    border-color var(--icen-tx-fast),
+    background-color var(--icen-tx-fast),
+    opacity var(--icen-tx-fast);
+}
+.ai-feedback-vote svg {
+  width: 14px;
+  height: 14px;
+}
+.ai-feedback-vote:hover {
+  color: var(--token-text);
+  border-color: var(--icen-hover-border);
+  background: var(--token-fill-1);
+}
+.ai-feedback-vote:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+/* 锁定：对侧禁用降透明；选中侧 accent 边 + 浅 accent 底 */
+.ai-feedback-vote:disabled {
+  opacity: 0.45;
+  cursor: default;
+  background: transparent;
+  border-color: var(--token-line-soft);
+}
+.ai-feedback-vote.is-picked {
+  color: var(--token-accent);
+  border-color: var(--token-accent);
+  background: color-mix(in srgb, var(--token-accent) 10%, transparent);
+}
+
+/* 踩因枚举 chips + 提交（点 👎 展开） */
+.ai-feedback-reasons {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--density-space-xs);
+  min-width: 0;
+}
+.ai-feedback-reasons[hidden] {
+  display: none;
+}
+.ai-feedback-chip {
+  padding: 2px 10px;
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: var(--token-text-muted);
+  font-size: var(--density-font-size-xs);
+  line-height: 1.5;
+  cursor: pointer;
+  transition:
+    color var(--icen-tx-fast),
+    border-color var(--icen-tx-fast),
+    background-color var(--icen-tx-fast);
+}
+.ai-feedback-chip:hover {
+  color: var(--token-text);
+  border-color: var(--icen-hover-border);
+}
+.ai-feedback-chip:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.ai-feedback-chip.is-picked {
+  color: var(--token-accent);
+  border-color: var(--token-accent);
+  background: color-mix(in srgb, var(--token-accent) 10%, transparent);
+}
+
+/* 提交钮：小号 ghost（accent 留给状态，非主行动不铺实底） */
+.ai-feedback-submit {
+  padding: 2px 12px;
+  border: 1px solid var(--token-line);
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: var(--token-text);
+  font-size: var(--density-font-size-xs);
+  line-height: 1.5;
+  cursor: pointer;
+  transition:
+    color var(--icen-tx-fast),
+    border-color var(--icen-tx-fast),
+    background-color var(--icen-tx-fast);
+}
+.ai-feedback-submit:hover {
+  color: var(--token-accent);
+  border-color: var(--token-accent);
+  background: color-mix(in srgb, var(--token-accent) 8%, transparent);
+}
+.ai-feedback-submit:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+
+/* 已提交终态：小字感谢文案，控件隐藏 */
+.ai-feedback-done {
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-text-faint);
+}
+.ai-feedback-done[hidden] {
+  display: none;
+}
+.ai-feedback.is-done .ai-feedback-votes,
+.ai-feedback.is-done .ai-feedback-reasons {
+  display: none;
+}
+
+/* ══════════════ ai-usage-metrics · 派生指标明细行（§5.27，renderAiUsage） ══════════════ */
+
+/* 图例下 mono 一行：TTFT 0.8s · 42 tok/s · finish: stop */
+.ai-usage-metrics {
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  color: var(--token-text-faint);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.01em;
+}
+
+/* ══════════════ ai-todo-check · done 描边勾（§5.27，renderAiTodo） ══════════════ */
+
+/* 与 .ai-item-status 同位替换：done 时显勾隐点（:has 守卫——静态手写 DOM 无勾时保留状态点）；
+ * pathLength=1 → stroke-dasharray 1，.is-anim 做 stroke-dashoffset 描边动画（480ms 一次不循环） */
+.ai-todo-check {
+  position: relative;
+  display: none;
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  color: var(--token-success);
+}
+.ai-todo-check svg {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 12px;
+  height: 12px;
+}
+.ai-todo-check path {
+  stroke-dasharray: 1;
+}
+.ai-todo-item.is-done .ai-todo-check {
+  display: inline-flex;
+}
+.ai-todo-item.is-done:has(.ai-todo-check) > .ai-item-status {
+  display: none;
+}
+.ai-todo-check.is-anim path {
+  animation: ai-todo-check-draw var(--ai-todo-check-duration, 480ms) var(--ease-out) 1 forwards;
+}
+@keyframes ai-todo-check-draw {
+  from {
+    stroke-dashoffset: 1;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+/* ── 动效守卫（§5.27 新增段） ── */
+
+@media (prefers-reduced-motion: reduce) {
+  .ai-feedback-vote,
+  .ai-feedback-chip,
+  .ai-feedback-submit {
+    transition: none;
+  }
+  .ai-todo-check.is-anim path {
+    animation: none;
+    stroke-dashoffset: 0;
+  }
+}

package/dist/components/ai-threads.mjs

@@ -0,0 +1,3 @@
+// @icen.ai/ui — kit: ai-threads（CSS + behavior 一行入口；构建产物，勿手改）
+import './ai-chat.css';
+export * from '../behaviors/ai-threads.mjs';

package/dist/components/ai-tool-call.mjs

@@ -1,2 +1,2 @@
 // @icen.ai/ui — kit: ai-tool-call（CSS + behavior 一行入口；构建产物，勿手改）
-import './ai-tool-call.css';
+import './ai-tool.css';

package/dist/components/badge.css

@@ -22,7 +22,7 @@
  *   </span>
  *
  * 变体：--dot 纯圆点 / --sm 小号 / --lg 大号 / --bottom 底部角
- * 语义色：--success（在线）/ --warning / --error / --accent
+ * 语义色：--success（在线）/ --warning / --error / --info / --accent
  */
 
 .badge-host {

package/dist/components/breadcrumb.css

@@ -105,38 +105,6 @@
   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: '→'; }

package/dist/components/chart-calendar.mjs

@@ -1,5 +1,4 @@
 // @icen.ai/ui — kit: chart-calendar（CSS + behavior 一行入口；构建产物，勿手改）
-import './chart-calendar.css';
-import './charts.css';
 import './chart-heatmap.css';
+import './charts.css';
 export { renderCalendar } from '../behaviors/charts.mjs';

package/dist/components/chart-graph.css

@@ -0,0 +1,57 @@
+/*
+ * @icen.ai/ui — Component: chart-graph（知识图谱 / 力导向 node-link 专属样式）
+ * 依赖：charts.css（基座 .chart / tooltip / [data-chart-mark] 交互态 / 可切换图例）
+ *
+ * DOM 由 behaviors/charts.ts 的 renderGraph 构建：
+ *   .chart-graph > svg（360×260 viewBox）
+ *     ├ g.chart-graph-edges > line.chart-graph-edge（line-soft，簇隐藏联动 .is-off）
+ *     └ g.chart-graph-nodes > g.chart-graph-node（transform 定位）
+ *         ├ circle.chart-graph-dot（簇调色；r = 6 + weight 归一 × 12）
+ *         ├ circle.chart-graph-hit（透明命中圆）＋ <title>
+ * 布局确定性（同数据同布局，无随机源）；拖拽 = pointer + 局部松弛（rAF，
+ * 拖拽节点 .is-drag 描边 accent）。
+ */
+
+.chart-graph svg {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+/* 边：不参与命中（交互只留节点），任一端簇隐藏时淡化 */
+.chart-graph-edge {
+  pointer-events: none;
+  transition: opacity var(--icen-tx-fast);
+}
+.chart-graph-edge.is-off {
+  opacity: 0.1;
+}
+
+/* 节点：拖拽抓手（触屏禁默认手势，pointer 拖拽不滚动页面） */
+.chart-graph .chart-graph-node {
+  cursor: grab;
+  touch-action: none;
+}
+.chart-graph .chart-graph-node:active {
+  cursor: grabbing;
+}
+.chart-graph-dot {
+  transition: stroke var(--icen-tx-fast), stroke-width var(--icen-tx-fast);
+}
+/* hover：描边换前景色（bindDatumEvents 挂 .is-hover） */
+.chart-graph-node.is-hover .chart-graph-dot {
+  stroke: var(--token-text);
+  stroke-width: 2;
+}
+/* 拖拽态：accent 描边 */
+.chart-graph-node.is-drag .chart-graph-dot {
+  stroke: var(--token-accent);
+  stroke-width: 2.5;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chart-graph-edge,
+  .chart-graph-dot {
+    transition: none;
+  }
+}

package/dist/components/chart-graph.mjs

@@ -0,0 +1,4 @@
+// @icen.ai/ui — kit: chart-graph（CSS + behavior 一行入口；构建产物，勿手改）
+import './chart-graph.css';
+import './charts.css';
+export { renderGraph, layoutGraph } from '../behaviors/charts.mjs';

package/dist/components/chart-map.mjs

@@ -0,0 +1,3 @@
+// @icen.ai/ui — kit: chart-map（CSS + behavior 一行入口；构建产物，勿手改）
+import './charts.css';
+export { renderMap } from '../behaviors/charts.mjs';

package/dist/components/chart-pie.css

@@ -18,9 +18,3 @@
   height: 132px;
   flex-shrink: 0;
 }
-.chart-donut-center {
-  font-variant-numeric: tabular-nums;
-  text-anchor: middle;
-  fill: var(--token-text);
-  font-weight: 600;
-}

package/dist/components/chart-scatter.mjs

@@ -1,4 +1,4 @@
 // @icen.ai/ui — kit: chart-scatter（CSS + behavior 一行入口；构建产物，勿手改）
 import './chart-scatter.css';
 import './charts.css';
-export { renderScatter } from '../behaviors/charts.mjs';
+export { renderScatter, renderMap } from '../behaviors/charts.mjs';

package/dist/components/charts.css

@@ -78,7 +78,7 @@
   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); }
@@ -170,3 +170,35 @@ svg circle[data-chart-mark].is-hover { stroke-width: 3; }
   text-decoration: line-through;
 }
 .chart-legend--toggle .is-off .chart-legend-dot { opacity: 0.3; }
+
+/* ═══ 知识图谱 / 嵌入地图追加区（graph 专属在独立 chart-graph.css；此处为 map 变体）═══ */
+
+/*
+ * chart-map：embedding 2D 散点（renderMap）—— renderScatter 的去轴变体：
+ * 无刻度文字、只留细虚线网格（预投影坐标的刻度无意义）；点 4px 半透明
+ * （fill-opacity .7，高密度层叠可辨）。DOM 由 behaviors/charts.ts 的
+ * renderMap 构建（.chart-map > svg > g.chart-map-point > dot + hit + title）。
+ * 样式并入基座（map 无独立 css，与 chart-calendar 并入 chart-heatmap 同策略）。
+ */
+.chart-map svg {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+.chart-map .chart-map-point {
+  cursor: pointer;
+}
+.chart-map-dot {
+  transition: transform var(--icen-tx-fast);
+  transform-box: fill-box;
+  transform-origin: center;
+}
+.chart-map-point.is-hover .chart-map-dot {
+  transform: scale(1.5);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chart-map-dot {
+    transition: none;
+  }
+}

package/dist/components/charts.mjs

@@ -10,4 +10,5 @@ import './chart-stack.css';
 import './chart-gauge.css';
 import './chart-sparkline.css';
 import './chart-scatter.css';
+import './chart-graph.css';
 export * from '../behaviors/charts.mjs';

package/dist/components/content.css

@@ -3,6 +3,9 @@
  *
  * 包含：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。
  */
 
@@ -531,22 +534,6 @@
   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);

package/dist/components/datatable.css

@@ -418,7 +418,7 @@
   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; }

package/dist/components/date-picker.css

@@ -3,7 +3,7 @@
  *
  * 契约：
  *   <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>

package/dist/components/kb-access.mjs

@@ -0,0 +1,4 @@
+// @icen.ai/ui — kit: kb-access（CSS + behavior 一行入口；构建产物，勿手改）
+import './kb-perm.css';
+import './kb.css';
+export * from '../behaviors/kb-access.mjs';

package/dist/components/kb-acl.mjs

@@ -0,0 +1,4 @@
+// @icen.ai/ui — kit: kb-acl（CSS + behavior 一行入口；构建产物，勿手改）
+import './kb-perm.css';
+import './kb.css';
+export * from '../behaviors/kb-acl.mjs';