pittaya 0.0.8 → 0.0.9

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) {
@@ -367,29 +519,230 @@ async function addComponent(name, config, options) {
 import chalk2 from "chalk";
 import ora2 from "ora";
 import prompts2 from "prompts";
-import path5 from "path";
-import fs5 from "fs/promises";
+import path8 from "path";
+import fs8 from "fs/promises";
 import { execa as execa2 } from "execa";
+
+// src/utils/style-installer.ts
+import fs7 from "fs/promises";
+import path7 from "path";
+import postcss from "postcss";
+async function applyRegistryStyleToProject(styleComponent, config, options) {
+  const cssPath = config.tailwind?.css;
+  if (!cssPath) {
+    return;
+  }
+  const absoluteCssPath = path7.resolve(process.cwd(), cssPath);
+  const raw = await fs7.readFile(absoluteCssPath, "utf-8").catch(() => "");
+  const next = await transformTailwindV4Css(raw, styleComponent.cssVars ?? {}, {
+    overwriteCssVars: options?.overwriteCssVars ?? true
+  });
+  await fs7.mkdir(path7.dirname(absoluteCssPath), { recursive: true });
+  await fs7.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(
+    chalk2.bold(
+      `
+Welcome to ${chalk2.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 = path8.join(cwd, "components.json");
+  const pittayaJsonPath = path8.join(cwd, "pittaya.json");
+  const exists = await fs8.access(componentsJsonPath).then(() => true).catch(() => false);
+  const pittayaExists = await fs8.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(
+      `${chalk2.underline("components.json")} already exists. Do you want to overwrite it?`,
+      false
+    );
     if (!overwrite) {
       console.log(chalk2.yellow("\n\u274C Operation cancelled.\n"));
       return;
     }
   }
+  let shouldWritePittayaJson = true;
+  if (pittayaExists && !options.yes) {
+    const overwrite = await confirm(
+      `${chalk2.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,
@@ -400,9 +753,9 @@ async function init(options) {
       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 +765,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",
@@ -436,11 +793,11 @@ async function init(options) {
   }
   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,33 +806,71 @@ 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"
   };
+  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 fs8.readFile(pittayaJsonPath, "utf-8");
+      pittayaJson = JSON.parse(raw);
+    } catch {
+      shouldWritePittayaJson = true;
+    }
+  }
   const spinner = ora2("Creating components.json...").start();
-  await fs5.writeFile(
+  await fs8.writeFile(
     componentsJsonPath,
     JSON.stringify(componentsJson, null, 2)
   );
   spinner.succeed("components.json created successfully!");
-  const packageManager = await detectPackageManager2();
+  if (shouldWritePittayaJson) {
+    const pittayaSpinner = ora2("Creating pittaya.json...").start();
+    await fs8.writeFile(pittayaJsonPath, JSON.stringify(pittayaJson, null, 2));
+    pittayaSpinner.succeed("pittaya.json created successfully!");
+  }
+  applyPittayaProjectConfig(pittayaJson);
   const depsSpinner = ora2("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"));
+  try {
+    const styleItem = await getRegistryComponent("style", componentsJson);
+    await applyRegistryStyleToProject(styleItem, componentsJson, {
+      overwriteCssVars: pittayaJson.theme?.overwriteCssVars ?? true
+    });
+  } catch (error) {
+    console.error(error);
+  }
+  console.log(chalk2.green(`
+\u2705 ${chalk2.hex(pittayaColorHex)("Pittaya")} UI configured successfully!
+`));
   console.log(chalk2.dim("Next steps:"));
   console.log(
     chalk2.dim(
@@ -489,19 +884,6 @@ async function init(options) {
     )
   );
 }
-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";
@@ -517,15 +899,15 @@ async function credits() {
 import chalk4 from "chalk";
 import ora3 from "ora";
 import prompts3 from "prompts";
-import path6 from "path";
-import fs6 from "fs/promises";
+import path9 from "path";
+import fs9 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(
@@ -537,7 +919,7 @@ async function diff(components, options) {
   const spinner = ora3("Fetching registry...").start();
   let registry;
   try {
-    registry = await fetchRegistry();
+    registry = await fetchRegistry(config);
     spinner.succeed("Registry loaded!");
   } catch (error) {
     spinner.fail("Error loading registry");
@@ -602,7 +984,7 @@ 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.`));
       return null;
@@ -616,9 +998,9 @@ async function checkComponentDiff(name, config) {
     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 = path9.join(process.cwd(), targetPath);
       try {
-        const localContent = await fs6.readFile(filePath, "utf-8");
+        const localContent = await fs9.readFile(filePath, "utf-8");
         const registryContent = transformImports(file.content, config);
         const contentMatches = localContent.trim() === registryContent.trim();
         fileDiffs.push({
@@ -689,15 +1071,15 @@ function displayDiffResults(results) {
 import chalk5 from "chalk";
 import ora4 from "ora";
 import prompts4 from "prompts";
-import path7 from "path";
-import fs7 from "fs/promises";
+import path10 from "path";
+import fs10 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(
@@ -709,7 +1091,7 @@ async function update(components, options) {
   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");
@@ -730,13 +1112,11 @@ async function update(components, options) {
       return;
     }
     if (!options.yes && !options.force) {
-      const { confirm } = await prompts4({
-        type: "confirm",
-        name: "confirm",
-        message: `Update ${componentsToUpdate.length} component(s)?`,
-        initial: true
-      });
-      if (!confirm) {
+      const shouldUpdate = await confirm(
+        `Update ${componentsToUpdate.length} component(s)?`,
+        true
+      );
+      if (!shouldUpdate) {
         console.log(chalk5.yellow("\n\u274C Update cancelled.\n"));
         return;
       }
@@ -785,9 +1165,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 = path10.join(process.cwd(), targetPath);
     try {
-      const localContent = await fs7.readFile(filePath, "utf-8");
+      const localContent = await fs10.readFile(filePath, "utf-8");
       const registryContent = transformImports(file.content, config);
       if (localContent.trim() !== registryContent.trim()) {
         return true;
@@ -800,7 +1180,7 @@ 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.`));
       return { name, updated: false, skipped: true, reason: "not found in registry" };
@@ -816,13 +1196,8 @@ async function updateComponent(name, config, options) {
       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) {
+      const shouldUpdate = await confirm(`Update ${chalk5.bold(name)}?`, true);
+      if (!shouldUpdate) {
         console.log(chalk5.yellow(`   \u23ED\uFE0F  Skipped ${name}`));
         return { name, updated: false, skipped: true, reason: "user cancelled" };
       }
@@ -830,10 +1205,10 @@ async function updateComponent(name, config, options) {
     const spinner = ora4(`Updating ${chalk5.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 = path10.join(process.cwd(), targetPath);
+      await fs10.mkdir(path10.dirname(filePath), { recursive: true });
       const content = transformImports(file.content, config);
-      await fs7.writeFile(filePath, content, "utf-8");
+      await fs10.writeFile(filePath, content, "utf-8");
     }
     spinner.succeed(`${chalk5.bold(name)} updated successfully!`);
     return { name, updated: true, skipped: false };
@@ -869,15 +1244,13 @@ function displayUpdateResults(results) {
 // src/commands/list.ts
 import chalk6 from "chalk";
 import ora5 from "ora";
-import path8 from "path";
-import fs8 from "fs/promises";
 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(
@@ -889,7 +1262,7 @@ async function list(options) {
   const spinner = ora5("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 +1272,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
       };
     })
@@ -972,20 +1346,20 @@ function displayComponents(components, options) {
 
 // src/commands/debug.ts
 import chalk7 from "chalk";
-import path9 from "path";
-import fs9 from "fs/promises";
+import path11 from "path";
+import fs11 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}
 `));
   let config;
   try {
-    const configContent = await fs9.readFile(componentsJsonPath, "utf-8");
-    config = JSON.parse(configContent);
+    const loaded = await loadProjectConfig(cwd);
+    config = loaded.config;
+    applyPittayaProjectConfig(loaded.pittaya);
     console.log(chalk7.green("\u2705 components.json found"));
-    console.log(chalk7.dim(`   Path: ${componentsJsonPath}`));
+    console.log(chalk7.dim(`   Path: ${path11.join(cwd, "components.json")}`));
   } catch (error) {
     console.log(chalk7.red("\u274C components.json not found\n"));
     return;
@@ -1006,7 +1380,7 @@ async function debug(options) {
 \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
 `));
@@ -1018,20 +1392,20 @@ async function debug(options) {
       console.log(chalk7.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 fullPath = path11.join(cwd, targetPath);
+        const exists = await fs11.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");
         console.log(`   ${statusIcon} ${file.name}`);
         console.log(chalk7.dim(`      Expected: ${fullPath}`));
         console.log(chalk7.dim(`      Status: ${statusText}`));
         if (!exists) {
-          const dir = path9.dirname(fullPath);
+          const dir = path11.dirname(fullPath);
           try {
-            const dirExists = await fs9.access(dir).then(() => true).catch(() => false);
+            const dirExists = await fs11.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 fs11.readdir(dir);
+              const baseName = path11.basename(file.name, path11.extname(file.name));
               const similarFiles = filesInDir.filter(
                 (f) => f.includes(baseName) || f.toLowerCase().includes(baseName.toLowerCase())
               );
@@ -1070,9 +1444,9 @@ async function debug(options) {
 
 // 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")