@triagly/sdk 0.1.2 → 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
@@ -45,26 +1001,23 @@ class FeedbackWidget {
         // Button orientation
         const orientation = this.config.orientation || 'horizontal';
         button.classList.add(`triagly-orientation-${orientation}`);
+        // Speech bubble SVG icon
+        const speechBubbleIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" class="triagly-icon"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>`;
+        const largeIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="currentColor" class="triagly-icon"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>`;
         // Handle button text based on shape
-        const fullText = this.config.buttonText || '🐛 Feedback';
+        const fullText = this.config.buttonText || 'Feedback';
         if (shape === 'circular') {
-            button.innerHTML = '🐛';
+            button.innerHTML = largeIcon;
             button.setAttribute('aria-label', fullText);
         }
         else if (shape === 'expandable') {
-            // Expandable starts with emoji, expands to full text on hover
-            button.innerHTML = '<span class="triagly-btn-icon">🐛</span><span class="triagly-btn-text"> Feedback</span>';
+            // Expandable starts with icon, expands to full text on hover
+            button.innerHTML = `<span class="triagly-btn-icon">${largeIcon}</span><span class="triagly-btn-text"> ${this.config.buttonText || 'Feedback'}</span>`;
             button.setAttribute('aria-label', fullText);
-            // Store custom text if provided
-            if (this.config.buttonText) {
-                const textSpan = button.querySelector('.triagly-btn-text');
-                if (textSpan) {
-                    textSpan.textContent = ' ' + this.config.buttonText.replace('🐛', '').trim();
-                }
-            }
         }
         else {
-            button.innerHTML = fullText;
+            // Default: icon + text
+            button.innerHTML = `${speechBubbleIcon}<span class="triagly-btn-label">${fullText}</span>`;
         }
         button.onclick = () => this.toggle();
         // Position button
@@ -130,9 +1083,9 @@ class FeedbackWidget {
             this.setupKeyboardEvents();
             // Set up focus trap
             this.setupFocusTrap();
-            // Focus on title field
-            const titleInput = this.container?.querySelector('input[type="text"]');
-            titleInput?.focus();
+            // Focus on description field
+            const descInput = this.container?.querySelector('#triagly-description');
+            descInput?.focus();
         }, 0);
     }
     /**
@@ -149,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();
@@ -177,7 +1131,7 @@ class FeedbackWidget {
         overlay.className = 'triagly-overlay';
         overlay.setAttribute('role', 'dialog');
         overlay.setAttribute('aria-modal', 'true');
-        overlay.setAttribute('aria-labelledby', 'triagly-modal-title');
+        overlay.setAttribute('aria-label', 'Send feedback');
         overlay.onclick = (e) => {
             if (e.target === overlay)
                 this.close('overlay');
@@ -188,7 +1142,6 @@ class FeedbackWidget {
         const header = document.createElement('div');
         header.className = 'triagly-header';
         header.innerHTML = `
-      <h3 id="triagly-modal-title">Send Feedback</h3>
       <button type="button" class="triagly-close" aria-label="Close feedback form">×</button>
     `;
         const closeBtn = header.querySelector('.triagly-close');
@@ -197,16 +1150,7 @@ class FeedbackWidget {
         form.className = 'triagly-form';
         form.innerHTML = `
       <div class="triagly-field">
-        <label for="triagly-title">Title (optional)</label>
-        <input
-          type="text"
-          id="triagly-title"
-          placeholder="Brief summary of your feedback"
-        />
-      </div>
-
-      <div class="triagly-field">
-        <label for="triagly-description">Description *</label>
+        <label for="triagly-description">What's on your mind?</label>
         <textarea
           id="triagly-description"
           required
@@ -215,6 +1159,15 @@ class FeedbackWidget {
         ></textarea>
       </div>
 
+      <div class="triagly-field">
+        <label for="triagly-name">Name (optional)</label>
+        <input
+          type="text"
+          id="triagly-name"
+          placeholder="Your name"
+        />
+      </div>
+
       <div class="triagly-field">
         <label for="triagly-email">Email (optional)</label>
         <input
@@ -224,12 +1177,40 @@ class FeedbackWidget {
         />
       </div>
 
-      <div class="triagly-field triagly-checkbox">
-        <label>
-          <input type="checkbox" id="triagly-screenshot" checked />
-          <span>Include screenshot</span>
-        </label>
+      ${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">
@@ -254,8 +1235,20 @@ 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 = `
+      <a href="https://triagly.com" target="_blank" rel="noopener noreferrer" class="triagly-branding">
+        Powered by <strong>Triagly</strong>
+      </a>
+    `;
         modal.appendChild(header);
         modal.appendChild(form);
+        modal.appendChild(footer);
         overlay.appendChild(modal);
         // Render Turnstile widget if available
         if (this.config.turnstileSiteKey) {
@@ -297,17 +1290,90 @@ class FeedbackWidget {
             turnstileContainer.setAttribute('data-widget-id', widgetId);
         }
         catch (error) {
-            console.error('Triagly: Failed to render Turnstile widget:', error);
+            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
      */
     async handleSubmit(form) {
-        const titleInput = form.querySelector('#triagly-title');
         const descInput = form.querySelector('#triagly-description');
+        const nameInput = form.querySelector('#triagly-name');
         const emailInput = form.querySelector('#triagly-email');
-        const screenshotCheckbox = form.querySelector('#triagly-screenshot');
         const statusDiv = form.querySelector('#triagly-status');
         const submitBtn = form.querySelector('button[type="submit"]');
         const turnstileContainer = form.querySelector('.cf-turnstile');
@@ -321,11 +1387,11 @@ class FeedbackWidget {
                 turnstileToken = turnstileContainer.getAttribute('data-turnstile-response') || undefined;
             }
             const data = {
-                title: titleInput.value.trim() || undefined,
                 description: descInput.value.trim(),
+                reporterName: nameInput.value.trim() || undefined,
                 reporterEmail: emailInput.value.trim() || undefined,
-                includeScreenshot: screenshotCheckbox.checked,
                 turnstileToken,
+                screenshot: this.screenshotDataUrl || undefined,
             };
             // Create a promise that waits for actual submission result
             const submissionPromise = new Promise((resolve, reject) => {
@@ -388,21 +1454,32 @@ class FeedbackWidget {
         position: fixed;
         z-index: 999999;
         padding: 12px 20px;
-        background: var(--triagly-button-bg, #6366f1);
+        background: var(--triagly-button-bg, #18181b);
         color: var(--triagly-button-text, #ffffff);
         border: none;
         border-radius: var(--triagly-button-radius, 8px);
         font-size: 14px;
         font-weight: 500;
         cursor: pointer;
-        box-shadow: var(--triagly-button-shadow, 0 4px 12px rgba(99, 102, 241, 0.3));
+        box-shadow: var(--triagly-button-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
         transition: all 0.2s;
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
       }
 
       .triagly-button:hover {
-        background: var(--triagly-button-bg-hover, #4f46e5);
+        background: var(--triagly-button-bg-hover, #27272a);
         transform: translateY(-2px);
-        box-shadow: var(--triagly-button-shadow-hover, 0 6px 16px rgba(99, 102, 241, 0.4));
+        box-shadow: var(--triagly-button-shadow-hover, 0 6px 16px rgba(0, 0, 0, 0.2));
+      }
+
+      .triagly-button .triagly-icon {
+        flex-shrink: 0;
+      }
+
+      .triagly-button .triagly-btn-label {
+        line-height: 1;
       }
 
       /* Prevent expandable buttons from shifting on hover */
@@ -496,8 +1573,8 @@ class FeedbackWidget {
         min-width: auto;
         padding: 12px 20px;
         border-radius: 30px;
-        background: var(--triagly-button-bg-hover, #4f46e5);
-        box-shadow: var(--triagly-button-shadow-hover, 0 6px 16px rgba(99, 102, 241, 0.4));
+        background: var(--triagly-button-bg-hover, #27272a);
+        box-shadow: var(--triagly-button-shadow-hover, 0 6px 16px rgba(0, 0, 0, 0.2));
       }
       .triagly-shape-expandable:hover .triagly-btn-text {
         width: auto;
@@ -556,18 +1633,10 @@ class FeedbackWidget {
 
       .triagly-header {
         display: flex;
-        justify-content: space-between;
+        justify-content: flex-end;
         align-items: center;
-        padding: 20px 24px;
+        padding: 8px 12px 0;
         background: var(--triagly-header-bg, #ffffff);
-        border-bottom: 1px solid var(--triagly-header-border, #e5e7eb);
-      }
-
-      .triagly-header h3 {
-        margin: 0;
-        font-size: 18px;
-        font-weight: 600;
-        color: var(--triagly-header-text, #111827);
       }
 
       .triagly-close {
@@ -625,46 +1694,21 @@ class FeedbackWidget {
       .triagly-field input:focus,
       .triagly-field textarea:focus {
         outline: none;
-        border-color: var(--triagly-input-border-focus, #6366f1);
-        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
-      }
-
-      .triagly-checkbox label {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        cursor: pointer;
-        font-weight: 400;
-      }
-
-      .triagly-checkbox label span {
-        user-select: none;
-      }
-
-      .triagly-checkbox input {
-        width: 16px;
-        height: 16px;
-        margin: 0;
-        cursor: pointer;
+        border-color: var(--triagly-input-border-focus, #a1a1aa);
+        box-shadow: 0 0 0 2px rgba(161, 161, 170, 0.15);
       }
 
       /* Focus visible styles for accessibility */
       .triagly-button:focus-visible,
       .triagly-field input:focus-visible,
       .triagly-field textarea:focus-visible,
-      .triagly-checkbox input:focus-visible,
       .triagly-btn-primary:focus-visible,
       .triagly-btn-secondary:focus-visible,
       .triagly-close:focus-visible {
-        outline: 2px solid #6366f1;
+        outline: 2px solid #a1a1aa;
         outline-offset: 2px;
       }
 
-      /* Checkbox label gets visual indicator when checkbox is focused */
-      .triagly-checkbox input:focus-visible + span {
-        text-decoration: underline;
-      }
-
       .triagly-turnstile {
         display: flex;
         justify-content: center;
@@ -690,12 +1734,12 @@ class FeedbackWidget {
       }
 
       .triagly-btn-primary {
-        background: var(--triagly-btn-primary-bg, #6366f1);
+        background: var(--triagly-btn-primary-bg, #18181b);
         color: var(--triagly-btn-primary-text, #ffffff);
       }
 
       .triagly-btn-primary:hover:not(:disabled) {
-        background: var(--triagly-btn-primary-bg-hover, #4f46e5);
+        background: var(--triagly-btn-primary-bg-hover, #27272a);
       }
 
       .triagly-btn-primary:disabled {
@@ -731,6 +1775,125 @@ class FeedbackWidget {
         background: var(--triagly-error-bg, #fee2e2);
         color: var(--triagly-error-text, #991b1b);
       }
+
+      .triagly-footer {
+        padding: 12px 24px 16px;
+        text-align: right;
+        border-top: 1px solid var(--triagly-footer-border, #e5e7eb);
+        background: var(--triagly-footer-bg, #f9fafb);
+        border-radius: 0 0 var(--triagly-modal-radius, 12px) var(--triagly-modal-radius, 12px);
+      }
+
+      .triagly-branding {
+        font-size: 12px;
+        color: var(--triagly-footer-text, #6b7280);
+        text-decoration: none;
+        transition: color 0.2s;
+      }
+
+      .triagly-branding:hover {
+        color: var(--triagly-footer-text-hover, #18181b);
+      }
+
+      .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);
     }
@@ -818,10 +1981,14 @@ class FeedbackWidget {
 }
 
 // API Client
-const DEFAULT_API_URL = 'https://bssghvinezdawvupcyci.supabase.co/functions/v1';
+const API_URLS = {
+    production: 'https://iipkklhhafrjesryscjh.supabase.co/functions/v1',
+    staging: 'https://bssghvinezdawvupcyci.supabase.co/functions/v1',
+};
 class TriaglyAPI {
-    constructor(publishableKey, apiUrl, getToken, turnstileSiteKey) {
-        this.apiUrl = (apiUrl || DEFAULT_API_URL).replace(/\/$/, ''); // Remove trailing slash
+    constructor(publishableKey, environment = 'production', apiUrl, getToken, turnstileSiteKey) {
+        // apiUrl override takes precedence, then environment-based URL
+        this.apiUrl = (apiUrl || API_URLS[environment]).replace(/\/$/, ''); // Remove trailing slash
         this.publishableKey = publishableKey;
         this.getToken = getToken;
         // Always use Triagly's Turnstile site key (can be overridden for testing)
@@ -859,7 +2026,7 @@ class TriaglyAPI {
                 }
             }
             catch (error) {
-                console.warn('Failed to get Turnstile token:', error);
+                console.warn('Failed to get Turnstile token:', error instanceof Error ? error.message : 'Unknown error');
             }
         }
         return null;
@@ -883,7 +2050,7 @@ class TriaglyAPI {
                 hardenedToken = await this.getToken();
             }
             catch (error) {
-                console.error('Failed to get hardened token:', error);
+                console.error('Failed to get hardened token:', error instanceof Error ? error.message : 'Unknown error');
                 throw new Error('Failed to authenticate. Please try again.');
             }
         }
@@ -896,9 +2063,9 @@ class TriaglyAPI {
                 consoleLogs: data.consoleLogs,
             },
             tags: data.tags,
-            screenshot: data.screenshot,
             reporterEmail: data.reporterEmail,
             reporterName: data.reporterName,
+            screenshot: data.screenshot,
             turnstileToken,
             hardenedToken,
         };
@@ -983,34 +2150,6 @@ function detectBrowser() {
     }
     return browser;
 }
-/**
- * Capture screenshot of current page
- */
-async function captureScreenshot() {
-    try {
-        // Use html2canvas library if available
-        if (typeof window.html2canvas !== 'undefined') {
-            const canvas = await window.html2canvas(document.body, {
-                logging: false,
-                useCORS: true,
-                allowTaint: true,
-            });
-            return canvas.toDataURL('image/png');
-        }
-        // Fallback to native screenshot API if supported (limited browser support)
-        if ('mediaDevices' in navigator && 'getDisplayMedia' in navigator.mediaDevices) {
-            // This requires user interaction and shows a permission dialog
-            // Not ideal for automatic screenshots
-            console.warn('Screenshot capture requires html2canvas library');
-            return null;
-        }
-        return null;
-    }
-    catch (error) {
-        console.error('Screenshot capture failed:', error);
-        return null;
-    }
-}
 /**
  * Simple rate limiter using localStorage
  */
@@ -1063,7 +2202,7 @@ class RateLimiter {
             localStorage.setItem(this.key, JSON.stringify(data));
         }
         catch (error) {
-            console.error('Failed to store rate limit data:', error);
+            console.error('Failed to store rate limit data:', error instanceof Error ? error.message : 'Unknown error');
         }
     }
 }
@@ -1168,7 +2307,7 @@ class ConsoleLogger {
         }
         catch (error) {
             // Don't let logging break the app
-            this.originalConsole.error('Failed to capture log:', error);
+            this.originalConsole.error('Failed to capture log:', error instanceof Error ? error.message : 'Unknown error');
         }
     }
     /**
@@ -1231,7 +2370,7 @@ class Triagly {
             theme: 'auto',
             position: 'bottom-right',
             buttonShape: 'rounded',
-            buttonText: '🐛 Feedback',
+            buttonText: 'Feedback',
             placeholderText: 'Describe what happened...',
             successMessage: 'Feedback sent successfully!',
             errorMessage: 'Failed to send feedback. Please try again.',
@@ -1242,7 +2381,7 @@ class Triagly {
             apiKey,
             publishableKey: apiKey, // Keep for backward compatibility
         };
-        this.api = new TriaglyAPI(apiKey, this.config.apiUrl, this.config.getToken, this.config.turnstileSiteKey);
+        this.api = new TriaglyAPI(apiKey, this.config.environment || 'production', this.config.apiUrl, this.config.getToken, this.config.turnstileSiteKey);
         // Always pass Turnstile site key to widget (from API which has default)
         this.config.turnstileSiteKey = this.api.getTurnstileSiteKey();
         this.widget = new FeedbackWidget(this.config);
@@ -1286,18 +2425,13 @@ class Triagly {
             }
             // Collect metadata
             const metadata = collectMetadata(this.config.metadata);
-            // Capture screenshot if requested
-            let screenshot = null;
-            if (data.includeScreenshot) {
-                screenshot = await captureScreenshot();
-            }
             // Prepare feedback data
             const feedbackData = {
                 title: data.title,
                 description: data.description,
                 reporterEmail: data.reporterEmail,
-                screenshot: screenshot || undefined,
                 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);
@@ -1311,10 +2445,9 @@ class Triagly {
             if (this.config.onSuccess) {
                 this.config.onSuccess(response.id);
             }
-            console.log('Feedback submitted successfully:', response.id);
         }
         catch (error) {
-            console.error('Failed to submit feedback:', error);
+            console.error('Failed to submit feedback:', error instanceof Error ? error.message : 'Unknown error');
             // Dispatch error event for UI layer
             document.dispatchEvent(new CustomEvent('triagly:error', {
                 detail: error