@delmaredigital/payload-puck 0.6.25 → 0.6.27

package/dist/admin/PuckEditorView.d.ts

@@ -1,4 +1,5 @@
 import type { Config as PuckConfig, Data, Plugin as PuckPlugin } from '@puckeditor/core';
+import type { RootPropsMapping } from '../api/types.js';
 /**
  * Props for the PuckEditorView component
  */
@@ -52,6 +53,14 @@ export interface PuckEditorViewProps {
      * Callback on save error
      */
     onSaveError?: (error: Error) => void;
+    /**
+     * Custom root.props ↔ Payload field mappings, merged with the defaults.
+     *
+     * Must match the `rootPropsMapping` passed to the API routes / plugin so the
+     * editor hydrates the same fields it persists on save — otherwise
+     * custom-mapped fields appear to revert after publish.
+     */
+    rootPropsMapping?: RootPropsMapping[];
 }
 /**
  * Ready-to-use Puck editor page component
@@ -80,5 +89,5 @@ export interface PuckEditorViewProps {
  * }
  * ```
  */
-export declare function PuckEditorView({ config, collectionSlug, apiBasePath, backUrl, previewUrl, layoutStyles, layoutKey, plugins, onSaveSuccess, onSaveError, }: PuckEditorViewProps): import("react").JSX.Element;
+export declare function PuckEditorView({ config, collectionSlug, apiBasePath, backUrl, previewUrl, layoutStyles, layoutKey, plugins, onSaveSuccess, onSaveError, rootPropsMapping, }: PuckEditorViewProps): import("react").JSX.Element;
 export default PuckEditorView;

package/dist/admin/PuckEditorView.js

@@ -29,7 +29,7 @@ import { mapPayloadFieldsToRootProps } from '../api/utils/mapRootProps.js';
  *   )
  * }
  * ```
- */ export function PuckEditorView({ config, collectionSlug = 'pages', apiBasePath = '/api/puck', backUrl, previewUrl, layoutStyles, layoutKey = 'pageLayout', plugins, onSaveSuccess, onSaveError }) {
+ */ export function PuckEditorView({ config, collectionSlug = 'pages', apiBasePath = '/api/puck', backUrl, previewUrl, layoutStyles, layoutKey = 'pageLayout', plugins, onSaveSuccess, onSaveError, rootPropsMapping }) {
     const params = useParams();
     const searchParams = useSearchParams();
     // Get page ID from route params or search params
@@ -203,7 +203,7 @@ import { mapPayloadFieldsToRootProps } from '../api/utils/mapRootProps.js';
     // Hydrate root.props from Payload fields — ensures saved values like pageLayout,
     // isHomepage, conversion settings etc. are reflected in the editor UI even if
     // they weren't stored in puckData (Puck may strip props that match defaults)
-    const payloadRootProps = mapPayloadFieldsToRootProps(page);
+    const payloadRootProps = mapPayloadFieldsToRootProps(page, rootPropsMapping);
     const initialData = {
         ...basePuckData,
         root: {

package/dist/ai/presets/componentAiDefaults.js

@@ -153,6 +153,23 @@
             }
         }
     },
+    Columns: {
+        ai: {
+            instructions: 'Use when content must be targeted into specific columns (each column is its own drop zone), e.g. a text column beside an image column. For content that just flows across equal cells, prefer Grid.'
+        },
+        fields: {
+            count: {
+                ai: {
+                    instructions: 'Number of columns, 2-4.'
+                }
+            },
+            distribution: {
+                ai: {
+                    instructions: "Column width split. 'equal' for even columns, or an fr ratio like '2:1' / '1:2' / '1:1:2' for asymmetric layouts (must match the column count)."
+                }
+            }
+        }
+    },
     // Content Components
     Card: {
         ai: {

package/dist/components/exports.d.ts

@@ -25,6 +25,7 @@
 export { ContainerConfig } from './layout/Container.js';
 export { FlexConfig } from './layout/Flex.js';
 export { GridConfig } from './layout/Grid.js';
+export { ColumnsConfig } from './layout/Columns.js';
 export { SectionConfig } from './layout/Section.js';
 export { SpacerConfig } from './layout/Spacer.js';
 export { TemplateConfig } from './layout/Template.js';
@@ -40,6 +41,7 @@ export { AccordionConfig } from './interactive/Accordion.js';
 export { ContainerConfig as ContainerServerConfig } from './layout/Container.server.js';
 export { FlexConfig as FlexServerConfig } from './layout/Flex.server.js';
 export { GridConfig as GridServerConfig } from './layout/Grid.server.js';
+export { ColumnsConfig as ColumnsServerConfig } from './layout/Columns.server.js';
 export { SectionConfig as SectionServerConfig } from './layout/Section.server.js';
 export { SpacerConfig as SpacerServerConfig } from './layout/Spacer.server.js';
 export { TemplateServerConfig } from './layout/Template.server.js';

package/dist/components/exports.js

@@ -29,6 +29,7 @@
 export { ContainerConfig } from './layout/Container.js';
 export { FlexConfig } from './layout/Flex.js';
 export { GridConfig } from './layout/Grid.js';
+export { ColumnsConfig } from './layout/Columns.js';
 export { SectionConfig } from './layout/Section.js';
 export { SpacerConfig } from './layout/Spacer.js';
 export { TemplateConfig } from './layout/Template.js';
@@ -53,6 +54,7 @@ export { AccordionConfig } from './interactive/Accordion.js';
 export { ContainerConfig as ContainerServerConfig } from './layout/Container.server.js';
 export { FlexConfig as FlexServerConfig } from './layout/Flex.server.js';
 export { GridConfig as GridServerConfig } from './layout/Grid.server.js';
+export { ColumnsConfig as ColumnsServerConfig } from './layout/Columns.server.js';
 export { SectionConfig as SectionServerConfig } from './layout/Section.server.js';
 export { SpacerConfig as SpacerServerConfig } from './layout/Spacer.server.js';
 export { TemplateServerConfig } from './layout/Template.server.js';

package/dist/components/layout/Columns.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Columns Component - Puck Configuration (editor)
+ *
+ * Unlike Grid (a single CSS-grid slot where children auto-place into cells),
+ * Columns exposes one independent drop zone PER column — components can be
+ * dropped into a specific column. Puck slots are static named fields, so a fixed
+ * maximum set of column slots (column1..columnN) is declared and only the first
+ * `count` are rendered.
+ *
+ * Responsive: stacks vertically on mobile, switches to a CSS grid at md+ (≥768px).
+ *
+ * Width distribution supports equal columns or fr ratios (e.g. 2:1, 1:2, 1:1:2)
+ * for asymmetric layouts.
+ */
+import type { ComponentConfig } from '@puckeditor/core';
+import { type PaddingValue, type BorderValue, type DimensionsValue, type BackgroundValue, type AnimationValue, type ResponsiveValue, type VisibilityValue } from '../../fields/shared.js';
+export declare const MAX_COLUMNS = 4;
+export type ColumnCount = 2 | 3 | 4;
+export interface ColumnsProps {
+    column1: unknown;
+    column2: unknown;
+    column3: unknown;
+    column4: unknown;
+    count: ColumnCount;
+    distribution: string;
+    gap: number;
+    background: BackgroundValue | null;
+    customPadding: ResponsiveValue<PaddingValue> | PaddingValue | null;
+    dimensions: ResponsiveValue<DimensionsValue> | DimensionsValue | null;
+    border: BorderValue | null;
+    margin: ResponsiveValue<PaddingValue> | PaddingValue | null;
+    animation: AnimationValue | null;
+    visibility: VisibilityValue | null;
+}
+/**
+ * Resolve `grid-template-columns` from the column count and distribution preset.
+ * Falls back to equal widths when the ratio's segment count doesn't match.
+ */
+export declare function resolveColumnsTemplate(count: number, distribution: string): string;
+export declare const ColumnsConfig: ComponentConfig;

package/dist/components/layout/Columns.js

@@ -0,0 +1,274 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Columns Component - Puck Configuration (editor)
+ *
+ * Unlike Grid (a single CSS-grid slot where children auto-place into cells),
+ * Columns exposes one independent drop zone PER column — components can be
+ * dropped into a specific column. Puck slots are static named fields, so a fixed
+ * maximum set of column slots (column1..columnN) is declared and only the first
+ * `count` are rendered.
+ *
+ * Responsive: stacks vertically on mobile, switches to a CSS grid at md+ (≥768px).
+ *
+ * Width distribution supports equal columns or fr ratios (e.g. 2:1, 1:2, 1:1:2)
+ * for asymmetric layouts.
+ */ import { useId } from 'react';
+import { cn, dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, borderValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS } from '../../fields/shared.js';
+import { AnimatedWrapper } from '../AnimatedWrapper.js';
+import { createPaddingField } from '../../fields/PaddingField.js';
+import { createBorderField } from '../../fields/BorderField.js';
+import { createDimensionsField } from '../../fields/DimensionsField.js';
+import { createMarginField } from '../../fields/MarginField.js';
+import { createResetField } from '../../fields/ResetField.js';
+import { createBackgroundField } from '../../fields/BackgroundField.js';
+import { createAnimationField } from '../../fields/AnimationField.js';
+import { createResponsiveField } from '../../fields/ResponsiveField.js';
+import { createResponsiveVisibilityField } from '../../fields/ResponsiveVisibilityField.js';
+export const MAX_COLUMNS = 4;
+const DEFAULT_PADDING = {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    unit: 'px',
+    linked: true
+};
+const DEFAULT_DIMENSIONS = {
+    mode: 'full',
+    alignment: 'center',
+    maxWidth: {
+        value: 100,
+        unit: '%',
+        enabled: true
+    }
+};
+const defaultProps = {
+    column1: [],
+    column2: [],
+    column3: [],
+    column4: [],
+    count: 2,
+    distribution: 'equal',
+    gap: 24,
+    background: null,
+    customPadding: null,
+    dimensions: null,
+    border: null,
+    margin: null,
+    animation: null,
+    visibility: null
+};
+/**
+ * Resolve `grid-template-columns` from the column count and distribution preset.
+ * Falls back to equal widths when the ratio's segment count doesn't match.
+ */ export function resolveColumnsTemplate(count, distribution) {
+    const safeCount = Math.min(Math.max(Math.round(count) || 2, 1), MAX_COLUMNS);
+    if (distribution && distribution !== 'equal') {
+        const parts = distribution.split(':').map((p)=>p.trim());
+        if (parts.length === safeCount && parts.every((p)=>/^\d+(\.\d+)?$/.test(p))) {
+            return parts.map((p)=>`${p}fr`).join(' ');
+        }
+    }
+    return `repeat(${safeCount}, minmax(0, 1fr))`;
+}
+export const ColumnsConfig = {
+    label: 'Columns',
+    fields: {
+        _reset: createResetField({
+            defaultProps
+        }),
+        // One independent drop zone per column. Disallow Section (full-width) inside
+        // a column, matching Grid — it would break the column layout.
+        column1: {
+            type: 'slot',
+            disallow: [
+                'Section'
+            ]
+        },
+        column2: {
+            type: 'slot',
+            disallow: [
+                'Section'
+            ]
+        },
+        column3: {
+            type: 'slot',
+            disallow: [
+                'Section'
+            ]
+        },
+        column4: {
+            type: 'slot',
+            disallow: [
+                'Section'
+            ]
+        },
+        // Responsive visibility control
+        visibility: createResponsiveVisibilityField({
+            label: 'Visibility'
+        }),
+        count: {
+            type: 'select',
+            label: 'Number of Columns',
+            options: [
+                {
+                    label: '2 Columns',
+                    value: 2
+                },
+                {
+                    label: '3 Columns',
+                    value: 3
+                },
+                {
+                    label: '4 Columns',
+                    value: 4
+                }
+            ]
+        },
+        distribution: {
+            type: 'select',
+            label: 'Column Widths',
+            options: [
+                {
+                    label: 'Equal',
+                    value: 'equal'
+                },
+                {
+                    label: '2 : 1 (wide left)',
+                    value: '2:1'
+                },
+                {
+                    label: '1 : 2 (wide right)',
+                    value: '1:2'
+                },
+                {
+                    label: '3 : 1',
+                    value: '3:1'
+                },
+                {
+                    label: '1 : 3',
+                    value: '1:3'
+                },
+                {
+                    label: '2 : 1 : 1',
+                    value: '2:1:1'
+                },
+                {
+                    label: '1 : 2 : 1 (wide center)',
+                    value: '1:2:1'
+                },
+                {
+                    label: '1 : 1 : 2',
+                    value: '1:1:2'
+                }
+            ]
+        },
+        gap: {
+            type: 'number',
+            label: 'Gap (px)',
+            min: 0
+        },
+        background: createBackgroundField({
+            label: 'Background'
+        }),
+        border: createBorderField({
+            label: 'Border'
+        }),
+        dimensions: createResponsiveField({
+            label: 'Dimensions (Responsive)',
+            innerField: (config)=>createDimensionsField(config),
+            defaultValue: DEFAULT_DIMENSIONS
+        }),
+        animation: createAnimationField({
+            label: 'Animation'
+        }),
+        margin: createResponsiveField({
+            label: 'Margin (Responsive)',
+            innerField: (config)=>createMarginField(config),
+            defaultValue: DEFAULT_PADDING
+        }),
+        customPadding: createResponsiveField({
+            label: 'Padding (Responsive)',
+            innerField: (config)=>createPaddingField(config),
+            defaultValue: DEFAULT_PADDING
+        })
+    },
+    defaultProps,
+    render: ({ column1: Column1, column2: Column2, column3: Column3, column4: Column4, count = 2, distribution = 'equal', gap, background, customPadding, dimensions, border, margin, animation, visibility })=>{
+        const safeCount = Math.min(Math.max(Math.round(count) || 2, 1), MAX_COLUMNS);
+        // Generate unique IDs for CSS targeting
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const uniqueId = useId().replace(/:/g, '');
+        const wrapperClass = `puck-columns-${uniqueId}`;
+        const contentClass = `puck-columns-content-${uniqueId}`;
+        const mediaQueries = [];
+        const backgroundStyles = backgroundValueToCSS(background);
+        const wrapperStyles = {
+            ...backgroundStyles
+        };
+        const paddingResult = responsiveValueToCSS(customPadding, (v)=>({
+                padding: paddingValueToCSS(v)
+            }), wrapperClass);
+        Object.assign(wrapperStyles, paddingResult.baseStyles);
+        if (paddingResult.mediaQueryCSS) mediaQueries.push(paddingResult.mediaQueryCSS);
+        const borderStyles = borderValueToCSS(border);
+        if (borderStyles) Object.assign(wrapperStyles, borderStyles);
+        const marginResult = responsiveValueToCSS(margin, (v)=>({
+                margin: marginValueToCSS(v)
+            }), wrapperClass);
+        Object.assign(wrapperStyles, marginResult.baseStyles);
+        if (marginResult.mediaQueryCSS) mediaQueries.push(marginResult.mediaQueryCSS);
+        const dimensionsResult = responsiveValueToCSS(dimensions, dimensionsValueToCSS, contentClass);
+        const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass);
+        if (visibilityCSS) mediaQueries.push(visibilityCSS);
+        const contentClasses = cn('flex flex-col w-full', 'md:grid', contentClass);
+        const contentStyles = {
+            gap,
+            ...dimensionsResult.baseStyles
+        };
+        if (dimensionsResult.mediaQueryCSS) mediaQueries.push(dimensionsResult.mediaQueryCSS);
+        const colsTemplate = resolveColumnsTemplate(safeCount, distribution);
+        const gridStyles = {
+            ...contentStyles,
+            '--cols-template': colsTemplate
+        };
+        const slots = [
+            Column1,
+            Column2,
+            Column3,
+            Column4
+        ];
+        const allMediaQueryCSS = mediaQueries.join('\n');
+        return /*#__PURE__*/ _jsxs(AnimatedWrapper, {
+            animation: animation,
+            children: [
+                allMediaQueryCSS && /*#__PURE__*/ _jsx("style", {
+                    children: allMediaQueryCSS
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: wrapperClass,
+                    style: wrapperStyles,
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            className: contentClasses,
+                            style: gridStyles,
+                            children: slots.slice(0, safeCount).map((Slot, i)=>{
+                                const ColumnSlot = Slot;
+                                return /*#__PURE__*/ _jsx(ColumnSlot, {}, i);
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx("style", {
+                            children: `
+            @media (min-width: 768px) {
+              .${contentClass} {
+                grid-template-columns: var(--cols-template);
+              }
+            }
+          `
+                        })
+                    ]
+                })
+            ]
+        });
+    }
+};

package/dist/components/layout/Columns.server.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Columns Component - Server-safe Puck Configuration
+ *
+ * Unlike Grid (a single slot styled as CSS grid, where children auto-place into
+ * cells), Columns exposes one independent drop zone PER column. Each column is
+ * its own slot, so components can be targeted into a specific column.
+ *
+ * Puck slots are static named fields, so we declare a fixed maximum set of
+ * column slots (column1..columnN) and render only the first `count`.
+ *
+ * Responsive: stacks vertically on mobile (flex column), switches to a CSS grid
+ * at md+ (≥768px), matching the Grid component's behavior.
+ *
+ * This is the server-safe variant (slots only, no editor fields). For the full
+ * editor version with fields, use Columns.tsx
+ */
+import type { ComponentConfig } from '@puckeditor/core';
+import { type PaddingValue, type BorderValue, type DimensionsValue, type BackgroundValue, type AnimationValue, type ResponsiveValue, type VisibilityValue } from '../../fields/shared.js';
+/** Maximum number of column slots the component declares. */
+export declare const MAX_COLUMNS = 4;
+export type ColumnCount = 2 | 3 | 4;
+export interface ColumnsProps {
+    column1: unknown;
+    column2: unknown;
+    column3: unknown;
+    column4: unknown;
+    count: ColumnCount;
+    /**
+     * Column width distribution. 'equal' splits evenly; otherwise a colon-separated
+     * fr ratio (e.g. '2:1', '1:2', '1:1:2'). Ratios whose segment count doesn't
+     * match `count` fall back to equal.
+     */
+    distribution: string;
+    gap: number;
+    background: BackgroundValue | null;
+    customPadding: ResponsiveValue<PaddingValue> | PaddingValue | null;
+    dimensions: ResponsiveValue<DimensionsValue> | DimensionsValue | null;
+    border: BorderValue | null;
+    margin: ResponsiveValue<PaddingValue> | PaddingValue | null;
+    animation: AnimationValue | null;
+    visibility: VisibilityValue | null;
+}
+/**
+ * Resolve the `grid-template-columns` value from the column count and the
+ * distribution preset. Falls back to equal widths when the ratio doesn't match.
+ */
+export declare function resolveColumnsTemplate(count: number, distribution: string): string;
+export declare const ColumnsConfig: ComponentConfig;

package/dist/components/layout/Columns.server.js

@@ -0,0 +1,157 @@
+/**
+ * Columns Component - Server-safe Puck Configuration
+ *
+ * Unlike Grid (a single slot styled as CSS grid, where children auto-place into
+ * cells), Columns exposes one independent drop zone PER column. Each column is
+ * its own slot, so components can be targeted into a specific column.
+ *
+ * Puck slots are static named fields, so we declare a fixed maximum set of
+ * column slots (column1..columnN) and render only the first `count`.
+ *
+ * Responsive: stacks vertically on mobile (flex column), switches to a CSS grid
+ * at md+ (≥768px), matching the Grid component's behavior.
+ *
+ * This is the server-safe variant (slots only, no editor fields). For the full
+ * editor version with fields, use Columns.tsx
+ */ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, borderValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS } from '../../fields/shared.js';
+import { AnimatedWrapper } from '../AnimatedWrapper.js';
+/** Maximum number of column slots the component declares. */ export const MAX_COLUMNS = 4;
+const defaultProps = {
+    column1: [],
+    column2: [],
+    column3: [],
+    column4: [],
+    count: 2,
+    distribution: 'equal',
+    gap: 24,
+    background: null,
+    customPadding: null,
+    dimensions: null,
+    border: null,
+    margin: null,
+    animation: null,
+    visibility: null
+};
+// Simple ID generator for server-side rendering
+let idCounter = 0;
+function generateUniqueId() {
+    return `c${(++idCounter).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
+}
+/**
+ * Resolve the `grid-template-columns` value from the column count and the
+ * distribution preset. Falls back to equal widths when the ratio doesn't match.
+ */ export function resolveColumnsTemplate(count, distribution) {
+    const safeCount = Math.min(Math.max(Math.round(count) || 2, 1), MAX_COLUMNS);
+    if (distribution && distribution !== 'equal') {
+        const parts = distribution.split(':').map((p)=>p.trim());
+        if (parts.length === safeCount && parts.every((p)=>/^\d+(\.\d+)?$/.test(p))) {
+            return parts.map((p)=>`${p}fr`).join(' ');
+        }
+    }
+    return `repeat(${safeCount}, minmax(0, 1fr))`;
+}
+export const ColumnsConfig = {
+    label: 'Columns',
+    fields: {
+        column1: {
+            type: 'slot'
+        },
+        column2: {
+            type: 'slot'
+        },
+        column3: {
+            type: 'slot'
+        },
+        column4: {
+            type: 'slot'
+        }
+    },
+    defaultProps,
+    render: ({ column1: Column1, column2: Column2, column3: Column3, column4: Column4, count = 2, distribution = 'equal', gap, background, customPadding, dimensions, border, margin, animation, visibility })=>{
+        const safeCount = Math.min(Math.max(Math.round(count) || 2, 1), MAX_COLUMNS);
+        // Generate unique IDs for CSS targeting (server-safe)
+        const uniqueId = generateUniqueId();
+        const wrapperClass = `puck-columns-${uniqueId}`;
+        const contentClass = `puck-columns-content-${uniqueId}`;
+        // Collect all media query CSS
+        const mediaQueries = [];
+        // Generate styles from BackgroundValue
+        const backgroundStyles = backgroundValueToCSS(background);
+        const wrapperStyles = {
+            ...backgroundStyles
+        };
+        // Padding (responsive)
+        const paddingResult = responsiveValueToCSS(customPadding, (v)=>({
+                padding: paddingValueToCSS(v)
+            }), wrapperClass);
+        Object.assign(wrapperStyles, paddingResult.baseStyles);
+        if (paddingResult.mediaQueryCSS) mediaQueries.push(paddingResult.mediaQueryCSS);
+        // Border
+        const borderStyles = borderValueToCSS(border);
+        if (borderStyles) Object.assign(wrapperStyles, borderStyles);
+        // Margin (responsive)
+        const marginResult = responsiveValueToCSS(margin, (v)=>({
+                margin: marginValueToCSS(v)
+            }), wrapperClass);
+        Object.assign(wrapperStyles, marginResult.baseStyles);
+        if (marginResult.mediaQueryCSS) mediaQueries.push(marginResult.mediaQueryCSS);
+        // Dimensions (responsive)
+        const dimensionsResult = responsiveValueToCSS(dimensions, dimensionsValueToCSS, contentClass);
+        // Visibility media queries
+        const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass);
+        if (visibilityCSS) mediaQueries.push(visibilityCSS);
+        // Tailwind: flex column on mobile, grid on md+
+        const contentClasses = cn('flex flex-col w-full', 'md:grid', contentClass);
+        const contentStyles = {
+            gap,
+            ...dimensionsResult.baseStyles
+        };
+        if (dimensionsResult.mediaQueryCSS) mediaQueries.push(dimensionsResult.mediaQueryCSS);
+        // grid-template-columns is dynamic, so drive it from a CSS var and scope the
+        // media-query rule to this instance's content class (no cross-instance leak).
+        const colsTemplate = resolveColumnsTemplate(safeCount, distribution);
+        const gridStyles = {
+            ...contentStyles,
+            '--cols-template': colsTemplate
+        };
+        const slots = [
+            Column1,
+            Column2,
+            Column3,
+            Column4
+        ];
+        const allMediaQueryCSS = mediaQueries.join('\n');
+        return /*#__PURE__*/ _jsxs(AnimatedWrapper, {
+            animation: animation,
+            children: [
+                allMediaQueryCSS && /*#__PURE__*/ _jsx("style", {
+                    children: allMediaQueryCSS
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: wrapperClass,
+                    style: wrapperStyles,
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            className: contentClasses,
+                            style: gridStyles,
+                            children: slots.slice(0, safeCount).map((Slot, i)=>{
+                                const ColumnSlot = Slot;
+                                return /*#__PURE__*/ _jsx(ColumnSlot, {}, i);
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx("style", {
+                            children: `
+            @media (min-width: 768px) {
+              .${contentClass} {
+                grid-template-columns: var(--cols-template);
+              }
+            }
+          `
+                        })
+                    ]
+                })
+            ]
+        });
+    }
+};

package/dist/config/config.editor.d.ts

@@ -94,6 +94,7 @@ export declare const editorConfig: {
         Container: ComponentConfig<any>;
         Flex: ComponentConfig<any>;
         Grid: ComponentConfig<any>;
+        Columns: ComponentConfig<any>;
         Section: ComponentConfig<any>;
         Spacer: ComponentConfig<any>;
         Template: ComponentConfig<any>;

package/dist/config/config.editor.js

@@ -6,6 +6,7 @@ import { lockedSlugField, lockedHomepageField } from '../fields/LockedField.js';
 import { ContainerConfig } from '../components/layout/Container.js';
 import { FlexConfig } from '../components/layout/Flex.js';
 import { GridConfig } from '../components/layout/Grid.js';
+import { ColumnsConfig } from '../components/layout/Columns.js';
 import { SectionConfig } from '../components/layout/Section.js';
 import { SpacerConfig } from '../components/layout/Spacer.js';
 import { TemplateConfig } from '../components/layout/Template.js';
@@ -146,6 +147,7 @@ export const editorConfig = {
                 'Container',
                 'Flex',
                 'Grid',
+                'Columns',
                 'Section',
                 'Spacer',
                 'Template'
@@ -181,6 +183,7 @@ export const editorConfig = {
         Container: ContainerConfig,
         Flex: FlexConfig,
         Grid: GridConfig,
+        Columns: ColumnsConfig,
         Section: SectionConfig,
         Spacer: SpacerConfig,
         Template: TemplateConfig,

package/dist/config/index.js

@@ -9,6 +9,7 @@ import { DEFAULT_LAYOUTS, layoutsToOptions } from '../layouts/index.js';
 import { ContainerConfig } from '../components/layout/Container.server.js';
 import { FlexConfig } from '../components/layout/Flex.server.js';
 import { GridConfig } from '../components/layout/Grid.server.js';
+import { ColumnsConfig } from '../components/layout/Columns.server.js';
 import { SectionConfig } from '../components/layout/Section.server.js';
 import { SpacerConfig } from '../components/layout/Spacer.server.js';
 import { TemplateServerConfig } from '../components/layout/Template.server.js';
@@ -75,6 +76,7 @@ import { AccordionConfig } from '../components/interactive/Accordion.server.js';
                     'Container',
                     'Flex',
                     'Grid',
+                    'Columns',
                     'Section',
                     'Spacer',
                     'Template'
@@ -110,6 +112,7 @@ import { AccordionConfig } from '../components/interactive/Accordion.server.js';
             Container: ContainerConfig,
             Flex: FlexConfig,
             Grid: GridConfig,
+            Columns: ColumnsConfig,
             Section: SectionConfig,
             Spacer: SpacerConfig,
             Template: TemplateServerConfig,

package/dist/config/presets.d.ts

@@ -244,6 +244,7 @@ export declare const fullConfig: {
         Container: ComponentConfig<any>;
         Flex: ComponentConfig<any>;
         Grid: ComponentConfig<any>;
+        Columns: ComponentConfig<any>;
         Section: ComponentConfig<any>;
         Spacer: ComponentConfig<any>;
         Template: ComponentConfig<any>;

package/dist/config/presets.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 // Import component configs
-import { ContainerConfig, FlexConfig, GridConfig, SectionConfig, SpacerConfig, TemplateConfig, HeadingConfig, TextConfig, RichTextEditorConfig, ImageConfig, ButtonConfig, CardConfig, DividerConfig, AccordionConfig } from '../components/exports.js';
+import { ContainerConfig, FlexConfig, GridConfig, ColumnsConfig, SectionConfig, SpacerConfig, TemplateConfig, HeadingConfig, TextConfig, RichTextEditorConfig, ImageConfig, ButtonConfig, CardConfig, DividerConfig, AccordionConfig } from '../components/exports.js';
 // Import field factories for root config
 import { createBackgroundField } from '../fields/BackgroundField.js';
 import { lockedSlugField, lockedHomepageField } from '../fields/LockedField.js';
@@ -278,6 +278,7 @@ import { createSlugPreviewField } from '../fields/SlugPreviewField.js';
                 'Container',
                 'Flex',
                 'Grid',
+                'Columns',
                 'Section',
                 'Spacer',
                 'Template'
@@ -313,6 +314,7 @@ import { createSlugPreviewField } from '../fields/SlugPreviewField.js';
         Container: ContainerConfig,
         Flex: FlexConfig,
         Grid: GridConfig,
+        Columns: ColumnsConfig,
         Section: SectionConfig,
         Spacer: SpacerConfig,
         Template: TemplateConfig,

package/dist/endpoints/index.d.ts

@@ -8,8 +8,15 @@
  * Payload's local API, so collection-level access rules are enforced.
  */
 import type { PayloadHandler } from 'payload';
+import type { RootPropsMapping } from '../api/types.js';
 export interface PuckEndpointOptions {
     collections: string[];
+    /**
+     * Custom root.props → Payload field mappings, merged with the defaults.
+     * Lets fields edited via Puck root fields (e.g. conversionTracking) sync
+     * back to their Payload columns on save/publish.
+     */
+    rootPropsMapping?: RootPropsMapping[];
 }
 /**
  * GET /api/puck/:collection

package/dist/endpoints/index.js

@@ -9,6 +9,25 @@
  */ import { APIError } from 'payload';
 import { unsetHomepage, HomepageConflictError } from '../plugin/hooks/isHomepageUnique.js';
 import { resolveLocale } from '../utils/locale.js';
+import { mapRootPropsToPayloadFields, deepMerge } from '../api/utils/mapRootProps.js';
+/**
+ * Merge a Puck save payload's `data` with the Payload fields derived from its
+ * `puckData.root.props`.
+ *
+ * Mapped fields form the base; the explicitly-sent fields (puckData, title,
+ * slug, isHomepage, folder, pageSegment) take precedence. Without this, fields
+ * exposed as Puck root fields (e.g. conversionTracking, meta, pageLayout) are
+ * persisted only inside the puckData blob and never reach their Payload
+ * columns — so they appear to "revert" on publish. Mirrors the sync performed
+ * by createPuckApiRoutesWithId's PATCH handler.
+ */ function applyRootPropsMapping(data, rootPropsMapping) {
+    const rootProps = data?.puckData?.root?.props || {};
+    const mappedFields = mapRootPropsToPayloadFields(rootProps, rootPropsMapping);
+    const merged = {};
+    deepMerge(merged, mappedFields);
+    deepMerge(merged, data);
+    return merged;
+}
 /**
  * GET /api/puck/:collection
  * List all documents in a Puck-enabled collection
@@ -51,7 +70,7 @@ import { resolveLocale } from '../utils/locale.js';
  * POST /api/puck/:collection
  * Create a new document in a Puck-enabled collection
  */ export function createCreateHandler(options) {
-    const { collections } = options;
+    const { collections, rootPropsMapping } = options;
     return async (req)=>{
         try {
             const collection = req.routeParams?.collection;
@@ -65,11 +84,12 @@ import { resolveLocale } from '../utils/locale.js';
             const body = await req.json?.();
             const { _locale, ...data } = body || {};
             const locale = resolveLocale(req, _locale);
+            const createData = applyRootPropsMapping(data, rootPropsMapping);
             const doc = await req.payload.create({
                 collection: collection,
                 req,
                 overrideAccess: false,
-                data,
+                data: createData,
                 draft: true,
                 ...locale ? {
                     locale
@@ -133,7 +153,7 @@ import { resolveLocale } from '../utils/locale.js';
  * PATCH /api/puck/:collection/:id
  * Update a document (supports draft saving, publishing, and homepage swapping)
  */ export function createUpdateHandler(options) {
-    const { collections } = options;
+    const { collections, rootPropsMapping } = options;
     return async (req)=>{
         try {
             const collection = req.routeParams?.collection;
@@ -150,10 +170,17 @@ import { resolveLocale } from '../utils/locale.js';
             const locale = resolveLocale(req, _locale);
             // Determine if this is a publish or draft save
             const shouldPublish = _status === 'published';
+            // Sync Puck root.props → Payload fields (e.g. conversionTracking, meta,
+            // pageLayout) so values edited via Puck root fields persist to their
+            // columns on publish instead of living only inside the puckData blob.
+            const updateData = applyRootPropsMapping(data, rootPropsMapping);
+            updateData._status = shouldPublish ? 'published' : 'draft';
             // Handle homepage swap if requested
             // When swapHomepage is true and isHomepage is being set to true,
-            // we need to unset the current homepage first
-            if (swapHomepage && data.isHomepage === true) {
+            // we need to unset the current homepage first. Read the resolved value
+            // from updateData so this works whether isHomepage arrived as a top-level
+            // field or was mapped in from root.props.
+            if (swapHomepage && updateData.isHomepage === true) {
                 // Find the current homepage
                 const existingHomepage = await req.payload.find({
                     collection: collection,
@@ -190,10 +217,7 @@ import { resolveLocale } from '../utils/locale.js';
                 req,
                 overrideAccess: false,
                 id,
-                data: {
-                    ...data,
-                    _status: shouldPublish ? 'published' : 'draft'
-                },
+                data: updateData,
                 draft: !shouldPublish,
                 context: {
                     // Skip the isHomepage hook if we've already handled the swap

package/dist/plugin/index.js

@@ -105,7 +105,7 @@ import { createContextListHandler, createContextCreateHandler, createContextUpda
  * })
  * ```
  */ export function createPuckPlugin(options = {}) {
-    const { pagesCollection = 'pages', autoGenerateCollection = true, admin: pluginAdminConfig = {}, enableAdminView = true, adminViewPath = '/puck-editor', enableEndpoints = true, pageTreeIntegration, editorStylesheet, editorStylesheetUrls = [], editorStylesheetCompiled, ai: aiConfig, previewUrl } = options;
+    const { pagesCollection = 'pages', autoGenerateCollection = true, admin: pluginAdminConfig = {}, enableAdminView = true, adminViewPath = '/puck-editor', enableEndpoints = true, pageTreeIntegration, editorStylesheet, editorStylesheetUrls = [], editorStylesheetCompiled, ai: aiConfig, previewUrl, rootPropsMapping } = options;
     const { addEditButton = true } = pluginAdminConfig;
     // Parse page-tree integration config
     // - undefined: auto-detect at runtime (null stored, view will check for pageSegment field)
@@ -264,7 +264,8 @@ import { createContextListHandler, createContextCreateHandler, createContextUpda
             pagesCollection
         ];
         const endpointOptions = {
-            collections: puckCollections
+            collections: puckCollections,
+            rootPropsMapping
         };
         // Parameterized endpoint paths that should only exist once (with merged collections)
         const parameterizedPuckPaths = new Set([
@@ -411,6 +412,10 @@ import { createContextListHandler, createContextCreateHandler, createContextUpda
                     pageTree: pageTreeConfig ?? incomingConfig.custom?.puck?.pageTree,
                     editorStylesheets: editorStylesheets.length > 0 ? editorStylesheets : incomingConfig.custom?.puck?.editorStylesheets,
                     previewUrl: previewUrl ?? incomingConfig.custom?.puck?.previewUrl,
+                    // Custom root.props ↔ Payload field mappings. Stored so the editor
+                    // load view can hydrate root.props from the same mappings the save
+                    // endpoints use, keeping the round-trip symmetric for custom fields.
+                    rootPropsMapping: rootPropsMapping ?? incomingConfig.custom?.puck?.rootPropsMapping,
                     ai: aiConfig?.enabled ? {
                         enabled: true,
                         context: aiConfig.context,

package/dist/types/index.d.ts

@@ -3,6 +3,7 @@ import type { Config as PuckConfig, Data as PuckData } from '@puckeditor/core';
 import type { ThemeConfig } from '../theme/types.js';
 import type { LayoutDefinition } from '../layouts/types.js';
 import type { PuckPluginAiConfig } from '../ai/types.js';
+import type { RootPropsMapping } from '../api/types.js';
 /**
  * Admin UI configuration for the Puck plugin
  */
@@ -96,6 +97,16 @@ export interface PuckPluginOptions {
      * @default true
      */
     enableEndpoints?: boolean;
+    /**
+     * Custom mappings from Puck `root.props` to Payload collection fields.
+     *
+     * Merged with the built-in defaults (title, slug, meta.*, pageLayout,
+     * conversionTracking.*, etc.). Applied in both directions: Payload field →
+     * root.prop when loading the editor, and root.prop → Payload field when
+     * saving/publishing, so values edited via Puck root fields persist to their
+     * columns instead of living only inside the puckData blob.
+     */
+    rootPropsMapping?: RootPropsMapping[];
     /**
      * Integration with @delmaredigital/payload-page-tree plugin
      *

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.6.25";
+export declare const VERSION = "0.6.27";

package/dist/version.js

@@ -1,2 +1,2 @@
 // Auto-generated by scripts/generate-version.js - do not edit manually
-export const VERSION = '0.6.25';
+export const VERSION = '0.6.27';

package/dist/views/PuckEditorView.js

@@ -63,6 +63,7 @@ import { mapPayloadFieldsToRootProps } from '../api/utils/mapRootProps.js';
     const aiConfig = payload.config.custom?.puck?.ai;
     const editorStylesheets = payload.config.custom?.puck?.editorStylesheets;
     const previewUrlConfig = payload.config.custom?.puck?.previewUrl;
+    const rootPropsMapping = payload.config.custom?.puck?.rootPropsMapping;
     // Fetch the page data
     // Use depth: 1 if previewUrl is a function (may need relationship data like organization)
     let page = null;
@@ -163,8 +164,10 @@ import { mapPayloadFieldsToRootProps } from '../api/utils/mapRootProps.js';
     };
     if (page) {
         // Map Payload document fields to root.props format
-        // This ensures fields like title, slug, isHomepage, pageLayout are synced
-        const syncedRootProps = mapPayloadFieldsToRootProps(page);
+        // This ensures fields like title, slug, isHomepage, pageLayout are synced.
+        // Pass the configured custom mappings so the load direction mirrors the
+        // save endpoints (otherwise custom-mapped fields would appear to revert).
+        const syncedRootProps = mapPayloadFieldsToRootProps(page, rootPropsMapping);
         // Handle folder ID specially (could be object or string)
         if (pageTreeConfig && page.folder !== undefined) {
             const folderId = typeof page.folder === 'object' ? page.folder?.id : page.folder;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@delmaredigital/payload-puck",
-  "version": "0.6.25",
+  "version": "0.6.27",
   "description": "Puck visual page builder plugin for Payload CMS",
   "type": "module",
   "license": "MIT",
@@ -152,9 +152,9 @@
     }
   },
   "dependencies": {
-    "@puckeditor/cloud-client": "^0.6.0",
-    "@puckeditor/plugin-ai": "^0.6.0",
-    "@puckeditor/plugin-heading-analyzer": "^0.21.1",
+    "@puckeditor/cloud-client": "^0.7.0",
+    "@puckeditor/plugin-ai": "^0.7.0",
+    "@puckeditor/plugin-heading-analyzer": "^0.21.2",
     "@radix-ui/react-popover": "^1.1.15",
     "@tiptap/core": "^3.20.1",
     "@tiptap/extension-color": "^3.20.1",
@@ -173,7 +173,7 @@
   "devDependencies": {
     "@payloadcms/next": "^3.84.1",
     "@payloadcms/ui": "^3.84.1",
-    "@puckeditor/core": "^0.21.1",
+    "@puckeditor/core": "^0.21.2",
     "@swc/cli": "^0.6.0",
     "@swc/core": "^1.15.18",
     "@types/node": "^24.12.0",