@srcroot/ui 0.0.30 → 0.0.33

package/dist/index.js

@@ -2,425 +2,73 @@
 
 // src/cli/index.ts
 import { Command } from "commander";
+import chalk3 from "chalk";
 
-// src/cli/commands/init.ts
-import fs from "fs-extra";
-import path from "path";
-import chalk from "chalk";
+// src/cli/services/project-initializer.ts
+import fs2 from "fs-extra";
+import path2 from "path";
 import ora from "ora";
 import prompts from "prompts";
+import { fileURLToPath as fileURLToPath2 } from "url";
+
+// src/cli/services/theme-service.ts
+import fs from "fs-extra";
+import path from "path";
 import { fileURLToPath } from "url";
 var __dirname = path.dirname(fileURLToPath(import.meta.url));
-var UTILS_CONTENT = `import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
-`;
-var THEMES = {
-  slate: {
-    name: "Slate",
-    description: "Cool gray with strong blue undertones (default)",
-    light: {
-      background: "0 0% 100%",
-      foreground: "222.2 84% 4.9%",
-      card: "0 0% 100%",
-      "card-foreground": "222.2 84% 4.9%",
-      popover: "0 0% 100%",
-      "popover-foreground": "222.2 84% 4.9%",
-      primary: "222.2 47.4% 11.2%",
-      "primary-foreground": "210 40% 98%",
-      secondary: "210 40% 96.1%",
-      "secondary-foreground": "222.2 47.4% 11.2%",
-      muted: "210 40% 96.1%",
-      "muted-foreground": "215.4 16.3% 46.9%",
-      accent: "210 40% 96.1%",
-      "accent-foreground": "222.2 47.4% 11.2%",
-      destructive: "0 84.2% 60.2%",
-      "destructive-foreground": "210 40% 98%",
-      border: "214.3 31.8% 91.4%",
-      input: "214.3 31.8% 91.4%",
-      ring: "222.2 84% 4.9%"
-    },
-    dark: {
-      background: "222.2 84% 4.9%",
-      foreground: "210 40% 98%",
-      card: "222.2 84% 4.9%",
-      "card-foreground": "210 40% 98%",
-      popover: "222.2 84% 4.9%",
-      "popover-foreground": "210 40% 98%",
-      primary: "210 40% 98%",
-      "primary-foreground": "222.2 47.4% 11.2%",
-      secondary: "217.2 32.6% 17.5%",
-      "secondary-foreground": "210 40% 98%",
-      muted: "217.2 32.6% 17.5%",
-      "muted-foreground": "215 20.2% 65.1%",
-      accent: "217.2 32.6% 17.5%",
-      "accent-foreground": "210 40% 98%",
-      destructive: "0 62.8% 30.6%",
-      "destructive-foreground": "210 40% 98%",
-      border: "217.2 32.6% 17.5%",
-      input: "217.2 32.6% 17.5%",
-      ring: "212.7 26.8% 83.9%"
-    }
-  },
-  neutral: {
-    name: "Neutral",
-    description: "Pure gray, no undertones",
-    light: {
-      background: "0 0% 100%",
-      foreground: "0 0% 3.9%",
-      card: "0 0% 100%",
-      "card-foreground": "0 0% 3.9%",
-      popover: "0 0% 100%",
-      "popover-foreground": "0 0% 3.9%",
-      primary: "0 0% 9%",
-      "primary-foreground": "0 0% 98%",
-      secondary: "0 0% 96.1%",
-      "secondary-foreground": "0 0% 9%",
-      muted: "0 0% 96.1%",
-      "muted-foreground": "0 0% 45.1%",
-      accent: "0 0% 96.1%",
-      "accent-foreground": "0 0% 9%",
-      destructive: "0 84.2% 60.2%",
-      "destructive-foreground": "0 0% 98%",
-      border: "0 0% 89.8%",
-      input: "0 0% 89.8%",
-      ring: "0 0% 3.9%"
-    },
-    dark: {
-      background: "0 0% 3.9%",
-      foreground: "0 0% 98%",
-      card: "0 0% 3.9%",
-      "card-foreground": "0 0% 98%",
-      popover: "0 0% 3.9%",
-      "popover-foreground": "0 0% 98%",
-      primary: "0 0% 98%",
-      "primary-foreground": "0 0% 9%",
-      secondary: "0 0% 14.9%",
-      "secondary-foreground": "0 0% 98%",
-      muted: "0 0% 14.9%",
-      "muted-foreground": "0 0% 63.9%",
-      accent: "0 0% 14.9%",
-      "accent-foreground": "0 0% 98%",
-      destructive: "0 62.8% 30.6%",
-      "destructive-foreground": "0 0% 98%",
-      border: "0 0% 14.9%",
-      input: "0 0% 14.9%",
-      ring: "0 0% 83.1%"
-    }
-  },
-  stone: {
-    name: "Stone",
-    description: "Warm gray with brown undertones",
-    light: {
-      background: "0 0% 100%",
-      foreground: "24 9.8% 10%",
-      card: "0 0% 100%",
-      "card-foreground": "24 9.8% 10%",
-      popover: "0 0% 100%",
-      "popover-foreground": "24 9.8% 10%",
-      primary: "24 9.8% 10%",
-      "primary-foreground": "60 9.1% 97.8%",
-      secondary: "60 4.8% 95.9%",
-      "secondary-foreground": "24 9.8% 10%",
-      muted: "60 4.8% 95.9%",
-      "muted-foreground": "25 5.3% 44.7%",
-      accent: "60 4.8% 95.9%",
-      "accent-foreground": "24 9.8% 10%",
-      destructive: "0 84.2% 60.2%",
-      "destructive-foreground": "60 9.1% 97.8%",
-      border: "20 5.9% 90%",
-      input: "20 5.9% 90%",
-      ring: "24 9.8% 10%"
-    },
-    dark: {
-      background: "24 9.8% 10%",
-      foreground: "60 9.1% 97.8%",
-      card: "24 9.8% 10%",
-      "card-foreground": "60 9.1% 97.8%",
-      popover: "24 9.8% 10%",
-      "popover-foreground": "60 9.1% 97.8%",
-      primary: "60 9.1% 97.8%",
-      "primary-foreground": "24 9.8% 10%",
-      secondary: "12 6.5% 15.1%",
-      "secondary-foreground": "60 9.1% 97.8%",
-      muted: "12 6.5% 15.1%",
-      "muted-foreground": "24 5.4% 63.9%",
-      accent: "12 6.5% 15.1%",
-      "accent-foreground": "60 9.1% 97.8%",
-      destructive: "0 62.8% 30.6%",
-      "destructive-foreground": "60 9.1% 97.8%",
-      border: "12 6.5% 15.1%",
-      input: "12 6.5% 15.1%",
-      ring: "24 5.7% 82.9%"
+var THEME_METADATA = {
+  slate: { name: "Slate", description: "Cool gray with strong blue undertones (default)" },
+  neutral: { name: "Neutral", description: "Pure gray, no undertones" },
+  stone: { name: "Stone", description: "Warm gray with brown undertones" },
+  zinc: { name: "Zinc", description: "Cool gray with subtle blue undertones" },
+  gray: { name: "Gray", description: "True neutral gray" }
+};
+var ThemeService = class {
+  registryThemesPath;
+  constructor() {
+    this.registryThemesPath = path.resolve(__dirname, "..", "src", "registry", "themes");
+  }
+  /**
+   * Get list of available themes from registry/themes/v3/*.css (v3 as primary source)
+   */
+  getAvailableThemes() {
+    const themes = [];
+    const v3Path = path.join(this.registryThemesPath, "v3");
+    if (!fs.existsSync(v3Path)) {
+      return themes;
     }
-  },
-  zinc: {
-    name: "Zinc",
-    description: "Cool gray with subtle blue undertones",
-    light: {
-      background: "0 0% 100%",
-      foreground: "240 10% 3.9%",
-      card: "0 0% 100%",
-      "card-foreground": "240 10% 3.9%",
-      popover: "0 0% 100%",
-      "popover-foreground": "240 10% 3.9%",
-      primary: "240 5.9% 10%",
-      "primary-foreground": "0 0% 98%",
-      secondary: "240 4.8% 95.9%",
-      "secondary-foreground": "240 5.9% 10%",
-      muted: "240 4.8% 95.9%",
-      "muted-foreground": "240 3.8% 46.1%",
-      accent: "240 4.8% 95.9%",
-      "accent-foreground": "240 5.9% 10%",
-      destructive: "0 84.2% 60.2%",
-      "destructive-foreground": "0 0% 98%",
-      border: "240 5.9% 90%",
-      input: "240 5.9% 90%",
-      ring: "240 10% 3.9%"
-    },
-    dark: {
-      background: "240 10% 3.9%",
-      foreground: "0 0% 98%",
-      card: "240 10% 3.9%",
-      "card-foreground": "0 0% 98%",
-      popover: "240 10% 3.9%",
-      "popover-foreground": "0 0% 98%",
-      primary: "0 0% 98%",
-      "primary-foreground": "240 5.9% 10%",
-      secondary: "240 3.7% 15.9%",
-      "secondary-foreground": "0 0% 98%",
-      muted: "240 3.7% 15.9%",
-      "muted-foreground": "240 5% 64.9%",
-      accent: "240 3.7% 15.9%",
-      "accent-foreground": "0 0% 98%",
-      destructive: "0 62.8% 30.6%",
-      "destructive-foreground": "0 0% 98%",
-      border: "240 3.7% 15.9%",
-      input: "240 3.7% 15.9%",
-      ring: "240 4.9% 83.9%"
+    const files = fs.readdirSync(v3Path);
+    for (const file of files) {
+      if (file.endsWith(".css")) {
+        const themeName = file.replace(".css", "");
+        const metadata = THEME_METADATA[themeName] || {
+          name: themeName.charAt(0).toUpperCase() + themeName.slice(1),
+          description: `${themeName} theme`
+        };
+        themes.push({
+          name: metadata.name,
+          description: metadata.description,
+          file
+        });
+      }
     }
-  },
-  gray: {
-    name: "Gray",
-    description: "True neutral gray",
-    light: {
-      background: "0 0% 100%",
-      foreground: "224 71.4% 4.1%",
-      card: "0 0% 100%",
-      "card-foreground": "224 71.4% 4.1%",
-      popover: "0 0% 100%",
-      "popover-foreground": "224 71.4% 4.1%",
-      primary: "220.9 39.3% 11%",
-      "primary-foreground": "210 20% 98%",
-      secondary: "220 14.3% 95.9%",
-      "secondary-foreground": "220.9 39.3% 11%",
-      muted: "220 14.3% 95.9%",
-      "muted-foreground": "220 8.9% 46.1%",
-      accent: "220 14.3% 95.9%",
-      "accent-foreground": "220.9 39.3% 11%",
-      destructive: "0 84.2% 60.2%",
-      "destructive-foreground": "210 20% 98%",
-      border: "220 13% 91%",
-      input: "220 13% 91%",
-      ring: "224 71.4% 4.1%"
-    },
-    dark: {
-      background: "224 71.4% 4.1%",
-      foreground: "210 20% 98%",
-      card: "224 71.4% 4.1%",
-      "card-foreground": "210 20% 98%",
-      popover: "224 71.4% 4.1%",
-      "popover-foreground": "210 20% 98%",
-      primary: "210 20% 98%",
-      "primary-foreground": "220.9 39.3% 11%",
-      secondary: "215 27.9% 16.9%",
-      "secondary-foreground": "210 20% 98%",
-      muted: "215 27.9% 16.9%",
-      "muted-foreground": "217.9 10.6% 64.9%",
-      accent: "215 27.9% 16.9%",
-      "accent-foreground": "210 20% 98%",
-      destructive: "0 62.8% 30.6%",
-      "destructive-foreground": "210 20% 98%",
-      border: "215 27.9% 16.9%",
-      input: "215 27.9% 16.9%",
-      ring: "216 12.2% 83.9%"
+    return themes;
+  }
+  /**
+   * Get the complete CSS content for a theme from the appropriate v3 or v4 folder
+   */
+  async getThemeCss(themeName, isTailwind4) {
+    const versionFolder = isTailwind4 ? "v4" : "v3";
+    const themeFilePath = path.join(this.registryThemesPath, versionFolder, `${themeName}.css`);
+    if (!fs.existsSync(themeFilePath)) {
+      throw new Error(`Theme file not found: ${themeFilePath}`);
     }
+    const content = await fs.readFile(themeFilePath, "utf-8");
+    return content;
   }
 };
-function generateCssVariablesV3(themeName) {
-  const theme = THEMES[themeName];
-  if (!theme) return "";
-  const lightVars = Object.entries(theme.light).map(([key, value]) => `    --${key}: ${value};`).join("\n");
-  const darkVars = Object.entries(theme.dark).map(([key, value]) => `    --${key}: ${value};`).join("\n");
-  return `@tailwind base;
-@tailwind components;
-@tailwind utilities;
 
-@layer base {
-  :root {
-${lightVars}
-    --radius: 0.5rem;
-    --sidebar-width: 16rem;
-    --sidebar-width-mobile: 18rem;
-    --sidebar-width-collapsed: 3rem;
-    --sidebar-width-icon: 3rem;
-    --header-height: 3.5rem;
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-
-  .dark {
-${darkVars}
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-@layer utilities {
-  @keyframes accordion-down {
-    from { height: 0; }
-    to { height: var(--radix-accordion-content-height); }
-  }
-  @keyframes accordion-up {
-    from { height: var(--radix-accordion-content-height); }
-    to { height: 0; }
-  }
-  .animate-accordion-down {
-    animation: accordion-down 0.2s ease-out;
-  }
-  .animate-accordion-up {
-    animation: accordion-up 0.2s ease-out;
-  }
-}
-`;
-}
-function generateCssVariablesV4(themeName) {
-  const theme = THEMES[themeName];
-  if (!theme) return "";
-  const lightVars = Object.entries(theme.light).map(([key, value]) => `  --${key}: ${value};`).join("\n");
-  const darkVars = Object.entries(theme.dark).map(([key, value]) => `    --${key}: ${value};`).join("\n");
-  const lightVarsHsl = Object.entries(theme.light).map(([key, value]) => `  --${key}: hsl(${value});`).join("\n");
-  const darkVarsHsl = Object.entries(theme.dark).map(([key, value]) => `    --${key}: hsl(${value});`).join("\n");
-  return `@import "tailwindcss";
-
-:root {
-${lightVarsHsl}
-  --radius: 0.5rem;
-  --sidebar-width: 16rem;
-  --sidebar-width-mobile: 18rem;
-  --sidebar-width-collapsed: 3rem;
-  --sidebar-width-icon: 3rem;
-  --header-height: 3.5rem;
-  --sidebar-background: 0 0% 98%;
-  --sidebar-foreground: 240 5.3% 26.1%;
-  --sidebar-primary: 240 5.9% 10%;
-  --sidebar-primary-foreground: 0 0% 98%;
-  --sidebar-accent: 240 4.8% 95.9%;
-  --sidebar-accent-foreground: 240 5.9% 10%;
-  --sidebar-border: 220 13% 91%;
-  --sidebar-ring: 217.2 91.2% 59.8%;
-}
-
-@theme inline {
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-
-  --color-sidebar: var(--sidebar-background);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
-  --radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-sm: calc(var(--radius) - 4px);
-  
-  /* Accordion Animations */
-  --animate-accordion-down: accordion-down 0.2s ease-out;
-  --animate-accordion-up: accordion-up 0.2s ease-out;
-
-  @keyframes accordion-down {
-    from { height: 0; }
-    to { height: var(--radix-accordion-content-height); }
-  }
-  @keyframes accordion-up {
-    from { height: var(--radix-accordion-content-height); }
-    to { height: 0; }
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-${darkVarsHsl}
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-}
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}
-`;
-}
+// src/cli/utils/templates.ts
 var TAILWIND_CONFIG = `import type { Config } from "tailwindcss"
 
 const config: Config = {
@@ -493,473 +141,614 @@ const config: Config = {
 
 export default config
 `;
-async function init(options) {
-  const cwd = path.resolve(options.cwd);
-  const userAgent = process.env.npm_config_user_agent || "";
-  const isYarn = userAgent.includes("yarn");
-  const isPnpm = userAgent.includes("pnpm");
-  const isBun = userAgent.includes("bun");
-  const packageManager = isPnpm ? "pnpm" : isYarn ? "yarn" : isBun ? "bun" : "npm";
-  const installCmd = isPnpm ? "add" : isYarn ? "add" : isBun ? "add" : "install";
-  console.log(chalk.cyan("\n\u{1F680} Initializing @srcroot/ui...\n"));
-  const packageJsonPath = path.join(cwd, "package.json");
-  if (!fs.existsSync(packageJsonPath)) {
-    console.log(chalk.red("Error: No package.json found. Please run this in a project directory."));
-    process.exit(1);
+
+// src/cli/utils/get-package-manager.ts
+function getPackageManager() {
+  const userAgent = process.env.npm_config_user_agent;
+  if (!userAgent) {
+    return "npm";
   }
-  const pkg = await fs.readJson(packageJsonPath);
-  const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
-  const tailwindVersion = allDeps["tailwindcss"] || "";
-  const isTailwind4 = tailwindVersion.includes("^4") || tailwindVersion.startsWith("4") || allDeps["@tailwindcss/postcss"];
-  const hasSrc = fs.existsSync(path.join(cwd, "src"));
-  const srcPath = hasSrc ? path.join(cwd, "src") : cwd;
-  const appPath = path.join(srcPath, "app");
-  const pagesPath = path.join(srcPath, "pages");
-  const hasAppDir = fs.existsSync(appPath);
-  const hasPagesDir = fs.existsSync(pagesPath);
-  const libDir = path.join(srcPath, "lib");
-  const componentsDir = path.join(srcPath, "components", "ui");
-  let globalsPath = "";
-  if (hasAppDir) {
-    if (fs.existsSync(path.join(appPath, "globals.css"))) {
-      globalsPath = path.join(appPath, "globals.css");
-    } else if (fs.existsSync(path.join(appPath, "global.css"))) {
-      globalsPath = path.join(appPath, "global.css");
-    } else {
-      globalsPath = path.join(appPath, "globals.css");
+  if (userAgent.startsWith("yarn")) {
+    return "yarn";
+  }
+  if (userAgent.startsWith("pnpm")) {
+    return "pnpm";
+  }
+  if (userAgent.startsWith("bun")) {
+    return "bun";
+  }
+  return "npm";
+}
+
+// src/cli/utils/logger.ts
+import chalk from "chalk";
+var logger = {
+  error(...args) {
+    console.log(chalk.red(...args));
+  },
+  warn(...args) {
+    console.log(chalk.yellow(...args));
+  },
+  info(...args) {
+    console.log(chalk.cyan(...args));
+  },
+  success(...args) {
+    console.log(chalk.green(...args));
+  }
+};
+
+// src/cli/services/project-initializer.ts
+var __dirname3 = path2.dirname(fileURLToPath2(import.meta.url));
+var ProjectInitializer = class {
+  options;
+  config = {};
+  themeService;
+  constructor(options) {
+    this.options = options;
+    this.themeService = new ThemeService();
+  }
+  async run() {
+    logger.info("\n\u{1F680} Initializing @srcroot/ui...\n");
+    await this.validateEnvironment();
+    await this.detectConfiguration();
+    await this.promptUser();
+    await this.scaffold();
+    this.printSuccess();
+  }
+  async validateEnvironment() {
+    const cwd = path2.resolve(this.options.cwd);
+    const packageJsonPath = path2.join(cwd, "package.json");
+    if (!fs2.existsSync(packageJsonPath)) {
+      logger.error("Error: No package.json found. Please run this in a project directory.");
+      process.exit(1);
     }
-  } else if (hasPagesDir) {
-    const stylesPath = path.join(srcPath, "styles");
-    if (fs.existsSync(path.join(stylesPath, "globals.css"))) {
-      globalsPath = path.join(stylesPath, "globals.css");
-    } else if (fs.existsSync(path.join(stylesPath, "global.css"))) {
-      globalsPath = path.join(stylesPath, "global.css");
+    const pkg = await fs2.readJson(packageJsonPath);
+    const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
+    if (!allDeps["react"]) {
+      logger.error("Error: React not found in dependencies. Please initialize this in a React project.");
+      process.exit(1);
+    }
+  }
+  async detectConfiguration() {
+    const cwd = path2.resolve(this.options.cwd);
+    const packageManager = getPackageManager();
+    const installCmd = packageManager === "npm" ? "install" : "add";
+    const pkg = await fs2.readJson(path2.join(cwd, "package.json"));
+    const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
+    const tailwindVersion = allDeps["tailwindcss"] || "";
+    const isTailwind4 = tailwindVersion.includes("^4") || tailwindVersion.startsWith("4") || allDeps["@tailwindcss/postcss"];
+    const hasSrc = fs2.existsSync(path2.join(cwd, "src"));
+    const srcPath = hasSrc ? path2.join(cwd, "src") : cwd;
+    const appPath = path2.join(srcPath, "app");
+    const pagesPath = path2.join(srcPath, "pages");
+    const hasAppDir = fs2.existsSync(appPath);
+    const hasPagesDir = fs2.existsSync(pagesPath);
+    const libDir = path2.join(srcPath, "lib");
+    const componentsDir = path2.join(srcPath, "components", "ui");
+    let globalsPath = "";
+    if (hasAppDir) {
+      if (fs2.existsSync(path2.join(appPath, "globals.css"))) globalsPath = path2.join(appPath, "globals.css");
+      else if (fs2.existsSync(path2.join(appPath, "global.css"))) globalsPath = path2.join(appPath, "global.css");
+      else globalsPath = path2.join(appPath, "globals.css");
+    } else if (hasPagesDir) {
+      const stylesPath = path2.join(srcPath, "styles");
+      if (fs2.existsSync(path2.join(stylesPath, "globals.css"))) globalsPath = path2.join(stylesPath, "globals.css");
+      else if (fs2.existsSync(path2.join(stylesPath, "global.css"))) globalsPath = path2.join(stylesPath, "global.css");
+      else globalsPath = path2.join(stylesPath, "globals.css");
     } else {
-      globalsPath = path.join(stylesPath, "globals.css");
+      globalsPath = path2.join(srcPath, "globals.css");
     }
-  } else {
-    globalsPath = path.join(srcPath, "globals.css");
+    this.config = {
+      cwd,
+      packageManager,
+      installCmd,
+      isTailwind4,
+      hasSrc,
+      srcPath,
+      appPath,
+      pagesPath,
+      hasAppDir,
+      hasPagesDir,
+      libDir,
+      componentsDir,
+      globalsPath
+    };
   }
-  let selectedTheme = options.theme || "slate";
-  if (!options.yes && !options.theme) {
-    const themeChoices = Object.entries(THEMES).map(([key, theme]) => ({
-      title: `${theme.name} - ${chalk.dim(theme.description)}`,
-      value: key
-    }));
-    const themeResponse = await prompts({
-      type: "select",
-      name: "theme",
-      message: "Which color theme would you like to use?",
-      choices: themeChoices,
-      initial: 0
-      // slate is first
-    });
-    if (themeResponse.theme) {
-      selectedTheme = themeResponse.theme;
+  async promptUser() {
+    let selectedTheme = this.options.theme || "slate";
+    if (!this.options.yes && !this.options.theme) {
+      const availableThemes = this.themeService.getAvailableThemes();
+      if (availableThemes.length === 0) {
+        logger.warn("Warning: No themes found in registry. Using default.");
+        this.config.selectedTheme = selectedTheme;
+        return;
+      }
+      const themeChoices = availableThemes.map((theme) => ({
+        title: `${theme.name} - ${theme.description}`,
+        value: theme.file.replace(".css", "")
+      }));
+      const themeResponse = await prompts({
+        type: "select",
+        name: "theme",
+        message: "Which color theme would you like to use?",
+        choices: themeChoices,
+        initial: 0
+      });
+      if (themeResponse.theme) {
+        selectedTheme = themeResponse.theme;
+      }
     }
+    this.config.selectedTheme = selectedTheme;
   }
-  const spinner = ora("Creating project structure...").start();
-  try {
-    await fs.ensureDir(libDir);
-    await fs.ensureDir(componentsDir);
-    const utilsPath = path.join(libDir, "utils.ts");
-    await fs.writeFile(utilsPath, UTILS_CONTENT);
-    spinner.succeed(`Created ${chalk.cyan(path.relative(cwd, utilsPath))}`);
-    spinner.start(`Setting up ${chalk.cyan(THEMES[selectedTheme].name)} theme...`);
-    const stylesDir = path.dirname(globalsPath);
-    await fs.ensureDir(stylesDir);
-    const cssContent = isTailwind4 ? generateCssVariablesV4(selectedTheme) : generateCssVariablesV3(selectedTheme);
-    await fs.writeFile(globalsPath, cssContent);
-    spinner.succeed(`Updated ${chalk.cyan(path.relative(cwd, globalsPath))} with ${chalk.cyan(THEMES[selectedTheme].name)} theme (${isTailwind4 ? "Tailwind 4" : "Tailwind 3"})`);
-    if (!isTailwind4) {
-      spinner.start("Setting up Tailwind config...");
-      const tailwindConfigPath = path.join(cwd, "tailwind.config.ts");
-      await fs.writeFile(tailwindConfigPath, TAILWIND_CONFIG);
-      spinner.succeed(`Created ${chalk.cyan("tailwind.config.ts")}`);
-    } else {
-      spinner.info(`Tailwind 4 detected - skipping ${chalk.cyan("tailwind.config.ts")}`);
+  async scaffold() {
+    const spinner = ora("Creating project structure...").start();
+    const cfg = this.config;
+    try {
+      await fs2.ensureDir(cfg.libDir);
+      await fs2.ensureDir(cfg.componentsDir);
+      const utilsPath = path2.join(cfg.libDir, "utils.ts");
+      const registryUtilsPath = path2.resolve(__dirname3, "..", "src", "registry", "lib", "utils.ts");
+      let utilsContent = "";
+      if (fs2.existsSync(registryUtilsPath)) {
+        utilsContent = await fs2.readFile(registryUtilsPath, "utf-8");
+      } else {
+        utilsContent = `import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+`;
+        spinner.warn(`Could not find registry/utils.ts, using fallback content.`);
+      }
+      await fs2.writeFile(utilsPath, utilsContent);
+      spinner.succeed(`Created ${path2.relative(cfg.cwd, utilsPath)}`);
+      spinner.start(`Setting up ${cfg.selectedTheme} theme...`);
+      const stylesDir = path2.dirname(cfg.globalsPath);
+      await fs2.ensureDir(stylesDir);
+      try {
+        const cssContent = await this.themeService.getThemeCss(cfg.selectedTheme, cfg.isTailwind4);
+        await fs2.writeFile(cfg.globalsPath, cssContent);
+        spinner.succeed(`Updated ${path2.relative(cfg.cwd, cfg.globalsPath)} with ${cfg.selectedTheme} theme (${cfg.isTailwind4 ? "Tailwind 4" : "Tailwind 3"})`);
+      } catch (error) {
+        spinner.fail(`Failed to load theme: ${cfg.selectedTheme}`);
+        console.error(error);
+        process.exit(1);
+      }
+      if (!cfg.isTailwind4) {
+        spinner.start("Setting up Tailwind config...");
+        const tailwindConfigPath = path2.join(cfg.cwd, "tailwind.config.ts");
+        await fs2.writeFile(tailwindConfigPath, TAILWIND_CONFIG);
+        spinner.succeed(`Created tailwind.config.ts`);
+      } else {
+        spinner.info(`Tailwind 4 detected - skipping tailwind.config.ts`);
+      }
+    } catch (error) {
+      spinner.fail("Failed to initialize project");
+      console.error(error);
+      process.exit(1);
     }
-    console.log(chalk.green("\n\u2705 Project initialized successfully!\n"));
-    console.log(`Theme: ${chalk.cyan(THEMES[selectedTheme].name)}`);
-    console.log(`Tailwind: ${chalk.cyan(isTailwind4 ? "v4" : "v3")}`);
+  }
+  printSuccess() {
+    const cfg = this.config;
+    logger.success("\n\u2705 Project initialized successfully!\n");
+    console.log(`Theme: ${cfg.selectedTheme}`);
+    console.log(`Tailwind: ${cfg.isTailwind4 ? "v4" : "v3"}`);
     const requiredDeps = [
       "clsx",
       "tailwind-merge",
       "class-variance-authority",
       "react-icons"
     ];
-    if (!isTailwind4) {
+    if (!cfg.isTailwind4) {
       requiredDeps.push("tailwindcss-animate");
     }
-    console.log(chalk.cyan("\n\u{1F4E6} Required dependencies:"));
-    console.log(chalk.dim(`  ${packageManager} ${installCmd} ${requiredDeps.join(" ")}`));
+    logger.info("\n\u{1F4E6} Required dependencies:");
+    console.log(`  ${cfg.packageManager} ${cfg.installCmd} ${requiredDeps.join(" ")}`);
     console.log("\n\u2728 Next steps:");
-    console.log(chalk.dim("  1. Install dependencies (command above)"));
-    console.log(chalk.dim("  2. npx @srcroot/ui add button"));
-    console.log(chalk.dim("  3. npx @srcroot/ui add --all"));
+    console.log("  1. Install dependencies (command above)");
+    console.log("  2. npx @srcroot/ui add button");
+    console.log("  3. npx @srcroot/ui add --all");
     console.log();
-  } catch (error) {
-    spinner.fail("Failed to initialize project");
-    console.error(error);
-    process.exit(1);
   }
+};
+
+// src/cli/commands/init.ts
+async function init(options) {
+  const initializer = new ProjectInitializer(options);
+  await initializer.run();
 }
 
 // src/cli/commands/add.ts
-import fs2 from "fs-extra";
-import path2 from "path";
-import chalk2 from "chalk";
+import fs3 from "fs-extra";
+import path3 from "path";
 import ora2 from "ora";
 import prompts2 from "prompts";
-import { fileURLToPath as fileURLToPath2 } from "url";
+import { fileURLToPath as fileURLToPath3 } from "url";
 
 // src/cli/registry.ts
 var REGISTRY = {
   // Core
   button: {
-    file: "button.tsx",
+    file: "ui/button.tsx",
     description: "Polymorphic button with variants",
     category: "Core",
     dependencies: []
   },
   badge: {
-    file: "badge.tsx",
+    file: "ui/badge.tsx",
     description: "Status indicator",
     category: "Core",
     dependencies: []
   },
   avatar: {
-    file: "avatar.tsx",
+    file: "ui/avatar.tsx",
     description: "User avatar with fallback",
     category: "Core",
     dependencies: []
   },
   separator: {
-    file: "separator.tsx",
+    file: "ui/separator.tsx",
     description: "Visual divider",
     category: "Core",
     dependencies: []
   },
   // Typography
   text: {
-    file: "text.tsx",
+    file: "ui/text.tsx",
     description: "Polymorphic typography",
     category: "Typography",
     dependencies: []
   },
   label: {
-    file: "label.tsx",
+    file: "ui/label.tsx",
     description: "Form label",
     category: "Typography",
     dependencies: []
   },
   // Forms
   input: {
-    file: "input.tsx",
+    file: "ui/input.tsx",
     description: "Text input field",
     category: "Forms",
     dependencies: []
   },
   textarea: {
-    file: "textarea.tsx",
+    file: "ui/textarea.tsx",
     description: "Multi-line text input",
     category: "Forms",
     dependencies: []
   },
   checkbox: {
-    file: "checkbox.tsx",
+    file: "ui/checkbox.tsx",
     description: "Checkbox input",
     category: "Forms",
     dependencies: []
   },
   radio: {
-    file: "radio.tsx",
+    file: "ui/radio.tsx",
     description: "Radio button group",
     category: "Forms",
     dependencies: []
   },
   switch: {
-    file: "switch.tsx",
+    file: "ui/switch.tsx",
     description: "Toggle switch",
     category: "Forms",
     dependencies: []
   },
   slider: {
-    file: "slider.tsx",
+    file: "ui/slider.tsx",
     description: "Range slider",
     category: "Forms",
     dependencies: []
   },
   select: {
-    file: "select.tsx",
+    file: "ui/select.tsx",
     description: "Custom select dropdown",
     category: "Forms",
     dependencies: []
   },
   // Layout
   card: {
-    file: "card.tsx",
+    file: "ui/card.tsx",
     description: "Card container",
     category: "Layout",
     dependencies: []
   },
   container: {
-    file: "container.tsx",
+    file: "ui/container.tsx",
     description: "Max-width container",
     category: "Layout",
     dependencies: []
   },
   "aspect-ratio": {
-    file: "aspect-ratio.tsx",
+    file: "ui/aspect-ratio.tsx",
     description: "Maintain aspect ratio",
     category: "Layout",
     dependencies: []
   },
   // Data Display
   accordion: {
-    file: "accordion.tsx",
+    file: "ui/accordion.tsx",
     description: "Expandable sections",
     category: "Data Display",
     dependencies: []
   },
   tabs: {
-    file: "tabs.tsx",
+    file: "ui/tabs.tsx",
     description: "Tab navigation",
     category: "Data Display",
     dependencies: []
   },
   table: {
-    file: "table.tsx",
+    file: "ui/table.tsx",
     description: "Data table",
     category: "Data Display",
     dependencies: []
   },
   progress: {
-    file: "progress.tsx",
+    file: "ui/progress.tsx",
     description: "Progress indicator",
     category: "Data Display",
     dependencies: []
   },
   skeleton: {
-    file: "skeleton.tsx",
+    file: "ui/skeleton.tsx",
     description: "Loading placeholder",
     category: "Data Display",
     dependencies: []
   },
   // Overlay / Feedback
   dialog: {
-    file: "dialog.tsx",
+    file: "ui/dialog.tsx",
     description: "Modal dialog",
     category: "Overlay / Feedback",
     dependencies: []
   },
   "alert-dialog": {
-    file: "alert-dialog.tsx",
+    file: "ui/alert-dialog.tsx",
     description: "Confirmation dialog",
     category: "Overlay / Feedback",
     dependencies: ["dialog"]
   },
   sheet: {
-    file: "sheet.tsx",
+    file: "ui/sheet.tsx",
     description: "Slide-in panel",
     category: "Overlay / Feedback",
     dependencies: []
   },
   popover: {
-    file: "popover.tsx",
+    file: "ui/popover.tsx",
     description: "Floating content",
     category: "Overlay / Feedback",
     dependencies: []
   },
   tooltip: {
-    file: "tooltip.tsx",
+    file: "ui/tooltip.tsx",
     description: "Hover tooltip",
     category: "Overlay / Feedback",
     dependencies: []
   },
   "dropdown-menu": {
-    file: "dropdown-menu.tsx",
+    file: "ui/dropdown-menu.tsx",
     description: "Action dropdown",
     category: "Overlay / Feedback",
     dependencies: []
   },
   toast: {
-    file: "toast.tsx",
+    file: "ui/toast.tsx",
     description: "Notification toast",
     category: "Overlay / Feedback",
     dependencies: []
   },
   alert: {
-    file: "alert.tsx",
+    file: "ui/alert.tsx",
     description: "Inline alert",
     category: "Overlay / Feedback",
     dependencies: []
   },
   // Navigation
   breadcrumb: {
-    file: "breadcrumb.tsx",
+    file: "ui/breadcrumb.tsx",
     description: "Breadcrumb navigation",
     category: "Navigation",
     dependencies: []
   },
   pagination: {
-    file: "pagination.tsx",
+    file: "ui/pagination.tsx",
     description: "Page navigation",
     category: "Navigation",
     dependencies: ["button"]
   },
   // New Components
   "loading-spinner": {
-    file: "loading-spinner.tsx",
+    file: "ui/loading-spinner.tsx",
     description: "Loading spinner with variants",
     category: "Feedback",
     dependencies: []
   },
   image: {
-    file: "image.tsx",
+    file: "ui/image.tsx",
     description: "Enhanced image with loading",
     category: "Data Display",
     dependencies: []
   },
   "button-group": {
-    file: "button-group.tsx",
+    file: "ui/button-group.tsx",
     description: "Group buttons together",
     category: "Core",
     dependencies: ["button"]
   },
   "otp-input": {
-    file: "otp-input.tsx",
+    file: "ui/otp-input.tsx",
     description: "OTP verification input",
     category: "Forms",
     dependencies: []
   },
   search: {
-    file: "search.tsx",
+    file: "ui/search.tsx",
     description: "Search input with debounce",
     category: "Forms",
     dependencies: []
   },
   "star-rating": {
-    file: "star-rating.tsx",
+    file: "ui/star-rating.tsx",
     description: "Star rating input",
     category: "Feedback",
     dependencies: []
   },
   collapsible: {
-    file: "collapsible.tsx",
+    file: "ui/collapsible.tsx",
     description: "Expandable section",
     category: "Data Display",
     dependencies: []
   },
   carousel: {
-    file: "carousel.tsx",
+    file: "ui/carousel.tsx",
     description: "Image/content slider",
     category: "Data Display",
     dependencies: []
   },
   calendar: {
-    file: "calendar.tsx",
+    file: "ui/calendar.tsx",
     description: "Date picker",
     category: "Forms",
     dependencies: []
   },
   sidebar: {
-    file: "sidebar.tsx",
+    file: "ui/sidebar.tsx",
     description: "Responsive sidebar with mobile drawer",
     category: "Layout",
     dependencies: ["sheet", "button"]
   },
   // Added Components
   combobox: {
-    file: "combobox.tsx",
+    file: "ui/combobox.tsx",
     description: "Searchable select with autocomplete",
     category: "Forms",
     dependencies: ["popover"]
   },
   command: {
-    file: "command.tsx",
+    file: "ui/command.tsx",
     description: "Command palette / search menu",
     category: "Navigation",
     dependencies: []
   },
   "context-menu": {
-    file: "context-menu.tsx",
+    file: "ui/context-menu.tsx",
     description: "Right-click context menu",
     category: "Overlay / Feedback",
     dependencies: []
   },
   "date-picker": {
-    file: "date-picker.tsx",
+    file: "ui/date-picker.tsx",
     description: "Date picker with calendar",
     category: "Forms",
     dependencies: ["calendar", "popover", "button"]
   },
   drawer: {
-    file: "drawer.tsx",
+    file: "ui/drawer.tsx",
     description: "Bottom/top sheet drawer",
     category: "Overlay / Feedback",
     dependencies: []
   },
   "file-upload": {
-    file: "file-upload.tsx",
+    file: "ui/file-upload.tsx",
     description: "Drag-and-drop file upload",
     category: "Forms",
     dependencies: []
   },
   "hover-card": {
-    file: "hover-card.tsx",
+    file: "ui/hover-card.tsx",
     description: "Hover-triggered popover",
     category: "Overlay / Feedback",
     dependencies: []
   },
   kbd: {
-    file: "kbd.tsx",
+    file: "ui/kbd.tsx",
     description: "Keyboard shortcut display",
     category: "Typography",
     dependencies: []
   },
   menubar: {
-    file: "menubar.tsx",
+    file: "ui/menubar.tsx",
     description: "Horizontal menu with dropdowns",
     category: "Navigation",
     dependencies: []
   },
   "native-select": {
-    file: "native-select.tsx",
+    file: "ui/native-select.tsx",
     description: "Styled browser-native select",
     category: "Forms",
     dependencies: []
   },
   resizable: {
-    file: "resizable.tsx",
+    file: "ui/resizable.tsx",
     description: "Resizable panel layout",
     category: "Layout",
     dependencies: []
   },
   "scroll-area": {
-    file: "scroll-area.tsx",
+    file: "ui/scroll-area.tsx",
     description: "Custom scrollbar container",
     category: "Layout",
     dependencies: []
   },
   toggle: {
-    file: "toggle.tsx",
+    file: "ui/toggle.tsx",
     description: "Toggle button",
     category: "Forms",
     dependencies: []
   },
   "toggle-group": {
-    file: "toggle-group.tsx",
+    file: "ui/toggle-group.tsx",
     description: "Grouped toggle buttons",
     category: "Forms",
     dependencies: ["toggle"]
+  },
+  "google-analytics": {
+    file: "analytics/google-analytics.tsx",
+    description: "Google Analytics 4 tracking",
+    category: "Analytics",
+    dependencies: []
+  },
+  "google-tag-manager": {
+    file: "analytics/google-tag-manager.tsx",
+    description: "Google Tag Manager integration",
+    category: "Analytics",
+    dependencies: []
+  },
+  "meta-pixel": {
+    file: "analytics/meta-pixel.tsx",
+    description: "Meta (Facebook) Pixel tracking",
+    category: "Analytics",
+    dependencies: []
+  },
+  "microsoft-clarity": {
+    file: "analytics/microsoft-clarity.tsx",
+    description: "Microsoft Clarity heatmap tracking",
+    category: "Analytics",
+    dependencies: []
+  },
+  "tiktok-pixel": {
+    file: "analytics/tiktok-pixel.tsx",
+    description: "TikTok Pixel tracking",
+    category: "Analytics",
+    dependencies: []
+  },
+  chatbot: {
+    file: "ui/chatbot.tsx",
+    description: "AI chat interface",
+    category: "Data Display",
+    dependencies: ["button", "input", "scroll-area", "avatar"]
   }
 };
 
 // src/cli/commands/add.ts
-var __dirname3 = path2.dirname(fileURLToPath2(import.meta.url));
+var __dirname4 = path3.dirname(fileURLToPath3(import.meta.url));
 async function add(components, options) {
-  const cwd = path2.resolve(options.cwd);
+  const cwd = path3.resolve(options.cwd);
   if (options.all) {
     components = Object.keys(REGISTRY);
   }
@@ -976,7 +765,7 @@ async function add(components, options) {
       }))
     });
     if (!items || items.length === 0) {
-      console.log(chalk2.yellow("No components selected."));
+      logger.warn("No components selected.");
       process.exit(0);
     }
     components = items;
@@ -991,8 +780,8 @@ async function add(components, options) {
     }
   }
   if (invalidComponents.length > 0) {
-    console.log(chalk2.red(`Unknown components: ${invalidComponents.join(", ")}`));
-    console.log(chalk2.dim("\nRun '@srcroot/ui list' to see available components."));
+    logger.error(`Unknown components: ${invalidComponents.join(", ")}`);
+    console.log("\nRun '@srcroot/ui list' to see available components.");
     process.exit(1);
   }
   const toInstall = /* @__PURE__ */ new Set();
@@ -1011,57 +800,58 @@ async function add(components, options) {
   }
   const componentsToAdd = Array.from(toInstall);
   if (componentsToAdd.length > 10) {
-    console.log(chalk2.cyan(`
+    logger.info(`
 \u{1F4E6} Adding ${componentsToAdd.length} components...
-`));
+`);
   } else {
-    console.log(chalk2.cyan("\n\u{1F4E6} Adding components:\n"));
+    logger.info("\n\u{1F4E6} Adding components:\n");
     componentsToAdd.forEach((name) => {
-      console.log(chalk2.dim(`  - ${name}`));
+      console.log(`  - ${name}`);
     });
   }
   console.log();
   const spinner = ora2("Adding components...").start();
-  const hasSrc = fs2.existsSync(path2.join(cwd, "src"));
-  const srcPath = hasSrc ? path2.join(cwd, "src") : cwd;
-  const componentsDir = path2.join(srcPath, "components", "ui");
+  const hasSrc = fs3.existsSync(path3.join(cwd, "src"));
+  const srcPath = hasSrc ? path3.join(cwd, "src") : cwd;
+  const componentsDir = path3.join(srcPath, "components", "ui");
   try {
-    await fs2.ensureDir(componentsDir);
+    await fs3.ensureDir(componentsDir);
     for (const name of componentsToAdd) {
       const comp = REGISTRY[name];
-      const targetPath = path2.join(componentsDir, comp.file);
-      if (fs2.existsSync(targetPath) && !options.overwrite) {
+      const fileName = path3.basename(comp.file);
+      const targetPath = path3.join(componentsDir, fileName);
+      if (fs3.existsSync(targetPath) && !options.overwrite) {
         spinner.stop();
         const { overwrite } = await prompts2({
           type: "confirm",
           name: "overwrite",
-          message: `${chalk2.cyan(comp.file)} already exists. Overwrite?`,
+          message: `${fileName} already exists. Overwrite?`,
           initial: false
         });
         if (!overwrite) {
-          spinner.info(`Skipped ${chalk2.cyan(comp.file)}`);
+          spinner.info(`Skipped ${fileName}`);
           spinner.start("Adding components...");
           continue;
         }
         spinner.start("Adding components...");
       }
-      const registryPath = path2.resolve(__dirname3, "..", "registry", comp.file);
-      if (!fs2.existsSync(registryPath)) {
+      const registryPath = path3.resolve(__dirname4, "..", "src", "registry", comp.file);
+      if (!fs3.existsSync(registryPath)) {
         spinner.warn(`Registry file not found for ${name}: ${registryPath}`);
         continue;
       }
-      const content = await fs2.readFile(registryPath, "utf-8");
-      await fs2.writeFile(targetPath, content);
+      const content = await fs3.readFile(registryPath, "utf-8");
+      await fs3.writeFile(targetPath, content);
       if (componentsToAdd.length > 10) {
-        spinner.text = `Adding ${chalk2.cyan(comp.file)}...`;
+        spinner.text = `Adding ${fileName}...`;
       } else {
-        spinner.succeed(`Added ${chalk2.cyan(comp.file)}`);
+        spinner.succeed(`Added ${fileName}`);
       }
     }
     if (componentsToAdd.length > 10) {
       spinner.succeed(`Added ${componentsToAdd.length} components`);
     }
-    console.log(chalk2.green("\n\u2705 Components added successfully!\n"));
+    logger.success("\n\u2705 Components added successfully!\n");
   } catch (error) {
     spinner.fail("Failed to add components");
     console.error(error);
@@ -1070,9 +860,9 @@ async function add(components, options) {
 }
 
 // src/cli/commands/list.ts
-import chalk3 from "chalk";
+import chalk2 from "chalk";
 async function list() {
-  console.log(chalk3.cyan("\n\u{1F4E6} Available components:\n"));
+  console.log(chalk2.cyan("\n\u{1F4E6} Available components:\n"));
   const categories = {
     "Core": [],
     "Typography": [],
@@ -1080,7 +870,8 @@ async function list() {
     "Layout": [],
     "Data Display": [],
     "Overlay / Feedback": [],
-    "Navigation": []
+    "Navigation": [],
+    "Analytics": []
   };
   for (const [name, comp] of Object.entries(REGISTRY)) {
     if (categories[comp.category]) {
@@ -1089,20 +880,61 @@ async function list() {
   }
   for (const [category, components] of Object.entries(categories)) {
     if (components.length === 0) continue;
-    console.log(chalk3.bold.white(`  ${category}`));
+    console.log(chalk2.bold.white(`  ${category}`));
     components.forEach((name) => {
       const comp = REGISTRY[name];
-      console.log(chalk3.dim(`    - ${name}`) + chalk3.gray(` (${comp.description})`));
+      console.log(chalk2.dim(`    - ${name}`) + chalk2.gray(` (${comp.description})`));
     });
     console.log();
   }
-  console.log(chalk3.dim("Usage: npx @srcroot/ui add <component>\n"));
+  console.log(chalk2.dim("Usage: npx @srcroot/ui add <component>\n"));
+}
+
+// src/cli/utils/get-package-info.ts
+import path4 from "path";
+import fs4 from "fs-extra";
+import { fileURLToPath as fileURLToPath4 } from "url";
+function getPackageInfo() {
+  const __filename2 = fileURLToPath4(import.meta.url);
+  const __dirname5 = path4.dirname(__filename2);
+  const pathsToCheck = [
+    path4.resolve(__dirname5, "..", "package.json"),
+    path4.resolve(__dirname5, "..", "..", "..", "package.json")
+  ];
+  for (const pkgPath of pathsToCheck) {
+    if (fs4.existsSync(pkgPath)) {
+      return fs4.readJSONSync(pkgPath);
+    }
+  }
+  return { version: "0.0.0" };
 }
 
 // src/cli/index.ts
-var program = new Command();
-program.name("@srcroot/ui").description("Add polymorphic, accessible UI components to your project").version("0.0.12");
-program.command("init").description("Initialize your project with @srcroot/ui").option("-y, --yes", "Skip confirmation prompts", false).option("-t, --theme <theme>", "Color theme (slate, neutral, stone, zinc, gray)").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 confirmation prompts", false).option("-o, --overwrite", "Overwrite existing files", false).option("-a, --all", "Add all available components", false).option("--cwd <path>", "Working directory", process.cwd()).action(add);
-program.command("list").description("List all available components").action(list);
-program.parse();
+process.on("SIGINT", () => process.exit(0));
+process.on("SIGTERM", () => process.exit(0));
+async function main() {
+  const packageInfo = getPackageInfo();
+  const program = new Command().name("@srcroot/ui").description("Add polymorphic, accessible UI components to your project").version(
+    packageInfo.version || "0.0.1",
+    "-v, --version",
+    "display the version number"
+  );
+  program.command("init").description("Initialize your project with @srcroot/ui").option("-y, --yes", "Skip confirmation prompts", false).option("-t, --theme <theme>", "Color theme (slate, neutral, stone, zinc, gray)").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 confirmation prompts", false).option("-o, --overwrite", "Overwrite existing files", false).option("-a, --all", "Add all available components", false).option("--cwd <path>", "Working directory", process.cwd()).action(add);
+  program.command("list").description("List all available components").action(list);
+  if (process.argv.length < 3) {
+    console.log(chalk3.cyan(`
+  @srcroot/ui v${packageInfo.version}
+  
+  A UI library with polymorphic, accessible components.
+    `));
+    program.outputHelp();
+    console.log();
+    return;
+  }
+  program.parse();
+}
+main().catch((err) => {
+  console.error("Results: ", err);
+  process.exit(1);
+});