weloop-kosign 1.1.2 → 1.1.4

package/scripts/cli-remote.js

@@ -48,22 +48,81 @@ const { execSync } = require('child_process');
  */
 function getDefaultRegistryUrl() {
   const localRegistryPath = path.join(__dirname, '../registry');
-  
+
   // Check if we're running in the component library project itself
   if (fs.existsSync(localRegistryPath) && fs.existsSync(path.join(localRegistryPath, 'index.json'))) {
     return localRegistryPath;
   }
-  
+
   // Fall back to environment variable or default remote URL
-  return process.env.WELOOP_REGISTRY_URL || 
+  return process.env.WELOOP_REGISTRY_URL ||
     'https://gitlab.com/Sophanithchrek/weloop-shadcn-next-app/-/raw/main/registry';
 }
 
 const DEFAULT_REGISTRY_URL = getDefaultRegistryUrl();
 
+// ============================================================================
+// CONSTANTS
+// ============================================================================
+
 // Network timeout constants (in milliseconds)
 const REQUEST_TIMEOUT = 15000;
 const RETRY_DELAY = 1000;
+const MAX_RETRIES = 3;
+
+// Package names
+const PACKAGE_NAMES = {
+  CLSX: 'clsx',
+  TAILWIND_MERGE: 'tailwind-merge',
+  TW_ANIMATE_CSS: 'tw-animate-css',
+};
+
+// Base dependencies required for all components
+const BASE_DEPENDENCIES = [PACKAGE_NAMES.CLSX, PACKAGE_NAMES.TAILWIND_MERGE];
+
+// File paths
+const PATHS = {
+  COMPONENTS_JSON: 'components.json',
+  REGISTRY_INDEX: 'index.json',
+  APP_GLOBALS_CSS: 'app/globals.css',
+  STYLES_GLOBALS_CSS: 'styles/globals.css',
+  VITE_INDEX_CSS: 'src/index.css',
+  PACKAGE_JSON: 'package.json',
+};
+
+// Default configuration values
+const DEFAULTS = {
+  STYLE: 'blue',
+  BASE_COLOR: 'neutral',
+  CSS_PATH: PATHS.APP_GLOBALS_CSS,
+  SCHEMA_URL: 'https://weloop.kosign.dev/schema.json',
+  ICON_LIBRARY: 'lucide',
+};
+
+// Registry URLs
+const REGISTRY_URLS = {
+  DEFAULT: 'https://gitlab.com/Sophanithchrek/weloop-shadcn-next-app/-/raw/main/registry',
+  INDEX: 'https://gitlab.com/Sophanithchrek/weloop-shadcn-next-app/-/raw/main/registry/index.json',
+  CSS: 'https://gitlab.com/Sophanithchrek/weloop-shadcn-next-app/-/raw/main/app/globals.css',
+};
+
+// CSS patterns for regex matching
+const CSS_PATTERNS = {
+  TAILWIND_IMPORT: /@import\s+["']tailwindcss["'];?\s*\n?/g,
+  TW_ANIMATE_IMPORT: /@import\s+["']tw-animate-css["'];?\s*\n?/g,
+  CUSTOM_VARIANT: /@custom-variant\s+dark\s+\(&:is\(\.dark \*\)\);\s*\n?/g,
+  IMPORT_STATEMENT: /@import\s+["'][^"']+["'];?\s*\n?/g,
+  WELOOP_START: /(@theme\s+inline|:root\s*\{)/,
+};
+
+// Weloop style markers
+const WELOOP_MARKERS = [
+  '--WLDS-PRM-',
+  '--WLDS-RED-',
+  '--WLDS-NTL-',
+  '--system-100',
+  '--system-200',
+];
 
 // ============================================================================
 // UTILITIES - Logging and File System Helpers
@@ -130,6 +189,38 @@ function ensureDirectoryExists(dirPath) {
   }
 }
 
+/**
+ * Normalizes and cleans CSS content by removing duplicates and ensuring proper format
+ * @param {string} cssContent - CSS content to normalize
+ * @param {boolean} hasTwAnimate - Whether tw-animate-css package is installed
+ * @returns {string} Normalized CSS content
+ */
+function normalizeAndCleanCSS(cssContent, hasTwAnimate) {
+  let normalized = normalizeCSSFormat(cssContent);
+  normalized = removeDuplicateTwAnimateImports(normalized);
+  normalized = removeDuplicateCustomVariant(normalized);
+  // Ensure tw-animate import is handled correctly
+  normalized = processTwAnimateImport(normalized, hasTwAnimate, false);
+  return normalized;
+}
+
+/**
+ * Creates error message for CSS installation failures with helpful guidance
+ * @param {string} registryUrl - Registry URL that was attempted
+ * @param {string} cssPath - Target CSS file path
+ * @returns {string} Formatted error message with instructions
+ */
+function getCSSInstallErrorMessage(registryUrl, cssPath) {
+  const cssUrl = isLocalPath(registryUrl)
+    ? 'your local registry/app/globals.css'
+    : registryUrl.replace('/registry', '/app/globals.css');
+
+  return `\n   To add styles manually:\n` +
+    `   1. Download: ${cssUrl}\n` +
+    `   2. Add the CSS variables to your ${cssPath} file\n` +
+    `   3. Or copy from: ${REGISTRY_URLS.CSS}\n`;
+}
+
 /**
  * Checks if a path is a local file path or a remote URL
  * @param {string} pathOrUrl - Path or URL to check
@@ -158,12 +249,12 @@ function detectPackageManager() {
   if (fs.existsSync(path.join(process.cwd(), 'yarn.lock'))) return 'yarn';
   if (fs.existsSync(path.join(process.cwd(), 'pnpm-lock.yaml'))) return 'pnpm';
   if (fs.existsSync(path.join(process.cwd(), 'package-lock.json'))) return 'npm';
-  
+
   // Fallback: check npm user agent (set by npm/yarn/pnpm when running)
   const userAgent = process.env.npm_config_user_agent || '';
   if (userAgent.includes('yarn')) return 'yarn';
   if (userAgent.includes('pnpm')) return 'pnpm';
-  
+
   // Default to npm if we can't detect anything
   return 'npm';
 }
@@ -191,9 +282,9 @@ function getInstallCommand(packageManager, packages) {
  * @returns {boolean} True if package is installed, false otherwise
  */
 function checkPackageInstalled(packageName) {
-  const packageJsonPath = path.join(process.cwd(), 'package.json');
+  const packageJsonPath = path.join(process.cwd(), PATHS.PACKAGE_JSON);
   if (!fs.existsSync(packageJsonPath)) return false;
-  
+
   try {
     const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
     // Check both dependencies and devDependencies
@@ -212,16 +303,16 @@ function checkPackageInstalled(packageName) {
  * @returns {string[]} List of packages that need to be installed
  */
 function getMissingDependencies(requiredDeps) {
-  const packageJsonPath = path.join(process.cwd(), 'package.json');
+  const packageJsonPath = path.join(process.cwd(), PATHS.PACKAGE_JSON);
   if (!fs.existsSync(packageJsonPath)) {
     // No package.json means we need to install everything
     return requiredDeps;
   }
-  
+
   try {
     const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
     const allDeps = { ...packageJson.dependencies, ...packageJson.devDependencies };
-    
+
     return requiredDeps.filter(dep => {
       // For scoped packages like @radix-ui/react-button, also check @radix-ui
       const depName = dep.split('/').slice(0, 2).join('/');
@@ -243,44 +334,44 @@ function getMissingDependencies(requiredDeps) {
  */
 async function installPackages(packages) {
   if (packages.length === 0) return;
-  
+
   const packageManager = detectPackageManager();
   info(`\nInstalling dependencies: ${packages.join(', ')}`);
-  
+
   try {
     const installCmd = getInstallCommand(packageManager, packages);
-    
+
     // npm has noisy ERESOLVE warnings that aren't real errors
     // We filter these out while keeping actual error messages
     if (packageManager === 'npm') {
       const { spawn } = require('child_process');
       const [cmd, ...args] = installCmd.split(' ');
-      
+
       await new Promise((resolve, reject) => {
         const proc = spawn(cmd, args, {
           cwd: process.cwd(),
           stdio: ['inherit', 'inherit', 'pipe'],
           shell: true
         });
-        
+
         let stderr = '';
         proc.stderr.on('data', (data) => {
           const output = data.toString();
           // Filter out ERESOLVE peer dependency warnings (these are usually safe to ignore)
           // but keep actual error messages visible to the user
-          if (!output.includes('ERESOLVE overriding peer dependency') && 
-              !output.includes('npm warn ERESOLVE')) {
+          if (!output.includes('ERESOLVE overriding peer dependency') &&
+            !output.includes('npm warn ERESOLVE')) {
             process.stderr.write(data);
           }
           stderr += output;
         });
-        
+
         proc.on('close', (code) => {
           if (code !== 0) {
             // npm sometimes exits with non-zero code due to warnings, not real errors
             // Check if there's an actual error message (not just ERESOLVE warnings)
-            const hasRealError = stderr.includes('npm error') && 
-                                 !stderr.match(/npm error.*ERESOLVE/);
+            const hasRealError = stderr.includes('npm error') &&
+              !stderr.match(/npm error.*ERESOLVE/);
             if (hasRealError) {
               reject(new Error(`Installation failed with code ${code}`));
             } else {
@@ -291,13 +382,13 @@ async function installPackages(packages) {
             resolve();
           }
         });
-        
+
         proc.on('error', reject);
       });
     } else {
       execSync(installCmd, { stdio: 'inherit', cwd: process.cwd() });
     }
-    
+
     success(`Dependencies installed successfully`);
   } catch (error) {
     warn(`Failed to install dependencies automatically`);
@@ -319,25 +410,25 @@ async function installPackages(packages) {
  * @returns {object} The default configuration object
  */
 function createDefaultComponentsConfig() {
-  const configPath = path.join(process.cwd(), 'components.json');
-  
+  const configPath = path.join(process.cwd(), PATHS.COMPONENTS_JSON);
+
   // Detect Next.js project structure
   // App Router uses 'app/globals.css', Pages Router uses 'styles/globals.css'
   const hasAppDir = fs.existsSync(path.join(process.cwd(), 'app'));
-  const cssPath = hasAppDir ? 'app/globals.css' : 'styles/globals.css';
-  
+  const cssPath = hasAppDir ? PATHS.APP_GLOBALS_CSS : PATHS.STYLES_GLOBALS_CSS;
+
   const defaultConfig = {
-    style: 'blue',
+    style: DEFAULTS.STYLE,
     rsc: true,
     tsx: true,
     tailwind: {
       config: 'tailwind.config.ts',
       css: cssPath,
-      baseColor: 'neutral',
+      baseColor: DEFAULTS.BASE_COLOR,
       cssVariables: true,
       prefix: ''
     },
-    iconLibrary: 'lucide',
+    iconLibrary: DEFAULTS.ICON_LIBRARY,
     aliases: {
       components: '@/components',
       utils: '@/lib/utils',
@@ -345,13 +436,13 @@ function createDefaultComponentsConfig() {
       lib: '@/lib',
       hooks: '@/hooks'
     },
-    registry: 'https://gitlab.com/Sophanithchrek/weloop-shadcn-next-app/-/raw/main/registry/index.json'
+    registry: REGISTRY_URLS.INDEX
   };
-  
+
   fs.writeFileSync(configPath, JSON.stringify(defaultConfig, null, 2));
-  success(`Created components.json`);
+  success(`Created ${PATHS.COMPONENTS_JSON}`);
   info(`   You can customize this file to match your project setup`);
-  
+
   return defaultConfig;
 }
 
@@ -362,15 +453,20 @@ function createDefaultComponentsConfig() {
  * @returns {object} The configuration object
  */
 function loadComponentsConfig() {
-  const configPath = path.join(process.cwd(), 'components.json');
-  
+  const configPath = path.join(process.cwd(), PATHS.COMPONENTS_JSON);
+
   if (!fs.existsSync(configPath)) {
-    info('components.json not found. Creating default configuration...');
+    info(`${PATHS.COMPONENTS_JSON} not found. Creating default configuration...`);
     return createDefaultComponentsConfig();
   }
-  
-  const content = fs.readFileSync(configPath, 'utf-8');
-  return JSON.parse(content);
+
+  try {
+    const content = fs.readFileSync(configPath, 'utf-8');
+    return JSON.parse(content);
+  } catch (err) {
+    error(`Failed to parse ${PATHS.COMPONENTS_JSON}: ${err.message}`);
+    throw err;
+  }
 }
 
 /**
@@ -386,21 +482,21 @@ function loadComponentsConfig() {
  * @param {number} retries - Number of retry attempts (default: 3)
  * @returns {Promise<object>} Parsed JSON object
  */
-async function fetchJSON(urlOrPath, retries = 3) {
+async function fetchJSON(urlOrPath, retries = MAX_RETRIES) {
   // Handle local file paths
   if (isLocalPath(urlOrPath)) {
     return new Promise((resolve, reject) => {
       try {
         // Resolve relative paths to absolute
-        const fullPath = path.isAbsolute(urlOrPath) 
-          ? urlOrPath 
+        const fullPath = path.isAbsolute(urlOrPath)
+          ? urlOrPath
           : path.join(process.cwd(), urlOrPath);
-        
+
         if (!fs.existsSync(fullPath)) {
           reject(new Error(`File not found: ${fullPath}`));
           return;
         }
-        
+
         const content = fs.readFileSync(fullPath, 'utf-8');
         resolve(JSON.parse(content));
       } catch (e) {
@@ -408,38 +504,38 @@ async function fetchJSON(urlOrPath, retries = 3) {
       }
     });
   }
-  
+
   // Handle remote URLs
   return new Promise((resolve, reject) => {
     const client = urlOrPath.startsWith('https') ? https : http;
     let timeout;
     let request;
-    
+
     const makeRequest = () => {
       request = client.get(urlOrPath, (res) => {
         clearTimeout(timeout);
-        
+
         // Handle HTTP redirects (301, 302)
         if (res.statusCode === 302 || res.statusCode === 301) {
           return fetchJSON(res.headers.location, retries).then(resolve).catch(reject);
         }
-        
+
         // Provide helpful error messages for common HTTP status codes
         if (res.statusCode === 403) {
           reject(new Error(`Access forbidden (403). Repository may be private. Make it public in GitLab/GitHub settings, or use --registry with a public URL.`));
           return;
         }
-        
+
         if (res.statusCode === 404) {
           reject(new Error(`Not found (404). Check that the registry files are pushed to the repository and the URL is correct.`));
           return;
         }
-        
+
         if (res.statusCode !== 200) {
           reject(new Error(`Failed to fetch: HTTP ${res.statusCode} - ${res.statusMessage || 'Unknown error'}`));
           return;
         }
-        
+
         // Collect response data
         let data = '';
         res.on('data', (chunk) => { data += chunk; });
@@ -456,7 +552,7 @@ async function fetchJSON(urlOrPath, retries = 3) {
           }
         });
       });
-      
+
       // Handle network errors with automatic retry
       request.on('error', (err) => {
         clearTimeout(timeout);
@@ -469,7 +565,7 @@ async function fetchJSON(urlOrPath, retries = 3) {
           reject(new Error(`Network error: ${err.message} (${err.code || 'UNKNOWN'})`));
         }
       });
-      
+
       // Set request timeout with retry logic
       timeout = setTimeout(() => {
         request.destroy();
@@ -483,7 +579,7 @@ async function fetchJSON(urlOrPath, retries = 3) {
         }
       }, REQUEST_TIMEOUT);
     };
-    
+
     makeRequest();
   });
 }
@@ -503,34 +599,34 @@ async function fetchText(urlOrPath) {
     }
     return fs.readFileSync(urlOrPath, 'utf-8');
   }
-  
+
   // Handle remote URLs
   return new Promise((resolve, reject) => {
     const client = urlOrPath.startsWith('https') ? https : http;
     let data = '';
-    
+
     const req = client.get(urlOrPath, (res) => {
       // Follow redirects
       if (res.statusCode === 302 || res.statusCode === 301) {
         return fetchText(res.headers.location).then(resolve).catch(reject);
       }
-      
+
       // Handle common HTTP errors
       if (res.statusCode === 403) {
         reject(new Error('Access forbidden - repository may be private'));
         return;
       }
-      
+
       if (res.statusCode === 404) {
         reject(new Error('CSS file not found in repository'));
         return;
       }
-      
+
       if (res.statusCode !== 200) {
         reject(new Error(`HTTP ${res.statusCode}`));
         return;
       }
-      
+
       // Collect response data
       res.on('data', (chunk) => { data += chunk; });
       res.on('end', () => {
@@ -542,7 +638,7 @@ async function fetchText(urlOrPath) {
         resolve(data);
       });
     });
-    
+
     // Handle network errors with automatic retry
     req.on('error', (err) => {
       if (err.code === 'ECONNRESET' || err.code === 'ETIMEDOUT') {
@@ -553,7 +649,7 @@ async function fetchText(urlOrPath) {
         reject(err);
       }
     });
-    
+
     // Set request timeout
     req.setTimeout(REQUEST_TIMEOUT, () => {
       req.destroy();
@@ -573,13 +669,14 @@ async function fetchText(urlOrPath) {
 function resolveRegistryPath(baseUrl, fileName) {
   if (isLocalPath(baseUrl)) {
     // Resolve local paths (absolute or relative)
-    const basePath = path.isAbsolute(baseUrl) 
-      ? baseUrl 
+    const basePath = path.isAbsolute(baseUrl)
+      ? baseUrl
       : path.join(process.cwd(), baseUrl);
     return path.join(basePath, fileName);
   }
-  // For remote URLs, just append the filename
-  return `${baseUrl}/${fileName}`;
+  // For remote URLs, append filename with proper separator
+  const separator = baseUrl.endsWith('/') ? '' : '/';
+  return `${baseUrl}${separator}${fileName}`;
 }
 
 /**
@@ -596,6 +693,7 @@ async function loadRegistry(componentName, registryBaseUrl) {
     return await fetchJSON(registryPath);
   } catch (err) {
     // Component not found - return null instead of throwing
+    // This allows the caller to handle missing components gracefully
     return null;
   }
 }
@@ -608,7 +706,7 @@ async function loadRegistry(componentName, registryBaseUrl) {
  * @returns {Promise<object>} Index object containing list of components
  */
 async function loadIndex(registryBaseUrl) {
-  const indexPath = resolveRegistryPath(registryBaseUrl, 'index.json');
+  const indexPath = resolveRegistryPath(registryBaseUrl, PATHS.REGISTRY_INDEX);
   try {
     return await fetchJSON(indexPath);
   } catch (err) {
@@ -629,12 +727,18 @@ async function loadIndex(registryBaseUrl) {
  * @returns {boolean} True if Weloop styles are present
  */
 function hasWeloopStyles(content) {
-  // Check for Weloop-specific CSS variable prefixes
-  return content.includes('--WLDS-PRM-') ||  // Primary colors
-         content.includes('--WLDS-RED-') ||  // Red colors
-         content.includes('--WLDS-NTL-') ||   // Neutral colors
-         content.includes('--system-100') ||  // System colors
-         content.includes('--system-200');
+  return WELOOP_MARKERS.some(marker => content.includes(marker));
+}
+
+/**
+ * Checks if CSS content has a Tailwind import (either format)
+ * @param {string} content - CSS content to check
+ * @returns {boolean} True if Tailwind import exists
+ */
+function hasTailwindImport(content) {
+  return content.includes('@import "tailwindcss"') ||
+    content.includes("@import 'tailwindcss'") ||
+    content.includes('@tailwind base');
 }
 
 /**
@@ -645,16 +749,15 @@ function hasWeloopStyles(content) {
  * @returns {string} CSS content with duplicates removed
  */
 function removeDuplicateTwAnimateImports(cssContent) {
-  const twAnimatePattern = /@import\s+["']tw-animate-css["'];?\s*\n?/g;
-  const matches = cssContent.match(twAnimatePattern);
-  
+  const matches = cssContent.match(CSS_PATTERNS.TW_ANIMATE_IMPORT);
+
   if (matches && matches.length > 1) {
     // Remove all occurrences first
-    let cleaned = cssContent.replace(twAnimatePattern, '');
+    let cleaned = cssContent.replace(CSS_PATTERNS.TW_ANIMATE_IMPORT, '');
     // Add it back once, right after tailwindcss import if it exists
-    if (cleaned.includes('@import "tailwindcss"') || cleaned.includes("@import 'tailwindcss'")) {
+    if (hasTailwindImport(cleaned)) {
       cleaned = cleaned.replace(
-        /(@import\s+["']tailwindcss["'];?\s*\n?)/,
+        CSS_PATTERNS.TAILWIND_IMPORT,
         '$1@import "tw-animate-css";\n'
       );
     } else {
@@ -663,7 +766,7 @@ function removeDuplicateTwAnimateImports(cssContent) {
     }
     return cleaned;
   }
-  
+
   return cssContent;
 }
 
@@ -675,12 +778,11 @@ function removeDuplicateTwAnimateImports(cssContent) {
  * @returns {string} CSS content with duplicates removed
  */
 function removeDuplicateCustomVariant(cssContent) {
-  const variantPattern = /@custom-variant\s+dark\s+\(&:is\(\.dark \*\)\);\s*\n?/g;
-  const matches = cssContent.match(variantPattern);
+  const matches = cssContent.match(CSS_PATTERNS.CUSTOM_VARIANT);
 
   if (matches && matches.length > 1) {
     // Remove all occurrences and add back one at the top
-    const withoutVariants = cssContent.replace(variantPattern, '');
+    const withoutVariants = cssContent.replace(CSS_PATTERNS.CUSTOM_VARIANT, '');
     return `@custom-variant dark (&:is(.dark *));\n\n${withoutVariants.trimStart()}`;
   }
 
@@ -703,30 +805,28 @@ function removeDuplicateCustomVariant(cssContent) {
  */
 function normalizeCSSFormat(cssContent) {
   // Extract @custom-variant declaration
-  const variantPattern = /@custom-variant\s+dark\s+\(&:is\(\.dark \*\)\);\s*\n?/g;
-  const variantMatch = cssContent.match(variantPattern);
+  const variantMatch = cssContent.match(CSS_PATTERNS.CUSTOM_VARIANT);
   const hasVariant = variantMatch && variantMatch.length > 0;
-  
+
   // Extract all @import statements
-  const importPattern = /@import\s+["'][^"']+["'];?\s*\n?/g;
-  const imports = cssContent.match(importPattern) || [];
-  
+  const imports = cssContent.match(CSS_PATTERNS.IMPORT_STATEMENT) || [];
+
   // Separate imports by type for proper ordering
   const tailwindImport = imports.find(imp => imp.includes('tailwindcss'));
   const twAnimateImport = imports.find(imp => imp.includes('tw-animate-css'));
-  const otherImports = imports.filter(imp => 
+  const otherImports = imports.filter(imp =>
     !imp.includes('tailwindcss') && !imp.includes('tw-animate-css')
   );
-  
+
   // Remove all imports and variant from content to get the rest
   let content = cssContent
-    .replace(variantPattern, '')
-    .replace(importPattern, '')
+    .replace(CSS_PATTERNS.CUSTOM_VARIANT, '')
+    .replace(CSS_PATTERNS.IMPORT_STATEMENT, '')
     .trim();
-  
+
   // Build normalized format in the correct order
   let normalized = '';
-  
+
   // Step 1: Imports first (tailwindcss, then tw-animate-css, then others)
   if (tailwindImport) {
     normalized += tailwindImport.trim() + '\n';
@@ -737,23 +837,19 @@ function normalizeCSSFormat(cssContent) {
   if (otherImports.length > 0) {
     normalized += otherImports.join('') + '\n';
   }
-  
+
   // Step 2: @custom-variant second (if it exists)
   if (hasVariant) {
-    if (normalized) {
-      normalized += '\n@custom-variant dark (&:is(.dark *));\n';
-    } else {
-      normalized += '@custom-variant dark (&:is(.dark *));\n';
-    }
+    normalized += normalized ? '\n@custom-variant dark (&:is(.dark *));\n' : '@custom-variant dark (&:is(.dark *));\n';
   }
-  
+
   // Step 3: Rest of content (theme variables, etc.)
   if (normalized && content) {
     normalized += '\n' + content;
   } else if (content) {
     normalized = content;
   }
-  
+
   return normalized.trim() + (normalized ? '\n' : '');
 }
 
@@ -769,32 +865,32 @@ function normalizeCSSFormat(cssContent) {
  * @returns {string} Processed CSS content
  */
 function processTwAnimateImport(cssContent, hasTwAnimate, forceUpdate = false) {
-  const twAnimatePattern = /@import\s+["']tw-animate-css["'];?\s*\n?/g;
   let processed = cssContent;
-  
+
   if (!hasTwAnimate) {
     // Package not installed - remove import to prevent build errors
-    processed = cssContent.replace(twAnimatePattern, '');
+    processed = cssContent.replace(CSS_PATTERNS.TW_ANIMATE_IMPORT, '');
     if (cssContent.includes('tw-animate-css') && !processed.includes('tw-animate-css')) {
+      const installCmd = `npm install ${PACKAGE_NAMES.TW_ANIMATE_CSS}`;
       if (forceUpdate) {
-        warn('tw-animate-css package not found - removed from CSS to prevent build errors');
-        info('   Install with: npm install tw-animate-css');
-        info('   Then run: node scripts/weloop-cli.js css --overwrite to include it');
+        warn(`${PACKAGE_NAMES.TW_ANIMATE_CSS} package not found - removed from CSS to prevent build errors`);
+        info(`   Install with: ${installCmd}`);
+        info('   Then run: node scripts/cli-remote.js css --overwrite to include it');
       } else {
-        warn('tw-animate-css package not found - removed from CSS');
-        info('   Install with: npm install tw-animate-css');
+        warn(`${PACKAGE_NAMES.TW_ANIMATE_CSS} package not found - removed from CSS`);
+        info(`   Install with: ${installCmd}`);
         info('   Or add the import manually after installing the package');
       }
     }
   } else {
     // Package is installed - ensure import exists and remove duplicates
     processed = removeDuplicateTwAnimateImports(processed);
-    
+
     // Add import if it doesn't exist (right after tailwindcss if present)
-    if (!processed.match(/@import\s+["']tw-animate-css["'];?\s*\n?/)) {
-      if (processed.includes('@import "tailwindcss"') || processed.includes("@import 'tailwindcss'")) {
+    if (!processed.match(CSS_PATTERNS.TW_ANIMATE_IMPORT)) {
+      if (hasTailwindImport(processed)) {
         processed = processed.replace(
-          /(@import\s+["']tailwindcss["'];?\s*\n?)/,
+          CSS_PATTERNS.TAILWIND_IMPORT,
           '$1@import "tw-animate-css";\n'
         );
       } else {
@@ -802,7 +898,7 @@ function processTwAnimateImport(cssContent, hasTwAnimate, forceUpdate = false) {
       }
     }
   }
-  
+
   return processed;
 }
 
@@ -814,7 +910,7 @@ function processTwAnimateImport(cssContent, hasTwAnimate, forceUpdate = false) {
  * @returns {string} CSS content without tailwindcss imports
  */
 function removeTailwindImport(cssContent) {
-  return cssContent.replace(/@import\s+["']tailwindcss["'];?\s*\n?/g, '');
+  return cssContent.replace(CSS_PATTERNS.TAILWIND_IMPORT, '');
 }
 
 /**
@@ -829,23 +925,23 @@ function ensureTwAnimateImport(cssContent, hasTwAnimate) {
   if (!hasTwAnimate) {
     return cssContent;
   }
-  
+
   // Remove duplicates first
   let cleaned = removeDuplicateTwAnimateImports(cssContent);
-  
+
   // Check if import already exists
-  if (cleaned.match(/@import\s+["']tw-animate-css["'];?\s*\n?/)) {
+  if (cleaned.match(CSS_PATTERNS.TW_ANIMATE_IMPORT)) {
     return cleaned;
   }
-  
+
   // Add import after tailwindcss if it exists, otherwise at the beginning
-  if (cleaned.includes('@import "tailwindcss"') || cleaned.includes("@import 'tailwindcss'")) {
+  if (hasTailwindImport(cleaned)) {
     return cleaned.replace(
-      /(@import\s+["']tailwindcss["'];?\s*\n?)/,
+      CSS_PATTERNS.TAILWIND_IMPORT,
       '$1@import "tw-animate-css";\n'
     );
   }
-  
+
   return '@import "tw-animate-css";\n' + cleaned;
 }
 
@@ -863,35 +959,32 @@ function ensureTwAnimateImport(cssContent, hasTwAnimate) {
  * @returns {string} Merged CSS content
  */
 function mergeCSSWithTailwind(existing, weloopStyles, hasTwAnimate) {
-  const tailwindMatch = existing.match(/(@import\s+["']tailwindcss["'];?\s*\n?)/);
+  const tailwindMatch = existing.match(CSS_PATTERNS.TAILWIND_IMPORT);
   if (!tailwindMatch) {
     // No tailwindcss import found - just prepend Weloop styles
     return weloopStyles + '\n\n' + existing;
   }
-  
+
   // Split existing CSS around the tailwindcss import
-  const beforeTailwind = existing.substring(0, existing.indexOf(tailwindMatch[0]));
-  const afterTailwind = existing.substring(existing.indexOf(tailwindMatch[0]) + tailwindMatch[0].length);
-  
+  const tailwindIndex = existing.indexOf(tailwindMatch[0]);
+  const beforeTailwind = existing.substring(0, tailwindIndex);
+  const afterTailwind = existing.substring(tailwindIndex + tailwindMatch[0].length);
+
   // Check if tw-animate-css import already exists
-  const hasTwAnimateInExisting = existing.match(/@import\s+["']tw-animate-css["'];?\s*\n?/);
-  const hasTwAnimateInWeloop = weloopStyles.match(/@import\s+["']tw-animate-css["'];?\s*\n?/);
-  
+  const hasTwAnimateInExisting = existing.match(CSS_PATTERNS.TW_ANIMATE_IMPORT);
+  const hasTwAnimateInWeloop = weloopStyles.match(CSS_PATTERNS.TW_ANIMATE_IMPORT);
+
   // If existing file already has tw-animate import, remove it from Weloop styles
   // to avoid duplicating it in the merge output
   let weloopStylesCleaned = weloopStyles;
   if (hasTwAnimateInExisting && hasTwAnimateInWeloop) {
-    weloopStylesCleaned = weloopStyles.replace(
-      /@import\s+["']tw-animate-css["'];?\s*\n?/g,
-      ''
-    );
+    weloopStylesCleaned = weloopStyles.replace(CSS_PATTERNS.TW_ANIMATE_IMPORT, '');
   }
-  
+
   // Add tw-animate import if needed (package installed but import missing)
-  let importsToAdd = '';
-  if (hasTwAnimate && !hasTwAnimateInExisting && !hasTwAnimateInWeloop) {
-    importsToAdd = '@import "tw-animate-css";\n';
-  }
+  const importsToAdd = (hasTwAnimate && !hasTwAnimateInExisting && !hasTwAnimateInWeloop)
+    ? '@import "tw-animate-css";\n'
+    : '';
 
   // Merge: before tailwind + tailwind import + tw-animate (if needed) + Weloop styles + after tailwind
   return beforeTailwind + tailwindMatch[0] + importsToAdd + weloopStylesCleaned + '\n' + afterTailwind;
@@ -910,28 +1003,26 @@ function mergeCSSWithTailwind(existing, weloopStyles, hasTwAnimate) {
  * @returns {string} CSS content with Weloop styles replaced
  */
 function replaceWeloopStyles(existing, newStyles, hasTwAnimate) {
-  const importPattern = /(@import\s+["'][^"']+["'];?\s*\n?)/g;
-  const imports = existing.match(importPattern) || [];
+  const imports = existing.match(CSS_PATTERNS.IMPORT_STATEMENT) || [];
   const importsText = imports.join('');
-  
+
   // Find where Weloop styles start (look for @theme inline or :root)
-  const weloopStartPattern = /(@theme\s+inline|:root\s*\{)/;
-  const weloopStartMatch = existing.search(weloopStartPattern);
-  
+  const weloopStartMatch = existing.search(CSS_PATTERNS.WELOOP_START);
+
   if (weloopStartMatch === -1) {
     // No existing Weloop styles found - just append
     return existing + '\n\n' + newStyles;
   }
-  
+
   // Extract content before Weloop styles
   let contentBeforeWeloop = existing.substring(0, weloopStartMatch);
   // Keep non-Weloop imports (filter out tw-animate if package not installed)
-  const nonWeloopImports = importsText.split('\n').filter(imp => 
+  const nonWeloopImports = importsText.split('\n').filter(imp =>
     !imp.includes('tw-animate-css') || hasTwAnimate
   ).join('\n');
   // Remove all imports from contentBeforeWeloop (we'll add them back)
-  contentBeforeWeloop = nonWeloopImports + '\n' + contentBeforeWeloop.replace(importPattern, '');
-  
+  contentBeforeWeloop = nonWeloopImports + '\n' + contentBeforeWeloop.replace(CSS_PATTERNS.IMPORT_STATEMENT, '');
+
   // Return: preserved imports + content before Weloop + new Weloop styles
   return contentBeforeWeloop.trim() + '\n\n' + newStyles.trim();
 }
@@ -947,11 +1038,11 @@ function replaceWeloopStyles(existing, newStyles, hasTwAnimate) {
  */
 async function fetchCSSFromRegistry(registryUrl) {
   let sourceCssPath;
-  
+
   if (isLocalPath(registryUrl)) {
     // Local path: find app/globals.css relative to registry directory
-    const basePath = path.isAbsolute(registryUrl) 
-      ? path.dirname(registryUrl) 
+    const basePath = path.isAbsolute(registryUrl)
+      ? path.dirname(registryUrl)
       : path.join(process.cwd(), path.dirname(registryUrl));
     sourceCssPath = path.join(basePath, 'app', 'globals.css');
   } else {
@@ -959,7 +1050,7 @@ async function fetchCSSFromRegistry(registryUrl) {
     const baseUrl = registryUrl.replace('/registry', '');
     sourceCssPath = `${baseUrl}/app/globals.css`;
   }
-  
+
   return await fetchText(sourceCssPath);
 }
 
@@ -977,52 +1068,49 @@ async function fetchCSSFromRegistry(registryUrl) {
  * @param {boolean} silent - Whether to suppress output messages
  */
 async function installCSSStyles(config, registryUrl, forceUpdate = false, silent = false) {
-  const cssPath = config.tailwind?.css || 'app/globals.css';
+  const cssPath = config.tailwind?.css || DEFAULTS.CSS_PATH;
   const fullCssPath = path.join(process.cwd(), cssPath);
-  
+
   // Check if Weloop styles already exist in the file
   let hasWeloopStylesInFile = false;
   if (fs.existsSync(fullCssPath)) {
     const existingContent = fs.readFileSync(fullCssPath, 'utf-8');
     hasWeloopStylesInFile = hasWeloopStyles(existingContent);
-    
+
     // If styles already exist and we're not forcing update, skip silently
     // This prevents unnecessary updates when installing components
     if (hasWeloopStylesInFile && !forceUpdate && silent) {
       return;
     }
   }
-  
+
   try {
     if (!silent) {
       info('Installing CSS styles...');
     }
-    
+
     const cssContent = await fetchCSSFromRegistry(registryUrl);
     ensureDirectoryExists(path.dirname(fullCssPath));
-    
-    const hasTwAnimate = checkPackageInstalled('tw-animate-css');
+
+    const hasTwAnimate = checkPackageInstalled(PACKAGE_NAMES.TW_ANIMATE_CSS);
     let processedCssContent = processTwAnimateImport(cssContent, hasTwAnimate, forceUpdate);
-    
+
     // Handle file installation based on mode and existing file state
     if (forceUpdate && fs.existsSync(fullCssPath)) {
       // Mode 1: --overwrite flag - Replace entire file with fresh styles
-      let normalized = normalizeCSSFormat(processedCssContent);
-      normalized = removeDuplicateTwAnimateImports(normalized);
-      normalized = removeDuplicateCustomVariant(normalized);
+      const normalized = normalizeAndCleanCSS(processedCssContent, hasTwAnimate);
       fs.writeFileSync(fullCssPath, normalized);
       if (!silent) {
         success(`Overwritten ${cssPath} with Weloop styles`);
         if (hasTwAnimate) {
-          info(`   tw-animate-css import included`);
+          info(`   ${PACKAGE_NAMES.TW_ANIMATE_CSS} import included`);
         }
       }
     } else if (fs.existsSync(fullCssPath)) {
       // Mode 2: Normal update - Intelligently merge with existing styles
       const existing = fs.readFileSync(fullCssPath, 'utf-8');
-      const hasTailwindImport = existing.includes('@import "tailwindcss"') || 
-                                existing.includes('@tailwind base');
-      
+      const existingHasTailwind = hasTailwindImport(existing);
+
       if (hasWeloopStylesInFile) {
         // Case 2a: Weloop styles already exist - replace them with updated versions
         let weloopStyles = removeTailwindImport(processedCssContent);
@@ -1031,7 +1119,7 @@ async function installCSSStyles(config, registryUrl, forceUpdate = false, silent
         finalContent = removeDuplicateTwAnimateImports(finalContent);
         finalContent = removeDuplicateCustomVariant(finalContent);
         finalContent = normalizeCSSFormat(finalContent);
-        
+
         // Only write if content actually changed (prevents unnecessary file updates)
         if (finalContent !== existing) {
           fs.writeFileSync(fullCssPath, finalContent);
@@ -1040,31 +1128,29 @@ async function installCSSStyles(config, registryUrl, forceUpdate = false, silent
           }
         }
         // If no changes, silently skip (file is already up to date)
-      } else if (hasTailwindImport) {
+      } else if (existingHasTailwind) {
         // Case 2b: No Weloop styles but Tailwind exists - merge after Tailwind imports
         let weloopStyles = removeTailwindImport(processedCssContent);
         weloopStyles = ensureTwAnimateImport(weloopStyles, hasTwAnimate);
         let merged = mergeCSSWithTailwind(existing, weloopStyles, hasTwAnimate);
-        merged = removeDuplicateTwAnimateImports(merged);
-        merged = removeDuplicateCustomVariant(merged);
-        merged = normalizeCSSFormat(merged);
+        merged = normalizeAndCleanCSS(merged, hasTwAnimate);
         fs.writeFileSync(fullCssPath, merged);
         if (!silent) {
           success(`Updated ${cssPath} with Weloop styles`);
           if (hasTwAnimate) {
-            info(`   tw-animate-css import included`);
+            info(`   ${PACKAGE_NAMES.TW_ANIMATE_CSS} import included`);
           }
           info(`   Your existing styles are preserved`);
         }
       } else {
         // Case 2c: No Tailwind imports - prepend Weloop styles to existing content
         let finalCssContent = removeDuplicateTwAnimateImports(processedCssContent);
-        
+
         // Ensure tw-animate import exists if package is installed
-        if (hasTwAnimate && !finalCssContent.match(/@import\s+["']tw-animate-css["'];?\s*\n?/)) {
-          if (finalCssContent.includes('@import "tailwindcss"')) {
+        if (hasTwAnimate && !finalCssContent.match(CSS_PATTERNS.TW_ANIMATE_IMPORT)) {
+          if (hasTailwindImport(finalCssContent)) {
             finalCssContent = finalCssContent.replace(
-              /(@import\s+["']tailwindcss["'];?\s*\n?)/,
+              CSS_PATTERNS.TAILWIND_IMPORT,
               '$1@import "tw-animate-css";\n'
             );
           } else {
@@ -1072,35 +1158,34 @@ async function installCSSStyles(config, registryUrl, forceUpdate = false, silent
           }
         }
         let combined = finalCssContent + '\n\n' + existing;
-        combined = normalizeCSSFormat(combined);
+        combined = normalizeAndCleanCSS(combined, hasTwAnimate);
         fs.writeFileSync(fullCssPath, combined);
         if (!silent) {
           success(`Updated ${cssPath} with Weloop styles`);
           if (hasTwAnimate) {
-            info(`   tw-animate-css import included`);
+            info(`   ${PACKAGE_NAMES.TW_ANIMATE_CSS} import included`);
           }
         }
       }
     } else {
       // Mode 3: File doesn't exist - create new file with Weloop styles
-      let normalized = normalizeCSSFormat(processedCssContent);
-      normalized = removeDuplicateTwAnimateImports(normalized);
-      normalized = removeDuplicateCustomVariant(normalized);
+      const normalized = normalizeAndCleanCSS(processedCssContent, hasTwAnimate);
       fs.writeFileSync(fullCssPath, normalized);
       if (!silent) {
         success(`Created ${cssPath} with Weloop styles`);
         if (hasTwAnimate) {
-          info(`   tw-animate-css import included`);
+          info(`   ${PACKAGE_NAMES.TW_ANIMATE_CSS} import included`);
         }
       }
     }
   } catch (err) {
     if (!silent) {
       warn(`Could not automatically install CSS styles: ${err.message}`);
-      info(`\n   To add styles manually:`);
-      info(`   1. Download: ${registryUrl.replace('/registry', '/app/globals.css')}`);
-      info(`   2. Add the CSS variables to your ${cssPath} file`);
-      info(`   3. Or copy from: https://gitlab.com/Sophanithchrek/weloop-shadcn-next-app/-/raw/main/app/globals.css\n`);
+      info(getCSSInstallErrorMessage(registryUrl, cssPath));
+    }
+    // Re-throw in silent mode so caller can handle it
+    if (silent) {
+      throw err;
     }
   }
 }
@@ -1119,11 +1204,11 @@ async function installCSSStyles(config, registryUrl, forceUpdate = false, silent
  */
 function createUtilsFile(utilsPath) {
   if (fs.existsSync(utilsPath)) return;
-  
+
   // Silently create utils file (matching shadcn/ui behavior)
   // Don't overwrite if user has customized it
   ensureDirectoryExists(path.dirname(utilsPath));
-  
+
   const utilsContent = `import { clsx, type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"
 
@@ -1153,47 +1238,41 @@ export function cn(...inputs: ClassValue[]) {
  */
 async function installComponent(componentName, options = {}) {
   const { overwrite = false, registryUrl = DEFAULT_REGISTRY_URL } = options;
-  
+
   // Step 1: Install base dependencies (required for utils.ts to work)
-  const baseDeps = [];
-  if (!checkPackageInstalled('clsx')) {
-    baseDeps.push('clsx');
-  }
-  if (!checkPackageInstalled('tailwind-merge')) {
-    baseDeps.push('tailwind-merge');
-  }
+  const baseDeps = BASE_DEPENDENCIES.filter(dep => !checkPackageInstalled(dep));
   if (baseDeps.length > 0) {
     info(`Installing base dependencies: ${baseDeps.join(', ')}...`);
     await installPackages(baseDeps);
   }
-  
+
   // Step 2: Load or create components.json configuration
   const config = loadComponentsConfig();
-  
+
   // Step 3: Install tw-animate-css automatically (required for component animations)
-  if (!checkPackageInstalled('tw-animate-css')) {
-    info('Installing tw-animate-css for animations...');
-    await installPackages(['tw-animate-css']);
+  if (!checkPackageInstalled(PACKAGE_NAMES.TW_ANIMATE_CSS)) {
+    info(`Installing ${PACKAGE_NAMES.TW_ANIMATE_CSS} for animations...`);
+    await installPackages([PACKAGE_NAMES.TW_ANIMATE_CSS]);
   }
-  
+
   // Step 4: Install CSS styles early (before component installation)
   // Silent mode prevents output when styles are already installed
   await installCSSStyles(config, registryUrl, false, true);
-  
+
   // Step 5: Resolve paths from components.json configuration
   const uiAlias = config.aliases?.ui || '@/components/ui';
   const utilsAlias = config.aliases?.utils || '@/lib/utils';
-  
+
   const componentsDir = path.join(process.cwd(), uiAlias.replace('@/', '').replace(/^\/+/, ''));
   let utilsPath = utilsAlias.replace('@/', '').replace(/^\/+/, '');
   if (!utilsPath.endsWith('.ts') && !utilsPath.endsWith('.tsx')) {
     utilsPath = utilsPath + '.ts';
   }
   utilsPath = path.join(process.cwd(), utilsPath);
-  
+
   // Step 6: Load component registry from remote or local source
   const registry = await loadRegistry(componentName, registryUrl);
-  
+
   if (!registry) {
     error(`Component "${componentName}" not found in registry.`);
     info('Available components:');
@@ -1263,20 +1342,20 @@ async function installComponent(componentName, options = {}) {
 function detectProjectType() {
   // Check for Next.js
   if (fs.existsSync(path.join(process.cwd(), 'next.config.js')) ||
-      fs.existsSync(path.join(process.cwd(), 'next.config.mjs')) ||
-      fs.existsSync(path.join(process.cwd(), 'next.config.ts')) ||
-      fs.existsSync(path.join(process.cwd(), 'app')) ||
-      fs.existsSync(path.join(process.cwd(), 'pages'))) {
+    fs.existsSync(path.join(process.cwd(), 'next.config.mjs')) ||
+    fs.existsSync(path.join(process.cwd(), 'next.config.ts')) ||
+    fs.existsSync(path.join(process.cwd(), 'app')) ||
+    fs.existsSync(path.join(process.cwd(), 'pages'))) {
     return 'nextjs';
   }
-  
+
   // Check for Vite
   if (fs.existsSync(path.join(process.cwd(), 'vite.config.js')) ||
-      fs.existsSync(path.join(process.cwd(), 'vite.config.ts')) ||
-      fs.existsSync(path.join(process.cwd(), 'vite.config.mjs'))) {
+    fs.existsSync(path.join(process.cwd(), 'vite.config.ts')) ||
+    fs.existsSync(path.join(process.cwd(), 'vite.config.mjs'))) {
     return 'vite';
   }
-  
+
   return null;
 }
 
@@ -1293,11 +1372,11 @@ function prompt(question, defaultValue = '') {
       input: process.stdin,
       output: process.stdout
     });
-    
-    const promptText = defaultValue 
+
+    const promptText = defaultValue
       ? `${question} › ${defaultValue} `
       : `${question} › `;
-    
+
     rl.question(promptText, (answer) => {
       rl.close();
       resolve(answer.trim() || defaultValue);
@@ -1306,73 +1385,439 @@ function prompt(question, defaultValue = '') {
 }
 
 /**
- * Initializes the project with components.json configuration
- * Similar to shadcn/ui init command
+ * Initializes the project with interactive prompts
+ * Similar to shadcn/ui init command but with custom theme selection
  */
 async function initProject() {
   info('Initializing project...\n');
-  
+
   // Check if components.json already exists
-  const configPath = path.join(process.cwd(), 'components.json');
+  const configPath = path.join(process.cwd(), PATHS.COMPONENTS_JSON);
   if (fs.existsSync(configPath)) {
-    warn('components.json already exists.');
+    warn(`${PATHS.COMPONENTS_JSON} already exists.`);
     const overwrite = await prompt('Do you want to overwrite it? (y/N)', 'N');
     if (overwrite.toLowerCase() !== 'y' && overwrite.toLowerCase() !== 'yes') {
       info('Skipping initialization.');
       return;
     }
   }
-  
-  // Detect project type
-  const projectType = detectProjectType();
-  let detectedType = projectType || 'nextjs';
-  
-  if (!projectType) {
-    info('Could not detect project type. Defaulting to Next.js.');
-  } else {
-    info(`Detected ${projectType === 'nextjs' ? 'Next.js' : 'Vite'} project.`);
+
+  // Step 1: Ask for project type
+  console.log('Project ? Next.js | Vite');
+  const projectTypeAnswer = await prompt('Project ?', 'Next.js');
+  const isNextjs = projectTypeAnswer.toLowerCase().includes('next');
+  const isVite = projectTypeAnswer.toLowerCase().includes('vite');
+
+  // Step 2: Ask for project name
+  console.log('\nProject Name ? name-app | (default: my-app)');
+  const projectName = await prompt('Project Name ?', 'my-app');
+
+  // Step 3: Ask for theme color with options
+  console.log('\nTheme Color ? (Blue: Default, Tech-Blue and Brew) for user to choose');
+  console.log('Available themes:');
+  console.log('  1. Blue (Default)');
+  console.log('  2. Tech-Blue');
+  console.log('  3. Brew');
+  const themeAnswer = await prompt('Theme Color ?', '1');
+  
+  let selectedTheme;
+  switch (themeAnswer) {
+    case '2':
+    case 'tech-blue':
+    case 'Tech-Blue':
+      selectedTheme = 'tech-blue';
+      break;
+    case '3':
+    case 'brew':
+    case 'Brew':
+      selectedTheme = 'brew';
+      break;
+    case '1':
+    case 'blue':
+    case 'Blue':
+    default:
+      selectedTheme = 'blue';
+      break;
   }
+
+  // Step 4: Ask for border radius
+  console.log('\nBorder Radius ? Choose the border radius for components');
+  console.log('Available options:');
+  console.log('  1. 0px (Sharp)');
+  console.log('  2. 4px (Small)');
+  console.log('  3. 8px (Default)');
+  console.log('  4. 10px (Medium)');
+  console.log('  5. 16px (Large)');
+  const radiusAnswer = await prompt('Border Radius ?', '3');
+  
+  let selectedRadius;
+  switch (radiusAnswer) {
+    case '1':
+    case '0':
+    case '0px':
+      selectedRadius = '0px';
+      break;
+    case '2':
+    case '4':
+    case '4px':
+      selectedRadius = '4px';
+      break;
+    case '4':
+    case '10':
+    case '10px':
+      selectedRadius = '10px';
+      break;
+    case '5':
+    case '16':
+    case '16px':
+      selectedRadius = '16px';
+      break;
+    case '3':
+    case '8':
+    case '8px':
+    default:
+      selectedRadius = '8px';
+      break;
+  }
+
+  // Show configuration summary
+  info('\n📋 Configuration Summary:');
+  info(`   Project Type: ${isNextjs ? 'Next.js' : 'Vite'}`);
+  info(`   Project Name: ${projectName}`);
+  info(`   Theme Color: ${selectedTheme}`);
+  info(`   Border Radius: ${selectedRadius}`);
+
+  const confirm = await prompt('\nProceed with this configuration? (Y/n)', 'Y');
+  if (confirm.toLowerCase() === 'n' || confirm.toLowerCase() === 'no') {
+    info('Initialization cancelled.');
+    return;
+  }
+
+  // Step 3: Setup project structure based on shadcn/ui + Next.js
+  info('\n🏗️  Setting up project structure...');
+  
+  // Create basic Next.js project structure
+  const directories = [
+    'app',
+    'components',
+    'components/ui',
+    'lib',
+    'hooks',
+    'types',
+    'public',
+    'public/icons'
+  ];
+
+  directories.forEach(dir => {
+    const dirPath = path.join(process.cwd(), dir);
+    if (!fs.existsSync(dirPath)) {
+      fs.mkdirSync(dirPath, { recursive: true });
+      info(`   → Created ${dir}/ directory`);
+    }
+  });
+
+  // Create Next.js app structure files
+  const appFiles = {
+    'app/layout.tsx': `import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "${projectName}",
+  description: "Built with Weloop Design System",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}`,
+    'app/page.tsx': `export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
+        <h1 className="text-4xl font-bold">
+          Welcome to ${projectName}
+        </h1>
+      </div>
+    </main>
+  );
+}`,
+    'app/globals.css': `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96%;
+    --secondary-foreground: 222.2 84% 4.9%;
+    --muted: 210 40% 96%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96%;
+    --accent-foreground: 222.2 84% 4.9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: ${selectedRadius.replace('px', '')};
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}`,
+    'next.config.mjs': `/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    appDir: true,
+  },
+};
+
+export default nextConfig;`,
+    'tailwind.config.ts': `import type { Config } from "tailwindcss";
+
+const config: Config = {
+  darkMode: ["class"],
+  content: [
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+  ],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+} satisfies Config;
+
+export default config;`,
+    'tsconfig.json': `{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "es6"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}`,
+    '.eslintrc.json': `{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}`
+  };
+
+  // Create files
+  Object.entries(appFiles).forEach(([filePath, content]) => {
+    const fullPath = path.join(process.cwd(), filePath);
+    if (!fs.existsSync(fullPath)) {
+      fs.writeFileSync(fullPath, content);
+      info(`   → Created ${filePath}`);
+    }
+  });
+
+  // Create or update package.json for Next.js project
+  const packageJsonPath = path.join(process.cwd(), 'package.json');
+  let packageJson = { dependencies: {}, devDependencies: {} };
   
-  // Ask for project type if not detected or user wants to override
-  const useDetected = projectType 
-    ? await prompt(`Which project type? (Next.js/Vite)`, detectedType === 'nextjs' ? 'Next.js' : 'Vite')
-    : await prompt(`Which project type? (Next.js/Vite)`, 'Next.js');
-  
-  const isNextjs = useDetected.toLowerCase().includes('next');
-  const isVite = useDetected.toLowerCase().includes('vite');
-  
-  // Detect CSS path
-  let cssPath = 'app/globals.css';
+  if (fs.existsSync(packageJsonPath)) {
+    packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+  }
+
+  // Update package.json with Next.js dependencies
+  const nextDependencies = {
+    "next": "^14.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "typescript": "^5.0.0",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "tailwindcss": "^3.3.0",
+    "autoprefixer": "^10.0.0",
+    "postcss": "^8.0.0",
+    "tailwindcss-animate": "^1.0.7",
+    "eslint": "^8.0.0",
+    "eslint-config-next": "^14.0.0"
+  };
+
+  packageJson.name = projectName;
+  packageJson.version = "0.1.0";
+  packageJson.private = true;
+  packageJson.scripts = {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  };
+
+  // Merge dependencies
+  Object.assign(packageJson.dependencies || {}, nextDependencies);
+  Object.assign(packageJson.devDependencies || {}, {});
+
+  fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
+  info(`   → Updated package.json`);
+
+  // Detect CSS path based on project type
+  let cssPath = PATHS.APP_GLOBALS_CSS;
   if (isVite) {
-    cssPath = 'src/index.css';
+    cssPath = PATHS.VITE_INDEX_CSS;
   } else if (fs.existsSync(path.join(process.cwd(), 'app', 'globals.css'))) {
-    cssPath = 'app/globals.css';
+    cssPath = PATHS.APP_GLOBALS_CSS;
   } else if (fs.existsSync(path.join(process.cwd(), 'styles', 'globals.css'))) {
-    cssPath = 'styles/globals.css';
+    cssPath = PATHS.STYLES_GLOBALS_CSS;
   } else {
     cssPath = await prompt('Where is your global CSS file?', cssPath);
   }
-  
-  // Ask for base color
-  const baseColor = await prompt('Which color would you like to use as base color?', 'neutral');
-  
-  // Ask for style
-  const style = await prompt('Which style would you like to use?', 'blue');
-  
-  // Create components.json
+
+  // Create components.json with selected theme
   const config = {
-    $schema: 'https://weloop.kosign.dev/schema.json',
-    style: style,
+    $schema: DEFAULTS.SCHEMA_URL,
+    style: selectedTheme,
     rsc: isNextjs,
     tsx: true,
     tailwind: {
       config: 'tailwind.config.ts',
       css: cssPath,
-      baseColor: baseColor,
+      baseColor: 'neutral',
       cssVariables: true,
       prefix: ''
     },
-    iconLibrary: 'lucide',
+    iconLibrary: DEFAULTS.ICON_LIBRARY,
     aliases: {
       components: '@/components',
       utils: '@/lib/utils',
@@ -1380,35 +1825,53 @@ async function initProject() {
       lib: '@/lib',
       hooks: '@/hooks'
     },
-    registry: 'https://gitlab.com/Sophanithchrek/weloop-shadcn-next-app/-/raw/main/registry/index.json'
+    registry: REGISTRY_URLS.INDEX,
+    projectName: projectName,
+    radius: selectedRadius
   };
-  
+
+  // Show setup progress
+  info('\n🚀 Setting up your project...');
+
+  // Step 1: Create components.json
+  info('   → [:root]/components.json');
   fs.writeFileSync(configPath, JSON.stringify(config, null, 2));
-  success('Created components.json\n');
-  
-  // Install base dependencies
-  info('Installing base dependencies...');
-  const baseDeps = ['clsx', 'tailwind-merge'];
-  const missingBaseDeps = baseDeps.filter(dep => !checkPackageInstalled(dep));
+
+  // Step 2: Install dependencies
+  info('   → Installing dependencies');
+  const missingBaseDeps = BASE_DEPENDENCIES.filter(dep => !checkPackageInstalled(dep));
   
   if (missingBaseDeps.length > 0) {
     await installPackages(missingBaseDeps);
-  } else {
-    info('Base dependencies already installed.');
   }
-  
-  // Install tw-animate-css
-  if (!checkPackageInstalled('tw-animate-css')) {
-    info('Installing tw-animate-css for animations...');
-    await installPackages(['tw-animate-css']);
+
+  // Install Next.js dependencies if not present
+  const nextDeps = [
+    "next", "react", "react-dom", "typescript", 
+    "@types/node", "@types/react", "@types/react-dom",
+    "tailwindcss", "autoprefixer", "postcss",
+    "tailwindcss-animate", "eslint", "eslint-config-next"
+  ];
+  
+  const missingNextDeps = nextDeps.filter(dep => !checkPackageInstalled(dep));
+  if (missingNextDeps.length > 0) {
+    await installPackages(missingNextDeps);
   }
-  
-  // Install CSS styles
-  info('\nInstalling CSS styles...');
-  await installCSSStyles(config, DEFAULT_REGISTRY_URL, false, false);
-  
-  success('\n✅ Project initialized successfully!');
-  info('\nYou can now add components using:');
+
+  // Install tw-animate-css for animations
+  if (!checkPackageInstalled(PACKAGE_NAMES.TW_ANIMATE_CSS)) {
+    await installPackages([PACKAGE_NAMES.TW_ANIMATE_CSS]);
+  }
+
+  // Step 3: Create utils.ts file
+  info('   → Create 1 files:');
+  const utilsPath = path.join(process.cwd(), 'lib', 'utils.ts');
+  createUtilsFile(utilsPath);
+  info('      → libs/utils.ts');
+
+  success('\n✅ Success! Successfully initialization.');
+  info('\nYou could add the components now.');
+  info('\nAvailable commands:');
   info('  npx weloop-kosign@latest add <component-name>');
   info('  pnpm dlx weloop-kosign@latest add <component-name>');
   info('  yarn weloop-kosign@latest add <component-name>\n');
@@ -1427,7 +1890,7 @@ async function initProject() {
 async function listComponents(registryUrl = DEFAULT_REGISTRY_URL) {
   try {
     const index = await loadIndex(registryUrl);
-    
+
     console.log('\nAvailable components:\n');
     index.registry.forEach(comp => {
       // Show dependencies if component has any
@@ -1463,13 +1926,13 @@ async function main() {
   const args = process.argv.slice(2);
   const command = args[0];
   const componentName = args[1];
-  
+
   // Parse --registry option if provided
   const registryIndex = args.indexOf('--registry');
   const registryUrl = registryIndex !== -1 && args[registryIndex + 1]
     ? args[registryIndex + 1]
     : DEFAULT_REGISTRY_URL;
-  
+
   // Build options object
   const options = {
     overwrite: args.includes('--overwrite') || args.includes('-f'),
@@ -1505,7 +1968,7 @@ Examples:
     case 'init':
       await initProject();
       break;
-    
+
     case 'add':
       if (!componentName) {
         error('Please provide a component name');
@@ -1514,18 +1977,18 @@ Examples:
       }
       await installComponent(componentName, options);
       break;
-    
+
     case 'list':
       await listComponents(registryUrl);
       break;
-    
+
     case 'css':
     case 'styles':
       // Both 'css' and 'styles' commands do the same thing
       const config = loadComponentsConfig();
       await installCSSStyles(config, registryUrl, options.overwrite, false);
       break;
-    
+
     default:
       error(`Unknown command: ${command}`);
       console.log('Available commands: init, add, list, css');