blocks-dusted 0.1.11 → 0.1.13

package/templates/blocks/DD-HeroPlas/manifest.json

@@ -0,0 +1,88 @@
+{
+  "type": "block",
+  "name": "DD-HeroPlas",
+  "label": "Hero Plastics",
+  "sourceName": "DD-HeroPlas",
+  "portableName": "DD-HeroPlas",
+  "slug": "DD-HeroPlas",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/Dusted-Payload-Blocks",
+    "originalPath": "CLI-TestGround/dusted-blocks-demo/src/blocks/DD-HeroPlas",
+    "originalSlug": "DD-HeroPlas",
+    "originalConfigExport": "DDHeroPlas",
+    "originalComponentExport": "DDHeroPlas",
+    "originalInterfaceName": "DDHeroPlas"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-HeroPlas/Component.tsx"
+    },
+    {
+      "from": "ThreeScene.tsx",
+      "to": "src/blocks/DD-HeroPlas/ThreeScene.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-HeroPlas/config.ts"
+    }
+  ],
+  "dependencies": [
+    "@react-three/drei",
+    "@react-three/fiber",
+    "three"
+  ],
+  "sharedFiles": [],
+  "requiredProjectFiles": [
+    {
+      "path": "src/utilities/ui.ts",
+      "reason": "Component imports cn from @/utilities/ui."
+    }
+  ],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDHeroPlas in Pages/Posts block arrays if automatic registration was skipped.",
+    "Register DD-HeroPlas in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "manualSteps": [
+    "Register DDHeroPlas in Pages/Posts block arrays if automatic registration was skipped.",
+    "Register DD-HeroPlas in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can register DDHeroPlas from @/blocks/DD-HeroPlas/config."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-HeroPlas with component export DDHeroPlas."
+    }
+  },
+  "notes": [
+    "Promoted from the verified Dusted Blocks demo implementation.",
+    "Installer preserves existing destination files and reports project requirements before writing."
+  ],
+  "exportName": "DDHeroPlas",
+  "componentExportName": "DDHeroPlas",
+  "interfaceName": "DDHeroPlas"
+}

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

@@ -509,10 +509,9 @@ interface SlidePanelProps {
 }
 
 function isLocalMediaSrc(src?: string | null): src is string {
-  return typeof src === 'string' && (src.startsWith('/api/media/file/') || src.startsWith('/assets/') || src.startsWith('/logo') || src.startsWith('/media/') || src.startsWith('data:'))
+  return typeof src === 'string' && src.startsWith('/api/media/file/')
 }
 
-
 function SlidePanel({ slide, index, total, panelRef }: SlidePanelProps) {
   const { hex, rgb } = getAccent(slide.accent)
   const Visual = VISUAL_MAP[slide.visualType ?? 'wireframe'] ?? WireframeVisual
@@ -715,7 +714,6 @@ 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
@@ -813,12 +811,13 @@ export function DDHorizontalScroll(props: DDHorizontalScrollProps) {
     <section
       ref={outerRef}
       id={sectionId ?? undefined}
-      className="studio-hscrollblock relative z-30 top-0"
+      className="studio-hscrollblock relative z-30 top-0 min-w-full w-full"
       // !!Note: First & Last child slides set to opacity 0 to rectify scroll. offset for next block entry. Use svh to offset and FirstSlide_width(!vw)
       style={{
         height: `calc((${Math.max(0, slideCount + 2)} * 100svh + 100svh) - ${offset}svh)`,
       }}
     >
+      <style>{'body:has(.studio-hscrollblock) { overflow-x: clip; }'}</style>
       <div
         ref={wrapperRef}
         className="shs-wrapper sticky overflow-hidden top-0"
@@ -848,7 +847,7 @@ export function DDHorizontalScroll(props: DDHorizontalScrollProps) {
         }}
       /> */}
         {/* Section eyebrow label */}
-        
+
         {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' }} />

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

@@ -4,13 +4,13 @@ import React from 'react'
 import { motion } from 'framer-motion'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
+import * as LucideIcons from 'lucide-react'
 
 import { cn } from '@/utilities/ui'
-import { Media } from '@/components/Media'
 import { smoothScrollTo, isAnchorLink } from '@/utilities/smoothScroll'
 
 export type IconItem = {
-  icon?: any
+  icon?: string | null
   iconSize?: string
   customIconSize?: string
   iconClassName?: string
@@ -19,7 +19,6 @@ export type IconItem = {
   flexDirection?: 'flex-col' | 'flex-col-reverse' | 'flex-row' | 'flex-row-reverse'
   flexGap?: string
   link?: string
-  imgCustomStyle?: Record<string, any>
 }
 
 export type CustomIconBlockProps = {
@@ -28,19 +27,29 @@ export type CustomIconBlockProps = {
   icons?: IconItem[]
   className?: string
   iconGridClass?: string
-  imgCustomStyle?: React.CSSProperties
   priority?: boolean
 }
 
+function DynamicIcon({
+  name,
+  size = 36,
+  ...props
+}: { name?: string | null } & Omit<LucideIcons.LucideProps, 'name'>) {
+  if (!name) return null
+  const Icon = (LucideIcons as unknown as Record<string, React.FC<LucideIcons.LucideProps>>)[name]
+  if (!Icon) return null
+  return <Icon size={size} {...props} />
+}
+
 const containerVariants = {
   hidden: { opacity: 0 },
   visible: {
     opacity: 1,
     transition: {
       staggerChildren: 0.15,
-      delayChildren: 0.1
-    }
-  }
+      delayChildren: 0.1,
+    },
+  },
 }
 
 const itemVariants = {
@@ -51,17 +60,15 @@ const itemVariants = {
     scale: 1,
     transition: {
       duration: 0.4,
-      ease: [0.4, 0, 0.2, 1] as const
-    }
-  }
+      ease: [0.4, 0, 0.2, 1] as const,
+    },
+  },
 }
 
 export const DDIcon: React.FC<CustomIconBlockProps> = ({
   blockName,
   icons = [],
   iconGridClass,
-  imgCustomStyle: blockImgStyle,
-  priority = false
 }) => {
   const pathname = usePathname()
   const hasCustomGridClass = iconGridClass && iconGridClass.trim().length > 0
@@ -103,30 +110,11 @@ export const DDIcon: React.FC<CustomIconBlockProps> = ({
       smoothScrollTo(target, {
         duration: 1,
         offsetY: 80,
-        ease: 'power2.out'
+        ease: 'power2.out',
       })
     }
   }
 
-  const extractSizeFromClass = (sizeClass: string) => {
-    const widthMatch = sizeClass.match(/w-(\d+)/)
-    const heightMatch = sizeClass.match(/h-(\d+)/)
-
-    if (widthMatch && heightMatch) {
-      const width = parseInt(widthMatch[1], 10) * 4
-      const height = parseInt(heightMatch[1], 10) * 4
-
-      return {
-        width: `${width}px`,
-        height: `${height}px`,
-        maxWidth: `${width}px`,
-        maxHeight: `${height}px`
-      }
-    }
-
-    return {}
-  }
-
   return (
     <motion.div
       initial="hidden"
@@ -138,58 +126,35 @@ export const DDIcon: React.FC<CustomIconBlockProps> = ({
       className={cn(
         'custom-icon-block',
         !hasCustomGridClass && 'grid grid-cols-3 gap-6 text-center md:grid-cols-4 lg:grid-cols-5',
-        hasCustomGridClass && iconGridClass
+        hasCustomGridClass && iconGridClass,
       )}
     >
       {icons.map((iconItem, index) => {
         if (!iconItem) return null
 
-        const iconKey = `icon-${index}${iconItem.icon?.filename ? `-${iconItem.icon.filename}` : ''}`
-
-        if (!iconItem.icon) {
-          return (
-            <motion.div
-              key={iconKey}
-              variants={itemVariants}
-              className="flex flex-col items-center"
-            >
-              <div className="flex h-16 w-16 items-center justify-center border-2 border-gray-300 bg-gray-100 p-0 text-xs text-gray-400">
-                <span>No Icon</span>
-              </div>
-
-              {iconItem.label && (
-                <span className="custom-icon-label mt-2 text-center text-xs leading-tight text-gray-600">
-                  {iconItem.label}
-                </span>
-              )}
-            </motion.div>
-          )
-        }
-
-        const iconSizeClass =
-          iconItem.iconSize === 'custom'
-            ? iconItem.customIconSize || 'h-16 w-16'
-            : iconItem.iconSize || 'h-16 w-16'
-
-        const sizeStyles = extractSizeFromClass(iconSizeClass)
+        const iconKey = `icon-${index}`
+        const defaultIcons = [
+          'Code2',
+          'Database',
+          'PanelsTopLeft',
+          'Braces',
+          'Workflow',
+          'GitBranch',
+        ]
+        const iconName =
+          typeof iconItem.icon === 'string'
+            ? iconItem.icon
+            : defaultIcons[index % defaultIcons.length]
 
         const mediaContent = (
-          <Media
-            priority={priority ?? false}
-            resource={iconItem.icon}
+          <div
             className={cn(
-              'custom-icon-media flex items-center justify-center p-0 transition-transform',
-              '[&>picture]:!mb-0 [&>picture]:!mt-0 [&>picture]:flex [&>picture]:h-full [&>picture]:w-full [&>picture]:items-center [&>picture]:justify-center',
-              '[&>picture>img]:block [&>picture>img]:h-full [&>picture>img]:w-full [&>picture>img]:object-contain',
-              '[&_img]:block [&_img]:h-full [&_img]:w-full [&_img]:object-contain',
-              iconSizeClass,
-              iconItem.iconClassName
+              'custom-icon-media flex h-20 w-20 items-center justify-center rounded-2xl border border-[#2A2A30] bg-linear-to-b from-[#1a1a1f] to-[#0f0f12] p-4 invert-[1] transition-all duration-300 hover:scale-105 hover:shadow-[0_0_30px_rgba(140,138,132,0.15)] dark:invert-[0]',
+              iconItem.iconClassName,
             )}
-            imgClassName={cn(
-              'block h-full w-full object-contain transition-all duration-300',
-              iconItem.iconClassName
-            )}
-          />
+          >
+            <DynamicIcon className="text-[#9A9790]" name={iconName} size={36} />
+          </div>
         )
 
         const wrapperFlexDirection = iconItem.flexDirection || 'flex-col'
@@ -217,7 +182,7 @@ export const DDIcon: React.FC<CustomIconBlockProps> = ({
             className={cn(
               'custom-icon-item group flex items-center',
               wrapperFlexDirection,
-              wrapperGap
+              wrapperGap,
             )}
           >
             {iconItem.link && iconItem.link.trim() ? (
@@ -235,9 +200,9 @@ export const DDIcon: React.FC<CustomIconBlockProps> = ({
                     <a
                       href={href}
                       className={cn(
-                        'custom-icon-block-link custom-icon-link flex cursor-pointer items-center brightness-100 transition-all duration-300 ease-in-out hover:brightness-110',
+                        'custom-icon-block-link custom-icon-link flex cursor-pointer items-center brightness-100 no-underline transition-all duration-300 ease-in-out hover:brightness-110 hover:no-underline',
                         wrapperFlexDirection,
-                        wrapperGap
+                        wrapperGap,
                       )}
                       onClick={(e) => handleClick(href, e)}
                       aria-label={iconItem.label || 'Navigate to section'}
@@ -254,9 +219,9 @@ export const DDIcon: React.FC<CustomIconBlockProps> = ({
                   <Link
                     href={href}
                     className={cn(
-                      'custom-icon-block-link custom-icon-link flex items-center brightness-100 transition-all duration-300 ease-in-out hover:brightness-110',
+                      'custom-icon-block-link custom-icon-link flex items-center brightness-100 no-underline transition-all duration-300 ease-in-out hover:brightness-110 hover:no-underline',
                       wrapperFlexDirection,
-                      wrapperGap
+                      wrapperGap,
                     )}
                     target={target}
                     rel={rel}
@@ -271,7 +236,7 @@ export const DDIcon: React.FC<CustomIconBlockProps> = ({
                 className={cn(
                   'custom-icon-wrapper flex items-center brightness-110 text-white/80 dark:text-stone-200/80',
                   wrapperFlexDirection,
-                  wrapperGap
+                  wrapperGap,
                 )}
               >
                 {iconContent}

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

@@ -4,7 +4,7 @@ import React from 'react'
 import { cn } from '@/utilities/ui'
 import Link from 'next/link'
 import * as LucideIcons from 'lucide-react'
-import type { Page, Post } from '@/payload-types'
+import type { Page } from '@/payload-types'
 import { ShareButton } from '@/components/ui/ShareButton'
 import { smoothScrollTo, isAnchorLink } from '@/utilities/smoothScroll'
 import { usePathname, useRouter } from 'next/navigation'
@@ -30,9 +30,7 @@ type ButtonStyle =
 type ButtonSize = 'small' | 'medium' | 'large'
 type IconPosition = 'before' | 'after'
 
-type LinkReference =
-  | { relationTo: 'pages'; value: number | Page }
-  | { relationTo: 'posts'; value: number | Post }
+type LinkReference = { relationTo: 'pages'; value: number | Page }
 
 export type LinkType = {
   type?: 'reference' | 'custom' | null
@@ -175,12 +173,7 @@ export const DDIconButton: React.FC<ButtonWithIconProps> = ({
     onToggle?.()
   }
 
-  const getDocumentSlug = (doc: Page | Post | number): string | null => {
-    if (typeof doc === 'number') return null
-    return (doc as any)?.slug || null
-  }
-
-  const getPageURLFromDoc = (doc: Page | number): string | null => {
+    const getPageURLFromDoc = (doc: Page | number): string | null => {
     if (typeof doc === 'number') return null
 
     const anyDoc = doc as any
@@ -231,12 +224,6 @@ export const DDIconButton: React.FC<ButtonWithIconProps> = ({
       if (relationTo === 'pages') {
         const pageHref = getPageURLFromDoc(value as Page | number)
         if (pageHref) href = pageHref
-      } else if (relationTo === 'posts') {
-        const slug = getDocumentSlug(value as Post | number)
-        if (slug) href = `/thoughts/${slug}`
-      } else {
-        const slug = getDocumentSlug(value as any)
-        if (slug) href = `/${relationTo}/${slug}`
       }
 
       target = link.newTab ? '_blank' : undefined
@@ -267,7 +254,7 @@ export const DDIconButton: React.FC<ButtonWithIconProps> = ({
       'bg-transparent text-[var(--text)] !border-0 max-h-fit transition-all duration-300 hover:text-[var(--accent)] hover:font-medium',
 
     destructive:
-      "relative z-0 overflow-hidden bg-[var(--error)] !text-white rounded-2xl squircle border border-[outset] border-[var(--color-alt2)] brightness-100 max-h-fit shadow-[inset_0_0_20px_2px_rgb(73_17_10_/_90%),var(--shadow-md)] transition-all duration-300 before:content-[''] before:absolute before:inset-0 before:-z-10 before:bg-[url('/assets/svg/lines.svg')] before:bg-[length:10px_10px] before:bg-repeat before:opacity-100 before:pointer-events-none hover:!text-white hover:shadow-[inset_0_0_30px_2px_rgb(178_20_2),var(--shadow-xl)] hover:brightness-110",
+      "relative z-0 overflow-hidden bg-[var(--error)] !text-white rounded-2xl squircle border border-[outset] border-[var(--color-alt2)] brightness-100 max-h-fit shadow-[inset_0_0_20px_2px_rgb(73_17_10_/_90%),var(--shadow-md)] transition-all duration-300 before:content-[''] before:absolute before:inset-0 before:-z-10 before:bg-lines before:bg-[length:10px_10px] before:bg-repeat before:opacity-100 before:pointer-events-none hover:!text-white hover:shadow-[inset_0_0_30px_2px_rgb(178_20_2),var(--shadow-xl)] hover:brightness-110",
 
     v1: 'border-[0.5px] rounded-sm bg-transparent duration-200 bg-blur shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] active:shadow-none border-stone-800 text-zinc-800 dark:border-stone-600 dark:shadow-[3px_3px_0px_0px_rgba(255,255,255,0.7)] active:dark:shadow-none dark:text-zinc-50 dark:bg-zinc-950 px-3 py-1',
     v2: 'group relative justify-center rounded-sm shadow-md overflow-hidden ease-in-out hover:scale-100 hover:shadow-lg text-zinc-50 bg-gradient-to-tr from-zinc-900 to-zinc-700 hover:shadow-zinc-500/30 dark:text-stone-900 dark:bg-gradient-to-tr dark:from-zinc-50 dark:to-zinc-100 dark:hover:shadow-zinc-700/30 px-3 py-1',
@@ -444,12 +431,18 @@ export const DDIconButton: React.FC<ButtonWithIconProps> = ({
       {displayMode === 'share' ? (
         content
       ) : href && href !== '#' ? (
-        <Link href={href} target={target} rel={rel} onClick={(e) => handleClick(href, e)}>
+        <Link
+          href={href}
+          target={target}
+          rel={rel}
+          className="!no-underline hover:!no-underline"
+          onClick={(e) => handleClick(href, e)}
+        >
           {content}
         </Link>
       ) : (
         content
       )}
     </div>
-  )
-}
+  )
+}

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

@@ -1,21 +1,22 @@
-import React from 'react'
-
-type Props = {
-  idTag: string
-  offset?: number
-}
-
-export const DDIdTag: React.FC<Props> = ({ idTag, offset = 0 }) => {
-  return (
-    <div
-      id={idTag}
-      style={{
-        position: 'relative',
-        top: `-${offset}px`,
-        height: 0,
-        visibility: 'hidden',
-      }}
-      aria-hidden="true"
-    />
-  )
-}
+import React from 'react'
+
+type Props = {
+  idTag?: string
+  id?: string
+  offset?: number
+}
+
+export const DDIdTag: React.FC<Props> = ({ idTag, id, offset = 0 }) => {
+  return (
+    <div
+      id={idTag || id}
+      style={{
+        position: 'relative',
+        top: `-${offset}px`,
+        height: 0,
+        visibility: 'hidden',
+      }}
+      aria-hidden="true"
+    />
+  )
+}

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

@@ -7,20 +7,23 @@ export type MediaType = {
   alt?: string
 }
 
-export type IframeMediaBlockProps = {
-  data: {
-    fullwidthSectionClass?: string
-    sectionId?: string
-    video?: MediaType
-    image?: MediaType // used as poster
-    imageClassName?: string
-    additionalStyles?: React.CSSProperties
-  }
+type IframeMediaFields = {
+  fullwidthSectionClass?: string
+  sectionId?: string
+  video?: MediaType
+  image?: MediaType // used as poster
+  imageClassName?: string
+  additionalStyles?: React.CSSProperties
+}
+
+export type IframeMediaBlockProps = IframeMediaFields & {
+  data?: IframeMediaFields
 }
 
 // ✅ Named export
-export const DDIframeMedia: React.FC<IframeMediaBlockProps> = ({ data }) => {
+export const DDIframeMedia: React.FC<IframeMediaBlockProps> = (props) => {
   const [isLoading, setIsLoading] = React.useState(true)
+  const data = props.data ?? props
   const { video, image, sectionId, fullwidthSectionClass, additionalStyles } = data
   const sectionIdValue = sectionId || 'fullwidth-container'
 
@@ -127,3 +130,4 @@ export const DDIframeMedia: React.FC<IframeMediaBlockProps> = ({ data }) => {
     </section>
   )
 }
+

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

@@ -1,36 +1,42 @@
-'use client'
-import React from 'react'
-import LineAnim from '@/components/ui/anims/LineAnims'
-
-export interface LineAnimBlockProps {
-  className?: string
-  direction?: 'left-to-right' | 'right-to-left' | 'top-to-bottom' | 'bottom-to-top'
-  trigger?: 'scroll' | 'immediate'
-  duration?: number
-  delay?: number
-  customClass?: string
-  blockType?: string
-  id?: string
-}
-
-export const DDLineAnim: React.FC<LineAnimBlockProps> = ({
-  className = '',
-  direction = 'left-to-right',
-  trigger = 'scroll',
-  duration = 1,
-  delay = 0,
-  customClass = '',
-  id
-}) => {
-  return (
-    <div className={`line-anim-block overflow-hidden ${className} ${customClass}`} id={id}>
-      <LineAnim
-        direction={direction}
-        trigger={trigger}
-        duration={duration}
-        delay={delay}
-        className="bg-gradient-to-r from-gray-400 to-gray-600"
-      />
-    </div>
-  )
-}
+'use client'
+import React from 'react'
+import LineAnim from '@/components/ui/anims/LineAnims'
+
+export interface LineAnimBlockProps {
+  className?: string
+  direction?: 'left-to-right' | 'right-to-left' | 'top-to-bottom' | 'bottom-to-top'
+  trigger?: 'scroll' | 'immediate'
+  duration?: number
+  delay?: number
+  customClass?: string
+  blockType?: string
+  id?: string
+}
+
+export const DDLineAnim: React.FC<LineAnimBlockProps> = ({
+  className = '',
+  direction = 'left-to-right',
+  trigger = 'scroll',
+  duration = 1,
+  delay = 0,
+  customClass = '',
+  id
+}) => {
+  return (
+    <div
+      className={`line-anim-block flex min-h-[55vh] items-center overflow-hidden rounded-md bg-zinc-100 px-8 dark:bg-zinc-900 ${className} ${customClass}`}
+      id={id}
+    >
+      <span className="mr-6 text-sm font-medium uppercase tracking-wide text-zinc-600 dark:text-zinc-300">
+        Line animation
+      </span>
+      <LineAnim
+        direction={direction}
+        trigger={trigger}
+        duration={duration}
+        delay={delay}
+        className="h-2 w-full rounded-full bg-gradient-to-r from-gray-400 via-gray-700 to-gray-400"
+      />
+    </div>
+  )
+}