pushfeedback 0.1.67 → 0.1.68

package/dist/cjs/feedback-button_2.cjs.entry.js

@@ -30,6 +30,9 @@ const FeedbackButton = class {
     this.project = '';
     this.rating = undefined;
     this.ratingMode = 'thumbs';
+    this.canvasEditorTitle = 'Edit screenshot';
+    this.canvasEditorCancelText = 'Cancel';
+    this.canvasEditorSaveText = 'Save';
     this.emailPlaceholder = 'Email address (optional)';
     this.errorMessage = 'Please try again later.';
     this.errorMessage403 = 'The request URL does not match the one defined in PushFeedback for this project.';
@@ -90,6 +93,9 @@ const FeedbackButton = class {
       'project',
       'rating',
       'ratingMode',
+      'canvasEditorTitle',
+      'canvasEditorCancelText',
+      'canvasEditorSaveText',
       'emailPlaceholder',
       'errorMessage',
       'errorMessage403',
@@ -203,14 +209,14 @@ function commonjsRequire () {
 
 var html2canvasPro = createCommonjsModule(function (module, exports) {
 /*!
- * html2canvas-pro 1.5.8 <https://yorickshan.github.io/html2canvas-pro/>
- * Copyright (c) 2024 yorickshan <https://github.com/yorickshan>
+ * html2canvas-pro 1.5.11 <https://yorickshan.github.io/html2canvas-pro/>
+ * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
  * Released under MIT License
  */
 (function (global, factory) {
     module.exports = factory() ;
 })(commonjsGlobal, (function () {
-    /*! *****************************************************************************
+    /******************************************************************************
     Copyright (c) Microsoft Corporation.
 
     Permission to use, copy, modify, and/or distribute this software for any
@@ -224,7 +230,7 @@ var html2canvasPro = createCommonjsModule(function (module, exports) {
     OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
     PERFORMANCE OF THIS SOFTWARE.
     ***************************************************************************** */
-    /* global Reflect, Promise */
+    /* global Reflect, Promise, SuppressedError, Symbol */
 
     var extendStatics = function(d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -268,7 +274,7 @@ var html2canvasPro = createCommonjsModule(function (module, exports) {
         function verb(n) { return function (v) { return step([n, v]); }; }
         function step(op) {
             if (f) throw new TypeError("Generator is already executing.");
-            while (_) try {
+            while (g && (g = 0, op[0] && (_ = 0)), _) try {
                 if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
                 if (y = 0, t) op = [op[0] & 2, t.value];
                 switch (op[0]) {
@@ -297,8 +303,13 @@ var html2canvasPro = createCommonjsModule(function (module, exports) {
                 ar[i] = from[i];
             }
         }
-        return to.concat(ar || from);
-    }
+        return to.concat(ar || Array.prototype.slice.call(from));
+    }
+
+    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+        var e = new Error(message);
+        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+    };
 
     var Bounds = /** @class */ (function () {
         function Bounds(left, top, width, height) {
@@ -3933,7 +3944,7 @@ var html2canvasPro = createCommonjsModule(function (module, exports) {
                 case 'gurmukhi':
                     return 22 /* LIST_STYLE_TYPE.GURMUKHI */;
                 case 'hebrew':
-                    return 22 /* LIST_STYLE_TYPE.HEBREW */;
+                    return 52 /* LIST_STYLE_TYPE.HEBREW */;
                 case 'hiragana':
                     return 23 /* LIST_STYLE_TYPE.HIRAGANA */;
                 case 'hiragana-iroha':
@@ -6209,7 +6220,7 @@ var html2canvasPro = createCommonjsModule(function (module, exports) {
                 return createCounterStyleFromRange(value, 0xae6, 0xaef, true, defaultSuffix);
             case 22 /* LIST_STYLE_TYPE.GURMUKHI */:
                 return createCounterStyleFromRange(value, 0xa66, 0xa6f, true, defaultSuffix);
-            case 22 /* LIST_STYLE_TYPE.HEBREW */:
+            case 52 /* LIST_STYLE_TYPE.HEBREW */:
                 return createAdditiveCounter(value, 1, 10999, HEBREW, 3 /* LIST_STYLE_TYPE.DECIMAL */, defaultSuffix);
             case 23 /* LIST_STYLE_TYPE.HIRAGANA */:
                 return createCounterStyleFromSymbols(value, 'あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわゐゑをん');
@@ -6668,8 +6679,8 @@ var html2canvasPro = createCommonjsModule(function (module, exports) {
         });
     };
     var ignoredStyleProperties = [
-        'all',
-        'd',
+        'all', // #2476
+        'd', // #2483
         'content' // Safari shows pseudoelements if content is set
     ];
     var copyCSSStyles = function (style, target) {
@@ -6786,12 +6797,21 @@ var html2canvasPro = createCommonjsModule(function (module, exports) {
         };
         Cache.prototype.loadImage = function (key) {
             return __awaiter(this, void 0, void 0, function () {
-                var isSameOrigin, useCORS, useProxy, src;
+                var isSameOrigin, _a, useCORS, useProxy, src;
                 var _this = this;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
-                            isSameOrigin = CacheStorage.isSameOrigin(key);
+                            if (!(typeof this._options.customIsSameOrigin === 'function')) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this._options.customIsSameOrigin(key, CacheStorage.isSameOrigin)];
+                        case 1:
+                            _a = _b.sent();
+                            return [3 /*break*/, 3];
+                        case 2:
+                            _a = CacheStorage.isSameOrigin(key);
+                            _b.label = 3;
+                        case 3:
+                            isSameOrigin = _a;
                             useCORS = !isInlineImage(key) && this._options.useCORS === true && FEATURES.SUPPORT_CORS_IMAGES && !isSameOrigin;
                             useProxy = !isInlineImage(key) &&
                                 !isSameOrigin &&
@@ -6808,12 +6828,12 @@ var html2canvasPro = createCommonjsModule(function (module, exports) {
                                 return [2 /*return*/];
                             }
                             src = key;
-                            if (!useProxy) return [3 /*break*/, 2];
+                            if (!useProxy) return [3 /*break*/, 5];
                             return [4 /*yield*/, this.proxy(src)];
-                        case 1:
-                            src = _a.sent();
-                            _a.label = 2;
-                        case 2:
+                        case 4:
+                            src = _b.sent();
+                            _b.label = 5;
+                        case 5:
                             this.context.logger.debug("Added image ".concat(key.substring(0, 256)));
                             return [4 /*yield*/, new Promise(function (resolve, reject) {
                                     var img = new Image();
@@ -6832,7 +6852,7 @@ var html2canvasPro = createCommonjsModule(function (module, exports) {
                                         setTimeout(function () { return reject("Timed out (".concat(_this._options.imageTimeout, "ms) loading image")); }, _this._options.imageTimeout);
                                     }
                                 })];
-                        case 3: return [2 /*return*/, _a.sent()];
+                        case 6: return [2 /*return*/, _b.sent()];
                     }
                 });
             });
@@ -7958,7 +7978,7 @@ var html2canvasPro = createCommonjsModule(function (module, exports) {
         };
         CanvasRenderer.prototype.renderNodeContent = function (paint) {
             return __awaiter(this, void 0, void 0, function () {
-                var container, curves, styles, _i, _a, child, image, image, iframeRenderer, canvas, size, _b, fontFamily, fontSize, baseline, bounds, x, textBounds, img, image, url, fontFamily, bounds;
+                var container, curves, styles, _i, _a, child, image, image, iframeRenderer, canvas, size, _b, font, fontFamily, fontSize, baseline, bounds, x, textBounds, img, image, url, font, bounds;
                 return __generator(this, function (_c) {
                     switch (_c.label) {
                         case 0:
@@ -8058,9 +8078,9 @@ var html2canvasPro = createCommonjsModule(function (module, exports) {
                                 }
                             }
                             if (isTextInputElement(container) && container.value.length) {
-                                _b = this.createFontStyle(styles), fontFamily = _b[0], fontSize = _b[1];
+                                _b = this.createFontStyle(styles), font = _b[0], fontFamily = _b[1], fontSize = _b[2];
                                 baseline = this.fontMetrics.getMetrics(fontFamily, fontSize).baseline;
-                                this.ctx.font = fontFamily;
+                                this.ctx.font = font;
                                 this.ctx.fillStyle = asString(styles.color);
                                 this.ctx.textBaseline = 'alphabetic';
                                 this.ctx.textAlign = canvasTextAlign(container.styles.textAlign);
@@ -8109,8 +8129,8 @@ var html2canvasPro = createCommonjsModule(function (module, exports) {
                         case 18: return [3 /*break*/, 20];
                         case 19:
                             if (paint.listValue && container.styles.listStyleType !== -1 /* LIST_STYLE_TYPE.NONE */) {
-                                fontFamily = this.createFontStyle(styles)[0];
-                                this.ctx.font = fontFamily;
+                                font = this.createFontStyle(styles)[0];
+                                this.ctx.font = font;
                                 this.ctx.fillStyle = asString(styles.color);
                                 this.ctx.textBaseline = 'middle';
                                 this.ctx.textAlign = 'right';
@@ -8340,7 +8360,7 @@ var html2canvasPro = createCommonjsModule(function (module, exports) {
                                                 canvas.height = height;
                                                 ctx = canvas.getContext('2d');
                                                 gradient_1 = ctx.createLinearGradient(x0, y0, x1, y1);
-                                                processColorStops(backgroundImage.stops, lineLength).forEach(function (colorStop) {
+                                                processColorStops(backgroundImage.stops, lineLength || 1).forEach(function (colorStop) {
                                                     return gradient_1.addColorStop(colorStop.stop, asString(colorStop.color));
                                                 });
                                                 ctx.fillStyle = gradient_1;
@@ -8875,7 +8895,8 @@ var html2canvasPro = createCommonjsModule(function (module, exports) {
                         allowTaint: (_b = opts.allowTaint) !== null && _b !== void 0 ? _b : false,
                         imageTimeout: (_c = opts.imageTimeout) !== null && _c !== void 0 ? _c : 15000,
                         proxy: opts.proxy,
-                        useCORS: (_d = opts.useCORS) !== null && _d !== void 0 ? _d : false
+                        useCORS: (_d = opts.useCORS) !== null && _d !== void 0 ? _d : false,
+                        customIsSameOrigin: opts.customIsSameOrigin
                     };
                     contextOptions = __assign({ logging: (_e = opts.logging) !== null && _e !== void 0 ? _e : true, cache: opts.cache }, resourceOptions);
                     windowOptions = {
@@ -8976,7 +8997,7 @@ var html2canvasPro = createCommonjsModule(function (module, exports) {
 //# sourceMappingURL=html2canvas-pro.js.map
 });
 
-const feedbackModalCss = ".text-center{flex-grow:1;text-align:center}.feedback-modal-wrapper *{font-family:var(--feedback-font-family)}.feedback-modal-wrapper--custom-font *{font-family:inherit}.feedback-modal-wrapper{position:absolute;z-index:var(--feedback-modal-modal-wrapper-z-index)}.feedback-overlay{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;opacity:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index);transition:opacity 0.2s ease-out}.feedback-overlay--visible{opacity:1}.feedback-modal{display:inline-block;position:relative}.feedback-modal-content{background-color:var(--feedback-modal-content-bg-color);border-color:1px solid var(--feedback-modal-header-text-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-content-text-color);display:flex;flex-direction:column;left:50%;max-width:90%;padding:20px;position:fixed;top:50%;transform:translate(-50%, -50%) scale(0.95);opacity:0;width:100%;z-index:var(--feedback-modal-content-z-index);transition:transform 0.2s ease-out, opacity 0.2s ease-out}.feedback-modal-content--open{transform:translate(-50%, -50%) scale(1);opacity:1}.feedback-modal-header{align-items:center;color:var(--feedback-modal-header-text-color);display:flex;font-size:var(--feedback-header-font-size);font-weight:var(--feedback-modal-header-font-weight);justify-content:space-between;margin-bottom:20px}.feedback-modal-rating-buttons{width:100%;margin-bottom:20px}.feedback-modal-rating-button{padding:0;background-color:transparent;border:transparent;margin-right:5px;cursor:pointer}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button{border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);font-size:var(--feedback-modal-button-font-size);font-weight:500;margin-right:10px;justify-content:center;padding:5px 10px}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover svg,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected svg{stroke:var(--feedback-modal-rating-button-selected-color)}.feedback-modal-rating-buttons svg{stroke:var(--feedback-modal-rating-button-color);cursor:pointer}.feedback-modal-rating-buttons--stars .feedback-modal-rating-button--selected svg{fill:var(--feedback-modal-rating-button-stars-selected-color);stroke:var(--feedback-modal-rating-button-stars-selected-color)}.feedback-modal-text textarea{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:100px;min-height:100px;padding:10px;resize:vertical;width:100%}.feedback-modal-email input{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:40px;padding:10px;width:100%;margin-bottom:20px}.feedback-modal-privacy{font-size:var(--feedback-modal-input-font-size);margin-bottom:20px}.feedback-modal-text textarea:focus,.feedback-modal-email input:focus{border:1px solid var(--feedback-modal-input-border-color-focused);outline:none}.feedback-modal-buttons{display:flex;flex-direction:column}.feedback-modal-buttons .feedback-modal-button{margin-bottom:20px}.feedback-modal-button{align-items:center;background-color:transparent;border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);cursor:pointer;display:flex;font-size:var(--feedback-modal-button-font-size);font-weight:500;justify-content:center;min-height:40px;padding:5px 10px}.feedback-modal-button svg{margin-right:6px}.feedback-modal-button path{fill:var(--feedback-modal-button-icon-color)}.feedback-modal-button:hover path,.feedback-modal-button--active path{fill:var(--feedback-modal-button-icon-color-active)}.feedback-modal-button--submit{background-color:var(--feedback-modal-button-submit-bg-color);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-submit-text-color)}.feedback-modal-button:hover,.feedback-modal-button--active{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-button--submit:hover{background-color:var(--feedback-modal-button-submit-bg-color-hover);border:1px solid var(--feedback-modal-button-submit-border-color-hover);color:var(--feedback-modal-button-submit-text-color-hover)}.feedback-modal-input-heading{display:block;font-size:14px;font-weight:300;padding-bottom:10px}.feedback-modal-footer{font-size:12px;text-align:center}.feedback-modal-footer a{color:var(--feedback-modal-footer-link);font-weight:500;text-decoration:none}.feedback-logo,.feedback-footer-text{display:block;text-align:center;margin-top:5px}.feedback-footer-text{margin-top:10px;line-height:1.5}.feedback-modal-close{background-color:var(--feedback-modal-close-bg-color);border:0;border-radius:50%;cursor:pointer;height:22px;margin-left:auto;padding:0;width:22px}.feedback-modal-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-screenshot{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index)}.feedback-modal-screenshot-header{align-items:center;background-color:var(--feedback-modal-screenshot-header-bg-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-screenshot-header-text-color);cursor:pointer;display:flex;left:50%;top:20px;transform:translateX(-50%);padding:10px;position:fixed;width:max-content;z-index:var(--feedback-modal-screenshot-header-z-index)}.feedback-modal-screenshot-close{height:24px;padding-left:10px;width:24px}.feedback-modal-screenshot-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-message{font-size:var(--feedback-modal-message-font-size);margin-top:0}.feedback-modal-element-hover{background-color:transparent;cursor:pointer;border:1px solid var(--feedback-modal-element-hover-border-color)}.feedback-modal-element-selected{background-color:transparent;border:3px solid var(--feedback-modal-element-selected-border-color) !important;box-shadow:0 0 0 2px rgba(0, 123, 255, 0.3) !important}.screenshot-preview{display:inline-block;width:30px;height:30px;overflow:hidden;border-radius:4px;margin-right:10px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);cursor:pointer;transition:transform 0.2s ease}.screenshot-preview:hover{transform:scale(1.1)}.screenshot-preview img{width:100%;height:100%;object-fit:cover}.preview-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0, 0, 0, 0.8);z-index:10000;display:flex;align-items:center;justify-content:center;cursor:pointer}.preview-modal{position:relative;max-width:90vw;max-height:90vh;border-radius:8px;overflow:hidden;cursor:default}.preview-modal img{max-width:100%;max-height:100%;display:block}@media screen and (min-width: 768px){.feedback-modal-content{max-width:var(--feedback-modal-content-max-width)}.feedback-modal-content.feedback-modal-content--bottom-right{bottom:var(--feedback-modal-content-position-bottom);left:initial;right:var(--feedback-modal-content-position-right);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--bottom-left{bottom:var(--feedback-modal-content-position-bottom);left:var(--feedback-modal-content-position-left);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--top-right{right:var(--feedback-modal-content-position-right);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--top-left{left:var(--feedback-modal-content-position-left);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--center-left{left:5px;right:auto;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--center-right{left:auto;right:5px;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--sidebar-left.feedback-modal-content--open,.feedback-modal-content.feedback-modal-content--sidebar-right.feedback-modal-content--open{transform:translateX(0)}.feedback-modal-content.feedback-modal-content--sidebar-left{max-width:var(--feedback-modal-content-sidebar-max-width);left:0;right:auto;height:100vh;top:0;transform:translateX(-100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-content.feedback-modal-content--sidebar-right{max-width:var(--feedback-modal-content-sidebar-max-width);left:auto;right:0;height:100vh;top:0;transform:translateX(100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-text textarea{height:150px;min-height:150px}.feedback-modal-content.feedback-modal-content--bottom-right{transform:translateY(20px)}.feedback-modal-content.feedback-modal-content--bottom-right.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--bottom-left{transform:translateY(20px)}.feedback-modal-content.feedback-modal-content--bottom-left.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--top-right{transform:translateY(-20px)}.feedback-modal-content.feedback-modal-content--top-right.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--top-left{transform:translateY(-20px)}.feedback-modal-content.feedback-modal-content--top-left.feedback-modal-content--open{transform:translateY(0)}}";
+const feedbackModalCss = ".text-center{flex-grow:1;text-align:center}.feedback-modal-wrapper *{font-family:var(--feedback-font-family)}.feedback-modal-wrapper--custom-font *{font-family:inherit}.feedback-modal-wrapper{position:absolute;z-index:var(--feedback-modal-modal-wrapper-z-index)}.feedback-overlay{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;opacity:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index);transition:opacity 0.2s ease-out}.feedback-overlay--visible{opacity:1}.feedback-modal{display:inline-block;position:relative}.feedback-modal-content{background-color:var(--feedback-modal-content-bg-color);border-color:1px solid var(--feedback-modal-header-text-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-content-text-color);display:flex;flex-direction:column;left:50%;max-width:90%;padding:20px;position:fixed;top:50%;transform:translate(-50%, -50%) scale(0.95);opacity:0;width:100%;z-index:var(--feedback-modal-content-z-index);transition:transform 0.2s ease-out, opacity 0.2s ease-out}.feedback-modal-content--open{transform:translate(-50%, -50%) scale(1);opacity:1}.feedback-modal-header{align-items:center;color:var(--feedback-modal-header-text-color);display:flex;font-size:var(--feedback-header-font-size);font-weight:var(--feedback-modal-header-font-weight);justify-content:space-between;margin-bottom:20px}.feedback-modal-rating-buttons{width:100%;margin-bottom:20px}.feedback-modal-rating-button{padding:0;background-color:transparent;border:transparent;margin-right:5px;cursor:pointer}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button{border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);font-size:var(--feedback-modal-button-font-size);font-weight:500;margin-right:10px;justify-content:center;padding:5px 10px}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover svg,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected svg{stroke:var(--feedback-modal-rating-button-selected-color)}.feedback-modal-rating-buttons svg{stroke:var(--feedback-modal-rating-button-color);cursor:pointer}.feedback-modal-rating-buttons--stars .feedback-modal-rating-button--selected svg{fill:var(--feedback-modal-rating-button-stars-selected-color);stroke:var(--feedback-modal-rating-button-stars-selected-color)}.feedback-modal-text textarea{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:100px;min-height:100px;padding:10px;resize:vertical;width:100%}.feedback-modal-email input{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:40px;padding:10px;width:100%;margin-bottom:20px}.feedback-modal-privacy{font-size:var(--feedback-modal-input-font-size);margin-bottom:20px}.feedback-modal-text textarea:focus,.feedback-modal-email input:focus{border:1px solid var(--feedback-modal-input-border-color-focused);outline:none}.feedback-modal-buttons{display:flex;flex-direction:column}.feedback-modal-buttons .feedback-modal-button{margin-bottom:20px}.feedback-modal-button{align-items:center;background-color:transparent;border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);cursor:pointer;display:flex;font-size:var(--feedback-modal-button-font-size);font-weight:500;justify-content:center;min-height:40px;padding:5px 10px}.feedback-modal-button svg{margin-right:6px}.feedback-modal-button path{fill:var(--feedback-modal-button-icon-color)}.feedback-modal-button:hover path,.feedback-modal-button--active path{fill:var(--feedback-modal-button-icon-color-active)}.feedback-modal-button--submit{background-color:var(--feedback-modal-button-submit-bg-color);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-submit-text-color)}.feedback-modal-button:hover,.feedback-modal-button--active{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-button--submit:hover{background-color:var(--feedback-modal-button-submit-bg-color-hover);border:1px solid var(--feedback-modal-button-submit-border-color-hover);color:var(--feedback-modal-button-submit-text-color-hover)}.feedback-modal-input-heading{display:block;font-size:14px;font-weight:300;padding-bottom:10px}.feedback-modal-footer{font-size:12px;text-align:center}.feedback-modal-footer a{color:var(--feedback-modal-footer-link);font-weight:500;text-decoration:none}.feedback-logo,.feedback-footer-text{display:block;text-align:center;margin-top:5px}.feedback-footer-text{margin-top:10px;line-height:1.5}.feedback-modal-close{background-color:var(--feedback-modal-close-bg-color);border:0;border-radius:50%;cursor:pointer;height:22px;margin-left:auto;padding:0;width:22px}.feedback-modal-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-screenshot{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index)}.feedback-modal-screenshot-header{align-items:center;background-color:var(--feedback-modal-screenshot-header-bg-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-screenshot-header-text-color);cursor:pointer;display:flex;left:50%;top:20px;transform:translateX(-50%);padding:10px;position:fixed;width:max-content;z-index:var(--feedback-modal-screenshot-header-z-index)}.feedback-modal-screenshot-close{height:24px;padding-left:10px;width:24px}.feedback-modal-screenshot-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-message{font-size:var(--feedback-modal-message-font-size);margin-top:0}.feedback-modal-element-hover{background-color:transparent;cursor:pointer;border:1px solid var(--feedback-modal-element-hover-border-color)}.feedback-modal-element-selected{background-color:transparent;border:3px solid var(--feedback-modal-element-selected-border-color) !important;box-shadow:0 0 0 2px rgba(0, 123, 255, 0.3) !important}.screenshot-preview{display:inline-block;width:30px;height:30px;overflow:hidden;border-radius:4px;margin-right:10px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);cursor:pointer;transition:transform 0.2s ease}.screenshot-preview:hover{transform:scale(1.1)}.screenshot-preview img{width:100%;height:100%;object-fit:cover}.screenshot-loading{display:inline-flex;align-items:center;margin-right:8px}.canvas-editor-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--feedback-modal-screenshot-bg-color);z-index:10001;display:flex;align-items:center;justify-content:center}.canvas-editor-modal{width:95vw;height:98vh;background:var(--feedback-canvas-editor-bg-color);border-radius:var(--feedback-modal-content-border-radius);display:flex;flex-direction:column;overflow:hidden;box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15)}.canvas-editor-header{background:var(--feedback-canvas-editor-header-bg-color);border-bottom:1px solid var(--feedback-canvas-editor-border-color);padding:12px 16px;display:flex;flex-direction:column;gap:12px;flex-shrink:0}.canvas-editor-title h3{margin:0;font-size:var(--feedback-modal-header-font-size);font-weight:var(--feedback-modal-header-font-weight);color:var(--feedback-modal-header-text-color);font-family:var(--feedback-modal-header-font-family)}.canvas-editor-toolbar{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.toolbar-section{display:flex;align-items:center}.toolbar-section:last-child{margin-left:auto;gap:10px}.tool-group{display:flex;align-items:center;background:var(--feedback-canvas-editor-tool-bg-color);border:1px solid var(--feedback-canvas-editor-border-color);border-radius:var(--feedback-modal-button-border-radius);padding:4px;box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .10)}.tool-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:none;border-radius:var(--feedback-modal-button-border-radius);cursor:pointer;color:var(--feedback-canvas-editor-tool-text-color);transition:all 0.2s ease;position:relative}.tool-btn:hover{background:var(--feedback-canvas-editor-tool-bg-hover);color:var(--feedback-modal-button-text-color-active)}.tool-btn.active{background:var(--feedback-canvas-editor-tool-bg-active);color:var(--feedback-canvas-editor-tool-text-active)}.tool-btn:disabled{opacity:0.4;cursor:not-allowed}.tool-btn:disabled:hover{background:none;color:var(--feedback-canvas-editor-tool-text-color)}.toolbar-divider{width:1px;height:20px;background:var(--feedback-canvas-editor-divider-color);margin:0 6px}.undo-btn{background:var(--feedback-canvas-editor-tool-bg-color) !important;border:1px solid var(--feedback-canvas-editor-border-color) !important}.undo-btn:hover:not(:disabled){background:var(--feedback-canvas-editor-tool-bg-hover) !important}.color-palette{display:flex;align-items:center;gap:6px;background:var(--feedback-canvas-editor-tool-bg-color);border:1px solid var(--feedback-canvas-editor-border-color);border-radius:var(--feedback-modal-button-border-radius);padding:6px;box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .10)}.color-slot-wrapper{position:relative}.color-btn{width:28px;height:28px;border-radius:var(--feedback-modal-button-border-radius);border:2px solid transparent;cursor:pointer;transition:all 0.2s ease;position:relative;box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .15);display:flex;align-items:center;justify-content:center}.color-btn:hover{transform:scale(1.05);box-shadow:0px 2px 4px 0px rgba(60, 64, 67, .25)}.color-btn.active{border-color:var(--feedback-primary-color);transform:scale(1.1);box-shadow:0 0 0 2px rgba(0, 112, 244, 0.2)}.color-btn.editing{border-color:var(--feedback-highlight-color);box-shadow:0 0 0 2px rgba(255, 180, 34, 0.3)}.color-btn.editing:hover{border-color:var(--feedback-highlight-color);box-shadow:0 0 0 2px rgba(255, 180, 34, 0.4)}.color-picker-dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;background:var(--feedback-canvas-editor-tool-bg-color);border:1px solid var(--feedback-canvas-editor-border-color);border-radius:var(--feedback-modal-button-border-radius);padding:6px;box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);z-index:1000}.color-picker-dropdown input[type=\"color\"]{width:50px;height:32px;border:none;border-radius:var(--feedback-modal-button-border-radius);cursor:pointer}.size-control{display:flex;align-items:center;gap:10px;background:var(--feedback-canvas-editor-tool-bg-color);border:1px solid var(--feedback-canvas-editor-border-color);border-radius:var(--feedback-modal-button-border-radius);padding:6px 12px;box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .10)}.size-slider{width:70px;height:4px;border-radius:2px;background:var(--feedback-canvas-editor-slider-track);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;border:none}.size-slider::-webkit-slider-track{width:100%;height:4px;cursor:pointer;background:var(--feedback-canvas-editor-slider-track);border-radius:2px;border:none;box-shadow:none}.size-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--feedback-primary-color);cursor:pointer;box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .20);border:none;margin-top:-5px;}.size-slider::-moz-range-track{width:100%;height:4px;cursor:pointer;background:var(--feedback-canvas-editor-slider-track);border-radius:2px;border:none;box-shadow:none}.size-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--feedback-primary-color);cursor:pointer;border:none;box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .20)}.size-slider::-moz-range-progress{background:var(--feedback-canvas-editor-slider-track);height:4px;border-radius:2px}.size-slider::-ms-track{width:100%;height:4px;cursor:pointer;background:transparent;border-color:transparent;color:transparent}.size-slider::-ms-fill-lower{background:var(--feedback-canvas-editor-slider-track);border-radius:2px}.size-slider::-ms-fill-upper{background:var(--feedback-canvas-editor-slider-track);border-radius:2px}.size-slider::-ms-thumb{width:14px;height:14px;border-radius:50%;background:var(--feedback-primary-color);cursor:pointer;border:none}.size-value{font-weight:500;color:var(--feedback-canvas-editor-tool-text-color);font-size:var(--feedback-text-font-size);min-width:30px}.action-btn{display:flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--feedback-canvas-editor-action-secondary-border);border-radius:var(--feedback-modal-button-border-radius);cursor:pointer;font-size:var(--feedback-modal-button-font-size);font-weight:500;transition:all 0.2s ease;min-width:65px;justify-content:center;height:36px;font-family:var(--feedback-font-family)}.action-btn.secondary{background:var(--feedback-canvas-editor-action-secondary-bg);color:var(--feedback-canvas-editor-action-secondary-text);border-color:var(--feedback-canvas-editor-action-secondary-border)}.action-btn.secondary:hover{background:var(--feedback-canvas-editor-tool-bg-hover);color:var(--feedback-modal-button-text-color-active);border-color:var(--feedback-modal-button-border-color-active)}.action-btn.primary{background:var(--feedback-canvas-editor-action-primary-bg);color:var(--feedback-canvas-editor-action-primary-text);border-color:var(--feedback-modal-button-border-color-active)}.action-btn.primary:hover{background:var(--feedback-modal-button-submit-bg-color-hover);border-color:var(--feedback-modal-button-submit-border-color-hover)}.canvas-editor-content{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--feedback-canvas-editor-content-bg);overflow:hidden;min-height:0;min-width:0}.annotation-canvas{max-width:100%;max-height:100%;width:auto;height:auto;cursor:crosshair;border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);background:var(--feedback-white-color);transition:box-shadow 0.3s ease;object-fit:contain;display:block}.annotation-canvas:hover{box-shadow:0px 2px 4px 0px rgba(60, 64, 67, .35), 0px 4px 12px 4px rgba(60, 64, 67, .20)}@media screen and (min-width: 768px){.feedback-modal-content{max-width:var(--feedback-modal-content-max-width)}.feedback-modal-content.feedback-modal-content--bottom-right{bottom:var(--feedback-modal-content-position-bottom);left:initial;right:var(--feedback-modal-content-position-right);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--bottom-left{bottom:var(--feedback-modal-content-position-bottom);left:var(--feedback-modal-content-position-left);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--top-right{right:var(--feedback-modal-content-position-right);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--top-left{left:var(--feedback-modal-content-position-left);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--center-left{left:5px;right:auto;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--center-right{left:auto;right:5px;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--sidebar-left.feedback-modal-content--open,.feedback-modal-content.feedback-modal-content--sidebar-right.feedback-modal-content--open{transform:translateX(0)}.feedback-modal-content.feedback-modal-content--sidebar-left{max-width:var(--feedback-modal-content-sidebar-max-width);left:0;right:auto;height:100vh;top:0;transform:translateX(-100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-content.feedback-modal-content--sidebar-right{max-width:var(--feedback-modal-content-sidebar-max-width);left:auto;right:0;height:100vh;top:0;transform:translateX(100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-text textarea{height:150px;min-height:150px}.feedback-modal-content.feedback-modal-content--bottom-right{transform:translateY(20px)}.feedback-modal-content.feedback-modal-content--bottom-right.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--bottom-left{transform:translateY(20px)}.feedback-modal-content.feedback-modal-content--bottom-left.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--top-right{transform:translateY(-20px)}.feedback-modal-content.feedback-modal-content--top-right.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--top-left{transform:translateY(-20px)}.feedback-modal-content.feedback-modal-content--top-left.feedback-modal-content--open{transform:translateY(0)}}@media (max-width: 768px){.canvas-editor-modal{width:100vw;height:100vh;border-radius:0}.canvas-editor-header{padding:8px 12px;gap:8px}.canvas-editor-toolbar{flex-direction:column;align-items:stretch;gap:12px}.toolbar-section{justify-content:center}.toolbar-section:last-child{margin-left:0;justify-content:stretch;gap:8px}.action-btn{flex:1;min-width:auto}.canvas-editor-content{padding:8px}.tool-group{flex-wrap:wrap;justify-content:center}.color-palette{flex-wrap:wrap;justify-content:center}.size-control{flex-direction:column;gap:6px;text-align:center}.size-slider{width:100px}}";
 
 const FeedbackModal = class {
   constructor(hostRef) {
@@ -9067,144 +9088,634 @@ const FeedbackModal = class {
         document.querySelectorAll('.feedback-modal-element-selected').forEach(el => {
           el.classList.remove('feedback-modal-element-selected');
         });
+        // Reset canvas editor states
         this.takingScreenshot = false;
-        this.originalElement = null;
-        this.selectedElementBounds = null;
+        this.showPreviewModal = false;
+        this.showCanvasEditor = false;
+        this.annotations = [];
+        this.currentAnnotation = null;
+        this.isDrawing = false;
+        this.canvasRef = null;
+        this.canvasContext = null;
+        this.originalImageData = null;
+        // Reset resizing states
+        this.isResizing = false;
+        this.resizingAnnotation = null;
+        this.resizeStartSize = 16;
+        this.hoveredAnnotation = null;
+        this.resizeHandle = false;
+        // Reset form states
         this.formSuccess = false;
         this.formError = false;
         this.formErrorStatus = 500;
         this.formMessage = '';
         this.formEmail = '';
-        this.showPreviewModal = false;
         this.resetOverflow();
       }, 200);
     };
-    this.openScreenShot = () => {
-      this.hasSelectedElement = false;
-      this.showModal = false;
-      this.showScreenshotMode = true;
-      this.showScreenshotTopBar = true;
-      // Clear previous screenshot and selection data
-      this.encodedScreenshot = null;
-      this.originalElement = null;
-      this.selectedElementBounds = null;
-      this.hoveredElement = null;
-      this.hoveredElementBounds = null;
-      // NO CSS CLASSES - they cause scroll jumping
-    };
-    this.closeScreenShot = () => {
-      // Remove highlight from ALL selected elements
-      document.querySelectorAll('.feedback-modal-element-selected').forEach(el => {
-        el.classList.remove('feedback-modal-element-selected');
-      });
-      // Reset loading state
-      this.takingScreenshot = false;
-      this.showModal = false;
-      this.showScreenshotMode = false;
-      this.showScreenshotTopBar = false;
-    };
-    this.openPreviewModal = (event) => {
-      event.stopPropagation(); // Prevent button click from firing
-      this.showPreviewModal = true;
-    };
-    this.closePreviewModal = () => {
-      this.showPreviewModal = false;
-    };
-    this.handleMouseOverScreenShot = (event) => {
-      event.preventDefault();
-      if (this.hasSelectedElement)
-        return;
-      const borderOffset = 2;
-      this.screenshotModal.style.display = 'none';
-      const elementUnder = document.elementFromPoint(event.clientX, event.clientY);
-      const rect = elementUnder.getBoundingClientRect();
-      this.screenshotModal.style.display = '';
-      // Store the hovered element and its bounds for later use
-      this.hoveredElement = elementUnder;
-      this.hoveredElementBounds = rect;
-      // Get the bounding box of the element selected
-      this.elementSelected.style.position = 'absolute';
-      this.elementSelected.style.left = `${rect.left}px`;
-      this.elementSelected.style.top = `${rect.top}px`;
-      this.elementSelected.style.width = `${rect.width}px`;
-      this.elementSelected.style.height = `${rect.height}px`;
-      this.elementSelected.classList.add('feedback-modal-element-hover');
-      // Set the background color of nonselected areas
-      // Top
-      this.topSide.style.position = 'absolute';
-      this.topSide.style.left = `${rect.left}px`;
-      this.topSide.style.top = '0px';
-      this.topSide.style.width = `${rect.width + borderOffset}px`;
-      this.topSide.style.height = `${rect.top}px`;
-      this.topSide.style.backgroundColor = 'rgba(0, 0, 0, 0.4)';
-      // Left
-      this.leftSide.style.position = 'absolute';
-      this.leftSide.style.left = '0px';
-      this.leftSide.style.top = '0px';
-      this.leftSide.style.width = `${rect.left}px`;
-      this.leftSide.style.height = '100vh';
-      this.leftSide.style.backgroundColor = 'rgba(0, 0, 0, 0.4)';
-      // Bottom
-      this.bottomSide.style.position = 'absolute';
-      this.bottomSide.style.left = `${rect.left}px`;
-      this.bottomSide.style.top = `${rect.bottom + borderOffset}px`;
-      this.bottomSide.style.width = `${rect.width + borderOffset}px`;
-      this.bottomSide.style.height = '100vh';
-      this.bottomSide.style.backgroundColor = 'rgba(0, 0, 0, 0.4)';
-      // Right
-      this.rightSide.style.position = 'absolute';
-      this.rightSide.style.left = `${rect.right + borderOffset}px`;
-      this.rightSide.style.top = '0px';
-      this.rightSide.style.width = '100%';
-      this.rightSide.style.height = '100vh';
-      this.rightSide.style.backgroundColor = 'rgba(0, 0, 0, 0.4)';
-      // Restore the visibility of the screenshot-modal
-      this.screenshotModal.style.backgroundColor = 'transparent';
-    };
-    this.handleMouseClickedSelectedElement = async (event) => {
-      event.preventDefault();
-      if (!this.elementSelected || !this.hoveredElement) {
-        return;
-      }
-      this.hasSelectedElement = true;
-      // Remove highlight from ALL previously selected elements
-      document.querySelectorAll('.feedback-modal-element-selected').forEach(el => {
-        el.classList.remove('feedback-modal-element-selected');
-      });
-      // Add highlight to newly selected element
-      this.hoveredElement.classList.add('feedback-modal-element-selected');
-      // Store element bounds in viewport coordinates
-      this.selectedElementBounds = this.hoveredElementBounds;
-      this.originalElement = this.hoveredElement;
-      // Show loading state in top bar
+    this.openScreenShot = async () => {
+      // Show loading state immediately
       this.takingScreenshot = true;
-      // Take screenshot FIRST while highlight is still visible
       try {
-        const dataUrl = await this.captureScreenshot();
-        console.log('Screenshot captured');
+        // Capture viewport screenshot immediately
+        const dataUrl = await this.captureViewportScreenshot();
         this.encodedScreenshot = dataUrl;
+        this.originalImageData = dataUrl;
         // Reset loading state
         this.takingScreenshot = false;
-        // NOW hide screenshot interface after capturing
-        this.showScreenshotTopBar = false;
-        this.showScreenshotMode = false;
-        // Restore normal page state
-        this.resetOverflow();
-        // Show modal with the captured screenshot
-        this.showModal = true;
+        // Skip preview modal and go directly to canvas editor
+        this.showModal = false;
+        this.showCanvasEditor = true;
+        // Initialize canvas after a short delay to ensure DOM is ready
+        setTimeout(() => {
+          this.initializeCanvas();
+        }, 100);
       }
       catch (error) {
         console.error('Failed to capture screenshot:', error);
-        this.hasSelectedElement = false;
         // Reset loading state on error
         this.takingScreenshot = false;
-        // Still need to cleanup on error
-        this.showScreenshotTopBar = false;
-        this.showScreenshotMode = false;
-        this.resetOverflow();
+        // Show modal anyway
         this.showModal = true;
       }
     };
+    this.openCanvasEditor = (event) => {
+      if (event) {
+        event.stopPropagation();
+      }
+      this.showModal = false;
+      this.showCanvasEditor = true;
+      // Initialize canvas after a short delay to ensure DOM is ready
+      setTimeout(() => {
+        this.initializeCanvas();
+      }, 100);
+    };
+    this.closeCanvasEditor = () => {
+      this.showCanvasEditor = false;
+      this.showModal = true;
+    };
+    this.saveAnnotations = () => {
+      if (this.canvasRef) {
+        // Create final image with annotations
+        const finalDataUrl = this.canvasRef.toDataURL('image/png');
+        this.encodedScreenshot = finalDataUrl;
+      }
+      this.showCanvasEditor = false;
+      this.showModal = true;
+    };
+    this.initializeCanvas = () => {
+      if (!this.canvasRef || !this.originalImageData)
+        return;
+      this.canvasContext = this.canvasRef.getContext('2d');
+      const img = new Image();
+      img.onload = () => {
+        // Set canvas to original image dimensions
+        this.canvasRef.width = img.width;
+        this.canvasRef.height = img.height;
+        // Get available container dimensions
+        const containerWidth = this.canvasRef.parentElement.clientWidth - 32; // Account for reduced padding (16px * 2)
+        const containerHeight = this.canvasRef.parentElement.clientHeight - 32;
+        // Calculate scale factors for both dimensions
+        const scaleX = containerWidth / img.width;
+        const scaleY = containerHeight / img.height;
+        // Use the smaller scale to ensure complete image fits
+        const scale = Math.min(scaleX, scaleY, 1); // Never scale up, only down
+        // Calculate final display dimensions
+        const displayWidth = img.width * scale;
+        const displayHeight = img.height * scale;
+        // Set CSS size for display (this scales the canvas visually)
+        this.canvasRef.style.width = `${displayWidth}px`;
+        this.canvasRef.style.height = `${displayHeight}px`;
+        console.log('Canvas initialized with complete image fit:', {
+          originalWidth: img.width,
+          originalHeight: img.height,
+          displayWidth,
+          displayHeight,
+          scale,
+          scaleX,
+          scaleY,
+          containerWidth,
+          containerHeight,
+          usingScale: scale === scaleX ? 'width-limited' : 'height-limited'
+        });
+        // Draw the original image at full resolution
+        this.canvasContext.drawImage(img, 0, 0);
+        // Redraw existing annotations
+        this.redrawAnnotations();
+      };
+      img.src = this.originalImageData;
+    };
+    this.redrawAnnotations = () => {
+      if (!this.canvasContext)
+        return;
+      // Clear and redraw background image
+      const img = new Image();
+      img.onload = () => {
+        this.canvasContext.clearRect(0, 0, this.canvasRef.width, this.canvasRef.height);
+        this.canvasContext.drawImage(img, 0, 0);
+        // Draw all annotations
+        this.annotations.forEach(annotation => {
+          this.drawAnnotation(annotation);
+        });
+      };
+      img.src = this.originalImageData;
+    };
+    this.drawAnnotation = (annotation) => {
+      if (!this.canvasContext)
+        return;
+      this.canvasContext.strokeStyle = annotation.color;
+      this.canvasContext.lineWidth = annotation.lineWidth;
+      this.canvasContext.lineCap = 'round';
+      this.canvasContext.lineJoin = 'round';
+      switch (annotation.type) {
+        case 'rectangle':
+          this.canvasContext.strokeRect(annotation.startX, annotation.startY, annotation.width, annotation.height);
+          // Rectangle resize handles disabled for now
+          break;
+        case 'line':
+          this.canvasContext.beginPath();
+          this.canvasContext.moveTo(annotation.startX, annotation.startY);
+          this.canvasContext.lineTo(annotation.endX, annotation.endY);
+          this.canvasContext.stroke();
+          // Draw resize handles if this annotation is hovered
+          if (this.hoveredAnnotation === annotation) {
+            this.drawLineResizeHandles(annotation);
+          }
+          break;
+        case 'arrow':
+          this.drawArrow(annotation.startX, annotation.startY, annotation.endX, annotation.endY);
+          // Draw resize handles if this annotation is hovered
+          if (this.hoveredAnnotation === annotation) {
+            this.drawLineResizeHandles(annotation); // Same as line
+          }
+          break;
+        case 'text':
+          const fontSize = annotation.fontSize || 16;
+          this.canvasContext.fillStyle = annotation.color;
+          this.canvasContext.font = `${fontSize}px Arial`;
+          this.canvasContext.fillText(annotation.text, annotation.x, annotation.y);
+          // Draw resize handle if this annotation is hovered
+          if (this.hoveredAnnotation === annotation) {
+            this.drawTextResizeHandle(annotation);
+          }
+          break;
+      }
+    };
+    // Draw resize handle for text annotation
+    this.drawTextResizeHandle = (annotation) => {
+      if (!this.canvasContext || annotation.type !== 'text')
+        return;
+      const fontSize = annotation.fontSize || 16;
+      const textWidth = this.getTextWidth(annotation.text, fontSize);
+      const handleSize = 8;
+      const handleX = annotation.x + textWidth;
+      const handleY = annotation.y;
+      // Draw resize handle (small square) - using widget primary color
+      this.canvasContext.fillStyle = '#0070F4'; // var(--feedback-primary-color)
+      this.canvasContext.strokeStyle = '#ffffff';
+      this.canvasContext.lineWidth = 2;
+      this.canvasContext.fillRect(handleX - handleSize / 2, handleY - handleSize / 2, handleSize, handleSize);
+      this.canvasContext.strokeRect(handleX - handleSize / 2, handleY - handleSize / 2, handleSize, handleSize);
+    };
+    this.drawArrow = (fromX, fromY, toX, toY) => {
+      const headlen = 15; // Arrow head length
+      const angle = Math.atan2(toY - fromY, toX - fromX);
+      // Draw line
+      this.canvasContext.beginPath();
+      this.canvasContext.moveTo(fromX, fromY);
+      this.canvasContext.lineTo(toX, toY);
+      this.canvasContext.stroke();
+      // Draw arrow head
+      this.canvasContext.beginPath();
+      this.canvasContext.moveTo(toX, toY);
+      this.canvasContext.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
+      this.canvasContext.moveTo(toX, toY);
+      this.canvasContext.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
+      this.canvasContext.stroke();
+    };
+    this.undoLastAnnotation = () => {
+      this.annotations = this.annotations.slice(0, -1);
+      this.redrawAnnotations();
+    };
+    // Handle color slot editing
+    this.handleColorSlotClick = (colorIndex) => {
+      if (this.editingColorIndex === colorIndex) {
+        // If already editing this slot, just select the color
+        this.canvasDrawingColor = this.defaultColors[colorIndex];
+        this.showColorPicker = false;
+        this.editingColorIndex = -1;
+      }
+      else {
+        // Start editing this color slot
+        this.editingColorIndex = colorIndex;
+        this.showColorPicker = true;
+        this.canvasDrawingColor = this.defaultColors[colorIndex];
+      }
+    };
+    // Update color in slot
+    this.updateColorSlot = (newColor) => {
+      if (this.editingColorIndex >= 0 && this.editingColorIndex < this.defaultColors.length) {
+        this.defaultColors[this.editingColorIndex] = newColor;
+        this.canvasDrawingColor = newColor;
+        this.showColorPicker = false;
+        this.editingColorIndex = -1;
+        // Force reactivity
+        this.defaultColors = [...this.defaultColors];
+      }
+    };
+    // Handle color picker input without closing
+    this.handleColorPickerInput = (event) => {
+      event.stopPropagation();
+      const newColor = event.target.value;
+      if (this.editingColorIndex >= 0 && this.editingColorIndex < this.defaultColors.length) {
+        this.defaultColors[this.editingColorIndex] = newColor;
+        this.canvasDrawingColor = newColor;
+        // Force reactivity
+        this.defaultColors = [...this.defaultColors];
+      }
+    };
+    // Handle color picker click to prevent closing
+    this.handleColorPickerClick = (event) => {
+      event.stopPropagation();
+    };
+    // Close color picker
+    this.closeColorPicker = () => {
+      this.showColorPicker = false;
+      this.editingColorIndex = -1;
+    };
+    // Check if point is in resize handle for any annotation type
+    this.isPointInResizeHandle = (x, y, annotation) => {
+      const handleSize = 8;
+      switch (annotation.type) {
+        case 'text':
+          const textWidth = this.getTextWidth(annotation.text, annotation.fontSize || 16);
+          const handleX = annotation.x + textWidth;
+          const handleY = annotation.y;
+          return x >= handleX - handleSize / 2 && x <= handleX + handleSize / 2 &&
+            y >= handleY - handleSize / 2 && y <= handleY + handleSize / 2;
+        case 'rectangle':
+          // Rectangle resizing disabled for now
+          return false;
+        case 'line':
+        case 'arrow':
+          // Check both endpoint handles
+          const lineHandles = [
+            { x: annotation.startX, y: annotation.startY, point: 'start' },
+            { x: annotation.endX, y: annotation.endY, point: 'end' }
+          ];
+          for (const handle of lineHandles) {
+            if (x >= handle.x - handleSize / 2 && x <= handle.x + handleSize / 2 &&
+              y >= handle.y - handleSize / 2 && y <= handle.y + handleSize / 2) {
+              return handle.point; // Return which endpoint was clicked
+            }
+          }
+          return false;
+        default:
+          return false;
+      }
+    };
+    // Get text width for resize handle positioning
+    this.getTextWidth = (text, fontSize) => {
+      // Approximate text width calculation
+      return text.length * fontSize * 0.6;
+    };
+    // Start text resize
+    this.startTextResize = (annotation, startPos) => {
+      this.isResizing = true;
+      this.resizingAnnotation = annotation;
+      this.resizeStartSize = annotation.fontSize || 16;
+      this.dragStartPos = startPos;
+    };
+    // Handle text resize
+    this.handleTextResize = (currentPos) => {
+      if (!this.resizingAnnotation || !this.dragStartPos)
+        return;
+      const deltaX = currentPos.x - this.dragStartPos.x;
+      const deltaY = currentPos.y - this.dragStartPos.y;
+      const avgDelta = (deltaX + deltaY) / 2;
+      // Calculate new font size (minimum 8px, maximum 72px)
+      const newSize = Math.max(8, Math.min(72, this.resizeStartSize + avgDelta * 0.5));
+      // Update annotation font size
+      const index = this.annotations.findIndex(a => a === this.resizingAnnotation);
+      if (index !== -1) {
+        this.annotations[index] = Object.assign(Object.assign({}, this.resizingAnnotation), { fontSize: Math.round(newSize) });
+        this.resizingAnnotation = this.annotations[index];
+      }
+      this.redrawAnnotations();
+    };
+    // Start resize for any annotation type
+    this.startResize = (annotation, handle, startPos) => {
+      this.isResizing = true;
+      this.resizingAnnotation = annotation;
+      this.resizeHandle = handle;
+      this.dragStartPos = startPos;
+      // Store original values for different annotation types
+      if (annotation.type === 'text') {
+        this.resizeStartSize = annotation.fontSize || 16;
+      }
+    };
+    // Enhanced mouse down handler with resize detection for all annotation types
+    this.handleCanvasMouseDown = (event) => {
+      if (!this.canvasRef)
+        return;
+      // Close color picker if open
+      if (this.showColorPicker) {
+        this.closeColorPicker();
+      }
+      const coords = this.getCanvasCoordinates(event);
+      // Check if clicking on existing annotation first
+      const found = this.findAnnotationAt(coords.x, coords.y);
+      if (found) {
+        // Check if clicking on resize handle for any annotation type
+        const handle = this.isPointInResizeHandle(coords.x, coords.y, found.annotation);
+        if (handle) {
+          this.startResize(found.annotation, handle, coords);
+          this.canvasRef.style.cursor = 'nw-resize';
+          return;
+        }
+        // Start dragging existing annotation
+        if (!this.isDrawing) {
+          this.isDragging = true;
+          this.draggedAnnotation = found.annotation;
+          this.dragStartPos = coords;
+          this.canvasRef.style.cursor = 'grabbing';
+          return;
+        }
+      }
+      // Original drawing logic
+      this.isDrawing = true;
+      if (this.canvasDrawingTool === 'text') {
+        const text = prompt('Enter text:');
+        if (text) {
+          const annotation = {
+            type: 'text',
+            x: coords.x,
+            y: coords.y,
+            text,
+            color: this.canvasDrawingColor,
+            fontSize: 16
+          };
+          this.annotations = [...this.annotations, annotation];
+          this.redrawAnnotations();
+        }
+        this.isDrawing = false;
+      }
+      else {
+        this.currentAnnotation = {
+          type: this.canvasDrawingTool,
+          startX: coords.x,
+          startY: coords.y,
+          color: this.canvasDrawingColor,
+          lineWidth: this.canvasLineWidth
+        };
+      }
+    };
+    this.handleCanvasMouseMove = (event) => {
+      if (!this.canvasRef)
+        return;
+      const coords = this.getCanvasCoordinates(event);
+      // Handle resizing for any annotation type
+      if (this.isResizing && this.resizingAnnotation) {
+        this.handleResize(coords);
+        return;
+      }
+      // Handle dragging existing annotation
+      if (this.isDragging && this.draggedAnnotation && this.dragStartPos) {
+        const deltaX = coords.x - this.dragStartPos.x;
+        const deltaY = coords.y - this.dragStartPos.y;
+        // Update annotation position
+        const updatedAnnotation = Object.assign({}, this.draggedAnnotation);
+        switch (updatedAnnotation.type) {
+          case 'rectangle':
+            updatedAnnotation.startX += deltaX;
+            updatedAnnotation.startY += deltaY;
+            break;
+          case 'line':
+          case 'arrow':
+            updatedAnnotation.startX += deltaX;
+            updatedAnnotation.startY += deltaY;
+            updatedAnnotation.endX += deltaX;
+            updatedAnnotation.endY += deltaY;
+            break;
+          case 'text':
+            updatedAnnotation.x += deltaX;
+            updatedAnnotation.y += deltaY;
+            break;
+        }
+        // Update annotation in array
+        const index = this.annotations.findIndex(a => a === this.draggedAnnotation);
+        if (index !== -1) {
+          this.annotations[index] = updatedAnnotation;
+          this.draggedAnnotation = updatedAnnotation;
+        }
+        this.dragStartPos = coords;
+        this.redrawAnnotations();
+        return;
+      }
+      // Handle drawing new annotation
+      if (this.isDrawing && this.currentAnnotation) {
+        if (this.canvasDrawingTool === 'rectangle') {
+          this.currentAnnotation.width = coords.x - this.currentAnnotation.startX;
+          this.currentAnnotation.height = coords.y - this.currentAnnotation.startY;
+        }
+        else {
+          this.currentAnnotation.endX = coords.x;
+          this.currentAnnotation.endY = coords.y;
+        }
+        this.redrawAnnotations();
+        this.drawAnnotation(this.currentAnnotation);
+        return;
+      }
+      // Handle hover states and cursor changes
+      const found = this.findAnnotationAt(coords.x, coords.y);
+      if (found) {
+        // Check if hovering over resize handle for any annotation type
+        const handle = this.isPointInResizeHandle(coords.x, coords.y, found.annotation);
+        if (handle) {
+          this.canvasRef.style.cursor = 'nw-resize';
+          this.hoveredAnnotation = found.annotation;
+          this.redrawAnnotations();
+          return;
+        }
+        // Regular hover over annotation
+        this.canvasRef.style.cursor = 'grab';
+        if (this.hoveredAnnotation !== found.annotation) {
+          this.hoveredAnnotation = found.annotation;
+          this.redrawAnnotations();
+        }
+      }
+      else {
+        // No annotation under cursor
+        this.canvasRef.style.cursor = 'crosshair';
+        if (this.hoveredAnnotation) {
+          this.hoveredAnnotation = null;
+          this.redrawAnnotations();
+        }
+      }
+    };
+    this.handleCanvasMouseUp = () => {
+      // Handle end of text resizing
+      if (this.isResizing) {
+        this.isResizing = false;
+        this.resizingAnnotation = null;
+        this.dragStartPos = null;
+        this.resizeHandle = false;
+        if (this.canvasRef) {
+          this.canvasRef.style.cursor = 'crosshair';
+        }
+        return;
+      }
+      // Handle end of dragging
+      if (this.isDragging) {
+        this.isDragging = false;
+        this.draggedAnnotation = null;
+        this.dragStartPos = null;
+        if (this.canvasRef) {
+          this.canvasRef.style.cursor = 'crosshair';
+        }
+        return;
+      }
+      // Handle end of drawing
+      if (!this.isDrawing || !this.currentAnnotation)
+        return;
+      this.isDrawing = false;
+      this.annotations = [...this.annotations, this.currentAnnotation];
+      this.currentAnnotation = null;
+      this.redrawAnnotations();
+    };
+    // Draw resize handles for rectangle annotation
+    this.drawRectangleResizeHandles = (annotation) => {
+      if (!this.canvasContext || annotation.type !== 'rectangle')
+        return;
+      const handleSize = 8;
+      const left = annotation.startX;
+      const top = annotation.startY;
+      const right = annotation.startX + annotation.width;
+      const bottom = annotation.startY + annotation.height;
+      // Define handle positions (4 corners)
+      const handles = [
+        { x: left, y: top },
+        { x: right, y: top },
+        { x: right, y: bottom },
+        { x: left, y: bottom } // Bottom-left
+      ];
+      // Draw each handle
+      this.canvasContext.fillStyle = '#0070F4'; // Primary color
+      this.canvasContext.strokeStyle = '#ffffff';
+      this.canvasContext.lineWidth = 2;
+      handles.forEach(handle => {
+        this.canvasContext.fillRect(handle.x - handleSize / 2, handle.y - handleSize / 2, handleSize, handleSize);
+        this.canvasContext.strokeRect(handle.x - handleSize / 2, handle.y - handleSize / 2, handleSize, handleSize);
+      });
+    };
+    // Draw resize handles for line/arrow annotation
+    this.drawLineResizeHandles = (annotation) => {
+      if (!this.canvasContext || (annotation.type !== 'line' && annotation.type !== 'arrow'))
+        return;
+      const handleSize = 8;
+      // Define handle positions (2 endpoints)
+      const handles = [
+        { x: annotation.startX, y: annotation.startY },
+        { x: annotation.endX, y: annotation.endY } // End point
+      ];
+      // Draw each handle
+      this.canvasContext.fillStyle = '#0070F4'; // Primary color
+      this.canvasContext.strokeStyle = '#ffffff';
+      this.canvasContext.lineWidth = 2;
+      handles.forEach(handle => {
+        this.canvasContext.fillRect(handle.x - handleSize / 2, handle.y - handleSize / 2, handleSize, handleSize);
+        this.canvasContext.strokeRect(handle.x - handleSize / 2, handle.y - handleSize / 2, handleSize, handleSize);
+      });
+    };
+    // Convert screen coordinates to canvas coordinates
+    this.getCanvasCoordinates = (event) => {
+      if (!this.canvasRef)
+        return { x: 0, y: 0 };
+      const rect = this.canvasRef.getBoundingClientRect();
+      // Calculate the scale factor between display size and actual canvas size
+      const scaleX = this.canvasRef.width / rect.width;
+      const scaleY = this.canvasRef.height / rect.height;
+      const x = (event.clientX - rect.left) * scaleX;
+      const y = (event.clientY - rect.top) * scaleY;
+      return { x, y };
+    };
+    // Find annotation under mouse cursor
+    this.findAnnotationAt = (x, y) => {
+      // Check in reverse order (top to bottom)
+      for (let i = this.annotations.length - 1; i >= 0; i--) {
+        const annotation = this.annotations[i];
+        if (this.isPointInAnnotation(x, y, annotation)) {
+          return { annotation, index: i };
+        }
+      }
+      return null;
+    };
+    // Check if point is within annotation bounds
+    this.isPointInAnnotation = (x, y, annotation) => {
+      const tolerance = 10; // Click tolerance
+      switch (annotation.type) {
+        case 'rectangle':
+          const left = Math.min(annotation.startX, annotation.startX + annotation.width);
+          const right = Math.max(annotation.startX, annotation.startX + annotation.width);
+          const top = Math.min(annotation.startY, annotation.startY + annotation.height);
+          const bottom = Math.max(annotation.startY, annotation.startY + annotation.height);
+          return x >= left - tolerance && x <= right + tolerance &&
+            y >= top - tolerance && y <= bottom + tolerance;
+        case 'line':
+        case 'arrow':
+          // Distance from point to line
+          const A = annotation.endY - annotation.startY;
+          const B = annotation.startX - annotation.endX;
+          const C = annotation.endX * annotation.startY - annotation.startX * annotation.endY;
+          const distance = Math.abs(A * x + B * y + C) / Math.sqrt(A * A + B * B);
+          return distance <= tolerance;
+        case 'text':
+          // Simple bounding box for text
+          return x >= annotation.x - tolerance && x <= annotation.x + 100 &&
+            y >= annotation.y - 20 && y <= annotation.y + tolerance;
+        default:
+          return false;
+      }
+    };
+    // Handle resize for different annotation types
+    this.handleResize = (currentPos) => {
+      if (!this.resizingAnnotation || !this.dragStartPos)
+        return;
+      const annotation = this.resizingAnnotation;
+      const index = this.annotations.findIndex(a => a === annotation);
+      if (index === -1)
+        return;
+      let updatedAnnotation = Object.assign({}, annotation);
+      switch (annotation.type) {
+        case 'text':
+          // Text resize logic (existing)
+          const deltaX = currentPos.x - this.dragStartPos.x;
+          const deltaY = currentPos.y - this.dragStartPos.y;
+          const avgDelta = (deltaX + deltaY) / 2;
+          const newSize = Math.max(8, Math.min(72, this.resizeStartSize + avgDelta * 0.5));
+          updatedAnnotation.fontSize = Math.round(newSize);
+          break;
+        case 'rectangle':
+          // Rectangle resizing disabled for now
+          return;
+        case 'line':
+        case 'arrow':
+          // Line/arrow resize logic - move endpoints
+          if (this.resizeHandle === 'start') {
+            updatedAnnotation.startX = currentPos.x;
+            updatedAnnotation.startY = currentPos.y;
+          }
+          else if (this.resizeHandle === 'end') {
+            updatedAnnotation.endX = currentPos.x;
+            updatedAnnotation.endY = currentPos.y;
+          }
+          break;
+      }
+      // Update annotation in array
+      this.annotations[index] = updatedAnnotation;
+      this.resizingAnnotation = updatedAnnotation;
+      this.redrawAnnotations();
+    };
     this.sending = false;
     this.formMessage = '';
     this.formEmail = '';
@@ -9218,6 +9729,26 @@ const FeedbackModal = class {
     this.selectedRating = -1;
     this.overlayVisible = false;
     this.isAnimating = false;
+    this.takingScreenshot = false;
+    this.showPreviewModal = false;
+    this.showCanvasEditor = false;
+    this.canvasDrawingTool = 'rectangle';
+    this.canvasDrawingColor = '#ff0000';
+    this.canvasLineWidth = 3;
+    this.isDrawing = false;
+    this.annotations = [];
+    this.currentAnnotation = null;
+    this.isDragging = false;
+    this.draggedAnnotation = null;
+    this.dragStartPos = null;
+    this.showColorPicker = false;
+    this.editingColorIndex = -1;
+    this.isResizing = false;
+    this.resizingAnnotation = null;
+    this.resizeStartSize = 16;
+    this.hoveredAnnotation = null;
+    this.resizeHandle = false;
+    this.defaultColors = ['#ff0000', '#00ff00', '#0000ff', '#000000'];
     this.customFont = false;
     this.emailAddress = '';
     this.hideEmail = false;
@@ -9253,8 +9784,9 @@ const FeedbackModal = class {
     this.screenshotTakingText = 'Taking screenshot...';
     this.screenshotTopbarText = 'Select an element on this page';
     this.successMessage = '';
-    this.takingScreenshot = false;
-    this.showPreviewModal = false;
+    this.canvasEditorTitle = 'Edit screenshot';
+    this.canvasEditorCancelText = 'Cancel';
+    this.canvasEditorSaveText = 'Save';
   }
   componentWillLoad() {
     if (this.fetchData)
@@ -9289,46 +9821,51 @@ const FeedbackModal = class {
   handleEmailInput(event) {
     this.formEmail = event.target.value;
   }
-  captureScreenshot() {
+  captureViewportScreenshot() {
     return new Promise((resolve, reject) => {
-      // Add a small delay to ensure CSS highlight is applied
-      setTimeout(() => {
-        requestAnimationFrame(() => {
-          if (!this.selectedElementBounds) {
-            reject(new Error('No element selected'));
-            return;
+      requestAnimationFrame(() => {
+        // Get viewport dimensions and scroll position
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const scrollX = window.scrollX || window.pageXOffset || 0;
+        const scrollY = window.scrollY || window.pageYOffset || 0;
+        // Capture exactly what the user sees in their viewport
+        html2canvasPro(document.documentElement, {
+          x: scrollX,
+          y: scrollY,
+          width: viewportWidth,
+          height: viewportHeight,
+          scrollX: 0,
+          scrollY: 0,
+          allowTaint: false,
+          useCORS: true,
+          scale: 1,
+          backgroundColor: '#ffffff',
+          logging: false,
+          foreignObjectRendering: false,
+          imageTimeout: 15000,
+          windowWidth: viewportWidth,
+          windowHeight: viewportHeight,
+          removeContainer: true,
+          ignoreElements: (element) => {
+            // Ignore all feedback modal elements
+            return element.closest('feedback-modal') !== null ||
+              element.classList.contains('feedback-overlay') ||
+              element.classList.contains('feedback-modal-screenshot-header') ||
+              element.tagName === 'FEEDBACK-MODAL' ||
+              element.tagName === 'FEEDBACK-BUTTON';
           }
-          // Capture what's currently visible in the viewport
-          html2canvasPro(document.body, {
-            x: window.scrollX,
-            y: window.scrollY,
-            width: window.innerWidth,
-            height: window.innerHeight,
-            scrollX: window.scrollX,
-            scrollY: window.scrollY,
-            allowTaint: false,
-            useCORS: true,
-            scale: 1,
-            backgroundColor: '#ffffff',
-            logging: true,
-            foreignObjectRendering: false,
-            imageTimeout: 10000,
-            ignoreElements: (element) => {
-              // Only ignore screenshot UI, keep everything else including highlights
-              return element.classList.contains('feedback-modal-screenshot-header') ||
-                element.classList.contains('feedback-overlay');
-            }
-          })
-            .then((canvas) => {
-            const dataUrl = canvas.toDataURL();
-            resolve(dataUrl);
-          })
-            .catch((error) => {
-            console.error('Failed to capture screenshot:', error);
-            reject(error);
-          });
+        })
+          .then((canvas) => {
+          const dataUrl = canvas.toDataURL('image/png');
+          console.log('Screenshot captured successfully, size:', canvas.width, 'x', canvas.height);
+          resolve(dataUrl);
+        })
+          .catch((error) => {
+          console.error('Failed to capture viewport screenshot:', error);
+          reject(error);
         });
-      }, 100); // Small delay to ensure CSS is applied
+      });
     });
   }
   handleCheckboxChange(event) {
@@ -9341,7 +9878,7 @@ const FeedbackModal = class {
     this.selectedRating = newRating;
   }
   render() {
-    return (index.h("div", { class: `feedback-modal-wrapper ${this.customFont ? 'feedback-modal-wrapper--custom-font' : ''}` }, this.showScreenshotMode && (index.h("div", { class: "feedback-modal-screenshot", ref: (el) => (this.screenshotModal = el), onMouseMove: this.handleMouseOverScreenShot }, index.h("div", { class: "feedback-modal-screenshot-element-selected", ref: (el) => (this.elementSelected = el), onClick: this.handleMouseClickedSelectedElement }), index.h("div", { class: "top-side", ref: (el) => (this.topSide = el) }), index.h("div", { class: "left-side", ref: (el) => (this.leftSide = el) }), index.h("div", { class: "bottom-side", ref: (el) => (this.bottomSide = el) }), index.h("div", { class: "right-side", ref: (el) => (this.rightSide = el) }), this.showScreenshotTopBar && (index.h("div", { class: "feedback-modal-screenshot-header", onClick: this.closeScreenShot }, index.h("span", null, this.takingScreenshot ? this.screenshotTakingText : this.screenshotTopbarText), index.h("span", { class: "feedback-modal-screenshot-close" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "#191919", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-x" }, index.h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), index.h("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))))), this.showModal && (index.h("div", { class: `feedback-overlay ${this.isAnimating ? 'feedback-overlay--visible' : ''}` })), this.showModal && (index.h("div", { class: `feedback-modal-content feedback-modal-content--${this.modalPosition} ${this.isAnimating ? 'feedback-modal-content--open' : ''}`, ref: (el) => (this.modalContent = el) }, index.h("div", { class: "feedback-modal-header" }, !this.formSuccess && !this.formError ? (index.h("span", null, this.modalTitle)) : this.formSuccess ? (index.h("span", null, this.modalTitleSuccess)) : (index.h("span", null, this.modalTitleError)), index.h("button", { class: "feedback-modal-close", onClick: this.close }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "#191919", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-x" }, index.h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), index.h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))), index.h("div", { class: "feedback-modal-body" }, !this.formSuccess && !this.formError ? (index.h("form", { onSubmit: this.handleSubmit }, !this.hideRating && (index.h("div", { class: "feedback-modal-rating" }, this.ratingMode === 'thumbs' ? (index.h("div", { class: "feedback-modal-rating-content" }, index.h("span", { class: "feedback-modal-input-heading" }, this.ratingPlaceholder), index.h("div", { class: "feedback-modal-rating-buttons feedback-modal-rating-buttons--thumbs" }, index.h("button", { title: "Yes", class: `feedback-modal-rating-button ${this.selectedRating === 1
+    return (index.h("div", { class: `feedback-modal-wrapper ${this.customFont ? 'feedback-modal-wrapper--custom-font' : ''}` }, this.showModal && (index.h("div", { class: `feedback-overlay ${this.isAnimating ? 'feedback-overlay--visible' : ''}` })), this.showModal && (index.h("div", { class: `feedback-modal-content feedback-modal-content--${this.modalPosition} ${this.isAnimating ? 'feedback-modal-content--open' : ''}`, ref: (el) => (this.modalContent = el) }, index.h("div", { class: "feedback-modal-header" }, !this.formSuccess && !this.formError ? (index.h("span", null, this.modalTitle)) : this.formSuccess ? (index.h("span", null, this.modalTitleSuccess)) : (index.h("span", null, this.modalTitleError)), index.h("button", { class: "feedback-modal-close", onClick: this.close }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "#191919", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-x" }, index.h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), index.h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))), index.h("div", { class: "feedback-modal-body" }, !this.formSuccess && !this.formError ? (index.h("form", { onSubmit: this.handleSubmit }, !this.hideRating && (index.h("div", { class: "feedback-modal-rating" }, this.ratingMode === 'thumbs' ? (index.h("div", { class: "feedback-modal-rating-content" }, index.h("span", { class: "feedback-modal-input-heading" }, this.ratingPlaceholder), index.h("div", { class: "feedback-modal-rating-buttons feedback-modal-rating-buttons--thumbs" }, index.h("button", { title: "Yes", class: `feedback-modal-rating-button ${this.selectedRating === 1
         ? 'feedback-modal-rating-button--selected'
         : ''}`, onClick: (event) => {
         event.preventDefault();
@@ -9356,7 +9893,8 @@ const FeedbackModal = class {
         : ''}`, onClick: (event) => {
         event.preventDefault();
         this.handleRatingChange(rating);
-      } }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })))))))))), index.h("div", { class: "feedback-modal-text" }, index.h("textarea", { placeholder: this.messagePlaceholder, value: this.formMessage, onInput: (event) => this.handleMessageInput(event) })), !this.hideEmail && (index.h("div", { class: "feedback-modal-email" }, index.h("input", { placeholder: this.emailPlaceholder, type: "email", onInput: (event) => this.handleEmailInput(event), value: this.formEmail, required: this.isEmailRequired }))), index.h("div", { class: "feedback-verification" }, index.h("input", { type: "text", name: "verification", style: { display: 'none' }, onInput: (event) => this.handleVerification(event), value: this.formVerification })), !this.hidePrivacyPolicy && (index.h("div", { class: "feedback-modal-privacy" }, index.h("input", { type: "checkbox", id: "privacyPolicy", onChange: (ev) => this.handleCheckboxChange(ev), required: true }), index.h("span", { innerHTML: this.privacyPolicyText }))), index.h("div", { class: `feedback-modal-buttons ${this.hideScreenshotButton ? 'single' : ''}` }, !this.hideScreenshotButton && (index.h("button", { type: "button", class: `feedback-modal-button feedback-modal-button--screenshot ${this.encodedScreenshot ? 'feedback-modal-button--active' : ''}`, onClick: this.openScreenShot, disabled: this.sending }, this.encodedScreenshot && (index.h("div", { class: "screenshot-preview", onClick: this.openPreviewModal }, index.h("img", { src: this.encodedScreenshot, alt: "Screenshot Preview" }))), !this.encodedScreenshot && (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 -960 960 960", width: "24" }, index.h("path", { d: "M680-80v-120H560v-80h120v-120h80v120h120v80H760v120h-80ZM200-200v-200h80v120h120v80H200Zm0-360v-200h200v80H280v120h-80Zm480 0v-120H560v-80h200v200h-80Z" }))), this.encodedScreenshot ? this.screenshotAttachedText : this.screenshotButtonText)), index.h("button", { class: "feedback-modal-button feedback-modal-button--submit", type: "submit", disabled: this.sending }, this.sendButtonText)))) : this.formSuccess && !this.formError ? (index.h("div", { class: "feedback-modal-success" }, index.h("p", { class: "feedback-modal-message" }, this.successMessage))) : this.formError && this.formErrorStatus == 404 ? (index.h("p", { class: "feedback-modal-message" }, this.errorMessage404)) : this.formError && this.formErrorStatus == 403 ? (index.h("p", { class: "feedback-modal-message" }, this.errorMessage403)) : this.formError ? (index.h("p", { class: "feedback-modal-message" }, this.errorMessage)) : (index.h("span", null))), index.h("div", { class: "feedback-modal-footer" }, index.h("div", { class: "feedback-logo", style: { display: this.whitelabel ? 'none' : 'block' } }, "Powered by", ' ', index.h("a", { target: "_blank", href: "https://pushfeedback.com" }, "PushFeedback.com")), this.footerText && (index.h("div", { class: "feedback-footer-text" }, index.h("span", { innerHTML: this.footerText })))))), this.showPreviewModal && (index.h("div", { class: "preview-modal-overlay", onClick: this.closePreviewModal }, index.h("div", { class: "preview-modal" }, index.h("img", { src: this.encodedScreenshot, alt: "Screenshot Preview", onClick: (e) => e.stopPropagation() }))))));
+      } }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })))))))))), index.h("div", { class: "feedback-modal-text" }, index.h("textarea", { placeholder: this.messagePlaceholder, value: this.formMessage, onInput: (event) => this.handleMessageInput(event) })), !this.hideEmail && (index.h("div", { class: "feedback-modal-email" }, index.h("input", { placeholder: this.emailPlaceholder, type: "email", onInput: (event) => this.handleEmailInput(event), value: this.formEmail, required: this.isEmailRequired }))), index.h("div", { class: "feedback-verification" }, index.h("input", { type: "text", name: "verification", style: { display: 'none' }, onInput: (event) => this.handleVerification(event), value: this.formVerification })), !this.hidePrivacyPolicy && (index.h("div", { class: "feedback-modal-privacy" }, index.h("input", { type: "checkbox", id: "privacyPolicy", onChange: (ev) => this.handleCheckboxChange(ev), required: true }), index.h("span", { innerHTML: this.privacyPolicyText }))), index.h("div", { class: `feedback-modal-buttons ${this.hideScreenshotButton ? 'single' : ''}` }, !this.hideScreenshotButton && (index.h("button", { type: "button", class: `feedback-modal-button feedback-modal-button--screenshot ${this.encodedScreenshot ? 'feedback-modal-button--active' : ''}`, onClick: this.openScreenShot, disabled: this.sending || this.takingScreenshot }, this.encodedScreenshot && (index.h("div", { class: "screenshot-preview", onClick: this.openCanvasEditor }, index.h("img", { src: this.encodedScreenshot, alt: "Screenshot Preview" }))), !this.encodedScreenshot && !this.takingScreenshot && (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 -960 960 960", width: "24" }, index.h("path", { d: "M680-80v-120H560v-80h120v-120h80v120h120v80H760v120h-80ZM200-200v-200h80v120h120v80H200Zm0-360v-200h200v80H280v120h-80Zm480 0v-120H560v-80h200v200h-80Z" }))), this.takingScreenshot && (index.h("div", { class: "screenshot-loading" }, index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16" }, index.h("circle", { cx: "8", cy: "8", r: "6", fill: "none", stroke: "#666", "stroke-width": "2", "stroke-dasharray": "6 6", "transform-origin": "8 8" }, index.h("animateTransform", { attributeName: "transform", type: "rotate", values: "0 8 8;360 8 8", dur: "1s", repeatCount: "indefinite" }))))), this.takingScreenshot ? this.screenshotTakingText :
+      this.encodedScreenshot ? this.screenshotAttachedText : this.screenshotButtonText)), index.h("button", { class: "feedback-modal-button feedback-modal-button--submit", type: "submit", disabled: this.sending }, this.sendButtonText)))) : this.formSuccess && !this.formError ? (index.h("div", { class: "feedback-modal-success" }, index.h("p", { class: "feedback-modal-message" }, this.successMessage))) : this.formError && this.formErrorStatus == 404 ? (index.h("p", { class: "feedback-modal-message" }, this.errorMessage404)) : this.formError && this.formErrorStatus == 403 ? (index.h("p", { class: "feedback-modal-message" }, this.errorMessage403)) : this.formError ? (index.h("p", { class: "feedback-modal-message" }, this.errorMessage)) : (index.h("span", null))), index.h("div", { class: "feedback-modal-footer" }, index.h("div", { class: "feedback-logo", style: { display: this.whitelabel ? 'none' : 'block' } }, "Powered by", ' ', index.h("a", { target: "_blank", href: "https://pushfeedback.com" }, "PushFeedback.com")), this.footerText && (index.h("div", { class: "feedback-footer-text" }, index.h("span", { innerHTML: this.footerText })))))), this.showCanvasEditor && (index.h("div", { class: "canvas-editor-overlay" }, index.h("div", { class: "canvas-editor-modal" }, index.h("div", { class: "canvas-editor-header" }, index.h("div", { class: "canvas-editor-title" }, index.h("h3", null, this.canvasEditorTitle)), index.h("div", { class: "canvas-editor-toolbar" }, index.h("div", { class: "toolbar-section" }, index.h("div", { class: "tool-group" }, index.h("button", { class: `tool-btn ${this.canvasDrawingTool === 'rectangle' ? 'active' : ''}`, onClick: () => this.canvasDrawingTool = 'rectangle', title: "Rectangle" }, index.h("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }))), index.h("button", { class: `tool-btn ${this.canvasDrawingTool === 'line' ? 'active' : ''}`, onClick: () => this.canvasDrawingTool = 'line', title: "Line" }, index.h("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("line", { x1: "5", y1: "12", x2: "19", y2: "12" }))), index.h("button", { class: `tool-btn ${this.canvasDrawingTool === 'arrow' ? 'active' : ''}`, onClick: () => this.canvasDrawingTool = 'arrow', title: "Arrow" }, index.h("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("line", { x1: "7", y1: "17", x2: "17", y2: "7" }), index.h("polyline", { points: "7,7 17,7 17,17" }))), index.h("button", { class: `tool-btn ${this.canvasDrawingTool === 'text' ? 'active' : ''}`, onClick: () => this.canvasDrawingTool = 'text', title: "Text" }, index.h("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("polyline", { points: "4,7 4,4 20,4 20,7" }), index.h("line", { x1: "9", y1: "20", x2: "15", y2: "20" }), index.h("line", { x1: "12", y1: "4", x2: "12", y2: "20" }))), index.h("div", { class: "toolbar-divider" }), index.h("button", { class: "tool-btn undo-btn", onClick: this.undoLastAnnotation, disabled: this.annotations.length === 0, title: "Undo" }, index.h("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("polyline", { points: "1,4 1,10 7,10" }), index.h("path", { d: "M3.51,15a9,9,0,0,0,14.85-3.36,9,9,0,0,0-9.19-10.15L1.83,10" }))))), index.h("div", { class: "toolbar-section" }, index.h("div", { class: "color-palette" }, this.defaultColors.map((color, index$1) => (index.h("div", { class: "color-slot-wrapper" }, index.h("button", { class: `color-btn ${this.canvasDrawingColor === color ? 'active' : ''} ${this.editingColorIndex === index$1 ? 'editing' : ''}`, style: { backgroundColor: color }, onClick: () => this.handleColorSlotClick(index$1), title: `Color ${index$1 + 1} - Click to customize` }, this.editingColorIndex === index$1 && (index.h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "white", "stroke-width": "2" }, index.h("path", { d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" })))), this.editingColorIndex === index$1 && this.showColorPicker && (index.h("div", { class: "color-picker-dropdown" }, index.h("input", { type: "color", value: color, onInput: (e) => this.handleColorPickerInput(e), onClick: (e) => this.handleColorPickerClick(e) })))))))), index.h("div", { class: "toolbar-section" }, index.h("div", { class: "size-control" }, index.h("input", { type: "range", min: "1", max: "10", value: this.canvasLineWidth, onInput: (e) => this.canvasLineWidth = parseInt(e.target.value), class: "size-slider" }), index.h("span", { class: "size-value" }, this.canvasLineWidth, "px"))), index.h("div", { class: "toolbar-section" }, index.h("button", { class: "action-btn secondary", onClick: this.closeCanvasEditor }, this.canvasEditorCancelText), index.h("button", { class: "action-btn primary", onClick: this.saveAnnotations }, this.canvasEditorSaveText))), index.h("div", { class: "canvas-editor-content" }, index.h("canvas", { ref: (el) => this.canvasRef = el, class: "annotation-canvas", onMouseDown: this.handleCanvasMouseDown, onMouseMove: this.handleCanvasMouseMove, onMouseUp: this.handleCanvasMouseUp, onMouseLeave: this.handleCanvasMouseUp }))))))));
   }
   componentDidRender() {
     if (this.showModal) {