@delmaredigital/payload-puck 0.1.0

package/dist/layouts/index.d.mts

@@ -0,0 +1,96 @@
+import { L as LayoutDefinition } from '../types-D7D3rZ1J.mjs';
+export { c as LayoutClasses, a as LayoutConfig, b as LayoutOption, d as LayoutStyles, e as LayoutWrapperProps } from '../types-D7D3rZ1J.mjs';
+export { D as DEFAULT_LAYOUTS, a as DEFAULT_LAYOUT_CONFIG, E as EXTENDED_LAYOUTS, c as createLayout, d as defaultLayout, f as fullWidthLayout, g as getLayout, l as landingLayout, b as layoutsToOptions, e as layoutsToPayloadOptions, m as mergeLayouts, n as narrowLayout, r as resolveLayoutConfig, w as wideLayout } from '../utils-DaRs9t0J.mjs';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface MediaReference {
+    id: string | number;
+    url: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+}
+
+interface ColorValue {
+    hex: string;
+    opacity?: number;
+}
+interface GradientStop {
+    color: ColorValue;
+    position: number;
+}
+interface GradientValue {
+    type: 'linear' | 'radial';
+    angle: number;
+    stops: GradientStop[];
+    radialShape?: 'circle' | 'ellipse';
+    radialPosition?: 'center' | 'top' | 'bottom' | 'left' | 'right';
+}
+/**
+ * Gradient mask for fading images to transparent
+ */
+interface GradientMask {
+    enabled: boolean;
+    direction: 'to-top' | 'to-bottom' | 'to-left' | 'to-right' | 'to-top-left' | 'to-top-right' | 'to-bottom-left' | 'to-bottom-right' | 'from-center';
+    startOpacity: number;
+    endOpacity: number;
+    startPosition: number;
+    endPosition: number;
+}
+interface BackgroundImageValue {
+    media: MediaReference | null;
+    size: 'cover' | 'contain' | 'auto';
+    position: 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    repeat: 'no-repeat' | 'repeat' | 'repeat-x' | 'repeat-y';
+    attachment: 'scroll' | 'fixed';
+    /** Overall image opacity 0-100 (default 100) */
+    opacity?: number;
+    /** Gradient mask for fade to transparent effect */
+    mask?: GradientMask;
+}
+/**
+ * Overlay layer for images (Divi-style)
+ * Renders a color or gradient on top of the background image
+ */
+interface BackgroundOverlay {
+    enabled: boolean;
+    type: 'solid' | 'gradient';
+    solid?: ColorValue | null;
+    gradient?: GradientValue | null;
+}
+interface BackgroundValue {
+    type: 'none' | 'solid' | 'gradient' | 'image';
+    solid?: ColorValue | null;
+    gradient?: GradientValue | null;
+    image?: BackgroundImageValue | null;
+    /** Overlay layer, only used when type === 'image' */
+    overlay?: BackgroundOverlay | null;
+}
+
+/**
+ * Page-level overrides for layout settings
+ */
+interface PageOverrides {
+    /** Override header visibility: 'default' uses layout, 'show'/'hide' overrides */
+    showHeader?: 'default' | 'show' | 'hide';
+    /** Override footer visibility: 'default' uses layout, 'show'/'hide' overrides */
+    showFooter?: 'default' | 'show' | 'hide';
+    /** Page background (overrides any layout background) */
+    background?: BackgroundValue | null;
+    /** Page max width: 'default' uses layout, otherwise uses the value */
+    maxWidth?: string;
+}
+interface LayoutWrapperProps {
+    children: ReactNode;
+    layout?: LayoutDefinition;
+    className?: string;
+    /** Page-level overrides from Puck root props */
+    overrides?: PageOverrides;
+}
+/**
+ * Applies layout configuration to page content
+ */
+declare function LayoutWrapper({ children, layout, className, overrides }: LayoutWrapperProps): react_jsx_runtime.JSX.Element;
+
+export { LayoutDefinition, LayoutWrapper, type LayoutWrapperProps as LayoutWrapperComponentProps, type PageOverrides };

package/dist/layouts/index.d.ts

@@ -0,0 +1,96 @@
+import { L as LayoutDefinition } from '../types-D7D3rZ1J.js';
+export { c as LayoutClasses, a as LayoutConfig, b as LayoutOption, d as LayoutStyles, e as LayoutWrapperProps } from '../types-D7D3rZ1J.js';
+export { D as DEFAULT_LAYOUTS, a as DEFAULT_LAYOUT_CONFIG, E as EXTENDED_LAYOUTS, c as createLayout, d as defaultLayout, f as fullWidthLayout, g as getLayout, l as landingLayout, b as layoutsToOptions, e as layoutsToPayloadOptions, m as mergeLayouts, n as narrowLayout, r as resolveLayoutConfig, w as wideLayout } from '../utils-gAvt0Vhw.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface MediaReference {
+    id: string | number;
+    url: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+}
+
+interface ColorValue {
+    hex: string;
+    opacity?: number;
+}
+interface GradientStop {
+    color: ColorValue;
+    position: number;
+}
+interface GradientValue {
+    type: 'linear' | 'radial';
+    angle: number;
+    stops: GradientStop[];
+    radialShape?: 'circle' | 'ellipse';
+    radialPosition?: 'center' | 'top' | 'bottom' | 'left' | 'right';
+}
+/**
+ * Gradient mask for fading images to transparent
+ */
+interface GradientMask {
+    enabled: boolean;
+    direction: 'to-top' | 'to-bottom' | 'to-left' | 'to-right' | 'to-top-left' | 'to-top-right' | 'to-bottom-left' | 'to-bottom-right' | 'from-center';
+    startOpacity: number;
+    endOpacity: number;
+    startPosition: number;
+    endPosition: number;
+}
+interface BackgroundImageValue {
+    media: MediaReference | null;
+    size: 'cover' | 'contain' | 'auto';
+    position: 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    repeat: 'no-repeat' | 'repeat' | 'repeat-x' | 'repeat-y';
+    attachment: 'scroll' | 'fixed';
+    /** Overall image opacity 0-100 (default 100) */
+    opacity?: number;
+    /** Gradient mask for fade to transparent effect */
+    mask?: GradientMask;
+}
+/**
+ * Overlay layer for images (Divi-style)
+ * Renders a color or gradient on top of the background image
+ */
+interface BackgroundOverlay {
+    enabled: boolean;
+    type: 'solid' | 'gradient';
+    solid?: ColorValue | null;
+    gradient?: GradientValue | null;
+}
+interface BackgroundValue {
+    type: 'none' | 'solid' | 'gradient' | 'image';
+    solid?: ColorValue | null;
+    gradient?: GradientValue | null;
+    image?: BackgroundImageValue | null;
+    /** Overlay layer, only used when type === 'image' */
+    overlay?: BackgroundOverlay | null;
+}
+
+/**
+ * Page-level overrides for layout settings
+ */
+interface PageOverrides {
+    /** Override header visibility: 'default' uses layout, 'show'/'hide' overrides */
+    showHeader?: 'default' | 'show' | 'hide';
+    /** Override footer visibility: 'default' uses layout, 'show'/'hide' overrides */
+    showFooter?: 'default' | 'show' | 'hide';
+    /** Page background (overrides any layout background) */
+    background?: BackgroundValue | null;
+    /** Page max width: 'default' uses layout, otherwise uses the value */
+    maxWidth?: string;
+}
+interface LayoutWrapperProps {
+    children: ReactNode;
+    layout?: LayoutDefinition;
+    className?: string;
+    /** Page-level overrides from Puck root props */
+    overrides?: PageOverrides;
+}
+/**
+ * Applies layout configuration to page content
+ */
+declare function LayoutWrapper({ children, layout, className, overrides }: LayoutWrapperProps): react_jsx_runtime.JSX.Element;
+
+export { LayoutDefinition, LayoutWrapper, type LayoutWrapperProps as LayoutWrapperComponentProps, type PageOverrides };

package/dist/layouts/index.js

@@ -0,0 +1,394 @@
+'use strict';
+
+var jsxRuntime = require('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__ */ jsxRuntime.jsx("div", { style: { minHeight: "100vh", ...bgStyles }, children });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: { ...stickyFooterContainerStyle, ...outerBackgroundStyles }, children: content });
+    }
+    const hasBackground = Object.keys(outerBackgroundStyles).length > 0;
+    if (hasBackground) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { minHeight: "100vh", ...outerBackgroundStyles }, children: content });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: content });
+  };
+  if (layout.wrapper) {
+    const CustomWrapper = layout.wrapper;
+    return wrapWithStickyFooter(
+      /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        shouldShowHeader && Header && /* @__PURE__ */ jsxRuntime.jsx(Header, {}),
+        /* @__PURE__ */ jsxRuntime.jsx("main", { style: Object.keys(mainStyle).length > 0 ? mainStyle : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(CustomWrapper, { children }) }),
+        shouldShowFooter && Footer && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        shouldShowHeader && Header && /* @__PURE__ */ jsxRuntime.jsx(Header, {}),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Footer, {})
+      ] })
+    );
+  }
+  return wrapWithStickyFooter(
+    /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      shouldShowHeader && Header && /* @__PURE__ */ jsxRuntime.jsx(Header, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "main",
+        {
+          className: layout.classes?.wrapper || void 0,
+          style: {
+            ...mainStyle,
+            ...Object.keys(wrapperStyle).length > 0 ? wrapperStyle : {}
+          },
+          ...dataAttrs,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: [layout.classes?.container, className].filter(Boolean).join(" ") || void 0,
+              style: Object.keys(containerStyle).length > 0 ? containerStyle : void 0,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: layout.classes?.content || void 0,
+                  style: Object.keys(contentStyle).length > 0 ? contentStyle : void 0,
+                  children
+                }
+              )
+            }
+          )
+        }
+      ),
+      shouldShowFooter && Footer && /* @__PURE__ */ jsxRuntime.jsx(Footer, {})
+    ] })
+  );
+}
+
+exports.DEFAULT_LAYOUTS = DEFAULT_LAYOUTS;
+exports.DEFAULT_LAYOUT_CONFIG = DEFAULT_LAYOUT_CONFIG;
+exports.EXTENDED_LAYOUTS = EXTENDED_LAYOUTS;
+exports.LayoutWrapper = LayoutWrapper;
+exports.createLayout = createLayout;
+exports.defaultLayout = defaultLayout;
+exports.fullWidthLayout = fullWidthLayout;
+exports.getLayout = getLayout;
+exports.landingLayout = landingLayout;
+exports.layoutsToOptions = layoutsToOptions;
+exports.layoutsToPayloadOptions = layoutsToPayloadOptions;
+exports.mergeLayouts = mergeLayouts;
+exports.narrowLayout = narrowLayout;
+exports.resolveLayoutConfig = resolveLayoutConfig;
+exports.wideLayout = wideLayout;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map