@dinachi/cli 0.5.0 → 0.6.0

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,6 +18,48 @@ 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: {
@@ -60,14 +102,27 @@ function getComponentRegistry() {
       dependencies: ["@base-ui/react", "class-variance-authority"],
       utilityDependencies: ["cn"]
     },
+    badge: {
+      name: "badge",
+      description: "A small status indicator for highlighting information.",
+      files: [{ name: "badge.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"]
     },
+    card: {
+      name: "card",
+      description: "A container for grouping related content with header, body, and footer sections.",
+      files: [{ name: "card.tsx" }, { name: "index.ts" }],
+      dependencies: [],
+      utilityDependencies: ["cn"]
+    },
     checkbox: {
       name: "checkbox",
       description: "A control that allows the user to select one or more options from a set.",
@@ -251,6 +306,13 @@ function getComponentRegistry() {
       dependencies: ["@base-ui/react"],
       utilityDependencies: ["cn"]
     },
+    textarea: {
+      name: "textarea",
+      description: "A multi-line text input for longer form content.",
+      files: [{ name: "textarea.tsx" }, { name: "index.ts" }],
+      dependencies: [],
+      utilityDependencies: ["cn"]
+    },
     toast: {
       name: "toast",
       description: "Generates toast notifications with support for different types, promises, actions, and global management.",
@@ -295,46 +357,327 @@ 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(/^@\//, "").replace(/^\.\//, "");
-  return path2.join(projectRoot, cleanPath);
+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 null;
+}
+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 getComponentDependencies(componentName) {
+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, configFileName) {
-  const needsAnimatePlugin = deps.includes("tailwindcss-animate");
-  if (!needsAnimatePlugin) return;
-  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;
-      }
+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;
     }
   }
-  if (!fs2.existsSync(configPath)) {
-    const configContent = `/** @type {import('tailwindcss').Config} */
-export default {
+  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}",
@@ -344,265 +687,615 @@ export default {
   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);
+  theme: {
+    extend: {},
+  },
+  plugins: [tailwindcssAnimate],
+}
+`;
+    await fs3.ensureDir(path3.dirname(configPath));
+    await fs3.writeFile(configPath, configContent);
     return { created: true, path: configPath };
-  } 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, path: configPath };
-    }
   }
-  return { exists: 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}`;
+  }
+  const merged = insertTailwindPlugin(updatedContent, pluginExpression);
+  if (!merged) {
+    return { skipped: true, path: configPath };
+  }
+  await fs3.writeFile(configPath, merged);
+  return { updated: true, path: configPath };
 }
-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(targetDir, "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]);
+function escapeRegex(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+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(targetDir, "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(utilsDir, 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, componentDir);
-        } 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(componentDir, 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...";
-      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"));
-    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 = getInstallCommand(packageManager, missingDeps);
-          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(", ")}!`);
-    }
-    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("+")} ${tailwindConfigInfo.path} (created with tailwindcss-animate plugin)`);
-      } else if (tailwindConfigInfo.updated) {
-        console.log(`  ${chalk.blue("~")} ${tailwindConfigInfo.path} (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("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";
 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 detectTailwindMajorVersion(projectRoot) {
+  const packageJsonPath = path4.join(projectRoot, "package.json");
+  if (!fs4.existsSync(packageJsonPath)) return 4;
+  try {
+    const raw = fs4.readFileSync(packageJsonPath, "utf-8");
+    const packageJson = JSON.parse(raw);
+    const deps = { ...packageJson.dependencies ?? {}, ...packageJson.devDependencies ?? {} };
+    const twVersion = deps.tailwindcss;
+    if (!twVersion) return 4;
+    const match = twVersion.match(/(\d+)/);
+    return match ? parseInt(match[1], 10) : 4;
+  } catch {
+    return 4;
+  }
+}
+function getThemeCSS(tailwindMajor, mode) {
+  const lightVars = `:root {
+  --background: oklch(0.986 0.0034 145.5499);
+  --foreground: oklch(0.1459 0.0497 142.4953);
+  --card: oklch(0.9781 0.0017 145.5621);
+  --card-foreground: oklch(0.1459 0.0497 142.4953);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.1324 0.0033 145.3864);
+  --primary: oklch(0.1324 0.0033 145.3864);
+  --primary-foreground: oklch(0.9729 0.0101 145.4971);
+  --secondary: oklch(0.9248 0.0051 145.5339);
+  --secondary-foreground: oklch(0.1324 0.0033 145.3864);
+  --muted: oklch(0.9631 0.0017 145.5619);
+  --muted-foreground: oklch(0.1849 0.0629 142.4953);
+  --accent: oklch(0.9248 0.0051 145.5339);
+  --accent-foreground: oklch(0.1459 0.0497 142.4953);
+  --destructive: oklch(0.5248 0.1368 20.8317);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.9239 0.0017 145.5613);
+  --input: oklch(0.8481 0.0105 145.4823);
+  --ring: oklch(0.1459 0.0497 142.4953);
+  --radius: 0.625rem;
+}`;
+  const darkVars = `.dark {
+  --background: oklch(0.1149 0 0);
+  --foreground: oklch(0.7999 0.0218 134.1191);
+  --card: oklch(0.133 0.0021 196.9098);
+  --card-foreground: oklch(0.7996 0.023 132.5769);
+  --popover: oklch(0.1663 0.0138 135.2766);
+  --popover-foreground: oklch(0.9742 0.0101 131.3574);
+  --primary: oklch(0.9729 0.0101 145.4971);
+  --primary-foreground: oklch(0.1324 0.0033 145.3864);
+  --secondary: oklch(0.1844 0.0062 122.0354);
+  --secondary-foreground: oklch(0.8009 0.0399 133.2927);
+  --muted: oklch(0.1579 0.0017 196.9874);
+  --muted-foreground: oklch(0.7897 0.0171 133.8518);
+  --accent: oklch(0.1391 0.0113 136.9894);
+  --accent-foreground: oklch(0.9742 0.0101 131.3574);
+  --destructive: oklch(0.2258 0.0524 12.6119);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.1811 0.0128 129.2819);
+  --input: oklch(0.2213 0.0193 135.2915);
+  --ring: oklch(0.9248 0.0051 145.5339);
+}`;
+  const parts = [];
+  if (tailwindMajor >= 4) {
+    if (mode === "full") {
+      parts.push('@import "tailwindcss";');
+    }
+    parts.push(lightVars, darkVars);
+    parts.push(`@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}`);
+    parts.push(`@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}`);
+  } else {
+    if (mode === "full") {
+      parts.push("@tailwind base;\n@tailwind components;\n@tailwind utilities;");
+    }
+    parts.push(lightVars, darkVars);
+    parts.push(`@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}`);
+  }
+  return parts.join("\n\n") + "\n";
+}
+async function injectThemeCSS(cssFilePath, tailwindMajor) {
+  await fs4.ensureDir(path4.dirname(cssFilePath));
+  if (fs4.existsSync(cssFilePath)) {
+    const existing = await fs4.readFile(cssFilePath, "utf-8");
+    if (existing.includes("--primary:")) {
+      return { path: cssFilePath, skipped: true };
+    }
+    const theme2 = getThemeCSS(tailwindMajor, "append");
+    await fs4.writeFile(cssFilePath, existing.trimEnd() + "\n\n" + theme2);
+    return { path: cssFilePath, updated: true };
+  }
+  const theme = getThemeCSS(tailwindMajor, "full");
+  await fs4.writeFile(cssFilePath, theme);
+  return { path: cssFilePath, created: true };
+}
+function getTW3ColorExtend() {
+  return `colors: {
+        border: "var(--border)",
+        input: "var(--input)",
+        ring: "var(--ring)",
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+        primary: {
+          DEFAULT: "var(--primary)",
+          foreground: "var(--primary-foreground)",
+        },
+        secondary: {
+          DEFAULT: "var(--secondary)",
+          foreground: "var(--secondary-foreground)",
+        },
+        destructive: {
+          DEFAULT: "var(--destructive)",
+          foreground: "var(--destructive-foreground)",
+        },
+        muted: {
+          DEFAULT: "var(--muted)",
+          foreground: "var(--muted-foreground)",
+        },
+        accent: {
+          DEFAULT: "var(--accent)",
+          foreground: "var(--accent-foreground)",
+        },
+        popover: {
+          DEFAULT: "var(--popover)",
+          foreground: "var(--popover-foreground)",
+        },
+        card: {
+          DEFAULT: "var(--card)",
+          foreground: "var(--card-foreground)",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },`;
+}
+function createTW3Config(isCjs) {
+  const colorExtend = getTW3ColorExtend();
+  if (isCjs) {
+    return `/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./app/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      ${colorExtend}
+    },
+  },
+  plugins: [],
+}
+`;
+  }
+  return `/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./app/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      ${colorExtend}
+    },
+  },
+  plugins: [],
+}
+`;
+}
+async function ensureTW3ColorConfig(projectRoot, configFileName) {
+  const candidates = [
+    configFileName,
+    "tailwind.config.ts",
+    "tailwind.config.js",
+    "tailwind.config.mjs",
+    "tailwind.config.cjs"
+  ];
+  let configPath = null;
+  for (const candidate of candidates) {
+    const candidatePath = path4.join(projectRoot, candidate);
+    if (fs4.existsSync(candidatePath)) {
+      configPath = candidatePath;
+      break;
+    }
+  }
+  if (!configPath) {
+    configPath = path4.join(projectRoot, configFileName);
+    const ext = path4.extname(configPath);
+    const isCjs = ext === ".cjs";
+    await fs4.writeFile(configPath, createTW3Config(isCjs));
+    return { path: configPath, created: true };
+  }
+  const content = await fs4.readFile(configPath, "utf-8");
+  if (content.includes('"var(--primary)"') || content.includes("'var(--primary)'")) {
+    return { path: configPath, skipped: true };
+  }
+  const colorExtend = getTW3ColorExtend();
+  const extendMatch = content.match(/extend\s*:\s*\{/);
+  if (extendMatch && extendMatch.index !== void 0) {
+    const insertPos = extendMatch.index + extendMatch[0].length;
+    const updated = content.slice(0, insertPos) + "\n      " + colorExtend + content.slice(insertPos);
+    await fs4.writeFile(configPath, updated);
+    return { path: configPath, updated: true };
+  }
+  const themeMatch = content.match(/theme\s*:\s*\{/);
+  if (themeMatch && themeMatch.index !== void 0) {
+    const insertPos = themeMatch.index + themeMatch[0].length;
+    const extendBlock = `
+    extend: {
+      ${colorExtend}
+    },`;
+    const updated = content.slice(0, insertPos) + extendBlock + content.slice(insertPos);
+    await fs4.writeFile(configPath, updated);
+    return { path: configPath, updated: true };
+  }
+  const closingBrace = content.lastIndexOf("}");
+  if (closingBrace !== -1) {
+    const before = content.slice(0, closingBrace).trimEnd();
+    const needsComma = !before.endsWith(",") && !before.endsWith("{");
+    const themeBlock = `${needsComma ? "," : ""}
+  theme: {
+    extend: {
+      ${colorExtend}
+    },
+  },
+`;
+    const updated = before + themeBlock + content.slice(closingBrace);
+    await fs4.writeFile(configPath, updated);
+    return { path: configPath, updated: true };
+  }
+  return { path: configPath, skipped: true };
+}
+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);
   }
@@ -629,69 +1322,116 @@ var initCommand = new Command2("init").description("Initialize Dinachi UI in you
   }
   const spinner = ora2("Setting up Dinachi UI...").start();
   try {
-    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"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
-`;
-    await fs3.writeFile(path3.join(normalizedUtilsPath, "utils.ts"), utilsContent);
+    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 = "Setting up color theme...";
+    const tailwindMajor = detectTailwindMajorVersion(projectRoot);
+    const cssFilePath = path4.resolve(projectRoot, projectConfig.cssPath);
+    const themeCSSResult = await injectThemeCSS(cssFilePath, tailwindMajor);
+    let twColorConfigResult = null;
+    if (tailwindMajor < 4) {
+      spinner.text = "Configuring Tailwind color mappings...";
+      twColorConfigResult = await ensureTW3ColorConfig(projectRoot, projectConfig.tailwindConfig);
+    }
     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 = 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`
+    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"
       },
-      iconLibrary: "lucide"
-    }, null, 2);
-    await fs3.writeFile("components.json", configContent);
+      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(normalizedComponentsPath)}`);
-    console.log(`  3. Utils available at: ${chalk2.cyan(path3.join(normalizedUtilsPath, "utils.ts"))}`);
+    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 (themeCSSResult.created) {
+      console.log(`  ${chalk2.green("+")} Created ${projectConfig.cssPath} with color theme (light + dark)`);
+    } else if (themeCSSResult.updated) {
+      console.log(`  ${chalk2.blue("~")} Updated ${projectConfig.cssPath} with color theme (light + dark)`);
+    } else if (themeCSSResult.skipped) {
+      console.log(`  ${chalk2.gray("-")} Color theme already configured in ${projectConfig.cssPath}`);
+    }
+    if (twColorConfigResult) {
+      if (twColorConfigResult.created) {
+        console.log(`  ${chalk2.green("+")} Created ${projectConfig.tailwindConfig} with color mappings`);
+      } else if (twColorConfigResult.updated) {
+        console.log(`  ${chalk2.blue("~")} Updated ${projectConfig.tailwindConfig} with color mappings`);
+      } else if (twColorConfigResult.skipped) {
+        console.log(`  ${chalk2.gray("-")} Color mappings already in ${projectConfig.tailwindConfig}`);
+      }
+    }
+    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("  - 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(normalizedComponentsPath)}`);
-      console.log(`  - Utils will be installed to: ${chalk2.cyan(normalizedUtilsPath)}`);
+      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:");
@@ -702,42 +1442,17 @@ 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)) {
+  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 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 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) {
@@ -748,7 +1463,8 @@ function detectProjectType() {
         utilsPath: "./src/lib",
         tailwindConfig,
         cssPath,
-        srcDir: "src"
+        srcDir: "src",
+        isTypeScript
       };
     }
     if (hasAppDir && !hasSrcDir) {
@@ -758,7 +1474,8 @@ function detectProjectType() {
         utilsPath: "./lib",
         tailwindConfig,
         cssPath,
-        srcDir: "."
+        srcDir: ".",
+        isTypeScript
       };
     }
     return {
@@ -767,7 +1484,8 @@ function detectProjectType() {
       utilsPath: hasSrcDir ? "./src/lib" : "./lib",
       tailwindConfig,
       cssPath,
-      srcDir: hasSrcDir ? "src" : "."
+      srcDir: hasSrcDir ? "src" : ".",
+      isTypeScript
     };
   }
   if (deps.vite || deps["@vitejs/plugin-react"]) {
@@ -777,7 +1495,8 @@ function detectProjectType() {
       utilsPath: hasSrcDir ? "./src/lib" : "./lib",
       tailwindConfig,
       cssPath,
-      srcDir: hasSrcDir ? "src" : "."
+      srcDir: hasSrcDir ? "src" : ".",
+      isTypeScript
     };
   }
   if (deps["react-scripts"]) {
@@ -787,7 +1506,8 @@ function detectProjectType() {
       utilsPath: "./src/lib",
       tailwindConfig,
       cssPath,
-      srcDir: "src"
+      srcDir: "src",
+      isTypeScript
     };
   }
   if (deps["@remix-run/react"]) {
@@ -797,62 +1517,79 @@ function detectProjectType() {
       utilsPath: "./app/lib",
       tailwindConfig,
       cssPath: detectCssPath(false, false, true),
-      srcDir: "app"
+      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,
     componentsPath: hasSrcDir ? "./src/components/ui" : "./components/ui",
     utilsPath: hasSrcDir ? "./src/lib" : "./lib",
     tailwindConfig: detectTailwindConfig(),
     cssPath: hasSrcDir ? "src/index.css" : "index.css",
-    srcDir: hasSrcDir ? "src" : "."
+    srcDir: hasSrcDir ? "src" : ".",
+    isTypeScript
   };
 }
 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";
+  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 = [
-    // 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))) {
+    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 "app/globals.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.5.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();