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>

screens/__init__.py

@@ -63,6 +63,7 @@ from .flow.constants import (
 
 from .rendering.render_element_html import render_element_html
 from .rendering.trigger_for import _trigger_for
+from .rendering.personnage_data import resolve_personnage_data, resolve_personnage_animations, resolve_personnage_idle_frame
 
 from .screens_repo.ensure_schema import ensure_schema
 from .screens_repo.list_screens import list_screens
@@ -87,6 +88,7 @@ from .elements.delete_element import delete_element
 from .elements.flow_nodes_referencing_element import flow_nodes_referencing_element
 from .elements.duplicate_element import duplicate_element
 from .elements.rename_element import rename_element
+from .elements.set_personnage_data import set_personnage_data
 from .elements.element_label import element_label
 
 from .element_types.list_element_types import list_element_types

screens/elements/set_personnage_data.py

@@ -0,0 +1,20 @@
+import json
+
+import db
+
+
+def set_personnage_data(slug, element_id, data):
+    """Fusionne _personnage_data (voir screens/rendering/personnage_data.py)
+    dans les attributs déjà stockés de cet élément — remplace la source
+    (Forge/personnalisée) et son contenu (personnage choisi, ou animations
+    importées) en un seul appel, jamais les autres attributs de l'élément."""
+    conn = db.connect(slug)
+    row = conn.execute("SELECT attributes FROM _screen_elements WHERE id = ?", (element_id,)).fetchone()
+    if not row:
+        conn.close()
+        return
+    attributes = json.loads(row["attributes"] or "{}")
+    attributes["_personnage_data"] = json.dumps(data)
+    conn.execute("UPDATE _screen_elements SET attributes = ? WHERE id = ?", (json.dumps(attributes), element_id))
+    conn.commit()
+    conn.close()

screens/rendering/personnage_data.py

@@ -0,0 +1,39 @@
+import json
+
+from ..labels.sprite_library import SPRITE_LIBRARY
+
+_DEFAULT_PERSONNAGE_DATA = {"source": "forge", "forge_character": "male-adventurer"}
+
+
+def resolve_personnage_data(el):
+    """Décode attributes._personnage_data (voir set_personnage_data.py) en
+    dict Python, jamais None — un attribut absent/corrompu retombe sur le
+    défaut posé à la création (default_style_for_widget.py)."""
+    raw = (el.get("attributes") or {}).get("_personnage_data")
+    if not raw:
+        return dict(_DEFAULT_PERSONNAGE_DATA)
+    try:
+        data = json.loads(raw)
+    except (TypeError, ValueError):
+        return dict(_DEFAULT_PERSONNAGE_DATA)
+    return data if isinstance(data, dict) else dict(_DEFAULT_PERSONNAGE_DATA)
+
+
+def resolve_personnage_animations(el):
+    """{nom_animation: [urls...]} pour cet élément personnage, quelle que
+    soit sa source — Forge (SPRITE_LIBRARY) ou sprites propres au créateur
+    (ses propres frames importées, voir personnage-panel.js)."""
+    data = resolve_personnage_data(el)
+    if data.get("source") == "custom":
+        return data.get("animations") or {}
+    character = SPRITE_LIBRARY.get(data.get("forge_character"))
+    return character["animations"] if character else {}
+
+
+def resolve_personnage_idle_frame(el):
+    """Première image de l'animation "idle" (ou, à défaut, de la première
+    animation disponible) — utilisée pour le rendu serveur ET l'aperçu
+    animé de l'éditeur, jamais vide tant qu'au moins une frame existe."""
+    animations = resolve_personnage_animations(el)
+    frames = animations.get("idle") or (next(iter(animations.values())) if animations else None)
+    return frames[0] if frames else ""

screens/rendering/render_element_html.py

@@ -15,6 +15,7 @@ from .render_jauge import _render_jauge
 from .render_overlay import _render_overlay
 from .render_onglets import _render_onglets
 from .render_icone import _render_icone
+from .render_personnage import _render_personnage
 from .resolve_bound_row import _resolve_bound_row_ctx
 from .visibility_condition import is_element_visible
 from ..element_types.load_template_tree import _load_template_tree
@@ -105,6 +106,8 @@ def render_element_html(el, slug=None, children_map=None, ctx=None, parent_flex_
         return _mark(_render_onglets(el, meta, slug, children_map, ctx, parent_flex_direction))
     if special == "icone":
         return _mark(_render_icone(el, meta, slug, children_map, ctx, parent_flex_direction))
+    if special == "personnage":
+        return _mark(_render_personnage(el, meta, slug, children_map, ctx, parent_flex_direction))
 
     tag = meta.get("tag")
     if tag is None:  # widget à balise dynamique (ex: "titre" -> h1/h2/h3)

screens/rendering/render_personnage.py

@@ -0,0 +1,21 @@
+from .visible_attrs import _visible_attrs
+from .style_string import _style_string
+from .attr_string import _attr_string
+from .personnage_data import resolve_personnage_idle_frame
+
+
+def _render_personnage(el, meta, slug=None, children_map=None, ctx=None, parent_flex_direction=None):
+    """Widget Personnage — un <img> qui affiche sa pose "idle" dès le rendu
+    SERVEUR (aperçu correct même sans JS), animée ensuite en boucle par
+    static/js/screen_edit/personnage-preview.js dans l'éditeur, ou par une
+    action de flow/un clip de Timeline en mode jouable (voir
+    runSpriteAnimation() dans static/js/play/actions.js — moteur inchangé,
+    seul l'auteuring dans l'éditeur diffère). data-personnage="1" marque
+    cet élément pour la prévisualisation animée de l'éditeur."""
+    attrs = _visible_attrs(el, meta, ctx)
+    attrs["data-personnage"] = "1"
+    idle_frame = resolve_personnage_idle_frame(el)
+    if idle_frame:
+        attrs["src"] = idle_frame
+    style = _style_string(el, parent_flex_direction=parent_flex_direction, widget_key=el.get("widget"))
+    return f"<img {_attr_string(attrs, style)}>"

screens/widgets/default_style_for_widget.py

@@ -1,3 +1,5 @@
+import json
+
 from .widget_meta import widget_meta
 
 # Réglages "par côté" (padding/margin/bordure individuels) : contrairement
@@ -108,4 +110,14 @@ def default_style_and_attributes(widget_key):
         # Visibilité → Rendre visible" pour l'ouvrir — cohérent avec
         # "fermeture manuelle uniquement".
         style["display"] = "none"
+
+    if widget_key == "personnage":
+        # Phase 8 — un personnage fraîchement posé est DÉJÀ configuré avec
+        # un personnage Forge par défaut (voir screens/rendering/
+        # personnage_data.py) plutôt que de démarrer vide : il s'affiche et
+        # s'anime immédiatement dans l'éditeur (voir static/js/screen_edit/
+        # personnage-preview.js), jamais une image cassée qu'il faudrait
+        # d'abord configurer. Le tuile de galerie cliquée (voir element_add.py)
+        # remplace ce défaut par le personnage réellement choisi juste après.
+        attributes["_personnage_data"] = json.dumps({"source": "forge", "forge_character": "male-adventurer"})
     return attributes, style

screens/widgets/registry.py

@@ -315,6 +315,23 @@ WIDGETS = {
         "w": 60, "h": 40, "default_content": "",
         "controls": BULMA_TABS_CONTROLS,
     },
+    "personnage": {
+        # Widget Personnage (Phase 8) — un vrai objet visuel, pas une image
+        # générique pilotée depuis la logique de flow (voir le plan :
+        # l'utilisateur a explicitement rejeté ce premier design). Toutes ses
+        # données (source Forge/personnalisée, animations) vivent dans UNE
+        # clé JSON _personnage_data (voir screens/rendering/personnage_data.py
+        # et screens/elements/set_personnage_data.py) — pas de contrôle
+        # générique ici, "custom_panel" bascule le panneau de propriétés vers
+        # un bloc entièrement sur-mesure (galerie Forge ou import de sprites,
+        # voir templates/screen_edit.html et static/js/screen_edit/
+        # personnage-panel.js), la taille/position restant les réglages
+        # universels déjà là pour tout élément.
+        "label": "Personnage", "icon": "🏃", "tag": "img", "has_content": False, "self_closing": True,
+        "special_render": "personnage", "custom_panel": "personnage",
+        "w": 20, "h": 30, "default_content": "",
+        "controls": [],
+    },
     "icone": {
         # Un SVG affiché en silhouette via "mask-image" (voir .icon-svg dans
         # style.css et render_icone.py) plutôt qu'une police d'icônes —