blocks-dusted 0.1.12 → 0.1.13

package/templates/blocks/DD-Masonry/Component.tsx

@@ -1,645 +1,655 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-'use client'
-
-import React, { useEffect, useLayoutEffect, useMemo, useRef, useState, useCallback } from 'react'
-import { gsap } from 'gsap'
-import { ScrollTrigger } from 'gsap/ScrollTrigger'
-import { cn } from '@/utilities/ui'
-import FadeUpOnInView from '@/components/ui/anims/FadeUpOnInView'
-
-if (typeof window !== 'undefined') {
-  gsap.registerPlugin(ScrollTrigger)
-}
-
-const useMedia = (queries: string[], values: number[], defaultValue: number): number => {
-  const [value, setValue] = useState(() => {
-    if (typeof window !== 'undefined') {
-      return values[queries.findIndex((q) => window.matchMedia(q).matches)] ?? defaultValue
-    }
-
-    return values[0] ?? defaultValue
-  })
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return
-
-    const handler = () => {
-      setValue(values[queries.findIndex((q) => window.matchMedia(q).matches)] ?? defaultValue)
-    }
-
-    const mediaQueryLists = queries.map((q) => window.matchMedia(q))
-    mediaQueryLists.forEach((mql) => mql.addEventListener('change', handler))
-
-    return () => mediaQueryLists.forEach((mql) => mql.removeEventListener('change', handler))
-  }, [queries, values, defaultValue])
-
-  return value
-}
-
-const useMeasure = <T extends HTMLElement>() => {
-  const ref = useRef<T | null>(null)
-  const [size, setSize] = useState({ width: 0, height: 0 })
-
-  useLayoutEffect(() => {
-    if (!ref.current) return
-
-    const ro = new ResizeObserver((entries) => {
-      if (entries[0]) {
-        const { width, height } = entries[0].contentRect
-        setSize({ width, height })
-      }
-    })
-
-    ro.observe(ref.current)
-
-    return () => ro.disconnect()
-  }, [])
-
-  return [ref, size] as const
-}
-
-interface MasonryItem {
-  id: string
-  media: { id?: string; url?: string; alt?: string; mimeType?: string }
-  linkType?: 'none' | 'reference' | 'custom'
-  reference?: {
-    value: string | { slug: string }
-    relationTo: string
-  }
-  url?: string
-  newTab?: boolean
-  aspectRatio: string
-  showTextOverlay?: boolean
-  textOverlay?: string
-}
-
-interface MasonryMediaBlockProps {
-  items: MasonryItem[]
-  layout: {
-    columns: {
-      desktop: number
-      laptop: number
-      tablet: number
-      mobile: number
-    }
-    gap: number
-  }
-  animation: {
-    enableAnimation?: boolean
-    animateFrom: 'bottom' | 'top' | 'left' | 'right' | 'center' | 'random'
-    ease: string
-    duration: number
-    stagger: number
-    repeatOnScroll?: boolean
-  }
-  interaction: {
-    scaleOnHover: boolean
-    hoverScale: number
-    blurToFocus: boolean
-    colorShiftOnHover: boolean
-    customHoverColors?: {
-      fromColor: string
-      toColor: string
-    }
-  }
-  advanced?: {
-    sectionId?: string
-    customClassName?: string
-    enableParallax?: boolean
-    parallaxSpeed?: number
-  }
-}
-
-const MediaContent: React.FC<{ item: MasonryItem }> = React.memo(
-  ({ item }) => {
-    return (
-      <div
-        className="w-full h-full overflow-hidden masonry-media-container"
-        style={
-          {
-            aspectRatio: item.aspectRatio || '1/1',
-            '--masonry-aspect-ratio': item.aspectRatio || '1/1'
-          } as React.CSSProperties
-        }
-      >
-        <style jsx>{`
-          .masonry-media-container :global(.media-block),
-          .masonry-media-container :global(.media-block img),
-          .masonry-media-container :global(.media-block video),
-          .masonry-media-container :global(.media-block picture),
-          .masonry-media-container :global(.media-block picture img) {
-            width: 100% !important;
-            height: 100% !important;
-            object-fit: cover !important;
-            aspect-ratio: var(--masonry-aspect-ratio) !important;
-            margin: 0;
-            border-radius: 4px;
-          }
-
-          .masonry-media-container :global(.parallax-section),
-          .masonry-media-container :global(.parallax-content) {
-            width: 100% !important;
-            height: 100% !important;
-          }
-        `}</style>
-                {item.media?.mimeType?.startsWith('video/') ? (
-          <video className="h-full w-full object-cover" src={item.media.url} muted playsInline loop />
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState, useCallback } from 'react'
+import { gsap } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+import { cn } from '@/utilities/ui'
+import FadeUpOnInView from '@/components/ui/anims/FadeUpOnInView'
+
+if (typeof window !== 'undefined') {
+  gsap.registerPlugin(ScrollTrigger)
+}
+
+const useMedia = (queries: string[], values: number[], defaultValue: number): number => {
+  const [value, setValue] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return values[queries.findIndex((q) => window.matchMedia(q).matches)] ?? defaultValue
+    }
+
+    return values[0] ?? defaultValue
+  })
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+
+    const handler = () => {
+      setValue(values[queries.findIndex((q) => window.matchMedia(q).matches)] ?? defaultValue)
+    }
+
+    const mediaQueryLists = queries.map((q) => window.matchMedia(q))
+    mediaQueryLists.forEach((mql) => mql.addEventListener('change', handler))
+
+    return () => mediaQueryLists.forEach((mql) => mql.removeEventListener('change', handler))
+  }, [queries, values, defaultValue])
+
+  return value
+}
+
+const useMeasure = <T extends HTMLElement>() => {
+  const ref = useRef<T | null>(null)
+  const [size, setSize] = useState({ width: 0, height: 0 })
+
+  useLayoutEffect(() => {
+    if (!ref.current) return
+
+    const ro = new ResizeObserver((entries) => {
+      if (entries[0]) {
+        const { width, height } = entries[0].contentRect
+        setSize({ width, height })
+      }
+    })
+
+    ro.observe(ref.current)
+
+    return () => ro.disconnect()
+  }, [])
+
+  return [ref, size] as const
+}
+
+interface MasonryItem {
+  id: string
+  media: { id?: string; url?: string; alt?: string; mimeType?: string }
+  linkType?: 'none' | 'reference' | 'custom'
+  reference?: {
+    value: string | { slug: string }
+    relationTo: string
+  }
+  url?: string
+  newTab?: boolean
+  aspectRatio: string
+  showTextOverlay?: boolean
+  textOverlay?: string
+}
+
+interface MasonryMediaBlockProps {
+  items: MasonryItem[]
+  layout: {
+    columns: {
+      desktop: number
+      laptop: number
+      tablet: number
+      mobile: number
+    }
+    gap: number
+  }
+  animation: {
+    enableAnimation?: boolean
+    animateFrom: 'bottom' | 'top' | 'left' | 'right' | 'center' | 'random'
+    ease: string
+    duration: number
+    stagger: number
+    repeatOnScroll?: boolean
+  }
+  interaction: {
+    scaleOnHover: boolean
+    hoverScale: number
+    blurToFocus: boolean
+    colorShiftOnHover: boolean
+    customHoverColors?: {
+      fromColor: string
+      toColor: string
+    }
+  }
+  advanced?: {
+    sectionId?: string
+    customClassName?: string
+    enableParallax?: boolean
+    parallaxSpeed?: number
+  }
+}
+
+const MediaContent: React.FC<{ item: MasonryItem }> = React.memo(
+  ({ item }) => {
+    return (
+      <div
+        className="w-full h-full overflow-hidden masonry-media-container"
+        style={
+          {
+            aspectRatio: item.aspectRatio || '1/1',
+            '--masonry-aspect-ratio': item.aspectRatio || '1/1',
+          } as React.CSSProperties
+        }
+      >
+        <style jsx>{`
+          .masonry-media-container :global(.media-block),
+          .masonry-media-container :global(.media-block img),
+          .masonry-media-container :global(.media-block video),
+          .masonry-media-container :global(.media-block picture),
+          .masonry-media-container :global(.media-block picture img) {
+            width: 100% !important;
+            height: 100% !important;
+            object-fit: cover !important;
+            aspect-ratio: var(--masonry-aspect-ratio) !important;
+            margin: 0;
+            border-radius: 4px;
+          }
+
+          .masonry-media-container :global(.parallax-section),
+          .masonry-media-container :global(.parallax-content) {
+            width: 100% !important;
+            height: 100% !important;
+          }
+        `}</style>
+        {item.media?.mimeType?.startsWith('video/') ? (
+          <video
+            className="h-full w-full object-cover"
+            src={item.media.url}
+            muted
+            playsInline
+            loop
+          />
         ) : (
-          <img className="h-full w-full object-cover" src={item.media?.url || ''} alt={item.media?.alt || ''} />
-        )}
-      </div>
-    )
-  },
-  (prev, next) =>
-    prev.item.media?.id === next.item.media?.id && prev.item.aspectRatio === next.item.aspectRatio
-)
-
-export const DDMasonry: React.FC<MasonryMediaBlockProps> = ({
-  items,
-  layout,
-  animation,
-  interaction,
-  advanced
-}) => {
-  const triggersRef = useRef<ScrollTrigger[]>([])
-
-  const getLinkUrl = (item: MasonryItem): string | null => {
-    if (!item.linkType || item.linkType === 'none') return null
-
-    if (item.linkType === 'custom') {
-      return item.url || null
-    }
-
-    if (item.linkType === 'reference' && item.reference) {
-      const refValue = item.reference.value
-
-      const getCollectionPath = (relationTo: string) => {
-        if (relationTo === 'posts') return 'thoughts'
-        if (relationTo === 'pages') return ''
-        return relationTo
-      }
-
-      const prefix = getCollectionPath(item.reference.relationTo)
-      const toUrl = (slug: string) => (prefix ? `/${prefix}/${slug}` : `/${slug}`)
-
-      if (typeof refValue === 'string') {
-        return toUrl(refValue)
-      }
-
-      if (refValue && typeof refValue === 'object' && 'slug' in refValue) {
-        return toUrl(String(refValue.slug))
-      }
-    }
-
-    return null
-  }
-
-  const handleItemClick = (item: MasonryItem) => {
-    const url = getLinkUrl(item)
-    if (!url) return
-
-    if (item.newTab) {
-      window.open(url, '_blank', 'noopener,noreferrer')
-      return
-    }
-
-    window.location.href = url
-  }
-
-  const blockId = useMemo(
-    () => advanced?.sectionId || `masonry-${Math.random().toString(36).slice(2, 11)}`,
-    [advanced?.sectionId]
-  )
-
-  const columns = useMedia(
-    ['(min-width:1440px)', '(min-width:968px)', '(min-width:640px)', '(min-width:420px)'],
-    [
-      layout?.columns?.desktop || 5,
-      layout?.columns?.laptop || 4,
-      layout?.columns?.tablet || 3,
-      layout?.columns?.mobile || 2
-    ],
-    1
-  )
-
-  const [containerRef, { width }] = useMeasure<HTMLDivElement>()
-  const [mediaReady, setMediaReady] = useState(false)
-  const [containerHeight, setContainerHeight] = useState(0)
-  const animatedItems = useRef(new Set<string>())
-
-  const validItems = useMemo(() => {
-    return (
-      items?.map((item, index) => ({
-        ...item,
-        id: item.id || `item-${index}`
-      })) || []
-    )
-  }, [items])
-
-  const getAspectRatioHeight = (ratio: string, width: number): number => {
-    if (!ratio || !ratio.includes('/')) return width
-
-    const [w, h] = ratio.split('/').map(Number)
-    const validW = w && !isNaN(w) ? w : 1
-    const validH = h && !isNaN(h) ? h : 1
-
-    return (width * validH) / validW
-  }
-
-  const preloadMedia = async (itemsToPreload: MasonryItem[]): Promise<void> => {
-    await Promise.all(
-      itemsToPreload.map((item) => {
-        if (item.media?.url && item.media.mimeType?.startsWith('image/')) {
-          return new Promise<void>((resolve) => {
-            const img = new Image()
-            img.src = item.media.url || ''
-            img.onload = img.onerror = () => resolve()
-          })
-        }
-
-        return Promise.resolve()
-      })
-    )
-  }
-
-  const getInitialPosition = useCallback(
-    (item: any) => {
-      const containerRect = containerRef.current?.getBoundingClientRect()
-      if (!containerRect) return { x: item.x, y: item.y }
-
-      let direction = animation?.animateFrom || 'bottom'
-
-      if (direction === 'random') {
-        const dirs = ['top', 'bottom', 'left', 'right']
-        direction = dirs[Math.floor(Math.random() * dirs.length)] as typeof direction
-      }
-
-      switch (direction) {
-        case 'top':
-          return { x: item.x, y: -200 }
-        case 'bottom':
-          return { x: item.x, y: window.innerHeight + 200 }
-        case 'left':
-          return { x: -200, y: item.y }
-        case 'right':
-          return { x: window.innerWidth + 200, y: item.y }
-        case 'center':
-          return {
-            x: containerRect.width / 2 - item.w / 2,
-            y: containerRect.height / 2 - item.h / 2
-          }
-        default:
-          return { x: item.x, y: item.y + 100 }
-      }
-    },
-    [containerRef, animation?.animateFrom]
-  )
-
-  useEffect(() => {
-    if (items && items.length > 0) {
-      const timeout = window.setTimeout(() => setMediaReady(true), 3000)
-
-      preloadMedia(items)
-        .then(() => setMediaReady(true))
-        .finally(() => window.clearTimeout(timeout))
-    } else {
-      setMediaReady(true)
-    }
-  }, [items])
-
-  const grid = useMemo(() => {
-    if (!width || !validItems.length) return { items: [], height: 0 }
-
-    const colHeights = new Array(columns).fill(0)
-    const gap = layout?.gap || 16
-    const totalGaps = (columns - 1) * gap
-    const columnWidth = (width - totalGaps) / columns
-
-    const gridItems = validItems.map((item) => {
-      const aspectRatio = item.aspectRatio || '1/1'
-      const [w, h] = aspectRatio.split('/').map(Number)
-      const validW = w && !isNaN(w) ? w : 1
-      const validH = h && !isNaN(h) ? h : 1
-      const ratio = validW / validH
-
-      let colSpan = 1
-
-      if (ratio >= 2) {
-        colSpan = Math.min(2, columns)
-      } else if (ratio >= 1.5) {
-        colSpan = Math.min(2, columns)
-      }
-
-      let bestCol = 0
-      let minHeight = Infinity
-
-      for (let col = 0; col <= columns - colSpan; col++) {
-        const maxHeightInSpan = Math.max(...colHeights.slice(col, col + colSpan))
-
-        if (maxHeightInSpan < minHeight) {
-          minHeight = maxHeightInSpan
-          bestCol = col
-        }
-      }
-
-      const itemWidth = columnWidth * colSpan + gap * (colSpan - 1)
-      const x = bestCol * (columnWidth + gap)
-      const height = getAspectRatioHeight(aspectRatio, itemWidth)
-      const y = Math.max(...colHeights.slice(bestCol, bestCol + colSpan))
-
-      for (let i = bestCol; i < bestCol + colSpan; i++) {
-        colHeights[i] = y + height + gap
-      }
-
-      return { ...item, x, y, w: itemWidth, h: height, colSpan }
-    })
-
-    const totalHeight = Math.max(...colHeights)
-
-    return { items: gridItems, height: totalHeight }
-  }, [columns, validItems, width, layout?.gap])
-
-  useEffect(() => {
-    setContainerHeight(grid.height)
-  }, [grid.height])
-
-  const animateItemIntoView = useCallback(
-    (element: HTMLElement, item: any, index: number, delay: number = 0) => {
-      const start = getInitialPosition(item)
-      const deltaX = start.x - item.x
-      const deltaY = start.y - item.y
-
-      gsap.fromTo(
-        element,
-        {
-          opacity: 0,
-          x: deltaX,
-          y: deltaY,
-          ...(interaction?.blurToFocus && { filter: 'blur(10px)' })
-        },
-        {
-          opacity: 1,
-          x: 0,
-          y: 0,
-          ...(interaction?.blurToFocus && { filter: 'none' }),
-          duration: animation?.duration || 0.8,
-          ease: animation?.ease && animation.ease !== '0' ? animation.ease : 'power3.out',
-          delay: delay + index * (animation?.stagger || 0.05),
-          overwrite: 'auto'
-        }
-      )
-    },
-    [getInitialPosition, animation, interaction?.blurToFocus]
-  )
-
-  const hasMounted = useRef(false)
-
-  useLayoutEffect(() => {
-    if (!mediaReady || !items || items.length === 0) return
-
-    const blockEl = containerRef.current
-    if (!blockEl) return
-
-    triggersRef.current.forEach((t) => t.kill())
-    triggersRef.current = []
-
-    gsap.killTweensOf(`[data-block-id="${blockId}"] [data-key]`)
-
-    if (animation?.enableAnimation === false) {
-      grid.items.forEach((item) => {
-        const selector = `[data-key="${item.id}"]`
-        const element = blockEl.querySelector(selector) as HTMLElement | null
-        if (!element) return
-
-        gsap.set(element, {
-          opacity: 1,
-          x: 0,
-          y: 0,
-          left: item.x,
-          top: item.y,
-          width: item.w,
-          height: item.h,
-          filter: 'none'
-        })
-      })
-
-      return
-    }
-
-    grid.items.forEach((item, index) => {
-      const selector = `[data-key="${item.id}"]`
-      const element = blockEl.querySelector(selector) as HTMLElement | null
-      if (!element) return
-
-      const animProps = { left: item.x, top: item.y, width: item.w, height: item.h }
-
-      if (!hasMounted.current) {
-        gsap.set(element, {
-          opacity: 1,
-          x: 0,
-          y: 0,
-          width: item.w,
-          height: item.h,
-          filter: 'none'
-        })
-
-        const trigger = ScrollTrigger.create({
-          id: `masonry-item-${blockId}-${item.id}`,
-          trigger: element,
-          start: 'top 85%',
-          end: 'bottom 15%',
-          toggleActions: animation?.repeatOnScroll
-            ? 'play none none reverse'
-            : 'play none none none',
-          onEnter: () => {
-            if (!animatedItems.current.has(item.id) || animation?.repeatOnScroll) {
-              animateItemIntoView(element, item, index)
-
-              if (!animation?.repeatOnScroll) {
-                animatedItems.current.add(item.id)
-              }
-            }
-          },
-          onLeave: () => {
-            if (animation?.repeatOnScroll) {
-              gsap.to(element, {
-                opacity: 0.3,
-                duration: 0.3,
-                ease: 'power2.out'
-              })
-            }
-          },
-          onEnterBack: () => {
-            if (animation?.repeatOnScroll) {
-              gsap.to(element, {
-                opacity: 1,
-                duration: 0.3,
-                ease: 'power2.out'
-              })
-            }
-          },
-          onLeaveBack: () => {
-            if (animation?.repeatOnScroll) {
-              gsap.to(element, {
-                opacity: 0.3,
-                duration: 0.3,
-                ease: 'power2.out'
-              })
-            }
-          }
-        })
-
-        triggersRef.current.push(trigger)
-      } else {
-        gsap.to(element, {
-          ...animProps,
-          x: 0,
-          y: 0,
-          duration: animation?.duration || 0.6,
-          ease: animation?.ease && animation.ease !== '0' ? animation.ease : 'power3.out',
-          overwrite: 'auto'
-        })
-      }
-    })
-
-    hasMounted.current = true
-
-    return () => {
-      triggersRef.current.forEach((t) => t.kill())
-      triggersRef.current = []
-    }
-  }, [grid, mediaReady, animation, interaction?.blurToFocus, items, animateItemIntoView])
-
-  useEffect(() => {
-    return () => {
-      ScrollTrigger.getAll().forEach((trigger) => {
-        if (trigger.vars.id?.startsWith(`masonry-item-${blockId}-`)) {
-          trigger.kill()
-        }
-      })
-
-      gsap.killTweensOf(`[data-block-id="${blockId}"] [data-key]`)
-    }
-  }, [blockId])
-
-  const handleMouseEnter = (_itemId: string, element: HTMLElement) => {
-    if (interaction?.scaleOnHover) {
-      gsap.to(element, {
-        scale: interaction.hoverScale || 0.95,
-        duration: 0.3,
-        ease: 'power2.out',
-        filter: 'brightness(0.75)'
-      })
-    }
-
-    if (interaction?.colorShiftOnHover) {
-      const overlay = element.querySelector('.color-overlay') as HTMLElement
-      if (overlay) gsap.to(overlay, { opacity: 0.3, duration: 0.3 })
-    }
-  }
-
-  const handleMouseLeave = (_itemId: string, element: HTMLElement) => {
-    if (interaction?.scaleOnHover) {
-      gsap.to(element, {
-        scale: 1,
-        duration: 0.3,
-        ease: 'power2.out',
-        filter: 'none'
-      })
-    }
-
-    if (interaction?.colorShiftOnHover) {
-      const overlay = element.querySelector('.color-overlay') as HTMLElement
-      if (overlay) gsap.to(overlay, { opacity: 0, duration: 0.3 })
-    }
-  }
-
-  if (!items || items.length === 0) {
-    return <div className="p-4">No items to display</div>
-  }
-
-  return (
-    <div
-      id={advanced?.sectionId}
-      data-block-id={blockId}
-      className={cn('masonary-media-block relative w-full', advanced?.customClassName)}
-      ref={containerRef}
-      style={{
-        height: containerHeight > 0 ? `${containerHeight}px` : 'auto',
-        minHeight: containerHeight > 0 ? `${containerHeight}px` : 'auto'
-      }}
-      {...(advanced?.enableParallax && {
-        'data-scroll': true,
-        'data-scroll-speed': advanced.parallaxSpeed || 0.5
-      })}
-    >
-      {!mediaReady &&
-        grid.items.map((item) => (
-          <div
-            key={`skeleton-${item.id}`}
-            className="absolute rounded-md overflow-hidden border border-border"
-            style={{
-              left: item.x,
-              top: item.y,
-              width: item.w,
-              height: item.h
-            }}
-          >
-            <div className="shimmer-effect w-full h-full bg-zinc-200/10 dark:bg-zinc-800/10" />
-          </div>
-        ))}
-
-      {mediaReady &&
-        grid.items.map((item) => {
-          const hasLink = getLinkUrl(item) !== null
-
-          return (
-            <div
-              key={item.id}
-              data-key={item.id}
-              className={cn(
-                'absolute box-content rounded-md overflow-hidden border border-border shadow-2xl',
-                hasLink && 'cursor-pointer'
-              )}
-              style={{
-                left: item.x,
-                top: item.y,
-                width: item.w,
-                height: item.h,
-                opacity: 1,
-                willChange: 'transform, opacity, width, height'
-              }}
-              onClick={() => handleItemClick(item)}
-              onMouseEnter={(e) => handleMouseEnter(item.id, e.currentTarget)}
-              onMouseLeave={(e) => handleMouseLeave(item.id, e.currentTarget)}
-            >
-              <div className="group relative w-full h-full">
-                <MediaContent item={item} />
-
-                {item.showTextOverlay && item.textOverlay && (
-                  <span
-                    className="masonary-card-text-overlay absolute inset-0 z-10 m-auto flex h-full w-full items-center justify-center p-4 px-2 text-center text-sm text-white [text-shadow:2px_2px_2px_black] shadow-[0_0_0px_black] transition-all duration-300 hover:scale-110 hover:brightness-110 group-hover:[&_img]:brightness-[0.15]"
-                  >
-                    {item.textOverlay}
-                  </span>
-                )}
-
-                {interaction?.colorShiftOnHover && (
-                  <FadeUpOnInView delay={0.1} className="absolute inset-0">
-                    <div
-                      className="color-overlay absolute inset-0 rounded-sm opacity-0 pointer-events-none"
-                      style={{
-                        background: `linear-gradient(to top right, ${
-                          interaction.customHoverColors?.fromColor || 'rgba(236, 72, 153, 0.5)'
-                        }, ${interaction.customHoverColors?.toColor || 'rgba(14, 165, 233, 0.5)'})`
-                      }}
-                    />
-                  </FadeUpOnInView>
-                )}
-              </div>
-            </div>
-          )
-        })}
-    </div>
-  )
-}
+          <img
+            className="h-full w-full object-cover"
+            src={item.media?.url || ''}
+            alt={item.media?.alt || ''}
+          />
+        )}
+      </div>
+    )
+  },
+  (prev, next) =>
+    prev.item.media?.id === next.item.media?.id && prev.item.aspectRatio === next.item.aspectRatio,
+)
+
+export const DDMasonry: React.FC<MasonryMediaBlockProps> = ({
+  items,
+  layout,
+  animation,
+  interaction,
+  advanced,
+}) => {
+  const triggersRef = useRef<ScrollTrigger[]>([])
+
+  const getLinkUrl = (item: MasonryItem): string | null => {
+    if (!item.linkType || item.linkType === 'none') return null
+
+    if (item.linkType === 'custom') {
+      return item.url || null
+    }
+
+    if (item.linkType === 'reference' && item.reference) {
+      const refValue = item.reference.value
+
+      const getCollectionPath = (relationTo: string) => {
+        if (relationTo === 'pages') return ''
+        return relationTo
+      }
+
+      const prefix = getCollectionPath(item.reference.relationTo)
+      const toUrl = (slug: string) => (prefix ? `/${prefix}/${slug}` : `/${slug}`)
+
+      if (typeof refValue === 'string') {
+        return toUrl(refValue)
+      }
+
+      if (refValue && typeof refValue === 'object' && 'slug' in refValue) {
+        return toUrl(String(refValue.slug))
+      }
+    }
+
+    return null
+  }
+
+  const handleItemClick = (item: MasonryItem) => {
+    const url = getLinkUrl(item)
+    if (!url) return
+
+    if (item.newTab) {
+      window.open(url, '_blank', 'noopener,noreferrer')
+      return
+    }
+
+    window.location.href = url
+  }
+
+  const blockId = useMemo(
+    () => advanced?.sectionId || `masonry-${Math.random().toString(36).slice(2, 11)}`,
+    [advanced?.sectionId],
+  )
+
+  const columns = useMedia(
+    ['(min-width:1440px)', '(min-width:968px)', '(min-width:640px)', '(min-width:420px)'],
+    [
+      layout?.columns?.desktop || 5,
+      layout?.columns?.laptop || 4,
+      layout?.columns?.tablet || 3,
+      layout?.columns?.mobile || 2,
+    ],
+    1,
+  )
+
+  const [containerRef, { width }] = useMeasure<HTMLDivElement>()
+  const [mediaReady, setMediaReady] = useState(false)
+  const [containerHeight, setContainerHeight] = useState(0)
+  const animatedItems = useRef(new Set<string>())
+
+  const validItems = useMemo(() => {
+    return (
+      items?.map((item, index) => ({
+        ...item,
+        id: item.id || `item-${index}`,
+      })) || []
+    )
+  }, [items])
+
+  const getAspectRatioHeight = (ratio: string, width: number): number => {
+    if (!ratio || !ratio.includes('/')) return width
+
+    const [w, h] = ratio.split('/').map(Number)
+    const validW = w && !isNaN(w) ? w : 1
+    const validH = h && !isNaN(h) ? h : 1
+
+    return (width * validH) / validW
+  }
+
+  const preloadMedia = async (itemsToPreload: MasonryItem[]): Promise<void> => {
+    await Promise.all(
+      itemsToPreload.map((item) => {
+        if (item.media?.url && item.media.mimeType?.startsWith('image/')) {
+          return new Promise<void>((resolve) => {
+            const img = new Image()
+            img.src = item.media.url || ''
+            img.onload = img.onerror = () => resolve()
+          })
+        }
+
+        return Promise.resolve()
+      }),
+    )
+  }
+
+  const getInitialPosition = useCallback(
+    (item: any) => {
+      const containerRect = containerRef.current?.getBoundingClientRect()
+      if (!containerRect) return { x: item.x, y: item.y }
+
+      let direction = animation?.animateFrom || 'bottom'
+
+      if (direction === 'random') {
+        const dirs = ['top', 'bottom', 'left', 'right']
+        direction = dirs[Math.floor(Math.random() * dirs.length)] as typeof direction
+      }
+
+      switch (direction) {
+        case 'top':
+          return { x: item.x, y: -200 }
+        case 'bottom':
+          return { x: item.x, y: window.innerHeight + 200 }
+        case 'left':
+          return { x: -200, y: item.y }
+        case 'right':
+          return { x: window.innerWidth + 200, y: item.y }
+        case 'center':
+          return {
+            x: containerRect.width / 2 - item.w / 2,
+            y: containerRect.height / 2 - item.h / 2,
+          }
+        default:
+          return { x: item.x, y: item.y + 100 }
+      }
+    },
+    [containerRef, animation?.animateFrom],
+  )
+
+  useEffect(() => {
+    if (items && items.length > 0) {
+      const timeout = window.setTimeout(() => setMediaReady(true), 3000)
+
+      preloadMedia(items)
+        .then(() => setMediaReady(true))
+        .finally(() => window.clearTimeout(timeout))
+    } else {
+      setMediaReady(true)
+    }
+  }, [items])
+
+  const grid = useMemo(() => {
+    if (!width || !validItems.length) return { items: [], height: 0 }
+
+    const colHeights = new Array(columns).fill(0)
+    const gap = layout?.gap || 16
+    const totalGaps = (columns - 1) * gap
+    const columnWidth = (width - totalGaps) / columns
+
+    const gridItems = validItems.map((item) => {
+      const aspectRatio = item.aspectRatio || '1/1'
+      const [w, h] = aspectRatio.split('/').map(Number)
+      const validW = w && !isNaN(w) ? w : 1
+      const validH = h && !isNaN(h) ? h : 1
+      const ratio = validW / validH
+
+      let colSpan = 1
+
+      if (ratio >= 2) {
+        colSpan = Math.min(2, columns)
+      } else if (ratio >= 1.5) {
+        colSpan = Math.min(2, columns)
+      }
+
+      let bestCol = 0
+      let minHeight = Infinity
+
+      for (let col = 0; col <= columns - colSpan; col++) {
+        const maxHeightInSpan = Math.max(...colHeights.slice(col, col + colSpan))
+
+        if (maxHeightInSpan < minHeight) {
+          minHeight = maxHeightInSpan
+          bestCol = col
+        }
+      }
+
+      const itemWidth = columnWidth * colSpan + gap * (colSpan - 1)
+      const x = bestCol * (columnWidth + gap)
+      const height = getAspectRatioHeight(aspectRatio, itemWidth)
+      const y = Math.max(...colHeights.slice(bestCol, bestCol + colSpan))
+
+      for (let i = bestCol; i < bestCol + colSpan; i++) {
+        colHeights[i] = y + height + gap
+      }
+
+      return { ...item, x, y, w: itemWidth, h: height, colSpan }
+    })
+
+    const totalHeight = Math.max(...colHeights)
+
+    return { items: gridItems, height: totalHeight }
+  }, [columns, validItems, width, layout?.gap])
+
+  useEffect(() => {
+    setContainerHeight(grid.height)
+  }, [grid.height])
+
+  const animateItemIntoView = useCallback(
+    (element: HTMLElement, item: any, index: number, delay: number = 0) => {
+      const start = getInitialPosition(item)
+      const deltaX = start.x - item.x
+      const deltaY = start.y - item.y
+
+      gsap.fromTo(
+        element,
+        {
+          opacity: 0,
+          x: deltaX,
+          y: deltaY,
+          ...(interaction?.blurToFocus && { filter: 'blur(10px)' }),
+        },
+        {
+          opacity: 1,
+          x: 0,
+          y: 0,
+          ...(interaction?.blurToFocus && { filter: 'none' }),
+          duration: animation?.duration || 0.8,
+          ease: animation?.ease && animation.ease !== '0' ? animation.ease : 'power3.out',
+          delay: delay + index * (animation?.stagger || 0.05),
+          overwrite: 'auto',
+        },
+      )
+    },
+    [getInitialPosition, animation, interaction?.blurToFocus],
+  )
+
+  const hasMounted = useRef(false)
+
+  useLayoutEffect(() => {
+    if (!mediaReady || !items || items.length === 0) return
+
+    const blockEl = containerRef.current
+    if (!blockEl) return
+
+    triggersRef.current.forEach((t) => t.kill())
+    triggersRef.current = []
+
+    gsap.killTweensOf(`[data-block-id="${blockId}"] [data-key]`)
+
+    if (animation?.enableAnimation === false) {
+      grid.items.forEach((item) => {
+        const selector = `[data-key="${item.id}"]`
+        const element = blockEl.querySelector(selector) as HTMLElement | null
+        if (!element) return
+
+        gsap.set(element, {
+          opacity: 1,
+          x: 0,
+          y: 0,
+          left: item.x,
+          top: item.y,
+          width: item.w,
+          height: item.h,
+          filter: 'none',
+        })
+      })
+
+      return
+    }
+
+    grid.items.forEach((item, index) => {
+      const selector = `[data-key="${item.id}"]`
+      const element = blockEl.querySelector(selector) as HTMLElement | null
+      if (!element) return
+
+      const animProps = { left: item.x, top: item.y, width: item.w, height: item.h }
+
+      if (!hasMounted.current) {
+        gsap.set(element, {
+          opacity: 1,
+          x: 0,
+          y: 0,
+          width: item.w,
+          height: item.h,
+          filter: 'none',
+        })
+
+        const trigger = ScrollTrigger.create({
+          id: `masonry-item-${blockId}-${item.id}`,
+          trigger: element,
+          start: 'top 85%',
+          end: 'bottom 15%',
+          toggleActions: animation?.repeatOnScroll
+            ? 'play none none reverse'
+            : 'play none none none',
+          onEnter: () => {
+            if (!animatedItems.current.has(item.id) || animation?.repeatOnScroll) {
+              animateItemIntoView(element, item, index)
+
+              if (!animation?.repeatOnScroll) {
+                animatedItems.current.add(item.id)
+              }
+            }
+          },
+          onLeave: () => {
+            if (animation?.repeatOnScroll) {
+              gsap.to(element, {
+                opacity: 0.3,
+                duration: 0.3,
+                ease: 'power2.out',
+              })
+            }
+          },
+          onEnterBack: () => {
+            if (animation?.repeatOnScroll) {
+              gsap.to(element, {
+                opacity: 1,
+                duration: 0.3,
+                ease: 'power2.out',
+              })
+            }
+          },
+          onLeaveBack: () => {
+            if (animation?.repeatOnScroll) {
+              gsap.to(element, {
+                opacity: 0.3,
+                duration: 0.3,
+                ease: 'power2.out',
+              })
+            }
+          },
+        })
+
+        triggersRef.current.push(trigger)
+      } else {
+        gsap.to(element, {
+          ...animProps,
+          x: 0,
+          y: 0,
+          duration: animation?.duration || 0.6,
+          ease: animation?.ease && animation.ease !== '0' ? animation.ease : 'power3.out',
+          overwrite: 'auto',
+        })
+      }
+    })
+
+    hasMounted.current = true
+
+    return () => {
+      triggersRef.current.forEach((t) => t.kill())
+      triggersRef.current = []
+    }
+  }, [grid, mediaReady, animation, interaction?.blurToFocus, items, animateItemIntoView])
+
+  useEffect(() => {
+    return () => {
+      ScrollTrigger.getAll().forEach((trigger) => {
+        if (trigger.vars.id?.startsWith(`masonry-item-${blockId}-`)) {
+          trigger.kill()
+        }
+      })
+
+      gsap.killTweensOf(`[data-block-id="${blockId}"] [data-key]`)
+    }
+  }, [blockId])
+
+  const handleMouseEnter = (_itemId: string, element: HTMLElement) => {
+    if (interaction?.scaleOnHover) {
+      gsap.to(element, {
+        scale: interaction.hoverScale || 0.95,
+        duration: 0.3,
+        ease: 'power2.out',
+        filter: 'brightness(0.75)',
+      })
+    }
+
+    if (interaction?.colorShiftOnHover) {
+      const overlay = element.querySelector('.color-overlay') as HTMLElement
+      if (overlay) gsap.to(overlay, { opacity: 0.3, duration: 0.3 })
+    }
+  }
+
+  const handleMouseLeave = (_itemId: string, element: HTMLElement) => {
+    if (interaction?.scaleOnHover) {
+      gsap.to(element, {
+        scale: 1,
+        duration: 0.3,
+        ease: 'power2.out',
+        filter: 'none',
+      })
+    }
+
+    if (interaction?.colorShiftOnHover) {
+      const overlay = element.querySelector('.color-overlay') as HTMLElement
+      if (overlay) gsap.to(overlay, { opacity: 0, duration: 0.3 })
+    }
+  }
+
+  if (!items || items.length === 0) {
+    return <div className="p-4">No items to display</div>
+  }
+
+  return (
+    <div
+      id={advanced?.sectionId}
+      data-block-id={blockId}
+      className={cn(
+        'masonary-media-block relative min-w-full w-full',
+        advanced?.customClassName,
+      )}
+      ref={containerRef}
+      style={{
+        height: containerHeight > 0 ? `${containerHeight}px` : 'auto',
+        minHeight: containerHeight > 0 ? `${containerHeight}px` : 'auto',
+      }}
+      {...(advanced?.enableParallax && {
+        'data-scroll': true,
+        'data-scroll-speed': advanced.parallaxSpeed || 0.5,
+      })}
+    >
+      {!mediaReady &&
+        grid.items.map((item) => (
+          <div
+            key={`skeleton-${item.id}`}
+            className="absolute rounded-md overflow-hidden border border-border"
+            style={{
+              left: item.x,
+              top: item.y,
+              width: item.w,
+              height: item.h,
+            }}
+          >
+            <div className="shimmer-effect w-full h-full bg-zinc-200/10 dark:bg-zinc-800/10" />
+          </div>
+        ))}
+
+      {mediaReady &&
+        grid.items.map((item) => {
+          const hasLink = getLinkUrl(item) !== null
+
+          return (
+            <div
+              key={item.id}
+              data-key={item.id}
+              className={cn(
+                'absolute box-content rounded-md overflow-hidden border border-border shadow-2xl',
+                hasLink && 'cursor-pointer',
+              )}
+              style={{
+                left: item.x,
+                top: item.y,
+                width: item.w,
+                height: item.h,
+                opacity: 1,
+                willChange: 'transform, opacity, width, height',
+              }}
+              onClick={() => handleItemClick(item)}
+              onMouseEnter={(e) => handleMouseEnter(item.id, e.currentTarget)}
+              onMouseLeave={(e) => handleMouseLeave(item.id, e.currentTarget)}
+            >
+              <div className="group relative w-full h-full">
+                <MediaContent item={item} />
+
+                {item.showTextOverlay && item.textOverlay && (
+                  <span className="masonary-card-text-overlay absolute inset-0 z-10 m-auto flex h-full w-full items-center justify-center p-4 px-2 text-center text-sm text-white [text-shadow:2px_2px_2px_black] shadow-[0_0_0px_black] transition-all duration-300 hover:scale-110 hover:brightness-110 group-hover:[&_img]:brightness-[0.15]">
+                    {item.textOverlay}
+                  </span>
+                )}
+
+                {interaction?.colorShiftOnHover && (
+                  <FadeUpOnInView delay={0.1} className="absolute inset-0">
+                    <div
+                      className="color-overlay absolute inset-0 rounded-sm opacity-0 pointer-events-none"
+                      style={{
+                        background: `linear-gradient(to top right, ${
+                          interaction.customHoverColors?.fromColor || 'rgba(236, 72, 153, 0.5)'
+                        }, ${interaction.customHoverColors?.toColor || 'rgba(14, 165, 233, 0.5)'})`,
+                      }}
+                    />
+                  </FadeUpOnInView>
+                )}
+              </div>
+            </div>
+          )
+        })}
+    </div>
+  )
+}