@delmaredigital/payload-puck 0.6.28 → 0.6.30

package/README.md

@@ -3,8 +3,6 @@
 A PayloadCMS plugin for integrating [Puck](https://puckeditor.com) visual page builder. Build pages visually with drag-and-drop components while leveraging Payload's content management capabilities.
 
 <p align="center">
-  <a href="https://demo.delmaredigital.com"><img src="https://img.shields.io/badge/Live_Demo-Try_It_Now-2ea44f?style=for-the-badge&logo=vercel&logoColor=white" alt="Live Demo - Try It Now"></a>
-  &nbsp;&nbsp;
   <a href="https://github.com/delmaredigital/dd-starter"><img src="https://img.shields.io/badge/Starter_Template-Use_This-blue?style=for-the-badge&logo=github&logoColor=white" alt="Starter Template - Use This"></a>
 </p>
 

package/dist/components/layout/Columns.js

@@ -225,10 +225,13 @@ export const ColumnsConfig = {
         // 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.
+        // NOTE: grid-template-columns must NOT be set inline — an inline style would
+        // outrank the @media rule below (inline beats stylesheet, media queries
+        // included), pinning the layout to one column. Both the mobile base and the
+        // responsive override live in the scoped <style> so the media query can win.
         const colsTemplate = resolveColumnsTemplate(safeCount, distribution);
         const gridStyles = {
             display: 'grid',
-            gridTemplateColumns: '1fr',
             gap,
             ...dimensionsResult.baseStyles,
             '--cols-template': colsTemplate
@@ -260,6 +263,7 @@ export const ColumnsConfig = {
                         }),
                         /*#__PURE__*/ _jsx("style", {
                             children: `
+            .${contentClass} { grid-template-columns: 1fr; }
             @media (min-width: 768px) {
               .${contentClass} {
                 grid-template-columns: var(--cols-template);

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

@@ -106,10 +106,13 @@ export const ColumnsConfig = {
         // 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.
+        // NOTE: grid-template-columns must NOT be set inline — an inline style would
+        // outrank the @media rule below (inline beats stylesheet, media queries
+        // included), pinning the layout to one column. Both the mobile base and the
+        // responsive override live in the scoped <style> so the media query can win.
         const colsTemplate = resolveColumnsTemplate(safeCount, distribution);
         const gridStyles = {
             display: 'grid',
-            gridTemplateColumns: '1fr',
             gap,
             ...dimensionsResult.baseStyles,
             '--cols-template': colsTemplate
@@ -141,6 +144,7 @@ export const ColumnsConfig = {
                         }),
                         /*#__PURE__*/ _jsx("style", {
                             children: `
+            .${contentClass} { grid-template-columns: 1fr; }
             @media (min-width: 768px) {
               .${contentClass} {
                 grid-template-columns: var(--cols-template);

package/dist/components/layout/Grid.js

@@ -183,9 +183,12 @@ export const GridConfig = {
         // 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.
+        // NOTE: grid-template-columns must NOT be set inline — an inline style would
+        // outrank the @media rule below (inline beats stylesheet, media queries
+        // included), pinning the layout to one column. Both the mobile base and the
+        // responsive override live in the scoped <style> so the media query can win.
         const gridStyles = {
             display: 'grid',
-            gridTemplateColumns: '1fr',
             gap,
             ...dimensionsResult.baseStyles,
             '--grid-cols': numColumns
@@ -208,6 +211,7 @@ export const GridConfig = {
                         }),
                         /*#__PURE__*/ _jsx("style", {
                             children: `
+            .${contentClass} { grid-template-columns: 1fr; }
             @media (min-width: 768px) {
               .${contentClass} {
                 grid-template-columns: repeat(var(--grid-cols), 1fr);

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

@@ -92,9 +92,12 @@ export const GridConfig = {
         // 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.
+        // NOTE: grid-template-columns must NOT be set inline — an inline style would
+        // outrank the @media rule below (inline beats stylesheet, media queries
+        // included), pinning the layout to one column. Both the mobile base and the
+        // responsive override live in the scoped <style> so the media query can win.
         const gridStyles = {
             display: 'grid',
-            gridTemplateColumns: '1fr',
             gap,
             ...dimensionsResult.baseStyles,
             '--grid-cols': numColumns
@@ -119,6 +122,7 @@ export const GridConfig = {
                         }),
                         /*#__PURE__*/ _jsx("style", {
                             children: `
+            .${contentClass} { grid-template-columns: 1fr; }
             @media (min-width: 768px) {
               .${contentClass} {
                 grid-template-columns: repeat(var(--grid-cols), 1fr);

package/dist/editor/PuckEditorImpl.client.js

@@ -135,8 +135,10 @@ import { useAiPrompts } from '../ai/hooks/useAiPrompts.js';
         const fromBase = baseStylesheets || [];
         const fromLayout = currentLayout?.editorStylesheets || [];
         return [
-            ...fromBase,
-            ...fromLayout
+            ...new Set([
+                ...fromBase,
+                ...fromLayout
+            ])
         ];
     }, [
         baseStylesheets,

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

@@ -78,14 +78,18 @@ export interface IframeWrapperProps {
      */
     defaultLayout?: string;
     /**
-     * Stylesheet URLs to inject into the iframe.
+     * Stylesheet URLs to render inside the iframe.
      * These are merged from PuckConfigProvider and layout-specific settings.
      * Use this to provide frontend CSS (Tailwind, CSS variables, etc.) that
      * header/footer components need for proper styling.
+     *
+     * Rendered as ordinary React children (not host-document resources), so
+     * this CSS only ever affects the iframe's own document, never the
+     * Payload admin page it's embedded in.
      */
     editorStylesheets?: string[];
     /**
-     * Raw CSS to inject into the iframe.
+     * Raw CSS to render inside the iframe.
      * Merged from PuckConfigProvider and layout-specific settings.
      * Useful for CSS variables or style overrides.
      */

package/dist/editor/components/IframeWrapper.js

@@ -1,6 +1,6 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useEffect, useMemo, useState, createContext, useContext } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useState, useCallback, createContext, useContext } from 'react';
 import { createUsePuck } from '@puckeditor/core';
 import { backgroundValueToCSS } from '../../fields/shared.js';
 // Create usePuck hook for accessing editor state
@@ -63,8 +63,6 @@ const usePuck = createUsePuck();
  * ```
  */ 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)
     const isInteractive = appState.ui.previewMode === 'interactive';
     // Read layout value and page-level overrides from root props
@@ -106,6 +104,44 @@ const usePuck = createUsePuck();
     const layoutConfig = layoutConfigMap[layoutValue] || layoutConfigMap[defaultLayout] || DEFAULT_LAYOUT_CONFIG;
     // Calculate isDark for context provider (same logic as in useEffect)
     const isDark = previewDarkModeOverride ?? layoutConfig.isDark;
+    // Resolve relative stylesheet URLs to absolute URLs. Puck's iframe uses
+    // srcDoc, whose relative-URL resolution can't be relied on to match the
+    // host origin, so resolve explicitly against window.location.origin.
+    const resolvedStylesheets = useMemo(()=>{
+        if (!editorStylesheets || editorStylesheets.length === 0) return [];
+        const origin = typeof window !== 'undefined' ? window.location.origin : '';
+        return editorStylesheets.map((href)=>href.startsWith('/') ? `${origin}${href}` : href);
+    }, [
+        editorStylesheets
+    ]);
+    // Track which stylesheet URLs have finished loading (or errored, which we
+    // also count as "settled" so a broken URL can't block rendering forever).
+    // This accumulates across the component's lifetime rather than resetting
+    // per-layout: if a layout switches back to a previously-loaded stylesheet,
+    // it's already known-loaded and doesn't need to be waited on again.
+    const [loadedHrefs, setLoadedHrefs] = useState(()=>new Set());
+    const markLoaded = useCallback((href)=>{
+        setLoadedHrefs((prev)=>prev.has(href) ? prev : new Set(prev).add(href));
+    }, []);
+    // Gate rendering children until every currently-relevant stylesheet has
+    // settled, to avoid a flash of unstyled content. Vacuously true when there
+    // are no stylesheets to wait for.
+    const stylesReady = resolvedStylesheets.every((href)=>loadedHrefs.has(href));
+    // Safety net: a <link>'s onLoad can fail to fire for a resource that's
+    // already complete in the browser cache before React attaches the
+    // handler (a known browser quirk, and the exact reason the pre-refactor
+    // implementation carried this same fallback). Without it, a missed event
+    // leaves `stylesReady` false forever, permanently blanking the iframe --
+    // worse than the FOUC this whole mechanism exists to prevent. `markLoaded`
+    // is idempotent, so this is a harmless no-op if the real event already
+    // fired first.
+    useEffect(()=>{
+        const timers = resolvedStylesheets.map((href)=>setTimeout(()=>markLoaded(href), 2000));
+        return ()=>timers.forEach(clearTimeout);
+    }, [
+        resolvedStylesheets,
+        markLoaded
+    ]);
     useEffect(()=>{
         if (!iframeDoc) return;
         const body = iframeDoc.body;
@@ -138,97 +174,6 @@ const usePuck = createUsePuck();
             html.setAttribute('data-theme', 'light');
             body.style.color = '#1f2937'; // gray-800
         }
-        // Inject external stylesheets (Tailwind CSS, CSS variables, etc.)
-        // These provide the styles needed for header/footer components
-        if (editorStylesheets && editorStylesheets.length > 0) {
-            let pendingLoads = 0;
-            let loadedCount = 0;
-            const checkAllLoaded = ()=>{
-                loadedCount++;
-                if (loadedCount >= pendingLoads) {
-                    // All stylesheets loaded - force browser to recalculate styles
-                    // This is necessary because the DOM was already rendered before CSS loaded
-                    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;
-                        // 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 {
-                            html.classList.remove('light');
-                            void html.offsetHeight; // Force reflow
-                            html.classList.add('light');
-                        }
-                        // Technique 2: Toggle visibility to force repaint
-                        body.style.visibility = 'hidden';
-                        void body.offsetHeight;
-                        body.style.visibility = '';
-                    });
-                }
-            };
-            // Get origin for resolving relative URLs
-            // Puck's iframe may use srcdoc which doesn't have a proper base URL,
-            // so relative paths like '/api/puck/styles' won't resolve correctly
-            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;
-                loadedIndexes.add(index);
-                checkAllLoaded();
-            };
-            editorStylesheets.forEach((href, index)=>{
-                const linkId = `puck-editor-stylesheet-${index}`;
-                const existingLink = iframeDoc.getElementById(linkId);
-                if (!existingLink) {
-                    pendingLoads++;
-                    const link = iframeDoc.createElement('link');
-                    link.id = linkId;
-                    link.rel = 'stylesheet';
-                    // 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
-                    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(()=>{
-                        if (!loadedIndexes.has(index)) {
-                            markLoaded(index);
-                        }
-                    }, 2000);
-                } 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));
-                }
-            });
-            // If no new stylesheets to load, mark as loaded
-            if (pendingLoads === 0 && !stylesLoaded) {
-                setStylesLoaded(true);
-            }
-        } else if (!stylesLoaded) {
-            // No stylesheets to load
-            setStylesLoaded(true);
-        }
-        // Inject custom CSS (CSS variables, overrides, etc.)
-        if (editorCss) {
-            const CUSTOM_CSS_ID = 'puck-editor-custom-css';
-            let style = iframeDoc.getElementById(CUSTOM_CSS_ID);
-            if (!style) {
-                style = iframeDoc.createElement('style');
-                style.id = CUSTOM_CSS_ID;
-                iframeDoc.head.appendChild(style);
-            }
-            style.textContent = editorCss;
-        }
         // 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)) {
@@ -349,9 +294,6 @@ const usePuck = createUsePuck();
         iframeDoc,
         layoutConfig,
         pageBackground,
-        editorStylesheets,
-        editorCss,
-        stylesLoaded,
         previewDarkModeOverride
     ]);
     // Get header/footer components from layout config
@@ -363,6 +305,26 @@ const usePuck = createUsePuck();
     // 'hide' = always hide
     const shouldShowHeader = showHeaderOverride === 'hide' ? false : showHeaderOverride === 'show' ? !!LayoutHeader : !!LayoutHeader;
     const shouldShowFooter = showFooterOverride === 'hide' ? false : showFooterOverride === 'show' ? !!LayoutFooter : !!LayoutFooter;
+    // Stylesheet <link>/<style> elements, rendered as ordinary React children.
+    // Because these render inside the iframe's own portaled tree (not the host
+    // document), this CSS only ever applies inside the iframe -- it can never
+    // reach the Payload admin page. Being ordinary (non-resource) elements,
+    // React's normal reconciliation adds/removes/updates them correctly on
+    // every render, including layout switches that change which stylesheets
+    // apply -- no special keying tricks needed.
+    const styleElements = /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            resolvedStylesheets.map((href)=>/*#__PURE__*/ _jsx("link", {
+                    rel: "stylesheet",
+                    href: href,
+                    onLoad: ()=>markLoaded(href),
+                    onError: ()=>markLoaded(href)
+                }, href)),
+            editorCss ? /*#__PURE__*/ _jsx("style", {
+                children: editorCss
+            }) : null
+        ]
+    });
     // 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)
@@ -378,38 +340,41 @@ const usePuck = createUsePuck();
         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 /*#__PURE__*/ _jsx(PuckPreviewThemeContext.Provider, {
+        return /*#__PURE__*/ _jsxs(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')
+            children: [
+                styleElements,
+                stylesReady && /*#__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, {})
+                        })
+                    ]
+                })
+            ]
         });
     }
-    // Use key to force re-render when styles finish loading
-    return /*#__PURE__*/ _jsx(PuckPreviewThemeContext.Provider, {
+    return /*#__PURE__*/ _jsxs(PuckPreviewThemeContext.Provider, {
         value: isDark,
-        children: /*#__PURE__*/ _jsx("div", {
-            children: children
-        }, stylesLoaded ? 'styles-loaded' : 'styles-loading')
+        children: [
+            styleElements,
+            stylesReady && /*#__PURE__*/ _jsx("div", {
+                children: children
+            })
+        ]
     });
 });

package/dist/endpoints/styles.js

@@ -76,7 +76,7 @@ const cssCache = new Map();
  * @param cssFilePath - Path to CSS file relative to project root
  * @returns PayloadHandler that serves compiled CSS
  */ export function createStylesHandler(cssFilePath) {
-    return async ()=>{
+    return async (req)=>{
         try {
             const fullPath = join(process.cwd(), cssFilePath);
             // Check if file exists
@@ -92,13 +92,30 @@ const cssCache = new Map();
             // Get file modification time for cache invalidation
             const stats = statSync(fullPath);
             const mtime = stats.mtimeMs;
+            // ETag derived from mtime - changes whenever the source file changes,
+            // whether from a dev-mode edit or a version upgrade recompiling output.
+            const etag = `"${mtime}"`;
+            // If the browser's cached copy is still fresh, tell it so without
+            // doing any file read/compilation work.
+            const ifNoneMatch = req.headers?.get('if-none-match');
+            if (ifNoneMatch === etag) {
+                return new Response(null, {
+                    status: 304,
+                    headers: {
+                        ETag: etag,
+                        'Cache-Control': 'no-cache'
+                    }
+                });
+            }
             // Check cache
             const cached = cssCache.get(cssFilePath);
             if (cached && cached.mtime === mtime) {
                 return new Response(cached.css, {
                     headers: {
                         'Content-Type': 'text/css',
-                        'Cache-Control': 'public, max-age=31536000, immutable',
+                        'Cache-Control': 'no-cache',
+                        ETag: etag,
+                        'Last-Modified': new Date(mtime).toUTCString(),
                         'X-Puck-Cache': 'hit'
                     }
                 });
@@ -114,7 +131,9 @@ const cssCache = new Map();
             return new Response(compiledCss, {
                 headers: {
                     'Content-Type': 'text/css',
-                    'Cache-Control': 'public, max-age=31536000, immutable',
+                    'Cache-Control': 'no-cache',
+                    ETag: etag,
+                    'Last-Modified': new Date(mtime).toUTCString(),
                     'X-Puck-Cache': 'miss'
                 }
             });

package/dist/version.d.ts

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

package/dist/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@delmaredigital/payload-puck",
-  "version": "0.6.28",
+  "version": "0.6.30",
   "description": "Puck visual page builder plugin for Payload CMS",
   "type": "module",
   "license": "MIT",
@@ -173,7 +173,7 @@
   "devDependencies": {
     "@payloadcms/next": "^3.84.1",
     "@payloadcms/ui": "^3.84.1",
-    "@puckeditor/core": "^0.21.2",
+    "@puckeditor/core": "^0.22.0",
     "@swc/cli": "^0.6.0",
     "@swc/core": "^1.15.18",
     "@types/node": "^24.12.0",