@icen.ai/ui 0.1.1 → 0.2.0

package/dist/components/feedback.css

@@ -0,0 +1,106 @@
+/*
+ * @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; }
+}

package/dist/components/input.css

@@ -0,0 +1,82 @@
+/*
+ * @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); }

package/dist/components/layout.css

@@ -0,0 +1,109 @@
+/*
+ * @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;
+}

package/dist/components/media.css

@@ -0,0 +1,133 @@
+/*
+ * @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); }

package/dist/components/menu.css

@@ -0,0 +1,85 @@
+/*
+ * @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); }
+}

package/dist/components/modal.css

@@ -0,0 +1,107 @@
+/*
+ * @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); }
+}

package/dist/components/nav.css

@@ -0,0 +1,59 @@
+/*
+ * @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); }