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

package/dist/index.js

@@ -4,160 +4,6 @@
     (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 {
@@ -195,6 +41,8 @@
             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();
         }
@@ -320,10 +168,10 @@
             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');
@@ -352,34 +200,16 @@
                     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');
@@ -399,6 +229,43 @@
             // 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
          */
@@ -630,7 +497,9 @@
          * Close the editor
          */
         close(cancelled) {
+            // Clean up event listeners
             document.removeEventListener('keydown', this.handleKeyDown);
+            this.removeCanvasEventListeners();
             if (cancelled) {
                 this.onCancel();
             }
@@ -760,7 +629,7 @@
         left: 0;
         right: 0;
         bottom: 0;
-        z-index: 999999;
+        z-index: 2000000;
         background: rgba(0, 0, 0, 0.9);
         display: flex;
         flex-direction: column;
@@ -959,26 +828,66 @@
             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
@@ -1001,6 +910,9 @@
             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}`);
@@ -1186,16 +1098,18 @@
       ${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">
@@ -1207,6 +1121,13 @@
               </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"/>
@@ -1300,31 +1221,59 @@
             }
         }
         /**
-         * 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)
@@ -1334,20 +1283,37 @@
                     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', () => {
@@ -1480,6 +1446,24 @@
         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;
       }
@@ -1579,8 +1563,8 @@
         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;
@@ -1700,6 +1684,7 @@
       .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);
       }
@@ -1815,7 +1800,7 @@
         gap: 8px;
       }
 
-      .triagly-btn-capture {
+      .triagly-btn-upload {
         display: inline-flex;
         align-items: center;
         gap: 8px;
@@ -1832,14 +1817,23 @@
         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 {
@@ -1980,6 +1974,16 @@
                     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();
@@ -1997,11 +2001,11 @@
             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)
-            this.turnstileSiteKey = turnstileSiteKey || TriaglyAPI.DEFAULT_TURNSTILE_SITE_KEY;
+            // Only enable Turnstile when explicitly configured
+            this.turnstileSiteKey = turnstileSiteKey;
         }
         /**
-         * Get the Turnstile site key
+         * Get the Turnstile site key (undefined if not configured)
          */
         getTurnstileSiteKey() {
             return this.turnstileSiteKey;
@@ -2113,8 +2117,6 @@
             return await response.json();
         }
     }
-    // Triagly's public Turnstile site key (safe to hardcode - client-side only)
-    TriaglyAPI.DEFAULT_TURNSTILE_SITE_KEY = '0x4AAAAAAB8Dc-Fl964Vp1Nn';
 
     // Utility functions
     /**
@@ -2388,8 +2390,6 @@
                 publishableKey: apiKey, // Keep for backward compatibility
             };
             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);
             this.rateLimiter = new RateLimiter(apiKey, 3, 5 * 60 * 1000);
             // Initialize console logger if enabled