blocks-dusted 0.1.10 → 0.1.11

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.11",
   "description": "Manifest-driven CLI for installing reusable Payload CMS blocks.",
   "type": "module",
   "bin": {

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"
+}