inai-react-components 0.1.7 → 1.4.0

package/dist/commands/add.js

@@ -4,29 +4,50 @@ import chalk from "chalk";
 import ora from "ora";
 import prompts from "prompts";
 import { readComponentsJson, readRegistryJson, } from "./status.js";
-import { resolveRegistryDir } from "../utils/registry-resolver.js";
+import { resolveRegistryDir, resolveRegistry } from "../utils/registry-resolver.js";
+import { loadRegistries, getDefaultRegistry, getRegistryByName } from "../utils/registry-config.js";
+import { saveSnapshot, sha256, } from "../utils/snapshot.js";
+import { fuzzySearchNames } from "../utils/fuzzy-search.js";
 import { normalizeThemeCss, getLocalTailwindCssTemplate, getLegacyTailwindCssTemplate, } from "./init.js";
+import { autoInstallDeps } from "../utils/auto-install.js";
+import { resolveLocalDir, getSourceRoot } from "../utils/paths.js";
 /**
- * Parse a component spec like "button", "block/auth-login", or "template/admin-dashboard"
- * into its type prefix and name.
+ * Parse a component spec into its registry namespace, type prefix and name.
+ *
+ * Supported forms:
+ * - `button`                       → { registry: null, prefix: null, name: "button" }
+ * - `block/auth-login`             → { registry: null, prefix: "block", name: "auth-login" }
+ * - `template/admin-dashboard`     → { registry: null, prefix: "template", name: "admin-dashboard" }
+ * - `@acme/custom-button`          → { registry: "acme", prefix: null, name: "custom-button" }
+ * - `@acme/block/hero`             → { registry: "acme", prefix: "block", name: "hero" }
+ *
+ * `registry` is null when the caller did not specify a `@namespace/` — the
+ * default registry (from `components.json`) should then be used.
  */
 export function parseComponentSpec(spec) {
     const trimmed = spec.trim();
     if (!trimmed) {
         throw new Error('Component spec cannot be empty.');
     }
+    let registry = null;
+    let rest = trimmed;
+    const nsMatch = trimmed.match(/^@([a-z0-9][a-z0-9-]*)\/(.+)$/i);
+    if (nsMatch) {
+        registry = nsMatch[1];
+        rest = nsMatch[2];
+    }
     let prefix = null;
     let name;
-    if (trimmed.startsWith("block/")) {
+    if (rest.startsWith("block/")) {
         prefix = "block";
-        name = trimmed.slice(6).trim();
+        name = rest.slice(6).trim();
     }
-    else if (trimmed.startsWith("template/")) {
+    else if (rest.startsWith("template/")) {
         prefix = "template";
-        name = trimmed.slice(9).trim();
+        name = rest.slice(9).trim();
     }
     else {
-        name = trimmed;
+        name = rest;
     }
     if (!name) {
         throw new Error(`Invalid component spec "${spec}" — name cannot be empty.`);
@@ -34,7 +55,7 @@ export function parseComponentSpec(spec) {
     if (!/^[a-z0-9][a-z0-9\-]*[a-z0-9]$|^[a-z0-9]$/.test(name)) {
         throw new Error(`Invalid component name "${name}" — use only lowercase letters, numbers, and hyphens (e.g. "my-component").`);
     }
-    return { prefix, name };
+    return { registry, prefix, name };
 }
 /**
  * Find a component in the registry, optionally narrowing by type prefix.
@@ -55,26 +76,153 @@ export function findInRegistry(registry, name, prefix) {
     return allItems.find((c) => c.name === name) ?? null;
 }
 /**
- * Determine the target directory for a component based on its type and aliases.
+ * Determine the target directory for a component based on its type and the
+ * project's aliases + layout from `components.json`.
  */
-export function getTargetDir(component, aliases) {
+export function getTargetDir(component, componentsJson) {
+    const { aliases } = componentsJson;
     const type = component.type.toLowerCase();
     if (type === "block") {
-        return aliases.blocks.replace(/^@\//, "src/");
+        return resolveLocalDir(aliases.blocks, componentsJson);
     }
     if (type === "template") {
         if (aliases.templates) {
-            return aliases.templates.replace(/^@\//, "src/");
+            return resolveLocalDir(aliases.templates, componentsJson);
         }
         // Fallback: derive templates dir from blocks dir
-        const blocksDir = aliases.blocks.replace(/^@\//, "src/");
+        const blocksDir = resolveLocalDir(aliases.blocks, componentsJson);
         const parent = path.dirname(blocksDir);
         return path.join(parent, "templates");
     }
     // Components, forms, and other types go to the components directory
-    return aliases.components.replace(/^@\//, "src/");
+    return resolveLocalDir(aliases.components, componentsJson);
+}
+/**
+ * Install a single component (no dep resolution). Internal helper used by
+ * `runAdd` after deps have been resolved. Returns the list of files that
+ * were written (or would be written, in dry-run mode) and files skipped.
+ */
+async function installOne(component, registry, componentsJson, registryDir, rootDir, options) {
+    const name = component.name;
+    const baseTargetDir = getTargetDir(component, componentsJson);
+    const isMultiFile = component.type === "block" || component.type === "template";
+    const targetDir = isMultiFile ? path.join(baseTargetDir, name) : baseTargetDir;
+    const copiedFiles = [];
+    const skippedFiles = [];
+    // Track captured content for the snapshot (only for files that were
+    // actually written — skipped ones retain whatever the user had).
+    const capturedFiles = {};
+    for (const filePath of component.files) {
+        const registryFilePath = path.join(registryDir, filePath);
+        const fileName = path.basename(filePath);
+        const localFilePath = path.join(rootDir, targetDir, fileName);
+        if (!fs.existsSync(registryFilePath)) {
+            continue;
+        }
+        const exists = fs.existsSync(localFilePath);
+        if (exists && !options.force) {
+            if (options.skipExisting) {
+                skippedFiles.push(isMultiFile ? `${name}/${fileName}` : fileName);
+                continue;
+            }
+            if (options.dryRun) {
+                // In dry-run we do not prompt; treat as would-overwrite.
+            }
+            else if (process.stdin.isTTY) {
+                const res = await prompts({
+                    type: "confirm",
+                    name: "overwrite",
+                    message: `File "${path.relative(rootDir, localFilePath)}" already exists. Overwrite?`,
+                    initial: false,
+                });
+                if (!res.overwrite) {
+                    skippedFiles.push(isMultiFile ? `${name}/${fileName}` : fileName);
+                    continue;
+                }
+            }
+            else {
+                throw new Error(`File "${path.relative(rootDir, localFilePath)}" already exists. Use --force to overwrite or --skip-existing to ignore (stdin is not a TTY, cannot prompt).`);
+            }
+        }
+        const content = fs.readFileSync(registryFilePath, "utf-8");
+        if (options.dryRun) {
+            console.log(chalk.dim(`  [dry-run] would write ${path.relative(rootDir, localFilePath)}`));
+        }
+        else {
+            fs.mkdirSync(path.dirname(localFilePath), { recursive: true });
+            fs.writeFileSync(localFilePath, content);
+            const relLocal = path.relative(rootDir, localFilePath);
+            capturedFiles[relLocal] = {
+                localPath: relLocal,
+                hash: sha256(content),
+                content,
+            };
+        }
+        copiedFiles.push(isMultiFile ? `${name}/${fileName}` : fileName);
+    }
+    // Internal deps (lib/cn, lib/animations, ...) — installed under the
+    // project's detected sourceRoot so they match where `init` placed cn.ts.
+    const sourceRoot = getSourceRoot(componentsJson);
+    const copiedInternalDeps = [];
+    for (const dep of component.internalDeps) {
+        const depFileName = dep.split("/").pop() + ".ts";
+        const depSourcePath = path.join(registryDir, "packages", "ui", "src", dep + ".ts");
+        const depTargetPath = path.join(rootDir, sourceRoot, "lib", depFileName);
+        if (!fs.existsSync(depSourcePath)) {
+            continue;
+        }
+        const content = fs.readFileSync(depSourcePath, "utf-8");
+        if (options.dryRun) {
+            console.log(chalk.dim(`  [dry-run] would write ${path.relative(rootDir, depTargetPath)}`));
+        }
+        else {
+            fs.mkdirSync(path.dirname(depTargetPath), { recursive: true });
+            fs.writeFileSync(depTargetPath, content);
+        }
+        copiedInternalDeps.push(dep);
+    }
+    // Update components.json (skipped in dry-run).
+    if (!options.dryRun) {
+        const registryVersion = registry.version;
+        const installed = componentsJson.installedComponents ?? [];
+        const existingIdx = installed.findIndex((c) => c.name === name);
+        const entry = {
+            name,
+            version: registryVersion,
+            installedAt: new Date().toISOString().split("T")[0],
+        };
+        if (existingIdx >= 0) {
+            installed[existingIdx] = entry;
+        }
+        else {
+            installed.push(entry);
+        }
+        componentsJson.installedComponents = installed;
+        const componentsJsonPath = path.join(rootDir, "components.json");
+        fs.writeFileSync(componentsJsonPath, JSON.stringify(componentsJson, null, 2) + "\n");
+        // Persist the snapshot of the original content so `update` can run a
+        // real 3-way merge against the user's local edits and `status` can
+        // detect drift vs the originally-installed content.
+        if (Object.keys(capturedFiles).length > 0) {
+            const snapshot = {
+                name,
+                version: registryVersion,
+                files: capturedFiles,
+                capturedAt: new Date().toISOString(),
+            };
+            saveSnapshot(rootDir, snapshot);
+        }
+    }
+    return {
+        added: true,
+        message: `Component "${name}" added successfully.`,
+        files: copiedFiles,
+        npmDeps: component.npmDeps,
+        internalDeps: copiedInternalDeps,
+        skipped: skippedFiles,
+    };
 }
-export async function runAdd(componentSpec, rootDir) {
+export async function runAdd(componentSpec, rootDir, options = {}) {
     const componentsJson = readComponentsJson(rootDir);
     if (!componentsJson) {
         return {
@@ -85,8 +233,69 @@ export async function runAdd(componentSpec, rootDir) {
             internalDeps: [],
         };
     }
-    const { prefix, name } = parseComponentSpec(componentSpec);
-    const registryDir = resolveRegistryDir(rootDir);
+    const { registry: nsRegistry, prefix, name } = parseComponentSpec(componentSpec);
+    // Multi-registry (M3) resolution: if components.json declares a
+    // `registries` array, honour the namespace. Otherwise fall back to
+    // the legacy single-registry code path so existing projects keep
+    // working unchanged.
+    const registries = await loadRegistries(rootDir);
+    let registryDir;
+    let activeRegistryName = null;
+    if (registries.length > 0) {
+        let target;
+        if (nsRegistry) {
+            target = getRegistryByName(registries, nsRegistry);
+            if (!target) {
+                return {
+                    added: false,
+                    message: `Registry "@${nsRegistry}" is not configured in components.json. Available: ${registries.map((r) => `@${r.name}`).join(", ")}.`,
+                    files: [],
+                    npmDeps: [],
+                    internalDeps: [],
+                };
+            }
+        }
+        else {
+            target = getDefaultRegistry(registries);
+            if (!target) {
+                return {
+                    added: false,
+                    message: `No default registry configured. Run \`inai-ui registries add <name>\` first.`,
+                    files: [],
+                    npmDeps: [],
+                    internalDeps: [],
+                };
+            }
+        }
+        try {
+            registryDir = await resolveRegistry(target, rootDir, {
+                offline: options.offline,
+            });
+            activeRegistryName = target.name;
+        }
+        catch (err) {
+            return {
+                added: false,
+                message: err instanceof Error ? err.message : String(err),
+                files: [],
+                npmDeps: [],
+                internalDeps: [],
+            };
+        }
+    }
+    else {
+        if (nsRegistry) {
+            return {
+                added: false,
+                message: `No registries configured in components.json — cannot resolve "@${nsRegistry}/${name}".`,
+                files: [],
+                npmDeps: [],
+                internalDeps: [],
+            };
+        }
+        registryDir = resolveRegistryDir(rootDir);
+    }
+    void activeRegistryName;
     const registryPath = path.join(registryDir, "registry.json");
     const registry = readRegistryJson(registryPath);
     if (!registry) {
@@ -101,91 +310,116 @@ export async function runAdd(componentSpec, rootDir) {
     const component = findInRegistry(registry, name, prefix);
     if (!component) {
         const label = prefix ? `${prefix}/${name}` : name;
+        // Gather all registry names for fuzzy matching
+        const allNames = [
+            ...registry.components.map((c) => c.name),
+            ...registry.blocks.map((c) => c.name),
+            ...registry.templates.map((c) => c.name),
+        ];
+        const suggestions = fuzzySearchNames(name, allNames, 0.4).slice(0, 5);
         return {
             added: false,
             message: `Component "${label}" not found in registry.`,
             files: [],
             npmDeps: [],
             internalDeps: [],
+            suggestions,
         };
     }
-    // Determine target directory
-    const baseTargetDir = getTargetDir(component, componentsJson.aliases);
-    const isMultiFile = component.type === "block" || component.type === "template";
-    // Blocks/templates go into a named subdirectory (e.g. src/components/blocks/auth-login/)
-    const targetDir = isMultiFile
-        ? path.join(baseTargetDir, name)
-        : baseTargetDir;
-    const copiedFiles = [];
-    // Copy component source files
-    for (const filePath of component.files) {
-        const registryFilePath = path.join(registryDir, filePath);
-        const fileName = path.basename(filePath);
-        const localFilePath = path.join(rootDir, targetDir, fileName);
-        if (!fs.existsSync(registryFilePath)) {
-            continue;
+    // Resolve the dependency graph in topological order (deps first).
+    const installed = componentsJson.installedComponents ?? [];
+    const alreadyInstalled = new Set(installed.map((c) => c.name));
+    const resolved = new Set();
+    const installOrder = [];
+    const visited = new Set();
+    const visit = (comp, stack) => {
+        if (resolved.has(comp.name))
+            return;
+        if (stack.has(comp.name)) {
+            console.log(chalk.yellow(`  ⚠ circular dependency detected: "${comp.name}" already in resolution stack [${[...stack].join(" → ")} → ${comp.name}], skipping`));
+            return;
         }
-        fs.mkdirSync(path.dirname(localFilePath), { recursive: true });
-        const content = fs.readFileSync(registryFilePath, "utf-8");
-        fs.writeFileSync(localFilePath, content);
-        copiedFiles.push(isMultiFile ? `${name}/${fileName}` : fileName);
-    }
-    // Resolve and copy internal dependencies
-    const copiedInternalDeps = [];
-    for (const dep of component.internalDeps) {
-        // dep is like "lib/cn" or "lib/animations"
-        const depFileName = dep.split("/").pop() + ".ts";
-        const depSourcePath = path.join(registryDir, "packages", "ui", "src", dep + ".ts");
-        const depTargetPath = path.join(rootDir, "src", "lib", depFileName);
-        if (!fs.existsSync(depSourcePath)) {
-            continue;
+        if (visited.has(comp.name))
+            return;
+        visited.add(comp.name);
+        stack.add(comp.name);
+        const deps = comp.registryDependencies ?? [];
+        for (const depName of deps) {
+            if (alreadyInstalled.has(depName)) {
+                // already present — skip silently (still mark resolved so we don't recheck)
+                resolved.add(depName);
+                continue;
+            }
+            const depComp = findInRegistry(registry, depName, null);
+            if (!depComp) {
+                // Missing dep in the registry — warn but continue.
+                console.log(chalk.yellow(`  ! registry dependency "${depName}" of "${comp.name}" not found in registry, skipping`));
+                continue;
+            }
+            visit(depComp, stack);
         }
-        // Copy even if it already exists (ensure latest version)
-        fs.mkdirSync(path.dirname(depTargetPath), { recursive: true });
-        const content = fs.readFileSync(depSourcePath, "utf-8");
-        fs.writeFileSync(depTargetPath, content);
-        copiedInternalDeps.push(dep);
-    }
-    // Update components.json with installed component entry
-    const registryVersion = registry.version;
-    const installed = componentsJson.installedComponents ?? [];
-    const existingIdx = installed.findIndex((c) => c.name === name);
-    const entry = {
-        name,
-        version: registryVersion,
-        installedAt: new Date().toISOString().split("T")[0],
+        stack.delete(comp.name);
+        resolved.add(comp.name);
+        installOrder.push(comp);
     };
-    if (existingIdx >= 0) {
-        installed[existingIdx] = entry;
-    }
-    else {
-        installed.push(entry);
-    }
-    componentsJson.installedComponents = installed;
-    const componentsJsonPath = path.join(rootDir, "components.json");
-    fs.writeFileSync(componentsJsonPath, JSON.stringify(componentsJson, null, 2) + "\n");
+    visit(component, new Set());
+    const allFiles = [];
+    const allNpmDeps = new Set();
+    const allInternalDeps = new Set();
+    const allSkipped = [];
+    const transitiveDeps = [];
+    for (const comp of installOrder) {
+        if (comp.name !== name) {
+            console.log(chalk.dim(`  → installing dependency: ${comp.name}`));
+            transitiveDeps.push(comp.name);
+        }
+        const result = await installOne(comp, registry, componentsJson, registryDir, rootDir, options);
+        for (const f of result.files)
+            allFiles.push(f);
+        for (const d of result.npmDeps)
+            allNpmDeps.add(d);
+        for (const d of result.internalDeps)
+            allInternalDeps.add(d);
+        for (const s of result.skipped ?? [])
+            allSkipped.push(s);
+    }
+    const suffix = options.dryRun ? " (dry-run)" : "";
     return {
         added: true,
-        message: `Component "${name}" added successfully.`,
-        files: copiedFiles,
-        npmDeps: component.npmDeps,
-        internalDeps: copiedInternalDeps,
+        message: `Component "${name}" added successfully${suffix}.`,
+        files: allFiles,
+        npmDeps: [...allNpmDeps],
+        internalDeps: [...allInternalDeps],
+        resolvedDeps: transitiveDeps,
+        skipped: allSkipped,
     };
 }
-function printAddResult(result) {
+function printAddResult(result, showNpmHint = true) {
     if (result.files.length > 0) {
         console.log(chalk.green("\nCopied files:"));
         for (const file of result.files) {
             console.log(chalk.dim(`  - ${file}`));
         }
     }
+    if (result.skipped && result.skipped.length > 0) {
+        console.log(chalk.yellow("\nSkipped files (already existed):"));
+        for (const file of result.skipped) {
+            console.log(chalk.dim(`  - ${file}`));
+        }
+    }
+    if (result.resolvedDeps && result.resolvedDeps.length > 0) {
+        console.log(chalk.green("\nRegistry dependencies resolved:"));
+        for (const dep of result.resolvedDeps) {
+            console.log(chalk.dim(`  - ${dep}`));
+        }
+    }
     if (result.internalDeps.length > 0) {
         console.log(chalk.green("\nInternal dependencies resolved:"));
         for (const dep of result.internalDeps) {
             console.log(chalk.dim(`  - ${dep}`));
         }
     }
-    if (result.npmDeps.length > 0) {
+    if (result.npmDeps.length > 0 && showNpmHint) {
         console.log(chalk.yellow("\nRequired npm dependencies:"));
         console.log(chalk.cyan(`  pnpm add ${result.npmDeps.join(" ")}`));
     }
@@ -193,24 +427,98 @@ function printAddResult(result) {
 export async function addCommand(componentSpec, options) {
     // If --all flag, install everything
     if (options?.all) {
-        await installAll();
+        await installAll(options);
         return;
     }
     // If no component specified, show interactive picker
     if (!componentSpec) {
-        await interactiveAdd();
+        await interactiveAdd(options);
         return;
     }
     const spinner = ora(`Adding "${componentSpec}"...`).start();
     try {
         const rootDir = process.cwd();
-        const result = await runAdd(componentSpec, rootDir);
+        // Pause spinner so prompts (for overwrite) work cleanly.
+        spinner.stop();
+        const result = await runAdd(componentSpec, rootDir, {
+            force: options?.force,
+            dryRun: options?.dryRun,
+            skipExisting: options?.skipExisting,
+            skipInstall: options?.skipInstall,
+        });
         if (!result.added) {
-            spinner.fail(result.message);
+            console.error(chalk.red(result.message));
+            // Offer fuzzy suggestions if available
+            if (result.suggestions && result.suggestions.length > 0) {
+                const top = result.suggestions[0];
+                // Single high-confidence match: auto-suggest with confirm
+                if (top.score > 0.8 && process.stdin.isTTY) {
+                    const confirm = await prompts({
+                        type: "confirm",
+                        name: "accept",
+                        message: `Did you mean "${chalk.cyan(top.name)}"?`,
+                        initial: true,
+                    });
+                    if (confirm.accept) {
+                        // Re-run add with the corrected name
+                        const correctedSpec = componentSpec.replace(/[^/]+$/, top.name);
+                        const correctedResult = await runAdd(correctedSpec, rootDir, {
+                            force: options?.force,
+                            dryRun: options?.dryRun,
+                            skipExisting: options?.skipExisting,
+                            skipInstall: options?.skipInstall,
+                        });
+                        if (!correctedResult.added) {
+                            console.error(chalk.red(correctedResult.message));
+                            process.exit(1);
+                        }
+                        console.log(chalk.green(correctedResult.message));
+                        const willAutoInstall = correctedResult.npmDeps.length > 0 &&
+                            !options?.skipInstall &&
+                            !options?.dryRun;
+                        printAddResult(correctedResult, !willAutoInstall);
+                        if (correctedResult.npmDeps.length > 0 &&
+                            !options?.skipInstall &&
+                            !options?.dryRun) {
+                            const installSpinner = ora("Installing npm dependencies...").start();
+                            try {
+                                autoInstallDeps(rootDir, correctedResult.npmDeps);
+                                installSpinner.succeed("npm dependencies installed");
+                            }
+                            catch {
+                                installSpinner.warn("Failed to auto-install dependencies. Install them manually:");
+                                console.log(chalk.cyan(`  pnpm add ${correctedResult.npmDeps.join(" ")}`));
+                            }
+                        }
+                        return;
+                    }
+                }
+                // Show all suggestions
+                console.log(chalk.yellow(`\nDid you mean: ${result.suggestions
+                    .map((s) => `"${chalk.cyan(s.name)}" ${chalk.dim(`(score: ${s.score.toFixed(2)})`)}`)
+                    .join(", ")}?`));
+            }
             process.exit(1);
         }
-        spinner.succeed(result.message);
-        printAddResult(result);
+        console.log(chalk.green(result.message));
+        const willAutoInstall = result.npmDeps.length > 0 &&
+            !options?.skipInstall &&
+            !options?.dryRun;
+        printAddResult(result, !willAutoInstall);
+        // Auto-install npm dependencies unless opted out or dry-run
+        if (result.npmDeps.length > 0 &&
+            !options?.skipInstall &&
+            !options?.dryRun) {
+            const installSpinner = ora("Installing npm dependencies...").start();
+            try {
+                autoInstallDeps(rootDir, result.npmDeps);
+                installSpinner.succeed("npm dependencies installed");
+            }
+            catch {
+                installSpinner.warn("Failed to auto-install dependencies. Install them manually:");
+                console.log(chalk.cyan(`  pnpm add ${result.npmDeps.join(" ")}`));
+            }
+        }
     }
     catch (error) {
         spinner.fail("Failed to add component.");
@@ -269,10 +577,14 @@ async function changeTheme(rootDir, registryDir) {
     try {
         const tokensSrc = path.join(registryDir, "packages", "tokens", "src");
         const isRemote = !!componentsJson.registrySource;
+        const sourceRoot = getSourceRoot(componentsJson);
+        const cssRelPath = componentsJson.tailwind?.css ?? `${sourceRoot}/index.css`;
+        const cssPath = path.join(rootDir, cssRelPath);
+        const themesRelPath = `${sourceRoot}/styles/tokens/themes`;
         if (isRemote) {
             // Remote mode: copy and normalize theme file
             const themesSrc = path.join(tokensSrc, "themes");
-            const themesDest = path.join(rootDir, "src", "styles", "tokens", "themes");
+            const themesDest = path.join(rootDir, sourceRoot, "styles", "tokens", "themes");
             // Remove old theme file
             const oldThemeFile = path.join(themesDest, `${currentTheme}.css`);
             if (fs.existsSync(oldThemeFile)) {
@@ -286,17 +598,17 @@ async function changeTheme(rootDir, registryDir) {
                 const normalizedCss = normalizeThemeCss(rawCss, newTheme);
                 fs.writeFileSync(path.join(themesDest, `${newTheme}.css`), normalizedCss);
             }
-            // Regenerate index.css
+            // Regenerate CSS entry
             const font = componentsJson.font ?? { body: "outfit", heading: "outfit" };
             const radius = componentsJson.radius ?? 0.5;
-            const cssPath = path.join(rootDir, "src", "index.css");
+            fs.mkdirSync(path.dirname(cssPath), { recursive: true });
             fs.writeFileSync(cssPath, getLocalTailwindCssTemplate(newTheme, font.body, font.heading, radius));
         }
         else {
-            // Local mode: just regenerate index.css with new import
+            // Local mode: just regenerate CSS entry with new import
             const font = componentsJson.font ?? { body: "outfit", heading: "outfit" };
             const radius = componentsJson.radius ?? 0.5;
-            const cssPath = path.join(rootDir, "src", "index.css");
+            fs.mkdirSync(path.dirname(cssPath), { recursive: true });
             fs.writeFileSync(cssPath, getLegacyTailwindCssTemplate(newTheme, font.body, font.heading, radius));
         }
         // Update components.json
@@ -307,9 +619,9 @@ async function changeTheme(rootDir, registryDir) {
         spinner.succeed(`Theme switched to "${newTheme}"`);
         console.log(chalk.green("\nUpdated files:"));
         console.log(chalk.dim("  - components.json"));
-        console.log(chalk.dim("  - src/index.css"));
+        console.log(chalk.dim(`  - ${cssRelPath}`));
         if (componentsJson.registrySource) {
-            console.log(chalk.dim(`  - src/styles/tokens/themes/${newTheme}.css`));
+            console.log(chalk.dim(`  - ${themesRelPath}/${newTheme}.css`));
         }
     }
     catch (error) {
@@ -318,7 +630,7 @@ async function changeTheme(rootDir, registryDir) {
         console.error(chalk.red(`\nError: ${message}`));
     }
 }
-async function installAll() {
+async function installAll(options) {
     const rootDir = process.cwd();
     const componentsJson = readComponentsJson(rootDir);
     if (!componentsJson) {
@@ -350,7 +662,11 @@ async function installAll() {
         const spinner = ora(`${action} "${prefix}${item.name}"...`).start();
         try {
             const spec = prefix ? `${prefix}${item.name}` : item.name;
-            const result = await runAdd(spec, rootDir);
+            const result = await runAdd(spec, rootDir, {
+                force: options?.force,
+                dryRun: options?.dryRun,
+                skipExisting: options?.skipExisting,
+            });
             if (!result.added) {
                 spinner.fail(result.message);
                 continue;
@@ -386,7 +702,7 @@ async function installAll() {
         console.log(chalk.cyan(`  pnpm add ${[...allNpmDeps].join(" ")}`));
     }
 }
-async function interactiveAdd() {
+async function interactiveAdd(options) {
     const rootDir = process.cwd();
     const componentsJson = readComponentsJson(rootDir);
     if (!componentsJson) {
@@ -466,7 +782,11 @@ async function interactiveAdd() {
         const action = isInstalled ? "Updating" : "Adding";
         const spinner = ora(`${action} "${name}"...`).start();
         try {
-            const result = await runAdd(name, rootDir);
+            const result = await runAdd(name, rootDir, {
+                force: options?.force,
+                dryRun: options?.dryRun,
+                skipExisting: options?.skipExisting,
+            });
             if (!result.added) {
                 spinner.fail(result.message);
                 continue;