Matriz de características de sgcHTML — Todos los componentes

Componente	Clase	Descripción	Ayuda
NavBar	`TsgcHTMLComponent_NavBar`	Barra de navegación superior responsive con marca y elementos de menú plegables.	Docs
Sidebar	`TsgcHTMLComponent_Sidebar`	Navegación lateral vertical con iconos, cabeceras, separadores y un pie.	Docs
Breadcrumb	`TsgcHTMLComponent_Breadcrumb`	Ruta de navegación que muestra la ubicación actual dentro de una jerarquía.	Docs
Tabs	`TsgcHTMLComponent_Tabs`	Conjunto de pestañas (tab, pill o subrayado) con paneles de contenido intercambiables.	Docs
Pagination	`TsgcHTMLComponent_Pagination`	Control de navegación de páginas derivado del número de elementos o de páginas.	Docs
Toolbar	`TsgcHTMLComponent_Toolbar`	Barra de herramientas que agrupa botones con separadores y tooltips.	Docs
TreeView	`TsgcHTMLComponent_TreeView`	Árbol jerárquico plegable, cargable desde un dataset.	Docs
Stepper	`TsgcHTMLComponent_Stepper`	Indicador de asistente / progreso por pasos, horizontal o vertical.	Docs
Dropdown	`TsgcHTMLComponent_Dropdown`	Botón desplegable con un menú de enlaces, cabeceras y separadores.	Docs
ButtonGroup	`TsgcHTMLComponent_ButtonGroup`	Conjunto segmentado de botones, horizontal o vertical.	Docs
ListGroup	`TsgcHTMLComponent_ListGroup`	Grupo de lista de enlaces o elementos con insignias y contenido adicional.	Docs
DashboardLayout	`TsgcHTMLDashboardLayout`	Estructura completa de panel con una barra lateral fija y secciones de contenido.	Docs
Site	`TsgcHTMLComponent_Site`	Estructura completa de página — cabecera, menú de navegación, contenido y pie — con una plantilla de disposición intercambiable.	Docs
Splitter	`TsgcHTMLComponent_Splitter`	Dos paneles redimensionables con una barra divisoria arrastrable, horizontal o vertical, con posición persistida opcional.	Docs

Datos y Tablas

Grids, calendarios y tableros que renderizan tus datasets directamente.

Componente	Clase	Descripción	Ayuda
Grid	`TsgcHTMLComponent_Grid`	Tabla con muchas funciones: orden, filtrado, exportación a CSV/PDF, edición en línea, agrupación, scroll virtual y consultas con IA.	Docs
DataTable	`TsgcHTMLComponent_DataTable`	Tabla de datos de más alto nivel que envuelve Grid + Pagination con una barra de herramientas, búsqueda y recuento de filas.	Docs
Calendar	`TsgcHTMLComponent_Calendar`	Calendario en cuadrícula mensual con puntos de eventos y navegación anterior/siguiente.	Docs
Scheduler	`TsgcHTMLComponent_Scheduler`	Planificador de calendario (vistas de mes / semana) que renderiza eventos por fecha.	Docs
Timeline	`TsgcHTMLComponent_Timeline`	Línea de tiempo vertical de eventos con fecha, cargable desde un dataset.	Docs
KanbanBoard	`TsgcHTMLComponent_KanbanBoard`	Tablero Kanban de columnas y tarjetas arrastrables.	Docs
Gantt	`TsgcHTMLComponent_Gantt`	Diagrama de Gantt de cronograma de proyecto con barras de progreso de tareas.	Docs
TreeGrid	`TsgcHTMLComponent_TreeGrid`	Tabla Bootstrap con filas jerárquicas plegables construidas a partir de pares de nodos Id/ParentId.	Docs
PivotTable	`TsgcHTMLComponent_PivotTable`	Tabla dinámica (pivot) Bootstrap que agrupa filas y columnas y agrega medidas con totales de fila, columna y gran total.	Docs
ActivityFeed	`TsgcHTMLComponent_ActivityFeed`	Feed de actividad en directo, con lo más reciente primero, marcas de tiempo relativas y envío out-of-band por WebSocket.	Docs
AuditTrail	`TsgcHTMLComponent_AuditTrail`	Feed cronológico de registro de auditoría de acciones de usuario y del sistema con actor, acción, objetivo y marca de tiempo.	Docs

Gráficos y Visualización

Visualizaciones basadas en datos creadas a partir de tus propios números.

Componente	Clase	Descripción	Ayuda
Chart	`TsgcHTMLComponent_Chart`	Gráfico Chart.js: líneas, barras, circular, anillo, radar, polar, burbujas y dispersión.	Docs
Gauge	`TsgcHTMLComponent_Gauge`	Medidor SVG semicircular con umbrales de color bajo / medio / alto.	Docs
Diagram	`TsgcHTMLComponent_Diagram`	Diagrama de flujo de nodos y flechas renderizado como SVG en línea.	Docs
Map	`TsgcHTMLComponent_Map`	Mapa interactivo Leaflet.js (mosaicos de OpenStreetMap / CartoDB) con marcadores.	Docs
Heatmap	`TsgcHTMLComponent_Heatmap`	Cuadrícula de mapa de calor SVG con escala de color a partir de valores de celda o un dataset vinculado, con leyenda y etiquetas de fila/columna.	Docs
Sparkline	`TsgcHTMLComponent_Sparkline`	Sparkline SVG compacto en línea, de líneas, barras o área, a partir de una serie de valores o un dataset vinculado.	Docs
CandlestickChart	`TsgcHTMLComponent_CandlestickChart`	Gráfico de velas OHLC en SVG con mechas, colores de subida/bajada y una franja de volumen opcional.	Docs
QRCode	`TsgcHTMLComponent_QRCode`	Código QR SVG ISO/IEC 18004 en Pascal puro a partir de cualquier texto o URL, con nivel de corrección de errores seleccionable.	Docs
Barcode	`TsgcHTMLComponent_Barcode`	Código de barras Code 128 SVG en Pascal puro a partir de cualquier texto ASCII, con leyenda legible opcional.	Docs
TreeMap	`TsgcHTMLComponent_TreeMap`	Treemap squarified renderizado como SVG en línea autocontenido y generado en el servidor, sin necesidad de biblioteca de gráficos.	Docs

Formularios y Entradas

Todo lo que necesitas para capturar datos, con validación y vinculación a datasets.

Componente	Clase	Descripción	Ayuda
Form	`TsgcHTMLComponent_Form`	Constructor de formularios basado en datos con validación, diseños y generación de formularios con IA.	Docs
Edit	`TsgcHTMLComponent_Edit`	Campo de texto de una sola línea con etiqueta, texto de ayuda y vinculación a dataset.	Docs
Memo	`TsgcHTMLComponent_Memo`	Campo de área de texto multilínea con etiqueta y texto de ayuda.	Docs
CheckBox	`TsgcHTMLComponent_CheckBox`	Casilla de verificación con etiqueta y estado marcado.	Docs
RadioGroup	`TsgcHTMLComponent_RadioGroup`	Grupo de opciones de radio mutuamente excluyentes.	Docs
Select	`TsgcHTMLComponent_Select`	Lista desplegable con grupos de opciones, selección múltiple y vinculación a dataset.	Docs
InputGroup	`TsgcHTMLComponent_InputGroup`	Campo con texto complementario antepuesto / añadido.	Docs
AutoComplete	`TsgcHTMLComponent_AutoComplete`	Campo de texto respaldado por un datalist HTML5 de sugerencias.	Docs
DatePicker	`TsgcHTMLComponent_DatePicker`	Campo nativo de entrada de fecha / hora / fecha y hora.	Docs
FileUpload	`TsgcHTMLComponent_FileUpload`	Zona de subida de archivos por arrastrar y soltar con envío de formulario multipart.	Docs
RichEditor	`TsgcHTMLComponent_RichEditor`	Editor de texto enriquecido WYSIWYG basado en Quill con campo de formulario oculto.	Docs
Rating	`TsgcHTMLComponent_Rating`	Visualización o entrada de valoración con estrellas (símbolos).	Docs
MultiSelect	`TsgcHTMLComponent_MultiSelect`	Desplegable Bootstrap de selección múltiple con búsqueda, chips, opciones agrupadas y vinculación a dataset.	Docs
ColorPicker	`TsgcHTMLComponent_ColorPicker`	Entrada de color HTML5 nativa con campo de texto hexadecimal opcional y muestras predefinidas.	Docs
Slider	`TsgcHTMLComponent_Slider`	Control deslizante de rango Bootstrap con una insignia de valor en vivo, etiquetas mín/máx y estilo de color.	Docs
TimePicker	`TsgcHTMLComponent_TimePicker`	Entrada de hora HTML5 nativa con límites mín/máx y granularidad de segundos.	Docs
SignaturePad	`TsgcHTMLComponent_SignaturePad`	Panel de firma en canvas basado en eventos de puntero, con acciones Borrar, Deshacer y Guardar.	Docs
Transfer	`TsgcHTMLComponent_Transfer`	Widget de doble lista para mover elementos entre un panel disponible y uno asignado, con filtrado y vinculación a dataset.	Docs
DateTimePicker	`TsgcHTMLComponent_DateTimePicker`	Selector de fecha y hora HTML5 nativo que combina calendario y reloj en un solo campo.	Docs
DateRangePicker	`TsgcHTMLComponent_DateRangePicker`	Campos emparejados de fecha inicial y final para elegir un rango de fechas, con límites mín/máx.	Docs
RangeSlider	`TsgcHTMLComponent_RangeSlider`	Control deslizante de doble manija que selecciona un par de valores mínimo/máximo, con insignias de valor en vivo.	Docs
CameraScanner	`TsgcHTMLComponent_CameraScanner`	Panel de cámara en vivo que escanea códigos de barras y códigos QR con el BarcodeDetector nativo del navegador, sin biblioteca de terceros.	Docs
NumPad	`TsgcHTMLComponent_NumPad`	Teclado numérico y de moneda táctil para la entrada en punto de venta, con botones de importe rápido y un formato independiente del idioma.	Docs

Contenido y Diseño

Tarjetas, multimedia y mosaicos de KPI para componer una página.

Componente	Clase	Descripción	Ayuda
Panel	`TsgcHTMLComponent_Panel`	Panel de tarjeta Bootstrap con cabecera / cuerpo / pie, plegable y desplazable.	Docs
StatCard	`TsgcHTMLComponent_StatCard`	Tarjeta de KPI / estadística para paneles con icono, flecha de tendencia y degradado opcional.	Docs
Accordion	`TsgcHTMLComponent_Accordion`	Acordeón de colapso vertical con paneles expandibles apilados.	Docs
Carousel	`TsgcHTMLComponent_Carousel`	Pase de diapositivas / carrusel de imágenes con indicadores, controles y reproducción automática.	Docs
Image	`TsgcHTMLComponent_Image`	Imagen con forma, responsive / carga diferida, enlace a lightbox y pie de foto.	Docs
Avatar	`TsgcHTMLComponent_Avatar`	Avatar de usuario (imagen o iniciales) con tamaño, forma y punto de estado de presencia.	Docs
Video	`TsgcHTMLComponent_Video`	Reproductor de vídeo / audio HTML5 más un ayudante para incrustar YouTube.	Docs
Badge	`TsgcHTMLComponent_Badge`	Insignia Bootstrap individual con color, forma de píldora, un icono en línea y un modo de punto de notificación posicionado.	Docs
PDFViewer	`TsgcHTMLComponent_PDFViewer`	Visor de PDF integrado en la página basado en pdf.js, con navegación de páginas, zoom, búsqueda, descarga e impresión.	Docs
Chip	`TsgcHTMLComponent_Chip`	Chip / etiqueta compacta con un icono opcional, color y un botón de cierre eliminable.	Docs

Superposiciones y Avisos

Diálogos, superficies de estado y estados de carga.

Componente	Clase	Descripción	Ayuda
Modal	`TsgcHTMLComponent_Modal`	Diálogo modal con título / cuerpo / pie, tamaños, centrado y fondo estático.	Docs
Offcanvas	`TsgcHTMLComponent_Offcanvas`	Panel deslizante off-canvas desde la izquierda, la derecha, arriba o abajo.	Docs
Popover	`TsgcHTMLComponent_Popover`	Burbuja de popover sobre un elemento disparador (clic / hover / foco).	Docs
Toast	`TsgcHTMLComponent_Toast`	Notificación toast con cabecera, cuerpo, marca de tiempo y ocultación automática.	Docs
Snackbar	`TsgcHTMLComponent_Snackbar`	Snackbar transitorio de estilo Material con una acción opcional.	Docs
Notification	`TsgcHTMLComponent_Notification`	Centro de notificaciones desplegable con icono de campana e insignia de no leídas.	Docs
Spinner	`TsgcHTMLComponent_Spinner`	Spinner de carga (borde / crecimiento), con tamaño y color.	Docs
Placeholder	`TsgcHTMLComponent_Placeholder`	Tarjeta de carga esqueleto / placeholder con un brillo animado.	Docs
ContextMenu	`TsgcHTMLComponent_ContextMenu`	Menú desplegable de clic derecho acotado a un selector CSS, con iconos, separadores, cabeceras y acciones enrutadas al servidor.	Docs
JobProgress	`TsgcHTMLComponent_JobProgress`	Lista en directo de barras de progreso de tareas en segundo plano con insignias de estado, botones de cancelar y actualizaciones de fragmento out-of-band.	Docs
LogViewer	`TsgcHTMLComponent_LogViewer`	Visor de log / terminal en streaming con filtro de nivel, búsqueda y desplazamiento automático.	Docs
ProgressBar	`TsgcHTMLComponent_ProgressBar`	Barra de progreso Bootstrap, rayada y animada, de segmento único o apilada en varios segmentos.	Docs
CommandPalette	`TsgcHTMLComponent_CommandPalette`	Lanzador de acciones rápidas Ctrl+K / Cmd+K con filtrado por subcadena y luego difuso, categorías y acciones enrutadas al servidor.	Docs
EmptyState	`TsgcHTMLComponent_EmptyState`	El panel que muestra una cuadrícula, una lista o un resultado de búsqueda cuando no tiene filas, con icono, título, descripción y hasta dos botones.	Docs

Chat e IA

UI conversacional, desde simples burbujas hasta un asistente de IA con streaming.

Componente	Clase	Descripción	Ayuda
ChatBox	`TsgcHTMLComponent_ChatBox`	Caja de burbujas de chat estilo tarjeta con una barra de entrada e indicador de escritura.	Docs
Chat	`TsgcHTMLComponent_Chat`	Chat estilo WhatsApp con mensajes de texto / imagen / archivo / audio / vídeo, confirmaciones de lectura y respuestas.	Docs
AIChat	`TsgcHTMLComponent_AIChat`	Chat de asistente de IA con selector de proveedor / modelo, streaming de tokens y citas de fuentes RAG.	Docs
Presence	`TsgcHTMLComponent_Presence`	Lista de "quién está en línea" como pila de avatares o lista, con actualizaciones de estado en vivo.	Docs

Autenticación

Flujos de inicio de sesión listos para usar, desde contraseñas hasta passkeys.

Componente	Clase	Descripción	Ayuda
Login	`TsgcHTMLComponent_Login`	Formulario / página de inicio de sesión listo para usar (tarjeta, centrado o a página completa) con recordarme y alertas.	Docs
SocialLogin	`TsgcHTMLComponent_SocialLogin`	Panel de botones de inicio de sesión social con OAuth (Google, Facebook, Apple, GitHub, Microsoft y más).	Docs
OAuthCallback	`TsgcHTMLComponent_OAuthCallback`	Página de retorno / aterrizaje de OAuth en estado de éxito, error o carga con redirección automática.	Docs
WebAuthnLogin	`TsgcHTMLComponent_WebAuthnLogin`	Widget de inicio de sesión y registro con passkey / WebAuthn sin contraseña.	Docs
RolesPermissions	`TsgcHTMLComponent_RolesPermissions`	Matriz de roles / permisos con una casilla por celda y actualizaciones de concesión en vivo por WebSocket.	Docs
UserManagement	`TsgcHTMLComponent_UserManagement`	Tabla de administración de usuarios con roles, estado, búsqueda y un desplegable de acciones por fila.	Docs
ImpersonateBanner	`TsgcHTMLComponent_ImpersonateBanner`	Banner de suplantación de administrador que se muestra mientras se actúa como otro usuario, con salida en un clic.	Docs

Infraestructura

Motor, servidor y temas

Las piezas no visuales que sirven las páginas y las mantienen en directo.

Componente	Clase	Descripción	Ayuda
EngineServer	`TsgcHTMLEngine_Server`	Motor HTML vinculado a un `TsgcWebSocketHTTPServer` que sirve las páginas renderizadas y los assets incrustados.	Docs
HTMXEngine	`TsgcHTMX_Engine_Server`	Motor htmx conectado al mismo servidor. Engancha los manejadores de HTTP y WebSocket, despacha las peticiones y los mensajes entrantes, y envía o difunde fragmentos de HTML a los navegadores conectados en tiempo real (`DispatchRequest`, `DispatchMessage`, `PushFragment`, `BroadcastFragment`).	Docs
PageBuilder	`TsgcHTMLPageBuilder`	Ensambla los componentes registrados en una página responsive completa (con un editor visual en tiempo de diseño).	Docs
TemplateBootstrap	`TsgcHTMLTemplate_Bootstrap`	Envuelve el contenido del cuerpo en un documento HTML Bootstrap 5 completo con tema, idioma y dirección.	Docs
ThemeController	`TsgcHTMLThemeController`	Selector de temas en tiempo de ejecución cuya propiedad `Theme` (`ptDefault`, `ptDark`, `ptDarkPro`) aplica el tema seleccionado y la hoja de estilos compartida a la página.	Docs
ThemeBuilder	`TsgcHTMLThemeBuilder`	Generador de CSS cuyo `Mode` (`tmLight`, `tmDark`, `tmSystem`) escribe variables CSS de Bootstrap a partir de los valores de las propiedades, con un script opcional de sincronización con la preferencia del sistema operativo para `tmSystem`.	Docs
HTMXFragment	`TsgcHTMX_Fragment`	Fragmento htmx out-of-band para enviar una actualización de página parcial desde el servidor al navegador.	Docs
HTMXRouter	`TsgcHTMX_Router`	Tabla de enrutamiento de `Routes` que hace coincidir la ruta de una petición entrante y la despacha (mediante `HandleRequest`) al manejador `OnRoute` de esa ruta.	Docs

Novedades de 2026.10

Componentes nuevos

Añadidos en esta versión, además de los 93 componentes listados arriba. Los recuentos por familia de arriba no cambian.

Componente	Clase	Descripción	Ayuda
CRUD	`TsgcHTMLComponent_CRUD`	El listado con búsqueda y paginación, el formulario de alta y edición, la confirmación de eliminación y la ruta de escritura de una tabla, sobre un dataset o sobre tu propio SQL mediante un adaptador de seis métodos.	Docs
NotificationInbox	`TsgcHTMLComponent_NotificationInbox`	Una campana con una insignia de no leídas y las notificaciones de un usuario. Tu aplicación responde a un evento con las filas que guarda y se entera de lo que el usuario ha leído.	Docs
NotificationPreferences	`TsgcHTMLComponent_NotificationPreferences`	Una tabla con una fila por categoría y una casilla por canal (en la app, push, correo electrónico). Tu aplicación carga y guarda los valores.	Docs
WebPush	`TsgcHTMLWebPush`	Web Push con VAPID: valida las suscripciones que envía un navegador, se las entrega a tu aplicación y envía notificaciones cifradas a un navegador que no está en ejecución. Ediciones Enterprise y All-Access.	Docs
Auth	`TsgcHTMLAuth`	Sesiones con cookie, recordarme, tokens CSRF, limitación de inicios de sesión y protección de rutas por inicio de sesión y rol, sobre un almacén de sesiones en memoria o en archivo.	Docs
MCPApp	`TsgcHTMLComponent_MCPApp`	Una herramienta MCP que responde con una página, de modo que los componentes que ya usas se renderizan dentro de ChatGPT, Claude y VS Code.	Docs
AIAssistant	`TsgcHTMLAIAssistant`	Convierte una pregunta en lenguaje natural en un conjunto validado de filtros, ordenaciones, agrupaciones y resaltados para un grid, una tabla de datos, una tabla dinámica o un formulario. Un analizador integrado responde cuando no hay ningún proveedor configurado.	Docs
InlineAIPrompt	`TsgcHTMLComponent_InlineAIPrompt`	Un popover junto a un memo, un editor de texto enriquecido o una columna de un grid que consulta al asistente y notifica la respuesta solo cuando el usuario la acepta.	Docs

Novedades de 2026.10

Nuevas capacidades

Lo que han ganado el motor, la plantilla de página y el diseñador. Cada opción está desactivada por defecto, así que una página que no usa ninguna se renderiza exactamente igual que antes.

Capacidad	Qué añade	Ayuda
Enrutamiento	Rutas de plantilla con segmentos `{name}`, un filtro `Methods` por ruta, `RequireLogin` y `RequireRoles`, y un despacho neutral respecto al transporte, de modo que una ruta se ejecuta igual por HTTP, por WebSocket o en una prueba.	Docs
Navegación y actualizaciones en vivo	Ocho opciones de la plantilla de página que convierten un sitio renderizado en el servidor en una aplicación de una sola página sin nada de JavaScript propio: enlaces y formularios con boost, historial, intercambios morph, transiciones de vista, una barra de carga, restauración del scroll, bloqueo del envío y un toast de error. Todas están desactivadas por defecto.	Docs
WebSocket o SSE	Actualizaciones en vivo mediante eventos enviados por el servidor en lugar de un WebSocket, o una elección automática que recurre al flujo de eventos cuando el WebSocket no puede abrirse. El marcado, las rutas y los fragmentos siguen siendo los mismos.	Docs
AI Data Pack	Pregunta a un grid, una tabla de datos, una tabla dinámica o un formulario en lenguaje natural y aplica solo lo que dejó pasar un validador. El modelo recibe nombres de columna, tipos y tres valores de muestra, y filas solo cuando activas `AllowRowDataToProvider`. Un proveedor necesita las unidades de IA de la edición Enterprise o All-Access o el pack sgcAI, y un analizador integrado responde sin uno.	Docs
Generador de páginas con IA	En el diseñador, describe una página o entrégale una captura de pantalla, y construye la página con tus componentes registrados mediante un esquema que no puede nombrar nada más. No se aplica nada hasta que lo aceptas. El proveedor necesita las mismas unidades de IA.	Docs
Testing	Ids de elemento deterministas, un DOM pequeño con selectores CSS, aserciones HTML, archivos de snapshot y pruebas de peticiones sin servidor, sin necesidad de ningún framework de pruebas.	Docs