@icen.ai/ui 0.5.0 → 0.8.1

package/dist/registry.json

@@ -1,6 +1,6 @@
 {
   "name": "@icen.ai/ui",
-  "version": "0.5.0",
+  "version": "0.8.1",
   "tokens": [
     "colors.css",
     "style-profiles.css",
@@ -11,6 +11,10 @@
   ],
   "base": "base.css",
   "components": [
+    "ai-chat",
+    "ai-diff",
+    "ai-panel",
+    "ai-tool",
     "back-top",
     "badge",
     "breadcrumb",
@@ -23,6 +27,7 @@
     "chart-line",
     "chart-pie",
     "chart-radar",
+    "chart-scatter",
     "chart-sparkline",
     "chart-stack",
     "charts",
@@ -65,15 +70,25 @@
   ],
   "behaviors": [
     "accordion",
+    "ai-chat",
+    "ai-composer",
+    "ai-core",
+    "ai-diff",
+    "ai-panel",
+    "ai-provider",
+    "ai-tool",
+    "ai-tools",
     "back-top",
     "carousel",
     "charts",
     "command-palette",
     "context-menu",
+    "controls",
     "copy",
     "datatable",
     "date-picker",
     "dropdown",
+    "events",
     "input",
     "modal",
     "nav",
@@ -150,10 +165,21 @@
       "init": "initTagInput"
     },
     "switch": {
-      "css": "switch.css"
+      "css": "switch.css",
+      "behavior": "controls",
+      "init": "initSwitch",
+      "exports": [
+        "initSwitch"
+      ]
     },
     "segmented": {
-      "css": "segmented.css"
+      "css": "segmented.css",
+      "behavior": "controls",
+      "exports": [
+        "initInput",
+        "initSegmented",
+        "initStepper"
+      ]
     },
     "upload": {
       "css": "upload.css",
@@ -210,7 +236,12 @@
       "css": "media.css"
     },
     "rating": {
-      "css": "media.css"
+      "css": "media.css",
+      "behavior": "controls",
+      "init": "initRating",
+      "exports": [
+        "initRating"
+      ]
     },
     "kbd": {
       "css": "content.css"
@@ -246,7 +277,12 @@
       "css": "scroll-area.css"
     },
     "table": {
-      "css": "table.css"
+      "css": "table.css",
+      "behavior": "controls",
+      "init": "initTableSort",
+      "exports": [
+        "initTableSort"
+      ]
     },
     "datatable": {
       "css": "datatable.css",
@@ -269,7 +305,8 @@
         "chart-area.css",
         "chart-stack.css",
         "chart-gauge.css",
-        "chart-sparkline.css"
+        "chart-sparkline.css",
+        "chart-scatter.css"
       ],
       "behavior": "charts",
       "exports": [
@@ -282,7 +319,14 @@
         "renderRadar",
         "renderHeatmap",
         "renderSparkline",
-        "renderGauge"
+        "renderGauge",
+        "renderCalendar",
+        "renderScatter",
+        "renderChart",
+        "normalizeChartSpec",
+        "inferChartType",
+        "chartFormatValue",
+        "registerChartTone"
       ]
     },
     "chart-line": {
@@ -376,6 +420,26 @@
         "renderSparkline"
       ]
     },
+    "chart-scatter": {
+      "css": "chart-scatter.css",
+      "extraCss": [
+        "charts.css"
+      ],
+      "behavior": "charts",
+      "exports": [
+        "renderScatter"
+      ]
+    },
+    "chart-calendar": {
+      "css": "chart-heatmap.css",
+      "extraCss": [
+        "charts.css"
+      ],
+      "behavior": "charts",
+      "exports": [
+        "renderCalendar"
+      ]
+    },
     "alert": {
       "css": "feedback.css"
     },
@@ -418,10 +482,20 @@
       "css": "breadcrumb.css"
     },
     "pagination": {
-      "css": "pagination.css"
+      "css": "pagination.css",
+      "behavior": "controls",
+      "init": "initPagination",
+      "exports": [
+        "initPagination"
+      ]
     },
     "steps": {
-      "css": "steps.css"
+      "css": "steps.css",
+      "behavior": "controls",
+      "init": "initSteps",
+      "exports": [
+        "initSteps"
+      ]
     },
     "back-top": {
       "css": "back-top.css",
@@ -430,6 +504,70 @@
     },
     "layout": {
       "css": "layout.css"
+    },
+    "ai-chat": {
+      "css": "ai-chat.css",
+      "behavior": "ai-chat",
+      "init": "initAiChat"
+    },
+    "ai-message": {
+      "css": "ai-chat.css",
+      "behavior": "ai-chat",
+      "exports": [
+        "renderAiMessage",
+        "createAiStream",
+        "initAiChat"
+      ]
+    },
+    "ai-reasoning": {
+      "css": "ai-chat.css",
+      "behavior": "ai-chat",
+      "exports": [
+        "createAiStream",
+        "initAiChat"
+      ]
+    },
+    "ai-composer": {
+      "css": "ai-chat.css",
+      "behavior": "ai-composer",
+      "init": "initAiComposer"
+    },
+    "ai-tool-call": {
+      "css": "ai-tool.css",
+      "init": "initAiTool"
+    },
+    "ai-subagent": {
+      "css": "ai-tool.css",
+      "init": "initAiSubagent"
+    },
+    "ai-diff": {
+      "css": "ai-diff.css",
+      "behavior": "ai-diff",
+      "init": "initAiDiff"
+    },
+    "ai-files": {
+      "css": "ai-diff.css",
+      "behavior": "ai-diff",
+      "exports": [
+        "renderAiDiff"
+      ]
+    },
+    "ai-todo": {
+      "css": "ai-panel.css",
+      "init": "initAiTodo"
+    },
+    "ai-context": {
+      "css": "ai-panel.css",
+      "init": "initAiContext"
+    },
+    "ai-usage": {
+      "css": "ai-panel.css",
+      "behavior": "ai-panel",
+      "exports": [
+        "renderAiUsage",
+        "renderAiUsageRing",
+        "renderAiAudit"
+      ]
     }
   }
 }

package/dist/retro-effects.css

@@ -6,11 +6,16 @@
  *
  * 仅在 <html class="style-retro">（或叠加 .dark）激活时生效，对其它风格无副作用：
  *   - CRT 扫描线 + 暗角 + 颗粒噪点
- *   - 屏幕闪烁 / 抖动 / 游走扫描光
+ *   - 游走扫描光
  *   - RGB 色散 / 霓虹发光（暗色）
  *   - 像素边框 / 像素按钮 / 像素分隔线工具类
  *   - 开机自检 / 打字机光标 / 页面闪白动画
  *
+ * 作用域约定：效果类（扫描线/噪点/光标/开机行/闪白）均收在 .style-retro 下；
+ * 像素工具类（.retro-pixel-border / .retro-pixel-button / .retro-pixel-rule）
+ * 有意保持全局可用——它们是纯几何装饰，任何风格都可取用。
+ * z-index 统一走 base.css 的 --z-fx 标尺（效果层，tooltip 之上）。
+ *
  * 所有动画尊重 prefers-reduced-motion：在 reduce 下由 base.css 的全局兜底降为 0.01ms。
  */
 
@@ -24,7 +29,7 @@
   position: fixed;
   inset: 0;
   pointer-events: none;
-  z-index: 9999;
+  z-index: calc(var(--z-fx) - 1);
   opacity: 0.14;
   background:
     repeating-linear-gradient(
@@ -48,7 +53,7 @@
   position: fixed;
   inset: 0;
   pointer-events: none;
-  z-index: 9998;
+  z-index: calc(var(--z-fx) - 2);
   background:
     radial-gradient(
       ellipse at center,
@@ -58,20 +63,6 @@
   opacity: 0.55;
 }
 
-/* 屏幕闪烁（备用工具类，需要时挂在元素上） */
-@keyframes retro-flicker {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.985; }
-}
-
-/* 屏幕轻微抖动（备用工具类） */
-@keyframes retro-jitter {
-  0%, 100% { transform: translate(0, 0); }
-  25% { transform: translate(0.5px, 0); }
-  50% { transform: translate(-0.5px, 0.5px); }
-  75% { transform: translate(0, -0.5px); }
-}
-
 /* CRT 颗粒噪点 */
 @keyframes retro-grain {
   0%, 100% { background-position: 0 0; }
@@ -90,7 +81,7 @@
   position: fixed;
   inset: 0;
   pointer-events: none;
-  z-index: 9997;
+  z-index: calc(var(--z-fx) - 3);
   opacity: 0.06;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
   animation: retro-grain 0.5s steps(10) infinite;
@@ -110,9 +101,8 @@
   100% { transform: translateY(100vh); }
 }
 
-/* 游走的扫描线（偶尔闪过）—— 挂到 .style-retro 下的显式节点 */
-.style-retro .retro-scanline-beam,
-.retro-scanline-beam {
+/* 游走的扫描线（偶尔闪过）—— 仅 .style-retro 下生效 */
+.style-retro .retro-scanline-beam {
   position: fixed;
   left: 0;
   right: 0;
@@ -124,7 +114,7 @@
     transparent
   );
   pointer-events: none;
-  z-index: 9996;
+  z-index: calc(var(--z-fx) - 4);
   opacity: 0.4;
   animation: retro-scanline-slide 4s linear infinite;
 }
@@ -140,19 +130,19 @@
   100% { opacity: 0; transform: translateY(-4px); }
 }
 
-.retro-boot-line {
+.style-retro .retro-boot-line {
   opacity: 0;
   animation: retro-boot-text 0.3s steps(1) forwards;
 }
 
-.retro-boot-line:nth-child(1) { animation-delay: 0.1s; }
-.retro-boot-line:nth-child(2) { animation-delay: 0.25s; }
-.retro-boot-line:nth-child(3) { animation-delay: 0.4s; }
-.retro-boot-line:nth-child(4) { animation-delay: 0.55s; }
-.retro-boot-line:nth-child(5) { animation-delay: 0.7s; }
+.style-retro .retro-boot-line:nth-child(1) { animation-delay: 0.1s; }
+.style-retro .retro-boot-line:nth-child(2) { animation-delay: 0.25s; }
+.style-retro .retro-boot-line:nth-child(3) { animation-delay: 0.4s; }
+.style-retro .retro-boot-line:nth-child(4) { animation-delay: 0.55s; }
+.style-retro .retro-boot-line:nth-child(5) { animation-delay: 0.7s; }
 
 /* 打字机光标 */
-.retro-cursor::after {
+.style-retro .retro-cursor::after {
   content: "█";
   display: inline-block;
   margin-left: 2px;
@@ -250,15 +240,16 @@
   100% { opacity: 0; }
 }
 
-.retro-page-flash {
+.style-retro .retro-page-flash {
   position: fixed;
   inset: 0;
   pointer-events: none;
-  z-index: 10000;
+  z-index: var(--z-fx);
   background: var(--token-bg);
   opacity: 0;
 }
 
-.retro-page-flash.active {
+/* 状态类遵循全库 .is-* 规范 */
+.style-retro .retro-page-flash.is-active {
   animation: retro-flash 0.2s steps(3) forwards;
 }

package/dist/tokens/colors.css

@@ -504,6 +504,8 @@
   --token-accent-glow:    color-mix(in srgb, var(--token-accent) 8%, transparent);
   --token-line-dashed:    color-mix(in srgb, var(--token-line-soft) 60%, transparent);
   --token-overlay-bg:     color-mix(in srgb, var(--token-bg) 92%, transparent);
+  /* 睡莲粉 accent 上的文字色：深绿灰（白字在 #d59ab1 上对比度不达标） */
+  --token-on-accent:      #26302b;
 
   --token-shadow-elevated: 0 1px 2px rgba(0,0,0,.18), 0 8px 22px rgba(0,0,0,.24);
   --token-shadow-overlay:  0 2px 5px rgba(0,0,0,.24), 0 14px 36px rgba(0,0,0,.32);
@@ -841,7 +843,8 @@
   --token-accent-glow:    color-mix(in srgb, var(--token-accent) 6%, transparent);
   --token-line-dashed:    color-mix(in srgb, var(--token-line-soft) 60%, transparent);
   --token-overlay-bg:     color-mix(in srgb, var(--token-bg) 94%, transparent);
-  --token-on-accent:      #ffffff;
+  /* 松烟绿 accent 上的文字色：深墨（白字在 #7AA87E 上对比度不达标） */
+  --token-on-accent:      #1a2018;
 
   --token-shadow-elevated: 0 1px 2px rgba(0,0,0,.2), 0 4px 14px rgba(0,0,0,.22);
   --token-shadow-overlay:  0 2px 4px rgba(0,0,0,.28), 0 10px 30px rgba(0,0,0,.34);

package/dist/tokens/retro-effects.css

@@ -6,11 +6,16 @@
  *
  * 仅在 <html class="style-retro">（或叠加 .dark）激活时生效，对其它风格无副作用：
  *   - CRT 扫描线 + 暗角 + 颗粒噪点
- *   - 屏幕闪烁 / 抖动 / 游走扫描光
+ *   - 游走扫描光
  *   - RGB 色散 / 霓虹发光（暗色）
  *   - 像素边框 / 像素按钮 / 像素分隔线工具类
  *   - 开机自检 / 打字机光标 / 页面闪白动画
  *
+ * 作用域约定：效果类（扫描线/噪点/光标/开机行/闪白）均收在 .style-retro 下；
+ * 像素工具类（.retro-pixel-border / .retro-pixel-button / .retro-pixel-rule）
+ * 有意保持全局可用——它们是纯几何装饰，任何风格都可取用。
+ * z-index 统一走 base.css 的 --z-fx 标尺（效果层，tooltip 之上）。
+ *
  * 所有动画尊重 prefers-reduced-motion：在 reduce 下由 base.css 的全局兜底降为 0.01ms。
  */
 
@@ -24,7 +29,7 @@
   position: fixed;
   inset: 0;
   pointer-events: none;
-  z-index: 9999;
+  z-index: calc(var(--z-fx) - 1);
   opacity: 0.14;
   background:
     repeating-linear-gradient(
@@ -48,7 +53,7 @@
   position: fixed;
   inset: 0;
   pointer-events: none;
-  z-index: 9998;
+  z-index: calc(var(--z-fx) - 2);
   background:
     radial-gradient(
       ellipse at center,
@@ -58,20 +63,6 @@
   opacity: 0.55;
 }
 
-/* 屏幕闪烁（备用工具类，需要时挂在元素上） */
-@keyframes retro-flicker {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.985; }
-}
-
-/* 屏幕轻微抖动（备用工具类） */
-@keyframes retro-jitter {
-  0%, 100% { transform: translate(0, 0); }
-  25% { transform: translate(0.5px, 0); }
-  50% { transform: translate(-0.5px, 0.5px); }
-  75% { transform: translate(0, -0.5px); }
-}
-
 /* CRT 颗粒噪点 */
 @keyframes retro-grain {
   0%, 100% { background-position: 0 0; }
@@ -90,7 +81,7 @@
   position: fixed;
   inset: 0;
   pointer-events: none;
-  z-index: 9997;
+  z-index: calc(var(--z-fx) - 3);
   opacity: 0.06;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
   animation: retro-grain 0.5s steps(10) infinite;
@@ -110,9 +101,8 @@
   100% { transform: translateY(100vh); }
 }
 
-/* 游走的扫描线（偶尔闪过）—— 挂到 .style-retro 下的显式节点 */
-.style-retro .retro-scanline-beam,
-.retro-scanline-beam {
+/* 游走的扫描线（偶尔闪过）—— 仅 .style-retro 下生效 */
+.style-retro .retro-scanline-beam {
   position: fixed;
   left: 0;
   right: 0;
@@ -124,7 +114,7 @@
     transparent
   );
   pointer-events: none;
-  z-index: 9996;
+  z-index: calc(var(--z-fx) - 4);
   opacity: 0.4;
   animation: retro-scanline-slide 4s linear infinite;
 }
@@ -140,19 +130,19 @@
   100% { opacity: 0; transform: translateY(-4px); }
 }
 
-.retro-boot-line {
+.style-retro .retro-boot-line {
   opacity: 0;
   animation: retro-boot-text 0.3s steps(1) forwards;
 }
 
-.retro-boot-line:nth-child(1) { animation-delay: 0.1s; }
-.retro-boot-line:nth-child(2) { animation-delay: 0.25s; }
-.retro-boot-line:nth-child(3) { animation-delay: 0.4s; }
-.retro-boot-line:nth-child(4) { animation-delay: 0.55s; }
-.retro-boot-line:nth-child(5) { animation-delay: 0.7s; }
+.style-retro .retro-boot-line:nth-child(1) { animation-delay: 0.1s; }
+.style-retro .retro-boot-line:nth-child(2) { animation-delay: 0.25s; }
+.style-retro .retro-boot-line:nth-child(3) { animation-delay: 0.4s; }
+.style-retro .retro-boot-line:nth-child(4) { animation-delay: 0.55s; }
+.style-retro .retro-boot-line:nth-child(5) { animation-delay: 0.7s; }
 
 /* 打字机光标 */
-.retro-cursor::after {
+.style-retro .retro-cursor::after {
   content: "█";
   display: inline-block;
   margin-left: 2px;
@@ -250,15 +240,16 @@
   100% { opacity: 0; }
 }
 
-.retro-page-flash {
+.style-retro .retro-page-flash {
   position: fixed;
   inset: 0;
   pointer-events: none;
-  z-index: 10000;
+  z-index: var(--z-fx);
   background: var(--token-bg);
   opacity: 0;
 }
 
-.retro-page-flash.active {
+/* 状态类遵循全库 .is-* 规范 */
+.style-retro .retro-page-flash.is-active {
   animation: retro-flash 0.2s steps(3) forwards;
 }

package/dist/tokens/style-profiles.css

@@ -60,13 +60,20 @@
   --density-space-sm: 0.5rem;
   --density-space-md: 0.75rem;
   --density-space-lg: 1rem;
+  --density-space-xl: 1.5rem;
+  --density-space-2xl: 2rem;
+  --density-space-3xl: 3rem;
+  --density-space-4xl: 4rem;
   --density-input-height-sm: 28px;
   --density-input-height-md: 36px;
   --density-input-height-lg: 44px;
+  --density-font-size-2xs: 10px;
   --density-font-size-xs: 11px;
   --density-font-size-sm: 12px;
   --density-font-size-md: 13px;
   --density-font-size-lg: 14px;
+  --density-font-size-xl: 18px;
+  --density-font-size-2xl: 22px;
 
   /* ── Motion 动效 ── */
   --duration-instant: 0ms;
@@ -77,7 +84,9 @@
   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
 
-  /* ── Typography 字体 ── */
+  /* ── Typography 字体 ──
+     --line-height-heading 不在此定义：typography.css 独家拥有（icen 品牌 1.2），
+     各 .style-* profile 需要差异化时在自己的块里覆盖。 */
   --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   --font-mono-paper: ui-monospace, SFMono-Regular, 'JetBrains Mono', 'Courier New', monospace;
@@ -85,7 +94,6 @@
   --letter-spacing-body: 0;
   --letter-spacing-heading: 0;
   --line-height-body: 1.5;
-  --line-height-heading: 1.2;
 }
 
 /* ══════════════════════════════════════════════════════════════
@@ -98,13 +106,20 @@
   --density-space-sm: 0.5rem;
   --density-space-md: 0.75rem;
   --density-space-lg: 1rem;
+  --density-space-xl: 1.5rem;
+  --density-space-2xl: 2rem;
+  --density-space-3xl: 3rem;
+  --density-space-4xl: 4rem;
   --density-input-height-sm: 28px;
   --density-input-height-md: 36px;
   --density-input-height-lg: 44px;
+  --density-font-size-2xs: 10px;
   --density-font-size-xs: 11px;
   --density-font-size-sm: 12px;
   --density-font-size-md: 13px;
   --density-font-size-lg: 14px;
+  --density-font-size-xl: 18px;
+  --density-font-size-2xl: 22px;
 
   /* ── Motion ── */
   --duration-fast: 150ms;
@@ -133,13 +148,20 @@
   --density-space-sm: 0.25rem;
   --density-space-md: 0.5rem;
   --density-space-lg: 0.75rem;
+  --density-space-xl: 1rem;
+  --density-space-2xl: 1.5rem;
+  --density-space-3xl: 2rem;
+  --density-space-4xl: 3rem;
   --density-input-height-sm: 24px;
   --density-input-height-md: 32px;
   --density-input-height-lg: 40px;
+  --density-font-size-2xs: 9px;
   --density-font-size-xs: 9px;
   --density-font-size-sm: 10px;
   --density-font-size-md: 11px;
   --density-font-size-lg: 12px;
+  --density-font-size-xl: 14px;
+  --density-font-size-2xl: 16px;
 
   /* ── Motion：像素风瞬间切换 ── */
   --duration-fast: 0ms;

package/dist/tokens/typography.css

@@ -2,6 +2,7 @@
  * @icen.ai/ui — Typography Tokens（icen canonical）
  * 美学基调：等宽数字精密感 × 衬线书卷气（宋体标题）
  * 默认（:root）即 icen 品牌形态；.style-modern 显式回退 system-ui 栈（见 style-profiles.css）
+ * 工具类：.font-math（数字密集区，"Numeric Math" 数学字体 + tabular-nums）
  */
 
 /* ── 数学/等宽数字字体（数字密集区的精密感） ── */
@@ -24,6 +25,7 @@
   --font-heading: 'Songti SC', 'STSong', 'Noto Serif SC', 'Source Han Serif SC', SimSun, serif;
   --font-cjk: var(--font-heading);
   --line-height-body: 1.7;
+  /* 独家定义（style-profiles.css 的 :root 不再重复；profile 差异化在各 .style-* 块覆盖） */
   --line-height-heading: 1.2;
 }