@dinachi/cli 0.4.0 → 0.5.1

package/dist/index.js

@@ -6,8 +6,8 @@ import { Command as Command3 } from "commander";
 // src/commands/add.ts
 import { Command } from "commander";
 import { execSync } from "child_process";
-import fs2 from "fs-extra";
-import path2 from "path";
+import fs3 from "fs-extra";
+import path3 from "path";
 import { fileURLToPath as fileURLToPath2 } from "url";
 import ora from "ora";
 import chalk from "chalk";
@@ -18,315 +18,314 @@ import path from "path";
 import { fileURLToPath } from "url";
 var __filename = fileURLToPath(import.meta.url);
 var __dirname = path.dirname(__filename);
+function dirnameLike(input) {
+  const normalized = input.replace(/\/+$/, "");
+  const idx = normalized.lastIndexOf("/");
+  if (idx <= 0) {
+    return normalized;
+  }
+  return normalized.slice(0, idx);
+}
+function normalizeConfig(raw) {
+  const style = typeof raw.style === "string" ? raw.style : "default";
+  const rsc = typeof raw.rsc === "boolean" ? raw.rsc : false;
+  const tsx = typeof raw.tsx === "boolean" ? raw.tsx : true;
+  const tailwindConfig = typeof raw.tailwind?.config === "string" ? raw.tailwind.config : "tailwind.config.js";
+  const tailwindCss = typeof raw.tailwind?.css === "string" ? raw.tailwind.css : "src/index.css";
+  const tailwindBaseColor = typeof raw.tailwind?.baseColor === "string" ? raw.tailwind.baseColor : "slate";
+  const tailwindCssVariables = typeof raw.tailwind?.cssVariables === "boolean" ? raw.tailwind.cssVariables : true;
+  const rawComponentsAlias = typeof raw.aliases?.components === "string" ? raw.aliases.components : "./src/components";
+  const hasLegacyUiPathInComponents = rawComponentsAlias.replace(/\/+$/, "").endsWith("/ui");
+  const componentsAlias = hasLegacyUiPathInComponents ? dirnameLike(rawComponentsAlias) : rawComponentsAlias;
+  const uiAlias = typeof raw.aliases?.ui === "string" ? raw.aliases.ui : hasLegacyUiPathInComponents ? rawComponentsAlias : `${componentsAlias}/ui`;
+  const utilsAlias = typeof raw.aliases?.utils === "string" ? raw.aliases.utils : "./src/lib/utils";
+  const libAlias = typeof raw.aliases?.lib === "string" ? raw.aliases.lib : dirnameLike(utilsAlias);
+  const hooksAlias = typeof raw.aliases?.hooks === "string" ? raw.aliases.hooks : "./src/hooks";
+  return {
+    style,
+    rsc,
+    tsx,
+    tailwind: {
+      config: tailwindConfig,
+      css: tailwindCss,
+      baseColor: tailwindBaseColor,
+      cssVariables: tailwindCssVariables
+    },
+    aliases: {
+      components: componentsAlias,
+      utils: utilsAlias,
+      ui: uiAlias,
+      lib: libAlias,
+      hooks: hooksAlias
+    }
+  };
+}
 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"],
+      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"]
     }
   };
 }
@@ -337,302 +336,676 @@ async function getConfig() {
   }
   try {
     const configContent = await fs.readFile(configPath, "utf-8");
-    return JSON.parse(configContent);
-  } catch (error) {
+    const parsed = JSON.parse(configContent);
+    return normalizeConfig(parsed);
+  } catch {
     return null;
   }
 }
 
+// src/utils/package-manager.ts
+import fs2 from "fs-extra";
+import path2 from "path";
+var LOCK_FILE_MAP = [
+  { file: "bun.lockb", manager: "bun" },
+  { file: "bun.lock", manager: "bun" },
+  { file: "pnpm-lock.yaml", manager: "pnpm" },
+  { file: "yarn.lock", manager: "yarn" },
+  { file: "package-lock.json", manager: "npm" }
+];
+function walkUpDirectories(startDir) {
+  const dirs = [];
+  let current = path2.resolve(startDir);
+  while (true) {
+    dirs.push(current);
+    const parent = path2.dirname(current);
+    if (parent === current) {
+      break;
+    }
+    current = parent;
+  }
+  return dirs;
+}
+function detectManagerFromPackageJson(startDir) {
+  for (const dir of walkUpDirectories(startDir)) {
+    const packageJsonPath = path2.join(dir, "package.json");
+    if (!fs2.existsSync(packageJsonPath)) {
+      continue;
+    }
+    try {
+      const packageJson = JSON.parse(fs2.readFileSync(packageJsonPath, "utf-8"));
+      const value = packageJson.packageManager ?? "";
+      if (value.startsWith("pnpm@")) return "pnpm";
+      if (value.startsWith("yarn@")) return "yarn";
+      if (value.startsWith("bun@")) return "bun";
+      if (value.startsWith("npm@")) return "npm";
+    } catch {
+      continue;
+    }
+  }
+  return null;
+}
+function detectPackageManager(startDir = process.cwd()) {
+  const packageJsonManager = detectManagerFromPackageJson(startDir);
+  if (packageJsonManager) {
+    return packageJsonManager;
+  }
+  for (const dir of walkUpDirectories(startDir)) {
+    for (const entry of LOCK_FILE_MAP) {
+      if (fs2.existsSync(path2.join(dir, entry.file))) {
+        return entry.manager;
+      }
+    }
+  }
+  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/utils/json.ts
+function parseJsonWithComments(content) {
+  let result = "";
+  let inString = false;
+  let inSingleLineComment = false;
+  let inMultiLineComment = false;
+  let isEscaped = false;
+  for (let i = 0; i < content.length; i += 1) {
+    const char = content[i];
+    const next = content[i + 1];
+    if (inSingleLineComment) {
+      if (char === "\n") {
+        inSingleLineComment = false;
+        result += char;
+      }
+      continue;
+    }
+    if (inMultiLineComment) {
+      if (char === "*" && next === "/") {
+        inMultiLineComment = false;
+        i += 1;
+      } else if (char === "\n") {
+        result += char;
+      }
+      continue;
+    }
+    if (inString) {
+      result += char;
+      if (!isEscaped && char === '"') {
+        inString = false;
+      }
+      isEscaped = !isEscaped && char === "\\";
+      continue;
+    }
+    if (char === '"') {
+      inString = true;
+      isEscaped = false;
+      result += char;
+      continue;
+    }
+    if (char === "/" && next === "/") {
+      inSingleLineComment = true;
+      i += 1;
+      continue;
+    }
+    if (char === "/" && next === "*") {
+      inMultiLineComment = true;
+      i += 1;
+      continue;
+    }
+    result += char;
+  }
+  const withoutLineComments = result;
+  const withoutTrailingCommas = withoutLineComments.replace(/,\s*([}\]])/g, "$1");
+  return JSON.parse(withoutTrailingCommas);
+}
+
+// src/utils/dependencies.ts
+var DEPENDENCY_VERSION_MAP = {
+  "@base-ui/react": "^1.2.0",
+  "lucide-react": "^0.552.0",
+  "class-variance-authority": "^0.7.1",
+  "tailwindcss-animate": "^1.0.7",
+  "clsx": "^2.1.1",
+  "tailwind-merge": "^3.3.1"
+};
+function toInstallSpec(dep) {
+  const version = DEPENDENCY_VERSION_MAP[dep];
+  return version ? `${dep}@${version}` : dep;
+}
+
 // src/commands/add.ts
 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;
+var __dirname2 = path3.dirname(__filename2);
+function stripTemplateDirective(content) {
+  return content.replace(/^\/\/ @ts-nocheck\s*\n/m, "");
+}
+function stripExtension(filePath) {
+  return filePath.replace(/\.[^./\\]+$/, "");
+}
+function toImportPath(fromFilePath, toFilePath) {
+  const relativePath = path3.relative(path3.dirname(fromFilePath), stripExtension(toFilePath)).replace(/\\/g, "/");
+  return relativePath.startsWith(".") ? relativePath : `./${relativePath}`;
+}
+function matchPathPattern(pattern, input) {
+  if (!pattern.includes("*")) {
+    return pattern === input ? "" : null;
+  }
+  const [prefix, suffix] = pattern.split("*");
+  if (!input.startsWith(prefix) || !input.endsWith(suffix)) {
+    return null;
+  }
+  return input.slice(prefix.length, input.length - suffix.length);
+}
+function readCompilerPathConfig(projectRoot) {
+  const configFiles = ["tsconfig.json", "jsconfig.json"];
+  for (const configFile of configFiles) {
+    const configPath = path3.join(projectRoot, configFile);
+    if (!fs3.existsSync(configPath)) {
+      continue;
+    }
+    try {
+      const content = fs3.readFileSync(configPath, "utf-8");
+      const parsed = parseJsonWithComments(content);
+      const compilerOptions = parsed.compilerOptions ?? {};
+      const baseUrl = path3.resolve(
+        projectRoot,
+        typeof compilerOptions.baseUrl === "string" ? compilerOptions.baseUrl : "."
+      );
+      const rawPaths = compilerOptions.paths ?? {};
+      const paths = {};
+      for (const [key, value] of Object.entries(rawPaths)) {
+        if (!Array.isArray(value)) {
+          continue;
+        }
+        const targets = value.filter((entry) => typeof entry === "string");
+        if (targets.length > 0) {
+          paths[key] = targets;
+        }
+      }
+      return { baseUrl, paths };
+    } catch {
+      continue;
     }
   }
-  return path2.join(projectRoot, "src", cleanPath);
+  return null;
 }
-function getComponentDependencies(componentName) {
+function resolveConfiguredPath(aliasOrPath, projectRoot, compilerConfig) {
+  const normalized = aliasOrPath.replace(/\\/g, "/").trim();
+  if (path3.isAbsolute(normalized)) {
+    return normalized;
+  }
+  if (normalized.startsWith("./") || normalized.startsWith("../")) {
+    return path3.resolve(projectRoot, normalized);
+  }
+  if (normalized.startsWith("/")) {
+    return path3.resolve(projectRoot, `.${normalized}`);
+  }
+  if (compilerConfig) {
+    for (const [pattern, targets] of Object.entries(compilerConfig.paths)) {
+      const wildcard = matchPathPattern(pattern, normalized);
+      if (wildcard === null) {
+        continue;
+      }
+      const target = targets[0];
+      if (!target) {
+        continue;
+      }
+      const mappedTarget = target.includes("*") ? target.replace("*", wildcard) : target;
+      return path3.resolve(compilerConfig.baseUrl, mappedTarget);
+    }
+  }
+  if (normalized.startsWith("@/") || normalized.startsWith("~/")) {
+    return path3.resolve(projectRoot, normalized.slice(2));
+  }
+  return path3.resolve(projectRoot, normalized);
+}
+function rewriteTemplateImports(content, targetFilePath, utilsFilePath, libDirPath) {
+  const utilsImportPath = toImportPath(targetFilePath, utilsFilePath);
+  const variantsImportPath = toImportPath(targetFilePath, path3.join(libDirPath, "variants.ts"));
+  return content.replace(/(['"])@\/lib\/utils\1/g, `$1${utilsImportPath}$1`).replace(/(['"])@\/lib\/variants\1/g, `$1${variantsImportPath}$1`);
+}
+function getComponentDependencies(componentName, visited = /* @__PURE__ */ new Set()) {
+  if (visited.has(componentName)) {
+    return [];
+  }
+  visited.add(componentName);
   const registry = getComponentRegistry();
   const component = registry[componentName];
   if (!component) return [];
-  let dependencies = component.componentDependencies || [];
+  const dependencies = [];
   for (const dep of component.componentDependencies || []) {
-    dependencies = [...dependencies, ...getComponentDependencies(dep)];
+    if (!registry[dep]) {
+      continue;
+    }
+    dependencies.push(dep, ...getComponentDependencies(dep, visited));
   }
   return [...new Set(dependencies)];
 }
-async function ensureTailwindConfig(deps) {
-  const needsAnimatePlugin = deps.includes("tailwindcss-animate");
-  if (!needsAnimatePlugin) return;
-  const configPath = path2.join(process.cwd(), "tailwind.config.js");
-  if (!fs2.existsSync(configPath)) {
-    const configContent = `/** @type {import('tailwindcss').Config} */
-export default {
+function detectTailwindConfigPath(projectRoot, configuredName) {
+  const preferred = resolveConfiguredPath(configuredName, projectRoot, null);
+  if (fs3.existsSync(preferred)) {
+    return preferred;
+  }
+  const alternatives = [
+    "tailwind.config.ts",
+    "tailwind.config.js",
+    "tailwind.config.mjs",
+    "tailwind.config.cjs",
+    "tailwind.config.cts",
+    "tailwind.config.mts"
+  ];
+  for (const candidate of alternatives) {
+    const candidatePath = path3.join(projectRoot, candidate);
+    if (fs3.existsSync(candidatePath)) {
+      return candidatePath;
+    }
+  }
+  return preferred;
+}
+function insertTailwindPlugin(content, pluginExpression) {
+  if (/plugins\s*:\s*\[/.test(content)) {
+    return content.replace(/plugins\s*:\s*\[([\s\S]*?)\]/m, (_match, pluginsContent) => {
+      const trimmedPlugins = pluginsContent.trim();
+      if (trimmedPlugins.length === 0) {
+        return `plugins: [
+    ${pluginExpression},
+  ]`;
+      }
+      const normalizedPlugins = pluginsContent.trimEnd();
+      const withTrailingComma = normalizedPlugins.endsWith(",") ? normalizedPlugins : `${normalizedPlugins},`;
+      return `plugins: [
+${withTrailingComma}
+    ${pluginExpression},
+  ]`;
+    });
+  }
+  const trimmed = content.trimEnd();
+  const hasSemicolon = trimmed.endsWith(";");
+  const withoutSemicolon = hasSemicolon ? trimmed.slice(0, -1) : trimmed;
+  const closingBraceIndex = withoutSemicolon.lastIndexOf("}");
+  if (closingBraceIndex === -1) {
+    return null;
+  }
+  const beforeClosingBrace = withoutSemicolon.slice(0, closingBraceIndex).trimEnd();
+  const needsComma = beforeClosingBrace.length > 0 && !beforeClosingBrace.endsWith(",") && !beforeClosingBrace.endsWith("{");
+  const next = `${withoutSemicolon.slice(0, closingBraceIndex)}${needsComma ? "," : ""}
+  plugins: [
+    ${pluginExpression},
+  ],
+}${hasSemicolon ? ";" : ""}
+`;
+  return next;
+}
+async function ensureTailwindConfig(deps, projectRoot, configuredFileName) {
+  if (!deps.includes("tailwindcss-animate")) {
+    return null;
+  }
+  const configPath = detectTailwindConfigPath(projectRoot, configuredFileName || "tailwind.config.js");
+  if (!fs3.existsSync(configPath)) {
+    const ext2 = path3.extname(configPath);
+    const isCjs2 = ext2 === ".cjs";
+    const configContent = isCjs2 ? `/** @type {import('tailwindcss').Config} */
+module.exports = {
   content: [
     "./src/**/*.{js,ts,jsx,tsx}",
+    "./app/**/*.{js,ts,jsx,tsx}",
     "./components/**/*.{js,ts,jsx,tsx}",
     "./pages/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {},
   },
-  plugins: [
-    require("tailwindcss-animate"),
+  plugins: [require("tailwindcss-animate")],
+}
+` : `import tailwindcssAnimate from "tailwindcss-animate"
+
+export default {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./app/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+    "./pages/**/*.{js,ts,jsx,tsx}",
   ],
-};`;
-    await fs2.writeFile(configPath, configContent);
-    return { created: true };
-  } else {
-    const configContent = await fs2.readFile(configPath, "utf-8");
-    if (!configContent.includes("tailwindcss-animate")) {
-      let updatedContent = configContent;
-      if (configContent.includes("plugins:")) {
-        updatedContent = configContent.replace(
-          /plugins:\s*\[([\s\S]*?)\]/,
-          (match, pluginsContent) => {
-            const cleanPlugins = pluginsContent.trim();
-            const newPlugin = 'require("tailwindcss-animate")';
-            if (cleanPlugins === "") {
-              return `plugins: [
-    ${newPlugin},
-  ]`;
-            } else {
-              return `plugins: [
-${pluginsContent},
-    ${newPlugin},
-  ]`;
-            }
-          }
-        );
-      } else {
-        updatedContent = configContent.replace(
-          /}\s*;?\s*$/,
-          '  plugins: [\n    require("tailwindcss-animate"),\n  ],\n};'
-        );
-      }
-      await fs2.writeFile(configPath, updatedContent);
-      return { updated: true };
-    }
+  theme: {
+    extend: {},
+  },
+  plugins: [tailwindcssAnimate],
+}
+`;
+    await fs3.ensureDir(path3.dirname(configPath));
+    await fs3.writeFile(configPath, configContent);
+    return { created: true, path: configPath };
+  }
+  const currentContent = await fs3.readFile(configPath, "utf-8");
+  if (currentContent.includes("tailwindcss-animate")) {
+    return { exists: true, path: configPath };
+  }
+  const ext = path3.extname(configPath);
+  const isCjs = ext === ".cjs" || /module\.exports\s*=/.test(currentContent);
+  const pluginExpression = isCjs ? 'require("tailwindcss-animate")' : "tailwindcssAnimate";
+  let updatedContent = currentContent;
+  if (!isCjs && !/from\s+['"]tailwindcss-animate['"]/.test(updatedContent)) {
+    updatedContent = `import tailwindcssAnimate from "tailwindcss-animate"
+${updatedContent}`;
   }
-  return { exists: true };
+  const merged = insertTailwindPlugin(updatedContent, pluginExpression);
+  if (!merged) {
+    return { skipped: true, path: configPath };
+  }
+  await fs3.writeFile(configPath, merged);
+  return { updated: true, path: configPath };
+}
+function escapeRegex(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
-async function handleIndexFile(sourcePath, targetPath, componentName, allFilesAdded, aliasPath) {
-  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") });
-  } else {
-    const existingContent = await fs2.readFile(targetPath, "utf-8");
-    const exportRegex = /export\s+\*\s+from\s+['"]\.\/([^'"]+)['"]/g;
-    const templateExports = [];
-    let match;
-    while ((match = exportRegex.exec(templateContent)) !== null) {
-      templateExports.push(match[1]);
+async function handleIndexFile(sourcePath, targetPath, allFilesAdded, targetDir) {
+  const templateContent = stripTemplateDirective(await fs3.readFile(sourcePath, "utf-8"));
+  if (!fs3.existsSync(targetPath)) {
+    await fs3.writeFile(targetPath, templateContent);
+    allFilesAdded.push({ name: "index.ts", path: path3.join(targetDir, "index.ts") });
+    return;
+  }
+  const existingContent = await fs3.readFile(targetPath, "utf-8");
+  const exportLines = templateContent.split("\n").map((line) => line.trim()).filter((line) => /^export\s+/.test(line) && /from\s+['"]\.\/[^'"]+['"]/.test(line));
+  const linesToAppend = [];
+  for (const line of exportLines) {
+    const match = line.match(/from\s+['"]\.\/([^'"]+)['"]/);
+    if (!match) {
+      continue;
     }
-    const componentExportExists = existingContent.includes(`export * from './${componentName}'`);
-    if (!componentExportExists && templateExports.includes(componentName)) {
-      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") });
+    const modulePath = match[1];
+    const modulePathPattern = new RegExp(`from\\s+['"]\\./${escapeRegex(modulePath)}['"]`);
+    if (modulePathPattern.test(existingContent)) {
+      continue;
     }
+    linesToAppend.push(line.endsWith(";") ? line : `${line};`);
   }
+  if (linesToAppend.length === 0) {
+    return;
+  }
+  const updatedContent = `${existingContent.trimEnd()}
+${linesToAppend.join("\n")}
+`;
+  await fs3.writeFile(targetPath, updatedContent);
+  allFilesAdded.push({ name: "index.ts", path: path3.join(targetDir, "index.ts") });
 }
-var addCommand = new Command("add").description("Add a component to your project").argument("[component]", "Name of the component (optional when using --all)").option("-y, --yes", "Skip confirmation prompts").option("-o, --overwrite", "Overwrite existing files").option("-a, --all", "Install all available components").action(async (componentName, options) => {
-  const spinner = ora("Adding component...").start();
-  try {
-    const config = await getConfig();
-    if (!config) {
-      spinner.fail("\u274C No components.json found. Run `dinachi init` first.");
-      process.exit(1);
-    }
-    const registry = getComponentRegistry();
-    let componentsToInstall = [];
-    if (options.all) {
-      const allComponents = Object.keys(registry);
-      spinner.text = `Installing all ${allComponents.length} components...`;
-      const allComponentsWithDeps = /* @__PURE__ */ new Set();
-      for (const name of allComponents) {
-        allComponentsWithDeps.add(name);
-        const deps = getComponentDependencies(name);
-        deps.forEach((dep) => allComponentsWithDeps.add(dep));
-      }
-      componentsToInstall = Array.from(allComponentsWithDeps);
-    } else {
-      if (!componentName) {
-        spinner.fail("\u274C Component name is required when not using --all flag.");
-        console.log("Available components:");
-        Object.keys(registry).forEach((name) => {
-          console.log(`  ${chalk.cyan(name)}`);
-        });
+var addCommand = new Command("add").description("Add a component to your project").argument("[component]", "Name of the component (optional when using --all)").option("-y, --yes", "Skip confirmation prompts").option("-o, --overwrite", "Overwrite existing files").option("-a, --all", "Install all available components").option("--skip-install", "Skip package installation").action(
+  async (componentName, options) => {
+    const spinner = ora("Adding component...").start();
+    try {
+      const config = await getConfig();
+      if (!config) {
+        spinner.fail("\u274C No components.json found. Run `dinachi init` first.");
         process.exit(1);
       }
-      const component = registry[componentName];
-      if (!component) {
-        spinner.fail(`\u274C Component "${componentName}" not found.`);
-        console.log("Available components:");
-        Object.keys(registry).forEach((name) => {
-          console.log(`  ${chalk.cyan(name)}`);
-        });
-        process.exit(1);
+      const projectRoot = process.cwd();
+      const compilerPathConfig = readCompilerPathConfig(projectRoot);
+      const registry = getComponentRegistry();
+      let componentsToInstall = [];
+      if (options.all) {
+        const allComponents = Object.keys(registry);
+        spinner.text = `Installing all ${allComponents.length} components...`;
+        const allComponentsWithDeps = /* @__PURE__ */ new Set();
+        for (const name of allComponents) {
+          allComponentsWithDeps.add(name);
+          const deps = getComponentDependencies(name);
+          deps.forEach((dep) => allComponentsWithDeps.add(dep));
+        }
+        componentsToInstall = Array.from(allComponentsWithDeps);
+      } else {
+        if (!componentName) {
+          spinner.fail("\u274C Component name is required when not using --all flag.");
+          console.log("Available components:");
+          Object.keys(registry).forEach((name) => {
+            console.log(`  ${chalk.cyan(name)}`);
+          });
+          process.exit(1);
+        }
+        const component = registry[componentName];
+        if (!component) {
+          spinner.fail(`\u274C Component "${componentName}" not found.`);
+          console.log("Available components:");
+          Object.keys(registry).forEach((name) => {
+            console.log(`  ${chalk.cyan(name)}`);
+          });
+          process.exit(1);
+        }
+        componentsToInstall = [componentName, ...getComponentDependencies(componentName)];
       }
-      componentsToInstall = [componentName, ...getComponentDependencies(componentName)];
-    }
-    if (!options.all) {
-      spinner.text = `Installing ${componentsToInstall.join(", ")}...`;
-    }
-    const componentDir = resolveAliasPath(config.aliases.ui, process.cwd());
-    await fs2.ensureDir(componentDir);
-    let allFilesAdded = [];
-    let allDepsInstalled = [];
-    let allUtilityDeps = [];
-    for (const name of componentsToInstall) {
-      const comp = registry[name];
-      if (!comp) continue;
-      if (comp.utilityDependencies?.length) {
-        allUtilityDeps.push(...comp.utilityDependencies);
+      if (!options.all) {
+        spinner.text = `Installing ${componentsToInstall.join(", ")}...`;
       }
-    }
-    const utilityRegistry = getUtilityRegistry();
-    const uniqueUtilityDeps = [...new Set(allUtilityDeps)];
-    const utilsDir = resolveAliasPath(config.aliases.lib, process.cwd());
-    if (uniqueUtilityDeps.length > 0) {
-      await fs2.ensureDir(utilsDir);
-      for (const utilityName of uniqueUtilityDeps) {
-        const utility = utilityRegistry[utilityName];
-        if (!utility) continue;
-        const utilityFilename = `${utility.name}.ts`;
-        const sourcePath = path2.join(__dirname2, "../templates/utils", utilityFilename);
-        const targetPath = path2.join(utilsDir, utilityFilename);
-        if (!fs2.existsSync(targetPath)) {
-          let content = await fs2.readFile(sourcePath, "utf-8");
-          content = content.replace(/^\/\/ @ts-nocheck\s*\n/m, "");
-          await fs2.writeFile(targetPath, content);
-          allFilesAdded.push({
-            name: utilityFilename,
-            path: path2.join(config.aliases.lib, utilityFilename)
-          });
+      const componentDir = resolveConfiguredPath(config.aliases.ui, projectRoot, compilerPathConfig);
+      const libDir = resolveConfiguredPath(config.aliases.lib, projectRoot, compilerPathConfig);
+      const utilsFilePath = resolveConfiguredPath(config.aliases.utils, projectRoot, compilerPathConfig);
+      await fs3.ensureDir(componentDir);
+      await fs3.ensureDir(libDir);
+      const allFilesAdded = [];
+      const allDepsInstalled = [];
+      const allUtilityDeps = [];
+      for (const name of componentsToInstall) {
+        const comp = registry[name];
+        if (!comp) continue;
+        if (comp.utilityDependencies?.length) {
+          allUtilityDeps.push(...comp.utilityDependencies);
+        }
+      }
+      const utilityRegistry = getUtilityRegistry();
+      const uniqueUtilityDeps = [...new Set(allUtilityDeps)];
+      if (uniqueUtilityDeps.length > 0) {
+        for (const utilityName of uniqueUtilityDeps) {
+          const utility = utilityRegistry[utilityName];
+          if (!utility) continue;
+          const utilityFilename = `${utility.name}.ts`;
+          const sourcePath = path3.join(__dirname2, "../templates/utils", utilityFilename);
+          const targetPath = path3.join(libDir, utilityFilename);
+          if (!fs3.existsSync(targetPath)) {
+            const content = stripTemplateDirective(await fs3.readFile(sourcePath, "utf-8"));
+            await fs3.writeFile(targetPath, content);
+            allFilesAdded.push({
+              name: utilityFilename,
+              path: targetPath
+            });
+          }
           if (utility.dependencies?.length) {
             allDepsInstalled.push(...utility.dependencies);
           }
         }
       }
-    }
-    for (const name of componentsToInstall) {
-      const comp = registry[name];
-      if (!comp) continue;
-      for (const file of comp.files) {
-        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);
-        } else {
-          if (fs2.existsSync(targetPath) && !options.overwrite) {
+      for (const name of componentsToInstall) {
+        const comp = registry[name];
+        if (!comp) continue;
+        for (const file of comp.files) {
+          const sourcePath = path3.join(__dirname2, "../templates", name, file.name);
+          const targetPath = path3.join(componentDir, file.name);
+          if (file.name === "index.ts") {
+            await handleIndexFile(sourcePath, targetPath, allFilesAdded, componentDir);
+            continue;
+          }
+          if (fs3.existsSync(targetPath) && !options.overwrite) {
             spinner.warn(`\u26A0\uFE0F  ${file.name} already exists. Use --overwrite to replace it.`);
             continue;
           }
-          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) });
+          const templateContent = stripTemplateDirective(await fs3.readFile(sourcePath, "utf-8"));
+          const rewrittenContent = rewriteTemplateImports(templateContent, targetPath, utilsFilePath, libDir);
+          await fs3.writeFile(targetPath, rewrittenContent);
+          allFilesAdded.push({ name: file.name, path: targetPath });
+        }
+        if (comp.dependencies?.length) {
+          allDepsInstalled.push(...comp.dependencies);
         }
       }
-      if (comp.dependencies?.length) {
-        allDepsInstalled.push(...comp.dependencies);
-      }
-    }
-    let tailwindConfigInfo = null;
-    if (allDepsInstalled.includes("tailwindcss-animate")) {
       spinner.text = "Updating Tailwind configuration...";
-      tailwindConfigInfo = await ensureTailwindConfig(allDepsInstalled);
-    }
-    const packageJsonPath = path2.join(process.cwd(), "package.json");
-    const packageJson = JSON.parse(await fs2.readFile(packageJsonPath, "utf-8"));
-    const allDeps = { ...packageJson.dependencies, ...packageJson.devDependencies };
-    const missingDeps = [...new Set(allDepsInstalled)].filter((dep) => !allDeps[dep]);
-    if (allDepsInstalled.length > 0) {
-      spinner.text = "Installing dependencies...";
-      if (missingDeps.length > 0) {
+      const tailwindConfigInfo = await ensureTailwindConfig(
+        allDepsInstalled,
+        projectRoot,
+        config.tailwind?.config || "tailwind.config.js"
+      );
+      const packageJsonPath = path3.join(projectRoot, "package.json");
+      if (!fs3.existsSync(packageJsonPath)) {
+        throw new Error("No package.json found in the current directory.");
+      }
+      const packageJson = JSON.parse(await fs3.readFile(packageJsonPath, "utf-8"));
+      const declaredDeps = { ...packageJson.dependencies ?? {}, ...packageJson.devDependencies ?? {} };
+      const uniqueDeps = [...new Set(allDepsInstalled)];
+      const missingDeps = uniqueDeps.filter((dep) => !declaredDeps[dep]);
+      if (!options.skipInstall && missingDeps.length > 0) {
+        spinner.text = "Installing dependencies...";
         try {
-          const packageManager = getPackageManager();
-          const installCmd = `${packageManager} ${packageManager === "npm" ? "install" : "add"} ${missingDeps.join(" ")}`;
-          execSync(installCmd, { stdio: "inherit" });
-        } catch (error) {
+          const packageManager = detectPackageManager(projectRoot);
+          const installCmd = getInstallCommand(packageManager, missingDeps.map(toInstallSpec));
+          execSync(installCmd, { stdio: "inherit", cwd: projectRoot });
+        } catch {
           spinner.warn(`\u26A0\uFE0F  Failed to install dependencies. Please install manually: ${missingDeps.join(" ")}`);
         }
-      } else {
+      } else if (!options.skipInstall && uniqueDeps.length > 0) {
         spinner.text = "All dependencies already installed.";
       }
-    }
-    if (options.all) {
-      spinner.succeed(`\u2705 Added all ${componentsToInstall.length} components!`);
-    } else {
-      spinner.succeed(`\u2705 Added ${componentsToInstall.join(", ")} component(s)!`);
-    }
-    console.log();
-    console.log("Files added:");
-    allFilesAdded.forEach((file) => {
-      console.log(`  ${chalk.green("+")} ${file.path}`);
-    });
-    if (tailwindConfigInfo) {
-      console.log();
-      if (tailwindConfigInfo.created) {
-        console.log(`  ${chalk.green("+")} tailwind.config.js (created with tailwindcss-animate plugin)`);
-      } else if (tailwindConfigInfo.updated) {
-        console.log(`  ${chalk.blue("~")} tailwind.config.js (updated with tailwindcss-animate plugin)`);
+      if (options.all) {
+        spinner.succeed(`\u2705 Added all ${componentsToInstall.length} components!`);
+      } else {
+        spinner.succeed(`\u2705 Added ${componentsToInstall.join(", ")}!`);
       }
-    }
-    if (missingDeps.length > 0) {
-      console.log();
-      console.log("Dependencies installed:");
-      missingDeps.forEach((dep) => {
-        console.log(`  ${chalk.green("\u2713")} ${dep}`);
-      });
-    } else if (allDepsInstalled.length > 0) {
       console.log();
-      console.log("Dependencies (already installed):");
-      [...new Set(allDepsInstalled)].forEach((dep) => {
-        console.log(`  ${chalk.blue("~")} ${dep}`);
+      console.log("Files added:");
+      allFilesAdded.forEach((file) => {
+        console.log(`  ${chalk.green("+")} ${file.path}`);
       });
+      if (tailwindConfigInfo) {
+        console.log();
+        if (tailwindConfigInfo.created) {
+          console.log(`  ${chalk.green("+")} ${tailwindConfigInfo.path} (created with tailwindcss-animate plugin)`);
+        } else if (tailwindConfigInfo.updated) {
+          console.log(`  ${chalk.blue("~")} ${tailwindConfigInfo.path} (updated with tailwindcss-animate plugin)`);
+        } else if (tailwindConfigInfo.skipped) {
+          console.log(
+            `  ${chalk.yellow("!")} ${tailwindConfigInfo.path} (could not safely update automatically; add tailwindcss-animate manually)`
+          );
+        }
+      }
+      if (options.skipInstall && missingDeps.length > 0) {
+        console.log();
+        console.log("Dependencies to install manually:");
+        missingDeps.forEach((dep) => {
+          console.log(`  ${chalk.yellow("\u2022")} ${toInstallSpec(dep)}`);
+        });
+      } else if (missingDeps.length > 0) {
+        console.log();
+        console.log("Dependencies installed:");
+        missingDeps.forEach((dep) => {
+          console.log(`  ${chalk.green("\u2713")} ${toInstallSpec(dep)}`);
+        });
+      } else if (uniqueDeps.length > 0) {
+        console.log();
+        console.log("Dependencies (already installed):");
+        uniqueDeps.forEach((dep) => {
+          console.log(`  ${chalk.blue("~")} ${dep}`);
+        });
+      }
+    } catch (error) {
+      spinner.fail(`\u274C Failed to add component: ${error instanceof Error ? error.message : error}`);
+      process.exit(1);
     }
-  } catch (error) {
-    spinner.fail(`\u274C Failed to add component: ${error instanceof Error ? error.message : error}`);
-    process.exit(1);
   }
-});
-function getPackageManager() {
-  if (fs2.existsSync("pnpm-lock.yaml")) return "pnpm";
-  if (fs2.existsSync("yarn.lock")) return "yarn";
-  return "npm";
-}
+);
 
 // src/commands/init.ts
 import { Command as Command2 } from "commander";
 import { execSync as execSync2 } from "child_process";
-import fs3 from "fs-extra";
-import path3 from "path";
+import fs4 from "fs-extra";
+import path4 from "path";
 import prompts from "prompts";
 import chalk2 from "chalk";
 import ora2 from "ora";
-var initCommand = new Command2("init").description("Initialize Dinachi UI in your project").action(async () => {
+function normalizeProjectPath(inputPath, projectRoot) {
+  const absolutePath = path4.isAbsolute(inputPath) ? path4.normalize(inputPath) : path4.resolve(projectRoot, inputPath);
+  const relativePath = path4.relative(projectRoot, absolutePath).replace(/\\/g, "/");
+  const withoutPrefix = relativePath.replace(/^\.\//, "").replace(/\/$/, "");
+  return withoutPrefix.length > 0 ? withoutPrefix : ".";
+}
+function toConfigPath(relativePath) {
+  return relativePath === "." ? "." : `./${relativePath.replace(/\\/g, "/")}`;
+}
+function createUtilsFileContent() {
+  return `import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+`;
+}
+function readJsonConfig(filePath) {
+  try {
+    const content = fs4.readFileSync(filePath, "utf-8");
+    return parseJsonWithComments(content);
+  } catch {
+    return null;
+  }
+}
+async function ensureAtAlias(projectRoot, srcDir, isTypeScript) {
+  const tsConfigPath = path4.join(projectRoot, "tsconfig.json");
+  const jsConfigPath = path4.join(projectRoot, "jsconfig.json");
+  const configPath = fs4.existsSync(tsConfigPath) ? tsConfigPath : fs4.existsSync(jsConfigPath) ? jsConfigPath : path4.join(projectRoot, isTypeScript ? "tsconfig.json" : "jsconfig.json");
+  const existedBefore = fs4.existsSync(configPath);
+  const parsedConfig = readJsonConfig(configPath);
+  if (existedBefore && !parsedConfig) {
+    return { path: configPath, skipped: true };
+  }
+  const parsed = parsedConfig ?? {};
+  const compilerOptions = parsed.compilerOptions ?? {};
+  const rawPaths = compilerOptions.paths ?? {};
+  const paths = {};
+  for (const [key, value] of Object.entries(rawPaths)) {
+    if (!Array.isArray(value)) {
+      continue;
+    }
+    const targets = value.filter((entry) => typeof entry === "string");
+    if (targets.length > 0) {
+      paths[key] = targets;
+    }
+  }
+  const aliasTarget = srcDir === "." ? "*" : `${srcDir}/*`;
+  const alreadyConfigured = compilerOptions.baseUrl === "." && Array.isArray(paths["@/*"]) && paths["@/*"][0] === aliasTarget;
+  if (alreadyConfigured) {
+    return { path: configPath };
+  }
+  const nextConfig = {
+    ...parsed,
+    compilerOptions: {
+      ...compilerOptions,
+      baseUrl: ".",
+      paths: {
+        ...paths,
+        "@/*": [aliasTarget]
+      }
+    }
+  };
+  try {
+    await fs4.writeFile(configPath, `${JSON.stringify(nextConfig, null, 2)}
+`);
+    return { path: configPath, [existedBefore ? "updated" : "created"]: true };
+  } catch {
+    return { path: configPath, skipped: true };
+  }
+}
+var initCommand = new Command2("init").description("Initialize Dinachi UI in your project").option("--skip-install", "Skip package installation").action(async (options) => {
   console.log(chalk2.bold.cyan("\u{1F3A8} Welcome to Dinachi UI!"));
   console.log();
-  const packageJsonPath = path3.join(process.cwd(), "package.json");
-  if (!fs3.existsSync(packageJsonPath)) {
+  const projectRoot = process.cwd();
+  const packageJsonPath = path4.join(projectRoot, "package.json");
+  if (!fs4.existsSync(packageJsonPath)) {
     console.log(chalk2.red("\u274C No package.json found. Please run this command in a valid project."));
     process.exit(1);
   }
@@ -651,12 +1024,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,65 +1032,91 @@ 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 utilsContent = `import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-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" });
-    }
-    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"
-}`;
-    await fs3.writeFile("components.json", configContent);
+    const normalizedComponentsPath = normalizeProjectPath(response.componentsPath, projectRoot);
+    const normalizedUtilsPath = normalizeProjectPath(response.utilsPath, projectRoot);
+    const componentsDirPath = path4.resolve(projectRoot, normalizedComponentsPath);
+    const utilsDirPath = path4.resolve(projectRoot, normalizedUtilsPath);
+    const utilsFilePath = path4.join(utilsDirPath, "utils.ts");
+    await fs4.ensureDir(componentsDirPath);
+    await fs4.ensureDir(utilsDirPath);
+    const utilsContent = createUtilsFileContent();
+    await fs4.writeFile(utilsFilePath, utilsContent);
+    spinner.text = "Installing dependencies...";
+    const deps = ["class-variance-authority", "clsx", "tailwind-merge"];
+    if (!options.skipInstall) {
+      const packageManager = detectPackageManager(projectRoot);
+      const installCmd = getInstallCommand(packageManager, deps.map(toInstallSpec));
+      execSync2(installCmd, { stdio: "inherit", cwd: projectRoot });
+    }
+    const hooksPath = projectConfig.srcDir === "." ? "hooks" : path4.join(projectConfig.srcDir, "hooks").replace(/\\/g, "/");
+    const configContent = JSON.stringify(
+      {
+        style: "default",
+        rsc: projectConfig.framework === "next.js",
+        tsx: true,
+        tailwind: {
+          config: projectConfig.tailwindConfig,
+          css: projectConfig.cssPath,
+          baseColor: "slate",
+          cssVariables: true
+        },
+        aliases: {
+          components: toConfigPath(path4.dirname(normalizedComponentsPath)),
+          utils: toConfigPath(path4.join(normalizedUtilsPath, "utils")),
+          ui: toConfigPath(normalizedComponentsPath),
+          lib: toConfigPath(normalizedUtilsPath),
+          hooks: toConfigPath(hooksPath)
+        },
+        iconLibrary: "lucide"
+      },
+      null,
+      2
+    );
+    await fs4.writeFile(path4.join(projectRoot, "components.json"), `${configContent}
+`);
+    const aliasConfigUpdate = await ensureAtAlias(projectRoot, projectConfig.srcDir, projectConfig.isTypeScript);
     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(componentsDirPath)}`);
+    console.log(`  3. Utils available at: ${chalk2.cyan(utilsFilePath)}`);
+    console.log();
+    if (aliasConfigUpdate.created) {
+      console.log(`  ${chalk2.green("+")} Added @/* path alias in ${aliasConfigUpdate.path}`);
+    } else if (aliasConfigUpdate.updated) {
+      console.log(`  ${chalk2.blue("~")} Updated @/* path alias in ${aliasConfigUpdate.path}`);
+    } else if (aliasConfigUpdate.skipped) {
+      console.log(
+        `  ${chalk2.yellow("!")} Could not update ${aliasConfigUpdate.path}. Configure @/* manually if you use alias imports.`
+      );
+    }
+    if (!projectConfig.isTypeScript) {
+      console.log();
+      console.log(
+        chalk2.yellow(
+          "\u26A0\uFE0F  Dinachi components are TypeScript-first. Your project can still consume TSX files, but type-check tooling is recommended."
+        )
+      );
+    }
     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("  - RSC (React Server Components) enabled in config");
+      console.log('  - Add "use client" for interactive components where needed');
+      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 directory: ${chalk2.cyan(componentsDirPath)}`);
+      console.log(`  - Utilities directory: ${chalk2.cyan(utilsDirPath)}`);
+    }
+    if (options.skipInstall) {
+      console.log();
+      console.log("Dependencies to install manually:");
+      deps.forEach((dep) => {
+        console.log(`  ${chalk2.yellow("\u2022")} ${toInstallSpec(dep)}`);
+      });
     }
     console.log();
     console.log("\u{1F4A1} Tip: Install globally for shorter commands:");
@@ -734,43 +1127,61 @@ export function cn(...inputs: ClassValue[]) {
     process.exit(1);
   }
 });
-function getPackageManager2() {
-  if (fs3.existsSync("pnpm-lock.yaml")) return "pnpm";
-  if (fs3.existsSync("yarn.lock")) return "yarn";
-  return "npm";
-}
 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"
-    };
+  const packageJsonPath = path4.join(process.cwd(), "package.json");
+  if (!fs4.existsSync(packageJsonPath)) {
+    return getDefaultConfig("react", false);
   }
-  const packageJson = JSON.parse(fs3.readFileSync(packageJsonPath, "utf-8"));
-  const deps = { ...packageJson.dependencies, ...packageJson.devDependencies };
+  const packageJson = JSON.parse(fs4.readFileSync(packageJsonPath, "utf-8"));
+  const deps = { ...packageJson.dependencies ?? {}, ...packageJson.devDependencies ?? {} };
+  const hasSrcDir = fs4.existsSync(path4.join(process.cwd(), "src"));
+  const hasAppDir = fs4.existsSync(path4.join(process.cwd(), "app"));
+  const hasSrcAppDir = fs4.existsSync(path4.join(process.cwd(), "src", "app"));
+  const isTypeScript = fs4.existsSync(path4.join(process.cwd(), "tsconfig.json")) || fs4.existsSync(path4.join(process.cwd(), "tsconfig.base.json")) || Boolean(deps.typescript);
+  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",
+        isTypeScript
+      };
+    }
+    if (hasAppDir && !hasSrcDir) {
+      return {
+        framework: "next.js",
+        componentsPath: "./components/ui",
+        utilsPath: "./lib",
+        tailwindConfig,
+        cssPath,
+        srcDir: ".",
+        isTypeScript
+      };
+    }
     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" : ".",
+      isTypeScript
     };
   }
   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" : ".",
+      isTypeScript
     };
   }
   if (deps["react-scripts"]) {
@@ -778,9 +1189,10 @@ function detectProjectType() {
       framework: "create-react-app",
       componentsPath: "./src/components/ui",
       utilsPath: "./src/lib",
-      tailwindConfig: "tailwind.config.js",
-      cssPath: "src/index.css",
-      srcDir: "src"
+      tailwindConfig,
+      cssPath,
+      srcDir: "src",
+      isTypeScript
     };
   }
   if (deps["@remix-run/react"]) {
@@ -788,23 +1200,81 @@ function detectProjectType() {
       framework: "remix",
       componentsPath: "./app/components/ui",
       utilsPath: "./app/lib",
-      tailwindConfig: "tailwind.config.ts",
-      cssPath: "app/tailwind.css",
-      srcDir: "app"
+      tailwindConfig,
+      cssPath: detectCssPath(false, false, true),
+      srcDir: "app",
+      isTypeScript
     };
   }
+  return getDefaultConfig("react", hasSrcDir);
+}
+function getDefaultConfig(framework, hasSrcDir) {
+  const isTypeScript = fs4.existsSync(path4.join(process.cwd(), "tsconfig.json")) || fs4.existsSync(path4.join(process.cwd(), "tsconfig.base.json"));
   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" : ".",
+    isTypeScript
   };
 }
+function detectTailwindConfig() {
+  const configCandidates = [
+    "tailwind.config.ts",
+    "tailwind.config.js",
+    "tailwind.config.mjs",
+    "tailwind.config.cjs",
+    "tailwind.config.cts",
+    "tailwind.config.mts"
+  ];
+  for (const config of configCandidates) {
+    if (fs4.existsSync(path4.join(process.cwd(), config))) {
+      return config;
+    }
+  }
+  return "tailwind.config.js";
+}
+function detectCssPath(hasSrcDir, hasSrcAppDir, isRemix = false) {
+  const cwd = process.cwd();
+  const possiblePaths = [
+    "app/globals.css",
+    "src/app/globals.css",
+    "styles/globals.css",
+    "src/styles/globals.css",
+    "src/index.css",
+    "index.css",
+    "app/tailwind.css",
+    "app/styles/tailwind.css"
+  ];
+  for (const cssPath of possiblePaths) {
+    if (fs4.existsSync(path4.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 "index.css";
+}
 
 // src/index.ts
+import fs5 from "fs";
+import path5 from "path";
+import { fileURLToPath as fileURLToPath3 } from "url";
 var program = new Command3();
-program.name("dinachi").description("Add Dinachi UI components to your project").version("0.1.0");
+var __filename3 = fileURLToPath3(import.meta.url);
+var __dirname3 = path5.dirname(__filename3);
+function getCliVersion() {
+  try {
+    const packageJsonPath = path5.resolve(__dirname3, "../package.json");
+    const packageJson = JSON.parse(fs5.readFileSync(packageJsonPath, "utf-8"));
+    return packageJson.version ?? "0.0.0";
+  } catch {
+    return "0.0.0";
+  }
+}
+program.name("dinachi").description("Add Dinachi UI components to your project").version(getCliVersion());
 program.addCommand(addCommand).addCommand(initCommand);
 program.parse();