@delmaredigital/payload-puck 0.1.0

package/dist/config/index.mjs

@@ -0,0 +1,1991 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { AnimatedWrapper } from '../AnimatedWrapper';
+import * as React from 'react';
+import { memo, useCallback, createElement } from 'react';
+import { IconX } from '@tabler/icons-react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { AccordionClient } from '../AccordionClient';
+
+// 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: "base", label: "Base", 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 "base" 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);
+    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 === "base") {
+      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 = [];
+  if (visibility.base === false) {
+    mediaQueries.push(`.${uniqueId} { display: none; }`);
+  }
+  let lastVisibility = visibility.base;
+  BREAKPOINTS.slice(1).forEach((bp) => {
+    const bpValue = visibility[bp.key];
+    if (bpValue === void 0) return;
+    if (bpValue !== lastVisibility) {
+      if (bpValue === false) {
+        mediaQueries.push(
+          `@media (min-width: ${bp.minWidth}px) { .${uniqueId} { display: none; } }`
+        );
+      } else {
+        mediaQueries.push(
+          `@media (min-width: ${bp.minWidth}px) { .${uniqueId} { display: block; } }`
+        );
+      }
+      lastVisibility = bpValue;
+    }
+  });
+  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__ */ jsxs(AnimatedWrapper, { animation, children: [
+      allMediaQueryCSS && /* @__PURE__ */ jsx("style", { children: allMediaQueryCSS }),
+      /* @__PURE__ */ jsx("div", { className: outerClass, style: outerStyles, children: hasInnerStyles ? /* @__PURE__ */ jsx("div", { className: contentClasses, style: innerStyles, children: /* @__PURE__ */ jsx(ContentSlot, {}) }) : /* @__PURE__ */ 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__ */ jsxs(AnimatedWrapper, { animation, children: [
+      allMediaQueryCSS && /* @__PURE__ */ jsx("style", { children: allMediaQueryCSS }),
+      /* @__PURE__ */ jsx("div", { className: wrapperClass, style: wrapperStyles, children: /* @__PURE__ */ 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__ */ jsxs(AnimatedWrapper, { animation, children: [
+      allMediaQueryCSS && /* @__PURE__ */ jsx("style", { children: allMediaQueryCSS }),
+      /* @__PURE__ */ jsxs("div", { className: wrapperClass, style: wrapperStyles, children: [
+        /* @__PURE__ */ jsx(ContentSlot, { className: contentClasses, style: gridStyles }),
+        /* @__PURE__ */ 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__ */ jsxs(AnimatedWrapper, { animation, children: [
+      allMediaQueryCSS && /* @__PURE__ */ jsx("style", { children: allMediaQueryCSS }),
+      /* @__PURE__ */ jsx(
+        "section",
+        {
+          id: id || void 0,
+          className: sectionClasses,
+          style: sectionStyles,
+          children: /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+      visibilityCSS && /* @__PURE__ */ jsx("style", { children: visibilityCSS }),
+      /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+      allMediaQueryCSS && /* @__PURE__ */ jsx("style", { children: allMediaQueryCSS }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn("template-wrapper", wrapperClass),
+          style: Object.keys(wrapperStyles).length > 0 ? wrapperStyles : void 0,
+          children: /* @__PURE__ */ 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 = createElement(tag, { className: classes, style: Object.keys(style).length > 0 ? style : void 0 }, text);
+    return /* @__PURE__ */ jsx(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__ */ jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ 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__ */ jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsx("section", { className: cn("relative overflow-hidden px-4", alignmentClass), style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsx("div", { className: "prose dark:prose-invert", children: /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("em", { children: "No content available" }) }) }) }) });
+    }
+    return /* @__PURE__ */ jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsx("section", { className: cn("relative overflow-hidden px-4", alignmentClass), style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ 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__ */ jsxs(AnimatedWrapper, { animation, children: [
+        visibilityCSS && /* @__PURE__ */ jsx("style", { children: visibilityCSS }),
+        /* @__PURE__ */ jsx("div", { className: cn("py-4 px-4", wrapperClass), style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsx("div", { className: alignmentClasses, children: /* @__PURE__ */ 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__ */ jsx("span", { className: "text-muted-foreground", children: "No image selected" })
+          }
+        ) }) })
+      ] });
+    }
+    const imageElement = aspectRatio === "auto" ? /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden rounded-lg w-full", children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: image.url,
+        alt: alt || image.alt || "",
+        className: "w-full h-auto object-cover"
+      }
+    ) }) : /* @__PURE__ */ jsx("div", { className: cn("relative overflow-hidden rounded-lg w-full", aspectRatioMap[aspectRatio]), children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: image.url,
+        alt: alt || image.alt || "",
+        className: "absolute inset-0 w-full h-full object-cover"
+      }
+    ) });
+    const content = link ? /* @__PURE__ */ 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__ */ jsxs(AnimatedWrapper, { animation, children: [
+      visibilityCSS && /* @__PURE__ */ jsx("style", { children: visibilityCSS }),
+      /* @__PURE__ */ jsx("div", { className: cn("py-4 px-4", wrapperClass), style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsx("div", { className: alignmentClasses, children: content }) })
+    ] });
+  }
+};
+function cn2(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = 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.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn2(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Input = React.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ 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 = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn2(labelVariants(), className),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive.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 = useCallback((mode) => {
+    if (mode === "custom") {
+      onChange({
+        mode,
+        ...CUSTOM_DEFAULTS
+      });
+    } else {
+      onChange({ mode });
+    }
+  }, [onChange]);
+  const handleValueChange = useCallback((field, val) => {
+    onChange({
+      ...currentValue,
+      [field]: val
+    });
+  }, [currentValue, onChange]);
+  const handleUnitChange = useCallback((unit) => {
+    onChange({
+      ...currentValue,
+      unit
+    });
+  }, [currentValue, onChange]);
+  const handleClear = useCallback(() => {
+    onChange(null);
+  }, [onChange]);
+  const presets = [
+    { mode: "sm", label: "SM" },
+    { mode: "default", label: "Default" },
+    { mode: "lg", label: "LG" },
+    { mode: "custom", label: "Custom" }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "puck-field space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium text-foreground", children: label }),
+      value && !readOnly && /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon-sm",
+          onClick: handleClear,
+          className: "text-muted-foreground hover:text-destructive",
+          title: "Reset to default",
+          children: /* @__PURE__ */ jsx(IconX, { className: "h-4 w-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: presets.map(({ mode, label: modeLabel }) => {
+      const isActive = currentValue.mode === mode;
+      return /* @__PURE__ */ 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
+        },
+        mode
+      );
+    }) }),
+    currentValue.mode === "custom" && /* @__PURE__ */ jsxs("div", { className: "space-y-3 p-3 bg-muted/50 rounded-md", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Label, { className: "text-[10px] uppercase tracking-wide text-muted-foreground flex-shrink-0", children: "Unit:" }),
+        /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: ["px", "rem"].map((unit) => {
+          const isActive = (currentValue.unit || "px") === unit;
+          return /* @__PURE__ */ 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
+            },
+            unit
+          );
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+        showHeight && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx(Label, { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: "Height" }),
+          /* @__PURE__ */ 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__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx(Label, { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: "Font Size" }),
+          /* @__PURE__ */ 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__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx(Label, { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: "Padding X" }),
+          /* @__PURE__ */ 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__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx(Label, { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: "Padding Y" }),
+          /* @__PURE__ */ 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__ */ 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"}`
+      ] })
+    ] })
+  ] });
+}
+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__ */ jsx(
+      "a",
+      {
+        href: link,
+        target: openInNewTab === "yes" ? "_blank" : void 0,
+        rel: openInNewTab === "yes" ? "noopener noreferrer" : void 0,
+        className: buttonClasses,
+        style: buttonStyle,
+        children: text
+      }
+    ) : /* @__PURE__ */ 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__ */ jsx(
+      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__ */ jsxs("div", { className: cardClasses, style: cardStyle, children: [
+      image?.url ? /* @__PURE__ */ jsx("div", { className: "relative aspect-video w-full overflow-hidden", children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: image.url,
+          alt: image.alt || heading || "",
+          className: "w-full h-full object-cover"
+        }
+      ) }) : /* @__PURE__ */ jsx("div", { className: "aspect-video w-full bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "No image" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+        heading && /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-foreground mb-2", children: heading }),
+        text && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: text })
+      ] })
+    ] });
+    if (link) {
+      return /* @__PURE__ */ jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsx("div", { className: alignmentClasses, children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: link,
+          target: openInNewTab ? "_blank" : void 0,
+          rel: openInNewTab ? "noopener noreferrer" : void 0,
+          className: "block",
+          style: wrapperStyle,
+          children: cardContent
+        }
+      ) }) });
+    }
+    return /* @__PURE__ */ jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsx("div", { className: alignmentClasses, children: /* @__PURE__ */ 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__ */ jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsx("div", { className: "px-4", style: Object.keys(wrapperStyle).length > 0 ? wrapperStyle : void 0, children: /* @__PURE__ */ 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__ */ jsx(
+    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"
+        },
+        pageLayout: {
+          type: "select",
+          label: "Page Layout",
+          options: layoutOptions.map(({ value, label }) => ({ value, label }))
+        }
+      },
+      defaultProps: {
+        title: "New Page",
+        pageLayout: "default"
+      },
+      render: ({ children }) => /* @__PURE__ */ jsx(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);
+
+export { DEFAULT_LAYOUTS, baseConfig, createConfig, createLayout, mergeConfigs };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map