@mcpc-tech/unplugin-dev-inspector-mcp 0.0.1 → 0.0.2-beta.2

package/dist/index.js

@@ -8,13 +8,15 @@ import { z } from "zod";
 import "@modelcontextprotocol/sdk/server/index.js";
 import { mcpc } from "@mcpc-tech/core";
 import path, { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
 import fs from "fs";
 import path$1, { dirname as dirname$1 } from "path";
-import { fileURLToPath } from "url";
+import { fileURLToPath as fileURLToPath$1 } from "url";
 import { convertToModelMessages, streamText } from "ai";
 import { createACPProvider } from "@mcpc-tech/acp-ai-provider";
 import { planEntrySchema } from "@agentclientprotocol/sdk";
 import { existsSync, readFileSync } from "node:fs";
+import { parse } from "@vue/compiler-sfc";
 
 //#region rolldown:runtime
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -386,6 +388,49 @@ function bindPuppet(transport, puppet, methods = [...DEFAULT_FORWARDED]) {
 }
 var encoder = new TextEncoder();
 
+//#endregion
+//#region src/prompt-schemas.ts
+/**
+* Shared prompt schemas for MCP inspector prompts
+* Used by both server and client implementations
+*/
+const PROMPT_SCHEMAS = {
+	capture_element: {
+		name: "capture_element",
+		title: "Capture Element Context",
+		description: "Capture context about a UI element for troubleshooting and investigation.",
+		arguments: []
+	},
+	view_inspections: {
+		name: "view_inspections",
+		title: "View All Inspections",
+		description: "View all element inspections in the queue with their status.",
+		arguments: []
+	},
+	launch_chrome_devtools: {
+		name: "launch_chrome_devtools",
+		title: "Launch Chrome DevTools",
+		description: "Launch Chrome DevTools and navigate to a specified URL for debugging and inspection.",
+		arguments: [{
+			name: "url",
+			description: "The URL to navigate to (e.g., http://localhost:3000)",
+			required: true
+		}]
+	},
+	refresh_chrome_state: {
+		name: "refresh_chrome_state",
+		title: "Refresh Chrome State",
+		description: "Refresh the state of the Chrome DevTools for the specified URL.",
+		arguments: []
+	},
+	get_network_requests: {
+		name: "get_network_requests",
+		title: "Get Network Requests",
+		description: "Get all network requests for the specified URL.",
+		arguments: []
+	}
+};
+
 //#endregion
 //#region src/tool-schemas.ts
 /**
@@ -393,31 +438,31 @@ var encoder = new TextEncoder();
 * Used by both server and client implementations
 */
 const TOOL_SCHEMAS = {
-	inspect_element: {
-		name: "inspect_element",
-		description: "Activate the visual element inspector to let the user select a UI element on the page. The user will click an element and provide feedback about what they want to change. Returns the source code location and user feedback.",
+	capture_element_context: {
+		name: "capture_element_context",
+		description: "Capture element context for troubleshooting. Activates visual selector, user clicks element and provides notes, returns source location, DOM hierarchy, computed styles, dimensions, and user notes. Combine with chrome_devtools MCP for deeper diagnostics (Network, Console, Performance, DOM tools).",
 		inputSchema: {
 			type: "object",
 			properties: {}
 		}
 	},
-	get_all_feedbacks: {
-		name: "get_all_feedbacks",
-		description: "Get a list of all current feedback items in the queue, including their status (pending/loading/success/error) and progress. Use this to see what tasks are already being worked on.",
+	list_inspections: {
+		name: "list_inspections",
+		description: "List all captured inspections with ID, element details, source location, notes, and status (pending/in-progress/completed/failed). Use with chrome_devtools for additional context (Console.getMessages, Network.getHAR, Performance.getMetrics).",
 		inputSchema: {
 			type: "object",
 			properties: {}
 		}
 	},
-	update_feedback_status: {
-		name: "update_feedback_status",
-		description: "Update the status of the current feedback item in the user's queue. Use this to show progress or mark completion.",
+	update_inspection_status: {
+		name: "update_inspection_status",
+		description: "Update inspection status with optional progress tracking.\n\n**Parameters**:\n- inspectionId: Optional (auto-detects if omitted)\n- status: 'in-progress' | 'completed' | 'failed'\n- progress: Optional steps array [{id, title, status}]\n- message: REQUIRED for 'completed'/'failed' status\n\n**Example**:\n```javascript\nupdate_inspection_status({\n  status: 'completed',\n  message: 'Fixed: pointer-events: none blocking clicks'\n});\n```",
 		inputSchema: {
 			type: "object",
 			properties: {
-				feedbackId: {
+				inspectionId: {
 					type: "string",
-					description: "Optional feedback ID. If not provided, will use the most recent loading feedback or the one from session."
+					description: "Optional inspection ID. If not provided, uses the current active inspection."
 				},
 				status: {
 					type: "string",
@@ -426,7 +471,7 @@ const TOOL_SCHEMAS = {
 						"completed",
 						"failed"
 					],
-					description: "Current status: 'in-progress' for updates, 'completed' when done, 'failed' on error"
+					description: "Current status: 'in-progress' for updates, 'completed' when resolved, 'failed' if unresolvable"
 				},
 				progress: {
 					type: "object",
@@ -454,21 +499,43 @@ const TOOL_SCHEMAS = {
 							]
 						}
 					} },
-					description: "Optional progress info with step-by-step details"
+					description: "Optional step-by-step progress tracking"
 				},
 				message: {
 					type: "string",
-					description: "Status message or completion summary. REQUIRED when status is 'completed' or 'failed'"
+					description: "Summary of findings or resolution. REQUIRED when status is 'completed' or 'failed'"
 				}
 			},
 			required: ["status"]
 		}
+	},
+	execute_page_script: {
+		name: "execute_page_script",
+		description: "Execute JavaScript in browser context (synchronous only, must return value). Access: window, document, DOM APIs, React/Vue instances, localStorage. For deeper diagnostics, use chrome_devtools MCP (Network.getHAR, Console.getMessages, Performance.getMetrics, Debugger, HeapProfiler).",
+		inputSchema: {
+			type: "object",
+			properties: { code: {
+				type: "string",
+				description: "JavaScript code to execute in page context. Must return a value for diagnostic output."
+			} },
+			required: ["code"]
+		}
 	}
 };
 
 //#endregion
 //#region src/mcp.ts
 /**
+* Get Chrome DevTools binary path from npm package, then use node to run it, faster/stabler than npx
+*/
+function getChromeDevToolsBinPath() {
+	const resolver = import.meta.resolve;
+	if (!resolver) throw new Error("Cannot resolve chrome-devtools-mcp package");
+	const pkgUrl = resolver("chrome-devtools-mcp/package.json");
+	const chromeDevTools = path.dirname(fileURLToPath(pkgUrl));
+	return path.join(chromeDevTools, "./build/src/index.js");
+}
+/**
 * Call MCP server method and wait for response
 * @param mcpServer - The MCP server instance
 * @param method - The method name to call
@@ -501,51 +568,178 @@ function callMcpMethod(mcpServer, method, params) {
 /**
 * Create and configure the MCP server for source inspection
 */
-async function createInspectorMcpServer() {
+async function createInspectorMcpServer(serverContext) {
 	const mcpServer = await mcpc([{
 		name: "dev-inspector",
 		version: "1.0.0",
 		title: "A tool for inspecting and interacting with the development environment."
 	}, { capabilities: {
-		tools: {},
+		tools: { listChanged: true },
 		sampling: {},
-		prompts: {}
-	} }], []);
+		prompts: { listChanged: true }
+	} }], [{
+		name: "chrome_devtools",
+		description: `Access Chrome DevTools for browser diagnostics.
+
+Provides tools for inspecting network requests, console logs, and performance metrics.
+
+IMPORTANT: Must first call chrome_navigate_page to launch Chrome before using these capabilities.
+Default dev server URL: http://${serverContext?.host || "localhost"}:${serverContext?.port || 5173}
+
+You MUST ask the user for confirmation before navigating to any URL.`,
+		options: { refs: ["<tool name=\"chrome.__ALL__\"/>"] },
+		deps: { mcpServers: { chrome: {
+			transportType: "stdio",
+			command: "node",
+			args: [getChromeDevToolsBinPath()]
+		} } }
+	}]);
 	const mcpClientExecServer = createClientExecServer(mcpServer, "inspector");
 	mcpClientExecServer.registerClientToolSchemas([
-		{ ...TOOL_SCHEMAS.inspect_element },
-		{ ...TOOL_SCHEMAS.get_all_feedbacks },
-		{ ...TOOL_SCHEMAS.update_feedback_status }
+		{ ...TOOL_SCHEMAS.capture_element_context },
+		{ ...TOOL_SCHEMAS.list_inspections },
+		{ ...TOOL_SCHEMAS.update_inspection_status },
+		{ ...TOOL_SCHEMAS.execute_page_script }
 	]);
 	mcpServer.setRequestHandler(ListPromptsRequestSchema, async (request) => {
-		return { prompts: [{
-			name: "grab-element",
-			title: "Inspect Element",
-			description: "Inspect a UI element and get user feedback for modifications.",
-			arguments: []
-		}, {
-			name: "view-feedbacks",
-			title: "View All Feedbacks",
-			description: "View all current feedback items in the queue with their status.",
-			arguments: []
-		}] };
+		const defaultUrl = `http://${serverContext?.host || "localhost"}:${serverContext?.port || 5173}`;
+		return { prompts: [
+			{ ...PROMPT_SCHEMAS.capture_element },
+			{ ...PROMPT_SCHEMAS.view_inspections },
+			{
+				...PROMPT_SCHEMAS.launch_chrome_devtools,
+				description: `Launch Chrome DevTools and navigate to the dev server for debugging and inspection. Default URL: ${defaultUrl}. You can use this default URL or provide a custom one.`,
+				arguments: [{
+					name: "url",
+					description: `The URL to navigate to. Press Enter to use default: ${defaultUrl}`,
+					required: false
+				}]
+			},
+			{ ...PROMPT_SCHEMAS.refresh_chrome_state }
+		] };
 	});
 	mcpServer.setRequestHandler(GetPromptRequestSchema, async (request) => {
-		if (request.params.name === "grab-element") return { messages: (await callMcpMethod(mcpServer, "tools/call", {
-			name: "inspect_element",
-			arguments: {}
-		}))?.content.map((item) => ({
-			role: "user",
-			content: item
-		})) || [] };
-		else if (request.params.name === "view-feedbacks") return { messages: (await callMcpMethod(mcpServer, "tools/call", {
-			name: "get_all_feedbacks",
-			arguments: {}
-		}))?.content.map((item) => ({
-			role: "user",
-			content: item
-		})) || [] };
-		else throw new Error(`Unknown promptId: ${request.params.name}`);
+		const promptName = request.params.name;
+		switch (promptName) {
+			case "capture_element": return { messages: (await callMcpMethod(mcpServer, "tools/call", {
+				name: "capture_element_context",
+				arguments: {}
+			}))?.content.map((item) => ({
+				role: "user",
+				content: item
+			})) || [] };
+			case "view_inspections": return { messages: (await callMcpMethod(mcpServer, "tools/call", {
+				name: "list_inspections",
+				arguments: {}
+			}))?.content.map((item) => ({
+				role: "user",
+				content: item
+			})) || [] };
+			case "launch_chrome_devtools": {
+				const defaultUrl = `http://${serverContext?.host || "localhost"}:${serverContext?.port || 5173}`;
+				const url = request.params.arguments?.url || defaultUrl;
+				try {
+					new URL(url);
+				} catch (error) {
+					return { messages: [{
+						role: "user",
+						content: {
+							type: "text",
+							text: `Error: Invalid URL format: "${url}". Please provide a valid URL (e.g., http://localhost:5173)`
+						}
+					}] };
+				}
+				try {
+					return { messages: [...((await callMcpMethod(mcpServer, "tools/call", {
+						name: "chrome_devtools",
+						arguments: {
+							useTool: "chrome_navigate_page",
+							hasDefinitions: ["chrome_navigate_page"],
+							chrome_navigate_page: { url }
+						}
+					}))?.content || []).map((item) => ({
+						role: "user",
+						content: item
+					}))] };
+				} catch (error) {
+					return { messages: [{
+						role: "user",
+						content: {
+							type: "text",
+							text: `Error launching Chrome DevTools: ${error instanceof Error ? error.message : String(error)}`
+						}
+					}] };
+				}
+			}
+			case "refresh_chrome_state": try {
+				const result = await callMcpMethod(mcpServer, "tools/call", {
+					name: "chrome_devtools",
+					arguments: {
+						useTool: "chrome_list_network_requests",
+						hasDefinitions: ["chrome_list_network_requests"],
+						chrome_list_network_requests: {}
+					}
+				});
+				const reqIdMatches = (result?.content?.map((item) => item.text).join("\n") || "").matchAll(/reqid=(\d+)\s+(GET|POST|PUT|DELETE|PATCH)\s+([^\s]+)\s+\[([^\]]+)\]/g);
+				const requestOptions = Array.from(reqIdMatches).map((match) => {
+					const [, reqId, method, url, status] = match;
+					return `  ${reqId}: ${method} ${url.length > 60 ? url.substring(0, 57) + "..." : url} [${status}]`;
+				}).reverse().join("\n");
+				mcpServer.setRequestHandler(ListPromptsRequestSchema, async (request$1) => {
+					return { prompts: [
+						{ ...PROMPT_SCHEMAS.capture_element },
+						{ ...PROMPT_SCHEMAS.view_inspections },
+						{ ...PROMPT_SCHEMAS.launch_chrome_devtools },
+						{ ...PROMPT_SCHEMAS.refresh_chrome_state },
+						{
+							...PROMPT_SCHEMAS.get_network_requests,
+							arguments: [{
+								name: "reqid",
+								description: `The request ID to get details for. Available requests:\n\n${requestOptions || "No requests available"}`,
+								required: true
+							}]
+						}
+					] };
+				});
+				await mcpServer.sendPromptListChanged();
+				return { messages: [...(result?.content || []).map((item) => ({
+					role: "user",
+					content: item
+				}))] };
+			} catch (error) {
+				return { messages: [{
+					role: "user",
+					content: {
+						type: "text",
+						text: `Error launching Chrome DevTools: ${error instanceof Error ? error.message : String(error)}`
+					}
+				}] };
+			}
+			case "get_network_requests":
+				const reqid = parseInt(request.params.arguments?.reqid);
+				try {
+					return { messages: [...((await callMcpMethod(mcpServer, "tools/call", {
+						name: "chrome_devtools",
+						arguments: {
+							useTool: "chrome_get_network_request",
+							hasDefinitions: ["chrome_get_network_request"],
+							chrome_get_network_request: { reqid }
+						}
+					}))?.content || []).map((item) => ({
+						role: "user",
+						content: item
+					}))] };
+				} catch (error) {
+					return { messages: [{
+						role: "user",
+						content: {
+							type: "text",
+							text: `Error launching Chrome DevTools: ${error instanceof Error ? error.message : String(error)}`
+						}
+					}] };
+				}
+			default: throw new Error(`Unknown promptId: ${promptName}`);
+		}
 	});
 	return mcpClientExecServer;
 }
@@ -555,11 +749,11 @@ async function createInspectorMcpServer() {
 /**
 * Setup MCP server endpoints in Vite dev server
 */
-async function setupMcpMiddleware(middlewares) {
+async function setupMcpMiddleware(middlewares, serverContext) {
 	const transports = {};
 	middlewares.use(async (req, res, next) => {
 		const url = req.url || "";
-		const mcpServer = await createInspectorMcpServer();
+		const mcpServer = await createInspectorMcpServer(serverContext);
 		if (url.startsWith("/__mcp__") && !url.startsWith("/__mcp__/sse") && !url.startsWith("/__mcp__/messages")) {
 			if (req.method === "POST") await handleStreamableHttpPost(req, res, mcpServer, transports);
 			else if (req.method === "GET") await handleStreamableHttpGet(req, res, transports);
@@ -747,7 +941,7 @@ function isInitializeRequest(body) {
 
 //#endregion
 //#region src/middleware/inspector-middleware.ts
-const __dirname = dirname$1(fileURLToPath(import.meta.url));
+const __dirname = dirname$1(fileURLToPath$1(import.meta.url));
 /**
 * Get the inspector client script content
 * Tries multiple paths to locate the bundled inspector script
@@ -870,7 +1064,7 @@ function resolveMcpRemote(cwd = process.cwd()) {
 
 //#endregion
 //#region src/middleware/acp-middleware.ts
-function setupAcpMiddleware(middlewares) {
+function setupAcpMiddleware(middlewares, serverContext) {
 	middlewares.use("/api/acp/chat", async (req, res) => {
 		if (req.method !== "POST") {
 			res.statusCode = 405;
@@ -882,11 +1076,6 @@ function setupAcpMiddleware(middlewares) {
 			const { messages, agent, envVars } = JSON.parse(body);
 			const cwd = process.cwd();
 			const mcpRemote = resolveMcpRemote(cwd);
-			console.log("ACP Agent Command:", {
-				agent,
-				envVars,
-				mcpRemote
-			});
 			const provider = createACPProvider({
 				command: agent.command,
 				args: agent.args,
@@ -895,7 +1084,7 @@ function setupAcpMiddleware(middlewares) {
 					cwd,
 					mcpServers: [{
 						command: mcpRemote.command,
-						args: [...mcpRemote.args, "http://localhost:5173/__mcp__/sse?puppetId=chrome"],
+						args: [...mcpRemote.args, `http://${serverContext?.host || "localhost"}:${serverContext?.port || 5173}/__mcp__/sse?puppetId=chrome`],
 						env: [],
 						name: "inspect"
 					}]
@@ -5425,13 +5614,13 @@ var require_lib = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+
 			super.checkParams(node, false, true);
 			this.scope.exit();
 		}
-		forwardNoArrowParamsConversionAt(node, parse$2) {
+		forwardNoArrowParamsConversionAt(node, parse$3) {
 			let result;
 			if (this.state.noArrowParamsConversionAt.includes(this.offsetToSourcePos(node.start))) {
 				this.state.noArrowParamsConversionAt.push(this.state.start);
-				result = parse$2();
+				result = parse$3();
 				this.state.noArrowParamsConversionAt.pop();
-			} else result = parse$2();
+			} else result = parse$3();
 			return result;
 		}
 		parseParenItem(node, startLoc) {
@@ -14478,7 +14667,7 @@ var require_lib = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+
 			return result;
 		}
 	};
-	function parse$1(input, options) {
+	function parse$2(input, options) {
 		var _options;
 		if (((_options = options) == null ? void 0 : _options.sourceType) === "unambiguous") {
 			options = Object.assign({}, options);
@@ -14536,19 +14725,19 @@ var require_lib = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+
 		}
 		return cls;
 	}
-	exports.parse = parse$1;
+	exports.parse = parse$2;
 }) });
 
 //#endregion
 //#region src/compiler/jsx-transform.ts
 var import_lib = require_lib();
 const traverse = createRequire(import.meta.url)("@babel/traverse").default;
-function normalizePath(id) {
+function normalizePath$1(id) {
 	return id.split(path.sep).join("/");
 }
-const DATA_SOURCE_ATTR = "data-source";
+const DATA_SOURCE_ATTR$1 = "data-source";
 async function transformJSX({ code: code$1, id }) {
-	const relativePath = normalizePath(path.relative(process.cwd(), id));
+	const relativePath = normalizePath$1(path.relative(process.cwd(), id));
 	const ast = (0, import_lib.parse)(code$1, {
 		sourceType: "module",
 		plugins: [
@@ -14563,7 +14752,7 @@ async function transformJSX({ code: code$1, id }) {
 	let hasModifications = false;
 	traverse(ast, { JSXOpeningElement(path$2) {
 		const node = path$2.node;
-		if (node.attributes.some((attr) => attr.type === "JSXAttribute" && attr.name.name === DATA_SOURCE_ATTR)) return;
+		if (node.attributes.some((attr) => attr.type === "JSXAttribute" && attr.name.name === DATA_SOURCE_ATTR$1)) return;
 		const { line, column } = node.loc.start;
 		const sourceValue = `${relativePath}:${line}:${column}`;
 		let insertPos;
@@ -14572,7 +14761,7 @@ async function transformJSX({ code: code$1, id }) {
 			const tagName = node.name.name || "";
 			insertPos = node.start + tagName.length + 1;
 		}
-		s.prependLeft(insertPos, ` ${DATA_SOURCE_ATTR}="${sourceValue}"`);
+		s.prependLeft(insertPos, ` ${DATA_SOURCE_ATTR$1}="${sourceValue}"`);
 		hasModifications = true;
 	} });
 	if (!hasModifications) return null;
@@ -14582,6 +14771,42 @@ async function transformJSX({ code: code$1, id }) {
 	};
 }
 
+//#endregion
+//#region src/compiler/vue-transform.ts
+function normalizePath(id) {
+	return id.split(path.sep).join("/");
+}
+const DATA_SOURCE_ATTR = "data-source";
+async function compileVue({ code: code$1, id }) {
+	const relativePath = normalizePath(path.relative(process.cwd(), id));
+	const { descriptor } = parse(code$1, {
+		filename: id,
+		sourceMap: true
+	});
+	if (!descriptor.template || !descriptor.template.ast) return null;
+	const s = new MagicString(code$1);
+	let hasModifications = false;
+	function traverse$1(node) {
+		if (node.type === 1) {
+			if (!node.props.some((prop) => prop.type === 6 && prop.name === DATA_SOURCE_ATTR)) {
+				const { line, column } = node.loc.start;
+				const sourceValue = `${relativePath}:${line}:${column}`;
+				const tagName = node.tag;
+				const insertPos = node.loc.start.offset + 1 + tagName.length;
+				s.prependLeft(insertPos, ` ${DATA_SOURCE_ATTR}="${sourceValue}"`);
+				hasModifications = true;
+			}
+		}
+		if (node.children) node.children.forEach(traverse$1);
+	}
+	traverse$1(descriptor.template.ast);
+	if (!hasModifications) return null;
+	return {
+		code: s.toString(),
+		map: s.generateMap({ hires: true })
+	};
+}
+
 //#endregion
 //#region src/core.ts
 const unplugin = createUnplugin((options = {}) => {
@@ -14592,9 +14817,8 @@ const unplugin = createUnplugin((options = {}) => {
 		name: "unplugin-dev-inspector",
 		enforce: "pre",
 		async transform(code$1, id) {
-			if (!id.match(/\.(jsx|tsx)$/)) return null;
 			if (id.includes("node_modules")) return null;
-			try {
+			if (id.match(/\.(jsx|tsx)$/)) try {
 				return await transformJSX({
 					code: code$1,
 					id
@@ -14603,6 +14827,16 @@ const unplugin = createUnplugin((options = {}) => {
 				console.error(`[dev-inspector] Failed to transform ${id}:`, error);
 				return null;
 			}
+			if (id.match(/\.vue$/)) try {
+				return await compileVue({
+					code: code$1,
+					id
+				});
+			} catch (error) {
+				console.error(`[dev-inspector] Failed to transform ${id}:`, error);
+				return null;
+			}
+			return null;
 		},
 		vite: {
 			apply: "serve",
@@ -14612,8 +14846,15 @@ const unplugin = createUnplugin((options = {}) => {
 			async configureServer(server) {
 				console.log("\n✨ Dev Inspector Plugin enabled!");
 				if (enableMcp) {
-					await setupMcpMiddleware(server.middlewares);
-					setupAcpMiddleware(server.middlewares);
+					const host = server.config.server.host;
+					const serverContext = {
+						host: typeof host === "string" ? host : host === true ? "0.0.0.0" : "localhost",
+						port: server.config.server.port || 5173
+					};
+					const displayHost = serverContext.host === "0.0.0.0" ? "localhost" : serverContext.host;
+					console.log(`📡 MCP: http://${displayHost}:${serverContext.port}/__mcp__/sse?puppetId=chrome\n`);
+					await setupMcpMiddleware(server.middlewares, serverContext);
+					setupAcpMiddleware(server.middlewares, serverContext);
 				}
 				setupInspectorMiddleware(server.middlewares);
 			},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcpc-tech/unplugin-dev-inspector-mcp",
-  "version": "0.0.1",
+  "version": "0.0.2-beta.2",
   "description": "Universal dev inspector plugin for React - inspect component sources and API calls in any bundler",
   "type": "module",
   "license": "MIT",
@@ -110,6 +110,7 @@
     "@types/node": "^24.7.2",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
+    "@vue/compiler-sfc": "^3.5.24",
     "esbuild": "^0.25.11",
     "magic-string": "^0.30.21",
     "postcss": "^8.5.6",