universe-code 0.0.79 → 0.0.80

package/dist/uiux/toaster/index.js

@@ -1,69 +1,70 @@
 class UniverseToaster {
-    constructor() {
-        if (UniverseToaster.instance) return UniverseToaster.instance;
-
-        this.container = null;
-        this.toasts = [];
-        this.config = {
-            position: "top-right",
-            duration: 4000,
-            maxToasts: 5,
-        };
-        this.initialized = false;
-
-        UniverseToaster.instance = this;
-    }
-
-    /* ---------------- INIT ---------------- */
-    init() {
-        if (this.initialized) return;
-
-        this.container = document.createElement("div");
-        this.container.id = "universe-toaster-container";
-        this.container.className = `universe-toaster-container ${this.config.position}`;
-        document.body.appendChild(this.container);
-
-        this.injectStyles();
-        this.initialized = true;
-    }
-
-    /* ---------------- CONFIG ---------------- */
-    configure(options = {}) {
-        this.config = { ...this.config, ...options };
-    }
-
-    /* ---------------- STYLES ---------------- */
-    injectStyles() {
-        if (document.getElementById("universe-toaster-styles")) return;
-
-        const style = document.createElement("style");
-        style.id = "universe-toaster-styles";
-        style.textContent = `
-@keyframes progress {
+  constructor() {
+    if (UniverseToaster.instance) return UniverseToaster.instance;
+
+    this.container = null;
+    this.toasts = [];
+    this.config = {
+      position: "top-right",
+      duration: 4000,
+      maxToasts: 5,
+    };
+    this.initialized = false;
+
+    UniverseToaster.instance = this;
+  }
+
+  /* ================= INIT ================= */
+  init() {
+    if (this.initialized) return;
+
+    this.container = document.createElement("div");
+    this.container.id = "universe-toaster-container";
+    this.container.className = `universe-toaster-container ${this.config.position}`;
+    document.body.appendChild(this.container);
+
+    this.injectStyles();
+    this.initialized = true;
+  }
+
+  /* ================= CONFIG ================= */
+  configure(options = {}) {
+    this.config = { ...this.config, ...options };
+  }
+
+  /* ================= STYLES ================= */
+  injectStyles() {
+    if (document.getElementById("universe-toaster-styles")) return;
+
+    const style = document.createElement("style");
+    style.id = "universe-toaster-styles";
+    style.textContent = `
+@keyframes universe-progress {
   from { width: 100%; }
   to { width: 0%; }
 }
 
 .universe-toaster-container {
   position: fixed;
-  top: 20px;
-  right: 20px;
-  z-index: 9999;
-  max-width: 380px;
+  top: -5px;
+  right: 5px;
+  min-width: 300px;
+  z-index: 2147483647;
+  max-width: 400px;
   font-family: Arial, sans-serif;
 }
 
 .universe-toast {
-  background: #fff;
-  margin: 12px 0;
-  padding: 16px 18px;
+  margin: 15px 0;
+  background: white;
   border-radius: 12px;
-  box-shadow: 0 10px 35px rgba(0,0,0,0.25);
-  opacity: 0;
-  transform: translateX(100%);
-  transition: all 0.3s ease;
+  padding: 2px 20px 10px;
+  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
   position: relative;
   overflow: hidden;
+  opacity: 0;
+  transform: translateX(100%);
+  transition: all 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);
 }
 
 .universe-toast.show {
@@ -76,19 +77,20 @@ class UniverseToaster {
   transform: translateX(100%);
 }
 
-.universe-toast-success { border-left: 5px solid #28a745; }
-.universe-toast-error   { border-left: 5px solid #dc3545; }
-.universe-toast-warning { border-left: 5px solid #ffc107; }
-.universe-toast-info    { border-left: 5px solid #17a2b8; }
+.universe-toast-success { border-left: 5px solid #28a745; color:#28a745; }
+.universe-toast-error   { border-left: 5px solid #dc3545; color:#dc3545; }
+.universe-toast-warning { border-left: 5px solid #ffc107; color:#ffc107; }
+.universe-toast-info    { border-left: 5px solid #17a2b8; color:#17a2b8; }
 
 .universe-toast-header {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 6px;
+  align-items: center;
+  margin-bottom: 8px;
 }
 
 .universe-toast-title {
-  font-weight: 600;
+  font-weight: bold;
   font-size: 14px;
   display: flex;
   align-items: center;
@@ -98,9 +100,10 @@ class UniverseToaster {
   margin-right: 8px;
 }
 
-.universe-toast-message {
+.universe-toast-description {
   font-size: 13px;
   color: #333;
+  line-height: 1.4;
 }
 
 .universe-toast-close {
@@ -117,123 +120,100 @@ class UniverseToaster {
   left: 0;
   height: 3px;
   width: 100%;
-  opacity: 0.4;
+  background: currentColor;
 }
-
-.universe-toast-success .universe-toast-progress { background: #28a745; }
-.universe-toast-error   .universe-toast-progress { background: #dc3545; }
-.universe-toast-warning .universe-toast-progress { background: #ffc107; }
-.universe-toast-info    .universe-toast-progress { background: #17a2b8; }
 `;
-        document.head.appendChild(style);
-    }
-
-    /* ---------------- UTIL ---------------- */
-    getIcon(type) {
-        return { success: "✓", error: "✗", warning: "⚠", info: "ℹ" }[type] || "ℹ";
+    document.head.appendChild(style);
+  }
+
+  /* ================= INTERNAL ================= */
+  getIcon(status) {
+    return { success: "✓", error: "✗", warning: "⚠", info: "ℹ" }[status];
+  }
+
+  escape(text = "") {
+    const div = document.createElement("div");
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  /* ================= CORE SHOW ================= */
+  showToast({ status = "info", title = "", description = "", duration }) {
+    if (!this.initialized) this.init();
+
+    if (this.toasts.length >= this.config.maxToasts) {
+      this.remove(this.toasts[0].id);
     }
 
-    escape(text = "") {
-        const div = document.createElement("div");
-        div.textContent = text;
-        return div.innerHTML;
-    }
-
-    /* ---------------- SHOW ---------------- */
-    show(message, type = "info", options = {}) {
-        if (!this.initialized) this.init();
-
-        if (this.toasts.length >= this.config.maxToasts) {
-            this.remove(this.toasts[0].id);
-        }
+    const toastId = `toast-${Date.now()}`;
+    const finalDuration =
+      typeof duration === "number" ? duration : this.config.duration;
 
-        const id = `toast-${Date.now()}`;
-        const duration =
-            typeof options.duration === "number"
-                ? options.duration
-                : this.config.duration;
+    const toast = document.createElement("div");
+    toast.className = `universe-toast universe-toast-${status}`;
+    toast.dataset.id = toastId;
 
-        const toast = document.createElement("div");
-        toast.className = `universe-toast universe-toast-${type}`;
-        toast.dataset.id = id;
-
-        toast.innerHTML = `
+    toast.innerHTML = `
 <div class="universe-toast-header">
   <div class="universe-toast-title">
-    <span class="universe-toast-icon">${this.getIcon(type)}</span>
-    ${this.escape(options.title || "")}
+    <span class="universe-toast-icon">${this.getIcon(status)}</span>
+    ${this.escape(title)}
   </div>
   <button class="universe-toast-close">&times;</button>
 </div>
-<div class="universe-toast-message">${this.escape(message)}</div>
-<div class="universe-toast-progress"></div>
+<div class="universe-toast-description">${this.escape(description)}</div>
+<div class="universe-toast-progress" style="animation:universe-progress ${finalDuration}ms linear forwards"></div>
 `;
 
-        const progress = toast.querySelector(".universe-toast-progress");
-        toast.querySelector(".universe-toast-close").onclick = () =>
-            this.remove(id);
-
-        if (duration > 0) {
-            progress.style.animation = `progress ${duration}ms linear forwards`;
-        } else {
-            progress.style.display = "none";
-        }
-
-        this.container.appendChild(toast);
-        this.toasts.push({ id, el: toast });
+    toast.querySelector(".universe-toast-close").onclick = () =>
+      this.remove(toastId);
 
-        setTimeout(() => toast.classList.add("show"), 20);
+    this.container.appendChild(toast);
+    this.toasts.push({ id: toastId, element: toast });
 
-        if (duration > 0) {
-            setTimeout(() => this.remove(id), duration);
-        }
-    }
+    setTimeout(() => toast.classList.add("show"), 50);
+    setTimeout(() => this.remove(toastId), finalDuration);
+  }
 
-    /* ---------------- REMOVE ---------------- */
-    remove(id) {
-        const toast = this.toasts.find(t => t.id === id);
-        if (!toast) return;
+  /* ================= REMOVE ================= */
+  remove(id) {
+    const toast = this.toasts.find(t => t.id === id);
+    if (!toast) return;
 
-        toast.el.classList.add("removing");
+    toast.element.classList.add("removing");
 
-        setTimeout(() => {
-            toast.el.remove();
-            this.toasts = this.toasts.filter(t => t.id !== id);
-        }, 300);
-    }
+    setTimeout(() => {
+      toast.element.remove();
+      this.toasts = this.toasts.filter(t => t.id !== id);
+    }, 400);
+  }
 
-    /* ---------------- HELPERS ---------------- */
-    success(msg, o) { this.show(msg, "success", o); }
-    error(msg, o) { this.show(msg, "error", o); }
-    warning(msg, o) { this.show(msg, "warning", o); }
-    info(msg, o) { this.show(msg, "info", o); }
+  /* ================= HELPERS ================= */
+  success(options) { this.showToast({ ...options, status: "success" }); }
+  error(options) { this.showToast({ ...options, status: "error" }); }
+  warning(options) { this.showToast({ ...options, status: "warning" }); }
+  info(options) { this.showToast({ ...options, status: "info" }); }
 
-    clear() {
-        this.toasts.forEach(t => t.el.remove());
-        this.toasts = [];
-    }
+  clear() {
+    this.toasts.forEach(t => t.element.remove());
+    this.toasts = [];
+  }
 }
 
-/* ================= CALLABLE WRAPPER ================= */
+/* ================= PUBLIC API ================= */
 
-const instance = new UniverseToaster();
+const toasterInstance = new UniverseToaster();
 
-/**
- * toaster("success", "Message", { title, duration })
- */
-function toaster(type, message, options = {}) {
-    const allowed = ["success", "error", "warning", "info"];
-    const finalType = allowed.includes(type) ? type : "info";
-    instance.show(message, finalType, options);
+function toaster(options) {
+  toasterInstance.showToast(options);
 }
 
-/* Attach helpers */
-toaster.success = (m, o) => instance.success(m, o);
-toaster.error = (m, o) => instance.error(m, o);
-toaster.warning = (m, o) => instance.warning(m, o);
-toaster.info = (m, o) => instance.info(m, o);
+toaster.success = (options) => toasterInstance.success(options);
+toaster.error = (options) => toasterInstance.error(options);
+toaster.warning = (options) => toasterInstance.warning(options);
+toaster.info = (options) => toasterInstance.info(options);
 
-toaster.configure = (o) => instance.configure(o);
-toaster.clear = () => instance.clear();
+toaster.configure = (options) => toasterInstance.configure(options);
+toaster.clear = () => toasterInstance.clear();
 
 export { UniverseToaster, toaster };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "universe-code",
-  "version": "0.0.79",
+  "version": "0.0.80",
   "description": "Universal utility functions for all JS frameworks",
   "license": "ISC",
   "type": "module",