vite-plugin-ai-annotator 1.0.1 → 1.0.3

package/README.md

@@ -5,19 +5,10 @@ AI-powered element annotator for Vite - Pick elements and get instant AI code mo
 [![Watch the Tutorial](https://img.youtube.com/vi/OuKnfCbmfTg/maxresdefault.jpg)](https://youtu.be/OuKnfCbmfTg)
 > 📺 **[Watch the Tutorial Video](https://youtu.be/OuKnfCbmfTg)** - See the plugin in action!
 
-## Requirements
+## What is this?
 
-This plugin requires **Claude Code** CLI to be installed:
+Point at any element on your webapp, type a request, and AI modifies your code instantly.
 
-```bash
-bun install -g @anthropic-ai/claude-code
-```
-
-> Claude Code is Anthropic's official CLI tool that provides AI assistance. [Learn more](https://docs.anthropic.com/en/docs/claude-code)
-
-## What can this plugin help you?
-
-After installing the plugin, you can:
 - **Point directly at any element** on your webapp
 - **Type a short request** like "make it bigger", "center it", "change color to blue"
 - **Wait for AI to modify your code** - it automatically finds and updates the source files
@@ -25,17 +16,40 @@ After installing the plugin, you can:
 
 > Save cognitive load, because it's precious.
 
-## Quick Start
+## Why use it?
+
+Traditional workflow: inspect element → find source file → locate the code → make changes → check results.
+
+With this plugin: point → describe → done.
+
+Works with all Vite-supported frameworks:
+- ⚛️ **React** - Detects components, props, and state
+- 🟢 **Vue** - Understands composition/options API
+- 🅰️ **Angular** - Recognizes components and directives
+- 🟠 **Svelte** - Identifies components and stores
+- 📄 **Vanilla JS** - Works with plain HTML/CSS/JS
+
+## Installation
 
-This is an **ESM-only Vite plugin**. Installation is simple!
+### Option 1: Automatic Setup (Recommended)
 
-### 1. Install
+Install the **Claude Code plugin** and let AI set everything up for you:
+
+```bash
+claude plugin install claude-annotator-plugin@nguyenvanduocit
+```
+
+Then ask Claude: *"Set up ai-annotator for my project"* - it handles the rest!
+
+### Option 2: Manual Setup
+
+#### Step 1: Install the package
 
 ```bash
 bun add -d vite-plugin-ai-annotator
 ```
 
-### 2. Add to Your Vite Config
+#### Step 2: Add to your Vite config
 
 ```typescript
 import { defineConfig } from 'vite';
@@ -48,15 +62,23 @@ export default defineConfig({
 });
 ```
 
-### 3. Start Your Dev Server
+#### Step 3: Add MCP to Claude Code
+
+```bash
+claude mcp add annotator -- npx vite-plugin-ai-annotator
+```
+
+#### Step 4: Start your dev server
 
 ```bash
 bun dev
 ```
 
-That's it! The annotator toolbar will automatically appear in your application.
+The annotator toolbar will automatically appear in your application.
 
-## Plugin Options
+## Port Configuration
+
+Default port is `7318`. You can customize it:
 
 ```typescript
 annotator({
@@ -65,19 +87,9 @@ annotator({
 })
 ```
 
-## Framework Support
-
-Works with all Vite-supported frameworks:
-
-- ⚛️ **React** - Detects components, props, and state
-- 🟢 **Vue** - Understands composition/options API
-- 🅰️ **Angular** - Recognizes components and directives
-- 🟠 **Svelte** - Identifies components and stores
-- 📄 **Vanilla JS** - Works with plain HTML/CSS/JS
-
-## Team Collaboration
+### Team Collaboration
 
-Want your entire team to modify the app? Configure for network access:
+For network access (multiple team members modifying the same app):
 
 ```typescript
 annotator({
@@ -87,10 +99,10 @@ annotator({
 })
 ```
 
-Now anyone on your team can:
+Team members can:
 1. Open the app at `https://myapp.com`
 2. Use the annotator toolbar to modify the UI
-3. Changes are saved directly to the source files
-4. Everyone sees updates in real-time!
+3. Changes save directly to source files
+4. Everyone sees updates in real-time
 
 **Happy coding! 🚀**

package/dist/annotator/inspection.d.ts

@@ -7,4 +7,11 @@ export interface InspectionManager {
     isInInspectionMode(): boolean;
     destroy(): void;
 }
-export declare function createInspectionManager(onElementSelect?: (element: Element) => void, shouldIgnoreElement?: (element: Element) => boolean, isElementSelected?: (element: Element) => boolean): InspectionManager;
+export interface InspectionCallbacks {
+    onElementSelect?: (element: Element) => void;
+    shouldIgnoreElement?: (element: Element) => boolean;
+    isElementSelected?: (element: Element) => boolean;
+    onEscape?: () => void;
+    onCopy?: () => void;
+}
+export declare function createInspectionManager(callbacks?: InspectionCallbacks): InspectionManager;

package/dist/annotator/selection.d.ts

@@ -2,14 +2,16 @@
  * Element Selection Manager for element selection, highlighting, and badge management
  */
 import type { ElementData } from '../rpc/define';
+import type { ComponentInfo } from './detectors';
 export interface SelectedElementInfo {
     color: string;
     originalOutline: string;
     originalOutlineOffset: string;
     index: number;
 }
+type ComponentFinder = (el: Element) => ComponentInfo | null;
 export interface ElementSelectionManager {
-    selectElement(element: Element, componentFinder?: (el: Element) => any): void;
+    selectElement(element: Element, componentFinder?: ComponentFinder): void;
     deselectElement(element: Element): void;
     clearAllSelections(): void;
     hasElement(element: Element): boolean;
@@ -17,8 +19,9 @@ export interface ElementSelectionManager {
     getSelectedCount(): number;
     findSelectedParent(element: Element): Element | null;
     findSelectedChildren(element: Element): Element[];
-    buildHierarchicalStructure(componentFinder?: (el: Element) => any, imagePaths?: Map<Element, string>): ElementData[];
+    buildHierarchicalStructure(componentFinder?: ComponentFinder, imagePaths?: Map<Element, string>): ElementData[];
     setOnEditClick(callback: (element: Element) => void): void;
     updateBadgeCommentIndicator(element: Element, hasComment: boolean): void;
 }
 export declare function createElementSelectionManager(): ElementSelectionManager;
+export {};

package/dist/annotator-toolbar.d.ts

@@ -1,8 +1,8 @@
 /**
- * InstantCode Annotator Toolbar
+ * AI Annotator Toolbar
  *
  * Browser component that:
- * 1. Connects to InstantCode server via Socket.IO
+ * 1. Connects to AI Annotator server via Socket.IO
  * 2. Handles RPC requests from server (element selection, screenshots, etc.)
  * 3. Shows toolbar UI with inspect/clear buttons
  * 4. Shows commentPopover for adding comments when elements are selected
@@ -16,7 +16,9 @@ export declare class AnnotatorToolbar extends LitElement {
     private selectionCount;
     private isInspecting;
     private commentPopover;
+    private toastMessage;
     private popoverCleanup;
+    private toastTimeout;
     private socket;
     private rpc;
     private selectionManager;
@@ -45,17 +47,23 @@ export declare class AnnotatorToolbar extends LitElement {
     private removeSelectedElement;
     private showCommentPopoverForElement;
     private handlePopoverKeydown;
+    private handlePopoverInputKeydown;
     private hideCommentPopover;
     private handlePopoverInput;
     private shouldIgnoreElement;
     private cleanup;
     private log;
+    private exitInspectingMode;
+    private copySelectedElements;
     private toggleInspect;
     private handleClearClick;
     private renderCursorIcon;
     private renderTrashIcon;
     private renderCloseIcon;
     private renderHelpIcon;
+    private renderClipboardIcon;
+    private showToast;
+    private copySessionId;
     private renderErrorIcon;
     private openHelpPage;
     render(): import("lit-html").TemplateResult<1>;