🖌️ Éditeur Visuel sur Canevas¶

L'espace Site (/admin/site) est le cœur visuel d'Instatic. Il permet de concevoir, réorganiser et styliser les pages directement dans le navigateur.

🖥️ Deux Modes de Visualisation¶

Mode Design (Multi-Breakpoints) :
Affiche simultanément les rendus Desktop (\(1440\text{px}\)), Tablette (\(768\text{px}\)) et Mobile (\(375\text{px}\)).
Navigation libre par zoom et pan (molette + espace).
Les squelettes de rendu (skeletons) s'affichent instantanément avant le montage asynchrone des iframes isolées.
Mode Live (Interactif) :
Présentation fidèle 1:1 de la page active avec défilement naturel.
Idéal pour tester les interactions JavaScript, les survols et les formulaires.

🎯 Anneaux de Sélection Visuelle¶

Pour faciliter le repérage sur le canevas sans altérer le flux CSS du document, Instatic utilise 3 anneaux de surbrillance :

🟢 Anneau Vert Néon (--canvas-selection-ring) : Indique le nœud actuellement sélectionné pour modification dans l'inspecteur.
🟣 Anneau Rose Néon (--canvas-hover-ring) : Indique l'élément survolé avec la souris.
🟠 Anneau Orange Néon (--canvas-selector-ring) : Met en surbrillance tous les éléments ciblés par la règle CSS en cours d'édition.

🧩 Manipulation par Glisser-Déposer & Arbre DOM¶

Barre latérale gauche (PanelRail) : Affiche l'arbre hiérarchique complet des balises et composants.
Glisser-Déposer précis : Déplacez n'importe quelle section, conteneur ou élément textuel. Le store calcule instantanément les nouveaux index de fratrie (MoveNode).
Composants Visuels (VC) : Transformez n'importe quelle section en composant réutilisable synchronisé sur toutes vos pages.