@delmaredigital/payload-puck 0.6.12 → 0.6.14

package/dist/ai/presets/instructions/layout.js

@@ -1,4 +1,4 @@
-import { backgroundSchema, borderSchema, responsivePaddingSchema, responsiveDimensionsSchema, animationSchema, visibilitySchema, justifyContentSchema, alignItemsSchema, } from './schemas.js';
+import { backgroundSchema, borderSchema, responsivePaddingSchema, responsiveDimensionsSchema, animationSchema, visibilitySchema, justifyContentSchema, alignItemsSchema } from './schemas.js';
 /**
  * Comprehensive AI instructions for layout components
  *
@@ -7,8 +7,7 @@ import { backgroundSchema, borderSchema, responsivePaddingSchema, responsiveDime
  * - How to nest and compose layouts
  * - Correct field names and recommended values
  * - Common page structure patterns
- */
-export const layoutInstructions = {
+ */ export const layoutInstructions = {
     Section: {
         ai: {
             instructions: `Section component - the primary building block for page sections.
@@ -42,24 +41,24 @@ RECOMMENDED VALUES:
 COMPOSITION:
 - Section > Container (for text-heavy content)
 - Section > Flex (for grouped elements)
-- Section > Grid (for card layouts)`,
+- Section > Grid (for card layouts)`
         },
         fields: {
             content: {
                 ai: {
                     required: true,
-                    instructions: 'Slot for child components. Add Container, Flex, Grid, or individual components here.',
-                },
+                    instructions: 'Slot for child components. Add Container, Flex, Grid, or individual components here.'
+                }
             },
             semanticElement: {
                 ai: {
-                    instructions: "HTML element type. Use 'section' (default) for most cases, 'header' for page header, 'footer' for page footer, 'main' for primary content.",
-                },
+                    instructions: "HTML element type. Use 'section' (default) for most cases, 'header' for page header, 'footer' for page footer, 'main' for primary content."
+                }
             },
             id: {
                 ai: {
-                    instructions: 'Optional ID for anchor links. Use lowercase-with-dashes format, e.g., "features", "about-us", "contact".',
-                },
+                    instructions: 'Optional ID for anchor links. Use lowercase-with-dashes format, e.g., "features", "about-us", "contact".'
+                }
             },
             sectionBackground: {
                 ai: {
@@ -67,67 +66,67 @@ COMPOSITION:
 Use for: Hero sections (dark/gradient), CTA sections (brand color), alternating section backgrounds.
 Example solid: { type: 'solid', solid: { hex: '#1e293b' } }
 Example gradient: { type: 'gradient', gradient: { type: 'linear', angle: 135, stops: [{ color: { hex: '#3b82f6' }, position: 0 }, { color: { hex: '#8b5cf6' }, position: 100 }] } }`,
-                    schema: backgroundSchema,
-                },
+                    schema: backgroundSchema
+                }
             },
             sectionPadding: {
                 ai: {
                     instructions: `Vertical/horizontal padding for the section. Controls breathing room.
 Hero sections: 80-96px top/bottom. Standard sections: 48-64px. Dense: 32-48px.
 Example: { xs: { top: 64, right: 0, bottom: 64, left: 0, unit: 'px', linked: false } }`,
-                    schema: responsivePaddingSchema,
-                },
+                    schema: responsivePaddingSchema
+                }
             },
             sectionMargin: {
                 ai: {
                     instructions: `Margin around the section. Usually leave null - use sectionPadding for internal spacing.`,
-                    schema: responsivePaddingSchema,
-                },
+                    schema: responsivePaddingSchema
+                }
             },
             contentDimensions: {
                 ai: {
                     instructions: `Inner content width constraints. Default is 1200px max-width centered.
 Example: { xs: { mode: 'contained', maxWidth: { value: 1200, unit: 'px', enabled: true }, alignment: 'center' } }
 Use narrower (800-900px) for text-heavy content like blog posts.`,
-                    schema: responsiveDimensionsSchema,
-                },
+                    schema: responsiveDimensionsSchema
+                }
             },
             contentBackground: {
                 ai: {
                     instructions: `Background for the inner content area (not full-width). Use for card-like treatments within sections.
 Example: { type: 'solid', solid: { hex: '#ffffff' } }`,
-                    schema: backgroundSchema,
-                },
+                    schema: backgroundSchema
+                }
             },
             contentPadding: {
                 ai: {
                     instructions: `Padding for the inner content area.
 Example: { xs: { top: 24, right: 24, bottom: 24, left: 24, unit: 'px', linked: true } }`,
-                    schema: responsivePaddingSchema,
-                },
+                    schema: responsivePaddingSchema
+                }
             },
             contentBorder: {
                 ai: {
                     instructions: `Border for the inner content area. Use for card-like treatments.
 Example: { style: 'solid', width: 1, color: { hex: '#e5e7eb' }, radius: 8, sides: { top: true, right: true, bottom: true, left: true } }`,
-                    schema: borderSchema,
-                },
+                    schema: borderSchema
+                }
             },
             animation: {
                 ai: {
                     instructions: `Entrance animation for the section. Use sparingly for key sections like heroes.
 Example: { mode: 'preset', entrance: 'fade-up', entranceDuration: 600, triggerOnScroll: true, triggerOnce: true }`,
-                    schema: animationSchema,
-                },
+                    schema: animationSchema
+                }
             },
             visibility: {
                 ai: {
                     instructions: `Show/hide at different breakpoints.
 Example: { xs: true, sm: true, md: true, lg: true, xl: true }`,
-                    schema: visibilitySchema,
-                },
-            },
-        },
+                    schema: visibilitySchema
+                }
+            }
+        }
     },
     Container: {
         ai: {
@@ -155,70 +154,70 @@ WHEN NOT TO USE:
 
 COMPOSITION:
 - Section > Container > Heading + Text (for centered text blocks)
-- Section > Container > RichText (for long-form content)`,
+- Section > Container > RichText (for long-form content)`
         },
         fields: {
             content: {
                 ai: {
                     required: true,
-                    instructions: 'Slot for child components.',
-                },
+                    instructions: 'Slot for child components.'
+                }
             },
             semanticElement: {
                 ai: {
-                    instructions: "HTML element type: 'div' (default), 'article', 'aside', 'section'.",
-                },
+                    instructions: "HTML element type: 'div' (default), 'article', 'aside', 'section'."
+                }
             },
             background: {
                 ai: {
                     instructions: `Background color, gradient, or image. Use for card-like content blocks or visual emphasis.
 Example: { type: 'solid', solid: { hex: '#f8fafc' } }`,
-                    schema: backgroundSchema,
-                },
+                    schema: backgroundSchema
+                }
             },
             border: {
                 ai: {
                     instructions: `Border styling. Use for card treatments or visual separation.
 Example: { style: 'solid', width: 1, color: { hex: '#e5e7eb' }, radius: 12, sides: { top: true, right: true, bottom: true, left: true } }`,
-                    schema: borderSchema,
-                },
+                    schema: borderSchema
+                }
             },
             padding: {
                 ai: {
                     instructions: `Internal padding.
 Example: { xs: { top: 24, right: 24, bottom: 24, left: 24, unit: 'px', linked: true } }`,
-                    schema: responsivePaddingSchema,
-                },
+                    schema: responsivePaddingSchema
+                }
             },
             dimensions: {
                 ai: {
                     instructions: `Width/height constraints.
 Example: { xs: { mode: 'contained', maxWidth: { value: 800, unit: 'px', enabled: true }, alignment: 'center' } }`,
-                    schema: responsiveDimensionsSchema,
-                },
+                    schema: responsiveDimensionsSchema
+                }
             },
             margin: {
                 ai: {
                     instructions: `Margin outside the container.
 Example: { xs: { top: 0, right: 0, bottom: 24, left: 0, unit: 'px', linked: false } }`,
-                    schema: responsivePaddingSchema,
-                },
+                    schema: responsivePaddingSchema
+                }
             },
             animation: {
                 ai: {
                     instructions: `Entrance animation for the container. Use for key content blocks.
 Example: { mode: 'preset', entrance: 'fade-up', entranceDuration: 500, triggerOnScroll: true, triggerOnce: true }`,
-                    schema: animationSchema,
-                },
+                    schema: animationSchema
+                }
             },
             visibility: {
                 ai: {
                     instructions: `Show/hide at different breakpoints.
 Example: { xs: true, sm: true, md: true, lg: true, xl: true }`,
-                    schema: visibilitySchema,
-                },
-            },
-        },
+                    schema: visibilitySchema
+                }
+            }
+        }
     },
     Flex: {
         ai: {
@@ -249,97 +248,97 @@ RECOMMENDED VALUES:
 COMPOSITION:
 - Section > Flex (column, center) > Content (for centered section content)
 - Flex (row) > Button + Button (for button groups)
-- Grid > Flex (column) > Content (for grid item content)`,
+- Grid > Flex (column) > Content (for grid item content)`
         },
         fields: {
             content: {
                 ai: {
                     required: true,
-                    instructions: 'Slot for child components. Cannot contain Section components.',
-                },
+                    instructions: 'Slot for child components. Cannot contain Section components.'
+                }
             },
             direction: {
                 ai: {
-                    instructions: "'row' for horizontal layout, 'column' for vertical stacking. Default: row.",
-                },
+                    instructions: "'row' for horizontal layout, 'column' for vertical stacking. Default: row."
+                }
             },
             justifyContent: {
                 ai: {
                     instructions: "Controls horizontal distribution: 'flex-start', 'center', 'flex-end', 'space-between', 'space-around'.",
-                    schema: justifyContentSchema,
-                },
+                    schema: justifyContentSchema
+                }
             },
             alignItems: {
                 ai: {
                     instructions: "Controls vertical alignment: 'flex-start', 'center', 'flex-end', 'stretch'.",
-                    schema: alignItemsSchema,
-                },
+                    schema: alignItemsSchema
+                }
             },
             gap: {
                 ai: {
-                    instructions: 'Space between items in pixels. Common values: 8, 16, 24, 32.',
-                },
+                    instructions: 'Space between items in pixels. Common values: 8, 16, 24, 32.'
+                }
             },
             wrap: {
                 ai: {
-                    instructions: "'wrap' allows items to wrap to new lines, 'nowrap' keeps them on one line.",
-                },
+                    instructions: "'wrap' allows items to wrap to new lines, 'nowrap' keeps them on one line."
+                }
             },
             semanticElement: {
                 ai: {
-                    instructions: "'div' (default), 'nav' for navigation, 'ul'/'ol' for lists.",
-                },
+                    instructions: "'div' (default), 'nav' for navigation, 'ul'/'ol' for lists."
+                }
             },
             background: {
                 ai: {
                     instructions: `Background for the flex container. Use for grouped content with visual separation.
 Example: { type: 'solid', solid: { hex: '#f1f5f9' } }`,
-                    schema: backgroundSchema,
-                },
+                    schema: backgroundSchema
+                }
             },
             border: {
                 ai: {
                     instructions: `Border styling for the flex container.
 Example: { style: 'solid', width: 1, color: { hex: '#e2e8f0' }, radius: 8, sides: { top: true, right: true, bottom: true, left: true } }`,
-                    schema: borderSchema,
-                },
+                    schema: borderSchema
+                }
             },
             customPadding: {
                 ai: {
                     instructions: `Padding inside the flex container.
 Example: { xs: { top: 16, right: 16, bottom: 16, left: 16, unit: 'px', linked: true } }`,
-                    schema: responsivePaddingSchema,
-                },
+                    schema: responsivePaddingSchema
+                }
             },
             margin: {
                 ai: {
                     instructions: `Margin outside the flex container.
 Example: { xs: { top: 0, right: 0, bottom: 24, left: 0, unit: 'px', linked: false } }`,
-                    schema: responsivePaddingSchema,
-                },
+                    schema: responsivePaddingSchema
+                }
             },
             dimensions: {
                 ai: {
                     instructions: `Width/height constraints for the flex container.
 Example: { xs: { mode: 'contained', maxWidth: { value: 600, unit: 'px', enabled: true }, alignment: 'center' } }`,
-                    schema: responsiveDimensionsSchema,
-                },
+                    schema: responsiveDimensionsSchema
+                }
             },
             animation: {
                 ai: {
                     instructions: `Entrance animation for the flex container. Use for key content groups.
 Example: { mode: 'preset', entrance: 'fade-up', entranceDuration: 500, triggerOnScroll: true, triggerOnce: true }`,
-                    schema: animationSchema,
-                },
+                    schema: animationSchema
+                }
             },
             visibility: {
                 ai: {
                     instructions: `Show/hide at different breakpoints.
 Example: { xs: true, sm: true, md: true, lg: true, xl: true }`,
-                    schema: visibilitySchema,
-                },
-            },
-        },
+                    schema: visibilitySchema
+                }
+            }
+        }
     },
     Grid: {
         ai: {
@@ -367,80 +366,80 @@ RECOMMENDED VALUES:
 
 COMPOSITION:
 - Section > Grid > Cards (for feature/team sections)
-- Section > Heading + Grid > Items (for titled grid sections)`,
+- Section > Heading + Grid > Items (for titled grid sections)`
         },
         fields: {
             content: {
                 ai: {
                     required: true,
-                    instructions: 'Slot for child components (usually Cards). Cannot contain Section components.',
-                },
+                    instructions: 'Slot for child components (usually Cards). Cannot contain Section components.'
+                }
             },
             numColumns: {
                 ai: {
-                    instructions: 'Number of columns (1-12). Common: 2, 3, or 4. Default: 3.',
-                },
+                    instructions: 'Number of columns (1-12). Common: 2, 3, or 4. Default: 3.'
+                }
             },
             gap: {
                 ai: {
-                    instructions: 'Space between grid items in pixels. Common: 16, 24, 32. Default: 16.',
-                },
+                    instructions: 'Space between grid items in pixels. Common: 16, 24, 32. Default: 16.'
+                }
             },
             semanticElement: {
                 ai: {
-                    instructions: "'div' (default), 'ul' or 'ol' for list semantics.",
-                },
+                    instructions: "'div' (default), 'ul' or 'ol' for list semantics."
+                }
             },
             background: {
                 ai: {
                     instructions: `Background for the grid container. Use for grouped content with visual emphasis.
 Example: { type: 'solid', solid: { hex: '#fafafa' } }`,
-                    schema: backgroundSchema,
-                },
+                    schema: backgroundSchema
+                }
             },
             border: {
                 ai: {
                     instructions: `Border styling for the grid container.
 Example: { style: 'solid', width: 1, color: { hex: '#e5e7eb' }, radius: 16, sides: { top: true, right: true, bottom: true, left: true } }`,
-                    schema: borderSchema,
-                },
+                    schema: borderSchema
+                }
             },
             customPadding: {
                 ai: {
                     instructions: `Padding inside the grid container.
 Example: { xs: { top: 24, right: 24, bottom: 24, left: 24, unit: 'px', linked: true } }`,
-                    schema: responsivePaddingSchema,
-                },
+                    schema: responsivePaddingSchema
+                }
             },
             margin: {
                 ai: {
                     instructions: `Margin outside the grid container.
 Example: { xs: { top: 0, right: 0, bottom: 24, left: 0, unit: 'px', linked: false } }`,
-                    schema: responsivePaddingSchema,
-                },
+                    schema: responsivePaddingSchema
+                }
             },
             dimensions: {
                 ai: {
                     instructions: `Width/height constraints for the grid container.
 Example: { xs: { mode: 'contained', maxWidth: { value: 1000, unit: 'px', enabled: true }, alignment: 'center' } }`,
-                    schema: responsiveDimensionsSchema,
-                },
+                    schema: responsiveDimensionsSchema
+                }
             },
             animation: {
                 ai: {
                     instructions: `Entrance animation for the grid container. Use for key content groups.
 Example: { mode: 'preset', entrance: 'fade-up', entranceDuration: 500, triggerOnScroll: true, triggerOnce: true }`,
-                    schema: animationSchema,
-                },
+                    schema: animationSchema
+                }
             },
             visibility: {
                 ai: {
                     instructions: `Show/hide at different breakpoints.
 Example: { xs: true, sm: true, md: true, lg: true, xl: true }`,
-                    schema: visibilitySchema,
-                },
-            },
-        },
+                    schema: visibilitySchema
+                }
+            }
+        }
     },
     Spacer: {
         ai: {
@@ -463,24 +462,28 @@ WHEN TO USE:
 
 WHEN NOT TO USE:
 - Don't overuse - proper component spacing should suffice
-- Not for separating sections (use Section padding instead)`,
+- Not for separating sections (use Section padding instead)`
         },
         fields: {
             size: {
                 ai: {
-                    instructions: 'Space in pixels: 8, 16, 24, 32 (small), 48, 64 (medium), 80, 96, 128 (large).',
-                },
+                    instructions: 'Space in pixels: 8, 16, 24, 32 (small), 48, 64 (medium), 80, 96, 128 (large).'
+                }
             },
             direction: {
                 ai: {
-                    instructions: "'vertical' (default), 'horizontal', or 'both'.",
-                },
-            },
-        },
-    },
+                    instructions: "'vertical' (default), 'horizontal', or 'both'."
+                }
+            }
+        }
+    }
 };
 /**
  * Layout component names for reference
- */
-export const layoutComponents = ['Section', 'Container', 'Flex', 'Grid', 'Spacer'];
-//# sourceMappingURL=layout.js.map
+ */ export const layoutComponents = [
+    'Section',
+    'Container',
+    'Flex',
+    'Grid',
+    'Spacer'
+];

package/dist/ai/presets/instructions/media.d.ts

@@ -12,4 +12,3 @@ export declare const mediaInstructions: ComponentAiOverrides;
  * Media component names for reference
  */
 export declare const mediaComponents: readonly ["Image", "Template"];
-//# sourceMappingURL=media.d.ts.map

package/dist/ai/presets/instructions/media.js

@@ -6,8 +6,7 @@ import { alignmentSchema, transformSchema } from './schemas.js';
  * - Image and Template component usage
  * - Limitations (AI cannot select from media library)
  * - When and how to use these components
- */
-export const mediaInstructions = {
+ */ export const mediaInstructions = {
     Image: {
         ai: {
             instructions: `Image component for displaying images from the media library.
@@ -42,48 +41,48 @@ COMPOSITION:
 - Section > Image (for full-width hero images)
 - Card > Image (automatically uses card's image field)
 - Grid > Image + Image + Image (for galleries)
-- Flex (row) > Image + Content (for side-by-side layouts)`,
+- Flex (row) > Image + Content (for side-by-side layouts)`
         },
         fields: {
             image: {
                 ai: {
                     exclude: true,
-                    instructions: 'AI cannot select images from media library. Leave this for users to fill in.',
-                },
+                    instructions: 'AI cannot select images from media library. Leave this for users to fill in.'
+                }
             },
             alt: {
                 ai: {
-                    instructions: 'Descriptive alt text for accessibility. Describe what the image should show, e.g., "Team members collaborating in modern office".',
-                },
+                    instructions: 'Descriptive alt text for accessibility. Describe what the image should show, e.g., "Team members collaborating in modern office".'
+                }
             },
             aspectRatio: {
                 ai: {
-                    instructions: "'auto', '1:1' (square), '16:9' (widescreen), '4:3' (traditional), '3:2' (photo). Use '16:9' for hero images, '1:1' for avatars.",
-                },
+                    instructions: "'auto', '1:1' (square), '16:9' (widescreen), '4:3' (traditional), '3:2' (photo). Use '16:9' for hero images, '1:1' for avatars."
+                }
             },
             link: {
                 ai: {
-                    instructions: 'Optional URL to make image clickable.',
-                },
+                    instructions: 'Optional URL to make image clickable.'
+                }
             },
             openInNewTab: {
                 ai: {
-                    instructions: "'yes' or 'no'. Only relevant if link is provided.",
-                },
+                    instructions: "'yes' or 'no'. Only relevant if link is provided."
+                }
             },
             alignment: {
                 ai: {
                     instructions: "'left', 'center' (default), or 'right'.",
-                    schema: alignmentSchema,
-                },
+                    schema: alignmentSchema
+                }
             },
             transform: {
                 ai: {
                     instructions: `CSS transforms. Usually leave unset for images.`,
-                    schema: transformSchema,
-                },
-            },
-        },
+                    schema: transformSchema
+                }
+            }
+        }
     },
     Template: {
         ai: {
@@ -112,25 +111,26 @@ WHEN NOT TO USE:
 
 RECOMMENDATION:
 In most cases, build sections directly using Section, Flex, Grid, and other components
-rather than relying on Template placeholders that users must configure later.`,
+rather than relying on Template placeholders that users must configure later.`
         },
         fields: {
             templateId: {
                 ai: {
                     exclude: true,
-                    instructions: 'AI cannot select templates from the library. Leave for users to fill in.',
-                },
+                    instructions: 'AI cannot select templates from the library. Leave for users to fill in.'
+                }
             },
             content: {
                 ai: {
-                    instructions: 'Slot for template content. Usually auto-populated from selected template.',
-                },
-            },
-        },
-    },
+                    instructions: 'Slot for template content. Usually auto-populated from selected template.'
+                }
+            }
+        }
+    }
 };
 /**
  * Media component names for reference
- */
-export const mediaComponents = ['Image', 'Template'];
-//# sourceMappingURL=media.js.map
+ */ export const mediaComponents = [
+    'Image',
+    'Template'
+];

package/dist/ai/presets/instructions/pagePatterns.d.ts

@@ -17,4 +17,3 @@ export declare const pagePatternContext = "\n## Page Composition Guidelines\n\nW
  * Useful as a quick reference in AI context
  */
 export declare const componentFieldReference = "\n## Quick Field Reference\n\nBUTTON: text (required), link (required), variant (default/secondary/outline), size (sm/default/lg), openInNewTab (yes/no)\n\nCARD: heading (required), text, image (user selects), link, shadow (none/sm/md/lg/xl)\n\nHEADING: text (required), level (h1-h6), alignment (left/center/right)\n\nTEXT: content (required), size (xs/sm/base/lg/xl), alignment (left/center/right)\n\nRICHTEXT: content (required, HTML string)\n\nACCORDION: items (array of {title, content, defaultOpen}), allowMultiple (yes/no)\n\nSECTION: content (slot), semanticElement, id, sectionBackground, sectionPadding\n  - sectionBackground: { type: 'solid', solid: { hex, opacity? } } or { type: 'gradient', gradient: { type, angle, stops } }\n  - sectionPadding: { xs: { top, right, bottom, left, unit: 'px', linked: boolean } }\n\nFLEX: content (slot), direction (row/column), justifyContent, alignItems, gap (number), wrap (wrap/nowrap)\n  - justifyContent: 'flex-start' | 'center' | 'flex-end' | 'space-between'\n  - alignItems: 'flex-start' | 'center' | 'flex-end' | 'stretch'\n\nGRID: content (slot), numColumns (1-12), gap (number)\n\nSPACER: size (8/16/24/32/48/64/80/96/128), direction (vertical/horizontal/both)\n\nDIVIDER: style (solid/dashed/dotted)\n\nIMAGE: image (user selects), alt, aspectRatio (auto/1:1/16:9/4:3/3:2), link\n";
-//# sourceMappingURL=pagePatterns.d.ts.map

package/dist/ai/presets/instructions/pagePatterns.js

@@ -4,14 +4,12 @@
  * This module provides comprehensive guidance on how to compose
  * components into complete pages and sections. This context is
  * injected into the AI system prompt to enable intelligent page generation.
- */
-/**
+ */ /**
  * Comprehensive page composition patterns for AI
  *
  * This string is intended to be added to the AI system context
  * to teach it how to build complete, well-structured pages.
- */
-export const pagePatternContext = `
+ */ export const pagePatternContext = `
 ## Page Composition Guidelines
 
 When creating pages, follow these patterns to build professional, well-structured layouts.
@@ -255,8 +253,7 @@ CONTENT WIDTH:
 /**
  * Condensed reference for component field names
  * Useful as a quick reference in AI context
- */
-export const componentFieldReference = `
+ */ export const componentFieldReference = `
 ## Quick Field Reference
 
 BUTTON: text (required), link (required), variant (default/secondary/outline), size (sm/default/lg), openInNewTab (yes/no)
@@ -287,4 +284,3 @@ DIVIDER: style (solid/dashed/dotted)
 
 IMAGE: image (user selects), alt, aspectRatio (auto/1:1/16:9/4:3/3:2), link
 `;
-//# sourceMappingURL=pagePatterns.js.map

package/dist/ai/presets/instructions/schemas.d.ts

@@ -1244,4 +1244,3 @@ export declare const transformSchema: {
         };
     };
 };
-//# sourceMappingURL=schemas.d.ts.map