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/personnage-preview.js

@@ -0,0 +1,55 @@
+// ---------- Aperçu animé immédiat dans l'éditeur (Phase 8) ----------
+// Le cœur de la demande : un personnage posé sur la scène doit s'animer
+// tout de suite dans le canevas, sans ouvrir la Timeline ni la logique de
+// flow. static/js/play/actions.js (runSpriteAnimation) n'est PAS chargé
+// dans l'éditeur — mirror allégé de son moteur, scopé à l'idle de chaque
+// personnage du canevas (un seul intervalle actif par élément, comme le
+// moteur de jeu).
+var _personnageIdleIntervals = {};
+
+function _stopPersonnageIdlePreview(elementId) {
+  if (_personnageIdleIntervals[elementId]) {
+    clearInterval(_personnageIdleIntervals[elementId]);
+    delete _personnageIdleIntervals[elementId];
+  }
+}
+
+function _startPersonnageIdlePreview(targetEl, elementId, frames, fps) {
+  _stopPersonnageIdlePreview(elementId);
+  if (!frames || !frames.length) return;
+  targetEl.src = frames[0];
+  if (frames.length === 1) return;
+  var frameIndex = 0;
+  _personnageIdleIntervals[elementId] = setInterval(function () {
+    // Navigation pjax (voir pjax.js) : le canevas précédent est remplacé
+    // sans que ce script ne soit prévenu — s'auto-arrête dès que son
+    // élément a quitté le DOM plutôt que de tourner indéfiniment dans le
+    // vide.
+    if (!document.body.contains(targetEl)) { clearInterval(_personnageIdleIntervals[elementId]); return; }
+    frameIndex = (frameIndex + 1) % frames.length;
+    targetEl.src = frames[frameIndex];
+  }, 1000 / (fps || 8));
+}
+
+// Appelée après tout changement de personnage/animations (voir
+// personnage-panel.js) pour relancer l'aperçu sans recharger la page.
+function restartPersonnageIdlePreview(elementId, animations) {
+  var targetEl = document.querySelector('#canvas [data-element-id="' + elementId + '"][data-personnage="1"]');
+  if (!targetEl) return;
+  var frames = (animations && (animations.idle || Object.values(animations)[0])) || [];
+  _startPersonnageIdlePreview(targetEl, elementId, frames, 8);
+}
+
+function startAllPersonnagePreviews() {
+  document.querySelectorAll('#canvas [data-personnage="1"]').forEach(function (targetEl) {
+    var elementId = parseInt(targetEl.dataset.elementId, 10);
+    var animations = ELEMENT_ANIMATIONS_MAP[elementId];
+    var frames = (animations && (animations.idle || Object.values(animations)[0])) || null;
+    // Pas d'entrée dans ELEMENT_ANIMATIONS_MAP (personnage vidé/sprite
+    // personnalisé sans frame) : garde l'image déjà posée par le rendu
+    // serveur (ou rien), pas d'intervalle à démarrer.
+    if (frames && frames.length > 1) _startPersonnageIdlePreview(targetEl, elementId, frames, 8);
+  });
+}
+
+startAllPersonnagePreviews();