vite-plugin-ai-annotator 1.14.3 → 1.14.5

package/README.md

@@ -28,6 +28,7 @@ Works with all Vite-supported frameworks:
 - 🅰️ **Angular** - Recognizes components and directives
 - 🟠 **Svelte** - Identifies components and stores
 - 📄 **Vanilla JS** - Works with plain HTML/CSS/JS
+- 🟦 **Nuxt.js** - Full support via Nuxt module (Nuxt 3+)
 
 ## Installation
 
@@ -44,13 +45,15 @@ Then ask Claude: *"Set up ai-annotator for my project"* - it handles the rest!
 
 ### Option 2: Manual Setup
 
-#### Step 1: Install the package
+#### For Vite Projects
+
+##### Step 1: Install the package
 
 ```bash
 bun add -d vite-plugin-ai-annotator
 ```
 
-#### Step 2: Add to your Vite config
+##### Step 2: Add to your Vite config
 
 ```typescript
 import { defineConfig } from 'vite';
@@ -63,7 +66,33 @@ export default defineConfig({
 });
 ```
 
-#### Step 3: Configure MCP
+#### For Nuxt.js Projects (Nuxt 3+)
+
+##### Step 1: Install the package
+
+```bash
+bun add -d vite-plugin-ai-annotator
+```
+
+##### Step 2: Add to your `nuxt.config.ts`
+
+```typescript
+export default defineNuxtConfig({
+  modules: [
+    'vite-plugin-ai-annotator/nuxt'
+  ],
+  // Optional: Configure the annotator
+  aiAnnotator: {
+    port: 7318,
+    autoSetupMcp: true,
+    verbose: false,
+  }
+})
+```
+
+**That's it!** Nuxt handles the rest automatically.
+
+#### Configure MCP (Vite and Nuxt)
 
 **Option A: Auto Setup (Recommended)**
 
@@ -75,6 +104,17 @@ annotator({
 })
 ```
 
+For Nuxt, configure in `nuxt.config.ts`:
+
+```typescript
+export default defineNuxtConfig({
+  modules: ['vite-plugin-ai-annotator/nuxt'],
+  aiAnnotator: {
+    autoSetupMcp: true,
+  }
+})
+```
+
 This automatically creates/updates `.mcp.json`, `.cursor/mcp.json`, and `.vscode/mcp.json` based on your project.
 
 **Option B: Manual Setup**
@@ -83,7 +123,7 @@ This automatically creates/updates `.mcp.json`, `.cursor/mcp.json`, and `.vscode
 claude mcp add annotator -- npx vite-plugin-ai-annotator mcp -s http://localhost:7318
 ```
 
-#### Step 4: Start your dev server
+#### Step 3: Start your dev server
 
 ```bash
 bun dev

package/dist/annotator-toolbar.d.ts

@@ -22,6 +22,7 @@ export declare class AnnotatorToolbar extends LitElement {
     private tooltipCleanup;
     private toastTimeout;
     private clickListenerTimeout;
+    private skipNextClickOutside;
     private socket;
     private rpc;
     private selectionManager;

package/dist/annotator-toolbar.js

@@ -6389,10 +6389,15 @@
   // src/annotator/constants.ts
   var Z_INDEX = {
     INSPECTION_OVERLAY: 999995,
+    // Mouse inspection hover highlight
     HIGHLIGHT_OVERLAY: 999996,
+    // Selected element marching ants border
     HOVER_OVERLAY: 999997,
+    // Element hover during inspection mode
     BADGE: 999998,
+    // Selection badge with index number
     TOOLBAR: 999999
+    // Bottom-right toolbar UI
   };
   var CONSOLE_LIMITS = {
     MAX_ARG_LENGTH: 1e4,
@@ -7216,14 +7221,17 @@
     let vnode = null;
     if (!codeLocation) {
       const ctxVNode = el.__vnode?.ctx?.vnode;
-      if (ctxVNode?.el === el) {
-        codeLocation = ctxVNode?.props?.__v_inspector;
+      if (ctxVNode && ctxVNode.el === element) {
+        codeLocation = ctxVNode.props?.__v_inspector;
       }
     }
     if (!codeLocation) {
-      codeLocation = el.__vueParentComponent?.vnode?.props?.__v_inspector;
-      vueInstance = el.__vueParentComponent ?? null;
-      vnode = el.__vueParentComponent?.vnode ?? null;
+      const parentComponent = el.__vueParentComponent;
+      if (parentComponent?.vnode) {
+        codeLocation = parentComponent.vnode.props?.__v_inspector;
+        vueInstance = parentComponent;
+        vnode = parentComponent.vnode;
+      }
     }
     if (!codeLocation) {
       codeLocation = el.__v_inspector;
@@ -7250,6 +7258,28 @@
       componentLocation: codeLocation,
       framework: "vue"
     };
+    const match = codeLocation.match(/^(.+\.vue):(\d+):(\d+)$/);
+    if (match) {
+      const [, file, line, column] = match;
+      const componentName = file.split("/").pop()?.replace(".vue", "") || "Anonymous";
+      componentInfo.componentName = componentName;
+      componentInfo.elementLocation = {
+        file,
+        line: parseInt(line, 10),
+        column: parseInt(column, 10)
+      };
+      componentInfo.sourceMap = {
+        originalLine: parseInt(line, 10),
+        originalColumn: parseInt(column, 10),
+        originalSource: file
+      };
+    } else {
+      const pathParts = codeLocation.split("/");
+      const lastPart = pathParts[pathParts.length - 1];
+      if (lastPart) {
+        componentInfo.componentName = lastPart.replace(".vue", "").split("@")[0];
+      }
+    }
     const elementLocationInfo = extractVueElementLocation(element, vnode);
     if (elementLocationInfo) {
       Object.assign(componentInfo, elementLocationInfo);
@@ -7516,6 +7546,7 @@
       this.tooltipCleanup = null;
       this.toastTimeout = null;
       this.clickListenerTimeout = null;
+      this.skipNextClickOutside = false;
       this.socket = null;
       this.rpc = null;
       this.selectionManager = null;
@@ -7533,6 +7564,10 @@
       };
       this.handleClickOutside = (e5) => {
         if (!this.commentPopover.visible) return;
+        if (this.skipNextClickOutside) {
+          this.skipNextClickOutside = false;
+          return;
+        }
         const popoverEl = this.shadowRoot?.querySelector(".popover");
         if (!popoverEl) return;
         const path = e5.composedPath();
@@ -7566,29 +7601,36 @@
     }
     initializeConsoleCapture() {
       try {
+        const originals = {};
         CONSOLE_METHODS.forEach((method) => {
-          this.originalConsoleMethods[method] = console[method].bind(console);
+          originals[method] = console[method].bind(console);
         });
         CONSOLE_METHODS.forEach((method) => {
           console[method] = (...args) => {
-            this.consoleBuffer.push({
-              type: method,
-              args: args.map((arg) => {
+            try {
+              const serializedArgs = args.map((arg) => {
                 try {
                   const str = typeof arg === "object" ? JSON.stringify(arg) : String(arg);
                   return str.length > CONSOLE_LIMITS.MAX_ARG_LENGTH ? str.slice(0, CONSOLE_LIMITS.MAX_ARG_LENGTH) + "...[truncated]" : str;
                 } catch {
                   return "[circular or unserializable]";
                 }
-              }),
-              timestamp: Date.now()
-            });
-            if (this.consoleBuffer.length > CONSOLE_LIMITS.BUFFER_MAX) {
-              this.consoleBuffer = this.consoleBuffer.slice(-CONSOLE_LIMITS.BUFFER_TRIM_TO);
+              });
+              this.consoleBuffer.push({
+                type: method,
+                args: serializedArgs,
+                timestamp: Date.now()
+              });
+              if (this.consoleBuffer.length > CONSOLE_LIMITS.BUFFER_MAX) {
+                this.consoleBuffer = this.consoleBuffer.slice(-CONSOLE_LIMITS.BUFFER_TRIM_TO);
+              }
+              originals[method]?.(...args);
+            } catch (captureError) {
+              originals[method]?.(...args);
             }
-            this.originalConsoleMethods[method]?.(...args);
           };
         });
+        this.originalConsoleMethods = originals;
       } catch (error) {
         this.restoreConsoleMethods();
         throw error;
@@ -7630,19 +7672,71 @@
     }
     registerRpcHandlers() {
       if (!this.rpc) return;
-      this.rpc.handle.getPageContext(async () => this.getPageContext());
-      this.rpc.handle.getSelectedElements(async () => this.getSelectedElements());
-      this.rpc.handle.triggerSelection(
-        async (mode, selector, selectorType) => this.triggerSelection(mode, selector, selectorType)
-      );
-      this.rpc.handle.captureScreenshot(
-        async (type, selector, quality) => this.captureScreenshot(type, selector, quality)
-      );
-      this.rpc.handle.clearSelection(async () => this.clearSelection());
+      this.rpc.handle.getPageContext(async () => {
+        try {
+          return await this.getPageContext();
+        } catch (error) {
+          this.log("[getPageContext] Handler error:", error);
+          throw { message: error instanceof Error ? error.message : String(error), code: "INTERNAL_ERROR", data: void 0 };
+        }
+      });
+      this.rpc.handle.getSelectedElements(async () => {
+        try {
+          return await this.getSelectedElements();
+        } catch (error) {
+          this.log("[getSelectedElements] Handler error:", error);
+          throw { message: error instanceof Error ? error.message : String(error), code: "INTERNAL_ERROR", data: void 0 };
+        }
+      });
+      this.rpc.handle.triggerSelection(async (mode, selector, selectorType) => {
+        try {
+          return await this.triggerSelection(mode, selector, selectorType);
+        } catch (error) {
+          this.log("[triggerSelection] Handler error:", error);
+          throw { message: error instanceof Error ? error.message : String(error), code: "INTERNAL_ERROR", data: void 0 };
+        }
+      });
+      this.rpc.handle.captureScreenshot(async (type, selector, quality) => {
+        try {
+          return await this.captureScreenshot(type, selector, quality);
+        } catch (error) {
+          this.log("[captureScreenshot] Handler error:", error);
+          throw { message: error instanceof Error ? error.message : String(error), code: "INTERNAL_ERROR", data: void 0 };
+        }
+      });
+      this.rpc.handle.clearSelection(async () => {
+        try {
+          return await this.clearSelection();
+        } catch (error) {
+          this.log("[clearSelection] Handler error:", error);
+          throw { message: error instanceof Error ? error.message : String(error), code: "INTERNAL_ERROR", data: void 0 };
+        }
+      });
       this.rpc.handle.ping(async () => "pong");
-      this.rpc.handle.injectCSS(async (css) => this.injectCSS(css));
-      this.rpc.handle.injectJS(async (code) => this.injectJS(code));
-      this.rpc.handle.getConsole(async (clear) => this.getConsoleLogs(clear));
+      this.rpc.handle.injectCSS(async (css) => {
+        try {
+          return await this.injectCSS(css);
+        } catch (error) {
+          this.log("[injectCSS] Handler error:", error);
+          throw { message: error instanceof Error ? error.message : String(error), code: "INTERNAL_ERROR", data: void 0 };
+        }
+      });
+      this.rpc.handle.injectJS(async (code) => {
+        try {
+          return await this.injectJS(code);
+        } catch (error) {
+          this.log("[injectJS] Handler error:", error);
+          throw { message: error instanceof Error ? error.message : String(error), code: "INTERNAL_ERROR", data: void 0 };
+        }
+      });
+      this.rpc.handle.getConsole(async (clear) => {
+        try {
+          return await this.getConsoleLogs(clear);
+        } catch (error) {
+          this.log("[getConsole] Handler error:", error);
+          throw { message: error instanceof Error ? error.message : String(error), code: "INTERNAL_ERROR", data: void 0 };
+        }
+      });
     }
     reportPageContext() {
       if (!this.socket?.connected) return;
@@ -7744,10 +7838,12 @@
           cacheBust: true,
           pixelRatio: 1,
           includeQueryParams: true,
-          // Filter out elements that cause issues
+          // Filter out all annotator UI elements
           filter: (node) => {
             if (node instanceof Element) {
-              if (node.classList?.contains("annotator-badge") || node.classList?.contains("annotator-highlight-overlay") || node.tagName?.toLowerCase() === "annotator-toolbar") {
+              const className = node.className || "";
+              const tagName = node.tagName?.toLowerCase() || "";
+              if (className.includes("annotator-") || tagName === "annotator-toolbar") {
                 return false;
               }
             }
@@ -7878,6 +7974,7 @@
       if (this.clickListenerTimeout) {
         clearTimeout(this.clickListenerTimeout);
       }
+      this.skipNextClickOutside = true;
       this.clickListenerTimeout = setTimeout(() => {
         document.addEventListener("click", this.handleClickOutside, true);
         this.clickListenerTimeout = null;
@@ -7931,6 +8028,9 @@
         this.popoverCleanup();
         this.popoverCleanup = null;
       }
+      const popoverEl = this.shadowRoot?.querySelector(".popover");
+      if (popoverEl) {
+      }
       this.commentPopover = { visible: false, element: null, comment: "" };
     }
     handlePopoverInput(e5) {
@@ -8136,7 +8236,7 @@
     render() {
       if (!this.connected) {
         return x`
-        <div class="toolbar">
+        <div class="toolbar" role="alert" aria-live="polite">
           <div class="error-message">
             ${this.renderErrorIcon()}
             <span>Cannot connect to AI Annotator server</span>
@@ -8145,12 +8245,15 @@
       `;
       }
       return x`
-      <div class="toolbar">
+      <div class="toolbar" role="toolbar" aria-label="AI Annotator tools">
         <button
           class="toolbar-btn ${this.isInspecting ? "active" : ""}"
           @click=${this.toggleInspect}
           @mouseenter=${(e5) => this.showTooltip(this.isInspecting ? "Press ESC to exit" : "Inspect elements", e5.currentTarget)}
           @mouseleave=${() => this.hideTooltip()}
+          aria-label="${this.isInspecting ? "Exit inspection mode" : "Inspect elements"}"
+          aria-pressed="${this.isInspecting}"
+          title="${this.isInspecting ? "Press ESC to exit" : "Inspect elements"}"
         >
           ${this.renderCursorIcon()}
         </button>
@@ -8162,19 +8265,24 @@
             @mouseenter=${(e5) => this.showTooltip("Clear selections", e5.currentTarget)}
             @mouseleave=${() => this.hideTooltip()}
             ?disabled=${this.selectionCount === 0}
+            aria-label="Clear all selections"
+            aria-disabled="${this.selectionCount === 0}"
+            title="Clear selections"
           >
             ${this.renderTrashIcon()}
           </button>
-          ${this.selectionCount > 0 ? x`<span class="badge">${this.selectionCount}</span>` : ""}
+          ${this.selectionCount > 0 ? x`<span class="badge" aria-label="${this.selectionCount} selections">${this.selectionCount}</span>` : ""}
         </div>
 
-        <div class="divider"></div>
+        <div class="divider" role="separator" aria-orientation="vertical"></div>
 
         <button
           class="toolbar-btn"
           @click=${this.copySessionId}
           @mouseenter=${(e5) => this.showTooltip("Copy session", e5.currentTarget)}
           @mouseleave=${() => this.hideTooltip()}
+          aria-label="Copy session ID to clipboard"
+          title="Copy session"
         >
           ${this.renderClipboardIcon()}
         </button>
@@ -8184,17 +8292,19 @@
           @click=${this.openHelpPage}
           @mouseenter=${(e5) => this.showTooltip("Help", e5.currentTarget)}
           @mouseleave=${() => this.hideTooltip()}
+          aria-label="Open help documentation"
+          title="Help"
         >
           ${this.renderHelpIcon()}
         </button>
 
-        ${this.toastMessage ? x`<div class="toast">${this.toastMessage}</div>` : ""}
+        ${this.toastMessage ? x`<div class="toast" role="status" aria-live="polite">${this.toastMessage}</div>` : ""}
       </div>
 
-      ${this.tooltip.visible ? x`<div class="tooltip">${this.tooltip.text}</div>` : ""}
+      ${this.tooltip.visible ? x`<div class="tooltip" role="tooltip">${this.tooltip.text}</div>` : ""}
 
       ${this.commentPopover.visible ? x`
-        <div class="popover">
+        <div class="popover" role="dialog" aria-label="Element comment" aria-modal="false">
           <textarea
             class="popover-input"
             placeholder="Add a note... (↵ to close)"
@@ -8202,12 +8312,13 @@
             @input=${this.handlePopoverInput}
             @keydown=${this.handlePopoverInputKeydown}
             rows="1"
+            aria-label="Add a comment for the selected element"
           ></textarea>
-          <div class="popover-actions">
-            <button class="popover-btn danger" @click=${this.removeSelectedElement} title="Remove selection">
+          <div class="popover-actions" role="group" aria-label="Comment actions">
+            <button class="popover-btn danger" @click=${this.removeSelectedElement} title="Remove selection" aria-label="Remove this selection">
               ${this.renderTrashIcon()}
             </button>
-            <button class="popover-btn" @click=${this.hideCommentPopover} title="Close (Esc)">
+            <button class="popover-btn" @click=${this.hideCommentPopover} title="Close (Esc)" aria-label="Close comment">
               ${this.renderCloseIcon()}
             </button>
           </div>

package/dist/nuxt-module.d.ts

@@ -0,0 +1,5 @@
+import { type AiAnnotatorOptions } from './vite-plugin';
+export interface NuxtAiAnnotatorOptions extends AiAnnotatorOptions {
+}
+declare const _default: import("@nuxt/schema").NuxtModule<NuxtAiAnnotatorOptions, NuxtAiAnnotatorOptions, false>;
+export default _default;