Referencia y medidas
La referencia es el prototipo HTML actual. Las medidas siguientes se toman de sus estilos base y se expresarán en puntos lógicos de egui, ajustados a la escala de pantalla. No representan píxeles físicos fijos.
| Región | Nombre del componente | Medida inicial |
|---|---|---|
| Encabezado | AppHeader | 43 puntos de alto |
| Menú superior | AppMenuBar | 30 puntos de alto |
| Navegación lateral | AppSidebar | 221 puntos de ancho expandida |
| Barra del espacio | WorkspaceToolbar | 53 puntos de alto |
| Pestañas | WorkspaceTabs | 38 puntos de alto |
| Área central | ContentHost | Ocupa el espacio restante |
| Panel contextual | ContextPanel | 269 puntos de ancho inicial |
| Pie de aplicación | AppFooter | 27 puntos de alto |
Estos valores se centralizan en configuración. Las pantallas no deben repetirlos como constantes propias.
Header
Contiene la marca Guaba Core, el nombre de la aplicación, el título del espacio activo y acciones globales, como cambiar el tema o abrir información de la aplicación.
Permanece visible cuando cambia la pantalla. Su contenido se recibe de la configuración y del estado del contenedor. El título se reduce u oculta si falta espacio, conservando la marca y las acciones necesarias.
Escritorio: los botones de minimizar, maximizar y cerrar pertenecen inicialmente al marco nativo del sistema operativo. Una barra de título personalizada podrá abordarse después y deberá ejecutar acciones reales.
Web: el header no muestra controles que simulen minimizar o cerrar una ventana de escritorio. La ventana es responsabilidad del navegador.
Menú superior
Los grupos base son Archivo, Ver, Herramientas y Ayuda. Cada entrada referencia un comando del contenedor. Los comandos pueden tener atajos y mostrar su estado disponible o deshabilitado.
Las pantallas podrán aportar grupos o acciones adicionales mediante el registro de comandos. El grupo «Operaciones» del prototipo es una referencia de contenido y no una dependencia fija del contenedor.
Abrir un menú cierra el anterior. Esc lo cierra sin ejecutar acciones. Todas las entradas deben poder recorrerse con teclado.
Sidebar
Organiza el acceso al espacio de trabajo, la búsqueda de pantallas, los grupos de navegación y las preferencias. El selector de espacio y el perfil se representan con datos de demostración hasta que exista un contrato específico para ellos.
La navegación se obtiene de un registro de pantallas. Seleccionar una entrada abre o activa una pestaña según su política de instancias. La opción activa permanece resaltada incluso cuando la pestaña es una instancia secundaria de esa pantalla.
Al contraerse, conserva iconos y tooltips. Las etiquetas y el ancho se recuperan al expandirla.
Toolbar del espacio
Muestra la ubicación actual —por ejemplo, Espacio de trabajo / Vista de ejemplo— y los controles globales del espacio. Su información debe corresponder a la pestaña activa.
Los estados operativos como «Jornada abierta» se consideran contenido ilustrativo del prototipo. En esta etapa se utilizarán estados propios de la interfaz, como «Listo» o «Configuración predeterminada».
Pestañas
Cada pestaña tiene una identidad propia, un título, un icono y una política de cierre. Puede indicar cambios pendientes mediante un marcador visual y una descripción accesible.
| Interacción | Resultado |
|---|---|
| Abrir una vista única ya abierta | Activar su pestaña existente |
| Abrir una vista con múltiples instancias | Crear una pestaña con estado independiente |
| Cambiar de pestaña | Conservar el estado de la vista anterior |
| Cerrar una vista sin cambios | Retirar esa pestaña |
| Cerrar una vista con cambios | Pedir confirmación antes de descartarla |
| Cancelar el cierre | Mantener pestaña y estado intactos |
| Cerrar la pestaña activa | Activar la anterior en el orden de pestañas; si no existe, la siguiente; finalmente Inicio |
Inicio permanece abierto. Si las pestañas exceden el espacio disponible, la barra permite desplazamiento horizontal y mantiene visible la activa.
La demostración con dos altas de clientes prueba la necesidad de múltiples instancias. El contenedor admite límites configurables por tipo de vista; el número dos no será un límite global de toda la aplicación.
Container o área central
ContentHost aloja una sola vista activa y le entrega el espacio disponible. Las demás vistas abiertas conservan sus datos en memoria.
La pantalla decide cómo organizar su contenido interno. El contenedor administra márgenes, tema, foco y disponibilidad del área. Las pantallas informan cuándo tienen cambios pendientes; no modifican directamente las pestañas.
El scroll del contenido es independiente del header, sidebar, pestañas y footer. Si una vista necesita restaurar su desplazamiento, lo conserva asociado a su instancia.
Panel contextual
Muestra contenido opcional aportado por la vista activa. Puede contener detalles, ayuda o una vista previa. Si la pantalla no aporta contenido, se oculta o presenta una ayuda general definida por configuración.
Se puede abrir y cerrar sin cambiar de pestaña ni perder datos. En pantallas estrechas aparece como una capa lateral que se cierra con Esc. Al cambiar de pestaña, actualiza su contenido y evita mostrar el detalle anterior como si perteneciera a la nueva vista.
Footer
Muestra estado de la interfaz, plataforma y versión. Puede incorporar un reloj opcional. Los mensajes se derivan de estados reales del contenedor.
No mostrará «Conectado», latencias, sucursales o estados de servicios como hechos reales mientras no exista una integración que los proporcione. «Demostración» es una etiqueta válida del entorno visual.
Capas comunes
Los diálogos de confirmación, menús emergentes, tooltips y notificaciones se presentan sobre el layout. Un diálogo modal retiene el foco y lo devuelve al control de origen al cerrarse. Las notificaciones breves no bloquean la navegación; los errores de inicio se mantienen visibles.
Adaptación al ancho
| Ancho lógico disponible | Comportamiento inicial |
|---|---|
| Más de 1050 | Sidebar expandida y panel contextual acoplado si está habilitado |
| Entre 761 y 1050 | Sidebar disponible; panel contextual como capa bajo demanda |
| Hasta 760 | Sidebar de iconos de 62 puntos; panel contextual como capa; toolbar simplificada |
La adaptación responde al ancho disponible en ambas plataformas. Estos modos preservan la estructura; no constituyen una definición de una aplicación móvil.
Tema y consistencia
Se conservarán los temas oscuro y claro de la referencia. Colores, tipografía, tamaños, bordes, espaciados y estados se centralizarán en ThemeTokens.
El acento violeta, los fondos oscuros y los separadores discretos son la dirección visual inicial. La fuente se incluirá como recurso compartido con licencia compatible; así no dependerá de que Segoe UI esté instalada en cada equipo.
Los componentes deben incluir foco visible, tooltips en iconos y alternativas textuales a los estados indicados por color. La validación de contraste, teclado y tecnologías de asistencia forma parte del plan de implementación.