@icen.ai/ui 0.8.1 → 0.10.0

package/dist/components/kb-agent.css

@@ -0,0 +1,496 @@
+@layer icen.components {
+/*
+ * @icen.ai/ui — kb-agent.css（工作台域：kb-canvas / kb-checkpoint / kb-sandbox / kb-chain）
+ * 共享原语在 kb.css（.icen-kb-num/.icen-kb-dot/.icen-kb-key/kb-pulse 等，全部 kb-* slug 经 EXTRA_CSS 引入）；
+ * 本文件只做本域专属结构。DOM 契约见 docs/spec/kb-family.md §5.23–5.26 与各 behavior 头注释。
+ *
+ * 域纪律（spec §2）：工作台域的运动感来自动效（120–240ms ease-out），不来自颜色——
+ * 色只标语义（accent=进行中 / success=完成 / danger=失败），不做装饰。
+ * 动效预算：展开/浮层进场 160ms（icen-pop-in）；流式脉冲 1.6s（kb.css 的 kb-pulse）；
+ * prefers-reduced-motion 下全部退化为瞬时。
+ */
+
+/* ═══════════════ kb-canvas 双栏工作台（§5.23） ═══════════════ */
+
+.icen-kb-canvas {
+  --kb-canvas-ratio: 0.42; /* JS 拖拽时原位覆写（0–1，无单位） */
+  position: relative; /* 划词工具条（.icen-kb-canvas-selbar）的定位包含块 */
+  display: flex;
+  flex-direction: column;
+  min-height: 320px;
+}
+
+.icen-kb-canvas-main {
+  display: grid;
+  grid-template-columns:
+    minmax(0, calc(var(--kb-canvas-ratio) * 100%))
+    6px
+    minmax(0, 1fr);
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.icen-kb-canvas-chat,
+.icen-kb-canvas-doc {
+  min-height: 0;
+  min-width: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 10px 12px;
+}
+
+/* 分隔条：6px 命中区 + 中央 grip 视觉；hover/拖拽点亮 accent（唯一强调处） */
+.icen-kb-canvas-divider {
+  position: relative;
+  margin: 0;
+  border: none;
+  border-radius: 2px;
 /* guard:allow-radius 微构件（bar/dot/track/指示器等图形级，不属容器圆角面） */
+  background: var(--icen-token-line-soft);
+  cursor: col-resize;
+  touch-action: none; /* 拖拽需接管触摸滚动（指针事件 preventDefault 的对偶） */
+  transition: background-color 0.16s ease-out;
+}
+.icen-kb-canvas-divider::after {
+  content: '';
+  position: absolute;
+  left: 50%; /* guard:allow-physical 分隔条圆点居中（translate(-50%,-50%) 配套） */
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 2px;
+  height: 18px;
+  border-radius: 1px;
 /* guard:allow-radius 微构件（bar/dot/track/指示器等图形级，不属容器圆角面） */
+  background: var(--icen-token-line);
+  transition: background-color 0.16s ease-out;
+}
+.icen-kb-canvas-divider:hover,
+.icen-kb-canvas-divider.is-active {
+  background: color-mix(in srgb, var(--icen-token-accent) 22%, transparent);
+}
+.icen-kb-canvas-divider:hover::after,
+.icen-kb-canvas-divider.is-active::after {
+  background: var(--icen-token-accent);
+}
+.icen-kb-canvas-divider:focus-visible {
+  outline: 2px solid var(--icen-token-accent);
+  outline-offset: -2px;
+}
+
+/* 拖拽中：禁文本选择（防划词误触）+ 冻结两栏 hover 抖动 */
+.icen-kb-canvas.is-dragging {
+  user-select: none;
+}
+.icen-kb-canvas.is-dragging .icen-kb-canvas-chat,
+.icen-kb-canvas.is-dragging .icen-kb-canvas-doc {
+  pointer-events: none;
+}
+
+/* 右栏内联 diff 间距（渲染复用 ai-diff.css 的 .icen-ai-diff） */
+.icen-kb-canvas-diff {
+  margin-bottom: 12px;
+}
+.icen-kb-canvas-diff:last-child {
+  margin-bottom: 0;
+}
+
+/* 底部版本时间轴：横向节点流；display:flex 会压掉 UA 的 [hidden]，须显式声明 */
+.icen-kb-canvas-versions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+  padding: 6px 10px;
+  border-top: 1px solid var(--icen-token-line-soft);
+  overflow-x: auto;
+}
+.icen-kb-canvas-versions[hidden] {
+  display: none;
+}
+
+.icen-kb-canvas-ver {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+  padding: 2px 9px;
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-full);
+  background: var(--icen-token-bg-soft);
+  font: inherit;
+  font-size: 11.5px;
+  color: var(--icen-token-text-muted);
+  cursor: pointer;
+  transition: color 0.16s ease-out, border-color 0.16s ease-out;
+}
+.icen-kb-canvas-ver:hover {
+  color: var(--icen-token-text);
+  border-color: var(--icen-token-line);
+}
+.icen-kb-canvas-ver:focus-visible {
+  outline: 2px solid var(--icen-token-accent);
+  outline-offset: -2px;
+}
+.icen-kb-canvas-ver-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex: 0 0 auto;
+  background: var(--icen-token-text-faint);
+  transition: background-color 0.16s ease-out;
+}
+.icen-kb-canvas-ver-label {
+  color: var(--icen-token-text);
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* current 高亮：点线同色 accent（语义=当前所在版本，非装饰） */
+.icen-kb-canvas-ver.is-current {
+  color: var(--icen-token-accent);
+  border-color: color-mix(in srgb, var(--icen-token-accent) 45%, transparent);
+}
+.icen-kb-canvas-ver.is-current .icen-kb-canvas-ver-dot {
+  background: var(--icen-token-accent);
+}
+
+/* 划词工具条：浮层三档材质；1.5s 无操作由 JS 隐藏 */
+.icen-kb-canvas-selbar {
+  position: absolute;
+  z-index: var(--icen-z-popover);
+  display: flex;
+  gap: 2px;
+  padding: 3px;
+  border-radius: var(--icen-radius-md);
+  background: color-mix(in srgb, var(--icen-token-card-strong) 94%, transparent);
+  border: 1px solid var(--icen-token-outline);
+  box-shadow: var(--icen-token-shadow-overlay);
+  animation: icen-pop-in var(--icen-tx-fast) ease-out;
+  user-select: none;
+}
+.icen-kb-canvas-selbar[hidden] {
+  display: none;
+}
+.icen-kb-canvas-selbar-btn {
+  border: none;
+  background: none;
+  border-radius: var(--icen-radius-sm);
+  padding: 3px 9px;
+  font: inherit;
+  font-size: 12px;
+  color: var(--icen-token-text-muted);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color 0.16s ease-out, background-color 0.16s ease-out;
+}
+.icen-kb-canvas-selbar-btn:hover {
+  color: var(--icen-token-text);
+  background: var(--icen-token-bg-soft);
+}
+.icen-kb-canvas-selbar-btn:focus-visible {
+  outline: 2px solid var(--icen-token-accent);
+  outline-offset: -2px;
+}
+
+/* ═══════════════ kb-checkpoint 检查点（§5.24） ═══════════════ */
+
+.icen-kb-checkpoints {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.icen-kb-checkpoint {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 28px;
+  padding: 2px 10px;
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-sm);
+  background: var(--icen-token-bg-soft);
+  font: inherit;
+  font-size: 12px;
+  color: var(--icen-token-text-muted);
+  cursor: pointer;
+  transition: color 0.16s ease-out, border-color 0.16s ease-out;
+}
+.icen-kb-checkpoint:hover {
+  color: var(--icen-token-text);
+  border-color: var(--icen-token-line);
+}
+.icen-kb-checkpoint:focus-visible {
+  outline: 2px solid var(--icen-token-accent);
+  outline-offset: -2px;
+}
+.icen-kb-checkpoint-icon {
+  display: inline-flex;
+  color: var(--icen-token-text-faint);
+}
+.icen-kb-checkpoint-icon svg {
+  width: 14px;
+  height: 14px;
+}
+.icen-kb-checkpoint-time {
+  font-size: 11px;
+}
+.icen-kb-checkpoint-label {
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Restore menu: shared floating material; selection uses a contained surface. */
+.icen-kb-checkpoint-menu {
+  position: fixed;
+  z-index: var(--icen-z-popover);
+  min-inline-size: min(248px, calc(100vw - 24px));
+  max-inline-size: min(320px, calc(100vw - 24px));
+  overflow: auto;
+  overscroll-behavior: contain;
+  margin: 0;
+  padding: 6px;
+  background: color-mix(in srgb, var(--icen-token-card-strong) 94%, transparent);
+  border: 1px solid var(--icen-token-outline);
+  box-shadow: var(--icen-token-shadow-overlay);
+  border-radius: var(--icen-radius-md);
+  animation: icen-pop-in var(--icen-tx-fast) ease-out;
+}
+.icen-kb-checkpoint-menu-title {
+  font-size: 11.5px;
+  color: var(--icen-token-text-faint);
+  padding: 4px 8px 6px;
+}
+.icen-kb-checkpoint-menu-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  inline-size: 100%;
+  padding: 6px 8px;
+  border: none;
+  background: none;
+  border-radius: var(--icen-radius-sm);
+  font: inherit;
+  font-size: 12.5px;
+  color: var(--icen-token-text);
+  text-align: start;
+  cursor: pointer;
+  transition: background-color 0.16s ease-out;
+}
+.icen-kb-checkpoint-menu-item:hover {
+  background: var(--icen-token-bg-soft);
+}
+.icen-kb-checkpoint-menu-item:focus-visible {
+  outline: 2px solid var(--icen-token-accent);
+  outline-offset: -2px;
+}
+@media (pointer: coarse) {
+  .icen-kb-checkpoint-menu-item { min-block-size: 44px; }
+}
+.icen-kb-checkpoint-menu-item.is-disabled,
+.icen-kb-checkpoint-menu-item:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.icen-kb-checkpoint-menu-item:disabled:hover {
+  background: none;
+}
+.icen-kb-checkpoint-menu-check {
+  flex: 0 0 14px;
+  display: inline-flex;
+  justify-content: center;
+  color: var(--icen-token-accent);
+  font-size: 12px;
+  line-height: 1.4;
+}
+.icen-kb-checkpoint-menu-main {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.icen-kb-checkpoint-menu-note {
+  font-size: 11px;
+  color: var(--icen-token-text-faint);
+}
+
+/* ═══════════════ kb-sandbox 沙箱工具容器（§5.25） ═══════════════ */
+
+.icen-kb-sandbox {
+  position: relative;
+  display: block;
+}
+
+.icen-kb-sandbox-stage {
+  position: relative;
+  aspect-ratio: 16 / 9;
+  min-height: 320px;
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-md);
+  overflow: hidden;
+  background: var(--icen-token-bg);
+}
+
+.icen-kb-sandbox-frame {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: transparent;
+}
+.icen-kb-sandbox[data-icen-state='idle'] .icen-kb-sandbox-frame {
+  display: none; /* 未 load 前不露空白帧 */
+}
+
+/* 三态由 data-icen-state 驱动（纯 CSS 状态优先纪律）；loading 走共享 icen-spin */
+.icen-kb-sandbox-loading,
+.icen-kb-sandbox-err {
+  position: absolute;
+  inset: 0;
+  display: none;
+  place-items: center;
+  padding: 16px;
+  background: var(--icen-token-bg);
+}
+.icen-kb-sandbox[data-icen-state='loading'] .icen-kb-sandbox-loading {
+  display: grid;
+}
+.icen-kb-sandbox[data-icen-state='error'] .icen-kb-sandbox-err {
+  display: grid;
+}
+.icen-kb-sandbox-spin {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 2px solid var(--icen-token-line-soft);
+  border-top-color: var(--icen-token-accent);
+  animation: icen-spin 0.8s linear infinite;
+}
+.icen-kb-sandbox-err {
+  color: var(--icen-token-error);
+  font-size: 12.5px;
+  text-align: center;
+}
+
+/* ═══════════════ kb-chain 工具链条（§5.26） ═══════════════ */
+
+.icen-kb-chain {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  padding: 2px 0;
+  overflow-x: auto;
+}
+
+.icen-kb-chain-step {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+  padding: 3px 10px;
+  border-radius: var(--icen-radius-full);
+  font-size: 12px;
+  color: var(--icen-token-text-muted);
+  transition: color 0.16s ease-out, background-color 0.16s ease-out;
+}
+/* 可点（running 及之前）：hover 提供可点暗示，仍走中性色 */
+.icen-kb-chain-step[aria-disabled='false'] {
+  cursor: pointer;
+}
+.icen-kb-chain-step[aria-disabled='false']:hover {
+  color: var(--icen-token-text);
+  background: var(--icen-token-bg-soft);
+}
+.icen-kb-chain-step[aria-disabled='false']:focus-visible {
+  outline: 2px solid var(--icen-token-accent);
+  outline-offset: -2px;
+}
+.icen-kb-chain-step[aria-disabled='true'] {
+  color: var(--icen-token-text-faint);
+  cursor: default;
+}
+
+/* 状态点：空心灰（pending）/ accent 脉冲（running）/ 实心绿（done）/ 实心红（error） */
+.icen-kb-chain-dot {
+  box-sizing: border-box;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex: 0 0 auto;
+  transition: background-color 0.16s ease-out, border-color 0.16s ease-out;
+}
+.icen-kb-chain-step.is-pending .icen-kb-chain-dot {
+  border: 1.5px solid var(--icen-token-line);
+  background: transparent;
+}
+.icen-kb-chain-step.is-running .icen-kb-chain-dot {
+  background: var(--icen-token-accent);
+  animation: kb-pulse 1.6s ease-in-out infinite; /* kb.css 共享脉冲 */
+}
+.icen-kb-chain-step.is-done .icen-kb-chain-dot {
+  background: var(--icen-token-success);
+}
+.icen-kb-chain-step.is-error .icen-kb-chain-dot {
+  background: var(--icen-token-error);
+}
+
+.icen-kb-chain-label {
+  white-space: nowrap;
+}
+
+/* 步骤间箭头连线：基线 + 45° 折角箭头（指向行进方向），中性层级色；RTL 镜像规则移到行内末端并翻转为左指 */
+.icen-kb-chain-link {
+  position: relative;
+  flex: 0 0 18px;
+  height: 1px;
+  margin: 0 2px;
+  background: var(--icen-token-line-soft);
+}
+.icen-kb-chain-link::after {
+  content: '';
+  position: absolute;
+  right: 1px; /* guard:allow-physical 箭头钉在连线物理末端（LTR 行进方向），RTL 镜像规则改到 left 并翻转指向 */
+  top: 50%;
+  width: 5px;
+  height: 5px;
+  border-top: 1px solid var(--icen-token-line); /* guard:allow-physical 折角箭头半边构成（与 rotate(45deg) 配套） */
+  border-right: 1px solid var(--icen-token-line); /* guard:allow-physical 折角箭头半边构成 */
+  transform: translateY(-50%) rotate(45deg);
+}
+
+/* ═══════════════ 动效纪律（reduced-motion 全退化） ═══════════════ */
+
+@media (prefers-reduced-motion: reduce) {
+  .icen-kb-canvas-divider,
+  .icen-kb-canvas-divider::after,
+  .icen-kb-canvas-ver,
+  .icen-kb-canvas-ver-dot,
+  .icen-kb-canvas-selbar,
+  .icen-kb-canvas-selbar-btn,
+  .icen-kb-checkpoint,
+  .icen-kb-checkpoint-menu,
+  .icen-kb-checkpoint-menu-item,
+  .icen-kb-chain-step,
+  .icen-kb-chain-dot {
+    transition: none;
+    animation: none;
+  }
+  .icen-kb-chain-step.is-running .icen-kb-chain-dot {
+    animation: none; /* 脉冲退化为静态 accent 点 */
+  }
+  .icen-kb-sandbox-spin {
+    animation-duration: 1.6s; /* 旋转保留但放慢，避免频闪不适 */
+  }
+}
+
+/* ── RTL：步骤链行进箭头镜像（翻转到行内末端并改为左指） ── */
+:is([dir='rtl']) .icen-kb-chain-link::after {
+  right: auto; /* guard:allow-physical RTL 镜像规则：箭头移到行内末端（视觉左） */
+  left: 1px; /* guard:allow-physical RTL 镜像规则：箭头钉在视觉左端 */
+  transform: translateY(-50%) rotate(45deg) scaleX(-1);
+}
+
+.icen-kb-checkpoint-menu-check { display: none; }
+
+}

package/dist/components/kb-answer.mjs

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

package/dist/components/kb-audit.mjs

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

package/dist/components/kb-canvas.mjs

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

package/dist/components/kb-chain.mjs

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

package/dist/components/kb-checkpoint.mjs

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

package/dist/components/kb-chunks.mjs

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

package/dist/components/kb-citation.mjs

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

package/dist/components/kb-clarify.mjs

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

package/dist/components/kb-conflict.mjs

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

package/dist/components/kb-connector.mjs

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