Professor-Chen/cursor-byok

Interface flottante

Utilisez @floating-ui/dom pour tout élément interactif positionné par rapport à un déclencheur. Ne calculez pas les coordonnées manuellement et ne vous fiez pas aux décalages CSS absolus pour les listes déroulantes, popovers, menus, listes de zone de saisie ou infobulles.

Structure requise

• Rendez les superpositions via createPortal(..., document.body) afin que la disposition et les contextes d'empilement ne les coupent pas.
• Positionnez avec computePosition dans autoUpdate ; nettoyez la fonction retournée par autoUpdate lorsque la superposition se ferme ou se démonte.
• Partez du contrôle existant le plus proche dans apps/desktop/src/components/ui. Faites correspondre ses middlewares de placement, offset, flip, shift et size sauf si l'interaction nécessite une différence délibérée.
• Stockez les valeurs calculées left, top, width et la hauteur disponible dans l'état React. Appliquez l'état à la racine du portail ; ne modifiez pas directement les styles de l'élément.
• Utilisez size lorsque la largeur de référence ou la hauteur de la fenêtre contraint la superposition. Les listes susceptibles de s'agrandir doivent utiliser components/virtual/VirtualList.tsx ; conservez les en-têtes et pieds de page fixes en dehors de la fenêtre virtuelle.

Invariants d'interaction

• Gardez la bordure d'ouverture/de focus du déclencheur visible tant que le focus est à l'intérieur d'une superposition portailée.
• Fermez lors d'une interaction pointeur en dehors et avec la touche Échap, puis ramenez le focus au déclencheur.
• La vérification de clic en dehors doit inclure à la fois le déclencheur et la superposition. Une superposition portailée imbriquée doit empêcher son événement pointeur d'atteindre l'écouteur de clic en dehors du parent, donc interagir avec un menu enfant ne ferme jamais son parent.
• Exposez l'état du déclencheur avec aria-expanded, aria-controls et le aria-haspopup approprié ; attribuez à la superposition les sémantiques correspondantes de menu, listbox, dialogue ou infobulle.
• Vérifiez le placement près de tous les bords de la fenêtre, les clics sur les superpositions imbriquées, la fermeture au clavier, le défilement virtuel et le comportement des pieds de page fixes.