@icen.ai/ui 0.5.0 → 0.8.0

package/dist/behaviors/notification.mjs

@@ -42,37 +42,52 @@ function syncContainerPosition(el) {
   el.dataset.position = cfg.position;
 }
 var DEFAULT_PERSIST_KEY = "icen.ui.notifications";
-function persistKey() {
-  if (cfg.persist === true) return DEFAULT_PERSIST_KEY;
-  if (typeof cfg.persist === "string") return cfg.persist;
+var knownPersistKeys = /* @__PURE__ */ new Set();
+function persistKeyFor(p) {
+  if (p === true) return DEFAULT_PERSIST_KEY;
+  if (typeof p === "string" && p.length > 0) return p;
   return null;
 }
+function recordPersist(record) {
+  return record.cfgRef ? record.cfgRef.persist : cfg.persist;
+}
 function persistSave() {
-  const key = persistKey();
-  if (!key) return;
   try {
-    const items = Array.from(store.values()).filter((r) => !r.opts.duration || r.opts.duration === 0).map((r) => ({
-      id: r.id,
-      title: r.title,
-      kind: r.kind,
-      description: r.opts.description ?? "",
-      tag: r.opts.tag,
-      unread: r.opts.unread,
-      priority: r.opts.priority,
-      progress: r.opts.progress,
-      progressLabel: r.opts.progressLabel,
-      link: r.opts.link,
-      linkLabel: r.opts.linkLabel,
-      data: r.opts.data,
-      createdAt: r.createdAt
-    }));
-    localStorage.setItem(key, JSON.stringify(items));
+    const groups = /* @__PURE__ */ new Map();
+    for (const key of knownPersistKeys) groups.set(key, []);
+    for (const r of store.values()) {
+      const key = persistKeyFor(recordPersist(r));
+      if (!key) continue;
+      knownPersistKeys.add(key);
+      let bucket = groups.get(key);
+      if (!bucket) {
+        bucket = [];
+        groups.set(key, bucket);
+      }
+      if (r.opts.duration) continue;
+      bucket.push({
+        id: r.id,
+        title: r.title,
+        kind: r.kind,
+        description: r.opts.description ?? "",
+        tag: r.opts.tag,
+        unread: r.opts.unread,
+        priority: r.opts.priority,
+        progress: r.opts.progress,
+        progressLabel: r.opts.progressLabel,
+        link: r.opts.link,
+        linkLabel: r.opts.linkLabel,
+        data: r.opts.data,
+        createdAt: r.createdAt
+      });
+    }
+    for (const [key, items] of groups) {
+      localStorage.setItem(key, JSON.stringify(items));
+    }
   } catch {
   }
 }
-function persistLoad() {
-  const key = persistKey();
-  if (!key) return [];
+function persistLoad(key) {
   try {
     const raw = localStorage.getItem(key);
     if (!raw) return [];
@@ -82,12 +97,49 @@ function persistLoad() {
     return [];
   }
 }
+function restorePersisted(container, key, cfgRef) {
+  const records = [];
+  for (const item of persistLoad(key)) {
+    const record = {
+      id: item.id,
+      title: item.title,
+      kind: item.kind,
+      opts: {
+        id: item.id,
+        description: item.description,
+        tag: item.tag,
+        unread: item.unread,
+        priority: item.priority,
+        progress: item.progress,
+        progressLabel: item.progressLabel,
+        link: item.link,
+        linkLabel: item.linkLabel,
+        data: item.data
+      },
+      el: null,
+      createdAt: item.createdAt ?? Date.now(),
+      duration: 0,
+      remaining: 0,
+      paused: false,
+      timer: 0,
+      startedAt: 0,
+      cfgRef
+    };
+    const handle = makeHandle(record);
+    const el = renderNotification(record, container, () => handle);
+    record.el = el;
+    handle.el = el;
+    pushToContainer(container, el, record.opts.priority ?? "normal");
+    records.push(record);
+  }
+  return records;
+}
 var audioCtx = null;
-function playSound() {
-  if (!cfg.sound) return;
+function playSound(sound) {
+  if (!sound) return;
   try {
-    if (typeof cfg.sound === "string") {
-      const audio = new Audio(cfg.sound);
+    if (typeof sound === "string") {
+      const audio = new Audio(sound);
       void audio.play();
       return;
     }
@@ -115,6 +167,28 @@ function playSound() {
   } catch {
   }
 }
+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;
+  }
+}
 function buildIcon(record) {
   const wrap = document.createElement("span");
   wrap.className = "notification-icon";
@@ -141,15 +215,16 @@ function buildIcon(record) {
       img.alt = "";
       wrap.appendChild(img);
     } else {
-      wrap.innerHTML = icon;
+      const svg = sanitizeSvgIcon(icon);
+      if (svg) wrap.appendChild(svg);
+      else wrap.textContent = icon;
     }
     return wrap;
   }
-  if (record.opts.progress !== void 0 && record.opts.progress >= 0) {
-    wrap.innerHTML = PROGRESS_ICON;
-  } else {
-    wrap.innerHTML = KIND_ICON[record.kind];
-  }
+  const fallback = sanitizeSvgIcon(
+    record.opts.progress !== void 0 && record.opts.progress >= 0 ? PROGRESS_ICON : KIND_ICON[record.kind]
+  );
+  if (fallback) wrap.appendChild(fallback);
   return wrap;
 }
 function buildTitle(title) {
@@ -243,13 +318,39 @@ function buildCountdownBar(record) {
   bar.appendChild(fill);
   return bar;
 }
+function syncCountdownBar(record) {
+  const el = record.el;
+  if (!el) return;
+  const existing = el.querySelector(".notification-countdown");
+  if (record.duration <= 0 || record.opts.showCountdown === false) {
+    existing?.remove();
+    return;
+  }
+  let fill;
+  if (existing) {
+    fill = existing.querySelector(".notification-countdown-fill");
+  } else {
+    const bar = buildCountdownBar(record);
+    if (!bar) return;
+    el.appendChild(bar);
+    fill = bar.querySelector(".notification-countdown-fill");
+  }
+  if (fill) {
+    fill.style.animation = "none";
+    void fill.offsetWidth;
+    fill.style.animation = "";
+    fill.style.animationDuration = record.duration + "ms";
+    fill.style.animationPlayState = "running";
+  }
+}
 function buildClose(record) {
   if (record.opts.closable === false) return null;
   const btn = document.createElement("button");
   btn.type = "button";
   btn.className = "notification-close";
   btn.setAttribute("aria-label", "\u5173\u95ED");
-  btn.innerHTML = CLOSE_SVG;
+  const svg = sanitizeSvgIcon(CLOSE_SVG);
+  if (svg) btn.appendChild(svg);
   btn.addEventListener("click", (ev) => {
     ev.stopPropagation();
     dismissRecord(record.id);
@@ -258,7 +359,7 @@ function buildClose(record) {
 }
 function renderNotification(record, container, getHandle) {
   const el = document.createElement("div");
-  let cls = record.kind === "info" ? "notification" : `notification notif--${record.kind}`;
+  let cls = record.kind === "info" ? "notification" : `notification notification--${record.kind}`;
   if (record.opts.priority === "high") cls += " is-priority";
   if (record.opts.unread) cls += " is-unread";
   if (record.opts.progress !== void 0 && record.opts.progress >= 0) cls += " is-progress";
@@ -315,8 +416,8 @@ function pushToContainer(container, el, priority) {
   }
 }
 function removeOne(el, onClose) {
-  if (el.classList.contains("leaving")) return;
-  el.classList.add("leaving");
+  if (el.classList.contains("is-leaving")) return;
+  el.classList.add("is-leaving");
   let done = false;
   const finish = () => {
     if (done) return;
@@ -333,24 +434,35 @@ function trimStack(container) {
     if (items.length <= cfg.maxStack) return;
     const target = items.find((it) => !it.classList.contains("is-priority")) ?? items[0];
     if (!target) return;
+    const rec = target.id ? store.get(target.id) : void 0;
+    if (rec?.timer) window.clearTimeout(rec.timer);
+    if (target.classList.contains("is-leaving")) {
+      target.remove();
+      if (target.id) store.delete(target.id);
+      continue;
+    }
     removeOne(target);
+    if (target.id) store.delete(target.id);
+    return;
   }
 }
 function attachTimer(record, handle) {
-  if (!record.duration || record.duration <= 0) return;
   const el = record.el;
   if (!el) return;
   const start = () => {
     if (record.timer) window.clearTimeout(record.timer);
+    record.timer = 0;
+    if (record.remaining <= 0) return;
+    record.startedAt = Date.now();
     record.timer = window.setTimeout(() => dismissRecord(record.id), record.remaining);
     record.paused = false;
   };
   const pause = () => {
     if (record.paused) return;
-    if (record.timer) {
-      window.clearTimeout(record.timer);
-      record.timer = 0;
-    }
+    if (!record.timer) return;
+    window.clearTimeout(record.timer);
+    record.timer = 0;
+    record.remaining = Math.max(0, record.remaining - (Date.now() - record.startedAt));
     record.paused = true;
     el.classList.add("is-paused");
     const fill = el.querySelector(".notification-countdown-fill");
@@ -358,19 +470,33 @@ function attachTimer(record, handle) {
   };
   const resume = () => {
     if (!record.paused) return;
+    record.paused = false;
     el.classList.remove("is-paused");
     const fill = el.querySelector(".notification-countdown-fill");
     if (fill) fill.style.animationPlayState = "running";
+    if (record.remaining <= 0) {
+      dismissRecord(record.id);
+      return;
+    }
+    start();
+  };
+  record.restartTimer = () => {
+    record.paused = false;
+    el.classList.remove("is-paused");
     start();
   };
-  const pauseOnHover = record.opts.pauseOnHover ?? cfg.pauseOnHover;
-  if (pauseOnHover) {
+  const pauseOnHover = record.opts.pauseOnHover ?? record.cfgRef?.pauseOnHover ?? cfg.pauseOnHover;
+  if (pauseOnHover && !record.hoverBound) {
+    record.hoverBound = true;
     el.addEventListener("mouseenter", () => handle.pause());
     el.addEventListener("mouseleave", () => handle.resume());
   }
   handle.pause = pause;
   handle.resume = resume;
-  start();
+  if (record.duration > 0) {
+    record.remaining = record.duration;
+    start();
+  }
 }
 function makeHandle(record) {
   const handle = {
@@ -406,7 +532,8 @@ function showRecord(title, kind, opts) {
     duration,
     remaining: duration,
     paused: false,
-    timer: 0
+    timer: 0,
+    startedAt: 0
   };
   const handle = makeHandle(record);
   const el = renderNotification(record, container, () => handle);
@@ -417,7 +544,7 @@ function showRecord(title, kind, opts) {
   attachTimer(record, handle);
   trimStack(container);
   persistSave();
-  playSound();
+  playSound(record.cfgRef?.sound ?? cfg.sound);
   opts.onShow?.(handle);
   return handle;
 }
@@ -432,6 +559,7 @@ function dismissRecord(id) {
   const handle = makeHandle(record);
   const onClose = record.opts.onClose;
   store.delete(id);
+  record.ownerStore?.delete(id);
   if (record.el) removeOne(record.el, () => onClose?.(handle));
   else onClose?.(handle);
   persistSave();
@@ -457,6 +585,11 @@ function updateRecord(id, patch) {
   if (patch.linkLabel !== void 0) record.opts.linkLabel = patch.linkLabel;
   const el = record.el;
   if (!el) return;
+  if (patch.duration !== void 0 && el.isConnected) {
+    syncCountdownBar(record);
+    if (record.restartTimer) record.restartTimer();
+    else if (patch.duration > 0) attachTimer(record, makeHandle(record));
+  }
   if (patch.title !== void 0) {
     const t = el.querySelector(".notification-title");
     if (t) t.textContent = patch.title;
@@ -547,7 +680,7 @@ function confirmDialog(title, opts = {}) {
     if (!handle) settle(false);
   });
 }
-function createNotificationCenter(parent = document.body, opts = {}) {
+function createNotificationCenter(parent, opts = {}) {
   if (!isBrowser()) {
     return {
       push: () => null,
@@ -557,6 +690,8 @@ function createNotificationCenter(parent = document.body, opts = {}) {
       },
       markAllRead() {
       },
+      destroy() {
+      },
       get: () => null,
       getAll: () => [],
       config() {
@@ -564,6 +699,7 @@ function createNotificationCenter(parent = document.body, opts = {}) {
       el: {}
     };
   }
+  const mount = parent ?? document.body;
   const local = {
     position: opts.position ?? "top-right",
     maxStack: opts.maxStack ?? 5,
@@ -576,9 +712,20 @@ function createNotificationCenter(parent = document.body, opts = {}) {
   container.setAttribute("role", "region");
   container.setAttribute("aria-label", "\u901A\u77E5");
   container.dataset.position = local.position;
-  parent.appendChild(container);
+  mount.appendChild(container);
   const localStore = /* @__PURE__ */ new Map();
+  let destroyed = false;
+  const pKey = persistKeyFor(local.persist);
+  if (pKey) {
+    knownPersistKeys.add(pKey);
+    for (const r of restorePersisted(container, pKey, local)) {
+      r.ownerStore = localStore;
+      localStore.set(r.id, r);
+      store.set(r.id, r);
+    }
+  }
   function push(input) {
+    if (destroyed) return null;
     const kind = input.kind ?? "info";
     const opts2 = input.options ?? {};
     const id = opts2.id ?? genId();
@@ -593,7 +740,10 @@ function createNotificationCenter(parent = document.body, opts = {}) {
       duration,
       remaining: duration,
       paused: false,
-      timer: 0
+      timer: 0,
+      startedAt: 0,
+      cfgRef: local,
+      ownerStore: localStore
     };
     const handle = makeHandle(record);
     const el = renderNotification(record, container, () => handle);
@@ -609,13 +759,25 @@ function createNotificationCenter(parent = document.body, opts = {}) {
       const target = items.find((it) => !it.classList.contains("is-priority")) ?? items[0];
       if (!target) break;
       const tid = target.id;
+      const rec = tid ? localStore.get(tid) : void 0;
+      if (rec?.timer) window.clearTimeout(rec.timer);
+      if (target.classList.contains("is-leaving")) {
+        target.remove();
+        if (tid) {
+          localStore.delete(tid);
+          store.delete(tid);
+        }
+        continue;
+      }
       removeOne(target);
-      const rec = tid ? localStore.get(tid) : null;
-      if (rec) {
+      if (tid) {
         localStore.delete(tid);
         store.delete(tid);
       }
+      break;
     }
+    persistSave();
+    playSound(local.sound);
     opts2.onShow?.(handle);
     return handle;
   }
@@ -628,6 +790,7 @@ function createNotificationCenter(parent = document.body, opts = {}) {
       localStore.delete(id);
       store.delete(id);
       if (rec.el) removeOne(rec.el, () => rec.opts.onClose?.(handle));
+      persistSave();
       return;
     }
     Array.from(localStore.keys()).forEach((k) => dismiss(k));
@@ -641,11 +804,22 @@ function createNotificationCenter(parent = document.body, opts = {}) {
       rec.el?.classList.remove("is-unread");
     });
   }
+  function destroy() {
+    if (destroyed) return;
+    destroyed = true;
+    localStore.forEach((rec) => {
+      if (rec.timer) window.clearTimeout(rec.timer);
+      store.delete(rec.id);
+    });
+    localStore.clear();
+    container.remove();
+  }
   return {
     push,
     dismiss,
     clear,
     markAllRead,
+    destroy,
     get: (id) => localStore.get(id) ?? null,
     getAll: () => Array.from(localStore.values()),
     config: (next) => {
@@ -655,7 +829,11 @@ function createNotificationCenter(parent = document.body, opts = {}) {
       }
       if (typeof next.maxStack === "number" && next.maxStack > 0) local.maxStack = next.maxStack;
       if (typeof next.pauseOnHover === "boolean") local.pauseOnHover = next.pauseOnHover;
-      if (next.persist !== void 0) local.persist = next.persist;
+      if (next.persist !== void 0) {
+        local.persist = next.persist;
+        const k = persistKeyFor(next.persist);
+        if (k) knownPersistKeys.add(k);
+      }
       if (next.sound !== void 0) local.sound = next.sound;
     },
     el: container
@@ -701,7 +879,11 @@ var notify = Object.assign(
       }
       if (typeof opts.maxStack === "number" && opts.maxStack > 0) cfg.maxStack = opts.maxStack;
       if (typeof opts.pauseOnHover === "boolean") cfg.pauseOnHover = opts.pauseOnHover;
-      if (opts.persist !== void 0) cfg.persist = opts.persist;
+      if (opts.persist !== void 0) {
+        cfg.persist = opts.persist;
+        const k = persistKeyFor(opts.persist);
+        if (k) knownPersistKeys.add(k);
+      }
       if (opts.sound !== void 0) cfg.sound = opts.sound;
     }
   }
@@ -710,40 +892,12 @@ function initNotification() {
   if (!isBrowser()) return;
   if (globalInit.done) return;
   globalInit.done = true;
-  ensureContainer();
-  if (cfg.persist) {
-    const items = persistLoad();
-    const container = ensureContainer();
-    for (const item of items) {
-      const record = {
-        id: item.id,
-        title: item.title,
-        kind: item.kind,
-        opts: {
-          id: item.id,
-          description: item.description,
-          tag: item.tag,
-          unread: item.unread,
-          priority: item.priority,
-          progress: item.progress,
-          progressLabel: item.progressLabel,
-          link: item.link,
-          linkLabel: item.linkLabel,
-          data: item.data
-        },
-        el: null,
-        createdAt: item.createdAt ?? Date.now(),
-        duration: 0,
-        remaining: 0,
-        paused: false,
-        timer: 0
-      };
-      const handle = makeHandle(record);
-      const el = renderNotification(record, container, () => handle);
-      record.el = el;
-      handle.el = el;
-      pushToContainer(container, el, record.opts.priority ?? "normal");
-      store.set(record.id, record);
+  const container = ensureContainer();
+  const key = persistKeyFor(cfg.persist);
+  if (key) {
+    knownPersistKeys.add(key);
+    for (const r of restorePersisted(container, key)) {
+      store.set(r.id, r);
     }
   }
 }

package/dist/behaviors/popover.d.mts

@@ -0,0 +1,46 @@
+interface PopoverRect {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}
+interface PopoverViewport {
+    width: number;
+    height: number;
+}
+type PopoverSide = 'top' | 'bottom';
+type PopoverAlign = 'start' | 'center' | 'end' | 'stretch';
+interface PopoverLayoutOptions {
+    side?: PopoverSide;
+    align?: PopoverAlign;
+    offset?: number;
+    margin?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    /** 内容预期高度：避免用被裁剪的实测高度参与选侧 */
+    contentHeightHint?: number;
+}
+interface PopoverLayout {
+    side: PopoverSide;
+    left: number;
+    top: number;
+    width: number;
+    maxHeight: number;
+}
+interface OpenPopoverOptions extends PopoverLayoutOptions {
+    anchor: Element | PopoverRect;
+    /** 关闭（含外点/Esc 触发的关闭）后的回调 */
+    onClose?: () => void;
+}
+/** 视口智能布局：返回 {side, left, top, width, maxHeight}。 */
+declare function computePopoverLayout(anchor: PopoverRect, viewport: PopoverViewport, opts?: PopoverLayoutOptions): PopoverLayout;
+/** 打开浮层：panel 移入 body 并按 anchor 布局；重复调用同一 panel 为先关后开。 */
+declare function openPopover(panel: HTMLElement, options: OpenPopoverOptions): void;
+/** 关闭浮层：移除监听并把 panel 还原到打开前的位置与 hidden 状态。 */
+declare function closePopover(panel: HTMLElement): void;
+
+export { type OpenPopoverOptions, type PopoverAlign, type PopoverLayout, type PopoverLayoutOptions, type PopoverRect, type PopoverSide, type PopoverViewport, closePopover, computePopoverLayout, openPopover };

package/dist/behaviors/popover.mjs

@@ -139,7 +139,8 @@ function closePopover(panel) {
   if (!state) return;
   openPanels.delete(panel);
   panel.style.visibility = state.prevVisibility;
-  panel.hidden = state.wasHidden;
+  if (typeof state.wasHidden === "string") panel.setAttribute("hidden", state.wasHidden);
+  else panel.hidden = state.wasHidden;
   panel.style.left = "";
   panel.style.top = "";
   panel.style.width = "";

package/dist/behaviors/select.d.mts

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