@icen.ai/ui 0.10.0 → 0.11.0

package/dist/components/ai-panel.css

@@ -52,7 +52,7 @@
  *     同页面共存时后加载者覆盖同款属性，视觉不冲突。
  *   - keyframes ai-status-pulse 为组件局部定义（等同 pill.css 的 pill-pulse），
  *     时长走 var(--pill-pulse-duration, 1.5s)：pill.css 在场时与其同步，否则自洽。
- *   - blink keyframes 来自 tokens/colors.css（.icen-animate-blink 同款，共享复用）。
+ *   - icen-blink keyframes 来自 base.css（共享复用）。
  *   - base.css：--icen-z-chrome / --icen-tx-* / --icen-ring。只消费 --icen-token-* / --icen-density-* / --icen-radius-*。
  */
 
@@ -208,13 +208,13 @@
   height: 4px;
   border-radius: var(--icen-radius-full);
   overflow: hidden;
-  background: color-mix(in srgb, var(--icen-token-line-soft) 40%, transparent);
+  background: var(--icen-token-fill-2);
 }
 .icen-ai-todo-bar > i {
   display: block;
   height: 100%;
   border-radius: var(--icen-radius-full);
-  background: var(--icen-token-accent);
+  background: var(--icen-token-accent-strong);
   transition: width var(--icen-tx-slow);
 }
 .icen-ai-todo.is-complete .icen-ai-todo-bar > i {
@@ -236,7 +236,7 @@
   transition: background-color var(--icen-tx-fast);
 }
 .icen-ai-todo-item[role='button']:hover {
-  background: var(--icen-token-fill-1);
+  background: var(--icen-token-fill-hover);
 }
 .icen-ai-todo-item:focus-visible {
   outline: none;
@@ -436,7 +436,7 @@
   display: flex;
   flex-direction: column;
   background: var(--icen-token-surface);
-  border-inline-start: 1px solid var(--icen-token-line-soft);
+  border-inline-start: 1px solid var(--icen-token-separator);
   box-shadow: var(--icen-token-shadow-overlay);
   transform: translateX(100%); /* guard:allow-physical 隐藏位沿物理右缘滑出（LTR 抽屉侧），RTL 镜像规则翻为 translateX(-100%) */
   transition: transform var(--ai-context-duration, var(--icen-duration-normal)) var(--icen-ease-out);
@@ -457,9 +457,9 @@
   z-index: auto;
   transform: none;
   transition: none;
-  border: 1px solid var(--icen-token-line-soft);
-  border-radius: var(--icen-radius-md);
-  box-shadow: var(--icen-token-shadow-elevated);
+  border: 1px solid var(--icen-token-separator-soft);
+  border-radius: var(--icen-control-radius-lg);
+  box-shadow: none;
   overflow-y: visible;
 }
 
@@ -471,8 +471,10 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--icen-density-space-sm);
-  padding: var(--icen-density-space-sm) var(--icen-density-space-md);
-  background: var(--icen-token-surface);
+  min-block-size: 42px;
+  padding: 8px 12px;
+  background: var(--icen-token-surface-chrome);
+  border-bottom: 1px solid var(--icen-token-separator-soft);
   border-bottom: 1px solid var(--icen-token-line-soft);
   font-size: var(--icen-density-font-size-sm);
   font-weight: 600;

package/dist/components/ai-reasoning.d.mts

@@ -0,0 +1,2 @@
+// kit: ai-reasoning 类型面（构建产物，勿手改）
+export { createAiStream, initAiChat } from '../behaviors/ai-chat.mjs';

package/dist/components/ai-subagent.d.mts

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

package/dist/components/ai-subagent.mjs

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

package/dist/components/ai-threads.d.mts

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

package/dist/components/ai-todo.d.mts

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

package/dist/components/ai-todo.mjs

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

package/dist/components/ai-tool-call.d.mts

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

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

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

package/dist/components/ai-tool.css

@@ -102,7 +102,7 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--icen-density-space-sm);
+  gap: var(--icen-control-gap);
   min-width: 0;
   align-self: stretch;  /* 宽度自稳定：宿主 flex/grid 居中时不 shrink-wrap（width:100% 会塌成 min-content，禁用） */
 }
@@ -112,16 +112,16 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  inline-size: 28px;
-  block-size: 28px;
-  border-radius: var(--icen-radius-sm);
+  inline-size: 24px;
+  block-size: 24px;
+  border-radius: var(--icen-radius-xs);
   background: color-mix(in srgb, var(--ai-item-tint) 8%, var(--icen-token-surface));
   color: var(--ai-item-tint);
   transition: color var(--icen-tx-fast);
 }
 .icen-ai-item-icon > svg {
-  width: 16px;
-  height: 16px;
+  width: 15px;
+  height: 15px;
 }
 
 .icen-ai-item-main {
@@ -132,7 +132,7 @@
   gap: 1px;
 }
 .icen-ai-item-title {
-  font-size: var(--icen-density-font-size-md);
+  font-size: var(--icen-font-size-control);
   line-height: 1.4;
   color: var(--icen-token-text);
   overflow: hidden;
@@ -196,13 +196,13 @@
   50% { opacity: 0.4; transform: scale(0.7); }
 }
 
-/* 流式中：▍光标闪烁（复用 colors.css 的 blink keyframes，animate-blink 同款） */
+/* 流式中：▍光标闪烁（共享 base.css 的 icen-blink keyframes） */
 :is(.icen-ai-item, .icen-ai-tool, .icen-ai-subagent).is-streaming .icen-ai-item-status {
   width: 3px;
   height: 12px;
   border-radius: 1px; /* guard:allow-radius 微构件（bar/dot/track/指示器等图形级，不属容器圆角面） */
   background: var(--ai-item-tint);
-  animation: blink var(--ai-item-blink-duration) step-end infinite;
+  animation: icen-blink var(--ai-item-blink-duration) step-end infinite;
 }
 
 /* 待人确认：warning 点 + 外环 */
@@ -243,8 +243,8 @@
 .icen-ai-tool {
   --ai-item-tint: var(--icen-token-accent);
   align-self: stretch;  /* 宽度自稳定：宿主 flex/grid 居中时不 shrink-wrap */
-  border: 1px solid var(--icen-token-line-soft);
-  border-radius: var(--icen-radius-md);
+  border: 1px solid var(--icen-token-separator-soft);
+  border-radius: var(--icen-control-radius-lg);
   background: var(--icen-token-surface);
 }
 
@@ -276,9 +276,9 @@
 .icen-ai-subagent-head {
   display: flex;
   align-items: center;
-  gap: var(--icen-density-space-sm);
+  gap: var(--icen-control-gap-sm);
   width: 100%;
-  padding: var(--icen-density-space-xs) var(--icen-density-space-sm);
+  padding: 4px var(--icen-density-space-sm);
   border: none;
   border-radius: inherit; /* hover 底色不戳破卡片圆角 */
   background: transparent;
@@ -291,7 +291,7 @@
 }
 .icen-ai-tool-head:hover,
 .icen-ai-subagent-head:hover {
-  background: var(--icen-token-fill-1);
+  background: var(--icen-token-fill-hover);
 }
 .icen-ai-tool-head:focus-visible,
 .icen-ai-subagent-head:focus-visible {
@@ -303,9 +303,9 @@
 .icen-ai-tool-body {
   display: flex;
   flex-direction: column;
-  gap: var(--icen-density-space-sm);
+  gap: var(--icen-control-gap-sm);
   padding: var(--icen-density-space-sm);
-  border-top: 1px solid var(--icen-token-line-soft);
+  border-top: 1px solid var(--icen-token-separator-soft);
   animation: icen-pop-in var(--icen-tx-fast);
 }
 .icen-ai-tool-body[hidden],

package/dist/components/ai-usage.d.mts

@@ -0,0 +1,2 @@
+// kit: ai-usage 类型面（构建产物，勿手改）
+export { renderAiUsage, renderAiUsageRing, renderAiAudit } from '../behaviors/ai-panel.mjs';

package/dist/components/alert.d.mts

@@ -0,0 +1,2 @@
+// kit: alert 类型面（构建产物，勿手改）
+export {};

package/dist/components/autocomplete.css

@@ -12,11 +12,11 @@
   z-index: var(--icen-z-popover);
   overflow-y: auto;
   overscroll-behavior: contain;
-  padding: 4px;
-  background: var(--icen-token-card-strong);
-  border: 1px solid var(--icen-token-outline);
-  border-radius: var(--icen-radius-md);
-  box-shadow: var(--icen-token-shadow-overlay);
+  padding: var(--icen-density-space-xs);
+  background: var(--icen-token-surface);
+  border: 1px solid var(--icen-token-material-edge);
+  border-radius: var(--icen-radius-lg);
+  box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-elevated);
   transform-origin: top center;
   animation: icen-pop-in var(--icen-tx-fast);
 }
@@ -25,20 +25,20 @@
 .icen-autocomplete-option {
   display: flex;
   align-items: center;
-  gap: var(--icen-density-space-xs);
-  padding: 6px var(--icen-density-space-sm);
-  font-size: var(--icen-density-font-size-sm);
+  gap: var(--icen-control-gap-sm);
+  padding: 4px var(--icen-density-space-sm);
+  font-size: var(--icen-font-size-control);
   color: var(--icen-token-text);
-  border-radius: var(--icen-radius-sm);
+  border-radius: var(--icen-radius-xs);
   cursor: pointer;
-  min-block-size: var(--icen-density-input-height-sm);
+  min-block-size: var(--icen-control-height-sm);
   overflow-wrap: anywhere;
   transition:
     background-color var(--icen-tx-fast),
     color var(--icen-tx-fast);
 }
-.icen-autocomplete-option:hover { background: var(--icen-token-fill-1); }
-.icen-autocomplete-option.is-active { background: var(--icen-token-fill-2); }
+.icen-autocomplete-option:hover { background: var(--icen-token-fill-hover); }
+.icen-autocomplete-option.is-active { background: var(--icen-token-fill-selected); }
 
 /* 命中片段高亮（behavior 以 <mark> 包裹 query 命中，大小写不敏感） */
 .icen-autocomplete-option mark {

package/dist/components/autocomplete.d.mts

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

package/dist/components/avatar.d.mts

@@ -0,0 +1,2 @@
+// kit: avatar 类型面（构建产物，勿手改）
+export {};

package/dist/components/back-top.css

@@ -11,6 +11,7 @@
  *      initBackTop({ autoCreate: true })   // 自动创建一个默认样式的按钮
  *
  * 默认滚动超过 320px 后出现；点击后 window.scrollTo({ top: 0, behavior: 'smooth' })。
+ * 视觉：36px 玻璃浮钮 + 发丝边；无 backdrop-filter 或减少透明偏好时回落实面。
  */
 
 .icen-back-top {
@@ -21,23 +22,26 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
+  width: 36px;
+  height: 36px;
   padding: 0;
-  background: var(--icen-token-card-strong);
+  background: var(--icen-token-surface-glass);
+  -webkit-backdrop-filter: blur(var(--icen-material-blur-floating)) saturate(var(--icen-material-saturate));
+  backdrop-filter: blur(var(--icen-material-blur-floating)) saturate(var(--icen-material-saturate));
   color: var(--icen-token-text-muted);
-  border: 1px solid var(--icen-token-outline-soft);
+  border: 1px solid var(--icen-token-material-edge);
   border-radius: var(--icen-radius-full);
-  box-shadow: var(--icen-token-shadow-overlay);
+  box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-elevated);
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   opacity: 0;
-  transform: translateY(12px) scale(0.9);
+  transform: translateY(10px) scale(0.94);
   pointer-events: none;
   transition:
     opacity var(--icen-tx-normal),
     transform var(--icen-tx-normal),
     color var(--icen-tx-fast),
+    background-color var(--icen-tx-fast),
     border-color var(--icen-tx-fast);
 }
 .icen-back-top.is-shown {
@@ -46,30 +50,35 @@
   pointer-events: auto;
 }
 .icen-back-top:hover {
-  color: var(--icen-token-accent);
-  border-color: var(--icen-token-accent);
+  color: var(--icen-token-text);
+  border-color: var(--icen-token-line-strong);
+  background: var(--icen-token-surface-raised);
+}
+.icen-back-top:active {
+  transform: translateY(0) scale(0.97);
+  background: var(--icen-token-surface-pressed);
 }
 .icen-back-top:focus-visible {
   outline: none;
-  box-shadow: var(--icen-token-shadow-overlay), var(--icen-ring);
+  box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-elevated), var(--icen-ring);
 }
 .icen-back-top svg {
-  width: 18px;
-  height: 18px;
+  width: 17px;
+  height: 17px;
   flex-shrink: 0;
 }
 
 /* 尺寸变体 */
 .icen-back-top--sm {
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
 }
 .icen-back-top--sm svg { width: 14px; height: 14px; }
 .icen-back-top--lg {
-  width: 48px;
-  height: 48px;
+  width: 44px;
+  height: 44px;
 }
-.icen-back-top--lg svg { width: 22px; height: 22px; }
+.icen-back-top--lg svg { width: 20px; height: 20px; }
 
 /* 方向变体：箭头方向（默认上） */
 .icen-back-top[data-icen-dir='left'] svg { transform: rotate(90deg); }
@@ -83,6 +92,28 @@
   }
 }
 
+/* 没有模糊能力时用实面，避免半透明底压字 */
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .icen-back-top { background: var(--icen-token-surface-raised); }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .icen-back-top {
+    background: var(--icen-token-surface-raised);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .icen-back-top {
+    background: Canvas;
+    border-color: CanvasText;
+    box-shadow: none;
+    forced-color-adjust: none;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .icen-back-top { transition: opacity var(--icen-tx-fast); transform: none !important; /* guard:allow-important 动效守卫：降级媒体查询需压制组件动画 */ }
   .icen-back-top.is-shown { transform: none !important; /* guard:allow-important 动效守卫：降级媒体查询需压制组件动画 */ }

package/dist/components/back-top.d.mts

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

package/dist/components/badge.css

@@ -54,7 +54,7 @@
   background: var(--icen-token-error);
   border: 2px solid var(--icen-token-surface);
   border-radius: var(--icen-radius-full);
-  box-shadow: var(--icen-token-shadow-inset);
+  box-shadow: none;
   pointer-events: none;
   white-space: nowrap;
   transform-origin: center;

package/dist/components/badge.d.mts

@@ -0,0 +1,2 @@
+// kit: badge 类型面（构建产物，勿手改）
+export {};

package/dist/components/breadcrumb.css

@@ -23,7 +23,7 @@
 .icen-breadcrumb {
   display: flex;
   align-items: center;
-  font-size: var(--icen-density-font-size-md);
+  font-size: var(--icen-font-size-control);
 }
 .icen-breadcrumb ol {
   display: flex;
@@ -54,7 +54,7 @@
   transition: color var(--icen-tx-fast);
 }
 .icen-breadcrumb-link:hover {
-  color: var(--icen-token-accent);
+  color: var(--icen-token-text);
   text-decoration: none;
 }
 .icen-breadcrumb-link:focus-visible {
@@ -76,8 +76,8 @@
 }
 .icen-breadcrumb-sep::after { content: '';
   display: inline-block;
-  inline-size: 16px;
-  block-size: 16px;
+  inline-size: 12px;
+  block-size: 12px;
   flex: none;
   vertical-align: middle;
   background: currentColor;
@@ -114,16 +114,33 @@
 }
 
 /* ── 面包屑分隔符变体 ── */
-.icen-breadcrumb--slash .icen-breadcrumb-sep::after { content: '/'; }
+/* 字符型变体必须显式撤掉基础规则的 chevron mask/背景/定宽，
+   否则字被遮在实底剪影里永不显示（--arrow 全量重写所以无此问题） */
+.icen-breadcrumb--slash .icen-breadcrumb-sep::after {
+  content: '/';
+  background: none;
+  mask: none;
+  inline-size: auto;
+  block-size: auto;
+  vertical-align: baseline;
+}
 .icen-breadcrumb--arrow .icen-breadcrumb-sep::after { content: '';
   display: inline-block;
-  inline-size: 16px;
-  block-size: 16px;
+  inline-size: 12px;
+  block-size: 12px;
   flex: none;
   vertical-align: middle;
   background: currentColor;
   mask: var(--icen-token-icon-arrow-right) center / contain no-repeat; }
-.icen-breadcrumb--dot .icen-breadcrumb-sep::after { content: '·'; font-size: 1.2em; }
+.icen-breadcrumb--dot .icen-breadcrumb-sep::after {
+  content: '·';
+  font-size: 1.2em;
+  background: none;
+  mask: none;
+  inline-size: auto;
+  block-size: auto;
+  vertical-align: baseline;
+}
 
 /* ── 面包屑尺寸变体 ── */
 .icen-breadcrumb--sm {
@@ -143,4 +160,5 @@
 :is([dir='rtl']) .icen-breadcrumb-sep::after { transform: scaleX(-1); }
 :is([dir='rtl']) .icen-breadcrumb--arrow .icen-breadcrumb-sep::after { transform: scaleX(-1); }
 
+
 }

package/dist/components/breadcrumb.d.mts

@@ -0,0 +1,2 @@
+// kit: breadcrumb 类型面（构建产物，勿手改）
+export {};