@triagly/sdk 1.3.0 → 1.4.0-beta.2

package/dist/index.esm.js

@@ -1,3 +1,950 @@
+// Screenshot Capture Module
+// Dynamically loads html2canvas and captures the page
+// CDN URLs for html2canvas with fallbacks
+const HTML2CANVAS_CDN_URLS = [
+    'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js',
+    'https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js',
+    'https://unpkg.com/html2canvas@1.4.1/dist/html2canvas.min.js',
+];
+class ScreenshotCapture {
+    constructor(config = {}) {
+        this.html2canvasLoaded = false;
+        this.loadPromise = null;
+        this.quality = config.quality ?? 0.8;
+        this.maxWidth = config.maxWidth ?? 1920;
+        this.options = config.html2canvasOptions ?? {};
+        this.customCdnUrl = config.html2canvasCdnUrl;
+    }
+    /**
+     * Dynamically load html2canvas from CDN with fallbacks
+     * Returns true if loaded successfully, false otherwise
+     */
+    async loadHtml2Canvas() {
+        // Return cached result if already attempted
+        if (this.html2canvasLoaded && window.html2canvas) {
+            return true;
+        }
+        // Return existing promise if load is in progress
+        if (this.loadPromise) {
+            return this.loadPromise;
+        }
+        // Check if already available in window (user may have loaded it)
+        if (window.html2canvas) {
+            this.html2canvasLoaded = true;
+            return true;
+        }
+        // Build list of CDNs to try (custom URL first if provided)
+        const cdnUrls = this.customCdnUrl
+            ? [this.customCdnUrl, ...HTML2CANVAS_CDN_URLS]
+            : HTML2CANVAS_CDN_URLS;
+        // Try loading from CDNs with fallback
+        this.loadPromise = this.tryLoadFromCdns(cdnUrls);
+        return this.loadPromise;
+    }
+    /**
+     * Try loading html2canvas from multiple CDN URLs
+     */
+    async tryLoadFromCdns(urls) {
+        for (const url of urls) {
+            const success = await this.loadScriptFromUrl(url);
+            if (success && window.html2canvas) {
+                this.html2canvasLoaded = true;
+                return true;
+            }
+        }
+        console.error('[Triagly] Failed to load html2canvas from all CDN sources');
+        return false;
+    }
+    /**
+     * Load a script from a specific URL
+     */
+    loadScriptFromUrl(url) {
+        return new Promise((resolve) => {
+            const script = document.createElement('script');
+            script.src = url;
+            script.async = true;
+            const cleanup = () => {
+                script.onload = null;
+                script.onerror = null;
+            };
+            script.onload = () => {
+                cleanup();
+                resolve(true);
+            };
+            script.onerror = () => {
+                cleanup();
+                // Remove failed script from DOM
+                script.remove();
+                resolve(false);
+            };
+            document.head.appendChild(script);
+        });
+    }
+    /**
+     * Capture screenshot of the current page
+     * Returns base64 data URL of the screenshot
+     */
+    async capture() {
+        const loaded = await this.loadHtml2Canvas();
+        if (!loaded || !window.html2canvas) {
+            throw new Error('Screenshot capture requires html2canvas. ' +
+                'Include <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> ' +
+                'or ensure network access to CDN.');
+        }
+        // Hide the Triagly widget elements during capture
+        const widgetElements = document.querySelectorAll('.triagly-overlay, .triagly-button, #triagly-button');
+        const originalVisibility = new Map();
+        widgetElements.forEach((el) => {
+            const htmlEl = el;
+            originalVisibility.set(el, htmlEl.style.visibility);
+            htmlEl.style.visibility = 'hidden';
+        });
+        try {
+            const canvas = await window.html2canvas(document.body, {
+                useCORS: true,
+                allowTaint: false,
+                logging: false,
+                backgroundColor: null,
+                scale: Math.min(window.devicePixelRatio || 1, 2), // Cap at 2x for performance
+                ...this.options,
+            });
+            // Resize if needed
+            const resized = this.resizeCanvas(canvas);
+            // Convert to JPEG data URL
+            return resized.toDataURL('image/jpeg', this.quality);
+        }
+        finally {
+            // Restore widget visibility
+            widgetElements.forEach((el) => {
+                const htmlEl = el;
+                htmlEl.style.visibility = originalVisibility.get(el) || '';
+            });
+        }
+    }
+    /**
+     * Resize canvas if it exceeds maxWidth
+     */
+    resizeCanvas(canvas) {
+        if (canvas.width <= this.maxWidth) {
+            return canvas;
+        }
+        const ratio = this.maxWidth / canvas.width;
+        const resized = document.createElement('canvas');
+        resized.width = this.maxWidth;
+        resized.height = Math.round(canvas.height * ratio);
+        const ctx = resized.getContext('2d');
+        if (ctx) {
+            // Use high-quality image smoothing
+            ctx.imageSmoothingEnabled = true;
+            ctx.imageSmoothingQuality = 'high';
+            ctx.drawImage(canvas, 0, 0, resized.width, resized.height);
+        }
+        return resized;
+    }
+    /**
+     * Get approximate file size of a data URL in bytes
+     */
+    static getDataUrlSize(dataUrl) {
+        // Remove data URL prefix to get base64 content
+        const base64 = dataUrl.split(',')[1] || '';
+        // Base64 encodes 3 bytes into 4 characters
+        return Math.round((base64.length * 3) / 4);
+    }
+}
+
+// Annotation Editor Module
+// Canvas-based annotation overlay for marking up screenshots
+class AnnotationEditor {
+    constructor(imageData, onComplete, onCancel) {
+        this.overlay = null;
+        this.canvas = null;
+        this.ctx = null;
+        this.image = null;
+        this.annotations = [];
+        this.currentTool = 'highlight';
+        this.currentColor = '#ff0000';
+        this.strokeWidth = 3;
+        this.isDrawing = false;
+        this.currentAnnotation = null;
+        this.scale = 1;
+        this.offsetX = 0;
+        this.offsetY = 0;
+        this.pendingTextPoint = null;
+        this.handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                this.close(true);
+            }
+        };
+        this.imageData = imageData;
+        this.onComplete = onComplete;
+        this.onCancel = onCancel;
+    }
+    /**
+     * Open the annotation editor
+     */
+    async open() {
+        // Load the image first
+        this.image = await this.loadImage(this.imageData);
+        // Create the overlay UI
+        this.createOverlay();
+        // Set up the canvas
+        this.setupCanvas();
+        // Draw the image
+        this.render();
+    }
+    /**
+     * Load image from data URL
+     */
+    loadImage(dataUrl) {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => resolve(img);
+            img.onerror = () => reject(new Error('Failed to load image'));
+            img.src = dataUrl;
+        });
+    }
+    /**
+     * Create the fullscreen overlay UI
+     */
+    createOverlay() {
+        this.overlay = document.createElement('div');
+        this.overlay.className = 'triagly-annotation-overlay';
+        this.overlay.innerHTML = `
+      <div class="triagly-annotation-header">
+        <div class="triagly-annotation-tools">
+          <button type="button" class="triagly-tool-btn active" data-tool="highlight" title="Highlight">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="3" y="3" width="18" height="18" rx="2" opacity="0.3" fill="currentColor"/>
+              <rect x="3" y="3" width="18" height="18" rx="2"/>
+            </svg>
+          </button>
+          <button type="button" class="triagly-tool-btn" data-tool="arrow" title="Arrow">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="5" y1="19" x2="19" y2="5"/>
+              <polyline points="10,5 19,5 19,14"/>
+            </svg>
+          </button>
+          <button type="button" class="triagly-tool-btn" data-tool="freehand" title="Draw">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M12 19l7-7 3 3-7 7-3-3z"/>
+              <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/>
+              <path d="M2 2l7.586 7.586"/>
+            </svg>
+          </button>
+          <button type="button" class="triagly-tool-btn" data-tool="text" title="Text">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="4 7 4 4 20 4 20 7"/>
+              <line x1="9" y1="20" x2="15" y2="20"/>
+              <line x1="12" y1="4" x2="12" y2="20"/>
+            </svg>
+          </button>
+          <div class="triagly-tool-divider"></div>
+          <input type="color" class="triagly-color-picker" value="#ff0000" title="Color">
+        </div>
+        <div class="triagly-annotation-actions">
+          <button type="button" class="triagly-annotation-btn triagly-btn-clear" title="Clear All">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="3 6 5 6 21 6"/>
+              <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+            </svg>
+            Clear
+          </button>
+          <button type="button" class="triagly-annotation-btn triagly-btn-cancel">Cancel</button>
+          <button type="button" class="triagly-annotation-btn triagly-btn-done">Done</button>
+        </div>
+      </div>
+      <div class="triagly-annotation-canvas-container">
+        <canvas class="triagly-annotation-canvas"></canvas>
+      </div>
+      <div class="triagly-text-modal" id="triagly-text-modal" style="display: none;">
+        <div class="triagly-text-modal-content">
+          <h3>Add Text Annotation</h3>
+          <input type="text" id="triagly-text-input" placeholder="Enter text..." maxlength="200" autofocus />
+          <div class="triagly-text-modal-actions">
+            <button type="button" class="triagly-annotation-btn triagly-btn-cancel" id="triagly-text-cancel">Cancel</button>
+            <button type="button" class="triagly-annotation-btn triagly-btn-done" id="triagly-text-confirm">Add Text</button>
+          </div>
+        </div>
+      </div>
+    `;
+        // Inject styles
+        this.injectStyles();
+        // Add event listeners
+        this.setupEventListeners();
+        document.body.appendChild(this.overlay);
+    }
+    /**
+     * Set up the canvas with correct dimensions
+     */
+    setupCanvas() {
+        if (!this.overlay || !this.image)
+            return;
+        this.canvas = this.overlay.querySelector('.triagly-annotation-canvas');
+        const container = this.overlay.querySelector('.triagly-annotation-canvas-container');
+        if (!this.canvas || !container)
+            return;
+        this.ctx = this.canvas.getContext('2d');
+        if (!this.ctx)
+            return;
+        // Calculate scale to fit image in container
+        const containerRect = container.getBoundingClientRect();
+        const maxWidth = containerRect.width - 40; // Padding
+        const maxHeight = containerRect.height - 40;
+        const imageAspect = this.image.width / this.image.height;
+        const containerAspect = maxWidth / maxHeight;
+        let canvasWidth;
+        let canvasHeight;
+        if (imageAspect > containerAspect) {
+            // Image is wider - fit to width
+            canvasWidth = Math.min(this.image.width, maxWidth);
+            canvasHeight = canvasWidth / imageAspect;
+        }
+        else {
+            // Image is taller - fit to height
+            canvasHeight = Math.min(this.image.height, maxHeight);
+            canvasWidth = canvasHeight * imageAspect;
+        }
+        this.scale = canvasWidth / this.image.width;
+        this.canvas.width = canvasWidth;
+        this.canvas.height = canvasHeight;
+        this.canvas.style.width = `${canvasWidth}px`;
+        this.canvas.style.height = `${canvasHeight}px`;
+        // Calculate offset for centering
+        this.offsetX = (containerRect.width - canvasWidth) / 2;
+        this.offsetY = (containerRect.height - canvasHeight) / 2;
+    }
+    /**
+     * Set up event listeners
+     */
+    setupEventListeners() {
+        if (!this.overlay || !this.canvas)
+            return;
+        // Tool selection
+        const toolBtns = this.overlay.querySelectorAll('.triagly-tool-btn');
+        toolBtns.forEach((btn) => {
+            btn.addEventListener('click', (e) => {
+                const tool = e.currentTarget.dataset.tool;
+                if (tool) {
+                    this.currentTool = tool;
+                    toolBtns.forEach((b) => b.classList.remove('active'));
+                    e.currentTarget.classList.add('active');
+                }
+            });
+        });
+        // Color picker
+        const colorPicker = this.overlay.querySelector('.triagly-color-picker');
+        if (colorPicker) {
+            colorPicker.addEventListener('change', (e) => {
+                this.currentColor = e.target.value;
+            });
+        }
+        // Clear button
+        const clearBtn = this.overlay.querySelector('.triagly-btn-clear');
+        if (clearBtn) {
+            clearBtn.addEventListener('click', () => {
+                this.annotations = [];
+                this.render();
+            });
+        }
+        // Cancel button
+        const cancelBtn = this.overlay.querySelector('.triagly-btn-cancel');
+        if (cancelBtn) {
+            cancelBtn.addEventListener('click', () => this.close(true));
+        }
+        // Done button
+        const doneBtn = this.overlay.querySelector('.triagly-btn-done');
+        if (doneBtn) {
+            doneBtn.addEventListener('click', () => this.close(false));
+        }
+        // Canvas drawing events
+        this.canvas.addEventListener('mousedown', (e) => this.handleMouseDown(e));
+        this.canvas.addEventListener('mousemove', (e) => this.handleMouseMove(e));
+        this.canvas.addEventListener('mouseup', () => this.handleMouseUp());
+        this.canvas.addEventListener('mouseleave', () => this.handleMouseUp());
+        // Touch support
+        this.canvas.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            const touch = e.touches[0];
+            this.handleMouseDown(touch);
+        });
+        this.canvas.addEventListener('touchmove', (e) => {
+            e.preventDefault();
+            const touch = e.touches[0];
+            this.handleMouseMove(touch);
+        });
+        this.canvas.addEventListener('touchend', () => this.handleMouseUp());
+        this.canvas.addEventListener('touchcancel', () => this.handleMouseUp());
+        // Text modal event listeners
+        const textConfirmBtn = this.overlay.querySelector('#triagly-text-confirm');
+        const textCancelBtn = this.overlay.querySelector('#triagly-text-cancel');
+        const textInput = this.overlay.querySelector('#triagly-text-input');
+        textConfirmBtn?.addEventListener('click', () => this.confirmTextAnnotation());
+        textCancelBtn?.addEventListener('click', () => this.hideTextModal());
+        textInput?.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                this.confirmTextAnnotation();
+            }
+            else if (e.key === 'Escape') {
+                e.preventDefault();
+                this.hideTextModal();
+            }
+        });
+        // Escape key to cancel
+        document.addEventListener('keydown', this.handleKeyDown);
+    }
+    /**
+     * Get canvas coordinates from mouse event
+     */
+    getCanvasPoint(e) {
+        if (!this.canvas)
+            return { x: 0, y: 0 };
+        const rect = this.canvas.getBoundingClientRect();
+        return {
+            x: e.clientX - rect.left,
+            y: e.clientY - rect.top,
+        };
+    }
+    /**
+     * Handle mouse down - start drawing
+     */
+    handleMouseDown(e) {
+        const point = this.getCanvasPoint(e);
+        this.isDrawing = true;
+        if (this.currentTool === 'text') {
+            // For text, show custom modal input
+            this.pendingTextPoint = point;
+            this.showTextModal();
+            this.isDrawing = false;
+            return;
+        }
+        this.currentAnnotation = {
+            type: this.currentTool,
+            color: this.currentColor,
+            strokeWidth: this.strokeWidth,
+            points: [point],
+        };
+    }
+    /**
+     * Show the text input modal
+     */
+    showTextModal() {
+        if (!this.overlay)
+            return;
+        const modal = this.overlay.querySelector('#triagly-text-modal');
+        const input = this.overlay.querySelector('#triagly-text-input');
+        if (modal && input) {
+            modal.style.display = 'flex';
+            input.value = '';
+            input.focus();
+        }
+    }
+    /**
+     * Hide the text input modal
+     */
+    hideTextModal() {
+        if (!this.overlay)
+            return;
+        const modal = this.overlay.querySelector('#triagly-text-modal');
+        if (modal) {
+            modal.style.display = 'none';
+        }
+        this.pendingTextPoint = null;
+    }
+    /**
+     * Confirm text annotation from modal
+     */
+    confirmTextAnnotation() {
+        if (!this.overlay || !this.pendingTextPoint)
+            return;
+        const input = this.overlay.querySelector('#triagly-text-input');
+        const text = input?.value.trim();
+        if (text) {
+            this.annotations.push({
+                type: 'text',
+                color: this.currentColor,
+                strokeWidth: this.strokeWidth,
+                points: [this.pendingTextPoint],
+                text,
+            });
+            this.render();
+        }
+        this.hideTextModal();
+    }
+    /**
+     * Handle mouse move - continue drawing
+     */
+    handleMouseMove(e) {
+        if (!this.isDrawing || !this.currentAnnotation)
+            return;
+        const point = this.getCanvasPoint(e);
+        if (this.currentTool === 'freehand') {
+            // Add point to path
+            this.currentAnnotation.points.push(point);
+        }
+        else {
+            // For highlight and arrow, just update the end point
+            if (this.currentAnnotation.points.length === 1) {
+                this.currentAnnotation.points.push(point);
+            }
+            else {
+                this.currentAnnotation.points[1] = point;
+            }
+        }
+        this.render();
+    }
+    /**
+     * Handle mouse up - finish drawing
+     */
+    handleMouseUp() {
+        if (this.isDrawing && this.currentAnnotation && this.currentAnnotation.points.length > 1) {
+            this.annotations.push(this.currentAnnotation);
+        }
+        this.isDrawing = false;
+        this.currentAnnotation = null;
+        this.render();
+    }
+    /**
+     * Render the canvas with image and annotations
+     */
+    render() {
+        if (!this.ctx || !this.canvas || !this.image)
+            return;
+        // Clear canvas
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        // Draw the image
+        this.ctx.drawImage(this.image, 0, 0, this.canvas.width, this.canvas.height);
+        // Draw all annotations
+        for (const annotation of this.annotations) {
+            this.drawAnnotation(annotation);
+        }
+        // Draw current annotation being made
+        if (this.currentAnnotation) {
+            this.drawAnnotation(this.currentAnnotation);
+        }
+    }
+    /**
+     * Draw a single annotation
+     */
+    drawAnnotation(annotation) {
+        if (!this.ctx)
+            return;
+        this.ctx.strokeStyle = annotation.color;
+        this.ctx.fillStyle = annotation.color;
+        this.ctx.lineWidth = annotation.strokeWidth;
+        this.ctx.lineCap = 'round';
+        this.ctx.lineJoin = 'round';
+        switch (annotation.type) {
+            case 'highlight':
+                this.drawHighlight(annotation);
+                break;
+            case 'arrow':
+                this.drawArrow(annotation);
+                break;
+            case 'freehand':
+                this.drawFreehand(annotation);
+                break;
+            case 'text':
+                this.drawText(annotation);
+                break;
+        }
+    }
+    /**
+     * Draw a semi-transparent highlight rectangle
+     */
+    drawHighlight(annotation) {
+        if (!this.ctx || annotation.points.length < 2)
+            return;
+        const [start, end] = annotation.points;
+        const width = end.x - start.x;
+        const height = end.y - start.y;
+        // Semi-transparent fill
+        this.ctx.globalAlpha = 0.3;
+        this.ctx.fillRect(start.x, start.y, width, height);
+        // Solid border
+        this.ctx.globalAlpha = 1;
+        this.ctx.strokeRect(start.x, start.y, width, height);
+    }
+    /**
+     * Draw an arrow from start to end
+     */
+    drawArrow(annotation) {
+        if (!this.ctx || annotation.points.length < 2)
+            return;
+        const [start, end] = annotation.points;
+        const headLength = 15;
+        const angle = Math.atan2(end.y - start.y, end.x - start.x);
+        // Draw the line
+        this.ctx.beginPath();
+        this.ctx.moveTo(start.x, start.y);
+        this.ctx.lineTo(end.x, end.y);
+        this.ctx.stroke();
+        // Draw the arrow head
+        this.ctx.beginPath();
+        this.ctx.moveTo(end.x, end.y);
+        this.ctx.lineTo(end.x - headLength * Math.cos(angle - Math.PI / 6), end.y - headLength * Math.sin(angle - Math.PI / 6));
+        this.ctx.moveTo(end.x, end.y);
+        this.ctx.lineTo(end.x - headLength * Math.cos(angle + Math.PI / 6), end.y - headLength * Math.sin(angle + Math.PI / 6));
+        this.ctx.stroke();
+    }
+    /**
+     * Draw a freehand path
+     */
+    drawFreehand(annotation) {
+        if (!this.ctx || annotation.points.length < 2)
+            return;
+        this.ctx.beginPath();
+        this.ctx.moveTo(annotation.points[0].x, annotation.points[0].y);
+        for (let i = 1; i < annotation.points.length; i++) {
+            this.ctx.lineTo(annotation.points[i].x, annotation.points[i].y);
+        }
+        this.ctx.stroke();
+    }
+    /**
+     * Draw text annotation
+     */
+    drawText(annotation) {
+        if (!this.ctx || !annotation.text || annotation.points.length < 1)
+            return;
+        const point = annotation.points[0];
+        // Text settings
+        this.ctx.font = 'bold 16px sans-serif';
+        this.ctx.textBaseline = 'top';
+        // Measure text for background
+        const metrics = this.ctx.measureText(annotation.text);
+        const padding = 4;
+        // Draw background
+        this.ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+        this.ctx.fillRect(point.x - padding, point.y - padding, metrics.width + padding * 2, 20 + padding * 2);
+        // Draw text
+        this.ctx.fillStyle = '#ffffff';
+        this.ctx.fillText(annotation.text, point.x, point.y);
+    }
+    /**
+     * Close the editor
+     */
+    close(cancelled) {
+        document.removeEventListener('keydown', this.handleKeyDown);
+        if (cancelled) {
+            this.onCancel();
+        }
+        else {
+            // Generate final annotated image
+            const annotatedImage = this.renderFinalImage();
+            this.onComplete(annotatedImage);
+        }
+        // Remove overlay
+        if (this.overlay) {
+            this.overlay.remove();
+            this.overlay = null;
+        }
+    }
+    /**
+     * Render the final annotated image at full resolution
+     */
+    renderFinalImage() {
+        if (!this.image)
+            return this.imageData;
+        // Create a full-resolution canvas
+        const canvas = document.createElement('canvas');
+        canvas.width = this.image.width;
+        canvas.height = this.image.height;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return this.imageData;
+        // Draw original image
+        ctx.drawImage(this.image, 0, 0);
+        // Calculate scale factor
+        const scaleFactor = 1 / this.scale;
+        // Draw annotations at full resolution
+        for (const annotation of this.annotations) {
+            ctx.strokeStyle = annotation.color;
+            ctx.fillStyle = annotation.color;
+            ctx.lineWidth = annotation.strokeWidth * scaleFactor;
+            ctx.lineCap = 'round';
+            ctx.lineJoin = 'round';
+            // Scale points
+            const scaledPoints = annotation.points.map((p) => ({
+                x: p.x * scaleFactor,
+                y: p.y * scaleFactor,
+            }));
+            const scaledAnnotation = { ...annotation, points: scaledPoints };
+            switch (annotation.type) {
+                case 'highlight':
+                    this.drawHighlightOnCtx(ctx, scaledAnnotation);
+                    break;
+                case 'arrow':
+                    this.drawArrowOnCtx(ctx, scaledAnnotation, scaleFactor);
+                    break;
+                case 'freehand':
+                    this.drawFreehandOnCtx(ctx, scaledAnnotation);
+                    break;
+                case 'text':
+                    this.drawTextOnCtx(ctx, scaledAnnotation, scaleFactor);
+                    break;
+            }
+        }
+        return canvas.toDataURL('image/jpeg', 0.9);
+    }
+    drawHighlightOnCtx(ctx, annotation) {
+        if (annotation.points.length < 2)
+            return;
+        const [start, end] = annotation.points;
+        const width = end.x - start.x;
+        const height = end.y - start.y;
+        ctx.globalAlpha = 0.3;
+        ctx.fillRect(start.x, start.y, width, height);
+        ctx.globalAlpha = 1;
+        ctx.strokeRect(start.x, start.y, width, height);
+    }
+    drawArrowOnCtx(ctx, annotation, scaleFactor) {
+        if (annotation.points.length < 2)
+            return;
+        const [start, end] = annotation.points;
+        const headLength = 15 * scaleFactor;
+        const angle = Math.atan2(end.y - start.y, end.x - start.x);
+        ctx.beginPath();
+        ctx.moveTo(start.x, start.y);
+        ctx.lineTo(end.x, end.y);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(end.x, end.y);
+        ctx.lineTo(end.x - headLength * Math.cos(angle - Math.PI / 6), end.y - headLength * Math.sin(angle - Math.PI / 6));
+        ctx.moveTo(end.x, end.y);
+        ctx.lineTo(end.x - headLength * Math.cos(angle + Math.PI / 6), end.y - headLength * Math.sin(angle + Math.PI / 6));
+        ctx.stroke();
+    }
+    drawFreehandOnCtx(ctx, annotation) {
+        if (annotation.points.length < 2)
+            return;
+        ctx.beginPath();
+        ctx.moveTo(annotation.points[0].x, annotation.points[0].y);
+        for (let i = 1; i < annotation.points.length; i++) {
+            ctx.lineTo(annotation.points[i].x, annotation.points[i].y);
+        }
+        ctx.stroke();
+    }
+    drawTextOnCtx(ctx, annotation, scaleFactor) {
+        if (!annotation.text || annotation.points.length < 1)
+            return;
+        const point = annotation.points[0];
+        const fontSize = 16 * scaleFactor;
+        ctx.font = `bold ${fontSize}px sans-serif`;
+        ctx.textBaseline = 'top';
+        const metrics = ctx.measureText(annotation.text);
+        const padding = 4 * scaleFactor;
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+        ctx.fillRect(point.x - padding, point.y - padding, metrics.width + padding * 2, fontSize * 1.2 + padding * 2);
+        ctx.fillStyle = '#ffffff';
+        ctx.fillText(annotation.text, point.x, point.y);
+    }
+    /**
+     * Inject annotation editor styles
+     */
+    injectStyles() {
+        const styleId = 'triagly-annotation-styles';
+        if (document.getElementById(styleId))
+            return;
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+      .triagly-annotation-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 999999;
+        background: rgba(0, 0, 0, 0.9);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .triagly-annotation-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 12px 20px;
+        background: #1a1a1a;
+        border-bottom: 1px solid #333;
+      }
+
+      .triagly-annotation-tools {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .triagly-tool-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        border: none;
+        border-radius: 8px;
+        background: #333;
+        color: #fff;
+        cursor: pointer;
+        transition: all 0.2s;
+      }
+
+      .triagly-tool-btn:hover {
+        background: #444;
+      }
+
+      .triagly-tool-btn.active {
+        background: #0066cc;
+      }
+
+      .triagly-tool-divider {
+        width: 1px;
+        height: 24px;
+        background: #444;
+        margin: 0 8px;
+      }
+
+      .triagly-color-picker {
+        width: 40px;
+        height: 40px;
+        border: none;
+        border-radius: 8px;
+        cursor: pointer;
+        padding: 0;
+        background: none;
+      }
+
+      .triagly-color-picker::-webkit-color-swatch-wrapper {
+        padding: 4px;
+      }
+
+      .triagly-color-picker::-webkit-color-swatch {
+        border: none;
+        border-radius: 4px;
+      }
+
+      .triagly-annotation-actions {
+        display: flex;
+        gap: 8px;
+      }
+
+      .triagly-annotation-btn {
+        padding: 8px 16px;
+        border: none;
+        border-radius: 8px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .triagly-btn-clear {
+        background: transparent;
+        color: #999;
+        border: 1px solid #444;
+      }
+
+      .triagly-btn-clear:hover {
+        background: #333;
+        color: #fff;
+      }
+
+      .triagly-btn-cancel {
+        background: #333;
+        color: #fff;
+      }
+
+      .triagly-btn-cancel:hover {
+        background: #444;
+      }
+
+      .triagly-btn-done {
+        background: #0066cc;
+        color: #fff;
+      }
+
+      .triagly-btn-done:hover {
+        background: #0055aa;
+      }
+
+      .triagly-annotation-canvas-container {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        padding: 20px;
+      }
+
+      .triagly-annotation-canvas {
+        cursor: crosshair;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+        border-radius: 4px;
+      }
+
+      .triagly-text-modal {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.7);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 1000000;
+      }
+
+      .triagly-text-modal-content {
+        background: #1a1a1a;
+        border-radius: 12px;
+        padding: 24px;
+        min-width: 320px;
+        max-width: 400px;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+      }
+
+      .triagly-text-modal-content h3 {
+        color: #fff;
+        font-size: 16px;
+        font-weight: 600;
+        margin: 0 0 16px 0;
+      }
+
+      .triagly-text-modal-content input {
+        width: 100%;
+        padding: 12px;
+        border: 1px solid #444;
+        border-radius: 8px;
+        background: #2a2a2a;
+        color: #fff;
+        font-size: 14px;
+        outline: none;
+        box-sizing: border-box;
+      }
+
+      .triagly-text-modal-content input:focus {
+        border-color: #0066cc;
+      }
+
+      .triagly-text-modal-content input::placeholder {
+        color: #666;
+      }
+
+      .triagly-text-modal-actions {
+        display: flex;
+        gap: 8px;
+        justify-content: flex-end;
+        margin-top: 16px;
+      }
+    `;
+        document.head.appendChild(style);
+    }
+}
+
 // Feedback Widget UI
 class FeedbackWidget {
     constructor(config) {
@@ -5,6 +952,8 @@ class FeedbackWidget {
         this.isOpen = false;
         this.previouslyFocusedElement = null;
         this.focusableElements = [];
+        this.screenshotDataUrl = null;
+        this.screenshotCapture = null;
         this.config = config;
     }
     /**
@@ -17,6 +966,13 @@ class FeedbackWidget {
         if (this.config.turnstileSiteKey) {
             this.loadTurnstileScript();
         }
+        // Initialize screenshot capture if enabled
+        if (this.config.enableScreenshot) {
+            this.screenshotCapture = new ScreenshotCapture({
+                quality: this.config.screenshotQuality,
+                maxWidth: this.config.screenshotMaxWidth,
+            });
+        }
     }
     /**
      * Load Cloudflare Turnstile script dynamically
@@ -146,6 +1102,7 @@ class FeedbackWidget {
         this.container.remove();
         this.container = null;
         this.isOpen = false;
+        this.screenshotDataUrl = null;
         // Restore focus to previously focused element
         if (this.previouslyFocusedElement) {
             this.previouslyFocusedElement.focus();
@@ -220,6 +1177,41 @@ class FeedbackWidget {
         />
       </div>
 
+      ${this.config.enableScreenshot ? `
+      <div class="triagly-field triagly-screenshot-field">
+        <label>Screenshot (optional)</label>
+        <div class="triagly-screenshot-controls" id="triagly-screenshot-controls">
+          <button type="button" class="triagly-btn-capture" id="triagly-capture-btn">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="3" y="3" width="18" height="18" rx="2"/>
+              <circle cx="8.5" cy="8.5" r="1.5"/>
+              <path d="M21 15l-5-5L5 21"/>
+            </svg>
+            ${this.config.screenshotButtonText || 'Capture Screenshot'}
+          </button>
+        </div>
+        <div class="triagly-screenshot-preview" id="triagly-screenshot-preview" style="display: none;">
+          <img id="triagly-screenshot-img" alt="Screenshot preview" />
+          <div class="triagly-screenshot-actions">
+            ${this.config.enableAnnotation !== false ? `
+            <button type="button" class="triagly-btn-icon" id="triagly-annotate-btn" title="Add annotations">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M12 19l7-7 3 3-7 7-3-3z"/>
+                <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/>
+              </svg>
+            </button>
+            ` : ''}
+            <button type="button" class="triagly-btn-icon triagly-btn-danger" id="triagly-remove-screenshot-btn" title="Remove screenshot">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <line x1="18" y1="6" x2="6" y2="18"/>
+                <line x1="6" y1="6" x2="18" y2="18"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+      ` : ''}
+
       ${this.config.turnstileSiteKey ? `
       <div class="triagly-field triagly-turnstile">
         <div class="cf-turnstile" data-sitekey="${this.config.turnstileSiteKey}" data-theme="light"></div>
@@ -243,6 +1235,10 @@ class FeedbackWidget {
             e.preventDefault();
             this.handleSubmit(form);
         };
+        // Set up screenshot event handlers
+        if (this.config.enableScreenshot) {
+            this.setupScreenshotHandlers(form);
+        }
         const footer = document.createElement('div');
         footer.className = 'triagly-footer';
         footer.innerHTML = `
@@ -297,6 +1293,80 @@ class FeedbackWidget {
             console.error('Triagly: Failed to render Turnstile widget:', error instanceof Error ? error.message : 'Unknown error');
         }
     }
+    /**
+     * Set up screenshot capture event handlers
+     */
+    setupScreenshotHandlers(form) {
+        const captureBtn = form.querySelector('#triagly-capture-btn');
+        const annotateBtn = form.querySelector('#triagly-annotate-btn');
+        const removeBtn = form.querySelector('#triagly-remove-screenshot-btn');
+        const preview = form.querySelector('#triagly-screenshot-preview');
+        const controls = form.querySelector('#triagly-screenshot-controls');
+        const previewImg = form.querySelector('#triagly-screenshot-img');
+        // Capture screenshot
+        captureBtn?.addEventListener('click', async () => {
+            if (!this.screenshotCapture)
+                return;
+            const btn = captureBtn;
+            const originalText = btn.innerHTML;
+            btn.disabled = true;
+            btn.innerHTML = `
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" class="triagly-spin">
+          <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" opacity="0.3"/>
+          <path d="M12 2v4"/>
+        </svg>
+        Capturing...
+      `;
+            try {
+                const dataUrl = await this.screenshotCapture.capture();
+                this.screenshotDataUrl = dataUrl;
+                // Update UI
+                if (previewImg)
+                    previewImg.src = dataUrl;
+                if (preview)
+                    preview.style.display = 'block';
+                if (controls)
+                    controls.style.display = 'none';
+                // Call callback if provided
+                if (this.config.onScreenshotCapture) {
+                    this.config.onScreenshotCapture(dataUrl);
+                }
+            }
+            catch (error) {
+                console.error('Triagly: Screenshot capture failed:', error);
+                if (this.config.onScreenshotError) {
+                    this.config.onScreenshotError(error instanceof Error ? error : new Error(String(error)));
+                }
+            }
+            finally {
+                btn.disabled = false;
+                btn.innerHTML = originalText;
+            }
+        });
+        // Annotate screenshot
+        annotateBtn?.addEventListener('click', () => {
+            if (!this.screenshotDataUrl)
+                return;
+            const editor = new AnnotationEditor(this.screenshotDataUrl, (annotatedImage) => {
+                this.screenshotDataUrl = annotatedImage;
+                if (previewImg)
+                    previewImg.src = annotatedImage;
+            }, () => {
+                // Cancelled - do nothing
+            });
+            editor.open();
+        });
+        // Remove screenshot
+        removeBtn?.addEventListener('click', () => {
+            this.screenshotDataUrl = null;
+            if (preview)
+                preview.style.display = 'none';
+            if (controls)
+                controls.style.display = 'block';
+            if (previewImg)
+                previewImg.src = '';
+        });
+    }
     /**
      * Handle form submission
      */
@@ -321,6 +1391,7 @@ class FeedbackWidget {
                 reporterName: nameInput.value.trim() || undefined,
                 reporterEmail: emailInput.value.trim() || undefined,
                 turnstileToken,
+                screenshot: this.screenshotDataUrl || undefined,
             };
             // Create a promise that waits for actual submission result
             const submissionPromise = new Promise((resolve, reject) => {
@@ -727,6 +1798,102 @@ class FeedbackWidget {
       .triagly-branding strong {
         font-weight: 600;
       }
+
+      /* Screenshot styles */
+      .triagly-screenshot-field {
+        margin-bottom: 16px;
+      }
+
+      .triagly-screenshot-controls {
+        display: flex;
+        gap: 8px;
+      }
+
+      .triagly-btn-capture {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        padding: 10px 16px;
+        background: var(--triagly-btn-secondary-bg, #f3f4f6);
+        color: var(--triagly-btn-secondary-text, #374151);
+        border: 1px dashed var(--triagly-input-border, #d1d5db);
+        border-radius: var(--triagly-input-radius, 6px);
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+        width: 100%;
+        justify-content: center;
+      }
+
+      .triagly-btn-capture:hover:not(:disabled) {
+        background: var(--triagly-btn-secondary-bg-hover, #e5e7eb);
+        border-style: solid;
+      }
+
+      .triagly-btn-capture:disabled {
+        opacity: 0.7;
+        cursor: wait;
+      }
+
+      .triagly-screenshot-preview {
+        position: relative;
+        border-radius: var(--triagly-input-radius, 6px);
+        overflow: hidden;
+        border: 1px solid var(--triagly-input-border, #d1d5db);
+        background: var(--triagly-input-bg, #ffffff);
+      }
+
+      .triagly-screenshot-preview img {
+        display: block;
+        width: 100%;
+        max-height: 200px;
+        object-fit: contain;
+        background: #f9fafb;
+      }
+
+      .triagly-screenshot-actions {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        display: flex;
+        gap: 4px;
+      }
+
+      .triagly-btn-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        padding: 0;
+        background: rgba(255, 255, 255, 0.9);
+        border: 1px solid var(--triagly-input-border, #d1d5db);
+        border-radius: 6px;
+        cursor: pointer;
+        transition: all 0.2s;
+        color: #374151;
+      }
+
+      .triagly-btn-icon:hover {
+        background: #ffffff;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+
+      .triagly-btn-icon.triagly-btn-danger:hover {
+        background: #fee2e2;
+        border-color: #fca5a5;
+        color: #dc2626;
+      }
+
+      @keyframes triagly-spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+      }
+
+      .triagly-spin {
+        animation: triagly-spin 1s linear infinite;
+      }
     `;
         document.head.appendChild(style);
     }
@@ -898,6 +2065,7 @@ class TriaglyAPI {
             tags: data.tags,
             reporterEmail: data.reporterEmail,
             reporterName: data.reporterName,
+            screenshot: data.screenshot,
             turnstileToken,
             hardenedToken,
         };
@@ -1263,6 +2431,7 @@ class Triagly {
                 description: data.description,
                 reporterEmail: data.reporterEmail,
                 consoleLogs: this.consoleLogger?.getLogs(),
+                screenshot: data.screenshot,
             };
             // Submit to API with Turnstile token if provided
             const response = await this.api.submitFeedback(feedbackData, metadata, data.turnstileToken);