centoui-cli 1.0.0-alpha.3 → 1.0.0-alpha.30

package/README.md

@@ -1,44 +1,114 @@
-# centoui-cli
+<div align="center">
+  <h1>centoui-cli</h1>
+  <p><strong>Manage CentoUI components from the terminal.</strong></p>
+  <p>
+    <a href="https://npmx.dev/package/centoui-cli"><img src="https://img.shields.io/npm/v/centoui-cli.svg?style=plastic&label=NPM Version&color=blue" alt="npm version"></a>
+    <a href="https://npmx.dev/package/centoui-cli"><img src="https://img.shields.io/npm/dw/centoui-cli.svg?style=plastic&label=NPM Downloads&color=blue" alt="npm downloads"></a>
+    <a href="https://npmx.dev/package/centoui-cli"><img src="https://img.shields.io/npm/unpacked-size/centoui-cli?style=plastic&label=NPM Unpacked Size&color=blue" alt="NPM Unpacked Size"></a>
+  </p>
+</div>
 
-[![npm version](https://img.shields.io/npm/v/centoui-cli.svg?style=flat-square)](https://www.npmjs.com/package/centoui-cli)
-[![npm downloads](https://img.shields.io/npm/dm/centoui-cli.svg?style=flat-square)](https://www.npmjs.com/package/centoui-cli)
-[![license](https://img.shields.io/github/license/favorodera/centoui.svg?style=flat-square)](https://github.com/favorodera/centoui/blob/main/LICENSE)
+<br>
 
-**CentoUI CLI: Manage your CentoUI components with ease.**
-
-`centoui-cli` is the official command-line interface for [CentoUI](https://github.com/favorodera/centoui). It allows you to initialize CentoUI in your project, add new components, and manage their versions directly from your terminal.
+`centoui-cli` is the command-line interface for [CentoUI](../core). It initializes projects, pulls component source files from the registry into your codebase, resolves dependency trees automatically, and cleans up when you remove components.
 
 ## Commands
 
-- **`init`**: Set up a new CentoUI project (generates `centoui.config.ts` and `centoui.css`).
-- **`add [component]`**: Add specific components to your project. Peer dependencies install automatically.
-- **`remove [component]`**: Cleanly remove components and their dependencies.
+### `centoui init`
 
-## Usage
+Scaffolds a new CentoUI project in your current directory.
 
 ```bash
-# Initialize CentoUI in your project
 pnpm dlx centoui init
+```
+
+**What it does:**
+
+1. Prompts you for a component directory (default: `src/components/centoui`) and theme CSS path (default: `src/assets/css/centoui.css`).
+2. Writes `centoui.config.ts` with your chosen paths and default icon mappings.
+3. Fetches and writes the `centoui.css` theme file with all light/dark color tokens.
+4. Creates the component directory.
+5. Installs global peer dependencies (`vue`, `reka-ui`, `tailwindcss`, etc.).
+
+---
+
+### `centoui add <component> [component...]`
+
+Adds one or more components to your project.
+
+```bash
+pnpm dlx centoui add button accordion select
+```
+
+**What it does:**
+
+1. Fetches the component registry from GitHub.
+2. Resolves the full dependency tree — if `select` depends on `popover`, both are installed.
+3. Asks before overwriting any component that already exists.
+4. Downloads `.vue` and `index.ts` files for each component into your configured directory.
+5. Installs any npm packages required by the added components.
 
-# Add components
-pnpm dlx centoui add button dialog input select
+---
+
+### `centoui remove <component>`
+
+Removes an installed component and cleans up orphaned packages.
+
+```bash
+pnpm dlx centoui remove accordion
 ```
 
+**What it does:**
+
+1. Checks that the component is actually installed.
+2. Blocks removal if other installed components depend on it (e.g., you can't remove `popover` while `select` is installed).
+3. Deletes the component's directory.
+4. Uninstalls npm packages that are no longer needed by any remaining component.
+
+## Version-Locked Asset Fetching
+
+Every network request the CLI makes — the registry index, individual component files, the theme CSS, and the default config — is resolved against the **exact git tag that matches the installed version of `centoui-cli`**.
+
+The base URL for all assets is derived directly from the CLI's own `package.json` version at build time:
+
+```
+https://raw.githubusercontent.com/favorodera/centoui/refs/tags/v<VERSION>/packages/core/src
+```
+
+This means:
+
+- If you have `centoui-cli@1.2.3` installed, all fetched assets come from the `v1.2.3` tag of the `centoui` repository — never from `main` or any other release.
+- The registry, component source files, CSS theme, and config defaults are always in sync with each other and with the CLI you are running.
+- Upgrading the CLI upgrades the version tag automatically — no separate step needed.
+
+This design eliminates an entire class of version mismatch bugs where the CLI and the component source could drift out of sync.
+
 ## Configuration
 
-The CLI generates a `centoui.config.ts` file in your root directory. You can customize the component directory, theme directory, and utility directory here.
+After running `centoui init`, your project root will contain a `centoui.config.ts`:
 
 ```ts
 import { defineConfig } from "centoui"
 
 export default defineConfig({
-  version: "1.0.0",
   componentsDir: "./src/components/centoui",
   themeFilePath: "./src/assets/css/centoui.css",
   icons: {
     check: "lucide:check",
     close: "lucide:x",
-    menu: "lucide:menu",
+    chevronDown: "lucide:chevron-down",
+    chevronUp: "lucide:chevron-up",
+    chevronLeft: "lucide:chevron-left",
+    chevronRight: "lucide:chevron-right",
+    chevronDoubleLeft: "lucide:chevrons-left",
+    chevronDoubleRight: "lucide:chevrons-right",
+    ellipsis: "lucide:ellipsis",
   },
 })
-```
+```
+
+The `icons` map lets you swap icon libraries without touching component code. Components reference icons by their slot name (e.g., `check`, `close`), and the config resolves them to [Iconify](https://iconify.design/) IDs.
+
+## License
+
+[MIT](../../LICENSE) &copy; [Favour Emeka](https://github.com/favorodera)

package/dist/index.d.mts

@@ -48,8 +48,7 @@ type Registry = {
  * Generated by `centoui init` and consumed by every subsequent CLI command.
  */
 type CentoUIConfig = {
-  /** The CentoUI version this project was initialised with. */version: string; /** Relative path (from project root) to the directory where components are installed. */
-  componentsDir: string; /** Relative path (from project root) to the CSS file that receives theme and component styles. */
+  /** Relative path (from project root) to the directory where components are installed. */componentsDir: string; /** Relative path (from project root) to the CSS file that receives theme and component styles. */
   themeFilePath: string;
   /**
    * Maps internal CentoUI icon slot names to Iconify icon IDs.

package/dist/index.mjs

@@ -4,11 +4,11 @@ import { cancel, confirm, group, intro, isCancel, log, note, outro, tasks, text
 import { dirname, join } from "pathe";
 import fsExtra from "fs-extra";
 import { addDependency, removeDependency } from "nypm";
-import { pathToFileURL } from "node:url";
+import { loadConfig } from "c12";
 //#endregion
 //#region src/constants.ts
 /** CentoUI current package version, sourced directly from package.json. */
-const VERSION = "1.0.0-alpha.3";
+const VERSION = "1.0.0-alpha.30";
 /** File name for the user-side CentoUI config (created by `centoui init`). */
 const CONFIG_FILE_NAME = "centoui.config.ts";
 /**
@@ -25,7 +25,12 @@ const REGISTRY_INDEX_URL = `${`${CORE_SRC_BASE_URL}/registry`}/index.json`;
 * Full URL to the CentoUI CSS theme file.
 * This file is written to the user's project during `centoui init`.
 */
-const THEME_CSS_URL = `${CORE_SRC_BASE_URL}/css/centoui.css`;
+const THEME_CSS_URL = `${CORE_SRC_BASE_URL}/defaults/centoui.css`;
+/**
+* Full URL to the default values file for the CentoUI config.
+* The contents of this file are written to the user's project during `centoui init`.
+*/
+const CONFIG_DEFAULTS_URL = `${CORE_SRC_BASE_URL}/defaults/config.ts`;
 /**
 * HTTP headers required when fetching raw content from the GitHub API.
 * These ensure we get the raw file bytes, not GitHub's HTML wrapper.
@@ -185,10 +190,7 @@ async function confirmOverwriteIfExists(label, path) {
 //#endregion
 //#region src/utils/config-utils.ts
 /**
-* Loads and returns the user's CentoUI configuration from `centoui.config.ts`.
-*
-* Uses a dynamic `import()` via a `file://` URL so that TypeScript config files
-* compiled by the user's build tooling are resolved correctly at runtime.
+* Loads and returns the user's CentoUI configuration from `centoui.config.ts` using c12.
 *
 * @param cwd - Absolute path to the project root.
 * @returns The default export of `centoui.config.ts` cast as {@link CentoUIConfig}.
@@ -196,13 +198,58 @@ async function confirmOverwriteIfExists(label, path) {
 * @throws If the file exists but cannot be imported or does not export a default value.
 */
 async function loadCentoUIConfig(cwd) {
-	const configFilePath = join(cwd, CONFIG_FILE_NAME);
+	const { config, configFile } = await loadConfig({
+		name: "centoui",
+		cwd
+	});
+	if (!configFile) throw new Error(`[loadCentoUIConfig] "${CONFIG_FILE_NAME}" not found in "${cwd}". Run \`centoui init\` first.`);
+	return config;
+}
+/**
+* Fetches the raw content of the default CentoUI config file from GitHub.
+*
+* This file contains the default icon mappings and other shared defaults
+* that are merged into the user's generated config.
+*
+* @returns Raw UTF-8 content of the default config file.
+* @throws If the network request fails or the server returns a non-2xx status.
+*/
+async function fetchDefaultConfig() {
+	let response;
 	try {
-		if (!await fsExtra.pathExists(configFilePath)) throw new Error(`[loadCentoUIConfig] "${CONFIG_FILE_NAME}" not found in "${cwd}". Run \`centoui init\` first.`);
-		return (await import(pathToFileURL(configFilePath).href)).default;
+		response = await fetch(CONFIG_DEFAULTS_URL, { headers: GITHUB_RAW_FETCH_HEADERS });
 	} catch (error) {
-		throw new Error(`[loadCentoUIConfig] Failed to import "${configFilePath}": ${error}`);
+		throw new Error(`[fetchDefaultConfigContent] Network request for default config failed: ${error}`);
 	}
+	if (!response.ok) throw new Error(`[fetchDefaultConfigContent] Server returned ${response.status} ${response.statusText} (URL: ${CONFIG_DEFAULTS_URL})`);
+	return response.text();
+}
+/**
+* Extracts the inner config object from the default config file content.
+*
+* Strips the `export default`, `satisfies` clause, and outer braces,
+* returning just the inner properties as a raw string.
+*
+* @example
+* // Input:
+* // export default {
+* //   icons: { check: 'lucide:check' },
+* // } satisfies Pick<CentoUIConfig, 'icons'>
+* // Output:
+* // "  icons: { check: 'lucide:check' },"
+*
+* @param fileContent - The full source of the default config file.
+* @returns The inner config body, or an empty string if no object is found.
+*/
+function extractInnerConfigContent(fileContent) {
+	let cleanedConfigContent = fileContent.replace(/^import\s+.*$/gm, "");
+	cleanedConfigContent = cleanedConfigContent.replace(/^\s*export\s+default\s+/, "");
+	cleanedConfigContent = cleanedConfigContent.replace(/\s+satisfies\s+[^}]*$/, "");
+	cleanedConfigContent = cleanedConfigContent.trim();
+	const firstBrace = cleanedConfigContent.indexOf("{");
+	const lastBrace = cleanedConfigContent.lastIndexOf("}");
+	if (firstBrace === -1 || lastBrace === -1 || lastBrace <= firstBrace) return "";
+	return cleanedConfigContent.slice(firstBrace + 1, lastBrace).replace(/^\n/, "").replace(/\n\s*$/, "");
 }
 /**
 * Generates the content of a default `centoui.config.ts` file.
@@ -215,18 +262,24 @@ async function loadCentoUIConfig(cwd) {
 * @param componentsDir - Relative path (from project root) where components will be installed.
 * @returns A string containing the complete TypeScript source for the config file.
 */
-function buildDefaultConfigFileContent(themeFilePath, componentsDir) {
+/**
+* Generates the content of a user's default `centoui.config.ts` file.
+*
+* Fetches the default config from GitHub to get the latest default config values (icon mappings, etc.),
+* then merges them with the user-provided paths. The generated file uses
+* `defineConfig` so IDEs can provide type-checking and autocompletion.
+*
+* @param themeFilePath - Relative path (from project root) where the CSS theme file lives.
+* @param componentsDir - Relative path (from project root) where components will be installed.
+* @returns A string containing the complete TypeScript source for the config file.
+*/
+async function buildUserDefaultConfigFileContent(themeFilePath, componentsDir) {
 	return `import { defineConfig } from 'centoui'
 
 export default defineConfig({
-  version: '${VERSION}',
   componentsDir: '${componentsDir}',
   themeFilePath: '${themeFilePath}',
-  icons: {
-    check: 'lucide:check',
-    close: 'lucide:x',
-    menu: 'lucide:menu',
-  },
+${extractInnerConfigContent(await fetchDefaultConfig())}
 })
 `;
 }
@@ -371,10 +424,11 @@ function init() {
 				let registry;
 				await tasks([
 					{
-						title: `Writing ${CONFIG_FILE_NAME}`,
+						title: "Fetching config defaults",
 						task: async () => {
 							if (!shouldWriteConfig) return `Skipped — "${CONFIG_FILE_NAME}" already exists`;
-							await fsExtra.outputFile(configPath, buildDefaultConfigFileContent(directories.themeFilePath, directories.componentDir), "utf-8");
+							const userConfigContent = await buildUserDefaultConfigFileContent(directories.themeFilePath, directories.componentDir);
+							await fsExtra.outputFile(configPath, userConfigContent, "utf-8");
 							return `${CONFIG_FILE_NAME} written`;
 						}
 					},

package/package.json

@@ -1,9 +1,16 @@
 {
   "name": "centoui-cli",
   "type": "module",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.30",
   "private": false,
   "description": "Official CLI for CentoUI.",
+  "keywords": [
+    "cli",
+    "vue",
+    "ui",
+    "components",
+    "tailwindcss"
+  ],
   "author": "Favour Emeka <favorodera@gmail.com>",
   "license": "MIT",
   "homepage": "https://centoui.vercel.app",
@@ -30,20 +37,22 @@
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",
+    "@vitest/ui": "^4.1.5",
     "tsdown": "^0.21.7",
     "type-fest": "^5.6.0",
-    "@vitest/ui": "^4.1.5",
     "vitest": "^4.1.2"
   },
   "dependencies": {
     "@clack/prompts": "^1.2.0",
+    "c12": "4.0.0-beta.5",
     "citty": "^0.2.2",
     "fs-extra": "^11.3.4",
     "nypm": "^0.6.6",
     "pathe": "^2.0.3"
   },
   "engines": {
-    "node": ">=22.0.0"
+    "node": ">=22.0.0",
+    "pnpm": ">=11.0.0"
   },
   "scripts": {
     "build": "tsdown",