blocks-dusted 0.1.12 → 0.1.13

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

@@ -0,0 +1,85 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import { materialSources, previewDocument, type Swatch } from './material'
+export type { Swatch, SwatchLayer } from './material'
+export type MaterialSwatchesProps = { heading?: string; swatches: Swatch[] }
+
+function CopyButton({ text, label }: { text: string; label: string }) {
+  const [status, setStatus] = useState('')
+  useEffect(() => {
+    if (!status) return
+    const timer = setTimeout(() => setStatus(''), 2000)
+    return () => clearTimeout(timer)
+  }, [status])
+  return (
+    <button
+      type="button"
+      className="rounded border border-current/20 px-2 py-1 text-xs hover:bg-current/10"
+      onClick={async () => {
+        try {
+          await navigator.clipboard.writeText(text)
+          setStatus('Copied')
+        } catch {
+          setStatus('Copy failed')
+        }
+      }}
+      aria-label={label}
+    >
+      <span aria-live="polite">{status || label}</span>
+    </button>
+  )
+}
+
+function MaterialSample({ swatch, stylesheets }: { swatch: Swatch; stylesheets: string[] }) {
+  const source = materialSources(swatch)
+  const bundle = `${source.html}${source.css ? `\n\n<style>\n${source.css}\n</style>` : ''}`
+  return (
+    <div className="min-w-0">
+      <iframe
+        title={`${swatch.swatchName} material preview`}
+        sandbox=""
+        srcDoc={previewDocument(swatch, stylesheets)}
+        className="h-56 w-full rounded-lg border-0 bg-white/5"
+      />
+      <div className="mt-3 flex flex-wrap items-center gap-2">
+        <span className="mr-auto text-sm font-medium">{swatch.swatchName}</span>
+        {source.color && <CopyButton text={source.color} label="Copy color" />}
+        {source.css && <CopyButton text={source.css} label="Copy CSS" />}
+        {source.classes && <CopyButton text={source.classes} label="Copy classes" />}
+        <CopyButton text={source.html} label="Copy HTML" />
+        <CopyButton text={bundle} label="Copy all" />
+        {source.textureURL && <CopyButton text={source.textureURL} label="Copy texture URL" />}
+      </div>
+      <details className="mt-2 text-xs opacity-80">
+        <summary className="cursor-pointer py-1">Source</summary>
+        <pre className="mt-2 max-h-64 overflow-auto rounded bg-black/10 p-3">
+          <code>{bundle}</code>
+        </pre>
+      </details>
+    </div>
+  )
+}
+
+export function DDMaterialSwatches({ heading, swatches }: MaterialSwatchesProps) {
+  const [stylesheets, setStylesheets] = useState<string[]>([])
+  useEffect(() => {
+    setStylesheets(
+      Array.from(document.querySelectorAll<HTMLLinkElement>('link[rel="stylesheet"]')).map(
+        (link) => link.href,
+      ),
+    )
+  }, [])
+  if (!swatches?.length) return null
+  return (
+    <section className="w-full mt-16 px-4 py-10">
+      {heading && <h2 className="mb-6 text-lg font-semibold tracking-tight">{heading}</h2>}
+      <div className="grid gap-x-6 gap-y-10 sm:grid-cols-2 xl:grid-cols-4">
+        {swatches.map((swatch, index) => (
+          <MaterialSample key={index} swatch={swatch} stylesheets={stylesheets} />
+        ))}
+      </div>
+    </section>
+  )
+}
+export default DDMaterialSwatches

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

@@ -0,0 +1,232 @@
+import type { Block, Field } from 'payload'
+
+// Recursive layer field — Payload doesn't support true infinite recursion,
+// so we define three levels of depth which covers virtually all real swatch
+// compositions (root → wrapper → leaf).
+
+const layerFields = (suffix: string): Field[] => [
+  {
+    name: 'name',
+    type: 'text',
+    label: 'Layer name',
+    required: true,
+    admin: {
+      description: 'Human-readable label shown in the UI (e.g. "Blend Wrapper", "Top Glow").',
+    },
+  },
+  {
+    name: 'element',
+    type: 'select',
+    dbName: `el_${suffix}`,
+    label: 'Element type',
+    required: true,
+    defaultValue: 'div',
+    options: [
+      { label: 'div', value: 'div' },
+      { label: 'span', value: 'span' },
+      { label: 'button', value: 'button' },
+      { label: 'a', value: 'a' },
+      { label: 'section', value: 'section' },
+      { label: 'article', value: 'article' },
+      { label: 'p', value: 'p' },
+      { label: 'li', value: 'li' },
+      { label: 'ul', value: 'ul' },
+    ],
+  },
+  {
+    name: 'className',
+    type: 'textarea',
+    label: 'Tailwind className',
+    admin: {
+      description:
+        'Paste the full class string. All modifiers (!, hover:, data-[...]:, arbitrary values) are preserved as-is.',
+    },
+  },
+  {
+    name: 'attributes',
+    type: 'array',
+    label: 'HTML attributes',
+    admin: {
+      description: 'Extra attributes such as data-state="active" or aria-label="...".',
+    },
+    fields: [
+      {
+        name: 'key',
+        type: 'text',
+        label: 'Attribute name',
+        required: true,
+      },
+      {
+        name: 'value',
+        type: 'text',
+        label: 'Attribute value',
+        required: true,
+      },
+    ],
+  },
+  {
+    name: 'content',
+    type: 'text',
+    label: 'Visible text content',
+    admin: {
+      description: 'Optional inner text for label/button/link layers.',
+    },
+  },
+]
+
+// Level-3 leaf layers (no further children)
+const level3LayerFields: Field[] = layerFields('l3')
+
+// Level-2 layers — can contain level-3 children
+const level2LayerFields: Field[] = [
+  ...layerFields('l2'),
+  {
+    name: 'sub',
+    type: 'array',
+    label: 'Child layers',
+    fields: level3LayerFields,
+  },
+]
+
+// Level-1 layers — can contain level-2 children
+const level1LayerFields: Field[] = [
+  ...layerFields('l1'),
+  {
+    name: 'nodes',
+    type: 'array',
+    label: 'Child layers',
+    fields: level2LayerFields,
+  },
+]
+
+export const DDMaterialSwatches: Block = {
+  slug: 'DD-MaterialSwatches',
+  dbName: 'dd_ms',
+  interfaceName: 'DDMaterialSwatches',
+  labels: {
+    singular: 'Material Swatches',
+    plural: 'Material Swatches',
+  },
+  fields: [
+    {
+      name: 'heading',
+      type: 'text',
+      label: 'Section heading',
+      admin: {
+        description: 'Optional heading shown above the swatch grid.',
+      },
+    },
+    {
+      name: 'swatches',
+      type: 'array',
+      label: 'Swatches',
+      required: true,
+      minRows: 1,
+      fields: [
+        {
+          name: 'swatchName',
+          type: 'text',
+          label: 'Swatch name',
+          required: true,
+        },
+        {
+          name: 'materialCSS',
+          type: 'code',
+          label: 'CSS',
+          admin: {
+            language: 'css',
+            description:
+              'Paste complete CSS rules, including hover states, pseudo-elements and keyframes. Use .material for the default surface.',
+          },
+        },
+        {
+          name: 'materialHTML',
+          type: 'code',
+          label: 'Layered HTML',
+          admin: {
+            language: 'html',
+            description:
+              'Optional HTML with all nested layers. Leave empty for a plain surface. Scripts are disabled in previews.',
+          },
+        },
+        {
+          name: 'colorValue',
+          type: 'text',
+          label: 'Color or background value',
+          admin: {
+            description:
+              'A CSS color, gradient, or comma-separated stack of gradients. Copied exactly as entered.',
+          },
+        },
+        {
+          name: 'texture',
+          type: 'upload',
+          relationTo: 'media',
+          label: 'Texture image',
+        },
+        // Root layer
+        {
+          name: 'rootElement',
+          type: 'select',
+          dbName: 'root_el',
+          label: 'Root element type',
+          required: true,
+          defaultValue: 'div',
+          options: [
+            { label: 'div', value: 'div' },
+            { label: 'span', value: 'span' },
+            { label: 'button', value: 'button' },
+            { label: 'a', value: 'a' },
+            { label: 'section', value: 'section' },
+            { label: 'article', value: 'article' },
+            { label: 'p', value: 'p' },
+          ],
+        },
+        {
+          name: 'rootClassName',
+          type: 'textarea',
+          label: 'Root className',
+          admin: {
+            description:
+              'Reusable classes for the root. Include their CSS above if they are not already compiled into this project.',
+          },
+        },
+        {
+          name: 'rootAttributes',
+          type: 'array',
+          label: 'Root attributes',
+          fields: [
+            {
+              name: 'key',
+              type: 'text',
+              label: 'Attribute name',
+              required: true,
+            },
+            {
+              name: 'value',
+              type: 'text',
+              label: 'Attribute value',
+              required: true,
+            },
+          ],
+        },
+        {
+          name: 'rootContent',
+          type: 'text',
+          label: 'Root visible text (if any)',
+        },
+        // Direct children of root
+        {
+          name: 'layers',
+          type: 'array',
+          label: 'Child layers',
+          admin: {
+            description:
+              'Direct children of the root element. Each layer can contain its own children.',
+          },
+          fields: level1LayerFields,
+        },
+      ],
+    },
+  ],
+}

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

@@ -0,0 +1,84 @@
+{
+  "type": "block",
+  "name": "DD-MaterialSwatches",
+  "label": "Material Swatches",
+  "sourceName": "DD-MaterialSwatches",
+  "portableName": "DD-MaterialSwatches",
+  "slug": "DD-MaterialSwatches",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/Dusted-Payload-Blocks",
+    "originalPath": "CLI-TestGround/dusted-blocks-demo/src/blocks/DD-MaterialSwatches",
+    "originalSlug": "DD-MaterialSwatches",
+    "originalConfigExport": "DDMaterialSwatches",
+    "originalComponentExport": "DDMaterialSwatches",
+    "originalInterfaceName": "DDMaterialSwatches"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-MaterialSwatches/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-MaterialSwatches/config.ts"
+    },
+    {
+      "from": "material.ts",
+      "to": "src/blocks/DD-MaterialSwatches/material.ts"
+    }
+  ],
+  "dependencies": [],
+  "sharedFiles": [],
+  "requiredProjectFiles": [
+    {
+      "path": "src/payload-types.ts",
+      "reason": "Material helper uses the generated Media type."
+    }
+  ],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDMaterialSwatches in Pages/Posts block arrays if automatic registration was skipped.",
+    "Register DD-MaterialSwatches 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 DDMaterialSwatches in Pages/Posts block arrays if automatic registration was skipped.",
+    "Register DD-MaterialSwatches 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 DDMaterialSwatches from @/blocks/DD-MaterialSwatches/config."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-MaterialSwatches with component export DDMaterialSwatches."
+    }
+  },
+  "notes": [
+    "Promoted from the verified Dusted Blocks demo implementation.",
+    "Installer preserves existing destination files and reports project requirements before writing."
+  ],
+  "exportName": "DDMaterialSwatches",
+  "componentExportName": "DDMaterialSwatches",
+  "interfaceName": "DDMaterialSwatches"
+}

package/templates/blocks/DD-MaterialSwatches/material.ts

@@ -0,0 +1,107 @@
+import type { Media } from '@/payload-types'
+
+export type Attr = { key: string; value: string }
+export type SwatchLayer = {
+  name: string
+  element: string
+  className?: string
+  attributes?: Attr[]
+  content?: string
+  nodes?: SwatchLayer[]
+  sub?: SwatchLayer[]
+}
+export type Swatch = {
+  swatchName: string
+  rootElement: string
+  rootClassName?: string
+  rootAttributes?: Attr[] | null
+  rootContent?: string | null
+  layers?: SwatchLayer[]
+  materialCSS?: string | null
+  materialHTML?: string | null
+  colorValue?: string | null
+  texture?: number | Media | null
+}
+
+const escape = (value: string | null | undefined) =>
+  (value ?? '').replaceAll('&', '&')
+    .replaceAll('"', '"')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+const children = (layer: SwatchLayer) => layer.nodes ?? layer.sub ?? []
+const safeTag = (tag: string) =>
+  /^(div|span|button|a|section|article|p|li|ul)$/.test(tag) ? tag : 'div'
+function elementHTML(
+  tag: string,
+  classes = '',
+  attributes: Attr[] | null = [],
+  content: string | null = '',
+  nested = '',
+): string {
+  const name = safeTag(tag)
+  const attrs = (attributes ?? [])
+    .filter(({ key }) => /^(data-[\w-]+|aria-[\w-]+|title|role|style|type)$/.test(key))
+    .map(({ key, value }) => ` ${key}="${escape(value)}"`)
+    .join('')
+  return `<${name}${classes ? ` class="${escape(classes)}"` : ''}${attrs}>${nested}${escape(content)}</${name}>`
+}
+function layerHTML(layer: SwatchLayer): string {
+  return elementHTML(
+    layer.element,
+    layer.className,
+    layer.attributes,
+    layer.content,
+    children(layer).map(layerHTML).join('\n'),
+  )
+}
+export function materialSources(swatch: Swatch) {
+  const textureURL =
+    typeof swatch.texture === 'object' && swatch.texture ? swatch.texture.url : undefined
+  const hasLegacyLayers = Boolean(swatch.layers?.length || swatch.rootContent)
+  const classes = ['material', swatch.rootClassName].filter(Boolean).join(' ')
+  const html =
+    swatch.materialHTML ||
+    elementHTML(
+      swatch.rootElement || 'div',
+      classes,
+      swatch.rootAttributes,
+      swatch.rootContent,
+      swatch.layers?.map(layerHTML).join('\n'),
+    )
+  const declarations = [
+    !hasLegacyLayers && !swatch.materialHTML ? 'min-height: 180px; width: 100%;' : '',
+    swatch.colorValue ? `background: ${swatch.colorValue};` : '',
+    textureURL
+      ? `background-image: url(${JSON.stringify(textureURL)}); background-size: cover;`
+      : '',
+  ]
+    .filter(Boolean)
+    .join('\n  ')
+  const css = [declarations ? `.material {\n  ${declarations}\n}` : '', swatch.materialCSS]
+    .filter(Boolean)
+    .join('\n\n')
+  return {
+    html,
+    css,
+    classes: [
+      ...new Set(
+        Array.from(html.matchAll(/\bclass=["']([^"']*)["']/g))
+          .flatMap((match) => match[1].split(/\s+/))
+          .filter(Boolean),
+      ),
+    ].join(' '),
+    color: swatch.colorValue || '',
+    textureURL,
+  }
+}
+
+export function previewDocument(swatch: Swatch, stylesheets: string[] = []) {
+  const { html, css } = materialSources(swatch)
+  // Sandboxed srcdoc has no script or same-origin permission. CSS is kept inside its document.
+  const policy =
+    "default-src 'none'; img-src http: https: data: blob:; style-src 'unsafe-inline' http: https:; font-src http: https: data:; script-src 'none'; form-action 'none'; base-uri 'none'"
+  return `<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="${policy}">${stylesheets.map((url) => `<link rel="stylesheet" href="${escape(url)}">`).join('')}<style>html,body{margin:0;min-height:100%;opacity:1!important;visibility:visible!important;background:transparent!important;}body{box-sizing:border-box;display:grid;place-items:center;min-height:220px;padding:20px;overflow:hidden;}body>*{max-width:100%;}*,*::before,*::after{box-sizing:border-box;}</style><style>${css.replace(/<\/style/gi, '<\\/style')}</style></head><body>${html}</body></html>`
+}
+
+
+

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

@@ -0,0 +1,129 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+
+import * as React from 'react'
+
+import { RenderBlocks } from './RenderBlocks'
+import { CanvasGrid, type CanvasPanel } from './canvas/CanvasGrid'
+import { Circle } from 'lucide-react'
+import { RadialNav, type RadialNavItem } from './canvas/RadialNav'
+
+import './canvas/canvas-panels.css'
+import './styles.scss'
+
+type CanvasId =
+  | 'canvas_01'
+  | 'canvas_02'
+  | 'canvas_03'
+  | 'canvas_04'
+  | 'canvas_05'
+  | 'canvas_06'
+  | 'canvas_07'
+  | 'canvas_08'
+  | 'canvas_09'
+
+type NineCanvasBlockProps = {
+  sectionId?: string
+  initialCanvas?: CanvasId
+  canvas01?: any[]
+  canvas02?: any[]
+  canvas03?: any[]
+  canvas04?: any[]
+  canvas05?: any[]
+  canvas06?: any[]
+  canvas07?: any[]
+  canvas08?: any[]
+  canvas09?: any[]
+}
+
+const canvasMeta = [
+  { id: 'canvas_01', key: 'canvas01', x: -1, y: 1, label: 'Canvas 1' },
+  { id: 'canvas_02', key: 'canvas02', x: 0, y: 1, label: 'Canvas 2' },
+  { id: 'canvas_03', key: 'canvas03', x: 1, y: 1, label: 'Canvas 3' },
+  { id: 'canvas_04', key: 'canvas04', x: -1, y: 0, label: 'Canvas 4' },
+  { id: 'canvas_05', key: 'canvas05', x: 0, y: 0, label: 'Canvas 5' },
+  { id: 'canvas_06', key: 'canvas06', x: 1, y: 0, label: 'Canvas 6' },
+  { id: 'canvas_07', key: 'canvas07', x: -1, y: -1, label: 'Canvas 7' },
+  { id: 'canvas_08', key: 'canvas08', x: 0, y: -1, label: 'Canvas 8' },
+  { id: 'canvas_09', key: 'canvas09', x: 1, y: -1, label: 'Canvas 9' },
+] as const
+
+const radialItems: RadialNavItem[] = [
+  { id: 1, icon: Circle, label: 'Canvas 1', angle: -56, canvasId: 'canvas_01' },
+  { id: 2, icon: Circle, label: 'Canvas 2', angle: 0, canvasId: 'canvas_02' },
+  { id: 3, icon: Circle, label: 'Canvas 3', angle: 56, canvasId: 'canvas_03' },
+  { id: 4, icon: Circle, label: 'Canvas 4', angle: 270, canvasId: 'canvas_04' },
+  { id: 6, icon: Circle, label: 'Canvas 6', angle: 90, canvasId: 'canvas_06' },
+  { id: 7, icon: Circle, label: 'Canvas 7', angle: -115, canvasId: 'canvas_07' },
+  { id: 8, icon: Circle, label: 'Canvas 8', angle: 180, canvasId: 'canvas_08' },
+  { id: 9, icon: Circle, label: 'Canvas 9', angle: 115, canvasId: 'canvas_09' },
+]
+
+export function NineCanvasBlock({
+  sectionId,
+  initialCanvas = 'canvas_05',
+  ...props
+}: NineCanvasBlockProps) {
+  const initialPanel = canvasMeta.find((canvas) => canvas.id === initialCanvas) ?? canvasMeta[4]
+  const [activeCanvasId, setActiveCanvasId] = React.useState<CanvasId>(initialPanel.id)
+  const [mountedCanvasIds, setMountedCanvasIds] = React.useState(
+    () => new Set<CanvasId>([initialPanel.id]),
+  )
+
+  const canvases = canvasMeta.map((canvas) => {
+    const blocks = props[canvas.key] || []
+    const hasBlocks = Array.isArray(blocks) && blocks.length > 0
+
+    return {
+      id: canvas.id,
+      x: canvas.x,
+      y: canvas.y,
+      label: canvas.label,
+      content:
+        hasBlocks && mountedCanvasIds.has(canvas.id) ? (
+          <RenderBlocks blocks={blocks as any} />
+        ) : undefined,
+    } satisfies CanvasPanel
+  })
+
+  const activeCanvas = canvases.find((canvas) => canvas.id === activeCanvasId) ?? canvases[4]
+
+  const goToCanvas = (canvasId: string) => {
+    if (!canvases.some((canvas) => canvas.id === canvasId)) return
+
+    setMountedCanvasIds((current) => {
+      if (current.has(canvasId as CanvasId)) return current
+
+      const next = new Set(current)
+      next.add(canvasId as CanvasId)
+      return next
+    })
+    setActiveCanvasId(canvasId as CanvasId)
+  }
+
+  React.useEffect(() => {
+    const handleCanvasChange = (event: Event) => {
+      const canvasId = (event as CustomEvent<{ canvasId?: string }>).detail?.canvasId
+      if (!canvasId) return
+
+      goToCanvas(canvasId)
+    }
+
+    window.addEventListener('ninecanvas:change', handleCanvasChange)
+
+    return () => {
+      window.removeEventListener('ninecanvas:change', handleCanvasChange)
+    }
+  }, [canvases])
+
+  return (
+    <>
+      <RadialNav activeCanvasId={activeCanvas.id} items={radialItems} onCanvasChange={goToCanvas} />
+      <main className="hzNineCanvasBlock hzCanvasRoot overflow-hidden" data-section-id={sectionId}>
+        <CanvasGrid activeCanvas={activeCanvas} canvases={canvases} onCanvasChange={goToCanvas} />
+      </main>
+    </>
+  )
+}
+
+export default NineCanvasBlock