From eca975f23a526319534e04e89b5706800d7d8c50 Mon Sep 17 00:00:00 2001
From: Lucas Santos <62124151+lsdevelop@users.noreply.github.com>
Date: Thu, 24 Jul 2025 15:45:33 -0300
Subject: [PATCH] fix: support null and callback refs for gridRef warn

- GlobalSpotlight: allow gridRef prop to be HTMLDivElement|null (default: null)
- BentoCardGrid: change gridRef prop to Function callback type
- MagicBento.vue: pass gridRef via callback to child and guard GlobalSpotlight render until gridRef is set
- Updated type annotations and prop validations accordingly"
---
 src/content/Components/MagicBento/MagicBento.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/content/Components/MagicBento/MagicBento.vue b/src/content/Components/MagicBento/MagicBento.vue
index 3281abe..17be7cb 100644
--- a/src/content/Components/MagicBento/MagicBento.vue
+++ b/src/content/Components/MagicBento/MagicBento.vue
@@ -378,7 +378,7 @@ const ParticleCard = defineComponent({
 const GlobalSpotlight = defineComponent({
   name: 'GlobalSpotlight',
   props: {
-    gridRef: { type: Object as PropType<HTMLDivElement | null>, required: true },
+    gridRef: {type: [Object, null] as PropType<HTMLDivElement | null>, required: true},
     disableAnimations: { type: Boolean, default: false },
     enabled: { type: Boolean, default: true },
     spotlightRadius: { type: Number, default: DEFAULT_SPOTLIGHT_RADIUS },
@@ -539,7 +539,10 @@ const GlobalSpotlight = defineComponent({
 const BentoCardGrid = defineComponent({
   name: 'BentoCardGrid',
   props: {
-    gridRef: { type: Object }
+    gridRef: {
+      type: Function as PropType<(el: HTMLDivElement | null) => void>,
+      required: true
+    }
   },
   template: `
     <div