@measured/puck 0.16.0-canary.6d43ba0 → 0.16.0-canary.72b8720

package/dist/index.js

@@ -156,11 +156,13 @@ __export(core_exports, {
   DropZoneProvider: () => DropZoneProvider,
   FieldLabel: () => FieldLabel,
   FieldLabelInternal: () => FieldLabelInternal2,
+  Group: () => Group,
   IconButton: () => IconButton,
   Puck: () => Puck,
   Render: () => Render,
   dropZoneContext: () => dropZoneContext,
   migrate: () => migrate,
+  overrideKeys: () => overrideKeys,
   resolveAllData: () => resolveAllData,
   transformProps: () => transformProps,
   usePuck: () => usePuck
@@ -168,15 +170,47 @@ __export(core_exports, {
 module.exports = __toCommonJS(core_exports);
 init_react_import();
 
+// types/API/index.ts
+init_react_import();
+
+// types/API/Viewports.ts
+init_react_import();
+
+// types/index.ts
+init_react_import();
+
+// types/API/Overrides.ts
+init_react_import();
+var overrideKeys = [
+  "header",
+  "headerActions",
+  "fields",
+  "fieldLabel",
+  "components",
+  "componentItem",
+  "outline",
+  "puck",
+  "preview"
+];
+
+// types/AppState.tsx
+init_react_import();
+
 // types/Config.tsx
 init_react_import();
 
-// types/Plugin.ts
+// types/Data.tsx
 init_react_import();
 
 // types/Fields.ts
 init_react_import();
 
+// types/Props.tsx
+init_react_import();
+
+// types/Utils.tsx
+init_react_import();
+
 // components/ActionBar/index.tsx
 init_react_import();
 
@@ -209,11 +243,11 @@ var get_class_name_factory_default = getClassNameFactory;
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css#css-module
 init_react_import();
-var styles_module_default = { "ActionBarComponent": "_ActionBarComponent_8nyey_1", "ActionBarComponent-actionsLabel": "_ActionBarComponent-actionsLabel_8nyey_15", "ActionBarComponent-action": "_ActionBarComponent-action_8nyey_15" };
+var styles_module_default = { "ActionBar": "_ActionBar_fp58q_1", "ActionBar-actionsLabel": "_ActionBar-actionsLabel_fp58q_16", "ActionBar-group": "_ActionBar-group_fp58q_29", "ActionBar-action": "_ActionBar-action_fp58q_16" };
 
 // components/ActionBar/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var getClassName = get_class_name_factory_default("ActionBarComponent", styles_module_default);
+var getClassName = get_class_name_factory_default("ActionBar", styles_module_default);
 var ActionBar = ({
   label,
   children
@@ -225,8 +259,19 @@ var Action = ({
   children,
   label,
   onClick
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: getClassName("action"), onClick, title: label, children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "button",
+  {
+    type: "button",
+    className: getClassName("action"),
+    onClick,
+    title: label,
+    children
+  }
+);
+var Group = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: getClassName("group"), children });
 ActionBar.Action = Action;
+ActionBar.Group = Group;
 
 // components/AutoField/index.tsx
 init_react_import();
@@ -236,7 +281,7 @@ init_react_import();
 var styles_module_default2 = { "Input": "_Input_3pq3z_1", "Input-label": "_Input-label_3pq3z_26", "Input-labelIcon": "_Input-labelIcon_3pq3z_35", "Input-disabledIcon": "_Input-disabledIcon_3pq3z_42", "Input-input": "_Input-input_3pq3z_47", "Input--readOnly": "_Input--readOnly_3pq3z_91", "Input-radioGroupItems": "_Input-radioGroupItems_3pq3z_102", "Input-radio": "_Input-radio_3pq3z_102", "Input-radioInner": "_Input-radioInner_3pq3z_119", "Input-radioInput": "_Input-radioInput_3pq3z_164" };
 
 // components/AutoField/index.tsx
-var import_react11 = require("react");
+var import_react13 = require("react");
 
 // components/AutoField/fields/index.tsx
 init_react_import();
@@ -644,7 +689,7 @@ var import_dnd = require("@measured/dnd");
 
 // components/Puck/context.tsx
 init_react_import();
-var import_react4 = require("react");
+var import_react6 = require("react");
 
 // lib/get-item.ts
 init_react_import();
@@ -659,21 +704,22 @@ var setupZone = (data, zoneKey) => {
   if (zoneKey === rootDroppableId) {
     return data;
   }
-  const newData = __spreadValues({}, data);
-  newData.zones = data.zones || {};
+  const newData = __spreadProps(__spreadValues({}, data), {
+    zones: data.zones || {}
+  });
   newData.zones[zoneKey] = newData.zones[zoneKey] || [];
   return newData;
 };
 
 // lib/get-item.ts
-var getItem = (selector, data, dynamicProps = {}) => {
+function getItem(selector, data, dynamicProps = {}) {
   if (!selector.zone || selector.zone === rootDroppableId) {
     const item2 = data.content[selector.index];
     return (item2 == null ? void 0 : item2.props) ? __spreadProps(__spreadValues({}, item2), { props: dynamicProps[item2.props.id] || item2.props }) : void 0;
   }
   const item = setupZone(data, selector.zone).zones[selector.zone][selector.index];
   return (item == null ? void 0 : item.props) ? __spreadProps(__spreadValues({}, item), { props: dynamicProps[item.props.id] || item.props }) : void 0;
-};
+}
 
 // components/ViewportControls/default-viewports.ts
 init_react_import();
@@ -685,6 +731,332 @@ var defaultViewports = [
 
 // components/Puck/context.tsx
 var import_ua_parser_js = require("ua-parser-js");
+
+// lib/use-resolved-permissions.ts
+init_react_import();
+var import_react4 = require("react");
+
+// lib/flatten-data.ts
+init_react_import();
+var flattenData = (data) => {
+  return Object.keys(data.zones || {}).reduce(
+    (acc, zone) => [...acc, ...data.zones[zone]],
+    data.content
+  );
+};
+
+// lib/get-changed.ts
+init_react_import();
+var getChanged = (newItem, oldItem) => {
+  return newItem ? Object.keys(newItem.props || {}).reduce((acc, item) => {
+    const newItemProps = (newItem == null ? void 0 : newItem.props) || {};
+    const oldItemProps = (oldItem == null ? void 0 : oldItem.props) || {};
+    return __spreadProps(__spreadValues({}, acc), {
+      [item]: oldItemProps[item] !== newItemProps[item]
+    });
+  }, {}) : {};
+};
+
+// lib/use-resolved-permissions.ts
+var useResolvedPermissions = (config, appState, globalPermissions, setComponentLoading, unsetComponentLoading) => {
+  const [cache3, setCache] = (0, import_react4.useState)({});
+  const [resolvedPermissions, setResolvedPermissions] = (0, import_react4.useState)({});
+  const resolveDataForItem = (0, import_react4.useCallback)(
+    (item, force = false) => __async(void 0, null, function* () {
+      var _a, _b, _c;
+      setComponentLoading == null ? void 0 : setComponentLoading(item.props.id);
+      const componentConfig = item.type === "root" ? config.root : config.components[item.type];
+      if (!componentConfig) {
+        unsetComponentLoading == null ? void 0 : unsetComponentLoading(item.props.id);
+        return;
+      }
+      const initialPermissions = __spreadValues(__spreadValues({}, globalPermissions), componentConfig.permissions);
+      if (componentConfig.resolvePermissions) {
+        const changed = getChanged(item, (_a = cache3[item.props.id]) == null ? void 0 : _a.lastData);
+        if (Object.values(changed).some((el) => el === true) || force) {
+          const resolvedPermissions2 = yield componentConfig.resolvePermissions(
+            item,
+            {
+              changed,
+              lastPermissions: ((_b = cache3[item.props.id]) == null ? void 0 : _b.lastPermissions) || null,
+              permissions: initialPermissions,
+              appState,
+              lastData: ((_c = cache3[item.props.id]) == null ? void 0 : _c.lastData) || null
+            }
+          );
+          setCache((_cache) => __spreadProps(__spreadValues({}, _cache), {
+            [item.props.id]: {
+              lastData: item,
+              lastPermissions: resolvedPermissions2
+            }
+          }));
+          setResolvedPermissions((p) => __spreadProps(__spreadValues({}, p), {
+            [item.props.id]: resolvedPermissions2
+          }));
+        }
+      }
+      unsetComponentLoading == null ? void 0 : unsetComponentLoading(item.props.id);
+    }),
+    [config, globalPermissions, appState, cache3]
+  );
+  const resolveDataForRoot = (force = false) => {
+    resolveDataForItem(
+      // Shim the root data in by conforming to component data shape
+      {
+        type: "root",
+        props: __spreadProps(__spreadValues({}, appState.data.root.props), { id: "puck-root" })
+      },
+      force
+    );
+  };
+  const resolvePermissions = (0, import_react4.useCallback)(
+    (..._0) => __async(void 0, [..._0], function* ({ item, type, root } = {}, force = false) {
+      if (item) {
+        yield resolveDataForItem(item, force);
+      } else if (type) {
+        flattenData(appState.data).filter((item2) => item2.type === type).map((item2) => __async(void 0, null, function* () {
+          yield resolveDataForItem(item2, force);
+        }));
+      } else if (root) {
+        resolveDataForRoot(force);
+      } else {
+        resolveDataForRoot(force);
+        flattenData(appState.data).map((item2) => __async(void 0, null, function* () {
+          yield resolveDataForItem(item2, force);
+        }));
+      }
+    }),
+    [config, appState]
+  );
+  const refreshPermissions = (0, import_react4.useCallback)(
+    (params) => __async(void 0, null, function* () {
+      resolvePermissions(params, true);
+    }),
+    [config, appState]
+  );
+  (0, import_react4.useEffect)(() => {
+    resolvePermissions();
+  }, [config, appState.data]);
+  const getPermissions = (0, import_react4.useCallback)(
+    ({ item, type, root } = {}) => {
+      if (item) {
+        const componentConfig = config.components[item.type];
+        const initialPermissions = __spreadValues(__spreadValues({}, globalPermissions), componentConfig.permissions);
+        const resolvedForItem = resolvedPermissions[item.props.id];
+        return resolvedForItem ? __spreadValues(__spreadValues({}, globalPermissions), resolvedForItem) : initialPermissions;
+      } else if (type) {
+        const componentConfig = config.components[type];
+        return __spreadValues(__spreadValues({}, globalPermissions), componentConfig.permissions);
+      } else if (root) {
+        const rootConfig = config.root;
+        const initialPermissions = __spreadValues(__spreadValues({}, globalPermissions), rootConfig == null ? void 0 : rootConfig.permissions);
+        const resolvedForItem = resolvedPermissions["puck-root"];
+        return resolvedForItem ? __spreadValues(__spreadValues({}, globalPermissions), resolvedForItem) : initialPermissions;
+      }
+      return globalPermissions;
+    },
+    [config, resolvedPermissions]
+  );
+  return {
+    getPermissions,
+    refreshPermissions
+  };
+};
+
+// lib/use-resolved-data.ts
+init_react_import();
+var import_react5 = require("react");
+
+// lib/resolve-component-data.ts
+init_react_import();
+var cache = { lastChange: {} };
+var resolveAllComponentData = (content, config, onResolveStart, onResolveEnd) => __async(void 0, null, function* () {
+  return yield Promise.all(
+    content.map((item) => __async(void 0, null, function* () {
+      return yield resolveComponentData(
+        item,
+        config,
+        onResolveStart,
+        onResolveEnd
+      );
+    }))
+  );
+});
+var resolveComponentData = (item, config, onResolveStart, onResolveEnd) => __async(void 0, null, function* () {
+  const configForItem = config.components[item.type];
+  if (configForItem.resolveData) {
+    const { item: oldItem = null, resolved = {} } = cache.lastChange[item.props.id] || {};
+    if (item && item === oldItem) {
+      return resolved;
+    }
+    const changed = getChanged(item, oldItem);
+    if (onResolveStart) {
+      onResolveStart(item);
+    }
+    const { props: resolvedProps, readOnly = {} } = yield configForItem.resolveData(item, { changed, lastData: oldItem });
+    const { readOnly: existingReadOnly = {} } = item || {};
+    const newReadOnly = __spreadValues(__spreadValues({}, existingReadOnly), readOnly);
+    const resolvedItem = __spreadProps(__spreadValues({}, item), {
+      props: __spreadValues(__spreadValues({}, item.props), resolvedProps)
+    });
+    if (Object.keys(newReadOnly).length) {
+      resolvedItem.readOnly = newReadOnly;
+    }
+    cache.lastChange[item.props.id] = {
+      item,
+      resolved: resolvedItem
+    };
+    if (onResolveEnd) {
+      onResolveEnd(resolvedItem);
+    }
+    return resolvedItem;
+  }
+  return item;
+});
+
+// lib/apply-dynamic-props.ts
+init_react_import();
+var applyDynamicProps = (data, dynamicProps, rootData) => {
+  return __spreadProps(__spreadValues({}, data), {
+    root: __spreadValues(__spreadValues({}, data.root), rootData ? rootData : {}),
+    content: data.content.map((item) => {
+      return dynamicProps[item.props.id] ? __spreadValues(__spreadValues({}, item), dynamicProps[item.props.id]) : item;
+    }),
+    zones: Object.keys(data.zones || {}).reduce((acc, zoneKey) => {
+      return __spreadProps(__spreadValues({}, acc), {
+        [zoneKey]: data.zones[zoneKey].map((item) => {
+          return dynamicProps[item.props.id] ? __spreadValues(__spreadValues({}, item), dynamicProps[item.props.id]) : item;
+        })
+      });
+    }, {})
+  });
+};
+
+// lib/resolve-root-data.ts
+init_react_import();
+var cache2 = {};
+function resolveRootData(data, config) {
+  return __async(this, null, function* () {
+    var _a, _b, _c, _d, _e;
+    if (((_a = config.root) == null ? void 0 : _a.resolveData) && data.root.props) {
+      if (((_b = cache2.lastChange) == null ? void 0 : _b.original) === data.root) {
+        return cache2.lastChange.resolved;
+      }
+      const changed = getChanged(data.root, (_c = cache2.lastChange) == null ? void 0 : _c.original);
+      const rootWithProps = data.root;
+      const resolvedRoot = yield (_e = config.root) == null ? void 0 : _e.resolveData(rootWithProps, {
+        changed,
+        lastData: ((_d = cache2.lastChange) == null ? void 0 : _d.original) || {}
+      });
+      cache2.lastChange = {
+        original: data.root,
+        resolved: resolvedRoot
+      };
+      return __spreadProps(__spreadValues(__spreadValues({}, data.root), resolvedRoot), {
+        props: __spreadValues(__spreadValues({}, data.root.props), resolvedRoot.props)
+      });
+    }
+    return data.root;
+  });
+}
+
+// lib/use-resolved-data.ts
+var useResolvedData = (appState, config, dispatch, setComponentLoading, unsetComponentLoading, refreshPermissions) => {
+  const [{ resolverKey, newAppState }, setResolverState] = (0, import_react5.useState)({
+    resolverKey: 0,
+    newAppState: appState
+  });
+  const deferredSetStates = {};
+  const _setComponentLoading = (0, import_react5.useCallback)(
+    (id, loading, defer2 = 0) => {
+      if (deferredSetStates[id]) {
+        clearTimeout(deferredSetStates[id]);
+        delete deferredSetStates[id];
+      }
+      deferredSetStates[id] = setTimeout(() => {
+        if (loading) {
+          setComponentLoading(id);
+        } else {
+          unsetComponentLoading(id);
+        }
+        delete deferredSetStates[id];
+      }, defer2);
+    },
+    []
+  );
+  const runResolvers = () => __async(void 0, null, function* () {
+    const newData = newAppState.data;
+    const flatContent = flattenData(newData).filter(
+      (item) => {
+        var _a;
+        return !!((_a = config.components[item.type]) == null ? void 0 : _a.resolveData);
+      }
+    );
+    const applyIfChange = (dynamicDataMap, dynamicRoot) => {
+      const processed = applyDynamicProps(
+        appState.data,
+        dynamicDataMap,
+        dynamicRoot
+      );
+      const processedAppState = __spreadProps(__spreadValues({}, appState), { data: processed });
+      const containsChanges = JSON.stringify(appState) !== JSON.stringify(processedAppState);
+      if (containsChanges) {
+        dispatch({
+          type: "set",
+          state: (prev) => __spreadProps(__spreadValues({}, prev), {
+            data: applyDynamicProps(prev.data, dynamicDataMap, dynamicRoot),
+            ui: resolverKey > 0 ? __spreadValues(__spreadValues({}, prev.ui), newAppState.ui) : prev.ui
+          }),
+          recordHistory: resolverKey > 0
+        });
+      }
+    };
+    const promises = [];
+    promises.push(
+      (() => __async(void 0, null, function* () {
+        _setComponentLoading("puck-root", true, 50);
+        const dynamicRoot = yield resolveRootData(newData, config);
+        applyIfChange({}, dynamicRoot);
+        _setComponentLoading("puck-root", false);
+      }))()
+    );
+    flatContent.forEach((item) => {
+      promises.push(
+        (() => __async(void 0, null, function* () {
+          refreshPermissions({ item });
+          const dynamicData = yield resolveComponentData(
+            item,
+            config,
+            (item2) => {
+              _setComponentLoading(item2.props.id, true, 50);
+            },
+            (item2) => {
+              deferredSetStates[item2.props.id];
+              _setComponentLoading(item2.props.id, false);
+            }
+          );
+          const dynamicDataMap = { [item.props.id]: dynamicData };
+          applyIfChange(dynamicDataMap);
+        }))()
+      );
+    });
+    yield Promise.all(promises);
+  });
+  (0, import_react5.useEffect)(() => {
+    runResolvers();
+  }, [resolverKey]);
+  const resolveData = (0, import_react5.useCallback)((newAppState2 = appState) => {
+    setResolverState((curr) => ({
+      resolverKey: curr.resolverKey + 1,
+      newAppState: newAppState2
+    }));
+  }, []);
+  return {
+    resolveData
+  };
+};
+
+// components/Puck/context.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var defaultAppState = {
   data: { content: [], root: {} },
@@ -710,6 +1082,8 @@ var defaultContext = {
   dispatch: () => null,
   config: { components: {} },
   componentState: {},
+  setComponentState: () => {
+  },
   resolveData: () => {
   },
   plugins: [],
@@ -726,20 +1100,22 @@ var defaultContext = {
   setStatus: () => null,
   iframe: {},
   safariFallbackMode: false,
-  globalPermissions: {}
+  globalPermissions: {},
+  getPermissions: () => ({}),
+  refreshPermissions: () => null
 };
-var appContext = (0, import_react4.createContext)(defaultContext);
+var appContext = (0, import_react6.createContext)(defaultContext);
 var AppProvider = ({
   children,
   value
 }) => {
-  const [zoomConfig, setZoomConfig] = (0, import_react4.useState)(defaultContext.zoomConfig);
-  const [status, setStatus] = (0, import_react4.useState)("LOADING");
-  (0, import_react4.useEffect)(() => {
+  const [zoomConfig, setZoomConfig] = (0, import_react6.useState)(defaultContext.zoomConfig);
+  const [status, setStatus] = (0, import_react6.useState)("LOADING");
+  (0, import_react6.useEffect)(() => {
     setStatus("MOUNTED");
   }, []);
-  const [safariFallbackMode, setSafariFallbackMode] = (0, import_react4.useState)(false);
-  (0, import_react4.useEffect)(() => {
+  const [safariFallbackMode, setSafariFallbackMode] = (0, import_react6.useState)(false);
+  (0, import_react6.useEffect)(() => {
     var _a, _b, _c;
     const ua = new import_ua_parser_js.UAParser(navigator.userAgent);
     const { browser } = ua.getResult();
@@ -756,26 +1132,67 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
       setSafariFallbackMode(true);
     }
   }, []);
+  const selectedItem = value.state.ui.itemSelector ? getItem(value.state.ui.itemSelector, value.state.data) : void 0;
+  const [componentState, setComponentState] = (0, import_react6.useState)({});
+  const setComponentLoading = (id) => {
+    setComponentState((prev) => {
+      var _a;
+      return __spreadProps(__spreadValues({}, prev), {
+        [id]: __spreadProps(__spreadValues({}, prev[id]), {
+          loadingCount: (((_a = prev[id]) == null ? void 0 : _a.loadingCount) || 0) + 1
+        })
+      });
+    });
+  };
+  const unsetComponentLoading = (id) => {
+    setComponentState((prev) => {
+      var _a;
+      return __spreadProps(__spreadValues({}, prev), {
+        [id]: __spreadProps(__spreadValues({}, prev[id]), {
+          loadingCount: Math.max((((_a = prev[id]) == null ? void 0 : _a.loadingCount) || 0) - 1, 0)
+        })
+      });
+    });
+  };
+  const { getPermissions, refreshPermissions } = useResolvedPermissions(
+    value.config,
+    value.state,
+    value.globalPermissions || {},
+    setComponentLoading,
+    unsetComponentLoading
+  );
+  const { resolveData } = useResolvedData(
+    value.state,
+    value.config,
+    value.dispatch,
+    setComponentLoading,
+    unsetComponentLoading,
+    refreshPermissions
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     appContext.Provider,
     {
       value: __spreadProps(__spreadValues({}, value), {
+        selectedItem,
         zoomConfig,
         setZoomConfig,
         status,
         setStatus,
-        safariFallbackMode
+        safariFallbackMode,
+        getPermissions,
+        refreshPermissions,
+        componentState,
+        setComponentState,
+        resolveData
       }),
       children
     }
   );
 };
 function useAppContext() {
-  const mainContext = (0, import_react4.useContext)(appContext);
-  const selectedItem = mainContext.state.ui.itemSelector ? getItem(mainContext.state.ui.itemSelector, mainContext.state.data) : void 0;
+  const mainContext = (0, import_react6.useContext)(appContext);
   return __spreadProps(__spreadValues({}, mainContext), {
     // Helpers
-    selectedItem,
     setUi: (ui, recordHistory) => {
       return mainContext.dispatch({
         type: "setUi",
@@ -877,7 +1294,7 @@ var Draggable = ({
 };
 
 // components/AutoField/fields/ArrayField/index.tsx
-var import_react5 = require("react");
+var import_react7 = require("react");
 
 // components/DragIcon/index.tsx
 init_react_import();
@@ -916,7 +1333,7 @@ var ArrayField = ({
   id,
   Label = (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", __spreadValues({}, props))
 }) => {
-  const { state, setUi, selectedItem } = useAppContext();
+  const { state, setUi, selectedItem, getPermissions } = useAppContext();
   const readOnlyFields = (selectedItem == null ? void 0 : selectedItem.readOnly) || {};
   const value = _value;
   const arrayState = state.ui.arrayState[id] || {
@@ -928,11 +1345,11 @@ var ArrayField = ({
     }),
     openId: ""
   };
-  const [localState, setLocalState] = (0, import_react5.useState)({ arrayState, value });
-  (0, import_react5.useEffect)(() => {
+  const [localState, setLocalState] = (0, import_react7.useState)({ arrayState, value });
+  (0, import_react7.useEffect)(() => {
     setLocalState({ arrayState, value });
   }, [value, state.ui.arrayState[id]]);
-  const mapArrayStateToUi = (0, import_react5.useCallback)(
+  const mapArrayStateToUi = (0, import_react7.useCallback)(
     (partialArrayState) => {
       return {
         arrayState: __spreadProps(__spreadValues({}, state.ui.arrayState), {
@@ -942,13 +1359,13 @@ var ArrayField = ({
     },
     [arrayState]
   );
-  const getHighestIndex = (0, import_react5.useCallback)(() => {
+  const getHighestIndex = (0, import_react7.useCallback)(() => {
     return arrayState.items.reduce(
       (acc, item) => item._originalIndex > acc ? item._originalIndex : acc,
       -1
     );
   }, [arrayState]);
-  const regenerateArrayState = (0, import_react5.useCallback)(
+  const regenerateArrayState = (0, import_react7.useCallback)(
     (value2) => {
       let highestIndex = getHighestIndex();
       const newItems = Array.from(value2 || []).map((item, idx) => {
@@ -967,12 +1384,13 @@ var ArrayField = ({
     },
     [arrayState]
   );
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (arrayState.items.length > 0) {
       setUi(mapArrayStateToUi(arrayState));
     }
   }, []);
-  const [hovering, setHovering] = (0, import_react5.useState)(false);
+  const [hovering, setHovering] = (0, import_react7.useState)(false);
+  const forceReadOnly = getPermissions({ item: selectedItem }).edit === false;
   if (field.type !== "array" || !field.arrayFields) {
     return null;
   }
@@ -1103,13 +1521,14 @@ var ArrayField = ({
                               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__ */ (0, import_jsx_runtime9.jsx)(
                                 AutoFieldPrivate,
                                 {
                                   name: subFieldName,
                                   label: subField.label || fieldName,
                                   id: `${_arrayId}_${fieldName}`,
-                                  readOnly: typeof readOnlyFields[subFieldName] !== "undefined" ? readOnlyFields[subFieldName] : readOnlyFields[wildcardFieldName],
+                                  readOnly: subReadOnly,
                                   field: subField,
                                   value: data[fieldName],
                                   onChange: (val, ui) => {
@@ -1209,19 +1628,19 @@ var DefaultField = ({
 
 // components/AutoField/fields/ExternalField/index.tsx
 init_react_import();
-var import_react9 = require("react");
+var import_react11 = require("react");
 
 // components/ExternalInput/index.tsx
 init_react_import();
-var import_react8 = require("react");
+var import_react10 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css#css-module
 init_react_import();
-var styles_module_default6 = { "ExternalInput-actions": "_ExternalInput-actions_19obq_1", "ExternalInput-button": "_ExternalInput-button_19obq_5", "ExternalInput--dataSelected": "_ExternalInput--dataSelected_19obq_25", "ExternalInput-detachButton": "_ExternalInput-detachButton_19obq_32", "ExternalInputModal": "_ExternalInputModal_19obq_74", "ExternalInputModal-grid": "_ExternalInputModal-grid_19obq_84", "ExternalInputModal--filtersToggled": "_ExternalInputModal--filtersToggled_19obq_95", "ExternalInputModal-filters": "_ExternalInputModal-filters_19obq_100", "ExternalInputModal-masthead": "_ExternalInputModal-masthead_19obq_119", "ExternalInputModal-tableWrapper": "_ExternalInputModal-tableWrapper_19obq_128", "ExternalInputModal-table": "_ExternalInputModal-table_19obq_128", "ExternalInputModal-thead": "_ExternalInputModal-thead_19obq_144", "ExternalInputModal-th": "_ExternalInputModal-th_19obq_144", "ExternalInputModal-td": "_ExternalInputModal-td_19obq_159", "ExternalInputModal-tr": "_ExternalInputModal-tr_19obq_164", "ExternalInputModal-tbody": "_ExternalInputModal-tbody_19obq_171", "ExternalInputModal--hasData": "_ExternalInputModal--hasData_19obq_197", "ExternalInputModal-loadingBanner": "_ExternalInputModal-loadingBanner_19obq_201", "ExternalInputModal--isLoading": "_ExternalInputModal--isLoading_19obq_218", "ExternalInputModal-searchForm": "_ExternalInputModal-searchForm_19obq_222", "ExternalInputModal-search": "_ExternalInputModal-search_19obq_222", "ExternalInputModal-searchIcon": "_ExternalInputModal-searchIcon_19obq_259", "ExternalInputModal-searchIconText": "_ExternalInputModal-searchIconText_19obq_284", "ExternalInputModal-searchInput": "_ExternalInputModal-searchInput_19obq_294", "ExternalInputModal-searchActions": "_ExternalInputModal-searchActions_19obq_308", "ExternalInputModal-searchActionIcon": "_ExternalInputModal-searchActionIcon_19obq_321", "ExternalInputModal-footer": "_ExternalInputModal-footer_19obq_325" };
+var styles_module_default6 = { "ExternalInput-actions": "_ExternalInput-actions_wprq3_1", "ExternalInput-button": "_ExternalInput-button_wprq3_5", "ExternalInput--dataSelected": "_ExternalInput--dataSelected_wprq3_24", "ExternalInput--readOnly": "_ExternalInput--readOnly_wprq3_31", "ExternalInput-detachButton": "_ExternalInput-detachButton_wprq3_35", "ExternalInput": "_ExternalInput_wprq3_1", "ExternalInputModal": "_ExternalInputModal_wprq3_79", "ExternalInputModal-grid": "_ExternalInputModal-grid_wprq3_89", "ExternalInputModal--filtersToggled": "_ExternalInputModal--filtersToggled_wprq3_100", "ExternalInputModal-filters": "_ExternalInputModal-filters_wprq3_105", "ExternalInputModal-masthead": "_ExternalInputModal-masthead_wprq3_124", "ExternalInputModal-tableWrapper": "_ExternalInputModal-tableWrapper_wprq3_133", "ExternalInputModal-table": "_ExternalInputModal-table_wprq3_133", "ExternalInputModal-thead": "_ExternalInputModal-thead_wprq3_149", "ExternalInputModal-th": "_ExternalInputModal-th_wprq3_149", "ExternalInputModal-td": "_ExternalInputModal-td_wprq3_164", "ExternalInputModal-tr": "_ExternalInputModal-tr_wprq3_169", "ExternalInputModal-tbody": "_ExternalInputModal-tbody_wprq3_176", "ExternalInputModal--hasData": "_ExternalInputModal--hasData_wprq3_202", "ExternalInputModal-loadingBanner": "_ExternalInputModal-loadingBanner_wprq3_206", "ExternalInputModal--isLoading": "_ExternalInputModal--isLoading_wprq3_223", "ExternalInputModal-searchForm": "_ExternalInputModal-searchForm_wprq3_227", "ExternalInputModal-search": "_ExternalInputModal-search_wprq3_227", "ExternalInputModal-searchIcon": "_ExternalInputModal-searchIcon_wprq3_264", "ExternalInputModal-searchIconText": "_ExternalInputModal-searchIconText_wprq3_289", "ExternalInputModal-searchInput": "_ExternalInputModal-searchInput_wprq3_299", "ExternalInputModal-searchActions": "_ExternalInputModal-searchActions_wprq3_313", "ExternalInputModal-searchActionIcon": "_ExternalInputModal-searchActionIcon_wprq3_326", "ExternalInputModal-footer": "_ExternalInputModal-footer_wprq3_330" };
 
 // components/Modal/index.tsx
 init_react_import();
-var import_react6 = require("react");
+var import_react8 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Modal/styles.module.css#css-module
 init_react_import();
@@ -1236,8 +1655,8 @@ var Modal = ({
   onClose,
   isOpen
 }) => {
-  const [rootEl, setRootEl] = (0, import_react6.useState)(null);
-  (0, import_react6.useEffect)(() => {
+  const [rootEl, setRootEl] = (0, import_react8.useState)(null);
+  (0, import_react8.useEffect)(() => {
     setRootEl(document.getElementById("puck-portal-root"));
   }, []);
   if (!rootEl) {
@@ -1284,7 +1703,7 @@ init_react_import();
 
 // components/Button/Button.tsx
 init_react_import();
-var import_react7 = require("react");
+var import_react9 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css#css-module
 init_react_import();
@@ -1307,8 +1726,8 @@ var Button = ({
   size = "medium",
   loading: loadingProp = false
 }) => {
-  const [loading, setLoading] = (0, import_react7.useState)(loadingProp);
-  (0, import_react7.useEffect)(() => setLoading(loadingProp), [loadingProp]);
+  const [loading, setLoading] = (0, import_react9.useState)(loadingProp);
+  (0, import_react9.useEffect)(() => setLoading(loadingProp), [loadingProp]);
   const ElementType = href ? "a" : type ? "button" : "span";
   const el = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     ElementType,
@@ -1353,23 +1772,24 @@ var ExternalInput = ({
   onChange,
   value = null,
   name,
-  id
+  id,
+  readOnly
 }) => {
   const {
     mapProp = (val) => val,
     mapRow = (val) => val,
     filterFields
   } = field || {};
-  const [data, setData] = (0, import_react8.useState)([]);
-  const [isOpen, setOpen] = (0, import_react8.useState)(false);
-  const [isLoading, setIsLoading] = (0, import_react8.useState)(true);
+  const [data, setData] = (0, import_react10.useState)([]);
+  const [isOpen, setOpen] = (0, import_react10.useState)(false);
+  const [isLoading, setIsLoading] = (0, import_react10.useState)(true);
   const hasFilterFields = !!filterFields;
-  const [filters, setFilters] = (0, import_react8.useState)(field.initialFilters || {});
-  const [filtersToggled, setFiltersToggled] = (0, import_react8.useState)(hasFilterFields);
-  const mappedData = (0, import_react8.useMemo)(() => {
+  const [filters, setFilters] = (0, import_react10.useState)(field.initialFilters || {});
+  const [filtersToggled, setFiltersToggled] = (0, import_react10.useState)(hasFilterFields);
+  const mappedData = (0, import_react10.useMemo)(() => {
     return data.map(mapRow);
   }, [data]);
-  const keys = (0, import_react8.useMemo)(() => {
+  const keys = (0, import_react10.useMemo)(() => {
     const validKeys = /* @__PURE__ */ new Set();
     for (const item of mappedData) {
       for (const key of Object.keys(item)) {
@@ -1380,8 +1800,8 @@ var ExternalInput = ({
     }
     return Array.from(validKeys);
   }, [mappedData]);
-  const [searchQuery, setSearchQuery] = (0, import_react8.useState)(field.initialQuery || "");
-  const search = (0, import_react8.useCallback)(
+  const [searchQuery, setSearchQuery] = (0, import_react10.useState)(field.initialQuery || "");
+  const search = (0, import_react10.useCallback)(
     (query, filters2) => __async(void 0, null, function* () {
       setIsLoading(true);
       const cacheKey = `${id}-${query}-${JSON.stringify(filters2)}`;
@@ -1394,7 +1814,7 @@ var ExternalInput = ({
     }),
     [id, field]
   );
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     search(searchQuery, filters);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
@@ -1402,7 +1822,8 @@ var ExternalInput = ({
     {
       className: getClassName10({
         dataSelected: !!value,
-        modalVisible: isOpen
+        modalVisible: isOpen,
+        readOnly
       }),
       id,
       children: [
@@ -1413,6 +1834,7 @@ var ExternalInput = ({
               type: "button",
               onClick: () => setOpen(true),
               className: getClassName10("button"),
+              disabled: readOnly,
               children: value ? field.getItemSummary ? field.getItemSummary(value) : "External item" : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Link, { size: "16" }),
                 /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: field.placeholder })
@@ -1422,10 +1844,12 @@ var ExternalInput = ({
           value && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "button",
             {
+              type: "button",
               className: getClassName10("detachButton"),
               onClick: () => {
                 onChange(null);
               },
+              disabled: readOnly,
               children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Unlock, { size: 16 })
             }
           )
@@ -1551,12 +1975,13 @@ var ExternalField = ({
   name,
   label,
   Label,
-  id
+  id,
+  readOnly
 }) => {
   var _a, _b, _c;
   const validField = field;
   const deprecatedField = field;
-  (0, import_react9.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (deprecatedField.adaptor) {
       console.error(
         "Warning: The `adaptor` API is deprecated. Please use updated APIs on the `external` field instead. This will be a breaking change in a future release."
@@ -1583,7 +2008,8 @@ var ExternalField = ({
       }),
       onChange,
       value,
-      id
+      id,
+      readOnly
     }
   ) });
 };
@@ -1764,13 +2190,14 @@ var ObjectField = ({
         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__ */ (0, import_jsx_runtime19.jsx)(
           AutoFieldPrivate,
           {
             name: subFieldName,
             label: subField.label || fieldName,
             id: `${id}_${fieldName}`,
-            readOnly: typeof readOnlyFields[subFieldName] !== "undefined" ? readOnlyFields[subFieldName] : readOnlyFields[wildcardFieldName],
+            readOnly: subReadOnly,
             field: subField,
             value: data[fieldName],
             onChange: (val, ui) => {
@@ -1791,7 +2218,7 @@ var ObjectField = ({
 
 // lib/use-safe-id.ts
 init_react_import();
-var import_react10 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 
 // lib/generate-id.ts
 init_react_import();
@@ -1800,10 +2227,10 @@ var generateId = (type) => type ? `${type}-${(0, import_uuid.v4)()}` : (0, impor
 
 // lib/use-safe-id.ts
 var useSafeId = () => {
-  if (typeof import_react10.default.useId !== "undefined") {
-    return import_react10.default.useId();
+  if (typeof import_react12.default.useId !== "undefined") {
+    return import_react12.default.useId();
   }
-  const [id] = (0, import_react10.useState)(generateId());
+  const [id] = (0, import_react12.useState)(generateId());
   return id;
 };
 
@@ -1836,7 +2263,7 @@ var FieldLabelInternal2 = ({
   readOnly
 }) => {
   const { overrides } = useAppContext();
-  const Wrapper = (0, import_react11.useMemo)(
+  const Wrapper = (0, import_react13.useMemo)(
     () => overrides.fieldLabel || FieldLabel,
     [overrides]
   );
@@ -1900,7 +2327,7 @@ function AutoFieldInternal(props) {
 }
 function AutoFieldPrivate(props) {
   const { value, onChange } = props;
-  const [localValue, setLocalValue] = (0, import_react11.useState)(value);
+  const [localValue, setLocalValue] = (0, import_react13.useState)(value);
   const onChangeDb = (0, import_use_debounce.useDebouncedCallback)(
     (val, ui) => {
       onChange(val, ui);
@@ -1908,11 +2335,11 @@ function AutoFieldPrivate(props) {
     50,
     { leading: true }
   );
-  const onChangeLocal = (0, import_react11.useCallback)((val, ui) => {
+  const onChangeLocal = (0, import_react13.useCallback)((val, ui) => {
     setLocalValue(val);
     onChangeDb(val, ui);
   }, []);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     setLocalValue(value);
   }, [value]);
   const localProps = {
@@ -1931,14 +2358,14 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css#css-module
 init_react_import();
-var styles_module_default10 = { "Drawer": "_Drawer_4yfqn_1", "DrawerItem--disabled": "_DrawerItem--disabled_4yfqn_5", "DrawerItem-default": "_DrawerItem-default_4yfqn_11", "DrawerItem-draggableWrapper": "_DrawerItem-draggableWrapper_4yfqn_11", "DrawerItem": "_DrawerItem_4yfqn_5", "DrawerItem-draggable": "_DrawerItem-draggable_4yfqn_11", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_4yfqn_36", "DrawerItem-name": "_DrawerItem-name_4yfqn_54" };
+var styles_module_default10 = { "Drawer": "_Drawer_1oa7v_1", "DrawerItem--disabled": "_DrawerItem--disabled_1oa7v_5", "DrawerItem-draggable": "_DrawerItem-draggable_1oa7v_5", "DrawerItem-default": "_DrawerItem-default_1oa7v_11", "DrawerItem-draggableWrapper": "_DrawerItem-draggableWrapper_1oa7v_11", "DrawerItem": "_DrawerItem_1oa7v_5", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_1oa7v_36", "DrawerItem-name": "_DrawerItem-name_1oa7v_54" };
 
 // components/Drawer/index.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 var import_jsx_runtime21 = require("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 = (0, import_react12.createContext)({
+var drawerContext = (0, import_react14.createContext)({
   droppableId: ""
 });
 var DrawerDraggable = ({
@@ -1969,9 +2396,9 @@ var DrawerItem = ({
   index,
   isDragDisabled
 }) => {
-  const ctx = (0, import_react12.useContext)(drawerContext);
+  const ctx = (0, import_react14.useContext)(drawerContext);
   const resolvedId = `${ctx.droppableId}::${id || name}`;
-  const CustomInner = (0, import_react12.useMemo)(
+  const CustomInner = (0, import_react14.useMemo)(
     () => children || (({ children: children2, name: name2 }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: getClassNameItem2("default"), children: children2 })),
     [children]
   );
@@ -2012,11 +2439,11 @@ Drawer.Item = DrawerItem;
 
 // components/DropZone/index.tsx
 init_react_import();
-var import_react16 = require("react");
+var import_react18 = require("react");
 
 // components/DraggableComponent/index.tsx
 init_react_import();
-var import_react14 = require("react");
+var import_react16 = require("react");
 var import_dnd4 = require("@measured/dnd");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
@@ -2025,10 +2452,10 @@ var styles_module_default11 = { "DraggableComponent": "_DraggableComponent_1bhad
 
 // lib/use-modifier-held.ts
 init_react_import();
-var import_react13 = require("react");
+var import_react15 = require("react");
 var useModifierHeld = (modifier) => {
-  const [modifierHeld, setModifierHeld] = (0, import_react13.useState)(false);
-  (0, import_react13.useEffect)(() => {
+  const [modifierHeld, setModifierHeld] = (0, import_react15.useState)(false);
+  (0, import_react15.useEffect)(() => {
     function downHandler({ key }) {
       if (key === modifier) {
         setModifierHeld(true);
@@ -2066,90 +2493,6 @@ init_react_import();
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var DefaultOverride = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children });
 
-// lib/get-permissions.ts
-init_react_import();
-
-// lib/get-changed.ts
-init_react_import();
-var getChanged = (newItem, oldItem) => {
-  return newItem ? Object.keys(newItem.props || {}).reduce((acc, item) => {
-    const newItemProps = (newItem == null ? void 0 : newItem.props) || {};
-    const oldItemProps = (oldItem == null ? void 0 : oldItem.props) || {};
-    return __spreadProps(__spreadValues({}, acc), {
-      [item]: oldItemProps[item] !== newItemProps[item]
-    });
-  }, {}) : {};
-};
-
-// lib/resolve-permissions.ts
-init_react_import();
-var resolvePermissions = ({
-  selectedItem,
-  config,
-  changed,
-  lastPermissions,
-  initialPermissions,
-  appState
-}) => {
-  const componentConfig = selectedItem ? config.components[selectedItem.type] : null;
-  if (selectedItem && (componentConfig == null ? void 0 : componentConfig.resolvePermissions)) {
-    return componentConfig.resolvePermissions(selectedItem, {
-      changed,
-      lastPermissions,
-      initialPermissions,
-      appState
-    });
-  }
-  return {};
-};
-
-// lib/get-permissions.ts
-var cache = { lastPermissions: {}, lastSelected: {} };
-var getPermissions = ({
-  selectedItem,
-  type,
-  globalPermissions,
-  config,
-  appState
-}) => {
-  const componentType = type || selectedItem && selectedItem.type || "";
-  const componentId = selectedItem && selectedItem.props.id || "";
-  let componentPermissions = getInitialPermissions({
-    componentType,
-    config,
-    globalPermissions
-  });
-  const changed = getChanged(selectedItem, cache.lastSelected);
-  if (Object.values(changed).some((el) => el === true)) {
-    const resolvedPermissions = resolvePermissions({
-      selectedItem,
-      config,
-      changed,
-      lastPermissions: cache.lastPermissions[componentId] || componentPermissions,
-      initialPermissions: componentPermissions,
-      appState
-    });
-    if (resolvedPermissions !== void 0) {
-      componentPermissions = __spreadValues(__spreadValues({}, componentPermissions), resolvedPermissions);
-    }
-    cache.lastSelected = selectedItem;
-    cache.lastPermissions[componentId] = componentPermissions;
-    return componentPermissions;
-  }
-  if (Object.keys(componentId && cache.lastPermissions[componentId]).length !== 0) {
-    componentPermissions = cache.lastPermissions[componentId];
-  }
-  return componentPermissions;
-};
-var getInitialPermissions = ({
-  componentType,
-  globalPermissions,
-  config
-}) => {
-  var _a;
-  return __spreadValues(__spreadValues({}, globalPermissions), (_a = config.components[componentType]) == null ? void 0 : _a.permissions);
-};
-
 // components/DraggableComponent/index.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var getClassName17 = get_class_name_factory_default("DraggableComponent", styles_module_default11);
@@ -2160,7 +2503,7 @@ var actionsRight = space;
 var DefaultActionBar = ({
   label,
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ActionBar, { label, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DefaultOverride, { children }) });
+}) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ActionBar, { label, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ActionBar.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DefaultOverride, { children }) }) });
 var DraggableComponent = ({
   children,
   id,
@@ -2183,34 +2526,22 @@ var DraggableComponent = ({
   indicativeHover = false,
   style
 }) => {
-  const {
-    zoomConfig,
-    status,
-    overrides,
-    plugins,
-    selectedItem,
-    config,
-    globalPermissions,
-    state
-  } = useAppContext();
+  const { zoomConfig, status, overrides, selectedItem, getPermissions } = useAppContext();
   const isModifierHeld = useModifierHeld("Alt");
   const El = status !== "LOADING" ? import_dnd4.Draggable : DefaultDraggable;
-  (0, import_react14.useEffect)(onMount, []);
-  const [disableSecondaryAnimation, setDisableSecondaryAnimation] = (0, import_react14.useState)(false);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(onMount, []);
+  const [disableSecondaryAnimation, setDisableSecondaryAnimation] = (0, import_react16.useState)(false);
+  (0, import_react16.useEffect)(() => {
     if (isIos()) {
       setDisableSecondaryAnimation(true);
     }
   }, []);
-  const CustomActionBar = (0, import_react14.useMemo)(
+  const CustomActionBar = (0, import_react16.useMemo)(
     () => overrides.actionBar || DefaultActionBar,
     [overrides.actionBar]
   );
-  const permissions = selectedItem && getPermissions({
-    selectedItem,
-    globalPermissions: globalPermissions || {},
-    config,
-    appState: state
+  const permissions = getPermissions({
+    item: selectedItem
   });
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     El,
@@ -2233,7 +2564,7 @@ var DraggableComponent = ({
             indicativeHover
           }),
           style: __spreadProps(__spreadValues(__spreadValues({}, style), provided.draggableProps.style), {
-            cursor: isModifierHeld || isDragDisabled ? "initial" : "grab"
+            cursor: isModifierHeld || isDragDisabled ? "pointer" : "grab"
           }),
           onMouseOver,
           onMouseOut,
@@ -2260,8 +2591,8 @@ var DraggableComponent = ({
                       right: actionsRight / zoomConfig.zoom
                     },
                     children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(CustomActionBar, { label, children: [
-                      permissions && permissions.duplicate && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Copy, { size: 16 }) }),
-                      permissions && permissions.delete && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Trash, { size: 16 }) })
+                      permissions.duplicate && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Copy, { size: 16 }) }),
+                      permissions.delete && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Trash, { size: 16 }) })
                     ] })
                   }
                 )
@@ -2283,7 +2614,7 @@ var styles_module_default12 = { "DropZone": "_DropZone_djoti_1", "DropZone-conte
 
 // components/DropZone/context.tsx
 init_react_import();
-var import_react15 = require("react");
+var import_react17 = require("react");
 var import_use_debounce2 = require("use-debounce");
 
 // lib/get-zone-id.ts
@@ -2300,29 +2631,29 @@ var getZoneId = (zoneCompound) => {
 
 // components/DropZone/context.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var dropZoneContext = (0, import_react15.createContext)(null);
+var dropZoneContext = (0, import_react17.createContext)(null);
 var DropZoneProvider = ({
   children,
   value
 }) => {
-  const [hoveringArea, setHoveringArea] = (0, import_react15.useState)(null);
-  const [hoveringZone, setHoveringZone] = (0, import_react15.useState)(
+  const [hoveringArea, setHoveringArea] = (0, import_react17.useState)(null);
+  const [hoveringZone, setHoveringZone] = (0, import_react17.useState)(
     rootDroppableId
   );
-  const [hoveringComponent, setHoveringComponent] = (0, import_react15.useState)();
+  const [hoveringComponent, setHoveringComponent] = (0, import_react17.useState)();
   const [hoveringAreaDb] = (0, import_use_debounce2.useDebounce)(hoveringArea, 75, { leading: false });
-  const [areasWithZones, setAreasWithZones] = (0, import_react15.useState)(
+  const [areasWithZones, setAreasWithZones] = (0, import_react17.useState)(
     {}
   );
-  const [activeZones, setActiveZones] = (0, import_react15.useState)({});
+  const [activeZones, setActiveZones] = (0, import_react17.useState)({});
   const { dispatch = null } = value ? value : {};
-  const registerZoneArea = (0, import_react15.useCallback)(
+  const registerZoneArea = (0, import_react17.useCallback)(
     (area) => {
       setAreasWithZones((latest) => __spreadProps(__spreadValues({}, latest), { [area]: true }));
     },
     [setAreasWithZones]
   );
-  const registerZone = (0, import_react15.useCallback)(
+  const registerZone = (0, import_react17.useCallback)(
     (zoneCompound) => {
       if (!dispatch) {
         return;
@@ -2335,7 +2666,7 @@ var DropZoneProvider = ({
     },
     [setActiveZones, dispatch]
   );
-  const unregisterZone = (0, import_react15.useCallback)(
+  const unregisterZone = (0, import_react17.useCallback)(
     (zoneCompound) => {
       if (!dispatch) {
         return;
@@ -2350,8 +2681,8 @@ var DropZoneProvider = ({
     },
     [setActiveZones, dispatch]
   );
-  const [pathData, setPathData] = (0, import_react15.useState)();
-  const registerPath = (0, import_react15.useCallback)(
+  const [pathData, setPathData] = (0, import_react17.useState)();
+  const registerPath = (0, import_react17.useCallback)(
     (selector) => {
       if (!(value == null ? void 0 : value.data)) {
         return;
@@ -2376,7 +2707,7 @@ var DropZoneProvider = ({
     },
     [value, setPathData]
   );
-  const [zoneWillDrag, setZoneWillDrag] = (0, import_react15.useState)("");
+  const [zoneWillDrag, setZoneWillDrag] = (0, import_react17.useState)("");
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children: value && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     dropZoneContext.Provider,
     {
@@ -2408,7 +2739,7 @@ var getClassName18 = get_class_name_factory_default("DropZone", styles_module_de
 function DropZoneEdit({ zone, allow, disallow, style }) {
   var _a;
   const appContext2 = useAppContext();
-  const ctx = (0, import_react16.useContext)(dropZoneContext);
+  const ctx = (0, import_react18.useContext)(dropZoneContext);
   const {
     // These all need setting via context
     data,
@@ -2427,12 +2758,12 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
   } = ctx || {};
   let content = data.content || [];
   let zoneCompound = rootDroppableId;
-  (0, import_react16.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (areaId && registerZoneArea) {
       registerZoneArea(areaId);
     }
   }, [areaId]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (ctx == null ? void 0 : ctx.registerZone) {
       ctx == null ? void 0 : ctx.registerZone(zoneCompound);
     }
@@ -2559,14 +2890,11 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
                     ] });
                     const componentConfig = config.components[item.type];
                     const label = (_b = componentConfig == null ? void 0 : componentConfig["label"]) != null ? _b : item.type.toString();
-                    const canDrag = getPermissions({
-                      selectedItem: getItem(
+                    const canDrag = appContext2.getPermissions({
+                      item: getItem(
                         { index: i, zone: zoneCompound },
                         appContext2.state.data
-                      ),
-                      config: appContext2.config,
-                      globalPermissions: appContext2.globalPermissions || {},
-                      appState: appContext2.state
+                      )
                     }).drag;
                     return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
                       "div",
@@ -2591,7 +2919,7 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
                                   forceHover: hoveringComponent === componentId && !userIsDragging,
                                   isDragDisabled: !canDrag,
                                   indicativeHover: userIsDragging && containsZone && hoveringArea === componentId,
-                                  isLoading: (_c = appContext2.componentState[componentId]) == null ? void 0 : _c.loading,
+                                  isLoading: ((_c = appContext2.componentState[componentId]) == null ? void 0 : _c.loadingCount) > 0,
                                   onMount: () => {
                                     ctx.registerPath({
                                       index: i,
@@ -2691,7 +3019,7 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
   );
 }
 function DropZoneRender({ zone }) {
-  const ctx = (0, import_react16.useContext)(dropZoneContext);
+  const ctx = (0, import_react18.useContext)(dropZoneContext);
   const { data, areaId = "root", config } = ctx || {};
   let zoneCompound = rootDroppableId;
   let content = (data == null ? void 0 : data.content) || [];
@@ -2723,7 +3051,7 @@ function DropZoneRender({ zone }) {
   }) });
 }
 function DropZone(props) {
-  const ctx = (0, import_react16.useContext)(dropZoneContext);
+  const ctx = (0, import_react18.useContext)(dropZoneContext);
   if ((ctx == null ? void 0 : ctx.mode) === "edit") {
     return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropZoneEdit, __spreadValues({}, props));
   }
@@ -2732,11 +3060,11 @@ function DropZone(props) {
 
 // components/Puck/index.tsx
 init_react_import();
-var import_react31 = require("react");
+var import_react32 = require("react");
 
 // lib/use-placeholder-style.ts
 init_react_import();
-var import_react17 = require("react");
+var import_react19 = require("react");
 
 // lib/get-frame.ts
 init_react_import();
@@ -2751,7 +3079,7 @@ var getFrame = () => {
 // lib/use-placeholder-style.ts
 var usePlaceholderStyle = () => {
   const queryAttr = "data-rfd-drag-handle-draggable-id";
-  const [placeholderStyle, setPlaceholderStyle] = (0, import_react17.useState)();
+  const [placeholderStyle, setPlaceholderStyle] = (0, import_react19.useState)();
   const onDragStartOrUpdate = (draggedItem) => {
     var _a;
     const draggableId = draggedItem.draggableId;
@@ -2804,7 +3132,7 @@ var styles_module_default13 = { "SidebarSection": "_SidebarSection_125qe_1", "Si
 
 // lib/use-breadcrumbs.ts
 init_react_import();
-var import_react18 = require("react");
+var import_react20 = require("react");
 var convertPathDataToBreadcrumbs = (selectedItem, pathData, data) => {
   const id = selectedItem ? selectedItem == null ? void 0 : selectedItem.props.id : "";
   const currentPathData = pathData && id && pathData[id] ? __spreadValues({}, pathData[id]) : { label: "Page", path: [] };
@@ -2854,8 +3182,8 @@ var useBreadcrumbs = (renderCount) => {
     state: { data },
     selectedItem
   } = useAppContext();
-  const dzContext = (0, import_react18.useContext)(dropZoneContext);
-  return (0, import_react18.useMemo)(() => {
+  const dzContext = (0, import_react20.useContext)(dropZoneContext);
+  return (0, import_react20.useMemo)(() => {
     const breadcrumbs = convertPathDataToBreadcrumbs(
       selectedItem,
       dzContext == null ? void 0 : dzContext.pathData,
@@ -2893,6 +3221,7 @@ var SidebarSection = ({
             /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               "button",
               {
+                type: "button",
                 className: getClassName19("breadcrumbLabel"),
                 onClick: () => setUi({ itemSelector: breadcrumb.selector }),
                 children: breadcrumb.label
@@ -2933,7 +3262,7 @@ var remove = (list, index) => {
 
 // lib/reduce-related-zones.ts
 init_react_import();
-var reduceRelatedZones = (item, data, fn) => {
+function reduceRelatedZones(item, data, fn) {
   return __spreadProps(__spreadValues({}, data), {
     zones: Object.keys(data.zones || {}).reduce(
       (acc, key) => {
@@ -2947,7 +3276,7 @@ var reduceRelatedZones = (item, data, fn) => {
       {}
     )
   });
-};
+}
 var findRelatedByZoneId = (zoneId, data) => {
   const [zoneParentId] = getZoneId(zoneId);
   return (data.zones[zoneId] || []).reduce(
@@ -2984,7 +3313,7 @@ var removeRelatedZones = (item, data) => {
   });
   return newData;
 };
-var duplicateRelatedZones = (item, data, newId) => {
+function duplicateRelatedZones(item, data, newId) {
   return reduceRelatedZones(item, data, (acc, key, zone) => {
     const dupedZone = zone.map((zoneItem) => __spreadProps(__spreadValues({}, zoneItem), {
       props: __spreadProps(__spreadValues({}, zoneItem.props), { id: generateId(zoneItem.type) })
@@ -2999,7 +3328,7 @@ var duplicateRelatedZones = (item, data, newId) => {
       [`${newId}:${zoneId}`]: dupedZone
     });
   });
-};
+}
 
 // reducer/data.ts
 var zoneCache = {};
@@ -3023,7 +3352,7 @@ var replaceAction = (data, action) => {
     })
   });
 };
-var insertAction = (data, action, config) => {
+function insertAction(data, action, config) {
   const emptyComponentData = {
     type: action.componentType,
     props: __spreadProps(__spreadValues({}, config.components[action.componentType].defaultProps || {}), {
@@ -3049,8 +3378,8 @@ var insertAction = (data, action, config) => {
       )
     })
   });
-};
-var reduceData = (data, action, config) => {
+}
+function reduceData(data, action, config) {
   if (action.type === "insert") {
     return insertAction(data, action, config);
   }
@@ -3193,277 +3522,87 @@ var reduceData = (data, action, config) => {
     return __spreadProps(__spreadValues({}, data), { zones: _zones });
   }
   if (action.type === "setData") {
-    if (typeof action.data === "object") {
-      return __spreadValues(__spreadValues({}, data), action.data);
-    }
-    return __spreadValues(__spreadValues({}, data), action.data(data));
-  }
-  return data;
-};
-
-// reducer/state.ts
-init_react_import();
-var reduceUi = (ui, action) => {
-  if (action.type === "setUi") {
-    if (typeof action.ui === "object") {
-      return __spreadValues(__spreadValues({}, ui), action.ui);
-    }
-    return __spreadValues(__spreadValues({}, ui), action.ui(ui));
-  }
-  return ui;
-};
-
-// reducer/actions.tsx
-init_react_import();
-
-// reducer/index.ts
-var storeInterceptor = (reducer, record, onAction) => {
-  return (state, action) => {
-    const newAppState = reducer(state, action);
-    const isValidType = ![
-      "registerZone",
-      "unregisterZone",
-      "setData",
-      "setUi",
-      "set"
-    ].includes(action.type);
-    if (typeof action.recordHistory !== "undefined" ? action.recordHistory : isValidType) {
-      if (record) record(newAppState);
-    }
-    onAction == null ? void 0 : onAction(action, newAppState, state);
-    return newAppState;
-  };
-};
-var setAction = (state, action) => {
-  if (typeof action.state === "object") {
-    return __spreadValues(__spreadValues({}, state), action.state);
-  }
-  return __spreadValues(__spreadValues({}, state), action.state(state));
-};
-function createReducer({
-  config,
-  record,
-  onAction
-}) {
-  return storeInterceptor(
-    (state, action) => {
-      const data = reduceData(state.data, action, config);
-      const ui = reduceUi(state.ui, action);
-      if (action.type === "set") {
-        return setAction(state, action);
-      }
-      return { data, ui };
-    },
-    record,
-    onAction
-  );
-}
-
-// lib/flush-zones.ts
-init_react_import();
-var flushZones = (appState) => {
-  const containsZones = typeof appState.data.zones !== "undefined";
-  if (containsZones) {
-    Object.keys(appState.data.zones || {}).forEach((zone) => {
-      addToZoneCache(zone, appState.data.zones[zone]);
-    });
-    return __spreadProps(__spreadValues({}, appState), {
-      data: __spreadProps(__spreadValues({}, appState.data), {
-        zones: {}
-      })
-    });
-  }
-  return appState;
-};
-
-// lib/use-resolved-data.ts
-init_react_import();
-var import_react19 = require("react");
-
-// lib/resolve-component-data.ts
-init_react_import();
-var cache2 = { lastChange: {} };
-var resolveAllComponentData = (content, config, onResolveStart, onResolveEnd) => __async(void 0, null, function* () {
-  return yield Promise.all(
-    content.map((item) => __async(void 0, null, function* () {
-      return yield resolveComponentData(
-        item,
-        config,
-        onResolveStart,
-        onResolveEnd
-      );
-    }))
-  );
-});
-var resolveComponentData = (item, config, onResolveStart, onResolveEnd) => __async(void 0, null, function* () {
-  const configForItem = config.components[item.type];
-  if (configForItem.resolveData) {
-    const { item: oldItem = {}, resolved = {} } = cache2.lastChange[item.props.id] || {};
-    if (item && item === oldItem) {
-      return resolved;
-    }
-    const changed = getChanged(item, oldItem);
-    if (onResolveStart) {
-      onResolveStart(item);
-    }
-    const { props: resolvedProps, readOnly = {} } = yield configForItem.resolveData(item, { changed, lastData: oldItem });
-    const { readOnly: existingReadOnly = {} } = item || {};
-    const newReadOnly = __spreadValues(__spreadValues({}, existingReadOnly), readOnly);
-    const resolvedItem = __spreadProps(__spreadValues({}, item), {
-      props: __spreadValues(__spreadValues({}, item.props), resolvedProps)
-    });
-    if (Object.keys(newReadOnly).length) {
-      resolvedItem.readOnly = newReadOnly;
-    }
-    cache2.lastChange[item.props.id] = {
-      item,
-      resolved: resolvedItem
-    };
-    if (onResolveEnd) {
-      onResolveEnd(resolvedItem);
-    }
-    return resolvedItem;
-  }
-  return item;
-});
-
-// lib/apply-dynamic-props.ts
-init_react_import();
-var applyDynamicProps = (data, dynamicProps, rootData) => {
-  return __spreadProps(__spreadValues({}, data), {
-    root: __spreadValues(__spreadValues({}, data.root), rootData ? rootData : {}),
-    content: data.content.map((item) => {
-      return dynamicProps[item.props.id] ? __spreadValues(__spreadValues({}, item), dynamicProps[item.props.id]) : item;
-    }),
-    zones: Object.keys(data.zones || {}).reduce((acc, zoneKey) => {
-      return __spreadProps(__spreadValues({}, acc), {
-        [zoneKey]: data.zones[zoneKey].map((item) => {
-          return dynamicProps[item.props.id] ? __spreadValues(__spreadValues({}, item), dynamicProps[item.props.id]) : item;
-        })
-      });
-    }, {})
-  });
+    if (typeof action.data === "object") {
+      return __spreadValues(__spreadValues({}, data), action.data);
+    }
+    return __spreadValues(__spreadValues({}, data), action.data(data));
+  }
+  return data;
+}
+
+// reducer/state.ts
+init_react_import();
+var reduceUi = (ui, action) => {
+  if (action.type === "setUi") {
+    if (typeof action.ui === "object") {
+      return __spreadValues(__spreadValues({}, ui), action.ui);
+    }
+    return __spreadValues(__spreadValues({}, ui), action.ui(ui));
+  }
+  return ui;
 };
 
-// lib/resolve-root-data.ts
+// reducer/actions.tsx
 init_react_import();
-var cache3 = {};
-function resolveRootData(data, config) {
-  return __async(this, null, function* () {
-    var _a, _b, _c, _d, _e;
-    if (((_a = config.root) == null ? void 0 : _a.resolveData) && data.root.props) {
-      if (((_b = cache3.lastChange) == null ? void 0 : _b.original) === data.root) {
-        return cache3.lastChange.resolved;
-      }
-      const changed = getChanged(data.root, (_c = cache3.lastChange) == null ? void 0 : _c.original);
-      const rootWithProps = data.root;
-      const resolvedRoot = yield (_e = config.root) == null ? void 0 : _e.resolveData(rootWithProps, {
-        changed,
-        lastData: ((_d = cache3.lastChange) == null ? void 0 : _d.original) || {}
-      });
-      cache3.lastChange = {
-        original: data.root,
-        resolved: resolvedRoot
-      };
-      return __spreadProps(__spreadValues(__spreadValues({}, data.root), resolvedRoot), {
-        props: __spreadValues(__spreadValues({}, data.root.props), resolvedRoot.props)
-      });
+
+// reducer/index.ts
+function storeInterceptor(reducer, record, onAction) {
+  return (state, action) => {
+    const newAppState = reducer(state, action);
+    const isValidType = ![
+      "registerZone",
+      "unregisterZone",
+      "setData",
+      "setUi",
+      "set"
+    ].includes(action.type);
+    if (typeof action.recordHistory !== "undefined" ? action.recordHistory : isValidType) {
+      if (record) record(newAppState);
     }
-    return data.root;
-  });
+    onAction == null ? void 0 : onAction(action, newAppState, state);
+    return newAppState;
+  };
 }
-
-// lib/use-resolved-data.ts
-var useResolvedData = (appState, config, dispatch) => {
-  const [{ resolverKey, newAppState }, setResolverState] = (0, import_react19.useState)({
-    resolverKey: 0,
-    newAppState: appState
-  });
-  const [componentState, setComponentState] = (0, import_react19.useState)({});
-  const deferredSetStates = {};
-  const setComponentLoading = (0, import_react19.useCallback)(
-    (id, loading, defer2 = 0) => {
-      if (deferredSetStates[id]) {
-        clearTimeout(deferredSetStates[id]);
-        delete deferredSetStates[id];
+var setAction = (state, action) => {
+  if (typeof action.state === "object") {
+    return __spreadValues(__spreadValues({}, state), action.state);
+  }
+  return __spreadValues(__spreadValues({}, state), action.state(state));
+};
+function createReducer({
+  config,
+  record,
+  onAction
+}) {
+  return storeInterceptor(
+    (state, action) => {
+      const data = reduceData(state.data, action, config);
+      const ui = reduceUi(state.ui, action);
+      if (action.type === "set") {
+        return setAction(state, action);
       }
-      deferredSetStates[id] = setTimeout(() => {
-        setComponentState((prev) => __spreadProps(__spreadValues({}, prev), {
-          [id]: __spreadProps(__spreadValues({}, prev[id]), { loading })
-        }));
-        delete deferredSetStates[id];
-      }, defer2);
+      return { data, ui };
     },
-    []
+    record,
+    onAction
   );
-  const runResolvers = () => __async(void 0, null, function* () {
-    const newData = newAppState.data;
-    const flatContent = Object.keys(newData.zones || {}).reduce((acc, zone) => [...acc, ...newData.zones[zone]], newData.content).filter((item) => {
-      var _a;
-      return !!((_a = config.components[item.type]) == null ? void 0 : _a.resolveData);
+}
+
+// lib/flush-zones.ts
+init_react_import();
+var flushZones = (appState) => {
+  const containsZones = typeof appState.data.zones !== "undefined";
+  if (containsZones) {
+    Object.keys(appState.data.zones || {}).forEach((zone) => {
+      addToZoneCache(zone, appState.data.zones[zone]);
     });
-    const applyIfChange = (dynamicDataMap, dynamicRoot) => {
-      const processed = applyDynamicProps(
-        appState.data,
-        dynamicDataMap,
-        dynamicRoot
-      );
-      const processedAppState = __spreadProps(__spreadValues({}, appState), { data: processed });
-      const containsChanges = JSON.stringify(appState) !== JSON.stringify(processedAppState);
-      if (containsChanges) {
-        dispatch({
-          type: "set",
-          state: (prev) => __spreadProps(__spreadValues({}, prev), {
-            data: applyDynamicProps(prev.data, dynamicDataMap, dynamicRoot),
-            ui: resolverKey > 0 ? __spreadValues(__spreadValues({}, prev.ui), newAppState.ui) : prev.ui
-          }),
-          recordHistory: resolverKey > 0
-        });
-      }
-    };
-    const promises = [];
-    promises.push(
-      (() => __async(void 0, null, function* () {
-        setComponentLoading("puck-root", true, 50);
-        const dynamicRoot = yield resolveRootData(newData, config);
-        applyIfChange({}, dynamicRoot);
-        setComponentLoading("puck-root", false);
-      }))()
-    );
-    flatContent.forEach((item) => {
-      promises.push(
-        (() => __async(void 0, null, function* () {
-          const dynamicData = yield resolveComponentData(
-            item,
-            config,
-            (item2) => {
-              setComponentLoading(item2.props.id, true, 50);
-            },
-            (item2) => {
-              deferredSetStates[item2.props.id];
-              setComponentLoading(item2.props.id, false);
-            }
-          );
-          const dynamicDataMap = { [item.props.id]: dynamicData };
-          applyIfChange(dynamicDataMap);
-        }))()
-      );
+    return __spreadProps(__spreadValues({}, appState), {
+      data: __spreadProps(__spreadValues({}, appState.data), {
+        zones: {}
+      })
     });
-    yield Promise.all(promises);
-  });
-  (0, import_react19.useEffect)(() => {
-    runResolvers();
-  }, [resolverKey]);
-  const resolveData = (0, import_react19.useCallback)((newAppState2 = appState) => {
-    setResolverState((curr) => ({
-      resolverKey: curr.resolverKey + 1,
-      newAppState: newAppState2
-    }));
-  }, []);
-  return {
-    resolveData,
-    componentState
-  };
+  }
+  return appState;
 };
 
 // components/MenuBar/index.tsx
@@ -3476,15 +3615,14 @@ var styles_module_default14 = { "MenuBar": "_MenuBar_8pf8c_1", "MenuBar--menuOpe
 // components/MenuBar/index.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var getClassName20 = get_class_name_factory_default("MenuBar", styles_module_default14);
-var MenuBar = ({
+function MenuBar({
   appState,
-  data = { content: [], root: {} },
   dispatch,
   menuOpen = false,
   onPublish,
   renderHeaderActions,
   setMenuOpen
-}) => {
+}) {
   const {
     history: { back, forward, historyStore }
   } = useAppContext();
@@ -3515,7 +3653,7 @@ var MenuBar = ({
       ] })
     }
   );
-};
+}
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css#css-module
 init_react_import();
@@ -3529,7 +3667,7 @@ init_react_import();
 var styles_module_default16 = { "PuckFields": "_PuckFields_jp3lw_1", "PuckFields--isLoading": "_PuckFields--isLoading_jp3lw_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_jp3lw_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_jp3lw_25" };
 
 // components/Puck/components/Fields/index.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
 var defaultPageFields = {
@@ -3548,15 +3686,15 @@ var useResolvedFields = () => {
   const componentConfig = selectedItem ? config.components[selectedItem.type] : null;
   const defaultFields = selectedItem ? componentConfig == null ? void 0 : componentConfig.fields : rootFields;
   const rootProps = data.root.props || data.root;
-  const [lastSelectedData, setLastSelectedData] = (0, import_react20.useState)({});
-  const [resolvedFields, setResolvedFields] = (0, import_react20.useState)(defaultFields || {});
-  const [fieldsLoading, setFieldsLoading] = (0, import_react20.useState)(false);
+  const [lastSelectedData, setLastSelectedData] = (0, import_react21.useState)({});
+  const [resolvedFields, setResolvedFields] = (0, import_react21.useState)(defaultFields || {});
+  const [fieldsLoading, setFieldsLoading] = (0, import_react21.useState)(false);
   const defaultResolveFields = (_componentData, _params) => defaultFields;
   const componentData = selectedItem ? selectedItem : { props: rootProps, readOnly: data.root.readOnly };
-  const resolveFields = (0, import_react20.useCallback)(
+  const resolveFields = (0, import_react21.useCallback)(
     (..._0) => __async(void 0, [..._0], function* (fields = {}) {
       var _a2, _b, _c;
-      const lastData = ((_a2 = lastSelectedData.props) == null ? void 0 : _a2.id) === componentData.props.id ? lastSelectedData : {};
+      const lastData = ((_a2 = lastSelectedData.props) == null ? void 0 : _a2.id) === componentData.props.id ? lastSelectedData : null;
       const changed = getChanged(componentData, lastData);
       setLastSelectedData(componentData);
       if (selectedItem && (componentConfig == null ? void 0 : componentConfig.resolveFields)) {
@@ -3589,13 +3727,13 @@ var useResolvedFields = () => {
     }),
     [data, config, componentData, selectedItem, resolvedFields, state]
   );
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     setFieldsLoading(true);
     resolveFields(defaultFields).then((fields) => {
       setResolvedFields(fields || {});
       setFieldsLoading(false);
     });
-  }, [data, defaultFields]);
+  }, [data, defaultFields, state.ui.itemSelector]);
   return [resolvedFields, fieldsLoading];
 };
 var Fields = () => {
@@ -3607,16 +3745,16 @@ var Fields = () => {
     config,
     resolveData,
     componentState,
-    overrides,
-    globalPermissions
+    overrides
   } = useAppContext();
   const { data, ui } = state;
   const { itemSelector } = ui;
   const [fields, fieldsResolving] = useResolvedFields();
-  const componentResolving = selectedItem ? (_a = componentState[selectedItem == null ? void 0 : selectedItem.props.id]) == null ? void 0 : _a.loading : (_b = componentState["puck-root"]) == null ? void 0 : _b.loading;
+  const { getPermissions } = useAppContext();
+  const componentResolving = selectedItem ? ((_a = componentState[selectedItem == null ? void 0 : selectedItem.props.id]) == null ? void 0 : _a.loadingCount) > 0 : ((_b = componentState["puck-root"]) == null ? void 0 : _b.loadingCount) > 0;
   const isLoading = fieldsResolving || componentResolving;
   const rootProps = data.root.props || data.root;
-  const Wrapper = (0, import_react20.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
+  const Wrapper = (0, import_react21.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     "form",
     {
@@ -3693,10 +3831,7 @@ var Fields = () => {
           if (selectedItem && itemSelector) {
             const { readOnly = {} } = selectedItem;
             const { edit } = getPermissions({
-              selectedItem,
-              config,
-              globalPermissions: globalPermissions || {},
-              appState: state
+              item: selectedItem
             });
             return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               AutoFieldPrivate,
@@ -3712,13 +3847,16 @@ var Fields = () => {
             );
           } else {
             const readOnly = data.root.readOnly || {};
+            const { edit } = getPermissions({
+              root: true
+            });
             return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               AutoFieldPrivate,
               {
                 field,
                 name: fieldName,
                 id: `root_${fieldName}`,
-                readOnly: readOnly[fieldName],
+                readOnly: !edit || readOnly[fieldName],
                 value: rootProps[fieldName],
                 onChange
               },
@@ -3737,7 +3875,7 @@ init_react_import();
 
 // lib/use-component-list.tsx
 init_react_import();
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // components/ComponentList/index.tsx
 init_react_import();
@@ -3754,12 +3892,9 @@ var ComponentListItem = ({
   label,
   index
 }) => {
-  const { overrides, config, globalPermissions, state } = useAppContext();
+  const { overrides, getPermissions } = useAppContext();
   const canInsert = getPermissions({
-    type: name,
-    config,
-    globalPermissions: globalPermissions || {},
-    appState: state
+    type: name
   }).insert;
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     Drawer.Item,
@@ -3783,6 +3918,7 @@ var ComponentList = ({
     title && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
       "button",
       {
+        type: "button",
         className: getClassName22("title"),
         onClick: () => setUi({
           componentList: __spreadProps(__spreadValues({}, state.ui.componentList), {
@@ -3817,8 +3953,8 @@ ComponentList.Item = ComponentListItem;
 // lib/use-component-list.tsx
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var useComponentList = (config, ui) => {
-  const [componentList, setComponentList] = (0, import_react21.useState)();
-  (0, import_react21.useEffect)(() => {
+  const [componentList, setComponentList] = (0, import_react22.useState)();
+  (0, import_react22.useEffect)(() => {
     var _a, _b, _c;
     if (Object.keys(ui.componentList).length > 0) {
       const matchedComponents = [];
@@ -3887,22 +4023,22 @@ var useComponentList = (config, ui) => {
 };
 
 // components/Puck/components/Components/index.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var Components = () => {
   const { config, state, overrides } = useAppContext();
   const componentList = useComponentList(config, state.ui);
-  const Wrapper = (0, import_react22.useMemo)(() => overrides.components || "div", [overrides]);
+  const Wrapper = (0, import_react23.useMemo)(() => overrides.components || "div", [overrides]);
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ComponentList, { id: "all" }) });
 };
 
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // components/AutoFrame/index.tsx
 init_react_import();
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_object_hash = __toESM(require("object-hash"));
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime32 = require("react/jsx-runtime");
@@ -3948,7 +4084,7 @@ var CopyHostStyles = ({
   onStylesLoaded = () => null
 }) => {
   const { document: doc, window: win } = useFrame();
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (!win || !doc) {
       return () => {
       };
@@ -4107,8 +4243,8 @@ var CopyHostStyles = ({
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children });
 };
-var autoFrameContext = (0, import_react23.createContext)({});
-var useFrame = () => (0, import_react23.useContext)(autoFrameContext);
+var autoFrameContext = (0, import_react24.createContext)({});
+var useFrame = () => (0, import_react24.useContext)(autoFrameContext);
 function AutoFrame(_a) {
   var _b = _a, {
     children,
@@ -4123,11 +4259,11 @@ function AutoFrame(_a) {
     "id",
     "onStylesLoaded"
   ]);
-  const [loaded, setLoaded] = (0, import_react23.useState)(false);
-  const [ctx, setCtx] = (0, import_react23.useState)({});
-  const ref = (0, import_react23.useRef)(null);
-  const [mountTarget, setMountTarget] = (0, import_react23.useState)();
-  (0, import_react23.useEffect)(() => {
+  const [loaded, setLoaded] = (0, import_react24.useState)(false);
+  const [ctx, setCtx] = (0, import_react24.useState)({});
+  const ref = (0, import_react24.useRef)(null);
+  const [mountTarget, setMountTarget] = (0, import_react24.useState)();
+  (0, import_react24.useEffect)(() => {
     var _a2;
     if (ref.current) {
       setCtx({
@@ -4163,7 +4299,7 @@ var import_jsx_runtime33 = require("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();
-  const Page = (0, import_react24.useCallback)(
+  const Page = (0, import_react25.useCallback)(
     (pageProps) => {
       var _a, _b;
       return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadValues({
@@ -4172,7 +4308,7 @@ var Preview = ({ id = "puck-preview" }) => {
     },
     [config.root]
   );
-  const Frame = (0, import_react24.useMemo)(() => overrides.iframe, [overrides]);
+  const Frame = (0, import_react25.useMemo)(() => overrides.iframe, [overrides]);
   const rootProps = state.data.root.props || state.data.root;
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "div",
@@ -4261,7 +4397,7 @@ var scrollIntoView = (el) => {
 };
 
 // components/LayerTree/index.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // lib/is-child-of-zone.ts
 init_react_import();
@@ -4288,7 +4424,7 @@ var LayerTree = ({
   label
 }) => {
   const zones = data.zones || {};
-  const ctx = (0, import_react25.useContext)(dropZoneContext);
+  const ctx = (0, import_react26.useContext)(dropZoneContext);
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName24("zoneTitle"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Layers, { size: "16" }) }),
@@ -4327,6 +4463,7 @@ var LayerTree = ({
               /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
                 "button",
                 {
+                  type: "button",
                   className: getClassNameLayer("clickable"),
                   onClick: () => {
                     if (isSelected) {
@@ -4393,13 +4530,13 @@ var LayerTree = ({
 };
 
 // components/Puck/components/Outline/index.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var Outline = () => {
   const { dispatch, state, overrides, config } = useAppContext();
   const { data, ui } = state;
   const { itemSelector } = ui;
-  const setItemSelector = (0, import_react26.useCallback)(
+  const setItemSelector = (0, import_react27.useCallback)(
     (newItemSelector) => {
       dispatch({
         type: "setUi",
@@ -4408,7 +4545,7 @@ var Outline = () => {
     },
     []
   );
-  const Wrapper = (0, import_react26.useMemo)(() => overrides.outline || "div", [overrides]);
+  const Wrapper = (0, import_react27.useMemo)(() => overrides.outline || "div", [overrides]);
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
     (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       LayerTree,
@@ -4454,14 +4591,14 @@ function usePuckHistory({
     if (historyStore.hasPast) {
       dispatch({
         type: "set",
-        state: ((_a = historyStore.prevHistory) == null ? void 0 : _a.data) || initialAppState
+        state: ((_a = historyStore.prevHistory) == null ? void 0 : _a.state) || initialAppState
       });
       historyStore.back();
     }
   };
   const forward = () => {
     if (historyStore.nextHistory) {
-      dispatch({ type: "set", state: historyStore.nextHistory.data });
+      dispatch({ type: "set", state: historyStore.nextHistory.state });
       historyStore.forward();
     }
   };
@@ -4469,7 +4606,7 @@ function usePuckHistory({
     var _a;
     dispatch({
       type: "set",
-      state: ((_a = histories[histories.length - 1]) == null ? void 0 : _a.data) || initialAppState
+      state: ((_a = histories[histories.length - 1]) == null ? void 0 : _a.state) || initialAppState
     });
     historyStore.setHistories(histories);
   };
@@ -4478,7 +4615,7 @@ function usePuckHistory({
     if (historyStore.histories.length > index) {
       dispatch({
         type: "set",
-        state: ((_a = historyStore.histories[index]) == null ? void 0 : _a.data) || initialAppState
+        state: ((_a = historyStore.histories[index]) == null ? void 0 : _a.state) || initialAppState
       });
       historyStore.setHistoryIndex(index);
     }
@@ -4497,19 +4634,19 @@ function usePuckHistory({
 
 // lib/use-history-store.ts
 init_react_import();
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_use_debounce3 = require("use-debounce");
-var EMPTY_HISTORY_INDEX = -1;
+var EMPTY_HISTORY_INDEX = 0;
 function useHistoryStore(initialHistory) {
   var _a, _b;
-  const [histories, setHistories] = (0, import_react27.useState)(
+  const [histories, setHistories] = (0, import_react28.useState)(
     (_a = initialHistory == null ? void 0 : initialHistory.histories) != null ? _a : []
   );
   const updateHistories = (histories2) => {
     setHistories(histories2);
     setIndex(histories2.length - 1);
   };
-  const [index, setIndex] = (0, import_react27.useState)(
+  const [index, setIndex] = (0, import_react28.useState)(
     (_b = initialHistory == null ? void 0 : initialHistory.index) != null ? _b : EMPTY_HISTORY_INDEX
   );
   const hasPast = index > EMPTY_HISTORY_INDEX;
@@ -4517,9 +4654,9 @@ function useHistoryStore(initialHistory) {
   const currentHistory = histories[index];
   const nextHistory = hasFuture ? histories[index + 1] : null;
   const prevHistory = hasPast ? histories[index - 1] : null;
-  const record = (0, import_use_debounce3.useDebouncedCallback)((data) => {
+  const record = (0, import_use_debounce3.useDebouncedCallback)((state) => {
     const history = {
-      data,
+      state,
       id: generateId("history")
     };
     updateHistories([...histories.slice(0, index + 1), history]);
@@ -4669,11 +4806,11 @@ var getBox = function getBox2(el) {
 };
 
 // components/Puck/components/Canvas/index.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 
 // components/ViewportControls/index.tsx
 init_react_import();
-var import_react28 = require("react");
+var import_react29 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
 init_react_import();
@@ -4696,8 +4833,8 @@ var ViewportButton = ({
   onClick
 }) => {
   const { state } = useAppContext();
-  const [isActive, setIsActive] = (0, import_react28.useState)(false);
-  (0, import_react28.useEffect)(() => {
+  const [isActive, setIsActive] = (0, import_react29.useState)(false);
+  (0, import_react29.useEffect)(() => {
     setIsActive(width === state.ui.viewports.current.width);
   }, [width, state.ui.viewports.current.width]);
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
@@ -4733,7 +4870,7 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
-  const zoomOptions = (0, import_react28.useMemo)(
+  const zoomOptions = (0, import_react29.useMemo)(
     () => [
       ...defaultZoomOptions,
       ...defaultsContainAutoZoom ? [] : [
@@ -4816,7 +4953,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_6zd4y_1", "PuckCanvas-controls": "_PuckCanvas-controls_6zd4y_16", "PuckCanvas-inner": "_PuckCanvas-inner_6zd4y_21", "PuckCanvas-root": "_PuckCanvas-root_6zd4y_32", "PuckCanvas--ready": "_PuckCanvas--ready_6zd4y_56" };
+var styles_module_default21 = { "PuckCanvas": "_PuckCanvas_esbg1_1", "PuckCanvas-controls": "_PuckCanvas-controls_esbg1_16", "PuckCanvas-inner": "_PuckCanvas-inner_esbg1_21", "PuckCanvas-root": "_PuckCanvas-root_esbg1_32", "PuckCanvas--ready": "_PuckCanvas--ready_esbg1_56", "PuckCanvas-loader": "_PuckCanvas-loader_esbg1_60", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_esbg1_70" };
 
 // lib/get-zoom-config.ts
 init_react_import();
@@ -4856,17 +4993,17 @@ var Canvas = () => {
   const { status, iframe } = useAppContext();
   const { dispatch, state, overrides, setUi, zoomConfig, setZoomConfig } = useAppContext();
   const { ui } = state;
-  const frameRef = (0, import_react29.useRef)(null);
-  const [showTransition, setShowTransition] = (0, import_react29.useState)(false);
-  const defaultRender = (0, import_react29.useMemo)(() => {
+  const frameRef = (0, import_react30.useRef)(null);
+  const [showTransition, setShowTransition] = (0, import_react30.useState)(false);
+  const defaultRender = (0, import_react30.useMemo)(() => {
     const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children });
     return PuckDefault;
   }, []);
-  const CustomPreview = (0, import_react29.useMemo)(
+  const CustomPreview = (0, import_react30.useMemo)(
     () => overrides.preview || defaultRender,
     [overrides]
   );
-  const getFrameDimensions = (0, import_react29.useCallback)(() => {
+  const getFrameDimensions = (0, import_react30.useCallback)(() => {
     if (frameRef.current) {
       const frame = frameRef.current;
       const box = getBox(frame);
@@ -4874,7 +5011,7 @@ var Canvas = () => {
     }
     return { width: 0, height: 0 };
   }, [frameRef]);
-  const resetAutoZoom = (0, import_react29.useCallback)(
+  const resetAutoZoom = (0, import_react30.useCallback)(
     (ui2 = state.ui) => {
       if (frameRef.current) {
         setZoomConfig(
@@ -4884,11 +5021,11 @@ var Canvas = () => {
     },
     [frameRef, zoomConfig, state.ui]
   );
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     setShowTransition(false);
     resetAutoZoom();
   }, [frameRef, ui.leftSideBarVisible, ui.rightSideBarVisible]);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     const { height: frameHeight } = getFrameDimensions();
     if (ui.viewports.current.height === "auto") {
       setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
@@ -4896,7 +5033,13 @@ var Canvas = () => {
       }));
     }
   }, [zoomConfig.zoom]);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
+    if (ZOOM_ON_CHANGE) {
+      setShowTransition(true);
+      resetAutoZoom(ui);
+    }
+  }, [ui.viewports.current.width]);
+  (0, import_react30.useEffect)(() => {
     const observer = new ResizeObserver(() => {
       setShowTransition(false);
       resetAutoZoom();
@@ -4908,11 +5051,18 @@ var Canvas = () => {
       observer.disconnect();
     };
   }, []);
+  const [showLoader, setShowLoader] = (0, import_react30.useState)(false);
+  (0, import_react30.useEffect)(() => {
+    setTimeout(() => {
+      setShowLoader(true);
+    }, 500);
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "div",
     {
       className: getClassName26({
-        ready: status === "READY" || !iframe.enabled
+        ready: status === "READY" || !iframe.enabled || !iframe.waitForStyles,
+        showLoader
       }),
       onClick: () => dispatch({
         type: "setUi",
@@ -4945,21 +5095,24 @@ var Canvas = () => {
             }
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: getClassName26("inner"), ref: frameRef, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-          "div",
-          {
-            className: getClassName26("root"),
-            style: {
-              width: iframe.enabled ? ui.viewports.current.width : "100%",
-              height: zoomConfig.rootHeight,
-              transform: iframe.enabled ? `scale(${zoomConfig.zoom})` : void 0,
-              transition: showTransition ? "width 150ms ease-out, height 150ms ease-out, transform 150ms ease-out" : "",
-              overflow: iframe.enabled ? void 0 : "auto"
-            },
-            suppressHydrationWarning: true,
-            children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Preview, {}) })
-          }
-        ) })
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: getClassName26("inner"), ref: frameRef, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            "div",
+            {
+              className: getClassName26("root"),
+              style: {
+                width: iframe.enabled ? ui.viewports.current.width : "100%",
+                height: zoomConfig.rootHeight,
+                transform: iframe.enabled ? `scale(${zoomConfig.zoom})` : void 0,
+                transition: showTransition ? "width 150ms ease-out, height 150ms ease-out, transform 150ms ease-out" : "",
+                overflow: iframe.enabled ? void 0 : "auto"
+              },
+              suppressHydrationWarning: true,
+              children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Preview, {}) })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: getClassName26("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Loader, { size: 24 }) })
+        ] })
       ]
     }
   );
@@ -4984,7 +5137,10 @@ var insertComponent = (componentType, zone, index, {
   const insertedData = insertAction(state.data, insertActionData, config);
   dispatch(__spreadProps(__spreadValues({}, insertActionData), {
     // Dispatch insert rather set, as user's may rely on this via onAction
-    recordHistory: false
+    // We must always record history here so the insert is added to user history
+    // If the user has defined a resolveData method, they will end up with 2 history
+    // entries on insert - one for the initial insert, and one when the data resolves
+    recordHistory: true
   }));
   const itemSelector = {
     index,
@@ -4999,7 +5155,7 @@ var insertComponent = (componentType, zone, index, {
 
 // lib/use-loaded-overrides.ts
 init_react_import();
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // lib/load-overrides.ts
 init_react_import();
@@ -5038,7 +5194,7 @@ var useLoadedOverrides = ({
   overrides,
   plugins
 }) => {
-  return (0, import_react30.useMemo)(() => {
+  return (0, import_react31.useMemo)(() => {
     return loadOverrides({ overrides, plugins });
   }, [plugins, overrides]);
 };
@@ -5050,7 +5206,7 @@ var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_mod
 function Puck({
   children,
   config,
-  data: initialData = { content: [], root: {} },
+  data: initialData,
   ui: initialUi,
   onChange,
   onPublish,
@@ -5063,18 +5219,16 @@ function Puck({
   headerTitle,
   headerPath,
   viewports = defaultViewports,
-  iframe = {
-    enabled: true
-  },
+  iframe: _iframe,
   dnd,
-  initialHistory
+  initialHistory: _initialHistory
 }) {
   var _a;
-  const historyStore = useHistoryStore(initialHistory);
-  const [reducer] = (0, import_react31.useState)(
-    () => createReducer({ config, record: historyStore.record, onAction })
-  );
-  const [initialAppState] = (0, import_react31.useState)(() => {
+  const iframe = __spreadValues({
+    enabled: true,
+    waitForStyles: true
+  }, _iframe);
+  const [generatedAppState] = (0, import_react32.useState)(() => {
     var _a2, _b, _c, _d, _e, _f, _g, _h, _i;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
@@ -5092,14 +5246,14 @@ function Puck({
       })).sort((a, b) => a.diff > b.diff ? 1 : -1);
       const closestViewport = viewportDifferences[0].key;
       if (iframe.enabled) {
-        clientUiState = {
+        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",
               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)
             })
           })
-        };
+        });
       }
     }
     if (Object.keys((initialData == null ? void 0 : initialData.root) || {}).length > 0 && !((_g = initialData == null ? void 0 : initialData.root) == null ? void 0 : _g.props)) {
@@ -5132,20 +5286,36 @@ function Puck({
       })
     });
   });
-  const [appState, dispatch] = (0, import_react31.useReducer)(
+  const { appendData = true } = _initialHistory || {};
+  const histories = [
+    ...(_initialHistory == null ? void 0 : _initialHistory.histories) || [],
+    ...appendData ? [{ state: generatedAppState }] : []
+  ].map((history2) => __spreadProps(__spreadValues({}, history2), {
+    // Inject default data to enable partial history injections
+    state: __spreadValues(__spreadValues({}, generatedAppState), history2.state)
+  }));
+  const initialHistoryIndex = (_initialHistory == null ? void 0 : _initialHistory.index) || histories.length - 1;
+  const initialAppState = histories[initialHistoryIndex].state;
+  const historyStore = useHistoryStore({
+    histories,
+    index: initialHistoryIndex
+  });
+  const [reducer] = (0, import_react32.useState)(
+    () => createReducer({
+      config,
+      record: historyStore.record,
+      onAction
+    })
+  );
+  const [appState, dispatch] = (0, import_react32.useReducer)(
     reducer,
     flushZones(initialAppState)
   );
   const { data, ui } = appState;
   const history = usePuckHistory({ dispatch, initialAppState, historyStore });
-  const { resolveData, componentState } = useResolvedData(
-    appState,
-    config,
-    dispatch
-  );
-  const [menuOpen, setMenuOpen] = (0, import_react31.useState)(false);
+  const [menuOpen, setMenuOpen] = (0, import_react32.useState)(false);
   const { itemSelector, leftSideBarVisible, rightSideBarVisible } = ui;
-  const setItemSelector = (0, import_react31.useCallback)(
+  const setItemSelector = (0, import_react32.useCallback)(
     (newItemSelector) => {
       if (newItemSelector === itemSelector) return;
       dispatch({
@@ -5157,13 +5327,13 @@ function Puck({
     [itemSelector]
   );
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (onChange) onChange(data);
   }, [data]);
   const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
-  const [draggedItem, setDraggedItem] = (0, import_react31.useState)();
+  const [draggedItem, setDraggedItem] = (0, import_react32.useState)();
   const rootProps = data.root.props || data.root;
-  const toggleSidebars = (0, import_react31.useCallback)(
+  const toggleSidebars = (0, import_react32.useCallback)(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -5177,7 +5347,7 @@ function Puck({
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -5200,7 +5370,7 @@ function Puck({
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  const defaultHeaderRender = (0, import_react31.useMemo)(() => {
+  const defaultHeaderRender = (0, import_react32.useMemo)(() => {
     if (renderHeader) {
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
@@ -5214,7 +5384,7 @@ function Puck({
     }
     return DefaultOverride;
   }, [renderHeader]);
-  const defaultHeaderActionsRender = (0, import_react31.useMemo)(() => {
+  const defaultHeaderActionsRender = (0, import_react32.useMemo)(() => {
     if (renderHeaderActions) {
       console.warn(
         "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
@@ -5231,20 +5401,20 @@ function Puck({
     overrides,
     plugins
   });
-  const CustomPuck = (0, import_react31.useMemo)(
+  const CustomPuck = (0, import_react32.useMemo)(
     () => loadedOverrides.puck || DefaultOverride,
     [loadedOverrides]
   );
-  const CustomHeader = (0, import_react31.useMemo)(
+  const CustomHeader = (0, import_react32.useMemo)(
     () => loadedOverrides.header || defaultHeaderRender,
     [loadedOverrides]
   );
-  const CustomHeaderActions = (0, import_react31.useMemo)(
+  const CustomHeaderActions = (0, import_react32.useMemo)(
     () => loadedOverrides.headerActions || defaultHeaderActionsRender,
     [loadedOverrides]
   );
-  const [mounted, setMounted] = (0, import_react31.useState)(false);
-  (0, import_react31.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react32.useState)(false);
+  (0, import_react32.useEffect)(() => {
     setMounted(true);
   }, []);
   const selectedComponentConfig = selectedItem && config.components[selectedItem.type];
@@ -5257,8 +5427,6 @@ function Puck({
           state: appState,
           dispatch,
           config,
-          componentState,
-          resolveData,
           plugins: plugins || [],
           overrides: loadedOverrides,
           history,
@@ -5270,9 +5438,11 @@ function Puck({
             duplicate: true,
             insert: true,
             edit: true
-          }, permissions)
+          }, permissions),
+          getPermissions: () => ({}),
+          refreshPermissions: () => null
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(appContext.Consumer, { children: ({ resolveData }) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           DragDropContext,
           {
             autoScrollerOptions: { disabled: dnd == null ? void 0 : dnd.disableAutoScroll },
@@ -5362,90 +5532,115 @@ function Puck({
                             }
                           ) }) }),
                           children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("header", { className: getLayoutClassName("header"), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: getLayoutClassName("headerInner"), children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: getLayoutClassName("headerToggle"), children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                                "div",
-                                {
-                                  className: getLayoutClassName(
-                                    "leftSideBarToggle"
-                                  ),
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                                    IconButton,
+                            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+                              "div",
+                              {
+                                className: getLayoutClassName("headerToggle"),
+                                children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                                    "div",
                                     {
-                                      onClick: () => {
-                                        toggleSidebars("left");
-                                      },
-                                      title: "Toggle left sidebar",
-                                      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PanelLeft, { focusable: "false" })
+                                      className: getLayoutClassName(
+                                        "leftSideBarToggle"
+                                      ),
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                                        IconButton,
+                                        {
+                                          onClick: () => {
+                                            toggleSidebars("left");
+                                          },
+                                          title: "Toggle left sidebar",
+                                          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PanelLeft, { focusable: "false" })
+                                        }
+                                      )
                                     }
-                                  )
-                                }
-                              ),
-                              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                                "div",
-                                {
-                                  className: getLayoutClassName(
-                                    "rightSideBarToggle"
                                   ),
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                                    IconButton,
+                                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                                    "div",
                                     {
-                                      onClick: () => {
-                                        toggleSidebars("right");
-                                      },
-                                      title: "Toggle right sidebar",
-                                      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PanelRight, { focusable: "false" })
+                                      className: getLayoutClassName(
+                                        "rightSideBarToggle"
+                                      ),
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                                        IconButton,
+                                        {
+                                          onClick: () => {
+                                            toggleSidebars("right");
+                                          },
+                                          title: "Toggle right sidebar",
+                                          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PanelRight, { focusable: "false" })
+                                        }
+                                      )
                                     }
                                   )
-                                }
-                              )
-                            ] }),
-                            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: getLayoutClassName("headerTitle"), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Heading, { rank: "2", size: "xs", children: [
-                              headerTitle || rootProps.title || "Page",
-                              headerPath && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
-                                " ",
-                                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                                  "code",
-                                  {
-                                    className: getLayoutClassName("headerPath"),
-                                    children: headerPath
-                                  }
-                                )
-                              ] })
-                            ] }) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: getLayoutClassName("headerTools"), children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: getLayoutClassName("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                                IconButton,
-                                {
-                                  onClick: () => {
-                                    return setMenuOpen(!menuOpen);
-                                  },
-                                  title: "Toggle menu bar",
-                                  children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ChevronDown, { focusable: "false" })
-                                }
-                              ) }),
-                              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                                MenuBar,
-                                {
-                                  appState,
-                                  data,
-                                  dispatch,
-                                  onPublish,
-                                  menuOpen,
-                                  renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                                    Button,
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                              "div",
+                              {
+                                className: getLayoutClassName("headerTitle"),
+                                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Heading, { rank: "2", size: "xs", children: [
+                                  headerTitle || rootProps.title || "Page",
+                                  headerPath && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+                                    " ",
+                                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                                      "code",
+                                      {
+                                        className: getLayoutClassName(
+                                          "headerPath"
+                                        ),
+                                        children: headerPath
+                                      }
+                                    )
+                                  ] })
+                                ] })
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+                              "div",
+                              {
+                                className: getLayoutClassName("headerTools"),
+                                children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                                    "div",
                                     {
-                                      onClick: () => {
-                                        onPublish && onPublish(data);
-                                      },
-                                      icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Globe, { size: "14px" }),
-                                      children: "Publish"
+                                      className: getLayoutClassName("menuButton"),
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                                        IconButton,
+                                        {
+                                          onClick: () => {
+                                            return setMenuOpen(!menuOpen);
+                                          },
+                                          title: "Toggle menu bar",
+                                          children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ChevronDown, { focusable: "false" })
+                                        }
+                                      )
                                     }
-                                  ) }),
-                                  setMenuOpen
-                                }
-                              )
-                            ] })
+                                  ),
+                                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                                    MenuBar,
+                                    {
+                                      appState,
+                                      dispatch,
+                                      onPublish,
+                                      menuOpen,
+                                      renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                                        Button,
+                                        {
+                                          onClick: () => {
+                                            onPublish && onPublish(data);
+                                          },
+                                          icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Globe, { size: "14px" }),
+                                          children: "Publish"
+                                        }
+                                      ) }),
+                                      setMenuOpen
+                                    }
+                                  )
+                                ]
+                              }
+                            )
                           ] }) })
                         }
                       ),
@@ -5470,7 +5665,7 @@ function Puck({
               }
             )
           }
-        )
+        ) })
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { id: "puck-portal-root", className: getClassName27("portal") })
@@ -5619,24 +5814,15 @@ var usePuck = () => {
     history,
     dispatch,
     selectedItem: currentItem,
-    globalPermissions
+    getPermissions,
+    refreshPermissions
   } = useAppContext();
   return {
     appState,
     config,
     dispatch,
-    getPermissions: ({
-      item,
-      type
-    } = {}) => {
-      return getPermissions({
-        selectedItem: item || currentItem,
-        type,
-        globalPermissions: globalPermissions || {},
-        config,
-        appState
-      });
-    },
+    getPermissions,
+    refreshPermissions,
     history: {
       back: history.back,
       forward: history.forward,
@@ -5663,11 +5849,13 @@ var usePuck = () => {
   DropZoneProvider,
   FieldLabel,
   FieldLabelInternal,
+  Group,
   IconButton,
   Puck,
   Render,
   dropZoneContext,
   migrate,
+  overrideKeys,
   resolveAllData,
   transformProps,
   usePuck