@icen.ai/ui 0.4.0 → 0.8.0

package/dist/behaviors/notification.mjs

@@ -0,0 +1,908 @@
+// src/behaviors/notification.ts
+var KIND_ICON = {
+  success: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>',
+  warning: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>',
+  error: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>',
+  info: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>'
+};
+var CLOSE_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>';
+var PROGRESS_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>';
+var cfg = {
+  position: "top-right",
+  maxStack: 5,
+  pauseOnHover: true,
+  persist: false,
+  sound: false
+};
+var store = /* @__PURE__ */ new Map();
+var globalInit = { done: false };
+function isBrowser() {
+  return typeof document !== "undefined" && typeof window !== "undefined";
+}
+function genId() {
+  return "notif-" + Math.random().toString(36).slice(2, 10);
+}
+function ensureContainer() {
+  const sel = `.notification-container[data-notif-default]`;
+  const existing = document.body.querySelector(sel);
+  if (existing) {
+    syncContainerPosition(existing);
+    return existing;
+  }
+  const el = document.createElement("div");
+  el.className = "notification-container";
+  el.setAttribute("role", "region");
+  el.setAttribute("aria-label", "\u901A\u77E5");
+  el.dataset.notifDefault = "";
+  syncContainerPosition(el);
+  document.body.appendChild(el);
+  return el;
+}
+function syncContainerPosition(el) {
+  el.dataset.position = cfg.position;
+}
+var DEFAULT_PERSIST_KEY = "icen.ui.notifications";
+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() {
+  try {
+    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(key) {
+  try {
+    const raw = localStorage.getItem(key);
+    if (!raw) return [];
+    const arr = JSON.parse(raw);
+    return Array.isArray(arr) ? arr : [];
+  } catch {
+    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(sound) {
+  if (!sound) return;
+  try {
+    if (typeof sound === "string") {
+      const audio = new Audio(sound);
+      void audio.play();
+      return;
+    }
+    if (!audioCtx) {
+      const Ctor = window.AudioContext ?? window.webkitAudioContext;
+      if (!Ctor) return;
+      audioCtx = new Ctor();
+    }
+    if (audioCtx.state === "suspended") void audioCtx.resume();
+    const now = audioCtx.currentTime;
+    [880, 1320].forEach((freq, i) => {
+      const osc = audioCtx.createOscillator();
+      const gain = audioCtx.createGain();
+      osc.connect(gain);
+      gain.connect(audioCtx.destination);
+      osc.frequency.value = freq;
+      osc.type = "sine";
+      const t = now + i * 0.08;
+      gain.gain.setValueAtTime(0, t);
+      gain.gain.linearRampToValueAtTime(0.08, t + 0.01);
+      gain.gain.exponentialRampToValueAtTime(1e-3, t + 0.12);
+      osc.start(t);
+      osc.stop(t + 0.13);
+    });
+  } 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";
+  wrap.setAttribute("aria-hidden", "true");
+  const { icon, avatar } = record.opts;
+  if (avatar) {
+    const img = document.createElement("img");
+    img.className = "notification-avatar";
+    img.src = avatar;
+    img.alt = "";
+    img.loading = "lazy";
+    wrap.appendChild(img);
+    return wrap;
+  }
+  if (icon === false) {
+    wrap.style.display = "none";
+    return wrap;
+  }
+  if (typeof icon === "string" && icon.length > 0) {
+    if (/^https?:\/\/|^data:image\//.test(icon) || icon.endsWith(".png") || icon.endsWith(".jpg") || icon.endsWith(".svg") || icon.endsWith(".webp")) {
+      const img = document.createElement("img");
+      img.className = "notification-avatar";
+      img.src = icon;
+      img.alt = "";
+      wrap.appendChild(img);
+    } else {
+      const svg = sanitizeSvgIcon(icon);
+      if (svg) wrap.appendChild(svg);
+      else wrap.textContent = icon;
+    }
+    return wrap;
+  }
+  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) {
+  const el = document.createElement("p");
+  el.className = "notification-title";
+  el.textContent = title;
+  return el;
+}
+function buildDescription(text) {
+  const el = document.createElement("p");
+  el.className = "notification-message";
+  el.style.whiteSpace = "pre-wrap";
+  el.textContent = text;
+  return el;
+}
+function buildActions(record, getHandle) {
+  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");
+  wrap.className = "notification-actions";
+  for (const a of actions) {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "notification-action";
+    if (a.type === "primary") btn.classList.add("notification-action--primary");
+    else if (a.type === "danger") btn.classList.add("notification-action--danger");
+    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);
+  }
+  return wrap;
+}
+function buildLink(record) {
+  const { link, linkLabel } = record.opts;
+  if (!link) return null;
+  const wrap = document.createElement("div");
+  wrap.className = "notification-link-wrap";
+  const a = document.createElement("a");
+  a.className = "notification-link";
+  a.href = link;
+  a.textContent = linkLabel ?? "\u67E5\u770B\u8BE6\u60C5";
+  a.addEventListener("click", (ev) => ev.stopPropagation());
+  wrap.appendChild(a);
+  return wrap;
+}
+function buildProgressBar(record) {
+  const { progress, progressLabel } = record.opts;
+  if (progress === void 0 || progress < 0) return null;
+  const wrap = document.createElement("div");
+  wrap.className = "notification-progress";
+  const track = document.createElement("div");
+  track.className = "notification-progress-track";
+  const fill = document.createElement("div");
+  fill.className = "notification-progress-bar";
+  const pct = Math.min(100, Math.max(0, progress * 100));
+  fill.style.width = pct + "%";
+  track.appendChild(fill);
+  wrap.appendChild(track);
+  if (progressLabel) {
+    const lbl = document.createElement("span");
+    lbl.className = "notification-progress-label";
+    lbl.textContent = progressLabel;
+    wrap.appendChild(lbl);
+  } else if (progress > 0) {
+    const lbl = document.createElement("span");
+    lbl.className = "notification-progress-label";
+    lbl.textContent = Math.round(pct) + "%";
+    wrap.appendChild(lbl);
+  }
+  return wrap;
+}
+function buildCountdownBar(record) {
+  if (!record.duration || record.duration <= 0) return null;
+  if (record.opts.showCountdown === false) return null;
+  const bar = document.createElement("div");
+  bar.className = "notification-countdown";
+  bar.setAttribute("aria-hidden", "true");
+  const fill = document.createElement("div");
+  fill.className = "notification-countdown-fill";
+  fill.style.animationDuration = record.duration + "ms";
+  fill.style.animationPlayState = "running";
+  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");
+  const svg = sanitizeSvgIcon(CLOSE_SVG);
+  if (svg) btn.appendChild(svg);
+  btn.addEventListener("click", (ev) => {
+    ev.stopPropagation();
+    dismissRecord(record.id);
+  });
+  return btn;
+}
+function renderNotification(record, container, getHandle) {
+  const el = document.createElement("div");
+  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";
+  if (record.opts.avatar) cls += " has-avatar";
+  if (record.opts.onClick) {
+    cls += " is-clickable";
+    el.setAttribute("role", "button");
+    el.tabIndex = 0;
+  } else {
+    el.setAttribute("role", "alert");
+  }
+  el.className = cls;
+  el.id = record.id;
+  const icon = buildIcon(record);
+  el.appendChild(icon);
+  const content = document.createElement("div");
+  content.className = "notification-content";
+  content.appendChild(buildTitle(record.title));
+  if (record.opts.description) content.appendChild(buildDescription(record.opts.description));
+  const actions = buildActions(record, getHandle);
+  if (actions) content.appendChild(actions);
+  const link = buildLink(record);
+  if (link) content.appendChild(link);
+  const progress = buildProgressBar(record);
+  if (progress) content.appendChild(progress);
+  el.appendChild(content);
+  const close = buildClose(record);
+  if (close) el.appendChild(close);
+  const countdown = buildCountdownBar(record);
+  if (countdown) el.appendChild(countdown);
+  if (record.opts.onClick) {
+    const onClick = record.opts.onClick;
+    const handleClick = () => onClick(getHandle());
+    el.addEventListener("click", handleClick);
+    el.addEventListener("keydown", (ev) => {
+      if (ev.key === "Enter" || ev.key === " ") {
+        ev.preventDefault();
+        handleClick();
+      }
+    });
+  }
+  record.el = el;
+  return el;
+}
+function pushToContainer(container, el, priority) {
+  if (priority === "high") {
+    const firstNormal = Array.from(container.children).find(
+      (c) => c instanceof HTMLElement && !c.classList.contains("is-priority")
+    );
+    if (firstNormal) container.insertBefore(el, firstNormal);
+    else container.appendChild(el);
+  } else {
+    container.appendChild(el);
+  }
+}
+function removeOne(el, onClose) {
+  if (el.classList.contains("is-leaving")) return;
+  el.classList.add("is-leaving");
+  let done = false;
+  const finish = () => {
+    if (done) return;
+    done = true;
+    el.remove();
+    onClose?.();
+  };
+  el.addEventListener("transitionend", finish, { once: true });
+  window.setTimeout(finish, 360);
+}
+function trimStack(container) {
+  for (; ; ) {
+    const items = Array.from(container.querySelectorAll(":scope > .notification"));
+    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) {
+  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) 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");
+    if (fill) fill.style.animationPlayState = "paused";
+  };
+  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 ?? 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;
+  if (record.duration > 0) {
+    record.remaining = record.duration;
+    start();
+  }
+}
+function makeHandle(record) {
+  const handle = {
+    id: record.id,
+    el: record.el ?? document.createElement("div"),
+    dismiss: () => dismissRecord(record.id),
+    update: (patch) => updateRecord(record.id, patch),
+    setProgress: (value, label) => updateRecord(record.id, {
+      progress: Math.min(1, Math.max(0, value)),
+      progressLabel: label
+    }),
+    markRead: () => updateRecord(record.id, { unread: false }),
+    pause: () => {
+    },
+    resume: () => {
+    }
+  };
+  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);
+  const duration = opts.duration ?? 0;
+  const record = {
+    id,
+    title,
+    kind,
+    opts: { unread: opts.unread ?? false, ...opts, id },
+    el: null,
+    createdAt: Date.now(),
+    duration,
+    remaining: duration,
+    paused: false,
+    timer: 0,
+    startedAt: 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(id, record);
+  attachTimer(record, handle);
+  trimStack(container);
+  persistSave();
+  playSound(record.cfgRef?.sound ?? cfg.sound);
+  opts.onShow?.(handle);
+  return handle;
+}
+function dismissRecord(id) {
+  const record = store.get(id);
+  if (!record) {
+    const el = document.getElementById(id);
+    if (el && el.classList.contains("notification")) removeOne(el);
+    return;
+  }
+  if (record.timer) window.clearTimeout(record.timer);
+  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();
+}
+function updateRecord(id, patch) {
+  const record = store.get(id);
+  if (!record) return;
+  if (patch.title !== void 0) record.title = patch.title;
+  if (patch.description !== void 0) record.opts.description = patch.description;
+  if (patch.duration !== void 0) {
+    record.duration = patch.duration;
+    record.remaining = patch.duration;
+  }
+  if (patch.unread !== void 0) record.opts.unread = patch.unread;
+  if (patch.progress !== void 0) record.opts.progress = patch.progress;
+  if (patch.progressLabel !== void 0) record.opts.progressLabel = patch.progressLabel;
+  if (patch.actions !== void 0) record.opts.actions = patch.actions;
+  if (patch.tag !== void 0) record.opts.tag = patch.tag;
+  if (patch.priority !== void 0) record.opts.priority = patch.priority;
+  if (patch.icon !== void 0) record.opts.icon = patch.icon;
+  if (patch.avatar !== void 0) record.opts.avatar = patch.avatar;
+  if (patch.link !== void 0) record.opts.link = patch.link;
+  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;
+  }
+  if (patch.description !== void 0) {
+    let m = el.querySelector(".notification-message");
+    if (patch.description) {
+      if (!m) {
+        m = document.createElement("p");
+        m.className = "notification-message";
+        m.style.whiteSpace = "pre-wrap";
+        const content = el.querySelector(".notification-content");
+        const titleEl = content?.querySelector(".notification-title");
+        if (titleEl && titleEl.nextSibling) content?.insertBefore(m, titleEl.nextSibling);
+        else content?.appendChild(m);
+      }
+      m.textContent = patch.description;
+    } else if (m) {
+      m.remove();
+    }
+  }
+  if (patch.unread !== void 0) {
+    el.classList.toggle("is-unread", patch.unread);
+  }
+  if (patch.priority !== void 0) {
+    el.classList.toggle("is-priority", patch.priority === "high");
+  }
+  if (patch.progress !== void 0 || patch.progressLabel !== void 0) {
+    el.classList.add("is-progress");
+    let progWrap = el.querySelector(".notification-progress");
+    const pct = Math.min(100, Math.max(0, (record.opts.progress ?? 0) * 100));
+    if (!progWrap) {
+      progWrap = document.createElement("div");
+      progWrap.className = "notification-progress";
+      const track = document.createElement("div");
+      track.className = "notification-progress-track";
+      const fill2 = document.createElement("div");
+      fill2.className = "notification-progress-bar";
+      track.appendChild(fill2);
+      progWrap.appendChild(track);
+      el.querySelector(".notification-content")?.appendChild(progWrap);
+    }
+    const fill = progWrap.querySelector(".notification-progress-bar");
+    if (fill) fill.style.width = pct + "%";
+    let lbl = progWrap.querySelector(".notification-progress-label");
+    const labelText = record.opts.progressLabel ?? Math.round(pct) + "%";
+    if (!lbl) {
+      lbl = document.createElement("span");
+      lbl.className = "notification-progress-label";
+      progWrap.appendChild(lbl);
+    }
+    lbl.textContent = labelText;
+  }
+  persistSave();
+}
+function confirmDialog(title, opts = {}) {
+  return new Promise((resolve) => {
+    if (!isBrowser()) {
+      resolve(false);
+      return;
+    }
+    let resolved = false;
+    const settle = (val) => {
+      if (resolved) return;
+      resolved = true;
+      resolve(val);
+    };
+    const confirmLabel = opts.confirmLabel ?? "\u786E\u8BA4";
+    const cancelLabel = opts.cancelLabel ?? "\u53D6\u6D88";
+    const actions = [
+      {
+        label: cancelLabel,
+        type: "ghost",
+        onClick: () => settle(false)
+      },
+      {
+        label: confirmLabel,
+        type: "primary",
+        onClick: () => settle(true)
+      }
+    ];
+    const handle = showRecord(title, "info", {
+      ...opts,
+      actions,
+      closable: false,
+      onClose: () => settle(false)
+    });
+    if (!handle) settle(false);
+  });
+}
+function createNotificationCenter(parent, opts = {}) {
+  if (!isBrowser()) {
+    return {
+      push: () => null,
+      dismiss() {
+      },
+      clear() {
+      },
+      markAllRead() {
+      },
+      destroy() {
+      },
+      get: () => null,
+      getAll: () => [],
+      config() {
+      },
+      el: {}
+    };
+  }
+  const mount = parent ?? document.body;
+  const local = {
+    position: opts.position ?? "top-right",
+    maxStack: opts.maxStack ?? 5,
+    pauseOnHover: opts.pauseOnHover ?? true,
+    persist: opts.persist ?? false,
+    sound: opts.sound ?? false
+  };
+  const container = document.createElement("div");
+  container.className = "notification-container";
+  container.setAttribute("role", "region");
+  container.setAttribute("aria-label", "\u901A\u77E5");
+  container.dataset.position = local.position;
+  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();
+    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,
+      startedAt: 0,
+      cfgRef: local,
+      ownerStore: localStore
+    };
+    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;
+      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);
+      if (tid) {
+        localStore.delete(tid);
+        store.delete(tid);
+      }
+      break;
+    }
+    persistSave();
+    playSound(local.sound);
+    opts2.onShow?.(handle);
+    return handle;
+  }
+  function dismiss(id) {
+    if (id) {
+      const rec = localStore.get(id);
+      if (!rec) return;
+      if (rec.timer) window.clearTimeout(rec.timer);
+      const handle = makeHandle(rec);
+      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));
+  }
+  function clear() {
+    dismiss();
+  }
+  function markAllRead() {
+    localStore.forEach((rec) => {
+      rec.opts.unread = false;
+      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) => {
+      if (next.position) {
+        local.position = next.position;
+        container.dataset.position = next.position;
+      }
+      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;
+        const k = persistKeyFor(next.persist);
+        if (k) knownPersistKeys.add(k);
+      }
+      if (next.sound !== void 0) local.sound = next.sound;
+    },
+    el: container
+  };
+}
+var notify = Object.assign(
+  (title, opts) => showRecord(title, "info", opts ?? {}),
+  {
+    success: (title, opts) => showRecord(title, "success", opts ?? {}),
+    warn: (title, opts) => showRecord(title, "warning", opts ?? {}),
+    error: (title, opts) => showRecord(title, "error", opts ?? {}),
+    info: (title, opts) => showRecord(title, "info", opts ?? {}),
+    progress: (title, opts) => showRecord(title, "info", { progress: opts?.progress ?? 0, ...opts }),
+    confirm: (title, opts) => confirmDialog(title, opts),
+    dismiss: (id) => {
+      if (!isBrowser()) return;
+      if (id) {
+        dismissRecord(id);
+        return;
+      }
+      Array.from(store.keys()).forEach((k) => dismissRecord(k));
+    },
+    clear: () => {
+      if (!isBrowser()) return;
+      Array.from(store.keys()).forEach((k) => dismissRecord(k));
+    },
+    markRead: (id) => {
+      if (!isBrowser()) return;
+      if (id) {
+        updateRecord(id, { unread: false });
+        return;
+      }
+      store.forEach((_, k) => updateRecord(k, { unread: false }));
+    },
+    update: (id, patch) => updateRecord(id, patch),
+    get: (id) => store.get(id) ?? null,
+    getAll: () => Array.from(store.values()),
+    config: (opts) => {
+      if (opts.position) {
+        cfg.position = opts.position;
+        const c = document.body.querySelector(".notification-container[data-notif-default]");
+        if (c) c.dataset.position = opts.position;
+      }
+      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;
+        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;
+  globalInit.done = true;
+  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);
+    }
+  }
+}
+export {
+  createNotificationCenter,
+  initNotification,
+  notify
+};