shadcn-vue 2.3.0 → 2.3.2

package/dist/index.js

@@ -1,10 +1,11 @@
 #!/usr/bin/env node
-import { BASE_COLORS, BUILTIN_REGISTRIES, DEFAULT_COMPONENTS, DEFAULT_TAILWIND_CONFIG, DEFAULT_TAILWIND_CSS, DEFAULT_UTILS, DEPRECATED_COMPONENTS, ICON_LIBRARIES, RegistryNotConfiguredError, _createSourceFile, _getQuoteChar, buildUrlAndHeadersForRegistryItem, clearRegistryContext, configWithDefaults, createConfig, fetchRegistryItems, fetchTree, findCommonRoot, findExistingEnvFile, findPackageRoot, getConfig, getItemTargetPath, getNewEnvKeys, getPackageInfo, getProjectConfig, getProjectInfo, getProjectTailwindVersionFromConfig, getRegistriesConfig, getRegistriesIndex, getRegistry, getRegistryBaseColor, getRegistryBaseColors, getRegistryIcons, getRegistryItems, getRegistryStyles, getShadcnRegistryIndex, getWorkspaceConfig, handleError, highlighter, isUniversalRegistryItem, logger, mergeEnvContent, parseRegistryAndItemFromString, resolveConfigPaths, resolveRegistryItems, resolveRegistryTree, resolveTree, spinner, transform, updateFiles, updateTailwindConfig } from "./api-CeF87728.js";
+import { BASE_COLORS, BUILTIN_REGISTRIES, DEFAULT_COMPONENTS, DEFAULT_TAILWIND_CONFIG, DEFAULT_TAILWIND_CSS, DEFAULT_UTILS, DEPRECATED_COMPONENTS, ICON_LIBRARIES, RegistryNotConfiguredError, _createSourceFile, _getQuoteChar, buildUrlAndHeadersForRegistryItem, clearRegistryContext, configWithDefaults, createConfig, fetchRegistryItems, fetchTree, findCommonRoot, findExistingEnvFile, findPackageRoot, getConfig, getItemTargetPath, getNewEnvKeys, getPackageInfo, getProjectConfig, getProjectInfo, getProjectTailwindVersionFromConfig, getRegistriesConfig, getRegistriesIndex, getRegistry, getRegistryBaseColor, getRegistryBaseColors, getRegistryIcons, getRegistryItems, getRegistryStyles, getShadcnRegistryIndex, getWorkspaceConfig, handleError, highlighter, isUniversalRegistryItem, logger, mergeEnvContent, parseRegistryAndItemFromString, resolveConfigPaths, resolveRegistryItems, resolveRegistryTree, resolveTree, spinner, transform, updateFiles, updateTailwindConfig } from "./registry-CVURNCtV.js";
 import { rawConfigSchema, registryItemSchema, registrySchema } from "./schema-PrLX5K_R.js";
+import { server } from "./mcp-ebpb1d4Z.js";
 import { Command } from "commander";
 import path, { isAbsolute, join, normalize, resolve, sep } from "pathe";
 import prompts from "prompts";
-import { z } from "zod";
+import z$1, { z } from "zod";
 import { existsSync, promises } from "fs";
 import deepmerge from "deepmerge";
 import fsExtra from "fs-extra";
@@ -16,8 +17,10 @@ import { Project, ScriptKind, SyntaxKind } from "ts-morph";
 import { randomBytes } from "crypto";
 import postcss from "postcss";
 import AtRule from "postcss/lib/at-rule";
-import { ensureDependencyInstalled } from "nypm";
+import { addDependency, detectPackageManager } from "nypm";
 import { diffLines } from "diff";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { x } from "tinyexec";
 
 //#region src/utils/errors.ts
 const MISSING_DIR_OR_EMPTY_PROJECT = "1";
@@ -151,14 +154,12 @@ async function updateCss(css, config, options) {
 	const cssFilepath = config.resolvedPaths.tailwindCss;
 	const cssFilepathRelative = path.relative(config.resolvedPaths.cwd, cssFilepath);
 	const cssSpinner = spinner(`Updating ${highlighter.info(cssFilepathRelative)}`, { silent: options.silent }).start();
-	const raw = await promises.readFile(cssFilepath, "utf8");
-	let output = await transformCss(raw, css);
+	let output = await transformCss(await promises.readFile(cssFilepath, "utf8"), css);
 	await promises.writeFile(cssFilepath, output, "utf8");
 	cssSpinner.succeed();
 }
 async function transformCss(input, css) {
-	const plugins = [updateCssPlugin(css)];
-	const result = await postcss(plugins).process(input, { from: void 0 });
+	const result = await postcss([updateCssPlugin(css)]).process(input, { from: void 0 });
 	let output = result.css;
 	const root = result.root;
 	if (root.nodes && root.nodes.length > 0) {
@@ -309,7 +310,8 @@ function updateCssPlugin(css) {
 							existingDecl ? existingDecl.replaceWith(decl) : utilityAtRule.append(decl);
 						} else if (typeof value === "object") processRule(utilityAtRule, prop, value);
 					}
-				} else processAtRule(root, name$1, params, properties);
+				} else if (name$1 === "property") processRule(root, selector, properties);
+				else processAtRule(root, name$1, params, properties);
 			} else processRule(root, selector, properties);
 		}
 	};
@@ -400,10 +402,7 @@ function processRule(parent, selector, properties) {
 			});
 			const existingDecl = rule.nodes?.find((node) => node.type === "decl" && node.prop === prop);
 			existingDecl ? existingDecl.replaceWith(decl) : rule.append(decl);
-		} else if (typeof value === "object") {
-			const nestedSelector = prop.startsWith("&") ? selector.replace(/^([^:]+)/, `$1${prop.substring(1)}`) : prop;
-			processRule(parent, nestedSelector, value);
-		}
+		} else if (typeof value === "object") processRule(parent, prop.startsWith("&") ? selector.replace(/^([^:]+)/, `$1${prop.substring(1)}`) : prop, value);
 	} else if (typeof properties === "string") try {
 		const tempRule = postcss.parse(`.temp{${properties}}`).first;
 		if (tempRule && tempRule.nodes) tempRule.nodes.forEach((node) => {
@@ -434,8 +433,7 @@ async function updateCssVars(cssVars, config, options) {
 	const cssFilepath = config.resolvedPaths.tailwindCss;
 	const cssFilepathRelative = path.relative(config.resolvedPaths.cwd, cssFilepath);
 	const cssVarsSpinner = spinner(`Updating CSS variables in ${highlighter.info(cssFilepathRelative)}`, { silent: options.silent }).start();
-	const raw = await promises.readFile(cssFilepath, "utf8");
-	const output = await transformCssVars(raw, cssVars ?? {}, config, {
+	const output = await transformCssVars(await promises.readFile(cssFilepath, "utf8"), cssVars ?? {}, config, {
 		cleanupDefaultNextStyles: options.cleanupDefaultNextStyles,
 		tailwindVersion: options.tailwindVersion,
 		tailwindConfig: options.tailwindConfig,
@@ -891,7 +889,7 @@ function isLocalHSLValue(value) {
 	return chunks.length === 3 && chunks.slice(1, 3).every((chunk) => chunk.includes("%"));
 }
 function isColorValue(value) {
-	return value.startsWith("hsl") || value.startsWith("rgb") || value.startsWith("#") || value.startsWith("oklch");
+	return value.startsWith("hsl") || value.startsWith("rgb") || value.startsWith("#") || value.startsWith("oklch") || value.startsWith("var(--color-");
 }
 
 //#endregion
@@ -906,22 +904,16 @@ async function updateDependencies(dependencies$1, devDependencies$1, config, opt
 	};
 	const dependenciesSpinner = spinner(`Installing dependencies.`, { silent: options.silent })?.start();
 	dependenciesSpinner?.start();
-	if (dependencies$1?.length) {
-		const ensureDeps = dependencies$1.map((dep) => ensureDependencyInstalled(dep, {
-			cwd: config.resolvedPaths.cwd,
-			silent: true,
-			dev: false
-		}));
-		await Promise.all(ensureDeps);
-	}
-	if (devDependencies$1?.length) {
-		const ensureDevDeps = devDependencies$1.map((dep) => ensureDependencyInstalled(dep, {
-			cwd: config.resolvedPaths.cwd,
-			silent: true,
-			dev: true
-		}));
-		await Promise.all(ensureDevDeps);
-	}
+	if (dependencies$1?.length) await addDependency(dependencies$1, {
+		cwd: config.resolvedPaths.cwd,
+		silent: true,
+		dev: false
+	});
+	if (devDependencies$1?.length) await addDependency(devDependencies$1, {
+		cwd: config.resolvedPaths.cwd,
+		silent: true,
+		dev: true
+	});
 	dependenciesSpinner?.succeed();
 }
 
@@ -1024,7 +1016,8 @@ async function addProjectComponents(components, config, options) {
 	await updateDependencies(tree.dependencies, tree.devDependencies, config, { silent: options.silent });
 	await updateFiles(tree.files, config, {
 		overwrite: options.overwrite,
-		silent: options.silent
+		silent: options.silent,
+		path: options.path
 	});
 	if (tree.docs) logger.info(tree.docs);
 }
@@ -1089,7 +1082,8 @@ async function addWorkspaceComponents(components, config, workspaceConfig, optio
 			silent: true,
 			rootSpinner,
 			isRemote: options.isRemote,
-			isWorkspace: true
+			isWorkspace: true,
+			path: options.path
 		});
 		filesCreated.push(...files$1.filesCreated.map((file) => path.relative(typeWorkspaceRoot, path.join(packageRoot, file))));
 		filesUpdated.push(...files$1.filesUpdated.map((file) => path.relative(typeWorkspaceRoot, path.join(packageRoot, file))));
@@ -1270,8 +1264,7 @@ async function updateTailwindContent(content, config, options) {
 	};
 	const tailwindFileRelativePath = path.relative(config.resolvedPaths.cwd, config.resolvedPaths.tailwindConfig);
 	const tailwindSpinner = spinner(`Updating ${highlighter.info(tailwindFileRelativePath)}`, { silent: options.silent }).start();
-	const raw = await promises.readFile(config.resolvedPaths.tailwindConfig, "utf8");
-	const output = await transformTailwindContent(raw, content, config);
+	const output = await transformTailwindContent(await promises.readFile(config.resolvedPaths.tailwindConfig, "utf8"), content, config);
 	await promises.writeFile(config.resolvedPaths.tailwindConfig, output, "utf8");
 	tailwindSpinner?.succeed();
 }
@@ -1346,8 +1339,7 @@ const init = new Command().name("init").description("initialize your project and
 			const componentsJsonPath = path.resolve(options.cwd, "components.json");
 			if (fsExtra.existsSync(componentsJsonPath)) {
 				const existingConfig = await fsExtra.readJson(componentsJsonPath);
-				const config = rawConfigSchema.partial().parse(existingConfig);
-				shadowConfig = configWithDefaults(config);
+				shadowConfig = configWithDefaults(rawConfigSchema.partial().parse(existingConfig));
 				createFileBackup(componentsJsonPath);
 			}
 			const { config: updatedConfig } = await ensureRegistriesInConfig(components, shadowConfig, { silent: true });
@@ -1390,15 +1382,13 @@ async function runInit(options) {
 		if (!proceed) process.exit(0);
 	}
 	const components = [...options.baseStyle ? ["index"] : [], ...options.components ?? []];
-	const fullConfigForRegistry = await resolveConfigPaths(options.cwd, config);
-	const { config: configWithRegistries } = await ensureRegistriesInConfig(components, fullConfigForRegistry, { silent: true });
+	const { config: configWithRegistries } = await ensureRegistriesInConfig(components, await resolveConfigPaths(options.cwd, config), { silent: true });
 	if (configWithRegistries.registries) config.registries = configWithRegistries.registries;
 	const componentSpinner = spinner(`Writing components.json.`).start();
 	const targetPath = path.resolve(options.cwd, "components.json");
 	const backupPath = `${targetPath}${FILE_BACKUP_SUFFIX}`;
 	if (!options.force && fsExtra.existsSync(backupPath)) {
-		const existingConfig = await fsExtra.readJson(backupPath);
-		const { registries,...merged } = deepmerge(existingConfig, config);
+		const { registries,...merged } = deepmerge(await fsExtra.readJson(backupPath), config);
 		config = {
 			...merged,
 			registries
@@ -1570,10 +1560,9 @@ async function preFlightAdd(options) {
 		};
 	}
 	try {
-		const config = await getConfig(options.cwd);
 		return {
 			errors,
-			config
+			config: await getConfig(options.cwd)
 		};
 	} catch (error) {
 		logger.break();
@@ -1759,12 +1748,11 @@ const buildOptionsSchema = z.object({
 });
 const build = new Command().name("build").description("build components for a shadcn registry").argument("[registry]", "path to registry.json file", "./registry.json").option("-o, --output <path>", "destination directory for json files", "./public/r").option("-c, --cwd <cwd>", "the working directory. defaults to the current directory.", process.cwd()).action(async (registry, opts) => {
 	try {
-		const options = buildOptionsSchema.parse({
+		const { resolvePaths } = await preFlightBuild(buildOptionsSchema.parse({
 			cwd: path.resolve(opts.cwd),
 			registryFile: registry,
 			outputDir: opts.output
-		});
-		const { resolvePaths } = await preFlightBuild(options);
+		}));
 		const content = await fs.readFile(resolvePaths.registryFile, "utf-8");
 		const result = registrySchema.safeParse(JSON.parse(content));
 		if (!result.success) {
@@ -1823,10 +1811,7 @@ const diff = new Command().name("diff").description("check for updates against t
 		if (!options.component) {
 			const targetDir = config.resolvedPaths.components;
 			const projectComponents = registryIndex.filter((item) => {
-				for (const file of item.files ?? []) {
-					const filePath = path.resolve(targetDir, typeof file === "string" ? file : file.path);
-					if (existsSync(filePath)) return true;
-				}
+				for (const file of item.files ?? []) if (existsSync(path.resolve(targetDir, typeof file === "string" ? file : file.path))) return true;
 				return false;
 			});
 			const componentsWithUpdates = [];
@@ -1882,13 +1867,12 @@ async function diffComponent(component, config) {
 			if (!existsSync(filePath)) continue;
 			const fileContent = await promises.readFile(filePath, "utf8");
 			if (typeof file === "string" || !file.content) continue;
-			const registryContent = await transform({
+			const patch = diffLines(await transform({
 				filename: file.path,
 				raw: file.content,
 				config,
 				baseColor
-			});
-			const patch = diffLines(registryContent, fileContent);
+			}), fileContent);
 			if (patch.length > 1) changes.push({
 				filePath,
 				patch
@@ -1962,8 +1946,7 @@ async function migrateIcons(config) {
 	await Promise.all(files$1.map(async (file) => {
 		migrationSpinner.text = `Migrating ${file}...`;
 		const filePath = path.join(uiPath, file);
-		const fileContent = await promises.readFile(filePath, "utf-8");
-		const content = await migrateIconsFile(fileContent, migrateOptions.sourceLibrary, migrateOptions.targetLibrary, registryIcons);
+		const content = await migrateIconsFile(await promises.readFile(filePath, "utf-8"), migrateOptions.sourceLibrary, migrateOptions.targetLibrary, registryIcons);
 		await promises.writeFile(filePath, content);
 	}));
 	migrationSpinner.succeed("Migration complete.");
@@ -2014,10 +1997,9 @@ async function preFlightMigrate(options) {
 		};
 	}
 	try {
-		const config = await getConfig(options.cwd);
 		return {
 			errors,
-			config
+			config: await getConfig(options.cwd)
 		};
 	} catch (error) {
 		logger.break();
@@ -2064,11 +2046,166 @@ const migrate = new Command().name("migrate").description("run a migration.").ar
 	}
 });
 
+//#endregion
+//#region src/commands/mcp.ts
+const SHADCN_MCP_VERSION = "latest";
+const CLIENTS = [
+	{
+		name: "claude",
+		label: "Claude Code",
+		configPath: ".mcp.json",
+		config: { mcpServers: { shadcnVue: {
+			command: "npx",
+			args: [`shadcn-vue@${SHADCN_MCP_VERSION}`, "mcp"]
+		} } }
+	},
+	{
+		name: "cursor",
+		label: "Cursor",
+		configPath: ".cursor/mcp.json",
+		config: { mcpServers: { shadcnVue: {
+			command: "npx",
+			args: [`shadcn-vue@${SHADCN_MCP_VERSION}`, "mcp"]
+		} } }
+	},
+	{
+		name: "vscode",
+		label: "VS Code",
+		configPath: ".vscode/mcp.json",
+		config: { servers: { shadcnVue: {
+			command: "npx",
+			args: [`shadcn-vue@${SHADCN_MCP_VERSION}`, "mcp"]
+		} } }
+	},
+	{
+		name: "codex",
+		label: "Codex",
+		configPath: ".codex/config.toml",
+		config: `[mcp_servers.shadcn_vue]
+command = "npx"
+args = ["shadcn-vue@${SHADCN_MCP_VERSION}", "mcp"]
+`
+	}
+];
+const DEPENDENCIES = [`shadcn-vue@${SHADCN_MCP_VERSION}`];
+const mcp = new Command().name("mcp").description("MCP server and configuration commands").option("-c, --cwd <cwd>", "the working directory. defaults to the current directory.", process.cwd()).action(async (options) => {
+	try {
+		await loadEnvFiles(options.cwd);
+		const transport = new StdioServerTransport();
+		await server.connect(transport);
+	} catch (error) {
+		logger.break();
+		handleError(error);
+	}
+});
+const mcpInitOptionsSchema = z$1.object({
+	client: z$1.enum([
+		"claude",
+		"cursor",
+		"vscode",
+		"codex"
+	]),
+	cwd: z$1.string()
+});
+mcp.command("init").description("Initialize MCP configuration for your client").option("--client <client>", `MCP client (${CLIENTS.map((c) => c.name).join(", ")})`).action(async (opts, command) => {
+	try {
+		const cwd = (command.parent?.opts() || {}).cwd || process.cwd();
+		let client = opts.client;
+		if (!client) {
+			const response = await prompts({
+				type: "select",
+				name: "client",
+				message: "Which MCP client are you using?",
+				choices: CLIENTS.map((c) => ({
+					title: c.label,
+					value: c.name
+				}))
+			});
+			if (!response.client) {
+				logger.break();
+				process.exit(1);
+			}
+			client = response.client;
+		}
+		const options = mcpInitOptionsSchema.parse({
+			client,
+			cwd
+		});
+		const config = await getConfig(options.cwd);
+		if (options.client === "codex") {
+			if (config) await updateDependencies([], DEPENDENCIES, config, { silent: false });
+			else {
+				const packageManager = await detectPackageManager(options.cwd);
+				const installCommand = packageManager?.name === "npm" ? "install" : "add";
+				const devFlag = packageManager?.name === "npm" ? "--save-dev" : "-D";
+				const installSpinner = spinner("Installing dependencies...").start();
+				await x(packageManager?.name || "npm", [
+					installCommand,
+					devFlag,
+					...DEPENDENCIES
+				], { nodeOptions: { cwd: options.cwd } });
+				installSpinner.succeed("Installing dependencies.");
+			}
+			logger.break();
+			logger.log("To configure the shadcn-vue MCP server in Codex:");
+			logger.break();
+			logger.log(`1. Open or create the file ${highlighter.info("~/.codex/config.toml")}`);
+			logger.log("2. Add the following configuration:");
+			logger.log();
+			logger.info(`[mcp_servers.shadcn_vue]
+command = "npx"
+args = ["shadcn-vue@${SHADCN_MCP_VERSION}", "mcp"]`);
+			logger.break();
+			logger.info("3. Restart Codex to load the MCP server");
+			logger.break();
+			process.exit(0);
+		}
+		const configSpinner = spinner("Configuring MCP server...").start();
+		const configPath = await runMcpInit(options);
+		configSpinner.succeed("Configuring MCP server.");
+		if (config) await updateDependencies([], DEPENDENCIES, config, { silent: false });
+		else {
+			const packageManager = await detectPackageManager(options.cwd);
+			const installCommand = packageManager?.name === "npm" ? "install" : "add";
+			const devFlag = packageManager?.name === "npm" ? "--save-dev" : "-D";
+			const installSpinner = spinner("Installing dependencies...").start();
+			await x(packageManager?.name || "npm", [
+				installCommand,
+				devFlag,
+				...DEPENDENCIES
+			], { nodeOptions: { cwd: options.cwd } });
+			installSpinner.succeed("Installing dependencies.");
+		}
+		logger.break();
+		logger.success(`Configuration saved to ${configPath}.`);
+		logger.break();
+	} catch (error) {
+		handleError(error);
+	}
+});
+const overwriteMerge = (_, sourceArray) => sourceArray;
+async function runMcpInit(options) {
+	const { client, cwd } = options;
+	const clientInfo = CLIENTS.find((c) => c.name === client);
+	if (!clientInfo) throw new Error(`Unknown client: ${client}. Available clients: ${CLIENTS.map((c) => c.name).join(", ")}`);
+	const configPath = path.join(cwd, clientInfo.configPath);
+	const dir = path.dirname(configPath);
+	await fsExtra.ensureDir(dir);
+	let existingConfig = {};
+	try {
+		const content = await promises.readFile(configPath, "utf-8");
+		existingConfig = JSON.parse(content);
+	} catch {}
+	const mergedConfig = deepmerge(existingConfig, clientInfo.config, { arrayMerge: overwriteMerge });
+	await promises.writeFile(configPath, `${JSON.stringify(mergedConfig, null, 2)}\n`, "utf-8");
+	return clientInfo.configPath;
+}
+
 //#endregion
 //#region package.json
 var name = "shadcn-vue";
 var type = "module";
-var version = "2.3.0";
+var version = "2.3.2";
 var description = "Add components to your apps.";
 var publishConfig = { "access": "public" };
 var license = "MIT";
@@ -2128,10 +2265,10 @@ var scripts = {
 };
 var dependencies = {
 	"@dotenvx/dotenvx": "^1.51.0",
-	"@modelcontextprotocol/sdk": "^1.19.1",
+	"@modelcontextprotocol/sdk": "^1.20.1",
 	"@unovue/detypes": "^0.8.5",
 	"@vue/compiler-sfc": "^3.5",
-	"c12": "^3.3.0",
+	"c12": "^3.3.1",
 	"commander": "^14.0.1",
 	"consola": "^3.4.2",
 	"dedent": "^1.7.0",
@@ -2139,7 +2276,7 @@ var dependencies = {
 	"diff": "^8.0.2",
 	"fs-extra": "^11.3.2",
 	"fuzzysort": "^3.1.0",
-	"get-tsconfig": "^4.10.1",
+	"get-tsconfig": "^4.12.0",
 	"magic-string": "^0.30.19",
 	"nypm": "^0.6.2",
 	"ofetch": "^1.4.1",
@@ -2148,12 +2285,12 @@ var dependencies = {
 	"postcss": "^8.5.6",
 	"prompts": "^2.4.2",
 	"reka-ui": "catalog:",
-	"semver": "^7.7.2",
+	"semver": "^7.7.3",
 	"stringify-object": "^6.0.0",
 	"tailwindcss": "^4.1.14",
 	"tinyexec": "^1.0.1",
 	"tinyglobby": "catalog:",
-	"ts-morph": "^27.0.0",
+	"ts-morph": "^27.0.2",
 	"undici": "^7.16.0",
 	"vue-metamorph": "^3.3.3",
 	"zod": "catalog:",
@@ -2165,9 +2302,9 @@ var devDependencies = {
 	"@types/prompts": "^2.4.9",
 	"@types/semver": "^7.7.1",
 	"@types/stringify-object": "^4.0.5",
-	"msw": "^2.11.3",
-	"tsdown": "^0.15.6",
-	"type-fest": "^5.0.1",
+	"msw": "^2.11.5",
+	"tsdown": "^0.15.7",
+	"type-fest": "^5.1.0",
 	"typescript": "catalog:"
 };
 var package_default = {
@@ -2193,7 +2330,7 @@ process.on("SIGINT", () => process.exit(0));
 process.on("SIGTERM", () => process.exit(0));
 async function main() {
 	const program = new Command().name("shadcn-vue").description("add components and dependencies to your project").version(package_default.version || "1.0.0", "-v, --version", "display the version number");
-	program.addCommand(init).addCommand(add).addCommand(diff).addCommand(migrate).addCommand(info).addCommand(build);
+	program.addCommand(init).addCommand(add).addCommand(diff).addCommand(migrate).addCommand(info).addCommand(build).addCommand(mcp);
 	program.parse();
 }
 main();