alexui 1.0.0 → 1.0.2

package/README.md

@@ -1,42 +1,68 @@
-# alexui CLI
+<div align="center">
+  <h1>✨ AlexUI CLI ✨</h1>
+  <p><b>Componentes React glassmorphic premium directo a tu proyecto</b></p>
+  <p>Estilo shadcn: instalás el código fuente, no dependés de paquetes compilados.</p>
+  
+  [![Website](https://img.shields.io/badge/Website-alexui.netlify.app-ec4899?style=for-the-badge&logo=react)](https://alexui.netlify.app/)
+  [![NPM Version](https://img.shields.io/npm/v/alexui?style=for-the-badge&color=6366f1)](https://www.npmjs.com/package/alexui)
+</div>
 
-**AlexUI by Alexis Jardin** — instalá componentes glassmorphic en tu proyecto React (estilo shadcn: copiás el código fuente).
+<br />
 
-## Requisitos
+## 🌟 Explorá el Catálogo Interactivo
+
+Antes de instalar nada, date una vuelta por nuestro catálogo para ver los más de **80 componentes en vivo**, probar temas, interactuar con la UI y copiar prompts optimizados para IA (Claude, Cursor, etc).
+
+👉 **[Descubrí AlexUI en alexui.netlify.app](https://alexui.netlify.app/)**
+
+---
+
+## 🚀 Requisitos
 
 - Node.js 18+
-- Proyecto React con Tailwind CSS v4
+- Proyecto React (Vite, Next.js, etc)
+- **Tailwind CSS v4** configurado
+
+## 💻 Instalación Rápida
 
-## Instalación
+La CLI de `alexui` hace todo el trabajo por vos. No hace falta instalarla globalmente, usá `npx`:
 
 ```bash
+# 1. Inicializá la configuración en la raíz de tu proyecto
 npx alexui@latest init
-npx alexui@latest add dock
+
+# 2. Agregá los componentes que te gusten
+npx alexui@latest add dock loginform
 ```
 
-O global:
+## 💖 TUI Interactiva (Recomendado)
+
+Si querés la mejor experiencia visual, la CLI viene con una interfaz de terminal premium con gradientes y menús interactivos.
 
 ```bash
-npm install -g alexui
-alexui tui
+npx alexui@latest tui
 ```
 
-## Comandos
+Desde ahí vas a poder navegar por todo el registro de componentes usando las flechas de tu teclado y agregarlos visualmente a tu proyecto.
+
+## 🛠 Comandos Disponibles
 
 | Comando | Descripción |
 |---------|-------------|
-| `alexui init` | Crea `alexui.json` y opcionalmente el CSS de tema |
-| `alexui add <id>` | Copia componente(s) y dependencias internas |
-| `alexui list` | Lista los 86 componentes del registry |
-| `alexui tui` | Modo interactivo con @clack/prompts |
+| `alexui init` | Crea el archivo `alexui.json` y opcionalmente el CSS base glassmorphic |
+| `alexui add <id>` | Copia el componente elegido y resuelve sus dependencias internas automáticamente |
+| `alexui list` | Lista todos los componentes disponibles en el registry |
+| `alexui tui` | Abre el Modo Interactivo en terminal |
 
-### Proyecto externo
+### Usar en un proyecto externo
+Si estás parado en otra carpeta, podés apuntar la CLI hacia tu app usando `--cwd`:
 
 ```bash
-alexui --cwd ../mi-app add loginform
+npx alexui@latest --cwd ../mi-app add loginform
 ```
 
-## Configuración (`alexui.json`)
+## ⚙️ Configuración (`alexui.json`)
+Cuando corras `init`, se te va a generar un archivo como este para que la CLI sepa dónde meter las cosas:
 
 ```json
 {
@@ -45,13 +71,7 @@ alexui --cwd ../mi-app add loginform
 }
 ```
 
-## Catálogo y documentación
-
-- Sitio: [alexui.dev](https://alexui.dev) *(actualizar cuando esté en producción)*
-- Preview en vivo, docs y prompts IA por componente
-
-## Licencia
-
-MIT — © 2026 Alexis Jardin. Los componentes copiados a tu proyecto son tuyos para modificar.
+## 📜 Licencia
 
-Templates Pro y licencias comerciales: ver sitio AlexUI Pro (próximamente).
+MIT — © 2026 Alexis Jardin. 
+Los componentes copiados a tu proyecto son tuyos para modificar, extender y usar en producción como quieras.

package/dist/index.js

@@ -56,5 +56,5 @@ if (!isCommandMode) {
     await runTui(projectDir);
 }
 else {
-    program.parse(['node', 'alexui', ...args], { from: 'user' });
+    program.parse(args, { from: 'user' });
 }

package/dist/tui/panels.js

@@ -12,22 +12,23 @@ export function renderProjectPanel(cwd) {
     const lines = [
         statusBadge(ready) + pc.dim('  ') + pc.dim(shortenPath(cwd, 44)),
         '',
-        `${icon.project} ${pc.bold('Proyecto')}  ${pc.white(shortenPath(cwd))}`,
-        `${icon.pm} ${pc.bold('Gestor')}    ${pc.cyan(pm)}`,
-        `${icon.list} ${pc.bold('Catálogo')}  ${pc.dim(`AlexUI ${registry.version} · ${registry.componentCount} componentes`)}`,
+        `  ${pc.cyan(icon.project)}  ${pc.bold('Proyecto').padEnd(10)} ${pc.white(shortenPath(cwd))}`,
+        `  ${pc.cyan(icon.pm)}  ${pc.bold('Gestor').padEnd(10)} ${pc.magenta(pm)}`,
+        `  ${pc.cyan(icon.list)}  ${pc.bold('Catálogo').padEnd(10)} ${pc.dim(`AlexUI ${registry.version} · ${registry.componentCount} componentes`)}`,
     ];
     if (ready) {
         const config = readConfig(cwd);
-        lines.splice(3, 0, `${icon.folder} ${pc.bold('UI')}        ${pc.dim(path.join(cwd, config.componentDir))}`, `${icon.css} ${pc.bold('CSS')}       ${pc.dim(path.join(cwd, config.tailwind.css))}`);
+        lines.splice(3, 0, `  ${pc.cyan(icon.folder)}  ${pc.bold('UI').padEnd(10)} ${pc.dim(path.join(cwd, config.componentDir))}`, `  ${pc.cyan(icon.css)}  ${pc.bold('CSS').padEnd(10)} ${pc.dim(path.join(cwd, config.tailwind.css))}`);
     }
     else {
-        lines.splice(3, 0, pc.yellow(`  ${icon.warn} Sin alexui.json — inicializá el proyecto primero`));
+        lines.splice(3, 0, pc.yellow(`  ${icon.warn}  Sin alexui.json — inicializá el proyecto primero`));
     }
     return lines.join('\n');
 }
 export function printWelcome(cwd) {
     const registry = getRegistry();
     console.log(renderBanner(registry.version, registry.componentCount));
+    p.intro(pc.bgCyan(pc.black(' AlexUI ')));
     p.note(renderProjectPanel(cwd), `${icon.logo} Panel de control`);
 }
 export function printProjectPanel(cwd, title = 'Estado actualizado') {
@@ -36,13 +37,13 @@ export function printProjectPanel(cwd, title = 'Estado actualizado') {
 export function menuOptions(cwd) {
     const registry = getRegistry();
     return [
-        { value: 'init', label: `${icon.init}  Inicializar proyecto`, hint: 'alexui.json + tema CSS' },
-        { value: 'add', label: `${icon.add}  Agregar componentes`, hint: 'multiselección rápida' },
-        { value: 'browse', label: `${icon.browse}  Explorar catálogo`, hint: 'detalle y preview' },
-        { value: 'search', label: `${icon.search}  Buscar`, hint: 'id, título o categoría' },
-        { value: 'list', label: `${icon.list}  Ver catálogo completo`, hint: `${registry.componentCount} items` },
-        { value: 'chdir', label: `${icon.chdir}  Cambiar proyecto`, hint: shortenPath(cwd, 36) },
-        { value: 'exit', label: `${icon.exit}  Salir`, hint: 'cerrar TUI' },
+        { value: 'init', label: `${pc.cyan(icon.init)}  ${'Inicializar proyecto'.padEnd(22)}`, hint: 'alexui.json + tema CSS' },
+        { value: 'add', label: `${pc.cyan(icon.add)}  ${'Agregar componentes'.padEnd(22)}`, hint: 'multiselección rápida' },
+        { value: 'browse', label: `${pc.cyan(icon.browse)}  ${'Explorar catálogo'.padEnd(22)}`, hint: 'detalle y preview' },
+        { value: 'search', label: `${pc.cyan(icon.search)}  ${'Buscar'.padEnd(22)}`, hint: 'id, título o categoría' },
+        { value: 'list', label: `${pc.cyan(icon.list)}  ${'Ver catálogo completo'.padEnd(22)}`, hint: `${registry.componentCount} items` },
+        { value: 'chdir', label: `${pc.cyan(icon.chdir)}  ${'Cambiar proyecto'.padEnd(22)}`, hint: shortenPath(cwd, 36) },
+        { value: 'exit', label: `${pc.red(icon.exit)}  ${'Salir'.padEnd(22)}`, hint: 'cerrar TUI' },
     ];
 }
 export function sectionHeader(title) {

package/dist/tui/theme.d.ts

@@ -1,23 +1,23 @@
 export declare const icon: {
-    readonly logo: "✦";
-    readonly project: "◈";
-    readonly folder: "▸";
-    readonly css: "◇";
+    readonly logo: "✨";
+    readonly project: "📦";
+    readonly folder: "📁";
+    readonly css: "🎨";
     readonly pm: "⚡";
-    readonly init: "⚙";
-    readonly add: "＋";
-    readonly browse: "◉";
-    readonly search: "◎";
-    readonly list: "≡";
-    readonly chdir: "↦";
-    readonly exit: "✕";
-    readonly complete: "●";
-    readonly atomic: "○";
-    readonly npm: "▪";
-    readonly internal: "↳";
-    readonly ok: "✓";
-    readonly warn: "!";
-    readonly back: "←";
+    readonly init: "🚀";
+    readonly add: "📦";
+    readonly browse: "🧭";
+    readonly search: "🔍";
+    readonly list: "📜";
+    readonly chdir: "🔀";
+    readonly exit: "✖";
+    readonly complete: "🧊";
+    readonly atomic: "💧";
+    readonly npm: "⬇";
+    readonly internal: "🔗";
+    readonly ok: "✔";
+    readonly warn: "⚠";
+    readonly back: "↩";
 };
 export declare function categoryIcon(category: string): string;
 export declare function shortenPath(fullPath: string, max?: number): string;

package/dist/tui/theme.js

@@ -1,24 +1,25 @@
 import pc from 'picocolors';
+import gradient from 'gradient-string';
 export const icon = {
-    logo: '✦',
-    project: '◈',
-    folder: '▸',
-    css: '◇',
+    logo: '✨',
+    project: '📦',
+    folder: '📁',
+    css: '🎨',
     pm: '⚡',
-    init: '⚙',
-    add: '＋',
-    browse: '◉',
-    search: '◎',
-    list: '≡',
-    chdir: '↦',
-    exit: '✕',
-    complete: '●',
-    atomic: '○',
-    npm: '▪',
-    internal: '↳',
-    ok: '✓',
-    warn: '!',
-    back: '←',
+    init: '🚀',
+    add: '📦',
+    browse: '🧭',
+    search: '🔍',
+    list: '📜',
+    chdir: '🔀',
+    exit: '✖',
+    complete: '🧊',
+    atomic: '💧',
+    npm: '⬇',
+    internal: '🔗',
+    ok: '✔',
+    warn: '⚠',
+    back: '↩',
 };
 const CATEGORY_ICONS = {
     entradas: '⌨',
@@ -42,30 +43,38 @@ export function shortenPath(fullPath, max = 52) {
     return `${parts[0]}/…/${parts.slice(-2).join('/')}`;
 }
 export function renderBanner(version, componentCount) {
-    const line = '─'.repeat(36);
+    const brandGradient = gradient(['#06b6d4', '#d946ef']); // Cyan to Magenta
+    const asciiLogo = `
+      ___    __          __  ______
+     /   |  / /____  _  / / / /  _/
+    / /| | / / _ \\ |/_// / / // /  
+   / ___ |/ /  __/>  </ /_/ // /   
+  /_/  |_/_/\\___/_/|_|\\____/___/   
+  `;
     return [
         '',
-        pc.magenta(`  ${icon.logo} `) + pc.bold(pc.white('AlexUI')) + pc.dim(`  v${version}`),
-        pc.dim(`  ${line}`),
-        pc.dim(`  ${componentCount} componentes`) + pc.magenta('  ·  ') + pc.dim('glassmorphic react'),
+        brandGradient.multiline(asciiLogo),
+        '',
+        `  ${pc.bold(pc.white('AlexUI CLI'))} ${pc.dim(`v${version}`)}`,
+        `  ${pc.dim(`${componentCount} componentes`)} ${pc.magenta('·')} ${pc.dim('glassmorphic react')}`,
         '',
     ].join('\n');
 }
 export function renderDivider(label) {
     if (!label)
-        return pc.dim('  ────────────────────────────────────');
-    const pad = Math.max(2, 34 - label.length);
-    return pc.dim(`  ── ${label} ${'─'.repeat(pad)}`);
+        return pc.dim('  ────────────────────────────────────────────');
+    const pad = Math.max(2, 42 - label.length);
+    return pc.dim(`  ── `) + pc.white(pc.bold(label)) + pc.dim(` ${'─'.repeat(pad)}`);
 }
 export function statusBadge(ready) {
     return ready
-        ? pc.bgGreen(pc.black(` ${icon.ok} listo `))
-        : pc.bgYellow(pc.black(` ${icon.warn} sin init `));
+        ? pc.bgGreen(pc.black(` ${icon.ok} Listo `))
+        : pc.bgYellow(pc.black(` ${icon.warn} Sin init `));
 }
 export function groupBadge(group) {
     return group === 'completos'
-        ? pc.bgMagenta(pc.black(` ${icon.complete} completo `))
-        : pc.bgBlue(pc.black(` ${icon.atomic} atómico `));
+        ? pc.bgMagenta(pc.black(` ${icon.complete} Completo `))
+        : pc.bgBlue(pc.black(` ${icon.atomic} Atómico `));
 }
 export function depPills(deps, kind) {
     if (deps.length === 0)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "alexui",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "CLI para agregar componentes AlexUI by Alexis Jardin a tu proyecto React",
   "author": "Alexis Jardin",
   "license": "MIT",
@@ -35,6 +35,7 @@
   "dependencies": {
     "@clack/prompts": "^0.10.1",
     "commander": "^13.1.0",
+    "gradient-string": "^3.0.0",
     "picocolors": "^1.1.1"
   },
   "devDependencies": {