@gilav21/shadcn-angular 0.0.15 → 0.0.16

package/dist/commands/add.js

@@ -7,10 +7,12 @@ import ora from 'ora';
 import { getConfig } from '../utils/config.js';
 import { registry } from '../registry/index.js';
 import { installPackages } from '../utils/package-manager.js';
+import { writeShortcutRegistryIndex } from '../utils/shortcut-registry.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 // Base URL for the component registry (GitHub raw content)
 const REGISTRY_BASE_URL = 'https://raw.githubusercontent.com/gilav21/shadcn-angular/master/packages/components/ui';
+const LIB_REGISTRY_BASE_URL = 'https://raw.githubusercontent.com/gilav21/shadcn-angular/master/packages/components/lib';
 // Components source directory (relative to CLI dist folder) for local dev
 function getLocalComponentsDir() {
     // From dist/commands/add.js -> packages/components/ui
@@ -25,6 +27,26 @@ function getLocalComponentsDir() {
     }
     return null;
 }
+function getLocalLibDir() {
+    const fromDist = path.resolve(__dirname, '../../../components/lib');
+    if (fs.existsSync(fromDist)) {
+        return fromDist;
+    }
+    return null;
+}
+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}`);
+    }
+    return resolved;
+}
+function aliasToProjectPath(aliasOrPath) {
+    return aliasOrPath.startsWith('@/')
+        ? path.join('src', aliasOrPath.slice(2))
+        : aliasOrPath;
+}
 async function fetchComponentContent(file, options) {
     const localDir = getLocalComponentsDir();
     // 1. Prefer local if available and not forced remote
@@ -50,6 +72,36 @@ async function fetchComponentContent(file, options) {
         throw error;
     }
 }
+async function fetchLibContent(file, options) {
+    const localDir = getLocalLibDir();
+    if (localDir && !options.remote) {
+        const localPath = path.join(localDir, file);
+        if (await fs.pathExists(localPath)) {
+            return fs.readFile(localPath, 'utf-8');
+        }
+    }
+    const url = `${LIB_REGISTRY_BASE_URL}/${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 collectInstalledShortcutEntries(targetDir) {
+    const entries = [];
+    for (const definition of Object.values(registry)) {
+        if (!definition.shortcutDefinitions?.length) {
+            continue;
+        }
+        for (const shortcutDefinition of definition.shortcutDefinitions) {
+            const sourcePath = path.join(targetDir, shortcutDefinition.sourceFile);
+            if (fs.existsSync(sourcePath)) {
+                entries.push(shortcutDefinition);
+            }
+        }
+    }
+    return entries;
+}
 export async function add(components, options) {
     const cwd = process.cwd();
     // Load config
@@ -103,9 +155,8 @@ export async function add(components, options) {
         }
     };
     componentsToAdd.forEach(c => resolveDeps(c));
-    const targetDir = options.path
-        ? path.join(cwd, options.path)
-        : path.join(cwd, 'src/components/ui');
+    const uiBasePath = options.path ?? aliasToProjectPath(config.aliases.ui || 'src/components/ui');
+    const targetDir = resolveProjectPath(cwd, uiBasePath);
     // Check for existing files and diff
     const componentsToInstall = [];
     const componentsToSkip = [];
@@ -125,7 +176,7 @@ export async function add(components, options) {
                     // Transform imports for comparison
                     const utilsAlias = config.aliases.utils;
                     remoteContent = remoteContent.replace(/(\.\.\/)+lib\/utils/g, utilsAlias);
-                    const normalize = (str) => str.replace(/\s+/g, '').trim();
+                    const normalize = (str) => str.replace(/\r\n/g, '\n').trim();
                     if (normalize(localContent) !== normalize(remoteContent)) {
                         hasChanges = true;
                     }
@@ -252,6 +303,18 @@ export async function add(components, options) {
                 }
             }
         }
+        const shortcutEntries = collectInstalledShortcutEntries(targetDir);
+        if (shortcutEntries.length > 0) {
+            const utilsPathResolved = resolveProjectPath(cwd, aliasToProjectPath(config.aliases.utils) + '.ts');
+            const utilsDir = path.dirname(utilsPathResolved);
+            const shortcutServicePath = path.join(utilsDir, 'shortcut-binding.service.ts');
+            if (!await fs.pathExists(shortcutServicePath)) {
+                const shortcutServiceContent = await fetchLibContent('shortcut-binding.service.ts', options);
+                await fs.ensureDir(utilsDir);
+                await fs.writeFile(shortcutServicePath, shortcutServiceContent);
+            }
+        }
+        await writeShortcutRegistryIndex(cwd, config, shortcutEntries);
         if (componentsToSkip.length > 0) {
             console.log('\n' + chalk.dim('Components skipped (up to date):'));
             componentsToSkip.forEach(name => {

package/dist/commands/init.js

@@ -1,12 +1,53 @@
 import fs from 'fs-extra';
 import path from 'path';
+import { fileURLToPath } from 'url';
 import prompts from 'prompts';
 import chalk from 'chalk';
 import ora from 'ora';
-import { execa } from 'execa';
 import { getDefaultConfig } from '../utils/config.js';
 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';
+const LIB_REGISTRY_BASE_URL = 'https://raw.githubusercontent.com/gilav21/shadcn-angular/master/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) {
+    const localLibDir = getLocalLibDir();
+    if (localLibDir) {
+        const localPath = path.join(localLibDir, file);
+        if (await fs.pathExists(localPath)) {
+            return fs.readFile(localPath, 'utf-8');
+        }
+    }
+    const url = `${LIB_REGISTRY_BASE_URL}/${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}`);
+    }
+    return resolved;
+}
+function resolveAliasOrPath(cwd, aliasOrPath) {
+    const normalized = aliasOrPath.startsWith('@/')
+        ? path.join('src', aliasOrPath.slice(2))
+        : aliasOrPath;
+    return resolveProjectPath(cwd, normalized);
+}
 export async function init(options) {
     console.log(chalk.bold('\n🎨 Welcome to shadcn-angular!\n'));
     const cwd = process.cwd();
@@ -20,20 +61,24 @@ export async function init(options) {
     // Check if already initialized
     const componentsJsonPath = path.join(cwd, 'components.json');
     if (await fs.pathExists(componentsJsonPath)) {
-        const { overwrite } = await prompts({
-            type: 'confirm',
-            name: 'overwrite',
-            message: 'components.json already exists. Overwrite?',
-            initial: false,
-        });
+        const overwrite = options.yes
+            ? true
+            : (await prompts({
+                type: 'confirm',
+                name: 'overwrite',
+                message: 'components.json already exists. Overwrite?',
+                initial: false,
+            })).overwrite;
         if (!overwrite) {
             console.log(chalk.dim('Initialization cancelled.'));
             return;
         }
     }
     let config;
+    let createShortcutRegistry = true;
     if (options.defaults || options.yes) {
         config = getDefaultConfig();
+        createShortcutRegistry = true;
     }
     else {
         const THEME_COLORS = {
@@ -115,6 +160,12 @@ export async function init(options) {
                 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',
@@ -131,6 +182,7 @@ export async function init(options) {
                 ui: responses.componentsPath.replace('src/', '@/'),
             },
         };
+        createShortcutRegistry = responses.createShortcutRegistry ?? true;
     }
     const spinner = ora('Initializing project...').start();
     try {
@@ -143,19 +195,28 @@ export async function init(options) {
         // 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 utilsPathResolved = config.aliases.utils.replace('@/', 'src/');
-        const utilsDir = path.dirname(path.join(cwd, utilsPathResolved + '.ts')); // utils usually ends in path/to/utils
+        const utilsPathResolved = resolveAliasOrPath(cwd, config.aliases.utils + '.ts');
+        const utilsDir = path.dirname(utilsPathResolved); // utils usually ends in path/to/utils
         await fs.ensureDir(utilsDir);
-        await fs.writeFile(path.join(cwd, utilsPathResolved + '.ts'), getUtilsTemplate());
+        await fs.writeFile(utilsPathResolved, getUtilsTemplate());
         spinner.text = 'Created utils.ts';
+        const shortcutServicePath = path.join(utilsDir, 'shortcut-binding.service.ts');
+        const shortcutServiceContent = await fetchLibFileContent('shortcut-binding.service.ts');
+        await fs.writeFile(shortcutServicePath, shortcutServiceContent);
+        spinner.text = 'Created shortcut-binding.service.ts';
+        if (createShortcutRegistry) {
+            await writeShortcutRegistryIndex(cwd, config, []);
+            spinner.text = 'Created shortcut-registry.index.ts';
+        }
         // Create tailwind.css file in the same directory as the global styles
-        const stylesDir = path.dirname(path.join(cwd, config.tailwind.css));
+        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));
         spinner.text = 'Created tailwind.css';
         // Add import to the user's global styles file if not already present
-        const userStylesPath = path.join(cwd, config.tailwind.css);
         let userStyles = await fs.pathExists(userStylesPath)
             ? await fs.readFile(userStylesPath, 'utf-8')
             : '';
@@ -167,8 +228,7 @@ export async function init(options) {
             spinner.text = 'Added tailwind.css import to styles';
         }
         // Create components/ui directory
-        const uiPathResolved = config.aliases.ui.replace('@/', 'src/');
-        const uiDir = path.join(cwd, uiPathResolved);
+        const uiDir = resolveAliasOrPath(cwd, config.aliases.ui);
         await fs.ensureDir(uiDir);
         spinner.text = 'Created components directory';
         // Install dependencies
@@ -181,7 +241,7 @@ export async function init(options) {
             'postcss',
             '@tailwindcss/postcss'
         ];
-        await execa('npm', ['install', ...dependencies], { cwd });
+        await installPackages(dependencies, { cwd });
         // Setup PostCSS - create .postcssrc.json which is the preferred format for Angular
         spinner.text = 'Configuring PostCSS...';
         const postcssrcPath = path.join(cwd, '.postcssrc.json');

package/dist/registry/index.d.ts

@@ -3,6 +3,11 @@ export interface ComponentDefinition {
     files: string[];
     dependencies?: string[];
     npmDependencies?: string[];
+    shortcutDefinitions?: {
+        exportName: string;
+        componentName: string;
+        sourceFile: string;
+    }[];
 }
 export type ComponentName = keyof typeof registry;
 export declare const registry: Record<string, ComponentDefinition>;

package/dist/registry/index.js

@@ -39,6 +39,7 @@ export const registry = {
     button: {
         name: 'button',
         files: ['button.component.ts'],
+        dependencies: ['ripple'],
     },
     'button-group': {
         name: 'button-group',
@@ -79,6 +80,13 @@ export const registry = {
         name: 'command',
         files: ['command.component.ts'],
         dependencies: ['dialog'],
+        shortcutDefinitions: [
+            {
+                exportName: 'COMMAND_DIALOG_SHORTCUT_DEFINITIONS',
+                componentName: 'command-dialog',
+                sourceFile: 'command.component.ts',
+            },
+        ],
     },
     'context-menu': {
         name: 'context-menu',
@@ -342,7 +350,7 @@ export const registry = {
     'emoji-picker': {
         name: 'emoji-picker',
         files: ['emoji-picker.component.ts', 'emoji-data.ts'],
-        dependencies: ['button', 'input', 'scroll-area', 'popover'],
+        dependencies: ['input', 'scroll-area', 'tooltip'],
     },
     'rich-text-editor': {
         name: 'rich-text-editor',
@@ -351,18 +359,30 @@ export const registry = {
             'rich-text-toolbar.component.ts',
             'rich-text-sanitizer.service.ts',
             'rich-text-markdown.service.ts',
+            'rich-text-paste-normalizer.service.ts',
+            'rich-text-command-registry.service.ts',
             'rich-text-mention.component.ts',
             'rich-text-image-resizer.component.ts',
+            'rich-text-locales.ts',
         ],
         dependencies: [
             'button',
             'separator',
             'popover',
             'emoji-picker',
+            'autocomplete',
             'select',
             'input',
+            'dialog',
             'scroll-area',
         ],
+        shortcutDefinitions: [
+            {
+                exportName: 'RICH_TEXT_SHORTCUT_DEFINITIONS',
+                componentName: 'rich-text-editor',
+                sourceFile: 'rich-text-editor.component.ts',
+            },
+        ],
     },
     // Chart Components
     'pie-chart': {
@@ -464,4 +484,75 @@ export const registry = {
         files: ['split-button.component.ts'],
         dependencies: ['button', 'dropdown-menu'],
     },
+    // Animations
+    'gradient-text': {
+        name: 'gradient-text',
+        files: ['gradient-text.component.ts'],
+    },
+    'flip-text': {
+        name: 'flip-text',
+        files: ['flip-text.component.ts'],
+    },
+    meteors: {
+        name: 'meteors',
+        files: ['meteors.component.ts'],
+    },
+    'shine-border': {
+        name: 'shine-border',
+        files: ['shine-border.component.ts'],
+    },
+    'scroll-progress': {
+        name: 'scroll-progress',
+        files: ['scroll-progress.component.ts'],
+    },
+    'blur-fade': {
+        name: 'blur-fade',
+        files: ['blur-fade.component.ts'],
+    },
+    ripple: {
+        name: 'ripple',
+        files: ['ripple.directive.ts'],
+    },
+    marquee: {
+        name: 'marquee',
+        files: ['marquee.component.ts'],
+    },
+    'word-rotate': {
+        name: 'word-rotate',
+        files: ['word-rotate.component.ts'],
+    },
+    'morphing-text': {
+        name: 'morphing-text',
+        files: ['morphing-text.component.ts'],
+    },
+    'typing-animation': {
+        name: 'typing-animation',
+        files: ['typing-animation.component.ts'],
+    },
+    'wobble-card': {
+        name: 'wobble-card',
+        files: ['wobble-card.component.ts'],
+    },
+    magnetic: {
+        name: 'magnetic',
+        files: ['magnetic.directive.ts'],
+    },
+    orbit: {
+        name: 'orbit',
+        files: ['orbit.component.ts'],
+    },
+    'stagger-children': {
+        name: 'stagger-children',
+        files: ['stagger-children.component.ts'],
+    },
+    particles: {
+        name: 'particles',
+        files: ['particles.component.ts'],
+    },
+    // Kanban
+    kanban: {
+        name: 'kanban',
+        files: ['kanban.component.ts'],
+        dependencies: ['badge', 'avatar', 'scroll-area', 'separator'],
+    },
 };

package/dist/utils/shortcut-registry.d.ts

@@ -0,0 +1,7 @@
+import type { Config } from './config.js';
+export interface ShortcutRegistryEntry {
+    exportName: string;
+    componentName: string;
+    sourceFile: string;
+}
+export declare function writeShortcutRegistryIndex(cwd: string, config: Config, entries: ShortcutRegistryEntry[]): Promise<string>;

package/dist/utils/shortcut-registry.js

@@ -0,0 +1,58 @@
+import fs from 'fs-extra';
+import path from 'path';
+function aliasToProjectPath(aliasOrPath) {
+    return aliasOrPath.startsWith('@/')
+        ? path.join('src', aliasOrPath.slice(2))
+        : aliasOrPath;
+}
+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}`);
+    }
+    return resolved;
+}
+function getShortcutRegistryIndexPath(cwd, config) {
+    const utilsFilePath = resolveProjectPath(cwd, aliasToProjectPath(config.aliases.utils) + '.ts');
+    const utilsDir = path.dirname(utilsFilePath);
+    return path.join(utilsDir, 'shortcut-registry.index.ts');
+}
+export async function writeShortcutRegistryIndex(cwd, config, entries) {
+    const registryPath = getShortcutRegistryIndexPath(cwd, config);
+    await fs.ensureDir(path.dirname(registryPath));
+    const uniqueEntries = Array.from(new Map(entries.map(entry => [entry.exportName, entry])).values())
+        .sort((a, b) => a.exportName.localeCompare(b.exportName));
+    const uiAlias = config.aliases.ui;
+    const utilsAliasDir = config.aliases.utils.includes('/')
+        ? config.aliases.utils.slice(0, config.aliases.utils.lastIndexOf('/'))
+        : config.aliases.utils;
+    const shortcutServiceImport = `${utilsAliasDir}/shortcut-binding.service`;
+    const imports = uniqueEntries
+        .map(entry => {
+        const importPath = `${uiAlias}/${entry.sourceFile.replace(/\.ts$/, '')}`;
+        return `import { ${entry.exportName} } from '${importPath}';`;
+    })
+        .join('\n');
+    const catalogItems = uniqueEntries
+        .map(entry => `  { componentName: '${entry.componentName}', definitions: ${entry.exportName} },`)
+        .join('\n');
+    const content = `// Auto-generated by shadcn-angular CLI. Do not edit manually.
+import type { ShortcutBindingService, ShortcutDefinition } from '${shortcutServiceImport}';
+${imports ? `${imports}\n` : ''}
+export const GENERATED_SHORTCUT_CATALOG: ReadonlyArray<{
+  componentName: string;
+  definitions: ReadonlyArray<ShortcutDefinition>;
+}> = [
+${catalogItems}
+];
+
+export function registerGeneratedShortcutCatalog(shortcuts: ShortcutBindingService): void {
+  for (const entry of GENERATED_SHORTCUT_CATALOG) {
+    shortcuts.defineShortcuts(entry.componentName, [...entry.definitions]);
+  }
+}
+`;
+    await fs.writeFile(registryPath, content);
+    return registryPath;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gilav21/shadcn-angular",
-    "version": "0.0.15",
+    "version": "0.0.16",
     "description": "CLI for adding shadcn-angular components to your project",
     "bin": {
         "shadcn-angular": "./dist/index.js"

package/src/commands/add.ts

@@ -4,18 +4,20 @@ import { fileURLToPath } from 'url';
 import prompts from 'prompts';
 import chalk from 'chalk';
 import ora from 'ora';
-import { getConfig } from '../utils/config.js';
-import { registry, type ComponentName } from '../registry/index.js';
-import { installPackages } from '../utils/package-manager.js';
+import { getConfig } from '../utils/config.js';
+import { registry, type ComponentName } from '../registry/index.js';
+import { installPackages } from '../utils/package-manager.js';
+import { writeShortcutRegistryIndex, type ShortcutRegistryEntry } from '../utils/shortcut-registry.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 // Base URL for the component registry (GitHub raw content)
-const REGISTRY_BASE_URL = 'https://raw.githubusercontent.com/gilav21/shadcn-angular/master/packages/components/ui';
+const REGISTRY_BASE_URL = 'https://raw.githubusercontent.com/gilav21/shadcn-angular/master/packages/components/ui';
+const LIB_REGISTRY_BASE_URL = 'https://raw.githubusercontent.com/gilav21/shadcn-angular/master/packages/components/lib';
 
 // Components source directory (relative to CLI dist folder) for local dev
-function getLocalComponentsDir(): string | null {
+function getLocalComponentsDir(): string | null {
     // From dist/commands/add.js -> packages/components/ui
     const fromDist = path.resolve(__dirname, '../../../components/ui');
     if (fs.existsSync(fromDist)) {
@@ -29,15 +31,38 @@ function getLocalComponentsDir(): string | null {
     return null;
 }
 
-interface AddOptions {
+interface AddOptions {
     yes?: boolean;
     overwrite?: boolean;
     all?: boolean;
     path?: string;
-    remote?: boolean; // Force remote fetch
-}
-
-async function fetchComponentContent(file: string, options: AddOptions): Promise<string> {
+    remote?: boolean; // Force remote fetch
+}
+
+function getLocalLibDir(): string | null {
+    const fromDist = path.resolve(__dirname, '../../../components/lib');
+    if (fs.existsSync(fromDist)) {
+        return fromDist;
+    }
+    return null;
+}
+
+function resolveProjectPath(cwd: string, inputPath: string): string {
+    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}`);
+    }
+    return resolved;
+}
+
+function aliasToProjectPath(aliasOrPath: string): string {
+    return aliasOrPath.startsWith('@/')
+        ? path.join('src', aliasOrPath.slice(2))
+        : aliasOrPath;
+}
+
+async function fetchComponentContent(file: string, options: AddOptions): Promise<string> {
     const localDir = getLocalComponentsDir();
 
     // 1. Prefer local if available and not forced remote
@@ -62,7 +87,41 @@ async function fetchComponentContent(file: string, options: AddOptions): Promise
         }
         throw error;
     }
-}
+}
+
+async function fetchLibContent(file: string, options: AddOptions): Promise<string> {
+    const localDir = getLocalLibDir();
+
+    if (localDir && !options.remote) {
+        const localPath = path.join(localDir, file);
+        if (await fs.pathExists(localPath)) {
+            return fs.readFile(localPath, 'utf-8');
+        }
+    }
+
+    const url = `${LIB_REGISTRY_BASE_URL}/${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 collectInstalledShortcutEntries(targetDir: string): ShortcutRegistryEntry[] {
+    const entries: ShortcutRegistryEntry[] = [];
+    for (const definition of Object.values(registry)) {
+        if (!definition.shortcutDefinitions?.length) {
+            continue;
+        }
+        for (const shortcutDefinition of definition.shortcutDefinitions) {
+            const sourcePath = path.join(targetDir, shortcutDefinition.sourceFile);
+            if (fs.existsSync(sourcePath)) {
+                entries.push(shortcutDefinition);
+            }
+        }
+    }
+    return entries;
+}
 
 export async function add(components: string[], options: AddOptions) {
     const cwd = process.cwd();
@@ -121,9 +180,8 @@ export async function add(components: string[], options: AddOptions) {
     };
     componentsToAdd.forEach(c => resolveDeps(c));
 
-    const targetDir = options.path
-        ? path.join(cwd, options.path)
-        : path.join(cwd, 'src/components/ui');
+    const uiBasePath = options.path ?? aliasToProjectPath(config.aliases.ui || 'src/components/ui');
+    const targetDir = resolveProjectPath(cwd, uiBasePath);
 
     // Check for existing files and diff
     const componentsToInstall: ComponentName[] = [];
@@ -149,7 +207,7 @@ export async function add(components: string[], options: AddOptions) {
                     const utilsAlias = config.aliases.utils;
                     remoteContent = remoteContent.replace(/(\.\.\/)+lib\/utils/g, utilsAlias);
 
-                    const normalize = (str: string) => str.replace(/\s+/g, '').trim();
+                    const normalize = (str: string) => str.replace(/\r\n/g, '\n').trim();
                     if (normalize(localContent) !== normalize(remoteContent)) {
                         hasChanges = true;
                     }
@@ -265,8 +323,8 @@ export async function add(components: string[], options: AddOptions) {
             spinner.info('No new components installed.');
         }
 
-        if (finalComponents.length > 0) {
-            const npmDependencies = new Set<string>();
+        if (finalComponents.length > 0) {
+            const npmDependencies = new Set<string>();
             for (const name of finalComponents) {
                 const component = registry[name];
                 if (component.npmDependencies) {
@@ -283,11 +341,26 @@ export async function add(components: string[], options: AddOptions) {
                     depSpinner.fail('Failed to install dependencies.');
                     console.error(e);
                 }
-            }
-        }
-
-        if (componentsToSkip.length > 0) {
-            console.log('\n' + chalk.dim('Components skipped (up to date):'));
+            }
+        }
+
+        const shortcutEntries = collectInstalledShortcutEntries(targetDir);
+        if (shortcutEntries.length > 0) {
+            const utilsPathResolved = resolveProjectPath(cwd, aliasToProjectPath(config.aliases.utils) + '.ts');
+            const utilsDir = path.dirname(utilsPathResolved);
+            const shortcutServicePath = path.join(utilsDir, 'shortcut-binding.service.ts');
+
+            if (!await fs.pathExists(shortcutServicePath)) {
+                const shortcutServiceContent = await fetchLibContent('shortcut-binding.service.ts', options);
+                await fs.ensureDir(utilsDir);
+                await fs.writeFile(shortcutServicePath, shortcutServiceContent);
+            }
+        }
+
+        await writeShortcutRegistryIndex(cwd, config, shortcutEntries);
+
+        if (componentsToSkip.length > 0) {
+            console.log('\n' + chalk.dim('Components skipped (up to date):'));
             componentsToSkip.forEach(name => {
                 console.log(chalk.dim('  - ') + chalk.gray(name));
             });

package/src/commands/init.ts

@@ -1,19 +1,66 @@
-import fs from 'fs-extra';
-import path from 'path';
-import prompts from 'prompts';
-import chalk from 'chalk';
-import ora from 'ora';
-import { execa } from 'execa';
-import { getDefaultConfig, type Config } from '../utils/config.js';
-import { getStylesTemplate } from '../templates/styles.js';
-import { getUtilsTemplate } from '../templates/utils.js';
-
-interface InitOptions {
-    yes?: boolean;
-    defaults?: boolean;
-}
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import prompts from 'prompts';
+import chalk from 'chalk';
+import ora from 'ora';
+import { getDefaultConfig, type Config } from '../utils/config.js';
+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';
+
+const LIB_REGISTRY_BASE_URL = 'https://raw.githubusercontent.com/gilav21/shadcn-angular/master/packages/components/lib';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+function getLocalLibDir(): string | null {
+    const fromDist = path.resolve(__dirname, '../../../components/lib');
+    if (fs.existsSync(fromDist)) {
+        return fromDist;
+    }
+    return null;
+}
+
+async function fetchLibFileContent(file: string): Promise<string> {
+    const localLibDir = getLocalLibDir();
+    if (localLibDir) {
+        const localPath = path.join(localLibDir, file);
+        if (await fs.pathExists(localPath)) {
+            return fs.readFile(localPath, 'utf-8');
+        }
+    }
+
+    const url = `${LIB_REGISTRY_BASE_URL}/${file}`;
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`Failed to fetch library file from ${url}: ${response.statusText}`);
+    }
+    return response.text();
+}
 
-export async function init(options: InitOptions) {
+interface InitOptions {
+    yes?: boolean;
+    defaults?: boolean;
+}
+
+function resolveProjectPath(cwd: string, inputPath: string): string {
+    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}`);
+    }
+    return resolved;
+}
+
+function resolveAliasOrPath(cwd: string, aliasOrPath: string): string {
+    const normalized = aliasOrPath.startsWith('@/')
+        ? path.join('src', aliasOrPath.slice(2))
+        : aliasOrPath;
+    return resolveProjectPath(cwd, normalized);
+}
+
+export async function init(options: InitOptions) {
     console.log(chalk.bold('\n🎨 Welcome to shadcn-angular!\n'));
 
     const cwd = process.cwd();
@@ -26,26 +73,30 @@ export async function init(options: InitOptions) {
         process.exit(1);
     }
 
-    // Check if already initialized
-    const componentsJsonPath = path.join(cwd, 'components.json');
-    if (await fs.pathExists(componentsJsonPath)) {
-        const { overwrite } = await prompts({
-            type: 'confirm',
-            name: 'overwrite',
-            message: 'components.json already exists. Overwrite?',
-            initial: false,
-        });
-        if (!overwrite) {
-            console.log(chalk.dim('Initialization cancelled.'));
-            return;
+    // Check if already initialized
+    const componentsJsonPath = path.join(cwd, 'components.json');
+    if (await fs.pathExists(componentsJsonPath)) {
+        const overwrite = options.yes
+            ? true
+            : (await prompts({
+                type: 'confirm',
+                name: 'overwrite',
+                message: 'components.json already exists. Overwrite?',
+                initial: false,
+            })).overwrite;
+        if (!overwrite) {
+            console.log(chalk.dim('Initialization cancelled.'));
+            return;
         }
     }
 
-    let config: Config;
+    let config: Config;
+    let createShortcutRegistry = true;
 
-    if (options.defaults || options.yes) {
-        config = getDefaultConfig();
-    } else {
+    if (options.defaults || options.yes) {
+        config = getDefaultConfig();
+        createShortcutRegistry = true;
+    } else {
         const THEME_COLORS: Record<string, string> = {
             zinc: '#71717a',
             slate: '#64748b',
@@ -123,16 +174,22 @@ export async function init(options: InitOptions) {
                 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: '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',
+        config = {
+            $schema: 'https://shadcn-angular.dev/schema.json',
             style: 'default',
             tailwind: {
                 css: responses.globalCss,
@@ -144,9 +201,10 @@ export async function init(options: InitOptions) {
                 components: responses.componentsPath.replace('src/', '@/'), // Basic heuristic
                 utils: responses.utilsPath.replace('src/', '@/').replace('.ts', ''),
                 ui: responses.componentsPath.replace('src/', '@/'),
-            },
-        };
-    }
+            },
+        };
+        createShortcutRegistry = responses.createShortcutRegistry ?? true;
+    }
 
     const spinner = ora('Initializing project...').start();
 
@@ -162,26 +220,37 @@ export async function init(options: InitOptions) {
         // If config came from defaults, aliases are set.
         // We can reverse-map alias to path: @/ -> src/
 
-        const utilsPathResolved = config.aliases.utils.replace('@/', 'src/');
-        const utilsDir = path.dirname(path.join(cwd, utilsPathResolved + '.ts')); // utils usually ends in path/to/utils
-
-        await fs.ensureDir(utilsDir);
-        await fs.writeFile(path.join(cwd, utilsPathResolved + '.ts'), getUtilsTemplate());
-        spinner.text = 'Created utils.ts';
-
-        // Create tailwind.css file in the same directory as the global styles
-        const stylesDir = path.dirname(path.join(cwd, config.tailwind.css));
-        const tailwindCssPath = path.join(stylesDir, 'tailwind.css');
-
-        // Write the tailwind.css file with all Tailwind directives
-        await fs.writeFile(tailwindCssPath, 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
-        const userStylesPath = path.join(cwd, config.tailwind.css);
-        let userStyles = await fs.pathExists(userStylesPath)
-            ? await fs.readFile(userStylesPath, 'utf-8')
-            : '';
+        const utilsPathResolved = resolveAliasOrPath(cwd, config.aliases.utils + '.ts');
+        const utilsDir = path.dirname(utilsPathResolved); // utils usually ends in path/to/utils
+
+        await fs.ensureDir(utilsDir);
+        await fs.writeFile(utilsPathResolved, getUtilsTemplate());
+        spinner.text = 'Created utils.ts';
+
+        const shortcutServicePath = path.join(utilsDir, 'shortcut-binding.service.ts');
+        const shortcutServiceContent = await fetchLibFileContent('shortcut-binding.service.ts');
+        await fs.writeFile(shortcutServicePath, shortcutServiceContent);
+        spinner.text = 'Created shortcut-binding.service.ts';
+
+        if (createShortcutRegistry) {
+            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));
+        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')) {
@@ -189,25 +258,24 @@ export async function init(options: InitOptions) {
             userStyles = tailwindImport + '\n\n' + userStyles;
             await fs.writeFile(userStylesPath, userStyles);
             spinner.text = 'Added tailwind.css import to styles';
-        }
-
-        // Create components/ui directory
-        const uiPathResolved = config.aliases.ui.replace('@/', 'src/');
-        const uiDir = path.join(cwd, uiPathResolved);
-        await fs.ensureDir(uiDir);
-        spinner.text = 'Created components directory';
+        }
+
+        // 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',
+        const dependencies = [
+            'clsx',
+            'tailwind-merge',
             'class-variance-authority',
             'tailwindcss',
-            'postcss',
-            '@tailwindcss/postcss'
-        ];
-        await execa('npm', ['install', ...dependencies], { cwd });
+            'postcss',
+            '@tailwindcss/postcss'
+        ];
+        await installPackages(dependencies, { cwd });
 
         // Setup PostCSS - create .postcssrc.json which is the preferred format for Angular
         spinner.text = 'Configuring PostCSS...';

package/src/registry/index.ts

@@ -6,6 +6,11 @@ export interface ComponentDefinition {
   files: string[]; // Relative paths to component files
   dependencies?: string[]; // Other components this depends on
   npmDependencies?: string[]; // NPM packages this depends on
+  shortcutDefinitions?: {
+    exportName: string;
+    componentName: string;
+    sourceFile: string;
+  }[];
 }
 
 export type ComponentName = keyof typeof registry;
@@ -49,6 +54,7 @@ export const registry: Record<string, ComponentDefinition> = {
   button: {
     name: 'button',
     files: ['button.component.ts'],
+    dependencies: ['ripple'],
   },
   'button-group': {
     name: 'button-group',
@@ -89,6 +95,13 @@ export const registry: Record<string, ComponentDefinition> = {
     name: 'command',
     files: ['command.component.ts'],
     dependencies: ['dialog'],
+    shortcutDefinitions: [
+      {
+        exportName: 'COMMAND_DIALOG_SHORTCUT_DEFINITIONS',
+        componentName: 'command-dialog',
+        sourceFile: 'command.component.ts',
+      },
+    ],
   },
   'context-menu': {
     name: 'context-menu',
@@ -353,7 +366,7 @@ export const registry: Record<string, ComponentDefinition> = {
   'emoji-picker': {
     name: 'emoji-picker',
     files: ['emoji-picker.component.ts', 'emoji-data.ts'],
-    dependencies: ['button', 'input', 'scroll-area', 'popover'],
+    dependencies: ['input', 'scroll-area', 'tooltip'],
   },
   'rich-text-editor': {
     name: 'rich-text-editor',
@@ -362,18 +375,30 @@ export const registry: Record<string, ComponentDefinition> = {
       'rich-text-toolbar.component.ts',
       'rich-text-sanitizer.service.ts',
       'rich-text-markdown.service.ts',
+      'rich-text-paste-normalizer.service.ts',
+      'rich-text-command-registry.service.ts',
       'rich-text-mention.component.ts',
       'rich-text-image-resizer.component.ts',
+      'rich-text-locales.ts',
     ],
     dependencies: [
       'button',
       'separator',
       'popover',
       'emoji-picker',
+      'autocomplete',
       'select',
       'input',
+      'dialog',
       'scroll-area',
     ],
+    shortcutDefinitions: [
+      {
+        exportName: 'RICH_TEXT_SHORTCUT_DEFINITIONS',
+        componentName: 'rich-text-editor',
+        sourceFile: 'rich-text-editor.component.ts',
+      },
+    ],
   },
   // Chart Components
   'pie-chart': {
@@ -475,4 +500,75 @@ export const registry: Record<string, ComponentDefinition> = {
     files: ['split-button.component.ts'],
     dependencies: ['button', 'dropdown-menu'],
   },
+  // Animations
+  'gradient-text': {
+    name: 'gradient-text',
+    files: ['gradient-text.component.ts'],
+  },
+  'flip-text': {
+    name: 'flip-text',
+    files: ['flip-text.component.ts'],
+  },
+  meteors: {
+    name: 'meteors',
+    files: ['meteors.component.ts'],
+  },
+  'shine-border': {
+    name: 'shine-border',
+    files: ['shine-border.component.ts'],
+  },
+  'scroll-progress': {
+    name: 'scroll-progress',
+    files: ['scroll-progress.component.ts'],
+  },
+  'blur-fade': {
+    name: 'blur-fade',
+    files: ['blur-fade.component.ts'],
+  },
+  ripple: {
+    name: 'ripple',
+    files: ['ripple.directive.ts'],
+  },
+  marquee: {
+    name: 'marquee',
+    files: ['marquee.component.ts'],
+  },
+  'word-rotate': {
+    name: 'word-rotate',
+    files: ['word-rotate.component.ts'],
+  },
+  'morphing-text': {
+    name: 'morphing-text',
+    files: ['morphing-text.component.ts'],
+  },
+  'typing-animation': {
+    name: 'typing-animation',
+    files: ['typing-animation.component.ts'],
+  },
+  'wobble-card': {
+    name: 'wobble-card',
+    files: ['wobble-card.component.ts'],
+  },
+  magnetic: {
+    name: 'magnetic',
+    files: ['magnetic.directive.ts'],
+  },
+  orbit: {
+    name: 'orbit',
+    files: ['orbit.component.ts'],
+  },
+  'stagger-children': {
+    name: 'stagger-children',
+    files: ['stagger-children.component.ts'],
+  },
+  particles: {
+    name: 'particles',
+    files: ['particles.component.ts'],
+  },
+  // Kanban
+  kanban: {
+    name: 'kanban',
+    files: ['kanban.component.ts'],
+    dependencies: ['badge', 'avatar', 'scroll-area', 'separator'],
+  },
 };

package/src/utils/shortcut-registry.ts

@@ -0,0 +1,79 @@
+import fs from 'fs-extra';
+import path from 'path';
+import type { Config } from './config.js';
+
+export interface ShortcutRegistryEntry {
+    exportName: string;
+    componentName: string;
+    sourceFile: string;
+}
+
+function aliasToProjectPath(aliasOrPath: string): string {
+    return aliasOrPath.startsWith('@/')
+        ? path.join('src', aliasOrPath.slice(2))
+        : aliasOrPath;
+}
+
+function resolveProjectPath(cwd: string, inputPath: string): string {
+    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}`);
+    }
+    return resolved;
+}
+
+function getShortcutRegistryIndexPath(cwd: string, config: Config): string {
+    const utilsFilePath = resolveProjectPath(cwd, aliasToProjectPath(config.aliases.utils) + '.ts');
+    const utilsDir = path.dirname(utilsFilePath);
+    return path.join(utilsDir, 'shortcut-registry.index.ts');
+}
+
+export async function writeShortcutRegistryIndex(
+    cwd: string,
+    config: Config,
+    entries: ShortcutRegistryEntry[],
+): Promise<string> {
+    const registryPath = getShortcutRegistryIndexPath(cwd, config);
+    await fs.ensureDir(path.dirname(registryPath));
+
+    const uniqueEntries = Array.from(new Map(entries.map(entry => [entry.exportName, entry])).values())
+        .sort((a, b) => a.exportName.localeCompare(b.exportName));
+
+    const uiAlias = config.aliases.ui;
+    const utilsAliasDir = config.aliases.utils.includes('/')
+        ? config.aliases.utils.slice(0, config.aliases.utils.lastIndexOf('/'))
+        : config.aliases.utils;
+    const shortcutServiceImport = `${utilsAliasDir}/shortcut-binding.service`;
+
+    const imports = uniqueEntries
+        .map(entry => {
+            const importPath = `${uiAlias}/${entry.sourceFile.replace(/\.ts$/, '')}`;
+            return `import { ${entry.exportName} } from '${importPath}';`;
+        })
+        .join('\n');
+
+    const catalogItems = uniqueEntries
+        .map(entry => `  { componentName: '${entry.componentName}', definitions: ${entry.exportName} },`)
+        .join('\n');
+
+    const content = `// Auto-generated by shadcn-angular CLI. Do not edit manually.
+import type { ShortcutBindingService, ShortcutDefinition } from '${shortcutServiceImport}';
+${imports ? `${imports}\n` : ''}
+export const GENERATED_SHORTCUT_CATALOG: ReadonlyArray<{
+  componentName: string;
+  definitions: ReadonlyArray<ShortcutDefinition>;
+}> = [
+${catalogItems}
+];
+
+export function registerGeneratedShortcutCatalog(shortcuts: ShortcutBindingService): void {
+  for (const entry of GENERATED_SHORTCUT_CATALOG) {
+    shortcuts.defineShortcuts(entry.componentName, [...entry.definitions]);
+  }
+}
+`;
+
+    await fs.writeFile(registryPath, content);
+    return registryPath;
+}