@gilav21/shadcn-angular 0.0.25 → 0.0.26

package/dist/commands/diff.js

@@ -0,0 +1,99 @@
+import fs from 'fs-extra';
+import path from 'node:path';
+import chalk from 'chalk';
+import { getConfig } from '../utils/config.js';
+import { registry, getComponentNames } from '../registry/index.js';
+import { resolveProjectPath, aliasToProjectPath } from '../utils/paths.js';
+import { fetchAndTransform, normalizeContent } from './add.js';
+function formatLineDiff(localLine, remoteLine) {
+    if (localLine !== undefined && remoteLine !== undefined) {
+        return [chalk.red(`- ${localLine}`), chalk.green(`+ ${remoteLine}`)];
+    }
+    if (localLine === undefined) {
+        return [chalk.green(`+ ${remoteLine}`)];
+    }
+    return [chalk.red(`- ${localLine}`)];
+}
+export function formatUnifiedDiff(fileName, localContent, remoteContent) {
+    const localLines = localContent.split('\n');
+    const remoteLines = remoteContent.split('\n');
+    const output = [
+        chalk.bold(`--- local/${fileName}`),
+        chalk.bold(`+++ remote/${fileName}`),
+    ];
+    const maxLines = Math.max(localLines.length, remoteLines.length);
+    let diffFound = false;
+    for (let i = 0; i < maxLines; i++) {
+        const localLine = localLines[i];
+        const remoteLine = remoteLines[i];
+        if (localLine === remoteLine)
+            continue;
+        diffFound = true;
+        output.push(chalk.cyan(`@@ line ${i + 1} @@`), ...formatLineDiff(localLine, remoteLine));
+    }
+    return diffFound ? output.join('\n') : '';
+}
+async function diffFile(file, targetDir, options, utilsAlias) {
+    const targetPath = path.join(targetDir, file);
+    if (!await fs.pathExists(targetPath))
+        return null;
+    try {
+        const localContent = normalizeContent(await fs.readFile(targetPath, 'utf-8'));
+        const remoteContent = normalizeContent(await fetchAndTransform(file, { branch: options.branch, remote: options.remote, registry: options.registry }, utilsAlias));
+        if (localContent === remoteContent)
+            return null;
+        const diffOutput = formatUnifiedDiff(file, localContent, remoteContent);
+        return diffOutput || null;
+    }
+    catch {
+        return chalk.yellow(`  Could not fetch remote version of ${file}`);
+    }
+}
+async function diffComponent(name, targetDir, options, utilsAlias) {
+    const component = registry[name];
+    const fileDiffs = [];
+    for (const file of component.files) {
+        const result = await diffFile(file, targetDir, options, utilsAlias);
+        if (result)
+            fileDiffs.push(result);
+    }
+    return fileDiffs;
+}
+export async function diff(components, options) {
+    const cwd = process.cwd();
+    const config = await getConfig(cwd);
+    if (!config) {
+        console.log(chalk.red('Error: components.json not found.'));
+        console.log(chalk.dim('Run `npx @gilav21/shadcn-angular init` first.'));
+        process.exit(1);
+    }
+    if (!options.registry && config.registry) {
+        options.registry = config.registry;
+    }
+    const uiBasePath = aliasToProjectPath(config.aliases.ui || 'src/components/ui');
+    const targetDir = resolveProjectPath(cwd, uiBasePath);
+    const utilsAlias = config.aliases.utils;
+    const names = components.length > 0
+        ? components
+        : getComponentNames();
+    let totalDiffs = 0;
+    for (const name of names) {
+        if (!(name in registry)) {
+            console.log(chalk.red(`Unknown component: ${name}`));
+            continue;
+        }
+        const fileDiffs = await diffComponent(name, targetDir, options, utilsAlias);
+        if (fileDiffs.length > 0) {
+            totalDiffs++;
+            console.log(chalk.bold.cyan(`\n${name}:`));
+            for (const d of fileDiffs)
+                console.log(d);
+        }
+    }
+    if (totalDiffs === 0) {
+        console.log(chalk.green('\nAll installed components are up to date.'));
+    }
+    else {
+        console.log(chalk.dim(`\n${totalDiffs} component(s) have differences.`));
+    }
+}

package/dist/commands/help.js

@@ -1,5 +1,5 @@
 import chalk from 'chalk';
-import { registry } from '../registry/index.js';
+import { registry, getComponentNames } from '../registry/index.js';
 const CATEGORY_ORDER = ['UI', 'Charts', 'Layout / Page Building', 'Animation', 'Kanban'];
 const ANIMATION_COMPONENTS = new Set([
     'gradient-text', 'flip-text', 'meteors', 'shine-border', 'scroll-progress',
@@ -10,9 +10,9 @@ const ANIMATION_COMPONENTS = new Set([
 const KANBAN_COMPONENTS = new Set(['kanban']);
 const LAYOUT_COMPONENTS = new Set(['bento-grid', 'page-builder']);
 function categorize(name) {
-    const def = registry[name];
-    if (!def)
+    if (!(name in registry))
         return 'UI';
+    const def = registry[name];
     const hasChartFile = def.files.some(f => f.startsWith('charts/'));
     if (hasChartFile)
         return 'Charts';
@@ -29,14 +29,14 @@ function buildComponentsByCategory() {
     for (const cat of CATEGORY_ORDER) {
         groups.set(cat, []);
     }
-    for (const name of Object.keys(registry)) {
+    for (const name of getComponentNames()) {
         const cat = categorize(name);
         const list = groups.get(cat);
         if (list)
             list.push(name);
     }
     for (const list of groups.values()) {
-        list.sort();
+        list.sort((a, b) => a.localeCompare(b));
     }
     return groups;
 }
@@ -57,17 +57,26 @@ function buildCommandsSection() {
         '  ' + chalk.cyan('init') + '   Initialize shadcn-angular in your project',
         '    ' + chalk.gray('-y, --yes') + '            Skip confirmation prompt',
         '    ' + chalk.gray('-d, --defaults') + '       Use default configuration',
+        '    ' + chalk.gray('--remote') + '             Force remote fetch from GitHub registry',
         '    ' + chalk.gray('-b, --branch') + ' <branch> GitHub branch to fetch from ' + branchDefault,
         '',
         '  ' + chalk.cyan('add') + '    Add component(s) to your project',
         '    ' + chalk.gray('[components...]') + '       One or more component names',
-        '    ' + chalk.gray('-y, --yes') + '            Skip confirmation prompt',
+        '    ' + chalk.gray('-y, --yes') + '            Skip prompts and overwrite conflicts',
         '    ' + chalk.gray('-o, --overwrite') + '      Overwrite existing files',
         '    ' + chalk.gray('-a, --all') + '            Add all available components',
         '    ' + chalk.gray('-p, --path') + ' <path>     Custom install path',
         '    ' + chalk.gray('--remote') + '             Force remote fetch from GitHub registry',
+        '    ' + chalk.gray('--dry-run') + '            Show what would be installed without changes',
         '    ' + chalk.gray('-b, --branch') + ' <branch> GitHub branch to fetch from ' + branchDefault,
         '',
+        '  ' + chalk.cyan('diff') + '   Show differences between local and remote versions',
+        '    ' + chalk.gray('[components...]') + '       Components to diff (all installed if omitted)',
+        '    ' + chalk.gray('--remote') + '             Force remote fetch from GitHub registry',
+        '    ' + chalk.gray('-b, --branch') + ' <branch> GitHub branch to fetch from ' + branchDefault,
+        '',
+        '  ' + chalk.cyan('list') + '   List all components and their install status',
+        '',
         '  ' + chalk.cyan('help') + '   Show this reference',
         '',
     ];

package/dist/commands/init.d.ts

@@ -1,7 +1,9 @@
 interface InitOptions {
     yes?: boolean;
     defaults?: boolean;
+    remote?: boolean;
     branch: string;
+    registry?: string;
 }
 export declare function init(options: InitOptions): Promise<void>;
 export {};

package/dist/commands/init.js

@@ -1,6 +1,5 @@
 import fs from 'fs-extra';
 import path from 'node:path';
-import { fileURLToPath } from 'node:url';
 import prompts from 'prompts';
 import chalk from 'chalk';
 import ora from 'ora';
@@ -9,58 +8,187 @@ import { getStylesTemplate } from '../templates/styles.js';
 import { getUtilsTemplate } from '../templates/utils.js';
 import { installPackages } from '../utils/package-manager.js';
 import { writeShortcutRegistryIndex } from '../utils/shortcut-registry.js';
-function getLibRegistryBaseUrl(branch) {
-    return `https://raw.githubusercontent.com/gilav21/shadcn-angular/${branch}/packages/components/lib`;
-}
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-function getLocalLibDir() {
-    const fromDist = path.resolve(__dirname, '../../../components/lib');
-    if (fs.existsSync(fromDist)) {
-        return fromDist;
-    }
-    return null;
-}
-async function fetchLibFileContent(file, branch) {
+import { getLibRegistryBaseUrl, getLocalLibDir, resolveProjectPath, aliasToProjectPath, } from '../utils/paths.js';
+const onCancel = () => {
+    console.log(chalk.dim('\nCancelled.'));
+    process.exit(0);
+};
+async function fetchLibFileContent(file, branch, remote, registry) {
     const localLibDir = getLocalLibDir();
-    if (localLibDir) {
+    if (localLibDir && !remote) {
         const localPath = path.join(localLibDir, file);
         if (await fs.pathExists(localPath)) {
             return fs.readFile(localPath, 'utf-8');
         }
     }
-    const url = `${getLibRegistryBaseUrl(branch)}/${file}`;
+    const url = `${getLibRegistryBaseUrl(branch, registry)}/${file}`;
     const response = await fetch(url);
     if (!response.ok) {
         throw new Error(`Failed to fetch library file from ${url}: ${response.statusText}`);
     }
     return response.text();
 }
-function resolveProjectPath(cwd, inputPath) {
-    const resolved = path.resolve(cwd, inputPath);
-    const relative = path.relative(cwd, resolved);
-    if (relative.startsWith('..') || path.isAbsolute(relative)) {
-        throw new Error(`Path must stay inside the project directory: ${inputPath}`);
+function resolveAliasOrPath(cwd, aliasOrPath) {
+    return resolveProjectPath(cwd, aliasToProjectPath(aliasOrPath));
+}
+function toAlias(inputPath) {
+    return inputPath.startsWith('src/')
+        ? '@/' + inputPath.slice(4)
+        : inputPath;
+}
+async function promptForConfig() {
+    const THEME_COLORS = {
+        zinc: '#71717a', slate: '#64748b', stone: '#78716c',
+        gray: '#6b7280', neutral: '#737373', red: '#ef4444',
+        rose: '#f43f5e', orange: '#f97316', green: '#22c55e',
+        blue: '#3b82f6', yellow: '#eab308', violet: '#8b5cf6',
+        amber: '#d97706',
+    };
+    const colorSwatch = (value, label) => `${chalk.hex(THEME_COLORS[value])('██')} ${label}`;
+    const themeChoices = [
+        'Zinc', 'Slate', 'Stone', 'Gray', 'Neutral',
+        'Red', 'Rose', 'Orange', 'Green', 'Blue',
+        'Yellow', 'Violet', 'Amber',
+    ].map(label => {
+        const value = label.toLowerCase();
+        return { title: colorSwatch(value, label), value };
+    });
+    const baseColorChoices = ['Neutral', 'Slate', 'Stone', 'Gray', 'Zinc'].map(label => {
+        const value = label.toLowerCase();
+        return { title: colorSwatch(value, label), value };
+    });
+    const responses = await prompts([
+        {
+            type: 'select',
+            name: 'baseColor',
+            message: 'Which color would you like to use as base color?',
+            choices: baseColorChoices,
+            initial: 0,
+        },
+        {
+            type: 'select',
+            name: 'theme',
+            message: 'Which color would you like to use for the main theme?',
+            choices: themeChoices,
+            initial: (prev) => {
+                const index = themeChoices.findIndex(c => c.value === prev);
+                return index === -1 ? 0 : index;
+            },
+        },
+        {
+            type: 'text',
+            name: 'componentsPath',
+            message: 'Where would you like to install components?',
+            initial: 'src/components/ui',
+        },
+        {
+            type: 'text',
+            name: 'utilsPath',
+            message: 'Where would you like to install utils?',
+            initial: 'src/components/lib',
+        },
+        {
+            type: 'text',
+            name: 'globalCss',
+            message: 'Where is your global styles file?',
+            initial: 'src/styles.scss',
+        },
+        {
+            type: 'confirm',
+            name: 'createShortcutRegistry',
+            message: 'Would you like to create a shortcut registry scaffold?',
+            initial: true,
+        },
+    ], { onCancel });
+    const componentsAlias = toAlias(responses.componentsPath);
+    const uiAlias = componentsAlias.endsWith('/ui')
+        ? componentsAlias
+        : componentsAlias + '/ui';
+    return {
+        config: {
+            style: 'default',
+            tailwind: {
+                css: responses.globalCss,
+                baseColor: responses.baseColor,
+                theme: responses.theme,
+                cssVariables: true,
+            },
+            aliases: {
+                components: componentsAlias.replace(/\/ui$/, ''),
+                utils: toAlias(responses.utilsPath),
+                ui: uiAlias,
+            },
+        },
+        createShortcutRegistry: responses.createShortcutRegistry ?? true,
+    };
+}
+async function installMissingDeps(cwd) {
+    const allDependencies = [
+        'clsx', 'tailwind-merge', 'class-variance-authority',
+        'tailwindcss', 'postcss', '@tailwindcss/postcss',
+    ];
+    const packageJsonPath = path.join(cwd, 'package.json');
+    let missingDeps = allDependencies;
+    if (await fs.pathExists(packageJsonPath)) {
+        const packageJson = await fs.readJson(packageJsonPath);
+        const installed = { ...packageJson.dependencies, ...packageJson.devDependencies };
+        missingDeps = allDependencies.filter(dep => !installed[dep]);
+    }
+    if (missingDeps.length > 0) {
+        await installPackages(missingDeps, { cwd });
     }
-    return resolved;
 }
-function resolveAliasOrPath(cwd, aliasOrPath) {
-    const normalized = aliasOrPath.startsWith('@/')
-        ? path.join('src', aliasOrPath.slice(2))
-        : aliasOrPath;
-    return resolveProjectPath(cwd, normalized);
+async function setupPostcss(cwd) {
+    const postcssConfigFiles = [
+        '.postcssrc.json', '.postcssrc.js', '.postcssrc.yaml',
+        'postcss.config.js', 'postcss.config.cjs', 'postcss.config.mjs',
+    ];
+    const existing = (await Promise.all(postcssConfigFiles.map(async (f) => await fs.pathExists(path.join(cwd, f)) ? f : null))).filter(Boolean);
+    if (existing.length === 0) {
+        await fs.writeJson(path.join(cwd, '.postcssrc.json'), {
+            plugins: { '@tailwindcss/postcss': {} },
+        }, { spaces: 4 });
+        return;
+    }
+    if (!existing.includes('.postcssrc.json')) {
+        console.log(chalk.yellow(`  Existing PostCSS config found (${existing[0]}). Skipping .postcssrc.json creation.`));
+        console.log(chalk.dim('  Make sure @tailwindcss/postcss is configured in your PostCSS config.'));
+    }
+}
+async function autoConfigureTsconfig(cwd, spinner) {
+    const tsconfigPath = path.join(cwd, 'tsconfig.json');
+    if (!await fs.pathExists(tsconfigPath))
+        return;
+    try {
+        const raw = await fs.readFile(tsconfigPath, 'utf-8');
+        const stripped = raw
+            .replaceAll(/\/\/.*$/gm, '')
+            .replaceAll(/\/\*[\s\S]*?\*\//g, '');
+        const tsconfig = JSON.parse(stripped);
+        const compilerOptions = tsconfig.compilerOptions ??= {};
+        const paths = compilerOptions.paths ??= {};
+        if (paths['@/*'])
+            return;
+        if (!compilerOptions.baseUrl) {
+            compilerOptions.baseUrl = '.';
+        }
+        paths['@/*'] = ['./src/*'];
+        await fs.writeJson(tsconfigPath, tsconfig, { spaces: 2 });
+        spinner.text = 'Configured tsconfig.json paths';
+    }
+    catch {
+        console.log(chalk.dim('  Could not auto-configure tsconfig.json — please add "@/*": ["./src/*"] to paths manually.'));
+    }
 }
 export async function init(options) {
     console.log(chalk.bold('\n🎨 Welcome to shadcn-angular!\n'));
     const cwd = process.cwd();
-    // Check if this is an Angular project
     const angularJsonPath = path.join(cwd, 'angular.json');
     if (!await fs.pathExists(angularJsonPath)) {
         console.log(chalk.red('Error: This does not appear to be an Angular project.'));
         console.log(chalk.dim('Please run this command in the root of your Angular project.'));
         process.exit(1);
     }
-    // Check if already initialized
     const componentsJsonPath = path.join(cwd, 'components.json');
     if (await fs.pathExists(componentsJsonPath)) {
         const overwrite = options.yes
@@ -70,200 +198,58 @@ export async function init(options) {
                 name: 'overwrite',
                 message: 'components.json already exists. Overwrite?',
                 initial: false,
-            })).overwrite;
+            }, { onCancel })).overwrite;
         if (!overwrite) {
             console.log(chalk.dim('Initialization cancelled.'));
             return;
         }
     }
-    let config;
-    let createShortcutRegistry = true;
-    if (options.defaults || options.yes) {
-        config = getDefaultConfig();
-    }
-    else {
-        const THEME_COLORS = {
-            zinc: '#71717a',
-            slate: '#64748b',
-            stone: '#78716c',
-            gray: '#6b7280',
-            neutral: '#737373',
-            red: '#ef4444',
-            rose: '#f43f5e',
-            orange: '#f97316', // bright orange
-            green: '#22c55e',
-            blue: '#3b82f6',
-            yellow: '#eab308',
-            violet: '#8b5cf6',
-            amber: '#d97706', // warm amber for preview
-        };
-        const themeChoices = [
-            { title: 'Zinc', value: 'zinc' },
-            { title: 'Slate', value: 'slate' },
-            { title: 'Stone', value: 'stone' },
-            { title: 'Gray', value: 'gray' },
-            { title: 'Neutral', value: 'neutral' },
-            { title: 'Red', value: 'red' },
-            { title: 'Rose', value: 'rose' },
-            { title: 'Orange', value: 'orange' },
-            { title: 'Green', value: 'green' },
-            { title: 'Blue', value: 'blue' },
-            { title: 'Yellow', value: 'yellow' },
-            { title: 'Violet', value: 'violet' },
-            { title: 'Amber', value: 'amber' },
-        ].map(c => ({
-            ...c,
-            title: `${chalk.hex(THEME_COLORS[c.value])('██')} ${c.title}`
-        }));
-        const baseColorChoices = [
-            { title: 'Neutral', value: 'neutral' },
-            { title: 'Slate', value: 'slate' },
-            { title: 'Stone', value: 'stone' },
-            { title: 'Gray', value: 'gray' },
-            { title: 'Zinc', value: 'zinc' },
-        ].map(c => ({
-            ...c,
-            title: `${chalk.hex(THEME_COLORS[c.value])('██')} ${c.title}`
-        }));
-        const responses = await prompts([
-            {
-                type: 'select',
-                name: 'baseColor',
-                message: 'Which color would you like to use as base color?',
-                choices: baseColorChoices,
-                initial: 0,
-            },
-            {
-                type: 'select',
-                name: 'theme',
-                message: 'Which color would you like to use for the main theme?',
-                choices: themeChoices,
-                initial: (prev) => {
-                    const index = themeChoices.findIndex(c => c.value === prev);
-                    return index === -1 ? 0 : index;
-                },
-            },
-            {
-                type: 'text',
-                name: 'componentsPath',
-                message: 'Where would you like to install components?',
-                initial: 'src/components/ui',
-            },
-            {
-                type: 'text',
-                name: 'utilsPath',
-                message: 'Where would you like to install utils?',
-                initial: 'src/components/lib',
-            },
-            {
-                type: 'text',
-                name: 'globalCss',
-                message: 'Where is your global styles file?',
-                initial: 'src/styles.scss',
-            },
-            {
-                type: 'confirm',
-                name: 'createShortcutRegistry',
-                message: 'Would you like to create a shortcut registry scaffold?',
-                initial: true,
-            },
-        ]);
-        config = {
-            $schema: 'https://shadcn-angular.dev/schema.json',
-            style: 'default',
-            tailwind: {
-                css: responses.globalCss,
-                baseColor: responses.baseColor,
-                theme: responses.theme,
-                cssVariables: true,
-            },
-            aliases: {
-                components: responses.componentsPath.replace('src/', '@/'), // Basic heuristic
-                utils: responses.utilsPath.replace('src/', '@/').replace('.ts', ''),
-                ui: responses.componentsPath.replace('src/', '@/'),
-            },
-        };
-        createShortcutRegistry = responses.createShortcutRegistry ?? true;
+    const { config, createShortcutRegistry } = options.defaults || options.yes
+        ? { config: getDefaultConfig(), createShortcutRegistry: true }
+        : await promptForConfig();
+    if (options.registry) {
+        config.registry = options.registry;
     }
     const spinner = ora('Initializing project...').start();
     try {
-        // Write components.json
         await fs.writeJson(componentsJsonPath, config, { spaces: 2 });
         spinner.text = 'Created components.json';
-        // Create utils directory and file
-        // Resolve path from the config alias, assuming @/ maps to src/ logic for file creation if not provided directly
-        // But we have the 'responses' object from CLI prompt only in the else block above!
-        // So we should rely on config to reconstruct the path, or better yet, if we are in 'defaults' mode, check what config is.
-        // If config came from defaults, aliases are set.
-        // We can reverse-map alias to path: @/ -> src/
         const libDir = resolveAliasOrPath(cwd, config.aliases.utils);
         await fs.ensureDir(libDir);
         await fs.writeFile(path.join(libDir, 'utils.ts'), getUtilsTemplate());
         spinner.text = 'Created utils.ts';
-        const shortcutServicePath = path.join(libDir, 'shortcut-binding.service.ts');
-        const shortcutServiceContent = await fetchLibFileContent('shortcut-binding.service.ts', options.branch);
-        await fs.writeFile(shortcutServicePath, shortcutServiceContent);
-        spinner.text = 'Created shortcut-binding.service.ts';
         if (createShortcutRegistry) {
+            const content = await fetchLibFileContent('shortcut-binding.service.ts', options.branch, options.remote, options.registry);
+            await fs.writeFile(path.join(libDir, 'shortcut-binding.service.ts'), content);
+            spinner.text = 'Created shortcut-binding.service.ts';
             await writeShortcutRegistryIndex(cwd, config, []);
             spinner.text = 'Created shortcut-registry.index.ts';
         }
-        // Create tailwind.css file in the same directory as the global styles
         const userStylesPath = resolveProjectPath(cwd, config.tailwind.css);
         const stylesDir = path.dirname(userStylesPath);
-        const tailwindCssPath = path.join(stylesDir, 'tailwind.css');
-        // Write the tailwind.css file with all Tailwind directives
         await fs.ensureDir(stylesDir);
-        await fs.writeFile(tailwindCssPath, getStylesTemplate(config.tailwind.baseColor, config.tailwind.theme));
+        await fs.writeFile(path.join(stylesDir, 'tailwind.css'), getStylesTemplate(config.tailwind.baseColor, config.tailwind.theme));
         spinner.text = 'Created tailwind.css';
-        // Add import to the user's global styles file if not already present
         let userStyles = await fs.pathExists(userStylesPath)
             ? await fs.readFile(userStylesPath, 'utf-8')
             : '';
-        const tailwindImport = '@import "./tailwind.css";';
         if (!userStyles.includes('tailwind.css')) {
-            // Add import at the top of the file
-            userStyles = tailwindImport + '\n\n' + userStyles;
+            userStyles = '@import "./tailwind.css";\n\n' + userStyles;
             await fs.writeFile(userStylesPath, userStyles);
             spinner.text = 'Added tailwind.css import to styles';
         }
-        // Create components/ui directory
         const uiDir = resolveAliasOrPath(cwd, config.aliases.ui);
         await fs.ensureDir(uiDir);
         spinner.text = 'Created components directory';
-        // Install dependencies
         spinner.text = 'Installing dependencies...';
-        const dependencies = [
-            'clsx',
-            'tailwind-merge',
-            'class-variance-authority',
-            'tailwindcss',
-            'postcss',
-            '@tailwindcss/postcss'
-        ];
-        await installPackages(dependencies, { cwd });
-        // Setup PostCSS - create .postcssrc.json which is the preferred format for Angular
+        await installMissingDeps(cwd);
         spinner.text = 'Configuring PostCSS...';
-        const postcssrcPath = path.join(cwd, '.postcssrc.json');
-        if (!await fs.pathExists(postcssrcPath)) {
-            const configContent = {
-                plugins: {
-                    '@tailwindcss/postcss': {}
-                }
-            };
-            await fs.writeJson(postcssrcPath, configContent, { spaces: 4 });
-        }
+        await setupPostcss(cwd);
+        await autoConfigureTsconfig(cwd, spinner);
         spinner.succeed(chalk.green('Project initialized successfully!'));
         console.log('\n' + chalk.bold('Next steps:'));
         console.log(chalk.dim('  1. Add components: ') + chalk.cyan('npx @gilav21/shadcn-angular add button'));
         console.log(chalk.dim('  2. Import and use in your templates'));
-        console.log(chalk.dim('  3. Update your ') + chalk.bold('tsconfig.json') + chalk.dim(' paths:'));
-        console.log(chalk.dim('    "compilerOptions": {'));
-        console.log(chalk.dim('      "baseUrl": ".",'));
-        console.log(chalk.dim('      "paths": {'));
-        console.log(chalk.dim('        "@/*": ["./src/*"]'));
-        console.log(chalk.dim('      }'));
-        console.log(chalk.dim('    }'));
         console.log('');
     }
     catch (error) {

package/dist/commands/list.d.ts

@@ -0,0 +1 @@
+export declare function list(): Promise<void>;

package/dist/commands/list.js

@@ -0,0 +1,50 @@
+import fs from 'fs-extra';
+import path from 'node:path';
+import chalk from 'chalk';
+import { getConfig } from '../utils/config.js';
+import { registry, getComponentNames } from '../registry/index.js';
+import { resolveProjectPath, aliasToProjectPath } from '../utils/paths.js';
+export async function list() {
+    const cwd = process.cwd();
+    const config = await getConfig(cwd);
+    if (!config) {
+        console.log(chalk.red('Error: components.json not found.'));
+        console.log(chalk.dim('Run `npx @gilav21/shadcn-angular init` first.'));
+        process.exit(1);
+    }
+    const uiBasePath = aliasToProjectPath(config.aliases.ui || 'src/components/ui');
+    const targetDir = resolveProjectPath(cwd, uiBasePath);
+    const statuses = [];
+    for (const name of getComponentNames()) {
+        const component = registry[name];
+        const allPresent = await allFilesExist(component.files, targetDir);
+        statuses.push({
+            name,
+            status: allPresent ? 'installed' : 'not installed',
+        });
+    }
+    const installed = statuses.filter(s => s.status === 'installed').sort((a, b) => a.name.localeCompare(b.name));
+    const notInstalled = statuses.filter(s => s.status === 'not installed').sort((a, b) => a.name.localeCompare(b.name));
+    console.log(chalk.bold(`\nInstalled (${installed.length}):`));
+    if (installed.length === 0) {
+        console.log(chalk.dim('  None'));
+    }
+    else {
+        for (const s of installed) {
+            console.log(chalk.green('  ✓ ') + s.name);
+        }
+    }
+    console.log(chalk.bold(`\nAvailable (${notInstalled.length}):`));
+    for (const s of notInstalled) {
+        console.log(chalk.dim('  - ') + s.name);
+    }
+    console.log('');
+}
+async function allFilesExist(files, targetDir) {
+    for (const file of files) {
+        if (!await fs.pathExists(path.join(targetDir, file))) {
+            return false;
+        }
+    }
+    return true;
+}