@bugspotter/sdk 0.1.0-alpha.1

package/dist/widget/components/redaction-canvas.d.ts

@@ -0,0 +1,95 @@
+/**
+ * RedactionCanvas
+ *
+ * Responsibility: Handle canvas drawing and redaction rectangle management
+ * Follows SRP: Only handles canvas-based redaction interactions
+ */
+export interface RedactionRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface RedactionCanvasConfig {
+    redactionColor?: string;
+    cursorStyle?: string;
+}
+export declare class RedactionCanvas {
+    private canvas;
+    private ctx;
+    private isDrawing;
+    private isRedactionMode;
+    private startX;
+    private startY;
+    private redactionRects;
+    private config;
+    private handleMouseDown;
+    private handleMouseMove;
+    private handleMouseUp;
+    constructor(canvas: HTMLCanvasElement, config?: RedactionCanvasConfig);
+    /**
+     * Initialize canvas with image dimensions
+     */
+    initializeCanvas(img: HTMLImageElement): void;
+    /**
+     * Enable redaction mode
+     */
+    enableRedactionMode(): void;
+    /**
+     * Disable redaction mode
+     */
+    disableRedactionMode(): void;
+    /**
+     * Toggle redaction mode
+     */
+    toggleRedactionMode(): boolean;
+    /**
+     * Clear all redaction rectangles
+     */
+    clearRedactions(): void;
+    /**
+     * Get all redaction rectangles
+     */
+    getRedactions(): ReadonlyArray<RedactionRect>;
+    /**
+     * Set redaction rectangles (useful for restoring state)
+     */
+    setRedactions(rects: RedactionRect[]): void;
+    /**
+     * Check if currently in redaction mode
+     */
+    isActive(): boolean;
+    /**
+     * Get the canvas element
+     */
+    getCanvas(): HTMLCanvasElement;
+    /**
+     * Get canvas as data URL
+     */
+    toDataURL(type?: string, quality?: number): string;
+    /**
+     * Hide the canvas
+     */
+    hide(): void;
+    /**
+     * Show the canvas
+     */
+    show(): void;
+    /**
+     * Destroy and cleanup
+     */
+    destroy(): void;
+    private onMouseDown;
+    private onMouseMove;
+    private onMouseUp;
+    private redraw;
+    private drawRect;
+    /**
+     * Update configuration
+     */
+    updateConfig(config: Partial<RedactionCanvasConfig>): void;
+    /**
+     * Get current configuration
+     */
+    getConfig(): Required<RedactionCanvasConfig>;
+}

package/dist/widget/components/redaction-canvas.js

@@ -0,0 +1,230 @@
+"use strict";
+/**
+ * RedactionCanvas
+ *
+ * Responsibility: Handle canvas drawing and redaction rectangle management
+ * Follows SRP: Only handles canvas-based redaction interactions
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RedactionCanvas = void 0;
+class RedactionCanvas {
+    constructor(canvas, config = {}) {
+        this.isDrawing = false;
+        this.isRedactionMode = false;
+        this.startX = 0;
+        this.startY = 0;
+        this.redactionRects = [];
+        this.canvas = canvas;
+        const context = canvas.getContext('2d');
+        if (!context) {
+            throw new Error('Failed to get 2D context from canvas');
+        }
+        this.ctx = context;
+        this.config = {
+            redactionColor: config.redactionColor || '#000000',
+            cursorStyle: config.cursorStyle || 'crosshair',
+        };
+        // Bind event handlers
+        this.handleMouseDown = this.onMouseDown.bind(this);
+        this.handleMouseMove = this.onMouseMove.bind(this);
+        this.handleMouseUp = this.onMouseUp.bind(this);
+    }
+    /**
+     * Initialize canvas with image dimensions
+     */
+    initializeCanvas(img) {
+        // Wait for image to load to get accurate dimensions
+        const initDimensions = () => {
+            // Get the actual rendered dimensions of the image
+            const rect = img.getBoundingClientRect();
+            const displayWidth = rect.width || img.width;
+            const displayHeight = rect.height || img.height;
+            // Set canvas internal dimensions to match natural image size for high resolution
+            this.canvas.width = img.naturalWidth || img.width;
+            this.canvas.height = img.naturalHeight || img.height;
+            // Set canvas display size to match the rendered image size
+            this.canvas.style.width = `${displayWidth}px`;
+            this.canvas.style.height = `${displayHeight}px`;
+        };
+        if (img.complete && img.naturalWidth > 0) {
+            initDimensions();
+        }
+        else {
+            img.addEventListener('load', initDimensions, { once: true });
+        }
+    }
+    /**
+     * Enable redaction mode
+     */
+    enableRedactionMode() {
+        if (this.isRedactionMode) {
+            return;
+        }
+        this.isRedactionMode = true;
+        this.canvas.style.display = 'block';
+        this.canvas.style.cursor = this.config.cursorStyle;
+        // Attach event listeners
+        this.canvas.addEventListener('mousedown', this.handleMouseDown);
+        this.canvas.addEventListener('mousemove', this.handleMouseMove);
+        this.canvas.addEventListener('mouseup', this.handleMouseUp);
+        this.redraw();
+    }
+    /**
+     * Disable redaction mode
+     */
+    disableRedactionMode() {
+        if (!this.isRedactionMode) {
+            return;
+        }
+        this.isRedactionMode = false;
+        this.isDrawing = false;
+        // Remove event listeners
+        this.canvas.removeEventListener('mousedown', this.handleMouseDown);
+        this.canvas.removeEventListener('mousemove', this.handleMouseMove);
+        this.canvas.removeEventListener('mouseup', this.handleMouseUp);
+        this.canvas.style.cursor = 'default';
+    }
+    /**
+     * Toggle redaction mode
+     */
+    toggleRedactionMode() {
+        if (this.isRedactionMode) {
+            this.disableRedactionMode();
+        }
+        else {
+            this.enableRedactionMode();
+        }
+        return this.isRedactionMode;
+    }
+    /**
+     * Clear all redaction rectangles
+     */
+    clearRedactions() {
+        this.redactionRects = [];
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+    /**
+     * Get all redaction rectangles
+     */
+    getRedactions() {
+        return [...this.redactionRects];
+    }
+    /**
+     * Set redaction rectangles (useful for restoring state)
+     */
+    setRedactions(rects) {
+        this.redactionRects = [...rects];
+        this.redraw();
+    }
+    /**
+     * Check if currently in redaction mode
+     */
+    isActive() {
+        return this.isRedactionMode;
+    }
+    /**
+     * Get the canvas element
+     */
+    getCanvas() {
+        return this.canvas;
+    }
+    /**
+     * Get canvas as data URL
+     */
+    toDataURL(type = 'image/png', quality) {
+        return this.canvas.toDataURL(type, quality);
+    }
+    /**
+     * Hide the canvas
+     */
+    hide() {
+        this.canvas.style.display = 'none';
+    }
+    /**
+     * Show the canvas
+     */
+    show() {
+        this.canvas.style.display = 'block';
+    }
+    /**
+     * Destroy and cleanup
+     */
+    destroy() {
+        this.disableRedactionMode();
+        this.clearRedactions();
+    }
+    // Private event handlers
+    onMouseDown(e) {
+        if (!this.isRedactionMode) {
+            return;
+        }
+        const rect = this.canvas.getBoundingClientRect();
+        const scaleX = this.canvas.width / rect.width;
+        const scaleY = this.canvas.height / rect.height;
+        this.startX = (e.clientX - rect.left) * scaleX;
+        this.startY = (e.clientY - rect.top) * scaleY;
+        this.isDrawing = true;
+    }
+    onMouseMove(e) {
+        if (!this.isDrawing || !this.isRedactionMode) {
+            return;
+        }
+        const rect = this.canvas.getBoundingClientRect();
+        const scaleX = this.canvas.width / rect.width;
+        const scaleY = this.canvas.height / rect.height;
+        const currentX = (e.clientX - rect.left) * scaleX;
+        const currentY = (e.clientY - rect.top) * scaleY;
+        this.redraw();
+        this.drawRect(this.startX, this.startY, currentX - this.startX, currentY - this.startY);
+    }
+    onMouseUp(e) {
+        if (!this.isDrawing || !this.isRedactionMode) {
+            return;
+        }
+        const rect = this.canvas.getBoundingClientRect();
+        const scaleX = this.canvas.width / rect.width;
+        const scaleY = this.canvas.height / rect.height;
+        const endX = (e.clientX - rect.left) * scaleX;
+        const endY = (e.clientY - rect.top) * scaleY;
+        const width = endX - this.startX;
+        const height = endY - this.startY;
+        // Only add rectangle if it has meaningful size
+        if (Math.abs(width) > 5 && Math.abs(height) > 5) {
+            this.redactionRects.push({
+                x: this.startX,
+                y: this.startY,
+                width,
+                height,
+            });
+        }
+        this.isDrawing = false;
+        this.redraw();
+    }
+    // Private drawing methods
+    redraw() {
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        for (const rect of this.redactionRects) {
+            this.drawRect(rect.x, rect.y, rect.width, rect.height);
+        }
+    }
+    drawRect(x, y, width, height) {
+        this.ctx.fillStyle = this.config.redactionColor;
+        this.ctx.fillRect(x, y, width, height);
+    }
+    /**
+     * Update configuration
+     */
+    updateConfig(config) {
+        this.config = Object.assign(Object.assign({}, this.config), config);
+        if (this.isRedactionMode) {
+            this.canvas.style.cursor = this.config.cursorStyle;
+        }
+    }
+    /**
+     * Get current configuration
+     */
+    getConfig() {
+        return Object.assign({}, this.config);
+    }
+}
+exports.RedactionCanvas = RedactionCanvas;

package/dist/widget/components/screenshot-processor.d.ts

@@ -0,0 +1,44 @@
+/**
+ * ScreenshotProcessor
+ *
+ * Responsibility: Handle screenshot image processing and manipulation
+ * Follows SRP: Only handles image-related operations
+ */
+import type { RedactionRect } from './redaction-canvas';
+export declare class ScreenshotProcessor {
+    /**
+     * Merge redaction canvas with original screenshot
+     */
+    mergeRedactions(originalDataUrl: string, redactionCanvas: HTMLCanvasElement): Promise<string>;
+    /**
+     * Apply redaction rectangles directly to an image data URL
+     */
+    applyRedactions(imageDataUrl: string, redactions: RedactionRect[], redactionColor?: string): Promise<string>;
+    /**
+     * Resize an image to maximum dimensions while maintaining aspect ratio
+     */
+    resize(imageDataUrl: string, maxWidth: number, maxHeight: number): Promise<string>;
+    /**
+     * Convert image to different format
+     */
+    convert(imageDataUrl: string, format: 'image/png' | 'image/jpeg' | 'image/webp', quality?: number): Promise<string>;
+    /**
+     * Get image dimensions from data URL
+     */
+    getDimensions(imageDataUrl: string): Promise<{
+        width: number;
+        height: number;
+    }>;
+    /**
+     * Validate if a string is a valid data URL
+     */
+    isValidDataURL(dataUrl: string): boolean;
+    /**
+     * Get file size estimate from data URL (in bytes)
+     */
+    getEstimatedSize(dataUrl: string): number;
+    /**
+     * Get format from data URL
+     */
+    getFormat(dataUrl: string): string | null;
+}

package/dist/widget/components/screenshot-processor.js

@@ -0,0 +1,191 @@
+"use strict";
+/**
+ * ScreenshotProcessor
+ *
+ * Responsibility: Handle screenshot image processing and manipulation
+ * Follows SRP: Only handles image-related operations
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScreenshotProcessor = void 0;
+class ScreenshotProcessor {
+    /**
+     * Merge redaction canvas with original screenshot
+     */
+    async mergeRedactions(originalDataUrl, redactionCanvas) {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => {
+                try {
+                    const mergedCanvas = document.createElement('canvas');
+                    mergedCanvas.width = img.naturalWidth || img.width;
+                    mergedCanvas.height = img.naturalHeight || img.height;
+                    const ctx = mergedCanvas.getContext('2d');
+                    if (!ctx) {
+                        reject(new Error('Failed to get canvas context'));
+                        return;
+                    }
+                    // Draw original image
+                    ctx.drawImage(img, 0, 0);
+                    // Draw redaction canvas on top
+                    ctx.drawImage(redactionCanvas, 0, 0);
+                    resolve(mergedCanvas.toDataURL());
+                }
+                catch (error) {
+                    reject(error);
+                }
+            };
+            img.onerror = () => {
+                reject(new Error('Failed to load screenshot image'));
+            };
+            img.src = originalDataUrl;
+        });
+    }
+    /**
+     * Apply redaction rectangles directly to an image data URL
+     */
+    async applyRedactions(imageDataUrl, redactions, redactionColor = '#000000') {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => {
+                try {
+                    const canvas = document.createElement('canvas');
+                    canvas.width = img.naturalWidth || img.width;
+                    canvas.height = img.naturalHeight || img.height;
+                    const ctx = canvas.getContext('2d');
+                    if (!ctx) {
+                        reject(new Error('Failed to get canvas context'));
+                        return;
+                    }
+                    // Draw original image
+                    ctx.drawImage(img, 0, 0);
+                    // Apply redactions
+                    ctx.fillStyle = redactionColor;
+                    for (const rect of redactions) {
+                        ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+                    }
+                    resolve(canvas.toDataURL());
+                }
+                catch (error) {
+                    reject(error);
+                }
+            };
+            img.onerror = () => {
+                reject(new Error('Failed to load image'));
+            };
+            img.src = imageDataUrl;
+        });
+    }
+    /**
+     * Resize an image to maximum dimensions while maintaining aspect ratio
+     */
+    async resize(imageDataUrl, maxWidth, maxHeight) {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => {
+                try {
+                    let width = img.naturalWidth || img.width;
+                    let height = img.naturalHeight || img.height;
+                    // Calculate new dimensions maintaining aspect ratio
+                    if (width > maxWidth || height > maxHeight) {
+                        const aspectRatio = width / height;
+                        if (width > height) {
+                            width = maxWidth;
+                            height = width / aspectRatio;
+                        }
+                        else {
+                            height = maxHeight;
+                            width = height * aspectRatio;
+                        }
+                    }
+                    const canvas = document.createElement('canvas');
+                    canvas.width = width;
+                    canvas.height = height;
+                    const ctx = canvas.getContext('2d');
+                    if (!ctx) {
+                        reject(new Error('Failed to get canvas context'));
+                        return;
+                    }
+                    ctx.drawImage(img, 0, 0, width, height);
+                    resolve(canvas.toDataURL());
+                }
+                catch (error) {
+                    reject(error);
+                }
+            };
+            img.onerror = () => {
+                reject(new Error('Failed to load image'));
+            };
+            img.src = imageDataUrl;
+        });
+    }
+    /**
+     * Convert image to different format
+     */
+    async convert(imageDataUrl, format, quality = 0.92) {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => {
+                try {
+                    const canvas = document.createElement('canvas');
+                    canvas.width = img.naturalWidth || img.width;
+                    canvas.height = img.naturalHeight || img.height;
+                    const ctx = canvas.getContext('2d');
+                    if (!ctx) {
+                        reject(new Error('Failed to get canvas context'));
+                        return;
+                    }
+                    ctx.drawImage(img, 0, 0);
+                    resolve(canvas.toDataURL(format, quality));
+                }
+                catch (error) {
+                    reject(error);
+                }
+            };
+            img.onerror = () => {
+                reject(new Error('Failed to load image'));
+            };
+            img.src = imageDataUrl;
+        });
+    }
+    /**
+     * Get image dimensions from data URL
+     */
+    async getDimensions(imageDataUrl) {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => {
+                resolve({
+                    width: img.naturalWidth || img.width,
+                    height: img.naturalHeight || img.height,
+                });
+            };
+            img.onerror = () => {
+                reject(new Error('Failed to load image'));
+            };
+            img.src = imageDataUrl;
+        });
+    }
+    /**
+     * Validate if a string is a valid data URL
+     */
+    isValidDataURL(dataUrl) {
+        return /^data:image\/(png|jpeg|jpg|webp|gif);base64,/.test(dataUrl);
+    }
+    /**
+     * Get file size estimate from data URL (in bytes)
+     */
+    getEstimatedSize(dataUrl) {
+        // Base64 encoding increases size by ~33%
+        // Remove the data URL prefix to get just the base64 data
+        const base64Data = dataUrl.split(',')[1] || '';
+        return Math.ceil((base64Data.length * 3) / 4);
+    }
+    /**
+     * Get format from data URL
+     */
+    getFormat(dataUrl) {
+        const match = dataUrl.match(/^data:image\/([a-z]+);base64,/);
+        return match ? match[1] : null;
+    }
+}
+exports.ScreenshotProcessor = ScreenshotProcessor;

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

@@ -0,0 +1,37 @@
+/**
+ * StyleManager
+ *
+ * Responsibility: Generate and manage CSS styles for the bug report modal
+ * Follows SRP: Only handles style generation and theming
+ */
+export interface StyleConfig {
+    primaryColor?: string;
+    dangerColor?: string;
+    borderRadius?: string;
+    fontFamily?: string;
+    zIndex?: number;
+}
+export declare class StyleManager {
+    private config;
+    constructor(config?: StyleConfig);
+    /**
+     * Generate complete CSS stylesheet for the modal
+     */
+    generateStyles(): string;
+    /**
+     * Inject styles into document head
+     */
+    injectStyles(): HTMLStyleElement;
+    /**
+     * Remove injected styles
+     */
+    removeStyles(styleElement: HTMLStyleElement): void;
+    /**
+     * Update configuration and regenerate styles
+     */
+    updateConfig(config: Partial<StyleConfig>): void;
+    /**
+     * Get current configuration
+     */
+    getConfig(): Required<StyleConfig>;
+}