@uxbertlabs/reportly 1.0.5 → 1.0.7

package/dist/reportly.js

@@ -83,6 +83,7 @@ var Reportly = (function () {
             this.screenshot = null;
             this.annotations = [];
             this.listeners = {};
+            this.captureMode = 'viewport';
         }
         setState(newState) {
             this.currentState = newState;
@@ -112,11 +113,18 @@ var Reportly = (function () {
         clearAnnotations() {
             this.annotations = [];
         }
+        setCaptureMode(mode) {
+            this.captureMode = mode;
+        }
+        getCaptureMode() {
+            return this.captureMode;
+        }
         reset() {
             this.currentState = STATE.IDLE;
             this.currentIssue = null;
             this.screenshot = null;
             this.annotations = [];
+            this.captureMode = 'viewport';
         }
         // Event system
         on(event, callback) {
@@ -190,6 +198,20 @@ var Reportly = (function () {
       </div>
 
       <form class="uxbert-form" id="uxbert-issue-form">
+        <div class="uxbert-form-group">
+          <label class="uxbert-form-label">Capture Mode</label>
+          <div class="uxbert-capture-mode">
+            <label class="uxbert-radio-label">
+              <input type="radio" name="capture-mode" value="viewport" id="uxbert-capture-viewport" checked />
+              <span>Current View</span>
+            </label>
+            <label class="uxbert-radio-label">
+              <input type="radio" name="capture-mode" value="fullpage" id="uxbert-capture-fullpage" />
+              <span>Full Page</span>
+            </label>
+          </div>
+        </div>
+
         <div class="uxbert-form-group">
           <label class="uxbert-form-label" for="uxbert-title">Issue Title *</label>
           <input
@@ -220,6 +242,12 @@ var Reportly = (function () {
           </select>
         </div>
 
+        <div class="uxbert-capture-action" id="uxbert-capture-action">
+          <button type="button" class="uxbert-btn uxbert-btn-primary" id="uxbert-capture-btn">
+            📸 Take Screenshot
+          </button>
+        </div>
+
         <div class="uxbert-screenshot-preview" id="uxbert-screenshot-container" style="display: none;">
           <img id="uxbert-screenshot-img" src="" alt="Screenshot" />
           <div class="uxbert-screenshot-actions">
@@ -236,7 +264,7 @@ var Reportly = (function () {
           <button type="button" class="uxbert-btn uxbert-btn-secondary" id="uxbert-cancel-btn">
             Cancel
           </button>
-          <button type="submit" class="uxbert-btn uxbert-btn-primary">
+          <button type="submit" class="uxbert-btn uxbert-btn-primary" id="uxbert-submit-btn">
             📥 Download JSON
           </button>
         </div>
@@ -269,6 +297,13 @@ var Reportly = (function () {
                 e.preventDefault();
                 this.handleSubmit();
             });
+            // Capture button
+            const captureBtn = this.modal.querySelector('#uxbert-capture-btn');
+            captureBtn.addEventListener('click', () => {
+                if (this.callbacks.onCapture) {
+                    this.callbacks.onCapture();
+                }
+            });
             // Annotate button
             const annotateBtn = this.modal.querySelector('#uxbert-annotate-btn');
             annotateBtn.addEventListener('click', () => {
@@ -321,14 +356,26 @@ var Reportly = (function () {
                 return;
             const container = this.modal.querySelector('#uxbert-screenshot-container');
             const img = this.modal.querySelector('#uxbert-screenshot-img');
+            const captureAction = this.modal.querySelector('#uxbert-capture-action');
+            const submitBtn = this.modal.querySelector('#uxbert-submit-btn');
             if (screenshot) {
                 img.src = screenshot;
                 container.style.display = 'block';
+                captureAction.style.display = 'none';
+                submitBtn.disabled = false;
             }
             else {
                 container.style.display = 'none';
+                captureAction.style.display = 'block';
+                submitBtn.disabled = true;
             }
         }
+        getCaptureMode() {
+            if (!this.modal)
+                return 'viewport';
+            const viewportRadio = this.modal.querySelector('#uxbert-capture-viewport');
+            return viewportRadio.checked ? 'viewport' : 'fullpage';
+        }
         reset() {
             if (!this.modal)
                 return;
@@ -9403,26 +9450,87 @@ var Reportly = (function () {
         constructor() {
             this.currentScreenshot = null;
         }
-        async capture() {
+        async capture(mode = 'fullpage') {
             try {
                 // Hide UXbert UI elements before capturing
                 this.hideUXbertElements();
-                // Scroll to top to capture full page
                 const originalScrollY = window.scrollY;
-                window.scrollTo(0, 0);
-                // Get full page dimensions
-                const fullPageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
-                const fullPageWidth = Math.max(document.body.scrollWidth, document.body.offsetWidth, document.documentElement.clientWidth, document.documentElement.scrollWidth, document.documentElement.offsetWidth);
-                // Capture the full page
-                const canvas = await html2canvas(document.body, {
-                    allowTaint: true,
-                    useCORS: true,
-                    logging: false,
-                    width: fullPageWidth,
-                    height: fullPageHeight,
-                });
-                // Restore scroll position
-                window.scrollTo(0, originalScrollY);
+                let canvas;
+                if (mode === 'viewport') {
+                    // Capture only the current viewport
+                    canvas = await html2canvas(document.body, {
+                        useCORS: true,
+                        allowTaint: false,
+                        logging: false,
+                        width: window.innerWidth,
+                        height: window.innerHeight,
+                        windowWidth: window.innerWidth,
+                        windowHeight: window.innerHeight,
+                        x: window.scrollX,
+                        y: window.scrollY,
+                        ignoreElements: (element) => {
+                            // Skip cross-origin images that might cause issues
+                            if (element.tagName === 'IMG') {
+                                const img = element;
+                                try {
+                                    // Test if image is accessible
+                                    const canvas = document.createElement('canvas');
+                                    const ctx = canvas.getContext('2d');
+                                    canvas.width = 1;
+                                    canvas.height = 1;
+                                    ctx?.drawImage(img, 0, 0, 1, 1);
+                                    canvas.toDataURL(); // This will throw if tainted
+                                    return false; // Include the image
+                                }
+                                catch (e) {
+                                    // Image is tainted, skip it
+                                    console.warn('Skipping cross-origin image:', img.src);
+                                    return true;
+                                }
+                            }
+                            return false;
+                        },
+                    });
+                }
+                else {
+                    // Scroll to top to capture full page
+                    window.scrollTo(0, 0);
+                    // Get full page dimensions
+                    const fullPageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
+                    const fullPageWidth = Math.max(document.body.scrollWidth, document.body.offsetWidth, document.documentElement.clientWidth, document.documentElement.scrollWidth, document.documentElement.offsetWidth);
+                    // Capture the full page
+                    canvas = await html2canvas(document.body, {
+                        useCORS: true,
+                        allowTaint: false,
+                        logging: false,
+                        width: fullPageWidth,
+                        height: fullPageHeight,
+                        ignoreElements: (element) => {
+                            // Skip cross-origin images that might cause issues
+                            if (element.tagName === 'IMG') {
+                                const img = element;
+                                try {
+                                    // Test if image is accessible
+                                    const canvas = document.createElement('canvas');
+                                    const ctx = canvas.getContext('2d');
+                                    canvas.width = 1;
+                                    canvas.height = 1;
+                                    ctx?.drawImage(img, 0, 0, 1, 1);
+                                    canvas.toDataURL(); // This will throw if tainted
+                                    return false; // Include the image
+                                }
+                                catch (e) {
+                                    // Image is tainted, skip it
+                                    console.warn('Skipping cross-origin image:', img.src);
+                                    return true;
+                                }
+                            }
+                            return false;
+                        },
+                    });
+                    // Restore scroll position
+                    window.scrollTo(0, originalScrollY);
+                }
                 // Show UXbert UI elements again
                 this.showUXbertElements();
                 // Convert to base64
@@ -9498,29 +9606,46 @@ var Reportly = (function () {
             document.body.appendChild(this.canvas);
             return this.canvas;
         }
-        updateCanvasSize() {
+        updateCanvasSize(mode = 'fullpage') {
             if (!this.canvas)
                 return;
-            // Get full page dimensions
-            const fullPageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
-            const fullPageWidth = Math.max(document.body.scrollWidth, document.body.offsetWidth, document.documentElement.clientWidth, document.documentElement.scrollWidth, document.documentElement.offsetWidth);
-            this.canvas.width = fullPageWidth;
-            this.canvas.height = fullPageHeight;
+            if (mode === 'viewport') {
+                // Set canvas to viewport dimensions
+                this.canvas.width = window.innerWidth;
+                this.canvas.height = window.innerHeight;
+            }
+            else {
+                // Get full page dimensions
+                const fullPageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
+                const fullPageWidth = Math.max(document.body.scrollWidth, document.body.offsetWidth, document.documentElement.clientWidth, document.documentElement.scrollWidth, document.documentElement.offsetWidth);
+                this.canvas.width = fullPageWidth;
+                this.canvas.height = fullPageHeight;
+            }
         }
-        show() {
+        show(mode = 'fullpage') {
             if (this.canvas && this.ctx) {
                 // Update canvas size to match current page dimensions
-                this.updateCanvasSize();
+                this.updateCanvasSize(mode);
                 // Reset context properties after resize
                 this.ctx.lineCap = 'round';
                 this.ctx.lineJoin = 'round';
                 this.canvas.classList.add('active');
+                // If viewport mode, add viewport-mode class
+                if (mode === 'viewport') {
+                    this.canvas.classList.add('viewport-mode');
+                    // Note: We don't disable scrolling in viewport mode to allow users to scroll
+                    // and annotate different parts of the viewport
+                }
+                else {
+                    this.canvas.classList.remove('viewport-mode');
+                }
                 this.redraw();
             }
         }
         hide() {
             if (this.canvas) {
                 this.canvas.classList.remove('active');
+                this.canvas.classList.remove('viewport-mode');
             }
             // Clean up any active text input
             this.removeTextInput();
@@ -9533,10 +9658,13 @@ var Reportly = (function () {
             this.currentColor = color;
         }
         handleMouseDown(e) {
+            const isViewportMode = this.canvas?.classList.contains('viewport-mode');
+            const scrollOffsetX = isViewportMode ? 0 : window.scrollX;
+            const scrollOffsetY = isViewportMode ? 0 : window.scrollY;
             // Handle text tool separately
             if (this.currentTool === 'text') {
-                const x = e.clientX + window.scrollX;
-                const y = e.clientY + window.scrollY;
+                const x = e.clientX + scrollOffsetX;
+                const y = e.clientY + scrollOffsetY;
                 // Check if clicking on existing text to edit
                 const clickedText = this.getTextAnnotationAt(x, y);
                 if (clickedText) {
@@ -9548,15 +9676,18 @@ var Reportly = (function () {
                 return;
             }
             this.isDrawing = true;
-            this.startX = e.clientX + window.scrollX;
-            this.startY = e.clientY + window.scrollY;
+            this.startX = e.clientX + scrollOffsetX;
+            this.startY = e.clientY + scrollOffsetY;
             this.currentPath = [{ x: this.startX, y: this.startY }];
         }
         handleMouseMove(e) {
             if (!this.isDrawing || !this.ctx)
                 return;
-            const x = e.clientX + window.scrollX;
-            const y = e.clientY + window.scrollY;
+            const isViewportMode = this.canvas?.classList.contains('viewport-mode');
+            const scrollOffsetX = isViewportMode ? 0 : window.scrollX;
+            const scrollOffsetY = isViewportMode ? 0 : window.scrollY;
+            const x = e.clientX + scrollOffsetX;
+            const y = e.clientY + scrollOffsetY;
             if (this.currentTool === 'pen') {
                 this.currentPath.push({ x, y });
                 this.redraw();
@@ -9576,8 +9707,11 @@ var Reportly = (function () {
             if (!this.isDrawing)
                 return;
             this.isDrawing = false;
-            const x = e.clientX + window.scrollX;
-            const y = e.clientY + window.scrollY;
+            const isViewportMode = this.canvas?.classList.contains('viewport-mode');
+            const scrollOffsetX = isViewportMode ? 0 : window.scrollX;
+            const scrollOffsetY = isViewportMode ? 0 : window.scrollY;
+            const x = e.clientX + scrollOffsetX;
+            const y = e.clientY + scrollOffsetY;
             // Save the annotation
             if (this.currentTool === 'pen') {
                 this.annotations.push({
@@ -10050,7 +10184,7 @@ var Reportly = (function () {
       }
     }
 
-    var css_248z = ":root{--uxbert-primary:#4f46e5;--uxbert-primary-hover:#4338ca;--uxbert-danger:#ef4444;--uxbert-success:#10b981;--uxbert-bg:#fff;--uxbert-text:#1f2937;--uxbert-border:#e5e7eb;--uxbert-shadow:0 10px 25px rgba(0,0,0,.1);--uxbert-z-button:999999;--uxbert-z-modal:1000000;--uxbert-z-canvas:1000001;--uxbert-z-toolbar:1000002}[data-theme=dark]{--uxbert-bg:#1f2937;--uxbert-text:#f9fafb;--uxbert-border:#374151}.uxbert-fab{align-items:center;background:var(--uxbert-primary);border:none;border-radius:50%;box-shadow:var(--uxbert-shadow);color:#fff;cursor:pointer;display:flex;font-size:24px;height:56px;justify-content:center;position:fixed;transition:all .3s ease;width:56px;z-index:var(--uxbert-z-button)}.uxbert-fab:hover{background:var(--uxbert-primary-hover);transform:scale(1.1)}.uxbert-fab.bottom-right{bottom:24px;right:24px}.uxbert-fab.bottom-left{bottom:24px;left:24px}.uxbert-fab.top-right{right:24px;top:24px}.uxbert-fab.top-left{left:24px;top:24px}.uxbert-overlay{align-items:center;animation:fadeIn .3s ease;background:rgba(0,0,0,.5);display:none;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:var(--uxbert-z-modal)}.uxbert-overlay.active{display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.uxbert-modal{animation:slideUp .3s ease;background:var(--uxbert-bg);border-radius:12px;box-shadow:var(--uxbert-shadow);color:var(--uxbert-text);max-height:90vh;max-width:600px;overflow-y:auto;padding:24px;width:90%}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.uxbert-modal-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px}.uxbert-modal-title{font-size:20px;font-weight:600;margin:0}.uxbert-modal-close{align-items:center;background:none;border:none;border-radius:4px;color:var(--uxbert-text);cursor:pointer;display:flex;font-size:24px;height:32px;justify-content:center;padding:0;width:32px}.uxbert-modal-close:hover{background:var(--uxbert-border)}.uxbert-form-group{margin-bottom:16px}.uxbert-form-label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}.uxbert-form-input,.uxbert-form-select,.uxbert-form-textarea{background:var(--uxbert-bg);border:1px solid var(--uxbert-border);border-radius:6px;box-sizing:border-box;color:var(--uxbert-text);font-family:inherit;font-size:14px;padding:10px;width:100%}.uxbert-form-textarea{min-height:100px;resize:vertical}.uxbert-form-input:focus,.uxbert-form-select:focus,.uxbert-form-textarea:focus{border-color:var(--uxbert-primary);outline:none}.uxbert-screenshot-preview{border:1px solid var(--uxbert-border);border-radius:8px;margin:16px 0;overflow:hidden}.uxbert-screenshot-preview img{display:block;width:100%}.uxbert-screenshot-actions{background:var(--uxbert-border);display:flex;gap:8px;padding:12px}.uxbert-btn{align-items:center;border:none;border-radius:6px;cursor:pointer;display:inline-flex;font-size:14px;font-weight:500;gap:8px;padding:10px 20px;transition:all .2s ease}.uxbert-btn-primary{background:var(--uxbert-primary);color:#fff}.uxbert-btn-primary:hover{background:var(--uxbert-primary-hover)}.uxbert-btn-secondary{background:var(--uxbert-border);color:var(--uxbert-text)}.uxbert-btn-secondary:hover{background:#d1d5db}.uxbert-btn-danger{background:var(--uxbert-danger);color:#fff}.uxbert-btn-danger:hover{background:#dc2626}.uxbert-modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:20px}.uxbert-toolbar-toggle{align-items:center;background:var(--uxbert-primary);border:none;border-radius:50%;bottom:24px;box-shadow:var(--uxbert-shadow);color:#fff;cursor:pointer;display:none;font-size:24px;height:56px;justify-content:center;position:fixed;right:24px;transition:all .3s ease;width:56px;z-index:var(--uxbert-z-toolbar)}.uxbert-toolbar-toggle.active{display:flex}.uxbert-toolbar-toggle.hidden{opacity:0;pointer-events:none;transform:scale(.8)}.uxbert-toolbar-toggle:hover{background:var(--uxbert-primary-hover);transform:scale(1.1)}.uxbert-toolbar{background:var(--uxbert-bg);border-radius:12px;bottom:24px;box-shadow:var(--uxbert-shadow);display:none;flex-direction:column;gap:8px;max-height:80vh;opacity:0;overflow-y:auto;padding:16px;pointer-events:none;position:fixed;right:24px;transform:translateY(20px);transition:all .3s ease;z-index:var(--uxbert-z-toolbar)}.uxbert-toolbar.active{display:flex}.uxbert-toolbar.expanded{opacity:1;pointer-events:all;transform:translateY(0)}.uxbert-toolbar-header{align-items:center;display:flex;gap:8px;justify-content:space-between;margin-bottom:8px}.uxbert-toolbar-title{flex:1;font-size:14px;font-weight:600}.uxbert-toolbar-exit,.uxbert-toolbar-minimize{align-items:center;background:var(--uxbert-border);border:none;border-radius:6px;color:var(--uxbert-text);cursor:pointer;display:flex;font-size:20px;font-weight:700;height:32px;justify-content:center;transition:all .2s ease;width:32px}.uxbert-toolbar-exit{background:var(--uxbert-danger);color:#fff}.uxbert-toolbar-minimize:hover{background:#d1d5db;transform:scale(1.1)}.uxbert-toolbar-exit:hover{background:#dc2626;transform:scale(1.1)}.uxbert-toolbar-tools{display:flex;flex-wrap:wrap;gap:8px}.uxbert-tool-btn{align-items:center;background:var(--uxbert-bg);border:2px solid var(--uxbert-border);border-radius:6px;cursor:pointer;display:flex;font-family:Arial,sans-serif;font-size:18px;font-weight:700;height:40px;justify-content:center;transition:all .2s ease;width:40px}.uxbert-tool-btn.active,.uxbert-tool-btn:hover{background:var(--uxbert-primary);border-color:var(--uxbert-primary);color:#fff}.uxbert-color-picker{display:flex;gap:6px;margin:8px 0}.uxbert-color-option{border:2px solid var(--uxbert-border);border-radius:50%;cursor:pointer;height:32px;transition:transform .2s ease;width:32px}.uxbert-color-option:hover{transform:scale(1.1)}.uxbert-color-option.active{border:3px solid var(--uxbert-text)}.uxbert-canvas-overlay{cursor:crosshair;display:none;left:0;position:absolute;top:0;z-index:var(--uxbert-z-canvas)}.uxbert-canvas-overlay.active{display:block}.uxbert-text-input{background:hsla(0,0%,100%,.95);border:2px solid var(--uxbert-primary);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.15);color:var(--uxbert-text);font-family:Arial,sans-serif;font-size:16px;font-weight:700;min-width:200px;outline:none;padding:8px 12px;z-index:var(--uxbert-z-toolbar)}.uxbert-text-input:focus{border-color:var(--uxbert-primary-hover);box-shadow:0 4px 16px rgba(79,70,229,.3)}.uxbert-text-input::placeholder{color:#9ca3af;font-weight:400}@media (max-width:768px){.uxbert-modal{max-height:95vh;padding:16px;width:95%}.uxbert-toolbar{bottom:90px;left:16px;max-height:60vh;right:16px;width:auto}.uxbert-toolbar-toggle{bottom:16px;height:56px;right:16px;width:56px}.uxbert-fab{font-size:20px;height:48px;width:48px}.uxbert-color-picker,.uxbert-toolbar-tools{justify-content:center}}";
+    var css_248z = ":root{--uxbert-primary:#4f46e5;--uxbert-primary-hover:#4338ca;--uxbert-danger:#ef4444;--uxbert-success:#10b981;--uxbert-bg:#fff;--uxbert-text:#1f2937;--uxbert-border:#e5e7eb;--uxbert-shadow:0 10px 25px rgba(0,0,0,.1);--uxbert-z-button:999999;--uxbert-z-modal:1000000;--uxbert-z-canvas:1000001;--uxbert-z-toolbar:1000002}[data-theme=dark]{--uxbert-bg:#1f2937;--uxbert-text:#f9fafb;--uxbert-border:#374151}.uxbert-fab{align-items:center;background:var(--uxbert-primary);border:none;border-radius:50%;box-shadow:var(--uxbert-shadow);color:#fff;cursor:pointer;display:flex;font-size:24px;height:56px;justify-content:center;position:fixed;transition:all .3s ease;width:56px;z-index:var(--uxbert-z-button)}.uxbert-fab:hover{background:var(--uxbert-primary-hover);transform:scale(1.1)}.uxbert-fab.bottom-right{bottom:24px;right:24px}.uxbert-fab.bottom-left{bottom:24px;left:24px}.uxbert-fab.top-right{right:24px;top:24px}.uxbert-fab.top-left{left:24px;top:24px}.uxbert-overlay{align-items:center;animation:fadeIn .3s ease;background:rgba(0,0,0,.5);display:none;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:var(--uxbert-z-modal)}.uxbert-overlay.active{display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.uxbert-modal{animation:slideUp .3s ease;background:var(--uxbert-bg);border-radius:12px;box-shadow:var(--uxbert-shadow);color:var(--uxbert-text);max-height:90vh;max-width:600px;overflow-y:auto;padding:24px;width:90%}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.uxbert-modal-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px}.uxbert-modal-title{font-size:20px;font-weight:600;margin:0}.uxbert-modal-close{align-items:center;background:none;border:none;border-radius:4px;color:var(--uxbert-text);cursor:pointer;display:flex;font-size:24px;height:32px;justify-content:center;padding:0;width:32px}.uxbert-modal-close:hover{background:var(--uxbert-border)}.uxbert-form-group{margin-bottom:16px}.uxbert-form-label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}.uxbert-capture-mode{display:flex;flex-wrap:wrap;gap:12px}.uxbert-radio-label{align-items:center;border:2px solid var(--uxbert-border);border-radius:8px;cursor:pointer;display:flex;flex:1;gap:8px;min-width:140px;padding:10px 16px;transition:all .2s ease}.uxbert-radio-label:hover{background:rgba(79,70,229,.05);border-color:var(--uxbert-primary)}.uxbert-radio-label input[type=radio]{cursor:pointer;height:18px;margin:0;width:18px}.uxbert-radio-label input[type=radio]:checked{accent-color:var(--uxbert-primary)}.uxbert-radio-label:has(input[type=radio]:checked){background:rgba(79,70,229,.1);border-color:var(--uxbert-primary)}.uxbert-radio-label span{flex:1;font-size:14px;font-weight:500}.uxbert-form-input,.uxbert-form-select,.uxbert-form-textarea{background:var(--uxbert-bg);border:1px solid var(--uxbert-border);border-radius:6px;box-sizing:border-box;color:var(--uxbert-text);font-family:inherit;font-size:14px;padding:10px;width:100%}.uxbert-form-textarea{min-height:100px;resize:vertical}.uxbert-form-input:focus,.uxbert-form-select:focus,.uxbert-form-textarea:focus{border-color:var(--uxbert-primary);outline:none}.uxbert-capture-action{margin:16px 0;text-align:center}.uxbert-capture-action .uxbert-btn{min-width:200px}.uxbert-screenshot-preview{border:1px solid var(--uxbert-border);border-radius:8px;margin:16px 0;overflow:hidden}.uxbert-screenshot-preview img{display:block;width:100%}.uxbert-screenshot-actions{background:var(--uxbert-border);display:flex;gap:8px;padding:12px}.uxbert-btn{align-items:center;border:none;border-radius:6px;cursor:pointer;display:inline-flex;font-size:14px;font-weight:500;gap:8px;padding:10px 20px;transition:all .2s ease}.uxbert-btn-primary{background:var(--uxbert-primary);color:#fff}.uxbert-btn-primary:hover{background:var(--uxbert-primary-hover)}.uxbert-btn-secondary{background:var(--uxbert-border);color:var(--uxbert-text)}.uxbert-btn-secondary:hover{background:#d1d5db}.uxbert-btn-danger{background:var(--uxbert-danger);color:#fff}.uxbert-btn-danger:hover{background:#dc2626}.uxbert-modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:20px}.uxbert-toolbar-toggle{align-items:center;background:var(--uxbert-primary);border:none;border-radius:50%;bottom:24px;box-shadow:var(--uxbert-shadow);color:#fff;cursor:pointer;display:none;font-size:24px;height:56px;justify-content:center;position:fixed;right:24px;transition:all .3s ease;width:56px;z-index:var(--uxbert-z-toolbar)}.uxbert-toolbar-toggle.active{display:flex}.uxbert-toolbar-toggle.hidden{opacity:0;pointer-events:none;transform:scale(.8)}.uxbert-toolbar-toggle:hover{background:var(--uxbert-primary-hover);transform:scale(1.1)}.uxbert-toolbar{background:var(--uxbert-bg);border-radius:12px;bottom:24px;box-shadow:var(--uxbert-shadow);display:none;flex-direction:column;gap:8px;max-height:80vh;opacity:0;overflow-y:auto;padding:16px;pointer-events:none;position:fixed;right:24px;transform:translateY(20px);transition:all .3s ease;z-index:var(--uxbert-z-toolbar)}.uxbert-toolbar.active{display:flex}.uxbert-toolbar.expanded{opacity:1;pointer-events:all;transform:translateY(0)}.uxbert-toolbar-header{align-items:center;display:flex;gap:8px;justify-content:space-between;margin-bottom:8px}.uxbert-toolbar-title{flex:1;font-size:14px;font-weight:600}.uxbert-toolbar-exit,.uxbert-toolbar-minimize{align-items:center;background:var(--uxbert-border);border:none;border-radius:6px;color:var(--uxbert-text);cursor:pointer;display:flex;font-size:20px;font-weight:700;height:32px;justify-content:center;transition:all .2s ease;width:32px}.uxbert-toolbar-exit{background:var(--uxbert-danger);color:#fff}.uxbert-toolbar-minimize:hover{background:#d1d5db;transform:scale(1.1)}.uxbert-toolbar-exit:hover{background:#dc2626;transform:scale(1.1)}.uxbert-toolbar-tools{display:flex;flex-wrap:wrap;gap:8px}.uxbert-tool-btn{align-items:center;background:var(--uxbert-bg);border:2px solid var(--uxbert-border);border-radius:6px;cursor:pointer;display:flex;font-family:Arial,sans-serif;font-size:18px;font-weight:700;height:40px;justify-content:center;transition:all .2s ease;width:40px}.uxbert-tool-btn.active,.uxbert-tool-btn:hover{background:var(--uxbert-primary);border-color:var(--uxbert-primary);color:#fff}.uxbert-color-picker{display:flex;gap:6px;margin:8px 0}.uxbert-color-option{border:2px solid var(--uxbert-border);border-radius:50%;cursor:pointer;height:32px;transition:transform .2s ease;width:32px}.uxbert-color-option:hover{transform:scale(1.1)}.uxbert-color-option.active{border:3px solid var(--uxbert-text)}.uxbert-canvas-overlay{cursor:crosshair;display:none;left:0;position:absolute;top:0;z-index:var(--uxbert-z-canvas)}.uxbert-canvas-overlay.active{display:block}.uxbert-canvas-overlay.viewport-mode{left:0;position:fixed;top:0}.uxbert-text-input{background:hsla(0,0%,100%,.95);border:2px solid var(--uxbert-primary);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.15);color:var(--uxbert-text);font-family:Arial,sans-serif;font-size:16px;font-weight:700;min-width:200px;outline:none;padding:8px 12px;z-index:var(--uxbert-z-toolbar)}.uxbert-text-input:focus{border-color:var(--uxbert-primary-hover);box-shadow:0 4px 16px rgba(79,70,229,.3)}.uxbert-text-input::placeholder{color:#9ca3af;font-weight:400}@media (max-width:768px){.uxbert-modal{max-height:95vh;padding:16px;width:95%}.uxbert-toolbar{bottom:90px;left:16px;max-height:60vh;right:16px;width:auto}.uxbert-toolbar-toggle{bottom:16px;height:56px;right:16px;width:56px}.uxbert-fab{font-size:20px;height:48px;width:48px}.uxbert-color-picker,.uxbert-toolbar-tools{justify-content:center}}";
     styleInject(css_248z);
 
     // Main initialization file
@@ -10092,6 +10226,7 @@ var Reportly = (function () {
                 onClose: () => this.handleModalClose(),
                 onAnnotate: () => this.startAnnotation(),
                 onRetake: () => this.retakeScreenshot(),
+                onCapture: () => this.captureWithMode(),
             });
             this.toolbar = new Toolbar({
                 onToolChange: (tool) => this.annotation?.setTool(tool),
@@ -10122,14 +10257,27 @@ var Reportly = (function () {
             });
         }
         async handleButtonClick() {
+            try {
+                // Open modal first to let user choose capture mode
+                this.modal?.open();
+            }
+            catch (error) {
+                console.error("Failed to open modal:", error);
+                alert("Failed to open modal. Please try again.");
+            }
+        }
+        async captureWithMode() {
             try {
                 this.state?.setState(STATE.CAPTURING);
+                // Get capture mode from modal
+                const captureMode = this.modal?.getCaptureMode() || 'viewport';
+                // Save capture mode in state
+                this.state?.setCaptureMode(captureMode);
                 // Capture screenshot
-                const screenshot = await this.screenshot.capture();
+                const screenshot = await this.screenshot.capture(captureMode);
                 this.state?.setScreenshot(screenshot);
                 // Show modal with screenshot
                 this.modal?.setScreenshot(screenshot);
-                this.modal?.open();
                 this.state?.setState(STATE.IDLE);
             }
             catch (error) {
@@ -10142,7 +10290,8 @@ var Reportly = (function () {
             this.state?.setState(STATE.ANNOTATING);
             this.modal?.close();
             this.button?.hide();
-            this.annotation?.show();
+            const captureMode = this.state?.getCaptureMode() || 'viewport';
+            this.annotation?.show(captureMode);
             this.toolbar?.show();
         }
         exitAnnotation() {
@@ -10178,13 +10327,16 @@ var Reportly = (function () {
         }
         async retakeScreenshot() {
             try {
+                // Get the current capture mode from modal before closing
+                const captureMode = this.modal?.getCaptureMode() || 'viewport';
                 this.modal?.close();
                 this.state?.setState(STATE.CAPTURING);
                 // Clear previous annotations
                 this.annotation?.clear();
-                // Capture new screenshot
-                const screenshot = await this.screenshot.capture();
+                // Capture new screenshot with the same mode
+                const screenshot = await this.screenshot.capture(captureMode);
                 this.state?.setScreenshot(screenshot);
+                this.state?.setCaptureMode(captureMode);
                 // Show modal with new screenshot
                 this.modal?.setScreenshot(screenshot);
                 this.modal?.open();