apex-design-cli 1.0.0

package/dist/index.js

@@ -0,0 +1,747 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { Command } from "commander";
+
+// src/commands/init.ts
+import fs3 from "fs-extra";
+import path3 from "path";
+import ora from "ora";
+import prompts from "prompts";
+import chalk2 from "chalk";
+
+// src/utils/config.ts
+import fs from "fs-extra";
+import path from "path";
+import { z } from "zod";
+var CONFIG_FILE = "apex.config.json";
+var ConfigSchema = z.object({
+  $schema: z.string().optional(),
+  version: z.string(),
+  project: z.object({
+    type: z.enum(["react", "next", "vite", "other"]),
+    typescript: z.boolean(),
+    packageManager: z.enum(["npm", "yarn", "pnpm", "bun"])
+  }),
+  paths: z.object({
+    components: z.string(),
+    lib: z.string(),
+    hooks: z.string()
+  }),
+  aliases: z.object({
+    enabled: z.boolean(),
+    components: z.string(),
+    lib: z.string(),
+    hooks: z.string()
+  }),
+  tailwind: z.object({
+    config: z.string(),
+    css: z.string()
+  })
+});
+async function loadConfig(cwd = process.cwd()) {
+  const configPath = path.join(cwd, CONFIG_FILE);
+  if (!await fs.pathExists(configPath)) {
+    return null;
+  }
+  try {
+    const raw = await fs.readJson(configPath);
+    return ConfigSchema.parse(raw);
+  } catch {
+    return null;
+  }
+}
+async function writeConfig(config, cwd = process.cwd()) {
+  const configPath = path.join(cwd, CONFIG_FILE);
+  await fs.writeJson(configPath, config, { spaces: 2 });
+}
+function getDefaultConfig(overrides = {}) {
+  return {
+    $schema: "https://apex-design-system.vercel.app/schema/config.json",
+    version: "1.0.0",
+    project: {
+      type: "react",
+      typescript: true,
+      packageManager: "npm",
+      ...overrides.project
+    },
+    paths: {
+      components: "./src/components/ui",
+      lib: "./src/lib",
+      hooks: "./src/hooks",
+      ...overrides.paths
+    },
+    aliases: {
+      enabled: true,
+      components: "@/components/ui",
+      lib: "@/lib",
+      hooks: "@/hooks",
+      ...overrides.aliases
+    },
+    tailwind: {
+      config: "./tailwind.config.js",
+      css: "./src/index.css",
+      ...overrides.tailwind
+    }
+  };
+}
+
+// src/utils/project-detector.ts
+import fs2 from "fs-extra";
+import path2 from "path";
+async function detectProject(cwd = process.cwd()) {
+  const packageManager = await detectPackageManager(cwd);
+  const typescript = await detectTypeScript(cwd);
+  const type = await detectProjectType(cwd);
+  return {
+    type,
+    typescript,
+    packageManager,
+    rootDir: cwd
+  };
+}
+async function detectPackageManager(cwd) {
+  if (await fs2.pathExists(path2.join(cwd, "pnpm-lock.yaml"))) return "pnpm";
+  if (await fs2.pathExists(path2.join(cwd, "yarn.lock"))) return "yarn";
+  if (await fs2.pathExists(path2.join(cwd, "bun.lockb"))) return "bun";
+  return "npm";
+}
+async function detectTypeScript(cwd) {
+  return await fs2.pathExists(path2.join(cwd, "tsconfig.json")) || await fs2.pathExists(path2.join(cwd, "tsconfig.app.json"));
+}
+async function detectProjectType(cwd) {
+  try {
+    const pkg = await fs2.readJson(path2.join(cwd, "package.json"));
+    const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
+    if (allDeps["next"]) return "next";
+    if (allDeps["vite"]) return "vite";
+    if (allDeps["react"]) return "react";
+  } catch {
+  }
+  return "other";
+}
+
+// src/utils/installer.ts
+import { execa } from "execa";
+async function installDependencies(deps, packageManager, cwd = process.cwd()) {
+  if (deps.length === 0) return;
+  const installCmd = getInstallCommand(packageManager);
+  const args = [...installCmd.args, ...deps];
+  await execa(installCmd.command, args, {
+    cwd,
+    stdio: "pipe"
+  });
+}
+function getInstallCommand(pm) {
+  switch (pm) {
+    case "pnpm":
+      return { command: "pnpm", args: ["add"] };
+    case "yarn":
+      return { command: "yarn", args: ["add"] };
+    case "bun":
+      return { command: "bun", args: ["add"] };
+    case "npm":
+    default:
+      return { command: "npm", args: ["install"] };
+  }
+}
+function parseDependency(dep) {
+  const atIdx = dep.lastIndexOf("@");
+  if (atIdx > 0) {
+    return {
+      name: dep.substring(0, atIdx),
+      version: dep.substring(atIdx + 1)
+    };
+  }
+  return { name: dep, version: "latest" };
+}
+
+// src/utils/logger.ts
+import chalk from "chalk";
+var logger = {
+  info: (msg) => console.log(chalk.cyan("\u2139"), msg),
+  success: (msg) => console.log(chalk.green("\u2713"), msg),
+  warn: (msg) => console.log(chalk.yellow("\u26A0"), msg),
+  error: (msg) => console.log(chalk.red("\u2717"), msg),
+  break: () => console.log(""),
+  title: (msg) => {
+    console.log("");
+    console.log(chalk.bold.cyan(msg));
+    console.log(chalk.gray("\u2500".repeat(50)));
+  },
+  component: (name, description, badges = []) => {
+    const badgeStr = badges.map((b) => chalk.gray(`[${b}]`)).join(" ");
+    console.log(`  ${chalk.cyan(name.padEnd(22))} ${badgeStr}`);
+    if (description) {
+      console.log(`  ${chalk.gray(description)}`);
+    }
+  },
+  step: (current, total, msg) => {
+    console.log(chalk.gray(`  [${current}/${total}]`), msg);
+  },
+  importExample: (importStr) => {
+    console.log(chalk.yellow(`  ${importStr}`));
+  }
+};
+
+// src/commands/init.ts
+var CSS_VARIABLES = `
+/* APEX Design System - CSS Variables */
+:root {
+  /* Backgrounds */
+  --color-bg-primary: #ffffff;
+  --color-bg-secondary: #f8fafc;
+  --color-bg-tertiary: #f1f5f9;
+  --color-bg-inverse: #0f172a;
+
+  /* Foregrounds */
+  --color-fg-primary: #0f172a;
+  --color-fg-secondary: #475569;
+  --color-fg-muted: #64748b;
+  --color-fg-inverse: #ffffff;
+  --color-fg-disabled: #94a3b8;
+
+  /* Borders */
+  --color-border-default: #e2e8f0;
+  --color-border-strong: #cbd5e1;
+  --color-border-focus: #3b82f6;
+  --color-border-error: #ef4444;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+.dark {
+  --color-bg-primary: #0f172a;
+  --color-bg-secondary: #1e293b;
+  --color-bg-tertiary: #334155;
+  --color-bg-inverse: #f8fafc;
+
+  --color-fg-primary: #f8fafc;
+  --color-fg-secondary: #cbd5e1;
+  --color-fg-muted: #94a3b8;
+  --color-fg-inverse: #0f172a;
+  --color-fg-disabled: #475569;
+
+  --color-border-default: #334155;
+  --color-border-strong: #475569;
+  --color-border-focus: #60a5fa;
+  --color-border-error: #f87171;
+
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
+}
+
+/* Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+`;
+var UTILS_FILE = `import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+`;
+async function init(options) {
+  console.log("");
+  console.log(chalk2.bold.cyan("  APEX Design System"));
+  console.log(chalk2.gray("  Initialize your project"));
+  console.log("");
+  const cwd = process.cwd();
+  const existingConfig = await loadConfig(cwd);
+  if (existingConfig && !options.yes) {
+    const { overwrite } = await prompts({
+      type: "confirm",
+      name: "overwrite",
+      message: "apex.config.json already exists. Overwrite?",
+      initial: false
+    });
+    if (!overwrite) {
+      logger.info("Cancelled.");
+      return;
+    }
+  }
+  const spinner = ora("Detecting project...").start();
+  const projectInfo = await detectProject(cwd);
+  spinner.succeed(`Detected: ${projectInfo.type} (${projectInfo.typescript ? "TypeScript" : "JavaScript"}) with ${projectInfo.packageManager}`);
+  let config;
+  if (options.yes) {
+    config = getDefaultConfig({
+      project: {
+        type: projectInfo.type,
+        typescript: projectInfo.typescript,
+        packageManager: projectInfo.packageManager
+      }
+    });
+  } else {
+    const answers = await prompts([
+      {
+        type: "text",
+        name: "componentsPath",
+        message: "Where should components be installed?",
+        initial: "./src/components/ui"
+      },
+      {
+        type: "text",
+        name: "libPath",
+        message: "Where should utilities go?",
+        initial: "./src/lib"
+      },
+      {
+        type: "text",
+        name: "hooksPath",
+        message: "Where should hooks be installed?",
+        initial: "./src/hooks"
+      },
+      {
+        type: "confirm",
+        name: "useAliases",
+        message: "Use path aliases (@/)?",
+        initial: projectInfo.typescript
+      },
+      {
+        type: "text",
+        name: "tailwindConfig",
+        message: "Path to tailwind config?",
+        initial: "./tailwind.config.js"
+      },
+      {
+        type: "text",
+        name: "cssFile",
+        message: "Path to global CSS file?",
+        initial: "./src/index.css"
+      }
+    ]);
+    config = getDefaultConfig({
+      project: {
+        type: projectInfo.type,
+        typescript: projectInfo.typescript,
+        packageManager: projectInfo.packageManager
+      },
+      paths: {
+        components: answers.componentsPath,
+        lib: answers.libPath,
+        hooks: answers.hooksPath
+      },
+      aliases: {
+        enabled: answers.useAliases,
+        components: answers.useAliases ? "@/components/ui" : answers.componentsPath,
+        lib: answers.useAliases ? "@/lib" : answers.libPath,
+        hooks: answers.useAliases ? "@/hooks" : answers.hooksPath
+      },
+      tailwind: {
+        config: answers.tailwindConfig,
+        css: answers.cssFile
+      }
+    });
+  }
+  const setupSpinner = ora("Setting up project...").start();
+  setupSpinner.text = "Writing apex.config.json...";
+  await writeConfig(config, cwd);
+  setupSpinner.text = "Creating directories...";
+  await fs3.ensureDir(path3.resolve(cwd, config.paths.components));
+  await fs3.ensureDir(path3.resolve(cwd, config.paths.lib));
+  await fs3.ensureDir(path3.resolve(cwd, config.paths.hooks));
+  setupSpinner.text = "Creating utility files...";
+  const utilsPath = path3.resolve(cwd, config.paths.lib, "utils.ts");
+  if (!await fs3.pathExists(utilsPath)) {
+    await fs3.writeFile(utilsPath, UTILS_FILE);
+  }
+  setupSpinner.text = "Adding design tokens to CSS...";
+  const cssPath = path3.resolve(cwd, config.tailwind.css);
+  if (await fs3.pathExists(cssPath)) {
+    const existingCss = await fs3.readFile(cssPath, "utf-8");
+    if (!existingCss.includes("--color-bg-primary")) {
+      await fs3.appendFile(cssPath, "\n" + CSS_VARIABLES);
+    }
+  } else {
+    await fs3.writeFile(cssPath, CSS_VARIABLES);
+  }
+  if (config.aliases.enabled) {
+    setupSpinner.text = "Configuring path aliases...";
+    await updateTsConfig(cwd);
+  }
+  setupSpinner.succeed("Project configured");
+  const depsSpinner = ora("Installing base dependencies...").start();
+  try {
+    await installDependencies(
+      ["clsx", "tailwind-merge", "class-variance-authority"],
+      config.project.packageManager,
+      cwd
+    );
+    depsSpinner.succeed("Base dependencies installed");
+  } catch {
+    depsSpinner.warn("Could not install dependencies automatically. Install manually:");
+    logger.info(`  ${config.project.packageManager} install clsx tailwind-merge class-variance-authority`);
+  }
+  console.log("");
+  console.log(chalk2.bold.green("  \u2705 APEX Design System initialized!"));
+  console.log("");
+  console.log(chalk2.gray("  Next steps:"));
+  console.log(chalk2.cyan("    npx apex-design-cli list") + chalk2.gray("      Browse available components"));
+  console.log(chalk2.cyan("    npx apex-design-cli add button") + chalk2.gray("Install your first component"));
+  console.log("");
+}
+async function updateTsConfig(cwd) {
+  const tsconfigPath = path3.join(cwd, "tsconfig.json");
+  if (!await fs3.pathExists(tsconfigPath)) return;
+  try {
+    const tsconfig = await fs3.readJson(tsconfigPath);
+    if (!tsconfig.compilerOptions) {
+      tsconfig.compilerOptions = {};
+    }
+    if (!tsconfig.compilerOptions.baseUrl) {
+      tsconfig.compilerOptions.baseUrl = ".";
+    }
+    if (!tsconfig.compilerOptions.paths) {
+      tsconfig.compilerOptions.paths = {};
+    }
+    tsconfig.compilerOptions.paths["@/*"] = ["./src/*"];
+    await fs3.writeJson(tsconfigPath, tsconfig, { spaces: 2 });
+  } catch {
+  }
+}
+
+// src/commands/add.ts
+import fs5 from "fs-extra";
+import path5 from "path";
+import ora2 from "ora";
+import prompts2 from "prompts";
+import chalk3 from "chalk";
+
+// src/utils/registry.ts
+import fs4 from "fs-extra";
+import path4 from "path";
+import { fileURLToPath } from "url";
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = path4.dirname(__filename);
+function getPackageRoot() {
+  let dir = __dirname;
+  while (dir !== path4.dirname(dir)) {
+    if (fs4.existsSync(path4.join(dir, "package.json"))) {
+      return dir;
+    }
+    dir = path4.dirname(dir);
+  }
+  return __dirname;
+}
+function getRegistryDir() {
+  return path4.join(getPackageRoot(), "registry");
+}
+async function loadRegistry() {
+  const registryPath = path4.join(getRegistryDir(), "registry.json");
+  return fs4.readJson(registryPath);
+}
+async function loadComponentRegistry(name) {
+  const componentPath = path4.join(getRegistryDir(), "components", `${name}.json`);
+  if (!await fs4.pathExists(componentPath)) {
+    return null;
+  }
+  return fs4.readJson(componentPath);
+}
+async function resolveComponentSource(file) {
+  const packageRoot = getPackageRoot();
+  const sourcePath = path4.resolve(packageRoot, file.path);
+  if (!await fs4.pathExists(sourcePath)) {
+    throw new Error(`Source file not found: ${sourcePath}`);
+  }
+  return fs4.readFile(sourcePath, "utf-8");
+}
+async function resolveDependencyTree(componentNames) {
+  const resolved = /* @__PURE__ */ new Map();
+  const queue = [...componentNames];
+  while (queue.length > 0) {
+    const name = queue.shift();
+    if (resolved.has(name)) continue;
+    const component = await loadComponentRegistry(name);
+    if (!component) continue;
+    resolved.set(name, component);
+    for (const dep of component.registryDependencies) {
+      if (!resolved.has(dep)) {
+        queue.push(dep);
+      }
+    }
+  }
+  return Array.from(resolved.values());
+}
+function groupByCategory(components) {
+  return components.reduce((acc, component) => {
+    const category = component.category;
+    if (!acc[category]) {
+      acc[category] = [];
+    }
+    acc[category].push(component);
+    return acc;
+  }, {});
+}
+
+// src/utils/transformer.ts
+function transformImports(sourceCode, config) {
+  let transformed = sourceCode;
+  if (config.aliases.enabled) {
+    transformed = transformed.replace(
+      /from\s+['"]\.\.\/\.\.\/lib\/utils['"]/g,
+      `from '${config.aliases.lib}/utils'`
+    );
+    transformed = transformed.replace(
+      /from\s+['"]\.\.\/\.\.\/hooks\/useTheme['"]/g,
+      `from '${config.aliases.hooks}/use-theme'`
+    );
+    transformed = transformed.replace(
+      /from\s+['"]\.\.\/(\w+)\/\1['"]/g,
+      (_match, componentName) => {
+        const kebab = toKebabCase(componentName);
+        return `from '${config.aliases.components}/${kebab}'`;
+      }
+    );
+    transformed = transformed.replace(
+      /from\s+['"]\.\.\/(\w+)['"]/g,
+      (_match, componentName) => {
+        const kebab = toKebabCase(componentName);
+        return `from '${config.aliases.components}/${kebab}'`;
+      }
+    );
+  } else {
+    transformed = transformed.replace(
+      /from\s+['"]\.\.\/\.\.\/lib\/utils['"]/g,
+      `from '../../lib/utils'`
+    );
+    transformed = transformed.replace(
+      /from\s+['"]\.\.\/\.\.\/hooks\/useTheme['"]/g,
+      `from '../../hooks/use-theme'`
+    );
+  }
+  return transformed;
+}
+function toKebabCase(str) {
+  return str.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
+}
+
+// src/commands/add.ts
+async function add(componentNames, options) {
+  const cwd = process.cwd();
+  const config = await loadConfig(cwd);
+  if (!config) {
+    logger.error("apex.config.json not found. Run first:");
+    console.log(chalk3.cyan("\n  npx apex-design-cli init\n"));
+    process.exit(1);
+  }
+  const spinner = ora2("Loading registry...").start();
+  const registry = await loadRegistry();
+  const validNames = [];
+  for (const name of componentNames) {
+    const normalized = name.toLowerCase().replace(/\s+/g, "-");
+    if (registry.components.includes(normalized)) {
+      validNames.push(normalized);
+    } else {
+      spinner.stop();
+      logger.warn(`Component "${name}" not found. Skipping.`);
+      spinner.start();
+    }
+  }
+  if (validNames.length === 0) {
+    spinner.fail("No valid components found.");
+    console.log(chalk3.gray("\n  Run ") + chalk3.cyan("npx apex-design-cli list") + chalk3.gray(" to see available components.\n"));
+    return;
+  }
+  spinner.text = "Resolving dependencies...";
+  const allComponents = await resolveDependencyTree(validNames);
+  const requested = allComponents.filter((c) => validNames.includes(c.name));
+  const autoInstalled = allComponents.filter((c) => !validNames.includes(c.name));
+  spinner.succeed("Dependencies resolved");
+  if (autoInstalled.length > 0) {
+    for (const dep of autoInstalled) {
+      logger.info(`Auto-including ${chalk3.cyan(dep.title)} (required dependency)`);
+    }
+  }
+  const conflicts = [];
+  for (const component of allComponents) {
+    for (const file of component.files) {
+      const targetDir = getTargetDir(component, config, options.path);
+      const targetPath = path5.resolve(cwd, targetDir, path5.basename(file.target));
+      if (await fs5.pathExists(targetPath)) {
+        conflicts.push(targetPath);
+      }
+    }
+  }
+  if (conflicts.length > 0 && !options.overwrite) {
+    logger.warn(`${conflicts.length} file(s) already exist:`);
+    for (const conflict of conflicts) {
+      console.log(chalk3.gray(`  ${path5.relative(cwd, conflict)}`));
+    }
+    const { proceed } = await prompts2({
+      type: "confirm",
+      name: "proceed",
+      message: "Overwrite existing files?",
+      initial: false
+    });
+    if (!proceed) {
+      logger.info("Cancelled.");
+      return;
+    }
+  }
+  const npmDeps = /* @__PURE__ */ new Set();
+  for (const component of allComponents) {
+    for (const dep of component.dependencies) {
+      const { name } = parseDependency(dep);
+      npmDeps.add(name);
+    }
+  }
+  if (npmDeps.size > 0) {
+    const depsSpinner = ora2("Installing npm dependencies...").start();
+    try {
+      await installDependencies(
+        Array.from(npmDeps),
+        config.project.packageManager,
+        cwd
+      );
+      depsSpinner.succeed(`Installed ${npmDeps.size} dependencies`);
+    } catch {
+      depsSpinner.warn("Could not install dependencies automatically.");
+      logger.info(`  Install manually: ${Array.from(npmDeps).join(" ")}`);
+    }
+  }
+  const copySpinner = ora2("Copying components...").start();
+  const copiedFiles = [];
+  for (const component of allComponents) {
+    for (const file of component.files) {
+      try {
+        const sourceContent = await resolveComponentSource(file);
+        const transformed = transformImports(sourceContent, config);
+        const targetDir = getTargetDir(component, config, options.path);
+        const targetPath = path5.resolve(cwd, targetDir, path5.basename(file.target));
+        await fs5.ensureDir(path5.dirname(targetPath));
+        await fs5.writeFile(targetPath, transformed);
+        copiedFiles.push(path5.relative(cwd, targetPath));
+      } catch (err) {
+        copySpinner.stop();
+        logger.warn(`Could not copy ${file.target}: ${err instanceof Error ? err.message : "Unknown error"}`);
+        copySpinner.start();
+      }
+    }
+  }
+  copySpinner.succeed(`Copied ${copiedFiles.length} files`);
+  console.log("");
+  console.log(chalk3.bold.green("  \u2705 Components installed successfully!"));
+  console.log("");
+  console.log(chalk3.gray("  Added:"));
+  for (const component of requested) {
+    console.log(chalk3.cyan(`    ${component.title}`));
+  }
+  if (autoInstalled.length > 0) {
+    for (const dep of autoInstalled) {
+      console.log(chalk3.gray(`    ${dep.title} (auto-installed)`));
+    }
+  }
+  console.log("");
+  console.log(chalk3.gray("  Import in your app:"));
+  for (const component of requested) {
+    if (component.type === "registry:ui") {
+      const mainExports = component.exports.slice(0, 3).join(", ");
+      const suffix = component.exports.length > 3 ? ", ..." : "";
+      const importPath = config.aliases.enabled ? `${config.aliases.components}/${component.name}` : `${config.paths.components}/${component.name}`;
+      logger.importExample(`import { ${mainExports}${suffix} } from '${importPath}';`);
+    }
+  }
+  console.log("");
+}
+function getTargetDir(component, config, customPath) {
+  if (customPath) return customPath;
+  switch (component.type) {
+    case "registry:lib":
+      return config.paths.lib;
+    case "registry:hook":
+      return config.paths.hooks;
+    case "registry:ui":
+    default:
+      return config.paths.components;
+  }
+}
+
+// src/commands/list.ts
+import chalk4 from "chalk";
+var CATEGORY_LABELS = {
+  inputs: "Inputs",
+  display: "Display",
+  feedback: "Feedback",
+  overlay: "Overlay",
+  navigation: "Navigation",
+  "data-display": "Data Display",
+  utility: "Utility",
+  lib: "Utilities",
+  hooks: "Hooks"
+};
+var CATEGORY_ORDER = [
+  "inputs",
+  "display",
+  "feedback",
+  "overlay",
+  "navigation",
+  "data-display",
+  "utility",
+  "lib",
+  "hooks"
+];
+async function list(options) {
+  const registry = await loadRegistry();
+  const components = [];
+  for (const name of registry.components) {
+    const component = await loadComponentRegistry(name);
+    if (component) {
+      components.push(component);
+    }
+  }
+  if (options.json) {
+    console.log(JSON.stringify(components, null, 2));
+    return;
+  }
+  const byCategory = groupByCategory(components);
+  console.log("");
+  console.log(chalk4.bold.cyan("  APEX Design System") + chalk4.gray(` v${registry.version}`));
+  console.log(chalk4.gray(`  ${components.length} components available`));
+  console.log("");
+  for (const category of CATEGORY_ORDER) {
+    const items = byCategory[category];
+    if (!items || items.length === 0) continue;
+    const label = CATEGORY_LABELS[category] || category;
+    console.log(chalk4.bold.yellow(`  ${label.toUpperCase()}`));
+    console.log(chalk4.gray("  " + "\u2500".repeat(48)));
+    for (const item of items) {
+      const badges = [];
+      if (item.dependencies.some((d) => d.startsWith("@radix-ui"))) {
+        badges.push(chalk4.blue("Radix"));
+      }
+      if (item.dependencies.some((d) => d.startsWith("class-variance-authority"))) {
+        badges.push(chalk4.magenta("CVA"));
+      }
+      const badgeStr = badges.length > 0 ? " " + badges.join(" ") : "";
+      console.log(`    ${chalk4.cyan(item.name.padEnd(20))}${badgeStr}`);
+      console.log(`    ${chalk4.gray(item.description)}`);
+    }
+    console.log("");
+  }
+  console.log(chalk4.gray("  Usage:"));
+  console.log(chalk4.cyan("    npx apex-design-cli add <component-name>"));
+  console.log(chalk4.cyan("    npx apex-design-cli add button input card"));
+  console.log("");
+}
+
+// src/index.ts
+var program = new Command();
+program.name("apex-design-cli").description("CLI tool for APEX Design System \u2014 Install professional React components with a single command").version("1.0.0");
+program.command("init").description("Initialize your project for APEX Design System").option("-y, --yes", "Skip prompts and use defaults").action(init);
+program.command("add").description("Add components to your project").argument("<components...>", "Components to install").option("-o, --overwrite", "Overwrite existing files").option("-p, --path <path>", "Custom installation path").action(add);
+program.command("list").description("List all available components").option("-j, --json", "Output as JSON").action(list);
+program.parse();