@icen.ai/ui 0.8.1 → 0.9.0

package/dist/components/ai-panel.css

@@ -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/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-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

@@ -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/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';