@measured/puck 0.18.0-canary.b355ddd → 0.18.0-canary.beb05b5

package/dist/index.mjs

@@ -962,6 +962,7 @@ var defaultAppState = {
     itemSelector: null,
     componentList: {},
     isDragging: false,
+    previewMode: "edit",
     viewports: {
       current: {
         width: defaultViewports[0].width,
@@ -2333,7 +2334,7 @@ init_react_import();
 var styles_module_default10 = { "Drawer": "_Drawer_fkqfo_1", "Drawer-draggable": "_Drawer-draggable_fkqfo_8", "Drawer-draggableBg": "_Drawer-draggableBg_fkqfo_12", "Drawer-draggableFg": "_Drawer-draggableFg_fkqfo_21", "DrawerItem-draggable": "_DrawerItem-draggable_fkqfo_25", "DrawerItem--disabled": "_DrawerItem--disabled_fkqfo_38", "DrawerItem": "_DrawerItem_fkqfo_25", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_fkqfo_48", "DrawerItem-name": "_DrawerItem-name_fkqfo_66" };
 
 // components/Drawer/index.tsx
-import { useMemo as useMemo8, useState as useState18 } from "react";
+import { useMemo as useMemo8, useState as useState17 } from "react";
 
 // components/DragDropContext/index.tsx
 init_react_import();
@@ -2342,9 +2343,9 @@ import {
   createContext as createContext3,
   useCallback as useCallback9,
   useContext as useContext4,
-  useEffect as useEffect14,
+  useEffect as useEffect13,
   useRef as useRef5,
-  useState as useState17
+  useState as useState16
 } from "react";
 import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
 
@@ -2354,10 +2355,10 @@ import {
   forwardRef as forwardRef3,
   useCallback as useCallback8,
   useContext as useContext3,
-  useEffect as useEffect13,
+  useEffect as useEffect12,
   useMemo as useMemo7,
   useRef as useRef4,
-  useState as useState16
+  useState as useState15
 } from "react";
 
 // components/DraggableComponent/index.tsx
@@ -2365,42 +2366,16 @@ init_react_import();
 import {
   useCallback as useCallback6,
   useContext as useContext2,
-  useEffect as useEffect11,
+  useEffect as useEffect10,
   useMemo as useMemo5,
   useRef as useRef3,
-  useState as useState13
+  useState as useState12
 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
 init_react_import();
 var styles_module_default11 = { "DraggableComponent": "_DraggableComponent_1ukn8_1", "DraggableComponent-overlay": "_DraggableComponent-overlay_1ukn8_12", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_1ukn8_29", "DraggableComponent--hover": "_DraggableComponent--hover_1ukn8_45", "DraggableComponent--isLocked": "_DraggableComponent--isLocked_1ukn8_45", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_1ukn8_54", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_1ukn8_66", "DraggableComponent-actions": "_DraggableComponent-actions_1ukn8_66" };
 
-// lib/use-modifier-held.ts
-init_react_import();
-import { useEffect as useEffect10, useState as useState12 } from "react";
-var useModifierHeld = (modifier) => {
-  const [modifierHeld, setModifierHeld] = useState12(false);
-  useEffect10(() => {
-    function downHandler({ key }) {
-      if (key === modifier) {
-        setModifierHeld(true);
-      }
-    }
-    function upHandler({ key }) {
-      if (key === modifier) {
-        setModifierHeld(false);
-      }
-    }
-    window.addEventListener("keydown", downHandler);
-    window.addEventListener("keyup", upHandler);
-    return () => {
-      window.removeEventListener("keydown", downHandler);
-      window.removeEventListener("keyup", upHandler);
-    };
-  }, [modifier]);
-  return modifierHeld;
-};
-
 // components/DraggableComponent/index.tsx
 import { createPortal as createPortal2 } from "react-dom";
 
@@ -2805,9 +2780,8 @@ var DraggableComponent = ({
     iframe,
     state
   } = useAppContext();
-  const isModifierHeld = useModifierHeld("Alt");
   const ctx = useContext2(dropZoneContext);
-  const [localZones, setLocalZones] = useState13({});
+  const [localZones, setLocalZones] = useState12({});
   const registerLocalZone = useCallback6(
     (zoneCompound2, active) => {
       var _a;
@@ -2832,8 +2806,8 @@ var DraggableComponent = ({
   );
   const containsActiveZone = Object.values(localZones).filter(Boolean).length > 0;
   const { path = [] } = ctx || {};
-  const [canDrag, setCanDrag] = useState13(false);
-  useEffect11(() => {
+  const [canDrag, setCanDrag] = useState12(false);
+  useEffect10(() => {
     var _a;
     const item = getItem({ index, zone: zoneCompound }, state.data);
     if (item) {
@@ -2846,7 +2820,7 @@ var DraggableComponent = ({
   const userIsDragging = !!(ctx == null ? void 0 : ctx.draggedItem);
   const canCollide = canDrag || userIsDragging;
   const disabled = !isEnabled || !canCollide;
-  const [dragAxis, setDragAxis] = useState13(userDragAxis || autoDragAxis);
+  const [dragAxis, setDragAxis] = useState12(userDragAxis || autoDragAxis);
   const { ref: sortableRef, status } = useSortableSafe({
     id,
     index,
@@ -2882,8 +2856,8 @@ var DraggableComponent = ({
     },
     [sortableRef]
   );
-  const [portalEl, setPortalEl] = useState13();
-  useEffect11(() => {
+  const [portalEl, setPortalEl] = useState12();
+  useEffect10(() => {
     var _a, _b, _c;
     setPortalEl(
       iframe.enabled ? (_a = ref.current) == null ? void 0 : _a.ownerDocument.body : (_c = (_b = ref.current) == null ? void 0 : _b.closest("[data-puck-preview]")) != null ? _c : document.body
@@ -2909,11 +2883,11 @@ var DraggableComponent = ({
     };
     return style2;
   }, [ref.current]);
-  const [style, setStyle] = useState13();
+  const [style, setStyle] = useState12();
   const sync = useCallback6(() => {
     setStyle(getStyle());
   }, [ref.current, iframe]);
-  useEffect11(() => {
+  useEffect10(() => {
     if (ref.current) {
       const observer = new ResizeObserver(sync);
       observer.observe(ref.current);
@@ -2922,7 +2896,7 @@ var DraggableComponent = ({
       };
     }
   }, [ref.current]);
-  useEffect11(() => {
+  useEffect10(() => {
     ctx == null ? void 0 : ctx.registerPath({
       index,
       zone: zoneCompound
@@ -2979,9 +2953,9 @@ var DraggableComponent = ({
       zone: zoneCompound
     });
   }, [index, zoneCompound]);
-  const [hover, setHover] = useState13(false);
+  const [hover, setHover] = useState12(false);
   const indicativeHover = (ctx == null ? void 0 : ctx.hoveringComponent) === id;
-  useEffect11(() => {
+  useEffect10(() => {
     if (!ref.current) {
       return;
     }
@@ -3031,7 +3005,7 @@ var DraggableComponent = ({
     thisIsDragging,
     inDroppableZone
   ]);
-  useEffect11(() => {
+  useEffect10(() => {
     if (ref.current && disabled) {
       ref.current.setAttribute("data-puck-disabled", "");
       return () => {
@@ -3040,8 +3014,8 @@ var DraggableComponent = ({
       };
     }
   }, [disabled, ref]);
-  const [isVisible, setIsVisible] = useState13(false);
-  useEffect11(() => {
+  const [isVisible, setIsVisible] = useState12(false);
+  useEffect10(() => {
     sync();
     if ((isSelected || hover || indicativeHover) && !userIsDragging) {
       setIsVisible(true);
@@ -3066,7 +3040,7 @@ var DraggableComponent = ({
     },
     [zoomConfig]
   );
-  useEffect11(() => {
+  useEffect10(() => {
     if (userDragAxis) {
       setDragAxis(userDragAxis);
       return;
@@ -3101,7 +3075,6 @@ var DraggableComponent = ({
               className: getClassName16({
                 isSelected,
                 isDragging: thisIsDragging,
-                isModifierHeld,
                 hover: hover || indicativeHover
               }),
               style: __spreadValues({}, style),
@@ -3165,7 +3138,7 @@ import {
   createContext as createContext2,
   useCallback as useCallback7,
   useMemo as useMemo6,
-  useState as useState14
+  useState as useState13
 } from "react";
 import { Fragment as Fragment5, jsx as jsx20 } from "react/jsx-runtime";
 var dropZoneContext = createContext2(null);
@@ -3173,12 +3146,12 @@ var DropZoneProvider = ({
   children,
   value
 }) => {
-  const [hoveringComponent, setHoveringComponent] = useState14();
-  const [areasWithZones, setAreasWithZones] = useState14(
+  const [hoveringComponent, setHoveringComponent] = useState13();
+  const [areasWithZones, setAreasWithZones] = useState13(
     {}
   );
-  const [activeZones, setActiveZones] = useState14({});
-  const { dispatch = null } = value ? value : {};
+  const [activeZones, setActiveZones] = useState13({});
+  const { dispatch } = useAppContext();
   const registerZoneArea = useCallback7(
     (area) => {
       setAreasWithZones((latest) => __spreadProps(__spreadValues({}, latest), { [area]: true }));
@@ -3238,16 +3211,16 @@ var insert = (list, index, item) => {
 
 // components/DropZone/use-min-empty-height.ts
 init_react_import();
-import { useEffect as useEffect12, useState as useState15 } from "react";
+import { useEffect as useEffect11, useState as useState14 } from "react";
 var useMinEmptyHeight = ({
   draggedItem,
   zoneCompound,
   userMinEmptyHeight,
   ref
 }) => {
-  const [prevHeight, setPrevHeight] = useState15(0);
-  const [isAnimating, setIsAnimating] = useState15(false);
-  useEffect12(() => {
+  const [prevHeight, setPrevHeight] = useState14(0);
+  const [isAnimating, setIsAnimating] = useState14(false);
+  useEffect11(() => {
     if (draggedItem && ref.current) {
       const componentData = draggedItem.data;
       if (componentData.zone === zoneCompound) {
@@ -3317,12 +3290,12 @@ var DropZoneEdit = forwardRef3(
     } = ctx;
     const { itemSelector } = appContext2.state.ui;
     let zoneCompound = rootDroppableId;
-    useEffect13(() => {
+    useEffect12(() => {
       if (areaId && registerZoneArea) {
         registerZoneArea(areaId);
       }
     }, [areaId]);
-    useEffect13(() => {
+    useEffect12(() => {
       if (ctx == null ? void 0 : ctx.registerZone) {
         ctx == null ? void 0 : ctx.registerZone(zoneCompound);
       }
@@ -3368,7 +3341,7 @@ var DropZoneEdit = forwardRef3(
       },
       [allow, disallow]
     );
-    useEffect13(() => {
+    useEffect12(() => {
       if (registerLocalZone) {
         registerLocalZone(zoneCompound, acceptsTarget(draggedItem));
       }
@@ -3427,7 +3400,7 @@ var DropZoneEdit = forwardRef3(
     const { ref: dropRef } = useDroppableSafe(droppableConfig);
     const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
     const isAreaSelected = selectedItem && areaId === selectedItem.props.id;
-    const [dragAxis, setDragAxis] = useState16(
+    const [dragAxis, setDragAxis] = useState15(
       collisionAxis || DEFAULT_DRAG_AXIS
     );
     const calculateDragAxis = useCallback8(() => {
@@ -3442,8 +3415,8 @@ var DropZoneEdit = forwardRef3(
         }
       }
     }, [ref.current]);
-    useEffect13(calculateDragAxis, [appContext2.status, collisionAxis]);
-    useEffect13(() => {
+    useEffect12(calculateDragAxis, [appContext2.status, collisionAxis]);
+    useEffect12(() => {
       const onViewportChange = () => {
         calculateDragAxis();
       };
@@ -3559,6 +3532,16 @@ var DropZoneRender = forwardRef3(
     const { data, areaId = "root", config } = ctx || {};
     let zoneCompound = rootDroppableId;
     let content = (data == null ? void 0 : data.content) || [];
+    useEffect12(() => {
+      if (ctx == null ? void 0 : ctx.registerZone) {
+        ctx == null ? void 0 : ctx.registerZone(zoneCompound);
+      }
+      return () => {
+        if (ctx == null ? void 0 : ctx.unregisterZone) {
+          ctx == null ? void 0 : ctx.unregisterZone(zoneCompound);
+        }
+      };
+    }, []);
     if (!data || !config) {
       return null;
     }
@@ -4485,7 +4468,7 @@ var dragListenerContext = createContext3({
 });
 function useDragListener(type, fn, deps = []) {
   const { setDragListeners } = useContext4(dragListenerContext);
-  useEffect14(() => {
+  useEffect13(() => {
     if (setDragListeners) {
       setDragListeners((old) => __spreadProps(__spreadValues({}, old), {
         [type]: [...old[type] || [], fn]
@@ -4500,11 +4483,11 @@ var DragDropContextClient = ({
   disableAutoScroll
 }) => {
   const { state, config, dispatch, resolveData } = useAppContext();
-  const [preview, setPreview] = useState17(null);
+  const [preview, setPreview] = useState16(null);
   const previewRef = useRef5(null);
   const { data } = state;
-  const [deepest, setDeepest] = useState17(null);
-  const [nextDeepest, setNextDeepest] = useState17(null);
+  const [deepest, setDeepest] = useState16(null);
+  const [nextDeepest, setNextDeepest] = useState16(null);
   const deepestRef = useRef5(deepest);
   const debouncedParamsRef = useRef5(null);
   const setDeepestAndCollide = useCallback9(
@@ -4521,14 +4504,14 @@ var DragDropContextClient = ({
     setDeepestAndCollide,
     AREA_CHANGE_DEBOUNCE_MS
   );
-  useEffect14(() => {
+  useEffect13(() => {
     deepestRef.current = deepest;
   }, [deepest]);
   const cancelDb = () => {
     setDeepestDb.cancel();
     debouncedParamsRef.current = null;
   };
-  const [plugins] = useState17(() => [
+  const [plugins] = useState16(() => [
     ...disableAutoScroll ? defaultPreset.plugins.filter((plugin) => plugin !== AutoScroller) : defaultPreset.plugins,
     createNestedDroppablePlugin({
       onChange: (params, manager) => {
@@ -4566,7 +4549,7 @@ var DragDropContextClient = ({
       }
     })
   ]);
-  const [sensors] = useState17(() => [
+  const [sensors] = useState16(() => [
     PointerSensor.configure({
       activationConstraints(event, source) {
         var _a;
@@ -4585,9 +4568,9 @@ var DragDropContextClient = ({
       }
     })
   ]);
-  const [draggedItem, setDraggedItem] = useState17();
-  const [dragListeners, setDragListeners] = useState17({});
-  const [pathData, setPathData] = useState17();
+  const [draggedItem, setDraggedItem] = useState16();
+  const [dragListeners, setDragListeners] = useState16({});
+  const [pathData, setPathData] = useState16();
   const dragMode = useRef5(null);
   const registerPath = useCallback9(
     (selector) => {
@@ -4775,7 +4758,6 @@ var DragDropContextClient = ({
               value: {
                 data,
                 config,
-                dispatch,
                 draggedItem,
                 mode: "edit",
                 areaId: "root",
@@ -4872,7 +4854,7 @@ var DrawerItem = ({
   isDragDisabled
 }) => {
   const resolvedId = id || name;
-  const [dynamicId, setDynamicId] = useState18(generateId(resolvedId));
+  const [dynamicId, setDynamicId] = useState17(generateId(resolvedId));
   if (typeof index !== "undefined") {
     console.error(
       "Warning: The `index` prop on Drawer.Item is deprecated and no longer required."
@@ -4911,7 +4893,7 @@ var Drawer = ({
       "Warning: The `direction` prop on Drawer is deprecated and no longer required to achieve multi-directional dragging."
     );
   }
-  const [id] = useState18(generateId());
+  const [id] = useState17(generateId());
   const { ref } = useDroppableSafe({
     id,
     type: "void",
@@ -4934,11 +4916,11 @@ Drawer.Item = DrawerItem;
 // components/Puck/index.tsx
 init_react_import();
 import {
-  useCallback as useCallback14,
-  useEffect as useEffect22,
+  useCallback as useCallback15,
+  useEffect as useEffect21,
   useMemo as useMemo17,
   useReducer,
-  useState as useState26
+  useState as useState25
 } from "react";
 
 // components/SidebarSection/index.tsx
@@ -5135,7 +5117,7 @@ init_react_import();
 var styles_module_default16 = { "PuckFields": "_PuckFields_jp3lw_1", "PuckFields--isLoading": "_PuckFields--isLoading_jp3lw_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_jp3lw_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_jp3lw_25" };
 
 // components/Puck/components/Fields/index.tsx
-import { useCallback as useCallback10, useEffect as useEffect15, useMemo as useMemo10, useState as useState19 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect14, useMemo as useMemo10, useState as useState18 } from "react";
 
 // lib/use-parent.ts
 init_react_import();
@@ -5174,9 +5156,9 @@ var useResolvedFields = () => {
     [selectedItem, rootFields, componentConfig == null ? void 0 : componentConfig.fields]
   );
   const rootProps = data.root.props || data.root;
-  const [lastSelectedData, setLastSelectedData] = useState19({});
-  const [resolvedFields, setResolvedFields] = useState19(defaultFields);
-  const [fieldsLoading, setFieldsLoading] = useState19(false);
+  const [lastSelectedData, setLastSelectedData] = useState18({});
+  const [resolvedFields, setResolvedFields] = useState18(defaultFields);
+  const [fieldsLoading, setFieldsLoading] = useState18(false);
   const defaultResolveFields = (_componentData, _params) => defaultFields;
   const componentData = selectedItem ? selectedItem : { props: rootProps, readOnly: data.root.readOnly };
   const hasComponentResolver = selectedItem && (componentConfig == null ? void 0 : componentConfig.resolveFields);
@@ -5220,7 +5202,7 @@ var useResolvedFields = () => {
     }),
     [data, config, componentData, selectedItem, resolvedFields, state]
   );
-  useEffect15(() => {
+  useEffect14(() => {
     if (hasResolver) {
       setFieldsLoading(true);
       resolveFields(defaultFields).then((fields) => {
@@ -5374,7 +5356,7 @@ init_react_import();
 
 // lib/use-component-list.tsx
 init_react_import();
-import { useEffect as useEffect16, useState as useState20 } from "react";
+import { useEffect as useEffect15, useState as useState19 } from "react";
 
 // components/ComponentList/index.tsx
 init_react_import();
@@ -5441,8 +5423,8 @@ ComponentList.Item = ComponentListItem;
 // lib/use-component-list.tsx
 import { jsx as jsx28 } from "react/jsx-runtime";
 var useComponentList = (config, ui) => {
-  const [componentList, setComponentList] = useState20();
-  useEffect16(() => {
+  const [componentList, setComponentList] = useState19();
+  useEffect15(() => {
     var _a, _b, _c;
     if (Object.keys(ui.componentList).length > 0) {
       const matchedComponents = [];
@@ -5522,15 +5504,15 @@ var Components = () => {
 
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-import { useCallback as useCallback11, useEffect as useEffect18, useRef as useRef7, useMemo as useMemo12 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect17, useRef as useRef7, useMemo as useMemo12 } from "react";
 
 // components/AutoFrame/index.tsx
 init_react_import();
 import {
   createContext as createContext4,
   useContext as useContext7,
-  useEffect as useEffect17,
-  useState as useState21
+  useEffect as useEffect16,
+  useState as useState20
 } from "react";
 import hash from "object-hash";
 import { createPortal as createPortal3 } from "react-dom";
@@ -5577,7 +5559,7 @@ var CopyHostStyles = ({
   onStylesLoaded = () => null
 }) => {
   const { document: doc, window: win } = useFrame();
-  useEffect17(() => {
+  useEffect16(() => {
     if (!win || !doc) {
       return () => {
       };
@@ -5754,10 +5736,10 @@ function AutoFrame(_a) {
     "onStylesLoaded",
     "frameRef"
   ]);
-  const [loaded, setLoaded] = useState21(false);
-  const [ctx, setCtx] = useState21({});
-  const [mountTarget, setMountTarget] = useState21();
-  useEffect17(() => {
+  const [loaded, setLoaded] = useState20(false);
+  const [ctx, setCtx] = useState20({});
+  const [mountTarget, setMountTarget] = useState20();
+  useEffect16(() => {
     var _a2;
     if (frameRef.current) {
       setCtx({
@@ -5790,12 +5772,68 @@ var AutoFrame_default = AutoFrame;
 init_react_import();
 var styles_module_default18 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPreview-frame": "_PuckPreview-frame_z2rgu_6" };
 
+// components/Render/index.tsx
+init_react_import();
+import { jsx as jsx31 } from "react/jsx-runtime";
+function Render({
+  config,
+  data
+}) {
+  var _a;
+  const defaultedData = __spreadProps(__spreadValues({}, data), {
+    root: data.root || {},
+    content: data.content || []
+  });
+  const rootProps = defaultedData.root.props || defaultedData.root;
+  const title = (rootProps == null ? void 0 : rootProps.title) || "";
+  if ((_a = config.root) == null ? void 0 : _a.render) {
+    return /* @__PURE__ */ jsx31(
+      DropZoneProvider,
+      {
+        value: {
+          data: defaultedData,
+          config,
+          mode: "render",
+          depth: 0,
+          path: []
+        },
+        children: /* @__PURE__ */ jsx31(
+          config.root.render,
+          __spreadProps(__spreadValues({}, rootProps), {
+            puck: {
+              renderDropZone: DropZone,
+              isEditing: false
+            },
+            title,
+            editMode: false,
+            id: "puck-root",
+            children: /* @__PURE__ */ jsx31(DropZone, { zone: rootDroppableId })
+          })
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx31(
+    DropZoneProvider,
+    {
+      value: {
+        data: defaultedData,
+        config,
+        mode: "render",
+        depth: 0,
+        path: []
+      },
+      children: /* @__PURE__ */ jsx31(DropZone, { zone: rootDroppableId })
+    }
+  );
+}
+
 // components/Puck/components/Preview/index.tsx
-import { Fragment as Fragment10, jsx as jsx31 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx32 } from "react/jsx-runtime";
 var getClassName23 = get_class_name_factory_default("PuckPreview", styles_module_default18);
 var useBubbleIframeEvents = (ref) => {
   const { status } = useAppContext();
-  useEffect18(() => {
+  useEffect17(() => {
     var _a;
     if (ref.current && status === "READY") {
       const iframe = ref.current;
@@ -5839,7 +5877,7 @@ var Preview = ({ id = "puck-preview" }) => {
       var _a, _b;
       return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadValues({
         id: "puck-root"
-      }, pageProps)) : /* @__PURE__ */ jsx31(Fragment10, { children: pageProps.children });
+      }, pageProps)) : /* @__PURE__ */ jsx32(Fragment10, { children: pageProps.children });
     },
     [config.root]
   );
@@ -5847,7 +5885,19 @@ var Preview = ({ id = "puck-preview" }) => {
   const rootProps = state.data.root.props || state.data.root;
   const ref = useRef7(null);
   useBubbleIframeEvents(ref);
-  return /* @__PURE__ */ jsx31(
+  const inner = state.ui.previewMode === "edit" ? /* @__PURE__ */ jsx32(
+    Page,
+    __spreadProps(__spreadValues({}, rootProps), {
+      puck: {
+        renderDropZone: DropZone,
+        isEditing: true,
+        dragRef: null
+      },
+      editMode: true,
+      children: /* @__PURE__ */ jsx32(DropZone, { zone: rootDroppableId })
+    })
+  ) : /* @__PURE__ */ jsx32(Render, { data: state.data, config });
+  return /* @__PURE__ */ jsx32(
     "div",
     {
       className: getClassName23(),
@@ -5856,7 +5906,7 @@ var Preview = ({ id = "puck-preview" }) => {
       onClick: () => {
         dispatch({ type: "setUi", ui: __spreadProps(__spreadValues({}, state.ui), { itemSelector: null }) });
       },
-      children: iframe.enabled ? /* @__PURE__ */ jsx31(
+      children: iframe.enabled ? /* @__PURE__ */ jsx32(
         AutoFrame_default,
         {
           id: "preview-frame",
@@ -5866,40 +5916,21 @@ var Preview = ({ id = "puck-preview" }) => {
             setStatus("READY");
           },
           frameRef: ref,
-          children: /* @__PURE__ */ jsx31(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
-            const inner = /* @__PURE__ */ jsx31(
-              Page,
-              __spreadProps(__spreadValues({}, rootProps), {
-                puck: {
-                  renderDropZone: DropZone,
-                  isEditing: true,
-                  dragRef: null
-                },
-                editMode: true,
-                children: /* @__PURE__ */ jsx31(DropZone, { zone: rootDroppableId })
-              })
-            );
+          children: /* @__PURE__ */ jsx32(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
             if (Frame) {
-              return /* @__PURE__ */ jsx31(Frame, { document: document2, children: inner });
+              return /* @__PURE__ */ jsx32(Frame, { document: document2, children: inner });
             }
             return inner;
           } })
         }
-      ) : /* @__PURE__ */ jsx31(
+      ) : /* @__PURE__ */ jsx32(
         "div",
         {
           id: "preview-frame",
           className: getClassName23("frame"),
           ref,
           "data-puck-entry": true,
-          children: /* @__PURE__ */ jsx31(
-            Page,
-            __spreadProps(__spreadValues({}, rootProps), {
-              puck: { renderDropZone: DropZone, isEditing: true, dragRef: null },
-              editMode: true,
-              children: /* @__PURE__ */ jsx31(DropZone, { zone: rootDroppableId })
-            })
-          )
+          children: inner
         }
       )
     }
@@ -5982,7 +6013,7 @@ var onScrollEnd = (frame, cb) => {
 };
 
 // components/LayerTree/index.tsx
-import { Fragment as Fragment11, jsx as jsx32, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx33, jsxs as jsxs16 } from "react/jsx-runtime";
 var getClassName24 = get_class_name_factory_default("LayerTree", styles_module_default19);
 var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default19);
 var LayerTree = ({
@@ -5998,12 +6029,12 @@ var LayerTree = ({
   const ctx = useContext8(dropZoneContext);
   return /* @__PURE__ */ jsxs16(Fragment11, { children: [
     label && /* @__PURE__ */ jsxs16("div", { className: getClassName24("zoneTitle"), children: [
-      /* @__PURE__ */ jsx32("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ jsx32(Layers, { size: "16" }) }),
+      /* @__PURE__ */ jsx33("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ jsx33(Layers, { size: "16" }) }),
       " ",
       label
     ] }),
     /* @__PURE__ */ jsxs16("ul", { className: getClassName24(), children: [
-      zoneContent.length === 0 && /* @__PURE__ */ jsx32("div", { className: getClassName24("helper"), children: "No items" }),
+      zoneContent.length === 0 && /* @__PURE__ */ jsx33("div", { className: getClassName24("helper"), children: "No items" }),
       zoneContent.map((item, i) => {
         var _a;
         const isSelected = (itemSelector == null ? void 0 : itemSelector.index) === i && (itemSelector.zone === zone || itemSelector.zone === rootDroppableId && !zone);
@@ -6026,7 +6057,7 @@ var LayerTree = ({
               childIsSelected
             }),
             children: [
-              /* @__PURE__ */ jsx32("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs16(
+              /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs16(
                 "button",
                 {
                   type: "button",
@@ -6065,22 +6096,22 @@ var LayerTree = ({
                     setHoveringComponent(null);
                   },
                   children: [
-                    containsZone && /* @__PURE__ */ jsx32(
+                    containsZone && /* @__PURE__ */ jsx33(
                       "div",
                       {
                         className: getClassNameLayer("chevron"),
                         title: isSelected ? "Collapse" : "Expand",
-                        children: /* @__PURE__ */ jsx32(ChevronDown, { size: "12" })
+                        children: /* @__PURE__ */ jsx33(ChevronDown, { size: "12" })
                       }
                     ),
                     /* @__PURE__ */ jsxs16("div", { className: getClassNameLayer("title"), children: [
-                      /* @__PURE__ */ jsx32("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ jsx32(Type, { size: "16" }) : /* @__PURE__ */ jsx32(LayoutGrid, { size: "16" }) }),
-                      /* @__PURE__ */ jsx32("div", { className: getClassNameLayer("name"), children: label2 })
+                      /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ jsx33(Type, { size: "16" }) : /* @__PURE__ */ jsx33(LayoutGrid, { size: "16" }) }),
+                      /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("name"), children: label2 })
                     ] })
                   ]
                 }
               ) }),
-              containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ jsx32("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ jsx32(
+              containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ jsx33(
                 LayerTree,
                 {
                   config,
@@ -6103,7 +6134,7 @@ var LayerTree = ({
 
 // components/Puck/components/Outline/index.tsx
 import { useCallback as useCallback12, useMemo as useMemo13 } from "react";
-import { Fragment as Fragment12, jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx34, jsxs as jsxs17 } from "react/jsx-runtime";
 var Outline = () => {
   const { dispatch, state, overrides, config } = useAppContext();
   const { data, ui } = state;
@@ -6118,8 +6149,8 @@ var Outline = () => {
     []
   );
   const Wrapper = useMemo13(() => overrides.outline || "div", [overrides]);
-  return /* @__PURE__ */ jsx33(Wrapper, { children: /* @__PURE__ */ jsx33(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ jsxs17(Fragment12, { children: [
-    (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(Wrapper, { children: /* @__PURE__ */ jsx34(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ jsxs17(Fragment12, { children: [
+    (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ jsx34(
       LayerTree,
       {
         config,
@@ -6132,7 +6163,7 @@ var Outline = () => {
     ),
     Object.entries(findZonesForArea(data, "root")).map(
       ([zoneKey, zone]) => {
-        return /* @__PURE__ */ jsx33(
+        return /* @__PURE__ */ jsx34(
           LayerTree,
           {
             config,
@@ -6231,19 +6262,19 @@ function usePuckHistory({
 
 // lib/use-history-store.ts
 init_react_import();
-import { useState as useState22 } from "react";
+import { useState as useState21 } from "react";
 import { useDebouncedCallback as useDebouncedCallback3 } from "use-debounce";
 var EMPTY_HISTORY_INDEX = 0;
 function useHistoryStore(initialHistory) {
   var _a, _b;
-  const [histories, setHistories] = useState22(
+  const [histories, setHistories] = useState21(
     (_a = initialHistory == null ? void 0 : initialHistory.histories) != null ? _a : []
   );
   const updateHistories = (histories2) => {
     setHistories(histories2);
     setIndex(histories2.length - 1);
   };
-  const [index, setIndex] = useState22(
+  const [index, setIndex] = useState21(
     (_b = initialHistory == null ? void 0 : initialHistory.index) != null ? _b : EMPTY_HISTORY_INDEX
   );
   const hasPast = index > EMPTY_HISTORY_INDEX;
@@ -6405,26 +6436,26 @@ var getBox = function getBox2(el) {
 // components/Puck/components/Canvas/index.tsx
 import {
   useCallback as useCallback13,
-  useEffect as useEffect20,
+  useEffect as useEffect19,
   useMemo as useMemo15,
   useRef as useRef8,
-  useState as useState24
+  useState as useState23
 } from "react";
 
 // components/ViewportControls/index.tsx
 init_react_import();
-import { useEffect as useEffect19, useMemo as useMemo14, useState as useState23 } from "react";
+import { useEffect as useEffect18, useMemo as useMemo14, useState as useState22 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
 init_react_import();
 var styles_module_default20 = { "ViewportControls": "_ViewportControls_g1wgg_1", "ViewportControls-divider": "_ViewportControls-divider_g1wgg_15", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_g1wgg_21", "ViewportButton--isActive": "_ViewportButton--isActive_g1wgg_34", "ViewportButton-inner": "_ViewportButton-inner_g1wgg_34" };
 
 // components/ViewportControls/index.tsx
-import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
 var icons = {
-  Smartphone: /* @__PURE__ */ jsx34(Smartphone, { size: 16 }),
-  Tablet: /* @__PURE__ */ jsx34(Tablet, { size: 16 }),
-  Monitor: /* @__PURE__ */ jsx34(Monitor, { size: 16 })
+  Smartphone: /* @__PURE__ */ jsx35(Smartphone, { size: 16 }),
+  Tablet: /* @__PURE__ */ jsx35(Tablet, { size: 16 }),
+  Monitor: /* @__PURE__ */ jsx35(Monitor, { size: 16 })
 };
 var getClassName25 = get_class_name_factory_default("ViewportControls", styles_module_default20);
 var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default20);
@@ -6436,11 +6467,11 @@ var ViewportButton = ({
   onClick
 }) => {
   const { state } = useAppContext();
-  const [isActive, setIsActive] = useState23(false);
-  useEffect19(() => {
+  const [isActive, setIsActive] = useState22(false);
+  useEffect18(() => {
     setIsActive(width === state.ui.viewports.current.width);
   }, [width, state.ui.viewports.current.width]);
-  return /* @__PURE__ */ jsx34("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx35(
     IconButton,
     {
       title,
@@ -6449,7 +6480,7 @@ var ViewportButton = ({
         e.stopPropagation();
         onClick({ width, height });
       },
-      children: /* @__PURE__ */ jsx34("span", { className: getClassNameButton("inner"), children })
+      children: /* @__PURE__ */ jsx35("span", { className: getClassNameButton("inner"), children })
     }
   ) });
 };
@@ -6486,7 +6517,7 @@ var ViewportControls = ({
     [autoZoom]
   );
   return /* @__PURE__ */ jsxs18("div", { className: getClassName25(), children: [
-    viewports.map((viewport, i) => /* @__PURE__ */ jsx34(
+    viewports.map((viewport, i) => /* @__PURE__ */ jsx35(
       ViewportButton,
       {
         height: viewport.height,
@@ -6497,8 +6528,8 @@ var ViewportControls = ({
       },
       i
     )),
-    /* @__PURE__ */ jsx34("div", { className: getClassName25("divider") }),
-    /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx35("div", { className: getClassName25("divider") }),
+    /* @__PURE__ */ jsx35(
       IconButton,
       {
         title: "Zoom viewport out",
@@ -6512,10 +6543,10 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ jsx34(ZoomOut, { size: 16 })
+        children: /* @__PURE__ */ jsx35(ZoomOut, { size: 16 })
       }
     ),
-    /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx35(
       IconButton,
       {
         title: "Zoom viewport in",
@@ -6529,11 +6560,11 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ jsx34(ZoomIn, { size: 16 })
+        children: /* @__PURE__ */ jsx35(ZoomIn, { size: 16 })
       }
     ),
-    /* @__PURE__ */ jsx34("div", { className: getClassName25("divider") }),
-    /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx35("div", { className: getClassName25("divider") }),
+    /* @__PURE__ */ jsx35(
       "select",
       {
         className: getClassName25("zoomSelect"),
@@ -6541,7 +6572,7 @@ var ViewportControls = ({
         onChange: (e) => {
           onZoom(parseFloat(e.currentTarget.value));
         },
-        children: zoomOptions.map((option) => /* @__PURE__ */ jsx34(
+        children: zoomOptions.map((option) => /* @__PURE__ */ jsx35(
           "option",
           {
             value: option.value,
@@ -6589,7 +6620,7 @@ var getZoomConfig = (uiViewport, frame, zoom) => {
 };
 
 // components/Puck/components/Canvas/index.tsx
-import { Fragment as Fragment13, jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
 var getClassName26 = get_class_name_factory_default("PuckCanvas", styles_module_default21);
 var ZOOM_ON_CHANGE = true;
 var Canvas = () => {
@@ -6597,9 +6628,9 @@ var Canvas = () => {
   const { dispatch, state, overrides, setUi, zoomConfig, setZoomConfig } = useAppContext();
   const { ui } = state;
   const frameRef = useRef8(null);
-  const [showTransition, setShowTransition] = useState24(false);
+  const [showTransition, setShowTransition] = useState23(false);
   const defaultRender = useMemo15(() => {
-    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx35(Fragment13, { children });
+    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx36(Fragment13, { children });
     return PuckDefault;
   }, []);
   const CustomPreview = useMemo15(
@@ -6624,11 +6655,11 @@ var Canvas = () => {
     },
     [frameRef, zoomConfig, state.ui]
   );
-  useEffect20(() => {
+  useEffect19(() => {
     setShowTransition(false);
     resetAutoZoom();
   }, [frameRef, ui.leftSideBarVisible, ui.rightSideBarVisible]);
-  useEffect20(() => {
+  useEffect19(() => {
     const { height: frameHeight } = getFrameDimensions();
     if (ui.viewports.current.height === "auto") {
       setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
@@ -6636,13 +6667,13 @@ var Canvas = () => {
       }));
     }
   }, [zoomConfig.zoom]);
-  useEffect20(() => {
+  useEffect19(() => {
     if (ZOOM_ON_CHANGE) {
       setShowTransition(true);
       resetAutoZoom(ui);
     }
   }, [ui.viewports.current.width]);
-  useEffect20(() => {
+  useEffect19(() => {
     const cb = () => {
       setShowTransition(false);
       resetAutoZoom();
@@ -6652,8 +6683,8 @@ var Canvas = () => {
       window.removeEventListener("resize", cb);
     };
   }, []);
-  const [showLoader, setShowLoader] = useState24(false);
-  useEffect20(() => {
+  const [showLoader, setShowLoader] = useState23(false);
+  useEffect19(() => {
     setTimeout(() => {
       setShowLoader(true);
     }, 500);
@@ -6671,7 +6702,7 @@ var Canvas = () => {
         recordHistory: true
       }),
       children: [
-        ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx35("div", { className: getClassName26("controls"), children: /* @__PURE__ */ jsx35(
+        ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx36("div", { className: getClassName26("controls"), children: /* @__PURE__ */ jsx36(
           ViewportControls,
           {
             autoZoom: zoomConfig.autoZoom,
@@ -6698,7 +6729,7 @@ var Canvas = () => {
           }
         ) }),
         /* @__PURE__ */ jsxs19("div", { className: getClassName26("inner"), ref: frameRef, children: [
-          /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsx36(
             "div",
             {
               className: getClassName26("root"),
@@ -6719,10 +6750,10 @@ var Canvas = () => {
                   })
                 );
               },
-              children: /* @__PURE__ */ jsx35(CustomPreview, { children: /* @__PURE__ */ jsx35(Preview, {}) })
+              children: /* @__PURE__ */ jsx36(CustomPreview, { children: /* @__PURE__ */ jsx36(Preview, {}) })
             }
           ),
-          /* @__PURE__ */ jsx35("div", { className: getClassName26("loader"), children: /* @__PURE__ */ jsx35(Loader, { size: 24 }) })
+          /* @__PURE__ */ jsx36("div", { className: getClassName26("loader"), children: /* @__PURE__ */ jsx36(Loader, { size: 24 }) })
         ] })
       ]
     }
@@ -6777,22 +6808,19 @@ var useLoadedOverrides = ({
 
 // components/DefaultOverride/index.tsx
 init_react_import();
-import { Fragment as Fragment14, jsx as jsx36 } from "react/jsx-runtime";
-var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx36(Fragment14, { children });
-
-// components/Puck/index.tsx
-import { DragDropManager as DragDropManager2, Feedback } from "@dnd-kit/dom";
+import { Fragment as Fragment14, jsx as jsx37 } from "react/jsx-runtime";
+var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx37(Fragment14, { children });
 
 // lib/use-inject-css.ts
 init_react_import();
-import { useEffect as useEffect21, useState as useState25 } from "react";
+import { useEffect as useEffect20, useState as useState24 } from "react";
 var styles = ``;
 var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
-  const [el, setEl] = useState25();
-  useEffect21(() => {
+  const [el, setEl] = useState24();
+  useEffect20(() => {
     setEl(document.createElement("style"));
   }, []);
-  useEffect21(() => {
+  useEffect20(() => {
     var _a;
     if (!el || typeof window === "undefined") {
       return;
@@ -6810,8 +6838,35 @@ var useInjectGlobalCss = (iframeEnabled) => {
   return useInjectStyleSheet(styles, iframeEnabled);
 };
 
+// lib/use-preview-mode-hotkeys.ts
+init_react_import();
+import { useCallback as useCallback14 } from "react";
+import { useHotkeys as useHotkeys2 } from "react-hotkeys-hook";
+var usePreviewModeHotkeys = (dispatch, iframeEnabled) => {
+  const toggleInteractive = useCallback14(() => {
+    dispatch({
+      type: "setUi",
+      ui: (ui) => ({
+        previewMode: ui.previewMode === "edit" ? "interactive" : "edit"
+      })
+    });
+  }, [dispatch]);
+  const toggleInteractiveIframe = () => {
+    if (iframeEnabled) {
+      toggleInteractive();
+    }
+  };
+  const frame = getFrame();
+  const resolvedFrame = typeof window !== "undefined" && frame !== document ? frame : void 0;
+  useHotkeys2("meta+i", toggleInteractive, { preventDefault: true });
+  useHotkeys2("meta+i", toggleInteractiveIframe, {
+    preventDefault: true,
+    document: resolvedFrame
+  });
+};
+
 // components/Puck/index.tsx
-import { Fragment as Fragment15, jsx as jsx37, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
 var getClassName27 = get_class_name_factory_default("Puck", styles_module_default15);
 var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_module_default15);
 function Puck({
@@ -6840,7 +6895,7 @@ function Puck({
     waitForStyles: true
   }, _iframe);
   useInjectGlobalCss(iframe.enabled);
-  const [generatedAppState] = useState26(() => {
+  const [generatedAppState] = useState25(() => {
     var _a2, _b2, _c, _d, _e, _f, _g, _h, _i;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
@@ -6912,7 +6967,7 @@ function Puck({
     histories,
     index: initialHistoryIndex
   });
-  const [reducer] = useState26(
+  const [reducer] = useState25(
     () => createReducer({
       config,
       record: historyStore.record,
@@ -6930,14 +6985,14 @@ function Puck({
     historyStore,
     iframeEnabled: (_a = _iframe == null ? void 0 : _iframe.enabled) != null ? _a : true
   });
-  const [menuOpen, setMenuOpen] = useState26(false);
+  const [menuOpen, setMenuOpen] = useState25(false);
   const { itemSelector, leftSideBarVisible, rightSideBarVisible } = ui;
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
-  useEffect22(() => {
+  useEffect21(() => {
     if (onChange) onChange(data);
   }, [data]);
   const rootProps = data.root.props || data.root;
-  const toggleSidebars = useCallback14(
+  const toggleSidebars = useCallback15(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -6951,7 +7006,7 @@ function Puck({
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  useEffect22(() => {
+  useEffect21(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -6982,7 +7037,7 @@ function Puck({
       const RenderHeader = (_a2) => {
         var _b2 = _a2, { actions } = _b2, props = __objRest(_b2, ["actions"]);
         const Comp = renderHeader;
-        return /* @__PURE__ */ jsx37(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
+        return /* @__PURE__ */ jsx38(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
       };
       return RenderHeader;
     }
@@ -6995,7 +7050,7 @@ function Puck({
       );
       const RenderHeader = (props) => {
         const Comp = renderHeaderActions;
-        return /* @__PURE__ */ jsx37(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
+        return /* @__PURE__ */ jsx38(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
       };
       return RenderHeader;
     }
@@ -7017,15 +7072,15 @@ function Puck({
     () => loadedOverrides.headerActions || defaultHeaderActionsRender,
     [loadedOverrides]
   );
-  const [mounted, setMounted] = useState26(false);
-  useEffect22(() => {
+  const [mounted, setMounted] = useState25(false);
+  useEffect21(() => {
     setMounted(true);
   }, []);
   const selectedComponentConfig = selectedItem && config.components[selectedItem.type];
   const selectedComponentLabel = selectedItem ? (_b = selectedComponentConfig == null ? void 0 : selectedComponentConfig["label"]) != null ? _b : selectedItem.type.toString() : "";
-  const [manager] = useState26(new DragDropManager2({ plugins: [Feedback] }));
+  usePreviewModeHotkeys(dispatch, iframe.enabled);
   return /* @__PURE__ */ jsxs20("div", { className: `Puck ${getClassName27()}`, children: [
-    /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx38(
       AppProvider,
       {
         value: {
@@ -7047,7 +7102,7 @@ function Puck({
           getPermissions: () => ({}),
           refreshPermissions: () => null
         },
-        children: /* @__PURE__ */ jsx37(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx37(CustomPuck, { children: children || /* @__PURE__ */ jsx37(
+        children: /* @__PURE__ */ jsx38(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx38(CustomPuck, { children: children || /* @__PURE__ */ jsx38(
           "div",
           {
             className: getLayoutClassName({
@@ -7057,59 +7112,59 @@ function Puck({
               rightSideBarVisible
             }),
             children: /* @__PURE__ */ jsxs20("div", { className: getLayoutClassName("inner"), children: [
-              /* @__PURE__ */ jsx37(
+              /* @__PURE__ */ jsx38(
                 CustomHeader,
                 {
-                  actions: /* @__PURE__ */ jsx37(Fragment15, { children: /* @__PURE__ */ jsx37(CustomHeaderActions, { children: /* @__PURE__ */ jsx37(
+                  actions: /* @__PURE__ */ jsx38(Fragment15, { children: /* @__PURE__ */ jsx38(CustomHeaderActions, { children: /* @__PURE__ */ jsx38(
                     Button,
                     {
                       onClick: () => {
                         onPublish && onPublish(data);
                       },
-                      icon: /* @__PURE__ */ jsx37(Globe, { size: "14px" }),
+                      icon: /* @__PURE__ */ jsx38(Globe, { size: "14px" }),
                       children: "Publish"
                     }
                   ) }) }),
-                  children: /* @__PURE__ */ jsx37("header", { className: getLayoutClassName("header"), children: /* @__PURE__ */ jsxs20("div", { className: getLayoutClassName("headerInner"), children: [
+                  children: /* @__PURE__ */ jsx38("header", { className: getLayoutClassName("header"), children: /* @__PURE__ */ jsxs20("div", { className: getLayoutClassName("headerInner"), children: [
                     /* @__PURE__ */ jsxs20("div", { className: getLayoutClassName("headerToggle"), children: [
-                      /* @__PURE__ */ jsx37(
+                      /* @__PURE__ */ jsx38(
                         "div",
                         {
                           className: getLayoutClassName("leftSideBarToggle"),
-                          children: /* @__PURE__ */ jsx37(
+                          children: /* @__PURE__ */ jsx38(
                             IconButton,
                             {
                               onClick: () => {
                                 toggleSidebars("left");
                               },
                               title: "Toggle left sidebar",
-                              children: /* @__PURE__ */ jsx37(PanelLeft, { focusable: "false" })
+                              children: /* @__PURE__ */ jsx38(PanelLeft, { focusable: "false" })
                             }
                           )
                         }
                       ),
-                      /* @__PURE__ */ jsx37(
+                      /* @__PURE__ */ jsx38(
                         "div",
                         {
                           className: getLayoutClassName("rightSideBarToggle"),
-                          children: /* @__PURE__ */ jsx37(
+                          children: /* @__PURE__ */ jsx38(
                             IconButton,
                             {
                               onClick: () => {
                                 toggleSidebars("right");
                               },
                               title: "Toggle right sidebar",
-                              children: /* @__PURE__ */ jsx37(PanelRight, { focusable: "false" })
+                              children: /* @__PURE__ */ jsx38(PanelRight, { focusable: "false" })
                             }
                           )
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsx37("div", { className: getLayoutClassName("headerTitle"), children: /* @__PURE__ */ jsxs20(Heading, { rank: "2", size: "xs", children: [
+                    /* @__PURE__ */ jsx38("div", { className: getLayoutClassName("headerTitle"), children: /* @__PURE__ */ jsxs20(Heading, { rank: "2", size: "xs", children: [
                       headerTitle || rootProps.title || "Page",
                       headerPath && /* @__PURE__ */ jsxs20(Fragment15, { children: [
                         " ",
-                        /* @__PURE__ */ jsx37(
+                        /* @__PURE__ */ jsx38(
                           "code",
                           {
                             className: getLayoutClassName("headerPath"),
@@ -7119,30 +7174,30 @@ function Puck({
                       ] })
                     ] }) }),
                     /* @__PURE__ */ jsxs20("div", { className: getLayoutClassName("headerTools"), children: [
-                      /* @__PURE__ */ jsx37("div", { className: getLayoutClassName("menuButton"), children: /* @__PURE__ */ jsx37(
+                      /* @__PURE__ */ jsx38("div", { className: getLayoutClassName("menuButton"), children: /* @__PURE__ */ jsx38(
                         IconButton,
                         {
                           onClick: () => {
                             return setMenuOpen(!menuOpen);
                           },
                           title: "Toggle menu bar",
-                          children: menuOpen ? /* @__PURE__ */ jsx37(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx37(ChevronDown, { focusable: "false" })
+                          children: menuOpen ? /* @__PURE__ */ jsx38(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx38(ChevronDown, { focusable: "false" })
                         }
                       ) }),
-                      /* @__PURE__ */ jsx37(
+                      /* @__PURE__ */ jsx38(
                         MenuBar,
                         {
                           appState,
                           dispatch,
                           onPublish,
                           menuOpen,
-                          renderHeaderActions: () => /* @__PURE__ */ jsx37(CustomHeaderActions, { children: /* @__PURE__ */ jsx37(
+                          renderHeaderActions: () => /* @__PURE__ */ jsx38(CustomHeaderActions, { children: /* @__PURE__ */ jsx38(
                             Button,
                             {
                               onClick: () => {
                                 onPublish && onPublish(data);
                               },
-                              icon: /* @__PURE__ */ jsx37(Globe, { size: "14px" }),
+                              icon: /* @__PURE__ */ jsx38(Globe, { size: "14px" }),
                               children: "Publish"
                             }
                           ) }),
@@ -7154,18 +7209,18 @@ function Puck({
                 }
               ),
               /* @__PURE__ */ jsxs20("div", { className: getLayoutClassName("leftSideBar"), children: [
-                /* @__PURE__ */ jsx37(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx37(Components, {}) }),
-                /* @__PURE__ */ jsx37(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx37(Outline, {}) })
+                /* @__PURE__ */ jsx38(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx38(Components, {}) }),
+                /* @__PURE__ */ jsx38(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx38(Outline, {}) })
               ] }),
-              /* @__PURE__ */ jsx37(Canvas, {}),
-              /* @__PURE__ */ jsx37("div", { className: getLayoutClassName("rightSideBar"), children: /* @__PURE__ */ jsx37(
+              /* @__PURE__ */ jsx38(Canvas, {}),
+              /* @__PURE__ */ jsx38("div", { className: getLayoutClassName("rightSideBar"), children: /* @__PURE__ */ jsx38(
                 SidebarSection,
                 {
                   noPadding: true,
                   noBorderTop: true,
                   showBreadcrumbs: true,
                   title: selectedItem ? selectedComponentLabel : "Page",
-                  children: /* @__PURE__ */ jsx37(Fields, {})
+                  children: /* @__PURE__ */ jsx38(Fields, {})
                 }
               ) })
             ] })
@@ -7173,7 +7228,7 @@ function Puck({
         ) }) })
       }
     ),
-    /* @__PURE__ */ jsx37("div", { id: "puck-portal-root", className: getClassName27("portal") })
+    /* @__PURE__ */ jsx38("div", { id: "puck-portal-root", className: getClassName27("portal") })
   ] });
 }
 Puck.Components = Components;
@@ -7181,62 +7236,6 @@ Puck.Fields = Fields;
 Puck.Outline = Outline;
 Puck.Preview = Preview;
 
-// components/Render/index.tsx
-init_react_import();
-import { jsx as jsx38 } from "react/jsx-runtime";
-function Render({
-  config,
-  data
-}) {
-  var _a;
-  const defaultedData = __spreadProps(__spreadValues({}, data), {
-    root: data.root || {},
-    content: data.content || []
-  });
-  const rootProps = defaultedData.root.props || defaultedData.root;
-  const title = (rootProps == null ? void 0 : rootProps.title) || "";
-  if ((_a = config.root) == null ? void 0 : _a.render) {
-    return /* @__PURE__ */ jsx38(
-      DropZoneProvider,
-      {
-        value: {
-          data: defaultedData,
-          config,
-          mode: "render",
-          depth: 0,
-          path: []
-        },
-        children: /* @__PURE__ */ jsx38(
-          config.root.render,
-          __spreadProps(__spreadValues({}, rootProps), {
-            puck: {
-              renderDropZone: DropZone,
-              isEditing: false
-            },
-            title,
-            editMode: false,
-            id: "puck-root",
-            children: /* @__PURE__ */ jsx38(DropZone, { zone: rootDroppableId })
-          })
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx38(
-    DropZoneProvider,
-    {
-      value: {
-        data: defaultedData,
-        config,
-        mode: "render",
-        depth: 0,
-        path: []
-      },
-      children: /* @__PURE__ */ jsx38(DropZone, { zone: rootDroppableId })
-    }
-  );
-}
-
 // lib/migrate.ts
 init_react_import();
 var migrations = [