Cette page ne dessine rien de la coquille : elle déclare les quatre balises et laisse
/commun/coquille.js les rendre.
Les 17 pages de l'application font exactement la même chose, puis n'écrivent que leur
<main>.
Le menu vient de RAIL,
RAIL_BAS,
DOCK,
RAIL_DE et
SECTIONS, recopiés de
specs/mockups/assets/mockup-nav.js.
Aucune page ne contient de lien de navigation.
<ui-rail page="impayes">
<ui-rail-nav page="impayes">
../../ dans une spec).
Deux stores, un x-for par type. Un message
passe par le store, jamais par un setTimeout de page.
Le chrome vient du frame ; le corps vient de la page. Fermeture par Échap, par le fond ou par × ; le focus part sur × et revient au bouton d'ouverture.
Même principe : le voile, le panneau, l'en-tête, la croix et le pied viennent du frame ; la page n'écrit que le corps et ses boutons. Échap ne ferme que la couche du dessus.
Une zone sans données ne s'écrit plus : elle se nomme. Le frame dessine, la page ne fournit que ses mots.
chargement · squelette (3 lignes)
chargement · cartes (5) et attente
vide · avec une action
erreur · bloc avec « Réessayer », puis bandeau
permission — aucun écran dans les maquettes (0/20), le type existe pour le jour où un rôle apparaîtra :
document.querySelectorAll('ui-rail').length; // 1
document.querySelectorAll('ui-rail [data-rail]').length; // 5 (4 raccourcis + paramètres)
document.querySelectorAll('ui-rail [aria-current="page"]').length; // 1 (impayes)
document.querySelectorAll('ui-rail-nav h2').length; // 5 sections
document.querySelectorAll('ui-rail-nav [data-espace]').length; // 15 entrées
document.querySelector('ui-rail-nav [aria-current="page"]').dataset.espace; // "impayes"
document.querySelectorAll('ui-rail [data-coquille="dock"] [data-dock]').length; // 6
document.querySelector('ui-rail [data-coquille-sortie]').getAttribute('href'); // "/login/"
document.querySelectorAll('ui-notification template[x-for]').length; // 4
document.querySelectorAll('ui-toasts template[x-for]').length; // 4
Alpine.store('notifications').items.length; // 0 au départ
Le corps du volet appartient à la page
Son contenu est déclaré dans data-volet-corps,
qui ne s'exécute pas tant que le volet est fermé — comme le template x-if des maquettes.
space-y-4 du corps.
Le corps de la modale appartient à la page, comme celui du volet. Il ne s'exécute pas tant que la modale est fermée.
#modale-titre et
#btn-modale-close sont les deux ids du frame.
Aucune croix : le focus part sur le panneau. Aucun pied : la rangée n'est pas rendue.