basuicn 0.1.5 → 0.1.7

package/dist/ui-cli.cjs

@@ -1,4 +1,5 @@
 #!/usr/bin/env node
+#!/usr/bin/env node
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -26,12 +27,42 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var import_fs = __toESM(require("fs"), 1);
 var import_path = __toESM(require("path"), 1);
 var import_child_process = require("child_process");
+var import_readline = __toESM(require("readline"), 1);
+var VERSION = "0.1.6";
 var REGISTRY_LOCAL = "./registry.json";
-var REGISTRY_REMOTE = "https://raw.githubusercontent.com/huy14032003/ui-component/main/registry.json";
-var log = (msg) => console.log(`[basuicn] ${msg}`);
-var warn = (msg) => console.warn(`[basuicn] WARN: ${msg}`);
-var error = (msg) => console.error(`[basuicn] ERROR: ${msg}`);
+var REGISTRY_REMOTE = "https://raw.githubusercontent.com/Basuicn/basuicn-core/main/registry.json";
+var c = {
+  reset: "\x1B[0m",
+  bold: "\x1B[1m",
+  dim: "\x1B[2m",
+  green: "\x1B[32m",
+  yellow: "\x1B[33m",
+  red: "\x1B[31m",
+  cyan: "\x1B[36m",
+  magenta: "\x1B[35m",
+  blue: "\x1B[34m",
+  gray: "\x1B[90m"
+};
+var log = (msg) => console.log(`${c.cyan}\u25B8${c.reset} ${msg}`);
+var ok = (msg) => console.log(`${c.green}\u2714${c.reset} ${msg}`);
+var warn = (msg) => console.warn(`${c.yellow}\u26A0${c.reset} ${msg}`);
+var error = (msg) => console.error(`${c.red}\u2716${c.reset} ${msg}`);
 var getTargetProjectDir = () => process.cwd();
+var ask = (question) => {
+  const rl = import_readline.default.createInterface({ input: process.stdin, output: process.stdout });
+  return new Promise((resolve) => {
+    rl.question(`${c.cyan}?${c.reset} ${question} `, (answer) => {
+      rl.close();
+      resolve(answer.trim());
+    });
+  });
+};
+var confirm = async (question, defaultYes = true) => {
+  const hint = defaultYes ? "Y/n" : "y/N";
+  const answer = await ask(`${question} ${c.dim}(${hint})${c.reset}`);
+  if (!answer) return defaultYes;
+  return answer.toLowerCase().startsWith("y");
+};
 var validateRegistry = (data) => {
   if (!data || typeof data !== "object") return false;
   const reg = data;
@@ -78,7 +109,7 @@ var installNpmPackages = (packages, cwd, dev = false) => {
     toInstall = packages.filter((p) => !allDeps[p]);
   }
   if (toInstall.length === 0) return;
-  log(`Installing: ${toInstall.join(", ")}...`);
+  log(`Installing: ${c.bold}${toInstall.join(", ")}${c.reset}...`);
   const flag = dev ? "--save-dev" : "--save";
   try {
     (0, import_child_process.execSync)(`npm install ${toInstall.join(" ")} ${flag}`, { stdio: "inherit", cwd });
@@ -86,22 +117,27 @@ var installNpmPackages = (packages, cwd, dev = false) => {
     error(`Failed to install packages: ${toInstall.join(", ")}. ${err instanceof Error ? err.message : ""}`);
   }
 };
-var VITE_DEV_PACKAGES = ["tailwindcss", "@tailwindcss/vite", "@vitejs/plugin-react", "vite-plugin-babel", "babel-plugin-react-compiler", "@types/node"];
-var RUNTIME_PACKAGES = ["@base-ui/react", "tailwind-variants", "clsx", "tailwind-merge", "tailwindcss-animate"];
+var VITE_DEV_PACKAGES = [
+  "tailwindcss",
+  "@tailwindcss/vite",
+  "@vitejs/plugin-react",
+  "@types/node"
+];
+var RUNTIME_PACKAGES = [
+  "@base-ui/react",
+  "tailwind-variants",
+  "clsx",
+  "tailwind-merge",
+  "tailwindcss-animate",
+  "lucide-react"
+];
 var VITE_CONFIG_TEMPLATE = `import { defineConfig } from 'vite';
 import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
-import babel from 'vite-plugin-babel';
-import { reactCompilerPreset } from 'babel-plugin-react-compiler';
 import path from 'path';
 
-// https://vite.dev/config/
 export default defineConfig({
-  plugins: [
-    tailwindcss(),
-    react(),
-    babel({ presets: [reactCompilerPreset()] }),
-  ],
+  plugins: [tailwindcss(), react()],
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),
@@ -128,7 +164,7 @@ var setupViteConfig = (cwd) => {
   const configJs = import_path.default.join(cwd, "vite.config.js");
   if (!import_fs.default.existsSync(configTs) && !import_fs.default.existsSync(configJs)) {
     import_fs.default.writeFileSync(configTs, VITE_CONFIG_TEMPLATE);
-    log("Created vite.config.ts with Tailwind + React Compiler setup.");
+    ok("Created vite.config.ts.");
     return;
   }
   const existingPath = import_fs.default.existsSync(configTs) ? configTs : configJs;
@@ -136,16 +172,13 @@ var setupViteConfig = (cwd) => {
   const missingImports = [];
   if (!content.includes("@tailwindcss/vite")) missingImports.push("import tailwindcss from '@tailwindcss/vite';");
   if (!content.includes("@vitejs/plugin-react")) missingImports.push("import react from '@vitejs/plugin-react';");
-  if (!content.includes("vite-plugin-babel")) missingImports.push("import babel from 'vite-plugin-babel';");
-  if (!content.includes("babel-plugin-react-compiler")) missingImports.push("import { reactCompilerPreset } from 'babel-plugin-react-compiler';");
   if (!content.includes("from 'path'") && !content.includes('from "path"')) missingImports.push("import path from 'path';");
   const missingPlugins = [];
   if (!content.includes("tailwindcss()")) missingPlugins.push("tailwindcss()");
   if (!content.includes("react()") && !content.includes("react({")) missingPlugins.push("react()");
-  if (!content.includes("reactCompilerPreset")) missingPlugins.push("babel({ presets: [reactCompilerPreset()] })");
-  const hasAlias = content.includes("alias:") || content.includes("alias(") || content.includes("'@'") || content.includes('"@"');
+  const hasAlias = content.includes("alias:") || content.includes("'@'") || content.includes('"@"');
   if (missingImports.length === 0 && missingPlugins.length === 0 && hasAlias) {
-    log("vite.config already configured \u2014 skipping.");
+    ok("vite.config already configured \u2014 skipping.");
     return;
   }
   if (missingImports.length > 0) {
@@ -203,29 +236,7 @@ var setupViteConfig = (cwd) => {
     }
   }
   import_fs.default.writeFileSync(existingPath, content);
-  log(`Updated ${import_path.default.basename(existingPath)} with Tailwind + React Compiler + path aliases.`);
-};
-var ensureTailwindCss = (cwd) => {
-  const candidates = ["src/index.css", "src/App.css", "src/main.css"];
-  for (const cssFile of candidates) {
-    const cssPath = import_path.default.join(cwd, cssFile);
-    if (import_fs.default.existsSync(cssPath)) {
-      const content = import_fs.default.readFileSync(cssPath, "utf-8");
-      if (!content.includes('@import "tailwindcss"') && !content.includes("@import 'tailwindcss'")) {
-        import_fs.default.writeFileSync(cssPath, `@import "tailwindcss";
-
-${content}`);
-        log(`Added @import "tailwindcss" to ${cssFile}`);
-      } else {
-        log(`${cssFile} already imports Tailwind \u2014 skipping.`);
-      }
-      return;
-    }
-  }
-  const srcDir = import_path.default.join(cwd, "src");
-  if (!import_fs.default.existsSync(srcDir)) import_fs.default.mkdirSync(srcDir, { recursive: true });
-  import_fs.default.writeFileSync(import_path.default.join(srcDir, "index.css"), '@import "tailwindcss";\n');
-  log('Created src/index.css with @import "tailwindcss"');
+  ok(`Updated ${import_path.default.basename(existingPath)} with Tailwind + path aliases.`);
 };
 var setupTsConfig = (cwd) => {
   const candidates = ["tsconfig.app.json", "tsconfig.json"];
@@ -234,7 +245,7 @@ var setupTsConfig = (cwd) => {
     if (!import_fs.default.existsSync(configPath)) continue;
     const raw = import_fs.default.readFileSync(configPath, "utf-8");
     if (raw.includes('"@/*"') || raw.includes("'@/*'")) {
-      log(`${candidate} already has path aliases \u2014 skipping.`);
+      ok(`${candidate} already has path aliases \u2014 skipping.`);
       return;
     }
     try {
@@ -244,7 +255,7 @@ var setupTsConfig = (cwd) => {
       parsed.compilerOptions.baseUrl = ".";
       parsed.compilerOptions.paths = TSCONFIG_PATHS;
       import_fs.default.writeFileSync(configPath, JSON.stringify(parsed, null, 2));
-      log(`Added path aliases to ${candidate}.`);
+      ok(`Added path aliases to ${candidate}.`);
     } catch (err) {
       warn(`Could not auto-patch ${candidate}: ${err instanceof Error ? err.message : err}`);
       warn("Add these to compilerOptions manually:");
@@ -260,33 +271,119 @@ var setupTsConfig = (cwd) => {
   }
   const newConfig = { compilerOptions: { baseUrl: ".", paths: TSCONFIG_PATHS } };
   import_fs.default.writeFileSync(import_path.default.join(cwd, "tsconfig.json"), JSON.stringify(newConfig, null, 2));
-  log("Created tsconfig.json with path aliases.");
+  ok("Created tsconfig.json with path aliases.");
 };
-var ensureCore = (registry, cwd) => {
+var ensureCore = (registry, cwd, options = {}) => {
   const core = registry.core;
   if (!core) return;
   installNpmPackages(core.dependencies, cwd);
   for (const file of core.files) {
     const targetPath = import_path.default.join(cwd, file.path);
     const targetDir = import_path.default.dirname(targetPath);
-    if (!import_fs.default.existsSync(targetDir)) {
-      import_fs.default.mkdirSync(targetDir, { recursive: true });
+    if (!import_fs.default.existsSync(targetDir)) import_fs.default.mkdirSync(targetDir, { recursive: true });
+    if (import_fs.default.existsSync(targetPath) && !options.force) {
+      log(`Core file exists (skipping): ${c.dim}${file.path}${c.reset}`);
+      continue;
+    }
+    import_fs.default.writeFileSync(targetPath, file.content);
+    ok(`${import_fs.default.existsSync(targetPath) ? "Updated" : "Created"} core file: ${file.path}`);
+  }
+};
+var MAIN_PATCH_COMPONENTS = {
+  toast: {
+    import: "import { Toaster } from '@/components/ui/toast/Toaster';",
+    jsx: '<Toaster position="top-center" expand={true} richColors />'
+  }
+};
+var MAIN_CANDIDATES = ["src/main.tsx", "src/main.jsx", "src/index.tsx", "src/index.jsx"];
+var findMainFile = (cwd) => {
+  for (const c2 of MAIN_CANDIDATES) {
+    const p = import_path.default.join(cwd, c2);
+    if (import_fs.default.existsSync(p)) return p;
+  }
+  return null;
+};
+var insertImport = (content, importLine) => {
+  if (content.includes(importLine)) return content;
+  const allImports = [...content.matchAll(/^import\s.+$/gm)];
+  if (allImports.length > 0) {
+    const last = allImports[allImports.length - 1];
+    const pos = last.index + last[0].length;
+    return content.slice(0, pos) + "\n" + importLine + content.slice(pos);
+  }
+  return importLine + "\n" + content;
+};
+var patchMainTsx = (cwd) => {
+  const mainPath = findMainFile(cwd);
+  if (!mainPath) {
+    warn("Could not find entry file (src/main.tsx). Skipping main entry setup.");
+    return;
+  }
+  let content = import_fs.default.readFileSync(mainPath, "utf-8");
+  let changed = false;
+  const cssImportLine = "import './styles/index.css';";
+  const hasCssImport = content.includes("styles/index.css") || content.includes("index.css");
+  if (!hasCssImport) {
+    const firstImport = content.match(/^import\s/m);
+    if (firstImport?.index !== void 0) {
+      content = content.slice(0, firstImport.index) + cssImportLine + "\n" + content.slice(firstImport.index);
+    } else {
+      content = cssImportLine + "\n" + content;
     }
-    if (!import_fs.default.existsSync(targetPath)) {
-      import_fs.default.writeFileSync(targetPath, file.content);
-      log(`Created core file: ${file.path}`);
+    changed = true;
+  } else if (!content.includes("styles/index.css")) {
+    content = insertImport(content, cssImportLine);
+    changed = true;
+  }
+  if (!content.includes("ThemeProvider")) {
+    content = insertImport(content, "import { ThemeProvider } from '@/lib/theme/ThemeProvider';");
+    const wrapped = content.replace(/(<App\s*\/>)/g, "<ThemeProvider>\n      $1\n    </ThemeProvider>");
+    if (wrapped === content) {
+      warn("Could not locate <App /> in entry file \u2014 add <ThemeProvider> wrapper manually.");
+    } else {
+      content = wrapped;
     }
+    changed = true;
   }
+  if (changed) {
+    import_fs.default.writeFileSync(mainPath, content);
+    ok(`Patched ${import_path.default.relative(cwd, mainPath)}.`);
+  } else {
+    ok(`${import_path.default.relative(cwd, mainPath)} already configured \u2014 skipping.`);
+  }
+};
+var patchMainTsxComponent = (cwd, componentName) => {
+  const patch = MAIN_PATCH_COMPONENTS[componentName];
+  if (!patch) return;
+  const mainPath = findMainFile(cwd);
+  if (!mainPath) return;
+  let content = import_fs.default.readFileSync(mainPath, "utf-8");
+  const tagName = patch.jsx.match(/<(\w+)/)?.[1];
+  if (tagName && content.includes(`<${tagName}`)) return;
+  content = insertImport(content, patch.import);
+  const withProvider = content.replace(
+    /(<App\s*\/>)(\s*\n\s*<\/ThemeProvider>)/,
+    `$1
+      ${patch.jsx}$2`
+  );
+  if (withProvider !== content) {
+    import_fs.default.writeFileSync(mainPath, withProvider);
+  } else {
+    const fallback = content.replace(/(<App\s*\/>)/, `$1
+      ${patch.jsx}`);
+    if (fallback !== content) import_fs.default.writeFileSync(mainPath, fallback);
+  }
+  ok(`Added <${tagName}> to ${import_path.default.relative(cwd, mainPath)}.`);
 };
 var addComponent = (name, registry, cwd, options, added = /* @__PURE__ */ new Set()) => {
   if (added.has(name)) return;
   added.add(name);
   const component = registry.components[name];
   if (!component) {
-    error(`Component "${name}" not found. Run 'list' to see available components.`);
+    error(`Component "${name}" not found. Run '${c.cyan}basuicn list${c.reset}' to see available components.`);
     return;
   }
-  log(`Adding: ${name}...`);
+  log(`Adding: ${c.bold}${name}${c.reset}...`);
   ensureCore(registry, cwd);
   installNpmPackages(component.dependencies, cwd);
   if (component.internalDependencies) {
@@ -299,15 +396,13 @@ var addComponent = (name, registry, cwd, options, added = /* @__PURE__ */ new Se
   for (const file of component.files) {
     const targetPath = import_path.default.join(cwd, file.path);
     const targetDir = import_path.default.dirname(targetPath);
-    if (!import_fs.default.existsSync(targetDir)) {
-      import_fs.default.mkdirSync(targetDir, { recursive: true });
-    }
+    if (!import_fs.default.existsSync(targetDir)) import_fs.default.mkdirSync(targetDir, { recursive: true });
     if (import_fs.default.existsSync(targetPath) && !options.force) {
-      warn(`Skipped (exists): ${file.path} \u2014 use --force to overwrite`);
+      warn(`Skipped (exists): ${file.path} \u2014 use ${c.cyan}--force${c.reset} to overwrite`);
       continue;
     }
     import_fs.default.writeFileSync(targetPath, file.content);
-    log(`Created: ${file.path}`);
+    ok(`Created: ${file.path}`);
   }
 };
 var removeComponent = (name, registry, cwd) => {
@@ -316,12 +411,12 @@ var removeComponent = (name, registry, cwd) => {
     error(`Component "${name}" not found.`);
     return;
   }
-  log(`Removing: ${name}...`);
+  log(`Removing: ${c.bold}${name}${c.reset}...`);
   for (const file of component.files) {
     const targetPath = import_path.default.join(cwd, file.path);
     if (import_fs.default.existsSync(targetPath)) {
       import_fs.default.unlinkSync(targetPath);
-      log(`Deleted: ${file.path}`);
+      ok(`Deleted: ${file.path}`);
     }
   }
   for (const file of component.files) {
@@ -329,107 +424,304 @@ var removeComponent = (name, registry, cwd) => {
     try {
       if (import_fs.default.existsSync(targetDir) && import_fs.default.readdirSync(targetDir).length === 0) {
         import_fs.default.rmdirSync(targetDir);
-        log(`Removed empty dir: ${import_path.default.relative(cwd, targetDir)}`);
+        ok(`Removed empty dir: ${import_path.default.relative(cwd, targetDir)}`);
       }
     } catch (err) {
       warn(`Could not remove directory: ${err instanceof Error ? err.message : err}`);
     }
   }
 };
+var HELP_MAIN = `
+${c.bold}${c.cyan}basuicn${c.reset} ${c.dim}v${VERSION}${c.reset} \u2014 Modern React UI Component CLI
+
+${c.bold}USAGE${c.reset}
+  ${c.cyan}npx basuicn${c.reset} ${c.green}<command>${c.reset} ${c.dim}[options]${c.reset}
+
+${c.bold}COMMANDS${c.reset}
+  ${c.green}init${c.reset}                       Initialize project: install deps, copy core files, patch entry
+  ${c.green}add${c.reset} ${c.dim}<name...>${c.reset}             Add component(s) to your project
+  ${c.green}update${c.reset} ${c.dim}<name...>${c.reset}          Update component(s) to latest registry version
+  ${c.green}diff${c.reset} ${c.dim}<name...>${c.reset}            Show diff between local and registry version
+  ${c.green}remove${c.reset} ${c.dim}<name...>${c.reset}          Remove component(s) from your project
+  ${c.green}list${c.reset}                       List all available components
+  ${c.green}doctor${c.reset}                     Check project health and configuration
+
+${c.bold}OPTIONS${c.reset}
+  ${c.cyan}--force${c.reset}                    Overwrite existing files when adding/updating
+  ${c.cyan}--local${c.reset}                    Use local registry.json instead of remote
+  ${c.cyan}--help, -h${c.reset}                 Show help (use with a command for detailed help)
+  ${c.cyan}--version, -v${c.reset}              Show version
+
+${c.bold}QUICK START${c.reset}
+  ${c.dim}$${c.reset} npx basuicn init
+  ${c.dim}$${c.reset} npx basuicn add button input card
+  ${c.dim}$${c.reset} npx basuicn add toast
+
+${c.bold}EXAMPLES${c.reset}
+  ${c.dim}$${c.reset} npx basuicn add dialog --force   ${c.dim}# Overwrite existing dialog${c.reset}
+  ${c.dim}$${c.reset} npx basuicn diff button           ${c.dim}# See what changed since last update${c.reset}
+  ${c.dim}$${c.reset} npx basuicn doctor                ${c.dim}# Diagnose missing deps/config${c.reset}
+
+${c.dim}Documentation: https://github.com/Basuicn/basuicn-core${c.reset}
+`;
+var HELP_COMMANDS = {
+  init: `
+${c.bold}basuicn init${c.reset}
+
+  Initialize your project for basuicn components.
+
+  ${c.bold}What it does:${c.reset}
+    1. Installs runtime dependencies (@base-ui/react, tailwind-variants, etc.)
+    2. Sets up vite.config.ts with Tailwind CSS + path aliases
+    3. Patches tsconfig.json with path aliases (@/*, @lib/*, etc.)
+    4. Copies core files (cn.ts, themes.ts, ThemeProvider.tsx, index.css)
+    5. Wraps your <App /> with <ThemeProvider> in the main entry
+
+  ${c.bold}Usage:${c.reset}
+    ${c.dim}$${c.reset} npx basuicn init
+    ${c.dim}$${c.reset} npx basuicn init --local   ${c.dim}# Use local registry${c.reset}
+`,
+  add: `
+${c.bold}basuicn add${c.reset} ${c.dim}<name...>${c.reset}
+
+  Add one or more components to your project.
+
+  ${c.bold}Options:${c.reset}
+    ${c.cyan}--force${c.reset}    Overwrite existing component files
+
+  ${c.bold}Features:${c.reset}
+    \u2022 Auto-runs init if project hasn't been set up
+    \u2022 Resolves internal dependencies (e.g., dialog depends on button)
+    \u2022 Installs required npm packages automatically
+    \u2022 Patches main entry for components that need it (e.g., toast)
+
+  ${c.bold}Usage:${c.reset}
+    ${c.dim}$${c.reset} npx basuicn add button
+    ${c.dim}$${c.reset} npx basuicn add button input card dialog
+    ${c.dim}$${c.reset} npx basuicn add toast --force
+
+  ${c.bold}Interactive:${c.reset}
+    ${c.dim}$${c.reset} npx basuicn add           ${c.dim}# Prompts to select components${c.reset}
+`,
+  update: `
+${c.bold}basuicn update${c.reset} ${c.dim}<name...>${c.reset}
+
+  Update component(s) to the latest registry version.
+  Equivalent to ${c.cyan}add --force${c.reset}.
+
+  ${c.bold}Usage:${c.reset}
+    ${c.dim}$${c.reset} npx basuicn update button
+    ${c.dim}$${c.reset} npx basuicn update button card dialog
+`,
+  remove: `
+${c.bold}basuicn remove${c.reset} ${c.dim}<name...>${c.reset}
+
+  Remove component(s) from your project.
+  Deletes component files and cleans up empty directories.
+
+  ${c.bold}Usage:${c.reset}
+    ${c.dim}$${c.reset} npx basuicn remove button
+    ${c.dim}$${c.reset} npx basuicn remove dialog drawer sheet
+`,
+  diff: `
+${c.bold}basuicn diff${c.reset} ${c.dim}<name...>${c.reset}
+
+  Show differences between your local component files and the registry version.
+  Useful to see what has changed before running update.
+
+  ${c.bold}Usage:${c.reset}
+    ${c.dim}$${c.reset} npx basuicn diff button
+    ${c.dim}$${c.reset} npx basuicn diff button card
+`,
+  list: `
+${c.bold}basuicn list${c.reset}
+
+  Show all available components in the registry.
+  Displays internal dependencies for each component.
+
+  ${c.bold}Usage:${c.reset}
+    ${c.dim}$${c.reset} npx basuicn list
+`,
+  doctor: `
+${c.bold}basuicn doctor${c.reset}
+
+  Run a health check on your project configuration.
+
+  ${c.bold}Checks:${c.reset}
+    \u2022 Core files exist (cn.ts, themes.ts, ThemeProvider.tsx, index.css)
+    \u2022 ThemeProvider + CSS import in main entry
+    \u2022 Runtime packages installed
+    \u2022 Dev packages installed
+    \u2022 Tailwind CSS configured
+    \u2022 TypeScript path aliases
+    \u2022 Vite config present
+
+  ${c.bold}Usage:${c.reset}
+    ${c.dim}$${c.reset} npx basuicn doctor
+`
+};
 var main = async () => {
   const args = process.argv.slice(2);
+  if (args.includes("--version") || args.includes("-v")) {
+    console.log(`basuicn v${VERSION}`);
+    return;
+  }
   const isLocal = args.includes("--local");
   const isForce = args.includes("--force");
-  const filteredArgs = args.filter((a) => !a.startsWith("--"));
+  const isHelp = args.includes("--help") || args.includes("-h");
+  const filteredArgs = args.filter((a) => !a.startsWith("--") && a !== "-h" && a !== "-v");
   const command = filteredArgs[0];
   const componentNames = filteredArgs.slice(1);
+  if (isHelp && command && HELP_COMMANDS[command]) {
+    console.log(HELP_COMMANDS[command]);
+    return;
+  }
+  if (isHelp || !command) {
+    console.log(HELP_MAIN);
+    return;
+  }
   const cwd = getTargetProjectDir();
   const registry = await getRegistry(isLocal);
   switch (command) {
+    case "init": {
+      log("Initializing project...");
+      setupViteConfig(cwd);
+      setupTsConfig(cwd);
+      installNpmPackages(RUNTIME_PACKAGES, cwd);
+      ensureCore(registry, cwd, { force: true });
+      patchMainTsx(cwd);
+      console.log("");
+      ok(`${c.bold}Initialization complete!${c.reset} Run ${c.cyan}npx basuicn add <component>${c.reset} to get started.`);
+      break;
+    }
     case "add": {
-      if (componentNames.length === 0) {
-        error("Usage: npx basuicn add <component-name> [--force]");
-        return;
+      let names = componentNames;
+      if (names.length === 0) {
+        const all = Object.keys(registry.components).sort();
+        console.log(`
+${c.bold}Available components (${all.length}):${c.reset}`);
+        const categories = {};
+        for (const name of all) {
+          const prefix = name.includes("-") ? name.split("-")[0] : "general";
+          if (!categories[prefix]) categories[prefix] = [];
+          categories[prefix].push(name);
+        }
+        const cols = 4;
+        for (let i = 0; i < all.length; i += cols) {
+          const row = all.slice(i, i + cols).map((n) => n.padEnd(20)).join("");
+          console.log(`  ${c.dim}${row}${c.reset}`);
+        }
+        console.log("");
+        const answer = await ask(`Which components to add? ${c.dim}(space-separated, or "all")${c.reset}`);
+        if (!answer) {
+          log("No components selected.");
+          return;
+        }
+        names = answer === "all" ? all : answer.split(/[\s,]+/).filter(Boolean);
       }
       const cnPath = import_path.default.join(cwd, "src/lib/utils/cn.ts");
       if (!import_fs.default.existsSync(cnPath)) {
         log("Project not initialized \u2014 running init first...");
         setupViteConfig(cwd);
         setupTsConfig(cwd);
-        ensureTailwindCss(cwd);
         installNpmPackages(RUNTIME_PACKAGES, cwd);
+        ensureCore(registry, cwd, { force: true });
+        patchMainTsx(cwd);
+        console.log("");
       }
-      for (const name of componentNames) {
+      for (const name of names) {
         addComponent(name, registry, cwd, { force: isForce });
+        patchMainTsxComponent(cwd, name);
       }
-      log("Done!");
+      console.log("");
+      ok(`${c.bold}Done!${c.reset} Added ${names.length} component(s).`);
+      break;
+    }
+    case "update": {
+      if (componentNames.length === 0) {
+        error(`Usage: ${c.cyan}npx basuicn update <component-name> [...]${c.reset}`);
+        console.log(`  Run ${c.cyan}npx basuicn update --help${c.reset} for details.`);
+        return;
+      }
+      for (const name of componentNames) {
+        log(`Updating: ${c.bold}${name}${c.reset}...`);
+        addComponent(name, registry, cwd, { force: true });
+      }
+      console.log("");
+      ok(`${c.bold}Update complete.${c.reset}`);
       break;
     }
     case "remove": {
       if (componentNames.length === 0) {
-        error("Usage: npx basuicn remove <component-name>");
+        error(`Usage: ${c.cyan}npx basuicn remove <component-name>${c.reset}`);
         return;
       }
+      if (!isForce) {
+        const yes = await confirm(`Remove ${componentNames.join(", ")}?`);
+        if (!yes) {
+          log("Cancelled.");
+          return;
+        }
+      }
       for (const name of componentNames) {
         removeComponent(name, registry, cwd);
       }
-      log("Done!");
+      console.log("");
+      ok(`${c.bold}Done!${c.reset}`);
       break;
     }
     case "list": {
       const components = Object.keys(registry.components).sort();
-      log(`Available components (${components.length}):`);
+      console.log(`
+${c.bold}Available components (${components.length}):${c.reset}
+`);
+      const installed = [];
+      const available = [];
       for (const k of components) {
-        const deps = registry.components[k].internalDependencies;
-        const depStr = deps?.length ? ` (requires: ${deps.join(", ")})` : "";
-        console.log(`  - ${k}${depStr}`);
+        const comp = registry.components[k];
+        const firstFile = comp.files[0];
+        const isInstalled = firstFile && import_fs.default.existsSync(import_path.default.join(cwd, firstFile.path));
+        if (isInstalled) installed.push(k);
+        else available.push(k);
       }
-      break;
-    }
-    case "init": {
-      setupViteConfig(cwd);
-      setupTsConfig(cwd);
-      ensureTailwindCss(cwd);
-      installNpmPackages(RUNTIME_PACKAGES, cwd);
-      ensureCore(registry, cwd);
-      log("Initialization complete.");
-      break;
-    }
-    case "tailwind": {
-      console.log("\n--- Copy to tailwind.config.ts / tailwind.config.js ---\n");
-      console.log("// See README_CLI.md for full theme config");
-      break;
-    }
-    case "update": {
-      if (componentNames.length === 0) {
-        error("Usage: npx basuicn update <component-name> [...]");
-        return;
+      if (installed.length > 0) {
+        console.log(`  ${c.green}Installed (${installed.length}):${c.reset}`);
+        for (const k of installed) {
+          const deps = registry.components[k].internalDependencies?.filter(Boolean);
+          const depStr = deps?.length ? ` ${c.dim}\u2192 ${deps.join(", ")}${c.reset}` : "";
+          console.log(`    ${c.green}\u25CF${c.reset} ${k}${depStr}`);
+        }
+        console.log("");
       }
-      for (const name of componentNames) {
-        log(`Updating: ${name}...`);
-        addComponent(name, registry, cwd, { force: true });
+      if (available.length > 0) {
+        console.log(`  ${c.dim}Available (${available.length}):${c.reset}`);
+        for (const k of available) {
+          const deps = registry.components[k].internalDependencies?.filter(Boolean);
+          const depStr = deps?.length ? ` ${c.dim}\u2192 ${deps.join(", ")}${c.reset}` : "";
+          console.log(`    ${c.dim}\u25CB${c.reset} ${k}${depStr}`);
+        }
       }
-      log("Update complete.");
+      console.log("");
       break;
     }
     case "diff": {
       if (componentNames.length === 0) {
-        error("Usage: npx basuicn diff <component-name>");
+        error(`Usage: ${c.cyan}npx basuicn diff <component-name>${c.reset}`);
         return;
       }
       for (const name of componentNames) {
         const component = registry.components[name];
         if (!component) {
-          error(`Component "${name}" not found. Run 'list' to see available components.`);
+          error(`Component "${name}" not found.`);
           continue;
         }
         let hasDiff = false;
         console.log(`
-[diff] ${name}`);
+${c.bold}[diff] ${name}${c.reset}`);
         for (const file of component.files) {
           const targetPath = import_path.default.join(cwd, file.path);
           if (!import_fs.default.existsSync(targetPath)) {
-            console.log(`  + [new file] ${file.path}`);
+            console.log(`  ${c.green}+ [new file]${c.reset} ${file.path}`);
             hasDiff = true;
             continue;
           }
@@ -437,94 +729,120 @@ var main = async () => {
           if (localContent === file.content) continue;
           hasDiff = true;
           console.log(`
-  ~ ${file.path}`);
+  ${c.yellow}~${c.reset} ${file.path}`);
           const localLines = localContent.split("\n");
           const remoteLines = file.content.split("\n");
           const maxLen = Math.max(localLines.length, remoteLines.length);
           let shownLines = 0;
           for (let i = 0; i < maxLen; i++) {
             if (localLines[i] !== remoteLines[i]) {
-              if (localLines[i] !== void 0) console.log(`    - ${localLines[i]}`);
-              if (remoteLines[i] !== void 0) console.log(`    + ${remoteLines[i]}`);
+              if (localLines[i] !== void 0) console.log(`    ${c.red}- ${localLines[i]}${c.reset}`);
+              if (remoteLines[i] !== void 0) console.log(`    ${c.green}+ ${remoteLines[i]}${c.reset}`);
               shownLines++;
               if (shownLines >= 20) {
                 const remaining = maxLen - i - 1;
-                if (remaining > 0) console.log(`    ... and ${remaining} more lines`);
+                if (remaining > 0) console.log(`    ${c.dim}... and ${remaining} more lines${c.reset}`);
                 break;
               }
             }
           }
         }
-        if (!hasDiff) log(`${name}: already up to date.`);
+        if (!hasDiff) ok(`${name}: already up to date.`);
       }
       break;
     }
     case "doctor": {
-      log("Running project health check...\n");
+      console.log(`
+${c.bold}Project Health Check${c.reset}
+`);
       let issues = 0;
-      const check = (ok, msg, fix) => {
-        const icon = ok ? "  \u2713" : "  \u2717";
-        console.log(`${icon} ${msg}`);
-        if (!ok) {
-          if (fix) console.log(`      \u2192 ${fix}`);
+      const check = (passed, msg, fix) => {
+        console.log(`  ${passed ? `${c.green}\u2714${c.reset}` : `${c.red}\u2716${c.reset}`} ${msg}`);
+        if (!passed) {
+          if (fix) console.log(`    ${c.dim}\u2192 ${fix}${c.reset}`);
           issues++;
         }
       };
-      const cnPath = import_path.default.join(cwd, "src/lib/utils/cn.ts");
-      check(import_fs.default.existsSync(cnPath), "src/lib/utils/cn.ts", "run: npx basuicn init");
+      check(
+        import_fs.default.existsSync(import_path.default.join(cwd, "src/lib/utils/cn.ts")),
+        "src/lib/utils/cn.ts",
+        "run: npx basuicn init"
+      );
+      check(
+        import_fs.default.existsSync(import_path.default.join(cwd, "src/lib/theme/themes.ts")),
+        "src/lib/theme/themes.ts",
+        "run: npx basuicn init"
+      );
+      check(
+        import_fs.default.existsSync(import_path.default.join(cwd, "src/lib/theme/ThemeProvider.tsx")),
+        "src/lib/theme/ThemeProvider.tsx",
+        "run: npx basuicn init"
+      );
+      check(
+        import_fs.default.existsSync(import_path.default.join(cwd, "src/styles/index.css")),
+        "src/styles/index.css (theme variables)",
+        "run: npx basuicn init"
+      );
+      const mainPath = findMainFile(cwd);
+      if (mainPath) {
+        const mainContent = import_fs.default.readFileSync(mainPath, "utf-8");
+        check(
+          mainContent.includes("ThemeProvider"),
+          "ThemeProvider in main entry",
+          "run: npx basuicn init"
+        );
+        check(
+          mainContent.includes("styles/index.css") || mainContent.includes("index.css"),
+          "CSS import in main entry",
+          "run: npx basuicn init"
+        );
+      } else {
+        check(false, "main entry file (src/main.tsx)", "create src/main.tsx");
+      }
       const pkgPath = import_path.default.join(cwd, "package.json");
       if (import_fs.default.existsSync(pkgPath)) {
         const pkg = JSON.parse(import_fs.default.readFileSync(pkgPath, "utf-8"));
         const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
         for (const dep of RUNTIME_PACKAGES) {
-          check(!!allDeps[dep], `dependency: ${dep}`, `run: npm install ${dep}`);
+          check(!!allDeps[dep], `package: ${dep}`, `run: npm install ${dep}`);
+        }
+        for (const dep of VITE_DEV_PACKAGES) {
+          check(!!allDeps[dep], `package (dev): ${dep}`, `run: npm install -D ${dep}`);
         }
       } else {
         check(false, "package.json found", "run: npm init -y");
       }
-      const cssCandidates = ["src/index.css", "src/App.css", "src/main.css", "src/styles/index.css"];
-      const hasTailwind = cssCandidates.some((f) => {
-        const p = import_path.default.join(cwd, f);
-        if (!import_fs.default.existsSync(p)) return false;
-        const c = import_fs.default.readFileSync(p, "utf-8");
-        return c.includes('@import "tailwindcss"') || c.includes("@import 'tailwindcss'");
-      });
-      check(hasTailwind, "Tailwind CSS @import in CSS file", "run: npx basuicn init");
+      const hasTailwindInCss = (() => {
+        const candidates = ["src/styles/index.css", "src/index.css", "src/App.css"];
+        return candidates.some((f) => {
+          const p = import_path.default.join(cwd, f);
+          if (!import_fs.default.existsSync(p)) return false;
+          const content = import_fs.default.readFileSync(p, "utf-8");
+          return content.includes('@import "tailwindcss"') || content.includes("@import 'tailwindcss'");
+        });
+      })();
+      check(hasTailwindInCss, '@import "tailwindcss" in CSS', "run: npx basuicn init");
       const tsCandidates = ["tsconfig.app.json", "tsconfig.json"];
       const hasAlias = tsCandidates.some((f) => {
         const p = import_path.default.join(cwd, f);
         if (!import_fs.default.existsSync(p)) return false;
-        const c = import_fs.default.readFileSync(p, "utf-8");
-        return c.includes('"@/*"') || c.includes("'@/*'");
+        const content = import_fs.default.readFileSync(p, "utf-8");
+        return content.includes('"@/*"') || content.includes("'@/*'");
       });
       check(hasAlias, "TypeScript path aliases (@/*)", "run: npx basuicn init");
       const hasViteConfig = import_fs.default.existsSync(import_path.default.join(cwd, "vite.config.ts")) || import_fs.default.existsSync(import_path.default.join(cwd, "vite.config.js"));
       check(hasViteConfig, "vite.config.ts / vite.config.js", "run: npx basuicn init");
       console.log("");
       if (issues === 0) {
-        log("All checks passed! Project is healthy.");
+        ok(`${c.bold}All checks passed!${c.reset} Project is healthy.`);
       } else {
-        warn(`${issues} issue(s) found. Run 'npx basuicn init' to fix most issues.`);
+        warn(`${c.bold}${issues} issue(s) found.${c.reset} Run ${c.cyan}npx basuicn init${c.reset} to fix most issues.`);
       }
       break;
     }
     default: {
-      console.log(`
-  basuicn \u2014 UI Component CLI
-
-  Commands:
-    init                     Initialize project (install core deps + files)
-    add <name> [--force]     Add component(s) to your project
-    update <name>            Update component(s) to the latest registry version
-    diff <name>              Show diff between local and registry version
-    remove <name>            Remove component(s) from your project
-    list                     List all available components
-    doctor                   Check project health and configuration
-    tailwind                 Show Tailwind config instructions
-
-  Options:
-    --local                  Use local registry.json instead of remote
-    --force                  Overwrite existing files when adding
+      error(`Unknown command: "${command}"`);
+      console.log(`  Run ${c.cyan}npx basuicn --help${c.reset} to see available commands.
 `);
     }
   }