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

package/lib/@vite-plugin-opencode-assistant/components.es.js

@@ -1198,6 +1198,17 @@ function useWidget(options) {
 }
 //#endregion
 //#region es/open-code-widget/composables/use-inspector.js
+var IGNORE_SELECTORS = [
+	"#vue-inspector-container",
+	".opencode-widget",
+	".opencode-element-highlight",
+	".opencode-element-tooltip",
+	".opencode-select-mode-hint",
+	".floating-bubble"
+];
+var IGNORE_ATTRIBUTE = "data-v-inspector-ignore";
+var KEY_PROPS_DATA = "__v_inspector";
+var KEY_DATA = "data-v-inspector";
 function throttle(fn, delay) {
 	let lastCall = 0;
 	let rafId = null;
@@ -1244,67 +1255,26 @@ function isStateClass(className) {
 	if (/^(?:router-link|nuxt-link)/.test(className)) return true;
 	return false;
 }
-function filterStateClasses(classes) {
-	return classes.filter((cls) => !isStateClass(cls));
-}
 function getElementDescription(element) {
-	try {
-		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]);
-				const classMatch = selectorValue.match(/^\.([a-zA-Z_-][\w-]*)$/);
-				if (classMatch) return isStateClass(classMatch[1]);
-				return false;
-			}]
-		});
-	} catch (e) {
-		const parts = [element.tagName.toLowerCase()];
-		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 name = element.getAttribute("name");
-		if (name) parts.push(`[name="${name}"]`);
-		const placeholder = element.getAttribute("placeholder");
-		if (placeholder) parts.push(`[placeholder="${placeholder.substring(0, 20)}"]`);
-		if (element.getAttribute("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;
+	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]);
+			const classMatch = selectorValue.match(/^\.([a-zA-Z_-][\w-]*)$/);
+			if (classMatch) return isStateClass(classMatch[1]);
+			return false;
+		}]
+	});
 }
 function getFileInfoFromVueInstance(element) {
 	var _a, _b, _c, _d;
@@ -1336,51 +1306,68 @@ 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;
-		if (attrInfo && !fallbackFileInfo) fallbackFileInfo = attrInfo;
-		const fakeEvent = {
-			clientX: 0,
-			clientY: 0,
-			target: current,
-			currentTarget: current
-		};
-		const { params } = inspector.getTargetNode(fakeEvent);
-		if (params && params.file) {
-			const info = {
-				file: params.file,
-				line: (_a = params.line) != null ? _a : null,
-				column: (_b = params.column) != null ? _b : null
+		const data = getDataFromElement(current);
+		if (data) {
+			const match = data.match(/(.+):([\d]+):([\d]+)$/);
+			if (match) return {
+				file: match[1],
+				line: parseInt(match[2], 10),
+				column: parseInt(match[3], 10)
 			};
-			if (info.line !== null) return info;
-			if (!fallbackFileInfo) fallbackFileInfo = info;
 		}
-		const vueInfo = getFileInfoFromVueInstance(current);
-		if (vueInfo && !fallbackFileInfo) fallbackFileInfo = vueInfo;
 		current = current.parentElement;
 	}
-	return fallbackFileInfo || {
+	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;
+	else if (inspectorFileInfo == null ? void 0 : inspectorFileInfo.file) return inspectorFileInfo;
+	else return vueFileInfo;
 }
-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;
+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
+		};
 	}
-	return null;
+	if (element && !inspectorFileInfo) inspectorFileInfo = findInspectorFileInfo(element);
+	const vueFileInfo = element ? getFileInfoFromVueInstance(element) : null;
+	return mergeFileInfo(inspectorFileInfo, vueFileInfo);
 }
 function useInspector(options) {
 	const highlightVisible = ref(false);
@@ -1401,79 +1388,48 @@ function useInspector(options) {
 	});
 	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) {
-					elementToHighlight = getPreciseElementAtPoint(e.clientX, e.clientY, targetNode) || 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 uiElements = [
+			document.querySelector(".opencode-element-highlight"),
+			document.querySelector(".opencode-element-tooltip"),
+			document.querySelector(".opencode-select-mode-hint"),
+			document.querySelector(".floating-bubble")
+		];
+		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 fileName = currentFileInfo.file ? currentFileInfo.file.split("/").pop() : "";
-			let lineInfo = "";
-			if (currentFileInfo.line) {
-				lineInfo = `:${currentFileInfo.line}`;
-				if (currentFileInfo.column) lineInfo += `:${currentFileInfo.column}`;
+			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 newFileInfoText = fileName ? `${fileName}${lineInfo}` : "";
-			if (elementChanged || currentFileInfoText !== newFileInfoText) {
-				currentFileInfoText = newFileInfoText;
-				tooltipContent.value = {
-					description: currentDescription,
-					fileInfo: currentFileInfoText
-				};
+			const description = getElementDescription(elementToHighlight);
+			const fileName = fileInfo.file ? fileInfo.file.split("/").pop() : "";
+			let lineInfo = "";
+			if (fileInfo.line) {
+				lineInfo = `:${fileInfo.line}`;
+				if (fileInfo.column) lineInfo += `:${fileInfo.column}`;
 			}
+			tooltipContent.value = {
+				description,
+				fileInfo: fileName ? `${fileName}${lineInfo}` : ""
+			};
 			const rect = elementToHighlight.getBoundingClientRect();
 			const newTop = `${rect.top}px`;
 			const newLeft = `${rect.left}px`;
@@ -1489,29 +1445,24 @@ 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) tooltipTop = rect.bottom + 8;
-			if (tooltipLeft + tooltipWidth > window.innerWidth - 10) tooltipLeft = window.innerWidth - tooltipWidth - 10;
+			if (tooltipTop < margin) tooltipTop = rect.bottom + 8;
+			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`;
 			if (tooltipStyle.value.top !== newTooltipTop || tooltipStyle.value.left !== newTooltipLeft) tooltipStyle.value = {
 				top: newTooltipTop,
 				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);
@@ -1520,28 +1471,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) {
-					elementToSelect = getPreciseElementAtPoint(e.clientX, e.clientY, targetNode) || 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);
@@ -1577,14 +1511,6 @@ function useInspector(options) {
 			if (inspector) inspector.disable();
 			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;
 		}
@@ -2390,7 +2316,7 @@ __vue_sfc__.render = __vue_render__;
 var open_code_widget_default = __vue_sfc__;
 //#endregion
 //#region es/index.js
-var version = "1.0.33";
+var version = "1.0.34";
 function install(app, options) {
 	[open_code_widget_default].forEach((item) => {
 		if (item.install) app.use(item, options);

package/lib/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/lib/index.js

@@ -34,7 +34,7 @@ __export(lib_exports, {
 });
 module.exports = __toCommonJS(lib_exports);
 var import_open_code_widget = __toESM(require("./open-code-widget"));
-const version = "1.0.33";
+const version = "1.0.34";
 function install(app, options) {
   const components = [
     import_open_code_widget.default