@measured/puck 0.14.0-canary.70cf177 → 0.14.0-canary.83be956

package/dist/index.js

@@ -8084,7 +8084,7 @@ var require_react_dom_development = __commonJS({
         var HostPortal = 4;
         var HostComponent = 5;
         var HostText = 6;
-        var Fragment14 = 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 Fragment14:
+            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 !== Fragment14) {
+            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 === Fragment14) {
+                  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 Fragment14:
+            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 Fragment14:
+            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(Fragment14, 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();
@@ -29343,12 +29343,14 @@ var defaultContext = {
   history: {},
   viewports: defaultViewports,
   zoomConfig: {
-    autoZoom: 0,
+    autoZoom: 1,
     rootHeight: 0,
     zoom: 1
   },
   setZoomConfig: () => null,
-  status: "LOADING"
+  status: "LOADING",
+  setStatus: () => null,
+  iframe: {}
 };
 var appContext = (0, import_react3.createContext)(defaultContext);
 var AppProvider = ({
@@ -29358,12 +29360,12 @@ var AppProvider = ({
   const [zoomConfig, setZoomConfig] = (0, import_react3.useState)(defaultContext.zoomConfig);
   const [status, setStatus] = (0, import_react3.useState)("LOADING");
   (0, import_react3.useEffect)(() => {
-    setStatus("READY");
+    setStatus("MOUNTED");
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     appContext.Provider,
     {
-      value: __spreadProps(__spreadValues({}, value), { zoomConfig, setZoomConfig, status }),
+      value: __spreadProps(__spreadValues({}, value), { zoomConfig, setZoomConfig, status, setStatus }),
       children
     }
   );
@@ -29400,10 +29402,10 @@ var defaultSnapshot = {
   draggingFromThisWith: null,
   isUsingPlaceholder: false
 };
-var DefaultDroppable = ({ children }) => children(defaultProvided, defaultSnapshot);
+var DefaultDroppable = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: children(defaultProvided, defaultSnapshot) });
 var Droppable = (props) => {
   const { status } = useAppContext();
-  const El = status === "READY" ? import_dnd.Droppable : DefaultDroppable;
+  const El = status !== "LOADING" ? import_dnd.Droppable : DefaultDroppable;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(El, __spreadValues({}, props));
 };
 
@@ -29438,7 +29440,7 @@ var defaultRubric = {
   type: "",
   source: { droppableId: "", index: 0 }
 };
-var DefaultDraggable = ({ children }) => children(defaultProvided2, defaultSnapshot2, defaultRubric);
+var DefaultDraggable = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: children(defaultProvided2, defaultSnapshot2, defaultRubric) });
 var Draggable = ({
   className,
   children,
@@ -29449,7 +29451,7 @@ var Draggable = ({
   isDragDisabled = false
 }) => {
   const { status } = useAppContext();
-  const El = status === "READY" ? import_dnd2.Draggable : DefaultDraggable;
+  const El = status !== "LOADING" ? import_dnd2.Draggable : DefaultDraggable;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(El, { draggableId: id, index, isDragDisabled, children: (provided, snapshot) => {
     var _a;
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
@@ -29587,7 +29589,7 @@ var import_dnd3 = require("@measured/dnd");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
 init_react_import();
-var styles_module_default3 = { "DraggableComponent": "_DraggableComponent_175tf_1", "DraggableComponent--isDragging": "_DraggableComponent--isDragging_175tf_11", "DraggableComponent-contents": "_DraggableComponent-contents_175tf_16", "DraggableComponent-overlay": "_DraggableComponent-overlay_175tf_29", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_175tf_49", "DraggableComponent--isLocked": "_DraggableComponent--isLocked_175tf_65", "DraggableComponent--forceHover": "_DraggableComponent--forceHover_175tf_71", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_175tf_76", "DraggableComponent--indicativeHover": "_DraggableComponent--indicativeHover_175tf_81", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_175tf_97", "DraggableComponent-actions": "_DraggableComponent-actions_175tf_97", "DraggableComponent-actionsLabel": "_DraggableComponent-actionsLabel_175tf_127", "DraggableComponent-action": "_DraggableComponent-action_175tf_97" };
+var styles_module_default3 = { "DraggableComponent": "_DraggableComponent_1542z_1", "DraggableComponent--isDragging": "_DraggableComponent--isDragging_1542z_11", "DraggableComponent-contents": "_DraggableComponent-contents_1542z_16", "DraggableComponent-overlay": "_DraggableComponent-overlay_1542z_29", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_1542z_49", "DraggableComponent--isLocked": "_DraggableComponent--isLocked_1542z_65", "DraggableComponent--forceHover": "_DraggableComponent--forceHover_1542z_71", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_1542z_76", "DraggableComponent--indicativeHover": "_DraggableComponent--indicativeHover_1542z_81", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_1542z_97", "DraggableComponent-actions": "_DraggableComponent-actions_1542z_97", "DraggableComponent-actionsLabel": "_DraggableComponent-actionsLabel_1542z_127", "DraggableComponent-action": "_DraggableComponent-action_1542z_97" };
 
 // ../../node_modules/lucide-react/dist/esm/lucide-react.js
 init_react_import();
@@ -29877,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");
@@ -29910,62 +29924,78 @@ var DraggableComponent = ({
   const { zoomConfig } = useAppContext();
   const isModifierHeld = useModifierHeld("Alt");
   const { status } = useAppContext();
-  const El = status === "READY" ? import_dnd3.Draggable : DefaultDraggable;
+  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
@@ -30473,21 +30503,33 @@ var import_react28 = require("react");
 // lib/use-placeholder-style.ts
 init_react_import();
 var import_react11 = require("react");
+
+// lib/get-frame.ts
+init_react_import();
+var getFrame = () => {
+  let frame = document.querySelector("#preview-frame");
+  if ((frame == null ? void 0 : frame.tagName) === "IFRAME") {
+    frame = frame.contentDocument;
+  }
+  return frame;
+};
+
+// lib/use-placeholder-style.ts
 var usePlaceholderStyle = () => {
   const queryAttr = "data-rfd-drag-handle-draggable-id";
   const [placeholderStyle, setPlaceholderStyle] = (0, import_react11.useState)();
   const onDragStartOrUpdate = (draggedItem) => {
-    var _a, _b, _c;
+    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 iframe = document.querySelector(`#preview-iframe`);
-    const draggedDOM = document.querySelector(domQuery) || ((_a = iframe == null ? void 0 : iframe.contentWindow) == null ? void 0 : _a.document.querySelector(domQuery));
+    const frame = getFrame();
+    const draggedDOM = document.querySelector(domQuery) || (frame == null ? void 0 : frame.querySelector(domQuery));
     if (!draggedDOM) {
       return;
     }
-    const targetListElement = (_b = iframe == null ? void 0 : iframe.contentWindow) == null ? void 0 : _b.document.querySelector(
+    const targetListElement = frame == null ? void 0 : frame.querySelector(
       `[data-rfd-droppable-id='${droppableId}']`
     );
     const { clientHeight } = draggedDOM;
@@ -30495,7 +30537,7 @@ var usePlaceholderStyle = () => {
       return;
     }
     let clientY = 0;
-    const isSameDroppable = draggedItem.source.droppableId === ((_c = draggedItem.destination) == null ? void 0 : _c.droppableId);
+    const isSameDroppable = draggedItem.source.droppableId === ((_a = draggedItem.destination) == null ? void 0 : _a.droppableId);
     if (destinationIndex > 0) {
       const end = destinationIndex > draggedItem.source.index && isSameDroppable ? destinationIndex + 1 : destinationIndex;
       const children = Array.from(targetListElement.children).filter(
@@ -31300,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_3qn7l_19", "Puck--leftSideBarVisible": "_Puck--leftSideBarVisible_3qn7l_36", "Puck--rightSideBarVisible": "_Puck--rightSideBarVisible_3qn7l_42", "Puck-header": "_Puck-header_3qn7l_96", "Puck-headerInner": "_Puck-headerInner_3qn7l_105", "Puck-headerToggle": "_Puck-headerToggle_3qn7l_115", "Puck-rightSideBarToggle": "_Puck-rightSideBarToggle_3qn7l_122", "Puck-leftSideBarToggle": "_Puck-leftSideBarToggle_3qn7l_123", "Puck-headerTitle": "_Puck-headerTitle_3qn7l_127", "Puck-headerPath": "_Puck-headerPath_3qn7l_131", "Puck-headerTools": "_Puck-headerTools_3qn7l_138", "Puck-menuButton": "_Puck-menuButton_3qn7l_144", "Puck--menuOpen": "_Puck--menuOpen_3qn7l_149", "Puck-leftSideBar": "_Puck-leftSideBar_3qn7l_123", "Puck-frame": "_Puck-frame_3qn7l_168", "Puck-root": "_Puck-root_3qn7l_179", "Puck-rightSideBar": "_Puck-rightSideBar_3qn7l_122", "Puck-canvas": "_Puck-canvas_3qn7l_211", "Puck-canvasControls": "_Puck-canvasControls_3qn7l_226" };
+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();
@@ -31324,7 +31366,7 @@ 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_react14 = require("react");
@@ -31333,10 +31375,10 @@ var import_react14 = require("react");
 init_react_import();
 var import_dnd4 = require("@measured/dnd");
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var DefaultDragDropContext = ({ children }) => children;
+var DefaultDragDropContext = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children });
 var DragDropContext = (props) => {
   const { status } = useAppContext();
-  const El = status === "READY" ? import_dnd4.DragDropContext : DefaultDragDropContext;
+  const El = status !== "LOADING" ? import_dnd4.DragDropContext : DefaultDragDropContext;
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(El, __spreadValues({}, props));
 };
 
@@ -31405,12 +31447,15 @@ var ArrayField = ({
     [arrayState]
   );
   (0, import_react14.useEffect)(() => {
-    setUi(mapArrayStateToUi(arrayState));
+    if (arrayState.items.length > 0) {
+      setUi(mapArrayStateToUi(arrayState));
+    }
   }, []);
   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,
     {
@@ -31452,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();
@@ -31503,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();
@@ -31564,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 = [
@@ -31730,7 +31777,7 @@ var ExternalInput = ({
   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);
@@ -31756,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: [
@@ -32552,17 +32600,22 @@ var import_auto_frame_component = __toESM(require("@measured/auto-frame-componen
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css#css-module
 init_react_import();
-var styles_module_default16 = { "PuckPreview": "_PuckPreview_29rm6_1", "PuckPreview-iframe": "_PuckPreview-iframe_29rm6_5" };
+var styles_module_default16 = { "PuckPreview": "_PuckPreview_1mia0_1", "PuckPreview-frame": "_PuckPreview-frame_1mia0_5" };
 
 // components/Puck/components/Preview/index.tsx
 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 } = useAppContext();
+  const { config, dispatch, state, setStatus, iframe } = useAppContext();
   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]
   );
@@ -32576,16 +32629,19 @@ var Preview = ({ id = "puck-preview" }) => {
       onClick: () => {
         dispatch({ type: "setUi", ui: __spreadProps(__spreadValues({}, state.ui), { itemSelector: null }) });
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      children: iframe.enabled ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         import_auto_frame_component.default,
         {
-          id: "preview-iframe",
-          className: getClassName21("iframe"),
+          id: "preview-frame",
+          className: getClassName21("frame"),
           "data-rfd-iframe": true,
           ref,
+          onStylesLoaded: () => {
+            setStatus("READY");
+          },
           children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Page, __spreadProps(__spreadValues({ dispatch, state }, rootProps), { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DropZone, { zone: rootDroppableId }) }))
         }
-      )
+      ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { id: "preview-frame", className: getClassName21("frame"), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Page, __spreadProps(__spreadValues({ dispatch, state }, rootProps), { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DropZone, { zone: rootDroppableId }) })) })
     }
   );
 };
@@ -32708,14 +32764,9 @@ var LayerTree = ({
                       zone
                     });
                     const id = zoneContent[i].props.id;
-                    const iframe = document.querySelector("#preview-iframe");
-                    if (!(iframe == null ? void 0 : iframe.contentDocument)) {
-                      throw new Error(
-                        `Preview iframe could not be found when trying to scroll to item ${id}`
-                      );
-                    }
+                    const frame = getFrame();
                     scrollIntoView(
-                      iframe.contentDocument.querySelector(
+                      frame == null ? void 0 : frame.querySelector(
                         `[data-rfd-drag-handle-draggable-id="draggable-${id}"]`
                       )
                     );
@@ -33056,7 +33107,7 @@ 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");
@@ -33075,7 +33126,10 @@ var ViewportButton = ({
   onClick
 }) => {
   const { state } = useAppContext();
-  const isActive = width === state.ui.viewports.current.width;
+  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)(
     IconButton,
     {
@@ -33104,8 +33158,7 @@ var ViewportControls = ({
   onViewportChange,
   onZoom
 }) => {
-  const { state, viewports } = useAppContext();
-  const viewport = state.ui.viewports.current;
+  const { viewports } = useAppContext();
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
@@ -33122,14 +33175,14 @@ var ViewportControls = ({
     [autoZoom]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: getClassName23(), children: [
-    viewports.map((viewport2, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    viewports.map((viewport, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       ViewportButton,
       {
-        height: viewport2.height,
-        width: viewport2.width,
-        title: viewport2.label ? `Switch to ${viewport2.label} viewport` : "Switch viewport",
+        height: viewport.height,
+        width: viewport.width,
+        title: viewport.label ? `Switch to ${viewport.label} viewport` : "Switch viewport",
         onClick: onViewportChange,
-        children: typeof viewport2.icon === "string" ? icons[viewport2.icon] || viewport2.icon : viewport2.icon || icons.Smartphone
+        children: typeof viewport.icon === "string" ? icons[viewport.icon] || viewport.icon : viewport.icon || icons.Smartphone
       },
       i
     )),
@@ -33190,6 +33243,10 @@ 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_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();
 var RESET_ZOOM_SMALLER_THAN_FRAME = true;
@@ -33222,9 +33279,10 @@ var getZoomConfig = (uiViewport, frame, zoom) => {
 
 // components/Puck/components/Canvas/index.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var getClassName24 = get_class_name_factory_default("Puck", styles_module_default8);
+var getClassName24 = get_class_name_factory_default("PuckCanvas", styles_module_default19);
 var ZOOM_ON_CHANGE = true;
 var Canvas = () => {
+  const { status, iframe } = useAppContext();
   const { dispatch, state, overrides, setUi, zoomConfig, setZoomConfig } = useAppContext();
   const { ui } = state;
   const frameRef = (0, import_react27.useRef)(null);
@@ -33282,14 +33340,16 @@ var Canvas = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "div",
     {
-      className: getClassName24("canvas"),
+      className: getClassName24({
+        ready: status === "READY" || !iframe.enabled
+      }),
       onClick: () => dispatch({
         type: "setUi",
         ui: { itemSelector: null },
         recordHistory: true
       }),
       children: [
-        ui.viewports.controlsVisible && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName24("canvasControls"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName24("controls"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           ViewportControls,
           {
             autoZoom: zoomConfig.autoZoom,
@@ -33314,16 +33374,18 @@ var Canvas = () => {
             }
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName24("frame"), ref: frameRef, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName24("inner"), ref: frameRef, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "div",
           {
             className: getClassName24("root"),
             style: {
-              width: ui.viewports.current.width,
+              width: iframe.enabled ? ui.viewports.current.width : void 0,
               height: zoomConfig.rootHeight,
-              transform: `scale(${zoomConfig.zoom})`,
-              transition: showTransition ? "width 150ms ease-out, height 150ms ease-out, transform 150ms ease-out" : ""
+              transform: iframe.enabled ? `scale(${zoomConfig.zoom})` : void 0,
+              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, {}) })
           }
         ) })
@@ -33348,7 +33410,10 @@ function Puck({
   renderHeaderActions,
   headerTitle,
   headerPath,
-  viewports = defaultViewports
+  viewports = defaultViewports,
+  iframe = {
+    enabled: true
+  }
 }) {
   var _a;
   const historyStore = useHistoryStore();
@@ -33360,23 +33425,28 @@ function Puck({
     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,
         diff: Math.abs(viewportWidth - value.width)
       })).sort((a, b) => a.diff > b.diff ? 1 : -1);
       const closestViewport = viewportDifferences[0].key;
-      clientUiState = __spreadProps(__spreadValues({}, window.matchMedia("(min-width: 638px)").matches ? {} : {
-        leftSideBarVisible: false,
-        rightSideBarVisible: false
-      }), {
-        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
+      if (iframe.enabled) {
+        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), {
       data: initialData,
@@ -33521,198 +33591,208 @@ function Puck({
     () => 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
-        },
-        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
-                });
-                setItemSelector({
-                  index: droppedItem.destination.index,
-                  zone: droppedItem.destination.droppableId
+                  type: "reorder",
+                  sourceIndex: source.index,
+                  destinationIndex: destination.index,
+                  destinationZone: 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;
@@ -33722,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) || "";
@@ -33801,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 = {