@delmaredigital/payload-puck 0.2.0 → 0.3.0

package/dist/editor/index.js

@@ -1,4626 +1,50 @@
-"use client";
-'use strict';
-
-var lucideReact = require('lucide-react');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
-var puck = require('@measured/puck');
-var DialogPrimitive = require('@radix-ui/react-dialog');
-var reactSlot = require('@radix-ui/react-slot');
-var classVarianceAuthority = require('class-variance-authority');
-var LabelPrimitive = require('@radix-ui/react-label');
-var navigation = require('next/navigation');
-require('@measured/puck/puck.css');
-var headingAnalyzer = require('@measured/puck-plugin-heading-analyzer');
-require('@measured/puck-plugin-heading-analyzer/dist/index.css');
-var dynamic = require('next/dynamic');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
-var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
-var headingAnalyzer__default = /*#__PURE__*/_interopDefault(headingAnalyzer);
-var dynamic__default = /*#__PURE__*/_interopDefault(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__ */ jsxRuntime.jsx("div", { className: "h-screen flex items-center justify-center bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-8 w-8 animate-spin text-gray-600 mx-auto mb-4" }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600", children: message })
-  ] }) });
-}
-var init_LoadingState = __esm({
-  "src/editor/components/LoadingState.tsx"() {
-    "use client";
-  }
-});
-exports.VersionHistory = void 0;
-var init_VersionHistory = __esm({
-  "src/editor/components/VersionHistory.tsx"() {
-    "use client";
-    exports.VersionHistory = React.memo(function VersionHistory2({
-      pageId,
-      apiEndpoint = "/api/puck/pages",
-      onRestore,
-      disabled
-    }) {
-      const [isOpen, setIsOpen] = React.useState(false);
-      const [isLoading, setIsLoading] = React.useState(false);
-      const [isRestoring, setIsRestoring] = React.useState(false);
-      const [versions, setVersions] = React.useState([]);
-      const [error, setError] = React.useState(null);
-      const [isAvailable, setIsAvailable] = React.useState(null);
-      const dropdownRef = React.useRef(null);
-      React.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]);
-      React.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 = React.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]);
-      React.useEffect(() => {
-        if (isOpen) {
-          fetchVersions();
-        }
-      }, [isOpen, fetchVersions]);
-      const handleRestore = React.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__ */ jsxRuntime.jsxs("div", { ref: dropdownRef, className: "relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => setIsOpen(!isOpen),
-            disabled,
-            className: `${secondaryBtn} disabled:opacity-50 disabled:cursor-not-allowed`,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.History, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
-              "History",
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-3 w-3 ml-1 flex-shrink-0" })
-            ]
-          }
-        ),
-        isOpen && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  className: "border-b border-gray-200 flex items-center justify-between px-4 py-3",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-sm text-gray-900", children: "Version History" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => setIsOpen(false),
-                        className: "text-gray-400 hover:text-gray-600 transition-colors p-1",
-                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-[340px] overflow-y-auto", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: "flex items-center justify-center p-8",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-5 w-5 animate-spin text-gray-400" })
-                }
-              ) : error ? /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: "text-sm text-red-600 p-4 text-center",
-                  children: error
-                }
-              ) : versions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: "text-sm text-gray-500 p-4 text-center",
-                  children: "No version history available"
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2", children: versions.map((version, index) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs(
-                        "div",
-                        {
-                          className: "flex items-center gap-2",
-                          children: [
-                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-900", children: formatDate(version.updatedAt) }),
-                            index === 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                              "span",
-                              {
-                                className: "text-xs text-gray-400",
-                                title: "Autosaved",
-                                children: "(auto)"
-                              }
-                            )
-                          ]
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-500 mt-0.5", children: [
-                        formatTime(version.updatedAt),
-                        version.version.title && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                          " \xB7 ",
-                          version.version.title
-                        ] })
-                      ] })
-                    ] }),
-                    index > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "h-3 w-3" }),
-                          "Restore"
-                        ]
-                      }
-                    ),
-                    index === 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) })
-                  ]
-                },
-                version.id
-              )) }) })
-            ]
-          }
-        )
-      ] });
-    });
-  }
-});
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
-var init_utils = __esm({
-  "src/lib/utils.ts"() {
-  }
-});
-var usePuck; exports.HeaderActions = void 0;
-var init_HeaderActions = __esm({
-  "src/editor/components/HeaderActions.tsx"() {
-    "use client";
-    init_VersionHistory();
-    init_utils();
-    usePuck = puck.createUsePuck();
-    exports.HeaderActions = React.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 = React.useCallback(() => {
-        dispatch({
-          type: "setUi",
-          ui: {
-            previewMode: isInteractive ? "edit" : "interactive"
-          }
-        });
-      }, [dispatch, isInteractive]);
-      const handleSaveClick = React.useCallback(() => {
-        onSave(appState.data);
-      }, [onSave, appState.data]);
-      const handlePublishClick = React.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        actionsStart,
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
-              "Back"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-gray-400 font-mono", children: "v0.2.0" }),
-        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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex gap-1", children: [
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.MousePointer, { className: "h-3.5 w-3.5" }),
-                "Edit"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.MousePointerClick, { className: "h-3.5 w-3.5" }),
-                "Interactive"
-              ]
-            }
-          )
-        ] }),
-        lastSaved && !saveError && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-gray-500 flex items-center gap-1 whitespace-nowrap", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3 w-3 flex-shrink-0" }),
-          "Saved ",
-          lastSaved.toLocaleTimeString()
-        ] }),
-        hasUnsavedChanges && !saveError && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-amber-600 font-medium whitespace-nowrap", children: "Unsaved" }),
-        saveError && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-4 w-4 text-red-500 flex-shrink-0" }),
-              "Error"
-            ]
-          }
-        ),
-        saveError && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "fixed inset-0 z-[9999] flex items-center justify-center bg-black/50",
-            onClick: onDismissError,
-            children: /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: "bg-white rounded-lg shadow-xl max-w-md w-full mx-4 overflow-hidden",
-                onClick: (e) => e.stopPropagation(),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 px-5 py-4 border-b border-gray-200 bg-red-50", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 w-10 h-10 rounded-full bg-red-100 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-5 w-5 text-red-600" }) }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold text-gray-900", children: "Save Failed" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "Unable to save your changes" })
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5 py-4", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-700", children: saveError }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5 py-4 bg-gray-50 border-t border-gray-200 flex justify-end", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
-              "Preview"
-            ]
-          }
-        ),
-        showViewPage && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
-              "View"
-            ]
-          }
-        ),
-        showVersionHistory && pageId && /* @__PURE__ */ jsxRuntime.jsx(
-          exports.VersionHistory,
-          {
-            pageId,
-            apiEndpoint,
-            disabled: isSaving
-          }
-        ),
-        showSaveDraft && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 mr-1 flex-shrink-0 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "h-4 w-4 mr-1 flex-shrink-0" }),
-              "Save"
-            ]
-          }
-        ),
-        onPublish && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 mr-1 flex-shrink-0 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { 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 "xs" in value;
-}
-function camelToKebab(str) {
-  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
-}
-function cssPropertiesToString(styles) {
-  return Object.entries(styles).filter(([, value]) => value !== void 0 && value !== null && value !== "").map(([key, value]) => `${camelToKebab(key)}: ${value}`).join("; ");
-}
-function responsiveValueToCSS(value, converter, uniqueId) {
-  if (value === null || value === void 0) {
-    return { baseStyles: {}, mediaQueryCSS: "" };
-  }
-  if (!isResponsiveValue(value)) {
-    const styles = converter(value);
-    return {
-      baseStyles: styles || {},
-      mediaQueryCSS: ""
-    };
-  }
-  const cssRules = [];
-  BREAKPOINTS.forEach((bp) => {
-    const bpValue = value[bp.key];
-    if (bpValue === void 0) return;
-    const cssProps = converter(bpValue);
-    if (!cssProps) return;
-    const styleString = cssPropertiesToString(cssProps);
-    if (!styleString) return;
-    if (bp.key === "xs") {
-      cssRules.push(`.${uniqueId} { ${styleString} }`);
-    } else {
-      cssRules.push(
-        `@media (min-width: ${bp.minWidth}px) { .${uniqueId} { ${styleString} } }`
-      );
-    }
-  });
-  return { baseStyles: {}, mediaQueryCSS: cssRules.join("\n") };
-}
-function visibilityValueToCSS(visibility, uniqueId) {
-  if (!visibility) return "";
-  const mediaQueries = [];
-  const breakpointWidths = {
-    xs: null,
-    // 0px
-    sm: 640,
-    md: 768,
-    lg: 1024,
-    xl: 1280
-  };
-  const getNextBreakpointWidth = (bp) => {
-    const order = ["xs", "sm", "md", "lg", "xl"];
-    const index = order.indexOf(bp);
-    if (index === -1 || index === order.length - 1) return null;
-    return breakpointWidths[order[index + 1]];
-  };
-  if (visibility.xs === false) {
-    const nextWidth = getNextBreakpointWidth("xs");
-    if (nextWidth) {
-      mediaQueries.push(`@media (max-width: ${nextWidth - 1}px) { .${uniqueId} { display: none; } }`);
-    } else {
-      mediaQueries.push(`.${uniqueId} { display: none; }`);
-    }
-  }
-  BREAKPOINTS.slice(1).forEach((bp) => {
-    if (visibility[bp.key] === false) {
-      const minWidth = breakpointWidths[bp.key];
-      const maxWidth = getNextBreakpointWidth(bp.key);
-      if (minWidth && maxWidth) {
-        mediaQueries.push(
-          `@media (min-width: ${minWidth}px) and (max-width: ${maxWidth - 1}px) { .${uniqueId} { display: none; } }`
-        );
-      } else if (minWidth) {
-        mediaQueries.push(
-          `@media (min-width: ${minWidth}px) { .${uniqueId} { display: none; } }`
-        );
-      }
-    }
-  });
-  return mediaQueries.join("\n");
-}
-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: "xs", label: "XS", minWidth: null },
-      { key: "sm", label: "SM", minWidth: 640 },
-      { key: "md", label: "MD", minWidth: 768 },
-      { key: "lg", label: "LG", minWidth: 1024 },
-      { key: "xl", label: "XL", minWidth: 1280 }
-    ];
-    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; exports.IframeWrapper = void 0;
-var init_IframeWrapper = __esm({
-  "src/editor/components/IframeWrapper.tsx"() {
-    "use client";
-    init_shared();
-    usePuck2 = puck.createUsePuck();
-    DEFAULT_LAYOUT_CONFIG = {
-      background: "#ffffff",
-      isDark: false
-    };
-    exports.IframeWrapper = React.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 = React.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;
-      React.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__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", minHeight: "100vh" }, children: [
-          shouldShowHeader && LayoutHeader && /* @__PURE__ */ jsxRuntime.jsx("div", { style: headerFooterStyle, children: /* @__PURE__ */ jsxRuntime.jsx(LayoutHeader, {}) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: contentStyle, children }),
-          shouldShowFooter && LayoutFooter && /* @__PURE__ */ jsxRuntime.jsx("div", { style: headerFooterStyle, children: /* @__PURE__ */ jsxRuntime.jsx(LayoutFooter, {}) })
-        ] });
-      }
-      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.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__namespace.Root;
-    DialogPortal = DialogPrimitive__namespace.Portal;
-    DialogOverlay = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-      DialogPrimitive__namespace.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__namespace.Overlay.displayName;
-    DialogContent = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        DialogPrimitive__namespace.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__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.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__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-            ] })
-          ]
-        }
-      )
-    ] }));
-    DialogContent.displayName = DialogPrimitive__namespace.Content.displayName;
-    DialogContentFullscreen = React__namespace.forwardRef(({ className, children, hideCloseButton = false, accessibleTitle = "Dialog", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        DialogPrimitive__namespace.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__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Title, { className: "sr-only", children: accessibleTitle }),
-            children,
-            !hideCloseButton && /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.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__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-            ] })
-          ]
-        }
-      )
-    ] }));
-    DialogContentFullscreen.displayName = "DialogContentFullscreen";
-    DialogHeader = ({
-      className,
-      ...props
-    }) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-      DialogPrimitive__namespace.Title,
-      {
-        ref,
-        className: cn(
-          "text-lg font-semibold leading-none tracking-tight",
-          className
-        ),
-        ...props
-      }
-    ));
-    DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-    DialogDescription = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-      DialogPrimitive__namespace.Description,
-      {
-        ref,
-        className: cn("text-sm text-muted-foreground", className),
-        ...props
-      }
-    ));
-    DialogDescription.displayName = DialogPrimitive__namespace.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__ */ jsxRuntime.jsx("div", { style: { minHeight: "100vh", ...bgStyles }, children });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-  }
-  const Header = layout.header;
-  const Footer = layout.footer;
-  const shouldShowHeader = overrides?.showHeader === "hide" ? false : overrides?.showHeader === "show" ? true : !!Header;
-  const shouldShowFooter = overrides?.showFooter === "hide" ? false : overrides?.showFooter === "show" ? true : !!Footer;
-  const useStickyFooter = layout.stickyFooter !== false;
-  const mainStyle = {
-    ...layout.stickyHeaderHeight && shouldShowHeader ? { paddingTop: layout.stickyHeaderHeight } : {},
-    ...useStickyFooter ? stickyFooterMainStyle : {}
-  };
-  const outerBackgroundStyles = overrides?.background ? backgroundValueToCSS(overrides.background) : {
-    ...layout.styles?.wrapper?.background !== void 0 ? { background: layout.styles.wrapper.background } : {},
-    ...layout.styles?.wrapper?.backgroundAttachment !== void 0 ? { backgroundAttachment: layout.styles.wrapper.backgroundAttachment } : {}
-  };
-  const effectiveMaxWidth = overrides?.maxWidth && overrides.maxWidth !== "default" ? overrides.maxWidth : layout.maxWidth;
-  const wrapWithStickyFooter = (content) => {
-    if (useStickyFooter) {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...stickyFooterContainerStyle, ...outerBackgroundStyles }, children: content });
-    }
-    const hasBackground = Object.keys(outerBackgroundStyles).length > 0;
-    if (hasBackground) {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { minHeight: "100vh", ...outerBackgroundStyles }, children: content });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: content });
-  };
-  if (layout.wrapper) {
-    const CustomWrapper = layout.wrapper;
-    return wrapWithStickyFooter(
-      /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        shouldShowHeader && Header && /* @__PURE__ */ jsxRuntime.jsx(Header, {}),
-        /* @__PURE__ */ jsxRuntime.jsx("main", { style: Object.keys(mainStyle).length > 0 ? mainStyle : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(CustomWrapper, { children }) }),
-        shouldShowFooter && Footer && /* @__PURE__ */ jsxRuntime.jsx(Footer, {})
-      ] })
-    );
-  }
-  const wrapperStyle = {
-    ...layout.styles?.wrapper
-  };
-  const containerStyle = {
-    ...effectiveMaxWidth && !layout.fullWidth ? { maxWidth: effectiveMaxWidth } : {},
-    ...layout.styles?.container
-  };
-  const contentStyle = {
-    ...layout.styles?.content
-  };
-  const dataAttrs = {
-    "data-layout": layout.value,
-    ...layout.dataAttributes
-  };
-  if (layout.fullWidth) {
-    return wrapWithStickyFooter(
-      /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        shouldShowHeader && Header && /* @__PURE__ */ jsxRuntime.jsx(Header, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "main",
-          {
-            className: [layout.classes?.wrapper, className].filter(Boolean).join(" ") || void 0,
-            style: {
-              ...mainStyle,
-              ...Object.keys(wrapperStyle).length > 0 ? wrapperStyle : {}
-            },
-            ...dataAttrs,
-            children
-          }
-        ),
-        shouldShowFooter && Footer && /* @__PURE__ */ jsxRuntime.jsx(Footer, {})
-      ] })
-    );
-  }
-  return wrapWithStickyFooter(
-    /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      shouldShowHeader && Header && /* @__PURE__ */ jsxRuntime.jsx(Header, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "main",
-        {
-          className: layout.classes?.wrapper || void 0,
-          style: {
-            ...mainStyle,
-            ...Object.keys(wrapperStyle).length > 0 ? wrapperStyle : {}
-          },
-          ...dataAttrs,
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: [layout.classes?.container, className].filter(Boolean).join(" ") || void 0,
-              style: Object.keys(containerStyle).length > 0 ? containerStyle : void 0,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: layout.classes?.content || void 0,
-                  style: Object.keys(contentStyle).length > 0 ? contentStyle : void 0,
-                  children
-                }
-              )
-            }
-          )
-        }
-      ),
-      shouldShowFooter && Footer && /* @__PURE__ */ jsxRuntime.jsx(Footer, {})
-    ] })
-  );
-}
-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 = React.useRef(null);
-  const [isInView, setIsInView] = React.useState(false);
-  const [hasAnimated, setHasAnimated] = React.useState(false);
-  const timeoutRef = React.useRef(null);
-  const hasMountedRef = React.useRef(false);
-  const reset = React.useCallback(() => {
-    setIsInView(false);
-    setHasAnimated(false);
-    hasMountedRef.current = false;
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-  }, []);
-  React.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__ */ jsxRuntime.jsx(Component, { className, style, children });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.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__ */ jsxRuntime.jsx(
-      Component,
-      {
-        ref,
-        className,
-        style: {
-          ...style,
-          ...animationStyles,
-          transition: transitionProperties,
-          transformOrigin: origin
-        },
-        children
-      }
-    );
-  }
-  const customStyles = animationValueToCSS(animation);
-  return /* @__PURE__ */ jsxRuntime.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: [],
-      visibility: null,
-      dimensions: null,
-      background: null,
-      border: null,
-      padding: null,
-      margin: null,
-      animation: null
-    };
-    ContainerConfig = {
-      label: "Container",
-      fields: {
-        content: { type: "slot" }
-      },
-      defaultProps,
-      render: ({
-        content: Content2,
-        visibility,
-        dimensions,
-        background,
-        border,
-        padding,
-        margin,
-        animation
-      }) => {
-        const uniqueId = generateUniqueId();
-        const containerClass = `puck-container-${uniqueId}`;
-        const mediaQueries = [];
-        const containerStyles = {};
-        const backgroundStyles = backgroundValueToCSS(background);
-        if (backgroundStyles) {
-          Object.assign(containerStyles, backgroundStyles);
-        }
-        const borderStyles = borderValueToCSS(border);
-        if (borderStyles) {
-          Object.assign(containerStyles, borderStyles);
-        }
-        const dimensionsResult = responsiveValueToCSS(
-          dimensions,
-          dimensionsValueToCSS,
-          containerClass
-        );
-        Object.assign(containerStyles, dimensionsResult.baseStyles);
-        if (dimensionsResult.mediaQueryCSS) {
-          mediaQueries.push(dimensionsResult.mediaQueryCSS);
-        }
-        const hasMinHeight = (() => {
-          if (!dimensions) return false;
-          if (typeof dimensions === "object" && "xs" in dimensions) {
-            const responsiveDims = dimensions;
-            return Object.values(responsiveDims).some((v) => {
-              if (!v || typeof v !== "object") return false;
-              const dim2 = v;
-              return dim2.minHeight?.enabled && dim2.minHeight?.value > 0;
-            });
-          }
-          const dim = dimensions;
-          return dim.minHeight?.enabled && dim.minHeight?.value > 0;
-        })();
-        if (hasMinHeight) {
-          containerStyles.display = "flex";
-          containerStyles.flexDirection = "column";
-        }
-        const paddingResult = responsiveValueToCSS(
-          padding,
-          (v) => ({ padding: paddingValueToCSS(v) }),
-          containerClass
-        );
-        Object.assign(containerStyles, paddingResult.baseStyles);
-        if (paddingResult.mediaQueryCSS) {
-          mediaQueries.push(paddingResult.mediaQueryCSS);
-        }
-        const marginResult = responsiveValueToCSS(
-          margin,
-          (v) => ({ margin: marginValueToCSS(v) }),
-          containerClass
-        );
-        Object.assign(containerStyles, marginResult.baseStyles);
-        if (marginResult.mediaQueryCSS) {
-          mediaQueries.push(marginResult.mediaQueryCSS);
-        }
-        const visibilityCSS = visibilityValueToCSS(visibility, containerClass);
-        if (visibilityCSS) {
-          mediaQueries.push(visibilityCSS);
-        }
-        const allMediaQueryCSS = mediaQueries.join("\n");
-        const hasStyles = Object.keys(containerStyles).length > 0;
-        const ContentSlot = Content2;
-        const renderContent = () => {
-          if (hasMinHeight) {
-            return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, display: "flex", flexDirection: "column", minHeight: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(ContentSlot, { style: { flex: 1 } }) });
-          }
-          return /* @__PURE__ */ jsxRuntime.jsx(ContentSlot, {});
-        };
-        return /* @__PURE__ */ jsxRuntime.jsxs(AnimatedWrapper, { animation, children: [
-          allMediaQueryCSS && /* @__PURE__ */ jsxRuntime.jsx("style", { children: allMediaQueryCSS }),
-          hasStyles ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClass, style: containerStyles, children: renderContent() }) : /* @__PURE__ */ jsxRuntime.jsx(ContentSlot, { className: containerClass })
-        ] });
-      }
-    };
-  }
-});
-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__ */ jsxRuntime.jsxs(AnimatedWrapper, { animation, children: [
-          allMediaQueryCSS && /* @__PURE__ */ jsxRuntime.jsx("style", { children: allMediaQueryCSS }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrapperClass, style: wrapperStyles, children: /* @__PURE__ */ jsxRuntime.jsx(ContentSlot, { className: contentClasses, style: contentStyles }) })
-        ] });
-      }
-    };
-  }
-});
-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__ */ jsxRuntime.jsxs(AnimatedWrapper, { animation, children: [
-          allMediaQueryCSS && /* @__PURE__ */ jsxRuntime.jsx("style", { children: allMediaQueryCSS }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClass, style: wrapperStyles, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ContentSlot, { className: contentClasses, style: gridStyles }),
-            /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
-            @media (min-width: 768px) {
-              .flex.md\\:grid {
-                grid-template-columns: repeat(var(--grid-cols), 1fr);
-              }
-            }
-          ` })
-          ] })
-        ] });
-      }
-    };
-  }
-});
-function generateUniqueId4() {
-  return `s${(++idCounter4).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
-}
-var idCounter4, DEFAULT_CONTENT_DIMENSIONS, DEFAULT_CONTENT_PADDING, defaultProps4, SectionConfig;
-var init_Section_server = __esm({
-  "src/components/layout/Section.server.tsx"() {
-    init_shared();
-    init_AnimatedWrapper();
-    idCounter4 = 0;
-    DEFAULT_CONTENT_DIMENSIONS = {
-      mode: "contained",
-      alignment: "center",
-      maxWidth: { value: 1200, unit: "px", enabled: true }
-    };
-    DEFAULT_CONTENT_PADDING = {
-      top: 0,
-      right: 16,
-      bottom: 0,
-      left: 16,
-      unit: "px",
-      linked: false
-    };
-    defaultProps4 = {
-      id: "",
-      content: [],
-      // Section layer defaults
-      sectionBackground: null,
-      sectionBorder: null,
-      sectionPadding: null,
-      sectionMargin: null,
-      // Content layer defaults - 1200px max-width so two-layer design is immediately visible
-      contentDimensions: { xs: DEFAULT_CONTENT_DIMENSIONS },
-      contentBackground: null,
-      contentBorder: null,
-      contentPadding: { xs: DEFAULT_CONTENT_PADDING },
-      // Other
-      animation: null,
-      visibility: null
-    };
-    SectionConfig = {
-      label: "Section",
-      fields: {
-        content: { type: "slot" }
-      },
-      defaultProps: defaultProps4,
-      render: ({
-        id,
-        content: Content2,
-        sectionBackground,
-        sectionBorder,
-        sectionPadding,
-        sectionMargin,
-        contentDimensions,
-        contentBackground,
-        contentBorder,
-        contentPadding,
-        animation,
-        visibility
-      }) => {
-        const uniqueId = generateUniqueId4();
-        const sectionClass = `puck-section-${uniqueId}`;
-        const contentClass = `puck-section-content-${uniqueId}`;
-        const mediaQueries = [];
-        const sectionBackgroundStyles = backgroundValueToCSS(sectionBackground);
-        const sectionStyles = {
-          ...sectionBackgroundStyles
-        };
-        const sectionBorderStyles = borderValueToCSS(sectionBorder);
-        if (sectionBorderStyles) {
-          Object.assign(sectionStyles, sectionBorderStyles);
-        }
-        const sectionPaddingResult = responsiveValueToCSS(
-          sectionPadding,
-          (v) => ({ padding: paddingValueToCSS(v) }),
-          sectionClass
-        );
-        Object.assign(sectionStyles, sectionPaddingResult.baseStyles);
-        if (sectionPaddingResult.mediaQueryCSS) {
-          mediaQueries.push(sectionPaddingResult.mediaQueryCSS);
-        }
-        const sectionMarginResult = responsiveValueToCSS(
-          sectionMargin,
-          (v) => ({ margin: marginValueToCSS(v) }),
-          sectionClass
-        );
-        Object.assign(sectionStyles, sectionMarginResult.baseStyles);
-        if (sectionMarginResult.mediaQueryCSS) {
-          mediaQueries.push(sectionMarginResult.mediaQueryCSS);
-        }
-        const visibilityCSS = visibilityValueToCSS(visibility, sectionClass);
-        if (visibilityCSS) {
-          mediaQueries.push(visibilityCSS);
-        }
-        const contentBackgroundStyles = backgroundValueToCSS(contentBackground);
-        const contentStyles = {
-          ...contentBackgroundStyles
-        };
-        const contentDimensionsResult = responsiveValueToCSS(
-          contentDimensions,
-          dimensionsValueToCSS,
-          contentClass
-        );
-        Object.assign(contentStyles, contentDimensionsResult.baseStyles);
-        if (contentDimensionsResult.mediaQueryCSS) {
-          mediaQueries.push(contentDimensionsResult.mediaQueryCSS);
-        }
-        const hasMinHeight = (() => {
-          if (!contentDimensions) return false;
-          if (typeof contentDimensions === "object" && "xs" in contentDimensions) {
-            const responsiveDims = contentDimensions;
-            return Object.values(responsiveDims).some((v) => {
-              if (!v || typeof v !== "object") return false;
-              const dim2 = v;
-              return dim2.minHeight?.enabled && dim2.minHeight?.value > 0;
-            });
-          }
-          const dim = contentDimensions;
-          return dim.minHeight?.enabled && dim.minHeight?.value > 0;
-        })();
-        if (hasMinHeight) {
-          contentStyles.display = "flex";
-          contentStyles.flexDirection = "column";
-        }
-        const contentBorderStyles = borderValueToCSS(contentBorder);
-        if (contentBorderStyles) {
-          Object.assign(contentStyles, contentBorderStyles);
-        }
-        const contentPaddingResult = responsiveValueToCSS(
-          contentPadding,
-          (v) => ({ padding: paddingValueToCSS(v) }),
-          contentClass
-        );
-        Object.assign(contentStyles, contentPaddingResult.baseStyles);
-        if (contentPaddingResult.mediaQueryCSS) {
-          mediaQueries.push(contentPaddingResult.mediaQueryCSS);
-        }
-        const sectionClasses = cn2("relative w-full", sectionClass);
-        const contentClasses = cn2("relative z-10", contentClass);
-        const hasContentStyles = Object.keys(contentStyles).length > 0;
-        const allMediaQueryCSS = mediaQueries.join("\n");
-        const ContentSlot = Content2;
-        const renderContent = () => {
-          if (hasMinHeight) {
-            return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, display: "flex", flexDirection: "column", minHeight: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(ContentSlot, { style: { flex: 1 } }) });
-          }
-          return /* @__PURE__ */ jsxRuntime.jsx(ContentSlot, {});
-        };
-        return /* @__PURE__ */ jsxRuntime.jsxs(AnimatedWrapper, { animation, children: [
-          allMediaQueryCSS && /* @__PURE__ */ jsxRuntime.jsx("style", { children: allMediaQueryCSS }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "section",
-            {
-              id: id || void 0,
-              className: sectionClasses,
-              style: sectionStyles,
-              children: hasContentStyles ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentClasses, style: contentStyles, children: renderContent() }) : /* @__PURE__ */ jsxRuntime.jsx(ContentSlot, { className: contentClasses })
-            }
-          )
-        ] });
-      }
-    };
-  }
-});
-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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          visibilityCSS && /* @__PURE__ */ jsxRuntime.jsx("style", { children: visibilityCSS }),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          allMediaQueryCSS && /* @__PURE__ */ jsxRuntime.jsx("style", { children: allMediaQueryCSS }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn2("template-wrapper", wrapperClass),
-              style: Object.keys(wrapperStyles).length > 0 ? wrapperStyles : void 0,
-              children: /* @__PURE__ */ jsxRuntime.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 = React.createElement(tag, { className: classes, style: Object.keys(style).length > 0 ? style : void 0 }, text);
-        return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx(
-          "p",
-          {
-            className: cn2(
-              textSizeMap[size] || textSizeMap.base,
-              alignmentMap[alignmentValue] || alignmentMap.left
-            ),
-            style: Object.keys(style).length > 0 ? style : void 0,
-            children: content
-          }
-        ) });
-      }
-    };
-  }
-});
-var DEFAULT_PADDING, defaultProps9, RichTextConfig;
-var init_RichText_server = __esm({
-  "src/components/typography/RichText.server.tsx"() {
-    init_shared();
-    init_AnimatedWrapper();
-    DEFAULT_PADDING = {
-      top: 0,
-      right: 16,
-      bottom: 0,
-      left: 16,
-      unit: "px",
-      linked: false
-    };
-    defaultProps9 = {
-      content: "<p>Enter your content here...</p>",
-      alignment: null,
-      textColor: null,
-      dimensions: null,
-      animation: null,
-      margin: null,
-      customPadding: DEFAULT_PADDING
-      // Default 16px horizontal padding
-    };
-    RichTextConfig = {
-      label: "Rich Text",
-      defaultProps: defaultProps9,
-      render: ({ content, alignment, textColor, dimensions, animation, margin, customPadding }) => {
-        const dimensionsStyles = dimensions ? dimensionsValueToCSS(dimensions) : void 0;
-        const style = {
-          ...dimensionsStyles
-        };
-        const marginCSS = marginValueToCSS(margin);
-        if (marginCSS) {
-          style.margin = marginCSS;
-        }
-        const customPaddingCSS = paddingValueToCSS(customPadding);
-        if (customPaddingCSS) {
-          style.padding = customPaddingCSS;
-        }
-        const colorCSS = colorValueToCSS(textColor);
-        if (colorCSS) {
-          style.color = colorCSS;
-        }
-        const alignmentValue = alignment ?? "left";
-        const alignmentClass = alignmentMap[alignmentValue] || alignmentMap.left;
-        if (!content || content === "<p></p>") {
-          return /* @__PURE__ */ jsxRuntime.jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn2("relative overflow-hidden", alignmentClass), style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prose dark:prose-invert max-w-none", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx("em", { children: "No content available" }) }) }) }) });
-        }
-        return /* @__PURE__ */ jsxRuntime.jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn2("relative overflow-hidden", alignmentClass), style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "prose dark:prose-invert max-w-none",
-            dangerouslySetInnerHTML: { __html: content }
-          }
-        ) }) });
-      }
-    };
-  }
-});
-function generateUniqueId7() {
-  return `i${(++idCounter7).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
-}
-var DEFAULT_PADDING2, idCounter7, defaultProps10, ImageConfig;
-var init_Image_server = __esm({
-  "src/components/media/Image.server.tsx"() {
-    init_shared();
-    init_AnimatedWrapper();
-    DEFAULT_PADDING2 = {
-      top: 16,
-      right: 16,
-      bottom: 16,
-      left: 16,
-      unit: "px",
-      linked: true
-    };
-    idCounter7 = 0;
-    defaultProps10 = {
-      image: null,
-      alt: "",
-      aspectRatio: "auto",
-      link: "",
-      openInNewTab: false,
-      margin: null,
-      border: null,
-      dimensions: null,
-      alignment: null,
-      transform: null,
-      animation: null,
-      customPadding: DEFAULT_PADDING2,
-      // Default 16px padding
-      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__ */ jsxRuntime.jsxs(AnimatedWrapper, { animation, children: [
-            visibilityCSS && /* @__PURE__ */ jsxRuntime.jsx("style", { children: visibilityCSS }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrapperClass, style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: alignmentClasses, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "No image selected" })
-              }
-            ) }) })
-          ] });
-        }
-        const imageElement = aspectRatio === "auto" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden rounded-lg w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src: image.url,
-            alt: alt || image.alt || "",
-            className: "w-full h-auto object-cover"
-          }
-        ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn2("relative overflow-hidden rounded-lg w-full", aspectRatioMap[aspectRatio]), children: /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src: image.url,
-            alt: alt || image.alt || "",
-            className: "absolute inset-0 w-full h-full object-cover"
-          }
-        ) });
-        const content = link ? /* @__PURE__ */ jsxRuntime.jsx(
-          "a",
-          {
-            href: link,
-            target: openInNewTab ? "_blank" : void 0,
-            rel: openInNewTab ? "noopener noreferrer" : void 0,
-            className: "block transition-opacity hover:opacity-90",
-            children: imageElement
-          }
-        ) : imageElement;
-        return /* @__PURE__ */ jsxRuntime.jsxs(AnimatedWrapper, { animation, children: [
-          visibilityCSS && /* @__PURE__ */ jsxRuntime.jsx("style", { children: visibilityCSS }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrapperClass, style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: alignmentClasses, children: content }) })
-        ] });
-      }
-    };
-  }
-});
-var buttonVariants, Button;
-var init_button = __esm({
-  "src/components/ui/button.tsx"() {
-    init_utils();
-    buttonVariants = classVarianceAuthority.cva(
-      "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      {
-        variants: {
-          variant: {
-            default: "bg-primary text-primary-foreground hover:bg-primary/90",
-            destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-            outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-            ghost: "hover:bg-accent hover:text-accent-foreground",
-            link: "text-primary underline-offset-4 hover:underline"
-          },
-          size: {
-            default: "h-10 px-4 py-2",
-            sm: "h-8 px-3 text-xs",
-            lg: "h-11 px-8",
-            icon: "h-10 w-10 p-2",
-            "icon-sm": "h-8 w-8 p-1.5"
-          }
-        },
-        defaultVariants: {
-          variant: "default",
-          size: "default"
-        }
-      }
-    );
-    Button = React__namespace.forwardRef(
-      ({ className, variant, size, asChild = false, ...props }, ref) => {
-        const Comp = asChild ? reactSlot.Slot : "button";
-        return /* @__PURE__ */ jsxRuntime.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__namespace.forwardRef(
-      ({ className, type, ...props }, ref) => {
-        return /* @__PURE__ */ jsxRuntime.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 = classVarianceAuthority.cva(
-      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-    );
-    Label = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-      LabelPrimitive__namespace.Root,
-      {
-        ref,
-        className: cn(labelVariants(), className),
-        ...props
-      }
-    ));
-    Label.displayName = LabelPrimitive__namespace.Root.displayName;
-  }
-});
-function SizeFieldInner({
-  value,
-  onChange,
-  label = "Size",
-  readOnly,
-  showHeight = true,
-  showFontSize = true
-}) {
-  const currentValue = value || DEFAULT_VALUE;
-  const handleModeChange = React.useCallback((mode) => {
-    if (mode === "custom") {
-      onChange({
-        mode,
-        ...CUSTOM_DEFAULTS
-      });
-    } else {
-      onChange({ mode });
-    }
-  }, [onChange]);
-  const handleValueChange = React.useCallback((field, val) => {
-    onChange({
-      ...currentValue,
-      [field]: val
-    });
-  }, [currentValue, onChange]);
-  const handleUnitChange = React.useCallback((unit) => {
-    onChange({
-      ...currentValue,
-      unit
-    });
-  }, [currentValue, onChange]);
-  const handleClear = React.useCallback(() => {
-    onChange(null);
-  }, [onChange]);
-  const presets = [
-    { mode: "sm", label: "SM" },
-    { mode: "default", label: "Default" },
-    { mode: "lg", label: "LG" },
-    { mode: "custom", label: "Custom" }
-  ];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "puck-field space-y-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-sm font-medium text-foreground", children: label }),
-      value && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "icon-sm",
-          onClick: handleClear,
-          className: "text-muted-foreground hover:text-destructive",
-          title: "Reset to default",
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: presets.map(({ mode, label: modeLabel }) => {
-      const isActive = currentValue.mode === mode;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          type: "button",
-          variant: isActive ? "default" : "secondary",
-          size: "sm",
-          onClick: () => handleModeChange(mode),
-          disabled: readOnly,
-          className: cn(
-            "text-xs",
-            isActive && "bg-primary hover:bg-primary/90"
-          ),
-          children: modeLabel
-        },
-        mode
-      );
-    }) }),
-    currentValue.mode === "custom" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 p-3 bg-muted/50 rounded-md", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-[10px] uppercase tracking-wide text-muted-foreground flex-shrink-0", children: "Unit:" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1", children: ["px", "rem"].map((unit) => {
-          const isActive = (currentValue.unit || "px") === unit;
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              type: "button",
-              variant: isActive ? "default" : "outline",
-              size: "sm",
-              onClick: () => handleUnitChange(unit),
-              disabled: readOnly,
-              className: cn(
-                "text-xs font-mono h-7 px-2",
-                isActive && "bg-primary hover:bg-primary/90"
-              ),
-              children: unit
-            },
-            unit
-          );
-        }) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
-        showHeight && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: "Height" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Input,
-            {
-              type: "number",
-              min: 0,
-              value: currentValue.height ?? CUSTOM_DEFAULTS.height,
-              onChange: (e) => handleValueChange("height", parseInt(e.target.value, 10) || 0),
-              disabled: readOnly,
-              className: "h-8 text-sm font-mono"
-            }
-          )
-        ] }),
-        showFontSize && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: "Font Size" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Input,
-            {
-              type: "number",
-              min: 0,
-              value: currentValue.fontSize ?? CUSTOM_DEFAULTS.fontSize,
-              onChange: (e) => handleValueChange("fontSize", parseInt(e.target.value, 10) || 0),
-              disabled: readOnly,
-              className: "h-8 text-sm font-mono"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: "Padding X" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Input,
-            {
-              type: "number",
-              min: 0,
-              value: currentValue.paddingX ?? CUSTOM_DEFAULTS.paddingX,
-              onChange: (e) => handleValueChange("paddingX", parseInt(e.target.value, 10) || 0),
-              disabled: readOnly,
-              className: "h-8 text-sm font-mono"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: "Padding Y" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Input,
-            {
-              type: "number",
-              min: 0,
-              value: currentValue.paddingY ?? CUSTOM_DEFAULTS.paddingY,
-              onChange: (e) => handleValueChange("paddingY", parseInt(e.target.value, 10) || 0),
-              disabled: readOnly,
-              className: "h-8 text-sm font-mono"
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-muted-foreground font-mono pt-1 border-t border-border/50", children: [
-        showHeight && `h: ${currentValue.height ?? CUSTOM_DEFAULTS.height}${currentValue.unit || "px"}`,
-        showHeight && " | ",
-        `p: ${currentValue.paddingY ?? CUSTOM_DEFAULTS.paddingY}${currentValue.unit || "px"} ${currentValue.paddingX ?? CUSTOM_DEFAULTS.paddingX}${currentValue.unit || "px"}`,
-        showFontSize && ` | font: ${currentValue.fontSize ?? CUSTOM_DEFAULTS.fontSize}${currentValue.unit || "px"}`
-      ] })
-    ] })
-  ] });
-}
-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"
-    };
-    React.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__ */ jsxRuntime.jsx(
-          "a",
-          {
-            href: link,
-            target: openInNewTab === "yes" ? "_blank" : void 0,
-            rel: openInNewTab === "yes" ? "noopener noreferrer" : void 0,
-            className: buttonClasses,
-            style: buttonStyle,
-            children: text
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: buttonClasses, style: buttonStyle, children: text });
-        const wrapperStyle = {};
-        const marginCSS = marginValueToCSS(margin);
-        if (marginCSS) {
-          wrapperStyle.margin = marginCSS;
-        }
-        const alignmentValue = alignment ?? "left";
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          AnimatedWrapper,
-          {
-            animation,
-            className: alignmentWrapperMap[alignmentValue] || alignmentWrapperMap.left,
-            style: wrapperStyle,
-            children: buttonElement
-          }
-        );
-      }
-    };
-  }
-});
-var DEFAULT_CONTENT_PADDING2, defaultProps12, CardConfig;
-var init_Card_server = __esm({
-  "src/components/interactive/Card.server.tsx"() {
-    init_shared();
-    init_AnimatedWrapper();
-    DEFAULT_CONTENT_PADDING2 = {
-      top: 16,
-      right: 16,
-      bottom: 16,
-      left: 16,
-      unit: "px",
-      linked: true
-    };
-    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,
-      contentPadding: DEFAULT_CONTENT_PADDING2
-      // Default 16px padding
-    };
-    CardConfig = {
-      label: "Card",
-      defaultProps: defaultProps12,
-      render: ({ image, heading, text, link, openInNewTab, shadow, background, dimensions, alignment, margin, border, transform, animation, contentPadding }) => {
-        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 contentStyle = {};
-        const contentPaddingCSS = paddingValueToCSS(contentPadding);
-        if (contentPaddingCSS) {
-          contentStyle.padding = contentPaddingCSS;
-        }
-        const cardContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cardClasses, style: cardStyle, children: [
-          image?.url ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative aspect-video w-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
-            {
-              src: image.url,
-              alt: image.alt || heading || "",
-              className: "w-full h-full object-cover"
-            }
-          ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video w-full bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "No image" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle, children: [
-            heading && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-foreground mb-2", children: heading }),
-            text && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: text })
-          ] })
-        ] });
-        if (link) {
-          return /* @__PURE__ */ jsxRuntime.jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: alignmentClasses, children: /* @__PURE__ */ jsxRuntime.jsx(
-            "a",
-            {
-              href: link,
-              target: openInNewTab ? "_blank" : void 0,
-              rel: openInNewTab ? "noopener noreferrer" : void 0,
-              className: "block",
-              style: wrapperStyle,
-              children: cardContent
-            }
-          ) }) });
-        }
-        return /* @__PURE__ */ jsxRuntime.jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: alignmentClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: wrapperStyle, children: cardContent }) }) });
-      }
-    };
-  }
-});
-var DEFAULT_PADDING3, defaultProps13, DividerConfig;
-var init_Divider_server = __esm({
-  "src/components/interactive/Divider.server.tsx"() {
-    init_shared();
-    init_AnimatedWrapper();
-    DEFAULT_PADDING3 = {
-      top: 0,
-      right: 16,
-      bottom: 0,
-      left: 16,
-      unit: "px",
-      linked: false
-    };
-    defaultProps13 = {
-      style: "solid",
-      color: null,
-      margin: null,
-      dimensions: null,
-      transform: null,
-      animation: null,
-      customPadding: DEFAULT_PADDING3
-      // Default 16px horizontal padding
-    };
-    DividerConfig = {
-      label: "Divider",
-      defaultProps: defaultProps13,
-      render: ({ style, color, dimensions, margin, transform, animation, customPadding }) => {
-        const dimensionsStyles = dimensionsValueToCSS(dimensions);
-        const wrapperStyle = {
-          ...dimensionsStyles
-        };
-        const marginCSS = marginValueToCSS(margin);
-        if (marginCSS) {
-          wrapperStyle.margin = marginCSS;
-        }
-        const paddingCSS = paddingValueToCSS(customPadding);
-        if (paddingCSS) {
-          wrapperStyle.padding = paddingCSS;
-        }
-        const transformStyles = transformValueToCSS(transform);
-        if (transformStyles) {
-          Object.assign(wrapperStyle, transformStyles);
-        }
-        const customColor = colorValueToCSS(color);
-        const hrStyle = customColor ? { borderColor: customColor } : void 0;
-        return /* @__PURE__ */ jsxRuntime.jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: Object.keys(wrapperStyle).length > 0 ? wrapperStyle : void 0, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "border-b border-border last:border-b-0", children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: item.title }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            lucideReact.ChevronDown,
-            {
-              className: cn2(
-                "h-4 w-4 shrink-0 transition-transform duration-200",
-                isOpen && "rotate-180"
-              )
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: cn2(
-          "overflow-hidden transition-all duration-200",
-          isOpen ? "max-h-[1000px] opacity-100" : "max-h-0 opacity-0"
-        ),
-        children: /* @__PURE__ */ jsxRuntime.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] = React.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__ */ jsxRuntime.jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: accordionClasses, style: accordionStyle, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center text-muted-foreground", children: "No accordion items. Add items in the editor." }) }) }) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: accordionClasses, style: accordionStyle, children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children })
-    },
-    categories: {
-      layout: {
-        title: "Layout",
-        components: ["Container", "Flex", "Grid", "Section", "Spacer", "Template"],
-        defaultExpanded: true
-      },
-      typography: {
-        title: "Typography",
-        components: ["Heading", "Text", "RichText"]
-      },
-      media: {
-        title: "Media",
-        components: ["Image"]
-      },
-      interactive: {
-        title: "Interactive",
-        components: ["Button", "Card", "Divider", "Accordion"]
-      }
-    },
-    components: {
-      // Layout
-      Container: ContainerConfig,
-      Flex: FlexConfig,
-      Grid: GridConfig,
-      Section: SectionConfig,
-      Spacer: SpacerConfig,
-      Template: TemplateServerConfig,
-      // Typography
-      Heading: HeadingConfig,
-      Text: TextConfig,
-      RichText: RichTextConfig,
-      // Media
-      Image: ImageConfig,
-      // Interactive
-      Button: ButtonConfig,
-      Card: CardConfig,
-      Divider: DividerConfig,
-      Accordion: AccordionConfig
-    }
-  };
-}
-var baseConfig;
-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__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No content available" }) });
-  }
-  const content = /* @__PURE__ */ jsxRuntime.jsx(puck.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__ */ jsxRuntime.jsx(Wrapper, { children: result });
-  } else {
-    const pageLayout = rootProps?.pageLayout;
-    const layout = pageLayout ? getLayout(layouts, pageLayout) : void 0;
-    if (layout) {
-      result = /* @__PURE__ */ jsxRuntime.jsx(LayoutWrapper, { layout, className, overrides, children: result });
-    } else if (className || overrides.background) {
-      result = /* @__PURE__ */ jsxRuntime.jsx(LayoutWrapper, { className, overrides, children: result });
-    }
-  }
-  return result;
-}
-var init_PageRenderer = __esm({
-  "src/render/PageRenderer.tsx"() {
-    init_config();
-    init_layouts();
-  }
-});
-exports.PreviewModal = void 0;
-var init_PreviewModal = __esm({
-  "src/editor/components/PreviewModal.tsx"() {
-    "use client";
-    init_dialog();
-    init_utils();
-    init_PageRenderer();
-    exports.PreviewModal = React.memo(function PreviewModal2({
-      isOpen,
-      onClose,
-      data,
-      pageTitle,
-      onOpenInNewTab,
-      layouts,
-      hasUnsavedChanges = false,
-      onSave,
-      isSaving = false
-    }) {
-      const [pendingNavigation, setPendingNavigation] = React.useState(null);
-      const [isNavigating, setIsNavigating] = React.useState(false);
-      const handleContentClick = React.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 = React.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 = React.useCallback(() => {
-        setPendingNavigation(null);
-      }, []);
-      return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(
-        DialogContentFullscreen,
-        {
-          hideCloseButton: true,
-          accessibleTitle: `Preview: ${pageTitle || "Page"}`,
-          className: "p-0",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed top-1/2 right-4 -translate-y-1/2 z-[9998] flex flex-col gap-2 items-end", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-lg shadow-lg border border-gray-200 p-2 flex flex-col gap-1", children: [
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
-                      "Close Preview"
-                    ]
-                  }
-                ),
-                onOpenInNewTab && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "h-4 w-4" }),
-                      "View Page"
-                    ]
-                  }
-                )
-              ] }),
-              hasUnsavedChanges && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: "h-full overflow-auto bg-white",
-                onClickCapture: handleContentClick,
-                children: data ? /* @__PURE__ */ jsxRuntime.jsx(PageRenderer, { data, layouts }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full text-gray-500", children: "No content to preview" })
-              }
-            ),
-            pendingNavigation && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-[9999] flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: "bg-white rounded-lg shadow-xl max-w-md w-full mx-4 overflow-hidden",
-                onClick: (e) => e.stopPropagation(),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 px-5 py-4 border-b border-gray-200 bg-amber-50", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-5 w-5 text-amber-600" }) }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold text-gray-900", children: "Navigate away?" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "This will close the preview" })
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-5 py-4", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-700 mb-2", children: "You're about to navigate to:" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-mono bg-gray-100 px-3 py-2 rounded text-gray-800 break-all", children: pendingNavigation }),
-                    hasUnsavedChanges && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-amber-600 mt-3 font-medium", children: "You have unsaved changes that will be lost." })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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] = React.useState(false);
-  const hasUnsavedChangesRef = React.useRef(hasUnsavedChanges);
-  hasUnsavedChangesRef.current = hasUnsavedChanges;
-  React.useEffect(() => {
-    const handleBeforeUnload = (e) => {
-      if (hasUnsavedChangesRef.current) {
-        e.preventDefault();
-        e.returnValue = "";
-      }
-    };
-    window.addEventListener("beforeunload", handleBeforeUnload);
-    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
-  }, []);
-  const markClean = React.useCallback(() => {
-    hasUnsavedChangesRef.current = false;
-    setHasUnsavedChanges(false);
-  }, []);
-  const markDirty = React.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 = React.useMemo(() => resolveTheme(theme), [theme]);
-  const value = React.useMemo(
-    () => ({
-      theme: resolvedTheme
-    }),
-    [resolvedTheme]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value, children });
-}
-var ThemeContext;
-var init_context = __esm({
-  "src/theme/context.tsx"() {
-    "use client";
-    init_defaults2();
-    init_utils3();
-    ThemeContext = React.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 = navigation.useRouter();
-  const [isSaving, setIsSaving] = React.useState(false);
-  const [lastSaved, setLastSaved] = React.useState(null);
-  const [saveError, setSaveError] = React.useState(null);
-  const [documentStatus, setDocumentStatus] = React.useState(initialStatus);
-  const [wasPublished, setWasPublished] = React.useState(initialStatus === "published");
-  const { hasUnsavedChanges, markClean, markDirty } = useUnsavedChanges();
-  const [isPreviewOpen, setIsPreviewOpen] = React.useState(false);
-  const dataWithSlug = React.useMemo(() => {
-    const data = initialData;
-    return {
-      ...data,
-      root: {
-        ...data.root,
-        props: {
-          ...data.root?.props,
-          slug: data.root?.props?.slug || pageSlug
-        }
-      }
-    };
-  }, [initialData, pageSlug]);
-  const latestDataRef = React.useRef(dataWithSlug);
-  const handleSave = React.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 = React.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 = React.useCallback(
-    (data) => {
-      latestDataRef.current = data;
-      markDirty();
-      onChangeProp?.(data);
-    },
-    [markDirty, onChangeProp]
-  );
-  const handleBack = React.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 = React.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 = React.useCallback(() => {
-    setIsPreviewOpen(true);
-  }, []);
-  const handleSaveFromPreview = React.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 = React.useMemo(
-    () => ({
-      headerActions: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(
-        exports.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__ */ jsxRuntime.jsx(exports.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__default.default];
-  const resolvedPlugins = React.useMemo(() => {
-    if (plugins === false) return void 0;
-    if (!plugins || plugins.length === 0) return defaultPlugins;
-    return [...defaultPlugins, ...plugins];
-  }, [plugins]);
-  const editorContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-screen", children: /* @__PURE__ */ jsxRuntime.jsx(
-      puck.Puck,
-      {
-        config,
-        data: dataWithSlug,
-        onChange: handleChange,
-        onPublish: handlePublish,
-        headerTitle: `${pageTitle} /${pageSlug}`,
-        plugins: resolvedPlugins,
-        viewports: enableViewports ? DEFAULT_VIEWPORTS : void 0,
-        overrides
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      exports.PreviewModal,
-      {
-        isOpen: isPreviewOpen,
-        onClose: () => setIsPreviewOpen(false),
-        data: latestDataRef.current,
-        pageTitle,
-        onOpenInNewTab: handlePreview,
-        layouts,
-        hasUnsavedChanges,
-        onSave: handleSaveFromPreview,
-        isSaving
-      }
-    )
-  ] });
-  if (theme) {
-    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__default.default(
-      () => Promise.resolve().then(() => (init_PuckEditorCore_client(), PuckEditorCore_client_exports)).then((mod) => mod.PuckEditorCore),
-      {
-        ssr: false,
-        loading: () => /* @__PURE__ */ jsxRuntime.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 = navigation.useParams();
-  const searchParams = navigation.useSearchParams();
-  const pageId = params?.id || searchParams?.get("id") || "";
-  const [page, setPage] = React.useState(null);
-  const [loading, setLoading] = React.useState(true);
-  const [error, setError] = React.useState(null);
-  const [PuckEditor2, setPuckEditor] = React.useState(null);
-  React.useEffect(() => {
-    Promise.resolve().then(() => (init_PuckEditor_client(), PuckEditor_client_exports)).then((mod) => {
-      setPuckEditor(() => mod.PuckEditor);
-    });
-  }, []);
-  React.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__ */ jsxRuntime.jsx("div", { style: {
-      display: "flex",
-      height: "100vh",
-      alignItems: "center",
-      justifyContent: "center",
-      backgroundColor: "#0f0f0f",
-      color: "#fff"
-    }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center" }, children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { style: { color: "#888" }, children: "Loading editor..." }),
-      /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
-            @keyframes spin {
-              to { transform: rotate(360deg); }
-            }
-          ` })
-    ] }) });
-  }
-  if (error) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
-      display: "flex",
-      height: "100vh",
-      alignItems: "center",
-      justifyContent: "center",
-      backgroundColor: "#0f0f0f",
-      color: "#fff"
-    }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "#f87171", marginBottom: "16px" }, children: error }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "a",
-        {
-          href: computedBackUrl,
-          style: {
-            color: "#60a5fa",
-            textDecoration: "underline"
-          },
-          children: [
-            "Back to ",
-            collectionSlug
-          ]
-        }
-      )
-    ] }) });
-  }
-  if (!page) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
-      display: "flex",
-      height: "100vh",
-      alignItems: "center",
-      justifyContent: "center",
-      backgroundColor: "#0f0f0f",
-      color: "#fff"
-    }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "#888", marginBottom: "16px" }, children: "Page not found" }),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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();
-
-Object.defineProperty(exports, "headingAnalyzer", {
-  enumerable: true,
-  get: function () { return headingAnalyzer__default.default; }
-});
-exports.LoadingState = LoadingState;
-exports.PuckEditor = PuckEditor;
-exports.PuckEditorCore = PuckEditorCore;
-exports.PuckEditorView = PuckEditorView;
-exports.useUnsavedChanges = useUnsavedChanges;
-//# sourceMappingURL=index.js.map
+'use client';
+/**
+ * @delmaredigital/payload-puck/editor
+ *
+ * Full-featured Puck editor components with dynamic loading,
+ * unsaved changes tracking, and theme-aware preview.
+ *
+ * @example
+ * ```tsx
+ * 'use client'
+ *
+ * import { PuckEditor } from '@delmaredigital/payload-puck/editor'
+ * import { editorConfig } from '@delmaredigital/payload-puck/config/editor'
+ *
+ * export function PageEditor({ page }) {
+ *   return (
+ *     <PuckEditor
+ *       pageId={page.id}
+ *       initialData={page.puckData}
+ *       config={editorConfig}
+ *       pageTitle={page.title}
+ *       pageSlug={page.slug}
+ *       backUrl="/admin/pages"
+ *       layoutStyles={{
+ *         default: { background: '#fff', isDark: false },
+ *         dark: { background: '#1a1a1a', isDark: true },
+ *       }}
+ *       onSaveSuccess={(data) => console.log('Saved!', data)}
+ *       onSaveError={(error) => console.error('Error:', error)}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+// Main editor components
+export { PuckEditor } from './PuckEditor.client';
+export { PuckEditorCore } from './PuckEditorCore.client';
+// Ready-to-use editor page component (auto-fetches page data from route params)
+export { PuckEditorView } from '../admin/PuckEditorView';
+// Sub-components
+export { HeaderActions } from './components/HeaderActions';
+export { IframeWrapper } from './components/IframeWrapper';
+export { LoadingState } from './components/LoadingState';
+export { PreviewModal } from './components/PreviewModal';
+export { VersionHistory } from './components/VersionHistory';
+// Hooks
+export { useUnsavedChanges } from './hooks/useUnsavedChanges';
+// Plugins
+export { headingAnalyzer } from './plugins';
 //# sourceMappingURL=index.js.map