@icen.ai/ui 0.5.0 → 0.8.1

package/dist/behaviors/sidebar.mjs

@@ -1,7 +1,14 @@
+// src/behaviors/events.ts
+function emitIcen(source, type, detail) {
+  return source.dispatchEvent(
+    new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable: true })
+  );
+}
+
 // src/behaviors/sidebar.ts
 function setup(sidebar) {
   const el = sidebar;
-  if (el.__icenSidebarInit) return;
+  if (el.__icenSidebarInit) return void 0;
   el.__icenSidebarInit = true;
   sidebar.querySelectorAll(".sidebar-group-title").forEach((title) => {
     const group = title.closest(".sidebar-group");
@@ -11,9 +18,21 @@ function setup(sidebar) {
       title.setAttribute("aria-controls", panel.id);
     }
   });
-  el.addEventListener("click", (ev) => {
+  sidebar.querySelectorAll("[data-sidebar-collapse]").forEach((btn) => {
+    if (!btn.hasAttribute("aria-expanded")) {
+      btn.setAttribute("aria-expanded", String(!sidebar.classList.contains("sidebar--collapsed")));
+    }
+  });
+  const onClick = (ev) => {
     const target = ev.target;
     if (!(target instanceof Element)) return;
+    const collapseBtn = target.closest("[data-sidebar-collapse]");
+    if (collapseBtn && collapseBtn.closest(".sidebar") === el) {
+      const collapsed = el.classList.toggle("sidebar--collapsed");
+      collapseBtn.setAttribute("aria-expanded", String(!collapsed));
+      emitIcen(el, "icen:sidebar-collapse", { collapsed });
+      return;
+    }
     const title = target.closest(".sidebar-group-title");
     if (!(title instanceof HTMLElement)) return;
     if (title.closest(".sidebar") !== el) return;
@@ -21,18 +40,30 @@ function setup(sidebar) {
     if (!group) return;
     const open = group.classList.toggle("is-open");
     title.setAttribute("aria-expanded", String(open));
-    sidebar.dispatchEvent(new CustomEvent("icen:sidebar-toggle", {
-      bubbles: true,
-      detail: { group, open }
-    }));
-  });
+    emitIcen(sidebar, "icen:sidebar-toggle", { group, open });
+  };
+  el.addEventListener("click", onClick);
+  return () => {
+    el.removeEventListener("click", onClick);
+    el.__icenSidebarInit = false;
+  };
 }
-function initSidebar(root = document) {
-  if (typeof document === "undefined") return;
-  const sidebars = [];
-  if (root instanceof Element && root.matches(".sidebar")) sidebars.push(root);
-  sidebars.push(...Array.from(root.querySelectorAll(".sidebar")));
-  for (const s of sidebars) setup(s);
+function initSidebar(root) {
+  const cleanups = [];
+  if (typeof document !== "undefined") {
+    const scope = root ?? document;
+    const sidebars = [];
+    if (scope instanceof Element && scope.matches(".sidebar")) sidebars.push(scope);
+    sidebars.push(...Array.from(scope.querySelectorAll(".sidebar")));
+    for (const s of sidebars) {
+      const cleanup = setup(s);
+      if (cleanup) cleanups.push(cleanup);
+    }
+  }
+  return () => {
+    for (const fn of cleanups) fn();
+    cleanups.length = 0;
+  };
 }
 export {
   initSidebar

package/dist/behaviors/slider.d.mts

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

package/dist/behaviors/slider.mjs

@@ -1,4 +1,15 @@
+// src/behaviors/events.ts
+function emitIcen(source, type, detail) {
+  return source.dispatchEvent(
+    new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable: true })
+  );
+}
+
 // src/behaviors/slider.ts
+function bind(target, type, fn, bag) {
+  target.addEventListener(type, fn);
+  bag.push(() => target.removeEventListener(type, fn));
+}
 function pct(input) {
   const min = Number(input.min || "0");
   const max = Number(input.max || "100");
@@ -6,7 +17,7 @@ function pct(input) {
   if (range <= 0) return 0;
   return (Number(input.value) - min) / range * 100;
 }
-function setupSingle(slider, native) {
+function setupSingle(slider, native, bag) {
   const fill = slider.querySelector(".slider-fill");
   const thumb = slider.querySelector(".slider-thumb");
   const sync = () => {
@@ -14,22 +25,16 @@ function setupSingle(slider, native) {
     if (fill) fill.style.width = `${p}%`;
     if (thumb) thumb.style.left = `calc(${p}% - 8px)`;
   };
-  native.addEventListener("input", () => {
+  bind(native, "input", () => {
     sync();
-    slider.dispatchEvent(new CustomEvent("icen:slider-input", {
-      bubbles: true,
-      detail: { value: Number(native.value) }
-    }));
-  });
-  native.addEventListener("change", () => {
-    slider.dispatchEvent(new CustomEvent("icen:slider-change", {
-      bubbles: true,
-      detail: { value: Number(native.value) }
-    }));
-  });
+    emitIcen(slider, "icen:slider-input", { value: Number(native.value) });
+  }, bag);
+  bind(native, "change", () => {
+    emitIcen(slider, "icen:slider-change", { value: Number(native.value) });
+  }, bag);
   sync();
 }
-function setupDual(slider, natives) {
+function setupDual(slider, natives, bag) {
   const lo = natives.find((n) => n.getAttribute("data-thumb") === "lo") ?? natives[0];
   const hi = natives.find((n) => n.getAttribute("data-thumb") === "hi") ?? natives[1];
   if (!lo || !hi || lo === hi) return;
@@ -59,45 +64,52 @@ function setupDual(slider, natives) {
     lo.style.clipPath = `inset(0 ${100 - pLo}% 0 0)`;
     hi.style.clipPath = `inset(0 0 0 ${pHi}%)`;
   };
-  lo.addEventListener("input", () => {
+  bind(lo, "input", () => {
     sync(lo);
-    slider.dispatchEvent(new CustomEvent("icen:slider-input", {
-      bubbles: true,
-      detail: { lo: Number(lo.value), hi: Number(hi.value) }
-    }));
-  });
-  hi.addEventListener("input", () => {
+    emitIcen(slider, "icen:slider-input", { lo: Number(lo.value), hi: Number(hi.value) });
+  }, bag);
+  bind(hi, "input", () => {
     sync(hi);
-    slider.dispatchEvent(new CustomEvent("icen:slider-input", {
-      bubbles: true,
-      detail: { lo: Number(lo.value), hi: Number(hi.value) }
-    }));
-  });
+    emitIcen(slider, "icen:slider-input", { lo: Number(lo.value), hi: Number(hi.value) });
+  }, bag);
   const onChange = () => {
-    slider.dispatchEvent(new CustomEvent("icen:slider-change", {
-      bubbles: true,
-      detail: { lo: Number(lo.value), hi: Number(hi.value) }
-    }));
+    emitIcen(slider, "icen:slider-change", { lo: Number(lo.value), hi: Number(hi.value) });
   };
-  lo.addEventListener("change", onChange);
-  hi.addEventListener("change", onChange);
+  bind(lo, "change", onChange, bag);
+  bind(hi, "change", onChange, bag);
   sync(null);
 }
 function setup(slider) {
   const el = slider;
-  if (el.__icenSliderInit) return;
-  el.__icenSliderInit = true;
+  if (el.__icenSliderInit) return void 0;
   const natives = Array.from(slider.querySelectorAll(".slider-native"));
-  if (natives.length === 0) return;
-  if (slider.classList.contains("slider--dual")) setupDual(slider, natives);
-  else setupSingle(slider, natives[0]);
+  if (natives.length === 0) return void 0;
+  el.__icenSliderInit = true;
+  const bag = [];
+  if (slider.classList.contains("slider--dual")) setupDual(slider, natives, bag);
+  else setupSingle(slider, natives[0], bag);
+  return () => {
+    for (const off of bag) off();
+    bag.length = 0;
+    el.__icenSliderInit = false;
+  };
 }
-function initSlider(root = document) {
-  if (typeof document === "undefined") return;
-  const containers = [];
-  if (root instanceof Element && root.matches(".slider")) containers.push(root);
-  containers.push(...Array.from(root.querySelectorAll(".slider")));
-  for (const c of containers) setup(c);
+function initSlider(root) {
+  const cleanups = [];
+  if (typeof document !== "undefined") {
+    const scope = root ?? document;
+    const containers = [];
+    if (scope instanceof Element && scope.matches(".slider")) containers.push(scope);
+    containers.push(...Array.from(scope.querySelectorAll(".slider")));
+    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 {
   initSlider

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

@@ -0,0 +1,8 @@
+/**
+ * 为 root 下每个 .split-pane[data-split-pane] 初始化（root 自身匹配也算）。
+ * 返回销毁函数：移除本次初始化挂上的全部监听并复位幂等标记（销毁后可重新 init）。
+ * SSR 下返回 no-op。
+ */
+declare function initSplitPane(root?: ParentNode): () => void;
+
+export { initSplitPane };

package/dist/behaviors/split-pane.mjs

@@ -1,18 +1,28 @@
+// src/behaviors/events.ts
+function emitIcen(source, type, detail) {
+  return source.dispatchEvent(
+    new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable: true })
+  );
+}
+
 // 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));
 }
 function setup(container) {
   const el = container;
-  if (el.__icenSplitPaneInit) return;
+  if (el.__icenSplitPaneInit) return void 0;
+  const divider = el.querySelector(".split-pane-divider");
+  if (!divider) return void 0;
   el.__icenSplitPaneInit = true;
-  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");
@@ -24,20 +34,25 @@ function setup(container) {
     const v = parseFloat(getComputedStyle(el).getPropertyValue("--split"));
     return Number.isFinite(v) ? v : 50;
   }
-  function write(p) {
+  let cur = readCurrent();
+  const write = (p) => {
     const v = pct(p, min, max);
+    cur = v;
     el.style.setProperty("--split", v + "%");
     divider.setAttribute("aria-valuenow", String(Math.round(v)));
+  };
+  function emitChange() {
+    emitIcen(el, "icen:split-change", { value: Math.round(cur * 10) / 10 });
   }
   if (!el.style.getPropertyValue("--split")) write(50);
   divider.setAttribute("aria-valuenow", String(Math.round(readCurrent())));
   let dragging = false;
-  divider.addEventListener("pointerdown", (ev) => {
+  const onDown = (ev) => {
     dragging = true;
     divider.classList.add("is-dragging");
     divider.setPointerCapture(ev.pointerId);
     el.style.userSelect = "none";
-  });
+  };
   const onUp = (ev) => {
     if (!dragging) return;
     dragging = false;
@@ -47,14 +62,16 @@ function setup(container) {
     } catch {
     }
     el.style.userSelect = "";
+    emitChange();
   };
-  divider.addEventListener("pointerup", onUp);
-  divider.addEventListener("pointercancel", () => {
+  const onCancel = () => {
+    if (!dragging) return;
     dragging = false;
     divider.classList.remove("is-dragging");
     el.style.userSelect = "";
-  });
-  divider.addEventListener("pointermove", (ev) => {
+    emitChange();
+  };
+  const onMove = (ev) => {
     if (!dragging) return;
     const rect = el.getBoundingClientRect();
     if (vertical) {
@@ -66,9 +83,12 @@ function setup(container) {
       const p = (ev.clientX - rect.left) / rect.width * 100;
       write(p);
     }
-  });
-  divider.addEventListener("dblclick", () => write(50));
-  divider.addEventListener("keydown", (ev) => {
+  };
+  const onDblClick = () => {
+    write(50);
+    emitChange();
+  };
+  const onKeyDown = (ev) => {
     const current = readCurrent();
     let next = null;
     if (vertical) {
@@ -83,19 +103,40 @@ function setup(container) {
     if (next === null) return;
     ev.preventDefault();
     write(next);
-  });
+    emitChange();
+  };
+  divider.addEventListener("pointerdown", onDown);
+  divider.addEventListener("pointerup", onUp);
+  divider.addEventListener("pointercancel", onCancel);
+  divider.addEventListener("pointermove", onMove);
+  divider.addEventListener("dblclick", onDblClick);
+  divider.addEventListener("keydown", onKeyDown);
+  return () => {
+    divider.removeEventListener("pointerdown", onDown);
+    divider.removeEventListener("pointerup", onUp);
+    divider.removeEventListener("pointercancel", onCancel);
+    divider.removeEventListener("pointermove", onMove);
+    divider.removeEventListener("dblclick", onDblClick);
+    divider.removeEventListener("keydown", onKeyDown);
+    el.__icenSplitPaneInit = false;
+  };
 }
-function initSplitPane(root = document) {
-  if (typeof document === "undefined") return;
-  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);
+function initSplitPane(root) {
+  const cleanups = [];
+  if (typeof document !== "undefined") {
+    const scope = root ?? document;
+    const panes = [];
+    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) {
+      const cleanup = setup(p);
+      if (cleanup) cleanups.push(cleanup);
+    }
   }
+  return () => {
+    for (const fn of cleanups) fn();
+    cleanups.length = 0;
+  };
 }
 export {
   initSplitPane

package/dist/behaviors/tabs.d.mts

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

package/dist/behaviors/tabs.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/tabs.ts
 function tabButtons(container) {
   return Array.from(container.querySelectorAll("[data-tab]"));
@@ -8,27 +15,52 @@ function tabNames(container) {
 function currentHash() {
   return window.location.hash.replace(/^#/, "");
 }
-function activate(container, name, writeHash) {
+function hashWriteMethod(container) {
+  const raw = container.getAttribute("data-tabs-hash");
+  if (raw === null || raw === "false") return null;
+  return raw === "push" ? "push" : "replace";
+}
+function syncInk(container, name) {
+  const btn = tabButtons(container).find((b) => b.getAttribute("data-tab") === name);
+  const tablist = btn?.parentElement;
+  if (!btn || !tablist) return;
+  const ink = tablist.querySelector(":scope > .tabs-ink");
+  if (!ink) return;
+  ink.style.width = `${btn.offsetWidth}px`;
+  ink.style.transform = `translateX(${btn.offsetLeft}px)`;
+}
+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}`);
+    const method = hashWriteMethod(container);
+    if (method) window.history[method === "push" ? "pushState" : "replaceState"](null, "", `#${name}`);
+  }
+  syncInk(container, name);
+  if (emit) {
+    const index = buttons.findIndex((b) => b.getAttribute("data-tab") === name);
+    const tab = buttons[index] ?? null;
+    emitIcen(container, "icen:tab-change", { tab, panel, index });
   }
 }
 function isDisabled(btn) {
@@ -52,11 +84,12 @@ function nextEnabled(container, from, dir) {
 }
 function setup(container) {
   const el = container;
-  if (el.__icenTabsInit) return;
-  el.__icenTabsInit = true;
-  const useHash = container.hasAttribute("data-tabs-hash");
+  if (el.__icenTabsInit) return void 0;
+  const useHash = hashWriteMethod(container) !== null;
+  const autoActivate = container.getAttribute("data-tabs-activation") === "auto";
   const names = tabNames(container);
   if (names.length === 0) return;
+  el.__icenTabsInit = true;
   const buttons = tabButtons(container);
   buttons.forEach((b) => {
     if (!b.getAttribute("role")) b.setAttribute("role", "tab");
@@ -64,6 +97,18 @@ function setup(container) {
   });
   const tablist = buttons[0]?.parentElement;
   if (tablist && !tablist.getAttribute("role")) tablist.setAttribute("role", "tablist");
+  let ink = null;
+  if (tablist instanceof HTMLElement && tablist.hasAttribute("data-tabs-ink")) {
+    ink = document.createElement("div");
+    ink.className = "tabs-ink";
+    ink.setAttribute("aria-hidden", "true");
+    const initialBtn = buttons.find((b) => b.classList.contains("is-active")) ?? buttons.find((b) => b.getAttribute("data-tab") === names[0]);
+    if (initialBtn) {
+      ink.style.width = `${initialBtn.offsetWidth}px`;
+      ink.style.transform = `translateX(${initialBtn.offsetLeft}px)`;
+    }
+    tablist.appendChild(ink);
+  }
   const onClick = (ev) => {
     const target = ev.target;
     if (!(target instanceof Element)) return;
@@ -71,7 +116,15 @@ 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 followFocus = (idx) => {
+    focusTab(container, idx);
+    if (!autoActivate) return;
+    const target = tabButtons(container)[idx];
+    if (!target || isDisabled(target)) return;
+    const name = target.getAttribute("data-tab");
+    if (name) activate(container, name, useHash, true);
   };
   const onKeyDown = (ev) => {
     const kev = ev;
@@ -86,25 +139,23 @@ function setup(container) {
       case "ArrowRight":
       case "ArrowDown": {
         kev.preventDefault();
-        const next = nextEnabled(container, currentIdx, 1);
-        if (next >= 0) focusTab(container, next);
+        followFocus(nextEnabled(container, currentIdx, 1));
         break;
       }
       case "ArrowLeft":
       case "ArrowUp": {
         kev.preventDefault();
-        const prev = nextEnabled(container, currentIdx, -1);
-        if (prev >= 0) focusTab(container, prev);
+        followFocus(nextEnabled(container, currentIdx, -1));
         break;
       }
       case "Home": {
         kev.preventDefault();
-        focusTab(container, 0);
+        followFocus(nextEnabled(container, -1, 1));
         break;
       }
       case "End": {
         kev.preventDefault();
-        focusTab(container, buttonsList.length - 1);
+        followFocus(nextEnabled(container, buttonsList.length, -1));
         break;
       }
       case "Enter":
@@ -112,7 +163,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 +176,54 @@ 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 onResize = () => {
+    const active = tabButtons(container).find((b) => b.classList.contains("is-active"));
+    const name = active?.getAttribute("data-tab");
+    if (name) syncInk(container, name);
+  };
+  if (ink && typeof window !== "undefined") {
+    window.addEventListener("resize", onResize, { passive: true });
+  }
+  const cleanup = () => {
     container.removeEventListener("click", onClick);
     container.removeEventListener("keydown", onKeyDown);
     window.removeEventListener("hashchange", onHash);
+    if (ink) {
+      window.removeEventListener("resize", onResize);
+      ink.remove();
+      ink = null;
+    }
+    el.__icenTabsInit = false;
   };
+  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,7 @@
+/**
+ * 为 root 下每个 .tag-input 容器初始化（root 自身匹配也算；data-tags 为可选初始值配置）。
+ * 返回销毁函数：移除本次挂上的全部监听并复位幂等标记（销毁后可重新 init）。SSR 下返回 no-op。
+ */
+declare function initTagInput(root?: ParentNode): () => void;
+
+export { initTagInput };