Catálogo de Componentes A2UI

Publicación del Catálogo

El catálogo completo se publica automáticamente en formato JSON Schema en http://localhost:3000/catalogo/v1.json. Este es el catalogId que el agente declara en cada mensaje createSurface.

Explorador de Componentes del Catálogo

Catálogo Oficial de Componentes A2UI (@maya/catalogo)

21 componentes diseñados con primitivas shadcn/ui y tokens Banorte, validados con Zod y Ajv.

Todos (21)Crédito & DeudaAhorro & MetasGastos & FugasInversionesFeedback

CREDITO⚡ elegir_tarjeta

ResumenTarjeta

Tarjeta héroe para crédito revolvente con semaforización de atraso, saldo y uso.

Props declaradas en Zod:

limitesaldotasapagoMinimodiasAtrasoplanActivo

💡 Monto con tabular-nums como elemento principal y badge rojo en caso de mora.

CREDITO⚡ aplicar_plan_pago

PlanDePago

Comparativa de plazos (12, 18, 24 meses) con mensualidad, CAT y ahorro garantizado.

Props declaradas en Zod:

opciones: Array<{ meses, mensualidad, cat, ahorroVsMinimo }>mesSeleccionado

💡 Acción directa que viaja al agente para mutar el estado en PostgreSQL.

CREDITO

ProyeccionPagoCredito

Visualización de crédito de nómina o personal sin mora, amortización fija.

Props declaradas en Zod:

saldoPendientetasaAnualmensualidadpagosRestantesinteresesPorPagar

💡 Permite al usuario contrastar costo financiero contra capacidad de ahorro.

CREDITO

Calendario

Cronograma visual de amortizaciones tras la activación de un plan de reestructura.

Props declaradas en Zod:

pagos: Array<{ numero, fecha, monto, saldoRestante }>

💡 Renderizado reactivo una vez que la tool confirma la activación del plan.

AHORRO⚡ crear_apartado

SimuladorMeta

Control interactivo de slider para proyectar horizontes de ahorro y fondos de emergencia.

Props declaradas en Zod:

montoObjetivoaportacionSugeridacapacidadMaximaplazoMeses

💡 Slider táctil de 48px que recalcula meses restantes en vivo sin recargar.

AHORRO

MetaActiva

Superficie de seguimiento con barra de progreso, saldo acumulado y fecha meta.

Props declaradas en Zod:

nombremontoObjetivomontoActualporcentajefechaEstimada

💡 Pintada automáticamente cuando se completa la acción crear_apartado.

AHORRO

TermometroSaludFinanciera

Medidor cuantitativo de salud financiera (0 a 100) calibrado contra ingresos.

Props declaradas en Zod:

puntajenivelfactoresPositivosfactoresDeAtencion

💡 Bandas cromáticas accesibles con semáforo Banorte.

GASTOS

GastoPorCategoria

Gráfico de barras apiladas o barras Recharts con montos reales por categoría.

Props declaradas en Zod:

periodototalGastocategorias: Array<{ nombre, monto, porcentaje, atipico }>

💡 Resalta en rojo Banorte la categoría que superó su desviación histórica.

GASTOS

AlertaGastoAtipico

Tarjeta de atención ante gastos hormiga o retiros no habituales en cajeros.

Props declaradas en Zod:

categoriadesviacionPorcentajemontoExcedenterecomendacion

💡 Detecta anomalías estadísticas en vez de reportar simplemente el gasto más alto.

FEEDBACK

Conclusion

Tarjeta de cierre de Maya con el consejo accionable y la justificación financiera.

Props declaradas en Zod:

resumenaccionRecomendadaimpactoMensualEstimado

💡 Transforma el típico texto largo del LLM en una tarjeta táctil legible de un vistazo.

INVERSION

DistribucionPortafolio

Gráfico de dona de activos de inversión (Cetes, Fondos, Renta Variable).

Props declaradas en Zod:

saldoTotalactivos: Array<{ clase, monto, porcentaje, rendimiento }>

💡 Utilizado en la portada de clientes de alto patrimonio (Perfil Carmen).

FEEDBACK

Confirmacion

Banner de verificación que atestigua la persistencia de una mutación en PostgreSQL.

Props declaradas en Zod:

titulofoliofechaOperacionmontoInvolucrado

💡 Evita alertas invasivas del navegador; feedback integrado en el lienzo.

---

Principios de Diseño de Componentes

Cada componente del catálogo respeta los principios acordados en el sistema de diseño:

1. Una sola idea por tarjeta: Cada widget se enfoca en resolver un concepto claro (un saldo, una comparativa de plazos o un gráfico de categorías).
2. El monto como elemento más grande: Los importes monetarios utilizan la clase tabular-nums y fuentes de tamaño prominente para máxima legibilidad.
3. Objetivos táctiles de 48 px: Todos los botones, interruptores y sliders están optimizados para dedos en dispositivos móviles.
4. Semántica de colores Banorte: El rojo (#EC0029) se reserva exclusivamente para la acción primaria o llamadas de atención por morosidad o fugas críticas.