@icen.ai/ui 0.2.0 → 0.3.0

package/dist/registry.json

@@ -1,11 +1,14 @@
 {
   "name": "@icen.ai/ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "tokens": [
     "colors.css",
     "style-profiles.css",
     "typography.css"
   ],
+  "tokensExtras": [
+    "retro-effects.css"
+  ],
   "base": "base.css",
   "components": [
     "breadcrumb",
@@ -13,6 +16,7 @@
     "card",
     "charts",
     "content",
+    "datatable",
     "empty",
     "feedback",
     "form",
@@ -46,6 +50,7 @@
     "charts",
     "context-menu",
     "copy",
+    "datatable",
     "dropdown",
     "input",
     "modal",
@@ -60,5 +65,195 @@
     "toast",
     "tree",
     "upload"
-  ]
+  ],
+  "slugs": {
+    "btn": {
+      "css": "btn.css"
+    },
+    "panel": {
+      "css": "panel.css"
+    },
+    "pill": {
+      "css": "pill.css"
+    },
+    "tabs": {
+      "css": "tabs.css",
+      "behavior": "tabs",
+      "init": "initTabs"
+    },
+    "stat": {
+      "css": "stat.css"
+    },
+    "table": {
+      "css": "table.css"
+    },
+    "toast": {
+      "css": "toast.css",
+      "behavior": "toast",
+      "exports": [
+        "toast"
+      ]
+    },
+    "input": {
+      "css": "input.css",
+      "behavior": "input",
+      "init": "initInput"
+    },
+    "select": {
+      "css": "select.css",
+      "behavior": "select",
+      "init": "initSelect"
+    },
+    "slider": {
+      "css": "slider.css",
+      "behavior": "slider",
+      "init": "initSlider"
+    },
+    "tag-input": {
+      "css": "tag-input.css",
+      "behavior": "tag-input",
+      "init": "initTagInput"
+    },
+    "switch": {
+      "css": "switch.css"
+    },
+    "segmented": {
+      "css": "segmented.css"
+    },
+    "upload": {
+      "css": "upload.css",
+      "behavior": "upload",
+      "init": "initUpload"
+    },
+    "modal": {
+      "css": "modal.css",
+      "behavior": "modal",
+      "init": "initModal"
+    },
+    "dropdown": {
+      "css": "menu.css",
+      "behavior": "dropdown",
+      "init": "initDropdown"
+    },
+    "context-menu": {
+      "css": "menu.css",
+      "behavior": "context-menu",
+      "init": "initContextMenu"
+    },
+    "popover": {
+      "css": "popover.css",
+      "behavior": "popover",
+      "exports": [
+        "openPopover",
+        "closePopover",
+        "computePopoverLayout"
+      ]
+    },
+    "tooltip": {
+      "css": "tooltip.css"
+    },
+    "card": {
+      "css": "card.css"
+    },
+    "empty": {
+      "css": "empty.css"
+    },
+    "alert": {
+      "css": "feedback.css"
+    },
+    "result": {
+      "css": "feedback.css"
+    },
+    "progress": {
+      "css": "feedback.css"
+    },
+    "spinner": {
+      "css": "feedback.css"
+    },
+    "skeleton": {
+      "css": "feedback.css"
+    },
+    "avatar": {
+      "css": "media.css"
+    },
+    "media-card": {
+      "css": "media.css"
+    },
+    "rating": {
+      "css": "media.css"
+    },
+    "kbd": {
+      "css": "content.css"
+    },
+    "list": {
+      "css": "content.css"
+    },
+    "accordion": {
+      "css": "content.css",
+      "behavior": "accordion",
+      "init": "initAccordion"
+    },
+    "timeline": {
+      "css": "content.css"
+    },
+    "desc": {
+      "css": "content.css"
+    },
+    "tree": {
+      "css": "content.css",
+      "behavior": "tree",
+      "init": "initTree"
+    },
+    "carousel": {
+      "css": "media.css",
+      "behavior": "carousel",
+      "init": "initCarousel"
+    },
+    "charts": {
+      "css": "charts.css",
+      "behavior": "charts",
+      "exports": [
+        "renderVBar",
+        "renderHBar",
+        "renderStack",
+        "renderDonut",
+        "renderLine",
+        "renderHeatmap",
+        "renderSparkline",
+        "renderGauge"
+      ]
+    },
+    "datatable": {
+      "css": "datatable.css",
+      "extraCss": [
+        "menu.css"
+      ],
+      "behavior": "datatable",
+      "exports": [
+        "createTable"
+      ]
+    },
+    "nav": {
+      "css": "nav.css",
+      "behavior": "nav",
+      "init": "initNav"
+    },
+    "sidebar": {
+      "css": "sidebar.css",
+      "behavior": "sidebar",
+      "init": "initSidebar"
+    },
+    "breadcrumb": {
+      "css": "breadcrumb.css"
+    },
+    "pagination": {
+      "css": "pagination.css"
+    },
+    "steps": {
+      "css": "steps.css"
+    },
+    "layout": {
+      "css": "layout.css"
+    }
+  }
 }

package/dist/retro-effects.css

@@ -0,0 +1,264 @@
+/*
+ * @icen.ai/ui — Retro 效果层（按需引入）
+ *
+ * 与 tokens.css 不同，本文件 **不** 进 tokens.css 拼合，需显式 import：
+ *   import '@icen.ai/ui/retro-effects.css';
+ *
+ * 仅在 <html class="style-retro">（或叠加 .dark）激活时生效，对其它风格无副作用：
+ *   - CRT 扫描线 + 暗角 + 颗粒噪点
+ *   - 屏幕闪烁 / 抖动 / 游走扫描光
+ *   - RGB 色散 / 霓虹发光（暗色）
+ *   - 像素边框 / 像素按钮 / 像素分隔线工具类
+ *   - 开机自检 / 打字机光标 / 页面闪白动画
+ *
+ * 所有动画尊重 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: 9999;
+  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: 9998;
+  background:
+    radial-gradient(
+      ellipse at center,
+      transparent 55%,
+      rgba(0, 0, 0, 0.18) 100%
+    );
+  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; }
+  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: 9997;
+  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,
+.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: 9996;
+  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); }
+}
+
+.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; }
+
+/* 打字机光标 */
+.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; }
+}
+
+.retro-page-flash {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 10000;
+  background: var(--token-bg);
+  opacity: 0;
+}
+
+.retro-page-flash.active {
+  animation: retro-flash 0.2s steps(3) forwards;
+}

package/dist/tokens/colors.css

@@ -1,10 +1,15 @@
 /*
  * Icen Design System — 色彩 Tokens
  *
- * 5 体系 × 2 模式 = 10 套完整配色
- * 每套: 12 base + 4 glow + 8 derived + 8 semantic + 8 fill + 4 border + 2 shadow + n bridge
+ * 6 预设 × 2 模式 = 12 套完整配色
+ *   clay（默认）/ piano / art / vangogh / ink / retro
  *
- * 用法: import "./colors.css";
+ * 每套包含：
+ *   12 base + 2 glow + 6 derived + 6 semantic + 4 fill + 2 shadow + 3 outline
+ *   + depth 层级（canvas/sidebar/panel/card/control）+ scrollbar + bridge 别名
+ *
+ * 用法: import "./colors.css";  —— 挂在 <html> 的 preset 类决定 base 取值，
+ *                                .dark 类切换明暗，二者正交组合。
  */
 
 /* ══════════════════════════════════════════════════════════════
@@ -1137,6 +1142,16 @@
   --token-shadow-card: 0 1px 2px color-mix(in srgb, var(--token-text) 5%, transparent), 0 6px 18px color-mix(in srgb, var(--token-text) 5%, transparent);
   --token-shadow-inset: inset 0 1px 1px color-mix(in srgb, var(--token-surface) 42%, transparent), inset 0 -1px 1px color-mix(in srgb, var(--token-text) 4%, transparent);
   --token-top-highlight: color-mix(in srgb, var(--token-surface) 36%, transparent);
+
+  /* ── Scrollbar ──
+     由 base.css 的全局滚动条消费；每个预设可在自己的块里覆盖这 5 个 token，
+     以表达品牌色差（如 piano 用金、ink 用青）。retro/terminal 风格在
+     style-profiles.css 里另有像素化硬覆盖。 */
+  --token-scrollbar-size: 8px;
+  --token-scrollbar-track: transparent;
+  --token-scrollbar-thumb: color-mix(in srgb, var(--token-text) 16%, transparent);
+  --token-scrollbar-thumb-hover: color-mix(in srgb, var(--token-accent) 50%, transparent);
+  --token-scrollbar-button: transparent;
 }
 
 .dark {
@@ -1219,93 +1234,6 @@
   --token-top-highlight: color-mix(in srgb, var(--token-surface) 18%, transparent);
 }
 
-/* ── Workbench Chrome Tokens ──
-   Shared spatial hierarchy for Studio and Creation editors. These sit on top
-   of theme depth tokens so light/dark and style profiles keep their own voice
-   while still exposing clear IDE-like regions. */
-:root {
-  --token-workbench-canvas: color-mix(in srgb, var(--token-bg-soft) 78%, var(--token-line-soft) 22%);
-  --token-workbench-sidebar: color-mix(in srgb, var(--token-bg) 76%, var(--token-surface) 24%);
-  --token-workbench-editor: color-mix(in srgb, var(--token-bg) 82%, var(--token-surface) 18%);
-  --token-workbench-panel: color-mix(in srgb, var(--token-card) 82%, var(--token-surface) 18%);
-  --token-workbench-panel-strong: color-mix(in srgb, var(--token-card-strong) 78%, var(--token-surface) 22%);
-  --token-workbench-chrome: color-mix(in srgb, var(--token-workbench-panel) 86%, var(--token-surface) 14%);
-  --token-workbench-rail: color-mix(in srgb, var(--token-sidebar) 84%, var(--token-bg) 16%);
-  --token-workbench-gutter: color-mix(in srgb, var(--token-line-soft) 30%, transparent);
-  --token-workbench-edge: color-mix(in srgb, var(--token-text) 10%, transparent);
-  --token-workbench-edge-soft: color-mix(in srgb, var(--token-text) 7%, transparent);
-  --token-workbench-shadow: 0 1px 1px color-mix(in srgb, var(--token-text) 3%, transparent), 0 8px 22px color-mix(in srgb, var(--token-text) 4%, transparent);
-  --token-workbench-shadow-inset: inset 0 1px 0 color-mix(in srgb, var(--token-surface) 28%, transparent);
-  --token-editor-paper: #f5efe5;
-  --token-editor-paper-soft: color-mix(in srgb, var(--token-editor-paper) 88%, var(--token-bg-soft) 12%);
-  --token-editor-paper-chrome: color-mix(in srgb, var(--token-editor-paper) 92%, var(--token-surface) 8%);
-  --token-editor-paper-edge: color-mix(in srgb, var(--token-text) 7%, transparent);
-}
-
-.dark {
-  --token-workbench-canvas: color-mix(in srgb, var(--token-bg) 72%, black 28%);
-  --token-workbench-sidebar: color-mix(in srgb, var(--token-bg-soft) 72%, black 28%);
-  --token-workbench-editor: color-mix(in srgb, var(--token-bg) 84%, black 16%);
-  --token-workbench-panel: color-mix(in srgb, var(--token-panel) 82%, black 18%);
-  --token-workbench-panel-strong: color-mix(in srgb, var(--token-card-strong) 82%, black 18%);
-  --token-workbench-chrome: color-mix(in srgb, var(--token-workbench-panel) 78%, black 22%);
-  --token-workbench-rail: color-mix(in srgb, var(--token-sidebar) 76%, black 24%);
-  --token-workbench-gutter: color-mix(in srgb, var(--token-line-soft) 44%, transparent);
-  --token-workbench-edge: color-mix(in srgb, var(--token-text) 11%, transparent);
-  --token-workbench-edge-soft: color-mix(in srgb, var(--token-text) 8%, transparent);
-  --token-workbench-shadow: 0 1px 1px rgba(0,0,0,.16), 0 10px 26px rgba(0,0,0,.18);
-  --token-workbench-shadow-inset: inset 0 1px 0 color-mix(in srgb, var(--token-text) 4%, transparent);
-  --token-editor-paper: #26211b;
-  --token-editor-paper-soft: color-mix(in srgb, var(--token-editor-paper) 88%, var(--token-bg-soft) 12%);
-  --token-editor-paper-chrome: color-mix(in srgb, var(--token-editor-paper) 90%, var(--token-surface-strong) 10%);
-  --token-editor-paper-edge: color-mix(in srgb, var(--token-text) 8%, transparent);
-}
-
-.piano {
-  --token-editor-paper: #fbf8ef;
-}
-
-.piano.dark {
-  --token-editor-paper: #1d1b17;
-}
-
-.art {
-  --token-editor-paper: #e9f2ed;
-}
-
-.art.dark {
-  --token-editor-paper: #203a34;
-}
-
-.vangogh {
-  --token-editor-paper: #eee5bf;
-}
-
-.vangogh.dark {
-  --token-editor-paper: #172742;
-}
-
-.ink {
-  --token-editor-paper: #fbf8f1;
-}
-
-.ink.dark {
-  --token-editor-paper: #1b221e;
-}
-
-.retro {
-  --token-editor-paper: #f4f4ea;
-}
-
-.retro.dark {
-  --token-editor-paper: #24243f;
-}
-
-.style-retro {
-  --token-workbench-shadow: var(--token-shadow-card);
-  --token-workbench-shadow-inset: var(--token-shadow-inset);
-}
-
 /* ── 动画 ── */
 @keyframes blink {
   0%, 100% { opacity: 1; }