@icen.ai/ui 0.4.0 → 0.8.0

package/dist/components/form.css

@@ -114,7 +114,126 @@
 }
 .form-field[data-invalid='true'] .form-label { color: var(--token-error); }
 
-/* ── 页面级横幅：操作结果 / 引导提示 ── */
+/* ── 表单增强 ── */
+
+/* 水平布局（label 与控件同行） */
+.form-field--horizontal {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--density-space-md);
+}
+.form-field--horizontal .form-label {
+  flex-shrink: 0;
+  width: 120px;
+  text-align: right;
+  padding-top: calc((var(--density-input-height-md) - 1lh) / 2);
+}
+.form-field--horizontal .form-field-control {
+  flex: 1;
+  min-width: 0;
+}
+
+/* label 带帮助提示图标 */
+.form-label-help {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 4px;
+  width: 14px;
+  height: 14px;
+  color: var(--token-text-faint);
+  cursor: help;
+}
+.form-label-help svg { width: 12px; height: 12px; }
+
+/* label 带可选标记 */
+.form-label-optional {
+  font-size: var(--density-font-size-2xs);
+  font-weight: 400;
+  color: var(--token-text-faint);
+  margin-left: 4px;
+}
+
+/* 表单区块标题 */
+.form-section {
+  padding: var(--density-space-sm) 0;
+}
+.form-section-title {
+  font-size: var(--density-font-size-md);
+  font-weight: 600;
+  color: var(--token-text);
+  margin: 0 0 var(--density-space-sm);
+  padding-bottom: var(--density-space-xs);
+  border-bottom: 1px solid var(--token-outline-soft);
+}
+.form-section-desc {
+  font-size: var(--density-font-size-sm);
+  color: var(--token-text-muted);
+  margin: calc(-1 * var(--density-space-xs)) 0 var(--density-space-sm);
+}
+
+/* 表单操作区（底部按钮行） */
+.form-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-sm);
+  padding-top: var(--density-space-sm);
+  border-top: 1px solid var(--token-outline-soft);
+}
+.form-actions--right { justify-content: flex-end; }
+.form-actions--center { justify-content: center; }
+.form-actions--split { justify-content: space-between; }
+
+/* 行内表单（紧凑，单行多字段） */
+.form--inline {
+  flex-direction: row;
+  align-items: flex-end;
+  gap: var(--density-space-sm);
+  flex-wrap: wrap;
+}
+.form--inline .form-field {
+  flex: 1;
+  min-width: 160px;
+}
+
+/* 字段网格（多列布局） */
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--form-cols, 2), 1fr);
+  gap: var(--density-space-md);
+}
+.form-grid .form-field--full { grid-column: 1 / -1; }
+
+/* 字段成功态 */
+.form-field[data-valid='true'] .form-label::after {
+  content: '✓';
+  margin-left: 4px;
+  color: var(--token-success);
+  font-weight: 700;
+}
+
+/* 表单加载遮罩 */
+.form-loading {
+  position: relative;
+  pointer-events: none;
+  opacity: 0.6;
+}
+.form-loading::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 24px;
+  height: 24px;
+  margin: -12px 0 0 -12px;
+  border: 2px solid color-mix(in srgb, var(--token-accent) 30%, transparent);
+  border-top-color: var(--token-accent);
+  border-radius: 50%;
+  animation: icen-spin var(--form-loading-duration, 0.8s) linear infinite;
+}
+
+/* ── 页面级横幅：操作结果 / 引导提示 ──
+   与 feedback.css 的 alert 共享同一套视觉 token（--banner-* 仅在底色/文字/描边上分流） */
 .banner-ok,
 .banner-err {
   display: flex;
@@ -126,23 +245,22 @@
   font-size: var(--density-font-size-sm);
   line-height: 1.5;
   border: 1px solid transparent;
+  background: var(--banner-bg);
+  color: var(--banner-fg);
+  border-color: var(--banner-border);
 }
 .banner-ok {
-  background: var(--token-success-muted);
-  color: var(--token-success);
-  border-color: color-mix(in srgb, var(--token-success) 25%, transparent);
+  --banner-bg: var(--token-success-muted);
+  --banner-fg: var(--token-success);
+  --banner-border: color-mix(in srgb, var(--token-success) 25%, transparent);
 }
 .banner-err {
-  background: var(--token-error-muted);
-  color: var(--token-error);
-  border-color: color-mix(in srgb, var(--token-error) 25%, transparent);
+  --banner-bg: var(--token-error-muted);
+  --banner-fg: var(--token-error);
+  --banner-border: color-mix(in srgb, var(--token-error) 25%, transparent);
 }
 /* block 模式：横向占满，带图标位 */
 .banner-block {
   align-items: center;
   padding: var(--density-space-md);
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .banner-ok, .banner-err { transition: none; }
-}

package/dist/components/form.mjs

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

package/dist/components/input.css

@@ -19,6 +19,7 @@
 
 /* ── 单行 ── */
 .input-wrap {
+  position: relative;
   display: flex;
   align-items: center;
   gap: var(--density-space-xs);
@@ -140,6 +141,7 @@
 
 /* ── 多行：同一 wrapper 视觉，内部 textarea 裸奔 ── */
 .textarea-wrap {
+  position: relative;
   display: flex;
   width: 100%;
   background: var(--token-control);
@@ -188,7 +190,18 @@
   color: color-mix(in srgb, var(--token-text-faint) 60%, transparent);
 }
 
-/* 字符计数（behavior 可挂到 .textarea-wrap 内尾部） */
+/* 字符计数（behavior 可挂到 .input-wrap 或 .textarea-wrap 内尾部） */
+.input-wrap--has-counter { padding-right: calc(var(--density-space-sm) + 48px); }
+.input-wrap--has-counter .input-counter {
+  position: absolute;
+  right: var(--density-space-sm);
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-faint);
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+}
 .input-counter {
   position: absolute;
   right: var(--density-space-sm);
@@ -197,6 +210,16 @@
   color: var(--token-text-faint);
   font-variant-numeric: tabular-nums;
   pointer-events: none;
+  transition: color var(--icen-tx-fast);
 }
-.textarea-wrap { position: relative; }
+.input-counter.is-warn { color: var(--token-warning); }
+.input-counter.is-error { color: var(--token-error); font-weight: 600; }
+
 .textarea-wrap .textarea { padding-bottom: 24px; }
+
+/* 有计数器时的 textarea 底部留空 */
+.textarea-wrap .input-counter {
+  position: absolute;
+  right: var(--density-space-sm);
+  bottom: var(--density-space-xs);
+}

package/dist/components/layout.css

@@ -1,23 +1,23 @@
 /*
  * @icen.ai/ui — Component: layout（布局原语，全部是工具类，无 JS）
  * stack / divider / surface / text / grid / center / container / aspect / visually-hidden
- * 全部消费 --token-*；档位类名与 opengal primitives/layout(-containers) 一一对应。
+ * 全部消费 --token-* 与 --density-*；档位类名与 opengal primitives/layout(-containers) 一一对应。
  */
 
-/* ── Stack：flex 堆叠（默认列向，gap 8px） ── */
-.stack { display: flex; flex-direction: column; gap: 8px; }
+/* ── Stack：flex 堆叠（默认列向，gap = density-space-sm） ── */
+.stack { display: flex; flex-direction: column; gap: var(--density-space-sm); }
 .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--gap-1 { gap: var(--density-space-xs); }
+.stack--gap-2 { gap: var(--density-space-sm); }
+.stack--gap-3 { gap: var(--density-space-md); }
+.stack--gap-4 { gap: var(--density-space-lg); }
+.stack--gap-6 { gap: var(--density-space-xl); }
+.stack--gap-8 { gap: var(--density-space-2xl); }
+.stack--gap-12 { gap: var(--density-space-3xl); }
+.stack--gap-16 { gap: var(--density-space-4xl); }
 .stack--items-start { align-items: flex-start; }
 .stack--items-center { align-items: center; }
 .stack--items-end { align-items: flex-end; }
@@ -34,13 +34,13 @@
 .divider { background: var(--token-outline-soft); height: 1px; width: 100%; }
 .divider--vertical { width: 1px; height: 100%; align-self: stretch; }
 
-/* ── Surface：卡片容器（默认 inset 阴影 + 16px padding） ── */
+/* ── Surface：卡片容器（默认 inset 阴影 + density-space-lg 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;
+  padding: var(--density-space-lg);
 }
 .surface--elevated { box-shadow: var(--token-shadow-card); }
 .surface--overlay {
@@ -49,18 +49,18 @@
   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; }
+.surface--p-sm { padding: var(--density-space-md); }
+.surface--p-md { padding: var(--density-space-lg); }
+.surface--p-lg { padding: calc(var(--density-space-lg) + var(--density-space-xs)); }
 
 /* ── 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--xs { font-size: var(--density-font-size-xs); }
+.text--sm { font-size: var(--density-font-size-sm); }
+.text--base { font-size: var(--density-font-size-md); }
+.text--md { font-size: var(--density-font-size-lg); }
+.text--lg { font-size: var(--density-font-size-lg); }
+.text--xl { font-size: var(--density-font-size-xl); }
+.text--2xl { font-size: var(--density-font-size-2xl); }
 .text--muted { color: var(--token-text-muted); }
 .text--faint { color: var(--token-text-faint); }
 .text--accent { color: var(--token-accent); }
@@ -69,8 +69,8 @@
 .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：栅格（默认 gap = density-space-md） ── */
+.grid { display: grid; gap: var(--density-space-md); }
 .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)); }
@@ -78,28 +78,28 @@
 .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; }
+.grid--gap-4 { gap: var(--density-space-xs); }
+.grid--gap-8 { gap: var(--density-space-sm); }
+.grid--gap-12 { gap: var(--density-space-md); }
+.grid--gap-16 { gap: var(--density-space-lg); }
+.grid--gap-24 { gap: var(--density-space-xl); }
 
 /* ── 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 { width: 100%; margin-inline: auto; padding-inline: var(--density-space-lg); 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：固定比例盒（aspect-ratio，内容 absolute inset:0 铺满） ── */
+.aspect { position: relative; width: 100%; overflow: hidden; aspect-ratio: 16 / 9; }
+.aspect--square { aspect-ratio: 1 / 1; }
+.aspect--4-3 { aspect-ratio: 4 / 3; }
+.aspect--2-3 { aspect-ratio: 2 / 3; }
 .aspect > * { position: absolute; inset: 0; }
 
 /* ── VisuallyHidden：屏幕阅读器专用文本（sr-only 等价） ── */

package/dist/components/media.css

@@ -4,6 +4,10 @@
  * 包含：avatar（头像）/ media-card（封面卡，滑出 overlay）/ rating（星级评分）/ carousel（轮播，与 behaviors/carousel 配套）
  * 规格源自 opengal data/display.tsx 的 Avatar、data/cartridge-card.tsx 的 hover overlay、
  * data/exhibit.tsx 的 Carousel 与 Rating。
+ *
+ * 例外声明（deliberate exception）：carousel-thumbs 隐藏滚动条是有意设计
+ * （缩略图条视觉纯净，滚动仍可用）。违反「组件不写滚动条样式」纪律仅此处，
+ * 先例参照 scroll-area.css 的尺寸变体。
  */
 
 /* ══════════════ avatar · 头像 ══════════════ */
@@ -23,8 +27,8 @@
   flex-shrink: 0;
   user-select: none;
 }
-.avatar--xs { width: 20px; height: 20px; font-size: 9px; }
-.avatar--sm { width: 28px; height: 28px; font-size: 10px; }
+.avatar--xs { width: 20px; height: 20px; font-size: var(--density-font-size-2xs); }
+.avatar--sm { width: 28px; height: 28px; font-size: var(--density-font-size-2xs); }
 .avatar--lg { width: 48px; height: 48px; font-size: var(--density-font-size-md); }
 .avatar--xl { width: 80px; height: 80px; font-size: var(--density-font-size-lg); }
 .avatar img {
@@ -59,6 +63,42 @@
 .avatar-status--busy   { background: var(--token-error); }
 .avatar-status--away   { background: var(--token-warning); }
 
+/* 头像色彩变体（文字头像底色） */
+.avatar--info    { background: color-mix(in srgb, var(--token-info) 15%, transparent); color: var(--token-info); }
+.avatar--success { background: color-mix(in srgb, var(--token-success) 15%, transparent); color: var(--token-success); }
+.avatar--warning { background: color-mix(in srgb, var(--token-warning) 15%, transparent); color: var(--token-warning); }
+.avatar--error   { background: color-mix(in srgb, var(--token-error) 15%, transparent); color: var(--token-error); }
+
+/* 渐变底头像 */
+.avatar--gradient {
+  background: linear-gradient(135deg, var(--token-accent), var(--token-accent-deep, var(--token-accent)));
+  color: var(--token-on-accent);
+}
+
+/* 方形头像 */
+.avatar--square { border-radius: var(--radius-md); }
+
+/* 头像通知环（红圈外框） */
+.avatar--ring {
+  box-shadow: 0 0 0 2px var(--token-bg), 0 0 0 4px var(--token-error);
+}
+
+/* 头像组溢出计数 */
+.avatar-group-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  font-size: var(--density-font-size-2xs);
+  font-weight: 600;
+  color: var(--token-text-muted);
+  background: var(--token-fill-2);
+  border: 2px solid var(--token-bg);
+  border-radius: var(--radius-full);
+  margin-left: -8px;
+}
+
 /* ══════════════ media-card · 封面卡 ══════════════ */
 .media-card {
   position: relative;
@@ -72,7 +112,7 @@
 .media-card:hover {
   transform: translateY(-6px);
   box-shadow:
-    0 8px 32px color-mix(in srgb, var(--token-text) 18%, transparent),
+    var(--token-shadow-overlay),
     0 0 20px var(--token-accent-glow);
 }
 .media-card-cover {
@@ -100,7 +140,7 @@
 }
 .media-card:hover .media-card-overlay {
   transform: translateY(0);
-  transition-delay: 80ms;
+  transition-delay: var(--media-overlay-delay, 80ms);
 }
 .media-card-overlay-title {
   font-size: var(--density-font-size-md);
@@ -164,6 +204,53 @@
   font-variant-numeric: tabular-nums;
 }
 
+/* 只读模式（不可交互） */
+.rating--readonly .rating-star {
+  cursor: default;
+}
+.rating--readonly .rating-star:hover {
+  transform: none;
+}
+
+/* 清除评分钮 */
+.rating-clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-left: 4px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--token-text-faint);
+  cursor: pointer;
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
+}
+.rating-clear:hover {
+  color: var(--token-text);
+  background: var(--token-fill-1);
+}
+.rating-clear svg { width: 12px; height: 12px; }
+
+/* 评分数（评价人数） */
+.rating-count {
+  margin-left: var(--density-space-xs);
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-faint);
+  font-variant-numeric: tabular-nums;
+}
+
+/* 评分 + 文字摘要（如「4.5 · 128 条评价」） */
+.rating-summary {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+  font-size: var(--density-font-size-sm);
+  color: var(--token-text-muted);
+}
+
 /* ══════════════ carousel · 轮播（behaviors/carousel 配套） ══════════════
  * DOM 契约：
  *   <div class="carousel" data-carousel>
@@ -258,7 +345,7 @@
   outline: none;
   box-shadow: var(--icen-ring);
 }
-.carousel-dot.active,
+.carousel-dot.is-active,
 .carousel-dot[aria-current='true'] {
   width: 20px;
   background: var(--token-accent);
@@ -274,7 +361,67 @@
   transition: width var(--icen-tx-slow);
 }
 
+/* 缩略图导航条（deliberate exception：隐藏滚动条是设计意图，见文件头注释） */
+.carousel-thumbs {
+  display: flex;
+  gap: var(--density-space-xs);
+  margin-top: var(--density-space-sm);
+  padding: var(--density-space-xs);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.carousel-thumbs::-webkit-scrollbar { display: none; }
+.carousel-thumb {
+  flex-shrink: 0;
+  width: 56px;
+  height: 40px;
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  border: 2px solid transparent;
+  cursor: pointer;
+  opacity: 0.6;
+  transition: opacity var(--icen-tx-fast), border-color var(--icen-tx-fast);
+}
+.carousel-thumb:hover { opacity: 1; }
+.carousel-thumb.is-active,
+.carousel-thumb[aria-current='true'] {
+  opacity: 1;
+  border-color: var(--token-accent);
+}
+.carousel-thumb img,
+.carousel-thumb video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* 轮播索引指示器（1 / 5） */
+.carousel-index {
+  position: absolute;
+  top: var(--density-space-sm);
+  right: var(--density-space-sm);
+  padding: 2px var(--density-space-sm);
+  font-size: var(--density-font-size-xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--token-bg);
+  background: color-mix(in srgb, var(--token-text) 60%, transparent);
+  border-radius: var(--radius-full);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  z-index: 2;
+}
+
+/* 渐入动画 */
+.carousel-slide {
+  animation: carousel-slide-fade var(--icen-tx-normal) var(--ease-out);
+}
+@keyframes carousel-slide-fade {
+  from { opacity: 0.6; }
+  to { opacity: 1; }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .carousel-track { transition: none; }
-  .media-card, .rating-star, .carousel-arrow { transition: none; }
+  .carousel-slide { animation: none; }
+  .media-card, .rating-star, .carousel-arrow, .carousel-thumb { transition: none; }
 }

package/dist/components/menu.css

@@ -41,7 +41,7 @@
   border: 1px solid var(--token-outline);
   box-shadow: var(--token-shadow-overlay);
   border-radius: var(--radius-lg);
-  animation: icen-menu-in var(--icen-tx-fast);
+  animation: icen-menu-in var(--menu-in-duration, var(--icen-tx-fast));
 }
 .menu[data-side='top'] { animation-name: icen-menu-in-top; }
 .menu[data-side='left'] { animation-name: icen-menu-in-left; }
@@ -52,7 +52,7 @@
   min-width: 218px;
   max-width: 286px;
   z-index: var(--z-tooltip); /* 上下文菜单高于普通 popover，与 tooltip 平齐 */
-  animation-duration: 100ms;
+  --menu-in-duration: 100ms;
 }
 
 /* ── 分组标签 / 头（context-menu 的 header 项） ── */

package/dist/components/modal.css

@@ -102,7 +102,7 @@
   border: 0;
   cursor: pointer;
   color: var(--token-text-faint);
-  font-size: 16px;
+  font-size: var(--density-font-size-lg);
   line-height: 1;
   border-radius: var(--radius-sm);
   transition: