@icen.ai/ui 0.4.0 → 0.5.0

package/dist/behaviors/notification.mjs

@@ -0,0 +1,754 @@
+// 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";
+function persistKey() {
+  if (cfg.persist === true) return DEFAULT_PERSIST_KEY;
+  if (typeof cfg.persist === "string") return cfg.persist;
+  return null;
+}
+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));
+  } catch {
+  }
+}
+function persistLoad() {
+  const key = persistKey();
+  if (!key) return [];
+  try {
+    const raw = localStorage.getItem(key);
+    if (!raw) return [];
+    const arr = JSON.parse(raw);
+    return Array.isArray(arr) ? arr : [];
+  } catch {
+    return [];
+  }
+}
+var audioCtx = null;
+function playSound() {
+  if (!cfg.sound) return;
+  try {
+    if (typeof cfg.sound === "string") {
+      const audio = new Audio(cfg.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 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 {
+      wrap.innerHTML = icon;
+    }
+    return wrap;
+  }
+  if (record.opts.progress !== void 0 && record.opts.progress >= 0) {
+    wrap.innerHTML = PROGRESS_ICON;
+  } else {
+    wrap.innerHTML = KIND_ICON[record.kind];
+  }
+  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 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;
+  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 notif--${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("leaving")) return;
+  el.classList.add("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;
+    removeOne(target);
+  }
+}
+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 = 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;
+    }
+    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;
+    el.classList.remove("is-paused");
+    const fill = el.querySelector(".notification-countdown-fill");
+    if (fill) fill.style.animationPlayState = "running";
+    start();
+  };
+  const pauseOnHover = record.opts.pauseOnHover ?? cfg.pauseOnHover;
+  if (pauseOnHover) {
+    el.addEventListener("mouseenter", () => handle.pause());
+    el.addEventListener("mouseleave", () => handle.resume());
+  }
+  handle.pause = pause;
+  handle.resume = resume;
+  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
+  };
+  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();
+  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);
+  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.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 = document.body, opts = {}) {
+  if (!isBrowser()) {
+    return {
+      push: () => null,
+      dismiss() {
+      },
+      clear() {
+      },
+      markAllRead() {
+      },
+      get: () => null,
+      getAll: () => [],
+      config() {
+      },
+      el: {}
+    };
+  }
+  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;
+  parent.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);
+      }
+    }
+    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));
+      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");
+    });
+  }
+  return {
+    push,
+    dismiss,
+    clear,
+    markAllRead,
+    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;
+      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;
+      if (opts.sound !== void 0) cfg.sound = opts.sound;
+    }
+  }
+);
+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);
+    }
+  }
+}
+export {
+  createNotificationCenter,
+  initNotification,
+  notify
+};