@metacells/mcellui-cli 0.1.2 → 0.1.4

package/dist/index.js

@@ -116,8 +116,8 @@ function validateConfig(config) {
     return { success: true, data: result.data };
   }
   const errors = result.error.issues.map((issue) => {
-    const path10 = issue.path.join(".");
-    return path10 ? `${path10}: ${issue.message}` : issue.message;
+    const path12 = issue.path.join(".");
+    return path12 ? `${path12}: ${issue.message}` : issue.message;
   });
   return { success: false, errors };
 }
@@ -475,8 +475,8 @@ import { Command as Command2 } from "commander";
 import chalk3 from "chalk";
 import ora2 from "ora";
 import prompts2 from "prompts";
-import fs4 from "fs-extra";
-import path4 from "path";
+import fs5 from "fs-extra";
+import path5 from "path";
 
 // src/utils/registry.ts
 import fs3 from "fs-extra";
@@ -484,7 +484,7 @@ import path3 from "path";
 import { fileURLToPath as fileURLToPath2 } from "url";
 var __filename3 = fileURLToPath2(import.meta.url);
 var __dirname2 = path3.dirname(__filename3);
-var DEFAULT_REGISTRY_URL = "https://raw.githubusercontent.com/metacells/mcellui/main/packages/registry";
+var DEFAULT_REGISTRY_URL = "https://raw.githubusercontent.com/metacells-development/mcellui/main/packages/registry";
 var REGISTRY_URL = process.env.MCELLUI_REGISTRY_URL || process.env.NATIVEUI_REGISTRY_URL || DEFAULT_REGISTRY_URL;
 function getLocalRegistryPath() {
   return path3.resolve(__dirname2, "..", "..", "registry");
@@ -567,11 +567,173 @@ async function fetchRemoteComponent(item) {
   };
 }
 
+// src/utils/dependencies.ts
+function resolveDependencies(components, registry) {
+  const registryMap = /* @__PURE__ */ new Map();
+  for (const item of registry) {
+    registryMap.set(item.name, item);
+  }
+  const resolved = /* @__PURE__ */ new Set();
+  const resolving = /* @__PURE__ */ new Set();
+  const resolvedOrder = [];
+  function resolve(name, path12) {
+    if (resolved.has(name)) {
+      return null;
+    }
+    if (resolving.has(name)) {
+      return [...path12, name];
+    }
+    const item = registryMap.get(name);
+    if (!item) {
+      return null;
+    }
+    resolving.add(name);
+    const deps = item.registryDependencies || [];
+    for (const dep of deps) {
+      const circular = resolve(dep, [...path12, name]);
+      if (circular) {
+        return circular;
+      }
+    }
+    resolving.delete(name);
+    resolved.add(name);
+    resolvedOrder.push(name);
+    return null;
+  }
+  for (const name of components) {
+    const circular = resolve(name, []);
+    if (circular) {
+      return {
+        resolved: [],
+        circular
+      };
+    }
+  }
+  return {
+    resolved: resolvedOrder,
+    circular: null
+  };
+}
+function formatCircularError(chain) {
+  return chain.join(" \u2192 ");
+}
+
+// src/utils/installed.ts
+import fs4 from "fs-extra";
+import path4 from "path";
+async function getInstalledFiles(componentsDir) {
+  if (!await fs4.pathExists(componentsDir)) {
+    return [];
+  }
+  const files = await fs4.readdir(componentsDir);
+  const componentFiles = [];
+  for (const file of files) {
+    if (file.endsWith(".tsx") || file.endsWith(".ts")) {
+      if (file === "index.ts" || file === "index.tsx") {
+        continue;
+      }
+      componentFiles.push(path4.join(componentsDir, file));
+    }
+  }
+  return componentFiles.sort();
+}
+function normalizeContent(content) {
+  return content.replace(/\r\n/g, "\n").replace(/\s+$/gm, "").trim();
+}
+function transformImports(code, config) {
+  let transformed = code;
+  transformed = transformed.replace(
+    /from ['"]@nativeui\/core['"]/g,
+    `from '@metacells/mcellui-core'`
+  );
+  const utilsAlias = config.aliases?.utils || "@/lib/utils";
+  if (utilsAlias !== "@/lib/utils") {
+    transformed = transformed.replace(
+      /from ['"]@\/lib\/utils['"]/g,
+      `from '${utilsAlias}'`
+    );
+  }
+  return transformed;
+}
+async function getInstallStatus(installedFiles, registry, config) {
+  const results = [];
+  const registryMap = /* @__PURE__ */ new Map();
+  for (const item of registry) {
+    for (const file of item.files) {
+      const fileName = path4.basename(file);
+      registryMap.set(fileName, item);
+    }
+  }
+  for (const localFile of installedFiles) {
+    const fileName = path4.basename(localFile);
+    const componentName = fileName.replace(/\.tsx?$/, "");
+    const registryItem = registryMap.get(fileName);
+    if (!registryItem) {
+      results.push({
+        name: componentName,
+        fileName,
+        status: "local-only",
+        localPath: localFile
+      });
+      continue;
+    }
+    try {
+      const component = await fetchComponent(registryItem.name);
+      if (!component) {
+        results.push({
+          name: registryItem.name,
+          fileName,
+          status: "modified",
+          // Assume modified if we can't verify
+          localPath: localFile
+        });
+        continue;
+      }
+      const registryFile = component.files.find((f) => f.name === fileName);
+      if (!registryFile) {
+        results.push({
+          name: registryItem.name,
+          fileName,
+          status: "modified",
+          localPath: localFile
+        });
+        continue;
+      }
+      const localContent = await fs4.readFile(localFile, "utf-8");
+      const normalizedLocal = normalizeContent(localContent);
+      const normalizedRegistry = normalizeContent(
+        transformImports(registryFile.content, config)
+      );
+      results.push({
+        name: registryItem.name,
+        fileName,
+        status: normalizedLocal === normalizedRegistry ? "identical" : "modified",
+        localPath: localFile
+      });
+    } catch {
+      results.push({
+        name: registryItem.name,
+        fileName,
+        status: "modified",
+        // Assume modified on error
+        localPath: localFile
+      });
+    }
+  }
+  return results;
+}
+function getInstalledNames(installedFiles) {
+  return installedFiles.map((file) => {
+    const fileName = path4.basename(file);
+    return fileName.replace(/\.tsx?$/, "");
+  });
+}
+
 // src/commands/add.ts
 var addCommand = new Command2().name("add").description("Add a component to your project").argument("[components...]", "Components to add").option("-y, --yes", "Skip confirmation").option("-o, --overwrite", "Overwrite existing files").option("--cwd <path>", "Working directory", process.cwd()).action(async (components, options) => {
   const spinner = ora2();
   try {
-    const cwd = path4.resolve(options.cwd);
+    const cwd = path5.resolve(options.cwd);
     const projectRoot = await getProjectRoot(cwd);
     if (!projectRoot) {
       console.log(chalk3.red("Could not find a valid project."));
@@ -585,8 +747,8 @@ var addCommand = new Command2().name("add").description("Add a component to your
       process.exit(1);
     }
     if (!components.length) {
-      const registry = await getRegistry();
-      if (!registry.length) {
+      const registry2 = await getRegistry();
+      if (!registry2.length) {
         console.log(chalk3.red("No components found in registry."));
         process.exit(1);
       }
@@ -594,7 +756,7 @@ var addCommand = new Command2().name("add").description("Add a component to your
         type: "multiselect",
         name: "selected",
         message: "Which components would you like to add?",
-        choices: registry.map((item) => ({
+        choices: registry2.map((item) => ({
           title: `${item.name} ${chalk3.dim(`(${item.status})`)}`,
           value: item.name,
           description: item.description
@@ -607,13 +769,51 @@ var addCommand = new Command2().name("add").description("Add a component to your
       }
       components = selected;
     }
+    spinner.start("Resolving dependencies...");
+    const registry = await getRegistry();
+    const { resolved, circular } = resolveDependencies(components, registry);
+    if (circular) {
+      spinner.fail("Circular dependency detected");
+      console.log(chalk3.red(`  ${formatCircularError(circular)}`));
+      process.exit(1);
+    }
+    spinner.stop();
+    const componentsDir = path5.join(projectRoot, config.componentsPath);
+    const installedFiles = await getInstalledFiles(componentsDir);
+    const installedNames = new Set(getInstalledNames(installedFiles));
+    const toInstall = options.overwrite ? resolved : resolved.filter((name) => !installedNames.has(name));
+    if (toInstall.length === 0) {
+      console.log(chalk3.yellow("All components are already installed."));
+      console.log(chalk3.dim("Use --overwrite to reinstall."));
+      return;
+    }
+    const requested = new Set(components);
+    const dependencies = toInstall.filter((name) => !requested.has(name));
     console.log();
     console.log(chalk3.bold("Adding components:"));
-    components.forEach((c) => console.log(chalk3.dim(`  - ${c}`)));
+    for (const name of toInstall) {
+      if (requested.has(name)) {
+        console.log(chalk3.dim(`  - ${name}`));
+      } else {
+        console.log(chalk3.dim(`  - ${name} ${chalk3.cyan("(dependency)")}`));
+      }
+    }
     console.log();
+    if (dependencies.length > 0 && !options.yes) {
+      const { confirm } = await prompts2({
+        type: "confirm",
+        name: "confirm",
+        message: `Add ${dependencies.length} additional dependencies?`,
+        initial: true
+      });
+      if (!confirm) {
+        console.log(chalk3.dim("Cancelled."));
+        return;
+      }
+    }
     const allDependencies = [];
     const allDevDependencies = [];
-    for (const componentName of components) {
+    for (const componentName of toInstall) {
       spinner.start(`Fetching ${componentName}...`);
       try {
         const component = await fetchComponent(componentName);
@@ -621,16 +821,16 @@ var addCommand = new Command2().name("add").description("Add a component to your
           spinner.fail(`Component "${componentName}" not found`);
           continue;
         }
-        const targetDir = path4.join(projectRoot, config.componentsPath);
+        const targetDir = path5.join(projectRoot, config.componentsPath);
         for (const file of component.files) {
-          const targetPath = path4.join(targetDir, file.name);
-          if (await fs4.pathExists(targetPath) && !options.overwrite) {
+          const targetPath = path5.join(targetDir, file.name);
+          if (await fs5.pathExists(targetPath) && !options.overwrite) {
             spinner.warn(`${file.name} already exists (use --overwrite)`);
             continue;
           }
-          await fs4.ensureDir(targetDir);
-          const transformedContent = transformImports(file.content, config);
-          await fs4.writeFile(targetPath, transformedContent);
+          await fs5.ensureDir(targetDir);
+          const transformedContent = transformImports2(file.content, config);
+          await fs5.writeFile(targetPath, transformedContent);
         }
         spinner.succeed(`Added ${componentName}`);
         if (component.dependencies?.length) {
@@ -639,11 +839,6 @@ var addCommand = new Command2().name("add").description("Add a component to your
         if (component.devDependencies?.length) {
           allDevDependencies.push(...component.devDependencies);
         }
-        if (component.registryDependencies?.length) {
-          console.log(
-            chalk3.dim(`     Requires: ${component.registryDependencies.join(", ")}`)
-          );
-        }
       } catch (error) {
         spinner.fail(`Failed to add ${componentName}`);
         console.error(chalk3.dim(String(error)));
@@ -669,7 +864,7 @@ var addCommand = new Command2().name("add").description("Add a component to your
     process.exit(1);
   }
 });
-function transformImports(code, config) {
+function transformImports2(code, config) {
   let transformed = code;
   const utilsAlias = config.aliases?.utils || "@/lib/utils";
   if (utilsAlias === "@/lib/utils") {
@@ -686,7 +881,15 @@ function transformImports(code, config) {
 import { Command as Command3 } from "commander";
 import chalk4 from "chalk";
 import ora3 from "ora";
-var listCommand = new Command3().name("list").description("List available components").option("-c, --category <category>", "Filter by category").action(async (options) => {
+import path6 from "path";
+var listCommand = new Command3().name("list").description("List available or installed components").option("-c, --category <category>", "Filter by category").option("-i, --installed", "Show installed components and their sync status").option("--cwd <path>", "Working directory", process.cwd()).action(async (options) => {
+  if (options.installed) {
+    await listInstalledComponents(options);
+  } else {
+    await listAvailableComponents(options);
+  }
+});
+async function listAvailableComponents(options) {
   const spinner = ora3("Fetching components...").start();
   try {
     const registry = await getRegistry();
@@ -714,20 +917,113 @@ var listCommand = new Command3().name("list").description("List available compon
       }
       console.log();
     }
-    console.log(chalk4.dim("Add a component: npx nativeui add <component>"));
+    console.log(chalk4.dim("Add a component: npx mcellui add <component>"));
     console.log();
   } catch (error) {
     spinner.fail("Failed to fetch components");
     console.error(error);
     process.exit(1);
   }
-});
+}
+async function listInstalledComponents(options) {
+  const spinner = ora3();
+  try {
+    const cwd = path6.resolve(options.cwd || process.cwd());
+    const projectRoot = await getProjectRoot(cwd);
+    if (!projectRoot) {
+      console.log(chalk4.red("Could not find a valid project."));
+      console.log(chalk4.dim("Run `npx mcellui init` first."));
+      process.exit(1);
+    }
+    const config = await getConfig(projectRoot);
+    if (!config) {
+      console.log(chalk4.red("Project not initialized."));
+      console.log(chalk4.dim("Run `npx mcellui init` first."));
+      process.exit(1);
+    }
+    spinner.start("Scanning installed components...");
+    const componentsDir = path6.join(projectRoot, config.componentsPath);
+    const installedFiles = await getInstalledFiles(componentsDir);
+    if (installedFiles.length === 0) {
+      spinner.info("No components installed yet.");
+      console.log(chalk4.dim("\nAdd components with: npx mcellui add <component>"));
+      return;
+    }
+    spinner.text = "Fetching registry...";
+    const registry = await getRegistry();
+    spinner.text = "Comparing components...";
+    const installed = await getInstallStatus(installedFiles, registry, config);
+    spinner.stop();
+    const identical = installed.filter((c) => c.status === "identical");
+    const modified = installed.filter((c) => c.status === "modified");
+    const localOnly = installed.filter((c) => c.status === "local-only");
+    const installedNames = new Set(installed.map((c) => c.name));
+    const notInstalled = registry.filter((item) => !installedNames.has(item.name));
+    console.log();
+    console.log(chalk4.bold(`Installed Components (${installed.length})`));
+    console.log();
+    const categories = /* @__PURE__ */ new Map();
+    for (const comp of installed) {
+      const registryItem = registry.find((r) => r.name === comp.name);
+      const category = registryItem?.category || "Custom";
+      if (!categories.has(category)) {
+        categories.set(category, []);
+      }
+      categories.get(category).push(comp);
+    }
+    for (const [category, components] of categories) {
+      console.log(chalk4.cyan.bold(category));
+      for (const comp of components) {
+        let statusIcon;
+        let statusText;
+        switch (comp.status) {
+          case "identical":
+            statusIcon = chalk4.green("\u2713");
+            statusText = chalk4.dim("(up to date)");
+            break;
+          case "modified":
+            statusIcon = chalk4.yellow("\u26A0");
+            statusText = chalk4.yellow("(modified locally)");
+            break;
+          case "local-only":
+            statusIcon = chalk4.blue("?");
+            statusText = chalk4.dim("(custom component)");
+            break;
+        }
+        console.log(`  ${statusIcon} ${chalk4.white(comp.name)}  ${statusText}`);
+      }
+      console.log();
+    }
+    if (notInstalled.length > 0) {
+      console.log(chalk4.dim("Not Installed"));
+      const notInstalledNames = notInstalled.map((c) => c.name).slice(0, 10);
+      const remaining = notInstalled.length - 10;
+      console.log(chalk4.dim(`  ${notInstalledNames.join(", ")}${remaining > 0 ? `, ... +${remaining} more` : ""}`));
+      console.log();
+    }
+    console.log(chalk4.dim("\u2500".repeat(50)));
+    const parts = [];
+    if (identical.length > 0) parts.push(chalk4.green(`${identical.length} up to date`));
+    if (modified.length > 0) parts.push(chalk4.yellow(`${modified.length} modified`));
+    if (localOnly.length > 0) parts.push(chalk4.blue(`${localOnly.length} custom`));
+    console.log(parts.join("  \u2022  "));
+    if (modified.length > 0) {
+      console.log();
+      console.log(chalk4.dim("Sync modified components:"));
+      console.log(chalk4.cyan(`  npx mcellui diff`));
+    }
+  } catch (error) {
+    spinner.fail("Failed to list installed components");
+    console.error(error);
+    process.exit(1);
+  }
+}
 
 // src/commands/doctor.ts
 import { Command as Command4 } from "commander";
 import chalk5 from "chalk";
-import fs5 from "fs-extra";
-import path5 from "path";
+import fs6 from "fs-extra";
+import path7 from "path";
 var REQUIRED_PEER_DEPS = [
   { name: "react-native-reanimated", minVersion: "3.0.0" },
   { name: "react-native-gesture-handler", minVersion: "2.0.0" },
@@ -796,7 +1092,7 @@ async function checkInitialized(projectRoot) {
   ];
   let foundConfig = null;
   for (const file of configFiles) {
-    if (await fs5.pathExists(path5.join(projectRoot, file))) {
+    if (await fs6.pathExists(path7.join(projectRoot, file))) {
       foundConfig = file;
       break;
     }
@@ -810,8 +1106,8 @@ async function checkInitialized(projectRoot) {
     };
   }
   try {
-    const configPath = path5.join(projectRoot, foundConfig);
-    const content = await fs5.readFile(configPath, "utf-8");
+    const configPath = path7.join(projectRoot, foundConfig);
+    const content = await fs6.readFile(configPath, "utf-8");
     if (foundConfig.endsWith(".ts") || foundConfig.endsWith(".js")) {
       const hasDefineConfig = content.includes("defineConfig");
       const hasExport = content.includes("export default");
@@ -865,10 +1161,10 @@ async function checkPaths(projectRoot) {
   let utilsPathValue = defaultUtilsPath;
   const configFiles = ["nativeui.config.ts", "nativeui.config.js", "nativeui.config.json"];
   for (const file of configFiles) {
-    const configPath = path5.join(projectRoot, file);
-    if (await fs5.pathExists(configPath)) {
+    const configPath = path7.join(projectRoot, file);
+    if (await fs6.pathExists(configPath)) {
       try {
-        const content = await fs5.readFile(configPath, "utf-8");
+        const content = await fs6.readFile(configPath, "utf-8");
         const componentsMatch = content.match(/componentsPath:\s*['"]([^'"]+)['"]/);
         const utilsMatch = content.match(/utilsPath:\s*['"]([^'"]+)['"]/);
         if (componentsMatch) componentsPathValue = componentsMatch[1];
@@ -878,10 +1174,10 @@ async function checkPaths(projectRoot) {
       break;
     }
   }
-  const componentsPath = path5.join(projectRoot, componentsPathValue);
-  const utilsPath = path5.join(projectRoot, utilsPathValue);
-  const componentsExist = await fs5.pathExists(componentsPath);
-  const utilsExist = await fs5.pathExists(utilsPath);
+  const componentsPath = path7.join(projectRoot, componentsPathValue);
+  const utilsPath = path7.join(projectRoot, utilsPathValue);
+  const componentsExist = await fs6.pathExists(componentsPath);
+  const utilsExist = await fs6.pathExists(utilsPath);
   if (!componentsExist && !utilsExist) {
     return {
       name: "Component Paths",
@@ -978,10 +1274,10 @@ async function checkBabelConfig(projectRoot) {
   let babelConfigPath = null;
   let babelContent = null;
   for (const configFile of babelConfigPaths) {
-    const fullPath = path5.join(projectRoot, configFile);
-    if (await fs5.pathExists(fullPath)) {
+    const fullPath = path7.join(projectRoot, configFile);
+    if (await fs6.pathExists(fullPath)) {
       babelConfigPath = configFile;
-      babelContent = await fs5.readFile(fullPath, "utf-8");
+      babelContent = await fs6.readFile(fullPath, "utf-8");
       break;
     }
   }
@@ -1009,8 +1305,8 @@ async function checkBabelConfig(projectRoot) {
   };
 }
 async function checkTypeScript(projectRoot) {
-  const tsconfigPath = path5.join(projectRoot, "tsconfig.json");
-  if (!await fs5.pathExists(tsconfigPath)) {
+  const tsconfigPath = path7.join(projectRoot, "tsconfig.json");
+  if (!await fs6.pathExists(tsconfigPath)) {
     return {
       name: "TypeScript",
       status: "warn",
@@ -1019,7 +1315,7 @@ async function checkTypeScript(projectRoot) {
     };
   }
   try {
-    const tsconfig = await fs5.readJson(tsconfigPath);
+    const tsconfig = await fs6.readJson(tsconfigPath);
     const hasPathAliases = tsconfig.compilerOptions?.paths;
     if (!hasPathAliases) {
       return {
@@ -1125,7 +1421,7 @@ function printReport(report) {
 }
 var doctorCommand = new Command4().name("doctor").description("Check project setup and diagnose common issues").option("--cwd <path>", "Working directory", process.cwd()).option("--json", "Output results as JSON").action(async (options) => {
   try {
-    const cwd = path5.resolve(options.cwd);
+    const cwd = path7.resolve(options.cwd);
     const projectRoot = await getProjectRoot(cwd);
     if (!projectRoot) {
       console.log(chalk5.red("Could not find a valid project."));
@@ -1177,31 +1473,31 @@ var doctorCommand = new Command4().name("doctor").description("Check project set
 import { Command as Command5 } from "commander";
 import chalk6 from "chalk";
 import ora4 from "ora";
-import fs6 from "fs-extra";
-import path6 from "path";
-import crypto from "crypto";
-var diffCommand = new Command5().name("diff").description("Check for component updates against the registry").option("--cwd <path>", "Working directory", process.cwd()).option("--json", "Output as JSON").option("-v, --verbose", "Show detailed diff information").action(async (options) => {
+import fs7 from "fs-extra";
+import path8 from "path";
+import * as Diff from "diff";
+var diffCommand = new Command5().name("diff").description("Compare locally installed components against the registry source").argument("[components...]", "Component names to diff (optional, diffs all if omitted)").option("--cwd <path>", "Working directory", process.cwd()).option("--list", "Only list components with differences").option("--json", "Output as JSON").action(async (components, options) => {
   const spinner = ora4();
   try {
-    const cwd = path6.resolve(options.cwd);
+    const cwd = path8.resolve(options.cwd);
     const projectRoot = await getProjectRoot(cwd);
     if (!projectRoot) {
       console.log(chalk6.red("Could not find a valid project."));
-      console.log(chalk6.dim("Run `npx nativeui init` first."));
+      console.log(chalk6.dim("Run `npx mcellui init` first."));
       process.exit(1);
     }
     const config = await getConfig(projectRoot);
     if (!config) {
       console.log(chalk6.red("Project not initialized."));
-      console.log(chalk6.dim("Run `npx nativeui init` first."));
+      console.log(chalk6.dim("Run `npx mcellui init` first."));
       process.exit(1);
     }
     spinner.start("Scanning installed components...");
-    const componentsDir = path6.join(projectRoot, config.componentsPath);
-    const installedFiles = await getInstalledComponents(componentsDir);
+    const componentsDir = path8.join(projectRoot, config.componentsPath);
+    const installedFiles = await getInstalledFiles(componentsDir);
     if (installedFiles.length === 0) {
       spinner.info("No components installed yet.");
-      console.log(chalk6.dim("\nAdd components with: npx nativeui add <component>"));
+      console.log(chalk6.dim("\nAdd components with: npx mcellui add <component>"));
       return;
     }
     spinner.text = "Fetching registry...";
@@ -1209,18 +1505,34 @@ var diffCommand = new Command5().name("diff").description("Check for component u
     const registryMap = /* @__PURE__ */ new Map();
     for (const item of registry) {
       for (const file of item.files) {
-        const fileName = path6.basename(file);
+        const fileName = path8.basename(file);
         registryMap.set(fileName, item);
       }
     }
+    let filesToCompare = installedFiles;
+    if (components.length > 0) {
+      const componentFileNames = components.map((c) => {
+        return c.endsWith(".tsx") ? c : `${c}.tsx`;
+      });
+      filesToCompare = installedFiles.filter((file) => {
+        const fileName = path8.basename(file);
+        return componentFileNames.includes(fileName);
+      });
+      if (filesToCompare.length === 0) {
+        spinner.fail(`None of the specified components found: ${components.join(", ")}`);
+        process.exit(1);
+      }
+    }
     spinner.text = "Comparing components...";
     const results = [];
-    for (const localFile of installedFiles) {
-      const fileName = path6.basename(localFile);
+    for (const localFile of filesToCompare) {
+      const fileName = path8.basename(localFile);
+      const componentName = fileName.replace(/\.tsx?$/, "");
       const registryItem = registryMap.get(fileName);
       if (!registryItem) {
         results.push({
-          name: fileName.replace(/\.tsx?$/, ""),
+          name: componentName,
+          fileName,
           status: "local-only",
           localFile
         });
@@ -1231,6 +1543,7 @@ var diffCommand = new Command5().name("diff").description("Check for component u
         if (!component) {
           results.push({
             name: registryItem.name,
+            fileName,
             status: "error",
             error: "Failed to fetch from registry"
           });
@@ -1240,31 +1553,44 @@ var diffCommand = new Command5().name("diff").description("Check for component u
         if (!registryFile) {
           results.push({
             name: registryItem.name,
+            fileName,
             status: "error",
             error: "File not found in registry"
           });
           continue;
         }
-        const localContent = await fs6.readFile(localFile, "utf-8");
-        const transformedRegistryContent = transformImports2(registryFile.content, config);
-        const localHash = hashContent(localContent);
-        const registryHash = hashContent(transformedRegistryContent);
-        if (localHash === registryHash) {
+        const localContent = await fs7.readFile(localFile, "utf-8");
+        const normalizedLocal = normalizeContent(localContent);
+        const normalizedRegistry = normalizeContent(
+          transformImports(registryFile.content, config)
+        );
+        if (normalizedLocal === normalizedRegistry) {
           results.push({
             name: registryItem.name,
-            status: "up-to-date",
+            fileName,
+            status: "identical",
             localFile
           });
         } else {
+          const diffOutput = Diff.createPatch(
+            fileName,
+            normalizedRegistry,
+            normalizedLocal,
+            "registry",
+            "local"
+          );
           results.push({
             name: registryItem.name,
-            status: "changed",
-            localFile
+            fileName,
+            status: "modified",
+            localFile,
+            diff: diffOutput
           });
         }
       } catch (error) {
         results.push({
           name: registryItem.name,
+          fileName,
           status: "error",
           error: String(error)
         });
@@ -1273,100 +1599,71 @@ var diffCommand = new Command5().name("diff").description("Check for component u
     spinner.stop();
     if (options.json) {
       console.log(JSON.stringify(results, null, 2));
-      return;
+      const hasChanges2 = results.some((r) => r.status === "modified");
+      process.exit(hasChanges2 ? 1 : 0);
     }
-    printResults(results, options.verbose);
+    printResults(results, options.list);
+    const hasChanges = results.some((r) => r.status === "modified");
+    process.exit(hasChanges ? 1 : 0);
   } catch (error) {
-    spinner.fail("Failed to check for updates");
+    spinner.fail("Failed to diff components");
     console.error(error);
     process.exit(1);
   }
 });
-async function getInstalledComponents(componentsDir) {
-  if (!await fs6.pathExists(componentsDir)) {
-    return [];
-  }
-  const files = await fs6.readdir(componentsDir);
-  const componentFiles = [];
-  for (const file of files) {
-    if (file.endsWith(".tsx") || file.endsWith(".ts")) {
-      if (file === "index.ts" || file === "index.tsx") {
-        continue;
-      }
-      componentFiles.push(path6.join(componentsDir, file));
-    }
-  }
-  return componentFiles;
-}
-function hashContent(content) {
-  const normalized = content.replace(/\r\n/g, "\n").replace(/\s+$/gm, "").trim();
-  return crypto.createHash("md5").update(normalized).digest("hex");
-}
-function transformImports2(code, config) {
-  let transformed = code;
-  const utilsAlias = config.aliases?.utils || "@/lib/utils";
-  if (utilsAlias === "@/lib/utils") {
-    return transformed;
-  }
-  transformed = transformed.replace(
-    /from ['"]@\/lib\/utils['"]/g,
-    `from '${utilsAlias}'`
-  );
-  return transformed;
-}
-function printResults(results, verbose) {
-  const upToDate = results.filter((r) => r.status === "up-to-date");
-  const changed = results.filter((r) => r.status === "changed");
+function printResults(results, listOnly) {
+  const identical = results.filter((r) => r.status === "identical");
+  const modified = results.filter((r) => r.status === "modified");
   const localOnly = results.filter((r) => r.status === "local-only");
   const errors = results.filter((r) => r.status === "error");
   console.log();
-  console.log(chalk6.bold("Component Diff Report"));
-  console.log(chalk6.dim("\u2500".repeat(40)));
-  console.log();
-  const total = results.length;
-  console.log(`Found ${chalk6.bold(total)} installed component${total !== 1 ? "s" : ""}`);
+  console.log(chalk6.bold("Comparing components..."));
   console.log();
-  if (changed.length > 0) {
-    console.log(chalk6.yellow(`\u26A1 ${changed.length} update${changed.length !== 1 ? "s" : ""} available:`));
-    for (const item of changed) {
-      console.log(`   ${chalk6.yellow("\u25CF")} ${item.name}`);
-    }
-    console.log();
-    console.log(chalk6.dim("   Update with: npx nativeui add <component> --overwrite"));
-    console.log();
-  }
-  if (upToDate.length > 0) {
-    console.log(chalk6.green(`\u2713 ${upToDate.length} up to date:`));
-    if (verbose) {
-      for (const item of upToDate) {
-        console.log(`   ${chalk6.green("\u25CF")} ${item.name}`);
-      }
-    } else {
-      const names = upToDate.map((r) => r.name).join(", ");
-      console.log(chalk6.dim(`   ${names}`));
+  for (const result of results) {
+    switch (result.status) {
+      case "identical":
+        console.log(`${chalk6.green("\u2713")} ${result.fileName}    ${chalk6.dim("(identical)")}`);
+        break;
+      case "modified":
+        console.log(`${chalk6.red("\u2717")} ${result.fileName}      ${chalk6.yellow("(modified)")}`);
+        if (!listOnly && result.diff) {
+          printColoredDiff(result.diff);
+        }
+        break;
+      case "local-only":
+        console.log(`${chalk6.yellow("\u26A0")} ${result.fileName}    ${chalk6.dim("(not in registry)")}`);
+        break;
+      case "error":
+        console.log(`${chalk6.red("!")} ${result.fileName}    ${chalk6.red(`(error: ${result.error})`)}`);
+        break;
     }
-    console.log();
   }
-  if (localOnly.length > 0) {
-    console.log(chalk6.blue(`\u25D0 ${localOnly.length} local-only (not in registry):`));
-    for (const item of localOnly) {
-      console.log(`   ${chalk6.blue("\u25CF")} ${item.name}`);
-    }
+  console.log();
+  const parts = [];
+  if (identical.length > 0) parts.push(`${identical.length} identical`);
+  if (modified.length > 0) parts.push(`${modified.length} modified`);
+  if (localOnly.length > 0) parts.push(`${localOnly.length} custom`);
+  if (errors.length > 0) parts.push(`${errors.length} errors`);
+  console.log(chalk6.dim(`Summary: ${parts.join(", ")}`));
+  if (modified.length > 0) {
     console.log();
+    console.log(chalk6.dim("Update modified components with:"));
+    console.log(chalk6.cyan(`  npx mcellui add ${modified.map((m) => m.name).join(" ")} --overwrite`));
   }
-  if (errors.length > 0) {
-    console.log(chalk6.red(`\u2717 ${errors.length} error${errors.length !== 1 ? "s" : ""}:`));
-    for (const item of errors) {
-      console.log(`   ${chalk6.red("\u25CF")} ${item.name}: ${chalk6.dim(item.error)}`);
+}
+function printColoredDiff(diffOutput) {
+  const lines = diffOutput.split("\n");
+  const contentLines = lines.slice(4);
+  for (const line of contentLines) {
+    if (line.startsWith("+") && !line.startsWith("+++")) {
+      console.log(chalk6.green(`    ${line}`));
+    } else if (line.startsWith("-") && !line.startsWith("---")) {
+      console.log(chalk6.red(`    ${line}`));
+    } else if (line.startsWith("@@")) {
+      console.log(chalk6.cyan(`    ${line}`));
+    } else if (line.trim()) {
+      console.log(chalk6.dim(`    ${line}`));
     }
-    console.log();
-  }
-  if (changed.length === 0 && errors.length === 0) {
-    console.log(chalk6.green("All registry components are up to date!"));
-  } else if (changed.length > 0) {
-    console.log(
-      chalk6.yellow(`Run ${chalk6.cyan("npx nativeui add " + changed.map((c) => c.name).join(" ") + " --overwrite")} to update`)
-    );
   }
 }
 
@@ -1375,13 +1672,13 @@ import { Command as Command6 } from "commander";
 import chalk7 from "chalk";
 import ora5 from "ora";
 import prompts3 from "prompts";
-import fs7 from "fs-extra";
-import path7 from "path";
-import crypto2 from "crypto";
+import fs8 from "fs-extra";
+import path9 from "path";
+import crypto from "crypto";
 var updateCommand = new Command6().name("update").description("Update installed components to latest registry versions").argument("[components...]", "Specific components to update (default: all outdated)").option("-y, --yes", "Skip confirmation prompt").option("--all", "Update all components (including up-to-date)").option("--dry-run", "Show what would be updated without making changes").option("--cwd <path>", "Working directory", process.cwd()).action(async (components, options) => {
   const spinner = ora5();
   try {
-    const cwd = path7.resolve(options.cwd);
+    const cwd = path9.resolve(options.cwd);
     const projectRoot = await getProjectRoot(cwd);
     if (!projectRoot) {
       console.log(chalk7.red("Could not find a valid project."));
@@ -1395,7 +1692,7 @@ var updateCommand = new Command6().name("update").description("Update installed
       process.exit(1);
     }
     spinner.start("Checking for updates...");
-    const componentsDir = path7.join(projectRoot, config.componentsPath);
+    const componentsDir = path9.join(projectRoot, config.componentsPath);
     const diffs = await getComponentDiffs(componentsDir, config);
     if (diffs.length === 0) {
       spinner.info("No components installed yet.");
@@ -1457,12 +1754,12 @@ var updateCommand = new Command6().name("update").description("Update installed
           failCount++;
           continue;
         }
-        const targetDir = path7.join(projectRoot, config.componentsPath);
+        const targetDir = path9.join(projectRoot, config.componentsPath);
         for (const file of component.files) {
-          const targetPath = path7.join(targetDir, file.name);
-          await fs7.ensureDir(targetDir);
+          const targetPath = path9.join(targetDir, file.name);
+          await fs8.ensureDir(targetDir);
           const transformedContent = transformImports3(file.content, config);
-          await fs7.writeFile(targetPath, transformedContent);
+          await fs8.writeFile(targetPath, transformedContent);
         }
         spinner.succeed(`Updated ${comp.name}`);
         successCount++;
@@ -1503,18 +1800,18 @@ var updateCommand = new Command6().name("update").description("Update installed
   }
 });
 async function getComponentDiffs(componentsDir, config) {
-  if (!await fs7.pathExists(componentsDir)) {
+  if (!await fs8.pathExists(componentsDir)) {
     return [];
   }
   const registry = await getRegistry();
   const registryMap = /* @__PURE__ */ new Map();
   for (const item of registry) {
     for (const file of item.files) {
-      const fileName = path7.basename(file);
+      const fileName = path9.basename(file);
       registryMap.set(fileName, item);
     }
   }
-  const files = await fs7.readdir(componentsDir);
+  const files = await fs8.readdir(componentsDir);
   const results = [];
   for (const file of files) {
     if (!file.endsWith(".tsx") && !file.endsWith(".ts")) {
@@ -1527,7 +1824,7 @@ async function getComponentDiffs(componentsDir, config) {
     if (!registryItem) {
       continue;
     }
-    const localFile = path7.join(componentsDir, file);
+    const localFile = path9.join(componentsDir, file);
     const hasUpdate = await checkForUpdate(localFile, registryItem, config);
     results.push({
       name: registryItem.name,
@@ -1541,21 +1838,21 @@ async function checkForUpdate(localFile, registryItem, config) {
   try {
     const component = await fetchComponent(registryItem.name);
     if (!component) return false;
-    const fileName = path7.basename(localFile);
+    const fileName = path9.basename(localFile);
     const registryFile = component.files.find((f) => f.name === fileName);
     if (!registryFile) return false;
-    const localContent = await fs7.readFile(localFile, "utf-8");
+    const localContent = await fs8.readFile(localFile, "utf-8");
     const transformedRegistryContent = transformImports3(registryFile.content, config);
-    const localHash = hashContent2(localContent);
-    const registryHash = hashContent2(transformedRegistryContent);
+    const localHash = hashContent(localContent);
+    const registryHash = hashContent(transformedRegistryContent);
     return localHash !== registryHash;
   } catch {
     return false;
   }
 }
-function hashContent2(content) {
+function hashContent(content) {
   const normalized = content.replace(/\r\n/g, "\n").replace(/\s+$/gm, "").trim();
-  return crypto2.createHash("md5").update(normalized).digest("hex");
+  return crypto.createHash("md5").update(normalized).digest("hex");
 }
 function transformImports3(code, config) {
   let transformed = code;
@@ -1575,12 +1872,12 @@ import { Command as Command7 } from "commander";
 import chalk8 from "chalk";
 import ora6 from "ora";
 import prompts4 from "prompts";
-import fs8 from "fs-extra";
-import path8 from "path";
+import fs9 from "fs-extra";
+import path10 from "path";
 var createCommand = new Command7().name("create").description("Scaffold a new custom component").argument("<name>", "Component name (e.g., my-button, ProfileCard)").option("-t, --template <type>", "Component template: basic, animated, pressable, input", "basic").option("--forward-ref", "Include forwardRef pattern").option("-y, --yes", "Skip confirmation").option("--cwd <path>", "Working directory", process.cwd()).action(async (name, options) => {
   const spinner = ora6();
   try {
-    const cwd = path8.resolve(options.cwd);
+    const cwd = path10.resolve(options.cwd);
     const projectRoot = await getProjectRoot(cwd);
     if (!projectRoot) {
       console.log(chalk8.red("Could not find a valid project."));
@@ -1595,9 +1892,9 @@ var createCommand = new Command7().name("create").description("Scaffold a new cu
     }
     const componentName = toPascalCase(name);
     const fileName = toKebabCase(name) + ".tsx";
-    const targetDir = path8.join(projectRoot, config.componentsPath);
-    const targetPath = path8.join(targetDir, fileName);
-    if (await fs8.pathExists(targetPath)) {
+    const targetDir = path10.join(projectRoot, config.componentsPath);
+    const targetPath = path10.join(targetDir, fileName);
+    if (await fs9.pathExists(targetPath)) {
       console.log(chalk8.red(`Component already exists: ${fileName}`));
       console.log(chalk8.dim(`Path: ${targetPath}`));
       process.exit(1);
@@ -1624,8 +1921,8 @@ var createCommand = new Command7().name("create").description("Scaffold a new cu
     }
     spinner.start("Creating component...");
     const code = generateComponent(componentName, options.template, options.forwardRef);
-    await fs8.ensureDir(targetDir);
-    await fs8.writeFile(targetPath, code);
+    await fs9.ensureDir(targetDir);
+    await fs9.writeFile(targetPath, code);
     spinner.succeed(`Created ${fileName}`);
     console.log();
     console.log(chalk8.bold("Next steps:"));
@@ -2281,8 +2578,8 @@ import { Command as Command8 } from "commander";
 import chalk9 from "chalk";
 import prompts5 from "prompts";
 import ora7 from "ora";
-import fs9 from "fs-extra";
-import path9 from "path";
+import fs10 from "fs-extra";
+import path11 from "path";
 function groupByCategory(items) {
   const groups = {};
   for (const item of items) {
@@ -2353,7 +2650,7 @@ function transformImports4(code, config) {
 }
 var pickCommand = new Command8().name("pick").description("Interactively browse and select components to add").option("--all", "Show all components without category selection").option("-o, --overwrite", "Overwrite existing files").option("--cwd <path>", "Working directory", process.cwd()).action(async (options) => {
   console.log(chalk9.bold("\n\u{1F3A8} nativeui Component Picker\n"));
-  const cwd = path9.resolve(options.cwd);
+  const cwd = path11.resolve(options.cwd);
   const projectRoot = await getProjectRoot(cwd);
   if (!projectRoot) {
     console.log(chalk9.red("Could not find a valid project."));
@@ -2372,10 +2669,10 @@ var pickCommand = new Command8().name("pick").description("Interactively browse
     return;
   }
   spinner.succeed(`Loaded ${registry.length} components`);
-  const componentsDir = path9.join(projectRoot, config.componentsPath);
+  const componentsDir = path11.join(projectRoot, config.componentsPath);
   const installed = /* @__PURE__ */ new Set();
-  if (fs9.existsSync(componentsDir)) {
-    const files = fs9.readdirSync(componentsDir);
+  if (fs10.existsSync(componentsDir)) {
+    const files = fs10.readdirSync(componentsDir);
     for (const file of files) {
       if (file.endsWith(".tsx")) {
         installed.add(file.replace(".tsx", ""));
@@ -2458,16 +2755,16 @@ ${installed.size} already installed, ${availableCount} available
         installSpinner.fail(`Component "${name}" not found`);
         continue;
       }
-      const targetDir = path9.join(projectRoot, config.componentsPath);
+      const targetDir = path11.join(projectRoot, config.componentsPath);
       for (const file of component.files) {
-        const targetPath = path9.join(targetDir, file.name);
-        if (await fs9.pathExists(targetPath) && !options.overwrite) {
+        const targetPath = path11.join(targetDir, file.name);
+        if (await fs10.pathExists(targetPath) && !options.overwrite) {
           installSpinner.warn(`${name}: ${file.name} already exists (use --overwrite)`);
           continue;
         }
-        await fs9.ensureDir(targetDir);
+        await fs10.ensureDir(targetDir);
         const transformedContent = transformImports4(file.content, config);
-        await fs9.writeFile(targetPath, transformedContent);
+        await fs10.writeFile(targetPath, transformedContent);
       }
       installSpinner.succeed(`Installed ${chalk9.green(name)}`);
       successCount++;

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@metacells/mcellui-cli",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "CLI for mcellui - add beautiful, accessible UI components to your Expo/React Native project",
   "author": "metacells",
   "license": "MIT",
   "homepage": "https://mcellui.dev",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/metacells/mcellui.git",
+    "url": "git+https://github.com/metacells-development/mcellui.git",
     "directory": "packages/cli"
   },
   "bugs": {
-    "url": "https://github.com/metacells/mcellui/issues"
+    "url": "https://github.com/metacells-development/mcellui/issues"
   },
   "keywords": [
     "react-native",
@@ -43,6 +43,7 @@
   "dependencies": {
     "commander": "^12.0.0",
     "chalk": "^5.3.0",
+    "diff": "^7.0.0",
     "ora": "^8.0.0",
     "prompts": "^2.4.2",
     "fs-extra": "^11.2.0",
@@ -52,6 +53,7 @@
     "zod": "^3.23.0"
   },
   "devDependencies": {
+    "@types/diff": "^6.0.0",
     "@types/fs-extra": "^11.0.0",
     "@types/node": "^20.0.0",
     "@types/prompts": "^2.4.0",