grmenu 3.0.0 → 4.0.0

data/README.md

@@ -1,47 +1,56 @@
-# GRmenu (Ruby) v3.0
+# GRmenu (Ruby) v4.0
 
 **Suite TUI Profesional y Ligera para la Creacion de Interfaces de Linea de Comandos en Terminales TTY.**
 
-Menus interactivos por teclado, seleccion multiple con casillas de verificacion, controles deslizantes en tiempo real, renderizado de imagenes ANSI TrueColor de 24 bits, modo cromatico RGB animado a 30 FPS, modales nativos de confirmacion y texto, buscador instantaneo en vivo, cuadriculas bidimensionales, barras de progreso y banners 3D sin dependencias externas.
+Menus interactivos por teclado, tablas con ordenamiento y busqueda en vivo, seleccion multiple con casillas de verificacion, controles deslizantes en tiempo real, renderizado de imagenes ANSI TrueColor de 24 bits, sistema de temas estilo CSS `.gr`, iluminacion dinamica a 30 FPS en vivo, colores hexadecimales directos, modales nativos de confirmacion y texto, buscador instantaneo en vivo, cuadriculas bidimensionales, barras de progreso y banners 3D sin dependencias externas.
 
 [![Gem Version](https://badge.fury.io/rb/grmenu.svg)](https://badge.fury.io/rb/grmenu)
 [![License: MIT](https://img.shields.io/github/license/JoseEduardoGR/GRmenu)](LICENSE)
 [![Platform](https://img.shields.io/badge/platform-Linux%20%7C%20macOS%20%7C%20Windows-blue)](https://github.com/JoseEduardoGR/GRmenu)
 [![Ruby](https://img.shields.io/badge/ruby-%3E%3D%202.6-red.svg)](https://www.ruby-lang.org)
 
+![Demo de GRmenu en Ruby](assets/demo.png)
+
 ---
 
 ## Tabla de Contenidos
 
-1. [Por que elegir GRmenu?](#-por-que-elegir-grmenu)
-2. [Instalacion y Requisitos](#-instalacion-y-requisitos)
-3. [Inicio Rapido en 10 Segundos](#-inicio-rapido-en-10-segundos)
-4. [Guia de Componentes y Caracteristicas](#-guia-de-componentes-y-caracteristicas)
+1. [Por que elegir GRmenu?](#por-que-elegir-grmenu)
+2. [Instalacion y Requisitos](#instalacion-y-requisitos)
+3. [Inicio Rapido en 10 Segundos](#inicio-rapido-en-10-segundos)
+4. [Guia de Componentes y Caracteristicas](#guia-de-componentes-y-caracteristicas)
    - [1. Menu Interactivo Principal (Buscador, Grid 2D y Paginacion)](#1-menu-interactivo-principal)
-   - [2. Seleccion Multiple con Checkboxes (GRmenu.checkbox)](#2-seleccion-multiple-con-checkboxes)
-   - [3. Control Deslizante Interactivo (GRmenu.slider)](#3-control-deslizante-interactivo)
-   - [4. Renderizado Universal de Imagenes (GRmenu.image)](#4-renderizado-universal-de-imagenes)
-   - [5. Modales Nativos de Confirmacion y Entrada (confirm e input)](#5-modales-nativos-de-confirmacion-y-entrada)
-   - [6. Modo RGB Chroma Wave Animado a 30 FPS](#6-modo-rgb-chroma-wave-animado)
-   - [7. Barra de Progreso y Spinner de Carga](#7-barra-de-progreso-y-spinner-de-carga)
-   - [8. Banners 3D y Lineas Divisorias](#8-banners-3d-y-lineas-divisorias)
-   - [9. Modulo Independiente de Color (Color / C)](#9-modulo-independiente-de-color)
-5. [Catalogo Visual de Fuentes 3D (1 al 10)](#-catalogo-visual-de-fuentes-3d)
-6. [Catalogo Visual de Marcos y Bordes (1 al 20)](#-catalogo-visual-de-marcos-y-bordes)
-7. [Referencia Exhaustiva de la API](#-referencia-exhaustiva-de-la-api)
-8. [Mapa de Controles y Teclado](#-mapa-de-controles-y-teclado)
-9. [Recetas y Casos de Uso del Mundo Real](#-recetas-y-casos-de-uso-del-mundo-real)
-10. [Licencia](#-licencia)
+   - [2. Sistema de Temas .gr y CSS para TUI](#2-sistema-de-temas-gr-y-css-para-tui)
+   - [3. Exportacion de Temas desde Terminal / CLI](#3-exportacion-de-temas-desde-terminal--cli)
+   - [4. CSS Inline en el Codigo (<<-GR)](#4-css-inline-en-el-codigo--gr)
+   - [5. Tablas Interactivas con Buscador y Ordenamiento (GRmenu.table)](#5-tablas-interactivas-con-buscador-y-ordenamiento)
+   - [6. Tarjetas y Alertas Estilizadas (GRmenu.card y GRmenu.alert)](#6-tarjetas-y-alertas-estilizadas)
+   - [7. Colores Hexadecimales TrueColor y Catalogo de 90+ Colores](#7-colores-hexadecimales-truecolor-y-catalogo-de-90-colores)
+   - [8. Iluminacion Dinamica Living Neon a 30 FPS](#8-iluminacion-dinamica-living-neon-a-30-fps)
+   - [9. Seleccion Multiple con Checkboxes (GRmenu.checkbox)](#9-seleccion-multiple-con-checkboxes)
+   - [10. Control Deslizante Interactivo (GRmenu.slider)](#10-control-deslizante-interactivo)
+   - [11. Modales Nativos de Confirmacion y Entrada (confirm e input)](#11-modales-nativos-de-confirmacion-y-entrada)
+   - [12. Renderizado Universal de Imagenes (GRmenu.image)](#12-renderizado-universal-de-imagenes)
+   - [13. Barra de Progreso y Spinner de Carga](#13-barra-de-progreso-y-spinner-de-carga)
+   - [14. Banners 3D y Modulo de Color (Color / C)](#14-banners-3d-y-modulo-de-color)
+5. [Ejemplo Completo en Ruby (e.rb)](#ejemplo-completo-en-ruby-erb)
+6. [Catalogo Visual de Fuentes 3D (1 al 10)](#catalogo-visual-de-fuentes-3d)
+7. [Catalogo Visual de Marcos y Bordes (1 al 20)](#catalogo-visual-de-marcos-y-bordes)
+8. [Referencia Exhaustiva de la API](#referencia-exhaustiva-de-la-api)
+9. [Mapa de Controles y Teclado](#mapa-de-controles-y-teclado)
+10. [Licencia](#licencia)
 
 ---
 
 ## Por que elegir GRmenu?
 
 - **Cero Dependencias Externas:** Funciona exclusivamente con la libreria estandar de Ruby (`io/console`, `json`, `zlib`), sin gemas pesadas ni binarios nativos requeridos.
+- **Sistema de Temas CSS (.gr):** Diseña la estetica de tu consola como si fuera una hoja de estilos web con bloques `<<menu`, `<<table`, `<<card`, `<<slider`, etc.
+- **Colores Hexadecimales Directos:** Soporta `#FF0055`, `#00F5FF`, `#0FF` en cualquier componente con TrueColor de 24 bits nativo.
+- **Animaciones Living Neon a 30 FPS:** Olas de luz senoidal continuas y destello de incandescencia en marcos y banners sin producir retraso en el teclado.
+- **Exportacion Instantanea CLI:** Convierte la configuracion visual de cualquier script a un archivo de tema `.gr` reutilizable con la bandera `-theme`.
 - **Modo TTY Crudo Instantaneo:** Control milimetrico de la consola sin parpadeo de pantalla y con captura instantanea de eventos de teclado (0 ms de latencia).
-- **Animaciones Sin Lag a 30 FPS:** Motor de renderizado reactivo no bloqueante basado en `IO.select` que permite efectos visuales dinamicos continuos sin saturar la CPU ni bloquear la entrada del usuario.
 - **Multiplataforma Real:** Totalmente compatible con Linux, macOS y Windows (Windows Terminal, PowerShell, CMD y VS Code Terminal).
-- **Diseno Modular y Expresivo:** Desde un simple menu de 3 lineas hasta complejas suites de instalacion, paneles DevOps o herramientas de configuracion.
 
 ---
 
@@ -58,13 +67,15 @@ gem install grmenu
 ### Via Gemfile
 
 ```ruby
-gem 'grmenu', '~> 3.0'
+gem 'grmenu', '~> 4.0'
 ```
 
 ### Requerimiento directo en scripts
 
+Puedes requerirlo tanto en minusculas como con la sintaxis tradicional:
+
 ```ruby
-require 'GRmenu'
+require 'grmenu'  # o require 'GRmenu'
 ```
 
 ---
@@ -74,29 +85,35 @@ require 'GRmenu'
 Crea un archivo llamado `app.rb` y ejecuta `ruby app.rb`:
 
 ```ruby
-require 'GRmenu'
+require 'grmenu'
+
+# Cargar un tema predefinido con estetica neon
+GRmenu.theme(:neon_red)
 
-def iniciar_servicio
-  GRmenu.clear_screen
-  puts Color.bright_green("-> Servicio iniciado exitosamente en http://localhost:3000")
-  GRmenu.continue
+def saludar
+  GRmenu.alert(:success, "Bienvenido a GRmenu v4.0!")
 end
 
-def ver_estado
-  GRmenu.clear_screen
-  puts Color.bright_cyan("-> Estado: Servidor Operativo | Memoria: 45 MB | Conexiones: 12")
-  GRmenu.continue
+def ver_tabla
+  headers = ["ID", "SERVICIO", "ESTADO"]
+  filas = [
+    ["01", "API Gateway", "Operativo"],
+    ["02", "Postgres DB", "Operativo"],
+    ["03", "Redis Cache", "En espera"]
+  ]
+  GRmenu.table(headers: headers, rows: filas, title: "Monitor de Servidores", search: true)
 end
 
 menu = GRmenu.new(
   [
-    ["Iniciar Servicio", method(:iniciar_servicio), "Lanza el worker en segundo plano"],
-    ["Ver Estado", method(:ver_estado), "Muestra metricas de memoria y conexion"],
+    ["Saludar", method(:saludar), "Muestra un mensaje emergente"],
+    ["Ver Infraestructura", method(:ver_tabla), "Tabla interactiva con buscador en vivo"],
     ["Salir", -> { exit(0) }, "Finaliza la ejecucion"]
   ],
   title: "Panel de Control",
-  banner: "MI APP",
-  style: 3
+  banner: "DEMO",
+  style: 3,
+  animate: "diagonal"
 )
 
 menu.draw
@@ -125,8 +142,6 @@ El constructor `GRmenu.new` proporciona una experiencia interactiva completa con
 
 #### Formatos de Opciones Aceptados
 
-Puedes combinar cualquiera de los siguientes formatos en el array de opciones:
-
 ```ruby
 menu = GRmenu.new(
   [
@@ -161,235 +176,358 @@ menu.draw(size_max: 44)
 
 ---
 
-### 2. Seleccion Multiple con Checkboxes
+### 2. Sistema de Temas .gr y CSS para TUI
 
-Permite al usuario seleccionar multiples elementos simultaneamente mediante casillas de verificacion interactivas `[X]` / `[ ]`.
+GRmenu incluye un motor de temas declarativos en archivos `.gr` con sintaxis limpia tipo CSS.
+
+#### Cargar Temas Integrados:
+```ruby
+GRmenu.theme(:neon_red)    # Rojos electricos incandescentes y foco amarillo
+GRmenu.theme(:cyberpunk)   # Neones cian, amarillo y efecto Chroma
+GRmenu.theme(:matrix)      # Verde fosforescente terminal hacker
+GRmenu.theme(:dracula)     # Morados, fucsias y cian
+GRmenu.theme(:nord)        # Azules articos y paleta fria
+GRmenu.theme(:monokai)     # Amarillos, verdes y magentas
+GRmenu.theme(:sunset)      # Atardecer calido en rojos, naranjas y dorados
+```
+
+#### Crear tu propio Archivo de Tema (`mi_tema.gr`):
+```gr
+GRmenu::config<-1->
+
+@theme:: "Neon Tokyo"
+@author:: "TuNombre"
+@version:: "1.0"
+
+<<menu
+  style:: 3
+  banner_style:: 3
+  font:: 1
+  animate:: diagonal
+  desc_prefix:: ->
+  center:: true
+  border:: #FF0055
+  title:: #00F5FF
+  focus:: gold:2
+  options:: white:1
+  banner:: #FF0055
+  subtitle:: #A6E3A1
+  divider:: #FF0055
+>>
+
+<<table
+  style:: 3
+  header_color:: #00F5FF
+  border_color:: #FF0055
+  selected_row:: gold:2
+  row_color:: white:1
+  zebra_striping:: true
+>>
+
+<<card
+  style:: 7
+  border_color:: #FF0055
+  title_color:: #00F5FF
+  content_color:: white:1
+>>
+
+<<slider
+  style:: 3
+  color:: #FF0055
+  fill_char:: █
+  empty_char:: ░
+>>
+
+<<checkbox
+  style:: 3
+  color:: #FF0055
+  checked_mark:: [X]
+  unchecked_mark:: [ ]
+>>
+```
+
+Para aplicarlo a todo tu sistema:
+```ruby
+GRmenu.import_config("mi_tema.gr")
+```
+
+---
+
+### 3. Exportacion de Temas desde Terminal / CLI
+
+Puedes extraer y exportar el tema configurado en cualquier script de Ruby directamente a un archivo `.gr`:
+
+#### Mediante banderas de linea de comandos:
+```bash
+# Exporta el tema del script con nombre automatico:
+ruby mi_app.rb -theme
+
+# Exporta a un archivo de salida especifico:
+ruby mi_app.rb -theme -o salida_tema.gr
+```
+
+#### De forma programatica en Ruby:
+```ruby
+# Extrae el tema de un script sin ejecutar bucles interactivos:
+GRmenu.export_from_file("mi_app.rb", "tema_extraido.gr")
+
+# Exporta el tema de una instancia existente:
+menu.export_theme("mi_tema.gr")
+```
+
+---
+
+### 4. CSS Inline en el Codigo (`<<-GR`)
+
+Puedes inyectar bloques de estilo tipo `<style>` directamente en tu script sin crear archivos `.gr` adicionales:
+
+```ruby
+menu = GRmenu.new(opciones, title: "App con CSS")
+
+menu.style(<<-GR)
+<<menu
+  style:: 3
+  animate:: diagonal
+  border:: #FF0055:1
+  title:: #00F5FF:2
+  focus:: gold:2
+  banner:: neon_crimson:2
+  subtitle:: #A6E3A1:1
+>>
+GR
+
+menu.draw
+```
+
+---
+
+### 5. Tablas Interactivas con Buscador y Ordenamiento
+
+Visualiza y navega colecciones de datos tabulares con buscador instantaneo, ordenamiento por columnas con la tecla `s`, paginacion y proteccion anti-desbordes:
 
 ```text
-╔══════════════════ Instalador de Paquetes ══════════════════╗
-║ [X] Servidor Nginx Web                                     ║
-║ [X] Base de Datos PostgreSQL 16                            ║
-║ [ ] Almacen de Cache Redis 7.2                             ║
-║ [X] Monitor Prometheus                                     ║
+╔════════════════ Monitor de Infraestructura ════════════════╗
+║ Buscar: gate█                                              ║
+║════════════════════════════════════════════════════════════║
+║ ID    │ SERVICIO         │ ESTADO        │ LATENCIA        ║
+║───────┼──────────────────┼───────────────┼─────────────────║
+║ > 01  │ API Gateway      │ Operativo     │ 12ms            ║
 ║────────────────────────────────────────────────────────────║
-║ Espacio: Marcar | a: Todos | n: Ninguno | Enter: Confirmar ║
+║ ↑/↓ Mover | s Ordenar | / Buscar | Enter Seleccionar       ║
 ╚════════════════════════════════════════════════════════════╝
 ```
 
-#### Codigo de Ejemplo:
-
 ```ruby
-paquetes = [
-  ["Servidor Nginx Web", true, "Proxy inverso de alta velocidad"],
-  ["Base de Datos PostgreSQL 16", true, "Motor de datos principal"],
-  ["Almacen de Cache Redis 7.2", false, "Cache en memoria RAM"],
-  ["Monitor Prometheus", true, "Metricas y alertas"]
+headers = ["ID", "SERVICIO", "ESTADO", "LATENCIA"]
+filas = [
+  ["01", "API Gateway", "Operativo", "12ms"],
+  ["02", "PostgreSQL Primary", "Operativo", "2ms"],
+  ["03", "Redis Cache", "Operativo", "1ms"],
+  ["04", "Workers Celery", "Ocupado", "45ms"],
+  ["05", "ElasticSearch", "Operativo", "8ms"]
 ]
 
-seleccionados = GRmenu.checkbox(
-  paquetes,
-  title: "Instalador de Paquetes",
-  color: "rgb",
+seleccion = GRmenu.table(
+  headers: headers,
+  rows: filas,
+  title: "Monitor de Infraestructura",
+  search: true,    # Buscador en vivo
+  sort: true,      # Ordena por columnas con la tecla 's'
+  page_size: 5,
   style: 3
 )
 
-puts "Elementos seleccionados: #{seleccionados.length}"
-seleccionados.each do |elem|
-  nombre = elem.is_a?(Array) ? elem[0] : elem
-  puts " - [X] #{nombre}"
+if seleccion
+  puts "Fila elegida: #{seleccion.join(' | ')}"
 end
 ```
 
-**Teclas de Control en Checkbox:**
-- `Espacio`: Alterna entre marcado `[X]` y desmarcado `[ ]`.
-- `a` / `A`: Marca todos los elementos (*Select All*).
-- `n` / `N`: Desmarca todos los elementos (*Deselect All*).
-- `i` / `I`: Invierte la seleccion actual.
-- `Enter`: Confirma y devuelve el arreglo de elementos seleccionados.
-- `q` / `Esc`: Cancela y devuelve un arreglo vacio `[]`.
-
 ---
 
-### 3. Control Deslizante Interactivo
+### 6. Tarjetas y Alertas Estilizadas
 
-Permite seleccionar numericamente un valor o porcentaje dentro de un rango mediante una barra horizontal en tiempo real.
+Cuadros informativos con division de parrafos (*word-wrapping*) automatico y soporte completo para colores TrueColor y Neón:
 
-```text
-╔══════════════ Asignar Memoria RAM ══════════════╗
-║ [████████████████████░░░░░░░░░░] 16 GB          ║
-║                                                 ║
-║ ← / → Ajustar paso | ↑ / ↓ Salto x5 | Enter OK  ║
-╚═════════════════════════════════════════════════╝
+```ruby
+# Alertas con iconos y colores contextuales
+GRmenu.alert(:success, "Conexion establecida con el servidor.")
+GRmenu.alert(:warning, "Memoria RAM al 85%.")
+GRmenu.alert(:error, "Fallo en la peticion al cluster.")
+GRmenu.alert(:info, "Actualizacion disponible.")
+
+# Tarjeta informativa con bordes y colores personalizados
+GRmenu.card(
+  title: "Metricas de Produccion",
+  content: "Peticiones/seg: 18,400 req/s\nLatencia p99: 11.4 ms\nSalud del cluster: 100%",
+  border_color: "#FF0055",
+  title_color: "#00F5FF",
+  content_color: "gold",
+  style: 7
+)
 ```
 
-#### Codigo de Ejemplo:
+---
+
+### 7. Colores Hexadecimales TrueColor y Catalogo de 90+ Colores
+
+El motor soporta **colores hexadecimales directos de 24 bits** (`#RRGGBB` o formato corto `#RGB`), ademas de un catalogo de 90+ colores pre-calibrados con version normal y version neón:
 
 ```ruby
-ram = GRmenu.slider(
-  "Asignar Memoria RAM",
-  min: 1,
-  max: 64,
-  step: 1,
-  default: 16,
-  unit: "GB",
-  color: "rgb",
-  style: 3
-)
+# 1. En codigo con encadenamiento fluido (chaining):
+menu.set_style.border("#FF0055").title("#00F5FF").focus("gold")
 
-puts "Memoria configurada: #{ram} GB"
+# 2. Con codigos de 3 digitos:
+menu.set_style.border("#0FF")
+
+# 3. Directamente con el helper de Color:
+puts Color.hex("#A6E3A1", "Verde menta suave")
+puts Color.gold("Texto Dorado")
+puts Color.neon_emerald("Esmeralda Neon")
+puts Color.crimson("Rojo Carmesi")
 ```
 
-**Teclas de Control en Slider:**
-- `←` / `→` o `h` / `l`: Ajusta el valor paso a paso (`step`).
-- `↑` / `↓` o `k` / `j`: Salto rapido de 5 pasos.
-- `Enter`: Guarda y retorna el numero exacto (`Integer` o `Float`).
-- `q` / `Esc`: Cancela y retorna el valor por defecto.
+#### Familias de Colores Destacadas:
+- **Metales y Joyas:** `gold` / `neon_gold`, `silver` / `neon_silver`, `platinum` / `neon_platinum`, `ruby` / `neon_ruby`, `emerald` / `neon_emerald`, `sapphire` / `neon_sapphire`.
+- **Fuego y Tierra:** `crimson` / `neon_crimson`, `scarlet` / `neon_scarlet`, `coral` / `neon_coral`, `amber` / `neon_amber`.
+- **Naturaleza y Pasteles:** `lime` / `neon_lime`, `mint` / `neon_mint`, `peach` / `neon_peach`, `lavender` / `neon_lavender`, `mauve` / `neon_mauve`.
+- **Ciberpunk y Monitores:** `neon_red`, `neon_cyan`, `neon_pink`, `matrix` / `neon_matrix`, `charcoal`.
 
 ---
 
-### 4. Renderizado Universal de Imagenes
-
-Decodifica y renderiza cualquier formato de imagen (PNG, JPEG, JPG, WEBP, GIF, BMP) con micro-pixeles ANSI TrueColor de 24 bits y escalado proporcional exacto.
+### 8. Iluminacion Dinamica Living Neon a 30 FPS
 
-#### Renderizado Directo en Consola:
+Al configurar `animate: "diagonal"`, `"linear"` o `"fade"`, el motor no se queda estatico: proyecta una ola de luz senoidal continua en tiempo real a 30 FPS que barre los marcos y los banners con destellos de incandescencia (*glow*), sin introducir ningun lag al pulsar teclas:
 
 ```ruby
-# Renderiza una imagen centrada dentro de un marco estilizado
-GRmenu.image("fondo.jpg", width: 60, color: "rgb", style: 3)
+menu = GRmenu.new(
+  opciones,
+  banner: "THEMES",
+  title: "Efecto Neon Vivo",
+  style: 3,
+  animate: "diagonal" # "diagonal", "linear", "fade" o "rgb"
+)
+menu.set_style.border("neon_red").banner("neon_red").focus("neon_yellow")
+menu.draw
 ```
 
-#### Como Cabecera Superior en un Menu:
+---
+
+### 9. Seleccion Multiple con Checkboxes
+
+Permite al usuario seleccionar multiples elementos simultaneamente mediante casillas de verificacion interactivas `[X]` / `[ ]`.
 
 ```ruby
-menu = GRmenu.new(
-  [
-    ["Escanear Red", method(:escanear)],
-    ["Ver Reporte", method(:reporte)],
-    ["Salir", -> { exit(0) }]
-  ],
-  image: "logo.png",
-  image_width: 44,
-  title: "Security Toolset",
+paquetes = [
+  ["Servidor Nginx Web", true, "Proxy inverso de alta velocidad"],
+  ["Base de Datos PostgreSQL 16", true, "Motor de datos principal"],
+  ["Almacen de Cache Redis 7.2", false, "Cache en memoria RAM"],
+  ["Monitor Prometheus", true, "Metricas y alertas"]
+]
+
+seleccionados = GRmenu.checkbox(
+  paquetes,
+  title: "Instalador de Paquetes",
+  color: "neon_cyan",
   style: 3
 )
-
-menu.draw
 ```
 
----
+**Teclas de Control:**
+- `Espacio`: Alterna marcado `[X]` / `[ ]`.
+- `a`: Seleccionar todos.
+- `n`: Deseleccionar todos.
+- `i`: Invertir seleccion.
+- `Enter`: Confirmar seleccion.
 
-### 5. Modales Nativos de Confirmacion y Entrada
+---
 
-Cuadros de dialogo emergentes bloqueantes que capturan respuestas del usuario de forma directa y visual.
+### 10. Control Deslizante Interactivo
 
-#### Modal de Confirmacion (`GRmenu.confirm`):
+Permite seleccionar numericamente un valor o porcentaje dentro de un rango mediante una barra horizontal en tiempo real.
 
 ```ruby
-# Dialogo interactivo Si / No con seleccion por flechas y teclado
-if GRmenu.confirm("Deseas aplicar los cambios en produccion?", default: true, color: "rgb", style: 3)
-  puts Color.bright_green("-> Cambios aplicados con exito.")
-else
-  puts Color.bright_red("-> Operacion cancelada.")
-end
+ram = GRmenu.slider(
+  "Asignar Memoria RAM",
+  min: 1,
+  max: 64,
+  step: 1,
+  default: 16,
+  unit: "GB",
+  color: "gold",
+  style: 3
+)
 ```
 
-#### Cuadro de Entrada de Texto (`GRmenu.input`):
+---
+
+### 11. Modales Nativos de Confirmacion y Entrada
 
 ```ruby
-# Entrada interactiva con cursor en vivo
-nombre = GRmenu.input("Ingresa tu nombre de usuario:", default: "admin", color: "rgb", style: 3)
+# Modal Si / No con flechas
+if GRmenu.confirm("Deseas aplicar los cambios en produccion?", color: "neon_green", style: 3)
+  puts "Aplicando..."
+end
 
-# Modo password para claves secretas (oculta caracteres con asteriscos)
-token = GRmenu.input("Ingresa tu API Token:", password: true, color: "magenta", style: 7)
+# Cuadro de entrada de texto con cursor en vivo
+nombre = GRmenu.input("Ingresa tu nombre de usuario:", default: "admin", color: "neon_cyan", style: 3)
+
+# Modo password para ocultar claves
+token = GRmenu.input("Ingresa tu API Token:", password: true, color: "neon_pink", style: 7)
 ```
 
 ---
 
-### 6. Modo RGB Chroma Wave Animado
+### 12. Renderizado Universal de Imagenes
 
-Puedes activar el modo de color animado pasando `"rgb"`, `"rainbow"` o `"chroma"` a cualquier componente visual. El motor genera una onda sinusoidal horizontal que fluye suavemente a 30 FPS en segundo plano sin producir retraso en el teclado.
+Decodifica y renderiza cualquier formato de imagen (PNG, JPEG, JPG, WEBP, GIF, BMP) con micro-pixeles ANSI TrueColor de 24 bits:
 
 ```ruby
-menu = GRmenu.new(opciones, banner: "CHROMA", title: "RGB Wave Panel")
-
-menu.set_style.banner("rgb")    # Letras 3D en degradado continuo
-menu.set_style.title("rgb")     # Titulo de cabecera en RGB
-menu.set_style.border("rgb")    # Marco exterior multicolor
-menu.set_style.divider("rgb")   # Lineas divisorias animadas
-menu.set_style.focus("rgb")     # Cursor enfocado pulsando en RGB
-menu.set_style.options("rgb")   # Texto de opciones en tono suave
-
-menu.draw
+GRmenu.image("wallpaper.jpg", width: 60, color: "neon_cyan", style: 3)
 ```
 
 ---
 
-### 7. Barra de Progreso y Spinner de Carga
-
-#### Barra de Progreso (`GRmenu.progress`):
+### 13. Barra de Progreso y Spinner de Carga
 
 ```ruby
-GRmenu.progress(100, title: "Descargando Actualizacion", color: "rgb", style: 3) do |bar|
+# Barra de progreso
+GRmenu.progress(100, title: "Descargando Actualizacion", color: "neon_yellow", style: 3) do |bar|
   10.times do |i|
     sleep 0.1
     bar.advance(10, status: "Procesando bloque #{i + 1} de 10...")
   end
 end
-```
 
-#### Spinner Animado (`GRmenu.spinner`):
-
-```ruby
-resultado = GRmenu.spinner("Conectando con el cluster remoto...", color: "rgb") do
-  # Simula tarea pesada
-  sleep 1.5
-  "Conexion Establecida"
+# Spinner animado en segundo plano
+resultado = GRmenu.spinner("Conectando con el cluster remoto...", color: "neon_cyan") do
+  sleep 1.2
+  "OK"
 end
-
-puts Color.bright_green("-> #{resultado}")
 ```
 
 ---
 
-### 8. Banners 3D y Lineas Divisorias
+### 14. Banners 3D y Modulo de Color
 
 ```ruby
-# Imprime un banner en arte ASCII 3D con retardo opcional de animacion
-GRmenu.banner("ADMIN", 0, color: "rgb", style: 3, font: 1)
-
-# Imprime una linea divisoria horizontal con ajuste automatico al ancho de terminal
-GRmenu.div(60, "rgb", 1, "═")
+# Banner ASCII 3D
+GRmenu.banner("ADMIN", 0, color: "neon_red", style: 3, font: 1)
+
+# Modulo Color / C
+puts Color.rgb("Texto degradado arcoiris continuo")
+puts Color.hex("#FF0055", "Texto en Rojo Carmesi")
+puts Color.gold("Texto en Dorado")
+puts Color.neon_cyan("Texto en Cian Neon")
 ```
 
 ---
 
-### 9. Modulo Independiente de Color
+## Ejemplo Completo en Ruby (`e.rb`)
 
-El modulo `Color` (o su alias `C`) permite pintar cadenas de texto directamente con secuencias ANSI y TrueColor:
+Puedes ejecutar el archivo de laboratorio interactivo completo:
 
-```ruby
-# Modo Arcoiris RGB Dinamico
-puts Color.rgb("Texto degradado en onda horizontal multicolor")
-
-# Metodos directos por color (Nivel 1 Normal / Nivel 2 Brillante)
-puts Color.bright_green("Verde brillante")
-puts Color.bright_cyan("Cian brillante")
-puts Color.bright_magenta("Magenta brillante")
-puts Color.bright_yellow("Amarillo brillante")
-puts Color.bright_red("Rojo brillante")
-puts Color.orange("Naranja")
-puts Color.purple("Morado")
-puts Color.pink("Rosa")
-puts Color.gray("Gris")
-puts Color.white("Blanco")
-
-# Atajos ultra-cortos de 1 o 2 letras
-puts Color.g("Verde")
-puts Color.cy("Cian")
-puts Color.r("Rojo")
-puts Color.y("Amarillo")
-puts Color.w("Blanco")
-puts Color.gr("Gris")
+```bash
+ruby ruby/e.rb
 ```
 
 ---
@@ -443,40 +581,31 @@ Configura el diseno del marco mediante el parametro `style: 1..20`:
 | `style:` | `Integer` | `19` | Estilo de marco para las opciones (1 al 20). |
 | `banner_style:` | `Integer` | `3` | Estilo de marco para el banner 3D (1 al 20). |
 | `font:` | `Integer` | `1` | Fuente tipografica del banner ASCII (1 al 10). |
-| `image:` | `String` | `nil` | Ruta al archivo de imagen de cabecera (PNG/JPG/WEBP/GIF/BMP). |
-| `image_width:` | `Integer` | `40` | Ancho en columnas para el renderizado de la imagen. |
+| `animate:` | `String/Bool`| `false` | Efecto de iluminacion ("diagonal", "linear", "fade", "rgb"). |
+| `desc_prefix:` | `String` | `"[i]"` | Prefijo visual para el tooltip de ayuda. |
 | `divider:` | `Boolean/Int` | `true` | Lineas divisorias horizontales ajustadas al marco. |
 | `center:` | `Boolean` | `true` | Centrado horizontal simetrico automatico. |
 
-### Metodos de Estilo `menu.set_style`
-
-| Metodo | Argumentos | Descripcion |
-|:-------|:-----------|:------------|
-| `banner(color, level=2)` | `(String, Integer)` | Color del banner ASCII (soporta `"rgb"`). |
-| `title(color, level=2)` | `(String, Integer)` | Color del titulo del recuadro (soporta `"rgb"`). |
-| `subtitle(color, level=1)` | `(String, Integer)` | Color del texto del subtitulo (soporta `"rgb"`). |
-| `divider(color, level=1)` | `(String, Integer)` | Color de las lineas divisorias (soporta `"rgb"`). |
-| `border(color, level=1)` | `(String, Integer)` | Color del marco de opciones (soporta `"rgb"`). |
-| `options(color, level=1)` | `(String, Integer)` | Color de las opciones inactivas (soporta `"rgb"`). |
-| `focus(color, level=2)` | `(String, Integer)` | Color del cursor y opcion activa (soporta `"rgb"`). |
-| `font(font_id)` | `(Integer 1..10)` | Cambia la fuente tipografica del banner. |
-
-### Metodos Estaticos y Modales
+### Metodos Estaticos y Componentes
 
 | Metodo | Firma | Retorno |
 |:-------|:------|:--------|
-| `GRmenu.checkbox` | `(items, title:, color:, style:, page_size:, preselected:)` | `Array` con los elementos marcados. |
-| `GRmenu.slider` | `(prompt, min:, max:, step:, default:, unit:, color:, style:)` | `Numeric` con el valor seleccionado. |
-| `GRmenu.confirm` | `(pregunta, default: true, color: "cyan", style: 3)` | `Boolean` (`true` para Si, `false` para No). |
-| `GRmenu.input` | `(prompt, default: "", password: false, color: "cyan", style: 3)` | `String` ingresado por el usuario. |
-| `GRmenu.image` | `(filepath, width: 40, height: nil, style: 3, color: "cyan")` | Dibuja la imagen en la terminal. |
-| `GRmenu.progress` | `(total = 100, title: nil, color: "cyan", style: 3, &bloque)` | Ejecuta el bloque con la barra de progreso. |
-| `GRmenu.spinner` | `(mensaje = "...", color: "cyan", delay: 0.08, &bloque)` | Ejecuta el bloque mostrando un spinner animado. |
-| `GRmenu.banner` | `(texto, delay = 0, color: "magenta", style: 3, font: 1)` | Imprime texto en arte ASCII 3D. |
-| `GRmenu.div` | `(long = nil, color = "blue", level = 1, char = "─")` | Imprime una linea divisoria en la consola. |
-| `GRmenu.clear_screen`| `()` (Alias: `GRmenu.clr`) | Limpia la pantalla y el scrollback al instante. |
-| `GRmenu.continue` | `(texto = "Presiona cualquier tecla...")` | Pausa la ejecucion hasta presionar una tecla. |
-| `GRmenu.help` | `()` | Muestra la guia interactiva de documentacion en consola. |
+| `GRmenu.theme` | `(nombre_o_simbolo)` | Carga un tema `.gr` predefinido para todo el sistema. |
+| `GRmenu.import_config` | `(ruta_archivo_gr)` | Carga un archivo de tema `.gr` personalizado. |
+| `GRmenu.export_from_file`| `(script_origen, archivo_gr)` | Extrae el tema de un script sin correr bucles. |
+| `GRmenu.style` | `(texto_css_gr)` | Inyecta estilos CSS inline globalmente. |
+| `GRmenu.table` | `(headers:, rows:, title:, search:, sort:, page_size:)` | Muestra tabla interactiva y devuelve fila elegida. |
+| `GRmenu.card` | `(title:, content:, style:, color:, border_color:, title_color:)` | Muestra tarjeta con auto-wrap. |
+| `GRmenu.alert` | `(tipo, mensaje, title:, style:, color:)` | Muestra alerta emergente estilizada. |
+| `GRmenu.checkbox` | `(items, title:, color:, style:, preselected:)` | Devuelve array con items marcados. |
+| `GRmenu.slider` | `(prompt, min:, max:, step:, default:, unit:, color:)` | Devuelve valor numerico seleccionado. |
+| `GRmenu.confirm` | `(pregunta, default: true, color:, style:)` | Devuelve booleano (`true`/`false`). |
+| `GRmenu.input` | `(prompt, default: "", password: false, color:)` | Devuelve string ingresado. |
+| `GRmenu.image` | `(filepath, width:, style:, color:)` | Renderiza imagen en TrueColor 24-bit. |
+| `GRmenu.progress` | `(total = 100, title:, color:, style:, &bloque)` | Barra de progreso con bloque. |
+| `GRmenu.spinner` | `(mensaje, color:, delay:, &bloque)` | Spinner animado no bloqueante. |
+| `GRmenu.banner` | `(texto, delay = 0, color:, style:, font:)` | Imprime banner ASCII 3D. |
+| `GRmenu.help` | `()` | Muestra guia de documentacion en consola. |
 
 ---
 
@@ -484,9 +613,10 @@ Configura el diseno del marco mediante el parametro `style: 1..20`:
 
 | Tecla / Combinacion | Contexto | Accion Realizada |
 |:--------------------|:---------|:-----------------|
-| `↑` (Arriba) / `k`  | Menus / Checkbox | Mueve el foco hacia arriba (con salto continuo *Snake* en extremos). |
-| `↓` (Abajo) / `j`   | Menus / Checkbox | Mueve el foco hacia abajo. |
+| `↑` (Arriba) / `k`  | Menus / Tablas / Checkbox | Mueve el foco hacia arriba (con salto continuo *Snake* en extremos). |
+| `↓` (Abajo) / `j`   | Menus / Tablas / Checkbox | Mueve el foco hacia abajo. |
 | `←` / `→`           | Grid 2D  | Salta de columna a la izquierda o derecha. |
+| `s` / `S`           | Tablas   | Ordena la tabla por la columna actual alternando ASC/DESC. |
 | `Espacio`           | Checkbox | Marca o desmarca la casilla del elemento actual `[X]` / `[ ]`. |
 | `a` / `A`           | Checkbox | Marca todos los elementos (*Select All*). |
 | `n` / `N`           | Checkbox | Desmarca todos los elementos (*Deselect All*). |
@@ -500,43 +630,8 @@ Configura el diseno del marco mediante el parametro `style: 1..20`:
 
 ---
 
-## Recetas y Casos de Uso del Mundo Real
-
-### Asistente de Instalacion de Servidores
-
-```ruby
-require 'GRmenu'
-
-GRmenu.clear_screen
-GRmenu.banner("SETUP", 0, color: "rgb", style: 3, font: 1)
-
-nombre = GRmenu.input("Nombre del proyecto:", default: "mi-app", color: "rgb")
-puerto = GRmenu.slider("Puerto HTTP:", min: 3000, max: 9000, step: 100, default: 8080, color: "rgb")
-
-modulos = [
-  ["Proxy Nginx", true, "Servidor web frontal"],
-  ["Base PostgreSQL", true, "Base de datos relacional"],
-  ["Redis Cache", false, "Acelerador de sesiones"]
-]
-seleccion = GRmenu.checkbox(modulos, title: "Selecciona Modulos", color: "rgb")
-
-if GRmenu.confirm("Deseas comenzar la instalacion ahora?", default: true, color: "rgb")
-  GRmenu.progress(100, title: "Instalando Componentes", color: "rgb") do |bar|
-    seleccion.each_with_index do |item, idx|
-      sleep 0.4
-      bar.advance(100 / seleccion.length, status: "Configurando #{item[0]}...")
-    end
-  end
-  puts Color.bright_green("\n-> Instalacion de '#{nombre}' completada en el puerto #{puerto}!")
-end
-GRmenu.continue
-```
-
----
-
 ## Licencia
 
 Distribuido bajo licencia **MIT**. Consulta [`LICENSE`](LICENSE) para mas detalles.
 
 Desarrollado con precision por **[grcode](https://github.com/JoseEduardoGR)**
-