@delmaredigital/payload-puck 0.6.12 → 0.6.14

package/dist/editor/components/IframeWrapper.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useEffect, useMemo, useState, createContext, useContext } from 'react';
 import { createUsePuck } from '@puckeditor/core';
-import { backgroundValueToCSS } from '../../fields/shared';
+import { backgroundValueToCSS } from '../../fields/shared.js';
 // Create usePuck hook for accessing editor state
 const usePuck = createUsePuck();
 /**
@@ -12,8 +12,7 @@ const usePuck = createUsePuck();
  *
  * This allows Puck components to reactively respond to preview theme changes
  * without polling or MutationObserver hacks.
- */
-export const PuckPreviewThemeContext = createContext(null);
+ */ export const PuckPreviewThemeContext = /*#__PURE__*/ createContext(null);
 /**
  * Hook to get the current preview theme from IframeWrapper context.
  *
@@ -32,14 +31,12 @@ export const PuckPreviewThemeContext = createContext(null);
  *   return <div className={isDark ? 'dark-styles' : 'light-styles'}>...</div>
  * }
  * ```
- */
-export const usePuckPreviewTheme = () => useContext(PuckPreviewThemeContext);
+ */ export const usePuckPreviewTheme = ()=>useContext(PuckPreviewThemeContext);
 /**
  * Default layout config
- */
-const DEFAULT_LAYOUT_CONFIG = {
+ */ const DEFAULT_LAYOUT_CONFIG = {
     background: '#ffffff',
-    isDark: false,
+    isDark: false
 };
 /**
  * Theme-aware iframe wrapper component
@@ -64,9 +61,8 @@ const DEFAULT_LAYOUT_CONFIG = {
  *   ),
  * }
  * ```
- */
-export const IframeWrapper = memo(function IframeWrapper({ children, document: iframeDoc, layouts, layoutStyles, layoutKey = 'pageLayout', defaultLayout = 'default', editorStylesheets, editorCss, previewDarkModeOverride, }) {
-    const appState = usePuck((s) => s.appState);
+ */ export const IframeWrapper = /*#__PURE__*/ memo(function IframeWrapper({ children, document: iframeDoc, layouts, layoutStyles, layoutKey = 'pageLayout', defaultLayout = 'default', editorStylesheets, editorCss, previewDarkModeOverride }) {
+    const appState = usePuck((s)=>s.appState);
     // Track stylesheet loading state to force re-render when styles are ready
     const [stylesLoaded, setStylesLoaded] = useState(false);
     // Check if we're in interactive mode (links should be clickable)
@@ -79,17 +75,17 @@ export const IframeWrapper = memo(function IframeWrapper({ children, document: i
     const showFooterOverride = rootProps?.showFooter;
     const pageBackground = rootProps?.pageBackground;
     // Convert layouts array to config map, or use deprecated layoutStyles
-    const layoutConfigMap = useMemo(() => {
+    const layoutConfigMap = useMemo(()=>{
         // If layouts prop provided, convert to internal format
         if (layouts) {
             const map = {};
-            for (const layout of layouts) {
+            for (const layout of layouts){
                 map[layout.value] = {
                     background: layout.editorBackground ?? '#ffffff',
                     isDark: layout.editorDarkMode ?? false,
                     header: layout.header,
                     footer: layout.footer,
-                    stickyHeaderHeight: layout.stickyHeaderHeight,
+                    stickyHeaderHeight: layout.stickyHeaderHeight
                 };
             }
             return map;
@@ -99,15 +95,19 @@ export const IframeWrapper = memo(function IframeWrapper({ children, document: i
             return layoutStyles;
         }
         // Default fallback
-        return { default: DEFAULT_LAYOUT_CONFIG };
-    }, [layouts, layoutStyles]);
+        return {
+            default: DEFAULT_LAYOUT_CONFIG
+        };
+    }, [
+        layouts,
+        layoutStyles
+    ]);
     // Get config for current layout
     const layoutConfig = layoutConfigMap[layoutValue] || layoutConfigMap[defaultLayout] || DEFAULT_LAYOUT_CONFIG;
     // Calculate isDark for context provider (same logic as in useEffect)
     const isDark = previewDarkModeOverride ?? layoutConfig.isDark;
-    useEffect(() => {
-        if (!iframeDoc)
-            return;
+    useEffect(()=>{
+        if (!iframeDoc) return;
         const body = iframeDoc.body;
         const html = iframeDoc.documentElement;
         // Apply background - page-level override takes precedence
@@ -119,8 +119,7 @@ export const IframeWrapper = memo(function IframeWrapper({ children, document: i
             body.style.backgroundImage = '';
             // Apply new styles
             Object.assign(body.style, bgStyles);
-        }
-        else {
+        } else {
             body.style.background = layoutConfig.background;
         }
         body.style.backgroundAttachment = 'fixed';
@@ -133,8 +132,7 @@ export const IframeWrapper = memo(function IframeWrapper({ children, document: i
             html.classList.remove('light');
             html.setAttribute('data-theme', 'dark');
             body.style.color = '#ffffff';
-        }
-        else {
+        } else {
             html.classList.remove('dark');
             html.classList.add('light');
             html.setAttribute('data-theme', 'light');
@@ -145,7 +143,7 @@ export const IframeWrapper = memo(function IframeWrapper({ children, document: i
         if (editorStylesheets && editorStylesheets.length > 0) {
             let pendingLoads = 0;
             let loadedCount = 0;
-            const checkAllLoaded = () => {
+            const checkAllLoaded = ()=>{
                 loadedCount++;
                 if (loadedCount >= pendingLoads) {
                     // All stylesheets loaded - force browser to recalculate styles
@@ -153,17 +151,15 @@ export const IframeWrapper = memo(function IframeWrapper({ children, document: i
                     setStylesLoaded(true);
                     // Force a browser repaint after styles load
                     // Use multiple techniques to ensure CSS is applied to existing elements
-                    requestAnimationFrame(() => {
-                        if (!html || !body)
-                            return;
+                    requestAnimationFrame(()=>{
+                        if (!html || !body) return;
                         // Technique 1: Re-apply theme classes (mimics what dark mode toggle does)
                         const isDark = previewDarkModeOverride ?? layoutConfig.isDark;
                         if (isDark) {
                             html.classList.remove('dark');
                             void html.offsetHeight; // Force reflow
                             html.classList.add('dark');
-                        }
-                        else {
+                        } else {
                             html.classList.remove('light');
                             void html.offsetHeight; // Force reflow
                             html.classList.add('light');
@@ -181,13 +177,12 @@ export const IframeWrapper = memo(function IframeWrapper({ children, document: i
             const origin = typeof window !== 'undefined' ? window.location.origin : '';
             // Track which stylesheets have been counted to avoid double-counting
             const loadedIndexes = new Set();
-            const markLoaded = (index) => {
-                if (loadedIndexes.has(index))
-                    return;
+            const markLoaded = (index)=>{
+                if (loadedIndexes.has(index)) return;
                 loadedIndexes.add(index);
                 checkAllLoaded();
             };
-            editorStylesheets.forEach((href, index) => {
+            editorStylesheets.forEach((href, index)=>{
                 const linkId = `puck-editor-stylesheet-${index}`;
                 const existingLink = iframeDoc.getElementById(linkId);
                 if (!existingLink) {
@@ -198,30 +193,28 @@ export const IframeWrapper = memo(function IframeWrapper({ children, document: i
                     // Resolve relative URLs to absolute URLs for iframe compatibility
                     link.href = href.startsWith('/') ? `${origin}${href}` : href;
                     // Track when stylesheet loads
-                    link.onload = () => markLoaded(index);
-                    link.onerror = () => markLoaded(index); // Count errors too to avoid hanging
+                    link.onload = ()=>markLoaded(index);
+                    link.onerror = ()=>markLoaded(index); // Count errors too to avoid hanging
                     iframeDoc.head.appendChild(link);
                     // Fallback: if onload doesn't fire within 2 seconds, force trigger
                     // This handles edge cases with cached resources or browser quirks
-                    setTimeout(() => {
+                    setTimeout(()=>{
                         if (!loadedIndexes.has(index)) {
                             markLoaded(index);
                         }
                     }, 2000);
-                }
-                else if (!stylesLoaded) {
+                } else if (!stylesLoaded) {
                     // Link exists - assume it's already loaded
                     pendingLoads++;
                     // Immediately mark as loaded since it's already in the DOM
-                    requestAnimationFrame(() => markLoaded(index));
+                    requestAnimationFrame(()=>markLoaded(index));
                 }
             });
             // If no new stylesheets to load, mark as loaded
             if (pendingLoads === 0 && !stylesLoaded) {
                 setStylesLoaded(true);
             }
-        }
-        else if (!stylesLoaded) {
+        } else if (!stylesLoaded) {
             // No stylesheets to load
             setStylesLoaded(true);
         }
@@ -352,7 +345,15 @@ export const IframeWrapper = memo(function IframeWrapper({ children, document: i
       `;
             iframeDoc.head.appendChild(style);
         }
-    }, [iframeDoc, layoutConfig, pageBackground, editorStylesheets, editorCss, stylesLoaded, previewDarkModeOverride]);
+    }, [
+        iframeDoc,
+        layoutConfig,
+        pageBackground,
+        editorStylesheets,
+        editorCss,
+        stylesLoaded,
+        previewDarkModeOverride
+    ]);
     // Get header/footer components from layout config
     const LayoutHeader = layoutConfig.header;
     const LayoutFooter = layoutConfig.footer;
@@ -360,16 +361,8 @@ export const IframeWrapper = memo(function IframeWrapper({ children, document: i
     // 'default' or undefined = use layout setting
     // 'show' = always show (even if layout doesn't have one - use layout's component)
     // 'hide' = always hide
-    const shouldShowHeader = showHeaderOverride === 'hide'
-        ? false
-        : showHeaderOverride === 'show'
-            ? !!LayoutHeader
-            : !!LayoutHeader;
-    const shouldShowFooter = showFooterOverride === 'hide'
-        ? false
-        : showFooterOverride === 'show'
-            ? !!LayoutFooter
-            : !!LayoutFooter;
+    const shouldShowHeader = showHeaderOverride === 'hide' ? false : showHeaderOverride === 'show' ? !!LayoutHeader : !!LayoutHeader;
+    const shouldShowFooter = showFooterOverride === 'hide' ? false : showFooterOverride === 'show' ? !!LayoutFooter : !!LayoutFooter;
     // If we have header or footer to show, wrap in flex container to ensure proper layout
     if (shouldShowHeader || shouldShowFooter) {
         // Calculate content padding for sticky headers (only if header is actually shown)
@@ -377,17 +370,46 @@ export const IframeWrapper = memo(function IframeWrapper({ children, document: i
             flex: 1,
             position: 'relative',
             // Add padding-top for sticky headers so content doesn't render behind them
-            ...(shouldShowHeader && layoutConfig.stickyHeaderHeight && { paddingTop: layoutConfig.stickyHeaderHeight }),
+            ...shouldShowHeader && layoutConfig.stickyHeaderHeight && {
+                paddingTop: layoutConfig.stickyHeaderHeight
+            }
         };
         // Disable pointer events on header/footer in edit mode to prevent accidental clicks
-        const headerFooterStyle = isInteractive
-            ? {}
-            : { pointerEvents: 'none' };
+        const headerFooterStyle = isInteractive ? {} : {
+            pointerEvents: 'none'
+        };
         // Use key to force re-render when styles finish loading
         // This ensures Tailwind classes are applied after the stylesheet loads
-        return (_jsx(PuckPreviewThemeContext.Provider, { value: isDark, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', minHeight: '100vh' }, children: [shouldShowHeader && LayoutHeader && (_jsx("div", { style: headerFooterStyle, children: _jsx(LayoutHeader, {}) })), _jsx("div", { style: contentStyle, children: children }), shouldShowFooter && LayoutFooter && (_jsx("div", { style: headerFooterStyle, children: _jsx(LayoutFooter, {}) }))] }, stylesLoaded ? 'styles-loaded' : 'styles-loading') }));
+        return /*#__PURE__*/ _jsx(PuckPreviewThemeContext.Provider, {
+            value: isDark,
+            children: /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    minHeight: '100vh'
+                },
+                children: [
+                    shouldShowHeader && LayoutHeader && /*#__PURE__*/ _jsx("div", {
+                        style: headerFooterStyle,
+                        children: /*#__PURE__*/ _jsx(LayoutHeader, {})
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        style: contentStyle,
+                        children: children
+                    }),
+                    shouldShowFooter && LayoutFooter && /*#__PURE__*/ _jsx("div", {
+                        style: headerFooterStyle,
+                        children: /*#__PURE__*/ _jsx(LayoutFooter, {})
+                    })
+                ]
+            }, stylesLoaded ? 'styles-loaded' : 'styles-loading')
+        });
     }
     // Use key to force re-render when styles finish loading
-    return (_jsx(PuckPreviewThemeContext.Provider, { value: isDark, children: _jsx("div", { children: children }, stylesLoaded ? 'styles-loaded' : 'styles-loading') }));
+    return /*#__PURE__*/ _jsx(PuckPreviewThemeContext.Provider, {
+        value: isDark,
+        children: /*#__PURE__*/ _jsx("div", {
+            children: children
+        }, stylesLoaded ? 'styles-loaded' : 'styles-loading')
+    });
 });
-//# sourceMappingURL=IframeWrapper.js.map

package/dist/editor/components/LoadingState.d.ts

@@ -10,5 +10,4 @@ export interface LoadingStateProps {
  *
  * Used as the fallback for dynamic import with ssr: false
  */
-export declare function LoadingState({ message }: LoadingStateProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=LoadingState.d.ts.map
+export declare function LoadingState({ message }: LoadingStateProps): import("react").JSX.Element;

package/dist/editor/components/LoadingState.js

@@ -5,8 +5,20 @@ import { Loader2 } from 'lucide-react';
  * Loading indicator shown while the Puck editor is being loaded
  *
  * Used as the fallback for dynamic import with ssr: false
- */
-export function LoadingState({ message = 'Loading editor...' }) {
-    return (_jsx("div", { className: "h-screen flex items-center justify-center bg-gray-50", children: _jsxs("div", { className: "text-center", children: [_jsx(Loader2, { className: "h-8 w-8 animate-spin text-gray-600 mx-auto mb-4" }), _jsx("p", { className: "text-gray-600", children: message })] }) }));
+ */ export function LoadingState({ message = 'Loading editor...' }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: "h-screen flex items-center justify-center bg-gray-50",
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "text-center",
+            children: [
+                /*#__PURE__*/ _jsx(Loader2, {
+                    className: "h-8 w-8 animate-spin text-gray-600 mx-auto mb-4"
+                }),
+                /*#__PURE__*/ _jsx("p", {
+                    className: "text-gray-600",
+                    children: message
+                })
+            ]
+        })
+    });
 }
-//# sourceMappingURL=LoadingState.js.map

package/dist/editor/components/PreviewModal.d.ts

@@ -64,4 +64,3 @@ export interface PreviewModalProps {
  * - Links show confirmation dialog before navigating
  */
 export declare const PreviewModal: import("react").NamedExoticComponent<PreviewModalProps>;
-//# sourceMappingURL=PreviewModal.d.ts.map