Invert image order in beforeafter block preview

- Image "before" now displays on top (left side, clipped at 50%)
- Image "after" displays below (visible on right side)
- Update text block to support bullet lists
- Add heading fieldset to report blueprint

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

site/blueprints/blocks/text.yml

@@ -5,6 +5,6 @@ preview: text
 fields:
   text:
     type: writer
-    headings:
+    nodes:
-      - 3
+      - bulletList
     placeholder: field.blocks.text.placeholder

site/blueprints/pages/report.yml

@@ -47,6 +47,7 @@ tabs:
               - "1/2, 1/2"
             fieldsets:
               - text
+              - heading
               - image
               - beforeafter
       - width: 1/6

site/plugins/beforeafter/blueprints/blocks/beforeafter.yml

@@ -9,7 +9,8 @@ fields:
     layout: cards
     query: page.images
     uploads: false
-    help: Image affichée à gauche / dessous
+    help: Image affichée à gauche / dessus
+    width: 1/2
   imageAfter:
     label: Image "Après"
     type: files
@@ -17,19 +18,9 @@ fields:
     layout: cards
     query: page.images
     uploads: false
-    help: Image affichée à droite / dessus
+    help: Image affichée à droite / dessous
+    width: 1/2
   caption:
     label: Légende
     type: text
     help: Légende commune aux deux images
-  text:
-    label: Texte accompagnant
-    type: writer
-    marks:
-      - bold
-      - italic
-      - link
-    nodes:
-      - bulletList
-      - orderedList
-      - paragraph

site/plugins/beforeafter/index.css

@@ -1 +1 @@
-.beforeafter-preview[data-v-2682dba7]{cursor:pointer;border-radius:var(--rounded);overflow:hidden;background:var(--color-background)}.beforeafter-preview__images[data-v-2682dba7]{position:relative;width:100%;height:200px;background:var(--color-gray-200)}.beforeafter-preview__image[data-v-2682dba7]{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.beforeafter-preview__image--after[data-v-2682dba7]{clip-path:polygon(0 0,50% 0,50% 100%,0 100%)}.beforeafter-preview__divider[data-v-2682dba7]{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 8px #0000004d;transform:translate(-1px)}.beforeafter-preview__caption[data-v-2682dba7]{padding:.75rem;font-size:var(--text-sm);color:var(--color-gray-600);font-style:italic;background:var(--color-background);margin:0}.beforeafter-preview__empty[data-v-2682dba7]{padding:3rem 1rem;text-align:center;color:var(--color-gray-500);font-size:var(--text-sm)}.beforeafter-preview:hover .beforeafter-preview__images[data-v-2682dba7]{opacity:.9}
+.beforeafter-preview[data-v-4e180e18]{cursor:pointer;border-radius:var(--rounded);overflow:hidden;background:var(--color-background)}.beforeafter-preview__images[data-v-4e180e18]{position:relative;width:100%;height:200px;background:var(--color-gray-200)}.beforeafter-preview__image[data-v-4e180e18]{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.beforeafter-preview__image--before[data-v-4e180e18]{clip-path:polygon(0 0,50% 0,50% 100%,0 100%)}.beforeafter-preview__divider[data-v-4e180e18]{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 8px #0000004d;transform:translate(-1px)}.beforeafter-preview__caption[data-v-4e180e18]{padding:.75rem;font-size:var(--text-sm);color:var(--color-gray-600);font-style:italic;background:var(--color-background);margin:0}.beforeafter-preview__empty[data-v-4e180e18]{padding:3rem 1rem;text-align:center;color:var(--color-gray-500);font-size:var(--text-sm)}.beforeafter-preview:hover .beforeafter-preview__images[data-v-4e180e18]{opacity:.9}

site/plugins/beforeafter/index.js

@@ -1 +1 @@
-(function(){"use strict";function f(a,e,t,r,s,n,o,p){var i=typeof a=="function"?a.options:a;return e&&(i.render=e,i.staticRenderFns=t,i._compiled=!0),i._scopeId="data-v-"+n,{exports:a,options:i}}const c={__name:"BeforeAfterBlock",props:{content:Object,endpoints:Object},setup(a){const e=a,t=Vue.computed(()=>{var o;if(!((o=e.content)!=null&&o.imagebefore)||!e.content.imagebefore.length)return null;const n=e.content.imagebefore[0];return(n==null?void 0:n.url)||null}),r=Vue.computed(()=>{var o;if(!((o=e.content)!=null&&o.imageafter)||!e.content.imageafter.length)return null;const n=e.content.imageafter[0];return(n==null?void 0:n.url)||null}),s=Vue.computed(()=>t.value||r.value);return{__sfc:!0,props:e,imageBeforeUrl:t,imageAfterUrl:r,hasImages:s}}};var _=function(){var e=this,t=e._self._c,r=e._self._setupProxy;return t("div",{staticClass:"beforeafter-preview",on:{click:function(s){return e.$emit("open")}}},[r.hasImages?t("div",{staticClass:"beforeafter-preview__images"},[r.imageBeforeUrl?t("img",{staticClass:"beforeafter-preview__image beforeafter-preview__image--before",attrs:{src:r.imageBeforeUrl,alt:"Avant"}}):e._e(),r.imageAfterUrl?t("img",{staticClass:"beforeafter-preview__image beforeafter-preview__image--after",attrs:{src:r.imageAfterUrl,alt:"Après"}}):e._e(),r.imageBeforeUrl&&r.imageAfterUrl?t("div",{staticClass:"beforeafter-preview__divider"}):e._e()]):e._e(),e.content.caption?t("p",{staticClass:"beforeafter-preview__caption"},[e._v(" "+e._s(e.content.caption)+" ")]):e._e(),r.hasImages?e._e():t("div",{staticClass:"beforeafter-preview__empty"},[e._v(" Cliquer pour ajouter des images ")])])},l=[],u=f(c,_,l,!1,null,"2682dba7");const m=u.exports;window.panel.plugin("index/beforeafter",{blocks:{beforeafter:m}})})();
+(function(){"use strict";function f(a,e,t,r,s,n,o,p){var i=typeof a=="function"?a.options:a;return e&&(i.render=e,i.staticRenderFns=t,i._compiled=!0),i._scopeId="data-v-"+n,{exports:a,options:i}}const c={__name:"BeforeAfterBlock",props:{content:Object,endpoints:Object},setup(a){const e=a,t=Vue.computed(()=>{var o;if(!((o=e.content)!=null&&o.imagebefore)||!e.content.imagebefore.length)return null;const n=e.content.imagebefore[0];return(n==null?void 0:n.url)||null}),r=Vue.computed(()=>{var o;if(!((o=e.content)!=null&&o.imageafter)||!e.content.imageafter.length)return null;const n=e.content.imageafter[0];return(n==null?void 0:n.url)||null}),s=Vue.computed(()=>t.value||r.value);return{__sfc:!0,props:e,imageBeforeUrl:t,imageAfterUrl:r,hasImages:s}}};var _=function(){var e=this,t=e._self._c,r=e._self._setupProxy;return t("div",{staticClass:"beforeafter-preview",on:{click:function(s){return e.$emit("open")}}},[r.hasImages?t("div",{staticClass:"beforeafter-preview__images"},[r.imageAfterUrl?t("img",{staticClass:"beforeafter-preview__image beforeafter-preview__image--after",attrs:{src:r.imageAfterUrl,alt:"Après"}}):e._e(),r.imageBeforeUrl?t("img",{staticClass:"beforeafter-preview__image beforeafter-preview__image--before",attrs:{src:r.imageBeforeUrl,alt:"Avant"}}):e._e(),r.imageBeforeUrl&&r.imageAfterUrl?t("div",{staticClass:"beforeafter-preview__divider"}):e._e()]):e._e(),e.content.caption?t("p",{staticClass:"beforeafter-preview__caption"},[e._v(" "+e._s(e.content.caption)+" ")]):e._e(),r.hasImages?e._e():t("div",{staticClass:"beforeafter-preview__empty"},[e._v(" Cliquer pour ajouter des images ")])])},l=[],u=f(c,_,l,!1,null,"4e180e18");const m=u.exports;window.panel.plugin("index/beforeafter",{blocks:{beforeafter:m}})})();

site/plugins/beforeafter/src/components/BeforeAfterBlock.vue

@@ -1,18 +1,18 @@
 <template>
   <div @click="$emit('open')" class="beforeafter-preview">
     <div v-if="hasImages" class="beforeafter-preview__images">
-      <img
-        v-if="imageBeforeUrl"
-        :src="imageBeforeUrl"
-        class="beforeafter-preview__image beforeafter-preview__image--before"
-        alt="Avant"
-      />
       <img
         v-if="imageAfterUrl"
         :src="imageAfterUrl"
         class="beforeafter-preview__image beforeafter-preview__image--after"
         alt="Après"
       />
+      <img
+        v-if="imageBeforeUrl"
+        :src="imageBeforeUrl"
+        class="beforeafter-preview__image beforeafter-preview__image--before"
+        alt="Avant"
+      />
       <div v-if="imageBeforeUrl && imageAfterUrl" class="beforeafter-preview__divider"></div>
     </div>
 
@@ -81,7 +81,7 @@ const hasImages = computed(() => {
   object-fit: cover;
 }
 
-.beforeafter-preview__image--after {
+.beforeafter-preview__image--before {
   clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
 }