vite-plugin-ai-annotator 1.3.4 → 1.14.1

package/dist/annotator/constants.d.ts

@@ -2,6 +2,7 @@
  * Shared constants for annotator components
  */
 export declare const Z_INDEX: {
+    readonly INSPECTION_OVERLAY: 999995;
     readonly HIGHLIGHT_OVERLAY: 999996;
     readonly HOVER_OVERLAY: 999997;
     readonly BADGE: 999998;
@@ -13,3 +14,17 @@ export declare const CONSOLE_LIMITS: {
     readonly BUFFER_TRIM_TO: 500;
 };
 export declare const SCREENSHOT_TIMEOUT_MS = 10000;
+export declare const SELECTION_COLORS: readonly ["#FF00FF", "#00FFFF", "#FFFF00"];
+export declare const COLORS: {
+    readonly INSPECTION: "#A855F7";
+    readonly BADGE_TEXT: "#050505";
+    readonly BADGE_BG: "#050505";
+};
+export declare const FONTS: {
+    readonly MONO: "'JetBrains Mono', monospace";
+    readonly GOOGLE_FONTS_URL: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap";
+};
+export declare const TEXT_SELECTION: {
+    readonly MAX_LENGTH: 10000;
+    readonly HIGHLIGHT_OPACITY: 0.3;
+};

package/dist/annotator/inspection.d.ts

@@ -11,6 +11,7 @@ export interface InspectionManager {
 export interface InspectionCallbacks {
     onElementSelect?: (element: Element) => void;
     onMultiSelect?: (elements: Element[]) => void;
+    onTextSelect?: (range: Range, commonAncestor: Element) => void;
     shouldIgnoreElement?: (element: Element) => boolean;
     isElementSelected?: (element: Element) => boolean;
     onEscape?: () => void;

package/dist/annotator/selection.d.ts

@@ -3,14 +3,30 @@
  */
 import type { ElementData } from '../rpc/define';
 import type { ComponentInfo } from './detectors';
+/**
+ * Metadata for a text selection annotation.
+ * Created when user selects text (not an element) for annotation.
+ */
+export interface TextSelectionInfo {
+    /** The actual text content that was selected by the user */
+    selectedText: string;
+    /** The nearest common ancestor element containing the entire selection */
+    containerElement: Element;
+}
 export interface SelectedElementInfo {
     color: string;
     index: number;
     displayText: string;
+    textSelection?: TextSelectionInfo;
 }
 type ComponentFinder = (el: Element) => ComponentInfo | null;
+export interface WrapTextRangeResult {
+    wrapper: Element;
+    textSelection: TextSelectionInfo;
+}
 export interface ElementSelectionManager {
-    selectElement(element: Element, componentFinder?: ComponentFinder): void;
+    selectElement(element: Element, componentFinder?: ComponentFinder, textSelection?: TextSelectionInfo): void;
+    wrapTextRange(range: Range, containerElement: Element): WrapTextRangeResult | null;
     deselectElement(element: Element): void;
     clearAllSelections(): void;
     hasElement(element: Element): boolean;

package/dist/annotator-toolbar.d.ts

@@ -40,6 +40,7 @@ export declare class AnnotatorToolbar extends LitElement {
     private reportPageContext;
     private getPageContext;
     private getSelectedElements;
+    private enrichElementsWithComments;
     private triggerSelection;
     private captureScreenshot;
     private clearSelection;
@@ -48,6 +49,7 @@ export declare class AnnotatorToolbar extends LitElement {
     private getConsoleLogs;
     private handleElementSelected;
     private handleMultiSelect;
+    private handleTextSelected;
     private removeSelectedElement;
     private showCommentPopoverForElement;
     private handlePopoverKeydown;

package/dist/annotator-toolbar.js

@@ -6388,6 +6388,7 @@
 
   // src/annotator/constants.ts
   var Z_INDEX = {
+    INSPECTION_OVERLAY: 999995,
     HIGHLIGHT_OVERLAY: 999996,
     HOVER_OVERLAY: 999997,
     BADGE: 999998,
@@ -6402,6 +6403,25 @@
     // Keep last N entries after trim
   };
   var SCREENSHOT_TIMEOUT_MS = 1e4;
+  var SELECTION_COLORS = ["#FF00FF", "#00FFFF", "#FFFF00"];
+  var COLORS = {
+    INSPECTION: "#A855F7",
+    // Purple for inspection
+    BADGE_TEXT: "#050505",
+    // Black for badge text
+    BADGE_BG: "#050505"
+    // Black for badge background
+  };
+  var FONTS = {
+    MONO: "'JetBrains Mono', monospace",
+    GOOGLE_FONTS_URL: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap"
+  };
+  var TEXT_SELECTION = {
+    MAX_LENGTH: 1e4,
+    // Maximum characters allowed in a text selection
+    HIGHLIGHT_OPACITY: 0.3
+    // Background opacity for text highlight
+  };
 
   // src/annotator/selection.ts
   function createElementSelectionManager() {
@@ -6410,8 +6430,23 @@
     let colorIndex = 0;
     let onEditClickCallback = null;
     let keyframesStyleElement = null;
-    const colors = ["#FF00FF", "#00FFFF", "#FFFF00"];
-    function getDisplayText(index, element, componentFinder) {
+    function unwrapTextSelection(element) {
+      const parent = element.parentNode;
+      if (!parent) {
+        console.warn("[AI Annotator] Cannot unwrap text selection: element has no parent");
+        return;
+      }
+      while (element.firstChild) {
+        parent.insertBefore(element.firstChild, element);
+      }
+      element.remove();
+    }
+    function getDisplayText(index, element, componentFinder, textSelection) {
+      if (textSelection) {
+        const preview = textSelection.selectedText.substring(0, 15);
+        const ellipsis = textSelection.selectedText.length > 15 ? "..." : "";
+        return `#${index} "${preview}${ellipsis}"`;
+      }
       const component = componentFinder?.(element);
       if (component && component.componentLocation) {
         const componentPath = component.componentLocation.split("@")[0];
@@ -6434,14 +6469,14 @@
       }
     }
     function createSelectionGroup(element, color, displayText) {
-      const textColor = "#050505";
+      const textColor = COLORS.BADGE_TEXT;
       const glowColor = color.toLowerCase();
       const badge = document.createElement("div");
       badge.classList.add("annotator-badge");
       const shadow = badge.attachShadow({ mode: "open" });
       const style = document.createElement("style");
       style.textContent = `
-      @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');
+      @import url('${FONTS.GOOGLE_FONTS_URL}');
 
       @keyframes badge-glow {
         0%, 100% { box-shadow: 2px 2px 0px ${color}44, 0 0 8px ${glowColor}80; }
@@ -6452,7 +6487,7 @@
         display: flex;
         align-items: center;
         border: 1px solid ${color};
-        background: #050505;
+        background: ${COLORS.BADGE_BG};
         box-shadow: 1px 1px 0px ${color}44, 0 0 6px ${glowColor}60;
         animation: badge-glow 2s ease-in-out infinite;
         cursor: pointer;
@@ -6471,7 +6506,7 @@
         justify-content: center;
         font-size: 9px;
         font-weight: 700;
-        font-family: 'JetBrains Mono', monospace;
+        font-family: ${FONTS.MONO};
         white-space: nowrap;
         text-transform: uppercase;
       }
@@ -6580,14 +6615,42 @@
       return children;
     }
     return {
-      selectElement(element, componentFinder) {
-        const color = colors[colorIndex % colors.length];
+      selectElement(element, componentFinder, textSelection) {
+        const color = SELECTION_COLORS[colorIndex % SELECTION_COLORS.length];
         const index = selectedElements.size + 1;
         colorIndex++;
-        const displayText = getDisplayText(index, element, componentFinder);
+        const displayText = getDisplayText(index, element, componentFinder, textSelection);
         const group = createSelectionGroup(element, color, displayText);
         selectionGroups.set(element, group);
-        selectedElements.set(element, { color, index, displayText });
+        selectedElements.set(element, { color, index, displayText, textSelection });
+      },
+      wrapTextRange(range, containerElement) {
+        const selectedText = range.toString().trim();
+        if (!selectedText) return null;
+        if (selectedText.length > TEXT_SELECTION.MAX_LENGTH) {
+          console.warn(`[AI Annotator] Text selection exceeds maximum length of ${TEXT_SELECTION.MAX_LENGTH} characters`);
+          return null;
+        }
+        const highlightColor = SELECTION_COLORS[colorIndex % SELECTION_COLORS.length];
+        const wrapper = document.createElement("span");
+        wrapper.className = "annotator-text-selection annotator-ignore";
+        wrapper.style.cssText = `
+        background: ${highlightColor}4D;
+        border-radius: 2px;
+      `;
+        try {
+          range.surroundContents(wrapper);
+        } catch (error) {
+          console.warn("[AI Annotator] Cannot wrap cross-element text selection. Please select text within a single paragraph.");
+          return null;
+        }
+        return {
+          wrapper,
+          textSelection: {
+            selectedText,
+            containerElement
+          }
+        };
       },
       deselectElement(element) {
         const elementData = selectedElements.get(element);
@@ -6599,15 +6662,22 @@
             group.overlay.remove();
             selectionGroups.delete(element);
           }
+          if (elementData.textSelection && element.classList.contains("annotator-text-selection")) {
+            unwrapTextSelection(element);
+          }
           selectedElements.delete(element);
           reindexElements();
         }
       },
       clearAllSelections() {
-        selectionGroups.forEach((group) => {
+        selectionGroups.forEach((group, element) => {
           group.cleanup();
           group.badge.remove();
           group.overlay.remove();
+          const elementData = selectedElements.get(element);
+          if (elementData?.textSelection && element.classList.contains("annotator-text-selection")) {
+            unwrapTextSelection(element);
+          }
         });
         selectionGroups.clear();
         selectedElements.clear();
@@ -6646,13 +6716,14 @@
           const data = selectedElements.get(element);
           const children = findSelectedChildren(element);
           const componentData = componentFinder?.(element);
+          const targetElement = data.textSelection?.containerElement || element;
           const elementInfo = {
             index: data.index,
-            tagName: element.tagName,
-            xpath: XPathUtils.generateXPath(element),
-            cssSelector: XPathUtils.generateEnhancedCSSSelector(element),
+            tagName: targetElement.tagName,
+            xpath: XPathUtils.generateXPath(targetElement),
+            cssSelector: XPathUtils.generateEnhancedCSSSelector(targetElement),
             textContent: element.textContent?.substring(0, 100) || "",
-            attributes: Array.from(element.attributes).reduce((acc, attr) => {
+            attributes: Array.from(targetElement.attributes).reduce((acc, attr) => {
               if (attr.name !== "style") {
                 acc[attr.name] = attr.value;
               }
@@ -6660,11 +6731,24 @@
             }, {}),
             children: []
           };
+          if (data.textSelection && data.textSelection.containerElement.isConnected) {
+            elementInfo.textSelection = {
+              selectedText: data.textSelection.selectedText,
+              containerXPath: XPathUtils.generateXPath(data.textSelection.containerElement),
+              containerCssSelector: XPathUtils.generateEnhancedCSSSelector(data.textSelection.containerElement)
+            };
+          } else if (data.textSelection) {
+            elementInfo.textSelection = {
+              selectedText: data.textSelection.selectedText,
+              containerXPath: "",
+              containerCssSelector: ""
+            };
+          }
           if (imagePaths && imagePaths.has(element)) {
             elementInfo.imagePath = imagePaths.get(element);
           }
           try {
-            const htmlElement = element;
+            const htmlElement = targetElement;
             const computedStyle = window.getComputedStyle(htmlElement);
             elementInfo.computedStyles = {
               width: htmlElement.offsetWidth,
@@ -6699,38 +6783,43 @@
   var DRAG_THRESHOLD = 5;
   var INITIAL_DRAG_STATE = { isDragging: false, startX: 0, startY: 0, currentX: 0, currentY: 0 };
   function createInspectionManager(callbacks = {}) {
-    const { onElementSelect, onMultiSelect, shouldIgnoreElement, isElementSelected, onEscape, onCopy } = callbacks;
+    const { onElementSelect, onMultiSelect, onTextSelect, shouldIgnoreElement, isElementSelected, onEscape, onCopy } = callbacks;
     let isInspecting = false;
     let currentHoveredElement = null;
     let hoverOverlay = null;
     let hoverKeyframesStyleElement = null;
-    let inspectionStyleElement = null;
     let selectionOverlay = null;
+    let glassPane = null;
     let dragState = { ...INITIAL_DRAG_STATE };
     let mouseDownTime = 0;
-    function addInspectionStyles() {
-      inspectionStyleElement = document.createElement("style");
-      inspectionStyleElement.id = "annotator-toolbar-styles";
-      inspectionStyleElement.textContent = `
-      * {
-        pointer-events: none !important;
-        cursor: crosshair !important;
-        user-select: none !important;
-        -webkit-user-select: none !important;
-      }
-      annotator-toolbar, annotator-toolbar *,
-      .annotator-badge, .annotator-badge *,
-      .annotator-ignore {
-        pointer-events: auto !important;
-        cursor: default !important;
-      }
+    function createGlassPane() {
+      const pane = document.createElement("div");
+      pane.id = "annotator-glass-pane";
+      pane.className = "annotator-ignore";
+      pane.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      background: transparent;
+      cursor: crosshair;
+      z-index: ${Z_INDEX.INSPECTION_OVERLAY};
+      pointer-events: auto;
     `;
-      document.head.appendChild(inspectionStyleElement);
+      pane.addEventListener("mousedown", handleMouseDown, true);
+      pane.addEventListener("mousemove", handleMouseMove, true);
+      pane.addEventListener("mouseup", handleMouseUp, true);
+      pane.addEventListener("click", preventClick, true);
+      pane.addEventListener("dblclick", preventMouseEvents, true);
+      pane.addEventListener("contextmenu", preventMouseEvents, true);
+      document.body.appendChild(pane);
+      return pane;
     }
-    function removeInspectionStyles() {
-      if (inspectionStyleElement) {
-        inspectionStyleElement.remove();
-        inspectionStyleElement = null;
+    function removeGlassPane() {
+      if (glassPane) {
+        glassPane.remove();
+        glassPane = null;
       }
     }
     function removeHoverHighlight() {
@@ -6752,7 +6841,7 @@
       `;
         document.head.appendChild(hoverKeyframesStyleElement);
       }
-      const color = "#A855F7";
+      const color = COLORS.INSPECTION;
       const overlay = document.createElement("div");
       overlay.className = "annotator-hover-overlay";
       const rect = element.getBoundingClientRect();
@@ -6785,15 +6874,13 @@
       hoverOverlay.style.height = `${rect.height}px`;
     }
     function getElementAtPoint(x2, y3) {
-      if (inspectionStyleElement) {
-        inspectionStyleElement.disabled = true;
-      }
+      if (!glassPane) return null;
+      const originalPointerEvents = glassPane.style.pointerEvents;
+      glassPane.style.pointerEvents = "none";
       try {
         return document.elementFromPoint(x2, y3);
       } finally {
-        if (inspectionStyleElement) {
-          inspectionStyleElement.disabled = false;
-        }
+        glassPane.style.pointerEvents = originalPointerEvents;
       }
     }
     function createSelectionOverlay() {
@@ -6801,7 +6888,7 @@
       overlay.className = "annotator-ignore";
       overlay.style.cssText = `
       position: fixed;
-      border: 2px dashed #A855F7;
+      border: 2px dashed ${COLORS.INSPECTION};
       background: rgba(168, 85, 247, 0.1);
       pointer-events: none;
       z-index: ${Z_INDEX.HOVER_OVERLAY};
@@ -6839,26 +6926,28 @@
       return inner.left >= outer.left && inner.right <= outer.right && inner.top >= outer.top && inner.bottom <= outer.bottom;
     }
     function findElementsFullyInRect(rect) {
-      if (inspectionStyleElement) {
-        inspectionStyleElement.disabled = true;
-      }
+      if (glassPane) glassPane.style.display = "none";
       try {
-        const elements = [];
-        const allElements = document.body.querySelectorAll("*");
-        for (const element of allElements) {
-          if (shouldIgnoreElement?.(element)) continue;
-          if (element.tagName === "SCRIPT" || element.tagName === "STYLE" || element.tagName === "NOSCRIPT") continue;
-          const elementRect = element.getBoundingClientRect();
-          if (elementRect.width === 0 || elementRect.height === 0) continue;
-          if (isFullyContained(elementRect, rect)) {
-            elements.push(element);
+        let traverse2 = function(node) {
+          if (shouldIgnoreElement?.(node)) return;
+          if (node.tagName === "SCRIPT" || node.tagName === "STYLE" || node.tagName === "NOSCRIPT") return;
+          const elementRect = node.getBoundingClientRect();
+          if (elementRect.width > 0 && elementRect.height > 0) {
+            if (isFullyContained(elementRect, rect)) {
+              elements.push(node);
+            }
           }
-        }
+          const children = node.children;
+          for (let i5 = 0; i5 < children.length; i5++) {
+            traverse2(children[i5]);
+          }
+        };
+        var traverse = traverse2;
+        const elements = [];
+        traverse2(document.body);
         return elements;
       } finally {
-        if (inspectionStyleElement) {
-          inspectionStyleElement.disabled = false;
-        }
+        if (glassPane) glassPane.style.display = "block";
       }
     }
     function filterLeafElements(elements) {
@@ -6868,7 +6957,7 @@
     }
     function handleMouseDown(e5) {
       const clickedElement = e5.target;
-      if (shouldIgnoreElement?.(clickedElement)) return;
+      if (shouldIgnoreElement?.(clickedElement) && clickedElement !== glassPane) return;
       mouseDownTime = Date.now();
       dragState = {
         isDragging: false,
@@ -6911,38 +7000,55 @@
       hoverOverlay = createHoverOverlay(target);
       currentHoveredElement = target;
     }
+    function detectTextSelection() {
+      const selection = window.getSelection();
+      if (!selection || selection.isCollapsed || selection.rangeCount === 0) return null;
+      const selectedText = selection.toString().trim();
+      if (selectedText.length === 0) return null;
+      const range = selection.getRangeAt(0);
+      const ancestor = range.commonAncestorContainer;
+      const commonAncestor = ancestor.nodeType === Node.ELEMENT_NODE ? ancestor : ancestor.parentElement;
+      if (!commonAncestor || shouldIgnoreElement?.(commonAncestor)) return null;
+      return { range, commonAncestor };
+    }
     function handleMouseUp(e5) {
       const wasDragging = dragState.isDragging;
-      if (wasDragging) {
-        removeSelectionOverlay();
-        const selectionRect = getSelectionRect();
-        if (selectionRect.width > 10 && selectionRect.height > 10) {
-          const elementsInRect = findElementsFullyInRect(selectionRect);
-          const leafElements = filterLeafElements(elementsInRect);
-          if (leafElements.length > 0) {
-            onMultiSelect?.(leafElements);
+      try {
+        if (wasDragging) {
+          removeSelectionOverlay();
+          const selectionRect = getSelectionRect();
+          if (selectionRect.width > 10 && selectionRect.height > 10) {
+            const elementsInRect = findElementsFullyInRect(selectionRect);
+            const leafElements = filterLeafElements(elementsInRect);
+            if (leafElements.length > 0) {
+              onMultiSelect?.(leafElements);
+            }
+          }
+        } else if (mouseDownTime > 0) {
+          const textSelection = detectTextSelection();
+          if (textSelection) {
+            const range = textSelection.range.cloneRange();
+            const commonAncestor = textSelection.commonAncestor;
+            window.getSelection()?.removeAllRanges();
+            onTextSelect?.(range, commonAncestor);
+            return;
+          }
+          const target = getElementAtPoint(e5.clientX, e5.clientY);
+          if (target && !shouldIgnoreElement?.(target)) {
+            onElementSelect?.(target);
           }
         }
-      } else if (mouseDownTime > 0) {
-        const target = getElementAtPoint(e5.clientX, e5.clientY);
-        if (target && !shouldIgnoreElement?.(target)) {
-          onElementSelect?.(target);
-        }
+      } finally {
+        mouseDownTime = 0;
+        dragState = { ...INITIAL_DRAG_STATE };
       }
-      mouseDownTime = 0;
-      dragState = { ...INITIAL_DRAG_STATE };
     }
     function preventClick(e5) {
-      const target = e5.target;
-      if (shouldIgnoreElement?.(target)) return;
       e5.preventDefault();
       e5.stopPropagation();
       e5.stopImmediatePropagation();
     }
     function preventMouseEvents(e5) {
-      const target = e5.target;
-      if (shouldIgnoreElement?.(target)) return;
-      if (dragState.isDragging) return;
       e5.preventDefault();
       e5.stopPropagation();
       e5.stopImmediatePropagation();
@@ -6967,16 +7073,11 @@
       removeSelectionOverlay();
     }
     function cleanup() {
-      removeInspectionStyles();
-      document.removeEventListener("mousedown", handleMouseDown, true);
-      document.removeEventListener("mousemove", handleMouseMove, true);
-      document.removeEventListener("mouseup", handleMouseUp, true);
-      document.removeEventListener("click", preventClick, true);
-      document.removeEventListener("dblclick", preventMouseEvents, true);
-      document.removeEventListener("contextmenu", preventMouseEvents, true);
+      removeGlassPane();
       document.removeEventListener("keydown", handleKeyDown);
       removeHoverHighlight();
       resetDragState();
+      window.getSelection()?.removeAllRanges();
     }
     function cleanupKeyframesStyle() {
       if (hoverKeyframesStyleElement) {
@@ -6988,13 +7089,7 @@
       enterInspectionMode() {
         if (isInspecting) return;
         isInspecting = true;
-        addInspectionStyles();
-        document.addEventListener("mousedown", handleMouseDown, true);
-        document.addEventListener("mousemove", handleMouseMove, true);
-        document.addEventListener("mouseup", handleMouseUp, true);
-        document.addEventListener("click", preventClick, true);
-        document.addEventListener("dblclick", preventMouseEvents, true);
-        document.addEventListener("contextmenu", preventMouseEvents, true);
+        glassPane = createGlassPane();
         document.addEventListener("keydown", handleKeyDown);
       },
       exitInspectionMode() {
@@ -7589,6 +7684,7 @@
       this.inspectionManager = createInspectionManager({
         onElementSelect: (element) => this.handleElementSelected(element),
         onMultiSelect: (elements) => this.handleMultiSelect(elements),
+        onTextSelect: (range, commonAncestor) => this.handleTextSelected(range, commonAncestor),
         shouldIgnoreElement: (element) => this.shouldIgnoreElement(element),
         isElementSelected: (element) => this.selectionManager?.hasElement(element) || false,
         onEscape: () => this.exitInspectingMode(),
@@ -7695,24 +7791,24 @@
       const elements = this.selectionManager.buildHierarchicalStructure(
         (el) => findNearestComponent(el, this.verbose)
       );
-      const addComments = (items, selectedElements) => {
-        for (const item of items) {
-          for (const [element, info] of selectedElements) {
-            if (info.index === item.index) {
-              const comment = this.elementComments.get(element);
-              if (comment) {
-                item.comment = comment;
-              }
-              break;
+      this.enrichElementsWithComments(elements, this.selectionManager.getSelectedElements());
+      return elements;
+    }
+    enrichElementsWithComments(items, selectedElements) {
+      for (const item of items) {
+        for (const [element, info] of selectedElements) {
+          if (info.index === item.index) {
+            const comment = this.elementComments.get(element);
+            if (comment) {
+              item.comment = comment;
             }
-          }
-          if (item.children.length > 0) {
-            addComments(item.children, selectedElements);
+            break;
           }
         }
-      };
-      addComments(elements, this.selectionManager.getSelectedElements());
-      return elements;
+        if (item.children.length > 0) {
+          this.enrichElementsWithComments(item.children, selectedElements);
+        }
+      }
     }
     triggerSelection(mode, selector, selectorType) {
       try {
@@ -7878,6 +7974,29 @@
       }
       this.emitSelectionChanged();
     }
+    handleTextSelected(range, commonAncestor) {
+      if (!this.selectionManager) return;
+      const result = this.selectionManager.wrapTextRange(range, commonAncestor);
+      if (!result) {
+        this.showToast("Select text within one element");
+        return;
+      }
+      try {
+        this.selectionManager.selectElement(
+          result.wrapper,
+          (el) => findNearestComponent(el, this.verbose),
+          result.textSelection
+        );
+        this.showCommentPopoverForElement(result.wrapper);
+        this.selectionCount = this.selectionManager.getSelectedCount();
+        this.emitSelectionChanged();
+      } catch (error) {
+        result.wrapper.remove();
+        const message = error instanceof Error ? error.message : "Unknown error";
+        this.log("Text selection error:", message);
+        this.showToast("Selection error");
+      }
+    }
     removeSelectedElement() {
       if (!this.commentPopover.element || !this.selectionManager) return;
       const element = this.commentPopover.element;

package/dist/rpc/define.d.ts

@@ -10,6 +10,26 @@ export interface PageContext {
     selectionCount: number;
     isInspecting: boolean;
 }
+export interface ElementTextSelection {
+    selectedText: string;
+    containerXPath: string;
+    containerCssSelector: string;
+}
+export interface ElementComputedStyles {
+    width: number;
+    height: number;
+    fontSize: string;
+    fontFamily: string;
+    color?: string;
+    backgroundColor?: string;
+    display?: string;
+    position?: string;
+}
+export interface ElementComponentData {
+    componentLocation: string;
+    componentName?: string;
+    framework?: 'vue' | 'react' | 'angular' | 'svelte' | 'vanilla';
+}
 export interface ElementData {
     index: number;
     tagName: string;
@@ -19,21 +39,9 @@ export interface ElementData {
     attributes: Record<string, string>;
     imagePath?: string;
     comment?: string;
-    computedStyles?: {
-        width: number;
-        height: number;
-        fontSize: string;
-        fontFamily: string;
-        color?: string;
-        backgroundColor?: string;
-        display?: string;
-        position?: string;
-    };
-    componentData?: {
-        componentLocation: string;
-        componentName?: string;
-        framework?: 'vue' | 'react' | 'angular' | 'svelte' | 'vanilla';
-    };
+    textSelection?: ElementTextSelection;
+    computedStyles?: ElementComputedStyles;
+    componentData?: ElementComponentData;
     children: ElementData[];
 }
 export interface ScreenshotResult {

package/package.json

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