@icen.ai/ui 0.5.0 → 0.8.1

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) {
@@ -165,7 +240,7 @@ function buildDescription(text) {
   el.textContent = text;
   return el;
 }
-function buildActions(record, getHandle) {
+function buildActions(record) {
   const actions = record.opts.actions?.length ? record.opts.actions : record.opts.actionLabel ? [{ label: record.opts.actionLabel, onClick: record.opts.onAction }] : null;
   if (!actions || actions.length === 0) return null;
   const wrap = document.createElement("div");
@@ -179,13 +254,11 @@ function buildActions(record, getHandle) {
     btn.textContent = a.label;
     btn.addEventListener("click", (ev) => {
       ev.stopPropagation();
-      const h = getHandle();
       if (a.onClick) {
         const ret = a.onClick();
         if (ret === false) return;
       }
       if (!a.keepOpen) dismissRecord(record.id);
-      else void h;
     });
     wrap.appendChild(btn);
   }
@@ -243,13 +316,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 +357,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";
@@ -278,7 +377,7 @@ function renderNotification(record, container, getHandle) {
   content.className = "notification-content";
   content.appendChild(buildTitle(record.title));
   if (record.opts.description) content.appendChild(buildDescription(record.opts.description));
-  const actions = buildActions(record, getHandle);
+  const actions = buildActions(record);
   if (actions) content.appendChild(actions);
   const link = buildLink(record);
   if (link) content.appendChild(link);
@@ -314,9 +413,10 @@ function pushToContainer(container, el, priority) {
     container.appendChild(el);
   }
 }
+var LEAVE_FALLBACK_MS = 360;
 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;
@@ -325,32 +425,43 @@ function removeOne(el, onClose) {
     onClose?.();
   };
   el.addEventListener("transitionend", finish, { once: true });
-  window.setTimeout(finish, 360);
+  window.setTimeout(finish, LEAVE_FALLBACK_MS);
 }
-function trimStack(container) {
+function trimStack(container, maxStack, remove) {
   for (; ; ) {
     const items = Array.from(container.querySelectorAll(":scope > .notification"));
-    if (items.length <= cfg.maxStack) return;
+    if (items.length <= 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) remove(target.id);
+      continue;
+    }
     removeOne(target);
+    if (target.id) remove(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 +469,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 = {
@@ -390,37 +515,49 @@ function makeHandle(record) {
   };
   return handle;
 }
-function showRecord(title, kind, opts) {
-  if (!isBrowser()) return null;
-  const container = ensureContainer();
+function pushRecord(title, kind, opts, container, maxStack, cfgRef, ownerStore) {
   const id = opts.id ?? genId();
-  if (store.has(id)) dismissRecord(id);
   const duration = opts.duration ?? 0;
   const record = {
     id,
     title,
     kind,
-    opts: { unread: opts.unread ?? false, ...opts, id },
+    // 默认值放展开前会被显式传入的 { unread: undefined } 覆盖回 undefined，故先展开再兜底
+    opts: { ...opts, unread: opts.unread ?? false, id },
     el: null,
     createdAt: Date.now(),
     duration,
     remaining: duration,
     paused: false,
-    timer: 0
+    timer: 0,
+    startedAt: 0,
+    cfgRef,
+    ownerStore
   };
   const handle = makeHandle(record);
   const el = renderNotification(record, container, () => handle);
   record.el = el;
   handle.el = el;
   pushToContainer(container, el, record.opts.priority ?? "normal");
+  ownerStore?.set(id, record);
   store.set(id, record);
   attachTimer(record, handle);
-  trimStack(container);
+  trimStack(container, maxStack, (removedId) => {
+    ownerStore?.delete(removedId);
+    store.delete(removedId);
+  });
   persistSave();
-  playSound();
+  playSound(cfgRef?.sound ?? cfg.sound);
   opts.onShow?.(handle);
   return handle;
 }
+function showRecord(title, kind, opts) {
+  if (!isBrowser()) return null;
+  const container = ensureContainer();
+  const id = opts.id ?? genId();
+  if (store.has(id)) dismissRecord(id);
+  return pushRecord(title, kind, opts, container, cfg.maxStack);
+}
 function dismissRecord(id) {
   const record = store.get(id);
   if (!record) {
@@ -432,6 +569,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 +595,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 +690,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,13 +700,17 @@ function createNotificationCenter(parent = document.body, opts = {}) {
       },
       markAllRead() {
       },
+      destroy() {
+      },
       get: () => null,
       getAll: () => [],
       config() {
       },
+      // SSR 桩：非真实元素，destroy 前不得触碰 el（本分支内其余方法均为 no-op）
       el: {}
     };
   }
+  const mount = parent ?? document.body;
   const local = {
     position: opts.position ?? "top-right",
     maxStack: opts.maxStack ?? 5,
@@ -576,48 +723,29 @@ 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();
-  function push(input) {
-    const kind = input.kind ?? "info";
-    const opts2 = input.options ?? {};
-    const id = opts2.id ?? genId();
-    const duration = opts2.duration ?? 0;
-    const record = {
-      id,
-      title: input.title,
-      kind,
-      opts: { unread: opts2.unread ?? false, ...opts2, id },
-      el: null,
-      createdAt: Date.now(),
-      duration,
-      remaining: duration,
-      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");
-    localStore.set(id, record);
-    store.set(id, record);
-    attachTimer(record, handle);
-    for (; ; ) {
-      const items = Array.from(container.querySelectorAll(":scope > .notification"));
-      if (items.length <= local.maxStack) break;
-      const target = items.find((it) => !it.classList.contains("is-priority")) ?? items[0];
-      if (!target) break;
-      const tid = target.id;
-      removeOne(target);
-      const rec = tid ? localStore.get(tid) : null;
-      if (rec) {
-        localStore.delete(tid);
-        store.delete(tid);
-      }
+  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);
     }
-    opts2.onShow?.(handle);
-    return handle;
+  }
+  function push(input) {
+    if (destroyed) return null;
+    return pushRecord(
+      input.title,
+      input.kind ?? "info",
+      input.options ?? {},
+      container,
+      local.maxStack,
+      local,
+      localStore
+    );
   }
   function dismiss(id) {
     if (id) {
@@ -628,6 +756,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 +770,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 +795,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,51 +845,41 @@ 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;
     }
   }
 );
 function initNotification() {
-  if (!isBrowser()) return;
-  if (globalInit.done) return;
+  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);
+  const restored = [];
+  if (key) {
+    knownPersistKeys.add(key);
+    for (const r of restorePersisted(container, key)) {
+      store.set(r.id, r);
+      restored.push(r);
     }
   }
+  return () => {
+    for (const r of restored) {
+      if (r.timer) window.clearTimeout(r.timer);
+      store.delete(r.id);
+      r.el?.remove();
+    }
+    restored.length = 0;
+    if (container.childElementCount === 0) container.remove();
+    globalInit.done = false;
+  };
 }
 export {
   createNotificationCenter,