@spaceinvoices/react-ui 0.1.1

package/cli/dist/index.js

@@ -0,0 +1,922 @@
+#!/usr/bin/env node
+
+// cli/src/index.ts
+import { Command } from "commander";
+
+// cli/src/commands/init.ts
+import fs4 from "fs";
+import path4 from "path";
+import prompts from "prompts";
+
+// cli/src/utils/config.ts
+import fs from "fs";
+import path from "path";
+var CONFIG_FILE = "spaceinvoices.json";
+var DEFAULT_CONFIG = {
+  $schema: "https://raw.githubusercontent.com/space-invoices/react-ui/main/spaceinvoices.schema.json",
+  aliases: {
+    components: "@/components/space-invoices",
+    ui: "@/components/ui",
+    lib: "@/lib",
+    hooks: "@/hooks",
+    providers: "@/providers"
+  }
+};
+function getConfigPath(cwd = process.cwd()) {
+  return path.join(cwd, CONFIG_FILE);
+}
+function configExists(cwd = process.cwd()) {
+  return fs.existsSync(getConfigPath(cwd));
+}
+function readConfig(cwd = process.cwd()) {
+  const configPath = getConfigPath(cwd);
+  if (!fs.existsSync(configPath)) {
+    return null;
+  }
+  try {
+    const content = fs.readFileSync(configPath, "utf-8");
+    return JSON.parse(content);
+  } catch {
+    return null;
+  }
+}
+function writeConfig(config, cwd = process.cwd()) {
+  const configPath = getConfigPath(cwd);
+  fs.writeFileSync(configPath, JSON.stringify(config, null, 2) + "\n");
+}
+
+// cli/src/utils/installer.ts
+import { spawn } from "child_process";
+import fs2 from "fs";
+import path2 from "path";
+function detectPackageManager(cwd = process.cwd()) {
+  if (fs2.existsSync(path2.join(cwd, "bun.lockb")) || fs2.existsSync(path2.join(cwd, "bun.lock"))) {
+    return "bun";
+  }
+  if (fs2.existsSync(path2.join(cwd, "pnpm-lock.yaml"))) {
+    return "pnpm";
+  }
+  if (fs2.existsSync(path2.join(cwd, "yarn.lock"))) {
+    return "yarn";
+  }
+  if (fs2.existsSync(path2.join(cwd, "package-lock.json"))) {
+    return "npm";
+  }
+  const packageJsonPath = path2.join(cwd, "package.json");
+  if (fs2.existsSync(packageJsonPath)) {
+    try {
+      const packageJson = JSON.parse(fs2.readFileSync(packageJsonPath, "utf-8"));
+      if (packageJson.packageManager) {
+        if (packageJson.packageManager.startsWith("bun")) return "bun";
+        if (packageJson.packageManager.startsWith("pnpm")) return "pnpm";
+        if (packageJson.packageManager.startsWith("yarn")) return "yarn";
+        if (packageJson.packageManager.startsWith("npm")) return "npm";
+      }
+    } catch {
+    }
+  }
+  return "npm";
+}
+function getInstallCommand(pm, packages, options = {}) {
+  const devFlag = options.dev ? " -D" : "";
+  switch (pm) {
+    case "bun":
+      return `bun add${devFlag} ${packages.join(" ")}`;
+    case "pnpm":
+      return `pnpm add${devFlag} ${packages.join(" ")}`;
+    case "yarn":
+      return `yarn add${devFlag} ${packages.join(" ")}`;
+    case "npm":
+    default:
+      return `npm install${options.dev ? " --save-dev" : ""} ${packages.join(" ")}`;
+  }
+}
+async function installPackages(packages, options = {}) {
+  if (packages.length === 0) return;
+  const cwd = options.cwd ?? process.cwd();
+  const pm = detectPackageManager(cwd);
+  const command = getInstallCommand(pm, packages, { dev: options.dev });
+  return new Promise((resolve, reject) => {
+    const [cmd, ...args] = command.split(" ");
+    const child = spawn(cmd, args, {
+      cwd,
+      stdio: "inherit",
+      shell: true
+    });
+    child.on("close", (code) => {
+      if (code === 0) {
+        resolve();
+      } else {
+        reject(new Error(`Package installation failed with code ${code}`));
+      }
+    });
+    child.on("error", (err) => {
+      reject(err);
+    });
+  });
+}
+function getInstalledPackages(cwd = process.cwd()) {
+  const packageJsonPath = path2.join(cwd, "package.json");
+  if (!fs2.existsSync(packageJsonPath)) {
+    return /* @__PURE__ */ new Set();
+  }
+  try {
+    const packageJson = JSON.parse(fs2.readFileSync(packageJsonPath, "utf-8"));
+    const deps = /* @__PURE__ */ new Set();
+    if (packageJson.dependencies) {
+      for (const dep of Object.keys(packageJson.dependencies)) {
+        deps.add(dep);
+      }
+    }
+    if (packageJson.devDependencies) {
+      for (const dep of Object.keys(packageJson.devDependencies)) {
+        deps.add(dep);
+      }
+    }
+    return deps;
+  } catch {
+    return /* @__PURE__ */ new Set();
+  }
+}
+function filterNewPackages(packages, cwd = process.cwd()) {
+  const installed = getInstalledPackages(cwd);
+  return packages.filter((pkg) => !installed.has(pkg));
+}
+
+// cli/src/utils/logger.ts
+import pc from "picocolors";
+var logger = {
+  info: (msg) => console.log(pc.blue("info"), msg),
+  success: (msg) => console.log(pc.green("success"), msg),
+  warn: (msg) => console.log(pc.yellow("warn"), msg),
+  error: (msg) => console.log(pc.red("error"), msg),
+  log: (msg) => console.log(msg),
+  break: () => console.log("")
+};
+function spinner(text) {
+  const frames = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
+  let i = 0;
+  let intervalId = null;
+  return {
+    start: () => {
+      process.stdout.write(`\r${pc.cyan(frames[0])} ${text}`);
+      intervalId = setInterval(() => {
+        i = (i + 1) % frames.length;
+        process.stdout.write(`\r${pc.cyan(frames[i])} ${text}`);
+      }, 80);
+    },
+    stop: (finalText) => {
+      if (intervalId) {
+        clearInterval(intervalId);
+        intervalId = null;
+      }
+      process.stdout.write(`\r${" ".repeat(text.length + 4)}\r`);
+      if (finalText) {
+        console.log(finalText);
+      }
+    },
+    succeed: (msg) => {
+      if (intervalId) {
+        clearInterval(intervalId);
+        intervalId = null;
+      }
+      process.stdout.write(`\r${" ".repeat(text.length + 4)}\r`);
+      console.log(`${pc.green("\u2713")} ${msg || text}`);
+    },
+    fail: (msg) => {
+      if (intervalId) {
+        clearInterval(intervalId);
+        intervalId = null;
+      }
+      process.stdout.write(`\r${" ".repeat(text.length + 4)}\r`);
+      console.log(`${pc.red("\u2717")} ${msg || text}`);
+    }
+  };
+}
+function highlight(text) {
+  return pc.cyan(text);
+}
+function dim(text) {
+  return pc.dim(text);
+}
+
+// cli/src/utils/registry.ts
+import fs3 from "fs";
+import path3 from "path";
+var REGISTRY_BASE_URL = "https://raw.githubusercontent.com/space-invoices/react-ui/main";
+var localBasePath = null;
+function setLocalBasePath(basePath) {
+  localBasePath = basePath;
+}
+var cachedRegistry = null;
+async function fetchRegistry() {
+  if (cachedRegistry) {
+    return cachedRegistry;
+  }
+  if (localBasePath) {
+    const registryPath = path3.join(localBasePath, "registry.json");
+    const content = fs3.readFileSync(registryPath, "utf-8");
+    cachedRegistry = JSON.parse(content);
+    return cachedRegistry;
+  }
+  const response = await fetch(`${REGISTRY_BASE_URL}/registry.json`);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch registry: ${response.statusText}`);
+  }
+  cachedRegistry = await response.json();
+  return cachedRegistry;
+}
+async function fetchFile(filePath) {
+  if (localBasePath) {
+    const fullPath = path3.join(localBasePath, "src", filePath);
+    return fs3.readFileSync(fullPath, "utf-8");
+  }
+  const url = `${REGISTRY_BASE_URL}/src/${filePath}`;
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch file ${filePath}: ${response.statusText}`);
+  }
+  return response.text();
+}
+function getComponent(registry, name) {
+  return registry.components[name] ?? null;
+}
+function getProvider(registry, name) {
+  const providerName = name.replace(/^providers\//, "");
+  return registry.providers[providerName] ?? null;
+}
+function getUtil(registry, name) {
+  const utilName = name.replace(/^utils\//, "");
+  return registry.utils[utilName] ?? null;
+}
+function listComponents(registry) {
+  return Object.keys(registry.components);
+}
+function getComponentsByCategory(registry) {
+  const result = {};
+  for (const [key, component] of Object.entries(registry.components)) {
+    const category = component.category;
+    if (!result[category]) {
+      result[category] = {
+        name: registry.categories[category]?.name ?? category,
+        components: []
+      };
+    }
+    result[category].components.push({ key, name: component.name });
+  }
+  return result;
+}
+
+// cli/src/utils/transformer.ts
+function transformImports(source, config) {
+  let result = source;
+  const replacements = [
+    // UI components: @/ui/components/ui/ -> config.aliases.ui/
+    [/@\/ui\/components\/ui\//g, `${config.aliases.ui}/`],
+    // Feature components: @/ui/components/ -> config.aliases.components/
+    [/@\/ui\/components\//g, `${config.aliases.components}/`],
+    // Providers: @/ui/providers/ -> config.aliases.providers/
+    [/@\/ui\/providers\//g, `${config.aliases.providers}/`],
+    // Lib utilities: @/ui/lib/ -> config.aliases.lib/
+    [/@\/ui\/lib\//g, `${config.aliases.lib}/`],
+    // Hooks: @/ui/hooks/ -> config.aliases.hooks/
+    [/@\/ui\/hooks\//g, `${config.aliases.hooks}/`]
+  ];
+  for (const [pattern, replacement] of replacements) {
+    result = result.replace(pattern, replacement);
+  }
+  return result;
+}
+function getDestinationPath(sourcePath, config) {
+  if (sourcePath.startsWith("components/ui/")) {
+    return {
+      destPath: sourcePath.replace("components/ui/", ""),
+      category: "ui"
+    };
+  }
+  if (sourcePath.startsWith("components/")) {
+    return {
+      destPath: sourcePath.replace("components/", ""),
+      category: "components"
+    };
+  }
+  if (sourcePath.startsWith("providers/")) {
+    return {
+      destPath: sourcePath.replace("providers/", ""),
+      category: "providers"
+    };
+  }
+  if (sourcePath.startsWith("lib/")) {
+    return {
+      destPath: sourcePath.replace("lib/", ""),
+      category: "lib"
+    };
+  }
+  if (sourcePath.startsWith("hooks/")) {
+    return {
+      destPath: sourcePath.replace("hooks/", ""),
+      category: "hooks"
+    };
+  }
+  return {
+    destPath: sourcePath,
+    category: "components"
+  };
+}
+function getFullDestinationPath(sourcePath, config, basePath) {
+  const { destPath, category } = getDestinationPath(sourcePath, config);
+  const alias = config.aliases[category];
+  let relativePath;
+  if (alias.startsWith("@/")) {
+    relativePath = alias.slice(2);
+  } else {
+    relativePath = alias;
+  }
+  return `${basePath}/src/${relativePath}/${destPath}`;
+}
+
+// cli/src/commands/init.ts
+var CORE_DEPENDENCIES = ["@spaceinvoices/js-sdk", "@tanstack/react-query"];
+var ESSENTIAL_FILES = [
+  "lib/utils.ts",
+  "lib/auth.ts",
+  "lib/cookies.ts",
+  "lib/browser-cookies.ts",
+  "lib/translation.ts",
+  "providers/sdk-provider.tsx",
+  "components/entities/keys.ts"
+];
+async function init(options = {}) {
+  const cwd = options.cwd ?? process.cwd();
+  logger.break();
+  logger.info("Initializing Space Invoices React UI...");
+  logger.break();
+  if (configExists(cwd) && !options.force) {
+    const { overwrite } = await prompts({
+      type: "confirm",
+      name: "overwrite",
+      message: `${CONFIG_FILE} already exists. Overwrite?`,
+      initial: false
+    });
+    if (!overwrite) {
+      logger.info("Initialization cancelled.");
+      return;
+    }
+  }
+  let config;
+  if (options.yes) {
+    config = { ...DEFAULT_CONFIG };
+  } else {
+    const answers = await prompts([
+      {
+        type: "text",
+        name: "components",
+        message: "Where should feature components be installed?",
+        initial: DEFAULT_CONFIG.aliases.components
+      },
+      {
+        type: "text",
+        name: "ui",
+        message: "Where should UI primitives be installed?",
+        initial: DEFAULT_CONFIG.aliases.ui
+      },
+      {
+        type: "text",
+        name: "lib",
+        message: "Where should lib utilities be installed?",
+        initial: DEFAULT_CONFIG.aliases.lib
+      },
+      {
+        type: "text",
+        name: "hooks",
+        message: "Where should hooks be installed?",
+        initial: DEFAULT_CONFIG.aliases.hooks
+      },
+      {
+        type: "text",
+        name: "providers",
+        message: "Where should providers be installed?",
+        initial: DEFAULT_CONFIG.aliases.providers
+      }
+    ]);
+    if (!answers.components) {
+      logger.info("Initialization cancelled.");
+      return;
+    }
+    config = {
+      $schema: DEFAULT_CONFIG.$schema,
+      aliases: {
+        components: answers.components,
+        ui: answers.ui,
+        lib: answers.lib,
+        hooks: answers.hooks,
+        providers: answers.providers
+      }
+    };
+  }
+  const configSpinner = spinner("Writing configuration...");
+  configSpinner.start();
+  try {
+    writeConfig(config, cwd);
+    configSpinner.succeed(`Created ${highlight(CONFIG_FILE)}`);
+  } catch (error) {
+    configSpinner.fail(`Failed to create ${CONFIG_FILE}`);
+    throw error;
+  }
+  const dirSpinner = spinner("Creating directories...");
+  dirSpinner.start();
+  try {
+    const directories = [
+      config.aliases.components,
+      config.aliases.ui,
+      config.aliases.lib,
+      config.aliases.hooks,
+      config.aliases.providers
+    ];
+    for (const alias of directories) {
+      let dirPath;
+      if (alias.startsWith("@/")) {
+        dirPath = path4.join(cwd, "src", alias.slice(2));
+      } else {
+        dirPath = path4.join(cwd, alias);
+      }
+      fs4.mkdirSync(dirPath, { recursive: true });
+    }
+    dirSpinner.succeed("Created directories");
+  } catch (error) {
+    dirSpinner.fail("Failed to create directories");
+    throw error;
+  }
+  const filesSpinner = spinner("Copying essential files...");
+  filesSpinner.start();
+  try {
+    for (const filePath of ESSENTIAL_FILES) {
+      const content = await fetchFile(filePath);
+      const transformed = transformImports(content, config);
+      const destPath = getFullDestinationPath(filePath, config, cwd);
+      fs4.mkdirSync(path4.dirname(destPath), { recursive: true });
+      fs4.writeFileSync(destPath, transformed);
+    }
+    filesSpinner.succeed(`Copied ${ESSENTIAL_FILES.length} essential files`);
+  } catch (error) {
+    filesSpinner.fail("Failed to copy essential files");
+    throw error;
+  }
+  const pm = detectPackageManager(cwd);
+  const newDeps = filterNewPackages(CORE_DEPENDENCIES, cwd);
+  if (newDeps.length > 0) {
+    logger.break();
+    logger.info(`Installing dependencies with ${pm}...`);
+    logger.break();
+    try {
+      await installPackages(newDeps, { cwd });
+      logger.break();
+      logger.success("Installed core dependencies");
+    } catch (error) {
+      logger.error("Failed to install dependencies. Please install manually:");
+      logger.log(`  ${newDeps.join(" ")}`);
+    }
+  }
+  logger.break();
+  logger.success("Space Invoices React UI initialized!");
+  logger.break();
+  logger.info("Next steps:");
+  logger.log(`  1. Add components: ${highlight("npx @spaceinvoices/react-ui add customers/create-customer-form")}`);
+  logger.log(`  2. Import and use in your app`);
+  logger.break();
+}
+
+// cli/src/commands/add.ts
+import fs5 from "fs";
+import path5 from "path";
+import prompts2 from "prompts";
+
+// cli/src/utils/resolver.ts
+function resolveDependencies(registry, componentNames) {
+  const visited = /* @__PURE__ */ new Set();
+  const items = [];
+  const allFiles = [];
+  const npmDepsSet = /* @__PURE__ */ new Set();
+  function resolveComponent(name) {
+    const key = `component:${name}`;
+    if (visited.has(key)) return;
+    visited.add(key);
+    const component = getComponent(registry, name);
+    if (!component) {
+      throw new Error(`Component "${name}" not found in registry`);
+    }
+    if (component.dependencies) {
+      for (const dep of component.dependencies) {
+        resolveComponent(dep);
+      }
+    }
+    if (component.providers) {
+      for (const providerName of component.providers) {
+        resolveProvider(providerName);
+      }
+    }
+    if (component.utils) {
+      for (const utilName of component.utils) {
+        resolveUtil(utilName);
+      }
+    }
+    items.push({
+      type: "component",
+      key: name,
+      name: component.name,
+      files: component.files,
+      npmDependencies: component.npmDependencies ?? []
+    });
+    allFiles.push(...component.files);
+    if (component.npmDependencies) {
+      for (const dep of component.npmDependencies) {
+        npmDepsSet.add(dep);
+      }
+    }
+  }
+  function resolveProvider(name) {
+    const providerName = name.replace(/^providers\//, "");
+    const key = `provider:${providerName}`;
+    if (visited.has(key)) return;
+    visited.add(key);
+    const provider = getProvider(registry, providerName);
+    if (!provider) {
+      throw new Error(`Provider "${providerName}" not found in registry`);
+    }
+    if (provider.dependencies) {
+      for (const dep of provider.dependencies) {
+        resolveProvider(dep);
+      }
+    }
+    items.push({
+      type: "provider",
+      key: providerName,
+      name: provider.name,
+      files: provider.files,
+      npmDependencies: provider.npmDependencies ?? []
+    });
+    allFiles.push(...provider.files);
+    if (provider.npmDependencies) {
+      for (const dep of provider.npmDependencies) {
+        npmDepsSet.add(dep);
+      }
+    }
+  }
+  function resolveUtil(name) {
+    const utilName = name.replace(/^utils\//, "");
+    const key = `util:${utilName}`;
+    if (visited.has(key)) return;
+    visited.add(key);
+    const util = getUtil(registry, utilName);
+    if (!util) {
+      throw new Error(`Utility "${utilName}" not found in registry`);
+    }
+    if (util.dependencies) {
+      for (const dep of util.dependencies) {
+        if (dep.startsWith("providers/") || registry.providers[dep]) {
+          resolveProvider(dep);
+        } else {
+          resolveUtil(dep);
+        }
+      }
+    }
+    items.push({
+      type: "util",
+      key: utilName,
+      name: util.name,
+      files: util.files,
+      npmDependencies: util.npmDependencies ?? []
+    });
+    allFiles.push(...util.files);
+    if (util.npmDependencies) {
+      for (const dep of util.npmDependencies) {
+        npmDepsSet.add(dep);
+      }
+    }
+  }
+  for (const name of componentNames) {
+    resolveComponent(name);
+  }
+  const uniqueFiles = [...new Set(allFiles)];
+  return {
+    items,
+    allFiles: uniqueFiles,
+    allNpmDependencies: [...npmDepsSet]
+  };
+}
+function getInstallSummary(resolved) {
+  return {
+    components: resolved.items.filter((i) => i.type === "component").map((i) => i.name),
+    providers: resolved.items.filter((i) => i.type === "provider").map((i) => i.name),
+    utils: resolved.items.filter((i) => i.type === "util").map((i) => i.name),
+    npmPackages: resolved.allNpmDependencies,
+    fileCount: resolved.allFiles.length
+  };
+}
+
+// cli/src/commands/add.ts
+async function add(componentNames, options = {}) {
+  const cwd = options.cwd ?? process.cwd();
+  if (!configExists(cwd)) {
+    logger.error(
+      "No spaceinvoices.json found. Run `npx @spaceinvoices/react-ui init` first."
+    );
+    process.exit(1);
+  }
+  const config = readConfig(cwd);
+  if (!config) {
+    logger.error("Failed to read spaceinvoices.json");
+    process.exit(1);
+  }
+  const registrySpinner = spinner("Fetching component registry...");
+  registrySpinner.start();
+  let registry;
+  try {
+    registry = await fetchRegistry();
+    registrySpinner.succeed("Fetched component registry");
+  } catch (error) {
+    registrySpinner.fail("Failed to fetch registry");
+    throw error;
+  }
+  if (options.all) {
+    componentNames = listComponents(registry);
+  }
+  if (componentNames.length === 0) {
+    const components = await selectComponents(registry);
+    if (components.length === 0) {
+      logger.info("No components selected.");
+      return;
+    }
+    componentNames = components;
+  }
+  const availableComponents = listComponents(registry);
+  for (const name of componentNames) {
+    if (!availableComponents.includes(name)) {
+      logger.error(`Component "${name}" not found in registry.`);
+      logger.info("Available components:");
+      for (const comp of availableComponents) {
+        logger.log(`  - ${comp}`);
+      }
+      process.exit(1);
+    }
+  }
+  logger.break();
+  const resolveSpinner = spinner("Resolving dependencies...");
+  resolveSpinner.start();
+  let resolved;
+  try {
+    resolved = resolveDependencies(registry, componentNames);
+    const summary2 = getInstallSummary(resolved);
+    resolveSpinner.succeed(
+      `Resolved ${summary2.fileCount} files with ${summary2.npmPackages.length} npm packages`
+    );
+  } catch (error) {
+    resolveSpinner.fail("Failed to resolve dependencies");
+    throw error;
+  }
+  const summary = getInstallSummary(resolved);
+  logger.break();
+  logger.info("The following will be installed:");
+  logger.break();
+  if (summary.components.length > 0) {
+    logger.log(`  ${highlight("Components:")} ${summary.components.join(", ")}`);
+  }
+  if (summary.providers.length > 0) {
+    logger.log(`  ${highlight("Providers:")} ${summary.providers.join(", ")}`);
+  }
+  if (summary.utils.length > 0) {
+    logger.log(`  ${highlight("Utilities:")} ${summary.utils.join(", ")}`);
+  }
+  if (summary.npmPackages.length > 0) {
+    logger.log(
+      `  ${highlight("npm packages:")} ${summary.npmPackages.join(", ")}`
+    );
+  }
+  logger.log(`  ${highlight("Files:")} ${summary.fileCount} files`);
+  if (!options.yes) {
+    logger.break();
+    const { proceed } = await prompts2({
+      type: "confirm",
+      name: "proceed",
+      message: "Proceed with installation?",
+      initial: true
+    });
+    if (!proceed) {
+      logger.info("Installation cancelled.");
+      return;
+    }
+  }
+  logger.break();
+  const filesSpinner = spinner("Installing components...");
+  filesSpinner.start();
+  const existingFiles = [];
+  const filesToWrite = [];
+  try {
+    for (const filePath of resolved.allFiles) {
+      const destPath = getFullDestinationPath(filePath, config, cwd);
+      if (fs5.existsSync(destPath)) {
+        existingFiles.push(destPath);
+      }
+      const content = await fetchFile(filePath);
+      const transformed = transformImports(content, config);
+      filesToWrite.push({ path: destPath, content: transformed });
+    }
+  } catch (error) {
+    filesSpinner.fail("Failed to fetch component files");
+    throw error;
+  }
+  if (existingFiles.length > 0 && !options.overwrite) {
+    filesSpinner.stop();
+    logger.break();
+    logger.warn(`The following files already exist:`);
+    for (const file of existingFiles) {
+      logger.log(`  ${dim(file)}`);
+    }
+    logger.break();
+    const { overwrite } = await prompts2({
+      type: "confirm",
+      name: "overwrite",
+      message: "Overwrite existing files?",
+      initial: false
+    });
+    if (!overwrite) {
+      const existingSet = new Set(existingFiles);
+      const filteredFiles = filesToWrite.filter((f) => !existingSet.has(f.path));
+      if (filteredFiles.length === 0) {
+        logger.info("No files to install.");
+        return;
+      }
+      filesToWrite.length = 0;
+      filesToWrite.push(...filteredFiles);
+    }
+    filesSpinner.start();
+  }
+  try {
+    for (const { path: filePath, content } of filesToWrite) {
+      fs5.mkdirSync(path5.dirname(filePath), { recursive: true });
+      fs5.writeFileSync(filePath, content);
+    }
+    filesSpinner.succeed(`Installed ${filesToWrite.length} files`);
+  } catch (error) {
+    filesSpinner.fail("Failed to write files");
+    throw error;
+  }
+  const pm = detectPackageManager(cwd);
+  const newDeps = filterNewPackages(resolved.allNpmDependencies, cwd);
+  if (newDeps.length > 0) {
+    logger.break();
+    logger.info(`Installing npm dependencies with ${pm}...`);
+    logger.break();
+    try {
+      await installPackages(newDeps, { cwd });
+      logger.break();
+      logger.success(`Installed ${newDeps.length} npm packages`);
+    } catch (error) {
+      logger.error("Failed to install npm packages. Please install manually:");
+      logger.log(`  ${newDeps.join(" ")}`);
+    }
+  }
+  logger.break();
+  logger.success("Components installed successfully!");
+  logger.break();
+}
+async function selectComponents(registry) {
+  const byCategory = getComponentsByCategory(registry);
+  const choices = [];
+  for (const [categoryKey, category] of Object.entries(byCategory)) {
+    choices.push({
+      title: `\u2500\u2500 ${category.name} \u2500\u2500`,
+      value: `__category_${categoryKey}`,
+      description: ""
+    });
+    for (const comp of category.components) {
+      choices.push({
+        title: `  ${comp.name}`,
+        value: comp.key,
+        description: comp.key
+      });
+    }
+  }
+  const { selected } = await prompts2({
+    type: "multiselect",
+    name: "selected",
+    message: "Select components to install",
+    choices: choices.filter((c) => !c.value.startsWith("__category_")),
+    hint: "- Space to select. Return to submit"
+  });
+  return selected ?? [];
+}
+
+// cli/src/commands/list.ts
+async function list(options = {}) {
+  const registrySpinner = spinner("Fetching component registry...");
+  registrySpinner.start();
+  try {
+    const registry = await fetchRegistry();
+    registrySpinner.succeed("Fetched component registry");
+    if (options.json) {
+      const output = {
+        components: Object.entries(registry.components).map(([key, comp]) => ({
+          key,
+          name: comp.name,
+          category: comp.category,
+          files: comp.files.length,
+          dependencies: comp.dependencies?.length ?? 0
+        })),
+        providers: Object.entries(registry.providers).map(([key, prov]) => ({
+          key,
+          name: prov.name,
+          files: prov.files.length
+        })),
+        utils: Object.entries(registry.utils).map(([key, util]) => ({
+          key,
+          name: util.name,
+          files: util.files.length
+        }))
+      };
+      console.log(JSON.stringify(output, null, 2));
+      return;
+    }
+    logger.break();
+    logger.info("Available components:");
+    logger.break();
+    const byCategory = getComponentsByCategory(registry);
+    for (const [categoryKey, category] of Object.entries(byCategory)) {
+      logger.log(highlight(`${category.name}:`));
+      for (const comp of category.components) {
+        logger.log(`  ${comp.key.padEnd(40)} ${dim(comp.name)}`);
+      }
+      logger.break();
+    }
+    logger.log(highlight("Providers:"));
+    for (const [key, prov] of Object.entries(registry.providers)) {
+      logger.log(`  ${key.padEnd(40)} ${dim(prov.name)}`);
+    }
+    logger.break();
+    logger.log(highlight("Utilities:"));
+    for (const [key, util] of Object.entries(registry.utils)) {
+      logger.log(`  ${key.padEnd(40)} ${dim(util.name)}`);
+    }
+    logger.break();
+    logger.info("Usage:");
+    logger.log(`  npx @spaceinvoices/react-ui add ${dim("<component-name>")}`);
+    logger.log(`  npx @spaceinvoices/react-ui add ${dim("customers/create-customer-form")}`);
+    logger.break();
+  } catch (error) {
+    registrySpinner.fail("Failed to fetch registry");
+    throw error;
+  }
+}
+
+// cli/src/index.ts
+var program = new Command();
+program.name("spaceinvoices-ui").description("CLI for adding Space Invoices React UI components to your project").version("0.1.0");
+program.option("--local <path>", "Use local registry from specified path (for development)");
+program.command("init").description("Initialize Space Invoices UI in your project").option("-y, --yes", "Skip prompts and use defaults").option("-f, --force", "Overwrite existing configuration").option("--cwd <path>", "Working directory (defaults to current directory)").action(async (options) => {
+  const globalOpts = program.opts();
+  if (globalOpts.local) {
+    setLocalBasePath(globalOpts.local);
+  }
+  try {
+    await init({
+      cwd: options.cwd,
+      yes: options.yes,
+      force: options.force
+    });
+  } catch (error) {
+    console.error("Error:", error instanceof Error ? error.message : error);
+    process.exit(1);
+  }
+});
+program.command("add").description("Add components to your project").argument("[components...]", "Components to add").option("-y, --yes", "Skip confirmation prompts").option("-a, --all", "Add all available components").option("-o, --overwrite", "Overwrite existing files without asking").option("--cwd <path>", "Working directory (defaults to current directory)").action(async (components, options) => {
+  const globalOpts = program.opts();
+  if (globalOpts.local) {
+    setLocalBasePath(globalOpts.local);
+  }
+  try {
+    await add(components, {
+      cwd: options.cwd,
+      yes: options.yes,
+      all: options.all,
+      overwrite: options.overwrite
+    });
+  } catch (error) {
+    console.error("Error:", error instanceof Error ? error.message : error);
+    process.exit(1);
+  }
+});
+program.command("list").description("List available components").option("--json", "Output as JSON").action(async (options) => {
+  const globalOpts = program.opts();
+  if (globalOpts.local) {
+    setLocalBasePath(globalOpts.local);
+  }
+  try {
+    await list({
+      json: options.json
+    });
+  } catch (error) {
+    console.error("Error:", error instanceof Error ? error.message : error);
+    process.exit(1);
+  }
+});
+program.parse();