@measured/puck 0.18.0-canary.d253d54 → 0.18.0-canary.e6e29ad

package/dist/index.js

@@ -1161,6 +1161,7 @@ var defaultAppState = {
     itemSelector: null,
     componentList: {},
     isDragging: false,
+    previewMode: "edit",
     viewports: {
       current: {
         width: defaultViewports[0].width,
@@ -2523,52 +2524,26 @@ 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
-var import_react27 = require("react");
+var import_react26 = require("react");
 
 // components/DragDropContext/index.tsx
 init_react_import();
-var import_react25 = require("@dnd-kit/react");
-var import_react26 = require("react");
+var import_react24 = require("@dnd-kit/react");
+var import_react25 = require("react");
 var import_dom = require("@dnd-kit/dom");
 
 // components/DropZone/index.tsx
 init_react_import();
-var import_react24 = require("react");
+var import_react23 = require("react");
 
 // components/DraggableComponent/index.tsx
 init_react_import();
-var import_react21 = require("react");
+var import_react20 = require("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();
-var import_react20 = require("react");
-var useModifierHeld = (modifier) => {
-  const [modifierHeld, setModifierHeld] = (0, import_react20.useState)(false);
-  (0, import_react20.useEffect)(() => {
-    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
 var import_react_dom2 = require("react-dom");
 
@@ -2970,10 +2945,9 @@ var DraggableComponent = ({
     iframe,
     state
   } = useAppContext();
-  const isModifierHeld = useModifierHeld("Alt");
-  const ctx = (0, import_react21.useContext)(dropZoneContext);
-  const [localZones, setLocalZones] = (0, import_react21.useState)({});
-  const registerLocalZone = (0, import_react21.useCallback)(
+  const ctx = (0, import_react20.useContext)(dropZoneContext);
+  const [localZones, setLocalZones] = (0, import_react20.useState)({});
+  const registerLocalZone = (0, import_react20.useCallback)(
     (zoneCompound2, active) => {
       var _a;
       (_a = ctx == null ? void 0 : ctx.registerLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2, active);
@@ -2983,7 +2957,7 @@ var DraggableComponent = ({
     },
     [setLocalZones]
   );
-  const unregisterLocalZone = (0, import_react21.useCallback)(
+  const unregisterLocalZone = (0, import_react20.useCallback)(
     (zoneCompound2) => {
       var _a;
       (_a = ctx == null ? void 0 : ctx.unregisterLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2);
@@ -2997,8 +2971,8 @@ var DraggableComponent = ({
   );
   const containsActiveZone = Object.values(localZones).filter(Boolean).length > 0;
   const { path = [] } = ctx || {};
-  const [canDrag, setCanDrag] = (0, import_react21.useState)(false);
-  (0, import_react21.useEffect)(() => {
+  const [canDrag, setCanDrag] = (0, import_react20.useState)(false);
+  (0, import_react20.useEffect)(() => {
     var _a;
     const item = getItem({ index, zone: zoneCompound }, state.data);
     if (item) {
@@ -3011,7 +2985,7 @@ var DraggableComponent = ({
   const userIsDragging = !!(ctx == null ? void 0 : ctx.draggedItem);
   const canCollide = canDrag || userIsDragging;
   const disabled = !isEnabled || !canCollide;
-  const [dragAxis, setDragAxis] = (0, import_react21.useState)(userDragAxis || autoDragAxis);
+  const [dragAxis, setDragAxis] = (0, import_react20.useState)(userDragAxis || autoDragAxis);
   const { ref: sortableRef, status } = useSortableSafe({
     id,
     index,
@@ -3037,8 +3011,8 @@ var DraggableComponent = ({
     }
   });
   const thisIsDragging = status === "dragging";
-  const ref = (0, import_react21.useRef)(null);
-  const refSetter = (0, import_react21.useCallback)(
+  const ref = (0, import_react20.useRef)(null);
+  const refSetter = (0, import_react20.useCallback)(
     (el) => {
       sortableRef(el);
       if (el) {
@@ -3047,14 +3021,14 @@ var DraggableComponent = ({
     },
     [sortableRef]
   );
-  const [portalEl, setPortalEl] = (0, import_react21.useState)();
-  (0, import_react21.useEffect)(() => {
+  const [portalEl, setPortalEl] = (0, import_react20.useState)();
+  (0, import_react20.useEffect)(() => {
     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
     );
   }, [iframe.enabled, ref.current]);
-  const getStyle = (0, import_react21.useCallback)(() => {
+  const getStyle = (0, import_react20.useCallback)(() => {
     var _a, _b, _c;
     if (!ref.current) return;
     const rect = ref.current.getBoundingClientRect();
@@ -3074,11 +3048,11 @@ var DraggableComponent = ({
     };
     return style2;
   }, [ref.current]);
-  const [style, setStyle] = (0, import_react21.useState)();
-  const sync = (0, import_react21.useCallback)(() => {
+  const [style, setStyle] = (0, import_react20.useState)();
+  const sync = (0, import_react20.useCallback)(() => {
     setStyle(getStyle());
   }, [ref.current, iframe]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (ref.current) {
       const observer = new ResizeObserver(sync);
       observer.observe(ref.current);
@@ -3087,20 +3061,20 @@ var DraggableComponent = ({
       };
     }
   }, [ref.current]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     ctx == null ? void 0 : ctx.registerPath({
       index,
       zone: zoneCompound
     });
   }, [isSelected]);
-  const CustomActionBar = (0, import_react21.useMemo)(
+  const CustomActionBar = (0, import_react20.useMemo)(
     () => overrides.actionBar || DefaultActionBar,
     [overrides.actionBar]
   );
   const permissions = getPermissions({
     item: selectedItem
   });
-  const onClick = (0, import_react21.useCallback)(
+  const onClick = (0, import_react20.useCallback)(
     (e) => {
       e.stopPropagation();
       dispatch({
@@ -3112,7 +3086,7 @@ var DraggableComponent = ({
     },
     [index, zoneCompound, id]
   );
-  const onSelectParent = (0, import_react21.useCallback)(() => {
+  const onSelectParent = (0, import_react20.useCallback)(() => {
     if (!(ctx == null ? void 0 : ctx.areaId)) {
       return;
     }
@@ -3130,23 +3104,23 @@ var DraggableComponent = ({
       }
     });
   }, [ctx, path]);
-  const onDuplicate = (0, import_react21.useCallback)(() => {
+  const onDuplicate = (0, import_react20.useCallback)(() => {
     dispatch({
       type: "duplicate",
       sourceIndex: index,
       sourceZone: zoneCompound
     });
   }, [index, zoneCompound]);
-  const onDelete = (0, import_react21.useCallback)(() => {
+  const onDelete = (0, import_react20.useCallback)(() => {
     dispatch({
       type: "remove",
       index,
       zone: zoneCompound
     });
   }, [index, zoneCompound]);
-  const [hover, setHover] = (0, import_react21.useState)(false);
+  const [hover, setHover] = (0, import_react20.useState)(false);
   const indicativeHover = (ctx == null ? void 0 : ctx.hoveringComponent) === id;
-  (0, import_react21.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!ref.current) {
       return;
     }
@@ -3196,7 +3170,7 @@ var DraggableComponent = ({
     thisIsDragging,
     inDroppableZone
   ]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (ref.current && disabled) {
       ref.current.setAttribute("data-puck-disabled", "");
       return () => {
@@ -3205,8 +3179,8 @@ var DraggableComponent = ({
       };
     }
   }, [disabled, ref]);
-  const [isVisible, setIsVisible] = (0, import_react21.useState)(false);
-  (0, import_react21.useEffect)(() => {
+  const [isVisible, setIsVisible] = (0, import_react20.useState)(false);
+  (0, import_react20.useEffect)(() => {
     sync();
     if ((isSelected || hover || indicativeHover) && !userIsDragging) {
       setIsVisible(true);
@@ -3214,7 +3188,7 @@ var DraggableComponent = ({
       setIsVisible(false);
     }
   }, [isSelected, hover, indicativeHover, iframe, state.data, userIsDragging]);
-  const syncActionsPosition = (0, import_react21.useCallback)(
+  const syncActionsPosition = (0, import_react20.useCallback)(
     (el) => {
       if (el) {
         const view = el.ownerDocument.defaultView;
@@ -3231,7 +3205,7 @@ var DraggableComponent = ({
     },
     [zoomConfig]
   );
-  (0, import_react21.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (userDragAxis) {
       setDragAxis(userDragAxis);
       return;
@@ -3266,7 +3240,6 @@ var DraggableComponent = ({
               className: getClassName16({
                 isSelected,
                 isDragging: thisIsDragging,
-                isModifierHeld,
                 hover: hover || indicativeHover
               }),
               style: __spreadValues({}, style),
@@ -3326,26 +3299,26 @@ var styles_module_default12 = { "DropZone": "_DropZone_kmkdc_1", "DropZone--isAc
 
 // components/DropZone/context.tsx
 init_react_import();
-var import_react22 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var dropZoneContext = (0, import_react22.createContext)(null);
+var dropZoneContext = (0, import_react21.createContext)(null);
 var DropZoneProvider = ({
   children,
   value
 }) => {
-  const [hoveringComponent, setHoveringComponent] = (0, import_react22.useState)();
-  const [areasWithZones, setAreasWithZones] = (0, import_react22.useState)(
+  const [hoveringComponent, setHoveringComponent] = (0, import_react21.useState)();
+  const [areasWithZones, setAreasWithZones] = (0, import_react21.useState)(
     {}
   );
-  const [activeZones, setActiveZones] = (0, import_react22.useState)({});
-  const { dispatch = null } = value ? value : {};
-  const registerZoneArea = (0, import_react22.useCallback)(
+  const [activeZones, setActiveZones] = (0, import_react21.useState)({});
+  const { dispatch } = useAppContext();
+  const registerZoneArea = (0, import_react21.useCallback)(
     (area) => {
       setAreasWithZones((latest) => __spreadProps(__spreadValues({}, latest), { [area]: true }));
     },
     [setAreasWithZones]
   );
-  const registerZone = (0, import_react22.useCallback)(
+  const registerZone = (0, import_react21.useCallback)(
     (zoneCompound) => {
       if (!dispatch) {
         return;
@@ -3358,7 +3331,7 @@ var DropZoneProvider = ({
     },
     [setActiveZones, dispatch]
   );
-  const unregisterZone = (0, import_react22.useCallback)(
+  const unregisterZone = (0, import_react21.useCallback)(
     (zoneCompound) => {
       if (!dispatch) {
         return;
@@ -3373,7 +3346,7 @@ var DropZoneProvider = ({
     },
     [setActiveZones, dispatch]
   );
-  const memoValue = (0, import_react22.useMemo)(
+  const memoValue = (0, import_react21.useMemo)(
     () => __spreadValues({
       hoveringComponent,
       setHoveringComponent,
@@ -3398,16 +3371,16 @@ var insert = (list, index, item) => {
 
 // components/DropZone/use-min-empty-height.ts
 init_react_import();
-var import_react23 = require("react");
+var import_react22 = require("react");
 var useMinEmptyHeight = ({
   draggedItem,
   zoneCompound,
   userMinEmptyHeight,
   ref
 }) => {
-  const [prevHeight, setPrevHeight] = (0, import_react23.useState)(0);
-  const [isAnimating, setIsAnimating] = (0, import_react23.useState)(false);
-  (0, import_react23.useEffect)(() => {
+  const [prevHeight, setPrevHeight] = (0, import_react22.useState)(0);
+  const [isAnimating, setIsAnimating] = (0, import_react22.useState)(false);
+  (0, import_react22.useEffect)(() => {
     if (draggedItem && ref.current) {
       const componentData = draggedItem.data;
       if (componentData.zone === zoneCompound) {
@@ -3447,7 +3420,7 @@ var DEBUG3 = false;
 var GRID_DRAG_AXIS = "dynamic";
 var FLEX_ROW_DRAG_AXIS = "x";
 var DEFAULT_DRAG_AXIS = "y";
-var DropZoneEdit = (0, import_react24.forwardRef)(
+var DropZoneEdit = (0, import_react23.forwardRef)(
   function DropZoneEdit2({
     zone,
     allow,
@@ -3458,7 +3431,7 @@ var DropZoneEdit = (0, import_react24.forwardRef)(
     collisionAxis
   }, userRef) {
     const appContext2 = useAppContext();
-    const ctx = (0, import_react24.useContext)(dropZoneContext);
+    const ctx = (0, import_react23.useContext)(dropZoneContext);
     const {
       // These all need setting via context
       data,
@@ -3477,12 +3450,12 @@ var DropZoneEdit = (0, import_react24.forwardRef)(
     } = ctx;
     const { itemSelector } = appContext2.state.ui;
     let zoneCompound = rootDroppableId;
-    (0, import_react24.useEffect)(() => {
+    (0, import_react23.useEffect)(() => {
       if (areaId && registerZoneArea) {
         registerZoneArea(areaId);
       }
     }, [areaId]);
-    (0, import_react24.useEffect)(() => {
+    (0, import_react23.useEffect)(() => {
       if (ctx == null ? void 0 : ctx.registerZone) {
         ctx == null ? void 0 : ctx.registerZone(zoneCompound);
       }
@@ -3497,14 +3470,14 @@ var DropZoneEdit = (0, import_react24.forwardRef)(
         zoneCompound = `${areaId}:${zone}`;
       }
     }
-    const content = (0, import_react24.useMemo)(() => {
+    const content = (0, import_react23.useMemo)(() => {
       if (areaId && zone !== rootDroppableId) {
         return setupZone(data, zoneCompound).zones[zoneCompound];
       }
       return data.content || [];
     }, [data, zoneCompound]);
-    const ref = (0, import_react24.useRef)(null);
-    const acceptsTarget = (0, import_react24.useCallback)(
+    const ref = (0, import_react23.useRef)(null);
+    const acceptsTarget = (0, import_react23.useCallback)(
       (target) => {
         if (!target) {
           return true;
@@ -3528,7 +3501,7 @@ var DropZoneEdit = (0, import_react24.forwardRef)(
       },
       [allow, disallow]
     );
-    (0, import_react24.useEffect)(() => {
+    (0, import_react23.useEffect)(() => {
       if (registerLocalZone) {
         registerLocalZone(zoneCompound, acceptsTarget(draggedItem));
       }
@@ -3548,9 +3521,9 @@ var DropZoneEdit = (0, import_react24.forwardRef)(
     if (isEnabled) {
       isEnabled = acceptsTarget(draggedItem);
     }
-    const preview = (0, import_react24.useContext)(previewContext);
+    const preview = (0, import_react23.useContext)(previewContext);
     const previewInZone = (preview == null ? void 0 : preview.zone) === zoneCompound;
-    const contentWithPreview = (0, import_react24.useMemo)(() => {
+    const contentWithPreview = (0, import_react23.useMemo)(() => {
       let contentWithPreview2 = preview ? content.filter((item) => item.props.id !== preview.props.id) : content;
       if (previewInZone) {
         contentWithPreview2 = content.filter(
@@ -3587,10 +3560,10 @@ var DropZoneEdit = (0, import_react24.forwardRef)(
     const { ref: dropRef } = useDroppableSafe(droppableConfig);
     const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
     const isAreaSelected = selectedItem && areaId === selectedItem.props.id;
-    const [dragAxis, setDragAxis] = (0, import_react24.useState)(
+    const [dragAxis, setDragAxis] = (0, import_react23.useState)(
       collisionAxis || DEFAULT_DRAG_AXIS
     );
-    const calculateDragAxis = (0, import_react24.useCallback)(() => {
+    const calculateDragAxis = (0, import_react23.useCallback)(() => {
       if (ref.current) {
         const computedStyle = window.getComputedStyle(ref.current);
         if (computedStyle.display === "grid") {
@@ -3602,8 +3575,8 @@ var DropZoneEdit = (0, import_react24.forwardRef)(
         }
       }
     }, [ref.current]);
-    (0, import_react24.useEffect)(calculateDragAxis, [appContext2.status, collisionAxis]);
-    (0, import_react24.useEffect)(() => {
+    (0, import_react23.useEffect)(calculateDragAxis, [appContext2.status, collisionAxis]);
+    (0, import_react23.useEffect)(() => {
       const onViewportChange = () => {
         calculateDragAxis();
       };
@@ -3713,12 +3686,22 @@ var DropZoneEdit = (0, import_react24.forwardRef)(
     );
   }
 );
-var DropZoneRender = (0, import_react24.forwardRef)(
+var DropZoneRender = (0, import_react23.forwardRef)(
   function DropZoneRender2({ className, style, zone }, ref) {
-    const ctx = (0, import_react24.useContext)(dropZoneContext);
+    const ctx = (0, import_react23.useContext)(dropZoneContext);
     const { data, areaId = "root", config } = ctx || {};
     let zoneCompound = rootDroppableId;
     let content = (data == null ? void 0 : data.content) || [];
+    (0, import_react23.useEffect)(() => {
+      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;
     }
@@ -3753,9 +3736,9 @@ var DropZoneRender = (0, import_react24.forwardRef)(
     }) });
   }
 );
-var DropZone = (0, import_react24.forwardRef)(
+var DropZone = (0, import_react23.forwardRef)(
   function DropZone2(props, ref) {
-    const ctx = (0, import_react24.useContext)(dropZoneContext);
+    const ctx = (0, import_react23.useContext)(dropZoneContext);
     if ((ctx == null ? void 0 : ctx.mode) === "edit") {
       return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
     }
@@ -4631,12 +4614,12 @@ function patchWindow(window2) {
 
 // components/DragDropContext/index.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var dragListenerContext = (0, import_react26.createContext)({
+var dragListenerContext = (0, import_react25.createContext)({
   dragListeners: {}
 });
 function useDragListener(type, fn, deps = []) {
-  const { setDragListeners } = (0, import_react26.useContext)(dragListenerContext);
-  (0, import_react26.useEffect)(() => {
+  const { setDragListeners } = (0, import_react25.useContext)(dragListenerContext);
+  (0, import_react25.useEffect)(() => {
     if (setDragListeners) {
       setDragListeners((old) => __spreadProps(__spreadValues({}, old), {
         [type]: [...old[type] || [], fn]
@@ -4644,21 +4627,21 @@ function useDragListener(type, fn, deps = []) {
     }
   }, deps);
 }
-var previewContext = (0, import_react26.createContext)(null);
+var previewContext = (0, import_react25.createContext)(null);
 var AREA_CHANGE_DEBOUNCE_MS = 100;
 var DragDropContextClient = ({
   children,
   disableAutoScroll
 }) => {
   const { state, config, dispatch, resolveData } = useAppContext();
-  const [preview, setPreview] = (0, import_react26.useState)(null);
-  const previewRef = (0, import_react26.useRef)(null);
+  const [preview, setPreview] = (0, import_react25.useState)(null);
+  const previewRef = (0, import_react25.useRef)(null);
   const { data } = state;
-  const [deepest, setDeepest] = (0, import_react26.useState)(null);
-  const [nextDeepest, setNextDeepest] = (0, import_react26.useState)(null);
-  const deepestRef = (0, import_react26.useRef)(deepest);
-  const debouncedParamsRef = (0, import_react26.useRef)(null);
-  const setDeepestAndCollide = (0, import_react26.useCallback)(
+  const [deepest, setDeepest] = (0, import_react25.useState)(null);
+  const [nextDeepest, setNextDeepest] = (0, import_react25.useState)(null);
+  const deepestRef = (0, import_react25.useRef)(deepest);
+  const debouncedParamsRef = (0, import_react25.useRef)(null);
+  const setDeepestAndCollide = (0, import_react25.useCallback)(
     (params, manager) => {
       setDeepest(params);
       setTimeout(() => {
@@ -4672,14 +4655,14 @@ var DragDropContextClient = ({
     setDeepestAndCollide,
     AREA_CHANGE_DEBOUNCE_MS
   );
-  (0, import_react26.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     deepestRef.current = deepest;
   }, [deepest]);
   const cancelDb = () => {
     setDeepestDb.cancel();
     debouncedParamsRef.current = null;
   };
-  const [plugins] = (0, import_react26.useState)(() => [
+  const [plugins] = (0, import_react25.useState)(() => [
     ...disableAutoScroll ? import_dom.defaultPreset.plugins.filter((plugin) => plugin !== import_dom.AutoScroller) : import_dom.defaultPreset.plugins,
     createNestedDroppablePlugin({
       onChange: (params, manager) => {
@@ -4717,7 +4700,7 @@ var DragDropContextClient = ({
       }
     })
   ]);
-  const [sensors] = (0, import_react26.useState)(() => [
+  const [sensors] = (0, import_react25.useState)(() => [
     PointerSensor.configure({
       activationConstraints(event, source) {
         var _a;
@@ -4736,11 +4719,11 @@ var DragDropContextClient = ({
       }
     })
   ]);
-  const [draggedItem, setDraggedItem] = (0, import_react26.useState)();
-  const [dragListeners, setDragListeners] = (0, import_react26.useState)({});
-  const [pathData, setPathData] = (0, import_react26.useState)();
-  const dragMode = (0, import_react26.useRef)(null);
-  const registerPath = (0, import_react26.useCallback)(
+  const [draggedItem, setDraggedItem] = (0, import_react25.useState)();
+  const [dragListeners, setDragListeners] = (0, import_react25.useState)({});
+  const [pathData, setPathData] = (0, import_react25.useState)();
+  const dragMode = (0, import_react25.useRef)(null);
+  const registerPath = (0, import_react25.useCallback)(
     (selector) => {
       const item = getItem(selector, data);
       if (!item) {
@@ -4762,7 +4745,7 @@ var DragDropContextClient = ({
     },
     [data, setPathData]
   );
-  const initialSelector = (0, import_react26.useRef)(void 0);
+  const initialSelector = (0, import_react25.useRef)(void 0);
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     dragListenerContext.Provider,
     {
@@ -4771,7 +4754,7 @@ var DragDropContextClient = ({
         setDragListeners
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(previewContext.Provider, { value: preview, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-        import_react25.DragDropProvider,
+        import_react24.DragDropProvider,
         {
           plugins,
           sensors,
@@ -4926,7 +4909,6 @@ var DragDropContextClient = ({
               value: {
                 data,
                 config,
-                dispatch,
                 draggedItem,
                 mode: "edit",
                 areaId: "root",
@@ -4969,7 +4951,7 @@ var DrawerItemInner = ({
   dragRef,
   isDragDisabled
 }) => {
-  const CustomInner = (0, import_react27.useMemo)(
+  const CustomInner = (0, import_react26.useMemo)(
     () => children || (({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: getClassNameItem2("default"), children: children2 })),
     [children]
   );
@@ -5023,7 +5005,7 @@ var DrawerItem = ({
   isDragDisabled
 }) => {
   const resolvedId = id || name;
-  const [dynamicId, setDynamicId] = (0, import_react27.useState)(generateId(resolvedId));
+  const [dynamicId, setDynamicId] = (0, import_react26.useState)(generateId(resolvedId));
   if (typeof index !== "undefined") {
     console.error(
       "Warning: The `index` prop on Drawer.Item is deprecated and no longer required."
@@ -5062,7 +5044,7 @@ var Drawer = ({
       "Warning: The `direction` prop on Drawer is deprecated and no longer required to achieve multi-directional dragging."
     );
   }
-  const [id] = (0, import_react27.useState)(generateId());
+  const [id] = (0, import_react26.useState)(generateId());
   const { ref } = useDroppableSafe({
     id,
     type: "void",
@@ -5095,7 +5077,7 @@ var styles_module_default13 = { "SidebarSection": "_SidebarSection_125qe_1", "Si
 
 // lib/use-breadcrumbs.ts
 init_react_import();
-var import_react28 = require("react");
+var import_react27 = require("react");
 var convertPathDataToBreadcrumbs = (selectedItem, pathData, data) => {
   const id = selectedItem ? selectedItem == null ? void 0 : selectedItem.props.id : "";
   const currentPathData = pathData && id && pathData[id] ? __spreadValues({}, pathData[id]) : { label: "Page", path: [] };
@@ -5145,8 +5127,8 @@ var useBreadcrumbs = (renderCount) => {
     state: { data },
     selectedItem
   } = useAppContext();
-  const dzContext = (0, import_react28.useContext)(dropZoneContext);
-  return (0, import_react28.useMemo)(() => {
+  const dzContext = (0, import_react27.useContext)(dropZoneContext);
+  return (0, import_react27.useMemo)(() => {
     const breadcrumbs = convertPathDataToBreadcrumbs(
       selectedItem,
       dzContext == null ? void 0 : dzContext.pathData,
@@ -5280,15 +5262,15 @@ 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
-var import_react30 = require("react");
+var import_react29 = require("react");
 
 // lib/use-parent.ts
 init_react_import();
-var import_react29 = require("react");
+var import_react28 = require("react");
 var useParent = (itemSelector) => {
   var _a;
   const { selectedItem, state } = useAppContext();
-  const { pathData } = (0, import_react29.useContext)(dropZoneContext) || {};
+  const { pathData } = (0, import_react28.useContext)(dropZoneContext) || {};
   const item = itemSelector ? getItem(itemSelector, state.data) : selectedItem;
   const breadcrumbs = convertPathDataToBreadcrumbs(item, pathData, state.data);
   const lastItem = breadcrumbs[breadcrumbs.length - 1];
@@ -5314,20 +5296,20 @@ var useResolvedFields = () => {
   const { data } = state;
   const rootFields = ((_a = config.root) == null ? void 0 : _a.fields) || defaultPageFields;
   const componentConfig = selectedItem ? config.components[selectedItem.type] : null;
-  const defaultFields = (0, import_react30.useMemo)(
+  const defaultFields = (0, import_react29.useMemo)(
     () => (selectedItem ? componentConfig == null ? void 0 : componentConfig.fields : rootFields) || {},
     [selectedItem, rootFields, componentConfig == null ? void 0 : componentConfig.fields]
   );
   const rootProps = data.root.props || data.root;
-  const [lastSelectedData, setLastSelectedData] = (0, import_react30.useState)({});
-  const [resolvedFields, setResolvedFields] = (0, import_react30.useState)(defaultFields);
-  const [fieldsLoading, setFieldsLoading] = (0, import_react30.useState)(false);
+  const [lastSelectedData, setLastSelectedData] = (0, import_react29.useState)({});
+  const [resolvedFields, setResolvedFields] = (0, import_react29.useState)(defaultFields);
+  const [fieldsLoading, setFieldsLoading] = (0, import_react29.useState)(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);
   const hasRootResolver = !selectedItem && ((_b = config.root) == null ? void 0 : _b.resolveFields);
   const hasResolver = hasComponentResolver || hasRootResolver;
-  const resolveFields = (0, import_react30.useCallback)(
+  const resolveFields = (0, import_react29.useCallback)(
     (..._0) => __async(void 0, [..._0], function* (fields = {}) {
       var _a2;
       const lastData = ((_a2 = lastSelectedData.props) == null ? void 0 : _a2.id) === componentData.props.id ? lastSelectedData : null;
@@ -5365,7 +5347,7 @@ var useResolvedFields = () => {
     }),
     [data, config, componentData, selectedItem, resolvedFields, state]
   );
-  (0, import_react30.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (hasResolver) {
       setFieldsLoading(true);
       resolveFields(defaultFields).then((fields) => {
@@ -5396,7 +5378,7 @@ var Fields = () => {
   const componentResolving = selectedItem ? ((_a = componentState[selectedItem == null ? void 0 : selectedItem.props.id]) == null ? void 0 : _a.loadingCount) > 0 : ((_b = componentState["puck-root"]) == null ? void 0 : _b.loadingCount) > 0;
   const isLoading = fieldsResolving || componentResolving;
   const rootProps = data.root.props || data.root;
-  const Wrapper = (0, import_react30.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
+  const Wrapper = (0, import_react29.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "form",
     {
@@ -5519,7 +5501,7 @@ init_react_import();
 
 // lib/use-component-list.tsx
 init_react_import();
-var import_react31 = require("react");
+var import_react30 = require("react");
 
 // components/ComponentList/index.tsx
 init_react_import();
@@ -5586,8 +5568,8 @@ ComponentList.Item = ComponentListItem;
 // lib/use-component-list.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var useComponentList = (config, ui) => {
-  const [componentList, setComponentList] = (0, import_react31.useState)();
-  (0, import_react31.useEffect)(() => {
+  const [componentList, setComponentList] = (0, import_react30.useState)();
+  (0, import_react30.useEffect)(() => {
     var _a, _b, _c;
     if (Object.keys(ui.componentList).length > 0) {
       const matchedComponents = [];
@@ -5656,22 +5638,22 @@ var useComponentList = (config, ui) => {
 };
 
 // components/Puck/components/Components/index.tsx
-var import_react32 = require("react");
+var import_react31 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var Components = () => {
   const { config, state, overrides } = useAppContext();
   const componentList = useComponentList(config, state.ui);
-  const Wrapper = (0, import_react32.useMemo)(() => overrides.components || "div", [overrides]);
+  const Wrapper = (0, import_react31.useMemo)(() => overrides.components || "div", [overrides]);
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ComponentList, { id: "all" }) });
 };
 
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-var import_react34 = require("react");
+var import_react33 = require("react");
 
 // components/AutoFrame/index.tsx
 init_react_import();
-var import_react33 = require("react");
+var import_react32 = require("react");
 var import_object_hash = __toESM(require("object-hash"));
 var import_react_dom3 = require("react-dom");
 var import_jsx_runtime30 = require("react/jsx-runtime");
@@ -5717,7 +5699,7 @@ var CopyHostStyles = ({
   onStylesLoaded = () => null
 }) => {
   const { document: doc, window: win } = useFrame();
-  (0, import_react33.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (!win || !doc) {
       return () => {
       };
@@ -5876,8 +5858,8 @@ var CopyHostStyles = ({
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children });
 };
-var autoFrameContext = (0, import_react33.createContext)({});
-var useFrame = () => (0, import_react33.useContext)(autoFrameContext);
+var autoFrameContext = (0, import_react32.createContext)({});
+var useFrame = () => (0, import_react32.useContext)(autoFrameContext);
 function AutoFrame(_a) {
   var _b = _a, {
     children,
@@ -5894,10 +5876,10 @@ function AutoFrame(_a) {
     "onStylesLoaded",
     "frameRef"
   ]);
-  const [loaded, setLoaded] = (0, import_react33.useState)(false);
-  const [ctx, setCtx] = (0, import_react33.useState)({});
-  const [mountTarget, setMountTarget] = (0, import_react33.useState)();
-  (0, import_react33.useEffect)(() => {
+  const [loaded, setLoaded] = (0, import_react32.useState)(false);
+  const [ctx, setCtx] = (0, import_react32.useState)({});
+  const [mountTarget, setMountTarget] = (0, import_react32.useState)();
+  (0, import_react32.useEffect)(() => {
     var _a2;
     if (frameRef.current) {
       setCtx({
@@ -5930,12 +5912,68 @@ var AutoFrame_default = AutoFrame;
 init_react_import();
 var styles_module_default18 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPreview-frame": "_PuckPreview-frame_z2rgu_6" };
 
-// components/Puck/components/Preview/index.tsx
+// components/Render/index.tsx
+init_react_import();
 var import_jsx_runtime31 = require("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__ */ (0, import_jsx_runtime31.jsx)(
+      DropZoneProvider,
+      {
+        value: {
+          data: defaultedData,
+          config,
+          mode: "render",
+          depth: 0,
+          path: []
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          config.root.render,
+          __spreadProps(__spreadValues({}, rootProps), {
+            puck: {
+              renderDropZone: DropZone,
+              isEditing: false
+            },
+            title,
+            editMode: false,
+            id: "puck-root",
+            children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DropZone, { zone: rootDroppableId })
+          })
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    DropZoneProvider,
+    {
+      value: {
+        data: defaultedData,
+        config,
+        mode: "render",
+        depth: 0,
+        path: []
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DropZone, { zone: rootDroppableId })
+    }
+  );
+}
+
+// components/Puck/components/Preview/index.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var getClassName23 = get_class_name_factory_default("PuckPreview", styles_module_default18);
 var useBubbleIframeEvents = (ref) => {
   const { status } = useAppContext();
-  (0, import_react34.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     var _a;
     if (ref.current && status === "READY") {
       const iframe = ref.current;
@@ -5974,20 +6012,32 @@ var useBubbleIframeEvents = (ref) => {
 };
 var Preview = ({ id = "puck-preview" }) => {
   const { config, dispatch, state, setStatus, iframe, overrides } = useAppContext();
-  const Page = (0, import_react34.useCallback)(
+  const Page = (0, import_react33.useCallback)(
     (pageProps) => {
       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__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children: pageProps.children });
+      }, pageProps)) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: pageProps.children });
     },
     [config.root]
   );
-  const Frame = (0, import_react34.useMemo)(() => overrides.iframe, [overrides]);
+  const Frame = (0, import_react33.useMemo)(() => overrides.iframe, [overrides]);
   const rootProps = state.data.root.props || state.data.root;
-  const ref = (0, import_react34.useRef)(null);
+  const ref = (0, import_react33.useRef)(null);
   useBubbleIframeEvents(ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  const inner = state.ui.previewMode === "edit" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    Page,
+    __spreadProps(__spreadValues({}, rootProps), {
+      puck: {
+        renderDropZone: DropZone,
+        isEditing: true,
+        dragRef: null
+      },
+      editMode: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropZone, { zone: rootDroppableId })
+    })
+  ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Render, { data: state.data, config });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
       className: getClassName23(),
@@ -5996,7 +6046,7 @@ var Preview = ({ id = "puck-preview" }) => {
       onClick: () => {
         dispatch({ type: "setUi", ui: __spreadProps(__spreadValues({}, state.ui), { itemSelector: null }) });
       },
-      children: iframe.enabled ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      children: iframe.enabled ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         AutoFrame_default,
         {
           id: "preview-frame",
@@ -6006,40 +6056,21 @@ var Preview = ({ id = "puck-preview" }) => {
             setStatus("READY");
           },
           frameRef: ref,
-          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
-            const inner = /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-              Page,
-              __spreadProps(__spreadValues({}, rootProps), {
-                puck: {
-                  renderDropZone: DropZone,
-                  isEditing: true,
-                  dragRef: null
-                },
-                editMode: true,
-                children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DropZone, { zone: rootDroppableId })
-              })
-            );
+          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
             if (Frame) {
-              return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Frame, { document: document2, children: inner });
+              return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Frame, { document: document2, children: inner });
             }
             return inner;
           } })
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "div",
         {
           id: "preview-frame",
           className: getClassName23("frame"),
           ref,
           "data-puck-entry": true,
-          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-            Page,
-            __spreadProps(__spreadValues({}, rootProps), {
-              puck: { renderDropZone: DropZone, isEditing: true, dragRef: null },
-              editMode: true,
-              children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DropZone, { zone: rootDroppableId })
-            })
-          )
+          children: inner
         }
       )
     }
@@ -6089,7 +6120,7 @@ var scrollIntoView = (el) => {
 };
 
 // components/LayerTree/index.tsx
-var import_react35 = require("react");
+var import_react34 = require("react");
 
 // lib/is-child-of-zone.ts
 init_react_import();
@@ -6122,7 +6153,7 @@ var onScrollEnd = (frame, cb) => {
 };
 
 // components/LayerTree/index.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("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 = ({
@@ -6135,15 +6166,15 @@ var LayerTree = ({
   label
 }) => {
   const zones = data.zones || {};
-  const ctx = (0, import_react35.useContext)(dropZoneContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: getClassName24("zoneTitle"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Layers, { size: "16" }) }),
+  const ctx = (0, import_react34.useContext)(dropZoneContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: getClassName24("zoneTitle"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Layers, { size: "16" }) }),
       " ",
       label
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("ul", { className: getClassName24(), children: [
-      zoneContent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: getClassName24("helper"), children: "No items" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("ul", { className: getClassName24(), children: [
+      zoneContent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("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);
@@ -6156,7 +6187,7 @@ var LayerTree = ({
         const childIsSelected = isChildOfZone(item, selectedItem, ctx);
         const componentConfig = config.components[item.type];
         const label2 = (_a = componentConfig == null ? void 0 : componentConfig["label"]) != null ? _a : item.type.toString();
-        return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
           "li",
           {
             className: getClassNameLayer({
@@ -6166,7 +6197,7 @@ var LayerTree = ({
               childIsSelected
             }),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -6205,22 +6236,22 @@ var LayerTree = ({
                     setHoveringComponent(null);
                   },
                   children: [
-                    containsZone && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                    containsZone && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       "div",
                       {
                         className: getClassNameLayer("chevron"),
                         title: isSelected ? "Collapse" : "Expand",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChevronDown, { size: "12" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChevronDown, { size: "12" })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: getClassNameLayer("title"), children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Type, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LayoutGrid, { size: "16" }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: getClassNameLayer("name"), children: label2 })
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: getClassNameLayer("title"), children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Type, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(LayoutGrid, { size: "16" }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassNameLayer("name"), children: label2 })
                     ] })
                   ]
                 }
               ) }),
-              containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                 LayerTree,
                 {
                   config,
@@ -6242,13 +6273,13 @@ var LayerTree = ({
 };
 
 // components/Puck/components/Outline/index.tsx
-var import_react36 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_react35 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var Outline = () => {
   const { dispatch, state, overrides, config } = useAppContext();
   const { data, ui } = state;
   const { itemSelector } = ui;
-  const setItemSelector = (0, import_react36.useCallback)(
+  const setItemSelector = (0, import_react35.useCallback)(
     (newItemSelector) => {
       dispatch({
         type: "setUi",
@@ -6257,9 +6288,9 @@ var Outline = () => {
     },
     []
   );
-  const Wrapper = (0, import_react36.useMemo)(() => overrides.outline || "div", [overrides]);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-    (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  const Wrapper = (0, import_react35.useMemo)(() => overrides.outline || "div", [overrides]);
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+    (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       LayerTree,
       {
         config,
@@ -6272,7 +6303,7 @@ var Outline = () => {
     ),
     Object.entries(findZonesForArea(data, "root")).map(
       ([zoneKey, zone]) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           LayerTree,
           {
             config,
@@ -6371,19 +6402,19 @@ function usePuckHistory({
 
 // lib/use-history-store.ts
 init_react_import();
-var import_react37 = require("react");
+var import_react36 = require("react");
 var import_use_debounce3 = require("use-debounce");
 var EMPTY_HISTORY_INDEX = 0;
 function useHistoryStore(initialHistory) {
   var _a, _b;
-  const [histories, setHistories] = (0, import_react37.useState)(
+  const [histories, setHistories] = (0, import_react36.useState)(
     (_a = initialHistory == null ? void 0 : initialHistory.histories) != null ? _a : []
   );
   const updateHistories = (histories2) => {
     setHistories(histories2);
     setIndex(histories2.length - 1);
   };
-  const [index, setIndex] = (0, import_react37.useState)(
+  const [index, setIndex] = (0, import_react36.useState)(
     (_b = initialHistory == null ? void 0 : initialHistory.index) != null ? _b : EMPTY_HISTORY_INDEX
   );
   const hasPast = index > EMPTY_HISTORY_INDEX;
@@ -6543,22 +6574,22 @@ var getBox = function getBox2(el) {
 };
 
 // components/Puck/components/Canvas/index.tsx
-var import_react39 = require("react");
+var import_react38 = require("react");
 
 // components/ViewportControls/index.tsx
 init_react_import();
-var import_react38 = require("react");
+var import_react37 = require("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
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var icons = {
-  Smartphone: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Smartphone, { size: 16 }),
-  Tablet: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Tablet, { size: 16 }),
-  Monitor: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Monitor, { size: 16 })
+  Smartphone: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Smartphone, { size: 16 }),
+  Tablet: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Tablet, { size: 16 }),
+  Monitor: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(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);
@@ -6570,11 +6601,11 @@ var ViewportButton = ({
   onClick
 }) => {
   const { state } = useAppContext();
-  const [isActive, setIsActive] = (0, import_react38.useState)(false);
-  (0, import_react38.useEffect)(() => {
+  const [isActive, setIsActive] = (0, import_react37.useState)(false);
+  (0, import_react37.useEffect)(() => {
     setIsActive(width === state.ui.viewports.current.width);
   }, [width, state.ui.viewports.current.width]);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     IconButton,
     {
       title,
@@ -6583,7 +6614,7 @@ var ViewportButton = ({
         e.stopPropagation();
         onClick({ width, height });
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: getClassNameButton("inner"), children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: getClassNameButton("inner"), children })
     }
   ) });
 };
@@ -6607,7 +6638,7 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
-  const zoomOptions = (0, import_react38.useMemo)(
+  const zoomOptions = (0, import_react37.useMemo)(
     () => [
       ...defaultZoomOptions,
       ...defaultsContainAutoZoom ? [] : [
@@ -6619,8 +6650,8 @@ var ViewportControls = ({
     ].filter((a) => a.value <= autoZoom).sort((a, b) => a.value > b.value ? 1 : -1),
     [autoZoom]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25(), children: [
-    viewports.map((viewport, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassName25(), children: [
+    viewports.map((viewport, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       ViewportButton,
       {
         height: viewport.height,
@@ -6631,8 +6662,8 @@ var ViewportControls = ({
       },
       i
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("divider") }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName25("divider") }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       IconButton,
       {
         title: "Zoom viewport out",
@@ -6646,10 +6677,10 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ZoomOut, { size: 16 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ZoomOut, { size: 16 })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       IconButton,
       {
         title: "Zoom viewport in",
@@ -6663,11 +6694,11 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ZoomIn, { size: 16 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ZoomIn, { size: 16 })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("divider") }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName25("divider") }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "select",
       {
         className: getClassName25("zoomSelect"),
@@ -6675,7 +6706,7 @@ var ViewportControls = ({
         onChange: (e) => {
           onZoom(parseFloat(e.currentTarget.value));
         },
-        children: zoomOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        children: zoomOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           "option",
           {
             value: option.value,
@@ -6723,24 +6754,24 @@ var getZoomConfig = (uiViewport, frame, zoom) => {
 };
 
 // components/Puck/components/Canvas/index.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var getClassName26 = get_class_name_factory_default("PuckCanvas", styles_module_default21);
 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_react39.useRef)(null);
-  const [showTransition, setShowTransition] = (0, import_react39.useState)(false);
-  const defaultRender = (0, import_react39.useMemo)(() => {
-    const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children });
+  const frameRef = (0, import_react38.useRef)(null);
+  const [showTransition, setShowTransition] = (0, import_react38.useState)(false);
+  const defaultRender = (0, import_react38.useMemo)(() => {
+    const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children });
     return PuckDefault;
   }, []);
-  const CustomPreview = (0, import_react39.useMemo)(
+  const CustomPreview = (0, import_react38.useMemo)(
     () => overrides.preview || defaultRender,
     [overrides]
   );
-  const getFrameDimensions = (0, import_react39.useCallback)(() => {
+  const getFrameDimensions = (0, import_react38.useCallback)(() => {
     if (frameRef.current) {
       const frame = frameRef.current;
       const box = getBox(frame);
@@ -6748,7 +6779,7 @@ var Canvas = () => {
     }
     return { width: 0, height: 0 };
   }, [frameRef]);
-  const resetAutoZoom = (0, import_react39.useCallback)(
+  const resetAutoZoom = (0, import_react38.useCallback)(
     (ui2 = state.ui) => {
       if (frameRef.current) {
         setZoomConfig(
@@ -6758,11 +6789,11 @@ var Canvas = () => {
     },
     [frameRef, zoomConfig, state.ui]
   );
-  (0, import_react39.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     setShowTransition(false);
     resetAutoZoom();
   }, [frameRef, ui.leftSideBarVisible, ui.rightSideBarVisible]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     const { height: frameHeight } = getFrameDimensions();
     if (ui.viewports.current.height === "auto") {
       setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
@@ -6770,13 +6801,13 @@ var Canvas = () => {
       }));
     }
   }, [zoomConfig.zoom]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (ZOOM_ON_CHANGE) {
       setShowTransition(true);
       resetAutoZoom(ui);
     }
   }, [ui.viewports.current.width]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     const cb = () => {
       setShowTransition(false);
       resetAutoZoom();
@@ -6786,13 +6817,13 @@ var Canvas = () => {
       window.removeEventListener("resize", cb);
     };
   }, []);
-  const [showLoader, setShowLoader] = (0, import_react39.useState)(false);
-  (0, import_react39.useEffect)(() => {
+  const [showLoader, setShowLoader] = (0, import_react38.useState)(false);
+  (0, import_react38.useEffect)(() => {
     setTimeout(() => {
       setShowLoader(true);
     }, 500);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "div",
     {
       className: getClassName26({
@@ -6805,7 +6836,7 @@ var Canvas = () => {
         recordHistory: true
       }),
       children: [
-        ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName26("controls"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: getClassName26("controls"), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           ViewportControls,
           {
             autoZoom: zoomConfig.autoZoom,
@@ -6831,8 +6862,8 @@ var Canvas = () => {
             }
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassName26("inner"), ref: frameRef, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: getClassName26("inner"), ref: frameRef, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "div",
             {
               className: getClassName26("root"),
@@ -6853,10 +6884,10 @@ var Canvas = () => {
                   })
                 );
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Preview, {}) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Preview, {}) })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName26("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Loader, { size: 24 }) })
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: getClassName26("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Loader, { size: 24 }) })
         ] })
       ]
     }
@@ -6865,7 +6896,7 @@ var Canvas = () => {
 
 // lib/use-loaded-overrides.ts
 init_react_import();
-var import_react40 = require("react");
+var import_react39 = require("react");
 
 // lib/load-overrides.ts
 init_react_import();
@@ -6904,26 +6935,26 @@ var useLoadedOverrides = ({
   overrides,
   plugins
 }) => {
-  return (0, import_react40.useMemo)(() => {
+  return (0, import_react39.useMemo)(() => {
     return loadOverrides({ overrides, plugins });
   }, [plugins, overrides]);
 };
 
 // components/DefaultOverride/index.tsx
 init_react_import();
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var DefaultOverride = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children });
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var DefaultOverride = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children });
 
 // lib/use-inject-css.ts
 init_react_import();
-var import_react41 = require("react");
+var import_react40 = require("react");
 var styles = ``;
 var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
-  const [el, setEl] = (0, import_react41.useState)();
-  (0, import_react41.useEffect)(() => {
+  const [el, setEl] = (0, import_react40.useState)();
+  (0, import_react40.useEffect)(() => {
     setEl(document.createElement("style"));
   }, []);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     var _a;
     if (!el || typeof window === "undefined") {
       return;
@@ -6941,8 +6972,35 @@ var useInjectGlobalCss = (iframeEnabled) => {
   return useInjectStyleSheet(styles, iframeEnabled);
 };
 
+// lib/use-preview-mode-hotkeys.ts
+init_react_import();
+var import_react41 = require("react");
+var import_react_hotkeys_hook2 = require("react-hotkeys-hook");
+var usePreviewModeHotkeys = (dispatch, iframeEnabled) => {
+  const toggleInteractive = (0, import_react41.useCallback)(() => {
+    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;
+  (0, import_react_hotkeys_hook2.useHotkeys)("meta+i", toggleInteractive, { preventDefault: true });
+  (0, import_react_hotkeys_hook2.useHotkeys)("meta+i", toggleInteractiveIframe, {
+    preventDefault: true,
+    document: resolvedFrame
+  });
+};
+
 // components/Puck/index.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("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({
@@ -7113,7 +7171,7 @@ function Puck({
       const RenderHeader = (_a2) => {
         var _b2 = _a2, { actions } = _b2, props = __objRest(_b2, ["actions"]);
         const Comp = renderHeader;
-        return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
+        return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
       };
       return RenderHeader;
     }
@@ -7126,7 +7184,7 @@ function Puck({
       );
       const RenderHeader = (props) => {
         const Comp = renderHeaderActions;
-        return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
+        return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
       };
       return RenderHeader;
     }
@@ -7154,8 +7212,9 @@ function Puck({
   }, []);
   const selectedComponentConfig = selectedItem && config.components[selectedItem.type];
   const selectedComponentLabel = selectedItem ? (_b = selectedComponentConfig == null ? void 0 : selectedComponentConfig["label"]) != null ? _b : selectedItem.type.toString() : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: `Puck ${getClassName27()}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  usePreviewModeHotkeys(dispatch, iframe.enabled);
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: `Puck ${getClassName27()}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       AppProvider,
       {
         value: {
@@ -7177,7 +7236,7 @@ function Puck({
           getPermissions: () => ({}),
           refreshPermissions: () => null
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CustomPuck, { children: children || /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CustomPuck, { children: children || /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           "div",
           {
             className: getLayoutClassName({
@@ -7186,60 +7245,60 @@ function Puck({
               mounted,
               rightSideBarVisible
             }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: getLayoutClassName("inner"), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: getLayoutClassName("inner"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                 CustomHeader,
                 {
-                  actions: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                  actions: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                     Button,
                     {
                       onClick: () => {
                         onPublish && onPublish(data);
                       },
-                      icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Globe, { size: "14px" }),
+                      icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Globe, { size: "14px" }),
                       children: "Publish"
                     }
                   ) }) }),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("header", { className: getLayoutClassName("header"), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: getLayoutClassName("headerInner"), children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: getLayoutClassName("headerToggle"), children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("header", { className: getLayoutClassName("header"), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: getLayoutClassName("headerInner"), children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: getLayoutClassName("headerToggle"), children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                         "div",
                         {
                           className: getLayoutClassName("leftSideBarToggle"),
-                          children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                             IconButton,
                             {
                               onClick: () => {
                                 toggleSidebars("left");
                               },
                               title: "Toggle left sidebar",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PanelLeft, { focusable: "false" })
+                              children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PanelLeft, { focusable: "false" })
                             }
                           )
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                         "div",
                         {
                           className: getLayoutClassName("rightSideBarToggle"),
-                          children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                             IconButton,
                             {
                               onClick: () => {
                                 toggleSidebars("right");
                               },
                               title: "Toggle right sidebar",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PanelRight, { focusable: "false" })
+                              children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PanelRight, { focusable: "false" })
                             }
                           )
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: getLayoutClassName("headerTitle"), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Heading, { rank: "2", size: "xs", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: getLayoutClassName("headerTitle"), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Heading, { rank: "2", size: "xs", children: [
                       headerTitle || rootProps.title || "Page",
-                      headerPath && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+                      headerPath && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
                         " ",
-                        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                           "code",
                           {
                             className: getLayoutClassName("headerPath"),
@@ -7248,31 +7307,31 @@ function Puck({
                         )
                       ] })
                     ] }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: getLayoutClassName("headerTools"), children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: getLayoutClassName("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: getLayoutClassName("headerTools"), children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: getLayoutClassName("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                         IconButton,
                         {
                           onClick: () => {
                             return setMenuOpen(!menuOpen);
                           },
                           title: "Toggle menu bar",
-                          children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ChevronDown, { focusable: "false" })
+                          children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ChevronDown, { focusable: "false" })
                         }
                       ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                         MenuBar,
                         {
                           appState,
                           dispatch,
                           onPublish,
                           menuOpen,
-                          renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                          renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                             Button,
                             {
                               onClick: () => {
                                 onPublish && onPublish(data);
                               },
-                              icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Globe, { size: "14px" }),
+                              icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Globe, { size: "14px" }),
                               children: "Publish"
                             }
                           ) }),
@@ -7283,19 +7342,19 @@ function Puck({
                   ] }) })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: getLayoutClassName("leftSideBar"), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Components, {}) }),
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Outline, {}) })
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: getLayoutClassName("leftSideBar"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Components, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Outline, {}) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Canvas, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: getLayoutClassName("rightSideBar"), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Canvas, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: getLayoutClassName("rightSideBar"), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                 SidebarSection,
                 {
                   noPadding: true,
                   noBorderTop: true,
                   showBreadcrumbs: true,
                   title: selectedItem ? selectedComponentLabel : "Page",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Fields, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Fields, {})
                 }
               ) })
             ] })
@@ -7303,7 +7362,7 @@ function Puck({
         ) }) })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { id: "puck-portal-root", className: getClassName27("portal") })
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { id: "puck-portal-root", className: getClassName27("portal") })
   ] });
 }
 Puck.Components = Components;
@@ -7311,62 +7370,6 @@ Puck.Fields = Fields;
 Puck.Outline = Outline;
 Puck.Preview = Preview;
 
-// components/Render/index.tsx
-init_react_import();
-var import_jsx_runtime38 = require("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__ */ (0, import_jsx_runtime38.jsx)(
-      DropZoneProvider,
-      {
-        value: {
-          data: defaultedData,
-          config,
-          mode: "render",
-          depth: 0,
-          path: []
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-          config.root.render,
-          __spreadProps(__spreadValues({}, rootProps), {
-            puck: {
-              renderDropZone: DropZone,
-              isEditing: false
-            },
-            title,
-            editMode: false,
-            id: "puck-root",
-            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DropZone, { zone: rootDroppableId })
-          })
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    DropZoneProvider,
-    {
-      value: {
-        data: defaultedData,
-        config,
-        mode: "render",
-        depth: 0,
-        path: []
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DropZone, { zone: rootDroppableId })
-    }
-  );
-}
-
 // lib/migrate.ts
 init_react_import();
 var migrations = [