@delmaredigital/payload-puck 0.1.3 → 0.2.0

package/README.md

@@ -17,6 +17,7 @@ A PayloadCMS plugin for integrating [Puck](https://puckeditor.com) visual page b
 - [Theming](#theming)
 - [Layouts](#layouts)
 - [API Routes](#api-routes)
+- [SEO Fields](#seo-fields)
 - [Plugin Options](#plugin-options)
 - [Hybrid Integration](#hybrid-integration)
 - [License](#license)
@@ -1363,6 +1364,82 @@ createPuckApiRoutesWithId({
 
 ---
 
+<details>
+<summary><strong>SEO Fields</strong> — Robots meta, sitemap integration</summary>
+
+The plugin adds SEO-related fields to each page in the `meta` group:
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `meta.title` | text | Page title for search engines |
+| `meta.description` | textarea | Meta description |
+| `meta.image` | upload | Social sharing image |
+| `meta.noindex` | checkbox | Prevent search engine indexing |
+| `meta.nofollow` | checkbox | Prevent search engines from following links |
+| `meta.excludeFromSitemap` | checkbox | Exclude page from XML sitemap |
+
+**These fields are not automatically wired to your frontend.** You need to implement them based on your setup.
+
+### Robots Meta (Next.js App Router)
+
+In your page's `generateMetadata` function:
+
+```typescript
+// app/(frontend)/[...slug]/page.tsx
+export async function generateMetadata({ params }): Promise<Metadata> {
+  const page = await getPage(params.slug)
+
+  return {
+    title: page.meta?.title || page.title,
+    description: page.meta?.description,
+    robots: {
+      index: !page.meta?.noindex,
+      follow: !page.meta?.nofollow,
+    },
+  }
+}
+```
+
+### Dynamic Sitemap
+
+Filter out pages marked as excluded in your `sitemap.ts`:
+
+```typescript
+// app/sitemap.ts
+import type { MetadataRoute } from 'next'
+import { getPayload } from 'payload'
+import config from '@payload-config'
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  const baseUrl = 'https://yoursite.com'
+  const payload = await getPayload({ config })
+
+  const { docs: pages } = await payload.find({
+    collection: 'pages',
+    limit: 1000,
+    where: {
+      or: [
+        { 'meta.excludeFromSitemap': { equals: false } },
+        { 'meta.excludeFromSitemap': { exists: false } },
+      ],
+    },
+    select: {
+      slug: true,
+      updatedAt: true,
+    },
+  })
+
+  return pages.map((page) => ({
+    url: `${baseUrl}/${page.slug}`,
+    lastModified: new Date(page.updatedAt),
+  }))
+}
+```
+
+</details>
+
+---
+
 <details>
 <summary><strong>Plugin Options</strong> — Collection config, access control</summary>
 

package/dist/AccordionClient.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as ColorValue, P as PaddingValue, B as BackgroundValue, D as DimensionsValue, T as TransformValue, A as AnimationValue } from './shared-DeNKN95N.mjs';
+import { C as ColorValue, P as PaddingValue, B as BackgroundValue, D as DimensionsValue, T as TransformValue, A as AnimationValue } from './shared-X9UpCJKW.mjs';
 import 'react';
 import '@measured/puck';
 

package/dist/AccordionClient.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as ColorValue, P as PaddingValue, B as BackgroundValue, D as DimensionsValue, T as TransformValue, A as AnimationValue } from './shared-DeNKN95N.js';
+import { C as ColorValue, P as PaddingValue, B as BackgroundValue, D as DimensionsValue, T as TransformValue, A as AnimationValue } from './shared-X9UpCJKW.js';
 import 'react';
 import '@measured/puck';
 

package/dist/AccordionClient.js

@@ -767,9 +767,9 @@ function AccordionClient({
     Object.assign(style, transformStyles);
   }
   if (!items || items.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4", style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: accordionClasses, style: accordionStyle, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center text-muted-foreground", children: "No accordion items. Add items in the editor." }) }) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: accordionClasses, style: accordionStyle, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center text-muted-foreground", children: "No accordion items. Add items in the editor." }) }) }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4", style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: accordionClasses, style: accordionStyle, children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: accordionClasses, style: accordionStyle, children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
     AccordionItem,
     {
       item,

package/dist/AccordionClient.mjs

@@ -765,9 +765,9 @@ function AccordionClient({
     Object.assign(style, transformStyles);
   }
   if (!items || items.length === 0) {
-    return /* @__PURE__ */ jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsx("div", { className: "px-4", style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsx("div", { className: accordionClasses, style: accordionStyle, children: /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-muted-foreground", children: "No accordion items. Add items in the editor." }) }) }) });
+    return /* @__PURE__ */ jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsx("div", { style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsx("div", { className: accordionClasses, style: accordionStyle, children: /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-muted-foreground", children: "No accordion items. Add items in the editor." }) }) }) });
   }
-  return /* @__PURE__ */ jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsx("div", { className: "px-4", style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsx("div", { className: accordionClasses, style: accordionStyle, children: items.map((item, index) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsx("div", { style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsx("div", { className: accordionClasses, style: accordionStyle, children: items.map((item, index) => /* @__PURE__ */ jsx(
     AccordionItem,
     {
       item,

package/dist/AnimatedWrapper.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, CSSProperties, ElementType } from 'react';
-import { A as AnimationValue } from './shared-DeNKN95N.mjs';
+import { A as AnimationValue } from './shared-X9UpCJKW.mjs';
 import '@measured/puck';
 
 interface AnimatedWrapperProps {

package/dist/AnimatedWrapper.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, CSSProperties, ElementType } from 'react';
-import { A as AnimationValue } from './shared-DeNKN95N.js';
+import { A as AnimationValue } from './shared-X9UpCJKW.js';
 import '@measured/puck';
 
 interface AnimatedWrapperProps {

package/dist/components/index.d.mts

@@ -1,5 +1,5 @@
 import { ComponentConfig } from '@measured/puck';
-import { R as ResponsiveValue, D as DimensionsValue, P as PaddingValue, V as VisibilityValue } from '../shared-DeNKN95N.mjs';
+import { R as ResponsiveValue, D as DimensionsValue, P as PaddingValue, V as VisibilityValue } from '../shared-X9UpCJKW.mjs';
 export { AnimatedWrapper, AnimatedWrapperProps } from '../AnimatedWrapper.mjs';
 import 'react/jsx-runtime';
 import 'react';
@@ -7,18 +7,15 @@ import 'react';
 /**
  * Container Component - Puck Configuration
  *
- * Content wrapper with max-width and background options.
+ * Simple organizational wrapper for grouping content.
  * Uses Puck's slot system for nesting other components.
- * Uses Tailwind classes for layout, inline styles for dynamic user values.
  *
- * Supports both preset options and advanced custom styling:
- * - Outer (Section): background, customPadding, border (applies to full-width wrapper)
- * - Inner (Content): innerBackground, innerPadding, innerBorder (applies to max-width container)
+ * For two-layer layouts (full-bleed background with constrained content),
+ * use the Section component instead.
  *
  * Responsive Controls:
- * - dimensions: Different max-width at different breakpoints
- * - customPadding: Different outer padding at different breakpoints
- * - innerPadding: Different inner padding at different breakpoints
+ * - dimensions: Different max-width/min-height at different breakpoints
+ * - padding: Different padding at different breakpoints
  * - margin: Different margins at different breakpoints
  * - visibility: Show/hide at different breakpoints
  */
@@ -65,18 +62,18 @@ declare const GridConfig: ComponentConfig;
 /**
  * Section Component - Puck Configuration
  *
- * Full-width section with background options and content slot.
- * Used as a top-level page section wrapper.
- * Uses Tailwind classes for layout, inline styles for dynamic user values.
+ * Full-width section with two-layer architecture:
+ * - Section layer (outer): Full-bleed background, border, padding, margin
+ * - Content layer (inner): Constrained content area with max-width, background, border, padding
  *
- * Supports both preset options and advanced custom styling:
- * - Background: unified BackgroundField (solid, gradient, or image)
- * - Advanced: customPadding, customWidth, border
+ * This design enables common patterns like hero sections with full-bleed backgrounds
+ * but centered content.
  *
  * Responsive Controls:
- * - dimensions: Different dimensions at different breakpoints
- * - customPadding: Different padding at different breakpoints
- * - margin: Different margins at different breakpoints
+ * - contentDimensions: Different max-width/min-height at different breakpoints
+ * - sectionPadding: Different section padding at different breakpoints
+ * - contentPadding: Different content padding at different breakpoints
+ * - sectionMargin: Different margins at different breakpoints
  * - visibility: Show/hide at different breakpoints
  */
 

package/dist/components/index.d.ts

@@ -1,5 +1,5 @@
 import { ComponentConfig } from '@measured/puck';
-import { R as ResponsiveValue, D as DimensionsValue, P as PaddingValue, V as VisibilityValue } from '../shared-DeNKN95N.js';
+import { R as ResponsiveValue, D as DimensionsValue, P as PaddingValue, V as VisibilityValue } from '../shared-X9UpCJKW.js';
 export { AnimatedWrapper, AnimatedWrapperProps } from '../AnimatedWrapper.js';
 import 'react/jsx-runtime';
 import 'react';
@@ -7,18 +7,15 @@ import 'react';
 /**
  * Container Component - Puck Configuration
  *
- * Content wrapper with max-width and background options.
+ * Simple organizational wrapper for grouping content.
  * Uses Puck's slot system for nesting other components.
- * Uses Tailwind classes for layout, inline styles for dynamic user values.
  *
- * Supports both preset options and advanced custom styling:
- * - Outer (Section): background, customPadding, border (applies to full-width wrapper)
- * - Inner (Content): innerBackground, innerPadding, innerBorder (applies to max-width container)
+ * For two-layer layouts (full-bleed background with constrained content),
+ * use the Section component instead.
  *
  * Responsive Controls:
- * - dimensions: Different max-width at different breakpoints
- * - customPadding: Different outer padding at different breakpoints
- * - innerPadding: Different inner padding at different breakpoints
+ * - dimensions: Different max-width/min-height at different breakpoints
+ * - padding: Different padding at different breakpoints
  * - margin: Different margins at different breakpoints
  * - visibility: Show/hide at different breakpoints
  */
@@ -65,18 +62,18 @@ declare const GridConfig: ComponentConfig;
 /**
  * Section Component - Puck Configuration
  *
- * Full-width section with background options and content slot.
- * Used as a top-level page section wrapper.
- * Uses Tailwind classes for layout, inline styles for dynamic user values.
+ * Full-width section with two-layer architecture:
+ * - Section layer (outer): Full-bleed background, border, padding, margin
+ * - Content layer (inner): Constrained content area with max-width, background, border, padding
  *
- * Supports both preset options and advanced custom styling:
- * - Background: unified BackgroundField (solid, gradient, or image)
- * - Advanced: customPadding, customWidth, border
+ * This design enables common patterns like hero sections with full-bleed backgrounds
+ * but centered content.
  *
  * Responsive Controls:
- * - dimensions: Different dimensions at different breakpoints
- * - customPadding: Different padding at different breakpoints
- * - margin: Different margins at different breakpoints
+ * - contentDimensions: Different max-width/min-height at different breakpoints
+ * - sectionPadding: Different section padding at different breakpoints
+ * - contentPadding: Different content padding at different breakpoints
+ * - sectionMargin: Different margins at different breakpoints
  * - visibility: Show/hide at different breakpoints
  */