bearnie 0.1.7 → 0.2.0

package/README.md

@@ -61,13 +61,16 @@ This will:
 - Set up the `src/components/bearnie` directory
 - Create the `cn()` utility function
 - Install `clsx`, `tailwind-merge`, and `tailwindcss` dependencies
+- Add the `@/*` path alias to `tsconfig.json`
+- Wire `@tailwindcss/vite` into your Astro config (simple configs only — you get a hint otherwise)
+- Install the theme variables to `src/styles/bearnie.css`
 
 Projects created with `create-bearnie` already include `bearnie.json` and can skip init.
 
 **Options:**
 
 - `-y, --yes` - Skip confirmation prompts and use defaults
-- `-c, --cwd <path>` - Set the working directory (defaults to current directory)
+- `--cwd <path>` - Set the working directory (defaults to current directory)
 
 ### `add`
 
@@ -90,11 +93,14 @@ npx bearnie add barrel
 npx bearnie add
 ```
 
+If a file already exists, `add` asks before overwriting it (existing files are kept if you decline).
+
 **Options:**
 
-- `-y, --yes` - Skip confirmation prompts
+- `-y, --yes` - Skip confirmation prompts and overwrite existing files
 - `-a, --all` - Add all available components
-- `-c, --cwd <path>` - Set the working directory
+- `-o, --overwrite` - Overwrite existing files without asking
+- `--cwd <path>` - Set the working directory
 
 ### `list`
 
@@ -114,6 +120,52 @@ Components are grouped by category, including **Theme** (`styles`) and **Meta**
 
 - `--json` - Output as JSON
 
+### `diff`
+
+See how your installed components differ from the current registry — useful after Bearnie ships fixes.
+
+```bash
+# Check all installed components
+npx bearnie diff
+
+# Check specific components
+npx bearnie diff button dialog
+
+# Just list changed files without the full diff
+npx bearnie diff --name-only
+```
+
+**Options:**
+
+- `--name-only` - Only show which files changed, not the diff
+- `--cwd <path>` - Set the working directory
+
+### `update`
+
+Pull the latest registry version of your installed components. Shows what will change and asks for confirmation first — updating overwrites local edits to those files, so run `diff` first if you've customized components.
+
+```bash
+# Update everything that drifted
+npx bearnie update
+
+# Update specific components
+npx bearnie update button dialog
+
+# Skip the confirmation prompt
+npx bearnie update --yes
+```
+
+Any new npm dependencies the updated components need are installed automatically.
+
+**Options:**
+
+- `-y, --yes` - Skip confirmation prompt
+- `--cwd <path>` - Set the working directory
+
+## Package Managers
+
+The CLI detects your package manager from the lockfile (`package-lock.json`, `pnpm-lock.yaml`, `yarn.lock`, `bun.lock`) and uses it for all dependency installs. No configuration needed.
+
 ## Configuration
 
 After running `init`, a `bearnie.json` file is created in your project root:
@@ -187,17 +239,25 @@ BEARNIE_REGISTRY_URL=http://localhost:4321/registry bearnie add button
 
 ## Available Components
 
-**Form:** button, input, textarea, label, checkbox, radio, select, switch
+**Form:** button, button-group, checkbox, combobox, file-upload, input, input-group, input-otp, label, radio, select, slider, switch, textarea, toggle, toggle-group
+
+**Layout:** aspect-ratio, card, scroll-area, separator
+
+**Navigation:** breadcrumb, command, context-menu, dropdown-menu, menubar, pagination, sidebar, stepper, tabs, tree
+
+**Feedback:** alert, empty, progress, skeleton, spinner, toast
+
+**Disclosure:** accordion, alert-dialog, collapsible, dialog, popover, sheet
 
-**Layout:** card, separator, scroll-area, aspect-ratio
+**Display:** avatar, badge, carousel, hover-card, icon, kbd, table, tooltip
 
-**Navigation:** breadcrumb, tabs, dropdown-menu
+**Theme:** styles, theme-toggle
 
-**Feedback:** alert, badge, progress, skeleton, spinner, toast, tooltip
+**Meta:** barrel
 
-**Disclosure:** accordion, collapsible, dialog, popover
+Shared utilities (`cn`, `focus-trap`, and the `ui-runtime-*` modules) are installed automatically as dependencies of the components that need them.
 
-**Display:** avatar, table
+Run `npx bearnie list` for the always-current list.
 
 ## Usage Examples
 

package/dist/commands/add.d.ts

@@ -1,6 +1,7 @@
 interface AddOptions {
     yes?: boolean;
     all?: boolean;
+    overwrite?: boolean;
     cwd: string;
 }
 export declare function add(components: string[], options: AddOptions): Promise<void>;

package/dist/commands/diff.d.ts

@@ -0,0 +1,6 @@
+interface DiffOptions {
+    cwd: string;
+    nameOnly?: boolean;
+}
+export declare function diff(components: string[], options: DiffOptions): Promise<void>;
+export {};

package/dist/commands/update.d.ts

@@ -0,0 +1,6 @@
+interface UpdateOptions {
+    cwd: string;
+    yes?: boolean;
+}
+export declare function update(components: string[], options: UpdateOptions): Promise<void>;
+export {};

package/dist/index.js

@@ -5,14 +5,14 @@ import { readFileSync } from "fs";
 import { dirname, join } from "path";
 import { fileURLToPath } from "url";
 import { Command } from "commander";
-import chalk5 from "chalk";
+import chalk7 from "chalk";
 
 // src/commands/init.ts
 import chalk2 from "chalk";
 import ora from "ora";
 import prompts from "prompts";
-import path2 from "path";
-import fs2 from "fs-extra";
+import path4 from "path";
+import fs4 from "fs-extra";
 import { execa } from "execa";
 
 // src/utils/config.ts
@@ -74,6 +74,83 @@ function resolveInstallPath(cwd, config, filePath, componentType) {
   return path.join(cwd, config.componentsDir, filePath);
 }
 
+// src/utils/registry.ts
+import fs2 from "fs-extra";
+import path2 from "path";
+var REGISTRY_URL = process.env.BEARNIE_REGISTRY_URL || "https://bearnie.dev/registry";
+var REGISTRY_PATH = process.env.BEARNIE_REGISTRY_PATH;
+var REGISTRY_INDEX_URL = `${REGISTRY_URL}/index.json`;
+async function getRegistryIndex() {
+  if (REGISTRY_PATH) {
+    const indexPath = path2.join(REGISTRY_PATH, "index.json");
+    if (await fs2.pathExists(indexPath)) {
+      return fs2.readJson(indexPath);
+    }
+    throw new Error(`Registry index not found at: ${indexPath}`);
+  }
+  const response = await fetch(REGISTRY_INDEX_URL);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch registry index: ${response.statusText}`);
+  }
+  return response.json();
+}
+async function getComponent(name) {
+  if (REGISTRY_PATH) {
+    const componentPath = path2.join(REGISTRY_PATH, `${name}.json`);
+    if (await fs2.pathExists(componentPath)) {
+      return fs2.readJson(componentPath);
+    }
+    throw new Error(`Component "${name}" not found at: ${componentPath}`);
+  }
+  const url = `${REGISTRY_URL}/${name}.json`;
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Component "${name}" not found in registry`);
+  }
+  return response.json();
+}
+async function resolveComponentDependencies(names, resolved = /* @__PURE__ */ new Set()) {
+  const result = [];
+  for (const name of names) {
+    if (resolved.has(name)) continue;
+    resolved.add(name);
+    const component = await getComponent(name);
+    if (component.registryDependencies?.length) {
+      const deps = await resolveComponentDependencies(
+        component.registryDependencies,
+        resolved
+      );
+      result.push(...deps);
+    }
+    result.push(name);
+  }
+  return result;
+}
+
+// src/utils/pm.ts
+import fs3 from "fs-extra";
+import path3 from "path";
+function detectPackageManager(cwd) {
+  if (fs3.existsSync(path3.join(cwd, "pnpm-lock.yaml"))) return "pnpm";
+  if (fs3.existsSync(path3.join(cwd, "bun.lock")) || fs3.existsSync(path3.join(cwd, "bun.lockb"))) {
+    return "bun";
+  }
+  if (fs3.existsSync(path3.join(cwd, "yarn.lock"))) return "yarn";
+  if (fs3.existsSync(path3.join(cwd, "package-lock.json"))) return "npm";
+  const userAgent = process.env.npm_config_user_agent ?? "";
+  if (userAgent.startsWith("pnpm")) return "pnpm";
+  if (userAgent.startsWith("yarn")) return "yarn";
+  if (userAgent.startsWith("bun")) return "bun";
+  return "npm";
+}
+function installCommand(pm, packages, dev = false) {
+  const devFlag = dev ? ["-D"] : [];
+  if (pm === "npm") {
+    return { command: "npm", args: ["install", ...devFlag, ...packages] };
+  }
+  return { command: pm, args: ["add", ...devFlag, ...packages] };
+}
+
 // src/utils/ui.ts
 import chalk from "chalk";
 var brand = {
@@ -176,8 +253,65 @@ var promptsTheme = {
 };
 
 // src/commands/init.ts
+async function ensureTsconfigPaths(cwd) {
+  const tsconfigPath = path4.join(cwd, "tsconfig.json");
+  if (!await fs4.pathExists(tsconfigPath)) {
+    await fs4.writeJson(
+      tsconfigPath,
+      {
+        extends: "astro/tsconfigs/strict",
+        compilerOptions: {
+          baseUrl: ".",
+          paths: { "@/*": ["./src/*"] }
+        }
+      },
+      { spaces: 2 }
+    );
+    return "done";
+  }
+  try {
+    const tsconfig = await fs4.readJson(tsconfigPath);
+    const compilerOptions = tsconfig.compilerOptions ?? {};
+    if (compilerOptions.paths?.["@/*"]) return "already";
+    tsconfig.compilerOptions = {
+      ...compilerOptions,
+      baseUrl: compilerOptions.baseUrl ?? ".",
+      paths: { ...compilerOptions.paths, "@/*": ["./src/*"] }
+    };
+    await fs4.writeJson(tsconfigPath, tsconfig, { spaces: 2 });
+    return "done";
+  } catch {
+    return "manual";
+  }
+}
+async function wireTailwindPlugin(cwd) {
+  const candidates = [
+    "astro.config.mjs",
+    "astro.config.ts",
+    "astro.config.mts",
+    "astro.config.js"
+  ];
+  for (const name of candidates) {
+    const configPath = path4.join(cwd, name);
+    if (!await fs4.pathExists(configPath)) continue;
+    let content = await fs4.readFile(configPath, "utf-8");
+    if (content.includes("@tailwindcss/vite")) return "already";
+    if (/vite\s*:/.test(content) || !content.includes("defineConfig({")) {
+      return "manual";
+    }
+    content = content.replace(
+      "defineConfig({",
+      "defineConfig({\n  vite: {\n    plugins: [tailwindcss()],\n  },"
+    );
+    content = `import tailwindcss from "@tailwindcss/vite";
+${content}`;
+    await fs4.writeFile(configPath, content);
+    return "done";
+  }
+  return "manual";
+}
 async function init(options) {
-  const cwd = path2.resolve(options.cwd);
+  const cwd = path4.resolve(options.cwd);
   print.logo();
   console.log(`  ${messages.initStart()}`);
   print.newline();
@@ -188,8 +322,8 @@ async function init(options) {
     print.newline();
     process.exit(1);
   }
-  const configPath = path2.join(cwd, CONFIG_FILE);
-  if (await fs2.pathExists(configPath)) {
+  const configPath = path4.join(cwd, CONFIG_FILE);
+  if (await fs4.pathExists(configPath)) {
     print.warning(messages.alreadyInit());
     print.newline();
     const { overwrite } = options.yes ? { overwrite: true } : await prompts({
@@ -204,6 +338,7 @@ async function init(options) {
       process.exit(0);
     }
   }
+  const pm = detectPackageManager(cwd);
   const hasTailwind = await hasTailwindInstalled(cwd);
   if (!hasTailwind) {
     print.warning("Tailwind CSS isn't installed yet.");
@@ -219,17 +354,21 @@ async function init(options) {
         color: "green"
       }).start();
       try {
-        await execa(
-          "npm",
-          ["install", "-D", "tailwindcss", "@tailwindcss/vite"],
-          { cwd }
+        const { command, args } = installCommand(
+          pm,
+          ["tailwindcss", "@tailwindcss/vite"],
+          true
         );
+        await execa(command, args, { cwd });
         spinner2.succeed(brand.success("Tailwind CSS is ready"));
       } catch (error) {
         spinner2.fail("Couldn't install Tailwind CSS");
-        print.hint(
-          "Try manually: npm install -D tailwindcss @tailwindcss/vite"
+        const { command, args } = installCommand(
+          pm,
+          ["tailwindcss", "@tailwindcss/vite"],
+          true
         );
+        print.hint(`Try manually: ${command} ${args.join(" ")}`);
       }
     }
   }
@@ -262,15 +401,15 @@ async function init(options) {
     color: "green"
   }).start();
   try {
-    await fs2.ensureDir(path2.join(cwd, config.componentsDir));
-    await fs2.ensureDir(path2.join(cwd, config.utilsDir));
-    await fs2.ensureDir(path2.join(cwd, config.stylesDir));
+    await fs4.ensureDir(path4.join(cwd, config.componentsDir));
+    await fs4.ensureDir(path4.join(cwd, config.utilsDir));
+    await fs4.ensureDir(path4.join(cwd, config.stylesDir));
     spinner.text = "Creating directories...";
   } catch (error) {
     spinner.fail("Couldn't create directories");
     process.exit(1);
   }
-  const cnUtilContent = `import { type ClassValue, clsx } from "clsx";
+  const cnFallbackContent = `import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
@@ -278,10 +417,17 @@ export function cn(...inputs: ClassValue[]) {
 }
 `;
   try {
-    const utilPath = path2.join(cwd, config.utilsDir, "cn.ts");
-    if (!await fs2.pathExists(utilPath)) {
-      await fs2.writeFile(utilPath, cnUtilContent);
-      const packageJson = await fs2.readJson(path2.join(cwd, "package.json"));
+    const utilPath = path4.join(cwd, config.utilsDir, "cn.ts");
+    if (!await fs4.pathExists(utilPath)) {
+      let cnContent = cnFallbackContent;
+      try {
+        const cnEntry = await getComponent("cn");
+        const cnFile = cnEntry.files.find((f) => f.name === "cn.ts");
+        if (cnFile) cnContent = cnFile.content;
+      } catch {
+      }
+      await fs4.writeFile(utilPath, cnContent);
+      const packageJson = await fs4.readJson(path4.join(cwd, "package.json"));
       const deps = {
         ...packageJson.dependencies,
         ...packageJson.devDependencies
@@ -291,7 +437,8 @@ export function cn(...inputs: ClassValue[]) {
       if (!("tailwind-merge" in deps)) toInstall.push("tailwind-merge");
       if (toInstall.length > 0) {
         spinner.text = "Installing utilities...";
-        await execa("npm", ["install", ...toInstall], { cwd });
+        const { command, args } = installCommand(pm, toInstall);
+        await execa(command, args, { cwd });
       }
     }
   } catch (error) {
@@ -304,12 +451,51 @@ export function cn(...inputs: ClassValue[]) {
     spinner.fail("Couldn't save configuration");
     process.exit(1);
   }
+  const manualSteps = [];
+  const tsconfigResult = await ensureTsconfigPaths(cwd);
+  if (tsconfigResult === "done") {
+    print.step(`${brand.success("\u2713")} Added ${chalk2.cyan("@/*")} path alias to tsconfig.json`);
+  } else if (tsconfigResult === "manual") {
+    manualSteps.push(
+      `Add to tsconfig.json: ${chalk2.cyan(`"paths": { "@/*": ["./src/*"] }`)} under compilerOptions`
+    );
+  }
+  const tailwindResult = await wireTailwindPlugin(cwd);
+  if (tailwindResult === "done") {
+    print.step(`${brand.success("\u2713")} Added ${chalk2.cyan("@tailwindcss/vite")} to your Astro config`);
+  } else if (tailwindResult === "manual") {
+    manualSteps.push(
+      `Add ${chalk2.cyan("tailwindcss()")} from ${chalk2.cyan("@tailwindcss/vite")} to vite.plugins in your Astro config`
+    );
+  }
+  try {
+    const stylesEntry = await getComponent("styles");
+    let stylesWritten = false;
+    for (const file of stylesEntry.files) {
+      const stylesPath = path4.join(cwd, config.stylesDir, file.name);
+      if (!await fs4.pathExists(stylesPath)) {
+        await fs4.ensureDir(path4.dirname(stylesPath));
+        await fs4.writeFile(stylesPath, file.content);
+        stylesWritten = true;
+      }
+    }
+    if (stylesWritten) {
+      print.step(
+        `${brand.success("\u2713")} Added theme variables to ${chalk2.cyan(`${config.stylesDir}/bearnie.css`)}`
+      );
+      manualSteps.push(
+        `Import the styles in your global CSS: ${chalk2.cyan(`@import "./bearnie.css";`)} (after ${chalk2.cyan(`@import "tailwindcss";`)})`
+      );
+    }
+  } catch {
+    manualSteps.push(`Add theme variables: ${chalk2.cyan("npx bearnie add styles")}`);
+  }
   print.newline();
   console.log(`  ${messages.initSuccess()}`);
   print.nextSteps([
+    ...manualSteps,
     `Add your first component: ${chalk2.cyan("npx bearnie add button")}`,
-    `Browse all components: ${chalk2.cyan("npx bearnie list")}`,
-    `Add CSS variables: ${chalk2.cyan("npx bearnie add styles")}`
+    `Browse all components: ${chalk2.cyan("npx bearnie list")}`
   ]);
   print.footer();
 }
@@ -318,66 +504,11 @@ export function cn(...inputs: ClassValue[]) {
 import chalk3 from "chalk";
 import ora2 from "ora";
 import prompts2 from "prompts";
-import path4 from "path";
-import fs4 from "fs-extra";
+import path5 from "path";
+import fs5 from "fs-extra";
 import { execa as execa2 } from "execa";
-
-// src/utils/registry.ts
-import fs3 from "fs-extra";
-import path3 from "path";
-var REGISTRY_URL = process.env.BEARNIE_REGISTRY_URL || "https://bearnie.dev/registry";
-var REGISTRY_PATH = process.env.BEARNIE_REGISTRY_PATH;
-var REGISTRY_INDEX_URL = `${REGISTRY_URL}/index.json`;
-async function getRegistryIndex() {
-  if (REGISTRY_PATH) {
-    const indexPath = path3.join(REGISTRY_PATH, "index.json");
-    if (await fs3.pathExists(indexPath)) {
-      return fs3.readJson(indexPath);
-    }
-    throw new Error(`Registry index not found at: ${indexPath}`);
-  }
-  const response = await fetch(REGISTRY_INDEX_URL);
-  if (!response.ok) {
-    throw new Error(`Failed to fetch registry index: ${response.statusText}`);
-  }
-  return response.json();
-}
-async function getComponent(name) {
-  if (REGISTRY_PATH) {
-    const componentPath = path3.join(REGISTRY_PATH, `${name}.json`);
-    if (await fs3.pathExists(componentPath)) {
-      return fs3.readJson(componentPath);
-    }
-    throw new Error(`Component "${name}" not found at: ${componentPath}`);
-  }
-  const url = `${REGISTRY_URL}/${name}.json`;
-  const response = await fetch(url);
-  if (!response.ok) {
-    throw new Error(`Component "${name}" not found in registry`);
-  }
-  return response.json();
-}
-async function resolveComponentDependencies(names, resolved = /* @__PURE__ */ new Set()) {
-  const result = [];
-  for (const name of names) {
-    if (resolved.has(name)) continue;
-    resolved.add(name);
-    const component = await getComponent(name);
-    if (component.registryDependencies?.length) {
-      const deps = await resolveComponentDependencies(
-        component.registryDependencies,
-        resolved
-      );
-      result.push(...deps);
-    }
-    result.push(name);
-  }
-  return result;
-}
-
-// src/commands/add.ts
 async function add(components, options) {
-  const cwd = path4.resolve(options.cwd);
+  const cwd = path5.resolve(options.cwd);
   print.logo();
   console.log(`  ${messages.addStart()}`);
   print.newline();
@@ -471,46 +602,86 @@ async function add(components, options) {
   const npmDevDeps = /* @__PURE__ */ new Set();
   const writtenFiles = [];
   const skippedFiles = [];
+  const plans = [];
   for (const componentName of allComponents) {
-    const spinner = ora2({
-      text: messages.installing(componentName),
-      color: "green"
-    }).start();
     try {
       const component = await getComponent(componentName);
       component.dependencies?.forEach((d) => npmDeps.add(d));
       component.devDependencies?.forEach((d) => npmDevDeps.add(d));
+      const files = [];
       for (const file of component.files) {
-        const filePath = resolveInstallPath(
+        const absPath = resolveInstallPath(
           cwd,
           config,
           file.path,
           component.type
         );
-        const exists = await fs4.pathExists(filePath);
-        if (exists && !options.yes) {
-          skippedFiles.push(file.path);
+        files.push({
+          registryPath: file.path,
+          absPath,
+          content: file.content,
+          exists: await fs5.pathExists(absPath)
+        });
+      }
+      plans.push({ component, files });
+    } catch (error) {
+      print.error(`Couldn't fetch ${componentName}`);
+      print.hint(`${error}`);
+    }
+  }
+  const existingFiles = plans.flatMap((p) => p.files.filter((f) => f.exists));
+  let overwrite = Boolean(options.yes || options.overwrite);
+  if (existingFiles.length > 0 && !overwrite) {
+    print.warning(
+      `${existingFiles.length} file${existingFiles.length > 1 ? "s" : ""} already exist${existingFiles.length > 1 ? "" : "s"}:`
+    );
+    existingFiles.slice(0, 5).forEach((f) => {
+      console.log(brand.muted(`     ${f.registryPath}`));
+    });
+    if (existingFiles.length > 5) {
+      console.log(brand.muted(`     ...and ${existingFiles.length - 5} more`));
+    }
+    print.newline();
+    const { confirmOverwrite } = await prompts2({
+      type: "confirm",
+      name: "confirmOverwrite",
+      message: "Overwrite existing files?",
+      initial: false
+    });
+    overwrite = Boolean(confirmOverwrite);
+    print.newline();
+  }
+  for (const { component, files } of plans) {
+    const spinner = ora2({
+      text: messages.installing(component.name),
+      color: "green"
+    }).start();
+    try {
+      for (const file of files) {
+        if (file.exists && !overwrite) {
+          skippedFiles.push(file.registryPath);
           continue;
         }
-        await fs4.ensureDir(path4.dirname(filePath));
-        await fs4.writeFile(filePath, file.content);
-        writtenFiles.push(file.path);
+        await fs5.ensureDir(path5.dirname(file.absPath));
+        await fs5.writeFile(file.absPath, file.content);
+        writtenFiles.push(file.registryPath);
       }
-      spinner.succeed(messages.installed(componentName));
+      spinner.succeed(messages.installed(component.name));
     } catch (error) {
-      spinner.fail(`Couldn't add ${componentName}`);
+      spinner.fail(`Couldn't add ${component.name}`);
       print.hint(`${error}`);
     }
   }
   const allDeps = [...npmDeps];
   const allDevDeps = [...npmDevDeps];
   if (allDeps.length > 0 || allDevDeps.length > 0) {
+    const pm = detectPackageManager(cwd);
     const depsSpinner = ora2({
       text: messages.installingDeps(),
       color: "green"
     }).start();
     try {
-      const packageJson = await fs4.readJson(path4.join(cwd, "package.json"));
+      const packageJson = await fs5.readJson(path5.join(cwd, "package.json"));
       const existingDeps = {
         ...packageJson.dependencies,
         ...packageJson.devDependencies
@@ -518,12 +689,14 @@ async function add(components, options) {
       const newDeps = allDeps.filter((d) => !(d in existingDeps));
       const newDevDeps = allDevDeps.filter((d) => !(d in existingDeps));
       if (newDeps.length > 0) {
-        await execa2("npm", ["install", ...newDeps], { cwd });
+        const { command, args } = installCommand(pm, newDeps);
+        await execa2(command, args, { cwd });
       }
       if (newDevDeps.length > 0) {
-        await execa2("npm", ["install", "-D", ...newDevDeps], { cwd });
+        const { command, args } = installCommand(pm, newDevDeps, true);
+        await execa2(command, args, { cwd });
       }
-      depsSpinner.succeed("Dependencies installed");
+      depsSpinner.succeed(`Dependencies installed ${brand.muted(`(${pm})`)}`);
     } catch {
       depsSpinner.fail("Some dependencies couldn't be installed");
       print.hint("You might need to install them manually.");
@@ -546,7 +719,7 @@ async function add(components, options) {
     console.log(
       `  ${brand.warning("\u26A0")} Skipped ${skippedFiles.length} existing file${skippedFiles.length > 1 ? "s" : ""}`
     );
-    print.hint(`Use ${chalk3.cyan("--yes")} to overwrite.`);
+    print.hint(`Use ${chalk3.cyan("--overwrite")} to replace them.`);
   }
   print.newline();
   print.success();
@@ -630,14 +803,296 @@ async function list(options) {
   }
 }
 
+// src/commands/diff.ts
+import chalk5 from "chalk";
+import ora4 from "ora";
+import path6 from "path";
+import { structuredPatch } from "diff";
+
+// src/utils/installed.ts
+import fs6 from "fs-extra";
+async function getAllRegistryNames() {
+  const index = await getRegistryIndex();
+  const names = index.components.map((c) => c.name);
+  for (const utility of index.utilities ?? []) {
+    names.push(utility.name);
+  }
+  return names;
+}
+async function getEntryState(cwd, config, name) {
+  const entry = await getComponent(name);
+  const files = [];
+  let anyExists = false;
+  for (const file of entry.files) {
+    const absPath = resolveInstallPath(cwd, config, file.path, entry.type);
+    const exists = await fs6.pathExists(absPath);
+    let status = "missing";
+    let localContent;
+    if (exists) {
+      anyExists = true;
+      localContent = await fs6.readFile(absPath, "utf-8");
+      status = localContent === file.content ? "unchanged" : "modified";
+    }
+    files.push({
+      path: file.path,
+      absPath,
+      status,
+      localContent,
+      registryContent: file.content
+    });
+  }
+  if (!anyExists) return null;
+  return {
+    entry,
+    files,
+    hasChanges: files.some((f) => f.status !== "unchanged")
+  };
+}
+async function getInstalledEntries(cwd, config, names) {
+  const allNames = await getAllRegistryNames();
+  if (names?.length) {
+    const unknown = names.filter((n) => !allNames.includes(n));
+    if (unknown.length > 0) {
+      throw new Error(`Unknown components: ${unknown.join(", ")}`);
+    }
+  }
+  const targets = names?.length ? names : allNames;
+  const installed = [];
+  for (const name of targets) {
+    const state = await getEntryState(cwd, config, name);
+    if (state) installed.push(state);
+  }
+  return installed;
+}
+
+// src/commands/diff.ts
+function printFileDiff(filePath, local, registry) {
+  const patch = structuredPatch(filePath, filePath, local, registry, "", "", {
+    context: 3
+  });
+  for (const hunk of patch.hunks) {
+    console.log(
+      brand.info(
+        `  @@ -${hunk.oldStart},${hunk.oldLines} +${hunk.newStart},${hunk.newLines} @@`
+      )
+    );
+    for (const line of hunk.lines) {
+      if (line.startsWith("+")) {
+        console.log(`  ${chalk5.green(line)}`);
+      } else if (line.startsWith("-")) {
+        console.log(`  ${chalk5.red(line)}`);
+      } else {
+        console.log(`  ${chalk5.dim(line)}`);
+      }
+    }
+  }
+}
+async function diff(components, options) {
+  const cwd = path6.resolve(options.cwd);
+  const config = await getProjectConfig(cwd) ?? DEFAULT_CONFIG;
+  print.logo();
+  console.log(`  Comparing your components against the registry...`);
+  print.newline();
+  const spinner = ora4({ text: messages.fetching(), color: "green" }).start();
+  let installed;
+  try {
+    installed = await getInstalledEntries(cwd, config, components);
+  } catch (error) {
+    spinner.fail(
+      error instanceof Error ? error.message : messages.networkError()
+    );
+    print.hint(`Run ${chalk5.cyan("npx bearnie list")} to see valid names.`);
+    print.newline();
+    process.exit(1);
+  }
+  if (installed.length === 0) {
+    spinner.fail("No installed Bearnie components found.");
+    print.hint(`Add some first: ${chalk5.cyan("npx bearnie add button")}`);
+    print.newline();
+    return;
+  }
+  const changed = installed.filter((item) => item.hasChanges);
+  spinner.succeed(
+    `Checked ${chalk5.bold(installed.length)} installed component${installed.length > 1 ? "s" : ""}`
+  );
+  print.newline();
+  if (changed.length === 0) {
+    console.log(
+      `  ${brand.success("\u2713")} Everything is up to date with the registry.`
+    );
+    print.newline();
+    return;
+  }
+  for (const item of changed) {
+    console.log(`  ${chalk5.bold(item.entry.name)}`);
+    for (const file of item.files) {
+      if (file.status === "unchanged") continue;
+      if (file.status === "missing") {
+        console.log(
+          `  ${brand.warning("+")} ${file.path} ${brand.muted("(not installed yet)")}`
+        );
+        continue;
+      }
+      console.log(`  ${brand.warning("~")} ${file.path}`);
+      if (!options.nameOnly && file.localContent !== void 0) {
+        printFileDiff(file.path, file.localContent, file.registryContent);
+      }
+    }
+    print.newline();
+  }
+  console.log(
+    `  ${chalk5.bold(changed.length)} component${changed.length > 1 ? "s" : ""} differ${changed.length > 1 ? "" : "s"} from the registry.`
+  );
+  print.hint(
+    `Pull the registry version with ${chalk5.cyan(`npx bearnie update ${changed.map((c) => c.entry.name).join(" ")}`)}`
+  );
+  print.newline();
+}
+
+// src/commands/update.ts
+import chalk6 from "chalk";
+import ora5 from "ora";
+import prompts3 from "prompts";
+import path7 from "path";
+import fs7 from "fs-extra";
+import { execa as execa3 } from "execa";
+async function update(components, options) {
+  const cwd = path7.resolve(options.cwd);
+  const config = await getProjectConfig(cwd) ?? DEFAULT_CONFIG;
+  print.logo();
+  console.log(`  Let's bring your components up to date.`);
+  print.newline();
+  const spinner = ora5({ text: messages.fetching(), color: "green" }).start();
+  let installed;
+  try {
+    installed = await getInstalledEntries(cwd, config, components);
+  } catch (error) {
+    spinner.fail(
+      error instanceof Error ? error.message : messages.networkError()
+    );
+    print.hint(`Run ${chalk6.cyan("npx bearnie list")} to see valid names.`);
+    print.newline();
+    process.exit(1);
+  }
+  if (installed.length === 0) {
+    spinner.fail("No installed Bearnie components found.");
+    print.hint(`Add some first: ${chalk6.cyan("npx bearnie add button")}`);
+    print.newline();
+    return;
+  }
+  const changed = installed.filter((item) => item.hasChanges);
+  spinner.succeed(
+    `Checked ${chalk6.bold(installed.length)} installed component${installed.length > 1 ? "s" : ""}`
+  );
+  print.newline();
+  if (changed.length === 0) {
+    console.log(
+      `  ${brand.success("\u2713")} Everything is already up to date.`
+    );
+    print.newline();
+    return;
+  }
+  const changedFiles = changed.flatMap(
+    (item) => item.files.filter((file) => file.status !== "unchanged")
+  );
+  const modifiedCount = changedFiles.filter(
+    (file) => file.status === "modified"
+  ).length;
+  console.log(`  ${chalk6.bold("These will be updated:")}`);
+  for (const item of changed) {
+    const parts = item.files.filter((file) => file.status !== "unchanged").map(
+      (file) => file.status === "missing" ? `${file.path} (new)` : file.path
+    );
+    console.log(
+      `  ${brand.warning("~")} ${chalk6.bold(item.entry.name)} ${brand.muted(`(${parts.join(", ")})`)}`
+    );
+  }
+  print.newline();
+  if (modifiedCount > 0) {
+    print.warning(
+      `${modifiedCount} file${modifiedCount > 1 ? "s" : ""} differ${modifiedCount > 1 ? "" : "s"} locally \u2014 updating overwrites your local edits.`
+    );
+    print.hint(
+      `Review changes first with ${chalk6.cyan("npx bearnie diff")}`
+    );
+    print.newline();
+  }
+  if (!options.yes) {
+    const { proceed } = await prompts3({
+      type: "confirm",
+      name: "proceed",
+      message: `Update ${changed.length} component${changed.length > 1 ? "s" : ""}?`,
+      initial: true
+    });
+    if (!proceed) {
+      print.hint("No changes made.");
+      print.newline();
+      return;
+    }
+    print.newline();
+  }
+  const npmDeps = /* @__PURE__ */ new Set();
+  let written = 0;
+  for (const item of changed) {
+    const writeSpinner = ora5({
+      text: `Updating ${chalk6.cyan(item.entry.name)}...`,
+      color: "green"
+    }).start();
+    try {
+      for (const file of item.files) {
+        if (file.status === "unchanged") continue;
+        await fs7.ensureDir(path7.dirname(file.absPath));
+        await fs7.writeFile(file.absPath, file.registryContent);
+        written++;
+      }
+      item.entry.dependencies?.forEach((dep) => npmDeps.add(dep));
+      writeSpinner.succeed(`${item.entry.name} updated`);
+    } catch (error) {
+      writeSpinner.fail(`Couldn't update ${item.entry.name}`);
+      print.hint(`${error}`);
+    }
+  }
+  if (npmDeps.size > 0) {
+    try {
+      const packageJson = await fs7.readJson(path7.join(cwd, "package.json"));
+      const existing = {
+        ...packageJson.dependencies,
+        ...packageJson.devDependencies
+      };
+      const missing = [...npmDeps].filter((dep) => !(dep in existing));
+      if (missing.length > 0) {
+        const pm = detectPackageManager(cwd);
+        const depsSpinner = ora5({
+          text: `Installing ${missing.join(", ")} with ${pm}...`,
+          color: "green"
+        }).start();
+        try {
+          const { command, args } = installCommand(pm, missing);
+          await execa3(command, args, { cwd });
+          depsSpinner.succeed("Dependencies installed");
+        } catch {
+          depsSpinner.fail("Some dependencies couldn't be installed");
+          print.hint(`Install manually: ${missing.join(" ")}`);
+        }
+      }
+    } catch {
+    }
+  }
+  print.newline();
+  console.log(
+    `  ${brand.success("\u2713")} Updated ${chalk6.bold(written)} file${written > 1 ? "s" : ""} across ${chalk6.bold(changed.length)} component${changed.length > 1 ? "s" : ""}.`
+  );
+  print.success();
+}
+
 // src/index.ts
 var __dirname = dirname(fileURLToPath(import.meta.url));
 var pkg = JSON.parse(
   readFileSync(join(__dirname, "../package.json"), "utf-8")
 );
-var amber = chalk5.hex("#F59E0B");
-var logo2 = `${amber("\u{1F43B}")} ${chalk5.bold("bearnie")}`;
-var link = (text, url) => `\x1B]8;;${url}\x07${chalk5.cyan(text)}\x1B]8;;\x07`;
+var amber = chalk7.hex("#F59E0B");
+var logo2 = `${amber("\u{1F43B}")} ${chalk7.bold("bearnie")}`;
+var link = (text, url) => `\x1B]8;;${url}\x07${chalk7.cyan(text)}\x1B]8;;\x07`;
 var program = new Command();
 program.name("bearnie").description("UI components for Astro").version(pkg.version).configureOutput({
   writeOut: (str) => process.stdout.write(str),
@@ -647,7 +1102,7 @@ program.name("bearnie").description("UI components for Astro").version(pkg.versi
   ${logo2}
 
 `);
-    write(`  ${chalk5.red("Oops!")} ${str.replace("error: ", "")}
+    write(`  ${chalk7.red("Oops!")} ${str.replace("error: ", "")}
 `);
   }
 }).addHelpText("beforeAll", `
@@ -655,40 +1110,45 @@ program.name("bearnie").description("UI components for Astro").version(pkg.versi
 `).addHelpText(
   "afterAll",
   `
-  ${chalk5.dim("Made with")} ${amber("\u{1F43B}")} ${chalk5.dim("by")} ${link("Michael Andreuzza", "https://michaelandreuzza.com")}
+  ${chalk7.dim("Made with")} ${amber("\u{1F43B}")} ${chalk7.dim("by")} ${link("Michael Andreuzza", "https://michaelandreuzza.com")}
 `
 );
 program.command("init").description("Set up Bearnie in your project").option("-y, --yes", "Skip prompts and use defaults").option("--cwd <path>", "Working directory", process.cwd()).action(init);
-program.command("add").description("Add components to your project").argument("[components...]", "Components to add").option("-y, --yes", "Skip prompts and overwrite files").option("-a, --all", "Add all components").option("--cwd <path>", "Working directory", process.cwd()).action(add);
+program.command("add").description("Add components to your project").argument("[components...]", "Components to add").option("-y, --yes", "Skip prompts and overwrite files").option("-a, --all", "Add all components").option("-o, --overwrite", "Overwrite existing files without asking").option("--cwd <path>", "Working directory", process.cwd()).action(add);
 program.command("list").description("Browse available components").option("--json", "Output as JSON").action(list);
-program.action(() => {
+program.command("diff").description("See how your components differ from the registry").argument("[components...]", "Components to check (defaults to all installed)").option("--name-only", "Only show which files changed, not the diff").option("--cwd <path>", "Working directory", process.cwd()).action(diff);
+program.command("update").description("Update installed components to the latest registry version").argument("[components...]", "Components to update (defaults to all installed)").option("-y, --yes", "Skip confirmation prompt").option("--cwd <path>", "Working directory", process.cwd()).action(update);
+program.argument("[args...]").action((args) => {
+  if (args.length > 0) {
+    console.log(`
+  ${logo2}
+
+  ${chalk7.yellow("Hmm,")} I don't know that command: ${chalk7.red(args.join(" "))}
+
+  Run ${chalk7.cyan("npx bearnie --help")} to see what I can do.
+`);
+    process.exit(1);
+  }
   console.log(`
   ${logo2}
 
   ${amber("Hey!")} UI components for Astro.
   Built with Tailwind CSS, no frameworks required.
 
-  ${chalk5.bold("Commands:")}
-    ${chalk5.cyan("init")}          Set up Bearnie in your project
-    ${chalk5.cyan("add")} ${chalk5.dim("<name>")}    Add a component
-    ${chalk5.cyan("list")}          Browse all components
+  ${chalk7.bold("Commands:")}
+    ${chalk7.cyan("init")}          Set up Bearnie in your project
+    ${chalk7.cyan("add")} ${chalk7.dim("<name>")}    Add a component
+    ${chalk7.cyan("list")}          Browse all components
+    ${chalk7.cyan("diff")}          See what changed in the registry
+    ${chalk7.cyan("update")}        Pull the latest component fixes
 
-  ${chalk5.bold("Examples:")}
-    ${chalk5.dim("$")} npx bearnie init
-    ${chalk5.dim("$")} npx bearnie add button card
-    ${chalk5.dim("$")} npx bearnie add --all
+  ${chalk7.bold("Examples:")}
+    ${chalk7.dim("$")} npx bearnie init
+    ${chalk7.dim("$")} npx bearnie add button card
+    ${chalk7.dim("$")} npx bearnie diff
+    ${chalk7.dim("$")} npx bearnie update --yes
 
-  ${chalk5.dim("Run")} ${chalk5.cyan("bearnie <command> --help")} ${chalk5.dim("for more info")}
+  ${chalk7.dim("Run")} ${chalk7.cyan("bearnie <command> --help")} ${chalk7.dim("for more info")}
 `);
 });
 program.parse();
-program.on("command:*", () => {
-  console.log(`
-  ${logo2}
-
-  ${chalk5.yellow("Hmm,")} I don't know that command: ${chalk5.red(program.args.join(" "))}
-
-  Run ${chalk5.cyan("npx bearnie --help")} to see what I can do.
-`);
-  process.exit(1);
-});

package/dist/utils/installed.d.ts

@@ -0,0 +1,31 @@
+import { type ProjectConfig } from "./config.js";
+import { type RegistryComponent } from "./registry.js";
+export type FileStatus = "unchanged" | "modified" | "missing";
+export interface FileState {
+    /** Registry-relative path (e.g. `button/Button.astro`). */
+    path: string;
+    /** Absolute path in the user's project. */
+    absPath: string;
+    status: FileStatus;
+    /** Current content on disk (undefined when missing). */
+    localContent?: string;
+    /** Content in the registry. */
+    registryContent: string;
+}
+export interface InstalledEntry {
+    entry: RegistryComponent;
+    files: FileState[];
+    hasChanges: boolean;
+}
+/** Every name in the registry: components, utilities, styles, barrel. */
+export declare function getAllRegistryNames(): Promise<string[]>;
+/**
+ * Compares one registry entry against the project. Returns null when the
+ * entry is not installed (none of its files exist locally).
+ */
+export declare function getEntryState(cwd: string, config: ProjectConfig, name: string): Promise<InstalledEntry | null>;
+/**
+ * Scans the project for installed registry entries. When `names` is given,
+ * only those entries are considered; unknown names throw.
+ */
+export declare function getInstalledEntries(cwd: string, config: ProjectConfig, names?: string[]): Promise<InstalledEntry[]>;

package/dist/utils/pm.d.ts

@@ -0,0 +1,11 @@
+export type PackageManager = "npm" | "pnpm" | "yarn" | "bun";
+/**
+ * Detects the project's package manager from its lockfile, falling back to
+ * the npm_config_user_agent set by `npx` / `pnpm dlx` / `yarn dlx` / `bunx`.
+ */
+export declare function detectPackageManager(cwd: string): PackageManager;
+/** Arguments for installing packages with the given package manager. */
+export declare function installCommand(pm: PackageManager, packages: string[], dev?: boolean): {
+    command: string;
+    args: string[];
+};

package/dist/utils/registry.d.ts

@@ -24,6 +24,10 @@ export interface RegistryIndex {
         description: string;
         category: string;
     }[];
+    utilities?: {
+        name: string;
+        description: string;
+    }[];
 }
 export declare function getRegistryIndex(): Promise<RegistryIndex>;
 export declare function getComponent(name: string): Promise<RegistryComponent>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bearnie",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "description": "CLI for installing Bearnie UI components",
   "type": "module",
   "license": "MIT",
@@ -15,23 +15,23 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "chalk": "^5.3.0",
-    "commander": "^12.1.0",
-    "execa": "^9.3.1",
+    "chalk": "^6.0.0",
+    "commander": "^15.0.0",
+    "diff": "^9.0.0",
+    "execa": "^10.0.1",
     "fs-extra": "^11.2.0",
-    "node-fetch": "^3.3.2",
-    "ora": "^8.0.1",
+    "ora": "^9.4.1",
     "prompts": "^2.4.2"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^20.14.9",
+    "@types/node": "^22.10.0",
     "@types/prompts": "^2.4.9",
     "tsup": "^8.1.0",
     "typescript": "^5.7.3"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=22.12.0"
   },
   "author": "Michael Andreuzza",
   "repository": {