@icen.ai/ui 0.4.0 → 0.5.0

package/dist/components/badge.css

@@ -0,0 +1,131 @@
+/*
+ * @icen.ai/ui — Component: badge（数字徽标 / 小红点）
+ *
+ * 与 pill 的差异：
+ *   - pill = 行内状态徽章，有文字内容
+ *   - badge = 角标式徽章，挂在外层元素的右上角，强调"数量/新动态"
+ *
+ * 完整契约（外层必须 position: relative 或 inline-flex）：
+ *   <span class="badge-host">
+ *     <button class="btn">…</button>
+ *     <span class="badge">9</span>                   <!-- 数字徽标 -->
+ *   </span>
+ *
+ *   <span class="badge-host">
+ *     <button class="btn">…</button>
+ *     <span class="badge badge--dot"></span>          <!-- 纯圆点（无数字） -->
+ *   </span>
+ *
+ *   <span class="badge-host">
+ *     <span class="avatar">…</span>
+ *     <span class="badge badge--bottom badge--success badge--dot"></span>  <!-- 头像右下角在线点 -->
+ *   </span>
+ *
+ * 变体：--dot 纯圆点 / --sm 小号 / --lg 大号 / --bottom 底部角
+ * 语义色：--success（在线）/ --warning / --error / --accent
+ */
+
+.badge-host {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+  z-index: var(--z-raised);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  font: inherit;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  color: var(--token-on-accent, #fff);
+  background: var(--token-error);
+  border: 2px solid var(--token-surface);
+  border-radius: var(--radius-full);
+  box-shadow: var(--token-shadow-inset);
+  pointer-events: none;
+  white-space: nowrap;
+  transform-origin: center;
+}
+
+/* 纯圆点（无数字） */
+.badge--dot {
+  width: 8px;
+  height: 8px;
+  min-width: 0;
+  padding: 0;
+  font-size: 0;
+}
+
+/* 尺寸 */
+.badge--sm {
+  min-width: 14px;
+  height: 14px;
+  font-size: 9px;
+  padding: 0 3px;
+}
+.badge--sm.badge--dot {
+  width: 6px;
+  height: 6px;
+}
+.badge--lg {
+  min-width: 20px;
+  height: 20px;
+  font-size: var(--density-font-size-xs);
+  padding: 0 5px;
+}
+.badge--lg.badge--dot {
+  width: 10px;
+  height: 10px;
+}
+
+/* 底部角（头像在线指示等） */
+.badge--bottom {
+  top: auto;
+  bottom: 0;
+  transform: translate(50%, 50%);
+}
+
+/* 语义色变体 */
+.badge--accent {
+  background: var(--token-accent);
+}
+.badge--success {
+  background: var(--token-success);
+}
+.badge--warning {
+  background: var(--token-warning);
+}
+.badge--error {
+  background: var(--token-error);
+}
+.badge--info {
+  background: var(--token-info);
+}
+
+/* 挂在实底色按钮上时用更浅的边框 */
+.btn-primary .badge,
+.btn-danger .badge {
+  border-color: var(--token-on-accent, #fff);
+}
+
+/* 数字超过 99 显示 99+（消费方决定是否使用，这里只保证宽度容纳） */
+.badge[data-overflow] {
+  min-width: 20px;
+  padding: 0 5px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .badge { transition: none; }
+}

package/dist/components/badge.mjs

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

package/dist/components/breadcrumb.css

@@ -96,6 +96,63 @@
   padding: 0 2px;
   color: var(--token-text-faint);
   user-select: none;
+  cursor: pointer;
+  border-radius: var(--radius-xs);
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
+}
+.breadcrumb-ellipsis:hover {
+  color: var(--token-accent);
+  background: var(--token-fill-1);
+}
+
+/* ── 溢出下拉（behavior 可选：点击 … 展开被折叠的中间路径） ── */
+.breadcrumb-dropdown {
+  position: relative;
+}
+.breadcrumb-dropdown-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 160px;
+  padding: 4px;
+  background: var(--token-card-strong);
+  border: 1px solid var(--token-outline);
+  border-radius: var(--radius-md);
+  box-shadow: var(--token-shadow-overlay);
+  z-index: var(--z-popover);
+  animation: breadcrumb-drop-in var(--icen-tx-fast);
+}
+.breadcrumb-dropdown-menu[hidden] { display: none; }
+.breadcrumb-dropdown-menu a {
+  display: block;
+  padding: 4px var(--density-space-sm);
+  font-size: var(--density-font-size-sm);
+  color: var(--token-text-muted);
+  text-decoration: none;
+  border-radius: var(--radius-sm);
+  transition: background-color var(--icen-tx-fast), color var(--icen-tx-fast);
+}
+.breadcrumb-dropdown-menu a:hover {
+  background: var(--token-fill-1);
+  color: var(--token-text);
+}
+@keyframes breadcrumb-drop-in {
+  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+/* ── 面包屑分隔符变体 ── */
+.breadcrumb--slash .breadcrumb-sep::after { content: '/'; }
+.breadcrumb--arrow .breadcrumb-sep::after { content: '→'; }
+.breadcrumb--dot .breadcrumb-sep::after { content: '·'; font-size: 1.2em; }
+
+/* ── 面包屑尺寸变体 ── */
+.breadcrumb--sm {
+  font-size: var(--density-font-size-sm);
+}
+.breadcrumb--sm .breadcrumb-link,
+.breadcrumb--sm .breadcrumb-current {
+  max-width: 140px;
 }
 
 @media (max-width: 480px) {

package/dist/components/card.css

@@ -80,6 +80,20 @@
   overflow: hidden;
   background: var(--token-bg-soft);
 }
+/* 封面比例变体 */
+.card-media--square { aspect-ratio: 1 / 1; }
+.card-media--tall { aspect-ratio: 3 / 4; }
+.card-media--wide { aspect-ratio: 21 / 9; }
+.card-media--auto { aspect-ratio: auto; }
+/* 封面 hover 放大（配合 .card--interactive） */
+.card--interactive:hover .card-media > img,
+.card--interactive:hover .card-media > video {
+  transform: scale(1.04);
+}
+.card-media > img,
+.card-media > video {
+  transition: transform var(--icen-tx-slow) var(--ease-out);
+}
 .card-media > img,
 .card-media > video {
   width: 100%;
@@ -154,3 +168,57 @@
 @media (prefers-reduced-motion: reduce) {
   .card--interactive { transition: none; }
 }
+
+/* ── 卡片网格（card-group）：自适应多列 ── */
+.card-group {
+  display: grid;
+  gap: var(--density-space-md);
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+}
+.card-group--2 { grid-template-columns: repeat(2, 1fr); }
+.card-group--3 { grid-template-columns: repeat(3, 1fr); }
+.card-group--4 { grid-template-columns: repeat(4, 1fr); }
+
+/* ── 卡片列表（横向铺开，常用于搜索结果/消息流） ── */
+.card-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-sm);
+}
+.card-list > .card {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+}
+.card-list > .card .card-media {
+  width: 120px;
+  flex-shrink: 0;
+  aspect-ratio: auto;
+}
+.card-list > .card .card-head,
+.card-list > .card .card-body,
+.card-list > .card .card-foot {
+  flex: 1;
+}
+
+/* ── 卡片头副标题 ── */
+.card-subtitle {
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-faint);
+  margin: 1px 0 0;
+  line-height: 1.4;
+}
+
+/* ── 卡片状态色边 ── */
+.card--success { border-color: color-mix(in srgb, var(--token-success) 35%, transparent); }
+.card--warning { border-color: color-mix(in srgb, var(--token-warning) 35%, transparent); }
+.card--error   { border-color: color-mix(in srgb, var(--token-error) 35%, transparent); }
+
+/* ── 卡片右上角徽标位 ── */
+.card-badge {
+  position: absolute;
+  top: var(--density-space-sm);
+  right: var(--density-space-sm);
+  z-index: 1;
+}
+.card { position: relative; }

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';