@icen.ai/ui 0.9.0 → 0.10.0

package/dist/components/chart-heatmap.css

@@ -1,92 +1,98 @@
-/*
- * @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）。
- */
+@layer icen.components {
+/*
+ * @icen.ai/ui — Component: chart-heatmap（热力图 / 贡献图专属样式）
+ * 依赖：charts.css（基座 --chart-tone）
+ *
+ * DOM 由 behaviors/charts.ts 的 renderHeatmap 构建：
+ *   .icen-chart-heatmap > .icen-chart-heatmap-grid > .icen-chart-heatmap-cell[data-icen-level=0-4][.is-blank]
+ *                  > .icen-chart-heatmap-legend
+ * 7 行（周一→周日）× N 周列，5 档色阶（data-icen-level 0-4）。
+ *
+ * RTL 豁免（guard 文件级白名单 scripts/guard/rtl.ts）：热力图格子按列号物理百分比定位
+ * （贡献图坐标系），RTL 不镜像。
+ */
+
+.icen-chart-heatmap {
+  display: flex;
+  flex-direction: column;
+  gap: var(--icen-density-space-xs);
+}
+.icen-chart-heatmap-grid {
+  display: grid;
+  grid-template-rows: repeat(7, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  gap: 3px;
+  width: 100%;
+}
+.icen-chart-heatmap-cell {
+  aspect-ratio: 1;
+  border-radius: 2px;
 /* guard:allow-radius 微构件（bar/dot/track/指示器等图形级，不属容器圆角面） */
+  background: var(--icen-token-fill-2);
+}
+.icen-chart-heatmap-cell.is-blank { background: transparent; }
+.icen-chart-heatmap-cell[data-icen-level='1'] { background: color-mix(in srgb, var(--chart-tone, var(--icen-token-accent)) 28%, var(--icen-token-fill-2)); }
+.icen-chart-heatmap-cell[data-icen-level='2'] { background: color-mix(in srgb, var(--chart-tone, var(--icen-token-accent)) 50%, var(--icen-token-fill-2)); }
+.icen-chart-heatmap-cell[data-icen-level='3'] { background: color-mix(in srgb, var(--chart-tone, var(--icen-token-accent)) 74%, var(--icen-token-fill-2)); }
+.icen-chart-heatmap-cell[data-icen-level='4'] { background: var(--chart-tone, var(--icen-token-accent)); }
+.icen-chart-heatmap-cell:not(.is-blank):hover {
+  outline: 1px solid var(--chart-tone, var(--icen-token-accent));
+  outline-offset: 0;
+}
+.icen-chart-heatmap-legend {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 3px;
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-text-faint);
+}
+.icen-chart-heatmap-legend .icen-chart-heatmap-cell {
+  width: 10px;
+  height: 10px;
+  aspect-ratio: auto;
+}
+.icen-chart-heatmap-legend > span:first-child { margin-right: 2px; }
+.icen-chart-heatmap-legend > span:last-child { margin-left: 2px; }
+
+/* ── 贡献日历（renderCalendar）：月份标签 + 星期列 + 周格 ──
+ * 布局 grid：左列星期标签（一/三/五/日），右列自上而下 月份行 / 周格 / 图例。
+ * 月份标签按周列定位：left = col / columns * 100%。 */
+.icen-chart-calendar {
+  display: grid;
+  grid-template-columns: 14px 1fr;
+  grid-template-rows: 14px auto auto;
+  column-gap: 4px;
+  row-gap: 3px;
+}
+.icen-chart-calendar-months {
+  grid-column: 2;
+  position: relative;
+  font-size: var(--icen-density-font-size-2xs);
+  color: var(--icen-token-text-faint);
+}
+.icen-chart-calendar-month {
+  position: absolute;
+  top: 0;
+  left: calc(var(--col, 0) / var(--columns, 1) * 100%);
+  white-space: nowrap;
+}
+.icen-chart-calendar-weekdays {
+  grid-column: 1;
+  grid-row: 2;
+  display: grid;
+  grid-template-rows: repeat(7, 1fr);
+  font-size: var(--icen-density-font-size-2xs);
+  color: var(--icen-token-text-faint);
+  line-height: 1;
+}
+.icen-chart-calendar .icen-chart-heatmap-grid {
+  grid-column: 2;
+  grid-row: 2;
+}
+.icen-chart-calendar .icen-chart-heatmap-legend {
+  grid-column: 2;
+  grid-row: 3;
+}
 
-.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; }
-
-/* ── 贡献日历（renderCalendar）：月份标签 + 星期列 + 周格 ──
- * 布局 grid：左列星期标签（一/三/五/日），右列自上而下 月份行 / 周格 / 图例。
- * 月份标签按周列定位：left = col / columns * 100%。 */
-.chart-calendar {
-  display: grid;
-  grid-template-columns: 14px 1fr;
-  grid-template-rows: 14px auto auto;
-  column-gap: 4px;
-  row-gap: 3px;
-}
-.chart-calendar-months {
-  grid-column: 2;
-  position: relative;
-  font-size: var(--density-font-size-2xs);
-  color: var(--token-text-faint);
-}
-.chart-calendar-month {
-  position: absolute;
-  top: 0;
-  left: calc(var(--col, 0) / var(--columns, 1) * 100%);
-  white-space: nowrap;
-}
-.chart-calendar-weekdays {
-  grid-column: 1;
-  grid-row: 2;
-  display: grid;
-  grid-template-rows: repeat(7, 1fr);
-  font-size: var(--density-font-size-2xs);
-  color: var(--token-text-faint);
-  line-height: 1;
-}
-.chart-calendar .chart-heatmap-grid {
-  grid-column: 2;
-  grid-row: 2;
-}
-.chart-calendar .chart-heatmap-legend {
-  grid-column: 2;
-  grid-row: 3;
 }

package/dist/components/chart-line.css

@@ -1,15 +1,20 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: chart-line（折线图专属样式）
  * 依赖：charts.css（基座）
  *
  * DOM 由 behaviors/charts.ts 的 renderLine 构建：
- *   .chart-line > svg[viewBox="0 0 360 150"]
- * 含面积渐变 + 网格线 + 数据点 + 底部 .chart-labels。
+ *   .icen-chart-line > svg[viewBox="0 0 360 150"]
+ * 含面积渐变 + 网格线 + 数据点 + 底部 .icen-chart-labels。
+ * spec.marks 的 SVG 标记（.icen-chart-mark-line 参考线 / .icen-chart-mark-point
+ * 标记点 + .icen-chart-mark-label 标注）直接追加进本 svg，样式属性直出（挡指针事件在基座）。
  */
 
-.chart-line > svg {
+.icen-chart-line > svg {
   display: block;
   width: 100%;
   height: 150px;
   overflow: visible;
 }
+
+}

package/dist/components/chart-pie.css

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

package/dist/components/chart-radar.css

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

package/dist/components/chart-scatter.css

@@ -1,24 +1,27 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: chart-scatter（散点/气泡图专属样式）
- * 依赖：charts.css（基座 .chart / tooltip / [data-chart-mark] 交互态）
+ * 依赖：charts.css（基座 .icen-chart / tooltip / [data-icen-chart-mark] 交互态）
  *
  * DOM 由 behaviors/charts.ts 的 renderScatter 构建：
- *   .chart-scatter > svg（360×220 viewBox，网格 + 刻度 + circle[data-chart-mark]）
+ *   .icen-chart-scatter > svg（360×220 viewBox，网格 + 刻度 + circle[data-icen-chart-mark]）
  * 气泡第三维：points[].size 映射半径 3–10；hover/点击/右键走通用层委托。
  */
 
-.chart-scatter svg {
+.icen-chart-scatter svg {
   width: 100%;
   height: auto;
   display: block;
 }
-.chart-scatter circle[data-chart-mark] {
+.icen-chart-scatter circle[data-icen-chart-mark] {
   transition: fill-opacity var(--icen-tx-fast);
 }
-.chart-scatter circle[data-chart-mark]:hover {
+.icen-chart-scatter circle[data-icen-chart-mark]:hover {
   fill-opacity: 0.85;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .chart-scatter circle[data-chart-mark] { transition: none; }
+  .icen-chart-scatter circle[data-icen-chart-mark] { transition: none; }
+}
+
 }

package/dist/components/chart-sparkline.css

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

package/dist/components/chart-stack.css

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