🛠️ Manipulation du DOM et du CSS par l'IA¶

L'IA pilote l'éditeur à travers un ensemble d'outils typés (Tool Calling) stricts définis sous forme de schémas TypeBox (src/core/ai/toolSchemas.ts).

📋 Catalogue des Outils d'Écriture¶

Outil	Paramètres Clés	Description de l'Action
`insert_html`	`parentId`, `index`, `html`	Insère un fragment HTML sémantique complet à l'emplacement exact dans l'arbre.
`replace_node_html`	`nodeId`, `html`	Remplace un élément existant (et ses enfants) par une nouvelle structure HTML.
`update_node_props`	`nodeId`, `breakpointId`, `patch`	Modifie les attributs d'un nœud (ex: `href`, `src`, `alt`, `aria-label`).
`move_node`	`nodeId`, `newParentId`, `newIndex`	Réorganise l'ordre des éléments dans l'arborescence.
`delete_node`	`nodeId`	Supprime un composant ou un nœud de l'arbre.
`site_apply_css`	`action` (`merge`/`replace`/`delete`), `css`	Applique, met à jour ou supprime des règles CSS et sélecteurs de style.

💡 Exemples d'Instructions Utilisateur¶

1. Ajout d'une section responsive¶

"Ajoute sous le Hero une section 3 colonnes présentant nos certifications écologiques (Fair Trade, OEKO-TEX, ISO 14001) avec des bordures subtiles et les tokens de couleur sisal." - Action de l'IA : L'IA appelle insert_html avec une grille sémantique <section>, <article> et applique les styles via site_apply_css.

2. Refonte du style d'un bouton¶

"Transforme le bouton principal en style solide vert Mandrare (#1B3B2B) avec un hover contrasté et supprime les ombres excessives." - Action de l'IA : L'IA appelle site_apply_css avec l'action merge pour mettre à jour la classe .btn-primary.