@delmaredigital/payload-puck 0.6.12 → 0.6.14

package/dist/endpoints/styles.js

@@ -4,24 +4,21 @@
  * 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 { 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) {
+ */ 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 {
+        } catch  {
             console.warn('[payload-puck] PostCSS not found. CSS will not be processed. Install postcss as a dependency.');
             return css;
         }
@@ -33,9 +30,7 @@ async function compileCss(css, filePath) {
         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
+            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;
@@ -43,32 +38,34 @@ async function compileCss(css, filePath) {
             const { plugins } = await postcssLoadConfig({}, process.cwd());
             processor = postcss(plugins);
             usedProjectConfig = true;
-        }
-        catch {
+        } 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 {
+                processor = postcss([
+                    tailwindcss
+                ]);
+            } catch  {
                 // Fall back to Tailwind v3 (tailwindcss)
                 try {
                     const tailwindcss = (await import(/* webpackIgnore: true */ 'tailwindcss')).default;
-                    processor = postcss([tailwindcss]);
-                }
-                catch {
+                    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 });
+        const result = await processor.process(css, {
+            from: filePath
+        });
         return result.css;
-    }
-    catch (error) {
+    } catch (error) {
         console.error('[payload-puck] CSS compilation error:', error);
         throw error;
     }
@@ -78,9 +75,8 @@ async function compileCss(css, filePath) {
  *
  * @param cssFilePath - Path to CSS file relative to project root
  * @returns PayloadHandler that serves compiled CSS
- */
-export function createStylesHandler(cssFilePath) {
-    return async () => {
+ */ export function createStylesHandler(cssFilePath) {
+    return async ()=>{
         try {
             const fullPath = join(process.cwd(), cssFilePath);
             // Check if file exists
@@ -89,8 +85,8 @@ export function createStylesHandler(cssFilePath) {
                 return new Response(`/* CSS file not found: ${cssFilePath} */`, {
                     status: 404,
                     headers: {
-                        'Content-Type': 'text/css',
-                    },
+                        'Content-Type': 'text/css'
+                    }
                 });
             }
             // Get file modification time for cache invalidation
@@ -103,36 +99,36 @@ export function createStylesHandler(cssFilePath) {
                     headers: {
                         'Content-Type': 'text/css',
                         'Cache-Control': 'public, max-age=31536000, immutable',
-                        'X-Puck-Cache': 'hit',
-                    },
+                        '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 });
+            cssCache.set(cssFilePath, {
+                css: compiledCss,
+                mtime
+            });
             return new Response(compiledCss, {
                 headers: {
                     'Content-Type': 'text/css',
                     'Cache-Control': 'public, max-age=31536000, immutable',
-                    'X-Puck-Cache': 'miss',
-                },
+                    'X-Puck-Cache': 'miss'
+                }
             });
-        }
-        catch (error) {
+        } 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',
-                },
+                    'Content-Type': 'text/css'
+                }
             });
         }
     };
 }
 /**
  * Helper constant for the styles endpoint URL
- */
-export const PUCK_STYLES_ENDPOINT = '/api/puck/styles';
-//# sourceMappingURL=styles.js.map
+ */ export const PUCK_STYLES_ENDPOINT = '/api/puck/styles';

package/dist/exports/client.d.ts

@@ -17,4 +17,3 @@ export { EditWithPuckButton, EditWithPuckLink } from '../admin/EditWithPuckButto
 export type { EditWithPuckButtonProps } from '../admin/EditWithPuckButton.js';
 export { injectPageTreeFields } from '../editor/utils/injectPageTreeFields.js';
 export { detectPageTree, hasPageTreeFields } from '../editor/utils/detectPageTree.js';
-//# sourceMappingURL=client.d.ts.map

package/dist/exports/client.js

@@ -9,8 +9,7 @@
  * ```tsx
  * import { PuckEditor, PuckConfigProvider } from '@delmaredigital/payload-puck/client'
  * ```
- */
-// Main editor component
+ */ // Main editor component
 export { PuckEditor } from '../editor/PuckEditor.js';
 // Context (optional - for multi-editor apps sharing config)
 export { PuckConfigProvider, usePuckConfig } from '../views/PuckConfigContext.js';
@@ -19,4 +18,3 @@ export { EditWithPuckButton, EditWithPuckLink } from '../admin/EditWithPuckButto
 // Page-tree utilities
 export { injectPageTreeFields } from '../editor/utils/injectPageTreeFields.js';
 export { detectPageTree, hasPageTreeFields } from '../editor/utils/detectPageTree.js';
-//# sourceMappingURL=client.js.map

package/dist/exports/rsc.d.ts

@@ -16,4 +16,3 @@
  * ```
  */
 export { PuckEditorView } from '../views/PuckEditorView.js';
-//# sourceMappingURL=rsc.d.ts.map

package/dist/exports/rsc.js

@@ -14,6 +14,4 @@
  *   },
  * }
  * ```
- */
-export { PuckEditorView } from '../views/PuckEditorView.js';
-//# sourceMappingURL=rsc.js.map
+ */ export { PuckEditorView } from '../views/PuckEditorView.js';

package/dist/fields/AlignmentField.d.ts

@@ -15,7 +15,7 @@ interface AlignmentFieldProps {
     /** Default value when cleared or initially null */
     defaultValue?: Alignment;
 }
-declare function AlignmentFieldInner({ value, onChange, label, readOnly, defaultValue, }: AlignmentFieldProps): import("react/jsx-runtime").JSX.Element;
+declare function AlignmentFieldInner({ value, onChange, label, readOnly, defaultValue, }: AlignmentFieldProps): React.JSX.Element;
 export declare const AlignmentField: React.MemoExoticComponent<typeof AlignmentFieldInner>;
 interface CreateAlignmentFieldConfig {
     label?: string;
@@ -33,4 +33,3 @@ interface CreateAlignmentFieldConfig {
  */
 export declare function createAlignmentField(config?: CreateAlignmentFieldConfig): CustomField<Alignment | null>;
 export {};
-//# sourceMappingURL=AlignmentField.d.ts.map

package/dist/fields/AlignmentField.js

@@ -5,9 +5,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * Replaces select dropdowns with intuitive icon toggles for
  * left, center, right alignment.
- */
-import { useCallback, memo } from 'react';
-import { AlignLeft, AlignCenter, AlignRight, X, } from 'lucide-react';
+ */ import React, { useCallback, memo } from 'react';
+import { AlignLeft, AlignCenter, AlignRight, X } from 'lucide-react';
 // =============================================================================
 // Styles
 // =============================================================================
@@ -15,17 +14,17 @@ const styles = {
     container: {
         display: 'flex',
         flexDirection: 'column',
-        gap: '8px',
+        gap: '8px'
     },
     header: {
         display: 'flex',
         alignItems: 'center',
-        justifyContent: 'space-between',
+        justifyContent: 'space-between'
     },
     label: {
         fontSize: '14px',
         fontWeight: 500,
-        color: 'var(--theme-elevation-800)',
+        color: 'var(--theme-elevation-800)'
     },
     clearButton: {
         display: 'flex',
@@ -38,12 +37,12 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'transparent',
         color: 'var(--theme-elevation-500)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     buttonGroup: {
         display: 'flex',
         flexWrap: 'wrap',
-        gap: '4px',
+        gap: '4px'
     },
     button: {
         display: 'flex',
@@ -56,7 +55,7 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-bg)',
         color: 'var(--theme-elevation-700)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     buttonActive: {
         display: 'flex',
@@ -69,38 +68,96 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-elevation-800)',
         color: 'var(--theme-bg)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     buttonDisabled: {
         opacity: 0.5,
-        cursor: 'not-allowed',
-    },
+        cursor: 'not-allowed'
+    }
 };
 // =============================================================================
 // AlignmentField Component
 // =============================================================================
-function AlignmentFieldInner({ value, onChange, label = 'Alignment', readOnly, defaultValue = 'left', }) {
+function AlignmentFieldInner({ value, onChange, label = 'Alignment', readOnly, defaultValue = 'left' }) {
     const currentValue = value ?? defaultValue;
-    const handleChange = useCallback((alignment) => {
+    const handleChange = useCallback((alignment)=>{
         onChange(alignment);
-    }, [onChange]);
-    const handleClear = useCallback(() => {
+    }, [
+        onChange
+    ]);
+    const handleClear = useCallback(()=>{
         onChange(null);
-    }, [onChange]);
+    }, [
+        onChange
+    ]);
     const alignments = [
-        { value: 'left', icon: AlignLeft, title: 'Align left' },
-        { value: 'center', icon: AlignCenter, title: 'Align center' },
-        { value: 'right', icon: AlignRight, title: 'Align right' },
+        {
+            value: 'left',
+            icon: AlignLeft,
+            title: 'Align left'
+        },
+        {
+            value: 'center',
+            icon: AlignCenter,
+            title: 'Align center'
+        },
+        {
+            value: 'right',
+            icon: AlignRight,
+            title: 'Align right'
+        }
     ];
-    return (_jsxs("div", { className: "puck-field", style: styles.container, children: [_jsxs("div", { style: styles.header, children: [_jsx("label", { style: styles.label, children: label }), value && !readOnly && (_jsx("button", { type: "button", onClick: handleClear, style: styles.clearButton, title: "Reset to default", children: _jsx(X, { style: { width: '16px', height: '16px' } }) }))] }), _jsx("div", { style: styles.buttonGroup, children: alignments.map(({ value: alignment, icon: Icon, title }) => {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "puck-field",
+        style: styles.container,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                style: styles.header,
+                children: [
+                    /*#__PURE__*/ _jsx("label", {
+                        style: styles.label,
+                        children: label
+                    }),
+                    value && !readOnly && /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: handleClear,
+                        style: styles.clearButton,
+                        title: "Reset to default",
+                        children: /*#__PURE__*/ _jsx(X, {
+                            style: {
+                                width: '16px',
+                                height: '16px'
+                            }
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: styles.buttonGroup,
+                children: alignments.map(({ value: alignment, icon: Icon, title })=>{
                     const isActive = currentValue === alignment;
-                    return (_jsx("button", { type: "button", onClick: () => handleChange(alignment), disabled: readOnly, style: {
-                            ...(isActive ? styles.buttonActive : styles.button),
-                            ...(readOnly ? styles.buttonDisabled : {}),
-                        }, title: title, children: _jsx(Icon, { style: { width: '16px', height: '16px' } }) }, alignment));
-                }) })] }));
+                    return /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: ()=>handleChange(alignment),
+                        disabled: readOnly,
+                        style: {
+                            ...isActive ? styles.buttonActive : styles.button,
+                            ...readOnly ? styles.buttonDisabled : {}
+                        },
+                        title: title,
+                        children: /*#__PURE__*/ _jsx(Icon, {
+                            style: {
+                                width: '16px',
+                                height: '16px'
+                            }
+                        })
+                    }, alignment);
+                })
+            })
+        ]
+    });
 }
-export const AlignmentField = memo(AlignmentFieldInner);
+export const AlignmentField = /*#__PURE__*/ memo(AlignmentFieldInner);
 /**
  * Creates a Puck field configuration for alignment control
  *
@@ -110,12 +167,16 @@ export const AlignmentField = memo(AlignmentFieldInner);
  *   alignment: createAlignmentField({ label: 'Text Alignment' }),
  * }
  * ```
- */
-export function createAlignmentField(config = {}) {
+ */ export function createAlignmentField(config = {}) {
     return {
         type: 'custom',
         label: config.label,
-        render: ({ value, onChange, readOnly }) => (_jsx(AlignmentField, { value: value, onChange: onChange, label: config.label, readOnly: readOnly, defaultValue: config.defaultValue })),
+        render: ({ value, onChange, readOnly })=>/*#__PURE__*/ _jsx(AlignmentField, {
+                value: value,
+                onChange: onChange,
+                label: config.label,
+                readOnly: readOnly,
+                defaultValue: config.defaultValue
+            })
     };
 }
-//# sourceMappingURL=AlignmentField.js.map

package/dist/fields/AnimationField.d.ts

@@ -11,7 +11,7 @@
  */
 import React from 'react';
 import type { CustomField } from '@puckeditor/core';
-import type { AnimationValue } from './shared';
+import type { AnimationValue } from './shared.js';
 interface AnimationFieldProps {
     value: AnimationValue | null;
     onChange: (value: AnimationValue | null) => void;
@@ -20,7 +20,7 @@ interface AnimationFieldProps {
     /** Whether to show stagger controls (for container components) */
     showStagger?: boolean;
 }
-declare function AnimationFieldInner({ value, onChange, label, readOnly, showStagger, }: AnimationFieldProps): import("react/jsx-runtime").JSX.Element;
+declare function AnimationFieldInner({ value, onChange, label, readOnly, showStagger, }: AnimationFieldProps): React.JSX.Element;
 export declare const AnimationField: React.MemoExoticComponent<typeof AnimationFieldInner>;
 interface CreateAnimationFieldConfig {
     label?: string;
@@ -41,4 +41,3 @@ interface CreateAnimationFieldConfig {
  */
 export declare function createAnimationField(config?: CreateAnimationFieldConfig): CustomField<AnimationValue | null>;
 export {};
-//# sourceMappingURL=AnimationField.d.ts.map