@delmaredigital/payload-puck 0.6.12 → 0.6.14

package/dist/editor/PuckEditor.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import dynamic from 'next/dynamic';
-import { LoadingState } from './components/LoadingState';
+import { LoadingState } from './components/LoadingState.js';
 import { injectPageTreeFields } from './utils/injectPageTreeFields.js';
 import { hasPageTreeFields } from './utils/detectPageTree.js';
 import { usePuckConfig } from '../views/PuckConfigContext.js';
@@ -10,9 +10,9 @@ import { injectAiConfig, hasAiConfig } from '../ai/utils/injectAiConfig.js';
 import { comprehensiveComponentAiConfig } from '../ai/presets/index.js';
 // Dynamic import with ssr: false to prevent hydration mismatch
 // Puck generates random IDs for drag-and-drop that differ between server/client
-const PuckEditorImpl = dynamic(() => import('./PuckEditorImpl.client').then((mod) => mod.PuckEditorImpl), {
+const PuckEditorImpl = dynamic(()=>import('./PuckEditorImpl.client.js').then((mod)=>mod.PuckEditorImpl), {
     ssr: false,
-    loading: () => _jsx(LoadingState, {}),
+    loading: ()=>/*#__PURE__*/ _jsx(LoadingState, {})
 });
 /**
  * Puck Editor - The primary editor component
@@ -61,34 +61,34 @@ const PuckEditorImpl = dynamic(() => import('./PuckEditorImpl.client').then((mod
  *   pageSegment={page.pageSegment}
  * />
  * ```
- */
-export function PuckEditor({ pageId, initialData, config: configProp, pageTitle, pageSlug, apiEndpoint, backUrl, previewUrl, previewUrlPrefix, enableViewports, plugins, layouts: layoutsProp, layoutStyles, layoutKey, headerActionsStart, headerActionsEnd, overrides, onSaveSuccess, onSaveError, onChange, initialStatus, theme: themeProp, 
-// Page-tree props
-hasPageTree = false, folder, pageSegment, 
-// Editor iframe styling props
-editorStylesheets: editorStylesheetsProp, editorCss: editorCssProp, 
-// AI integration props
-enableAi = false, aiOptions, aiExamplePrompts, hasPromptsCollection = false, hasContextCollection = false, aiComponentInstructions, experimentalFullScreenCanvas = false, 
-// Dark mode props
-autoDetectDarkMode = true, showPreviewDarkModeToggle = true, initialPreviewDarkMode = false, }) {
+ */ export function PuckEditor({ pageId, initialData, config: configProp, pageTitle, pageSlug, apiEndpoint, backUrl, previewUrl, previewUrlPrefix, enableViewports, plugins, layouts: layoutsProp, layoutStyles, layoutKey, headerActionsStart, headerActionsEnd, overrides, onSaveSuccess, onSaveError, onChange, initialStatus, theme: themeProp, // Page-tree props
+hasPageTree = false, folder, pageSegment, // Editor iframe styling props
+editorStylesheets: editorStylesheetsProp, editorCss: editorCssProp, // AI integration props
+enableAi = false, aiOptions, aiExamplePrompts, hasPromptsCollection = false, hasContextCollection = false, aiComponentInstructions, experimentalFullScreenCanvas = false, // Dark mode props
+autoDetectDarkMode = true, showPreviewDarkModeToggle = true, initialPreviewDarkMode = false }) {
     // Get config from context as fallback
-    const { config: configFromContext, layouts: layoutsFromContext, theme: themeFromContext, plugins: pluginsFromContext, editorStylesheets: editorStylesheetsFromContext, editorCss: editorCssFromContext, } = usePuckConfig();
+    const { config: configFromContext, layouts: layoutsFromContext, theme: themeFromContext, plugins: pluginsFromContext, editorStylesheets: editorStylesheetsFromContext, editorCss: editorCssFromContext } = usePuckConfig();
     // Use prop config if provided, otherwise fall back to context
     const baseConfig = configProp || configFromContext;
     const theme = themeProp || themeFromContext;
     // Merge plugins from props and context
     // Props take precedence and are added first, context plugins follow
-    const mergedPlugins = useMemo(() => {
+    const mergedPlugins = useMemo(()=>{
         // If plugins prop is false, disable all plugins (including context ones)
-        if (plugins === false)
-            return false;
+        if (plugins === false) return false;
         // If plugins prop is provided (not undefined), it takes precedence
         // But also include context plugins
         const propPlugins = plugins || [];
         const contextPlugins = pluginsFromContext || [];
-        const combined = [...propPlugins, ...contextPlugins];
+        const combined = [
+            ...propPlugins,
+            ...contextPlugins
+        ];
         return combined.length > 0 ? combined : undefined;
-    }, [plugins, pluginsFromContext]);
+    }, [
+        plugins,
+        pluginsFromContext
+    ]);
     // Props take precedence over context for editor stylesheets
     const editorStylesheets = editorStylesheetsProp || editorStylesheetsFromContext;
     const editorCss = editorCssProp || editorCssFromContext;
@@ -96,20 +96,16 @@ autoDetectDarkMode = true, showPreviewDarkModeToggle = true, initialPreviewDarkM
     // Props may have metadata (value, label, editorBackground) but no React components
     // Context may have React components (header, footer) that can't be serialized through props
     // Merge by matching on 'value', combining properties, preferring context for components
-    const layouts = useMemo(() => {
+    const layouts = useMemo(()=>{
         // If no layouts from either source, return undefined
-        if (!layoutsProp && !layoutsFromContext)
-            return undefined;
+        if (!layoutsProp && !layoutsFromContext) return undefined;
         // If only one source, use it
-        if (!layoutsProp)
-            return layoutsFromContext;
-        if (!layoutsFromContext)
-            return layoutsProp;
+        if (!layoutsProp) return layoutsFromContext;
+        if (!layoutsFromContext) return layoutsProp;
         // Merge: for each prop layout, find matching context layout and combine
-        return layoutsProp.map((propLayout) => {
-            const contextLayout = layoutsFromContext.find((c) => c.value === propLayout.value);
-            if (!contextLayout)
-                return propLayout;
+        return layoutsProp.map((propLayout)=>{
+            const contextLayout = layoutsFromContext.find((c)=>c.value === propLayout.value);
+            if (!contextLayout) return propLayout;
             // Combine: prop values first, then context values (context provides components)
             return {
                 ...propLayout,
@@ -120,21 +116,24 @@ autoDetectDarkMode = true, showPreviewDarkModeToggle = true, initialPreviewDarkM
                 editorBackground: propLayout.editorBackground || contextLayout.editorBackground,
                 editorDarkMode: propLayout.editorDarkMode ?? contextLayout.editorDarkMode,
                 stickyHeaderHeight: propLayout.stickyHeaderHeight ?? contextLayout.stickyHeaderHeight,
-                styles: propLayout.styles || contextLayout.styles,
+                styles: propLayout.styles || contextLayout.styles
             };
         });
-    }, [layoutsProp, layoutsFromContext]);
+    }, [
+        layoutsProp,
+        layoutsFromContext
+    ]);
     // Conditionally inject page-tree fields and AI config into config
-    const finalConfig = useMemo(() => {
-        if (!baseConfig)
-            return null;
+    const finalConfig = useMemo(()=>{
+        if (!baseConfig) return null;
         let config = baseConfig;
         // Inject AI component instructions when AI is enabled
         if (enableAi && !hasAiConfig(config)) {
             // Merge comprehensive instructions with user-provided overrides
-            const mergedAiConfig = aiComponentInstructions
-                ? { ...comprehensiveComponentAiConfig, ...aiComponentInstructions }
-                : comprehensiveComponentAiConfig;
+            const mergedAiConfig = aiComponentInstructions ? {
+                ...comprehensiveComponentAiConfig,
+                ...aiComponentInstructions
+            } : comprehensiveComponentAiConfig;
             config = injectAiConfig(config, mergedAiConfig);
         }
         // Inject page-tree fields if enabled
@@ -142,11 +141,15 @@ autoDetectDarkMode = true, showPreviewDarkModeToggle = true, initialPreviewDarkM
             config = injectPageTreeFields(config);
         }
         return config;
-    }, [baseConfig, hasPageTree, enableAi, aiComponentInstructions]);
+    }, [
+        baseConfig,
+        hasPageTree,
+        enableAi,
+        aiComponentInstructions
+    ]);
     // Merge page-tree initial values into initialData
-    const finalInitialData = useMemo(() => {
-        if (!hasPageTree)
-            return initialData;
+    const finalInitialData = useMemo(()=>{
+        if (!hasPageTree) return initialData;
         return {
             ...initialData,
             root: {
@@ -154,76 +157,163 @@ autoDetectDarkMode = true, showPreviewDarkModeToggle = true, initialPreviewDarkM
                 props: {
                     ...initialData.root?.props,
                     // Only set if provided and hasPageTree is true
-                    ...(folder !== undefined && { folder }),
-                    ...(pageSegment !== undefined && { pageSegment }),
-                },
-            },
+                    ...folder !== undefined && {
+                        folder
+                    },
+                    ...pageSegment !== undefined && {
+                        pageSegment
+                    }
+                }
+            }
         };
-    }, [initialData, hasPageTree, folder, pageSegment]);
+    }, [
+        initialData,
+        hasPageTree,
+        folder,
+        pageSegment
+    ]);
     // Show error if no config available
     if (!finalConfig) {
-        return (_jsx("div", { style: {
+        return /*#__PURE__*/ _jsx("div", {
+            style: {
                 display: 'flex',
                 flexDirection: 'column',
                 alignItems: 'center',
                 justifyContent: 'center',
                 height: 'calc(100vh - 120px)',
                 padding: '40px',
-                textAlign: 'center',
-            }, children: _jsxs("div", { style: {
+                textAlign: 'center'
+            },
+            children: /*#__PURE__*/ _jsxs("div", {
+                style: {
                     backgroundColor: 'var(--theme-elevation-50)',
                     border: '1px solid var(--theme-elevation-150)',
                     borderRadius: '8px',
                     padding: '32px 48px',
-                    maxWidth: '560px',
-                }, children: [_jsx("h2", { style: {
+                    maxWidth: '560px'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("h2", {
+                        style: {
                             color: 'var(--theme-elevation-800)',
                             fontSize: '18px',
                             fontWeight: 600,
-                            margin: '0 0 12px 0',
-                        }, children: "Puck Configuration Required" }), _jsxs("p", { style: {
+                            margin: '0 0 12px 0'
+                        },
+                        children: "Puck Configuration Required"
+                    }),
+                    /*#__PURE__*/ _jsxs("p", {
+                        style: {
                             color: 'var(--theme-elevation-500)',
                             fontSize: '14px',
                             lineHeight: 1.6,
-                            margin: '0 0 16px 0',
-                        }, children: ["Either pass ", _jsx("code", { style: { backgroundColor: 'var(--theme-elevation-100)', padding: '2px 6px', borderRadius: '4px', fontSize: '13px' }, children: "config" }), " prop directly, or wrap your application with", ' ', _jsx("code", { style: { backgroundColor: 'var(--theme-elevation-100)', padding: '2px 6px', borderRadius: '4px', fontSize: '13px' }, children: "PuckConfigProvider" })] }), _jsx("pre", { style: {
+                            margin: '0 0 16px 0'
+                        },
+                        children: [
+                            "Either pass ",
+                            /*#__PURE__*/ _jsx("code", {
+                                style: {
+                                    backgroundColor: 'var(--theme-elevation-100)',
+                                    padding: '2px 6px',
+                                    borderRadius: '4px',
+                                    fontSize: '13px'
+                                },
+                                children: "config"
+                            }),
+                            " prop directly, or wrap your application with",
+                            ' ',
+                            /*#__PURE__*/ _jsx("code", {
+                                style: {
+                                    backgroundColor: 'var(--theme-elevation-100)',
+                                    padding: '2px 6px',
+                                    borderRadius: '4px',
+                                    fontSize: '13px'
+                                },
+                                children: "PuckConfigProvider"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("pre", {
+                        style: {
                             backgroundColor: 'var(--theme-elevation-100)',
                             padding: '16px',
                             borderRadius: '6px',
                             fontSize: '12px',
                             textAlign: 'left',
                             overflow: 'auto',
-                            margin: 0,
-                        }, children: `// Option 1: Pass config directly
+                            margin: 0
+                        },
+                        children: `// Option 1: Pass config directly
 <PuckEditor config={editorConfig} ... />
 
 // Option 2: Use context provider
 <PuckConfigProvider config={editorConfig}>
   <PuckEditor ... />
-</PuckConfigProvider>` })] }) }));
+</PuckConfigProvider>`
+                    })
+                ]
+            })
+        });
     }
     // Merge example prompts from plugin config and aiOptions prop
-    const mergedAiOptions = useMemo(() => {
-        if (!enableAi)
-            return undefined;
+    const mergedAiOptions = useMemo(()=>{
+        if (!enableAi) return undefined;
         const mergedPrompts = [
-            ...(aiExamplePrompts || []),
-            ...(aiOptions?.examplePrompts || []),
+            ...aiExamplePrompts || [],
+            ...aiOptions?.examplePrompts || []
         ];
         return {
             host: aiOptions?.host || '/api/puck/ai',
-            examplePrompts: mergedPrompts.length > 0 ? mergedPrompts : undefined,
+            examplePrompts: mergedPrompts.length > 0 ? mergedPrompts : undefined
         };
-    }, [enableAi, aiExamplePrompts, aiOptions]);
+    }, [
+        enableAi,
+        aiExamplePrompts,
+        aiOptions
+    ]);
     // Compute preview URL from prefix (for Server Component compatibility)
     // previewUrlPrefix takes precedence if provided
-    const finalPreviewUrl = useMemo(() => {
+    const finalPreviewUrl = useMemo(()=>{
         if (previewUrlPrefix) {
             // Convert prefix to a function that builds the full URL
-            return (slug) => (slug ? `${previewUrlPrefix}/${slug}` : previewUrlPrefix);
+            return (slug)=>slug ? `${previewUrlPrefix}/${slug}` : previewUrlPrefix;
         }
         return previewUrl;
-    }, [previewUrlPrefix, previewUrl]);
-    return (_jsx(PuckEditorImpl, { pageId: pageId, initialData: finalInitialData, config: finalConfig, pageTitle: pageTitle, pageSlug: pageSlug, apiEndpoint: apiEndpoint, backUrl: backUrl, previewUrl: finalPreviewUrl, enableViewports: enableViewports, plugins: mergedPlugins, layouts: layouts, layoutStyles: layoutStyles, layoutKey: layoutKey, headerActionsStart: headerActionsStart, headerActionsEnd: headerActionsEnd, overrides: overrides, onSaveSuccess: onSaveSuccess, onSaveError: onSaveError, onChange: onChange, initialStatus: initialStatus, theme: theme, editorStylesheets: editorStylesheets, editorCss: editorCss, enableAi: enableAi, aiOptions: mergedAiOptions, hasPromptsCollection: hasPromptsCollection, hasContextCollection: hasContextCollection, experimentalFullScreenCanvas: experimentalFullScreenCanvas, autoDetectDarkMode: autoDetectDarkMode, showPreviewDarkModeToggle: showPreviewDarkModeToggle, initialPreviewDarkMode: initialPreviewDarkMode }));
+    }, [
+        previewUrlPrefix,
+        previewUrl
+    ]);
+    return /*#__PURE__*/ _jsx(PuckEditorImpl, {
+        pageId: pageId,
+        initialData: finalInitialData,
+        config: finalConfig,
+        pageTitle: pageTitle,
+        pageSlug: pageSlug,
+        apiEndpoint: apiEndpoint,
+        backUrl: backUrl,
+        previewUrl: finalPreviewUrl,
+        enableViewports: enableViewports,
+        plugins: mergedPlugins,
+        layouts: layouts,
+        layoutStyles: layoutStyles,
+        layoutKey: layoutKey,
+        headerActionsStart: headerActionsStart,
+        headerActionsEnd: headerActionsEnd,
+        overrides: overrides,
+        onSaveSuccess: onSaveSuccess,
+        onSaveError: onSaveError,
+        onChange: onChange,
+        initialStatus: initialStatus,
+        theme: theme,
+        editorStylesheets: editorStylesheets,
+        editorCss: editorCss,
+        enableAi: enableAi,
+        aiOptions: mergedAiOptions,
+        hasPromptsCollection: hasPromptsCollection,
+        hasContextCollection: hasContextCollection,
+        experimentalFullScreenCanvas: experimentalFullScreenCanvas,
+        autoDetectDarkMode: autoDetectDarkMode,
+        showPreviewDarkModeToggle: showPreviewDarkModeToggle,
+        initialPreviewDarkMode: initialPreviewDarkMode
+    });
 }
-//# sourceMappingURL=PuckEditor.js.map

package/dist/editor/PuckEditorImpl.client.d.ts

@@ -4,9 +4,9 @@ import '@puckeditor/core/puck.css';
 import '@puckeditor/plugin-heading-analyzer/dist/index.css';
 import '@puckeditor/plugin-ai/styles.css';
 import './ai-plugin-overrides.css';
-import { type LayoutStyle } from './components/IframeWrapper';
-import { type ThemeConfig } from '../theme';
-import type { LayoutDefinition } from '../layouts';
+import { type LayoutStyle } from './components/IframeWrapper.js';
+import { type ThemeConfig } from '../theme/index.js';
+import type { LayoutDefinition } from '../layouts/index.js';
 import type { AiExamplePrompt } from '../ai/types.js';
 export interface PuckEditorImplProps {
     /**
@@ -179,5 +179,4 @@ export interface PuckEditorImplProps {
  * Internal implementation component - use PuckEditor instead.
  * @internal
  */
-export declare function PuckEditorImpl({ pageId, initialData, config, pageTitle, pageSlug, apiEndpoint, backUrl, previewUrl, enableViewports, plugins, layouts, layoutStyles, layoutKey, headerActionsStart, headerActionsEnd, overrides: customOverrides, onSaveSuccess, onSaveError, onChange: onChangeProp, initialStatus, theme, editorStylesheets: editorStylesheetsProp, editorCss: editorCssProp, enableAi, aiOptions, hasPromptsCollection, hasContextCollection, experimentalFullScreenCanvas, autoDetectDarkMode, showPreviewDarkModeToggle, initialPreviewDarkMode, }: PuckEditorImplProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=PuckEditorImpl.client.d.ts.map
+export declare function PuckEditorImpl({ pageId, initialData, config, pageTitle, pageSlug, apiEndpoint, backUrl, previewUrl, enableViewports, plugins, layouts, layoutStyles, layoutKey, headerActionsStart, headerActionsEnd, overrides: customOverrides, onSaveSuccess, onSaveError, onChange: onChangeProp, initialStatus, theme, editorStylesheets: editorStylesheetsProp, editorCss: editorCssProp, enableAi, aiOptions, hasPromptsCollection, hasContextCollection, experimentalFullScreenCanvas, autoDetectDarkMode, showPreviewDarkModeToggle, initialPreviewDarkMode, }: PuckEditorImplProps): import("react").JSX.Element;