@delmaredigital/payload-puck 0.6.26 → 0.6.28

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,275 @@
+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 { 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);
+        if (dimensionsResult.mediaQueryCSS) mediaQueries.push(dimensionsResult.mediaQueryCSS);
+        // Self-contained CSS grid — does NOT depend on the consumer's Tailwind
+        // generating utility classes. Single column on mobile (stacked); switches to
+        // the multi-column template at >=768px via the scoped media query below.
+        const colsTemplate = resolveColumnsTemplate(safeCount, distribution);
+        const gridStyles = {
+            display: 'grid',
+            gridTemplateColumns: '1fr',
+            gap,
+            ...dimensionsResult.baseStyles,
+            '--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: contentClass,
+                            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,156 @@
+/**
+ * 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 { 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);
+        if (dimensionsResult.mediaQueryCSS) mediaQueries.push(dimensionsResult.mediaQueryCSS);
+        // Self-contained CSS grid — does NOT depend on the consumer's Tailwind
+        // generating utility classes. Single column on mobile (stacked); switches to
+        // the multi-column template at >=768px via the scoped media query below.
+        // grid-template-columns is dynamic, so drive it from a CSS var.
+        const colsTemplate = resolveColumnsTemplate(safeCount, distribution);
+        const gridStyles = {
+            display: 'grid',
+            gridTemplateColumns: '1fr',
+            gap,
+            ...dimensionsResult.baseStyles,
+            '--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: contentClass,
+                            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/Grid.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * - gap: Different gap at different breakpoints
  * - visibility: Show/hide at different breakpoints
  */ import { useId } from 'react';
-import { cn, dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, borderValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS } from '../../fields/shared.js';
+import { 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';
@@ -176,19 +176,18 @@ export const GridConfig = {
         if (visibilityCSS) {
             mediaQueries.push(visibilityCSS);
         }
-        // Tailwind classes for responsive grid: flex column on mobile, grid on md+
-        const contentClasses = cn('flex flex-col w-full', 'md:grid', contentClass);
-        // Dynamic styles that need inline (user-controlled values: gap, columns)
-        const contentStyles = {
-            gap,
-            ...dimensionsResult.baseStyles
-        };
         if (dimensionsResult.mediaQueryCSS) {
             mediaQueries.push(dimensionsResult.mediaQueryCSS);
         }
-        // Grid template columns must be inline since numColumns is dynamic
+        // Self-contained CSS grid — does NOT depend on the consumer's Tailwind
+        // generating utility classes. Single column on mobile (children stacked);
+        // switches to the multi-column track at >=768px via the scoped media query.
+        // grid-template-columns is dynamic, so drive the column count from a CSS var.
         const gridStyles = {
-            ...contentStyles,
+            display: 'grid',
+            gridTemplateColumns: '1fr',
+            gap,
+            ...dimensionsResult.baseStyles,
             '--grid-cols': numColumns
         };
         // Combine all media queries
@@ -204,13 +203,13 @@ export const GridConfig = {
                     style: wrapperStyles,
                     children: [
                         /*#__PURE__*/ _jsx(Content, {
-                            className: contentClasses,
+                            className: contentClass,
                             style: gridStyles
                         }),
                         /*#__PURE__*/ _jsx("style", {
                             children: `
             @media (min-width: 768px) {
-              .flex.md\\:grid {
+              .${contentClass} {
                 grid-template-columns: repeat(var(--grid-cols), 1fr);
               }
             }

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

@@ -14,7 +14,7 @@
  * - margin: Different margins at different breakpoints
  * - visibility: Show/hide at different breakpoints
  */ 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 { dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, borderValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS } from '../../fields/shared.js';
 import { AnimatedWrapper } from '../AnimatedWrapper.js';
 // Simple ID generator for server-side rendering
 let idCounter = 0;
@@ -85,19 +85,18 @@ export const GridConfig = {
         if (visibilityCSS) {
             mediaQueries.push(visibilityCSS);
         }
-        // Tailwind classes for responsive grid: flex column on mobile, grid on md+
-        const contentClasses = cn('flex flex-col w-full', 'md:grid', contentClass);
-        // Dynamic styles that need inline (user-controlled values: gap, columns)
-        const contentStyles = {
-            gap,
-            ...dimensionsResult.baseStyles
-        };
         if (dimensionsResult.mediaQueryCSS) {
             mediaQueries.push(dimensionsResult.mediaQueryCSS);
         }
-        // Grid template columns must be inline since numColumns is dynamic
+        // Self-contained CSS grid — does NOT depend on the consumer's Tailwind
+        // generating utility classes. Single column on mobile (children stacked);
+        // switches to the multi-column track at >=768px via the scoped media query.
+        // grid-template-columns is dynamic, so drive the column count from a CSS var.
         const gridStyles = {
-            ...contentStyles,
+            display: 'grid',
+            gridTemplateColumns: '1fr',
+            gap,
+            ...dimensionsResult.baseStyles,
             '--grid-cols': numColumns
         };
         // Combine all media queries
@@ -115,13 +114,13 @@ export const GridConfig = {
                     style: wrapperStyles,
                     children: [
                         /*#__PURE__*/ _jsx(ContentSlot, {
-                            className: contentClasses,
+                            className: contentClass,
                             style: gridStyles
                         }),
                         /*#__PURE__*/ _jsx("style", {
                             children: `
             @media (min-width: 768px) {
-              .flex.md\\:grid {
+              .${contentClass} {
                 grid-template-columns: repeat(var(--grid-cols), 1fr);
               }
             }

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/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.6.26";
+export declare const VERSION = "0.6.28";

package/dist/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@delmaredigital/payload-puck",
-  "version": "0.6.26",
+  "version": "0.6.28",
   "description": "Puck visual page builder plugin for Payload CMS",
   "type": "module",
   "license": "MIT",