weloop-kosign 1.1.1 → 1.1.3

package/scripts/cli-remote.js

@@ -8,16 +8,19 @@
  * - If running in external projects: uses remote GitLab/GitHub URL
  * 
  * Usage (via npx - recommended):
+ *   npx weloop-kosign@latest init
  *   npx weloop-kosign@latest add <component-name>
  *   npx weloop-kosign@latest list
  *   npx weloop-kosign@latest css [--overwrite]
  * 
  * Usage (local development):
+ *   node scripts/cli-remote.js init [--registry <url|path>]
  *   node scripts/cli-remote.js add <component-name> [--registry <url|path>]
  *   node scripts/cli-remote.js list [--registry <url|path>]
  *   node scripts/cli-remote.js css [--registry <url|path>] [--overwrite]
  * 
  * Examples:
+ *   npx weloop-kosign@latest init
  *   npx weloop-kosign@latest add button
  *   npx weloop-kosign@latest add button --registry ./registry
  *   npx weloop-kosign@latest css
@@ -45,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
@@ -127,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
@@ -155,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';
 }
@@ -188,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
@@ -209,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('/');
@@ -240,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 {
@@ -288,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`);
@@ -316,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',
@@ -342,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;
 }
 
@@ -359,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;
+  }
 }
 
 /**
@@ -383,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) {
@@ -405,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; });
@@ -453,7 +552,7 @@ async function fetchJSON(urlOrPath, retries = 3) {
           }
         });
       });
-      
+
       // Handle network errors with automatic retry
       request.on('error', (err) => {
         clearTimeout(timeout);
@@ -466,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();
@@ -480,7 +579,7 @@ async function fetchJSON(urlOrPath, retries = 3) {
         }
       }, REQUEST_TIMEOUT);
     };
-    
+
     makeRequest();
   });
 }
@@ -500,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', () => {
@@ -539,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') {
@@ -550,7 +649,7 @@ async function fetchText(urlOrPath) {
         reject(err);
       }
     });
-    
+
     // Set request timeout
     req.setTimeout(REQUEST_TIMEOUT, () => {
       req.destroy();
@@ -570,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}`;
 }
 
 /**
@@ -593,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;
   }
 }
@@ -605,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) {
@@ -626,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');
 }
 
 /**
@@ -642,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 {
@@ -660,7 +766,7 @@ function removeDuplicateTwAnimateImports(cssContent) {
     }
     return cleaned;
   }
-  
+
   return cssContent;
 }
 
@@ -672,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()}`;
   }
 
@@ -700,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';
@@ -734,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' : '');
 }
 
@@ -766,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 {
@@ -799,7 +898,7 @@ function processTwAnimateImport(cssContent, hasTwAnimate, forceUpdate = false) {
       }
     }
   }
-  
+
   return processed;
 }
 
@@ -811,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, '');
 }
 
 /**
@@ -826,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;
 }
 
@@ -860,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;
@@ -907,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();
 }
@@ -944,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 {
@@ -956,7 +1050,7 @@ async function fetchCSSFromRegistry(registryUrl) {
     const baseUrl = registryUrl.replace('/registry', '');
     sourceCssPath = `${baseUrl}/app/globals.css`;
   }
-  
+
   return await fetchText(sourceCssPath);
 }
 
@@ -974,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);
@@ -1028,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);
@@ -1037,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 {
@@ -1069,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;
     }
   }
 }
@@ -1116,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"
 
@@ -1150,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:');
@@ -1249,6 +1331,244 @@ async function installComponent(componentName, options = {}) {
   success(`\nSuccessfully installed "${componentName}"`);
 }
 
+// ============================================================================
+// INIT COMMAND - Project Initialization
+// ============================================================================
+
+/**
+ * Detects the project type (Next.js or Vite)
+ * @returns {string} 'nextjs' or 'vite' or null
+ */
+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'))) {
+    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'))) {
+    return 'vite';
+  }
+
+  return null;
+}
+
+/**
+ * Prompts user for configuration using readline
+ * @param {string} question - Question to ask
+ * @param {string} defaultValue - Default value
+ * @returns {Promise<string>} User input
+ */
+function prompt(question, defaultValue = '') {
+  return new Promise((resolve) => {
+    const readline = require('readline');
+    const rl = readline.createInterface({
+      input: process.stdin,
+      output: process.stdout
+    });
+
+    const promptText = defaultValue
+      ? `${question} › ${defaultValue} `
+      : `${question} › `;
+
+    rl.question(promptText, (answer) => {
+      rl.close();
+      resolve(answer.trim() || defaultValue);
+    });
+  });
+}
+
+/**
+ * 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(), PATHS.COMPONENTS_JSON);
+  if (fs.existsSync(configPath)) {
+    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;
+    }
+  }
+
+  // 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;
+  }
+
+  // Detect CSS path based on project type
+  let cssPath = PATHS.APP_GLOBALS_CSS;
+  if (isVite) {
+    cssPath = PATHS.VITE_INDEX_CSS;
+  } else if (fs.existsSync(path.join(process.cwd(), 'app', 'globals.css'))) {
+    cssPath = PATHS.APP_GLOBALS_CSS;
+  } else if (fs.existsSync(path.join(process.cwd(), 'styles', 'globals.css'))) {
+    cssPath = PATHS.STYLES_GLOBALS_CSS;
+  } else {
+    cssPath = await prompt('Where is your global CSS file?', cssPath);
+  }
+
+  // Create components.json with selected theme
+  const config = {
+    $schema: DEFAULTS.SCHEMA_URL,
+    style: selectedTheme,
+    rsc: isNextjs,
+    tsx: true,
+    tailwind: {
+      config: 'tailwind.config.ts',
+      css: cssPath,
+      baseColor: 'neutral',
+      cssVariables: true,
+      prefix: ''
+    },
+    iconLibrary: DEFAULTS.ICON_LIBRARY,
+    aliases: {
+      components: '@/components',
+      utils: '@/lib/utils',
+      ui: '@/components/ui',
+      lib: '@/lib',
+      hooks: '@/hooks'
+    },
+    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));
+
+  // Step 2: Update CSS variables
+  info('   → [:root]/app/globals.css (Updating css variables)');
+  await installCSSStyles(config, DEFAULT_REGISTRY_URL, false, false);
+
+  // Step 3: Install dependencies
+  info('   → Installing dependencies');
+  const missingBaseDeps = BASE_DEPENDENCIES.filter(dep => !checkPackageInstalled(dep));
+  
+  if (missingBaseDeps.length > 0) {
+    await installPackages(missingBaseDeps);
+  }
+
+  // Install tw-animate-css for animations
+  if (!checkPackageInstalled(PACKAGE_NAMES.TW_ANIMATE_CSS)) {
+    await installPackages([PACKAGE_NAMES.TW_ANIMATE_CSS]);
+  }
+
+  // Step 4: 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');
+}
+
 // ============================================================================
 // COMMANDS - CLI Command Handlers
 // ============================================================================
@@ -1262,7 +1582,7 @@ async function installComponent(componentName, options = {}) {
 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
@@ -1298,13 +1618,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'),
@@ -1315,6 +1635,7 @@ async function main() {
   if (!command) {
     console.log(`
 Usage:
+  node scripts/cli-remote.js init [--registry <url>]                  Initialize project
   node scripts/cli-remote.js add <component-name> [--registry <url>]  Install a component
   node scripts/cli-remote.js list [--registry <url>]                  List all available components
   node scripts/cli-remote.js css [--registry <url>] [--overwrite]       Install/update CSS styles
@@ -1324,6 +1645,7 @@ Options:
   --overwrite, -f     Overwrite existing files
 
 Examples:
+  node scripts/cli-remote.js init
   node scripts/cli-remote.js add button
   node scripts/cli-remote.js add button --registry https://raw.githubusercontent.com/user/repo/main/registry
   node scripts/cli-remote.js list
@@ -1335,6 +1657,10 @@ Examples:
 
   // Route to appropriate command handler
   switch (command) {
+    case 'init':
+      await initProject();
+      break;
+
     case 'add':
       if (!componentName) {
         error('Please provide a component name');
@@ -1343,21 +1669,21 @@ 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: add, list, css');
+      console.log('Available commands: init, add, list, css');
       process.exit(1);
   }
 }