@icen.ai/ui 0.3.0 → 0.4.0

package/dist/components/chart-bar.css

@@ -0,0 +1,79 @@
+/*
+ * @icen.ai/ui — Component: chart-bar（柱状/条形图专属样式）
+ * 依赖：charts.css（基座 .chart / .chart-labels / --chart-tone）
+ *
+ * DOM 由 behaviors/charts.ts 的 renderVBar / renderHBar 构建：
+ *   .chart-vbar > .chart-vbar-track > .chart-vbar-bar
+ *   .chart-hbar > .chart-hbar-row > .chart-hbar-label + .chart-hbar-track > .chart-hbar-bar + .chart-hbar-value
+ */
+
+/* ── vbar · 垂直柱状 ── */
+.chart-vbar {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--density-space-xs);
+  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);
+  overflow: hidden;
+}
+.chart-vbar-bar {
+  width: 100%;
+  border-radius: var(--radius-sm);
+  background: var(--chart-tone, var(--token-accent));
+  transition: height var(--icen-tx-slow);
+}
+.chart-vbar-bar:hover {
+  filter: brightness(1.08);
+}
+
+/* ── hbar · 水平条形 ── */
+.chart-hbar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-xs);
+}
+.chart-hbar-row {
+  display: grid;
+  grid-template-columns: minmax(72px, 1fr) minmax(90px, 2fr) 52px;
+  gap: var(--density-space-xs);
+  align-items: center;
+  font-size: var(--density-font-size-xs);
+}
+.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 var(--icen-tx-slow);
+}
+.chart-hbar-bar:hover {
+  filter: brightness(1.08);
+}
+.chart-hbar-value {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  color: var(--token-text-faint);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chart-vbar-bar, .chart-hbar-bar { transition: none; }
+}

package/dist/components/chart-bar.mjs

@@ -0,0 +1,4 @@
+// @icen.ai/ui — kit: chart-bar（CSS + behavior 一行入口；构建产物，勿手改）
+import './chart-bar.css';
+import './charts.css';
+export { renderVBar, renderHBar } from '../behaviors/charts.mjs';

package/dist/components/chart-gauge.css

@@ -0,0 +1,38 @@
+/*
+ * @icen.ai/ui — Component: chart-gauge（进度环 / 仪表盘专属样式）
+ * 依赖：charts.css（基座 --chart-tone）
+ *
+ * DOM 由 behaviors/charts.ts 的 renderGauge 构建：
+ *   .chart-gauge > svg[viewBox="0 0 120 120"]（-90° 起笔，环形单值）
+ *                > .chart-gauge-center > .chart-gauge-value + .chart-gauge-label
+ */
+
+.chart-gauge {
+  position: relative;
+  width: 132px;
+  flex-shrink: 0;
+}
+.chart-gauge > svg {
+  display: block;
+  width: 132px;
+  height: 132px;
+}
+.chart-gauge-center {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1px;
+}
+.chart-gauge-value {
+  font-size: 20px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: var(--token-text);
+}
+.chart-gauge-label {
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-faint);
+}

package/dist/components/chart-gauge.mjs

@@ -0,0 +1,4 @@
+// @icen.ai/ui — kit: chart-gauge（CSS + behavior 一行入口；构建产物，勿手改）
+import './chart-gauge.css';
+import './charts.css';
+export { renderGauge } from '../behaviors/charts.mjs';

package/dist/components/chart-heatmap.css

@@ -0,0 +1,52 @@
+/*
+ * @icen.ai/ui — Component: chart-heatmap（热力图 / 贡献图专属样式）
+ * 依赖：charts.css（基座 --chart-tone）
+ *
+ * DOM 由 behaviors/charts.ts 的 renderHeatmap 构建：
+ *   .chart-heatmap > .chart-heatmap-grid > .chart-heatmap-cell[data-level=0-4][.is-blank]
+ *                  > .chart-heatmap-legend
+ * 7 行（周一→周日）× N 周列，5 档色阶（data-level 0-4）。
+ */
+
+.chart-heatmap {
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-xs);
+}
+.chart-heatmap-grid {
+  display: grid;
+  grid-template-rows: repeat(7, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  gap: 3px;
+  width: 100%;
+}
+.chart-heatmap-cell {
+  aspect-ratio: 1;
+  border-radius: 2px;
+  background: var(--token-fill-2);
+}
+.chart-heatmap-cell.is-blank { background: transparent; }
+.chart-heatmap-cell[data-level='1'] { background: color-mix(in srgb, var(--chart-tone, var(--token-accent)) 28%, var(--token-fill-2)); }
+.chart-heatmap-cell[data-level='2'] { background: color-mix(in srgb, var(--chart-tone, var(--token-accent)) 50%, var(--token-fill-2)); }
+.chart-heatmap-cell[data-level='3'] { background: color-mix(in srgb, var(--chart-tone, var(--token-accent)) 74%, var(--token-fill-2)); }
+.chart-heatmap-cell[data-level='4'] { background: var(--chart-tone, var(--token-accent)); }
+.chart-heatmap-cell:not(.is-blank):hover {
+  outline: 1px solid var(--chart-tone, var(--token-accent));
+  outline-offset: 0;
+}
+.chart-heatmap-legend {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 3px;
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-faint);
+}
+.chart-heatmap-legend .chart-heatmap-cell {
+  width: 10px;
+  height: 10px;
+  aspect-ratio: auto;
+}
+.chart-heatmap-legend > span:first-child { margin-right: 2px; }
+.chart-heatmap-legend > span:last-child { margin-left: 2px; }

package/dist/components/chart-heatmap.mjs

@@ -0,0 +1,4 @@
+// @icen.ai/ui — kit: chart-heatmap（CSS + behavior 一行入口；构建产物，勿手改）
+import './chart-heatmap.css';
+import './charts.css';
+export { renderHeatmap } from '../behaviors/charts.mjs';

package/dist/components/chart-line.css

@@ -0,0 +1,15 @@
+/*
+ * @icen.ai/ui — Component: chart-line（折线图专属样式）
+ * 依赖：charts.css（基座）
+ *
+ * DOM 由 behaviors/charts.ts 的 renderLine 构建：
+ *   .chart-line > svg[viewBox="0 0 360 150"]
+ * 含面积渐变 + 网格线 + 数据点 + 底部 .chart-labels。
+ */
+
+.chart-line > svg {
+  display: block;
+  width: 100%;
+  height: 150px;
+  overflow: visible;
+}

package/dist/components/chart-line.mjs

@@ -0,0 +1,4 @@
+// @icen.ai/ui — kit: chart-line（CSS + behavior 一行入口；构建产物，勿手改）
+import './chart-line.css';
+import './charts.css';
+export { renderLine } from '../behaviors/charts.mjs';

package/dist/components/chart-pie.css

@@ -0,0 +1,26 @@
+/*
+ * @icen.ai/ui — Component: chart-pie（饼/环形图专属样式）
+ * 依赖：charts.css（基座 .chart-legend）
+ *
+ * DOM 由 behaviors/charts.ts 的 renderDonut 构建：
+ *   .chart-donut > svg[viewBox="0 0 120 120"]（-90° 起笔）
+ *   .chart-donut > .chart-legend
+ */
+
+.chart-donut {
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-md);
+  min-height: 150px;
+}
+.chart-donut > svg {
+  width: 132px;
+  height: 132px;
+  flex-shrink: 0;
+}
+.chart-donut-center {
+  font-variant-numeric: tabular-nums;
+  text-anchor: middle;
+  fill: var(--token-text);
+  font-weight: 600;
+}

package/dist/components/chart-pie.mjs

@@ -0,0 +1,4 @@
+// @icen.ai/ui — kit: chart-pie（CSS + behavior 一行入口；构建产物，勿手改）
+import './chart-pie.css';
+import './charts.css';
+export { renderDonut } from '../behaviors/charts.mjs';

package/dist/components/chart-radar.css

@@ -0,0 +1,19 @@
+/*
+ * @icen.ai/ui — Component: chart-radar（雷达图专属样式）
+ * 依赖：charts.css（基座 .chart-legend）
+ *
+ * DOM 由 behaviors/charts.ts 的 renderRadar 构建：
+ *   .chart-radar > svg[viewBox="0 0 200 200"]（N 轴蛛网 + 数据多边形）
+ *                > .chart-legend
+ * 多系列时各系列分配 chart-tone-1..6，图例由 behavior 生成。
+ */
+
+.chart-radar > svg {
+  display: block;
+  width: 100%;
+  max-width: 260px;
+  height: auto;
+  aspect-ratio: 1;
+  overflow: visible;
+}
+.chart-radar { gap: var(--density-space-md); }

package/dist/components/chart-radar.mjs

@@ -0,0 +1,4 @@
+// @icen.ai/ui — kit: chart-radar（CSS + behavior 一行入口；构建产物，勿手改）
+import './chart-radar.css';
+import './charts.css';
+export { renderRadar } from '../behaviors/charts.mjs';

package/dist/components/chart-sparkline.css

@@ -0,0 +1,14 @@
+/*
+ * @icen.ai/ui — Component: chart-sparkline（迷你趋势线专属样式）
+ * 依赖：charts.css（基座）
+ *
+ * DOM 由 behaviors/charts.ts 的 renderSparkline 构建：
+ *   .chart-sparkline > svg[viewBox="0 0 96 28"]（无轴，末点高亮）
+ */
+
+.chart-sparkline > svg {
+  display: block;
+  width: 96px;
+  height: 28px;
+  overflow: visible;
+}

package/dist/components/chart-sparkline.mjs

@@ -0,0 +1,4 @@
+// @icen.ai/ui — kit: chart-sparkline（CSS + behavior 一行入口；构建产物，勿手改）
+import './chart-sparkline.css';
+import './charts.css';
+export { renderSparkline } from '../behaviors/charts.mjs';

package/dist/components/chart-stack.css

@@ -0,0 +1,30 @@
+/*
+ * @icen.ai/ui — Component: chart-stack（堆叠条图专属样式）
+ * 依赖：charts.css（基座 .chart-legend）
+ *
+ * DOM 由 behaviors/charts.ts 的 renderStack 构建：
+ *   .chart-stack > .chart-stack-seg[]
+ *   .chart-legend
+ */
+
+.chart-stack {
+  height: 16px;
+  display: flex;
+  overflow: hidden;
+  border-radius: var(--radius-full);
+  background: var(--token-fill-2);
+  margin-bottom: var(--density-space-sm);
+}
+.chart-stack-seg {
+  height: 100%;
+  min-width: 3px;
+  background: var(--chart-tone, var(--token-accent));
+  transition: width var(--icen-tx-slow);
+}
+.chart-stack-seg:hover {
+  filter: brightness(1.08);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chart-stack-seg { transition: none; }
+}

package/dist/components/chart-stack.mjs

@@ -0,0 +1,4 @@
+// @icen.ai/ui — kit: chart-stack（CSS + behavior 一行入口；构建产物，勿手改）
+import './chart-stack.css';
+import './charts.css';
+export { renderStack } from '../behaviors/charts.mjs';

package/dist/components/charts.css

@@ -1,13 +1,13 @@
 /*
- * @icen.ai/ui — Component: charts（轻量图表，与 behaviors/charts 配套）
+ * @icen.ai/ui — Component: charts base（图表共享基座，与 behaviors/charts 配套）
  *
- * 包含：.chart 容器 / .chart-empty / .chart-legend（图例行）/ .chart-labels（轴标签行）/
- *       vbar（垂直柱状）/ hbar（水平条形）/ stack（堆叠条）/ donut（环形）/ line（折线）/
- *       heatmap（贡献图热力格）/ sparkline（迷你趋势）/ gauge（进度环）
+ * 仅含所有图表类型共用的契约：.chart 容器、.chart-empty 空态、.chart-legend 图例、
+ * .chart-labels 轴标签行、.chart-tone-* 调色盘。
+ * 各图表类型的专属样式在独立 CSS 文件中（chart-line / chart-bar / chart-pie /
+ * chart-stack / chart-heatmap / chart-sparkline / chart-gauge / chart-radar / chart-area），
+ * 按需引入——kit/chart-<type> 入口会自动带上本基座 + 对应专属 CSS。
  *
- * 完整契约：DOM 全部由 behaviors/charts.ts 以 createElement(NS) + textContent 构建；
  * 单色调通过容器或条上的 --chart-tone 自定义属性注入（默认 var(--token-accent)）。
- * 规格源自 opengal src/presentation/ui/data/charts.tsx。
  */
 
 .chart {
@@ -78,210 +78,10 @@
   font-variant-numeric: tabular-nums;
 }
 
-/* ── vbar · 垂直柱状 ── */
-.chart-vbar {
-  display: flex;
-  align-items: flex-end;
-  gap: var(--density-space-xs);
-  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);
-  overflow: hidden;
-}
-.chart-vbar-bar {
-  width: 100%;
-  border-radius: var(--radius-sm);
-  background: var(--chart-tone, var(--token-accent));
-  transition: height var(--icen-tx-slow);
-}
-.chart-vbar-bar:hover {
-  filter: brightness(1.08);
-}
-
-/* ── hbar · 水平条形 ── */
-.chart-hbar {
-  display: flex;
-  flex-direction: column;
-  gap: var(--density-space-xs);
-}
-.chart-hbar-row {
-  display: grid;
-  grid-template-columns: minmax(72px, 1fr) minmax(90px, 2fr) 52px;
-  gap: var(--density-space-xs);
-  align-items: center;
-  font-size: var(--density-font-size-xs);
-}
-.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 var(--icen-tx-slow);
-}
-.chart-hbar-bar:hover {
-  filter: brightness(1.08);
-}
-.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: var(--density-space-sm);
-}
-.chart-stack-seg {
-  height: 100%;
-  min-width: 3px;
-  background: var(--chart-tone, var(--token-accent));
-  transition: width var(--icen-tx-slow);
-}
-.chart-stack-seg:hover {
-  filter: brightness(1.08);
-}
-
-/* ── donut · 环形 ── */
-.chart-donut {
-  display: flex;
-  align-items: center;
-  gap: var(--density-space-md);
-  min-height: 150px;
-}
-.chart-donut > svg {
-  width: 132px;
-  height: 132px;
-  flex-shrink: 0;
-}
-.chart-donut-center {
-  font-variant-numeric: tabular-nums;
-  text-anchor: middle;
-  fill: var(--token-text);
-  font-weight: 600;
-}
-
-/* ── line · 折线 ── */
-.chart-line > svg {
-  display: block;
-  width: 100%;
-  height: 150px;
-  overflow: visible;
-}
-
-/* ── heatmap · 贡献图（GitHub 式 7 行 × N 周） ── */
-.chart-heatmap {
-  display: flex;
-  flex-direction: column;
-  gap: var(--density-space-xs);
-}
-.chart-heatmap-grid {
-  display: grid;
-  grid-template-rows: repeat(7, 1fr);
-  grid-auto-flow: column;
-  grid-auto-columns: 1fr;
-  gap: 3px;
-  width: 100%;
-}
-.chart-heatmap-cell {
-  aspect-ratio: 1;
-  border-radius: 2px;
-  background: var(--token-fill-2);
-}
-.chart-heatmap-cell.is-blank { background: transparent; }
-.chart-heatmap-cell[data-level='1'] { background: color-mix(in srgb, var(--chart-tone, var(--token-accent)) 28%, var(--token-fill-2)); }
-.chart-heatmap-cell[data-level='2'] { background: color-mix(in srgb, var(--chart-tone, var(--token-accent)) 50%, var(--token-fill-2)); }
-.chart-heatmap-cell[data-level='3'] { background: color-mix(in srgb, var(--chart-tone, var(--token-accent)) 74%, var(--token-fill-2)); }
-.chart-heatmap-cell[data-level='4'] { background: var(--chart-tone, var(--token-accent)); }
-.chart-heatmap-cell:not(.is-blank):hover {
-  outline: 1px solid var(--chart-tone, var(--token-accent));
-  outline-offset: 0;
-}
-.chart-heatmap-legend {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 3px;
-  font-size: var(--density-font-size-xs);
-  color: var(--token-text-faint);
-}
-.chart-heatmap-legend .chart-heatmap-cell {
-  width: 10px;
-  height: 10px;
-  aspect-ratio: auto;
-}
-.chart-heatmap-legend > span:first-child { margin-right: 2px; }
-.chart-heatmap-legend > span:last-child { margin-left: 2px; }
-
-/* ── sparkline · 迷你趋势 ── */
-.chart-sparkline > svg {
-  display: block;
-  width: 96px;
-  height: 28px;
-  overflow: visible;
-}
-
-/* ── gauge · 进度环 ── */
-.chart-gauge {
-  position: relative;
-  width: 132px;
-  flex-shrink: 0;
-}
-.chart-gauge > svg {
-  display: block;
-  width: 132px;
-  height: 132px;
-}
-.chart-gauge-center {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 1px;
-}
-.chart-gauge-value {
-  font-size: 20px;
-  font-weight: 700;
-  font-variant-numeric: tabular-nums;
-  color: var(--token-text);
-}
-.chart-gauge-label {
-  font-size: var(--density-font-size-xs);
-  color: var(--token-text-faint);
-}
-
-/* ── 调色盘：多系列图（donut/stack/line）由 behavior 选用 ── */
+/* ── 调色盘：多系列图（donut/stack/line/radar）由 behavior 选用 ── */
 .chart-tone-1 { --chart-tone: var(--token-accent); }
 .chart-tone-2 { --chart-tone: var(--token-accent-cold); }
 .chart-tone-3 { --chart-tone: var(--token-success); }
 .chart-tone-4 { --chart-tone: var(--token-warning); }
 .chart-tone-5 { --chart-tone: var(--token-info); }
 .chart-tone-6 { --chart-tone: color-mix(in srgb, var(--token-text) 50%, transparent); }
-
-@media (prefers-reduced-motion: reduce) {
-  .chart-vbar-bar, .chart-hbar-bar, .chart-stack-seg { transition: none; }
-}

package/dist/components/charts.mjs

@@ -1,3 +1,12 @@
 // @icen.ai/ui — kit: charts（CSS + behavior 一行入口；构建产物，勿手改）
 import './charts.css';
+import './chart-line.css';
+import './chart-bar.css';
+import './chart-pie.css';
+import './chart-radar.css';
+import './chart-heatmap.css';
+import './chart-area.css';
+import './chart-stack.css';
+import './chart-gauge.css';
+import './chart-sparkline.css';
 export * from '../behaviors/charts.mjs';

package/dist/components/datatable.css

@@ -341,3 +341,89 @@
 @media (prefers-reduced-motion: reduce) {
   .dt-filter-panel { animation: none; }
 }
+
+/* ── 紧凑密度（32px 行高） ── */
+.datatable--compact .dt-cell { min-height: 32px; padding: 0 10px; }
+.datatable--compact .dt-cell--head { min-height: 32px; font-size: var(--density-font-size-xs); }
+
+/* ── 工具栏右侧操作按钮组 ── */
+.dt-toolbar-actions {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.dt-tool-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--token-text-faint);
+  cursor: pointer;
+  transition: color var(--icen-tx-fast), border-color var(--icen-tx-fast), background var(--icen-tx-fast);
+}
+.dt-tool-btn:hover {
+  color: var(--token-text);
+  border-color: var(--token-accent);
+  background: var(--token-fill-1);
+}
+
+/* ── 列宽拖拽手柄 ── */
+.dt-resize {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 6px;
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+  z-index: 1;
+}
+.dt-resize::after {
+  content: '';
+  position: absolute;
+  top: 25%;
+  bottom: 25%;
+  right: 2px;
+  width: 2px;
+  border-radius: 1px;
+  background: transparent;
+  transition: background var(--icen-tx-fast);
+}
+.dt-resize:hover::after,
+.dt-resize:active::after {
+  background: var(--token-accent);
+}
+.dt-cell--head { /* 确保相对定位供 resize 绝对定位 */ }
+
+/* ── 冻结列（左固定 sticky） ── */
+.datatable--frozen .dt-cell--frozen {
+  position: sticky;
+  z-index: var(--z-raised);
+  background: var(--token-surface);
+}
+.datatable--frozen .dt-row--head .dt-cell--frozen {
+  z-index: calc(var(--z-raised) + 1);
+  background: var(--token-bg-soft);
+}
+.datatable--frozen .dt-row.is-selected .dt-cell--frozen {
+  background: var(--token-accent-subtle);
+}
+.datatable--frozen .dt-body .dt-row:hover .dt-cell--frozen {
+  background: var(--token-fill-1);
+}
+.datatable--frozen .dt-row.is-selected:hover .dt-cell--frozen {
+  background: color-mix(in srgb, var(--token-accent-subtle) 82%, var(--token-fill-1));
+}
+
+/* ── 行状态类（rowClassName 产出） ── */
+.dt-row--danger { background: color-mix(in srgb, var(--token-error) 6%, transparent) !important; }
+.dt-row--danger:hover { background: color-mix(in srgb, var(--token-error) 10%, transparent) !important; }
+.dt-row--warning { background: color-mix(in srgb, var(--token-warning) 6%, transparent) !important; }
+.dt-row--success { background: color-mix(in srgb, var(--token-success) 6%, transparent) !important; }