@uxbertlabs/reportly 1.0.5 → 1.0.6

package/dist/core/init.d.ts

@@ -15,6 +15,7 @@ declare class Reportly {
     init(userConfig?: Partial<ReportlyConfig>): void;
     private setupKeyboardShortcuts;
     private handleButtonClick;
+    private captureWithMode;
     private startAnnotation;
     private exitAnnotation;
     private finishAnnotation;

package/dist/core/init.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../../src/core/init.ts"],"names":[],"mappings":"AAUA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAE,cAAc,EAA4B,UAAU,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEpG,cAAM,QAAQ;IACZ,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,KAAK,CAAe;IAC5B,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,KAAK,CAAe;IAC5B,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,UAAU,CAAoB;IACtC,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,UAAU,CAAoB;IACtC,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,aAAa,CAAU;;IAe/B,IAAI,CAAC,UAAU,GAAE,OAAO,CAAC,cAAc,CAAM,GAAG,IAAI;IAuDpD,OAAO,CAAC,sBAAsB;YAUhB,iBAAiB;IAoB/B,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,cAAc;YASR,gBAAgB;YA2BhB,gBAAgB;IAwB9B,OAAO,CAAC,iBAAiB;IA4BzB,OAAO,CAAC,gBAAgB;IAQxB,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAKb,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,IAAI;IAMtD,cAAc,IAAI,UAAU,EAAE;IAI9B,gBAAgB,IAAI,IAAI;IAIxB,eAAe,IAAI,IAAI;IAIvB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,GAAG,IAAI;IAIhD,OAAO,IAAI,IAAI;CAOhB;AAGD,QAAA,MAAM,QAAQ,UAAiB,CAAC;AAGhC,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../../src/core/init.ts"],"names":[],"mappings":"AAUA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAE,cAAc,EAA4B,UAAU,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEpG,cAAM,QAAQ;IACZ,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,KAAK,CAAe;IAC5B,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,KAAK,CAAe;IAC5B,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,UAAU,CAAoB;IACtC,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,UAAU,CAAoB;IACtC,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,aAAa,CAAU;;IAe/B,IAAI,CAAC,UAAU,GAAE,OAAO,CAAC,cAAc,CAAM,GAAG,IAAI;IAwDpD,OAAO,CAAC,sBAAsB;YAUhB,iBAAiB;YAUjB,eAAe;IAyB7B,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,cAAc;YASR,gBAAgB;YA2BhB,gBAAgB;IA4B9B,OAAO,CAAC,iBAAiB;IA4BzB,OAAO,CAAC,gBAAgB;IAQxB,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAKb,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,IAAI;IAMtD,cAAc,IAAI,UAAU,EAAE;IAI9B,gBAAgB,IAAI,IAAI;IAIxB,eAAe,IAAI,IAAI;IAIvB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,GAAG,IAAI;IAIhD,OAAO,IAAI,IAAI;CAOhB;AAGD,QAAA,MAAM,QAAQ,UAAiB,CAAC;AAGhC,eAAe,QAAQ,CAAC"}

package/dist/core/state.d.ts

@@ -6,6 +6,7 @@ declare class State {
     private screenshot;
     private annotations;
     private listeners;
+    private captureMode;
     constructor();
     setState(newState: StateType): void;
     getState(): StateType;
@@ -16,6 +17,8 @@ declare class State {
     addAnnotation(annotation: Annotation): void;
     getAnnotations(): Annotation[];
     clearAnnotations(): void;
+    setCaptureMode(mode: 'viewport' | 'fullpage'): void;
+    getCaptureMode(): 'viewport' | 'fullpage';
     reset(): void;
     on(event: string, callback: EventCallback): void;
     emit(event: string, data?: any): void;

package/dist/core/state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../src/core/state.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAkB,aAAa,EAAE,MAAM,UAAU,CAAC;AAEhG,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAI3C,CAAC;AAEF,cAAM,KAAK;IACT,OAAO,CAAC,YAAY,CAAY;IAChC,OAAO,CAAC,YAAY,CAAmB;IACvC,OAAO,CAAC,UAAU,CAAgB;IAClC,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,SAAS,CAAiB;;IAUlC,QAAQ,CAAC,QAAQ,EAAE,SAAS,GAAG,IAAI;IAKnC,QAAQ,IAAI,SAAS;IAIrB,QAAQ,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAIhC,QAAQ,IAAI,SAAS,GAAG,IAAI;IAI5B,aAAa,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IAIvC,aAAa,IAAI,MAAM,GAAG,IAAI;IAI9B,aAAa,CAAC,UAAU,EAAE,UAAU,GAAG,IAAI;IAI3C,cAAc,IAAI,UAAU,EAAE;IAI9B,gBAAgB,IAAI,IAAI;IAIxB,KAAK,IAAI,IAAI;IAQb,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,GAAG,IAAI;IAOhD,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,GAAG,GAAG,IAAI;CAKtC;AAED,eAAe,KAAK,CAAC"}
+{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../src/core/state.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAkB,aAAa,EAAE,MAAM,UAAU,CAAC;AAEhG,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAI3C,CAAC;AAEF,cAAM,KAAK;IACT,OAAO,CAAC,YAAY,CAAY;IAChC,OAAO,CAAC,YAAY,CAAmB;IACvC,OAAO,CAAC,UAAU,CAAgB;IAClC,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,SAAS,CAAiB;IAClC,OAAO,CAAC,WAAW,CAA0B;;IAW7C,QAAQ,CAAC,QAAQ,EAAE,SAAS,GAAG,IAAI;IAKnC,QAAQ,IAAI,SAAS;IAIrB,QAAQ,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAIhC,QAAQ,IAAI,SAAS,GAAG,IAAI;IAI5B,aAAa,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IAIvC,aAAa,IAAI,MAAM,GAAG,IAAI;IAI9B,aAAa,CAAC,UAAU,EAAE,UAAU,GAAG,IAAI;IAI3C,cAAc,IAAI,UAAU,EAAE;IAI9B,gBAAgB,IAAI,IAAI;IAIxB,cAAc,CAAC,IAAI,EAAE,UAAU,GAAG,UAAU,GAAG,IAAI;IAInD,cAAc,IAAI,UAAU,GAAG,UAAU;IAIzC,KAAK,IAAI,IAAI;IASb,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,GAAG,IAAI;IAOhD,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,GAAG,GAAG,IAAI;CAKtC;AAED,eAAe,KAAK,CAAC"}

package/dist/features/annotation.d.ts

@@ -15,7 +15,7 @@ declare class AnnotationManager {
     constructor();
     createCanvas(): HTMLCanvasElement;
     private updateCanvasSize;
-    show(): void;
+    show(mode?: 'viewport' | 'fullpage'): void;
     hide(): void;
     setTool(tool: AnnotationTool): void;
     setColor(color: string): void;

package/dist/features/annotation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"annotation.d.ts","sourceRoot":"","sources":["../../src/features/annotation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAqB,MAAM,UAAU,CAAC;AAElE,cAAM,iBAAiB;IACrB,OAAO,CAAC,MAAM,CAA2B;IACzC,OAAO,CAAC,GAAG,CAAkC;IAC7C,OAAO,CAAC,SAAS,CAAU;IAC3B,OAAO,CAAC,WAAW,CAAiB;IACpC,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,WAAW,CAAU;IAC7B,OAAO,CAAC,SAAS,CAA0B;IAC3C,OAAO,CAAC,qBAAqB,CAA6E;;IAiB1G,YAAY,IAAI,iBAAiB;IA2BjC,OAAO,CAAC,gBAAgB;IAwBxB,IAAI,IAAI,IAAI;IAYZ,IAAI,IAAI,IAAI;IASZ,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAInC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI7B,OAAO,CAAC,eAAe;IAwBvB,OAAO,CAAC,eAAe;IAoBvB,OAAO,CAAC,aAAa;IAsCrB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,QAAQ;IAehB,OAAO,CAAC,SAAS;IA8BjB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,eAAe;IA+DvB,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,aAAa;IAarB,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,mBAAmB;IAwB3B,OAAO,CAAC,QAAQ;IAuBhB,OAAO,CAAC,MAAM;IAmBd,IAAI,IAAI,IAAI;IAOZ,KAAK,IAAI,IAAI;IAKP,yBAAyB,CAAC,cAAc,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IA0BxE,OAAO,IAAI,IAAI;CAOhB;AAED,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"annotation.d.ts","sourceRoot":"","sources":["../../src/features/annotation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAqB,MAAM,UAAU,CAAC;AAElE,cAAM,iBAAiB;IACrB,OAAO,CAAC,MAAM,CAA2B;IACzC,OAAO,CAAC,GAAG,CAAkC;IAC7C,OAAO,CAAC,SAAS,CAAU;IAC3B,OAAO,CAAC,WAAW,CAAiB;IACpC,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,WAAW,CAAU;IAC7B,OAAO,CAAC,SAAS,CAA0B;IAC3C,OAAO,CAAC,qBAAqB,CAA6E;;IAiB1G,YAAY,IAAI,iBAAiB;IA2BjC,OAAO,CAAC,gBAAgB;IA8BxB,IAAI,CAAC,IAAI,GAAE,UAAU,GAAG,UAAuB,GAAG,IAAI;IAsBtD,IAAI,IAAI,IAAI;IAUZ,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAInC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI7B,OAAO,CAAC,eAAe;IA4BvB,OAAO,CAAC,eAAe;IAwBvB,OAAO,CAAC,aAAa;IA0CrB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,QAAQ;IAehB,OAAO,CAAC,SAAS;IA8BjB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,eAAe;IA+DvB,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,aAAa;IAarB,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,mBAAmB;IAwB3B,OAAO,CAAC,QAAQ;IAuBhB,OAAO,CAAC,MAAM;IAmBd,IAAI,IAAI,IAAI;IAOZ,KAAK,IAAI,IAAI;IAKP,yBAAyB,CAAC,cAAc,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IA0BxE,OAAO,IAAI,IAAI;CAOhB;AAED,eAAe,iBAAiB,CAAC"}

package/dist/features/screenshot.d.ts

@@ -1,7 +1,7 @@
 declare class Screenshot {
     private currentScreenshot;
     constructor();
-    capture(): Promise<string>;
+    capture(mode?: 'viewport' | 'fullpage'): Promise<string>;
     private hideUXbertElements;
     private showUXbertElements;
     getScreenshot(): string | null;

package/dist/features/screenshot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"screenshot.d.ts","sourceRoot":"","sources":["../../src/features/screenshot.ts"],"names":[],"mappings":"AAGA,cAAM,UAAU;IACd,OAAO,CAAC,iBAAiB,CAAgB;;IAMnC,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC;IAmDhC,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,kBAAkB;IAY1B,aAAa,IAAI,MAAM,GAAG,IAAI;IAI9B,KAAK,IAAI,IAAI;CAGd;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"screenshot.d.ts","sourceRoot":"","sources":["../../src/features/screenshot.ts"],"names":[],"mappings":"AAGA,cAAM,UAAU;IACd,OAAO,CAAC,iBAAiB,CAAgB;;IAMnC,OAAO,CAAC,IAAI,GAAE,UAAU,GAAG,UAAuB,GAAG,OAAO,CAAC,MAAM,CAAC;IAoE1E,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,kBAAkB;IAY1B,aAAa,IAAI,MAAM,GAAG,IAAI;IAI9B,KAAK,IAAI,IAAI;CAGd;AAED,eAAe,UAAU,CAAC"}

package/dist/reportly.cjs.js

@@ -82,6 +82,7 @@ class State {
         this.screenshot = null;
         this.annotations = [];
         this.listeners = {};
+        this.captureMode = 'viewport';
     }
     setState(newState) {
         this.currentState = newState;
@@ -111,11 +112,18 @@ class State {
     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) {
@@ -189,6 +197,20 @@ class Modal {
       </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
@@ -219,6 +241,12 @@ class Modal {
           </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">
@@ -235,7 +263,7 @@ class Modal {
           <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>
@@ -268,6 +296,13 @@ class Modal {
             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', () => {
@@ -320,14 +355,26 @@ class Modal {
             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;
@@ -9402,26 +9449,43 @@ class Screenshot {
     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, {
+                    allowTaint: true,
+                    useCORS: true,
+                    logging: false,
+                    width: window.innerWidth,
+                    height: window.innerHeight,
+                    windowWidth: window.innerWidth,
+                    windowHeight: window.innerHeight,
+                    x: window.scrollX,
+                    y: window.scrollY,
+                });
+            }
+            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, {
+                    allowTaint: true,
+                    useCORS: true,
+                    logging: false,
+                    width: fullPageWidth,
+                    height: fullPageHeight,
+                });
+                // Restore scroll position
+                window.scrollTo(0, originalScrollY);
+            }
             // Show UXbert UI elements again
             this.showUXbertElements();
             // Convert to base64
@@ -9497,29 +9561,46 @@ class AnnotationManager {
         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();
@@ -9532,10 +9613,13 @@ class AnnotationManager {
         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) {
@@ -9547,15 +9631,18 @@ class AnnotationManager {
             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();
@@ -9575,8 +9662,11 @@ class AnnotationManager {
         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({
@@ -10049,7 +10139,7 @@ function styleInject(css, ref) {
   }
 }
 
-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
@@ -10091,6 +10181,7 @@ class Reportly {
             onClose: () => this.handleModalClose(),
             onAnnotate: () => this.startAnnotation(),
             onRetake: () => this.retakeScreenshot(),
+            onCapture: () => this.captureWithMode(),
         });
         this.toolbar = new Toolbar({
             onToolChange: (tool) => this.annotation?.setTool(tool),
@@ -10121,14 +10212,27 @@ class Reportly {
         });
     }
     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) {
@@ -10141,7 +10245,8 @@ class Reportly {
         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() {
@@ -10177,13 +10282,16 @@ class Reportly {
     }
     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();