vite-plugin-ai-annotator 1.0.0

package/README.md

@@ -0,0 +1,98 @@
+# vite-plugin-ai-annotator
+
+AI-powered element annotator for Vite - Pick elements and get instant AI code modifications.
+
+[![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!
+
+## 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
+- **See instant results** - your changes appear immediately in the browser
+
+> Save cognitive load, because it's precious.
+
+## Prerequisites
+
+This plugin requires **Claude Code** to provide AI assistance:
+
+```bash
+# Install Claude Code globally
+bun install -g @anthropic-ai/claude-code
+
+# Verify installation
+claude --version
+```
+
+## Quick Start
+
+This is an **ESM-only Vite plugin**. Installation is simple!
+
+### 1. Install
+
+```bash
+bun add -d vite-plugin-ai-annotator
+```
+
+### 2. Add to Your Vite Config
+
+```typescript
+import { defineConfig } from 'vite';
+import annotator from 'vite-plugin-ai-annotator';
+
+export default defineConfig({
+  plugins: [
+    annotator(),
+  ],
+});
+```
+
+### 3. Start Your Dev Server
+
+```bash
+bun dev
+```
+
+That's it! The annotator toolbar will automatically appear in your application.
+
+## Plugin Options
+
+```typescript
+annotator({
+  port: 7318,          // Server port (default: 7318)
+  verbose: false,      // Enable detailed logging (default: false)
+})
+```
+
+## 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
+
+Want your entire team to modify the app? Configure for network access:
+
+```typescript
+annotator({
+  port: 7318,
+  listenAddress: '0.0.0.0',                // Accept connections from network
+  publicAddress: 'https://myapp.com:7318', // Public URL for the toolbar
+})
+```
+
+Now anyone on your team 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!
+
+**Happy coding! 🚀**

package/dist/annotator/detectors.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Framework component detection and file location extraction
+ */
+import { ElementSelector } from '../utils/xpath';
+export interface ComponentInfo {
+    componentLocation: string;
+    componentName?: string;
+    elementLocation?: {
+        file: string;
+        line: number;
+        column: number;
+        endLine?: number;
+        endColumn?: number;
+        source?: string;
+    };
+    framework?: 'vue' | 'react' | 'angular' | 'svelte' | 'vanilla';
+    sourceMap?: {
+        originalLine: number;
+        originalColumn: number;
+        originalSource: string;
+        originalName?: string;
+    };
+    sourceHierarchy?: string;
+    selectors?: {
+        primary: ElementSelector;
+        fallbacks: string[];
+        confidence: 'high' | 'medium' | 'low';
+    };
+}
+/**
+ * Find the nearest component in the DOM tree
+ */
+export declare function findNearestComponent(element: Element, verbose?: boolean): ComponentInfo | null;

package/dist/annotator/inspection.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Inspection Manager for mouse inspection mode handling
+ */
+export interface InspectionManager {
+    enterInspectionMode(): void;
+    exitInspectionMode(): void;
+    isInInspectionMode(): boolean;
+    destroy(): void;
+}
+export declare function createInspectionManager(onElementSelect?: (element: Element) => void, shouldIgnoreElement?: (element: Element) => boolean, isElementSelected?: (element: Element) => boolean): InspectionManager;

package/dist/annotator/selection.d.ts

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

package/dist/annotator-toolbar.d.ts

@@ -0,0 +1,67 @@
+/**
+ * InstantCode Annotator Toolbar
+ *
+ * Browser component that:
+ * 1. Connects to InstantCode 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
+ */
+import { LitElement } from 'lit';
+export declare class AnnotatorToolbar extends LitElement {
+    wsEndpoint: string;
+    verbose: boolean;
+    private connected;
+    private sessionId;
+    private selectionCount;
+    private isInspecting;
+    private commentPopover;
+    private popoverCleanup;
+    private socket;
+    private rpc;
+    private selectionManager;
+    private inspectionManager;
+    private elementComments;
+    private consoleBuffer;
+    private originalConsoleMethods;
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private initializeManagers;
+    private initializeConsoleCapture;
+    private restoreConsoleMethods;
+    private connectToServer;
+    private registerRpcHandlers;
+    private reportPageContext;
+    private getPageContext;
+    private getSelectedElements;
+    private triggerSelection;
+    private captureScreenshot;
+    private clearSelection;
+    private injectCSS;
+    private injectJS;
+    private getConsoleLogs;
+    private handleElementSelected;
+    private removeSelectedElement;
+    private showCommentPopoverForElement;
+    private handlePopoverKeydown;
+    private hideCommentPopover;
+    private handlePopoverInput;
+    private shouldIgnoreElement;
+    private cleanup;
+    private log;
+    private toggleInspect;
+    private handleClearClick;
+    private renderCursorIcon;
+    private renderTrashIcon;
+    private renderCloseIcon;
+    private renderHelpIcon;
+    private renderErrorIcon;
+    private openHelpPage;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'annotator-toolbar': AnnotatorToolbar;
+    }
+}