@icen.ai/ui 0.10.0 → 0.11.0

package/dist/components/chart-radar.css

@@ -7,8 +7,13 @@
  *   .icen-chart-radar > svg[viewBox="0 0 200 200"]（N 轴蛛网 + 数据多边形）
  *                > .icen-chart-legend
  * 多系列时各系列分配 chart-tone-1..6，图例由 behavior 生成。
+ * 蛛网：环与轴都是发丝实线（虚线在 200px 视觉尺寸下会碎），最外环略重。
  */
 
+.icen-chart-radar {
+  align-items: center;
+  gap: var(--icen-density-space-md);
+}
 .icen-chart-radar > svg {
   display: block;
   width: 100%;
@@ -17,6 +22,50 @@
   aspect-ratio: 1;
   overflow: visible;
 }
-.icen-chart-radar { gap: var(--icen-density-space-md); }
+
+/* 蛛网环：fill=none 的 polygon 即网格；虚线归一为实线，避免缩放后出现摩尔纹 */
+.icen-chart-radar svg polygon[fill='none'] {
+  stroke: var(--icen-token-line-soft);
+  stroke-dasharray: none;
+  opacity: 0.9;
+}
+.icen-chart-radar svg line {
+  stroke: var(--icen-token-line-soft);
+  opacity: 0.8;
+}
+.icen-chart-radar svg text {
+  font-size: 10px;
+  letter-spacing: 0.01em;
+  fill: var(--icen-token-text-muted);
+}
+/* 数据多边形：填充 12%，描边 1.75；hover 只加浓填充 */
+.icen-chart-radar svg polygon[fill-opacity] {
+  fill-opacity: 0.12;
+  stroke-width: 1.75;
+  transition: fill-opacity var(--icen-tx-fast);
+}
+.icen-chart-radar svg polygon[fill-opacity]:hover,
+.icen-chart-radar svg polygon[fill-opacity].is-hover {
+  fill-opacity: 0.2;
+}
+.icen-chart-radar svg circle[data-icen-chart-mark] {
+  stroke-width: 1.75;
+  transition: transform var(--icen-duration-fast) var(--icen-ease-out);
+  transform-box: fill-box;
+  transform-origin: center;
+}
+.icen-chart-radar svg circle[data-icen-chart-mark].is-hover {
+  transform: scale(1.35);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .icen-chart-radar svg polygon[fill-opacity],
+  .icen-chart-radar svg circle[data-icen-chart-mark] { transition: none; }
+}
+
+@media (forced-colors: active) {
+  .icen-chart-radar svg polygon[fill='none'],
+  .icen-chart-radar svg line { stroke: GrayText; }
+}
 
 }

package/dist/components/chart-radar.d.mts

@@ -0,0 +1,2 @@
+// kit: chart-radar 类型面（构建产物，勿手改）
+export { renderRadar } from '../behaviors/charts.mjs';

package/dist/components/chart-scatter.css

@@ -5,23 +5,60 @@
  *
  * DOM 由 behaviors/charts.ts 的 renderScatter 构建：
  *   .icen-chart-scatter > svg（360×220 viewBox，网格 + 刻度 + circle[data-icen-chart-mark]）
+ * 横网格带 .icen-chart-grid、纵向带 .icen-chart-grid--v；左/下轴带 .icen-chart-axis。
  * 气泡第三维：points[].size 映射半径 3–10；hover/点击/右键走通用层委托。
  */
 
+.icen-chart-scatter {
+  min-width: 0;
+}
 .icen-chart-scatter svg {
   width: 100%;
   height: auto;
   display: block;
+  overflow: visible;
+}
+
+/* 网格：横实纵虚；轴线略重，刻度文字 10px（行为直出 8px，CSS 覆盖） */
+.icen-chart-scatter svg .icen-chart-grid {
+  stroke: var(--icen-token-line-soft);
+  opacity: 0.9;
+}
+.icen-chart-scatter svg .icen-chart-grid--v {
+  stroke-dasharray: 2 4;
+  opacity: 0.75;
+}
+.icen-chart-scatter svg .icen-chart-axis {
+  stroke: var(--icen-token-line);
+  stroke-dasharray: none;
+  opacity: 1;
 }
+.icen-chart-scatter svg text {
+  font-size: 10px;
+  letter-spacing: 0.01em;
+  fill: var(--icen-token-text-faint);
+}
+
+/* 数据点：半透明填充 + 细描边；hover 加浓不放大（气泡半径本身携带尺寸语义） */
 .icen-chart-scatter circle[data-icen-chart-mark] {
-  transition: fill-opacity var(--icen-tx-fast);
+  transition: fill-opacity var(--icen-tx-fast), stroke-width var(--icen-tx-fast);
 }
-.icen-chart-scatter circle[data-icen-chart-mark]:hover {
+.icen-chart-scatter circle[data-icen-chart-mark]:hover,
+.icen-chart-scatter circle[data-icen-chart-mark].is-hover {
   fill-opacity: 0.85;
+  stroke-width: 1.75;
+}
+.icen-chart-scatter circle[data-icen-chart-mark].is-off {
+  opacity: 0.14;
 }
 
 @media (prefers-reduced-motion: reduce) {
   .icen-chart-scatter circle[data-icen-chart-mark] { transition: none; }
 }
 
+@media (forced-colors: active) {
+  .icen-chart-scatter svg .icen-chart-grid,
+  .icen-chart-scatter svg .icen-chart-axis { stroke: GrayText; }
+}
+
 }

package/dist/components/chart-scatter.d.mts

@@ -0,0 +1,2 @@
+// kit: chart-scatter 类型面（构建产物，勿手改）
+export { renderScatter, renderMap } from '../behaviors/charts.mjs';

package/dist/components/chart-sparkline.css

@@ -7,6 +7,12 @@
  *   .icen-chart-sparkline > svg[viewBox="0 0 96 28"]（无轴，末点高亮）
  */
 
+.icen-chart-sparkline {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  line-height: 0;
+}
 .icen-chart-sparkline > svg {
   display: block;
   width: 96px;
@@ -14,4 +20,18 @@
   overflow: visible;
 }
 
+/* 迷你线不比正文抢眼：1.75px 圆头，渐变只做落影暗示 */
+.icen-chart-sparkline svg > path[fill='none'] {
+  stroke-width: 1.75;
+}
+.icen-chart-sparkline svg stop:first-child { stop-opacity: 0.22; }
+.icen-chart-sparkline svg stop:last-child { stop-opacity: 0; }
+.icen-chart-sparkline svg circle {
+  stroke-width: 1.6;
+}
+
+@media (forced-colors: active) {
+  .icen-chart-sparkline svg circle { fill: Canvas; }
+}
+
 }

package/dist/components/chart-sparkline.d.mts

@@ -0,0 +1,2 @@
+// kit: chart-sparkline 类型面（构建产物，勿手改）
+export { renderSparkline } from '../behaviors/charts.mjs';

package/dist/components/chart-stack.css

@@ -9,20 +9,26 @@
  */
 
 .icen-chart-stack {
-  height: 16px;
+  height: 14px;
   display: flex;
   overflow: hidden;
-  border-radius: var(--icen-radius-full);
-  background: var(--icen-token-fill-2);
+  border-radius: var(--icen-radius-xs);
+  background: color-mix(in srgb, var(--icen-token-fill-2) 70%, transparent);
   margin-bottom: var(--icen-density-space-sm);
+  margin-inline: 0;
 }
 .icen-chart-stack-seg {
   height: 100%;
   min-width: 3px;
   background: var(--chart-tone, var(--icen-token-accent));
-  transition: width var(--icen-tx-slow);
+  transition: width var(--icen-duration-slow) var(--icen-ease-out), filter var(--icen-tx-fast);
 }
-.icen-chart-stack-seg:hover {
+/* 段缝：2px 面色内阴影（不改宽度，不改百分比契约；同色相邻段也能分界） */
+.icen-chart-stack-seg + .icen-chart-stack-seg {
+  box-shadow: inset 2px 0 0 var(--icen-token-card);
+}
+.icen-chart-stack-seg:hover,
+.icen-chart-stack-seg.is-hover {
   filter: brightness(1.08);
 }
 
@@ -30,4 +36,9 @@
   .icen-chart-stack-seg { transition: none; }
 }
 
+@media (forced-colors: active) {
+  .icen-chart-stack { border: 1px solid CanvasText; background: Canvas; }
+  .icen-chart-stack-seg + .icen-chart-stack-seg { box-shadow: inset 2px 0 0 Canvas; }
+}
+
 }

package/dist/components/chart-stack.d.mts

@@ -0,0 +1,2 @@
+// kit: chart-stack 类型面（构建产物，勿手改）
+export { renderStack } from '../behaviors/charts.mjs';

package/dist/components/charts.css

@@ -17,45 +17,53 @@
  *   标记 .icen-chart-mark-line / .icen-chart-mark-point / .icen-chart-mark-label
  *   （spec.marks：SVG 变体属性直出样式仅挡指针事件，vbar DOM 变体在 chart-bar.css）。
  *
- * 单色调通过容器或条上的 --chart-tone 自定义属性注入（默认 var(--icen-token-accent)）。
+ * 图表是「数据墨水」而非装饰面：网格与轴用发丝线，数据用饱和色，文字一律等宽数字，
+ * 悬浮只提亮不位移。单色调通过容器或条上的 --chart-tone 自定义属性注入（默认 accent）。
  */
 
 .icen-chart {
   width: 100%;
+  min-width: 0;
   display: flex;
   flex-direction: column;
   gap: var(--icen-density-space-sm);
+  color: var(--icen-token-text);
+  font-variant-numeric: tabular-nums;
 }
 .icen-chart-empty {
-  height: 150px;
+  height: 160px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: var(--icen-density-font-size-xs);
-  color: var(--icen-token-text-faint);
+  gap: 6px;
+  font-size: var(--icen-font-size-caption);
+  letter-spacing: 0.01em;
+  color: var(--icen-token-text-muted);
 }
 
 /* ── 图例 / 轴标签（donut / stack / vbar / line 共用） ── */
 .icen-chart-legend {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 5px;
   min-width: 0;
   flex: 1;
 }
 .icen-chart-legend-item {
   display: flex;
   align-items: center;
-  gap: var(--icen-density-space-xs);
-  font-size: var(--icen-density-font-size-xs);
+  gap: 7px;
   min-width: 0;
+  font-size: var(--icen-font-size-caption);
+  line-height: 1.45;
 }
 .icen-chart-legend-dot {
-  width: 8px;
-  height: 8px;
+  width: 6px;
+  height: 6px;
   flex-shrink: 0;
   border-radius: var(--icen-radius-full);
   background: var(--chart-tone, var(--icen-token-accent));
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--icen-token-card) 70%, transparent);
 }
 .icen-chart-legend-label {
   flex: 1;
@@ -67,6 +75,8 @@
 }
 .icen-chart-legend-value {
   flex-shrink: 0;
+  font-family: var(--icen-font-mono);
+  font-size: 11px;
   font-variant-numeric: tabular-nums;
   color: var(--icen-token-text-faint);
 }
@@ -74,13 +84,15 @@
 .icen-chart-labels {
   display: flex;
   gap: var(--icen-density-space-xs);
-  margin-top: var(--icen-density-space-xs);
+  margin-top: 4px;
 }
 .icen-chart-labels > span {
   flex: 1;
   min-width: 0;
   text-align: center;
-  font-size: var(--icen-density-font-size-2xs);
+  font-size: 11px;
+  line-height: 1.3;
+  letter-spacing: 0.01em;
   color: var(--icen-token-text-faint);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -94,7 +106,7 @@
   display: block;
   position: relative;
   min-block-size: 1.5em;
-  font-size: var(--icen-density-font-size-2xs);
+  font-size: 11px;
 }
 .icen-chart-labels--points > span {
   position: absolute;
@@ -113,8 +125,10 @@
 
 /* 标题（spec.title 有值时渲染） */
 .icen-chart-title {
-  font-size: var(--icen-density-font-size-sm);
+  font-size: var(--icen-font-size-control);
   font-weight: 600;
+  line-height: 1.35;
+  letter-spacing: -0.005em;
   color: var(--icen-token-text);
 }
 
@@ -130,8 +144,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 22px;
-  height: 22px;
+  width: 24px;
+  height: 24px;
   padding: 0;
   border: 0;
   border-radius: var(--icen-radius-xs);
@@ -140,9 +154,10 @@
   cursor: pointer;
   transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
 }
-.icen-chart-legend-eye:hover { color: var(--icen-token-text); background: var(--icen-token-fill-1); }
+.icen-chart-legend-eye:hover { color: var(--icen-token-text); background: var(--icen-token-fill-hover); }
+.icen-chart-legend-eye:active { background: var(--icen-token-fill-pressed); }
 .icen-chart-legend-eye:focus-visible { outline: none; box-shadow: var(--icen-ring); }
-.icen-chart-legend-eye svg { width: 13px; height: 13px; }
+.icen-chart-legend-eye svg { width: 14px; height: 14px; }
 @media (pointer: coarse) {
   .icen-chart-legend-eye { min-inline-size: 44px; min-block-size: 44px; }
   .icen-chart-legend-toggle-item { min-block-size: 44px; }
@@ -155,26 +170,35 @@
   display: none;
 }
 
-/* 内置 tooltip：portal 到 body 的单例，position: fixed 跟随指针 */
+/* 内置 tooltip：portal 到 body 的单例，position: fixed 跟随指针。
+   浮层物理：玻璃面 + 发丝边 + 抬升阴影；无 backdrop-filter 时回落不透明面。 */
 .icen-chart-tooltip {
   position: fixed;
   z-index: var(--icen-z-tooltip);
   max-width: 280px;
-  padding: 3px 8px;
+  padding: 6px 10px;
   border-radius: var(--icen-radius-sm);
-  background: var(--icen-token-card-strong);
-  border: 1px solid var(--icen-token-line);
-  box-shadow: var(--icen-token-shadow-elevated);
-  font-size: var(--icen-density-font-size-xs);
+  background: var(--icen-token-surface-glass);
+  -webkit-backdrop-filter: blur(var(--icen-material-blur-floating)) saturate(var(--icen-material-saturate));
+  backdrop-filter: blur(var(--icen-material-blur-floating)) saturate(var(--icen-material-saturate));
+  border: 1px solid var(--icen-token-material-edge);
+  box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-elevated);
+  font-size: var(--icen-font-size-caption);
+  line-height: 1.45;
+  letter-spacing: 0.005em;
   font-variant-numeric: tabular-nums;
   color: var(--icen-token-text);
   pointer-events: none;
 }
 .icen-chart-tooltip[hidden] { display: none; }
 
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .icen-chart-tooltip { background: var(--icen-token-surface-raised); }
+}
+
 /* 数据标记（各图型的条/点/段/格）：交互态由委托层挂 .is-hover，图例切换挂 .is-off */
 [data-icen-chart-mark] { cursor: pointer; }
-[data-icen-chart-mark].is-hover { filter: brightness(1.12); }
+[data-icen-chart-mark].is-hover { filter: brightness(1.06); }
 [data-icen-chart-mark].is-off { opacity: 0.16; pointer-events: none; }
 svg circle[data-icen-chart-mark].is-hover { stroke-width: 3; }
 
@@ -182,11 +206,12 @@ svg circle[data-icen-chart-mark].is-hover { stroke-width: 3; }
 .icen-chart-legend--toggle .icen-chart-legend-toggle-item {
   cursor: pointer;
   border-radius: var(--icen-radius-xs);
-  padding: 2px 4px;
-  margin: -2px -4px;
+  padding: 3px 5px;
+  margin: -3px -5px;
   transition: background-color var(--icen-tx-fast);
 }
-.icen-chart-legend--toggle .icen-chart-legend-toggle-item:hover { background: var(--icen-token-fill-1); }
+.icen-chart-legend--toggle .icen-chart-legend-toggle-item:hover { background: var(--icen-token-fill-hover); }
+.icen-chart-legend--toggle .icen-chart-legend-toggle-item:active { background: var(--icen-token-fill-pressed); }
 .icen-chart-legend--toggle .icen-chart-legend-toggle-item:focus-visible {
   outline: none;
   box-shadow: var(--icen-ring);
@@ -207,21 +232,24 @@ svg circle[data-icen-chart-mark].is-hover { stroke-width: 3; }
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: var(--icen-density-font-size-2xs);
+  font-size: 11px;
+  letter-spacing: 0.01em;
   color: var(--icen-token-text-faint);
 }
 .icen-chart-zoom-reset {
   flex-shrink: 0;
-  padding: 1px 8px;
+  min-height: 22px;
+  padding: 0 9px;
   border: 1px solid var(--icen-token-line);
   border-radius: var(--icen-radius-full);
   background: var(--icen-token-fill-1);
-  font-size: var(--icen-density-font-size-2xs);
+  font-size: 11px;
   color: var(--icen-token-text-muted);
   cursor: pointer;
-  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast), border-color var(--icen-tx-fast);
 }
-.icen-chart-zoom-reset:hover { color: var(--icen-token-text); background: var(--icen-token-fill-2); }
+.icen-chart-zoom-reset:hover { color: var(--icen-token-text); background: var(--icen-token-fill-2); border-color: var(--icen-token-line-strong); }
+.icen-chart-zoom-reset:active { background: var(--icen-token-fill-pressed); }
 .icen-chart-zoom-reset:focus-visible { outline: none; box-shadow: var(--icen-ring); }
 
 /* 缩放手势选区（拖拽期挂 body，position:fixed；accent 10% 填充） */
@@ -242,8 +270,8 @@ svg circle[data-icen-chart-mark].is-hover { stroke-width: 3; }
   height: 150px;
 }
 .icen-chart-skeleton-bar {
-  height: 10px;
-  border-radius: var(--icen-radius-sm);
+  height: 8px;
+  border-radius: var(--icen-radius-xs);
   background: color-mix(in srgb, var(--icen-token-text) 8%, transparent);
   animation: icen-skeleton-pulse var(--skeleton-duration, 2s) ease-in-out infinite;
 }
@@ -278,12 +306,29 @@ svg .icen-chart-mark-label {
   cursor: pointer;
 }
 .icen-chart-map-dot {
-  transition: transform var(--icen-tx-fast);
+  transition: transform var(--icen-duration-fast) var(--icen-ease-out), fill-opacity var(--icen-tx-fast);
   transform-box: fill-box;
   transform-origin: center;
 }
 .icen-chart-map-point.is-hover .icen-chart-map-dot {
   transform: scale(1.5);
+  fill-opacity: 0.9;
+}
+
+/* 高对比模式：图表配色由系统接管，只保留结构可辨的最小描边 */
+@media (forced-colors: active) {
+  .icen-chart-tooltip {
+    background: Canvas;
+    border-color: CanvasText;
+    box-shadow: none;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+  .icen-chart-legend-dot,
+  .icen-chart-legend--toggle .icen-chart-legend-dot {
+    border: 1px solid CanvasText;
+  }
+  .icen-chart-zoom-reset { border-color: CanvasText; }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/components/charts.d.mts

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

package/dist/components/code-block.css

@@ -46,8 +46,8 @@
 /* ══════════════ 容器 ══════════════ */
 
 .icen-code-block {
-  border: 1px solid var(--icen-token-line-soft);
-  border-radius: var(--icen-radius-lg);
+  border: 1px solid var(--icen-token-separator-soft);
+  border-radius: var(--icen-control-radius-lg);
   background: var(--cb-background, var(--icen-token-surface));
   overflow: hidden;
 }
@@ -56,12 +56,12 @@
   margin: 0;
   border: 0;
   border-radius: 0;
-  padding: var(--icen-density-space-sm) 0;
+  padding: 10px 0;
   background: transparent !important; /* guard:allow-important shiki 主题自带内联背景，容器统一接管 */
   color: var(--icen-token-text);
   font-family: var(--icen-font-mono);
-  font-size: var(--icen-density-font-size-md);
-  line-height: 1.5;
+  font-size: 12px;
+  line-height: 1.6;
   overflow-x: auto;
   transition: max-height var(--icen-duration-slow) var(--icen-ease-out);
   direction: ltr;
@@ -83,9 +83,11 @@
   display: flex;
   align-items: center;
   gap: var(--icen-density-space-md);
-  padding: var(--icen-density-space-sm) var(--icen-density-space-md);
-  border-bottom: 1px solid var(--icen-token-line-soft);
-  font-size: var(--icen-density-font-size-sm);
+  min-block-size: 34px;
+  padding: 0 var(--icen-density-space-md);
+  background: var(--icen-token-surface-chrome);
+  border-bottom: 1px solid var(--icen-token-separator-soft);
+  font-size: 11.5px;
   line-height: 1.4;
   color: var(--icen-token-text-muted);
 }

package/dist/components/code-block.d.mts

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