@icen.ai/ui 0.9.0 → 0.11.0

package/dist/components/split-pane.css

@@ -1,111 +1,123 @@
-/*
- * @icen.ai/ui — Component: split-pane（分栏拖拽容器，与 behaviors/split-pane 配套）
- *
- * 契约：
- *   <div class="split-pane [--vertical]" data-split-pane style="--split: 50%">
- *     <div class="split-pane-first">左侧（或上侧）内容</div>
- *     <div class="split-pane-divider" role="separator" aria-orientation="vertical" aria-valuenow="50"></div>
- *     <div class="split-pane-second">右侧（或下侧）内容</div>
- *   </div>
- *
- * behavior 接管 .split-pane-divider 的 pointer 拖拽，按比例更新 --split 变量
- * （范围 10% – 90%）；双击分隔条复位到 50%。
- *
- * 常用于：编辑器左右分栏 / 后台主从布局 / 邮件列表+详情。
- */
-
-.split-pane {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  height: 100%;
-  min-height: 200px;
-  overflow: hidden;
-  background: var(--token-surface);
-  border: 1px solid var(--token-line-soft);
-  border-radius: var(--radius-md);
-}
-
-.split-pane-first {
-  flex: 0 0 var(--split, 50%);
-  min-width: 0;
-  overflow: auto;
-  overscroll-behavior: contain;
-}
-.split-pane-second {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: auto;
-  overscroll-behavior: contain;
-}
-
-/* ── 分隔条（默认纵向 col-resize） ── */
-.split-pane-divider {
-  flex: 0 0 6px;
-  position: relative;
-  background: var(--token-line-soft);
-  cursor: col-resize;
-  user-select: none;
-  touch-action: none;
-  transition: background var(--icen-tx-fast);
-}
-.split-pane-divider::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 2px;
-  height: 28px;
-  border-radius: 1px;
-  background: var(--token-text-faint);
-  opacity: 0.35;
-  transform: translate(-50%, -50%);
-  transition: opacity var(--icen-tx-fast), background-color var(--icen-tx-fast);
-}
-.split-pane-divider:hover::after,
-.split-pane-divider.is-dragging::after {
-  opacity: 1;
-  background: var(--token-accent);
-}
-.split-pane-divider:hover,
-.split-pane-divider.is-dragging {
-  background: color-mix(in srgb, var(--token-accent) 14%, var(--token-line-soft));
-}
-.split-pane-divider:focus-visible {
-  outline: none;
-  background: color-mix(in srgb, var(--token-accent) 18%, var(--token-line-soft));
-}
-
-/* ── 纵向布局（上下分栏） ── */
-.split-pane--vertical {
-  flex-direction: column;
-}
-.split-pane--vertical .split-pane-first {
-  flex: 0 0 var(--split, 50%);
-  min-height: 0;
-}
-.split-pane--vertical .split-pane-second {
-  flex-basis: auto;
-  min-height: 0;
-}
-.split-pane--vertical .split-pane-divider {
-  cursor: row-resize;
-  flex-basis: 6px;
-  height: 6px;
-  width: auto;
-}
-.split-pane--vertical .split-pane-divider::after {
-  width: 28px;
-  height: 2px;
-}
-
-/* ── 嵌套分栏不应再有外边框 ── */
-.split-pane .split-pane {
-  border: 0;
-  border-radius: 0;
+@layer icen.components {
+/*
+ * @icen.ai/ui — Component: split-pane（分栏拖拽容器，与 behaviors/split-pane 配套）
+ *
+ * 契约：
+ *   <div class="icen-split-pane [--vertical]" data-icen-split-pane style="--split: 50%">
+ *     <div class="icen-split-pane-first">首个面板（LTR 左 / RTL 镜像右；或上侧）内容</div>
+ *     <div class="icen-split-pane-divider" role="separator" aria-orientation="vertical" aria-valuenow="50"></div>
+ *     <div class="icen-split-pane-second">次个面板（LTR 右 / RTL 镜像左；或下侧）内容</div>
+ *   </div>
+ *
+ * behavior 接管 .icen-split-pane-divider 的 pointer 拖拽，按比例更新 --split 变量
+ * （范围 10% – 90%）；双击分隔条复位到 50%。
+ *
+ * 常用于：编辑器左右分栏 / 后台主从布局 / 邮件列表+详情。
+ */
+
+.icen-split-pane {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  overflow: hidden;
+  background: var(--icen-token-surface);
+  border: 1px solid var(--icen-token-separator-soft);
+  border-radius: var(--icen-control-radius-lg);
+}
+
+.icen-split-pane-first {
+  flex: 0 0 var(--split, 50%);
+  min-width: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+.icen-split-pane-second {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+/* ── 分隔条（默认纵向 col-resize） ── */
+.icen-split-pane-divider {
+  flex: 0 0 6px;
+  position: relative;
+  background: var(--icen-token-separator-soft);
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+  transition: background var(--icen-tx-fast);
+}
+.icen-split-pane-divider::before {
+  /* 不可见命中扩展（±9px → 24px 触达带宽）：分隔条视觉 6px，触屏按 WCAG 2.5.8 打不中 */
+  content: '';
+  position: absolute;
+  inset: -9px 0;
+}
+.icen-split-pane-divider::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%; /* guard:allow-physical 分隔条圆点居中（translate(-50%,-50%) 配套） */
+  width: 2px;
+  height: 28px;
+  border-radius: 1px;
 /* guard:allow-radius 微构件（bar/dot/track/指示器等图形级，不属容器圆角面） */
+  background: var(--icen-token-text-faint);
+  opacity: 0.35;
+  transform: translate(-50%, -50%);
+  transition: opacity var(--icen-tx-fast), background-color var(--icen-tx-fast);
+}
+.icen-split-pane-divider:hover::after,
+.icen-split-pane-divider.is-dragging::after {
+  opacity: 1;
+  background: var(--icen-token-accent);
+}
+.icen-split-pane-divider:hover,
+.icen-split-pane-divider.is-dragging {
+  background: color-mix(in srgb, var(--icen-token-accent) 14%, var(--icen-token-separator-soft));
+}
+.icen-split-pane-divider:focus-visible {
+  outline: none;
+  background: color-mix(in srgb, var(--icen-token-accent) 18%, var(--icen-token-separator-soft));
+}
+
+/* ── 纵向布局（上下分栏） ── */
+.icen-split-pane--vertical {
+  flex-direction: column;
+}
+.icen-split-pane--vertical .icen-split-pane-first {
+  flex: 0 0 var(--split, 50%);
+  min-height: 0;
+}
+.icen-split-pane--vertical .icen-split-pane-second {
+  flex-basis: auto;
+  min-height: 0;
+}
+.icen-split-pane--vertical .icen-split-pane-divider {
+  cursor: row-resize;
+  flex-basis: 6px;
+  height: 6px;
+  width: auto;
+}
+.icen-split-pane--vertical .icen-split-pane-divider::after {
+  width: 28px;
+  height: 2px;
+}
+.icen-split-pane--vertical .icen-split-pane-divider::before {
+  inset: 0 -9px; /* 横向变体的命中扩展方向镜像（上下 ±9px） */
+}
+
+/* ── 嵌套分栏不应再有外边框 ── */
+.icen-split-pane .icen-split-pane {
+  border: 0;
+  border-radius: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .icen-split-pane-divider { transition: none; }
+  .icen-split-pane-divider::after { transition: none; }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .split-pane-divider { transition: none; }
-  .split-pane-divider::after { transition: none; }
 }

package/dist/components/split-pane.d.mts

@@ -0,0 +1,2 @@
+// kit: split-pane 类型面（构建产物，勿手改）
+export * from '../behaviors/split-pane.mjs';

package/dist/components/stat.css

@@ -1,232 +1,239 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: stat（指标卡）
  *
  * 完整契约：
- *   <div class="stat-grid [stat-grid--2|stat-grid--3|stat-grid--4]">
- *     <div class="stat-card [.stat-card--interactive] [.stat-card--horizontal]">
- *       <div class="stat-head">
- *         <span class="stat-label">用户总数</span>
- *         <span class="stat-icon [.icon--success|.icon--warning|.icon--error|.icon--info]>…svg…</span>
+ *   <div class="icen-stat-grid [icen-stat-grid--2|icen-stat-grid--3|icen-stat-grid--4]">
+ *     <div class="icen-stat-card [.icen-stat-card--interactive] [.icen-stat-card--horizontal]">
+ *       <div class="icen-stat-head">
+ *         <span class="icen-stat-label">用户总数</span>
+ *         <span class="icen-stat-icon [.icen-icon--success|.icen-icon--warning|.icen-icon--error|.icen-icon--info]>…svg…</span>
  *       </div>
- *       <div class="stat-body">
- *         <div class="stat-num [--accent|--warning|--error|--info]">0</div>
- *         <div class="stat-delta [.up|.down|.flat]">          ← 可选趋势
+ *       <div class="icen-stat-body">
+ *         <div class="icen-stat-num [--accent|--warning|--error|--info]">0</div>
+ *         <div class="icen-stat-delta [.icen-up|.icen-down|.icen-flat]">          ← 可选趋势
  *           <svg>…arrow…</svg> +12.4%
- *           <span class="stat-period">比上周</span>
+ *           <span class="icen-stat-period">比上周</span>
  *         </div>
  *       </div>
- *       <div class="stat-spark">…svg mini chart…</div>         ← 可选：迷你折线/柱状
- *       <div class="stat-progress">                           ← 可选：进度环
- *         <svg class="stat-ring" viewBox="0 0 36 36">
- *           <circle class="stat-ring-track" cx="18" cy="18" r="15.5" />
- *           <circle class="stat-ring-fill" cx="18" cy="18" r="15.5" style="stroke-dasharray:75,100" />
+ *       <div class="icen-stat-spark">…svg mini icen-chart…</div>         ← 可选：迷你折线/柱状
+ *       <div class="icen-stat-progress">                           ← 可选：进度环
+ *         <svg class="icen-stat-ring" viewBox="0 0 36 36">
+ *           <circle class="icen-stat-ring-track" cx="18" cy="18" r="15.5" />
+ *           <circle class="icen-stat-ring-fill" cx="18" cy="18" r="15.5" style="stroke-dasharray:75,100" />
  *         </svg>
  *       </div>
  *     </div>
  *   </div>
  *
- * .stat-card--horizontal：横向布局（数字在右，标签在左），适合 dashboard 顶栏。
- * .stat-spark：内嵌迷你折线/柱状图（消费方可引用 chart-sparkline.css 或自绘 SVG）。
- * .stat-ring：进度环（SVG stroke-dasharray 控制百分比，0-100）。
+ * .icen-stat-card--horizontal：横向布局（数字在右，标签在左），适合 dashboard 顶栏。
+ * .icen-stat-spark：内嵌迷你折线/柱状图（消费方可引用 chart-sparkline.css 或自绘 SVG）。
+ * .icen-stat-ring：进度环（SVG stroke-dasharray 控制百分比，0-100）。
  */
 
-.stat-grid {
+.icen-stat-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-  gap: var(--density-space-md);
-  margin-bottom: var(--density-space-lg);
+  gap: var(--icen-density-space-md);
+  margin-bottom: var(--icen-density-space-lg);
 }
-.stat-grid--2 { grid-template-columns: repeat(2, 1fr); }
-.stat-grid--3 { grid-template-columns: repeat(3, 1fr); }
-.stat-grid--4 { grid-template-columns: repeat(4, 1fr); }
+.icen-stat-grid--2 { grid-template-columns: repeat(2, 1fr); }
+.icen-stat-grid--3 { grid-template-columns: repeat(3, 1fr); }
+.icen-stat-grid--4 { grid-template-columns: repeat(4, 1fr); }
 
-.stat-card {
+.icen-stat-card {
   display: flex;
   flex-direction: column;
-  gap: var(--density-space-xs);
-  background: var(--token-surface);
-  border: 1px solid var(--token-line-soft);
-  border-radius: var(--radius-lg);
-  padding: var(--density-space-md);
-  box-shadow: var(--token-shadow-elevated);
+  gap: var(--icen-density-space-xs);
+  background: var(--icen-token-surface);
+  border: 1px solid var(--icen-token-separator-soft);
+  border-radius: var(--icen-control-radius-lg);
+  padding: var(--icen-density-space-sm) var(--icen-density-space-md) var(--icen-density-space-md);
+  box-shadow: none;
   transition:
     border-color var(--icen-tx-fast),
     box-shadow var(--icen-tx-fast),
     transform var(--icen-tx-fast);
 }
-.stat-card--interactive {
+.icen-stat-card--interactive {
   cursor: pointer;
 }
-.stat-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);
+/* hover 抬升仅可悬停设备生效（触屏关闭，AGENTS 动效守卫） */
+@media (hover: hover) and (pointer: fine) {
+  .icen-stat-card--interactive:hover {
+    transform: none;
+    border-color: var(--icen-token-control-border-hover);
+    box-shadow: var(--icen-token-shadow-card);
+  }
 }
 
-.stat-head {
+.icen-stat-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--density-space-sm);
+  gap: var(--icen-density-space-sm);
 }
-.stat-label {
-  color: var(--token-text-faint);
-  font-size: var(--density-font-size-xs);
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
+.icen-stat-label {
+  color: var(--icen-token-text-muted);
+  font-size: var(--icen-font-size-caption);
+  font-weight: 600;
+  letter-spacing: var(--icen-letter-spacing-caption);
 }
-.stat-icon {
+.icen-stat-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 24px;
   height: 24px;
-  border-radius: var(--radius-sm);
-  background: var(--token-accent-subtle);
-  color: var(--token-accent);
-}
-.stat-icon.icon--success { background: color-mix(in srgb, var(--token-success) 14%, transparent); color: var(--token-success); }
-.stat-icon.icon--warning { background: color-mix(in srgb, var(--token-warning) 14%, transparent); color: var(--token-warning); }
-.stat-icon.icon--error   { background: color-mix(in srgb, var(--token-error) 14%, transparent); color: var(--token-error); }
-.stat-icon.icon--info    { background: color-mix(in srgb, var(--token-info) 14%, transparent); color: var(--token-info); }
-.stat-icon svg { width: 14px; height: 14px; }
+  border-radius: var(--icen-radius-xs);
+  background: var(--icen-token-accent-subtle);
+  color: var(--icen-token-accent-text);
+}
+.icen-stat-icon.icen-icon--success { background: color-mix(in srgb, var(--icen-token-success) 14%, transparent); color: var(--icen-token-success); }
+.icen-stat-icon.icen-icon--warning { background: color-mix(in srgb, var(--icen-token-warning) 14%, transparent); color: var(--icen-token-warning); }
+.icen-stat-icon.icen-icon--error   { background: color-mix(in srgb, var(--icen-token-error) 14%, transparent); color: var(--icen-token-error); }
+.icen-stat-icon.icen-icon--info    { background: color-mix(in srgb, var(--icen-token-info) 14%, transparent); color: var(--icen-token-info); }
+.icen-stat-icon svg { width: 14px; height: 14px; }
 
 /* ── 内容体（数字 + 趋势） ── */
-.stat-body {
+.icen-stat-body {
   display: flex;
   flex-direction: column;
   gap: 2px;
 }
 
-.stat-num {
-  font-size: var(--density-font-size-2xl);
-  font-weight: 700;
+.icen-stat-num {
+  font-size: var(--icen-density-font-size-xl);
+  font-weight: 600;
   line-height: 1.2;
+  letter-spacing: -.015em;
   font-variant-numeric: tabular-nums lining-nums;
-  color: var(--token-text);
+  color: var(--icen-token-text);
   word-break: break-all;
 }
-.stat-num--accent  { color: var(--token-accent); }
-.stat-num--warning { color: var(--token-warning); }
-.stat-num--error   { color: var(--token-error); }
-.stat-num--info    { color: var(--token-info); }
+.icen-stat-num--accent  { color: var(--icen-token-accent-text); }
+.icen-stat-num--warning { color: var(--icen-token-warning); }
+.icen-stat-num--error   { color: var(--icen-token-error); }
+.icen-stat-num--info    { color: var(--icen-token-info); }
 
-.stat-delta {
+.icen-stat-delta {
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  font-size: var(--density-font-size-xs);
-  color: var(--token-text-muted);
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-text-muted);
   font-variant-numeric: tabular-nums;
 }
-.stat-delta svg { width: 12px; height: 12px; }
-.stat-delta.up   { color: var(--token-success); }
-.stat-delta.down { color: var(--token-error); }
-.stat-delta.flat { color: var(--token-text-faint); }
-.stat-period {
-  color: var(--token-text-faint);
-  margin-left: var(--density-space-xs);
+.icen-stat-delta svg { width: 12px; height: 12px; }
+.icen-stat-delta.icen-up   { color: var(--icen-token-success); }
+.icen-stat-delta.icen-down { color: var(--icen-token-error); }
+.icen-stat-delta.icen-flat { color: var(--icen-token-text-faint); }
+.icen-stat-period {
+  color: var(--icen-token-text-faint);
+  margin-inline-start: var(--icen-density-space-xs);
 }
 
 /* 紧凑变体 */
-.stat-card--sm {
-  padding: var(--density-space-sm);
+.icen-stat-card--sm {
+  padding: var(--icen-density-space-sm);
   gap: 2px;
 }
-.stat-card--sm .stat-num { font-size: var(--density-font-size-lg); }
-.stat-card--sm .stat-label { font-size: var(--density-font-size-2xs); }
+.icen-stat-card--sm .icen-stat-num { font-size: var(--icen-density-font-size-lg); }
+.icen-stat-card--sm .icen-stat-label { font-size: var(--icen-density-font-size-2xs); }
 
-/* ── 横向布局（dashboard 顶栏：标签左 + 数字右） ── */
-.stat-card--horizontal {
+/* ── 横向布局（dashboard 顶栏：标签起始缘 + 数字行内末端） ── */
+.icen-stat-card--horizontal {
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  gap: var(--density-space-md);
+  gap: var(--icen-density-space-md);
 }
-.stat-card--horizontal .stat-head {
+.icen-stat-card--horizontal .icen-stat-head {
   flex-direction: column;
   align-items: flex-start;
   gap: 2px;
   flex: 1;
-  min-width: 0;
+  min-inline-size: 0;
 }
-.stat-card--horizontal .stat-body {
-  text-align: right;
+.icen-stat-card--horizontal .icen-stat-body {
+  text-align: end;
   flex-shrink: 0;
 }
-.stat-card--horizontal .stat-delta {
+.icen-stat-card--horizontal .icen-stat-delta {
   justify-content: flex-end;
 }
 
 /* ── 迷你图槽（stat-spark）── */
-.stat-spark {
-  margin-top: var(--density-space-xs);
+.icen-stat-spark {
+  margin-top: var(--icen-density-space-xs);
   height: 28px;
   width: 100%;
 }
-.stat-spark svg {
+.icen-stat-spark svg {
   width: 100%;
   height: 100%;
   display: block;
 }
-.stat-card--horizontal .stat-spark {
+.icen-stat-card--horizontal .icen-stat-spark {
   margin-top: 0;
   width: 80px;
   flex-shrink: 0;
 }
 
 /* ── 进度环 ── */
-.stat-progress {
+.icen-stat-progress {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-top: var(--density-space-xs);
+  margin-top: var(--icen-density-space-xs);
 }
-.stat-card--horizontal .stat-progress {
+.icen-stat-card--horizontal .icen-stat-progress {
   margin-top: 0;
   flex-shrink: 0;
 }
-.stat-ring {
+.icen-stat-ring {
   width: 48px;
   height: 48px;
   transform: rotate(-90deg);
 }
-.stat-ring-track {
+.icen-stat-ring-track {
   fill: none;
-  stroke: var(--token-fill-2);
+  stroke: var(--icen-token-fill-2);
   stroke-width: 3;
 }
-.stat-ring-fill {
+.icen-stat-ring-fill {
   fill: none;
-  stroke: var(--token-accent);
+  stroke: var(--icen-token-accent);
   stroke-width: 3;
   stroke-linecap: round;
   stroke-dasharray: 0, 100;
-  transition: stroke-dasharray var(--icen-tx-slow) var(--ease-out);
+  transition: stroke-dasharray var(--icen-duration-slow) var(--icen-ease-out);
 }
-.stat-card .stat-ring-fill { stroke: var(--token-accent); }
+.icen-stat-card .icen-stat-ring-fill { stroke: var(--icen-token-accent); }
 
 /* ── 数字带前缀/后缀 ── */
-.stat-num-prefix,
-.stat-num-suffix {
+.icen-stat-num-prefix,
+.icen-stat-num-suffix {
   font-size: 0.6em;
   font-weight: 500;
-  color: var(--token-text-faint);
+  color: var(--icen-token-text-faint);
   margin: 0 1px;
 }
 
 /* ── 加载态骨架（脉冲 keyframes 见 base.css 的 icen-skeleton-pulse） ── */
-.stat-card.is-loading .stat-num,
-.stat-card.is-loading .stat-delta {
+.icen-stat-card.is-loading .icen-stat-num,
+.icen-stat-card.is-loading .icen-stat-delta {
   color: transparent;
-  background: var(--token-fill-2);
-  border-radius: var(--radius-xs);
+  background: var(--icen-token-fill-2);
+  border-radius: var(--icen-radius-xs);
   animation: icen-skeleton-pulse var(--stat-skeleton-duration, 1.5s) ease-in-out infinite;
 }
-.stat-card.is-loading .stat-num { height: 28px; }
-.stat-card.is-loading .stat-delta { height: 14px; width: 60%; }
+.icen-stat-card.is-loading .icen-stat-num { height: 28px; }
+.icen-stat-card.is-loading .icen-stat-delta { height: 14px; width: 60%; }
 @media (prefers-reduced-motion: reduce) {
-  .stat-card.is-loading .stat-num,
-  .stat-card.is-loading .stat-delta { animation: none; }
-  .stat-ring-fill { transition: none; }
+  .icen-stat-card.is-loading .icen-stat-num,
+  .icen-stat-card.is-loading .icen-stat-delta { animation: none; }
+  .icen-stat-ring-fill { transition: none; }
+}
+
 }

package/dist/components/stat.d.mts

@@ -0,0 +1,2 @@
+// kit: stat 类型面（构建产物，勿手改）
+export {};