@modernman00/shared-js-lib 1.2.82 → 1.2.87

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/OfflineQueue.js

@@ -0,0 +1,278 @@
+/**
+ * 📦 OfflineQueue — Resilient IndexedDB Offline Request Queue
+ * Part of @modernman00/shared-js-lib
+ *
+ * Implements the Deloitte Digital & BRATS-approved enterprise architecture:
+ * 1. UUIDv4 Idempotency Key injection ('X-Idempotency-Key') to eliminate duplicate writes
+ * 2. Strict Security Blacklist: Refuses to store credentials, passwords, or /auth/* /admin/* requests
+ * 3. Kieran Memory Cap: 2MB max per payload, 30 items max queue depth
+ * 4. 24-Hour automatic request expiration
+ * 5. Automatic replay on 'online' event with fresh CSRF token header
+ */
+
+export class OfflineQueue {
+  constructor(options = {}) {
+    this.appName = options.appName || (typeof window !== 'undefined' ? window.location.hostname.replace(/[^a-zA-Z0-9]/g, '_') : 'app');
+    this.dbName = options.dbName || `${this.appName}_offline_db`;
+    this.storeName = 'offline_requests';
+    this.dbVersion = 1;
+    this.maxItems = options.maxItems || 30;
+    this.maxPayloadBytes = options.maxPayloadBytes || 2 * 1024 * 1024; // 2MB cap
+    this.maxAgeMs = options.maxAgeMs || 24 * 60 * 60 * 1000; // 24 hours
+    this.db = null;
+    this.isReplaying = false;
+
+    // Security Blacklist (never cache credentials/auth/passwords offline)
+    this.blacklistPatterns = [
+      /\/auth\//i,
+      /\/admin\//i,
+      /\/login/i,
+      /\/logout/i,
+      /\/signout/i,
+      /\/password/i,
+      /\/2fa/i,
+      /\/totp/i
+    ];
+
+    if (typeof window !== 'undefined') {
+      window.addEventListener('online', () => this.replay());
+    }
+  }
+
+  /**
+   * Generates standard RFC4122 v4 UUID for request idempotency
+   */
+  static generateUUID() {
+    if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+      return crypto.randomUUID();
+    }
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+      const r = (Math.random() * 16) | 0;
+      const v = c === 'x' ? r : (r & 0x3) | 0x8;
+      return v.toString(16);
+    });
+  }
+
+  /**
+   * Initializes or returns the open IndexedDB instance
+   */
+  async getDB() {
+    if (this.db) return this.db;
+    if (typeof indexedDB === 'undefined') {
+      throw new Error('IndexedDB is not supported in this browser environment');
+    }
+
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open(this.dbName, this.dbVersion);
+
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => {
+        this.db = request.result;
+        resolve(this.db);
+      };
+      request.onupgradeneeded = (event) => {
+        const db = event.target.result;
+        if (!db.objectStoreNames.contains(this.storeName)) {
+          const store = db.createObjectStore(this.storeName, { keyPath: 'id', autoIncrement: true });
+          store.createIndex('timestamp', 'timestamp', { unique: false });
+          store.createIndex('idempotencyKey', 'idempotencyKey', { unique: true });
+        }
+      };
+    });
+  }
+
+  /**
+   * Check if URL matches the security blacklist
+   */
+  isBlacklisted(url) {
+    if (!url || typeof url !== 'string') return true;
+    return this.blacklistPatterns.some(pattern => pattern.test(url));
+  }
+
+  /**
+   * Enqueues an outgoing request for offline storage and later replay
+   */
+  async enqueue(requestData) {
+    const { url, method = 'POST', headers = {}, body = null } = requestData;
+
+    // Security Gate
+    if (this.isBlacklisted(url)) {
+      console.warn(`[OfflineQueue] Blocked security-sensitive request from offline storage: ${url}`);
+      return false;
+    }
+
+    // Payload Size Guard (Kieran Memory Protection)
+    const serializedBody = typeof body === 'string' ? body : JSON.stringify(body || {});
+    const bodySize = typeof Blob !== 'undefined' ? new Blob([serializedBody]).size : serializedBody.length;
+    if (bodySize > this.maxPayloadBytes) {
+      console.warn(`[OfflineQueue] Request payload exceeds 2MB memory cap (${bodySize} bytes). Dropping.`);
+      if (typeof window !== 'undefined' && window.dispatchEvent) {
+        window.dispatchEvent(new CustomEvent('offlinequeue:payload-too-large', { detail: { url } }));
+      }
+      return false;
+    }
+
+    // Filter headers to strip sensitive authorization tokens from plaintext IndexedDB
+    const safeHeaders = {};
+    const headerEntries = headers.entries ? Array.from(headers.entries()) : Object.entries(headers || {});
+    for (const [key, value] of headerEntries) {
+      const lower = key.toLowerCase();
+      if (lower !== 'authorization' && lower !== 'cookie' && lower !== 'set-cookie') {
+        safeHeaders[key] = value;
+      }
+    }
+
+    const idempotencyKey = safeHeaders['x-idempotency-key'] || safeHeaders['X-Idempotency-Key'] || OfflineQueue.generateUUID();
+    safeHeaders['X-Idempotency-Key'] = idempotencyKey;
+
+    const db = await this.getDB();
+
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(this.storeName, 'readwrite');
+      const store = tx.objectStore(this.storeName);
+
+      // Check max queue length
+      const countReq = store.count();
+      countReq.onsuccess = () => {
+        if (countReq.result >= this.maxItems) {
+          console.warn(`[OfflineQueue] Queue reached max depth (${this.maxItems}). Dropping oldest request.`);
+          const openCursor = store.openCursor();
+          openCursor.onsuccess = (e) => {
+            const cursor = e.target.result;
+            if (cursor) {
+              store.delete(cursor.primaryKey);
+            }
+          };
+        }
+
+        const item = {
+          url,
+          method: method.toUpperCase(),
+          headers: safeHeaders,
+          body: serializedBody,
+          idempotencyKey,
+          timestamp: Date.now()
+        };
+
+        store.add(item);
+      };
+
+      tx.oncomplete = () => {
+        console.log(`[OfflineQueue] Request queued successfully with Idempotency Key: ${idempotencyKey}`);
+        if (typeof window !== 'undefined' && window.dispatchEvent) {
+          window.dispatchEvent(new CustomEvent('offlinequeue:enqueued', { detail: { url, idempotencyKey } }));
+        }
+        resolve(idempotencyKey);
+      };
+      tx.onerror = () => reject(tx.error);
+    });
+  }
+
+  /**
+   * Replays all stored offline requests sequentially
+   */
+  async replay() {
+    if (this.isReplaying || (typeof navigator !== 'undefined' && !navigator.onLine)) {
+      return;
+    }
+
+    this.isReplaying = true;
+    const db = await this.getDB();
+
+    try {
+      const items = await new Promise((resolve, reject) => {
+        const tx = db.transaction(this.storeName, 'readonly');
+        const store = tx.objectStore(this.storeName);
+        const req = store.getAll();
+        req.onsuccess = () => resolve(req.result || []);
+        req.onerror = () => reject(req.error);
+      });
+
+      if (items.length === 0) {
+        this.isReplaying = false;
+        return;
+      }
+
+      console.log(`[OfflineQueue] Network restored. Replaying ${items.length} queued request(s)...`);
+
+      // Refresh CSRF Token if available in DOM
+      let currentCsrf = null;
+      if (typeof document !== 'undefined') {
+        const metaCsrf = document.querySelector('meta[name="csrf-token"]') || document.querySelector('meta[name="csrf"]');
+        if (metaCsrf) currentCsrf = metaCsrf.getAttribute('content');
+      }
+
+      const now = Date.now();
+
+      for (const item of items) {
+        // Expiration check (24h)
+        if (now - item.timestamp > this.maxAgeMs) {
+          console.warn(`[OfflineQueue] Request to ${item.url} expired (>24h). Removing from queue.`);
+          await this.deleteItem(item.id);
+          continue;
+        }
+
+        const headers = { ...item.headers };
+        if (currentCsrf) {
+          headers['X-CSRF-TOKEN'] = currentCsrf;
+        }
+
+        try {
+          const response = await fetch(item.url, {
+            method: item.method,
+            headers,
+            body: item.body
+          });
+
+          // If server successfully processed (2xx or 4xx business error), delete from queue
+          // (4xx means invalid input or already processed, no point in infinite retry loop)
+          if (response.ok || (response.status >= 400 && response.status < 500)) {
+            console.log(`[OfflineQueue] Replayed ${item.url} -> Status ${response.status}`);
+            await this.deleteItem(item.id);
+          } else {
+            console.warn(`[OfflineQueue] Server returned ${response.status} for ${item.url}. Will retry later.`);
+            break; // Stop replay if server is returning 5xx errors
+          }
+        } catch (networkErr) {
+          console.warn(`[OfflineQueue] Network still unstable during replay: ${networkErr.message}`);
+          break; // Stop loop and wait for next online event
+        }
+      }
+    } catch (err) {
+      console.error('[OfflineQueue] Replay cycle error:', err);
+    } finally {
+      this.isReplaying = false;
+      if (typeof window !== 'undefined' && window.dispatchEvent) {
+        window.dispatchEvent(new CustomEvent('offlinequeue:replay-complete'));
+      }
+    }
+  }
+
+  /**
+   * Deletes a single item by primary key ID
+   */
+  async deleteItem(id) {
+    const db = await this.getDB();
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(this.storeName, 'readwrite');
+      const store = tx.objectStore(this.storeName);
+      store.delete(id);
+      tx.oncomplete = () => resolve();
+      tx.onerror = () => reject(tx.error);
+    });
+  }
+
+  /**
+   * Clears all queued items
+   */
+  async clear() {
+    const db = await this.getDB();
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(this.storeName, 'readwrite');
+      const store = tx.objectStore(this.storeName);
+      store.clear();
+      tx.oncomplete = () => resolve();
+      tx.onerror = () => reject(tx.error);
+    });
+  }
+}