@icen.ai/ui 0.2.1 → 0.4.0

package/dist/cli.mjs

@@ -0,0 +1,74 @@
+#!/usr/bin/env node
+/*
+ * @icen.ai/ui — CLI：按需引入脚手架
+ * 不做 shadcn 式源码拷贝（本包是单一事实源，消费侧一律引包内产物），
+ * 只解析 slug → 打印正确的一行引入（kit 入口已自动带上 CSS 与 behavior）。
+ *
+ * 用法：
+ *   bunx --bun @icen.ai/ui add <slug...>   打印引入行（多个 slug 空格分隔）
+ *   bunx --bun @icen.ai/ui list            列出全部组件 slug
+ * 数据源：同目录 registry.json（构建期由 scripts/slugs.mjs 生成）。
+ */
+import { readFileSync } from 'node:fs';
+
+const registry = JSON.parse(readFileSync(new URL('./registry.json', import.meta.url), 'utf8'));
+const SLUGS = registry.slugs ?? {};
+
+const [cmd, ...rest] = process.argv.slice(2);
+const slugs = rest.filter((a) => !a.startsWith('-'));
+
+const HELP = `@icen.ai/ui — 按需引入脚手架
+
+  add <slug...>   打印组件的一行引入（CSS + behavior 自动带上）
+  list            列出全部 ${Object.keys(SLUGS).length} 个组件 slug
+
+示例：
+  bunx --bun @icen.ai/ui add breadcrumb
+  bunx --bun @icen.ai/ui add accordion tabs
+
+前提：已安装本包（bun add @icen.ai/ui），并在入口引入 tokens：
+  import '@icen.ai/ui/tokens.css';`;
+
+function importLines(slug) {
+  const meta = SLUGS[slug];
+  const path = `@icen.ai/ui/kit/${slug}`;
+  if (meta.init) {
+    return [
+      `import { ${meta.init} } from '${path}';`,
+      `${meta.init}();`,
+    ];
+  }
+  const lines = [`import '${path}';`];
+  if (meta.exports) lines.push(`// 可用导出：${meta.exports.join(' / ')}`);
+  return lines;
+}
+
+function suggest(bad) {
+  const keys = Object.keys(SLUGS);
+  return keys.filter((k) => k.includes(bad) || bad.includes(k)).slice(0, 3);
+}
+
+if (cmd === 'add' && slugs.length > 0) {
+  let failed = false;
+  for (const slug of slugs) {
+    if (!SLUGS[slug]) {
+      const near = suggest(slug);
+      console.error(`✗ 未知组件「${slug}」${near.length ? `（是不是：${near.join(' / ')}？）` : '（用 list 查看全部 slug）'}`);
+      failed = true;
+      continue;
+    }
+    console.log(`\n  ${slug}`);
+    for (const line of importLines(slug)) console.log(`    ${line}`);
+  }
+  console.log('');
+  process.exit(failed ? 1 : 0);
+} else if (cmd === 'list') {
+  for (const [slug, meta] of Object.entries(SLUGS)) {
+    const bits = [meta.css.replace(/\.css$/, '')];
+    if (meta.init) bits.push(meta.init);
+    console.log(`  ${slug.padEnd(14)} ${bits.join(' · ')}`);
+  }
+} else {
+  console.log(HELP);
+  process.exit(cmd === 'add' ? 1 : 0);
+}

package/dist/components/accordion.mjs

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

package/dist/components/alert.mjs

@@ -0,0 +1,2 @@
+// @icen.ai/ui — kit: alert（CSS + behavior 一行入口；构建产物，勿手改）
+import './feedback.css';

package/dist/components/avatar.mjs

@@ -0,0 +1,2 @@
+// @icen.ai/ui — kit: avatar（CSS + behavior 一行入口；构建产物，勿手改）
+import './media.css';

package/dist/components/breadcrumb.css

@@ -1,31 +1,104 @@
 /*
  * @icen.ai/ui — Component: breadcrumb（面包屑）
- * 用法：<nav class="breadcrumb" aria-label="面包屑"><ol>
- *         <li><a class="breadcrumb-link" href="…">首页</a><span class="breadcrumb-sep" aria-hidden="true"></span></li>
- *         <li><span class="breadcrumb-current" aria-current="page">当前页</span></li>
- *       </ol></nav>
- * 分隔符是 .breadcrumb-sep 的 ::after（›）；超长折叠用 .breadcrumb-ellipsis。
+ *
+ * 完整契约：
+ *   <nav class="breadcrumb" aria-label="面包屑">
+ *     <ol>
+ *       <li>
+ *         <a class="breadcrumb-link" href="…"><svg>…</svg> 首页</a>
+ *         <span class="breadcrumb-sep" aria-hidden="true"></span>
+ *       </li>
+ *       <li>
+ *         <span class="breadcrumb-ellipsis" aria-hidden="true">…</span>
+ *         <span class="breadcrumb-sep" aria-hidden="true"></span>
+ *       </li>
+ *       <li><span class="breadcrumb-current" aria-current="page">当前页</span></li>
+ *     </ol>
+ *   </nav>
+ *
+ * 分隔符是 .breadcrumb-sep::after（›）；超长折叠用 .breadcrumb-ellipsis。
  */
 
-.breadcrumb { display: flex; align-items: center; font-size: 13px; }
-.breadcrumb ol { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
-.breadcrumb li { display: flex; align-items: center; gap: 6px; }
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  font-size: var(--density-font-size-md);
+}
+.breadcrumb ol {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--density-space-xs);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.breadcrumb li {
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+  min-width: 0;
+}
 
 .breadcrumb-link {
-  display: inline-flex; align-items: center; gap: 6px;
-  color: var(--token-text-muted); text-decoration: none;
-  transition: color var(--duration-fast) var(--ease-out);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+  color: var(--token-text-muted);
+  text-decoration: none;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: color var(--icen-tx-fast);
+}
+.breadcrumb-link:hover {
+  color: var(--token-accent);
+  text-decoration: none;
+}
+.breadcrumb-link:focus-visible {
+  outline: none;
+  border-radius: var(--radius-xs);
+  box-shadow: var(--icen-ring);
+}
+.breadcrumb-link > svg {
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
 }
-.breadcrumb-link:hover { color: var(--token-accent); text-decoration: none; }
-.breadcrumb-link > svg { width: 13px; height: 13px; flex-shrink: 0; }
 
-.breadcrumb-sep { color: var(--token-text-faint); font-size: 13px; line-height: 1; }
+.breadcrumb-sep {
+  color: var(--token-text-faint);
+  font-size: var(--density-font-size-md);
+  line-height: 1;
+  user-select: none;
+}
 .breadcrumb-sep::after { content: '›'; }
 
 .breadcrumb-current {
-  display: inline-flex; align-items: center; gap: 6px;
-  color: var(--token-text); font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+  color: var(--token-text);
+  font-weight: 500;
+  max-width: 240px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.breadcrumb-current > svg {
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
 }
-.breadcrumb-current > svg { width: 13px; height: 13px; flex-shrink: 0; }
 
-.breadcrumb-ellipsis { padding: 0 4px; color: var(--token-text-faint); }
+.breadcrumb-ellipsis {
+  padding: 0 2px;
+  color: var(--token-text-faint);
+  user-select: none;
+}
+
+@media (max-width: 480px) {
+  .breadcrumb-link { max-width: 100px; }
+  .breadcrumb-current { max-width: 120px; }
+}

package/dist/components/breadcrumb.mjs

@@ -0,0 +1,2 @@
+// @icen.ai/ui — kit: breadcrumb（CSS + behavior 一行入口；构建产物，勿手改）
+import './breadcrumb.css';

package/dist/components/btn.css

@@ -1,23 +1,183 @@
 /*
  * @icen.ai/ui — Component: btn（按钮）
- * 用法：<button class="btn btn-primary"> / .btn-danger / .btn-sm / .btn-block
+ *
+ * 完整契约：
+ *   <button class="btn [.btn-primary|.btn-danger|.btn-ghost|.btn-link] [.btn-sm|.btn-lg] [.btn-block] [.btn-icon]
+ *           [.is-loading] [.is-error] [disabled]|[aria-disabled=true]|[data-disabled]>
+ *     [<svg class="btn-icon-start">…</svg>]    可选前置图标（与 .btn-icon 不同：.btn-icon 是纯图标钮）
+ *     <span class="btn-text">文本</span>
+ *     [<svg class="btn-icon-end">…</svg>]      可选后置图标
+ *   </button>
+ *
+ * 变体：
+ *   .btn          默认（surface 底 + outline-soft 描边）
+ *   .btn-primary  实心 accent
+ *   .btn-danger   透明底 + error 描边（hover 实心）
+ *   .btn-ghost    全透明，hover 浮起 fill-2
+ *   .btn-link     link 文本按钮（无背景、underline on hover）
+ *
+ * 尺寸：默认 / .btn-sm / .btn-lg / .btn-icon（正方形）
+ * 状态：.is-loading 加 spinner + aria-busy；.is-error error 边；disabled/aria-disabled/data-disabled
  */
 
 .btn {
-  display: inline-block; padding: 10px 22px;
-  background: var(--token-surface); color: var(--token-text);
-  border: 1px solid var(--token-line-soft); border-radius: var(--radius-sm);
-  font-family: var(--font-mono); font-size: 13px; letter-spacing: 1px;
-  cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
+  --btn-bg: var(--token-surface);
+  --btn-fg: var(--token-text);
+  --btn-border: var(--token-line-soft);
+  --btn-bg-hover: var(--token-surface-hover);
+  --btn-border-hover: var(--token-accent);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 0 var(--density-space-md);
+  height: var(--density-input-height-md);
+  background: var(--btn-bg);
+  color: var(--btn-fg);
+  border: 1px solid var(--btn-border);
+  border-radius: var(--radius-md);
+  font-family: var(--font-body);
+  font-size: var(--density-font-size-md);
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  text-decoration: none;
+  transition:
+    background-color var(--icen-tx-fast),
+    border-color var(--icen-tx-fast),
+    color var(--icen-tx-fast),
+    box-shadow var(--icen-tx-fast),
+    transform var(--icen-tx-fast);
+}
+.btn:hover {
+  background: var(--btn-bg-hover);
+  border-color: var(--btn-border-hover);
+}
+.btn:active { transform: var(--icen-press-soft); }
+.btn:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.btn:disabled,
+.btn[aria-disabled='true'],
+.btn[data-disabled],
+.btn.is-loading {
+  cursor: not-allowed;
+  opacity: var(--icen-disabled-opacity);
+  transform: none;
+  pointer-events: none;
+}
+
+/* ── 变体 ── */
+.btn-primary {
+  --btn-bg: var(--token-accent);
+  --btn-fg: var(--token-on-accent, #fff);
+  --btn-border: var(--token-accent);
+  --btn-bg-hover: var(--token-accent-deep, color-mix(in srgb, var(--token-accent) 85%, black));
+  --btn-border-hover: var(--token-accent-deep, var(--token-accent));
+}
+.btn-primary:hover {
+  box-shadow: var(--token-shadow-elevated);
+}
+
+.btn-danger {
+  --btn-fg: var(--token-error);
+  --btn-border: color-mix(in srgb, var(--token-error) 35%, transparent);
+  --btn-bg: transparent;
+  --btn-bg-hover: var(--token-error);
+  --btn-border-hover: var(--token-error);
+}
+.btn-danger:hover { color: var(--token-on-accent, #fff); }
+
+.btn-ghost {
+  --btn-bg: transparent;
+  --btn-border: transparent;
+  --btn-bg-hover: var(--token-fill-2);
+  --btn-border-hover: transparent;
+}
+
+.btn-link {
+  --btn-bg: transparent;
+  --btn-border: transparent;
+  --btn-fg: var(--token-accent);
+  --btn-bg-hover: transparent;
+  --btn-border-hover: transparent;
+  height: auto;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  text-decoration: none;
+}
+.btn-link:hover {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  background: transparent;
 }
-.btn:hover { border-color: var(--token-accent); }
-.btn:disabled { opacity: 0.5; cursor: not-allowed; }
 
-.btn-primary { background: var(--token-accent); border-color: var(--token-accent); color: var(--token-on-accent, #fff); }
-.btn-primary:hover { background: var(--token-accent-deep); border-color: var(--token-accent-deep); }
+/* ── 尺寸 ── */
+.btn-sm {
+  height: var(--density-input-height-sm);
+  padding: 0 var(--density-space-sm);
+  font-size: var(--density-font-size-sm);
+  gap: 4px;
+}
+.btn-lg {
+  height: var(--density-input-height-lg);
+  padding: 0 var(--density-space-lg);
+  font-size: var(--density-font-size-lg);
+  gap: 8px;
+}
+.btn-icon {
+  width: var(--density-input-height-md);
+  padding: 0;
+  gap: 0;
+}
+.btn-icon.btn-sm { width: var(--density-input-height-sm); }
+.btn-icon.btn-lg { width: var(--density-input-height-lg); }
 
-.btn-danger { color: var(--token-error); border-color: color-mix(in srgb, var(--token-error) 35%, transparent); }
-.btn-danger:hover { border-color: var(--token-error); }
+.btn-block {
+  display: flex;
+  width: 100%;
+}
+
+/* ── 状态 ── */
+.btn.is-error {
+  --btn-border: var(--token-error);
+  --btn-border-hover: var(--token-error);
+}
 
-.btn-block { display: block; width: 100%; text-align: center; }
-.btn-sm { padding: 6px 14px; font-size: 12px; }
+/* 加载态：左侧 spinner 占位 + 文本保留（避免重排）。
+   behavior 在挂 .is-loading 时把 [aria-busy=true] 也挂上。 */
+.btn.is-loading { position: relative; color: transparent; }
+.btn.is-loading::after {
+  content: '';
+  position: absolute;
+  top: 50%; left: 50%;
+  width: 14px; height: 14px;
+  margin: -7px 0 0 -7px;
+  border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
+  border-top-color: currentColor;
+  border-radius: 50%;
+  animation: btn-spin var(--duration-slow) linear infinite;
+  opacity: 1; /* 覆盖 .pressable::after 渐变（若与 .pressable 同用） */
+  background: none;
+  pointer-events: none;
+}
+@keyframes btn-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* 图标按钮内部 svg 默认尺寸对齐字号 */
+.btn-icon-start, .btn-icon-end {
+  width: 1.1em;
+  height: 1.1em;
+  flex-shrink: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .btn.is-loading::after { animation-duration: 1.2s; }
+}

package/dist/components/btn.mjs

@@ -0,0 +1,2 @@
+// @icen.ai/ui — kit: btn（CSS + behavior 一行入口；构建产物，勿手改）
+import './btn.css';

package/dist/components/card.css

@@ -1,7 +1,26 @@
 /*
  * @icen.ai/ui — Component: card（组合卡片容器）
- * 包含：.card 四变体（默认 / elevated / outlined / glass）+ .card--interactive + .is-selected
- * 子结构：.card-head / .card-title / .card-desc / .card-body / .card-foot / .card-meta / .card-action
+ *
+ * 完整契约：
+ *   <div class="card [.card--elevated|.card--outlined|.card--glass|.card--flat|.card--interactive] [.is-selected]">
+ *     <div class="card-media">                           ← 可选：封面图区
+ *       <img src="…" />
+ *       <span class="card-tag">置顶</span>                ← 可选：图上徽标
+ *     </div>
+ *     <div class="card-head">
+ *       <div>
+ *         <h3 class="card-title">标题</h3>
+ *         <p class="card-desc">副标题（可选）</p>
+ *       </div>
+ *       <div class="card-action"><button>…</button></div>
+ *     </div>
+ *     <div class="card-body">…</div>
+ *     <div class="card-foot">
+ *       <div class="card-meta">…</div>
+ *       <div class="card-action">…</div>
+ *     </div>
+ *   </div>
+ *
  * 规格源自 opengal src/presentation/ui/data/card.tsx。
  */
 
@@ -10,11 +29,22 @@
   border: 1px solid var(--token-outline-soft);
   box-shadow: var(--token-shadow-inset);
   border-radius: var(--radius-lg);
+  overflow: hidden;
 }
 
 /* ── 变体 ── */
-.card--elevated { box-shadow: var(--token-shadow-card); }
-.card--outlined { border-color: var(--token-outline); box-shadow: none; }
+.card--elevated {
+  box-shadow: var(--token-shadow-card);
+  border-color: transparent;
+}
+.card--outlined {
+  border-color: var(--token-outline);
+  box-shadow: none;
+}
+.card--flat {
+  box-shadow: none;
+  background: var(--token-bg-soft);
+}
 .card--glass {
   background: var(--token-surface-glass);
   backdrop-filter: blur(12px);
@@ -23,34 +53,104 @@
 }
 
 /* ── 修饰 ── */
-/* 可交互：cursor + .lift 基元同款效果（纯 CSS 无法组合类，规则在此复制一份） */
 .card--interactive {
   cursor: pointer;
-  transition: border-color var(--duration-slow) var(--ease-out),
-    box-shadow var(--duration-slow) var(--ease-out),
-    transform var(--duration-slow) var(--ease-out);
+  transition:
+    border-color var(--icen-tx-slow),
+    box-shadow var(--icen-tx-slow),
+    transform var(--icen-tx-slow);
 }
 .card--interactive:hover {
   transform: translateY(-1px);
   border-color: color-mix(in srgb, var(--token-accent) 26%, var(--token-outline-soft));
   box-shadow: var(--token-shadow-card);
 }
+.card--interactive:focus-within {
+  border-color: var(--token-accent);
+}
 .card.is-selected {
-  box-shadow: 0 0 0 2px var(--token-accent), 0 0 0 4px var(--token-bg);
+  box-shadow: var(--icen-ring);
+}
+
+/* ── 媒体封面 ── */
+.card-media {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  background: var(--token-bg-soft);
+}
+.card-media > img,
+.card-media > video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.card-tag {
+  position: absolute;
+  top: var(--density-space-xs);
+  left: var(--density-space-xs);
+  padding: 2px var(--density-space-xs);
+  font-size: var(--density-font-size-xs);
+  font-weight: 600;
+  color: var(--token-on-accent, #fff);
+  background: color-mix(in srgb, var(--token-text) 70%, transparent);
+  border-radius: var(--radius-xs);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
 }
 
 /* ── 子结构 ── */
 .card-head {
-  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
-  padding: 16px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--density-space-sm);
+  padding: var(--density-space-md);
+}
+.card-title {
+  font-size: var(--density-font-size-lg);
+  font-weight: 600;
+  color: var(--token-text);
+  line-height: 1.3;
+  margin: 0;
+  font-family: var(--font-heading);
+}
+.card-desc {
+  font-size: var(--density-font-size-sm);
+  color: var(--token-text-muted);
+  margin: 2px 0 0;
+  line-height: 1.4;
 }
-.card-title { font-size: 15px; font-weight: 600; color: var(--token-text); line-height: 1.25; margin: 0; }
-.card-desc { font-size: 12px; color: var(--token-text-muted); margin: 2px 0 0; }
-.card-body { padding: 0 16px 16px; font-size: 13px; color: var(--token-text-muted); }
+.card-body {
+  padding: 0 var(--density-space-md) var(--density-space-md);
+  font-size: var(--density-font-size-md);
+  color: var(--token-text-muted);
+  line-height: 1.6;
+}
+.card-body > p:first-child { margin-top: 0; }
+.card-body > p:last-child { margin-bottom: 0; }
+
 .card-foot {
-  display: flex; align-items: center; gap: 8px;
-  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-sm);
+  padding: var(--density-space-sm) var(--density-space-md);
   border-top: 1px solid var(--token-outline-soft);
+  background: color-mix(in srgb, var(--token-bg-soft) 50%, transparent);
+}
+.card-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-faint);
+}
+.card-action {
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .card--interactive { transition: none; }
 }
-.card-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--token-text-faint); }
-.card-action { margin-left: auto; }

package/dist/components/card.mjs

@@ -0,0 +1,2 @@
+// @icen.ai/ui — kit: card（CSS + behavior 一行入口；构建产物，勿手改）
+import './card.css';

package/dist/components/carousel.mjs

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

package/dist/components/chart-area.css

@@ -0,0 +1,15 @@
+/*
+ * @icen.ai/ui — Component: chart-area（面积图专属样式）
+ * 依赖：charts.css（基座）
+ *
+ * DOM 由 behaviors/charts.ts 的 renderArea 构建：
+ *   .chart-area > svg[viewBox="0 0 360 150"]
+ * 与折线同族，但以面积填充为视觉主体（渐变更浓、描边更细）。
+ */
+
+.chart-area > svg {
+  display: block;
+  width: 100%;
+  height: 150px;
+  overflow: visible;
+}

package/dist/components/chart-area.mjs

@@ -0,0 +1,4 @@
+// @icen.ai/ui — kit: chart-area（CSS + behavior 一行入口；构建产物，勿手改）
+import './chart-area.css';
+import './charts.css';
+export { renderArea } from '../behaviors/charts.mjs';