From 1a28c0eae7372e2b2db7b94f59f6096d75007025 Mon Sep 17 00:00:00 2001
From: Cesar Mendivil <mendivilrubioc@gmail.com>
Date: Mon, 10 Nov 2025 12:08:12 -0700
Subject: [PATCH] fix(studio-panel): safe defaults for MediaGrid and fallback
 image handler

---
 .../src/components/figma/MediaGrid.tsx        | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/packages/studio-panel/src/components/figma/MediaGrid.tsx b/packages/studio-panel/src/components/figma/MediaGrid.tsx
index e69de29..f066f1d 100644
--- a/packages/studio-panel/src/components/figma/MediaGrid.tsx
+++ b/packages/studio-panel/src/components/figma/MediaGrid.tsx
@@ -0,0 +1,35 @@
+// ...existing code...
+
+type MediaGridProps = {
+  items?: string[]
+  columns?: number
+}
+
+export default function MediaGrid({ items = ['/figma-assets/screenshot-design.png'], columns = 3 }: MediaGridProps) {
+  const colsClass = columns === 1 ? 'grid-cols-1' : columns === 2 ? 'grid-cols-2' : 'grid-cols-3'
+
+  const handleImgError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
+    const target = e.currentTarget
+    // fallback to a safe small logo if the image fails to load
+    if (!target.dataset.fallbackApplied) {
+      target.dataset.fallbackApplied = 'true'
+      target.src = '/figma-assets/logo-avanzacast.svg'
+    }
+  }
+
+  return (
+    <div className={`grid ${colsClass} gap-figma-lg`}>
+      {items.map((src, i) => (
+        <div key={i} className="rounded-figma-card overflow-hidden bg-neutral-800/30">
+          <img
+            src={src}
+            alt={`media-${i}`}
+            className="w-full h-28 object-cover"
+            loading="lazy"
+            onError={handleImgError}
+          />
+        </div>
+      ))}
+    </div>
+  )
+}