@triagly/sdk 1.4.0-beta.2 → 1.4.0-beta.3

package/dist/annotation.d.ts

@@ -35,9 +35,17 @@ export declare class AnnotationEditor {
      */
     private setupCanvas;
     /**
-     * Set up event listeners
+     * Set up UI event listeners (buttons, color picker, etc.)
      */
     private setupEventListeners;
+    /**
+     * Set up canvas drawing event listeners
+     */
+    private setupCanvasEventListeners;
+    /**
+     * Remove canvas drawing event listeners
+     */
+    private removeCanvasEventListeners;
     private handleKeyDown;
     /**
      * Get canvas coordinates from mouse event

package/dist/annotation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"annotation.d.ts","sourceRoot":"","sources":["../src/annotation.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC;AAezE,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,GAAG,CAAyC;IACpD,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,KAAK,CAAiC;IAC9C,OAAO,CAAC,WAAW,CAAoB;IACvC,OAAO,CAAC,WAAW,CAA+B;IAClD,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,iBAAiB,CAA2B;IACpD,OAAO,CAAC,UAAU,CAAmC;IACrD,OAAO,CAAC,QAAQ,CAAa;IAC7B,OAAO,CAAC,KAAK,CAAa;IAC1B,OAAO,CAAC,OAAO,CAAa;IAC5B,OAAO,CAAC,OAAO,CAAa;IAC5B,OAAO,CAAC,gBAAgB,CAAsB;gBAG5C,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,EAC5C,QAAQ,EAAE,MAAM,IAAI;IAOtB;;OAEG;IACG,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IAc3B;;OAEG;IACH,OAAO,CAAC,SAAS;IASjB;;OAEG;IACH,OAAO,CAAC,aAAa;IAuErB;;OAEG;IACH,OAAO,CAAC,WAAW;IA4CnB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAsF3B,OAAO,CAAC,aAAa,CAInB;IAEF;;OAEG;IACH,OAAO,CAAC,cAAc;IAUtB;;OAEG;IACH,OAAO,CAAC,eAAe;IAoBvB;;OAEG;IACH,OAAO,CAAC,aAAa;IAWrB;;OAEG;IACH,OAAO,CAAC,aAAa;IASrB;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAiB7B;;OAEG;IACH,OAAO,CAAC,eAAe;IAoBvB;;OAEG;IACH,OAAO,CAAC,aAAa;IASrB;;OAEG;IACH,OAAO,CAAC,MAAM;IAoBd;;OAEG;IACH,OAAO,CAAC,cAAc;IAyBtB;;OAEG;IACH,OAAO,CAAC,aAAa;IAgBrB;;OAEG;IACH,OAAO,CAAC,SAAS;IA4BjB;;OAEG;IACH,OAAO,CAAC,YAAY;IAapB;;OAEG;IACH,OAAO,CAAC,QAAQ;IA2BhB;;OAEG;IACH,OAAO,CAAC,KAAK;IAkBb;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAoDxB,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,aAAa;IAcrB;;OAEG;IACH,OAAO,CAAC,YAAY;CA2MrB"}
+{"version":3,"file":"annotation.d.ts","sourceRoot":"","sources":["../src/annotation.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC;AAezE,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,GAAG,CAAyC;IACpD,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,KAAK,CAAiC;IAC9C,OAAO,CAAC,WAAW,CAAoB;IACvC,OAAO,CAAC,WAAW,CAA+B;IAClD,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,iBAAiB,CAA2B;IACpD,OAAO,CAAC,UAAU,CAAmC;IACrD,OAAO,CAAC,QAAQ,CAAa;IAC7B,OAAO,CAAC,KAAK,CAAa;IAC1B,OAAO,CAAC,OAAO,CAAa;IAC5B,OAAO,CAAC,OAAO,CAAa;IAC5B,OAAO,CAAC,gBAAgB,CAAsB;gBAG5C,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,EAC5C,QAAQ,EAAE,MAAM,IAAI;IAOtB;;OAEG;IACG,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IAiB3B;;OAEG;IACH,OAAO,CAAC,SAAS;IASjB;;OAEG;IACH,OAAO,CAAC,aAAa;IAuErB;;OAEG;IACH,OAAO,CAAC,WAAW;IA4CnB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAkE3B;;OAEG;IACH,OAAO,CAAC,yBAAyB;IAwBjC;;OAEG;IACH,OAAO,CAAC,0BAA0B;IAUlC,OAAO,CAAC,aAAa,CAInB;IAEF;;OAEG;IACH,OAAO,CAAC,cAAc;IAUtB;;OAEG;IACH,OAAO,CAAC,eAAe;IAoBvB;;OAEG;IACH,OAAO,CAAC,aAAa;IAWrB;;OAEG;IACH,OAAO,CAAC,aAAa;IASrB;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAiB7B;;OAEG;IACH,OAAO,CAAC,eAAe;IAoBvB;;OAEG;IACH,OAAO,CAAC,aAAa;IASrB;;OAEG;IACH,OAAO,CAAC,MAAM;IAoBd;;OAEG;IACH,OAAO,CAAC,cAAc;IAyBtB;;OAEG;IACH,OAAO,CAAC,aAAa;IAgBrB;;OAEG;IACH,OAAO,CAAC,SAAS;IA4BjB;;OAEG;IACH,OAAO,CAAC,YAAY;IAapB;;OAEG;IACH,OAAO,CAAC,QAAQ;IA2BhB;;OAEG;IACH,OAAO,CAAC,KAAK;IAoBb;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAoDxB,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,aAAa;IAcrB;;OAEG;IACH,OAAO,CAAC,YAAY;CA2MrB"}

package/dist/index.esm.js

@@ -1,157 +1,3 @@
-// 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 {
@@ -189,6 +35,8 @@ class AnnotationEditor {
         this.createOverlay();
         // Set up the canvas
         this.setupCanvas();
+        // Set up canvas drawing event listeners (must be after setupCanvas)
+        this.setupCanvasEventListeners();
         // Draw the image
         this.render();
     }
@@ -314,10 +162,10 @@ class AnnotationEditor {
         this.offsetY = (containerRect.height - canvasHeight) / 2;
     }
     /**
-     * Set up event listeners
+     * Set up UI event listeners (buttons, color picker, etc.)
      */
     setupEventListeners() {
-        if (!this.overlay || !this.canvas)
+        if (!this.overlay)
             return;
         // Tool selection
         const toolBtns = this.overlay.querySelectorAll('.triagly-tool-btn');
@@ -346,34 +194,16 @@ class AnnotationEditor {
                 this.render();
             });
         }
-        // Cancel button
-        const cancelBtn = this.overlay.querySelector('.triagly-btn-cancel');
-        if (cancelBtn) {
-            cancelBtn.addEventListener('click', () => this.close(true));
+        // Cancel button - use class selector to get the header cancel button only
+        const headerCancelBtn = this.overlay.querySelector('.triagly-annotation-actions .triagly-btn-cancel');
+        if (headerCancelBtn) {
+            headerCancelBtn.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');
@@ -393,6 +223,43 @@ class AnnotationEditor {
         // Escape key to cancel
         document.addEventListener('keydown', this.handleKeyDown);
     }
+    /**
+     * Set up canvas drawing event listeners
+     */
+    setupCanvasEventListeners() {
+        if (!this.canvas)
+            return;
+        // 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 (use passive: false to allow preventDefault)
+        this.canvas.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            const touch = e.touches[0];
+            this.handleMouseDown(touch);
+        }, { passive: false });
+        this.canvas.addEventListener('touchmove', (e) => {
+            e.preventDefault();
+            const touch = e.touches[0];
+            this.handleMouseMove(touch);
+        }, { passive: false });
+        this.canvas.addEventListener('touchend', () => this.handleMouseUp());
+        this.canvas.addEventListener('touchcancel', () => this.handleMouseUp());
+    }
+    /**
+     * Remove canvas drawing event listeners
+     */
+    removeCanvasEventListeners() {
+        if (!this.canvas)
+            return;
+        // Remove all canvas event listeners to prevent memory leaks
+        // Note: We can't remove the exact listeners since they're arrow functions,
+        // but removing the overlay (which contains the canvas) will clean them up
+        this.canvas = null;
+        this.ctx = null;
+    }
     /**
      * Get canvas coordinates from mouse event
      */
@@ -624,7 +491,9 @@ class AnnotationEditor {
      * Close the editor
      */
     close(cancelled) {
+        // Clean up event listeners
         document.removeEventListener('keydown', this.handleKeyDown);
+        this.removeCanvasEventListeners();
         if (cancelled) {
             this.onCancel();
         }
@@ -754,7 +623,7 @@ class AnnotationEditor {
         left: 0;
         right: 0;
         bottom: 0;
-        z-index: 999999;
+        z-index: 2000000;
         background: rgba(0, 0, 0, 0.9);
         display: flex;
         flex-direction: column;
@@ -953,26 +822,66 @@ class FeedbackWidget {
         this.previouslyFocusedElement = null;
         this.focusableElements = [];
         this.screenshotDataUrl = null;
-        this.screenshotCapture = null;
+        this.themeMediaQuery = null;
+        /**
+         * Update button theme based on current resolved theme
+         */
+        this.updateButtonTheme = () => {
+            const button = document.getElementById('triagly-button');
+            if (!button)
+                return;
+            const newTheme = this.getResolvedTheme();
+            // Remove old theme class and add new one
+            button.classList.remove('triagly-theme-light', 'triagly-theme-dark');
+            button.classList.add(`triagly-theme-${newTheme}`);
+        };
         this.config = config;
     }
+    /**
+     * Get the resolved theme (resolves 'auto' to actual theme)
+     */
+    getResolvedTheme() {
+        const theme = this.config.theme || 'auto';
+        if (theme === 'auto') {
+            // Check system preference
+            if (typeof window !== 'undefined' && window.matchMedia) {
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            }
+            return 'light';
+        }
+        return theme;
+    }
+    /**
+     * Setup listener for system theme changes (when using 'auto' theme)
+     */
+    setupThemeListener() {
+        // Only setup listener if theme is 'auto'
+        const theme = this.config.theme || 'auto';
+        if (theme !== 'auto') {
+            return;
+        }
+        if (typeof window !== 'undefined' && window.matchMedia) {
+            this.themeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+            // Use addListener for older browsers, addEventListener for modern ones
+            if (this.themeMediaQuery.addEventListener) {
+                this.themeMediaQuery.addEventListener('change', this.updateButtonTheme);
+            }
+            else if (this.themeMediaQuery.addListener) {
+                this.themeMediaQuery.addListener(this.updateButtonTheme);
+            }
+        }
+    }
     /**
      * Initialize the widget
      */
     init() {
         this.createButton();
         this.injectStyles();
+        this.setupThemeListener();
         // Load Turnstile script if configured
         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
@@ -995,6 +904,9 @@ class FeedbackWidget {
         const button = document.createElement('button');
         button.id = 'triagly-button';
         button.className = 'triagly-button';
+        // Apply theme class
+        const theme = this.getResolvedTheme();
+        button.classList.add(`triagly-theme-${theme}`);
         // Button shape
         const shape = this.config.buttonShape || 'rounded';
         button.classList.add(`triagly-shape-${shape}`);
@@ -1180,16 +1092,18 @@ class FeedbackWidget {
       ${this.config.enableScreenshot ? `
       <div class="triagly-field triagly-screenshot-field">
         <label>Screenshot (optional)</label>
+        <input type="file" id="triagly-screenshot-input" accept="image/*" style="display: none;" />
         <div class="triagly-screenshot-controls" id="triagly-screenshot-controls">
-          <button type="button" class="triagly-btn-capture" id="triagly-capture-btn">
+          <button type="button" class="triagly-btn-upload" id="triagly-upload-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"/>
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+              <polyline points="17 8 12 3 7 8"/>
+              <line x1="12" y1="3" x2="12" y2="15"/>
             </svg>
-            ${this.config.screenshotButtonText || 'Capture Screenshot'}
+            ${this.config.screenshotButtonText || 'Upload Screenshot'}
           </button>
         </div>
+        <div class="triagly-screenshot-error" id="triagly-screenshot-error" style="display: none;" role="alert"></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">
@@ -1201,6 +1115,13 @@ class FeedbackWidget {
               </svg>
             </button>
             ` : ''}
+            <button type="button" class="triagly-btn-icon" id="triagly-change-screenshot-btn" title="Upload different screenshot">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                <polyline points="17 8 12 3 7 8"/>
+                <line x1="12" y1="3" x2="12" y2="15"/>
+              </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"/>
@@ -1294,31 +1215,59 @@ class FeedbackWidget {
         }
     }
     /**
-     * Set up screenshot capture event handlers
+     * Set up screenshot upload event handlers
      */
     setupScreenshotHandlers(form) {
-        const captureBtn = form.querySelector('#triagly-capture-btn');
+        const fileInput = form.querySelector('#triagly-screenshot-input');
+        const uploadBtn = form.querySelector('#triagly-upload-btn');
         const annotateBtn = form.querySelector('#triagly-annotate-btn');
+        const changeBtn = form.querySelector('#triagly-change-screenshot-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)
+        const errorDiv = form.querySelector('#triagly-screenshot-error');
+        // Helper to show error message
+        const showError = (message) => {
+            if (errorDiv) {
+                errorDiv.textContent = message;
+                errorDiv.style.display = 'block';
+            }
+        };
+        // Helper to hide error message
+        const hideError = () => {
+            if (errorDiv) {
+                errorDiv.textContent = '';
+                errorDiv.style.display = 'none';
+            }
+        };
+        // Handle file selection
+        const handleFileSelect = (file) => {
+            // Clear any previous error
+            hideError();
+            // Validate file type
+            if (!file.type.startsWith('image/')) {
+                const errorMessage = 'Invalid file type. Please select an image.';
+                showError(errorMessage);
+                if (this.config.onScreenshotError) {
+                    this.config.onScreenshotError(new Error(errorMessage));
+                }
                 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();
+            }
+            // Validate file size (configurable, default 10MB)
+            const maxSize = this.config.screenshotMaxFileSize ?? 10 * 1024 * 1024;
+            if (file.size > maxSize) {
+                const maxSizeMB = Math.round(maxSize / (1024 * 1024));
+                const errorMessage = `File too large. Maximum size is ${maxSizeMB}MB.`;
+                showError(errorMessage);
+                if (this.config.onScreenshotError) {
+                    this.config.onScreenshotError(new Error(errorMessage));
+                }
+                return;
+            }
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const dataUrl = e.target?.result;
                 this.screenshotDataUrl = dataUrl;
                 // Update UI
                 if (previewImg)
@@ -1328,20 +1277,37 @@ class FeedbackWidget {
                 if (controls)
                     controls.style.display = 'none';
                 // Call callback if provided
-                if (this.config.onScreenshotCapture) {
-                    this.config.onScreenshotCapture(dataUrl);
+                if (this.config.onScreenshotUpload) {
+                    this.config.onScreenshotUpload(dataUrl);
                 }
-            }
-            catch (error) {
-                console.error('Triagly: Screenshot capture failed:', error);
+            };
+            reader.onerror = () => {
+                const errorMessage = 'Failed to read file. Please try again.';
+                showError(errorMessage);
                 if (this.config.onScreenshotError) {
-                    this.config.onScreenshotError(error instanceof Error ? error : new Error(String(error)));
+                    this.config.onScreenshotError(new Error(errorMessage));
                 }
+            };
+            reader.readAsDataURL(file);
+        };
+        // File input change handler
+        fileInput?.addEventListener('change', () => {
+            const file = fileInput.files?.[0];
+            if (file) {
+                handleFileSelect(file);
             }
-            finally {
-                btn.disabled = false;
-                btn.innerHTML = originalText;
-            }
+            // Reset input so same file can be selected again
+            fileInput.value = '';
+        });
+        // Upload button triggers file input
+        uploadBtn?.addEventListener('click', () => {
+            hideError();
+            fileInput?.click();
+        });
+        // Change screenshot - trigger file input again
+        changeBtn?.addEventListener('click', () => {
+            hideError();
+            fileInput?.click();
         });
         // Annotate screenshot
         annotateBtn?.addEventListener('click', () => {
@@ -1474,6 +1440,24 @@ class FeedbackWidget {
         box-shadow: var(--triagly-button-shadow-hover, 0 6px 16px rgba(0, 0, 0, 0.2));
       }
 
+      /* Dark theme: white button with black text */
+      .triagly-button.triagly-theme-dark {
+        --triagly-button-bg: #ffffff;
+        --triagly-button-text: #18181b;
+        --triagly-button-bg-hover: #f4f4f5;
+        --triagly-button-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+        --triagly-button-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.35);
+      }
+
+      /* Light theme: dark button with white text (default) */
+      .triagly-button.triagly-theme-light {
+        --triagly-button-bg: #18181b;
+        --triagly-button-text: #ffffff;
+        --triagly-button-bg-hover: #27272a;
+        --triagly-button-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        --triagly-button-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.2);
+      }
+
       .triagly-button .triagly-icon {
         flex-shrink: 0;
       }
@@ -1573,8 +1557,8 @@ class FeedbackWidget {
         min-width: auto;
         padding: 12px 20px;
         border-radius: 30px;
-        background: var(--triagly-button-bg-hover, #27272a);
-        box-shadow: var(--triagly-button-shadow-hover, 0 6px 16px rgba(0, 0, 0, 0.2));
+        background: var(--triagly-button-bg-hover);
+        box-shadow: var(--triagly-button-shadow-hover);
       }
       .triagly-shape-expandable:hover .triagly-btn-text {
         width: auto;
@@ -1694,6 +1678,7 @@ class FeedbackWidget {
       .triagly-field input:focus,
       .triagly-field textarea:focus {
         outline: none;
+        background: var(--triagly-input-bg, #ffffff);
         border-color: var(--triagly-input-border-focus, #a1a1aa);
         box-shadow: 0 0 0 2px rgba(161, 161, 170, 0.15);
       }
@@ -1809,7 +1794,7 @@ class FeedbackWidget {
         gap: 8px;
       }
 
-      .triagly-btn-capture {
+      .triagly-btn-upload {
         display: inline-flex;
         align-items: center;
         gap: 8px;
@@ -1826,14 +1811,23 @@ class FeedbackWidget {
         justify-content: center;
       }
 
-      .triagly-btn-capture:hover:not(:disabled) {
+      .triagly-btn-upload:hover:not(:disabled) {
         background: var(--triagly-btn-secondary-bg-hover, #e5e7eb);
         border-style: solid;
       }
 
-      .triagly-btn-capture:disabled {
+      .triagly-btn-upload:disabled {
         opacity: 0.7;
-        cursor: wait;
+        cursor: not-allowed;
+      }
+
+      .triagly-screenshot-error {
+        margin-top: 8px;
+        padding: 8px 12px;
+        background: var(--triagly-error-bg, #fee2e2);
+        color: var(--triagly-error-text, #991b1b);
+        border-radius: var(--triagly-input-radius, 6px);
+        font-size: 13px;
       }
 
       .triagly-screenshot-preview {
@@ -1974,6 +1968,16 @@ class FeedbackWidget {
                 document.removeEventListener('keydown', tabHandler, true);
             }
         }
+        // Clean up theme listener
+        if (this.themeMediaQuery) {
+            if (this.themeMediaQuery.removeEventListener) {
+                this.themeMediaQuery.removeEventListener('change', this.updateButtonTheme);
+            }
+            else if (this.themeMediaQuery.removeListener) {
+                this.themeMediaQuery.removeListener(this.updateButtonTheme);
+            }
+            this.themeMediaQuery = null;
+        }
         this.close();
         document.getElementById('triagly-button')?.remove();
         document.getElementById('triagly-styles')?.remove();