@bugspotter/sdk 0.1.0-alpha.1 → 0.1.0-alpha.3

package/dist/index.esm.js

@@ -1,14 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { ScreenshotCapture } from './capture/screenshot';
 import { ConsoleCapture } from './capture/console';
 import { NetworkCapture } from './capture/network';
 import { MetadataCapture } from './capture/metadata';
-import { compressData, estimateSize, getCompressionRatio } from './core/compress';
 import { FloatingButton } from './widget/button';
 import { BugReportModal } from './widget/modal';
 import { DOMCollector } from './collectors';
 import { createSanitizer } from './utils/sanitize';
 import { getLogger } from './utils/logger';
 import { submitWithAuth } from './core/transport';
+import { FileUploadHandler } from './core/file-upload-handler';
+import { DEFAULT_REPLAY_DURATION_SECONDS } from './constants';
 const logger = getLogger();
 export class BugSpotter {
     constructor(config) {
@@ -32,7 +44,7 @@ export class BugSpotter {
         // Initialize DOM collector if replay is enabled
         if (((_g = config.replay) === null || _g === void 0 ? void 0 : _g.enabled) !== false) {
             this.domCollector = new DOMCollector({
-                duration: (_j = (_h = config.replay) === null || _h === void 0 ? void 0 : _h.duration) !== null && _j !== void 0 ? _j : 15,
+                duration: (_j = (_h = config.replay) === null || _h === void 0 ? void 0 : _h.duration) !== null && _j !== void 0 ? _j : DEFAULT_REPLAY_DURATION_SECONDS,
                 sampling: (_k = config.replay) === null || _k === void 0 ? void 0 : _k.sampling,
                 sanitizer: this.sanitizer,
             });
@@ -94,57 +106,106 @@ export class BugSpotter {
         });
         modal.show(report._screenshotPreview || '');
     }
-    async submitBugReport(payload) {
+    /**
+     * Validate authentication configuration
+     * @throws Error if configuration is invalid
+     */
+    validateAuthConfig() {
         if (!this.config.endpoint) {
             throw new Error('No endpoint configured for bug report submission');
         }
-        const contentHeaders = {
-            'Content-Type': 'application/json',
-        };
-        logger.warn(`Submitting bug report to ${this.config.endpoint}`);
-        let body;
+        if (!this.config.auth) {
+            throw new Error('API key authentication is required');
+        }
+        if (this.config.auth.type !== 'api-key') {
+            throw new Error('API key authentication is required');
+        }
+        if (!this.config.auth.apiKey) {
+            throw new Error('API key is required in auth configuration');
+        }
+        if (!this.config.auth.projectId) {
+            throw new Error('Project ID is required in auth configuration');
+        }
+    }
+    /**
+     * Strip endpoint suffix from path
+     */
+    stripEndpointSuffix(path) {
+        if (path.endsWith('/bugs')) {
+            return path.slice(0, -5);
+        }
+        else if (path.includes('/api/v1/reports')) {
+            return path.substring(0, path.indexOf('/api/v1/reports'));
+        }
+        return path.replace(/\/$/, '') || '';
+    }
+    /**
+     * Get the base API URL for confirm-upload calls
+     * Extracts scheme, host, and base path from the configured endpoint
+     */
+    getApiBaseUrl() {
+        if (!this.config.endpoint) {
+            throw new Error('No endpoint configured');
+        }
         try {
-            // Try to compress the payload
-            const originalSize = estimateSize(payload);
-            const compressed = await compressData(payload);
-            const compressedSize = compressed.byteLength;
-            const ratio = getCompressionRatio(originalSize, compressedSize);
-            logger.log(`Payload compression: ${(originalSize / 1024).toFixed(1)}KB → ${(compressedSize / 1024).toFixed(1)}KB (${ratio}% reduction)`);
-            // Use compression if it actually reduces size
-            if (compressedSize < originalSize) {
-                // Create a Blob from the compressed Uint8Array for proper binary upload
-                // Use Uint8Array constructor to ensure clean ArrayBuffer (no extra padding bytes)
-                body = new Blob([new Uint8Array(compressed)], { type: 'application/gzip' });
-                contentHeaders['Content-Encoding'] = 'gzip';
-                contentHeaders['Content-Type'] = 'application/gzip';
-            }
-            else {
-                body = JSON.stringify(payload);
-            }
+            const url = new URL(this.config.endpoint);
+            const basePath = this.stripEndpointSuffix(url.pathname);
+            return url.origin + basePath;
         }
         catch (error) {
-            // Fallback to uncompressed if compression fails
-            logger.warn('Compression failed, sending uncompressed payload:', error);
-            body = JSON.stringify(payload);
-        }
-        // Determine auth configuration
-        const auth = this.config.auth;
-        // Submit with authentication, retry logic, and offline queue
-        const response = await submitWithAuth(this.config.endpoint, body, contentHeaders, {
-            auth,
+            // Fallback for invalid URLs
+            logger.warn('Failed to parse endpoint URL, using fallback', {
+                endpoint: this.config.endpoint,
+                error: error instanceof Error ? error.message : String(error),
+            });
+            return this.stripEndpointSuffix(this.config.endpoint);
+        }
+    }
+    async submitBugReport(payload) {
+        var _a;
+        this.validateAuthConfig();
+        logger.warn(`Submitting bug report to ${this.config.endpoint}`);
+        // Step 1: Create bug report and request presigned URLs
+        const { report } = payload, metadata = __rest(payload, ["report"]);
+        // Check what files we need to upload
+        const hasScreenshot = !!(report._screenshotPreview && report._screenshotPreview.startsWith('data:image/'));
+        const hasReplay = !!(report.replay && report.replay.length > 0);
+        const createPayload = Object.assign(Object.assign({}, metadata), { report: {
+                console: report.console,
+                network: report.network,
+                metadata: report.metadata,
+                // Don't send replay events or screenshot in initial request
+            }, 
+            // Tell backend we have files so it can generate presigned URLs
+            hasScreenshot,
+            hasReplay });
+        const contentHeaders = {
+            'Content-Type': 'application/json',
+        };
+        const response = await submitWithAuth(this.config.endpoint, // Validated in validateAuthConfig
+        JSON.stringify(createPayload), contentHeaders, {
+            auth: this.config.auth,
             retry: this.config.retry,
             offline: this.config.offline,
         });
         logger.warn(`${JSON.stringify(response)}`);
         if (!response.ok) {
-            const errorText = await response.text().catch(() => {
-                return 'Unknown error';
-            });
+            const errorText = await response.text().catch(() => 'Unknown error');
             throw new Error(`Failed to submit bug report: ${response.status} ${response.statusText}. ${errorText}`);
         }
-        return response.json().catch(() => {
-            return undefined;
-        });
+        const result = await response.json().catch(() => ({ success: false }));
+        if (!result.success || !((_a = result.data) === null || _a === void 0 ? void 0 : _a.id)) {
+            throw new Error('Bug report ID not returned from server');
+        }
+        const bugId = result.data.id;
+        // Step 2: Upload screenshot and replay using presigned URLs from response
+        if (!hasScreenshot && !hasReplay) {
+            return; // No files to upload, nothing more to do
+        }
+        // Use FileUploadHandler to handle all file upload operations
+        const apiEndpoint = this.getApiBaseUrl();
+        const uploadHandler = new FileUploadHandler(apiEndpoint, this.config.auth.apiKey);
+        await uploadHandler.uploadFiles(bugId, report, result.data.presignedUrls);
     }
     getConfig() {
         return Object.assign({}, this.config);
@@ -181,6 +242,8 @@ export { DEFAULT_PATTERNS, PATTERN_PRESETS, PATTERN_CATEGORIES, PatternBuilder,
 // Export widget components
 export { FloatingButton } from './widget/button';
 export { BugReportModal } from './widget/modal';
+// Export constants
+export { DEFAULT_REPLAY_DURATION_SECONDS, MAX_RECOMMENDED_REPLAY_DURATION_SECONDS, } from './constants';
 /**
  * Convenience function to sanitize text with default PII patterns
  * Useful for quick sanitization without creating a Sanitizer instance

package/dist/index.js

@@ -1,18 +1,30 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BugReportModal = exports.FloatingButton = exports.validatePattern = exports.getPatternsByCategory = exports.getPattern = exports.createPatternConfig = exports.PatternBuilder = exports.PATTERN_CATEGORIES = exports.PATTERN_PRESETS = exports.DEFAULT_PATTERNS = exports.Sanitizer = exports.createSanitizer = exports.isWithinSizeLimit = exports.estimateCompressedReplaySize = exports.canvasToBlob = exports.compressReplayEvents = exports.DirectUploader = exports.createLogger = exports.configureLogger = exports.getLogger = exports.clearOfflineQueue = exports.getAuthHeaders = exports.submitWithAuth = exports.getCompressionRatio = exports.estimateSize = exports.compressImage = exports.decompressData = exports.compressData = exports.CircularBuffer = exports.DOMCollector = exports.MetadataCapture = exports.NetworkCapture = exports.ConsoleCapture = exports.ScreenshotCapture = exports.BugSpotter = void 0;
+exports.MAX_RECOMMENDED_REPLAY_DURATION_SECONDS = exports.DEFAULT_REPLAY_DURATION_SECONDS = exports.BugReportModal = exports.FloatingButton = exports.validatePattern = exports.getPatternsByCategory = exports.getPattern = exports.createPatternConfig = exports.PatternBuilder = exports.PATTERN_CATEGORIES = exports.PATTERN_PRESETS = exports.DEFAULT_PATTERNS = exports.Sanitizer = exports.createSanitizer = exports.isWithinSizeLimit = exports.estimateCompressedReplaySize = exports.canvasToBlob = exports.compressReplayEvents = exports.DirectUploader = exports.createLogger = exports.configureLogger = exports.getLogger = exports.clearOfflineQueue = exports.getAuthHeaders = exports.submitWithAuth = exports.getCompressionRatio = exports.estimateSize = exports.compressImage = exports.decompressData = exports.compressData = exports.CircularBuffer = exports.DOMCollector = exports.MetadataCapture = exports.NetworkCapture = exports.ConsoleCapture = exports.ScreenshotCapture = exports.BugSpotter = void 0;
 exports.sanitize = sanitize;
 const screenshot_1 = require("./capture/screenshot");
 const console_1 = require("./capture/console");
 const network_1 = require("./capture/network");
 const metadata_1 = require("./capture/metadata");
-const compress_1 = require("./core/compress");
 const button_1 = require("./widget/button");
 const modal_1 = require("./widget/modal");
 const collectors_1 = require("./collectors");
 const sanitize_1 = require("./utils/sanitize");
 const logger_1 = require("./utils/logger");
 const transport_1 = require("./core/transport");
+const file_upload_handler_1 = require("./core/file-upload-handler");
+const constants_1 = require("./constants");
 const logger = (0, logger_1.getLogger)();
 class BugSpotter {
     constructor(config) {
@@ -36,7 +48,7 @@ class BugSpotter {
         // Initialize DOM collector if replay is enabled
         if (((_g = config.replay) === null || _g === void 0 ? void 0 : _g.enabled) !== false) {
             this.domCollector = new collectors_1.DOMCollector({
-                duration: (_j = (_h = config.replay) === null || _h === void 0 ? void 0 : _h.duration) !== null && _j !== void 0 ? _j : 15,
+                duration: (_j = (_h = config.replay) === null || _h === void 0 ? void 0 : _h.duration) !== null && _j !== void 0 ? _j : constants_1.DEFAULT_REPLAY_DURATION_SECONDS,
                 sampling: (_k = config.replay) === null || _k === void 0 ? void 0 : _k.sampling,
                 sanitizer: this.sanitizer,
             });
@@ -98,57 +110,106 @@ class BugSpotter {
         });
         modal.show(report._screenshotPreview || '');
     }
-    async submitBugReport(payload) {
+    /**
+     * Validate authentication configuration
+     * @throws Error if configuration is invalid
+     */
+    validateAuthConfig() {
         if (!this.config.endpoint) {
             throw new Error('No endpoint configured for bug report submission');
         }
-        const contentHeaders = {
-            'Content-Type': 'application/json',
-        };
-        logger.warn(`Submitting bug report to ${this.config.endpoint}`);
-        let body;
+        if (!this.config.auth) {
+            throw new Error('API key authentication is required');
+        }
+        if (this.config.auth.type !== 'api-key') {
+            throw new Error('API key authentication is required');
+        }
+        if (!this.config.auth.apiKey) {
+            throw new Error('API key is required in auth configuration');
+        }
+        if (!this.config.auth.projectId) {
+            throw new Error('Project ID is required in auth configuration');
+        }
+    }
+    /**
+     * Strip endpoint suffix from path
+     */
+    stripEndpointSuffix(path) {
+        if (path.endsWith('/bugs')) {
+            return path.slice(0, -5);
+        }
+        else if (path.includes('/api/v1/reports')) {
+            return path.substring(0, path.indexOf('/api/v1/reports'));
+        }
+        return path.replace(/\/$/, '') || '';
+    }
+    /**
+     * Get the base API URL for confirm-upload calls
+     * Extracts scheme, host, and base path from the configured endpoint
+     */
+    getApiBaseUrl() {
+        if (!this.config.endpoint) {
+            throw new Error('No endpoint configured');
+        }
         try {
-            // Try to compress the payload
-            const originalSize = (0, compress_1.estimateSize)(payload);
-            const compressed = await (0, compress_1.compressData)(payload);
-            const compressedSize = compressed.byteLength;
-            const ratio = (0, compress_1.getCompressionRatio)(originalSize, compressedSize);
-            logger.log(`Payload compression: ${(originalSize / 1024).toFixed(1)}KB → ${(compressedSize / 1024).toFixed(1)}KB (${ratio}% reduction)`);
-            // Use compression if it actually reduces size
-            if (compressedSize < originalSize) {
-                // Create a Blob from the compressed Uint8Array for proper binary upload
-                // Use Uint8Array constructor to ensure clean ArrayBuffer (no extra padding bytes)
-                body = new Blob([new Uint8Array(compressed)], { type: 'application/gzip' });
-                contentHeaders['Content-Encoding'] = 'gzip';
-                contentHeaders['Content-Type'] = 'application/gzip';
-            }
-            else {
-                body = JSON.stringify(payload);
-            }
+            const url = new URL(this.config.endpoint);
+            const basePath = this.stripEndpointSuffix(url.pathname);
+            return url.origin + basePath;
         }
         catch (error) {
-            // Fallback to uncompressed if compression fails
-            logger.warn('Compression failed, sending uncompressed payload:', error);
-            body = JSON.stringify(payload);
-        }
-        // Determine auth configuration
-        const auth = this.config.auth;
-        // Submit with authentication, retry logic, and offline queue
-        const response = await (0, transport_1.submitWithAuth)(this.config.endpoint, body, contentHeaders, {
-            auth,
+            // Fallback for invalid URLs
+            logger.warn('Failed to parse endpoint URL, using fallback', {
+                endpoint: this.config.endpoint,
+                error: error instanceof Error ? error.message : String(error),
+            });
+            return this.stripEndpointSuffix(this.config.endpoint);
+        }
+    }
+    async submitBugReport(payload) {
+        var _a;
+        this.validateAuthConfig();
+        logger.warn(`Submitting bug report to ${this.config.endpoint}`);
+        // Step 1: Create bug report and request presigned URLs
+        const { report } = payload, metadata = __rest(payload, ["report"]);
+        // Check what files we need to upload
+        const hasScreenshot = !!(report._screenshotPreview && report._screenshotPreview.startsWith('data:image/'));
+        const hasReplay = !!(report.replay && report.replay.length > 0);
+        const createPayload = Object.assign(Object.assign({}, metadata), { report: {
+                console: report.console,
+                network: report.network,
+                metadata: report.metadata,
+                // Don't send replay events or screenshot in initial request
+            }, 
+            // Tell backend we have files so it can generate presigned URLs
+            hasScreenshot,
+            hasReplay });
+        const contentHeaders = {
+            'Content-Type': 'application/json',
+        };
+        const response = await (0, transport_1.submitWithAuth)(this.config.endpoint, // Validated in validateAuthConfig
+        JSON.stringify(createPayload), contentHeaders, {
+            auth: this.config.auth,
             retry: this.config.retry,
             offline: this.config.offline,
         });
         logger.warn(`${JSON.stringify(response)}`);
         if (!response.ok) {
-            const errorText = await response.text().catch(() => {
-                return 'Unknown error';
-            });
+            const errorText = await response.text().catch(() => 'Unknown error');
             throw new Error(`Failed to submit bug report: ${response.status} ${response.statusText}. ${errorText}`);
         }
-        return response.json().catch(() => {
-            return undefined;
-        });
+        const result = await response.json().catch(() => ({ success: false }));
+        if (!result.success || !((_a = result.data) === null || _a === void 0 ? void 0 : _a.id)) {
+            throw new Error('Bug report ID not returned from server');
+        }
+        const bugId = result.data.id;
+        // Step 2: Upload screenshot and replay using presigned URLs from response
+        if (!hasScreenshot && !hasReplay) {
+            return; // No files to upload, nothing more to do
+        }
+        // Use FileUploadHandler to handle all file upload operations
+        const apiEndpoint = this.getApiBaseUrl();
+        const uploadHandler = new file_upload_handler_1.FileUploadHandler(apiEndpoint, this.config.auth.apiKey);
+        await uploadHandler.uploadFiles(bugId, report, result.data.presignedUrls);
     }
     getConfig() {
         return Object.assign({}, this.config);
@@ -178,12 +239,12 @@ Object.defineProperty(exports, "DOMCollector", { enumerable: true, get: function
 var buffer_1 = require("./core/buffer");
 Object.defineProperty(exports, "CircularBuffer", { enumerable: true, get: function () { return buffer_1.CircularBuffer; } });
 // Export compression utilities
-var compress_2 = require("./core/compress");
-Object.defineProperty(exports, "compressData", { enumerable: true, get: function () { return compress_2.compressData; } });
-Object.defineProperty(exports, "decompressData", { enumerable: true, get: function () { return compress_2.decompressData; } });
-Object.defineProperty(exports, "compressImage", { enumerable: true, get: function () { return compress_2.compressImage; } });
-Object.defineProperty(exports, "estimateSize", { enumerable: true, get: function () { return compress_2.estimateSize; } });
-Object.defineProperty(exports, "getCompressionRatio", { enumerable: true, get: function () { return compress_2.getCompressionRatio; } });
+var compress_1 = require("./core/compress");
+Object.defineProperty(exports, "compressData", { enumerable: true, get: function () { return compress_1.compressData; } });
+Object.defineProperty(exports, "decompressData", { enumerable: true, get: function () { return compress_1.decompressData; } });
+Object.defineProperty(exports, "compressImage", { enumerable: true, get: function () { return compress_1.compressImage; } });
+Object.defineProperty(exports, "estimateSize", { enumerable: true, get: function () { return compress_1.estimateSize; } });
+Object.defineProperty(exports, "getCompressionRatio", { enumerable: true, get: function () { return compress_1.getCompressionRatio; } });
 // Export transport and authentication
 var transport_2 = require("./core/transport");
 Object.defineProperty(exports, "submitWithAuth", { enumerable: true, get: function () { return transport_2.submitWithAuth; } });
@@ -220,6 +281,10 @@ var button_2 = require("./widget/button");
 Object.defineProperty(exports, "FloatingButton", { enumerable: true, get: function () { return button_2.FloatingButton; } });
 var modal_2 = require("./widget/modal");
 Object.defineProperty(exports, "BugReportModal", { enumerable: true, get: function () { return modal_2.BugReportModal; } });
+// Export constants
+var constants_2 = require("./constants");
+Object.defineProperty(exports, "DEFAULT_REPLAY_DURATION_SECONDS", { enumerable: true, get: function () { return constants_2.DEFAULT_REPLAY_DURATION_SECONDS; } });
+Object.defineProperty(exports, "MAX_RECOMMENDED_REPLAY_DURATION_SECONDS", { enumerable: true, get: function () { return constants_2.MAX_RECOMMENDED_REPLAY_DURATION_SECONDS; } });
 /**
  * Convenience function to sanitize text with default PII patterns
  * Useful for quick sanitization without creating a Sanitizer instance

package/dist/widget/button.d.ts

@@ -1,7 +1,10 @@
 type ButtonPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 export interface FloatingButtonOptions {
     position?: ButtonPosition;
+    /** Icon to display - can be text/emoji or 'svg' for default bug icon */
     icon?: string;
+    /** Custom SVG icon (overrides icon if provided) */
+    customSvg?: string;
     backgroundColor?: string;
     size?: number;
     offset?: {
@@ -9,6 +12,8 @@ export interface FloatingButtonOptions {
         y: number;
     };
     zIndex?: number;
+    /** Custom tooltip text */
+    tooltip?: string;
 }
 export declare class FloatingButton {
     private button;

package/dist/widget/button.js

@@ -1,13 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FloatingButton = void 0;
+// Professional bug report icon SVG
+const DEFAULT_SVG_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+<path d="M8 2v4"/>
+<path d="M16 2v4"/>
+<path d="M12 12v5"/>
+<circle cx="12" cy="10" r="4"/>
+<path d="M9 16c-1.5 1-3 2-3 4h12c0-2-1.5-3-3-4"/>
+<path d="M3 8h4"/>
+<path d="M17 8h4"/>
+<path d="M5 12h2"/>
+<path d="M17 12h2"/>
+<path d="M6 16h2"/>
+<path d="M16 16h2"/>
+</svg>`;
 const DEFAULT_BUTTON_OPTIONS = {
     position: 'bottom-right',
-    icon: '🐛',
-    backgroundColor: '#ef4444',
-    size: 60,
+    icon: 'svg', // Use SVG icon by default
+    customSvg: undefined,
+    backgroundColor: '#2563eb', // Professional blue color
+    size: 56,
     offset: { x: 20, y: 20 },
     zIndex: 999999,
+    tooltip: 'Report an Issue',
 };
 const BUTTON_STYLES = {
     transition: 'transform 0.2s ease, box-shadow 0.2s ease',
@@ -23,7 +39,7 @@ const BUTTON_STYLES = {
 };
 class FloatingButton {
     constructor(options = {}) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         this.eventHandlers = new Map();
         this.handleMouseEnter = () => {
             this.button.style.transform = BUTTON_STYLES.transform.hover;
@@ -42,10 +58,12 @@ class FloatingButton {
         this.options = {
             position: (_a = options.position) !== null && _a !== void 0 ? _a : DEFAULT_BUTTON_OPTIONS.position,
             icon: (_b = options.icon) !== null && _b !== void 0 ? _b : DEFAULT_BUTTON_OPTIONS.icon,
-            backgroundColor: (_c = options.backgroundColor) !== null && _c !== void 0 ? _c : DEFAULT_BUTTON_OPTIONS.backgroundColor,
-            size: (_d = options.size) !== null && _d !== void 0 ? _d : DEFAULT_BUTTON_OPTIONS.size,
-            offset: (_e = options.offset) !== null && _e !== void 0 ? _e : DEFAULT_BUTTON_OPTIONS.offset,
-            zIndex: (_f = options.zIndex) !== null && _f !== void 0 ? _f : DEFAULT_BUTTON_OPTIONS.zIndex,
+            customSvg: (_c = options.customSvg) !== null && _c !== void 0 ? _c : DEFAULT_BUTTON_OPTIONS.customSvg,
+            backgroundColor: (_d = options.backgroundColor) !== null && _d !== void 0 ? _d : DEFAULT_BUTTON_OPTIONS.backgroundColor,
+            size: (_e = options.size) !== null && _e !== void 0 ? _e : DEFAULT_BUTTON_OPTIONS.size,
+            offset: (_f = options.offset) !== null && _f !== void 0 ? _f : DEFAULT_BUTTON_OPTIONS.offset,
+            zIndex: (_g = options.zIndex) !== null && _g !== void 0 ? _g : DEFAULT_BUTTON_OPTIONS.zIndex,
+            tooltip: (_h = options.tooltip) !== null && _h !== void 0 ? _h : DEFAULT_BUTTON_OPTIONS.tooltip,
         };
         this.button = this.createButton();
         // Ensure DOM is ready before appending
@@ -60,8 +78,18 @@ class FloatingButton {
     }
     createButton() {
         const btn = document.createElement('button');
-        btn.textContent = this.options.icon;
-        btn.setAttribute('aria-label', 'Report Bug');
+        // Set button content (SVG or text)
+        if (this.options.customSvg) {
+            btn.innerHTML = this.options.customSvg;
+        }
+        else if (this.options.icon === 'svg') {
+            btn.innerHTML = DEFAULT_SVG_ICON;
+        }
+        else {
+            btn.textContent = this.options.icon;
+        }
+        btn.setAttribute('aria-label', this.options.tooltip);
+        btn.setAttribute('title', this.options.tooltip);
         btn.setAttribute('data-bugspotter-exclude', 'true');
         btn.style.cssText = this.getButtonStyles();
         this.addHoverEffects(btn);
@@ -70,6 +98,9 @@ class FloatingButton {
     getButtonStyles() {
         const { position, size, offset, backgroundColor, zIndex } = this.options;
         const positionStyles = this.getPositionStyles(position, offset);
+        // SVG icons need slightly different sizing
+        const isSvgIcon = this.options.customSvg || this.options.icon === 'svg';
+        const iconSize = size * 0.5;
         return `
       position: fixed;
       ${positionStyles}
@@ -80,10 +111,11 @@ class FloatingButton {
       color: white;
       border: none;
       cursor: pointer;
-      font-size: ${size * 0.5}px;
+      font-size: ${iconSize}px;
       display: flex;
       align-items: center;
       justify-content: center;
+      padding: ${isSvgIcon ? size * 0.25 : 0}px;
       box-shadow: ${BUTTON_STYLES.boxShadow.default};
       transition: ${BUTTON_STYLES.transition};
       z-index: ${zIndex};
@@ -125,7 +157,13 @@ class FloatingButton {
         this.button.style.display = 'none';
     }
     setIcon(icon) {
-        this.button.textContent = icon;
+        this.options.icon = icon;
+        if (icon === 'svg') {
+            this.button.innerHTML = DEFAULT_SVG_ICON;
+        }
+        else {
+            this.button.textContent = icon;
+        }
     }
     setBackgroundColor(color) {
         this.button.style.backgroundColor = color;

package/docs/SESSION_REPLAY.md

@@ -85,22 +85,84 @@ console.log(report.replay); // Array of rrweb events
 
 ### 4. Event Transmission
 
-The replay events are included in the bug report payload:
+The replay events are compressed and uploaded via presigned URLs using an optimized 3-request flow:
+
+**Step 1: Create Bug Report with Presigned URLs**
 
 ```typescript
+// Initial bug report with flags indicating which files will be uploaded
+POST /api/v1/reports
 {
   title: "Bug title",
   description: "Bug description",
   report: {
-    screenshot: "...",
     console: [...],
     network: [...],
-    metadata: {...},
-    replay: [...] // rrweb events
+    metadata: {...}
+  },
+  hasScreenshot: true,  // SDK sets this if screenshot was captured
+  hasReplay: true       // SDK sets this if replay events were recorded
+}
+
+// Response includes bug report ID AND presigned URLs
+{
+  "success": true,
+  "data": {
+    "id": "bug-uuid-here",
+    "title": "Bug title",
+    "presignedUrls": {
+      "screenshot": {
+        "uploadUrl": "https://s3.amazonaws.com/...",
+        "storageKey": "screenshots/project/bug/screenshot.png"
+      },
+      "replay": {
+        "uploadUrl": "https://s3.amazonaws.com/...",
+        "storageKey": "replays/project/bug/replay.gz"
+      }
+    }
   }
 }
 ```
 
+**Step 2: Upload Files Directly to S3**
+
+```typescript
+// Upload screenshot to presigned URL (parallel with replay)
+PUT https://s3.amazonaws.com/presigned-screenshot-url
+Content-Type: image/png
+<binary screenshot data>
+
+// Upload compressed replay to presigned URL (parallel with screenshot)
+PUT https://s3.amazonaws.com/presigned-replay-url
+Content-Type: application/gzip
+<compressed replay events>
+```
+
+**Step 3: Confirm Uploads**
+
+```typescript
+// Confirm screenshot upload
+POST /api/v1/reports/{bugId}/confirm-upload
+{
+  "fileType": "screenshot"
+}
+
+// Confirm replay upload
+POST /api/v1/reports/{bugId}/confirm-upload
+{
+  "fileType": "replay"
+}
+```
+
+**Optimized Flow Benefits:**
+
+- **40% fewer HTTP requests** - 3 requests vs 5 in old flow
+- **Reduces server load** - Files go directly to storage (S3)
+- **Improves performance** - No API server bottleneck for large files
+- **Better scalability** - Storage handles the bandwidth
+- **Parallel uploads** - Screenshot and replay upload concurrently
+- **Automatic compression** - Replay events are gzipped before upload
+
 ## Event Types
 
 The DOM collector captures the following event types:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bugspotter/sdk",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.3",
   "description": "Professional bug reporting SDK with screenshots, session replay, and automatic error capture for web applications",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -19,7 +19,7 @@
     "build": "npm run build:webpack && npm run build:esm && npm run build:cjs",
     "build:webpack": "webpack --mode production",
     "build:esm": "tsc --project tsconfig.build.json --module ES2020 --outDir dist/esm && shx mv dist/esm/index.js dist/index.esm.js && shx rm -rf dist/esm",
-    "build:cjs": "tsc --project tsconfig.build.json --module CommonJS --outDir dist",
+    "build:cjs": "tsc --project tsconfig.cjs.json",
     "prepublishOnly": "npm run build && npm test",
     "lint": "eslint \"src/**/*.{ts,js}\"",
     "lint:fix": "eslint \"src/**/*.{ts,js}\" --fix",
@@ -65,7 +65,6 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@bugspotter/types": "workspace:*",
     "@rrweb/types": "2.0.0-alpha.18",
     "html-to-image": "^1.11.13",
     "pako": "^2.1.0",