@icen.ai/ui 0.4.0 → 0.8.0

package/dist/components/command-palette.css

@@ -0,0 +1,246 @@
+/*
+ * @icen.ai/ui — Component: command-palette（命令面板 ⌘K，与 behaviors/command-palette 配套）
+ *
+ * 契约：
+ *   <div class="command-palette-backdrop" data-command-palette="id" hidden>
+ *     <div class="command-palette">
+ *       <div class="command-palette-search">
+ *         <span class="command-palette-search-icon">…放大镜 svg…</span>
+ *         <input class="command-palette-input" placeholder="搜索命令…" />
+ *         <kbd class="command-palette-esc">ESC</kbd>
+ *       </div>
+ *       <div class="command-palette-body">
+ *         <div class="command-palette-group">
+ *           <p class="command-palette-group-label">分组名</p>
+ *           <button class="command-palette-item [.is-active]" type="button">
+ *             <span class="command-palette-item-icon">…svg…</span>
+ *             <span class="command-palette-item-label">命令名</span>
+ *             <span class="command-palette-item-hint">副标题</span>
+ *             <kbd class="command-palette-item-kbd">⌘S</kbd>
+ *           </button>
+ *         </div>
+ *         <div class="command-palette-empty" hidden>无匹配命令</div>
+ *       </div>
+ *       <div class="command-palette-foot">
+ *         <span class="command-palette-foot-hint">
+ *           <kbd>↑↓</kbd> 导航 <kbd>↵</kbd> 执行 <kbd>esc</kbd> 关闭
+ *         </span>
+ *       </div>
+ *     </div>
+ *   </div>
+ *
+ * behavior 接管：搜索过滤、↑↓ 导航、Enter 执行、ESC / 外点 / backdrop 关闭、
+ * 焦点陷阱、按 ⌘K / Ctrl+K 全局打开（可选 data-command-palette-key）。
+ */
+
+.command-palette-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-dialog);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 12vh;
+  padding-left: var(--density-space-md);
+  padding-right: var(--density-space-md);
+  background: color-mix(in srgb, var(--token-text) 40%, transparent);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  animation: icen-cp-fade-in var(--icen-tx-normal);
+}
+.command-palette-backdrop[hidden] { display: none; }
+
+.command-palette {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 560px;
+  max-height: 70vh;
+  overflow: hidden;
+  background: var(--token-card-strong);
+  border: 1px solid var(--token-outline);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--token-shadow-overlay);
+  animation: icen-cp-scale-in var(--icen-tx-slow);
+}
+.command-palette:focus { outline: none; }
+
+/* ── 搜索栏 ── */
+.command-palette-search {
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-sm);
+  padding: var(--density-space-md);
+  border-bottom: 1px solid var(--token-line-soft);
+}
+.command-palette-search-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--token-text-faint);
+  flex-shrink: 0;
+}
+.command-palette-search-icon svg { width: 16px; height: 16px; }
+.command-palette-input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: var(--token-text);
+  font: inherit;
+  font-size: var(--density-font-size-md);
+}
+.command-palette-input::placeholder {
+  color: color-mix(in srgb, var(--token-text-faint) 60%, transparent);
+}
+.command-palette-esc {
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-faint);
+  padding: 2px 6px;
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-xs);
+  flex-shrink: 0;
+}
+
+/* ── 列表区 ── */
+.command-palette-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--density-space-xs);
+}
+
+.command-palette-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  margin-bottom: var(--density-space-sm);
+}
+.command-palette-group:last-child { margin-bottom: 0; }
+.command-palette-group-label {
+  margin: var(--density-space-sm) var(--density-space-sm) var(--density-space-xs);
+  font-size: var(--density-font-size-xs);
+  font-weight: 600;
+  color: var(--token-text-faint);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.command-palette-group:first-child .command-palette-group-label { margin-top: 0; }
+
+.command-palette-item {
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-sm);
+  width: 100%;
+  padding: 8px var(--density-space-sm);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--token-text);
+  font: inherit;
+  font-size: var(--density-font-size-md);
+  text-align: left;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--icen-tx-fast);
+}
+.command-palette-item:hover { background: var(--token-fill-1); }
+.command-palette-item.is-active {
+  background: var(--token-accent-subtle);
+  color: var(--token-accent-deep, var(--token-accent));
+}
+.command-palette-item:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+
+.command-palette-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  color: var(--token-text-faint);
+}
+.command-palette-item.is-active .command-palette-item-icon { color: var(--token-accent); }
+.command-palette-item-icon svg { width: 16px; height: 16px; }
+
+.command-palette-item-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.command-palette-item-hint {
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-faint);
+  margin-left: var(--density-space-xs);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.command-palette-item.is-active .command-palette-item-hint { color: color-mix(in srgb, var(--token-accent) 70%, var(--token-text-faint)); }
+
+.command-palette-item-kbd {
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-text-faint);
+  padding: 1px 5px;
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-xs);
+  flex-shrink: 0;
+}
+
+/* ── 空态 ── */
+.command-palette-empty {
+  padding: 32px var(--density-space-md);
+  text-align: center;
+  color: var(--token-text-faint);
+  font-size: var(--density-font-size-sm);
+}
+
+/* ── 底栏 ── */
+.command-palette-foot {
+  padding: var(--density-space-xs) var(--density-space-md);
+  border-top: 1px solid var(--token-line-soft);
+  background: var(--token-bg-soft);
+}
+.command-palette-foot-hint {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--density-space-sm);
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-faint);
+}
+.command-palette-foot-hint kbd {
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-2xs);
+  padding: 1px 4px;
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-xs);
+  background: var(--token-surface);
+}
+
+@keyframes icen-cp-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes icen-cp-scale-in {
+  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@media (max-width: 480px) {
+  .command-palette-backdrop { padding-top: 6vh; }
+  .command-palette { max-height: 80vh; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .command-palette-backdrop { animation: none; }
+  .command-palette { animation: none; }
+}

package/dist/components/command-palette.mjs

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

package/dist/components/content.css

@@ -28,7 +28,7 @@
   height: 16px;
   min-width: 16px;
   padding: 0 4px;
-  font-size: 10px;
+  font-size: var(--density-font-size-2xs);
 }
 .kbd-group {
   display: inline-flex;
@@ -192,11 +192,11 @@
   z-index: 1;
 }
 .timeline-dot svg { width: 13px; height: 13px; }
-.timeline-dot--accent  { background: var(--token-accent);  color: var(--token-on-accent, #fff); border-color: transparent; }
-.timeline-dot--success { background: var(--token-success); color: var(--token-on-accent, #fff); border-color: transparent; }
-.timeline-dot--warning { background: var(--token-warning); color: var(--token-on-accent, #fff); border-color: transparent; }
-.timeline-dot--error   { background: var(--token-error);   color: var(--token-on-accent, #fff); border-color: transparent; }
-.timeline-dot--info    { background: var(--token-info);    color: var(--token-on-accent, #fff); border-color: transparent; }
+.timeline-dot--accent  { background: var(--token-accent);  color: var(--token-on-accent); border-color: transparent; }
+.timeline-dot--success { background: var(--token-success); color: var(--token-on-accent); border-color: transparent; }
+.timeline-dot--warning { background: var(--token-warning); color: var(--token-on-accent); border-color: transparent; }
+.timeline-dot--error   { background: var(--token-error);   color: var(--token-on-accent); border-color: transparent; }
+.timeline-dot--info    { background: var(--token-info);    color: var(--token-on-accent); border-color: transparent; }
 
 .timeline-body { flex: 1; min-width: 0; }
 .timeline-head {
@@ -362,9 +362,9 @@
   min-width: 16px;
   height: 16px;
   padding: 0 4px;
-  font-size: 10px;
+  font-size: var(--density-font-size-2xs);
   font-weight: 600;
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   background: var(--token-accent);
   border-radius: var(--radius-full);
   flex-shrink: 0;
@@ -375,3 +375,216 @@
     transition: none;
   }
 }
+
+/* ── list 增强 ── */
+
+/* 列表项带前置图标/头像 */
+.list-item-leading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-right: var(--density-space-sm);
+}
+.list-item-leading svg { width: 16px; height: 16px; color: var(--token-text-faint); }
+.list-item-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.list-item-title {
+  font-size: var(--density-font-size-md);
+  color: var(--token-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.list-item-meta {
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-faint);
+}
+.list-item-trailing {
+  flex-shrink: 0;
+  margin-left: var(--density-space-sm);
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-faint);
+}
+.list-item--selectable {
+  cursor: pointer;
+}
+.list-item.is-selected {
+  background: var(--token-accent-subtle);
+}
+.list-item.is-selected .list-item-title { color: var(--token-accent); font-weight: 500; }
+
+/* 列表项 flex 布局（leading + content + trailing） */
+.list-item--flex {
+  display: flex;
+  align-items: center;
+}
+
+/* 斑马列表 */
+.list--striped .list-item:nth-child(odd) {
+  background: color-mix(in srgb, var(--token-bg-soft) 40%, transparent);
+}
+
+/* ── timeline 增强 ── */
+
+/* 右侧时间线（dot 在右） */
+.timeline--right .timeline-item { flex-direction: row-reverse; }
+.timeline--right .timeline-item:not(:last-child)::after {
+  left: auto;
+  right: 13.5px;
+}
+.timeline--right .timeline-body { text-align: right; }
+.timeline--right .timeline-time { margin-left: 0; margin-right: auto; }
+
+/* 交替时间线（奇左偶右） */
+.timeline--alternate .timeline-item:nth-child(even) { flex-direction: row-reverse; }
+.timeline--alternate .timeline-item:nth-child(even):not(:last-child)::after {
+  left: auto; right: 13.5px;
+}
+.timeline--alternate .timeline-item:nth-child(even) .timeline-body { text-align: right; }
+.timeline--alternate .timeline-item:nth-child(even) .timeline-time {
+  margin-left: 0; margin-right: auto;
+}
+
+/* 自定义 dot 尺寸 */
+.timeline-dot--sm { width: 20px; height: 20px; }
+.timeline-dot--sm svg { width: 10px; height: 10px; }
+.timeline--sm .timeline-item:not(:last-child)::after { left: 10px; top: 24px; }
+
+/* 时间线自定义内容槽（放标签、卡片等） */
+.timeline-extra {
+  margin-top: var(--density-space-xs);
+  padding: var(--density-space-sm);
+  background: var(--token-bg-soft);
+  border-radius: var(--radius-sm);
+  font-size: var(--density-font-size-sm);
+}
+
+/* ── desc 增强 ── */
+
+/* 行内描述（label: value 在同一行） */
+.desc--inline .desc-item {
+  display: flex;
+  align-items: baseline;
+  gap: var(--density-space-sm);
+  padding: 4px 0;
+}
+.desc--inline .desc-item dt {
+  flex-shrink: 0;
+  min-width: 80px;
+}
+.desc--inline .desc-item dd {
+  flex: 1;
+}
+
+/* 垂直描述（label 在上，value 在下） */
+.desc--vertical .desc-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+/* 可复制描述值 */
+.desc-copy {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+}
+.desc-copy-btn {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--token-text-faint);
+  cursor: pointer;
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
+}
+.desc-copy-btn:hover { color: var(--token-accent); background: var(--token-fill-1); }
+.desc-copy-btn svg { width: 12px; height: 12px; }
+
+/* ── tree 增强 ── */
+
+/* 带连接线的树 */
+.tree--lined ul {
+  position: relative;
+  margin-left: 7px;
+  padding-left: 0;
+  border-left: 1px solid var(--token-outline-soft);
+}
+.tree--lined .tree-node {
+  position: relative;
+}
+.tree--lined ul > li > .tree-node::before {
+  content: '';
+  position: absolute;
+  left: -8px;
+  top: 50%;
+  width: 8px;
+  height: 1px;
+  background: var(--token-outline-soft);
+}
+
+/* 树节点复选框（checkbox tree） */
+.tree-checkbox {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  margin-right: 2px;
+}
+
+/* 树拖拽视觉态 */
+.tree-node.is-dragging {
+  opacity: 0.5;
+}
+.tree-node.is-drop-target {
+  box-shadow: inset 0 -2px var(--token-accent);
+}
+
+/* 树搜索高亮 */
+.tree-label mark {
+  background: color-mix(in srgb, var(--token-warning) 30%, transparent);
+  color: inherit;
+  border-radius: 2px;
+  padding: 0 1px;
+}
+
+/* ── kbd 增强 ── */
+
+/* 大号 kbd（展示用） */
+.kbd--lg {
+  height: 28px;
+  min-width: 28px;
+  padding: 0 var(--density-space-sm);
+  font-size: var(--density-font-size-md);
+}
+
+/* kbd 按下态（动画反馈） */
+.kbd.is-pressed {
+  transform: translateY(1px);
+  box-shadow: none;
+}
+
+/* ── code-inline 增强 ── */
+.code-inline--success { color: var(--token-success); }
+.code-inline--warning { color: var(--token-warning); }
+.code-inline--error   { color: var(--token-error); }
+
+/* 代码块（多行，非行内） */
+.code-block {
+  padding: var(--density-space-sm) var(--density-space-md);
+  background: var(--token-bg-soft);
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-md);
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-sm);
+  color: var(--token-text);
+  overflow-x: auto;
+  line-height: 1.6;
+}

package/dist/components/copy.css

@@ -0,0 +1,93 @@
+/*
+ * @icen.ai/ui — Component: copy（复制按钮，与 behaviors/copy 配套）
+ *
+ * 完整契约：
+ *   文本变体（成功后文本 1.4s 内变「已复制」再还原）：
+ *   <button class="copy-btn" data-copy="复制的文本">复制</button>
+ *   <button class="copy-btn copy-btn--ghost" data-copy="…">复制链接</button>
+ *
+ *   图标变体（带 data-copy-icon，仅加 .is-done 类；由 CSS 显隐子 svg）：
+ *   <button class="copy-btn copy-btn--icon" data-copy="…" data-copy-icon aria-label="复制">
+ *     <svg class="copy-icon-clipboard">…</svg>
+ *     <svg class="copy-icon-check" hidden>…</svg>
+ *   </button>
+ *
+ * behavior 自动处理：
+ *   - 文本变体：成功后 textContent = '已复制' + 加 .is-done 类，1.4s 后还原
+ *   - 图标变体（带 data-copy-icon）：仅加 .is-done 类（不改文本），由 CSS 切换 svg 显隐
+ *
+ * 与 toast.toast--success 区别：copy 是"原地反馈"（按钮自身闪烁），toast 是"全局通知"。
+ */
+
+.copy-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--density-space-xs);
+  height: var(--density-input-height-sm);
+  padding: 0 var(--density-space-sm);
+  background: var(--token-control);
+  color: var(--token-text-muted);
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-sm);
+  font: inherit;
+  font-size: var(--density-font-size-sm);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    color var(--icen-tx-fast),
+    border-color var(--icen-tx-fast),
+    background-color var(--icen-tx-fast);
+}
+.copy-btn:hover {
+  color: var(--token-text);
+  border-color: var(--icen-hover-border);
+}
+.copy-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.copy-btn:disabled,
+.copy-btn[aria-disabled='true'] {
+  opacity: var(--icen-disabled-opacity);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ghost 变体：透明底，纯描边 / hover 才显底 */
+.copy-btn--ghost {
+  background: transparent;
+  border-color: var(--token-line-soft);
+}
+.copy-btn--ghost:hover {
+  background: var(--token-fill-1);
+  border-color: var(--token-accent);
+}
+
+/* ── 成功闪烁态（behavior 1.4s 后移除）── */
+.copy-btn.is-done {
+  color: var(--token-success);
+  border-color: color-mix(in srgb, var(--token-success) 40%, transparent);
+  background: color-mix(in srgb, var(--token-success) 10%, transparent);
+}
+
+/* ── 图标变体：方形按钮，仅放 svg ── */
+.copy-btn--icon {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+}
+.copy-btn--icon svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+/* .is-done 时显隐切换：剪贴板 → 对勾 */
+.copy-btn[data-copy-icon] .copy-icon-check { display: none; }
+.copy-btn[data-copy-icon].is-done .copy-icon-clipboard { display: none; }
+.copy-btn[data-copy-icon].is-done .copy-icon-check { display: inline-block; }
+
+@media (prefers-reduced-motion: reduce) {
+  .copy-btn { transition: none; }
+}

package/dist/components/copy.mjs

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

package/dist/components/datatable.css

@@ -125,11 +125,11 @@
 .dt-cell--head.is-sortable:hover { color: var(--token-text); }
 .dt-cell--head:focus-visible {
   outline: none;
-  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--token-accent) 50%, transparent);
+  box-shadow: var(--icen-ring-inset);
 }
 .dt-head-title { overflow: hidden; text-overflow: ellipsis; }
 .dt-sort {
-  font-size: 10px;
+  font-size: var(--density-font-size-2xs);
   color: var(--token-text-faint);
   flex-shrink: 0;
 }
@@ -165,11 +165,7 @@
   border-radius: var(--radius-md);
   box-shadow: var(--token-shadow-overlay);
   font-weight: 400;
-  animation: dt-panel-in var(--icen-tx-fast);
-}
-@keyframes dt-panel-in {
-  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
-  to { opacity: 1; transform: scale(1) translateY(0); }
+  animation: icen-pop-in var(--icen-tx-fast);
 }
 .dt-filter-list {
   max-height: 220px;
@@ -400,7 +396,7 @@
 .dt-resize:active::after {
   background: var(--token-accent);
 }
-.dt-cell--head { /* 确保相对定位供 resize 绝对定位 */ }
+/* .dt-cell--head 已在主规则 position: relative，供 resize 手柄绝对定位 */
 
 /* ── 冻结列（左固定 sticky） ── */
 .datatable--frozen .dt-cell--frozen {