@delmaredigital/payload-puck 0.1.0

package/dist/editor/index.mjs

@@ -0,0 +1,4483 @@
+"use client";
+import { IconArrowLeft, IconPointer, IconHandClick, IconCheck, IconAlertTriangle, IconEye, IconExternalLink, IconLoader2, IconDeviceFloppy, IconUpload, IconX, IconHistory, IconChevronDown, IconRotate } from '@tabler/icons-react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { memo, useCallback, useMemo, useEffect, useState, useRef, createContext, createElement } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { createUsePuck, Render, Puck } from '@measured/puck';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { useRouter, useParams, useSearchParams } from 'next/navigation';
+import '@measured/puck/puck.css';
+import headingAnalyzer from '@measured/puck-plugin-heading-analyzer';
+export { default as headingAnalyzer } from '@measured/puck-plugin-heading-analyzer';
+import '@measured/puck-plugin-heading-analyzer/dist/index.css';
+import dynamic from 'next/dynamic';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+function LoadingState({ message = "Loading editor..." }) {
+  return /* @__PURE__ */ jsx("div", { className: "h-screen flex items-center justify-center bg-gray-50", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+    /* @__PURE__ */ jsx(IconLoader2, { className: "h-8 w-8 animate-spin text-gray-600 mx-auto mb-4" }),
+    /* @__PURE__ */ jsx("p", { className: "text-gray-600", children: message })
+  ] }) });
+}
+var init_LoadingState = __esm({
+  "src/editor/components/LoadingState.tsx"() {
+    "use client";
+  }
+});
+var VersionHistory;
+var init_VersionHistory = __esm({
+  "src/editor/components/VersionHistory.tsx"() {
+    "use client";
+    VersionHistory = memo(function VersionHistory2({
+      pageId,
+      apiEndpoint = "/api/puck/pages",
+      onRestore,
+      disabled
+    }) {
+      const [isOpen, setIsOpen] = useState(false);
+      const [isLoading, setIsLoading] = useState(false);
+      const [isRestoring, setIsRestoring] = useState(false);
+      const [versions, setVersions] = useState([]);
+      const [error, setError] = useState(null);
+      const [isAvailable, setIsAvailable] = useState(null);
+      const dropdownRef = useRef(null);
+      useEffect(() => {
+        async function checkAvailability() {
+          try {
+            const response = await fetch(`${apiEndpoint}/${pageId}/versions?limit=1`, {
+              method: "GET"
+            });
+            setIsAvailable(response.status !== 404);
+          } catch {
+            setIsAvailable(false);
+          }
+        }
+        checkAvailability();
+      }, [apiEndpoint, pageId]);
+      useEffect(() => {
+        function handleClickOutside(event) {
+          if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+            setIsOpen(false);
+          }
+        }
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+      }, []);
+      const fetchVersions = useCallback(async () => {
+        setIsLoading(true);
+        setError(null);
+        try {
+          const response = await fetch(`${apiEndpoint}/${pageId}/versions?limit=20`);
+          if (!response.ok) {
+            throw new Error("Failed to fetch versions");
+          }
+          const data = await response.json();
+          setVersions(data.docs || []);
+        } catch (err) {
+          setError(err instanceof Error ? err.message : "Failed to load versions");
+          console.error("Error fetching versions:", err);
+        } finally {
+          setIsLoading(false);
+        }
+      }, [apiEndpoint, pageId]);
+      useEffect(() => {
+        if (isOpen) {
+          fetchVersions();
+        }
+      }, [isOpen, fetchVersions]);
+      const handleRestore = useCallback(
+        async (version) => {
+          if (!confirm(`Restore this version from ${formatDate(version.updatedAt)}? This will overwrite current changes.`)) {
+            return;
+          }
+          setIsRestoring(true);
+          try {
+            const response = await fetch(`${apiEndpoint}/${pageId}/versions`, {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ versionId: version.id })
+            });
+            if (!response.ok) {
+              throw new Error("Failed to restore version");
+            }
+            onRestore?.(version);
+            setIsOpen(false);
+            window.location.reload();
+          } catch (err) {
+            setError(err instanceof Error ? err.message : "Failed to restore version");
+            console.error("Error restoring version:", err);
+          } finally {
+            setIsRestoring(false);
+          }
+        },
+        [apiEndpoint, pageId, onRestore]
+      );
+      function formatDate(dateStr) {
+        const date = new Date(dateStr);
+        const now = /* @__PURE__ */ new Date();
+        const diffMs = now.getTime() - date.getTime();
+        const diffMins = Math.floor(diffMs / 6e4);
+        const diffHours = Math.floor(diffMs / 36e5);
+        const diffDays = Math.floor(diffMs / 864e5);
+        if (diffMins < 1) return "Just now";
+        if (diffMins < 60) return `${diffMins}m ago`;
+        if (diffHours < 24) return `${diffHours}h ago`;
+        if (diffDays < 7) return `${diffDays}d ago`;
+        return date.toLocaleDateString();
+      }
+      function formatTime(dateStr) {
+        const date = new Date(dateStr);
+        return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+      }
+      if (isAvailable !== true) {
+        return null;
+      }
+      const baseBtn = "inline-flex items-center whitespace-nowrap px-3 py-1.5 text-sm font-medium rounded-md transition-colors";
+      const secondaryBtn = `${baseBtn} text-gray-700 bg-white border border-gray-300 hover:bg-gray-100`;
+      return /* @__PURE__ */ jsxs("div", { ref: dropdownRef, className: "relative", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setIsOpen(!isOpen),
+            disabled,
+            className: `${secondaryBtn} disabled:opacity-50 disabled:cursor-not-allowed`,
+            children: [
+              /* @__PURE__ */ jsx(IconHistory, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
+              "History",
+              /* @__PURE__ */ jsx(IconChevronDown, { className: "h-3 w-3 ml-1 flex-shrink-0" })
+            ]
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "absolute top-full right-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-50 w-80 max-h-[400px] overflow-hidden",
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "border-b border-gray-200 flex items-center justify-between px-4 py-3",
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-medium text-sm text-gray-900", children: "Version History" }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setIsOpen(false),
+                        className: "text-gray-400 hover:text-gray-600 transition-colors p-1",
+                        children: /* @__PURE__ */ jsx(IconX, { className: "h-4 w-4" })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "max-h-[340px] overflow-y-auto", children: isLoading ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "flex items-center justify-center p-8",
+                  children: /* @__PURE__ */ jsx(IconLoader2, { className: "h-5 w-5 animate-spin text-gray-400" })
+                }
+              ) : error ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "text-sm text-red-600 p-4 text-center",
+                  children: error
+                }
+              ) : versions.length === 0 ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "text-sm text-gray-500 p-4 text-center",
+                  children: "No version history available"
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: "p-2", children: versions.map((version, index) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "hover:bg-gray-50 rounded-md transition-colors flex items-center justify-between px-3 py-2.5 gap-3",
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                      /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          className: "flex items-center gap-2",
+                          children: [
+                            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-900", children: formatDate(version.updatedAt) }),
+                            index === 0 && /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: "text-xs font-medium rounded-full px-2 py-0.5 bg-blue-100 text-blue-700",
+                                children: "Current"
+                              }
+                            ),
+                            version.version._status === "published" && /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: "text-xs font-medium rounded-full px-2 py-0.5 bg-green-100 text-green-700",
+                                children: "Published"
+                              }
+                            ),
+                            version.autosave && /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: "text-xs text-gray-400",
+                                title: "Autosaved",
+                                children: "(auto)"
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-500 mt-0.5", children: [
+                        formatTime(version.updatedAt),
+                        version.version.title && /* @__PURE__ */ jsxs("span", { children: [
+                          " \xB7 ",
+                          version.version.title
+                        ] })
+                      ] })
+                    ] }),
+                    index > 0 && /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => handleRestore(version),
+                        disabled: isRestoring,
+                        className: "text-xs font-medium text-blue-600 hover:text-blue-800 transition-colors disabled:opacity-50 flex items-center gap-1 px-2 py-1 flex-shrink-0",
+                        children: [
+                          isRestoring ? /* @__PURE__ */ jsx(IconLoader2, { className: "h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsx(IconRotate, { className: "h-3 w-3" }),
+                          "Restore"
+                        ]
+                      }
+                    ),
+                    index === 0 && /* @__PURE__ */ jsx("span", { className: "text-gray-400 flex-shrink-0", children: /* @__PURE__ */ jsx(IconCheck, { className: "h-4 w-4" }) })
+                  ]
+                },
+                version.id
+              )) }) })
+            ]
+          }
+        )
+      ] });
+    });
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var init_utils = __esm({
+  "src/lib/utils.ts"() {
+  }
+});
+var usePuck, HeaderActions;
+var init_HeaderActions = __esm({
+  "src/editor/components/HeaderActions.tsx"() {
+    "use client";
+    init_VersionHistory();
+    init_utils();
+    usePuck = createUsePuck();
+    HeaderActions = memo(function HeaderActions2({
+      children,
+      onBack,
+      onPreview,
+      onSave,
+      onPublish,
+      isSaving,
+      hasUnsavedChanges,
+      lastSaved,
+      documentStatus,
+      wasPublished,
+      actionsStart,
+      actionsEnd,
+      showSaveDraft = true,
+      showViewPage = true,
+      showInteractiveToggle = false,
+      showPreviewButton = true,
+      onOpenPreview,
+      showVersionHistory = true,
+      pageId,
+      apiEndpoint = "/api/puck/pages",
+      saveError,
+      onDismissError
+    }) {
+      const appState = usePuck((s) => s.appState);
+      const dispatch = usePuck((s) => s.dispatch);
+      const isInteractive = appState.ui.previewMode === "interactive";
+      const togglePreviewMode = useCallback(() => {
+        dispatch({
+          type: "setUi",
+          ui: {
+            previewMode: isInteractive ? "edit" : "interactive"
+          }
+        });
+      }, [dispatch, isInteractive]);
+      const handleSaveClick = useCallback(() => {
+        onSave(appState.data);
+      }, [onSave, appState.data]);
+      const handlePublishClick = useCallback(() => {
+        if (onPublish) {
+          onPublish(appState.data);
+        }
+      }, [onPublish, appState.data]);
+      const btnBase = "inline-flex items-center whitespace-nowrap text-sm font-medium rounded-md transition-colors";
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        actionsStart,
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onBack,
+            className: cn(btnBase, "px-3 py-1.5 bg-white text-gray-700 border border-gray-300 rounded hover:bg-gray-50"),
+            children: [
+              /* @__PURE__ */ jsx(IconArrowLeft, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
+              "Back"
+            ]
+          }
+        ),
+        documentStatus && (() => {
+          const isPublished = documentStatus === "published";
+          const hasUnpublishedChanges = documentStatus === "draft" && wasPublished;
+          let badgeLabel;
+          if (isPublished) {
+            badgeLabel = "Published";
+          } else if (hasUnpublishedChanges) {
+            badgeLabel = "Unpublished Changes";
+          } else {
+            badgeLabel = "Draft";
+          }
+          return /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "px-2.5 py-1 border rounded-full text-xs font-medium whitespace-nowrap",
+                isPublished && "bg-green-100 text-green-800 border-green-300",
+                hasUnpublishedChanges && "bg-orange-100 text-orange-700 border-orange-200",
+                !isPublished && !hasUnpublishedChanges && "bg-amber-100 text-amber-700 border-amber-200"
+              ),
+              children: badgeLabel
+            }
+          );
+        })(),
+        showInteractiveToggle && /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => isInteractive && togglePreviewMode(),
+              className: cn(
+                "inline-flex items-center gap-1 text-xs font-medium rounded transition-colors px-2.5 py-1.5 border",
+                !isInteractive ? "bg-blue-500 text-white border-blue-500" : "bg-gray-100 text-gray-500 border-gray-200"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(IconPointer, { className: "h-3.5 w-3.5" }),
+                "Edit"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => !isInteractive && togglePreviewMode(),
+              className: cn(
+                "inline-flex items-center gap-1 text-xs font-medium rounded transition-colors px-2.5 py-1.5 border",
+                isInteractive ? "bg-blue-500 text-white border-blue-500" : "bg-gray-100 text-gray-500 border-gray-200"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(IconHandClick, { className: "h-3.5 w-3.5" }),
+                "Interactive"
+              ]
+            }
+          )
+        ] }),
+        lastSaved && !saveError && /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500 flex items-center gap-1 whitespace-nowrap", children: [
+          /* @__PURE__ */ jsx(IconCheck, { className: "h-3 w-3 flex-shrink-0" }),
+          "Saved ",
+          lastSaved.toLocaleTimeString()
+        ] }),
+        hasUnsavedChanges && !saveError && /* @__PURE__ */ jsx("span", { className: "text-xs text-amber-600 font-medium whitespace-nowrap", children: "Unsaved" }),
+        saveError && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+            },
+            className: "flex items-center gap-1.5 px-2.5 py-1.5 bg-red-50 border border-red-200 rounded-md text-red-700 text-xs font-medium",
+            children: [
+              /* @__PURE__ */ jsx(IconAlertTriangle, { className: "h-4 w-4 text-red-500 flex-shrink-0" }),
+              "Error"
+            ]
+          }
+        ),
+        saveError && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "fixed inset-0 z-[9999] flex items-center justify-center bg-black/50",
+            onClick: onDismissError,
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "bg-white rounded-lg shadow-xl max-w-md w-full mx-4 overflow-hidden",
+                onClick: (e) => e.stopPropagation(),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-5 py-4 border-b border-gray-200 bg-red-50", children: [
+                    /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-10 h-10 rounded-full bg-red-100 flex items-center justify-center", children: /* @__PURE__ */ jsx(IconAlertTriangle, { className: "h-5 w-5 text-red-600" }) }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold text-gray-900", children: "Save Failed" }),
+                      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: "Unable to save your changes" })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "px-5 py-4", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-700", children: saveError }) }),
+                  /* @__PURE__ */ jsx("div", { className: "px-5 py-4 bg-gray-50 border-t border-gray-200 flex justify-end", children: /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onDismissError,
+                      className: "px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-md hover:bg-gray-800 transition-colors",
+                      children: "Close"
+                    }
+                  ) })
+                ]
+              }
+            )
+          }
+        ),
+        showPreviewButton && onOpenPreview && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onOpenPreview,
+            disabled: isSaving,
+            className: cn(
+              btnBase,
+              "px-3 py-1.5 bg-blue-600 text-white border border-blue-600 rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(IconEye, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
+              "Preview"
+            ]
+          }
+        ),
+        showViewPage && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onPreview,
+            className: cn(btnBase, "px-3 py-1.5 bg-white text-gray-700 border border-gray-300 rounded hover:bg-gray-50"),
+            children: [
+              /* @__PURE__ */ jsx(IconExternalLink, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
+              "View"
+            ]
+          }
+        ),
+        showVersionHistory && pageId && /* @__PURE__ */ jsx(
+          VersionHistory,
+          {
+            pageId,
+            apiEndpoint,
+            disabled: isSaving
+          }
+        ),
+        showSaveDraft && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: handleSaveClick,
+            disabled: isSaving || !hasUnsavedChanges,
+            className: cn(
+              btnBase,
+              "px-3 py-1.5 bg-white text-gray-700 border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+            ),
+            children: [
+              isSaving ? /* @__PURE__ */ jsx(IconLoader2, { className: "h-4 w-4 mr-1 flex-shrink-0 animate-spin" }) : /* @__PURE__ */ jsx(IconDeviceFloppy, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
+              "Save"
+            ]
+          }
+        ),
+        onPublish && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: handlePublishClick,
+            disabled: isSaving,
+            className: cn(
+              btnBase,
+              "px-3 py-1.5 bg-blue-600 text-white border border-blue-600 rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+            ),
+            children: [
+              isSaving ? /* @__PURE__ */ jsx(IconLoader2, { className: "h-4 w-4 mr-1 flex-shrink-0 animate-spin" }) : /* @__PURE__ */ jsx(IconUpload, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
+              "Publish"
+            ]
+          }
+        ),
+        actionsEnd,
+        !onPublish && children
+      ] });
+    });
+  }
+});
+
+// src/fields/shared.ts
+function cn2(...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);
+}
+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;
+}
+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");
+}
+function animationOriginToCSS(origin) {
+  if (!origin) return "center";
+  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 animationValueToCSS(anim) {
+  if (!anim || anim.mode !== "custom") return void 0;
+  const duration = anim.duration ?? 300;
+  const delay = anim.delay ?? 0;
+  const easing = anim.easing ?? "ease";
+  const easingCSS = EASING_CSS_MAP[easing] || "ease";
+  return {
+    transition: `all ${duration}ms ${easingCSS} ${delay}ms`,
+    transitionProperty: "opacity, transform, filter, background-color, color, border-color, box-shadow"
+  };
+}
+function getEntranceAnimationStyles(anim) {
+  const defaultResult = {
+    initial: {},
+    animate: {},
+    duration: 500,
+    delay: 0,
+    easing: "ease",
+    origin: "center"
+  };
+  if (!anim || anim.mode !== "preset" || anim.entrance === "none") {
+    return defaultResult;
+  }
+  const duration = anim.entranceDuration ?? 500;
+  const delay = anim.entranceDelay ?? 0;
+  const easing = EASING_CSS_MAP[anim.easing ?? "ease"] || "ease";
+  const origin = animationOriginToCSS(anim.origin);
+  const distance = anim.distance ?? 24;
+  const scaleFrom = anim.scaleFrom ?? 0.9;
+  const rotateAngle = anim.rotateAngle ?? 15;
+  const blurAmount = anim.blurAmount ?? 8;
+  const entrance = anim.entrance ?? "none";
+  let initial = {};
+  let animate = {};
+  switch (entrance) {
+    // ==================== FADE (6) ====================
+    case "fade-in":
+      initial = { opacity: 0 };
+      animate = { opacity: 1 };
+      break;
+    case "fade-up":
+      initial = { opacity: 0, transform: `translateY(${distance}px)` };
+      animate = { opacity: 1, transform: "translateY(0)" };
+      break;
+    case "fade-down":
+      initial = { opacity: 0, transform: `translateY(-${distance}px)` };
+      animate = { opacity: 1, transform: "translateY(0)" };
+      break;
+    case "fade-left":
+      initial = { opacity: 0, transform: `translateX(${distance}px)` };
+      animate = { opacity: 1, transform: "translateX(0)" };
+      break;
+    case "fade-right":
+      initial = { opacity: 0, transform: `translateX(-${distance}px)` };
+      animate = { opacity: 1, transform: "translateX(0)" };
+      break;
+    case "fade-scale":
+      initial = { opacity: 0, transform: `scale(${scaleFrom})` };
+      animate = { opacity: 1, transform: "scale(1)" };
+      break;
+    // ==================== SCALE (4) ====================
+    case "scale-in":
+      initial = { opacity: 0, transform: `scale(${scaleFrom})` };
+      animate = { opacity: 1, transform: "scale(1)" };
+      break;
+    case "scale-up":
+      initial = { opacity: 0, transform: `scale(${scaleFrom}) translateY(${distance}px)` };
+      animate = { opacity: 1, transform: "scale(1) translateY(0)" };
+      break;
+    case "scale-down":
+      initial = { opacity: 0, transform: `scale(${scaleFrom}) translateY(-${distance}px)` };
+      animate = { opacity: 1, transform: "scale(1) translateY(0)" };
+      break;
+    case "scale-out":
+      initial = { opacity: 0, transform: `scale(${2 - scaleFrom})` };
+      animate = { opacity: 1, transform: "scale(1)" };
+      break;
+    // ==================== SLIDE (4) ====================
+    case "slide-up":
+      initial = { transform: `translateY(${distance}px)` };
+      animate = { transform: "translateY(0)" };
+      break;
+    case "slide-down":
+      initial = { transform: `translateY(-${distance}px)` };
+      animate = { transform: "translateY(0)" };
+      break;
+    case "slide-left":
+      initial = { transform: `translateX(${distance}px)` };
+      animate = { transform: "translateX(0)" };
+      break;
+    case "slide-right":
+      initial = { transform: `translateX(-${distance}px)` };
+      animate = { transform: "translateX(0)" };
+      break;
+    // ==================== BLUR (3) ====================
+    case "blur-in":
+      initial = { opacity: 0, filter: `blur(${blurAmount}px)` };
+      animate = { opacity: 1, filter: "blur(0)" };
+      break;
+    case "blur-up":
+      initial = { opacity: 0, filter: `blur(${blurAmount}px)`, transform: `translateY(${distance}px)` };
+      animate = { opacity: 1, filter: "blur(0)", transform: "translateY(0)" };
+      break;
+    case "blur-down":
+      initial = { opacity: 0, filter: `blur(${blurAmount}px)`, transform: `translateY(-${distance}px)` };
+      animate = { opacity: 1, filter: "blur(0)", transform: "translateY(0)" };
+      break;
+    // ==================== ROTATE (3) ====================
+    case "rotate-in":
+      initial = { opacity: 0, transform: `rotate(${rotateAngle}deg) scale(${scaleFrom})` };
+      animate = { opacity: 1, transform: "rotate(0) scale(1)" };
+      break;
+    case "rotate-up":
+      initial = { opacity: 0, transform: `rotate(${rotateAngle}deg) translateY(${distance}px)` };
+      animate = { opacity: 1, transform: "rotate(0) translateY(0)" };
+      break;
+    case "rotate-down":
+      initial = { opacity: 0, transform: `rotate(-${rotateAngle}deg) translateY(-${distance}px)` };
+      animate = { opacity: 1, transform: "rotate(0) translateY(0)" };
+      break;
+    // ==================== BOUNCE (3) ====================
+    // These use spring/bounce easing by default for the effect
+    case "bounce-in":
+      initial = { opacity: 0, transform: `scale(${scaleFrom * 0.8})` };
+      animate = { opacity: 1, transform: "scale(1)" };
+      break;
+    case "bounce-up":
+      initial = { opacity: 0, transform: `translateY(${distance * 1.5}px)` };
+      animate = { opacity: 1, transform: "translateY(0)" };
+      break;
+    case "bounce-down":
+      initial = { opacity: 0, transform: `translateY(-${distance * 1.5}px)` };
+      animate = { opacity: 1, transform: "translateY(0)" };
+      break;
+    // ==================== FLIP (2) ====================
+    // Flip uses perspective in transform for proper 3D effect
+    // Starts from -90deg (tilted back) so the flip motion is visible
+    case "flip-x":
+      initial = {
+        transform: "perspective(1000px) rotateX(-90deg)",
+        opacity: 0.2,
+        backfaceVisibility: "hidden"
+      };
+      animate = {
+        transform: "perspective(1000px) rotateX(0deg)",
+        opacity: 1,
+        backfaceVisibility: "hidden"
+      };
+      break;
+    case "flip-y":
+      initial = {
+        transform: "perspective(1000px) rotateY(-90deg)",
+        opacity: 0.2,
+        backfaceVisibility: "hidden"
+      };
+      animate = {
+        transform: "perspective(1000px) rotateY(0deg)",
+        opacity: 1,
+        backfaceVisibility: "hidden"
+      };
+      break;
+    // ==================== ZOOM (2) ====================
+    case "zoom-in":
+      initial = { opacity: 0, transform: `scale(${scaleFrom * 0.5})` };
+      animate = { opacity: 1, transform: "scale(1)" };
+      break;
+    case "zoom-out":
+      initial = { opacity: 0, transform: `scale(${2.5 - scaleFrom})` };
+      animate = { opacity: 1, transform: "scale(1)" };
+      break;
+  }
+  return {
+    initial,
+    animate,
+    duration,
+    delay,
+    easing,
+    origin
+  };
+}
+var alignmentMap, shadowMap, headingLevelMap, textSizeMap, aspectRatioMap, dividerStyleMap, justifyContentMap, alignItemsMap, BREAKPOINTS, EASING_CSS_MAP;
+var init_shared = __esm({
+  "src/fields/shared.ts"() {
+    alignmentMap = {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right"
+    };
+    shadowMap = {
+      none: "",
+      sm: "shadow-sm",
+      md: "shadow-md",
+      lg: "shadow-lg",
+      xl: "shadow-xl",
+      "2xl": "shadow-2xl"
+    };
+    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"
+    };
+    textSizeMap = {
+      xs: "text-xs",
+      sm: "text-sm",
+      base: "text-base",
+      lg: "text-lg",
+      xl: "text-xl",
+      "2xl": "text-2xl"
+    };
+    aspectRatioMap = {
+      auto: "",
+      square: "aspect-square",
+      video: "aspect-video",
+      portrait: "aspect-[3/4]",
+      landscape: "aspect-[4/3]",
+      wide: "aspect-[21/9]"
+    };
+    dividerStyleMap = {
+      solid: "border-solid",
+      dashed: "border-dashed",
+      dotted: "border-dotted"
+    };
+    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"
+    };
+    alignItemsMap = {
+      start: "items-start",
+      "flex-start": "items-start",
+      center: "items-center",
+      end: "items-end",
+      "flex-end": "items-end",
+      stretch: "items-stretch",
+      baseline: "items-baseline"
+    };
+    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 }
+    ];
+    EASING_CSS_MAP = {
+      linear: "linear",
+      ease: "ease",
+      "ease-in": "ease-in",
+      "ease-out": "ease-out",
+      "ease-in-out": "ease-in-out",
+      spring: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
+      "spring-gentle": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+      bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
+      "bounce-in": "cubic-bezier(0.6, -0.28, 0.735, 0.045)",
+      "bounce-out": "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
+      "back-in": "cubic-bezier(0.6, -0.28, 0.735, 0.045)",
+      "back-out": "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
+      "back-in-out": "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
+      elastic: "cubic-bezier(0.68, -0.6, 0.32, 1.6)"
+    };
+  }
+});
+var usePuck2, DEFAULT_LAYOUT_CONFIG, IframeWrapper;
+var init_IframeWrapper = __esm({
+  "src/editor/components/IframeWrapper.tsx"() {
+    "use client";
+    init_shared();
+    usePuck2 = createUsePuck();
+    DEFAULT_LAYOUT_CONFIG = {
+      background: "#ffffff",
+      isDark: false
+    };
+    IframeWrapper = memo(function IframeWrapper2({
+      children,
+      document: iframeDoc,
+      layouts,
+      layoutStyles,
+      layoutKey = "pageLayout",
+      defaultLayout: defaultLayout2 = "default"
+    }) {
+      const appState = usePuck2((s) => s.appState);
+      const isInteractive = appState.ui.previewMode === "interactive";
+      const rootProps = appState.data.root?.props;
+      const layoutValue = rootProps?.[layoutKey] || defaultLayout2;
+      const showHeaderOverride = rootProps?.showHeader;
+      const showFooterOverride = rootProps?.showFooter;
+      const pageBackground = rootProps?.pageBackground;
+      const layoutConfigMap = useMemo(() => {
+        if (layouts) {
+          const map = {};
+          for (const layout of layouts) {
+            map[layout.value] = {
+              background: layout.editorBackground ?? "#ffffff",
+              isDark: layout.editorDarkMode ?? false,
+              header: layout.header,
+              footer: layout.footer,
+              stickyHeaderHeight: layout.stickyHeaderHeight
+            };
+          }
+          return map;
+        }
+        if (layoutStyles) {
+          return layoutStyles;
+        }
+        return { default: DEFAULT_LAYOUT_CONFIG };
+      }, [layouts, layoutStyles]);
+      const layoutConfig = layoutConfigMap[layoutValue] || layoutConfigMap[defaultLayout2] || DEFAULT_LAYOUT_CONFIG;
+      useEffect(() => {
+        if (!iframeDoc) return;
+        const body = iframeDoc.body;
+        const html = iframeDoc.documentElement;
+        if (pageBackground) {
+          const bgStyles = backgroundValueToCSS(pageBackground);
+          body.style.background = "";
+          body.style.backgroundColor = "";
+          body.style.backgroundImage = "";
+          Object.assign(body.style, bgStyles);
+        } else {
+          body.style.background = layoutConfig.background;
+        }
+        body.style.backgroundAttachment = "fixed";
+        body.style.minHeight = "100vh";
+        if (layoutConfig.isDark) {
+          html.classList.add("dark");
+          html.classList.remove("light");
+          body.style.color = "#ffffff";
+        } else {
+          html.classList.remove("dark");
+          html.classList.add("light");
+          body.style.color = "#1f2937";
+        }
+        const RICHTEXT_STYLES_ID = "puck-richtext-output-styles";
+        if (!iframeDoc.getElementById(RICHTEXT_STYLES_ID)) {
+          const style = iframeDoc.createElement("style");
+          style.id = RICHTEXT_STYLES_ID;
+          style.textContent = `
+        /* Rich Text Output Styles for Puck Preview */
+        .richtext-output {
+          font-size: 1.125rem;
+          line-height: 1.75;
+          color: inherit;
+        }
+        .richtext-output h1 {
+          margin-top: 2rem;
+          margin-bottom: 1rem;
+          font-weight: 700;
+          font-size: 2.25rem;
+          line-height: 1.2;
+        }
+        .richtext-output h1:first-child { margin-top: 0; }
+        .richtext-output h2 {
+          margin-top: 2rem;
+          margin-bottom: 1rem;
+          font-weight: 700;
+          font-size: 1.875rem;
+          line-height: 1.25;
+        }
+        .richtext-output h2:first-child { margin-top: 0; }
+        .richtext-output h3 {
+          margin-top: 2rem;
+          margin-bottom: 1rem;
+          font-weight: 700;
+          font-size: 1.5rem;
+          line-height: 1.3;
+        }
+        .richtext-output h3:first-child { margin-top: 0; }
+        .richtext-output h4 {
+          margin-top: 2rem;
+          margin-bottom: 1rem;
+          font-weight: 700;
+          font-size: 1.25rem;
+          line-height: 1.35;
+        }
+        .richtext-output h4:first-child { margin-top: 0; }
+        .richtext-output p {
+          margin-bottom: 1.25rem;
+        }
+        .richtext-output p:last-child { margin-bottom: 0; }
+        .richtext-output ul {
+          margin-bottom: 1.25rem;
+          padding-left: 2rem;
+          list-style-type: disc !important;
+        }
+        .richtext-output ol {
+          margin-bottom: 1.25rem;
+          padding-left: 2rem;
+          list-style-type: decimal !important;
+        }
+        .richtext-output li {
+          margin-bottom: 0.5rem;
+          display: list-item !important;
+        }
+        .richtext-output li::marker {
+          color: currentColor;
+        }
+        .richtext-output ul ul,
+        .richtext-output ol ul {
+          list-style-type: circle !important;
+          margin-top: 0.5rem;
+          margin-bottom: 0;
+        }
+        .richtext-output ul ul ul,
+        .richtext-output ol ul ul {
+          list-style-type: square !important;
+        }
+        .richtext-output ol ol,
+        .richtext-output ul ol {
+          list-style-type: lower-alpha !important;
+          margin-top: 0.5rem;
+          margin-bottom: 0;
+        }
+        .richtext-output blockquote {
+          margin: 1.5rem 0;
+          padding-left: 1.5rem;
+          border-left: 4px solid #e5e7eb;
+          font-style: italic;
+        }
+        .richtext-output a {
+          color: #2563eb;
+          text-decoration: underline;
+        }
+        .richtext-output a:hover { opacity: 0.8; }
+        .richtext-output code {
+          background-color: #f3f4f6;
+          padding: 0.125rem 0.25rem;
+          border-radius: 0.25rem;
+          font-size: 0.875rem;
+        }
+        .richtext-output mark {
+          background-color: #fef08a;
+          padding: 0.125rem 0.25rem;
+          border-radius: 0.125rem;
+        }
+        .richtext-output s,
+        .richtext-output strike {
+          text-decoration: line-through;
+        }
+        @media (max-width: 768px) {
+          .richtext-output { font-size: 1rem; }
+          .richtext-output h1 { font-size: 1.875rem; }
+          .richtext-output h2 { font-size: 1.5rem; }
+          .richtext-output h3 { font-size: 1.25rem; }
+        }
+      `;
+          iframeDoc.head.appendChild(style);
+        }
+      }, [iframeDoc, layoutConfig, pageBackground]);
+      const LayoutHeader = layoutConfig.header;
+      const LayoutFooter = layoutConfig.footer;
+      const shouldShowHeader = showHeaderOverride === "hide" ? false : showHeaderOverride === "show" ? !!LayoutHeader : !!LayoutHeader;
+      const shouldShowFooter = showFooterOverride === "hide" ? false : showFooterOverride === "show" ? !!LayoutFooter : !!LayoutFooter;
+      if (shouldShowHeader || shouldShowFooter) {
+        const contentStyle = {
+          flex: 1,
+          position: "relative",
+          // Add padding-top for sticky headers so content doesn't render behind them
+          ...shouldShowHeader && layoutConfig.stickyHeaderHeight && { paddingTop: layoutConfig.stickyHeaderHeight }
+        };
+        const headerFooterStyle = isInteractive ? {} : { pointerEvents: "none" };
+        return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", minHeight: "100vh" }, children: [
+          shouldShowHeader && LayoutHeader && /* @__PURE__ */ jsx("div", { style: headerFooterStyle, children: /* @__PURE__ */ jsx(LayoutHeader, {}) }),
+          /* @__PURE__ */ jsx("div", { style: contentStyle, children }),
+          shouldShowFooter && LayoutFooter && /* @__PURE__ */ jsx("div", { style: headerFooterStyle, children: /* @__PURE__ */ jsx(LayoutFooter, {}) })
+        ] });
+      }
+      return /* @__PURE__ */ jsx(Fragment, { children });
+    });
+  }
+});
+var Dialog, DialogPortal, DialogOverlay, DialogContent, DialogContentFullscreen, DialogHeader, DialogFooter, DialogTitle, DialogDescription;
+var init_dialog = __esm({
+  "src/components/ui/dialog.tsx"() {
+    "use client";
+    init_utils();
+    Dialog = DialogPrimitive.Root;
+    DialogPortal = DialogPrimitive.Portal;
+    DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+      DialogPrimitive.Overlay,
+      {
+        ref,
+        className: cn(
+          "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          className
+        ),
+        ...props
+      }
+    ));
+    DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+    DialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+      /* @__PURE__ */ jsx(DialogOverlay, {}),
+      /* @__PURE__ */ jsxs(
+        DialogPrimitive.Content,
+        {
+          ref,
+          className: cn(
+            "fixed left-[50%] top-[50%] z-50 flex flex-col w-full max-w-4xl translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg max-h-[85vh] overflow-hidden p-6",
+            className
+          ),
+          ...props,
+          children: [
+            children,
+            /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+              /* @__PURE__ */ jsx(IconX, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+            ] })
+          ]
+        }
+      )
+    ] }));
+    DialogContent.displayName = DialogPrimitive.Content.displayName;
+    DialogContentFullscreen = React.forwardRef(({ className, children, hideCloseButton = false, accessibleTitle = "Dialog", ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+      /* @__PURE__ */ jsx(DialogOverlay, {}),
+      /* @__PURE__ */ jsxs(
+        DialogPrimitive.Content,
+        {
+          ref,
+          className: cn(
+            "fixed inset-0 z-50 flex flex-col bg-background duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            className
+          ),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx(DialogPrimitive.Title, { className: "sr-only", children: accessibleTitle }),
+            children,
+            !hideCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+              /* @__PURE__ */ jsx(IconX, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+            ] })
+          ]
+        }
+      )
+    ] }));
+    DialogContentFullscreen.displayName = "DialogContentFullscreen";
+    DialogHeader = ({
+      className,
+      ...props
+    }) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col space-y-1.5 text-center sm:text-left",
+          className
+        ),
+        ...props
+      }
+    );
+    DialogHeader.displayName = "DialogHeader";
+    DialogFooter = ({
+      className,
+      ...props
+    }) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+          className
+        ),
+        ...props
+      }
+    );
+    DialogFooter.displayName = "DialogFooter";
+    DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+      DialogPrimitive.Title,
+      {
+        ref,
+        className: cn(
+          "text-lg font-semibold leading-none tracking-tight",
+          className
+        ),
+        ...props
+      }
+    ));
+    DialogTitle.displayName = DialogPrimitive.Title.displayName;
+    DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+      DialogPrimitive.Description,
+      {
+        ref,
+        className: cn("text-sm text-muted-foreground", className),
+        ...props
+      }
+    ));
+    DialogDescription.displayName = DialogPrimitive.Description.displayName;
+  }
+});
+
+// src/layouts/defaults.ts
+var defaultLayout, landingLayout, fullWidthLayout, DEFAULT_LAYOUTS;
+var init_defaults = __esm({
+  "src/layouts/defaults.ts"() {
+    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
+    };
+    landingLayout = {
+      value: "landing",
+      label: "Landing",
+      description: "Full-width sections with no global container constraints",
+      classes: {
+        wrapper: "",
+        container: "",
+        content: ""
+      },
+      fullWidth: true
+    };
+    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
+    };
+    DEFAULT_LAYOUTS = [
+      defaultLayout,
+      landingLayout,
+      fullWidthLayout
+    ];
+  }
+});
+
+// src/layouts/utils.ts
+function getLayout(layouts, value, fallback = "default") {
+  const layout = layouts.find((l) => l.value === value);
+  if (layout) return layout;
+  if (value !== fallback) {
+    return layouts.find((l) => l.value === fallback);
+  }
+  return layouts[0];
+}
+function layoutsToOptions(layouts) {
+  return layouts.map(({ value, label, description }) => ({
+    value,
+    label,
+    description
+  }));
+}
+var init_utils2 = __esm({
+  "src/layouts/utils.ts"() {
+    init_defaults();
+  }
+});
+function LayoutWrapper({ children, layout, className, overrides }) {
+  if (!layout) {
+    if (overrides?.background) {
+      const bgStyles = backgroundValueToCSS(overrides.background);
+      return /* @__PURE__ */ jsx("div", { style: { minHeight: "100vh", ...bgStyles }, children });
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  const Header = layout.header;
+  const Footer = layout.footer;
+  const shouldShowHeader = overrides?.showHeader === "hide" ? false : overrides?.showHeader === "show" ? true : !!Header;
+  const shouldShowFooter = overrides?.showFooter === "hide" ? false : overrides?.showFooter === "show" ? true : !!Footer;
+  const useStickyFooter = layout.stickyFooter !== false;
+  const mainStyle = {
+    ...layout.stickyHeaderHeight && shouldShowHeader ? { paddingTop: layout.stickyHeaderHeight } : {},
+    ...useStickyFooter ? stickyFooterMainStyle : {}
+  };
+  const outerBackgroundStyles = overrides?.background ? backgroundValueToCSS(overrides.background) : {
+    ...layout.styles?.wrapper?.background !== void 0 ? { background: layout.styles.wrapper.background } : {},
+    ...layout.styles?.wrapper?.backgroundAttachment !== void 0 ? { backgroundAttachment: layout.styles.wrapper.backgroundAttachment } : {}
+  };
+  const effectiveMaxWidth = overrides?.maxWidth && overrides.maxWidth !== "default" ? overrides.maxWidth : layout.maxWidth;
+  const wrapWithStickyFooter = (content) => {
+    if (useStickyFooter) {
+      return /* @__PURE__ */ jsx("div", { style: { ...stickyFooterContainerStyle, ...outerBackgroundStyles }, children: content });
+    }
+    const hasBackground = Object.keys(outerBackgroundStyles).length > 0;
+    if (hasBackground) {
+      return /* @__PURE__ */ jsx("div", { style: { minHeight: "100vh", ...outerBackgroundStyles }, children: content });
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children: content });
+  };
+  if (layout.wrapper) {
+    const CustomWrapper = layout.wrapper;
+    return wrapWithStickyFooter(
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        shouldShowHeader && Header && /* @__PURE__ */ jsx(Header, {}),
+        /* @__PURE__ */ jsx("main", { style: Object.keys(mainStyle).length > 0 ? mainStyle : void 0, children: /* @__PURE__ */ jsx(CustomWrapper, { children }) }),
+        shouldShowFooter && Footer && /* @__PURE__ */ jsx(Footer, {})
+      ] })
+    );
+  }
+  const wrapperStyle = {
+    ...layout.styles?.wrapper
+  };
+  const containerStyle = {
+    ...effectiveMaxWidth && !layout.fullWidth ? { maxWidth: effectiveMaxWidth } : {},
+    ...layout.styles?.container
+  };
+  const contentStyle = {
+    ...layout.styles?.content
+  };
+  const dataAttrs = {
+    "data-layout": layout.value,
+    ...layout.dataAttributes
+  };
+  if (layout.fullWidth) {
+    return wrapWithStickyFooter(
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        shouldShowHeader && Header && /* @__PURE__ */ jsx(Header, {}),
+        /* @__PURE__ */ jsx(
+          "main",
+          {
+            className: [layout.classes?.wrapper, className].filter(Boolean).join(" ") || void 0,
+            style: {
+              ...mainStyle,
+              ...Object.keys(wrapperStyle).length > 0 ? wrapperStyle : {}
+            },
+            ...dataAttrs,
+            children
+          }
+        ),
+        shouldShowFooter && Footer && /* @__PURE__ */ jsx(Footer, {})
+      ] })
+    );
+  }
+  return wrapWithStickyFooter(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      shouldShowHeader && Header && /* @__PURE__ */ jsx(Header, {}),
+      /* @__PURE__ */ jsx(
+        "main",
+        {
+          className: layout.classes?.wrapper || void 0,
+          style: {
+            ...mainStyle,
+            ...Object.keys(wrapperStyle).length > 0 ? wrapperStyle : {}
+          },
+          ...dataAttrs,
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: [layout.classes?.container, className].filter(Boolean).join(" ") || void 0,
+              style: Object.keys(containerStyle).length > 0 ? containerStyle : void 0,
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: layout.classes?.content || void 0,
+                  style: Object.keys(contentStyle).length > 0 ? contentStyle : void 0,
+                  children
+                }
+              )
+            }
+          )
+        }
+      ),
+      shouldShowFooter && Footer && /* @__PURE__ */ jsx(Footer, {})
+    ] })
+  );
+}
+var stickyFooterContainerStyle, stickyFooterMainStyle;
+var init_LayoutWrapper = __esm({
+  "src/layouts/LayoutWrapper.tsx"() {
+    init_shared();
+    stickyFooterContainerStyle = {
+      minHeight: "100vh",
+      display: "flex",
+      flexDirection: "column"
+    };
+    stickyFooterMainStyle = {
+      flex: 1
+    };
+  }
+});
+
+// src/layouts/index.ts
+var init_layouts = __esm({
+  "src/layouts/index.ts"() {
+    init_defaults();
+    init_utils2();
+    init_LayoutWrapper();
+  }
+});
+function useScrollAnimation(options = {}) {
+  const {
+    triggerOnScroll = true,
+    threshold = 0.1,
+    once = true,
+    rootMargin = "0px",
+    delay = 0
+  } = options;
+  const ref = useRef(null);
+  const [isInView, setIsInView] = useState(false);
+  const [hasAnimated, setHasAnimated] = useState(false);
+  const timeoutRef = useRef(null);
+  const hasMountedRef = useRef(false);
+  const reset = useCallback(() => {
+    setIsInView(false);
+    setHasAnimated(false);
+    hasMountedRef.current = false;
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+  useEffect(() => {
+    if (!triggerOnScroll) {
+      if (hasMountedRef.current) return;
+      hasMountedRef.current = true;
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          if (delay > 0) {
+            timeoutRef.current = setTimeout(() => {
+              setIsInView(true);
+              setHasAnimated(true);
+            }, delay);
+          } else {
+            setIsInView(true);
+            setHasAnimated(true);
+          }
+        });
+      });
+      return;
+    }
+    if (once && hasAnimated) {
+      return;
+    }
+    const element = ref.current;
+    if (!element) return;
+    if (typeof IntersectionObserver === "undefined") {
+      setIsInView(true);
+      setHasAnimated(true);
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const [entry] = entries;
+        const inView = entry.isIntersecting;
+        if (inView) {
+          if (delay > 0) {
+            timeoutRef.current = setTimeout(() => {
+              setIsInView(true);
+              setHasAnimated(true);
+            }, delay);
+          } else {
+            setIsInView(true);
+            setHasAnimated(true);
+          }
+          if (once) {
+            observer.disconnect();
+          }
+        } else if (!once) {
+          if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+          }
+          setIsInView(false);
+        }
+      },
+      {
+        threshold,
+        rootMargin
+      }
+    );
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+    };
+  }, [triggerOnScroll, threshold, once, rootMargin, delay, hasAnimated]);
+  return {
+    ref,
+    isInView,
+    hasAnimated,
+    reset
+  };
+}
+var init_useScrollAnimation = __esm({
+  "src/hooks/useScrollAnimation.ts"() {
+    "use client";
+  }
+});
+function AnimatedWrapper({
+  animation,
+  children,
+  className,
+  style,
+  as: Component = "div"
+}) {
+  const hasAnimation = animation && (animation.mode === "preset" && animation.entrance && animation.entrance !== "none" || animation.mode === "custom");
+  if (!hasAnimation) {
+    if (className || style) {
+      return /* @__PURE__ */ jsx(Component, { className, style, children });
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  const { ref, isInView } = useScrollAnimation({
+    triggerOnScroll: animation.triggerOnScroll ?? true,
+    threshold: animation.triggerThreshold ?? 0.1,
+    once: animation.triggerOnce ?? true,
+    rootMargin: animation.triggerMargin
+  });
+  if (animation.mode === "preset") {
+    const { initial, animate, duration, delay, easing, origin } = getEntranceAnimationStyles(animation);
+    const animationStyles = isInView ? animate : initial;
+    const transitionProperties = [
+      `opacity ${duration}ms ${easing} ${delay}ms`,
+      `transform ${duration}ms ${easing} ${delay}ms`,
+      `filter ${duration}ms ${easing} ${delay}ms`
+    ].join(", ");
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        className,
+        style: {
+          ...style,
+          ...animationStyles,
+          transition: transitionProperties,
+          transformOrigin: origin
+        },
+        children
+      }
+    );
+  }
+  const customStyles = animationValueToCSS(animation);
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className,
+      style: {
+        ...style,
+        ...customStyles,
+        // Apply opacity for visibility-based transitions
+        opacity: isInView ? 1 : 0
+      },
+      children
+    }
+  );
+}
+var init_AnimatedWrapper = __esm({
+  "src/components/AnimatedWrapper.tsx"() {
+    "use client";
+    init_useScrollAnimation();
+    init_shared();
+  }
+});
+function generateUniqueId() {
+  return `c${(++idCounter).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
+}
+var idCounter, defaultProps, ContainerConfig;
+var init_Container_server = __esm({
+  "src/components/layout/Container.server.tsx"() {
+    init_shared();
+    init_AnimatedWrapper();
+    idCounter = 0;
+    defaultProps = {
+      content: [],
+      background: null,
+      customPadding: null,
+      dimensions: null,
+      border: null,
+      margin: null,
+      animation: null,
+      innerBackground: null,
+      innerPadding: null,
+      innerBorder: null,
+      visibility: null
+    };
+    ContainerConfig = {
+      label: "Container",
+      fields: {
+        content: { type: "slot" }
+      },
+      defaultProps,
+      render: ({
+        content: Content2,
+        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 = cn2("px-4", innerClass);
+        const hasInnerStyles = Object.keys(innerStyles).length > 0;
+        const allMediaQueryCSS = mediaQueries.join("\n");
+        const ContentSlot = Content2;
+        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 }) })
+        ] });
+      }
+    };
+  }
+});
+function generateUniqueId2() {
+  return `f${(++idCounter2).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
+}
+var idCounter2, flexDirectionMap, flexWrapMap, defaultProps2, FlexConfig;
+var init_Flex_server = __esm({
+  "src/components/layout/Flex.server.tsx"() {
+    init_shared();
+    init_AnimatedWrapper();
+    idCounter2 = 0;
+    flexDirectionMap = {
+      row: "flex-row",
+      column: "flex-col",
+      "row-reverse": "flex-row-reverse",
+      "column-reverse": "flex-col-reverse"
+    };
+    flexWrapMap = {
+      wrap: "flex-wrap",
+      nowrap: "flex-nowrap",
+      "wrap-reverse": "flex-wrap-reverse"
+    };
+    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
+    };
+    FlexConfig = {
+      label: "Flex",
+      fields: {
+        content: { type: "slot" }
+      },
+      defaultProps: defaultProps2,
+      render: ({
+        content: Content2,
+        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 = cn2(
+          "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 = Content2;
+        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 }) })
+        ] });
+      }
+    };
+  }
+});
+function generateUniqueId3() {
+  return `g${(++idCounter3).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
+}
+var idCounter3, defaultProps3, GridConfig;
+var init_Grid_server = __esm({
+  "src/components/layout/Grid.server.tsx"() {
+    init_shared();
+    init_AnimatedWrapper();
+    idCounter3 = 0;
+    defaultProps3 = {
+      content: [],
+      numColumns: 3,
+      gap: 24,
+      background: null,
+      customPadding: null,
+      dimensions: null,
+      border: null,
+      margin: null,
+      animation: null,
+      visibility: null
+    };
+    GridConfig = {
+      label: "Grid",
+      fields: {
+        content: { type: "slot" }
+      },
+      defaultProps: defaultProps3,
+      render: ({
+        content: Content2,
+        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 = cn2(
+          "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 = Content2;
+        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);
+              }
+            }
+          ` })
+          ] })
+        ] });
+      }
+    };
+  }
+});
+function generateUniqueId4() {
+  return `s${(++idCounter4).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
+}
+var idCounter4, defaultProps4, SectionConfig;
+var init_Section_server = __esm({
+  "src/components/layout/Section.server.tsx"() {
+    init_shared();
+    init_AnimatedWrapper();
+    idCounter4 = 0;
+    defaultProps4 = {
+      id: "",
+      content: [],
+      background: null,
+      fullWidth: false,
+      customPadding: null,
+      dimensions: null,
+      border: null,
+      margin: null,
+      animation: null,
+      visibility: null
+    };
+    SectionConfig = {
+      label: "Section",
+      fields: {
+        content: { type: "slot" }
+      },
+      defaultProps: defaultProps4,
+      render: ({
+        id,
+        content: Content2,
+        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 = cn2("relative w-full", sectionClass);
+        const dimensionsResult = responsiveValueToCSS(
+          dimensions,
+          dimensionsValueToCSS,
+          contentClass
+        );
+        if (dimensionsResult.mediaQueryCSS) {
+          mediaQueries.push(dimensionsResult.mediaQueryCSS);
+        }
+        const contentClasses = cn2(
+          "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 = Content2;
+        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 })
+            }
+          )
+        ] });
+      }
+    };
+  }
+});
+function generateUniqueId5() {
+  return `sp${(++idCounter5).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
+}
+var idCounter5, heightMap, widthMap, defaultProps5, SpacerConfig;
+var init_Spacer_server = __esm({
+  "src/components/layout/Spacer.server.tsx"() {
+    init_shared();
+    idCounter5 = 0;
+    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"
+    };
+    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"
+    };
+    defaultProps5 = {
+      size: "24px",
+      direction: "vertical",
+      visibility: null
+    };
+    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: cn2(getClasses(), wrapperClass), "aria-hidden": "true" })
+        ] });
+      }
+    };
+  }
+});
+function generateUniqueId6() {
+  return `t${(++idCounter6).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
+}
+var idCounter6, defaultProps6, TemplateServerConfig;
+var init_Template_server = __esm({
+  "src/components/layout/Template.server.tsx"() {
+    init_shared();
+    idCounter6 = 0;
+    defaultProps6 = {
+      content: [],
+      templateId: null,
+      dimensions: null,
+      customPadding: null,
+      margin: null,
+      visibility: null
+    };
+    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: Content2, 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 = Content2;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          allMediaQueryCSS && /* @__PURE__ */ jsx("style", { children: allMediaQueryCSS }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn2("template-wrapper", wrapperClass),
+              style: Object.keys(wrapperStyles).length > 0 ? wrapperStyles : void 0,
+              children: /* @__PURE__ */ jsx(ContentSlot, { className: contentClass, style: dimensionsResult.baseStyles })
+            }
+          )
+        ] });
+      }
+    };
+  }
+});
+var defaultProps7, HeadingConfig;
+var init_Heading_server = __esm({
+  "src/components/typography/Heading.server.tsx"() {
+    init_shared();
+    init_AnimatedWrapper();
+    defaultProps7 = {
+      text: "Heading Text",
+      level: "h2",
+      alignment: null,
+      textColor: null,
+      dimensions: null,
+      animation: null,
+      margin: null,
+      customPadding: null
+    };
+    HeadingConfig = {
+      label: "Heading",
+      defaultProps: defaultProps7,
+      render: ({ text, level, alignment, textColor, dimensions, animation, margin, customPadding }) => {
+        const tag = level || "h2";
+        const alignmentValue = alignment ?? "left";
+        const classes = cn2(
+          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, TextConfig;
+var init_Text_server = __esm({
+  "src/components/typography/Text.server.tsx"() {
+    init_shared();
+    init_AnimatedWrapper();
+    defaultProps8 = {
+      content: "Enter your text here...",
+      size: "base",
+      alignment: null,
+      textColor: null,
+      dimensions: null,
+      animation: null,
+      margin: null,
+      customPadding: null
+    };
+    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: cn2(
+              textSizeMap[size] || textSizeMap.base,
+              alignmentMap[alignmentValue] || alignmentMap.left
+            ),
+            style: Object.keys(style).length > 0 ? style : void 0,
+            children: content
+          }
+        ) });
+      }
+    };
+  }
+});
+var defaultProps9, RichTextConfig;
+var init_RichText_server = __esm({
+  "src/components/typography/RichText.server.tsx"() {
+    init_shared();
+    init_AnimatedWrapper();
+    defaultProps9 = {
+      content: "<p>Enter your content here...</p>",
+      alignment: null,
+      textColor: null,
+      dimensions: null,
+      animation: null,
+      margin: null,
+      customPadding: null
+    };
+    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: cn2("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: cn2("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 }
+          }
+        ) }) });
+      }
+    };
+  }
+});
+function generateUniqueId7() {
+  return `i${(++idCounter7).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
+}
+var idCounter7, defaultProps10, ImageConfig;
+var init_Image_server = __esm({
+  "src/components/media/Image.server.tsx"() {
+    init_shared();
+    init_AnimatedWrapper();
+    idCounter7 = 0;
+    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
+    };
+    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 = cn2(
+          "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: cn2("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: cn2(
+                  "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: cn2("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: cn2("py-4 px-4", wrapperClass), style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsx("div", { className: alignmentClasses, children: content }) })
+        ] });
+      }
+    };
+  }
+});
+var buttonVariants, Button;
+var init_button = __esm({
+  "src/components/ui/button.tsx"() {
+    init_utils();
+    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"
+        }
+      }
+    );
+    Button = React.forwardRef(
+      ({ className, variant, size, asChild = false, ...props }, ref) => {
+        const Comp = asChild ? Slot : "button";
+        return /* @__PURE__ */ jsx(
+          Comp,
+          {
+            className: cn(buttonVariants({ variant, size, className })),
+            ref,
+            ...props
+          }
+        );
+      }
+    );
+    Button.displayName = "Button";
+  }
+});
+var Input;
+var init_input = __esm({
+  "src/components/ui/input.tsx"() {
+    init_utils();
+    Input = React.forwardRef(
+      ({ className, type, ...props }, ref) => {
+        return /* @__PURE__ */ jsx(
+          "input",
+          {
+            type,
+            className: cn(
+              "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, Label;
+var init_label = __esm({
+  "src/components/ui/label.tsx"() {
+    "use client";
+    init_utils();
+    labelVariants = cva(
+      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+    );
+    Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+      LabelPrimitive.Root,
+      {
+        ref,
+        className: cn(labelVariants(), className),
+        ...props
+      }
+    ));
+    Label.displayName = LabelPrimitive.Root.displayName;
+  }
+});
+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: cn(
+            "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: cn(
+                "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"}`
+      ] })
+    ] })
+  ] });
+}
+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 || "";
+}
+var DEFAULT_VALUE, CUSTOM_DEFAULTS;
+var init_SizeField = __esm({
+  "src/fields/SizeField.tsx"() {
+    "use client";
+    init_button();
+    init_input();
+    init_label();
+    init_utils();
+    DEFAULT_VALUE = {
+      mode: "default"
+    };
+    CUSTOM_DEFAULTS = {
+      height: 40,
+      paddingX: 16,
+      paddingY: 8,
+      fontSize: 14,
+      unit: "px"
+    };
+    memo(SizeFieldInner);
+  }
+});
+
+// src/theme/defaults.ts
+var DEFAULT_BUTTON_VARIANTS, DEFAULT_CTA_BUTTON_VARIANTS, DEFAULT_CTA_BACKGROUND_STYLES, DEFAULT_COLOR_PRESETS, DEFAULT_FOCUS_RING, DEFAULT_THEME;
+var init_defaults2 = __esm({
+  "src/theme/defaults.ts"() {
+    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" }
+    };
+    DEFAULT_CTA_BUTTON_VARIANTS = {
+      primary: { 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" },
+      link: { classes: "text-primary underline-offset-4 hover:underline bg-transparent" }
+    };
+    DEFAULT_CTA_BACKGROUND_STYLES = {
+      default: "bg-muted",
+      dark: "bg-foreground text-background",
+      light: "bg-background"
+    };
+    DEFAULT_COLOR_PRESETS = [
+      { hex: "#ffffff", label: "White" },
+      { hex: "#f9fafb", label: "Gray 50" },
+      { hex: "#f3f4f6", label: "Gray 100" },
+      { hex: "#1f2937", label: "Gray 800" },
+      { hex: "#111827", label: "Gray 900" },
+      { hex: "#000000", label: "Black" },
+      { hex: "#3b82f6", label: "Blue" },
+      { hex: "#10b981", label: "Green" },
+      { hex: "#f59e0b", label: "Amber" },
+      { hex: "#ef4444", label: "Red" }
+    ];
+    DEFAULT_FOCUS_RING = "focus:ring-ring";
+    DEFAULT_THEME = {
+      buttonVariants: DEFAULT_BUTTON_VARIANTS,
+      ctaButtonVariants: DEFAULT_CTA_BUTTON_VARIANTS,
+      ctaBackgroundStyles: DEFAULT_CTA_BACKGROUND_STYLES,
+      colorPresets: DEFAULT_COLOR_PRESETS,
+      focusRingColor: DEFAULT_FOCUS_RING
+    };
+  }
+});
+
+// src/theme/utils.ts
+function resolveTheme(config) {
+  if (!config) return DEFAULT_THEME;
+  return {
+    buttonVariants: mergeVariants(DEFAULT_BUTTON_VARIANTS, config.buttonVariants),
+    ctaButtonVariants: mergeVariants(DEFAULT_CTA_BUTTON_VARIANTS, config.ctaButtonVariants),
+    ctaBackgroundStyles: mergeBackgroundStyles(
+      DEFAULT_CTA_BACKGROUND_STYLES,
+      config.ctaBackgroundStyles
+    ),
+    colorPresets: resolveColorPresets(config),
+    focusRingColor: config.focusRingColor ?? DEFAULT_FOCUS_RING
+  };
+}
+function mergeVariants(defaults, overrides) {
+  if (!overrides) return defaults;
+  const result = { ...defaults };
+  for (const key of Object.keys(overrides)) {
+    const override = overrides[key];
+    if (override) {
+      result[key] = override;
+    }
+  }
+  return result;
+}
+function mergeBackgroundStyles(defaults, overrides) {
+  if (!overrides) return defaults;
+  return { ...defaults, ...overrides };
+}
+function resolveColorPresets(config) {
+  if (!config.colorPresets) {
+    return DEFAULT_COLOR_PRESETS;
+  }
+  if (config.extendColorPresets) {
+    return [...DEFAULT_COLOR_PRESETS, ...config.colorPresets];
+  }
+  return config.colorPresets;
+}
+function getVariantClasses(variants, variant, fallback = "default") {
+  const config = variants[variant];
+  if (config?.classes) {
+    return config.classes;
+  }
+  const fallbackConfig = variants[fallback];
+  return fallbackConfig?.classes ?? "";
+}
+var init_utils3 = __esm({
+  "src/theme/utils.ts"() {
+    init_defaults2();
+  }
+});
+var sizeStyles, alignmentWrapperMap, defaultProps11, ButtonConfig;
+var init_Button_server = __esm({
+  "src/components/interactive/Button.server.tsx"() {
+    init_shared();
+    init_AnimatedWrapper();
+    init_SizeField();
+    init_defaults2();
+    init_utils3();
+    sizeStyles = {
+      sm: "h-8 px-3 text-sm",
+      default: "h-10 px-4",
+      lg: "h-12 px-8 text-lg"
+    };
+    alignmentWrapperMap = {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right"
+    };
+    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
+    };
+    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 = cn2(
+          "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, CardConfig;
+var init_Card_server = __esm({
+  "src/components/interactive/Card.server.tsx"() {
+    init_shared();
+    init_AnimatedWrapper();
+    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
+    };
+    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 = cn2(
+          "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 = cn2(
+          "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, DividerConfig;
+var init_Divider_server = __esm({
+  "src/components/interactive/Divider.server.tsx"() {
+    init_shared();
+    init_AnimatedWrapper();
+    defaultProps13 = {
+      style: "solid",
+      color: null,
+      margin: null,
+      dimensions: null,
+      transform: null,
+      animation: null,
+      customPadding: null
+    };
+    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: cn2(
+              "border-t border-border",
+              dividerStyleMap[style] || dividerStyleMap.solid
+            ),
+            style: hrStyle
+          }
+        ) }) });
+      }
+    };
+  }
+});
+function AccordionItem({
+  item,
+  isOpen,
+  onToggle,
+  textColorCSS
+}) {
+  const textStyle = textColorCSS ? { color: textColorCSS } : {};
+  return /* @__PURE__ */ jsxs("div", { className: "border-b border-border last:border-b-0", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onToggle,
+        className: "flex w-full items-center justify-between py-4 px-4 text-left font-medium transition-all hover:bg-muted/50 text-foreground",
+        style: textStyle,
+        children: [
+          /* @__PURE__ */ jsx("span", { children: item.title }),
+          /* @__PURE__ */ jsx(
+            IconChevronDown,
+            {
+              className: cn2(
+                "h-4 w-4 shrink-0 transition-transform duration-200",
+                isOpen && "rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn2(
+          "overflow-hidden transition-all duration-200",
+          isOpen ? "max-h-[1000px] opacity-100" : "max-h-0 opacity-0"
+        ),
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "px-4 pb-4 text-muted-foreground",
+            style: textColorCSS ? { color: textColorCSS } : void 0,
+            children: item.content
+          }
+        )
+      }
+    )
+  ] });
+}
+function AccordionClient({
+  items,
+  allowMultiple,
+  textColor,
+  margin,
+  background,
+  dimensions,
+  transform,
+  animation,
+  customPadding
+}) {
+  const [openItems, setOpenItems] = useState(() => {
+    const initialOpen = /* @__PURE__ */ new Set();
+    items?.forEach((item, index) => {
+      if (item.defaultOpen) {
+        initialOpen.add(index);
+      }
+    });
+    return initialOpen;
+  });
+  const handleToggle = (index) => {
+    setOpenItems((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(index)) {
+        newSet.delete(index);
+      } else {
+        if (!allowMultiple) {
+          newSet.clear();
+        }
+        newSet.add(index);
+      }
+      return newSet;
+    });
+  };
+  const textColorCSS = colorValueToCSS(textColor);
+  const dimensionsStyles = dimensionsValueToCSS(dimensions);
+  const accordionClasses = "rounded-lg border border-border overflow-hidden bg-card";
+  const backgroundStyles = backgroundValueToCSS(background);
+  const accordionStyle = backgroundStyles && Object.keys(backgroundStyles).length > 0 ? backgroundStyles : {};
+  const style = {
+    ...dimensionsStyles
+  };
+  const marginCSS = marginValueToCSS(margin);
+  if (marginCSS) {
+    style.margin = marginCSS;
+  }
+  const paddingCSS = paddingValueToCSS(customPadding);
+  if (paddingCSS) {
+    style.padding = paddingCSS;
+  }
+  const transformStyles = transformValueToCSS(transform);
+  if (transformStyles) {
+    Object.assign(style, transformStyles);
+  }
+  if (!items || items.length === 0) {
+    return /* @__PURE__ */ jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsx("div", { className: "px-4", style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsx("div", { className: accordionClasses, style: accordionStyle, children: /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-muted-foreground", children: "No accordion items. Add items in the editor." }) }) }) });
+  }
+  return /* @__PURE__ */ jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsx("div", { className: "px-4", style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsx("div", { className: accordionClasses, style: accordionStyle, children: items.map((item, index) => /* @__PURE__ */ jsx(
+    AccordionItem,
+    {
+      item,
+      isOpen: openItems.has(index),
+      onToggle: () => handleToggle(index),
+      textColorCSS
+    },
+    index
+  )) }) }) });
+}
+var init_AccordionClient = __esm({
+  "src/components/AccordionClient.tsx"() {
+    "use client";
+    init_shared();
+    init_AnimatedWrapper();
+  }
+});
+var defaultProps14, AccordionConfig;
+var init_Accordion_server = __esm({
+  "src/components/interactive/Accordion.server.tsx"() {
+    init_AccordionClient();
+    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
+    };
+    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
+var init_merge = __esm({
+  "src/config/merge.ts"() {
+  }
+});
+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;
+var init_config = __esm({
+  "src/config/index.tsx"() {
+    init_layouts();
+    init_Container_server();
+    init_Flex_server();
+    init_Grid_server();
+    init_Section_server();
+    init_Spacer_server();
+    init_Template_server();
+    init_Heading_server();
+    init_Text_server();
+    init_RichText_server();
+    init_Image_server();
+    init_Button_server();
+    init_Card_server();
+    init_Divider_server();
+    init_Accordion_server();
+    init_merge();
+    init_layouts();
+    baseConfig = createConfig(DEFAULT_LAYOUTS);
+  }
+});
+function PageRenderer({
+  data,
+  config = baseConfig,
+  wrapper: Wrapper,
+  className,
+  layouts = DEFAULT_LAYOUTS
+}) {
+  if (!data || !data.content) {
+    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx("p", { children: "No content available" }) });
+  }
+  const content = /* @__PURE__ */ jsx(Render, { config, data });
+  const rootProps = data.root?.props;
+  const overrides = {
+    showHeader: rootProps?.showHeader,
+    showFooter: rootProps?.showFooter,
+    background: rootProps?.pageBackground,
+    maxWidth: rootProps?.pageMaxWidth
+  };
+  let result = content;
+  if (Wrapper) {
+    result = /* @__PURE__ */ jsx(Wrapper, { children: result });
+  } else {
+    const pageLayout = rootProps?.pageLayout;
+    const layout = pageLayout ? getLayout(layouts, pageLayout) : void 0;
+    if (layout) {
+      result = /* @__PURE__ */ jsx(LayoutWrapper, { layout, className, overrides, children: result });
+    } else if (className || overrides.background) {
+      result = /* @__PURE__ */ jsx(LayoutWrapper, { className, overrides, children: result });
+    }
+  }
+  return result;
+}
+var init_PageRenderer = __esm({
+  "src/render/PageRenderer.tsx"() {
+    init_config();
+    init_layouts();
+  }
+});
+var PreviewModal;
+var init_PreviewModal = __esm({
+  "src/editor/components/PreviewModal.tsx"() {
+    "use client";
+    init_dialog();
+    init_utils();
+    init_PageRenderer();
+    PreviewModal = memo(function PreviewModal2({
+      isOpen,
+      onClose,
+      data,
+      pageTitle,
+      onOpenInNewTab,
+      layouts,
+      hasUnsavedChanges = false,
+      onSave,
+      isSaving = false
+    }) {
+      const [pendingNavigation, setPendingNavigation] = useState(null);
+      const [isNavigating, setIsNavigating] = useState(false);
+      const handleContentClick = useCallback((e) => {
+        const target = e.target;
+        const anchor = target.closest("a");
+        if (anchor) {
+          const href = anchor.getAttribute("href");
+          if (href?.startsWith("#") && !href.includes("/")) {
+            return;
+          }
+          e.preventDefault();
+          e.stopPropagation();
+          if (href) {
+            setPendingNavigation(href);
+          }
+        }
+      }, []);
+      const handleNavigate = useCallback((saveFirst) => {
+        if (!pendingNavigation) return;
+        const navigate = () => {
+          setIsNavigating(true);
+          onClose();
+          window.location.href = pendingNavigation;
+        };
+        if (saveFirst && onSave) {
+          onSave().then(navigate).catch(() => {
+            setIsNavigating(false);
+          });
+        } else {
+          navigate();
+        }
+      }, [pendingNavigation, onClose, onSave]);
+      const handleCancelNavigation = useCallback(() => {
+        setPendingNavigation(null);
+      }, []);
+      return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxs(
+        DialogContentFullscreen,
+        {
+          hideCloseButton: true,
+          accessibleTitle: `Preview: ${pageTitle || "Page"}`,
+          className: "p-0",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "fixed top-1/2 right-4 -translate-y-1/2 z-[9998] flex flex-col gap-2 items-end", children: [
+              /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg shadow-lg border border-gray-200 p-2 flex flex-col gap-1", children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onClose,
+                    className: "flex items-center gap-2 px-3 py-2 text-sm font-medium text-white bg-gray-900 hover:bg-gray-800 rounded-md transition-colors",
+                    title: "Close preview (Esc)",
+                    children: [
+                      /* @__PURE__ */ jsx(IconX, { className: "h-4 w-4" }),
+                      "Close Preview"
+                    ]
+                  }
+                ),
+                onOpenInNewTab && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onOpenInNewTab,
+                    className: "flex items-center gap-2 px-3 py-2 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors",
+                    title: "Open published page in new tab",
+                    children: [
+                      /* @__PURE__ */ jsx(IconExternalLink, { className: "h-4 w-4" }),
+                      "View Page"
+                    ]
+                  }
+                )
+              ] }),
+              hasUnsavedChanges && /* @__PURE__ */ jsx("div", { className: "bg-amber-100 text-amber-700 px-3 py-1.5 rounded-full text-xs font-medium shadow-sm", children: "Unsaved changes" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-full overflow-auto bg-white",
+                onClickCapture: handleContentClick,
+                children: data ? /* @__PURE__ */ jsx(PageRenderer, { data, layouts }) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-gray-500", children: "No content to preview" })
+              }
+            ),
+            pendingNavigation && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-[9999] flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "bg-white rounded-lg shadow-xl max-w-md w-full mx-4 overflow-hidden",
+                onClick: (e) => e.stopPropagation(),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-5 py-4 border-b border-gray-200 bg-amber-50", children: [
+                    /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center", children: /* @__PURE__ */ jsx(IconAlertTriangle, { className: "h-5 w-5 text-amber-600" }) }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold text-gray-900", children: "Navigate away?" }),
+                      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: "This will close the preview" })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "px-5 py-4", children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-700 mb-2", children: "You're about to navigate to:" }),
+                    /* @__PURE__ */ jsx("p", { className: "text-sm font-mono bg-gray-100 px-3 py-2 rounded text-gray-800 break-all", children: pendingNavigation }),
+                    hasUnsavedChanges && /* @__PURE__ */ jsx("p", { className: "text-sm text-amber-600 mt-3 font-medium", children: "You have unsaved changes that will be lost." })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "px-5 py-4 bg-gray-50 border-t border-gray-200 flex flex-col sm:flex-row gap-2 sm:justify-end", children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: handleCancelNavigation,
+                        disabled: isNavigating || isSaving,
+                        className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors disabled:opacity-50",
+                        children: "Cancel"
+                      }
+                    ),
+                    hasUnsavedChanges && onSave && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => handleNavigate(true),
+                        disabled: isNavigating || isSaving,
+                        className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 transition-colors disabled:opacity-50",
+                        children: isSaving ? "Saving..." : "Save & Navigate"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => handleNavigate(false),
+                        disabled: isNavigating || isSaving,
+                        className: cn(
+                          "px-4 py-2 text-sm font-medium rounded-md transition-colors disabled:opacity-50",
+                          hasUnsavedChanges ? "text-red-700 bg-red-50 border border-red-200 hover:bg-red-100" : "text-white bg-gray-900 hover:bg-gray-800"
+                        ),
+                        children: isNavigating ? "Navigating..." : hasUnsavedChanges ? "Navigate without saving" : "Navigate"
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ) })
+          ]
+        }
+      ) });
+    });
+  }
+});
+function useUnsavedChanges() {
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+  const hasUnsavedChangesRef = useRef(hasUnsavedChanges);
+  hasUnsavedChangesRef.current = hasUnsavedChanges;
+  useEffect(() => {
+    const handleBeforeUnload = (e) => {
+      if (hasUnsavedChangesRef.current) {
+        e.preventDefault();
+        e.returnValue = "";
+      }
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+  }, []);
+  const markClean = useCallback(() => {
+    hasUnsavedChangesRef.current = false;
+    setHasUnsavedChanges(false);
+  }, []);
+  const markDirty = useCallback(() => {
+    hasUnsavedChangesRef.current = true;
+    setHasUnsavedChanges(true);
+  }, []);
+  return {
+    hasUnsavedChanges,
+    markClean,
+    markDirty
+  };
+}
+var init_useUnsavedChanges = __esm({
+  "src/editor/hooks/useUnsavedChanges.ts"() {
+    "use client";
+  }
+});
+function ThemeProvider({ children, theme }) {
+  const resolvedTheme = useMemo(() => resolveTheme(theme), [theme]);
+  const value = useMemo(
+    () => ({
+      theme: resolvedTheme
+    }),
+    [resolvedTheme]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+var ThemeContext;
+var init_context = __esm({
+  "src/theme/context.tsx"() {
+    "use client";
+    init_defaults2();
+    init_utils3();
+    ThemeContext = createContext(null);
+  }
+});
+
+// src/theme/example.ts
+var init_example = __esm({
+  "src/theme/example.ts"() {
+  }
+});
+
+// src/theme/index.ts
+var init_theme = __esm({
+  "src/theme/index.ts"() {
+    init_context();
+    init_defaults2();
+    init_utils3();
+    init_example();
+  }
+});
+
+// src/editor/PuckEditorCore.client.tsx
+var PuckEditorCore_client_exports = {};
+__export(PuckEditorCore_client_exports, {
+  PuckEditorCore: () => PuckEditorCore
+});
+function PuckEditorCore({
+  pageId,
+  initialData,
+  config,
+  pageTitle,
+  pageSlug,
+  apiEndpoint = "/api/puck/pages",
+  backUrl,
+  previewUrl,
+  enableViewports = true,
+  plugins,
+  layouts,
+  layoutStyles,
+  layoutKey = "pageLayout",
+  headerActionsStart,
+  headerActionsEnd,
+  overrides: customOverrides,
+  onSaveSuccess,
+  onSaveError,
+  onChange: onChangeProp,
+  initialStatus,
+  theme
+}) {
+  const router = useRouter();
+  const [isSaving, setIsSaving] = useState(false);
+  const [lastSaved, setLastSaved] = useState(null);
+  const [saveError, setSaveError] = useState(null);
+  const [documentStatus, setDocumentStatus] = useState(initialStatus);
+  const [wasPublished, setWasPublished] = useState(initialStatus === "published");
+  const { hasUnsavedChanges, markClean, markDirty } = useUnsavedChanges();
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+  const dataWithSlug = useMemo(() => {
+    const data = initialData;
+    return {
+      ...data,
+      root: {
+        ...data.root,
+        props: {
+          ...data.root?.props,
+          slug: data.root?.props?.slug || pageSlug
+        }
+      }
+    };
+  }, [initialData, pageSlug]);
+  const latestDataRef = useRef(dataWithSlug);
+  const handleSave = useCallback(
+    async (data) => {
+      setIsSaving(true);
+      const typedData = data;
+      try {
+        const response = await fetch(`${apiEndpoint}/${pageId}`, {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            puckData: data,
+            title: typedData.root?.props?.title || pageTitle,
+            slug: typedData.root?.props?.slug || pageSlug,
+            draft: true
+            // Save as draft, don't publish
+          })
+        });
+        if (!response.ok) {
+          const errorData = await response.json();
+          const errorMessage = errorData.error || errorData.message || "Failed to save page";
+          const err = new Error(errorMessage);
+          err.field = errorData.field;
+          err.details = errorData.details;
+          throw err;
+        }
+        setLastSaved(/* @__PURE__ */ new Date());
+        setSaveError(null);
+        setDocumentStatus("draft");
+        markClean();
+        onSaveSuccess?.(data);
+      } catch (error) {
+        console.error("Error saving page:", error);
+        setSaveError(error instanceof Error ? error.message : "Unknown error");
+        onSaveError?.(error instanceof Error ? error : new Error("Unknown error"));
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [apiEndpoint, pageId, pageTitle, pageSlug, markClean, onSaveSuccess, onSaveError]
+  );
+  const handlePublish = useCallback(
+    async (data) => {
+      setIsSaving(true);
+      const typedData = data;
+      try {
+        const response = await fetch(`${apiEndpoint}/${pageId}`, {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            puckData: data,
+            title: typedData.root?.props?.title || pageTitle,
+            slug: typedData.root?.props?.slug || pageSlug,
+            status: "published"
+          })
+        });
+        if (!response.ok) {
+          const errorData = await response.json();
+          const errorMessage = errorData.error || errorData.message || "Failed to publish page";
+          const err = new Error(errorMessage);
+          err.field = errorData.field;
+          err.details = errorData.details;
+          throw err;
+        }
+        setLastSaved(/* @__PURE__ */ new Date());
+        setSaveError(null);
+        setDocumentStatus("published");
+        setWasPublished(true);
+        markClean();
+        onSaveSuccess?.(data);
+      } catch (error) {
+        console.error("Error publishing page:", error);
+        setSaveError(error instanceof Error ? error.message : "Unknown error");
+        onSaveError?.(error instanceof Error ? error : new Error("Unknown error"));
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [apiEndpoint, pageId, pageTitle, pageSlug, markClean, onSaveSuccess, onSaveError]
+  );
+  const handleChange = useCallback(
+    (data) => {
+      latestDataRef.current = data;
+      markDirty();
+      onChangeProp?.(data);
+    },
+    [markDirty, onChangeProp]
+  );
+  const handleBack = useCallback(() => {
+    if (hasUnsavedChanges) {
+      if (!confirm("You have unsaved changes. Are you sure you want to leave?")) {
+        return;
+      }
+    }
+    if (backUrl) {
+      router.push(backUrl);
+    } else {
+      router.back();
+    }
+  }, [hasUnsavedChanges, router, backUrl]);
+  const handlePreview = useCallback(() => {
+    const currentSlug = latestDataRef.current?.root?.props?.slug || pageSlug;
+    let url;
+    if (typeof previewUrl === "function") {
+      url = previewUrl(currentSlug);
+    } else if (previewUrl) {
+      url = previewUrl;
+    } else {
+      url = `/${currentSlug}`;
+    }
+    window.open(url, "_blank");
+  }, [pageSlug, previewUrl]);
+  const handleOpenPreview = useCallback(() => {
+    setIsPreviewOpen(true);
+  }, []);
+  const handleSaveFromPreview = useCallback(async () => {
+    const data = latestDataRef.current;
+    setIsSaving(true);
+    try {
+      const response = await fetch(`${apiEndpoint}/${pageId}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          puckData: data,
+          title: data?.root?.props?.title || pageTitle,
+          slug: data?.root?.props?.slug || pageSlug,
+          draft: true
+        })
+      });
+      if (!response.ok) {
+        const errorData = await response.json();
+        const errorMessage = errorData.error || errorData.message || "Failed to save page";
+        throw new Error(errorMessage);
+      }
+      setLastSaved(/* @__PURE__ */ new Date());
+      setSaveError(null);
+      setDocumentStatus("draft");
+      markClean();
+      onSaveSuccess?.(data);
+    } catch (error) {
+      console.error("Error saving page:", error);
+      setSaveError(error instanceof Error ? error.message : "Unknown error");
+      onSaveError?.(error instanceof Error ? error : new Error("Unknown error"));
+      throw error;
+    } finally {
+      setIsSaving(false);
+    }
+  }, [apiEndpoint, pageId, pageTitle, pageSlug, markClean, onSaveSuccess, onSaveError]);
+  const overrides = useMemo(
+    () => ({
+      headerActions: ({ children }) => /* @__PURE__ */ jsx(
+        HeaderActions,
+        {
+          onBack: handleBack,
+          onPreview: handlePreview,
+          onSave: handleSave,
+          onPublish: handlePublish,
+          onOpenPreview: handleOpenPreview,
+          isSaving,
+          hasUnsavedChanges,
+          lastSaved,
+          documentStatus,
+          wasPublished,
+          actionsStart: headerActionsStart,
+          actionsEnd: headerActionsEnd,
+          pageId,
+          apiEndpoint,
+          saveError,
+          onDismissError: () => setSaveError(null),
+          children
+        }
+      ),
+      // Always wrap iframe for richtext styles injection and theme-aware background
+      iframe: ({ children, document: document2 }) => /* @__PURE__ */ jsx(IframeWrapper, { document: document2, layouts, layoutStyles, layoutKey, children }),
+      // Merge custom overrides
+      ...customOverrides
+    }),
+    [
+      handleBack,
+      handlePreview,
+      handleSave,
+      handlePublish,
+      handleOpenPreview,
+      isSaving,
+      hasUnsavedChanges,
+      lastSaved,
+      saveError,
+      documentStatus,
+      wasPublished,
+      headerActionsStart,
+      headerActionsEnd,
+      pageId,
+      apiEndpoint,
+      layouts,
+      layoutStyles,
+      layoutKey,
+      customOverrides
+    ]
+  );
+  const defaultPlugins = [headingAnalyzer];
+  const resolvedPlugins = useMemo(() => {
+    if (plugins === false) return void 0;
+    if (!plugins || plugins.length === 0) return defaultPlugins;
+    return [...defaultPlugins, ...plugins];
+  }, [plugins]);
+  const editorContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "h-screen", children: /* @__PURE__ */ jsx(
+      Puck,
+      {
+        config,
+        data: dataWithSlug,
+        onChange: handleChange,
+        onPublish: handlePublish,
+        headerTitle: `${pageTitle} /${pageSlug}`,
+        plugins: resolvedPlugins,
+        viewports: enableViewports ? DEFAULT_VIEWPORTS : void 0,
+        overrides
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      PreviewModal,
+      {
+        isOpen: isPreviewOpen,
+        onClose: () => setIsPreviewOpen(false),
+        data: latestDataRef.current,
+        pageTitle,
+        onOpenInNewTab: handlePreview,
+        layouts,
+        hasUnsavedChanges,
+        onSave: handleSaveFromPreview,
+        isSaving
+      }
+    )
+  ] });
+  if (theme) {
+    return /* @__PURE__ */ jsx(ThemeProvider, { theme, children: editorContent });
+  }
+  return editorContent;
+}
+var DEFAULT_VIEWPORTS;
+var init_PuckEditorCore_client = __esm({
+  "src/editor/PuckEditorCore.client.tsx"() {
+    "use client";
+    init_HeaderActions();
+    init_IframeWrapper();
+    init_PreviewModal();
+    init_useUnsavedChanges();
+    init_theme();
+    DEFAULT_VIEWPORTS = [
+      {
+        width: 360,
+        height: "auto",
+        label: "Mobile",
+        icon: "Smartphone"
+      },
+      {
+        width: 768,
+        height: "auto",
+        label: "Tablet",
+        icon: "Tablet"
+      },
+      {
+        width: 1280,
+        height: "auto",
+        label: "Desktop",
+        icon: "Monitor"
+      }
+    ];
+  }
+});
+
+// src/editor/PuckEditor.client.tsx
+var PuckEditor_client_exports = {};
+__export(PuckEditor_client_exports, {
+  PuckEditor: () => PuckEditor
+});
+function PuckEditor({
+  pageId,
+  initialData,
+  config,
+  pageTitle,
+  pageSlug,
+  apiEndpoint,
+  backUrl,
+  previewUrl,
+  enableViewports,
+  plugins,
+  layouts,
+  layoutStyles,
+  layoutKey,
+  headerActionsStart,
+  headerActionsEnd,
+  overrides,
+  onSaveSuccess,
+  onSaveError,
+  onChange,
+  initialStatus,
+  theme
+}) {
+  return /* @__PURE__ */ jsx(
+    PuckEditorCore2,
+    {
+      pageId,
+      initialData,
+      config,
+      pageTitle,
+      pageSlug,
+      apiEndpoint,
+      backUrl,
+      previewUrl,
+      enableViewports,
+      plugins,
+      layouts,
+      layoutStyles,
+      layoutKey,
+      headerActionsStart,
+      headerActionsEnd,
+      overrides,
+      onSaveSuccess,
+      onSaveError,
+      onChange,
+      initialStatus,
+      theme
+    }
+  );
+}
+var PuckEditorCore2;
+var init_PuckEditor_client = __esm({
+  "src/editor/PuckEditor.client.tsx"() {
+    "use client";
+    init_LoadingState();
+    PuckEditorCore2 = dynamic(
+      () => Promise.resolve().then(() => (init_PuckEditorCore_client(), PuckEditorCore_client_exports)).then((mod) => mod.PuckEditorCore),
+      {
+        ssr: false,
+        loading: () => /* @__PURE__ */ jsx(LoadingState, {})
+      }
+    );
+  }
+});
+
+// src/editor/index.ts
+init_PuckEditor_client();
+init_PuckEditorCore_client();
+function PuckEditorView({
+  config,
+  collectionSlug = "pages",
+  apiBasePath = "/api/puck",
+  backUrl,
+  previewUrl,
+  layoutStyles,
+  layoutKey = "pageLayout",
+  plugins,
+  onSaveSuccess,
+  onSaveError
+}) {
+  const params = useParams();
+  const searchParams = useSearchParams();
+  const pageId = params?.id || searchParams?.get("id") || "";
+  const [page, setPage] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [PuckEditor2, setPuckEditor] = useState(null);
+  useEffect(() => {
+    Promise.resolve().then(() => (init_PuckEditor_client(), PuckEditor_client_exports)).then((mod) => {
+      setPuckEditor(() => mod.PuckEditor);
+    });
+  }, []);
+  useEffect(() => {
+    async function fetchPage() {
+      if (!pageId) {
+        setError("No page ID provided");
+        setLoading(false);
+        return;
+      }
+      try {
+        setLoading(true);
+        const response = await fetch(`${apiBasePath}/${collectionSlug}/${pageId}`);
+        if (!response.ok) {
+          const data2 = await response.json().catch(() => ({}));
+          throw new Error(data2.error || `Failed to fetch page: ${response.status}`);
+        }
+        const data = await response.json();
+        setPage(data.doc);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "An error occurred");
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchPage();
+  }, [pageId, apiBasePath, collectionSlug]);
+  const computedBackUrl = backUrl || `/admin/collections/${collectionSlug}`;
+  if (loading || !PuckEditor2) {
+    return /* @__PURE__ */ jsx("div", { style: {
+      display: "flex",
+      height: "100vh",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: "#0f0f0f",
+      color: "#fff"
+    }, children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
+      /* @__PURE__ */ jsx("div", { style: {
+        width: "32px",
+        height: "32px",
+        border: "3px solid #333",
+        borderTopColor: "#fff",
+        borderRadius: "50%",
+        animation: "spin 1s linear infinite",
+        margin: "0 auto 16px"
+      } }),
+      /* @__PURE__ */ jsx("p", { style: { color: "#888" }, children: "Loading editor..." }),
+      /* @__PURE__ */ jsx("style", { children: `
+            @keyframes spin {
+              to { transform: rotate(360deg); }
+            }
+          ` })
+    ] }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { style: {
+      display: "flex",
+      height: "100vh",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: "#0f0f0f",
+      color: "#fff"
+    }, children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
+      /* @__PURE__ */ jsx("p", { style: { color: "#f87171", marginBottom: "16px" }, children: error }),
+      /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: computedBackUrl,
+          style: {
+            color: "#60a5fa",
+            textDecoration: "underline"
+          },
+          children: [
+            "Back to ",
+            collectionSlug
+          ]
+        }
+      )
+    ] }) });
+  }
+  if (!page) {
+    return /* @__PURE__ */ jsx("div", { style: {
+      display: "flex",
+      height: "100vh",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: "#0f0f0f",
+      color: "#fff"
+    }, children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
+      /* @__PURE__ */ jsx("p", { style: { color: "#888", marginBottom: "16px" }, children: "Page not found" }),
+      /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: computedBackUrl,
+          style: {
+            color: "#60a5fa",
+            textDecoration: "underline"
+          },
+          children: [
+            "Back to ",
+            collectionSlug
+          ]
+        }
+      )
+    ] }) });
+  }
+  const initialData = page.puckData || {
+    root: {
+      props: {
+        title: page.title || "New Page"
+      }
+    },
+    content: [],
+    zones: {}
+  };
+  return /* @__PURE__ */ jsx(
+    PuckEditor2,
+    {
+      pageId: page.id,
+      initialData,
+      config,
+      pageTitle: page.title,
+      pageSlug: page.slug,
+      apiEndpoint: `${apiBasePath}/${collectionSlug}`,
+      backUrl: computedBackUrl,
+      previewUrl,
+      layoutStyles,
+      layoutKey,
+      plugins,
+      onSaveSuccess,
+      onSaveError,
+      initialStatus: page._status
+    }
+  );
+}
+
+// src/editor/index.ts
+init_HeaderActions();
+init_IframeWrapper();
+init_LoadingState();
+init_PreviewModal();
+init_VersionHistory();
+init_useUnsavedChanges();
+
+export { HeaderActions, IframeWrapper, LoadingState, PreviewModal, PuckEditor, PuckEditorCore, PuckEditorView, VersionHistory, useUnsavedChanges };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map