Composants

Hiérarchie à 3 niveaux

Tier 1 — Primitifs UI (components/ui/)

Composants génériques sans logique métier. Prefix Base.

Composant	Rôle
BaseButton	Bouton avec variantes (primary, secondary, ghost, danger)
BaseCard	Carte conteneur avec élévation
BaseModal	Modale accessible (focus trap, Escape)
BaseToast	Notification temporaire
BaseBadge	Badge/tag coloré
BaseSlider	Curseur pour valeurs numériques
BaseToggle	Interrupteur on/off
BaseSpinner	Indicateur de chargement
BaseEmptyState	État vide avec icône et message
BaseTimer	Chronomètre format MM:SS
BaseIcon	Icône SVG inline
BaseProgressBar	Barre de progression
BaseAccordion	Panneau dépliable
BasePWAInstall	Bandeau d’installation PWA

Tier 1.5 — Layout (components/layout/)

Shell de l’application, navigation.

Composant	Rôle
AppShell	Conteneur principal (header + content + nav)
TopBar	Barre supérieure (titre, statut connexion)
BottomNav	Navigation par onglets (4 vues)
ConnectionIndicator	Indicateur de connexion WebSocket

Tier 2 — Domaine

Composants métier organisés par domaine fonctionnel.

components/vitals/ — Affichage constantes vitales :

Composant	Rôle
VitalDisplay	Affichage d’un paramètre vital (valeur + label + unité)
VitalGrid	Grille de tous les paramètres vitaux
AlarmBanner	Bandeau d’alarme clignotant
RhythmIndicator	Indicateur du rythme cardiaque courant

components/scenario/ — Panneau de simulation :

Composant	Rôle
ScenarioCard	Carte de scénario (nom, catégorie, difficulté)
ScenarioList	Liste filtrable des scénarios
CategoryFilter	Filtre par catégorie médicale
TrainerPanel	Panneau de contrôle formateur
VitalOverride	Modification d’un paramètre vital à la volée
StateSelector	Sélection d’état dans le scénario
EventTrigger	Déclenchement d’événement manuel
SessionTimeline	Timeline chronologique des événements
SessionExport	Export de session (JSON, CSV)
DeviceList	Liste des dispositifs connectés
DeviceCard	Carte d’un dispositif (type, statut, batterie)
QuickAction	Bouton d’action rapide (médicament, note)

components/help/ — Aide et onboarding :

Composant	Rôle
OnboardingTour	Visite guidée interactive
HelpTooltip	Infobulle d’aide contextuelle
WhatsNew	Changelog des nouveautés
ShortcutSheet	Feuille des raccourcis

Conventions

• <script setup lang="ts"> dans chaque composant
• Props typées via defineProps<T>()
• Emits typés via defineEmits<T>()
• Touch target 44px minimum
• Design tokens : var(--color-*), jamais de couleurs Tailwind en dur
• Pas de v-html (risque XSS)