@delmaredigital/payload-puck 0.6.12 → 0.6.14

package/dist/render/HybridPageRenderer.js

@@ -1,5 +1,42 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { PageRenderer } from './PageRenderer';
+/**
+ * Hybrid Page Renderer
+ *
+ * Renders pages that can be either Puck-edited or legacy Payload block-based.
+ * For new projects using only Puck, legacyRenderer is optional.
+ *
+ * @example New project (Puck-only)
+ * ```tsx
+ * import { HybridPageRenderer } from '@delmaredigital/payload-puck/render'
+ * import { puckConfig } from '@/puck/config'
+ *
+ * export async function PageRenderer({ slug }) {
+ *   const page = await fetchPage(slug)
+ *   return <HybridPageRenderer page={page} config={puckConfig} />
+ * }
+ * ```
+ *
+ * @example Migration (with legacy blocks)
+ * ```tsx
+ * import { HybridPageRenderer } from '@delmaredigital/payload-puck/render'
+ * import { puckConfig } from '@/puck/config'
+ * import { siteLayouts } from '@/lib/puck-layouts'
+ * import { BlockRenderer } from '@/components/blocks/BlockRenderer'
+ *
+ * export async function PageRenderer({ slug }) {
+ *   const page = await fetchPage(slug)
+ *
+ *   return (
+ *     <HybridPageRenderer
+ *       page={page}
+ *       config={puckConfig}
+ *       layouts={siteLayouts}
+ *       legacyRenderer={(blocks) => <BlockRenderer blocks={blocks} />}
+ *     />
+ *   )
+ * }
+ * ```
+ */ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { PageRenderer } from './PageRenderer.js';
 /**
  * Renders a page using either Puck or legacy Payload blocks
  *
@@ -7,8 +44,9 @@ import { PageRenderer } from './PageRenderer';
  * 1. If editorVersion is 'puck' AND puckData has content → render with PageRenderer
  * 2. If legacy blocks exist AND legacyRenderer is provided → render with legacyRenderer
  * 3. Otherwise → render fallback
- */
-export function HybridPageRenderer({ page, legacyRenderer, legacyBlocksField = 'layout', fallback = _jsx("div", { children: "No content available" }), config, layouts, wrapper, className, }) {
+ */ export function HybridPageRenderer({ page, legacyRenderer, legacyBlocksField = 'layout', fallback = /*#__PURE__*/ _jsx("div", {
+    children: "No content available"
+}), config, layouts, wrapper, className }) {
     // Check for Puck content
     const puckData = page.puckData;
     const hasPuckContent = puckData?.content && Array.isArray(puckData.content) && puckData.content.length > 0;
@@ -17,14 +55,24 @@ export function HybridPageRenderer({ page, legacyRenderer, legacyBlocksField = '
     const hasLegacyContent = Array.isArray(legacyBlocks) && legacyBlocks.length > 0;
     // Render Puck pages
     if (page.editorVersion === 'puck' && hasPuckContent) {
-        return (_jsx(PageRenderer, { data: puckData, config: config, layouts: layouts, wrapper: wrapper, className: className }));
+        return /*#__PURE__*/ _jsx(PageRenderer, {
+            data: puckData,
+            config: config,
+            layouts: layouts,
+            wrapper: wrapper,
+            className: className
+        });
     }
     // Render legacy pages (only if legacyRenderer is provided)
     if (hasLegacyContent && legacyRenderer) {
-        return _jsx(_Fragment, { children: legacyRenderer(legacyBlocks) });
+        return /*#__PURE__*/ _jsx(_Fragment, {
+            children: legacyRenderer(legacyBlocks)
+        });
     }
     // Fallback for empty pages
-    return _jsx(_Fragment, { children: fallback });
+    return /*#__PURE__*/ _jsx(_Fragment, {
+        children: fallback
+    });
 }
 /**
  * Converts a loosely-typed page object (e.g., from Payload's generated types)
@@ -50,8 +98,7 @@ export function HybridPageRenderer({ page, legacyRenderer, legacyBlocksField = '
  * @param page - Page object with loosely-typed fields
  * @returns Properly typed HybridPageData
  * @throws Error if editorVersion is present but invalid
- */
-export function toHybridPageData(page) {
+ */ export function toHybridPageData(page) {
     const { editorVersion, puckData, ...rest } = page;
     // Validate editorVersion if present
     if (editorVersion !== undefined && editorVersion !== null) {
@@ -68,7 +115,6 @@ export function toHybridPageData(page) {
     return {
         ...rest,
         editorVersion: editorVersion,
-        puckData: puckData,
+        puckData: puckData
     };
 }
-//# sourceMappingURL=HybridPageRenderer.js.map

package/dist/render/PageRenderer.d.ts

@@ -1,5 +1,5 @@
 import type { Config as PuckConfig, Data as PuckData } from '@puckeditor/core';
-import { type LayoutDefinition } from '../layouts';
+import { type LayoutDefinition } from '../layouts/index.js';
 export interface PageRendererProps {
     /**
      * Puck data to render
@@ -47,5 +47,4 @@ export interface PageRendererProps {
  * }
  * ```
  */
-export declare function PageRenderer({ data, config, wrapper: Wrapper, className, layouts, }: PageRendererProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=PageRenderer.d.ts.map
+export declare function PageRenderer({ data, config, wrapper: Wrapper, className, layouts, }: PageRendererProps): import("react").JSX.Element;

package/dist/render/PageRenderer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Render } from '@puckeditor/core';
-import { baseConfig } from '../config';
-import { LayoutWrapper, getLayout, DEFAULT_LAYOUTS } from '../layouts';
+import { baseConfig } from '../config/index.js';
+import { LayoutWrapper, getLayout, DEFAULT_LAYOUTS } from '../layouts/index.js';
 /**
  * Renders a Puck page using the provided data and configuration
  *
@@ -22,13 +22,20 @@ import { LayoutWrapper, getLayout, DEFAULT_LAYOUTS } from '../layouts';
  *   )
  * }
  * ```
- */
-export function PageRenderer({ data, config = baseConfig, wrapper: Wrapper, className, layouts = DEFAULT_LAYOUTS, }) {
+ */ export function PageRenderer({ data, config = baseConfig, wrapper: Wrapper, className, layouts = DEFAULT_LAYOUTS }) {
     // Handle empty or invalid data
     if (!data || !data.content) {
-        return (_jsx("div", { className: className, children: _jsx("p", { children: "No content available" }) }));
+        return /*#__PURE__*/ _jsx("div", {
+            className: className,
+            children: /*#__PURE__*/ _jsx("p", {
+                children: "No content available"
+            })
+        });
     }
-    const content = _jsx(Render, { config: config, data: data });
+    const content = /*#__PURE__*/ _jsx(Render, {
+        config: config,
+        data: data
+    });
     // Extract root props for page-level settings
     const rootProps = data.root?.props;
     // Build page overrides from root props
@@ -36,26 +43,34 @@ export function PageRenderer({ data, config = baseConfig, wrapper: Wrapper, clas
         showHeader: rootProps?.showHeader,
         showFooter: rootProps?.showFooter,
         background: rootProps?.pageBackground,
-        maxWidth: rootProps?.pageMaxWidth,
+        maxWidth: rootProps?.pageMaxWidth
     };
     // Build the component tree
     let result = content;
     // Custom wrapper takes precedence
     if (Wrapper) {
-        result = _jsx(Wrapper, { children: result });
-    }
-    else {
+        result = /*#__PURE__*/ _jsx(Wrapper, {
+            children: result
+        });
+    } else {
         // Apply layout from puck root props
         const pageLayout = rootProps?.pageLayout;
         const layout = pageLayout ? getLayout(layouts, pageLayout) : undefined;
         if (layout) {
-            result = (_jsx(LayoutWrapper, { layout: layout, className: className, overrides: overrides, children: result }));
-        }
-        else if (className || overrides.background) {
+            result = /*#__PURE__*/ _jsx(LayoutWrapper, {
+                layout: layout,
+                className: className,
+                overrides: overrides,
+                children: result
+            });
+        } else if (className || overrides.background) {
             // No layout but has background or className - use LayoutWrapper without layout
-            result = (_jsx(LayoutWrapper, { className: className, overrides: overrides, children: result }));
+            result = /*#__PURE__*/ _jsx(LayoutWrapper, {
+                className: className,
+                overrides: overrides,
+                children: result
+            });
         }
     }
     return result;
 }
-//# sourceMappingURL=PageRenderer.js.map

package/dist/render/PuckEditor.client.d.ts

@@ -62,5 +62,4 @@ export interface PuckEditorProps {
  * }
  * ```
  */
-export declare function PuckEditor({ config, initialData, onSave, onChange, publishUrl, headerActions, showPublishButton, }: PuckEditorProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=PuckEditor.client.d.ts.map
+export declare function PuckEditor({ config, initialData, onSave, onChange, publishUrl, headerActions, showPublishButton, }: PuckEditorProps): import("react").JSX.Element;

package/dist/render/PuckEditor.client.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Puck } from '@puckeditor/core';
 import { useCallback, useState } from 'react';
 import '@puckeditor/core/puck.css';
@@ -33,34 +33,49 @@ import '@puckeditor/core/puck.css';
  *   )
  * }
  * ```
- */
-export function PuckEditor({ config, initialData, onSave, onChange, publishUrl, headerActions, showPublishButton = true, }) {
+ */ export function PuckEditor({ config, initialData, onSave, onChange, publishUrl, headerActions, showPublishButton = true }) {
     const [isSaving, setIsSaving] = useState(false);
-    const handlePublish = useCallback(async (data) => {
-        if (!onSave)
-            return;
+    const handlePublish = useCallback(async (data)=>{
+        if (!onSave) return;
         setIsSaving(true);
         try {
             await onSave(data);
             if (publishUrl) {
                 window.location.href = publishUrl;
             }
-        }
-        catch (error) {
+        } catch (error) {
             console.error('Error saving page:', error);
-        }
-        finally {
+        } finally{
             setIsSaving(false);
         }
-    }, [onSave, publishUrl]);
+    }, [
+        onSave,
+        publishUrl
+    ]);
     // Default empty data
     const defaultData = {
-        root: { props: {} },
+        root: {
+            props: {}
+        },
         content: [],
-        zones: {},
+        zones: {}
     };
-    return (_jsx(Puck, { config: config, data: initialData || defaultData, onPublish: showPublishButton ? handlePublish : undefined, onChange: onChange, overrides: {
-            headerActions: ({ children }) => (_jsxs(_Fragment, { children: [isSaving && (_jsx("span", { className: "text-sm text-gray-500 mr-4", children: "Saving..." })), headerActions, children] })),
-        } }));
+    return /*#__PURE__*/ _jsx(Puck, {
+        config: config,
+        data: initialData || defaultData,
+        onPublish: showPublishButton ? handlePublish : undefined,
+        onChange: onChange,
+        overrides: {
+            headerActions: ({ children })=>/*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        isSaving && /*#__PURE__*/ _jsx("span", {
+                            className: "text-sm text-gray-500 mr-4",
+                            children: "Saving..."
+                        }),
+                        headerActions,
+                        children
+                    ]
+                })
+        }
+    });
 }
-//# sourceMappingURL=PuckEditor.client.js.map

package/dist/render/index.d.ts

@@ -4,9 +4,8 @@
  * This module only exports server-safe components.
  * For the client-side editor, use '@delmaredigital/payload-puck/editor'
  */
-export { PageRenderer } from './PageRenderer';
-export type { PageRendererProps } from './PageRenderer';
-export { HybridPageRenderer, toHybridPageData } from './HybridPageRenderer';
-export type { HybridPageRendererProps, HybridPageData, HybridPageDataInput, } from './HybridPageRenderer';
-export { createRenderLayouts } from '../layouts/utils';
-//# sourceMappingURL=index.d.ts.map
+export { PageRenderer } from './PageRenderer.js';
+export type { PageRendererProps } from './PageRenderer.js';
+export { HybridPageRenderer, toHybridPageData } from './HybridPageRenderer.js';
+export type { HybridPageRendererProps, HybridPageData, HybridPageDataInput, } from './HybridPageRenderer.js';
+export { createRenderLayouts } from '../layouts/utils.js';

package/dist/render/index.js

@@ -3,11 +3,8 @@
  *
  * This module only exports server-safe components.
  * For the client-side editor, use '@delmaredigital/payload-puck/editor'
- */
-export { PageRenderer } from './PageRenderer';
-export { HybridPageRenderer, toHybridPageData } from './HybridPageRenderer';
+ */ export { PageRenderer } from './PageRenderer.js';
+export { HybridPageRenderer, toHybridPageData } from './HybridPageRenderer.js';
 // Re-export createRenderLayouts for convenience (commonly used with renderers)
-export { createRenderLayouts } from '../layouts/utils';
-// Note: PuckEditor has been moved to '@delmaredigital/payload-puck/editor'
-// to avoid RSC import issues with the client-only Puck component
-//# sourceMappingURL=index.js.map
+export { createRenderLayouts } from '../layouts/utils.js'; // Note: PuckEditor has been moved to '@delmaredigital/payload-puck/editor'
+ // to avoid RSC import issues with the client-only Puck component

package/dist/styles/puck-dark-mode.css

@@ -0,0 +1,101 @@
+/**
+ * Puck Editor Dark Mode CSS Overrides
+ *
+ * This file overrides Puck's default light mode CSS variables when the `.dark` class
+ * is present on a parent element. PayloadCMS adds this class to <html> in dark mode.
+ *
+ * Puck uses a grey scale from grey-01 (darkest) to grey-12 (lightest) in light mode.
+ * For dark mode, we invert this scale so the UI remains readable.
+ */
+
+.dark {
+  /* Invert grey scale for dark mode */
+  /* Light mode: grey-01 = #181818 (darkest), grey-12 = #fafafa (lightest) */
+  /* Dark mode: invert so backgrounds are dark and text is light */
+  --puck-color-grey-01: #fafafa;
+  --puck-color-grey-02: #f5f5f5;
+  --puck-color-grey-03: #efefef;
+  --puck-color-grey-04: #e8e8e8;
+  --puck-color-grey-05: #d4d4d4;
+  --puck-color-grey-06: #b3b3b3;
+  --puck-color-grey-07: #8f8f8f;
+  --puck-color-grey-08: #6b6b6b;
+  --puck-color-grey-09: #525252;
+  --puck-color-grey-10: #3d3d3d;
+  --puck-color-grey-11: #272727;
+  --puck-color-grey-12: #181818;
+
+  /* Swap white/black */
+  --puck-color-white: #1a1a1a;
+  --puck-color-black: #ffffff;
+
+  /* Azure (primary blue) - adjust for dark mode contrast */
+  --puck-color-azure-01: #e0f2ff;
+  --puck-color-azure-02: #c4e5ff;
+  --puck-color-azure-03: #99d4ff;
+  --puck-color-azure-04: #66c2ff;
+  --puck-color-azure-05: #33b0ff;
+  --puck-color-azure-06: #009dff;
+  --puck-color-azure-07: #0080d9;
+  --puck-color-azure-08: #0066b3;
+  --puck-color-azure-09: #004d8c;
+  --puck-color-azure-10: #003366;
+  --puck-color-azure-11: #001a40;
+  --puck-color-azure-12: #00101a;
+
+  /* Rose (pink/red accents) */
+  --puck-color-rose-01: #ffe0f0;
+  --puck-color-rose-02: #ffc4e3;
+  --puck-color-rose-03: #ff99cf;
+  --puck-color-rose-04: #ff66b8;
+  --puck-color-rose-05: #ff33a1;
+  --puck-color-rose-06: #ff008a;
+  --puck-color-rose-07: #d90075;
+  --puck-color-rose-08: #b30061;
+  --puck-color-rose-09: #8c004d;
+  --puck-color-rose-10: #660038;
+  --puck-color-rose-11: #400024;
+  --puck-color-rose-12: #1a000f;
+
+  /* Green (success states) */
+  --puck-color-green-01: #e0ffe0;
+  --puck-color-green-02: #c4ffc4;
+  --puck-color-green-03: #99ff99;
+  --puck-color-green-04: #66ff66;
+  --puck-color-green-05: #33ff33;
+  --puck-color-green-06: #00e600;
+  --puck-color-green-07: #00c400;
+  --puck-color-green-08: #00a300;
+  --puck-color-green-09: #008200;
+  --puck-color-green-10: #006100;
+  --puck-color-green-11: #004000;
+  --puck-color-green-12: #001a00;
+
+  /* Yellow (warning states) */
+  --puck-color-yellow-01: #fffde0;
+  --puck-color-yellow-02: #fffbc4;
+  --puck-color-yellow-03: #fff899;
+  --puck-color-yellow-04: #fff566;
+  --puck-color-yellow-05: #fff233;
+  --puck-color-yellow-06: #e6d900;
+  --puck-color-yellow-07: #c4b800;
+  --puck-color-yellow-08: #a39800;
+  --puck-color-yellow-09: #827800;
+  --puck-color-yellow-10: #615800;
+  --puck-color-yellow-11: #403900;
+  --puck-color-yellow-12: #1a1700;
+
+  /* Red (error states) */
+  --puck-color-red-01: #ffe0e0;
+  --puck-color-red-02: #ffc4c4;
+  --puck-color-red-03: #ff9999;
+  --puck-color-red-04: #ff6666;
+  --puck-color-red-05: #ff3333;
+  --puck-color-red-06: #e60000;
+  --puck-color-red-07: #c40000;
+  --puck-color-red-08: #a30000;
+  --puck-color-red-09: #820000;
+  --puck-color-red-10: #610000;
+  --puck-color-red-11: #400000;
+  --puck-color-red-12: #1a0000;
+}

package/dist/theme/context.d.ts

@@ -6,7 +6,7 @@
  * ensuring backwards compatibility.
  */
 import { type ReactNode } from 'react';
-import type { ThemeConfig, ResolvedTheme } from './types';
+import type { ThemeConfig, ResolvedTheme } from './types.js';
 export interface ThemeProviderProps {
     children: ReactNode;
     /** Theme configuration to apply */
@@ -26,7 +26,7 @@ export interface ThemeProviderProps {
  * </ThemeProvider>
  * ```
  */
-export declare function ThemeProvider({ children, theme }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeProvider({ children, theme }: ThemeProviderProps): import("react").JSX.Element;
 /**
  * Hook to access the current theme
  *
@@ -56,4 +56,3 @@ export declare function getDefaultTheme(): ResolvedTheme;
  * Useful for conditional logic based on whether theming is configured.
  */
 export declare function useHasThemeProvider(): boolean;
-//# sourceMappingURL=context.d.ts.map

package/dist/theme/context.js

@@ -6,11 +6,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * React context for distributing theme configuration to Puck components.
  * The useTheme() hook returns defaults when no provider is present,
  * ensuring backwards compatibility.
- */
-import { createContext, useContext, useMemo } from 'react';
-import { DEFAULT_THEME } from './defaults';
-import { resolveTheme } from './utils';
-const ThemeContext = createContext(null);
+ */ import { createContext, useContext, useMemo } from 'react';
+import { DEFAULT_THEME } from './defaults.js';
+import { resolveTheme } from './utils.js';
+const ThemeContext = /*#__PURE__*/ createContext(null);
 /**
  * Provides theme configuration to descendant Puck components
  *
@@ -24,13 +23,19 @@ const ThemeContext = createContext(null);
  *   <PageRenderer data={data} />
  * </ThemeProvider>
  * ```
- */
-export function ThemeProvider({ children, theme }) {
-    const resolvedTheme = useMemo(() => resolveTheme(theme), [theme]);
-    const value = useMemo(() => ({
-        theme: resolvedTheme,
-    }), [resolvedTheme]);
-    return _jsx(ThemeContext.Provider, { value: value, children: children });
+ */ export function ThemeProvider({ children, theme }) {
+    const resolvedTheme = useMemo(()=>resolveTheme(theme), [
+        theme
+    ]);
+    const value = useMemo(()=>({
+            theme: resolvedTheme
+        }), [
+        resolvedTheme
+    ]);
+    return /*#__PURE__*/ _jsx(ThemeContext.Provider, {
+        value: value,
+        children: children
+    });
 }
 /**
  * Hook to access the current theme
@@ -46,8 +51,7 @@ export function ThemeProvider({ children, theme }) {
  *   return <button className={buttonClasses}>Click me</button>
  * }
  * ```
- */
-export function useTheme() {
+ */ export function useTheme() {
     const context = useContext(ThemeContext);
     // Return defaults if no provider - ensures backwards compatibility
     return context?.theme ?? DEFAULT_THEME;
@@ -57,17 +61,14 @@ export function useTheme() {
  *
  * Use this when you need theme values in a server component
  * where hooks cannot be used.
- */
-export function getDefaultTheme() {
+ */ export function getDefaultTheme() {
     return DEFAULT_THEME;
 }
 /**
  * Hook to check if a ThemeProvider is present
  *
  * Useful for conditional logic based on whether theming is configured.
- */
-export function useHasThemeProvider() {
+ */ export function useHasThemeProvider() {
     const context = useContext(ThemeContext);
     return context !== null;
 }
-//# sourceMappingURL=context.js.map

package/dist/theme/defaults.d.ts

@@ -4,7 +4,7 @@
  * These defaults ensure backwards compatibility - components render
  * identically to before theming was introduced when no theme is provided.
  */
-import type { ButtonVariantStyles, BackgroundStyles, ColorPreset, ResolvedTheme } from './types';
+import type { ButtonVariantStyles, BackgroundStyles, ColorPreset, ResolvedTheme } from './types.js';
 /**
  * Default button variant styles
  * Uses semantic Tailwind classes that map to CSS variables (--primary, --secondary, etc.)
@@ -36,4 +36,3 @@ export declare const DEFAULT_FOCUS_RING = "focus:ring-ring";
  * Used when no ThemeProvider is present or no theme config is provided
  */
 export declare const DEFAULT_THEME: ResolvedTheme;
-//# sourceMappingURL=defaults.d.ts.map