blocks-dusted 0.1.11 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blocks-dusted",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "Manifest-driven CLI for installing reusable Payload CMS blocks.",
   "type": "module",
   "bin": {
@@ -23,7 +23,10 @@
     "test:add": "node ./bin/index.js add DD-Hero --dry-run",
     "test:list": "node ./bin/index.js list",
     "test:doctor": "node ./bin/index.js doctor",
-    "convert:studio": "node ./scripts/convertStudioBlock.mjs"
+    "convert:studio": "node ./scripts/convertStudioBlock.mjs",
+    "warehouse:sync-lab": "node ./bin/index.js warehouse sync-lab",
+    "warehouse:sync-lab:dry-run": "node ./bin/index.js warehouse sync-lab --dry-run",
+    "shop:pull-sandbox:dry-run": "node ./bin/index.js shop pull-sandbox --dry-run"
   },
   "engines": {
     "node": ">=20"

package/src/cli.js

@@ -1,9 +1,11 @@
-import { readFile } from 'node:fs/promises'
+import { readFile } from 'node:fs/promises'
 import { resolve } from 'node:path'
 import { addTemplate } from './commands/add.js'
 import { doctor } from './commands/doctor.js'
 import { addHeader } from './commands/header.js'
-import { list } from './commands/list.js'
+import { list } from './commands/list.js'
+import { pullSandboxFromWarehouse } from './commands/shop.js'
+import { syncLabToWarehouse } from './commands/warehouse.js'
 import { error, info } from './utils/logger.js'
 import { packageRoot } from './utils/paths.js'
 
@@ -14,7 +16,9 @@ function printHelp() {
   info('  blocks-dusted list')
   info('  blocks-dusted doctor [--cwd <path>]')
   info('  blocks-dusted add <TemplateName> [--dry-run] [--no-register] [--cwd <path>]')
-  info('  blocks-dusted header add <HeaderName> [--dry-run] [--cwd <path>]')
+  info('  blocks-dusted header add <HeaderName> [--dry-run] [--cwd <path>]')
+  info('  blocks-dusted warehouse sync-lab [--dry-run] [--lab <path>]')
+  info('  blocks-dusted shop pull-sandbox [--dry-run] [--warehouse <path>] [--cwd <shop path>]')
   info('  blocks-dusted --version')
 }
 
@@ -57,11 +61,42 @@ export async function runCli(args, options = {}) {
     })
   }
 
+  if (command === 'warehouse') {
+    const [subcommand] = rest
+    if (subcommand !== 'sync-lab') throw new Error('Usage: blocks-dusted warehouse sync-lab [--dry-run] [--lab <path>]')
+    return syncLabToWarehouse({
+      labRoot: optionValue(rest, '--lab'),
+      dryRun: rest.includes('--dry-run'),
+    })
+  }
+
+  if (command === 'shop') {
+    const [subcommand] = rest
+    if (subcommand !== 'pull-sandbox') throw new Error('Usage: blocks-dusted shop pull-sandbox [--dry-run] [--warehouse <path>] [--cwd <shop path>]')
+    return pullSandboxFromWarehouse({
+      targetDirectory,
+      warehouseRoot: optionValue(rest, '--warehouse'),
+      dryRun: rest.includes('--dry-run'),
+    })
+  }
+
   error(`Unknown command: ${command}`)
   printHelp()
   process.exitCode = 1
 }
 
+function optionValue(args, name) {
+  for (let index = 0; index < args.length; index += 1) {
+    const argument = args[index]
+    if (argument === name) {
+      const value = args[index + 1]
+      if (!value) throw new Error(`${name} requires a path`)
+      return value
+    }
+    if (argument.startsWith(`${name}=`)) return argument.slice(name.length + 1)
+  }
+  return undefined
+}
 function parseGlobalOptions(args, originalDirectory) {
   const commandArgs = []
   let targetDirectory = originalDirectory
@@ -90,3 +125,4 @@ async function packageVersion() {
   return packageJson.version
 }
 
+

package/src/commands/shop.js

@@ -0,0 +1,59 @@
+import { mkdir, readdir, readFile, stat, copyFile } from 'node:fs/promises'
+import { dirname, join, relative, resolve } from 'node:path'
+import { packageRoot } from '../utils/paths.js'
+
+const defaultSandboxBlocks = join('src', 'sandbox', 'products', 'DDBlockProductSandboxes', 'blocks')
+const excludedTemplateFiles = new Set(['config.ts', 'manifest.json', 'README.md'])
+
+export async function pullSandboxFromWarehouse({ targetDirectory = process.cwd(), warehouseRoot = packageRoot, dryRun = false } = {}) {
+  const sourceRoot = join(resolve(warehouseRoot), 'templates', 'blocks')
+  const targetRoot = join(resolve(targetDirectory), defaultSandboxBlocks)
+  const blockEntries = await readdir(sourceRoot, { withFileTypes: true })
+  const results = []
+  const errors = []
+
+  for (const entry of blockEntries.sort((a, b) => a.name.localeCompare(b.name))) {
+    if (!entry.isDirectory()) continue
+    const blockName = entry.name
+    const manifestPath = join(sourceRoot, blockName, 'manifest.json')
+    let manifest
+    try {
+      manifest = JSON.parse(await readFile(manifestPath, 'utf8'))
+    } catch (error) {
+      errors.push(`${blockName}: unable to read manifest: ${error.message}`)
+      continue
+    }
+
+    for (const file of manifest.files ?? []) {
+      const from = String(file.from ?? '')
+      if (!from || excludedTemplateFiles.has(from.replace(/\\/g, '/'))) continue
+      const source = join(sourceRoot, blockName, from)
+      const target = join(targetRoot, blockName, from)
+      try {
+        const sourceStat = await stat(source)
+        if (!sourceStat.isFile()) {
+          errors.push(`${blockName}: source is not a file: ${relative(resolve(warehouseRoot), source)}`)
+          continue
+        }
+        results.push({ blockName, from: relative(resolve(warehouseRoot), source), to: relative(resolve(targetDirectory), target) })
+        if (!dryRun) {
+          await mkdir(dirname(target), { recursive: true })
+          await copyFile(source, target)
+        }
+      } catch (error) {
+        errors.push(`${blockName}: missing warehouse runtime file ${from}: ${error.message}`)
+      }
+    }
+  }
+
+  console.log(`Warehouse to Shop sandbox pull${dryRun ? ' dry run' : ''}`)
+  console.log(`Target: ${targetRoot}`)
+  console.log(`Files ${dryRun ? 'planned' : 'copied'}: ${results.length}`)
+  for (const row of results) console.log(`- ${row.blockName}: ${row.from} -> ${row.to}`)
+  if (errors.length > 0) {
+    console.error('Errors:')
+    for (const error of errors) console.error(`- ${error}`)
+    throw new Error(`Warehouse to Shop pull failed with ${errors.length} error(s).`)
+  }
+  return { results, errors }
+}

package/src/commands/warehouse.js

@@ -0,0 +1,73 @@
+import { mkdir, readdir, readFile, stat, copyFile } from 'node:fs/promises'
+import { dirname, join, relative, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const packageRoot = resolve(fileURLToPath(new URL('../..', import.meta.url)))
+const defaultLabRoot = resolve(packageRoot, '..', 'CLI-TestGround', 'cli-testground')
+const blockTemplateRoot = join(packageRoot, 'templates', 'blocks')
+
+export async function syncLabToWarehouse({ labRoot = defaultLabRoot, dryRun = false } = {}) {
+  const labBlocksRoot = join(resolve(labRoot), 'src', 'blocks')
+  const manifests = await readBlockManifests(blockTemplateRoot)
+  const results = []
+  const errors = []
+
+  for (const { blockName, manifest, manifestDir } of manifests) {
+    for (const file of manifest.files ?? []) {
+      const from = String(file.from ?? '')
+      if (!from) continue
+      const source = join(labBlocksRoot, blockName, from)
+      const target = join(manifestDir, from)
+      try {
+        const sourceStat = await stat(source)
+        if (!sourceStat.isFile()) {
+          errors.push(`${blockName}: source is not a file: ${relative(resolve(labRoot), source)}`)
+          continue
+        }
+        results.push({ blockName, from: relative(resolve(labRoot), source), to: relative(packageRoot, target) })
+        if (!dryRun) {
+          await mkdir(dirname(target), { recursive: true })
+          await copyFile(source, target)
+        }
+      } catch (error) {
+        errors.push(`${blockName}: missing lab file for manifest entry ${from}: ${error.message}`)
+      }
+    }
+  }
+
+  printSyncResults({ title: 'Lab to Warehouse sync', dryRun, results, errors })
+  if (errors.length > 0) {
+    const error = new Error(`Lab to Warehouse sync failed with ${errors.length} error(s).`)
+    error.results = { results, errors }
+    throw error
+  }
+  return { results, errors }
+}
+
+async function readBlockManifests(root) {
+  const entries = await readdir(root, { withFileTypes: true })
+  const manifests = []
+  for (const entry of entries) {
+    if (!entry.isDirectory()) continue
+    const manifestDir = join(root, entry.name)
+    const manifestPath = join(manifestDir, 'manifest.json')
+    try {
+      const manifest = JSON.parse(await readFile(manifestPath, 'utf8'))
+      manifests.push({ blockName: entry.name, manifest, manifestDir })
+    } catch (error) {
+      throw new Error(`Unable to read ${relative(packageRoot, manifestPath)}: ${error.message}`)
+    }
+  }
+  manifests.sort((a, b) => a.blockName.localeCompare(b.blockName))
+  return manifests
+}
+
+function printSyncResults({ title, dryRun, results, errors }) {
+  console.log(`${title}${dryRun ? ' dry run' : ''}`)
+  console.log(`Files ${dryRun ? 'planned' : 'copied'}: ${results.length}`)
+  for (const row of results) console.log(`- ${row.blockName}: ${row.from} -> ${row.to}`)
+  if (errors.length > 0) {
+    console.error('Errors:')
+    for (const error of errors) console.error(`- ${error}`)
+  }
+}

package/src/installers/patchRenderBlocks.js

@@ -46,7 +46,7 @@ async function exists(path) {
 }
 
 function patchRenderBlocksContent(content, manifest) {
-  const exportName = manifest.exportName ?? manifest.name
+  const exportName = manifest.componentExportName ?? manifest.exportName ?? manifest.name
   if (content.includes(manifest.slug) || content.includes(`@/blocks/${manifest.name}/Component`)) {
     return { changed: false, reason: 'RenderBlocks already appears to contain this block' }
   }

package/src/registry/validateTemplateManifest.js

@@ -26,6 +26,7 @@ export function validateTemplateManifest(manifest) {
   if (manifest.sourceName !== undefined && typeof manifest.sourceName !== 'string') errors.push('sourceName must be a string when present')
   if (manifest.portableName !== undefined && typeof manifest.portableName !== 'string') errors.push('portableName must be a string when present')
   if (manifest.exportName !== undefined && typeof manifest.exportName !== 'string') errors.push('exportName must be a string when present')
+  if (manifest.componentExportName !== undefined && typeof manifest.componentExportName !== 'string') errors.push('componentExportName must be a string when present')
   if (manifest.interfaceName !== undefined && typeof manifest.interfaceName !== 'string') errors.push('interfaceName must be a string when present')
 
   for (const key of OPTIONAL_ARRAYS) {
@@ -67,4 +68,4 @@ export function validateTemplateManifest(manifest) {
 
   if (errors.length > 0) throw new Error(`Invalid template manifest:\n- ${errors.join('\n- ')}`)
   return manifest
-}
+}

package/templates/blocks/BannerDD790432/Component.tsx

@@ -0,0 +1,63 @@
+import { cn } from '@/utilities/ui'
+import React, { useId } from 'react'
+// import RichText from '@/components/RichText'
+
+const BANNER_BEFORE_CLS =
+  'relative z-0 ' +
+  "before:content-[''] before:absolute before:inset-0 before:z-[-1] " +
+  'before:bg-lines before:bg-[length:10px_10px] ' +
+  'before:bg-repeat before:opacity-100 before:pointer-events-none'
+
+export type BannerDD790432Props = {
+  className?: string
+  wrapperClassName?: string
+  content?: unknown
+  style?: 'info' | 'warning' | 'error' | 'success' | null
+}
+
+export const BannerDD790432: React.FC<BannerDD790432Props> = ({
+  className,
+  wrapperClassName,
+  content,
+  style,
+}) => {
+  const reactId = useId()
+  const richtextKey = `banner-richtext-${reactId.replace(/:/g, '')}`
+
+  return (
+    <div className={cn('mx-auto my-8 w-full banner_container', className)}>
+      <div
+        className={cn(
+          wrapperClassName,
+          'border py-3 pl-0 pr-3 flex items-center rounded shadow-2xl banner_content',
+          BANNER_BEFORE_CLS,
+          {
+            'banner-info border-border bg-card text-(--black) [box-shadow:inset_0_0_2px_0px_var(--border),var(--shadow-xl)] [&_blockquote]:border-s-border!':
+              style === 'info',
+            'banner-error border-(--error-border) bg-error text-(--white) [box-shadow:inset_0_0_2px_0px_var(--error),var(--shadow-xl)] [&_blockquote]:border-s-(--error-border)!':
+              style === 'error',
+            'banner-success border-(--success-border) bg-success text-(--white) [box-shadow:inset_0_0_2px_0px_var(--success),var(--shadow-xl)] [&_blockquote]:border-s-(--success-border)!':
+              style === 'success',
+            'banner-warning border-(--warning-border) bg-warning text-(--white) [box-shadow:inset_0_0_2px_0px_var(--warning),var(--shadow-xl)] [&_blockquote]:border-s-(--warning-border)!':
+              style === 'warning',
+          },
+        )}
+      >
+        {/* TODO: Reconnect this project's RichText renderer for `content`. */}
+        {content ? (
+          // Replace when RichText is configured.
+          <div className="banner_richtext">Rich text content is configured for this banner.</div>
+        ) : // Adjust RichText props if required.
+        // <RichText
+        //   data={content}
+        //   data-richtext-key={richtextKey}
+        //   className="banner_richtext"
+        //   enableGutter={false}
+        //   enableProse={true}
+        // />
+        null}
+      </div>
+    </div>
+  )
+}
+

package/templates/blocks/BannerDD790432/config.ts

@@ -0,0 +1,54 @@
+import type { Block } from 'payload'
+
+export const BannerDD790432: Block = {
+  slug: 'banner-dd-790432',
+  interfaceName: 'BannerDD790432',
+  fields: [
+    {
+      name: 'style',
+      type: 'select',
+      defaultValue: 'info',
+      options: [
+        { label: 'Info', value: 'info' },
+        { label: 'Warning', value: 'warning' },
+        { label: 'Error', value: 'error' },
+        { label: 'Success', value: 'success' },
+      ],
+      required: true,
+    },
+    {
+      name: 'content',
+      type: 'richText',
+      label: false,
+      required: true,
+      admin: {
+        description:
+          'TODO: Add this project\'s RichText renderer and custom Lexical features manually after installation.',
+      },
+    },
+    {
+      name: 'useCustomClasses',
+      type: 'checkbox',
+      label: 'Override default classes',
+      defaultValue: false,
+    },
+    {
+      name: 'className',
+      type: 'text',
+      label: 'Banner container class',
+      admin: {
+        description: 'banner_container class',
+        condition: (_, siblingData) => Boolean(siblingData.useCustomClasses),
+      },
+    },
+    {
+      name: 'wrapperClassName',
+      type: 'text',
+      label: 'Banner content class',
+      admin: {
+        description: 'banner_content class',
+        condition: (_, siblingData) => Boolean(siblingData.useCustomClasses),
+      },
+    },
+  ],
+}

package/templates/blocks/BannerDD790432/manifest.json

@@ -0,0 +1,80 @@
+{
+  "type": "block",
+  "name": "BannerDD790432",
+  "label": "Banner DD 790432",
+  "sourceName": "BannerDD790432",
+  "portableName": "BannerDD790432",
+  "slug": "banner-dd-790432",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/Dusted-Payload-Blocks",
+    "originalPath": "CLI-TestGround/dusted-blocks-demo/src/blocks/BannerDD790432",
+    "originalSlug": "banner-dd-790432",
+    "originalConfigExport": "BannerDD790432",
+    "originalComponentExport": "BannerDD790432",
+    "originalInterfaceName": "BannerDD790432"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/BannerDD790432/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/BannerDD790432/config.ts"
+    }
+  ],
+  "dependencies": [],
+  "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 BannerDD790432 in Pages/Posts block arrays if automatic registration was skipped.",
+    "Register banner-dd-790432 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 BannerDD790432 in Pages/Posts block arrays if automatic registration was skipped.",
+    "Register banner-dd-790432 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 BannerDD790432 from @/blocks/BannerDD790432/config."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register banner-dd-790432 with component export BannerDD790432."
+    }
+  },
+  "notes": [
+    "Promoted from the verified Dusted Blocks demo implementation.",
+    "Installer preserves existing destination files and reports project requirements before writing."
+  ],
+  "exportName": "BannerDD790432",
+  "componentExportName": "BannerDD790432",
+  "interfaceName": "BannerDD790432"
+}

package/templates/blocks/Button47/Component.tsx

@@ -0,0 +1,124 @@
+'use client'
+
+import Button from '@mui/material/Button'
+import { icons } from 'lucide-react'
+import { motion, useReducedMotion } from 'motion/react'
+import Link from 'next/link'
+import type { Button47Block } from '@/payload-types'
+import { cn } from '@/utilities/ui'
+import { resolveButton47Href } from './link'
+import styles from './styles.module.scss'
+
+const colors = {
+  contained: {
+    background: '#4338ca',
+    hover: '#3730a3',
+    foreground: '#d9f99d',
+    border: '#4338ca',
+    frame: 'var(--button47-frame)',
+  },
+  outlined: {
+    background: '#a3e635',
+    hover: '#bef264',
+    foreground: '#1e1b4b',
+    border: '#3f6212',
+    frame: 'var(--button47-frame)',
+  },
+  text: {
+    background: 'var(--button47-ghost-bg)',
+    hover: 'var(--button47-ghost-hover)',
+    foreground: 'var(--button47-ghost-text)',
+    border: 'var(--button47-frame)',
+    frame: 'transparent',
+  },
+}
+export function Button47({ buttons, position = 'center', customClassName }: Button47Block) {
+  const reduceMotion = useReducedMotion()
+  if (!buttons?.length) return null
+
+  return (
+    <div
+      className={cn(styles.root, customClassName)}
+      style={{
+        justifyContent:
+          position === 'left' ? 'flex-start' : position === 'right' ? 'flex-end' : 'center',
+      }}
+    >
+      {buttons.map((button, index) => {
+        const href = resolveButton47Href(button.link)
+        if (!href || !button.link.label?.trim()) return null
+        const variant = button.variant || 'contained'
+        const color = colors[variant]
+
+        const Icon = button.icon ? icons[button.icon as keyof typeof icons] : undefined
+        const icon = Icon ? <Icon size={18} aria-hidden="true" focusable="false" /> : undefined
+
+        return (
+          <motion.div
+            key={button.id || index}
+            className={styles.focusFrame}
+            initial={reduceMotion ? false : { opacity: 0, y: 16 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: reduceMotion ? 0 : 0.3, delay: reduceMotion ? 0 : index * 0.1 }}
+            viewport={{ once: false, amount: 0.2 }}
+          >
+            <div
+              className={styles.bevel}
+              style={{ backgroundColor: '#ffffffe3', borderColor: '#cfcfcfa8' }}
+            >
+              <Button
+                component={Link}
+                href={href}
+                variant={variant}
+                target={button.link.newTab ? '_blank' : undefined}
+                rel={button.link.newTab ? 'noopener noreferrer' : undefined}
+                startIcon={button.iconPosition !== 'after' ? icon : undefined}
+                endIcon={button.iconPosition === 'after' ? icon : undefined}
+                className={cn(styles.button, 'group relative overflow-hidden')}
+                sx={{
+                  minWidth: 160,
+                  minHeight: 44,
+                  maxWidth: '100%',
+                  textTransform: 'none',
+                  fontSize: 15,
+                  fontFamily: 'inherit',
+                  padding: '8px 16px',
+                  border: '0px',
+                  borderRadius: '4px',
+                  lineHeight: 1.4,
+                  color: color.foreground,
+                  backgroundColor: color.background,
+                  borderColor: color.border,
+                  boxShadow: 'none',
+                  '&:hover': {
+                    backgroundColor: color.hover,
+                    border: '0px',
+                    borderColor: color.border,
+                    boxShadow: '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+                  },
+                  '&:active': { backgroundColor: color.background, border: '0px' },
+                }}
+              >
+                <motion.span
+                  initial={reduceMotion ? false : { opacity: 0, y: -8 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  transition={{ duration: reduceMotion ? 0 : 0.3 }}
+                  viewport={{ once: false, amount: 0.2 }}
+                >
+                  {button.link.label}
+                </motion.span>
+                <span
+                  aria-hidden="true"
+                  className="pointer-events-none absolute inset-0 flex size-full justify-center transition-transform [transform:skewX(-45deg)_translateX(-100%)] group-hover:duration-1000 group-hover:[transform:skewX(-45deg)_translateX(100%)] motion-reduce:hidden"
+                  style={{ width: '200%' }}
+                >
+                  <span className="relative h-full w-1/3 max-w-64 scale-200 bg-gradient-to-r from-transparent via-white/15 to-transparent" />
+                </span>
+              </Button>
+            </div>
+          </motion.div>
+        )
+      })}
+    </div>
+  )
+}

package/templates/blocks/Button47/config.ts

@@ -0,0 +1,75 @@
+import type { Block, Field, TextFieldSingleValidation } from 'payload'
+import { link } from '@/fields/link'
+import { iconPicker } from '@/fields/lucide-icon-picker/field'
+import { isSupportedButtonURL } from './link'
+
+const validateURL: TextFieldSingleValidation = (value, { siblingData }) =>
+  (siblingData as { type?: string })?.type !== 'custom' ||
+  isSupportedButtonURL(value) ||
+  'Enter an https:// or http:// URL, /path, #anchor, mailto: or tel: link.'
+
+// Apply URL validation only to this block's copy of the shared link field.
+const validateCustomURL = (field: Field): Field => {
+  if ('name' in field && field.name === 'url' && field.type === 'text' && !field.hasMany) {
+    return {
+      ...field,
+      validate: validateURL,
+    }
+  }
+  if ('fields' in field) return { ...field, fields: field.fields.map(validateCustomURL) }
+  return field
+}
+
+export const Button47: Block = {
+  slug: 'button47',
+  dbName: 'button47',
+  interfaceName: 'Button47Block',
+  labels: { singular: 'Button47', plural: 'Button47 blocks' },
+  fields: [
+    {
+      name: 'position',
+      label: 'Button Alignment',
+      type: 'select',
+      required: true,
+      defaultValue: 'center',
+      options: [
+        { label: 'Left', value: 'left' },
+        { label: 'Center', value: 'center' },
+        { label: 'Right', value: 'right' },
+      ],
+    },
+    { name: 'customClassName', type: 'text', label: 'Wrapper CSS Class' },
+    {
+      name: 'buttons',
+      type: 'array',
+      required: true,
+      minRows: 1,
+      fields: [
+        validateCustomURL(link({ appearances: false })),
+        {
+          name: 'variant',
+          label: 'Button Style',
+          type: 'select',
+          required: true,
+          defaultValue: 'contained',
+          options: [
+            { label: 'Primary', value: 'contained' },
+            { label: 'Secondary', value: 'outlined' },
+            { label: 'Ghost', value: 'text' },
+          ],
+        },
+        iconPicker({ name: 'icon', description: 'Optional icon beside the button label.' }),
+        {
+          name: 'iconPosition',
+          type: 'select',
+          defaultValue: 'before',
+          options: [
+            { label: 'Before Label', value: 'before' },
+            { label: 'After Label', value: 'after' },
+          ],
+          admin: { condition: (_, siblingData) => Boolean(siblingData?.icon) },
+        },
+      ],
+    },
+  ],
+}

package/templates/blocks/Button47/link.ts

@@ -0,0 +1,22 @@
+import type { Button47Block } from '@/payload-types'
+
+export const isSupportedButtonURL = (value: unknown): value is string => {
+  if (typeof value !== 'string' || !value.trim()) return false
+  const url = value.trim()
+  if (/[\u0000-\u0020\u007f\\]/.test(url)) return false
+  if (url.startsWith('#') || (url.startsWith('/') && !url.startsWith('//'))) return true
+  try {
+    return ['https:', 'http:', 'mailto:', 'tel:'].includes(new URL(url).protocol)
+  } catch {
+    return false
+  }
+}
+
+export const resolveButton47Href = (link: Button47Block['buttons'][number]['link']) => {
+  if (link.type === 'reference') {
+    const page = link.reference?.value
+    if (!page || typeof page !== 'object' || !page.slug) return null
+    return page.slug === 'home' ? '/' : `/${page.slug}`
+  }
+  return link.type === 'custom' && isSupportedButtonURL(link.url) ? link.url.trim() : null
+}