@carmaclouds/core 2.3.1

package/src/modules/notification-system.js

@@ -0,0 +1,92 @@
+/**
+ * Notification System Module
+ *
+ * Provides toast-style notifications with animations and color coding.
+ * Loaded as a plain script (no ES6 modules) to export to globalThis.
+ *
+ * Functions exported to globalThis:
+ * - showNotification(message, type = 'info')
+ */
+
+(function() {
+  'use strict';
+
+  // Add animation styles if not already present
+  function ensureAnimationStyles() {
+    if (!document.querySelector('#notification-styles')) {
+      const style = document.createElement('style');
+      style.id = 'notification-styles';
+      style.textContent = `
+        @keyframes slideIn {
+          from {
+            opacity: 0;
+            transform: translateX(100%);
+          }
+          to {
+            opacity: 1;
+            transform: translateX(0);
+          }
+        }
+
+        @keyframes slideOut {
+          from {
+            opacity: 1;
+            transform: translateX(0);
+          }
+          to {
+            opacity: 0;
+            transform: translateX(100%);
+          }
+        }
+      `;
+      document.head.appendChild(style);
+    }
+  }
+
+  /**
+   * Show a toast notification
+   * @param {string} message - The message to display
+   * @param {string} type - Type of notification: 'success', 'error', or 'info' (default)
+   * @param {number} duration - How long to show the notification in ms (default: 3000)
+   */
+  function showNotification(message, type = 'info', duration = 3000) {
+    ensureAnimationStyles();
+
+    const colors = {
+      success: '#27AE60',
+      error: '#E74C3C',
+      info: '#4ECDC4',
+      warning: '#F39C12'
+    };
+
+    const notification = document.createElement('div');
+    notification.style.cssText = `
+      position: fixed;
+      top: 20px;
+      right: 20px;
+      background: ${colors[type] || colors.info};
+      color: white;
+      padding: 15px 20px;
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+      z-index: 100002;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      font-size: 14px;
+      max-width: 300px;
+      animation: slideIn 0.3s ease-out;
+      word-wrap: break-word;
+    `;
+    notification.textContent = message;
+
+    document.body.appendChild(notification);
+
+    setTimeout(() => {
+      notification.style.animation = 'slideOut 0.3s ease-in';
+      setTimeout(() => notification.remove(), 300);
+    }, duration);
+  }
+
+  // Export to globalThis for use across all scripts
+  globalThis.showNotification = showNotification;
+
+})();