@icen.ai/ui 0.10.0 → 0.11.0

package/dist/components/command-palette.css

@@ -47,12 +47,12 @@
   justify-content: center;
   padding-top: 12vh;
   padding-inline: var(--icen-density-space-md);
-  background: color-mix(in srgb, var(--icen-token-text) 40%, transparent);
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
+  background: var(--icen-token-scrim);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
   animation: icen-cp-fade-in var(--icen-tx-fast);
   /* 退场走过渡（behavior 的 closing 阶段；可中断续接） */
-  transition: opacity var(--icen-tx-fast) var(--icen-ease-out);
+  transition: opacity var(--icen-duration-fast) var(--icen-ease-out);
 }
 .icen-command-palette-backdrop[hidden] { display: none; }
 .icen-command-palette-backdrop[data-icen-state='closing'] {
@@ -68,12 +68,12 @@
   max-inline-size: 560px;
   max-block-size: 70vh;
   overflow: hidden;
-  background: var(--icen-token-card-strong);
-  border: 1px solid var(--icen-token-outline);
+  background: var(--icen-token-surface);
+  border: 1px solid var(--icen-token-material-edge);
   border-radius: var(--icen-radius-lg);
-  box-shadow: var(--icen-token-shadow-overlay);
-  animation: icen-cp-scale-in var(--icen-tx-fast) var(--icen-ease-out);
-  transition: transform var(--icen-tx-fast) var(--icen-ease-out);
+  box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-overlay);
+  animation: icen-cp-scale-in var(--icen-duration-normal) var(--icen-ease-enter);
+  transition: transform var(--icen-duration-fast) var(--icen-ease-exit);
 }
 .icen-command-palette-backdrop[data-icen-state='closing'] .icen-command-palette {
   transform: translateY(2px) scale(0.99);
@@ -85,17 +85,18 @@
   display: flex;
   align-items: center;
   gap: var(--icen-density-space-sm);
-  padding: var(--icen-density-space-md);
-  border-bottom: 1px solid var(--icen-token-line-soft);
+  min-block-size: 48px;
+  padding: 8px var(--icen-density-space-md);
+  border-bottom: 1px solid var(--icen-token-separator-soft);
 }
 .icen-command-palette-search-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--icen-token-text-faint);
+  color: var(--icen-token-text-muted);
   flex-shrink: 0;
 }
-.icen-command-palette-search-icon svg { width: 16px; height: 16px; }
+.icen-command-palette-search-icon svg { width: 18px; height: 18px; }
 .icen-command-palette-input {
   flex: 1;
   min-width: 0;
@@ -104,17 +105,23 @@
   background: transparent;
   color: var(--icen-token-text);
   font: inherit;
-  font-size: var(--icen-density-font-size-md);
+  font-size: var(--icen-density-font-size-lg);
+}
+/* 搜索栏不是 .icen-control（吃不到全局 focus-within 环）：输入框是开面板即聚焦的
+   主控件，焦点可见性自持——包裹层给 focus-within 软环 */
+.icen-command-palette-search:focus-within {
+  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--icen-token-accent) 30%, transparent);
+  border-radius: 0;
 }
 .icen-command-palette-input::placeholder {
-  color: color-mix(in srgb, var(--icen-token-text-faint) 60%, transparent);
+  color: var(--icen-token-text-muted);
 }
 .icen-command-palette-esc {
   font-family: var(--icen-font-mono);
   font-size: var(--icen-density-font-size-xs);
-  color: var(--icen-token-text-faint);
+  color: var(--icen-token-text-muted);
   padding: 2px 6px;
-  border: 1px solid var(--icen-token-line-soft);
+  border: 1px solid var(--icen-token-control-border);
   border-radius: var(--icen-radius-xs);
   flex-shrink: 0;
 }
@@ -136,38 +143,38 @@
 }
 .icen-command-palette-group:last-child { margin-bottom: 0; }
 .icen-command-palette-group-label {
-  margin: var(--icen-density-space-sm) var(--icen-density-space-sm) var(--icen-density-space-xs);
-  font-size: var(--icen-density-font-size-xs);
+  margin: var(--icen-density-space-sm) var(--icen-density-space-sm) 3px;
+  font-size: var(--icen-font-size-caption);
   font-weight: 600;
-  color: var(--icen-token-text-faint);
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
+  color: var(--icen-token-text-muted);
+  letter-spacing: var(--icen-letter-spacing-caption);
 }
 .icen-command-palette-group:first-child .icen-command-palette-group-label { margin-top: 0; }
 
 .icen-command-palette-item {
   display: flex;
   align-items: center;
-  gap: var(--icen-density-space-sm);
+  gap: var(--icen-control-gap-sm);
   width: 100%;
-  padding: 8px var(--icen-density-space-sm);
+  min-block-size: var(--icen-control-height-sm);
+  padding: 5px var(--icen-density-space-sm);
   border: 0;
-  border-radius: var(--icen-radius-sm);
+  border-radius: var(--icen-radius-xs);
   background: transparent;
   color: var(--icen-token-text);
   font: inherit;
-  font-size: var(--icen-density-font-size-md);
+  font-size: var(--icen-font-size-control);
   text-align: start;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   transition: background-color var(--icen-tx-fast);
 }
-.icen-command-palette-item:hover { background: var(--icen-token-fill-1); }
+.icen-command-palette-item:hover { background: var(--icen-token-fill-hover); }
 .icen-command-palette-item.is-active {
-  /* 当前候选 = 选中表面（accent 微底 + 内描边），不改文字色；与菜单/选择器同语言 */
-  background: var(--icen-token-accent-subtle);
+  /* 当前候选 = 选中表面；与菜单/选择器同语言 */
+  background: var(--icen-token-fill-selected);
   color: var(--icen-token-text);
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--icen-token-accent) 65%, var(--icen-token-line-soft));
+  box-shadow: none;
 }
 .icen-command-palette-item:focus-visible {
   outline: none;
@@ -181,9 +188,9 @@
   flex-shrink: 0;
   width: 18px;
   height: 18px;
-  color: var(--icen-token-text-faint);
+  color: var(--icen-token-text-muted);
 }
-.icen-command-palette-item.is-active .icen-command-palette-item-icon { color: var(--icen-token-accent); }
+.icen-command-palette-item.is-active .icen-command-palette-item-icon { color: var(--icen-token-accent-strong); }
 .icen-command-palette-item-icon svg { width: 16px; height: 16px; }
 .icen-command-palette-item-label {
   flex: 1;
@@ -221,22 +228,22 @@
 
 /* ── 底栏 ── */
 .icen-command-palette-foot {
-  padding: var(--icen-density-space-xs) var(--icen-density-space-md);
-  border-top: 1px solid var(--icen-token-line-soft);
-  background: var(--icen-token-bg-soft);
+  padding: 6px var(--icen-density-space-md);
+  border-top: 1px solid var(--icen-token-separator-soft);
+  background: var(--icen-token-surface-chrome);
 }
 .icen-command-palette-foot-hint {
   display: inline-flex;
   align-items: center;
   gap: var(--icen-density-space-sm);
   font-size: var(--icen-density-font-size-xs);
-  color: var(--icen-token-text-faint);
+  color: var(--icen-token-text-muted);
 }
 .icen-command-palette-foot-hint kbd {
   font-family: var(--icen-font-mono);
   font-size: var(--icen-density-font-size-2xs);
   padding: 1px 4px;
-  border: 1px solid var(--icen-token-line-soft);
+  border: 1px solid var(--icen-token-control-border);
   border-radius: var(--icen-radius-xs);
   background: var(--icen-token-surface);
 }
@@ -246,7 +253,7 @@
   to { opacity: 1; }
 }
 @keyframes icen-cp-scale-in {
-  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
+  from { opacity: 0; transform: translateY(-4px) scale(0.985); }
   to { opacity: 1; transform: translateY(0) scale(1); }
 }
 

package/dist/components/command-palette.d.mts

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

package/dist/components/content.css

@@ -19,13 +19,13 @@
   font-family: var(--icen-font-mono);
   font-weight: 500;
   border-radius: var(--icen-radius-xs);
-  border: 1px solid var(--icen-token-outline);
+  border: 1px solid var(--icen-token-control-border);
   background: var(--icen-token-control);
   color: var(--icen-token-text-muted);
-  box-shadow: var(--icen-token-shadow-inset);
-  height: 20px;
-  min-width: 20px;
-  padding: 0 var(--icen-density-space-xs);
+  box-shadow: 0 1px 0 var(--icen-token-control-border);
+  height: 19px;
+  min-width: 19px;
+  padding: 0 5px;
   font-size: var(--icen-density-font-size-xs);
 }
 .icen-kbd--sm {
@@ -49,10 +49,10 @@
   padding: 2px var(--icen-density-space-xs);
   border-radius: var(--icen-radius-xs);
   background: var(--icen-token-control);
-  border: 1px solid var(--icen-token-outline-soft);
+  border: 1px solid var(--icen-token-separator-soft);
   font-size: 0.9em;
   font-family: var(--icen-font-mono);
-  color: var(--icen-token-accent-text, var(--icen-token-accent));
+  color: var(--icen-token-accent-text);
   word-break: break-word;
 }
 
@@ -67,13 +67,14 @@
   padding: 0;
 }
 .icen-list-item {
-  padding: var(--icen-density-space-sm);
-  border-radius: var(--icen-radius-sm);
+  min-block-size: var(--icen-control-height-sm);
+  padding: 4px var(--icen-density-space-sm);
+  border-radius: var(--icen-radius-xs);
   transition: background-color var(--icen-tx-fast);
 }
-.icen-list-item:hover { background: var(--icen-token-control-hover); }
-.icen-list .icen-list-item + .icen-list-item { border-top: 1px solid var(--icen-token-outline-soft); }
-.icen-list--compact .icen-list-item { padding: var(--icen-density-space-xs) var(--icen-density-space-sm); }
+.icen-list-item:hover { background: var(--icen-token-fill-hover); }
+.icen-list .icen-list-item + .icen-list-item { border-top: 1px solid var(--icen-token-separator-soft); }
+.icen-list--compact .icen-list-item { padding: 2px var(--icen-density-space-sm); }
 
 /* ══════════════ accordion · 手风琴（behaviors/accordion 配套） ══════════════
  * DOM：
@@ -87,7 +88,7 @@
  * data-icen-single：展开一项自动收起其余（behavior 实现）。
  */
 .icen-accordion-item {
-  border-bottom: 1px solid var(--icen-token-outline-soft);
+  border-bottom: 1px solid var(--icen-token-separator-soft);
 }
 .icen-accordion-item:last-child { border-bottom: 0; }
 .icen-accordion-trigger {
@@ -96,19 +97,20 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--icen-density-space-sm);
-  padding: var(--icen-density-space-sm);
-  font-size: var(--icen-density-font-size-md);
-  font-weight: 500;
+  min-block-size: 32px;
+  padding: 5px var(--icen-density-space-sm);
+  font-size: var(--icen-font-size-control);
+  font-weight: var(--icen-font-weight-control);
   color: var(--icen-token-text);
   text-align: start;
   background: none;
   border: 0;
   cursor: pointer;
-  border-radius: var(--icen-radius-sm);
+  border-radius: var(--icen-radius-xs);
   transition: background-color var(--icen-tx-fast);
 }
 .icen-accordion-trigger:hover {
-  background: var(--icen-token-control-hover);
+  background: var(--icen-token-fill-hover);
 }
 .icen-accordion-trigger:focus-visible {
   outline: none;
@@ -147,21 +149,21 @@
   transition: padding-block-end var(--icen-tx-normal);
   font-size: var(--icen-density-font-size-sm);
   color: var(--icen-token-text-muted);
-  line-height: 1.6;
+  line-height: 1.55;
 }
 .icen-accordion-item.is-open .icen-accordion-panel-inner { padding-block-end: var(--icen-density-space-sm); }
 
 /* 卡片式手风琴：整组包在带边框的卡片里 */
 .icen-accordion--cards {
-  border: 1px solid var(--icen-token-outline-soft);
-  border-radius: var(--icen-radius-md);
+  border: 1px solid var(--icen-token-separator-soft);
+  border-radius: var(--icen-control-radius-lg);
   overflow: hidden;
 }
 .icen-accordion--cards .icen-accordion-item {
   border-bottom: 0;
 }
 .icen-accordion--cards .icen-accordion-item + .icen-accordion-item {
-  border-top: 1px solid var(--icen-token-outline-soft);
+  border-top: 1px solid var(--icen-token-separator-soft);
 }
 
 /* ══════════════ timeline · 时间线 ══════════════
@@ -186,7 +188,7 @@
   top: 32px;
   bottom: 0;
   width: 1px;
-  background: var(--icen-token-outline-soft);
+  background: var(--icen-token-separator);
 }
 .icen-timeline-dot {
   width: 28px;
@@ -196,8 +198,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--icen-token-control);
-  border: 1px solid var(--icen-token-outline-soft);
+  background: var(--icen-token-surface);
+  border: 1px solid var(--icen-token-control-border);
   color: var(--icen-token-text-muted);
   z-index: 1;
 }
@@ -215,20 +217,21 @@
   gap: var(--icen-density-space-sm);
 }
 .icen-timeline-title {
-  font-size: var(--icen-density-font-size-md);
-  font-weight: 500;
+  font-size: var(--icen-font-size-control);
+  font-weight: var(--icen-font-weight-control);
   color: var(--icen-token-text);
 }
 .icen-timeline-time {
   font-size: var(--icen-density-font-size-xs);
-  color: var(--icen-token-text-faint);
+  color: var(--icen-token-text-muted);
   margin-inline-start: auto;
   font-variant-numeric: tabular-nums;
+  letter-spacing: .01em;
 }
 .icen-timeline-desc {
   font-size: var(--icen-density-font-size-sm);
   color: var(--icen-token-text-muted);
-  margin: 4px 0 0;
+  margin: 3px 0 0;
   line-height: 1.5;
 }
 
@@ -238,8 +241,8 @@
  */
 .icen-desc { display: flex; flex-direction: column; gap: var(--icen-density-space-sm); }
 .icen-desc-title {
-  font-size: var(--icen-density-font-size-md);
-  font-weight: 500;
+  font-size: var(--icen-font-size-title);
+  font-weight: var(--icen-font-weight-title);
   color: var(--icen-token-text);
   margin: 0;
 }
@@ -250,15 +253,15 @@
   margin: 0;
 }
 .icen-desc--bordered .icen-desc-grid {
-  background: var(--icen-token-outline-soft);
-  border: 1px solid var(--icen-token-outline-soft);
-  border-radius: var(--icen-radius-md);
+  background: var(--icen-token-separator-soft);
+  border: 1px solid var(--icen-token-separator-soft);
+  border-radius: var(--icen-control-radius-lg);
   overflow: hidden;
 }
 .icen-desc-item { grid-column: span var(--desc-span, 1); }
 .icen-desc--bordered .icen-desc-item {
-  background: var(--icen-token-card);
-  padding: var(--icen-density-space-sm) var(--icen-density-space-md);
+  background: var(--icen-token-surface);
+  padding: 6px 10px;
 }
 .icen-desc:not(.icen-desc--bordered) .icen-desc-item {
   display: flex;
@@ -267,10 +270,10 @@
 }
 .icen-desc-item dt {
   font-size: var(--icen-density-font-size-xs);
-  color: var(--icen-token-text-faint);
+  color: var(--icen-token-text-muted);
 }
 .icen-desc-item dd {
-  font-size: var(--icen-density-font-size-md);
+  font-size: var(--icen-font-size-control);
   color: var(--icen-token-text);
   margin: 0;
   line-height: 1.5;
@@ -300,27 +303,28 @@
 .icen-tree-node {
   display: flex;
   align-items: center;
-  gap: var(--icen-density-space-xs);
+  gap: var(--icen-control-gap-sm);
   /* 深度缩进沿 inline-start（RTL 下树向左侧生长） */
-  padding-block: var(--icen-density-space-xs);
+  min-block-size: var(--icen-control-height-sm);
+  padding-block: 3px;
   padding-inline: calc(4px + var(--depth, 0) * 14px) var(--icen-density-space-sm);
-  border-radius: var(--icen-radius-sm);
-  font-size: var(--icen-density-font-size-md);
+  border-radius: var(--icen-radius-xs);
+  font-size: var(--icen-font-size-control);
   color: var(--icen-token-text);
   cursor: pointer;
   transition: background-color var(--icen-tx-fast);
 }
-.icen-tree-node:hover { background: var(--icen-token-control-hover); }
+.icen-tree-node:hover { background: var(--icen-token-fill-hover); }
 .icen-tree-node:focus-visible,
 .icen-tree-node:focus-within {
   outline: none;
-  box-shadow: var(--icen-ring);
+  box-shadow: var(--icen-ring-inset);
 }
 .icen-tree-node.is-selected,
 .icen-tree-node[aria-selected='true'] {
-  background: var(--icen-token-accent-subtle);
-  color: var(--icen-token-accent-text, var(--icen-token-accent-deep, var(--icen-token-accent)));
-  font-weight: 500;
+  background: var(--icen-token-fill-selected);
+  color: var(--icen-token-text);
+  font-weight: var(--icen-font-weight-control);
 }
 .icen-tree-node.is-disabled,
 .icen-tree-node[aria-disabled='true'] {
@@ -365,11 +369,11 @@
 }
 .icen-tree-icon {
   flex-shrink: 0;
-  width: 14px;
-  height: 14px;
+  width: 15px;
+  height: 15px;
   color: var(--icen-token-text-muted);
 }
-.icen-tree-node.is-selected .icen-tree-icon { color: var(--icen-token-accent); }
+.icen-tree-node.is-selected .icen-tree-icon { color: var(--icen-token-accent-strong); }
 .icen-tree-badge {
   display: inline-flex;
   align-items: center;
@@ -410,7 +414,7 @@
   gap: 1px;
 }
 .icen-list-item-title {
-  font-size: var(--icen-density-font-size-md);
+  font-size: var(--icen-font-size-control);
   color: var(--icen-token-text);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -418,7 +422,7 @@
 }
 .icen-list-item-meta {
   font-size: var(--icen-density-font-size-xs);
-  color: var(--icen-token-text-faint);
+  color: var(--icen-token-text-muted);
 }
 .icen-list-item-trailing {
   flex-shrink: 0;
@@ -430,9 +434,9 @@
   cursor: pointer;
 }
 .icen-list-item.is-selected {
-  background: var(--icen-token-accent-subtle);
+  background: var(--icen-token-fill-selected);
 }
-.icen-list-item.is-selected .icen-list-item-title { color: var(--icen-token-accent); font-weight: 500; }
+.icen-list-item.is-selected .icen-list-item-title { color: var(--icen-token-text); font-weight: var(--icen-font-weight-control); }
 
 /* 列表项 flex 布局（leading + content + trailing） */
 .icen-list-item--flex {
@@ -477,8 +481,9 @@
 .icen-timeline-extra {
   margin-top: var(--icen-density-space-xs);
   padding: var(--icen-density-space-sm);
-  background: var(--icen-token-bg-soft);
-  border-radius: var(--icen-radius-sm);
+  background: var(--icen-token-surface-chrome);
+  border: 1px solid var(--icen-token-separator-soft);
+  border-radius: var(--icen-radius-xs);
   font-size: var(--icen-density-font-size-sm);
 }
 
@@ -533,7 +538,7 @@
   position: relative;
   margin-inline-start: 7px;
   padding-inline-start: 0;
-  border-inline-start: 1px solid var(--icen-token-outline-soft);
+  border-inline-start: 1px solid var(--icen-token-separator-soft);
 }
 .icen-tree--lined .icen-tree-node {
   position: relative;

package/dist/components/context-menu.d.mts

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

package/dist/components/copy.css

@@ -28,12 +28,12 @@
   align-items: center;
   justify-content: center;
   gap: var(--icen-density-space-xs);
-  height: var(--icen-density-input-height-sm);
-  padding: 0 var(--icen-density-space-sm);
+  height: var(--icen-control-height-sm);
+  padding: 0 var(--icen-control-padding-inline-sm);
   background: var(--icen-token-control);
   color: var(--icen-token-text-muted);
-  border: 1px solid var(--icen-token-outline-soft);
-  border-radius: var(--icen-radius-sm);
+  border: 1px solid var(--icen-token-control-border);
+  border-radius: var(--icen-control-radius-sm);
   font: inherit;
   font-size: var(--icen-density-font-size-sm);
   cursor: pointer;
@@ -45,7 +45,7 @@
 }
 .icen-copy-btn:hover {
   color: var(--icen-token-text);
-  border-color: var(--icen-hover-border);
+  border-color: var(--icen-token-control-border-hover);
 }
 .icen-copy-btn:focus-visible {
   outline: none;
@@ -61,11 +61,11 @@
 /* ghost 变体：透明底，纯描边 / hover 才显底 */
 .icen-copy-btn--ghost {
   background: transparent;
-  border-color: var(--icen-token-line-soft);
+  border-color: var(--icen-token-separator-soft);
 }
 .icen-copy-btn--ghost:hover {
-  background: var(--icen-token-fill-1);
-  border-color: var(--icen-token-accent);
+  background: var(--icen-token-fill-hover);
+  border-color: var(--icen-token-control-border-hover);
 }
 
 /* ── 成功闪烁态（behavior 1.4s 后移除）── */
@@ -77,8 +77,8 @@
 
 /* ── 图标变体：方形按钮，仅放 svg ── */
 .icen-copy-btn--icon {
-  inline-size: var(--icen-density-input-height-sm);
-  block-size: var(--icen-density-input-height-sm);
+  inline-size: var(--icen-control-height-sm);
+  block-size: var(--icen-control-height-sm);
   padding: 0;
 }
 .icen-copy-btn--icon svg {

package/dist/components/copy.d.mts

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