@measured/puck 0.14.0-canary.03dd90b → 0.14.0-canary.053d4c6

package/dist/index.js

@@ -8084,7 +8084,7 @@ var require_react_dom_development = __commonJS({
         var HostPortal = 4;
         var HostComponent = 5;
         var HostText = 6;
-        var Fragment16 = 7;
+        var Fragment17 = 7;
         var Mode = 8;
         var ContextConsumer = 9;
         var ContextProvider = 10;
@@ -9240,7 +9240,7 @@ var require_react_dom_development = __commonJS({
               return "DehydratedFragment";
             case ForwardRef:
               return getWrappedName$1(type, type.render, "ForwardRef");
-            case Fragment16:
+            case Fragment17:
               return "Fragment";
             case HostComponent:
               return type;
@@ -18911,7 +18911,7 @@ var require_react_dom_development = __commonJS({
             }
           }
           function updateFragment2(returnFiber, current2, fragment, lanes, key) {
-            if (current2 === null || current2.tag !== Fragment16) {
+            if (current2 === null || current2.tag !== Fragment17) {
               var created = createFiberFromFragment(fragment, returnFiber.mode, lanes, key);
               created.return = returnFiber;
               return created;
@@ -19314,7 +19314,7 @@ var require_react_dom_development = __commonJS({
               if (child.key === key) {
                 var elementType = element.type;
                 if (elementType === REACT_FRAGMENT_TYPE) {
-                  if (child.tag === Fragment16) {
+                  if (child.tag === Fragment17) {
                     deleteRemainingChildren(returnFiber, child.sibling);
                     var existing = useFiber(child, element.props.children);
                     existing.return = returnFiber;
@@ -23489,7 +23489,7 @@ var require_react_dom_development = __commonJS({
               var _resolvedProps2 = workInProgress2.elementType === type ? _unresolvedProps2 : resolveDefaultProps(type, _unresolvedProps2);
               return updateForwardRef(current2, workInProgress2, type, _resolvedProps2, renderLanes2);
             }
-            case Fragment16:
+            case Fragment17:
               return updateFragment(current2, workInProgress2, renderLanes2);
             case Mode:
               return updateMode(current2, workInProgress2, renderLanes2);
@@ -23762,7 +23762,7 @@ var require_react_dom_development = __commonJS({
             case SimpleMemoComponent:
             case FunctionComponent:
             case ForwardRef:
-            case Fragment16:
+            case Fragment17:
             case Mode:
             case Profiler:
             case ContextConsumer:
@@ -28021,7 +28021,7 @@ var require_react_dom_development = __commonJS({
           return fiber;
         }
         function createFiberFromFragment(elements, mode, lanes, key) {
-          var fiber = createFiber(Fragment16, elements, key, mode);
+          var fiber = createFiber(Fragment17, elements, key, mode);
           fiber.lanes = lanes;
           return fiber;
         }
@@ -29173,7 +29173,7 @@ var import_react2 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css#css-module
 init_react_import();
-var Button_module_default = { "Button": "_Button_8fn3a_1", "Button--medium": "_Button--medium_8fn3a_29", "Button--large": "_Button--large_8fn3a_37", "Button-icon": "_Button-icon_8fn3a_44", "Button--primary": "_Button--primary_8fn3a_48", "Button--secondary": "_Button--secondary_8fn3a_67", "Button--flush": "_Button--flush_8fn3a_82", "Button--disabled": "_Button--disabled_8fn3a_86", "Button--fullWidth": "_Button--fullWidth_8fn3a_93", "Button-spinner": "_Button-spinner_8fn3a_98" };
+var Button_module_default = { "Button": "_Button_1t64k_1", "Button--medium": "_Button--medium_1t64k_29", "Button--large": "_Button--large_1t64k_37", "Button-icon": "_Button-icon_1t64k_44", "Button--primary": "_Button--primary_1t64k_48", "Button--secondary": "_Button--secondary_1t64k_67", "Button--flush": "_Button--flush_1t64k_84", "Button--disabled": "_Button--disabled_1t64k_88", "Button--fullWidth": "_Button--fullWidth_1t64k_95", "Button-spinner": "_Button-spinner_1t64k_100" };
 
 // lib/get-class-name-factory.ts
 init_react_import();
@@ -29879,6 +29879,18 @@ var useModifierHeld = (modifier) => {
   return modifierHeld;
 };
 
+// lib/is-ios.ts
+init_react_import();
+var isIos = () => [
+  "iPad Simulator",
+  "iPhone Simulator",
+  "iPod Simulator",
+  "iPad",
+  "iPhone",
+  "iPod"
+].includes(navigator.platform) || // iPad on iOS 13 detection
+navigator.userAgent.includes("Mac") && "ontouchend" in document;
+
 // components/DraggableComponent/index.tsx
 var import_react_spinners2 = require("react-spinners");
 var import_jsx_runtime7 = require("react/jsx-runtime");
@@ -29914,65 +29926,81 @@ var DraggableComponent = ({
   const { status } = useAppContext();
   const El = status !== "LOADING" ? import_dnd3.Draggable : DefaultDraggable;
   (0, import_react7.useEffect)(onMount, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(El, { draggableId: id, index, isDragDisabled, children: (provided, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    "div",
-    __spreadProps(__spreadValues(__spreadValues({
-      ref: provided.innerRef
-    }, provided.draggableProps), provided.dragHandleProps), {
-      className: getClassName4({
-        isSelected,
-        isModifierHeld,
-        isDragging: snapshot.isDragging,
-        isLocked,
-        forceHover,
-        indicativeHover
-      }),
-      style: __spreadProps(__spreadValues(__spreadValues({}, style), provided.draggableProps.style), {
-        cursor: isModifierHeld ? "initial" : "grab"
-      }),
-      onMouseOver,
-      onMouseOut,
-      onMouseDown,
-      onMouseUp,
-      onClick,
-      children: [
-        debug,
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName4("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_spinners2.ClipLoader, { "aria-label": "loading", size: 16, color: "inherit" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "div",
-          {
-            className: getClassName4("actionsOverlay"),
-            style: {
-              top: actionsOverlayTop / zoomConfig.zoom
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  const [disableSecondaryAnimation, setDisableSecondaryAnimation] = (0, import_react7.useState)(false);
+  (0, import_react7.useEffect)(() => {
+    if (isIos()) {
+      setDisableSecondaryAnimation(true);
+    }
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    El,
+    {
+      draggableId: id,
+      index,
+      isDragDisabled,
+      disableSecondaryAnimation,
+      children: (provided, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        "div",
+        __spreadProps(__spreadValues(__spreadValues({
+          ref: provided.innerRef
+        }, provided.draggableProps), provided.dragHandleProps), {
+          className: getClassName4({
+            isSelected,
+            isModifierHeld,
+            isDragging: snapshot.isDragging,
+            isLocked,
+            forceHover,
+            indicativeHover
+          }),
+          style: __spreadProps(__spreadValues(__spreadValues({}, style), provided.draggableProps.style), {
+            cursor: isModifierHeld ? "initial" : "grab"
+          }),
+          onMouseOver,
+          onMouseOut,
+          onMouseDown,
+          onMouseUp,
+          onClick,
+          children: [
+            debug,
+            isLoading && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName4("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_spinners2.ClipLoader, { "aria-label": "loading", size: 16, color: "inherit" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "div",
               {
-                className: getClassName4("actions"),
+                className: getClassName4("actionsOverlay"),
                 style: {
-                  transform: `scale(${1 / zoomConfig.zoom}`,
-                  top: actionsTop / zoomConfig.zoom,
-                  right: actionsRight / zoomConfig.zoom
+                  top: actionsOverlayTop / zoomConfig.zoom
                 },
-                children: [
-                  label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName4("actionsLabel"), children: label }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: getClassName4("action"), onClick: onDuplicate, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Copy, { size: 16 }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: getClassName4("action"), onClick: onDelete, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Trash, { size: 16 }) })
-                ]
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                  "div",
+                  {
+                    className: getClassName4("actions"),
+                    style: {
+                      transform: `scale(${1 / zoomConfig.zoom}`,
+                      top: actionsTop / zoomConfig.zoom,
+                      right: actionsRight / zoomConfig.zoom
+                    },
+                    children: [
+                      label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName4("actionsLabel"), children: label }),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: getClassName4("action"), onClick: onDuplicate, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Copy, { size: 16 }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: getClassName4("action"), onClick: onDelete, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Trash, { size: 16 }) })
+                    ]
+                  }
+                )
               }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName4("overlay") }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName4("contents"), children })
-      ]
-    })
-  ) }, id);
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName4("overlay") }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName4("contents"), children })
+          ]
+        })
+      )
+    },
+    id
+  );
 };
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css#css-module
 init_react_import();
-var styles_module_default4 = { "DropZone": "_DropZone_jtf9d_1", "DropZone-content": "_DropZone-content_jtf9d_10", "DropZone--userIsDragging": "_DropZone--userIsDragging_jtf9d_15", "DropZone--draggingOverArea": "_DropZone--draggingOverArea_jtf9d_19", "DropZone--draggingNewComponent": "_DropZone--draggingNewComponent_jtf9d_20", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_jtf9d_26", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_jtf9d_27", "DropZone--isDisabled": "_DropZone--isDisabled_jtf9d_28", "DropZone--isRootZone": "_DropZone--isRootZone_jtf9d_29", "DropZone--hasChildren": "_DropZone--hasChildren_jtf9d_30", "DropZone--isDestination": "_DropZone--isDestination_jtf9d_40", "DropZone-item": "_DropZone-item_jtf9d_48", "DropZone-hitbox": "_DropZone-hitbox_jtf9d_52" };
+var styles_module_default4 = { "DropZone": "_DropZone_w4btq_1", "DropZone-content": "_DropZone-content_w4btq_10", "DropZone--userIsDragging": "_DropZone--userIsDragging_w4btq_15", "DropZone--draggingOverArea": "_DropZone--draggingOverArea_w4btq_19", "DropZone--draggingNewComponent": "_DropZone--draggingNewComponent_w4btq_20", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_w4btq_26", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_w4btq_27", "DropZone--isDisabled": "_DropZone--isDisabled_w4btq_28", "DropZone--isRootZone": "_DropZone--isRootZone_w4btq_29", "DropZone--hasChildren": "_DropZone--hasChildren_w4btq_30", "DropZone--isDestination": "_DropZone--isDestination_w4btq_40", "DropZone-item": "_DropZone-item_w4btq_52", "DropZone-hitbox": "_DropZone-hitbox_w4btq_56" };
 
 // components/DropZone/context.tsx
 init_react_import();
@@ -30470,14 +30498,10 @@ var IconButton = ({
 
 // components/Puck/index.tsx
 init_react_import();
-var import_react29 = require("react");
+var import_react28 = require("react");
 
 // lib/use-placeholder-style.ts
 init_react_import();
-var import_react12 = require("react");
-
-// lib/use-frame.ts
-init_react_import();
 var import_react11 = require("react");
 
 // lib/get-frame.ts
@@ -30485,36 +30509,27 @@ init_react_import();
 var getFrame = () => {
   let frame = document.querySelector("#preview-frame");
   if ((frame == null ? void 0 : frame.tagName) === "IFRAME") {
-    frame = frame.contentDocument.body;
+    frame = frame.contentDocument;
   }
   return frame;
 };
 
-// lib/use-frame.ts
-var useFrame = () => {
-  const [el, setEl] = (0, import_react11.useState)();
-  (0, import_react11.useEffect)(() => {
-    setEl(getFrame());
-  }, []);
-  return el;
-};
-
 // lib/use-placeholder-style.ts
 var usePlaceholderStyle = () => {
   const queryAttr = "data-rfd-drag-handle-draggable-id";
-  const [placeholderStyle, setPlaceholderStyle] = (0, import_react12.useState)();
-  const frame = useFrame();
+  const [placeholderStyle, setPlaceholderStyle] = (0, import_react11.useState)();
   const onDragStartOrUpdate = (draggedItem) => {
     var _a;
     const draggableId = draggedItem.draggableId;
     const destinationIndex = (draggedItem.destination || draggedItem.source).index;
     const droppableId = (draggedItem.destination || draggedItem.source).droppableId;
     const domQuery = `[${queryAttr}='${draggableId}']`;
-    const draggedDOM = frame == null ? void 0 : frame.ownerDocument.querySelector(domQuery);
+    const frame = getFrame();
+    const draggedDOM = document.querySelector(domQuery) || (frame == null ? void 0 : frame.querySelector(domQuery));
     if (!draggedDOM) {
       return;
     }
-    const targetListElement = frame == null ? void 0 : frame.ownerDocument.querySelector(
+    const targetListElement = frame == null ? void 0 : frame.querySelector(
       `[data-rfd-droppable-id='${droppableId}']`
     );
     const { clientHeight } = draggedDOM;
@@ -30578,7 +30593,7 @@ var Heading = ({ children, rank, size = "m" }) => {
 
 // lib/use-breadcrumbs.ts
 init_react_import();
-var import_react13 = require("react");
+var import_react12 = require("react");
 var convertPathDataToBreadcrumbs = (selectedItem, pathData, data) => {
   const id = selectedItem ? selectedItem == null ? void 0 : selectedItem.props.id : "";
   const currentPathData = pathData && id && pathData[id] ? __spreadValues({}, pathData[id]) : { label: "Page", path: [] };
@@ -30628,8 +30643,8 @@ var useBreadcrumbs = (renderCount) => {
     state: { data },
     selectedItem
   } = useAppContext();
-  const dzContext = (0, import_react13.useContext)(dropZoneContext);
-  return (0, import_react13.useMemo)(() => {
+  const dzContext = (0, import_react12.useContext)(dropZoneContext);
+  return (0, import_react12.useMemo)(() => {
     const breadcrumbs = convertPathDataToBreadcrumbs(
       selectedItem,
       dzContext == null ? void 0 : dzContext.pathData,
@@ -31046,7 +31061,7 @@ var flushZones = (appState) => {
 
 // lib/use-resolved-data.ts
 init_react_import();
-var import_react14 = require("react");
+var import_react13 = require("react");
 
 // lib/resolve-component-data.ts
 init_react_import();
@@ -31161,13 +31176,13 @@ var resolveRootData = (data, config) => __async(void 0, null, function* () {
 
 // lib/use-resolved-data.ts
 var useResolvedData = (appState, config, dispatch) => {
-  const [{ resolverKey, newAppState }, setResolverState] = (0, import_react14.useState)({
+  const [{ resolverKey, newAppState }, setResolverState] = (0, import_react13.useState)({
     resolverKey: 0,
     newAppState: appState
   });
-  const [componentState, setComponentState] = (0, import_react14.useState)({});
+  const [componentState, setComponentState] = (0, import_react13.useState)({});
   const deferredSetStates = {};
-  const setComponentLoading = (0, import_react14.useCallback)(
+  const setComponentLoading = (0, import_react13.useCallback)(
     (id, loading, defer = 0) => {
       if (deferredSetStates[id]) {
         clearTimeout(deferredSetStates[id]);
@@ -31237,10 +31252,10 @@ var useResolvedData = (appState, config, dispatch) => {
     });
     yield Promise.all(promises);
   });
-  (0, import_react14.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     runResolvers();
   }, [resolverKey]);
-  const resolveData = (0, import_react14.useCallback)((newAppState2 = appState) => {
+  const resolveData = (0, import_react13.useCallback)((newAppState2 = appState) => {
     setResolverState((curr) => ({
       resolverKey: curr.resolverKey + 1,
       newAppState: newAppState2
@@ -31327,7 +31342,7 @@ var MenuBar = ({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css#css-module
 init_react_import();
-var styles_module_default8 = { "Puck": "_Puck_1lfcm_19", "Puck--leftSideBarVisible": "_Puck--leftSideBarVisible_1lfcm_36", "Puck--rightSideBarVisible": "_Puck--rightSideBarVisible_1lfcm_42", "Puck-header": "_Puck-header_1lfcm_96", "Puck-headerInner": "_Puck-headerInner_1lfcm_105", "Puck-headerToggle": "_Puck-headerToggle_1lfcm_115", "Puck-rightSideBarToggle": "_Puck-rightSideBarToggle_1lfcm_122", "Puck-leftSideBarToggle": "_Puck-leftSideBarToggle_1lfcm_123", "Puck-headerTitle": "_Puck-headerTitle_1lfcm_127", "Puck-headerPath": "_Puck-headerPath_1lfcm_131", "Puck-headerTools": "_Puck-headerTools_1lfcm_138", "Puck-menuButton": "_Puck-menuButton_1lfcm_144", "Puck--menuOpen": "_Puck--menuOpen_1lfcm_149", "Puck-leftSideBar": "_Puck-leftSideBar_1lfcm_123", "Puck-rightSideBar": "_Puck-rightSideBar_1lfcm_122" };
+var styles_module_default8 = { "Puck": "_Puck_u70b9_19", "Puck--mounted": "_Puck--mounted_u70b9_36", "Puck--leftSideBarVisible": "_Puck--leftSideBarVisible_u70b9_40", "Puck--rightSideBarVisible": "_Puck--rightSideBarVisible_u70b9_46", "Puck-mounted": "_Puck-mounted_u70b9_59", "Puck-header": "_Puck-header_u70b9_100", "Puck-headerInner": "_Puck-headerInner_u70b9_109", "Puck-headerToggle": "_Puck-headerToggle_u70b9_119", "Puck-rightSideBarToggle": "_Puck-rightSideBarToggle_u70b9_126", "Puck-leftSideBarToggle": "_Puck-leftSideBarToggle_u70b9_127", "Puck-headerTitle": "_Puck-headerTitle_u70b9_131", "Puck-headerPath": "_Puck-headerPath_u70b9_135", "Puck-headerTools": "_Puck-headerTools_u70b9_142", "Puck-menuButton": "_Puck-menuButton_u70b9_148", "Puck--menuOpen": "_Puck--menuOpen_u70b9_153", "Puck-leftSideBar": "_Puck-leftSideBar_u70b9_127", "Puck-rightSideBar": "_Puck-rightSideBar_u70b9_126", "Puck-portal": "_Puck-portal_u70b9_181" };
 
 // components/Puck/components/Fields/index.tsx
 init_react_import();
@@ -31341,7 +31356,7 @@ init_react_import();
 var styles_module_default9 = { "Input": "_Input_1qi5b_1", "Input-label": "_Input-label_1qi5b_26", "Input-labelIcon": "_Input-labelIcon_1qi5b_34", "Input-disabledIcon": "_Input-disabledIcon_1qi5b_41", "Input-input": "_Input-input_1qi5b_46", "Input--readOnly": "_Input--readOnly_1qi5b_90", "Input-radioGroupItems": "_Input-radioGroupItems_1qi5b_101", "Input-radio": "_Input-radio_1qi5b_101", "Input-radioInner": "_Input-radioInner_1qi5b_118", "Input-radioInput": "_Input-radioInput_1qi5b_163" };
 
 // components/InputOrGroup/index.tsx
-var import_react19 = require("react");
+var import_react18 = require("react");
 
 // components/InputOrGroup/fields/index.tsx
 init_react_import();
@@ -31351,10 +31366,10 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css#css-module
 init_react_import();
-var styles_module_default10 = { "ArrayField": "_ArrayField_1txra_5", "ArrayField--isDraggingFrom": "_ArrayField--isDraggingFrom_1txra_13", "ArrayField-addButton": "_ArrayField-addButton_1txra_17", "ArrayField--hasItems": "_ArrayField--hasItems_1txra_32", "ArrayFieldItem": "_ArrayFieldItem_1txra_61", "ArrayFieldItem--isDragging": "_ArrayFieldItem--isDragging_1txra_69", "ArrayFieldItem--isExpanded": "_ArrayFieldItem--isExpanded_1txra_74", "ArrayFieldItem-summary": "_ArrayFieldItem-summary_1txra_84", "ArrayFieldItem--readOnly": "_ArrayFieldItem--readOnly_1txra_108", "ArrayFieldItem-body": "_ArrayFieldItem-body_1txra_142", "ArrayFieldItem-fieldset": "_ArrayFieldItem-fieldset_1txra_150", "ArrayFieldItem-rhs": "_ArrayFieldItem-rhs_1txra_157", "ArrayFieldItem-actions": "_ArrayFieldItem-actions_1txra_163" };
+var styles_module_default10 = { "ArrayField": "_ArrayField_1lr58_5", "ArrayField--isDraggingFrom": "_ArrayField--isDraggingFrom_1lr58_13", "ArrayField-addButton": "_ArrayField-addButton_1lr58_18", "ArrayField--hasItems": "_ArrayField--hasItems_1lr58_33", "ArrayFieldItem": "_ArrayFieldItem_1lr58_63", "ArrayFieldItem--isDragging": "_ArrayFieldItem--isDragging_1lr58_71", "ArrayFieldItem--isExpanded": "_ArrayFieldItem--isExpanded_1lr58_81", "ArrayFieldItem-summary": "_ArrayFieldItem-summary_1lr58_97", "ArrayField--addDisabled": "_ArrayField--addDisabled_1lr58_128", "ArrayFieldItem-body": "_ArrayFieldItem-body_1lr58_164", "ArrayFieldItem-fieldset": "_ArrayFieldItem-fieldset_1lr58_173", "ArrayFieldItem-rhs": "_ArrayFieldItem-rhs_1lr58_180", "ArrayFieldItem-actions": "_ArrayFieldItem-actions_1lr58_186" };
 
 // components/InputOrGroup/fields/ArrayField/index.tsx
-var import_react15 = require("react");
+var import_react14 = require("react");
 
 // components/DragDropContext/index.tsx
 init_react_import();
@@ -31392,11 +31407,11 @@ var ArrayField = ({
     }),
     openId: ""
   };
-  const [localState, setLocalState] = (0, import_react15.useState)({ arrayState, value });
-  (0, import_react15.useEffect)(() => {
+  const [localState, setLocalState] = (0, import_react14.useState)({ arrayState, value });
+  (0, import_react14.useEffect)(() => {
     setLocalState({ arrayState, value });
   }, [value, state.ui.arrayState[id]]);
-  const mapArrayStateToUi = (0, import_react15.useCallback)(
+  const mapArrayStateToUi = (0, import_react14.useCallback)(
     (partialArrayState) => {
       return {
         arrayState: __spreadProps(__spreadValues({}, state.ui.arrayState), {
@@ -31406,13 +31421,13 @@ var ArrayField = ({
     },
     [arrayState]
   );
-  const getHighestIndex = (0, import_react15.useCallback)(() => {
+  const getHighestIndex = (0, import_react14.useCallback)(() => {
     return arrayState.items.reduce(
       (acc, item) => item._originalIndex > acc ? item._originalIndex : acc,
       -1
     );
   }, [arrayState]);
-  const regenerateArrayState = (0, import_react15.useCallback)(
+  const regenerateArrayState = (0, import_react14.useCallback)(
     (value2) => {
       let highestIndex = getHighestIndex();
       const newItems = Array.from(value2 || []).map((item, idx) => {
@@ -31431,13 +31446,16 @@ var ArrayField = ({
     },
     [arrayState]
   );
-  (0, import_react15.useEffect)(() => {
-    setUi(mapArrayStateToUi(arrayState));
+  (0, import_react14.useEffect)(() => {
+    if (arrayState.items.length > 0) {
+      setUi(mapArrayStateToUi(arrayState));
+    }
   }, []);
-  const [hovering, setHovering] = (0, import_react15.useState)(false);
+  const [hovering, setHovering] = (0, import_react14.useState)(false);
   if (field.type !== "array" || !field.arrayFields) {
     return null;
   }
+  const addDisabled = field.max !== void 0 && localState.arrayState.items.length >= field.max || readOnly;
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     FieldLabelInternal,
     {
@@ -31479,7 +31497,8 @@ var ArrayField = ({
                 ref: provided.innerRef,
                 className: getClassName10({
                   isDraggingFrom: !!snapshot.draggingFromThisWith,
-                  hasItems: Array.isArray(value) && value.length > 0
+                  hasItems: Array.isArray(value) && value.length > 0,
+                  addDisabled
                 }),
                 onMouseOver: (e) => {
                   e.stopPropagation();
@@ -31530,6 +31549,7 @@ var ArrayField = ({
                                   !readOnly && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: getClassNameItem2("actions"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: getClassNameItem2("action"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                                     IconButton,
                                     {
+                                      type: "button",
                                       disabled: field.min !== void 0 && field.min >= localState.arrayState.items.length,
                                       onClick: (e) => {
                                         e.stopPropagation();
@@ -31591,11 +31611,11 @@ var ArrayField = ({
                     );
                   }),
                   provided.placeholder,
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  !addDisabled && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     "button",
                     {
+                      type: "button",
                       className: getClassName10("addButton"),
-                      disabled: field.max !== void 0 && localState.arrayState.items.length >= field.max,
                       onClick: () => {
                         const existingValue = value || [];
                         const newValue = [
@@ -31668,11 +31688,11 @@ var DefaultField = ({
 
 // components/InputOrGroup/fields/ExternalField/index.tsx
 init_react_import();
-var import_react18 = require("react");
+var import_react17 = require("react");
 
 // components/ExternalInput/index.tsx
 init_react_import();
-var import_react17 = require("react");
+var import_react16 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css#css-module
 init_react_import();
@@ -31680,7 +31700,7 @@ var styles_module_default11 = { "ExternalInput-actions": "_ExternalInput-actions
 
 // components/Modal/index.tsx
 init_react_import();
-var import_react16 = require("react");
+var import_react15 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Modal/styles.module.css#css-module
 init_react_import();
@@ -31695,8 +31715,8 @@ var Modal = ({
   onClose,
   isOpen
 }) => {
-  const [rootEl, setRootEl] = (0, import_react16.useState)(null);
-  (0, import_react16.useEffect)(() => {
+  const [rootEl, setRootEl] = (0, import_react15.useState)(null);
+  (0, import_react15.useEffect)(() => {
     setRootEl(document.getElementById("puck-portal-root"));
   }, []);
   if (!rootEl) {
@@ -31733,16 +31753,16 @@ var ExternalInput = ({
     mapRow = (val) => val,
     filterFields
   } = field || {};
-  const [data, setData] = (0, import_react17.useState)([]);
-  const [isOpen, setOpen] = (0, import_react17.useState)(false);
-  const [isLoading, setIsLoading] = (0, import_react17.useState)(true);
+  const [data, setData] = (0, import_react16.useState)([]);
+  const [isOpen, setOpen] = (0, import_react16.useState)(false);
+  const [isLoading, setIsLoading] = (0, import_react16.useState)(true);
   const hasFilterFields = !!filterFields;
-  const [filters, setFilters] = (0, import_react17.useState)(field.initialFilters || {});
-  const [filtersToggled, setFiltersToggled] = (0, import_react17.useState)(hasFilterFields);
-  const mappedData = (0, import_react17.useMemo)(() => {
+  const [filters, setFilters] = (0, import_react16.useState)(field.initialFilters || {});
+  const [filtersToggled, setFiltersToggled] = (0, import_react16.useState)(hasFilterFields);
+  const mappedData = (0, import_react16.useMemo)(() => {
     return data.map(mapRow);
   }, [data]);
-  const keys = (0, import_react17.useMemo)(() => {
+  const keys = (0, import_react16.useMemo)(() => {
     const validKeys = /* @__PURE__ */ new Set();
     for (const item of mappedData) {
       for (const key of Object.keys(item)) {
@@ -31753,11 +31773,11 @@ var ExternalInput = ({
     }
     return Array.from(validKeys);
   }, [mappedData]);
-  const [searchQuery, setSearchQuery] = (0, import_react17.useState)(field.initialQuery || "");
-  const search = (0, import_react17.useCallback)(
+  const [searchQuery, setSearchQuery] = (0, import_react16.useState)(field.initialQuery || "");
+  const search = (0, import_react16.useCallback)(
     (query, filters2) => __async(void 0, null, function* () {
       setIsLoading(true);
-      const cacheKey = `${id}-${name}-${query}-${JSON.stringify(filters2)}`;
+      const cacheKey = `${id}-${query}-${JSON.stringify(filters2)}`;
       const listData = dataCache[cacheKey] || (yield field.fetchList({ query, filters: filters2 }));
       if (listData) {
         setData(listData);
@@ -31767,7 +31787,7 @@ var ExternalInput = ({
     }),
     [name, field]
   );
-  (0, import_react17.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     search(searchQuery, filters);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
@@ -31783,6 +31803,7 @@ var ExternalInput = ({
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "button",
             {
+              type: "button",
               onClick: () => setOpen(true),
               className: getClassName13("button"),
               children: value ? field.getItemSummary ? field.getItemSummary(value) : "External item" : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
@@ -31927,7 +31948,7 @@ var ExternalField = ({
   var _a, _b, _c;
   const validField = field;
   const deprecatedField = field;
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (deprecatedField.adaptor) {
       console.error(
         "Warning: The `adaptor` API is deprecated. Please use updated APIs on the `external` field instead. This will be a breaking change in a future release."
@@ -32202,7 +32223,7 @@ var FieldLabelInternal = ({
   readOnly
 }) => {
   const { overrides } = useAppContext();
-  const Wrapper = (0, import_react19.useMemo)(
+  const Wrapper = (0, import_react18.useMemo)(
     () => overrides.fieldLabel || FieldLabel,
     [overrides]
   );
@@ -32223,7 +32244,7 @@ var InputOrGroup = (_a) => {
   var _a2, _b2, _c, _d, _e, _f, _g, _h;
   const { overrides } = useAppContext();
   const { name, field, value, readOnly } = props;
-  const [localValue, setLocalValue] = (0, import_react19.useState)(value);
+  const [localValue, setLocalValue] = (0, import_react18.useState)(value);
   const onChangeDb = (0, import_use_debounce2.useDebouncedCallback)(
     (val, ui) => {
       onChange(val, ui);
@@ -32231,11 +32252,11 @@ var InputOrGroup = (_a) => {
     50,
     { leading: true }
   );
-  const onChangeLocal = (0, import_react19.useCallback)((val, ui) => {
+  const onChangeLocal = (0, import_react18.useCallback)((val, ui) => {
     setLocalValue(val);
     onChangeDb(val, ui);
   }, []);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     setLocalValue(value);
   }, [value]);
   const localProps = {
@@ -32283,7 +32304,7 @@ init_react_import();
 var styles_module_default14 = { "PuckFields": "_PuckFields_17k3p_1", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_17k3p_6" };
 
 // components/Puck/components/Fields/index.tsx
-var import_react20 = require("react");
+var import_react19 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var getClassName19 = get_class_name_factory_default("PuckFields", styles_module_default14);
 var defaultPageFields = {
@@ -32315,7 +32336,7 @@ var Fields = () => {
   const fields = selectedItem ? ((_b = config.components[selectedItem.type]) == null ? void 0 : _b.fields) || {} : rootFields;
   const isLoading = selectedItem ? (_c = componentState[selectedItem == null ? void 0 : selectedItem.props.id]) == null ? void 0 : _c.loading : (_d = componentState["puck-root"]) == null ? void 0 : _d.loading;
   const rootProps = data.root.props || data.root;
-  const Wrapper = (0, import_react20.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
+  const Wrapper = (0, import_react19.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "form",
     {
@@ -32430,7 +32451,7 @@ init_react_import();
 
 // lib/use-component-list.tsx
 init_react_import();
-var import_react21 = require("react");
+var import_react20 = require("react");
 
 // components/ComponentList/index.tsx
 init_react_import();
@@ -32495,8 +32516,8 @@ ComponentList.Item = ComponentListItem;
 // lib/use-component-list.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var useComponentList = (config, ui) => {
-  const [componentList, setComponentList] = (0, import_react21.useState)();
-  (0, import_react21.useEffect)(() => {
+  const [componentList, setComponentList] = (0, import_react20.useState)();
+  (0, import_react20.useEffect)(() => {
     var _a, _b, _c;
     if (Object.keys(ui.componentList).length > 0) {
       const matchedComponents = [];
@@ -32563,18 +32584,18 @@ var useComponentList = (config, ui) => {
 };
 
 // components/Puck/components/Components/index.tsx
-var import_react22 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var Components = () => {
   const { config, state, overrides } = useAppContext();
   const componentList = useComponentList(config, state.ui);
-  const Wrapper = (0, import_react22.useMemo)(() => overrides.components || "div", [overrides]);
+  const Wrapper = (0, import_react21.useMemo)(() => overrides.components || "div", [overrides]);
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ComponentList, { id: "all" }) });
 };
 
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-var import_react23 = require("react");
+var import_react22 = require("react");
 var import_auto_frame_component = __toESM(require("@measured/auto-frame-component"));
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css#css-module
@@ -32586,15 +32607,20 @@ var import_jsx_runtime29 = require("react/jsx-runtime");
 var getClassName21 = get_class_name_factory_default("PuckPreview", styles_module_default16);
 var Preview = ({ id = "puck-preview" }) => {
   const { config, dispatch, state, setStatus, iframe } = useAppContext();
-  const Page = (0, import_react23.useCallback)(
+  const Page = (0, import_react22.useCallback)(
     (pageProps) => {
       var _a, _b;
-      return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadProps(__spreadValues({}, pageProps), { editMode: true })) : pageProps.children;
+      return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadProps(__spreadValues({
+        id: "puck-root"
+      }, pageProps), {
+        editMode: true,
+        puck: { renderDropZone: DropZone }
+      })) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: pageProps.children });
     },
     [config.root]
   );
   const rootProps = state.data.root.props || state.data.root;
-  const ref = (0, import_react23.useRef)(null);
+  const ref = (0, import_react22.useRef)(null);
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "div",
     {
@@ -32663,7 +32689,7 @@ var scrollIntoView = (el) => {
 };
 
 // components/LayerTree/index.tsx
-var import_react24 = require("react");
+var import_react23 = require("react");
 
 // lib/is-child-of-zone.ts
 init_react_import();
@@ -32690,8 +32716,7 @@ var LayerTree = ({
   label
 }) => {
   const zones = data.zones || {};
-  const ctx = (0, import_react24.useContext)(dropZoneContext);
-  const frame = useFrame();
+  const ctx = (0, import_react23.useContext)(dropZoneContext);
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: getClassName22("zoneTitle"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassName22("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Layers, { size: "16" }) }),
@@ -32739,6 +32764,7 @@ var LayerTree = ({
                       zone
                     });
                     const id = zoneContent[i].props.id;
+                    const frame = getFrame();
                     scrollIntoView(
                       frame == null ? void 0 : frame.querySelector(
                         `[data-rfd-drag-handle-draggable-id="draggable-${id}"]`
@@ -32793,13 +32819,13 @@ var LayerTree = ({
 };
 
 // components/Puck/components/Outline/index.tsx
-var import_react25 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var Outline = () => {
   const { dispatch, state, overrides, config } = useAppContext();
   const { data, ui } = state;
   const { itemSelector } = ui;
-  const setItemSelector = (0, import_react25.useCallback)(
+  const setItemSelector = (0, import_react24.useCallback)(
     (newItemSelector) => {
       dispatch({
         type: "setUi",
@@ -32808,7 +32834,7 @@ var Outline = () => {
     },
     []
   );
-  const Wrapper = (0, import_react25.useMemo)(() => overrides.outline || "div", [overrides]);
+  const Wrapper = (0, import_react24.useMemo)(() => overrides.outline || "div", [overrides]);
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
     (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       LayerTree,
@@ -32908,12 +32934,12 @@ function usePuckHistory({
 
 // lib/use-history-store.ts
 init_react_import();
-var import_react26 = require("react");
+var import_react25 = require("react");
 var import_use_debounce3 = require("use-debounce");
 var EMPTY_HISTORY_INDEX = -1;
 function useHistoryStore() {
-  const [histories, setHistories] = (0, import_react26.useState)([]);
-  const [index, setIndex] = (0, import_react26.useState)(EMPTY_HISTORY_INDEX);
+  const [histories, setHistories] = (0, import_react25.useState)([]);
+  const [index, setIndex] = (0, import_react25.useState)(EMPTY_HISTORY_INDEX);
   const hasPast = index > EMPTY_HISTORY_INDEX;
   const hasFuture = index < histories.length - 1;
   const currentHistory = histories[index];
@@ -33073,15 +33099,15 @@ var getBox = function getBox2(el) {
 };
 
 // components/Puck/components/Canvas/index.tsx
-var import_react28 = require("react");
+var import_react27 = require("react");
 
 // components/ViewportControls/index.tsx
 init_react_import();
-var import_react27 = require("react");
+var import_react26 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
 init_react_import();
-var styles_module_default18 = { "ViewportControls": "_ViewportControls_14bhf_1", "ViewportControls-divider": "_ViewportControls-divider_14bhf_15", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_14bhf_21", "ViewportButton--isActive": "_ViewportButton--isActive_14bhf_33", "ViewportButton-inner": "_ViewportButton-inner_14bhf_33" };
+var styles_module_default18 = { "ViewportControls": "_ViewportControls_3zdvn_1", "ViewportControls-divider": "_ViewportControls-divider_3zdvn_15", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_3zdvn_21", "ViewportButton--isActive": "_ViewportButton--isActive_3zdvn_33", "ViewportButton-inner": "_ViewportButton-inner_3zdvn_33" };
 
 // components/ViewportControls/index.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
@@ -33100,8 +33126,8 @@ var ViewportButton = ({
   onClick
 }) => {
   const { state } = useAppContext();
-  const [isActive, setIsActive] = (0, import_react27.useState)(false);
-  (0, import_react27.useEffect)(() => {
+  const [isActive, setIsActive] = (0, import_react26.useState)(false);
+  (0, import_react26.useEffect)(() => {
     setIsActive(width === state.ui.viewports.current.width);
   }, [width, state.ui.viewports.current.width]);
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
@@ -33136,7 +33162,7 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
-  const zoomOptions = (0, import_react27.useMemo)(
+  const zoomOptions = (0, import_react26.useMemo)(
     () => [
       ...defaultZoomOptions,
       ...defaultsContainAutoZoom ? [] : [
@@ -33219,7 +33245,7 @@ var ViewportControls = ({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css#css-module
 init_react_import();
-var styles_module_default19 = { "PuckCanvas": "_PuckCanvas_1i5ph_1", "PuckCanvas-controls": "_PuckCanvas-controls_1i5ph_16", "PuckCanvas-inner": "_PuckCanvas-inner_1i5ph_21", "PuckCanvas-root": "_PuckCanvas-root_1i5ph_32", "PuckCanvas--ready": "_PuckCanvas--ready_1i5ph_56" };
+var styles_module_default19 = { "PuckCanvas": "_PuckCanvas_6zd4y_1", "PuckCanvas-controls": "_PuckCanvas-controls_6zd4y_16", "PuckCanvas-inner": "_PuckCanvas-inner_6zd4y_21", "PuckCanvas-root": "_PuckCanvas-root_6zd4y_32", "PuckCanvas--ready": "_PuckCanvas--ready_6zd4y_56" };
 
 // lib/get-zoom-config.ts
 init_react_import();
@@ -33259,17 +33285,17 @@ var Canvas = () => {
   const { status, iframe } = useAppContext();
   const { dispatch, state, overrides, setUi, zoomConfig, setZoomConfig } = useAppContext();
   const { ui } = state;
-  const frameRef = (0, import_react28.useRef)(null);
-  const [showTransition, setShowTransition] = (0, import_react28.useState)(false);
-  const defaultRender = (0, import_react28.useMemo)(() => {
+  const frameRef = (0, import_react27.useRef)(null);
+  const [showTransition, setShowTransition] = (0, import_react27.useState)(false);
+  const defaultRender = (0, import_react27.useMemo)(() => {
     const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children });
     return PuckDefault;
   }, []);
-  const CustomPreview = (0, import_react28.useMemo)(
+  const CustomPreview = (0, import_react27.useMemo)(
     () => overrides.preview || defaultRender,
     [overrides]
   );
-  const getFrameDimensions = (0, import_react28.useCallback)(() => {
+  const getFrameDimensions = (0, import_react27.useCallback)(() => {
     if (frameRef.current) {
       const frame = frameRef.current;
       const box = getBox(frame);
@@ -33277,7 +33303,7 @@ var Canvas = () => {
     }
     return { width: 0, height: 0 };
   }, [frameRef]);
-  const resetAutoZoom = (0, import_react28.useCallback)(
+  const resetAutoZoom = (0, import_react27.useCallback)(
     (ui2 = state.ui) => {
       if (frameRef.current) {
         setZoomConfig(
@@ -33287,11 +33313,11 @@ var Canvas = () => {
     },
     [frameRef, zoomConfig, state.ui]
   );
-  (0, import_react28.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     setShowTransition(false);
     resetAutoZoom();
   }, [frameRef, ui.leftSideBarVisible, ui.rightSideBarVisible]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     const { height: frameHeight } = getFrameDimensions();
     if (ui.viewports.current.height === "auto") {
       setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
@@ -33299,7 +33325,7 @@ var Canvas = () => {
       }));
     }
   }, [zoomConfig.zoom]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     const observer = new ResizeObserver(() => {
       setShowTransition(false);
       resetAutoZoom();
@@ -33359,6 +33385,7 @@ var Canvas = () => {
               transition: showTransition ? "width 150ms ease-out, height 150ms ease-out, transform 150ms ease-out" : "",
               overflow: iframe.enabled ? void 0 : "auto"
             },
+            suppressHydrationWarning: true,
             children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Preview, {}) })
           }
         ) })
@@ -33390,14 +33417,20 @@ function Puck({
 }) {
   var _a;
   const historyStore = useHistoryStore();
-  const [reducer] = (0, import_react29.useState)(
+  const [reducer] = (0, import_react28.useState)(
     () => createReducer({ config, record: historyStore.record })
   );
-  const [initialAppState] = (0, import_react29.useState)(() => {
+  const [initialAppState] = (0, import_react28.useState)(() => {
     var _a2, _b, _c, _d;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
     if (typeof window !== "undefined") {
+      if (window.matchMedia("(max-width: 638px)").matches) {
+        clientUiState = __spreadProps(__spreadValues({}, clientUiState), {
+          leftSideBarVisible: false,
+          rightSideBarVisible: false
+        });
+      }
       const viewportWidth = window.innerWidth;
       const viewportDifferences = Object.entries(viewports).map(([key, value]) => ({
         key,
@@ -33405,17 +33438,14 @@ function Puck({
       })).sort((a, b) => a.diff > b.diff ? 1 : -1);
       const closestViewport = viewportDifferences[0].key;
       if (iframe.enabled) {
-        clientUiState = __spreadProps(__spreadValues({}, window.matchMedia("(min-width: 638px)").matches ? {} : {
-          leftSideBarVisible: false,
-          rightSideBarVisible: false
-        }), {
+        clientUiState = {
           viewports: __spreadProps(__spreadValues({}, initial.viewports), {
             current: __spreadProps(__spreadValues({}, initial.viewports.current), {
               height: ((_b = (_a2 = initialUi == null ? void 0 : initialUi.viewports) == null ? void 0 : _a2.current) == null ? void 0 : _b.height) || viewports[closestViewport].height || "auto",
               width: ((_d = (_c = initialUi == null ? void 0 : initialUi.viewports) == null ? void 0 : _c.current) == null ? void 0 : _d.width) || viewports[closestViewport].width
             })
           })
-        });
+        };
       }
     }
     return __spreadProps(__spreadValues({}, defaultAppState), {
@@ -33438,7 +33468,7 @@ function Puck({
       })
     });
   });
-  const [appState, dispatch] = (0, import_react29.useReducer)(
+  const [appState, dispatch] = (0, import_react28.useReducer)(
     reducer,
     flushZones(initialAppState)
   );
@@ -33449,9 +33479,9 @@ function Puck({
     config,
     dispatch
   );
-  const [menuOpen, setMenuOpen] = (0, import_react29.useState)(false);
+  const [menuOpen, setMenuOpen] = (0, import_react28.useState)(false);
   const { itemSelector, leftSideBarVisible, rightSideBarVisible } = ui;
-  const setItemSelector = (0, import_react29.useCallback)(
+  const setItemSelector = (0, import_react28.useCallback)(
     (newItemSelector) => {
       if (newItemSelector === itemSelector)
         return;
@@ -33464,21 +33494,21 @@ function Puck({
     [itemSelector]
   );
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
-  (0, import_react29.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (onChange)
       onChange(data);
   }, [data]);
   const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
-  const [draggedItem, setDraggedItem] = (0, import_react29.useState)();
+  const [draggedItem, setDraggedItem] = (0, import_react28.useState)();
   const rootProps = data.root.props || data.root;
-  (0, import_react29.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (Object.keys(data.root).length > 0 && !data.root.props) {
       console.error(
         "Warning: Defining props on `root` is deprecated. Please use `root.props`. This will be a breaking change in a future release."
       );
     }
   }, []);
-  const toggleSidebars = (0, import_react29.useCallback)(
+  const toggleSidebars = (0, import_react28.useCallback)(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -33492,7 +33522,7 @@ function Puck({
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  (0, import_react29.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -33515,11 +33545,11 @@ function Puck({
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  const defaultRender = (0, import_react29.useMemo)(() => {
+  const defaultRender = (0, import_react28.useMemo)(() => {
     const PuckDefault = ({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: children2 });
     return PuckDefault;
   }, []);
-  const defaultHeaderRender = (0, import_react29.useMemo)(() => {
+  const defaultHeaderRender = (0, import_react28.useMemo)(() => {
     if (renderHeader) {
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
@@ -33533,7 +33563,7 @@ function Puck({
     }
     return defaultRender;
   }, [renderHeader]);
-  const defaultHeaderActionsRender = (0, import_react29.useMemo)(() => {
+  const defaultHeaderActionsRender = (0, import_react28.useMemo)(() => {
     if (renderHeaderActions) {
       console.warn(
         "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
@@ -33546,214 +33576,223 @@ function Puck({
     }
     return defaultRender;
   }, [renderHeader]);
-  const loadedOverrides = (0, import_react29.useMemo)(() => {
+  const loadedOverrides = (0, import_react28.useMemo)(() => {
     return loadOverrides({ overrides, plugins });
   }, [plugins]);
-  const CustomPuck = (0, import_react29.useMemo)(
+  const CustomPuck = (0, import_react28.useMemo)(
     () => loadedOverrides.puck || defaultRender,
     [loadedOverrides]
   );
-  const CustomHeader = (0, import_react29.useMemo)(
+  const CustomHeader = (0, import_react28.useMemo)(
     () => loadedOverrides.header || defaultHeaderRender,
     [loadedOverrides]
   );
-  const CustomHeaderActions = (0, import_react29.useMemo)(
+  const CustomHeaderActions = (0, import_react28.useMemo)(
     () => loadedOverrides.headerActions || defaultHeaderActionsRender,
     [loadedOverrides]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "Puck", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-      AppProvider,
-      {
-        value: {
-          state: appState,
-          dispatch,
-          config,
-          componentState,
-          resolveData,
-          plugins,
-          overrides: loadedOverrides,
-          history,
-          viewports,
-          iframe
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-          DragDropContext,
-          {
-            onDragUpdate: (update) => {
-              setDraggedItem(__spreadValues(__spreadValues({}, draggedItem), update));
-              onDragStartOrUpdate(update);
-            },
-            onBeforeDragStart: (start) => {
-              onDragStartOrUpdate(start);
-              setItemSelector(null);
-              dispatch({ type: "setUi", ui: { isDragging: true } });
-            },
-            onDragEnd: (droppedItem) => {
-              setDraggedItem(void 0);
-              dispatch({ type: "setUi", ui: { isDragging: false } });
-              if (!droppedItem.destination) {
-                return;
-              }
-              if (droppedItem.source.droppableId.startsWith("component-list") && droppedItem.destination) {
-                const [_, componentType] = droppedItem.draggableId.split("::");
+  const [mounted, setMounted] = (0, import_react28.useState)(false);
+  (0, import_react28.useEffect)(() => {
+    setMounted(true);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "Puck", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    AppProvider,
+    {
+      value: {
+        state: appState,
+        dispatch,
+        config,
+        componentState,
+        resolveData,
+        plugins,
+        overrides: loadedOverrides,
+        history,
+        viewports,
+        iframe
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        DragDropContext,
+        {
+          onDragUpdate: (update) => {
+            setDraggedItem(__spreadValues(__spreadValues({}, draggedItem), update));
+            onDragStartOrUpdate(update);
+          },
+          onBeforeDragStart: (start) => {
+            onDragStartOrUpdate(start);
+            setItemSelector(null);
+            dispatch({ type: "setUi", ui: { isDragging: true } });
+          },
+          onDragEnd: (droppedItem) => {
+            setDraggedItem(void 0);
+            dispatch({ type: "setUi", ui: { isDragging: false } });
+            if (!droppedItem.destination) {
+              return;
+            }
+            if (droppedItem.source.droppableId.startsWith("component-list") && droppedItem.destination) {
+              const [_, componentType] = droppedItem.draggableId.split("::");
+              dispatch({
+                type: "insert",
+                componentType: componentType || droppedItem.draggableId,
+                destinationIndex: droppedItem.destination.index,
+                destinationZone: droppedItem.destination.droppableId
+              });
+              setItemSelector({
+                index: droppedItem.destination.index,
+                zone: droppedItem.destination.droppableId
+              });
+              return;
+            } else {
+              const { source, destination } = droppedItem;
+              if (source.droppableId === destination.droppableId) {
                 dispatch({
-                  type: "insert",
-                  componentType: componentType || droppedItem.draggableId,
-                  destinationIndex: droppedItem.destination.index,
-                  destinationZone: droppedItem.destination.droppableId
+                  type: "reorder",
+                  sourceIndex: source.index,
+                  destinationIndex: destination.index,
+                  destinationZone: destination.droppableId
                 });
-                setItemSelector({
-                  index: droppedItem.destination.index,
-                  zone: droppedItem.destination.droppableId
-                });
-                return;
               } else {
-                const { source, destination } = droppedItem;
-                if (source.droppableId === destination.droppableId) {
-                  dispatch({
-                    type: "reorder",
-                    sourceIndex: source.index,
-                    destinationIndex: destination.index,
-                    destinationZone: destination.droppableId
-                  });
-                } else {
-                  dispatch({
-                    type: "move",
-                    sourceZone: source.droppableId,
-                    sourceIndex: source.index,
-                    destinationIndex: destination.index,
-                    destinationZone: destination.droppableId
-                  });
-                }
-                setItemSelector({
-                  index: destination.index,
-                  zone: destination.droppableId
+                dispatch({
+                  type: "move",
+                  sourceZone: source.droppableId,
+                  sourceIndex: source.index,
+                  destinationIndex: destination.index,
+                  destinationZone: destination.droppableId
                 });
               }
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-              DropZoneProvider,
-              {
-                value: {
-                  data,
-                  itemSelector,
-                  setItemSelector,
-                  config,
-                  dispatch,
-                  draggedItem,
-                  placeholderStyle,
-                  mode: "edit",
-                  areaId: "root"
-                },
-                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomPuck, { children: children || /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-                  "div",
-                  {
-                    className: getClassName25({
-                      leftSideBarVisible,
-                      menuOpen,
-                      rightSideBarVisible
-                    }),
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                        CustomHeader,
-                        {
-                          actions: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomHeaderActions, {}),
-                            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                              Button,
+              setItemSelector({
+                index: destination.index,
+                zone: destination.droppableId
+              });
+            }
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            DropZoneProvider,
+            {
+              value: {
+                data,
+                itemSelector,
+                setItemSelector,
+                config,
+                dispatch,
+                draggedItem,
+                placeholderStyle,
+                mode: "edit",
+                areaId: "root"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomPuck, { children: children || /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+                "div",
+                {
+                  className: getClassName25({
+                    leftSideBarVisible,
+                    menuOpen,
+                    mounted,
+                    rightSideBarVisible
+                  }),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                      CustomHeader,
+                      {
+                        actions: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomHeaderActions, {}),
+                          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                            Button,
+                            {
+                              onClick: () => {
+                                onPublish && onPublish(data);
+                              },
+                              icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Globe, { size: "14px" }),
+                              children: "Publish"
+                            }
+                          )
+                        ] }),
+                        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("header", { className: getClassName25("header"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerInner"), children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerToggle"), children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("leftSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                              IconButton,
                               {
                                 onClick: () => {
-                                  onPublish && onPublish(data);
+                                  toggleSidebars("left");
                                 },
-                                icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Globe, { size: "14px" }),
-                                children: "Publish"
+                                title: "Toggle left sidebar",
+                                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PanelLeft, { focusable: "false" })
                               }
-                            )
+                            ) }),
+                            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                              IconButton,
+                              {
+                                onClick: () => {
+                                  toggleSidebars("right");
+                                },
+                                title: "Toggle right sidebar",
+                                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PanelRight, { focusable: "false" })
+                              }
+                            ) })
                           ] }),
-                          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("header", { className: getClassName25("header"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerInner"), children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerToggle"), children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("leftSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                                IconButton,
-                                {
-                                  onClick: () => {
-                                    toggleSidebars("left");
-                                  },
-                                  title: "Toggle left sidebar",
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PanelLeft, { focusable: "false" })
-                                }
-                              ) }),
-                              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                                IconButton,
-                                {
-                                  onClick: () => {
-                                    toggleSidebars("right");
-                                  },
-                                  title: "Toggle right sidebar",
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PanelRight, { focusable: "false" })
-                                }
-                              ) })
-                            ] }),
-                            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("headerTitle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Heading, { rank: 2, size: "xs", children: [
-                              headerTitle || rootProps.title || "Page",
-                              headerPath && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-                                " ",
-                                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("code", { className: getClassName25("headerPath"), children: headerPath })
-                              ] })
-                            ] }) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerTools"), children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                                IconButton,
-                                {
-                                  onClick: () => {
-                                    return setMenuOpen(!menuOpen);
-                                  },
-                                  title: "Toggle menu bar",
-                                  children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronDown, { focusable: "false" })
-                                }
-                              ) }),
-                              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                                MenuBar,
-                                {
-                                  appState,
-                                  data,
-                                  dispatch,
-                                  onPublish,
-                                  menuOpen,
-                                  renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomHeaderActions, {}),
-                                  setMenuOpen
-                                }
-                              )
+                          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("headerTitle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Heading, { rank: 2, size: "xs", children: [
+                            headerTitle || rootProps.title || "Page",
+                            headerPath && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+                              " ",
+                              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("code", { className: getClassName25("headerPath"), children: headerPath })
                             ] })
-                          ] }) })
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("leftSideBar"), children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Components, {}) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Outline, {}) })
-                      ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Canvas, {}),
-                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("rightSideBar"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                        SidebarSection,
-                        {
-                          noPadding: true,
-                          noBorderTop: true,
-                          showBreadcrumbs: true,
-                          title: selectedItem ? (_a = config.components[selectedItem.type]["label"]) != null ? _a : selectedItem.type : "Page",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Fields, {})
-                        }
-                      ) })
-                    ]
-                  }
-                ) })
-              }
-            )
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { id: "puck-portal-root" })
-  ] });
+                          ] }) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerTools"), children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                              IconButton,
+                              {
+                                onClick: () => {
+                                  return setMenuOpen(!menuOpen);
+                                },
+                                title: "Toggle menu bar",
+                                children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronDown, { focusable: "false" })
+                              }
+                            ) }),
+                            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                              MenuBar,
+                              {
+                                appState,
+                                data,
+                                dispatch,
+                                onPublish,
+                                menuOpen,
+                                renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomHeaderActions, {}),
+                                setMenuOpen
+                              }
+                            )
+                          ] })
+                        ] }) })
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("leftSideBar"), children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Components, {}) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Outline, {}) })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Canvas, {}),
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("rightSideBar"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                      SidebarSection,
+                      {
+                        noPadding: true,
+                        noBorderTop: true,
+                        showBreadcrumbs: true,
+                        title: selectedItem ? (_a = config.components[selectedItem.type]["label"]) != null ? _a : selectedItem.type : "Page",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Fields, {})
+                      }
+                    ) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                      "div",
+                      {
+                        id: "puck-portal-root",
+                        className: getClassName25("portal")
+                      }
+                    )
+                  ]
+                }
+              ) })
+            }
+          )
+        }
+      )
+    }
+  ) });
 }
 Puck.Components = Components;
 Puck.Fields = Fields;
@@ -33763,7 +33802,10 @@ Puck.Preview = Preview;
 // components/Render/index.tsx
 init_react_import();
 var import_jsx_runtime35 = require("react/jsx-runtime");
-function Render({ config, data }) {
+function Render({
+  config,
+  data
+}) {
   var _a;
   const rootProps = data.root.props || data.root;
   const title = (rootProps == null ? void 0 : rootProps.title) || "";
@@ -33842,37 +33884,51 @@ function transformProps(data, propTransforms) {
 
 // lib/resolve-all-data.ts
 init_react_import();
-var resolveAllData = (data, config, onResolveStart, onResolveEnd) => __async(void 0, null, function* () {
-  const dynamicRoot = yield resolveRootData(data, config);
-  const { zones = {} } = data;
-  const zoneKeys = Object.keys(zones);
-  const resolvedZones = {};
-  for (let i = 0; i < zoneKeys.length; i++) {
-    const zoneKey = zoneKeys[i];
-    resolvedZones[zoneKey] = yield resolveAllComponentData(
-      zones[zoneKey],
-      config,
-      onResolveStart,
-      onResolveEnd
-    );
-  }
-  return __spreadProps(__spreadValues({}, data), {
-    root: dynamicRoot,
-    content: yield resolveAllComponentData(
-      data.content,
-      config,
-      onResolveStart,
-      onResolveEnd
-    ),
-    zones: resolvedZones
+function resolveAllData(data, config, onResolveStart, onResolveEnd) {
+  return __async(this, null, function* () {
+    const dynamicRoot = yield resolveRootData(data, config);
+    const { zones = {} } = data;
+    const zoneKeys = Object.keys(zones);
+    const resolvedZones = {};
+    for (let i = 0; i < zoneKeys.length; i++) {
+      const zoneKey = zoneKeys[i];
+      resolvedZones[zoneKey] = yield resolveAllComponentData(
+        zones[zoneKey],
+        config,
+        onResolveStart,
+        onResolveEnd
+      );
+    }
+    return __spreadProps(__spreadValues({}, data), {
+      root: dynamicRoot,
+      content: yield resolveAllComponentData(
+        data.content,
+        config,
+        onResolveStart,
+        onResolveEnd
+      ),
+      zones: resolvedZones
+    });
   });
-});
+}
 
 // lib/use-puck.ts
 init_react_import();
 var usePuck = () => {
-  const { state: appState, config, history, dispatch } = useAppContext();
-  return { appState, config, dispatch, history };
+  const {
+    state: appState,
+    config,
+    history,
+    dispatch,
+    selectedItem
+  } = useAppContext();
+  return {
+    appState,
+    config,
+    dispatch,
+    history,
+    selectedItem: selectedItem || null
+  };
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {