universe-code 0.0.77 → 0.0.78

package/dist/index.d.ts

@@ -2,4 +2,5 @@ declare module 'universe-code';
 declare module 'universe-code/core';
 declare module 'universe-code/indexdb';
 declare module 'universe-code/react';
-declare module 'universe-code/angular';
+declare module 'universe-code/angular';
+declare module 'universe-code/uiux';

package/dist/uiux/index.js

@@ -0,0 +1 @@
+export { UniverseToaster, toaster } from "./toaster.js";

package/dist/uiux/toaster/index.js

@@ -0,0 +1,239 @@
+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 {
+  from { width: 100%; }
+  to { width: 0%; }
+}
+
+.universe-toaster-container {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 9999;
+  max-width: 380px;
+  font-family: Arial, sans-serif;
+}
+
+.universe-toast {
+  background: #fff;
+  margin: 12px 0;
+  padding: 16px 18px;
+  border-radius: 12px;
+  box-shadow: 0 10px 35px rgba(0,0,0,0.25);
+  opacity: 0;
+  transform: translateX(100%);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.universe-toast.show {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.universe-toast.removing {
+  opacity: 0;
+  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-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 6px;
+}
+
+.universe-toast-title {
+  font-weight: 600;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+}
+
+.universe-toast-icon {
+  margin-right: 8px;
+}
+
+.universe-toast-message {
+  font-size: 13px;
+  color: #333;
+}
+
+.universe-toast-close {
+  background: none;
+  border: none;
+  font-size: 18px;
+  cursor: pointer;
+  color: #999;
+}
+
+.universe-toast-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 3px;
+  width: 100%;
+  opacity: 0.4;
+}
+
+.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] || "ℹ";
+    }
+
+    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 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-${type}`;
+        toast.dataset.id = id;
+
+        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 || "")}
+  </div>
+  <button class="universe-toast-close">&times;</button>
+</div>
+<div class="universe-toast-message">${this.escape(message)}</div>
+<div class="universe-toast-progress"></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 });
+
+        setTimeout(() => toast.classList.add("show"), 20);
+
+        if (duration > 0) {
+            setTimeout(() => this.remove(id), duration);
+        }
+    }
+
+    /* ---------------- REMOVE ---------------- */
+    remove(id) {
+        const toast = this.toasts.find(t => t.id === id);
+        if (!toast) return;
+
+        toast.el.classList.add("removing");
+
+        setTimeout(() => {
+            toast.el.remove();
+            this.toasts = this.toasts.filter(t => t.id !== id);
+        }, 300);
+    }
+
+    /* ---------------- 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); }
+
+    clear() {
+        this.toasts.forEach(t => t.el.remove());
+        this.toasts = [];
+    }
+}
+
+/* ================= CALLABLE WRAPPER ================= */
+
+const instance = 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);
+}
+
+/* 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.configure = (o) => instance.configure(o);
+toaster.clear = () => instance.clear();
+
+export { UniverseToaster, toaster };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "universe-code",
-  "version": "0.0.77",
+  "version": "0.0.78",
   "description": "Universal utility functions for all JS frameworks",
   "license": "ISC",
   "type": "module",
@@ -31,6 +31,10 @@
     "./core": {
       "import": "./dist/core/index.js",
       "types": "./dist/index.d.ts"
+    },
+    "./uiux": {
+      "import": "./dist/uiux/index.js",
+      "types": "./dist/index.d.ts"
     }
   },
   "files": [