From 5a26e4ef432b1e83042aaa0e9506fb858f6af3ac Mon Sep 17 00:00:00 2001
From: Josh Knapp <jknapp85@gmail.com>
Date: Tue, 7 Jul 2026 14:16:14 -0700
Subject: [PATCH] site-builder: FeaturesGrid renders image when 'image' set +
 expose image/button keys so the guided array editor edits them

---
 craft/src/components/sections/FeaturesGrid.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/craft/src/components/sections/FeaturesGrid.tsx b/craft/src/components/sections/FeaturesGrid.tsx
index 7862ae9..dd3db9c 100644
--- a/craft/src/components/sections/FeaturesGrid.tsx
+++ b/craft/src/components/sections/FeaturesGrid.tsx
@@ -39,10 +39,13 @@ interface FeaturesGridProps {
   anchorId?: string;
 }
 
+// Keys image/imageAlt/buttonText/buttonUrl are present (blank) on the defaults so
+// the guided panel's generic array editor (which derives fields from the first
+// item's keys) exposes inputs for them. An image renders whenever `image` is set.
 const defaultFeatures: FeatureItem[] = [
-  { title: 'Fast & Reliable', description: 'Built for performance with optimized loading and rock-solid uptime.', icon: '⚡' },
-  { title: 'Easy to Use', description: 'Intuitive drag-and-drop interface that anyone can master in minutes.', icon: '✨' },
-  { title: 'Fully Responsive', description: 'Looks great on every device, from phones to ultrawide monitors.', icon: '📱' },
+  { title: 'Fast & Reliable', description: 'Built for performance with optimized loading and rock-solid uptime.', icon: '⚡', image: '', imageAlt: '', buttonText: '', buttonUrl: '' },
+  { title: 'Easy to Use', description: 'Intuitive drag-and-drop interface that anyone can master in minutes.', icon: '✨', image: '', imageAlt: '', buttonText: '', buttonUrl: '' },
+  { title: 'Fully Responsive', description: 'Looks great on every device, from phones to ultrawide monitors.', icon: '📱', image: '', imageAlt: '', buttonText: '', buttonUrl: '' },
 ];
 
 export const FeaturesGrid: UserComponent<FeaturesGridProps> = ({
@@ -80,7 +83,7 @@ export const FeaturesGrid: UserComponent<FeaturesGridProps> = ({
               border: '1px solid #e2e8f0',
             }}
           >
-            {feat.mediaType === 'image' && feat.image ? (
+            {feat.image ? (
               <img
                 src={feat.image}
                 alt={feat.imageAlt || feat.title || ''}
@@ -136,7 +139,7 @@ const FeaturesGridSettings: React.FC = () => {
 
   const addFeature = () => {
     setProp((p: FeaturesGridProps) => {
-      p.features = [...(p.features || defaultFeatures), { title: 'New Feature', description: 'Describe this feature.', icon: '🔧' }];
+      p.features = [...(p.features || defaultFeatures), { title: 'New Feature', description: 'Describe this feature.', icon: '🔧', image: '', imageAlt: '', buttonText: '', buttonUrl: '' }];
     });
   };
 
@@ -282,7 +285,7 @@ FeaturesGrid.craft = {
   });
   const idAttr = props.anchorId ? ` id="${esc(props.anchorId)}"` : '';
   const cards = (props.features || defaultFeatures).map((feat) => {
-    const media = feat.mediaType === 'image' && feat.image
+    const media = feat.image
       ? `<img src="${esc(feat.image)}" alt="${esc(feat.imageAlt || feat.title || '')}" style="max-width:100%;height:auto;margin-bottom:16px;border-radius:8px">`
       : `<div style="font-size:36px;margin-bottom:16px">${esc(feat.icon)}</div>`;
     const button = feat.buttonText