@delmaredigital/payload-puck 0.4.0 → 0.6.0

package/README.md

@@ -17,6 +17,7 @@ A PayloadCMS plugin for integrating [Puck](https://puckeditor.com) visual page b
 - [Layouts](#layouts)
 - [Page-Tree Integration](#page-tree-integration)
 - [Hybrid Integration](#hybrid-integration)
+- [AI Integration](#ai-integration)
 - [Advanced Configuration](#advanced-configuration)
 - [License](#license)
 
@@ -28,17 +29,19 @@ A PayloadCMS plugin for integrating [Puck](https://puckeditor.com) visual page b
 
 | Dependency | Version | Purpose |
 |------------|---------|---------|
-| `@measured/puck` | >= 0.20.0 | Visual editor core |
-| `payload` | >= 3.0.0 | CMS backend |
-| `@payloadcms/next` | >= 3.0.0 | Payload Next.js integration |
-| `next` | >= 14.0.0 | React framework |
-| `react` | >= 18.0.0 | UI library |
+| `@puckeditor/core` | >= 0.21.0 | Visual editor core |
+| `payload` | >= 3.69.0 | CMS backend |
+| `@payloadcms/next` | >= 3.69.0 | Payload Next.js integration |
+| `next` | >= 15.4.8 | React framework |
+| `react` | >= 19.2.1 | UI library |
 | `@tailwindcss/typography` | >= 0.5.0 | RichText component styling |
 
+> **Note:** Puck 0.21+ moved from `@measured/puck` to `@puckeditor/core`. This plugin requires the new package scope.
+
 ### Install
 
 ```bash
-pnpm add @delmaredigital/payload-puck @measured/puck
+pnpm add @delmaredigital/payload-puck @puckeditor/core
 ```
 
 ---
@@ -112,16 +115,23 @@ import { notFound } from 'next/navigation'
 import type { Metadata } from 'next'
 
 // Fetch page by slug (or homepage if no slug)
+// Only returns published pages - unpublished pages will 404
 async function getPage(slug?: string[]) {
   const payload = await getPayload({ config })
   const slugPath = slug?.join('/') || ''
 
   // Try to find by slug, or find homepage
+  // Filter for published pages only (_status: 'published')
   const { docs } = await payload.find({
     collection: 'pages',
-    where: slugPath
-      ? { slug: { equals: slugPath } }
-      : { isHomepage: { equals: true } },
+    where: {
+      and: [
+        { _status: { equals: 'published' } },
+        slugPath
+          ? { slug: { equals: slugPath } }
+          : { isHomepage: { equals: true } },
+      ],
+    },
     limit: 1,
   })
 
@@ -285,6 +295,11 @@ The editor uses Payload's native draft system. The plugin automatically enables
 }
 ```
 
+The editor header provides:
+- **Save** - Saves as draft without publishing
+- **Publish** - Publishes the page (sets `_status: 'published'`)
+- **Unpublish** - Reverts a published page to draft status (appears only when published)
+
 ---
 
 ## Components
@@ -306,7 +321,7 @@ The editor uses Payload's native draft system. The plugin automatically enables
 |-----------|-------------|
 | **Heading** | H1-H6 headings with size and alignment |
 | **Text** | Paragraph text with styling options |
-| **RichText** | TipTap-powered WYSIWYG editor |
+| **RichText** | Puck's native richtext editor with enhancements: font sizes, text colors with opacity, highlights, superscript/subscript, and inline editing on canvas |
 
 ### Media & Interactive
 
@@ -316,7 +331,20 @@ The editor uses Payload's native draft system. The plugin automatically enables
 | **Button** | Styled button/link with variants |
 | **Card** | Content card with optional image |
 | **Divider** | Horizontal rule with styles |
-| **Accordion** | Expandable content sections |
+| **Accordion** | Expandable content sections (first item opens by default) |
+
+### Semantic HTML Elements
+
+Layout components (Section, Flex, Container, Grid) support semantic HTML output for better SEO and accessibility:
+
+| Component | Available Elements |
+|-----------|-------------------|
+| **Section** | `section`, `article`, `aside`, `nav`, `header`, `footer`, `main`, `div` |
+| **Flex** | `div`, `nav`, `ul`, `ol`, `aside`, `section` |
+| **Container** | `div`, `article`, `aside`, `section` |
+| **Grid** | `div`, `ul`, `ol` |
+
+Select the appropriate HTML element in the component's sidebar to output semantic markup.
 
 ### Responsive Controls
 
@@ -324,6 +352,7 @@ Layout components support per-breakpoint customization:
 - **Dimensions** - Width, max-width, height constraints
 - **Padding/Margin** - Spacing per breakpoint
 - **Visibility** - Show/hide at specific breakpoints
+- **Viewport Preview** - Mobile, Tablet, Desktop, and Full Width options
 
 ---
 
@@ -336,13 +365,15 @@ All fields are imported from `@delmaredigital/payload-puck/fields`.
 | Field | Description |
 |-------|-------------|
 | **MediaField** | Payload media library integration |
-| **TiptapField** | Rich text editor with formatting |
+| **RichTextField** | Puck's native richtext with enhancements (colors, font sizes, highlights) |
 | **ColorPickerField** | Color picker with opacity and presets |
 | **BackgroundField** | Solid colors, gradients, images |
 | **PaddingField / MarginField** | Visual spacing editors |
 | **BorderField** | Border width, style, color, radius |
 | **DimensionsField** | Width/height with constraints |
-| **AlignmentField** | Text alignment options |
+| **AlignmentField** | Text alignment (left, center, right) |
+| **ContentAlignmentField** | Visual 3x3 grid selector for positioning (d-pad style) |
+| **SizeField** | Preset sizes (sm, default, lg) with custom mode |
 | **AnimationField** | Entrance animations |
 | **ResponsiveVisibilityField** | Show/hide per breakpoint |
 | **FolderPickerField** | Hierarchical folder selection (page-tree) |
@@ -375,9 +406,46 @@ import {
   dimensionsValueToCSS,
   animationValueToCSS,
   visibilityValueToCSS,
+  alignmentToFlexCSS,
+  alignmentToGridCSS,
+  sizeValueToCSS,
+  getSizeClasses,
 } from '@delmaredigital/payload-puck/fields'
 ```
 
+### ContentAlignmentField Example
+
+The ContentAlignmentField provides a visual 3x3 grid selector for content positioning:
+
+```typescript
+import {
+  createContentAlignmentField,
+  alignmentToFlexCSS,
+  alignmentToGridCSS,
+} from '@delmaredigital/payload-puck/fields'
+
+const BannerConfig = {
+  fields: {
+    contentPosition: createContentAlignmentField({ label: 'Content Position' }),
+  },
+  render: ({ contentPosition }) => (
+    <div style={{
+      display: 'flex',
+      minHeight: '400px',
+      ...alignmentToFlexCSS(contentPosition), // Converts to justify-content + align-items
+    }}>
+      <div>Positioned content</div>
+    </div>
+  ),
+}
+```
+
+Helper functions:
+- `alignmentToFlexCSS()` - For Flexbox containers (`justify-content` + `align-items`)
+- `alignmentToGridCSS()` - For Grid containers (`justify-content` + `align-content`)
+- `alignmentToPlaceSelfCSS()` - For individual grid items (`place-self`)
+- `alignmentToTailwind()` - Returns Tailwind classes (`justify-* items-*`)
+
 ---
 
 ## Building Custom Components
@@ -417,7 +485,7 @@ export const puckConfig: Config = {
 Build custom components with pre-built fields:
 
 ```typescript
-import type { ComponentConfig } from '@measured/puck'
+import type { ComponentConfig } from '@puckeditor/core'
 import {
   createMediaField,
   createBackgroundField,
@@ -539,8 +607,11 @@ This is the recommended pattern for Payload apps. The provider wraps only the ad
 | `createBorderField()` | Border styling |
 | `createDimensionsField()` | Width/height constraints |
 | `createAnimationField()` | Entrance animations |
-| `createAlignmentField()` | Text alignment |
-| `createTiptapField()` | Inline rich text editor |
+| `createAlignmentField()` | Text alignment (left, center, right) |
+| `createContentAlignmentField()` | Visual 3x3 grid positioning selector |
+| `createSizeField()` | Size presets with custom mode |
+| `createRichTextField()` | Puck's native richtext with colors, font sizes, highlights |
+| `createResponsiveVisibilityField()` | Show/hide per breakpoint |
 
 ### CSS Helper Functions
 
@@ -554,12 +625,17 @@ import {
   borderValueToCSS,
   dimensionsValueToCSS,
   colorValueToCSS,
+  alignmentToFlexCSS,
+  alignmentToGridCSS,
+  sizeValueToCSS,
 } from '@delmaredigital/payload-puck/fields'
 
 const style = {
   background: backgroundValueToCSS(props.background),
   padding: paddingValueToCSS(props.padding),
   ...dimensionsValueToCSS(props.dimensions),
+  ...alignmentToFlexCSS(props.contentAlignment),
+  ...sizeValueToCSS(props.size),
 }
 ```
 
@@ -772,6 +848,196 @@ import { LegacyBlockRenderer } from '@/components/LegacyBlockRenderer'
 
 ---
 
+## AI Integration
+
+> **Early Preview:** While Puck's AI features are powerful, this plugin's implementation is still in early stages and under active development. Expect changes as we refine the integration.
+
+The plugin integrates with [Puck AI](https://puckeditor.com/docs/integrating-puck/ai) to enable AI-assisted page generation. Users can describe what they want in natural language, and the AI builds complete page layouts using your components.
+
+### Requirements
+
+- `PUCK_API_KEY` environment variable (from [Puck Cloud](https://puckeditor.com))
+- AI features require `@puckeditor/plugin-ai` and `@puckeditor/cloud-client` (bundled with the plugin)
+
+### Quick Start
+
+Enable AI in your plugin configuration:
+
+```typescript
+createPuckPlugin({
+  pagesCollection: 'pages',
+  ai: {
+    enabled: true,
+    context: 'We are Acme Corp, a B2B SaaS company. Use professional language.',
+  },
+})
+```
+
+This automatically:
+- Registers the AI chat endpoint at `/api/puck/ai`
+- Adds the AI chat plugin to the editor
+- Applies comprehensive component instructions for better generation quality
+
+### Dynamic Business Context
+
+Instead of hardcoding context in your config, you can manage it through Payload admin:
+
+```typescript
+createPuckPlugin({
+  ai: {
+    enabled: true,
+    contextCollection: true,  // Creates puck-ai-context collection
+  },
+})
+```
+
+This creates a `puck-ai-context` collection where you can add entries for:
+- **Brand Guidelines** - Colors, fonts, brand voice
+- **Tone of Voice** - How to communicate
+- **Product Information** - What you sell/offer
+- **Industry Context** - Your market and audience
+- **Technical Requirements** - Specific constraints
+- **Page Patterns** - Common layout structures
+
+Context entries can be enabled/disabled and ordered. The AI receives all enabled entries sorted by order.
+
+### Context Editor Plugin
+
+When `contextCollection: true`, a "Context" panel appears in the Puck plugin rail. Users can view, create, edit, and toggle context entries directly in the editor without visiting Payload admin.
+
+### Prompt Management
+
+Store reusable prompts in Payload:
+
+```typescript
+createPuckPlugin({
+  ai: {
+    enabled: true,
+    promptsCollection: true,  // Creates puck-ai-prompts collection
+    examplePrompts: [
+      { label: 'Landing page', prompt: 'Create a landing page for...' },
+    ],
+  },
+})
+```
+
+Prompts from the collection appear in the AI chat interface. A "Prompts" panel in the plugin rail allows in-editor prompt management.
+
+### Custom Tools
+
+Enable the AI to query your data:
+
+```typescript
+import { z } from 'zod'
+
+createPuckPlugin({
+  ai: {
+    enabled: true,
+    tools: {
+      getProducts: {
+        description: 'Get products from the database',
+        inputSchema: z.object({ category: z.string() }),
+        execute: async ({ category }, { payload }) => {
+          return await payload.find({
+            collection: 'products',
+            where: { category: { equals: category } },
+          })
+        },
+      },
+    },
+  },
+})
+```
+
+Tools receive a context object with the Payload instance and authenticated user.
+
+### AI Configuration Options
+
+| Option | Default | Description |
+|--------|---------|-------------|
+| `enabled` | `false` | Enable AI features |
+| `context` | `undefined` | Static system context for the AI |
+| `contextCollection` | `false` | Create `puck-ai-context` collection for dynamic context |
+| `promptsCollection` | `false` | Create `puck-ai-prompts` collection for reusable prompts |
+| `examplePrompts` | `[]` | Static example prompts for the chat interface |
+| `tools` | `undefined` | Custom tools for AI to query your system |
+| `componentInstructions` | `undefined` | Override default component AI instructions |
+
+### Component Instructions
+
+The plugin includes comprehensive instructions for all built-in components, teaching the AI:
+- Correct field names and values
+- Component composition patterns
+- Page structure best practices (Hero → Features → CTA flow)
+- Semantic HTML usage
+
+To customize or extend:
+
+```typescript
+createPuckPlugin({
+  ai: {
+    enabled: true,
+    componentInstructions: {
+      Heading: {
+        ai: { instructions: 'Use our brand voice: professional but approachable' },
+        fields: {
+          text: { ai: { instructions: 'Keep under 8 words' } },
+        },
+      },
+    },
+  },
+})
+```
+
+### Standalone API Routes
+
+For custom implementations outside the plugin:
+
+```typescript
+// app/api/puck/[...all]/route.ts
+import { createPuckAiApiRoutes } from '@delmaredigital/payload-puck/ai'
+import config from '@payload-config'
+
+export const POST = createPuckAiApiRoutes({
+  payloadConfig: config,
+  auth: {
+    authenticate: async (request) => {
+      // Your auth implementation
+      return { user: { id: '...' } }
+    },
+  },
+  ai: {
+    context: 'Your business context...',
+  },
+})
+```
+
+### AI Exports
+
+```typescript
+import {
+  // Plugins
+  createAiPlugin,
+  createPromptEditorPlugin,
+  createContextEditorPlugin,
+
+  // Hooks
+  useAiPrompts,
+  useAiContext,
+
+  // Config utilities
+  injectAiConfig,
+  comprehensiveComponentAiConfig,
+  pagePatternSystemContext,
+
+  // API routes
+  createPuckAiApiRoutes,
+  createAiGenerate,
+} from '@delmaredigital/payload-puck/ai'
+```
+
+---
+
 ## Advanced Configuration
 
 ### Plugin Options
@@ -785,6 +1051,8 @@ import { LegacyBlockRenderer } from '@/components/LegacyBlockRenderer'
 | `adminViewPath` | `'/puck-editor'` | Path for the editor (full path: `/admin/puck-editor/:collection/:id`) |
 | `pageTreeIntegration` | auto-detect | Integration with `@delmaredigital/payload-page-tree` |
 | `layouts` | `undefined` | Layout definitions for page templates |
+| `editorStylesheet` | `undefined` | Path to CSS file for editor iframe styling (e.g., `'src/app/globals.css'`) |
+| `editorStylesheetUrls` | `[]` | Additional stylesheet URLs for the editor (e.g., Google Fonts) |
 
 ```typescript
 createPuckPlugin({
@@ -812,6 +1080,52 @@ createPuckPlugin({
 })
 ```
 
+### Editor Stylesheet (Iframe Styling)
+
+The Puck editor renders page content in an iframe. By default, this iframe doesn't have access to your frontend's CSS (Tailwind utilities, CSS variables, fonts). The `editorStylesheet` option solves this by compiling and serving your CSS.
+
+**How it works:**
+1. You specify your CSS file path in the plugin config
+2. The plugin creates an endpoint at `/api/puck/styles`
+3. On first request, the CSS is compiled with PostCSS/Tailwind and cached
+4. The iframe loads this compiled CSS
+
+```typescript
+createPuckPlugin({
+  pagesCollection: 'pages',
+  // Your frontend's main CSS file
+  editorStylesheet: 'src/app/(frontend)/globals.css',
+  // External stylesheets (Google Fonts, etc.)
+  editorStylesheetUrls: [
+    'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'
+  ],
+})
+```
+
+Then update your `PuckConfigProvider` to use the compiled stylesheet:
+
+```typescript
+<PuckConfigProvider
+  config={editorConfig}
+  layouts={siteLayouts}
+  editorStylesheets={[
+    '/api/puck/styles',  // Plugin-created endpoint
+    'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'
+  ]}
+>
+  {children}
+</PuckConfigProvider>
+```
+
+**Requirements:**
+- `postcss` must be installed in your project
+- For Tailwind v4: `@tailwindcss/postcss`
+- For Tailwind v3: `tailwindcss`
+
+The CSS is compiled at runtime (cached after first request) using your project's PostCSS/Tailwind installation.
+
+---
+
 ### Custom API Routes (Advanced)
 
 The built-in endpoints handle most use cases. Only disable them if you need custom authentication or middleware.
@@ -845,6 +1159,7 @@ See the JSDoc in `@delmaredigital/payload-puck/api` for usage examples.
 | `@delmaredigital/payload-puck/theme` | `ThemeProvider`, theme utilities |
 | `@delmaredigital/payload-puck/layouts` | Layout definitions, `LayoutWrapper` |
 | `@delmaredigital/payload-puck/api` | API route factories (for custom implementations) |
+| `@delmaredigital/payload-puck/ai` | AI plugins, hooks, config utilities, API routes |
 | `@delmaredigital/payload-puck/admin/client` | `EditWithPuckButton`, `EditWithPuckCell` |
 
 ---

package/dist/admin/PuckEditorView.d.ts

@@ -1,4 +1,4 @@
-import type { Config as PuckConfig, Data, Plugin as PuckPlugin } from '@measured/puck';
+import type { Config as PuckConfig, Data, Plugin as PuckPlugin } from '@puckeditor/core';
 /**
  * Props for the PuckEditorView component
  */

package/dist/admin/PuckEditorView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PuckEditorView.d.ts","sourceRoot":"","sources":["../../src/admin/PuckEditorView.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,IAAI,UAAU,EAAE,IAAI,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAEtF;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,MAAM,EAAE,UAAU,CAAA;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC,CAAA;IAChD;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,OAAO,CAAA;KAAE,CAAC,CAAA;IACtE;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,UAAU,EAAE,GAAG,KAAK,CAAA;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACrC;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,cAAwB,EACxB,WAAyB,EACzB,OAAO,EACP,UAAU,EACV,YAAY,EACZ,SAAwB,EACxB,OAAO,EACP,aAAa,EACb,WAAW,GACZ,EAAE,mBAAmB,2CAkKrB;AAED,eAAe,cAAc,CAAA"}
+{"version":3,"file":"PuckEditorView.d.ts","sourceRoot":"","sources":["../../src/admin/PuckEditorView.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,IAAI,UAAU,EAAE,IAAI,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAExF;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,MAAM,EAAE,UAAU,CAAA;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC,CAAA;IAChD;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,OAAO,CAAA;KAAE,CAAC,CAAA;IACtE;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,UAAU,EAAE,GAAG,KAAK,CAAA;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACrC;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,cAAwB,EACxB,WAAyB,EACzB,OAAO,EACP,UAAU,EACV,YAAY,EACZ,SAAwB,EACxB,OAAO,EACP,aAAa,EACb,WAAW,GACZ,EAAE,mBAAmB,2CAkKrB;AAED,eAAe,cAAc,CAAA"}

package/dist/ai/collections/AiContext.d.ts

@@ -0,0 +1,16 @@
+import type { CollectionConfig } from 'payload';
+/**
+ * AI Context Collection
+ *
+ * Stores business context entries for the AI chat interface.
+ * These context entries are concatenated and sent to the AI system prompt
+ * to help it understand your brand, tone, and requirements.
+ *
+ * @example Creating context entries in Payload admin:
+ * - "Brand Guidelines" - Colors, fonts, brand voice
+ * - "Tone of Voice" - How to communicate
+ * - "Product Information" - What you sell/offer
+ * - "Industry Context" - Your market and audience
+ */
+export declare const AiContextCollection: CollectionConfig;
+//# sourceMappingURL=AiContext.d.ts.map

package/dist/ai/collections/AiContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiContext.d.ts","sourceRoot":"","sources":["../../../src/ai/collections/AiContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE/C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,mBAAmB,EAAE,gBA0EjC,CAAA"}

package/dist/ai/collections/AiContext.js

@@ -0,0 +1,87 @@
+/**
+ * AI Context Collection
+ *
+ * Stores business context entries for the AI chat interface.
+ * These context entries are concatenated and sent to the AI system prompt
+ * to help it understand your brand, tone, and requirements.
+ *
+ * @example Creating context entries in Payload admin:
+ * - "Brand Guidelines" - Colors, fonts, brand voice
+ * - "Tone of Voice" - How to communicate
+ * - "Product Information" - What you sell/offer
+ * - "Industry Context" - Your market and audience
+ */
+export const AiContextCollection = {
+    slug: 'puck-ai-context',
+    labels: {
+        singular: 'AI Context',
+        plural: 'AI Contexts',
+    },
+    admin: {
+        group: 'Puck',
+        useAsTitle: 'name',
+        defaultColumns: ['name', 'category', 'enabled', 'order', 'updatedAt'],
+        hidden: false, // Visible in admin for context management
+        description: 'Business context for AI page generation. Add entries for brand guidelines, tone of voice, product info, etc.',
+    },
+    access: {
+        // Default: authenticated users can manage context
+        read: ({ req }) => Boolean(req.user),
+        create: ({ req }) => Boolean(req.user),
+        update: ({ req }) => Boolean(req.user),
+        delete: ({ req }) => Boolean(req.user),
+    },
+    fields: [
+        {
+            name: 'name',
+            type: 'text',
+            required: true,
+            admin: {
+                description: 'Name for this context block (e.g., "Brand Guidelines", "Tone of Voice")',
+            },
+        },
+        {
+            name: 'content',
+            type: 'textarea',
+            required: true,
+            admin: {
+                description: 'The context content in markdown format. Use headers (##) to organize, lists for guidelines, etc.',
+                rows: 12,
+            },
+        },
+        {
+            name: 'category',
+            type: 'select',
+            options: [
+                { label: 'Brand Guidelines', value: 'brand' },
+                { label: 'Tone of Voice', value: 'tone' },
+                { label: 'Product Information', value: 'product' },
+                { label: 'Industry Context', value: 'industry' },
+                { label: 'Technical Requirements', value: 'technical' },
+                { label: 'Page Patterns', value: 'patterns' },
+                { label: 'Other', value: 'other' },
+            ],
+            admin: {
+                description: 'Category for organizing context blocks',
+            },
+        },
+        {
+            name: 'enabled',
+            type: 'checkbox',
+            defaultValue: true,
+            admin: {
+                description: 'Include this context in AI prompts. Uncheck to temporarily disable.',
+            },
+        },
+        {
+            name: 'order',
+            type: 'number',
+            defaultValue: 0,
+            admin: {
+                description: 'Order in the context (lower numbers appear earlier in the prompt)',
+            },
+        },
+    ],
+    timestamps: true,
+};
+//# sourceMappingURL=AiContext.js.map

package/dist/ai/collections/AiContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiContext.js","sourceRoot":"","sources":["../../../src/ai/collections/AiContext.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAqB;IACnD,IAAI,EAAE,iBAAiB;IACvB,MAAM,EAAE;QACN,QAAQ,EAAE,YAAY;QACtB,MAAM,EAAE,aAAa;KACtB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,MAAM;QAClB,cAAc,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,CAAC;QACrE,MAAM,EAAE,KAAK,EAAE,0CAA0C;QACzD,WAAW,EACT,8GAA8G;KACjH;IACD,MAAM,EAAE;QACN,kDAAkD;QAClD,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC;QACpC,MAAM,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC;QACtC,MAAM,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC;QACtC,MAAM,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC;KACvC;IACD,MAAM,EAAE;QACN;YACE,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE;gBACL,WAAW,EAAE,yEAAyE;aACvF;SACF;QACD;YACE,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,UAAU;YAChB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE;gBACL,WAAW,EACT,kGAAkG;gBACpG,IAAI,EAAE,EAAE;aACT;SACF;QACD;YACE,IAAI,EAAE,UAAU;YAChB,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE;gBACP,EAAE,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,OAAO,EAAE;gBAC7C,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,EAAE;gBACzC,EAAE,KAAK,EAAE,qBAAqB,EAAE,KAAK,EAAE,SAAS,EAAE;gBAClD,EAAE,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,UAAU,EAAE;gBAChD,EAAE,KAAK,EAAE,wBAAwB,EAAE,KAAK,EAAE,WAAW,EAAE;gBACvD,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,UAAU,EAAE;gBAC7C,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;aACnC;YACD,KAAK,EAAE;gBACL,WAAW,EAAE,wCAAwC;aACtD;SACF;QACD;YACE,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,UAAU;YAChB,YAAY,EAAE,IAAI;YAClB,KAAK,EAAE;gBACL,WAAW,EAAE,qEAAqE;aACnF;SACF;QACD;YACE,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,QAAQ;YACd,YAAY,EAAE,CAAC;YACf,KAAK,EAAE;gBACL,WAAW,EAAE,mEAAmE;aACjF;SACF;KACF;IACD,UAAU,EAAE,IAAI;CACjB,CAAA"}

package/dist/ai/collections/AiPrompts.d.ts

@@ -0,0 +1,10 @@
+import type { CollectionConfig } from 'payload';
+/**
+ * AI Prompts Collection
+ *
+ * Stores example prompts for the AI chat interface.
+ * These prompts are displayed in the Puck editor for users to quickly
+ * start common AI generation tasks.
+ */
+export declare const AiPromptsCollection: CollectionConfig;
+//# sourceMappingURL=AiPrompts.d.ts.map

package/dist/ai/collections/AiPrompts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiPrompts.d.ts","sourceRoot":"","sources":["../../../src/ai/collections/AiPrompts.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE/C;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,EAAE,gBAsDjC,CAAA"}

package/dist/ai/collections/AiPrompts.js

@@ -0,0 +1,63 @@
+/**
+ * AI Prompts Collection
+ *
+ * Stores example prompts for the AI chat interface.
+ * These prompts are displayed in the Puck editor for users to quickly
+ * start common AI generation tasks.
+ */
+export const AiPromptsCollection = {
+    slug: 'puck-ai-prompts',
+    labels: {
+        singular: 'AI Prompt',
+        plural: 'AI Prompts',
+    },
+    admin: {
+        group: 'Puck',
+        useAsTitle: 'label',
+        defaultColumns: ['label', 'category', 'order', 'updatedAt'],
+        hidden: false, // Visible in admin for prompt management
+    },
+    access: {
+        // Default: authenticated users can manage prompts
+        read: ({ req }) => Boolean(req.user),
+        create: ({ req }) => Boolean(req.user),
+        update: ({ req }) => Boolean(req.user),
+        delete: ({ req }) => Boolean(req.user),
+    },
+    fields: [
+        {
+            name: 'label',
+            type: 'text',
+            required: true,
+            admin: {
+                description: 'Display label for the prompt (e.g., "Landing page")',
+            },
+        },
+        {
+            name: 'prompt',
+            type: 'textarea',
+            required: true,
+            admin: {
+                description: 'The actual prompt text sent to the AI',
+                rows: 4,
+            },
+        },
+        {
+            name: 'category',
+            type: 'text',
+            admin: {
+                description: 'Optional category for grouping prompts (e.g., "Marketing", "Product")',
+            },
+        },
+        {
+            name: 'order',
+            type: 'number',
+            defaultValue: 0,
+            admin: {
+                description: 'Display order (lower numbers appear first)',
+            },
+        },
+    ],
+    timestamps: true,
+};
+//# sourceMappingURL=AiPrompts.js.map