blocks-dusted 0.1.10 → 0.1.11

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

@@ -1,545 +1,547 @@
-'use client'
-
-import React, { useEffect, useMemo, useRef } from 'react'
-import Link from 'next/link'
-import { motion, type Variants } from 'framer-motion'
-import { cn } from '@/utilities/ui'
-
-type MediaLike = {
-  url?: string | null
-  alt?: string | null
-  mimeType?: string | null
-}
-
-type ShowcaseItem = {
-  id?: string | null
-  title?: string | null
-  category?: string | null
-  framework?: string | null
-  description?: string | null
-  href?: string | null
-  linkLabel?: string | null
-  free?: boolean | null
-  priceLabel?: string | null
-  aspectRatio?: '16/9' | '3/2' | '1/1' | '2/3' | string | null
-  image?: number | string | MediaLike | null
-  hoverVideo?: number | string | MediaLike | null
-  posterFallbackUrl?: string | null
-  videoFallbackUrl?: string | null
-}
-
-type DDMasonaryMediaProps = {
-  eyebrow?: string | null
-  headlineMain?: string | null
-  headlineAccent?: string | null
-  subtext?: string | null
-  items?: ShowcaseItem[] | null
-  columnsDesktop?: number | null
-  columnsTablet?: number | null
-  gapClass?: string | null
-  containerClassName?: string | null
-  sectionClassName?: string | null
-  sectionId?: string | null
-  customCSS?: string | null
-  showCta?: boolean | null
-  ctaAlign?: 'left' | 'center' | 'right' | null
-  ctaDisplayMode?: 'iconWithLabel' | 'iconOnly' | 'labelOnly' | null
-  ctaIconPosition?: 'before' | 'after' | null
-  ctaButtonText?: string | null
-  ctaButtonStyle?: string | null
-  ctaSize?: 'small' | 'medium' | 'large' | null
-  ctaIcon?: string | null
-  ctaLink?: any | null
-  ctaContainerClass?: string | null
-}
-
-const getMediaUrl = (media?: number | string | MediaLike | null, fallback?: string | null) => {
-  if (media && typeof media === 'object' && typeof media.url === 'string') return media.url
-  if (typeof media === 'string') return media
-  return fallback || ''
-}
-
-const getMediaAlt = (media?: number | string | MediaLike | null, fallback = '') => {
-  if (media && typeof media === 'object' && typeof media.alt === 'string') return media.alt
-  return fallback
-}
-
-const getMediaMimeType = (media?: number | string | MediaLike | null) => {
-  if (media && typeof media === 'object' && typeof media.mimeType === 'string')
-    return media.mimeType
-  return ''
-}
-
-const getFileExtension = (url: string) => {
-  const clean = url.split('?')[0]?.split('#')[0] || ''
-  return clean.split('.').pop()?.toLowerCase() || ''
-}
-
-const isVideoMedia = (url: string, mimeType?: string | null) => {
-  const ext = getFileExtension(url)
-
-  return Boolean(
-    mimeType?.startsWith('video/') ||
-    ext === 'webm' ||
-    ext === 'mp4' ||
-    ext === 'mov' ||
-    ext === 'm4v',
-  )
-}
-
-const isWideCard = (ratio?: string | null) => ratio === '16/9' || ratio === '3/2'
-const isSquareCard = (ratio?: string | null) => ratio === '1/1'
-
-const getGapPx = (gapClass?: string | null) => {
-  if (!gapClass) return 20
-  if (gapClass.includes('gap-0')) return 0
-  if (gapClass.includes('gap-1')) return 4
-  if (gapClass.includes('gap-2')) return 8
-  if (gapClass.includes('gap-3')) return 12
-  if (gapClass.includes('gap-4')) return 16
-  if (gapClass.includes('gap-5')) return 20
-  if (gapClass.includes('gap-6')) return 24
-  if (gapClass.includes('gap-8')) return 32
-  if (gapClass.includes('gap-10')) return 40
-  return 20
-}
-
-const parseAspectRatio = (ratio?: string | null) => {
-  if (!ratio || !ratio.includes('/')) return '1 / 1'
-
-  const [rawWidth, rawHeight] = ratio.split('/').map(Number)
-  const width = rawWidth && !Number.isNaN(rawWidth) ? rawWidth : 1
-  const height = rawHeight && !Number.isNaN(rawHeight) ? rawHeight : 1
-
-  return `${width} / ${height}`
-}
-
-const containerVariants: Variants = {
-  hidden: {},
-  show: {
-    transition: {
-      staggerChildren: 0.08,
-      delayChildren: 0.06,
-    },
-  },
-}
-
-const itemVariants: Variants = {
-  hidden: {
-    opacity: 0,
-    y: 22,
-    filter: 'blur(6px)',
-  },
-  show: {
-    opacity: 1,
-    y: 0,
-    filter: 'none',
-    transition: {
-      duration: 0.45,
-      ease: 'easeOut',
-    },
-  },
-}
-
-function StudioMasonaryCard({ item, index }: { item: ShowcaseItem; index: number }) {
-  const videoRef = useRef<HTMLVideoElement | null>(null)
-
-  const imageUrl = getMediaUrl(item.image, item.posterFallbackUrl)
-  const imageAlt = getMediaAlt(item.image, item.title || 'Studio preview')
-
-  const hoverUrl = getMediaUrl(item.hoverVideo, item.videoFallbackUrl)
-  const hoverMimeType = getMediaMimeType(item.hoverVideo)
-  const hoverIsVideo = isVideoMedia(hoverUrl, hoverMimeType)
-  const hoverIsImage = Boolean(hoverUrl && !hoverIsVideo)
-
-  const href = item.href || '#'
-  const aspectRatio = parseAspectRatio(item.aspectRatio || '16/9')
-  const wide = isWideCard(item.aspectRatio)
-  const square = isSquareCard(item.aspectRatio)
-  const badgeLabel = item.category || (item.free ? 'Free' : item.priceLabel || '')
-
-  const handleMouseEnter = () => {
-    const video = videoRef.current
-    if (!video || !hoverIsVideo) return
-
-    if (video.readyState === 0) video.load()
-
-    video.currentTime = 0
-    const playPromise = video.play()
-
-    if (playPromise && typeof playPromise.catch === 'function') {
-      playPromise.catch(() => undefined)
-    }
-  }
-
-  const handleMouseLeave = () => {
-    const video = videoRef.current
-    if (!video) return
-
-    video.pause()
-    video.currentTime = 0
-  }
-
-  return (
-    <article
-      className={cn('studio-masonry-item card-item', wide && 'is-wide', square && 'is-square')}
-      data-index={index}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
-      <Link href={href} className="block h-full focus-visible:outline-none">
-        <article
-          data-theme="dark"
-          className="masonary-article-card outline-2 outline-stone-500/50 outline-solid group relative h-full w-full overflow-clip rounded-[3rem]!  border border-border bg-[#55526b85]! backdrop-blur-xl! shadow-2xl transition-all duration-300 hover:cursor-pointer hover:border-lime-500 hover:shadow-2xl"
-          style={{ cornerShape: 'squircle', aspectRatio } as React.CSSProperties}
-        >
-          <div
-            className="card-media relative w-full overflow-hidden rounded-[3rem]! border border-border bg-linear-to-br from-violet-950 to-indigo-950 shadow-2xl!"
-            style={{ cornerShape: 'squircle', aspectRatio } as React.CSSProperties}
-          >
-            {imageUrl ? (
-              <img
-                src={imageUrl}
-                alt={imageAlt}
-                loading="lazy"
-                decoding="async"
-                className={cn(
-                  'absolute inset-0 h-full w-full object-cover object-top rounded-[3rem]! transition-all duration-500 group-hover:scale-105',
-                  hoverUrl && 'group-hover:opacity-0',
-                )}
-                style={{ cornerShape: 'squircle' } as React.CSSProperties}
-              />
-            ) : (
-              <div className="absolute inset-0 flex items-center justify-center bg-linear-to-br from-violet-950 to-indigo-950 text-xs text-stone-500">
-                Preview image
-              </div>
-            )}
-
-            {hoverUrl && hoverIsVideo && (
-              <video
-                ref={videoRef}
-                src={hoverUrl}
-                muted
-                loop
-                playsInline
-                preload="metadata"
-                className="absolute inset-0 h-full w-full object-cover object-top rounded-[3rem]! opacity-0 transition-all duration-500 group-hover:scale-105 group-hover:opacity-100"
-                style={{ cornerShape: 'squircle' } as React.CSSProperties}
-              />
-            )}
-
-            {hoverUrl && hoverIsImage && (
-              <img
-                src={hoverUrl}
-                alt=""
-                loading="lazy"
-                decoding="async"
-                className="absolute inset-0 h-full w-full object-cover object-top !rounded-4xl opacity-0 transition-all duration-500 group-hover:scale-105 group-hover:opacity-100"
-                style={{ cornerShape: 'squircle' } as React.CSSProperties}
-              />
-            )}
-
-            <div
-              className="pointer-events-none absolute inset-0 z-10 transition-opacity duration-300 group-hover:opacity-90"
-              style={{
-                background:
-                  'linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.08) 32%, rgba(0,0,0,0.12) 52%, rgba(0,0,0,0.88) 100%)',
-              }}
-            />
-
-            <div className="pointer-events-none absolute inset-0 z-20 flex flex-col justify-between p-4 sm:p-4 md:p-4">
-              {badgeLabel ? (
-                <div className="flex items-start justify-start">
-                  <span
-                    className="inline-flex rounded-full border border-lime-500/80 bg-lime-500/15 px-2 py-1 text-[11.5px] font-medium tracking-widest text-stone-50 backdrop-blur-md sm:px-2 sm:py-1"
-                    style={{ boxShadow: '0 0 24px rgba(132,204,22,0.35)' }}
-                  >
-                    {badgeLabel}
-                  </span>
-                </div>
-              ) : (
-                <span />
-              )}
-
-              {item.title && (
-                <h3
-                  className="max-w-[86%] text-lg font-semibold tracking-[0.08em] text-stone-50"
-                  style={{ textShadow: '0 4px 16px rgba(0,0,0,0.9)' }}
-                >
-                  {item.title}
-                </h3>
-              )}
-            </div>
-          </div>
-        </article>
-      </Link>
-    </article>
-  )
-}
-
-export const DDMasonaryMedia: React.FC<DDMasonaryMediaProps> = ({
-  eyebrow = 'Featured systems',
-  headlineMain = 'Components, blocks, and templates',
-  headlineAccent = 'built to feel alive',
-  subtext = 'A curated showcase of production-ready interface pieces, with static previews and motion demos on hover.',
-  items = [],
-  columnsDesktop = 12,
-  columnsTablet = 2,
-  gapClass = 'gap-5',
-  containerClassName = 'max-w-7xl mx-auto px-4 md:px-6',
-  sectionClassName = 'py-24',
-  sectionId = 'studio-masonary-media',
-  customCSS,
-  showCta = false,
-  ctaAlign = 'center',
-  ctaDisplayMode = 'iconWithLabel',
-  ctaIconPosition = 'before',
-  ctaButtonText,
-  ctaButtonStyle = 'primary',
-  ctaSize = 'medium',
-  ctaIcon,
-  ctaLink,
-  ctaContainerClass,
-}) => {
-  const gridRef = useRef<HTMLDivElement | null>(null)
-  const isotopeRef = useRef<any>(null)
-
-  const safeSectionId = sectionId || 'studio-masonary-media'
-  const gap = useMemo(() => getGapPx(gapClass), [gapClass])
-  const desktopColumns = Math.min(Math.max(columnsDesktop || 6, 5), 6)
-  const tabletColumns = Math.min(Math.max(columnsTablet || 2, 1), 3)
-
-  useEffect(() => {
-    if (!gridRef.current || !items || items.length === 0) return
-
-    let destroyed = false
-
-    const init = async () => {
-      const Isotope = (await import('isotope-layout')).default
-      const imagesLoaded = (await import('imagesloaded')).default
-
-      if (!gridRef.current || destroyed) return
-
-      const iso = new Isotope(gridRef.current, {
-        itemSelector: '.studio-masonry-item',
-        percentPosition: true,
-        transitionDuration: '0.35s',
-        masonry: {
-          columnWidth: '.studio-masonry-sizer',
-          gutter: '.studio-masonry-gutter',
-          fitWidth: false,
-        },
-      })
-
-      isotopeRef.current = iso
-
-      imagesLoaded(gridRef.current, () => {
-        if (!destroyed) iso.layout()
-      })
-
-      window.setTimeout(() => {
-        if (!destroyed) iso.layout()
-      }, 250)
-    }
-
-    init()
-
-    const handleResize = () => {
-      isotopeRef.current?.layout()
-    }
-
-    window.addEventListener('resize', handleResize)
-
-    return () => {
-      destroyed = true
-      window.removeEventListener('resize', handleResize)
-      isotopeRef.current?.destroy()
-      isotopeRef.current = null
-    }
-  }, [items])
-
-  useEffect(() => {
-    isotopeRef.current?.reloadItems()
-    isotopeRef.current?.layout()
-  }, [items, columnsDesktop, columnsTablet, gap])
-
-  if (!items || items.length === 0) return null
-
-  return (
-    <>
-      <style
-        dangerouslySetInnerHTML={{
-          __html: `
-            #${safeSectionId} .studio-masonry-grid {
-              --studio-masonry-gap: ${gap}px;
-              --studio-masonry-cols: 1;
-              position: relative;
-              width: 100%;
-            }
-
-            #${safeSectionId} .studio-masonry-sizer,
-            #${safeSectionId} .studio-masonry-item {
-              width: 100%;
-            }
-
-            #${safeSectionId} .studio-masonry-gutter {
-              width: var(--studio-masonry-gap);
-            }
-
-            #${safeSectionId} .studio-masonry-item {
-              margin-bottom: var(--studio-masonry-gap);
-              will-change: transform;
-            }
-
-            @media (max-width: 639px) {
-              #${safeSectionId} .studio-masonry-grid {
-                --studio-masonry-cols: 2;
-              }
-
-              #${safeSectionId} .studio-masonry-sizer,
-              #${safeSectionId} .studio-masonry-item.is-square {
-                width: calc(
-                  (100% - ((var(--studio-masonry-cols) - 1) * var(--studio-masonry-gap))) /
-                    var(--studio-masonry-cols)
-                );
-              }
-
-              #${safeSectionId} .studio-masonry-item:not(.is-square) {
-                width: 100%;
-              }
-
-              #${safeSectionId} .studio-masonry-item.is-square .card-media {
-                aspect-ratio: 1 / 1 !important;
-              }
-
-              #${safeSectionId} .studio-masonry-item:not(.is-square) .card-media {
-                aspect-ratio: 16 / 9 !important;
-              }
-            }
-
-            @media (min-width: 640px) {
-              #${safeSectionId} .studio-masonry-grid {
-                --studio-masonry-cols: ${tabletColumns};
-              }
-
-              #${safeSectionId} .studio-masonry-sizer,
-              #${safeSectionId} .studio-masonry-item {
-                width: calc(
-                  (100% - ((var(--studio-masonry-cols) - 1) * var(--studio-masonry-gap))) /
-                    var(--studio-masonry-cols)
-                );
-              }
-
-              #${safeSectionId} .studio-masonry-item.is-wide {
-                width: calc(
-                  (
-                      (100% - ((var(--studio-masonry-cols) - 1) * var(--studio-masonry-gap))) /
-                        var(--studio-masonry-cols)
-                    ) *
-                    2 + var(--studio-masonry-gap)
-                );
-              }
-            }
-
-            @media (min-width: 1024px) {
-              #${safeSectionId} .studio-masonry-grid {
-                --studio-masonry-cols: ${desktopColumns};
-              }
-            }
-
-            @media (min-width: 640px) and (max-width: 1023px) {
-              #${safeSectionId} .studio-masonry-item.is-wide {
-                width: 100%;
-              }
-            }
-
-            #${safeSectionId} .card-media {
-              min-height: 10rem;
-              scale: 1;
-            }
-          `,
-        }}
-      />
-
-      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
-
-      <section id={safeSectionId} className={cn('studio-masonary-media', sectionClassName)}>
-        <div className={cn(containerClassName)}>
-          #BlockName-DDMasonaryMedia
-          <motion.div
-            variants={containerVariants}
-            initial="hidden"
-            whileInView="show"
-            viewport={{ once: false, amount: 0.2 }}
-            className="mb-14 flex flex-col justify-between gap-6 overflow-hidden lg:flex-row lg:items-end"
-          >
-            <motion.div variants={itemVariants}>
-              {eyebrow && (
-                <p className="top-caption mb-3 text-[11.5px] font-semibold uppercase tracking-widest text-stone-400">
-                  {eyebrow}
-                </p>
-              )}
-
-              {(headlineMain || headlineAccent) && (
-                <h2 className="text-3d text-4xl font-bold leading-tight text-stone-900 dark:text-stone-50 md:text-5xl">
-                  {headlineMain}
-
-                  {headlineAccent && (
-                    <>
-                      <br />
-                      <span className="text-stone-400">{headlineAccent}</span>
-                    </>
-                  )}
-                </h2>
-              )}
-            </motion.div>
-
-            {subtext && (
-              <motion.p
-                variants={itemVariants}
-                className="max-w-sm text-base leading-relaxed text-stone-400 dark:text-stone-300 lg:text-right"
-              >
-                {subtext}
-              </motion.p>
-            )}
-          </motion.div>
-
-          <div ref={gridRef} className="studio-masonry-grid">
-            <div className="studio-masonry-sizer" />
-            <div className="studio-masonry-gutter" />
-
-            {items.map((item, index) => (
-              <StudioMasonaryCard
-                key={item.id ?? `${item.title}-${index}`}
-                item={item}
-                index={index}
-              />
-            ))}
-          </div>
-        </div>
-        {showCta && (
-          <div
-            className={cn(
-              'mt-10 flex',
-              ctaAlign === 'left' && 'justify-start',
-              ctaAlign === 'center' && 'justify-center',
-              ctaAlign === 'right' && 'justify-end',
-              ctaContainerClass,
-            )}
-          >
-            <a
-              href={(ctaLink as any)?.url ?? '#'}
-              className="inline-flex items-center gap-1.5 bg-indigo-700 text-stone-50 text-xs font-semibold px-3 py-1.5 rounded-lg group-hover:bg-indigo-600 group-hover:scale-[1.05] group-hover:shadow-xl transition-all duration-150 whitespace-nowrap"
-              style={{ cornerShape: 'squircle' } as React.CSSProperties}
-            >
-              {/* TODO: Reconnect ButtonWithIcon if this project provides it. */}
-              {ctaButtonText ?? (ctaLink as any)?.label ?? 'Learn more'}
-            </a>
-          </div>
-        )}
-      </section>
-    </>
-  )
-}
-
-export default DDMasonaryMedia
+'use client'
+
+import React, { useEffect, useMemo, useRef } from 'react'
+import Link from 'next/link'
+import { motion, type Variants } from 'framer-motion'
+import { cn } from '@/utilities/ui'
+
+type MediaLike = {
+  url?: string | null
+  alt?: string | null
+  mimeType?: string | null
+}
+
+type ShowcaseItem = {
+  id?: string | null
+  title?: string | null
+  category?: string | null
+  framework?: string | null
+  description?: string | null
+  href?: string | null
+  linkLabel?: string | null
+  free?: boolean | null
+  priceLabel?: string | null
+  aspectRatio?: '16/9' | '3/2' | '1/1' | '2/3' | string | null
+  image?: number | string | MediaLike | null
+  hoverVideo?: number | string | MediaLike | null
+  posterFallbackUrl?: string | null
+  videoFallbackUrl?: string | null
+}
+
+type DDMasonaryMediaProps = {
+  eyebrow?: string | null
+  headlineMain?: string | null
+  headlineAccent?: string | null
+  subtext?: string | null
+  items?: ShowcaseItem[] | null
+  columnsDesktop?: number | null
+  columnsTablet?: number | null
+  gapClass?: string | null
+  containerClassName?: string | null
+  sectionClassName?: string | null
+  sectionId?: string | null
+  customCSS?: string | null
+  showCta?: boolean | null
+  ctaAlign?: 'left' | 'center' | 'right' | null
+  ctaDisplayMode?: 'iconWithLabel' | 'iconOnly' | 'labelOnly' | null
+  ctaIconPosition?: 'before' | 'after' | null
+  ctaButtonText?: string | null
+  ctaButtonStyle?: string | null
+  ctaSize?: 'small' | 'medium' | 'large' | null
+  ctaIcon?: string | null
+  ctaLink?: any | null
+  ctaContainerClass?: string | null
+}
+
+const getMediaUrl = (media?: number | string | MediaLike | null, fallback?: string | null) => {
+  if (media && typeof media === 'object' && typeof media.url === 'string') return media.url
+  if (typeof media === 'string') return media
+  return fallback || ''
+}
+
+const getMediaAlt = (media?: number | string | MediaLike | null, fallback = '') => {
+  if (media && typeof media === 'object' && typeof media.alt === 'string') return media.alt
+  return fallback
+}
+
+const getMediaMimeType = (media?: number | string | MediaLike | null) => {
+  if (media && typeof media === 'object' && typeof media.mimeType === 'string')
+    return media.mimeType
+  return ''
+}
+
+const getFileExtension = (url: string) => {
+  const clean = url.split('?')[0]?.split('#')[0] || ''
+  return clean.split('.').pop()?.toLowerCase() || ''
+}
+
+const isVideoMedia = (url: string, mimeType?: string | null) => {
+  const ext = getFileExtension(url)
+
+  return Boolean(
+    mimeType?.startsWith('video/') ||
+    ext === 'webm' ||
+    ext === 'mp4' ||
+    ext === 'mov' ||
+    ext === 'm4v',
+  )
+}
+
+const isWideCard = (ratio?: string | null) => ratio === '16/9' || ratio === '3/2'
+const isSquareCard = (ratio?: string | null) => ratio === '1/1'
+
+const getGapPx = (gapClass?: string | null) => {
+  if (!gapClass) return 20
+  if (gapClass.includes('gap-0')) return 0
+  if (gapClass.includes('gap-1')) return 4
+  if (gapClass.includes('gap-2')) return 8
+  if (gapClass.includes('gap-3')) return 12
+  if (gapClass.includes('gap-4')) return 16
+  if (gapClass.includes('gap-5')) return 20
+  if (gapClass.includes('gap-6')) return 24
+  if (gapClass.includes('gap-8')) return 32
+  if (gapClass.includes('gap-10')) return 40
+  return 20
+}
+
+const parseAspectRatio = (ratio?: string | null) => {
+  if (!ratio || !ratio.includes('/')) return '1 / 1'
+
+  const [rawWidth, rawHeight] = ratio.split('/').map(Number)
+  const width = rawWidth && !Number.isNaN(rawWidth) ? rawWidth : 1
+  const height = rawHeight && !Number.isNaN(rawHeight) ? rawHeight : 1
+
+  return `${width} / ${height}`
+}
+
+const containerVariants: Variants = {
+  hidden: {},
+  show: {
+    transition: {
+      staggerChildren: 0.08,
+      delayChildren: 0.06,
+    },
+  },
+}
+
+const itemVariants: Variants = {
+  hidden: {
+    opacity: 0,
+    y: 22,
+    filter: 'blur(6px)',
+  },
+  show: {
+    opacity: 1,
+    y: 0,
+    filter: 'none',
+    transition: {
+      duration: 0.45,
+      ease: 'easeOut',
+    },
+  },
+}
+
+function StudioMasonaryCard({ item, index }: { item: ShowcaseItem; index: number }) {
+  const videoRef = useRef<HTMLVideoElement | null>(null)
+
+  const imageUrl = getMediaUrl(item.image, item.posterFallbackUrl)
+  const imageAlt = getMediaAlt(item.image, item.title || 'Studio preview')
+
+  const hoverUrl = getMediaUrl(item.hoverVideo, item.videoFallbackUrl)
+  const hoverMimeType = getMediaMimeType(item.hoverVideo)
+  const hoverIsVideo = isVideoMedia(hoverUrl, hoverMimeType)
+  const hoverIsImage = Boolean(hoverUrl && !hoverIsVideo)
+
+  const href = item.href || '#'
+  const aspectRatio = parseAspectRatio(item.aspectRatio || '16/9')
+  const wide = isWideCard(item.aspectRatio)
+  const square = isSquareCard(item.aspectRatio)
+  const badgeLabel = item.category || (item.free ? 'Free' : item.priceLabel || '')
+
+  const handleMouseEnter = () => {
+    const video = videoRef.current
+    if (!video || !hoverIsVideo) return
+
+    if (video.readyState === 0) video.load()
+
+    video.currentTime = 0
+    const playPromise = video.play()
+
+    if (playPromise && typeof playPromise.catch === 'function') {
+      playPromise.catch(() => undefined)
+    }
+  }
+
+  const handleMouseLeave = () => {
+    const video = videoRef.current
+    if (!video) return
+
+    video.pause()
+    video.currentTime = 0
+  }
+
+  return (
+    <article
+      className={cn('studio-masonry-item card-item', wide && 'is-wide', square && 'is-square')}
+      data-index={index}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <Link href={href} className="block h-full focus-visible:outline-none">
+        <article
+          data-theme="dark"
+          className="masonary-article-card outline-2 outline-stone-500/50 outline-solid group relative h-full w-full overflow-clip !rounded-[3rem] border border-border bg-[#55526b85]! backdrop-blur-xl! shadow-2xl transition-all duration-300 hover:cursor-pointer hover:border-lime-500 hover:shadow-2xl [corner-shape:squircle]"
+          style={{ cornerShape: 'squircle', aspectRatio } as React.CSSProperties}
+        >
+          <div
+            className="card-media relative w-full overflow-hidden !rounded-[3rem] border border-border bg-linear-to-br from-violet-950 to-indigo-950 shadow-2xl! [corner-shape:squircle]"
+            style={{ cornerShape: 'squircle', aspectRatio } as React.CSSProperties}
+          >
+            {imageUrl ? (
+              <img
+                src={imageUrl}
+                alt={imageAlt}
+                loading="lazy"
+                decoding="async"
+                className={cn(
+                  'absolute inset-0 h-full w-full object-cover object-top !rounded-[3rem] transition-all duration-500 group-hover:scale-105',
+                  hoverUrl && 'group-hover:opacity-0',
+                )}
+                style={{ cornerShape: 'squircle' } as React.CSSProperties}
+              />
+            ) : (
+              <div className="absolute inset-0 flex items-center justify-center bg-linear-to-br from-violet-950 to-indigo-950 text-xs text-stone-500">
+                Preview image
+              </div>
+            )}
+
+            {hoverUrl && hoverIsVideo && (
+              <video
+                ref={videoRef}
+                src={hoverUrl}
+                muted
+                loop
+                playsInline
+                preload="metadata"
+                className="absolute inset-0 h-full w-full object-cover object-top !rounded-[3rem] opacity-0 transition-all duration-500 group-hover:scale-105 group-hover:opacity-100"
+                style={{ cornerShape: 'squircle' } as React.CSSProperties}
+              />
+            )}
+
+            {hoverUrl && hoverIsImage && (
+              <img
+                src={hoverUrl}
+                alt=""
+                loading="lazy"
+                decoding="async"
+                className="absolute inset-0 h-full w-full object-cover object-top !rounded-[3rem] opacity-0 transition-all duration-500 group-hover:scale-105 group-hover:opacity-100"
+                style={{ cornerShape: 'squircle' } as React.CSSProperties}
+              />
+            )}
+
+            <div
+              className="pointer-events-none absolute inset-0 z-10 transition-opacity duration-300 group-hover:opacity-90"
+              style={{
+                background:
+                  'linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.08) 32%, rgba(0,0,0,0.12) 52%, rgba(0,0,0,0.88) 100%)',
+              }}
+            />
+
+            <div className="pointer-events-none absolute inset-0 z-20 flex flex-col justify-between p-4 sm:p-4 md:p-4">
+              {badgeLabel ? (
+                <div className="flex items-start justify-start">
+                  <span
+                    className="inline-flex rounded-full border border-lime-500/80 bg-lime-500/15 px-2 py-1 text-[11.5px] font-medium tracking-widest text-stone-50 backdrop-blur-md sm:px-2 sm:py-1"
+                    style={{ boxShadow: '0 0 24px rgba(132,204,22,0.35)' }}
+                  >
+                    {badgeLabel}
+                  </span>
+                </div>
+              ) : (
+                <span />
+              )}
+
+              {item.title && (
+                <h3
+                  className="max-w-[86%] text-lg font-semibold tracking-[0.08em] text-stone-50"
+                  style={{ textShadow: '0 4px 16px rgba(0,0,0,0.9)' }}
+                >
+                  {item.title}
+                </h3>
+              )}
+            </div>
+          </div>
+        </article>
+      </Link>
+    </article>
+  )
+}
+
+export const DDMasonaryMedia: React.FC<DDMasonaryMediaProps> = ({
+  eyebrow = 'Featured systems',
+  headlineMain = 'Components, blocks, and templates',
+  headlineAccent = 'built to feel alive',
+  subtext = 'A curated showcase of production-ready interface pieces, with static previews and motion demos on hover.',
+  items = [],
+  columnsDesktop = 12,
+  columnsTablet = 2,
+  gapClass = 'gap-5',
+  containerClassName = 'w-full max-w-none px-4 md:px-8',
+  sectionClassName = 'py-24',
+  sectionId = 'studio-masonary-media',
+  customCSS,
+  showCta = false,
+  ctaAlign = 'center',
+  ctaDisplayMode = 'iconWithLabel',
+  ctaIconPosition = 'before',
+  ctaButtonText,
+  ctaButtonStyle = 'primary',
+  ctaSize = 'medium',
+  ctaIcon,
+  ctaLink,
+  ctaContainerClass,
+}) => {
+  const gridRef = useRef<HTMLDivElement | null>(null)
+  const isotopeRef = useRef<any>(null)
+
+  const safeSectionId = sectionId || 'studio-masonary-media'
+  const gap = useMemo(() => getGapPx(gapClass), [gapClass])
+  const desktopColumns = Math.min(Math.max(columnsDesktop || 6, 5), 6)
+  const tabletColumns = Math.min(Math.max(columnsTablet || 2, 1), 3)
+
+  useEffect(() => {
+    if (!gridRef.current || !items || items.length === 0) return
+
+    let destroyed = false
+
+    const init = async () => {
+      const Isotope = (await import('isotope-layout')).default
+      const imagesLoaded = (await import('imagesloaded')).default
+
+      if (!gridRef.current || destroyed) return
+
+      const iso = new Isotope(gridRef.current, {
+        itemSelector: '.studio-masonry-item',
+        percentPosition: true,
+        transitionDuration: '0.35s',
+        masonry: {
+          columnWidth: '.studio-masonry-sizer',
+          gutter: '.studio-masonry-gutter',
+          fitWidth: false,
+        },
+      })
+
+      isotopeRef.current = iso
+
+      imagesLoaded(gridRef.current, () => {
+        if (!destroyed) iso.layout()
+      })
+
+      window.setTimeout(() => {
+        if (!destroyed) iso.layout()
+      }, 250)
+    }
+
+    init()
+
+    const handleResize = () => {
+      isotopeRef.current?.layout()
+    }
+
+    window.addEventListener('resize', handleResize)
+
+    return () => {
+      destroyed = true
+      window.removeEventListener('resize', handleResize)
+      isotopeRef.current?.destroy()
+      isotopeRef.current = null
+    }
+  }, [items])
+
+  useEffect(() => {
+    isotopeRef.current?.reloadItems()
+    isotopeRef.current?.layout()
+  }, [items, columnsDesktop, columnsTablet, gap])
+
+  if (!items || items.length === 0) return null
+
+  return (
+    <>
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+            #${safeSectionId} .studio-masonry-grid {
+              --studio-masonry-gap: ${gap}px;
+              --studio-masonry-cols: 1;
+              position: relative;
+              width: 100%;
+            }
+
+            #${safeSectionId} .studio-masonry-sizer,
+            #${safeSectionId} .studio-masonry-item {
+              width: 100%;
+            }
+
+            #${safeSectionId} .studio-masonry-gutter {
+              width: var(--studio-masonry-gap);
+            }
+
+            #${safeSectionId} .studio-masonry-item {
+              margin-bottom: var(--studio-masonry-gap);
+              will-change: transform;
+            }
+
+            @media (max-width: 639px) {
+              #${safeSectionId} .studio-masonry-grid {
+                --studio-masonry-cols: 2;
+              }
+
+              #${safeSectionId} .studio-masonry-sizer,
+              #${safeSectionId} .studio-masonry-item.is-square {
+                width: calc(
+                  (100% - ((var(--studio-masonry-cols) - 1) * var(--studio-masonry-gap))) /
+                    var(--studio-masonry-cols)
+                );
+              }
+
+              #${safeSectionId} .studio-masonry-item:not(.is-square) {
+                width: 100%;
+              }
+
+              #${safeSectionId} .studio-masonry-item.is-square .card-media {
+                aspect-ratio: 1 / 1 !important;
+              }
+
+              #${safeSectionId} .studio-masonry-item:not(.is-square) .card-media {
+                aspect-ratio: 16 / 9 !important;
+              }
+            }
+
+            @media (min-width: 640px) {
+              #${safeSectionId} .studio-masonry-grid {
+                --studio-masonry-cols: ${tabletColumns};
+              }
+
+              #${safeSectionId} .studio-masonry-sizer,
+              #${safeSectionId} .studio-masonry-item {
+                width: calc(
+                  (100% - ((var(--studio-masonry-cols) - 1) * var(--studio-masonry-gap))) /
+                    var(--studio-masonry-cols)
+                );
+              }
+
+              #${safeSectionId} .studio-masonry-item.is-wide {
+                width: calc(
+                  (
+                      (100% - ((var(--studio-masonry-cols) - 1) * var(--studio-masonry-gap))) /
+                        var(--studio-masonry-cols)
+                    ) *
+                    2 + var(--studio-masonry-gap)
+                );
+              }
+            }
+
+            @media (min-width: 1024px) {
+              #${safeSectionId} .studio-masonry-grid {
+                --studio-masonry-cols: ${desktopColumns};
+              }
+            }
+
+            @media (min-width: 640px) and (max-width: 1023px) {
+              #${safeSectionId} .studio-masonry-item.is-wide {
+                width: 100%;
+              }
+            }
+
+            #${safeSectionId} .card-media {
+              min-height: 10rem;
+              scale: 1;
+            }
+          `,
+        }}
+      />
+
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      <section id={safeSectionId} className={cn('studio-masonary-media', sectionClassName)}>
+        <div className={cn(containerClassName)}>
+          
+          <motion.div
+            variants={containerVariants}
+            initial="hidden"
+            whileInView="show"
+            viewport={{ once: false, amount: 0.2 }}
+            className="mb-14 flex flex-col justify-between gap-6 overflow-hidden lg:flex-row lg:items-end"
+          >
+            <motion.div variants={itemVariants}>
+              {eyebrow && (
+                <p className="top-caption mb-3 text-[11.5px] font-semibold uppercase tracking-widest text-stone-400">
+                  {eyebrow}
+                </p>
+              )}
+
+              {(headlineMain || headlineAccent) && (
+                <h2 className="text-3d text-4xl font-bold leading-tight text-stone-900 dark:text-stone-50 md:text-5xl">
+                  {headlineMain}
+
+                  {headlineAccent && (
+                    <>
+                      <br />
+                      <span className="text-stone-400">{headlineAccent}</span>
+                    </>
+                  )}
+                </h2>
+              )}
+            </motion.div>
+
+            {subtext && (
+              <motion.p
+                variants={itemVariants}
+                className="max-w-2xl text-base leading-relaxed text-stone-400 dark:text-stone-300 lg:max-w-xl lg:text-right"
+              >
+                {subtext}
+              </motion.p>
+            )}
+          </motion.div>
+
+          <div ref={gridRef} className="studio-masonry-grid">
+            <div className="studio-masonry-sizer" />
+            <div className="studio-masonry-gutter" />
+
+            {items.map((item, index) => (
+              <StudioMasonaryCard
+                key={item.id ?? `${item.title}-${index}`}
+                item={item}
+                index={index}
+              />
+            ))}
+          </div>
+        </div>
+        {showCta && (
+          <div
+            className={cn(
+              'mt-10 flex',
+              ctaAlign === 'left' && 'justify-start',
+              ctaAlign === 'center' && 'justify-center',
+              ctaAlign === 'right' && 'justify-end',
+              ctaContainerClass,
+            )}
+          >
+            <a
+              href={(ctaLink as any)?.url ?? '#'}
+              className="inline-flex items-center gap-1.5 bg-indigo-700 text-stone-50 text-xs font-semibold px-3 py-1.5 rounded-lg group-hover:bg-indigo-600 group-hover:scale-[1.05] group-hover:shadow-xl transition-all duration-150 whitespace-nowrap"
+              style={{ cornerShape: 'squircle' } as React.CSSProperties}
+            >
+              {/* TODO: Reconnect ButtonWithIcon if this project provides it. */}
+              {ctaButtonText ?? (ctaLink as any)?.label ?? 'Learn more'}
+            </a>
+          </div>
+        )}
+      </section>
+    </>
+  )
+}
+
+export default DDMasonaryMedia
+
+