blocks-dusted 0.1.1 → 0.1.3

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

@@ -1,127 +1,118 @@
-"use client";
+'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";
+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;
-};
+  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;
-};
+  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;
-};
+  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 "";
-};
+  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 clean = url.split('?')[0]?.split('#')[0] || ''
+  return clean.split('.').pop()?.toLowerCase() || ''
+}
 
 const isVideoMedia = (url: string, mimeType?: string | null) => {
-  const ext = getFileExtension(url);
+  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";
+    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;
-};
+  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";
+  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;
+  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}`;
-};
+  return `${width} / ${height}`
+}
 
 const containerVariants: Variants = {
   hidden: {},
@@ -131,78 +122,67 @@ const containerVariants: Variants = {
       delayChildren: 0.06,
     },
   },
-};
+}
 
 const itemVariants: Variants = {
   hidden: {
     opacity: 0,
     y: 22,
-    filter: "blur(6px)",
+    filter: 'blur(6px)',
   },
   show: {
     opacity: 1,
     y: 0,
-    filter: "none",
+    filter: 'none',
     transition: {
       duration: 0.45,
-      ease: "easeOut",
+      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 || "");
+}
+
+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;
+    const video = videoRef.current
+    if (!video || !hoverIsVideo) return
 
-    if (video.readyState === 0) video.load();
+    if (video.readyState === 0) video.load()
 
-    video.currentTime = 0;
-    const playPromise = video.play();
+    video.currentTime = 0
+    const playPromise = video.play()
 
-    if (playPromise && typeof playPromise.catch === "function") {
-      playPromise.catch(() => undefined);
+    if (playPromise && typeof playPromise.catch === 'function') {
+      playPromise.catch(() => undefined)
     }
-  };
+  }
 
   const handleMouseLeave = () => {
-    const video = videoRef.current;
-    if (!video) return;
+    const video = videoRef.current
+    if (!video) return
 
-    video.pause();
-    video.currentTime = 0;
-  };
+    video.pause()
+    video.currentTime = 0
+  }
 
   return (
     <article
-      className={cn(
-        "studio-masonry-item card-item",
-        wide && "is-wide",
-        square && "is-square",
-      )}
+      className={cn('studio-masonry-item card-item', wide && 'is-wide', square && 'is-square')}
       data-index={index}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
@@ -211,15 +191,11 @@ function StudioMasonaryCard({
         <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
-          }
+          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
-            }
+            style={{ cornerShape: 'squircle', aspectRatio } as React.CSSProperties}
           >
             {imageUrl ? (
               <img
@@ -228,10 +204,10 @@ function StudioMasonaryCard({
                 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",
+                  '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}
+                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">
@@ -248,7 +224,7 @@ function StudioMasonaryCard({
                 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}
+                style={{ cornerShape: 'squircle' } as React.CSSProperties}
               />
             )}
 
@@ -259,7 +235,7 @@ function StudioMasonaryCard({
                 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}
+                style={{ cornerShape: 'squircle' } as React.CSSProperties}
               />
             )}
 
@@ -267,7 +243,7 @@ function StudioMasonaryCard({
               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%)",
+                  '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%)',
               }}
             />
 
@@ -276,7 +252,7 @@ function StudioMasonaryCard({
                 <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)" }}
+                    style={{ boxShadow: '0 0 24px rgba(132,204,22,0.35)' }}
                   >
                     {badgeLabel}
                   </span>
@@ -288,7 +264,7 @@ function StudioMasonaryCard({
               {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)" }}
+                  style={{ textShadow: '0 4px 16px rgba(0,0,0,0.9)' }}
                 >
                   {item.title}
                 </h3>
@@ -298,96 +274,96 @@ function StudioMasonaryCard({
         </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.",
+  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",
+  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",
+  ctaAlign = 'center',
+  ctaDisplayMode = 'iconWithLabel',
+  ctaIconPosition = 'before',
   ctaButtonText,
-  ctaButtonStyle = "primary",
-  ctaSize = "medium",
+  ctaButtonStyle = 'primary',
+  ctaSize = 'medium',
   ctaIcon,
   ctaLink,
   ctaContainerClass,
 }) => {
-  const gridRef = useRef<HTMLDivElement | null>(null);
-  const isotopeRef = useRef<any>(null);
+  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);
+  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;
+    if (!gridRef.current || !items || items.length === 0) return
 
-    let destroyed = false;
+    let destroyed = false
 
     const init = async () => {
-      const Isotope = (await import("isotope-layout")).default;
-      const imagesLoaded = (await import("imagesloaded")).default;
+      const Isotope = (await import('isotope-layout')).default
+      const imagesLoaded = (await import('imagesloaded')).default
 
-      if (!gridRef.current || destroyed) return;
+      if (!gridRef.current || destroyed) return
 
       const iso = new Isotope(gridRef.current, {
-        itemSelector: ".studio-masonry-item",
+        itemSelector: '.studio-masonry-item',
         percentPosition: true,
-        transitionDuration: "0.35s",
+        transitionDuration: '0.35s',
         masonry: {
-          columnWidth: ".studio-masonry-sizer",
-          gutter: ".studio-masonry-gutter",
+          columnWidth: '.studio-masonry-sizer',
+          gutter: '.studio-masonry-gutter',
           fitWidth: false,
         },
-      });
+      })
 
-      isotopeRef.current = iso;
+      isotopeRef.current = iso
 
       imagesLoaded(gridRef.current, () => {
-        if (!destroyed) iso.layout();
-      });
+        if (!destroyed) iso.layout()
+      })
 
       window.setTimeout(() => {
-        if (!destroyed) iso.layout();
-      }, 250);
-    };
+        if (!destroyed) iso.layout()
+      }, 250)
+    }
 
-    init();
+    init()
 
     const handleResize = () => {
-      isotopeRef.current?.layout();
-    };
+      isotopeRef.current?.layout()
+    }
 
-    window.addEventListener("resize", handleResize);
+    window.addEventListener('resize', handleResize)
 
     return () => {
-      destroyed = true;
-      window.removeEventListener("resize", handleResize);
-      isotopeRef.current?.destroy();
-      isotopeRef.current = null;
-    };
-  }, [items]);
+      destroyed = true
+      window.removeEventListener('resize', handleResize)
+      isotopeRef.current?.destroy()
+      isotopeRef.current = null
+    }
+  }, [items])
 
   useEffect(() => {
-    isotopeRef.current?.reloadItems();
-    isotopeRef.current?.layout();
-  }, [items, columnsDesktop, columnsTablet, gap]);
+    isotopeRef.current?.reloadItems()
+    isotopeRef.current?.layout()
+  }, [items, columnsDesktop, columnsTablet, gap])
 
-  if (!items || items.length === 0) return null;
+  if (!items || items.length === 0) return null
 
   return (
     <>
@@ -487,11 +463,9 @@ export const DDMasonaryMedia: React.FC<DDMasonaryMediaProps> = ({
 
       {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
 
-      <section
-        id={safeSectionId}
-        className={cn("studio-masonary-media", sectionClassName)}
-      >
+      <section id={safeSectionId} className={cn('studio-masonary-media', sectionClassName)}>
         <div className={cn(containerClassName)}>
+          #BlockName-DDMasonaryMedia
           <motion.div
             variants={containerVariants}
             initial="hidden"
@@ -546,26 +520,26 @@ export const DDMasonaryMedia: React.FC<DDMasonaryMediaProps> = ({
         {showCta && (
           <div
             className={cn(
-              "mt-10 flex",
-              ctaAlign === "left" && "justify-start",
-              ctaAlign === "center" && "justify-center",
-              ctaAlign === "right" && "justify-end",
+              'mt-10 flex',
+              ctaAlign === 'left' && 'justify-start',
+              ctaAlign === 'center' && 'justify-center',
+              ctaAlign === 'right' && 'justify-end',
               ctaContainerClass,
             )}
           >
             <a
-              href={(ctaLink as any)?.url ?? "#"}
+              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}
+              style={{ cornerShape: 'squircle' } as React.CSSProperties}
             >
               {/* TODO: Reconnect ButtonWithIcon if this project provides it. */}
-              {ctaButtonText ?? (ctaLink as any)?.label ?? "Learn more"}
+              {ctaButtonText ?? (ctaLink as any)?.label ?? 'Learn more'}
             </a>
           </div>
         )}
       </section>
     </>
-  );
-};
+  )
+}
 
-export default DDMasonaryMedia;
+export default DDMasonaryMedia

package/templates/blocks/DD-MasonaryMedia/config.ts

@@ -151,17 +151,16 @@ export const DDMasonaryMedia: Block = {
                     }
                   ]
                 },
-                {
-                  name: 'image',
-                  type: 'upload',
-                  relationTo: 'media',
-                  label: 'Static Preview Image',
+                {
+                  name: 'image',
+                  type: 'upload',
+                  relationTo: 'media',
+                  label: 'Static Preview Image',
                   required: false,
-                  admin: {
-                    description:
-                      'Optional static image shown by default before hover. Use the fallback URL below for clean installs without media records.'
-                  }
-                },
+                  admin: {
+                    description: 'Static image shown by default before hover.'
+                  }
+                },
                 {
                   name: 'hoverVideo',
                   type: 'upload',
@@ -372,10 +371,10 @@ export const DDMasonaryMedia: Block = {
                   ]
                 }
               ]
-            },
-            {
-              name: 'ctaContainerClass',
-              type: 'text',
+            },
+            {
+              name: 'ctaContainerClass',
+              type: 'text',
               label: 'Extra Container Class',
               admin: {
                 condition: (_, siblingData) => siblingData?.showCta,