@vite-plugin-opencode-assistant/components 1.0.18 → 1.0.19

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

@@ -2,8 +2,32 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp$2.call(to, key) && key !== except) __defProp$2(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp$2(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
 let vue = require("vue");
 let _vite_plugin_opencode_assistant_shared = require("@vite-plugin-opencode-assistant/shared");
+let css_selector_generator = require("css-selector-generator");
+css_selector_generator = __toESM(css_selector_generator);
 //#region es/open-code-widget/src/context.js
 var CONTEXT_KEY = /* @__PURE__ */ Symbol("OpenCodeWidgetContext");
 function provideOpenCodeWidgetContext(context) {
@@ -764,6 +788,21 @@ function useWidget(options) {
 }
 //#endregion
 //#region es/open-code-widget/composables/use-inspector.js
+function throttle(fn, delay) {
+	let lastCall = 0;
+	let rafId = null;
+	return ((...args) => {
+		const now = performance.now();
+		if (now - lastCall >= delay) {
+			lastCall = now;
+			fn(...args);
+		} else if (!rafId) rafId = requestAnimationFrame(() => {
+			rafId = null;
+			lastCall = performance.now();
+			fn(...args);
+		});
+	});
+}
 function getDirectText(element) {
 	let text = "";
 	for (let i = 0; i < element.childNodes.length; i++) {
@@ -772,22 +811,155 @@ function getDirectText(element) {
 	}
 	return text.trim();
 }
+var DYNAMIC_ID_PATTERN = /^(?:el-|:r[0-9]+:|radix-|uid-|ts-|uuid-|id-[a-f0-9]{4,}|.*[0-9]{4,}.*|.*-[a-f0-9]{6,}$)/i;
+var STATE_CLASS_PATTERN = /^(?:hover|active|focus|focus-visible|focus-within|disabled|enabled|checked|selected|open|closed|loading|error|success|warning|hidden|visible|show|hide|current|expanded|collapsed|pressed|dragging|droppable|sortable|placeholder|transition|enter|leave|appear|move)$/i;
+var STATE_CLASS_PREFIX_PATTERN = /^(?:is-|has-|was-|are-|can-|should-|will-|did-|does-|on-|off-|in-|out-|at-|to-|from-)/i;
+function isDynamicId(id) {
+	if (!id) return false;
+	if (DYNAMIC_ID_PATTERN.test(id)) return true;
+	const digitCount = (id.match(/\d/g) || []).length;
+	if (digitCount > (id.match(/[a-zA-Z]/g) || []).length && digitCount >= 3) return true;
+	const dashParts = id.split("-");
+	if (dashParts.length >= 3) {
+		const lastPart = dashParts[dashParts.length - 1];
+		if (/^\d+$/.test(lastPart) || /^[a-f0-9]{4,}$/i.test(lastPart)) return true;
+	}
+	return false;
+}
+function isStateClass(className) {
+	if (!className) return false;
+	if (STATE_CLASS_PATTERN.test(className)) return true;
+	if (STATE_CLASS_PREFIX_PATTERN.test(className)) return true;
+	if (className.includes("-active") || className.includes("-hover") || className.includes("-focus")) return true;
+	if (/^(?:router-link|nuxt-link)/.test(className)) return true;
+	return false;
+}
+function filterStateClasses(classes) {
+	return classes.filter((cls) => !isStateClass(cls));
+}
 function getElementDescription(element) {
-	const parts = [element.tagName.toLowerCase()];
-	const id = element.id;
-	if (id) parts.push(`#${id}`);
-	if (typeof element.className === "string") {
-		const className = element.className.trim().split(/\s+/).filter(Boolean).slice(0, 2).join(".");
-		if (className) parts.push(`.${className}`);
+	try {
+		return (0, css_selector_generator.default)(element, {
+			selectors: [
+				"id",
+				"class",
+				"tag",
+				"attribute",
+				"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
+		};
 	}
-	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("");
+	return null;
+}
+function getFileInfoFromVueInstance(element) {
+	var _a, _b, _c, _d;
+	const vue3Instance = element.__vueParentComponent;
+	if (vue3Instance) {
+		let current = vue3Instance;
+		while (current) {
+			const file = ((_a = current.type) == null ? void 0 : _a.__file) || ((_c = (_b = current.vnode) == null ? void 0 : _b.type) == null ? void 0 : _c.__file);
+			if (file) return {
+				file,
+				line: null,
+				column: null
+			};
+			current = current.parent;
+		}
+	}
+	const vue2Instance = element.__vue__;
+	if (vue2Instance) {
+		let current = vue2Instance;
+		while (current) {
+			const file = (_d = current.$options) == null ? void 0 : _d.__file;
+			if (file) return {
+				file,
+				line: null,
+				column: null
+			};
+			current = current.$parent;
+		}
+	}
+	return null;
+}
+function findFileInfo(element, inspector) {
+	var _a, _b;
+	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
+			};
+			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) {
 	var _a, _b;
@@ -804,7 +976,12 @@ function getPreciseElementAtPoint(x, y, boundary) {
 			if (el.closest("#vue-inspector-container")) continue;
 			if (el.closest(".opencode-widget")) continue;
 			if (el.hasAttribute("data-v-inspector-ignore")) continue;
-			if (boundary.contains(el) || el === boundary) {
+			if (boundary) {
+				if (boundary.contains(el) || el === boundary) {
+					element = el;
+					break;
+				}
+			} else {
 				element = el;
 				break;
 			}
@@ -834,13 +1011,31 @@ function useInspector(options) {
 	});
 	const INSPECTOR_CHECK_INTERVAL = 500;
 	let inspectorCheckTimer = null;
-	function handleMouseMove(e) {
+	function handleMouseMoveCore(e) {
+		var _a, _b;
 		if (!options.selectMode.value) return;
 		const inspector = window.__VUE_INSPECTOR__;
-		if (!inspector) return;
-		const { targetNode, params } = inspector.getTargetNode(e);
-		if (targetNode && params) {
-			const elementToHighlight = getPreciseElementAtPoint(e.clientX, e.clientY, targetNode) || targetNode;
+		let elementToHighlight = null;
+		let fileInfo = {
+			file: null,
+			line: null,
+			column: null
+		};
+		if (inspector) {
+			const { targetNode, params } = inspector.getTargetNode(e);
+			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 if (elementToHighlight) fileInfo = findFileInfo(elementToHighlight, inspector);
+			}
+		}
+		if (!elementToHighlight) elementToHighlight = getPreciseElementAtPoint(e.clientX, e.clientY, null);
+		if (elementToHighlight && !fileInfo.file) fileInfo = getFileInfoFromVueInstance(elementToHighlight) || fileInfo;
+		if (elementToHighlight) {
 			const rect = elementToHighlight.getBoundingClientRect();
 			const widget = document.querySelector(".opencode-widget");
 			let primary = "#3b82f6";
@@ -860,11 +1055,11 @@ function useInspector(options) {
 				background: primaryBg
 			};
 			const description = getElementDescription(elementToHighlight);
-			const fileName = params.file ? params.file.split("/").pop() : "";
+			const fileName = fileInfo.file ? fileInfo.file.split("/").pop() : "";
 			let lineInfo = "";
-			if (params.line) {
-				lineInfo = `:${params.line}`;
-				if (params.column) lineInfo += `:${params.column}`;
+			if (fileInfo.line) {
+				lineInfo = `:${fileInfo.line}`;
+				if (fileInfo.column) lineInfo += `:${fileInfo.column}`;
 			}
 			tooltipContent.value = {
 				description,
@@ -886,22 +1081,39 @@ function useInspector(options) {
 			tooltipVisible.value = false;
 		}
 	}
+	const handleMouseMove = throttle(handleMouseMoveCore, 16);
 	function setupInspectorHook() {
 		const inspector = window.__VUE_INSPECTOR__;
 		if (!inspector || inspector.__opencode_hooked) return;
 		const originalHandleClick = inspector.handleClick.bind(inspector);
 		inspector.handleClick = function(e) {
-			var _a, _b, _c;
+			var _a, _b;
 			if (options.selectMode.value) {
+				let elementToSelect = null;
+				let fileInfo = {
+					file: null,
+					line: null,
+					column: null
+				};
 				const { targetNode, params } = inspector.getTargetNode(e);
-				if (targetNode && params) {
-					const elementToSelect = getPreciseElementAtPoint(e.clientX, e.clientY, targetNode) || targetNode;
+				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;
+				if (elementToSelect) {
 					const innerText = getDirectText(elementToSelect);
 					const description = getElementDescription(elementToSelect);
 					const elementInfo = {
-						filePath: (_a = params.file) != null ? _a : null,
-						line: (_b = params.line) != null ? _b : null,
-						column: (_c = params.column) != null ? _c : null,
+						filePath: fileInfo.file,
+						line: fileInfo.line,
+						column: fileInfo.column,
 						innerText: (0, _vite_plugin_opencode_assistant_shared.truncate)(innerText, 200),
 						description
 					};
@@ -1468,7 +1680,7 @@ __vue_sfc__.render = __vue_render__;
 var open_code_widget_default = __vue_sfc__;
 //#endregion
 //#region es/index.js
-var version = "1.0.18";
+var version = "1.0.19";
 function install(app, options) {
 	[open_code_widget_default].forEach((item) => {
 		if (item.install) app.use(item, options);

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

@@ -1,5 +1,6 @@
 import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createStaticVNode, createVNode, defineComponent, inject, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, provide, ref, renderList, renderSlot, toDisplayString, toRef, useSlots, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
 import { truncate } from "@vite-plugin-opencode-assistant/shared";
+import getCssSelector from "css-selector-generator";
 //#region es/open-code-widget/src/context.js
 var CONTEXT_KEY = /* @__PURE__ */ Symbol("OpenCodeWidgetContext");
 function provideOpenCodeWidgetContext(context) {
@@ -760,6 +761,21 @@ function useWidget(options) {
 }
 //#endregion
 //#region es/open-code-widget/composables/use-inspector.js
+function throttle(fn, delay) {
+	let lastCall = 0;
+	let rafId = null;
+	return ((...args) => {
+		const now = performance.now();
+		if (now - lastCall >= delay) {
+			lastCall = now;
+			fn(...args);
+		} else if (!rafId) rafId = requestAnimationFrame(() => {
+			rafId = null;
+			lastCall = performance.now();
+			fn(...args);
+		});
+	});
+}
 function getDirectText(element) {
 	let text = "";
 	for (let i = 0; i < element.childNodes.length; i++) {
@@ -768,22 +784,155 @@ function getDirectText(element) {
 	}
 	return text.trim();
 }
+var DYNAMIC_ID_PATTERN = /^(?:el-|:r[0-9]+:|radix-|uid-|ts-|uuid-|id-[a-f0-9]{4,}|.*[0-9]{4,}.*|.*-[a-f0-9]{6,}$)/i;
+var STATE_CLASS_PATTERN = /^(?:hover|active|focus|focus-visible|focus-within|disabled|enabled|checked|selected|open|closed|loading|error|success|warning|hidden|visible|show|hide|current|expanded|collapsed|pressed|dragging|droppable|sortable|placeholder|transition|enter|leave|appear|move)$/i;
+var STATE_CLASS_PREFIX_PATTERN = /^(?:is-|has-|was-|are-|can-|should-|will-|did-|does-|on-|off-|in-|out-|at-|to-|from-)/i;
+function isDynamicId(id) {
+	if (!id) return false;
+	if (DYNAMIC_ID_PATTERN.test(id)) return true;
+	const digitCount = (id.match(/\d/g) || []).length;
+	if (digitCount > (id.match(/[a-zA-Z]/g) || []).length && digitCount >= 3) return true;
+	const dashParts = id.split("-");
+	if (dashParts.length >= 3) {
+		const lastPart = dashParts[dashParts.length - 1];
+		if (/^\d+$/.test(lastPart) || /^[a-f0-9]{4,}$/i.test(lastPart)) return true;
+	}
+	return false;
+}
+function isStateClass(className) {
+	if (!className) return false;
+	if (STATE_CLASS_PATTERN.test(className)) return true;
+	if (STATE_CLASS_PREFIX_PATTERN.test(className)) return true;
+	if (className.includes("-active") || className.includes("-hover") || className.includes("-focus")) return true;
+	if (/^(?:router-link|nuxt-link)/.test(className)) return true;
+	return false;
+}
+function filterStateClasses(classes) {
+	return classes.filter((cls) => !isStateClass(cls));
+}
 function getElementDescription(element) {
-	const parts = [element.tagName.toLowerCase()];
-	const id = element.id;
-	if (id) parts.push(`#${id}`);
-	if (typeof element.className === "string") {
-		const className = element.className.trim().split(/\s+/).filter(Boolean).slice(0, 2).join(".");
-		if (className) parts.push(`.${className}`);
+	try {
+		return getCssSelector(element, {
+			selectors: [
+				"id",
+				"class",
+				"tag",
+				"attribute",
+				"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;
+}
+function getFileInfoFromVueInstance(element) {
+	var _a, _b, _c, _d;
+	const vue3Instance = element.__vueParentComponent;
+	if (vue3Instance) {
+		let current = vue3Instance;
+		while (current) {
+			const file = ((_a = current.type) == null ? void 0 : _a.__file) || ((_c = (_b = current.vnode) == null ? void 0 : _b.type) == null ? void 0 : _c.__file);
+			if (file) return {
+				file,
+				line: null,
+				column: null
+			};
+			current = current.parent;
+		}
+	}
+	const vue2Instance = element.__vue__;
+	if (vue2Instance) {
+		let current = vue2Instance;
+		while (current) {
+			const file = (_d = current.$options) == null ? void 0 : _d.__file;
+			if (file) return {
+				file,
+				line: null,
+				column: null
+			};
+			current = current.$parent;
+		}
+	}
+	return null;
+}
+function findFileInfo(element, inspector) {
+	var _a, _b;
+	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
+			};
+			if (info.line !== null) return info;
+			if (!fallbackFileInfo) fallbackFileInfo = info;
+		}
+		const vueInfo = getFileInfoFromVueInstance(current);
+		if (vueInfo && !fallbackFileInfo) fallbackFileInfo = vueInfo;
+		current = current.parentElement;
 	}
-	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("");
+	return fallbackFileInfo || {
+		file: null,
+		line: null,
+		column: null
+	};
 }
 function getPreciseElementAtPoint(x, y, boundary) {
 	var _a, _b;
@@ -800,7 +949,12 @@ function getPreciseElementAtPoint(x, y, boundary) {
 			if (el.closest("#vue-inspector-container")) continue;
 			if (el.closest(".opencode-widget")) continue;
 			if (el.hasAttribute("data-v-inspector-ignore")) continue;
-			if (boundary.contains(el) || el === boundary) {
+			if (boundary) {
+				if (boundary.contains(el) || el === boundary) {
+					element = el;
+					break;
+				}
+			} else {
 				element = el;
 				break;
 			}
@@ -830,13 +984,31 @@ function useInspector(options) {
 	});
 	const INSPECTOR_CHECK_INTERVAL = 500;
 	let inspectorCheckTimer = null;
-	function handleMouseMove(e) {
+	function handleMouseMoveCore(e) {
+		var _a, _b;
 		if (!options.selectMode.value) return;
 		const inspector = window.__VUE_INSPECTOR__;
-		if (!inspector) return;
-		const { targetNode, params } = inspector.getTargetNode(e);
-		if (targetNode && params) {
-			const elementToHighlight = getPreciseElementAtPoint(e.clientX, e.clientY, targetNode) || targetNode;
+		let elementToHighlight = null;
+		let fileInfo = {
+			file: null,
+			line: null,
+			column: null
+		};
+		if (inspector) {
+			const { targetNode, params } = inspector.getTargetNode(e);
+			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 if (elementToHighlight) fileInfo = findFileInfo(elementToHighlight, inspector);
+			}
+		}
+		if (!elementToHighlight) elementToHighlight = getPreciseElementAtPoint(e.clientX, e.clientY, null);
+		if (elementToHighlight && !fileInfo.file) fileInfo = getFileInfoFromVueInstance(elementToHighlight) || fileInfo;
+		if (elementToHighlight) {
 			const rect = elementToHighlight.getBoundingClientRect();
 			const widget = document.querySelector(".opencode-widget");
 			let primary = "#3b82f6";
@@ -856,11 +1028,11 @@ function useInspector(options) {
 				background: primaryBg
 			};
 			const description = getElementDescription(elementToHighlight);
-			const fileName = params.file ? params.file.split("/").pop() : "";
+			const fileName = fileInfo.file ? fileInfo.file.split("/").pop() : "";
 			let lineInfo = "";
-			if (params.line) {
-				lineInfo = `:${params.line}`;
-				if (params.column) lineInfo += `:${params.column}`;
+			if (fileInfo.line) {
+				lineInfo = `:${fileInfo.line}`;
+				if (fileInfo.column) lineInfo += `:${fileInfo.column}`;
 			}
 			tooltipContent.value = {
 				description,
@@ -882,22 +1054,39 @@ function useInspector(options) {
 			tooltipVisible.value = false;
 		}
 	}
+	const handleMouseMove = throttle(handleMouseMoveCore, 16);
 	function setupInspectorHook() {
 		const inspector = window.__VUE_INSPECTOR__;
 		if (!inspector || inspector.__opencode_hooked) return;
 		const originalHandleClick = inspector.handleClick.bind(inspector);
 		inspector.handleClick = function(e) {
-			var _a, _b, _c;
+			var _a, _b;
 			if (options.selectMode.value) {
+				let elementToSelect = null;
+				let fileInfo = {
+					file: null,
+					line: null,
+					column: null
+				};
 				const { targetNode, params } = inspector.getTargetNode(e);
-				if (targetNode && params) {
-					const elementToSelect = getPreciseElementAtPoint(e.clientX, e.clientY, targetNode) || targetNode;
+				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;
+				if (elementToSelect) {
 					const innerText = getDirectText(elementToSelect);
 					const description = getElementDescription(elementToSelect);
 					const elementInfo = {
-						filePath: (_a = params.file) != null ? _a : null,
-						line: (_b = params.line) != null ? _b : null,
-						column: (_c = params.column) != null ? _c : null,
+						filePath: fileInfo.file,
+						line: fileInfo.line,
+						column: fileInfo.column,
 						innerText: truncate(innerText, 200),
 						description
 					};
@@ -1464,7 +1653,7 @@ __vue_sfc__.render = __vue_render__;
 var open_code_widget_default = __vue_sfc__;
 //#endregion
 //#region es/index.js
-var version = "1.0.18";
+var version = "1.0.19";
 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.18";
+declare const version = "1.0.19";
 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.18";
+const version = "1.0.19";
 function install(app, options) {
   const components = [
     import_open_code_widget.default