@icen.ai/ui 0.8.0 → 0.8.1

package/dist/behaviors/toast.mjs

@@ -18,10 +18,40 @@ function ensureContainer() {
 }
 var KIND_CLASS = {
   ok: "toast--success",
+  success: "toast--success",
   err: "toast--error",
+  error: "toast--error",
   warn: "toast--warning",
   info: "toast--info"
 };
+var CLOSE_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>';
+function stripUnsafeSvg(el) {
+  for (const attr of Array.from(el.attributes)) {
+    if (attr.name.toLowerCase().startsWith("on")) el.removeAttribute(attr.name);
+  }
+  for (const child of Array.from(el.children)) {
+    const tag = child.tagName.toLowerCase();
+    if (tag === "script" || tag === "foreignobject") child.remove();
+    else stripUnsafeSvg(child);
+  }
+}
+function sanitizeSvgIcon(source) {
+  if (!source.trimStart().startsWith("<svg")) return null;
+  try {
+    const doc = new DOMParser().parseFromString(source, "image/svg+xml");
+    const svg = doc.documentElement;
+    if (!svg || svg.tagName.toLowerCase() !== "svg") return null;
+    stripUnsafeSvg(svg);
+    return document.importNode(svg, true);
+  } catch {
+    return null;
+  }
+}
+var closeSvgCache = null;
+function closeSvg() {
+  closeSvgCache ??= sanitizeSvgIcon(CLOSE_SVG);
+  return closeSvgCache ? closeSvgCache.cloneNode(true) : null;
+}
 function scheduleRemove(el) {
   el.classList.add("is-leaving");
   let done = false;
@@ -48,12 +78,23 @@ function trimStack(container) {
   }
 }
 function show(message, kind = "info", opts = {}) {
-  if (!isBrowser()) return;
-  const { ms, actionLabel, onAction } = opts;
+  if (!isBrowser()) return { dismiss() {
+  } };
+  const { ms, actionLabel, onAction, icon, closable, progress } = opts;
   const container = ensureContainer();
   const el = document.createElement("div");
   el.className = `toast ${KIND_CLASS[kind]}`;
-  el.setAttribute("role", kind === "err" ? "alert" : "status");
+  el.setAttribute("role", kind === "err" || kind === "error" ? "alert" : "status");
+  if (icon) {
+    const svg = sanitizeSvgIcon(icon);
+    if (svg) {
+      const iconWrap = document.createElement("span");
+      iconWrap.className = "toast-icon";
+      iconWrap.setAttribute("aria-hidden", "true");
+      iconWrap.appendChild(svg);
+      el.appendChild(iconWrap);
+    }
+  }
   const msgNode = document.createElement("span");
   msgNode.className = "toast-msg";
   msgNode.textContent = message;
@@ -66,16 +107,39 @@ function show(message, kind = "info", opts = {}) {
     actionBtn.textContent = actionLabel;
     el.appendChild(actionBtn);
   }
-  container.appendChild(el);
-  trimStack(container);
+  const duration = ms ?? (actionLabel ? ACTION_MS : DEFAULT_MS);
+  let timer = 0;
   let removed = false;
   const remove = () => {
     if (removed) return;
     removed = true;
+    if (timer) window.clearTimeout(timer);
     scheduleRemove(el);
   };
-  const duration = ms ?? (actionLabel ? ACTION_MS : DEFAULT_MS);
-  const timer = window.setTimeout(remove, duration);
+  if (closable) {
+    const closeBtn = document.createElement("button");
+    closeBtn.type = "button";
+    closeBtn.className = "toast-close";
+    closeBtn.setAttribute("aria-label", "\u5173\u95ED");
+    const svg = closeSvg();
+    if (svg) closeBtn.appendChild(svg);
+    else closeBtn.textContent = "\xD7";
+    closeBtn.addEventListener("click", remove);
+    el.appendChild(closeBtn);
+  }
+  if (progress) {
+    const bar = document.createElement("div");
+    bar.className = "toast-progress";
+    bar.setAttribute("aria-hidden", "true");
+    const fill = document.createElement("div");
+    fill.className = "toast-progress-fill";
+    fill.style.animationDuration = `${duration}ms`;
+    bar.appendChild(fill);
+    el.appendChild(bar);
+  }
+  container.appendChild(el);
+  trimStack(container);
+  timer = window.setTimeout(remove, duration);
   if (actionBtn && onAction) {
     actionBtn.addEventListener("click", () => {
       window.clearTimeout(timer);
@@ -84,11 +148,14 @@ function show(message, kind = "info", opts = {}) {
       remove();
     });
   }
+  return { dismiss: remove };
 }
 var toast = Object.assign(
   (message, kind = "info", ms) => show(message, kind, { ms }),
   {
+    success: (message, ms) => show(message, "success", { ms }),
     ok: (message, ms) => show(message, "ok", { ms }),
+    error: (message, ms) => show(message, "error", { ms }),
     err: (message, ms) => show(message, "err", { ms }),
     warn: (message, ms) => show(message, "warn", { ms }),
     info: (message, ms) => show(message, "info", { ms }),

package/dist/behaviors/tree.d.mts

@@ -1,4 +1,7 @@
-/** 为 root 下每棵 .tree 初始化（root 自身是 .tree 也算）。 */
-declare function initTree(root?: ParentNode): void;
+/**
+ * 为 root 下每棵 .tree 初始化（root 自身是 .tree 也算）。
+ * 返回销毁函数：移除本次挂上的容器监听并复位幂等标记（销毁后可重新 init）。SSR 下返回 no-op。
+ */
+declare function initTree(root?: ParentNode): () => void;
 
 export { initTree };

package/dist/behaviors/tree.mjs

@@ -1,12 +1,19 @@
+// src/behaviors/events.ts
+function emitIcen(source, type, detail) {
+  return source.dispatchEvent(
+    new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable: true })
+  );
+}
+
 // src/behaviors/tree.ts
 function setup(tree) {
   const el = tree;
-  if (el.__icenTreeInit) return;
+  if (el.__icenTreeInit) return void 0;
   el.__icenTreeInit = true;
   tree.querySelectorAll(".tree-node").forEach((node) => {
     if (!node.hasAttribute("tabindex")) node.tabIndex = 0;
   });
-  tree.addEventListener("click", (ev) => {
+  const onClick = (ev) => {
     const target = ev.target;
     if (!(target instanceof Element)) return;
     const node = target.closest(".tree-node");
@@ -28,6 +35,7 @@ function setup(tree) {
         toggle?.classList.add("is-collapsed");
         toggle?.setAttribute("aria-expanded", "false");
       }
+      emitIcen(tree, "icen:tree-toggle", { node: li, open: !collapsed });
       return;
     }
     if (childUl) return;
@@ -37,12 +45,9 @@ function setup(tree) {
     });
     node.classList.add("is-selected");
     node.setAttribute("aria-selected", "true");
-    tree.dispatchEvent(new CustomEvent("icen:tree-select", {
-      bubbles: true,
-      detail: { node }
-    }));
-  });
-  tree.addEventListener("keydown", (ev) => {
+    emitIcen(tree, "icen:tree-select", { node });
+  };
+  const onKeyDown = (ev) => {
     const kev = ev;
     const target = kev.target;
     if (!(target instanceof Element)) return;
@@ -71,6 +76,7 @@ function setup(tree) {
           childUl.removeAttribute("hidden");
           node.querySelector(".tree-toggle")?.setAttribute("aria-expanded", "true");
           node.querySelector(".tree-toggle")?.classList.remove("is-collapsed");
+          if (li) emitIcen(tree, "icen:tree-toggle", { node: li, open: true });
         }
         break;
       }
@@ -82,19 +88,36 @@ function setup(tree) {
           childUl.setAttribute("hidden", "");
           node.querySelector(".tree-toggle")?.setAttribute("aria-expanded", "false");
           node.querySelector(".tree-toggle")?.classList.add("is-collapsed");
+          if (li) emitIcen(tree, "icen:tree-toggle", { node: li, open: false });
         }
         break;
       }
     }
-  });
+  };
+  tree.addEventListener("click", onClick);
+  tree.addEventListener("keydown", onKeyDown);
+  return () => {
+    tree.removeEventListener("click", onClick);
+    tree.removeEventListener("keydown", onKeyDown);
+    el.__icenTreeInit = false;
+  };
 }
 function initTree(root) {
-  if (typeof document === "undefined") return;
-  const scope = root ?? document;
-  const trees = [];
-  if (scope instanceof Element && scope.matches(".tree")) trees.push(scope);
-  trees.push(...Array.from(scope.querySelectorAll(".tree")));
-  for (const t of trees) setup(t);
+  const cleanups = [];
+  if (typeof document !== "undefined") {
+    const scope = root ?? document;
+    const trees = [];
+    if (scope instanceof Element && scope.matches(".tree")) trees.push(scope);
+    trees.push(...Array.from(scope.querySelectorAll(".tree")));
+    for (const t of trees) {
+      const cleanup = setup(t);
+      if (cleanup) cleanups.push(cleanup);
+    }
+  }
+  return () => {
+    for (const fn of cleanups) fn();
+    cleanups.length = 0;
+  };
 }
 export {
   initTree

package/dist/behaviors/upload.mjs

@@ -1,3 +1,10 @@
+// src/behaviors/events.ts
+function emitIcen(source, type, detail) {
+  return source.dispatchEvent(
+    new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable: true })
+  );
+}
+
 // src/behaviors/upload.ts
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
@@ -34,9 +41,9 @@ function sameFile(a, b) {
 function setup(zone) {
   const el = zone;
   if (el.__icenUploadInit) return;
-  el.__icenUploadInit = true;
   const input = zone.querySelector('input[type="file"]');
   if (!input) return;
+  el.__icenUploadInit = true;
   const hasList = zone.hasAttribute("data-upload-list");
   const maxSize = Number(zone.getAttribute("data-max-size")) || 0;
   const maxFiles = Number(zone.getAttribute("data-max-files")) || 0;
@@ -118,7 +125,7 @@ function setup(zone) {
       removeBtn.addEventListener("click", (ev) => {
         ev.stopPropagation();
         currentFiles = currentFiles.filter((f) => f !== file);
-        zone.dispatchEvent(new CustomEvent("icen:upload-remove", { bubbles: true, detail: { file } }));
+        emitIcen(zone, "icen:upload-remove", { file });
         renderList();
         syncInputFiles();
       });
@@ -126,10 +133,10 @@ function setup(zone) {
       list.appendChild(li);
     }
   }
-  function syncInputFiles() {
+  function setInputFiles(files) {
     try {
       const dt = new DataTransfer();
-      for (const f of currentFiles) dt.items.add(f);
+      for (const f of files) dt.items.add(f);
       syncing = true;
       input.files = dt.files;
       input.dispatchEvent(new Event("change", { bubbles: true }));
@@ -138,6 +145,9 @@ function setup(zone) {
       syncing = false;
     }
   }
+  function syncInputFiles() {
+    setInputFiles(currentFiles);
+  }
   function validate(file) {
     if (accept && !isAccepted(file, accept)) return "\u6587\u4EF6\u7C7B\u578B\u4E0D\u652F\u6301";
     if (maxSize > 0 && file.size > maxSize) return `\u6587\u4EF6\u8D85\u8FC7 ${formatSize(maxSize)}`;
@@ -148,7 +158,7 @@ function setup(zone) {
     for (const file of files) {
       const reason = validate(file);
       if (reason) {
-        zone.dispatchEvent(new CustomEvent("icen:upload-error", { bubbles: true, detail: { file, reason } }));
+        emitIcen(zone, "icen:upload-error", { file, reason });
         continue;
       }
       valid.push(file);
@@ -164,10 +174,7 @@ function setup(zone) {
       if (maxFiles > 0) {
         const remaining = maxFiles - currentFiles.length;
         if (remaining <= 0) {
-          zone.dispatchEvent(new CustomEvent("icen:upload-error", {
-            bubbles: true,
-            detail: { file: null, reason: `\u6700\u591A ${maxFiles} \u4E2A\u6587\u4EF6` }
-          }));
+          emitIcen(zone, "icen:upload-error", { file: null, reason: `\u6700\u591A ${maxFiles} \u4E2A\u6587\u4EF6` });
           return;
         }
         if (fresh.length > remaining) fresh.length = remaining;
@@ -175,10 +182,10 @@ function setup(zone) {
       currentFiles.push(...fresh);
       renderList();
       syncInputFiles();
-      zone.dispatchEvent(new CustomEvent("icen:upload", { bubbles: true, detail: { files: fresh } }));
+      emitIcen(zone, "icen:upload", { files: fresh });
       return;
     }
-    zone.dispatchEvent(new CustomEvent("icen:upload", { bubbles: true, detail: { files: valid } }));
+    emitIcen(zone, "icen:upload", { files: valid });
   }
   const openPicker = () => input.click();
   zone.addEventListener("click", (ev) => {
@@ -189,6 +196,8 @@ function setup(zone) {
   });
   zone.addEventListener("keydown", (ev) => {
     if (ev.key === "Enter" || ev.key === " ") {
+      const tgt = ev.target;
+      if (tgt instanceof Element && tgt.closest(".upload-list")) return;
       ev.preventDefault();
       openPicker();
     }
@@ -215,18 +224,7 @@ function setup(zone) {
     const files = ev.dataTransfer?.files;
     if (!files || files.length === 0) return;
     handleFiles(Array.from(files));
-    if (!hasList) {
-      try {
-        const dt = new DataTransfer();
-        for (const f of Array.from(files)) dt.items.add(f);
-        syncing = true;
-        input.files = dt.files;
-        input.dispatchEvent(new Event("change", { bubbles: true }));
-      } catch {
-      } finally {
-        syncing = false;
-      }
-    }
+    if (!hasList) setInputFiles(Array.from(files));
   });
 }
 function initUpload(root) {

package/dist/cli.mjs

@@ -7,7 +7,7 @@
  * 用法：
  *   bunx --bun @icen.ai/ui add <slug...>   打印引入行（多个 slug 空格分隔）
  *   bunx --bun @icen.ai/ui list            列出全部组件 slug
- * 数据源：同目录 registry.json（构建期由 scripts/slugs.mjs 生成）。
+ * 数据源：同目录 registry.json（构建期由 scripts/build-css.ts 写入，映射数据源为 scripts/slugs.mjs）。
  */
 import { readFileSync } from 'node:fs';
 

package/dist/components/ai-panel.css

@@ -399,7 +399,7 @@
   user-select: none;
 }
 
-/* 大号变体（常驻工具栏/头部用） */
+/* 大号变体（消费方变体，常驻头部大号环；behavior 不产出，由使用方手写标记） */
 .ai-usage-ring--lg {
   width: 44px;
   height: 44px;

package/dist/components/ai-tool-call.mjs

@@ -1,2 +1,2 @@
 // @icen.ai/ui — kit: ai-tool-call（CSS + behavior 一行入口；构建产物，勿手改）
-import './ai-tool-call.css';
+import './ai-tool.css';

package/dist/components/badge.css

@@ -22,7 +22,7 @@
  *   </span>
  *
  * 变体：--dot 纯圆点 / --sm 小号 / --lg 大号 / --bottom 底部角
- * 语义色：--success（在线）/ --warning / --error / --accent
+ * 语义色：--success（在线）/ --warning / --error / --info / --accent
  */
 
 .badge-host {

package/dist/components/breadcrumb.css

@@ -105,38 +105,6 @@
   background: var(--token-fill-1);
 }
 
-/* ── 溢出下拉（behavior 可选：点击 … 展开被折叠的中间路径） ── */
-.breadcrumb-dropdown {
-  position: relative;
-}
-.breadcrumb-dropdown-menu {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  min-width: 160px;
-  padding: 4px;
-  background: var(--token-card-strong);
-  border: 1px solid var(--token-outline);
-  border-radius: var(--radius-md);
-  box-shadow: var(--token-shadow-overlay);
-  z-index: var(--z-popover);
-  animation: icen-pop-in var(--icen-tx-fast);
-}
-.breadcrumb-dropdown-menu[hidden] { display: none; }
-.breadcrumb-dropdown-menu a {
-  display: block;
-  padding: 4px var(--density-space-sm);
-  font-size: var(--density-font-size-sm);
-  color: var(--token-text-muted);
-  text-decoration: none;
-  border-radius: var(--radius-sm);
-  transition: background-color var(--icen-tx-fast), color var(--icen-tx-fast);
-}
-.breadcrumb-dropdown-menu a:hover {
-  background: var(--token-fill-1);
-  color: var(--token-text);
-}
-
 /* ── 面包屑分隔符变体 ── */
 .breadcrumb--slash .breadcrumb-sep::after { content: '/'; }
 .breadcrumb--arrow .breadcrumb-sep::after { content: '→'; }

package/dist/components/chart-calendar.mjs

@@ -1,5 +1,4 @@
 // @icen.ai/ui — kit: chart-calendar（CSS + behavior 一行入口；构建产物，勿手改）
-import './chart-calendar.css';
-import './charts.css';
 import './chart-heatmap.css';
+import './charts.css';
 export { renderCalendar } from '../behaviors/charts.mjs';

package/dist/components/chart-pie.css

@@ -18,9 +18,3 @@
   height: 132px;
   flex-shrink: 0;
 }
-.chart-donut-center {
-  font-variant-numeric: tabular-nums;
-  text-anchor: middle;
-  fill: var(--token-text);
-  font-weight: 600;
-}

package/dist/components/charts.css

@@ -78,7 +78,7 @@
   font-variant-numeric: tabular-nums;
 }
 
-/* ── 调色盘：多系列图（donut/stack/line/radar）由 behavior 选用 ── */
+/* ── 调色盘：手写 markup 调色盘；behavior 走 charts.ts PALETTE_VARS 内联同值（两处值需人工同步） ── */
 .chart-tone-1 { --chart-tone: var(--token-accent); }
 .chart-tone-2 { --chart-tone: var(--token-accent-cold); }
 .chart-tone-3 { --chart-tone: var(--token-success); }

package/dist/components/content.css

@@ -3,6 +3,9 @@
  *
  * 包含：kbd（按键）/ code-inline（行内代码）/ list（分隔列表）/ accordion（手风琴，behaviors/accordion 配套）/
  *       timeline（时间线）/ desc（描述列表）/ tree（树形，behaviors/tree 配套）
+ * markup API 变体（正文"增强"段，behavior 不产出、由手写 markup 消费）：
+ *   .accordion--cards / .code-inline--success|--warning|--error /
+ *   .timeline--right|--alternate|--sm / .timeline-extra / .timeline-dot--sm 及 dot 语义色（--error 等）
  * 规格源自 opengal src/presentation/ui/data/exhibit.tsx 与 data/display.tsx。
  */
 
@@ -531,22 +534,6 @@
   background: var(--token-outline-soft);
 }
 
-/* 树节点复选框（checkbox tree） */
-.tree-checkbox {
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
-  margin-right: 2px;
-}
-
-/* 树拖拽视觉态 */
-.tree-node.is-dragging {
-  opacity: 0.5;
-}
-.tree-node.is-drop-target {
-  box-shadow: inset 0 -2px var(--token-accent);
-}
-
 /* 树搜索高亮 */
 .tree-label mark {
   background: color-mix(in srgb, var(--token-warning) 30%, transparent);

package/dist/components/datatable.css

@@ -418,7 +418,7 @@
   background: color-mix(in srgb, var(--token-accent-subtle) 82%, var(--token-fill-1));
 }
 
-/* ── 行状态类（rowClassName 产出） ── */
+/* ── 行状态类（rowClassName 产出；--danger/--warning/--success 同族语义行底色） ── */
 .dt-row--danger { background: color-mix(in srgb, var(--token-error) 6%, transparent) !important; }
 .dt-row--danger:hover { background: color-mix(in srgb, var(--token-error) 10%, transparent) !important; }
 .dt-row--warning { background: color-mix(in srgb, var(--token-warning) 6%, transparent) !important; }

package/dist/components/date-picker.css

@@ -3,7 +3,7 @@
  *
  * 契约：
  *   <div class="date-picker" data-date-picker data-date-picker-input="id">
- *     <button class="date-picker-trigger" type="button" aria-haspopup="dialog">
+ *     <button class="date-picker-trigger [--sm|--lg]" type="button" aria-haspopup="dialog">
  *       <span class="date-picker-value">2026-07-29</span>
  *       <svg class="date-picker-icon">…日历 svg…</svg>
  *     </button>

package/dist/components/notification.css

@@ -9,7 +9,7 @@
  *
  * 完整契约（由 behavior 渲染）：
  *   <div class="notification-container" role="region" aria-label="通知" data-position="top-right">
- *     <div class="notification [notification--success|warning|error|info]
+ *     <div class="notification [notification--success|warning|error]
  *          [.is-priority] [.is-unread] [.is-progress] [.is-clickable] [.is-paused]
  *          [.has-avatar]" role="alert|button">
  *       <span class="notification-icon">…svg 或 img.notification-avatar…</span>
@@ -81,7 +81,7 @@
 .notification.notification--success { border-left-color: var(--token-success); }
 .notification.notification--warning { border-left-color: var(--token-warning); }
 .notification.notification--error   { border-left-color: var(--token-error); }
-.notification.notification--info    { border-left-color: var(--token-info); }
+/* info 为基类默认配色（基类左侧边即 --token-info），无修饰类 */
 
 /* ── 优先级：高优先级强调（左侧加粗 + 更强阴影）── */
 .notification.is-priority {
@@ -138,7 +138,6 @@
 .notification--success .notification-icon { color: var(--token-success); }
 .notification--warning .notification-icon { color: var(--token-warning); }
 .notification--error   .notification-icon { color: var(--token-error); }
-.notification--info    .notification-icon { color: var(--token-info); }
 
 /* 头像（圆形图） */
 .notification-avatar {

package/dist/components/pagination.css

@@ -10,7 +10,9 @@
  *     <button class="page-btn motion" aria-label="下一页">›</button>
  *   </nav>
  *
- * 翻页逻辑由消费方实现，这里只提供静态样式契约。
+ * 点击接线由 behaviors/controls.ts 的 initPagination() 提供（.page-btn 激活位移 +
+ * icen:page-change，上下页按钮按 aria-label / data-dir 推断方向）；总页数与省略号
+ * 折叠策略由消费方维护，这里只提供样式契约。
  */
 
 .pagination {

package/dist/components/pagination.mjs

@@ -1,2 +1,3 @@
 // @icen.ai/ui — kit: pagination（CSS + behavior 一行入口；构建产物，勿手改）
 import './pagination.css';
+export { initPagination } from '../behaviors/controls.mjs';

package/dist/components/rating.mjs

@@ -1,2 +1,3 @@
 // @icen.ai/ui — kit: rating（CSS + behavior 一行入口；构建产物，勿手改）
 import './media.css';
+export { initRating } from '../behaviors/controls.mjs';

package/dist/components/segmented.css

@@ -28,7 +28,15 @@
  *        …
  *      </div>
  *
- * segmented/toggle 是纯 CSS 状态组件（.is-active）；stepper/otp 由 behaviors/input.ts 接线。
+ * segmented / stepper 由 behaviors/controls.ts 接线（initSegmented / initStepper，
+ * 派 icen:segmented-change / icen:stepper-change）；otp 由 behaviors/input.ts 的
+ * initInput 接线；toggle-group 为纯 CSS 状态组件（.is-active，使用方自行驱动）。
+ *
+ * 增强段（正文"增强"段）：
+ *   变体：segmented--block / segmented--ghost / toggle-group--block / toggle-group--ghost
+ *   槽位：stepper-unit（步进器单位后缀）/ otp-separator（OTP 分组分隔符）
+ *   状态类（消费方施加）：.otp.is-complete（behavior 接线中）/ .otp.is-error /
+ *         .segmented.is-error / .segmented.is-disabled / .toggle-group.is-error / .toggle-group.is-disabled
  */
 
 /* ── 分段控件（排他单选） ── */

package/dist/components/segmented.mjs

@@ -1,3 +1,3 @@
 // @icen.ai/ui — kit: segmented（CSS + behavior 一行入口；构建产物，勿手改）
 import './segmented.css';
-export { initInput } from '../behaviors/input.mjs';
+export { initInput, initSegmented, initStepper } from '../behaviors/controls.mjs';