@icen.ai/ui 0.10.0 → 0.11.0

package/dist/components/kb-agent.css

@@ -44,11 +44,11 @@
   position: relative;
   margin: 0;
   border: none;
-  border-radius: 2px;
 /* guard:allow-radius 微构件（bar/dot/track/指示器等图形级，不属容器圆角面） */
+  border-radius: 2px; /* guard:allow-radius 分隔条的图形圆角 */
   background: var(--icen-token-line-soft);
   cursor: col-resize;
   touch-action: none; /* 拖拽需接管触摸滚动（指针事件 preventDefault 的对偶） */
-  transition: background-color 0.16s ease-out;
+  transition: background-color var(--icen-tx-fast);
 }
 .icen-kb-canvas-divider::after {
   content: '';
@@ -58,9 +58,9 @@
   transform: translate(-50%, -50%);
   width: 2px;
   height: 18px;
-  border-radius: 1px;
 /* guard:allow-radius 微构件（bar/dot/track/指示器等图形级，不属容器圆角面） */
+  border-radius: 1px; /* guard:allow-radius 拖动握柄的图形圆角 */
   background: var(--icen-token-line);
-  transition: background-color 0.16s ease-out;
+  transition: background-color var(--icen-tx-fast);
 }
 .icen-kb-canvas-divider:hover,
 .icen-kb-canvas-divider.is-active {
@@ -71,8 +71,8 @@
   background: var(--icen-token-accent);
 }
 .icen-kb-canvas-divider:focus-visible {
-  outline: 2px solid var(--icen-token-accent);
-  outline-offset: -2px;
+  outline: none;
+  box-shadow: var(--icen-ring);
 }
 
 /* 拖拽中：禁文本选择（防划词误触）+ 冻结两栏 hover 抖动 */
@@ -109,25 +109,32 @@
 .icen-kb-canvas-ver {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 6px;
   flex: 0 0 auto;
-  padding: 2px 9px;
+  min-block-size: 24px;
+  padding: 0 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;
+  font-size: var(--icen-font-size-caption);
+  line-height: 1;
   color: var(--icen-token-text-muted);
   cursor: pointer;
-  transition: color 0.16s ease-out, border-color 0.16s ease-out;
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast), border-color var(--icen-tx-fast);
 }
 .icen-kb-canvas-ver:hover {
   color: var(--icen-token-text);
   border-color: var(--icen-token-line);
+  background: var(--icen-token-fill-hover);
+}
+.icen-kb-canvas-ver:active {
+  background: var(--icen-token-fill-pressed);
 }
 .icen-kb-canvas-ver:focus-visible {
-  outline: 2px solid var(--icen-token-accent);
-  outline-offset: -2px;
+  outline: none;
+  box-shadow: var(--icen-ring);
 }
 .icen-kb-canvas-ver-dot {
   width: 6px;
@@ -135,7 +142,7 @@
   border-radius: 50%;
   flex: 0 0 auto;
   background: var(--icen-token-text-faint);
-  transition: background-color 0.16s ease-out;
+  transition: background-color var(--icen-tx-fast);
 }
 .icen-kb-canvas-ver-label {
   color: var(--icen-token-text);
@@ -144,10 +151,11 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-/* current 高亮：点线同色 accent（语义=当前所在版本，非装饰） */
+/* current 高亮：点线同色 accent + 选中底色（语义=当前所在版本，非装饰） */
 .icen-kb-canvas-ver.is-current {
-  color: var(--icen-token-accent);
+  color: var(--icen-token-accent-text);
   border-color: color-mix(in srgb, var(--icen-token-accent) 45%, transparent);
+  background: var(--icen-token-fill-selected);
 }
 .icen-kb-canvas-ver.is-current .icen-kb-canvas-ver-dot {
   background: var(--icen-token-accent);
@@ -161,34 +169,42 @@
   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;
+  background: var(--icen-token-surface-raised);
+  border: 1px solid var(--icen-token-line-soft);
+  box-shadow: var(--icen-token-shadow-elevated);
+  animation: icen-pop-in var(--icen-tx-fast);
   user-select: none;
 }
 .icen-kb-canvas-selbar[hidden] {
   display: none;
 }
 .icen-kb-canvas-selbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-block-size: 24px;
+  padding: 0 9px;
   border: none;
   background: none;
   border-radius: var(--icen-radius-sm);
-  padding: 3px 9px;
   font: inherit;
-  font-size: 12px;
+  font-size: var(--icen-font-size-caption);
+  line-height: 1;
   color: var(--icen-token-text-muted);
   cursor: pointer;
   white-space: nowrap;
-  transition: color 0.16s ease-out, background-color 0.16s ease-out;
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
 }
 .icen-kb-canvas-selbar-btn:hover {
   color: var(--icen-token-text);
-  background: var(--icen-token-bg-soft);
+  background: var(--icen-token-fill-hover);
+}
+.icen-kb-canvas-selbar-btn:active {
+  background: var(--icen-token-fill-pressed);
 }
 .icen-kb-canvas-selbar-btn:focus-visible {
-  outline: 2px solid var(--icen-token-accent);
-  outline-offset: -2px;
+  outline: none;
+  box-shadow: var(--icen-ring);
 }
 
 /* ═══════════════ kb-checkpoint 检查点（§5.24） ═══════════════ */
@@ -204,24 +220,28 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  min-height: 28px;
-  padding: 2px 10px;
+  min-height: var(--icen-density-item-height);
+  padding: 0 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;
+  font-size: var(--icen-font-size-caption);
   color: var(--icen-token-text-muted);
   cursor: pointer;
-  transition: color 0.16s ease-out, border-color 0.16s ease-out;
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast), border-color var(--icen-tx-fast);
 }
 .icen-kb-checkpoint:hover {
   color: var(--icen-token-text);
   border-color: var(--icen-token-line);
+  background: var(--icen-token-fill-hover);
+}
+.icen-kb-checkpoint:active {
+  background: var(--icen-token-fill-pressed);
 }
 .icen-kb-checkpoint:focus-visible {
-  outline: 2px solid var(--icen-token-accent);
-  outline-offset: -2px;
+  outline: none;
+  box-shadow: var(--icen-ring);
 }
 .icen-kb-checkpoint-icon {
   display: inline-flex;
@@ -232,7 +252,7 @@
   height: 14px;
 }
 .icen-kb-checkpoint-time {
-  font-size: 11px;
+  font-size: var(--icen-density-font-size-xs);
 }
 .icen-kb-checkpoint-label {
   max-width: 180px;
@@ -241,7 +261,7 @@
   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);
@@ -251,14 +271,15 @@
   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);
+  background: var(--icen-token-surface-raised);
+  border: 1px solid var(--icen-token-line-soft);
+  box-shadow: var(--icen-token-shadow-elevated);
   border-radius: var(--icen-radius-md);
-  animation: icen-pop-in var(--icen-tx-fast) ease-out;
+  animation: icen-pop-in var(--icen-tx-fast);
 }
 .icen-kb-checkpoint-menu-title {
-  font-size: 11.5px;
+  font-size: var(--icen-density-font-size-xs);
+  letter-spacing: 0.3px;
   color: var(--icen-token-text-faint);
   padding: 4px 8px 6px;
 }
@@ -267,30 +288,34 @@
   align-items: flex-start;
   gap: 8px;
   inline-size: 100%;
+  min-block-size: var(--icen-density-item-height);
   padding: 6px 8px;
   border: none;
   background: none;
-  border-radius: var(--icen-radius-sm);
+  border-radius: var(--icen-radius-xs);
   font: inherit;
-  font-size: 12.5px;
+  font-size: var(--icen-font-size-control);
   color: var(--icen-token-text);
   text-align: start;
   cursor: pointer;
-  transition: background-color 0.16s ease-out;
+  transition: background-color var(--icen-tx-fast), color var(--icen-tx-fast);
 }
 .icen-kb-checkpoint-menu-item:hover {
-  background: var(--icen-token-bg-soft);
+  background: var(--icen-token-fill-hover);
+}
+.icen-kb-checkpoint-menu-item:active {
+  background: var(--icen-token-fill-pressed);
 }
 .icen-kb-checkpoint-menu-item:focus-visible {
-  outline: 2px solid var(--icen-token-accent);
-  outline-offset: -2px;
+  outline: none;
+  box-shadow: var(--icen-ring);
 }
 @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;
+  opacity: var(--icen-disabled-opacity);
   cursor: not-allowed;
 }
 .icen-kb-checkpoint-menu-item:disabled:hover {
@@ -301,7 +326,7 @@
   display: inline-flex;
   justify-content: center;
   color: var(--icen-token-accent);
-  font-size: 12px;
+  font-size: var(--icen-density-font-size-xs);
   line-height: 1.4;
 }
 .icen-kb-checkpoint-menu-main {
@@ -311,7 +336,7 @@
   min-width: 0;
 }
 .icen-kb-checkpoint-menu-note {
-  font-size: 11px;
+  font-size: var(--icen-density-font-size-xs);
   color: var(--icen-token-text-faint);
 }
 
@@ -369,7 +394,7 @@
 }
 .icen-kb-sandbox-err {
   color: var(--icen-token-error);
-  font-size: 12.5px;
+  font-size: var(--icen-font-size-control);
   text-align: center;
 }
 
@@ -386,13 +411,16 @@
 .icen-kb-chain-step {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 6px;
   flex: 0 0 auto;
-  padding: 3px 10px;
+  min-block-size: var(--icen-density-item-height);
+  padding: 0 10px;
   border-radius: var(--icen-radius-full);
-  font-size: 12px;
+  font-size: var(--icen-font-size-caption);
+  line-height: 1;
   color: var(--icen-token-text-muted);
-  transition: color 0.16s ease-out, background-color 0.16s ease-out;
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
 }
 /* 可点（running 及之前）：hover 提供可点暗示，仍走中性色 */
 .icen-kb-chain-step[aria-disabled='false'] {
@@ -400,11 +428,14 @@
 }
 .icen-kb-chain-step[aria-disabled='false']:hover {
   color: var(--icen-token-text);
-  background: var(--icen-token-bg-soft);
+  background: var(--icen-token-fill-hover);
+}
+.icen-kb-chain-step[aria-disabled='false']:active {
+  background: var(--icen-token-fill-pressed);
 }
 .icen-kb-chain-step[aria-disabled='false']:focus-visible {
-  outline: 2px solid var(--icen-token-accent);
-  outline-offset: -2px;
+  outline: none;
+  box-shadow: var(--icen-ring);
 }
 .icen-kb-chain-step[aria-disabled='true'] {
   color: var(--icen-token-text-faint);
@@ -418,7 +449,7 @@
   height: 8px;
   border-radius: 50%;
   flex: 0 0 auto;
-  transition: background-color 0.16s ease-out, border-color 0.16s ease-out;
+  transition: background-color var(--icen-tx-fast), border-color var(--icen-tx-fast);
 }
 .icen-kb-chain-step.is-pending .icen-kb-chain-dot {
   border: 1.5px solid var(--icen-token-line);
@@ -484,6 +515,17 @@
   }
 }
 
+/* ═══════════════ 密度档（compact：收紧留白，可点面保持 24px 下限） ═══════════════ */
+
+[data-icen-density='compact'] .icen-kb-canvas-chat,
+[data-icen-density='compact'] .icen-kb-canvas-doc { padding: 8px 10px; }
+[data-icen-density='compact'] .icen-kb-canvas-versions { padding-block: 4px; }
+[data-icen-density='compact'] .icen-kb-checkpoints { gap: 6px; }
+[data-icen-density='compact'] .icen-kb-checkpoint { min-height: var(--icen-density-item-height); }
+[data-icen-density='compact'] .icen-kb-checkpoint-menu-item { min-block-size: 24px; padding-block: 4px; }
+[data-icen-density='compact'] .icen-kb-chain-step { min-block-size: 24px; }
+[data-icen-density='compact'] .icen-kb-sandbox-stage { min-height: 280px; }
+
 /* ── RTL：步骤链行进箭头镜像（翻转到行内末端并改为左指） ── */
 :is([dir='rtl']) .icen-kb-chain-link::after {
   right: auto; /* guard:allow-physical RTL 镜像规则：箭头移到行内末端（视觉左） */
@@ -491,6 +533,43 @@
   transform: translateY(-50%) rotate(45deg) scaleX(-1);
 }
 
-.icen-kb-checkpoint-menu-check { display: none; }
+/* ═══════════════ 高对比模式：材质回落到系统面，选中/焦点换 Highlight ═══════════════ */
+
+@media (forced-colors: active) {
+  .icen-kb-canvas-selbar,
+  .icen-kb-checkpoint-menu {
+    background: Canvas;
+    border-color: CanvasText;
+    box-shadow: none;
+  }
+  .icen-kb-canvas-selbar-btn,
+  .icen-kb-checkpoint-menu-item { border: 1px solid CanvasText; }
+  .icen-kb-canvas-ver.is-current,
+  .icen-kb-chain-step.is-running,
+  .icen-kb-chain-step.is-error {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+  .icen-kb-canvas-divider { background: CanvasText; }
+  .icen-kb-canvas-divider::after { background: Canvas; }
+  .icen-kb-chain-link { background: CanvasText; }
+  .icen-kb-chain-link::after { border-color: CanvasText; }
+  .icen-kb-chain-dot { border: 1px solid CanvasText; }
+  .icen-kb-chain-step.is-running .icen-kb-chain-dot,
+  .icen-kb-chain-step.is-done .icen-kb-chain-dot,
+  .icen-kb-chain-step.is-error .icen-kb-chain-dot { background: CanvasText; }
+  .icen-kb-sandbox-stage { border-color: CanvasText; }
+  .icen-kb-sandbox-err { border: 1px solid CanvasText; }
+  .icen-kb-canvas-divider:focus-visible,
+  .icen-kb-canvas-ver:focus-visible,
+  .icen-kb-canvas-selbar-btn:focus-visible,
+  .icen-kb-checkpoint:focus-visible,
+  .icen-kb-checkpoint-menu-item:focus-visible,
+  .icen-kb-chain-step[aria-disabled='false']:focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+    box-shadow: none;
+  }
+}
 
 }

package/dist/components/kb-answer.d.mts

@@ -0,0 +1,2 @@
+// kit: kb-answer 类型面（构建产物，勿手改）
+export * from '../behaviors/kb-answer.mjs';

package/dist/components/kb-audit.d.mts

@@ -0,0 +1,2 @@
+// kit: kb-audit 类型面（构建产物，勿手改）
+export * from '../behaviors/kb-audit.mjs';

package/dist/components/kb-canvas.d.mts

@@ -0,0 +1,2 @@
+// kit: kb-canvas 类型面（构建产物，勿手改）
+export * from '../behaviors/kb-canvas.mjs';

package/dist/components/kb-chain.d.mts

@@ -0,0 +1,2 @@
+// kit: kb-chain 类型面（构建产物，勿手改）
+export * from '../behaviors/kb-chain.mjs';

package/dist/components/kb-checkpoint.d.mts

@@ -0,0 +1,2 @@
+// kit: kb-checkpoint 类型面（构建产物，勿手改）
+export * from '../behaviors/kb-checkpoint.mjs';

package/dist/components/kb-chunks.d.mts

@@ -0,0 +1,2 @@
+// kit: kb-chunks 类型面（构建产物，勿手改）
+export * from '../behaviors/kb-chunks.mjs';

package/dist/components/kb-citation.d.mts

@@ -0,0 +1,2 @@
+// kit: kb-citation 类型面（构建产物，勿手改）
+export * from '../behaviors/kb-citation.mjs';

package/dist/components/kb-clarify.d.mts

@@ -0,0 +1,2 @@
+// kit: kb-clarify 类型面（构建产物，勿手改）
+export * from '../behaviors/kb-clarify.mjs';

package/dist/components/kb-conflict.d.mts

@@ -0,0 +1,2 @@
+// kit: kb-conflict 类型面（构建产物，勿手改）
+export * from '../behaviors/kb-conflict.mjs';

package/dist/components/kb-connector.d.mts

@@ -0,0 +1,2 @@
+// kit: kb-connector 类型面（构建产物，勿手改）
+export * from '../behaviors/kb-connector.mjs';