npm - @measured/puck - Versions diffs - 0.17.1 → 0.17.2-canary.98a70fd - Mend

@measured/puck 0.17.1 → 0.17.2-canary.98a70fd

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/{chunk-7IH6SUIT.mjs → chunk-LNGCTWA7.mjs} +2 -4
package/dist/index.css +12 -14
package/dist/index.js +616 -502
package/dist/index.mjs +480 -363
package/dist/rsc.js +2 -4
package/dist/rsc.mjs +1 -1
package/package.json +2 -2

package/dist/index.mjs CHANGED Viewed

@@ -13,7 +13,7 @@ import {
   resolveRootData,
   rootDroppableId,
   setupZone
-} from "./chunk-7IH6SUIT.mjs";
+} from "./chunk-LNGCTWA7.mjs";
 // ../../node_modules/classnames/index.js
 var require_classnames = __commonJS({
@@ -193,8 +193,9 @@ var styles_module_default2 = { "InputWrapper": "_InputWrapper_1l5m8_1", "Input":
 // components/AutoField/index.tsx
 import {
   useCallback as useCallback5,
+  useContext as useContext3,
   useEffect as useEffect9,
-  useMemo as useMemo4,
+  useMemo as useMemo5,
   useState as useState10
 } from "react";
@@ -1176,21 +1177,66 @@ import { jsx as jsx7 } from "react/jsx-runtime";
 var getClassName4 = get_class_name_factory_default("DragIcon", styles_module_default5);
 var DragIcon = ({ isDragDisabled }) => /* @__PURE__ */ jsx7("div", { className: getClassName4({ disabled: isDragDisabled }), children: /* @__PURE__ */ jsx7("svg", { viewBox: "0 0 20 20", width: "12", fill: "currentColor", children: /* @__PURE__ */ jsx7("path", { d: "M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z" }) }) });
+// components/AutoField/context.tsx
+init_react_import();
+import { createContext as createContext2, useContext as useContext2, useMemo } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var NestedFieldContext = createContext2({});
+var useNestedFieldContext = () => {
+  const context = useContext2(NestedFieldContext);
+  return __spreadProps(__spreadValues({}, context), {
+    readOnlyFields: context.readOnlyFields || {}
+  });
+};
+var NestedFieldProvider = ({
+  children,
+  name,
+  subName,
+  wildcardName = name,
+  readOnlyFields
+}) => {
+  const subPath = `${name}.${subName}`;
+  const wildcardSubPath = `${wildcardName}.${subName}`;
+  const subReadOnlyFields = useMemo(
+    () => Object.keys(readOnlyFields).reduce((acc, readOnlyKey) => {
+      const isLocal = readOnlyKey.indexOf(subPath) > -1 || readOnlyKey.indexOf(wildcardSubPath) > -1;
+      if (isLocal) {
+        const subPathPattern = new RegExp(
+          `^(${name}|${wildcardName}).`.replace(/\[/g, "\\[").replace(/\]/g, "\\]").replace(/\./g, "\\.").replace(/\*/g, "\\*")
+        );
+        const localName = readOnlyKey.replace(subPathPattern, "");
+        return __spreadProps(__spreadValues({}, acc), {
+          [localName]: readOnlyFields[readOnlyKey]
+        });
+      }
+      return acc;
+    }, {}),
+    [name, subName, wildcardName, readOnlyFields]
+  );
+  return /* @__PURE__ */ jsx8(
+    NestedFieldContext.Provider,
+    {
+      value: { readOnlyFields: subReadOnlyFields, localName: subName },
+      children
+    }
+  );
+};
 // components/DragDropContext/index.tsx
 init_react_import();
 import {
   DragDropContext as DndDragDropContext
 } from "@measured/dnd";
-import { Fragment as Fragment4, jsx as jsx8 } from "react/jsx-runtime";
-var DefaultDragDropContext = ({ children }) => /* @__PURE__ */ jsx8(Fragment4, { children });
+import { Fragment as Fragment4, jsx as jsx9 } from "react/jsx-runtime";
+var DefaultDragDropContext = ({ children }) => /* @__PURE__ */ jsx9(Fragment4, { children });
 var DragDropContext = (props) => {
   const { status } = useAppContext();
   const El = status !== "LOADING" ? DndDragDropContext : DefaultDragDropContext;
-  return /* @__PURE__ */ jsx8(El, __spreadValues({}, props));
+  return /* @__PURE__ */ jsx9(El, __spreadValues({}, props));
 };
 // components/AutoField/fields/ArrayField/index.tsx
-import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 var getClassName5 = get_class_name_factory_default("ArrayField", styles_module_default3);
 var getClassNameItem = get_class_name_factory_default("ArrayFieldItem", styles_module_default3);
 var ArrayField = ({
@@ -1201,10 +1247,10 @@ var ArrayField = ({
   label,
   readOnly,
   id,
-  Label = (props) => /* @__PURE__ */ jsx9("div", __spreadValues({}, props))
+  Label = (props) => /* @__PURE__ */ jsx10("div", __spreadValues({}, props))
 }) => {
   const { state, setUi, selectedItem, getPermissions } = useAppContext();
-  const readOnlyFields = (selectedItem == null ? void 0 : selectedItem.readOnly) || {};
+  const { readOnlyFields, localName = name } = useNestedFieldContext();
   const value = _value;
   const arrayState = state.ui.arrayState[id] || {
     items: Array.from(value || []).map((item, idx) => {
@@ -1265,14 +1311,14 @@ var ArrayField = ({
     return null;
   }
   const addDisabled = field.max !== void 0 && localState.arrayState.items.length >= field.max || readOnly;
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     Label,
     {
       label: label || name,
-      icon: /* @__PURE__ */ jsx9(List, { size: 16 }),
+      icon: /* @__PURE__ */ jsx10(List, { size: 16 }),
       el: "div",
       readOnly,
-      children: /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsx10(
         DragDropContext,
         {
           onDragEnd: (event) => {
@@ -1301,7 +1347,7 @@ var ArrayField = ({
               });
             }
           },
-          children: /* @__PURE__ */ jsx9(Droppable, { droppableId: "array", isDropDisabled: readOnly, children: (provided, snapshot) => {
+          children: /* @__PURE__ */ jsx10(Droppable, { droppableId: "array", isDropDisabled: readOnly, children: (provided, snapshot) => {
             return /* @__PURE__ */ jsxs4(
               "div",
               __spreadProps(__spreadValues({}, provided.droppableProps), {
@@ -1326,7 +1372,7 @@ var ArrayField = ({
                   localState.arrayState.items.map((item, i) => {
                     const { _arrayId = `${id}-${i}`, _originalIndex = i } = item;
                     const data = Array.from(localState.value || [])[i] || {};
-                    return /* @__PURE__ */ jsx9(
+                    return /* @__PURE__ */ jsx10(
                       Draggable,
                       {
                         id: _arrayId,
@@ -1361,7 +1407,7 @@ var ArrayField = ({
                                 field.getItemSummary ? field.getItemSummary(data, i) : `Item #${_originalIndex}`,
                                 /* @__PURE__ */ jsxs4("div", { className: getClassNameItem("rhs"), children: [
                                   !readOnly && /* @__PURE__ */ jsxs4("div", { className: getClassNameItem("actions"), children: [
-                                    /* @__PURE__ */ jsx9("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx9(
+                                    /* @__PURE__ */ jsx10("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx10(
                                       IconButton,
                                       {
                                         type: "button",
@@ -1384,10 +1430,10 @@ var ArrayField = ({
                                           );
                                         },
                                         title: "Duplicate",
-                                        children: /* @__PURE__ */ jsx9(Copy, { size: 16 })
+                                        children: /* @__PURE__ */ jsx10(Copy, { size: 16 })
                                       }
                                     ) }),
-                                    /* @__PURE__ */ jsx9("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx9(
+                                    /* @__PURE__ */ jsx10("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx10(
                                       IconButton,
                                       {
                                         type: "button",
@@ -1410,40 +1456,57 @@ var ArrayField = ({
                                           );
                                         },
                                         title: "Delete",
-                                        children: /* @__PURE__ */ jsx9(Trash, { size: 16 })
+                                        children: /* @__PURE__ */ jsx10(Trash, { size: 16 })
                                       }
                                     ) })
                                   ] }),
-                                  /* @__PURE__ */ jsx9("div", { children: /* @__PURE__ */ jsx9(DragIcon, {}) })
+                                  /* @__PURE__ */ jsx10("div", { children: /* @__PURE__ */ jsx10(DragIcon, {}) })
                                 ] })
                               ]
                             }
                           ),
-                          /* @__PURE__ */ jsx9("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ jsx9("fieldset", { className: getClassNameItem("fieldset"), children: Object.keys(field.arrayFields).map(
-                            (fieldName) => {
-                              const subField = field.arrayFields[fieldName];
-                              const subFieldName = `${name}[${i}].${fieldName}`;
-                              const wildcardFieldName = `${name}[*].${fieldName}`;
-                              const subReadOnly = forceReadOnly ? forceReadOnly : typeof readOnlyFields[subFieldName] !== "undefined" ? readOnlyFields[subFieldName] : readOnlyFields[wildcardFieldName];
-                              return /* @__PURE__ */ jsx9(
-                                AutoFieldPrivate,
+                          /* @__PURE__ */ jsx10("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ jsx10("fieldset", { className: getClassNameItem("fieldset"), children: Object.keys(field.arrayFields).map(
+                            (subName) => {
+                              const subField = field.arrayFields[subName];
+                              const indexName = `${name}[${i}]`;
+                              const subPath = `${indexName}.${subName}`;
+                              const localIndexName = `${localName}[${i}]`;
+                              const localWildcardName = `${localName}[*]`;
+                              const localSubPath = `${localIndexName}.${subName}`;
+                              const localWildcardSubPath = `${localWildcardName}.${subName}`;
+                              const subReadOnly = forceReadOnly ? forceReadOnly : typeof readOnlyFields[subPath] !== "undefined" ? readOnlyFields[localSubPath] : readOnlyFields[localWildcardSubPath];
+                              const label2 = subField.label || subName;
+                              return /* @__PURE__ */ jsx10(
+                                NestedFieldProvider,
                                 {
-                                  name: subFieldName,
-                                  label: subField.label || fieldName,
-                                  id: `${_arrayId}_${fieldName}`,
-                                  readOnly: subReadOnly,
-                                  field: subField,
-                                  value: data[fieldName],
-                                  onChange: (val, ui) => {
-                                    onChange(
-                                      replace(value, i, __spreadProps(__spreadValues({}, data), {
-                                        [fieldName]: val
-                                      })),
-                                      ui
-                                    );
-                                  }
+                                  name: localIndexName,
+                                  wildcardName: localWildcardName,
+                                  subName,
+                                  readOnlyFields,
+                                  children: /* @__PURE__ */ jsx10(
+                                    AutoFieldPrivate,
+                                    {
+                                      name: subPath,
+                                      label: label2,
+                                      id: `${_arrayId}_${subName}`,
+                                      readOnly: subReadOnly,
+                                      field: __spreadProps(__spreadValues({}, subField), {
+                                        label: label2
+                                        // May be used by custom fields
+                                      }),
+                                      value: data[subName],
+                                      onChange: (val, ui) => {
+                                        onChange(
+                                          replace(value, i, __spreadProps(__spreadValues({}, data), {
+                                            [subName]: val
+                                          })),
+                                          ui
+                                        );
+                                      }
+                                    }
+                                  )
                                 },
-                                subFieldName
+                                subPath
                               );
                             }
                           ) }) })
@@ -1453,7 +1516,7 @@ var ArrayField = ({
                     );
                   }),
                   provided.placeholder,
-                  !addDisabled && /* @__PURE__ */ jsx9(
+                  !addDisabled && /* @__PURE__ */ jsx10(
                     "button",
                     {
                       type: "button",
@@ -1467,7 +1530,7 @@ var ArrayField = ({
                         const newArrayState = regenerateArrayState(newValue);
                         onChange(newValue, mapArrayStateToUi(newArrayState));
                       },
-                      children: /* @__PURE__ */ jsx9(Plus, { size: 21 })
+                      children: /* @__PURE__ */ jsx10(Plus, { size: 21 })
                     }
                   )
                 ]
@@ -1482,7 +1545,7 @@ var ArrayField = ({
 // components/AutoField/fields/DefaultField/index.tsx
 init_react_import();
-import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 var getClassName6 = get_class_name_factory_default("Input", styles_module_default2);
 var DefaultField = ({
   field,
@@ -1494,16 +1557,16 @@ var DefaultField = ({
   Label,
   id
 }) => {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     Label,
     {
       label: label || name,
       icon: /* @__PURE__ */ jsxs5(Fragment6, { children: [
-        field.type === "text" && /* @__PURE__ */ jsx10(Type, { size: 16 }),
-        field.type === "number" && /* @__PURE__ */ jsx10(Hash, { size: 16 })
+        field.type === "text" && /* @__PURE__ */ jsx11(Type, { size: 16 }),
+        field.type === "number" && /* @__PURE__ */ jsx11(Hash, { size: 16 })
       ] }),
       readOnly,
-      children: /* @__PURE__ */ jsx10(
+      children: /* @__PURE__ */ jsx11(
         "input",
         {
           className: getClassName6("input"),
@@ -1537,7 +1600,7 @@ import { useEffect as useEffect8 } from "react";
 // components/ExternalInput/index.tsx
 init_react_import();
 import {
-  useMemo,
+  useMemo as useMemo2,
   useEffect as useEffect7,
   useState as useState8,
   useCallback as useCallback4,
@@ -1558,7 +1621,7 @@ var styles_module_default7 = { "Modal": "_Modal_ikbaj_1", "Modal--isOpen": "_Mod
 // components/Modal/index.tsx
 import { createPortal } from "react-dom";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var getClassName7 = get_class_name_factory_default("Modal", styles_module_default7);
 var Modal = ({
   children,
@@ -1570,10 +1633,10 @@ var Modal = ({
     setRootEl(document.getElementById("puck-portal-root"));
   }, []);
   if (!rootEl) {
-    return /* @__PURE__ */ jsx11("div", {});
+    return /* @__PURE__ */ jsx12("div", {});
   }
   return createPortal(
-    /* @__PURE__ */ jsx11("div", { className: getClassName7({ isOpen }), onClick: onClose, children: /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12("div", { className: getClassName7({ isOpen }), onClick: onClose, children: /* @__PURE__ */ jsx12(
       "div",
       {
         className: getClassName7("inner"),
@@ -1593,11 +1656,11 @@ init_react_import();
 var styles_module_default8 = { "Heading": "_Heading_qxrry_1", "Heading--xxxxl": "_Heading--xxxxl_qxrry_12", "Heading--xxxl": "_Heading--xxxl_qxrry_18", "Heading--xxl": "_Heading--xxl_qxrry_22", "Heading--xl": "_Heading--xl_qxrry_26", "Heading--l": "_Heading--l_qxrry_30", "Heading--m": "_Heading--m_qxrry_34", "Heading--s": "_Heading--s_qxrry_38", "Heading--xs": "_Heading--xs_qxrry_42" };
 // components/Heading/index.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var getClassName8 = get_class_name_factory_default("Heading", styles_module_default8);
 var Heading = ({ children, rank, size = "m" }) => {
   const Tag = rank ? `h${rank}` : "span";
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     Tag,
     {
       className: getClassName8({
@@ -1620,7 +1683,7 @@ init_react_import();
 var Button_module_default = { "Button": "_Button_1t64k_1", "Button--medium": "_Button--medium_1t64k_29", "Button--large": "_Button--large_1t64k_37", "Button-icon": "_Button-icon_1t64k_44", "Button--primary": "_Button--primary_1t64k_48", "Button--secondary": "_Button--secondary_1t64k_67", "Button--flush": "_Button--flush_1t64k_84", "Button--disabled": "_Button--disabled_1t64k_88", "Button--fullWidth": "_Button--fullWidth_1t64k_95", "Button-spinner": "_Button-spinner_1t64k_100" };
 // components/Button/Button.tsx
-import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 var getClassName9 = get_class_name_factory_default("Button", Button_module_default);
 var Button = ({
   children,
@@ -1663,9 +1726,9 @@ var Button = ({
       rel: newTab ? "noreferrer" : void 0,
       href,
       children: [
-        icon && /* @__PURE__ */ jsx13("div", { className: getClassName9("icon"), children: icon }),
+        icon && /* @__PURE__ */ jsx14("div", { className: getClassName9("icon"), children: icon }),
         children,
-        loading && /* @__PURE__ */ jsx13("div", { className: getClassName9("spinner"), children: /* @__PURE__ */ jsx13(Loader, { size: 14 }) })
+        loading && /* @__PURE__ */ jsx14("div", { className: getClassName9("spinner"), children: /* @__PURE__ */ jsx14(Loader, { size: 14 }) })
       ]
     }
   );
@@ -1673,7 +1736,7 @@ var Button = ({
 };
 // components/ExternalInput/index.tsx
-import { Fragment as Fragment7, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 var getClassName10 = get_class_name_factory_default("ExternalInput", styles_module_default6);
 var getClassNameModal = get_class_name_factory_default("ExternalInputModal", styles_module_default6);
 var dataCache = {};
@@ -1696,10 +1759,10 @@ var ExternalInput = ({
   const hasFilterFields = !!filterFields;
   const [filters, setFilters] = useState8(field.initialFilters || {});
   const [filtersToggled, setFiltersToggled] = useState8(hasFilterFields);
-  const mappedData = useMemo(() => {
+  const mappedData = useMemo2(() => {
     return data.map(mapRow);
   }, [data]);
-  const keys = useMemo(() => {
+  const keys = useMemo2(() => {
     const validKeys = /* @__PURE__ */ new Set();
     for (const item of mappedData) {
       for (const key of Object.keys(item)) {
@@ -1746,7 +1809,7 @@ var ExternalInput = ({
       id,
       children: [
         /* @__PURE__ */ jsxs7("div", { className: getClassName10("actions"), children: [
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx15(
             "button",
             {
               type: "button",
@@ -1754,12 +1817,12 @@ var ExternalInput = ({
               className: getClassName10("button"),
               disabled: readOnly,
               children: value ? field.getItemSummary ? field.getItemSummary(value) : "External item" : /* @__PURE__ */ jsxs7(Fragment7, { children: [
-                /* @__PURE__ */ jsx14(Link, { size: "16" }),
-                /* @__PURE__ */ jsx14("span", { children: field.placeholder })
+                /* @__PURE__ */ jsx15(Link, { size: "16" }),
+                /* @__PURE__ */ jsx15("span", { children: field.placeholder })
               ] })
             }
           ),
-          value && /* @__PURE__ */ jsx14(
+          value && /* @__PURE__ */ jsx15(
             "button",
             {
               type: "button",
@@ -1768,11 +1831,11 @@ var ExternalInput = ({
                 onChange(null);
               },
               disabled: readOnly,
-              children: /* @__PURE__ */ jsx14(LockOpen, { size: 16 })
+              children: /* @__PURE__ */ jsx15(LockOpen, { size: 16 })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx14(Modal, { onClose: () => setOpen(false), isOpen, children: /* @__PURE__ */ jsxs7(
+        /* @__PURE__ */ jsx15(Modal, { onClose: () => setOpen(false), isOpen, children: /* @__PURE__ */ jsxs7(
           "form",
           {
             className: getClassNameModal({
@@ -1786,11 +1849,11 @@ var ExternalInput = ({
               search(searchQuery, filters);
             },
             children: [
-              /* @__PURE__ */ jsx14("div", { className: getClassNameModal("masthead"), children: field.showSearch ? /* @__PURE__ */ jsxs7("div", { className: getClassNameModal("searchForm"), children: [
+              /* @__PURE__ */ jsx15("div", { className: getClassNameModal("masthead"), children: field.showSearch ? /* @__PURE__ */ jsxs7("div", { className: getClassNameModal("searchForm"), children: [
                 /* @__PURE__ */ jsxs7("label", { className: getClassNameModal("search"), children: [
-                  /* @__PURE__ */ jsx14("span", { className: getClassNameModal("searchIconText"), children: "Search" }),
-                  /* @__PURE__ */ jsx14("div", { className: getClassNameModal("searchIcon"), children: /* @__PURE__ */ jsx14(Search, { size: "18" }) }),
-                  /* @__PURE__ */ jsx14(
+                  /* @__PURE__ */ jsx15("span", { className: getClassNameModal("searchIconText"), children: "Search" }),
+                  /* @__PURE__ */ jsx15("div", { className: getClassNameModal("searchIcon"), children: /* @__PURE__ */ jsx15(Search, { size: "18" }) }),
+                  /* @__PURE__ */ jsx15(
                     "input",
                     {
                       className: getClassNameModal("searchInput"),
@@ -1806,8 +1869,8 @@ var ExternalInput = ({
                   )
                 ] }),
                 /* @__PURE__ */ jsxs7("div", { className: getClassNameModal("searchActions"), children: [
-                  /* @__PURE__ */ jsx14(Button, { type: "submit", loading: isLoading, fullWidth: true, children: "Search" }),
-                  hasFilterFields && /* @__PURE__ */ jsx14("div", { className: getClassNameModal("searchActionIcon"), children: /* @__PURE__ */ jsx14(
+                  /* @__PURE__ */ jsx15(Button, { type: "submit", loading: isLoading, fullWidth: true, children: "Search" }),
+                  hasFilterFields && /* @__PURE__ */ jsx15("div", { className: getClassNameModal("searchActionIcon"), children: /* @__PURE__ */ jsx15(
                     IconButton,
                     {
                       title: "Toggle filters",
@@ -1816,15 +1879,15 @@ var ExternalInput = ({
                         e.stopPropagation();
                         setFiltersToggled(!filtersToggled);
                       },
-                      children: /* @__PURE__ */ jsx14(SlidersHorizontal, { size: 20 })
+                      children: /* @__PURE__ */ jsx15(SlidersHorizontal, { size: 20 })
                     }
                   ) })
                 ] })
-              ] }) : /* @__PURE__ */ jsx14(Heading, { rank: "2", size: "xs", children: field.placeholder || "Select data" }) }),
+              ] }) : /* @__PURE__ */ jsx15(Heading, { rank: "2", size: "xs", children: field.placeholder || "Select data" }) }),
               /* @__PURE__ */ jsxs7("div", { className: getClassNameModal("grid"), children: [
-                hasFilterFields && /* @__PURE__ */ jsx14("div", { className: getClassNameModal("filters"), children: hasFilterFields && Object.keys(filterFields).map((fieldName) => {
+                hasFilterFields && /* @__PURE__ */ jsx15("div", { className: getClassNameModal("filters"), children: hasFilterFields && Object.keys(filterFields).map((fieldName) => {
                   const filterField = filterFields[fieldName];
-                  return /* @__PURE__ */ jsx14(
+                  return /* @__PURE__ */ jsx15(
                     AutoFieldPrivate,
                     {
                       field: filterField,
@@ -1843,7 +1906,7 @@ var ExternalInput = ({
                 }) }),
                 /* @__PURE__ */ jsxs7("div", { className: getClassNameModal("tableWrapper"), children: [
                   /* @__PURE__ */ jsxs7("table", { className: getClassNameModal("table"), children: [
-                    /* @__PURE__ */ jsx14("thead", { className: getClassNameModal("thead"), children: /* @__PURE__ */ jsx14("tr", { className: getClassNameModal("tr"), children: keys.map((key) => /* @__PURE__ */ jsx14(
+                    /* @__PURE__ */ jsx15("thead", { className: getClassNameModal("thead"), children: /* @__PURE__ */ jsx15("tr", { className: getClassNameModal("tr"), children: keys.map((key) => /* @__PURE__ */ jsx15(
                       "th",
                       {
                         className: getClassNameModal("th"),
@@ -1852,8 +1915,8 @@ var ExternalInput = ({
                       },
                       key
                     )) }) }),
-                    /* @__PURE__ */ jsx14("tbody", { className: getClassNameModal("tbody"), children: mappedData.map((item, i) => {
-                      return /* @__PURE__ */ jsx14(
+                    /* @__PURE__ */ jsx15("tbody", { className: getClassNameModal("tbody"), children: mappedData.map((item, i) => {
+                      return /* @__PURE__ */ jsx15(
                         "tr",
                         {
                           style: { whiteSpace: "nowrap" },
@@ -1862,16 +1925,16 @@ var ExternalInput = ({
                             onChange(mapProp(data[i]));
                             setOpen(false);
                           },
-                          children: keys.map((key) => /* @__PURE__ */ jsx14("td", { className: getClassNameModal("td"), children: item[key] }, key))
+                          children: keys.map((key) => /* @__PURE__ */ jsx15("td", { className: getClassNameModal("td"), children: item[key] }, key))
                         },
                         i
                       );
                     }) })
                   ] }),
-                  /* @__PURE__ */ jsx14("div", { className: getClassNameModal("loadingBanner"), children: /* @__PURE__ */ jsx14(Loader, { size: 24 }) })
+                  /* @__PURE__ */ jsx15("div", { className: getClassNameModal("loadingBanner"), children: /* @__PURE__ */ jsx15(Loader, { size: 24 }) })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx14("div", { className: getClassNameModal("footerContainer"), children: /* @__PURE__ */ jsx14(Footer, { items: mappedData }) })
+              /* @__PURE__ */ jsx15("div", { className: getClassNameModal("footerContainer"), children: /* @__PURE__ */ jsx15(Footer, { items: mappedData }) })
             ]
           }
         ) })
@@ -1881,7 +1944,7 @@ var ExternalInput = ({
 };
 // components/AutoField/fields/ExternalField/index.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var ExternalField = ({
   field,
   onChange,
@@ -1905,7 +1968,7 @@ var ExternalField = ({
   if (field.type !== "external") {
     return null;
   }
-  return /* @__PURE__ */ jsx15(Label, { label: label || name, icon: /* @__PURE__ */ jsx15(Link, { size: 16 }), el: "div", children: /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(Label, { label: label || name, icon: /* @__PURE__ */ jsx16(Link, { size: 16 }), el: "div", children: /* @__PURE__ */ jsx16(
     ExternalInput,
     {
       name,
@@ -1930,7 +1993,7 @@ var ExternalField = ({
 // components/AutoField/fields/RadioField/index.tsx
 init_react_import();
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 // lib/safe-json-parse.ts
 init_react_import();
@@ -1944,7 +2007,7 @@ var safeJsonParse = (str) => {
 };
 // components/AutoField/fields/RadioField/index.tsx
-import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 var getClassName11 = get_class_name_factory_default("Input", styles_module_default2);
 var RadioField = ({
   field,
@@ -1956,26 +2019,26 @@ var RadioField = ({
   label,
   Label
 }) => {
-  const flatOptions = useMemo2(
+  const flatOptions = useMemo3(
     () => field.type === "radio" ? field.options.map(({ value: value2 }) => value2) : [],
     [field]
   );
   if (field.type !== "radio" || !field.options) {
     return null;
   }
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     Label,
     {
-      icon: /* @__PURE__ */ jsx16(CircleCheckBig, { size: 16 }),
+      icon: /* @__PURE__ */ jsx17(CircleCheckBig, { size: 16 }),
       label: label || name,
       readOnly,
       el: "div",
-      children: /* @__PURE__ */ jsx16("div", { className: getClassName11("radioGroupItems"), id, children: field.options.map((option) => /* @__PURE__ */ jsxs8(
+      children: /* @__PURE__ */ jsx17("div", { className: getClassName11("radioGroupItems"), id, children: field.options.map((option) => /* @__PURE__ */ jsxs8(
         "label",
         {
           className: getClassName11("radio"),
           children: [
-            /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsx17(
               "input",
               {
                 type: "radio",
@@ -1995,7 +2058,7 @@ var RadioField = ({
                 checked: value === option.value
               }
             ),
-            /* @__PURE__ */ jsx16("div", { className: getClassName11("radioInner"), children: option.label || option.value })
+            /* @__PURE__ */ jsx17("div", { className: getClassName11("radioInner"), children: option.label || option.value })
           ]
         },
         option.label + option.value
@@ -2006,8 +2069,8 @@ var RadioField = ({
 // components/AutoField/fields/SelectField/index.tsx
 init_react_import();
-import { useMemo as useMemo3 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { useMemo as useMemo4 } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var getClassName12 = get_class_name_factory_default("Input", styles_module_default2);
 var SelectField = ({
   field,
@@ -2019,20 +2082,20 @@ var SelectField = ({
   readOnly,
   id
 }) => {
-  const flatOptions = useMemo3(
+  const flatOptions = useMemo4(
     () => field.type === "select" ? field.options.map(({ value: value2 }) => value2) : [],
     [field]
   );
   if (field.type !== "select" || !field.options) {
     return null;
   }
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     Label,
     {
       label: label || name,
-      icon: /* @__PURE__ */ jsx17(ChevronDown, { size: 16 }),
+      icon: /* @__PURE__ */ jsx18(ChevronDown, { size: 16 }),
       readOnly,
-      children: /* @__PURE__ */ jsx17(
+      children: /* @__PURE__ */ jsx18(
         "select",
         {
           id,
@@ -2049,7 +2112,7 @@ var SelectField = ({
             }
           },
           value,
-          children: field.options.map((option) => /* @__PURE__ */ jsx17(
+          children: field.options.map((option) => /* @__PURE__ */ jsx18(
             "option",
             {
               label: option.label,
@@ -2065,7 +2128,7 @@ var SelectField = ({
 // components/AutoField/fields/TextareaField/index.tsx
 init_react_import();
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var getClassName13 = get_class_name_factory_default("Input", styles_module_default2);
 var TextareaField = ({
   onChange,
@@ -2076,7 +2139,7 @@ var TextareaField = ({
   Label,
   id
 }) => {
-  return /* @__PURE__ */ jsx18(Label, { label: label || name, icon: /* @__PURE__ */ jsx18(Type, { size: 16 }), readOnly, children: /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(Label, { label: label || name, icon: /* @__PURE__ */ jsx19(Type, { size: 16 }), readOnly, children: /* @__PURE__ */ jsx19(
     "textarea",
     {
       id,
@@ -2103,7 +2166,7 @@ init_react_import();
 var styles_module_default9 = { "ObjectField": "_ObjectField_1ua3y_5", "ObjectField-fieldset": "_ObjectField-fieldset_1ua3y_13" };
 // components/AutoField/fields/ObjectField/index.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var getClassName14 = get_class_name_factory_default("ObjectField", styles_module_default9);
 var ObjectField = ({
   field,
@@ -2115,43 +2178,54 @@ var ObjectField = ({
   readOnly,
   id
 }) => {
-  const { selectedItem } = useAppContext();
+  const { readOnlyFields, localName = name } = useNestedFieldContext();
   if (field.type !== "object" || !field.objectFields) {
     return null;
   }
-  const readOnlyFields = (selectedItem == null ? void 0 : selectedItem.readOnly) || {};
   const data = value || {};
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     Label,
     {
       label: label || name,
-      icon: /* @__PURE__ */ jsx19(EllipsisVertical, { size: 16 }),
+      icon: /* @__PURE__ */ jsx20(EllipsisVertical, { size: 16 }),
       el: "div",
       readOnly,
-      children: /* @__PURE__ */ jsx19("div", { className: getClassName14(), children: /* @__PURE__ */ jsx19("fieldset", { className: getClassName14("fieldset"), children: Object.keys(field.objectFields).map((fieldName) => {
-        const subField = field.objectFields[fieldName];
-        const subFieldName = `${name}.${fieldName}`;
-        const wildcardFieldName = `${name}.${fieldName}`;
-        const subReadOnly = readOnly ? readOnly : typeof readOnlyFields[subFieldName] !== "undefined" ? readOnlyFields[subFieldName] : readOnlyFields[wildcardFieldName];
-        return /* @__PURE__ */ jsx19(
-          AutoFieldPrivate,
+      children: /* @__PURE__ */ jsx20("div", { className: getClassName14(), children: /* @__PURE__ */ jsx20("fieldset", { className: getClassName14("fieldset"), children: Object.keys(field.objectFields).map((subName) => {
+        const subField = field.objectFields[subName];
+        const subPath = `${name}.${subName}`;
+        const localSubPath = `${localName || name}.${subName}`;
+        const subReadOnly = readOnly ? readOnly : readOnlyFields[localSubPath];
+        const label2 = subField.label || subName;
+        return /* @__PURE__ */ jsx20(
+          NestedFieldProvider,
           {
-            name: subFieldName,
-            label: subField.label || fieldName,
-            id: `${id}_${fieldName}`,
-            readOnly: subReadOnly,
-            field: subField,
-            value: data[fieldName],
-            onChange: (val, ui) => {
-              onChange(
-                __spreadProps(__spreadValues({}, data), {
-                  [fieldName]: val
+            name: localName || id,
+            subName,
+            readOnlyFields,
+            children: /* @__PURE__ */ jsx20(
+              AutoFieldPrivate,
+              {
+                name: subPath,
+                label: subPath,
+                id: `${id}_${subName}`,
+                readOnly: subReadOnly,
+                field: __spreadProps(__spreadValues({}, subField), {
+                  label: label2
+                  // May be used by custom fields
                 }),
-                ui
-              );
-            }
+                value: data[subName],
+                onChange: (val, ui) => {
+                  onChange(
+                    __spreadProps(__spreadValues({}, data), {
+                      [subName]: val
+                    }),
+                    ui
+                  );
+                }
+              }
+            )
           },
-          subFieldName
+          subPath
         );
       }) }) })
     }
@@ -2177,7 +2251,7 @@ var useSafeId = () => {
 };
 // components/AutoField/index.tsx
-import { Fragment as Fragment8, jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
 var getClassName15 = get_class_name_factory_default("Input", styles_module_default2);
 var getClassNameWrapper = get_class_name_factory_default("InputWrapper", styles_module_default2);
 var FieldLabel = ({
@@ -2191,14 +2265,14 @@ var FieldLabel = ({
   const El = el;
   return /* @__PURE__ */ jsxs9(El, { className, children: [
     /* @__PURE__ */ jsxs9("div", { className: getClassName15("label"), children: [
-      icon ? /* @__PURE__ */ jsx20("div", { className: getClassName15("labelIcon"), children: icon }) : /* @__PURE__ */ jsx20(Fragment8, {}),
+      icon ? /* @__PURE__ */ jsx21("div", { className: getClassName15("labelIcon"), children: icon }) : /* @__PURE__ */ jsx21(Fragment8, {}),
       label,
-      readOnly && /* @__PURE__ */ jsx20("div", { className: getClassName15("disabledIcon"), title: "Read-only", children: /* @__PURE__ */ jsx20(Lock, { size: "12" }) })
+      readOnly && /* @__PURE__ */ jsx21("div", { className: getClassName15("disabledIcon"), title: "Read-only", children: /* @__PURE__ */ jsx21(Lock, { size: "12" }) })
     ] }),
     children
   ] });
 };
-var FieldLabelInternal2 = ({
+var FieldLabelInternal = ({
   children,
   icon,
   label,
@@ -2206,14 +2280,14 @@ var FieldLabelInternal2 = ({
   readOnly
 }) => {
   const { overrides } = useAppContext();
-  const Wrapper = useMemo4(
+  const Wrapper = useMemo5(
     () => overrides.fieldLabel || FieldLabel,
     [overrides]
   );
   if (!label) {
-    return /* @__PURE__ */ jsx20(Fragment8, { children });
+    return /* @__PURE__ */ jsx21(Fragment8, { children });
   }
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     Wrapper,
     {
       label,
@@ -2227,8 +2301,8 @@ var FieldLabelInternal2 = ({
 };
 function AutoFieldInternal(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  const { dispatch, overrides } = useAppContext();
-  const { id, Label = FieldLabelInternal2 } = props;
+  const { dispatch, overrides, selectedItem } = useAppContext();
+  const { id, Label = FieldLabelInternal } = props;
   const field = props.field;
   const label = field.label;
   const defaultId = useSafeId();
@@ -2288,20 +2362,30 @@ function AutoFieldInternal(props) {
       return null;
     }
     const CustomField = field.render;
-    return /* @__PURE__ */ jsx20("div", { className: getClassNameWrapper(), onFocus, onBlur, children: /* @__PURE__ */ jsx20("div", { className: getClassName15(), children: /* @__PURE__ */ jsx20(CustomField, __spreadValues({}, mergedProps)) }) });
+    return /* @__PURE__ */ jsx21("div", { className: getClassNameWrapper(), onFocus, onBlur, children: /* @__PURE__ */ jsx21("div", { className: getClassName15(), children: /* @__PURE__ */ jsx21(CustomField, __spreadValues({}, mergedProps)) }) });
   }
   const children = defaultFields[field.type](mergedProps);
   const Render2 = render[field.type];
-  return /* @__PURE__ */ jsx20(
-    "div",
+  const nestedFieldContext = useContext3(NestedFieldContext);
+  return /* @__PURE__ */ jsx21(
+    NestedFieldContext.Provider,
     {
-      className: getClassNameWrapper(),
-      onFocus,
-      onBlur,
-      onClick: (e) => {
-        e.stopPropagation();
+      value: {
+        readOnlyFields: nestedFieldContext.readOnlyFields || (selectedItem == null ? void 0 : selectedItem.readOnly) || {},
+        localName: nestedFieldContext.localName
       },
-      children: /* @__PURE__ */ jsx20(Render2, __spreadProps(__spreadValues({}, mergedProps), { children }))
+      children: /* @__PURE__ */ jsx21(
+        "div",
+        {
+          className: getClassNameWrapper(),
+          onFocus,
+          onBlur,
+          onClick: (e) => {
+            e.stopPropagation();
+          },
+          children: /* @__PURE__ */ jsx21(Render2, __spreadProps(__spreadValues({}, mergedProps), { children }))
+        }
+      )
     }
   );
 }
@@ -2329,11 +2413,11 @@ function AutoFieldPrivate(props) {
     value: localValue,
     onChange: onChangeLocal
   };
-  return /* @__PURE__ */ jsx20(AutoFieldInternal, __spreadValues(__spreadValues({}, props), localProps));
+  return /* @__PURE__ */ jsx21(AutoFieldInternal, __spreadValues(__spreadValues({}, props), localProps));
 }
 function AutoField(props) {
-  const DefaultLabel = useMemo4(() => {
-    const DefaultLabel2 = (labelProps) => /* @__PURE__ */ jsx20(
+  const DefaultLabel = useMemo5(() => {
+    const DefaultLabel2 = (labelProps) => /* @__PURE__ */ jsx21(
       "div",
       __spreadProps(__spreadValues({}, labelProps), {
         className: getClassName15({ readOnly: props.readOnly })
@@ -2341,7 +2425,7 @@ function AutoField(props) {
     );
     return DefaultLabel2;
   }, [props.readOnly]);
-  return /* @__PURE__ */ jsx20(AutoFieldInternal, __spreadProps(__spreadValues({}, props), { Label: DefaultLabel }));
+  return /* @__PURE__ */ jsx21(AutoFieldInternal, __spreadProps(__spreadValues({}, props), { Label: DefaultLabel }));
 }
 // components/Drawer/index.tsx
@@ -2353,14 +2437,14 @@ var styles_module_default10 = { "Drawer": "_Drawer_1oa7v_1", "DrawerItem--disabl
 // components/Drawer/index.tsx
 import {
-  createContext as createContext2,
-  useContext as useContext2,
-  useMemo as useMemo5
+  createContext as createContext3,
+  useContext as useContext4,
+  useMemo as useMemo6
 } from "react";
-import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
 var getClassName16 = get_class_name_factory_default("Drawer", styles_module_default10);
 var getClassNameItem2 = get_class_name_factory_default("DrawerItem", styles_module_default10);
-var drawerContext = createContext2({
+var drawerContext = createContext3({
   droppableId: ""
 });
 var DrawerDraggable = ({
@@ -2369,7 +2453,7 @@ var DrawerDraggable = ({
   index,
   isDragDisabled
 }) => {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     Draggable,
     {
       id,
@@ -2391,21 +2475,21 @@ var DrawerItem = ({
   index,
   isDragDisabled
 }) => {
-  const ctx = useContext2(drawerContext);
+  const ctx = useContext4(drawerContext);
   const resolvedId = `${ctx.droppableId}::${id || name}`;
-  const CustomInner = useMemo5(
-    () => children || (({ children: children2, name: name2 }) => /* @__PURE__ */ jsx21("div", { className: getClassNameItem2("default"), children: children2 })),
+  const CustomInner = useMemo6(
+    () => children || (({ children: children2, name: name2 }) => /* @__PURE__ */ jsx22("div", { className: getClassNameItem2("default"), children: children2 })),
     [children]
   );
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     DrawerDraggable,
     {
       id: resolvedId,
       index,
       isDragDisabled,
-      children: /* @__PURE__ */ jsx21(CustomInner, { name, children: /* @__PURE__ */ jsx21("div", { className: getClassNameItem2("draggableWrapper"), children: /* @__PURE__ */ jsxs10("div", { className: getClassNameItem2("draggable"), children: [
-        /* @__PURE__ */ jsx21("div", { className: getClassNameItem2("name"), children: label != null ? label : name }),
-        /* @__PURE__ */ jsx21("div", { className: getClassNameItem2("icon"), children: /* @__PURE__ */ jsx21(DragIcon, { isDragDisabled }) })
+      children: /* @__PURE__ */ jsx22(CustomInner, { name, children: /* @__PURE__ */ jsx22("div", { className: getClassNameItem2("draggableWrapper"), children: /* @__PURE__ */ jsxs10("div", { className: getClassNameItem2("draggable"), children: [
+        /* @__PURE__ */ jsx22("div", { className: getClassNameItem2("name"), children: label != null ? label : name }),
+        /* @__PURE__ */ jsx22("div", { className: getClassNameItem2("icon"), children: /* @__PURE__ */ jsx22(DragIcon, { isDragDisabled }) })
       ] }) }) })
     }
   );
@@ -2416,7 +2500,7 @@ var Drawer = ({
   direction = "vertical"
 }) => {
   const droppableId = `component-list:${_droppableId}`;
-  return /* @__PURE__ */ jsx21(drawerContext.Provider, { value: { droppableId }, children: /* @__PURE__ */ jsx21(Droppable, { droppableId, isDropDisabled: true, direction, children: (provided, snapshot) => /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsx22(drawerContext.Provider, { value: { droppableId }, children: /* @__PURE__ */ jsx22(Droppable, { droppableId, isDropDisabled: true, direction, children: (provided, snapshot) => /* @__PURE__ */ jsxs10(
     "div",
     __spreadProps(__spreadValues({}, provided.droppableProps), {
       ref: provided.innerRef,
@@ -2425,7 +2509,7 @@ var Drawer = ({
       }),
       children: [
         children,
-        /* @__PURE__ */ jsx21("span", { style: { display: "none" }, children: provided.placeholder })
+        /* @__PURE__ */ jsx22("span", { style: { display: "none" }, children: provided.placeholder })
       ]
     })
   ) }) });
@@ -2434,13 +2518,13 @@ Drawer.Item = DrawerItem;
 // components/DropZone/index.tsx
 init_react_import();
-import { useContext as useContext3, useEffect as useEffect12 } from "react";
+import { useContext as useContext5, useEffect as useEffect12 } from "react";
 // components/DraggableComponent/index.tsx
 init_react_import();
 import {
   useEffect as useEffect11,
-  useMemo as useMemo6,
+  useMemo as useMemo7,
   useState as useState12
 } from "react";
 import { Draggable as Draggable2 } from "@measured/dnd";
@@ -2488,7 +2572,7 @@ var isIos = () => [
 navigator.userAgent.includes("Mac") && "ontouchend" in document;
 // components/DraggableComponent/index.tsx
-import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
 var getClassName17 = get_class_name_factory_default("DraggableComponent", styles_module_default11);
 var space = 8;
 var actionsOverlayTop = space * 6.5;
@@ -2497,7 +2581,7 @@ var actionsRight = space;
 var DefaultActionBar = ({
   label,
   children
-}) => /* @__PURE__ */ jsx22(ActionBar, { label, children: /* @__PURE__ */ jsx22(ActionBar.Group, { children }) });
+}) => /* @__PURE__ */ jsx23(ActionBar, { label, children: /* @__PURE__ */ jsx23(ActionBar.Group, { children }) });
 var DraggableComponent = ({
   children,
   id,
@@ -2530,14 +2614,14 @@ var DraggableComponent = ({
       setDisableSecondaryAnimation(true);
     }
   }, []);
-  const CustomActionBar = useMemo6(
+  const CustomActionBar = useMemo7(
     () => overrides.actionBar || DefaultActionBar,
     [overrides.actionBar]
   );
   const permissions = getPermissions({
     item: selectedItem
   });
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     El,
     {
       draggableId: id,
@@ -2567,15 +2651,15 @@ var DraggableComponent = ({
           onClick,
           children: [
             debug,
-            isLoading && /* @__PURE__ */ jsx22("div", { className: getClassName17("loadingOverlay"), children: /* @__PURE__ */ jsx22(Loader, {}) }),
-            isSelected && /* @__PURE__ */ jsx22(
+            isLoading && /* @__PURE__ */ jsx23("div", { className: getClassName17("loadingOverlay"), children: /* @__PURE__ */ jsx23(Loader, {}) }),
+            isSelected && /* @__PURE__ */ jsx23(
               "div",
               {
                 className: getClassName17("actionsOverlay"),
                 style: {
                   top: actionsOverlayTop / zoomConfig.zoom
                 },
-                children: /* @__PURE__ */ jsx22(
+                children: /* @__PURE__ */ jsx23(
                   "div",
                   {
                     className: getClassName17("actions"),
@@ -2585,15 +2669,15 @@ var DraggableComponent = ({
                       right: actionsRight / zoomConfig.zoom
                     },
                     children: /* @__PURE__ */ jsxs11(CustomActionBar, { label, children: [
-                      permissions.duplicate && /* @__PURE__ */ jsx22(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ jsx22(Copy, { size: 16 }) }),
-                      permissions.delete && /* @__PURE__ */ jsx22(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ jsx22(Trash, { size: 16 }) })
+                      permissions.duplicate && /* @__PURE__ */ jsx23(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ jsx23(Copy, { size: 16 }) }),
+                      permissions.delete && /* @__PURE__ */ jsx23(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ jsx23(Trash, { size: 16 }) })
                     ] })
                   }
                 )
               }
             ),
-            /* @__PURE__ */ jsx22("div", { className: getClassName17("overlay") }),
-            /* @__PURE__ */ jsx22("div", { className: getClassName17("contents"), children })
+            /* @__PURE__ */ jsx23("div", { className: getClassName17("overlay") }),
+            /* @__PURE__ */ jsx23("div", { className: getClassName17("contents"), children })
           ]
         })
       )
@@ -2609,7 +2693,7 @@ var styles_module_default12 = { "DropZone": "_DropZone_djoti_1", "DropZone-conte
 // components/DropZone/context.tsx
 init_react_import();
 import {
-  createContext as createContext3,
+  createContext as createContext4,
   useCallback as useCallback6,
   useState as useState13
 } from "react";
@@ -2628,8 +2712,8 @@ var getZoneId = (zoneCompound) => {
 };
 // components/DropZone/context.tsx
-import { Fragment as Fragment9, jsx as jsx23 } from "react/jsx-runtime";
-var dropZoneContext = createContext3(null);
+import { Fragment as Fragment9, jsx as jsx24 } from "react/jsx-runtime";
+var dropZoneContext = createContext4(null);
 var DropZoneProvider = ({
   children,
   value
@@ -2706,7 +2790,7 @@ var DropZoneProvider = ({
     [value, setPathData]
   );
   const [zoneWillDrag, setZoneWillDrag] = useState13("");
-  return /* @__PURE__ */ jsx23(Fragment9, { children: value && /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(Fragment9, { children: value && /* @__PURE__ */ jsx24(
     dropZoneContext.Provider,
     {
       value: __spreadValues({
@@ -2732,12 +2816,12 @@ var DropZoneProvider = ({
 };
 // components/DropZone/index.tsx
-import { Fragment as Fragment10, jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
 var getClassName18 = get_class_name_factory_default("DropZone", styles_module_default12);
 function DropZoneEdit({ zone, allow, disallow, style }) {
   var _a;
   const appContext2 = useAppContext();
-  const ctx = useContext3(dropZoneContext);
+  const ctx = useContext5(dropZoneContext);
   const {
     // These all need setting via context
     data,
@@ -2787,7 +2871,7 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
   const draggingOverArea = userIsDragging && zoneArea === draggedSourceArea;
   const draggingNewComponent = draggedSourceId == null ? void 0 : draggedSourceId.startsWith("component-list");
   if (!(ctx == null ? void 0 : ctx.config) || !ctx.setHoveringArea || !ctx.setHoveringZone || !ctx.setHoveringComponent || !ctx.setItemSelector || !ctx.registerPath || !ctx.dispatch) {
-    return /* @__PURE__ */ jsx24("div", { children: "DropZone requires context to work." });
+    return /* @__PURE__ */ jsx25("div", { children: "DropZone requires context to work." });
   }
   const {
     hoveringArea = "root",
@@ -2828,7 +2912,7 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
   }
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
   const isAreaSelected = selectedItem && zoneArea === selectedItem.props.id;
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     "div",
     {
       className: getClassName18({
@@ -2845,7 +2929,7 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
       onMouseUp: () => {
         setZoneWillDrag("");
       },
-      children: /* @__PURE__ */ jsx24(
+      children: /* @__PURE__ */ jsx25(
         Droppable,
         {
           droppableId: zoneCompound,
@@ -2900,13 +2984,13 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
                         className: getClassName18("item"),
                         style: { zIndex: isDragging ? 1 : void 0 },
                         children: [
-                          /* @__PURE__ */ jsx24(
+                          /* @__PURE__ */ jsx25(
                             DropZoneProvider,
                             {
                               value: __spreadProps(__spreadValues({}, ctx), {
                                 areaId: componentId
                               }),
-                              children: /* @__PURE__ */ jsx24(
+                              children: /* @__PURE__ */ jsx25(
                                 DraggableComponent,
                                 {
                                   label,
@@ -2974,12 +3058,12 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
                                   style: {
                                     pointerEvents: userIsDragging && draggingNewComponent ? "all" : void 0
                                   },
-                                  children: /* @__PURE__ */ jsx24("div", { className: getClassName18("renderWrapper"), children: /* @__PURE__ */ jsx24(Render2, __spreadValues({}, defaultedProps)) })
+                                  children: /* @__PURE__ */ jsx25("div", { className: getClassName18("renderWrapper"), children: /* @__PURE__ */ jsx25(Render2, __spreadValues({}, defaultedProps)) })
                                 }
                               )
                             }
                           ),
-                          userIsDragging && /* @__PURE__ */ jsx24(
+                          userIsDragging && /* @__PURE__ */ jsx25(
                             "div",
                             {
                               className: getClassName18("hitbox"),
@@ -2996,7 +3080,7 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
                     );
                   }),
                   provided == null ? void 0 : provided.placeholder,
-                  (snapshot == null ? void 0 : snapshot.isDraggingOver) && /* @__PURE__ */ jsx24(
+                  (snapshot == null ? void 0 : snapshot.isDraggingOver) && /* @__PURE__ */ jsx25(
                     "div",
                     {
                       "data-puck-placeholder": true,
@@ -3017,7 +3101,7 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
   );
 }
 function DropZoneRender({ zone }) {
-  const ctx = useContext3(dropZoneContext);
+  const ctx = useContext5(dropZoneContext);
   const { data, areaId = "root", config } = ctx || {};
   let zoneCompound = rootDroppableId;
   let content = (data == null ? void 0 : data.content) || [];
@@ -3028,14 +3112,14 @@ function DropZoneRender({ zone }) {
     zoneCompound = `${areaId}:${zone}`;
     content = setupZone(data, zoneCompound).zones[zoneCompound];
   }
-  return /* @__PURE__ */ jsx24(Fragment10, { children: content.map((item) => {
+  return /* @__PURE__ */ jsx25(Fragment10, { children: content.map((item) => {
     const Component = config.components[item.type];
     if (Component) {
-      return /* @__PURE__ */ jsx24(
+      return /* @__PURE__ */ jsx25(
         DropZoneProvider,
         {
           value: { data, config, areaId: item.props.id },
-          children: /* @__PURE__ */ jsx24(
+          children: /* @__PURE__ */ jsx25(
             Component.render,
             __spreadProps(__spreadValues({}, item.props), {
               puck: { renderDropZone: DropZone }
@@ -3049,11 +3133,11 @@ function DropZoneRender({ zone }) {
   }) });
 }
 function DropZone(props) {
-  const ctx = useContext3(dropZoneContext);
+  const ctx = useContext5(dropZoneContext);
   if ((ctx == null ? void 0 : ctx.mode) === "edit") {
-    return /* @__PURE__ */ jsx24(DropZoneEdit, __spreadValues({}, props));
+    return /* @__PURE__ */ jsx25(DropZoneEdit, __spreadValues({}, props));
   }
-  return /* @__PURE__ */ jsx24(DropZoneRender, __spreadValues({}, props));
+  return /* @__PURE__ */ jsx25(DropZoneRender, __spreadValues({}, props));
 }
 // components/Puck/index.tsx
@@ -3061,7 +3145,7 @@ init_react_import();
 import {
   useCallback as useCallback11,
   useEffect as useEffect18,
-  useMemo as useMemo15,
+  useMemo as useMemo16,
   useReducer,
   useState as useState21
 } from "react";
@@ -3073,11 +3157,11 @@ import { useState as useState14 } from "react";
 // lib/get-frame.ts
 init_react_import();
 var getFrame = () => {
-  let frame = document.querySelector("#preview-frame");
-  if ((frame == null ? void 0 : frame.tagName) === "IFRAME") {
-    frame = frame.contentDocument;
+  let frameEl = document.querySelector("#preview-frame");
+  if ((frameEl == null ? void 0 : frameEl.tagName) === "IFRAME") {
+    return frameEl.contentDocument || document;
   }
-  return frame;
+  return (frameEl == null ? void 0 : frameEl.ownerDocument) || document;
 };
 // lib/use-placeholder-style.ts
@@ -3136,7 +3220,7 @@ var styles_module_default13 = { "SidebarSection": "_SidebarSection_125qe_1", "Si
 // lib/use-breadcrumbs.ts
 init_react_import();
-import { useContext as useContext4, useMemo as useMemo7 } from "react";
+import { useContext as useContext6, useMemo as useMemo8 } from "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: [] };
@@ -3186,8 +3270,8 @@ var useBreadcrumbs = (renderCount) => {
     state: { data },
     selectedItem
   } = useAppContext();
-  const dzContext = useContext4(dropZoneContext);
-  return useMemo7(() => {
+  const dzContext = useContext6(dropZoneContext);
+  return useMemo8(() => {
     const breadcrumbs = convertPathDataToBreadcrumbs(
       selectedItem,
       dzContext == null ? void 0 : dzContext.pathData,
@@ -3201,7 +3285,7 @@ var useBreadcrumbs = (renderCount) => {
 };
 // components/SidebarSection/index.tsx
-import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
 var getClassName19 = get_class_name_factory_default("SidebarSection", styles_module_default13);
 var SidebarSection = ({
   children,
@@ -3220,9 +3304,9 @@ var SidebarSection = ({
       className: getClassName19({ noBorderTop, noPadding }),
       style: { background },
       children: [
-        /* @__PURE__ */ jsx25("div", { className: getClassName19("title"), children: /* @__PURE__ */ jsxs13("div", { className: getClassName19("breadcrumbs"), children: [
+        /* @__PURE__ */ jsx26("div", { className: getClassName19("title"), children: /* @__PURE__ */ jsxs13("div", { className: getClassName19("breadcrumbs"), children: [
           showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs13("div", { className: getClassName19("breadcrumb"), children: [
-            /* @__PURE__ */ jsx25(
+            /* @__PURE__ */ jsx26(
               "button",
               {
                 type: "button",
@@ -3231,12 +3315,12 @@ var SidebarSection = ({
                 children: breadcrumb.label
               }
             ),
-            /* @__PURE__ */ jsx25(ChevronRight, { size: 16 })
+            /* @__PURE__ */ jsx26(ChevronRight, { size: 16 })
           ] }, i)) : null,
-          /* @__PURE__ */ jsx25("div", { className: getClassName19("heading"), children: /* @__PURE__ */ jsx25(Heading, { rank: "2", size: "xs", children: title }) })
+          /* @__PURE__ */ jsx26("div", { className: getClassName19("heading"), children: /* @__PURE__ */ jsx26(Heading, { rank: "2", size: "xs", children: title }) })
         ] }) }),
-        /* @__PURE__ */ jsx25("div", { className: getClassName19("content"), children }),
-        isLoading && /* @__PURE__ */ jsx25("div", { className: getClassName19("loadingOverlay"), children: /* @__PURE__ */ jsx25(Loader, { size: 32 }) })
+        /* @__PURE__ */ jsx26("div", { className: getClassName19("content"), children }),
+        isLoading && /* @__PURE__ */ jsx26("div", { className: getClassName19("loadingOverlay"), children: /* @__PURE__ */ jsx26(Loader, { size: 32 }) })
       ]
     }
   );
@@ -3439,6 +3523,9 @@ function reduceData(data, action, config) {
     });
   }
   if (action.type === "move") {
+    if (action.sourceZone === action.destinationZone && action.sourceIndex === action.destinationIndex) {
+      return data;
+    }
     const newData = setupZone(
       setupZone(data, action.sourceZone),
       action.destinationZone
@@ -3617,7 +3704,7 @@ init_react_import();
 var styles_module_default14 = { "MenuBar": "_MenuBar_8pf8c_1", "MenuBar--menuOpen": "_MenuBar--menuOpen_8pf8c_14", "MenuBar-inner": "_MenuBar-inner_8pf8c_29", "MenuBar-history": "_MenuBar-history_8pf8c_45" };
 // components/MenuBar/index.tsx
-import { Fragment as Fragment11, jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
 var getClassName20 = get_class_name_factory_default("MenuBar", styles_module_default14);
 function MenuBar({
   appState,
@@ -3631,7 +3718,7 @@ function MenuBar({
     history: { back, forward, historyStore }
   } = useAppContext();
   const { hasFuture = false, hasPast = false } = historyStore || {};
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       className: getClassName20({ menuOpen }),
@@ -3647,10 +3734,10 @@ function MenuBar({
       },
       children: /* @__PURE__ */ jsxs14("div", { className: getClassName20("inner"), children: [
         /* @__PURE__ */ jsxs14("div", { className: getClassName20("history"), children: [
-          /* @__PURE__ */ jsx26(IconButton, { title: "undo", disabled: !hasPast, onClick: back, children: /* @__PURE__ */ jsx26(Undo2, { size: 21 }) }),
-          /* @__PURE__ */ jsx26(IconButton, { title: "redo", disabled: !hasFuture, onClick: forward, children: /* @__PURE__ */ jsx26(Redo2, { size: 21 }) })
+          /* @__PURE__ */ jsx27(IconButton, { title: "undo", disabled: !hasPast, onClick: back, children: /* @__PURE__ */ jsx27(Undo2, { size: 21 }) }),
+          /* @__PURE__ */ jsx27(IconButton, { title: "redo", disabled: !hasFuture, onClick: forward, children: /* @__PURE__ */ jsx27(Redo2, { size: 21 }) })
         ] }),
-        /* @__PURE__ */ jsx26(Fragment11, { children: renderHeaderActions && renderHeaderActions({
+        /* @__PURE__ */ jsx27(Fragment11, { children: renderHeaderActions && renderHeaderActions({
           state: appState,
           dispatch
         }) })
@@ -3671,15 +3758,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
-import { useCallback as useCallback7, useEffect as useEffect13, useMemo as useMemo8, useState as useState15 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect13, useMemo as useMemo9, useState as useState15 } from "react";
 // lib/use-parent.ts
 init_react_import();
-import { useContext as useContext5 } from "react";
+import { useContext as useContext7 } from "react";
 var useParent = (itemSelector) => {
   var _a;
   const { selectedItem, state } = useAppContext();
-  const { pathData } = useContext5(dropZoneContext) || {};
+  const { pathData } = useContext7(dropZoneContext) || {};
   const item = itemSelector ? getItem(itemSelector, state.data) : selectedItem;
   const breadcrumbs = convertPathDataToBreadcrumbs(item, pathData, state.data);
   const lastItem = breadcrumbs[breadcrumbs.length - 1];
@@ -3688,7 +3775,7 @@ var useParent = (itemSelector) => {
 };
 // components/Puck/components/Fields/index.tsx
-import { Fragment as Fragment12, jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
 var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
 var defaultPageFields = {
   title: { type: "text" }
@@ -3696,7 +3783,7 @@ var defaultPageFields = {
 var DefaultFields = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx27(Fragment12, { children });
+  return /* @__PURE__ */ jsx28(Fragment12, { children });
 };
 var useResolvedFields = () => {
   var _a, _b;
@@ -3705,7 +3792,7 @@ 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 = useMemo8(
+  const defaultFields = useMemo9(
     () => (selectedItem ? componentConfig == null ? void 0 : componentConfig.fields : rootFields) || {},
     [selectedItem, rootFields, componentConfig == null ? void 0 : componentConfig.fields]
   );
@@ -3787,7 +3874,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 = useMemo8(() => overrides.fields || DefaultFields, [overrides]);
+  const Wrapper = useMemo9(() => overrides.fields || DefaultFields, [overrides]);
   return /* @__PURE__ */ jsxs15(
     "form",
     {
@@ -3796,7 +3883,7 @@ var Fields = () => {
         e.preventDefault();
       },
       children: [
-        /* @__PURE__ */ jsx27(Wrapper, { isLoading, itemSelector, children: Object.keys(fields).map((fieldName) => {
+        /* @__PURE__ */ jsx28(Wrapper, { isLoading, itemSelector, children: Object.keys(fields).map((fieldName) => {
           const field = fields[fieldName];
           if (!(field == null ? void 0 : field.type)) return null;
           const onChange = (value, updatedUi) => {
@@ -3867,7 +3954,7 @@ var Fields = () => {
               item: selectedItem
             });
             const id = `${selectedItem.props.id}_${field.type}_${fieldName}`;
-            return /* @__PURE__ */ jsx27(
+            return /* @__PURE__ */ jsx28(
               AutoFieldPrivate,
               {
                 field,
@@ -3885,7 +3972,7 @@ var Fields = () => {
               root: true
             });
             const id = `root_${field.type}_${fieldName}`;
-            return /* @__PURE__ */ jsx27(
+            return /* @__PURE__ */ jsx28(
               AutoFieldPrivate,
               {
                 field,
@@ -3899,7 +3986,7 @@ var Fields = () => {
             );
           }
         }) }),
-        isLoading && /* @__PURE__ */ jsx27("div", { className: getClassName21("loadingOverlay"), children: /* @__PURE__ */ jsx27("div", { className: getClassName21("loadingOverlayInner"), children: /* @__PURE__ */ jsx27(Loader, { size: 16 }) }) })
+        isLoading && /* @__PURE__ */ jsx28("div", { className: getClassName21("loadingOverlay"), children: /* @__PURE__ */ jsx28("div", { className: getClassName21("loadingOverlayInner"), children: /* @__PURE__ */ jsx28(Loader, { size: 16 }) }) })
       ]
     }
   );
@@ -3920,7 +4007,7 @@ init_react_import();
 var styles_module_default17 = { "ComponentList": "_ComponentList_odh9d_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_odh9d_5", "ComponentList-content": "_ComponentList-content_odh9d_9", "ComponentList-title": "_ComponentList-title_odh9d_17", "ComponentList-titleIcon": "_ComponentList-titleIcon_odh9d_53" };
 // components/ComponentList/index.tsx
-import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 var getClassName22 = get_class_name_factory_default("ComponentList", styles_module_default17);
 var ComponentListItem = ({
   name,
@@ -3931,7 +4018,7 @@ var ComponentListItem = ({
   const canInsert = getPermissions({
     type: name
   }).insert;
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     Drawer.Item,
     {
       label,
@@ -3964,14 +4051,14 @@ var ComponentList = ({
         }),
         title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
         children: [
-          /* @__PURE__ */ jsx28("div", { children: title }),
-          /* @__PURE__ */ jsx28("div", { className: getClassName22("titleIcon"), children: expanded ? /* @__PURE__ */ jsx28(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx28(ChevronDown, { size: 12 }) })
+          /* @__PURE__ */ jsx29("div", { children: title }),
+          /* @__PURE__ */ jsx29("div", { className: getClassName22("titleIcon"), children: expanded ? /* @__PURE__ */ jsx29(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx29(ChevronDown, { size: 12 }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx28("div", { className: getClassName22("content"), children: /* @__PURE__ */ jsx28(Drawer, { droppableId: title, children: children || Object.keys(config.components).map((componentKey, i) => {
+    /* @__PURE__ */ jsx29("div", { className: getClassName22("content"), children: /* @__PURE__ */ jsx29(Drawer, { droppableId: title, children: children || Object.keys(config.components).map((componentKey, i) => {
       var _a;
-      return /* @__PURE__ */ jsx28(
+      return /* @__PURE__ */ jsx29(
         ComponentListItem,
         {
           label: (_a = config.components[componentKey]["label"]) != null ? _a : componentKey,
@@ -3986,7 +4073,7 @@ var ComponentList = ({
 ComponentList.Item = ComponentListItem;
 // lib/use-component-list.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var useComponentList = (config, ui) => {
   const [componentList, setComponentList] = useState16();
   useEffect14(() => {
@@ -3999,7 +4086,7 @@ var useComponentList = (config, ui) => {
           if (category.visible === false || !category.components) {
             return null;
           }
-          return /* @__PURE__ */ jsx29(
+          return /* @__PURE__ */ jsx30(
             ComponentList,
             {
               id: categoryKey,
@@ -4008,7 +4095,7 @@ var useComponentList = (config, ui) => {
                 var _a2;
                 matchedComponents.push(componentName);
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ jsx29(
+                return /* @__PURE__ */ jsx30(
                   ComponentList.Item,
                   {
                     label: (_a2 = componentConf["label"]) != null ? _a2 : componentName,
@@ -4028,7 +4115,7 @@ var useComponentList = (config, ui) => {
       );
       if (remainingComponents.length > 0 && !((_a = ui.componentList.other) == null ? void 0 : _a.components) && ((_b = ui.componentList.other) == null ? void 0 : _b.visible) !== false) {
         _componentList.push(
-          /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsx30(
             ComponentList,
             {
               id: "other",
@@ -4036,7 +4123,7 @@ var useComponentList = (config, ui) => {
               children: remainingComponents.map((componentName, i) => {
                 var _a2;
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ jsx29(
+                return /* @__PURE__ */ jsx30(
                   ComponentList.Item,
                   {
                     name: componentName,
@@ -4058,31 +4145,31 @@ var useComponentList = (config, ui) => {
 };
 // components/Puck/components/Components/index.tsx
-import { useMemo as useMemo9 } from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { useMemo as useMemo10 } from "react";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var Components = () => {
   const { config, state, overrides } = useAppContext();
   const componentList = useComponentList(config, state.ui);
-  const Wrapper = useMemo9(() => overrides.components || "div", [overrides]);
-  return /* @__PURE__ */ jsx30(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx30(ComponentList, { id: "all" }) });
+  const Wrapper = useMemo10(() => overrides.components || "div", [overrides]);
+  return /* @__PURE__ */ jsx31(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx31(ComponentList, { id: "all" }) });
 };
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-import { useCallback as useCallback8, useMemo as useMemo10 } from "react";
+import { useCallback as useCallback8, useMemo as useMemo11 } from "react";
 // components/AutoFrame/index.tsx
 init_react_import();
 import {
-  createContext as createContext4,
-  useContext as useContext6,
+  createContext as createContext5,
+  useContext as useContext8,
   useEffect as useEffect15,
-  useRef as useRef3,
+  useRef as useRef2,
   useState as useState17
 } from "react";
 import hash from "object-hash";
 import { createPortal as createPortal2 } from "react-dom";
-import { Fragment as Fragment13, jsx as jsx31 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx32 } from "react/jsx-runtime";
 var styleSelector = 'style, link[rel="stylesheet"]';
 var collectStyles = (doc) => {
   const collected = [];
@@ -4282,10 +4369,10 @@ var CopyHostStyles = ({
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ jsx31(Fragment13, { children });
+  return /* @__PURE__ */ jsx32(Fragment13, { children });
 };
-var autoFrameContext = createContext4({});
-var useFrame = () => useContext6(autoFrameContext);
+var autoFrameContext = createContext5({});
+var useFrame = () => useContext8(autoFrameContext);
 function AutoFrame(_a) {
   var _b = _a, {
     children,
@@ -4302,7 +4389,7 @@ function AutoFrame(_a) {
   ]);
   const [loaded, setLoaded] = useState17(false);
   const [ctx, setCtx] = useState17({});
-  const ref = useRef3(null);
+  const ref = useRef2(null);
   const [mountTarget, setMountTarget] = useState17();
   useEffect15(() => {
     var _a2;
@@ -4314,7 +4401,7 @@ function AutoFrame(_a) {
       setMountTarget((_a2 = ref.current.contentDocument) == null ? void 0 : _a2.getElementById("frame-root"));
     }
   }, [ref, loaded]);
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     "iframe",
     __spreadProps(__spreadValues({}, props), {
       className,
@@ -4324,7 +4411,7 @@ function AutoFrame(_a) {
       onLoad: () => {
         setLoaded(true);
       },
-      children: /* @__PURE__ */ jsx31(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx31(CopyHostStyles, { debug, onStylesLoaded, children: createPortal2(children, mountTarget) }) })
+      children: /* @__PURE__ */ jsx32(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx32(CopyHostStyles, { debug, onStylesLoaded, children: createPortal2(children, mountTarget) }) })
     })
   );
 }
@@ -4336,7 +4423,7 @@ init_react_import();
 var styles_module_default18 = { "PuckPreview": "_PuckPreview_rxwlr_1", "PuckPreview-frame": "_PuckPreview-frame_rxwlr_5" };
 // components/Puck/components/Preview/index.tsx
-import { Fragment as Fragment14, jsx as jsx32 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx33 } from "react/jsx-runtime";
 var getClassName23 = get_class_name_factory_default("PuckPreview", styles_module_default18);
 var Preview = ({ id = "puck-preview" }) => {
   const { config, dispatch, state, setStatus, iframe, overrides } = useAppContext();
@@ -4345,13 +4432,13 @@ 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__ */ jsx32(Fragment14, { children: pageProps.children });
+      }, pageProps)) : /* @__PURE__ */ jsx33(Fragment14, { children: pageProps.children });
     },
     [config.root]
   );
-  const Frame = useMemo10(() => overrides.iframe, [overrides]);
+  const Frame = useMemo11(() => overrides.iframe, [overrides]);
   const rootProps = state.data.root.props || state.data.root;
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     "div",
     {
       className: getClassName23(),
@@ -4359,7 +4446,7 @@ var Preview = ({ id = "puck-preview" }) => {
       onClick: () => {
         dispatch({ type: "setUi", ui: __spreadProps(__spreadValues({}, state.ui), { itemSelector: null }) });
       },
-      children: iframe.enabled ? /* @__PURE__ */ jsx32(
+      children: iframe.enabled ? /* @__PURE__ */ jsx33(
         AutoFrame_default,
         {
           id: "preview-frame",
@@ -4368,27 +4455,27 @@ var Preview = ({ id = "puck-preview" }) => {
           onStylesLoaded: () => {
             setStatus("READY");
           },
-          children: /* @__PURE__ */ jsx32(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
-            const inner = /* @__PURE__ */ jsx32(
+          children: /* @__PURE__ */ jsx33(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
+            const inner = /* @__PURE__ */ jsx33(
               Page,
               __spreadProps(__spreadValues({}, rootProps), {
                 puck: { renderDropZone: DropZone, isEditing: true },
                 editMode: true,
-                children: /* @__PURE__ */ jsx32(DropZone, { zone: rootDroppableId })
+                children: /* @__PURE__ */ jsx33(DropZone, { zone: rootDroppableId })
               })
             );
             if (Frame) {
-              return /* @__PURE__ */ jsx32(Frame, { document: document2, children: inner });
+              return /* @__PURE__ */ jsx33(Frame, { document: document2, children: inner });
             }
             return inner;
           } })
         }
-      ) : /* @__PURE__ */ jsx32("div", { id: "preview-frame", className: getClassName23("frame"), children: /* @__PURE__ */ jsx32(
+      ) : /* @__PURE__ */ jsx33("div", { id: "preview-frame", className: getClassName23("frame"), children: /* @__PURE__ */ jsx33(
         Page,
         __spreadProps(__spreadValues({}, rootProps), {
           puck: { renderDropZone: DropZone, isEditing: true },
           editMode: true,
-          children: /* @__PURE__ */ jsx32(DropZone, { zone: rootDroppableId })
+          children: /* @__PURE__ */ jsx33(DropZone, { zone: rootDroppableId })
         })
       ) })
     }
@@ -4438,7 +4525,7 @@ var scrollIntoView = (el) => {
 };
 // components/LayerTree/index.tsx
-import { useContext as useContext7 } from "react";
+import { useContext as useContext9 } from "react";
 // lib/is-child-of-zone.ts
 init_react_import();
@@ -4452,7 +4539,7 @@ var isChildOfZone = (item, maybeChild, ctx) => {
 };
 // components/LayerTree/index.tsx
-import { Fragment as Fragment15, jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx34, jsxs as jsxs17 } 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 = ({
@@ -4465,15 +4552,15 @@ var LayerTree = ({
   label
 }) => {
   const zones = data.zones || {};
-  const ctx = useContext7(dropZoneContext);
+  const ctx = useContext9(dropZoneContext);
   return /* @__PURE__ */ jsxs17(Fragment15, { children: [
     label && /* @__PURE__ */ jsxs17("div", { className: getClassName24("zoneTitle"), children: [
-      /* @__PURE__ */ jsx33("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ jsx33(Layers, { size: "16" }) }),
+      /* @__PURE__ */ jsx34("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ jsx34(Layers, { size: "16" }) }),
       " ",
       label
     ] }),
     /* @__PURE__ */ jsxs17("ul", { className: getClassName24(), children: [
-      zoneContent.length === 0 && /* @__PURE__ */ jsx33("div", { className: getClassName24("helper"), children: "No items" }),
+      zoneContent.length === 0 && /* @__PURE__ */ jsx34("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);
@@ -4501,7 +4588,7 @@ var LayerTree = ({
               childIsSelected
             }),
             children: [
-              /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs17(
+              /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs17(
                 "button",
                 {
                   type: "button",
@@ -4534,22 +4621,22 @@ var LayerTree = ({
                     setHoveringComponent(null);
                   },
                   children: [
-                    containsZone && /* @__PURE__ */ jsx33(
+                    containsZone && /* @__PURE__ */ jsx34(
                       "div",
                       {
                         className: getClassNameLayer("chevron"),
                         title: isSelected ? "Collapse" : "Expand",
-                        children: /* @__PURE__ */ jsx33(ChevronDown, { size: "12" })
+                        children: /* @__PURE__ */ jsx34(ChevronDown, { size: "12" })
                       }
                     ),
                     /* @__PURE__ */ jsxs17("div", { className: getClassNameLayer("title"), children: [
-                      /* @__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 })
+                      /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ jsx34(Type, { size: "16" }) : /* @__PURE__ */ jsx34(LayoutGrid, { size: "16" }) }),
+                      /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("name"), children: label2 })
                     ] })
                   ]
                 }
               ) }),
-              containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ jsx33(
+              containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ jsx34(
                 LayerTree,
                 {
                   config,
@@ -4571,8 +4658,8 @@ var LayerTree = ({
 };
 // components/Puck/components/Outline/index.tsx
-import { useCallback as useCallback9, useMemo as useMemo11 } from "react";
-import { Fragment as Fragment16, jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
+import { useCallback as useCallback9, useMemo as useMemo12 } from "react";
+import { Fragment as Fragment16, jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
 var Outline = () => {
   const { dispatch, state, overrides, config } = useAppContext();
   const { data, ui } = state;
@@ -4586,9 +4673,9 @@ var Outline = () => {
     },
     []
   );
-  const Wrapper = useMemo11(() => overrides.outline || "div", [overrides]);
-  return /* @__PURE__ */ jsx34(Wrapper, { children: /* @__PURE__ */ jsx34(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ jsxs18(Fragment16, { children: [
-    (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ jsx34(
+  const Wrapper = useMemo12(() => overrides.outline || "div", [overrides]);
+  return /* @__PURE__ */ jsx35(Wrapper, { children: /* @__PURE__ */ jsx35(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ jsxs18(Fragment16, { children: [
+    (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ jsx35(
       LayerTree,
       {
         config,
@@ -4601,7 +4688,7 @@ var Outline = () => {
     ),
     Object.entries(findZonesForArea(data, "root")).map(
       ([zoneKey, zone]) => {
-        return /* @__PURE__ */ jsx34(
+        return /* @__PURE__ */ jsx35(
           LayerTree,
           {
             config,
@@ -4625,7 +4712,8 @@ import { useHotkeys } from "react-hotkeys-hook";
 function usePuckHistory({
   dispatch,
   initialAppState,
-  historyStore
+  historyStore,
+  iframeEnabled
 }) {
   const back = () => {
     var _a;
@@ -4643,6 +4731,16 @@ function usePuckHistory({
       historyStore.forward();
     }
   };
+  const backIframe = () => {
+    if (iframeEnabled) {
+      back();
+    }
+  };
+  const forwardIframe = () => {
+    if (iframeEnabled) {
+      forward();
+    }
+  };
   const setHistories = (histories) => {
     var _a;
     dispatch({
@@ -4661,9 +4759,23 @@ function usePuckHistory({
       historyStore.setHistoryIndex(index);
     }
   };
+  const frame = getFrame();
+  const resolvedFrame = frame !== document ? frame : void 0;
   useHotkeys("meta+z", back, { preventDefault: true });
   useHotkeys("meta+shift+z", forward, { preventDefault: true });
   useHotkeys("meta+y", forward, { preventDefault: true });
+  useHotkeys("meta+z", backIframe, {
+    preventDefault: true,
+    document: resolvedFrame
+  });
+  useHotkeys("meta+shift+z", forwardIframe, {
+    preventDefault: true,
+    document: resolvedFrame
+  });
+  useHotkeys("meta+y", forwardIframe, {
+    preventDefault: true,
+    document: resolvedFrame
+  });
   return {
     back,
     forward,
@@ -4850,25 +4962,25 @@ var getBox = function getBox2(el) {
 import {
   useCallback as useCallback10,
   useEffect as useEffect17,
-  useMemo as useMemo13,
-  useRef as useRef4,
+  useMemo as useMemo14,
+  useRef as useRef3,
   useState as useState20
 } from "react";
 // components/ViewportControls/index.tsx
 init_react_import();
-import { useEffect as useEffect16, useMemo as useMemo12, useState as useState19 } from "react";
+import { useEffect as useEffect16, useMemo as useMemo13, useState as useState19 } 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 jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
 var icons = {
-  Smartphone: /* @__PURE__ */ jsx35(Smartphone, { size: 16 }),
-  Tablet: /* @__PURE__ */ jsx35(Tablet, { size: 16 }),
-  Monitor: /* @__PURE__ */ jsx35(Monitor, { size: 16 })
+  Smartphone: /* @__PURE__ */ jsx36(Smartphone, { size: 16 }),
+  Tablet: /* @__PURE__ */ jsx36(Tablet, { size: 16 }),
+  Monitor: /* @__PURE__ */ jsx36(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);
@@ -4884,7 +4996,7 @@ var ViewportButton = ({
   useEffect16(() => {
     setIsActive(width === state.ui.viewports.current.width);
   }, [width, state.ui.viewports.current.width]);
-  return /* @__PURE__ */ jsx35("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx36(
     IconButton,
     {
       title,
@@ -4893,7 +5005,7 @@ var ViewportButton = ({
         e.stopPropagation();
         onClick({ width, height });
       },
-      children: /* @__PURE__ */ jsx35("span", { className: getClassNameButton("inner"), children })
+      children: /* @__PURE__ */ jsx36("span", { className: getClassNameButton("inner"), children })
     }
   ) });
 };
@@ -4917,7 +5029,7 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
-  const zoomOptions = useMemo12(
+  const zoomOptions = useMemo13(
     () => [
       ...defaultZoomOptions,
       ...defaultsContainAutoZoom ? [] : [
@@ -4930,7 +5042,7 @@ var ViewportControls = ({
     [autoZoom]
   );
   return /* @__PURE__ */ jsxs19("div", { className: getClassName25(), children: [
-    viewports.map((viewport, i) => /* @__PURE__ */ jsx35(
+    viewports.map((viewport, i) => /* @__PURE__ */ jsx36(
       ViewportButton,
       {
         height: viewport.height,
@@ -4941,8 +5053,8 @@ var ViewportControls = ({
       },
       i
     )),
-    /* @__PURE__ */ jsx35("div", { className: getClassName25("divider") }),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36("div", { className: getClassName25("divider") }),
+    /* @__PURE__ */ jsx36(
       IconButton,
       {
         title: "Zoom viewport out",
@@ -4956,10 +5068,10 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ jsx35(ZoomOut, { size: 16 })
+        children: /* @__PURE__ */ jsx36(ZoomOut, { size: 16 })
       }
     ),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36(
       IconButton,
       {
         title: "Zoom viewport in",
@@ -4973,11 +5085,11 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ jsx35(ZoomIn, { size: 16 })
+        children: /* @__PURE__ */ jsx36(ZoomIn, { size: 16 })
       }
     ),
-    /* @__PURE__ */ jsx35("div", { className: getClassName25("divider") }),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36("div", { className: getClassName25("divider") }),
+    /* @__PURE__ */ jsx36(
       "select",
       {
         className: getClassName25("zoomSelect"),
@@ -4985,7 +5097,7 @@ var ViewportControls = ({
         onChange: (e) => {
           onZoom(parseFloat(e.currentTarget.value));
         },
-        children: zoomOptions.map((option) => /* @__PURE__ */ jsx35(
+        children: zoomOptions.map((option) => /* @__PURE__ */ jsx36(
           "option",
           {
             value: option.value,
@@ -5000,7 +5112,7 @@ var ViewportControls = ({
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css#css-module
 init_react_import();
-var styles_module_default21 = { "PuckCanvas": "_PuckCanvas_avf1c_1", "PuckCanvas-controls": "_PuckCanvas-controls_avf1c_16", "PuckCanvas-inner": "_PuckCanvas-inner_avf1c_21", "PuckCanvas-root": "_PuckCanvas-root_avf1c_32", "PuckCanvas--ready": "_PuckCanvas--ready_avf1c_57", "PuckCanvas-loader": "_PuckCanvas-loader_avf1c_62", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_avf1c_72" };
+var styles_module_default21 = { "PuckCanvas": "_PuckCanvas_18jay_1", "PuckCanvas-controls": "_PuckCanvas-controls_18jay_16", "PuckCanvas-inner": "_PuckCanvas-inner_18jay_21", "PuckCanvas-root": "_PuckCanvas-root_18jay_30", "PuckCanvas--ready": "_PuckCanvas--ready_18jay_55", "PuckCanvas-loader": "_PuckCanvas-loader_18jay_60", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_18jay_70" };
 // lib/get-zoom-config.ts
 init_react_import();
@@ -5033,20 +5145,20 @@ var getZoomConfig = (uiViewport, frame, zoom) => {
 };
 // components/Puck/components/Canvas/index.tsx
-import { Fragment as Fragment17, jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx37, jsxs as jsxs20 } from "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 = useRef4(null);
+  const frameRef = useRef3(null);
   const [showTransition, setShowTransition] = useState20(false);
-  const defaultRender = useMemo13(() => {
-    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx36(Fragment17, { children });
+  const defaultRender = useMemo14(() => {
+    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx37(Fragment17, { children });
     return PuckDefault;
   }, []);
-  const CustomPreview = useMemo13(
+  const CustomPreview = useMemo14(
     () => overrides.preview || defaultRender,
     [overrides]
   );
@@ -5117,7 +5229,7 @@ var Canvas = () => {
         recordHistory: true
       }),
       children: [
-        ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx36("div", { className: getClassName26("controls"), children: /* @__PURE__ */ jsx36(
+        ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx37("div", { className: getClassName26("controls"), children: /* @__PURE__ */ jsx37(
           ViewportControls,
           {
             autoZoom: zoomConfig.autoZoom,
@@ -5143,7 +5255,7 @@ var Canvas = () => {
           }
         ) }),
         /* @__PURE__ */ jsxs20("div", { className: getClassName26("inner"), ref: frameRef, children: [
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx37(
             "div",
             {
               className: getClassName26("root"),
@@ -5155,10 +5267,10 @@ var Canvas = () => {
                 overflow: iframe.enabled ? void 0 : "auto"
               },
               suppressHydrationWarning: true,
-              children: /* @__PURE__ */ jsx36(CustomPreview, { children: /* @__PURE__ */ jsx36(Preview, {}) })
+              children: /* @__PURE__ */ jsx37(CustomPreview, { children: /* @__PURE__ */ jsx37(Preview, {}) })
             }
           ),
-          /* @__PURE__ */ jsx36("div", { className: getClassName26("loader"), children: /* @__PURE__ */ jsx36(Loader, { size: 24 }) })
+          /* @__PURE__ */ jsx37("div", { className: getClassName26("loader"), children: /* @__PURE__ */ jsx37(Loader, { size: 24 }) })
         ] })
       ]
     }
@@ -5202,7 +5314,7 @@ var insertComponent = (componentType, zone, index, {
 // lib/use-loaded-overrides.ts
 init_react_import();
-import { useMemo as useMemo14 } from "react";
+import { useMemo as useMemo15 } from "react";
 // lib/load-overrides.ts
 init_react_import();
@@ -5241,18 +5353,18 @@ var useLoadedOverrides = ({
   overrides,
   plugins
 }) => {
-  return useMemo14(() => {
+  return useMemo15(() => {
     return loadOverrides({ overrides, plugins });
   }, [plugins, overrides]);
 };
 // components/DefaultOverride/index.tsx
 init_react_import();
-import { Fragment as Fragment18, jsx as jsx37 } from "react/jsx-runtime";
-var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx37(Fragment18, { children });
+import { Fragment as Fragment18, jsx as jsx38 } from "react/jsx-runtime";
+var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx38(Fragment18, { children });
 // components/Puck/index.tsx
-import { Fragment as Fragment19, jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx39, jsxs as jsxs21 } 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({
@@ -5275,13 +5387,13 @@ function Puck({
   dnd,
   initialHistory: _initialHistory
 }) {
-  var _a;
+  var _a, _b;
   const iframe = __spreadValues({
     enabled: true,
     waitForStyles: true
   }, _iframe);
   const [generatedAppState] = useState21(() => {
-    var _a2, _b, _c, _d, _e, _f, _g, _h, _i;
+    var _a2, _b2, _c, _d, _e, _f, _g, _h, _i;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
     if (typeof window !== "undefined") {
@@ -5301,7 +5413,7 @@ function Puck({
         clientUiState = __spreadProps(__spreadValues({}, clientUiState), {
           viewports: __spreadProps(__spreadValues({}, initial.viewports), {
             current: __spreadProps(__spreadValues({}, initial.viewports.current), {
-              height: ((_b = (_a2 = initialUi == null ? void 0 : initialUi.viewports) == null ? void 0 : _a2.current) == null ? void 0 : _b.height) || ((_c = viewports[closestViewport]) == null ? void 0 : _c.height) || "auto",
+              height: ((_b2 = (_a2 = initialUi == null ? void 0 : initialUi.viewports) == null ? void 0 : _a2.current) == null ? void 0 : _b2.height) || ((_c = viewports[closestViewport]) == null ? void 0 : _c.height) || "auto",
               width: ((_e = (_d = initialUi == null ? void 0 : initialUi.viewports) == null ? void 0 : _d.current) == null ? void 0 : _e.width) || ((_f = viewports[closestViewport]) == null ? void 0 : _f.width)
             })
           })
@@ -5364,7 +5476,12 @@ function Puck({
     flushZones(initialAppState)
   );
   const { data, ui } = appState;
-  const history = usePuckHistory({ dispatch, initialAppState, historyStore });
+  const history = usePuckHistory({
+    dispatch,
+    initialAppState,
+    historyStore,
+    iframeEnabled: (_a = _iframe == null ? void 0 : _iframe.enabled) != null ? _a : true
+  });
   const [menuOpen, setMenuOpen] = useState21(false);
   const { itemSelector, leftSideBarVisible, rightSideBarVisible } = ui;
   const setItemSelector = useCallback11(
@@ -5422,28 +5539,28 @@ function Puck({
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  const defaultHeaderRender = useMemo15(() => {
+  const defaultHeaderRender = useMemo16(() => {
     if (renderHeader) {
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
       );
       const RenderHeader = (_a2) => {
-        var _b = _a2, { actions } = _b, props = __objRest(_b, ["actions"]);
+        var _b2 = _a2, { actions } = _b2, props = __objRest(_b2, ["actions"]);
         const Comp = renderHeader;
-        return /* @__PURE__ */ jsx38(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
+        return /* @__PURE__ */ jsx39(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
       };
       return RenderHeader;
     }
     return DefaultOverride;
   }, [renderHeader]);
-  const defaultHeaderActionsRender = useMemo15(() => {
+  const defaultHeaderActionsRender = useMemo16(() => {
     if (renderHeaderActions) {
       console.warn(
         "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
       );
       const RenderHeader = (props) => {
         const Comp = renderHeaderActions;
-        return /* @__PURE__ */ jsx38(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
+        return /* @__PURE__ */ jsx39(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
       };
       return RenderHeader;
     }
@@ -5453,15 +5570,15 @@ function Puck({
     overrides,
     plugins
   });
-  const CustomPuck = useMemo15(
+  const CustomPuck = useMemo16(
     () => loadedOverrides.puck || DefaultOverride,
     [loadedOverrides]
   );
-  const CustomHeader = useMemo15(
+  const CustomHeader = useMemo16(
     () => loadedOverrides.header || defaultHeaderRender,
     [loadedOverrides]
   );
-  const CustomHeaderActions = useMemo15(
+  const CustomHeaderActions = useMemo16(
     () => loadedOverrides.headerActions || defaultHeaderActionsRender,
     [loadedOverrides]
   );
@@ -5470,9 +5587,9 @@ function Puck({
     setMounted(true);
   }, []);
   const selectedComponentConfig = selectedItem && config.components[selectedItem.type];
-  const selectedComponentLabel = selectedItem ? (_a = selectedComponentConfig == null ? void 0 : selectedComponentConfig["label"]) != null ? _a : selectedItem.type.toString() : "";
+  const selectedComponentLabel = selectedItem ? (_b = selectedComponentConfig == null ? void 0 : selectedComponentConfig["label"]) != null ? _b : selectedItem.type.toString() : "";
   return /* @__PURE__ */ jsxs21("div", { className: `Puck ${getClassName27()}`, children: [
-    /* @__PURE__ */ jsx38(
+    /* @__PURE__ */ jsx39(
       AppProvider,
       {
         value: {
@@ -5494,7 +5611,7 @@ function Puck({
           getPermissions: () => ({}),
           refreshPermissions: () => null
         },
-        children: /* @__PURE__ */ jsx38(appContext.Consumer, { children: ({ resolveData }) => /* @__PURE__ */ jsx38(
+        children: /* @__PURE__ */ jsx39(appContext.Consumer, { children: ({ resolveData }) => /* @__PURE__ */ jsx39(
           DragDropContext,
           {
             autoScrollerOptions: { disabled: dnd == null ? void 0 : dnd.disableAutoScroll },
@@ -5546,7 +5663,7 @@ function Puck({
                 });
               }
             },
-            children: /* @__PURE__ */ jsx38(
+            children: /* @__PURE__ */ jsx39(
               DropZoneProvider,
               {
                 value: {
@@ -5560,7 +5677,7 @@ function Puck({
                   mode: "edit",
                   areaId: "root"
                 },
-                children: /* @__PURE__ */ jsx38(CustomPuck, { children: children || /* @__PURE__ */ jsx38(
+                children: /* @__PURE__ */ jsx39(CustomPuck, { children: children || /* @__PURE__ */ jsx39(
                   "div",
                   {
                     className: getLayoutClassName({
@@ -5570,57 +5687,57 @@ function Puck({
                       rightSideBarVisible
                     }),
                     children: /* @__PURE__ */ jsxs21("div", { className: getLayoutClassName("inner"), children: [
-                      /* @__PURE__ */ jsx38(
+                      /* @__PURE__ */ jsx39(
                         CustomHeader,
                         {
-                          actions: /* @__PURE__ */ jsx38(Fragment19, { children: /* @__PURE__ */ jsx38(CustomHeaderActions, { children: /* @__PURE__ */ jsx38(
+                          actions: /* @__PURE__ */ jsx39(Fragment19, { children: /* @__PURE__ */ jsx39(CustomHeaderActions, { children: /* @__PURE__ */ jsx39(
                             Button,
                             {
                               onClick: () => {
                                 onPublish && onPublish(data);
                               },
-                              icon: /* @__PURE__ */ jsx38(Globe, { size: "14px" }),
+                              icon: /* @__PURE__ */ jsx39(Globe, { size: "14px" }),
                               children: "Publish"
                             }
                           ) }) }),
-                          children: /* @__PURE__ */ jsx38("header", { className: getLayoutClassName("header"), children: /* @__PURE__ */ jsxs21("div", { className: getLayoutClassName("headerInner"), children: [
+                          children: /* @__PURE__ */ jsx39("header", { className: getLayoutClassName("header"), children: /* @__PURE__ */ jsxs21("div", { className: getLayoutClassName("headerInner"), children: [
                             /* @__PURE__ */ jsxs21(
                               "div",
                               {
                                 className: getLayoutClassName("headerToggle"),
                                 children: [
-                                  /* @__PURE__ */ jsx38(
+                                  /* @__PURE__ */ jsx39(
                                     "div",
                                     {
                                       className: getLayoutClassName(
                                         "leftSideBarToggle"
                                       ),
-                                      children: /* @__PURE__ */ jsx38(
+                                      children: /* @__PURE__ */ jsx39(
                                         IconButton,
                                         {
                                           onClick: () => {
                                             toggleSidebars("left");
                                           },
                                           title: "Toggle left sidebar",
-                                          children: /* @__PURE__ */ jsx38(PanelLeft, { focusable: "false" })
+                                          children: /* @__PURE__ */ jsx39(PanelLeft, { focusable: "false" })
                                         }
                                       )
                                     }
                                   ),
-                                  /* @__PURE__ */ jsx38(
+                                  /* @__PURE__ */ jsx39(
                                     "div",
                                     {
                                       className: getLayoutClassName(
                                         "rightSideBarToggle"
                                       ),
-                                      children: /* @__PURE__ */ jsx38(
+                                      children: /* @__PURE__ */ jsx39(
                                         IconButton,
                                         {
                                           onClick: () => {
                                             toggleSidebars("right");
                                           },
                                           title: "Toggle right sidebar",
-                                          children: /* @__PURE__ */ jsx38(PanelRight, { focusable: "false" })
+                                          children: /* @__PURE__ */ jsx39(PanelRight, { focusable: "false" })
                                         }
                                       )
                                     }
@@ -5628,7 +5745,7 @@ function Puck({
                                 ]
                               }
                             ),
-                            /* @__PURE__ */ jsx38(
+                            /* @__PURE__ */ jsx39(
                               "div",
                               {
                                 className: getLayoutClassName("headerTitle"),
@@ -5636,7 +5753,7 @@ function Puck({
                                   headerTitle || rootProps.title || "Page",
                                   headerPath && /* @__PURE__ */ jsxs21(Fragment19, { children: [
                                     " ",
-                                    /* @__PURE__ */ jsx38(
+                                    /* @__PURE__ */ jsx39(
                                       "code",
                                       {
                                         className: getLayoutClassName(
@@ -5654,36 +5771,36 @@ function Puck({
                               {
                                 className: getLayoutClassName("headerTools"),
                                 children: [
-                                  /* @__PURE__ */ jsx38(
+                                  /* @__PURE__ */ jsx39(
                                     "div",
                                     {
                                       className: getLayoutClassName("menuButton"),
-                                      children: /* @__PURE__ */ jsx38(
+                                      children: /* @__PURE__ */ jsx39(
                                         IconButton,
                                         {
                                           onClick: () => {
                                             return setMenuOpen(!menuOpen);
                                           },
                                           title: "Toggle menu bar",
-                                          children: menuOpen ? /* @__PURE__ */ jsx38(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx38(ChevronDown, { focusable: "false" })
+                                          children: menuOpen ? /* @__PURE__ */ jsx39(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx39(ChevronDown, { focusable: "false" })
                                         }
                                       )
                                     }
                                   ),
-                                  /* @__PURE__ */ jsx38(
+                                  /* @__PURE__ */ jsx39(
                                     MenuBar,
                                     {
                                       appState,
                                       dispatch,
                                       onPublish,
                                       menuOpen,
-                                      renderHeaderActions: () => /* @__PURE__ */ jsx38(CustomHeaderActions, { children: /* @__PURE__ */ jsx38(
+                                      renderHeaderActions: () => /* @__PURE__ */ jsx39(CustomHeaderActions, { children: /* @__PURE__ */ jsx39(
                                         Button,
                                         {
                                           onClick: () => {
                                             onPublish && onPublish(data);
                                           },
-                                          icon: /* @__PURE__ */ jsx38(Globe, { size: "14px" }),
+                                          icon: /* @__PURE__ */ jsx39(Globe, { size: "14px" }),
                                           children: "Publish"
                                         }
                                       ) }),
@@ -5697,18 +5814,18 @@ function Puck({
                         }
                       ),
                       /* @__PURE__ */ jsxs21("div", { className: getLayoutClassName("leftSideBar"), children: [
-                        /* @__PURE__ */ jsx38(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx38(Components, {}) }),
-                        /* @__PURE__ */ jsx38(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx38(Outline, {}) })
+                        /* @__PURE__ */ jsx39(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx39(Components, {}) }),
+                        /* @__PURE__ */ jsx39(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx39(Outline, {}) })
                       ] }),
-                      /* @__PURE__ */ jsx38(Canvas, {}),
-                      /* @__PURE__ */ jsx38("div", { className: getLayoutClassName("rightSideBar"), children: /* @__PURE__ */ jsx38(
+                      /* @__PURE__ */ jsx39(Canvas, {}),
+                      /* @__PURE__ */ jsx39("div", { className: getLayoutClassName("rightSideBar"), children: /* @__PURE__ */ jsx39(
                         SidebarSection,
                         {
                           noPadding: true,
                           noBorderTop: true,
                           showBreadcrumbs: true,
                           title: selectedItem ? selectedComponentLabel : "Page",
-                          children: /* @__PURE__ */ jsx38(Fields, {})
+                          children: /* @__PURE__ */ jsx39(Fields, {})
                         }
                       ) })
                     ] })
@@ -5720,7 +5837,7 @@ function Puck({
         ) })
       }
     ),
-    /* @__PURE__ */ jsx38("div", { id: "puck-portal-root", className: getClassName27("portal") })
+    /* @__PURE__ */ jsx39("div", { id: "puck-portal-root", className: getClassName27("portal") })
   ] });
 }
 Puck.Components = Components;
@@ -5730,7 +5847,7 @@ Puck.Preview = Preview;
 // components/Render/index.tsx
 init_react_import();
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 function Render({
   config,
   data
@@ -5743,7 +5860,7 @@ function Render({
   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__ */ jsx39(DropZoneProvider, { value: { data: defaultedData, config, mode: "render" }, children: /* @__PURE__ */ jsx39(
+    return /* @__PURE__ */ jsx40(DropZoneProvider, { value: { data: defaultedData, config, mode: "render" }, children: /* @__PURE__ */ jsx40(
       config.root.render,
       __spreadProps(__spreadValues({}, rootProps), {
         puck: {
@@ -5753,11 +5870,11 @@ function Render({
         title,
         editMode: false,
         id: "puck-root",
-        children: /* @__PURE__ */ jsx39(DropZone, { zone: rootDroppableId })
+        children: /* @__PURE__ */ jsx40(DropZone, { zone: rootDroppableId })
       })
     ) });
   }
-  return /* @__PURE__ */ jsx39(DropZoneProvider, { value: { data: defaultedData, config, mode: "render" }, children: /* @__PURE__ */ jsx39(DropZone, { zone: rootDroppableId }) });
+  return /* @__PURE__ */ jsx40(DropZoneProvider, { value: { data: defaultedData, config, mode: "render" }, children: /* @__PURE__ */ jsx40(DropZone, { zone: rootDroppableId }) });
 }
 // lib/migrate.ts