@icen.ai/ui 0.4.0 → 0.8.0

package/dist/registry.json

@@ -1,6 +1,6 @@
 {
   "name": "@icen.ai/ui",
-  "version": "0.4.0",
+  "version": "0.8.0",
   "tokens": [
     "colors.css",
     "style-profiles.css",
@@ -11,6 +11,12 @@
   ],
   "base": "base.css",
   "components": [
+    "ai-chat",
+    "ai-diff",
+    "ai-panel",
+    "ai-tool",
+    "back-top",
+    "badge",
     "breadcrumb",
     "btn",
     "card",
@@ -21,11 +27,15 @@
     "chart-line",
     "chart-pie",
     "chart-radar",
+    "chart-scatter",
     "chart-sparkline",
     "chart-stack",
     "charts",
+    "command-palette",
     "content",
+    "copy",
     "datatable",
+    "date-picker",
     "empty",
     "feedback",
     "form",
@@ -35,39 +45,57 @@
     "menu",
     "modal",
     "nav",
+    "notification",
     "pagination",
     "panel",
     "pill",
     "popover",
+    "scroll-area",
     "segmented",
     "select",
     "sidebar",
     "slider",
+    "split-pane",
     "stat",
     "steps",
     "switch",
     "table",
     "tabs",
     "tag-input",
+    "tag",
     "toast",
+    "toolbar",
     "tooltip",
     "upload"
   ],
   "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",
     "copy",
     "datatable",
+    "date-picker",
     "dropdown",
     "input",
     "modal",
     "nav",
+    "notification",
     "popover",
     "select",
     "sidebar",
     "slider",
+    "split-pane",
     "tabs",
     "tag-input",
     "theme",
@@ -85,6 +113,9 @@
     "pill": {
       "css": "pill.css"
     },
+    "tag": {
+      "css": "tag.css"
+    },
     "tabs": {
       "css": "tabs.css",
       "behavior": "tabs",
@@ -100,6 +131,17 @@
         "toast"
       ]
     },
+    "toolbar": {
+      "css": "toolbar.css"
+    },
+    "split-pane": {
+      "css": "split-pane.css",
+      "behavior": "split-pane",
+      "init": "initSplitPane"
+    },
+    "form": {
+      "css": "form.css"
+    },
     "input": {
       "css": "input.css",
       "behavior": "input",
@@ -124,13 +166,22 @@
       "css": "switch.css"
     },
     "segmented": {
-      "css": "segmented.css"
+      "css": "segmented.css",
+      "behavior": "input",
+      "exports": [
+        "initInput"
+      ]
     },
     "upload": {
       "css": "upload.css",
       "behavior": "upload",
       "init": "initUpload"
     },
+    "date-picker": {
+      "css": "date-picker.css",
+      "behavior": "date-picker",
+      "init": "initDatePicker"
+    },
     "modal": {
       "css": "modal.css",
       "behavior": "modal",
@@ -158,6 +209,11 @@
     "tooltip": {
       "css": "tooltip.css"
     },
+    "command-palette": {
+      "css": "command-palette.css",
+      "behavior": "command-palette",
+      "init": "initCommandPalette"
+    },
     "card": {
       "css": "card.css"
     },
@@ -200,6 +256,12 @@
       "behavior": "carousel",
       "init": "initCarousel"
     },
+    "badge": {
+      "css": "badge.css"
+    },
+    "scroll-area": {
+      "css": "scroll-area.css"
+    },
     "table": {
       "css": "table.css"
     },
@@ -224,7 +286,8 @@
         "chart-area.css",
         "chart-stack.css",
         "chart-gauge.css",
-        "chart-sparkline.css"
+        "chart-sparkline.css",
+        "chart-scatter.css"
       ],
       "behavior": "charts",
       "exports": [
@@ -237,7 +300,13 @@
         "renderRadar",
         "renderHeatmap",
         "renderSparkline",
-        "renderGauge"
+        "renderGauge",
+        "renderCalendar",
+        "renderScatter",
+        "renderChart",
+        "normalizeChartSpec",
+        "inferChartType",
+        "chartFormatValue"
       ]
     },
     "chart-line": {
@@ -331,6 +400,27 @@
         "renderSparkline"
       ]
     },
+    "chart-scatter": {
+      "css": "chart-scatter.css",
+      "extraCss": [
+        "charts.css"
+      ],
+      "behavior": "charts",
+      "exports": [
+        "renderScatter"
+      ]
+    },
+    "chart-calendar": {
+      "css": "chart-calendar.css",
+      "extraCss": [
+        "charts.css",
+        "chart-heatmap.css"
+      ],
+      "behavior": "charts",
+      "exports": [
+        "renderCalendar"
+      ]
+    },
     "alert": {
       "css": "feedback.css"
     },
@@ -346,6 +436,19 @@
     "skeleton": {
       "css": "feedback.css"
     },
+    "copy": {
+      "css": "copy.css",
+      "behavior": "copy",
+      "init": "initCopy"
+    },
+    "notification": {
+      "css": "notification.css",
+      "behavior": "notification",
+      "init": "initNotification",
+      "exports": [
+        "notify"
+      ]
+    },
     "nav": {
       "css": "nav.css",
       "behavior": "nav",
@@ -365,8 +468,77 @@
     "steps": {
       "css": "steps.css"
     },
+    "back-top": {
+      "css": "back-top.css",
+      "behavior": "back-top",
+      "init": "initBackTop"
+    },
     "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-call.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

@@ -11,6 +11,11 @@
  *   - 像素边框 / 像素按钮 / 像素分隔线工具类
  *   - 开机自检 / 打字机光标 / 页面闪白动画
  *
+ * 作用域约定：效果类（扫描线/噪点/光标/开机行/闪白）均收在 .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,
@@ -90,7 +95,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 +115,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 +128,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 +144,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 +254,15 @@
   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 {
+.style-retro .retro-page-flash.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

@@ -11,6 +11,11 @@
  *   - 像素边框 / 像素按钮 / 像素分隔线工具类
  *   - 开机自检 / 打字机光标 / 页面闪白动画
  *
+ * 作用域约定：效果类（扫描线/噪点/光标/开机行/闪白）均收在 .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,
@@ -90,7 +95,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 +115,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 +128,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 +144,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 +254,15 @@
   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 {
+.style-retro .retro-page-flash.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;
@@ -98,13 +105,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 +147,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.css

@@ -507,6 +507,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);
@@ -844,7 +846,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);
@@ -1312,13 +1315,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;
@@ -1350,13 +1360,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;
@@ -1385,13 +1402,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;