@icen.ai/ui 0.1.1 → 0.2.0

package/dist/ui.css

@@ -1973,6 +1973,112 @@ html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--token-te
 .dim { color: var(--token-text-muted); }
 .faint { color: var(--token-text-faint); }
 
+/* ── z-index 标尺（全组件统一引用，浮层一律 portal 到 body） ── */
+:root {
+  --z-base: 0;
+  --z-raised: 10;
+  --z-toast: 100;
+  --z-chrome: 200;
+  --z-dialog: 500;
+  --z-popover: 620;
+  --z-tooltip: 700;
+}
+
+/* ── 交互基元（全组件地基，规格源自 opengal interaction-classes） ── */
+
+/* 可按压：hover 顶部高光 + active 下陷缩放 */
+.pressable {
+  position: relative; overflow: hidden; will-change: transform;
+  transition: background-color var(--duration-normal) var(--ease-out),
+    border-color var(--duration-normal) var(--ease-out),
+    box-shadow var(--duration-normal) var(--ease-out),
+    color var(--duration-normal) var(--ease-out),
+    opacity var(--duration-normal) var(--ease-out),
+    transform var(--duration-normal) var(--ease-out);
+}
+.pressable::after {
+  content: ''; position: absolute; inset: 0; border-radius: inherit;
+  opacity: 0; pointer-events: none;
+  background: linear-gradient(180deg, color-mix(in srgb, var(--token-surface) 24%, transparent), transparent 46%);
+  transition: opacity var(--duration-normal) var(--ease-out);
+}
+.pressable:hover::after, .pressable:focus-visible::after { opacity: 1; }
+.pressable:active { transform: translateY(1px) scale(0.985); }
+.pressable:disabled, .pressable[aria-disabled='true'], .pressable[data-disabled] {
+  transform: none;
+}
+.pressable:disabled::after, .pressable[aria-disabled='true']::after, .pressable[data-disabled]::after { display: none; }
+
+/* 控件聚焦光晕（wrapper 式表单控件用 :focus-within） */
+.control {
+  transition: background-color var(--duration-normal) var(--ease-out),
+    border-color var(--duration-normal) var(--ease-out),
+    box-shadow var(--duration-normal) var(--ease-out);
+}
+.control:focus-within {
+  box-shadow: var(--token-shadow-inset), 0 0 0 3px color-mix(in srgb, var(--token-accent) 12%, transparent);
+}
+
+/* 悬停浮起（可交互卡片） */
+.lift {
+  transition: border-color var(--duration-slow) var(--ease-out),
+    box-shadow var(--duration-slow) var(--ease-out),
+    transform var(--duration-slow) var(--ease-out);
+}
+.lift:hover {
+  transform: translateY(-1px);
+  border-color: color-mix(in srgb, var(--token-accent) 26%, var(--token-outline-soft));
+  box-shadow: var(--token-shadow-card);
+}
+
+/* 聚焦环（ring-2 + offset-1 等价） */
+.focus-ring:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 1px var(--token-bg), 0 0 0 3px color-mix(in srgb, var(--token-accent) 60%, transparent);
+}
+
+/* 动效开关（reduced-motion 时全部关闭） */
+@media (prefers-reduced-motion: no-preference) {
+  .motion { transition: all var(--duration-normal) var(--ease-out); }
+}
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
+}
+
+
+/* ── components/breadcrumb.css ── */
+/*
+ * @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。
+ */
+
+.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-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);
+}
+.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::after { content: '›'; }
+
+.breadcrumb-current {
+  display: inline-flex; align-items: center; gap: 6px;
+  color: var(--token-text); font-weight: 500;
+}
+.breadcrumb-current > svg { width: 13px; height: 13px; flex-shrink: 0; }
+
+.breadcrumb-ellipsis { padding: 0 4px; color: var(--token-text-faint); }
+
 
 /* ── components/btn.css ── */
 /*
@@ -2000,6 +2106,498 @@ html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--token-te
 .btn-sm { padding: 6px 14px; font-size: 12px; }
 
 
+/* ── components/card.css ── */
+/*
+ * @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
+ * 规格源自 opengal src/presentation/ui/data/card.tsx。
+ */
+
+.card {
+  background: var(--token-card);
+  border: 1px solid var(--token-outline-soft);
+  box-shadow: var(--token-shadow-inset);
+  border-radius: var(--radius-lg);
+}
+
+/* ── 变体 ── */
+.card--elevated { box-shadow: var(--token-shadow-card); }
+.card--outlined { border-color: var(--token-outline); box-shadow: none; }
+.card--glass {
+  background: var(--token-surface-glass);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  box-shadow: none;
+}
+
+/* ── 修饰 ── */
+/* 可交互：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);
+}
+.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.is-selected {
+  box-shadow: 0 0 0 2px var(--token-accent), 0 0 0 4px var(--token-bg);
+}
+
+/* ── 子结构 ── */
+.card-head {
+  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
+  padding: 16px;
+}
+.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-foot {
+  display: flex; align-items: center; gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--token-outline-soft);
+}
+.card-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--token-text-faint); }
+.card-action { margin-left: auto; }
+
+
+/* ── components/charts.css ── */
+/*
+ * @icen.ai/ui — Component: charts（轻量图表，与 behaviors/charts 配套）
+ * 包含：.chart 容器 / .chart-empty / .chart-legend（图例行）/ .chart-labels（轴标签行）/
+ *       vbar（垂直柱状）/ hbar（水平条形）/ stack（堆叠条）/ donut（环形）/ line（折线）
+ * DOM 全部由 behaviors/charts.ts 以 createElement(NS) + textContent 构建；
+ * 单色调通过容器或条上的 --chart-tone 自定义属性注入（默认 var(--token-accent)）。
+ * 规格源自 opengal src/presentation/ui/data/charts.tsx。
+ */
+
+.chart { width: 100%; }
+.chart-empty {
+  height: 150px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 11px; color: var(--token-text-faint);
+}
+
+/* ── 图例 / 轴标签（donut / stack / vbar / line 共用） ── */
+.chart-legend { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
+.chart-legend-item { display: flex; align-items: center; gap: 8px; font-size: 11px; min-width: 0; }
+.chart-legend-dot {
+  width: 8px; height: 8px; flex-shrink: 0;
+  border-radius: var(--radius-full);
+  background: var(--chart-tone, var(--token-accent));
+}
+.chart-legend-label {
+  flex: 1; min-width: 0;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  color: var(--token-text-muted);
+}
+.chart-legend-value { flex-shrink: 0; font-variant-numeric: tabular-nums; color: var(--token-text-faint); }
+
+.chart-labels { display: flex; gap: 8px; margin-top: 8px; }
+.chart-labels > span {
+  flex: 1; min-width: 0;
+  text-align: center; font-size: 9px; color: var(--token-text-faint);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+
+/* ── vbar · 垂直柱状 ── */
+.chart-vbar { display: flex; align-items: flex-end; gap: 8px; 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);
+}
+.chart-vbar-bar {
+  width: 100%;
+  border-radius: var(--radius-sm);
+  background: var(--chart-tone, var(--token-accent));
+  transition: height 500ms var(--ease-out);
+}
+
+/* ── hbar · 水平条形 ── */
+.chart-hbar { display: flex; flex-direction: column; gap: 8px; }
+.chart-hbar-row {
+  display: grid;
+  grid-template-columns: minmax(72px, 1fr) minmax(90px, 2fr) 52px;
+  gap: 8px; align-items: center;
+  font-size: 11px;
+}
+.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 500ms var(--ease-out);
+}
+.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: 12px;
+}
+.chart-stack-seg {
+  height: 100%; min-width: 3px;
+  background: var(--chart-tone, var(--token-accent));
+  transition: width 500ms var(--ease-out);
+}
+
+/* ── donut · 环形 ── */
+.chart-donut { display: flex; align-items: center; gap: 12px; min-height: 150px; }
+.chart-donut > svg { width: 132px; height: 132px; flex-shrink: 0; }
+
+/* ── line · 折线 ── */
+.chart-line > svg { display: block; width: 100%; height: 150px; overflow: visible; }
+
+
+/* ── components/content.css ── */
+/*
+ * @icen.ai/ui — Component: content（内容展示族）
+ * 包含：kbd（按键）/ code-inline（行内代码）/ list（分隔列表）/ accordion（手风琴，behaviors/accordion 配套）/
+ *       timeline（时间线）/ desc（描述列表）/ tree（树形，behaviors/tree 配套）
+ * 规格源自 opengal src/presentation/ui/data/exhibit.tsx 与 data/display.tsx。
+ */
+
+/* ══════════════ kbd · 按键 ══════════════ */
+.kbd {
+  display: inline-flex; align-items: center; justify-content: center;
+  vertical-align: middle;
+  font-family: var(--font-mono); font-weight: 500;
+  border-radius: var(--radius-xs);
+  border: 1px solid var(--token-outline);
+  background: var(--token-control);
+  color: var(--token-text-muted);
+  box-shadow: var(--token-shadow-inset);
+  height: 20px; min-width: 20px;
+  padding: 0 6px;
+  font-size: 11px;
+}
+.kbd--sm { height: 16px; min-width: 16px; padding: 0 4px; font-size: 10px; }
+
+/* ══════════════ code-inline · 行内代码 ══════════════ */
+.code-inline {
+  padding: 2px 6px;
+  border-radius: var(--radius-xs);
+  background: var(--token-control);
+  border: 1px solid var(--token-outline-soft);
+  font-size: 12px;
+  font-family: var(--font-mono);
+  color: var(--token-accent);
+}
+
+/* ══════════════ list · 分隔列表 ══════════════ */
+.list { list-style: none; margin: 0; padding: 0; }
+.list-item {
+  padding: 8px;
+  border-radius: var(--radius-md);
+  transition: background-color var(--duration-normal) var(--ease-out);
+}
+.list-item:hover { background: var(--token-control-hover); }
+.list .list-item + .list-item { border-top: 1px solid var(--token-outline-soft); }
+
+/* ══════════════ accordion · 手风琴（behaviors/accordion 配套） ══════════════
+ * DOM 契约：
+ *   <div class="accordion" data-single?>
+ *     <div class="accordion-item">
+ *       <button class="accordion-trigger">标题 <svg class="accordion-chevron"/></button>
+ *       <div class="accordion-panel"><div class="accordion-panel-inner">内容</div></div>
+ *     </div>
+ *   </div>
+ * 展开 = item 挂 .is-open；panel 用 grid-template-rows 0fr→1fr 做过渡。
+ */
+.accordion-item { border-bottom: 1px solid var(--token-outline-soft); }
+.accordion-item:last-child { border-bottom: 0; }
+.accordion-trigger {
+  width: 100%;
+  display: flex; align-items: center; justify-content: space-between; gap: 8px;
+  padding: 12px 8px;
+  font-size: 14px; font-weight: 500;
+  color: var(--token-text); text-align: left;
+  background: none; border: 0; cursor: pointer;
+  border-radius: var(--radius-md);
+  transition: background-color var(--duration-normal) var(--ease-out);
+}
+.accordion-trigger:hover { background: var(--token-control-hover); }
+.accordion-chevron {
+  width: 14px; height: 14px; flex-shrink: 0;
+  color: var(--token-text-faint);
+  transition: transform var(--duration-normal) var(--ease-out);
+}
+.accordion-item.is-open .accordion-chevron { transform: rotate(180deg); }
+.accordion-panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--duration-normal) var(--ease-out);
+}
+.accordion-item.is-open .accordion-panel { grid-template-rows: 1fr; }
+.accordion-panel-inner {
+  overflow: hidden;
+  padding: 0 8px 12px;
+  font-size: 13px;
+  color: var(--token-text-muted);
+  line-height: 1.6;
+}
+
+/* ══════════════ timeline · 时间线 ══════════════
+ * DOM 契约：.timeline-item > .timeline-dot + .timeline-body
+ * 连接线 = item 的 ::after（相对 item 绝对定位，从 dot 下方贯穿到下一项），末项不画。
+ */
+.timeline { display: flex; flex-direction: column; }
+.timeline-item {
+  position: relative;
+  display: flex; gap: 12px;
+  padding-bottom: 24px;
+}
+.timeline-item:last-child { padding-bottom: 0; }
+.timeline-item:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  left: 13.5px;              /* 28px dot 的水平中心 */
+  top: 32px;                 /* 28px dot + 4px 间距 */
+  bottom: 0;
+  width: 1px;
+  background: var(--token-outline-soft);
+}
+.timeline-dot {
+  width: 28px; height: 28px; flex-shrink: 0;
+  border-radius: var(--radius-full);
+  display: flex; align-items: center; justify-content: center;
+  background: var(--token-control);
+  border: 1px solid var(--token-outline-soft);
+  color: var(--token-text-muted);
+  z-index: 1;
+}
+.timeline-dot svg { width: 13px; height: 13px; }
+.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 { display: flex; align-items: center; gap: 8px; }
+.timeline-title { font-size: 13px; font-weight: 500; color: var(--token-text); }
+.timeline-time { font-size: 11px; color: var(--token-text-faint); margin-left: auto; font-variant-numeric: tabular-nums; }
+.timeline-desc { font-size: 12px; color: var(--token-text-muted); margin: 4px 0 0; }
+
+/* ══════════════ desc · 描述列表 ══════════════
+ * 列数由容器 style="--desc-cols:N" 指定，默认 2；item 可用 style="--desc-span:N" 跨列。
+ * --bordered 变体：gap:1px 露出容器底色形成格线。
+ */
+.desc { display: flex; flex-direction: column; gap: 8px; }
+.desc-title { font-size: 13px; font-weight: 500; color: var(--token-text); margin: 0; }
+.desc-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--desc-cols, 2), minmax(0, 1fr));
+  gap: 1px;
+  margin: 0;
+}
+.desc--bordered .desc-grid {
+  background: var(--token-outline-soft);
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+.desc-item { grid-column: span var(--desc-span, 1); }
+.desc--bordered .desc-item { background: var(--token-card); padding: 8px 12px; }
+.desc:not(.desc--bordered) .desc-item { display: flex; flex-direction: column; gap: 2px; }
+.desc-item dt { font-size: 11px; color: var(--token-text-faint); }
+.desc-item dd { font-size: 13px; color: var(--token-text); margin: 0; }
+
+/* ══════════════ tree · 树形（behaviors/tree 配套） ══════════════
+ * DOM 契约：
+ *   <ul class="tree"><li>
+ *     <div class="tree-node" style="--depth:0">
+ *       <button class="tree-toggle"><svg/></button>   <!-- 叶子用空 span.tree-toggle 占 18px -->
+ *       <span class="tree-label">节点</span>
+ *     </div>
+ *     <ul>…子节点…</ul>                                <!-- 可选；behavior 切换 hidden -->
+ *   </li></ul>
+ * 折叠 = toggle 挂 .is-collapsed（chevron 转 -90°）+ 子 ul hidden；选中 = node 挂 .is-selected。
+ */
+.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
+.tree { user-select: none; }
+.tree-node {
+  display: flex; align-items: center; gap: 6px;
+  padding: 6px 8px 6px calc(4px + var(--depth, 0) * 14px);
+  border-radius: var(--radius-md);
+  font-size: 13px;
+  color: var(--token-text);
+  cursor: pointer;
+  transition: background-color var(--duration-normal) var(--ease-out);
+}
+.tree-node:hover { background: var(--token-control-hover); }
+.tree-node.is-selected {
+  background: var(--token-accent-subtle);
+  color: var(--token-accent);
+  font-weight: 500;
+}
+.tree-node.is-disabled { opacity: 0.4; pointer-events: none; }
+.tree-toggle {
+  width: 18px; height: 18px; flex-shrink: 0;
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 0; border: 0; background: none;
+  color: var(--token-text-muted);
+  cursor: pointer;
+}
+.tree-toggle:hover { color: var(--token-text); }
+.tree-toggle svg {
+  width: 13px; height: 13px;
+  transition: transform var(--duration-normal) var(--ease-out);
+}
+.tree-toggle.is-collapsed svg { transform: rotate(-90deg); }
+.tree-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+
+/* ── components/empty.css ── */
+/*
+ * @icen.ai/ui — Component: empty（空状态）
+ * 包含：.empty 容器 + .empty-icon / .empty-title / .empty-desc / .empty-action
+ * 规格源自 opengal src/presentation/ui/data/display.tsx 的 EmptyState。
+ */
+
+.empty {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  text-align: center;
+  padding: 48px 16px;
+}
+.empty-icon {
+  width: 48px; height: 48px;
+  border-radius: var(--radius-lg);
+  background: var(--token-card);
+  border: 1px solid var(--token-outline-soft);
+  box-shadow: var(--token-shadow-inset);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--token-text-faint);
+  margin-bottom: 16px;
+}
+.empty-icon svg { width: 24px; height: 24px; }
+.empty-title { font-size: 14px; font-weight: 500; color: var(--token-text); margin: 0; }
+.empty-desc { font-size: 12px; color: var(--token-text-muted); margin: 4px 0 0; max-width: 240px; }
+.empty-action { margin-top: 16px; }
+
+
+/* ── components/feedback.css ── */
+/*
+ * @icen.ai/ui — Component: feedback（反馈族）
+ * 包含：alert（四态内联横幅）/ result（终态页）/ progress（线性进度）/ spinner（加载圈）/ skeleton（占位块）
+ * 规格源自 opengal src/presentation/ui/feedback/toast.tsx 的 Alert 与 data/exhibit.tsx 的 Result、
+ * data/display.tsx 的 Progress / Spinner / Skeleton。
+ * base.css 未提供 spin / skeleton-pulse 关键帧，在本文件自带。
+ */
+
+/* ══════════════ alert · 内联横幅 ══════════════ */
+.alert {
+  display: flex; align-items: flex-start; gap: 12px;
+  padding: 12px;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--token-shadow-inset);
+  border: 1px solid transparent;
+}
+.alert--info    { background: var(--token-info-muted);    border-color: color-mix(in srgb, var(--token-info) 15%, transparent); }
+.alert--success { background: var(--token-success-muted); border-color: color-mix(in srgb, var(--token-success) 15%, transparent); }
+.alert--warning { background: var(--token-warning-muted); border-color: color-mix(in srgb, var(--token-warning) 15%, transparent); }
+.alert--error   { background: var(--token-error-muted);   border-color: color-mix(in srgb, var(--token-error) 15%, transparent); }
+
+.alert-icon { flex-shrink: 0; margin-top: 2px; display: flex; }
+.alert-icon svg { width: 16px; height: 16px; }
+.alert--info .alert-icon,       .alert--info .alert-title    { color: var(--token-info); }
+.alert--success .alert-icon,    .alert--success .alert-title { color: var(--token-success); }
+.alert--warning .alert-icon,    .alert--warning .alert-title { color: var(--token-warning); }
+.alert--error .alert-icon,      .alert--error .alert-title   { color: var(--token-error); }
+
+.alert-content { flex: 1; min-width: 0; }
+.alert-title { font-size: 13px; font-weight: 500; margin: 0; }
+.alert-body { font-size: 12px; color: var(--token-text-muted); line-height: 1.6; }
+.alert-close {
+  margin-left: auto; flex-shrink: 0;
+  display: flex; align-items: center; justify-content: center;
+  padding: 2px; border: 0; border-radius: var(--radius-xs);
+  background: none; color: var(--token-text-faint); cursor: pointer;
+}
+.alert-close:hover { color: var(--token-text); background: color-mix(in srgb, var(--token-text) 6%, transparent); }
+.alert-close svg { width: 14px; height: 14px; }
+
+/* ══════════════ result · 终态页 ══════════════ */
+.result {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  text-align: center;
+  padding: 40px 24px;
+}
+.result-icon {
+  width: 64px; height: 64px;
+  border-radius: var(--radius-full);
+  display: flex; align-items: center; justify-content: center;
+  box-shadow: var(--token-shadow-inset);
+  border: 1px solid transparent;
+  margin-bottom: 16px;
+}
+.result-icon svg { width: 28px; height: 28px; }
+.result--success .result-icon { background: var(--token-success-muted); color: var(--token-success); border-color: color-mix(in srgb, var(--token-success) 10%, transparent); }
+.result--error   .result-icon { background: var(--token-error-muted);   color: var(--token-error);   border-color: color-mix(in srgb, var(--token-error) 10%, transparent); }
+.result--warning .result-icon { background: var(--token-warning-muted); color: var(--token-warning); border-color: color-mix(in srgb, var(--token-warning) 10%, transparent); }
+.result--info    .result-icon { background: var(--token-info-muted);    color: var(--token-info);    border-color: color-mix(in srgb, var(--token-info) 10%, transparent); }
+.result-title { font-size: 17px; font-weight: 600; color: var(--token-text); margin: 0; }
+.result-desc { font-size: 13px; color: var(--token-text-muted); margin: 4px 0 0; max-width: 360px; }
+.result-extra { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
+
+/* ══════════════ progress · 线性进度 ══════════════ */
+.progress { display: flex; align-items: center; gap: 8px; }
+.progress-track {
+  flex: 1; height: 6px; overflow: hidden;
+  border-radius: var(--radius-full);
+  background: color-mix(in srgb, var(--token-line-soft) 40%, transparent);
+}
+.progress-bar {
+  height: 100%;
+  border-radius: var(--radius-full);
+  background: var(--token-accent);
+  transition: width 500ms var(--ease-out);
+}
+.progress--sm .progress-track { height: 4px; }
+.progress-label { font-size: 11px; color: var(--token-text-muted); font-variant-numeric: tabular-nums; }
+
+/* ══════════════ spinner · 加载圈 ══════════════ */
+.spinner {
+  width: 20px; height: 20px;
+  border: 2px solid var(--token-accent);
+  border-top-color: transparent;
+  border-radius: var(--radius-full);
+  animation: icen-spin 1s linear infinite;
+}
+.spinner--sm { width: 16px; height: 16px; }
+.spinner--lg { width: 32px; height: 32px; }
+
+@keyframes icen-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ══════════════ skeleton · 占位块 ══════════════ */
+.skeleton {
+  background: var(--token-control-hover);
+  border-radius: var(--radius-sm);
+  animation: icen-skeleton-pulse 2s ease-in-out infinite;
+}
+.skeleton--circle { border-radius: var(--radius-full); }
+
+@keyframes icen-skeleton-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+
 /* ── components/form.css ── */
 /*
  * @icen.ai/ui — Component: form（表单字段/输入/错误与成功提示）
@@ -2034,6 +2632,634 @@ html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--token-te
 .banner-ok, .banner-err { margin-bottom: 20px; }
 
 
+/* ── components/input.css ── */
+/*
+ * @icen.ai/ui — Component: input（wrapper 式输入框 / 多行 / 搜索）
+ * 规格源自 opengal primitives/input.tsx；与 behaviors/input.ts 配套。
+ *
+ * 契约：
+ *   <div class="input-wrap control [--sm|--lg] [.is-error] [.is-disabled]">
+ *     <span class="input-leading">…</span>            可选前缀
+ *     <input class="input" />
+ *     <button class="input-clear">…</button>          可选清除钮（behavior 清空并聚焦）
+ *     <button class="input-pw-toggle">…</button>      可选密码可见切换（behavior 驱动）
+ *     <span class="input-trailing">…</span>           可选后缀
+ *   </div>
+ *   多行：<div class="textarea-wrap control"><textarea class="textarea" data-autosize></textarea></div>
+ *   搜索：.input-wrap--search = leading 放大镜 + .input-clear 的结构约定（无额外视觉）
+ */
+
+.input-wrap {
+  display: flex; align-items: center; gap: 8px; width: 100%;
+  height: 36px; padding: 0 12px; font-size: 13px;
+  background: var(--token-control);
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--token-shadow-inset);
+}
+.input-wrap:focus-within { border-color: var(--token-accent); }
+.input-wrap.is-error, .input-wrap.is-error:focus-within { border-color: var(--token-error); }
+.input-wrap.is-disabled { opacity: 0.4; }
+.input-wrap.is-disabled .input { cursor: not-allowed; }
+
+/* 尺寸三档：高度 / 横向内边距 / 字号 */
+.input-wrap--sm { height: 32px; padding: 0 10px; font-size: 12px; }
+.input-wrap--lg { height: 40px; padding: 0 14px; font-size: 14px; }
+
+.input {
+  flex: 1; min-width: 0; padding: 0;
+  background: transparent; border: none; outline: none;
+  color: var(--token-text); font: inherit;
+}
+.input::placeholder { color: color-mix(in srgb, var(--token-text-faint) 60%, transparent); }
+
+.input-leading, .input-trailing {
+  display: inline-flex; align-items: center; flex-shrink: 0;
+  color: var(--token-text-faint);
+}
+
+.input-clear {
+  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
+  padding: 2px; border: none; background: transparent; cursor: pointer;
+  border-radius: var(--radius-full); color: var(--token-text-faint);
+  transition: color var(--duration-normal) var(--ease-out),
+    background-color var(--duration-normal) var(--ease-out);
+}
+.input-clear:hover { color: var(--token-text); background: var(--token-surface-hover); }
+
+.input-pw-toggle {
+  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
+  padding: 2px; border: none; background: transparent; cursor: pointer;
+  color: var(--token-text-faint);
+  transition: color var(--duration-normal) var(--ease-out);
+}
+.input-pw-toggle:hover { color: var(--token-text); }
+
+/* ── 多行：同一 wrapper 视觉，内部 textarea 裸奔 ── */
+.textarea-wrap {
+  display: flex; width: 100%;
+  background: var(--token-control);
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--token-shadow-inset);
+}
+.textarea-wrap:focus-within { border-color: var(--token-accent); }
+.textarea-wrap.is-error, .textarea-wrap.is-error:focus-within { border-color: var(--token-error); }
+.textarea-wrap.is-disabled { opacity: 0.4; }
+.textarea-wrap.is-disabled .textarea { cursor: not-allowed; }
+
+.textarea {
+  width: 100%; padding: 12px;
+  background: transparent; border: none; outline: none; resize: none;
+  color: var(--token-text); font: inherit; font-size: 13px; line-height: 1.5;
+  min-height: calc(3 * 1.5em + 24px); /* 3 行 + 上下 padding */
+}
+.textarea::placeholder { color: color-mix(in srgb, var(--token-text-faint) 60%, transparent); }
+
+
+/* ── components/layout.css ── */
+/*
+ * @icen.ai/ui — Component: layout（布局原语，全部是工具类，无 JS）
+ * stack / divider / surface / text / grid / center / container / aspect / visually-hidden
+ * 全部消费 --token-*；档位类名与 opengal primitives/layout(-containers) 一一对应。
+ */
+
+/* ── Stack：flex 堆叠（默认列向，gap 8px） ── */
+.stack { display: flex; flex-direction: column; gap: 8px; }
+.stack--row { flex-direction: row; }
+.stack--inline { display: inline-flex; }
+.stack--wrap { flex-wrap: wrap; }
+.stack--gap-0 { gap: 0; }
+.stack--gap-1 { gap: 4px; }
+.stack--gap-2 { gap: 8px; }
+.stack--gap-3 { gap: 12px; }
+.stack--gap-4 { gap: 16px; }
+.stack--gap-6 { gap: 24px; }
+.stack--gap-8 { gap: 32px; }
+.stack--gap-12 { gap: 48px; }
+.stack--gap-16 { gap: 64px; }
+.stack--items-start { align-items: flex-start; }
+.stack--items-center { align-items: center; }
+.stack--items-end { align-items: flex-end; }
+.stack--items-stretch { align-items: stretch; }
+.stack--items-baseline { align-items: baseline; }
+.stack--justify-start { justify-content: flex-start; }
+.stack--justify-center { justify-content: center; }
+.stack--justify-end { justify-content: flex-end; }
+.stack--justify-between { justify-content: space-between; }
+.stack--justify-around { justify-content: space-around; }
+.stack--justify-evenly { justify-content: space-evenly; }
+
+/* ── Divider：分隔线 ── */
+.divider { background: var(--token-outline-soft); height: 1px; width: 100%; }
+.divider--vertical { width: 1px; height: 100%; align-self: stretch; }
+
+/* ── Surface：卡片容器（默认 inset 阴影 + 16px padding） ── */
+.surface {
+  border-radius: var(--radius-lg);
+  background: var(--token-card);
+  border: 1px solid var(--token-outline-soft);
+  box-shadow: var(--token-shadow-inset);
+  padding: 16px;
+}
+.surface--elevated { box-shadow: var(--token-shadow-card); }
+.surface--overlay {
+  background: var(--token-card-strong);
+  border-color: var(--token-outline);
+  box-shadow: var(--token-shadow-overlay);
+}
+.surface--p-none { padding: 0; }
+.surface--p-sm { padding: 12px; }
+.surface--p-md { padding: 16px; }
+.surface--p-lg { padding: 20px; }
+
+/* ── Text：字号 / 语义色 / 截断 ── */
+.text--xs { font-size: 11px; }
+.text--sm { font-size: 12px; }
+.text--base { font-size: 13px; }
+.text--md { font-size: 14px; }
+.text--lg { font-size: 15px; }
+.text--xl { font-size: 18px; }
+.text--2xl { font-size: 22px; }
+.text--muted { color: var(--token-text-muted); }
+.text--faint { color: var(--token-text-faint); }
+.text--accent { color: var(--token-accent); }
+.text--success { color: var(--token-success); }
+.text--warning { color: var(--token-warning); }
+.text--error { color: var(--token-error); }
+.text--truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* ── Grid：栅格（默认 gap 12px） ── */
+.grid { display: grid; gap: 12px; }
+.grid--cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.grid--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+.grid--cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+.grid--gap-0 { gap: 0; }
+.grid--gap-4 { gap: 4px; }
+.grid--gap-8 { gap: 8px; }
+.grid--gap-12 { gap: 12px; }
+.grid--gap-16 { gap: 16px; }
+.grid--gap-24 { gap: 24px; }
+
+/* ── Center：flex 居中盒 ── */
+.center { display: flex; align-items: center; justify-content: center; }
+
+/* ── Container：限宽容器（默认 960px） ── */
+.container { width: 100%; margin-inline: auto; padding-inline: 16px; max-width: 960px; }
+.container--sm { max-width: 480px; }
+.container--md { max-width: 720px; }
+.container--lg { max-width: 960px; }
+.container--xl { max-width: 1200px; }
+.container--full { max-width: none; }
+
+/* ── Aspect：固定比例盒（padding-bottom hack，内容 absolute inset:0） ── */
+.aspect { position: relative; width: 100%; overflow: hidden; padding-bottom: 56.25%; }
+.aspect--square { padding-bottom: 100%; }
+.aspect--4-3 { padding-bottom: 75%; }
+.aspect--2-3 { padding-bottom: 150%; }
+.aspect > * { position: absolute; inset: 0; }
+
+/* ── VisuallyHidden：屏幕阅读器专用文本（sr-only 等价） ── */
+.visually-hidden {
+  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
+
+
+/* ── components/media.css ── */
+/*
+ * @icen.ai/ui — Component: media（媒体族）
+ * 包含：avatar（头像）/ media-card（封面卡，滑出 overlay）/ rating（星级评分）/ carousel（轮播，与 behaviors/carousel 配套）
+ * carousel 归入本文件（无独立 carousel.css 配额）；规格源自 opengal data/display.tsx 的 Avatar、
+ * data/cartridge-card.tsx 的 hover overlay、data/exhibit.tsx 的 Carousel 与 Rating。
+ */
+
+/* ══════════════ avatar · 头像 ══════════════ */
+.avatar {
+  position: relative;
+  display: inline-flex; align-items: center; justify-content: center;
+  overflow: hidden;
+  border-radius: var(--radius-full);
+  background: var(--token-accent-subtle);
+  color: var(--token-accent);
+  font-weight: 600;
+  width: 36px; height: 36px; font-size: 12px;
+  flex-shrink: 0;
+}
+.avatar--xs { width: 20px; height: 20px; font-size: 9px; }
+.avatar--sm { width: 28px; height: 28px; font-size: 10px; }
+.avatar--lg { width: 48px; height: 48px; font-size: 14px; }
+.avatar img { width: 100%; height: 100%; object-fit: cover; }
+
+/* ══════════════ media-card · 封面卡 ══════════════ */
+.media-card {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--radius-lg);
+  transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
+}
+.media-card:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 20px var(--token-accent-glow);
+}
+.media-card-cover {
+  display: block;
+  width: 100%;
+  aspect-ratio: 2 / 3;
+  object-fit: cover;
+}
+.media-card-overlay {
+  position: absolute; left: 0; right: 0; bottom: 0;
+  padding: 32px 12px 10px;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.35) 65%, transparent);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  color: #fff;
+  transform: translateY(100%);
+  transition: transform 200ms var(--ease-out);
+  pointer-events: none;
+}
+.media-card:hover .media-card-overlay {
+  transform: translateY(0);
+  transition-delay: 80ms;
+}
+
+/* ══════════════ rating · 星级评分 ══════════════ */
+.rating { display: inline-flex; align-items: center; gap: 2px; }
+.rating-star {
+  padding: 2px;
+  border-radius: var(--radius-xs);
+  background: none; border: 0;
+  cursor: pointer;
+  display: inline-flex; align-items: center; justify-content: center;
+}
+.rating-star svg {
+  width: 18px; height: 18px; display: block;
+  fill: transparent;
+  stroke: var(--token-line-strong);
+  stroke-width: 1.6;
+  transition: fill var(--duration-normal) var(--ease-out), stroke var(--duration-normal) var(--ease-out);
+}
+.rating--sm .rating-star svg { width: 14px; height: 14px; }
+.rating--lg .rating-star svg { width: 22px; height: 22px; }
+.rating-star.is-filled svg { fill: var(--token-warning); stroke: var(--token-warning); }
+.rating-star.is-half svg {
+  fill: color-mix(in srgb, var(--token-warning) 50%, transparent);
+  stroke: var(--token-warning);
+}
+
+/* ══════════════ carousel · 轮播（behaviors/carousel 配套） ══════════════
+ * DOM 契约：
+ *   <div class="carousel">
+ *     <div class="carousel-track"><div class="carousel-slide">…</div>×n</div>
+ *     <button class="carousel-arrow carousel-arrow--prev">…</button>
+ *     <button class="carousel-arrow carousel-arrow--next">…</button>
+ *     <div class="carousel-dots"></div>   <!-- dots 由 behavior 自动生成 -->
+ *   </div>
+ */
+.carousel {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--radius-lg);
+  background: var(--token-control);
+}
+.carousel-track {
+  display: flex;
+  transition: transform 300ms var(--ease-out);
+}
+.carousel-slide { width: 100%; flex-shrink: 0; }
+.carousel-arrow {
+  position: absolute; top: 50%; transform: translateY(-50%);
+  width: 32px; height: 32px;
+  border-radius: var(--radius-full);
+  background: color-mix(in srgb, var(--token-card) 78%, transparent);
+  border: 1px solid var(--token-outline-soft);
+  color: var(--token-text);
+  display: flex; align-items: center; justify-content: center;
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  box-shadow: var(--token-shadow-card);
+  cursor: pointer;
+  transition: background-color var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
+}
+.carousel-arrow:hover { background: var(--token-card-strong); }
+.carousel-arrow:active { transform: translateY(-50%) scale(0.95); }
+.carousel-arrow svg { width: 16px; height: 16px; }
+.carousel-arrow--prev { left: 8px; }
+.carousel-arrow--next { right: 8px; }
+.carousel-dots {
+  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
+  display: flex; gap: 6px;
+}
+.carousel-dot {
+  width: 6px; height: 6px; padding: 0;
+  border: 0; border-radius: var(--radius-full);
+  background: color-mix(in srgb, var(--token-card) 70%, transparent);
+  cursor: pointer;
+  transition: width var(--duration-normal) var(--ease-out), background-color var(--duration-normal) var(--ease-out);
+}
+.carousel-dot:hover { background: color-mix(in srgb, var(--token-accent) 70%, transparent); }
+.carousel-dot.active { width: 20px; background: var(--token-accent); }
+
+
+/* ── components/menu.css ── */
+/*
+ * @icen.ai/ui — Component: menu（菜单面板，与 behaviors/dropdown、context-menu 配套）
+ * 面板由 JS portal 到 document.body 并按 fixed 定位；data-side 决定进场位移方向。
+ * 规格源自 opengal overlay/dropdown + overlay/context-menu。
+ */
+
+.menu {
+  position: fixed; z-index: var(--z-popover);
+  min-width: 180px; max-height: min(70vh, 420px); overflow-y: auto;
+  margin: 0; padding: 4px;
+  background: color-mix(in srgb, var(--token-card-strong) 92%, transparent);
+  backdrop-filter: blur(24px);
+  border: 1px solid var(--token-outline);
+  box-shadow: var(--token-shadow-overlay);
+  border-radius: var(--radius-lg);
+  animation: icen-menu-in 150ms var(--ease-out);
+}
+.menu[data-side='top'] { animation-name: icen-menu-in-top; }
+
+/* 右键菜单修正（opengal context-menu：min 218 / max 286 / z 9999 / 入场 100ms） */
+.menu--context {
+  min-width: 218px; max-width: 286px; z-index: 9999;
+  animation-duration: 100ms;
+}
+
+/* ── 分组标签 / 头（context-menu 的 header 项） ── */
+.menu-label {
+  padding: 4px 8px; font-size: 10px; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 0.08em;
+  color: var(--token-text-faint);
+}
+.menu-header { padding: 8px 10px 6px; }
+.menu-header-label {
+  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  font-size: 11px; font-weight: 500; line-height: 16px; color: var(--token-text);
+}
+.menu-header-desc {
+  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  font-size: 10px; line-height: 14px; color: var(--token-text-faint);
+}
+
+/* ── 菜单项 ── */
+.menu-item {
+  position: relative; display: flex; align-items: center; gap: 8px;
+  width: 100%; padding: 6px 8px;
+  background: none; border: 0; font: inherit; font-size: 12px; text-align: left;
+  color: var(--token-text);
+  border-radius: var(--radius-md); cursor: pointer; user-select: none;
+}
+.menu-item.is-highlighted, .menu-item:focus {
+  background: var(--token-surface-hover); color: var(--token-accent); outline: none;
+}
+.menu-item--danger { color: var(--token-error); }
+.menu-item--danger.is-highlighted, .menu-item--danger:focus {
+  background: var(--token-error-muted); color: var(--token-error);
+}
+.menu-item.is-disabled, .menu-item:disabled { opacity: 0.5; pointer-events: none; }
+
+.menu-item-icon {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 14px; height: 14px; flex-shrink: 0;
+}
+.menu-item-icon:empty { width: 16px; height: auto; } /* 无图标时 16px 宽占位 */
+.menu-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.menu-item-sub { display: block; font-size: 10px; line-height: 1.2; color: var(--token-text-faint); }
+.menu-item-shortcut { font-size: 10px; color: var(--token-text-faint); }
+
+/* 勾选项：左勾 ✓ + 缩进 */
+.menu-item-check {
+  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
+  color: var(--token-accent); font-size: 12px; line-height: 1;
+}
+.menu-item--checked { padding-left: 28px; }
+
+.menu-separator { margin: 6px 8px; height: 1px; background: var(--token-line-soft); }
+
+/* ── 进场：fade + scale(.95→1)，bottom 从上方 8px 滑入、top 从下方 8px 滑入 ── */
+@keyframes icen-menu-in {
+  from { opacity: 0; transform: scale(0.95) translateY(-8px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+@keyframes icen-menu-in-top {
+  from { opacity: 0; transform: scale(0.95) translateY(8px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+
+/* ── components/modal.css ── */
+/*
+ * @icen.ai/ui — Component: modal（对话框 + 贴边 Sheet，与 behaviors/modal 配套）
+ * 契约：<div class="modal-backdrop" data-modal="id" hidden> > .modal[role=dialog]
+ * 规格源自 opengal overlay/dialog：backdrop fadeIn 150ms、面板 dialogScaleIn
+ * 200ms cubic-bezier(.16,1,.3,1)、Sheet 四向 slideIn 200ms 位移 40px。
+ */
+
+.modal-backdrop {
+  position: fixed; inset: 0; z-index: var(--z-dialog);
+  display: flex; align-items: center; justify-content: center; padding: 16px;
+  background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(4px);
+  animation: icen-modal-fade-in 150ms ease-out;
+}
+.modal-backdrop[hidden] { display: none; }
+
+.modal {
+  display: flex; flex-direction: column; overflow: hidden;
+  width: 100%; max-width: 480px; max-height: calc(100vh - 32px);
+  background: var(--token-card-strong); color: var(--token-text);
+  border: 1px solid var(--token-outline);
+  box-shadow: var(--token-shadow-overlay);
+  border-radius: var(--radius-xl);
+  animation: icen-modal-scale-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.modal:focus { outline: none; }
+
+/* ── 尺寸档 ── */
+.modal--sm { max-width: 360px; }
+.modal--lg { max-width: 640px; }
+.modal--xl { max-width: 800px; }
+.modal--full { width: calc(100vw - 32px); max-width: none; height: calc(100vh - 32px); max-height: none; }
+
+/* ── 头部 / 主体 / 底栏 ── */
+.modal-header {
+  display: flex; align-items: flex-start; justify-content: space-between;
+  gap: 16px; padding: 20px 24px 12px;
+}
+.modal-title { margin: 0; font-size: 15px; font-weight: 600; }
+.modal-description { margin: 2px 0 0; font-size: 12px; color: var(--token-text-muted); }
+.modal-close {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; padding: 0; flex-shrink: 0;
+  background: none; border: 0; cursor: pointer;
+  color: var(--token-text-faint); font-size: 16px; line-height: 1;
+  border-radius: var(--radius-md);
+}
+.modal-close:hover { background: var(--token-surface-hover); color: var(--token-text); }
+
+.modal-body { flex: 1; overflow-y: auto; padding: 0 24px 20px; }
+.modal-footer {
+  display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px;
+  border-top: 1px solid color-mix(in srgb, var(--token-line-soft) 40%, transparent);
+}
+
+/* ── Sheet 变体：面板 fixed 贴边，radius 只保留非贴边侧 ── */
+.modal--sheet-left, .modal--sheet-right, .modal--sheet-top, .modal--sheet-bottom {
+  position: fixed; max-width: none; max-height: none; border-radius: 0;
+}
+.modal--sheet-left {
+  left: 0; top: 0; bottom: 0; width: 360px; height: 100%;
+  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
+  animation-name: icen-modal-slide-left;
+}
+.modal--sheet-right {
+  right: 0; top: 0; bottom: 0; width: 360px; height: 100%;
+  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
+  animation-name: icen-modal-slide-right;
+}
+.modal--sheet-top {
+  top: 0; left: 0; right: 0; width: 100%; height: 300px;
+  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
+  animation-name: icen-modal-slide-top;
+}
+.modal--sheet-bottom {
+  bottom: 0; left: 0; right: 0; width: 100%; height: 300px;
+  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+  animation-name: icen-modal-slide-bottom;
+}
+.modal--sheet-left.modal--sheet-sm, .modal--sheet-right.modal--sheet-sm { width: 280px; }
+.modal--sheet-left.modal--sheet-lg, .modal--sheet-right.modal--sheet-lg { width: 480px; }
+.modal--sheet-top.modal--sheet-lg, .modal--sheet-bottom.modal--sheet-lg { height: 50vh; }
+
+/* ── 进场动画（与 opengal src/index.css 同参数） ── */
+@keyframes icen-modal-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes icen-modal-scale-in {
+  from { opacity: 0; transform: scale(0.96) translateY(8px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+@keyframes icen-modal-slide-left {
+  from { opacity: 0; transform: translateX(-40px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+@keyframes icen-modal-slide-right {
+  from { opacity: 0; transform: translateX(40px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+@keyframes icen-modal-slide-top {
+  from { opacity: 0; transform: translateY(-40px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes icen-modal-slide-bottom {
+  from { opacity: 0; transform: translateY(40px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+
+/* ── components/nav.css ── */
+/*
+ * @icen.ai/ui — Component: nav（玻璃顶栏，scroll 收缩配套 behaviors/nav）
+ * 用法：<nav class="nav nav--sticky" data-scroll-reactive>
+ *         <div class="nav-left">…</div><div class="nav-center">…</div><div class="nav-right">…</div>
+ *       </nav>
+ * 三段：.nav-left / .nav-center（flex:1 居中）/ .nav-right，整行补充用 .nav-bottom。
+ * 按钮：.nav-btn（HTML 组合 .motion .pressable 基元），.is-active / .is-disabled / .nav-btn--icon。
+ * 契约：sticky/fixed 挂 --z-chrome 层；data-scroll-reactive 时 behaviors/nav 依 scrollY>12 切
+ * .is-scrolled——未滚动更透且无边线，滚动后底色更实 + blur 16px。
+ */
+
+.nav {
+  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
+  height: 56px; padding: 0 16px;
+  background: var(--token-surface-glass);
+  backdrop-filter: blur(12px) saturate(1.1);
+  -webkit-backdrop-filter: blur(12px) saturate(1.1);
+  border-bottom: 1px solid var(--token-outline-soft);
+  transition: all var(--duration-slow) var(--ease-out);
+}
+/* 带整行 bottom 时放开固定高度，第一行仍保持 56px */
+.nav:has(.nav-bottom) { height: auto; min-height: 56px; }
+.nav--sticky { position: sticky; top: 0; z-index: var(--z-chrome); }
+.nav--fixed { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-chrome); }
+
+/* scroll-reactive：未滚动更透、底边线透明（滚动后由 .is-scrolled 接管） */
+.nav[data-scroll-reactive]:not(.is-scrolled) {
+  background: color-mix(in srgb, var(--token-surface-glass) 70%, transparent);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border-bottom-color: transparent;
+}
+.nav.is-scrolled {
+  background: color-mix(in srgb, var(--token-surface-glass) 92%, transparent);
+  backdrop-filter: blur(16px) saturate(1.2);
+  -webkit-backdrop-filter: blur(16px) saturate(1.2);
+}
+
+.nav-left, .nav-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
+.nav-center { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; }
+.nav-bottom { width: 100%; }
+
+.nav-btn {
+  display: inline-flex; align-items: center; gap: 6px;
+  border-radius: var(--radius-full); padding: 6px 12px;
+  font-size: 13px; color: var(--token-text-muted);
+  background: none; border: 0; cursor: pointer;
+}
+.nav-btn > svg { width: 14px; height: 14px; flex-shrink: 0; }
+.nav-btn:not(.is-active):hover { color: var(--token-text); background: var(--token-control-hover); }
+.nav-btn.is-active {
+  background: var(--token-accent); color: var(--token-on-accent);
+  font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
+}
+.nav-btn.is-disabled, .nav-btn:disabled { opacity: .4; pointer-events: none; }
+.nav-btn--icon { padding: 6px 10px; }
+.nav-btn--icon > svg { width: 15px; height: 15px; }
+
+.nav-divider { width: 1px; height: 20px; margin: 0 2px; background: var(--token-outline-soft); }
+
+
+/* ── components/pagination.css ── */
+/*
+ * @icen.ai/ui — Component: pagination（分页）
+ * 用法：<nav class="pagination" aria-label="分页">
+ *         <button class="page-btn motion is-disabled">‹</button>
+ *         <button class="page-btn motion">1</button>
+ *         <span class="page-ellipsis">…</span>
+ *         <button class="page-btn motion is-active" aria-current="page">5</button>
+ *         <button class="page-btn motion">›</button>
+ *       </nav>
+ * 翻页逻辑由消费方实现，这里只提供静态样式契约。
+ */
+
+.pagination { display: flex; align-items: center; gap: 4px; }
+
+.page-btn {
+  min-width: 28px; height: 28px; padding: 0 6px;
+  border-radius: var(--radius-md); font-size: 12px;
+  display: inline-flex; align-items: center; justify-content: center;
+  color: var(--token-text-muted); background: none; border: 0; cursor: pointer;
+}
+.page-btn:not(.is-active):hover { background: var(--token-control-hover); color: var(--token-text); }
+.page-btn.is-active {
+  background: var(--token-accent); color: var(--token-on-accent);
+  font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
+}
+.page-btn.is-disabled, .page-btn:disabled { opacity: .3; pointer-events: none; }
+
+.page-ellipsis {
+  min-width: 28px; height: 28px; font-size: 12px;
+  display: inline-flex; align-items: center; justify-content: center;
+  color: var(--token-text-faint);
+}
+
+
 /* ── components/panel.css ── */
 /*
  * @icen.ai/ui — Component: panel（白卡片容器 + 标题栏）
@@ -2087,6 +3313,360 @@ html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--token-te
 }
 
 
+/* ── components/popover.css ── */
+/*
+ * @icen.ai/ui — Component: popover（锚定浮层，与 behaviors/popover 配套）
+ * 面板由 JS portal 到 document.body 并按 fixed 定位；data-side 由布局函数写入。
+ */
+
+.popover {
+  position: fixed; z-index: var(--z-popover);
+  padding: 8px;
+  background: var(--token-card-strong); color: var(--token-text);
+  border: 1px solid var(--token-outline);
+  box-shadow: var(--token-shadow-overlay);
+  border-radius: var(--radius-lg);
+  animation: icen-popover-in 150ms var(--ease-out);
+}
+.popover[data-side='top'] { animation-name: icen-popover-in-top; }
+
+/* 进场动画与 .menu 同参数：fade + scale(.95→1) + 按侧位移 8px */
+@keyframes icen-popover-in {
+  from { opacity: 0; transform: scale(0.95) translateY(-8px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+@keyframes icen-popover-in-top {
+  from { opacity: 0; transform: scale(0.95) translateY(8px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+
+/* ── components/segmented.css ── */
+/*
+ * @icen.ai/ui — Component: segmented（分段控件 / 切换组 / 数字步进器 / OTP）
+ * 规格源自 opengal primitives/input.tsx 的 SegmentedControl 与 advanced-input.tsx
+ * 的 ToggleButtonGroup / NumberStepper / OtpInput。
+ * segmented 与 toggle-group 是纯 CSS 状态组件（.is-active）；stepper 由使用方接线；
+ * otp 单元格交互见 behaviors/input.ts 的 initInput。
+ */
+
+/* ── 分段控件（排他单选） ── */
+.segmented {
+  display: inline-flex; align-items: center; gap: 2px; padding: 2px;
+  background: var(--token-panel);
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--token-shadow-inset);
+}
+
+.segmented-item {
+  display: flex; align-items: center; gap: 6px;
+  padding: 6px 12px; font-size: 12px; font-weight: 500;
+  border: none; background: transparent; cursor: pointer;
+  border-radius: var(--radius-md);
+  color: var(--token-text-muted);
+}
+.segmented-item:hover:not(.is-active) {
+  color: var(--token-text); background: var(--token-surface-hover);
+}
+.segmented-item.is-active {
+  background: var(--token-accent); color: var(--token-on-accent, #fff);
+  box-shadow: var(--token-shadow-elevated);
+}
+.segmented-item:disabled { opacity: 0.4; cursor: not-allowed; }
+
+/* 尺寸：容器修饰符驱动 item 内边距 / 字号 */
+.segmented--sm .segmented-item { padding: 4px 10px; font-size: 11px; }
+
+/* ── 切换组（segmented 同族变体：更松的 padding、item 更小圆角、active 阴影更轻） ── */
+.toggle-group {
+  display: inline-flex; align-items: center; gap: 4px; padding: 4px;
+  background: var(--token-panel);
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-lg);
+}
+
+.toggle-item {
+  display: flex; align-items: center; gap: 6px;
+  padding: 6px 12px; font-size: 12px; font-weight: 500;
+  border: none; background: transparent; cursor: pointer;
+  border-radius: var(--radius-xs);
+  color: var(--token-text-muted);
+}
+.toggle-item:hover:not(.is-active) {
+  color: var(--token-text); background: var(--token-control-hover);
+}
+.toggle-item.is-active {
+  background: var(--token-accent); color: var(--token-on-accent, #fff);
+  box-shadow: var(--token-shadow-card);
+}
+.toggle-item:disabled { opacity: 0.4; cursor: not-allowed; }
+.toggle-group--sm .toggle-item { padding: 4px 10px; font-size: 11px; }
+
+/* ── 数字步进器 ── */
+.stepper {
+  display: inline-flex; align-items: stretch;
+  background: var(--token-control);
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.stepper-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 0 10px; border: none; background: transparent; cursor: pointer;
+  color: var(--token-text-muted);
+  transition: background-color var(--duration-normal) var(--ease-out),
+    color var(--duration-normal) var(--ease-out);
+}
+.stepper-btn:hover { background: var(--token-control-hover); color: var(--token-text); }
+.stepper-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.stepper-input {
+  width: 56px; padding: 8px 0;
+  text-align: center; font-variant-numeric: tabular-nums;
+  background: transparent; outline: none; border: none;
+  border-left: 1px solid var(--token-outline-soft);
+  border-right: 1px solid var(--token-outline-soft);
+  color: var(--token-text); font: inherit; font-size: 13px;
+}
+/* 隐藏原生 number 箭头（± 交给 .stepper-btn） */
+.stepper-input::-webkit-outer-spin-button,
+.stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+.stepper-input[type='number'] { -moz-appearance: textfield; appearance: textfield; }
+
+/* ── OTP 验证码单元格 ── */
+.otp { display: inline-flex; align-items: center; gap: 8px; }
+
+.otp-cell {
+  width: 40px; height: 48px; padding: 0;
+  text-align: center; font-size: 18px; font-weight: 600;
+  color: var(--token-text);
+  background: var(--token-control);
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-sm);
+  outline: none;
+  transition: border-color var(--duration-normal) var(--ease-out),
+    box-shadow var(--duration-normal) var(--ease-out);
+}
+.otp-cell:focus-visible {
+  border-color: var(--token-accent);
+  box-shadow: 0 0 0 2px var(--token-accent-subtle);
+}
+.otp-cell:disabled { opacity: 0.4; cursor: not-allowed; }
+
+
+/* ── components/select.css ── */
+/*
+ * @icen.ai/ui — Component: select（弹层选择器）
+ * 规格源自 opengal primitives/input.tsx 的 Select；与 behaviors/select.ts 配套。
+ *
+ * 契约：
+ *   <div class="select" data-select>
+ *     <button class="select-trigger pressable focus-ring" aria-haspopup="listbox" aria-expanded="false">
+ *       <span class="select-leading">…</span>        可选前缀
+ *       <span class="select-value is-empty">占位</span>
+ *       <svg class="select-chevron">…</svg>
+ *     </button>
+ *     <div class="select-panel" hidden>
+ *       <button class="select-option" data-value="x">…</button>
+ *     </div>
+ *     <input type="hidden" data-select-value />     可选，behavior 同步 value
+ *   </div>
+ * 状态：容器 .is-open；选项 .is-focused / .is-selected（尾部 ✓）/ .is-disabled；
+ *       .select-value.is-empty = 未选占位（faint 色，behavior 选中后移除）。
+ */
+
+.select { position: relative; width: 100%; }
+
+.select-trigger {
+  display: flex; align-items: center; gap: 8px; width: 100%;
+  height: 36px; padding: 0 12px; font-size: 13px; text-align: left;
+  background: var(--token-control); color: var(--token-text);
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--token-shadow-inset);
+  cursor: pointer;
+}
+.select-trigger:focus-visible { border-color: var(--token-accent); }
+.select-trigger:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.select-trigger--sm { height: 32px; padding: 0 10px; font-size: 12px; }
+.select-trigger--lg { height: 40px; padding: 0 14px; font-size: 14px; }
+
+.select-leading {
+  display: inline-flex; align-items: center; flex-shrink: 0;
+  color: var(--token-text-faint);
+}
+.select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.select-value.is-empty { color: var(--token-text-faint); }
+
+.select-chevron {
+  width: 14px; height: 14px; flex-shrink: 0;
+  color: var(--token-text-faint);
+  transition: transform var(--duration-fast) var(--ease-out);
+}
+.select.is-open .select-chevron { transform: rotate(180deg); }
+
+.select-panel {
+  position: absolute; top: calc(100% + 4px); left: 0;
+  min-width: 100%; max-height: 240px; overflow-y: auto; padding: 4px;
+  background: var(--token-card-strong);
+  border: 1px solid var(--token-outline);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--token-shadow-overlay);
+  z-index: var(--z-popover);
+  transform-origin: top center;
+  animation: select-panel-in var(--duration-fast) var(--ease-out);
+}
+@keyframes select-panel-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+.select-option {
+  display: flex; align-items: center; gap: 8px; width: 100%;
+  padding: 6px 10px; font-size: 12px; text-align: left;
+  border: none; background: transparent; color: var(--token-text);
+  border-radius: var(--radius-sm); cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease-out),
+    color var(--duration-fast) var(--ease-out);
+}
+.select-option.is-focused { background: var(--token-fill-2); }
+.select-option.is-selected { color: var(--token-accent); }
+.select-option.is-selected::after { content: '✓'; margin-left: auto; flex-shrink: 0; }
+.select-option.is-disabled { opacity: 0.4; cursor: not-allowed; }
+
+
+/* ── components/sidebar.css ── */
+/*
+ * @icen.ai/ui — Component: sidebar（侧栏导航，分组折叠配套 behaviors/sidebar）
+ * 用法：<aside class="sidebar sidebar--sticky">
+ *         <div class="sidebar-group is-open">
+ *           <button class="sidebar-group-title" aria-expanded="true">分组</button>
+ *           <div class="sidebar-group-panel"><div class="sidebar-group-panel-inner">
+ *             <a class="sidebar-item is-active" href="…">条目</a>
+ *           </div></div>
+ *         </div>
+ *       </aside>
+ * 契约：.is-open 由 behaviors/sidebar 切换（同步 aria-expanded）；
+ * 展开动画 = grid-template-rows 0fr↔1fr（同 accordion 约定），内层 overflow:hidden。
+ * 滚动条样式归 base.css 全局纪律，这里只声明 overflow-y。
+ */
+
+.sidebar { width: 260px; flex-shrink: 0; overflow-y: auto; padding-right: 4px; }
+.sidebar--sticky { position: sticky; top: 80px; max-height: calc(100vh - 100px); }
+
+.sidebar-group { margin-bottom: 8px; }
+.sidebar-group-title {
+  width: 100%; display: flex; align-items: center; justify-content: space-between;
+  padding: 8px 12px; border-radius: var(--radius-md);
+  font-family: inherit; font-size: 11px; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 1px;
+  color: var(--token-text-muted);
+  background: none; border: 0; cursor: pointer;
+}
+.sidebar-group-title:hover { background: var(--token-control-hover); color: var(--token-text); }
+/* chevron：闭合态 rotate(-90deg)，展开回正 */
+.sidebar-group-title::after {
+  content: '▾'; font-size: 12px; line-height: 1; color: var(--token-text-muted);
+  transform: rotate(-90deg);
+  transition: transform var(--duration-normal) var(--ease-out);
+}
+.sidebar-group.is-open .sidebar-group-title::after { transform: none; }
+
+.sidebar-group-panel {
+  display: grid; grid-template-rows: 0fr;
+  transition: grid-template-rows var(--duration-normal) var(--ease-out);
+}
+.sidebar-group.is-open .sidebar-group-panel { grid-template-rows: 1fr; }
+.sidebar-group-panel-inner { overflow: hidden; min-height: 0; }
+
+.sidebar-item {
+  width: 100%; display: flex; align-items: center; gap: 8px;
+  padding: 8px 12px; border-radius: var(--radius-lg);
+  font-size: 13px; color: var(--token-text); text-align: left;
+  text-decoration: none; background: none; border: 0; cursor: pointer;
+}
+.sidebar-item:hover { background: var(--token-control-hover); text-decoration: none; }
+.sidebar-item.is-active { background: var(--token-accent-subtle); color: var(--token-accent); font-weight: 500; }
+.sidebar-item > svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--token-text-muted); }
+.sidebar-item.is-active > svg { color: var(--token-accent); }
+.sidebar-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+
+/* ── components/slider.css ── */
+/*
+ * @icen.ai/ui — Component: slider（单值 / 双滑块）
+ * 规格源自 opengal primitives/input.tsx 的 Slider 与 advanced-input.tsx 的 DualRangeSlider；
+ * 与 behaviors/slider.ts 配套（透明原生 range 覆盖层驱动 fill/thumb 定位）。
+ *
+ * 契约（单值）：
+ *   <div class="slider">
+ *     <div class="slider-track"></div>
+ *     <div class="slider-fill" style="width:40%"></div>
+ *     <div class="slider-thumb" style="left:calc(40% - 8px)"></div>
+ *     <input class="slider-native" type="range" />
+ *   </div>
+ * 双滑块：.slider--dual 内 .slider-range（left/right 定位选中段）
+ *   + .slider-thumb--lo / .slider-thumb--hi + 两个 .slider-native[data-thumb=lo|hi]
+ * label 行：.slider-row（label + 当前值，tabular-nums）
+ */
+
+.slider { position: relative; height: 20px; width: 100%; }
+
+.slider-track {
+  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
+  height: 6px; border-radius: var(--radius-full);
+  background: color-mix(in srgb, var(--token-line-soft) 50%, transparent);
+}
+
+.slider-fill {
+  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
+  height: 6px; border-radius: var(--radius-full);
+  background: var(--token-accent);
+  transition: width var(--duration-normal) var(--ease-out);
+}
+
+/* 双滑块选中段：left = lo%、right = (100 - hi)% */
+.slider-range {
+  position: absolute; top: 50%; transform: translateY(-50%);
+  height: 6px; border-radius: var(--radius-full);
+  background: var(--token-accent);
+  transition: left var(--duration-normal) var(--ease-out),
+    right var(--duration-normal) var(--ease-out);
+}
+
+.slider-thumb {
+  position: absolute; top: 50%; transform: translateY(-50%);
+  width: 16px; height: 16px; border-radius: var(--radius-full);
+  background: var(--token-card);
+  border: 2px solid var(--token-accent);
+  box-shadow: var(--token-shadow-card);
+  pointer-events: none;
+  transition: transform var(--duration-fast) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out);
+}
+/* 原生 input 透明，焦点环镜像到可见 thumb 上 */
+.slider:focus-within .slider-thumb {
+  transform: translateY(-50%) scale(1.1);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--token-accent) 50%, transparent),
+    0 0 0 3px var(--token-bg);
+}
+
+.slider-native {
+  position: absolute; inset: 0; width: 100%; height: 100%;
+  margin: 0; opacity: 0; cursor: pointer; z-index: 1;
+}
+.slider-native:disabled { cursor: not-allowed; }
+
+.slider-row {
+  display: flex; align-items: center; justify-content: space-between;
+  font-size: 12px; color: var(--token-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+
 /* ── components/stat.css ── */
 /*
  * @icen.ai/ui — Component: stat（指标卡）
@@ -2108,6 +3688,168 @@ html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--token-te
 .stat-label { color: var(--token-text-faint); font-size: 11px; letter-spacing: 1px; margin-top: 2px; }
 
 
+/* ── components/steps.css ── */
+/*
+ * @icen.ai/ui — Component: steps（步骤条，横向默认 / .steps--vertical 垂直）
+ * 用法：<ol class="steps">
+ *         <li class="step step--finish">
+ *           <span class="step-line"></span>
+ *           <span class="step-dot">✓</span>
+ *           <div class="step-body">
+ *             <div class="step-title">已完成</div>
+ *             <div class="step-desc">描述</div>
+ *           </div>
+ *         </li>
+ *       </ol>
+ * 三态：.step--finish（accent 实底，内容放 ✓）/ .step--process（accent 描边）/ .step--wait（灰）。
+ * 连接线画在「当前步 → 下一步」之间，颜色跟随当前步状态；末步不显示（.step:last-child）。
+ * 垂直版同一 DOM：.step-line 改为绝对左侧竖线，穿过 16px 间隙接到下一颗圆点。
+ */
+
+.steps { display: flex; list-style: none; margin: 0; padding: 0; }
+.step { flex: 1; position: relative; text-align: center; }
+
+.step-line {
+  position: absolute; top: 16px; left: calc(50% + 20px);
+  width: calc(100% - 40px); height: 1px;
+  background: var(--token-outline-soft);
+}
+.step:last-child .step-line { display: none; }
+.step--finish .step-line { background: color-mix(in srgb, var(--token-accent) 40%, transparent); }
+
+.step-dot {
+  width: 32px; height: 32px; border-radius: var(--radius-full);
+  display: inline-flex; align-items: center; justify-content: center;
+  font-size: 12px; font-weight: 600; position: relative; z-index: 1;
+}
+.step--finish .step-dot { background: var(--token-accent); color: var(--token-on-accent); }
+.step--process .step-dot {
+  background: var(--token-accent-subtle); color: var(--token-accent);
+  border: 2px solid var(--token-accent);
+}
+.step--wait .step-dot {
+  background: var(--token-control); color: var(--token-text-faint);
+  border: 1px solid var(--token-outline-soft);
+}
+
+.step-title { font-size: 13px; font-weight: 500; margin-top: 6px; }
+.step--wait .step-title { color: var(--token-text-muted); }
+.step-desc {
+  font-size: 11px; color: var(--token-text-faint);
+  margin-top: 2px; max-width: 160px; margin-inline: auto;
+}
+
+/* ── 垂直变体 ── */
+.steps--vertical { flex-direction: column; gap: 16px; }
+.steps--vertical .step { flex: none; display: flex; gap: 12px; text-align: left; }
+.steps--vertical .step-line {
+  top: 36px; bottom: -16px; left: 16px;
+  width: 1px; height: auto;
+}
+.steps--vertical .step-dot { flex-shrink: 0; }
+.steps--vertical .step-body { padding-top: 4px; }
+.steps--vertical .step-title { margin-top: 0; }
+.steps--vertical .step-desc { max-width: none; margin-inline: 0; }
+
+
+/* ── components/switch.css ── */
+/*
+ * @icen.ai/ui — Component: switch（开关 / 勾选框 / 单选行）
+ * 纯 CSS 状态组件：状态全走 aria-checked / .is-selected，交互由使用方（或演示页脚本）切换。
+ *
+ * 开关：<button class="switch [--sm]" role="switch" aria-checked="true"><span class="switch-thumb"></span></button>
+ * 勾选：<button class="checkbox focus-ring" role="checkbox" aria-checked="true|false|mixed"></button>
+ * 单选：<div class="radio-group" role="radiogroup">
+ *         <button class="radio-item motion is-selected"><span class="radio-dot"></span>…</button>
+ *       </div>
+ */
+
+/* ── 开关 ── */
+.switch {
+  position: relative; display: inline-flex; flex-shrink: 0;
+  width: 44px; height: 24px; padding: 0;
+  border: none; border-radius: var(--radius-full);
+  background: var(--token-control-hover); cursor: pointer;
+  transition: background-color var(--duration-normal) var(--ease-out);
+}
+.switch[aria-checked='true'] { background: var(--token-accent); }
+.switch:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.switch-thumb {
+  position: absolute; top: 2px; left: 2px;
+  width: 20px; height: 20px; border-radius: var(--radius-full);
+  background: var(--token-on-accent, #fff);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  transition: transform var(--duration-normal) var(--ease-out);
+}
+.switch[aria-checked='true'] .switch-thumb { transform: translateX(20px); }
+
+.switch--sm { width: 36px; height: 20px; }
+.switch--sm .switch-thumb { width: 16px; height: 16px; }
+.switch--sm[aria-checked='true'] .switch-thumb { transform: translateX(16px); }
+
+/* ── 勾选框（✓ 与半选横条均 ::before 自绘，无需内联 svg） ── */
+.checkbox {
+  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
+  width: 16px; height: 16px; padding: 0;
+  background: var(--token-control); color: transparent;
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-sm); cursor: pointer;
+  transition: background-color var(--duration-normal) var(--ease-out),
+    border-color var(--duration-normal) var(--ease-out),
+    color var(--duration-normal) var(--ease-out);
+}
+.checkbox:hover:not([aria-checked='true']):not([aria-checked='mixed']) {
+  border-color: color-mix(in srgb, var(--token-accent) 50%, transparent);
+}
+.checkbox[aria-checked='true'], .checkbox[aria-checked='mixed'] {
+  background: var(--token-accent);
+  border-color: var(--token-accent);
+  color: var(--token-on-accent, #fff);
+}
+.checkbox::before {
+  content: ''; width: 10px; height: 10px;
+  background: currentColor; opacity: 0;
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+}
+.checkbox[aria-checked='true']::before { opacity: 1; }
+.checkbox[aria-checked='mixed']::before {
+  opacity: 1; width: 8px; height: 2px;
+  clip-path: none; border-radius: var(--radius-full);
+}
+.checkbox:disabled { opacity: 0.4; cursor: not-allowed; }
+
+/* ── 单选行 ── */
+.radio-group { display: flex; flex-direction: column; gap: 4px; }
+
+.radio-item {
+  display: flex; align-items: center; gap: 8px; width: 100%;
+  padding: 8px 12px; font-size: 13px; text-align: left;
+  border: none; background: transparent; color: var(--token-text);
+  border-radius: var(--radius-sm); cursor: pointer;
+}
+.radio-item.is-selected {
+  background: var(--token-accent-subtle); color: var(--token-accent); font-weight: 500;
+}
+.radio-item:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.radio-dot {
+  position: relative; width: 16px; height: 16px; flex-shrink: 0;
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-full);
+  transition: border-color var(--duration-normal) var(--ease-out);
+}
+.radio-item.is-selected .radio-dot { border-color: var(--token-accent); }
+.radio-dot::after {
+  content: ''; position: absolute; top: 50%; left: 50%;
+  width: 8px; height: 8px; border-radius: var(--radius-full);
+  background: var(--token-accent);
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform var(--duration-fast) var(--ease-out);
+}
+.radio-item.is-selected .radio-dot::after { transform: translate(-50%, -50%) scale(1); }
+
+
 /* ── components/table.css ── */
 /*
  * @icen.ai/ui — Component: table（数据表）
@@ -2159,6 +3901,57 @@ html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--token-te
 .admin-tabs a.active { color: var(--token-accent); border-bottom-color: var(--token-accent); }
 
 
+/* ── components/tag-input.css ── */
+/*
+ * @icen.ai/ui — Component: tag-input（多值标签编辑）
+ * 规格源自 opengal primitives/advanced-input.tsx 的 TagInput；与 behaviors/tag-input.ts 配套。
+ *
+ * 契约：
+ *   <div class="tag-input control" data-tags="初始,标签" data-max="5">
+ *     <input class="tag-input-field" placeholder="…" />
+ *   </div>
+ * behavior 按 data-tags 渲染 .tag-chip（含 .tag-chip-x 删除钮），并回写 data-tags；
+ * 达到 data-max 时容器加 .is-max（warning 色边框）并拒加。
+ */
+
+.tag-input {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
+  padding: 6px; min-height: 36px;
+  background: var(--token-control);
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-lg);
+}
+.tag-input:focus-within { border-color: var(--token-accent); }
+.tag-input.is-max, .tag-input.is-max:focus-within {
+  border-color: color-mix(in srgb, var(--token-warning) 60%, transparent);
+}
+.tag-input.is-disabled { opacity: 0.4; }
+.tag-input.is-disabled .tag-input-field { cursor: not-allowed; }
+
+.tag-chip {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 2px 4px 2px 8px;
+  border-radius: var(--radius-full);
+  background: var(--token-accent-subtle); color: var(--token-accent);
+  font-size: 11px; font-weight: 500;
+}
+
+.tag-chip-x {
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 2px; border: none; background: transparent; cursor: pointer;
+  border-radius: var(--radius-full); color: inherit; font-size: 11px; line-height: 1;
+  transition: background-color var(--duration-normal) var(--ease-out);
+}
+.tag-chip-x:hover { background: var(--token-fill-2); }
+
+.tag-input-field {
+  flex: 1; min-width: 80px; padding: 4px;
+  background: transparent; border: none; outline: none;
+  color: var(--token-text); font: inherit; font-size: 12px;
+}
+.tag-input-field::placeholder { color: color-mix(in srgb, var(--token-text-faint) 60%, transparent); }
+
+
 /* ── components/toast.css ── */
 /*
  * @icen.ai/ui — Component: toast（轻提示，与 behaviors/toast 配套）
@@ -2166,7 +3959,7 @@ html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--token-te
  */
 
 .toast-container {
-  position: fixed; right: 20px; bottom: 20px; z-index: 9999;
+  position: fixed; right: 20px; bottom: 20px; z-index: var(--z-toast);
   display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
   pointer-events: none;
 }
@@ -2188,3 +3981,108 @@ html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--token-te
   to { opacity: 1; transform: translateY(0); }
 }
 
+
+/* ── components/tooltip.css ── */
+/*
+ * @icen.ai/ui — Component: tooltip（纯 CSS 气泡提示，无 JS）
+ * 契约：任意元素加 data-tooltip="文案"；默认在上方，
+ * data-tooltip-side="top|bottom|left|right" 换方向。
+ * hover 延迟 400ms 出现，focus-visible 立即出现。
+ */
+
+[data-tooltip] { position: relative; }
+
+[data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute; z-index: var(--z-tooltip);
+  width: max-content; max-width: min(260px, calc(100vw - 32px));
+  padding: 4px 8px;
+  font-size: 11px; font-weight: 400; line-height: 1.375; white-space: normal; text-align: left;
+  background: var(--token-card-strong); color: var(--token-text);
+  border: 1px solid var(--token-outline-soft);
+  box-shadow: var(--token-shadow-overlay);
+  border-radius: var(--radius-md);
+  opacity: 0; pointer-events: none;
+  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
+  transition-delay: 400ms;
+
+  /* 默认：上方 */
+  bottom: calc(100% + 4px); left: 50%;
+  transform: translate(-50%, 4px);
+}
+
+[data-tooltip-side='bottom']::after {
+  bottom: auto; top: calc(100% + 4px); left: 50%;
+  transform: translate(-50%, -4px);
+}
+[data-tooltip-side='left']::after {
+  bottom: auto; top: 50%; left: auto; right: calc(100% + 4px);
+  transform: translate(4px, -50%);
+}
+[data-tooltip-side='right']::after {
+  bottom: auto; top: 50%; right: auto; left: calc(100% + 4px);
+  transform: translate(-4px, -50%);
+}
+
+[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after {
+  opacity: 1; transform: translate(-50%, 0);
+}
+[data-tooltip-side='bottom']:hover::after, [data-tooltip-side='bottom']:focus-visible::after {
+  opacity: 1; transform: translate(-50%, 0);
+}
+[data-tooltip-side='left']:hover::after, [data-tooltip-side='left']:focus-visible::after {
+  opacity: 1; transform: translate(0, -50%);
+}
+[data-tooltip-side='right']:hover::after, [data-tooltip-side='right']:focus-visible::after {
+  opacity: 1; transform: translate(0, -50%);
+}
+
+/* 键盘聚焦立即出现（覆盖 400ms 延迟） */
+[data-tooltip]:focus-visible::after { transition-delay: 0ms; }
+
+
+/* ── components/upload.css ── */
+/*
+ * @icen.ai/ui — Component: upload（拖放上传区）
+ * 规格源自 opengal primitives/advanced-input.tsx 的 Upload；与 behaviors/upload.ts 配套。
+ *
+ * 契约：
+ *   <div class="upload control lift focus-ring" role="button" tabindex="0">
+ *     <input type="file" multiple />
+ *     <div class="upload-icon"><svg …></svg></div>
+ *     <p class="upload-title">…</p>
+ *     <p class="upload-desc">…</p>
+ *     <p class="upload-error" hidden>…</p>
+ *   </div>
+ * 拖入时 behavior 加 .is-drag。
+ */
+
+.upload {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  text-align: center; padding: 32px 16px;
+  border: 2px dashed var(--token-outline-soft);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+}
+.upload:hover {
+  border-color: color-mix(in srgb, var(--token-accent) 60%, transparent);
+  background: var(--token-control-hover);
+}
+.upload.is-drag {
+  border-color: var(--token-accent);
+  background: var(--token-accent-subtle);
+}
+
+.upload input[type='file'] { display: none; }
+
+.upload-icon {
+  display: flex; align-items: center; justify-content: center;
+  width: 40px; height: 40px; margin-bottom: 8px;
+  border-radius: var(--radius-lg);
+  background: var(--token-accent-subtle); color: var(--token-accent);
+}
+
+.upload-title { margin: 0; font-size: 13px; font-weight: 500; color: var(--token-text); }
+.upload-desc { margin: 2px 0 0; font-size: 11px; color: var(--token-text-faint); }
+.upload-error { margin: 4px 0 0; font-size: 11px; color: var(--token-error); }
+