weloop-kosign 1.1.4 → 1.1.5

package/scripts/cli-remote.js

@@ -8,19 +8,16 @@
  * - 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
@@ -48,81 +45,22 @@ 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
@@ -189,38 +127,6 @@ 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
@@ -249,12 +155,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';
 }
@@ -282,9 +188,9 @@ function getInstallCommand(packageManager, packages) {
  * @returns {boolean} True if package is installed, false otherwise
  */
 function checkPackageInstalled(packageName) {
-  const packageJsonPath = path.join(process.cwd(), PATHS.PACKAGE_JSON);
+  const packageJsonPath = path.join(process.cwd(), 'package.json');
   if (!fs.existsSync(packageJsonPath)) return false;
-
+  
   try {
     const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
     // Check both dependencies and devDependencies
@@ -303,16 +209,16 @@ function checkPackageInstalled(packageName) {
  * @returns {string[]} List of packages that need to be installed
  */
 function getMissingDependencies(requiredDeps) {
-  const packageJsonPath = path.join(process.cwd(), PATHS.PACKAGE_JSON);
+  const packageJsonPath = path.join(process.cwd(), '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('/');
@@ -334,44 +240,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 {
@@ -382,13 +288,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`);
@@ -410,25 +316,25 @@ async function installPackages(packages) {
  * @returns {object} The default configuration object
  */
 function createDefaultComponentsConfig() {
-  const configPath = path.join(process.cwd(), PATHS.COMPONENTS_JSON);
-
+  const configPath = path.join(process.cwd(), '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 ? PATHS.APP_GLOBALS_CSS : PATHS.STYLES_GLOBALS_CSS;
-
+  const cssPath = hasAppDir ? 'app/globals.css' : 'styles/globals.css';
+  
   const defaultConfig = {
-    style: DEFAULTS.STYLE,
+    style: 'blue',
     rsc: true,
     tsx: true,
     tailwind: {
       config: 'tailwind.config.ts',
       css: cssPath,
-      baseColor: DEFAULTS.BASE_COLOR,
+      baseColor: 'neutral',
       cssVariables: true,
       prefix: ''
     },
-    iconLibrary: DEFAULTS.ICON_LIBRARY,
+    iconLibrary: 'lucide',
     aliases: {
       components: '@/components',
       utils: '@/lib/utils',
@@ -436,13 +342,13 @@ function createDefaultComponentsConfig() {
       lib: '@/lib',
       hooks: '@/hooks'
     },
-    registry: REGISTRY_URLS.INDEX
+    registry: 'https://gitlab.com/Sophanithchrek/weloop-shadcn-next-app/-/raw/main/registry/index.json'
   };
-
+  
   fs.writeFileSync(configPath, JSON.stringify(defaultConfig, null, 2));
-  success(`Created ${PATHS.COMPONENTS_JSON}`);
+  success(`Created components.json`);
   info(`   You can customize this file to match your project setup`);
-
+  
   return defaultConfig;
 }
 
@@ -453,20 +359,15 @@ function createDefaultComponentsConfig() {
  * @returns {object} The configuration object
  */
 function loadComponentsConfig() {
-  const configPath = path.join(process.cwd(), PATHS.COMPONENTS_JSON);
-
+  const configPath = path.join(process.cwd(), 'components.json');
+  
   if (!fs.existsSync(configPath)) {
-    info(`${PATHS.COMPONENTS_JSON} not found. Creating default configuration...`);
+    info('components.json not found. Creating default configuration...');
     return createDefaultComponentsConfig();
   }
-
-  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;
-  }
+  
+  const content = fs.readFileSync(configPath, 'utf-8');
+  return JSON.parse(content);
 }
 
 /**
@@ -482,21 +383,21 @@ function loadComponentsConfig() {
  * @param {number} retries - Number of retry attempts (default: 3)
  * @returns {Promise<object>} Parsed JSON object
  */
-async function fetchJSON(urlOrPath, retries = MAX_RETRIES) {
+async function fetchJSON(urlOrPath, retries = 3) {
   // 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) {
@@ -504,38 +405,38 @@ async function fetchJSON(urlOrPath, retries = MAX_RETRIES) {
       }
     });
   }
-
+  
   // 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; });
@@ -552,7 +453,7 @@ async function fetchJSON(urlOrPath, retries = MAX_RETRIES) {
           }
         });
       });
-
+      
       // Handle network errors with automatic retry
       request.on('error', (err) => {
         clearTimeout(timeout);
@@ -565,7 +466,7 @@ async function fetchJSON(urlOrPath, retries = MAX_RETRIES) {
           reject(new Error(`Network error: ${err.message} (${err.code || 'UNKNOWN'})`));
         }
       });
-
+      
       // Set request timeout with retry logic
       timeout = setTimeout(() => {
         request.destroy();
@@ -579,7 +480,7 @@ async function fetchJSON(urlOrPath, retries = MAX_RETRIES) {
         }
       }, REQUEST_TIMEOUT);
     };
-
+    
     makeRequest();
   });
 }
@@ -599,34 +500,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', () => {
@@ -638,7 +539,7 @@ async function fetchText(urlOrPath) {
         resolve(data);
       });
     });
-
+    
     // Handle network errors with automatic retry
     req.on('error', (err) => {
       if (err.code === 'ECONNRESET' || err.code === 'ETIMEDOUT') {
@@ -649,7 +550,7 @@ async function fetchText(urlOrPath) {
         reject(err);
       }
     });
-
+    
     // Set request timeout
     req.setTimeout(REQUEST_TIMEOUT, () => {
       req.destroy();
@@ -669,14 +570,13 @@ 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, append filename with proper separator
-  const separator = baseUrl.endsWith('/') ? '' : '/';
-  return `${baseUrl}${separator}${fileName}`;
+  // For remote URLs, just append the filename
+  return `${baseUrl}/${fileName}`;
 }
 
 /**
@@ -693,7 +593,6 @@ 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;
   }
 }
@@ -706,7 +605,7 @@ async function loadRegistry(componentName, registryBaseUrl) {
  * @returns {Promise<object>} Index object containing list of components
  */
 async function loadIndex(registryBaseUrl) {
-  const indexPath = resolveRegistryPath(registryBaseUrl, PATHS.REGISTRY_INDEX);
+  const indexPath = resolveRegistryPath(registryBaseUrl, 'index.json');
   try {
     return await fetchJSON(indexPath);
   } catch (err) {
@@ -727,18 +626,12 @@ async function loadIndex(registryBaseUrl) {
  * @returns {boolean} True if Weloop styles are present
  */
 function hasWeloopStyles(content) {
-  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');
+  // 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');
 }
 
 /**
@@ -749,15 +642,16 @@ function hasTailwindImport(content) {
  * @returns {string} CSS content with duplicates removed
  */
 function removeDuplicateTwAnimateImports(cssContent) {
-  const matches = cssContent.match(CSS_PATTERNS.TW_ANIMATE_IMPORT);
-
+  const twAnimatePattern = /@import\s+["']tw-animate-css["'];?\s*\n?/g;
+  const matches = cssContent.match(twAnimatePattern);
+  
   if (matches && matches.length > 1) {
     // Remove all occurrences first
-    let cleaned = cssContent.replace(CSS_PATTERNS.TW_ANIMATE_IMPORT, '');
+    let cleaned = cssContent.replace(twAnimatePattern, '');
     // Add it back once, right after tailwindcss import if it exists
-    if (hasTailwindImport(cleaned)) {
+    if (cleaned.includes('@import "tailwindcss"') || cleaned.includes("@import 'tailwindcss'")) {
       cleaned = cleaned.replace(
-        CSS_PATTERNS.TAILWIND_IMPORT,
+        /(@import\s+["']tailwindcss["'];?\s*\n?)/,
         '$1@import "tw-animate-css";\n'
       );
     } else {
@@ -766,7 +660,7 @@ function removeDuplicateTwAnimateImports(cssContent) {
     }
     return cleaned;
   }
-
+  
   return cssContent;
 }
 
@@ -778,11 +672,12 @@ function removeDuplicateTwAnimateImports(cssContent) {
  * @returns {string} CSS content with duplicates removed
  */
 function removeDuplicateCustomVariant(cssContent) {
-  const matches = cssContent.match(CSS_PATTERNS.CUSTOM_VARIANT);
+  const variantPattern = /@custom-variant\s+dark\s+\(&:is\(\.dark \*\)\);\s*\n?/g;
+  const matches = cssContent.match(variantPattern);
 
   if (matches && matches.length > 1) {
     // Remove all occurrences and add back one at the top
-    const withoutVariants = cssContent.replace(CSS_PATTERNS.CUSTOM_VARIANT, '');
+    const withoutVariants = cssContent.replace(variantPattern, '');
     return `@custom-variant dark (&:is(.dark *));\n\n${withoutVariants.trimStart()}`;
   }
 
@@ -805,28 +700,30 @@ function removeDuplicateCustomVariant(cssContent) {
  */
 function normalizeCSSFormat(cssContent) {
   // Extract @custom-variant declaration
-  const variantMatch = cssContent.match(CSS_PATTERNS.CUSTOM_VARIANT);
+  const variantPattern = /@custom-variant\s+dark\s+\(&:is\(\.dark \*\)\);\s*\n?/g;
+  const variantMatch = cssContent.match(variantPattern);
   const hasVariant = variantMatch && variantMatch.length > 0;
-
+  
   // Extract all @import statements
-  const imports = cssContent.match(CSS_PATTERNS.IMPORT_STATEMENT) || [];
-
+  const importPattern = /@import\s+["'][^"']+["'];?\s*\n?/g;
+  const imports = cssContent.match(importPattern) || [];
+  
   // 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(CSS_PATTERNS.CUSTOM_VARIANT, '')
-    .replace(CSS_PATTERNS.IMPORT_STATEMENT, '')
+    .replace(variantPattern, '')
+    .replace(importPattern, '')
     .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';
@@ -837,19 +734,23 @@ function normalizeCSSFormat(cssContent) {
   if (otherImports.length > 0) {
     normalized += otherImports.join('') + '\n';
   }
-
+  
   // Step 2: @custom-variant second (if it exists)
   if (hasVariant) {
-    normalized += normalized ? '\n@custom-variant dark (&:is(.dark *));\n' : '@custom-variant dark (&:is(.dark *));\n';
+    if (normalized) {
+      normalized += '\n@custom-variant dark (&:is(.dark *));\n';
+    } else {
+      normalized += '@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' : '');
 }
 
@@ -865,32 +766,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(CSS_PATTERNS.TW_ANIMATE_IMPORT, '');
+    processed = cssContent.replace(twAnimatePattern, '');
     if (cssContent.includes('tw-animate-css') && !processed.includes('tw-animate-css')) {
-      const installCmd = `npm install ${PACKAGE_NAMES.TW_ANIMATE_CSS}`;
       if (forceUpdate) {
-        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');
+        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');
       } else {
-        warn(`${PACKAGE_NAMES.TW_ANIMATE_CSS} package not found - removed from CSS`);
-        info(`   Install with: ${installCmd}`);
+        warn('tw-animate-css package not found - removed from CSS');
+        info('   Install with: npm install tw-animate-css');
         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(CSS_PATTERNS.TW_ANIMATE_IMPORT)) {
-      if (hasTailwindImport(processed)) {
+    if (!processed.match(/@import\s+["']tw-animate-css["'];?\s*\n?/)) {
+      if (processed.includes('@import "tailwindcss"') || processed.includes("@import 'tailwindcss'")) {
         processed = processed.replace(
-          CSS_PATTERNS.TAILWIND_IMPORT,
+          /(@import\s+["']tailwindcss["'];?\s*\n?)/,
           '$1@import "tw-animate-css";\n'
         );
       } else {
@@ -898,7 +799,7 @@ function processTwAnimateImport(cssContent, hasTwAnimate, forceUpdate = false) {
       }
     }
   }
-
+  
   return processed;
 }
 
@@ -910,7 +811,7 @@ function processTwAnimateImport(cssContent, hasTwAnimate, forceUpdate = false) {
  * @returns {string} CSS content without tailwindcss imports
  */
 function removeTailwindImport(cssContent) {
-  return cssContent.replace(CSS_PATTERNS.TAILWIND_IMPORT, '');
+  return cssContent.replace(/@import\s+["']tailwindcss["'];?\s*\n?/g, '');
 }
 
 /**
@@ -925,23 +826,23 @@ function ensureTwAnimateImport(cssContent, hasTwAnimate) {
   if (!hasTwAnimate) {
     return cssContent;
   }
-
+  
   // Remove duplicates first
   let cleaned = removeDuplicateTwAnimateImports(cssContent);
-
+  
   // Check if import already exists
-  if (cleaned.match(CSS_PATTERNS.TW_ANIMATE_IMPORT)) {
+  if (cleaned.match(/@import\s+["']tw-animate-css["'];?\s*\n?/)) {
     return cleaned;
   }
-
+  
   // Add import after tailwindcss if it exists, otherwise at the beginning
-  if (hasTailwindImport(cleaned)) {
+  if (cleaned.includes('@import "tailwindcss"') || cleaned.includes("@import 'tailwindcss'")) {
     return cleaned.replace(
-      CSS_PATTERNS.TAILWIND_IMPORT,
+      /(@import\s+["']tailwindcss["'];?\s*\n?)/,
       '$1@import "tw-animate-css";\n'
     );
   }
-
+  
   return '@import "tw-animate-css";\n' + cleaned;
 }
 
@@ -959,32 +860,35 @@ function ensureTwAnimateImport(cssContent, hasTwAnimate) {
  * @returns {string} Merged CSS content
  */
 function mergeCSSWithTailwind(existing, weloopStyles, hasTwAnimate) {
-  const tailwindMatch = existing.match(CSS_PATTERNS.TAILWIND_IMPORT);
+  const tailwindMatch = existing.match(/(@import\s+["']tailwindcss["'];?\s*\n?)/);
   if (!tailwindMatch) {
     // No tailwindcss import found - just prepend Weloop styles
     return weloopStyles + '\n\n' + existing;
   }
-
+  
   // Split existing CSS around the tailwindcss import
-  const tailwindIndex = existing.indexOf(tailwindMatch[0]);
-  const beforeTailwind = existing.substring(0, tailwindIndex);
-  const afterTailwind = existing.substring(tailwindIndex + tailwindMatch[0].length);
-
+  const beforeTailwind = existing.substring(0, existing.indexOf(tailwindMatch[0]));
+  const afterTailwind = existing.substring(existing.indexOf(tailwindMatch[0]) + tailwindMatch[0].length);
+  
   // Check if tw-animate-css import already exists
-  const hasTwAnimateInExisting = existing.match(CSS_PATTERNS.TW_ANIMATE_IMPORT);
-  const hasTwAnimateInWeloop = weloopStyles.match(CSS_PATTERNS.TW_ANIMATE_IMPORT);
-
+  const hasTwAnimateInExisting = existing.match(/@import\s+["']tw-animate-css["'];?\s*\n?/);
+  const hasTwAnimateInWeloop = weloopStyles.match(/@import\s+["']tw-animate-css["'];?\s*\n?/);
+  
   // 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(CSS_PATTERNS.TW_ANIMATE_IMPORT, '');
+    weloopStylesCleaned = weloopStyles.replace(
+      /@import\s+["']tw-animate-css["'];?\s*\n?/g,
+      ''
+    );
   }
-
+  
   // Add tw-animate import if needed (package installed but import missing)
-  const importsToAdd = (hasTwAnimate && !hasTwAnimateInExisting && !hasTwAnimateInWeloop)
-    ? '@import "tw-animate-css";\n'
-    : '';
+  let importsToAdd = '';
+  if (hasTwAnimate && !hasTwAnimateInExisting && !hasTwAnimateInWeloop) {
+    importsToAdd = '@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;
@@ -1003,26 +907,28 @@ function mergeCSSWithTailwind(existing, weloopStyles, hasTwAnimate) {
  * @returns {string} CSS content with Weloop styles replaced
  */
 function replaceWeloopStyles(existing, newStyles, hasTwAnimate) {
-  const imports = existing.match(CSS_PATTERNS.IMPORT_STATEMENT) || [];
+  const importPattern = /(@import\s+["'][^"']+["'];?\s*\n?)/g;
+  const imports = existing.match(importPattern) || [];
   const importsText = imports.join('');
-
+  
   // Find where Weloop styles start (look for @theme inline or :root)
-  const weloopStartMatch = existing.search(CSS_PATTERNS.WELOOP_START);
-
+  const weloopStartPattern = /(@theme\s+inline|:root\s*\{)/;
+  const weloopStartMatch = existing.search(weloopStartPattern);
+  
   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(CSS_PATTERNS.IMPORT_STATEMENT, '');
-
+  contentBeforeWeloop = nonWeloopImports + '\n' + contentBeforeWeloop.replace(importPattern, '');
+  
   // Return: preserved imports + content before Weloop + new Weloop styles
   return contentBeforeWeloop.trim() + '\n\n' + newStyles.trim();
 }
@@ -1038,11 +944,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 {
@@ -1050,7 +956,7 @@ async function fetchCSSFromRegistry(registryUrl) {
     const baseUrl = registryUrl.replace('/registry', '');
     sourceCssPath = `${baseUrl}/app/globals.css`;
   }
-
+  
   return await fetchText(sourceCssPath);
 }
 
@@ -1068,49 +974,52 @@ 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 || DEFAULTS.CSS_PATH;
+  const cssPath = config.tailwind?.css || 'app/globals.css';
   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(PACKAGE_NAMES.TW_ANIMATE_CSS);
+    
+    const hasTwAnimate = checkPackageInstalled('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
-      const normalized = normalizeAndCleanCSS(processedCssContent, hasTwAnimate);
+      let normalized = normalizeCSSFormat(processedCssContent);
+      normalized = removeDuplicateTwAnimateImports(normalized);
+      normalized = removeDuplicateCustomVariant(normalized);
       fs.writeFileSync(fullCssPath, normalized);
       if (!silent) {
         success(`Overwritten ${cssPath} with Weloop styles`);
         if (hasTwAnimate) {
-          info(`   ${PACKAGE_NAMES.TW_ANIMATE_CSS} import included`);
+          info(`   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 existingHasTailwind = hasTailwindImport(existing);
-
+      const hasTailwindImport = existing.includes('@import "tailwindcss"') || 
+                                existing.includes('@tailwind base');
+      
       if (hasWeloopStylesInFile) {
         // Case 2a: Weloop styles already exist - replace them with updated versions
         let weloopStyles = removeTailwindImport(processedCssContent);
@@ -1119,7 +1028,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);
@@ -1128,29 +1037,31 @@ async function installCSSStyles(config, registryUrl, forceUpdate = false, silent
           }
         }
         // If no changes, silently skip (file is already up to date)
-      } else if (existingHasTailwind) {
+      } else if (hasTailwindImport) {
         // 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 = normalizeAndCleanCSS(merged, hasTwAnimate);
+        merged = removeDuplicateTwAnimateImports(merged);
+        merged = removeDuplicateCustomVariant(merged);
+        merged = normalizeCSSFormat(merged);
         fs.writeFileSync(fullCssPath, merged);
         if (!silent) {
           success(`Updated ${cssPath} with Weloop styles`);
           if (hasTwAnimate) {
-            info(`   ${PACKAGE_NAMES.TW_ANIMATE_CSS} import included`);
+            info(`   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(CSS_PATTERNS.TW_ANIMATE_IMPORT)) {
-          if (hasTailwindImport(finalCssContent)) {
+        if (hasTwAnimate && !finalCssContent.match(/@import\s+["']tw-animate-css["'];?\s*\n?/)) {
+          if (finalCssContent.includes('@import "tailwindcss"')) {
             finalCssContent = finalCssContent.replace(
-              CSS_PATTERNS.TAILWIND_IMPORT,
+              /(@import\s+["']tailwindcss["'];?\s*\n?)/,
               '$1@import "tw-animate-css";\n'
             );
           } else {
@@ -1158,34 +1069,35 @@ async function installCSSStyles(config, registryUrl, forceUpdate = false, silent
           }
         }
         let combined = finalCssContent + '\n\n' + existing;
-        combined = normalizeAndCleanCSS(combined, hasTwAnimate);
+        combined = normalizeCSSFormat(combined);
         fs.writeFileSync(fullCssPath, combined);
         if (!silent) {
           success(`Updated ${cssPath} with Weloop styles`);
           if (hasTwAnimate) {
-            info(`   ${PACKAGE_NAMES.TW_ANIMATE_CSS} import included`);
+            info(`   tw-animate-css import included`);
           }
         }
       }
     } else {
       // Mode 3: File doesn't exist - create new file with Weloop styles
-      const normalized = normalizeAndCleanCSS(processedCssContent, hasTwAnimate);
+      let normalized = normalizeCSSFormat(processedCssContent);
+      normalized = removeDuplicateTwAnimateImports(normalized);
+      normalized = removeDuplicateCustomVariant(normalized);
       fs.writeFileSync(fullCssPath, normalized);
       if (!silent) {
         success(`Created ${cssPath} with Weloop styles`);
         if (hasTwAnimate) {
-          info(`   ${PACKAGE_NAMES.TW_ANIMATE_CSS} import included`);
+          info(`   tw-animate-css import included`);
         }
       }
     }
   } catch (err) {
     if (!silent) {
       warn(`Could not automatically install CSS styles: ${err.message}`);
-      info(getCSSInstallErrorMessage(registryUrl, cssPath));
-    }
-    // Re-throw in silent mode so caller can handle it
-    if (silent) {
-      throw err;
+      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`);
     }
   }
 }
@@ -1204,11 +1116,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"
 
@@ -1238,41 +1150,47 @@ 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 = BASE_DEPENDENCIES.filter(dep => !checkPackageInstalled(dep));
+  const baseDeps = [];
+  if (!checkPackageInstalled('clsx')) {
+    baseDeps.push('clsx');
+  }
+  if (!checkPackageInstalled('tailwind-merge')) {
+    baseDeps.push('tailwind-merge');
+  }
   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(PACKAGE_NAMES.TW_ANIMATE_CSS)) {
-    info(`Installing ${PACKAGE_NAMES.TW_ANIMATE_CSS} for animations...`);
-    await installPackages([PACKAGE_NAMES.TW_ANIMATE_CSS]);
+  if (!checkPackageInstalled('tw-animate-css')) {
+    info('Installing tw-animate-css for animations...');
+    await installPackages(['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:');
@@ -1331,552 +1249,6 @@ 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;
-  }
-
-  // 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: {} };
-  
-  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 = 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: Install dependencies
-  info('   → Installing dependencies');
-  const missingBaseDeps = BASE_DEPENDENCIES.filter(dep => !checkPackageInstalled(dep));
-  
-  if (missingBaseDeps.length > 0) {
-    await installPackages(missingBaseDeps);
-  }
-
-  // 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 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');
-}
-
 // ============================================================================
 // COMMANDS - CLI Command Handlers
 // ============================================================================
@@ -1890,7 +1262,7 @@ export default config;`,
 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
@@ -1926,13 +1298,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'),
@@ -1943,7 +1315,6 @@ 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
@@ -1953,7 +1324,6 @@ 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
@@ -1965,10 +1335,6 @@ Examples:
 
   // Route to appropriate command handler
   switch (command) {
-    case 'init':
-      await initProject();
-      break;
-
     case 'add':
       if (!componentName) {
         error('Please provide a component name');
@@ -1977,21 +1343,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: init, add, list, css');
+      console.log('Available commands: add, list, css');
       process.exit(1);
   }
 }