@delmaredigital/payload-puck 0.6.30 → 0.8.0

package/README.md

@@ -32,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) |
@@ -42,6 +43,56 @@ 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.8.0 (breaking)
+
+**Editor CSS is now built by your app, not by this plugin.** Three options collapse into one, and `withPuckCSS` is gone.
+
+Add a build step using Tailwind's own CLI:
+
+```jsonc
+// package.json
+"scripts": {
+  "build:puck-css": "tailwindcss -i ./src/app/(frontend)/globals.css -o ./public/puck-editor-styles.css",
+  "build": "pnpm build:puck-css && next build",
+  "dev": "pnpm build:puck-css --watch & next dev"
+}
+```
+
+Then pass the URL:
+
+```typescript
+// before
+createPuckPlugin({
+  editorStylesheet: 'src/app/(frontend)/globals.css',
+  editorStylesheetCompiled: '/puck-editor-styles.css',
+  editorStylesheetUrls: ['https://fonts.googleapis.com/css2?family=Inter'],
+})
+
+// after
+createPuckPlugin({
+  editorStylesheets: ['/puck-editor-styles.css', 'https://fonts.googleapis.com/css2?family=Inter'],
+})
+```
+
+Finally, remove the `withPuckCSS` import and wrapper from `next.config.js`, and drop any `editorStylesheets` prop on `PuckConfigProvider` — the plugin wires it through automatically now.
+
+> **Why:** the old approach compiled CSS at runtime in dev and via a **webpack plugin** in production. Next.js 16 defaults to Turbopack, which never runs `webpack()` hooks — so the production stylesheet was silently never generated and the editor rendered unstyled, while local dev looked perfect. One artifact, built by your own toolchain, now resolves identically everywhere.
+
+Also removed: the `/api/puck/styles` endpoint, the `/next` entry point, and the `postcss` / `postcss-load-config` peer dependencies.
+
+### 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
@@ -239,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) {
@@ -287,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) {
@@ -340,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
     ]);
@@ -415,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) {
@@ -505,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/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/plugin/index.d.ts

@@ -42,7 +42,6 @@ export { generatePagesCollection } from './collections/Pages.js';
 export { TemplatesCollection } from '../collections/Templates.js';
 export { getPuckFields, getPuckCollectionConfig, puckDataField, editorVersionField, createEditorVersionField, pageLayoutField, createPageLayoutField, isHomepageField, seoFieldGroup, conversionFieldGroup, } from './fields/index.js';
 export { generatePuckEditField };
-export { PUCK_STYLES_ENDPOINT } from '../endpoints/styles.js';
 export { createIsHomepageUniqueHook, unsetHomepage, HomepageConflictError, } from './hooks/index.js';
 export type { IsHomepageUniqueHookOptions } from './hooks/index.js';
 export type { PuckPluginOptions, PuckAdminConfig } from '../types/index.js';

package/dist/plugin/index.js

@@ -5,7 +5,6 @@ import { AiContextCollection } from '../ai/collections/AiContext.js';
 import { getPuckFields } from './fields/index.js';
 import { createIsHomepageUniqueHook } from './hooks/isHomepageUnique.js';
 import { createListHandler, createCreateHandler, createGetHandler, createUpdateHandler, createDeleteHandler, createVersionsHandler, createRestoreHandler } from '../endpoints/index.js';
-import { createStylesHandler, PUCK_STYLES_ENDPOINT } from '../endpoints/styles.js';
 import { createAiEndpointHandler } from '../endpoints/ai.js';
 import { createPromptsListHandler, createPromptsCreateHandler, createPromptsUpdateHandler, createPromptsDeleteHandler } from '../endpoints/prompts.js';
 import { createContextListHandler, createContextCreateHandler, createContextUpdateHandler, createContextDeleteHandler } from '../endpoints/context.js';
@@ -105,7 +104,7 @@ import { createContextListHandler, createContextCreateHandler, createContextUpda
  * })
  * ```
  */ export function createPuckPlugin(options = {}) {
-    const { pagesCollection = 'pages', autoGenerateCollection = true, admin: pluginAdminConfig = {}, enableAdminView = true, adminViewPath = '/puck-editor', enableEndpoints = true, pageTreeIntegration, editorStylesheet, editorStylesheetUrls = [], editorStylesheetCompiled, ai: aiConfig, previewUrl, rootPropsMapping } = options;
+    const { pagesCollection = 'pages', autoGenerateCollection = true, admin: pluginAdminConfig = {}, enableAdminView = true, adminViewPath = '/puck-editor', enableEndpoints = true, pageTreeIntegration, editorStylesheets: editorStylesheetsOption = [], ai: aiConfig, previewUrl, rootPropsMapping } = options;
     const { addEditButton = true } = pluginAdminConfig;
     // Parse page-tree integration config
     // - undefined: auto-detect at runtime (null stored, view will check for pageSegment field)
@@ -274,32 +273,17 @@ import { createContextListHandler, createContextCreateHandler, createContextUpda
             '/puck/:collection/:id/versions',
             '/puck/:collection/:id/restore'
         ]);
-        // Build styles endpoint URL list for PuckConfigProvider
-        // In production, prefer the pre-compiled static CSS file if provided
-        // In development, use runtime compilation endpoint for hot reload
-        const isProduction = process.env.NODE_ENV === 'production';
-        const useCompiledCss = isProduction && editorStylesheetCompiled;
+        // Stylesheet URLs for the editor preview iframe. These are passed straight
+        // through: the same URLs resolve in development and production, so the
+        // editor can no longer look correct locally and unstyled in production.
         const editorStylesheets = [
-            ...useCompiledCss ? [
-                editorStylesheetCompiled
-            ] : editorStylesheet ? [
-                PUCK_STYLES_ENDPOINT
-            ] : [],
-            ...editorStylesheetUrls
+            ...editorStylesheetsOption
         ];
         // Filter out parameterized puck endpoints from previous plugin instances
         // so we can re-register them with the merged collections list
         const incomingEndpoints = (incomingConfig.endpoints || []).filter((ep)=>!parameterizedPuckPaths.has(ep.path));
         const endpoints = enableEndpoints ? [
             ...incomingEndpoints,
-            // Styles endpoint MUST be first - exact match before parameterized routes
-            ...editorStylesheet ? [
-                {
-                    path: '/puck/styles',
-                    method: 'get',
-                    handler: createStylesHandler(editorStylesheet)
-                }
-            ] : [],
             // AI endpoint (exact match, before parameterized routes)
             ...aiConfig?.enabled ? [
                 {
@@ -441,7 +425,5 @@ export { TemplatesCollection } from '../collections/Templates.js';
 export { getPuckFields, getPuckCollectionConfig, puckDataField, editorVersionField, createEditorVersionField, pageLayoutField, createPageLayoutField, isHomepageField, seoFieldGroup, conversionFieldGroup } from './fields/index.js';
 // Export the edit button generator for hybrid collections
 export { generatePuckEditField };
-// Export styles endpoint constant
-export { PUCK_STYLES_ENDPOINT } from '../endpoints/styles.js';
 // Re-export hooks for hybrid collection integration
 export { createIsHomepageUniqueHook, unsetHomepage, HomepageConflictError } from './hooks/index.js';

package/dist/types/index.d.ts

@@ -141,42 +141,44 @@ export interface PuckPluginOptions {
      */
     pageTreeIntegration?: boolean | PageTreeIntegrationOptions;
     /**
-     * Path to CSS file for editor iframe styling.
-     * The plugin compiles this file with PostCSS/Tailwind and serves it at /api/puck/styles.
-     * This allows the editor preview to display your frontend styles (CSS variables, Tailwind utilities).
+     * Stylesheet URLs to load inside the editor preview iframe, in order.
      *
-     * @example 'src/app/(frontend)/globals.css'
-     * @example 'src/styles/globals.css'
-     */
-    editorStylesheet?: string;
-    /**
-     * Additional stylesheet URLs to load in the editor iframe.
-     * Use this for external stylesheets like Google Fonts that can't be compiled.
+     * These are plain URLs the browser fetches — a static file your build emits,
+     * or any external stylesheet. The plugin does not compile CSS: your app's own
+     * toolchain already does that far better than we can, and compiling it a
+     * second time was the source of a dev/production split where the editor
+     * looked correct locally and unstyled in production.
      *
-     * @example ['https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700']
-     */
-    editorStylesheetUrls?: string[];
-    /**
-     * Path to pre-compiled CSS file for production use.
-     * When set, the editor will load this static file instead of using the runtime compilation endpoint.
-     * Use with `withPuckCSS()` from `@delmaredigital/payload-puck/next` to compile CSS at build time.
+     * Generate the file with Tailwind's own CLI as part of your build, so the
+     * editor loads byte-identical CSS in every environment:
      *
-     * @example '/puck-editor-styles.css'
+     * ```jsonc
+     * // package.json
+     * {
+     *   "scripts": {
+     *     "build:puck-css": "tailwindcss -i ./src/app/(frontend)/globals.css -o ./public/puck-editor-styles.css",
+     *     "build": "pnpm build:puck-css && next build",
+     *     "dev": "pnpm build:puck-css --watch & next dev"
+     *   }
+     * }
+     * ```
      *
-     * @example
      * ```typescript
-     * // next.config.js
-     * import { withPuckCSS } from '@delmaredigital/payload-puck/next'
-     * export default withPuckCSS({ cssInput: 'src/globals.css' })(nextConfig)
-     *
-     * // payload.config.ts
      * createPuckPlugin({
-     *   editorStylesheet: 'src/globals.css', // For dev (runtime compilation)
-     *   editorStylesheetCompiled: '/puck-editor-styles.css', // For prod (static file)
+     *   editorStylesheets: [
+     *     '/puck-editor-styles.css',
+     *     'https://fonts.googleapis.com/css2?family=Inter:wght@400;700',
+     *   ],
      * })
      * ```
+     *
+     * Resolved URLs are published on `config.custom.puck.editorStylesheets` and
+     * passed to the editor automatically — you do not need to repeat them on
+     * `PuckConfigProvider`.
+     *
+     * @example ['/puck-editor-styles.css']
      */
-    editorStylesheetCompiled?: string;
+    editorStylesheets?: string[];
     /**
      * AI configuration for the plugin.
      * Enables AI-powered page generation in the editor.

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.6.30";
+export declare const VERSION = "0.8.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.30';
+export const VERSION = '0.8.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@delmaredigital/payload-puck",
-  "version": "0.6.30",
+  "version": "0.8.0",
   "description": "Puck visual page builder plugin for Payload CMS",
   "type": "module",
   "license": "MIT",
@@ -82,11 +82,6 @@
       "types": "./dist/ai/index.d.ts",
       "default": "./dist/ai/index.js"
     },
-    "./next": {
-      "import": "./dist/next/index.js",
-      "types": "./dist/next/index.d.ts",
-      "default": "./dist/next/index.js"
-    },
     "./email": {
       "import": "./dist/email/index.js",
       "types": "./dist/email/index.d.ts",
@@ -104,25 +99,25 @@
   "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",
-    "postcss": ">=8.0.0",
-    "postcss-load-config": ">=4.0.0",
     "react": ">=19.2.1",
     "react-dom": ">=19.2.1",
     "tailwindcss": ">=3.0.0 || >=4.0.0",
@@ -135,12 +130,6 @@
     "@payloadcms/next": {
       "optional": true
     },
-    "postcss": {
-      "optional": true
-    },
-    "postcss-load-config": {
-      "optional": true
-    },
     "tailwindcss": {
       "optional": true
     },
@@ -152,9 +141,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 +160,22 @@
     "lucide-react": "^0.469.0"
   },
   "devDependencies": {
-    "@payloadcms/next": "^3.84.1",
-    "@payloadcms/ui": "^3.84.1",
-    "@puckeditor/core": "^0.22.0",
+    "@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 +187,7 @@
     "cms"
   ],
   "engines": {
-    "node": "^18.20.2 || >=20.9.0"
+    "node": ">=20.9.0"
   },
   "author": "Delmare Digital",
   "repository": {

package/dist/endpoints/postcss.d.js

@@ -1,4 +0,0 @@
-/**
- * Ambient type declarations for optional PostCSS/Tailwind peer dependencies
- * These modules are dynamically imported at runtime from the consumer's project
- */ 

package/dist/endpoints/styles.d.ts

@@ -1,19 +0,0 @@
-/**
- * Styles Endpoint Handler
- *
- * Compiles and serves CSS for the editor iframe.
- * Uses the consumer's PostCSS/Tailwind installation via peer dependencies.
- * Loads the project's postcss.config.js for proper plugin configuration.
- */
-import type { PayloadHandler } from 'payload';
-/**
- * Creates a handler that serves compiled CSS for the editor iframe
- *
- * @param cssFilePath - Path to CSS file relative to project root
- * @returns PayloadHandler that serves compiled CSS
- */
-export declare function createStylesHandler(cssFilePath: string): PayloadHandler;
-/**
- * Helper constant for the styles endpoint URL
- */
-export declare const PUCK_STYLES_ENDPOINT = "/api/puck/styles";

package/dist/endpoints/styles.js

@@ -1,153 +0,0 @@
-/**
- * Styles Endpoint Handler
- *
- * Compiles and serves CSS for the editor iframe.
- * Uses the consumer's PostCSS/Tailwind installation via peer dependencies.
- * Loads the project's postcss.config.js for proper plugin configuration.
- */ import { readFileSync, statSync, existsSync } from 'fs';
-import { join } from 'path';
-const cssCache = new Map();
-/**
- * Compile CSS using PostCSS with the project's configuration
- * Loads postcss.config.js from project root for proper plugin setup
- * Falls back to minimal Tailwind-only config if no config file found
- */ async function compileCss(css, filePath) {
-    try {
-        // Dynamic import to use consumer's PostCSS installation
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        let postcss;
-        try {
-            postcss = (await import(/* webpackIgnore: true */ 'postcss')).default;
-        } catch  {
-            console.warn('[payload-puck] PostCSS not found. CSS will not be processed. Install postcss as a dependency.');
-            return css;
-        }
-        // Try to load the project's postcss.config.js using postcss-load-config
-        // This ensures all plugins (typography, etc.) are properly loaded
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        let processor;
-        let usedProjectConfig = false;
-        try {
-            // Dynamic import of postcss-load-config (optional peer dependency)
-            // This package is commonly installed alongside PostCSS
-            const loadConfigModule = await import(/* webpackIgnore: true */ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore - optional dependency may not have types
-            'postcss-load-config');
-            const postcssLoadConfig = loadConfigModule.default;
-            // Load config from project root (where postcss.config.js lives)
-            const { plugins } = await postcssLoadConfig({}, process.cwd());
-            processor = postcss(plugins);
-            usedProjectConfig = true;
-        } catch  {
-            // postcss-load-config not available or no config found - this is fine
-            // Fall back to direct Tailwind import silently
-            // Try Tailwind v4 first (@tailwindcss/postcss)
-            try {
-                const tailwindcss = (await import(/* webpackIgnore: true */ '@tailwindcss/postcss')).default;
-                processor = postcss([
-                    tailwindcss
-                ]);
-            } catch  {
-                // Fall back to Tailwind v3 (tailwindcss)
-                try {
-                    const tailwindcss = (await import(/* webpackIgnore: true */ 'tailwindcss')).default;
-                    processor = postcss([
-                        tailwindcss
-                    ]);
-                } catch  {
-                    // No Tailwind available - just return the CSS as-is
-                    console.warn('[payload-puck] No Tailwind CSS installation found. CSS will not be processed.');
-                    return css;
-                }
-            }
-        }
-        const result = await processor.process(css, {
-            from: filePath
-        });
-        return result.css;
-    } catch (error) {
-        console.error('[payload-puck] CSS compilation error:', error);
-        throw error;
-    }
-}
-/**
- * Creates a handler that serves compiled CSS for the editor iframe
- *
- * @param cssFilePath - Path to CSS file relative to project root
- * @returns PayloadHandler that serves compiled CSS
- */ export function createStylesHandler(cssFilePath) {
-    return async (req)=>{
-        try {
-            const fullPath = join(process.cwd(), cssFilePath);
-            // Check if file exists
-            if (!existsSync(fullPath)) {
-                console.error(`[payload-puck] CSS file not found: ${fullPath}`);
-                return new Response(`/* CSS file not found: ${cssFilePath} */`, {
-                    status: 404,
-                    headers: {
-                        'Content-Type': 'text/css'
-                    }
-                });
-            }
-            // 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': 'no-cache',
-                        ETag: etag,
-                        'Last-Modified': new Date(mtime).toUTCString(),
-                        'X-Puck-Cache': 'hit'
-                    }
-                });
-            }
-            // Read and compile CSS
-            const rawCss = readFileSync(fullPath, 'utf-8');
-            const compiledCss = await compileCss(rawCss, fullPath);
-            // Update cache
-            cssCache.set(cssFilePath, {
-                css: compiledCss,
-                mtime
-            });
-            return new Response(compiledCss, {
-                headers: {
-                    'Content-Type': 'text/css',
-                    'Cache-Control': 'no-cache',
-                    ETag: etag,
-                    'Last-Modified': new Date(mtime).toUTCString(),
-                    'X-Puck-Cache': 'miss'
-                }
-            });
-        } catch (error) {
-            console.error('[payload-puck] Styles endpoint error:', error);
-            return new Response(`/* Error compiling CSS: ${error instanceof Error ? error.message : 'Unknown error'} */`, {
-                status: 500,
-                headers: {
-                    'Content-Type': 'text/css'
-                }
-            });
-        }
-    };
-}
-/**
- * Helper constant for the styles endpoint URL
- */ export const PUCK_STYLES_ENDPOINT = '/api/puck/styles';

package/dist/next/index.d.ts

@@ -1,64 +0,0 @@
-/**
- * Next.js Configuration Wrapper for Puck CSS
- *
- * Compiles CSS at build time using the project's PostCSS/Tailwind configuration.
- * This ensures the editor iframe styles work in production (Vercel, etc.) where
- * source files aren't available at runtime.
- *
- * @example
- * ```js
- * // next.config.js
- * import { withPuckCSS } from '@delmaredigital/payload-puck/next'
- * import { withPayload } from '@payloadcms/next/withPayload'
- *
- * export default withPuckCSS({
- *   cssInput: 'src/app/(frontend)/globals.css',
- * })(withPayload(nextConfig))
- * ```
- */
-import type { NextConfig } from 'next';
-/**
- * Options for the withPuckCSS wrapper
- */
-export interface WithPuckCSSOptions {
-    /**
-     * Path to the source CSS file (relative to project root)
-     * @example 'src/app/(frontend)/globals.css'
-     */
-    cssInput: string;
-    /**
-     * Output path for compiled CSS (relative to public/)
-     * @default 'puck-editor-styles.css'
-     */
-    cssOutput?: string;
-    /**
-     * Whether to skip compilation in development
-     * @default true
-     */
-    skipInDev?: boolean;
-}
-/**
- * Default output filename for compiled CSS
- */
-export declare const PUCK_CSS_OUTPUT_DEFAULT = "puck-editor-styles.css";
-/**
- * Next.js configuration wrapper that compiles Puck editor CSS at build time
- *
- * @param options - Configuration options
- * @returns A function that wraps your Next.js config
- *
- * @example
- * ```js
- * import { withPuckCSS } from '@delmaredigital/payload-puck/next'
- *
- * export default withPuckCSS({
- *   cssInput: 'src/app/(frontend)/globals.css',
- * })(nextConfig)
- * ```
- */
-export declare function withPuckCSS(options: WithPuckCSSOptions): (nextConfig: NextConfig) => NextConfig;
-/**
- * Get the URL path for the compiled CSS file
- * Use this in your plugin configuration
- */
-export declare function getPuckCSSPath(cssOutput?: string): string;

package/dist/next/index.js

@@ -1,155 +0,0 @@
-/**
- * Next.js Configuration Wrapper for Puck CSS
- *
- * Compiles CSS at build time using the project's PostCSS/Tailwind configuration.
- * This ensures the editor iframe styles work in production (Vercel, etc.) where
- * source files aren't available at runtime.
- *
- * @example
- * ```js
- * // next.config.js
- * import { withPuckCSS } from '@delmaredigital/payload-puck/next'
- * import { withPayload } from '@payloadcms/next/withPayload'
- *
- * export default withPuckCSS({
- *   cssInput: 'src/app/(frontend)/globals.css',
- * })(withPayload(nextConfig))
- * ```
- */ import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'fs';
-import { dirname, resolve } from 'path';
-/**
- * Default output filename for compiled CSS
- */ export const PUCK_CSS_OUTPUT_DEFAULT = 'puck-editor-styles.css';
-/**
- * Compile CSS using PostCSS with the project's configuration
- */ async function compileCss(css, filePath) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let postcss;
-    try {
-        postcss = (await import('postcss')).default;
-    } catch  {
-        console.warn('[payload-puck] PostCSS not found. CSS will not be compiled.');
-        return css;
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let processor;
-    try {
-        // Try to load project's postcss.config.js
-        const loadConfigModule = await import('postcss-load-config');
-        const postcssLoadConfig = loadConfigModule.default;
-        const { plugins } = await postcssLoadConfig({}, process.cwd());
-        processor = postcss(plugins);
-    } catch  {
-        // Fall back to direct Tailwind import
-        try {
-            const tailwindcss = (await import('@tailwindcss/postcss')).default;
-            processor = postcss([
-                tailwindcss
-            ]);
-        } catch  {
-            try {
-                const tailwindcss = (await import('tailwindcss')).default;
-                processor = postcss([
-                    tailwindcss
-                ]);
-            } catch  {
-                console.warn('[payload-puck] No Tailwind CSS found. CSS will not be compiled.');
-                return css;
-            }
-        }
-    }
-    const result = await processor.process(css, {
-        from: filePath
-    });
-    return result.css;
-}
-/**
- * Webpack plugin that compiles CSS at build time
- */ class PuckCSSWebpackPlugin {
-    options;
-    compiled = false;
-    constructor(options){
-        this.options = options;
-    }
-    apply(compiler) {
-        compiler.hooks.beforeCompile.tapPromise('PuckCSSWebpackPlugin', async ()=>{
-            // Only compile once per build
-            if (this.compiled) return;
-            this.compiled = true;
-            const { cssInput, cssOutput, skipInDev } = this.options;
-            // Skip in development if configured
-            if (skipInDev && process.env.NODE_ENV === 'development') {
-                console.log('[payload-puck] Skipping CSS compilation in development');
-                return;
-            }
-            const inputPath = resolve(process.cwd(), cssInput);
-            const outputPath = resolve(process.cwd(), 'public', cssOutput);
-            // Check if source file exists
-            if (!existsSync(inputPath)) {
-                console.error(`[payload-puck] CSS source file not found: ${inputPath}`);
-                return;
-            }
-            try {
-                console.log(`[payload-puck] Compiling CSS: ${cssInput} -> public/${cssOutput}`);
-                // Read source CSS
-                const rawCss = readFileSync(inputPath, 'utf-8');
-                // Compile with PostCSS/Tailwind
-                const compiledCss = await compileCss(rawCss, inputPath);
-                // Ensure public directory exists
-                const outputDir = dirname(outputPath);
-                if (!existsSync(outputDir)) {
-                    mkdirSync(outputDir, {
-                        recursive: true
-                    });
-                }
-                // Write compiled CSS
-                writeFileSync(outputPath, compiledCss, 'utf-8');
-                console.log(`[payload-puck] CSS compiled successfully (${(compiledCss.length / 1024).toFixed(1)}KB)`);
-            } catch (error) {
-                console.error('[payload-puck] CSS compilation failed:', error);
-            }
-        });
-    }
-}
-/**
- * Next.js configuration wrapper that compiles Puck editor CSS at build time
- *
- * @param options - Configuration options
- * @returns A function that wraps your Next.js config
- *
- * @example
- * ```js
- * import { withPuckCSS } from '@delmaredigital/payload-puck/next'
- *
- * export default withPuckCSS({
- *   cssInput: 'src/app/(frontend)/globals.css',
- * })(nextConfig)
- * ```
- */ export function withPuckCSS(options) {
-    const resolvedOptions = {
-        cssInput: options.cssInput,
-        cssOutput: options.cssOutput ?? PUCK_CSS_OUTPUT_DEFAULT,
-        skipInDev: options.skipInDev ?? true
-    };
-    return (nextConfig)=>{
-        return {
-            ...nextConfig,
-            webpack: (webpackConfig, context)=>{
-                // Add our CSS compilation plugin
-                webpackConfig.plugins = webpackConfig.plugins || [];
-                webpackConfig.plugins.push(new PuckCSSWebpackPlugin(resolvedOptions));
-                // Call existing webpack config if present
-                if (typeof nextConfig.webpack === 'function') {
-                    return nextConfig.webpack(webpackConfig, context);
-                }
-                return webpackConfig;
-            }
-        };
-    };
-}
-/**
- * Get the URL path for the compiled CSS file
- * Use this in your plugin configuration
- */ export function getPuckCSSPath(cssOutput) {
-    return `/${cssOutput ?? PUCK_CSS_OUTPUT_DEFAULT}`;
-}