AppMap

AppStayCalendar

Clavier : flèches (jour / semaine), Origine et Fin (semaine), Page préc./suiv. (mois), Maj + Page (année), Entrée pour choisir. La navigation traverse les deux mois comme une seule grille.

Panneaux de saisie

Les trois contenus vivent dans le panneau flottant et partagent un seul état d'ouverture : ouvrir l'un ferme l'autre. Aucun appel réseau — les hôtels sont fournis en props.

Dernière intention émise : aucune — cliquez sur Rechercher.

Mode mono-hôtel

Un hôtel précis choisi : pas de liste, une confirmation directe. Seule une issue malheureuse ouvre une fenêtre — sinon on part vers le moteur, ce qui reste inerte tant qu'aucun format de lien n'est spécifié.

Modale de résultats

Aucun appel réseau ici : les réponses sont factices. Seule la vérification de disponibilité appelle réellement l'API — elle échouera donc dans le playground, ce qui montre justement l'état d'échec de la card.

Le moteur monté dans le héros

La barre est entièrement contenue dans le héros, elle ne le déborde pas. En carrousel, les points de navigation sont remontés au-dessus d'elle et un voile n'assombrit qu'une bande sous la barre — jamais toute la photo. Le mode Titre seul ne la propose pas.

Carrousel avec moteur de réservation

Réservez votre séjour chez Timhotel

Via BlockHero, qui écoute l'intention, lance la recherche et ouvre la modale. Sans API dans le playground, la recherche échoue : la modale s'ouvre en état d'erreur, ce qui suffit à prouver le raccordement.

Recherche raccordée de bout en bout

Réservez votre séjour chez Timhotel

Titre seul, case cochée malgré tout : la barre n'apparaît pas. Le CMS refuse déjà la combinaison, ceci est le second verrou, côté rendu.

AppHotelCard

Prix et action sont des emplacements remplis par l'appelant : la première card n'en a aucun (contexte block), la seconde a les deux (contexte modale de résultats).

Confort

Timhotel Opéra Madeleine

Opéra Grands Boulevards

• 4 min · Gare du Nord4 minutes à pied de Gare du Nord
• 7 min · Basilique du Sacré-Cœur7 minutes à pied de Basilique du Sacré-Cœur

Premium Forte demande

Timhotel Montmartre

À partir de 149 €

Opéra Grands Boulevards

• 4 min · Gare du Nord4 minutes à pied de Gare du Nord
• 7 min · Basilique du Sacré-Cœur7 minutes à pied de Basilique du Sacré-Cœur

Choisir cet hôtel

Confort Complet

Timhotel Opéra Madeleine

—

Opéra Grands Boulevards

• 4 min · Gare du Nord4 minutes à pied de Gare du Nord
• 7 min · Basilique du Sacré-Cœur7 minutes à pied de Basilique du Sacré-Cœur

Confort

Timhotel Sans Page

Opéra Grands Boulevards

• 4 min · Gare du Nord4 minutes à pied de Gare du Nord
• 7 min · Basilique du Sacré-Cœur7 minutes à pied de Basilique du Sacré-Cœur

Choisir cet hôtel

Confort

Timhotel Sans Photo

Opéra Grands Boulevards

• 4 min · Gare du Nord4 minutes à pied de Gare du Nord
• 7 min · Basilique du Sacré-Cœur7 minutes à pied de Basilique du Sacré-Cœur

Confort

Timhotel Sans Repères

AppOfferCard

Même enveloppe que la card hôtel (AppCoverCard), seule la hauteur de bande média change. Sans page cible, la card n'est pas cliquable — même règle que partout.

Offre permanente

Réservez en direct et économisez

10% de réduction sur toutes nos chambres pour les réservations effectuées directement sur notre site.

Offre du moment

Un titre d'offre volontairement long, qui doit pouvoir passer sur plusieurs lignes sans casser la mise en page de la card

Résumé de l'offre du moment.

Offre permanente

Offre sans photo

Le repli d'image absente, déjà centralisé dans AppMediaImage, s'applique ici aussi.

Offre du moment

Offre sans page cible

Pas de lien, donc pas de curseur ni de survol sur toute la card.

AppCoverCard — hôtel et offre côte à côte

Même rayon (48), même fond (--th-gray-50), même filet, même retrait de corps (24) — seule la hauteur de la bande média diffère (269 / 301).

Confort

Timhotel Opéra Madeleine

À partir de 149 €

Opéra Grands Boulevards

• 4 min · Gare du Nord4 minutes à pied de Gare du Nord
• 7 min · Basilique du Sacré-Cœur7 minutes à pied de Basilique du Sacré-Cœur

Offre permanente

Réservez en direct et économisez

10% de réduction sur toutes nos chambres pour les réservations effectuées directement sur notre site.

AppSegmentedControl

Vrai groupe de boutons radio, pas trois boutons : flèches gauche/droite pour changer (et non pas Entrée pour valider), un seul arrêt de tabulation, l'état annoncé.

Libellés longs, dans une autre langue : les trois segments restent de largeur égale.

BlockBigCards — hôtels et offres

Même composition que le block réel (contrôle segmenté + AppPagedGrid), avec des données locales : useCmsList n'a pas d'endpoint réel dans ce bac à sable isolé. Cinq cartes par source pour forcer une deuxième page (4 par page).

Source « hôtels »

TousConfortPremium

Confort

Timhotel Opéra Madeleine

Opéra Grands Boulevards

• 4 min · Gare du Nord4 minutes à pied de Gare du Nord
• 7 min · Basilique du Sacré-Cœur7 minutes à pied de Basilique du Sacré-Cœur

Premium

Timhotel Montmartre

Opéra Grands Boulevards

• 4 min · Gare du Nord4 minutes à pied de Gare du Nord
• 7 min · Basilique du Sacré-Cœur7 minutes à pied de Basilique du Sacré-Cœur

Confort

Timhotel Bastille

Opéra Grands Boulevards

• 4 min · Gare du Nord4 minutes à pied de Gare du Nord
• 7 min · Basilique du Sacré-Cœur7 minutes à pied de Basilique du Sacré-Cœur

Premium

Timhotel Tour Eiffel

Opéra Grands Boulevards

• 4 min · Gare du Nord4 minutes à pied de Gare du Nord
• 7 min · Basilique du Sacré-Cœur7 minutes à pied de Basilique du Sacré-Cœur

Confort

Timhotel Place d'Italie

Opéra Grands Boulevards

• 4 min · Gare du Nord4 minutes à pied de Gare du Nord
• 7 min · Basilique du Sacré-Cœur7 minutes à pied de Basilique du Sacré-Cœur

Source « offres »

ToutesPermanentesEn ce moment

Offre permanente

Réservez en direct et économisez

10% de réduction sur toutes nos chambres.

Offre du moment

Offre de printemps

Profitez du printemps à Paris.

Offre permanente

Petit-déjeuner offert

Pour toute réservation de 3 nuits ou plus.

Offre du moment

Week-end en amoureux

Une nuit + un dîner aux chandelles.

Offre permanente

Escapade de dernière minute

Réservez sous 48h et économisez.

État vide (segment sans résultat)

AppBadge

AppCounter

AppFieldTrigger

AppSkeleton

Les trois formes brutes, puis leur composition en squelette de card hôtel — c'est l'appelant qui compose et qui porte l'annonce d'attente.

Confort

Timhotel Opéra Madeleine

Opéra Grands Boulevards

• 4 min · Gare du Nord4 minutes à pied de Gare du Nord
• 7 min · Basilique du Sacré-Cœur7 minutes à pied de Basilique du Sacré-Cœur

AppModal & AppFloatingPanel

Le pied de la modale empile une seconde modale, pas un panneau : Échap ferme la plus récente d'abord, et le défilement de la page reste bloqué tant que l'une des deux est ouverte. Les panneaux flottants s'ouvrent séparément, depuis leurs propres boutons.

Calage des états (micro-lot 9)

Trois couleurs × trois apparences × trois états. « Survol » et « appui » forcent la même formule que l'état réel (mêmes variables), pas une approximation — les quatre jetons restent à recaler à l'œil.

AppRating

Une note, pas une classification (voir AppStars) : la valeur est aussi un texte visible, pas seulement le dessin des étoiles.

AppAvatar

Initiales déduites des cinq noms de la maquette. Fond = --th-accent de la section : la famille blue ci-dessous est plus sombre que le bleu vif du Figma — écart signalé, pas corrigé ici.

Par famille d'accent :

AppReviewBubble

Contour tracé en un seul chemin SVG (corps + queue), mesuré au rendu — pas un chemin figé. Cinq bulles : ancrage de queue et sens de pointe varient, le reste est fixe.

Texte très court, puis très long — le contour doit rester continu quelle que soit la hauteur :

AppReviewCluster

Cinq avis, deux en haut / trois en bas, proportions Figma (580+460 / 340×3) absorbant les 1176px réels du conteneur. Rangée du haut ancrée en bas, rangée du bas ancrée en haut.

Avis très long dans la rangée du haut (a) — les quatre autres ne doivent pas se disloquer :

Même test, rangée du bas (c) :

Trois avis seulement — pas cinq :

BlockReviews — la coque reste visible sans avis

Même composition que le block réel : liseré et titre inchangés même à 0 avis, un message discret remplace la grappe à la place d'un cadre (il n'y en a pas ici, contrairement aux grandes cartes).

0 avis

3 avis

5 avis

AppCarouselRail — tabulation hors champ

Huit tuiles — de quoi déborder pour tester Tab/Maj+Tab avant et après un déplacement, dans les deux sens.

Quartier 1

Quartier 2

Quartier 3

Quartier 4

Quartier 5

Quartier 6

Quartier 7

Quartier 8

BlockCardsRail — état vide et chargement borné

Même composition que le block réel : coque toujours visible, message discret à 0 quartier, seules les 4 premières tuiles chargent hâtivement (loading="eager" inspectable sur les 4 premières seulement).

0 quartier

8 quartiers

Quartiers à découvrir

Quartier 1

Quartier 2

Quartier 3

Quartier 4

Quartier 5

Quartier 6

Quartier 7

Quartier 8

Familles de surface (recadrage teal)

Le green a été désaturé pour rapprocher sa famille du reste — accent inchangé, seuls surface/surface-border/object-border bougent. Point de départ, pas un calage final.