@dinachi/cli 0.4.0 → 0.5.0

package/dist/index.js

@@ -22,311 +22,269 @@ function getUtilityRegistry() {
   return {
     cn: {
       name: "utils",
-      dependencies: [
-        "clsx",
-        "tailwind-merge"
-      ]
+      dependencies: ["clsx", "tailwind-merge"]
     },
     variants: {
       name: "variants",
-      dependencies: [
-        "class-variance-authority"
-      ]
+      dependencies: ["class-variance-authority"]
     }
   };
 }
 function getComponentRegistry() {
   return {
-    button: {
-      name: "button",
-      description: "A customizable button component with multiple variants",
-      files: [
-        { name: "button.tsx" },
-        { name: "index.ts" }
-      ],
-      dependencies: [
-        "@base-ui/react",
-        "class-variance-authority"
-      ],
-      componentDependencies: ["core"],
-      utilityDependencies: ["cn", "variants"]
-    },
-    input: {
-      name: "input",
-      description: "A customizable input field component with variants and sizes",
-      files: [
-        { name: "input.tsx" },
-        { name: "index.ts" }
-      ],
-      dependencies: [
-        "@base-ui/react"
-      ],
-      utilityDependencies: ["cn"]
-    },
-    field: {
-      name: "field",
-      description: "A component for building accessible forms with custom styling and validation.",
-      files: [
-        { name: "field.tsx" },
-        { name: "index.ts" }
-      ],
-      dependencies: [
-        "@base-ui/react"
-      ],
-      utilityDependencies: ["cn"]
-    },
-    form: {
-      name: "form",
-      description: "A native form element with consolidated error handling, built on Base UI foundation.",
-      files: [
-        { name: "form.tsx" },
-        { name: "index.ts" }
-      ],
-      dependencies: [
-        "@base-ui/react"
-      ],
-      utilityDependencies: ["cn"]
-    },
-    "alert-dialog": {
-      name: "alert-dialog",
-      description: "A modal dialog that interrupts the user with important content and expects a response.",
-      files: [
-        { name: "alert-dialog.tsx" },
-        { name: "index.ts" }
-      ],
-      dependencies: [
-        "@base-ui/react",
-        "lucide-react"
-      ],
-      utilityDependencies: ["cn"]
-    },
     accordion: {
       name: "accordion",
       description: "A vertically stacked set of interactive headings that each reveal a section of content.",
-      files: [
-        { name: "accordion.tsx" },
-        { name: "index.ts" }
-      ],
-      dependencies: [
-        "@base-ui/react",
-        "lucide-react",
-        "tailwindcss-animate"
-      ],
+      files: [{ name: "accordion.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react", "lucide-react", "tailwindcss-animate"],
       utilityDependencies: ["cn"]
     },
-    tabs: {
-      name: "tabs",
-      description: "A component for toggling between related panels on the same page.",
-      files: [
-        { name: "tabs.tsx" },
-        { name: "index.ts" }
-      ],
-      dependencies: [
-        "@base-ui/react"
-      ],
+    "alert-dialog": {
+      name: "alert-dialog",
+      description: "A modal dialog that interrupts the user with important content and expects a response.",
+      files: [{ name: "alert-dialog.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react", "lucide-react"],
       utilityDependencies: ["cn"]
     },
-    slider: {
-      name: "slider",
-      description: "An input where the user selects a value from within a given range.",
-      files: [
-        { name: "slider.tsx" },
-        { name: "index.ts" }
-      ],
-      dependencies: [
-        "@base-ui/react"
-      ],
+    autocomplete: {
+      name: "autocomplete",
+      description: "A text input with dynamic suggestions that helps users find and select values quickly.",
+      files: [{ name: "autocomplete.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react", "lucide-react"],
       utilityDependencies: ["cn"]
     },
     avatar: {
       name: "avatar",
       description: "An image element with a fallback for representing a user.",
-      files: [
-        { name: "avatar.tsx" },
-        { name: "index.ts" }
-      ],
-      dependencies: [
-        "@base-ui/react",
-        "class-variance-authority"
-      ],
+      files: [{ name: "avatar.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react", "class-variance-authority"],
       utilityDependencies: ["cn"]
     },
+    button: {
+      name: "button",
+      description: "A customizable button component with multiple variants.",
+      files: [{ name: "button.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react", "class-variance-authority"],
+      componentDependencies: ["core"],
+      utilityDependencies: ["cn", "variants"]
+    },
     checkbox: {
       name: "checkbox",
       description: "A control that allows the user to select one or more options from a set.",
-      files: [
-        { name: "checkbox.tsx" },
-        { name: "index.ts" }
-      ],
-      dependencies: [
-        "@base-ui/react",
-        "lucide-react"
-      ],
+      files: [{ name: "checkbox.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react", "lucide-react"],
       utilityDependencies: ["cn"]
     },
     "checkbox-group": {
       name: "checkbox-group",
       description: "A group of checkboxes that share a common state.",
-      files: [
-        { name: "checkbox-group.tsx" },
-        { name: "index.ts" }
-      ],
-      dependencies: [
-        "@base-ui/react"
-      ],
+      files: [{ name: "checkbox-group.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react"],
       componentDependencies: ["checkbox"],
       utilityDependencies: ["cn"]
     },
-    "collapsible": {
+    collapsible: {
       name: "collapsible",
       description: "A collapsible panel controlled by a button.",
-      files: [
-        { name: "collapsible.tsx" },
-        { name: "index.ts" }
-      ],
-      dependencies: [
-        "@base-ui/react",
-        "tailwindcss-animate"
-      ],
+      files: [{ name: "collapsible.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react", "tailwindcss-animate"],
+      utilityDependencies: ["cn"]
+    },
+    combobox: {
+      name: "combobox",
+      description: "A combobox that combines text input with a selectable popup list of options.",
+      files: [{ name: "combobox.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react", "lucide-react"],
+      utilityDependencies: ["cn"]
+    },
+    "context-menu": {
+      name: "context-menu",
+      description: "A menu that appears at the pointer on right click or long press.",
+      files: [{ name: "context-menu.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react", "lucide-react"],
       utilityDependencies: ["cn"]
     },
     dialog: {
       name: "dialog",
       description: "A popup that opens on top of the entire page, providing a modal interface for user interactions.",
-      files: [
-        { name: "dialog.tsx" },
-        { name: "index.ts" }
-      ],
-      dependencies: [
-        "@base-ui/react"
-      ],
+      files: [{ name: "dialog.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react"],
       utilityDependencies: ["cn"]
     },
-    toast: {
-      name: "toast",
-      description: "Generates toast notifications with support for different types, promises, actions, and global management.",
-      files: [
-        { name: "toast.tsx" },
-        { name: "index.ts" }
-      ],
-      dependencies: [
-        "@base-ui/react",
-        "class-variance-authority"
-      ],
+    drawer: {
+      name: "drawer",
+      description: "A panel that slides in from the edge of the screen for focused workflows.",
+      files: [{ name: "drawer.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react"],
       utilityDependencies: ["cn"]
     },
-    select: {
-      name: "select",
-      description: "A common form component for choosing a predefined value in a dropdown menu.",
-      files: [
-        { name: "select.tsx" },
-        { name: "index.ts" }
-      ],
-      dependencies: [
-        "@base-ui/react",
-        "lucide-react"
-      ],
+    field: {
+      name: "field",
+      description: "A component for building accessible forms with custom styling and validation.",
+      files: [{ name: "field.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react"],
       utilityDependencies: ["cn"]
     },
-    "context-menu": {
-      name: "context-menu",
-      description: "A menu that appears at the pointer on right click or long press.",
-      files: [
-        { name: "context-menu.tsx" },
-        { name: "index.ts" }
-      ],
-      dependencies: [
-        "@base-ui/react",
-        "lucide-react"
-      ],
+    fieldset: {
+      name: "fieldset",
+      description: "A grouping container for related form controls with an accessible legend.",
+      files: [{ name: "fieldset.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react"],
+      utilityDependencies: ["cn"]
+    },
+    form: {
+      name: "form",
+      description: "A native form element with consolidated error handling, built on Base UI foundation.",
+      files: [{ name: "form.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react"],
+      utilityDependencies: ["cn"]
+    },
+    input: {
+      name: "input",
+      description: "A customizable input field component with variants and sizes.",
+      files: [{ name: "input.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react"],
+      utilityDependencies: ["cn"]
+    },
+    menu: {
+      name: "menu",
+      description: "A popup menu for actions and options triggered by a button.",
+      files: [{ name: "menu.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react", "lucide-react"],
       utilityDependencies: ["cn"]
     },
     menubar: {
       name: "menubar",
       description: "A visually persistent menu common in desktop applications that provides access to a consistent set of commands.",
-      files: [
-        { name: "menubar.tsx" },
-        { name: "index.ts" }
-      ],
-      dependencies: [
-        "@base-ui/react",
-        "lucide-react"
-      ],
+      files: [{ name: "menubar.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react", "lucide-react"],
+      utilityDependencies: ["cn"]
+    },
+    meter: {
+      name: "meter",
+      description: "A visual representation of a scalar measurement within a known range.",
+      files: [{ name: "meter.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react"],
       utilityDependencies: ["cn"]
     },
     "navigation-menu": {
       name: "navigation-menu",
       description: "A collection of links and menus for website navigation.",
-      files: [
-        { name: "navigation-menu.tsx" },
-        { name: "index.ts" }
-      ],
-      dependencies: [
-        "@base-ui/react",
-        "lucide-react"
-      ],
+      files: [{ name: "navigation-menu.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react", "lucide-react"],
+      utilityDependencies: ["cn"]
+    },
+    "number-field": {
+      name: "number-field",
+      description: "A numeric input with increment, decrement, and optional scrubbing controls.",
+      files: [{ name: "number-field.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react", "lucide-react"],
+      utilityDependencies: ["cn"]
+    },
+    popover: {
+      name: "popover",
+      description: "An anchored floating panel for contextual information and lightweight interactions.",
+      files: [{ name: "popover.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react"],
       utilityDependencies: ["cn"]
     },
     "preview-card": {
       name: "preview-card",
       description: "A popup that appears when a link is hovered, showing a preview for sighted users.",
-      files: [
-        { name: "preview-card.tsx" },
-        { name: "index.ts" }
-      ],
-      dependencies: [
-        "@base-ui/react"
-      ],
+      files: [{ name: "preview-card.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react"],
+      utilityDependencies: ["cn"]
+    },
+    progress: {
+      name: "progress",
+      description: "A progress bar that communicates task completion to users and assistive technology.",
+      files: [{ name: "progress.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react"],
+      utilityDependencies: ["cn"]
+    },
+    radio: {
+      name: "radio",
+      description: "A radio input and group for selecting a single option from a set.",
+      files: [{ name: "radio.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react", "lucide-react"],
+      utilityDependencies: ["cn"]
+    },
+    "scroll-area": {
+      name: "scroll-area",
+      description: "A custom scroll container with styled scrollbars and optional corner rendering.",
+      files: [{ name: "scroll-area.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react"],
+      utilityDependencies: ["cn"]
+    },
+    select: {
+      name: "select",
+      description: "A common form component for choosing a predefined value in a dropdown menu.",
+      files: [{ name: "select.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react", "lucide-react"],
+      utilityDependencies: ["cn"]
+    },
+    separator: {
+      name: "separator",
+      description: "A visual divider used to separate and organize content.",
+      files: [{ name: "separator.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react"],
+      utilityDependencies: ["cn"]
+    },
+    slider: {
+      name: "slider",
+      description: "An input where the user selects a value from within a given range.",
+      files: [{ name: "slider.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react"],
+      utilityDependencies: ["cn"]
+    },
+    switch: {
+      name: "switch",
+      description: "A control that allows users to toggle a setting on or off.",
+      files: [{ name: "switch.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react"],
+      utilityDependencies: ["cn"]
+    },
+    tabs: {
+      name: "tabs",
+      description: "A component for toggling between related panels on the same page.",
+      files: [{ name: "tabs.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react"],
+      utilityDependencies: ["cn"]
+    },
+    toast: {
+      name: "toast",
+      description: "Generates toast notifications with support for different types, promises, actions, and global management.",
+      files: [{ name: "toast.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react", "class-variance-authority"],
       utilityDependencies: ["cn"]
     },
     toggle: {
       name: "toggle",
       description: "A two-state button that can be on or off.",
-      files: [
-        { name: "toggle.tsx" },
-        { name: "index.ts" }
-      ],
-      dependencies: [
-        "@base-ui/react",
-        "class-variance-authority"
-      ],
-      utilityDependencies: ["cn"]
-    },
-    "toolbar": {
-      "name": "toolbar",
-      "description": "A container for grouping a set of controls, such as buttons, toggle groups, or dropdown menus.",
-      "files": [
-        {
-          "name": "toolbar.tsx"
-        },
-        {
-          "name": "index.ts"
-        }
-      ],
-      "dependencies": [
-        "@base-ui/react"
-      ],
-      "utilityDependencies": [
-        "cn"
-      ]
-    },
-    "tooltip": {
-      "name": "tooltip",
-      "description": "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
-      "files": [
-        {
-          "name": "tooltip.tsx"
-        },
-        {
-          "name": "index.ts"
-        }
-      ],
-      "dependencies": [
-        "@base-ui/react"
-      ],
-      "utilityDependencies": [
-        "cn"
-      ]
+      files: [{ name: "toggle.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react", "class-variance-authority"],
+      utilityDependencies: ["cn"]
+    },
+    "toggle-group": {
+      name: "toggle-group",
+      description: "A grouped set of toggles supporting single or multiple pressed states.",
+      files: [{ name: "toggle-group.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react", "class-variance-authority"],
+      utilityDependencies: ["cn"]
+    },
+    toolbar: {
+      name: "toolbar",
+      description: "A container for grouping a set of controls, such as buttons, toggle groups, or dropdown menus.",
+      files: [{ name: "toolbar.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react"],
+      utilityDependencies: ["cn"]
+    },
+    tooltip: {
+      name: "tooltip",
+      description: "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+      files: [{ name: "tooltip.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react"],
+      utilityDependencies: ["cn"]
     }
   };
 }
@@ -347,22 +305,8 @@ async function getConfig() {
 var __filename2 = fileURLToPath2(import.meta.url);
 var __dirname2 = path2.dirname(__filename2);
 function resolveAliasPath(aliasPath, projectRoot) {
-  const cleanPath = aliasPath.replace(/^@\//, "");
-  const possibleBasePaths = [
-    path2.join(projectRoot, "src"),
-    // src/ prefix (most common)
-    path2.join(projectRoot, "app"),
-    // app/ prefix (Next.js app router)
-    projectRoot
-    // Direct in project root
-  ];
-  for (const basePath of possibleBasePaths) {
-    const fullPath = path2.join(basePath, cleanPath);
-    if (fs2.existsSync(basePath)) {
-      return fullPath;
-    }
-  }
-  return path2.join(projectRoot, "src", cleanPath);
+  const cleanPath = aliasPath.replace(/^@\//, "").replace(/^\.\//, "");
+  return path2.join(projectRoot, cleanPath);
 }
 function getComponentDependencies(componentName) {
   const registry = getComponentRegistry();
@@ -374,15 +318,26 @@ function getComponentDependencies(componentName) {
   }
   return [...new Set(dependencies)];
 }
-async function ensureTailwindConfig(deps) {
+async function ensureTailwindConfig(deps, configFileName) {
   const needsAnimatePlugin = deps.includes("tailwindcss-animate");
   if (!needsAnimatePlugin) return;
-  const configPath = path2.join(process.cwd(), "tailwind.config.js");
+  let configPath = path2.join(process.cwd(), configFileName);
+  if (!fs2.existsSync(configPath)) {
+    const alternatives = ["tailwind.config.js", "tailwind.config.ts", "tailwind.config.mjs"];
+    for (const alt of alternatives) {
+      const altPath = path2.join(process.cwd(), alt);
+      if (fs2.existsSync(altPath)) {
+        configPath = altPath;
+        break;
+      }
+    }
+  }
   if (!fs2.existsSync(configPath)) {
     const configContent = `/** @type {import('tailwindcss').Config} */
 export default {
   content: [
     "./src/**/*.{js,ts,jsx,tsx}",
+    "./app/**/*.{js,ts,jsx,tsx}",
     "./components/**/*.{js,ts,jsx,tsx}",
     "./pages/**/*.{js,ts,jsx,tsx}",
   ],
@@ -394,7 +349,7 @@ export default {
   ],
 };`;
     await fs2.writeFile(configPath, configContent);
-    return { created: true };
+    return { created: true, path: configPath };
   } else {
     const configContent = await fs2.readFile(configPath, "utf-8");
     if (!configContent.includes("tailwindcss-animate")) {
@@ -424,17 +379,17 @@ ${pluginsContent},
         );
       }
       await fs2.writeFile(configPath, updatedContent);
-      return { updated: true };
+      return { updated: true, path: configPath };
     }
   }
-  return { exists: true };
+  return { exists: true, path: configPath };
 }
-async function handleIndexFile(sourcePath, targetPath, componentName, allFilesAdded, aliasPath) {
+async function handleIndexFile(sourcePath, targetPath, componentName, allFilesAdded, targetDir) {
   let templateContent = await fs2.readFile(sourcePath, "utf-8");
   templateContent = templateContent.replace(/^\/\/ @ts-nocheck\s*\n/m, "");
   if (!fs2.existsSync(targetPath)) {
     await fs2.writeFile(targetPath, templateContent);
-    allFilesAdded.push({ name: "index.ts", path: path2.join(aliasPath, "index.ts") });
+    allFilesAdded.push({ name: "index.ts", path: path2.join(targetDir, "index.ts") });
   } else {
     const existingContent = await fs2.readFile(targetPath, "utf-8");
     const exportRegex = /export\s+\*\s+from\s+['"]\.\/([^'"]+)['"]/g;
@@ -448,7 +403,7 @@ async function handleIndexFile(sourcePath, targetPath, componentName, allFilesAd
       const newExportLine = `export * from './${componentName}'`;
       const updatedContent = existingContent.trim() + "\n" + newExportLine + "\n";
       await fs2.writeFile(targetPath, updatedContent);
-      allFilesAdded.push({ name: "index.ts", path: path2.join(aliasPath, "index.ts") });
+      allFilesAdded.push({ name: "index.ts", path: path2.join(targetDir, "index.ts") });
     }
   }
 }
@@ -524,7 +479,7 @@ var addCommand = new Command("add").description("Add a component to your project
           await fs2.writeFile(targetPath, content);
           allFilesAdded.push({
             name: utilityFilename,
-            path: path2.join(config.aliases.lib, utilityFilename)
+            path: path2.join(utilsDir, utilityFilename)
           });
           if (utility.dependencies?.length) {
             allDepsInstalled.push(...utility.dependencies);
@@ -539,7 +494,7 @@ var addCommand = new Command("add").description("Add a component to your project
         const sourcePath = path2.join(__dirname2, "../templates", name, file.name);
         const targetPath = path2.join(componentDir, file.name);
         if (file.name === "index.ts") {
-          await handleIndexFile(sourcePath, targetPath, name, allFilesAdded, config.aliases.ui);
+          await handleIndexFile(sourcePath, targetPath, name, allFilesAdded, componentDir);
         } else {
           if (fs2.existsSync(targetPath) && !options.overwrite) {
             spinner.warn(`\u26A0\uFE0F  ${file.name} already exists. Use --overwrite to replace it.`);
@@ -548,7 +503,7 @@ var addCommand = new Command("add").description("Add a component to your project
           let content = await fs2.readFile(sourcePath, "utf-8");
           content = content.replace(/^\/\/ @ts-nocheck\s*\n/m, "");
           await fs2.writeFile(targetPath, content);
-          allFilesAdded.push({ name: file.name, path: path2.join(config.aliases.ui, file.name) });
+          allFilesAdded.push({ name: file.name, path: path2.join(componentDir, file.name) });
         }
       }
       if (comp.dependencies?.length) {
@@ -558,7 +513,8 @@ var addCommand = new Command("add").description("Add a component to your project
     let tailwindConfigInfo = null;
     if (allDepsInstalled.includes("tailwindcss-animate")) {
       spinner.text = "Updating Tailwind configuration...";
-      tailwindConfigInfo = await ensureTailwindConfig(allDepsInstalled);
+      const configFileName = config.tailwind?.config || "tailwind.config.js";
+      tailwindConfigInfo = await ensureTailwindConfig(allDepsInstalled, configFileName);
     }
     const packageJsonPath = path2.join(process.cwd(), "package.json");
     const packageJson = JSON.parse(await fs2.readFile(packageJsonPath, "utf-8"));
@@ -569,7 +525,7 @@ var addCommand = new Command("add").description("Add a component to your project
       if (missingDeps.length > 0) {
         try {
           const packageManager = getPackageManager();
-          const installCmd = `${packageManager} ${packageManager === "npm" ? "install" : "add"} ${missingDeps.join(" ")}`;
+          const installCmd = getInstallCommand(packageManager, missingDeps);
           execSync(installCmd, { stdio: "inherit" });
         } catch (error) {
           spinner.warn(`\u26A0\uFE0F  Failed to install dependencies. Please install manually: ${missingDeps.join(" ")}`);
@@ -581,7 +537,7 @@ var addCommand = new Command("add").description("Add a component to your project
     if (options.all) {
       spinner.succeed(`\u2705 Added all ${componentsToInstall.length} components!`);
     } else {
-      spinner.succeed(`\u2705 Added ${componentsToInstall.join(", ")} component(s)!`);
+      spinner.succeed(`\u2705 Added ${componentsToInstall.join(", ")}!`);
     }
     console.log();
     console.log("Files added:");
@@ -591,9 +547,9 @@ var addCommand = new Command("add").description("Add a component to your project
     if (tailwindConfigInfo) {
       console.log();
       if (tailwindConfigInfo.created) {
-        console.log(`  ${chalk.green("+")} tailwind.config.js (created with tailwindcss-animate plugin)`);
+        console.log(`  ${chalk.green("+")} ${tailwindConfigInfo.path} (created with tailwindcss-animate plugin)`);
       } else if (tailwindConfigInfo.updated) {
-        console.log(`  ${chalk.blue("~")} tailwind.config.js (updated with tailwindcss-animate plugin)`);
+        console.log(`  ${chalk.blue("~")} ${tailwindConfigInfo.path} (updated with tailwindcss-animate plugin)`);
       }
     }
     if (missingDeps.length > 0) {
@@ -615,10 +571,24 @@ var addCommand = new Command("add").description("Add a component to your project
   }
 });
 function getPackageManager() {
+  if (fs2.existsSync("bun.lockb") || fs2.existsSync("bun.lock")) return "bun";
   if (fs2.existsSync("pnpm-lock.yaml")) return "pnpm";
   if (fs2.existsSync("yarn.lock")) return "yarn";
   return "npm";
 }
+function getInstallCommand(pm, deps) {
+  const depsStr = deps.join(" ");
+  switch (pm) {
+    case "bun":
+      return `bun add ${depsStr}`;
+    case "pnpm":
+      return `pnpm add ${depsStr}`;
+    case "yarn":
+      return `yarn add ${depsStr}`;
+    default:
+      return `npm install ${depsStr}`;
+  }
+}
 
 // src/commands/init.ts
 import { Command as Command2 } from "commander";
@@ -651,12 +621,6 @@ var initCommand = new Command2("init").description("Initialize Dinachi UI in you
       name: "utilsPath",
       message: "Where would you like to install utilities?",
       initial: projectConfig.utilsPath
-    },
-    {
-      type: "confirm",
-      name: "installDeps",
-      message: "Install required dependencies?",
-      initial: true
     }
   ]);
   if (!response.componentsPath || !response.utilsPath) {
@@ -665,8 +629,10 @@ var initCommand = new Command2("init").description("Initialize Dinachi UI in you
   }
   const spinner = ora2("Setting up Dinachi UI...").start();
   try {
-    await fs3.ensureDir(path3.dirname(response.componentsPath));
-    await fs3.ensureDir(response.utilsPath);
+    const normalizedComponentsPath = normalizePath(response.componentsPath);
+    const normalizedUtilsPath = normalizePath(response.utilsPath);
+    await fs3.ensureDir(normalizedComponentsPath);
+    await fs3.ensureDir(normalizedUtilsPath);
     const utilsContent = `import { type ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
 
@@ -674,56 +640,58 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
 `;
-    await fs3.writeFile(path3.join(response.utilsPath, "utils.ts"), utilsContent);
-    if (response.installDeps) {
-      spinner.text = "Installing dependencies...";
-      const deps = [
-        "class-variance-authority",
-        "clsx",
-        "tailwind-merge"
-      ];
-      const packageManager = getPackageManager2();
-      const installCmd = `${packageManager} ${packageManager === "npm" ? "install" : "add"} ${deps.join(" ")}`;
-      execSync2(installCmd, { stdio: "inherit" });
-    }
+    await fs3.writeFile(path3.join(normalizedUtilsPath, "utils.ts"), utilsContent);
+    spinner.text = "Installing dependencies...";
+    const deps = [
+      "class-variance-authority",
+      "clsx",
+      "tailwind-merge"
+    ];
+    const packageManager = getPackageManager2();
+    const installCmd = getInstallCommand2(packageManager, deps);
+    execSync2(installCmd, { stdio: "inherit" });
+    const componentsAlias = pathToAlias(normalizedComponentsPath);
+    const libAlias = pathToAlias(normalizedUtilsPath);
+    const uiAlias = componentsAlias;
+    const libParentAlias = pathToAlias(path3.dirname(normalizedUtilsPath) === "." ? normalizedUtilsPath : normalizedUtilsPath);
     const rscEnabled = projectConfig.framework === "next.js";
-    const configContent = `{
-  "style": "default",
-  "rsc": ${rscEnabled},
-  "tsx": true,
-  "tailwind": {
-    "config": "${projectConfig.tailwindConfig}",
-    "css": "${projectConfig.cssPath}",
-    "baseColor": "slate",
-    "cssVariables": true
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "iconLibrary": "lucide"
-}`;
+    const configContent = JSON.stringify({
+      style: "default",
+      rsc: rscEnabled,
+      tsx: true,
+      tailwind: {
+        config: projectConfig.tailwindConfig,
+        css: projectConfig.cssPath,
+        baseColor: "slate",
+        cssVariables: true
+      },
+      aliases: {
+        components: pathToAlias(path3.dirname(normalizedComponentsPath)),
+        utils: `${libAlias}/utils`,
+        ui: uiAlias,
+        lib: libAlias,
+        hooks: `${pathToAlias(projectConfig.srcDir)}/hooks`
+      },
+      iconLibrary: "lucide"
+    }, null, 2);
     await fs3.writeFile("components.json", configContent);
     spinner.succeed("\u2705 Dinachi UI setup complete!");
     console.log();
     console.log("Next steps:");
     console.log(`  1. Add a component: ${chalk2.cyan("npx @dinachi/cli add button")}`);
-    console.log(`  2. Components will be installed to: ${chalk2.cyan("@/components/ui")}`);
-    console.log(`  3. Utils available at: ${chalk2.cyan("@/lib/utils")}`);
+    console.log(`  2. Components will be installed to: ${chalk2.cyan(normalizedComponentsPath)}`);
+    console.log(`  3. Utils available at: ${chalk2.cyan(path3.join(normalizedUtilsPath, "utils.ts"))}`);
     if (projectConfig.framework === "next.js") {
       console.log();
       console.log(chalk2.blue("\u{1F4DD} Next.js specific notes:"));
       console.log(`  - RSC (React Server Components) enabled in config`);
       console.log(`  - Make sure to add "use client" directive if needed`);
-      console.log(`  - Tailwind config set to: ${chalk2.cyan(projectConfig.tailwindConfig)}`);
+      console.log(`  - Tailwind config: ${chalk2.cyan(projectConfig.tailwindConfig)}`);
     } else if (projectConfig.framework === "remix") {
       console.log();
       console.log(chalk2.blue("\u{1F4DD} Remix specific notes:"));
-      console.log(`  - Components will be installed to: ${chalk2.cyan(projectConfig.componentsPath)}`);
-      console.log(`  - Utils will be installed to: ${chalk2.cyan(projectConfig.utilsPath)}`);
+      console.log(`  - Components will be installed to: ${chalk2.cyan(normalizedComponentsPath)}`);
+      console.log(`  - Utils will be installed to: ${chalk2.cyan(normalizedUtilsPath)}`);
     }
     console.log();
     console.log("\u{1F4A1} Tip: Install globally for shorter commands:");
@@ -734,43 +702,82 @@ export function cn(...inputs: ClassValue[]) {
     process.exit(1);
   }
 });
+function normalizePath(inputPath) {
+  return inputPath.replace(/^\.\//, "").replace(/\/$/, "");
+}
+function pathToAlias(filePath) {
+  const normalized = normalizePath(filePath);
+  return `@/${normalized}`;
+}
 function getPackageManager2() {
+  if (fs3.existsSync("bun.lockb") || fs3.existsSync("bun.lock")) return "bun";
   if (fs3.existsSync("pnpm-lock.yaml")) return "pnpm";
   if (fs3.existsSync("yarn.lock")) return "yarn";
   return "npm";
 }
+function getInstallCommand2(pm, deps) {
+  const depsStr = deps.join(" ");
+  switch (pm) {
+    case "bun":
+      return `bun add ${depsStr}`;
+    case "pnpm":
+      return `pnpm add ${depsStr}`;
+    case "yarn":
+      return `yarn add ${depsStr}`;
+    default:
+      return `npm install ${depsStr}`;
+  }
+}
 function detectProjectType() {
   const packageJsonPath = path3.join(process.cwd(), "package.json");
   if (!fs3.existsSync(packageJsonPath)) {
-    return {
-      framework: "react",
-      componentsPath: "./src/components/ui",
-      utilsPath: "./src/lib",
-      tailwindConfig: "tailwind.config.js",
-      cssPath: "src/index.css",
-      srcDir: "src"
-    };
+    return getDefaultConfig("react", false);
   }
   const packageJson = JSON.parse(fs3.readFileSync(packageJsonPath, "utf-8"));
   const deps = { ...packageJson.dependencies, ...packageJson.devDependencies };
+  const hasSrcDir = fs3.existsSync(path3.join(process.cwd(), "src"));
+  const hasAppDir = fs3.existsSync(path3.join(process.cwd(), "app"));
+  const hasSrcAppDir = fs3.existsSync(path3.join(process.cwd(), "src", "app"));
+  const tailwindConfig = detectTailwindConfig();
+  const cssPath = detectCssPath(hasSrcDir, hasSrcAppDir);
   if (deps.next) {
+    if (hasSrcDir && hasSrcAppDir) {
+      return {
+        framework: "next.js",
+        componentsPath: "./src/components/ui",
+        utilsPath: "./src/lib",
+        tailwindConfig,
+        cssPath,
+        srcDir: "src"
+      };
+    }
+    if (hasAppDir && !hasSrcDir) {
+      return {
+        framework: "next.js",
+        componentsPath: "./components/ui",
+        utilsPath: "./lib",
+        tailwindConfig,
+        cssPath,
+        srcDir: "."
+      };
+    }
     return {
       framework: "next.js",
-      componentsPath: "./src/components/ui",
-      utilsPath: "./src/lib",
-      tailwindConfig: "tailwind.config.ts",
-      cssPath: "src/app/globals.css",
-      srcDir: "src"
+      componentsPath: hasSrcDir ? "./src/components/ui" : "./components/ui",
+      utilsPath: hasSrcDir ? "./src/lib" : "./lib",
+      tailwindConfig,
+      cssPath,
+      srcDir: hasSrcDir ? "src" : "."
     };
   }
   if (deps.vite || deps["@vitejs/plugin-react"]) {
     return {
       framework: "vite",
-      componentsPath: "./src/components/ui",
-      utilsPath: "./src/lib",
-      tailwindConfig: "tailwind.config.js",
-      cssPath: "src/index.css",
-      srcDir: "src"
+      componentsPath: hasSrcDir ? "./src/components/ui" : "./components/ui",
+      utilsPath: hasSrcDir ? "./src/lib" : "./lib",
+      tailwindConfig,
+      cssPath,
+      srcDir: hasSrcDir ? "src" : "."
     };
   }
   if (deps["react-scripts"]) {
@@ -778,8 +785,8 @@ function detectProjectType() {
       framework: "create-react-app",
       componentsPath: "./src/components/ui",
       utilsPath: "./src/lib",
-      tailwindConfig: "tailwind.config.js",
-      cssPath: "src/index.css",
+      tailwindConfig,
+      cssPath,
       srcDir: "src"
     };
   }
@@ -788,23 +795,64 @@ function detectProjectType() {
       framework: "remix",
       componentsPath: "./app/components/ui",
       utilsPath: "./app/lib",
-      tailwindConfig: "tailwind.config.ts",
-      cssPath: "app/tailwind.css",
+      tailwindConfig,
+      cssPath: detectCssPath(false, false, true),
       srcDir: "app"
     };
   }
+  return getDefaultConfig("react", hasSrcDir);
+}
+function getDefaultConfig(framework, hasSrcDir) {
   return {
-    framework: "react",
-    componentsPath: "./src/components/ui",
-    utilsPath: "./src/lib",
-    tailwindConfig: "tailwind.config.js",
-    cssPath: "src/index.css",
-    srcDir: "src"
+    framework,
+    componentsPath: hasSrcDir ? "./src/components/ui" : "./components/ui",
+    utilsPath: hasSrcDir ? "./src/lib" : "./lib",
+    tailwindConfig: detectTailwindConfig(),
+    cssPath: hasSrcDir ? "src/index.css" : "index.css",
+    srcDir: hasSrcDir ? "src" : "."
   };
 }
+function detectTailwindConfig() {
+  if (fs3.existsSync(path3.join(process.cwd(), "tailwind.config.ts"))) {
+    return "tailwind.config.ts";
+  }
+  if (fs3.existsSync(path3.join(process.cwd(), "tailwind.config.js"))) {
+    return "tailwind.config.js";
+  }
+  if (fs3.existsSync(path3.join(process.cwd(), "tailwind.config.mjs"))) {
+    return "tailwind.config.mjs";
+  }
+  return "tailwind.config.js";
+}
+function detectCssPath(hasSrcDir, hasSrcAppDir, isRemix = false) {
+  const cwd = process.cwd();
+  const possiblePaths = [
+    // Next.js App Router
+    "app/globals.css",
+    "src/app/globals.css",
+    // Next.js Pages / General
+    "styles/globals.css",
+    "src/styles/globals.css",
+    // Vite / CRA
+    "src/index.css",
+    "index.css",
+    // Remix
+    "app/tailwind.css",
+    "app/styles/tailwind.css"
+  ];
+  for (const cssPath of possiblePaths) {
+    if (fs3.existsSync(path3.join(cwd, cssPath))) {
+      return cssPath;
+    }
+  }
+  if (isRemix) return "app/tailwind.css";
+  if (hasSrcAppDir) return "src/app/globals.css";
+  if (hasSrcDir) return "src/index.css";
+  return "app/globals.css";
+}
 
 // src/index.ts
 var program = new Command3();
-program.name("dinachi").description("Add Dinachi UI components to your project").version("0.1.0");
+program.name("dinachi").description("Add Dinachi UI components to your project").version("0.5.0");
 program.addCommand(addCommand).addCommand(initCommand);
 program.parse();