vite-plugin-ai-annotator 1.1.32 → 1.1.39

package/dist/annotator-toolbar.d.ts

@@ -50,6 +50,7 @@ export declare class AnnotatorToolbar extends LitElement {
     private removeSelectedElement;
     private showCommentPopoverForElement;
     private handlePopoverKeydown;
+    private handleClickOutside;
     private handlePopoverInputKeydown;
     private hideCommentPopover;
     private handlePopoverInput;

package/dist/annotator-toolbar.js

@@ -6744,7 +6744,7 @@
         document.head.appendChild(hoverKeyframesStyleElement);
       }
       const overlay = document.createElement("div");
-      overlay.className = "annotator-hover-overlay annotator-ignore";
+      overlay.className = "annotator-hover-overlay";
       const rect = element.getBoundingClientRect();
       overlay.style.cssText = `
       position: fixed;
@@ -7537,6 +7537,14 @@
           this.hideCommentPopover();
         }
       };
+      this.handleClickOutside = (e5) => {
+        if (!this.commentPopover.visible) return;
+        const popoverEl = this.shadowRoot?.querySelector(".popover");
+        if (!popoverEl) return;
+        const path = e5.composedPath();
+        if (path.includes(popoverEl)) return;
+        this.hideCommentPopover();
+      };
     }
     connectedCallback() {
       super.connectedCallback();
@@ -7861,6 +7869,7 @@
         comment: existingComment
       };
       document.addEventListener("keydown", this.handlePopoverKeydown);
+      setTimeout(() => document.addEventListener("click", this.handleClickOutside, true), 0);
       this.updateComplete.then(() => {
         const popoverEl = this.shadowRoot?.querySelector(".popover");
         const textareaEl = this.shadowRoot?.querySelector(".popover-input");
@@ -7900,6 +7909,7 @@
     }
     hideCommentPopover() {
       document.removeEventListener("keydown", this.handlePopoverKeydown);
+      document.removeEventListener("click", this.handleClickOutside, true);
       if (this.popoverCleanup) {
         this.popoverCleanup();
         this.popoverCleanup = null;
@@ -7911,7 +7921,7 @@
       const comment = target.value;
       const element = this.commentPopover.element;
       target.style.height = "auto";
-      target.style.height = Math.min(target.scrollHeight, 37) + "px";
+      target.style.height = Math.min(target.scrollHeight, 120) + "px";
       this.commentPopover = { ...this.commentPopover, comment };
       if (element) {
         if (comment.trim().length > 0) {
@@ -8300,6 +8310,8 @@
       top: 0;
       left: 0;
       z-index: 1000000;
+      display: flex;
+      flex-direction: column;
       background: var(--cyber-black);
       border: 2px solid var(--cyber-cyan);
       box-shadow: 4px 4px 0px rgba(0, 255, 255, 0.3), 0 0 30px rgba(0, 255, 255, 0.2);
@@ -8333,9 +8345,8 @@
 
     .popover-input {
       width: 240px;
-      min-height: 24px;
-      max-height: 37px;
-      padding: 10px 12px;
+      max-height: 120px;
+      padding: 8px 12px;
       border: none;
       background: transparent;
       color: var(--cyber-yellow);
@@ -8345,6 +8356,7 @@
       resize: none;
       overflow-y: auto;
       line-height: 1.4;
+      box-sizing: border-box;
     }
 
     .popover-input::placeholder {
@@ -8352,20 +8364,20 @@
     }
 
     .popover-actions {
-      position: absolute;
-      bottom: 6px;
-      right: 6px;
       display: flex;
       align-items: center;
-      gap: 2px;
+      justify-content: flex-end;
+      gap: 4px;
+      padding: 6px 8px;
+      border-top: 1px solid rgba(0, 255, 255, 0.2);
     }
 
     .popover-btn {
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 22px;
-      height: 22px;
+      width: 26px;
+      height: 26px;
       border: 1px solid rgba(0, 255, 255, 0.3);
       background: transparent;
       color: rgba(0, 255, 255, 0.6);
@@ -8386,8 +8398,8 @@
     }
 
     .popover-btn svg {
-      width: 12px;
-      height: 12px;
+      width: 14px;
+      height: 14px;
     }
 
     .hidden {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-ai-annotator",
-  "version": "1.1.32",
+  "version": "1.1.39",
   "description": "AI-powered element annotator for Vite - Pick elements and get instant AI code modifications",
   "type": "module",
   "main": "dist/vite-plugin.js",