veloria-ui 0.1.2

package/dist/cli/index.js

@@ -0,0 +1,511 @@
+#!/usr/bin/env node
+#!/usr/bin/env node
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// package.json
+var require_package = __commonJS({
+  "package.json"(exports2, module2) {
+    module2.exports = {
+      name: "veloria-ui",
+      version: "0.1.2",
+      private: false,
+      description: "Veloria UI \u2014 Build anything. Ship faster. 102 accessible, composable React components with Tailwind CSS and dark mode.",
+      keywords: [
+        "react",
+        "ui",
+        "components",
+        "veloria-ui",
+        "veloria-ui",
+        "design-system",
+        "accessible",
+        "aria",
+        "tailwind",
+        "tailwindcss",
+        "nextjs",
+        "typescript",
+        "dark-mode",
+        "radix-ui",
+        "component-library"
+      ],
+      homepage: "https://veloria-ui.vercel.app/",
+      repository: {
+        type: "git",
+        url: "https://github.com/JohnDev19/Veloria-UI.git"
+      },
+      bugs: {
+        url: "https://github.com/JohnDev19/Veloria-UI/issues"
+      },
+      license: "MIT",
+      author: {
+        name: "JohnDev19",
+        url: "https://github.com/JohnDev19"
+      },
+      sideEffects: [
+        "**/*.css"
+      ],
+      exports: {
+        ".": {
+          types: "./dist/index.d.ts",
+          import: "./dist/index.mjs",
+          require: "./dist/index.js"
+        },
+        "./styles": "./dist/styles/atlas.css",
+        "./tailwind": "./dist/tailwind.js",
+        "./provider": {
+          types: "./dist/provider.d.ts",
+          import: "./dist/provider.mjs",
+          require: "./dist/provider.js"
+        },
+        "./cli": "./dist/cli/index.js"
+      },
+      main: "./dist/index.js",
+      module: "./dist/index.mjs",
+      types: "./dist/index.d.ts",
+      bin: {
+        "veloria-ui": "./dist/cli/index.js",
+        atlas: "./dist/cli/index.js"
+      },
+      files: [
+        "dist",
+        "src",
+        "README.md",
+        "CHANGELOG.md",
+        "LICENSE"
+      ],
+      scripts: {
+        build: "tsup",
+        dev: "tsup --watch",
+        lint: "eslint src --ext .ts,.tsx",
+        typecheck: "tsc --noEmit",
+        clean: "rm -rf dist",
+        prepublishOnly: "npm run build"
+      },
+      peerDependencies: {
+        react: "^18.0.0",
+        "react-dom": "^18.0.0",
+        tailwindcss: ">=3.0.0"
+      },
+      peerDependenciesMeta: {
+        tailwindcss: { optional: true }
+      },
+      dependencies: {
+        "@radix-ui/react-accessible-icon": "^1.0.3",
+        "@radix-ui/react-alert-dialog": "^1.0.5",
+        "@radix-ui/react-aspect-ratio": "^1.0.3",
+        "@radix-ui/react-avatar": "^1.0.4",
+        "@radix-ui/react-checkbox": "^1.0.4",
+        "@radix-ui/react-collapsible": "^1.0.3",
+        "@radix-ui/react-context-menu": "^2.1.5",
+        "@radix-ui/react-dialog": "^1.0.5",
+        "@radix-ui/react-dropdown-menu": "^2.0.6",
+        "@radix-ui/react-hover-card": "^1.0.7",
+        "@radix-ui/react-label": "^2.0.2",
+        "@radix-ui/react-navigation-menu": "^1.1.4",
+        "@radix-ui/react-popover": "^1.0.7",
+        "@radix-ui/react-portal": "^1.0.4",
+        "@radix-ui/react-progress": "^1.0.3",
+        "@radix-ui/react-radio-group": "^1.1.3",
+        "@radix-ui/react-scroll-area": "^1.0.5",
+        "@radix-ui/react-select": "^2.0.0",
+        "@radix-ui/react-separator": "^1.0.3",
+        "@radix-ui/react-slider": "^1.1.2",
+        "@radix-ui/react-slot": "^1.0.2",
+        "@radix-ui/react-switch": "^1.0.3",
+        "@radix-ui/react-tabs": "^1.0.4",
+        "@radix-ui/react-toast": "^1.1.5",
+        "@radix-ui/react-toggle": "^1.0.3",
+        "@radix-ui/react-tooltip": "^1.0.7",
+        chalk: "^5.3.0",
+        "class-variance-authority": "^0.7.0",
+        clsx: "^2.1.0",
+        cmdk: "^0.2.0",
+        commander: "^11.1.0",
+        execa: "^8.0.1",
+        "fs-extra": "^11.2.0",
+        "lucide-react": "^0.309.0",
+        ora: "^7.0.1",
+        prompts: "^2.4.2",
+        "tailwind-merge": "^2.2.0"
+      },
+      devDependencies: {
+        "@types/fs-extra": "^11.0.4",
+        "@types/node": "^20.11.5",
+        "@types/prompts": "^2.4.9",
+        "@types/react": "^18.2.48",
+        "@types/react-dom": "^18.2.18",
+        prettier: "^3.2.4",
+        tailwindcss: "^3.4.1",
+        tsup: "^8.0.1",
+        typescript: "^5.3.3"
+      },
+      engines: {
+        node: ">=18.0.0"
+      }
+    };
+  }
+});
+
+// src/cli/index.ts
+var import_path = __toESM(require("path"));
+var import_commander = require("commander");
+var import_chalk = __toESM(require("chalk"));
+var import_ora = __toESM(require("ora"));
+var import_prompts = __toESM(require("prompts"));
+var import_fs_extra = __toESM(require("fs-extra"));
+var import_execa = require("execa");
+
+// src/cli/registry.ts
+var REGISTRY = [
+  // Basic
+  { name: "button", category: "basic", description: "Solid, outline, ghost, soft, link, danger variants. Loading state, icon slots.", deps: ["@radix-ui/react-slot", "class-variance-authority", "clsx", "tailwind-merge"] },
+  { name: "icon-button", category: "basic", description: "Square or circular icon-only button.", deps: ["@radix-ui/react-slot", "class-variance-authority", "clsx", "tailwind-merge"] },
+  { name: "link", category: "basic", description: "Anchor with external link indicator and underline control.", deps: ["@radix-ui/react-slot"] },
+  { name: "badge", category: "basic", description: "Compact label \u2014 5 color variants, optional dot.", deps: ["class-variance-authority", "clsx", "tailwind-merge"] },
+  { name: "avatar", category: "basic", description: "Image with fallback initials, status ring, 6 sizes.", deps: ["@radix-ui/react-avatar"] },
+  { name: "avatar-group", category: "basic", description: "Stacked avatars with overflow count.", deps: ["@radix-ui/react-avatar"], registryDeps: ["avatar"] },
+  { name: "divider", category: "basic", description: "Horizontal/vertical separator with optional center label.", deps: ["@radix-ui/react-separator"] },
+  { name: "tag", category: "basic", description: "Closable colored tag with icon slot.", deps: [] },
+  { name: "chip", category: "basic", description: "Toggleable chip with avatar/icon and remove button.", deps: [] },
+  { name: "tooltip", category: "basic", description: "Radix tooltip, all four sides, configurable delay.", deps: ["@radix-ui/react-tooltip"] },
+  // Layout
+  { name: "container", category: "layout", description: "Responsive max-width wrapper with padding control.", deps: [] },
+  { name: "stack", category: "layout", description: "Flex column/row with gap, align, justify, divider.", deps: [] },
+  { name: "grid", category: "layout", description: "CSS Grid with column/row/gap config.", deps: [] },
+  { name: "flex", category: "layout", description: "Flex with full directional control.", deps: [] },
+  { name: "section", category: "layout", description: "Semantic section with vertical padding presets.", deps: [] },
+  { name: "spacer", category: "layout", description: "Invisible spacing element.", deps: [] },
+  { name: "aspect-ratio", category: "layout", description: "Radix aspect-ratio container.", deps: ["@radix-ui/react-aspect-ratio"] },
+  { name: "center", category: "layout", description: "Flex centering helper.", deps: [] },
+  { name: "scroll-area", category: "layout", description: "Custom scrollbar via Radix ScrollArea.", deps: ["@radix-ui/react-scroll-area"] },
+  { name: "masonry", category: "layout", description: "CSS multi-column masonry grid.", deps: [] },
+  // Navigation
+  { name: "navbar", category: "navigation", description: "Sticky, glass-blur top bar.", deps: [] },
+  { name: "sidebar", category: "navigation", description: "Collapsible side nav with width transition.", deps: [] },
+  { name: "menu", category: "navigation", description: "Vertical nav menu with active/disabled states.", deps: [] },
+  { name: "dropdown-menu", category: "navigation", description: "Full Radix Dropdown with all sub-primitives.", deps: ["@radix-ui/react-dropdown-menu"] },
+  { name: "breadcrumb", category: "navigation", description: "Accessible trail with custom separator.", deps: [] },
+  { name: "pagination", category: "navigation", description: "Page numbers with ellipsis and prev/next.", deps: [] },
+  { name: "tabs", category: "navigation", description: "Line, pills, enclosed variants. Radix powered.", deps: ["@radix-ui/react-tabs"] },
+  { name: "command-palette", category: "navigation", description: "\u2318K command palette.", deps: ["cmdk", "@radix-ui/react-dialog"], registryDeps: ["command-dialog"] },
+  { name: "navigation-menu", category: "navigation", description: "Radix Navigation Menu for complex navbars.", deps: ["@radix-ui/react-navigation-menu"] },
+  { name: "stepper", category: "navigation", description: "Horizontal/vertical multi-step indicator.", deps: [] },
+  // Forms
+  { name: "input", category: "forms", description: "Left/right icon slots, sizes, error state.", deps: ["class-variance-authority"] },
+  { name: "textarea", category: "forms", description: "Multi-line input with resize control.", deps: [] },
+  { name: "select", category: "forms", description: "Full Radix Select with all sub-primitives.", deps: ["@radix-ui/react-select"] },
+  { name: "checkbox", category: "forms", description: "With label, description, error state.", deps: ["@radix-ui/react-checkbox"] },
+  { name: "radio-group", category: "forms", description: "Per-option labels and descriptions.", deps: ["@radix-ui/react-radio-group"] },
+  { name: "switch", category: "forms", description: "Three sizes, label, description.", deps: ["@radix-ui/react-switch"] },
+  { name: "slider", category: "forms", description: "Single-thumb range slider.", deps: ["@radix-ui/react-slider"] },
+  { name: "range-slider", category: "forms", description: "Dual-thumb slider.", deps: ["@radix-ui/react-slider"], registryDeps: ["slider"] },
+  { name: "date-picker", category: "forms", description: "Native date input wrapper.", deps: [] },
+  { name: "time-picker", category: "forms", description: "Native time input wrapper.", deps: [] },
+  // Advanced Forms
+  { name: "file-upload", category: "advanced-forms", description: "Drag-and-drop zone with click-to-upload fallback.", deps: [] },
+  { name: "otp-input", category: "advanced-forms", description: "PIN/OTP with auto-advance and paste support.", deps: [] },
+  { name: "color-picker", category: "advanced-forms", description: "Swatches + hex input.", deps: [] },
+  { name: "search-input", category: "advanced-forms", description: "Search with loading state and clear button.", deps: [] },
+  { name: "password-input", category: "advanced-forms", description: "Password with show/hide toggle.", deps: [] },
+  { name: "combobox", category: "advanced-forms", description: "Searchable single-value select.", deps: [] },
+  { name: "multi-select", category: "advanced-forms", description: "Multi-value select with chips.", deps: [] },
+  { name: "form-field", category: "advanced-forms", description: "Form field wrapper with spacing.", deps: [] },
+  { name: "form-label", category: "advanced-forms", description: "Label with required/optional indicators.", deps: [] },
+  { name: "form-error", category: "advanced-forms", description: "Accessible error message.", deps: [] },
+  // Data Display
+  { name: "card", category: "data-display", description: "Surface with header/content/footer slots. 5 variants.", deps: [] },
+  { name: "table", category: "data-display", description: "Full HTML table system.", deps: [] },
+  { name: "data-table", category: "data-display", description: "Sortable data table with loading and empty states.", deps: [] },
+  { name: "list", category: "data-display", description: "Simple, bordered, and divided lists.", deps: [] },
+  { name: "list-item", category: "data-display", description: "List item with icon and extra slot.", deps: [] },
+  { name: "statistic", category: "data-display", description: "Key metric with trend indicator.", deps: [] },
+  { name: "timeline", category: "data-display", description: "Vertical events with color-coded icons.", deps: [] },
+  { name: "calendar", category: "data-display", description: "Month picker with highlighted dates.", deps: [] },
+  { name: "chart", category: "data-display", description: "Chart wrapper \u2014 bring your own chart library.", deps: [] },
+  { name: "code-block", category: "data-display", description: "Code display with copy button and line numbers.", deps: [] },
+  // Feedback
+  { name: "alert", category: "feedback", description: "Info/success/warning/danger with optional dismiss.", deps: ["class-variance-authority"] },
+  { name: "toast", category: "feedback", description: "Radix Toast with all sub-primitives.", deps: ["@radix-ui/react-toast"] },
+  { name: "snackbar", category: "feedback", description: "Positioned message with action.", deps: [] },
+  { name: "progress", category: "feedback", description: "Linear bar with color variants.", deps: ["@radix-ui/react-progress"] },
+  { name: "circular-progress", category: "feedback", description: "SVG ring with indeterminate mode.", deps: [] },
+  { name: "skeleton", category: "feedback", description: "Pulse placeholder for text, rect, circle.", deps: [] },
+  { name: "loading-spinner", category: "feedback", description: "Accessible SVG spinner.", deps: [] },
+  { name: "empty-state", category: "feedback", description: "Icon + title + description + action.", deps: [] },
+  { name: "status-indicator", category: "feedback", description: "Online/offline/busy/away dot with pulse.", deps: [] },
+  { name: "notification", category: "feedback", description: "Notification item with avatar, timestamp, unread dot.", deps: [] },
+  // Overlay
+  { name: "modal", category: "overlay", description: "Preset dialog \u2014 sm to full size variants.", deps: ["@radix-ui/react-dialog"] },
+  { name: "dialog", category: "overlay", description: "Full Radix Dialog primitive suite.", deps: ["@radix-ui/react-dialog"] },
+  { name: "drawer", category: "overlay", description: "Slides in from any edge.", deps: ["@radix-ui/react-dialog"] },
+  { name: "popover", category: "overlay", description: "Floating panel.", deps: ["@radix-ui/react-popover"] },
+  { name: "hover-card", category: "overlay", description: "Rich hover preview.", deps: ["@radix-ui/react-hover-card"] },
+  { name: "context-menu", category: "overlay", description: "Right-click menu.", deps: ["@radix-ui/react-context-menu"] },
+  { name: "command-dialog", category: "overlay", description: "\u2318K palette.", deps: ["cmdk", "@radix-ui/react-dialog"] },
+  { name: "sheet", category: "overlay", description: "Drawer alias.", deps: ["@radix-ui/react-dialog"], registryDeps: ["drawer"] },
+  { name: "lightbox", category: "overlay", description: "Full-screen image overlay.", deps: ["@radix-ui/react-dialog"] },
+  { name: "image-viewer", category: "overlay", description: "Lightbox alias.", deps: ["@radix-ui/react-dialog"], registryDeps: ["lightbox"] },
+  // Media
+  { name: "image", category: "media", description: "Image with fallback, aspect ratio, fit, caption.", deps: [] },
+  { name: "video-player", category: "media", description: "HTML5 video with captions/subtitles support.", deps: [] },
+  { name: "audio-player", category: "media", description: "Custom audio UI with seek bar, cover art.", deps: [] },
+  { name: "carousel", category: "media", description: "Autoplay, dots, arrows, loop, slidesPerView.", deps: [] },
+  { name: "gallery", category: "media", description: "Responsive image grid with click handler.", deps: [] },
+  // Utility
+  { name: "theme-switcher", category: "utility", description: "Icon / toggle / select variants.", deps: [] },
+  { name: "copy-button", category: "utility", description: "Icon or labelled copy button with success feedback.", deps: [] },
+  { name: "keyboard-shortcut", category: "utility", description: "Styled <kbd> shortcut display.", deps: [] },
+  { name: "resizable-panel", category: "utility", description: "Drag-to-resize panel with min/max constraints.", deps: [] },
+  { name: "drag-drop-area", category: "utility", description: "Accessible file drop zone.", deps: [] }
+];
+var COMPONENTS_BY_NAME = new Map(REGISTRY.map((c) => [c.name, c]));
+var CATEGORIES = [
+  "basic",
+  "layout",
+  "navigation",
+  "forms",
+  "advanced-forms",
+  "data-display",
+  "feedback",
+  "overlay",
+  "media",
+  "utility"
+];
+
+// src/cli/index.ts
+var PKG_VERSION = require_package().version;
+var banner = `
+${import_chalk.default.bold.blue("  \u2566  \u2566\u2554\u2550\u2557\u2566  \u2554\u2550\u2557\u2566\u2550\u2557\u2566\u2554\u2550\u2557")}
+${import_chalk.default.bold.blue("  \u255A\u2557\u2554\u255D\u2551\u2563 \u2551  \u2551 \u2551\u2560\u2566\u255D\u2551\u2560\u2550\u2563")}
+${import_chalk.default.bold.blue("   \u255A\u255D \u255A\u2550\u255D\u2569\u2550\u255D\u255A\u2550\u255D\u2569\u255A\u2550\u2569\u2569 \u2569")}
+  ${import_chalk.default.dim("Build anything. Ship faster.")}
+  ${import_chalk.default.dim("by JohnDev19  \xB7  https://github.com/JohnDev19/Veloria-UI")}
+`;
+var program = new import_commander.Command();
+program.name("veloria-ui").description("veloria-ui CLI \u2014 copy components into your project").version(PKG_VERSION, "-v, --version").addHelpText("before", banner);
+program.command("init").description("Set up veloria-ui in your project").option("--typescript", "Use TypeScript", true).option("--tailwind", "Configure Tailwind", true).option("--no-install", "Skip dependency install").option("-y, --yes", "Skip all prompts, use defaults").action(async (opts) => {
+  console.log(import_chalk.default.bold.blue("\n  Veloria UI Init\n") + import_chalk.default.dim("  Let's get you set up\u2026\n"));
+  const cwd = process.cwd();
+  const pkgPath = import_path.default.join(cwd, "package.json");
+  if (!import_fs_extra.default.existsSync(pkgPath)) {
+    console.error(import_chalk.default.red("\n  No package.json found. Run from your project root.\n"));
+    process.exit(1);
+  }
+  const pkg = import_fs_extra.default.readJsonSync(pkgPath);
+  const isNext = !!(pkg.dependencies?.next || pkg.devDependencies?.next);
+  const answers = opts.yes ? { componentsDir: "components/ui", cssPath: isNext ? "app/globals.css" : "src/index.css", pm: detectPM(cwd) } : await (0, import_prompts.default)([
+    { type: "text", name: "componentsDir", message: "Where should components go?", initial: "components/ui" },
+    { type: "text", name: "cssPath", message: "Path to your global CSS file?", initial: isNext ? "app/globals.css" : "src/index.css" },
+    {
+      type: "select",
+      name: "pm",
+      message: "Package manager?",
+      choices: [
+        { title: "npm", value: "npm" },
+        { title: "pnpm", value: "pnpm" },
+        { title: "yarn", value: "yarn" },
+        { title: "bun", value: "bun" }
+      ]
+    }
+  ]);
+  if (!answers.componentsDir) return;
+  import_fs_extra.default.writeJsonSync(import_path.default.join(cwd, "atlas.config.json"), {
+    $schema: "https://veloria-ui.vercel.app/schema.json",
+    style: "default",
+    typescript: opts.typescript ?? true,
+    tailwind: { config: "tailwind.config.ts", css: answers.cssPath, baseColor: "slate", cssVariables: true },
+    aliases: { components: `@/${answers.componentsDir}`, utils: "@/lib/utils" }
+  }, { spaces: 2 });
+  console.log(import_chalk.default.green("  \u2713 Created atlas.config.json"));
+  const utilsPath = import_path.default.join(cwd, "lib", "utils.ts");
+  if (!import_fs_extra.default.existsSync(utilsPath)) {
+    await import_fs_extra.default.ensureDir(import_path.default.dirname(utilsPath));
+    await import_fs_extra.default.writeFile(
+      utilsPath,
+      `import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+`
+    );
+    console.log(import_chalk.default.green("  \u2713 Created lib/utils.ts"));
+  }
+  if (opts.install !== false) {
+    const pm = answers.pm;
+    const spinner = (0, import_ora.default)(`Installing core deps with ${pm}\u2026`).start();
+    try {
+      const deps = ["clsx", "tailwind-merge", "class-variance-authority", "@radix-ui/react-slot"];
+      const cmd = pm === "pnpm" ? ["pnpm", "add", ...deps] : pm === "bun" ? ["bun", "add", ...deps] : pm === "yarn" ? ["yarn", "add", ...deps] : ["npm", "install", ...deps];
+      await (0, import_execa.execa)(cmd[0], cmd.slice(1), { cwd });
+      spinner.succeed(import_chalk.default.green("Core deps installed"));
+    } catch {
+      spinner.warn(import_chalk.default.yellow("Auto-install failed \u2014 run manually:"));
+      console.log(import_chalk.default.dim("  npm install clsx tailwind-merge class-variance-authority @radix-ui/react-slot\n"));
+    }
+  }
+  console.log(`
+${import_chalk.default.bold.green("  Veloria UI is ready!")}
+
+  ${import_chalk.default.dim("Next steps:")}
+  ${import_chalk.default.cyan("1.")} Add components: ${import_chalk.default.bold("npx veloria-ui add button card modal")}
+  ${import_chalk.default.cyan("2.")} Browse all:     ${import_chalk.default.bold("npx veloria-ui list")}
+  ${import_chalk.default.cyan("3.")} Docs:           ${import_chalk.default.bold("https://veloria-ui.vercel.app/")}
+  ${import_chalk.default.cyan("4.")} Issues:         ${import_chalk.default.bold("https://github.com/JohnDev19/Veloria-UI/issues")}
+`);
+});
+program.command("add [components...]").alias("a").description("Copy one or more components into your project").option("-d, --dir <path>", "Output directory", "components/ui").option("--overwrite", "Replace existing files").option("--no-install", "Skip npm dep install").action(async (components, opts) => {
+  const cwd = process.cwd();
+  if (!components?.length) {
+    console.log(import_chalk.default.red("\n  Specify at least one component.\n"));
+    console.log(`  ${import_chalk.default.dim("Example:")} ${import_chalk.default.cyan("npx veloria-ui add button card modal\n")}`);
+    process.exit(1);
+  }
+  const toAdd = /* @__PURE__ */ new Set();
+  function resolve(name) {
+    const key = name.toLowerCase().replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+    const meta = COMPONENTS_BY_NAME.get(key) || COMPONENTS_BY_NAME.get(name);
+    if (!meta) {
+      console.error(import_chalk.default.red(`
+  "${name}" not found in the registry.
+`));
+      console.log(`  Run ${import_chalk.default.cyan("npx veloria-ui list")} to see what's available.
+`);
+      return;
+    }
+    toAdd.add(meta.name);
+    meta.registryDeps?.forEach(resolve);
+  }
+  components.forEach(resolve);
+  if (!toAdd.size) return;
+  const configPath = import_path.default.join(cwd, "atlas.config.json");
+  const config = import_fs_extra.default.existsSync(configPath) ? import_fs_extra.default.readJsonSync(configPath) : null;
+  const aliasDir = config?.aliases?.components?.replace(/^@\//, "");
+  const targetDir = import_path.default.join(cwd, opts.dir ?? aliasDir ?? "components/ui");
+  console.log(import_chalk.default.bold.blue("\n  Veloria UI Add\n") + import_chalk.default.dim(`  Adding: ${[...toAdd].join(", ")}
+`));
+  const allDeps = /* @__PURE__ */ new Set();
+  for (const name of toAdd) COMPONENTS_BY_NAME.get(name).deps.forEach((d) => allDeps.add(d));
+  for (const name of toAdd) {
+    const spinner = (0, import_ora.default)(`Adding ${import_chalk.default.bold(name)}`).start();
+    const pascal = name.split("-").map((p) => p[0].toUpperCase() + p.slice(1)).join("");
+    const dir = import_path.default.join(targetDir, name);
+    await import_fs_extra.default.ensureDir(dir);
+    const file = import_path.default.join(dir, "index.tsx");
+    if (import_fs_extra.default.existsSync(file) && !opts.overwrite) {
+      spinner.warn(import_chalk.default.yellow(`${name} already exists  (--overwrite to replace)`));
+      continue;
+    }
+    await import_fs_extra.default.writeFile(
+      file,
+      `/**
+ * Veloria UI \u2014 ${pascal}
+ *
+ * Added by the veloria-ui CLI. This file is yours \u2014 edit it however you want.
+ * Re-export from veloria-ui to stay in sync, or paste the full source here
+ * to customise the internals.
+ *
+ * Docs:   https://veloria-ui.vercel.app/components/${name}
+ * Source: https://github.com/JohnDev19/Veloria-UI
+ */
+
+export { ${pascal} } from "veloria-ui";
+export type { ${pascal}Props } from "veloria-ui";
+`
+    );
+    spinner.succeed(import_chalk.default.green(`${name}  \u2192  ${import_path.default.relative(cwd, file)}`));
+  }
+  if (opts.install !== false && allDeps.size > 0) {
+    const pm = detectPM(cwd);
+    const spinner = (0, import_ora.default)(`Installing ${allDeps.size} package(s)\u2026`).start();
+    try {
+      const deps = [...allDeps];
+      const cmd = pm === "pnpm" ? ["pnpm", "add", ...deps] : pm === "bun" ? ["bun", "add", ...deps] : pm === "yarn" ? ["yarn", "add", ...deps] : ["npm", "install", ...deps];
+      await (0, import_execa.execa)(cmd[0], cmd.slice(1), { cwd });
+      spinner.succeed(import_chalk.default.green(`Installed: ${deps.join(", ")}`));
+    } catch {
+      spinner.warn(import_chalk.default.yellow("Auto-install failed \u2014 run manually:"));
+      console.log(import_chalk.default.dim(`  npm install ${[...allDeps].join(" ")}
+`));
+    }
+  }
+  const exNames = [...toAdd].map((n) => n.split("-").map((p) => p[0].toUpperCase() + p.slice(1)).join("")).join(", ");
+  console.log(`
+${import_chalk.default.bold.green("  Done!")}  ${import_path.default.relative(cwd, targetDir)}
+
+  ${import_chalk.default.cyan(`import { ${exNames} } from "@/components/ui/${[...toAdd][0]}"`)}
+`);
+});
+program.command("list").alias("ls").description("List all available components").option("-c, --category <category>", "Filter by category").action((opts) => {
+  const filterCat = opts.category?.toLowerCase();
+  console.log(import_chalk.default.bold.blue("\n  veloria-ui Components\n"));
+  const cats = filterCat ? [filterCat] : CATEGORIES;
+  for (const cat of cats) {
+    const items = REGISTRY.filter((c) => c.category === cat);
+    if (!items.length) continue;
+    const label = cat.replace("-", " ").replace(/^\w/, (c) => c.toUpperCase());
+    console.log(import_chalk.default.bold(`  ${label} (${items.length})`));
+    for (const c of items) {
+      console.log(`    ${import_chalk.default.cyan(c.name.padEnd(22))} ${import_chalk.default.dim(c.description)}`);
+    }
+    console.log();
+  }
+  console.log(import_chalk.default.dim(`  ${REGISTRY.length} components total
+`) + import_chalk.default.dim("  Add one: ") + import_chalk.default.cyan("npx veloria-ui add <name>\n"));
+});
+program.command("diff [component]").description("Compare your local copy to the latest version").action((component) => {
+  if (!component) {
+    console.log(import_chalk.default.dim("\n  Usage: npx veloria-ui diff <component>\n"));
+    return;
+  }
+  console.log(import_chalk.default.bold.blue(`
+  diff: ${component}
+`) + import_chalk.default.dim("  Comparing local copy to latest in the veloria-ui registry\u2026\n"));
+  console.log(import_chalk.default.yellow("  \u26A0  Registry diff isn't wired up yet."));
+  console.log(import_chalk.default.dim(`  Check the latest source at:
+`) + import_chalk.default.cyan(`  https://github.com/JohnDev19/Veloria-UI/tree/main/src/components
+`));
+});
+program.on("command:*", (operands) => {
+  console.error(import_chalk.default.red(`
+  Unknown command: "${operands[0]}"
+`));
+  program.help();
+  process.exit(1);
+});
+program.parse(process.argv);
+if (!process.argv.slice(2).length) {
+  console.log(banner);
+  program.help();
+}
+function detectPM(cwd) {
+  if (import_fs_extra.default.existsSync(import_path.default.join(cwd, "bun.lockb"))) return "bun";
+  if (import_fs_extra.default.existsSync(import_path.default.join(cwd, "pnpm-lock.yaml"))) return "pnpm";
+  if (import_fs_extra.default.existsSync(import_path.default.join(cwd, "yarn.lock"))) return "yarn";
+  return "npm";
+}