vectorvesper 0.1.1 → 0.2.1

package/dist/index.js

@@ -144,7 +144,17 @@ var RegistryComponentSchema = z.object({
   supportsReducedMotion: z.boolean(),
   usesWebGL: z.boolean(),
   usesPointer: z.boolean(),
-  usesScroll: z.boolean()
+  usesScroll: z.boolean(),
+  // Optional metadata — kept in sync with the registry builder schema.
+  // Declared here (rather than relying on .passthrough()) so the CLI can
+  // read them with full type-safety for post-install guidance.
+  entry: z.string().optional(),
+  exportName: z.string().optional(),
+  usesTailwind: z.boolean().optional(),
+  fallbacks: z.array(z.string()).optional(),
+  recipes: z.array(z.string()).optional(),
+  docsUrl: z.string().optional(),
+  previewUrl: z.string().optional()
 }).passthrough();
 var IndexComponentSchema = z.object({
   slug: z.string(),
@@ -168,7 +178,10 @@ var IndexComponentSchema = z.object({
   supportsReducedMotion: z.boolean(),
   usesWebGL: z.boolean(),
   usesPointer: z.boolean(),
-  usesScroll: z.boolean()
+  usesScroll: z.boolean(),
+  entry: z.string().optional(),
+  exportName: z.string().optional(),
+  usesTailwind: z.boolean().optional()
 }).passthrough();
 var RegistryIndexSchema = z.object({
   version: z.string(),
@@ -218,7 +231,7 @@ function loadConfig(cwd = process.cwd()) {
     raw = JSON.parse(content);
   } catch {
     throw new Error(
-      `Failed to parse vv.config.json \u2014 the file contains invalid JSON. Delete it and run "vv init" to regenerate.`
+      `Failed to parse vv.config.json \u2014 the file contains invalid JSON. Delete it and run "npx vectorvesper init" to regenerate.`
     );
   }
   const result = VVConfigSchema.safeParse(raw);
@@ -227,7 +240,7 @@ function loadConfig(cwd = process.cwd()) {
     throw new Error(
       `Invalid vv.config.json \u2014 schema validation failed:
 ${issues}
-Delete the file and run "vv init" to regenerate.`
+Delete the file and run "npx vectorvesper init" to regenerate.`
     );
   }
   return result.data;
@@ -385,7 +398,7 @@ async function initCommand(options = {}) {
   \u2022 Target directory created at ${pc2.cyan(targetLocalDir)}
   \u2022 Manifest created at ${pc2.cyan("vv-manifest.json")}
 
-  \u{1F449} Next, run: ${pc2.bold(pc2.cyan("vv add <slug>"))} to add a component.`
+  \u{1F449} Next, run: ${pc2.bold(pc2.cyan("npx vectorvesper add <slug>"))} to add a component.`
     );
   } catch (error) {
     const message = error instanceof Error ? error.message : String(error);
@@ -414,25 +427,25 @@ function handleHttpError(status, url) {
     case 401:
       throw new Error(
         `Authentication required. This component requires a valid license key.
-\u{1F449} Run "vv login <your-license-key>" to authenticate.
+\u{1F449} Run "npx vectorvesper login <your-license-key>" to authenticate.
 \u{1F511} Get a license at https://vectorvesper.dev/pricing`
       );
     case 402:
       throw new Error(
-        `This is a Pro component and requires an active subscription.
-\u{1F449} Upgrade at https://vectorvesper.dev/pricing
-\u{1F4A1} Run "vv list" to see all free components.`
+        `This is a Pro component and requires a license.
+\u{1F449} Get lifetime access at https://vectorvesper.dev/pricing
+\u{1F4A1} Run "npx vectorvesper list" to see all free components.`
       );
     case 403:
       throw new Error(
-        `Access denied. Your license may have expired or doesn't include this component.
+        `Access denied. Your license doesn't include this component.
 \u{1F449} Check your account at https://vectorvesper.dev/account
-\u{1F4A1} Run "vv whoami" to see your current plan.`
+\u{1F4A1} Run "npx vectorvesper whoami" to see your current access.`
       );
     case 404:
       throw new Error(
         `Component not found in the registry.
-\u{1F449} Run "vv list" to see all available components.`
+\u{1F449} Run "npx vectorvesper list" to see all available components.`
       );
     case 429:
       throw new Error(
@@ -586,10 +599,10 @@ async function listCommand() {
     console.log(`
   ${pc3.green(String(freeCount))} free components${proCount > 0 ? ` \xB7 ${pc3.magenta(String(proCount))} pro components` : ""}`);
     if (proCount > 0 && !hasAuth) {
-      console.log(`  \u{1F511} ${pc3.dim("Unlock pro components:")} ${pc3.cyan("vv login <key>")} ${pc3.dim("\xB7")} ${pc3.cyan("https://vectorvesper.dev/pricing")}`);
+      console.log(`  \u{1F511} ${pc3.dim("Unlock pro components:")} ${pc3.cyan("npx vectorvesper login <key>")} ${pc3.dim("\xB7")} ${pc3.cyan("https://vectorvesper.dev/pricing")}`);
     }
     console.log(`
-\u{1F449} Run ${pc3.bold(pc3.cyan("vv add <slug>"))} to add a component to your project.
+\u{1F449} Run ${pc3.bold(pc3.cyan("npx vectorvesper add <slug>"))} to add a component to your project.
 `);
   } catch (error) {
     const message = error instanceof Error ? error.message : String(error);
@@ -599,43 +612,281 @@ async function listCommand() {
 }
 
 // src/commands/add.ts
+import fs7 from "fs";
+import path7 from "path";
+import ora2 from "ora";
+import pc6 from "picocolors";
+import { confirm as confirm2, isCancel as isCancel2 } from "@clack/prompts";
+
+// src/utils/installer.ts
 import fs5 from "fs";
 import path5 from "path";
-import ora2 from "ora";
 import pc4 from "picocolors";
-import { confirm as confirm2, isCancel as isCancel2 } from "@clack/prompts";
+var MAX_DEPTH = 20;
 function toForwardSlash(p) {
   return p.replace(/\\/g, "/");
 }
-function reportMissingDependencies(resolvedComponents, projectRoot, projectInfo) {
-  const pkgPath = path5.join(projectRoot, "package.json");
-  if (!fs5.existsSync(pkgPath)) return;
+async function resolveComponentTree(slug) {
+  const resolved = [];
+  const visited = /* @__PURE__ */ new Set();
+  async function walk(componentSlug, depth) {
+    if (visited.has(componentSlug)) return;
+    if (depth > MAX_DEPTH) {
+      throw new Error(
+        `Dependency resolution exceeded maximum depth (${MAX_DEPTH}). Possible circular dependency involving "${componentSlug}".`
+      );
+    }
+    visited.add(componentSlug);
+    const component = await fetchComponent(componentSlug);
+    if (component.tier === "pro" && !getAuthToken()) {
+      throw new Error(
+        `"${componentSlug}" is a Pro component and requires a license.
+\u{1F449} Run ${pc4.cyan("npx vectorvesper login <your-license-key>")} to unlock pro components.
+\u{1F511} Get a license at ${pc4.cyan("https://vectorvesper.dev/pricing")}`
+      );
+    }
+    for (const depSlug of component.registryDependencies ?? []) {
+      await walk(depSlug, depth + 1);
+    }
+    resolved.push(component);
+  }
+  await walk(slug, 0);
+  return resolved;
+}
+function planFiles(components, installDir, projectRoot) {
+  const planned = [];
+  const compDir = path5.join(projectRoot, installDir);
+  for (const component of components) {
+    for (const file of component.files) {
+      const absolutePath = path5.resolve(compDir, file.target);
+      const relativeFromRoot = path5.relative(projectRoot, absolutePath);
+      if (relativeFromRoot.startsWith("..") || path5.isAbsolute(relativeFromRoot)) {
+        throw new Error(
+          `Security Error: component target tries to escape project root: ${file.target}`
+        );
+      }
+      planned.push({
+        absolutePath,
+        relativePath: relativeFromRoot,
+        target: file.target,
+        content: file.content,
+        exists: fs5.existsSync(absolutePath)
+      });
+    }
+  }
+  return planned;
+}
+function writeFiles(files) {
+  for (const file of files) {
+    const folder = path5.dirname(file.absolutePath);
+    if (!fs5.existsSync(folder)) {
+      fs5.mkdirSync(folder, { recursive: true });
+    }
+    fs5.writeFileSync(file.absolutePath, file.content, "utf-8");
+  }
+}
+var MANIFEST_NAME = "vv-manifest.json";
+function getManifestPath(projectRoot) {
+  return path5.join(projectRoot, MANIFEST_NAME);
+}
+function readManifest(projectRoot) {
+  const manifestPath = getManifestPath(projectRoot);
+  if (!fs5.existsSync(manifestPath)) {
+    return { components: {} };
+  }
+  const parsed = JSON.parse(fs5.readFileSync(manifestPath, "utf-8"));
+  if (!parsed.components) parsed.components = {};
+  return parsed;
+}
+function writeManifest(projectRoot, manifest) {
+  fs5.writeFileSync(getManifestPath(projectRoot), JSON.stringify(manifest, null, 2), "utf-8");
+}
+function recordInstall(components, installDir, projectRoot) {
+  const manifest = readManifest(projectRoot);
+  const today = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
+  for (const component of components) {
+    manifest.components[component.slug] = {
+      version: component.version,
+      installedAt: toForwardSlash(path5.join(installDir, component.slug)),
+      installedOn: today,
+      files: component.files.map((f) => f.target)
+    };
+  }
+  writeManifest(projectRoot, manifest);
+}
+
+// src/utils/install.ts
+import fs6 from "fs";
+import path6 from "path";
+import { spawnSync } from "child_process";
+var NPM_NAME_REGEX = /^(@[a-z0-9-~][a-z0-9-._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/i;
+function isValidPackageName(name) {
+  return NPM_NAME_REGEX.test(name);
+}
+function getMissingDependencies(components, projectRoot) {
+  const pkgPath = path6.join(projectRoot, "package.json");
+  if (!fs6.existsSync(pkgPath)) return [];
+  let installed = {};
   try {
-    const pkg = JSON.parse(fs5.readFileSync(pkgPath, "utf-8"));
-    const installedDeps = {
+    const pkg = JSON.parse(fs6.readFileSync(pkgPath, "utf-8"));
+    installed = {
       ...pkg.dependencies,
       ...pkg.devDependencies,
       ...pkg.peerDependencies
     };
-    const missingDeps = /* @__PURE__ */ new Set();
-    for (const component of resolvedComponents) {
-      if (component.dependencies) {
-        for (const dep of component.dependencies) {
-          if (!installedDeps[dep]) {
-            missingDeps.add(dep);
-          }
-        }
-      }
+  } catch {
+    return [];
+  }
+  const missing = /* @__PURE__ */ new Set();
+  for (const component of components) {
+    for (const dep of component.dependencies ?? []) {
+      if (!installed[dep]) missing.add(dep);
     }
-    if (missingDeps.size > 0) {
-      console.log(pc4.yellow(`
-\u26A0\uFE0F  Missing peer dependencies in your project:`));
-      const pm = projectInfo.packageManager;
-      const depsStr = Array.from(missingDeps).join(" ");
-      const installCmd = pm === "pnpm" ? `pnpm add ${depsStr}` : pm === "yarn" ? `yarn add ${depsStr}` : pm === "bun" ? `bun add ${depsStr}` : `npm install ${depsStr}`;
-      console.log(`  Run: ${pc4.bold(pc4.cyan(installCmd))}`);
+  }
+  return Array.from(missing);
+}
+function getInstallCommand(pm, deps) {
+  const depsStr = deps.join(" ");
+  switch (pm) {
+    case "pnpm":
+      return `pnpm add ${depsStr}`;
+    case "yarn":
+      return `yarn add ${depsStr}`;
+    case "bun":
+      return `bun add ${depsStr}`;
+    default:
+      return `npm install ${depsStr}`;
+  }
+}
+function installDependencies(deps, pm, projectRoot) {
+  const invalid = deps.filter((d) => !isValidPackageName(d));
+  if (invalid.length > 0) {
+    throw new Error(`Refusing to install \u2014 invalid package name(s): ${invalid.join(", ")}`);
+  }
+  const command = getInstallCommand(pm, deps);
+  const result = spawnSync(command, {
+    cwd: projectRoot,
+    stdio: "inherit",
+    shell: true
+  });
+  return result.status === 0;
+}
+
+// src/utils/guidance.ts
+import pc5 from "picocolors";
+function toPascalCase(input) {
+  return input.split(/[^a-zA-Z0-9]+/).filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+}
+function toImportPath(alias, entryTarget) {
+  let p = entryTarget.replace(/\.(tsx|ts|jsx|js)$/i, "");
+  p = p.replace(/\/index$/i, "");
+  const base = alias.replace(/\/+$/, "");
+  return `${base}/${p}`;
+}
+function buildGuidance(component, ctx) {
+  const entryTarget = component.entry ?? component.files[0]?.target ?? `${component.slug}/index.ts`;
+  const importPath = toImportPath(ctx.alias, entryTarget);
+  const exportName = component.exportName ?? "default";
+  const isDefault = exportName === "default";
+  const varName = isDefault ? toPascalCase(component.name || component.slug) : exportName;
+  const importSnippet = isDefault ? `import ${varName} from "${importPath}";` : `import { ${exportName} } from "${importPath}";`;
+  const guidance = {
+    importSnippet,
+    notes: [],
+    warnings: [],
+    docsUrl: component.docsUrl
+  };
+  if (component.usesWebGL) {
+    const resolver = isDefault ? `() => import("${importPath}")` : `() => import("${importPath}").then((m) => m.${exportName})`;
+    if (ctx.framework === "next") {
+      guidance.ssrSnippet = `"use client";
+import dynamic from "next/dynamic";
+
+const ${varName} = dynamic(
+  ${resolver},
+  { ssr: false }
+);`;
+    } else if (ctx.framework === "unknown") {
+      guidance.notes.push(
+        "This is a WebGL component. If you server-render (e.g. Next.js), load it with `next/dynamic` and `{ ssr: false }` to avoid hydration errors."
+      );
     }
-  } catch {
+  }
+  if (component.supportsReducedMotion) {
+    guidance.notes.push("Honors `prefers-reduced-motion` automatically \u2014 no extra setup needed.");
+  }
+  if (component.usesTailwind && !ctx.hasTailwind) {
+    guidance.warnings.push(
+      "Styled with Tailwind CSS, which wasn't detected in this project. Install Tailwind or swap the classNames for your own styles."
+    );
+  }
+  return guidance;
+}
+function printGuidance(component, ctx) {
+  const g = buildGuidance(component, ctx);
+  console.log(pc5.bold(pc5.white(`
+Using ${component.title || component.name}:`)));
+  if (g.ssrSnippet) {
+    console.log(pc5.dim("  // SSR-safe (Next.js) \u2014 disables server rendering for WebGL:"));
+    for (const line of g.ssrSnippet.split("\n")) {
+      console.log(line ? `  ${pc5.cyan(line)}` : "");
+    }
+  } else {
+    console.log(`  ${pc5.cyan(g.importSnippet)}`);
+  }
+  for (const note of g.notes) {
+    console.log(`  ${pc5.green("\u2022")} ${pc5.dim(note)}`);
+  }
+  for (const warning of g.warnings) {
+    console.log(`  ${pc5.yellow("\u26A0")}  ${pc5.yellow(warning)}`);
+  }
+  if (g.docsUrl) {
+    console.log(`  ${pc5.dim("Docs:")} ${pc5.cyan(g.docsUrl)}`);
+  }
+}
+
+// src/commands/add.ts
+async function handleDependencies(components, projectRoot, projectInfo, options) {
+  const missing = getMissingDependencies(components, projectRoot);
+  if (missing.length === 0) return;
+  const installCmd = getInstallCommand(projectInfo.packageManager, missing);
+  const depsLabel = missing.map((d) => pc6.cyan(d)).join(", ");
+  if (options.install === false) {
+    console.log(pc6.yellow(`
+\u26A0\uFE0F  Missing dependencies: ${depsLabel}`));
+    console.log(`  Run: ${pc6.bold(pc6.cyan(installCmd))}`);
+    return;
+  }
+  let shouldInstall = options.yes === true;
+  if (!shouldInstall) {
+    console.log("");
+    const answer = await confirm2({
+      message: `Install ${missing.length} missing ${missing.length === 1 ? "dependency" : "dependencies"} (${missing.join(", ")}) with ${projectInfo.packageManager}?`,
+      initialValue: true
+    });
+    if (isCancel2(answer)) {
+      console.log(pc6.dim(`  Skipped. Run: ${pc6.cyan(installCmd)}`));
+      return;
+    }
+    shouldInstall = answer;
+  }
+  if (!shouldInstall) {
+    console.log(pc6.dim(`  Skipped. Run: ${pc6.cyan(installCmd)} when ready.`));
+    return;
+  }
+  console.log(pc6.dim(`
+Installing dependencies with ${projectInfo.packageManager}...`));
+  try {
+    const ok = installDependencies(missing, projectInfo.packageManager, projectRoot);
+    if (ok) {
+      console.log(pc6.green(`\u2714 Dependencies installed.`));
+    } else {
+      console.log(pc6.yellow(`\u26A0\uFE0F  Dependency install did not complete. Run manually: ${pc6.cyan(installCmd)}`));
+    }
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    console.log(pc6.yellow(`\u26A0\uFE0F  ${message}`));
+    console.log(`  Run manually: ${pc6.bold(pc6.cyan(installCmd))}`);
   }
 }
 async function addCommand(slug, options = {}) {
@@ -643,7 +894,7 @@ async function addCommand(slug, options = {}) {
     validateSlug(slug);
   } catch (error) {
     const message = error instanceof Error ? error.message : String(error);
-    console.error(`${pc4.red(pc4.bold("Error:"))} ${message}`);
+    console.error(`${pc6.red(pc6.bold("Error:"))} ${message}`);
     process.exit(1);
   }
   let config;
@@ -651,173 +902,324 @@ async function addCommand(slug, options = {}) {
     config = loadConfig();
   } catch (error) {
     const message = error instanceof Error ? error.message : String(error);
-    console.error(`${pc4.red(pc4.bold("Error:"))} ${message}`);
+    console.error(`${pc6.red(pc6.bold("Error:"))} ${message}`);
     process.exit(1);
   }
   if (!config) {
     console.error(
-      `${pc4.red(pc4.bold("Error:"))} No ${pc4.cyan("vv.config.json")} found in this directory.
-\u{1F449} Run ${pc4.bold(pc4.cyan("vv init"))} first to set up your project.`
+      `${pc6.red(pc6.bold("Error:"))} No ${pc6.cyan("vv.config.json")} found in this directory.
+\u{1F449} Run ${pc6.bold(pc6.cyan("npx vectorvesper init"))} first to set up your project.`
     );
     process.exit(1);
     return;
   }
   const projectInfo = detectProject();
   const componentInstallDir = resolveAlias(config.aliases.vv, projectInfo.hasSrcDir);
-  const spinner = ora2({
-    text: `Resolving component ${pc4.cyan(slug)}...`,
-    color: "cyan"
-  }).start();
-  const resolvedComponents = [];
-  const visited = /* @__PURE__ */ new Set();
-  async function resolveComponentTree(componentSlug, depth = 0) {
-    if (visited.has(componentSlug)) return;
-    if (depth > 20) {
-      throw new Error(`Dependency resolution exceeded maximum depth (20). Possible circular dependency involving "${componentSlug}".`);
-    }
-    visited.add(componentSlug);
-    const component = await fetchComponent(componentSlug);
-    if (component.tier === "pro" && !getAuthToken()) {
-      throw new Error(
-        `"${componentSlug}" is a Pro component and requires authentication.
-\u{1F449} Run ${pc4.cyan("vv login <your-license-key>")} to unlock pro components.
-\u{1F511} Get a key at ${pc4.cyan("https://vectorvesper.dev/pricing")}`
-      );
-    }
-    if (component.registryDependencies && component.registryDependencies.length > 0) {
-      for (const depSlug of component.registryDependencies) {
-        await resolveComponentTree(depSlug, depth + 1);
-      }
-    }
-    resolvedComponents.push(component);
-  }
+  const projectRoot = process.cwd();
+  const spinner = ora2({ text: `Resolving component ${pc6.cyan(slug)}...`, color: "cyan" }).start();
+  let resolvedComponents;
   try {
-    await resolveComponentTree(slug);
+    resolvedComponents = await resolveComponentTree(slug);
   } catch (error) {
     const message = error instanceof Error ? error.message : String(error);
-    spinner.fail(pc4.red(`Failed to resolve component "${slug}": ${message}`));
+    spinner.fail(pc6.red(`Failed to resolve component "${slug}": ${message}`));
     process.exit(1);
+    return;
   }
   spinner.text = "Checking file conflicts...";
+  let planned;
+  try {
+    planned = planFiles(resolvedComponents, componentInstallDir, projectRoot);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    spinner.fail(pc6.red(message));
+    process.exit(1);
+    return;
+  }
   const filesToWrite = [];
-  const projectRoot = process.cwd();
-  for (const component of resolvedComponents) {
-    const compDir = path5.join(projectRoot, componentInstallDir);
-    for (const file of component.files) {
-      const fileWritePath = path5.resolve(compDir, file.target);
-      const relativeFromRoot = path5.relative(projectRoot, fileWritePath);
-      if (relativeFromRoot.startsWith("..") || path5.isAbsolute(relativeFromRoot)) {
-        spinner.fail(
-          `${pc4.red(pc4.bold("Security Error:"))} Component target file path tries to escape project root: ${file.target}`
-        );
-        process.exit(1);
-      }
-      if (fs5.existsSync(fileWritePath)) {
-        if (options.dryRun) {
-        } else if (!options.overwrite && !options.yes) {
-          spinner.stop();
-          const relativeDisplayPath = path5.relative(projectRoot, fileWritePath);
-          const shouldOverwrite = await confirm2({
-            message: pc4.yellow(`File already exists: "${relativeDisplayPath}". Overwrite?`),
-            initialValue: false
-          });
-          if (isCancel2(shouldOverwrite) || !shouldOverwrite) {
-            console.log(pc4.dim(`  Skipping existing file: ${relativeDisplayPath}`));
-            spinner.start("Continuing installation...");
-            continue;
-          }
-          spinner.start("Continuing installation...");
-        }
-      }
-      filesToWrite.push({
-        absolutePath: fileWritePath,
-        relativePath: relativeFromRoot,
-        content: file.content
+  for (const file of planned) {
+    if (file.exists && !options.dryRun && !options.overwrite && !options.yes) {
+      spinner.stop();
+      const answer = await confirm2({
+        message: pc6.yellow(`File already exists: "${file.relativePath}". Overwrite?`),
+        initialValue: false
       });
+      if (isCancel2(answer) || !answer) {
+        console.log(pc6.dim(`  Skipping existing file: ${file.relativePath}`));
+        spinner.start("Continuing installation...");
+        continue;
+      }
+      spinner.start("Continuing installation...");
     }
+    filesToWrite.push({
+      absolutePath: file.absolutePath,
+      relativePath: file.relativePath,
+      content: file.content
+    });
   }
+  const targetComponent = resolvedComponents[resolvedComponents.length - 1];
+  const installPath = toForwardSlash(path7.join(componentInstallDir, targetComponent.slug));
   if (options.dryRun) {
-    spinner.succeed(pc4.yellow("Dry-run: Simulation completed. No files were written."));
-    console.log(pc4.bold(pc4.yellow("\n[Dry Run] Files that would be created/modified:")));
+    spinner.succeed(pc6.yellow("Dry-run: simulation completed. No files were written."));
+    console.log(pc6.bold(pc6.yellow("\n[Dry Run] Files that would be created/modified:")));
     for (const file of filesToWrite) {
-      const status = fs5.existsSync(file.absolutePath) ? pc4.yellow("(exists, would overwrite)") : pc4.green("(new)");
-      console.log(`  ${pc4.cyan(file.relativePath)} ${status}`);
+      const status = fs7.existsSync(file.absolutePath) ? pc6.yellow("(exists, would overwrite)") : pc6.green("(new)");
+      console.log(`  ${pc6.cyan(file.relativePath)} ${status}`);
+    }
+    const missing = getMissingDependencies(resolvedComponents, projectRoot);
+    if (missing.length > 0) {
+      console.log(pc6.yellow(`
+\u26A0\uFE0F  Would need dependencies: ${missing.map((d) => pc6.cyan(d)).join(", ")}`));
+      console.log(`  ${pc6.dim(getInstallCommand(projectInfo.packageManager, missing))}`);
     }
-    reportMissingDependencies(resolvedComponents, projectRoot, projectInfo);
-    const targetComponent2 = resolvedComponents[resolvedComponents.length - 1];
-    console.log("");
-    console.log(
-      pc4.bold(pc4.yellow("\u2714 [Dry Run] Would add ")) + pc4.bold(pc4.cyan(targetComponent2.slug)) + pc4.bold(pc4.yellow(` to ${toForwardSlash(path5.join(componentInstallDir, targetComponent2.slug))}`))
-    );
     console.log("");
-    console.log(pc4.gray("\u{1F449} Loving Vector Vesper? Star the repo: https://github.com/vectorvesper/vv-components"));
-    console.log(pc4.gray("\u{1F680} Need premium WebGL effects? Get the Pixel Library: https://vectorvesper.dev/library"));
+    console.log(pc6.bold(pc6.yellow(`\u2714 [Dry Run] Would add ${pc6.cyan(targetComponent.slug)} to ${installPath}`)));
     console.log("");
     return;
   }
   if (filesToWrite.length === 0) {
-    spinner.succeed(pc4.green("All files skipped (already up to date)."));
+    spinner.succeed(pc6.green("All files skipped (already up to date)."));
     return;
   }
   spinner.text = "Writing component files...";
   try {
-    for (const file of filesToWrite) {
-      const folder = path5.dirname(file.absolutePath);
-      if (!fs5.existsSync(folder)) {
-        fs5.mkdirSync(folder, { recursive: true });
-      }
-      fs5.writeFileSync(file.absolutePath, file.content, "utf-8");
-    }
+    writeFiles(filesToWrite);
   } catch (error) {
     const message = error instanceof Error ? error.message : String(error);
-    spinner.fail(pc4.red(`Failed to write files: ${message}`));
+    spinner.fail(pc6.red(`Failed to write files: ${message}`));
     process.exit(1);
+    return;
   }
   try {
-    const manifestPath = path5.join(projectRoot, "vv-manifest.json");
-    let manifest = { components: {} };
-    if (fs5.existsSync(manifestPath)) {
-      manifest = JSON.parse(fs5.readFileSync(manifestPath, "utf-8"));
-    }
-    const today = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
-    for (const component of resolvedComponents) {
-      manifest.components[component.slug] = {
-        version: component.version,
-        installedAt: toForwardSlash(path5.join(componentInstallDir, component.slug)),
-        installedOn: today,
-        files: component.files.map((f) => f.target)
-      };
-    }
-    fs5.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2), "utf-8");
+    recordInstall(resolvedComponents, componentInstallDir, projectRoot);
   } catch (error) {
     const message = error instanceof Error ? error.message : String(error);
     logger.warn(`Failed to update vv-manifest.json: ${message}`);
-    logger.warn("Component was installed but may not appear in 'vv info' or 'vv diff'.");
+    logger.warn("Component was installed but may not appear in 'npx vectorvesper info' or 'npx vectorvesper diff'.");
   }
-  spinner.succeed(pc4.green("Files written successfully!"));
-  console.log(pc4.dim("\nCreated files:"));
+  spinner.succeed(pc6.green("Files written successfully!"));
+  console.log(pc6.dim("\nCreated files:"));
   for (const file of filesToWrite) {
-    console.log(`  ${pc4.green("\u2714")} ${pc4.cyan(file.relativePath)}`);
+    console.log(`  ${pc6.green("\u2714")} ${pc6.cyan(file.relativePath)}`);
   }
-  reportMissingDependencies(resolvedComponents, projectRoot, projectInfo);
-  const targetComponent = resolvedComponents[resolvedComponents.length - 1];
+  await handleDependencies(resolvedComponents, projectRoot, projectInfo, options);
+  printGuidance(targetComponent, {
+    alias: config.aliases.vv,
+    framework: projectInfo.framework,
+    hasTailwind: projectInfo.hasTailwind
+  });
   console.log("");
-  console.log(
-    pc4.bold(pc4.green("\u2714 Added ")) + pc4.bold(pc4.cyan(targetComponent.slug)) + pc4.bold(pc4.green(` to ${toForwardSlash(path5.join(componentInstallDir, targetComponent.slug))}`))
-  );
+  console.log(pc6.bold(pc6.green(`\u2714 Added ${pc6.cyan(targetComponent.slug)} to ${installPath}`)));
+  console.log("");
+  console.log(pc6.gray("\u{1F449} Loving Vector Vesper? Star the repo: https://github.com/vectorvesper/vv-components"));
+  console.log(pc6.gray("\u{1F680} Premium shader & pixel systems: https://vectorvesper.dev/pricing"));
+  console.log("");
+}
+
+// src/commands/update.ts
+import pc7 from "picocolors";
+import ora3 from "ora";
+async function updateCommand(slug, options = {}) {
+  const projectRoot = process.cwd();
+  let config;
+  try {
+    config = loadConfig();
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    console.error(`${pc7.red(pc7.bold("Error:"))} ${message}`);
+    process.exit(1);
+    return;
+  }
+  if (!config) {
+    console.error(
+      `${pc7.red(pc7.bold("Error:"))} No ${pc7.cyan("vv.config.json")} found.
+\u{1F449} Run ${pc7.bold(pc7.cyan("npx vectorvesper init"))} first.`
+    );
+    process.exit(1);
+    return;
+  }
+  const projectInfo = detectProject();
+  const installDir = resolveAlias(config.aliases.vv, projectInfo.hasSrcDir);
+  const manifest = readManifest(projectRoot);
+  const installedSlugs = Object.keys(manifest.components);
+  if (installedSlugs.length === 0) {
+    console.log(pc7.yellow(`
+\u26A0\uFE0F  No components are installed in this project.`));
+    console.log(`\u{1F449} Add one with ${pc7.bold(pc7.cyan("npx vectorvesper add <slug>"))}
+`);
+    return;
+  }
+  let targets;
+  if (slug) {
+    try {
+      validateSlug(slug);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      console.error(pc7.red(`
+\u274C ${message}
+`));
+      process.exit(1);
+      return;
+    }
+    if (!manifest.components[slug]) {
+      console.log(pc7.red(`
+\u274C Component "${slug}" is not installed in this project.`));
+      console.log(`\u{1F449} Run ${pc7.cyan(`npx vectorvesper add ${slug}`)} to install it.
+`);
+      return;
+    }
+    targets = [slug];
+  } else {
+    targets = installedSlugs;
+  }
+  const spinner = ora3({ text: "Checking for updates...", color: "cyan" }).start();
+  const updated = [];
+  const upToDate = [];
+  const failed = [];
+  for (const target of targets) {
+    spinner.text = `Updating ${pc7.cyan(target)}...`;
+    try {
+      const components = await resolveComponentTree(target);
+      const remote = components[components.length - 1];
+      const localVersion = manifest.components[target]?.version;
+      if (localVersion === remote.version && !options.force) {
+        upToDate.push(target);
+        continue;
+      }
+      const planned = planFiles(components, installDir, projectRoot);
+      writeFiles(planned.map((f) => ({ absolutePath: f.absolutePath, content: f.content })));
+      recordInstall(components, installDir, projectRoot);
+      updated.push(`${target} \u2192 ${remote.version}`);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      failed.push({ slug: target, reason: message });
+    }
+  }
+  spinner.stop();
+  console.log(pc7.bold(pc7.cyan("\nVector Vesper Update\n")));
+  if (updated.length > 0) {
+    console.log(pc7.bold(pc7.green(`  Updated (${updated.length}):`)));
+    for (const u of updated) console.log(`    ${pc7.green("\u2714")} ${u}`);
+    console.log(pc7.dim("    Note: updating overwrites local edits to these files."));
+  }
+  if (upToDate.length > 0) {
+    console.log(pc7.bold(pc7.gray(`
+  Already up to date (${upToDate.length}):`)));
+    console.log(`    ${pc7.dim(upToDate.join(", "))}`);
+  }
+  if (failed.length > 0) {
+    console.log(pc7.bold(pc7.red(`
+  Failed (${failed.length}):`)));
+    for (const f of failed) console.log(`    ${pc7.red("\u2716")} ${f.slug}: ${pc7.dim(f.reason)}`);
+  }
   console.log("");
-  console.log(pc4.gray("\u{1F449} Loving Vector Vesper? Star the repo: https://github.com/vectorvesper/vv-components"));
-  console.log(pc4.gray("\u{1F680} Need premium WebGL effects? Get the Pixel Library: https://vectorvesper.dev/library"));
+  if (failed.length > 0) process.exit(1);
+}
+
+// src/commands/remove.ts
+import fs8 from "fs";
+import path8 from "path";
+import pc8 from "picocolors";
+import { confirm as confirm3, isCancel as isCancel3 } from "@clack/prompts";
+async function removeCommand(slug, options = {}) {
+  try {
+    validateSlug(slug);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    console.error(`${pc8.red(pc8.bold("Error:"))} ${message}`);
+    process.exit(1);
+    return;
+  }
+  const projectRoot = process.cwd();
+  let config;
+  try {
+    config = loadConfig();
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    console.error(`${pc8.red(pc8.bold("Error:"))} ${message}`);
+    process.exit(1);
+    return;
+  }
+  if (!config) {
+    console.error(
+      `${pc8.red(pc8.bold("Error:"))} No ${pc8.cyan("vv.config.json")} found.
+\u{1F449} Run ${pc8.bold(pc8.cyan("npx vectorvesper init"))} first.`
+    );
+    process.exit(1);
+    return;
+  }
+  const manifest = readManifest(projectRoot);
+  const entry = manifest.components[slug];
+  if (!entry) {
+    console.log(pc8.yellow(`
+\u26A0\uFE0F  Component "${slug}" is not installed (not in vv-manifest.json).`));
+    console.log(`\u{1F449} See installed components with ${pc8.bold(pc8.cyan("npx vectorvesper info"))}
+`);
+    return;
+  }
+  const projectInfo = detectProject();
+  const installDir = resolveAlias(config.aliases.vv, projectInfo.hasSrcDir);
+  const baseDir = path8.join(projectRoot, installDir);
+  const targets = entry.files ?? [];
+  const absoluteFiles = targets.map((t) => path8.resolve(baseDir, t));
+  console.log(pc8.bold(pc8.cyan(`
+Remove ${slug}
+`)));
+  console.log(pc8.dim("  The following files will be deleted:"));
+  for (const f of absoluteFiles) {
+    console.log(`    ${fs8.existsSync(f) ? pc8.red("\u2212") : pc8.dim("\xB7")} ${pc8.cyan(path8.relative(projectRoot, f))}`);
+  }
+  if (!options.yes) {
+    const answer = await confirm3({
+      message: pc8.yellow(`Delete ${absoluteFiles.length} file(s) for "${slug}"?`),
+      initialValue: false
+    });
+    if (isCancel3(answer) || !answer) {
+      console.log(pc8.dim("\n  Cancelled. Nothing was removed.\n"));
+      return;
+    }
+  }
+  let deleted = 0;
+  for (const f of absoluteFiles) {
+    try {
+      if (fs8.existsSync(f)) {
+        fs8.rmSync(f);
+        deleted++;
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      console.log(pc8.yellow(`  \u26A0\uFE0F  Could not delete ${path8.relative(projectRoot, f)}: ${message}`));
+    }
+  }
+  const componentDir = path8.resolve(baseDir, slug);
+  try {
+    if (fs8.existsSync(componentDir) && fs8.readdirSync(componentDir).length === 0) {
+      fs8.rmdirSync(componentDir);
+    }
+  } catch {
+  }
+  delete manifest.components[slug];
+  try {
+    writeManifest(projectRoot, manifest);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    console.log(pc8.yellow(`  \u26A0\uFE0F  Removed files but failed to update vv-manifest.json: ${message}`));
+  }
+  console.log("");
+  console.log(pc8.bold(pc8.green(`\u2714 Removed ${pc8.cyan(slug)} (${deleted} file(s) deleted).`)));
+  if ((entry.files ?? []).length === 0) {
+    console.log(pc8.dim("  No files were tracked for this component; manifest entry cleared."));
+  }
   console.log("");
 }
 
 // src/commands/info.ts
-import fs6 from "fs";
-import path6 from "path";
-import pc5 from "picocolors";
-var CLI_VERSION = true ? "0.1.1" : "0.0.0-dev";
+import fs9 from "fs";
+import path9 from "path";
+import pc9 from "picocolors";
+var CLI_VERSION = true ? "0.2.1" : "0.0.0-dev";
 async function infoCommand() {
-  console.log(pc5.bold(pc5.cyan("\nVector Vesper Diagnostics\n")));
+  console.log(pc9.bold(pc9.cyan("\nVector Vesper Diagnostics\n")));
   const projectInfo = detectProject();
   let config;
   try {
@@ -825,95 +1227,95 @@ async function infoCommand() {
   } catch {
     config = null;
   }
-  console.log(pc5.bold(pc5.white("Environment:")));
-  console.log(`  \u2022 CLI Version:     ${pc5.cyan(CLI_VERSION)}`);
-  console.log(`  \u2022 Node Version:    ${pc5.cyan(process.version)}`);
-  console.log(`  \u2022 OS:              ${pc5.cyan(`${process.platform} ${process.arch}`)}`);
-  console.log(`  \u2022 Package Manager: ${pc5.cyan(projectInfo.packageManager)}`);
-  console.log(`  \u2022 Framework:       ${pc5.cyan(projectInfo.framework)}`);
-  console.log(`  \u2022 TypeScript:      ${pc5.cyan(projectInfo.isTypeScript ? "Yes" : "No")}`);
-  console.log(`  \u2022 Has src/ folder: ${pc5.cyan(projectInfo.hasSrcDir ? "Yes" : "No")}`);
-  console.log(`  \u2022 Tailwind CSS:    ${pc5.cyan(projectInfo.hasTailwind ? "Yes" : "No")}`);
+  console.log(pc9.bold(pc9.white("Environment:")));
+  console.log(`  \u2022 CLI Version:     ${pc9.cyan(CLI_VERSION)}`);
+  console.log(`  \u2022 Node Version:    ${pc9.cyan(process.version)}`);
+  console.log(`  \u2022 OS:              ${pc9.cyan(`${process.platform} ${process.arch}`)}`);
+  console.log(`  \u2022 Package Manager: ${pc9.cyan(projectInfo.packageManager)}`);
+  console.log(`  \u2022 Framework:       ${pc9.cyan(projectInfo.framework)}`);
+  console.log(`  \u2022 TypeScript:      ${pc9.cyan(projectInfo.isTypeScript ? "Yes" : "No")}`);
+  console.log(`  \u2022 Has src/ folder: ${pc9.cyan(projectInfo.hasSrcDir ? "Yes" : "No")}`);
+  console.log(`  \u2022 Tailwind CSS:    ${pc9.cyan(projectInfo.hasTailwind ? "Yes" : "No")}`);
   console.log("");
-  console.log(pc5.bold(pc5.white("Authentication:")));
+  console.log(pc9.bold(pc9.white("Authentication:")));
   const token = getAuthToken();
   if (token) {
     const maskedKey = token.slice(0, 6) + "\u2026" + token.slice(-4);
-    console.log(`  \u2022 Status:          ${pc5.green("Authenticated")}`);
-    console.log(`  \u2022 Key:             ${pc5.cyan(maskedKey)}`);
+    console.log(`  \u2022 Status:          ${pc9.green("Authenticated")}`);
+    console.log(`  \u2022 Key:             ${pc9.cyan(maskedKey)}`);
   } else {
-    console.log(`  \u2022 Status:          ${pc5.yellow("Anonymous (free tier)")}`);
-    console.log(`  ${pc5.dim("  Run")} ${pc5.cyan("vv login <key>")} ${pc5.dim("to unlock pro components")}`);
+    console.log(`  \u2022 Status:          ${pc9.yellow("Anonymous (free tier)")}`);
+    console.log(`  ${pc9.dim("  Run")} ${pc9.cyan("npx vectorvesper login <key>")} ${pc9.dim("to unlock pro components")}`);
   }
   console.log("");
-  console.log(pc5.bold(pc5.white("Configuration (vv.config.json):")));
+  console.log(pc9.bold(pc9.white("Configuration (vv.config.json):")));
   if (config) {
-    console.log(`  \u2022 Framework Set:   ${pc5.cyan(config.framework)}`);
-    console.log(`  \u2022 TypeScript Set:  ${pc5.cyan(config.tsx ? "Yes" : "No")}`);
-    console.log(`  \u2022 Component Alias: ${pc5.cyan(config.aliases.vv)}`);
+    console.log(`  \u2022 Framework Set:   ${pc9.cyan(config.framework)}`);
+    console.log(`  \u2022 TypeScript Set:  ${pc9.cyan(config.tsx ? "Yes" : "No")}`);
+    console.log(`  \u2022 Component Alias: ${pc9.cyan(config.aliases.vv)}`);
   } else {
-    console.log(`  ${pc5.yellow("\u26A0\uFE0F  No vv.config.json found in this directory.")}`);
+    console.log(`  ${pc9.yellow("\u26A0\uFE0F  No vv.config.json found in this directory.")}`);
   }
   console.log("");
-  console.log(pc5.bold(pc5.white("Installed Components (vv-manifest.json):")));
-  const manifestPath = path6.join(process.cwd(), "vv-manifest.json");
-  if (fs6.existsSync(manifestPath)) {
+  console.log(pc9.bold(pc9.white("Installed Components (vv-manifest.json):")));
+  const manifestPath = path9.join(process.cwd(), "vv-manifest.json");
+  if (fs9.existsSync(manifestPath)) {
     try {
-      const manifest = JSON.parse(fs6.readFileSync(manifestPath, "utf-8"));
+      const manifest = JSON.parse(fs9.readFileSync(manifestPath, "utf-8"));
       const components = manifest.components || {};
       const slugs = Object.keys(components);
       if (slugs.length === 0) {
-        console.log(`  ${pc5.dim("No components installed yet.")}`);
+        console.log(`  ${pc9.dim("No components installed yet.")}`);
       } else {
-        console.log(pc5.dim("  ------------------------------------------------------------"));
-        console.log(`  ${pc5.bold(pc5.white("Component".padEnd(25)))} ${pc5.bold(pc5.white("Version".padEnd(10)))} ${pc5.bold(pc5.white("Installed At"))}`);
-        console.log(pc5.dim("  ------------------------------------------------------------"));
+        console.log(pc9.dim("  ------------------------------------------------------------"));
+        console.log(`  ${pc9.bold(pc9.white("Component".padEnd(25)))} ${pc9.bold(pc9.white("Version".padEnd(10)))} ${pc9.bold(pc9.white("Installed At"))}`);
+        console.log(pc9.dim("  ------------------------------------------------------------"));
         for (const slug of slugs) {
           const info = components[slug];
           const version2 = info?.version ?? "unknown";
           const installedAt = info?.installedAt ?? "unknown";
-          console.log(`  ${pc5.cyan(slug.padEnd(25))} ${pc5.green(version2.padEnd(10))} ${pc5.gray(installedAt)}`);
+          console.log(`  ${pc9.cyan(slug.padEnd(25))} ${pc9.green(version2.padEnd(10))} ${pc9.gray(installedAt)}`);
         }
-        console.log(pc5.dim("  ------------------------------------------------------------"));
+        console.log(pc9.dim("  ------------------------------------------------------------"));
       }
     } catch {
-      console.log(`  ${pc5.red("\u274C Error reading vv-manifest.json: Invalid JSON format.")}`);
+      console.log(`  ${pc9.red("\u274C Error reading vv-manifest.json: Invalid JSON format.")}`);
     }
   } else {
-    console.log(`  ${pc5.dim("No components installed yet (vv-manifest.json not found).")}`);
+    console.log(`  ${pc9.dim("No components installed yet (vv-manifest.json not found).")}`);
   }
   console.log("");
 }
 
 // src/commands/diff.ts
-import fs7 from "fs";
-import path7 from "path";
-import pc6 from "picocolors";
-import ora3 from "ora";
+import fs10 from "fs";
+import path10 from "path";
+import pc10 from "picocolors";
+import ora4 from "ora";
 async function diffCommand(slug) {
   const projectRoot = process.cwd();
-  const manifestPath = path7.join(projectRoot, "vv-manifest.json");
-  if (!fs7.existsSync(manifestPath)) {
-    console.log(pc6.yellow(`
+  const manifestPath = path10.join(projectRoot, "vv-manifest.json");
+  if (!fs10.existsSync(manifestPath)) {
+    console.log(pc10.yellow(`
 \u26A0\uFE0F  No vv-manifest.json found in this directory.`));
-    console.log(`\u{1F449} Add components first using ${pc6.bold(pc6.cyan("vv add <slug>"))}
+    console.log(`\u{1F449} Add components first using ${pc10.bold(pc10.cyan("npx vectorvesper add <slug>"))}
 `);
     return;
   }
   let manifest;
   try {
-    manifest = JSON.parse(fs7.readFileSync(manifestPath, "utf-8"));
+    manifest = JSON.parse(fs10.readFileSync(manifestPath, "utf-8"));
   } catch {
-    console.error(pc6.red(`\u274C Error reading vv-manifest.json: Invalid JSON format.`));
+    console.error(pc10.red(`\u274C Error reading vv-manifest.json: Invalid JSON format.`));
     process.exit(1);
     return;
   }
   const installedComponents = manifest.components || {};
   const installedSlugs = Object.keys(installedComponents);
   if (installedSlugs.length === 0) {
-    console.log(pc6.yellow(`
+    console.log(pc10.yellow(`
 \u26A0\uFE0F  No components are registered as installed in vv-manifest.json.`));
-    console.log(`\u{1F449} Add components using ${pc6.bold(pc6.cyan("vv add <slug>"))}
+    console.log(`\u{1F449} Add components using ${pc10.bold(pc10.cyan("npx vectorvesper add <slug>"))}
 `);
     return;
   }
@@ -922,21 +1324,21 @@ async function diffCommand(slug) {
       validateSlug(slug);
     } catch (error) {
       const message = error instanceof Error ? error.message : String(error);
-      console.error(pc6.red(`
+      console.error(pc10.red(`
 \u274C ${message}
 `));
       process.exit(1);
     }
     if (!installedComponents[slug]) {
-      console.log(pc6.red(`
+      console.log(pc10.red(`
 \u274C Component "${slug}" is not installed in this project.`));
-      console.log(`\u{1F449} Run ${pc6.cyan(`vv add ${slug}`)} to install it.
+      console.log(`\u{1F449} Run ${pc10.cyan(`npx vectorvesper add ${slug}`)} to install it.
 `);
       return;
     }
     const localInfo = installedComponents[slug];
-    const spinner = ora3({
-      text: `Checking updates for ${pc6.cyan(slug)}...`,
+    const spinner = ora4({
+      text: `Checking updates for ${pc10.cyan(slug)}...`,
       color: "cyan"
     }).start();
     try {
@@ -944,39 +1346,39 @@ async function diffCommand(slug) {
       spinner.stop();
       const localVersion = localInfo.version ?? "unknown";
       const remoteVersion = remoteComponent.version;
-      console.log(pc6.bold(pc6.cyan(`
+      console.log(pc10.bold(pc10.cyan(`
 Component Diff: ${slug}`)));
-      console.log(`  \u2022 Local version:  ${pc6.yellow(localVersion)}`);
-      console.log(`  \u2022 Latest version: ${pc6.green(remoteVersion)}`);
+      console.log(`  \u2022 Local version:  ${pc10.yellow(localVersion)}`);
+      console.log(`  \u2022 Latest version: ${pc10.green(remoteVersion)}`);
       if (localVersion === remoteVersion) {
-        console.log(`  \u2022 Status:         ${pc6.green("\u2714 Up to date")}
+        console.log(`  \u2022 Status:         ${pc10.green("\u2714 Up to date")}
 `);
       } else {
-        console.log(`  \u2022 Status:         ${pc6.bold(pc6.yellow("\u26A0\uFE0F  Update available!"))}`);
-        console.log(`  \u2022 Run ${pc6.bold(pc6.cyan(`vv add ${slug} --overwrite`))} to update.
+        console.log(`  \u2022 Status:         ${pc10.bold(pc10.yellow("\u26A0\uFE0F  Update available!"))}`);
+        console.log(`  \u2022 Run ${pc10.bold(pc10.cyan(`npx vectorvesper add ${slug} --overwrite`))} to update.
 `);
       }
     } catch (error) {
       const message = error instanceof Error ? error.message : String(error);
-      spinner.fail(pc6.red(`Failed to fetch remote component details: ${message}`));
+      spinner.fail(pc10.red(`Failed to fetch remote component details: ${message}`));
       process.exit(1);
     }
   } else {
-    const spinner = ora3({
+    const spinner = ora4({
       text: "Comparing local components with registry index...",
       color: "cyan"
     }).start();
     try {
       const registryIndex = await fetchRegistryIndex();
       spinner.stop();
-      console.log(pc6.bold(pc6.cyan("\nVector Vesper Component Version Comparison\n")));
-      console.log(pc6.dim("  ----------------------------------------------------------------------"));
+      console.log(pc10.bold(pc10.cyan("\nVector Vesper Component Version Comparison\n")));
+      console.log(pc10.dim("  ----------------------------------------------------------------------"));
       console.log(
-        `  ${pc6.bold(pc6.white("Component".padEnd(25)))} ${pc6.bold(
-          pc6.white("Local".padEnd(10))
-        )} ${pc6.bold(pc6.white("Latest".padEnd(10)))} ${pc6.bold(pc6.white("Status"))}`
+        `  ${pc10.bold(pc10.white("Component".padEnd(25)))} ${pc10.bold(
+          pc10.white("Local".padEnd(10))
+        )} ${pc10.bold(pc10.white("Latest".padEnd(10)))} ${pc10.bold(pc10.white("Status"))}`
       );
-      console.log(pc6.dim("  ----------------------------------------------------------------------"));
+      console.log(pc10.dim("  ----------------------------------------------------------------------"));
       let updatesAvailableCount = 0;
       for (const instSlug of installedSlugs) {
         const localInfo = installedComponents[instSlug];
@@ -984,59 +1386,59 @@ Component Diff: ${slug}`)));
         const remoteInfo = registryIndex.components.find((c) => c.slug === instSlug);
         if (!remoteInfo) {
           console.log(
-            `  ${pc6.cyan(instSlug.padEnd(25))} ${pc6.yellow(
+            `  ${pc10.cyan(instSlug.padEnd(25))} ${pc10.yellow(
               localVersion.padEnd(10)
-            )} ${pc6.red("unknown".padEnd(10))} ${pc6.red("Not found in registry")}`
+            )} ${pc10.red("unknown".padEnd(10))} ${pc10.red("Not found in registry")}`
           );
         } else {
           const remoteVersion = remoteInfo.version;
           if (localVersion === remoteVersion) {
             console.log(
-              `  ${pc6.cyan(instSlug.padEnd(25))} ${pc6.gray(
+              `  ${pc10.cyan(instSlug.padEnd(25))} ${pc10.gray(
                 localVersion.padEnd(10)
-              )} ${pc6.gray(remoteVersion.padEnd(10))} ${pc6.green("\u2714 Up to date")}`
+              )} ${pc10.gray(remoteVersion.padEnd(10))} ${pc10.green("\u2714 Up to date")}`
             );
           } else {
             updatesAvailableCount++;
             console.log(
-              `  ${pc6.cyan(instSlug.padEnd(25))} ${pc6.yellow(
+              `  ${pc10.cyan(instSlug.padEnd(25))} ${pc10.yellow(
                 localVersion.padEnd(10)
-              )} ${pc6.green(remoteVersion.padEnd(10))} ${pc6.bold(
-                pc6.yellow("\u26A0\uFE0F  Update available")
+              )} ${pc10.green(remoteVersion.padEnd(10))} ${pc10.bold(
+                pc10.yellow("\u26A0\uFE0F  Update available")
               )}`
             );
           }
         }
       }
-      console.log(pc6.dim("  ----------------------------------------------------------------------"));
+      console.log(pc10.dim("  ----------------------------------------------------------------------"));
       if (updatesAvailableCount > 0) {
         console.log(
           `
-\u{1F4E2} ${pc6.bold(pc6.yellow(String(updatesAvailableCount)))} component(s) have updates available.`
+\u{1F4E2} ${pc10.bold(pc10.yellow(String(updatesAvailableCount)))} component(s) have updates available.`
         );
-        console.log(`\u{1F449} Run ${pc6.bold(pc6.cyan("vv add <slug> --overwrite"))} to update a component.
+        console.log(`\u{1F449} Run ${pc10.bold(pc10.cyan("npx vectorvesper add <slug> --overwrite"))} to update a component.
 `);
       } else {
         console.log(`
-${pc6.green("\u2714")} All components are up to date!
+${pc10.green("\u2714")} All components are up to date!
 `);
       }
     } catch (error) {
       const message = error instanceof Error ? error.message : String(error);
-      spinner.fail(pc6.red(`Failed to check updates: ${message}`));
+      spinner.fail(pc10.red(`Failed to check updates: ${message}`));
       process.exit(1);
     }
   }
 }
 
 // src/commands/auth.ts
-import pc7 from "picocolors";
+import pc11 from "picocolors";
 async function loginCommand(key) {
   if (!key || key.trim().length === 0) {
     logger.error("Please provide a license key.");
     console.log(`
-  Usage: ${pc7.cyan("vv login <your-license-key>")}`);
-    console.log(`  \u{1F511} Get a key at ${pc7.cyan("https://vectorvesper.dev/pricing")}
+  Usage: ${pc11.cyan("npx vectorvesper login <your-license-key>")}`);
+    console.log(`  \u{1F511} Get a key at ${pc11.cyan("https://vectorvesper.dev/pricing")}
 `);
     process.exit(1);
   }
@@ -1044,7 +1446,7 @@ async function loginCommand(key) {
   if (trimmedKey.length < 8) {
     logger.error("That doesn't look like a valid license key.");
     console.log(`
-  \u{1F511} License keys are available at ${pc7.cyan("https://vectorvesper.dev/pricing")}
+  \u{1F511} License keys are available at ${pc11.cyan("https://vectorvesper.dev/pricing")}
 `);
     process.exit(1);
   }
@@ -1061,18 +1463,18 @@ async function loginCommand(key) {
     process.exit(1);
   }
   console.log("");
-  console.log(`  ${pc7.green(pc7.bold("\u2714"))} License key saved successfully!`);
-  console.log(`  ${pc7.dim("Stored at:")} ${pc7.cyan(getGlobalConfigPath())}`);
+  console.log(`  ${pc11.green(pc11.bold("\u2714"))} License key saved successfully!`);
+  console.log(`  ${pc11.dim("Stored at:")} ${pc11.cyan(getGlobalConfigPath())}`);
   console.log("");
-  console.log(`  ${pc7.dim("Pro components are now available when you run")} ${pc7.cyan("vv add <slug>")}`);
-  console.log(`  ${pc7.dim("To verify your account:")} ${pc7.cyan("vv whoami")}`);
+  console.log(`  ${pc11.dim("Pro components are now available when you run")} ${pc11.cyan("npx vectorvesper add <slug>")}`);
+  console.log(`  ${pc11.dim("To verify your account:")} ${pc11.cyan("npx vectorvesper whoami")}`);
   console.log("");
 }
 async function logoutCommand() {
   const config = loadGlobalConfig();
   if (!config.auth?.token) {
     console.log(`
-  ${pc7.dim("You're not logged in. Nothing to do.")}
+  ${pc11.dim("You're not logged in. Nothing to do.")}
 `);
     return;
   }
@@ -1085,46 +1487,46 @@ async function logoutCommand() {
     process.exit(1);
   }
   console.log("");
-  console.log(`  ${pc7.green(pc7.bold("\u2714"))} Logged out successfully.`);
-  console.log(`  ${pc7.dim("Your license key has been removed from")} ${pc7.cyan(getGlobalConfigPath())}`);
-  console.log(`  ${pc7.dim("Free components remain available.")}`);
+  console.log(`  ${pc11.green(pc11.bold("\u2714"))} Logged out successfully.`);
+  console.log(`  ${pc11.dim("Your license key has been removed from")} ${pc11.cyan(getGlobalConfigPath())}`);
+  console.log(`  ${pc11.dim("Free components remain available.")}`);
   console.log("");
 }
 async function whoamiCommand() {
   const config = loadGlobalConfig();
   console.log("");
-  console.log(pc7.bold(pc7.cyan("  Vector Vesper Account Status\n")));
+  console.log(pc11.bold(pc11.cyan("  Vector Vesper Account Status\n")));
   if (config.auth?.token) {
     const maskedKey = config.auth.token.slice(0, 6) + "\u2026" + config.auth.token.slice(-4);
     const tier = config.auth.tier || "pro";
-    console.log(`  ${pc7.bold("Status:")}   ${pc7.green("Authenticated")}`);
-    console.log(`  ${pc7.bold("Key:")}      ${pc7.cyan(maskedKey)}`);
-    console.log(`  ${pc7.bold("Tier:")}     ${pc7.magenta(tier)}`);
+    console.log(`  ${pc11.bold("Status:")}   ${pc11.green("Authenticated")}`);
+    console.log(`  ${pc11.bold("Key:")}      ${pc11.cyan(maskedKey)}`);
+    console.log(`  ${pc11.bold("Tier:")}     ${pc11.magenta(tier)}`);
     if (config.auth.email) {
-      console.log(`  ${pc7.bold("Email:")}    ${pc7.cyan(config.auth.email)}`);
+      console.log(`  ${pc11.bold("Email:")}    ${pc11.cyan(config.auth.email)}`);
     }
     if (config.auth.expiresAt) {
       const expiry = new Date(config.auth.expiresAt);
       const now = /* @__PURE__ */ new Date();
       const isExpired = expiry < now;
-      console.log(`  ${pc7.bold("Expires:")}  ${isExpired ? pc7.red("EXPIRED") : pc7.green(expiry.toLocaleDateString())}`);
+      console.log(`  ${pc11.bold("Expires:")}  ${isExpired ? pc11.red("EXPIRED") : pc11.green(expiry.toLocaleDateString())}`);
     }
     console.log("");
-    console.log(`  ${pc7.dim("Config:")} ${pc7.cyan(getGlobalConfigPath())}`);
-    console.log(`  ${pc7.dim("Manage your account at")} ${pc7.cyan("https://vectorvesper.dev/account")}`);
+    console.log(`  ${pc11.dim("Config:")} ${pc11.cyan(getGlobalConfigPath())}`);
+    console.log(`  ${pc11.dim("Manage your account at")} ${pc11.cyan("https://vectorvesper.dev/account")}`);
   } else {
-    console.log(`  ${pc7.bold("Status:")}   ${pc7.yellow("Anonymous (free tier)")}`);
-    console.log(`  ${pc7.bold("Access:")}   ${pc7.dim("Free components only")}`);
+    console.log(`  ${pc11.bold("Status:")}   ${pc11.yellow("Anonymous (free tier)")}`);
+    console.log(`  ${pc11.bold("Access:")}   ${pc11.dim("Free components only")}`);
     console.log("");
-    console.log(`  ${pc7.dim("To unlock pro components:")}`);
-    console.log(`  ${pc7.cyan("vv login <your-license-key>")}`);
-    console.log(`  \u{1F511} ${pc7.dim("Get a key at")} ${pc7.cyan("https://vectorvesper.dev/pricing")}`);
+    console.log(`  ${pc11.dim("To unlock pro components:")}`);
+    console.log(`  ${pc11.cyan("npx vectorvesper login <your-license-key>")}`);
+    console.log(`  \u{1F511} ${pc11.dim("Get a key at")} ${pc11.cyan("https://vectorvesper.dev/pricing")}`);
   }
   console.log("");
 }
 
 // src/index.ts
-var version = true ? "0.1.1" : "0.0.0-dev";
+var version = true ? "0.2.1" : "0.0.0-dev";
 var program = new Command();
 program.name("vv").description("Vector Vesper CLI \u2014 add visual components to your React project").version(version).option("--verbose", "Show detailed debug output").hook("preAction", (thisCommand) => {
   const opts = thisCommand.opts();
@@ -1138,9 +1540,15 @@ program.command("init").description("Initialize Vector Vesper configuration in y
 program.command("list").description("List all available components in the registry").action(async () => {
   await listCommand();
 });
-program.command("add <slug>").description("Add a component to your project").option("-o, --overwrite", "Overwrite existing files without prompting").option("-y, --yes", "Accept all default prompts").option("-d, --dry-run", "Simulate the installation without writing files").action(async (slug, options) => {
+program.command("add <slug>").description("Add a component to your project").option("-o, --overwrite", "Overwrite existing files without prompting").option("-y, --yes", "Accept all default prompts").option("-d, --dry-run", "Simulate the installation without writing files").option("--no-install", "Skip auto-installing missing dependencies").action(async (slug, options) => {
   await addCommand(slug, options);
 });
+program.command("update [slug]").description("Update installed components to the latest registry version").option("-f, --force", "Re-write files even if the version already matches").action(async (slug, options) => {
+  await updateCommand(slug, options);
+});
+program.command("remove <slug>").alias("rm").description("Remove an installed component and its files").option("-y, --yes", "Skip the confirmation prompt").action(async (slug, options) => {
+  await removeCommand(slug, options);
+});
 program.command("info").description("Show project diagnostics and list installed components").action(async () => {
   await infoCommand();
 });

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "vectorvesper",
-  "version": "0.1.1",
-  "description": "Add premium WebGL and React visual components to your project via CLI",
+  "version": "0.2.1",
+  "description": "Add WebGL, React Three Fiber & advanced motion components to your project via CLI — motion, engineered.",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.js",
   "bin": {
-    "vv": "./dist/index.js"
+    "vv": "dist/index.js"
   },
   "files": [
     "dist",
@@ -41,7 +41,9 @@
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@clack/prompts": "^0.7.0",
@@ -53,6 +55,7 @@
   "devDependencies": {
     "@types/node": "^25.9.2",
     "tsup": "^8.0.2",
-    "typescript": "^6.0.3"
+    "typescript": "^6.0.3",
+    "vitest": "^2.1.8"
   }
 }