blocks-dusted 0.1.10 → 0.1.12

package/README.md

@@ -1045,3 +1045,38 @@ The RichText standard is correctly implemented when:
 - CLI executable: `blocks-dusted`
 
 The repository can remain private while the npm package is published separately.
+
+<!-- DESIGNSDUSTEDV4_SANDBOX_SYNC:START -->
+## DesignsDustedv4 Sandbox Sync
+
+Last updated: 2026-08-22.
+
+The current local CLI version in `package.json` is `0.1.10`.
+
+`blocks-dusted/templates/blocks` is the installable template source for productized DD/DDHG blocks. DesignsDustedv4 keeps matching sandbox runtime copies for its product catalogue previews.
+
+Matching runtime source:
+
+```text
+D:\CodeDusted\DesignsDustedv4\src\sandbox\products\DDBlockProductSandboxes\blocks
+```
+
+Installable template source:
+
+```text
+D:\CodeDusted\Dusted-Payload-Blocks\blocks-dusted\templates\blocks
+```
+
+Current synced state:
+
+- DesignsDustedv4 sandbox product block folders: 68
+- blocks-dusted template block folders: 68
+- shared sandbox/template files compared: 179
+- shared file mismatches after sync: 0
+- expected extra template files: 68 `config.ts` files
+- extra files outside `config.ts`: 0
+
+`config.ts` is installer/admin schema metadata and intentionally exists only in `blocks-dusted`. Do not copy those files into the DesignsDustedv4 sandbox unless the app runtime explicitly needs them. Do not delete them from `blocks-dusted`.
+
+When changing a productized block, update both the DesignsDustedv4 sandbox runtime file and the matching `blocks-dusted/templates/blocks` runtime file. Keep fixture/demo copy in DesignsDustedv4 public-safe: no local paths, repository names, private data, registry wiring copy, iframe copy, or sandbox-render implementation copy.
+<!-- DESIGNSDUSTEDV4_SANDBOX_SYNC:END -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blocks-dusted",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "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/utils/paths.js

@@ -1,14 +1,14 @@
-import { dirname, resolve } from 'node:path'
-import { fileURLToPath } from 'node:url'
-
-const currentDirectory = dirname(fileURLToPath(import.meta.url))
-export const packageRoot = resolve(currentDirectory, '..', '..')
-export const templatesDirectory = resolve(packageRoot, 'templates')
-export const blocksDirectory = resolve(templatesDirectory, 'blocks')
-export const componentsDirectory = resolve(templatesDirectory, 'components')
-export const collectionsDirectory = resolve(templatesDirectory, 'collections')
-export const templateDirectories = [
-  { type: 'block', path: blocksDirectory },
-  { type: 'component', path: componentsDirectory },
-  { type: 'collection', path: collectionsDirectory },
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const currentDirectory = dirname(fileURLToPath(import.meta.url))
+export const packageRoot = resolve(currentDirectory, '..', '..')
+export const templatesDirectory = resolve(packageRoot, 'templates')
+export const blocksDirectory = resolve(templatesDirectory, 'blocks')
+export const componentsDirectory = resolve(templatesDirectory, 'components')
+export const collectionsDirectory = resolve(templatesDirectory, 'collections')
+export const templateDirectories = [
+  { type: 'block', path: blocksDirectory },
+  { type: 'component', path: componentsDirectory },
+  { type: 'collection', path: collectionsDirectory },
 ]

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

@@ -0,0 +1,229 @@
+'use client'
+
+import React, { useEffect, useRef, useState } from 'react'
+import { SerializedEditorState } from '@payloadcms/richtext-lexical/lexical'
+import { ChevronDown, ChevronUp } from 'lucide-react'
+import { type VariantProps, cva } from 'class-variance-authority'
+
+import RichText from '@/components/RichText'
+import { cn } from '@/utilities/ui'
+
+type AccordionButtonVariant = 'default' | 'destructive' | 'v1' | 'v2' | 'v3' | 'v5' | 'v7'
+
+const rippleCSS = `
+  .accordion-ripple-container { position: relative; overflow: hidden; }
+  .accordion-ripple-effect { position: absolute; border-radius: 50%; transform: scale(0); animation: accordion-ripple-animation 600ms linear; pointer-events: none; z-index: 10; }
+  @keyframes accordion-ripple-animation { to { transform: scale(4); opacity: 0; } }
+`
+
+const buttonAccordVariants = cva(
+  'accordion-ripple-container inline-flex items-start justify-between whitespace-normal text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    defaultVariants: { variant: 'default' },
+    variants: {
+      variant: {
+        default:
+          'ripple-default bg-primary text-stone-200 dark:text-stone-900 hover:shadow-md hover:color-accent will-change-transform',
+        destructive:
+          'ripple-destructive bg-red-950/50 border border-red-500/50 text-stone-200 shadow-[inset_0_0_0_1px_rgba(239,68,68,0.6),inset_0_0_12px_rgba(239,68,68,0.8)] dark:text-stone-200 text-destructive-foreground hover:bg-destructive/90 will-change-transform',
+        v1: 'ripple-v1 border-[0.5px] text-stone-200 dark:text-stone-200 rounded-sm bg-transparent duration-200 hover:bg-primary shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] active:shadow-none border-stone-800 hover:text-zinc-200 dark:border-stone-600 dark:shadow-[3px_3px_0px_0px_var(--border-color)] active:dark:shadow-none dark:bg-zinc-950',
+        v2: 'ripple-v2 text-stone-200 dark:text-stone-900 group relative rounded-none overflow-hidden ease-in-out hover:scale-100 hover:shadow-lg bg-gradient-to-tr from-zinc-900 to-zinc-700 hover:shadow-zinc-500/30 dark:bg-gradient-to-tr dark:from-neutral-950 dark:to-neutral-900 dark:hover:shadow-zinc-700/30',
+        v3: 'ripple-v3 text-stone-200 dark:text-stone-900 relative overflow-hidden group ease-out bg-zinc-900 hover:bg-gradient-to-r hover:from-zinc-800 hover:to-zinc-700 dark:bg-zinc-50 dark:hover:from-zinc-50 dark:hover:to-zinc-100',
+        v5: 'ripple-v5 text-stone-200 dark:text-stone-200 relative overflow-hidden border shadow group invert-[1] border-stone-300 bg-zinc-50 dark:border-stone-700 dark:bg-zinc-950',
+        v7: "ripple-v7 text-stone-200 dark:text-stone-200 relative hover:no-underline px-[1px] pb-0 ease-in after:absolute after:bottom-[-2px] after:left-0 after:h-0.5 after:w-full after:translate-y-[3px] after:rounded-full after:dark:bg-zinc-50 after:bg-zinc-800 after:opacity-0 after:duration-300 after:content-[''] hover:after:-translate-y-1 hover:after:opacity-100"
+      }
+    }
+  }
+)
+
+interface ButtonAccordProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonAccordVariants> {}
+
+const ButtonAccord = React.forwardRef<HTMLButtonElement, ButtonAccordProps>(function ButtonAccord(
+  { className, variant, onClick, children, ...props },
+  ref
+) {
+  useEffect(() => {
+    const style = document.createElement('style')
+    style.innerHTML = rippleCSS
+    document.head.appendChild(style)
+    return () => style.remove()
+  }, [])
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    const button = event.currentTarget
+    const ripple = document.createElement('span')
+    const rect = button.getBoundingClientRect()
+
+    ripple.className = 'accordion-ripple-effect'
+    ripple.style.left = `${event.clientX - rect.left}px`
+    ripple.style.top = `${event.clientY - rect.top}px`
+    ripple.style.width = ripple.style.height = `${Math.max(rect.width, rect.height)}px`
+    ripple.style.backgroundColor = variant === 'destructive' ? 'rgba(255, 0, 0, 0.3)' : 'rgba(139, 92, 246, 0.45)'
+
+    button.appendChild(ripple)
+    ripple.addEventListener('animationend', () => ripple.remove())
+    onClick?.(event)
+  }
+
+  const content =
+    variant === 'v5' ? (
+      <>
+        <span className="absolute inset-0 !border-none rounded-none flex items-center justify-center size-full duration-700 -translate-x-full group-hover:translate-x-0 bg-zinc-800 dark:bg-zinc-100 text-zinc-100 dark:text-zinc-100" />
+        <span className="absolute flex items-center justify-center w-full h-full transition-all duration-500 ease-out transform group-hover:translate-x-full">
+          {children}
+        </span>
+        <span className="relative invisible">{children}</span>
+      </>
+    ) : variant === 'v2' || variant === 'v3' ? (
+      <>
+        <span className="relative flex w-full items-start justify-between">{children}</span>
+        <span
+          className="absolute inset-0 flex size-full justify-center [transform:skew(-14deg)_translateX(-100%)] group-hover:duration-1000 group-hover:[transform:skew(-14deg)_translateX(100%)]"
+          style={{ width: '200% !important' }}
+          aria-hidden="true"
+        >
+          <span className="relative h-full w-64 scale-200 bg-indigo-500/50 dark:bg-lime-500/50" />
+        </span>
+      </>
+    ) : (
+      <span className="relative flex w-full items-start justify-between">{children}</span>
+    )
+
+  return (
+    <button
+      ref={ref}
+      onClick={handleClick}
+      className={cn(buttonAccordVariants({ variant }), className)}
+      {...props}
+    >
+      {content}
+    </button>
+  )
+})
+
+const AccordionSeparator = ({ className }: { className?: string }) => (
+  <div className={cn('h-px w-full shrink-0 bg-border', className)} />
+)
+
+// Heading reset: all h1-h6 inside the title RichText inherit colour, stay at base (16px)
+// size, break words, and get the content-block font-weight/margin treatment.
+// Paragraph reset: remove prose-injected vertical margins.
+const TITLE_CLS =
+  'm-0 p-0 !mx-0 list-none text-left ' +
+  '[&_h1]:text-inherit [&_h2]:text-inherit [&_h3]:text-inherit ' +
+  '[&_h4]:text-inherit [&_h5]:text-inherit [&_h6]:text-inherit ' +
+  '[&_h1]:!text-base [&_h2]:!text-base [&_h3]:!text-base ' +
+  '[&_h4]:!text-base [&_h5]:!text-base [&_h6]:!text-base ' +
+  '[&_h1]:break-words [&_h2]:break-words [&_h3]:break-words ' +
+  '[&_h4]:break-words [&_h5]:break-words [&_h6]:break-words ' +
+  '[&_.content-block_h1]:font-[inherit] [&_.content-block_h2]:font-[inherit] ' +
+  '[&_.content-block_h3]:font-[inherit] [&_.content-block_h4]:font-[inherit] ' +
+  '[&_.content-block_h5]:font-[inherit] [&_.content-block_h6]:font-[inherit] ' +
+  '[&_.content-block_h1]:mt-[inherit] [&_.content-block_h2]:mt-[inherit] ' +
+  '[&_.content-block_h3]:mt-[inherit] [&_.content-block_h4]:mt-[inherit] ' +
+  '[&_.content-block_h5]:mt-[inherit] [&_.content-block_h6]:mt-[inherit] ' +
+  '[&_.content-block_h1]:mb-4 [&_.content-block_h2]:mb-4 [&_.content-block_h3]:mb-4 ' +
+  '[&_.content-block_h4]:mb-4 [&_.content-block_h5]:mb-4 [&_.content-block_h6]:mb-4 ' +
+  '[&_p]:!mt-0 [&_p]:!mb-0'
+
+export interface AccordionItemData {
+  title: SerializedEditorState
+  content: SerializedEditorState
+  accordionId?: string
+}
+
+export interface AccordionBlockProps {
+  items: AccordionItemData[]
+  accordionId?: string
+  accordionButtonVariant?: AccordionButtonVariant
+}
+
+export const AccordionItem: React.FC<AccordionItemData & { buttonVariant?: AccordionButtonVariant }> = ({
+  title,
+  content,
+  accordionId,
+  buttonVariant = 'v2'
+}) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [height, setHeight] = useState('0px')
+  const contentRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (contentRef.current) {
+      setHeight(isOpen ? `${contentRef.current.scrollHeight}px` : '0px')
+    }
+  }, [isOpen])
+
+  return (
+    <div
+      data-container-type="accordionItem"
+      className={`accordion-item max-w-full ${isOpen ? 'mb-4 shadow-2xl' : 'mb-0 shadow-md'}`}
+      id={accordionId}
+    >
+      <div className="accordion-title-button shadow-lg backdrop-blur-lg">
+        <ButtonAccord
+          suppressHydrationWarning
+          suppressContentEditableWarning
+          variant={buttonVariant}
+          className="flex w-full items-start justify-between p-4 backdrop-blur-[16px] brightness-100 duration-300 !whitespace-normal !break-words !h-auto hover:brightness-105 !outline-none !ring-0 !ring-offset-0"
+          onClick={() => setIsOpen(!isOpen)}
+          aria-expanded={isOpen}
+          aria-controls={`accordion-content-${accordionId}`}
+          type="button"
+          style={{ borderRadius: '0 !important' }}
+        >
+          <div className="accordion-title-inner flex-grow text-left break-words pr-8">
+            <RichText className={TITLE_CLS} data={title as any} enableGutter={false} />
+          </div>
+          {isOpen ? (
+            <ChevronUp
+              className="chevron-up-icon fixed right-2 top-1 mt-3 h-6 w-6 opacity-50 color-accent dark:text-[var(--color-alt)]"
+              style={{ color: 'var(--active)' }}
+            />
+          ) : (
+            <ChevronDown
+              className="chevron-down-icon fixed right-2 top-1 mt-3 h-6 w-6 opacity-50 color-accent dark:text-[var(--color-alt)]"
+              style={{ color: 'var(--active)' }}
+            />
+          )}
+        </ButtonAccord>
+        <AccordionSeparator className="accordion-separator dd-bg-50" />
+        <div
+          ref={contentRef}
+          id={`accordion-content-${accordionId}`}
+          style={{
+            height,
+            transition: 'height 0.3s ease'
+          }}
+          className="accordion-content-wrapper overflow-hidden"
+        >
+          <RichText
+            className="p-4 color-text bg-[rgba(159,159,159,0.18)]"
+            data={content as any}
+            enableGutter={false}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const DDAccordion: React.FC<AccordionBlockProps> = ({ items, accordionButtonVariant = 'v2' }) => {
+  return (
+    <div className="accordion-container max-w-full">
+      {items.map((item, index) => (
+        <AccordionItem
+          key={item.accordionId || `accordion-item-${index}`}
+          title={item.title}
+          content={item.content}
+          accordionId={item.accordionId || `accordion-item-${index}`}
+          buttonVariant={accordionButtonVariant}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default DDAccordion

package/templates/blocks/DD-Accordion/README.md

@@ -0,0 +1,3 @@
+# DD-Accordion
+
+Portable first-pass conversion of AccordionBlock. The raw source referenced deferred ButtonMainDD and project UI primitives, so this template uses native details/summary markup.

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

@@ -0,0 +1,73 @@
+import type { Block } from 'payload'
+
+import { BlocksFeature } from '@payloadcms/richtext-lexical'
+
+import { defaultLexical } from '@/fields/defaultLexical'
+
+import { DDBanner } from '@/blocks/DD-Banner/config'
+import { Code } from '@/blocks/Code/config'
+import { MediaBlock } from '@/blocks/MediaBlock/config'
+import { DDIconButton } from '../DD-IconButton/config'
+import { DDAnimText } from '@/blocks/DD-AnimText/config'
+
+export const DDAccordion: Block = {
+  slug: 'DD-Accordion',
+  interfaceName: 'DDAccordion',
+  labels: {
+    singular: 'Accordion Block',
+    plural: 'Accordion Blocks'
+  },
+  fields: [
+    {
+      name: 'accordionId',
+      type: 'text',
+      hidden: true,
+      label: 'Accordian ID',
+      required: false,
+      admin: {
+        description: 'Unique ID for the accordian block',
+        width: '50%'
+      }
+    },
+    {
+      name: 'accordionButtonVariant',
+      type: 'select',
+      label: 'Accordion Button Variant',
+      defaultValue: 'v2',
+      options: [
+        { label: 'Default', value: 'default' },
+        { label: 'Destructive', value: 'destructive' },
+        { label: 'Offset Shadow', value: 'v1' },
+        { label: 'Gradient Sheen', value: 'v2' },
+        { label: 'Contrast Sweep', value: 'v3' },
+        { label: 'Reveal Panel', value: 'v5' },
+        { label: 'Underline Accent', value: 'v7' }
+      ],
+      admin: {
+        description: 'Selects the local ButtonAccord visual treatment for every accordion title button.',
+        width: '50%'
+      }
+    },    {
+      name: 'items',
+      type: 'array',
+      label: 'Accordion Items',
+      required: true,
+      fields: [
+        {
+          name: 'title',
+          label: 'Accordian Title',
+          type: 'richText',
+          editor: defaultLexical,
+          required: false
+        },
+        {
+          name: 'content',
+          label: 'Accordian Content',
+          type: 'richText',
+          editor: defaultLexical,
+          required: false
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,75 @@
+{
+  "type": "block",
+  "name": "DD-Accordion",
+  "label": "Accordion",
+  "sourceName": "AccordionBlock",
+  "portableName": "DD-Accordion",
+  "slug": "DD-Accordion",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/AccordionBlock",
+    "originalSlug": "accordion",
+    "originalConfigExport": "AccordionBlock",
+    "originalComponentExport": "AccordionBlock",
+    "originalInterfaceName": "DDAccordion"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-Accordion/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-Accordion/config.ts"
+    }
+  ],
+  "dependencies": [
+    "lucide-react",
+    "class-variance-authority"
+  ],
+  "sharedFiles": [],
+  "requiredProjectFiles": [],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDAccordion in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Accordion in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "manualSteps": [
+    "Register DDAccordion in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Accordion in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can add import { DDAccordion } from '@/blocks/DD-Accordion/config' and add DDAccordion to clear Pages/Posts block arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-Accordion in RenderBlocks."
+    }
+  },
+  "notes": [
+    "Accordion uses inline ButtonAccord and AccordionSeparator so it does not install shared button or separator files.",
+    "Title RichText supports animated text and banner blocks only to avoid nested button hydration issues."
+  ],
+  "exportName": "DDAccordion",
+  "interfaceName": "DDAccordion"
+}