@samline/notify 1.0.0 → 1.0.2

package/dist/render-notify-toasts.js

@@ -0,0 +1,213 @@
+(() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  function __accessProp(key) {
+    return this[key];
+  }
+  var __toCommonJS = (from) => {
+    var entry = (__moduleCache ??= new WeakMap).get(from), desc;
+    if (entry)
+      return entry;
+    entry = __defProp({}, "__esModule", { value: true });
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (var key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(entry, key))
+          __defProp(entry, key, {
+            get: __accessProp.bind(from, key),
+            enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+          });
+    }
+    __moduleCache.set(from, entry);
+    return entry;
+  };
+  var __moduleCache;
+  var __returnValue = (v) => v;
+  function __exportSetter(name, newValue) {
+    this[name] = __returnValue.bind(null, newValue);
+  }
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, {
+        get: all[name],
+        enumerable: true,
+        configurable: true,
+        set: __exportSetter.bind(all, name)
+      });
+  };
+
+  // src/render-notify-toasts.ts
+  var exports_render_notify_toasts = {};
+  __export(exports_render_notify_toasts, {
+    renderNotifyToasts: () => renderNotifyToasts
+  });
+
+  // src/core/notify-core.ts
+  class NotifyCore {
+    toasts = [];
+    listeners = new Set;
+    position = "top-right";
+    options = undefined;
+    idCounter = 0;
+    generateId() {
+      return `${++this.idCounter}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+    }
+    subscribe(fn) {
+      this.listeners.add(fn);
+      fn(this.toasts);
+      return () => this.listeners.delete(fn);
+    }
+    emit() {
+      for (const fn of this.listeners)
+        fn(this.toasts);
+    }
+    update(fn) {
+      this.toasts = fn(this.toasts);
+      this.emit();
+    }
+    dismiss(id) {
+      const item = this.toasts.find((t) => t.id === id);
+      if (!item || item.exiting)
+        return;
+      this.update((prev) => prev.map((t) => t.id === id ? { ...t, exiting: true } : t));
+      setTimeout(() => this.update((prev) => prev.filter((t) => t.id !== id)), 600);
+    }
+    show(opts) {
+      const id = opts.title ? `notify-${opts.title}` : "notify-default";
+      const prevItem = this.toasts.find((t) => t.id === id);
+      const instanceId = prevItem?.instanceId ?? this.generateId();
+      const state = opts.type ?? prevItem?.type ?? "success";
+      const item = {
+        ...prevItem,
+        ...opts,
+        id,
+        instanceId,
+        type: state
+      };
+      this.update((prev) => {
+        const filtered = prev.filter((t) => t.id !== id);
+        return [...filtered, item];
+      });
+      return id;
+    }
+    getToasts() {
+      return this.toasts;
+    }
+  }
+  var notifyCore = new NotifyCore;
+
+  // src/render-notify-toasts.ts
+  var ICONS = {
+    success: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>',
+    error: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',
+    warning: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>',
+    info: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m4.93 4.93 4.24 4.24"/><path d="m14.83 9.17 4.24-4.24"/><path d="m14.83 14.83 4.24 4.24"/><path d="m9.17 14.83-4.24 4.24"/><circle cx="12" cy="12" r="4"/></svg>',
+    loading: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" data-notify-icon="spin" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>',
+    action: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>'
+  };
+  var EXIT_MS = 600;
+  function capitalize(s) {
+    return s ? s.charAt(0).toUpperCase() + s.slice(1) : "";
+  }
+  var viewport = null;
+  var toastEls = new Map;
+  function getOrCreateViewport(position) {
+    if (!viewport) {
+      viewport = document.createElement("div");
+      viewport.setAttribute("data-notify-viewport", "");
+      viewport.setAttribute("data-position", position);
+      viewport.setAttribute("data-theme", "light");
+      document.body.appendChild(viewport);
+    }
+    return viewport;
+  }
+  function buildToastEl(toast) {
+    const state = toast.type || "success";
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.setAttribute("data-notify-toast", "");
+    btn.setAttribute("data-state", state);
+    btn.setAttribute("data-ready", "false");
+    btn.setAttribute("data-exiting", "false");
+    const card = document.createElement("div");
+    card.setAttribute("data-notify-card", "");
+    const header = document.createElement("div");
+    header.setAttribute("data-notify-header", "");
+    const badge = document.createElement("div");
+    badge.setAttribute("data-notify-badge", "");
+    badge.setAttribute("data-state", state);
+    badge.innerHTML = ICONS[state] || ICONS.success;
+    const titleEl = document.createElement("span");
+    titleEl.setAttribute("data-notify-title", "");
+    titleEl.setAttribute("data-state", state);
+    titleEl.textContent = toast.title || capitalize(state);
+    header.appendChild(badge);
+    header.appendChild(titleEl);
+    card.appendChild(header);
+    if (toast.description || toast.button) {
+      const content = document.createElement("div");
+      content.setAttribute("data-notify-content", "");
+      content.setAttribute("data-visible", "true");
+      if (toast.description) {
+        const desc = document.createElement("div");
+        desc.setAttribute("data-notify-description", "");
+        desc.textContent = toast.description;
+        content.appendChild(desc);
+      }
+      if (toast.button) {
+        const actionBtn = document.createElement("button");
+        actionBtn.setAttribute("data-notify-button", "");
+        actionBtn.setAttribute("data-state", state);
+        actionBtn.textContent = toast.button.title;
+        actionBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          toast.button?.onClick();
+          notifyCore.dismiss(toast.id);
+        });
+        content.appendChild(actionBtn);
+      }
+      card.appendChild(content);
+    }
+    btn.appendChild(card);
+    btn.addEventListener("click", () => notifyCore.dismiss(toast.id));
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        btn.setAttribute("data-ready", "true");
+      });
+    });
+    return btn;
+  }
+  function updateToastEl(el, toast) {
+    const state = toast.type || "success";
+    el.setAttribute("data-state", state);
+    if (toast.exiting) {
+      el.setAttribute("data-exiting", "true");
+    }
+  }
+  function renderNotifyToasts(options = {}) {
+    const position = options.position ?? "top-right";
+    const vp = getOrCreateViewport(position);
+    return notifyCore.subscribe((toasts) => {
+      const liveIds = new Set(toasts.map((t) => t.id));
+      for (const [id, el] of toastEls) {
+        if (!liveIds.has(id)) {
+          el.setAttribute("data-exiting", "true");
+          setTimeout(() => {
+            el.remove();
+            toastEls.delete(id);
+          }, EXIT_MS);
+        }
+      }
+      for (const toast of toasts) {
+        if (toastEls.has(toast.id)) {
+          updateToastEl(toastEls.get(toast.id), toast);
+        } else {
+          const el = buildToastEl(toast);
+          toastEls.set(toast.id, el);
+          vp.appendChild(el);
+        }
+      }
+    });
+  }
+})();

package/dist/styles.css

@@ -475,3 +475,84 @@
 [data-notify-viewport][data-theme="light"] [data-notify-description] {
 	color: rgba(255, 255, 255, 0.5);
 }
+
+/* -------- Browser / CDN card renderer (render-notify-toasts.js) ---------- */
+/*
+ * When a [data-notify-card] is present (VanillaJS renderer), we override the
+ * SVG-based layout from the React component and use a plain HTML card instead.
+ */
+
+[data-notify-toast]:has([data-notify-card]) {
+	width: auto;
+	height: auto;
+	background: transparent;
+}
+
+[data-notify-card] {
+	background: #ffffff;
+	border-radius: 20px;
+	box-shadow:
+		0 4px 24px rgba(0, 0, 0, 0.1),
+		0 1px 4px rgba(0, 0, 0, 0.06);
+	width: var(--notify-width);
+	overflow: hidden;
+}
+
+/* Header row: icon badge + title */
+[data-notify-card] [data-notify-header] {
+	position: relative;
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding: 0.5rem 0.75rem;
+	height: auto;
+	left: auto;
+	max-width: none;
+	transform: none;
+	overflow: visible;
+}
+
+/* Content area: description + optional button */
+[data-notify-card] [data-notify-content] {
+	position: relative;
+	opacity: 1;
+	pointer-events: auto;
+	content-visibility: visible;
+	border-top: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+/* State colors for the badge icon and title inside the card */
+[data-notify-card]
+	:is([data-notify-badge], [data-notify-title])[data-state] {
+	color: var(--notify-state-success);
+}
+
+[data-notify-card]
+	:is([data-notify-badge], [data-notify-title])[data-state="error"] {
+	color: var(--notify-state-error);
+}
+
+[data-notify-card]
+	:is([data-notify-badge], [data-notify-title])[data-state="warning"] {
+	color: var(--notify-state-warning);
+}
+
+[data-notify-card]
+	:is([data-notify-badge], [data-notify-title])[data-state="info"] {
+	color: var(--notify-state-info);
+}
+
+[data-notify-card]
+	:is([data-notify-badge], [data-notify-title])[data-state="loading"] {
+	color: var(--notify-state-loading);
+}
+
+[data-notify-card]
+	:is([data-notify-badge], [data-notify-title])[data-state="action"] {
+	color: var(--notify-state-action);
+}
+
+/* Description text */
+[data-notify-card] [data-notify-description] {
+	color: rgba(0, 0, 0, 0.6);
+}

package/dist/svelte.d.mts

@@ -41,5 +41,9 @@ interface NotifyItem extends NotifyOptions {
 declare const notifyToasts: svelte_store.Writable<NotifyItem[]>;
 declare function showNotifyToast(options: NotifyOptions): string;
 
-export { notifyToasts, showNotifyToast };
+declare function renderNotifyToasts(options?: {
+    position?: NotifyPosition;
+}): () => boolean;
+
+export { notifyToasts, renderNotifyToasts, showNotifyToast };
 //# sourceMappingURL=svelte.d.mts.map

package/dist/svelte.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"svelte.d.mts","sources":["../src/types.ts","../src/core/notify-core.ts","../src/svelte-notify.ts"],"mappings":";;AAAA,KAAK,WAAW;AAChB,UAAU,YAAY;AACtB;AACA;AACA;AACA;AACA;AACA,UAAU,YAAY;AACtB;AACA;AACA;AACA,cAAc,gBAAgB;AAC9B,KAAK,cAAc,WAAW,gBAAgB;AAC9C,UAAU,aAAa;AACvB;AACA;AACA,WAAW,WAAW;AACtB,eAAe,cAAc;AAC7B;AACA;AACA,aAAa,YAAY;AACzB;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,YAAY;AACzB;;AC1BA,UAAU,UAAU,SAAS,aAAa;AAC1C;AACA;AACA;AACA;AACA;AACA;;ACLA,cAAc,YAAY,EAAE,YAAY,CAAC,QAAQ,CAACA,UAA6B;AAC/E,iBAAiB,eAAe,UAAU,aAAa;;;;","names":["__core_notify_core.NotifyItem"]}
+{"version":3,"file":"svelte.d.mts","sources":["../src/types.ts","../src/core/notify-core.ts","../src/svelte-notify.ts","../src/render-notify-toasts.ts"],"mappings":";;AAAA,KAAK,WAAW;AAChB,UAAU,YAAY;AACtB;AACA;AACA;AACA;AACA;AACA,UAAU,YAAY;AACtB;AACA;AACA;AACA,cAAc,gBAAgB;AAC9B,KAAK,cAAc,WAAW,gBAAgB;AAC9C,UAAU,aAAa;AACvB;AACA;AACA,WAAW,WAAW;AACtB,eAAe,cAAc;AAC7B;AACA;AACA,aAAa,YAAY;AACzB;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,YAAY;AACzB;;AC1BA,UAAU,UAAU,SAAS,aAAa;AAC1C;AACA;AACA;AACA;AACA;AACA;;ACLA,cAAc,YAAY,EAAE,YAAY,CAAC,QAAQ,CAACA,UAA6B;AAC/E,iBAAiB,eAAe,UAAU,aAAa;;ACHvD,iBAAiB,kBAAkB;AACnC,eAAe,cAAc;AAC7B;;;;","names":["__core_notify_core.NotifyItem"]}

package/dist/svelte.d.ts

@@ -41,5 +41,9 @@ interface NotifyItem extends NotifyOptions {
 declare const notifyToasts: svelte_store.Writable<NotifyItem[]>;
 declare function showNotifyToast(options: NotifyOptions): string;
 
-export { notifyToasts, showNotifyToast };
+declare function renderNotifyToasts(options?: {
+    position?: NotifyPosition;
+}): () => boolean;
+
+export { notifyToasts, renderNotifyToasts, showNotifyToast };
 //# sourceMappingURL=svelte.d.ts.map

package/dist/svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"svelte.d.ts","sources":["../src/types.ts","../src/core/notify-core.ts","../src/svelte-notify.ts"],"mappings":";;AAAA,KAAK,WAAW;AAChB,UAAU,YAAY;AACtB;AACA;AACA;AACA;AACA;AACA,UAAU,YAAY;AACtB;AACA;AACA;AACA,cAAc,gBAAgB;AAC9B,KAAK,cAAc,WAAW,gBAAgB;AAC9C,UAAU,aAAa;AACvB;AACA;AACA,WAAW,WAAW;AACtB,eAAe,cAAc;AAC7B;AACA;AACA,aAAa,YAAY;AACzB;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,YAAY;AACzB;;AC1BA,UAAU,UAAU,SAAS,aAAa;AAC1C;AACA;AACA;AACA;AACA;AACA;;ACLA,cAAc,YAAY,EAAE,YAAY,CAAC,QAAQ,CAACA,UAA6B;AAC/E,iBAAiB,eAAe,UAAU,aAAa;;;;","names":["__core_notify_core.NotifyItem"]}
+{"version":3,"file":"svelte.d.ts","sources":["../src/types.ts","../src/core/notify-core.ts","../src/svelte-notify.ts","../src/render-notify-toasts.ts"],"mappings":";;AAAA,KAAK,WAAW;AAChB,UAAU,YAAY;AACtB;AACA;AACA;AACA;AACA;AACA,UAAU,YAAY;AACtB;AACA;AACA;AACA,cAAc,gBAAgB;AAC9B,KAAK,cAAc,WAAW,gBAAgB;AAC9C,UAAU,aAAa;AACvB;AACA;AACA,WAAW,WAAW;AACtB,eAAe,cAAc;AAC7B;AACA;AACA,aAAa,YAAY;AACzB;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,YAAY;AACzB;;AC1BA,UAAU,UAAU,SAAS,aAAa;AAC1C;AACA;AACA;AACA;AACA;AACA;;ACLA,cAAc,YAAY,EAAE,YAAY,CAAC,QAAQ,CAACA,UAA6B;AAC/E,iBAAiB,eAAe,UAAU,aAAa;;ACHvD,iBAAiB,kBAAkB;AACnC,eAAe,cAAc;AAC7B;;;;","names":["__core_notify_core.NotifyItem"]}

package/dist/svelte.js

@@ -164,5 +164,121 @@ function showNotifyToast(options) {
     return notifyCore.show(options);
 }
 
+const ICONS = {
+    success: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>',
+    error: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',
+    warning: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>',
+    info: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m4.93 4.93 4.24 4.24"/><path d="m14.83 9.17 4.24-4.24"/><path d="m14.83 14.83 4.24 4.24"/><path d="m9.17 14.83-4.24 4.24"/><circle cx="12" cy="12" r="4"/></svg>',
+    loading: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" data-notify-icon="spin" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>',
+    action: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>'
+};
+const EXIT_MS = 600;
+function capitalize(s) {
+    return s ? s.charAt(0).toUpperCase() + s.slice(1) : "";
+}
+let viewport = null;
+const toastEls = new Map();
+function getOrCreateViewport(position) {
+    if (!viewport) {
+        viewport = document.createElement("div");
+        viewport.setAttribute("data-notify-viewport", "");
+        viewport.setAttribute("data-position", position);
+        viewport.setAttribute("data-theme", "light");
+        document.body.appendChild(viewport);
+    }
+    return viewport;
+}
+function buildToastEl(toast) {
+    const state = toast.type || "success";
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.setAttribute("data-notify-toast", "");
+    btn.setAttribute("data-state", state);
+    btn.setAttribute("data-ready", "false");
+    btn.setAttribute("data-exiting", "false");
+    const card = document.createElement("div");
+    card.setAttribute("data-notify-card", "");
+    const header = document.createElement("div");
+    header.setAttribute("data-notify-header", "");
+    const badge = document.createElement("div");
+    badge.setAttribute("data-notify-badge", "");
+    badge.setAttribute("data-state", state);
+    badge.innerHTML = ICONS[state] || ICONS.success;
+    const titleEl = document.createElement("span");
+    titleEl.setAttribute("data-notify-title", "");
+    titleEl.setAttribute("data-state", state);
+    titleEl.textContent = toast.title || capitalize(state);
+    header.appendChild(badge);
+    header.appendChild(titleEl);
+    card.appendChild(header);
+    if (toast.description || toast.button) {
+        const content = document.createElement("div");
+        content.setAttribute("data-notify-content", "");
+        content.setAttribute("data-visible", "true");
+        if (toast.description) {
+            const desc = document.createElement("div");
+            desc.setAttribute("data-notify-description", "");
+            desc.textContent = toast.description;
+            content.appendChild(desc);
+        }
+        if (toast.button) {
+            const actionBtn = document.createElement("button");
+            actionBtn.setAttribute("data-notify-button", "");
+            actionBtn.setAttribute("data-state", state);
+            actionBtn.textContent = toast.button.title;
+            actionBtn.addEventListener("click", (e)=>{
+                var _toast_button;
+                e.stopPropagation();
+                (_toast_button = toast.button) == null ? void 0 : _toast_button.onClick();
+                notifyCore.dismiss(toast.id);
+            });
+            content.appendChild(actionBtn);
+        }
+        card.appendChild(content);
+    }
+    btn.appendChild(card);
+    btn.addEventListener("click", ()=>notifyCore.dismiss(toast.id));
+    requestAnimationFrame(()=>{
+        requestAnimationFrame(()=>{
+            btn.setAttribute("data-ready", "true");
+        });
+    });
+    return btn;
+}
+function updateToastEl(el, toast) {
+    const state = toast.type || "success";
+    el.setAttribute("data-state", state);
+    if (toast.exiting) {
+        el.setAttribute("data-exiting", "true");
+    }
+}
+function renderNotifyToasts(options = {}) {
+    var _options_position;
+    const position = (_options_position = options.position) != null ? _options_position : "top-right";
+    const vp = getOrCreateViewport(position);
+    return notifyCore.subscribe((toasts)=>{
+        const liveIds = new Set(toasts.map((t)=>t.id));
+        for (const [id, el] of toastEls){
+            if (!liveIds.has(id)) {
+                el.setAttribute("data-exiting", "true");
+                setTimeout(()=>{
+                    el.remove();
+                    toastEls.delete(id);
+                }, EXIT_MS);
+            }
+        }
+        for (const toast of toasts){
+            if (toastEls.has(toast.id)) {
+                updateToastEl(toastEls.get(toast.id), toast);
+            } else {
+                const el = buildToastEl(toast);
+                toastEls.set(toast.id, el);
+                vp.appendChild(el);
+            }
+        }
+    });
+}
+
 exports.notifyToasts = notifyToasts;
+exports.renderNotifyToasts = renderNotifyToasts;
 exports.showNotifyToast = showNotifyToast;

package/dist/svelte.mjs

@@ -162,4 +162,119 @@ function showNotifyToast(options) {
     return notifyCore.show(options);
 }
 
-export { notifyToasts, showNotifyToast };
+const ICONS = {
+    success: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>',
+    error: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',
+    warning: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>',
+    info: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m4.93 4.93 4.24 4.24"/><path d="m14.83 9.17 4.24-4.24"/><path d="m14.83 14.83 4.24 4.24"/><path d="m9.17 14.83-4.24 4.24"/><circle cx="12" cy="12" r="4"/></svg>',
+    loading: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" data-notify-icon="spin" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>',
+    action: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>'
+};
+const EXIT_MS = 600;
+function capitalize(s) {
+    return s ? s.charAt(0).toUpperCase() + s.slice(1) : "";
+}
+let viewport = null;
+const toastEls = new Map();
+function getOrCreateViewport(position) {
+    if (!viewport) {
+        viewport = document.createElement("div");
+        viewport.setAttribute("data-notify-viewport", "");
+        viewport.setAttribute("data-position", position);
+        viewport.setAttribute("data-theme", "light");
+        document.body.appendChild(viewport);
+    }
+    return viewport;
+}
+function buildToastEl(toast) {
+    const state = toast.type || "success";
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.setAttribute("data-notify-toast", "");
+    btn.setAttribute("data-state", state);
+    btn.setAttribute("data-ready", "false");
+    btn.setAttribute("data-exiting", "false");
+    const card = document.createElement("div");
+    card.setAttribute("data-notify-card", "");
+    const header = document.createElement("div");
+    header.setAttribute("data-notify-header", "");
+    const badge = document.createElement("div");
+    badge.setAttribute("data-notify-badge", "");
+    badge.setAttribute("data-state", state);
+    badge.innerHTML = ICONS[state] || ICONS.success;
+    const titleEl = document.createElement("span");
+    titleEl.setAttribute("data-notify-title", "");
+    titleEl.setAttribute("data-state", state);
+    titleEl.textContent = toast.title || capitalize(state);
+    header.appendChild(badge);
+    header.appendChild(titleEl);
+    card.appendChild(header);
+    if (toast.description || toast.button) {
+        const content = document.createElement("div");
+        content.setAttribute("data-notify-content", "");
+        content.setAttribute("data-visible", "true");
+        if (toast.description) {
+            const desc = document.createElement("div");
+            desc.setAttribute("data-notify-description", "");
+            desc.textContent = toast.description;
+            content.appendChild(desc);
+        }
+        if (toast.button) {
+            const actionBtn = document.createElement("button");
+            actionBtn.setAttribute("data-notify-button", "");
+            actionBtn.setAttribute("data-state", state);
+            actionBtn.textContent = toast.button.title;
+            actionBtn.addEventListener("click", (e)=>{
+                var _toast_button;
+                e.stopPropagation();
+                (_toast_button = toast.button) == null ? void 0 : _toast_button.onClick();
+                notifyCore.dismiss(toast.id);
+            });
+            content.appendChild(actionBtn);
+        }
+        card.appendChild(content);
+    }
+    btn.appendChild(card);
+    btn.addEventListener("click", ()=>notifyCore.dismiss(toast.id));
+    requestAnimationFrame(()=>{
+        requestAnimationFrame(()=>{
+            btn.setAttribute("data-ready", "true");
+        });
+    });
+    return btn;
+}
+function updateToastEl(el, toast) {
+    const state = toast.type || "success";
+    el.setAttribute("data-state", state);
+    if (toast.exiting) {
+        el.setAttribute("data-exiting", "true");
+    }
+}
+function renderNotifyToasts(options = {}) {
+    var _options_position;
+    const position = (_options_position = options.position) != null ? _options_position : "top-right";
+    const vp = getOrCreateViewport(position);
+    return notifyCore.subscribe((toasts)=>{
+        const liveIds = new Set(toasts.map((t)=>t.id));
+        for (const [id, el] of toastEls){
+            if (!liveIds.has(id)) {
+                el.setAttribute("data-exiting", "true");
+                setTimeout(()=>{
+                    el.remove();
+                    toastEls.delete(id);
+                }, EXIT_MS);
+            }
+        }
+        for (const toast of toasts){
+            if (toastEls.has(toast.id)) {
+                updateToastEl(toastEls.get(toast.id), toast);
+            } else {
+                const el = buildToastEl(toast);
+                toastEls.set(toast.id, el);
+                vp.appendChild(el);
+            }
+        }
+    });
+}
+
+export { notifyToasts, renderNotifyToasts, showNotifyToast };

package/dist/vue.d.mts

@@ -99,5 +99,9 @@ declare function useNotifyToasts(): {
 };
 declare function showNotifyToast(options: NotifyOptions): string;
 
-export { showNotifyToast, useNotifyToasts };
+declare function renderNotifyToasts(options?: {
+    position?: NotifyPosition;
+}): () => boolean;
+
+export { renderNotifyToasts, showNotifyToast, useNotifyToasts };
 //# sourceMappingURL=vue.d.mts.map

package/dist/vue.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"vue.d.mts","sources":["../src/types.ts","../src/core/notify-core.ts","../src/vue-notify.ts"],"mappings":";;AAAA,KAAK,WAAW;AAChB,UAAU,YAAY;AACtB;AACA;AACA;AACA;AACA;AACA,UAAU,YAAY;AACtB;AACA;AACA;AACA,cAAc,gBAAgB;AAC9B,KAAK,cAAc,WAAW,gBAAgB;AAC9C,UAAU,aAAa;AACvB;AACA;AACA,WAAW,WAAW;AACtB,eAAe,cAAc;AAC7B;AACA;AACA,aAAa,YAAY;AACzB;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,YAAY;AACzB;;AC1BA,UAAU,UAAU,SAAS,aAAa;AAC1C;AACA;AACA;AACA;AACA;AACA;;ACJA,iBAAiB,eAAe;AAChC,YAAY,GAAG,CAAC,GAAG;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeA,WAAmB;AAClC,mBAAmBC,cAAsB;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,UAA6B;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeF,WAAmB;AAClC,mBAAmBC,cAAsB;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,eAAe,UAAU,aAAa;;;;","names":["__types.NotifyState","__types.NotifyPosition","__core_notify_core.NotifyItem"]}
+{"version":3,"file":"vue.d.mts","sources":["../src/types.ts","../src/core/notify-core.ts","../src/vue-notify.ts","../src/render-notify-toasts.ts"],"mappings":";;AAAA,KAAK,WAAW;AAChB,UAAU,YAAY;AACtB;AACA;AACA;AACA;AACA;AACA,UAAU,YAAY;AACtB;AACA;AACA;AACA,cAAc,gBAAgB;AAC9B,KAAK,cAAc,WAAW,gBAAgB;AAC9C,UAAU,aAAa;AACvB;AACA;AACA,WAAW,WAAW;AACtB,eAAe,cAAc;AAC7B;AACA;AACA,aAAa,YAAY;AACzB;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,YAAY;AACzB;;AC1BA,UAAU,UAAU,SAAS,aAAa;AAC1C;AACA;AACA;AACA;AACA;AACA;;ACJA,iBAAiB,eAAe;AAChC,YAAY,GAAG,CAAC,GAAG;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeA,WAAmB;AAClC,mBAAmBC,cAAsB;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,UAA6B;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeF,WAAmB;AAClC,mBAAmBC,cAAsB;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,eAAe,UAAU,aAAa;;AC9DvD,iBAAiB,kBAAkB;AACnC,eAAe,cAAc;AAC7B;;;;","names":["__types.NotifyState","__types.NotifyPosition","__core_notify_core.NotifyItem"]}

package/dist/vue.d.ts

@@ -99,5 +99,9 @@ declare function useNotifyToasts(): {
 };
 declare function showNotifyToast(options: NotifyOptions): string;
 
-export { showNotifyToast, useNotifyToasts };
+declare function renderNotifyToasts(options?: {
+    position?: NotifyPosition;
+}): () => boolean;
+
+export { renderNotifyToasts, showNotifyToast, useNotifyToasts };
 //# sourceMappingURL=vue.d.ts.map

package/dist/vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vue.d.ts","sources":["../src/types.ts","../src/core/notify-core.ts","../src/vue-notify.ts"],"mappings":";;AAAA,KAAK,WAAW;AAChB,UAAU,YAAY;AACtB;AACA;AACA;AACA;AACA;AACA,UAAU,YAAY;AACtB;AACA;AACA;AACA,cAAc,gBAAgB;AAC9B,KAAK,cAAc,WAAW,gBAAgB;AAC9C,UAAU,aAAa;AACvB;AACA;AACA,WAAW,WAAW;AACtB,eAAe,cAAc;AAC7B;AACA;AACA,aAAa,YAAY;AACzB;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,YAAY;AACzB;;AC1BA,UAAU,UAAU,SAAS,aAAa;AAC1C;AACA;AACA;AACA;AACA;AACA;;ACJA,iBAAiB,eAAe;AAChC,YAAY,GAAG,CAAC,GAAG;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeA,WAAmB;AAClC,mBAAmBC,cAAsB;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,UAA6B;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeF,WAAmB;AAClC,mBAAmBC,cAAsB;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,eAAe,UAAU,aAAa;;;;","names":["__types.NotifyState","__types.NotifyPosition","__core_notify_core.NotifyItem"]}
+{"version":3,"file":"vue.d.ts","sources":["../src/types.ts","../src/core/notify-core.ts","../src/vue-notify.ts","../src/render-notify-toasts.ts"],"mappings":";;AAAA,KAAK,WAAW;AAChB,UAAU,YAAY;AACtB;AACA;AACA;AACA;AACA;AACA,UAAU,YAAY;AACtB;AACA;AACA;AACA,cAAc,gBAAgB;AAC9B,KAAK,cAAc,WAAW,gBAAgB;AAC9C,UAAU,aAAa;AACvB;AACA;AACA,WAAW,WAAW;AACtB,eAAe,cAAc;AAC7B;AACA;AACA,aAAa,YAAY;AACzB;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,YAAY;AACzB;;AC1BA,UAAU,UAAU,SAAS,aAAa;AAC1C;AACA;AACA;AACA;AACA;AACA;;ACJA,iBAAiB,eAAe;AAChC,YAAY,GAAG,CAAC,GAAG;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeA,WAAmB;AAClC,mBAAmBC,cAAsB;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,UAA6B;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeF,WAAmB;AAClC,mBAAmBC,cAAsB;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,eAAe,UAAU,aAAa;;AC9DvD,iBAAiB,kBAAkB;AACnC,eAAe,cAAc;AAC7B;;;;","names":["__types.NotifyState","__types.NotifyPosition","__core_notify_core.NotifyItem"]}