universe-code 0.0.81 → 0.0.83

package/dist/uiux/toaster/index.js

@@ -4,18 +4,33 @@ class UniverseToaster {
 
     this.container = null;
     this.toasts = [];
-    this.config = {
-      position: "top-right",
-      duration: 4000,
-      maxToasts: 5,
-    };
+    this.config = null;
     this.initialized = false;
+    this.configured = false;
 
     UniverseToaster.instance = this;
   }
 
+  /* ================= CONFIG ================= */
+  configure(options) {
+    if (!options || typeof options !== "object") {
+      throw new Error("UniverseToaster: configuration object is required.");
+    }
+    
+    if (!options.position || !options.duration || !options.maxToasts) {
+      throw new Error("UniverseToaster: position, duration and maxToasts are required in config.");
+    }
+    
+    this.config = options;
+    this.configured = true;
+  }
+
   /* ================= INIT ================= */
   init() {
+    if (!this.configured) {
+      throw new Error("UniverseToaster not configured. Call toaster.configure({...}) first.");
+    }
+
     if (this.initialized) return;
 
     this.container = document.createElement("div");
@@ -27,11 +42,6 @@ class UniverseToaster {
     this.initialized = true;
   }
 
-  /* ================= CONFIG ================= */
-  configure(options = {}) {
-    this.config = { ...this.config, ...options };
-  }
-
   /* ================= STYLES ================= */
   injectStyles() {
     if (document.getElementById("universe-toaster-styles")) return;
@@ -46,14 +56,32 @@ class UniverseToaster {
 
 .universe-toaster-container {
   position: fixed;
-  top: -5px;
-  right: 5px;
   min-width: 300px;
   z-index: 2147483647;
   max-width: 400px;
   font-family: Arial, sans-serif;
 }
 
+.top-right {
+  top: -5px;
+  right: 5px;
+}
+
+.top-left {
+  top: -5px;
+  left: 5px;
+}
+
+.bottom-right {
+  bottom: -5px;
+  right: 5px;
+}
+
+.bottom-left {
+  bottom: -5px;
+  left: 5px;
+}
+
 .universe-toast {
   margin: 15px 0;
   background: white;
@@ -63,20 +91,45 @@ class UniverseToaster {
   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 {
+/* Right side positions - slide from right */
+.top-right .universe-toast,
+.bottom-right .universe-toast {
+  transform: translateX(100%);
+}
+
+.top-right .universe-toast.show,
+.bottom-right .universe-toast.show {
   opacity: 1;
   transform: translateX(0);
 }
 
-.universe-toast.removing {
+.top-right .universe-toast.removing,
+.bottom-right .universe-toast.removing {
   opacity: 0;
   transform: translateX(100%);
 }
 
+/* Left side positions - slide from left */
+.top-left .universe-toast,
+.bottom-left .universe-toast {
+  transform: translateX(-100%);
+}
+
+.top-left .universe-toast.show,
+.bottom-left .universe-toast.show {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.top-left .universe-toast.removing,
+.bottom-left .universe-toast.removing {
+  opacity: 0;
+  transform: translateX(-100%);
+}
+
 .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; }
@@ -139,6 +192,10 @@ class UniverseToaster {
 
   /* ================= CORE SHOW ================= */
   showToast({ status = "info", title = "", description = "", duration }) {
+    if (!this.configured) {
+      throw new Error("UniverseToaster not configured. Please call toaster.configure(config) before showing toasts.");
+    }
+  
     if (!this.initialized) this.init();
 
     if (this.toasts.length >= this.config.maxToasts) {
@@ -168,7 +225,11 @@ class UniverseToaster {
     toast.querySelector(".universe-toast-close").onclick = () =>
       this.remove(toastId);
 
-    this.container.appendChild(toast);
+    if (this.config.position.includes("top")) {
+      this.container.insertBefore(toast, this.container.firstChild);
+    } else {
+      this.container.appendChild(toast);
+    }
     this.toasts.push({ id: toastId, element: toast });
 
     setTimeout(() => toast.classList.add("show"), 50);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "universe-code",
-  "version": "0.0.81",
+  "version": "0.0.83",
   "description": "Universal utility functions for all JS frameworks",
   "license": "ISC",
   "type": "module",
@@ -54,7 +54,8 @@
   "dependencies": {
     "@angular/common": "^21.0.6",
     "@angular/core": "^21.0.6",
-    "react": "^19.2.3"
+    "react": "^19.2.3",
+    "socket.io-client": "^4.8.3"
   },
   "keywords": [
     "universe-code",