@triagly/sdk 1.3.0 → 1.4.0-beta.2

package/dist/index.js

@@ -4,6 +4,953 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Triagly = {}));
 })(this, (function (exports) { 'use strict';
 
+    // 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) {
@@ -11,6 +958,8 @@
             this.isOpen = false;
             this.previouslyFocusedElement = null;
             this.focusableElements = [];
+            this.screenshotDataUrl = null;
+            this.screenshotCapture = null;
             this.config = config;
         }
         /**
@@ -23,6 +972,13 @@
             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
@@ -152,6 +1108,7 @@
             this.container.remove();
             this.container = null;
             this.isOpen = false;
+            this.screenshotDataUrl = null;
             // Restore focus to previously focused element
             if (this.previouslyFocusedElement) {
                 this.previouslyFocusedElement.focus();
@@ -226,6 +1183,41 @@
         />
       </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>
@@ -249,6 +1241,10 @@
                 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 = `
@@ -303,6 +1299,80 @@
                 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
          */
@@ -327,6 +1397,7 @@
                     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) => {
@@ -733,6 +1804,102 @@
       .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);
         }
@@ -904,6 +2071,7 @@
                 tags: data.tags,
                 reporterEmail: data.reporterEmail,
                 reporterName: data.reporterName,
+                screenshot: data.screenshot,
                 turnstileToken,
                 hardenedToken,
             };
@@ -1269,6 +2437,7 @@
                     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);