@delmaredigital/payload-puck 0.4.0 → 0.6.1

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

@@ -0,0 +1,20 @@
+/**
+ * Page Patterns - System context for AI page generation
+ *
+ * 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 declare const pagePatternContext = "\n## Page Composition Guidelines\n\nWhen creating pages, follow these patterns to build professional, well-structured layouts.\n\n### Page Structure Fundamentals\n\nEVERY page should be composed of multiple Section components at the root level:\n- Pages are built by stacking Section components vertically\n- Each Section represents a distinct content area\n- Sections should NOT be nested inside other Sections\n- Use Flex and Grid INSIDE Sections for layout\n\n### Hero Section Pattern\n\nThe hero is typically the first section on a landing page.\n\nSTRUCTURE:\n```\nSection (with sectionPadding, optional sectionBackground)\n  \u2514\u2500 Flex (direction: column, alignItems: center, gap: 24)\n      \u251C\u2500 Heading (level: h1, alignment: center) - Main headline\n      \u251C\u2500 Text (size: lg, alignment: center) - Subheadline/description\n      \u2514\u2500 Flex (direction: row, gap: 16, justifyContent: center) - CTA buttons\n          \u251C\u2500 Button (variant: default, size: lg) - Primary CTA\n          \u2514\u2500 Button (variant: outline) - Secondary CTA\n```\n\nVARIATIONS:\n- Minimal: Just Heading + Button\n- Standard: Heading + Text + Button(s)\n- Full: Heading + Text + Buttons + Image below\n\n### Features Section Pattern\n\nShowcase features, services, or benefits.\n\nSTRUCTURE:\n```\nSection (light or white background)\n  \u251C\u2500 Flex (direction: column, alignItems: center, gap: 16)\n  \u2502   \u251C\u2500 Heading (level: h2, alignment: center) - Section title\n  \u2502   \u2514\u2500 Text (alignment: center) - Section description\n  \u2514\u2500 Grid (numColumns: 3, gap: 24)\n      \u251C\u2500 Card (heading + text, no image)\n      \u251C\u2500 Card\n      \u2514\u2500 Card\n```\n\nVARIATIONS:\n- 2 columns for comparison features\n- 3 columns for standard features (most common)\n- 4 columns for icon-style features\n\n### Testimonials Section Pattern\n\nSocial proof with customer quotes.\n\nSTRUCTURE:\n```\nSection (subtle background color for contrast)\n  \u251C\u2500 Heading (level: h2, alignment: center) - \"What Our Customers Say\"\n  \u2514\u2500 Grid (numColumns: 2 or 3, gap: 24)\n      \u251C\u2500 Card (text: quote, heading: name + role)\n      \u251C\u2500 Card\n      \u2514\u2500 Card\n```\n\n### FAQ Section Pattern\n\nFrequently asked questions with expandable answers.\n\nSTRUCTURE:\n```\nSection\n  \u2514\u2500 Container (for constrained width)\n      \u251C\u2500 Heading (level: h2, alignment: center) - \"Frequently Asked Questions\"\n      \u2514\u2500 Accordion (items array with questions/answers)\n```\n\n### CTA (Call-to-Action) Section Pattern\n\nFinal conversion section, often with contrasting background.\n\nSTRUCTURE:\n```\nSection (contrasting sectionBackground color)\n  \u2514\u2500 Flex (direction: column, alignItems: center, gap: 24)\n      \u251C\u2500 Heading (level: h2, alignment: center) - Compelling headline\n      \u251C\u2500 Text (alignment: center) - Supporting message\n      \u2514\u2500 Button (variant: default, size: lg) - Single strong CTA\n```\n\n### About Section Pattern\n\nCompany or personal introduction.\n\nSTRUCTURE:\n```\nSection\n  \u2514\u2500 Flex (direction: row, gap: 48, alignItems: center)\n      \u251C\u2500 Image (aspectRatio: 4:3) - Team photo or illustration\n      \u2514\u2500 Flex (direction: column, gap: 16)\n          \u251C\u2500 Heading (level: h2)\n          \u251C\u2500 Text or RichText\n          \u2514\u2500 Button (optional)\n```\n\n### Team Section Pattern\n\nTeam members or leadership profiles.\n\nSTRUCTURE:\n```\nSection\n  \u251C\u2500 Heading (level: h2, alignment: center) - \"Meet Our Team\"\n  \u2514\u2500 Grid (numColumns: 3 or 4, gap: 24)\n      \u251C\u2500 Card (image: avatar, heading: name, text: role)\n      \u251C\u2500 Card\n      \u251C\u2500 Card\n      \u2514\u2500 Card\n```\n\n### Pricing Section Pattern\n\nPricing tiers or plans.\n\nSTRUCTURE:\n```\nSection\n  \u251C\u2500 Flex (direction: column, alignItems: center)\n  \u2502   \u251C\u2500 Heading (level: h2, alignment: center) - \"Simple Pricing\"\n  \u2502   \u2514\u2500 Text (alignment: center) - \"Choose the plan that works for you\"\n  \u2514\u2500 Grid (numColumns: 3, gap: 24)\n      \u251C\u2500 Card (heading: plan name, text: price + features)\n      \u251C\u2500 Card (featured tier)\n      \u2514\u2500 Card\n```\n\n---\n\n## Page Type Templates\n\n### Landing Page Structure\n1. Hero Section (headline, subheadline, CTA buttons)\n2. Features Section (3-column grid of benefit cards)\n3. About/How It Works Section (image + text side-by-side)\n4. Testimonials Section (2-3 customer quotes)\n5. FAQ Section (common questions in accordion)\n6. CTA Section (final conversion push)\n\n### About Page Structure\n1. Hero Section (company name, mission statement)\n2. Story Section (company history/journey)\n3. Values Section (3-4 core values in cards)\n4. Team Section (team member grid)\n5. CTA Section (contact or join us)\n\n### Services Page Structure\n1. Hero Section (services overview)\n2. Services Grid (3-4 service cards)\n3. Process Section (how you work)\n4. Testimonials (client success stories)\n5. CTA Section (get started)\n\n### Contact Page Structure\n1. Hero Section (contact headline)\n2. Contact Info Section (address, phone, email)\n3. FAQ Section (common questions)\n\n---\n\n## Typography Hierarchy Rules\n\nHEADING LEVELS:\n- h1: Page title in hero (ONE per page maximum)\n- h2: Major section headings\n- h3: Card titles, subsection headings\n- h4-h6: Rarely needed, for deeply nested content\n\nTEXT SIZES:\n- xl/lg: Hero subtitles, important callouts\n- base: Body text, descriptions (default)\n- sm: Secondary text, captions\n- xs: Legal text, fine print\n\n---\n\n## Spacing Guidelines\n\nSECTION PADDING (sectionPadding):\n- Hero sections: 80-96px top/bottom\n- Standard sections: 48-64px top/bottom\n- Dense sections: 32-48px top/bottom\n\nCOMPONENT GAP:\n- Tight: 8px (buttons in a compact row)\n- Compact: 16px (related elements)\n- Comfortable: 24px (card grids, flex items)\n- Spacious: 32-48px (section content groups)\n\nGRID GAP:\n- Cards: 24px typical\n- Compact grid: 16px\n- Spacious grid: 32px\n\n---\n\n## Color & Background Strategy\n\nUse sectionBackground to create visual hierarchy and professional appearance.\n\nSECTION BACKGROUND PATTERNS:\n- Hero Section: Dark or gradient background to create impact\n- Features/Content: Light or white background\n- Testimonials: Subtle contrasting background\n- CTA Section: Brand color or contrasting background\n- Alternating: Switch between white and light gray for visual rhythm\n\nVISUAL RHYTHM:\n- Alternate section backgrounds to create clear visual separation\n- Hero sections typically have bold backgrounds (dark, gradient, or brand color)\n- Content sections typically have light/white backgrounds\n- CTA sections often use brand colors for emphasis\n\n---\n\n## Responsive Considerations\n\nGRID BEHAVIOR:\n- Grid automatically stacks to single column on mobile\n- Plan content to work in both multi-column and stacked views\n\nFLEX BEHAVIOR:\n- Row layouts wrap on narrow screens\n- Consider how button groups will stack\n\nCONTENT WIDTH:\n- Section content constrained to ~1200px max-width by default\n- Text-heavy sections might use narrower (800-900px) constraint\n";
+/**
+ * Condensed reference for component field names
+ * 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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagePatterns.d.ts","sourceRoot":"","sources":["../../../../src/ai/presets/instructions/pagePatterns.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,kpOAgP9B,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,+zCA8BnC,CAAA"}

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

@@ -0,0 +1,290 @@
+/**
+ * Page Patterns - System context for AI page generation
+ *
+ * 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 = `
+## Page Composition Guidelines
+
+When creating pages, follow these patterns to build professional, well-structured layouts.
+
+### Page Structure Fundamentals
+
+EVERY page should be composed of multiple Section components at the root level:
+- Pages are built by stacking Section components vertically
+- Each Section represents a distinct content area
+- Sections should NOT be nested inside other Sections
+- Use Flex and Grid INSIDE Sections for layout
+
+### Hero Section Pattern
+
+The hero is typically the first section on a landing page.
+
+STRUCTURE:
+\`\`\`
+Section (with sectionPadding, optional sectionBackground)
+  └─ Flex (direction: column, alignItems: center, gap: 24)
+      ├─ Heading (level: h1, alignment: center) - Main headline
+      ├─ Text (size: lg, alignment: center) - Subheadline/description
+      └─ Flex (direction: row, gap: 16, justifyContent: center) - CTA buttons
+          ├─ Button (variant: default, size: lg) - Primary CTA
+          └─ Button (variant: outline) - Secondary CTA
+\`\`\`
+
+VARIATIONS:
+- Minimal: Just Heading + Button
+- Standard: Heading + Text + Button(s)
+- Full: Heading + Text + Buttons + Image below
+
+### Features Section Pattern
+
+Showcase features, services, or benefits.
+
+STRUCTURE:
+\`\`\`
+Section (light or white background)
+  ├─ Flex (direction: column, alignItems: center, gap: 16)
+  │   ├─ Heading (level: h2, alignment: center) - Section title
+  │   └─ Text (alignment: center) - Section description
+  └─ Grid (numColumns: 3, gap: 24)
+      ├─ Card (heading + text, no image)
+      ├─ Card
+      └─ Card
+\`\`\`
+
+VARIATIONS:
+- 2 columns for comparison features
+- 3 columns for standard features (most common)
+- 4 columns for icon-style features
+
+### Testimonials Section Pattern
+
+Social proof with customer quotes.
+
+STRUCTURE:
+\`\`\`
+Section (subtle background color for contrast)
+  ├─ Heading (level: h2, alignment: center) - "What Our Customers Say"
+  └─ Grid (numColumns: 2 or 3, gap: 24)
+      ├─ Card (text: quote, heading: name + role)
+      ├─ Card
+      └─ Card
+\`\`\`
+
+### FAQ Section Pattern
+
+Frequently asked questions with expandable answers.
+
+STRUCTURE:
+\`\`\`
+Section
+  └─ Container (for constrained width)
+      ├─ Heading (level: h2, alignment: center) - "Frequently Asked Questions"
+      └─ Accordion (items array with questions/answers)
+\`\`\`
+
+### CTA (Call-to-Action) Section Pattern
+
+Final conversion section, often with contrasting background.
+
+STRUCTURE:
+\`\`\`
+Section (contrasting sectionBackground color)
+  └─ Flex (direction: column, alignItems: center, gap: 24)
+      ├─ Heading (level: h2, alignment: center) - Compelling headline
+      ├─ Text (alignment: center) - Supporting message
+      └─ Button (variant: default, size: lg) - Single strong CTA
+\`\`\`
+
+### About Section Pattern
+
+Company or personal introduction.
+
+STRUCTURE:
+\`\`\`
+Section
+  └─ Flex (direction: row, gap: 48, alignItems: center)
+      ├─ Image (aspectRatio: 4:3) - Team photo or illustration
+      └─ Flex (direction: column, gap: 16)
+          ├─ Heading (level: h2)
+          ├─ Text or RichText
+          └─ Button (optional)
+\`\`\`
+
+### Team Section Pattern
+
+Team members or leadership profiles.
+
+STRUCTURE:
+\`\`\`
+Section
+  ├─ Heading (level: h2, alignment: center) - "Meet Our Team"
+  └─ Grid (numColumns: 3 or 4, gap: 24)
+      ├─ Card (image: avatar, heading: name, text: role)
+      ├─ Card
+      ├─ Card
+      └─ Card
+\`\`\`
+
+### Pricing Section Pattern
+
+Pricing tiers or plans.
+
+STRUCTURE:
+\`\`\`
+Section
+  ├─ Flex (direction: column, alignItems: center)
+  │   ├─ Heading (level: h2, alignment: center) - "Simple Pricing"
+  │   └─ Text (alignment: center) - "Choose the plan that works for you"
+  └─ Grid (numColumns: 3, gap: 24)
+      ├─ Card (heading: plan name, text: price + features)
+      ├─ Card (featured tier)
+      └─ Card
+\`\`\`
+
+---
+
+## Page Type Templates
+
+### Landing Page Structure
+1. Hero Section (headline, subheadline, CTA buttons)
+2. Features Section (3-column grid of benefit cards)
+3. About/How It Works Section (image + text side-by-side)
+4. Testimonials Section (2-3 customer quotes)
+5. FAQ Section (common questions in accordion)
+6. CTA Section (final conversion push)
+
+### About Page Structure
+1. Hero Section (company name, mission statement)
+2. Story Section (company history/journey)
+3. Values Section (3-4 core values in cards)
+4. Team Section (team member grid)
+5. CTA Section (contact or join us)
+
+### Services Page Structure
+1. Hero Section (services overview)
+2. Services Grid (3-4 service cards)
+3. Process Section (how you work)
+4. Testimonials (client success stories)
+5. CTA Section (get started)
+
+### Contact Page Structure
+1. Hero Section (contact headline)
+2. Contact Info Section (address, phone, email)
+3. FAQ Section (common questions)
+
+---
+
+## Typography Hierarchy Rules
+
+HEADING LEVELS:
+- h1: Page title in hero (ONE per page maximum)
+- h2: Major section headings
+- h3: Card titles, subsection headings
+- h4-h6: Rarely needed, for deeply nested content
+
+TEXT SIZES:
+- xl/lg: Hero subtitles, important callouts
+- base: Body text, descriptions (default)
+- sm: Secondary text, captions
+- xs: Legal text, fine print
+
+---
+
+## Spacing Guidelines
+
+SECTION PADDING (sectionPadding):
+- Hero sections: 80-96px top/bottom
+- Standard sections: 48-64px top/bottom
+- Dense sections: 32-48px top/bottom
+
+COMPONENT GAP:
+- Tight: 8px (buttons in a compact row)
+- Compact: 16px (related elements)
+- Comfortable: 24px (card grids, flex items)
+- Spacious: 32-48px (section content groups)
+
+GRID GAP:
+- Cards: 24px typical
+- Compact grid: 16px
+- Spacious grid: 32px
+
+---
+
+## Color & Background Strategy
+
+Use sectionBackground to create visual hierarchy and professional appearance.
+
+SECTION BACKGROUND PATTERNS:
+- Hero Section: Dark or gradient background to create impact
+- Features/Content: Light or white background
+- Testimonials: Subtle contrasting background
+- CTA Section: Brand color or contrasting background
+- Alternating: Switch between white and light gray for visual rhythm
+
+VISUAL RHYTHM:
+- Alternate section backgrounds to create clear visual separation
+- Hero sections typically have bold backgrounds (dark, gradient, or brand color)
+- Content sections typically have light/white backgrounds
+- CTA sections often use brand colors for emphasis
+
+---
+
+## Responsive Considerations
+
+GRID BEHAVIOR:
+- Grid automatically stacks to single column on mobile
+- Plan content to work in both multi-column and stacked views
+
+FLEX BEHAVIOR:
+- Row layouts wrap on narrow screens
+- Consider how button groups will stack
+
+CONTENT WIDTH:
+- Section content constrained to ~1200px max-width by default
+- Text-heavy sections might use narrower (800-900px) constraint
+`;
+/**
+ * Condensed reference for component field names
+ * Useful as a quick reference in AI context
+ */
+export const componentFieldReference = `
+## Quick Field Reference
+
+BUTTON: text (required), link (required), variant (default/secondary/outline), size (sm/default/lg), openInNewTab (yes/no)
+
+CARD: heading (required), text, image (user selects), link, shadow (none/sm/md/lg/xl)
+
+HEADING: text (required), level (h1-h6), alignment (left/center/right)
+
+TEXT: content (required), size (xs/sm/base/lg/xl), alignment (left/center/right)
+
+RICHTEXT: content (required, HTML string)
+
+ACCORDION: items (array of {title, content, defaultOpen}), allowMultiple (yes/no)
+
+SECTION: content (slot), semanticElement, id, sectionBackground, sectionPadding
+  - sectionBackground: { type: 'solid', solid: { hex, opacity? } } or { type: 'gradient', gradient: { type, angle, stops } }
+  - sectionPadding: { xs: { top, right, bottom, left, unit: 'px', linked: boolean } }
+
+FLEX: content (slot), direction (row/column), justifyContent, alignItems, gap (number), wrap (wrap/nowrap)
+  - justifyContent: 'flex-start' | 'center' | 'flex-end' | 'space-between'
+  - alignItems: 'flex-start' | 'center' | 'flex-end' | 'stretch'
+
+GRID: content (slot), numColumns (1-12), gap (number)
+
+SPACER: size (8/16/24/32/48/64/80/96/128), direction (vertical/horizontal/both)
+
+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/pagePatterns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagePatterns.js","sourceRoot":"","sources":["../../../../src/ai/presets/instructions/pagePatterns.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgPjC,CAAA;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BtC,CAAA"}