pittaya 0.0.8 → 0.1.0

package/dist/index.js

@@ -7,34 +7,80 @@ import { Command } from "commander";
 import chalk from "chalk";
 import ora from "ora";
 import prompts from "prompts";
-import path4 from "path";
-import fs4 from "fs/promises";
+import path6 from "path";
+import fs6 from "fs/promises";
 import { execa } from "execa";
 
 // src/utils/registry.ts
 import fetch from "node-fetch";
-var REGISTRY_BASE_URL = "https://raw.githubusercontent.com/pittaya-ui/cli/main/registry";
-async function fetchRegistry() {
+import fs from "fs/promises";
+import { existsSync } from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+var DEFAULT_REGISTRY_BASE_URL = "https://raw.githubusercontent.com/pittaya-ui/cli/main/registry";
+function shouldPreferLocalRegistry() {
+  const raw = process.env.PITTAYA_REGISTRY_PREFER_LOCAL;
+  if (raw == null) return false;
+  const normalized = raw.toLowerCase();
+  return normalized === "true" || normalized === "1" || normalized === "yes";
+}
+function getLocalRegistryBaseUrl() {
   try {
-    const response = await fetch(`${REGISTRY_BASE_URL}/index.json`);
+    const filePath = fileURLToPath(import.meta.url);
+    const dirPath = path.dirname(filePath);
+    const candidate = path.resolve(dirPath, "../../../registry");
+    if (!existsSync(candidate)) return null;
+    if (!existsSync(path.join(candidate, "styles"))) return null;
+    return candidate;
+  } catch {
+    return null;
+  }
+}
+function getRegistryBaseUrl() {
+  const localRegistry = shouldPreferLocalRegistry() ? getLocalRegistryBaseUrl() : null;
+  if (localRegistry) return localRegistry;
+  if (process.env.PITTAYA_REGISTRY_URL) {
+    return process.env.PITTAYA_REGISTRY_URL;
+  }
+  return DEFAULT_REGISTRY_BASE_URL;
+}
+function isHttpUrl(value) {
+  return value.startsWith("http://") || value.startsWith("https://");
+}
+async function readJsonFromRegistry(relativePath, config) {
+  const baseUrl = getRegistryBaseUrl();
+  if (isHttpUrl(baseUrl)) {
+    const response = await fetch(`${baseUrl}/${relativePath}`);
     if (!response.ok) {
       throw new Error(`HTTP ${response.status}: ${response.statusText}`);
     }
     return await response.json();
+  }
+  const absolutePath = path.resolve(baseUrl, relativePath);
+  const raw = await fs.readFile(absolutePath, "utf-8");
+  return JSON.parse(raw);
+}
+function getStyleFromConfig(config) {
+  return config?.style || "new-york";
+}
+async function fetchRegistry(config) {
+  try {
+    const style = getStyleFromConfig(config);
+    const styleIndex = await readJsonFromRegistry(`styles/${style}/index.json`, config);
+    return styleIndex;
   } catch (error) {
     console.error("Error fetching registry:", error);
     throw new Error("Unable to load the registry of components");
   }
 }
-async function getRegistryComponent(name) {
+async function getRegistryComponent(name, config) {
   try {
-    const response = await fetch(
-      `${REGISTRY_BASE_URL}/components/${name}.json`
+    const style = getStyleFromConfig(config);
+    const styleComponent = await readJsonFromRegistry(
+      `styles/${style}/components/${name}.json`,
+      config
     );
-    if (!response.ok) {
-      throw new Error(`Component "${name}" not found in registry`);
-    }
-    return await response.json();
+    return styleComponent;
   } catch (error) {
     throw new Error(`Error loading component "${name}": ${error.message}`);
   }
@@ -72,21 +118,21 @@ function escapeRegex(str) {
 }
 
 // src/utils/package-manager.ts
-import fs from "fs/promises";
-import path from "path";
+import fs2 from "fs/promises";
+import path2 from "path";
 async function detectPackageManager() {
   try {
-    await fs.access("pnpm-lock.yaml");
+    await fs2.access("pnpm-lock.yaml");
     return "pnpm";
   } catch {
   }
   try {
-    await fs.access("yarn.lock");
+    await fs2.access("yarn.lock");
     return "yarn";
   } catch {
   }
   try {
-    await fs.access("bun.lockb");
+    await fs2.access("bun.lockb");
     return "bun";
   } catch {
   }
@@ -95,8 +141,8 @@ async function detectPackageManager() {
 async function isPackageInstalled(packageName) {
   const cwd = process.cwd();
   try {
-    const packageJsonPath = path.join(cwd, "package.json");
-    const packageJson2 = JSON.parse(await fs.readFile(packageJsonPath, "utf-8"));
+    const packageJsonPath = path2.join(cwd, "package.json");
+    const packageJson2 = JSON.parse(await fs2.readFile(packageJsonPath, "utf-8"));
     const allDeps = {
       ...packageJson2.dependencies,
       ...packageJson2.devDependencies
@@ -107,8 +153,8 @@ async function isPackageInstalled(packageName) {
   } catch {
   }
   try {
-    const packagePath = path.join(cwd, "node_modules", packageName);
-    await fs.access(packagePath);
+    const packagePath = path2.join(cwd, "node_modules", packageName);
+    await fs2.access(packagePath);
     return true;
   } catch {
   }
@@ -126,28 +172,28 @@ async function checkMissingDependencies(dependencies) {
 }
 
 // src/utils/component-checker.ts
-import path3 from "path";
-import fs3 from "fs/promises";
+import path4 from "path";
+import fs4 from "fs/promises";
 
 // src/utils/project-structure.ts
-import fs2 from "fs/promises";
-import path2 from "path";
+import fs3 from "fs/promises";
+import path3 from "path";
 async function hasSrcDirectory(cwd = process.cwd()) {
   try {
-    const srcPath = path2.join(cwd, "src");
-    await fs2.access(srcPath);
+    const srcPath = path3.join(cwd, "src");
+    await fs3.access(srcPath);
     const commonDirs = ["app", "components", "lib", "pages"];
     for (const dir of commonDirs) {
       try {
-        await fs2.access(path2.join(srcPath, dir));
+        await fs3.access(path3.join(srcPath, dir));
         return true;
       } catch {
         continue;
       }
     }
     try {
-      const tsconfigPath = path2.join(cwd, "tsconfig.json");
-      const tsconfig = JSON.parse(await fs2.readFile(tsconfigPath, "utf-8"));
+      const tsconfigPath = path3.join(cwd, "tsconfig.json");
+      const tsconfig = JSON.parse(await fs3.readFile(tsconfigPath, "utf-8"));
       if (tsconfig.compilerOptions?.paths) {
         const paths = tsconfig.compilerOptions.paths;
         if (paths["@/*"]?.includes("./src/*")) {
@@ -184,12 +230,12 @@ async function getDefaultPaths(cwd = process.cwd()) {
 // src/utils/component-checker.ts
 async function isComponentInstalled(name, config) {
   try {
-    const component = await getRegistryComponent(name);
+    const component = await getRegistryComponent(name, config);
     if (!component) return false;
     for (const file of component.files) {
       const targetPath = await resolveTargetPath(file.name, component.type, config);
-      const filePath = path3.join(process.cwd(), targetPath);
-      const exists = await fs3.access(filePath).then(() => true).catch(() => false);
+      const filePath = path4.join(process.cwd(), targetPath);
+      const exists = await fs4.access(filePath).then(() => true).catch(() => false);
       if (!exists) return false;
     }
     return true;
@@ -198,29 +244,135 @@ async function isComponentInstalled(name, config) {
   }
 }
 async function resolveTargetPath(fileName, type, config) {
+  const normalized = fileName.replace(/\\/g, "/");
   if (type === "registry:ui") {
     const resolvedPath = await resolveAliasPath(config.aliases.ui);
-    return path3.join(resolvedPath, fileName);
+    const relative = normalized.replace(/^ui\//, "");
+    return path4.join(resolvedPath, relative);
   }
   if (type === "registry:lib") {
     const resolvedPath = await resolveAliasPath(config.aliases.lib);
-    return path3.join(resolvedPath, fileName);
+    const relative = normalized.replace(/^lib\//, "");
+    return path4.join(resolvedPath, relative);
   }
   if (type === "registry:hook") {
     const resolvedPath = await resolveAliasPath(config.aliases.hooks);
-    return path3.join(resolvedPath, fileName);
+    return path4.join(resolvedPath, fileName);
   }
   return fileName;
 }
 
+// src/utils/project-config.ts
+import fs5 from "fs/promises";
+import path5 from "path";
+function applyPittayaProjectConfig(pittaya) {
+  if (pittaya.registry?.url) {
+    process.env.PITTAYA_REGISTRY_URL = pittaya.registry.url;
+  }
+  if (typeof pittaya.registry?.preferLocal === "boolean") {
+    process.env.PITTAYA_REGISTRY_PREFER_LOCAL = String(pittaya.registry.preferLocal);
+  }
+}
+async function readJsonIfExists(absolutePath) {
+  try {
+    const raw = await fs5.readFile(absolutePath, "utf-8");
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+async function loadProjectConfig(cwd = process.cwd()) {
+  const componentsJsonPath = path5.join(cwd, "components.json");
+  const pittayaJsonPath = path5.join(cwd, "pittaya.json");
+  const config = await readJsonIfExists(componentsJsonPath);
+  if (!config) {
+    throw new Error("components.json not found");
+  }
+  const pittaya = await readJsonIfExists(pittayaJsonPath) ?? {};
+  return { config, pittaya };
+}
+
+// src/utils/confirm.ts
+import { createInterface } from "readline";
+function resolveFromString(answer, initial) {
+  const value = (answer ?? "").trim().toLowerCase();
+  if (!value) return initial;
+  if (value === "y" || value === "yes") return true;
+  if (value === "n" || value === "no") return false;
+  return initial;
+}
+async function confirm(message, initial = false) {
+  const suffix = initial ? "(Y/n)" : "(y/N)";
+  const prompt = `${message} ${suffix} `;
+  if (!process.stdin.isTTY) {
+    const rl = createInterface({
+      input: process.stdin,
+      output: process.stdout
+    });
+    return await new Promise((resolve) => {
+      rl.question(prompt, (answer) => {
+        rl.close();
+        resolve(resolveFromString(answer, initial));
+      });
+    });
+  }
+  return await new Promise((resolve) => {
+    const stdin = process.stdin;
+    const stdout = process.stdout;
+    const prevRawMode = stdin.isRaw;
+    if (typeof stdin.setRawMode === "function") {
+      stdin.setRawMode(true);
+    }
+    stdin.resume();
+    stdout.write(prompt);
+    const cleanup = () => {
+      stdin.off("data", onData);
+      if (typeof stdin.setRawMode === "function") {
+        stdin.setRawMode(Boolean(prevRawMode));
+      }
+      stdin.pause();
+    };
+    const finish = (result) => {
+      stdout.write(`${result ? "y" : "n"}
+`);
+      cleanup();
+      resolve(result);
+    };
+    const onData = (chunk) => {
+      const str = chunk.toString("utf8");
+      if (str === "") {
+        cleanup();
+        process.kill(process.pid, "SIGINT");
+        return;
+      }
+      const key = str.toLowerCase();
+      if (key === "\r" || key === "\n") {
+        finish(initial);
+        return;
+      }
+      if (key === "y") {
+        finish(true);
+        return;
+      }
+      if (key === "n") {
+        finish(false);
+        return;
+      }
+    };
+    stdin.on("data", onData);
+  });
+}
+
 // src/commands/add.ts
 async function add(components, options) {
   const cwd = process.cwd();
-  const componentsJsonPath = path4.join(cwd, "components.json");
   let config;
+  let pittayaConfig;
   try {
-    const configContent = await fs4.readFile(componentsJsonPath, "utf-8");
-    config = JSON.parse(configContent);
+    const loaded = await loadProjectConfig(cwd);
+    config = loaded.config;
+    pittayaConfig = loaded.pittaya;
+    applyPittayaProjectConfig(pittayaConfig);
   } catch (error) {
     console.log(chalk.red("\n\u274C components.json not found.\n"));
     console.log(
@@ -229,10 +381,14 @@ async function add(components, options) {
     );
     return;
   }
+  const resolvedOptions = {
+    ...options,
+    addMissingDeps: options.addMissingDeps ?? pittayaConfig?.install?.autoInstallDeps ?? false
+  };
   const spinner = ora("Fetching available components...").start();
   let registry;
   try {
-    registry = await fetchRegistry();
+    registry = await fetchRegistry(config);
     spinner.succeed("Registry loaded!");
   } catch (error) {
     spinner.fail("Error loading registry");
@@ -266,7 +422,7 @@ Adding ${components.length} component(s)...
 `)
   );
   for (const componentName of components) {
-    await addComponent(componentName, config, options);
+    await addComponent(componentName, config, resolvedOptions);
   }
   console.log(chalk.green("\n\u2705 Components added successfully!\n"));
 }
@@ -278,7 +434,7 @@ async function addComponent(name, config, options) {
   }
   const spinner = ora(`Installing ${chalk.bold(name)}...`).start();
   try {
-    const component = await getRegistryComponent(name);
+    const component = await getRegistryComponent(name, config);
     if (!component) {
       spinner.fail(`Component "${name}" not found in registry.`);
       return;
@@ -298,12 +454,10 @@ async function addComponent(name, config, options) {
         if (options.addMissingDeps) {
           console.log(chalk.dim("Installing dependencies automatically...\n"));
         } else {
-          const { install } = await prompts({
-            type: "confirm",
-            name: "install",
-            message: "Do you want to install the dependencies now?",
-            initial: true
-          });
+          const install = await confirm(
+            "Do you want to install the dependencies now?",
+            true
+          );
           if (!install) {
             console.log(chalk.yellow("\n\u26A0\uFE0F  Component not installed. Install the dependencies manually and try again.\n"));
             return;
@@ -336,25 +490,23 @@ async function addComponent(name, config, options) {
     }
     for (const file of component.files) {
       const targetPath = await resolveTargetPath(file.name, component.type, config);
-      const filePath = path4.join(process.cwd(), targetPath);
-      const exists = await fs4.access(filePath).then(() => true).catch(() => false);
+      const filePath = path6.join(process.cwd(), targetPath);
+      const exists = await fs6.access(filePath).then(() => true).catch(() => false);
       if (exists && !options.overwrite && !options.yes) {
         spinner.stop();
-        const { overwrite } = await prompts({
-          type: "confirm",
-          name: "overwrite",
-          message: `${targetPath} already exists. Overwrite?`,
-          initial: false
-        });
+        const overwrite = await confirm(
+          `${targetPath} already exists. Overwrite?`,
+          false
+        );
         if (!overwrite) {
           spinner.warn(`Skipping ${targetPath}`);
           continue;
         }
         spinner.start();
       }
-      await fs4.mkdir(path4.dirname(filePath), { recursive: true });
+      await fs6.mkdir(path6.dirname(filePath), { recursive: true });
       const content = transformImports(file.content, config);
-      await fs4.writeFile(filePath, content, "utf-8");
+      await fs6.writeFile(filePath, content, "utf-8");
     }
     spinner.succeed(`${chalk.bold(name)} installed successfully!`);
   } catch (error) {
@@ -363,46 +515,367 @@ async function addComponent(name, config, options) {
   }
 }
 
-// src/commands/init.ts
+// src/commands/remove.ts
 import chalk2 from "chalk";
 import ora2 from "ora";
 import prompts2 from "prompts";
-import path5 from "path";
-import fs5 from "fs/promises";
+import path7 from "path";
+import fs7 from "fs/promises";
+async function remove(components, options) {
+  const cwd = process.cwd();
+  let config;
+  let pittayaConfig;
+  try {
+    const loaded = await loadProjectConfig(cwd);
+    config = loaded.config;
+    pittayaConfig = loaded.pittaya;
+    applyPittayaProjectConfig(pittayaConfig);
+  } catch (error) {
+    console.log(chalk2.red("\n\u274C components.json not found.\n"));
+    console.log(
+      chalk2.dim(`Run ${chalk2.bold("npx pittaya init")} first.
+`)
+    );
+    return;
+  }
+  const spinner = ora2("Fetching installed components...").start();
+  let registry;
+  try {
+    registry = await fetchRegistry(config);
+    spinner.succeed("Registry loaded!");
+  } catch (error) {
+    spinner.fail("Error loading registry");
+    console.error(error);
+    return;
+  }
+  if (components.length === 0) {
+    const allComponents = registry.components || [];
+    const installedComponents = [];
+    for (const comp of allComponents) {
+      const slug = comp.slug || comp.name;
+      if (await isComponentInstalled(slug, config)) {
+        installedComponents.push({
+          title: `${slug}${comp.description ? ` - ${comp.description}` : ""}`,
+          value: slug
+        });
+      }
+    }
+    if (installedComponents.length === 0) {
+      console.log(chalk2.yellow("\n\u{1F4E6} No components installed to remove.\n"));
+      return;
+    }
+    const { selected } = await prompts2({
+      type: "multiselect",
+      name: "selected",
+      message: "Select components to remove:",
+      choices: installedComponents,
+      min: 1
+    });
+    if (!selected || selected.length === 0) {
+      console.log(chalk2.yellow("\n\u274C No components selected.\n"));
+      return;
+    }
+    components = selected;
+  }
+  if (!options.yes) {
+    const confirmed = await confirm(
+      `Are you sure you want to remove ${chalk2.bold(components.join(", "))}?`,
+      false
+    );
+    if (!confirmed) {
+      console.log(chalk2.yellow("\n\u274C Operation cancelled.\n"));
+      return;
+    }
+  }
+  console.log(
+    chalk2.dim(`
+Removing ${components.length} component(s)...
+`)
+  );
+  for (const componentName of components) {
+    await removeComponent(componentName, config);
+  }
+  console.log(chalk2.green("\n\u2705 Components removed successfully!\n"));
+}
+async function removeComponent(name, config) {
+  const spinner = ora2(`Removing ${chalk2.bold(name)}...`).start();
+  try {
+    const component = await getRegistryComponent(name, config);
+    if (!component) {
+      spinner.fail(`Component "${name}" not found in registry.`);
+      return;
+    }
+    const removedFiles = [];
+    for (const file of component.files) {
+      const targetPath = await resolveTargetPath(file.name, component.type, config);
+      const filePath = path7.join(process.cwd(), targetPath);
+      const exists = await fs7.access(filePath).then(() => true).catch(() => false);
+      if (exists) {
+        await fs7.unlink(filePath);
+        removedFiles.push(filePath);
+      }
+    }
+    for (const filePath of removedFiles) {
+      await removeEmptyDirs(path7.dirname(filePath));
+    }
+    spinner.succeed(`${chalk2.bold(name)} removed successfully!`);
+  } catch (error) {
+    spinner.fail(`Error removing ${name}`);
+    console.error(error);
+  }
+}
+async function removeEmptyDirs(dirPath) {
+  try {
+    const files = await fs7.readdir(dirPath);
+    if (files.length === 0) {
+      await fs7.rmdir(dirPath);
+      await removeEmptyDirs(path7.dirname(dirPath));
+    }
+  } catch {
+  }
+}
+
+// src/commands/init.ts
+import chalk3 from "chalk";
+import ora3 from "ora";
+import prompts3 from "prompts";
+import path9 from "path";
+import fs9 from "fs/promises";
 import { execa as execa2 } from "execa";
+
+// src/utils/style-installer.ts
+import fs8 from "fs/promises";
+import path8 from "path";
+import postcss from "postcss";
+async function applyRegistryStyleToProject(styleComponent, config, options) {
+  const cssPath = config.tailwind?.css;
+  if (!cssPath) {
+    return;
+  }
+  const absoluteCssPath = path8.resolve(process.cwd(), cssPath);
+  const raw = await fs8.readFile(absoluteCssPath, "utf-8").catch(() => "");
+  const next = await transformTailwindV4Css(raw, styleComponent.cssVars ?? {}, {
+    overwriteCssVars: options?.overwriteCssVars ?? true
+  });
+  await fs8.mkdir(path8.dirname(absoluteCssPath), { recursive: true });
+  await fs8.writeFile(absoluteCssPath, next, "utf-8");
+}
+async function transformTailwindV4Css(input, cssVars, options) {
+  const result = await postcss([
+    ensureImportPlugin({ importPath: "tailwindcss" }),
+    ensureImportPlugin({ importPath: "tw-animate-css" }),
+    ensureCustomVariantDarkPlugin(),
+    upsertThemeAtRulePlugin(cssVars.theme ?? {}, {
+      overwrite: options.overwriteCssVars
+    }),
+    upsertRuleVarsPlugin(":root", cssVars.light ?? {}, {
+      overwrite: options.overwriteCssVars
+    }),
+    upsertRuleVarsPlugin(".dark", cssVars.dark ?? {}, {
+      overwrite: options.overwriteCssVars
+    }),
+    ensureBaseLayerPlugin()
+  ]).process(input, { from: void 0 });
+  return result.css.replace(/(\n\s*\n)+/g, "\n\n").trimStart();
+}
+function ensureImportPlugin({
+  importPath
+}) {
+  return {
+    postcssPlugin: "pittaya-ensure-import",
+    Once(root) {
+      const exists = root.nodes.some(
+        (n) => n.type === "atrule" && n.name === "import" && n.params.includes(`"${importPath}"`)
+      );
+      if (exists) return;
+      const node = postcss.atRule({
+        name: "import",
+        params: `"${importPath}"`
+      });
+      root.prepend(node);
+    }
+  };
+}
+ensureImportPlugin.postcss = true;
+function ensureCustomVariantDarkPlugin() {
+  return {
+    postcssPlugin: "pittaya-ensure-custom-variant-dark",
+    Once(root) {
+      const exists = root.nodes.some(
+        (n) => n.type === "atrule" && n.name === "custom-variant" && n.params.startsWith("dark ")
+      );
+      if (exists) return;
+      const node = postcss.atRule({
+        name: "custom-variant",
+        params: "dark (&:is(.dark *))"
+      });
+      root.append(node);
+    }
+  };
+}
+ensureCustomVariantDarkPlugin.postcss = true;
+function upsertThemeAtRulePlugin(vars, options) {
+  return {
+    postcssPlugin: "pittaya-upsert-theme-atrule",
+    Once(root) {
+      if (Object.keys(vars).length === 0) return;
+      let themeNode = root.nodes.find(
+        (n) => n.type === "atrule" && n.name === "theme" && n.params === "inline"
+      );
+      if (!themeNode) {
+        themeNode = postcss.atRule({
+          name: "theme",
+          params: "inline"
+        });
+        root.append(themeNode);
+      }
+      for (const [k, v] of Object.entries(vars)) {
+        const prop = `--${k.replace(/^--/, "")}`;
+        const existing = themeNode.nodes?.find(
+          (n) => n.type === "decl" && n.prop === prop
+        );
+        if (existing) {
+          if (options.overwrite) {
+            existing.value = v;
+          }
+        } else {
+          themeNode.append(
+            postcss.decl({
+              prop,
+              value: v
+            })
+          );
+        }
+      }
+    }
+  };
+}
+upsertThemeAtRulePlugin.postcss = true;
+function upsertRuleVarsPlugin(selector, vars, options) {
+  return {
+    postcssPlugin: `pittaya-upsert-vars-${selector}`,
+    Once(root) {
+      if (Object.keys(vars).length === 0) return;
+      let rule = root.nodes.find(
+        (n) => n.type === "rule" && n.selector === selector
+      );
+      if (!rule) {
+        rule = postcss.rule({ selector });
+        root.append(rule);
+      }
+      for (const [k, v] of Object.entries(vars)) {
+        const prop = `--${k.replace(/^--/, "")}`;
+        const existing = rule.nodes?.find(
+          (n) => n.type === "decl" && n.prop === prop
+        );
+        if (existing) {
+          if (options.overwrite) {
+            existing.value = v;
+          }
+        } else {
+          rule.append(
+            postcss.decl({
+              prop,
+              value: v
+            })
+          );
+        }
+      }
+    }
+  };
+}
+upsertRuleVarsPlugin.postcss = true;
+function ensureBaseLayerPlugin() {
+  return {
+    postcssPlugin: "pittaya-ensure-base-layer",
+    Once(root) {
+      const hasLayerBase = root.nodes.some(
+        (n) => n.type === "atrule" && n.name === "layer" && n.params === "base"
+      );
+      if (hasLayerBase) return;
+      const baseLayer = postcss.atRule({
+        name: "layer",
+        params: "base"
+      });
+      baseLayer.append(
+        postcss.rule({
+          selector: "*",
+          nodes: [
+            postcss.atRule({
+              name: "apply",
+              params: "border-border outline-ring/50"
+            })
+          ]
+        })
+      );
+      baseLayer.append(
+        postcss.rule({
+          selector: "body",
+          nodes: [
+            postcss.atRule({
+              name: "apply",
+              params: "bg-background text-foreground"
+            })
+          ]
+        })
+      );
+      root.append(baseLayer);
+    }
+  };
+}
+ensureBaseLayerPlugin.postcss = true;
+
+// src/commands/init.ts
 async function init(options) {
-  console.log(chalk2.bold("\nWelcome to Pittaya UI!\n"));
+  const pittayaColorHex = "#f2556d";
+  console.log(
+    chalk3.bold(
+      `
+Welcome to ${chalk3.hex(pittayaColorHex)("Pittaya")} UI!
+`
+    )
+  );
   const cwd = process.cwd();
-  const componentsJsonPath = path5.join(cwd, "components.json");
-  const exists = await fs5.access(componentsJsonPath).then(() => true).catch(() => false);
+  const componentsJsonPath = path9.join(cwd, "components.json");
+  const pittayaJsonPath = path9.join(cwd, "pittaya.json");
+  const exists = await fs9.access(componentsJsonPath).then(() => true).catch(() => false);
+  const pittayaExists = await fs9.access(pittayaJsonPath).then(() => true).catch(() => false);
   if (exists && !options.yes) {
-    const { overwrite } = await prompts2({
-      type: "confirm",
-      name: "overwrite",
-      message: "components.json already exists. Do you want to overwrite it?",
-      initial: false
-    });
+    const overwrite = await confirm(
+      `${chalk3.underline("components.json")} already exists. Do you want to overwrite it?`,
+      false
+    );
     if (!overwrite) {
-      console.log(chalk2.yellow("\n\u274C Operation cancelled.\n"));
+      console.log(chalk3.yellow("\n\u274C Operation cancelled.\n"));
       return;
     }
   }
+  let shouldWritePittayaJson = true;
+  if (pittayaExists && !options.yes) {
+    const overwrite = await confirm(
+      `${chalk3.underline("pittaya.json")} already exists. Do you want to overwrite it?`,
+      false
+    );
+    if (!overwrite) {
+      shouldWritePittayaJson = false;
+    }
+  }
   const defaultPaths = await getDefaultPaths(cwd);
   const config = options.yes ? {
-    style: "new-york",
+    style: "pittaya",
     tailwindCss: defaultPaths.globalsCss,
     rsc: true,
     componentsPath: defaultPaths.components,
     utilsPath: defaultPaths.utils
-  } : await prompts2([
+  } : await prompts3([
     {
       type: "select",
       name: "style",
       message: "Which style would you like to use?",
       choices: [
+        { title: "Pittaya", value: "pittaya" },
         { title: "New York", value: "new-york" },
-        { title: "Default", value: "default" },
-        { title: "Recife", value: "recife" }
+        { title: "Default", value: "default" }
       ]
     },
     {
@@ -412,10 +885,14 @@ async function init(options) {
       initial: defaultPaths.globalsCss
     },
     {
-      type: "confirm",
+      type: "select",
       name: "rsc",
       message: "Use React Server Components?",
-      initial: true
+      choices: [
+        { title: "Yes", value: true },
+        { title: "No", value: false }
+      ],
+      initial: 0
     },
     {
       type: "text",
@@ -431,16 +908,16 @@ async function init(options) {
     }
   ]);
   if (!config.style && !options.yes) {
-    console.log(chalk2.yellow("\n\u274C Operation cancelled.\n"));
+    console.log(chalk3.yellow("\n\u274C Operation cancelled.\n"));
     return;
   }
   const componentsJson = {
     $schema: "https://raw.githubusercontent.com/pittaya-ui/cli/main/registry/schema.json",
-    style: config.style || "new-york",
+    style: config.style || "pittaya",
     rsc: config.rsc ?? true,
     tsx: true,
     tailwind: {
-      config: "tailwind.config.ts",
+      config: "",
       css: config.tailwindCss || "src/app/globals.css",
       baseColor: "neutral",
       cssVariables: true,
@@ -449,95 +926,120 @@ async function init(options) {
     aliases: {
       components: config.componentsPath || "@/components",
       utils: config.utilsPath || "@/lib/utils",
-      ui: `${config.componentsPath || "@/components"}/pittaya/ui`,
+      ui: "@/components/ui",
       lib: "@/lib",
       hooks: "@/hooks"
     },
     iconLibrary: "lucide"
   };
-  const spinner = ora2("Creating components.json...").start();
-  await fs5.writeFile(
+  let pittayaJson = {
+    registry: {
+      url: "https://raw.githubusercontent.com/pittaya-ui/cli/main/registry",
+      preferLocal: false
+    },
+    theme: {
+      overwriteCssVars: true
+    },
+    install: {
+      autoInstallDeps: true
+    }
+  };
+  if (!shouldWritePittayaJson) {
+    try {
+      const raw = await fs9.readFile(pittayaJsonPath, "utf-8");
+      pittayaJson = JSON.parse(raw);
+    } catch {
+      shouldWritePittayaJson = true;
+    }
+  }
+  const spinner = ora3("Creating components.json...").start();
+  await fs9.writeFile(
     componentsJsonPath,
     JSON.stringify(componentsJson, null, 2)
   );
   spinner.succeed("components.json created successfully!");
-  const packageManager = await detectPackageManager2();
-  const depsSpinner = ora2("Installing base dependencies...").start();
+  if (shouldWritePittayaJson) {
+    const pittayaSpinner = ora3("Creating pittaya.json...").start();
+    await fs9.writeFile(pittayaJsonPath, JSON.stringify(pittayaJson, null, 2));
+    pittayaSpinner.succeed("pittaya.json created successfully!");
+  }
+  applyPittayaProjectConfig(pittayaJson);
+  const depsSpinner = ora3("Installing base dependencies...").start();
   try {
+    const packageManager = await detectPackageManager();
     await execa2(packageManager, [
       packageManager === "yarn" ? "add" : "install",
       "class-variance-authority",
       "clsx",
-      "tailwind-merge"
+      "tailwind-merge",
+      "lucide-react",
+      "tw-animate-css"
     ]);
     depsSpinner.succeed("Dependencies installed!");
   } catch (error) {
     depsSpinner.fail("Error installing dependencies");
     console.error(error);
   }
-  console.log(chalk2.green("\n\u2705 Pittaya UI configured successfully!\n"));
-  console.log(chalk2.dim("Next steps:"));
+  try {
+    const styleItem = await getRegistryComponent("style", componentsJson);
+    await applyRegistryStyleToProject(styleItem, componentsJson, {
+      overwriteCssVars: pittayaJson.theme?.overwriteCssVars ?? true
+    });
+  } catch (error) {
+    console.error(error);
+  }
+  console.log(chalk3.green(`
+\u2705 ${chalk3.hex(pittayaColorHex)("Pittaya")} UI configured successfully!
+`));
+  console.log(chalk3.dim("Next steps:"));
   console.log(
-    chalk2.dim(
-      `  ${chalk2.bold("npx pittaya add button")} - Add a component`
+    chalk3.dim(
+      `  ${chalk3.bold("npx pittaya add button")} - Add a component`
     )
   );
   console.log(
-    chalk2.dim(
-      `  ${chalk2.bold("npx pittaya add --all")} - Add all components
+    chalk3.dim(
+      `  ${chalk3.bold("npx pittaya add --all")} - Add all components
 `
     )
   );
 }
-async function detectPackageManager2() {
-  try {
-    await fs5.access("pnpm-lock.yaml");
-    return "pnpm";
-  } catch {
-  }
-  try {
-    await fs5.access("yarn.lock");
-    return "yarn";
-  } catch {
-  }
-  return "npm";
-}
 
 // src/commands/credits.ts
-import chalk3 from "chalk";
+import chalk4 from "chalk";
 async function credits() {
-  console.log(chalk3.bold("\nPittaya UI - Creators\n"));
-  console.log(chalk3.cyan("  \u2022 Marcos Bueno"));
-  console.log(chalk3.cyan("  \u2022 Lucas Ribeiro"));
-  console.log(chalk3.cyan("  \u2022 Jarbas Gouveia"));
-  console.log(chalk3.dim("\n  Thank you for using Pittaya UI! \u2764\uFE0F\n"));
+  console.log(chalk4.bold("\nPittaya UI - Creators\n"));
+  console.log(chalk4.cyan("  \u2022 Marcos Bueno"));
+  console.log(chalk4.cyan("  \u2022 Lucas Ribeiro"));
+  console.log(chalk4.cyan("  \u2022 Jarbas Gouveia"));
+  console.log(chalk4.dim("\n  Thank you for using Pittaya UI! \u2764\uFE0F\n"));
 }
 
 // src/commands/diff.ts
-import chalk4 from "chalk";
-import ora3 from "ora";
-import prompts3 from "prompts";
-import path6 from "path";
-import fs6 from "fs/promises";
+import chalk5 from "chalk";
+import ora4 from "ora";
+import prompts4 from "prompts";
+import path10 from "path";
+import fs10 from "fs/promises";
 async function diff(components, options) {
   const cwd = process.cwd();
-  const componentsJsonPath = path6.join(cwd, "components.json");
   let config;
   try {
-    const configContent = await fs6.readFile(componentsJsonPath, "utf-8");
-    config = JSON.parse(configContent);
+    const loaded = await loadProjectConfig(cwd);
+    config = loaded.config;
+    applyPittayaProjectConfig(loaded.pittaya);
   } catch (error) {
-    console.log(chalk4.red("\n\u274C components.json not found.\n"));
+    console.log(chalk5.red("\n\u274C components.json not found.\n"));
     console.log(
-      chalk4.dim(`Run ${chalk4.bold("npx pittaya init")} first.
+      chalk5.dim(`Run ${chalk5.bold("npx pittaya init")} first.
 `)
     );
     return;
   }
-  const spinner = ora3("Fetching registry...").start();
+  const spinner = ora4("Fetching registry...").start();
   let registry;
   try {
-    registry = await fetchRegistry();
+    registry = await fetchRegistry(config);
     spinner.succeed("Registry loaded!");
   } catch (error) {
     spinner.fail("Error loading registry");
@@ -554,7 +1056,7 @@ async function diff(components, options) {
       }
     }
     if (componentsToCheck.length === 0) {
-      console.log(chalk4.yellow("\n\u26A0\uFE0F  No components installed yet.\n"));
+      console.log(chalk5.yellow("\n\u26A0\uFE0F  No components installed yet.\n"));
       return;
     }
   } else if (components.length === 0) {
@@ -567,10 +1069,10 @@ async function diff(components, options) {
       }
     }
     if (installedComponents.length === 0) {
-      console.log(chalk4.yellow("\n\u26A0\uFE0F  No components installed yet.\n"));
+      console.log(chalk5.yellow("\n\u26A0\uFE0F  No components installed yet.\n"));
       return;
     }
-    const { selected } = await prompts3({
+    const { selected } = await prompts4({
       type: "multiselect",
       name: "selected",
       message: "Select components to check for updates:",
@@ -581,14 +1083,14 @@ async function diff(components, options) {
       min: 1
     });
     if (!selected || selected.length === 0) {
-      console.log(chalk4.yellow("\n\u274C No components selected.\n"));
+      console.log(chalk5.yellow("\n\u274C No components selected.\n"));
       return;
     }
     componentsToCheck = selected;
   } else {
     componentsToCheck = components;
   }
-  console.log(chalk4.dim(`
+  console.log(chalk5.dim(`
 Checking ${componentsToCheck.length} component(s)...
 `));
   const results = [];
@@ -602,23 +1104,23 @@ Checking ${componentsToCheck.length} component(s)...
 }
 async function checkComponentDiff(name, config) {
   try {
-    const component = await getRegistryComponent(name);
+    const component = await getRegistryComponent(name, config);
     if (!component) {
-      console.log(chalk4.red(`   \u274C Component "${name}" not found in registry.`));
+      console.log(chalk5.red(`   \u274C Component "${name}" not found in registry.`));
       return null;
     }
     const isInstalled = await isComponentInstalled(name, config);
     if (!isInstalled) {
-      console.log(chalk4.dim(`   \u23ED\uFE0F  ${name} is not installed, skipping...`));
+      console.log(chalk5.dim(`   \u23ED\uFE0F  ${name} is not installed, skipping...`));
       return null;
     }
     const fileDiffs = [];
     let hasChanges = false;
     for (const file of component.files) {
       const targetPath = await resolveTargetPath(file.name, component.type, config);
-      const filePath = path6.join(process.cwd(), targetPath);
+      const filePath = path10.join(process.cwd(), targetPath);
       try {
-        const localContent = await fs6.readFile(filePath, "utf-8");
+        const localContent = await fs10.readFile(filePath, "utf-8");
         const registryContent = transformImports(file.content, config);
         const contentMatches = localContent.trim() === registryContent.trim();
         fileDiffs.push({
@@ -647,7 +1149,7 @@ async function checkComponentDiff(name, config) {
       isInstalled: true
     };
   } catch (error) {
-    console.log(chalk4.red(`   \u274C Error checking ${name}`));
+    console.log(chalk5.red(`   \u274C Error checking ${name}`));
     console.error(error);
     return null;
   }
@@ -657,59 +1159,59 @@ function displayDiffResults(results) {
   const componentsUpToDate = results.filter((r) => !r.hasChanges);
   console.log();
   if (componentsWithChanges.length > 0) {
-    console.log(chalk4.yellow(`\u{1F4DD} Components with updates available (${componentsWithChanges.length}):
+    console.log(chalk5.yellow(`\u{1F4DD} Components with updates available (${componentsWithChanges.length}):
 `));
     for (const result of componentsWithChanges) {
-      console.log(chalk4.yellow(`   \u2022 ${chalk4.bold(result.name)}`));
+      console.log(chalk5.yellow(`   \u2022 ${chalk5.bold(result.name)}`));
       for (const file of result.files) {
         if (file.hasChanges) {
           if (file.isMissing) {
-            console.log(chalk4.red(`     \u2514\u2500 ${file.name} (missing locally)`));
+            console.log(chalk5.red(`     \u2514\u2500 ${file.name} (missing locally)`));
           } else {
-            console.log(chalk4.dim(`     \u2514\u2500 ${file.name} (modified)`));
+            console.log(chalk5.dim(`     \u2514\u2500 ${file.name} (modified)`));
           }
         }
       }
     }
     console.log();
-    console.log(chalk4.dim(`Run ${chalk4.bold("npx pittaya update <component>")} to update.`));
+    console.log(chalk5.dim(`Run ${chalk5.bold("npx pittaya update <component>")} to update.`));
   }
   if (componentsUpToDate.length > 0) {
-    console.log(chalk4.green(`
+    console.log(chalk5.green(`
 \u2705 Components up to date (${componentsUpToDate.length}):
 `));
     for (const result of componentsUpToDate) {
-      console.log(chalk4.dim(`   \u2022 ${result.name}`));
+      console.log(chalk5.dim(`   \u2022 ${result.name}`));
     }
   }
   console.log();
 }
 
 // src/commands/update.ts
-import chalk5 from "chalk";
-import ora4 from "ora";
-import prompts4 from "prompts";
-import path7 from "path";
-import fs7 from "fs/promises";
+import chalk6 from "chalk";
+import ora5 from "ora";
+import prompts5 from "prompts";
+import path11 from "path";
+import fs11 from "fs/promises";
 async function update(components, options) {
   const cwd = process.cwd();
-  const componentsJsonPath = path7.join(cwd, "components.json");
   let config;
   try {
-    const configContent = await fs7.readFile(componentsJsonPath, "utf-8");
-    config = JSON.parse(configContent);
+    const loaded = await loadProjectConfig(cwd);
+    config = loaded.config;
+    applyPittayaProjectConfig(loaded.pittaya);
   } catch (error) {
-    console.log(chalk5.red("\n\u274C components.json not found.\n"));
+    console.log(chalk6.red("\n\u274C components.json not found.\n"));
     console.log(
-      chalk5.dim(`Run ${chalk5.bold("npx pittaya init")} first.
+      chalk6.dim(`Run ${chalk6.bold("npx pittaya init")} first.
 `)
     );
     return;
   }
-  const spinner = ora4("Fetching registry...").start();
+  const spinner = ora5("Fetching registry...").start();
   let registry;
   try {
-    registry = await fetchRegistry();
+    registry = await fetchRegistry(config);
     spinner.succeed("Registry loaded!");
   } catch (error) {
     spinner.fail("Error loading registry");
@@ -726,18 +1228,16 @@ async function update(components, options) {
       }
     }
     if (componentsToUpdate.length === 0) {
-      console.log(chalk5.yellow("\n\u26A0\uFE0F  No components installed yet.\n"));
+      console.log(chalk6.yellow("\n\u26A0\uFE0F  No components installed yet.\n"));
       return;
     }
     if (!options.yes && !options.force) {
-      const { confirm } = await prompts4({
-        type: "confirm",
-        name: "confirm",
-        message: `Update ${componentsToUpdate.length} component(s)?`,
-        initial: true
-      });
-      if (!confirm) {
-        console.log(chalk5.yellow("\n\u274C Update cancelled.\n"));
+      const shouldUpdate = await confirm(
+        `Update ${componentsToUpdate.length} component(s)?`,
+        true
+      );
+      if (!shouldUpdate) {
+        console.log(chalk6.yellow("\n\u274C Update cancelled.\n"));
         return;
       }
     }
@@ -751,10 +1251,10 @@ async function update(components, options) {
       }
     }
     if (installedComponents.length === 0) {
-      console.log(chalk5.yellow("\n\u26A0\uFE0F  No components installed yet.\n"));
+      console.log(chalk6.yellow("\n\u26A0\uFE0F  No components installed yet.\n"));
       return;
     }
-    const { selected } = await prompts4({
+    const { selected } = await prompts5({
       type: "multiselect",
       name: "selected",
       message: "Select components to update:",
@@ -765,14 +1265,14 @@ async function update(components, options) {
       min: 1
     });
     if (!selected || selected.length === 0) {
-      console.log(chalk5.yellow("\n\u274C No components selected.\n"));
+      console.log(chalk6.yellow("\n\u274C No components selected.\n"));
       return;
     }
     componentsToUpdate = selected;
   } else {
     componentsToUpdate = components;
   }
-  console.log(chalk5.dim(`
+  console.log(chalk6.dim(`
 Checking ${componentsToUpdate.length} component(s) for updates...
 `));
   const results = [];
@@ -785,9 +1285,9 @@ Checking ${componentsToUpdate.length} component(s) for updates...
 async function hasComponentChanges(component, config) {
   for (const file of component.files) {
     const targetPath = await resolveTargetPath(file.name, component.type, config);
-    const filePath = path7.join(process.cwd(), targetPath);
+    const filePath = path11.join(process.cwd(), targetPath);
     try {
-      const localContent = await fs7.readFile(filePath, "utf-8");
+      const localContent = await fs11.readFile(filePath, "utf-8");
       const registryContent = transformImports(file.content, config);
       if (localContent.trim() !== registryContent.trim()) {
         return true;
@@ -800,45 +1300,40 @@ async function hasComponentChanges(component, config) {
 }
 async function updateComponent(name, config, options) {
   try {
-    const component = await getRegistryComponent(name);
+    const component = await getRegistryComponent(name, config);
     if (!component) {
-      console.log(chalk5.red(`   \u274C Component "${name}" not found in registry.`));
+      console.log(chalk6.red(`   \u274C Component "${name}" not found in registry.`));
       return { name, updated: false, skipped: true, reason: "not found in registry" };
     }
     const isInstalled = await isComponentInstalled(name, config);
     if (!isInstalled) {
-      console.log(chalk5.dim(`   \u23ED\uFE0F  ${name} is not installed, skipping...`));
+      console.log(chalk6.dim(`   \u23ED\uFE0F  ${name} is not installed, skipping...`));
       return { name, updated: false, skipped: true, reason: "not installed" };
     }
     const hasChanges = await hasComponentChanges(component, config);
     if (!hasChanges && !options.force) {
-      console.log(chalk5.dim(`   \u2713 ${name} is already up to date`));
+      console.log(chalk6.dim(`   \u2713 ${name} is already up to date`));
       return { name, updated: false, skipped: true, reason: "already up to date" };
     }
     if (!options.yes && !options.force) {
-      const { confirm } = await prompts4({
-        type: "confirm",
-        name: "confirm",
-        message: `Update ${chalk5.bold(name)}?`,
-        initial: true
-      });
-      if (!confirm) {
-        console.log(chalk5.yellow(`   \u23ED\uFE0F  Skipped ${name}`));
+      const shouldUpdate = await confirm(`Update ${chalk6.bold(name)}?`, true);
+      if (!shouldUpdate) {
+        console.log(chalk6.yellow(`   \u23ED\uFE0F  Skipped ${name}`));
         return { name, updated: false, skipped: true, reason: "user cancelled" };
       }
     }
-    const spinner = ora4(`Updating ${chalk5.bold(name)}...`).start();
+    const spinner = ora5(`Updating ${chalk6.bold(name)}...`).start();
     for (const file of component.files) {
       const targetPath = await resolveTargetPath(file.name, component.type, config);
-      const filePath = path7.join(process.cwd(), targetPath);
-      await fs7.mkdir(path7.dirname(filePath), { recursive: true });
+      const filePath = path11.join(process.cwd(), targetPath);
+      await fs11.mkdir(path11.dirname(filePath), { recursive: true });
       const content = transformImports(file.content, config);
-      await fs7.writeFile(filePath, content, "utf-8");
+      await fs11.writeFile(filePath, content, "utf-8");
     }
-    spinner.succeed(`${chalk5.bold(name)} updated successfully!`);
+    spinner.succeed(`${chalk6.bold(name)} updated successfully!`);
     return { name, updated: true, skipped: false };
   } catch (error) {
-    console.log(chalk5.red(`   \u274C Error updating ${name}`));
+    console.log(chalk6.red(`   \u274C Error updating ${name}`));
     console.error(error);
     return { name, updated: false, skipped: true, reason: "error" };
   }
@@ -848,48 +1343,46 @@ function displayUpdateResults(results) {
   const skipped = results.filter((r) => r.skipped);
   console.log();
   if (updated.length > 0) {
-    console.log(chalk5.green(`\u2705 Updated ${updated.length} component(s):
+    console.log(chalk6.green(`\u2705 Updated ${updated.length} component(s):
 `));
     for (const result of updated) {
-      console.log(chalk5.dim(`   \u2022 ${result.name}`));
+      console.log(chalk6.dim(`   \u2022 ${result.name}`));
     }
   }
   if (skipped.length > 0) {
-    console.log(chalk5.yellow(`
+    console.log(chalk6.yellow(`
 \u23ED\uFE0F  Skipped ${skipped.length} component(s):
 `));
     for (const result of skipped) {
       const reason = result.reason ? ` (${result.reason})` : "";
-      console.log(chalk5.dim(`   \u2022 ${result.name}${reason}`));
+      console.log(chalk6.dim(`   \u2022 ${result.name}${reason}`));
     }
   }
   console.log();
 }
 
 // src/commands/list.ts
-import chalk6 from "chalk";
-import ora5 from "ora";
-import path8 from "path";
-import fs8 from "fs/promises";
+import chalk7 from "chalk";
+import ora6 from "ora";
 async function list(options) {
   const cwd = process.cwd();
-  const componentsJsonPath = path8.join(cwd, "components.json");
   let config;
   try {
-    const configContent = await fs8.readFile(componentsJsonPath, "utf-8");
-    config = JSON.parse(configContent);
+    const loaded = await loadProjectConfig(cwd);
+    config = loaded.config;
+    applyPittayaProjectConfig(loaded.pittaya);
   } catch (error) {
-    console.log(chalk6.red("\n\u274C components.json not found.\n"));
+    console.log(chalk7.red("\n\u274C components.json not found.\n"));
     console.log(
-      chalk6.dim(`Run ${chalk6.bold("npx pittaya init")} first.
+      chalk7.dim(`Run ${chalk7.bold("npx pittaya init")} first.
 `)
     );
     return;
   }
-  const spinner = ora5("Fetching components...").start();
+  const spinner = ora6("Fetching components...").start();
   let registry;
   try {
-    registry = await fetchRegistry();
+    registry = await fetchRegistry(config);
     spinner.succeed("Components loaded!");
   } catch (error) {
     spinner.fail("Error loading registry");
@@ -899,9 +1392,10 @@ async function list(options) {
   const allComponents = registry.components || [];
   const componentsWithStatus = await Promise.all(
     allComponents.map(async (comp) => {
-      const installed = await isComponentInstalled(comp.slug, config);
+      const slug = comp.slug || comp.name;
+      const installed = await isComponentInstalled(slug, config);
       return {
-        ...comp,
+        ...comp.slug ? comp : { ...comp, slug },
         installed
       };
     })
@@ -921,13 +1415,13 @@ async function list(options) {
 function displayComponents(components, options) {
   if (components.length === 0) {
     if (options.installed) {
-      console.log(chalk6.yellow("\n\u{1F4E6} No components installed yet.\n"));
-      console.log(chalk6.dim(`Run ${chalk6.bold("npx pittaya add")} to install components.
+      console.log(chalk7.yellow("\n\u{1F4E6} No components installed yet.\n"));
+      console.log(chalk7.dim(`Run ${chalk7.bold("npx pittaya add")} to install components.
 `));
     } else if (options.available) {
-      console.log(chalk6.yellow("\n\u2728 All components are already installed!\n"));
+      console.log(chalk7.yellow("\n\u2728 All components are already installed!\n"));
     } else {
-      console.log(chalk6.yellow("\n\u26A0\uFE0F  No components found in registry.\n"));
+      console.log(chalk7.yellow("\n\u26A0\uFE0F  No components found in registry.\n"));
     }
     return;
   }
@@ -941,20 +1435,20 @@ function displayComponents(components, options) {
   }, {});
   console.log("\n");
   if (options.installed) {
-    console.log(chalk6.bold.green("\u{1F4E6} Installed Components\n"));
+    console.log(chalk7.bold.green("\u{1F4E6} Installed Components\n"));
   } else if (options.available) {
-    console.log(chalk6.bold.blue("\u2728 Available Components\n"));
+    console.log(chalk7.bold.blue("\u2728 Available Components\n"));
   } else {
-    console.log(chalk6.bold("\u{1F4CB} All Components\n"));
+    console.log(chalk7.bold("\u{1F4CB} All Components\n"));
   }
   Object.entries(categorized).sort().forEach(([category, comps]) => {
-    console.log(chalk6.bold.cyan(`${category}:`));
+    console.log(chalk7.bold.cyan(`${category}:`));
     comps.forEach((comp) => {
-      const status = comp.installed ? chalk6.green("\u2713") : chalk6.dim("\u25CB");
-      const name = comp.installed ? chalk6.bold(comp.slug) : chalk6.dim(comp.slug);
-      const description = comp.description ? chalk6.dim(` - ${comp.description}`) : "";
-      const deps = comp.dependencies && comp.dependencies.length > 0 ? chalk6.dim.yellow(` [${comp.dependencies.length} deps]`) : "";
-      const internalDeps = comp.internalDependencies && comp.internalDependencies.length > 0 ? chalk6.dim.blue(` [requires: ${comp.internalDependencies.join(", ")}]`) : "";
+      const status = comp.installed ? chalk7.green("\u2713") : chalk7.dim("\u25CB");
+      const name = comp.installed ? chalk7.bold(comp.slug) : chalk7.dim(comp.slug);
+      const description = comp.description ? chalk7.dim(` - ${comp.description}`) : "";
+      const deps = comp.dependencies && comp.dependencies.length > 0 ? chalk7.dim.yellow(` [${comp.dependencies.length} deps]`) : "";
+      const internalDeps = comp.internalDependencies && comp.internalDependencies.length > 0 ? chalk7.dim.blue(` [requires: ${comp.internalDependencies.join(", ")}]`) : "";
       console.log(`  ${status} ${name}${description}${deps}${internalDeps}`);
     });
     console.log();
@@ -962,117 +1456,142 @@ function displayComponents(components, options) {
   const installedCount = components.filter((c) => c.installed).length;
   const totalCount = components.length;
   if (!options.installed && !options.available) {
-    console.log(chalk6.dim(`Total: ${totalCount} components (${installedCount} installed, ${totalCount - installedCount} available)
+    console.log(chalk7.dim(`Total: ${totalCount} components (${installedCount} installed, ${totalCount - installedCount} available)
 `));
   } else {
-    console.log(chalk6.dim(`Total: ${totalCount} components
+    console.log(chalk7.dim(`Total: ${totalCount} components
 `));
   }
 }
 
 // src/commands/debug.ts
-import chalk7 from "chalk";
-import path9 from "path";
-import fs9 from "fs/promises";
+import chalk8 from "chalk";
+import path12 from "path";
+import fs12 from "fs/promises";
 async function debug(options) {
   const cwd = process.cwd();
-  const componentsJsonPath = path9.join(cwd, "components.json");
-  console.log(chalk7.bold("\n\u{1F50D} Pittaya UI Debug Information\n"));
-  console.log(chalk7.dim(`Working directory: ${cwd}
+  console.log(chalk8.bold("\n\u{1F50D} Pittaya UI Debug Information\n"));
+  console.log(chalk8.dim(`Working directory: ${cwd}
 `));
   let config;
   try {
-    const configContent = await fs9.readFile(componentsJsonPath, "utf-8");
-    config = JSON.parse(configContent);
-    console.log(chalk7.green("\u2705 components.json found"));
-    console.log(chalk7.dim(`   Path: ${componentsJsonPath}`));
+    const loaded = await loadProjectConfig(cwd);
+    config = loaded.config;
+    applyPittayaProjectConfig(loaded.pittaya);
+    console.log(chalk8.green("\u2705 components.json found"));
+    console.log(chalk8.dim(`   Path: ${path12.join(cwd, "components.json")}`));
   } catch (error) {
-    console.log(chalk7.red("\u274C components.json not found\n"));
+    console.log(chalk8.red("\u274C components.json not found\n"));
     return;
   }
   const usesSrc = await hasSrcDirectory(cwd);
-  console.log(chalk7.green(`\u2705 Project structure: ${usesSrc ? "src/" : "root"}`));
-  console.log(chalk7.bold("\n\u{1F4CB} Configured Aliases:"));
-  console.log(chalk7.dim(`   components: ${config.aliases.components}`));
-  console.log(chalk7.dim(`   utils: ${config.aliases.utils}`));
-  console.log(chalk7.dim(`   ui: ${config.aliases.ui}`));
+  console.log(chalk8.green(`\u2705 Project structure: ${usesSrc ? "src/" : "root"}`));
+  console.log(chalk8.bold("\n\u{1F4CB} Configured Aliases:"));
+  console.log(chalk8.dim(`   components: ${config.aliases.components}`));
+  console.log(chalk8.dim(`   utils: ${config.aliases.utils}`));
+  console.log(chalk8.dim(`   ui: ${config.aliases.ui}`));
   const resolvedUi = await resolveAliasPath(config.aliases.ui, cwd);
   const resolvedLib = await resolveAliasPath(config.aliases.lib || "@/lib", cwd);
-  console.log(chalk7.bold("\n\u{1F4C2} Resolved Paths:"));
-  console.log(chalk7.dim(`   UI components: ${resolvedUi}`));
-  console.log(chalk7.dim(`   Libraries: ${resolvedLib}`));
+  console.log(chalk8.bold("\n\u{1F4C2} Resolved Paths:"));
+  console.log(chalk8.dim(`   UI components: ${resolvedUi}`));
+  console.log(chalk8.dim(`   Libraries: ${resolvedLib}`));
   if (options.component) {
-    console.log(chalk7.bold(`
+    console.log(chalk8.bold(`
 \u{1F50D} Debugging component: ${options.component}
 `));
     try {
-      const component = await getRegistryComponent(options.component);
+      const component = await getRegistryComponent(options.component, config);
       if (!component) {
-        console.log(chalk7.red(`\u274C Component not found in registry
+        console.log(chalk8.red(`\u274C Component not found in registry
 `));
         return;
       }
-      console.log(chalk7.green(`\u2705 Component found in registry`));
-      console.log(chalk7.dim(`   Type: ${component.type}`));
-      console.log(chalk7.dim(`   Files: ${component.files.length}`));
-      console.log(chalk7.bold("\n\u{1F4C1} Expected Files:"));
+      console.log(chalk8.green(`\u2705 Component found in registry`));
+      console.log(chalk8.dim(`   Type: ${component.type}`));
+      console.log(chalk8.dim(`   Files: ${component.files.length}`));
+      console.log(chalk8.bold("\n\u{1F4C1} Expected Files:"));
       for (const file of component.files) {
         const targetPath = await resolveTargetPath(file.name, component.type, config);
-        const fullPath = path9.join(cwd, targetPath);
-        const exists = await fs9.access(fullPath).then(() => true).catch(() => false);
-        const statusIcon = exists ? chalk7.green("\u2705") : chalk7.red("\u274C");
-        const statusText = exists ? chalk7.green("EXISTS") : chalk7.red("NOT FOUND");
+        const fullPath = path12.join(cwd, targetPath);
+        const exists = await fs12.access(fullPath).then(() => true).catch(() => false);
+        const statusIcon = exists ? chalk8.green("\u2705") : chalk8.red("\u274C");
+        const statusText = exists ? chalk8.green("EXISTS") : chalk8.red("NOT FOUND");
         console.log(`   ${statusIcon} ${file.name}`);
-        console.log(chalk7.dim(`      Expected: ${fullPath}`));
-        console.log(chalk7.dim(`      Status: ${statusText}`));
+        console.log(chalk8.dim(`      Expected: ${fullPath}`));
+        console.log(chalk8.dim(`      Status: ${statusText}`));
         if (!exists) {
-          const dir = path9.dirname(fullPath);
+          const dir = path12.dirname(fullPath);
           try {
-            const dirExists = await fs9.access(dir).then(() => true).catch(() => false);
+            const dirExists = await fs12.access(dir).then(() => true).catch(() => false);
             if (dirExists) {
-              const filesInDir = await fs9.readdir(dir);
-              const baseName = path9.basename(file.name, path9.extname(file.name));
+              const filesInDir = await fs12.readdir(dir);
+              const baseName = path12.basename(file.name, path12.extname(file.name));
               const similarFiles = filesInDir.filter(
                 (f) => f.includes(baseName) || f.toLowerCase().includes(baseName.toLowerCase())
               );
               if (similarFiles.length > 0) {
-                console.log(chalk7.yellow(`      \u{1F4A1} Similar files found in directory:`));
+                console.log(chalk8.yellow(`      \u{1F4A1} Similar files found in directory:`));
                 similarFiles.forEach((f) => {
-                  console.log(chalk7.dim(`         - ${f}`));
+                  console.log(chalk8.dim(`         - ${f}`));
                 });
               }
             } else {
-              console.log(chalk7.red(`      \u26A0\uFE0F  Directory doesn't exist: ${dir}`));
+              console.log(chalk8.red(`      \u26A0\uFE0F  Directory doesn't exist: ${dir}`));
             }
           } catch (err) {
           }
         }
       }
       const isInstalled = await isComponentInstalled(options.component, config);
-      console.log(chalk7.bold(`
+      console.log(chalk8.bold(`
 \u{1F4CA} Installation Status:`));
       if (isInstalled) {
-        console.log(chalk7.green(`   \u2705 Component is detected as INSTALLED`));
+        console.log(chalk8.green(`   \u2705 Component is detected as INSTALLED`));
       } else {
-        console.log(chalk7.red(`   \u274C Component is detected as NOT INSTALLED`));
-        console.log(chalk7.yellow(`   \u{1F4A1} All files must exist for component to be considered installed`));
+        console.log(chalk8.red(`   \u274C Component is detected as NOT INSTALLED`));
+        console.log(chalk8.yellow(`   \u{1F4A1} All files must exist for component to be considered installed`));
       }
     } catch (error) {
-      console.log(chalk7.red(`
+      console.log(chalk8.red(`
 \u274C Error debugging component:`));
       console.error(error);
     }
   } else {
-    console.log(chalk7.yellow("\n\u{1F4A1} To debug a specific component, use:"));
-    console.log(chalk7.dim("   npx pittaya debug --component <name>\n"));
+    console.log(chalk8.yellow("\n\u{1F4A1} To debug a specific component, use:"));
+    console.log(chalk8.dim("   npx pittaya debug --component <name>\n"));
+  }
+}
+
+// src/utils/banner.ts
+import chalk9 from "chalk";
+import CFonts from "cfonts";
+import gradient from "gradient-string";
+async function showBanner() {
+  try {
+    const textOutput = CFonts.render("Pittaya UI", {
+      font: "block",
+      align: "left",
+      colors: ["system"],
+      background: "transparent",
+      letterSpacing: 1,
+      lineHeight: 1,
+      space: false
+    });
+    const pittayaGradient = gradient(["#fda4af", "#fb7185", "#9f1239"]);
+    process.stdout.write("\n" + pittayaGradient.multiline(textOutput?.string || "Pittaya UI"));
+    console.log(chalk9.gray(`
+  ${"\u2500".repeat(20)} Pittaya UI - Components that scale with your ideas ${"\u2500".repeat(20)}
+`));
+  } catch (error) {
+    CFonts.say("Pittaya UI", { font: "block", colors: ["#fb7185"] });
   }
 }
 
 // src/index.ts
 import { readFileSync } from "fs";
-import { fileURLToPath } from "url";
+import { fileURLToPath as fileURLToPath2 } from "url";
 import { dirname, join } from "path";
-var __filename = fileURLToPath(import.meta.url);
+var __filename = fileURLToPath2(import.meta.url);
 var __dirname = dirname(__filename);
 var packageJson = JSON.parse(
   readFileSync(join(__dirname, "../package.json"), "utf-8")
@@ -1081,10 +1600,22 @@ var program = new Command();
 program.name("pittaya").description("Add Pittaya UI components to your project").version(packageJson.version);
 program.command("init").description("Initialize Pittaya UI in your project").option("-y, --yes", "Skip confirmations and use default values").action(init);
 program.command("add").description("Add a component to your project").argument("[components...]", "Component names to add").option("-y, --yes", "Skip confirmations and overwrite existing files").option("-o, --overwrite", "Overwrite existing files").option("-a, --all", "Add all available components").option("--add-missing-deps", "Automatically install missing dependencies").action(add);
+program.command("remove").description("Remove a component from your project").argument("[components...]", "Component names to remove").option("-y, --yes", "Skip confirmation prompts").action(remove);
 program.command("diff").description("Check for component updates").argument("[components...]", "Component names to check (leave empty for interactive mode)").option("-a, --all", "Check all installed components").action(diff);
 program.command("update").description("Update components to latest version").argument("[components...]", "Component names to update (leave empty for interactive mode)").option("-a, --all", "Update all installed components").option("-y, --yes", "Skip confirmation prompts").option("-f, --force", "Force update even if no changes detected").action(update);
 program.command("list").description("List available and installed components").option("--installed", "Show only installed components").option("--available", "Show only available components").option("--json", "Output in JSON format").action(list);
 program.command("credits").description("Show Pittaya UI creators").action(credits);
+program.command("banner").description("Show the amazing Pittaya banner").action(showBanner);
 program.command("debug").description("Debug component installation issues").option("-c, --component <name>", "Component name to debug").action(debug);
-program.parse();
+async function run() {
+  const args = process.argv.slice(2);
+  const isHelpOrVersion = args.some((arg) => ["--help", "-h", "--version", "-v"].includes(arg));
+  const isInitCommand = args.length > 0 && args[0] === "init";
+  const isCreditsCommand = args.length > 0 && args[0] === "credits";
+  if (isInitCommand || isCreditsCommand) {
+    await showBanner();
+  }
+  program.parse();
+}
+run();
 //# sourceMappingURL=index.js.map