Ficha
- Categoría
- App shell & patterns
- Nivel
- plantilla
- Estado
- en revisión
- Radix
- no
- Actualizado
- 2026-10-26
- Figma
- 393:10789
- Fuente
design-system/componentes/AppShellFoco.md
Esqueleto de foco, sin rail: una tarjeta de tarea con la barra de foco (salir con confirmación, título y progreso, meta opcional como «Turno 9 · 11:20»), el slot de contenido y un pie con las acciones (secundaria a la izquierda; extra y primaria a la derecha). Coach=with mantiene el panel del coach a la derecha; without = evaluaciones y simulación (el coach pausa). Height=viewport: alto fijo (la conversación llena el alto) · auto: mínimo el viewport y crece con el contenido, pie abajo.
Cuándo usarlo
- Pasos de Aprender, Reforzar, evaluaciones y todo el flujo de la simulación (reglas/05 §05.1).
Cuándo NO usarlo
- Páginas de sección con navegación → AppShell/Principal.
- Login y registro → AppShell/Acceso.
Anatomía
Fondo surface/neutral/02-subtle, padding 8, gap 8 · tarjeta _FocusCard (radius-5x, borde 0.5 blanco, Shadow/Card): barra de foco 64 (IconButton ghost ✕ · título body/sm + ProgressBar sm 200 · meta caption/md) · slot Content (padding 20) · pie (padding 16/20, space-between) · panel del coach 324 (Coach=with).
Props
| Prop | Figma | Valores | Por defecto |
|---|---|---|---|
coach | Coach | with · without | with |
height | Height | viewport · auto | viewport |
title | Title | texto | — |
meta + showMeta | Meta · Show meta | texto · boolean | — · false |
showProgress + progress | Show progress · instancia ProgressBar | boolean · { progress, label, value } | true · — |
showFooter | Show footer | boolean | true |
primaryAction + showPrimaryAction | primary-action · Show primary action | nodo (Button primary) · boolean | — · true |
secondaryAction + showSecondaryAction | secondary-action · Show secondary action | nodo (Button tertiary) · boolean | — · true |
extraAction + showExtraAction | extra-action · Show extra action | nodo (Button secondary) · boolean | — · false |
children | slot Content | nodos | — |
onExit | — (la ✕) | callback | — |
coachPanel | — (CoachPanel, T-02 §4) | nodo | — |
Estados
Sin estados propios; height y coach son variantes.
Accesibilidad
- La ✕ es un botón «Salir»; con progreso o conversación en curso abre el diálogo de confirmación (lo decide la pantalla en
onExit). - El título es el
<h1>de la página; la tarjeta de tarea es el landmark<main>. ProgressBar expone role=progressbar. En evaluaciones el coach está ausente, no deshabilitado. Pie: una sola acción primaria (DV-16).
Contenido
Título = «Módulo · paso · n de N» (o el escenario en la simulación); meta solo cuando hay un temporizador o un modo que declarar («Modo evaluación · 12:30», «Turno 9 · 11:20»).
Errores conocidos
coach="with"sincoachPanelno muestra nada a la derecha: el CoachPanel llega en T-02 §4.- El diálogo «¿Terminar la práctica?» no tiene componente en Figma (Overlays vacío): candidato
Dialog(Radix) en el MANIFIESTO; se construye con la pantalla 07.
Changelog
- 2026-10-26 · nace (T-02) con
_FocusCarddentro; la demo compone la conversación con Roberto (Flow 1 › 03 y 06).