@shohojdhara/atomix 0.3.12 → 0.3.14

package/scripts/atomix-cli.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 /**
- * Atomix CLI - Enhanced Version
+ * Atomix CLI
  * Design System Development Tools
  */
 
@@ -20,17 +20,18 @@ import chokidar from 'chokidar';
 import inquirer from 'inquirer';
 import boxen from 'boxen';
 import { runInitWizard } from './cli/interactive-init.js';
-import { 
-  migrateTailwind, 
-  migrateBootstrap, 
-  migrateSCSSVariables, 
-  displayMigrationReport 
+import {
+  migrateTailwind,
+  migrateBootstrap,
+  migrateSCSSVariables,
+  displayMigrationReport
 } from './cli/migration-tools.js';
 import {
   listTokens,
   validateTokens,
   exportTokens,
-  importTokens
+  importTokens,
+  fixTokens
 } from './cli/token-manager.js';
 import { createThemeCLIBridge } from './cli/theme-bridge.js';
 import {
@@ -39,8 +40,32 @@ import {
   validateThemeName,
   sanitizeInput,
   fileExists,
-  isDebug as checkDebugMode
+  isDebug as checkDebugMode,
+  checkNodeVersion,
+  AtomixCLIError
 } from './cli/utils.js';
+import {
+  componentTemplates,
+  generateColorTokens,
+  generateSpacingTokens,
+  generateTypographyTokens,
+  generateShadowTokens,
+  generateRadiusTokens,
+  generateAnimationTokens
+} from './cli/templates.js';
+import {
+  COMPLEXITY_LEVELS,
+  COMPONENT_FEATURES,
+  generateComponentByComplexity,
+  interactiveComponentGeneration,
+  validateGeneratedComponent,
+  displayValidationReport
+} from './cli/component-generator.js';
+import {
+  syncDocumentation,
+  validateDocumentation,
+  generateCLIDocumentation
+} from './cli/documentation-sync.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -53,18 +78,6 @@ const packageJson = JSON.parse(
 // CLI Configuration
 const DEBUG = process.env.ATOMIX_DEBUG === 'true' || process.argv.includes('--debug');
 
-/**
- * Enhanced Error Class
- */
-class AtomixCLIError extends Error {
-  constructor(message, code, suggestions = []) {
-    super(message);
-    this.name = 'AtomixCLIError';
-    this.code = code;
-    this.suggestions = suggestions;
-  }
-}
-
 /**
  * Debug logger
  */
@@ -72,7 +85,7 @@ function debug(message, data = null) {
   if (DEBUG) {
     console.log(chalk.gray(`[DEBUG] ${message}`));
     if (data) {
-      console.log(chalk.gray(JSON.stringify(data, null, 2)));
+      console.log(chalk.gray(JSON.stringify(data, null, 2),));
     }
   }
 }
@@ -82,497 +95,25 @@ function debug(message, data = null) {
  */
 function handleError(error, spinner = null) {
   if (spinner) spinner.fail(chalk.red('Operation failed'));
-  
+
   console.error(chalk.bold.red(`\n❌ ${error.message}`));
-  
+
   if (error instanceof AtomixCLIError && error.suggestions.length > 0) {
     console.log(chalk.yellow('\n💡 Suggestions:'));
     error.suggestions.forEach((suggestion, index) => {
       console.log(chalk.gray(`   ${index + 1}. ${suggestion}`));
     });
   }
-  
+
   if (DEBUG && error.stack) {
     console.error(chalk.gray('\nStack trace:'));
     console.error(chalk.gray(error.stack));
   }
-  
-  process.exit(1);
-}
-
-/**
- * Component templates for design system
- */
-const componentTemplates = {
-  react: {
-    component: (name, options = {}) => `import React, { forwardRef, memo } from 'react';
-${options.scssModule ? `import styles from './${name}.module.scss';` : ''}
-${options.types ? `import type { ${name}Props } from '../../lib/types/components';` : ''}
-
-${options.types ? '' : `export interface ${name}Props {
-  /**
-   * Content to be rendered
-   */
-  children?: React.ReactNode;
-  
-  /**
-   * Additional CSS classes
-   */
-  className?: string;
-  
-  /**
-   * Size variant
-   */
-  size?: 'sm' | 'md' | 'lg';
-  
-  /**
-   * Color variant
-   */
-  variant?: 'primary' | 'secondary' | 'success' | 'error';
-  
-  /**
-   * Disabled state
-   */
-  disabled?: boolean;
-}`}
-
-/**
- * ${name} component
- * 
- * @component
- * @example
- * <${name} variant="primary" size="md">
- *   Content
- * </${name}>
- */
-export const ${name} = memo(
-  forwardRef<HTMLDivElement, ${name}Props>(
-    ({ children, className = '', size = 'md', variant = 'primary', disabled = false, ...props }, ref) => {
-      ${options.scssModule ? `const componentClasses = [
-        styles.${name.toLowerCase()},
-        styles[\`${name.toLowerCase()}--\${size}\`],
-        styles[\`${name.toLowerCase()}--\${variant}\`],
-        disabled && styles['${name.toLowerCase()}--disabled'],
-        className
-      ].filter(Boolean).join(' ');` : `const componentClasses = \`c-${name.toLowerCase()} c-${name.toLowerCase()}--\${size} c-${name.toLowerCase()}--\${variant} \${disabled ? 'c-${name.toLowerCase()}--disabled' : ''} \${className}\`.trim();`}
-      
-      return (
-        <div
-          ref={ref}
-          className={componentClasses}
-          aria-disabled={disabled}
-          {...props}
-        >
-          {children}
-        </div>
-      );
-    }
-  )
-);
-
-${name}.displayName = '${name}';
-
-export default ${name};`,
-    
-    index: (name) => `export { default as ${name} } from './${name}';
-export type { ${name}Props } from './${name}';`,
-    
-    story: (name) => `import type { Meta, StoryObj } from '@storybook/react';
-import { ${name} } from './${name}';
-
-const meta: Meta<typeof ${name}> = {
-  title: 'Components/${name}',
-  component: ${name},
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-    },
-    variant: {
-      control: 'select',
-      options: ['primary', 'secondary', 'success', 'error'],
-    },
-    disabled: {
-      control: 'boolean',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    children: '${name} Component',
-    size: 'md',
-    variant: 'primary',
-  },
-};
-
-export const Small: Story = {
-  args: {
-    ...Default.args,
-    size: 'sm',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    ...Default.args,
-    size: 'lg',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    ...Default.args,
-    variant: 'secondary',
-  },
-};
-
-export const Success: Story = {
-  args: {
-    ...Default.args,
-    variant: 'success',
-  },
-};
-
-export const Error: Story = {
-  args: {
-    ...Default.args,
-    variant: 'error',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    ...Default.args,
-    disabled: true,
-  },
-};`,
-    
-    test: (name) => `import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { ${name} } from './${name}';
-
-describe('${name}', () => {
-  it('renders children correctly', () => {
-    render(<${name}>Test Content</${name}>);
-    expect(screen.getByText('Test Content')).toBeInTheDocument();
-  });
-  
-  it('applies size variant classes', () => {
-    const { container } = render(<${name} size="lg">Content</${name}>);
-    const element = container.firstChild;
-    expect(element).toHaveClass('c-${name.toLowerCase()}--lg');
-  });
-  
-  it('applies variant classes', () => {
-    const { container } = render(<${name} variant="success">Content</${name}>);
-    const element = container.firstChild;
-    expect(element).toHaveClass('c-${name.toLowerCase()}--success');
-  });
-  
-  it('handles disabled state', () => {
-    const { container } = render(<${name} disabled>Content</${name}>);
-    const element = container.firstChild;
-    expect(element).toHaveAttribute('aria-disabled', 'true');
-    expect(element).toHaveClass('c-${name.toLowerCase()}--disabled');
-  });
-  
-  it('forwards ref correctly', () => {
-    const ref = React.createRef<HTMLDivElement>();
-    render(<${name} ref={ref}>Content</${name}>);
-    expect(ref.current).toBeInstanceOf(HTMLDivElement);
-  });
-});`,
-    
-    scss: (name) => `// Component: ${name}
-// =============================================================================
-// Design system component following ITCSS architecture
-
-@import '../../styles/01-settings';
-@import '../../styles/02-tools';
-
-// Block: Base component
-// =============================================================================
-.c-${name.toLowerCase()} {
-  // Layout
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  
-  // Spacing
-  padding: var(--atomix-space-3) var(--atomix-space-4);
-  gap: var(--atomix-space-2);
-  
-  // Typography
-  font-family: var(--atomix-font-family-base);
-  font-size: var(--atomix-font-size-base);
-  font-weight: var(--atomix-font-weight-normal);
-  line-height: var(--atomix-line-height-base);
-  
-  // Appearance
-  background-color: var(--atomix-color-background);
-  color: var(--atomix-color-text);
-  border: 1px solid var(--atomix-color-border);
-  border-radius: var(--atomix-radius-md);
-  
-  // Interaction
-  cursor: default;
-  user-select: none;
-  transition: all 0.2s ease-in-out;
-  
-  // Focus
-  &:focus-visible {
-    @include focus-ring;
-  }
-}
-
-// Size Modifiers
-// =============================================================================
-.c-${name.toLowerCase()}--sm {
-  padding: var(--atomix-space-2) var(--atomix-space-3);
-  font-size: var(--atomix-font-size-sm);
-  gap: var(--atomix-space-1);
-}
-
-.c-${name.toLowerCase()}--md {
-  // Default size - explicitly defined for clarity
-  padding: var(--atomix-space-3) var(--atomix-space-4);
-  font-size: var(--atomix-font-size-base);
-  gap: var(--atomix-space-2);
-}
-
-.c-${name.toLowerCase()}--lg {
-  padding: var(--atomix-space-4) var(--atomix-space-5);
-  font-size: var(--atomix-font-size-lg);
-  gap: var(--atomix-space-3);
-}
-
-// Color/Variant Modifiers
-// =============================================================================
-.c-${name.toLowerCase()}--primary {
-  background-color: var(--atomix-color-primary);
-  color: var(--atomix-color-primary-text);
-  border-color: var(--atomix-color-primary-dark);
-  
-  &:hover:not(:disabled) {
-    background-color: var(--atomix-color-primary-dark);
-  }
-}
-
-.c-${name.toLowerCase()}--secondary {
-  background-color: var(--atomix-color-secondary);
-  color: var(--atomix-color-secondary-text);
-  border-color: var(--atomix-color-secondary-dark);
-  
-  &:hover:not(:disabled) {
-    background-color: var(--atomix-color-secondary-dark);
-  }
-}
-
-.c-${name.toLowerCase()}--success {
-  background-color: var(--atomix-color-success);
-  color: var(--atomix-color-success-text);
-  border-color: var(--atomix-color-success-dark);
-  
-  &:hover:not(:disabled) {
-    background-color: var(--atomix-color-success-dark);
-  }
-}
-
-.c-${name.toLowerCase()}--error {
-  background-color: var(--atomix-color-error);
-  color: var(--atomix-color-error-text);
-  border-color: var(--atomix-color-error-dark);
-  
-  &:hover:not(:disabled) {
-    background-color: var(--atomix-color-error-dark);
-  }
-}
-
-// State Modifiers
-// =============================================================================
-.c-${name.toLowerCase()}--disabled {
-  @include disabled;
-  cursor: not-allowed;
-  
-  &:hover {
-    transform: none;
-  }
-}
-
-// Elements (if component has child elements)
-// =============================================================================
-.c-${name.toLowerCase()}__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.c-${name.toLowerCase()}__content {
-  flex: 1;
-}
-
-// Responsive Design
-// =============================================================================
-@include respond-to('tablet') {
-  .c-${name.toLowerCase()} {
-    // Tablet adjustments
-  }
-}
-
-@include respond-to('mobile') {
-  .c-${name.toLowerCase()} {
-    // Mobile adjustments
-    padding: var(--atomix-space-2) var(--atomix-space-3);
-  }
-}
-
-// Accessibility
-// =============================================================================
-@media (prefers-reduced-motion: reduce) {
-  .c-${name.toLowerCase()} {
-    transition: none;
-  }
-}
-
-@media (prefers-contrast: high) {
-  .c-${name.toLowerCase()} {
-    border-width: 2px;
-  }
-}
-
-// Dark Mode Support
-// =============================================================================
-[data-theme="dark"] {
-  .c-${name.toLowerCase()} {
-    background-color: var(--atomix-color-background-dark);
-    color: var(--atomix-color-text-dark);
-    border-color: var(--atomix-color-border-dark);
-  }
-}`,
-
-    scssModule: (name) => `// Component: ${name}
-// =============================================================================
-// Design system component using CSS Modules
-
-@import '../../styles/01-settings';
-@import '../../styles/02-tools';
-
-// Block: Base component
-// =============================================================================
-.${name.toLowerCase()} {
-  // Layout
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  
-  // Spacing
-  padding: var(--atomix-space-3) var(--atomix-space-4);
-  gap: var(--atomix-space-2);
-  
-  // Typography
-  font-family: var(--atomix-font-family-base);
-  font-size: var(--atomix-font-size-base);
-  font-weight: var(--atomix-font-weight-normal);
-  line-height: var(--atomix-line-height-base);
-  
-  // Appearance
-  background-color: var(--atomix-color-background);
-  color: var(--atomix-color-text);
-  border: 1px solid var(--atomix-color-border);
-  border-radius: var(--atomix-radius-md);
-  
-  // Interaction
-  cursor: default;
-  user-select: none;
-  transition: all 0.2s ease-in-out;
-  
-  // Focus
-  &:focus-visible {
-    outline: 2px solid var(--atomix-color-focus);
-    outline-offset: 2px;
-  }
-}
-
-// Size Modifiers
-// =============================================================================
-.${name.toLowerCase()}--sm {
-  composes: ${name.toLowerCase()};
-  padding: var(--atomix-space-2) var(--atomix-space-3);
-  font-size: var(--atomix-font-size-sm);
-  gap: var(--atomix-space-1);
-}
-
-.${name.toLowerCase()}--md {
-  composes: ${name.toLowerCase()};
-}
-
-.${name.toLowerCase()}--lg {
-  composes: ${name.toLowerCase()};
-  padding: var(--atomix-space-4) var(--atomix-space-5);
-  font-size: var(--atomix-font-size-lg);
-  gap: var(--atomix-space-3);
-}
-
-// Color/Variant Modifiers
-// =============================================================================
-.${name.toLowerCase()}--primary {
-  background-color: var(--atomix-color-primary);
-  color: var(--atomix-color-primary-text);
-  border-color: var(--atomix-color-primary-dark);
-  
-  &:hover:not([aria-disabled="true"]) {
-    background-color: var(--atomix-color-primary-dark);
-  }
-}
 
-.${name.toLowerCase()}--secondary {
-  background-color: var(--atomix-color-secondary);
-  color: var(--atomix-color-secondary-text);
-  border-color: var(--atomix-color-secondary-dark);
-  
-  &:hover:not([aria-disabled="true"]) {
-    background-color: var(--atomix-color-secondary-dark);
-  }
+  process.exit(1);
 }
 
-.${name.toLowerCase()}--success {
-  background-color: var(--atomix-color-success);
-  color: var(--atomix-color-success-text);
-  border-color: var(--atomix-color-success-dark);
-  
-  &:hover:not([aria-disabled="true"]) {
-    background-color: var(--atomix-color-success-dark);
-  }
-}
 
-.${name.toLowerCase()}--error {
-  background-color: var(--atomix-color-error);
-  color: var(--atomix-color-error-text);
-  border-color: var(--atomix-color-error-dark);
-  
-  &:hover:not([aria-disabled="true"]) {
-    background-color: var(--atomix-color-error-dark);
-  }
-}
-
-// State Modifiers
-// =============================================================================
-.${name.toLowerCase()}--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-}`
-  }
-};
 
 // Initialize program
 program
@@ -599,15 +140,40 @@ program
   .option('--analyze', 'Analyze bundle size', false)
   .action(async (themePath, options) => {
     let spinner = ora('Initializing theme build...').start();
-    
+
     try {
+      const sanitizedThemePath = sanitizeInput(themePath);
+      const themePathValidation = validatePath(sanitizedThemePath);
+      if (!themePathValidation.isValid) {
+        throw new AtomixCLIError(
+          themePathValidation.error,
+          'INVALID_PATH',
+          [
+            'Ensure theme path is within the project directory',
+            'Avoid sensitive or absolute system paths',
+            'Example: atomix build-theme themes/my-theme'
+          ]
+        );
+      }
+      const sanitizedOutput = sanitizeInput(options.output);
+      const outputValidation = validatePath(sanitizedOutput);
+      if (!outputValidation.isValid) {
+        throw new AtomixCLIError(
+          outputValidation.error,
+          'INVALID_PATH',
+          [
+            'Use a project-relative directory for output',
+            'Example: --output ./dist'
+          ]
+        );
+      }
       // Resolve paths
-      const indexPath = themePath.endsWith('.scss') 
-        ? resolve(themePath) 
-        : resolve(themePath, 'index.scss');
-      
+      const indexPath = sanitizedThemePath.endsWith('.scss')
+        ? resolve(themePathValidation.safePath)
+        : resolve(themePathValidation.safePath, 'index.scss');
+
       debug(`Building theme from: ${indexPath}`);
-      
+
       // Check if path exists
       try {
         await access(indexPath);
@@ -622,16 +188,16 @@ program
           ]
         );
       }
-      
+
       // Build function
       const buildTheme = async () => {
         const startTime = Date.now();
-        
+
         try {
           // Compile SCSS
           spinner.text = 'Compiling SCSS...';
           debug('Starting SCSS compilation');
-          
+
           const result = sass.compile(indexPath, {
             loadPaths: [
               process.cwd(),
@@ -643,7 +209,7 @@ program
             sourceMap: options.sourcemap,
             style: 'expanded',
           });
-          
+
           // Process with PostCSS
           spinner.text = 'Processing with PostCSS...';
           const processed = await postcss([
@@ -654,23 +220,23 @@ program
             from: indexPath,
             map: options.sourcemap,
           });
-          
+
           // Ensure output directory exists
-          await mkdir(options.output, { recursive: true });
-          
+          await mkdir(outputValidation.safePath, { recursive: true });
+
           // Get theme name
           const themeName = basename(dirname(indexPath));
-          
+
           // Write expanded CSS
-          const outputPath = join(options.output, `${themeName}.css`);
+          const outputPath = join(outputValidation.safePath, `${themeName}.css`);
           await writeFile(outputPath, processed.css, 'utf8');
-          
+
           // Get file size
           const stats = await stat(outputPath);
           const sizeKB = (stats.size / 1024).toFixed(2);
-          
+
           spinner.succeed(chalk.green(`✓ Built ${outputPath} (${sizeKB} KB)`));
-          
+
           // Write minified if requested
           if (options.minify) {
             const minifySpinner = ora('Minifying CSS...').start();
@@ -680,22 +246,22 @@ program
             ]).process(result.css, {
               from: indexPath,
             });
-            
-            const minPath = join(options.output, `${themeName}.min.css`);
+
+            const minPath = join(outputValidation.safePath, `${themeName}.min.css`);
             await writeFile(minPath, minified.css, 'utf8');
-            
+
             const minStats = await stat(minPath);
             const minSizeKB = (minStats.size / 1024).toFixed(2);
-            
+
             minifySpinner.succeed(chalk.green(`✓ Built ${minPath} (${minSizeKB} KB)`));
           }
-          
+
           // Analyze if requested
           if (options.analyze) {
             console.log(chalk.cyan('\n📊 Theme Analysis:'));
             console.log(chalk.gray(`  Original size: ${sizeKB} KB`));
             if (options.minify) {
-              const minPath = join(options.output, `${themeName}.min.css`);
+              const minPath = join(outputValidation.safePath, `${themeName}.min.css`);
               const minStats = await stat(minPath);
               const minSizeKB = (minStats.size / 1024).toFixed(2);
               const reduction = ((1 - minStats.size / stats.size) * 100).toFixed(1);
@@ -703,11 +269,11 @@ program
             }
             console.log(chalk.gray(`  Build time: ${Date.now() - startTime}ms`));
           }
-          
+
           if (!options.watch) {
             console.log(chalk.bold.green('\n✨ Theme build complete!'));
           }
-          
+
         } catch (error) {
           if (options.watch) {
             console.error(chalk.red(`Build error: ${error.message}`));
@@ -717,35 +283,35 @@ program
           }
         }
       };
-      
+
       // Initial build
       await buildTheme();
       spinner.stop();
-      
+
       // Watch mode
       if (options.watch) {
         console.log(chalk.cyan('\n👁️  Watch mode enabled. Press Ctrl+C to exit.\n'));
-        
-        const watcher = chokidar.watch([themePath], {
+
+        const watcher = chokidar.watch([themePathValidation.safePath], {
           ignored: /node_modules/,
           persistent: true,
           ignoreInitial: true
         });
-        
+
         watcher.on('change', async (path) => {
           console.log(chalk.gray(`\n[${new Date().toLocaleTimeString()}] File changed: ${relative(process.cwd(), path)}`));
           spinner = ora('Rebuilding theme...').start();
           await buildTheme();
           spinner.stop();
         });
-        
+
         watcher.on('add', async (path) => {
           console.log(chalk.gray(`\n[${new Date().toLocaleTimeString()}] File added: ${relative(process.cwd(), path)}`));
           spinner = ora('Rebuilding theme...').start();
           await buildTheme();
           spinner.stop();
         });
-        
+
         // Handle graceful shutdown
         process.on('SIGINT', () => {
           console.log(chalk.yellow('\n\nShutting down watch mode...'));
@@ -753,7 +319,7 @@ program
           process.exit(0);
         });
       }
-      
+
     } catch (error) {
       handleError(error, spinner);
     }
@@ -772,30 +338,43 @@ program
   .option('--scss-module', 'Use SCSS modules', false)
   .option('--path <path>', 'Custom output path', './src/components')
   .option('-f, --force', 'Overwrite existing files', false)
+  .option('-i, --interactive', 'Interactive component generation', false)
+  .option('--complexity <level>', 'Component complexity level (simple|medium|complex)', 'medium')
+  .option('--validate', 'Validate component after generation', true)
   .action(async (type, name, options) => {
     const spinner = ora(`Generating ${type}: ${name}...`).start();
-    
+
     try {
       debug(`Generating ${type} with name: ${name}`, options);
-      
-      // Validate name
-      const nameValidation = validateComponentName(name);
-      if (!nameValidation.isValid) {
-        throw new AtomixCLIError(
-          nameValidation.error,
-          'INVALID_NAME',
-          [
-            'Use PascalCase naming (e.g., MyComponent)',
-            'Start with an uppercase letter',
-            'Use only letters and numbers',
-            'Avoid reserved words'
-          ]
-        );
-      }
-      
+      const safeName = sanitizeInput(name);
+
       if (type === 'component' || type === 'c') {
+        // Handle interactive generation
+        if (options.interactive) {
+          const interactiveResult = await interactiveComponentGeneration();
+          if (!interactiveResult) {
+            return; // User cancelled
+          }
+          // Update options with interactive results
+          Object.assign(options, interactiveResult.options);
+        }
+
+        const nameValidation = validateComponentName(safeName);
+        if (!nameValidation.isValid) {
+          throw new AtomixCLIError(
+            nameValidation.error,
+            'INVALID_NAME',
+            [
+              'Use PascalCase naming (e.g., MyComponent)',
+              'Start with an uppercase letter',
+              'Use only letters and numbers',
+              'Avoid reserved words'
+            ]
+          );
+        }
         // Validate output path
-        const pathValidation = validatePath(options.path);
+        const sanitizedPath = sanitizeInput(options.path);
+        const pathValidation = validatePath(sanitizedPath);
         if (!pathValidation.isValid) {
           throw new AtomixCLIError(
             pathValidation.error,
@@ -807,13 +386,13 @@ program
             ]
           );
         }
-        
-        const componentPath = join(pathValidation.safePath, name);
-        
+
+        const componentPath = join(pathValidation.safePath, safeName);
+
         // Check if component already exists
         if (existsSync(componentPath) && !options.force) {
           throw new AtomixCLIError(
-            `Component ${name} already exists`,
+            `Component ${safeName} already exists`,
             'COMPONENT_EXISTS',
             [
               `Delete the existing component at ${componentPath}`,
@@ -822,77 +401,215 @@ program
             ]
           );
         }
-        
+
         // Create component directory
         await mkdir(componentPath, { recursive: true });
-        
+
+        // Generate composable hook
+        const hookPath = join(process.cwd(), 'src/lib/composables');
+        if (existsSync(hookPath)) {
+          const hookContent = componentTemplates.composable.hook(safeName);
+          const hookFilePath = join(hookPath, `use${safeName}.ts`);
+          
+          if (!existsSync(hookFilePath) || options.force) {
+            await writeFile(hookFilePath, hookContent, 'utf8');
+            console.log(chalk.green(`  ✓ Created use${safeName}.ts in src/lib/composables`));
+          } else {
+            console.log(chalk.yellow(`  ⚠️  Hook file already exists: use${safeName}.ts`));
+          }
+        } else {
+          console.log(chalk.yellow(`  ⚠️  Composables directory not found: ${hookPath}`));
+        }
+
+        // Generate types in lib/types/components.ts
+        const typesPath = join(process.cwd(), 'src/lib/types');
+        if (existsSync(typesPath)) {
+          const componentsTypesPath = join(typesPath, 'components.ts');
+          if (existsSync(componentsTypesPath)) {
+            let typesContent = await readFile(componentsTypesPath, 'utf8');
+            const newTypeContent = componentTemplates.react.types(safeName);
+            
+            // Check if type already exists
+            if (!typesContent.includes(`interface ${safeName}Props`)) {
+              // Insert before the last export
+              const lastExportIndex = typesContent.lastIndexOf('export');
+              const insertionPoint = typesContent.lastIndexOf('\n\n', lastExportIndex) + 2;
+              typesContent = 
+                typesContent.slice(0, insertionPoint) + 
+                '\n' + newTypeContent + '\n' +
+                typesContent.slice(insertionPoint);
+              
+              await writeFile(componentsTypesPath, typesContent, 'utf8');
+              console.log(chalk.green(`  ✓ Added ${safeName}Props to src/lib/types/components.ts`));
+            } else {
+              console.log(chalk.yellow(`  ⚠️  ${safeName}Props already exists in types`));
+            }
+          }
+        }
+
+        // Generate constants in lib/constants/components.ts
+        const constantsPath = join(process.cwd(), 'src/lib/constants');
+        if (existsSync(constantsPath)) {
+          const constantsFilePath = join(constantsPath, 'components.ts');
+          if (existsSync(constantsFilePath)) {
+            let constantsContent = await readFile(constantsFilePath, 'utf8');
+            const newConstantsContent = componentTemplates.react.constants(safeName);
+            
+            // Check if constants already exist
+            if (!constantsContent.includes(`export const ${safeName.toUpperCase()}`)) {
+              // Insert before the last export
+              const lastExportIndex = constantsContent.lastIndexOf('export');
+              const insertionPoint = constantsContent.lastIndexOf('\n\n', lastExportIndex) + 2;
+              constantsContent = 
+                constantsContent.slice(0, insertionPoint) + 
+                '\n' + newConstantsContent + '\n' +
+                constantsContent.slice(insertionPoint);
+              
+              await writeFile(constantsFilePath, constantsContent, 'utf8');
+              console.log(chalk.green(`  ✓ Added ${safeName.toUpperCase()} constants to src/lib/constants/components.ts`));
+            } else {
+              console.log(chalk.yellow(`  ⚠️  ${safeName.toUpperCase()} constants already exist`));
+            }
+          }
+        }
+
         // Generate component file
-        const componentContent = componentTemplates.react.component(name, {
-          scssModule: options.scssModule,
-          types: false // We'll generate inline types for now
-        });
-        
+        const componentContent = componentTemplates.react.component(safeName);
+
         await writeFile(
-          join(componentPath, `${name}.tsx`),
+          join(componentPath, `${safeName}.tsx`),
           componentContent,
           'utf8'
         );
-        spinner.succeed(chalk.green(`✓ Created ${name}.tsx`));
-        
+        spinner.succeed(chalk.green(`✓ Created ${safeName}.tsx`));
+
         // Generate index file
-        const indexContent = componentTemplates.react.index(name);
+        const indexContent = componentTemplates.react.index(safeName);
         await writeFile(
           join(componentPath, 'index.ts'),
           indexContent,
           'utf8'
         );
         console.log(chalk.green(`  ✓ Created index.ts`));
-        
-        // Generate SCSS file
-        const scssContent = options.scssModule 
-          ? componentTemplates.react.scssModule(name)
-          : componentTemplates.react.scss(name);
-        
-        const scssFilename = options.scssModule ? `${name}.module.scss` : `_${name.toLowerCase()}.scss`;
-        await writeFile(
-          join(componentPath, scssFilename),
-          scssContent,
-          'utf8'
-        );
-        console.log(chalk.green(`  ✓ Created ${scssFilename}`));
-        
+
+        // Generate SCSS files
+        if (!options.scssModule) {
+          // Generate settings file first
+          const settingsPath = join(process.cwd(), 'src/styles/01-settings');
+          if (existsSync(settingsPath)) {
+            const settingsContent = componentTemplates.react.scssSettings(safeName);
+            const settingsFilename = `_settings.${safeName.toLowerCase()}.scss`;
+            const settingsFilePath = join(settingsPath, settingsFilename);
+            
+            if (!existsSync(settingsFilePath) || options.force) {
+              await writeFile(settingsFilePath, settingsContent, 'utf8');
+              console.log(chalk.green(`  ✓ Created ${settingsFilename} in src/styles/01-settings`));
+              
+              // Update _index.scss in settings
+              const settingsIndexPath = join(settingsPath, '_index.scss');
+              if (existsSync(settingsIndexPath)) {
+                let indexContent = await readFile(settingsIndexPath, 'utf8');
+                const forwardStatement = `@forward 'settings.${safeName.toLowerCase()}';`;
+                
+                if (!indexContent.includes(forwardStatement)) {
+                  if (!indexContent.endsWith('\n')) indexContent += '\n';
+                  indexContent += `${forwardStatement}\n`;
+                  await writeFile(settingsIndexPath, indexContent, 'utf8');
+                  console.log(chalk.green(`  ✓ Updated settings _index.scss`));
+                }
+              }
+            } else {
+              console.log(chalk.yellow(`  ⚠️  Settings file already exists: ${settingsFilename}`));
+            }
+          }
+
+          // Generate component SCSS file
+          const scssContent = componentTemplates.react.scss(safeName);
+          const scssPath = join(process.cwd(), 'src/styles/06-components');
+          const scssFilename = `_components.${safeName.toLowerCase()}.scss`;
+          const scssFilePath = join(scssPath, scssFilename);
+
+          // Ensure styles directory exists
+          if (existsSync(scssPath)) {
+            // Check if SCSS file already exists
+            if (!existsSync(scssFilePath) || options.force) {
+              await writeFile(scssFilePath, scssContent, 'utf8');
+              console.log(chalk.green(`  ✓ Created ${scssFilename} in src/styles/06-components`));
+
+              // Update _index.scss
+              const indexPath = join(scssPath, '_index.scss');
+              if (existsSync(indexPath)) {
+                let indexContent = await readFile(indexPath, 'utf8');
+                const forwardStatement = `@forward 'components.${safeName.toLowerCase()}';`;
+
+                if (!indexContent.includes(forwardStatement)) {
+                  // Append to end of file, ensuring newline
+                  if (!indexContent.endsWith('\n')) indexContent += '\n';
+                  indexContent += `${forwardStatement}\n`;
+                  await writeFile(indexPath, indexContent, 'utf8');
+                  console.log(chalk.green(`  ✓ Updated _index.scss`));
+                }
+              }
+            } else {
+              console.log(chalk.yellow(`  ⚠️  SCSS file already exists: ${scssFilename}`));
+            }
+          } else {
+            console.log(chalk.yellow(`  ⚠️  Styles directory not found: ${scssPath}`));
+          }
+        } else {
+          // Fallback for modules if strictly requested (though we discourage it)
+          const scssContent = componentTemplates.react.scssModule(safeName);
+          await writeFile(
+            join(componentPath, `${safeName}.module.scss`),
+            scssContent,
+            'utf8'
+          );
+        }
+
         // Generate Storybook story
         if (options.story) {
-          const storyContent = componentTemplates.react.story(name);
+          const storyContent = componentTemplates.react.storyEnhanced(safeName);
           await writeFile(
-            join(componentPath, `${name}.stories.tsx`),
+            join(componentPath, `${safeName}.stories.tsx`),
             storyContent,
             'utf8'
           );
-          console.log(chalk.green(`  ✓ Created ${name}.stories.tsx`));
+          console.log(chalk.green(`  ✓ Created ${safeName}.stories.tsx`));
         }
-        
+
         // Generate test file
         if (options.test) {
-          const testContent = componentTemplates.react.test(name);
+          const testContent = componentTemplates.react.test(safeName);
           await writeFile(
-            join(componentPath, `${name}.test.tsx`),
+            join(componentPath, `${safeName}.test.tsx`),
             testContent,
             'utf8'
           );
-          console.log(chalk.green(`  ✓ Created ${name}.test.tsx`));
+          console.log(chalk.green(`  ✓ Created ${safeName}.test.tsx`));
         }
-        
+
+        // Post-generation validation if requested
+        if (options.validate) {
+          const validationResult = await validateGeneratedComponent(safeName, componentPath);
+          const isValid = displayValidationReport(validationResult.issues, validationResult.warnings, safeName);
+          
+          if (!isValid) {
+            console.log(chalk.yellow('\n💡 Some issues were found. Consider addressing them for better component quality.'));
+          }
+        }
+
         // Success message with next steps
         console.log(boxen(
-          chalk.bold.green(`🎉 Component ${name} created successfully!\n\n`) +
+          chalk.bold.green(`🎉 Component ${safeName} created successfully!\n\n`) +
           chalk.cyan('Next steps:\n') +
           chalk.gray(`1. Import in your app:\n`) +
-          chalk.white(`   import { ${name} } from '${options.path}/${name}';\n\n`) +
+          chalk.white(`   import { ${safeName} } from '${options.path}/${safeName}';\n\n`) +
           chalk.gray(`2. Add to design system exports:\n`) +
-          chalk.white(`   export { ${name} } from './${name}';\n\n`) +
+          chalk.white(`   export { ${safeName} } from './${safeName}';\n\n`) +
           chalk.gray(`3. Run Storybook to see your component:\n`) +
-          chalk.white(`   npm run storybook`),
+          chalk.white(`   npm run storybook\n\n`) +
+          chalk.gray(`4. Validate component quality:\n`) +
+          chalk.white(`   atomix validate component ${safeName}`),
           {
             padding: 1,
             margin: 1,
@@ -900,11 +617,62 @@ program
             borderColor: 'green'
           }
         ));
-        
+
+      } else if (type === 'hook' || type === 'h') {
+        const componentPath = join(options.path, `use${safeName}`);
+        await mkdir(componentPath, { recursive: true });
+
+        const hookContent = componentTemplates.hook.hook(safeName);
+        await writeFile(join(componentPath, `use${safeName}.ts`), hookContent, 'utf8');
+
+        if (options.test) {
+          const testContent = componentTemplates.hook.test(safeName);
+          await writeFile(join(componentPath, `use${safeName}.test.ts`), testContent, 'utf8');
+        }
+
+        spinner.succeed(chalk.green(`✓ Created hook use${safeName}`));
+
+      } else if (type === 'layout' || type === 'l') {
+        const layoutPath = join(options.path, safeName);
+        await mkdir(layoutPath, { recursive: true });
+
+        const componentContent = componentTemplates.layout.component(safeName);
+        await writeFile(join(layoutPath, `${safeName}.tsx`), componentContent, 'utf8');
+
+        const scssContent = componentTemplates.layout.scss(safeName);
+        const scssFilename = `_layouts.${safeName.toLowerCase()}.scss`;
+        const scssPath = join(process.cwd(), 'src/styles/05-layouts');
+
+        if (existsSync(scssPath)) {
+          await writeFile(join(scssPath, scssFilename), scssContent, 'utf8');
+
+          // Update layouts index
+          const indexPath = join(scssPath, '_index.scss');
+          if (existsSync(indexPath)) {
+            let indexContent = await readFile(indexPath, 'utf8');
+            const forwardStatement = `@forward 'layouts.${safeName.toLowerCase()}';`;
+            if (!indexContent.includes(forwardStatement)) {
+              indexContent += `\n${forwardStatement}`;
+              await writeFile(indexPath, indexContent, 'utf8');
+            }
+          }
+        }
+
+        spinner.succeed(chalk.green(`✓ Created layout ${safeName}`));
+
+      } else if (type === 'context' || type === 'ctx') {
+        const contextPath = join(options.path, `${safeName}Context`);
+        await mkdir(contextPath, { recursive: true });
+
+        const contextContent = componentTemplates.context.context(safeName);
+        await writeFile(join(contextPath, `${safeName}Context.tsx`), contextContent, 'utf8');
+
+        spinner.succeed(chalk.green(`✓ Created context ${safeName}Context`));
+
       } else if (type === 'token' || type === 't') {
         // Token generation
         const validCategories = ['colors', 'spacing', 'typography', 'shadows', 'radius', 'animations'];
-        
+
         if (!validCategories.includes(name.toLowerCase())) {
           throw new AtomixCLIError(
             `Invalid token category: ${name}`,
@@ -916,9 +684,9 @@ program
             ]
           );
         }
-        
+
         const tokenPath = join(process.cwd(), 'src/styles/01-settings');
-        
+
         // Check if settings directory exists
         if (!existsSync(tokenPath)) {
           throw new AtomixCLIError(
@@ -931,11 +699,11 @@ program
             ]
           );
         }
-        
+
         // Generate token file based on category
         let tokenContent = '';
         let filename = '';
-        
+
         switch (name.toLowerCase()) {
           case 'colors':
             filename = '_settings.colors.custom.scss';
@@ -962,9 +730,9 @@ program
             tokenContent = generateAnimationTokens();
             break;
         }
-        
+
         const filePath = join(tokenPath, filename);
-        
+
         // Check if file already exists
         if (existsSync(filePath) && !options.force) {
           throw new AtomixCLIError(
@@ -977,11 +745,11 @@ program
             ]
           );
         }
-        
+
         // Write token file
         await writeFile(filePath, tokenContent, 'utf8');
         spinner.succeed(chalk.green(`✓ Created token file: ${filename}`));
-        
+
         // Success message
         console.log(boxen(
           chalk.bold.green(`🎨 ${name} tokens generated successfully!\n\n`) +
@@ -1010,7 +778,7 @@ program
           ]
         );
       }
-      
+
     } catch (error) {
       handleError(error, spinner);
     }
@@ -1021,36 +789,37 @@ program
  */
 program
   .command('validate [target]')
-  .description('Validate themes, design tokens, or accessibility')
+  .description('Validate themes, design tokens, components, or accessibility')
   .option('--tokens', 'Validate design tokens', false)
   .option('--theme <path>', 'Validate specific theme', '')
+  .option('--component <name>', 'Validate specific component', '')
   .option('--a11y, --accessibility', 'Check accessibility compliance', false)
   .option('--fix', 'Attempt to fix issues automatically', false)
   .action(async (target, options) => {
     const spinner = ora('Running validation...').start();
-    
+
     try {
       debug('Validation options:', options);
-      
+
       const issues = [];
       const warnings = [];
-      
+
       // Token validation
       if (options.tokens || target === 'tokens') {
         spinner.text = 'Validating design tokens...';
-        
+
         const tokenFiles = [
           'src/styles/01-settings/_settings.colors.scss',
           'src/styles/01-settings/_settings.typography.scss',
           'src/styles/01-settings/_settings.spacing.scss',
           'src/styles/01-settings/_settings.radius.scss'
         ];
-        
+
         for (const file of tokenFiles) {
           const filePath = join(process.cwd(), file);
           if (existsSync(filePath)) {
             const content = await readFile(filePath, 'utf8');
-            
+
             // Check for hardcoded values
             const hardcodedColors = content.match(/#[0-9a-fA-F]{3,8}(?![0-9a-fA-F])/g);
             if (hardcodedColors && hardcodedColors.length > 0) {
@@ -1060,7 +829,7 @@ program
                 suggestion: 'Use CSS custom properties or SCSS variables'
               });
             }
-            
+
             // Check for missing default flags
             const variables = content.match(/\$[a-z-]+:/gi);
             const defaultFlags = content.match(/!default/g);
@@ -1080,11 +849,36 @@ program
           }
         }
       }
-      
+
+      // Component validation
+      if (options.component) {
+        spinner.text = `Validating component: ${options.component}...`;
+        
+        const componentPath = join('./src/components', options.component);
+        const validationResult = await validateGeneratedComponent(options.component, componentPath);
+        
+        // Convert validation results to issue/warning format
+        validationResult.issues.forEach(issue => {
+          issues.push({
+            file: options.component,
+            issue: issue,
+            suggestion: 'Check component structure and implementation'
+          });
+        });
+        
+        validationResult.warnings.forEach(warning => {
+          warnings.push({
+            file: options.component,
+            issue: warning,
+            suggestion: 'Improve component quality by addressing warnings'
+          });
+        });
+      }
+
       // Theme validation
       if (options.theme) {
         spinner.text = `Validating theme: ${options.theme}...`;
-        
+
         const themePath = resolve(options.theme);
         if (!existsSync(themePath)) {
           issues.push({
@@ -1094,7 +888,7 @@ program
           });
         } else {
           const content = await readFile(themePath, 'utf8');
-          
+
           // Check for required imports
           const requiredImports = [
             '@import.*settings',
@@ -1102,7 +896,7 @@ program
             '@import.*tools',
             '@use.*tools'
           ];
-          
+
           let hasSettings = false;
           for (const pattern of requiredImports) {
             if (new RegExp(pattern).test(content)) {
@@ -1110,7 +904,7 @@ program
               break;
             }
           }
-          
+
           if (!hasSettings) {
             issues.push({
               file: options.theme,
@@ -1120,16 +914,16 @@ program
           }
         }
       }
-      
+
       // Accessibility validation
       if (options.a11y || options.accessibility) {
         spinner.text = 'Checking accessibility compliance...';
-        
+
         // Check for focus styles
         const componentFiles = [
           'src/styles/06-components'
         ];
-        
+
         for (const dir of componentFiles) {
           const dirPath = join(process.cwd(), dir);
           if (existsSync(dirPath)) {
@@ -1142,9 +936,9 @@ program
           }
         }
       }
-      
+
       spinner.stop();
-      
+
       // Display results
       if (issues.length === 0 && warnings.length === 0) {
         console.log(boxen(
@@ -1166,7 +960,7 @@ program
             console.log(chalk.yellow(`     Fix: ${issue.suggestion}\n`));
           });
         }
-        
+
         if (warnings.length > 0) {
           console.log(chalk.bold.yellow(`\n⚠️  Found ${warnings.length} warning(s):\n`));
           warnings.forEach((warning, index) => {
@@ -1175,12 +969,27 @@ program
             console.log(chalk.cyan(`     Suggestion: ${warning.suggestion}\n`));
           });
         }
-        
-        if (options.fix && issues.length > 0) {
-          console.log(chalk.cyan('\n🔧 Auto-fix is not yet implemented. Please fix issues manually.'));
+
+        if (options.fix && (issues.length > 0 || warnings.length > 0)) {
+          console.log(chalk.cyan('\n🔧 Attempting to fix issues...'));
+
+          let fixedCount = 0;
+
+          // Run token fixes
+          if (options.tokens || target === 'tokens' || !target) {
+            const tokenFixResult = await fixTokens(options);
+            fixedCount += tokenFixResult.totalFixed;
+          }
+
+          if (fixedCount > 0) {
+            console.log(chalk.green(`\n✨ Fixed ${fixedCount} issue(s). Please run validate again to verify.`));
+          } else {
+            console.log(chalk.yellow('\nCould not automatically fix all reported issues. Manual intervention required.'));
+          }
+        } else {
+          console.log(chalk.yellow('\nCould not automatically fix reported issues. Manual intervention required.'));
         }
       }
-      
     } catch (error) {
       handleError(error, spinner);
     }
@@ -1206,7 +1015,7 @@ program
         borderColor: 'cyan'
       }
     ));
-    
+
     // Reuse build command with watch flag
     await program.parseAsync([
       ...process.argv.slice(0, 2),
@@ -1231,10 +1040,10 @@ program
   .option('--create-backup', 'Create backup before migration', true)
   .action(async (from, options) => {
     const spinner = ora('Preparing migration...').start();
-    
+
     try {
       debug(`Migrating from ${from}`, options);
-      
+
       // Validate migration type
       const validMigrations = ['tailwind', 'bootstrap', 'scss-variables'];
       if (!validMigrations.includes(from.toLowerCase())) {
@@ -1248,9 +1057,21 @@ program
           ]
         );
       }
-      
-      // Check source directory
-      const sourcePath = resolve(options.source);
+
+      const sanitizedSource = sanitizeInput(options.source);
+      const sourceValidation = validatePath(sanitizedSource);
+      if (!sourceValidation.isValid) {
+        throw new AtomixCLIError(
+          sourceValidation.error,
+          'INVALID_PATH',
+          [
+            'Ensure source path is within the project directory',
+            'Avoid sensitive or absolute system paths',
+            'Example: --source ./src'
+          ]
+        );
+      }
+      const sourcePath = resolve(sourceValidation.safePath);
       if (!existsSync(sourcePath)) {
         throw new AtomixCLIError(
           `Source directory not found: ${sourcePath}`,
@@ -1262,9 +1083,9 @@ program
           ]
         );
       }
-      
+
       spinner.stop();
-      
+
       // Show migration preview
       console.log(boxen(
         chalk.bold.cyan(`🔄 Migration Preview\n\n`) +
@@ -1279,7 +1100,7 @@ program
           borderColor: 'cyan'
         }
       ));
-      
+
       // Confirm migration
       if (!options.dryRun) {
         const { confirmMigration } = await inquirer.prompt([
@@ -1290,18 +1111,18 @@ program
             default: false
           }
         ]);
-        
+
         if (!confirmMigration) {
           console.log(chalk.yellow('\n Migration cancelled.'));
           return;
         }
       }
-      
+
       // Create backup if requested
       if (options.createBackup && !options.dryRun) {
         const backupSpinner = ora('Creating backup...').start();
         const backupDir = `${sourcePath}.backup.${Date.now()}`;
-        
+
         try {
           const { execSync } = await import('child_process');
           execSync(`cp -r "${sourcePath}" "${backupDir}"`, { stdio: 'ignore' });
@@ -1310,27 +1131,27 @@ program
           backupSpinner.warn(chalk.yellow('Could not create backup, continuing anyway...'));
         }
       }
-      
+
       // Run migration
       let report;
-      
+
       switch (from.toLowerCase()) {
         case 'tailwind':
           report = await migrateTailwind(sourcePath, options);
           break;
-          
+
         case 'bootstrap':
           report = await migrateBootstrap(sourcePath, options);
           break;
-          
+
         case 'scss-variables':
           report = await migrateSCSSVariables(sourcePath, options);
           break;
       }
-      
+
       // Display report
       displayMigrationReport(report);
-      
+
       // Next steps
       if (!options.dryRun && report.filesProcessed > 0) {
         console.log(chalk.cyan('\n📝 Next Steps:'));
@@ -1340,7 +1161,7 @@ program
         console.log(chalk.gray('  4. Test your application thoroughly'));
         console.log(chalk.gray('  5. Customize with your theme: atomix create-theme custom'));
       }
-      
+
     } catch (error) {
       handleError(error, spinner);
     }
@@ -1359,7 +1180,7 @@ program
       if (options.skipInstall) {
         process.env.ATOMIX_SKIP_INSTALL = 'true';
       }
-      
+
       // Run the interactive wizard
       await runInitWizard();
     } catch (error) {
@@ -1380,21 +1201,22 @@ program
   .action(async (action, options) => {
     try {
       debug(`Token action: ${action}`, options);
-      
+
       switch (action.toLowerCase()) {
         case 'list':
         case 'ls':
           await listTokens(options.category);
           break;
-          
+
         case 'validate':
-        case 'check':
+        case 'check': {
           const validationResult = await validateTokens(options);
           if (validationResult.issues.length > 0) {
             process.exit(1); // Exit with error if issues found
           }
           break;
-          
+        }
+
         case 'export':
           if (!options.format) {
             throw new AtomixCLIError(
@@ -1407,9 +1229,24 @@ program
               ]
             );
           }
-          await exportTokens(options.format, options.output);
+          if (options.output) {
+            const outValidation = validatePath(sanitizeInput(options.output));
+            if (!outValidation.isValid) {
+              throw new AtomixCLIError(
+                outValidation.error,
+                'INVALID_PATH',
+                [
+                  'Use a project-relative output file path',
+                  'Example: --output ./tokens.json'
+                ]
+              );
+            }
+            await exportTokens(options.format, outValidation.safePath);
+          } else {
+            await exportTokens(options.format, options.output);
+          }
           break;
-          
+
         case 'import':
           if (!options.output) {
             throw new AtomixCLIError(
@@ -1421,9 +1258,22 @@ program
               ]
             );
           }
-          await importTokens(options.output, { dryRun: options.dryRun });
+          {
+            const inValidation = validatePath(sanitizeInput(options.output));
+            if (!inValidation.isValid) {
+              throw new AtomixCLIError(
+                inValidation.error,
+                'INVALID_PATH',
+                [
+                  'Use a project-relative input file path',
+                  'Example: --output ./tokens.json'
+                ]
+              );
+            }
+            await importTokens(inValidation.safePath, { dryRun: options.dryRun });
+          }
           break;
-          
+
         default:
           throw new AtomixCLIError(
             `Unknown token action: ${action}`,
@@ -1435,7 +1285,7 @@ program
             ]
           );
       }
-      
+
     } catch (error) {
       handleError(error);
     }
@@ -1526,12 +1376,13 @@ themeCommand
   .option('--template <name>', 'Use template (dark|light|high-contrast)')
   .option('--interactive', 'Interactive mode', false)
   .option('-o, --output <path>', 'Output directory', './themes')
+  .option('-f, --force', 'Overwrite existing theme', false)
   .action(async (name, options) => {
     const spinner = ora('Creating theme...').start();
-    
+
     try {
       debug(`Creating theme: ${name}`, options);
-      
+
       // Validate name
       const nameValidation = validateThemeName(name);
       if (!nameValidation.isValid) {
@@ -1546,25 +1397,31 @@ themeCommand
           ]
         );
       }
-      
+
       const themePath = join(options.output, name);
-      
+
       // Check if theme already exists
       if (existsSync(themePath)) {
-        throw new AtomixCLIError(
-          `Theme ${name} already exists`,
-          'THEME_EXISTS',
-          [
-            `Delete the existing theme at ${themePath}`,
-            'Choose a different theme name',
-            'Use --force flag to overwrite (not yet implemented)'
-          ]
-        );
+        if (options.force) {
+          await rm(themePath, { recursive: true, force: true });
+          await mkdir(themePath, { recursive: true });
+          spinner.info(chalk.yellow(`Overwriting existing theme: ${name}`));
+        } else {
+          throw new AtomixCLIError(
+            `Theme ${name} already exists`,
+            'THEME_EXISTS',
+            [
+              `Delete the existing theme at ${themePath}`,
+              'Choose a different theme name',
+              'Use --force flag to overwrite'
+            ]
+          );
+        }
+      } else {
+        // Create theme directory
+        await mkdir(themePath, { recursive: true });
       }
-      
-      // Create theme directory
-      await mkdir(themePath, { recursive: true });
-      
+
       // Generate theme files based on type
       if (options.type === 'css') {
         // Create SCSS theme
@@ -1616,10 +1473,10 @@ themeCommand
   }
 }
 `;
-        
+
         await writeFile(join(themePath, 'index.scss'), scssContent, 'utf8');
         spinner.succeed(chalk.green(`✓ Created ${name}/index.scss`));
-        
+
       } else if (options.type === 'js') {
         // Create JavaScript theme
         const jsContent = `/**
@@ -1689,11 +1546,11 @@ export const ${name.replace(/-([a-z])/g, (_, c) => c.toUpperCase())}Theme = crea
 
 export default ${name.replace(/-([a-z])/g, (_, c) => c.toUpperCase())}Theme;
 `;
-        
+
         await writeFile(join(themePath, 'index.ts'), jsContent, 'utf8');
         spinner.succeed(chalk.green(`✓ Created ${name}/index.ts`));
       }
-      
+
       // Create README
       const readmeContent = `# ${name} Theme
 
@@ -1734,17 +1591,17 @@ Edit the theme variables in \`index.${options.type === 'css' ? 'scss' : 'ts'}\`
 atomix build-theme themes/${name}
 \`\`\`
 `;
-      
+
       await writeFile(join(themePath, 'README.md'), readmeContent, 'utf8');
       console.log(chalk.green(`  ✓ Created ${name}/README.md`));
-      
+
       // Success message
       console.log(boxen(
         chalk.bold.green(`🎨 Theme "${name}" created successfully!\n\n`) +
         chalk.cyan('Next steps:\n') +
         chalk.gray(`1. Customize your theme:\n`) +
         chalk.white(`   Edit ${themePath}/index.${options.type === 'css' ? 'scss' : 'ts'}\n\n`) +
-        (options.type === 'css' 
+        (options.type === 'css'
           ? chalk.gray(`2. Build your theme:\n`) + chalk.white(`   atomix build-theme ${themePath}\n\n`)
           : chalk.gray(`2. Use in your app:\n`) + chalk.white(`   import theme from './themes/${name}';\n\n`)
         ) +
@@ -1757,7 +1614,62 @@ atomix build-theme themes/${name}
           borderColor: 'green'
         }
       ));
-      
+
+    } catch (error) {
+      handleError(error, spinner);
+    }
+  });
+
+/**
+ * Docs Command Group - NEW (Documentation Management)
+ */
+const docsCommand = program
+  .command('docs')
+  .description('Documentation management commands');
+
+// Docs sync
+docsCommand
+  .command('sync')
+  .description('Sync documentation with component guidelines')
+  .option('--validate', 'Validate documentation after sync', true)
+  .action(async (options) => {
+    const spinner = ora('Syncing documentation...').start();
+
+    try {
+      await syncDocumentation();
+      spinner.stop();
+
+      if (options.validate) {
+        await validateDocumentation();
+      }
+    } catch (error) {
+      handleError(error, spinner);
+    }
+  });
+
+// Docs validate
+docsCommand
+  .command('validate')
+  .description('Validate documentation completeness')
+  .action(async () => {
+    try {
+      await validateDocumentation();
+    } catch (error) {
+      handleError(error);
+    }
+  });
+
+// Docs generate CLI
+docsCommand
+  .command('generate-cli')
+  .description('Generate CLI documentation from commands')
+  .action(async () => {
+    const spinner = ora('Generating CLI documentation...').start();
+
+    try {
+      const result = await generateCLIDocumentation();
+      spinner.succeed(chalk.green('CLI documentation generated'));
+      console.log(chalk.gray(`  → ${result.file}`));
     } catch (error) {
       handleError(error, spinner);
     }
@@ -1771,21 +1683,20 @@ program
   .description('Diagnose common issues with your Atomix setup')
   .action(async () => {
     const spinner = ora('Running diagnostics...').start();
-    
+
     try {
       const checks = [];
-      
+
       // Check Node version
-      const nodeVersion = process.version;
-      const majorVersion = parseInt(nodeVersion.slice(1).split('.')[0]);
+      const versionCheck = checkNodeVersion('18.0.0');
       checks.push({
         name: 'Node.js Version',
-        status: majorVersion >= 16 ? '✅' : '❌',
-        message: majorVersion >= 16 
-          ? `${nodeVersion} (supported)`
-          : `${nodeVersion} (requires Node 16+)`,
+        status: versionCheck.compatible ? '✅' : '❌',
+        message: versionCheck.compatible
+          ? `v${versionCheck.current} (supported)`
+          : `v${versionCheck.current} (requires Node ${versionCheck.required}+)`,
       });
-      
+
       // Check Atomix installation
       const atomixPath = join(process.cwd(), 'node_modules', '@shohojdhara', 'atomix');
       checks.push({
@@ -1795,7 +1706,7 @@ program
           ? 'Installed correctly'
           : 'Not found - run: npm install @shohojdhara/atomix',
       });
-      
+
       // Check for required dependencies
       const requiredDeps = ['react', 'react-dom', 'sass'];
       for (const dep of requiredDeps) {
@@ -1808,7 +1719,7 @@ program
             : 'Missing (may be required for some features)',
         });
       }
-      
+
       // Check for configuration files
       const configFiles = ['.atomixrc', 'atomix.config.js', 'atomix.config.json', 'theme.config.ts'];
       let hasConfig = false;
@@ -1820,7 +1731,7 @@ program
           break;
         }
       }
-      
+
       checks.push({
         name: 'Configuration File',
         status: hasConfig ? '✅' : '💡',
@@ -1828,12 +1739,12 @@ program
           ? `Configuration found (${configFile})`
           : 'No config file (using defaults)',
       });
-      
+
       // Check theme CLI availability
       const themeCLIAvailable = await import('./cli/theme-bridge.js')
         .then(m => m.isThemeCLIAvailable())
         .catch(() => false);
-      
+
       checks.push({
         name: 'Theme CLI',
         status: themeCLIAvailable ? '✅' : '⚠️',
@@ -1841,21 +1752,21 @@ program
           ? 'Available'
           : 'Theme devtools not found',
       });
-      
+
       spinner.stop();
-      
+
       // Display results
       console.log(chalk.bold('\n🏥 Atomix Doctor Report\n'));
-      console.log(chalk.gray('=' .repeat(50)));
-      
+      console.log(chalk.gray('='.repeat(50)));
+
       checks.forEach(check => {
         console.log(`${check.status} ${chalk.bold(check.name)}`);
         console.log(`   ${chalk.gray(check.message)}\n`);
       });
-      
+
       const hasIssues = checks.some(c => c.status === '❌');
       const hasWarnings = checks.some(c => c.status === '⚠️');
-      
+
       if (hasIssues) {
         console.log(chalk.red('\n❌ Some issues need attention'));
       } else if (hasWarnings) {
@@ -1863,425 +1774,13 @@ program
       } else {
         console.log(chalk.green('\n✅ Everything looks good!'));
       }
-      
+
     } catch (error) {
       handleError(error, spinner);
     }
   });
 
-// Token generation functions
-function generateColorTokens() {
-  return `// Custom Color Tokens
-// Generated by Atomix CLI
-// =============================================================================
-
-// Brand Colors
-// Customize these to match your brand identity
-$custom-primary-1: #fff9e6 !default;
-$custom-primary-2: #fff4cc !default;
-$custom-primary-3: #ffe699 !default;
-$custom-primary-4: #ffd966 !default;
-$custom-primary-5: #ffcc33 !default;
-$custom-primary-6: #ffb800 !default; // Main brand color
-$custom-primary-7: #e6a600 !default;
-$custom-primary-8: #cc9400 !default;
-$custom-primary-9: #b38200 !default;
-$custom-primary-10: #997000 !default;
-
-// Semantic Colors
-$custom-success: #22c55e !default;
-$custom-warning: #eab308 !default;
-$custom-error: #ef4444 !default;
-$custom-info: #3b82f6 !default;
-
-// Neutral Colors
-$custom-gray-1: #f9fafb !default;
-$custom-gray-2: #f3f4f6 !default;
-$custom-gray-3: #e5e7eb !default;
-$custom-gray-4: #d1d5db !default;
-$custom-gray-5: #9ca3af !default;
-$custom-gray-6: #6b7280 !default;
-$custom-gray-7: #4b5563 !default;
-$custom-gray-8: #374151 !default;
-$custom-gray-9: #1f2937 !default;
-$custom-gray-10: #111827 !default;
-
-// Background Colors
-$custom-body-bg: #ffffff !default;
-$custom-body-bg-dark: #1f2937 !default;
-
-// Text Colors
-$custom-body-color: $custom-gray-10 !default;
-$custom-body-color-dark: #ffffff !default;
-
-// Link Colors
-$custom-link-color: $custom-primary-6 !default;
-$custom-link-hover-color: $custom-primary-7 !default;
-
-// Border Colors
-$custom-border-color: $custom-gray-3 !default;
-$custom-border-color-dark: $custom-gray-7 !default;
-
-// Focus Colors
-$custom-focus-color: $custom-primary-5 !default;
-$custom-focus-color-dark: $custom-primary-4 !default;
-
-// Export custom colors to override defaults
-$primary: $custom-primary-6 !default;
-$success: $custom-success !default;
-$warning: $custom-warning !default;
-$error: $custom-error !default;
-$info: $custom-info !default;
-
-// Dark mode overrides
-$body-bg-dark: $custom-body-bg-dark !default;
-$body-color-dark: $custom-body-color-dark !default;
-$border-color-dark: $custom-border-color-dark !default;
-`;
-}
-
-function generateSpacingTokens() {
-  return `// Custom Spacing Tokens
-// Generated by Atomix CLI
-// =============================================================================
-
-// Base spacing unit (change this to scale all spacing)
-$custom-spacing-base: 0.25rem !default; // 4px
-
-// Spacing scale
-$custom-spacing-0: 0 !default;
-$custom-spacing-1: $custom-spacing-base !default; // 4px
-$custom-spacing-2: calc($custom-spacing-base * 2) !default; // 8px
-$custom-spacing-3: calc($custom-spacing-base * 3) !default; // 12px
-$custom-spacing-4: calc($custom-spacing-base * 4) !default; // 16px
-$custom-spacing-5: calc($custom-spacing-base * 5) !default; // 20px
-$custom-spacing-6: calc($custom-spacing-base * 6) !default; // 24px
-$custom-spacing-7: calc($custom-spacing-base * 7) !default; // 28px
-$custom-spacing-8: calc($custom-spacing-base * 8) !default; // 32px
-$custom-spacing-9: calc($custom-spacing-base * 9) !default; // 36px
-$custom-spacing-10: calc($custom-spacing-base * 10) !default; // 40px
-$custom-spacing-11: calc($custom-spacing-base * 11) !default; // 44px
-$custom-spacing-12: calc($custom-spacing-base * 12) !default; // 48px
-$custom-spacing-14: calc($custom-spacing-base * 14) !default; // 56px
-$custom-spacing-16: calc($custom-spacing-base * 16) !default; // 64px
-$custom-spacing-20: calc($custom-spacing-base * 20) !default; // 80px
-$custom-spacing-24: calc($custom-spacing-base * 24) !default; // 96px
-$custom-spacing-28: calc($custom-spacing-base * 28) !default; // 112px
-$custom-spacing-32: calc($custom-spacing-base * 32) !default; // 128px
-$custom-spacing-36: calc($custom-spacing-base * 36) !default; // 144px
-$custom-spacing-40: calc($custom-spacing-base * 40) !default; // 160px
-$custom-spacing-44: calc($custom-spacing-base * 44) !default; // 176px
-$custom-spacing-48: calc($custom-spacing-base * 48) !default; // 192px
-$custom-spacing-52: calc($custom-spacing-base * 52) !default; // 208px
-$custom-spacing-56: calc($custom-spacing-base * 56) !default; // 224px
-$custom-spacing-60: calc($custom-spacing-base * 60) !default; // 240px
-$custom-spacing-64: calc($custom-spacing-base * 64) !default; // 256px
-
-// Component-specific spacing
-$custom-button-padding-x: $custom-spacing-4 !default;
-$custom-button-padding-y: $custom-spacing-2 !default;
-$custom-card-padding: $custom-spacing-6 !default;
-$custom-modal-padding: $custom-spacing-8 !default;
-
-// Layout spacing
-$custom-container-padding: $custom-spacing-4 !default;
-$custom-grid-gap: $custom-spacing-6 !default;
-$custom-section-spacing: $custom-spacing-16 !default;
-
-// Export to override defaults
-$spacing-sizes: (
-  0: $custom-spacing-0,
-  1: $custom-spacing-1,
-  2: $custom-spacing-2,
-  3: $custom-spacing-3,
-  4: $custom-spacing-4,
-  5: $custom-spacing-5,
-  6: $custom-spacing-6,
-  7: $custom-spacing-7,
-  8: $custom-spacing-8,
-  9: $custom-spacing-9,
-  10: $custom-spacing-10,
-  12: $custom-spacing-12,
-  16: $custom-spacing-16,
-  20: $custom-spacing-20,
-  24: $custom-spacing-24,
-  32: $custom-spacing-32,
-  40: $custom-spacing-40,
-  48: $custom-spacing-48,
-  56: $custom-spacing-56,
-  64: $custom-spacing-64,
-) !default;
-`;
-}
-
-function generateTypographyTokens() {
-  return `// Custom Typography Tokens
-// Generated by Atomix CLI
-// =============================================================================
-
-// Font Families
-$custom-font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
-$custom-font-family-serif: Georgia, "Times New Roman", Times, serif !default;
-$custom-font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
-
-// Font Size Scale
-$custom-font-size-xs: 0.75rem !default; // 12px
-$custom-font-size-sm: 0.875rem !default; // 14px
-$custom-font-size-base: 1rem !default; // 16px
-$custom-font-size-lg: 1.125rem !default; // 18px
-$custom-font-size-xl: 1.25rem !default; // 20px
-$custom-font-size-2xl: 1.5rem !default; // 24px
-$custom-font-size-3xl: 1.875rem !default; // 30px
-$custom-font-size-4xl: 2.25rem !default; // 36px
-$custom-font-size-5xl: 3rem !default; // 48px
-$custom-font-size-6xl: 3.75rem !default; // 60px
-$custom-font-size-7xl: 4.5rem !default; // 72px
-$custom-font-size-8xl: 6rem !default; // 96px
-
-// Line Heights
-$custom-line-height-tight: 1.2 !default;
-$custom-line-height-base: 1.5 !default;
-$custom-line-height-relaxed: 1.75 !default;
-$custom-line-height-loose: 2 !default;
-
-// Font Weights
-$custom-font-weight-light: 300 !default;
-$custom-font-weight-normal: 400 !default;
-$custom-font-weight-medium: 500 !default;
-$custom-font-weight-semibold: 600 !default;
-$custom-font-weight-bold: 700 !default;
-$custom-font-weight-heavy: 800 !default;
-$custom-font-weight-black: 900 !default;
-
-// Letter Spacing
-$custom-letter-spacing-tight: -0.05em !default;
-$custom-letter-spacing-normal: 0 !default;
-$custom-letter-spacing-wide: 0.025em !default;
-$custom-letter-spacing-wider: 0.05em !default;
-$custom-letter-spacing-widest: 0.1em !default;
-
-// Heading Sizes
-$custom-h1-font-size: $custom-font-size-5xl !default;
-$custom-h2-font-size: $custom-font-size-4xl !default;
-$custom-h3-font-size: $custom-font-size-3xl !default;
-$custom-h4-font-size: $custom-font-size-2xl !default;
-$custom-h5-font-size: $custom-font-size-xl !default;
-$custom-h6-font-size: $custom-font-size-lg !default;
-
-// Export to override defaults
-$font-family-base: $custom-font-family-sans !default;
-$font-family-monospace: $custom-font-family-mono !default;
-$font-size-base: $custom-font-size-base !default;
-$font-size-sm: $custom-font-size-sm !default;
-$font-size-lg: $custom-font-size-lg !default;
-$line-height-base: $custom-line-height-base !default;
-$font-weight-base: $custom-font-weight-normal !default;
-
-// Heading overrides
-$h1-font-size: $custom-h1-font-size !default;
-$h2-font-size: $custom-h2-font-size !default;
-$h3-font-size: $custom-h3-font-size !default;
-$h4-font-size: $custom-h4-font-size !default;
-$h5-font-size: $custom-h5-font-size !default;
-$h6-font-size: $custom-h6-font-size !default;
-`;
-}
-
-function generateShadowTokens() {
-  return `// Custom Box Shadow Tokens
-// Generated by Atomix CLI
-// =============================================================================
-
-// Shadow Colors
-$custom-shadow-color: rgba(0, 0, 0, 0.1) !default;
-$custom-shadow-color-dark: rgba(0, 0, 0, 0.2) !default;
-
-// Shadow Sizes
-$custom-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !default;
-$custom-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !default;
-$custom-shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !default;
-$custom-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !default;
-$custom-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !default;
-$custom-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !default;
-$custom-shadow-2xl: 0 35px 60px -15px rgba(0, 0, 0, 0.3) !default;
-$custom-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !default;
-$custom-shadow-none: none !default;
-
-// Component-specific shadows
-$custom-button-shadow: $custom-shadow-sm !default;
-$custom-button-shadow-hover: $custom-shadow-md !default;
-$custom-card-shadow: $custom-shadow-base !default;
-$custom-dropdown-shadow: $custom-shadow-lg !default;
-$custom-modal-shadow: $custom-shadow-xl !default;
-$custom-popover-shadow: $custom-shadow-lg !default;
-$custom-tooltip-shadow: $custom-shadow-md !default;
-
-// Dark mode shadows
-$custom-shadow-xs-dark: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !default;
-$custom-shadow-sm-dark: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !default;
-$custom-shadow-base-dark: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !default;
-$custom-shadow-lg-dark: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4) !default;
-$custom-shadow-xl-dark: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !default;
-
-// Export to override defaults
-$box-shadow: $custom-shadow-base !default;
-$box-shadow-xs: $custom-shadow-xs !default;
-$box-shadow-sm: $custom-shadow-sm !default;
-$box-shadow-lg: $custom-shadow-lg !default;
-$box-shadow-xl: $custom-shadow-xl !default;
-$box-shadow-inset: $custom-shadow-inner !default;
-
-// Dark mode exports
-$box-shadow-dark: $custom-shadow-base-dark !default;
-$box-shadow-xs-dark: $custom-shadow-xs-dark !default;
-$box-shadow-sm-dark: $custom-shadow-sm-dark !default;
-$box-shadow-lg-dark: $custom-shadow-lg-dark !default;
-$box-shadow-xl-dark: $custom-shadow-xl-dark !default;
-`;
-}
-
-function generateRadiusTokens() {
-  return `// Custom Border Radius Tokens
-// Generated by Atomix CLI
-// =============================================================================
-
-// Base radius unit
-$custom-radius-base: 0.25rem !default; // 4px
-
-// Radius Scale
-$custom-radius-none: 0 !default;
-$custom-radius-sm: calc($custom-radius-base * 0.5) !default; // 2px
-$custom-radius-base: $custom-radius-base !default; // 4px
-$custom-radius-md: calc($custom-radius-base * 1.5) !default; // 6px
-$custom-radius-lg: calc($custom-radius-base * 2) !default; // 8px
-$custom-radius-xl: calc($custom-radius-base * 3) !default; // 12px
-$custom-radius-2xl: calc($custom-radius-base * 4) !default; // 16px
-$custom-radius-3xl: calc($custom-radius-base * 6) !default; // 24px
-$custom-radius-4xl: calc($custom-radius-base * 8) !default; // 32px
-$custom-radius-full: 9999px !default; // Fully rounded
-
-// Component-specific radius
-$custom-button-radius: $custom-radius-md !default;
-$custom-button-radius-sm: $custom-radius-sm !default;
-$custom-button-radius-lg: $custom-radius-lg !default;
-$custom-card-radius: $custom-radius-lg !default;
-$custom-input-radius: $custom-radius-md !default;
-$custom-badge-radius: $custom-radius-full !default;
-$custom-chip-radius: $custom-radius-full !default;
-$custom-tooltip-radius: $custom-radius-md !default;
-$custom-modal-radius: $custom-radius-xl !default;
-$custom-dropdown-radius: $custom-radius-lg !default;
-
-// Export to override defaults
-$border-radius: $custom-radius-md !default;
-$border-radius-sm: $custom-radius-sm !default;
-$border-radius-lg: $custom-radius-lg !default;
-$border-radius-xl: $custom-radius-xl !default;
-$border-radius-xxl: $custom-radius-2xl !default;
-$border-radius-3xl: $custom-radius-3xl !default;
-$border-radius-4xl: $custom-radius-4xl !default;
-$border-radius-pill: $custom-radius-full !default;
-
-// Component radius exports
-$btn-border-radius: $custom-button-radius !default;
-$btn-border-radius-sm: $custom-button-radius-sm !default;
-$btn-border-radius-lg: $custom-button-radius-lg !default;
-$card-border-radius: $custom-card-radius !default;
-$input-border-radius: $custom-input-radius !default;
-$badge-border-radius: $custom-badge-radius !default;
-`;
-}
-
-function generateAnimationTokens() {
-  return `// Custom Animation Tokens
-// Generated by Atomix CLI
-// =============================================================================
-
-// Transition Durations
-$custom-duration-instant: 0s !default;
-$custom-duration-fast: 0.15s !default;
-$custom-duration-base: 0.3s !default;
-$custom-duration-slow: 0.5s !default;
-$custom-duration-slower: 0.7s !default;
-$custom-duration-slowest: 1s !default;
-
-// Easing Functions
-$custom-ease-linear: linear !default;
-$custom-ease-in: cubic-bezier(0.4, 0, 1, 1) !default;
-$custom-ease-out: cubic-bezier(0, 0, 0.2, 1) !default;
-$custom-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1) !default;
-$custom-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55) !default;
-$custom-ease-smooth: cubic-bezier(0.23, 1, 0.32, 1) !default;
-
-// Transition Properties
-$custom-transition-all: all $custom-duration-base $custom-ease-smooth !default;
-$custom-transition-colors: background-color $custom-duration-base $custom-ease-smooth, 
-                          border-color $custom-duration-base $custom-ease-smooth, 
-                          color $custom-duration-base $custom-ease-smooth, 
-                          fill $custom-duration-base $custom-ease-smooth, 
-                          stroke $custom-duration-base $custom-ease-smooth !default;
-$custom-transition-opacity: opacity $custom-duration-base $custom-ease-smooth !default;
-$custom-transition-shadow: box-shadow $custom-duration-base $custom-ease-smooth !default;
-$custom-transition-transform: transform $custom-duration-base $custom-ease-smooth !default;
-
-// Component-specific transitions
-$custom-button-transition: $custom-transition-colors, $custom-transition-shadow, $custom-transition-transform !default;
-$custom-link-transition: $custom-transition-colors, text-decoration-color $custom-duration-base $custom-ease-smooth !default;
-$custom-input-transition: $custom-transition-colors, $custom-transition-shadow !default;
-$custom-card-transition: $custom-transition-shadow, $custom-transition-transform !default;
-$custom-modal-transition: $custom-transition-opacity, $custom-transition-transform !default;
-$custom-dropdown-transition: $custom-transition-opacity, $custom-transition-transform !default;
-
-// Animation Keyframes (examples)
-@keyframes custom-fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes custom-slide-in-up {
-  from {
-    transform: translateY(10px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@keyframes custom-scale-in {
-  from {
-    transform: scale(0.95);
-    opacity: 0;
-  }
-  to {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-@keyframes custom-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
 
-// Export to override defaults
-$transition-fast: $custom-transition-all !default;
-$transition-base: $custom-transition-all !default;
-$transition-slow: all $custom-duration-slow $custom-ease-smooth !default;
-
-// Duration exports
-$transition-duration-fast: $custom-duration-fast !default;
-$transition-duration-base: $custom-duration-base !default;
-$transition-duration-slow: $custom-duration-slow !default;
-
-// Easing exports
-$easing-base: $custom-ease-smooth !default;
-$easing-ease-in-out: $custom-ease-in-out !default;
-$easing-ease-out: $custom-ease-out !default;
-$easing-ease-in: $custom-ease-in !default;
-`;
-}
 
 // Parse arguments
 program.parse(process.argv);