From 07f2952b896e2d1f0c6946b2e91141477ef790cb Mon Sep 17 00:00:00 2001
From: Etienne Delvarre <etiennedelvarre@Mac-mini-de-Etienne.local>
Date: Fri, 29 May 2026 10:58:35 +0200
Subject: [PATCH] Fix hero image persistence: separate image and meta storage

Image base64 stored in hero-image section (raw), position/height
in hero-meta section (small JSON). Fixes save failure caused by
oversized JSON payload when wrapping base64 inside JSON.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 public/index.html | 36 ++++++++++++------------------------
 1 file changed, 12 insertions(+), 24 deletions(-)

diff --git a/public/index.html b/public/index.html
index d672e3d..79e3829 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1103,25 +1103,7 @@ function setHeroHeight(val) {
 }
 
 function saveHeroMeta() {
-  const imageData = visionData['hero-image']?.Contenu || '';
-  if (!imageData) return;
-  const payload = JSON.stringify({ image: imageData, posY: heroMeta.posY, height: heroMeta.height });
-  saveVisionSection('hero-image', payload);
-}
-
-function loadHeroImageData(raw) {
-  if (!raw) return;
-  // Try JSON format (new) or plain base64 (legacy)
-  try {
-    const parsed = JSON.parse(raw);
-    heroMeta.posY = parsed.posY ?? 50;
-    heroMeta.height = parsed.height ?? 280;
-    applyHeroImage(parsed.image || '');
-  } catch {
-    // Legacy: raw is the base64 image directly
-    applyHeroImage(raw);
-  }
-  applyHeroMeta();
+  saveVisionSection('hero-meta', JSON.stringify({ posY: heroMeta.posY, height: heroMeta.height }));
 }
 
 // Drag to reposition
@@ -1170,10 +1152,10 @@ function uploadHeroImage(input) {
       canvas.getContext('2d').drawImage(img, 0, 0, w, h);
       const dataUrl = canvas.toDataURL('image/jpeg', 0.85);
       applyHeroImage(dataUrl);
-      heroMeta.posY = 50; // Reset position on new image
+      heroMeta.posY = 50;
       applyHeroMeta();
-      const payload = JSON.stringify({ image: dataUrl, posY: heroMeta.posY, height: heroMeta.height });
-      saveVisionSection('hero-image', payload);
+      saveVisionSection('hero-image', dataUrl);
+      saveHeroMeta();
     };
     img.src = e.target.result;
   };
@@ -1202,8 +1184,14 @@ async function loadVision() {
       setupEditable(elId, section);
     }
 
-    // Hero image (JSON with position/height or legacy base64)
-    loadHeroImageData(visionData['hero-image']?.Contenu || '');
+    // Hero image (base64 brut) + meta (position/hauteur séparées)
+    applyHeroImage(visionData['hero-image']?.Contenu || '');
+    try {
+      const meta = JSON.parse(visionData['hero-meta']?.Contenu || '{}');
+      heroMeta.posY = meta.posY ?? 50;
+      heroMeta.height = meta.height ?? 280;
+    } catch { /* defaults */ }
+    applyHeroMeta();
 
     // Render structured sections
     renderTags();