pushfeedback 0.1.66 → 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.';
@@ -44,6 +47,7 @@ const FeedbackButton = class {
     this.ratingStarsPlaceholder = 'How would you rate this page?';
     this.screenshotAttachedText = 'Screenshot attached';
     this.screenshotButtonText = 'Add a screenshot';
+    this.screenshotTakingText = 'Taking screenshot...';
     this.screenshotTopbarText = 'Select an element on this page';
     this.sendButtonText = 'Send';
     this.successMessage = '';
@@ -89,6 +93,9 @@ const FeedbackButton = class {
       'project',
       'rating',
       'ratingMode',
+      'canvasEditorTitle',
+      'canvasEditorCancelText',
+      'canvasEditorSaveText',
       'emailPlaceholder',
       'errorMessage',
       'errorMessage403',
@@ -104,6 +111,7 @@ const FeedbackButton = class {
       'ratingStarsPlaceholder',
       'screenshotAttachedText',
       'screenshotButtonText',
+      'screenshotTakingText',
       'screenshotTopbarText',
       'sendButtonText',
       'successMessage',
@@ -201,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
@@ -222,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 ||
@@ -266,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]) {
@@ -295,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) {
@@ -3931,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':
@@ -6207,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, 'あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわゐゑをん');
@@ -6666,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) {
@@ -6784,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 &&
@@ -6806,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();
@@ -6830,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()];
                     }
                 });
             });
@@ -7956,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:
@@ -8056,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);
@@ -8107,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';
@@ -8338,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;
@@ -8873,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 = {
@@ -8974,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:1px solid var(--feedback-modal-element-selected-border-color)}.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}.screenshot-preview img{width:100%;height:100%;object-fit:cover}.preview-modal{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);background-color:rgba(0, 0, 0, 0.8);padding:20px;border-radius:8px;z-index:1000}.preview-modal img{max-width:90vw;max-height:90vh}@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) {
@@ -9061,8 +9084,27 @@ const FeedbackModal = class {
         this.showScreenshotTopBar = false;
         this.hasSelectedElement = false;
         this.encodedScreenshot = null;
-        this.originalElement = null;
-        this.selectedElementBounds = null;
+        // Remove highlight from ALL selected elements
+        document.querySelectorAll('.feedback-modal-element-selected').forEach(el => {
+          el.classList.remove('feedback-modal-element-selected');
+        });
+        // Reset canvas editor states
+        this.takingScreenshot = false;
+        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;
@@ -9071,109 +9113,609 @@ const FeedbackModal = class {
         this.resetOverflow();
       }, 200);
     };
-    this.openScreenShot = () => {
-      this.hasSelectedElement = false;
-      this.showModal = false;
-      this.showScreenshotMode = true;
-      this.showScreenshotTopBar = true;
-      this.encodedScreenshot = null;
-      this.originalElement = null;
-      this.selectedElementBounds = null;
-      if (window.innerWidth > document.documentElement.clientWidth) {
-        document.documentElement.classList.add('feedback-modal-screenshot-open--scroll');
+    this.openScreenShot = async () => {
+      // Show loading state immediately
+      this.takingScreenshot = true;
+      try {
+        // Capture viewport screenshot immediately
+        const dataUrl = await this.captureViewportScreenshot();
+        this.encodedScreenshot = dataUrl;
+        this.originalImageData = dataUrl;
+        // Reset loading state
+        this.takingScreenshot = false;
+        // 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);
+        // Reset loading state on error
+        this.takingScreenshot = false;
+        // Show modal anyway
+        this.showModal = true;
       }
-      const scrollY = window.scrollY;
-      document.documentElement.style.top = `-${scrollY}px`;
-      window.scrollTo(0, parseInt(document.documentElement.style.top || '0') * -1);
-      document.documentElement.classList.add('feedback-modal-screenshot-open');
     };
-    this.closeScreenShot = () => {
+    this.openCanvasEditor = (event) => {
+      if (event) {
+        event.stopPropagation();
+      }
       this.showModal = false;
-      this.showScreenshotMode = false;
-      this.showScreenshotTopBar = false;
-      this.hasSelectedElement = false;
-      this.encodedScreenshot = null;
-      this.originalElement = null;
-      this.selectedElementBounds = null;
-      this.resetOverflow();
+      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.handleMouseOverScreenShot = (event) => {
-      event.preventDefault();
-      if (this.hasSelectedElement)
+    this.initializeCanvas = () => {
+      if (!this.canvasRef || !this.originalImageData)
         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 = '';
-      // 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.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;
       }
-      this.hasSelectedElement = true;
-      this.elementSelected.classList.add('feedback-modal-element-selected');
-      // Store the original element that was under the mouse
-      this.screenshotModal.style.display = 'none';
-      this.originalElement = document.elementFromPoint(event.clientX, event.clientY);
-      this.selectedElementBounds = this.originalElement.getBoundingClientRect();
-      this.screenshotModal.style.display = '';
-      // Hide the screenshot interface
-      this.showScreenshotTopBar = false;
-      this.showModal = false;
-      try {
-        const dataUrl = await this.captureScreenshot();
-        console.log('Screenshot captured');
-        this.encodedScreenshot = dataUrl;
+    };
+    // 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;
       }
-      catch (error) {
-        console.error('Failed to capture screenshot:', error);
-        this.hasSelectedElement = false;
+      else {
+        // Start editing this color slot
+        this.editingColorIndex = colorIndex;
+        this.showColorPicker = true;
+        this.canvasDrawingColor = this.defaultColors[colorIndex];
       }
-      finally {
-        // Show the modal again
-        this.showModal = true;
+    };
+    // 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 = '';
@@ -9187,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;
@@ -9217,10 +9779,14 @@ const FeedbackModal = class {
     this.ratingPlaceholder = 'Was this page helpful?';
     this.ratingStarsPlaceholder = 'How would you rate this page?';
     this.sendButtonText = 'Send';
-    this.screenshotButtonText = 'Add a screenshot';
     this.screenshotAttachedText = 'Screenshot attached';
+    this.screenshotButtonText = 'Add a screenshot';
+    this.screenshotTakingText = 'Taking screenshot...';
     this.screenshotTopbarText = 'Select an element on this page';
     this.successMessage = '';
+    this.canvasEditorTitle = 'Edit screenshot';
+    this.canvasEditorCancelText = 'Cancel';
+    this.canvasEditorSaveText = 'Save';
   }
   componentWillLoad() {
     if (this.fetchData)
@@ -9244,15 +9810,10 @@ const FeedbackModal = class {
     }
   }
   resetOverflow() {
+    // Just clean up any stray classes, don't add/remove during screenshot
     document.documentElement.classList.remove('feedback-modal-screenshot-open');
     document.documentElement.classList.remove('feedback-modal-screenshot-open--scroll');
-    document.documentElement.classList.add('feedback-modal-screenshot-closing');
-    // Only restore scroll position if we previously modified it
-    if (document.documentElement.style.top) {
-      window.scrollTo(0, parseInt(document.documentElement.style.top || '0') * -1);
-      document.documentElement.style.top = '';
-    }
-    window.addEventListener('scroll', this.onScrollDebounced);
+    document.documentElement.classList.remove('feedback-modal-screenshot-closing');
   }
   handleMessageInput(event) {
     this.formMessage = event.target.value;
@@ -9260,31 +9821,48 @@ const FeedbackModal = class {
   handleEmailInput(event) {
     this.formEmail = event.target.value;
   }
-  captureScreenshot() {
+  captureViewportScreenshot() {
     return new Promise((resolve, reject) => {
       requestAnimationFrame(() => {
-        html2canvasPro(document.body, {
-          x: window.scrollX,
-          y: window.scrollY,
-          width: window.innerWidth,
-          height: window.innerHeight,
-          allowTaint: true,
+        // 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';
+          }
         })
           .then((canvas) => {
-          const context = canvas.getContext('2d');
-          if (context && this.selectedElementBounds) {
-            // Use the same color as HTML highlight
-            context.strokeStyle = 'rgba(0, 123, 255, 0.8)'; // Example color
-            context.lineWidth = 3;
-            context.strokeRect(this.selectedElementBounds.left + window.scrollX, this.selectedElementBounds.top + window.scrollY, this.selectedElementBounds.width, this.selectedElementBounds.height);
-          }
-          const dataUrl = canvas.toDataURL();
+          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 screenshot:', error);
+          console.error('Failed to capture viewport screenshot:', error);
           reject(error);
         });
       });
@@ -9299,12 +9877,8 @@ const FeedbackModal = class {
   handleRatingChange(newRating) {
     this.selectedRating = newRating;
   }
-  // Remove the preview modal toggle function
-  // togglePreviewModal() {
-  //   this.showPreviewModal = !this.showPreviewModal;
-  // }
   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.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();
@@ -9319,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" }, 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 }))))))));
+      } }, 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) {