chore(tw4): add components.json schema descriptions

packages/registry/src/schemas.ts

@@ -210,3 +210,59 @@ export const registrySchema = z.object({
 		.array()
 		.describe("Defines a custom component registry."),
 });
+
+/** Schema for a project's `components.json` config file. */
+export const componentsJsonSchema = z.object({
+	$schema: z.string().optional(),
+	style: z
+		.string()
+		.optional()
+		.describe(
+			"DEPRECATED IN TAILWIND v4! The style for your components. This cannot be changed after initialization."
+		),
+	tailwind: z.object({
+		css: z
+			.string()
+			.describe("Path to the CSS file that imports Tailwind CSS into your project."),
+		baseColor: z
+			.string()
+			.describe(
+				"Used to generate the default color palette for your components. This cannot be changed after initialization."
+			),
+		// cssVariables: z.boolean().default(true)
+	}),
+	aliases: z
+		.object({
+			components: z.string().describe("Import alias for your components."),
+			utils: z.string().describe("Import alias for your utility functions."),
+			ui: z
+				.string()
+				.optional()
+				.describe("Import alias for your UI components. Defaults to `$lib/components/ui`."),
+			hooks: z
+				.string()
+				.optional()
+				.describe("Import alias for your hooks. Defaults to `$lib/hooks`."),
+			lib: z
+				.string()
+				.optional()
+				.describe(
+					"Import alias for your library, which is typically where you store your components, utils, hooks, etc. Defaults to `$lib`."
+				),
+		})
+		.describe(
+			"The CLI uses these values and the `alias` config from your `svelte.config.js` file to place generated components in the correct location."
+		),
+	registry: z
+		.string()
+		.optional()
+		.describe(
+			"The registry URL tells the CLI where to fetch the shadcn-svelte components/registry from. You can pin this to a specific preview release or your own fork of the registry."
+		),
+	typescript: z
+		.boolean()
+		.optional()
+		.describe(
+			"Used to determine if Typescript is used for this project. When set to `false`, `.js` files will be installed instead. Defaults to `true`. "
+		),
+});

sites/docs/scripts/build-registry.ts

@@ -207,9 +207,10 @@ export const Index = {`;
 	// ----------------------------------------------------------------------------
 
 	writeFileWithDirs(path.join(THEMES_CSS_PATH, `themes.css`), themeCSS.join("\n\n"), "utf-8");
-	writeFileWithDirs(
-		path.resolve("src", "styles", "old-themes.css"),
-		themeCSS.join("\n\n"),
-		"utf-8"
-	);
+	const oldThemesPath = path.resolve("src", "styles", "old-themes.css");
+	const oldThemes = await prettier.format(themeCSS.join("\n\n"), {
+		...prettierConfig,
+		filepath: oldThemesPath,
+	});
+	writeFileWithDirs(oldThemesPath, oldThemes, "utf-8");
 }

sites/docs/src/content/components-json.md

@@ -106,7 +106,7 @@ Import alias for your utility functions.
 ```json title="components.json"
 {
   "aliases": {
-    "utils": "$lib/utils.js"
+    "utils": "$lib/utils"
   }
 }
 ```

sites/docs/static/schema.json

@@ -1,43 +1,71 @@
 {
-	"$schema": "http://json-schema.org/draft-07/schema#",
 	"type": "object",
 	"properties": {
+		"$schema": {
+			"type": "string"
+		},
+		"style": {
+			"description": "DEPRECATED IN TAILWIND v4! The style for your components. This cannot be changed after initialization.",
+			"type": "string"
+		},
 		"tailwind": {
 			"type": "object",
 			"properties": {
 				"css": {
+					"description": "Path to the CSS file that imports Tailwind CSS into your project.",
 					"type": "string"
 				},
 				"baseColor": {
+					"description": "Used to generate the default color palette for your components. This cannot be changed after initialization.",
 					"type": "string"
 				}
 			},
-			"required": ["css", "baseColor"]
+			"required": [
+				"css",
+				"baseColor"
+			]
 		},
 		"aliases": {
+			"description": "The CLI uses these values and the `alias` config from your `svelte.config.js` file to place generated components in the correct location.",
 			"type": "object",
 			"properties": {
-				"utils": {
+				"components": {
+					"description": "Import alias for your components.",
 					"type": "string"
 				},
-				"components": {
+				"utils": {
+					"description": "Import alias for your utility functions.",
 					"type": "string"
 				},
 				"ui": {
+					"description": "Import alias for your UI components. Defaults to `$lib/components/ui`.",
 					"type": "string"
 				},
 				"hooks": {
+					"description": "Import alias for your hooks. Defaults to `$lib/hooks`.",
+					"type": "string"
+				},
+				"lib": {
+					"description": "Import alias for your library, which is typically where you store your components, utils, hooks, etc. Defaults to `$lib`.",
 					"type": "string"
 				}
 			},
-			"required": ["utils", "components"]
-		},
-		"typescript": {
-			"type": "boolean"
+			"required": [
+				"components",
+				"utils"
+			]
 		},
 		"registry": {
+			"description": "The registry URL tells the CLI where to fetch the shadcn-svelte components/registry from. You can pin this to a specific preview release or your own fork of the registry.",
 			"type": "string"
+		},
+		"typescript": {
+			"description": "Used to determine if Typescript is used for this project. When set to `false`, `.js` files will be installed instead. Defaults to `true`. ",
+			"type": "boolean"
 		}
 	},
-	"required": ["tailwind", "aliases"]
-}
+	"required": [
+		"tailwind",
+		"aliases"
+	]
+}

sites/docs/vite.config.ts

@@ -7,7 +7,7 @@ import { minimatch } from "minimatch";
 import { defineConfig } from "vite";
 import tailwindcss from "@tailwindcss/vite";
 import { sveltekit } from "@sveltejs/kit/vite";
-import { registrySchema, registryItemSchema } from "@shadcn-svelte/registry";
+import { registrySchema, registryItemSchema, componentsJsonSchema } from "@shadcn-svelte/registry";
 import { build } from "./scripts/build-registry.js";
 
 // don't build when we're running `vite preview`
@@ -51,16 +51,24 @@ export default defineConfig({
 });
 
 function writeJsonSchemas() {
-	const registry = toJSONSchema(registrySchema);
-	const registryItem = toJSONSchema(registryItemSchema);
 	const schemaDir = path.resolve("static", "schema");
 	if (!fs.existsSync(schemaDir)) {
 		fs.mkdirSync(schemaDir, { recursive: true });
 	}
+
+	const componentsJSON = toJSONSchema(componentsJsonSchema);
+	fs.writeFileSync(
+		path.resolve("static", "schema.json"),
+		JSON.stringify(componentsJSON, null, "\t")
+	);
+
+	const registry = toJSONSchema(registrySchema);
 	fs.writeFileSync(
 		path.resolve(schemaDir, "registry.json"),
 		JSON.stringify(registry, null, "\t")
 	);
+
+	const registryItem = toJSONSchema(registryItemSchema);
 	fs.writeFileSync(
 		path.resolve(schemaDir, "registry-item.json"),
 		JSON.stringify(registryItem, null, "\t")