@icen.ai/ui 0.4.0 → 0.8.0

package/dist/behaviors/tabs.mjs

@@ -8,28 +8,40 @@ function tabNames(container) {
 function currentHash() {
   return window.location.hash.replace(/^#/, "");
 }
-function activate(container, name, writeHash) {
+function activate(container, name, writeHash, emit = false) {
   const buttons = tabButtons(container);
   let matched = false;
   buttons.forEach((t) => {
     const on = t.getAttribute("data-tab") === name;
     if (on) matched = true;
-    t.classList.toggle("active", on);
+    t.classList.toggle("is-active", on);
     t.setAttribute("aria-selected", String(on));
     t.tabIndex = on ? 0 : -1;
   });
   if (!matched) return;
+  let panel = null;
   container.querySelectorAll("[data-tab-panel]").forEach((p) => {
     const isOn = p.getAttribute("data-tab-panel") === name;
     p.hidden = !isOn;
-    if (isOn && !p.getAttribute("aria-labelledby")) {
-      const btn = buttons.find((b) => b.getAttribute("data-tab") === name);
-      if (btn?.id) p.setAttribute("aria-labelledby", btn.id);
+    if (isOn) {
+      panel = p;
+      if (!p.getAttribute("aria-labelledby")) {
+        const btn = buttons.find((b) => b.getAttribute("data-tab") === name);
+        if (btn?.id) p.setAttribute("aria-labelledby", btn.id);
+      }
     }
   });
   if (writeHash && typeof window !== "undefined") {
     window.history.replaceState(null, "", `#${name}`);
   }
+  if (emit) {
+    const index = buttons.findIndex((b) => b.getAttribute("data-tab") === name);
+    const tab = buttons[index] ?? null;
+    container.dispatchEvent(new CustomEvent("icen:tab-change", {
+      bubbles: true,
+      detail: { tab, panel, index }
+    }));
+  }
 }
 function isDisabled(btn) {
   return btn.hasAttribute("disabled") || btn.getAttribute("aria-disabled") === "true" || btn.classList.contains("is-disabled");
@@ -52,7 +64,7 @@ function nextEnabled(container, from, dir) {
 }
 function setup(container) {
   const el = container;
-  if (el.__icenTabsInit) return;
+  if (el.__icenTabsInit) return void 0;
   el.__icenTabsInit = true;
   const useHash = container.hasAttribute("data-tabs-hash");
   const names = tabNames(container);
@@ -71,7 +83,7 @@ function setup(container) {
     if (!btn || btn.closest("[data-tabs]") !== container) return;
     if (btn instanceof HTMLElement && isDisabled(btn)) return;
     const name = btn.getAttribute("data-tab");
-    if (name) activate(container, name, useHash);
+    if (name) activate(container, name, useHash, true);
   };
   const onKeyDown = (ev) => {
     const kev = ev;
@@ -99,12 +111,12 @@ function setup(container) {
       }
       case "Home": {
         kev.preventDefault();
-        focusTab(container, 0);
+        focusTab(container, nextEnabled(container, -1, 1));
         break;
       }
       case "End": {
         kev.preventDefault();
-        focusTab(container, buttonsList.length - 1);
+        focusTab(container, nextEnabled(container, buttonsList.length, -1));
         break;
       }
       case "Enter":
@@ -112,7 +124,7 @@ function setup(container) {
         if (btn instanceof HTMLElement && !isDisabled(btn)) {
           kev.preventDefault();
           const name = btn.getAttribute("data-tab");
-          if (name) activate(container, name, useHash);
+          if (name) activate(container, name, useHash, true);
         }
         break;
       }
@@ -125,29 +137,42 @@ function setup(container) {
     const h = currentHash();
     if (names.includes(h)) initial = h;
   } else {
-    const n = container.querySelector("[data-tab].active")?.getAttribute("data-tab");
+    const n = container.querySelector("[data-tab].is-active")?.getAttribute("data-tab");
     if (n && names.includes(n)) initial = n;
   }
   activate(container, initial ?? names[0], false);
   const onHash = () => {
     const h = currentHash();
-    if (names.includes(h)) activate(container, h, false);
+    if (names.includes(h)) activate(container, h, false, true);
   };
   if (useHash && typeof window !== "undefined") {
     window.addEventListener("hashchange", onHash);
   }
-  el.__icenTabsCleanup = () => {
+  const cleanup = () => {
     container.removeEventListener("click", onClick);
     container.removeEventListener("keydown", onKeyDown);
     window.removeEventListener("hashchange", onHash);
+    el.__icenTabsInit = false;
   };
+  el.__icenTabsCleanup = cleanup;
+  return cleanup;
 }
-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);
+function initTabs(root) {
+  const cleanups = [];
+  if (typeof document !== "undefined") {
+    const scope = root ?? document;
+    const containers = [];
+    if (scope instanceof Element && scope.matches("[data-tabs]")) containers.push(scope);
+    containers.push(...Array.from(scope.querySelectorAll("[data-tabs]")));
+    for (const c of containers) {
+      const cleanup = setup(c);
+      if (cleanup) cleanups.push(cleanup);
+    }
+  }
+  return () => {
+    for (const fn of cleanups) fn();
+    cleanups.length = 0;
+  };
 }
 export {
   initTabs

package/dist/behaviors/tag-input.d.mts

@@ -0,0 +1,4 @@
+/** 为 root 下每个 .tag-input 容器初始化（root 自身匹配也算；data-tags 为可选初始值配置）。 */
+declare function initTagInput(root?: ParentNode): void;
+
+export { initTagInput };

package/dist/behaviors/tag-input.mjs

@@ -9,6 +9,13 @@ function setup(wrap) {
   const maxAttr = wrap.getAttribute("data-max");
   const max = maxAttr ? Number(maxAttr) || Infinity : Infinity;
   const placeholder = field.placeholder;
+  let isComposing = false;
+  field.addEventListener("compositionstart", () => {
+    isComposing = true;
+  });
+  field.addEventListener("compositionend", () => {
+    isComposing = false;
+  });
   let tags = (wrap.getAttribute("data-tags") ?? "").split(",").map((s) => s.trim()).filter(Boolean);
   function sync() {
     wrap.setAttribute("data-tags", tags.join(","));
@@ -63,6 +70,7 @@ function setup(wrap) {
     emit();
   }
   field.addEventListener("keydown", (ev) => {
+    if (isComposing || ev.isComposing) return;
     if (ev.key === "Enter" || ev.key === ",") {
       ev.preventDefault();
       commit();
@@ -73,11 +81,12 @@ function setup(wrap) {
   field.addEventListener("blur", commit);
   render();
 }
-function initTagInput(root = document) {
+function initTagInput(root) {
   if (typeof document === "undefined") return;
+  const scope = root ?? document;
   const containers = [];
-  if (root instanceof HTMLElement && root.matches(".tag-input[data-tags]")) containers.push(root);
-  containers.push(...Array.from(root.querySelectorAll(".tag-input[data-tags]")));
+  if (scope instanceof HTMLElement && scope.matches(".tag-input")) containers.push(scope);
+  containers.push(...Array.from(scope.querySelectorAll(".tag-input")));
   for (const c of containers) setup(c);
 }
 export {

package/dist/behaviors/theme.d.mts

@@ -0,0 +1,25 @@
+interface ThemeState {
+    preset: string;
+    dark: boolean;
+    style: string;
+}
+declare const PRESETS: readonly ["clay", "piano", "art", "vangogh", "ink", "retro"];
+declare const STYLES: readonly ["modern", "retro", "terminal"];
+declare const STORAGE_KEY = "icen.ui.theme";
+/** 默认主题：clay + 跟随系统明暗 + modern。SSR 下返回离线兜底值。 */
+declare function getDefaultTheme(): ThemeState;
+/** 读 localStorage 中的持久化主题；缺失或坏数据回退默认。 */
+declare function getTheme(): ThemeState;
+/** 把主题应用到 <html>：先清掉所有 preset/style/dark 相关类，再按 t 挂回。 */
+declare function applyTheme(t: ThemeState): void;
+/** 合并当前主题与 patch，应用并持久化，返回新态。patch 中的非法枚举值回退默认。 */
+declare function setTheme(patch: Partial<ThemeState>): ThemeState;
+/** 切换明暗，返回新态。 */
+declare function toggleDark(): ThemeState;
+/** 页面加载早期调用：读持久化主题并应用，防闪烁。
+ *  无持久化偏好时，自动跟随系统的 prefers-color-scheme 变化（实时）；
+ *  一旦用户显式 setTheme / toggleDark，跟随停止（持久化优先）。
+ *  重复调用幂等（系统监听不会重复挂）。 */
+declare function initTheme(): ThemeState;
+
+export { PRESETS, STORAGE_KEY, STYLES, type ThemeState, applyTheme, getDefaultTheme, getTheme, initTheme, setTheme, toggleDark };

package/dist/behaviors/theme.mjs

@@ -62,10 +62,12 @@ function setTheme(patch) {
 function toggleDark() {
   return setTheme({ dark: !getTheme().dark });
 }
+var systemListenerAttached = false;
 function initTheme() {
   const t = getTheme();
   applyTheme(t);
-  if (isBrowser() && typeof window.matchMedia === "function" && !hasPersistedPreference()) {
+  if (isBrowser() && typeof window.matchMedia === "function" && !systemListenerAttached && !hasPersistedPreference()) {
+    systemListenerAttached = true;
     let lastDark = t.dark;
     try {
       const mql = window.matchMedia("(prefers-color-scheme: dark)");

package/dist/behaviors/toast.d.mts

@@ -0,0 +1,26 @@
+type ToastKind = 'ok' | 'err' | 'warn' | 'info';
+interface ToastOptions {
+    /** 保留时长（毫秒），默认 2600；带 action 时默认 6000 */
+    ms?: number;
+    /** 配合 action：可撤销 / 重试 / 查看等 */
+    actionLabel?: string;
+    /** action 触发回调；返回 false 阻止 toast 关闭 */
+    onAction?: () => void | Promise<void> | boolean;
+}
+interface ToastConfig {
+    /** 同屏最大堆叠，默认 5；超出从最早的开始移除 */
+    maxStack?: number;
+}
+interface ToastFn {
+    (message: string, kind?: ToastKind, ms?: number): void;
+    ok(message: string, ms?: number): void;
+    err(message: string, ms?: number): void;
+    warn(message: string, ms?: number): void;
+    info(message: string, ms?: number): void;
+    action(message: string, actionLabel: string, onAction: () => void, ms?: number): void;
+    dismiss(): void;
+    config(opts: ToastConfig): void;
+}
+declare const toast: ToastFn;
+
+export { type ToastConfig, type ToastKind, type ToastOptions, toast };

package/dist/behaviors/toast.mjs

@@ -16,21 +16,35 @@ function ensureContainer() {
   document.body.appendChild(el);
   return el;
 }
+var KIND_CLASS = {
+  ok: "toast--success",
+  err: "toast--error",
+  warn: "toast--warning",
+  info: "toast--info"
+};
+function scheduleRemove(el) {
+  el.classList.add("is-leaving");
+  let done = false;
+  const finish = () => {
+    if (done) return;
+    done = true;
+    el.remove();
+  };
+  el.addEventListener("transitionend", finish, { once: true });
+  window.setTimeout(finish, 400);
+}
 function trimStack(container) {
   for (; ; ) {
     const items = Array.from(container.querySelectorAll(":scope > .toast"));
     if (items.length <= maxStack) return;
     const oldest = items[0];
     if (!oldest) return;
-    oldest.classList.add("leaving");
-    let done = false;
-    const finish = () => {
-      if (done) return;
-      done = true;
+    if (oldest.classList.contains("is-leaving")) {
       oldest.remove();
-    };
-    oldest.addEventListener("transitionend", finish, { once: true });
-    window.setTimeout(finish, 400);
+      continue;
+    }
+    scheduleRemove(oldest);
+    return;
   }
 }
 function show(message, kind = "info", opts = {}) {
@@ -38,7 +52,7 @@ function show(message, kind = "info", opts = {}) {
   const { ms, actionLabel, onAction } = opts;
   const container = ensureContainer();
   const el = document.createElement("div");
-  el.className = kind === "info" ? "toast" : `toast ${kind}`;
+  el.className = `toast ${KIND_CLASS[kind]}`;
   el.setAttribute("role", kind === "err" ? "alert" : "status");
   const msgNode = document.createElement("span");
   msgNode.className = "toast-msg";
@@ -58,15 +72,7 @@ function show(message, kind = "info", opts = {}) {
   const remove = () => {
     if (removed) return;
     removed = true;
-    el.classList.add("leaving");
-    let done = false;
-    const finish = () => {
-      if (done) return;
-      done = true;
-      el.remove();
-    };
-    el.addEventListener("transitionend", finish, { once: true });
-    window.setTimeout(finish, 400);
+    scheduleRemove(el);
   };
   const duration = ms ?? (actionLabel ? ACTION_MS : DEFAULT_MS);
   const timer = window.setTimeout(remove, duration);

package/dist/behaviors/tree.d.mts

@@ -0,0 +1,4 @@
+/** 为 root 下每棵 .tree 初始化（root 自身是 .tree 也算）。 */
+declare function initTree(root?: ParentNode): void;
+
+export { initTree };

package/dist/behaviors/tree.mjs

@@ -88,11 +88,12 @@ function setup(tree) {
     }
   });
 }
-function initTree(root = document) {
+function initTree(root) {
   if (typeof document === "undefined") return;
+  const scope = root ?? document;
   const trees = [];
-  if (root instanceof Element && root.matches(".tree")) trees.push(root);
-  trees.push(...Array.from(root.querySelectorAll(".tree")));
+  if (scope instanceof Element && scope.matches(".tree")) trees.push(scope);
+  trees.push(...Array.from(scope.querySelectorAll(".tree")));
   for (const t of trees) setup(t);
 }
 export {

package/dist/behaviors/upload.d.mts

@@ -0,0 +1,4 @@
+/** 为 root 下每个 .upload 容器初始化（root 自身是 .upload 也算）。 */
+declare function initUpload(root?: ParentNode): void;
+
+export { initUpload };

package/dist/behaviors/upload.mjs

@@ -1,13 +1,190 @@
 // src/behaviors/upload.ts
+function formatSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+}
+function isAccepted(file, accept) {
+  if (!accept.trim()) return true;
+  const types = accept.split(",").map((t) => t.trim().toLowerCase());
+  const fileName = file.name.toLowerCase();
+  const mime = file.type.toLowerCase();
+  return types.some((t) => {
+    if (t.startsWith(".")) return fileName.endsWith(t);
+    if (t.endsWith("/*")) return mime.startsWith(t.slice(0, -1));
+    return mime === t;
+  });
+}
+var fileIconSvg = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>';
+var xIconSvg = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>';
+function parseSvg(source) {
+  try {
+    const doc = new DOMParser().parseFromString(source, "image/svg+xml");
+    const svg = doc.documentElement;
+    if (!svg || svg.tagName.toLowerCase() !== "svg") return null;
+    return document.importNode(svg, true);
+  } catch {
+    return null;
+  }
+}
+function sameFile(a, b) {
+  return a.name === b.name && a.size === b.size && a.lastModified === b.lastModified;
+}
 function setup(zone) {
   const el = zone;
   if (el.__icenUploadInit) return;
   el.__icenUploadInit = true;
   const input = zone.querySelector('input[type="file"]');
   if (!input) return;
+  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;
+  const accept = input.getAttribute("accept") ?? "";
+  let currentFiles = [];
+  const urlMap = /* @__PURE__ */ new Map();
+  let syncing = false;
+  function getListEl() {
+    if (!hasList) return null;
+    let list = zone.querySelector(".upload-list");
+    if (!list) {
+      list = document.createElement("ul");
+      list.className = "upload-list";
+      zone.appendChild(list);
+    }
+    return list;
+  }
+  function renderList() {
+    const list = getListEl();
+    if (!list) return;
+    urlMap.forEach((url, f) => {
+      if (!currentFiles.includes(f)) {
+        URL.revokeObjectURL(url);
+        urlMap.delete(f);
+      }
+    });
+    list.textContent = "";
+    if (currentFiles.length === 0) {
+      list.hidden = true;
+      return;
+    }
+    list.hidden = false;
+    for (const file of currentFiles) {
+      const li = document.createElement("li");
+      li.className = "upload-list-item";
+      const isImage = file.type.startsWith("image/");
+      let thumbUrl;
+      if (isImage) {
+        thumbUrl = urlMap.get(file);
+        if (!thumbUrl) {
+          try {
+            thumbUrl = URL.createObjectURL(file);
+            urlMap.set(file, thumbUrl);
+          } catch {
+            thumbUrl = void 0;
+          }
+        }
+      }
+      if (thumbUrl) {
+        const img = document.createElement("img");
+        img.className = "upload-list-item-thumb";
+        img.src = thumbUrl;
+        img.alt = file.name;
+        li.appendChild(img);
+      } else {
+        const icon = document.createElement("span");
+        icon.className = "upload-list-item-icon";
+        const svg = parseSvg(fileIconSvg);
+        if (svg) icon.appendChild(svg);
+        li.appendChild(icon);
+      }
+      const info = document.createElement("div");
+      info.className = "upload-list-item-info";
+      const name = document.createElement("span");
+      name.className = "upload-list-item-name";
+      name.textContent = file.name;
+      const size = document.createElement("span");
+      size.className = "upload-list-item-size";
+      size.textContent = formatSize(file.size);
+      info.appendChild(name);
+      info.appendChild(size);
+      li.appendChild(info);
+      const removeBtn = document.createElement("button");
+      removeBtn.className = "upload-list-item-x";
+      removeBtn.type = "button";
+      removeBtn.setAttribute("aria-label", `\u79FB\u9664 ${file.name}`);
+      const xSvg = parseSvg(xIconSvg);
+      if (xSvg) removeBtn.appendChild(xSvg);
+      removeBtn.addEventListener("click", (ev) => {
+        ev.stopPropagation();
+        currentFiles = currentFiles.filter((f) => f !== file);
+        zone.dispatchEvent(new CustomEvent("icen:upload-remove", { bubbles: true, detail: { file } }));
+        renderList();
+        syncInputFiles();
+      });
+      li.appendChild(removeBtn);
+      list.appendChild(li);
+    }
+  }
+  function syncInputFiles() {
+    try {
+      const dt = new DataTransfer();
+      for (const f of currentFiles) dt.items.add(f);
+      syncing = true;
+      input.files = dt.files;
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    } catch {
+    } finally {
+      syncing = false;
+    }
+  }
+  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)}`;
+    return null;
+  }
+  function handleFiles(files) {
+    const valid = [];
+    for (const file of files) {
+      const reason = validate(file);
+      if (reason) {
+        zone.dispatchEvent(new CustomEvent("icen:upload-error", { bubbles: true, detail: { file, reason } }));
+        continue;
+      }
+      valid.push(file);
+    }
+    if (valid.length === 0) return;
+    if (hasList) {
+      const fresh = [];
+      for (const f of valid) {
+        if (currentFiles.some((c) => sameFile(c, f)) || fresh.some((c) => sameFile(c, f))) continue;
+        fresh.push(f);
+      }
+      if (fresh.length === 0) return;
+      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` }
+          }));
+          return;
+        }
+        if (fresh.length > remaining) fresh.length = remaining;
+      }
+      currentFiles.push(...fresh);
+      renderList();
+      syncInputFiles();
+      zone.dispatchEvent(new CustomEvent("icen:upload", { bubbles: true, detail: { files: fresh } }));
+      return;
+    }
+    zone.dispatchEvent(new CustomEvent("icen:upload", { bubbles: true, detail: { files: valid } }));
+  }
   const openPicker = () => input.click();
   zone.addEventListener("click", (ev) => {
     if (ev.target === input) return;
+    const tgt = ev.target;
+    if (tgt instanceof Element && tgt.closest(".upload-list")) return;
     openPicker();
   });
   zone.addEventListener("keydown", (ev) => {
@@ -16,37 +193,48 @@ function setup(zone) {
       openPicker();
     }
   });
+  input.addEventListener("change", () => {
+    if (syncing) return;
+    if (!input.files) return;
+    const files = Array.from(input.files);
+    if (hasList) {
+      input.value = "";
+    }
+    handleFiles(files);
+  });
   zone.addEventListener("dragover", (ev) => {
     ev.preventDefault();
     zone.classList.add("is-drag");
   });
-  zone.addEventListener("dragleave", () => zone.classList.remove("is-drag"));
+  zone.addEventListener("dragleave", (ev) => {
+    if (ev.target === zone) zone.classList.remove("is-drag");
+  });
   zone.addEventListener("drop", (ev) => {
     ev.preventDefault();
     zone.classList.remove("is-drag");
     const files = ev.dataTransfer?.files;
     if (!files || files.length === 0) return;
-    let assigned = false;
-    try {
-      const dt = new DataTransfer();
-      for (const f of Array.from(files)) dt.items.add(f);
-      input.files = dt.files;
-      assigned = true;
-    } catch {
-      assigned = false;
-    }
-    if (assigned) {
-      input.dispatchEvent(new Event("change", { bubbles: true }));
+    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;
+      }
     }
-    const list = Array.from(files);
-    zone.dispatchEvent(new CustomEvent("icen:upload", { bubbles: true, detail: { files: list } }));
   });
 }
-function initUpload(root = document) {
+function initUpload(root) {
   if (typeof document === "undefined") return;
+  const scope = root ?? document;
   const zones = [];
-  if (root instanceof HTMLElement && root.matches(".upload")) zones.push(root);
-  zones.push(...Array.from(root.querySelectorAll(".upload")));
+  if (scope instanceof HTMLElement && scope.matches(".upload")) zones.push(scope);
+  zones.push(...Array.from(scope.querySelectorAll(".upload")));
   for (const z of zones) setup(z);
 }
 export {