@delmaredigital/payload-puck 0.1.3 → 0.3.0

package/dist/config/index.js

@@ -1,2034 +1,116 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var AnimatedWrapper = require('../AnimatedWrapper');
-var React = require('react');
-var lucideReact = require('lucide-react');
-var reactSlot = require('@radix-ui/react-slot');
-var classVarianceAuthority = require('class-variance-authority');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
-var LabelPrimitive = require('@radix-ui/react-label');
-var AccordionClient = require('../AccordionClient');
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
-
-// 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 DEFAULT_LAYOUTS = [
-  defaultLayout,
-  landingLayout,
-  fullWidthLayout
-];
-
-// src/layouts/utils.ts
-function layoutsToOptions(layouts) {
-  return layouts.map(({ value, label, description }) => ({
-    value,
-    label,
-    description
-  }));
-}
-function createLayout(config) {
-  return {
-    ...config
-  };
-}
-
-// src/fields/shared.ts
-function cn(...classes) {
-  return classes.filter(Boolean).join(" ");
-}
-function isLegacyWidthValue(value) {
-  if (!value || typeof value !== "object") return false;
-  const v = value;
-  return typeof v.maxWidth === "number" && typeof v.unit === "string" && typeof v.mode === "string" && !("minWidth" in v) && !("minHeight" in v) && !("maxHeight" in v);
-}
-var alignmentMap = {
-  left: "text-left",
-  center: "text-center",
-  right: "text-right"
-};
-var shadowMap = {
-  none: "",
-  sm: "shadow-sm",
-  md: "shadow-md",
-  lg: "shadow-lg",
-  xl: "shadow-xl",
-  "2xl": "shadow-2xl"
-};
-var headingLevelMap = {
-  h1: "text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight",
-  h2: "text-3xl md:text-4xl font-bold tracking-tight",
-  h3: "text-2xl md:text-3xl font-semibold",
-  h4: "text-xl md:text-2xl font-semibold",
-  h5: "text-lg md:text-xl font-medium",
-  h6: "text-base md:text-lg font-medium"
-};
-var textSizeMap = {
-  xs: "text-xs",
-  sm: "text-sm",
-  base: "text-base",
-  lg: "text-lg",
-  xl: "text-xl",
-  "2xl": "text-2xl"
-};
-var aspectRatioMap = {
-  auto: "",
-  square: "aspect-square",
-  video: "aspect-video",
-  portrait: "aspect-[3/4]",
-  landscape: "aspect-[4/3]",
-  wide: "aspect-[21/9]"
-};
-var dividerStyleMap = {
-  solid: "border-solid",
-  dashed: "border-dashed",
-  dotted: "border-dotted"
-};
-var justifyContentMap = {
-  start: "justify-start",
-  "flex-start": "justify-start",
-  center: "justify-center",
-  end: "justify-end",
-  "flex-end": "justify-end",
-  between: "justify-between",
-  "space-between": "justify-between",
-  around: "justify-around",
-  "space-around": "justify-around",
-  evenly: "justify-evenly",
-  "space-evenly": "justify-evenly"
-};
-var alignItemsMap = {
-  start: "items-start",
-  "flex-start": "items-start",
-  center: "items-center",
-  end: "items-end",
-  "flex-end": "items-end",
-  stretch: "items-stretch",
-  baseline: "items-baseline"
-};
-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 paddingValueToCSS(padding) {
-  if (!padding) return void 0;
-  const { top, right, bottom, left, unit } = padding;
-  if (top === right && right === bottom && bottom === left) {
-    return `${top}${unit}`;
-  }
-  if (top === bottom && left === right) {
-    return `${top}${unit} ${right}${unit}`;
-  }
-  if (left === right) {
-    return `${top}${unit} ${right}${unit} ${bottom}${unit}`;
-  }
-  return `${top}${unit} ${right}${unit} ${bottom}${unit} ${left}${unit}`;
-}
-function marginValueToCSS(margin) {
-  if (!margin) return void 0;
-  const { top, right, bottom, left, unit } = margin;
-  if (top === right && right === bottom && bottom === left) {
-    return `${top}${unit}`;
-  }
-  if (top === bottom && left === right) {
-    return `${top}${unit} ${right}${unit}`;
-  }
-  if (left === right) {
-    return `${top}${unit} ${right}${unit} ${bottom}${unit}`;
-  }
-  return `${top}${unit} ${right}${unit} ${bottom}${unit} ${left}${unit}`;
-}
-function borderValueToCSS(border) {
-  if (!border || border.style === "none") return void 0;
-  const color = colorValueToCSS(border.color) || "#000000";
-  const style = {};
-  if (border.sides.top) {
-    style.borderTopWidth = `${border.width}px`;
-    style.borderTopStyle = border.style;
-    style.borderTopColor = color;
-  }
-  if (border.sides.right) {
-    style.borderRightWidth = `${border.width}px`;
-    style.borderRightStyle = border.style;
-    style.borderRightColor = color;
-  }
-  if (border.sides.bottom) {
-    style.borderBottomWidth = `${border.width}px`;
-    style.borderBottomStyle = border.style;
-    style.borderBottomColor = color;
-  }
-  if (border.sides.left) {
-    style.borderLeftWidth = `${border.width}px`;
-    style.borderLeftStyle = border.style;
-    style.borderLeftColor = color;
-  }
-  if (border.radius > 0) {
-    style.borderRadius = `${border.radius}px`;
-  }
-  return Object.keys(style).length > 0 ? style : void 0;
-}
-function widthValueToCSS(width) {
-  if (!width) return void 0;
-  const style = {};
-  if (width.mode === "full") {
-    style.width = "100%";
-    style.maxWidth = "100%";
-  } else {
-    style.maxWidth = `${width.maxWidth}${width.unit}`;
-    style.width = "100%";
-  }
-  switch (width.alignment) {
-    case "left":
-      style.marginLeft = "0";
-      style.marginRight = "auto";
-      break;
-    case "center":
-      style.marginLeft = "auto";
-      style.marginRight = "auto";
-      break;
-    case "right":
-      style.marginLeft = "auto";
-      style.marginRight = "0";
-      break;
-  }
-  return style;
-}
-function dimensionsValueToCSS(dimensions) {
-  if (!dimensions) return void 0;
-  if (isLegacyWidthValue(dimensions)) {
-    return widthValueToCSS(dimensions);
-  }
-  const dim = dimensions;
-  const style = {};
-  if (dim.mode === "full") {
-    style.width = "100%";
-    style.maxWidth = "100%";
-  } else {
-    style.width = "100%";
-    if (dim.maxWidth?.enabled !== false && dim.maxWidth?.value > 0) {
-      style.maxWidth = `${dim.maxWidth.value}${dim.maxWidth.unit}`;
-    }
-    if (dim.minWidth?.enabled && dim.minWidth.value > 0) {
-      style.minWidth = `${dim.minWidth.value}${dim.minWidth.unit}`;
-    }
-  }
-  if (dim.minHeight?.enabled && dim.minHeight.value > 0) {
-    style.minHeight = `${dim.minHeight.value}${dim.minHeight.unit}`;
-  }
-  if (dim.maxHeight?.enabled && dim.maxHeight.value > 0) {
-    style.maxHeight = `${dim.maxHeight.value}${dim.maxHeight.unit}`;
-  }
-  switch (dim.alignment) {
-    case "left":
-      style.marginLeft = "0";
-      style.marginRight = "auto";
-      break;
-    case "center":
-      style.marginLeft = "auto";
-      style.marginRight = "auto";
-      break;
-    case "right":
-      style.marginLeft = "auto";
-      style.marginRight = "0";
-      break;
-  }
-  return style;
-}
-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;
-}
-function transformOriginToCSS(origin) {
-  const originMap = {
-    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 originMap[origin] || "center";
-}
-function transformValueToCSS(transform) {
-  if (!transform) return void 0;
-  const style = {};
-  const transforms = [];
-  if (transform.enable3D && transform.perspective) {
-    style.perspective = `${transform.perspective}px`;
-  }
-  if (transform.translateX !== 0 || transform.translateY !== 0) {
-    transforms.push(
-      `translate(${transform.translateX}${transform.translateUnit}, ${transform.translateY}${transform.translateUnit})`
-    );
-  }
-  if (transform.rotate !== 0) {
-    transforms.push(`rotate(${transform.rotate}deg)`);
-  }
-  if (transform.enable3D) {
-    if (transform.rotateX && transform.rotateX !== 0) {
-      transforms.push(`rotateX(${transform.rotateX}deg)`);
-    }
-    if (transform.rotateY && transform.rotateY !== 0) {
-      transforms.push(`rotateY(${transform.rotateY}deg)`);
-    }
-  }
-  if (transform.scaleX !== 1 || transform.scaleY !== 1) {
-    if (transform.scaleX === transform.scaleY) {
-      transforms.push(`scale(${transform.scaleX})`);
-    } else {
-      transforms.push(`scale(${transform.scaleX}, ${transform.scaleY})`);
-    }
-  }
-  if (transform.skewX !== 0 || transform.skewY !== 0) {
-    if (transform.skewX !== 0 && transform.skewY !== 0) {
-      transforms.push(`skew(${transform.skewX}deg, ${transform.skewY}deg)`);
-    } else if (transform.skewX !== 0) {
-      transforms.push(`skewX(${transform.skewX}deg)`);
-    } else {
-      transforms.push(`skewY(${transform.skewY}deg)`);
-    }
-  }
-  if (transforms.length > 0) {
-    style.transform = transforms.join(" ");
-  }
-  if (transform.origin !== "center") {
-    style.transformOrigin = transformOriginToCSS(transform.origin);
-  }
-  if (transform.enable3D) {
-    style.transformStyle = "preserve-3d";
-  }
-  return Object.keys(style).length > 0 ? style : void 0;
-}
-var BREAKPOINTS = [
-  { key: "xs", label: "XS", minWidth: null },
-  { key: "sm", label: "SM", minWidth: 640 },
-  { key: "md", label: "MD", minWidth: 768 },
-  { key: "lg", label: "LG", minWidth: 1024 },
-  { key: "xl", label: "XL", minWidth: 1280 }
-];
-function isResponsiveValue(value) {
-  if (!value || typeof value !== "object") return false;
-  return "xs" in value;
-}
-function camelToKebab(str) {
-  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
-}
-function cssPropertiesToString(styles) {
-  return Object.entries(styles).filter(([, value]) => value !== void 0 && value !== null && value !== "").map(([key, value]) => `${camelToKebab(key)}: ${value}`).join("; ");
-}
-function responsiveValueToCSS(value, converter, uniqueId) {
-  if (value === null || value === void 0) {
-    return { baseStyles: {}, mediaQueryCSS: "" };
-  }
-  if (!isResponsiveValue(value)) {
-    const styles = converter(value);
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { DEFAULT_LAYOUTS, layoutsToOptions } from '../layouts';
+// Layout Components (server-safe versions)
+import { ContainerConfig } from '../components/layout/Container.server';
+import { FlexConfig } from '../components/layout/Flex.server';
+import { GridConfig } from '../components/layout/Grid.server';
+import { SectionConfig } from '../components/layout/Section.server';
+import { SpacerConfig } from '../components/layout/Spacer.server';
+import { TemplateServerConfig } from '../components/layout/Template.server';
+// Typography Components (server-safe versions)
+import { HeadingConfig } from '../components/typography/Heading.server';
+import { TextConfig } from '../components/typography/Text.server';
+import { RichTextConfig } from '../components/typography/RichText.server';
+// Media Components (server-safe versions)
+import { ImageConfig } from '../components/media/Image.server';
+// Interactive Components (server-safe versions)
+import { ButtonConfig } from '../components/interactive/Button.server';
+import { CardConfig } from '../components/interactive/Card.server';
+import { DividerConfig } from '../components/interactive/Divider.server';
+import { AccordionConfig } from '../components/interactive/Accordion.server';
+/**
+ * Creates a Puck configuration with custom layouts
+ *
+ * @param layouts - Custom layout definitions
+ * @returns Puck configuration with the specified layouts
+ *
+ * @example
+ * ```tsx
+ * import { createConfig, DEFAULT_LAYOUTS, createLayout } from '@delmaredigital/payload-puck/config'
+ *
+ * const customConfig = createConfig([
+ *   ...DEFAULT_LAYOUTS,
+ *   createLayout({
+ *     value: 'blog',
+ *     label: 'Blog Post',
+ *     maxWidth: '720px',
+ *   }),
+ * ])
+ * ```
+ */
+export function createConfig(layouts = DEFAULT_LAYOUTS) {
+    const layoutOptions = layoutsToOptions(layouts);
     return {
-      baseStyles: styles || {},
-      mediaQueryCSS: ""
-    };
-  }
-  const mediaQueries = [];
-  let baseStyles = {};
-  BREAKPOINTS.forEach((bp) => {
-    const bpValue = value[bp.key];
-    if (bpValue === void 0) return;
-    const cssProps = converter(bpValue);
-    if (!cssProps) return;
-    if (bp.key === "xs") {
-      baseStyles = cssProps;
-    } else {
-      const styleString = cssPropertiesToString(cssProps);
-      if (styleString) {
-        mediaQueries.push(
-          `@media (min-width: ${bp.minWidth}px) { .${uniqueId} { ${styleString} } }`
-        );
-      }
-    }
-  });
-  return { baseStyles, mediaQueryCSS: mediaQueries.join("\n") };
-}
-function visibilityValueToCSS(visibility, uniqueId) {
-  if (!visibility) return "";
-  const mediaQueries = [];
-  const breakpointWidths = {
-    xs: null,
-    // 0px
-    sm: 640,
-    md: 768,
-    lg: 1024,
-    xl: 1280
-  };
-  const getNextBreakpointWidth = (bp) => {
-    const order = ["xs", "sm", "md", "lg", "xl"];
-    const index = order.indexOf(bp);
-    if (index === -1 || index === order.length - 1) return null;
-    return breakpointWidths[order[index + 1]];
-  };
-  if (visibility.xs === false) {
-    const nextWidth = getNextBreakpointWidth("xs");
-    if (nextWidth) {
-      mediaQueries.push(`@media (max-width: ${nextWidth - 1}px) { .${uniqueId} { display: none; } }`);
-    } else {
-      mediaQueries.push(`.${uniqueId} { display: none; }`);
-    }
-  }
-  BREAKPOINTS.slice(1).forEach((bp) => {
-    if (visibility[bp.key] === false) {
-      const minWidth = breakpointWidths[bp.key];
-      const maxWidth = getNextBreakpointWidth(bp.key);
-      if (minWidth && maxWidth) {
-        mediaQueries.push(
-          `@media (min-width: ${minWidth}px) and (max-width: ${maxWidth - 1}px) { .${uniqueId} { display: none; } }`
-        );
-      } else if (minWidth) {
-        mediaQueries.push(
-          `@media (min-width: ${minWidth}px) { .${uniqueId} { display: none; } }`
-        );
-      }
-    }
-  });
-  return mediaQueries.join("\n");
-}
-var idCounter = 0;
-function generateUniqueId() {
-  return `c${(++idCounter).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
-}
-var defaultProps = {
-  content: [],
-  background: null,
-  customPadding: null,
-  dimensions: null,
-  border: null,
-  margin: null,
-  animation: null,
-  innerBackground: null,
-  innerPadding: null,
-  innerBorder: null,
-  visibility: null
-};
-var ContainerConfig = {
-  label: "Container",
-  fields: {
-    content: { type: "slot" }
-  },
-  defaultProps,
-  render: ({
-    content: Content,
-    background,
-    customPadding,
-    dimensions,
-    border,
-    margin,
-    animation,
-    innerBackground,
-    innerPadding,
-    innerBorder,
-    visibility
-  }) => {
-    const uniqueId = generateUniqueId();
-    const outerClass = `puck-container-outer-${uniqueId}`;
-    const innerClass = `puck-container-inner-${uniqueId}`;
-    const mediaQueries = [];
-    const outerBackgroundStyles = backgroundValueToCSS(background);
-    const outerStyles = {
-      ...outerBackgroundStyles
-    };
-    const outerPaddingResult = responsiveValueToCSS(
-      customPadding,
-      (v) => ({ padding: paddingValueToCSS(v) }),
-      outerClass
-    );
-    Object.assign(outerStyles, outerPaddingResult.baseStyles);
-    if (outerPaddingResult.mediaQueryCSS) {
-      mediaQueries.push(outerPaddingResult.mediaQueryCSS);
-    }
-    const outerBorderStyles = borderValueToCSS(border);
-    if (outerBorderStyles) {
-      Object.assign(outerStyles, outerBorderStyles);
-    }
-    const marginResult = responsiveValueToCSS(
-      margin,
-      (v) => ({ margin: marginValueToCSS(v) }),
-      outerClass
-    );
-    Object.assign(outerStyles, marginResult.baseStyles);
-    if (marginResult.mediaQueryCSS) {
-      mediaQueries.push(marginResult.mediaQueryCSS);
-    }
-    const innerBackgroundStyles = backgroundValueToCSS(innerBackground);
-    const innerStyles = {
-      ...innerBackgroundStyles
-    };
-    const dimensionsResult = responsiveValueToCSS(
-      dimensions,
-      dimensionsValueToCSS,
-      innerClass
-    );
-    Object.assign(innerStyles, dimensionsResult.baseStyles);
-    if (dimensionsResult.mediaQueryCSS) {
-      mediaQueries.push(dimensionsResult.mediaQueryCSS);
-    }
-    const innerPaddingResult = responsiveValueToCSS(
-      innerPadding,
-      (v) => ({ padding: paddingValueToCSS(v) }),
-      innerClass
-    );
-    Object.assign(innerStyles, innerPaddingResult.baseStyles);
-    if (innerPaddingResult.mediaQueryCSS) {
-      mediaQueries.push(innerPaddingResult.mediaQueryCSS);
-    }
-    const innerBorderStyles = borderValueToCSS(innerBorder);
-    if (innerBorderStyles) {
-      Object.assign(innerStyles, innerBorderStyles);
-    }
-    const visibilityCSS = visibilityValueToCSS(visibility, outerClass);
-    if (visibilityCSS) {
-      mediaQueries.push(visibilityCSS);
-    }
-    const contentClasses = cn("px-4", innerClass);
-    const hasInnerStyles = Object.keys(innerStyles).length > 0;
-    const allMediaQueryCSS = mediaQueries.join("\n");
-    const ContentSlot = Content;
-    return /* @__PURE__ */ jsxRuntime.jsxs(AnimatedWrapper.AnimatedWrapper, { animation, children: [
-      allMediaQueryCSS && /* @__PURE__ */ jsxRuntime.jsx("style", { children: allMediaQueryCSS }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: outerClass, style: outerStyles, children: hasInnerStyles ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentClasses, style: innerStyles, children: /* @__PURE__ */ jsxRuntime.jsx(ContentSlot, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(ContentSlot, { className: contentClasses, style: innerStyles }) })
-    ] });
-  }
-};
-var idCounter2 = 0;
-function generateUniqueId2() {
-  return `f${(++idCounter2).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
-}
-var flexDirectionMap = {
-  row: "flex-row",
-  column: "flex-col",
-  "row-reverse": "flex-row-reverse",
-  "column-reverse": "flex-col-reverse"
-};
-var flexWrapMap = {
-  wrap: "flex-wrap",
-  nowrap: "flex-nowrap",
-  "wrap-reverse": "flex-wrap-reverse"
-};
-var defaultProps2 = {
-  content: [],
-  direction: "row",
-  justifyContent: null,
-  alignItems: null,
-  gap: 24,
-  wrap: "wrap",
-  background: null,
-  customPadding: null,
-  margin: null,
-  dimensions: null,
-  border: null,
-  animation: null,
-  visibility: null
-};
-var FlexConfig = {
-  label: "Flex",
-  fields: {
-    content: { type: "slot" }
-  },
-  defaultProps: defaultProps2,
-  render: ({
-    content: Content,
-    direction,
-    justifyContent,
-    alignItems,
-    gap,
-    wrap,
-    background,
-    customPadding,
-    margin,
-    dimensions,
-    border,
-    animation,
-    visibility
-  }) => {
-    const uniqueId = generateUniqueId2();
-    const wrapperClass = `puck-flex-${uniqueId}`;
-    const contentClass = `puck-flex-content-${uniqueId}`;
-    const mediaQueries = [];
-    const backgroundStyles = backgroundValueToCSS(background);
-    const wrapperStyles = {
-      ...backgroundStyles
-    };
-    const paddingResult = responsiveValueToCSS(
-      customPadding,
-      (v) => ({ padding: paddingValueToCSS(v) }),
-      wrapperClass
-    );
-    Object.assign(wrapperStyles, paddingResult.baseStyles);
-    if (paddingResult.mediaQueryCSS) {
-      mediaQueries.push(paddingResult.mediaQueryCSS);
-    }
-    const borderStyles = borderValueToCSS(border);
-    if (borderStyles) {
-      Object.assign(wrapperStyles, borderStyles);
-    }
-    const marginResult = responsiveValueToCSS(
-      margin,
-      (v) => ({ margin: marginValueToCSS(v) }),
-      wrapperClass
-    );
-    Object.assign(wrapperStyles, marginResult.baseStyles);
-    if (marginResult.mediaQueryCSS) {
-      mediaQueries.push(marginResult.mediaQueryCSS);
-    }
-    const dimensionsResult = responsiveValueToCSS(
-      dimensions,
-      dimensionsValueToCSS,
-      contentClass
-    );
-    const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass);
-    if (visibilityCSS) {
-      mediaQueries.push(visibilityCSS);
-    }
-    const contentClasses = cn(
-      "flex w-full min-h-[50px]",
-      flexDirectionMap[direction],
-      justifyContent && justifyContentMap[justifyContent],
-      alignItems && alignItemsMap[alignItems],
-      flexWrapMap[wrap],
-      "[&>*]:min-w-0",
-      contentClass
-    );
-    const contentStyles = {
-      gap,
-      ...dimensionsResult.baseStyles
-    };
-    if (dimensionsResult.mediaQueryCSS) {
-      mediaQueries.push(dimensionsResult.mediaQueryCSS);
-    }
-    const allMediaQueryCSS = mediaQueries.join("\n");
-    const ContentSlot = Content;
-    return /* @__PURE__ */ jsxRuntime.jsxs(AnimatedWrapper.AnimatedWrapper, { animation, children: [
-      allMediaQueryCSS && /* @__PURE__ */ jsxRuntime.jsx("style", { children: allMediaQueryCSS }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrapperClass, style: wrapperStyles, children: /* @__PURE__ */ jsxRuntime.jsx(ContentSlot, { className: contentClasses, style: contentStyles }) })
-    ] });
-  }
-};
-var idCounter3 = 0;
-function generateUniqueId3() {
-  return `g${(++idCounter3).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
-}
-var defaultProps3 = {
-  content: [],
-  numColumns: 3,
-  gap: 24,
-  background: null,
-  customPadding: null,
-  dimensions: null,
-  border: null,
-  margin: null,
-  animation: null,
-  visibility: null
-};
-var GridConfig = {
-  label: "Grid",
-  fields: {
-    content: { type: "slot" }
-  },
-  defaultProps: defaultProps3,
-  render: ({
-    content: Content,
-    numColumns,
-    gap,
-    background,
-    customPadding,
-    dimensions,
-    border,
-    margin,
-    animation,
-    visibility
-  }) => {
-    const uniqueId = generateUniqueId3();
-    const wrapperClass = `puck-grid-${uniqueId}`;
-    const contentClass = `puck-grid-content-${uniqueId}`;
-    const mediaQueries = [];
-    const backgroundStyles = backgroundValueToCSS(background);
-    const wrapperStyles = {
-      ...backgroundStyles
-    };
-    const paddingResult = responsiveValueToCSS(
-      customPadding,
-      (v) => ({ padding: paddingValueToCSS(v) }),
-      wrapperClass
-    );
-    Object.assign(wrapperStyles, paddingResult.baseStyles);
-    if (paddingResult.mediaQueryCSS) {
-      mediaQueries.push(paddingResult.mediaQueryCSS);
-    }
-    const borderStyles = borderValueToCSS(border);
-    if (borderStyles) {
-      Object.assign(wrapperStyles, borderStyles);
-    }
-    const marginResult = responsiveValueToCSS(
-      margin,
-      (v) => ({ margin: marginValueToCSS(v) }),
-      wrapperClass
-    );
-    Object.assign(wrapperStyles, marginResult.baseStyles);
-    if (marginResult.mediaQueryCSS) {
-      mediaQueries.push(marginResult.mediaQueryCSS);
-    }
-    const dimensionsResult = responsiveValueToCSS(
-      dimensions,
-      dimensionsValueToCSS,
-      contentClass
-    );
-    const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass);
-    if (visibilityCSS) {
-      mediaQueries.push(visibilityCSS);
-    }
-    const contentClasses = cn(
-      "flex flex-col w-full",
-      "md:grid",
-      contentClass
-    );
-    const contentStyles = {
-      gap,
-      ...dimensionsResult.baseStyles
-    };
-    if (dimensionsResult.mediaQueryCSS) {
-      mediaQueries.push(dimensionsResult.mediaQueryCSS);
-    }
-    const gridStyles = {
-      ...contentStyles,
-      "--grid-cols": numColumns
-    };
-    const allMediaQueryCSS = mediaQueries.join("\n");
-    const ContentSlot = Content;
-    return /* @__PURE__ */ jsxRuntime.jsxs(AnimatedWrapper.AnimatedWrapper, { animation, children: [
-      allMediaQueryCSS && /* @__PURE__ */ jsxRuntime.jsx("style", { children: allMediaQueryCSS }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClass, style: wrapperStyles, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ContentSlot, { className: contentClasses, style: gridStyles }),
-        /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
-            @media (min-width: 768px) {
-              .flex.md\\:grid {
-                grid-template-columns: repeat(var(--grid-cols), 1fr);
-              }
-            }
-          ` })
-      ] })
-    ] });
-  }
-};
-var idCounter4 = 0;
-function generateUniqueId4() {
-  return `s${(++idCounter4).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
-}
-var defaultProps4 = {
-  id: "",
-  content: [],
-  background: null,
-  fullWidth: false,
-  customPadding: null,
-  dimensions: null,
-  border: null,
-  margin: null,
-  animation: null,
-  visibility: null
-};
-var SectionConfig = {
-  label: "Section",
-  fields: {
-    content: { type: "slot" }
-  },
-  defaultProps: defaultProps4,
-  render: ({
-    id,
-    content: Content,
-    background,
-    fullWidth,
-    customPadding,
-    dimensions,
-    border,
-    margin,
-    animation,
-    visibility
-  }) => {
-    const uniqueId = generateUniqueId4();
-    const sectionClass = `puck-section-${uniqueId}`;
-    const contentClass = `puck-section-content-${uniqueId}`;
-    const mediaQueries = [];
-    const backgroundStyles = backgroundValueToCSS(background);
-    const sectionStyles = {
-      ...backgroundStyles
-    };
-    const paddingResult = responsiveValueToCSS(
-      customPadding,
-      (v) => ({ padding: paddingValueToCSS(v) }),
-      sectionClass
-    );
-    Object.assign(sectionStyles, paddingResult.baseStyles);
-    if (paddingResult.mediaQueryCSS) {
-      mediaQueries.push(paddingResult.mediaQueryCSS);
-    }
-    const borderStyles = borderValueToCSS(border);
-    if (borderStyles) {
-      Object.assign(sectionStyles, borderStyles);
-    }
-    const marginResult = responsiveValueToCSS(
-      margin,
-      (v) => ({ margin: marginValueToCSS(v) }),
-      sectionClass
-    );
-    Object.assign(sectionStyles, marginResult.baseStyles);
-    if (marginResult.mediaQueryCSS) {
-      mediaQueries.push(marginResult.mediaQueryCSS);
-    }
-    const visibilityCSS = visibilityValueToCSS(visibility, sectionClass);
-    if (visibilityCSS) {
-      mediaQueries.push(visibilityCSS);
-    }
-    const sectionClasses = cn("relative w-full", sectionClass);
-    const dimensionsResult = responsiveValueToCSS(
-      dimensions,
-      dimensionsValueToCSS,
-      contentClass
-    );
-    if (dimensionsResult.mediaQueryCSS) {
-      mediaQueries.push(dimensionsResult.mediaQueryCSS);
-    }
-    const contentClasses = cn(
-      "relative z-10",
-      // Only apply preset content width if no dimensions set
-      !dimensions && !fullWidth && "max-w-[1200px] mx-auto px-4",
-      contentClass
-    );
-    const allMediaQueryCSS = mediaQueries.join("\n");
-    const ContentSlot = Content;
-    return /* @__PURE__ */ jsxRuntime.jsxs(AnimatedWrapper.AnimatedWrapper, { animation, children: [
-      allMediaQueryCSS && /* @__PURE__ */ jsxRuntime.jsx("style", { children: allMediaQueryCSS }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "section",
-        {
-          id: id || void 0,
-          className: sectionClasses,
-          style: sectionStyles,
-          children: /* @__PURE__ */ jsxRuntime.jsx(ContentSlot, { className: contentClasses, style: dimensionsResult.baseStyles })
-        }
-      )
-    ] });
-  }
-};
-var idCounter5 = 0;
-function generateUniqueId5() {
-  return `sp${(++idCounter5).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
-}
-var heightMap = {
-  "8px": "h-2",
-  "16px": "h-4",
-  "24px": "h-6",
-  "32px": "h-8",
-  "48px": "h-12",
-  "64px": "h-16",
-  "80px": "h-20",
-  "96px": "h-24",
-  "128px": "h-32"
-};
-var widthMap = {
-  "8px": "w-2",
-  "16px": "w-4",
-  "24px": "w-6",
-  "32px": "w-8",
-  "48px": "w-12",
-  "64px": "w-16",
-  "80px": "w-20",
-  "96px": "w-24",
-  "128px": "w-32"
-};
-var defaultProps5 = {
-  size: "24px",
-  direction: "vertical",
-  visibility: null
-};
-var SpacerConfig = {
-  label: "Spacer",
-  defaultProps: defaultProps5,
-  render: ({ size, direction, visibility }) => {
-    const uniqueId = generateUniqueId5();
-    const wrapperClass = `puck-spacer-${uniqueId}`;
-    const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass);
-    const getClasses = () => {
-      const heightClass = heightMap[size] || "h-6";
-      const widthClass = widthMap[size] || "w-6";
-      if (direction === "vertical") {
-        return `block ${heightClass} w-full`;
-      }
-      if (direction === "horizontal") {
-        return `inline-block ${widthClass} h-full`;
-      }
-      return `block ${heightClass} ${widthClass}`;
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      visibilityCSS && /* @__PURE__ */ jsxRuntime.jsx("style", { children: visibilityCSS }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(getClasses(), wrapperClass), "aria-hidden": "true" })
-    ] });
-  }
-};
-var idCounter6 = 0;
-function generateUniqueId6() {
-  return `t${(++idCounter6).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
-}
-var defaultProps6 = {
-  content: [],
-  templateId: null,
-  dimensions: null,
-  customPadding: null,
-  margin: null,
-  visibility: null
-};
-var TemplateServerConfig = {
-  label: "Template",
-  fields: {
-    // In server config, templateId is just for reference (no loading UI)
-    templateId: {
-      type: "text",
-      label: "Template ID"
-    },
-    content: {
-      type: "slot"
-    }
-  },
-  defaultProps: defaultProps6,
-  render: ({ content: Content, dimensions, customPadding, margin, visibility }) => {
-    const uniqueId = generateUniqueId6();
-    const wrapperClass = `puck-template-${uniqueId}`;
-    const contentClass = `puck-template-content-${uniqueId}`;
-    const mediaQueries = [];
-    const wrapperStyles = {};
-    const paddingResult = responsiveValueToCSS(
-      customPadding,
-      (v) => ({ padding: paddingValueToCSS(v) }),
-      wrapperClass
-    );
-    Object.assign(wrapperStyles, paddingResult.baseStyles);
-    if (paddingResult.mediaQueryCSS) {
-      mediaQueries.push(paddingResult.mediaQueryCSS);
-    }
-    const marginResult = responsiveValueToCSS(
-      margin,
-      (v) => ({ margin: marginValueToCSS(v) }),
-      wrapperClass
-    );
-    Object.assign(wrapperStyles, marginResult.baseStyles);
-    if (marginResult.mediaQueryCSS) {
-      mediaQueries.push(marginResult.mediaQueryCSS);
-    }
-    const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass);
-    if (visibilityCSS) {
-      mediaQueries.push(visibilityCSS);
-    }
-    const dimensionsResult = responsiveValueToCSS(
-      dimensions,
-      dimensionsValueToCSS,
-      contentClass
-    );
-    if (dimensionsResult.mediaQueryCSS) {
-      mediaQueries.push(dimensionsResult.mediaQueryCSS);
-    }
-    const allMediaQueryCSS = mediaQueries.join("\n");
-    const ContentSlot = Content;
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      allMediaQueryCSS && /* @__PURE__ */ jsxRuntime.jsx("style", { children: allMediaQueryCSS }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: cn("template-wrapper", wrapperClass),
-          style: Object.keys(wrapperStyles).length > 0 ? wrapperStyles : void 0,
-          children: /* @__PURE__ */ jsxRuntime.jsx(ContentSlot, { className: contentClass, style: dimensionsResult.baseStyles })
-        }
-      )
-    ] });
-  }
-};
-var defaultProps7 = {
-  text: "Heading Text",
-  level: "h2",
-  alignment: null,
-  textColor: null,
-  dimensions: null,
-  animation: null,
-  margin: null,
-  customPadding: null
-};
-var HeadingConfig = {
-  label: "Heading",
-  defaultProps: defaultProps7,
-  render: ({ text, level, alignment, textColor, dimensions, animation, margin, customPadding }) => {
-    const tag = level || "h2";
-    const alignmentValue = alignment ?? "left";
-    const classes = cn(
-      headingLevelMap[level] || headingLevelMap.h2,
-      alignmentMap[alignmentValue] || alignmentMap.left
-    );
-    const dimensionsStyles = dimensions ? dimensionsValueToCSS(dimensions) : void 0;
-    const style = {
-      ...dimensionsStyles
-    };
-    const marginCSS = marginValueToCSS(margin);
-    if (marginCSS) {
-      style.margin = marginCSS;
-    }
-    const paddingCSS = paddingValueToCSS(customPadding);
-    if (paddingCSS) {
-      style.padding = paddingCSS;
-    }
-    const colorCSS = colorValueToCSS(textColor);
-    if (colorCSS) {
-      style.color = colorCSS;
-    }
-    const headingElement = React.createElement(tag, { className: classes, style: Object.keys(style).length > 0 ? style : void 0 }, text);
-    return /* @__PURE__ */ jsxRuntime.jsx(AnimatedWrapper.AnimatedWrapper, { animation, children: headingElement });
-  }
-};
-var defaultProps8 = {
-  content: "Enter your text here...",
-  size: "base",
-  alignment: null,
-  textColor: null,
-  dimensions: null,
-  animation: null,
-  margin: null,
-  customPadding: null
-};
-var TextConfig = {
-  label: "Text",
-  defaultProps: defaultProps8,
-  render: ({ content, size, alignment, textColor, dimensions, animation, margin, customPadding }) => {
-    const dimensionsStyles = dimensions ? dimensionsValueToCSS(dimensions) : void 0;
-    const style = {
-      ...dimensionsStyles
-    };
-    const marginCSS = marginValueToCSS(margin);
-    if (marginCSS) {
-      style.margin = marginCSS;
-    }
-    const paddingCSS = paddingValueToCSS(customPadding);
-    if (paddingCSS) {
-      style.padding = paddingCSS;
-    }
-    const colorCSS = colorValueToCSS(textColor);
-    if (colorCSS) {
-      style.color = colorCSS;
-    }
-    const alignmentValue = alignment ?? "left";
-    return /* @__PURE__ */ jsxRuntime.jsx(AnimatedWrapper.AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "p",
-      {
-        className: cn(
-          textSizeMap[size] || textSizeMap.base,
-          alignmentMap[alignmentValue] || alignmentMap.left
-        ),
-        style: Object.keys(style).length > 0 ? style : void 0,
-        children: content
-      }
-    ) });
-  }
-};
-var defaultProps9 = {
-  content: "<p>Enter your content here...</p>",
-  alignment: null,
-  textColor: null,
-  dimensions: null,
-  animation: null,
-  margin: null,
-  customPadding: null
-};
-var RichTextConfig = {
-  label: "Rich Text",
-  defaultProps: defaultProps9,
-  render: ({ content, alignment, textColor, dimensions, animation, margin, customPadding }) => {
-    const dimensionsStyles = dimensions ? dimensionsValueToCSS(dimensions) : void 0;
-    const style = {
-      ...dimensionsStyles
-    };
-    const marginCSS = marginValueToCSS(margin);
-    if (marginCSS) {
-      style.margin = marginCSS;
-    }
-    const customPaddingCSS = paddingValueToCSS(customPadding);
-    if (customPaddingCSS) {
-      style.padding = customPaddingCSS;
-    }
-    const colorCSS = colorValueToCSS(textColor);
-    if (colorCSS) {
-      style.color = colorCSS;
-    }
-    const alignmentValue = alignment ?? "left";
-    const alignmentClass = alignmentMap[alignmentValue] || alignmentMap.left;
-    if (!content || content === "<p></p>") {
-      return /* @__PURE__ */ jsxRuntime.jsx(AnimatedWrapper.AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("relative overflow-hidden px-4", alignmentClass), style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prose dark:prose-invert", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx("em", { children: "No content available" }) }) }) }) });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(AnimatedWrapper.AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("relative overflow-hidden px-4", alignmentClass), style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "prose dark:prose-invert",
-        dangerouslySetInnerHTML: { __html: content }
-      }
-    ) }) });
-  }
-};
-var idCounter7 = 0;
-function generateUniqueId7() {
-  return `i${(++idCounter7).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
-}
-var defaultProps10 = {
-  image: null,
-  alt: "",
-  aspectRatio: "auto",
-  link: "",
-  openInNewTab: false,
-  margin: null,
-  border: null,
-  dimensions: null,
-  alignment: null,
-  transform: null,
-  animation: null,
-  customPadding: null,
-  visibility: null
-};
-var ImageConfig = {
-  label: "Image",
-  defaultProps: defaultProps10,
-  render: ({ image, alt, aspectRatio, link, openInNewTab, dimensions, alignment, margin, border, transform, animation, customPadding, visibility }) => {
-    const uniqueId = generateUniqueId7();
-    const wrapperClass = `puck-image-${uniqueId}`;
-    const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass);
-    const dimensionsStyles = dimensionsValueToCSS(dimensions);
-    const style = {
-      ...dimensionsStyles
-    };
-    const marginCSS = marginValueToCSS(margin);
-    if (marginCSS) {
-      style.margin = marginCSS;
-    }
-    const paddingCSS = paddingValueToCSS(customPadding);
-    if (paddingCSS) {
-      style.padding = paddingCSS;
-    }
-    const borderStyles = borderValueToCSS(border);
-    if (borderStyles) {
-      Object.assign(style, borderStyles);
-    }
-    const transformStyles = transformValueToCSS(transform);
-    if (transformStyles) {
-      Object.assign(style, transformStyles);
-    }
-    const alignmentValue = alignment ?? "center";
-    const alignmentClasses = cn(
-      "flex",
-      alignmentValue === "left" && "justify-start",
-      alignmentValue === "center" && "justify-center",
-      alignmentValue === "right" && "justify-end"
-    );
-    if (!image?.url) {
-      return /* @__PURE__ */ jsxRuntime.jsxs(AnimatedWrapper.AnimatedWrapper, { animation, children: [
-        visibilityCSS && /* @__PURE__ */ jsxRuntime.jsx("style", { children: visibilityCSS }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("py-4 px-4", wrapperClass), style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: alignmentClasses, children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(
-              "relative overflow-hidden rounded-lg w-full max-w-md bg-muted flex items-center justify-center min-h-[200px]",
-              aspectRatioMap[aspectRatio] || ""
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "No image selected" })
-          }
-        ) }) })
-      ] });
-    }
-    const imageElement = aspectRatio === "auto" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden rounded-lg w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
-      "img",
-      {
-        src: image.url,
-        alt: alt || image.alt || "",
-        className: "w-full h-auto object-cover"
-      }
-    ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative overflow-hidden rounded-lg w-full", aspectRatioMap[aspectRatio]), children: /* @__PURE__ */ jsxRuntime.jsx(
-      "img",
-      {
-        src: image.url,
-        alt: alt || image.alt || "",
-        className: "absolute inset-0 w-full h-full object-cover"
-      }
-    ) });
-    const content = link ? /* @__PURE__ */ jsxRuntime.jsx(
-      "a",
-      {
-        href: link,
-        target: openInNewTab ? "_blank" : void 0,
-        rel: openInNewTab ? "noopener noreferrer" : void 0,
-        className: "block transition-opacity hover:opacity-90",
-        children: imageElement
-      }
-    ) : imageElement;
-    return /* @__PURE__ */ jsxRuntime.jsxs(AnimatedWrapper.AnimatedWrapper, { animation, children: [
-      visibilityCSS && /* @__PURE__ */ jsxRuntime.jsx("style", { children: visibilityCSS }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("py-4 px-4", wrapperClass), style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: alignmentClasses, children: content }) })
-    ] });
-  }
-};
-function cn2(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
-var buttonVariants = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-8 px-3 text-xs",
-        lg: "h-11 px-8",
-        icon: "h-10 w-10 p-2",
-        "icon-sm": "h-8 w-8 p-1.5"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-var Button = React__namespace.forwardRef(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? reactSlot.Slot : "button";
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Comp,
-      {
-        className: cn2(buttonVariants({ variant, size, className })),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-var Input = React__namespace.forwardRef(
-  ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        type,
-        className: cn2(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        ),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Input.displayName = "Input";
-var labelVariants = classVarianceAuthority.cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-);
-var Label = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  LabelPrimitive__namespace.Root,
-  {
-    ref,
-    className: cn2(labelVariants(), className),
-    ...props
-  }
-));
-Label.displayName = LabelPrimitive__namespace.Root.displayName;
-var DEFAULT_VALUE = {
-  mode: "default"
-};
-var CUSTOM_DEFAULTS = {
-  height: 40,
-  paddingX: 16,
-  paddingY: 8,
-  fontSize: 14,
-  unit: "px"
-};
-function SizeFieldInner({
-  value,
-  onChange,
-  label = "Size",
-  readOnly,
-  showHeight = true,
-  showFontSize = true
-}) {
-  const currentValue = value || DEFAULT_VALUE;
-  const handleModeChange = React.useCallback((mode) => {
-    if (mode === "custom") {
-      onChange({
-        mode,
-        ...CUSTOM_DEFAULTS
-      });
-    } else {
-      onChange({ mode });
-    }
-  }, [onChange]);
-  const handleValueChange = React.useCallback((field, val) => {
-    onChange({
-      ...currentValue,
-      [field]: val
-    });
-  }, [currentValue, onChange]);
-  const handleUnitChange = React.useCallback((unit) => {
-    onChange({
-      ...currentValue,
-      unit
-    });
-  }, [currentValue, onChange]);
-  const handleClear = React.useCallback(() => {
-    onChange(null);
-  }, [onChange]);
-  const presets = [
-    { mode: "sm", label: "SM" },
-    { mode: "default", label: "Default" },
-    { mode: "lg", label: "LG" },
-    { mode: "custom", label: "Custom" }
-  ];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "puck-field space-y-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-sm font-medium text-foreground", children: label }),
-      value && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "icon-sm",
-          onClick: handleClear,
-          className: "text-muted-foreground hover:text-destructive",
-          title: "Reset to default",
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: presets.map(({ mode, label: modeLabel }) => {
-      const isActive = currentValue.mode === mode;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          type: "button",
-          variant: isActive ? "default" : "secondary",
-          size: "sm",
-          onClick: () => handleModeChange(mode),
-          disabled: readOnly,
-          className: cn2(
-            "text-xs",
-            isActive && "bg-primary hover:bg-primary/90"
-          ),
-          children: modeLabel
+        root: {
+            fields: {
+                title: {
+                    type: 'text',
+                    label: 'Page Title',
+                },
+                pageLayout: {
+                    type: 'select',
+                    label: 'Page Layout',
+                    options: layoutOptions.map(({ value, label }) => ({ value, label })),
+                },
+            },
+            defaultProps: {
+                title: 'New Page',
+                pageLayout: 'default',
+            },
+            render: ({ children }) => _jsx(_Fragment, { children: children }),
         },
-        mode
-      );
-    }) }),
-    currentValue.mode === "custom" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 p-3 bg-muted/50 rounded-md", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-[10px] uppercase tracking-wide text-muted-foreground flex-shrink-0", children: "Unit:" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1", children: ["px", "rem"].map((unit) => {
-          const isActive = (currentValue.unit || "px") === unit;
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              type: "button",
-              variant: isActive ? "default" : "outline",
-              size: "sm",
-              onClick: () => handleUnitChange(unit),
-              disabled: readOnly,
-              className: cn2(
-                "text-xs font-mono h-7 px-2",
-                isActive && "bg-primary hover:bg-primary/90"
-              ),
-              children: unit
+        categories: {
+            layout: {
+                title: 'Layout',
+                components: ['Container', 'Flex', 'Grid', 'Section', 'Spacer', 'Template'],
+                defaultExpanded: true,
             },
-            unit
-          );
-        }) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
-        showHeight && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: "Height" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Input,
-            {
-              type: "number",
-              min: 0,
-              value: currentValue.height ?? CUSTOM_DEFAULTS.height,
-              onChange: (e) => handleValueChange("height", parseInt(e.target.value, 10) || 0),
-              disabled: readOnly,
-              className: "h-8 text-sm font-mono"
-            }
-          )
-        ] }),
-        showFontSize && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: "Font Size" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Input,
-            {
-              type: "number",
-              min: 0,
-              value: currentValue.fontSize ?? CUSTOM_DEFAULTS.fontSize,
-              onChange: (e) => handleValueChange("fontSize", parseInt(e.target.value, 10) || 0),
-              disabled: readOnly,
-              className: "h-8 text-sm font-mono"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: "Padding X" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Input,
-            {
-              type: "number",
-              min: 0,
-              value: currentValue.paddingX ?? CUSTOM_DEFAULTS.paddingX,
-              onChange: (e) => handleValueChange("paddingX", parseInt(e.target.value, 10) || 0),
-              disabled: readOnly,
-              className: "h-8 text-sm font-mono"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: "Padding Y" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Input,
-            {
-              type: "number",
-              min: 0,
-              value: currentValue.paddingY ?? CUSTOM_DEFAULTS.paddingY,
-              onChange: (e) => handleValueChange("paddingY", parseInt(e.target.value, 10) || 0),
-              disabled: readOnly,
-              className: "h-8 text-sm font-mono"
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-muted-foreground font-mono pt-1 border-t border-border/50", children: [
-        showHeight && `h: ${currentValue.height ?? CUSTOM_DEFAULTS.height}${currentValue.unit || "px"}`,
-        showHeight && " | ",
-        `p: ${currentValue.paddingY ?? CUSTOM_DEFAULTS.paddingY}${currentValue.unit || "px"} ${currentValue.paddingX ?? CUSTOM_DEFAULTS.paddingX}${currentValue.unit || "px"}`,
-        showFontSize && ` | font: ${currentValue.fontSize ?? CUSTOM_DEFAULTS.fontSize}${currentValue.unit || "px"}`
-      ] })
-    ] })
-  ] });
-}
-React.memo(SizeFieldInner);
-function sizeValueToCSS(size) {
-  if (!size || size.mode !== "custom") return void 0;
-  const unit = size.unit || "px";
-  const style = {};
-  if (size.height != null) {
-    style.height = `${size.height}${unit}`;
-  }
-  if (size.paddingX != null || size.paddingY != null) {
-    const py = size.paddingY ?? 0;
-    const px = size.paddingX ?? 0;
-    style.padding = `${py}${unit} ${px}${unit}`;
-  }
-  if (size.fontSize != null) {
-    style.fontSize = `${size.fontSize}${unit}`;
-  }
-  return Object.keys(style).length > 0 ? style : void 0;
-}
-function getSizeClasses(size, sizeMap) {
-  if (!size) return sizeMap.default || "";
-  if (size.mode === "custom") return "";
-  return sizeMap[size.mode] || sizeMap.default || "";
-}
-
-// src/theme/defaults.ts
-var DEFAULT_BUTTON_VARIANTS = {
-  default: { classes: "bg-primary text-primary-foreground hover:bg-primary/90" },
-  secondary: { classes: "bg-secondary text-secondary-foreground hover:bg-secondary/80" },
-  outline: { classes: "border border-input bg-background hover:bg-accent hover:text-accent-foreground" },
-  ghost: { classes: "bg-transparent hover:bg-accent hover:text-accent-foreground" },
-  destructive: { classes: "bg-destructive text-destructive-foreground hover:bg-destructive/90" },
-  link: { classes: "text-primary underline-offset-4 hover:underline bg-transparent" }
-};
-var DEFAULT_FOCUS_RING = "focus:ring-ring";
-
-// src/theme/utils.ts
-function getVariantClasses(variants, variant, fallback = "default") {
-  const config = variants[variant];
-  if (config?.classes) {
-    return config.classes;
-  }
-  const fallbackConfig = variants[fallback];
-  return fallbackConfig?.classes ?? "";
-}
-var sizeStyles = {
-  sm: "h-8 px-3 text-sm",
-  default: "h-10 px-4",
-  lg: "h-12 px-8 text-lg"
-};
-var alignmentWrapperMap = {
-  left: "text-left",
-  center: "text-center",
-  right: "text-right"
-};
-var defaultProps11 = {
-  text: "Click Me",
-  link: "",
-  variant: "default",
-  size: null,
-  openInNewTab: "no",
-  margin: null,
-  customBackgroundColor: null,
-  customTextColor: null,
-  customBorder: null,
-  alignment: null,
-  transform: null,
-  animation: null,
-  customPadding: null
-};
-var ButtonConfig = {
-  label: "Button",
-  defaultProps: defaultProps11,
-  render: ({ text, link, variant, size, openInNewTab, alignment, margin, customBackgroundColor, customTextColor, customBorder, transform, animation, customPadding }) => {
-    const hasCustomBackground = customBackgroundColor?.hex;
-    const hasCustomTextColor = customTextColor?.hex;
-    const hasCustomPadding = customPadding;
-    const hasCustomSize = size?.mode === "custom";
-    const variantClasses = getVariantClasses(DEFAULT_BUTTON_VARIANTS, variant, "default");
-    const sizeClasses = getSizeClasses(size, sizeStyles);
-    const buttonClasses = cn(
-      "inline-flex items-center justify-center font-medium transition-colors",
-      `focus:outline-none focus:ring-2 focus:ring-offset-2 ${DEFAULT_FOCUS_RING}`,
-      "disabled:opacity-50 disabled:pointer-events-none",
-      // Only apply variant styles if no custom background/text color
-      !hasCustomBackground && !hasCustomTextColor && variantClasses,
-      // Only apply background portion of variant if no custom background
-      hasCustomBackground && !hasCustomTextColor && "hover:opacity-90",
-      // Only apply size classes if not using custom size or custom padding
-      !hasCustomPadding && !hasCustomSize && sizeClasses,
-      // Apply rounded-md unless custom border has radius
-      !customBorder?.radius && "rounded-md"
-    );
-    const buttonStyle = {};
-    if (hasCustomBackground) {
-      buttonStyle.backgroundColor = colorValueToCSS(customBackgroundColor);
-    }
-    if (hasCustomTextColor) {
-      buttonStyle.color = colorValueToCSS(customTextColor);
-    }
-    const borderStyles = borderValueToCSS(customBorder);
-    if (borderStyles) {
-      Object.assign(buttonStyle, borderStyles);
-    }
-    const customSizeStyles = sizeValueToCSS(size);
-    if (customSizeStyles) {
-      Object.assign(buttonStyle, customSizeStyles);
-    }
-    const paddingCSS = paddingValueToCSS(customPadding);
-    if (paddingCSS) {
-      buttonStyle.padding = paddingCSS;
-    }
-    const transformStyles = transformValueToCSS(transform);
-    if (transformStyles) {
-      Object.assign(buttonStyle, transformStyles);
-    }
-    const buttonElement = link ? /* @__PURE__ */ jsxRuntime.jsx(
-      "a",
-      {
-        href: link,
-        target: openInNewTab === "yes" ? "_blank" : void 0,
-        rel: openInNewTab === "yes" ? "noopener noreferrer" : void 0,
-        className: buttonClasses,
-        style: buttonStyle,
-        children: text
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: buttonClasses, style: buttonStyle, children: text });
-    const wrapperStyle = {};
-    const marginCSS = marginValueToCSS(margin);
-    if (marginCSS) {
-      wrapperStyle.margin = marginCSS;
-    }
-    const alignmentValue = alignment ?? "left";
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      AnimatedWrapper.AnimatedWrapper,
-      {
-        animation,
-        className: alignmentWrapperMap[alignmentValue] || alignmentWrapperMap.left,
-        style: wrapperStyle,
-        children: buttonElement
-      }
-    );
-  }
-};
-var defaultProps12 = {
-  image: null,
-  heading: "Card Heading",
-  text: "Card description text goes here.",
-  link: "",
-  openInNewTab: false,
-  shadow: "md",
-  margin: null,
-  background: null,
-  border: null,
-  dimensions: null,
-  alignment: null,
-  transform: null,
-  animation: null,
-  customPadding: null
-};
-var CardConfig = {
-  label: "Card",
-  defaultProps: defaultProps12,
-  render: ({ image, heading, text, link, openInNewTab, shadow, background, dimensions, alignment, margin, border, transform, animation, customPadding }) => {
-    const hasBorderRadius = border?.radius && border.radius > 0;
-    const cardClasses = cn(
-      "overflow-hidden transition-all bg-card",
-      !hasBorderRadius && "rounded-lg",
-      shadowMap[shadow] || "",
-      link && "hover:shadow-lg cursor-pointer"
-    );
-    const wrapperStyle = {};
-    const marginCSS = marginValueToCSS(margin);
-    if (marginCSS) {
-      wrapperStyle.margin = marginCSS;
-    }
-    const dimensionsStyles = dimensionsValueToCSS(dimensions);
-    if (dimensionsStyles) {
-      Object.assign(wrapperStyle, dimensionsStyles);
-    }
-    const transformStyles = transformValueToCSS(transform);
-    if (transformStyles) {
-      Object.assign(wrapperStyle, transformStyles);
-    }
-    const alignmentValue = alignment ?? "left";
-    const alignmentClasses = cn(
-      "flex",
-      alignmentValue === "left" && "justify-start",
-      alignmentValue === "center" && "justify-center",
-      alignmentValue === "right" && "justify-end"
-    );
-    const backgroundStyles = backgroundValueToCSS(background);
-    const cardStyle = {
-      ...backgroundStyles
-    };
-    const borderStyles = borderValueToCSS(border);
-    if (borderStyles) {
-      Object.assign(cardStyle, borderStyles);
-    }
-    const paddingCSS = paddingValueToCSS(customPadding);
-    if (paddingCSS) {
-      cardStyle.padding = paddingCSS;
-    }
-    const cardContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cardClasses, style: cardStyle, children: [
-      image?.url ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative aspect-video w-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "img",
-        {
-          src: image.url,
-          alt: image.alt || heading || "",
-          className: "w-full h-full object-cover"
-        }
-      ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video w-full bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "No image" }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
-        heading && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-foreground mb-2", children: heading }),
-        text && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: text })
-      ] })
-    ] });
-    if (link) {
-      return /* @__PURE__ */ jsxRuntime.jsx(AnimatedWrapper.AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: alignmentClasses, children: /* @__PURE__ */ jsxRuntime.jsx(
-        "a",
-        {
-          href: link,
-          target: openInNewTab ? "_blank" : void 0,
-          rel: openInNewTab ? "noopener noreferrer" : void 0,
-          className: "block",
-          style: wrapperStyle,
-          children: cardContent
-        }
-      ) }) });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(AnimatedWrapper.AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: alignmentClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: wrapperStyle, children: cardContent }) }) });
-  }
-};
-var defaultProps13 = {
-  style: "solid",
-  color: null,
-  margin: null,
-  dimensions: null,
-  transform: null,
-  animation: null,
-  customPadding: null
-};
-var DividerConfig = {
-  label: "Divider",
-  defaultProps: defaultProps13,
-  render: ({ style, color, dimensions, margin, transform, animation, customPadding }) => {
-    const dimensionsStyles = dimensionsValueToCSS(dimensions);
-    const wrapperStyle = {
-      ...dimensionsStyles
-    };
-    const marginCSS = marginValueToCSS(margin);
-    if (marginCSS) {
-      wrapperStyle.margin = marginCSS;
-    }
-    const paddingCSS = paddingValueToCSS(customPadding);
-    if (paddingCSS) {
-      wrapperStyle.padding = paddingCSS;
-    }
-    const transformStyles = transformValueToCSS(transform);
-    if (transformStyles) {
-      Object.assign(wrapperStyle, transformStyles);
-    }
-    const customColor = colorValueToCSS(color);
-    const hrStyle = customColor ? { borderColor: customColor } : void 0;
-    return /* @__PURE__ */ jsxRuntime.jsx(AnimatedWrapper.AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4", style: Object.keys(wrapperStyle).length > 0 ? wrapperStyle : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "hr",
-      {
-        className: cn(
-          "border-t border-border",
-          dividerStyleMap[style] || dividerStyleMap.solid
-        ),
-        style: hrStyle
-      }
-    ) }) });
-  }
-};
-var defaultProps14 = {
-  items: [
-    {
-      title: "What is this?",
-      content: "This is an accordion component that can expand and collapse.",
-      defaultOpen: false
-    },
-    {
-      title: "How do I use it?",
-      content: "Click on each item to expand or collapse it.",
-      defaultOpen: false
-    }
-  ],
-  allowMultiple: false,
-  textColor: null,
-  margin: null,
-  background: null,
-  dimensions: null,
-  transform: null,
-  animation: null,
-  customPadding: null
-};
-var AccordionConfig = {
-  label: "Accordion",
-  defaultProps: defaultProps14,
-  render: (props) => /* @__PURE__ */ jsxRuntime.jsx(
-    AccordionClient.AccordionClient,
-    {
-      items: props.items,
-      allowMultiple: props.allowMultiple,
-      textColor: props.textColor,
-      margin: props.margin,
-      background: props.background,
-      dimensions: props.dimensions,
-      transform: props.transform,
-      animation: props.animation,
-      customPadding: props.customPadding
-    }
-  )
-};
-
-// src/config/merge.ts
-function mergeConfigs(options) {
-  const { base, components = {}, categories = {}, root, exclude = [] } = options;
-  const filteredBaseComponents = Object.fromEntries(
-    Object.entries(base.components || {}).filter(([key]) => !exclude.includes(key))
-  );
-  const mergedCategories = {};
-  for (const [key, category] of Object.entries(base.categories || {})) {
-    if (category) {
-      mergedCategories[key] = {
-        ...category,
-        components: category.components?.filter((c) => !exclude.includes(String(c))) || []
-      };
-    }
-  }
-  for (const [key, category] of Object.entries(categories)) {
-    if (category) {
-      if (mergedCategories[key]) {
-        mergedCategories[key] = {
-          ...mergedCategories[key],
-          ...category,
-          components: [
-            ...mergedCategories[key]?.components || [],
-            ...category.components || []
-          ]
-        };
-      } else {
-        mergedCategories[key] = category;
-      }
-    }
-  }
-  const mergedRoot = root ? {
-    ...base.root,
-    ...root,
-    fields: {
-      ...base.root?.fields,
-      ...root.fields
-    },
-    defaultProps: {
-      ...base.root?.defaultProps,
-      ...root.defaultProps
-    }
-  } : base.root;
-  return {
-    ...base,
-    root: mergedRoot,
-    categories: mergedCategories,
-    components: {
-      ...filteredBaseComponents,
-      ...components
-    }
-  };
-}
-function createConfig(layouts = DEFAULT_LAYOUTS) {
-  const layoutOptions = layoutsToOptions(layouts);
-  return {
-    root: {
-      fields: {
-        title: {
-          type: "text",
-          label: "Page Title"
+            typography: {
+                title: 'Typography',
+                components: ['Heading', 'Text', 'RichText'],
+            },
+            media: {
+                title: 'Media',
+                components: ['Image'],
+            },
+            interactive: {
+                title: 'Interactive',
+                components: ['Button', 'Card', 'Divider', 'Accordion'],
+            },
+        },
+        components: {
+            // Layout
+            Container: ContainerConfig,
+            Flex: FlexConfig,
+            Grid: GridConfig,
+            Section: SectionConfig,
+            Spacer: SpacerConfig,
+            Template: TemplateServerConfig,
+            // Typography
+            Heading: HeadingConfig,
+            Text: TextConfig,
+            RichText: RichTextConfig,
+            // Media
+            Image: ImageConfig,
+            // Interactive
+            Button: ButtonConfig,
+            Card: CardConfig,
+            Divider: DividerConfig,
+            Accordion: AccordionConfig,
         },
-        pageLayout: {
-          type: "select",
-          label: "Page Layout",
-          options: layoutOptions.map(({ value, label }) => ({ value, label }))
-        }
-      },
-      defaultProps: {
-        title: "New Page",
-        pageLayout: "default"
-      },
-      render: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children })
-    },
-    categories: {
-      layout: {
-        title: "Layout",
-        components: ["Container", "Flex", "Grid", "Section", "Spacer", "Template"],
-        defaultExpanded: true
-      },
-      typography: {
-        title: "Typography",
-        components: ["Heading", "Text", "RichText"]
-      },
-      media: {
-        title: "Media",
-        components: ["Image"]
-      },
-      interactive: {
-        title: "Interactive",
-        components: ["Button", "Card", "Divider", "Accordion"]
-      }
-    },
-    components: {
-      // Layout
-      Container: ContainerConfig,
-      Flex: FlexConfig,
-      Grid: GridConfig,
-      Section: SectionConfig,
-      Spacer: SpacerConfig,
-      Template: TemplateServerConfig,
-      // Typography
-      Heading: HeadingConfig,
-      Text: TextConfig,
-      RichText: RichTextConfig,
-      // Media
-      Image: ImageConfig,
-      // Interactive
-      Button: ButtonConfig,
-      Card: CardConfig,
-      Divider: DividerConfig,
-      Accordion: AccordionConfig
-    }
-  };
+    };
 }
-var baseConfig = createConfig(DEFAULT_LAYOUTS);
-
-exports.DEFAULT_LAYOUTS = DEFAULT_LAYOUTS;
-exports.baseConfig = baseConfig;
-exports.createConfig = createConfig;
-exports.createLayout = createLayout;
-exports.mergeConfigs = mergeConfigs;
-//# sourceMappingURL=index.js.map
+/**
+ * Base Puck configuration with server-safe component configs
+ *
+ * All components have server-safe versions (.server.tsx) that render
+ * without client-side interactivity. Use editorConfig from ./config.editor
+ * for the full interactive editor experience.
+ *
+ * For custom layouts, use createConfig() instead.
+ */
+export const baseConfig = createConfig(DEFAULT_LAYOUTS);
+// Re-export merge utility and layout helpers
+export { mergeConfigs, mergeConfigs as extendConfig } from './merge';
+export { DEFAULT_LAYOUTS, createLayout } from '../layouts';
 //# sourceMappingURL=index.js.map