universe-code 0.0.76 → 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/react/indexdb/store/config.js

@@ -1,19 +1,30 @@
 import { connectDB } from "./idbStore.js";
+
 let config = null;
 
+// 🔹 promise that resolves once IndexedDB is configured
+let resolveReady;
+export const configReady = new Promise((res) => (resolveReady = res));
+
 export const configureIdb = (options) => {
-    if (config) {
-        return;
-    }
-    config = options;
+  if (config) return;
+
+  config = options;
+
+  // notify others that config is ready
+  resolveReady?.();
+
+  // optional: eager connection
+  if (typeof window !== "undefined" && typeof indexedDB !== "undefined") {
     connectDB();
+  }
 };
 
 export const getConfig = () => {
-    if (!config) {
-        throw new Error(
-            "IndexedDB not configured. Call configureIdb() before using the store."
-        );
-    }
-    return config;
-};
+  if (!config) {
+    throw new Error(
+      "IndexedDB not configured. Call configureIdb() before using the store."
+    );
+  }
+  return config;
+};

package/dist/react/indexdb/store/idbStore.js

@@ -1,39 +1,62 @@
 import { DBManager, DB } from "universe-code";
-import { getConfig } from "./config.js";
+import { getConfig, configReady } from "./config.js";
 
 let db = null;
 let store = null;
 let manager = null;
 
-// ✅ index db connection
+// 🔹 Helper: only run in browser
+const isBrowser = () =>
+  typeof window !== "undefined" && typeof indexedDB !== "undefined";
+
+// ✅ connect to IndexedDB
 export const connectDB = async () => {
-  const { dbName, dbVersion, storeName } = getConfig(); // ✅ FIXED
+  // 🚫 Ignore during SSR / Node
+  if (!isBrowser()) return null;
+
+  // 🔥 wait for configureIdb() to be called
+  await configReady;
+
+  const { dbName, dbVersion, storeName } = getConfig();
 
   if (!manager) {
     manager = new DBManager(dbName, dbVersion);
   }
 
   if (!db) {
-    db = await manager.connect([{ name: storeName }]); // ✅ FIXED
+    db = await manager.connect([{ name: storeName }]);
   }
 
   return db;
 };
 
+// ✅ Return usable store object
 export const getIdbStore = async () => {
-  if (!store) {
-    const { storeName } = getConfig(); // ✅ FIXED
-    const database = await connectDB();
-
-    store = {
-      get: (key) => DB.get(database, storeName, key),
-      getWithExpiry: (key, ttl, api) =>
-        DB.getWithExpiry(database, storeName, key, ttl, api),
-      put: (data) => DB.put(database, storeName, data),
-      remove: (key) => DB.remove(database, storeName, key),
-      clear: () => DB.clear(database, storeName),
-    };
-  }
+  // 🚫 Ignore during SSR / Node
+  if (!isBrowser()) return null;
+
+  // already created? return cached store
+  if (store) return store;
+
+  // 🔥 wait for configureIdb()
+  await configReady;
+
+  const { storeName } = getConfig();
+
+  const database = await connectDB();
+
+  store = {
+    get: (key) => DB.get(database, storeName, key),
+
+    getWithExpiry: (key, ttl, api) =>
+      DB.getWithExpiry(database, storeName, key, ttl, api),
+
+    put: (data) => DB.put(database, storeName, data),
+
+    remove: (key) => DB.remove(database, storeName, key),
+
+    clear: () => DB.clear(database, storeName),
+  };
 
   return store;
-};
+};

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.76",
+  "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": [