@metacells/mcellui-cli 0.1.0

package/dist/index.js

@@ -0,0 +1,2529 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { Command as Command9 } from "commander";
+
+// src/commands/init.ts
+import { Command } from "commander";
+import chalk2 from "chalk";
+import ora from "ora";
+import prompts from "prompts";
+import fs2 from "fs-extra";
+import path2 from "path";
+
+// src/utils/project.ts
+import fs from "fs-extra";
+import path from "path";
+import { fileURLToPath } from "url";
+import createJiti from "jiti";
+import chalk from "chalk";
+
+// src/utils/config-schema.ts
+import { z } from "zod";
+var themePresetSchema = z.enum([
+  "zinc",
+  "slate",
+  "stone",
+  "blue",
+  "green",
+  "rose",
+  "orange",
+  "violet"
+]);
+var radiusPresetSchema = z.enum(["none", "sm", "md", "lg", "full"]);
+var colorSchemeSchema = z.enum(["light", "dark", "system"]);
+var stylePresetSchema = z.enum(["default", "ios", "material"]);
+var hexColorSchema = z.string().regex(
+  /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,
+  "Must be a valid hex color (e.g., #ff0000 or #f00)"
+);
+var optionalHexColorSchema = hexColorSchema.optional();
+var themeColorsSchema = z.object({
+  background: optionalHexColorSchema,
+  foreground: optionalHexColorSchema,
+  backgroundSubtle: optionalHexColorSchema,
+  foregroundMuted: optionalHexColorSchema,
+  card: optionalHexColorSchema,
+  cardForeground: optionalHexColorSchema,
+  primary: optionalHexColorSchema,
+  primaryForeground: optionalHexColorSchema,
+  secondary: optionalHexColorSchema,
+  secondaryForeground: optionalHexColorSchema,
+  muted: optionalHexColorSchema,
+  mutedForeground: optionalHexColorSchema,
+  accent: optionalHexColorSchema,
+  accentForeground: optionalHexColorSchema,
+  destructive: optionalHexColorSchema,
+  destructiveForeground: optionalHexColorSchema,
+  border: optionalHexColorSchema,
+  input: optionalHexColorSchema,
+  ring: optionalHexColorSchema,
+  success: optionalHexColorSchema,
+  warning: optionalHexColorSchema
+}).partial();
+var fontsSchema = z.object({
+  sans: z.string().optional(),
+  heading: z.string().optional(),
+  mono: z.string().optional()
+}).partial();
+var componentOverridesSchema = z.object({
+  button: z.object({
+    defaultVariant: z.enum(["default", "secondary", "outline", "ghost", "destructive"]).optional(),
+    defaultSize: z.enum(["sm", "md", "lg"]).optional()
+  }).optional(),
+  input: z.object({
+    defaultSize: z.enum(["sm", "md", "lg"]).optional()
+  }).optional(),
+  card: z.object({
+    defaultVariant: z.enum(["default", "elevated", "outlined"]).optional()
+  }).optional(),
+  badge: z.object({
+    defaultVariant: z.enum(["default", "secondary", "destructive", "outline"]).optional(),
+    defaultSize: z.enum(["sm", "md", "lg"]).optional()
+  }).optional(),
+  avatar: z.object({
+    defaultSize: z.enum(["xs", "sm", "md", "lg", "xl"]).optional()
+  }).optional()
+}).partial();
+var pathSchema = z.string().refine(
+  (val) => val.startsWith("./") || val.startsWith("../"),
+  "Path must be relative (start with ./ or ../)"
+);
+var aliasesSchema = z.object({
+  components: z.string().optional(),
+  utils: z.string().optional()
+}).partial();
+var nativeUIConfigSchema = z.object({
+  // Runtime Configuration
+  theme: themePresetSchema.optional(),
+  radius: radiusPresetSchema.optional(),
+  colorScheme: colorSchemeSchema.optional(),
+  colors: themeColorsSchema.optional(),
+  lightColors: themeColorsSchema.optional(),
+  darkColors: themeColorsSchema.optional(),
+  fonts: fontsSchema.optional(),
+  haptics: z.boolean().optional(),
+  components: componentOverridesSchema.optional(),
+  // CLI Configuration
+  componentsPath: pathSchema.optional(),
+  utilsPath: pathSchema.optional(),
+  style: stylePresetSchema.optional(),
+  aliases: aliasesSchema.optional()
+}).strict();
+function validateConfig(config) {
+  const result = nativeUIConfigSchema.safeParse(config);
+  if (result.success) {
+    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;
+  });
+  return { success: false, errors };
+}
+function validateConfigOrThrow(config, configPath) {
+  const result = validateConfig(config);
+  if (!result.success) {
+    const errorList = result.errors.map((e) => `  - ${e}`).join("\n");
+    throw new Error(
+      `Invalid configuration in ${configPath}:
+${errorList}
+
+See https://nativeui.dev/docs/config for valid options.`
+    );
+  }
+  return result.data;
+}
+
+// src/utils/config.ts
+var defaultConfig = {
+  // Runtime defaults
+  theme: "zinc",
+  radius: "md",
+  colorScheme: "system",
+  colors: {},
+  lightColors: {},
+  darkColors: {},
+  fonts: {},
+  haptics: true,
+  animationPreset: "subtle",
+  components: {},
+  // CLI defaults
+  componentsPath: "./components/ui",
+  utilsPath: "./lib/utils",
+  style: "default",
+  aliases: {
+    components: "@/components",
+    utils: "@/lib/utils"
+  }
+};
+function resolveConfig(config = {}) {
+  return {
+    theme: config.theme ?? defaultConfig.theme,
+    radius: config.radius ?? defaultConfig.radius,
+    colorScheme: config.colorScheme ?? defaultConfig.colorScheme,
+    colors: config.colors ?? defaultConfig.colors,
+    lightColors: config.lightColors ?? defaultConfig.lightColors,
+    darkColors: config.darkColors ?? defaultConfig.darkColors,
+    fonts: config.fonts ?? defaultConfig.fonts,
+    haptics: config.haptics ?? defaultConfig.haptics,
+    animationPreset: config.animationPreset ?? defaultConfig.animationPreset,
+    components: {
+      ...defaultConfig.components,
+      ...config.components
+    },
+    componentsPath: config.componentsPath ?? defaultConfig.componentsPath,
+    utilsPath: config.utilsPath ?? defaultConfig.utilsPath,
+    style: config.style ?? defaultConfig.style,
+    aliases: {
+      ...defaultConfig.aliases,
+      ...config.aliases
+    }
+  };
+}
+
+// src/utils/project.ts
+var __filename2 = fileURLToPath(import.meta.url);
+async function getProjectRoot(cwd) {
+  let dir = cwd;
+  while (dir !== path.dirname(dir)) {
+    if (await fs.pathExists(path.join(dir, "package.json"))) {
+      return dir;
+    }
+    dir = path.dirname(dir);
+  }
+  return null;
+}
+async function detectProjectType(projectRoot) {
+  try {
+    const packageJson = await fs.readJson(path.join(projectRoot, "package.json"));
+    const deps = {
+      ...packageJson.dependencies,
+      ...packageJson.devDependencies
+    };
+    if (deps["expo"]) {
+      return "expo";
+    }
+    if (deps["react-native"]) {
+      return "react-native";
+    }
+    return "unknown";
+  } catch {
+    return "unknown";
+  }
+}
+async function getConfig(projectRoot) {
+  const tsConfigPath = path.join(projectRoot, "nativeui.config.ts");
+  if (await fs.pathExists(tsConfigPath)) {
+    return loadTsConfig(tsConfigPath);
+  }
+  const jsConfigPath = path.join(projectRoot, "nativeui.config.js");
+  if (await fs.pathExists(jsConfigPath)) {
+    return loadJsConfig(jsConfigPath);
+  }
+  const jsonConfigPath = path.join(projectRoot, "nativeui.config.json");
+  if (await fs.pathExists(jsonConfigPath)) {
+    try {
+      const rawConfig = await fs.readJson(jsonConfigPath);
+      const validatedConfig = validateConfigOrThrow(rawConfig, jsonConfigPath);
+      return resolveConfig(validatedConfig);
+    } catch (error) {
+      if (error instanceof Error && error.message.includes("Invalid configuration")) {
+        console.error(chalk.red(error.message));
+        throw error;
+      }
+      throw error;
+    }
+  }
+  return null;
+}
+async function loadTsConfig(configPath) {
+  try {
+    const jiti = createJiti(__filename2, {
+      interopDefault: true
+    });
+    const rawConfig = jiti(configPath);
+    const config = rawConfig.default || rawConfig;
+    const validatedConfig = validateConfigOrThrow(config, configPath);
+    return resolveConfig(validatedConfig);
+  } catch (error) {
+    if (error instanceof Error && error.message.includes("Invalid configuration")) {
+      console.error(chalk.red(error.message));
+      throw error;
+    }
+    console.error(chalk.red("Failed to load config:"), error);
+    return getDefaultConfig();
+  }
+}
+async function loadJsConfig(configPath) {
+  try {
+    const rawConfig = await import(configPath);
+    const config = rawConfig.default || rawConfig;
+    const validatedConfig = validateConfigOrThrow(config, configPath);
+    return resolveConfig(validatedConfig);
+  } catch (error) {
+    if (error instanceof Error && error.message.includes("Invalid configuration")) {
+      console.error(chalk.red(error.message));
+      throw error;
+    }
+    console.error(chalk.red("Failed to load config:"), error);
+    return getDefaultConfig();
+  }
+}
+function getDefaultConfig() {
+  return resolveConfig({});
+}
+async function readPackageJson(projectRoot) {
+  try {
+    return await fs.readJson(path.join(projectRoot, "package.json"));
+  } catch {
+    return null;
+  }
+}
+async function detectPackageManager(projectRoot) {
+  if (await fs.pathExists(path.join(projectRoot, "bun.lockb"))) {
+    return "bun";
+  }
+  if (await fs.pathExists(path.join(projectRoot, "pnpm-lock.yaml"))) {
+    return "pnpm";
+  }
+  if (await fs.pathExists(path.join(projectRoot, "yarn.lock"))) {
+    return "yarn";
+  }
+  return "npm";
+}
+
+// src/commands/init.ts
+var initCommand = new Command().name("init").description("Initialize nativeui in your project").option("-y, --yes", "Skip prompts and use defaults").option("--cwd <path>", "Working directory", process.cwd()).action(async (options) => {
+  const spinner = ora();
+  try {
+    const cwd = path2.resolve(options.cwd);
+    const projectRoot = await getProjectRoot(cwd);
+    if (!projectRoot) {
+      console.log(chalk2.red("Could not find a valid Expo/React Native project."));
+      console.log(chalk2.dim("Make sure you run this command in a project with package.json"));
+      process.exit(1);
+    }
+    console.log();
+    console.log(chalk2.bold("Welcome to nativeui!"));
+    console.log(chalk2.dim("The copy-paste component library for Expo/React Native"));
+    console.log();
+    const projectType = await detectProjectType(projectRoot);
+    console.log(chalk2.dim(`Detected: ${projectType}`));
+    const configPath = path2.join(projectRoot, "nativeui.config.ts");
+    if (await fs2.pathExists(configPath)) {
+      console.log(chalk2.yellow("Project already initialized."));
+      console.log(chalk2.dim(`Config found at: ${configPath}`));
+      return;
+    }
+    let config = {
+      componentsPath: "./components/ui",
+      utilsPath: "./lib/utils",
+      style: "default"
+    };
+    if (!options.yes) {
+      const response = await prompts([
+        {
+          type: "text",
+          name: "componentsPath",
+          message: "Where should components be installed?",
+          initial: config.componentsPath
+        },
+        {
+          type: "text",
+          name: "utilsPath",
+          message: "Where should utilities be installed?",
+          initial: config.utilsPath
+        },
+        {
+          type: "select",
+          name: "style",
+          message: "Which style preset?",
+          choices: [
+            { title: "Default", value: "default" },
+            { title: "iOS", value: "ios" },
+            { title: "Material", value: "material" }
+          ]
+        }
+      ]);
+      config = { ...config, ...response };
+    }
+    spinner.start("Creating configuration...");
+    const configContent = `/**
+ * NativeUI Configuration
+ *
+ * This file defines your app's design system.
+ * All components will automatically use these values.
+ */
+
+import { defineConfig } from '@nativeui/core';
+
+export default defineConfig({
+  // ============================================
+  // Theme Configuration (runtime)
+  // ============================================
+
+  // Color theme preset: 'zinc' | 'slate' | 'stone' | 'blue' | 'green' | 'rose' | 'orange' | 'violet'
+  theme: 'blue',
+
+  // Border radius preset: 'none' | 'sm' | 'md' | 'lg' | 'full'
+  radius: 'md',
+
+  // Default color scheme: 'light' | 'dark' | 'system'
+  colorScheme: 'system',
+
+  // Custom color overrides (optional)
+  // colors: {
+  //   primary: '#6366F1',
+  // },
+
+  // Component defaults (optional)
+  // components: {
+  //   button: { defaultVariant: 'default', defaultSize: 'md' },
+  // },
+
+  // ============================================
+  // CLI Configuration (used by npx nativeui add)
+  // ============================================
+
+  // Path where components will be installed
+  componentsPath: '${config.componentsPath}',
+
+  // Path where utilities (cn, etc.) will be installed
+  utilsPath: '${config.utilsPath}',
+
+  // Style preset: 'default' | 'ios' | 'material'
+  style: '${config.style}',
+
+  // Path aliases for imports
+  aliases: {
+    components: '@/components',
+    utils: '@/lib/utils',
+  },
+});
+`;
+    await fs2.writeFile(configPath, configContent);
+    spinner.succeed("Configuration created");
+    spinner.start("Creating directories...");
+    const componentsDir = path2.join(projectRoot, config.componentsPath);
+    const utilsDir = path2.join(projectRoot, config.utilsPath);
+    await fs2.ensureDir(componentsDir);
+    await fs2.ensureDir(utilsDir);
+    spinner.succeed("Directories created");
+    spinner.start("Installing utilities...");
+    const cnContent = `import { StyleSheet, ViewStyle, TextStyle, ImageStyle } from 'react-native';
+
+type Style = ViewStyle | TextStyle | ImageStyle;
+type StyleInput = Style | Style[] | null | undefined | false;
+
+/**
+ * Merge styles utility
+ *
+ * @example
+ * \`\`\`tsx
+ * const styles = cn(
+ *   baseStyles.container,
+ *   isActive && activeStyles,
+ *   { padding: 16 }
+ * );
+ * \`\`\`
+ */
+export function cn(...inputs: StyleInput[]): Style {
+  const styles: Style[] = [];
+
+  for (const input of inputs) {
+    if (!input) continue;
+
+    if (Array.isArray(input)) {
+      const flattened = StyleSheet.flatten(input);
+      if (flattened) styles.push(flattened);
+    } else {
+      styles.push(input);
+    }
+  }
+
+  return StyleSheet.flatten(styles);
+}
+`;
+    await fs2.writeFile(path2.join(utilsDir, "cn.ts"), cnContent);
+    await fs2.writeFile(
+      path2.join(utilsDir, "index.ts"),
+      `export { cn } from './cn';
+`
+    );
+    spinner.succeed("Utilities installed");
+    console.log();
+    console.log(chalk2.green("Success!") + " nativeui initialized.");
+    console.log();
+    console.log("Next steps:");
+    console.log(chalk2.dim("  1."), "Add your first component:");
+    console.log(chalk2.cyan("     npx nativeui add button"));
+    console.log();
+    console.log(chalk2.dim("  2."), "Browse available components:");
+    console.log(chalk2.cyan("     npx nativeui list"));
+    console.log();
+  } catch (error) {
+    spinner.fail("Failed to initialize");
+    console.error(error);
+    process.exit(1);
+  }
+});
+
+// src/commands/add.ts
+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";
+
+// src/utils/registry.ts
+import fs3 from "fs-extra";
+import path3 from "path";
+import { fileURLToPath as fileURLToPath2 } from "url";
+var __filename3 = fileURLToPath2(import.meta.url);
+var __dirname2 = path3.dirname(__filename3);
+var REGISTRY_URL = process.env.NATIVEUI_REGISTRY_URL;
+function getLocalRegistryPath() {
+  return path3.resolve(__dirname2, "..", "..", "registry");
+}
+function isLocalMode() {
+  if (REGISTRY_URL) return false;
+  const localPath = getLocalRegistryPath();
+  return fs3.pathExistsSync(path3.join(localPath, "registry.json"));
+}
+async function getRegistry() {
+  if (isLocalMode()) {
+    return getLocalRegistry();
+  }
+  return getRemoteRegistry();
+}
+async function getLocalRegistry() {
+  const registryPath = path3.join(getLocalRegistryPath(), "registry.json");
+  try {
+    const registry = await fs3.readJson(registryPath);
+    return registry.components;
+  } catch (error) {
+    console.error("Failed to load local registry:", error);
+    return [];
+  }
+}
+async function getRemoteRegistry() {
+  if (!REGISTRY_URL) {
+    throw new Error("NATIVEUI_REGISTRY_URL not configured");
+  }
+  try {
+    const response = await fetch(`${REGISTRY_URL}/registry.json`);
+    const registry = await response.json();
+    return registry.components;
+  } catch (error) {
+    console.error("Failed to fetch remote registry:", error);
+    return [];
+  }
+}
+async function fetchComponent(name) {
+  const registry = await getRegistry();
+  const item = registry.find((i) => i.name === name);
+  if (!item) {
+    return null;
+  }
+  if (isLocalMode()) {
+    return fetchLocalComponent(item);
+  }
+  return fetchRemoteComponent(item);
+}
+async function fetchLocalComponent(item) {
+  const registryPath = getLocalRegistryPath();
+  const files = await Promise.all(
+    item.files.map(async (filePath) => {
+      const fullPath = path3.join(registryPath, filePath);
+      const content = await fs3.readFile(fullPath, "utf-8");
+      const name = path3.basename(filePath);
+      return { name, content };
+    })
+  );
+  return {
+    name: item.name,
+    files,
+    dependencies: item.dependencies,
+    devDependencies: item.devDependencies,
+    registryDependencies: item.registryDependencies
+  };
+}
+async function fetchRemoteComponent(item) {
+  if (!REGISTRY_URL) {
+    throw new Error("NATIVEUI_REGISTRY_URL not configured");
+  }
+  const files = await Promise.all(
+    item.files.map(async (filePath) => {
+      const response = await fetch(`${REGISTRY_URL}/${filePath}`);
+      const content = await response.text();
+      const name = path3.basename(filePath);
+      return { name, content };
+    })
+  );
+  return {
+    name: item.name,
+    files,
+    dependencies: item.dependencies,
+    devDependencies: item.devDependencies,
+    registryDependencies: item.registryDependencies
+  };
+}
+
+// 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 projectRoot = await getProjectRoot(cwd);
+    if (!projectRoot) {
+      console.log(chalk3.red("Could not find a valid project."));
+      console.log(chalk3.dim("Run `npx nativeui init` first."));
+      process.exit(1);
+    }
+    const config = await getConfig(projectRoot);
+    if (!config) {
+      console.log(chalk3.red("Project not initialized."));
+      console.log(chalk3.dim("Run `npx nativeui init` first."));
+      process.exit(1);
+    }
+    if (!components.length) {
+      const registry = await getRegistry();
+      if (!registry.length) {
+        console.log(chalk3.red("No components found in registry."));
+        process.exit(1);
+      }
+      const { selected } = await prompts2({
+        type: "multiselect",
+        name: "selected",
+        message: "Which components would you like to add?",
+        choices: registry.map((item) => ({
+          title: `${item.name} ${chalk3.dim(`(${item.status})`)}`,
+          value: item.name,
+          description: item.description
+        })),
+        hint: "- Space to select, Enter to confirm"
+      });
+      if (!selected?.length) {
+        console.log(chalk3.dim("No components selected."));
+        return;
+      }
+      components = selected;
+    }
+    console.log();
+    console.log(chalk3.bold("Adding components:"));
+    components.forEach((c) => console.log(chalk3.dim(`  - ${c}`)));
+    console.log();
+    const allDependencies = [];
+    const allDevDependencies = [];
+    for (const componentName of components) {
+      spinner.start(`Fetching ${componentName}...`);
+      try {
+        const component = await fetchComponent(componentName);
+        if (!component) {
+          spinner.fail(`Component "${componentName}" not found`);
+          continue;
+        }
+        const targetDir = path4.join(projectRoot, config.componentsPath);
+        for (const file of component.files) {
+          const targetPath = path4.join(targetDir, file.name);
+          if (await fs4.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);
+        }
+        spinner.succeed(`Added ${componentName}`);
+        if (component.dependencies?.length) {
+          allDependencies.push(...component.dependencies);
+        }
+        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)));
+      }
+    }
+    const uniqueDeps = [...new Set(allDependencies)];
+    const uniqueDevDeps = [...new Set(allDevDependencies)];
+    if (uniqueDeps.length || uniqueDevDeps.length) {
+      console.log();
+      console.log(chalk3.bold("Install dependencies:"));
+      if (uniqueDeps.length) {
+        console.log(chalk3.cyan(`  npx expo install ${uniqueDeps.join(" ")}`));
+      }
+      if (uniqueDevDeps.length) {
+        console.log(chalk3.cyan(`  npm install -D ${uniqueDevDeps.join(" ")}`));
+      }
+    }
+    console.log();
+    console.log(chalk3.green("Done!"));
+  } catch (error) {
+    spinner.fail("Failed");
+    console.error(error);
+    process.exit(1);
+  }
+});
+function transformImports(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;
+}
+
+// src/commands/list.ts
+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) => {
+  const spinner = ora3("Fetching components...").start();
+  try {
+    const registry = await getRegistry();
+    spinner.stop();
+    console.log();
+    console.log(chalk4.bold("Available Components"));
+    console.log();
+    const categories = /* @__PURE__ */ new Map();
+    for (const item of registry) {
+      const category = item.category || "Other";
+      if (options.category && category.toLowerCase() !== options.category.toLowerCase()) {
+        continue;
+      }
+      if (!categories.has(category)) {
+        categories.set(category, []);
+      }
+      categories.get(category).push(item);
+    }
+    for (const [category, items] of categories) {
+      console.log(chalk4.cyan.bold(`${category}`));
+      for (const item of items) {
+        const status = item.status === "stable" ? "" : chalk4.yellow(` [${item.status}]`);
+        console.log(`  ${chalk4.white(item.name)}${status}`);
+        console.log(chalk4.dim(`    ${item.description}`));
+      }
+      console.log();
+    }
+    console.log(chalk4.dim("Add a component: npx nativeui add <component>"));
+    console.log();
+  } catch (error) {
+    spinner.fail("Failed to fetch 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";
+var REQUIRED_PEER_DEPS = [
+  { name: "react-native-reanimated", minVersion: "3.0.0" },
+  { name: "react-native-gesture-handler", minVersion: "2.0.0" },
+  { name: "react-native-safe-area-context", minVersion: "4.0.0" }
+];
+var RECOMMENDED_DEPS = [
+  { name: "@nativeui/core", reason: "Theme system and utilities" }
+];
+function parseVersion(version) {
+  const cleaned = version.replace(/^[\^~>=<]+/, "").replace(/^workspace:\*?/, "");
+  const match = cleaned.match(/^(\d+)\.(\d+)\.(\d+)/);
+  if (!match) return null;
+  return {
+    major: parseInt(match[1], 10),
+    minor: parseInt(match[2], 10),
+    patch: parseInt(match[3], 10)
+  };
+}
+function meetsMinVersion(current, minimum) {
+  const currentParsed = parseVersion(current);
+  const minimumParsed = parseVersion(minimum);
+  if (!currentParsed || !minimumParsed) return true;
+  if (currentParsed.major > minimumParsed.major) return true;
+  if (currentParsed.major < minimumParsed.major) return false;
+  if (currentParsed.minor > minimumParsed.minor) return true;
+  if (currentParsed.minor < minimumParsed.minor) return false;
+  return currentParsed.patch >= minimumParsed.patch;
+}
+async function checkProjectStructure(projectRoot) {
+  const packageJson = await readPackageJson(projectRoot);
+  if (!packageJson) {
+    return {
+      name: "Project Structure",
+      status: "fail",
+      message: "No package.json found",
+      fix: "Run this command in a valid Node.js project"
+    };
+  }
+  return {
+    name: "Project Structure",
+    status: "pass",
+    message: "Valid package.json found"
+  };
+}
+async function checkProjectType(projectRoot) {
+  const projectType = await detectProjectType(projectRoot);
+  if (projectType === "unknown") {
+    return {
+      name: "Project Type",
+      status: "fail",
+      message: "Not an Expo or React Native project",
+      fix: "nativeui requires Expo or React Native"
+    };
+  }
+  return {
+    name: "Project Type",
+    status: "pass",
+    message: projectType === "expo" ? "Expo project detected" : "React Native project detected"
+  };
+}
+async function checkInitialized(projectRoot) {
+  const configFiles = [
+    "nativeui.config.ts",
+    "nativeui.config.js",
+    "nativeui.config.json"
+  ];
+  let foundConfig = null;
+  for (const file of configFiles) {
+    if (await fs5.pathExists(path5.join(projectRoot, file))) {
+      foundConfig = file;
+      break;
+    }
+  }
+  if (!foundConfig) {
+    return {
+      name: "NativeUI Config",
+      status: "fail",
+      message: "nativeui.config.ts not found",
+      fix: "Run: npx nativeui init"
+    };
+  }
+  try {
+    const configPath = path5.join(projectRoot, foundConfig);
+    const content = await fs5.readFile(configPath, "utf-8");
+    if (foundConfig.endsWith(".ts") || foundConfig.endsWith(".js")) {
+      const hasDefineConfig = content.includes("defineConfig");
+      const hasExport = content.includes("export default");
+      if (!hasExport) {
+        return {
+          name: "NativeUI Config",
+          status: "warn",
+          message: "Config file missing default export",
+          fix: "Add: export default defineConfig({ ... })"
+        };
+      }
+      if (!hasDefineConfig) {
+        return {
+          name: "NativeUI Config",
+          status: "warn",
+          message: "Config not using defineConfig helper",
+          fix: "Wrap config with: defineConfig({ ... })"
+        };
+      }
+    }
+    if (foundConfig.endsWith(".json")) {
+      try {
+        JSON.parse(content);
+      } catch {
+        return {
+          name: "NativeUI Config",
+          status: "fail",
+          message: "Invalid JSON in config file",
+          fix: "Check JSON syntax in nativeui.config.json"
+        };
+      }
+    }
+    return {
+      name: "NativeUI Config",
+      status: "pass",
+      message: `Found ${foundConfig}`
+    };
+  } catch (error) {
+    return {
+      name: "NativeUI Config",
+      status: "fail",
+      message: "Could not read config file",
+      fix: error instanceof Error ? error.message : "Check file permissions"
+    };
+  }
+}
+async function checkPaths(projectRoot) {
+  const defaultComponentsPath = "./components/ui";
+  const defaultUtilsPath = "./lib/utils";
+  let componentsPathValue = defaultComponentsPath;
+  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)) {
+      try {
+        const content = await fs5.readFile(configPath, "utf-8");
+        const componentsMatch = content.match(/componentsPath:\s*['"]([^'"]+)['"]/);
+        const utilsMatch = content.match(/utilsPath:\s*['"]([^'"]+)['"]/);
+        if (componentsMatch) componentsPathValue = componentsMatch[1];
+        if (utilsMatch) utilsPathValue = utilsMatch[1];
+      } catch {
+      }
+      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);
+  if (!componentsExist && !utilsExist) {
+    return {
+      name: "Component Paths",
+      status: "warn",
+      message: "Component and utils directories not created yet",
+      fix: `Add a component: npx nativeui add button`
+    };
+  }
+  if (!componentsExist) {
+    return {
+      name: "Component Paths",
+      status: "warn",
+      message: `Components directory not found: ${componentsPathValue}`,
+      fix: "Add a component to create it: npx nativeui add button"
+    };
+  }
+  return {
+    name: "Component Paths",
+    status: "pass",
+    message: `Components: ${componentsPathValue}`
+  };
+}
+async function checkPeerDependencies(projectRoot) {
+  const packageJson = await readPackageJson(projectRoot);
+  const results = [];
+  if (!packageJson) return results;
+  const deps = {
+    ...packageJson.dependencies,
+    ...packageJson.devDependencies
+  };
+  for (const { name, minVersion } of REQUIRED_PEER_DEPS) {
+    const version = deps[name];
+    if (!version) {
+      results.push({
+        name: `Dependency: ${name}`,
+        status: "fail",
+        message: "Not installed",
+        fix: `Run: npx expo install ${name}`
+      });
+      continue;
+    }
+    if (!meetsMinVersion(version, minVersion)) {
+      results.push({
+        name: `Dependency: ${name}`,
+        status: "warn",
+        message: `Version ${version} may be outdated (recommended: >=${minVersion})`,
+        fix: `Run: npx expo install ${name}`
+      });
+      continue;
+    }
+    results.push({
+      name: `Dependency: ${name}`,
+      status: "pass",
+      message: `Installed (${version})`
+    });
+  }
+  return results;
+}
+async function checkRecommendedDependencies(projectRoot) {
+  const packageJson = await readPackageJson(projectRoot);
+  const results = [];
+  if (!packageJson) return results;
+  const deps = {
+    ...packageJson.dependencies,
+    ...packageJson.devDependencies
+  };
+  for (const { name, reason } of RECOMMENDED_DEPS) {
+    const version = deps[name];
+    if (!version) {
+      results.push({
+        name: `Dependency: ${name}`,
+        status: "warn",
+        message: `Not installed - ${reason}`,
+        fix: `Run: npm install ${name}`
+      });
+    } else {
+      results.push({
+        name: `Dependency: ${name}`,
+        status: "pass",
+        message: `Installed (${version})`
+      });
+    }
+  }
+  return results;
+}
+async function checkBabelConfig(projectRoot) {
+  const babelConfigPaths = [
+    "babel.config.js",
+    "babel.config.cjs",
+    "babel.config.mjs",
+    ".babelrc",
+    ".babelrc.js"
+  ];
+  let babelConfigPath = null;
+  let babelContent = null;
+  for (const configFile of babelConfigPaths) {
+    const fullPath = path5.join(projectRoot, configFile);
+    if (await fs5.pathExists(fullPath)) {
+      babelConfigPath = configFile;
+      babelContent = await fs5.readFile(fullPath, "utf-8");
+      break;
+    }
+  }
+  if (!babelConfigPath || !babelContent) {
+    return {
+      name: "Babel Config",
+      status: "warn",
+      message: "No babel.config.js found",
+      fix: "Create babel.config.js with Reanimated plugin"
+    };
+  }
+  const hasReanimatedPlugin = babelContent.includes("react-native-reanimated/plugin") || babelContent.includes("'react-native-reanimated/plugin'") || babelContent.includes('"react-native-reanimated/plugin"');
+  if (!hasReanimatedPlugin) {
+    return {
+      name: "Babel Config",
+      status: "fail",
+      message: "Reanimated plugin not configured",
+      fix: `Add 'react-native-reanimated/plugin' to plugins in ${babelConfigPath}`
+    };
+  }
+  return {
+    name: "Babel Config",
+    status: "pass",
+    message: "Reanimated plugin configured"
+  };
+}
+async function checkTypeScript(projectRoot) {
+  const tsconfigPath = path5.join(projectRoot, "tsconfig.json");
+  if (!await fs5.pathExists(tsconfigPath)) {
+    return {
+      name: "TypeScript",
+      status: "warn",
+      message: "No tsconfig.json found",
+      fix: "TypeScript is recommended but not required"
+    };
+  }
+  try {
+    const tsconfig = await fs5.readJson(tsconfigPath);
+    const hasPathAliases = tsconfig.compilerOptions?.paths;
+    if (!hasPathAliases) {
+      return {
+        name: "TypeScript",
+        status: "warn",
+        message: "No path aliases configured",
+        fix: "Consider adding @/* path alias for cleaner imports"
+      };
+    }
+    const hasComponentsAlias = hasPathAliases["@/components/*"] || hasPathAliases["@/components"];
+    const hasUtilsAlias = hasPathAliases["@/lib/*"] || hasPathAliases["@/*"];
+    if (!hasComponentsAlias) {
+      return {
+        name: "TypeScript",
+        status: "warn",
+        message: "Missing @/components path alias",
+        fix: 'Add "@/components/*": ["./components/*"] to tsconfig.json paths'
+      };
+    }
+    return {
+      name: "TypeScript",
+      status: "pass",
+      message: "Configured with path aliases"
+    };
+  } catch {
+    return {
+      name: "TypeScript",
+      status: "warn",
+      message: "Could not parse tsconfig.json"
+    };
+  }
+}
+async function checkExpoGo(projectRoot) {
+  const projectType = await detectProjectType(projectRoot);
+  if (projectType !== "expo") return null;
+  const packageJson = await readPackageJson(projectRoot);
+  if (!packageJson) return null;
+  const deps = {
+    ...packageJson.dependencies,
+    ...packageJson.devDependencies
+  };
+  const incompatiblePackages = [
+    "react-native-mmkv",
+    "@shopify/flash-list"
+    // Now compatible, but leaving as example pattern
+  ];
+  const foundIncompatible = incompatiblePackages.filter((pkg) => deps[pkg]);
+  if (foundIncompatible.length > 0) {
+    return {
+      name: "Expo Go Compatibility",
+      status: "warn",
+      message: `Packages may require dev build: ${foundIncompatible.join(", ")}`,
+      fix: "Run: npx expo prebuild for native features"
+    };
+  }
+  return {
+    name: "Expo Go Compatibility",
+    status: "pass",
+    message: "No known incompatibilities detected"
+  };
+}
+function printReport(report) {
+  console.log();
+  console.log(chalk5.bold("NativeUI Doctor"));
+  console.log(chalk5.dim("Checking your project setup..."));
+  console.log();
+  console.log(chalk5.dim("Project:"), report.projectRoot);
+  console.log(chalk5.dim("Type:"), report.projectType);
+  console.log(chalk5.dim("Package Manager:"), report.packageManager);
+  console.log();
+  console.log(chalk5.bold("Checks"));
+  console.log();
+  for (const check of report.checks) {
+    const icon = check.status === "pass" ? chalk5.green("\u2713") : check.status === "warn" ? chalk5.yellow("!") : chalk5.red("\u2717");
+    const statusColor = check.status === "pass" ? chalk5.green : check.status === "warn" ? chalk5.yellow : chalk5.red;
+    console.log(`  ${icon} ${chalk5.white(check.name)}`);
+    console.log(`    ${statusColor(check.message)}`);
+    if (check.fix && check.status !== "pass") {
+      console.log(chalk5.dim(`    Fix: ${check.fix}`));
+    }
+  }
+  console.log();
+  const summaryParts = [];
+  if (report.passed > 0) {
+    summaryParts.push(chalk5.green(`${report.passed} passed`));
+  }
+  if (report.warnings > 0) {
+    summaryParts.push(chalk5.yellow(`${report.warnings} warnings`));
+  }
+  if (report.failed > 0) {
+    summaryParts.push(chalk5.red(`${report.failed} failed`));
+  }
+  console.log(chalk5.bold("Summary:"), summaryParts.join(", "));
+  console.log();
+  if (report.failed > 0) {
+    console.log(chalk5.red("Some checks failed. Please fix the issues above."));
+  } else if (report.warnings > 0) {
+    console.log(chalk5.yellow("Your project has some warnings but should work."));
+  } else {
+    console.log(chalk5.green("Your project is properly configured!"));
+  }
+  console.log();
+}
+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 projectRoot = await getProjectRoot(cwd);
+    if (!projectRoot) {
+      console.log(chalk5.red("Could not find a valid project."));
+      console.log(chalk5.dim("Make sure you run this command in a project directory."));
+      process.exit(1);
+    }
+    const projectType = await detectProjectType(projectRoot);
+    const packageManager = await detectPackageManager(projectRoot);
+    const checks = [];
+    checks.push(await checkProjectStructure(projectRoot));
+    checks.push(await checkProjectType(projectRoot));
+    checks.push(await checkInitialized(projectRoot));
+    checks.push(await checkPaths(projectRoot));
+    checks.push(...await checkPeerDependencies(projectRoot));
+    checks.push(...await checkRecommendedDependencies(projectRoot));
+    checks.push(await checkBabelConfig(projectRoot));
+    checks.push(await checkTypeScript(projectRoot));
+    const expoGoCheck = await checkExpoGo(projectRoot);
+    if (expoGoCheck) {
+      checks.push(expoGoCheck);
+    }
+    const passed = checks.filter((c) => c.status === "pass").length;
+    const warnings = checks.filter((c) => c.status === "warn").length;
+    const failed = checks.filter((c) => c.status === "fail").length;
+    const report = {
+      projectRoot,
+      projectType,
+      packageManager,
+      checks,
+      passed,
+      warnings,
+      failed
+    };
+    if (options.json) {
+      console.log(JSON.stringify(report, null, 2));
+    } else {
+      printReport(report);
+    }
+    if (failed > 0) {
+      process.exit(1);
+    }
+  } catch (error) {
+    console.error(chalk5.red("Doctor check failed:"), error);
+    process.exit(1);
+  }
+});
+
+// src/commands/diff.ts
+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) => {
+  const spinner = ora4();
+  try {
+    const cwd = path6.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."));
+      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."));
+      process.exit(1);
+    }
+    spinner.start("Scanning installed components...");
+    const componentsDir = path6.join(projectRoot, config.componentsPath);
+    const installedFiles = await getInstalledComponents(componentsDir);
+    if (installedFiles.length === 0) {
+      spinner.info("No components installed yet.");
+      console.log(chalk6.dim("\nAdd components with: npx nativeui add <component>"));
+      return;
+    }
+    spinner.text = "Fetching registry...";
+    const registry = await getRegistry();
+    const registryMap = /* @__PURE__ */ new Map();
+    for (const item of registry) {
+      for (const file of item.files) {
+        const fileName = path6.basename(file);
+        registryMap.set(fileName, item);
+      }
+    }
+    spinner.text = "Comparing components...";
+    const results = [];
+    for (const localFile of installedFiles) {
+      const fileName = path6.basename(localFile);
+      const registryItem = registryMap.get(fileName);
+      if (!registryItem) {
+        results.push({
+          name: fileName.replace(/\.tsx?$/, ""),
+          status: "local-only",
+          localFile
+        });
+        continue;
+      }
+      try {
+        const component = await fetchComponent(registryItem.name);
+        if (!component) {
+          results.push({
+            name: registryItem.name,
+            status: "error",
+            error: "Failed to fetch from registry"
+          });
+          continue;
+        }
+        const registryFile = component.files.find((f) => f.name === fileName);
+        if (!registryFile) {
+          results.push({
+            name: registryItem.name,
+            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) {
+          results.push({
+            name: registryItem.name,
+            status: "up-to-date",
+            localFile
+          });
+        } else {
+          results.push({
+            name: registryItem.name,
+            status: "changed",
+            localFile
+          });
+        }
+      } catch (error) {
+        results.push({
+          name: registryItem.name,
+          status: "error",
+          error: String(error)
+        });
+      }
+    }
+    spinner.stop();
+    if (options.json) {
+      console.log(JSON.stringify(results, null, 2));
+      return;
+    }
+    printResults(results, options.verbose);
+  } catch (error) {
+    spinner.fail("Failed to check for updates");
+    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");
+  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();
+  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}`));
+    }
+    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();
+  }
+  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)}`);
+    }
+    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`)
+    );
+  }
+}
+
+// src/commands/update.ts
+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";
+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 projectRoot = await getProjectRoot(cwd);
+    if (!projectRoot) {
+      console.log(chalk7.red("Could not find a valid project."));
+      console.log(chalk7.dim("Run `npx nativeui init` first."));
+      process.exit(1);
+    }
+    const config = await getConfig(projectRoot);
+    if (!config) {
+      console.log(chalk7.red("Project not initialized."));
+      console.log(chalk7.dim("Run `npx nativeui init` first."));
+      process.exit(1);
+    }
+    spinner.start("Checking for updates...");
+    const componentsDir = path7.join(projectRoot, config.componentsPath);
+    const diffs = await getComponentDiffs(componentsDir, config);
+    if (diffs.length === 0) {
+      spinner.info("No components installed yet.");
+      console.log(chalk7.dim("\nAdd components with: npx nativeui add <component>"));
+      return;
+    }
+    spinner.stop();
+    let toUpdate;
+    if (components.length > 0) {
+      toUpdate = diffs.filter((d) => components.includes(d.name));
+      const notFound = components.filter((c) => !diffs.some((d) => d.name === c));
+      if (notFound.length > 0) {
+        console.log(chalk7.yellow(`Components not found: ${notFound.join(", ")}`));
+      }
+    } else if (options.all) {
+      toUpdate = diffs;
+    } else {
+      toUpdate = diffs.filter((d) => d.hasUpdate);
+    }
+    if (toUpdate.length === 0) {
+      console.log(chalk7.green("\n\u2713 All components are up to date!"));
+      return;
+    }
+    console.log();
+    console.log(chalk7.bold(`Components to update (${toUpdate.length}):`));
+    for (const comp of toUpdate) {
+      const status = comp.hasUpdate ? chalk7.yellow("\u25CF") : chalk7.green("\u25CF");
+      const label = comp.hasUpdate ? chalk7.dim("(update available)") : chalk7.dim("(re-sync)");
+      console.log(`  ${status} ${comp.name} ${label}`);
+    }
+    console.log();
+    if (options.dryRun) {
+      console.log(chalk7.dim("Dry run mode - no changes made."));
+      return;
+    }
+    if (!options.yes) {
+      const { confirm } = await prompts3({
+        type: "confirm",
+        name: "confirm",
+        message: `Update ${toUpdate.length} component${toUpdate.length !== 1 ? "s" : ""}?`,
+        initial: true
+      });
+      if (!confirm) {
+        console.log(chalk7.dim("Cancelled."));
+        return;
+      }
+    }
+    console.log();
+    const allDependencies = [];
+    const allDevDependencies = [];
+    let successCount = 0;
+    let failCount = 0;
+    for (const comp of toUpdate) {
+      spinner.start(`Updating ${comp.name}...`);
+      try {
+        const component = await fetchComponent(comp.name);
+        if (!component) {
+          spinner.fail(`${comp.name}: Not found in registry`);
+          failCount++;
+          continue;
+        }
+        const targetDir = path7.join(projectRoot, config.componentsPath);
+        for (const file of component.files) {
+          const targetPath = path7.join(targetDir, file.name);
+          await fs7.ensureDir(targetDir);
+          const transformedContent = transformImports3(file.content, config);
+          await fs7.writeFile(targetPath, transformedContent);
+        }
+        spinner.succeed(`Updated ${comp.name}`);
+        successCount++;
+        if (component.dependencies?.length) {
+          allDependencies.push(...component.dependencies);
+        }
+        if (component.devDependencies?.length) {
+          allDevDependencies.push(...component.devDependencies);
+        }
+      } catch (error) {
+        spinner.fail(`${comp.name}: ${String(error)}`);
+        failCount++;
+      }
+    }
+    console.log();
+    if (successCount > 0) {
+      console.log(chalk7.green(`\u2713 Updated ${successCount} component${successCount !== 1 ? "s" : ""}`));
+    }
+    if (failCount > 0) {
+      console.log(chalk7.red(`\u2717 Failed to update ${failCount} component${failCount !== 1 ? "s" : ""}`));
+    }
+    const uniqueDeps = [...new Set(allDependencies)];
+    const uniqueDevDeps = [...new Set(allDevDependencies)];
+    if (uniqueDeps.length || uniqueDevDeps.length) {
+      console.log();
+      console.log(chalk7.bold("Install/update dependencies:"));
+      if (uniqueDeps.length) {
+        console.log(chalk7.cyan(`  npx expo install ${uniqueDeps.join(" ")}`));
+      }
+      if (uniqueDevDeps.length) {
+        console.log(chalk7.cyan(`  npm install -D ${uniqueDevDeps.join(" ")}`));
+      }
+    }
+  } catch (error) {
+    spinner.fail("Failed to update");
+    console.error(error);
+    process.exit(1);
+  }
+});
+async function getComponentDiffs(componentsDir, config) {
+  if (!await fs7.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);
+      registryMap.set(fileName, item);
+    }
+  }
+  const files = await fs7.readdir(componentsDir);
+  const results = [];
+  for (const file of files) {
+    if (!file.endsWith(".tsx") && !file.endsWith(".ts")) {
+      continue;
+    }
+    if (file === "index.ts" || file === "index.tsx") {
+      continue;
+    }
+    const registryItem = registryMap.get(file);
+    if (!registryItem) {
+      continue;
+    }
+    const localFile = path7.join(componentsDir, file);
+    const hasUpdate = await checkForUpdate(localFile, registryItem, config);
+    results.push({
+      name: registryItem.name,
+      localFile,
+      hasUpdate
+    });
+  }
+  return results;
+}
+async function checkForUpdate(localFile, registryItem, config) {
+  try {
+    const component = await fetchComponent(registryItem.name);
+    if (!component) return false;
+    const fileName = path7.basename(localFile);
+    const registryFile = component.files.find((f) => f.name === fileName);
+    if (!registryFile) return false;
+    const localContent = await fs7.readFile(localFile, "utf-8");
+    const transformedRegistryContent = transformImports3(registryFile.content, config);
+    const localHash = hashContent2(localContent);
+    const registryHash = hashContent2(transformedRegistryContent);
+    return localHash !== registryHash;
+  } catch {
+    return false;
+  }
+}
+function hashContent2(content) {
+  const normalized = content.replace(/\r\n/g, "\n").replace(/\s+$/gm, "").trim();
+  return crypto2.createHash("md5").update(normalized).digest("hex");
+}
+function transformImports3(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;
+}
+
+// src/commands/create.ts
+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";
+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 projectRoot = await getProjectRoot(cwd);
+    if (!projectRoot) {
+      console.log(chalk8.red("Could not find a valid project."));
+      console.log(chalk8.dim("Run `npx nativeui init` first."));
+      process.exit(1);
+    }
+    const config = await getConfig(projectRoot);
+    if (!config) {
+      console.log(chalk8.red("Project not initialized."));
+      console.log(chalk8.dim("Run `npx nativeui init` first."));
+      process.exit(1);
+    }
+    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)) {
+      console.log(chalk8.red(`Component already exists: ${fileName}`));
+      console.log(chalk8.dim(`Path: ${targetPath}`));
+      process.exit(1);
+    }
+    if (!options.yes) {
+      console.log();
+      console.log(chalk8.bold("Create new component:"));
+      console.log(`  Name: ${chalk8.cyan(componentName)}`);
+      console.log(`  File: ${chalk8.dim(fileName)}`);
+      console.log(`  Path: ${chalk8.dim(targetPath)}`);
+      console.log(`  Template: ${chalk8.dim(options.template)}`);
+      console.log(`  ForwardRef: ${chalk8.dim(options.forwardRef ? "Yes" : "No")}`);
+      console.log();
+      const { confirm } = await prompts4({
+        type: "confirm",
+        name: "confirm",
+        message: "Create this component?",
+        initial: true
+      });
+      if (!confirm) {
+        console.log(chalk8.dim("Cancelled."));
+        return;
+      }
+    }
+    spinner.start("Creating component...");
+    const code = generateComponent(componentName, options.template, options.forwardRef);
+    await fs8.ensureDir(targetDir);
+    await fs8.writeFile(targetPath, code);
+    spinner.succeed(`Created ${fileName}`);
+    console.log();
+    console.log(chalk8.bold("Next steps:"));
+    console.log(`  1. Edit your component: ${chalk8.cyan(targetPath)}`);
+    console.log(`  2. Import it in your app:`);
+    console.log(chalk8.dim(`     import { ${componentName} } from '${config.aliases?.components || "@/components"}/ui/${toKebabCase(name)}';`));
+    console.log();
+  } catch (error) {
+    spinner.fail("Failed to create component");
+    console.error(error);
+    process.exit(1);
+  }
+});
+function toPascalCase(str) {
+  return str.replace(/[-_\s]+(.)?/g, (_, c) => c ? c.toUpperCase() : "").replace(/^(.)/, (c) => c.toUpperCase());
+}
+function toKebabCase(str) {
+  return str.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
+}
+function generateComponent(name, template, forwardRef) {
+  const templates = {
+    basic: () => generateBasicComponent(name, forwardRef),
+    animated: () => generateAnimatedComponent(name, forwardRef),
+    pressable: () => generatePressableComponent(name, forwardRef),
+    input: () => generateInputComponent(name, forwardRef)
+  };
+  return templates[template]();
+}
+function generateBasicComponent(name, forwardRef) {
+  if (forwardRef) {
+    return `import React, { forwardRef } from 'react';
+import { View, Text, StyleSheet, ViewProps } from 'react-native';
+import { useTheme } from '@nativeui/core';
+
+export interface ${name}Props extends ViewProps {
+  /**
+   * Example prop - replace with your own
+   */
+  title?: string;
+}
+
+/**
+ * ${name}
+ *
+ * A custom component created with nativeui create.
+ *
+ * @example
+ * \`\`\`tsx
+ * <${name} title="Hello World" />
+ * \`\`\`
+ */
+export const ${name} = forwardRef<View, ${name}Props>(
+  ({ title, style, ...props }, ref) => {
+    const { colors, spacing, radius } = useTheme();
+
+    return (
+      <View
+        ref={ref}
+        style={[
+          styles.container,
+          {
+            backgroundColor: colors.card,
+            padding: spacing[4],
+            borderRadius: radius.md,
+          },
+          style,
+        ]}
+        {...props}
+      >
+        {title && (
+          <Text style={[styles.title, { color: colors.foreground }]}>
+            {title}
+          </Text>
+        )}
+      </View>
+    );
+  }
+);
+
+${name}.displayName = '${name}';
+
+const styles = StyleSheet.create({
+  container: {},
+  title: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
+});
+`;
+  }
+  return `import React from 'react';
+import { View, Text, StyleSheet, ViewProps } from 'react-native';
+import { useTheme } from '@nativeui/core';
+
+export interface ${name}Props extends ViewProps {
+  /**
+   * Example prop - replace with your own
+   */
+  title?: string;
+}
+
+/**
+ * ${name}
+ *
+ * A custom component created with nativeui create.
+ *
+ * @example
+ * \`\`\`tsx
+ * <${name} title="Hello World" />
+ * \`\`\`
+ */
+export function ${name}({ title, style, ...props }: ${name}Props) {
+  const { colors, spacing, radius } = useTheme();
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: colors.card,
+          padding: spacing[4],
+          borderRadius: radius.md,
+        },
+        style,
+      ]}
+      {...props}
+    >
+      {title && (
+        <Text style={[styles.title, { color: colors.foreground }]}>
+          {title}
+        </Text>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {},
+  title: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
+});
+`;
+}
+function generateAnimatedComponent(name, forwardRef) {
+  const refPart = forwardRef ? `export const ${name} = forwardRef<Animated.View, ${name}Props>(
+  ({ title, style, ...props }, ref) => {` : `export function ${name}({ title, style, ...props }: ${name}Props) {`;
+  const closePart = forwardRef ? `  }
+);
+
+${name}.displayName = '${name}';` : `}`;
+  return `import React${forwardRef ? ", { forwardRef }" : ""} from 'react';
+import { StyleSheet, ViewProps } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+import { useTheme } from '@nativeui/core';
+
+export interface ${name}Props extends ViewProps {
+  /**
+   * Example prop - replace with your own
+   */
+  title?: string;
+}
+
+/**
+ * ${name}
+ *
+ * An animated component created with nativeui create.
+ *
+ * @example
+ * \`\`\`tsx
+ * <${name} title="Hello World" />
+ * \`\`\`
+ */
+${refPart}
+    const { colors, spacing, radius } = useTheme();
+    const scale = useSharedValue(1);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+      transform: [{ scale: scale.value }],
+    }));
+
+    return (
+      <Animated.View
+        ${forwardRef ? "ref={ref}" : ""}
+        style={[
+          styles.container,
+          {
+            backgroundColor: colors.card,
+            padding: spacing[4],
+            borderRadius: radius.md,
+          },
+          animatedStyle,
+          style,
+        ]}
+        {...props}
+      >
+        {title && (
+          <Animated.Text style={[styles.title, { color: colors.foreground }]}>
+            {title}
+          </Animated.Text>
+        )}
+      </Animated.View>
+    );
+${closePart}
+
+const styles = StyleSheet.create({
+  container: {},
+  title: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
+});
+`;
+}
+function generatePressableComponent(name, forwardRef) {
+  if (forwardRef) {
+    return `import React, { forwardRef } from 'react';
+import { Pressable, Text, StyleSheet, PressableProps, View } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { useTheme } from '@nativeui/core';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export interface ${name}Props extends Omit<PressableProps, 'style'> {
+  /**
+   * Button label
+   */
+  label?: string;
+  /**
+   * Custom style
+   */
+  style?: PressableProps['style'];
+}
+
+/**
+ * ${name}
+ *
+ * A pressable component created with nativeui create.
+ *
+ * @example
+ * \`\`\`tsx
+ * <${name} label="Press me" onPress={() => console.log('Pressed!')} />
+ * \`\`\`
+ */
+export const ${name} = forwardRef<View, ${name}Props>(
+  ({ label, style, onPressIn, onPressOut, ...props }, ref) => {
+    const { colors, spacing, radius } = useTheme();
+    const scale = useSharedValue(1);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+      transform: [{ scale: scale.value }],
+    }));
+
+    const handlePressIn = (e: any) => {
+      scale.value = withTiming(0.97, { duration: 100 });
+      onPressIn?.(e);
+    };
+
+    const handlePressOut = (e: any) => {
+      scale.value = withTiming(1, { duration: 100 });
+      onPressOut?.(e);
+    };
+
+    return (
+      <AnimatedPressable
+        ref={ref}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        style={[
+          styles.container,
+          {
+            backgroundColor: colors.primary,
+            paddingVertical: spacing[3],
+            paddingHorizontal: spacing[4],
+            borderRadius: radius.md,
+          },
+          animatedStyle,
+          style,
+        ]}
+        {...props}
+      >
+        {label && (
+          <Text style={[styles.label, { color: colors.primaryForeground }]}>
+            {label}
+          </Text>
+        )}
+      </AnimatedPressable>
+    );
+  }
+);
+
+${name}.displayName = '${name}';
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  label: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});
+`;
+  }
+  return `import React from 'react';
+import { Pressable, Text, StyleSheet, PressableProps } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { useTheme } from '@nativeui/core';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export interface ${name}Props extends Omit<PressableProps, 'style'> {
+  /**
+   * Button label
+   */
+  label?: string;
+  /**
+   * Custom style
+   */
+  style?: PressableProps['style'];
+}
+
+/**
+ * ${name}
+ *
+ * A pressable component created with nativeui create.
+ *
+ * @example
+ * \`\`\`tsx
+ * <${name} label="Press me" onPress={() => console.log('Pressed!')} />
+ * \`\`\`
+ */
+export function ${name}({ label, style, onPressIn, onPressOut, ...props }: ${name}Props) {
+  const { colors, spacing, radius } = useTheme();
+  const scale = useSharedValue(1);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  const handlePressIn = (e: any) => {
+    scale.value = withTiming(0.97, { duration: 100 });
+    onPressIn?.(e);
+  };
+
+  const handlePressOut = (e: any) => {
+    scale.value = withTiming(1, { duration: 100 });
+    onPressOut?.(e);
+  };
+
+  return (
+    <AnimatedPressable
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      style={[
+        styles.container,
+        {
+          backgroundColor: colors.primary,
+          paddingVertical: spacing[3],
+          paddingHorizontal: spacing[4],
+          borderRadius: radius.md,
+        },
+        animatedStyle,
+        style,
+      ]}
+      {...props}
+    >
+      {label && (
+        <Text style={[styles.label, { color: colors.primaryForeground }]}>
+          {label}
+        </Text>
+      )}
+    </AnimatedPressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  label: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});
+`;
+}
+function generateInputComponent(name, forwardRef) {
+  if (forwardRef) {
+    return `import React, { forwardRef, useState } from 'react';
+import { TextInput, View, Text, StyleSheet, TextInputProps } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { useTheme } from '@nativeui/core';
+
+export interface ${name}Props extends TextInputProps {
+  /**
+   * Input label
+   */
+  label?: string;
+  /**
+   * Error message
+   */
+  error?: string;
+}
+
+/**
+ * ${name}
+ *
+ * A custom input component created with nativeui create.
+ *
+ * @example
+ * \`\`\`tsx
+ * <${name}
+ *   label="Email"
+ *   placeholder="Enter your email"
+ *   keyboardType="email-address"
+ * />
+ * \`\`\`
+ */
+export const ${name} = forwardRef<TextInput, ${name}Props>(
+  ({ label, error, style, onFocus, onBlur, ...props }, ref) => {
+    const { colors, spacing, radius } = useTheme();
+    const [isFocused, setIsFocused] = useState(false);
+    const borderColor = useSharedValue(colors.border);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+      borderColor: borderColor.value,
+    }));
+
+    const handleFocus = (e: any) => {
+      setIsFocused(true);
+      borderColor.value = withTiming(colors.primary, { duration: 150 });
+      onFocus?.(e);
+    };
+
+    const handleBlur = (e: any) => {
+      setIsFocused(false);
+      borderColor.value = withTiming(
+        error ? colors.destructive : colors.border,
+        { duration: 150 }
+      );
+      onBlur?.(e);
+    };
+
+    return (
+      <View style={styles.container}>
+        {label && (
+          <Text style={[styles.label, { color: colors.foreground }]}>
+            {label}
+          </Text>
+        )}
+        <Animated.View
+          style={[
+            styles.inputContainer,
+            {
+              backgroundColor: colors.background,
+              borderRadius: radius.md,
+              borderWidth: 1,
+            },
+            animatedStyle,
+          ]}
+        >
+          <TextInput
+            ref={ref}
+            style={[
+              styles.input,
+              {
+                color: colors.foreground,
+                paddingHorizontal: spacing[3],
+                paddingVertical: spacing[2],
+              },
+              style,
+            ]}
+            placeholderTextColor={colors.mutedForeground}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            {...props}
+          />
+        </Animated.View>
+        {error && (
+          <Text style={[styles.error, { color: colors.destructive }]}>
+            {error}
+          </Text>
+        )}
+      </View>
+    );
+  }
+);
+
+${name}.displayName = '${name}';
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 4,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '500',
+  },
+  inputContainer: {},
+  input: {
+    fontSize: 16,
+    minHeight: 44,
+  },
+  error: {
+    fontSize: 12,
+  },
+});
+`;
+  }
+  return `import React, { useState } from 'react';
+import { TextInput, View, Text, StyleSheet, TextInputProps } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { useTheme } from '@nativeui/core';
+
+export interface ${name}Props extends TextInputProps {
+  /**
+   * Input label
+   */
+  label?: string;
+  /**
+   * Error message
+   */
+  error?: string;
+}
+
+/**
+ * ${name}
+ *
+ * A custom input component created with nativeui create.
+ *
+ * @example
+ * \`\`\`tsx
+ * <${name}
+ *   label="Email"
+ *   placeholder="Enter your email"
+ *   keyboardType="email-address"
+ * />
+ * \`\`\`
+ */
+export function ${name}({ label, error, style, onFocus, onBlur, ...props }: ${name}Props) {
+  const { colors, spacing, radius } = useTheme();
+  const [isFocused, setIsFocused] = useState(false);
+  const borderColor = useSharedValue(colors.border);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    borderColor: borderColor.value,
+  }));
+
+  const handleFocus = (e: any) => {
+    setIsFocused(true);
+    borderColor.value = withTiming(colors.primary, { duration: 150 });
+    onFocus?.(e);
+  };
+
+  const handleBlur = (e: any) => {
+    setIsFocused(false);
+    borderColor.value = withTiming(
+      error ? colors.destructive : colors.border,
+      { duration: 150 }
+    );
+    onBlur?.(e);
+  };
+
+  return (
+    <View style={styles.container}>
+      {label && (
+        <Text style={[styles.label, { color: colors.foreground }]}>
+          {label}
+        </Text>
+      )}
+      <Animated.View
+        style={[
+          styles.inputContainer,
+          {
+            backgroundColor: colors.background,
+            borderRadius: radius.md,
+            borderWidth: 1,
+          },
+          animatedStyle,
+        ]}
+      >
+        <TextInput
+          style={[
+            styles.input,
+            {
+              color: colors.foreground,
+              paddingHorizontal: spacing[3],
+              paddingVertical: spacing[2],
+            },
+            style,
+          ]}
+          placeholderTextColor={colors.mutedForeground}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          {...props}
+        />
+      </Animated.View>
+      {error && (
+        <Text style={[styles.error, { color: colors.destructive }]}>
+          {error}
+        </Text>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 4,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '500',
+  },
+  inputContainer: {},
+  input: {
+    fontSize: 16,
+    minHeight: 44,
+  },
+  error: {
+    fontSize: 12,
+  },
+});
+`;
+}
+
+// src/commands/pick.ts
+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";
+function groupByCategory(items) {
+  const groups = {};
+  for (const item of items) {
+    const category = item.category || "other";
+    if (!groups[category]) {
+      groups[category] = [];
+    }
+    groups[category].push(item);
+  }
+  const categoryOrder = [
+    "primitive",
+    "input",
+    "data-display",
+    "overlay",
+    "navigation",
+    "mobile",
+    "media",
+    "layout",
+    "form",
+    "block",
+    "screen",
+    "other"
+  ];
+  return categoryOrder.filter((cat) => groups[cat]?.length > 0).map((cat) => ({
+    name: formatCategoryName(cat),
+    items: groups[cat].sort((a, b) => a.name.localeCompare(b.name))
+  }));
+}
+function formatCategoryName(category) {
+  const names = {
+    primitive: "\u{1F9F1} Primitives",
+    input: "\u{1F4DD} Inputs & Forms",
+    "data-display": "\u{1F4CA} Data Display",
+    overlay: "\u{1F3AD} Overlays & Feedback",
+    navigation: "\u{1F9ED} Navigation",
+    mobile: "\u{1F4F1} Mobile Patterns",
+    media: "\u{1F5BC}\uFE0F  Media",
+    layout: "\u{1F4D0} Layout",
+    form: "\u{1F4CB} Form System",
+    block: "\u{1F3D7}\uFE0F  Blocks",
+    screen: "\u{1F4FA} Screens",
+    other: "\u{1F4E6} Other"
+  };
+  return names[category] || category;
+}
+function formatComponentChoice(item, installed) {
+  const isInstalled = installed.has(item.name);
+  const status = isInstalled ? chalk9.green(" \u2713") : "";
+  const description = item.description || "";
+  return {
+    title: `${item.name}${status}`,
+    description: description.length > 60 ? description.slice(0, 57) + "..." : description,
+    value: item.name,
+    disabled: isInstalled
+  };
+}
+function transformImports4(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;
+}
+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 projectRoot = await getProjectRoot(cwd);
+  if (!projectRoot) {
+    console.log(chalk9.red("Could not find a valid project."));
+    console.log(chalk9.dim("Run `npx nativeui init` first.\n"));
+    return;
+  }
+  const config = await getConfig(projectRoot);
+  if (!config) {
+    console.log(chalk9.yellow("No nativeui.config.ts found. Run `npx nativeui init` first.\n"));
+    return;
+  }
+  const spinner = ora7("Loading component registry...").start();
+  const registry = await getRegistry();
+  if (!registry.length) {
+    spinner.fail("Could not load registry");
+    return;
+  }
+  spinner.succeed(`Loaded ${registry.length} components`);
+  const componentsDir = path9.join(projectRoot, config.componentsPath);
+  const installed = /* @__PURE__ */ new Set();
+  if (fs9.existsSync(componentsDir)) {
+    const files = fs9.readdirSync(componentsDir);
+    for (const file of files) {
+      if (file.endsWith(".tsx")) {
+        installed.add(file.replace(".tsx", ""));
+      }
+    }
+  }
+  const categories = groupByCategory(registry);
+  let selectedCategory = null;
+  if (!options.all) {
+    const categoryChoices = categories.map((cat) => ({
+      title: `${cat.name} (${cat.items.length})`,
+      value: cat
+    }));
+    categoryChoices.unshift({
+      title: "\u{1F4E6} All Components",
+      value: { name: "All", items: registry }
+    });
+    const categoryResponse = await prompts5({
+      type: "select",
+      name: "category",
+      message: "Select a category",
+      choices: categoryChoices
+    });
+    if (!categoryResponse.category) {
+      console.log(chalk9.yellow("\nCancelled.\n"));
+      return;
+    }
+    selectedCategory = categoryResponse.category;
+  } else {
+    selectedCategory = { name: "All", items: registry };
+  }
+  if (!selectedCategory) return;
+  const componentChoices = selectedCategory.items.map(
+    (item) => formatComponentChoice(item, installed)
+  );
+  const availableCount = componentChoices.filter((c) => !c.disabled).length;
+  if (availableCount === 0) {
+    console.log(chalk9.green("\n\u2713 All components in this category are already installed!\n"));
+    return;
+  }
+  console.log(chalk9.dim(`
+${installed.size} already installed, ${availableCount} available
+`));
+  const componentResponse = await prompts5({
+    type: "multiselect",
+    name: "components",
+    message: "Select components to install (space to select, enter to confirm)",
+    choices: componentChoices,
+    hint: "- Space to select. Return to submit",
+    instructions: false
+  });
+  if (!componentResponse.components || componentResponse.components.length === 0) {
+    console.log(chalk9.yellow("\nNo components selected.\n"));
+    return;
+  }
+  const selectedComponents = componentResponse.components;
+  console.log(chalk9.bold("\nComponents to install:"));
+  for (const name of selectedComponents) {
+    console.log(chalk9.cyan(`  \u2022 ${name}`));
+  }
+  const confirmResponse = await prompts5({
+    type: "confirm",
+    name: "proceed",
+    message: `Install ${selectedComponents.length} component(s)?`,
+    initial: true
+  });
+  if (!confirmResponse.proceed) {
+    console.log(chalk9.yellow("\nCancelled.\n"));
+    return;
+  }
+  console.log("");
+  let successCount = 0;
+  const allDependencies = [];
+  const allDevDependencies = [];
+  for (const name of selectedComponents) {
+    const installSpinner = ora7(`Installing ${name}...`).start();
+    try {
+      const component = await fetchComponent(name);
+      if (!component) {
+        installSpinner.fail(`Component "${name}" not found`);
+        continue;
+      }
+      const targetDir = path9.join(projectRoot, config.componentsPath);
+      for (const file of component.files) {
+        const targetPath = path9.join(targetDir, file.name);
+        if (await fs9.pathExists(targetPath) && !options.overwrite) {
+          installSpinner.warn(`${name}: ${file.name} already exists (use --overwrite)`);
+          continue;
+        }
+        await fs9.ensureDir(targetDir);
+        const transformedContent = transformImports4(file.content, config);
+        await fs9.writeFile(targetPath, transformedContent);
+      }
+      installSpinner.succeed(`Installed ${chalk9.green(name)}`);
+      successCount++;
+      if (component.dependencies?.length) {
+        allDependencies.push(...component.dependencies);
+      }
+      if (component.devDependencies?.length) {
+        allDevDependencies.push(...component.devDependencies);
+      }
+      if (component.registryDependencies?.length) {
+        console.log(chalk9.dim(`     Requires: ${component.registryDependencies.join(", ")}`));
+      }
+    } catch (error) {
+      installSpinner.fail(`Failed to install ${name}: ${error}`);
+    }
+  }
+  console.log(
+    chalk9.bold.green(`
+\u2713 Successfully installed ${successCount}/${selectedComponents.length} components
+`)
+  );
+  const uniqueDeps = [...new Set(allDependencies)];
+  const uniqueDevDeps = [...new Set(allDevDependencies)];
+  if (uniqueDeps.length || uniqueDevDeps.length) {
+    console.log(chalk9.bold("Install dependencies:"));
+    if (uniqueDeps.length) {
+      console.log(chalk9.cyan(`  npx expo install ${uniqueDeps.join(" ")}`));
+    }
+    if (uniqueDevDeps.length) {
+      console.log(chalk9.cyan(`  npm install -D ${uniqueDevDeps.join(" ")}`));
+    }
+    console.log("");
+  }
+  if (successCount > 0) {
+    console.log(chalk9.dim("Import example:"));
+    const firstComponent = selectedComponents[0];
+    const pascalName = firstComponent.split("-").map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join("");
+    const alias = config.aliases?.components || "@/components/ui";
+    console.log(chalk9.dim(`  import { ${pascalName} } from '${alias}/${firstComponent}';
+`));
+  }
+});
+
+// src/index.ts
+var program = new Command9();
+program.name("nativeui").description("Add beautiful UI components to your Expo/React Native project").version("0.0.1");
+program.addCommand(initCommand);
+program.addCommand(addCommand);
+program.addCommand(listCommand);
+program.addCommand(doctorCommand);
+program.addCommand(diffCommand);
+program.addCommand(updateCommand);
+program.addCommand(createCommand);
+program.addCommand(pickCommand);
+program.parse();