weloop-kosign 1.0.2

package/README.md

@@ -0,0 +1,111 @@
+# Weloop Component Library
+
+A modular component library built with Next.js, similar to shadcn/ui. Install only the components you need directly into your project.
+
+## Installation
+
+First, make sure you have the base dependencies installed:
+
+```bash
+npm install clsx tailwind-merge
+```
+
+Then install components using the CLI:
+
+```bash
+npx weloop-kosign@latest add button
+```
+
+To install the base CSS styles:
+
+```bash
+npx weloop-kosign@latest css
+```
+
+## Usage
+
+Once you've installed a component, you can import and use it in your code:
+
+```tsx
+import { Button } from "@/components/ui/button";
+
+export function MyComponent() {
+  return <Button>Click me</Button>;
+}
+```
+
+The CLI will automatically install any required dependencies for each component. If something's missing, it'll let you know.
+
+## Available Commands
+
+Install a component:
+
+```bash
+npx weloop-kosign@latest add <component-name>
+```
+
+See all available components:
+
+```bash
+npx weloop-kosign@latest list
+```
+
+Install or update CSS styles:
+
+```bash
+npx weloop-kosign@latest css
+```
+
+Overwrite an existing component:
+
+```bash
+npx weloop-kosign@latest add button --overwrite
+```
+
+## Component Dependencies
+
+Some components depend on others. For example, the calendar component needs the button component. The CLI handles this automatically, so you don't need to worry about installing dependencies manually.
+
+## Local Development
+
+If you're working on this project itself, you can use the npm scripts:
+
+```bash
+npm run add button
+npm run components:list
+npm run generate-registry
+```
+
+## Project Structure
+
+- Components live in `components/ui/`
+- Registry files are in `registry/` - these contain the component metadata
+- CLI scripts are in `scripts/`
+
+## Development
+
+Run the development server:
+
+```bash
+npm run dev
+```
+
+Then open [http://localhost:3000](http://localhost:3000) in your browser.
+
+## Building
+
+Build the project:
+
+```bash
+npm run build
+```
+
+Start the production server:
+
+```bash
+npm start
+```
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,106 @@
+{
+  "name": "weloop-kosign",
+  "version": "1.0.2",
+  "description": "CLI tool for installing Weloop UI components",
+  "keywords": [
+    "weloop",
+    "ui",
+    "components",
+    "cli",
+    "shadcn"
+  ],
+  "author": "KOSIGN",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/Sophanithchrek/weloop-shadcn-next-app.git"
+  },
+  "homepage": "https://gitlab.com/Sophanithchrek/weloop-shadcn-next-app",
+  "private": false,
+  "bin": {
+    "weloop-kosign": "./scripts/cli-remote.js"
+  },
+  "files": [
+    "scripts/cli-remote.js",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint",
+    "generate-registry": "node scripts/generate-all-registry.js",
+    "add": "node scripts/cli-remote.js add",
+    "components:list": "node scripts/cli-remote.js list"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@hookform/resolvers": "^5.2.2",
+    "@lobehub/icons": "^2.43.1",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-aspect-ratio": "^1.1.8",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tabler/icons-react": "^3.35.0",
+    "@tanstack/react-table": "^8.21.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.554.0",
+    "next": "^16.0.7",
+    "next-themes": "^0.4.6",
+    "ogl": "^1.0.11",
+    "react": "19.2.0",
+    "react-day-picker": "^9.11.3",
+    "react-dom": "19.2.0",
+    "react-hook-form": "^7.68.0",
+    "react-resizable-panels": "^4.0.1",
+    "recharts": "^2.15.4",
+    "shiki": "^3.20.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.4.0",
+    "three": "^0.167.1",
+    "vaul": "^1.1.2",
+    "zod": "^4.2.1"
+  },
+  "devDependencies": {
+    "@netlify/plugin-nextjs": "^4.39.0",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@types/three": "^0.182.0",
+    "eslint": "^9",
+    "eslint-config-next": "16.0.3",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5"
+  }
+}

package/scripts/cli-remote.js

@@ -0,0 +1,757 @@
+#!/usr/bin/env node
+
+/**
+ * CLI tool for installing components from a registry (local or remote)
+ * 
+ * Auto-detects local vs remote:
+ * - If running in the component library project: uses local registry/ directory
+ * - If running in external projects: uses remote GitLab/GitHub URL
+ * 
+ * Usage (via npx - recommended):
+ *   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 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 add button
+ *   npx weloop-kosign@latest add button --registry ./registry
+ *   npx weloop-kosign@latest css
+ */
+
+const fs = require('fs');
+const path = require('path');
+const https = require('https');
+const http = require('http');
+const { execSync } = require('child_process');
+
+// ============================================================================
+// CONFIGURATION
+// ============================================================================
+
+function getDefaultRegistryUrl() {
+  const localRegistryPath = path.join(__dirname, '../registry');
+  if (fs.existsSync(localRegistryPath) && fs.existsSync(path.join(localRegistryPath, 'index.json'))) {
+    return localRegistryPath;
+  }
+  return process.env.WELOOP_REGISTRY_URL || 
+    'https://gitlab.com/Sophanithchrek/weloop-shadcn-next-app/-/raw/main/registry';
+}
+
+const DEFAULT_REGISTRY_URL = getDefaultRegistryUrl();
+
+// ============================================================================
+// UTILITIES
+// ============================================================================
+
+const colors = {
+  reset: '\x1b[0m',
+  green: '\x1b[32m',
+  red: '\x1b[31m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  cyan: '\x1b[36m',
+};
+
+function log(message, color = 'reset') {
+  console.log(`${colors[color]}${message}${colors.reset}`);
+}
+
+function error(message) {
+  log(`Error: ${message}`, 'red');
+}
+
+function success(message) {
+  log(message, 'green');
+}
+
+function info(message) {
+  log(message, 'blue');
+}
+
+function warn(message) {
+  log(`Warning: ${message}`, 'yellow');
+}
+
+function ensureDirectoryExists(dirPath) {
+  if (!fs.existsSync(dirPath)) {
+    fs.mkdirSync(dirPath, { recursive: true });
+  }
+}
+
+function isLocalPath(pathOrUrl) {
+  return !pathOrUrl.startsWith('http://') && !pathOrUrl.startsWith('https://');
+}
+
+// ============================================================================
+// PACKAGE MANAGEMENT
+// ============================================================================
+
+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';
+  
+  const userAgent = process.env.npm_config_user_agent || '';
+  if (userAgent.includes('yarn')) return 'yarn';
+  if (userAgent.includes('pnpm')) return 'pnpm';
+  
+  return 'npm';
+}
+
+function getInstallCommand(packageManager, packages) {
+  const packagesStr = packages.join(' ');
+  switch (packageManager) {
+    case 'yarn': return `yarn add ${packagesStr}`;
+    case 'pnpm': return `pnpm add ${packagesStr}`;
+    case 'npm':
+    default: return `npm install ${packagesStr}`;
+  }
+}
+
+function checkPackageInstalled(packageName) {
+  const packageJsonPath = path.join(process.cwd(), 'package.json');
+  if (!fs.existsSync(packageJsonPath)) return false;
+  
+  try {
+    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+    const allDeps = { ...packageJson.dependencies, ...packageJson.devDependencies };
+    return !!allDeps[packageName];
+  } catch (e) {
+    return false;
+  }
+}
+
+function getMissingDependencies(requiredDeps) {
+  const packageJsonPath = path.join(process.cwd(), 'package.json');
+  if (!fs.existsSync(packageJsonPath)) return requiredDeps;
+  
+  try {
+    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+    const allDeps = { ...packageJson.dependencies, ...packageJson.devDependencies };
+    
+    return requiredDeps.filter(dep => {
+      const depName = dep.split('/').slice(0, 2).join('/');
+      return !allDeps[dep] && !allDeps[depName];
+    });
+  } catch (e) {
+    return requiredDeps;
+  }
+}
+
+async function installPackages(packages) {
+  if (packages.length === 0) return;
+  
+  const packageManager = detectPackageManager();
+  info(`\nInstalling dependencies: ${packages.join(', ')}`);
+  
+  try {
+    const installCmd = getInstallCommand(packageManager, packages);
+    execSync(installCmd, { stdio: 'inherit', cwd: process.cwd() });
+    success(`Dependencies installed successfully`);
+  } catch (error) {
+    warn(`Failed to install dependencies automatically`);
+    console.log(`\n  Please install them manually:`);
+    console.log(`  ${getInstallCommand(packageManager, packages)}\n`);
+  }
+}
+
+// ============================================================================
+// FILE OPERATIONS
+// ============================================================================
+
+function loadComponentsConfig() {
+  const configPath = path.join(process.cwd(), 'components.json');
+  
+  if (!fs.existsSync(configPath)) {
+    error('components.json not found. Please initialize your project first.');
+    info('Create a components.json file with your project configuration.');
+    process.exit(1);
+  }
+  
+  const content = fs.readFileSync(configPath, 'utf-8');
+  return JSON.parse(content);
+}
+
+async function fetchJSON(urlOrPath, retries = 3) {
+  if (isLocalPath(urlOrPath)) {
+    return new Promise((resolve, reject) => {
+      try {
+        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) {
+        reject(new Error(`Failed to read local file: ${e.message}`));
+      }
+    });
+  }
+  
+  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);
+        
+        if (res.statusCode === 302 || res.statusCode === 301) {
+          return fetchJSON(res.headers.location, retries).then(resolve).catch(reject);
+        }
+        
+        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;
+        }
+        
+        let data = '';
+        res.on('data', (chunk) => { data += chunk; });
+        res.on('end', () => {
+          try {
+            if (data.trim().startsWith('<')) {
+              reject(new Error('Received HTML instead of JSON. Repository may be private or URL incorrect.'));
+              return;
+            }
+            resolve(JSON.parse(data));
+          } catch (e) {
+            reject(new Error(`Invalid JSON response: ${e.message}`));
+          }
+        });
+      });
+      
+      request.on('error', (err) => {
+        clearTimeout(timeout);
+        if (retries > 0 && (err.code === 'ECONNRESET' || err.code === 'ETIMEDOUT' || err.code === 'ENOTFOUND')) {
+          info(`Connection error, retrying... (${retries} attempts left)`);
+          setTimeout(() => {
+            fetchJSON(urlOrPath, retries - 1).then(resolve).catch(reject);
+          }, 1000);
+        } else {
+          reject(new Error(`Network error: ${err.message} (${err.code || 'UNKNOWN'})`));
+        }
+      });
+      
+      timeout = setTimeout(() => {
+        request.destroy();
+        if (retries > 0) {
+          info(`Request timeout, retrying... (${retries} attempts left)`);
+          setTimeout(() => {
+            fetchJSON(urlOrPath, retries - 1).then(resolve).catch(reject);
+          }, 1000);
+        } else {
+          reject(new Error('Request timeout after multiple attempts'));
+        }
+      }, 15000);
+    };
+    
+    makeRequest();
+  });
+}
+
+async function fetchText(urlOrPath) {
+  if (isLocalPath(urlOrPath)) {
+    if (!fs.existsSync(urlOrPath)) {
+      throw new Error(`File not found: ${urlOrPath}`);
+    }
+    return fs.readFileSync(urlOrPath, 'utf-8');
+  }
+  
+  return new Promise((resolve, reject) => {
+    const client = urlOrPath.startsWith('https') ? https : http;
+    let data = '';
+    
+    const req = client.get(urlOrPath, (res) => {
+      if (res.statusCode === 302 || res.statusCode === 301) {
+        return fetchText(res.headers.location).then(resolve).catch(reject);
+      }
+      
+      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;
+      }
+      
+      res.on('data', (chunk) => { data += chunk; });
+      res.on('end', () => {
+        if (data.trim().startsWith('<')) {
+          reject(new Error('Received HTML instead of CSS'));
+          return;
+        }
+        resolve(data);
+      });
+    });
+    
+    req.on('error', (err) => {
+      if (err.code === 'ECONNRESET' || err.code === 'ETIMEDOUT') {
+        setTimeout(() => {
+          fetchText(urlOrPath).then(resolve).catch(reject);
+        }, 1000);
+      } else {
+        reject(err);
+      }
+    });
+    
+    req.setTimeout(15000, () => {
+      req.destroy();
+      reject(new Error('Request timeout'));
+    });
+  });
+}
+
+function resolveRegistryPath(baseUrl, fileName) {
+  if (isLocalPath(baseUrl)) {
+    const basePath = path.isAbsolute(baseUrl) 
+      ? baseUrl 
+      : path.join(process.cwd(), baseUrl);
+    return path.join(basePath, fileName);
+  }
+  return `${baseUrl}/${fileName}`;
+}
+
+async function loadRegistry(componentName, registryBaseUrl) {
+  try {
+    const registryPath = resolveRegistryPath(registryBaseUrl, `${componentName}.json`);
+    return await fetchJSON(registryPath);
+  } catch (err) {
+    return null;
+  }
+}
+
+async function loadIndex(registryBaseUrl) {
+  const indexPath = resolveRegistryPath(registryBaseUrl, 'index.json');
+  try {
+    return await fetchJSON(indexPath);
+  } catch (err) {
+    error(`Failed to load registry index from ${indexPath}`);
+    throw err;
+  }
+}
+
+// ============================================================================
+// CSS PROCESSING
+// ============================================================================
+
+function hasWeloopStyles(content) {
+  return content.includes('--WLDS-PRM-') || 
+         content.includes('--WLDS-RED-') || 
+         content.includes('--WLDS-NTL-') ||
+         content.includes('--system-100') ||
+         content.includes('--system-200');
+}
+
+function processTwAnimateImport(cssContent, hasTwAnimate, forceUpdate = false) {
+  const twAnimatePattern = /@import\s+["']tw-animate-css["'];?\s*\n?/g;
+  let processed = cssContent;
+  
+  if (!hasTwAnimate) {
+    processed = cssContent.replace(twAnimatePattern, '');
+    if (cssContent.includes('tw-animate-css') && !processed.includes('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');
+      } else {
+        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 {
+    // Ensure import exists if package is installed
+    if (!processed.match(/@import\s+["']tw-animate-css["'];?\s*\n?/)) {
+      if (processed.includes('@import "tailwindcss"') || processed.includes("@import 'tailwindcss'")) {
+        processed = processed.replace(
+          /(@import\s+["']tailwindcss["'];?\s*\n?)/,
+          '$1@import "tw-animate-css";\n'
+        );
+      } else {
+        processed = '@import "tw-animate-css";\n' + processed;
+      }
+    }
+  }
+  
+  return processed;
+}
+
+function removeTailwindImport(cssContent) {
+  return cssContent.replace(/@import\s+["']tailwindcss["'];?\s*\n?/g, '');
+}
+
+function ensureTwAnimateImport(cssContent, hasTwAnimate) {
+  if (!hasTwAnimate || cssContent.includes('@import "tw-animate-css"')) {
+    return cssContent;
+  }
+  return '@import "tw-animate-css";\n' + cssContent;
+}
+
+function mergeCSSWithTailwind(existing, weloopStyles, hasTwAnimate) {
+  const tailwindMatch = existing.match(/(@import\s+["']tailwindcss["'];?\s*\n?)/);
+  if (!tailwindMatch) {
+    return weloopStyles + '\n\n' + existing;
+  }
+  
+  const beforeTailwind = existing.substring(0, existing.indexOf(tailwindMatch[0]));
+  const afterTailwind = existing.substring(existing.indexOf(tailwindMatch[0]) + tailwindMatch[0].length);
+  
+  let importsToAdd = '';
+  if (hasTwAnimate && !existing.includes('@import "tw-animate-css"')) {
+    importsToAdd = '@import "tw-animate-css";\n';
+  }
+  
+  return beforeTailwind + tailwindMatch[0] + importsToAdd + weloopStyles + '\n' + afterTailwind;
+}
+
+function replaceWeloopStyles(existing, newStyles, hasTwAnimate) {
+  const importPattern = /(@import\s+["'][^"']+["'];?\s*\n?)/g;
+  const imports = existing.match(importPattern) || [];
+  const importsText = imports.join('');
+  
+  const weloopStartPattern = /(@theme\s+inline|:root\s*\{)/;
+  const weloopStartMatch = existing.search(weloopStartPattern);
+  
+  if (weloopStartMatch === -1) {
+    return existing + '\n\n' + newStyles;
+  }
+  
+  let contentBeforeWeloop = existing.substring(0, weloopStartMatch);
+  const nonWeloopImports = importsText.split('\n').filter(imp => 
+    !imp.includes('tw-animate-css') || hasTwAnimate
+  ).join('\n');
+  contentBeforeWeloop = nonWeloopImports + '\n' + contentBeforeWeloop.replace(importPattern, '');
+  
+  return contentBeforeWeloop.trim() + '\n\n' + newStyles.trim();
+}
+
+async function fetchCSSFromRegistry(registryUrl) {
+  let sourceCssPath;
+  
+  if (isLocalPath(registryUrl)) {
+    const basePath = path.isAbsolute(registryUrl) 
+      ? path.dirname(registryUrl) 
+      : path.join(process.cwd(), path.dirname(registryUrl));
+    sourceCssPath = path.join(basePath, 'app', 'globals.css');
+  } else {
+    const baseUrl = registryUrl.replace('/registry', '');
+    sourceCssPath = `${baseUrl}/app/globals.css`;
+  }
+  
+  return await fetchText(sourceCssPath);
+}
+
+async function installCSSStyles(config, registryUrl, forceUpdate = false) {
+  const cssPath = config.tailwind?.css || 'app/globals.css';
+  const fullCssPath = path.join(process.cwd(), cssPath);
+  
+  // Check if Weloop styles already exist
+  let hasWeloopStylesInFile = false;
+  if (fs.existsSync(fullCssPath)) {
+    const existingContent = fs.readFileSync(fullCssPath, 'utf-8');
+    hasWeloopStylesInFile = hasWeloopStyles(existingContent);
+    
+    if (forceUpdate && hasWeloopStylesInFile) {
+      info('Updating existing Weloop styles...');
+    }
+  }
+  
+  try {
+    info('Installing CSS styles...');
+    const cssContent = await fetchCSSFromRegistry(registryUrl);
+    ensureDirectoryExists(path.dirname(fullCssPath));
+    
+    const hasTwAnimate = checkPackageInstalled('tw-animate-css');
+    let processedCssContent = processTwAnimateImport(cssContent, hasTwAnimate, forceUpdate);
+    
+    // Handle file installation
+    if (forceUpdate && fs.existsSync(fullCssPath)) {
+      // --overwrite: Replace entire file
+      fs.writeFileSync(fullCssPath, processedCssContent);
+      success(`Overwritten ${cssPath} with Weloop styles`);
+      if (hasTwAnimate) {
+        info(`   tw-animate-css import included`);
+      }
+    } else if (fs.existsSync(fullCssPath)) {
+      // Normal mode: Merge intelligently
+      const existing = fs.readFileSync(fullCssPath, 'utf-8');
+      const hasTailwindImport = existing.includes('@import "tailwindcss"') || 
+                                existing.includes('@tailwind base');
+      
+      if (hasWeloopStylesInFile) {
+        // Replace existing Weloop styles
+        let weloopStyles = removeTailwindImport(processedCssContent);
+        weloopStyles = ensureTwAnimateImport(weloopStyles, hasTwAnimate);
+        const finalContent = replaceWeloopStyles(existing, weloopStyles, hasTwAnimate);
+        fs.writeFileSync(fullCssPath, finalContent);
+        success(`Updated ${cssPath} with Weloop styles`);
+        info(`   Existing Weloop styles were replaced with latest version`);
+      } else if (hasTailwindImport) {
+        // Merge after Tailwind imports
+        let weloopStyles = removeTailwindImport(processedCssContent);
+        weloopStyles = ensureTwAnimateImport(weloopStyles, hasTwAnimate);
+        const merged = mergeCSSWithTailwind(existing, weloopStyles, hasTwAnimate);
+        fs.writeFileSync(fullCssPath, merged);
+        success(`Updated ${cssPath} with Weloop styles`);
+        if (hasTwAnimate) {
+          info(`   tw-animate-css import included`);
+        }
+        info(`   Your existing styles are preserved`);
+      } else {
+        // No Tailwind imports, prepend everything
+        let finalCssContent = processedCssContent;
+        if (hasTwAnimate && !finalCssContent.includes('@import "tw-animate-css"')) {
+          if (finalCssContent.includes('@import "tailwindcss"')) {
+            finalCssContent = finalCssContent.replace(
+              /(@import\s+["']tailwindcss["'];?\s*\n?)/,
+              '$1@import "tw-animate-css";\n'
+            );
+          } else {
+            finalCssContent = '@import "tailwindcss";\n@import "tw-animate-css";\n' + finalCssContent;
+          }
+        }
+        fs.writeFileSync(fullCssPath, finalCssContent + '\n\n' + existing);
+        success(`Updated ${cssPath} with Weloop styles`);
+        if (hasTwAnimate) {
+          info(`   tw-animate-css import included`);
+        }
+      }
+    } else {
+      // Create new file
+      fs.writeFileSync(fullCssPath, processedCssContent);
+      success(`Created ${cssPath} with Weloop styles`);
+      if (hasTwAnimate) {
+        info(`   tw-animate-css import included`);
+      }
+    }
+  } catch (err) {
+    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`);
+  }
+}
+
+// ============================================================================
+// COMPONENT INSTALLATION
+// ============================================================================
+
+function createUtilsFile(utilsPath) {
+  if (fs.existsSync(utilsPath)) return;
+  
+  warn(`utils file not found at ${utilsPath}. Creating it...`);
+  ensureDirectoryExists(path.dirname(utilsPath));
+  
+  const utilsContent = `import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+`;
+  fs.writeFileSync(utilsPath, utilsContent);
+  success(`Created ${path.relative(process.cwd(), utilsPath)}`);
+  
+  // Check if required packages are installed
+  if (!checkPackageInstalled('clsx') || !checkPackageInstalled('tailwind-merge')) {
+    warn('utils.ts requires: clsx and tailwind-merge');
+    info('   Install with: npm install clsx tailwind-merge');
+  }
+}
+
+async function installComponent(componentName, options = {}) {
+  const { overwrite = false, registryUrl = DEFAULT_REGISTRY_URL } = options;
+  const config = loadComponentsConfig();
+  
+  // Install CSS styles early (before component installation)
+  await installCSSStyles(config, registryUrl);
+  
+  // Get paths from components.json
+  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);
+  
+  // Load component registry
+  const registry = await loadRegistry(componentName, registryUrl);
+  
+  if (!registry) {
+    error(`Component "${componentName}" not found in registry.`);
+    info('Available components:');
+    try {
+      const index = await loadIndex(registryUrl);
+      index.registry.forEach(comp => {
+        console.log(`  - ${comp.name}`);
+      });
+    } catch (e) {
+      // Ignore if index fails
+    }
+    process.exit(1);
+  }
+
+  // Check if component already exists
+  const componentPath = path.join(componentsDir, `${componentName}.tsx`);
+  if (fs.existsSync(componentPath) && !overwrite) {
+    warn(`Component "${componentName}" already exists. Use --overwrite to replace it.`);
+    return;
+  }
+
+  // Install registry dependencies first
+  if (registry.registryDependencies && registry.registryDependencies.length > 0) {
+    info(`Installing dependencies: ${registry.registryDependencies.join(', ')}`);
+    for (const dep of registry.registryDependencies) {
+      await installComponent(dep, { overwrite: false, registryUrl });
+    }
+  }
+
+  // Install component files
+  for (const file of registry.files) {
+    const filePath = path.join(process.cwd(), file.path);
+    ensureDirectoryExists(path.dirname(filePath));
+    fs.writeFileSync(filePath, file.content);
+    success(`Installed: ${file.path}`);
+  }
+
+  // Create utils.ts if needed
+  createUtilsFile(utilsPath);
+
+  // Install npm dependencies
+  if (registry.dependencies && registry.dependencies.length > 0) {
+    const missingDeps = getMissingDependencies(registry.dependencies);
+    if (missingDeps.length > 0) {
+      await installPackages(missingDeps);
+    } else {
+      info('\nAll dependencies are already installed');
+    }
+  }
+
+  success(`\nSuccessfully installed "${componentName}"`);
+}
+
+// ============================================================================
+// COMMANDS
+// ============================================================================
+
+async function listComponents(registryUrl = DEFAULT_REGISTRY_URL) {
+  try {
+    const index = await loadIndex(registryUrl);
+    
+    console.log('\nAvailable components:\n');
+    index.registry.forEach(comp => {
+      const deps = comp.registryDependencies && comp.registryDependencies.length > 0
+        ? ` (depends on: ${comp.registryDependencies.join(', ')})`
+        : '';
+      console.log(`  ${comp.name}${deps}`);
+    });
+    console.log('');
+  } catch (err) {
+    error(`Failed to load components: ${err.message}`);
+    process.exit(1);
+  }
+}
+
+// ============================================================================
+// MAIN
+// ============================================================================
+
+async function main() {
+  const args = process.argv.slice(2);
+  const command = args[0];
+  const componentName = args[1];
+  
+  const registryIndex = args.indexOf('--registry');
+  const registryUrl = registryIndex !== -1 && args[registryIndex + 1]
+    ? args[registryIndex + 1]
+    : DEFAULT_REGISTRY_URL;
+  
+  const options = {
+    overwrite: args.includes('--overwrite') || args.includes('-f'),
+    registryUrl: registryUrl,
+  };
+
+  if (!command) {
+    console.log(`
+Usage:
+  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
+
+Options:
+  --registry <url>    Registry base URL (default: ${DEFAULT_REGISTRY_URL})
+  --overwrite, -f     Overwrite existing files
+
+Examples:
+  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
+  node scripts/cli-remote.js css
+  node scripts/cli-remote.js css --overwrite
+`);
+    process.exit(0);
+  }
+
+  switch (command) {
+    case 'add':
+      if (!componentName) {
+        error('Please provide a component name');
+        console.log('Usage: node scripts/cli-remote.js add <component-name>');
+        process.exit(1);
+      }
+      await installComponent(componentName, options);
+      break;
+    
+    case 'list':
+      await listComponents(registryUrl);
+      break;
+    
+    case 'css':
+    case 'styles':
+      const config = loadComponentsConfig();
+      await installCSSStyles(config, registryUrl, options.overwrite);
+      break;
+    
+    default:
+      error(`Unknown command: ${command}`);
+      console.log('Available commands: add, list, css');
+      process.exit(1);
+  }
+}
+
+main().catch(err => {
+  error(`Error: ${err.message}`);
+  process.exit(1);
+});