@vite-plugin-opencode-assistant/components 1.0.33 → 1.0.34

package/es/index.d.ts

@@ -1,6 +1,6 @@
 import OpenCodeWidget from './open-code-widget';
 import type { App } from 'vue';
-declare const version = "1.0.33";
+declare const version = "1.0.34";
 declare function install(app: App<any>, options?: any): void;
 export { install, version, OpenCodeWidget };
 export default install;

package/es/index.js

@@ -1,5 +1,5 @@
 import OpenCodeWidget from "./open-code-widget";
-const version = "1.0.33";
+const version = "1.0.34";
 function install(app, options) {
   const components = [
     OpenCodeWidget

package/es/open-code-widget/composables/use-inspector.js

@@ -1,6 +1,17 @@
 import { ref, watch, onMounted, onUnmounted } from "vue";
 import { truncate } from "@vite-plugin-opencode-assistant/shared";
 import getCssSelector from "css-selector-generator";
+const IGNORE_SELECTORS = [
+  "#vue-inspector-container",
+  ".opencode-widget",
+  ".opencode-element-highlight",
+  ".opencode-element-tooltip",
+  ".opencode-select-mode-hint",
+  ".floating-bubble"
+];
+const IGNORE_ATTRIBUTE = "data-v-inspector-ignore";
+const KEY_PROPS_DATA = "__v_inspector";
+const KEY_DATA = "data-v-inspector";
 function throttle(fn, delay) {
   let lastCall = 0;
   let rafId = null;
@@ -66,74 +77,27 @@ function isStateClass(className) {
   }
   return false;
 }
-function filterStateClasses(classes) {
-  return classes.filter((cls) => !isStateClass(cls));
-}
 function getElementDescription(element) {
-  try {
-    const selector = getCssSelector(element, {
-      selectors: ["id", "class", "tag", "nthchild"],
-      combineWithinSelector: true,
-      combineBetweenSelectors: true,
-      maxCombinations: 100,
-      maxCandidates: 100,
-      blacklist: [
-        (selectorValue) => {
-          const idMatch = selectorValue.match(/^#(.+)$/);
-          if (idMatch) {
-            return isDynamicId(idMatch[1]);
-          }
-          const classMatch = selectorValue.match(/^\.([a-zA-Z_-][\w-]*)$/);
-          if (classMatch) {
-            return isStateClass(classMatch[1]);
-          }
-          return false;
+  return getCssSelector(element, {
+    selectors: ["id", "class", "tag", "nthchild"],
+    combineWithinSelector: true,
+    combineBetweenSelectors: true,
+    maxCombinations: 100,
+    maxCandidates: 100,
+    blacklist: [
+      (selectorValue) => {
+        const idMatch = selectorValue.match(/^#(.+)$/);
+        if (idMatch) {
+          return isDynamicId(idMatch[1]);
         }
-      ]
-    });
-    return selector;
-  } catch (e) {
-    const tag = element.tagName.toLowerCase();
-    const parts = [tag];
-    const id = element.id;
-    if (id && !isDynamicId(id)) parts.push(`#${id}`);
-    const className = element.className;
-    if (typeof className === "string") {
-      const classes = filterStateClasses(className.trim().split(/\s+/).filter(Boolean)).slice(0, 2);
-      if (classes.length > 0) parts.push(`.${classes.join(".")}`);
-    } else {
-      const svgClass = className.baseVal;
-      if (svgClass) {
-        const classes = filterStateClasses(svgClass.trim().split(/\s+/).filter(Boolean)).slice(
-          0,
-          2
-        );
-        if (classes.length > 0) parts.push(`.${classes.join(".")}`);
+        const classMatch = selectorValue.match(/^\.([a-zA-Z_-][\w-]*)$/);
+        if (classMatch) {
+          return isStateClass(classMatch[1]);
+        }
+        return false;
       }
-    }
-    const name = element.getAttribute("name");
-    if (name) parts.push(`[name="${name}"]`);
-    const placeholder = element.getAttribute("placeholder");
-    if (placeholder) parts.push(`[placeholder="${placeholder.substring(0, 20)}"]`);
-    const src = element.getAttribute("src");
-    if (src) parts.push(`[src]`);
-    const href = element.getAttribute("href");
-    if (href && href !== "#") parts.push(`[href]`);
-    return parts.join("");
-  }
-}
-function getFileInfoFromAttributes(element) {
-  const file = element.getAttribute("data-v-inspector-file");
-  if (file) {
-    const line = element.getAttribute("data-v-inspector-line");
-    const column = element.getAttribute("data-v-inspector-column");
-    return {
-      file,
-      line: line ? parseInt(line, 10) : null,
-      column: column ? parseInt(column, 10) : null
-    };
-  }
-  return null;
+    ]
+  });
 }
 function getFileInfoFromVueInstance(element) {
   var _a, _b, _c, _d;
@@ -161,61 +125,83 @@ function getFileInfoFromVueInstance(element) {
   }
   return null;
 }
-function findFileInfo(element, inspector) {
+function shouldIgnoreElement(el) {
+  if (el.hasAttribute(IGNORE_ATTRIBUTE)) return true;
+  for (const selector of IGNORE_SELECTORS) {
+    if (el.closest(selector)) return true;
+  }
+  return false;
+}
+function getDataFromElement(el) {
   var _a, _b;
+  const vnodeData = (_b = (_a = el.__vnode) == null ? void 0 : _a.props) == null ? void 0 : _b[KEY_PROPS_DATA];
+  if (vnodeData) return vnodeData;
+  const attr = el.getAttribute(KEY_DATA);
+  return attr != null ? attr : void 0;
+}
+function findInspectorFileInfo(element) {
   let current = element;
-  let fallbackFileInfo = null;
   while (current) {
-    const attrInfo = getFileInfoFromAttributes(current);
-    if (attrInfo && attrInfo.line !== null) {
-      return attrInfo;
+    const data = getDataFromElement(current);
+    if (data) {
+      const splitRE = /(.+):([\d]+):([\d]+)$/;
+      const match = data.match(splitRE);
+      if (match) {
+        return {
+          file: match[1],
+          line: parseInt(match[2], 10),
+          column: parseInt(match[3], 10)
+        };
+      }
     }
-    if (attrInfo && !fallbackFileInfo) {
-      fallbackFileInfo = attrInfo;
+    current = current.parentElement;
+  }
+  return null;
+}
+function mergeFileInfo(inspectorFileInfo, vueFileInfo) {
+  if (!(inspectorFileInfo == null ? void 0 : inspectorFileInfo.file) && !(vueFileInfo == null ? void 0 : vueFileInfo.file)) {
+    return { file: null, line: null, column: null };
+  }
+  const isNodeModules = (path) => path.includes("node_modules");
+  if ((inspectorFileInfo == null ? void 0 : inspectorFileInfo.file) && (vueFileInfo == null ? void 0 : vueFileInfo.file)) {
+    if (!isNodeModules(inspectorFileInfo.file)) {
+      return inspectorFileInfo;
+    } else if (!isNodeModules(vueFileInfo.file)) {
+      return vueFileInfo;
+    } else {
+      return inspectorFileInfo;
     }
-    const fakeEvent = {
-      clientX: 0,
-      clientY: 0,
-      target: current,
-      currentTarget: current
-    };
-    const { params } = inspector.getTargetNode(fakeEvent);
-    if (params && params.file) {
-      const info = {
+  } else if (inspectorFileInfo == null ? void 0 : inspectorFileInfo.file) {
+    return inspectorFileInfo;
+  } else {
+    return vueFileInfo;
+  }
+}
+function getTargetElement(e) {
+  if (!e.target || !(e.target instanceof Element)) return null;
+  const el = e.target;
+  if (shouldIgnoreElement(el)) return null;
+  return el;
+}
+function getFileInfo(e, element) {
+  var _a, _b;
+  const inspector = window.__VUE_INSPECTOR__;
+  let inspectorFileInfo = null;
+  if (inspector) {
+    const { targetNode, params } = inspector.getTargetNode(e);
+    if (targetNode && params && params.file) {
+      inspectorFileInfo = {
         file: params.file,
         line: (_a = params.line) != null ? _a : null,
         column: (_b = params.column) != null ? _b : null
       };
-      if (info.line !== null) {
-        return info;
-      }
-      if (!fallbackFileInfo) {
-        fallbackFileInfo = info;
-      }
     }
-    const vueInfo = getFileInfoFromVueInstance(current);
-    if (vueInfo && !fallbackFileInfo) {
-      fallbackFileInfo = vueInfo;
-    }
-    current = current.parentElement;
   }
-  return fallbackFileInfo || { file: null, line: null, column: null };
-}
-function getPreciseElementAtPoint(x, y, boundary) {
-  const elements = document.elementsFromPoint(x, y);
-  for (const el of elements) {
-    if (el.closest("#vue-inspector-container")) continue;
-    if (el.closest(".opencode-widget")) continue;
-    if (el.hasAttribute("data-v-inspector-ignore")) continue;
-    if (boundary) {
-      if (boundary.contains(el) || el === boundary) {
-        return el;
-      }
-    } else {
-      return el;
-    }
+  if (element && !inspectorFileInfo) {
+    inspectorFileInfo = findInspectorFileInfo(element);
   }
-  return null;
+  const vueFileInfo = element ? getFileInfoFromVueInstance(element) : null;
+  return mergeFileInfo(inspectorFileInfo, vueFileInfo);
 }
 function useInspector(options) {
   const highlightVisible = ref(false);
@@ -230,84 +216,50 @@ function useInspector(options) {
   const tooltipContent = ref({ description: "", fileInfo: "" });
   const INSPECTOR_CHECK_INTERVAL = 500;
   let inspectorCheckTimer = null;
-  let currentHighlightElement = null;
-  let currentFileInfo = { file: null, line: null, column: null };
   let currentPrimary = "#3b82f6";
   let currentPrimaryBg = "rgba(59, 130, 246, 0.1)";
-  let currentDescription = "";
-  let currentFileInfoText = "";
+  function setPointerEventsNone(elements) {
+    elements.forEach((el) => {
+      if (el) el.style.pointerEvents = "none";
+    });
+  }
+  function setPointerEventsAuto(elements) {
+    elements.forEach((el) => {
+      if (el) el.style.pointerEvents = "";
+    });
+  }
   function handleMouseMoveCore(e) {
-    var _a, _b;
     if (!options.selectMode.value) return;
-    const inspector = window.__VUE_INSPECTOR__;
     const highlight = document.querySelector(".opencode-element-highlight");
     const tooltip = document.querySelector(".opencode-element-tooltip");
-    if (highlight) highlight.style.pointerEvents = "none";
-    if (tooltip) tooltip.style.pointerEvents = "none";
-    let elementToHighlight = null;
-    let targetNode;
-    let fileInfo = { file: null, line: null, column: null };
-    try {
-      if (inspector) {
-        const result = inspector.getTargetNode(e);
-        targetNode = result.targetNode;
-        const params = result.params;
-        if (targetNode) {
-          const preciseElement = getPreciseElementAtPoint(e.clientX, e.clientY, targetNode);
-          elementToHighlight = preciseElement || targetNode;
-          if (params && params.file) {
-            fileInfo = {
-              file: params.file,
-              line: (_a = params.line) != null ? _a : null,
-              column: (_b = params.column) != null ? _b : null
-            };
-          } else {
-            fileInfo = findFileInfo(targetNode, inspector);
-          }
-        }
-      }
-      if (!elementToHighlight) {
-        elementToHighlight = getPreciseElementAtPoint(e.clientX, e.clientY, null);
-      }
-      if (elementToHighlight && !fileInfo.file) {
-        fileInfo = getFileInfoFromVueInstance(elementToHighlight) || fileInfo;
-      }
-    } finally {
-      if (highlight) highlight.style.pointerEvents = "";
-      if (tooltip) tooltip.style.pointerEvents = "";
-    }
+    const selectHint = document.querySelector(".opencode-select-mode-hint");
+    const floatingBubble = document.querySelector(".floating-bubble");
+    const uiElements = [highlight, tooltip, selectHint, floatingBubble];
+    setPointerEventsNone(uiElements);
+    const elementToHighlight = getTargetElement(e);
+    const fileInfo = getFileInfo(e, elementToHighlight);
+    setPointerEventsAuto(uiElements);
     if (elementToHighlight) {
-      const elementChanged = currentHighlightElement !== elementToHighlight;
-      if (elementChanged) {
-        currentHighlightElement = elementToHighlight;
-        currentFileInfo = fileInfo;
-        const widget = document.querySelector(".opencode-widget");
-        if (widget) {
-          const style = getComputedStyle(widget);
-          currentPrimary = style.getPropertyValue("--oc-primary").trim() || currentPrimary;
-          currentPrimaryBg = style.getPropertyValue("--oc-primary-bg").trim() || currentPrimaryBg;
-        }
-        currentDescription = getElementDescription(elementToHighlight);
-      } else if (!currentFileInfo.file && fileInfo.file) {
-        currentFileInfo = fileInfo;
+      const widget = document.querySelector(".opencode-widget");
+      if (widget) {
+        const style = getComputedStyle(widget);
+        currentPrimary = style.getPropertyValue("--oc-primary").trim() || currentPrimary;
+        currentPrimaryBg = style.getPropertyValue("--oc-primary-bg").trim() || currentPrimaryBg;
       }
-      const fileName = currentFileInfo.file ? currentFileInfo.file.split("/").pop() : "";
+      const description = getElementDescription(elementToHighlight);
+      const fileName = fileInfo.file ? fileInfo.file.split("/").pop() : "";
       let lineInfo = "";
-      if (currentFileInfo.line) {
-        lineInfo = `:${currentFileInfo.line}`;
-        if (currentFileInfo.column) {
-          lineInfo += `:${currentFileInfo.column}`;
+      if (fileInfo.line) {
+        lineInfo = `:${fileInfo.line}`;
+        if (fileInfo.column) {
+          lineInfo += `:${fileInfo.column}`;
         }
       }
-      const newFileInfoText = fileName ? `${fileName}${lineInfo}` : "";
-      const fileInfoChanged = currentFileInfoText !== newFileInfoText;
-      if (elementChanged || fileInfoChanged) {
-        currentFileInfoText = newFileInfoText;
-        tooltipContent.value = {
-          description: currentDescription,
-          fileInfo: currentFileInfoText
-        };
-      }
+      const fileInfoText = fileName ? `${fileName}${lineInfo}` : "";
+      tooltipContent.value = {
+        description,
+        fileInfo: fileInfoText
+      };
       const rect = elementToHighlight.getBoundingClientRect();
       const newTop = `${rect.top}px`;
       const newLeft = `${rect.left}px`;
@@ -325,13 +277,20 @@ function useInspector(options) {
       }
       const tooltipHeight = 50;
       const tooltipWidth = 200;
+      const margin = 10;
       let tooltipTop = rect.top - tooltipHeight - 8;
       let tooltipLeft = rect.left;
-      if (tooltipTop < 10) {
+      if (tooltipTop < margin) {
         tooltipTop = rect.bottom + 8;
       }
-      if (tooltipLeft + tooltipWidth > window.innerWidth - 10) {
-        tooltipLeft = window.innerWidth - tooltipWidth - 10;
+      if (tooltipTop + tooltipHeight > window.innerHeight - margin) {
+        tooltipTop = Math.max(margin, rect.top - tooltipHeight - 8);
+      }
+      if (tooltipLeft < margin) {
+        tooltipLeft = margin;
+      }
+      if (tooltipLeft + tooltipWidth > window.innerWidth - margin) {
+        tooltipLeft = window.innerWidth - tooltipWidth - margin;
       }
       const newTooltipTop = `${tooltipTop}px`;
       const newTooltipLeft = `${tooltipLeft}px`;
@@ -341,23 +300,11 @@ function useInspector(options) {
           left: newTooltipLeft
         };
       }
-      if (!highlightVisible.value) {
-        highlightVisible.value = true;
-      }
-      if (!tooltipVisible.value) {
-        tooltipVisible.value = true;
-      }
+      highlightVisible.value = true;
+      tooltipVisible.value = true;
     } else {
-      currentHighlightElement = null;
-      currentDescription = "";
-      currentFileInfoText = "";
-      currentFileInfo = { file: null, line: null, column: null };
-      if (highlightVisible.value) {
-        highlightVisible.value = false;
-      }
-      if (tooltipVisible.value) {
-        tooltipVisible.value = false;
-      }
+      highlightVisible.value = false;
+      tooltipVisible.value = false;
     }
   }
   const handleMouseMove = throttle(handleMouseMoveCore, 16);
@@ -366,32 +313,11 @@ function useInspector(options) {
     if (!inspector || inspector.__opencode_hooked) return;
     const originalHandleClick = inspector.handleClick.bind(inspector);
     inspector.handleClick = function(e) {
-      var _a, _b;
       if (options.selectMode.value) {
         e.preventDefault();
         e.stopPropagation();
-        let elementToSelect = null;
-        let fileInfo = { file: null, line: null, column: null };
-        const { targetNode, params } = inspector.getTargetNode(e);
-        if (targetNode) {
-          const preciseElement = getPreciseElementAtPoint(e.clientX, e.clientY, targetNode);
-          elementToSelect = preciseElement || targetNode;
-          if (params && params.file) {
-            fileInfo = {
-              file: params.file,
-              line: (_a = params.line) != null ? _a : null,
-              column: (_b = params.column) != null ? _b : null
-            };
-          } else if (elementToSelect) {
-            fileInfo = findFileInfo(elementToSelect, inspector);
-          }
-        }
-        if (!elementToSelect) {
-          elementToSelect = getPreciseElementAtPoint(e.clientX, e.clientY, null);
-        }
-        if (elementToSelect && !fileInfo.file) {
-          fileInfo = getFileInfoFromVueInstance(elementToSelect) || fileInfo;
-        }
+        const elementToSelect = getTargetElement(e);
+        const fileInfo = getFileInfo(e, elementToSelect);
         if (elementToSelect) {
           const innerText = getDirectText(elementToSelect);
           const description = getElementDescription(elementToSelect);
@@ -431,10 +357,6 @@ function useInspector(options) {
       }
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("keydown", handleKeydown, true);
-      currentHighlightElement = null;
-      currentDescription = "";
-      currentFileInfoText = "";
-      currentFileInfo = { file: null, line: null, column: null };
       highlightVisible.value = false;
       tooltipVisible.value = false;
     }