@icen.ai/ui 0.5.0 → 0.8.0

package/dist/behaviors/select.mjs

@@ -1,4 +1,101 @@
+// src/behaviors/popover.ts
+var DEFAULT_MIN_WIDTH = 220;
+var DEFAULT_MAX_WIDTH = 420;
+var DEFAULT_MIN_HEIGHT = 120;
+var DEFAULT_MAX_HEIGHT = 420;
+function clamp(value, min, max) {
+  if (max < min) return min;
+  return Math.min(max, Math.max(min, value));
+}
+function chooseSide(preferredSide, availableTop, availableBottom, desiredHeight) {
+  const preferredSpace = preferredSide === "top" ? availableTop : availableBottom;
+  const oppositeSpace = preferredSide === "top" ? availableBottom : availableTop;
+  if (preferredSpace >= desiredHeight) return preferredSide;
+  if (oppositeSpace >= desiredHeight) return preferredSide === "top" ? "bottom" : "top";
+  if (preferredSpace >= oppositeSpace) return preferredSide;
+  return preferredSide === "top" ? "bottom" : "top";
+}
+function horizontalAnchor(anchor, width, align) {
+  if (align === "center") return anchor.left + anchor.width / 2 - width / 2;
+  if (align === "end") return anchor.right - width;
+  return anchor.left;
+}
+function computePopoverLayout(anchor, viewport, opts = {}) {
+  const margin = opts.margin ?? 12;
+  const offset = opts.offset ?? 8;
+  const availableWidth = Math.max(80, viewport.width - margin * 2);
+  const requestedMinWidth = Math.max(1, opts.minWidth ?? DEFAULT_MIN_WIDTH);
+  const requestedMaxWidth = Math.max(requestedMinWidth, opts.maxWidth ?? DEFAULT_MAX_WIDTH);
+  const maxWidth = Math.min(requestedMaxWidth, availableWidth);
+  const minWidth = Math.min(requestedMinWidth, maxWidth);
+  const preferredSide = opts.side ?? "top";
+  const align = opts.align ?? "start";
+  const availableTop = Math.max(0, anchor.top - margin - offset);
+  const availableBottom = Math.max(0, viewport.height - anchor.bottom - margin - offset);
+  const availableHeight = Math.max(80, viewport.height - margin * 2);
+  const minHeight = Math.min(Math.max(80, opts.minHeight ?? DEFAULT_MIN_HEIGHT), availableHeight);
+  const requestedMaxHeight = Math.max(minHeight, opts.maxHeight ?? DEFAULT_MAX_HEIGHT);
+  const fallbackHeight = Math.min(260, requestedMaxHeight);
+  const contentHeight = Math.max(opts.contentHeightHint ?? 0, fallbackHeight);
+  const desiredHeight = clamp(contentHeight, minHeight, Math.min(requestedMaxHeight, availableHeight));
+  const side = chooseSide(preferredSide, availableTop, availableBottom, desiredHeight);
+  const sideSpace = side === "top" ? availableTop : availableBottom;
+  const maxHeight = Math.min(
+    requestedMaxHeight,
+    Math.max(80, sideSpace || Math.max(availableTop, availableBottom)),
+    availableHeight
+  );
+  const positionedHeight = clamp(desiredHeight, 40, maxHeight);
+  const width = align === "stretch" ? clamp(anchor.width, minWidth, maxWidth) : maxWidth;
+  const left = clamp(horizontalAnchor(anchor, width, align), margin, viewport.width - margin - width);
+  const desiredTop = side === "top" ? anchor.top - offset - positionedHeight : anchor.bottom + offset;
+  const top = clamp(desiredTop, margin, viewport.height - margin - positionedHeight);
+  return { side, left, top, width, maxHeight };
+}
+
 // src/behaviors/select.ts
+var openSelect = null;
+var globalBound = false;
+var PANEL_OFFSET = 4;
+var PANEL_MAX_HEIGHT = 240;
+function onGlobalPointerDown(ev) {
+  const cur = openSelect;
+  if (!cur) return;
+  const t = ev.target;
+  if (!(t instanceof Node)) return;
+  if (cur.container.contains(t) || cur.panel.contains(t)) return;
+  cur.close();
+}
+function onGlobalKeyDown(ev) {
+  if (ev.key !== "Escape") return;
+  const cur = openSelect;
+  if (!cur) return;
+  cur.close();
+  cur.trigger.focus();
+}
+function onWindowChange() {
+  const cur = openSelect;
+  if (!cur) return;
+  if (!cur.trigger.isConnected) {
+    cur.close();
+    return;
+  }
+  cur.reposition();
+}
+function bindGlobalListeners() {
+  if (globalBound) return;
+  globalBound = true;
+  document.addEventListener("pointerdown", onGlobalPointerDown);
+  document.addEventListener("keydown", onGlobalKeyDown);
+}
+function bindOpenListeners() {
+  window.addEventListener("scroll", onWindowChange, true);
+  window.addEventListener("resize", onWindowChange);
+}
+function unbindOpenListeners() {
+  window.removeEventListener("scroll", onWindowChange, true);
+  window.removeEventListener("resize", onWindowChange);
+}
 function setup(container) {
   const el = container;
   if (el.__icenSelectInit) return;
@@ -14,6 +111,7 @@ function setup(container) {
   const isSearchable = container.hasAttribute("data-select-search");
   const maxSelect = Number(container.getAttribute("data-select-max")) || 0;
   const placeholder = container.getAttribute("data-select-placeholder") ?? (valueEl?.classList.contains("is-empty") ? valueEl?.textContent ?? "" : "");
+  if (isMultiple) panel.setAttribute("data-select-multiple", "");
   let searchInput = null;
   let focusIdx = -1;
   if (isSearchable && !panel.querySelector(".select-search-input")) {
@@ -89,11 +187,37 @@ function setup(container) {
       }
     });
   }
+  function positionPanel() {
+    const rect = trigger.getBoundingClientRect();
+    const layout = computePopoverLayout(
+      rect,
+      { width: window.innerWidth, height: window.innerHeight },
+      {
+        side: "bottom",
+        align: "stretch",
+        offset: PANEL_OFFSET,
+        minWidth: rect.width,
+        maxWidth: rect.width,
+        maxHeight: PANEL_MAX_HEIGHT
+      }
+    );
+    panel.style.left = `${layout.left + window.scrollX}px`;
+    panel.style.top = `${layout.top + window.scrollY}px`;
+    panel.style.minWidth = `${layout.width}px`;
+    panel.style.width = `${layout.width}px`;
+    panel.style.maxHeight = `${layout.maxHeight}px`;
+    panel.dataset.side = layout.side;
+  }
   function openPanel() {
     if (isOpen()) return;
+    openSelect?.close();
+    if (panel.parentElement !== document.body) document.body.appendChild(panel);
     panel.hidden = false;
     container.classList.add("is-open");
     trigger.setAttribute("aria-expanded", "true");
+    positionPanel();
+    openSelect = { container, trigger, panel, close: closePanel, reposition: positionPanel };
+    bindOpenListeners();
     if (searchInput) {
       searchInput.value = "";
       filterOptions("");
@@ -109,6 +233,8 @@ function setup(container) {
     container.classList.remove("is-open");
     trigger.setAttribute("aria-expanded", "false");
     setFocus(-1);
+    if (openSelect?.panel === panel) openSelect = null;
+    unbindOpenListeners();
   }
   function getSelectedValues() {
     return allOptions().filter((o) => o.classList.contains("is-selected")).map((o) => o.getAttribute("data-value") ?? "");
@@ -188,20 +314,6 @@ function setup(container) {
       }
       return;
     }
-    if (searchInput && document.activeElement === searchInput) {
-      if (ev.key === "ArrowDown") {
-        ev.preventDefault();
-        moveFocus(1);
-      } else if (ev.key === "ArrowUp") {
-        ev.preventDefault();
-        moveFocus(-1);
-      } else if (ev.key === "Enter") {
-        ev.preventDefault();
-        const opt = visibleOptions()[focusIdx];
-        if (opt) choose(opt);
-      }
-      return;
-    }
     switch (ev.key) {
       case "ArrowDown":
         ev.preventDefault();
@@ -238,22 +350,15 @@ function setup(container) {
     const idx = visibleOptions().indexOf(opt);
     if (idx >= 0 && !opt.classList.contains("is-disabled")) setFocus(idx);
   });
-  document.addEventListener("pointerdown", (ev) => {
-    if (isOpen() && ev.target instanceof Node && !container.contains(ev.target)) closePanel();
-  });
-  document.addEventListener("keydown", (ev) => {
-    if (ev.key === "Escape" && isOpen()) {
-      closePanel();
-      trigger.focus();
-    }
-  });
   if (isMultiple) updateMultiTrigger();
 }
-function initSelect(root = document) {
+function initSelect(root) {
   if (typeof document === "undefined") return;
+  const scope = root ?? document;
+  bindGlobalListeners();
   const containers = [];
-  if (root instanceof Element && root.matches("[data-select]")) containers.push(root);
-  containers.push(...Array.from(root.querySelectorAll("[data-select]")));
+  if (scope instanceof Element && scope.matches("[data-select]")) containers.push(scope);
+  containers.push(...Array.from(scope.querySelectorAll("[data-select]")));
   for (const c of containers) setup(c);
 }
 export {

package/dist/behaviors/sidebar.d.mts

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

package/dist/behaviors/sidebar.mjs

@@ -27,11 +27,12 @@ function setup(sidebar) {
     }));
   });
 }
-function initSidebar(root = document) {
+function initSidebar(root) {
   if (typeof document === "undefined") return;
+  const scope = root ?? document;
   const sidebars = [];
-  if (root instanceof Element && root.matches(".sidebar")) sidebars.push(root);
-  sidebars.push(...Array.from(root.querySelectorAll(".sidebar")));
+  if (scope instanceof Element && scope.matches(".sidebar")) sidebars.push(scope);
+  sidebars.push(...Array.from(scope.querySelectorAll(".sidebar")));
   for (const s of sidebars) setup(s);
 }
 export {

package/dist/behaviors/slider.d.mts

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

package/dist/behaviors/slider.mjs

@@ -92,11 +92,12 @@ function setup(slider) {
   if (slider.classList.contains("slider--dual")) setupDual(slider, natives);
   else setupSingle(slider, natives[0]);
 }
-function initSlider(root = document) {
+function initSlider(root) {
   if (typeof document === "undefined") return;
+  const scope = root ?? document;
   const containers = [];
-  if (root instanceof Element && root.matches(".slider")) containers.push(root);
-  containers.push(...Array.from(root.querySelectorAll(".slider")));
+  if (scope instanceof Element && scope.matches(".slider")) containers.push(scope);
+  containers.push(...Array.from(scope.querySelectorAll(".slider")));
   for (const c of containers) setup(c);
 }
 export {

package/dist/behaviors/split-pane.d.mts

@@ -0,0 +1,4 @@
+/** 为 root 下每个 .split-pane[data-split-pane] 初始化（root 自身匹配也算）。 */
+declare function initSplitPane(root?: ParentNode): void;
+
+export { initSplitPane };

package/dist/behaviors/split-pane.mjs

@@ -1,5 +1,9 @@
 // src/behaviors/split-pane.ts
-var initialized = /* @__PURE__ */ new WeakSet();
+function numOr(value, fallback) {
+  if (value === void 0 || value === "") return fallback;
+  const n = Number(value);
+  return Number.isFinite(n) ? n : fallback;
+}
 function pct(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
@@ -10,9 +14,9 @@ function setup(container) {
   const dividerQuery = el.querySelector(".split-pane-divider");
   if (!dividerQuery) return;
   const divider = dividerQuery;
-  const min = Number(el.dataset.splitMin ?? "10") || 10;
-  const max = Number(el.dataset.splitMax ?? "90") || 90;
-  const step = Number(el.dataset.splitStep ?? "2") || 2;
+  const min = numOr(el.dataset.splitMin, 10);
+  const max = numOr(el.dataset.splitMax, 90);
+  const step = numOr(el.dataset.splitStep, 2);
   const vertical = el.classList.contains("split-pane--vertical");
   const orientation = vertical ? "vertical" : "horizontal";
   divider.setAttribute("role", "separator");
@@ -85,17 +89,13 @@ function setup(container) {
     write(next);
   });
 }
-function initSplitPane(root = document) {
+function initSplitPane(root) {
   if (typeof document === "undefined") return;
+  const scope = root ?? document;
   const panes = [];
-  if (root instanceof Element && root.matches(".split-pane[data-split-pane]")) panes.push(root);
-  panes.push(...Array.from(root.querySelectorAll(".split-pane[data-split-pane]")));
-  for (const p of panes) {
-    const el = p;
-    if (initialized.has(el)) continue;
-    initialized.add(el);
-    setup(el);
-  }
+  if (scope instanceof Element && scope.matches(".split-pane[data-split-pane]")) panes.push(scope);
+  panes.push(...Array.from(scope.querySelectorAll(".split-pane[data-split-pane]")));
+  for (const p of panes) setup(p);
 }
 export {
   initSplitPane

package/dist/behaviors/tabs.d.mts

@@ -0,0 +1,8 @@
+/**
+ * 为 root 下每个 [data-tabs] 容器初始化（root 自身是 [data-tabs] 也算）。
+ * 返回销毁函数：调用后移除所有容器监听与 window hashchange，并复位幂等标记
+ * （销毁后的容器可被再次 initTabs 重新接管）。SSR 下返回 no-op 函数。
+ */
+declare function initTabs(root?: ParentNode): () => void;
+
+export { initTabs };

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 };