@bugspotter/sdk 0.2.5-alpha.5 → 0.3.1

package/dist/index.js

@@ -62,7 +62,9 @@ async function fetchReplaySettings(endpoint, apiKey) {
         if (apiKey) {
             headers['x-api-key'] = apiKey;
         }
-        const response = await fetch(`${apiBaseUrl}/api/v1/settings/replay`, { headers });
+        const response = await fetch(`${apiBaseUrl}/api/v1/settings/replay`, {
+            headers,
+        });
         if (!response.ok) {
             logger.warn(`Failed to fetch replay settings: ${response.status}. Using defaults.`);
             return defaults;

package/dist/utils/sanitize-patterns.js

@@ -20,7 +20,11 @@ exports.DEFAULT_PATTERNS = {
         name: 'email',
         regex: /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/g,
         description: 'Email addresses',
-        examples: ['user@example.com', 'john.doe+tag@company.co.uk', 'test_user@sub.domain.com'],
+        examples: [
+            'user@example.com',
+            'john.doe+tag@company.co.uk',
+            'test_user@sub.domain.com',
+        ],
         priority: 1, // Highest priority - most specific
     },
     creditcard: {
@@ -53,7 +57,11 @@ exports.DEFAULT_PATTERNS = {
         name: 'ip',
         regex: /\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b|(?:[0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}\b/g,
         description: 'IPv4 and IPv6 addresses',
-        examples: ['192.168.1.100', '127.0.0.1', '2001:0db8:85a3:0000:0000:8a2e:0370:7334'],
+        examples: [
+            '192.168.1.100',
+            '127.0.0.1',
+            '2001:0db8:85a3:0000:0000:8a2e:0370:7334',
+        ],
         priority: 5,
     },
     phone: {
@@ -96,7 +104,11 @@ exports.DEFAULT_PATTERNS = {
         name: 'password',
         regex: /(?:password|passwd|pwd)[\s:=]+[^\s]{6,}|(?:password|passwd|pwd)["']?\s*[:=]\s*["']?[^\s"']{6,}/gi,
         description: 'Password fields in text (password=..., pwd:...)',
-        examples: ['password: MySecret123!', 'passwd=SecurePass456', 'pwd: "MyP@ssw0rd"'],
+        examples: [
+            'password: MySecret123!',
+            'passwd=SecurePass456',
+            'pwd: "MyP@ssw0rd"',
+        ],
         priority: 9,
     },
 };

package/dist/version.d.ts

@@ -5,4 +5,4 @@
  * This file is automatically generated during the build process.
  * To update the version, modify package.json
  */
-export declare const VERSION = "0.2.5-alpha.5";
+export declare const VERSION = "0.3.1";

package/dist/version.js

@@ -8,4 +8,4 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
-exports.VERSION = '0.2.5-alpha.5';
+exports.VERSION = '0.3.1';

package/dist/widget/components/form-validator.js

@@ -31,7 +31,8 @@ class FormValidator {
         }
         // Validate PII confirmation if PII detected
         if (data.piiDetected && !data.piiConfirmed) {
-            errors.piiConfirmation = 'Please confirm you have reviewed sensitive information';
+            errors.piiConfirmation =
+                'Please confirm you have reviewed sensitive information';
         }
         return {
             isValid: Object.keys(errors).length === 0,

package/dist/widget/components/style-manager.d.ts

@@ -13,11 +13,28 @@ export interface StyleConfig {
 }
 export declare class StyleManager {
     private config;
+    private readonly SPACING;
+    private readonly BREAKPOINTS;
+    private readonly MODAL_SIZES;
+    private readonly FONT_SIZES;
+    private readonly BORDER_STYLES;
+    private readonly SHADOW_STYLES;
     constructor(config?: StyleConfig);
     /**
      * Generate complete CSS stylesheet for the modal
      */
     generateStyles(): string;
+    private generateOverlayStyles;
+    private generateModalStyles;
+    private generateHeaderStyles;
+    private generateBodyStyles;
+    private generateFormStyles;
+    private generateButtonStyles;
+    private generatePIIStyles;
+    private generateLoadingStyles;
+    private generateAccessibilityStyles;
+    private generateTabletResponsiveStyles;
+    private generateMobileResponsiveStyles;
     /**
      * Inject styles into document head
      */

package/dist/widget/components/style-manager.js

@@ -9,11 +9,50 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyleManager = void 0;
 class StyleManager {
     constructor(config = {}) {
+        // ============================================================================
+        // SPACING & SIZING CONSTANTS
+        // ============================================================================
+        this.SPACING = {
+            xs: 8,
+            sm: 12,
+            md: 16,
+            lg: 20,
+        };
+        this.BREAKPOINTS = {
+            tablet: 768,
+            mobile: 480,
+        };
+        this.MODAL_SIZES = {
+            desktop: '600px',
+            tablet: '500px',
+            mobilePercent: '98%',
+            headerHeight: '30px',
+        };
+        // ============================================================================
+        // FONT & LAYOUT CONSTANTS
+        // ============================================================================
+        this.FONT_SIZES = {
+            h2: '20px',
+            h2Mobile: '18px',
+            label: '14px',
+            labelMobile: '13px',
+            body: '14px',
+            small: '12px',
+            sr: '13px',
+        };
+        this.BORDER_STYLES = {
+            primary: '1px solid #e0e0e0',
+            light: '1px solid #ddd',
+        };
+        this.SHADOW_STYLES = {
+            modal: '0 4px 6px rgba(0, 0, 0, 0.1)',
+        };
         this.config = {
             primaryColor: config.primaryColor || '#007bff',
             dangerColor: config.dangerColor || '#dc3545',
             borderRadius: config.borderRadius || '4px',
-            fontFamily: config.fontFamily || '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+            fontFamily: config.fontFamily ||
+                '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
             zIndex: config.zIndex || 999999,
         };
     }
@@ -22,6 +61,24 @@ class StyleManager {
      */
     generateStyles() {
         return `
+      ${this.generateOverlayStyles()}
+      ${this.generateModalStyles()}
+      ${this.generateHeaderStyles()}
+      ${this.generateBodyStyles()}
+      ${this.generateFormStyles()}
+      ${this.generateButtonStyles()}
+      ${this.generatePIIStyles()}
+      ${this.generateLoadingStyles()}
+      ${this.generateAccessibilityStyles()}
+      ${this.generateTabletResponsiveStyles()}
+      ${this.generateMobileResponsiveStyles()}
+    `;
+    }
+    // ============================================================================
+    // COMPONENT STYLES - OVERLAY & MODAL
+    // ============================================================================
+    generateOverlayStyles() {
+        return `
       .overlay {
         position: fixed;
         top: 0;
@@ -35,20 +92,35 @@ class StyleManager {
         z-index: ${this.config.zIndex};
         font-family: ${this.config.fontFamily};
       }
-      
+    `;
+    }
+    generateModalStyles() {
+        return `
       .modal {
         background: white;
         border-radius: 8px;
         width: 90%;
-        max-width: 600px;
+        max-width: ${this.MODAL_SIZES.desktop};
         max-height: 90vh;
         overflow-y: auto;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        box-shadow: ${this.SHADOW_STYLES.modal};
+        scrollbar-width: none;
+        -ms-overflow-style: none;
       }
       
+      .modal::-webkit-scrollbar {
+        display: none;
+      }
+    `;
+    }
+    // ============================================================================
+    // COMPONENT STYLES - HEADER
+    // ============================================================================
+    generateHeaderStyles() {
+        return `
       .header {
-        padding: 20px;
-        border-bottom: 1px solid #e0e0e0;
+        padding: ${this.SPACING.lg}px;
+        border-bottom: ${this.BORDER_STYLES.primary};
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -56,7 +128,7 @@ class StyleManager {
       
       .header h2 {
         margin: 0;
-        font-size: 20px;
+        font-size: ${this.FONT_SIZES.h2};
         font-weight: 600;
       }
       
@@ -67,8 +139,8 @@ class StyleManager {
         cursor: pointer;
         color: #666;
         padding: 0;
-        width: 30px;
-        height: 30px;
+        width: ${this.MODAL_SIZES.headerHeight};
+        height: ${this.MODAL_SIZES.headerHeight};
         display: flex;
         align-items: center;
         justify-content: center;
@@ -78,29 +150,38 @@ class StyleManager {
       .close:hover {
         background: #f0f0f0;
       }
-      
+    `;
+    }
+    // ============================================================================
+    // COMPONENT STYLES - BODY & FORM
+    // ============================================================================
+    generateBodyStyles() {
+        return `
       .body {
-        padding: 20px;
+        padding: ${this.SPACING.lg}px;
       }
-      
+    `;
+    }
+    generateFormStyles() {
+        return `
       .form-group {
-        margin-bottom: 20px;
+        margin-bottom: ${this.SPACING.lg}px;
       }
       
       .label {
         display: block;
-        margin-bottom: 8px;
+        margin-bottom: ${this.SPACING.xs}px;
         font-weight: 500;
-        font-size: 14px;
+        font-size: ${this.FONT_SIZES.label};
       }
       
       .input,
       .textarea {
         width: 100%;
-        padding: 10px;
-        border: 1px solid #ddd;
+        padding: ${this.SPACING.xs}px;
+        border: ${this.BORDER_STYLES.light};
         border-radius: ${this.config.borderRadius};
-        font-size: 14px;
+        font-size: ${this.FONT_SIZES.body};
         font-family: ${this.config.fontFamily};
         box-sizing: border-box;
       }
@@ -116,40 +197,92 @@ class StyleManager {
         resize: vertical;
       }
       
-      .screenshot-container {
-        margin-top: 10px;
-        position: relative;
+      .checkbox-group {
+        display: flex;
+        align-items: center;
+        gap: ${this.SPACING.xs}px;
+        margin-top: ${this.SPACING.md}px;
       }
       
-      .screenshot {
-        max-width: 100%;
-        border: 1px solid #ddd;
-        border-radius: ${this.config.borderRadius};
+      .checkbox {
+        width: 18px;
+        height: 18px;
+        cursor: pointer;
       }
       
-      .redaction-canvas {
-        position: absolute;
-        top: 0;
-        left: 0;
-        cursor: crosshair;
-        border: 2px solid ${this.config.primaryColor};
+      .checkbox-label {
+        margin: 0;
+        font-size: ${this.FONT_SIZES.body};
+        cursor: pointer;
+        user-select: none;
+      }
+      
+      .error {
+        color: ${this.config.dangerColor};
+        font-size: ${this.FONT_SIZES.small};
+        margin-top: 4px;
+      }
+    `;
+    }
+    // ============================================================================
+    // COMPONENT STYLES - BUTTONS & CONTROLS
+    // ============================================================================
+    generateButtonStyles() {
+        return `
+      .footer {
+        padding: ${this.SPACING.lg}px;
+        border-top: ${this.BORDER_STYLES.primary};
+        display: flex;
+        justify-content: flex-end;
+        gap: ${this.SPACING.xs}px;
+      }
+      
+      .btn {
+        padding: ${this.SPACING.xs}px ${this.SPACING.md}px;
+        border: none;
         border-radius: ${this.config.borderRadius};
+        cursor: pointer;
+        font-size: ${this.FONT_SIZES.body};
+        font-weight: 500;
+      }
+      
+      .btn-primary {
+        background: ${this.config.primaryColor};
+        color: white;
+      }
+      
+      .btn-primary:hover {
+        opacity: 0.9;
+      }
+      
+      .btn-primary:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+      
+      .btn-secondary {
+        background: #6c757d;
+        color: white;
+      }
+      
+      .btn-secondary:hover {
+        opacity: 0.9;
       }
       
       .redaction-controls {
-        margin-top: 10px;
+        margin-top: ${this.SPACING.xs}px;
         display: flex;
-        gap: 10px;
+        gap: ${this.SPACING.xs}px;
       }
       
       .btn-redact,
       .btn-clear {
-        padding: 8px 16px;
-        border: 1px solid #ddd;
+        padding: ${this.SPACING.xs}px ${this.SPACING.md}px;
+        border: ${this.BORDER_STYLES.light};
         border-radius: ${this.config.borderRadius};
         background: white;
         cursor: pointer;
-        font-size: 14px;
+        font-size: ${this.FONT_SIZES.body};
       }
       
       .btn-redact:hover,
@@ -163,17 +296,43 @@ class StyleManager {
         border-color: ${this.config.primaryColor};
       }
       
+      .screenshot-container {
+        margin-top: ${this.SPACING.xs}px;
+        position: relative;
+      }
+      
+      .screenshot {
+        max-width: 100%;
+        border: ${this.BORDER_STYLES.light};
+        border-radius: ${this.config.borderRadius};
+      }
+      
+      .redaction-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        cursor: crosshair;
+        border: 2px solid ${this.config.primaryColor};
+        border-radius: ${this.config.borderRadius};
+      }
+    `;
+    }
+    // ============================================================================
+    // COMPONENT STYLES - PII DETECTION
+    // ============================================================================
+    generatePIIStyles() {
+        return `
       .pii-section {
-        margin-top: 20px;
-        padding: 15px;
+        margin-top: ${this.SPACING.lg}px;
+        padding: ${this.SPACING.md}px;
         background: #fff3cd;
         border: 1px solid #ffc107;
         border-radius: ${this.config.borderRadius};
       }
       
       .pii-title {
-        margin: 0 0 10px 0;
-        font-size: 14px;
+        margin: 0 0 ${this.SPACING.xs}px 0;
+        font-size: ${this.FONT_SIZES.body};
         font-weight: 600;
         color: #856404;
       }
@@ -181,7 +340,7 @@ class StyleManager {
       .pii-list {
         margin: 0;
         padding-left: 20px;
-        font-size: 13px;
+        font-size: ${this.FONT_SIZES.sr};
         color: #856404;
       }
       
@@ -192,61 +351,16 @@ class StyleManager {
         background: #ffc107;
         color: #856404;
         border-radius: 12px;
-        font-size: 12px;
+        font-size: ${this.FONT_SIZES.small};
         font-weight: 500;
       }
-      
-      .checkbox-group {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        margin-top: 15px;
-      }
-      
-      .checkbox {
-        width: 18px;
-        height: 18px;
-        cursor: pointer;
-      }
-      
-      .checkbox-label {
-        margin: 0;
-        font-size: 14px;
-        cursor: pointer;
-        user-select: none;
-      }
-      
-      .footer {
-        padding: 20px;
-        border-top: 1px solid #e0e0e0;
-        display: flex;
-        justify-content: flex-end;
-        gap: 10px;
-      }
-      
-      .btn {
-        padding: 10px 20px;
-        border: none;
-        border-radius: ${this.config.borderRadius};
-        cursor: pointer;
-        font-size: 14px;
-        font-weight: 500;
-      }
-      
-      .btn-primary {
-        background: ${this.config.primaryColor};
-        color: white;
-      }
-      
-      .btn-primary:hover {
-        opacity: 0.9;
-      }
-      
-      .btn-primary:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-      
+    `;
+    }
+    // ============================================================================
+    // COMPONENT STYLES - LOADING STATE
+    // ============================================================================
+    generateLoadingStyles() {
+        return `
       .btn.loading {
         position: relative;
         padding-left: 2.5rem;
@@ -269,7 +383,13 @@ class StyleManager {
       @keyframes spinner {
         to { transform: rotate(360deg); }
       }
-      
+    `;
+    }
+    // ============================================================================
+    // COMPONENT STYLES - ACCESSIBILITY
+    // ============================================================================
+    generateAccessibilityStyles() {
+        return `
       .sr-only {
         position: absolute;
         width: 1px;
@@ -281,20 +401,110 @@ class StyleManager {
         white-space: nowrap;
         border-width: 0;
       }
-      
-      .btn-secondary {
-        background: #6c757d;
-        color: white;
-      }
-      
-      .btn-secondary:hover {
-        opacity: 0.9;
+    `;
+    }
+    // ============================================================================
+    // RESPONSIVE STYLES - TABLET (≤768px)
+    // ============================================================================
+    generateTabletResponsiveStyles() {
+        return `
+      @media (max-width: ${this.BREAKPOINTS.tablet}px) {
+        .modal {
+          width: 95%;
+          max-width: ${this.MODAL_SIZES.tablet};
+        }
+        
+        .header {
+          padding: ${this.SPACING.md}px;
+        }
+        
+        .body {
+          padding: ${this.SPACING.md}px;
+        }
+        
+        .footer {
+          padding: ${this.SPACING.md}px;
+        }
+        
+        /* Prevent iOS zoom on input focus (requires 16px minimum) */
+        .input,
+        .textarea {
+          padding: ${this.SPACING.xs}px;
+          font-size: 16px;
+        }
+        
+        .textarea {
+          min-height: 80px;
+        }
       }
-      
-      .error {
-        color: ${this.config.dangerColor};
-        font-size: 12px;
-        margin-top: 4px;
+    `;
+    }
+    // ============================================================================
+    // RESPONSIVE STYLES - MOBILE (≤480px)
+    // ============================================================================
+    generateMobileResponsiveStyles() {
+        return `
+      @media (max-width: ${this.BREAKPOINTS.mobile}px) {
+        .modal {
+          width: ${this.MODAL_SIZES.mobilePercent};
+          max-width: 100%;
+          max-height: 95vh;
+        }
+        
+        .header {
+          padding: ${this.SPACING.sm}px;
+        }
+        
+        .header h2 {
+          font-size: ${this.FONT_SIZES.h2Mobile};
+        }
+        
+        .body {
+          padding: ${this.SPACING.sm}px;
+        }
+        
+        .footer {
+          padding: ${this.SPACING.sm}px;
+          flex-direction: column;
+        }
+        
+        .btn {
+          width: 100%;
+          padding: ${this.SPACING.md}px;
+        }
+        
+        .input,
+        .textarea {
+          padding: ${this.SPACING.xs}px;
+        }
+        
+        .textarea {
+          resize: none;
+        }
+        
+        .redaction-controls {
+          flex-direction: column;
+        }
+        
+        .btn-redact,
+        .btn-clear {
+          width: 100%;
+        }
+        
+        .pii-section {
+          padding: ${this.SPACING.sm}px;
+          margin-top: ${this.SPACING.md}px;
+        }
+        
+        .label {
+          font-size: ${this.FONT_SIZES.labelMobile};
+        }
+        
+        .close {
+          width: 28px;
+          height: 28px;
+          font-size: 20px;
+        }
       }
     `;
     }

package/dist/widget/components/template-manager.js

@@ -12,7 +12,8 @@ class TemplateManager {
         this.config = {
             title: config.title || 'Report a Bug',
             titlePlaceholder: config.titlePlaceholder || 'Brief description of the issue',
-            descriptionPlaceholder: config.descriptionPlaceholder || 'Detailed description of what happened...',
+            descriptionPlaceholder: config.descriptionPlaceholder ||
+                'Detailed description of what happened...',
             submitButtonText: config.submitButtonText || 'Submit Bug Report',
             cancelButtonText: config.cancelButtonText || 'Cancel',
             showScreenshot: config.showScreenshot !== false,