Ficha
- Categoría
- App shell & patterns
- Nivel
- plantilla
- Estado
- en revisión
- Radix
- no
- Actualizado
- 2026-10-26
- Figma
- 393:10038
- Fuente
design-system/componentes/AppShellPrincipal.md
Esqueleto principal: rail a la izquierda, la tarjeta de contenido (_ContentCard: TopBar + slot Content) y el panel del coach a la derecha. Ancho 1280 (el coach empuja, 360), 1024 (empuja, 324, o colapsado con el botón «Aithu Sales Coach» en la barra) y 768 (el coach se superpone con velo). Padding 8 alrededor sobre la arena.
Cuándo usarlo
- Inicio, Aprender, Practicar, Mi avance: toda pantalla de sección con navegación (reglas/05 §05.1).
Cuándo NO usarlo
- Pasos, evaluaciones y simulaciones (AppShell/Foco); login y registro (AppShell/Acceso).
Anatomía
Fondo arena padding 8 gap 8: Rail 84 · <main> (tarjeta radius-5x, filo blanco 0.5, Shadow/Card: TopBar sticky + slot padding 20) · panel del coach (360 ≥ 1280 · 324 en 1024 · superpuesto con scrim < 1024).
Props
| Prop | Figma | Valores | Por defecto |
|---|---|---|---|
coach | Coach | open · collapsed | open |
| (ancho) | Width | 1280 · 1024 · 768 → puntos de corte CSS (xl · lg · menor) | — |
title, breadcrumbs, action… | TopBar expuesta | props de TopBar | — |
children | slot Content | nodos | — |
coachPanel | coach-panel (CoachPanel) | nodo | — |
onToggleCoach | coach-button · collapse | callback | — |
activa, iniciales, onCuenta | Rail | ver Rail | — |
Estados
Coach open · collapsed; la superposición en 768 cierra el panel al pulsar el velo.
Accesibilidad
- Landmarks: nav (rail), main (tarjeta de contenido), complementary (el CoachPanel). El título es el h1 de la página. El botón del coach abre el panel; el velo lo cierra.
Contenido
Título = nombre de la sección como en el rail; breadcrumbs solo en segundo nivel (ajuste 26-oct sobre «no breadcrumbs in the MVP»).
Errores conocidos
- En Figma el velo de 768 es
base/fixed/blackal 40 % sin blur; aquí se usa la utilidadscrim(surface/scrim/default + Blur/Scrim) porque reglas/05 §05.5 lo llama velo (scrim). Por confirmar con Zoren.
Changelog
- 2026-10-26 · nace (T-02).