@icen.ai/ui 0.9.0 → 0.11.0

package/dist/behaviors/svg-parse.d.mts

@@ -0,0 +1,14 @@
+/**
+ * @icen.ai/ui — 内联 SVG 字符串 → 消毒 SVGElement（全库单点，ai-core.svgIcon / notification / toast /
+ * back-top / charts 全部经此）。SSR 安全：无 document/DOMParser 返回 null。
+ *
+ * 纪律：
+ *  - 缺 xmlns 自动补——image/svg+xml 是 XML 严格解析，无 xmlns 的 <svg> 落在空命名空间，
+ *    浏览器一律不渲染（图标作者按 HTML 习惯常省 xmlns，曾致库内 19 处图标存量隐身）；
+ *  - 消毒：剥全部 on* 事件属性、剔除 script/foreignObject 子树、剔除 javascript: 协议的
+ *    href/xlink:href（纵深防御）；
+ *  - 只接纳 <svg> 根元素，解析失败/含 parsererror 返回 null（不猜不兜底）。
+ */
+declare function parseSvg(source: string): SVGElement | null;
+
+export { parseSvg };

package/dist/behaviors/svg-parse.mjs

@@ -0,0 +1,37 @@
+// src/behaviors/svg-parse.ts
+function parseSvg(source) {
+  if (typeof document === "undefined" || typeof DOMParser === "undefined") return null;
+  const trimmed = source.trimStart();
+  if (!trimmed.startsWith("<svg")) return null;
+  const src = /^<svg(?![^>]*\bxmlns[=:])/i.test(trimmed) ? trimmed.replace(/^<svg/i, '<svg xmlns="http://www.w3.org/2000/svg"') : trimmed;
+  let parsed;
+  try {
+    parsed = new DOMParser().parseFromString(src, "image/svg+xml");
+  } catch {
+    return null;
+  }
+  const root = parsed.documentElement;
+  if (!root || root.tagName.toLowerCase() !== "svg" || parsed.querySelector("parsererror")) return null;
+  const sanitize = (el) => {
+    for (const attr of Array.from(el.attributes)) {
+      const name = attr.name.toLowerCase();
+      if (name.startsWith("on")) el.removeAttribute(attr.name);
+      if ((name === "href" || name === "xlink:href") && attr.value.trim().toLowerCase().startsWith("javascript:")) {
+        el.removeAttribute(attr.name);
+      }
+    }
+    for (const child of Array.from(el.children)) {
+      const tag = child.tagName.toLowerCase();
+      if (tag === "script" || tag === "foreignobject") {
+        child.remove();
+        continue;
+      }
+      sanitize(child);
+    }
+  };
+  sanitize(root);
+  return document.importNode(root, true);
+}
+export {
+  parseSvg
+};

package/dist/behaviors/tabs.d.mts

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

package/dist/behaviors/tabs.mjs

@@ -7,33 +7,40 @@ function emitIcen(source, type, detail) {
 
 // src/behaviors/tabs.ts
 function tabButtons(container) {
-  return Array.from(container.querySelectorAll("[data-tab]"));
+  return Array.from(container.querySelectorAll("[data-icen-tab]"));
 }
 function tabNames(container) {
-  return tabButtons(container).map((t) => t.getAttribute("data-tab")).filter((n) => n !== null);
+  return tabButtons(container).map((t) => t.getAttribute("data-icen-tab")).filter((n) => n !== null);
 }
 function currentHash() {
   return window.location.hash.replace(/^#/, "");
 }
 function hashWriteMethod(container) {
-  const raw = container.getAttribute("data-tabs-hash");
+  const raw = container.getAttribute("data-icen-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 btn = tabButtons(container).find((b) => b.getAttribute("data-icen-tab") === name);
   const tablist = btn?.parentElement;
   if (!btn || !tablist) return;
-  const ink = tablist.querySelector(":scope > .tabs-ink");
+  const ink = tablist.querySelector(":scope > .icen-tabs-ink");
   if (!ink) return;
   ink.style.width = `${btn.offsetWidth}px`;
   ink.style.transform = `translateX(${btn.offsetLeft}px)`;
+  if (btn.offsetTop > 0) {
+    ink.style.top = `${btn.offsetTop + btn.offsetHeight}px`;
+    ink.style.bottom = "auto";
+  } else {
+    ink.style.top = "";
+    ink.style.bottom = "";
+  }
 }
 function activate(container, name, writeHash, emit = false) {
   const buttons = tabButtons(container);
   let matched = false;
   buttons.forEach((t) => {
-    const on = t.getAttribute("data-tab") === name;
+    const on = t.getAttribute("data-icen-tab") === name;
     if (on) matched = true;
     t.classList.toggle("is-active", on);
     t.setAttribute("aria-selected", String(on));
@@ -41,13 +48,13 @@ function activate(container, name, writeHash, emit = false) {
   });
   if (!matched) return;
   let panel = null;
-  container.querySelectorAll("[data-tab-panel]").forEach((p) => {
-    const isOn = p.getAttribute("data-tab-panel") === name;
+  container.querySelectorAll("[data-icen-tab-panel]").forEach((p) => {
+    const isOn = p.getAttribute("data-icen-tab-panel") === name;
     p.hidden = !isOn;
     if (isOn) {
       panel = p;
       if (!p.getAttribute("aria-labelledby")) {
-        const btn = buttons.find((b) => b.getAttribute("data-tab") === name);
+        const btn = buttons.find((b) => b.getAttribute("data-icen-tab") === name);
         if (btn?.id) p.setAttribute("aria-labelledby", btn.id);
       }
     }
@@ -58,7 +65,7 @@ function activate(container, name, writeHash, emit = false) {
   }
   syncInk(container, name);
   if (emit) {
-    const index = buttons.findIndex((b) => b.getAttribute("data-tab") === name);
+    const index = buttons.findIndex((b) => b.getAttribute("data-icen-tab") === name);
     const tab = buttons[index] ?? null;
     emitIcen(container, "icen:tab-change", { tab, panel, index });
   }
@@ -70,6 +77,9 @@ function focusTab(container, idx) {
   const buttons = tabButtons(container);
   const target = buttons[idx];
   if (!target || isDisabled(target)) return;
+  buttons.forEach((b) => {
+    b.tabIndex = b === target ? 0 : -1;
+  });
   target.focus();
 }
 function nextEnabled(container, from, dir) {
@@ -86,7 +96,7 @@ function setup(container) {
   const el = container;
   if (el.__icenTabsInit) return void 0;
   const useHash = hashWriteMethod(container) !== null;
-  const autoActivate = container.getAttribute("data-tabs-activation") === "auto";
+  const autoActivate = container.getAttribute("data-icen-tabs-activation") === "auto";
   const names = tabNames(container);
   if (names.length === 0) return;
   el.__icenTabsInit = true;
@@ -98,11 +108,11 @@ 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")) {
+  if (tablist instanceof HTMLElement && tablist.hasAttribute("data-icen-tabs-ink")) {
     ink = document.createElement("div");
-    ink.className = "tabs-ink";
+    ink.className = "icen-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]);
+    const initialBtn = buttons.find((b) => b.classList.contains("is-active")) ?? buttons.find((b) => b.getAttribute("data-icen-tab") === names[0]);
     if (initialBtn) {
       ink.style.width = `${initialBtn.offsetWidth}px`;
       ink.style.transform = `translateX(${initialBtn.offsetLeft}px)`;
@@ -112,10 +122,10 @@ function setup(container) {
   const onClick = (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 btn = target.closest("[data-icen-tab]");
+    if (!btn || btn.closest("[data-icen-tabs]") !== container) return;
     if (btn instanceof HTMLElement && isDisabled(btn)) return;
-    const name = btn.getAttribute("data-tab");
+    const name = btn.getAttribute("data-icen-tab");
     if (name) activate(container, name, useHash, true);
   };
   const followFocus = (idx) => {
@@ -123,15 +133,15 @@ function setup(container) {
     if (!autoActivate) return;
     const target = tabButtons(container)[idx];
     if (!target || isDisabled(target)) return;
-    const name = target.getAttribute("data-tab");
+    const name = target.getAttribute("data-icen-tab");
     if (name) activate(container, name, useHash, true);
   };
   const onKeyDown = (ev) => {
     const kev = ev;
     const target = kev.target;
     if (!(target instanceof Element)) return;
-    const btn = target.closest("[data-tab]");
-    if (!btn || btn.closest("[data-tabs]") !== container) return;
+    const btn = target.closest("[data-icen-tab]");
+    if (!btn || btn.closest("[data-icen-tabs]") !== container) return;
     const buttonsList = tabButtons(container);
     const currentIdx = buttonsList.indexOf(btn);
     if (currentIdx === -1) return;
@@ -162,7 +172,7 @@ function setup(container) {
       case " ": {
         if (btn instanceof HTMLElement && !isDisabled(btn)) {
           kev.preventDefault();
-          const name = btn.getAttribute("data-tab");
+          const name = btn.getAttribute("data-icen-tab");
           if (name) activate(container, name, useHash, true);
         }
         break;
@@ -176,7 +186,7 @@ function setup(container) {
     const h = currentHash();
     if (names.includes(h)) initial = h;
   } else {
-    const n = container.querySelector("[data-tab].is-active")?.getAttribute("data-tab");
+    const n = container.querySelector("[data-icen-tab].is-active")?.getAttribute("data-icen-tab");
     if (n && names.includes(n)) initial = n;
   }
   activate(container, initial ?? names[0], false);
@@ -189,7 +199,7 @@ function setup(container) {
   }
   const onResize = () => {
     const active = tabButtons(container).find((b) => b.classList.contains("is-active"));
-    const name = active?.getAttribute("data-tab");
+    const name = active?.getAttribute("data-icen-tab");
     if (name) syncInk(container, name);
   };
   if (ink && typeof window !== "undefined") {
@@ -213,8 +223,8 @@ function initTabs(root) {
   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]")));
+    if (scope instanceof Element && scope.matches("[data-icen-tabs]")) containers.push(scope);
+    containers.push(...Array.from(scope.querySelectorAll("[data-icen-tabs]")));
     for (const c of containers) {
       const cleanup = setup(c);
       if (cleanup) cleanups.push(cleanup);

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

@@ -1,7 +1,25 @@
-/**
- * 为 root 下每个 .tag-input 容器初始化（root 自身匹配也算；data-tags 为可选初始值配置）。
- * 返回销毁函数：移除本次挂上的全部监听并复位幂等标记（销毁后可重新 init）。SSR 下返回 no-op。
- */
+interface TagInputOptions {
+    value?: string[];
+    max?: number;
+    allowDuplicates?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** Repeated native form entries, one per committed tag. Defaults to input.name. */
+    name?: string;
+}
+interface TagInputHandle {
+    getValue(): string[];
+    setValue(value: string[], options?: {
+        emit?: boolean;
+    }): void;
+    update(options: Omit<TagInputOptions, 'value'>): void;
+    focus(): void;
+    destroy(): void;
+}
+/** Explicit lifecycle handle; repeated creation reuses the editor and updates options. */
+declare function createTagInput(root: HTMLElement, options?: TagInputOptions): TagInputHandle;
+/** Dynamic scoped initialization. Overlapping scopes share each editor and only
+ * the last scope disposes it; an explicit createTagInput handle owns its lifecycle. */
 declare function initTagInput(root?: ParentNode): () => void;
 
-export { initTagInput };
+export { type TagInputHandle, type TagInputOptions, createTagInput, initTagInput };