@icen.ai/ui 0.9.0 → 0.11.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@icen.ai/ui",
-  "version": "0.9.0",
-  "description": "Icen Design System — 设计 tokens（6 预设 × 明暗）+ 无框架组件 CSS/行为 JS + AI 原生组件族（7 态状态机/多模态/定价审计）+ 图表通用层（ChartSpec 纯 JSON）+ AI 工具体系",
+  "version": "0.11.0",
+  "description": "Icen Design System — 设计 tokens（6 主题 × 4 原语 × 明暗）+ 无框架组件 CSS/行为 JS + AI 原生组件族（7 态状态机/多模态/定价审计）+ 图表通用层（ChartSpec 纯 JSON）+ AI 工具体系",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/icen-ai/ui.git"
@@ -10,12 +10,14 @@
   "type": "module",
   "exports": {
     ".": "./dist/index.mjs",
+    "./react": "./dist/react.mjs",
+    "./vue": "./dist/vue.mjs",
     "./behaviors/*": "./dist/behaviors/*.mjs",
     "./kit/*": "./dist/components/*.mjs",
     "./tokens.css": "./dist/tokens.css",
+    "./tokens/dtcg.json": "./dist/tokens/dtcg.json",
     "./ui.css": "./dist/ui.css",
     "./base.css": "./dist/base.css",
-    "./retro-effects.css": "./dist/retro-effects.css",
     "./tokens/*": "./dist/tokens/*",
     "./components/*": "./dist/components/*",
     "./registry.json": "./dist/registry.json"
@@ -26,23 +28,69 @@
   "sideEffects": [
     "**/*.css"
   ],
+  "engines": {
+    "node": ">=18"
+  },
+  "packageManager": "bun@1.3.5",
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "vue": ">=3.3"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
   "files": [
     "dist",
     "AGENTS.md",
-    "docs"
+    "docs/spec"
   ],
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "tsup && bun scripts/dts-ext.mjs && bun scripts/build-css.ts",
-    "prepublishOnly": "bun run build"
+    "build": "tsup && bun scripts/react-use-client.mjs && bun scripts/dts-ext.mjs && bun scripts/build-css.ts && bun scripts/dtcg.mjs && bun scripts/design-tokens.mjs",
+    "dtcg": "bun scripts/dtcg.mjs",
+    "design-tokens": "bun scripts/design-tokens.mjs",
+    "guard": "bun scripts/guard/index.ts",
+    "contracts": "bun scripts/contracts.ts --check",
+    "contracts:update": "bun scripts/contracts.ts --write",
+    "contracts:diff": "bun scripts/contracts.ts --diff",
+    "size": "bun scripts/size.ts",
+    "check:pkg": "bunx publint && bunx @arethetypeswrong/cli --pack . --ignore-rules no-resolution cjs-resolves-to-esm",
+    "prepublishOnly": "bun run build",
+    "pretest:e2e": "cd site && bun run build",
+    "test": "bun test",
+    "test:coverage": "bun scripts/coverage.ts",
+    "test:e2e": "playwright test",
+    "test:e2e:update": "playwright test --update-snapshots",
+    "verify": "bunx tsc --noEmit && bun run guard && bun test && bun run build && bun run size",
+    "colors": "bun scripts/theme-colors.mjs"
   },
   "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@happy-dom/global-registrator": "^20.14.5",
+    "@playwright/test": "^1.63.0",
     "@types/node": "^20.14.0",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "axe-core": "^4.14.0",
+    "happy-dom": "^20.14.5",
+    "publint": "^0.3.25",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
     "tsup": "^8.3.0",
-    "typescript": "^5.5.0"
+    "typescript": "^5.5.0",
+    "vue": "^3.5.43"
   },
   "keywords": [
     "design-system",
@@ -52,4 +100,4 @@
     "css",
     "tokens"
   ]
-}
+}

package/dist/retro-effects.css

@@ -1,255 +0,0 @@
-/*
- * @icen.ai/ui — Retro 效果层（按需引入）
- *
- * 与 tokens.css 不同，本文件 **不** 进 tokens.css 拼合，需显式 import：
- *   import '@icen.ai/ui/retro-effects.css';
- *
- * 仅在 <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。
- */
-
-/* ══════════════════════════════════════════════════════════════
-   CRT 显示器效果
-   ══════════════════════════════════════════════════════════════ */
-
-/* CRT 扫描线 overlay */
-.style-retro body::before {
-  content: "";
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  z-index: calc(var(--z-fx) - 1);
-  opacity: 0.14;
-  background:
-    repeating-linear-gradient(
-      0deg,
-      transparent,
-      transparent 2px,
-      rgba(0, 0, 0, 0.35) 2px,
-      rgba(0, 0, 0, 0.35) 4px
-    );
-  mix-blend-mode: multiply;
-}
-
-.style-retro.dark body::before {
-  opacity: 0.22;
-  mix-blend-mode: screen;
-}
-
-/* CRT 暗角 + 轻微曲面 */
-.style-retro body::after {
-  content: "";
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  z-index: calc(var(--z-fx) - 2);
-  background:
-    radial-gradient(
-      ellipse at center,
-      transparent 55%,
-      rgba(0, 0, 0, 0.18) 100%
-    );
-  opacity: 0.55;
-}
-
-/* CRT 颗粒噪点 */
-@keyframes retro-grain {
-  0%, 100% { background-position: 0 0; }
-  10% { background-position: -5% -10%; }
-  20% { background-position: -15% 5%; }
-  30% { background-position: 7% -25%; }
-  40% { background-position: -5% 25%; }
-  50% { background-position: -15% 10%; }
-  60% { background-position: 15% 0%; }
-  70% { background-position: 0% 15%; }
-  80% { background-position: 3% 35%; }
-  90% { background-position: -10% 10%; }
-}
-
-.style-retro .retro-crt-grain {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  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;
-}
-
-/* ══════════════════════════════════════════════════════════════
-   全局动画关键帧 + 游走扫描光
-   ══════════════════════════════════════════════════════════════ */
-
-@keyframes retro-blink {
-  0%, 49% { opacity: 1; }
-  50%, 100% { opacity: 0; }
-}
-
-@keyframes retro-scanline-slide {
-  0% { transform: translateY(-100%); }
-  100% { transform: translateY(100vh); }
-}
-
-/* 游走的扫描线（偶尔闪过）—— 仅 .style-retro 下生效 */
-.style-retro .retro-scanline-beam {
-  position: fixed;
-  left: 0;
-  right: 0;
-  height: 4px;
-  background: linear-gradient(
-    180deg,
-    transparent,
-    color-mix(in srgb, var(--token-accent) 30%, transparent),
-    transparent
-  );
-  pointer-events: none;
-  z-index: calc(var(--z-fx) - 4);
-  opacity: 0.4;
-  animation: retro-scanline-slide 4s linear infinite;
-}
-
-/* ══════════════════════════════════════════════════════════════
-   开机自检 / 打字机效果
-   ══════════════════════════════════════════════════════════════ */
-
-@keyframes retro-boot-text {
-  0% { opacity: 0; transform: translateY(4px); }
-  10% { opacity: 1; transform: translateY(0); }
-  90% { opacity: 1; transform: translateY(0); }
-  100% { opacity: 0; transform: translateY(-4px); }
-}
-
-.style-retro .retro-boot-line {
-  opacity: 0;
-  animation: retro-boot-text 0.3s steps(1) forwards;
-}
-
-.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; }
-
-/* 打字机光标 */
-.style-retro .retro-cursor::after {
-  content: "█";
-  display: inline-block;
-  margin-left: 2px;
-  color: var(--token-accent);
-  animation: retro-blink 1s step-end infinite;
-}
-
-/* ══════════════════════════════════════════════════════════════
-   RGB 色散 / 霓虹发光（暗色下尤其出彩）
-   ══════════════════════════════════════════════════════════════ */
-
-.style-retro.dark .retro-glow {
-  text-shadow:
-    -1px 0 0 rgba(255, 0, 0, 0.4),
-    1px 0 0 rgba(0, 255, 255, 0.4),
-    0 0 2px var(--token-accent),
-    0 0 8px var(--token-accent);
-}
-
-.style-retro.dark .retro-glow-cold {
-  text-shadow:
-    -1px 0 0 rgba(255, 0, 0, 0.4),
-    1px 0 0 rgba(0, 255, 255, 0.4),
-    0 0 2px var(--token-accent-cold),
-    0 0 8px var(--token-accent-cold);
-}
-
-/* 亮色模式下发光退化为单层硬投影，保持像素感而不刺眼 */
-.style-retro:not(.dark) .retro-glow {
-  text-shadow:
-    1px 1px 0 color-mix(in srgb, var(--token-accent) 30%, transparent);
-}
-
-/* ══════════════════════════════════════════════════════════════
-   像素边框工具类（任意风格下可用，但与 retro 最契合）
-   ══════════════════════════════════════════════════════════════ */
-
-.retro-pixel-border {
-  border: 2px solid var(--token-line);
-  box-shadow:
-    2px 2px 0 var(--token-line-strong),
-    inset 2px 2px 0 var(--token-surface-strong),
-    inset -2px -2px 0 var(--token-line-soft);
-}
-
-.retro-pixel-border-accent {
-  border: 2px solid var(--token-accent);
-  box-shadow:
-    2px 2px 0 var(--token-accent-cold),
-    inset 2px 2px 0 color-mix(in srgb, var(--token-accent) 20%, transparent),
-    inset -2px -2px 0 color-mix(in srgb, var(--token-accent) 40%, transparent);
-}
-
-/* 像素按钮：硬投影 + 按下内移 */
-.retro-pixel-button {
-  position: relative;
-  border: 2px solid var(--token-line-strong);
-  box-shadow:
-    inset -2px -2px 0 var(--token-line-soft),
-    inset 2px 2px 0 var(--token-surface-strong),
-    2px 2px 0 var(--token-line);
-  transition: none;
-}
-
-.retro-pixel-button:active {
-  transform: translate(2px, 2px);
-  box-shadow:
-    inset -2px -2px 0 var(--token-line-soft),
-    inset 2px 2px 0 var(--token-surface-strong);
-}
-
-/* ══════════════════════════════════════════════════════════════
-   选中文字 / 像素分隔线
-   ══════════════════════════════════════════════════════════════ */
-
-.style-retro ::selection {
-  background: var(--token-accent);
-  color: var(--token-on-accent);
-}
-
-.retro-pixel-rule {
-  height: 0;
-  border: 0;
-  border-top: 2px dashed var(--token-line);
-  image-rendering: pixelated;
-}
-
-/* ══════════════════════════════════════════════════════════════
-   页面切换 / 闪白效果
-   ══════════════════════════════════════════════════════════════ */
-
-@keyframes retro-flash {
-  0% { opacity: 0; }
-  10% { opacity: 0.8; }
-  100% { opacity: 0; }
-}
-
-.style-retro .retro-page-flash {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  z-index: var(--z-fx);
-  background: var(--token-bg);
-  opacity: 0;
-}
-
-/* 状态类遵循全库 .is-* 规范 */
-.style-retro .retro-page-flash.is-active {
-  animation: retro-flash 0.2s steps(3) forwards;
-}

package/dist/tokens/retro-effects.css

@@ -1,255 +0,0 @@
-/*
- * @icen.ai/ui — Retro 效果层（按需引入）
- *
- * 与 tokens.css 不同，本文件 **不** 进 tokens.css 拼合，需显式 import：
- *   import '@icen.ai/ui/retro-effects.css';
- *
- * 仅在 <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。
- */
-
-/* ══════════════════════════════════════════════════════════════
-   CRT 显示器效果
-   ══════════════════════════════════════════════════════════════ */
-
-/* CRT 扫描线 overlay */
-.style-retro body::before {
-  content: "";
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  z-index: calc(var(--z-fx) - 1);
-  opacity: 0.14;
-  background:
-    repeating-linear-gradient(
-      0deg,
-      transparent,
-      transparent 2px,
-      rgba(0, 0, 0, 0.35) 2px,
-      rgba(0, 0, 0, 0.35) 4px
-    );
-  mix-blend-mode: multiply;
-}
-
-.style-retro.dark body::before {
-  opacity: 0.22;
-  mix-blend-mode: screen;
-}
-
-/* CRT 暗角 + 轻微曲面 */
-.style-retro body::after {
-  content: "";
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  z-index: calc(var(--z-fx) - 2);
-  background:
-    radial-gradient(
-      ellipse at center,
-      transparent 55%,
-      rgba(0, 0, 0, 0.18) 100%
-    );
-  opacity: 0.55;
-}
-
-/* CRT 颗粒噪点 */
-@keyframes retro-grain {
-  0%, 100% { background-position: 0 0; }
-  10% { background-position: -5% -10%; }
-  20% { background-position: -15% 5%; }
-  30% { background-position: 7% -25%; }
-  40% { background-position: -5% 25%; }
-  50% { background-position: -15% 10%; }
-  60% { background-position: 15% 0%; }
-  70% { background-position: 0% 15%; }
-  80% { background-position: 3% 35%; }
-  90% { background-position: -10% 10%; }
-}
-
-.style-retro .retro-crt-grain {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  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;
-}
-
-/* ══════════════════════════════════════════════════════════════
-   全局动画关键帧 + 游走扫描光
-   ══════════════════════════════════════════════════════════════ */
-
-@keyframes retro-blink {
-  0%, 49% { opacity: 1; }
-  50%, 100% { opacity: 0; }
-}
-
-@keyframes retro-scanline-slide {
-  0% { transform: translateY(-100%); }
-  100% { transform: translateY(100vh); }
-}
-
-/* 游走的扫描线（偶尔闪过）—— 仅 .style-retro 下生效 */
-.style-retro .retro-scanline-beam {
-  position: fixed;
-  left: 0;
-  right: 0;
-  height: 4px;
-  background: linear-gradient(
-    180deg,
-    transparent,
-    color-mix(in srgb, var(--token-accent) 30%, transparent),
-    transparent
-  );
-  pointer-events: none;
-  z-index: calc(var(--z-fx) - 4);
-  opacity: 0.4;
-  animation: retro-scanline-slide 4s linear infinite;
-}
-
-/* ══════════════════════════════════════════════════════════════
-   开机自检 / 打字机效果
-   ══════════════════════════════════════════════════════════════ */
-
-@keyframes retro-boot-text {
-  0% { opacity: 0; transform: translateY(4px); }
-  10% { opacity: 1; transform: translateY(0); }
-  90% { opacity: 1; transform: translateY(0); }
-  100% { opacity: 0; transform: translateY(-4px); }
-}
-
-.style-retro .retro-boot-line {
-  opacity: 0;
-  animation: retro-boot-text 0.3s steps(1) forwards;
-}
-
-.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; }
-
-/* 打字机光标 */
-.style-retro .retro-cursor::after {
-  content: "█";
-  display: inline-block;
-  margin-left: 2px;
-  color: var(--token-accent);
-  animation: retro-blink 1s step-end infinite;
-}
-
-/* ══════════════════════════════════════════════════════════════
-   RGB 色散 / 霓虹发光（暗色下尤其出彩）
-   ══════════════════════════════════════════════════════════════ */
-
-.style-retro.dark .retro-glow {
-  text-shadow:
-    -1px 0 0 rgba(255, 0, 0, 0.4),
-    1px 0 0 rgba(0, 255, 255, 0.4),
-    0 0 2px var(--token-accent),
-    0 0 8px var(--token-accent);
-}
-
-.style-retro.dark .retro-glow-cold {
-  text-shadow:
-    -1px 0 0 rgba(255, 0, 0, 0.4),
-    1px 0 0 rgba(0, 255, 255, 0.4),
-    0 0 2px var(--token-accent-cold),
-    0 0 8px var(--token-accent-cold);
-}
-
-/* 亮色模式下发光退化为单层硬投影，保持像素感而不刺眼 */
-.style-retro:not(.dark) .retro-glow {
-  text-shadow:
-    1px 1px 0 color-mix(in srgb, var(--token-accent) 30%, transparent);
-}
-
-/* ══════════════════════════════════════════════════════════════
-   像素边框工具类（任意风格下可用，但与 retro 最契合）
-   ══════════════════════════════════════════════════════════════ */
-
-.retro-pixel-border {
-  border: 2px solid var(--token-line);
-  box-shadow:
-    2px 2px 0 var(--token-line-strong),
-    inset 2px 2px 0 var(--token-surface-strong),
-    inset -2px -2px 0 var(--token-line-soft);
-}
-
-.retro-pixel-border-accent {
-  border: 2px solid var(--token-accent);
-  box-shadow:
-    2px 2px 0 var(--token-accent-cold),
-    inset 2px 2px 0 color-mix(in srgb, var(--token-accent) 20%, transparent),
-    inset -2px -2px 0 color-mix(in srgb, var(--token-accent) 40%, transparent);
-}
-
-/* 像素按钮：硬投影 + 按下内移 */
-.retro-pixel-button {
-  position: relative;
-  border: 2px solid var(--token-line-strong);
-  box-shadow:
-    inset -2px -2px 0 var(--token-line-soft),
-    inset 2px 2px 0 var(--token-surface-strong),
-    2px 2px 0 var(--token-line);
-  transition: none;
-}
-
-.retro-pixel-button:active {
-  transform: translate(2px, 2px);
-  box-shadow:
-    inset -2px -2px 0 var(--token-line-soft),
-    inset 2px 2px 0 var(--token-surface-strong);
-}
-
-/* ══════════════════════════════════════════════════════════════
-   选中文字 / 像素分隔线
-   ══════════════════════════════════════════════════════════════ */
-
-.style-retro ::selection {
-  background: var(--token-accent);
-  color: var(--token-on-accent);
-}
-
-.retro-pixel-rule {
-  height: 0;
-  border: 0;
-  border-top: 2px dashed var(--token-line);
-  image-rendering: pixelated;
-}
-
-/* ══════════════════════════════════════════════════════════════
-   页面切换 / 闪白效果
-   ══════════════════════════════════════════════════════════════ */
-
-@keyframes retro-flash {
-  0% { opacity: 0; }
-  10% { opacity: 0.8; }
-  100% { opacity: 0; }
-}
-
-.style-retro .retro-page-flash {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  z-index: var(--z-fx);
-  background: var(--token-bg);
-  opacity: 0;
-}
-
-/* 状态类遵循全库 .is-* 规范 */
-.style-retro .retro-page-flash.is-active {
-  animation: retro-flash 0.2s steps(3) forwards;
-}