@delmaredigital/payload-puck 0.1.3 → 0.3.0

package/dist/layouts/index.mjs

@@ -1,378 +0,0 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-
-// src/layouts/defaults.ts
-var defaultLayout = {
-  value: "default",
-  label: "Default",
-  description: "Standard page layout with contained content width",
-  classes: {
-    wrapper: "",
-    container: "mx-auto px-4 sm:px-6 lg:px-8",
-    content: ""
-  },
-  maxWidth: "1200px",
-  fullWidth: false
-};
-var landingLayout = {
-  value: "landing",
-  label: "Landing",
-  description: "Full-width sections with no global container constraints",
-  classes: {
-    wrapper: "",
-    container: "",
-    content: ""
-  },
-  fullWidth: true
-};
-var fullWidthLayout = {
-  value: "full-width",
-  label: "Full Width",
-  description: "Content spans the full viewport width",
-  classes: {
-    wrapper: "w-full",
-    container: "w-full",
-    content: ""
-  },
-  maxWidth: "100%",
-  fullWidth: true
-};
-var narrowLayout = {
-  value: "narrow",
-  label: "Narrow",
-  description: "Narrow content width for optimal reading experience",
-  classes: {
-    wrapper: "",
-    container: "mx-auto px-4 sm:px-6",
-    content: ""
-  },
-  maxWidth: "768px",
-  fullWidth: false
-};
-var wideLayout = {
-  value: "wide",
-  label: "Wide",
-  description: "Wider content area for dashboards or galleries",
-  classes: {
-    wrapper: "",
-    container: "mx-auto px-4 sm:px-6 lg:px-8",
-    content: ""
-  },
-  maxWidth: "1440px",
-  fullWidth: false
-};
-var DEFAULT_LAYOUTS = [
-  defaultLayout,
-  landingLayout,
-  fullWidthLayout
-];
-var EXTENDED_LAYOUTS = [
-  defaultLayout,
-  landingLayout,
-  fullWidthLayout,
-  narrowLayout,
-  wideLayout
-];
-var DEFAULT_LAYOUT_CONFIG = {
-  layouts: DEFAULT_LAYOUTS,
-  defaultLayout: "default"
-};
-
-// src/layouts/utils.ts
-function resolveLayoutConfig(config) {
-  if (!config) return DEFAULT_LAYOUT_CONFIG;
-  return {
-    layouts: config.layouts ?? DEFAULT_LAYOUTS,
-    defaultLayout: config.defaultLayout ?? "default"
-  };
-}
-function getLayout(layouts, value, fallback = "default") {
-  const layout = layouts.find((l) => l.value === value);
-  if (layout) return layout;
-  if (value !== fallback) {
-    return layouts.find((l) => l.value === fallback);
-  }
-  return layouts[0];
-}
-function layoutsToOptions(layouts) {
-  return layouts.map(({ value, label, description }) => ({
-    value,
-    label,
-    description
-  }));
-}
-function layoutsToPayloadOptions(layouts) {
-  return layouts.map(({ value, label }) => ({
-    label,
-    value
-  }));
-}
-function createLayout(config) {
-  return {
-    ...config
-  };
-}
-function mergeLayouts(base, custom, options) {
-  if (options?.replace) {
-    return custom;
-  }
-  let result = [...base];
-  if (options?.exclude) {
-    result = result.filter((l) => !options.exclude.includes(l.value));
-  }
-  for (const customLayout of custom) {
-    const existingIndex = result.findIndex((l) => l.value === customLayout.value);
-    if (existingIndex >= 0) {
-      result[existingIndex] = customLayout;
-    } else {
-      result.push(customLayout);
-    }
-  }
-  return result;
-}
-
-// src/fields/shared.ts
-function hexToRgb(hex) {
-  const clean = hex.replace(/^#/, "");
-  if (clean.length !== 6) return null;
-  const r = parseInt(clean.substring(0, 2), 16);
-  const g = parseInt(clean.substring(2, 4), 16);
-  const b = parseInt(clean.substring(4, 6), 16);
-  if (isNaN(r) || isNaN(g) || isNaN(b)) return null;
-  return { r, g, b };
-}
-function colorValueToCSS(color) {
-  if (!color?.hex) return void 0;
-  const rgb = hexToRgb(color.hex);
-  if (!rgb) return color.hex;
-  const opacity = (color.opacity ?? 100) / 100;
-  if (opacity === 1) {
-    return color.hex;
-  }
-  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity})`;
-}
-function gradientValueToCSS(gradient) {
-  if (!gradient?.stops || gradient.stops.length === 0) {
-    return "transparent";
-  }
-  const sortedStops = [...gradient.stops].sort((a, b) => a.position - b.position);
-  const stopsCSS = sortedStops.map((stop) => {
-    const color = colorValueToCSS(stop.color) || "transparent";
-    return `${color} ${stop.position}%`;
-  }).join(", ");
-  if (gradient.type === "radial") {
-    const shape = gradient.radialShape || "circle";
-    const position = gradient.radialPosition || "center";
-    return `radial-gradient(${shape} at ${position}, ${stopsCSS})`;
-  }
-  return `linear-gradient(${gradient.angle}deg, ${stopsCSS})`;
-}
-function positionToCSS(position) {
-  const positionMap = {
-    center: "center",
-    top: "top",
-    bottom: "bottom",
-    left: "left",
-    right: "right",
-    "top-left": "top left",
-    "top-right": "top right",
-    "bottom-left": "bottom left",
-    "bottom-right": "bottom right"
-  };
-  return position ? positionMap[position] || "center" : "center";
-}
-function maskDirectionToCSS(direction) {
-  const directionMap = {
-    "to-top": "to top",
-    "to-bottom": "to bottom",
-    "to-left": "to left",
-    "to-right": "to right",
-    "to-top-left": "to top left",
-    "to-top-right": "to top right",
-    "to-bottom-left": "to bottom left",
-    "to-bottom-right": "to bottom right",
-    "from-center": "radial"
-    // Not used for linear, handled separately in maskToCSS
-  };
-  return directionMap[direction] || "to bottom";
-}
-function maskToCSS(mask) {
-  const startAlpha = (mask.startOpacity ?? 100) / 100;
-  const endAlpha = (mask.endOpacity ?? 0) / 100;
-  if (mask.direction === "from-center") {
-    return `radial-gradient(circle at center, rgba(0,0,0,${startAlpha}) ${mask.startPosition}%, rgba(0,0,0,${endAlpha}) ${mask.endPosition}%)`;
-  }
-  const direction = maskDirectionToCSS(mask.direction);
-  return `linear-gradient(${direction}, rgba(0,0,0,${startAlpha}) ${mask.startPosition}%, rgba(0,0,0,${endAlpha}) ${mask.endPosition}%)`;
-}
-function backgroundValueToCSS(bg) {
-  if (!bg || bg.type === "none") {
-    return {};
-  }
-  const style = {};
-  switch (bg.type) {
-    case "solid":
-      if (bg.solid?.hex) {
-        style.backgroundColor = colorValueToCSS(bg.solid);
-      }
-      break;
-    case "gradient":
-      if (bg.gradient && bg.gradient.stops && bg.gradient.stops.length > 0) {
-        style.background = gradientValueToCSS(bg.gradient);
-      }
-      break;
-    case "image":
-      if (bg.image?.media?.url) {
-        const imageUrl = bg.image.media.url;
-        const size = bg.image.size || "cover";
-        const position = positionToCSS(bg.image.position);
-        const repeat = bg.image.repeat || "no-repeat";
-        const attachment = bg.image.attachment || "scroll";
-        if (bg.overlay?.enabled) {
-          const overlayCSS = bg.overlay.type === "solid" ? colorValueToCSS(bg.overlay.solid) : gradientValueToCSS(bg.overlay.gradient);
-          if (bg.overlay.type === "solid" && overlayCSS) {
-            style.backgroundImage = `linear-gradient(${overlayCSS}, ${overlayCSS}), url(${imageUrl})`;
-          } else {
-            style.backgroundImage = `${overlayCSS}, url(${imageUrl})`;
-          }
-          style.backgroundSize = `auto, ${size}`;
-          style.backgroundPosition = `center, ${position}`;
-          style.backgroundRepeat = `no-repeat, ${repeat}`;
-          style.backgroundAttachment = `scroll, ${attachment}`;
-        } else {
-          style.backgroundImage = `url(${imageUrl})`;
-          style.backgroundSize = size;
-          style.backgroundPosition = position;
-          style.backgroundRepeat = repeat;
-          style.backgroundAttachment = attachment;
-        }
-        if (bg.image.mask?.enabled) {
-          const maskCSS = maskToCSS(bg.image.mask);
-          style.maskImage = maskCSS;
-          style.WebkitMaskImage = maskCSS;
-        }
-      }
-      break;
-  }
-  return style;
-}
-var stickyFooterContainerStyle = {
-  minHeight: "100vh",
-  display: "flex",
-  flexDirection: "column"
-};
-var stickyFooterMainStyle = {
-  flex: 1
-};
-function LayoutWrapper({ children, layout, className, overrides }) {
-  if (!layout) {
-    if (overrides?.background) {
-      const bgStyles = backgroundValueToCSS(overrides.background);
-      return /* @__PURE__ */ jsx("div", { style: { minHeight: "100vh", ...bgStyles }, children });
-    }
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-  const Header = layout.header;
-  const Footer = layout.footer;
-  const shouldShowHeader = overrides?.showHeader === "hide" ? false : overrides?.showHeader === "show" ? true : !!Header;
-  const shouldShowFooter = overrides?.showFooter === "hide" ? false : overrides?.showFooter === "show" ? true : !!Footer;
-  const useStickyFooter = layout.stickyFooter !== false;
-  const mainStyle = {
-    ...layout.stickyHeaderHeight && shouldShowHeader ? { paddingTop: layout.stickyHeaderHeight } : {},
-    ...useStickyFooter ? stickyFooterMainStyle : {}
-  };
-  const outerBackgroundStyles = overrides?.background ? backgroundValueToCSS(overrides.background) : {
-    ...layout.styles?.wrapper?.background !== void 0 ? { background: layout.styles.wrapper.background } : {},
-    ...layout.styles?.wrapper?.backgroundAttachment !== void 0 ? { backgroundAttachment: layout.styles.wrapper.backgroundAttachment } : {}
-  };
-  const effectiveMaxWidth = overrides?.maxWidth && overrides.maxWidth !== "default" ? overrides.maxWidth : layout.maxWidth;
-  const wrapWithStickyFooter = (content) => {
-    if (useStickyFooter) {
-      return /* @__PURE__ */ jsx("div", { style: { ...stickyFooterContainerStyle, ...outerBackgroundStyles }, children: content });
-    }
-    const hasBackground = Object.keys(outerBackgroundStyles).length > 0;
-    if (hasBackground) {
-      return /* @__PURE__ */ jsx("div", { style: { minHeight: "100vh", ...outerBackgroundStyles }, children: content });
-    }
-    return /* @__PURE__ */ jsx(Fragment, { children: content });
-  };
-  if (layout.wrapper) {
-    const CustomWrapper = layout.wrapper;
-    return wrapWithStickyFooter(
-      /* @__PURE__ */ jsxs(Fragment, { children: [
-        shouldShowHeader && Header && /* @__PURE__ */ jsx(Header, {}),
-        /* @__PURE__ */ jsx("main", { style: Object.keys(mainStyle).length > 0 ? mainStyle : void 0, children: /* @__PURE__ */ jsx(CustomWrapper, { children }) }),
-        shouldShowFooter && Footer && /* @__PURE__ */ jsx(Footer, {})
-      ] })
-    );
-  }
-  const wrapperStyle = {
-    ...layout.styles?.wrapper
-  };
-  const containerStyle = {
-    ...effectiveMaxWidth && !layout.fullWidth ? { maxWidth: effectiveMaxWidth } : {},
-    ...layout.styles?.container
-  };
-  const contentStyle = {
-    ...layout.styles?.content
-  };
-  const dataAttrs = {
-    "data-layout": layout.value,
-    ...layout.dataAttributes
-  };
-  if (layout.fullWidth) {
-    return wrapWithStickyFooter(
-      /* @__PURE__ */ jsxs(Fragment, { children: [
-        shouldShowHeader && Header && /* @__PURE__ */ jsx(Header, {}),
-        /* @__PURE__ */ jsx(
-          "main",
-          {
-            className: [layout.classes?.wrapper, className].filter(Boolean).join(" ") || void 0,
-            style: {
-              ...mainStyle,
-              ...Object.keys(wrapperStyle).length > 0 ? wrapperStyle : {}
-            },
-            ...dataAttrs,
-            children
-          }
-        ),
-        shouldShowFooter && Footer && /* @__PURE__ */ jsx(Footer, {})
-      ] })
-    );
-  }
-  return wrapWithStickyFooter(
-    /* @__PURE__ */ jsxs(Fragment, { children: [
-      shouldShowHeader && Header && /* @__PURE__ */ jsx(Header, {}),
-      /* @__PURE__ */ jsx(
-        "main",
-        {
-          className: layout.classes?.wrapper || void 0,
-          style: {
-            ...mainStyle,
-            ...Object.keys(wrapperStyle).length > 0 ? wrapperStyle : {}
-          },
-          ...dataAttrs,
-          children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: [layout.classes?.container, className].filter(Boolean).join(" ") || void 0,
-              style: Object.keys(containerStyle).length > 0 ? containerStyle : void 0,
-              children: /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: layout.classes?.content || void 0,
-                  style: Object.keys(contentStyle).length > 0 ? contentStyle : void 0,
-                  children
-                }
-              )
-            }
-          )
-        }
-      ),
-      shouldShowFooter && Footer && /* @__PURE__ */ jsx(Footer, {})
-    ] })
-  );
-}
-
-export { DEFAULT_LAYOUTS, DEFAULT_LAYOUT_CONFIG, EXTENDED_LAYOUTS, LayoutWrapper, createLayout, defaultLayout, fullWidthLayout, getLayout, landingLayout, layoutsToOptions, layoutsToPayloadOptions, mergeLayouts, narrowLayout, resolveLayoutConfig, wideLayout };
-//# sourceMappingURL=index.mjs.map
-//# sourceMappingURL=index.mjs.map

package/dist/plugin/index.d.mts

@@ -1,289 +0,0 @@
-import { c as PuckPluginOptions, d as PuckAdminConfig } from '../index-CQu6SzDg.mjs';
-import { Field, CollectionConfig, Plugin } from 'payload';
-import { L as LayoutDefinition } from '../types-D7D3rZ1J.mjs';
-import '@measured/puck';
-import 'react';
-
-/**
- * Types for Puck field utilities
- *
- * These types support the getPuckFields() utility for hybrid collection integration.
- */
-
-/**
- * Conversion type option for the conversion tracking field
- */
-interface ConversionTypeOption {
-    label: string;
-    value: string;
-}
-/**
- * Options for getPuckFields() utility function
- *
- * Use this to configure which Puck-related fields to include
- * when adding Puck support to an existing collection.
- *
- * @example
- * ```typescript
- * import { getPuckFields } from '@delmaredigital/payload-puck'
- *
- * const Pages: CollectionConfig = {
- *   slug: 'pages',
- *   fields: [
- *     // Your existing fields...
- *     { name: 'layout', type: 'blocks', blocks: [...] },
- *
- *     // Add Puck support
- *     ...getPuckFields({
- *       includeSEO: false,      // Using your own SEO fields
- *       includeConversion: true,
- *     }),
- *   ],
- * }
- * ```
- */
-interface GetPuckFieldsOptions {
-    /**
-     * Include SEO field group using official @payloadcms/plugin-seo convention
-     * (meta.title, meta.description, meta.image, noindex, nofollow, excludeFromSitemap)
-     * @default true
-     */
-    includeSEO?: boolean;
-    /**
-     * Include conversion tracking field group (isConversionPage, conversionType, conversionValue)
-     * @default false
-     */
-    includeConversion?: boolean;
-    /**
-     * Include editor version field ('legacy' | 'puck' discriminator)
-     * @default true
-     */
-    includeEditorVersion?: boolean;
-    /**
-     * Include page layout selector field
-     * @default true
-     */
-    includePageLayout?: boolean;
-    /**
-     * Include isHomepage checkbox field
-     * @default false
-     */
-    includeIsHomepage?: boolean;
-    /**
-     * Custom layouts for the page layout selector.
-     * If not provided, uses the plugin's DEFAULT_LAYOUTS.
-     *
-     * Only the `value` and `label` properties are used for the Payload field.
-     * Header/footer components are used by the editor and renderer.
-     */
-    layouts?: LayoutDefinition[];
-    /**
-     * Default editor version value for new pages.
-     * @default 'puck'
-     */
-    defaultEditorVersion?: 'legacy' | 'puck';
-    /**
-     * Name of the legacy blocks field to check when detecting editor version.
-     * Used by the smart detection hook to determine if existing pages have legacy content.
-     * @default 'layout'
-     */
-    legacyBlocksFieldName?: string;
-    /**
-     * Whether to place applicable fields in the sidebar.
-     * @default true
-     */
-    sidebarPosition?: boolean;
-    /**
-     * Custom conversion type options for the conversion tracking field.
-     * Only used when includeConversion is true.
-     *
-     * @example
-     * ```typescript
-     * ...getPuckFields({
-     *   includeConversion: true,
-     *   conversionTypeOptions: [
-     *     { label: 'Registration', value: 'registration' },
-     *     { label: 'Donation', value: 'donation' },
-     *     { label: 'Course Start', value: 'course_start' },
-     *   ],
-     * })
-     * ```
-     */
-    conversionTypeOptions?: ConversionTypeOption[];
-}
-
-/**
- * Puck Field Utilities
- *
- * Provides reusable field definitions for adding Puck support to existing collections.
- * Use getPuckFields() for easy integration, or import individual fields for granular control.
- *
- * @example
- * ```typescript
- * // Option 1: Use getPuckFields() for recommended defaults
- * import { getPuckFields } from '@delmaredigital/payload-puck'
- *
- * const Pages: CollectionConfig = {
- *   slug: 'pages',
- *   fields: [
- *     // Your existing fields...
- *     ...getPuckFields({ includeSEO: false }),
- *   ],
- * }
- *
- * // Option 2: Import individual fields
- * import { puckDataField, editorVersionField } from '@delmaredigital/payload-puck'
- *
- * const Pages: CollectionConfig = {
- *   slug: 'pages',
- *   fields: [
- *     // Your existing fields...
- *     puckDataField,
- *     editorVersionField,
- *   ],
- * }
- * ```
- */
-
-/**
- * Puck data field - stores the visual editor JSON data.
- * This field is always hidden in the admin UI as it's managed via the visual editor.
- */
-declare const puckDataField: Field;
-/**
- * Creates an editor version field with smart detection for hybrid setups.
- *
- * The field uses a beforeValidate hook to intelligently determine the editor version:
- * - New pages: Default to 'puck' (or custom defaultValue)
- * - Existing pages with legacy blocks but no puckData: Set to 'legacy'
- * - Existing pages with puckData: Set to 'puck'
- *
- * This prevents existing legacy content from being incorrectly marked as 'puck'
- * when the field is first added to a collection.
- *
- * @param defaultValue - The default editor version for NEW pages ('puck' or 'legacy')
- * @param sidebar - Whether to position in the sidebar (default: true)
- * @param legacyBlocksFieldName - Name of the legacy blocks field to check (default: 'layout')
- */
-declare function createEditorVersionField(defaultValue?: 'legacy' | 'puck', sidebar?: boolean, legacyBlocksFieldName?: string): Field;
-/**
- * Pre-configured editor version field with 'puck' as default.
- * Use createEditorVersionField() for custom configuration.
- */
-declare const editorVersionField: Field;
-/**
- * Creates a page layout field with custom layouts.
- *
- * @param layouts - Array of layout definitions (defaults to DEFAULT_LAYOUTS)
- * @param sidebar - Whether to position in the sidebar (default: true)
- */
-declare function createPageLayoutField(layouts?: LayoutDefinition[], sidebar?: boolean): Field;
-/**
- * Pre-configured page layout field with DEFAULT_LAYOUTS.
- * Use createPageLayoutField() for custom layouts.
- */
-declare const pageLayoutField: Field;
-/**
- * Homepage flag field - marks a page as the site homepage.
- */
-declare const isHomepageField: Field;
-/**
- * SEO/Meta field group with all metadata fields.
- * Uses the official @payloadcms/plugin-seo convention: meta.title, meta.description
- *
- * Includes: title, description, image, noindex, nofollow, excludeFromSitemap
- */
-declare const seoFieldGroup: Field;
-/**
- * Pre-configured conversion tracking field group with default options.
- * Use createConversionFieldGroup() for custom conversion types.
- */
-declare const conversionFieldGroup: Field;
-/**
- * Returns an array of Puck-related field definitions for hybrid collection integration.
- *
- * Use this when you have an existing collection with legacy Payload blocks and want
- * to ADD Puck support without replacing your entire collection configuration.
- *
- * @param options - Configuration options for which fields to include
- * @returns Array of Field definitions to spread into your collection's fields array
- *
- * @example
- * ```typescript
- * import { getPuckFields } from '@delmaredigital/payload-puck'
- *
- * export const Pages: CollectionConfig = {
- *   slug: 'pages',
- *   fields: [
- *     // Your existing fields
- *     { name: 'title', type: 'text', required: true },
- *     { name: 'slug', type: 'text', required: true },
- *
- *     // Legacy Payload blocks (keep these!)
- *     { name: 'layout', type: 'blocks', blocks: [...] },
- *
- *     // Add Puck fields for hybrid editing
- *     ...getPuckFields({
- *       includeSEO: false,       // You have your own SEO fields
- *       includeConversion: true, // Include conversion tracking
- *       includeEditorVersion: true,
- *     }),
- *   ],
- * }
- * ```
- */
-declare function getPuckFields(options?: GetPuckFieldsOptions): Field[];
-
-/**
- * Generates a Pages collection configuration for Puck
- */
-declare function generatePagesCollection(slug: string, options: PuckPluginOptions): CollectionConfig;
-
-/**
- * Templates Collection - Stores reusable Puck component configurations
- *
- * This collection stores serialized Puck component data that can be
- * loaded into Template components for reuse across pages.
- */
-declare const TemplatesCollection: CollectionConfig;
-
-/**
- * Generates the UI field configuration for the Edit with Puck button
- */
-declare function generatePuckEditField(collectionSlug: string, adminConfig?: PuckAdminConfig): Field;
-/**
- * Creates a Payload plugin that integrates Puck visual page builder
- *
- * This plugin:
- * - Generates a Pages collection with puckData field
- * - Adds an "Edit with Puck" button in the admin document view
- *
- * The Puck editor itself runs outside of Payload admin. Create your own
- * editor page (e.g., /pages/[id]/edit) using the PuckEditor component.
- *
- * @example
- * ```typescript
- * import { createPuckPlugin } from '@delmaredigital/payload-puck/plugin'
- *
- * export default buildConfig({
- *   plugins: [
- *     createPuckPlugin({
- *       pagesCollection: 'pages',
- *       access: {
- *         read: () => true,
- *         create: ({ req }) => !!req.user,
- *         update: ({ req }) => !!req.user,
- *         delete: ({ req }) => req.user?.role === 'admin',
- *       },
- *       admin: {
- *         editorPathPattern: '/pages/{id}/edit',
- *         buttonLabel: 'Visual Editor',
- *       },
- *     }),
- *   ],
- * })
- * ```
- */
-declare function createPuckPlugin(options?: PuckPluginOptions): Plugin;
-
-export { type GetPuckFieldsOptions, PuckAdminConfig, PuckPluginOptions, TemplatesCollection, conversionFieldGroup, createEditorVersionField, createPageLayoutField, createPuckPlugin, editorVersionField, generatePagesCollection, generatePuckEditField, getPuckFields, isHomepageField, pageLayoutField, puckDataField, seoFieldGroup };