@icen.ai/ui 0.5.0 → 0.8.1

package/dist/components/ai-tool.css

@@ -0,0 +1,532 @@
+/*
+ * @icen.ai/ui — Component: ai-tool（AI 工具调用卡 + 子智能体卡；含 .ai-item 条目基元完整定义）
+ *
+ * 完整契约：
+ *   ── 条目基元 .ai-item（规格 §2 骨架：所有行式 AI 条目的"基类"，todo/panel 亦复用）──
+ *   <div class="ai-item is-running" style="--ai-item-tint: var(--token-accent)">
+ *     <span class="ai-item-icon"><!-- svg --></span>
+ *     <div class="ai-item-main">
+ *       <div class="ai-item-title">一行摘要</div>
+ *       <div class="ai-item-sub">次要信息（路径/参数）</div>
+ *     </div>
+ *     <div class="ai-item-side">
+ *       <span class="ai-item-status"></span>   ← 状态点，纯 CSS 由 .is-* 驱动
+ *       <span class="ai-item-meta">1.2s</span>
+ *     </div>
+ *     <div class="ai-item-detail" hidden>展开详情</div>
+ *   </div>
+ *
+ *   ── 工具调用卡（.ai-tool-head 复用 .ai-item-* 零件，不带 .ai-item 壳）──
+ *   <div class="ai-tool ai-tool--shell is-done" data-ai-id="…" data-ai-kind="shell">
+ *     <button class="ai-tool-head" type="button" aria-expanded="false">
+ *       <span class="ai-item-icon" aria-hidden="true">…svg…</span>
+ *       <span class="ai-item-main">
+ *         <span class="ai-item-title">Read</span>
+ *         <span class="ai-item-sub">src/foo.ts:1-50</span>
+ *       </span>
+ *       <span class="ai-item-status" role="img" aria-label="完成"></span>
+ *       <span class="ai-item-meta">0.4s</span>
+ *     </button>
+ *     <div class="ai-tool-body" hidden>
+ *       <div class="ai-tool-io"><div class="ai-tool-io-label">输入</div><pre class="ai-tool-io-content">…</pre></div>
+ *       <div class="ai-tool-io"><div class="ai-tool-io-label">输出</div><pre class="ai-tool-io-content">…</pre></div>
+ *       <div class="ai-tool-approval">            ← 仅 .is-approval 显示（纯 CSS 驱动）
+ *         <div class="ai-tool-approval-reason" hidden>审批原因</div>  ← 可选（model.approval.reason）
+ *         <button class="btn btn-sm btn-primary" data-ai-approve type="button">允许</button>
+ *         <button class="btn btn-sm" data-ai-reject type="button">拒绝</button>
+ *       </div>
+ *     </div>
+ *   </div>
+ *
+ *   ── 子智能体卡 ──
+ *   <div class="ai-subagent is-running" data-ai-id="…" data-ai-kind="subagent">
+ *     <button class="ai-subagent-head" type="button" aria-expanded="false">…head 结构同上…</button>
+ *     <div class="ai-subagent-body" hidden>
+ *       <div class="ai-subagent-stream">          ← 嵌套 .ai-tool / .ai-subagent；
+ *         …                                    行间 style="--ai-activity-index:i" 驱动渐入 stagger
+ *       </div>
+ *       <div class="ai-subagent-result">完成回执摘要</div>
+ *     </div>
+ *   </div>
+ *
+ * 状态机 7 态（全条目共享，规格 §1）：
+ *   .is-pending   faint 空心点
+ *   .is-running   tint 脉冲点（--ai-item-pulse-duration 变量化时长）
+ *   .is-streaming ▍流式光标（colors.css blink keyframes，--ai-item-blink-duration 变量化）
+ *   .is-approval  warning 点 + 外环；卡片边框 warning；显示审批按钮
+ *   .is-done      success 纯 CSS 对勾
+ *   .is-error     error 点 + 外环；失败条目由 behavior 首次渲染自动展开
+ *   .is-cancelled faint 点 + 标题删除线
+ *
+ * kind 修饰类 ai-tool--<kind> 只覆盖 --ai-item-tint（继承 = 变量级联，不改结构）：
+ *   read/search/grep/glob=info · edit/write=accent · rm=error · shell=muted · mcp/skill=success
+ *   browser/fetch/todo/plan/subagent/note = 默认 accent（不写规则）
+ * 第三方 registerAiKind 的 tint 由 behavior 内联 --ai-item-tint 兜底。
+ */
+
+/* ══════════════════════════════════════════════════════════════
+   条目基元 .ai-item（行式条目"基类"）
+   ══════════════════════════════════════════════════════════════ */
+
+.ai-item {
+  /* 局部变量槽：kind/变体只覆盖这些变量（--btn-* 同款继承模式） */
+  --ai-item-tint: var(--token-accent);
+  --ai-item-pulse-duration: 1.5s;  /* running 脉冲（pill --pill-pulse-duration 同款变量化） */
+  --ai-item-blink-duration: 1s;    /* streaming 光标闪烁 */
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--density-space-sm);
+  min-width: 0;
+  align-self: stretch;  /* 宽度自稳定：宿主 flex/grid 居中时不 shrink-wrap（width:100% 会塌成 min-content，禁用） */
+}
+
+.ai-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  color: var(--ai-item-tint);
+  transition: color var(--icen-tx-fast);
+}
+.ai-item-icon > svg {
+  width: 16px;
+  height: 16px;
+}
+
+.ai-item-main {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.ai-item-title {
+  font-size: var(--density-font-size-md);
+  line-height: 1.4;
+  color: var(--token-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ai-item-sub {
+  font-size: var(--density-font-size-xs);
+  line-height: 1.4;
+  color: var(--token-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ai-item-side {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+  margin-left: auto;
+  flex-shrink: 0;
+}
+/* head 直排结构（无 .ai-item-side 包裹）时，状态点顶到右侧 */
+.ai-tool-head > .ai-item-status,
+.ai-subagent-head > .ai-item-status {
+  margin-left: auto;
+}
+
+.ai-item-meta {
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-faint);
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+}
+
+.ai-item-detail {
+  flex-basis: 100%;
+  min-width: 100%;
+}
+
+/* ── 状态点 .ai-item-status（纯 CSS 圆点，由 .is-* 决定颜色与动效） ── */
+.ai-item-status {
+  position: relative;
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+/* 等待：faint 空心点（.ai-subagent 与 .ai-item 共享同一状态语言） */
+:is(.ai-item, .ai-tool, .ai-subagent).is-pending .ai-item-status {
+  border: 1.5px solid var(--token-text-faint);
+}
+
+/* 执行中：tint 脉冲点 */
+:is(.ai-item, .ai-tool, .ai-subagent).is-running .ai-item-status {
+  background: var(--ai-item-tint);
+  animation: ai-item-pulse var(--ai-item-pulse-duration) ease-in-out infinite;
+}
+@keyframes ai-item-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.4; transform: scale(0.7); }
+}
+
+/* 流式中：▍光标闪烁（复用 colors.css 的 blink keyframes，animate-blink 同款） */
+:is(.ai-item, .ai-tool, .ai-subagent).is-streaming .ai-item-status {
+  width: 3px;
+  height: 12px;
+  border-radius: 1px;
+  background: var(--ai-item-tint);
+  animation: blink var(--ai-item-blink-duration) step-end infinite;
+}
+
+/* 待人确认：warning 点 + 外环 */
+:is(.ai-item, .ai-tool, .ai-subagent).is-approval .ai-item-status {
+  background: var(--token-warning);
+  box-shadow: 0 0 0 3px var(--token-warning-muted);
+}
+
+/* 完成：success 对勾（纯 CSS，无 SVG） */
+:is(.ai-item, .ai-tool, .ai-subagent).is-done .ai-item-status::after {
+  content: "";
+  position: absolute;
+  left: 1px;
+  top: -1px;
+  width: 5px;
+  height: 9px;
+  border-right: 1.5px solid var(--token-success);
+  border-bottom: 1.5px solid var(--token-success);
+  transform: rotate(45deg);
+}
+
+/* 失败：error 点 + 外环 */
+:is(.ai-item, .ai-tool, .ai-subagent).is-error .ai-item-status {
+  background: var(--token-error);
+  box-shadow: 0 0 0 3px var(--token-error-muted);
+}
+
+/* 已取消：faint 点 + 标题删除线 */
+:is(.ai-item, .ai-tool, .ai-subagent).is-cancelled .ai-item-status {
+  background: var(--token-text-faint);
+  opacity: 0.6;
+}
+:is(.ai-item, .ai-tool, .ai-subagent).is-cancelled .ai-item-title {
+  color: var(--token-text-faint);
+  text-decoration: line-through;
+}
+
+/* ══════════════════════════════════════════════════════════════
+   工具调用卡 .ai-tool
+   ══════════════════════════════════════════════════════════════ */
+
+.ai-tool {
+  --ai-item-tint: var(--token-accent);
+  align-self: stretch;  /* 宽度自稳定：宿主 flex/grid 居中时不 shrink-wrap */
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-md);
+  background: var(--token-surface);
+}
+
+/* ── kind 修饰类：只覆盖 --ai-item-tint ──
+   browser/fetch/todo/plan/subagent/note 用默认 accent，不写规则 */
+.ai-tool--read,
+.ai-tool--search,
+.ai-tool--grep,
+.ai-tool--glob {
+  --ai-item-tint: var(--token-info);
+}
+.ai-tool--edit,
+.ai-tool--write {
+  --ai-item-tint: var(--token-accent);
+}
+.ai-tool--rm {
+  --ai-item-tint: var(--token-error);
+}
+.ai-tool--shell {
+  --ai-item-tint: var(--token-text-muted);
+}
+.ai-tool--mcp,
+.ai-tool--skill {
+  --ai-item-tint: var(--token-success);
+}
+
+/* ── head ── */
+.ai-tool-head,
+.ai-subagent-head {
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-sm);
+  width: 100%;
+  padding: var(--density-space-xs) var(--density-space-sm);
+  border: none;
+  border-radius: inherit; /* hover 底色不戳破卡片圆角 */
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--icen-tx-fast);
+}
+.ai-tool-head:hover,
+.ai-subagent-head:hover {
+  background: var(--token-fill-1);
+}
+.ai-tool-head:focus-visible,
+.ai-subagent-head:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+
+/* ── body ── */
+.ai-tool-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-sm);
+  padding: var(--density-space-sm);
+  border-top: 1px solid var(--token-line-soft);
+  animation: icen-pop-in var(--icen-tx-fast);
+}
+.ai-tool-body[hidden],
+.ai-subagent-body[hidden],
+.ai-tool-io[hidden],
+.ai-subagent-result[hidden] {
+  display: none;
+}
+
+/* ── 输入/输出区块（pre 等宽、可滚、max-height 收敛） ── */
+.ai-tool-io {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.ai-tool-io-label {
+  font-size: var(--density-font-size-2xs);
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--token-text-faint);
+}
+.ai-tool-io-content {
+  --ai-tool-io-max: 12rem; /* 收敛上限（组件局部变量） */
+  margin: 0;
+  padding: var(--density-space-xs) var(--density-space-sm);
+  max-height: var(--ai-tool-io-max);
+  overflow: auto;
+  background: var(--token-bg-soft);
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-sm);
+  line-height: 1.5;
+  color: var(--token-text);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* 多模态回执（MCP content 数组 → 媒体/链接，spec §10.3）：
+   容器纵向排布；媒体本体复用 ai-chat.css 的 .ai-msg-media 全局样式 */
+.ai-tool-io-media {
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-xs);
+  min-width: 0;
+}
+
+/* ── 审批区（仅 .is-approval 显示，纯 CSS 驱动） ── */
+.ai-tool-approval {
+  display: none;
+  align-items: center;
+  gap: var(--density-space-sm);
+  padding-top: var(--density-space-xs);
+  border-top: 1px dashed var(--token-line-soft);
+}
+.ai-tool.is-approval .ai-tool-approval {
+  display: flex;
+}
+.ai-tool-approval-reason {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: var(--density-font-size-xs);
+  line-height: 1.5;
+  color: var(--token-text-muted);
+}
+.ai-tool.is-approval {
+  border-color: color-mix(in srgb, var(--token-warning) 40%, transparent);
+}
+.ai-tool.is-error {
+  border-color: color-mix(in srgb, var(--token-error) 40%, transparent);
+}
+
+/* ══════════════════════════════════════════════════════════════
+   子智能体卡 .ai-subagent（嵌套活动流 = 缩进 + 左侧引导线，可递归）
+   ══════════════════════════════════════════════════════════════ */
+
+.ai-subagent {
+  --ai-item-tint: var(--token-accent);
+  align-self: stretch;  /* 宽度自稳定：宿主 flex/grid 居中时不 shrink-wrap */
+  border: 1px solid var(--token-line-soft);
+  border-left: 3px solid var(--ai-item-tint); /* 代理卡身份：tint 左边条 */
+  border-radius: var(--radius-md);
+  background: var(--token-surface);
+}
+.ai-subagent.is-error {
+  border-left-color: var(--token-error);
+}
+.ai-subagent.is-done {
+  border-left-color: var(--token-success);
+}
+
+.ai-subagent-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-sm);
+  padding: var(--density-space-sm);
+  border-top: 1px solid var(--token-line-soft);
+}
+
+/* 嵌套流：缩进 + 引导线；行间渐入 stagger 由 --ai-activity-index（render 写入）驱动 */
+.ai-subagent-stream {
+  --ai-stagger-step: 40ms; /* 活动项渐入步长（组件局部变量） */
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-xs);
+  padding-left: var(--density-space-md);
+}
+.ai-subagent-stream::before {
+  content: "";
+  position: absolute;
+  left: 5px;
+  top: var(--density-space-xs);
+  bottom: var(--density-space-xs);
+  width: 1px;
+  background: var(--token-line-soft);
+}
+/* 展开（body 从 hidden 解除）时，活动项逐条 icen-pop-in 渐入 */
+.ai-subagent-stream > * {
+  animation: icen-pop-in var(--icen-tx-fast) backwards;
+  animation-delay: calc(var(--ai-activity-index, 0) * var(--ai-stagger-step));
+}
+
+/* 完成回执 */
+.ai-subagent-result {
+  padding: var(--density-space-xs) var(--density-space-sm);
+  background: var(--token-bg-soft);
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-sm);
+  font-size: var(--density-font-size-sm);
+  line-height: 1.5;
+  color: var(--token-text-muted);
+}
+.ai-subagent.is-done .ai-subagent-result {
+  color: var(--token-text);
+  border-color: color-mix(in srgb, var(--token-success) 30%, transparent);
+}
+
+/* ══════════════════════════════════════════════════════════════
+   动效守卫
+   ══════════════════════════════════════════════════════════════ */
+@media (prefers-reduced-motion: reduce) {
+  :is(.ai-item, .ai-tool, .ai-subagent).is-running .ai-item-status,
+  :is(.ai-item, .ai-tool, .ai-subagent).is-streaming .ai-item-status {
+    animation: none;
+  }
+  .ai-tool-body,
+  .ai-subagent-stream > * {
+    animation: none;
+  }
+  .ai-tool-head,
+  .ai-subagent-head {
+    transition: none;
+  }
+}
+
+/* ═══ 工具卡内嵌图表（回执 = ChartSpec 时 setIo 走 renderChart，§13）═══ */
+.ai-tool-io-chart {
+  width: 100%;
+  min-width: 0;
+}
+
+/* ═══ AI 工具挂载区（ai-tools.ts 的 createAiToolArea，§13）═══
+ *   .ai-tools-mount > .ai-tools-item > head（名/时间/×）+ body（工具自渲染） */
+.ai-tools-mount {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: var(--density-space-md);
+  align-items: start;
+}
+.ai-tools-item {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-md);
+  background: var(--token-surface);
+  animation: icen-pop-in var(--duration-normal) var(--ease-out);
+}
+.ai-tools-item-head {
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-sm);
+  padding: var(--density-space-xs) var(--density-space-sm);
+  border-bottom: 1px solid var(--token-line-soft);
+}
+.ai-tools-item-name {
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text);
+}
+.ai-tools-item-meta {
+  flex: 1;
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-text-faint);
+  font-variant-numeric: tabular-nums;
+}
+.ai-tools-item-remove {
+  border: 0;
+  background: transparent;
+  color: var(--token-text-faint);
+  cursor: pointer;
+  border-radius: var(--radius-xs);
+  font-size: var(--density-font-size-sm);
+  line-height: 1;
+  padding: 2px 6px;
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
+}
+.ai-tools-item-remove:hover { color: var(--token-error); background: var(--token-fill-1); }
+.ai-tools-item-remove:focus-visible { outline: none; box-shadow: var(--icen-ring); }
+.ai-tools-item-body {
+  padding: var(--density-space-sm);
+  min-width: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ai-tools-item { animation: none; }
+}
+
+/* 挂载项折叠态：head 为 button（chevron + 名/时间 + ×） */
+.ai-tools-item-head {
+  cursor: pointer;
+  border: 0;
+  background: transparent;
+  text-align: left;
+  width: 100%;
+  font: inherit;
+}
+.ai-tools-item-chevron {
+  flex-shrink: 0;
+  color: var(--token-text-faint);
+  font-size: var(--density-font-size-xs);
+  transition: transform var(--icen-tx-fast);
+}
+.ai-tools-item-head[aria-expanded='false'] .ai-tools-item-chevron {
+  transform: rotate(-90deg);
+}
+.ai-tools-item.is-collapsed .ai-tools-item-body {
+  display: none;
+}
+.ai-tools-item-head:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}

package/dist/components/ai-usage.mjs

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

package/dist/components/badge.css

@@ -22,7 +22,7 @@
  *   </span>
  *
  * 变体：--dot 纯圆点 / --sm 小号 / --lg 大号 / --bottom 底部角
- * 语义色：--success（在线）/ --warning / --error / --accent
+ * 语义色：--success（在线）/ --warning / --error / --info / --accent
  */
 
 .badge-host {
@@ -45,11 +45,11 @@
   height: 16px;
   padding: 0 4px;
   font: inherit;
-  font-size: 10px;
+  font-size: var(--density-font-size-2xs);
   font-weight: 600;
   line-height: 1;
   font-variant-numeric: tabular-nums;
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   background: var(--token-error);
   border: 2px solid var(--token-surface);
   border-radius: var(--radius-full);
@@ -72,7 +72,7 @@
 .badge--sm {
   min-width: 14px;
   height: 14px;
-  font-size: 9px;
+  font-size: var(--density-font-size-2xs);
   padding: 0 3px;
 }
 .badge--sm.badge--dot {
@@ -117,7 +117,7 @@
 /* 挂在实底色按钮上时用更浅的边框 */
 .btn-primary .badge,
 .btn-danger .badge {
-  border-color: var(--token-on-accent, #fff);
+  border-color: var(--token-on-accent);
 }
 
 /* 数字超过 99 显示 99+（消费方决定是否使用，这里只保证宽度容纳） */
@@ -125,7 +125,3 @@
   min-width: 20px;
   padding: 0 5px;
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .badge { transition: none; }
-}

package/dist/components/breadcrumb.css

@@ -105,42 +105,6 @@
   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: '→'; }

package/dist/components/btn.css

@@ -75,7 +75,7 @@
 /* ── 变体 ── */
 .btn-primary {
   --btn-bg: var(--token-accent);
-  --btn-fg: var(--token-on-accent, #fff);
+  --btn-fg: var(--token-on-accent);
   --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));
@@ -91,7 +91,7 @@
   --btn-bg-hover: var(--token-error);
   --btn-border-hover: var(--token-error);
 }
-.btn-danger:hover { color: var(--token-on-accent, #fff); }
+.btn-danger:hover { color: var(--token-on-accent); }
 
 .btn-ghost {
   --btn-bg: transparent;
@@ -162,14 +162,11 @@
   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;
+  animation: icen-spin var(--btn-spin-duration, 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 {
@@ -179,5 +176,5 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .btn.is-loading::after { animation-duration: 1.2s; }
+  .btn.is-loading::after { --btn-spin-duration: 1.2s; }
 }

package/dist/components/card.css

@@ -25,6 +25,7 @@
  */
 
 .card {
+  position: relative;
   background: var(--token-card);
   border: 1px solid var(--token-outline-soft);
   box-shadow: var(--token-shadow-inset);
@@ -91,14 +92,11 @@
   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%;
   height: 100%;
   object-fit: cover;
+  transition: transform var(--icen-tx-slow) var(--ease-out);
 }
 .card-tag {
   position: absolute;
@@ -107,7 +105,7 @@
   padding: 2px var(--density-space-xs);
   font-size: var(--density-font-size-xs);
   font-weight: 600;
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   background: color-mix(in srgb, var(--token-text) 70%, transparent);
   border-radius: var(--radius-xs);
   backdrop-filter: blur(8px);
@@ -221,4 +219,3 @@
   right: var(--density-space-sm);
   z-index: 1;
 }
-.card { position: relative; }