@delmaredigital/payload-puck 0.6.29 → 0.7.0

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>
 
@@ -34,7 +32,8 @@ pnpm add @delmaredigital/payload-puck @puckeditor/core
 
 | Dependency | Version |
 |------------|---------|
-| `@puckeditor/core` | >= 0.21.0 |
+| `node` | >= 20.9.0 |
+| `@puckeditor/core` | >= 0.23.0 |
 | `payload` | >= 3.69.0 |
 | `@payloadcms/next` | >= 3.69.0 |
 | `next` | >= 15.4.8 (see security note below) |
@@ -44,6 +43,19 @@ pnpm add @delmaredigital/payload-puck @puckeditor/core
 
 > **Security:** If your app uses Next.js middleware (or proxy.ts) to protect dynamic routes, use `next` >= 15.5.16 / 16.2.5 to pick up the fix for [CVE-2026-44574](https://github.com/vercel/next.js/security/advisories/GHSA-492v-c6pp-mqqv) (middleware bypass via dynamic route parameter injection). Turbopack users need >= 15.5.18 / 16.2.6.
 
+### Upgrading to 0.7.0 (breaking)
+
+`0.7.0` raises two floors. Both are a one-line change for most projects:
+
+```bash
+pnpm add @puckeditor/core@^0.23.0   # peer floor moved from >=0.21.0
+```
+
+- **`@puckeditor/core` now requires >= 0.23.0.** The Puck plugins this package bundles are versioned in lockstep with Puck core and import it from the host, so running them against an older core is not a supported combination. Puck 0.23 ships a rewritten canvas drag-and-drop engine and a redesigned outline — **the editing experience changes visibly**, even though no API you call has changed. Worth a pass through your editor after upgrading. See the [Puck 0.23 release notes](https://puckeditor.com/blog/puck-023).
+- **Node 18 is no longer supported;** the floor is now `>=20.9.0`. Node 18 is end-of-life and Puck core 0.23 itself requires `>=20.0.0`.
+
+No exports, props, or configuration options were removed or renamed. Full detail in the [changelog](./CHANGELOG.md).
+
 ---
 
 ## Quick Start

package/dist/editor/PuckEditorImpl.client.js

@@ -16,6 +16,7 @@ import { IframeWrapper } from './components/IframeWrapper.js';
 import { PreviewModal } from './components/PreviewModal.js';
 import { DarkModeStyles } from './components/DarkModeStyles.js';
 import { useUnsavedChanges } from './hooks/useUnsavedChanges.js';
+import { isDataEqual } from './utils/isDataEqual.js';
 import { createVersionHistoryPlugin } from './plugins/versionHistoryPlugin.js';
 import { ThemeProvider } from '../theme/index.js';
 import { usePuckConfig } from '../views/PuckConfigContext.js';
@@ -117,6 +118,11 @@ import { useAiPrompts } from '../ai/hooks/useAiPrompts.js';
     ]);
     // Use a ref to track latest data without causing re-renders
     const latestDataRef = useRef(dataWithSlug);
+    // Track the last loaded/saved data so we can distinguish real user edits from
+    // no-op onChange dispatches (e.g. Puck's mount-time resolve pass). Refreshed at
+    // every markClean() site (save / publish) so subsequent edits diff against the
+    // most recently persisted state.
+    const savedDataRef = useRef(dataWithSlug);
     // Get editor stylesheets from PuckConfigProvider context (as fallback)
     const { editorStylesheets: contextStylesheets, editorCss: contextCss } = usePuckConfig();
     // Props take precedence over context
@@ -135,8 +141,10 @@ import { useAiPrompts } from '../ai/hooks/useAiPrompts.js';
         const fromBase = baseStylesheets || [];
         const fromLayout = currentLayout?.editorStylesheets || [];
         return [
-            ...fromBase,
-            ...fromLayout
+            ...new Set([
+                ...fromBase,
+                ...fromLayout
+            ])
         ];
     }, [
         baseStylesheets,
@@ -237,6 +245,7 @@ import { useAiPrompts } from '../ai/hooks/useAiPrompts.js';
             setSaveError(null); // Clear any previous error
             // After saving as draft, update status to draft (shows "Unpublished Changes" if was published)
             setDocumentStatus('draft');
+            savedDataRef.current = typedData;
             markClean();
             onSaveSuccess?.(data);
         } catch (error) {
@@ -285,6 +294,7 @@ import { useAiPrompts } from '../ai/hooks/useAiPrompts.js';
             setSaveError(null); // Clear any previous error
             setDocumentStatus('published'); // Update status after successful publish
             setWasPublished(true); // Mark as having been published
+            savedDataRef.current = typedData;
             markClean();
             onSaveSuccess?.(data);
         } catch (error) {
@@ -338,9 +348,19 @@ import { useAiPrompts } from '../ai/hooks/useAiPrompts.js';
     // Handle data change
     const handleChange = useCallback((data)=>{
         latestDataRef.current = data;
-        markDirty();
+        // Only mark dirty when the data actually differs from the last loaded/saved
+        // state. Puck fires onChange for no-op mount-time resolves (which can differ
+        // from the loaded data only by undefined-valued keys); treating those as
+        // edits produces a spurious "Unsaved" flag on load. isDataEqual is
+        // undefined-tolerant so those resolves compare equal and clear the flag.
+        if (isDataEqual(data, savedDataRef.current)) {
+            markClean();
+        } else {
+            markDirty();
+        }
         onChangeProp?.(data);
     }, [
+        markClean,
         markDirty,
         onChangeProp
     ]);
@@ -413,6 +433,7 @@ import { useAiPrompts } from '../ai/hooks/useAiPrompts.js';
             setLastSaved(new Date());
             setSaveError(null);
             setDocumentStatus('draft');
+            savedDataRef.current = data;
             markClean();
             onSaveSuccess?.(data);
         } catch (error) {
@@ -503,18 +524,32 @@ import { useAiPrompts } from '../ai/hooks/useAiPrompts.js';
     const defaultPlugins = [
         headingAnalyzer
     ];
+    // Restoring a version has already persisted that data server-side, so it
+    // becomes the new saved baseline. Without this, the `setData` dispatch the
+    // restore performs fires an onChange that diffs against the pre-restore
+    // baseline and immediately re-flags the (already saved) document as dirty.
+    const handleRestoreSuccess = useCallback((restoredData)=>{
+        if (restoredData) {
+            const typedData = restoredData;
+            savedDataRef.current = typedData;
+            latestDataRef.current = typedData;
+        }
+        markClean();
+    }, [
+        markClean
+    ]);
     // Version history plugin for the plugin rail
     const versionHistoryPlugin = useMemo(()=>{
         if (!pageId) return null;
         return createVersionHistoryPlugin({
             pageId,
             apiEndpoint,
-            onRestoreSuccess: markClean
+            onRestoreSuccess: handleRestoreSuccess
         });
     }, [
         pageId,
         apiEndpoint,
-        markClean
+        handleRestoreSuccess
     ]);
     // Fetch AI prompts client-side when prompts collection is enabled
     // This allows prompts to update in real-time when edited via the prompt editor panel

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/editor/plugins/VersionHistoryPanel.d.ts

@@ -29,9 +29,13 @@ export interface VersionHistoryPanelProps {
      */
     apiEndpoint?: string;
     /**
-     * Callback after successful restore (e.g., to mark editor as clean)
+     * Callback after successful restore (e.g., to mark editor as clean).
+     *
+     * Receives the restored data that was dispatched into the editor, so the
+     * caller can treat it as the new "last saved" baseline — the restore endpoint
+     * has already persisted it server-side.
      */
-    onRestoreSuccess?: () => void;
+    onRestoreSuccess?: (restoredData?: Data) => void;
 }
 /**
  * Version history panel for the Puck plugin rail

package/dist/editor/plugins/VersionHistoryPanel.js

@@ -256,8 +256,9 @@ const styles = {
             // Show success message
             setSuccessMessage(`Restored version from ${formatDate(version.updatedAt)}`);
             setTimeout(()=>setSuccessMessage(null), 3000);
-            // Notify parent to mark as clean
-            onRestoreSuccess?.();
+            // Notify parent to mark as clean, handing over the restored data so it
+            // becomes the new saved baseline (the restore already persisted it).
+            onRestoreSuccess?.(restoredDoc?.puckData);
             // Refresh version list
             fetchVersions();
         } catch (err) {

package/dist/editor/plugins/versionHistoryPlugin.d.ts

@@ -1,4 +1,4 @@
-import type { Plugin } from '@puckeditor/core';
+import type { Data, Plugin } from '@puckeditor/core';
 export interface VersionHistoryPluginOptions {
     /**
      * Page ID to fetch versions for
@@ -10,9 +10,10 @@ export interface VersionHistoryPluginOptions {
      */
     apiEndpoint?: string;
     /**
-     * Callback after successful restore (e.g., to mark editor as clean)
+     * Callback after successful restore (e.g., to mark editor as clean).
+     * Receives the restored data that was dispatched into the editor.
      */
-    onRestoreSuccess?: () => void;
+    onRestoreSuccess?: (restoredData?: Data) => void;
 }
 /**
  * Creates a Puck plugin for version history

package/dist/editor/utils/index.d.ts

@@ -1,2 +1,3 @@
 export { injectPageTreeFields } from './injectPageTreeFields.js';
 export { detectPageTree, hasPageTreeFields } from './detectPageTree.js';
+export { isDataEqual } from './isDataEqual.js';

package/dist/editor/utils/index.js

@@ -1,2 +1,3 @@
 export { injectPageTreeFields } from './injectPageTreeFields.js';
 export { detectPageTree, hasPageTreeFields } from './detectPageTree.js';
+export { isDataEqual } from './isDataEqual.js';

package/dist/editor/utils/isDataEqual.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Undefined-tolerant deep equality for Puck data.
+ *
+ * Puck's mount-time resolve pass (`resolveAndCommitData`) can dispatch a `replace`
+ * even when the net content is unchanged — e.g. a resolved node differs from the
+ * loaded node only by an `undefined`-valued key. Strict deep-equal libraries such
+ * as `fast-equals` treat `{}` and `{ k: undefined }` as different, so that no-op
+ * resolve looks like a real edit and spuriously marks the document dirty.
+ *
+ * This comparison treats an absent key and an `undefined`-valued key as equal, so
+ * a resolve that only adds/removes `undefined` values compares equal to the loaded
+ * data. Object key order is irrelevant (as with any deep equal); array order is
+ * significant (Puck content order is meaningful).
+ */
+export declare function isDataEqual(a: unknown, b: unknown): boolean;

package/dist/editor/utils/isDataEqual.js

@@ -0,0 +1,57 @@
+/**
+ * Undefined-tolerant deep equality for Puck data.
+ *
+ * Puck's mount-time resolve pass (`resolveAndCommitData`) can dispatch a `replace`
+ * even when the net content is unchanged — e.g. a resolved node differs from the
+ * loaded node only by an `undefined`-valued key. Strict deep-equal libraries such
+ * as `fast-equals` treat `{}` and `{ k: undefined }` as different, so that no-op
+ * resolve looks like a real edit and spuriously marks the document dirty.
+ *
+ * This comparison treats an absent key and an `undefined`-valued key as equal, so
+ * a resolve that only adds/removes `undefined` values compares equal to the loaded
+ * data. Object key order is irrelevant (as with any deep equal); array order is
+ * significant (Puck content order is meaningful).
+ */ export function isDataEqual(a, b) {
+    if (Object.is(a, b)) {
+        return true;
+    }
+    // NaN is handled by Object.is above; remaining primitives that differ are unequal.
+    if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null) {
+        return false;
+    }
+    const aIsArray = Array.isArray(a);
+    const bIsArray = Array.isArray(b);
+    if (aIsArray !== bIsArray) {
+        return false;
+    }
+    if (aIsArray && bIsArray) {
+        if (a.length !== b.length) {
+            return false;
+        }
+        for(let i = 0; i < a.length; i++){
+            if (!isDataEqual(a[i], b[i])) {
+                return false;
+            }
+        }
+        return true;
+    }
+    const aObj = a;
+    const bObj = b;
+    // Compare the union of keys, treating a missing key and an `undefined` value as
+    // equivalent so that `{}` and `{ k: undefined }` are considered equal.
+    const keys = new Set([
+        ...Object.keys(aObj),
+        ...Object.keys(bObj)
+    ]);
+    for (const key of keys){
+        const aVal = aObj[key];
+        const bVal = bObj[key];
+        if (aVal === undefined && bVal === undefined) {
+            continue;
+        }
+        if (!isDataEqual(aVal, bVal)) {
+            return false;
+        }
+    }
+    return true;
+}

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.29";
+export declare const VERSION = "0.7.0";

package/dist/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@delmaredigital/payload-puck",
-  "version": "0.6.29",
+  "version": "0.7.0",
   "description": "Puck visual page builder plugin for Payload CMS",
   "type": "module",
   "license": "MIT",
@@ -104,20 +104,22 @@
   "scripts": {
     "dev-publish": "pnpm build && pnpm version prerelease --preid=dev --no-git-tag-version && pnpm publish --registry http://localhost:4873 --no-git-checks --tag dev",
     "generate-version": "node scripts/generate-version.js",
-    "prebuild": "pnpm generate-version",
-    "build": "pnpm build:swc && pnpm build:types && pnpm copyfiles",
+    "build": "pnpm generate-version && pnpm build:swc && pnpm build:types && pnpm copyfiles",
     "build:swc": "swc ./src -d ./dist --strip-leading-paths",
     "build:types": "tsc --outDir dist",
     "copyfiles": "copyfiles -u 1 \"src/**/*.css\" dist",
     "dev": "pnpm generate-version && swc ./src -d ./dist --strip-leading-paths --watch",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "pnpm generate-version && tsc --noEmit && tsc -p tsconfig.test.json",
+    "test": "pnpm generate-version && vitest run",
+    "test:watch": "pnpm generate-version && vitest",
+    "test:coverage": "pnpm generate-version && vitest run --coverage",
     "clean": "rm -rf dist",
     "prepublishOnly": "pnpm build"
   },
   "peerDependencies": {
     "@payloadcms/next": ">=3.69.0",
     "@payloadcms/ui": ">=3.69.0",
-    "@puckeditor/core": ">=0.21.0",
+    "@puckeditor/core": ">=0.23.0",
     "@tailwindcss/postcss": ">=4.0.0",
     "next": ">=15.4.8",
     "payload": ">=3.69.0",
@@ -152,9 +154,9 @@
     }
   },
   "dependencies": {
-    "@puckeditor/cloud-client": "^0.7.0",
-    "@puckeditor/plugin-ai": "^0.7.0",
-    "@puckeditor/plugin-heading-analyzer": "^0.21.2",
+    "@puckeditor/cloud-client": "^0.8.2",
+    "@puckeditor/plugin-ai": "^0.8.2",
+    "@puckeditor/plugin-heading-analyzer": "^0.23.0",
     "@radix-ui/react-popover": "^1.1.15",
     "@tiptap/core": "^3.20.1",
     "@tiptap/extension-color": "^3.20.1",
@@ -171,20 +173,22 @@
     "lucide-react": "^0.469.0"
   },
   "devDependencies": {
-    "@payloadcms/next": "^3.84.1",
-    "@payloadcms/ui": "^3.84.1",
-    "@puckeditor/core": "^0.21.2",
+    "@payloadcms/next": "^3.87.1",
+    "@payloadcms/ui": "^3.87.1",
+    "@puckeditor/core": "^0.23.0",
     "@swc/cli": "^0.6.0",
     "@swc/core": "^1.15.18",
     "@types/node": "^24.12.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "@vitest/coverage-v8": "^3.2.7",
     "copyfiles": "^2.4.1",
-    "next": "^16.2.6",
-    "payload": "^3.84.1",
+    "next": "^16.3.0",
+    "payload": "^3.87.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vitest": "^3.2.7"
   },
   "keywords": [
     "payload",
@@ -196,7 +200,7 @@
     "cms"
   ],
   "engines": {
-    "node": "^18.20.2 || >=20.9.0"
+    "node": ">=20.9.0"
   },
   "author": "Delmare Digital",
   "repository": {