@delmaredigital/payload-puck 0.1.3 → 0.3.0

package/dist/editor/components/HeaderActions.js

@@ -0,0 +1,254 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useCallback } from 'react';
+import { createUsePuck } from '@measured/puck';
+import { ArrowLeft, Save, ExternalLink, Loader2, Check, MousePointerClick, MousePointer, Upload, AlertTriangle, Eye, } from 'lucide-react';
+import { VersionHistory } from './VersionHistory.js';
+// Create usePuck hook for accessing editor state
+const usePuck = createUsePuck();
+// Shared styles
+const styles = {
+    buttonBase: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        whiteSpace: 'nowrap',
+        fontSize: '14px',
+        fontWeight: 500,
+        borderRadius: '6px',
+        transition: 'background-color 0.15s, border-color 0.15s',
+        cursor: 'pointer',
+        border: 'none',
+    },
+    buttonSecondary: {
+        padding: '6px 12px',
+        backgroundColor: 'var(--theme-bg)',
+        color: 'var(--theme-elevation-700)',
+        border: '1px solid var(--theme-elevation-200)',
+    },
+    buttonPrimary: {
+        padding: '6px 12px',
+        backgroundColor: 'var(--theme-elevation-900)',
+        color: 'var(--theme-bg)',
+        border: '1px solid var(--theme-elevation-900)',
+    },
+    buttonDisabled: {
+        opacity: 0.5,
+        cursor: 'not-allowed',
+    },
+    icon: {
+        width: '16px',
+        height: '16px',
+        marginRight: '4px',
+        flexShrink: 0,
+    },
+    iconSmall: {
+        width: '14px',
+        height: '14px',
+    },
+    badge: {
+        padding: '4px 10px',
+        borderRadius: '9999px',
+        fontSize: '12px',
+        fontWeight: 500,
+        whiteSpace: 'nowrap',
+    },
+    badgePublished: {
+        backgroundColor: 'var(--theme-success-100)',
+        color: 'var(--theme-success-700)',
+        border: '1px solid var(--theme-success-200)',
+    },
+    badgeUnpublished: {
+        backgroundColor: 'var(--theme-warning-100)',
+        color: 'var(--theme-warning-700)',
+        border: '1px solid var(--theme-warning-200)',
+    },
+    badgeDraft: {
+        backgroundColor: 'var(--theme-elevation-100)',
+        color: 'var(--theme-elevation-600)',
+        border: '1px solid var(--theme-elevation-200)',
+    },
+    statusText: {
+        fontSize: '12px',
+        color: 'var(--theme-elevation-500)',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '4px',
+        whiteSpace: 'nowrap',
+    },
+    unsavedText: {
+        fontSize: '12px',
+        color: 'var(--theme-warning-600)',
+        fontWeight: 500,
+        whiteSpace: 'nowrap',
+    },
+    versionText: {
+        fontSize: '10px',
+        color: 'var(--theme-elevation-400)',
+        fontFamily: 'monospace',
+    },
+    errorButton: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '6px',
+        padding: '6px 10px',
+        backgroundColor: 'var(--theme-error-50)',
+        border: '1px solid var(--theme-error-200)',
+        borderRadius: '6px',
+        color: 'var(--theme-error-700)',
+        fontSize: '12px',
+        fontWeight: 500,
+        cursor: 'pointer',
+    },
+    modalOverlay: {
+        position: 'fixed',
+        inset: 0,
+        zIndex: 9999,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    },
+    modalContainer: {
+        backgroundColor: 'var(--theme-bg)',
+        borderRadius: '8px',
+        boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+        maxWidth: '448px',
+        width: '100%',
+        margin: '0 16px',
+        overflow: 'hidden',
+    },
+    modalHeader: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px',
+        padding: '16px 20px',
+        borderBottom: '1px solid var(--theme-elevation-150)',
+        backgroundColor: 'var(--theme-error-50)',
+    },
+    modalIconWrapper: {
+        flexShrink: 0,
+        width: '40px',
+        height: '40px',
+        borderRadius: '50%',
+        backgroundColor: 'var(--theme-error-100)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    modalTitle: {
+        fontSize: '16px',
+        fontWeight: 600,
+        color: 'var(--theme-elevation-900)',
+        margin: 0,
+    },
+    modalSubtitle: {
+        fontSize: '14px',
+        color: 'var(--theme-elevation-500)',
+        margin: 0,
+    },
+    modalBody: {
+        padding: '16px 20px',
+    },
+    modalBodyText: {
+        fontSize: '14px',
+        color: 'var(--theme-elevation-700)',
+        margin: 0,
+    },
+    modalFooter: {
+        padding: '16px 20px',
+        backgroundColor: 'var(--theme-elevation-50)',
+        borderTop: '1px solid var(--theme-elevation-150)',
+        display: 'flex',
+        justifyContent: 'flex-end',
+    },
+    toggleContainer: {
+        display: 'flex',
+        gap: '4px',
+    },
+    toggleButton: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '4px',
+        fontSize: '12px',
+        fontWeight: 500,
+        borderRadius: '4px',
+        transition: 'background-color 0.15s',
+        padding: '6px 10px',
+        cursor: 'pointer',
+    },
+    toggleActive: {
+        backgroundColor: 'var(--theme-elevation-900)',
+        color: 'var(--theme-bg)',
+        border: '1px solid var(--theme-elevation-900)',
+    },
+    toggleInactive: {
+        backgroundColor: 'var(--theme-elevation-100)',
+        color: 'var(--theme-elevation-500)',
+        border: '1px solid var(--theme-elevation-200)',
+    },
+};
+/**
+ * Custom header actions component for the Puck editor
+ *
+ * Provides standard actions: Back, Edit/Interactive toggle, View Page, Save Draft
+ * Also displays save status and last saved time.
+ */
+export const HeaderActions = memo(function HeaderActions({ children, onBack, onPreview, onSave, onPublish, isSaving, hasUnsavedChanges, lastSaved, documentStatus, wasPublished, actionsStart, actionsEnd, showSaveDraft = true, showViewPage = true, showInteractiveToggle = false, showPreviewButton = true, onOpenPreview, showVersionHistory = true, pageId, apiEndpoint = '/api/puck/pages', saveError, onDismissError, }) {
+    const appState = usePuck((s) => s.appState);
+    const dispatch = usePuck((s) => s.dispatch);
+    const isInteractive = appState.ui.previewMode === 'interactive';
+    const togglePreviewMode = useCallback(() => {
+        dispatch({
+            type: 'setUi',
+            ui: {
+                previewMode: isInteractive ? 'edit' : 'interactive',
+            },
+        });
+    }, [dispatch, isInteractive]);
+    const handleSaveClick = useCallback(() => {
+        onSave(appState.data);
+    }, [onSave, appState.data]);
+    const handlePublishClick = useCallback(() => {
+        if (onPublish) {
+            onPublish(appState.data);
+        }
+    }, [onPublish, appState.data]);
+    return (_jsxs(_Fragment, { children: [actionsStart, _jsxs("button", { type: "button", onClick: onBack, style: { ...styles.buttonBase, ...styles.buttonSecondary }, children: [_jsx(ArrowLeft, { style: styles.icon }), "Back"] }), _jsx("span", { style: styles.versionText, children: "v0.3.0" }), documentStatus && (() => {
+                const isPublished = documentStatus === 'published';
+                const hasUnpublishedChanges = documentStatus === 'draft' && wasPublished;
+                let badgeLabel;
+                let badgeStyle;
+                if (isPublished) {
+                    badgeLabel = 'Published';
+                    badgeStyle = { ...styles.badge, ...styles.badgePublished };
+                }
+                else if (hasUnpublishedChanges) {
+                    badgeLabel = 'Unpublished Changes';
+                    badgeStyle = { ...styles.badge, ...styles.badgeUnpublished };
+                }
+                else {
+                    badgeLabel = 'Draft';
+                    badgeStyle = { ...styles.badge, ...styles.badgeDraft };
+                }
+                return _jsx("span", { style: badgeStyle, children: badgeLabel });
+            })(), showInteractiveToggle && (_jsxs("div", { style: styles.toggleContainer, children: [_jsxs("button", { type: "button", onClick: () => isInteractive && togglePreviewMode(), style: {
+                            ...styles.toggleButton,
+                            ...(!isInteractive ? styles.toggleActive : styles.toggleInactive),
+                        }, children: [_jsx(MousePointer, { style: styles.iconSmall }), "Edit"] }), _jsxs("button", { type: "button", onClick: () => !isInteractive && togglePreviewMode(), style: {
+                            ...styles.toggleButton,
+                            ...(isInteractive ? styles.toggleActive : styles.toggleInactive),
+                        }, children: [_jsx(MousePointerClick, { style: styles.iconSmall }), "Interactive"] })] })), lastSaved && !saveError && (_jsxs("span", { style: styles.statusText, children: [_jsx(Check, { style: { width: '12px', height: '12px', flexShrink: 0 } }), "Saved ", lastSaved.toLocaleTimeString()] })), hasUnsavedChanges && !saveError && (_jsx("span", { style: styles.unsavedText, children: "Unsaved" })), saveError && (_jsxs("button", { type: "button", onClick: () => { }, style: styles.errorButton, children: [_jsx(AlertTriangle, { style: { width: '16px', height: '16px', color: 'var(--theme-error-500)', flexShrink: 0 } }), "Error"] })), saveError && (_jsx("div", { style: styles.modalOverlay, onClick: onDismissError, children: _jsxs("div", { style: styles.modalContainer, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { style: styles.modalHeader, children: [_jsx("div", { style: styles.modalIconWrapper, children: _jsx(AlertTriangle, { style: { width: '20px', height: '20px', color: 'var(--theme-error-600)' } }) }), _jsxs("div", { children: [_jsx("h3", { style: styles.modalTitle, children: "Save Failed" }), _jsx("p", { style: styles.modalSubtitle, children: "Unable to save your changes" })] })] }), _jsx("div", { style: styles.modalBody, children: _jsx("p", { style: styles.modalBodyText, children: saveError }) }), _jsx("div", { style: styles.modalFooter, children: _jsx("button", { type: "button", onClick: onDismissError, style: { ...styles.buttonBase, ...styles.buttonPrimary }, children: "Close" }) })] }) })), showPreviewButton && onOpenPreview && (_jsxs("button", { type: "button", onClick: onOpenPreview, disabled: isSaving, style: {
+                    ...styles.buttonBase,
+                    ...styles.buttonPrimary,
+                    ...(isSaving ? styles.buttonDisabled : {}),
+                }, children: [_jsx(Eye, { style: styles.icon }), "Preview"] })), showViewPage && (_jsxs("button", { type: "button", onClick: onPreview, style: { ...styles.buttonBase, ...styles.buttonSecondary }, children: [_jsx(ExternalLink, { style: styles.icon }), "View"] })), showVersionHistory && pageId && (_jsx(VersionHistory, { pageId: pageId, apiEndpoint: apiEndpoint, disabled: isSaving })), showSaveDraft && (_jsxs("button", { type: "button", onClick: handleSaveClick, disabled: isSaving || !hasUnsavedChanges, style: {
+                    ...styles.buttonBase,
+                    ...styles.buttonSecondary,
+                    ...((isSaving || !hasUnsavedChanges) ? styles.buttonDisabled : {}),
+                }, children: [isSaving ? (_jsx(Loader2, { style: { ...styles.icon, animation: 'spin 1s linear infinite' } })) : (_jsx(Save, { style: styles.icon })), "Save"] })), onPublish && (_jsxs("button", { type: "button", onClick: handlePublishClick, disabled: isSaving, style: {
+                    ...styles.buttonBase,
+                    ...styles.buttonPrimary,
+                    ...(isSaving ? styles.buttonDisabled : {}),
+                }, children: [isSaving ? (_jsx(Loader2, { style: { ...styles.icon, animation: 'spin 1s linear infinite' } })) : (_jsx(Upload, { style: styles.icon })), "Publish"] })), actionsEnd, !onPublish && children] }));
+});
+//# sourceMappingURL=HeaderActions.js.map

package/dist/editor/components/HeaderActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderActions.js","sourceRoot":"","sources":["../../../src/editor/components/HeaderActions.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,77 @@
+import { type ReactNode, type ComponentType } from 'react';
+import type { LayoutDefinition } from '../../layouts';
+/**
+ * Layout style configuration for theme-aware preview
+ * @deprecated Use LayoutDefinition with editorBackground and editorDarkMode instead
+ */
+export interface LayoutStyle {
+    /**
+     * CSS background value (color, gradient, etc.)
+     */
+    background: string;
+    /**
+     * Whether this layout uses dark mode styling
+     */
+    isDark: boolean;
+    /**
+     * Header component to render above the page content in the editor preview
+     */
+    header?: ComponentType;
+    /**
+     * Footer component to render below the page content in the editor preview
+     */
+    footer?: ComponentType;
+}
+export interface IframeWrapperProps {
+    children: ReactNode;
+    /**
+     * The iframe document to apply styles to
+     */
+    document?: Document;
+    /**
+     * Layout definitions - the primary way to configure layouts.
+     * Reads header, footer, editorBackground, and editorDarkMode from each layout.
+     */
+    layouts?: LayoutDefinition[];
+    /**
+     * Layout style configurations keyed by layout value
+     * @deprecated Use `layouts` prop instead
+     */
+    layoutStyles?: Record<string, LayoutStyle>;
+    /**
+     * Key in root.props to read layout value from
+     * @default 'pageLayout'
+     */
+    layoutKey?: string;
+    /**
+     * Default layout to use if none specified
+     * @default 'default'
+     */
+    defaultLayout?: string;
+}
+/**
+ * Theme-aware iframe wrapper component
+ *
+ * Uses usePuck to read the pageLayout from root.props and applies
+ * appropriate background and theme class to the preview iframe.
+ *
+ * @example
+ * ```tsx
+ * // Using layouts (recommended)
+ * const overrides = {
+ *   iframe: ({ children, document }) => (
+ *     <IframeWrapper
+ *       document={document}
+ *       layouts={[
+ *         { value: 'default', label: 'Default', header: Header, footer: Footer },
+ *         { value: 'landing', label: 'Landing', editorBackground: '#f8fafc' },
+ *       ]}
+ *     >
+ *       {children}
+ *     </IframeWrapper>
+ *   ),
+ * }
+ * ```
+ */
+export declare const IframeWrapper: import("react").NamedExoticComponent<IframeWrapperProps>;
+//# sourceMappingURL=IframeWrapper.d.ts.map

package/dist/editor/components/IframeWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IframeWrapper.d.ts","sourceRoot":"","sources":["../../../src/editor/components/IframeWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA4B,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAA;AAEpF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAMrD;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,UAAU,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,aAAa,CAAA;CACvB;AAaD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAA;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAA;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAUD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,aAAa,0DAgQxB,CAAA"}

package/dist/editor/components/IframeWrapper.js

@@ -0,0 +1,257 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useEffect, useMemo } from 'react';
+import { createUsePuck } from '@measured/puck';
+import { backgroundValueToCSS } from '../../fields/shared';
+// Create usePuck hook for accessing editor state
+const usePuck = createUsePuck();
+/**
+ * Default layout config
+ */
+const DEFAULT_LAYOUT_CONFIG = {
+    background: '#ffffff',
+    isDark: false,
+};
+/**
+ * Theme-aware iframe wrapper component
+ *
+ * Uses usePuck to read the pageLayout from root.props and applies
+ * appropriate background and theme class to the preview iframe.
+ *
+ * @example
+ * ```tsx
+ * // Using layouts (recommended)
+ * const overrides = {
+ *   iframe: ({ children, document }) => (
+ *     <IframeWrapper
+ *       document={document}
+ *       layouts={[
+ *         { value: 'default', label: 'Default', header: Header, footer: Footer },
+ *         { value: 'landing', label: 'Landing', editorBackground: '#f8fafc' },
+ *       ]}
+ *     >
+ *       {children}
+ *     </IframeWrapper>
+ *   ),
+ * }
+ * ```
+ */
+export const IframeWrapper = memo(function IframeWrapper({ children, document: iframeDoc, layouts, layoutStyles, layoutKey = 'pageLayout', defaultLayout = 'default', }) {
+    const appState = usePuck((s) => s.appState);
+    // Check if we're in interactive mode (links should be clickable)
+    const isInteractive = appState.ui.previewMode === 'interactive';
+    // Read layout value and page-level overrides from root props
+    const rootProps = appState.data.root?.props;
+    const layoutValue = rootProps?.[layoutKey] || defaultLayout;
+    // Page-level overrides
+    const showHeaderOverride = rootProps?.showHeader;
+    const showFooterOverride = rootProps?.showFooter;
+    const pageBackground = rootProps?.pageBackground;
+    // Convert layouts array to config map, or use deprecated layoutStyles
+    const layoutConfigMap = useMemo(() => {
+        // If layouts prop provided, convert to internal format
+        if (layouts) {
+            const map = {};
+            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,
+                };
+            }
+            return map;
+        }
+        // Fall back to deprecated layoutStyles if provided
+        if (layoutStyles) {
+            return layoutStyles;
+        }
+        // Default fallback
+        return { default: DEFAULT_LAYOUT_CONFIG };
+    }, [layouts, layoutStyles]);
+    // Get config for current layout
+    const layoutConfig = layoutConfigMap[layoutValue] || layoutConfigMap[defaultLayout] || DEFAULT_LAYOUT_CONFIG;
+    useEffect(() => {
+        if (!iframeDoc)
+            return;
+        const body = iframeDoc.body;
+        const html = iframeDoc.documentElement;
+        // Apply background - page-level override takes precedence
+        if (pageBackground) {
+            const bgStyles = backgroundValueToCSS(pageBackground);
+            // Clear previous background styles
+            body.style.background = '';
+            body.style.backgroundColor = '';
+            body.style.backgroundImage = '';
+            // Apply new styles
+            Object.assign(body.style, bgStyles);
+        }
+        else {
+            body.style.background = layoutConfig.background;
+        }
+        body.style.backgroundAttachment = 'fixed';
+        body.style.minHeight = '100vh';
+        // Apply theme class for dark/light mode
+        if (layoutConfig.isDark) {
+            html.classList.add('dark');
+            html.classList.remove('light');
+            body.style.color = '#ffffff';
+        }
+        else {
+            html.classList.remove('dark');
+            html.classList.add('light');
+            body.style.color = '#1f2937'; // gray-800
+        }
+        // Inject richtext-output styles into the iframe for proper heading/list rendering
+        const RICHTEXT_STYLES_ID = 'puck-richtext-output-styles';
+        if (!iframeDoc.getElementById(RICHTEXT_STYLES_ID)) {
+            const style = iframeDoc.createElement('style');
+            style.id = RICHTEXT_STYLES_ID;
+            style.textContent = `
+        /* Rich Text Output Styles for Puck Preview */
+        .richtext-output {
+          font-size: 1.125rem;
+          line-height: 1.75;
+          color: inherit;
+        }
+        .richtext-output h1 {
+          margin-top: 2rem;
+          margin-bottom: 1rem;
+          font-weight: 700;
+          font-size: 2.25rem;
+          line-height: 1.2;
+        }
+        .richtext-output h1:first-child { margin-top: 0; }
+        .richtext-output h2 {
+          margin-top: 2rem;
+          margin-bottom: 1rem;
+          font-weight: 700;
+          font-size: 1.875rem;
+          line-height: 1.25;
+        }
+        .richtext-output h2:first-child { margin-top: 0; }
+        .richtext-output h3 {
+          margin-top: 2rem;
+          margin-bottom: 1rem;
+          font-weight: 700;
+          font-size: 1.5rem;
+          line-height: 1.3;
+        }
+        .richtext-output h3:first-child { margin-top: 0; }
+        .richtext-output h4 {
+          margin-top: 2rem;
+          margin-bottom: 1rem;
+          font-weight: 700;
+          font-size: 1.25rem;
+          line-height: 1.35;
+        }
+        .richtext-output h4:first-child { margin-top: 0; }
+        .richtext-output p {
+          margin-bottom: 1.25rem;
+        }
+        .richtext-output p:last-child { margin-bottom: 0; }
+        .richtext-output ul {
+          margin-bottom: 1.25rem;
+          padding-left: 2rem;
+          list-style-type: disc !important;
+        }
+        .richtext-output ol {
+          margin-bottom: 1.25rem;
+          padding-left: 2rem;
+          list-style-type: decimal !important;
+        }
+        .richtext-output li {
+          margin-bottom: 0.5rem;
+          display: list-item !important;
+        }
+        .richtext-output li::marker {
+          color: currentColor;
+        }
+        .richtext-output ul ul,
+        .richtext-output ol ul {
+          list-style-type: circle !important;
+          margin-top: 0.5rem;
+          margin-bottom: 0;
+        }
+        .richtext-output ul ul ul,
+        .richtext-output ol ul ul {
+          list-style-type: square !important;
+        }
+        .richtext-output ol ol,
+        .richtext-output ul ol {
+          list-style-type: lower-alpha !important;
+          margin-top: 0.5rem;
+          margin-bottom: 0;
+        }
+        .richtext-output blockquote {
+          margin: 1.5rem 0;
+          padding-left: 1.5rem;
+          border-left: 4px solid #e5e7eb;
+          font-style: italic;
+        }
+        .richtext-output a {
+          color: #2563eb;
+          text-decoration: underline;
+        }
+        .richtext-output a:hover { opacity: 0.8; }
+        .richtext-output code {
+          background-color: #f3f4f6;
+          padding: 0.125rem 0.25rem;
+          border-radius: 0.25rem;
+          font-size: 0.875rem;
+        }
+        .richtext-output mark {
+          background-color: #fef08a;
+          padding: 0.125rem 0.25rem;
+          border-radius: 0.125rem;
+        }
+        .richtext-output s,
+        .richtext-output strike {
+          text-decoration: line-through;
+        }
+        @media (max-width: 768px) {
+          .richtext-output { font-size: 1rem; }
+          .richtext-output h1 { font-size: 1.875rem; }
+          .richtext-output h2 { font-size: 1.5rem; }
+          .richtext-output h3 { font-size: 1.25rem; }
+        }
+      `;
+            iframeDoc.head.appendChild(style);
+        }
+    }, [iframeDoc, layoutConfig, pageBackground]);
+    // Get header/footer components from layout config
+    const LayoutHeader = layoutConfig.header;
+    const LayoutFooter = layoutConfig.footer;
+    // Determine header/footer visibility based on page-level overrides
+    // '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;
+    // 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)
+        const contentStyle = {
+            flex: 1,
+            position: 'relative',
+            // Add padding-top for sticky headers so content doesn't render behind them
+            ...(shouldShowHeader && layoutConfig.stickyHeaderHeight && { paddingTop: layoutConfig.stickyHeaderHeight }),
+        };
+        // Disable pointer events on header/footer in edit mode to prevent accidental clicks
+        const headerFooterStyle = isInteractive
+            ? {}
+            : { pointerEvents: 'none' };
+        return (_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, {}) }))] }));
+    }
+    return _jsx(_Fragment, { children: children });
+});
+//# sourceMappingURL=IframeWrapper.js.map

package/dist/editor/components/IframeWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IframeWrapper.js","sourceRoot":"","sources":["../../../src/editor/components/IframeWrapper.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,14 @@
+export interface LoadingStateProps {
+    /**
+     * Loading message to display
+     * @default 'Loading editor...'
+     */
+    message?: string;
+}
+/**
+ * Loading indicator shown while the Puck editor is being loaded
+ *
+ * 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

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingState.d.ts","sourceRoot":"","sources":["../../../src/editor/components/LoadingState.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAAE,OAA6B,EAAE,EAAE,iBAAiB,2CAShF"}

package/dist/editor/components/LoadingState.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 })] }) }));
+}
+//# sourceMappingURL=LoadingState.js.map

package/dist/editor/components/LoadingState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingState.js","sourceRoot":"","sources":["../../../src/editor/components/LoadingState.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAUtC;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,OAAO,GAAG,mBAAmB,EAAqB;IAC/E,OAAO,CACL,cAAK,SAAS,EAAC,sDAAsD,YACnE,eAAK,SAAS,EAAC,aAAa,aAC1B,KAAC,OAAO,IAAC,SAAS,EAAC,iDAAiD,GAAG,EACvE,YAAG,SAAS,EAAC,eAAe,YAAE,OAAO,GAAK,IACtC,GACF,CACP,CAAA;AACH,CAAC"}