blocks-dusted 0.1.9 → 0.1.11

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

@@ -1,267 +1,267 @@
-import type { Block } from 'payload'
-
-export const DDHero: Block = {
-  slug: 'DD-Hero',
-  interfaceName: 'DDHero',
-  labels: {
-    singular: 'Studio Hero',
-    plural: 'Studio Heroes'
-  },
-  fields: [
-    {
-      type: 'tabs',
-      tabs: [
-        {
-          label: 'Content',
-          fields: [
-            {
-              name: 'badge',
-              type: 'group',
-              label: 'Badge',
-              fields: [
-                {
-                  name: 'show',
-                  type: 'checkbox',
-                  label: 'Show Badge',
-                  defaultValue: true
-                },
-                {
-                  name: 'text',
-                  type: 'text',
-                  label: 'Badge Text',
-                  defaultValue: 'Accepting projects — Q2 2026',
-                  admin: {
-                    condition: (_, siblingData) => siblingData?.show
-                  }
-                }
-              ]
-            },
-            {
-              name: 'headlineMain',
-              type: 'text',
-              label: 'Headline (Main)',
-              defaultValue: 'We build what',
-              required: true
-            },
-            {
-              name: 'headlineAccent',
-              type: 'text',
-              label: 'Headline (Accent / Second Line)',
-              defaultValue: 'you imagine',
-              required: true
-            },
-            {
-              name: 'description',
-              type: 'textarea',
-              label: 'Description',
-              defaultValue:
-                'DesignsDusted Studio is a small, focused team of designers and developers. We take on select projects where we can make a real impact — from product design to full-stack delivery.'
-            },
-
-            // BasicButton hidden
-            {
-              name: 'primaryCta',
-              type: 'group',
-              hidden: true,
-              label: 'Primary CTA Button',
-              fields: [
-                {
-                  name: 'label',
-                  type: 'text',
-                  label: 'Label',
-                  defaultValue: 'Start a Project'
-                },
-                {
-                  name: 'href',
-                  type: 'text',
-                  label: 'Link',
-                  defaultValue: '#contact'
-                },
-                {
-                  name: 'iconName',
-                  type: 'text',
-                  label: 'Lucide Icon Name',
-                  defaultValue: 'SendHorizonal',
-                  admin: {
-                    description: 'e.g. SendHorizonal, ArrowRight, Mail'
-                  }
-                }
-              ]
-            },
-            {
-              name: 'secondaryCta',
-              type: 'group',
-              hidden: true,
-              label: 'Secondary CTA Button',
-              fields: [
-                {
-                  name: 'label',
-                  type: 'text',
-                  label: 'Label',
-                  defaultValue: 'View Our Work'
-                },
-                {
-                  name: 'href',
-                  type: 'text',
-                  label: 'Link',
-                  defaultValue: '#work'
-                },
-                {
-                  name: 'iconName',
-                  type: 'text',
-                  label: 'Lucide Icon Name',
-                  defaultValue: 'Images',
-                  admin: {
-                    description: 'e.g. Images, GalleryHorizontal, Eye'
-                  }
-                }
-              ]
-            },
-            // DustedFluidButtons
-            {
-              type: 'group',
-              label: 'CTA Buttons',
-              fields: [
-                {
-                  name: 'showButtons',
-                  type: 'checkbox',
-                  label: 'Show Buttons',
-                  defaultValue: true
-                },
-                {
-                  name: 'buttons',
-                  type: 'array',
-                  label: 'Buttons',
-                  maxRows: 3,
-                  admin: {
-                    condition: (_, siblingData) => siblingData?.showButtons
-                  },
-                  fields: [
-                    {
-                      name: 'variant',
-                      type: 'select',
-                      label: 'Button Variant',
-                      options: [
-                        { label: 'V1', value: 'v1' },
-                        { label: 'V2', value: 'v2' },
-                        { label: 'V3', value: 'v3' }
-                      ],
-                      defaultValue: 'v1'
-                    },
-                    {
-                      name: 'icon',
-                      type: 'text',
-                      label: 'Icon Name (Lucide)',
-                      defaultValue: 'Goal',
-                      admin: {
-                        description:
-                          'Enter a Lucide icon name. (e.g., ArrowRight, ChevronRight, ExternalLink)'
-                      }
-                    },
-                    {
-                      name: 'label',
-                      type: 'text',
-                      label: 'Button Label',
-                      required: true
-                    },
-                    {
-                      name: 'class',
-                      type: 'text',
-                      label: 'Extra CSS Class',
-                      admin: {
-                        description:
-                          'Additional class(es) appended to the button (e.g. my-4, !rounded-full)'
-                      }
-                    }
-                  ],
-                  defaultValue: [
-                    { variant: 'v1', icon: 'Goal', label: 'Explore Components' },
-                    { variant: 'v2', icon: 'Goal', label: 'Choose Lane' },
-                    { variant: 'v3', icon: 'Feather', label: 'How it works' }
-                  ]
-                }
-              ]
-            },
-            // Stats
-            {
-              name: 'stats',
-              type: 'array',
-              label: 'Stats',
-              minRows: 0,
-              maxRows: 6,
-              fields: [
-                {
-                  name: 'value',
-                  type: 'text',
-                  label: 'Value',
-                  required: true
-                },
-                {
-                  name: 'label',
-                  type: 'text',
-                  label: 'Label',
-                  required: true
-                }
-              ],
-              defaultValue: [
-                { value: '40+', label: 'Projects Delivered' },
-                { value: '98%', label: 'Client Satisfaction' },
-                { value: '6yr', label: 'In Business' }
-              ]
-            }
-          ]
-        },
-        {
-          label: 'Background',
-          fields: [
-            {
-              name: 'backgroundImage',
-              type: 'upload',
-              relationTo: 'media',
-              label: 'Background Image',
-              admin: {
-                description: 'Full-bleed background image for the hero section.'
-              }
-            },
-            {
-              name: 'backgroundImageFallbackUrl',
-              type: 'text',
-              label: 'Fallback Background URL',
-              admin: {
-                description: 'Used when no background image is uploaded.'
-              }
-            }
-          ]
-        },
-        {
-          label: 'Settings',
-          fields: [
-            {
-              name: 'sectionId',
-              type: 'text',
-              label: 'Section ID',
-              admin: {
-                description: 'Unique ID for anchor links (e.g. "hero")'
-              }
-            },
-            {
-              name: 'showScrollIndicator',
-              type: 'checkbox',
-              label: 'Show Scroll Indicator',
-              defaultValue: true
-            },
-            {
-              name: 'customCSS',
-              type: 'code',
-              label: 'Custom CSS',
-              admin: {
-                language: 'css',
-                description: 'Add custom CSS styles for this block.'
-              }
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}
+import type { Block } from 'payload'
+
+export const DDHero: Block = {
+  slug: 'DD-Hero',
+  interfaceName: 'DDHero',
+  labels: {
+    singular: 'Studio Hero',
+    plural: 'Studio Heroes'
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Content',
+          fields: [
+            {
+              name: 'badge',
+              type: 'group',
+              label: 'Badge',
+              fields: [
+                {
+                  name: 'show',
+                  type: 'checkbox',
+                  label: 'Show Badge',
+                  defaultValue: true
+                },
+                {
+                  name: 'text',
+                  type: 'text',
+                  label: 'Badge Text',
+                  defaultValue: 'Accepting projects — Q2 2026',
+                  admin: {
+                    condition: (_, siblingData) => siblingData?.show
+                  }
+                }
+              ]
+            },
+            {
+              name: 'headlineMain',
+              type: 'text',
+              label: 'Headline (Main)',
+              defaultValue: 'We build what',
+              required: true
+            },
+            {
+              name: 'headlineAccent',
+              type: 'text',
+              label: 'Headline (Accent / Second Line)',
+              defaultValue: 'you imagine',
+              required: true
+            },
+            {
+              name: 'description',
+              type: 'textarea',
+              label: 'Description',
+              defaultValue:
+                'DesignsDusted Studio is a small, focused team of designers and developers. We take on select projects where we can make a real impact — from product design to full-stack delivery.'
+            },
+
+            // BasicButton hidden
+            {
+              name: 'primaryCta',
+              type: 'group',
+              hidden: true,
+              label: 'Primary CTA Button',
+              fields: [
+                {
+                  name: 'label',
+                  type: 'text',
+                  label: 'Label',
+                  defaultValue: 'Start a Project'
+                },
+                {
+                  name: 'href',
+                  type: 'text',
+                  label: 'Link',
+                  defaultValue: '#contact'
+                },
+                {
+                  name: 'iconName',
+                  type: 'text',
+                  label: 'Lucide Icon Name',
+                  defaultValue: 'SendHorizonal',
+                  admin: {
+                    description: 'e.g. SendHorizonal, ArrowRight, Mail'
+                  }
+                }
+              ]
+            },
+            {
+              name: 'secondaryCta',
+              type: 'group',
+              hidden: true,
+              label: 'Secondary CTA Button',
+              fields: [
+                {
+                  name: 'label',
+                  type: 'text',
+                  label: 'Label',
+                  defaultValue: 'View Our Work'
+                },
+                {
+                  name: 'href',
+                  type: 'text',
+                  label: 'Link',
+                  defaultValue: '#work'
+                },
+                {
+                  name: 'iconName',
+                  type: 'text',
+                  label: 'Lucide Icon Name',
+                  defaultValue: 'Images',
+                  admin: {
+                    description: 'e.g. Images, GalleryHorizontal, Eye'
+                  }
+                }
+              ]
+            },
+            // DustedFluidButtons
+            {
+              type: 'group',
+              label: 'CTA Buttons',
+              fields: [
+                {
+                  name: 'showButtons',
+                  type: 'checkbox',
+                  label: 'Show Buttons',
+                  defaultValue: true
+                },
+                {
+                  name: 'buttons',
+                  type: 'array',
+                  label: 'Buttons',
+                  maxRows: 3,
+                  admin: {
+                    condition: (_, siblingData) => siblingData?.showButtons
+                  },
+                  fields: [
+                    {
+                      name: 'variant',
+                      type: 'select',
+                      label: 'Button Variant',
+                      options: [
+                        { label: 'V1', value: 'v1' },
+                        { label: 'V2', value: 'v2' },
+                        { label: 'V3', value: 'v3' }
+                      ],
+                      defaultValue: 'v1'
+                    },
+                    {
+                      name: 'icon',
+                      type: 'text',
+                      label: 'Icon Name (Lucide)',
+                      defaultValue: 'Goal',
+                      admin: {
+                        description:
+                          'Enter a Lucide icon name. (e.g., ArrowRight, ChevronRight, ExternalLink)'
+                      }
+                    },
+                    {
+                      name: 'label',
+                      type: 'text',
+                      label: 'Button Label',
+                      required: true
+                    },
+                    {
+                      name: 'class',
+                      type: 'text',
+                      label: 'Extra CSS Class',
+                      admin: {
+                        description:
+                          'Additional class(es) appended to the button (e.g. my-4, !rounded-full)'
+                      }
+                    }
+                  ],
+                  defaultValue: [
+                    { variant: 'v1', icon: 'Goal', label: 'Explore Components' },
+                    { variant: 'v2', icon: 'Goal', label: 'Choose Lane' },
+                    { variant: 'v3', icon: 'Feather', label: 'How it works' }
+                  ]
+                }
+              ]
+            },
+            // Stats
+            {
+              name: 'stats',
+              type: 'array',
+              label: 'Stats',
+              minRows: 0,
+              maxRows: 6,
+              fields: [
+                {
+                  name: 'value',
+                  type: 'text',
+                  label: 'Value',
+                  required: true
+                },
+                {
+                  name: 'label',
+                  type: 'text',
+                  label: 'Label',
+                  required: true
+                }
+              ],
+              defaultValue: [
+                { value: '40+', label: 'Projects Delivered' },
+                { value: '98%', label: 'Client Satisfaction' },
+                { value: '6yr', label: 'In Business' }
+              ]
+            }
+          ]
+        },
+        {
+          label: 'Background',
+          fields: [
+            {
+              name: 'backgroundImage',
+              type: 'upload',
+              relationTo: 'media',
+              label: 'Background Image',
+              admin: {
+                description: 'Full-bleed background image for the hero section.'
+              }
+            },
+            {
+              name: 'backgroundImageFallbackUrl',
+              type: 'text',
+              label: 'Fallback Background URL',
+              admin: {
+                description: 'Used when no background image is uploaded.'
+              }
+            }
+          ]
+        },
+        {
+          label: 'Settings',
+          fields: [
+            {
+              name: 'sectionId',
+              type: 'text',
+              label: 'Section ID',
+              admin: {
+                description: 'Unique ID for anchor links (e.g. "hero")'
+              }
+            },
+            {
+              name: 'showScrollIndicator',
+              type: 'checkbox',
+              label: 'Show Scroll Indicator',
+              defaultValue: true
+            },
+            {
+              name: 'customCSS',
+              type: 'code',
+              label: 'Custom CSS',
+              admin: {
+                language: 'css',
+                description: 'Add custom CSS styles for this block.'
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

@@ -509,9 +509,10 @@ interface SlidePanelProps {
 }
 
 function isLocalMediaSrc(src?: string | null): src is string {
-  return typeof src === 'string' && src.startsWith('/api/media/file/')
+  return typeof src === 'string' && (src.startsWith('/api/media/file/') || src.startsWith('/assets/') || src.startsWith('/logo') || src.startsWith('/media/') || src.startsWith('data:'))
 }
 
+
 function SlidePanel({ slide, index, total, panelRef }: SlidePanelProps) {
   const { hex, rgb } = getAccent(slide.accent)
   const Visual = VISUAL_MAP[slide.visualType ?? 'wireframe'] ?? WireframeVisual
@@ -714,6 +715,7 @@ export function DDHorizontalScroll(props: DDHorizontalScrollProps) {
   const normalSlides: SlideItem[] = useMemo(() => slides ?? [], [slides])
   const slideCount = normalSlides.length
 
+
   /* ── GSAP horizontal scroll + pin + snap ── */
   useLayoutEffect(() => {
     if (typeof window === 'undefined') return
@@ -846,7 +848,7 @@ export function DDHorizontalScroll(props: DDHorizontalScrollProps) {
         }}
       /> */}
         {/* Section eyebrow label */}
-        #BlockName-DDHorizontalScroll
+        
         {sectionLabel && (
           <div className="section-label absolute top-8 left-4 z-20 flex items-center gap-3">
             <div className="w-6 h-px" style={{ background: '#84cc16' }} />