ansimax 1.0.0 → 1.1.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.
package/README.es.md CHANGED
@@ -1,629 +1,697 @@
1
- <div align="center">
2
-
3
- <img src="media/ansimax.png" alt="Ansimax" width="180"/>
4
-
5
- # Ansimax
6
-
7
- ### La librería definitiva para crear interfaces de consola en Node.js
8
-
9
- Colores • Gradientes • Animaciones • ASCII Art • Pixel Art • Componentes • Temas
10
-
11
- [![status](https://img.shields.io/badge/status-unreleased-orange?style=flat-square)](#)
12
- [![License](https://img.shields.io/badge/license-MIT-green.svg?style=flat-square)](LICENSE)
13
- [![TypeScript](https://img.shields.io/badge/TypeScript-strict-blue.svg?style=flat-square)](tsconfig.json)
14
- [![Coverage](https://img.shields.io/badge/coverage-100%25-brightgreen.svg?style=flat-square)](#)
15
- [![Tests](https://img.shields.io/badge/tests-750%2B%20passing-brightgreen.svg?style=flat-square)](#)
16
- [![Zero deps](https://img.shields.io/badge/dependencies-0-brightgreen.svg?style=flat-square)](#)
17
-
18
- [English](README.md) · **Español**
19
-
20
- </div>
21
-
22
- ---
23
-
24
- ## 🎬 Vista previa en vivo
25
-
26
- Mira Ansimax en acción — todas las animaciones y loaders corriendo en vivo:
27
-
28
- ### Animaciones
29
-
30
- https://github.com/Brashkie/ansimax/raw/main/media/animations.mp4
31
-
32
- ### Loaders
33
-
34
- https://github.com/Brashkie/ansimax/raw/main/media/loaders.mp4
35
-
36
- > 💡 GitHub renderiza estos MP4 como reproductores de video integrados al subir el repo. O ejecútalos localmente con `npx tsx examples/animations.ts` y `npx tsx examples/loaders.ts`.
37
-
38
- ---
39
-
40
- ## 🌟 ¿Qué es Ansimax?
41
-
42
- **Ansimax** es una librería moderna de Node.js, sin dependencias, que convierte tu terminal en un lienzo vibrante y dinámico. Combina colores ANSI avanzados, animaciones fluidas, ASCII art, pixel art, componentes interactivos y un sistema de temas — todo en un único paquete escrito en TypeScript estricto y con tipos completos.
43
-
44
- Diseñada para desarrolladores que quieren publicar CLIs que **se sientan** profesionales.
45
-
46
- ---
47
-
48
- ## 💡 ¿Por qué Ansimax?
49
-
50
- - **Cero dependencias** sin bloat, sin vulnerabilidades transitivas, sin conflictos de versiones
51
- - 🎯 **Una librería en lugar de 10** reemplaza `chalk` + `ora` + `cli-table3` + `figlet` + `gradient-string` y más
52
- - 🎨 **Truecolor de 24 bits + gradientes** out of the box fallback automático a 256/16 cuando hace falta
53
- - 🧠 **Pensada para CLIs reales** soporte de `AbortSignal`, cumple `NO_COLOR`, consciente de TTY
54
- - 🛡️ **100% de cobertura de tests** más de 750 tests en cada módulo
55
- - 📘 **TypeScript primero** modo estricto, tipos completos, cero `any`
56
-
57
- ---
58
-
59
- ## 🆚 Comparación
60
-
61
- | Característica | **Ansimax** | chalk | ora | cli-table3 | figlet | gradient-string |
62
- |------------------------|-------------|-------|------|------------|--------|-----------------|
63
- | 16 colores | | | | | | |
64
- | 256 colores | ✅ | ✅ | ➖ | ➖ | ➖ | ➖ |
65
- | Truecolor (24 bits) | ✅ | | | | | ✅ |
66
- | Gradientes | ✅ | | | | | ✅ |
67
- | Animaciones | ✅ | | | | | |
68
- | Spinners | | | | | | |
69
- | Barras de progreso | | | | | | |
70
- | Tablas | | | | | | |
71
- | ASCII art / banners | | | | | ✅ | |
72
- | Pixel art / canvas | ✅ | | | | | |
73
- | Temas | ✅ | | | | | |
74
- | Soporte de AbortSignal | | | | | | |
75
- | Cero dependencias | | | | | | |
76
-
77
- > Ansimax reemplaza más de 5 paquetes separados con una sola librería sin dependencias.
78
-
79
- ---
80
-
81
- ## 📦 Instalación
82
-
83
- ```bash
84
- npm install ansimax
85
- ```
86
-
87
- ```bash
88
- yarn add ansimax # Yarn
89
- pnpm add ansimax # PNPM
90
- bun add ansimax # Bun
91
- ```
92
-
93
- **Requiere Node.js >= 18**
94
-
95
- ---
96
-
97
- ## ⚡ Ejemplo de 30 segundos
98
-
99
- ```ts
100
- import { color } from 'ansimax';
101
-
102
- console.log(color.green('Hola mundo'));
103
- ```
104
-
105
- Eso es todo. Sin config, sin setup. ¿Quieres más? Sigue leyendo.
106
-
107
- ---
108
-
109
- ## 🚀 Inicio rápido
110
-
111
- ```ts
112
- import { color, animate, loader, ascii, components, gradient } from 'ansimax';
113
-
114
- // Colores con estilos apilados (un solo reset ANSI, sin anidamiento)
115
- console.log(color.bold(color.cyan('¡Hola, terminal!')));
116
-
117
- // Texto con gradiente
118
- console.log(gradient('Flujo de color suave', ['#ff6b6b', '#feca57', '#48dbfb']));
119
-
120
- // Typewriter animado
121
- await animate.typewriter('Bienvenido a Ansimax...', { speed: 50 });
122
-
123
- // Spinner con estado de éxito
124
- const stop = loader.spin('Construyendo proyecto...', { color: '#00ff88' });
125
- await hacerTrabajo();
126
- stop('Construido con éxito', true);
127
-
128
- // Banner ASCII
129
- console.log(ascii.banner('ANSIMAX', { font: 'big', align: 'center' }));
130
-
131
- // Tabla como componente
132
- console.log(components.table([
133
- ['Nombre', 'Estado'],
134
- ['Build', ' listo'],
135
- ], { header: true, borderStyle: 'rounded' }));
136
- ```
137
-
138
- ---
139
-
140
- ## Características
141
-
142
- | Módulo | Capacidades |
143
- |---|---|
144
- | 🎨 **Colores** | 16 colores · 256 colores · truecolor de 24 bits · hex · RGB · `compose()` para apilar estilos · soporta `NO_COLOR` |
145
- | 🌈 **Gradientes** | Lineales · multi-stop · arcoíris · rectángulos de gradiente (horizontal, vertical, diagonal, radial) |
146
- | ⚡ **Animaciones** | typewriter · fadeIn · fadeOut · slide · pulse · wave · glitch · reveal — todas con `AbortSignal` |
147
- | 🔄 **Loaders** | 11 estilos de spinner · barras de progreso animadas · ejecución de tareas (secuencial y paralela) · countdowns |
148
- | 🖼️ **ASCII Art** | Dos fuentes · `box()` con 6 estilos de borde · separadores ANSI-aware · banners con gradiente |
149
- | 🎬 **Frames** | Motor de frames · render en vivo · barras de carga · pelota rebotando · **morph** (texto→texto) |
150
- | 🧩 **Componentes** | Tablas · mensajes de estado · badges · barras de progreso · timelines · menús interactivos (single/multi-select) |
151
- | 🌃 **Temas** | 8 temas integrados (Dracula, Nord, Monokai, Cyberpunk, Pastel, Matrix, Ocean, Sunset) · temas personalizados |
152
- | 🖌️ **Pixel Art** | Renderizado half-block · librería de sprites · API de canvas · transformaciones (flip, rotate) |
153
- | 🛠️ **Utilidades** | `truncateAnsi` · `wordWrap` (con soft-break) · `repeatVisible` · `stripAnsi` · matemática de colores |
154
-
155
- ---
156
-
157
- ## 📸 Galería
158
-
159
- ### Colores y gradientes
160
- <div align="center">
161
- <img src="media/colors.png" alt="Colores y gradientes" width="700"/>
162
- </div>
163
-
164
- ```ts
165
- import { color, gradient, rainbow, compose } from 'ansimax';
166
-
167
- // 16, 256 y 24 bits
168
- color.red('básico'); // 16 colores
169
- color.color256(196)('paleta'); // 256 colores
170
- color.hex('#48dbfb')('truecolor'); // 24 bits
171
- color.rgb(255, 100, 50)('personalizado'); // RGB
172
-
173
- // Apila estilos con compose() un solo reset, sin anidamiento
174
- const errorStyle = compose(color.bold, color.red, color.underline);
175
- console.log(errorStyle('ERROR CRÍTICO'));
176
-
177
- // Gradientes con varios stops
178
- gradient('Flujo suave', ['#ff6b6b', '#feca57', '#48dbfb']);
179
- rainbow('¡Texto arcoíris!');
180
- ```
181
-
182
- ---
183
-
184
- ### ASCII Art
185
- <div align="center">
186
- <img src="media/ascii_art.png" alt="ASCII art" width="700"/>
187
- </div>
188
-
189
- ```ts
190
- import { ascii, rainbow } from 'ansimax';
191
-
192
- ascii.big('HELLO'); // fuente grande de 5 líneas
193
- ascii.small('hello'); // fuente compacta de 3 líneas
194
- ascii.banner('ANSIMAX', {
195
- font: 'big',
196
- colorFn: rainbow,
197
- align: 'center',
198
- });
199
-
200
- // Cajas con 6 estilos de borde
201
- ascii.box(rainbow('¡Caja arcoíris!'), {
202
- borderStyle: 'double',
203
- padding: 2,
204
- });
205
-
206
- // Separadores con conciencia ANSI
207
- ascii.divider({
208
- label: color.cyan(' SECCIÓN '),
209
- width: 60,
210
- });
211
- ```
212
-
213
- ---
214
-
215
- ### Componentes
216
- <div align="center">
217
- <img src="media/components.png" alt="Componentes UI" width="700"/>
218
- </div>
219
-
220
- ```ts
221
- import { components } from 'ansimax';
222
-
223
- // Tablas con auto-ajuste de columnas
224
- components.table([
225
- ['Nombre', 'Estado', 'Puntaje'],
226
- ['Ana', '✓ activa', '95'],
227
- ['Luis', '⚠ pendiente', '78'],
228
- ], { header: true, borderStyle: 'rounded' });
229
-
230
- // Mensajes de estado
231
- components.status('success', 'Todos los tests pasaron');
232
- components.status('error', 'Build falló');
233
- components.status('warn', 'Aviso de deprecación');
234
-
235
- // Badges
236
- components.badge('VERSION', 'v1.0.0');
237
- components.badge('BUILD', 'passing');
238
-
239
- // Menús interactivos (con soporte de AbortSignal)
240
- const choice = await components.menu([
241
- 'Instalar dependencias',
242
- 'Ejecutar tests',
243
- 'Desplegar',
244
- 'Cancelar',
245
- ], { multiSelect: false });
246
- ```
247
-
248
- ---
249
-
250
- ### Timeline
251
- <div align="center">
252
- <img src="media/timeline.png" alt="Componente timeline" width="700"/>
253
- </div>
254
-
255
- ```ts
256
- components.timeline([
257
- { label: 'Inicio del proyecto', done: true, time: '10:00' },
258
- { label: 'Pipeline de build', done: true, time: '10:15' },
259
- { label: 'Ejecutar tests', done: true, time: '10:32' },
260
- { label: 'Desplegar a npm', done: false, time: 'pendiente' },
261
- ]);
262
- ```
263
-
264
- ---
265
-
266
- ### Loaders y progreso
267
- <div align="center">
268
- <img src="media/loaders.png" alt="Loaders y barras de progreso" width="700"/>
269
- </div>
270
-
271
- ```ts
272
- import { loader } from 'ansimax';
273
-
274
- // Spinner 11 estilos integrados
275
- const stop = loader.spin('Procesando...', {
276
- type: 'dots', // dots, line, arrow, bounce, star, moon, clock...
277
- color: '#00ff88',
278
- signal: ctrl.signal, // Compatible con AbortSignal
279
- });
280
- stop('Completado', true);
281
-
282
- // Barra de progreso animada
283
- await loader.progressAnimate(50, 'Instalando', {
284
- delay: 30,
285
- color: '#48dbfb',
286
- });
287
-
288
- // Ejecutor de tareas — secuencial o paralelo
289
- await loader.tasks([
290
- { text: 'Obtener deps', fn: async () => fetch() },
291
- { text: 'Compilar src', fn: async () => compile() },
292
- { text: 'Run tests', fn: async () => test() },
293
- ], { parallel: false });
294
-
295
- // Countdown
296
- await loader.countdown(5, {
297
- label: 'Lanzamiento en',
298
- color: '#ffd700',
299
- });
300
- ```
301
-
302
- ---
303
-
304
- ### Pixel Art y Canvas
305
- <div align="center">
306
- <img src="media/pixel_art.png" alt="Pixel art y canvas" width="700"/>
307
- </div>
308
-
309
- ```ts
310
- import { images, createCanvas } from 'ansimax';
311
-
312
- // Sprites integrados: heart, star, smiley, pacman
313
- console.log(images.sprite('heart', { scale: 2 }));
314
-
315
- // Transformaciones de sprites
316
- const flipped = images.flipHorizontal(images.sprites.heart.pixels);
317
- const rotated = images.rotate90(images.sprites.star.pixels);
318
-
319
- // Dibujo en canvas personalizado
320
- const canvas = createCanvas(30, 10);
321
- canvas.drawRect(0, 0, 30, 10, { r: 30, g: 30, b: 50 }, true);
322
- canvas.drawCircle(15, 5, 4, { r: 255, g: 200, b: 0 }, true);
323
- canvas.print();
324
-
325
- // Rectángulos con gradiente — horizontal, vertical, diagonal, radial
326
- images.gradientRect({
327
- width: 50, height: 8,
328
- colors: ['#ff0080', '#7928ca', '#0070f3'],
329
- style: 'radial',
330
- });
331
- ```
332
-
333
- ---
334
-
335
- ### Temas
336
- <div align="center">
337
- <img src="media/themes.png" alt="Temas integrados" width="700"/>
338
- </div>
339
-
340
- ```ts
341
- import { themes, color } from 'ansimax';
342
-
343
- // 8 temas integrados
344
- themes.use('dracula'); // 'dracula', 'nord', 'monokai', 'cyberpunk',
345
- // 'pastel', 'matrix', 'ocean', 'sunset', 'custom'
346
-
347
- const t = themes.current();
348
- console.log(color.hex(t.primary)('Texto primario'));
349
- console.log(color.hex(t.error)('Mensaje de error'));
350
- console.log(color.hex(t.success)('¡Éxito!'));
351
-
352
- // Define tu propio tema
353
- themes.define('mitema', {
354
- primary: '#00ff88',
355
- secondary: '#0070f3',
356
- accent: '#ffd700',
357
- error: '#ff4757',
358
- warning: '#ffa502',
359
- success: '#2ed573',
360
- });
361
- ```
362
-
363
- ---
364
-
365
- ### Empezar
366
- <div align="center">
367
- <img src="media/get_started.png" alt="Empezar" width="700"/>
368
- </div>
369
-
370
- ---
371
-
372
- ## 📚 Ejemplos completos
373
-
374
- La carpeta `examples/` contiene demos ejecutables:
375
-
376
- ```bash
377
- # Demo en TypeScript (todos los módulos)
378
- npx tsx examples/demo.ts
379
-
380
- # Demo en JavaScript (CommonJS)
381
- npm run build
382
- node examples/demo.js
383
-
384
- # Showcase visual (ideal para capturas de pantalla)
385
- npx tsx examples/showcase.ts
386
-
387
- # Demo de animaciones para grabar
388
- npx tsx examples/animations.ts
389
-
390
- # Demo de loaders para grabar
391
- npx tsx examples/loaders.ts
392
- ```
393
-
394
- ---
395
-
396
- ## 🎯 Casos de uso
397
-
398
- - **CLIs profesionales** — herramientas que se sienten pulidas, no básicas
399
- - **Salidas de build** — reemplaza los logs aburridos de `npm run build` por timelines de estado
400
- - **Instaladores interactivos** — menús multi-select con soporte de temas
401
- - **Dashboards en vivo** — motor de frames con auto-refresh y diff rendering
402
- - **Juegos en terminal** — canvas de pixel art + motor de animación
403
- - **Herramientas de desarrollo** — reportes de cobertura, trackers de despliegue, paneles de estado
404
- - **Herramientas educativas**explicaciones animadas directamente en la terminal
405
-
406
- ---
407
-
408
- ## ⚙️ Configuración
409
-
410
- ```ts
411
- import { configure } from 'ansimax';
412
-
413
- configure({
414
- colorMode: 'truecolor', // 'basic' | '256' | 'truecolor'
415
- animationSpeed: 'normal', // 'slow' | 'normal' | 'fast'
416
- });
417
-
418
- // O sobreescribe en runtime
419
- import { setNoColor } from 'ansimax';
420
- setNoColor(true); // desactiva todos los colores (entornos CI)
421
- ```
422
-
423
- Ansimax también respeta la variable de entorno estándar `NO_COLOR` y detecta automáticamente cuando stdout no es un TTY (pipes, logs de CI).
424
-
425
- ---
426
-
427
- ## 🛣️ Roadmap
428
-
429
- Ansimax avanza hacia ser una **plataforma completa de renderizado de terminal**. Esto es lo que ya está hecho y lo que viene:
430
-
431
- ### Fase 1 Fundación del core (actual)
432
-
433
- - [x] **Motor de estilos** ANSI 16 / 256 / truecolor con auto-fallback
434
- - [x] **Helpers de Hex y RGB** con clamping y validación
435
- - [x] **Soporte para `NO_COLOR`** + detección automática de no-TTY
436
- - [x] **Integración con `AbortSignal`** en animaciones y loaders
437
- - [x] **Apilado de estilos con `compose()`** y un solo reset
438
-
439
- ### Fase 2Motor de gradientes
440
-
441
- - [x] Gradientes lineales (multi-stop)
442
- - [x] Presets de arcoíris
443
- - [x] Gradientes radiales (en `gradientRect`)
444
- - [x] Gradientes diagonales
445
- - [ ] **Gradientes animados** (flujo de color a lo largo del tiempo)
446
-
447
- ### 🟡 Fase 3 Motor ASCII
448
-
449
- - [x] Fuentes en bloque (`big`, `small`)
450
- - [x] Banner con gradiente y alineación
451
- - [x] Dibujo de cajas (6 estilos de borde)
452
- - [ ] **Convertidor imagen → ASCII** (con detección de bordes)
453
- - [ ] **Renderizado ASCII a color** (preserva los colores de la imagen)
454
- - [ ] **Dithering de imágenes** para mejor rango tonal
455
- - [ ] **ASCII optimizado para caras** (modo de alto detalle para retratos)
456
-
457
- ### ✅ Fase 4 — Primitivos UI de terminal
458
-
459
- - [x] Tablas (filas irregulares, datos jagged)
460
- - [x] Cajas con múltiples estilos
461
- - [x] Mensajes de estado + badges
462
- - [x] Timelines con estados done/pending
463
- - [x] Menús interactivos (single + multi-select)
464
- - [ ] **Árboles** (colapsables, lazy-loadable)
465
- - [ ] **Paneles** (layouts divididos)
466
- - [ ] **Layouts** (posicionamiento estilo flexbox)
467
-
468
- ### Fase 5 Control de cursor y pantalla
469
-
470
- - [x] Visibilidad del cursor, save/restore, posicionamiento
471
- - [x] Limpieza de pantalla (línea, área, completa)
472
- - [x] Garantías de cleanup con try/finally
473
-
474
- ### Fase 6 Motor de animaciones
475
-
476
- - [x] Typewriter, fadeIn, fadeOut, slide, pulse, wave, glitch, reveal
477
- - [x] Todas compatibles con `AbortSignal`
478
- - [x] Modo `reducedMotion` para accesibilidad
479
- - [x] **Morph de frames** (interpolación texto → texto)
480
-
481
- ### 🟡 Fase 7 — Ecosistema de progreso
482
-
483
- - [x] Spinners (11 estilos) con color y AbortSignal
484
- - [x] Barras de progreso animadas
485
- - [x] Ejecutor de tareas (secuencial + paralelo)
486
- - [x] Countdowns
487
- - [ ] **Progreso anidado** (padre + hijos con rollup)
488
- - [ ] **Estimación de ETA** (promedio móvil + proyección)
489
- - [ ] **Refresco en vivo** sin parpadeo (diff renderer)
490
-
491
- ### 🟡 Fase 8 — Detección de capacidades
492
-
493
- - [x] Detección de TTY (auto-desactivar en pipes/CI)
494
- - [x] Soporte de `NO_COLOR`
495
- - [ ] **Detección de profundidad de color** (16 / 256 / truecolor)
496
- - [ ] **Detección de ancho Unicode** (CJK, emojis)
497
- - [ ] **Base de datos de capacidades** (xterm, iTerm, Windows Terminal...)
498
-
499
- ### 🔴 Fase 9 Renderizado avanzado
500
-
501
- - [ ] **Diff renderer** (solo redibuja regiones modificadas)
502
- - [ ] **Buffer virtual** (componer UI sin escribir a stdout)
503
- - [ ] **Z-index / capas**
504
- - [ ] **Soporte de eventos del mouse**
505
-
506
- ### 🔴 Fase 10 Charts en terminal
507
-
508
- - [ ] Gráficos de barras (horizontal y vertical)
509
- - [ ] Gráficos de líneas (con braille para resolución sub-carácter)
510
- - [ ] Sparklines
511
- - [ ] Heatmaps
512
- - [ ] Charts en streaming en tiempo real
513
-
514
- ### 🔴 Fase 11Sistema de plugins
515
-
516
- - [ ] API de plugins para componentes personalizados
517
- - [ ] Marketplace de temas
518
- - [ ] Registro de fuentes personalizadas
519
- - [ ] Registro comunitario de animaciones
520
-
521
- **Leyenda:** Completo · 🟡 Parcial · 🔴 Planeado
522
-
523
- ---
524
-
525
- ## 🧪 Tests
526
-
527
- Ansimax incluye **750+ tests** y **100% de cobertura de líneas**:
528
-
529
- ```bash
530
- npm test # Ejecuta todos los tests
531
- npm run test:coverage # Reporte de cobertura
532
- npm run typecheck # Check estricto de TypeScript
533
- ```
534
-
535
- ---
536
-
537
- ## 🛠️ Requisitos
538
-
539
- - Node.js **>= 18.0.0**
540
- - Una terminal con soporte de escapes ANSI (cualquier terminal moderno)
541
-
542
- ---
543
-
544
- ## 🏗️ Estructura del proyecto
545
-
546
- ```
547
- ansimax/
548
- ├── src/
549
- │ ├── colors/ # Sistema de colores, gradientes, compose, NO_COLOR
550
- │ ├── animations/ # 7 efectos de animación con AbortSignal
551
- │ ├── ascii/ # Fuentes ASCII, cajas, dividers, banners
552
- │ ├── components/ # Tablas, menús, timelines, badges
553
- │ ├── loaders/ # Spinners, progress, tasks, countdowns
554
- │ ├── frames/ # Motor de frames + morph + presets
555
- │ ├── images/ # Pixel art, sprites, API de canvas
556
- │ ├── themes/ # 8 temas integrados + custom
557
- │ ├── utils/ # Helpers ANSI, math de colores, utils de strings
558
- │ └── index.ts # Barrel del API público
559
- ├── examples/ # Demos ejecutables (TS + JS)
560
- ├── media/ # Capturas y videos para el README
561
- └── dist/ # Build (CJS + ESM + tipos)
562
- ```
563
-
564
- ---
565
-
566
- ## 🤝 Contribuir
567
-
568
- ¡Las contribuciones son bienvenidas! Para empezar:
569
-
570
- 1. Haz **fork** del repo
571
- 2. Crea una rama: `git checkout -b feature/mi-feature`
572
- 3. Añade tests para tus cambios (la barra es 100% de cobertura)
573
- 4. Commit: `git commit -m 'Add: mi feature'`
574
- 5. Push: `git push origin feature/mi-feature`
575
- 6. Abre un Pull Request
576
-
577
- Asegúrate de que:
578
- - Todos los tests pasan: `npm test`
579
- - TypeScript está contento: `npm run typecheck`
580
- - El código sigue el estilo existente
581
-
582
- ---
583
-
584
- ## 🐛 Reportar problemas
585
-
586
- ¿Encontraste un bug o tienes una idea? Abre un [issue](https://github.com/Brashkie/ansimax/issues) — por favor incluye una reproducción mínima.
587
-
588
- ---
589
-
590
- ## ⭐ Apoyar el proyecto
591
-
592
- Si te gusta Ansimax:
593
-
594
- - ⭐ **Dale una estrella al repo** — ayuda a que otros descubran el proyecto
595
- - 🐛 **Reporta bugs** — abre un [issue](https://github.com/Brashkie/ansimax/issues)
596
- - 🚀 **Úsalo en tus proyectos CLI** — es el mejor apoyo posible
597
- - 📢 **Compártelo** tweet, blog, menciónalo a un colega que construya CLIs
598
- - 💬 **Difúndelo** — etiqueta tu CLI con `#ansimax` para que otros encuentren inspiración
599
-
600
- Esto ayuda al proyecto a crecer y le da impulso para añadir las funcionalidades planeadas más rápido.
601
-
602
- ---
603
-
604
- ## 📝 Changelog
605
-
606
- Consulta [CHANGELOG.md](CHANGELOG.md) para el historial de versiones.
607
-
608
- ---
609
-
610
- ## 👨‍💻 Autor
611
-
612
- **Brashkie** · [@Brashkie](https://github.com/Brashkie)
613
-
614
- ---
615
-
616
- ## 📜 Licencia
617
-
618
- [MIT](LICENSE) © 2026 Brashkie
619
-
620
- ---
621
-
622
- **Keywords:** cli, terminal, ansi, colors, gradients, animation, spinner, ascii, ascii-art, pixel-art, progress-bar, loader, components, table, banner, theme, typescript, nodejs, zero-dependencies
623
-
624
- ---
625
-
626
- <div align="center">
627
- <p>Hecho con ❤️ y TypeScript</p>
628
- <p>Si Ansimax te ayuda a crear mejores CLIs, ¡dale una en GitHub!</p>
629
- </div>
1
+ <div align="center">
2
+
3
+ <img src="media/ansimax.png" alt="Logo de Ansimax" width="380"/>
4
+
5
+ ### La librería definitiva de renderizado CLI para Node.js
6
+
7
+ _Colores Gradientes Animaciones ASCII Art Pixel Art • Árboles • Componentes • Temas_
8
+
9
+ [![License](https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat-square)](LICENSE)
10
+ [![npm](https://img.shields.io/badge/npm-v1.1.0-cb3837.svg?style=flat-square)](https://www.npmjs.com/package/ansimax)
11
+ [![TypeScript](https://img.shields.io/badge/TypeScript-strict-3178c6.svg?style=flat-square)](tsconfig.json)
12
+ [![Coverage](https://img.shields.io/badge/coverage-98%25-brightgreen.svg?style=flat-square)](#testing)
13
+ [![Tests](https://img.shields.io/badge/tests-1700%2B%20passing-brightgreen.svg?style=flat-square)](#testing)
14
+ [![Zero deps](https://img.shields.io/badge/dependencies-0-brightgreen.svg?style=flat-square)](#)
15
+ [![Bundle](https://img.shields.io/badge/bundle-%3C100kb-brightgreen.svg?style=flat-square)](#)
16
+
17
+ [English](README.md) · **Español**
18
+
19
+ </div>
20
+
21
+ ---
22
+
23
+ ## 🌟 ¿Qué es Ansimax?
24
+
25
+ Ansimax es una **librería de renderizado todo-en-uno** para construir interfaces de terminal hermosas en Node.js. Un solo paquete reemplaza un stack de más de 8 dependencias — colores, gradientes, ASCII art, spinners, barras de progreso, tablas, menús, árboles, temas, pixel art — combinadas en una única API coherente de TypeScript con **cero dependencias en runtime**.
26
+
27
+ ```bash
28
+ npm install ansimax
29
+ ```
30
+
31
+ ```ts
32
+ import { color, gradient, ascii, loader } from 'ansimax';
33
+
34
+ console.log(ascii.banner('hola', {
35
+ colorFn: (t) => gradient(t, ['#ff79c6', '#bd93f9', '#8be9fd']),
36
+ }));
37
+
38
+ const stop = loader.spin('Construyendo proyecto', { color: '#bd93f9' });
39
+ await algunaTareaAsync();
40
+ stop('Build completado', true);
41
+ ```
42
+
43
+ ---
44
+
45
+ ## 💡 ¿Por qué Ansimax?
46
+
47
+ | Sin Ansimax | Con Ansimax |
48
+ |---|---|
49
+ | Instalar 8+ paquetes: `chalk`, `gradient-string`, `figlet`, `ora`, `cli-progress`, `cli-table3`, `boxen`, `inquirer` | Una sola instalación: `ansimax` |
50
+ | Mezclar APIs incompatibles, paradigmas diferentes, tipos en conflicto | API funcional consistente, fuente única de verdad |
51
+ | Sin sistema de temas coherente entre paquetes | Temas integrados (Dracula, Nord, Matrix, Cyberpunk, +5) |
52
+ | Limpieza manual del cursor, sin protección ante crashes | Cursor con conteo de referencias + handlers de crash integrados |
53
+ | Sin soporte de `AbortSignal` en la mayoría de libs CLI | Toda animación, loader y prompt es abortable |
54
+ | Cada lib trae su propia lógica de fallback en runtime | `NO_COLOR` / `FORCE_COLOR` / detección de TTY unificada |
55
+ | Sin límites de memoria en cachés de color | Cachés LRU acotadas en todo el código (sin fugas bajo carga) |
56
+
57
+ ---
58
+
59
+ ## 🆚 Comparación con el ecosistema Node.js
60
+
61
+ Ansimax reemplaza un stack de dependencias de librerías populares de Node.js con un solo paquete coherente y tipado:
62
+
63
+ | Característica | chalk | gradient-string | ora | cli-progress | figlet | boxen | inquirer | cli-table3 | **Ansimax** |
64
+ |---|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
65
+ | Colores básicos + 256 | ✅ | | | | | — | — | — | |
66
+ | Truecolor con fallback adaptativo | ✅ | | | | | — | — | — | |
67
+ | Gradientes multi-stop | — | | | | | | | — | ✅ |
68
+ | **Gradientes animados** | | | | | | | — | — | 🔜 |
69
+ | Banners ASCII | | | | | | | — | — | ✅ |
70
+ | Registro de fuentes personalizadas | | | | | parcial | | — | — | ✅ |
71
+ | Cajas con múltiples estilos | | | | | — | | | — | ✅ |
72
+ | Spinners (varios estilos) | — | — | | | | | | | ✅ (11 estilos) |
73
+ | Barras de progreso animadas | — | — | — | | | | | | |
74
+ | **Tareas jerárquicas/paralelas** | | | | | | | | — | ✅ |
75
+ | Tablas (multi-línea, conscientes de ANSI) | | | | | | | — | ✅ | ✅ |
76
+ | Menús interactivos + multi-select | — | — | — | — | — | — | ✅ | — | ✅ |
77
+ | **Árboles con detección de ciclos** | | | | — | — | — | — | — | ✅ |
78
+ | **Pixel art + canvas + sprites** | — | — | — | — | — | — | — | — | ✅ |
79
+ | **Sistema de temas + aislamiento por instancia** | — | — | — | — | — | — | — | — | ✅ |
80
+ | `AbortSignal` en todas partes | — | — | parcial | — | — | — | parcial | — | ✅ |
81
+ | Soporte de `NO_COLOR` | ✅ | parcial | parcial | — | — | — | — | — | ✅ |
82
+ | TypeScript-first | parcial | parcial | ✅ | parcial | parcial | ✅ | parcial | parcial | ✅ |
83
+ | Cero dependencias en runtime | ✅ | — | — | — | — | — | — | — | ✅ |
84
+ | **Tamaño total de instalación** | pequeño | pequeño | medio | medio | medio | pequeño | grande | medio | **< 100 KB** |
85
+
86
+ ---
87
+
88
+ ## 📦 Instalación
89
+
90
+ ```bash
91
+ npm install ansimax
92
+ # o
93
+ pnpm add ansimax
94
+ # o
95
+ yarn add ansimax
96
+ ```
97
+
98
+ **Requisitos:** Node.js ≥ 18. Soporta ESM y CJS. Los ejemplos se publican junto con el paquete — ver [`/examples`](./examples).
99
+
100
+ ---
101
+
102
+ ## ⚡ Ejemplo en 30 segundos
103
+
104
+ ```ts
105
+ import { color, gradient, loader, ascii } from 'ansimax';
106
+
107
+ console.log(ascii.banner('deploy', {
108
+ colorFn: (t) => gradient(t, ['#ff6b6b', '#feca57', '#48dbfb']),
109
+ }));
110
+
111
+ const stop = loader.spin('Construyendo proyecto', { color: '#bd93f9' });
112
+ await algunaTareaAsync();
113
+ stop('Build completado', true); // ✓ + color de éxito
114
+
115
+ console.log(color.green('✓') + ' Listo en ' + color.bold('1.4s'));
116
+ ```
117
+
118
+ ---
119
+
120
+ ## 🚀 Inicio rápido
121
+
122
+ ```ts
123
+ import { configure, color, themes, gradient } from 'ansimax';
124
+
125
+ // Configuración global
126
+ configure({ theme: 'dracula', animationSpeed: 'normal' });
127
+
128
+ // Estilos básicos
129
+ console.log(color.red('error'));
130
+ console.log(color.bold(color.cyan('importante')));
131
+
132
+ // Gradiente multi-stop
133
+ console.log(gradient('texto arcoiris', [
134
+ '#ff5555', '#ffaa00', '#ffff00',
135
+ '#00ff00', '#0099ff', '#cc44ff',
136
+ ]));
137
+
138
+ // Cambiar tema — dispara los subscribers
139
+ themes.use('cyberpunk');
140
+ console.log(themes.primary('primary de cyberpunk'));
141
+ ```
142
+
143
+ ---
144
+
145
+ ## Características
146
+
147
+ - 🎨 **Colores** Truecolor / 256 / básico con fallback adaptativo. Detección de NO_COLOR / FORCE_COLOR / TTY
148
+ - 🌈 **Gradientes** Lineales multi-stop, radiales, diagonales, ángulo arbitrario. Presets personalizados vía `registerPreset`
149
+ - 🔠 **ASCII Art** Banners (fuentes `big`/`small`), cajas (6 estilos), divisores, logos. API de stream + registro de fuentes
150
+ - 🖼️ **Pixel Art** Sprites, alpha blending, gradientes con dithering, canvas con renderizado dirty-rect, modo braille (sub-pixel 2×4)
151
+ - 🌳 **Árboles** API builder + data plana, 4 estilos, colores/iconos por nodo, max-depth, detección de ciclos, algoritmos walk/find/map/filter
152
+ - 🎞️ **Animaciones** Typewriter, fade, slide, pulse, wave, glitch, reveal. Conscientes de AbortSignal, modo reducedMotion
153
+ - **Loaders** 11 estilos de spinner, barras animadas, tareas jerárquicas/paralelas, cuentas regresivas, gestor multi-spinner
154
+ - 🎬 **Frames** — Reproducción secuenciada con pause/resume/seek, renderizador live push-based, timing con corrección de drift, morph
155
+ - 🧱 **Componentes** — Tablas (conscientes de ANSI, celdas multi-línea), badges, líneas de estado, secciones, columnas, timelines, menús interactivos
156
+ - 🎨 **Temas** — 8 built-in (Dracula, Nord, Monokai, Cyberpunk, Pastel, Matrix, Ocean, Sunset). Aislamiento por instancia, listeners `onChange`, helpers `bg*`
157
+ - ⚙️ **Configure** — Config centralizada con subscribers, updates batched, overrides temporales con `withConfig()`, modo strict
158
+ - 🛠️ **Utils** — Primitivas ANSI, control del cursor, hyperlinks de terminal (OSC 8), `setTitle`, `safeJson`, `onResize`, debounce/throttle/memoize
159
+
160
+ ---
161
+
162
+ ## 📸 Showcase
163
+
164
+ ### Colores y Gradientes
165
+
166
+ <img src="media/colors.png" alt="Colores y gradientes" />
167
+
168
+ ```ts
169
+ import { color, gradient } from 'ansimax';
170
+
171
+ color.red('rojo'); color.green('verde'); color.blue('azul');
172
+ color.bold(texto); color.italic(texto); color.underline(texto);
173
+ gradient('fuego a océano', ['#ff6b6b', '#feca57', '#48dbfb']);
174
+ color.rainbow('preset rainbow integrado');
175
+ ```
176
+
177
+ ### ASCII Art
178
+
179
+ <img src="media/ascii_art.png" alt="ASCII art" />
180
+
181
+ ```ts
182
+ import { ascii, gradient } from 'ansimax';
183
+
184
+ ascii.banner('HOLA', {
185
+ font: 'big',
186
+ align: 'center',
187
+ colorFn: (t) => gradient(t, ['#ff79c6', '#bd93f9']),
188
+ });
189
+
190
+ ascii.box('¡Caja arcoiris!', { padding: 1, borderStyle: 'rounded' });
191
+ ```
192
+
193
+ ### Árboles
194
+
195
+ <img src="media/trees.png" alt="Árboles" />
196
+
197
+ ```ts
198
+ import { tree, color } from 'ansimax';
199
+
200
+ const proyecto = tree({ label: 'mi-app', icon: '📦', color: color.bold });
201
+ const src = proyecto.add({ label: 'src', icon: '📁' });
202
+ src.addLeaf({ label: 'index.ts', icon: '📄' });
203
+ src.addLeaf({ label: 'app.ts', icon: '📄' });
204
+
205
+ console.log(proyecto.render({
206
+ style: 'rounded',
207
+ palette: [color.cyan, color.green, color.magenta],
208
+ guideColor: color.dim,
209
+ }));
210
+ ```
211
+
212
+ ### Pixel Art y Canvas
213
+
214
+ <img src="media/pixel_art.png" alt="Pixel art" />
215
+
216
+ ```ts
217
+ import { images, createCanvas, gradientRect } from 'ansimax';
218
+
219
+ // Sprite integrado
220
+ console.log(images.sprite('heart'));
221
+
222
+ // Gradiente suave con dither Bayer
223
+ console.log(gradientRect({
224
+ width: 50, height: 4,
225
+ colors: ['#ff6b6b', '#feca57', '#48dbfb'],
226
+ dither: 'bayer',
227
+ }));
228
+
229
+ // Canvas personalizado
230
+ const c = createCanvas(40, 10);
231
+ c.fill({ r: 18, g: 18, b: 38 });
232
+ c.drawCircle(20, 5, 4, { r: 255, g: 200, b: 0 }, true);
233
+ c.drawSprite(2, 2, images.sprites.star!.pixels);
234
+ c.print();
235
+ ```
236
+
237
+ ### Componentes
238
+
239
+ <img src="media/components.png" alt="Componentes" />
240
+
241
+ ```ts
242
+ import { components, color } from 'ansimax';
243
+
244
+ components.table([
245
+ ['Módulo', 'Estado', 'Cobertura'],
246
+ ['colors', color.green('● listo'), '100%'],
247
+ ['animations', color.green('● listo'), '100%'],
248
+ ['loaders', color.green('● listo'), '100%'],
249
+ ], { borderStyle: 'rounded' });
250
+
251
+ components.badge('VERSION', 'v1.1.0');
252
+ components.badge('BUILD', 'passing');
253
+ ```
254
+
255
+ ### Timeline
256
+
257
+ <img src="media/timeline.png" alt="Timeline" />
258
+
259
+ ```ts
260
+ components.timeline([
261
+ { label: 'Init del proyecto', done: true, time: '10:00' },
262
+ { label: 'Pipeline de build', done: true, time: '10:15' },
263
+ { label: 'Correr tests', done: false, time: '10:32' },
264
+ { label: 'Deploy a npm', done: false },
265
+ ]);
266
+ ```
267
+
268
+ ### Loaders y Progreso
269
+
270
+ ```ts
271
+ import { loader } from 'ansimax';
272
+
273
+ // Spinner con éxito/fallo
274
+ const stop = loader.spin('Cargando...', { color: '#bd93f9' });
275
+ await tarea();
276
+ stop('¡Listo!', true); // ícono verde
277
+
278
+ // Barra de progreso animada
279
+ await loader.progressAnimate(100, 'Descargando', {
280
+ color: '#50fa7b', delay: 25,
281
+ });
282
+
283
+ // Tareas jerárquicas con ejecución paralela
284
+ await loader.tasks([
285
+ { text: 'Build', fn: async () => build(), subtasks: [
286
+ { text: 'TypeScript', fn: async () => tsc() },
287
+ { text: 'Bundle', fn: async () => bundle() },
288
+ ]},
289
+ { text: 'Test', fn: async () => test() },
290
+ ], { parallel: true });
291
+ ```
292
+
293
+ ### Animaciones
294
+
295
+ ```ts
296
+ import { animate, gradient } from 'ansimax';
297
+
298
+ await animate.typewriter('Bienvenido al wizard de deployment...', {
299
+ speed: 30,
300
+ colorFn: (t) => gradient(t, ['#bd93f9', '#ff79c6']),
301
+ });
302
+
303
+ await animate.fadeIn('Carga completa', { duration: 600 });
304
+
305
+ // Carrera de pasos contra timeout — nunca se cuelga
306
+ await animate.parallel([
307
+ async () => await checkNetwork(),
308
+ async () => await checkDatabase(),
309
+ async () => await checkAuth(),
310
+ ], { timeout: 5000 });
311
+ ```
312
+
313
+ ### Temas
314
+
315
+ <img src="media/themes.png" alt="Temas" />
316
+
317
+ ```ts
318
+ import { themes, createTheme } from 'ansimax';
319
+
320
+ // Temas built-in
321
+ themes.use('dracula');
322
+ themes.primary('hola');
323
+
324
+ // Escuchar cambios
325
+ const off = themes.onChange((nuevo, anterior) => {
326
+ console.log(`Tema: ${anterior.name} → ${nuevo.name}`);
327
+ });
328
+
329
+ // Multi-tenant: cada instancia totalmente aislada
330
+ const tenantA = createTheme('nord');
331
+ const tenantB = createTheme('matrix');
332
+ tenantA.register('custom', miDef); // no se filtra a tenantB
333
+ ```
334
+
335
+ ---
336
+
337
+ ## 📚 Ejemplos
338
+
339
+ Siete ejemplos de calidad de producción se publican en el paquete npm y son ejecutables directamente. Los encuentras en [`/examples`](./examples) después de instalar:
340
+
341
+ | Archivo | Qué demuestra |
342
+ |---|---|
343
+ | `trees-basic.ts` | Ejemplo mínimo de árboles — API builder + algoritmos |
344
+ | `01-cli-installer.ts` | Instalador estilo npm-create — banner + tareas jerárquicas + íconos de estado + caja resumen |
345
+ | `02-live-dashboard.ts` | Dashboard en tiempo real — `frames.live` + tabla de servicios + barras con gradiente + `onResize` + limpieza SIGINT |
346
+ | `03-pixel-art-game.ts` | Sprite de cohete rebotando — canvas + alpha blending + gradiente + contador de FPS + loop con corrección de drift |
347
+ | `04-interactive-deploy.ts` | Menú + multi-select + `loader.multi` + `createTheme` + `onConfigChange` |
348
+ | `05-tree-visualizations.ts` | Árboles de filesystem + dependencias + JSON + decisión (`walk` + `measure` extra) |
349
+ | `06-everything-together.ts` | Showcase completo — cada módulo ejercitado en un demo cohesivo |
350
+
351
+ Ejecuta cualquier ejemplo con:
352
+ ```bash
353
+ npx tsx examples/06-everything-together.ts
354
+ ```
355
+
356
+ ---
357
+
358
+ ## 🎯 Casos de uso
359
+
360
+ - **Instaladores y scaffolders CLI** — hermosa experiencia de primer arranque (estilo create-react-app, create-next-app)
361
+ - **Herramientas DevOps** — dashboards de deployment, pipelines de build, monitores de salud
362
+ - **Dev experience** — mejores test runners, output de lint, formateo de errores
363
+ - **Prompts interactivos** — menús, confirmaciones, wizards multi-select
364
+ - **Exploración de datos** — tablas, árboles, charts para workflows terminal-first
365
+ - **Reportes de estado** — progreso en tiempo real, orquestación multi-tarea
366
+ - **Intros ASCII** — launchers de juego, splash screens, banners de login
367
+
368
+ ---
369
+
370
+ ## ⚙️ Configuración
371
+
372
+ La config global afecta cada módulo que la respeta (colores, temas, velocidad de animación, etc.):
373
+
374
+ ```ts
375
+ import { configure, getConfig, withConfig, onConfigKeyChange } from 'ansimax';
376
+
377
+ configure({
378
+ colorMode: 'auto', // 'none' | 'basic' | '256' | 'truecolor' | 'auto'
379
+ animationSpeed: 'normal', // 'slow' | 'normal' | 'fast' | 'instant'
380
+ theme: 'dracula', // cualquier tema registrado
381
+ reducedMotion: false,
382
+ });
383
+
384
+ // Escuchar cambios (por-key evita disparos excesivos)
385
+ const off = onConfigKeyChange('theme', (nuevo, anterior) => {
386
+ console.log(`Tema: ${anterior} → ${nuevo}`);
387
+ });
388
+
389
+ // Override temporal + restauración automática al completar o lanzar
390
+ await withConfig({ animationSpeed: 'fast' }, async () => {
391
+ await correrDemo();
392
+ });
393
+
394
+ // Modo strict captura typos en config
395
+ configure({ unknwnKey: 'x' }, { strict: true }); // lanza RangeError
396
+ ```
397
+
398
+ ---
399
+
400
+ ## 🛣️ Roadmap
401
+
402
+ Ansimax se está construyendo hacia una **plataforma completa de renderizado de terminal** — una respuesta nativa de Node a lo que los desarrolladores de Python obtienen de `rich` + `textual` combinados, con mejoras específicas de Node donde importa.
403
+
404
+ El roadmap apunta intencionalmente y busca superar — gaps que ni siquiera librerías TUI maduras de Python han resuelto completamente: renderers live-diff, gradientes animados, protocolos de imágenes en terminal, y una verdadera capa reactiva.
405
+
406
+ ### ✅ Fase 1 — Fundamento core
407
+ - [x] Motor de estilos — ANSI 16 / 256 / truecolor con fallback adaptativo
408
+ - [x] Helpers Hex + RGB con clamping y validación
409
+ - [x] Soporte `NO_COLOR` / `FORCE_COLOR` + auto-detección no-TTY
410
+ - [x] Integración de `AbortSignal` en animaciones y loaders
411
+ - [x] Stacking de estilos `compose()` con emisión single-reset
412
+ - [x] Caché LRU acotada de escapes (512 entradas, key packed-RGB)
413
+ - [x] Registro de presets personalizados (`registerPreset`, `listPresets`)
414
+
415
+ ### Fase 2 Motor de gradientes
416
+ - [x] Gradientes lineales (multi-stop)
417
+ - [x] Rainbow + 6 presets built-in
418
+ - [x] Gradientes radiales (en `gradientRect`)
419
+ - [x] Gradientes diagonales
420
+ - [x] Gradientes a ángulo arbitrario
421
+ - [x] Dithering Bayer 4×4 para transiciones tonales suaves
422
+ - [x] UX single-stop (comportamiento estilo CSS)
423
+ - [ ] **Gradientes animados** (flujo de color en el tiempo, loops infinitos)
424
+ - [ ] **Curvas de interpolación** (linear / ease-in / ease-out / cubic-bezier)
425
+ - [ ] **Gradientes cónicos** (barrido radial)
426
+
427
+ ### 🟡 Fase 3 — Motor ASCII
428
+ - [x] Fuentes de bloque (`big`, `small`)
429
+ - [x] Banner con gradiente + alineación + coloreado por carácter
430
+ - [x] Dibujo de cajas (6 estilos de borde)
431
+ - [x] Divisores con variantes de estilo
432
+ - [x] Compositor de logos (gradiente + box wrapping)
433
+ - [x] Registro de fuentes personalizadas (`registerFont`, `hasFont`, `listFonts`)
434
+ - [x] API de stream (`ascii.stream()` con AbortSignal)
435
+ - [ ] **Conversor Imagen ASCII** (con detección de bordes, Sobel/Canny)
436
+ - [ ] **Renderizado ASCII en color** (preservar colores de imagen)
437
+ - [ ] **Dithering de imágenes** para mejor rango tonal (Floyd-Steinberg)
438
+ - [ ] **ASCII optimizado para rostros** (modo de alto detalle para retratos)
439
+ - [ ] **Soporte de fuentes figlet** (loader de archivos `.flf` 250+ fuentes de comunidad)
440
+
441
+ ### Fase 4 — Primitivas TUI
442
+ - [x] Tablas (filas irregulares, celdas multi-línea, conscientes de ANSI)
443
+ - [x] Cajas con múltiples estilos
444
+ - [x] Mensajes de estado + badges (con opción de borde)
445
+ - [x] Timelines con estados done/pending
446
+ - [x] Menús interactivos (single + multi-select)
447
+ - [x] Layout de columnas (overflow truncate/wrap)
448
+ - [x] Secciones (cabeceras con gradiente, ancho automático)
449
+ - [x] Árboles (colapsables, max-depth, cycle-safe)
450
+ - [ ] **Panels** (split layouts: hsplit, vsplit)
451
+ - [ ] **Layouts** (posicionamiento estilo flexbox)
452
+ - [ ] **Sistema de grid** (spans column/row inspirados en CSS Grid)
453
+ - [ ] **Renderizado de Markdown** (headings, listas, code blocks, tablas)
454
+ - [ ] **Syntax highlighting** (gramáticas integradas)
455
+ - [ ] **Pretty-printing JSON/YAML** (con límite de profundidad + collapse)
456
+ - [ ] **Integración de logging** (drop-in para `console`/`pino`/`winston`)
457
+
458
+ ### ✅ Fase 5 — Control de cursor y pantalla
459
+ - [x] Visibilidad de cursor, save/restore, posicionamiento, navegación por líneas
460
+ - [x] Limpieza de pantalla (línea, área, completa)
461
+ - [x] Cursor con conteo de referencias (calls superpuestas son seguras)
462
+ - [x] Restauración crash-safe (handlers de exit/SIGINT/SIGTERM)
463
+ - [x] Hyperlinks de terminal (OSC 8)
464
+ - [x] Título de ventana (OSC 2)
465
+ - [x] Bell (BEL)
466
+
467
+ ### ✅ Fase 6 — Motor de animaciones
468
+ - [x] Typewriter, fadeIn, fadeOut, slide, pulse, wave, glitch, reveal
469
+ - [x] Conscientes de `AbortSignal`
470
+ - [x] Modo `reducedMotion` para accesibilidad
471
+ - [x] Frame morph (interpolación texto → texto, descifrado cinematográfico)
472
+ - [x] `parallel()` con timeout
473
+ - [x] Propagación de signal a animaciones anidadas
474
+ - [ ] **Librería de funciones easing** (24 easings estándar: cubic, elastic, bounce, back)
475
+ - [ ] **Composición de animaciones** (DSL `parallel + sequence + delay`)
476
+ - [ ] **Animaciones con física de spring** (estilo `react-spring`)
477
+ - [ ] **Motor de tween** (interpolar cualquier tipo de valor)
478
+
479
+ ### 🟡 Fase 7 Ecosistema de progreso
480
+ - [x] Spinners (11 estilos) con color + AbortSignal
481
+ - [x] Barras de progreso animadas
482
+ - [x] Runners multi-tarea (secuencial + paralelo)
483
+ - [x] Cuentas regresivas
484
+ - [x] Manager multi-spinner (spinners concurrentes apilados)
485
+ - [x] Tareas jerárquicas (rollup padre + subtareas)
486
+ - [ ] **Estimación live de ETA** (rolling average + proyección con filtro de Kalman)
487
+ - [ ] **Refresh live con diff renderer** (sin flicker, solo redibujar líneas cambiadas)
488
+ - [ ] **Grupos de progreso** (grupos con nombre y tema compartido)
489
+ - [ ] **Medidores de throughput** (bytes/s, ops/s con unidades auto-escaladas)
490
+
491
+ ### 🟡 Fase 8 — Detección de capacidades
492
+ - [x] Detección de TTY (auto-desactivar en pipes/CI)
493
+ - [x] Soporte de env `NO_COLOR` / `FORCE_COLOR`
494
+ - [x] Detección de profundidad de color (16 / 256 / truecolor)
495
+ - [x] Detección de proveedor CI (GitHub Actions, CircleCI, GitLab, Buildkite, Drone, Travis)
496
+ - [x] Detección de programa de terminal (iTerm, vscode, WezTerm, Hyper, Apple_Terminal)
497
+ - [x] Detección de Windows Terminal (`WT_SESSION`)
498
+ - [ ] **Detección de ancho Unicode** (CJK halfwidth/fullwidth, clusters de emoji, ZWJ)
499
+ - [ ] **Detección de protocolos de imagen** (Sixel, imágenes inline de iTerm, protocolo de Kitty)
500
+ - [ ] **Base de datos de capacidades de terminal** (flags xterm completos + probes de versión)
501
+ - [ ] **Detección de métricas de fuente** (ancho/alto de celda para layouts pixel-accurate)
502
+
503
+ ### 🟡 Fase 9 Renderizado avanzado
504
+ - [x] Canvas dirty-rectangle (solo redibujar píxeles cambiados)
505
+ - [x] Cachés LRU acotadas (escape sequences, render cache, ANSI cache)
506
+ - [x] Timing con corrección de drift (animaciones permanecen pegadas al reloj)
507
+ - [ ] **Diff renderer** (damage tracking a nivel de línea para UIs completas)
508
+ - [ ] **Buffer virtual** (componer UI sin escribir a stdout)
509
+ - [ ] **Z-index / layering** (overlapping de paneles con prioridad)
510
+ - [ ] **Soporte de eventos de mouse** (click, hover, drag, scroll)
511
+ - [ ] **Abstracción de eventos de teclado** (flechas, modificadores, secuencias, dead keys)
512
+ - [ ] **Framework TUI completo** (componentes reactivos — equivalente a Textual para Node)
513
+
514
+ ### 🔴 Fase 10Charts de terminal
515
+ - [ ] Barras (horizontal + vertical, agrupadas, apiladas)
516
+ - [ ] Líneas (con braille para resolución sub-carácter)
517
+ - [ ] Sparklines (mini-charts inline para status bars)
518
+ - [ ] Áreas (rellenas con gradientes)
519
+ - [ ] Heatmaps (grids 2D color-mapped)
520
+ - [ ] Pie / donut (con etiquetas de porcentaje)
521
+ - [ ] Scatter plots
522
+ - [ ] Box plots / candlestick
523
+ - [ ] Charts en streaming en tiempo real (feed de datos con ventana móvil)
524
+ - [ ] **Compositor de plots** (dashboards multi-chart con ejes compartidos)
525
+
526
+ ### 🔴 Fase 11 — Formularios e input
527
+ - [ ] Prompts de texto (con autocomplete + historial)
528
+ - [ ] Prompts de password (mascarados, medidor de fortaleza)
529
+ - [ ] Diálogos de confirmación (yes/no con highlight de default)
530
+ - [ ] Input numérico (con validación min/max)
531
+ - [ ] Pickers de fecha/hora (widget calendario)
532
+ - [ ] Picker de archivos (navegador de filesystem)
533
+ - [ ] Compositor de formularios (multi-campo con validación + display de errores)
534
+ - [ ] **Flujos de wizard** (formularios multi-paso con back/forward, indicador de progreso)
535
+
536
+ ### 🔴 Fase 12 — Imagen y media
537
+ - [ ] Renderizado de imágenes Sixel (xterm, mlterm, WezTerm)
538
+ - [ ] Imágenes inline de iTerm2 (protocolo base64)
539
+ - [ ] Protocolo gráfico de Kitty
540
+ - [ ] PNG/JPEG imagen de terminal (auto-detecta mejor protocolo)
541
+ - [ ] Preview de video (frame-por-frame a bajo FPS)
542
+ - [ ] Generación de códigos QR (con opciones de tamaño + nivel ECC)
543
+ - [ ] Generación de códigos de barras (Code 128, EAN-13)
544
+
545
+ ### 🔴 Fase 13 — Sistema de plugins
546
+ - [ ] API de plugins para componentes personalizados
547
+ - [ ] Marketplace de temas
548
+ - [ ] Registro de fuentes personalizadas vía paquetes npm
549
+ - [ ] Registro de animaciones de la comunidad
550
+ - [ ] Interfaz de proveedor de capabilities (plug-in para detectores propios)
551
+ - [ ] Plugins de renderer (cambiar stdout por cualquier writable stream)
552
+
553
+ ### 🔴 Fase 14 Capa reactiva (framework TUI)
554
+ - [ ] **Ciclo de vida de componentes** (hooks mount/unmount/update)
555
+ - [ ] **Estado reactivo** (auto re-render al cambiar data, signals o hooks)
556
+ - [ ] **Diffing de Virtual DOM** (updates a nivel de línea)
557
+ - [ ] **Event bus** (comunicación entre componentes)
558
+ - [ ] **Loop de aplicación** (árbol de render único con ciclo de vida completo)
559
+ - [ ] **Routing** (apps multi-pantalla con historial)
560
+ - [ ] **Integración DevTools** (inspector de árbol de componentes, mark de nodos cambiados)
561
+ - [ ] **CSS-in-TS styling** (estilos con scope por componente)
562
+
563
+ **Leyenda:** ✅ Completo · 🟡 Parcial · 🔴 Planeado
564
+
565
+ ---
566
+
567
+ ## 🧪 Testing
568
+
569
+ ```bash
570
+ npm test # Correr todos los 1700+ tests
571
+ npm run test:watch # Modo watch
572
+ npm run test:coverage # Reporte de cobertura
573
+ ```
574
+
575
+ Targets de cobertura:
576
+ - Statements: **98%**
577
+ - Branches: **95%**
578
+ - Functions: **99%**
579
+ - Lines: **99%**
580
+
581
+ ---
582
+
583
+ ## 🛠️ Requisitos
584
+
585
+ - **Node.js** ≥ 18
586
+ - **TypeScript** 5.0 (para consumo tipado opcional)
587
+ - **Terminal** con soporte truecolor recomendado (Windows Terminal, iTerm2, WezTerm, Kitty, xterm moderno). Degrada gracefully a 256 / 16 / sin-color.
588
+
589
+ ---
590
+
591
+ ## 🏗️ Estructura del proyecto
592
+
593
+ ```
594
+ ansimax/
595
+ ├── src/
596
+ │ ├── colors/ Renderizado de color + motor de gradientes
597
+ │ ├── themes/ Sistema de temas + 8 built-ins
598
+ │ ├── ascii/ Banners, cajas, fuentes
599
+ │ ├── animations/ Typewriter, fade, slide, pulse, wave, glitch, reveal
600
+ │ ├── loaders/ Spinners, progreso, tareas, multi-loader
601
+ │ ├── frames/ Reproducción secuenciada + renderer live + morph
602
+ │ ├── components/ Tablas, badges, status, timelines, menús
603
+ │ ├── images/ Sprites, canvas, gradientes con dither
604
+ │ ├── trees/ Builder de árboles + algoritmos
605
+ │ ├── utils/ Primitivas ANSI + helpers
606
+ │ └── configure.ts Config global + subscribers
607
+ ├── examples/ 7 ejemplos de calidad de producción
608
+ └── __tests__/ 16 test suites, 1700+ tests
609
+ ```
610
+
611
+ ---
612
+
613
+ ## 📝 Changelog
614
+
615
+ ### v1.1.0 — Hardening exhaustivo + nuevas features
616
+
617
+ Una pasada masiva de robustez sobre todo módulo, más un nuevo módulo `trees`. **100% retrocompatible** — toda API existente funciona idéntica.
618
+
619
+ **Highlights:**
620
+
621
+ - 🌳 **Nuevo módulo `trees`** — API builder + API data-plana, 4 estilos, detección de ciclos, algoritmos (`walk`, `find`, `count`, `map`, `filter`)
622
+ - ⚙️ **Mejoras de `configure.ts`** `onConfigKeyChange`, `pauseListeners` / `resumeListeners`, `withConfig()`, modo strict
623
+ - 🎨 **Themes** — aislamiento por instancia (multi-tenant safe), `tryUse`, listeners `onChange`, `unregister`, helpers `bg*`, accesor dinámico `style(name)`
624
+ - 🌈 **Colors** — `registerPreset` / `listPresets`, caché LRU acotada, RGB safe ante NaN/Infinity, UX de gradient single-stop
625
+ - 🖼️ **Images** — `Pixel` / `PixelGrid` exportados, deep-clone en `canvas.pixels`, coords defensivas, caché ANSI LRU acotada
626
+ - 🔠 **ASCII** — `hasFont`, `measure`, `stream` con AbortSignal, grapheme-aware
627
+ - 🎞️ **Frames** — cursor con conteo de refs, restauración crash-safe, `repeat: 0` = infinito, fps cap a 60, corrección de drift
628
+ - 🧱 **Components** `menu([])` retorna `MENU_CANCELLED` (no throw), inputs numéricos defensivos en todas partes
629
+ - 🛠️ **Utils** — `setTitle`, `link` (hyperlinks OSC 8), `bell`, `safeJson` (BigInt + circular), `once`, `escapeRegex`, `padBoth`, `nextTick`, `memoize` con keyFn personalizado, `debounce` con `maxWait`, `onResize` con throttle
630
+ - 🧪 **Tests** — ~1700+ tests en 16 suites, todos verdes, ~98% de cobertura
631
+
632
+ Ver [CHANGELOG.md](CHANGELOG.md) para el historial completo de versiones con desglose por módulo.
633
+
634
+ ### v1.0.0 — Release inicial
635
+
636
+ - Módulos core: `color`, `animate`, `ascii`, `loader`, `frames`, `components`, `themes`, `images`, `configure`
637
+ - Tipos TypeScript exportados, build dual ESM + CJS
638
+ - Renderizado de color adaptativo (detección NO_COLOR / FORCE_COLOR / TTY)
639
+ - Soporte de `AbortSignal` en todas las APIs bloqueantes
640
+ - 750+ tests, 85%+ cobertura
641
+
642
+ ---
643
+
644
+ ## 🤝 Contribuir
645
+
646
+ ¡Las contribuciones son bienvenidas! Áreas donde la ayuda es especialmente apreciada:
647
+
648
+ - Nuevos presets de animación (easings, física spring)
649
+ - Fuentes ASCII adicionales (parser de figlet `.flf`)
650
+ - Entradas en la base de capacidades de terminal
651
+ - Traducciones (fr, de, ja, ...)
652
+ - Apps de ejemplo del mundo real
653
+ - Implementaciones de charts (Fase 10)
654
+
655
+ Por favor lee [CONTRIBUTING.md](.github/CONTRIBUTING.md) para las guías.
656
+
657
+ ---
658
+
659
+ ## 🐛 Reportar issues
660
+
661
+ ¿Encontraste un bug? ¿Tienes una sugerencia? [Abre un issue](https://github.com/Brashkie/ansimax/issues/new).
662
+
663
+ Para divulgaciones de seguridad, envía un email a [security@brashkie.dev](mailto:security@brashkie.dev) en lugar de abrir un issue público.
664
+
665
+ ---
666
+
667
+ ## ⭐ Apoyo
668
+
669
+ Si Ansimax te ahorra tiempo, por favor dale estrella al repo en [GitHub](https://github.com/Brashkie/ansimax) — ayuda al proyecto a crecer y acelera el roadmap.
670
+
671
+ ---
672
+
673
+ ## 👨‍💻 Autor
674
+
675
+ **Brashkie** · [@Brashkie](https://github.com/Brashkie)
676
+
677
+ ---
678
+
679
+ ## 📜 Licencia
680
+
681
+ [Apache License 2.0](LICENSE) © 2026 Brashkie
682
+
683
+ Ansimax está licenciada bajo **Apache License, Version 2.0** — una licencia permisiva que permite uso comercial, modificación, distribución, e incluye un grant explícito de patentes. Ver el archivo [LICENSE](LICENSE) para el texto completo.
684
+
685
+ ---
686
+
687
+ **Keywords:** cli, terminal, ansi, colors, gradients, animation, spinner, ascii, ascii-art, pixel-art, progress-bar, loader, components, table, banner, theme, tree, trees, tui, typescript, nodejs, zero-dependencies, chalk, ora, boxen, figlet, inquirer
688
+
689
+ ---
690
+
691
+ <div align="center">
692
+
693
+ **Construido con ❤️ y TypeScript**
694
+
695
+ Si Ansimax te ayuda a hacer mejores CLIs, ¡dale ⭐ en [GitHub](https://github.com/Brashkie/ansimax)!
696
+
697
+ </div>