@icen.ai/ui 0.3.0 → 0.5.0

package/dist/components/charts.css

@@ -1,13 +1,13 @@
 /*
- * @icen.ai/ui — Component: charts（轻量图表，与 behaviors/charts 配套）
+ * @icen.ai/ui — Component: charts base（图表共享基座，与 behaviors/charts 配套）
  *
- * 包含：.chart 容器 / .chart-empty / .chart-legend（图例行）/ .chart-labels（轴标签行）/
- *       vbar（垂直柱状）/ hbar（水平条形）/ stack（堆叠条）/ donut（环形）/ line（折线）/
- *       heatmap（贡献图热力格）/ sparkline（迷你趋势）/ gauge（进度环）
+ * 仅含所有图表类型共用的契约：.chart 容器、.chart-empty 空态、.chart-legend 图例、
+ * .chart-labels 轴标签行、.chart-tone-* 调色盘。
+ * 各图表类型的专属样式在独立 CSS 文件中（chart-line / chart-bar / chart-pie /
+ * chart-stack / chart-heatmap / chart-sparkline / chart-gauge / chart-radar / chart-area），
+ * 按需引入——kit/chart-<type> 入口会自动带上本基座 + 对应专属 CSS。
  *
- * 完整契约：DOM 全部由 behaviors/charts.ts 以 createElement(NS) + textContent 构建；
  * 单色调通过容器或条上的 --chart-tone 自定义属性注入（默认 var(--token-accent)）。
- * 规格源自 opengal src/presentation/ui/data/charts.tsx。
  */
 
 .chart {
@@ -78,210 +78,10 @@
   font-variant-numeric: tabular-nums;
 }
 
-/* ── vbar · 垂直柱状 ── */
-.chart-vbar {
-  display: flex;
-  align-items: flex-end;
-  gap: var(--density-space-xs);
-  height: 112px;
-}
-.chart-vbar-track {
-  flex: 1;
-  height: 100%;
-  min-width: 0;
-  display: flex;
-  align-items: flex-end;
-  background: color-mix(in srgb, var(--token-fill-2) 45%, transparent);
-  border-radius: var(--radius-sm);
-  overflow: hidden;
-}
-.chart-vbar-bar {
-  width: 100%;
-  border-radius: var(--radius-sm);
-  background: var(--chart-tone, var(--token-accent));
-  transition: height var(--icen-tx-slow);
-}
-.chart-vbar-bar:hover {
-  filter: brightness(1.08);
-}
-
-/* ── hbar · 水平条形 ── */
-.chart-hbar {
-  display: flex;
-  flex-direction: column;
-  gap: var(--density-space-xs);
-}
-.chart-hbar-row {
-  display: grid;
-  grid-template-columns: minmax(72px, 1fr) minmax(90px, 2fr) 52px;
-  gap: var(--density-space-xs);
-  align-items: center;
-  font-size: var(--density-font-size-xs);
-}
-.chart-hbar-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--token-text-muted);
-}
-.chart-hbar-track {
-  height: 10px;
-  overflow: hidden;
-  border-radius: var(--radius-full);
-  background: var(--token-fill-2);
-}
-.chart-hbar-bar {
-  height: 100%;
-  border-radius: var(--radius-full);
-  background: var(--chart-tone, var(--token-accent));
-  transition: width var(--icen-tx-slow);
-}
-.chart-hbar-bar:hover {
-  filter: brightness(1.08);
-}
-.chart-hbar-value {
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-  color: var(--token-text-faint);
-}
-
-/* ── stack · 堆叠条 ── */
-.chart-stack {
-  height: 16px;
-  display: flex;
-  overflow: hidden;
-  border-radius: var(--radius-full);
-  background: var(--token-fill-2);
-  margin-bottom: var(--density-space-sm);
-}
-.chart-stack-seg {
-  height: 100%;
-  min-width: 3px;
-  background: var(--chart-tone, var(--token-accent));
-  transition: width var(--icen-tx-slow);
-}
-.chart-stack-seg:hover {
-  filter: brightness(1.08);
-}
-
-/* ── donut · 环形 ── */
-.chart-donut {
-  display: flex;
-  align-items: center;
-  gap: var(--density-space-md);
-  min-height: 150px;
-}
-.chart-donut > svg {
-  width: 132px;
-  height: 132px;
-  flex-shrink: 0;
-}
-.chart-donut-center {
-  font-variant-numeric: tabular-nums;
-  text-anchor: middle;
-  fill: var(--token-text);
-  font-weight: 600;
-}
-
-/* ── line · 折线 ── */
-.chart-line > svg {
-  display: block;
-  width: 100%;
-  height: 150px;
-  overflow: visible;
-}
-
-/* ── heatmap · 贡献图（GitHub 式 7 行 × N 周） ── */
-.chart-heatmap {
-  display: flex;
-  flex-direction: column;
-  gap: var(--density-space-xs);
-}
-.chart-heatmap-grid {
-  display: grid;
-  grid-template-rows: repeat(7, 1fr);
-  grid-auto-flow: column;
-  grid-auto-columns: 1fr;
-  gap: 3px;
-  width: 100%;
-}
-.chart-heatmap-cell {
-  aspect-ratio: 1;
-  border-radius: 2px;
-  background: var(--token-fill-2);
-}
-.chart-heatmap-cell.is-blank { background: transparent; }
-.chart-heatmap-cell[data-level='1'] { background: color-mix(in srgb, var(--chart-tone, var(--token-accent)) 28%, var(--token-fill-2)); }
-.chart-heatmap-cell[data-level='2'] { background: color-mix(in srgb, var(--chart-tone, var(--token-accent)) 50%, var(--token-fill-2)); }
-.chart-heatmap-cell[data-level='3'] { background: color-mix(in srgb, var(--chart-tone, var(--token-accent)) 74%, var(--token-fill-2)); }
-.chart-heatmap-cell[data-level='4'] { background: var(--chart-tone, var(--token-accent)); }
-.chart-heatmap-cell:not(.is-blank):hover {
-  outline: 1px solid var(--chart-tone, var(--token-accent));
-  outline-offset: 0;
-}
-.chart-heatmap-legend {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 3px;
-  font-size: var(--density-font-size-xs);
-  color: var(--token-text-faint);
-}
-.chart-heatmap-legend .chart-heatmap-cell {
-  width: 10px;
-  height: 10px;
-  aspect-ratio: auto;
-}
-.chart-heatmap-legend > span:first-child { margin-right: 2px; }
-.chart-heatmap-legend > span:last-child { margin-left: 2px; }
-
-/* ── sparkline · 迷你趋势 ── */
-.chart-sparkline > svg {
-  display: block;
-  width: 96px;
-  height: 28px;
-  overflow: visible;
-}
-
-/* ── gauge · 进度环 ── */
-.chart-gauge {
-  position: relative;
-  width: 132px;
-  flex-shrink: 0;
-}
-.chart-gauge > svg {
-  display: block;
-  width: 132px;
-  height: 132px;
-}
-.chart-gauge-center {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 1px;
-}
-.chart-gauge-value {
-  font-size: 20px;
-  font-weight: 700;
-  font-variant-numeric: tabular-nums;
-  color: var(--token-text);
-}
-.chart-gauge-label {
-  font-size: var(--density-font-size-xs);
-  color: var(--token-text-faint);
-}
-
-/* ── 调色盘：多系列图（donut/stack/line）由 behavior 选用 ── */
+/* ── 调色盘：多系列图（donut/stack/line/radar）由 behavior 选用 ── */
 .chart-tone-1 { --chart-tone: var(--token-accent); }
 .chart-tone-2 { --chart-tone: var(--token-accent-cold); }
 .chart-tone-3 { --chart-tone: var(--token-success); }
 .chart-tone-4 { --chart-tone: var(--token-warning); }
 .chart-tone-5 { --chart-tone: var(--token-info); }
 .chart-tone-6 { --chart-tone: color-mix(in srgb, var(--token-text) 50%, transparent); }
-
-@media (prefers-reduced-motion: reduce) {
-  .chart-vbar-bar, .chart-hbar-bar, .chart-stack-seg { transition: none; }
-}

package/dist/components/charts.mjs

@@ -1,3 +1,12 @@
 // @icen.ai/ui — kit: charts（CSS + behavior 一行入口；构建产物，勿手改）
 import './charts.css';
+import './chart-line.css';
+import './chart-bar.css';
+import './chart-pie.css';
+import './chart-radar.css';
+import './chart-heatmap.css';
+import './chart-area.css';
+import './chart-stack.css';
+import './chart-gauge.css';
+import './chart-sparkline.css';
 export * from '../behaviors/charts.mjs';

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: 10px;
+  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: 10px;
+  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

@@ -375,3 +375,217 @@
     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-dot--sm ~ .timeline-item:not(:last-child)::after,
+.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;
+}