@icen.ai/ui 0.1.0

package/README.md

@@ -0,0 +1,58 @@
+# @icen.ai/ui — Icen Design System
+
+icen.ai 全生态的统一设计系统：**设计 tokens（6 色彩预设 × 明暗双模 × 风格配置）+ 无框架组件 CSS + 行为 JS**。工程形态与 `@icen.ai/cli` 一致（Bun + TS + tsup + ESM + MIT）。
+
+- 色彩预设：`clay`（默认，陶土橙 × 纸白 = icen 品牌）/ `piano` / `art` / `vangogh` / `ink` / `retro`，各含 `.dark` 变体
+- 风格配置：`.style-modern` / `.style-retro` / `.style-terminal`（几何/密度/动效/字体 token，与色彩正交）
+- 组件：btn / panel / pill / form / tabs / stat / table / toast（全部消费 `--token-*`，框架无关）
+- 行为：`theme`（预设/明暗/风格切换 + localStorage + 防闪烁语义）、`tabs`、`toast`、`copy`
+
+## 使用
+
+```bash
+bun add @icen.ai/ui
+```
+
+```css
+@import '@icen.ai/ui/tokens.css';
+@import '@icen.ai/ui/ui.css';   /* tokens + base + 全部组件；也可按 ./components/btn.css 单引 */
+```
+
+```html
+<html class="piano dark">       <!-- 预设类 + 可选 dark；clay 为 :root 默认 -->
+```
+
+```ts
+import { initTheme, toggleDark, setTheme, initTabs, initCopy, toast } from '@icen.ai/ui';
+initTheme();   // 尽早调用（或内联同步脚本防闪烁，见 accounts Base.astro）
+initTabs();    // [data-tabs] > [data-tab] + [data-tab-panel] 契约
+initCopy();    // .copy-btn[data-copy] 委托
+toast.ok('已保存');
+```
+
+## 构建
+
+```bash
+bun install
+bun run build   # tsup（behaviors → dist/*.mjs）+ scripts/build-css.ts（css → dist/）
+```
+
+产物：`dist/tokens.css`（三 token 文件拼合）、`dist/ui.css`（tokens+base+组件）、`dist/base.css`、`dist/tokens/*`、`dist/components/*`、`dist/behaviors/*.mjs`、`dist/index.mjs`、`dist/registry.json`。
+
+## 目录
+
+```
+src/tokens/colors.css          # 6 预设 × 明暗（移植自 opengal 的 Icen Design System；
+                               #   clay 基值已原地校准到 accounts.icen.ai 视觉）
+src/tokens/style-profiles.css  # density/motion/typography + .style-*
+src/tokens/typography.css      # icen canonical 字体栈（IBM Plex Mono + CJK 宋体）
+src/base.css                   # 元素基线 + 无箭头细滚动条（全部消费 token）
+src/components/*.css           # 8 个无框架组件
+src/behaviors/*.ts             # theme / tabs / toast / copy
+scripts/build-css.ts           # CSS 产物构建（拼合 + registry.json）
+site/                          # 文档站骨架（ui.icen.ai，独立 Astro 应用）
+```
+
+## 消费方接入（accounts 模式）
+
+accounts 目前以 **vendor** 方式消费：`bun run sync:ui`（accounts 仓库内）把本仓库 `dist/` 复制到 `src/styles/vendor/icen/`，布局里 import 对应 CSS/JS。npm 发布后可改为包引入。

package/dist/base.css

@@ -0,0 +1,55 @@
+/*
+ * @icen.ai/ui — Base（元素基线 + 滚动条）
+ * 全部消费 --token-*；任何 preset/明暗/style profile 下自洽。
+ * 在 tokens 之后、components 之前引入。
+ */
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html, body { margin: 0; padding: 0; }
+
+body {
+  background: var(--token-bg);
+  color: var(--token-text);
+  font-size: 14px;
+  min-height: 100vh;
+}
+
+a { color: var(--token-accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+code, pre {
+  font-family: var(--font-mono);
+  background: var(--token-bg-soft);
+  border-radius: var(--radius-xs);
+}
+code { padding: 1px 5px; }
+pre { padding: 12px 14px; overflow-x: auto; }
+pre code { padding: 0; background: none; }
+
+button { font: inherit; }
+img { max-width: 100%; }
+
+::selection {
+  background: color-mix(in srgb, var(--token-accent) 25%, transparent);
+}
+
+/* ── 全局滚动条：细薄、无上下箭头、贴 token ── */
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--token-text) 16%, transparent);
+  border-radius: 999px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--token-accent) 50%, transparent);
+}
+::-webkit-scrollbar-button,
+::-webkit-scrollbar-button:single-button { display: none; width: 0; height: 0; }
+::-webkit-scrollbar-corner { background: transparent; }
+html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--token-text) 16%, transparent) transparent; }
+
+/* ── 通用工具类 ── */
+.mono { font-family: var(--font-mono); }
+.dim { color: var(--token-text-muted); }
+.faint { color: var(--token-text-faint); }

package/dist/behaviors/copy.mjs

@@ -0,0 +1,62 @@
+// src/behaviors/copy.ts
+var initialized = /* @__PURE__ */ new WeakSet();
+var flashing = /* @__PURE__ */ new WeakMap();
+function legacyCopy(text) {
+  const ta = document.createElement("textarea");
+  ta.value = text;
+  ta.setAttribute("readonly", "");
+  ta.style.position = "fixed";
+  ta.style.opacity = "0";
+  document.body.appendChild(ta);
+  ta.select();
+  let ok = false;
+  try {
+    ok = document.execCommand("copy");
+  } catch {
+    ok = false;
+  }
+  ta.remove();
+  return ok;
+}
+async function copyText(text) {
+  try {
+    if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+  } catch {
+  }
+  return legacyCopy(text);
+}
+function flashDone(btn) {
+  const prev = flashing.get(btn);
+  if (prev) window.clearTimeout(prev.timer);
+  const original = prev ? prev.original : btn.textContent;
+  btn.textContent = "\u5DF2\u590D\u5236";
+  btn.classList.add("done");
+  const timer = window.setTimeout(() => {
+    btn.textContent = original;
+    btn.classList.remove("done");
+    flashing.delete(btn);
+  }, 1400);
+  flashing.set(btn, { original, timer });
+}
+function onClick(root, ev) {
+  const target = ev.target;
+  if (!(target instanceof Element)) return;
+  const btn = target.closest(".copy-btn[data-copy]");
+  if (!btn || !root.contains(btn)) return;
+  const text = btn.getAttribute("data-copy") ?? "";
+  void copyText(text).then((ok) => {
+    if (ok) flashDone(btn);
+  });
+}
+function initCopy(root = document) {
+  if (typeof document === "undefined") return;
+  if (initialized.has(root)) return;
+  initialized.add(root);
+  root.addEventListener("click", (ev) => onClick(root, ev));
+}
+export {
+  initCopy
+};

package/dist/behaviors/tabs.mjs

@@ -0,0 +1,63 @@
+// src/behaviors/tabs.ts
+function tabNames(container) {
+  return Array.from(container.querySelectorAll("[data-tab]")).map((t) => t.getAttribute("data-tab")).filter((n) => n !== null);
+}
+function currentHash() {
+  return window.location.hash.replace(/^#/, "");
+}
+function activate(container, name, writeHash) {
+  let matched = false;
+  container.querySelectorAll("[data-tab]").forEach((t) => {
+    const on = t.getAttribute("data-tab") === name;
+    if (on) matched = true;
+    t.classList.toggle("active", on);
+  });
+  if (!matched) return;
+  container.querySelectorAll("[data-tab-panel]").forEach((p) => {
+    p.hidden = p.getAttribute("data-tab-panel") !== name;
+  });
+  if (writeHash && typeof window !== "undefined") {
+    window.history.replaceState(null, "", `#${name}`);
+  }
+}
+function setup(container) {
+  const el = container;
+  if (el.__icenTabsInit) return;
+  el.__icenTabsInit = true;
+  const useHash = container.hasAttribute("data-tabs-hash");
+  const names = tabNames(container);
+  if (names.length === 0) return;
+  container.addEventListener("click", (ev) => {
+    const target = ev.target;
+    if (!(target instanceof Element)) return;
+    const btn = target.closest("[data-tab]");
+    if (!btn || btn.closest("[data-tabs]") !== container) return;
+    const name = btn.getAttribute("data-tab");
+    if (name) activate(container, name, useHash);
+  });
+  let initial;
+  if (useHash) {
+    const h = currentHash();
+    if (names.includes(h)) initial = h;
+  } else {
+    const n = container.querySelector("[data-tab].active")?.getAttribute("data-tab");
+    if (n && names.includes(n)) initial = n;
+  }
+  activate(container, initial ?? names[0], false);
+  if (useHash && typeof window !== "undefined") {
+    window.addEventListener("hashchange", () => {
+      const h = currentHash();
+      if (names.includes(h)) activate(container, h, false);
+    });
+  }
+}
+function initTabs(root = document) {
+  if (typeof document === "undefined") return;
+  const containers = [];
+  if (root instanceof Element && root.matches("[data-tabs]")) containers.push(root);
+  containers.push(...Array.from(root.querySelectorAll("[data-tabs]")));
+  for (const c of containers) setup(c);
+}
+export {
+  initTabs
+};

package/dist/behaviors/theme.mjs

@@ -0,0 +1,80 @@
+// src/behaviors/theme.ts
+var PRESETS = ["clay", "piano", "art", "vangogh", "ink", "retro"];
+var STYLES = ["modern", "retro", "terminal"];
+var STORAGE_KEY = "icen.ui.theme";
+var FALLBACK = { preset: "clay", dark: false, style: "modern" };
+function isBrowser() {
+  return typeof document !== "undefined";
+}
+function getDefaultTheme() {
+  if (!isBrowser() || typeof window.matchMedia !== "function") {
+    return { ...FALLBACK };
+  }
+  return {
+    preset: "clay",
+    dark: window.matchMedia("(prefers-color-scheme: dark)").matches,
+    style: "modern"
+  };
+}
+function isThemeState(v) {
+  if (typeof v !== "object" || v === null) return false;
+  const t = v;
+  return typeof t.preset === "string" && PRESETS.includes(t.preset) && typeof t.dark === "boolean" && typeof t.style === "string" && STYLES.includes(t.style);
+}
+function getTheme() {
+  if (!isBrowser()) return getDefaultTheme();
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    if (!raw) return getDefaultTheme();
+    const parsed = JSON.parse(raw);
+    if (!isThemeState(parsed)) return getDefaultTheme();
+    return { preset: parsed.preset, dark: parsed.dark, style: parsed.style };
+  } catch {
+    return getDefaultTheme();
+  }
+}
+function applyTheme(t) {
+  if (!isBrowser()) return;
+  const cls = document.documentElement.classList;
+  for (const p of PRESETS) cls.remove(p);
+  for (const s of STYLES) cls.remove(`style-${s}`);
+  cls.remove("dark");
+  cls.add(t.preset);
+  if (t.dark) cls.add("dark");
+  cls.add(`style-${t.style}`);
+}
+function setTheme(patch) {
+  const merged = { ...getTheme(), ...patch };
+  const next = {
+    preset: PRESETS.includes(merged.preset) ? merged.preset : FALLBACK.preset,
+    dark: merged.dark === true,
+    style: STYLES.includes(merged.style) ? merged.style : FALLBACK.style
+  };
+  applyTheme(next);
+  if (isBrowser()) {
+    try {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+    } catch {
+    }
+  }
+  return next;
+}
+function toggleDark() {
+  return setTheme({ dark: !getTheme().dark });
+}
+function initTheme() {
+  const t = getTheme();
+  applyTheme(t);
+  return t;
+}
+export {
+  PRESETS,
+  STORAGE_KEY,
+  STYLES,
+  applyTheme,
+  getDefaultTheme,
+  getTheme,
+  initTheme,
+  setTheme,
+  toggleDark
+};

package/dist/behaviors/toast.mjs

@@ -0,0 +1,35 @@
+// src/behaviors/toast.ts
+function ensureContainer() {
+  const existing = document.body.querySelector(".toast-container");
+  if (existing) return existing;
+  const el = document.createElement("div");
+  el.className = "toast-container";
+  document.body.appendChild(el);
+  return el;
+}
+function show(message, kind = "info", ms = 2600) {
+  if (typeof document === "undefined") return;
+  const el = document.createElement("div");
+  el.className = kind === "info" ? "toast" : `toast ${kind}`;
+  el.textContent = message;
+  ensureContainer().appendChild(el);
+  let removed = false;
+  const remove = () => {
+    if (removed) return;
+    removed = true;
+    el.remove();
+  };
+  window.setTimeout(() => {
+    el.classList.add("leaving");
+    el.addEventListener("transitionend", remove, { once: true });
+    window.setTimeout(remove, 400);
+  }, ms);
+}
+var toast = Object.assign(show, {
+  ok: (message, ms) => show(message, "ok", ms),
+  err: (message, ms) => show(message, "err", ms),
+  warn: (message, ms) => show(message, "warn", ms)
+});
+export {
+  toast
+};

package/dist/components/btn.css

@@ -0,0 +1,23 @@
+/*
+ * @icen.ai/ui — Component: btn（按钮）
+ * 用法：<button class="btn btn-primary"> / .btn-danger / .btn-sm / .btn-block
+ */
+
+.btn {
+  display: inline-block; padding: 10px 22px;
+  background: var(--token-surface); color: var(--token-text);
+  border: 1px solid var(--token-line-soft); border-radius: var(--radius-sm);
+  font-family: var(--font-mono); font-size: 13px; letter-spacing: 1px;
+  cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
+}
+.btn:hover { border-color: var(--token-accent); }
+.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.btn-primary { background: var(--token-accent); border-color: var(--token-accent); color: var(--token-on-accent, #fff); }
+.btn-primary:hover { background: var(--token-accent-deep); border-color: var(--token-accent-deep); }
+
+.btn-danger { color: var(--token-error); border-color: color-mix(in srgb, var(--token-error) 35%, transparent); }
+.btn-danger:hover { border-color: var(--token-error); }
+
+.btn-block { display: block; width: 100%; text-align: center; }
+.btn-sm { padding: 6px 14px; font-size: 12px; }

package/dist/components/form.css

@@ -0,0 +1,31 @@
+/*
+ * @icen.ai/ui — Component: form（表单字段/输入/错误与成功提示）
+ */
+
+.form-field { margin-bottom: 18px; }
+.form-label { display: block; font-size: 12px; color: var(--token-text-muted); margin-bottom: 6px; letter-spacing: 1px; }
+.form-input {
+  width: 100%; padding: 11px 14px;
+  background: var(--token-bg); color: var(--token-text);
+  border: 1px solid var(--token-line-soft); border-radius: var(--radius-sm);
+  font-family: var(--font-mono); font-size: 14px;
+  outline: none; transition: border-color var(--duration-fast) var(--ease-out);
+}
+.form-input:focus { border-color: var(--token-accent); }
+.form-input::placeholder { color: var(--token-text-faint); }
+
+.form-error {
+  background: color-mix(in srgb, var(--token-error) 7%, transparent); color: var(--token-error);
+  border: 1px solid color-mix(in srgb, var(--token-error) 25%, transparent); border-radius: var(--radius-sm);
+  padding: 10px 14px; font-size: 12.5px; margin-bottom: 16px;
+  font-family: var(--font-heading);
+}
+.form-ok {
+  background: color-mix(in srgb, var(--token-success) 8%, transparent); color: var(--token-success);
+  border: 1px solid color-mix(in srgb, var(--token-success) 25%, transparent); border-radius: var(--radius-sm);
+  padding: 10px 14px; font-size: 12.5px; margin-bottom: 16px;
+  font-family: var(--font-heading);
+}
+
+/* 页面级横幅（与表单提示同族，用于操作结果/引导提示） */
+.banner-ok, .banner-err { margin-bottom: 20px; }

package/dist/components/panel.css

@@ -0,0 +1,19 @@
+/*
+ * @icen.ai/ui — Component: panel（白卡片容器 + 标题栏）
+ * 用法：<div class="panel-block"><div class="panel-title"><span>标题</span></div> …内容… </div>
+ */
+
+.panel-block {
+  background: var(--token-surface);
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--token-shadow-elevated);
+  margin-bottom: 24px;
+  overflow: hidden;
+}
+.panel-title {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 14px 20px; border-bottom: 1px solid var(--token-line-soft);
+  font-size: 12px; letter-spacing: 2px; color: var(--token-text-muted);
+  text-transform: uppercase;
+}

package/dist/components/pill.css

@@ -0,0 +1,28 @@
+/*
+ * @icen.ai/ui — Component: pill（状态徽章）
+ * 用法：<span class="pill ok|warn|bad|accent">文本</span>
+ * 语义色纪律：仅绿/黄/红 + 品牌 accent。
+ */
+
+.pill {
+  display: inline-block; padding: 2px 10px; border-radius: var(--radius-full);
+  font-size: 11px; letter-spacing: 1px;
+  background: var(--token-surface-strong); color: var(--token-text-muted);
+  border: 1px solid var(--token-line-soft);
+}
+.pill.ok {
+  color: var(--token-success); border-color: color-mix(in srgb, var(--token-success) 35%, transparent);
+  background: color-mix(in srgb, var(--token-success) 7%, transparent);
+}
+.pill.warn {
+  color: var(--token-warning); border-color: color-mix(in srgb, var(--token-warning) 35%, transparent);
+  background: color-mix(in srgb, var(--token-warning) 7%, transparent);
+}
+.pill.bad {
+  color: var(--token-error); border-color: color-mix(in srgb, var(--token-error) 35%, transparent);
+  background: color-mix(in srgb, var(--token-error) 7%, transparent);
+}
+.pill.accent {
+  color: var(--token-accent-deep); border-color: color-mix(in srgb, var(--token-accent) 40%, transparent);
+  background: color-mix(in srgb, var(--token-accent) 7%, transparent);
+}

package/dist/components/stat.css

@@ -0,0 +1,18 @@
+/*
+ * @icen.ai/ui — Component: stat（指标卡）
+ * 用法：<div class="stat-grid"><div class="stat-card"><div class="stat-num">0</div><div class="stat-label">用户总数</div></div>…
+ */
+
+.stat-grid {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 14px; margin-bottom: 24px;
+}
+.stat-card {
+  background: var(--token-surface); border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-lg); padding: 14px 16px;
+  box-shadow: var(--token-shadow-elevated);
+}
+.stat-num { font-size: 24px; font-weight: 700; line-height: 1.25; word-break: break-all; }
+.stat-num.accent { color: var(--token-accent); }
+.stat-num.warn { color: var(--token-warning); }
+.stat-label { color: var(--token-text-faint); font-size: 11px; letter-spacing: 1px; margin-top: 2px; }

package/dist/components/table.css

@@ -0,0 +1,19 @@
+/*
+ * @icen.ai/ui — Component: table（数据表）
+ * 用法：<div class="table-wrap"><table class="admin-table">…
+ * .table-wrap 负责窄屏横向滚动（滚动条样式见 base.css）；行内操作列用 .ops。
+ */
+
+.table-wrap { overflow-x: auto; }
+.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.admin-table th {
+  text-align: left; font-weight: 400; font-size: 11px; letter-spacing: 1px;
+  color: var(--token-text-faint); padding: 10px 14px;
+  border-bottom: 1px solid var(--token-line-soft); white-space: nowrap;
+}
+.admin-table td { padding: 10px 14px; border-bottom: 1px solid var(--token-line-soft); vertical-align: middle; }
+.admin-table tbody tr:last-child td { border-bottom: 0; }
+.admin-table tbody tr:hover { background: var(--token-surface-strong); }
+.admin-table tbody tr.row-link { cursor: pointer; }
+.admin-table .ops { white-space: nowrap; text-align: right; }
+.admin-table .ops .btn-sm { margin-left: 6px; }

package/dist/components/tabs.css

@@ -0,0 +1,26 @@
+/*
+ * @icen.ai/ui — Component: tabs（分区导航）
+ * .page-tabs > .page-tab（页面内分区，active 加粗）
+ * .admin-tabs > a（顶部子导航）
+ * 窄屏换行不滚动（overflow 纪律：tab 条永不出现滚动条）。
+ */
+
+.page-tabs, .admin-tabs {
+  display: flex; gap: 2px; flex-wrap: wrap;
+  border-bottom: 1px solid var(--token-line-soft); margin-bottom: 26px;
+}
+.page-tab {
+  background: none; border: 0; cursor: pointer;
+  padding: 9px 14px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 1px;
+  color: var(--token-text-muted); border-bottom: 2px solid transparent;
+  margin-bottom: -1px; white-space: nowrap;
+}
+.page-tab:hover { color: var(--token-accent); }
+.page-tab.active { color: var(--token-accent); border-bottom-color: var(--token-accent); font-weight: 700; }
+
+.admin-tabs a {
+  padding: 9px 14px; font-size: 13px; color: var(--token-text-muted);
+  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
+}
+.admin-tabs a:hover { color: var(--token-accent); text-decoration: none; }
+.admin-tabs a.active { color: var(--token-accent); border-bottom-color: var(--token-accent); }

package/dist/components/toast.css

@@ -0,0 +1,27 @@
+/*
+ * @icen.ai/ui — Component: toast（轻提示，与 behaviors/toast 配套）
+ * 容器固定在右下角，左缘 3px 语义色条；滑入动画用 motion token。
+ */
+
+.toast-container {
+  position: fixed; right: 20px; bottom: 20px; z-index: 9999;
+  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
+  pointer-events: none;
+}
+.toast {
+  pointer-events: auto;
+  background: var(--token-surface); color: var(--token-text);
+  border: 1px solid var(--token-line-soft); border-left: 3px solid var(--token-line-strong);
+  border-radius: var(--radius-sm); box-shadow: var(--token-shadow-overlay);
+  padding: 11px 16px; font-size: 13px; max-width: 360px;
+  animation: icen-toast-in var(--duration-slow) var(--ease-out);
+}
+.toast.ok { border-left-color: var(--token-success); }
+.toast.err { border-left-color: var(--token-error); }
+.toast.warn { border-left-color: var(--token-warning); }
+.toast.leaving { opacity: 0; transform: translateY(8px); transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out); }
+
+@keyframes icen-toast-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}