npm - alexui - Versions diffs - 1.0.0 - Mend

alexui 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (124) hide show

package/README.md +57 -0
package/components/ActionTable.tsx +307 -0
package/components/AlertBanner.tsx +124 -0
package/components/AnimatedAccordion.tsx +95 -0
package/components/Autocomplete.tsx +144 -0
package/components/Avatar.tsx +123 -0
package/components/Badge.tsx +80 -0
package/components/Breadcrumb.tsx +74 -0
package/components/Calendar.tsx +340 -0
package/components/Card3D.tsx +117 -0
package/components/Carousel3D.tsx +193 -0
package/components/CascadeSelect.tsx +232 -0
package/components/ChartShowcase.tsx +700 -0
package/components/Checkbox.tsx +212 -0
package/components/ChipsInput.tsx +152 -0
package/components/CircularKnob.tsx +240 -0
package/components/CodeVisualizer.tsx +67 -0
package/components/Collapsible.tsx +72 -0
package/components/ColorThemeManager.tsx +458 -0
package/components/CommandMenu.tsx +191 -0
package/components/ConfirmDialog.tsx +152 -0
package/components/ContextMenu.tsx +192 -0
package/components/DashboardLayout.tsx +115 -0
package/components/DatePicker.tsx +108 -0
package/components/Divider.tsx +67 -0
package/components/Dock.tsx +93 -0
package/components/DragDropLists.tsx +160 -0
package/components/Drawer.tsx +161 -0
package/components/DropdownPlus.tsx +304 -0
package/components/EmptyState.tsx +49 -0
package/components/ErrorPage.tsx +62 -0
package/components/FileDropzone.tsx +206 -0
package/components/ForgotPassword.tsx +137 -0
package/components/FormField.tsx +81 -0
package/components/GlassButton.tsx +56 -0
package/components/GlassCard.tsx +82 -0
package/components/GlassInput.tsx +96 -0
package/components/GlassmorphicModal.tsx +108 -0
package/components/GlowInput.tsx +111 -0
package/components/GlowSelect.tsx +203 -0
package/components/GlowTextArea.tsx +105 -0
package/components/HorizontalTimeline.tsx +121 -0
package/components/HoverCard.tsx +105 -0
package/components/ImageLightbox.tsx +259 -0
package/components/InputGroup.tsx +118 -0
package/components/InputOTP.tsx +147 -0
package/components/InteractiveNavbar.tsx +266 -0
package/components/InteractiveSidebar.tsx +211 -0
package/components/Kbd.tsx +51 -0
package/components/LiteYouTube.tsx +118 -0
package/components/LoaderCollection.tsx +368 -0
package/components/LoginForm.tsx +192 -0
package/components/MagneticButton.tsx +101 -0
package/components/MaskedInput.tsx +79 -0
package/components/MentionInput.tsx +413 -0
package/components/MorphingSwitch.tsx +86 -0
package/components/MultiSelect.tsx +158 -0
package/components/NumberInput.tsx +203 -0
package/components/Panel.tsx +104 -0
package/components/PasswordInput.tsx +203 -0
package/components/Popover.tsx +91 -0
package/components/PricingTable.tsx +113 -0
package/components/ProgressBar.tsx +152 -0
package/components/RadioButton.tsx +211 -0
package/components/Rating.tsx +82 -0
package/components/ResizablePanel.tsx +114 -0
package/components/ScrollPanel.tsx +103 -0
package/components/SettingsPage.tsx +154 -0
package/components/SignupForm.tsx +182 -0
package/components/Skeleton.tsx +41 -0
package/components/Slider.tsx +95 -0
package/components/SlidingTabs.tsx +54 -0
package/components/SortableList.tsx +91 -0
package/components/SpeedDial.tsx +134 -0
package/components/Spinner.tsx +40 -0
package/components/Stepper.tsx +124 -0
package/components/TabMenu.tsx +72 -0
package/components/TableControls.tsx +77 -0
package/components/TablePagination.tsx +88 -0
package/components/TextEditor.tsx +329 -0
package/components/TextReveal.tsx +99 -0
package/components/ThemeSwitcher.tsx +133 -0
package/components/TimelineGSAP.tsx +164 -0
package/components/ToastSystem.tsx +110 -0
package/components/ToggleButton.tsx +79 -0
package/components/Tooltip.tsx +121 -0
package/components/Tree.tsx +138 -0
package/dist/commands/add.d.ts +7 -0
package/dist/commands/add.js +110 -0
package/dist/commands/init.d.ts +5 -0
package/dist/commands/init.js +76 -0
package/dist/commands/list.d.ts +1 -0
package/dist/commands/list.js +32 -0
package/dist/index.d.ts +2 -0
package/dist/index.js +60 -0
package/dist/registry.d.ts +6 -0
package/dist/registry.js +38 -0
package/dist/tui/browse.d.ts +3 -0
package/dist/tui/browse.js +139 -0
package/dist/tui/format.d.ts +11 -0
package/dist/tui/format.js +52 -0
package/dist/tui/main.d.ts +1 -0
package/dist/tui/main.js +86 -0
package/dist/tui/panels.d.ts +9 -0
package/dist/tui/panels.js +50 -0
package/dist/tui/theme.d.ts +28 -0
package/dist/tui/theme.js +76 -0
package/dist/types.d.ts +28 -0
package/dist/types.js +1 -0
package/dist/utils/config.d.ts +6 -0
package/dist/utils/config.js +24 -0
package/dist/utils/copy.d.ts +9 -0
package/dist/utils/copy.js +43 -0
package/dist/utils/cwd.d.ts +6 -0
package/dist/utils/cwd.js +30 -0
package/dist/utils/deps.d.ts +1 -0
package/dist/utils/deps.js +19 -0
package/dist/utils/project.d.ts +5 -0
package/dist/utils/project.js +30 -0
package/dist/utils/theme.d.ts +1 -0
package/dist/utils/theme.js +24 -0
package/package.json +52 -0
package/registry.json +1133 -0
package/templates/theme.css +81 -0

package/dist/commands/add.js ADDED Viewed

@@ -0,0 +1,110 @@
+import * as p from '@clack/prompts';
+import pc from 'picocolors';
+import path from 'node:path';
+import { getRegistry, resolveComponentTree } from '../registry.js';
+import { configExists, readConfig } from '../utils/config.js';
+import { collectNpmDependencies, copyComponents, getMissingDependencies } from '../utils/copy.js';
+import { installPackages } from '../utils/deps.js';
+import { runInit } from './init.js';
+const USAGE_HINTS = {
+    toastsystem: 'Envolvé tu app en <ToastProvider> (ver ToastSystem.tsx).',
+    colorthememanager: 'Requiere las variables CSS de tema en tu index.css.',
+    themeswitcher: 'Asegurate de tener la clase .dark en <html> para modo oscuro.',
+};
+function cancel(message, embed) {
+    if (embed)
+        return;
+    p.cancel(message);
+    process.exit(0);
+}
+export async function runAdd(componentArgs, cwd = process.cwd(), options) {
+    const embed = options?.embed ?? false;
+    if (!configExists(cwd)) {
+        p.log.warn('No existe alexui.json. Ejecutá alexui init primero.');
+        const shouldInit = await p.confirm({ message: '¿Querés inicializar ahora?', initialValue: true });
+        if (p.isCancel(shouldInit) || !shouldInit) {
+            cancel('Operación cancelada.', embed);
+            return;
+        }
+        await runInit(cwd, { embed: true });
+    }
+    const config = readConfig(cwd);
+    const registry = getRegistry();
+    let selectedIds = componentArgs.map((id) => id.toLowerCase());
+    if (selectedIds.length === 0) {
+        const picked = await p.multiselect({
+            message: 'Seleccioná componentes para agregar',
+            options: registry.components.map((c) => ({
+                value: c.id,
+                label: c.title,
+                hint: `${c.group} · ${c.category}`,
+            })),
+            required: true,
+        });
+        if (p.isCancel(picked)) {
+            cancel('Operación cancelada.', embed);
+            return;
+        }
+        selectedIds = picked;
+    }
+    const unknown = selectedIds.filter((id) => !registry.components.some((c) => c.id === id));
+    if (unknown.length > 0) {
+        p.log.error(`Componentes no encontrados: ${unknown.join(', ')}`);
+        p.log.info(`Usá "alexui list" para ver los ${registry.componentCount} disponibles.`);
+        if (!embed)
+            process.exit(1);
+        return;
+    }
+    const tree = resolveComponentTree(selectedIds);
+    const targetDir = path.join(cwd, config.componentDir);
+    const internalExtras = tree.filter((c) => !selectedIds.includes(c.id));
+    if (!embed) {
+        p.intro(pc.bgCyan(pc.black(` Agregando ${selectedIds.length} componente(s) `)));
+    }
+    else {
+        p.log.step(pc.cyan(`Agregando ${selectedIds.map((id) => pc.white(id)).join(pc.dim(', '))}`));
+    }
+    if (internalExtras.length > 0) {
+        p.log.info(`Dependencias internas: ${internalExtras.map((c) => pc.dim(c.id)).join(', ')}`);
+    }
+    const overwrite = options?.overwrite ?? false;
+    const spinner = p.spinner();
+    spinner.start('Copiando archivos…');
+    const result = copyComponents(tree, targetDir, overwrite);
+    spinner.stop(overwrite ? 'Archivos actualizados' : 'Archivos copiados');
+    for (const file of result.created) {
+        p.log.success(`${pc.dim(config.componentDir + '/')} ${pc.white(file)}`);
+    }
+    for (const file of result.skipped) {
+        p.log.warn(`Omitido ${pc.dim(file)} ${pc.dim('(ya existe)')}`);
+    }
+    const npmDeps = collectNpmDependencies(tree);
+    const missing = getMissingDependencies(npmDeps, cwd);
+    if (missing.length > 0) {
+        p.log.step(`Dependencias npm: ${missing.map((d) => pc.cyan(d)).join(', ')}`);
+        const shouldInstall = options?.yes ?? await p.confirm({
+            message: '¿Instalar dependencias faltantes?',
+            initialValue: true,
+        });
+        if (!p.isCancel(shouldInstall) && shouldInstall) {
+            const installSpinner = p.spinner();
+            installSpinner.start('Instalando paquetes…');
+            const ok = installPackages(missing, cwd);
+            installSpinner.stop(ok ? 'Dependencias instaladas' : 'Error al instalar');
+            if (!ok)
+                p.log.warn('Instalalas manualmente: ' + missing.join(' '));
+        }
+    }
+    const hints = selectedIds
+        .map((id) => USAGE_HINTS[id])
+        .filter(Boolean);
+    if (hints.length > 0) {
+        p.note(hints.join('\n'), 'Notas de uso');
+    }
+    if (embed) {
+        p.log.success(`${tree.length} archivo(s) en ${pc.cyan(config.componentDir)}`);
+    }
+    else {
+        p.outro(pc.green(`¡Listo! ${tree.length} archivo(s) en ${config.componentDir}`));
+    }
+}

package/dist/commands/init.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export interface InitOptions {
+    /** Modo embebido en TUI: sin intro/outro y sin exit en cancelación */
+    embed?: boolean;
+}
+export declare function runInit(cwd?: string, options?: InitOptions): Promise<void>;

package/dist/commands/init.js ADDED Viewed

@@ -0,0 +1,76 @@
+import * as p from '@clack/prompts';
+import pc from 'picocolors';
+import path from 'node:path';
+import { DEFAULT_CONFIG, writeConfig } from '../utils/config.js';
+import { hasReactProject, ensureDir } from '../utils/project.js';
+import { applyThemeCss } from '../utils/theme.js';
+function cancel(message, embed) {
+    if (embed)
+        return;
+    p.cancel(message);
+    process.exit(0);
+}
+export async function runInit(cwd = process.cwd(), options) {
+    const embed = options?.embed ?? false;
+    if (!embed) {
+        p.intro(pc.bgCyan(pc.black(' AlexUI Init ')));
+    }
+    else {
+        p.log.step(pc.cyan('Inicializando proyecto…'));
+    }
+    if (!hasReactProject(cwd)) {
+        p.log.warn('No se detectó React en package.json. Necesitarás React + Tailwind.');
+    }
+    const componentDir = await p.text({
+        message: '¿Dónde guardar los componentes?',
+        placeholder: DEFAULT_CONFIG.componentDir,
+        defaultValue: DEFAULT_CONFIG.componentDir,
+    });
+    if (p.isCancel(componentDir)) {
+        cancel('Inicialización cancelada.', embed);
+        return;
+    }
+    const cssPath = await p.text({
+        message: '¿Ruta del CSS principal (Tailwind)?',
+        placeholder: DEFAULT_CONFIG.tailwind.css,
+        defaultValue: DEFAULT_CONFIG.tailwind.css,
+    });
+    if (p.isCancel(cssPath)) {
+        cancel('Inicialización cancelada.', embed);
+        return;
+    }
+    const setupTheme = await p.confirm({
+        message: '¿Agregar variables de tema AlexUI al CSS?',
+        initialValue: true,
+    });
+    if (p.isCancel(setupTheme)) {
+        cancel('Inicialización cancelada.', embed);
+        return;
+    }
+    const config = {
+        ...DEFAULT_CONFIG,
+        componentDir: String(componentDir),
+        tailwind: {
+            ...DEFAULT_CONFIG.tailwind,
+            css: String(cssPath),
+        },
+    };
+    const spinner = p.spinner();
+    spinner.start('Escribiendo configuración…');
+    writeConfig(config, cwd);
+    ensureDir(path.join(cwd, config.componentDir));
+    if (setupTheme) {
+        const result = applyThemeCss(config.tailwind.css, cwd);
+        spinner.stop(result === 'created' ? 'CSS y tema creados'
+            : result === 'merged' ? 'Tema fusionado al CSS'
+                : 'Configuración guardada');
+    }
+    else {
+        spinner.stop('Configuración guardada');
+    }
+    p.log.success(`alexui.json ${pc.dim('→')} ${pc.cyan(config.componentDir)}`);
+    if (!embed) {
+        p.note(`alexui --cwd ./mi-app\nalexui add dock\nalexui list`, 'Próximos pasos');
+        p.outro(pc.green('¡Proyecto listo para AlexUI!'));
+    }
+}

package/dist/commands/list.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare function runList(filter?: string): void;

package/dist/commands/list.js ADDED Viewed

@@ -0,0 +1,32 @@
+import pc from 'picocolors';
+import { getRegistry } from '../registry.js';
+export function runList(filter) {
+    const registry = getRegistry();
+    let items = registry.components;
+    if (filter) {
+        const q = filter.toLowerCase();
+        items = items.filter((c) => c.id.includes(q) ||
+            c.title.toLowerCase().includes(q) ||
+            c.category.includes(q) ||
+            c.group.includes(q));
+    }
+    console.log(pc.bold(`\nAlexUI ${registry.version} — ${items.length} componentes\n`));
+    const grouped = new Map();
+    for (const comp of items) {
+        const key = `${comp.group} / ${comp.category}`;
+        if (!grouped.has(key))
+            grouped.set(key, []);
+        grouped.get(key).push(comp);
+    }
+    for (const [group, comps] of [...grouped.entries()].sort()) {
+        console.log(pc.cyan(group));
+        for (const comp of comps) {
+            const deps = comp.npmDependencies.length > 0 ? pc.dim(` [${comp.npmDependencies.join(', ')}]`) : '';
+            const internal = comp.internalDependencies.length > 0
+                ? pc.dim(` +${comp.internalDependencies.join(', ')}`)
+                : '';
+            console.log(`  ${pc.green(comp.id.padEnd(22))} ${comp.title}${deps}${internal}`);
+        }
+        console.log('');
+    }
+}

package/dist/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ #!/usr/bin/env node
2	+ export {};

package/dist/index.js ADDED Viewed

@@ -0,0 +1,60 @@
+#!/usr/bin/env node
+import { Command } from 'commander';
+import { runAdd } from './commands/add.js';
+import { runInit } from './commands/init.js';
+import { runList } from './commands/list.js';
+import { getRegistry } from './registry.js';
+import { runTui } from './tui/main.js';
+import { parseCwdFromArgs, resolveProjectDir } from './utils/cwd.js';
+const registry = getRegistry();
+const { cwd: cwdArg, rest: args } = parseCwdFromArgs(process.argv.slice(2));
+let projectDir;
+try {
+    projectDir = resolveProjectDir(cwdArg);
+}
+catch (error) {
+    console.error(error instanceof Error ? error.message : error);
+    process.exit(1);
+}
+const program = new Command();
+program
+    .name('alexui')
+    .description('CLI — AlexUI by Alexis Jardin: componentes glassmorphic para React')
+    .version(registry.version)
+    .option('-C, --cwd <path>', 'Directorio del proyecto destino (por defecto: carpeta actual)');
+program
+    .command('tui')
+    .description('Abrir el modo interactivo (TUI)')
+    .action(async () => {
+    await runTui(projectDir);
+});
+program
+    .command('init')
+    .description('Inicializar AlexUI en el proyecto actual')
+    .action(async () => {
+    await runInit(projectDir);
+});
+program
+    .command('add')
+    .description('Agregar uno o más componentes')
+    .argument('[components...]', 'IDs de componentes (ej: dock badge loginform)')
+    .option('-y, --yes', 'Instalar dependencias sin preguntar')
+    .option('--overwrite', 'Sobrescribir archivos existentes')
+    .action(async (components, options) => {
+    await runAdd(components, projectDir, options);
+});
+program
+    .command('list')
+    .description('Listar componentes disponibles')
+    .argument('[filter]', 'Filtrar por id, título o categoría')
+    .action((filter) => {
+    runList(filter);
+});
+const knownCommands = new Set(['tui', 'init', 'add', 'list']);
+const isCommandMode = args.some((arg) => knownCommands.has(arg) || arg === '--help' || arg === '-h' || arg === '--version' || arg === '-V');
+if (!isCommandMode) {
+    await runTui(projectDir);
+}
+else {
+    program.parse(['node', 'alexui', ...args], { from: 'user' });
+}

package/dist/registry.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import type { RegistryComponent, RegistryManifest } from './types.js';
+export declare function getRegistry(): RegistryManifest;
+export declare function getComponentsDir(): string;
+export declare function getTemplatesDir(): string;
+export declare function findComponent(id: string): RegistryComponent | undefined;
+export declare function resolveComponentTree(ids: string[]): RegistryComponent[];

package/dist/registry.js ADDED Viewed

@@ -0,0 +1,38 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+const pkgRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+let cached = null;
+export function getRegistry() {
+    if (!cached) {
+        const raw = fs.readFileSync(path.join(pkgRoot, 'registry.json'), 'utf8');
+        cached = JSON.parse(raw);
+    }
+    return cached;
+}
+export function getComponentsDir() {
+    return path.join(pkgRoot, 'components');
+}
+export function getTemplatesDir() {
+    return path.join(pkgRoot, 'templates');
+}
+export function findComponent(id) {
+    const registry = getRegistry();
+    return registry.components.find((c) => c.id === id.toLowerCase());
+}
+export function resolveComponentTree(ids) {
+    const registry = getRegistry();
+    const byId = new Map(registry.components.map((c) => [c.id, c]));
+    const resolved = new Map();
+    const visit = (id) => {
+        const comp = byId.get(id.toLowerCase());
+        if (!comp || resolved.has(comp.id))
+            return;
+        for (const dep of comp.internalDependencies)
+            visit(dep);
+        resolved.set(comp.id, comp);
+    };
+    for (const id of ids)
+        visit(id);
+    return [...resolved.values()];
+}

package/dist/tui/browse.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export declare function browseCatalog(cwd: string): Promise<void>;
+export declare function searchComponents(cwd: string): Promise<void>;
+export declare function listCatalogInTui(): Promise<void>;

package/dist/tui/browse.js ADDED Viewed

@@ -0,0 +1,139 @@
+import * as p from '@clack/prompts';
+import pc from 'picocolors';
+import { findComponent, getRegistry } from '../registry.js';
+import { runAdd } from '../commands/add.js';
+import { categoryLabel, componentSelectOptions, formatCatalogGroup, formatComponentDetail, formatComponentDetailTitle, formatSearchResults, } from './format.js';
+import { categoryIcon, icon } from './theme.js';
+import { sectionHeader } from './panels.js';
+function filterComponents(filter) {
+    const { components } = getRegistry();
+    if (filter.type === 'all')
+        return components;
+    if (filter.type === 'group')
+        return components.filter((c) => c.group === filter.group);
+    return components.filter((c) => c.category === filter.category);
+}
+function filterLabel(filter) {
+    if (filter.type === 'all')
+        return 'Todos';
+    if (filter.type === 'group')
+        return filter.group === 'completos' ? 'Completos' : 'Individuales';
+    return categoryLabel(filter.category);
+}
+async function pickBrowseFilter() {
+    sectionHeader('Explorar catálogo');
+    const filterType = await p.select({
+        message: 'Filtrar por',
+        options: [
+            { value: 'all', label: `${icon.list}  Todos`, hint: `${getRegistry().componentCount} componentes` },
+            { value: 'completos', label: `${icon.complete}  Completos`, hint: 'templates y compuestos' },
+            { value: 'individuales', label: `${icon.atomic}  Individuales`, hint: 'átomos y utilidades' },
+            { value: 'category', label: `${icon.browse}  Por categoría`, hint: 'entradas, tablas…' },
+        ],
+    });
+    if (p.isCancel(filterType))
+        return null;
+    if (filterType === 'all')
+        return { type: 'all' };
+    if (filterType === 'completos')
+        return { type: 'group', group: 'completos' };
+    if (filterType === 'individuales')
+        return { type: 'group', group: 'individuales' };
+    const categories = [...new Set(getRegistry().components.map((c) => c.category))].sort();
+    const category = await p.select({
+        message: 'Categoría',
+        options: categories.map((cat) => ({
+            value: cat,
+            label: `${categoryIcon(cat)}  ${categoryLabel(cat)}`,
+            hint: `${getRegistry().components.filter((c) => c.category === cat).length}`,
+        })),
+    });
+    if (p.isCancel(category))
+        return null;
+    return { type: 'category', category: String(category) };
+}
+async function showComponentDetail(comp, cwd) {
+    p.note(formatComponentDetail(comp), formatComponentDetailTitle(comp));
+    const action = await p.select({
+        message: comp.title,
+        options: [
+            { value: 'add', label: `${icon.add}  Agregar al proyecto`, hint: comp.file },
+            { value: 'back', label: `${icon.back}  Volver a la lista` },
+            { value: 'menu', label: `${icon.exit}  Menú principal` },
+        ],
+    });
+    if (p.isCancel(action) || action === 'back')
+        return 'back';
+    if (action === 'menu')
+        return 'menu';
+    await runAdd([comp.id], cwd, { embed: true });
+    return 'back';
+}
+async function browseList(components, cwd, filterName) {
+    if (components.length === 0) {
+        p.log.warn('No hay componentes con ese filtro.');
+        return;
+    }
+    p.log.info(pc.dim(`${filterName} · ${components.length} resultados`));
+    while (true) {
+        const picked = await p.select({
+            message: `Componentes`,
+            options: [
+                ...componentSelectOptions(components),
+                { value: '__back__', label: pc.dim(`${icon.back}  Volver al menú`) },
+            ],
+        });
+        if (p.isCancel(picked) || picked === '__back__')
+            return;
+        const comp = findComponent(String(picked));
+        if (!comp)
+            continue;
+        const next = await showComponentDetail(comp, cwd);
+        if (next === 'menu')
+            return;
+    }
+}
+export async function browseCatalog(cwd) {
+    const filter = await pickBrowseFilter();
+    if (!filter)
+        return;
+    await browseList(filterComponents(filter), cwd, filterLabel(filter));
+}
+export async function searchComponents(cwd) {
+    sectionHeader('Buscar');
+    const query = await p.text({
+        message: 'Término de búsqueda',
+        placeholder: 'dock, badge, tabla, login…',
+    });
+    if (p.isCancel(query) || !String(query).trim())
+        return;
+    const q = String(query).toLowerCase();
+    const results = getRegistry().components.filter((c) => c.id.includes(q) ||
+        c.title.toLowerCase().includes(q) ||
+        c.category.includes(q) ||
+        c.group.includes(q));
+    console.log(formatSearchResults(String(query), results.length));
+    if (results.length === 0)
+        return;
+    if (results.length === 1) {
+        await showComponentDetail(results[0], cwd);
+        return;
+    }
+    await browseList(results, cwd, `Búsqueda: "${query}"`);
+}
+export async function listCatalogInTui() {
+    sectionHeader('Catálogo completo');
+    const registry = getRegistry();
+    const grouped = new Map();
+    for (const comp of registry.components) {
+        const key = `${comp.group} / ${categoryLabel(comp.category)}`;
+        if (!grouped.has(key))
+            grouped.set(key, []);
+        grouped.get(key).push(`${categoryIcon(comp.category)} ${comp.id} — ${comp.title}`);
+    }
+    const body = [...grouped.entries()]
+        .sort(([a], [b]) => a.localeCompare(b))
+        .map(([group, lines]) => formatCatalogGroup(group, lines))
+        .join('\n\n');
+    p.note(body, `${icon.list} ${registry.componentCount} componentes`);
+}

package/dist/tui/format.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { RegistryComponent } from '../types.js';
+export declare function categoryLabel(category: string): string;
+export declare function formatComponentDetail(comp: RegistryComponent): string;
+export declare function formatComponentDetailTitle(comp: RegistryComponent): string;
+export declare function componentSelectOptions(components: RegistryComponent[]): {
+    value: string;
+    label: string;
+    hint: string;
+}[];
+export declare function formatCatalogGroup(group: string, lines: string[]): string;
+export declare function formatSearchResults(query: string, count: number): string;

package/dist/tui/format.js ADDED Viewed

@@ -0,0 +1,52 @@
+import pc from 'picocolors';
+import { categoryIcon, depPills, groupBadge, icon } from './theme.js';
+const CATEGORY_LABELS = {
+    entradas: 'Entradas',
+    estructura: 'Estructura',
+    feedback: 'Feedback',
+    multimedia: 'Multimedia',
+    animaciones: 'Animaciones',
+    tablas: 'Tablas',
+    complejos: 'Complejos',
+};
+export function categoryLabel(category) {
+    return CATEGORY_LABELS[category] ?? category;
+}
+export function formatComponentDetail(comp) {
+    const cat = categoryLabel(comp.category);
+    const lines = [
+        groupBadge(comp.group) + '  ' + pc.dim(`${categoryIcon(comp.category)} ${cat}`),
+        '',
+        pc.bold(pc.white(comp.title)),
+        pc.dim(`  ${comp.id}`) + pc.dim('  ·  ') + pc.dim(comp.file),
+        '',
+        pc.dim('  ') + comp.description,
+        '',
+        pc.dim('  ') + pc.bold('Dependencias npm'),
+        '  ' + depPills(comp.npmDependencies, 'npm'),
+    ];
+    if (comp.internalDependencies.length > 0) {
+        lines.push('', pc.dim('  ') + pc.bold('Se copian automáticamente'), '  ' + depPills(comp.internalDependencies, 'internal'));
+    }
+    return lines.join('\n');
+}
+export function formatComponentDetailTitle(comp) {
+    return `${icon.browse} ${comp.id}`;
+}
+export function componentSelectOptions(components) {
+    return components.map((c) => ({
+        value: c.id,
+        label: `${categoryIcon(c.category)} ${c.title}`,
+        hint: `${c.group === 'completos' ? 'completo' : 'atómico'} · ${categoryLabel(c.category)}`,
+    }));
+}
+export function formatCatalogGroup(group, lines) {
+    return `${pc.magenta(icon.list)} ${pc.bold(pc.cyan(group))}\n${lines.map((l) => `  ${pc.white(l)}`).join('\n')}`;
+}
+export function formatSearchResults(query, count) {
+    if (count === 0)
+        return pc.yellow(`  Sin resultados para "${query}"`);
+    if (count === 1)
+        return pc.green(`  1 coincidencia para "${query}"`);
+    return pc.green(`  ${count} coincidencias para "${query}"`);
+}

package/dist/tui/main.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare function runTui(initialCwd?: string): Promise<void>;

package/dist/tui/main.js ADDED Viewed

@@ -0,0 +1,86 @@
+import * as p from '@clack/prompts';
+import pc from 'picocolors';
+import { getRegistry } from '../registry.js';
+import { runAdd } from '../commands/add.js';
+import { runInit } from '../commands/init.js';
+import { resolveProjectDir } from '../utils/cwd.js';
+import { browseCatalog, listCatalogInTui, searchComponents } from './browse.js';
+import { categoryLabel } from './format.js';
+import { menuOptions, printProjectPanel, printWelcome, sectionHeader } from './panels.js';
+import { icon } from './theme.js';
+async function changeProjectDir(current) {
+    sectionHeader('Cambiar proyecto');
+    const next = await p.text({
+        message: 'Ruta absoluta o relativa del proyecto',
+        placeholder: current,
+        defaultValue: current,
+        validate: (value) => {
+            if (!value?.trim())
+                return 'Ingresá una ruta';
+            try {
+                resolveProjectDir(value);
+                return undefined;
+            }
+            catch (error) {
+                return error instanceof Error ? error.message : 'Ruta inválida';
+            }
+        },
+    });
+    if (p.isCancel(next))
+        return current;
+    return resolveProjectDir(String(next));
+}
+async function quickAdd(cwd) {
+    sectionHeader('Agregar componentes');
+    const registry = getRegistry();
+    const picked = await p.multiselect({
+        message: 'Seleccioná uno o más',
+        options: registry.components.map((c) => ({
+            value: c.id,
+            label: c.title,
+            hint: `${c.group === 'completos' ? 'completo' : 'atómico'} · ${categoryLabel(c.category)}`,
+        })),
+        required: true,
+    });
+    if (p.isCancel(picked))
+        return;
+    await runAdd(picked, cwd, { embed: true });
+}
+export async function runTui(initialCwd = process.cwd()) {
+    let cwd = resolveProjectDir(initialCwd);
+    printWelcome(cwd);
+    while (true) {
+        const action = await p.select({
+            message: pc.bold('Menú principal'),
+            options: menuOptions(cwd),
+        });
+        if (p.isCancel(action) || action === 'exit')
+            break;
+        console.log('');
+        switch (action) {
+            case 'init':
+                await runInit(cwd, { embed: true });
+                printProjectPanel(cwd, `${icon.ok} Proyecto actualizado`);
+                break;
+            case 'add':
+                await quickAdd(cwd);
+                break;
+            case 'browse':
+                await browseCatalog(cwd);
+                break;
+            case 'search':
+                await searchComponents(cwd);
+                break;
+            case 'list':
+                await listCatalogInTui();
+                break;
+            case 'chdir':
+                cwd = await changeProjectDir(cwd);
+                printProjectPanel(cwd, `${icon.chdir} Nuevo destino`);
+                break;
+        }
+        console.log('');
+    }
+    const registry = getRegistry();
+    p.outro(pc.magenta(icon.logo) + pc.dim(' AlexUI') + pc.green(' · ¡Hasta luego!') + pc.dim(`  v${registry.version}`));
+}

package/dist/tui/panels.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+export declare function renderProjectPanel(cwd: string): string;
+export declare function printWelcome(cwd: string): void;
+export declare function printProjectPanel(cwd: string, title?: string): void;
+export declare function menuOptions(cwd: string): {
+    value: string;
+    label: string;
+    hint: string;
+}[];
+export declare function sectionHeader(title: string): void;