From 419e25a87ba0637de90b9715b5dbf66f8d4da3c0 Mon Sep 17 00:00:00 2001
From: "kevinguevaradevia@gmail.com" <kevinguevaradevia@gmail.com>
Date: Tue, 2 Jun 2026 23:10:35 -0500
Subject: [PATCH] fix: Expose Blend Mode selector for brand-variable and static
 fields

---
 .../express/builder/FieldConfigPanel.tsx      | 64 ++++++++++---------
 1 file changed, 34 insertions(+), 30 deletions(-)

diff --git a/src/components/express/builder/FieldConfigPanel.tsx b/src/components/express/builder/FieldConfigPanel.tsx
index b744c45..fb75d5a 100644
--- a/src/components/express/builder/FieldConfigPanel.tsx
+++ b/src/components/express/builder/FieldConfigPanel.tsx
@@ -396,6 +396,40 @@ export const FieldConfigPanel: React.FC = () => {
           resolvedDesignMD={resolvedDesignMD}
         />
 
+        {/* ── Blend Mode (Image/Video only) ── */}
+        {(field.type === 'image' || field.type === 'video') && (
+          <div className="space-y-1 mt-2">
+            <label className="text-[9px] text-neutral-500 flex items-center justify-between">
+              Modo de Fusión (Blend)
+              <div className="group relative">
+                <HelpCircle size={10} className="text-neutral-400 hover:text-white cursor-help" />
+                <div className="absolute right-0 bottom-full mb-2 w-48 p-2 bg-neutral-900 border border-neutral-700 rounded-lg text-[10px] text-neutral-300 hidden group-hover:block z-50 shadow-xl pointer-events-none">
+                  <ul className="space-y-1">
+                    <li><strong className="text-white">Normal:</strong> Sin efecto.</li>
+                    <li><strong className="text-white">Screen:</strong> Elimina fondos negros. Ideal para brillos o fuego.</li>
+                    <li><strong className="text-white">Multiply:</strong> Elimina fondos blancos. Ideal para bocetos o texturas oscuras.</li>
+                    <li><strong className="text-white">Overlay:</strong> Aumenta el contraste combinando oscuros y claros.</li>
+                  </ul>
+                </div>
+              </div>
+            </label>
+            <select
+              value={field.style.blendMode || 'normal'}
+              onChange={(e) => updateField(field.id, {
+                style: { ...field.style, blendMode: e.target.value as any }
+              })}
+              className="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1.5 text-xs text-white focus:border-violet-500/50 focus:outline-none"
+            >
+              <option value="normal">Normal</option>
+              <option value="multiply">Multiply (Elimina Blanco)</option>
+              <option value="screen">Screen (Elimina Negro)</option>
+              <option value="overlay">Overlay</option>
+              <option value="soft-light">Soft Light</option>
+              <option value="color-dodge">Color Dodge</option>
+            </select>
+          </div>
+        )}
+
         {/* ── Rules (editable-slot only) ── */}
         {field.nature === 'editable-slot' && (
           <CollapsibleSection title="Reglas de validación" defaultOpen={false}>
@@ -451,36 +485,6 @@ export const FieldConfigPanel: React.FC = () => {
                     />
                   </div>
 
-                  {/* Blend Mode */}
-                  <div className="space-y-1 mt-2 border-t border-neutral-800 pt-2">
-                    <label className="text-[9px] text-neutral-500 flex items-center justify-between">
-                      Modo de Fusión (Blend)
-                      <div className="group relative">
-                        <HelpCircle size={10} className="text-neutral-400 hover:text-white cursor-help" />
-                        <div className="absolute right-0 bottom-full mb-2 w-48 p-2 bg-neutral-900 border border-neutral-700 rounded-lg text-[10px] text-neutral-300 hidden group-hover:block z-50 shadow-xl pointer-events-none">
-                          <ul className="space-y-1">
-                            <li><strong className="text-white">Normal:</strong> Sin efecto.</li>
-                            <li><strong className="text-white">Screen:</strong> Elimina fondos negros. Ideal para brillos o fuego.</li>
-                            <li><strong className="text-white">Multiply:</strong> Elimina fondos blancos. Ideal para bocetos o texturas oscuras.</li>
-                            <li><strong className="text-white">Overlay:</strong> Aumenta el contraste combinando oscuros y claros.</li>
-                          </ul>
-                        </div>
-                      </div>
-                    </label>
-                    <select
-                      value={field.style.blendMode || 'normal'}
-                      onChange={(e) => updateField(field.id, {
-                        style: { ...field.style, blendMode: e.target.value as any }
-                      })}
-                      className="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1.5 text-xs text-white focus:border-violet-500/50 focus:outline-none"
-                    >
-                      <option value="normal">Normal</option>
-                      <option value="multiply">Multiply (Elimina Blanco)</option>
-                      <option value="screen">Screen (Elimina Negro)</option>
-                      <option value="overlay">Overlay</option>
-                      <option value="soft-light">Soft Light</option>
-                      <option value="color-dodge">Color Dodge</option>
-                    </select>
                   </div>
                   <div className="flex gap-2">
                     <div className="flex-1 space-y-1">