@modernman00/shared-js-lib 1.2.81 → 1.2.83

package/CardCanvasGenerator.js

@@ -0,0 +1,367 @@
+/**
+ * CardCanvasGenerator.js
+ * High-resolution 1200x630 / 1200x675 HTML5 Canvas Social Card Generator.
+ * Part of @modernman00/shared-js-lib
+ */
+
+export class CardCanvasGenerator {
+  /**
+   * Default configuration options
+   */
+  static get DEFAULT_OPTIONS() {
+    return {
+      width: 1200,
+      height: 675,
+      brandName: 'Platform',
+      brandBadge: 'DECISION INTELLIGENCE',
+      title: 'Strategic Analysis',
+      subtitle: '',
+      score: 85,
+      maxScore: 100,
+      scoreLabel: 'SCORE',
+      verdict: 'STRONG GO',
+      verdictColor: '#10b981', // emerald
+      primaryColor: '#10b981',
+      secondaryColor: '#3b82f6',
+      accentColor: '#6366f1',
+      backgroundColor: '#090d16',
+      cardBackground: 'rgba(255, 255, 255, 0.03)',
+      borderColor: 'rgba(255, 255, 255, 0.1)',
+      textColor: '#ffffff',
+      mutedTextColor: '#94a3b8',
+      watermarkText: 'Generated with Decision Intelligence Platform',
+      metrics: [], // Array of { label: string, score: number, maxScore?: number }
+      showGauge: true,
+      showMetrics: true
+    };
+  }
+
+  /**
+   * Renders the card onto a target HTML5 canvas element
+   * @param {HTMLCanvasElement} canvas
+   * @param {Object} options
+   * @returns {HTMLCanvasElement}
+   */
+  static renderToCanvas(canvas, options = {}) {
+    const opts = { ...this.DEFAULT_OPTIONS, ...options };
+    const width = opts.width;
+    const height = opts.height;
+
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+      throw new Error('Unable to obtain 2D canvas rendering context.');
+    }
+
+    // 1. Draw Deep Gradient Background
+    const bgGrad = ctx.createLinearGradient(0, 0, width, height);
+    bgGrad.addColorStop(0, opts.backgroundColor || '#090d16');
+    bgGrad.addColorStop(0.5, '#0d1527');
+    bgGrad.addColorStop(1, '#050811');
+    ctx.fillStyle = bgGrad;
+    ctx.fillRect(0, 0, width, height);
+
+    // 2. Ambient Lighting / Glow Orbs
+    this._drawGlowOrb(ctx, 150, 120, 250, opts.primaryColor, 0.18);
+    this._drawGlowOrb(ctx, width - 200, height - 150, 300, opts.secondaryColor, 0.15);
+
+    // 3. Subtle Grid Pattern
+    ctx.strokeStyle = 'rgba(255, 255, 255, 0.025)';
+    ctx.lineWidth = 1;
+    for (let x = 40; x < width; x += 60) {
+      ctx.beginPath();
+      ctx.moveTo(x, 0);
+      ctx.lineTo(x, height);
+      ctx.stroke();
+    }
+    for (let y = 40; y < height; y += 60) {
+      ctx.beginPath();
+      ctx.moveTo(0, y);
+      ctx.lineTo(width, y);
+      ctx.stroke();
+    }
+
+    // 4. Main Glassmorphic Card Container
+    const margin = 40;
+    const cardW = width - margin * 2;
+    const cardH = height - margin * 2;
+    this._drawRoundedRect(ctx, margin, margin, cardW, cardH, 24);
+    ctx.fillStyle = opts.cardBackground;
+    ctx.fill();
+    ctx.strokeStyle = opts.borderColor;
+    ctx.lineWidth = 1.5;
+    ctx.stroke();
+
+    // 5. Header: Brand & Badge
+    ctx.font = 'bold 26px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+    ctx.fillStyle = opts.textColor;
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(opts.brandName, margin + 40, margin + 50);
+
+    if (opts.brandBadge) {
+      const brandWidth = ctx.measureText(opts.brandName).width;
+      const badgeX = margin + 40 + brandWidth + 16;
+      const badgeY = margin + 37;
+      const badgeText = String(opts.brandBadge).toUpperCase();
+      ctx.font = 'bold 12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+      const badgeW = ctx.measureText(badgeText).width + 24;
+
+      this._drawRoundedRect(ctx, badgeX, badgeY, badgeW, 26, 6);
+      ctx.fillStyle = 'rgba(16, 185, 129, 0.15)';
+      ctx.fill();
+      ctx.strokeStyle = 'rgba(16, 185, 129, 0.4)';
+      ctx.lineWidth = 1;
+      ctx.stroke();
+
+      ctx.fillStyle = opts.primaryColor;
+      ctx.fillText(badgeText, badgeX + 12, badgeY + 13);
+    }
+
+    // Header Divider Line
+    ctx.beginPath();
+    ctx.moveTo(margin + 40, margin + 85);
+    ctx.lineTo(margin + cardW - 40, margin + 85);
+    ctx.strokeStyle = 'rgba(255, 255, 255, 0.08)';
+    ctx.lineWidth = 1;
+    ctx.stroke();
+
+    // 6. Left Column: Circular Glowing Gauge (if enabled)
+    const hasGauge = Boolean(opts.showGauge);
+    const leftColWidth = hasGauge ? 340 : 0;
+    const contentStartX = margin + 40 + leftColWidth;
+
+    if (hasGauge) {
+      const gaugeCenterX = margin + 170;
+      const gaugeCenterY = margin + 280;
+      const gaugeRadius = 110;
+
+      // Outer track
+      ctx.beginPath();
+      ctx.arc(gaugeCenterX, gaugeCenterY, gaugeRadius, 0, Math.PI * 2);
+      ctx.strokeStyle = 'rgba(255, 255, 255, 0.08)';
+      ctx.lineWidth = 16;
+      ctx.lineCap = 'round';
+      ctx.stroke();
+
+      // Active Arc
+      const scorePct = Math.max(0, Math.min(100, opts.score)) / (opts.maxScore || 100);
+      const startAngle = -Math.PI / 2;
+      const endAngle = startAngle + scorePct * (Math.PI * 2);
+
+      ctx.beginPath();
+      ctx.arc(gaugeCenterX, gaugeCenterY, gaugeRadius, startAngle, endAngle);
+      const gaugeGrad = ctx.createLinearGradient(
+        gaugeCenterX - gaugeRadius,
+        gaugeCenterY - gaugeRadius,
+        gaugeCenterX + gaugeRadius,
+        gaugeCenterY + gaugeRadius
+      );
+      gaugeGrad.addColorStop(0, opts.primaryColor);
+      gaugeGrad.addColorStop(1, opts.secondaryColor);
+      ctx.strokeStyle = gaugeGrad;
+      ctx.lineWidth = 16;
+      ctx.stroke();
+
+      // Score Value
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.font = 'bold 64px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+      ctx.fillStyle = opts.textColor;
+      ctx.fillText(`${Math.round(opts.score)}%`, gaugeCenterX, gaugeCenterY - 10);
+
+      ctx.font = '600 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+      ctx.fillStyle = opts.mutedTextColor;
+      ctx.fillText(opts.scoreLabel, gaugeCenterX, gaugeCenterY + 36);
+
+      // Verdict Pill below gauge
+      if (opts.verdict) {
+        const pillY = gaugeCenterY + gaugeRadius + 30;
+        ctx.font = 'bold 15px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+        const pillText = String(opts.verdict).toUpperCase();
+        const pillW = ctx.measureText(pillText).width + 36;
+        const pillH = 34;
+
+        this._drawRoundedRect(ctx, gaugeCenterX - pillW / 2, pillY, pillW, pillH, 17);
+        ctx.fillStyle = 'rgba(16, 185, 129, 0.15)';
+        ctx.fill();
+        ctx.strokeStyle = opts.verdictColor;
+        ctx.lineWidth = 1.5;
+        ctx.stroke();
+
+        ctx.fillStyle = opts.verdictColor;
+        ctx.fillText(pillText, gaugeCenterX, pillY + pillH / 2);
+      }
+    }
+
+    // 7. Right Column: Headline, Subtitle & Metrics
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'top';
+
+    // Title (multi-line word wrap)
+    ctx.font = 'bold 38px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+    ctx.fillStyle = opts.textColor;
+    const maxTitleW = cardW - (contentStartX - margin) - 40;
+    const titleLines = this._wrapText(ctx, opts.title, maxTitleW);
+    let curY = margin + 120;
+
+    titleLines.slice(0, 2).forEach((line) => {
+      ctx.fillText(line, contentStartX, curY);
+      curY += 48;
+    });
+
+    // Subtitle
+    if (opts.subtitle) {
+      curY += 6;
+      ctx.font = '500 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+      ctx.fillStyle = opts.mutedTextColor;
+      const subLines = this._wrapText(ctx, opts.subtitle, maxTitleW);
+      subLines.slice(0, 2).forEach((line) => {
+        ctx.fillText(line, contentStartX, curY);
+        curY += 26;
+      });
+    }
+
+    // Metrics Breakdown Bars (if provided)
+    if (opts.showMetrics && Array.isArray(opts.metrics) && opts.metrics.length > 0) {
+      curY += 24;
+      const barTotalWidth = Math.min(maxTitleW, 640);
+      const metricsToShow = opts.metrics.slice(0, 4);
+
+      metricsToShow.forEach((metric) => {
+        const mScore = Number(metric.score ?? 0);
+        const mMax = Number(metric.maxScore ?? 10);
+        const mRatio = Math.max(0, Math.min(1, mMax > 0 ? mScore / mMax : 0));
+
+        // Metric label & score
+        ctx.font = '600 15px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+        ctx.fillStyle = '#e2e8f0';
+        ctx.fillText(metric.label, contentStartX, curY);
+
+        ctx.textAlign = 'right';
+        ctx.fillStyle = opts.primaryColor;
+        ctx.fillText(`${mScore} / ${mMax}`, contentStartX + barTotalWidth, curY);
+        ctx.textAlign = 'left';
+
+        // Track bar
+        const barY = curY + 24;
+        const barH = 8;
+        this._drawRoundedRect(ctx, contentStartX, barY, barTotalWidth, barH, 4);
+        ctx.fillStyle = 'rgba(255, 255, 255, 0.08)';
+        ctx.fill();
+
+        // Fill bar
+        if (mRatio > 0) {
+          const fillW = Math.max(8, barTotalWidth * mRatio);
+          this._drawRoundedRect(ctx, contentStartX, barY, fillW, barH, 4);
+          const barGrad = ctx.createLinearGradient(contentStartX, barY, contentStartX + fillW, barY);
+          barGrad.addColorStop(0, opts.primaryColor);
+          barGrad.addColorStop(1, opts.secondaryColor);
+          ctx.fillStyle = barGrad;
+          ctx.fill();
+        }
+
+        curY += 46;
+      });
+    }
+
+    // 8. Footer Watermark & Domain
+    const footerY = margin + cardH - 35;
+    ctx.font = '500 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+    ctx.fillStyle = opts.mutedTextColor;
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(opts.watermarkText, margin + 40, footerY);
+
+    return canvas;
+  }
+
+  /**
+   * Generates a PNG Blob from options
+   * @param {Object} options
+   * @param {string} [type='image/png']
+   * @param {number} [quality=0.95]
+   * @returns {Promise<Blob>}
+   */
+  static generateBlob(options = {}, type = 'image/png', quality = 0.95) {
+    return new Promise((resolve, reject) => {
+      try {
+        const canvas = document.createElement('canvas');
+        this.renderToCanvas(canvas, options);
+        canvas.toBlob((blob) => {
+          if (blob) {
+            resolve(blob);
+          } else {
+            reject(new Error('Canvas toBlob returned null'));
+          }
+        }, type, quality);
+      } catch (err) {
+        reject(err);
+      }
+    });
+  }
+
+  /**
+   * Generates a Data URL string from options
+   * @param {Object} options
+   * @param {string} [type='image/png']
+   * @returns {string}
+   */
+  static generateDataUrl(options = {}, type = 'image/png') {
+    const canvas = document.createElement('canvas');
+    this.renderToCanvas(canvas, options);
+    return canvas.toDataURL(type);
+  }
+
+  // --- Internal Drawing Helpers ---
+
+  static _drawGlowOrb(ctx, x, y, radius, color, alpha) {
+    ctx.save();
+    ctx.beginPath();
+    ctx.arc(x, y, radius, 0, Math.PI * 2);
+    const grad = ctx.createRadialGradient(x, y, 0, x, y, radius);
+    grad.addColorStop(0, color);
+    grad.addColorStop(1, 'transparent');
+    ctx.fillStyle = grad;
+    ctx.globalAlpha = alpha;
+    ctx.fill();
+    ctx.restore();
+  }
+
+  static _drawRoundedRect(ctx, x, y, width, height, radius) {
+    ctx.beginPath();
+    ctx.moveTo(x + radius, y);
+    ctx.lineTo(x + width - radius, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+    ctx.lineTo(x + width, y + height - radius);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+    ctx.lineTo(x + radius, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+    ctx.lineTo(x, y + radius);
+    ctx.quadraticCurveTo(x, y, x + radius, y);
+    ctx.closePath();
+  }
+
+  static _wrapText(ctx, text, maxWidth) {
+    if (!text) return [];
+    const words = String(text).split(' ');
+    const lines = [];
+    let currentLine = words[0] || '';
+
+    for (let i = 1; i < words.length; i++) {
+      const word = words[i];
+      const width = ctx.measureText(`${currentLine} ${word}`).width;
+      if (width < maxWidth) {
+        currentLine += ` ${word}`;
+      } else {
+        lines.push(currentLine);
+        currentLine = word;
+      }
+    }
+    if (currentLine) {
+      lines.push(currentLine);
+    }
+    return lines;
+  }
+}

package/Clipboard.js

@@ -0,0 +1,45 @@
+'use strict';
+import { swalToast, swalError } from './Alert.js';
+
+/**
+ * Universal clipboard copy utility with automatic SweetAlert2 toast feedback.
+ * 
+ * @param {string} text - Text to copy
+ * @param {string} [successMessage='Copied to clipboard!'] - Custom toast notification
+ * @param {boolean} [showToast=true] - Whether to fire Swal toast
+ * @returns {Promise<boolean>} True if copy was successful
+ */
+export const copyToClipboard = async (
+  text,
+  successMessage = 'Copied to clipboard!',
+  showToast = true
+) => {
+  if (typeof window === 'undefined') return false;
+
+  try {
+    if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
+      await navigator.clipboard.writeText(text);
+    } else {
+      // Fallback for older browsers
+      const textarea = document.createElement('textarea');
+      textarea.value = text;
+      textarea.style.position = 'fixed';
+      textarea.style.left = '-9999px';
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textarea);
+    }
+
+    if (showToast) {
+      swalToast(successMessage, 'success', 2500);
+    }
+    return true;
+  } catch (err) {
+    console.error('copyToClipboard Error:', err);
+    if (showToast) {
+      swalError('Failed to copy text to clipboard.', false);
+    }
+    return false;
+  }
+};

package/Cookie.js

@@ -28,25 +28,7 @@ export const getCookie = (cname) => {
 
 
 
-/**
- * Checks if a cookie with the given name exists. If not, prompts the user
- * for a name and sets the cookie for 365 days. If the cookie does exist,
- * alerts the user with a welcome message.
- * @param {string} name - The name of the cookie to check.
- */
-export const checkCookie = (name) => {
-    let user = getCookie(name);
-    if (!user) {
-        const askName = prompt("Please enter your name:", "");
-        if (askName) {
-            setCookie(name, askName, 365);
-            user = askName;
-        }
-    }
-    if (user) {
-        alert(`Welcome again ${user}`);
-    }
-}
+
 
 // CHECK TOKEN FROM COOKIE 
 export const getCookieValue = (name) => {

package/FormLock.js

@@ -0,0 +1,58 @@
+'use strict';
+import { swalToast, swalWarning } from './Alert.js';
+
+/**
+ * Registry of active in-flight locks keyed by form ID or URL.
+ */
+const inFlightLocks = new Set();
+
+/**
+ * Checks if an operation is currently locked.
+ * @param {string} key
+ * @returns {boolean}
+ */
+export const isOperationLocked = (key) => inFlightLocks.has(key);
+
+/**
+ * Acquires a lock for a key. Returns true if acquired, false if already in flight.
+ * @param {string} key
+ * @returns {boolean}
+ */
+export const acquireLock = (key) => {
+  if (inFlightLocks.has(key)) return false;
+  inFlightLocks.add(key);
+  return true;
+};
+
+/**
+ * Releases a lock for a key.
+ * @param {string} key
+ */
+export const releaseLock = (key) => {
+  inFlightLocks.delete(key);
+};
+
+/**
+ * Guard utility to prevent concurrent or rapid double-submissions.
+ * 
+ * @param {string} lockKey - Unique identifier (e.g. formId or URL)
+ * @param {() => Promise<any>} asyncFn - Async action to run exclusively
+ * @param {string} [busyMessage='Please wait, an operation is already in progress...']
+ * @returns {Promise<any>}
+ */
+export const withSubmissionLock = async (
+  lockKey,
+  asyncFn,
+  busyMessage = 'Please wait, an operation is already in progress...'
+) => {
+  if (!acquireLock(lockKey)) {
+    swalToast(busyMessage, 'warning', 2500);
+    return null;
+  }
+
+  try {
+    return await asyncFn();
+  } finally {
+    releaseLock(lockKey);
+  }
+};