Refonte : vrai widget "Personnage" visuel (remplace l'UI de la Phase 7)

L'utilisateur a testé la Phase 7 (sprites pilotés via un menu déroulant
+ zone de texte dans la logique de flow) et l'a rejetée à raison : ce
n'est pas comme ça qu'un moteur de jeu (Phaser, Unity) gère un
personnage. Cette refonte remplace tout le flux d'AUTEURING par un vrai
widget visuel — le moteur d'exécution de la Phase 7 (runSpriteAnimation,
activeSpriteAnimations, orientation, kind="sprite" de la Timeline) reste
inchangé.

Nouveau widget "personnage" (screens/widgets/registry.py) :
- Rendu serveur dédié (special_render, screens/rendering/render_personnage.py)
  qui affiche la pose "idle" dès le HTML généré — jamais une image
  cassée à configurer après coup.
- Toutes ses données (source Forge ou sprites propres au créateur, quel
  personnage/quelles animations) vivent dans une seule clé JSON
  _personnage_data (screens/rendering/personnage_data.py), sans aucune
  migration de schéma (même patron que c_clause_list).
- Nouvelle échappatoire "custom_panel", symétrique à "special_render" mais
  pour le panneau de propriétés : ce widget affiche une galerie/un import
  de sprites sur-mesure plutôt que les contrôles génériques.

Galerie visuelle de personnages Forge (VRAIES miniatures, pas un emoji) :
- Panneau gauche "🎭 Personnages" : pose un personnage déjà configuré,
  animé immédiatement.
- Panneau droit (propriétés) : change le personnage Forge de l'élément
  sélectionné, ou importe les animations d'un sprite personnalisé.
- static/js/screen_edit/personnage-preview.js : lance l'aperçu animé de
  CHAQUE personnage du canevas dès le chargement de la page et après
  toute sauvegarde — le cœur de la demande ("je dois voir ça bouger").

Sélecteur d'animation à miniatures (nœud de flow "Jouer une animation" et
clip de Timeline "sprite") : remplace le menu déroulant/la zone de texte
par une grille de vraies miniatures, scopée aux SEULES animations du
personnage réellement ciblé (ELEMENT_ANIMATIONS_MAP, résolu côté serveur
à partir des propriétés de cet élément précis) — jamais un catalogue
global. Le format stocké sur le nœud/le clip ({frames, fps, loop}) est
inchangé, seule l'UI d'édition change.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

static/js/screen_edit/flow-editor.js

@@ -512,6 +512,7 @@ function toggleFlowActionFields() {
   var isOnglet = typeSel.value === 'activer_onglet';
   soundFields.style.display = typeSel.value === 'jouer_son' ? 'block' : 'none';
   spriteFields.style.display = typeSel.value === 'jouer_animation_sprite' ? 'block' : 'none';
+  if (typeSel.value === 'jouer_animation_sprite') onSpriteTargetElementChange();
   screenSel.style.display = (typeSel.value === 'aller_a' || typeSel.value === 'ouvrir_ligne') ? 'block' : 'none';
   elementFields.style.display = (typeSel.value === 'modifier_element' || isOnglet) ? 'block' : 'none';
   dataFields.style.display = typeSel.value === 'modifier_donnee' ? 'block' : 'none';
@@ -538,31 +539,35 @@ function updateDataValuePlaceholder(operationSelectId, valueInputId) {
   valueInp.placeholder = opSel.value === 'alea' ? 'min,max (ex. 1,6)' : 'Valeur / montant';
 }
 
-// Phase 7 — bibliothèque de sprites Forge (SPRITE_LIBRARY, injecté par
-// screen_edit.html) : choisir un personnage puis une de ses animations
-// pré-remplit la zone de frames — un créateur qui préfère ses propres
-// sprites laisse simplement ce sélecteur sur "— Choisir —" et remplit/
-// uploade directement dans la zone de frames.
-function onSpriteLibraryCharacterChange() {
-  var charSel = document.getElementById('nf-action-sprite-library-character');
-  var animSel = document.getElementById('nf-action-sprite-library-animation');
-  var slug = charSel.value;
-  animSel.innerHTML = '';
-  if (!slug || !SPRITE_LIBRARY[slug]) { animSel.style.display = 'none'; return; }
-  Object.keys(SPRITE_LIBRARY[slug].animations).forEach(function(name) {
-    var opt = document.createElement('option');
-    opt.value = name; opt.textContent = name;
-    animSel.appendChild(opt);
+// Phase 8 — sélecteur d'animation à miniatures RÉELLES, scopé au
+// personnage réellement ciblé (ELEMENT_ANIMATIONS_MAP, injecté par
+// screen_edit.html à partir des propriétés de CET élément précis — voir
+// resolve_personnage_animations() côté serveur) — jamais un menu déroulant
+// ni un catalogue global. Mirror de onFlowDefinitionChange() (précédent le
+// plus proche pour "choisir A repeuple B").
+function onSpriteTargetElementChange() {
+  var elSel = document.getElementById('nf-action-sprite-target-element');
+  var grid = document.getElementById('nf-action-sprite-animation-grid');
+  var nameField = document.getElementById('nf-action-sprite-animation-name');
+  grid.innerHTML = '';
+  nameField.value = '';
+  var elementId = elSel.value;
+  var animations = elementId ? (ELEMENT_ANIMATIONS_MAP[elementId] || {}) : {};
+  Object.keys(animations).forEach(function(animName) {
+    var frames = animations[animName];
+    if (!frames.length) return;
+    var tile = document.createElement('button');
+    tile.type = 'button';
+    tile.className = 'iconGalleryTile';
+    tile.title = animName;
+    tile.innerHTML = '<img src="' + frames[0] + '" alt="" class="personnageThumb">';
+    tile.onclick = function() {
+      grid.querySelectorAll('.iconGalleryTile').forEach(function(t) { t.classList.remove('selected'); });
+      tile.classList.add('selected');
+      nameField.value = animName;
+    };
+    grid.appendChild(tile);
   });
-  animSel.style.display = 'block';
-  applySpriteLibraryAnimation();
-}
-
-function applySpriteLibraryAnimation() {
-  var slug = document.getElementById('nf-action-sprite-library-character').value;
-  var name = document.getElementById('nf-action-sprite-library-animation').value;
-  if (!slug || !name || !SPRITE_LIBRARY[slug]) return;
-  document.getElementById('nf-action-sprite-frames').value = SPRITE_LIBRARY[slug].animations[name].join('\n');
 }
 
 function toggleFlowElementPropertyValue() {
@@ -740,13 +745,17 @@ function submitNodeForm() {
       // colonne dédiée.
       payload.data_value = document.getElementById('nf-action-sound-url').value;
     } else if (actionType === 'jouer_animation_sprite') {
-      // Phase 7 — réutilise target_element_id (déjà whitelisté) +
-      // data_value en JSON {frames, fps, loop}, même patron que jouer_son.
-      payload.target_element_id = parseInt(document.getElementById('nf-action-sprite-target-element').value, 10);
-      var frames = document.getElementById('nf-action-sprite-frames').value
-        .split('\n').map(function(s) { return s.trim(); }).filter(Boolean);
+      // Phase 8 — l'animation choisie (miniature cliquée, voir
+      // onSpriteTargetElementChange()) est résolue en liste de frames ICI,
+      // à l'enregistrement : le nœud stocké reste exactement {frames, fps,
+      // loop} (Phase 7, moteur d'exécution inchangé — voir runSpriteAnimation()
+      // dans static/js/play/actions.js), seule l'UI d'édition a changé.
+      var elementId = document.getElementById('nf-action-sprite-target-element').value;
+      var animName = document.getElementById('nf-action-sprite-animation-name').value;
+      var animations = elementId ? (ELEMENT_ANIMATIONS_MAP[elementId] || {}) : {};
+      payload.target_element_id = parseInt(elementId, 10);
       payload.data_value = JSON.stringify({
-        frames: frames,
+        frames: animations[animName] || [],
         fps: parseInt(document.getElementById('nf-action-sprite-fps').value, 10) || 8,
         loop: document.getElementById('nf-action-sprite-loop').checked,
       });