npm - @measured/puck - Versions diffs - 0.16.0-canary.6d43ba0 → 0.16.0-canary.72b8720 - Mend

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

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

Files changed (13) hide show

package/dist/{Config-XUGMjfT5.d.mts → actions-9pHbVtMU.d.mts} +217 -55
package/dist/{Config-XUGMjfT5.d.ts → actions-9pHbVtMU.d.ts} +217 -55
package/dist/{chunk-TM7CT64S.mjs → chunk-LM7YWFFF.mjs} +3 -2
package/dist/index.css +96 -77
package/dist/index.d.mts +51 -190
package/dist/index.d.ts +51 -190
package/dist/index.js +885 -697
package/dist/index.mjs +855 -670
package/dist/rsc.d.mts +1 -1
package/dist/rsc.d.ts +1 -1
package/dist/rsc.js +3 -2
package/dist/rsc.mjs +1 -1
package/package.json +1 -1

package/dist/index.mjs CHANGED Viewed

@@ -8,7 +8,7 @@ import {
   init_react_import,
   rootDroppableId,
   setupZone
-} from "./chunk-TM7CT64S.mjs";
+} from "./chunk-LM7YWFFF.mjs";
 // ../../node_modules/classnames/index.js
 var require_classnames = __commonJS({
@@ -65,15 +65,47 @@ var require_classnames = __commonJS({
 // index.ts
 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();
@@ -106,11 +138,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
 import { jsx, jsxs } from "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
@@ -122,8 +154,19 @@ var Action = ({
   children,
   label,
   onClick
-}) => /* @__PURE__ */ jsx("button", { className: getClassName("action"), onClick, title: label, children });
+}) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    type: "button",
+    className: getClassName("action"),
+    onClick,
+    title: label,
+    children
+  }
+);
+var Group = ({ children }) => /* @__PURE__ */ jsx("div", { className: getClassName("group"), children });
 ActionBar.Action = Action;
+ActionBar.Group = Group;
 // components/AutoField/index.tsx
 init_react_import();
@@ -134,10 +177,10 @@ var styles_module_default2 = { "Input": "_Input_3pq3z_1", "Input-label": "_Input
 // components/AutoField/index.tsx
 import {
-  useCallback as useCallback3,
-  useEffect as useEffect7,
+  useCallback as useCallback5,
+  useEffect as useEffect9,
   useMemo as useMemo2,
-  useState as useState8
+  useState as useState10
 } from "react";
 // components/AutoField/fields/index.tsx
@@ -551,20 +594,20 @@ init_react_import();
 import {
   createContext,
   useContext,
-  useEffect,
-  useState as useState2
+  useEffect as useEffect3,
+  useState as useState4
 } from "react";
 // lib/get-item.ts
 init_react_import();
-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();
@@ -576,6 +619,332 @@ var defaultViewports = [
 // components/Puck/context.tsx
 import { UAParser } from "ua-parser-js";
+// lib/use-resolved-permissions.ts
+init_react_import();
+import { useCallback, useEffect, useState as useState2 } from "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] = useState2({});
+  const [resolvedPermissions, setResolvedPermissions] = useState2({});
+  const resolveDataForItem = 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 = 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 = useCallback(
+    (params) => __async(void 0, null, function* () {
+      resolvePermissions(params, true);
+    }),
+    [config, appState]
+  );
+  useEffect(() => {
+    resolvePermissions();
+  }, [config, appState.data]);
+  const getPermissions = 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();
+import { useCallback as useCallback2, useEffect as useEffect2, useState as useState3 } from "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] = useState3({
+    resolverKey: 0,
+    newAppState: appState
+  });
+  const deferredSetStates = {};
+  const _setComponentLoading = useCallback2(
+    (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);
+  });
+  useEffect2(() => {
+    runResolvers();
+  }, [resolverKey]);
+  const resolveData = useCallback2((newAppState2 = appState) => {
+    setResolverState((curr) => ({
+      resolverKey: curr.resolverKey + 1,
+      newAppState: newAppState2
+    }));
+  }, []);
+  return {
+    resolveData
+  };
+};
+// components/Puck/context.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
 var defaultAppState = {
   data: { content: [], root: {} },
@@ -601,6 +970,8 @@ var defaultContext = {
   dispatch: () => null,
   config: { components: {} },
   componentState: {},
+  setComponentState: () => {
+  },
   resolveData: () => {
   },
   plugins: [],
@@ -617,20 +988,22 @@ var defaultContext = {
   setStatus: () => null,
   iframe: {},
   safariFallbackMode: false,
-  globalPermissions: {}
+  globalPermissions: {},
+  getPermissions: () => ({}),
+  refreshPermissions: () => null
 };
 var appContext = createContext(defaultContext);
 var AppProvider = ({
   children,
   value
 }) => {
-  const [zoomConfig, setZoomConfig] = useState2(defaultContext.zoomConfig);
-  const [status, setStatus] = useState2("LOADING");
-  useEffect(() => {
+  const [zoomConfig, setZoomConfig] = useState4(defaultContext.zoomConfig);
+  const [status, setStatus] = useState4("LOADING");
+  useEffect3(() => {
     setStatus("MOUNTED");
   }, []);
-  const [safariFallbackMode, setSafariFallbackMode] = useState2(false);
-  useEffect(() => {
+  const [safariFallbackMode, setSafariFallbackMode] = useState4(false);
+  useEffect3(() => {
     var _a, _b, _c;
     const ua = new UAParser(navigator.userAgent);
     const { browser } = ua.getResult();
@@ -647,15 +1020,58 @@ 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] = useState4({});
+  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__ */ jsx4(
     appContext.Provider,
     {
       value: __spreadProps(__spreadValues({}, value), {
+        selectedItem,
         zoomConfig,
         setZoomConfig,
         status,
         setStatus,
-        safariFallbackMode
+        safariFallbackMode,
+        getPermissions,
+        refreshPermissions,
+        componentState,
+        setComponentState,
+        resolveData
       }),
       children
     }
@@ -663,10 +1079,8 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
 };
 function useAppContext() {
   const mainContext = useContext(appContext);
-  const selectedItem = mainContext.state.ui.itemSelector ? getItem(mainContext.state.ui.itemSelector, mainContext.state.data) : void 0;
   return __spreadProps(__spreadValues({}, mainContext), {
     // Helpers
-    selectedItem,
     setUi: (ui, recordHistory) => {
       return mainContext.dispatch({
         type: "setUi",
@@ -770,7 +1184,7 @@ var Draggable = ({
 };
 // components/AutoField/fields/ArrayField/index.tsx
-import { useCallback, useEffect as useEffect2, useState as useState3 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useState as useState5 } from "react";
 // components/DragIcon/index.tsx
 init_react_import();
@@ -811,7 +1225,7 @@ var ArrayField = ({
   id,
   Label = (props) => /* @__PURE__ */ jsx9("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] || {
@@ -823,11 +1237,11 @@ var ArrayField = ({
     }),
     openId: ""
   };
-  const [localState, setLocalState] = useState3({ arrayState, value });
-  useEffect2(() => {
+  const [localState, setLocalState] = useState5({ arrayState, value });
+  useEffect4(() => {
     setLocalState({ arrayState, value });
   }, [value, state.ui.arrayState[id]]);
-  const mapArrayStateToUi = useCallback(
+  const mapArrayStateToUi = useCallback3(
     (partialArrayState) => {
       return {
         arrayState: __spreadProps(__spreadValues({}, state.ui.arrayState), {
@@ -837,13 +1251,13 @@ var ArrayField = ({
     },
     [arrayState]
   );
-  const getHighestIndex = useCallback(() => {
+  const getHighestIndex = useCallback3(() => {
     return arrayState.items.reduce(
       (acc, item) => item._originalIndex > acc ? item._originalIndex : acc,
       -1
     );
   }, [arrayState]);
-  const regenerateArrayState = useCallback(
+  const regenerateArrayState = useCallback3(
     (value2) => {
       let highestIndex = getHighestIndex();
       const newItems = Array.from(value2 || []).map((item, idx) => {
@@ -862,12 +1276,13 @@ var ArrayField = ({
     },
     [arrayState]
   );
-  useEffect2(() => {
+  useEffect4(() => {
     if (arrayState.items.length > 0) {
       setUi(mapArrayStateToUi(arrayState));
     }
   }, []);
-  const [hovering, setHovering] = useState3(false);
+  const [hovering, setHovering] = useState5(false);
+  const forceReadOnly = getPermissions({ item: selectedItem }).edit === false;
   if (field.type !== "array" || !field.arrayFields) {
     return null;
   }
@@ -998,13 +1413,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__ */ jsx9(
                                 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) => {
@@ -1104,19 +1520,19 @@ var DefaultField = ({
 // components/AutoField/fields/ExternalField/index.tsx
 init_react_import();
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect8 } from "react";
 // components/ExternalInput/index.tsx
 init_react_import();
-import { useMemo, useEffect as useEffect5, useState as useState6, useCallback as useCallback2 } from "react";
+import { useMemo, useEffect as useEffect7, useState as useState8, useCallback as useCallback4 } from "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();
-import { useEffect as useEffect3, useState as useState4 } from "react";
+import { useEffect as useEffect5, useState as useState6 } from "react";
 // css-module:/home/runner/work/puck/puck/packages/core/components/Modal/styles.module.css#css-module
 init_react_import();
@@ -1131,8 +1547,8 @@ var Modal = ({
   onClose,
   isOpen
 }) => {
-  const [rootEl, setRootEl] = useState4(null);
-  useEffect3(() => {
+  const [rootEl, setRootEl] = useState6(null);
+  useEffect5(() => {
     setRootEl(document.getElementById("puck-portal-root"));
   }, []);
   if (!rootEl) {
@@ -1179,7 +1595,7 @@ init_react_import();
 // components/Button/Button.tsx
 init_react_import();
-import { useEffect as useEffect4, useState as useState5 } from "react";
+import { useEffect as useEffect6, useState as useState7 } from "react";
 // css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css#css-module
 init_react_import();
@@ -1202,8 +1618,8 @@ var Button = ({
   size = "medium",
   loading: loadingProp = false
 }) => {
-  const [loading, setLoading] = useState5(loadingProp);
-  useEffect4(() => setLoading(loadingProp), [loadingProp]);
+  const [loading, setLoading] = useState7(loadingProp);
+  useEffect6(() => setLoading(loadingProp), [loadingProp]);
   const ElementType = href ? "a" : type ? "button" : "span";
   const el = /* @__PURE__ */ jsxs6(
     ElementType,
@@ -1248,19 +1664,20 @@ var ExternalInput = ({
   onChange,
   value = null,
   name,
-  id
+  id,
+  readOnly
 }) => {
   const {
     mapProp = (val) => val,
     mapRow = (val) => val,
     filterFields
   } = field || {};
-  const [data, setData] = useState6([]);
-  const [isOpen, setOpen] = useState6(false);
-  const [isLoading, setIsLoading] = useState6(true);
+  const [data, setData] = useState8([]);
+  const [isOpen, setOpen] = useState8(false);
+  const [isLoading, setIsLoading] = useState8(true);
   const hasFilterFields = !!filterFields;
-  const [filters, setFilters] = useState6(field.initialFilters || {});
-  const [filtersToggled, setFiltersToggled] = useState6(hasFilterFields);
+  const [filters, setFilters] = useState8(field.initialFilters || {});
+  const [filtersToggled, setFiltersToggled] = useState8(hasFilterFields);
   const mappedData = useMemo(() => {
     return data.map(mapRow);
   }, [data]);
@@ -1275,8 +1692,8 @@ var ExternalInput = ({
     }
     return Array.from(validKeys);
   }, [mappedData]);
-  const [searchQuery, setSearchQuery] = useState6(field.initialQuery || "");
-  const search = useCallback2(
+  const [searchQuery, setSearchQuery] = useState8(field.initialQuery || "");
+  const search = useCallback4(
     (query, filters2) => __async(void 0, null, function* () {
       setIsLoading(true);
       const cacheKey = `${id}-${query}-${JSON.stringify(filters2)}`;
@@ -1289,7 +1706,7 @@ var ExternalInput = ({
     }),
     [id, field]
   );
-  useEffect5(() => {
+  useEffect7(() => {
     search(searchQuery, filters);
   }, []);
   return /* @__PURE__ */ jsxs7(
@@ -1297,7 +1714,8 @@ var ExternalInput = ({
     {
       className: getClassName10({
         dataSelected: !!value,
-        modalVisible: isOpen
+        modalVisible: isOpen,
+        readOnly
       }),
       id,
       children: [
@@ -1308,6 +1726,7 @@ var ExternalInput = ({
               type: "button",
               onClick: () => setOpen(true),
               className: getClassName10("button"),
+              disabled: readOnly,
               children: value ? field.getItemSummary ? field.getItemSummary(value) : "External item" : /* @__PURE__ */ jsxs7(Fragment7, { children: [
                 /* @__PURE__ */ jsx14(Link, { size: "16" }),
                 /* @__PURE__ */ jsx14("span", { children: field.placeholder })
@@ -1317,10 +1736,12 @@ var ExternalInput = ({
           value && /* @__PURE__ */ jsx14(
             "button",
             {
+              type: "button",
               className: getClassName10("detachButton"),
               onClick: () => {
                 onChange(null);
               },
+              disabled: readOnly,
               children: /* @__PURE__ */ jsx14(Unlock, { size: 16 })
             }
           )
@@ -1446,12 +1867,13 @@ var ExternalField = ({
   name,
   label,
   Label,
-  id
+  id,
+  readOnly
 }) => {
   var _a, _b, _c;
   const validField = field;
   const deprecatedField = field;
-  useEffect6(() => {
+  useEffect8(() => {
     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."
@@ -1478,7 +1900,8 @@ var ExternalField = ({
       }),
       onChange,
       value,
-      id
+      id,
+      readOnly
     }
   ) });
 };
@@ -1659,13 +2082,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__ */ jsx19(
           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) => {
@@ -1686,7 +2110,7 @@ var ObjectField = ({
 // lib/use-safe-id.ts
 init_react_import();
-import React2, { useState as useState7 } from "react";
+import React2, { useState as useState9 } from "react";
 // lib/generate-id.ts
 init_react_import();
@@ -1698,7 +2122,7 @@ var useSafeId = () => {
   if (typeof React2.useId !== "undefined") {
     return React2.useId();
   }
-  const [id] = useState7(generateId());
+  const [id] = useState9(generateId());
   return id;
 };
@@ -1795,7 +2219,7 @@ function AutoFieldInternal(props) {
 }
 function AutoFieldPrivate(props) {
   const { value, onChange } = props;
-  const [localValue, setLocalValue] = useState8(value);
+  const [localValue, setLocalValue] = useState10(value);
   const onChangeDb = useDebouncedCallback(
     (val, ui) => {
       onChange(val, ui);
@@ -1803,11 +2227,11 @@ function AutoFieldPrivate(props) {
     50,
     { leading: true }
   );
-  const onChangeLocal = useCallback3((val, ui) => {
+  const onChangeLocal = useCallback5((val, ui) => {
     setLocalValue(val);
     onChangeDb(val, ui);
   }, []);
-  useEffect7(() => {
+  useEffect9(() => {
     setLocalValue(value);
   }, [value]);
   const localProps = {
@@ -1826,7 +2250,7 @@ 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
 import {
@@ -1911,14 +2335,14 @@ Drawer.Item = DrawerItem;
 // components/DropZone/index.tsx
 init_react_import();
-import { useContext as useContext3, useEffect as useEffect10 } from "react";
+import { useContext as useContext3, useEffect as useEffect12 } from "react";
 // components/DraggableComponent/index.tsx
 init_react_import();
 import {
-  useEffect as useEffect9,
+  useEffect as useEffect11,
   useMemo as useMemo4,
-  useState as useState10
+  useState as useState12
 } from "react";
 import { Draggable as Draggable2 } from "@measured/dnd";
@@ -1928,10 +2352,10 @@ var styles_module_default11 = { "DraggableComponent": "_DraggableComponent_1bhad
 // lib/use-modifier-held.ts
 init_react_import();
-import { useEffect as useEffect8, useState as useState9 } from "react";
+import { useEffect as useEffect10, useState as useState11 } from "react";
 var useModifierHeld = (modifier) => {
-  const [modifierHeld, setModifierHeld] = useState9(false);
-  useEffect8(() => {
+  const [modifierHeld, setModifierHeld] = useState11(false);
+  useEffect10(() => {
     function downHandler({ key }) {
       if (key === modifier) {
         setModifierHeld(true);
@@ -1969,90 +2393,6 @@ init_react_import();
 import { Fragment as Fragment9, jsx as jsx22 } from "react/jsx-runtime";
 var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx22(Fragment9, { 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
 import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
 var getClassName17 = get_class_name_factory_default("DraggableComponent", styles_module_default11);
@@ -2063,7 +2403,7 @@ var actionsRight = space;
 var DefaultActionBar = ({
   label,
   children
-}) => /* @__PURE__ */ jsx23(ActionBar, { label, children: /* @__PURE__ */ jsx23(DefaultOverride, { children }) });
+}) => /* @__PURE__ */ jsx23(ActionBar, { label, children: /* @__PURE__ */ jsx23(ActionBar.Group, { children: /* @__PURE__ */ jsx23(DefaultOverride, { children }) }) });
 var DraggableComponent = ({
   children,
   id,
@@ -2086,21 +2426,12 @@ 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" ? Draggable2 : DefaultDraggable;
-  useEffect9(onMount, []);
-  const [disableSecondaryAnimation, setDisableSecondaryAnimation] = useState10(false);
-  useEffect9(() => {
+  useEffect11(onMount, []);
+  const [disableSecondaryAnimation, setDisableSecondaryAnimation] = useState12(false);
+  useEffect11(() => {
     if (isIos()) {
       setDisableSecondaryAnimation(true);
     }
@@ -2109,11 +2440,8 @@ var DraggableComponent = ({
     () => overrides.actionBar || DefaultActionBar,
     [overrides.actionBar]
   );
-  const permissions = selectedItem && getPermissions({
-    selectedItem,
-    globalPermissions: globalPermissions || {},
-    config,
-    appState: state
+  const permissions = getPermissions({
+    item: selectedItem
   });
   return /* @__PURE__ */ jsx23(
     El,
@@ -2136,7 +2464,7 @@ var DraggableComponent = ({
             indicativeHover
           }),
           style: __spreadProps(__spreadValues(__spreadValues({}, style), provided.draggableProps.style), {
-            cursor: isModifierHeld || isDragDisabled ? "initial" : "grab"
+            cursor: isModifierHeld || isDragDisabled ? "pointer" : "grab"
           }),
           onMouseOver,
           onMouseOut,
@@ -2163,8 +2491,8 @@ var DraggableComponent = ({
                       right: actionsRight / zoomConfig.zoom
                     },
                     children: /* @__PURE__ */ jsxs11(CustomActionBar, { label, children: [
-                      permissions && permissions.duplicate && /* @__PURE__ */ jsx23(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ jsx23(Copy, { size: 16 }) }),
-                      permissions && permissions.delete && /* @__PURE__ */ jsx23(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ jsx23(Trash, { size: 16 }) })
+                      permissions.duplicate && /* @__PURE__ */ jsx23(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ jsx23(Copy, { size: 16 }) }),
+                      permissions.delete && /* @__PURE__ */ jsx23(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ jsx23(Trash, { size: 16 }) })
                     ] })
                   }
                 )
@@ -2188,8 +2516,8 @@ var styles_module_default12 = { "DropZone": "_DropZone_djoti_1", "DropZone-conte
 init_react_import();
 import {
   createContext as createContext3,
-  useCallback as useCallback4,
-  useState as useState11
+  useCallback as useCallback6,
+  useState as useState13
 } from "react";
 import { useDebounce } from "use-debounce";
@@ -2212,24 +2540,24 @@ var DropZoneProvider = ({
   children,
   value
 }) => {
-  const [hoveringArea, setHoveringArea] = useState11(null);
-  const [hoveringZone, setHoveringZone] = useState11(
+  const [hoveringArea, setHoveringArea] = useState13(null);
+  const [hoveringZone, setHoveringZone] = useState13(
     rootDroppableId
   );
-  const [hoveringComponent, setHoveringComponent] = useState11();
+  const [hoveringComponent, setHoveringComponent] = useState13();
   const [hoveringAreaDb] = useDebounce(hoveringArea, 75, { leading: false });
-  const [areasWithZones, setAreasWithZones] = useState11(
+  const [areasWithZones, setAreasWithZones] = useState13(
     {}
   );
-  const [activeZones, setActiveZones] = useState11({});
+  const [activeZones, setActiveZones] = useState13({});
   const { dispatch = null } = value ? value : {};
-  const registerZoneArea = useCallback4(
+  const registerZoneArea = useCallback6(
     (area) => {
       setAreasWithZones((latest) => __spreadProps(__spreadValues({}, latest), { [area]: true }));
     },
     [setAreasWithZones]
   );
-  const registerZone = useCallback4(
+  const registerZone = useCallback6(
     (zoneCompound) => {
       if (!dispatch) {
         return;
@@ -2242,7 +2570,7 @@ var DropZoneProvider = ({
     },
     [setActiveZones, dispatch]
   );
-  const unregisterZone = useCallback4(
+  const unregisterZone = useCallback6(
     (zoneCompound) => {
       if (!dispatch) {
         return;
@@ -2257,8 +2585,8 @@ var DropZoneProvider = ({
     },
     [setActiveZones, dispatch]
   );
-  const [pathData, setPathData] = useState11();
-  const registerPath = useCallback4(
+  const [pathData, setPathData] = useState13();
+  const registerPath = useCallback6(
     (selector) => {
       if (!(value == null ? void 0 : value.data)) {
         return;
@@ -2283,7 +2611,7 @@ var DropZoneProvider = ({
     },
     [value, setPathData]
   );
-  const [zoneWillDrag, setZoneWillDrag] = useState11("");
+  const [zoneWillDrag, setZoneWillDrag] = useState13("");
   return /* @__PURE__ */ jsx24(Fragment10, { children: value && /* @__PURE__ */ jsx24(
     dropZoneContext.Provider,
     {
@@ -2334,12 +2662,12 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
   } = ctx || {};
   let content = data.content || [];
   let zoneCompound = rootDroppableId;
-  useEffect10(() => {
+  useEffect12(() => {
     if (areaId && registerZoneArea) {
       registerZoneArea(areaId);
     }
   }, [areaId]);
-  useEffect10(() => {
+  useEffect12(() => {
     if (ctx == null ? void 0 : ctx.registerZone) {
       ctx == null ? void 0 : ctx.registerZone(zoneCompound);
     }
@@ -2466,14 +2794,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__ */ jsxs12(
                       "div",
@@ -2498,7 +2823,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,
@@ -2640,16 +2965,16 @@ function DropZone(props) {
 // components/Puck/index.tsx
 init_react_import();
 import {
-  useCallback as useCallback10,
-  useEffect as useEffect17,
+  useCallback as useCallback11,
+  useEffect as useEffect18,
   useMemo as useMemo13,
   useReducer,
-  useState as useState20
+  useState as useState21
 } from "react";
 // lib/use-placeholder-style.ts
 init_react_import();
-import { useState as useState12 } from "react";
+import { useState as useState14 } from "react";
 // lib/get-frame.ts
 init_react_import();
@@ -2664,7 +2989,7 @@ var getFrame = () => {
 // lib/use-placeholder-style.ts
 var usePlaceholderStyle = () => {
   const queryAttr = "data-rfd-drag-handle-draggable-id";
-  const [placeholderStyle, setPlaceholderStyle] = useState12();
+  const [placeholderStyle, setPlaceholderStyle] = useState14();
   const onDragStartOrUpdate = (draggedItem) => {
     var _a;
     const draggableId = draggedItem.draggableId;
@@ -2806,6 +3131,7 @@ var SidebarSection = ({
             /* @__PURE__ */ jsx26(
               "button",
               {
+                type: "button",
                 className: getClassName19("breadcrumbLabel"),
                 onClick: () => setUi({ itemSelector: breadcrumb.selector }),
                 children: breadcrumb.label
@@ -2846,7 +3172,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) => {
@@ -2860,7 +3186,7 @@ var reduceRelatedZones = (item, data, fn) => {
       {}
     )
   });
-};
+}
 var findRelatedByZoneId = (zoneId, data) => {
   const [zoneParentId] = getZoneId(zoneId);
   return (data.zones[zoneId] || []).reduce(
@@ -2897,7 +3223,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) })
@@ -2912,7 +3238,7 @@ var duplicateRelatedZones = (item, data, newId) => {
       [`${newId}:${zoneId}`]: dupedZone
     });
   });
-};
+}
 // reducer/data.ts
 var zoneCache = {};
@@ -2936,7 +3262,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 || {}), {
@@ -2962,8 +3288,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);
   }
@@ -3105,278 +3431,88 @@ 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();
-import { useCallback as useCallback5, useEffect as useEffect11, useState as useState13 } from "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 (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;
 };
-// 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] = useState13({
-    resolverKey: 0,
-    newAppState: appState
-  });
-  const [componentState, setComponentState] = useState13({});
-  const deferredSetStates = {};
-  const setComponentLoading = useCallback5(
-    (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);
-  });
-  useEffect11(() => {
-    runResolvers();
-  }, [resolverKey]);
-  const resolveData = useCallback5((newAppState2 = appState) => {
-    setResolverState((curr) => ({
-      resolverKey: curr.resolverKey + 1,
-      newAppState: newAppState2
-    }));
-  }, []);
-  return {
-    resolveData,
-    componentState
-  };
+  }
+  return appState;
 };
 // components/MenuBar/index.tsx
@@ -3389,15 +3525,14 @@ var styles_module_default14 = { "MenuBar": "_MenuBar_8pf8c_1", "MenuBar--menuOpe
 // components/MenuBar/index.tsx
 import { Fragment as Fragment12, jsx as jsx27, jsxs as jsxs14 } from "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();
@@ -3428,7 +3563,7 @@ var MenuBar = ({
       ] })
     }
   );
-};
+}
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css#css-module
 init_react_import();
@@ -3442,7 +3577,7 @@ init_react_import();
 var styles_module_default16 = { "PuckFields": "_PuckFields_jp3lw_1", "PuckFields--isLoading": "_PuckFields--isLoading_jp3lw_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_jp3lw_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_jp3lw_25" };
 // components/Puck/components/Fields/index.tsx
-import { useCallback as useCallback6, useEffect as useEffect12, useMemo as useMemo6, useState as useState14 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect13, useMemo as useMemo6, useState as useState15 } from "react";
 import { Fragment as Fragment13, jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
 var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
 var defaultPageFields = {
@@ -3461,15 +3596,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] = useState14({});
-  const [resolvedFields, setResolvedFields] = useState14(defaultFields || {});
-  const [fieldsLoading, setFieldsLoading] = useState14(false);
+  const [lastSelectedData, setLastSelectedData] = useState15({});
+  const [resolvedFields, setResolvedFields] = useState15(defaultFields || {});
+  const [fieldsLoading, setFieldsLoading] = useState15(false);
   const defaultResolveFields = (_componentData, _params) => defaultFields;
   const componentData = selectedItem ? selectedItem : { props: rootProps, readOnly: data.root.readOnly };
-  const resolveFields = useCallback6(
+  const resolveFields = useCallback7(
     (..._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)) {
@@ -3502,13 +3637,13 @@ var useResolvedFields = () => {
     }),
     [data, config, componentData, selectedItem, resolvedFields, state]
   );
-  useEffect12(() => {
+  useEffect13(() => {
     setFieldsLoading(true);
     resolveFields(defaultFields).then((fields) => {
       setResolvedFields(fields || {});
       setFieldsLoading(false);
     });
-  }, [data, defaultFields]);
+  }, [data, defaultFields, state.ui.itemSelector]);
   return [resolvedFields, fieldsLoading];
 };
 var Fields = () => {
@@ -3520,13 +3655,13 @@ 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 = useMemo6(() => overrides.fields || DefaultFields, [overrides]);
@@ -3606,10 +3741,7 @@ var Fields = () => {
           if (selectedItem && itemSelector) {
             const { readOnly = {} } = selectedItem;
             const { edit } = getPermissions({
-              selectedItem,
-              config,
-              globalPermissions: globalPermissions || {},
-              appState: state
+              item: selectedItem
             });
             return /* @__PURE__ */ jsx28(
               AutoFieldPrivate,
@@ -3625,13 +3757,16 @@ var Fields = () => {
             );
           } else {
             const readOnly = data.root.readOnly || {};
+            const { edit } = getPermissions({
+              root: true
+            });
             return /* @__PURE__ */ jsx28(
               AutoFieldPrivate,
               {
                 field,
                 name: fieldName,
                 id: `root_${fieldName}`,
-                readOnly: readOnly[fieldName],
+                readOnly: !edit || readOnly[fieldName],
                 value: rootProps[fieldName],
                 onChange
               },
@@ -3650,7 +3785,7 @@ init_react_import();
 // lib/use-component-list.tsx
 init_react_import();
-import { useEffect as useEffect13, useState as useState15 } from "react";
+import { useEffect as useEffect14, useState as useState16 } from "react";
 // components/ComponentList/index.tsx
 init_react_import();
@@ -3667,12 +3802,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__ */ jsx29(
     Drawer.Item,
@@ -3696,6 +3828,7 @@ var ComponentList = ({
     title && /* @__PURE__ */ jsxs16(
       "button",
       {
+        type: "button",
         className: getClassName22("title"),
         onClick: () => setUi({
           componentList: __spreadProps(__spreadValues({}, state.ui.componentList), {
@@ -3730,8 +3863,8 @@ ComponentList.Item = ComponentListItem;
 // lib/use-component-list.tsx
 import { jsx as jsx30 } from "react/jsx-runtime";
 var useComponentList = (config, ui) => {
-  const [componentList, setComponentList] = useState15();
-  useEffect13(() => {
+  const [componentList, setComponentList] = useState16();
+  useEffect14(() => {
     var _a, _b, _c;
     if (Object.keys(ui.componentList).length > 0) {
       const matchedComponents = [];
@@ -3811,16 +3944,16 @@ var Components = () => {
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-import { useCallback as useCallback7, useMemo as useMemo8 } from "react";
+import { useCallback as useCallback8, useMemo as useMemo8 } from "react";
 // components/AutoFrame/index.tsx
 init_react_import();
 import {
   createContext as createContext4,
   useContext as useContext5,
-  useEffect as useEffect14,
-  useRef,
-  useState as useState16
+  useEffect as useEffect15,
+  useRef as useRef2,
+  useState as useState17
 } from "react";
 import hash from "object-hash";
 import { createPortal as createPortal2 } from "react-dom";
@@ -3867,7 +4000,7 @@ var CopyHostStyles = ({
   onStylesLoaded = () => null
 }) => {
   const { document: doc, window: win } = useFrame();
-  useEffect14(() => {
+  useEffect15(() => {
     if (!win || !doc) {
       return () => {
       };
@@ -4042,11 +4175,11 @@ function AutoFrame(_a) {
     "id",
     "onStylesLoaded"
   ]);
-  const [loaded, setLoaded] = useState16(false);
-  const [ctx, setCtx] = useState16({});
-  const ref = useRef(null);
-  const [mountTarget, setMountTarget] = useState16();
-  useEffect14(() => {
+  const [loaded, setLoaded] = useState17(false);
+  const [ctx, setCtx] = useState17({});
+  const ref = useRef2(null);
+  const [mountTarget, setMountTarget] = useState17();
+  useEffect15(() => {
     var _a2;
     if (ref.current) {
       setCtx({
@@ -4082,7 +4215,7 @@ import { Fragment as Fragment15, jsx as jsx33 } from "react/jsx-runtime";
 var getClassName23 = get_class_name_factory_default("PuckPreview", styles_module_default18);
 var Preview = ({ id = "puck-preview" }) => {
   const { config, dispatch, state, setStatus, iframe, overrides } = useAppContext();
-  const Page = useCallback7(
+  const Page = useCallback8(
     (pageProps) => {
       var _a, _b;
       return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadValues({
@@ -4246,6 +4379,7 @@ var LayerTree = ({
               /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs17(
                 "button",
                 {
+                  type: "button",
                   className: getClassNameLayer("clickable"),
                   onClick: () => {
                     if (isSelected) {
@@ -4312,13 +4446,13 @@ var LayerTree = ({
 };
 // components/Puck/components/Outline/index.tsx
-import { useCallback as useCallback8, useMemo as useMemo9 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo9 } from "react";
 import { Fragment as Fragment17, jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
 var Outline = () => {
   const { dispatch, state, overrides, config } = useAppContext();
   const { data, ui } = state;
   const { itemSelector } = ui;
-  const setItemSelector = useCallback8(
+  const setItemSelector = useCallback9(
     (newItemSelector) => {
       dispatch({
         type: "setUi",
@@ -4373,14 +4507,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();
     }
   };
@@ -4388,7 +4522,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);
   };
@@ -4397,7 +4531,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);
     }
@@ -4416,19 +4550,19 @@ function usePuckHistory({
 // lib/use-history-store.ts
 init_react_import();
-import { useState as useState17 } from "react";
+import { useState as useState18 } from "react";
 import { useDebouncedCallback as useDebouncedCallback2 } from "use-debounce";
-var EMPTY_HISTORY_INDEX = -1;
+var EMPTY_HISTORY_INDEX = 0;
 function useHistoryStore(initialHistory) {
   var _a, _b;
-  const [histories, setHistories] = useState17(
+  const [histories, setHistories] = useState18(
     (_a = initialHistory == null ? void 0 : initialHistory.histories) != null ? _a : []
   );
   const updateHistories = (histories2) => {
     setHistories(histories2);
     setIndex(histories2.length - 1);
   };
-  const [index, setIndex] = useState17(
+  const [index, setIndex] = useState18(
     (_b = initialHistory == null ? void 0 : initialHistory.index) != null ? _b : EMPTY_HISTORY_INDEX
   );
   const hasPast = index > EMPTY_HISTORY_INDEX;
@@ -4436,9 +4570,9 @@ function useHistoryStore(initialHistory) {
   const currentHistory = histories[index];
   const nextHistory = hasFuture ? histories[index + 1] : null;
   const prevHistory = hasPast ? histories[index - 1] : null;
-  const record = useDebouncedCallback2((data) => {
+  const record = useDebouncedCallback2((state) => {
     const history = {
-      data,
+      state,
       id: generateId("history")
     };
     updateHistories([...histories.slice(0, index + 1), history]);
@@ -4589,16 +4723,16 @@ var getBox = function getBox2(el) {
 // components/Puck/components/Canvas/index.tsx
 import {
-  useCallback as useCallback9,
-  useEffect as useEffect16,
+  useCallback as useCallback10,
+  useEffect as useEffect17,
   useMemo as useMemo11,
-  useRef as useRef2,
-  useState as useState19
+  useRef as useRef3,
+  useState as useState20
 } from "react";
 // components/ViewportControls/index.tsx
 init_react_import();
-import { useEffect as useEffect15, useMemo as useMemo10, useState as useState18 } from "react";
+import { useEffect as useEffect16, useMemo as useMemo10, useState as useState19 } from "react";
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
 init_react_import();
@@ -4621,8 +4755,8 @@ var ViewportButton = ({
   onClick
 }) => {
   const { state } = useAppContext();
-  const [isActive, setIsActive] = useState18(false);
-  useEffect15(() => {
+  const [isActive, setIsActive] = useState19(false);
+  useEffect16(() => {
     setIsActive(width === state.ui.viewports.current.width);
   }, [width, state.ui.viewports.current.width]);
   return /* @__PURE__ */ jsx36("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx36(
@@ -4741,7 +4875,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();
@@ -4781,8 +4915,8 @@ var Canvas = () => {
   const { status, iframe } = useAppContext();
   const { dispatch, state, overrides, setUi, zoomConfig, setZoomConfig } = useAppContext();
   const { ui } = state;
-  const frameRef = useRef2(null);
-  const [showTransition, setShowTransition] = useState19(false);
+  const frameRef = useRef3(null);
+  const [showTransition, setShowTransition] = useState20(false);
   const defaultRender = useMemo11(() => {
     const PuckDefault = ({ children }) => /* @__PURE__ */ jsx37(Fragment18, { children });
     return PuckDefault;
@@ -4791,7 +4925,7 @@ var Canvas = () => {
     () => overrides.preview || defaultRender,
     [overrides]
   );
-  const getFrameDimensions = useCallback9(() => {
+  const getFrameDimensions = useCallback10(() => {
     if (frameRef.current) {
       const frame = frameRef.current;
       const box = getBox(frame);
@@ -4799,7 +4933,7 @@ var Canvas = () => {
     }
     return { width: 0, height: 0 };
   }, [frameRef]);
-  const resetAutoZoom = useCallback9(
+  const resetAutoZoom = useCallback10(
     (ui2 = state.ui) => {
       if (frameRef.current) {
         setZoomConfig(
@@ -4809,11 +4943,11 @@ var Canvas = () => {
     },
     [frameRef, zoomConfig, state.ui]
   );
-  useEffect16(() => {
+  useEffect17(() => {
     setShowTransition(false);
     resetAutoZoom();
   }, [frameRef, ui.leftSideBarVisible, ui.rightSideBarVisible]);
-  useEffect16(() => {
+  useEffect17(() => {
     const { height: frameHeight } = getFrameDimensions();
     if (ui.viewports.current.height === "auto") {
       setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
@@ -4821,7 +4955,13 @@ var Canvas = () => {
       }));
     }
   }, [zoomConfig.zoom]);
-  useEffect16(() => {
+  useEffect17(() => {
+    if (ZOOM_ON_CHANGE) {
+      setShowTransition(true);
+      resetAutoZoom(ui);
+    }
+  }, [ui.viewports.current.width]);
+  useEffect17(() => {
     const observer = new ResizeObserver(() => {
       setShowTransition(false);
       resetAutoZoom();
@@ -4833,11 +4973,18 @@ var Canvas = () => {
       observer.disconnect();
     };
   }, []);
+  const [showLoader, setShowLoader] = useState20(false);
+  useEffect17(() => {
+    setTimeout(() => {
+      setShowLoader(true);
+    }, 500);
+  }, []);
   return /* @__PURE__ */ jsxs20(
     "div",
     {
       className: getClassName26({
-        ready: status === "READY" || !iframe.enabled
+        ready: status === "READY" || !iframe.enabled || !iframe.waitForStyles,
+        showLoader
       }),
       onClick: () => dispatch({
         type: "setUi",
@@ -4870,21 +5017,24 @@ var Canvas = () => {
             }
           }
         ) }),
-        /* @__PURE__ */ jsx37("div", { className: getClassName26("inner"), ref: frameRef, children: /* @__PURE__ */ jsx37(
-          "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__ */ jsx37(CustomPreview, { children: /* @__PURE__ */ jsx37(Preview, {}) })
-          }
-        ) })
+        /* @__PURE__ */ jsxs20("div", { className: getClassName26("inner"), ref: frameRef, children: [
+          /* @__PURE__ */ jsx37(
+            "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__ */ jsx37(CustomPreview, { children: /* @__PURE__ */ jsx37(Preview, {}) })
+            }
+          ),
+          /* @__PURE__ */ jsx37("div", { className: getClassName26("loader"), children: /* @__PURE__ */ jsx37(Loader, { size: 24 }) })
+        ] })
       ]
     }
   );
@@ -4909,7 +5059,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,
@@ -4975,7 +5128,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,
@@ -4988,18 +5141,16 @@ function Puck({
   headerTitle,
   headerPath,
   viewports = defaultViewports,
-  iframe = {
-    enabled: true
-  },
+  iframe: _iframe,
   dnd,
-  initialHistory
+  initialHistory: _initialHistory
 }) {
   var _a;
-  const historyStore = useHistoryStore(initialHistory);
-  const [reducer] = useState20(
-    () => createReducer({ config, record: historyStore.record, onAction })
-  );
-  const [initialAppState] = useState20(() => {
+  const iframe = __spreadValues({
+    enabled: true,
+    waitForStyles: true
+  }, _iframe);
+  const [generatedAppState] = useState21(() => {
     var _a2, _b, _c, _d, _e, _f, _g, _h, _i;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
@@ -5017,14 +5168,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)) {
@@ -5057,20 +5208,36 @@ function Puck({
       })
     });
   });
+  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] = useState21(
+    () => createReducer({
+      config,
+      record: historyStore.record,
+      onAction
+    })
+  );
   const [appState, dispatch] = useReducer(
     reducer,
     flushZones(initialAppState)
   );
   const { data, ui } = appState;
   const history = usePuckHistory({ dispatch, initialAppState, historyStore });
-  const { resolveData, componentState } = useResolvedData(
-    appState,
-    config,
-    dispatch
-  );
-  const [menuOpen, setMenuOpen] = useState20(false);
+  const [menuOpen, setMenuOpen] = useState21(false);
   const { itemSelector, leftSideBarVisible, rightSideBarVisible } = ui;
-  const setItemSelector = useCallback10(
+  const setItemSelector = useCallback11(
     (newItemSelector) => {
       if (newItemSelector === itemSelector) return;
       dispatch({
@@ -5082,13 +5249,13 @@ function Puck({
     [itemSelector]
   );
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
-  useEffect17(() => {
+  useEffect18(() => {
     if (onChange) onChange(data);
   }, [data]);
   const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
-  const [draggedItem, setDraggedItem] = useState20();
+  const [draggedItem, setDraggedItem] = useState21();
   const rootProps = data.root.props || data.root;
-  const toggleSidebars = useCallback10(
+  const toggleSidebars = useCallback11(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -5102,7 +5269,7 @@ function Puck({
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  useEffect17(() => {
+  useEffect18(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -5168,8 +5335,8 @@ function Puck({
     () => loadedOverrides.headerActions || defaultHeaderActionsRender,
     [loadedOverrides]
   );
-  const [mounted, setMounted] = useState20(false);
-  useEffect17(() => {
+  const [mounted, setMounted] = useState21(false);
+  useEffect18(() => {
     setMounted(true);
   }, []);
   const selectedComponentConfig = selectedItem && config.components[selectedItem.type];
@@ -5182,8 +5349,6 @@ function Puck({
           state: appState,
           dispatch,
           config,
-          componentState,
-          resolveData,
           plugins: plugins || [],
           overrides: loadedOverrides,
           history,
@@ -5195,9 +5360,11 @@ function Puck({
             duplicate: true,
             insert: true,
             edit: true
-          }, permissions)
+          }, permissions),
+          getPermissions: () => ({}),
+          refreshPermissions: () => null
         },
-        children: /* @__PURE__ */ jsx38(
+        children: /* @__PURE__ */ jsx38(appContext.Consumer, { children: ({ resolveData }) => /* @__PURE__ */ jsx38(
           DragDropContext,
           {
             autoScrollerOptions: { disabled: dnd == null ? void 0 : dnd.disableAutoScroll },
@@ -5287,90 +5454,115 @@ function Puck({
                             }
                           ) }) }),
                           children: /* @__PURE__ */ jsx38("header", { className: getLayoutClassName("header"), children: /* @__PURE__ */ jsxs21("div", { className: getLayoutClassName("headerInner"), children: [
-                            /* @__PURE__ */ jsxs21("div", { className: getLayoutClassName("headerToggle"), children: [
-                              /* @__PURE__ */ jsx38(
-                                "div",
-                                {
-                                  className: getLayoutClassName(
-                                    "leftSideBarToggle"
-                                  ),
-                                  children: /* @__PURE__ */ jsx38(
-                                    IconButton,
+                            /* @__PURE__ */ jsxs21(
+                              "div",
+                              {
+                                className: getLayoutClassName("headerToggle"),
+                                children: [
+                                  /* @__PURE__ */ jsx38(
+                                    "div",
                                     {
-                                      onClick: () => {
-                                        toggleSidebars("left");
-                                      },
-                                      title: "Toggle left sidebar",
-                                      children: /* @__PURE__ */ jsx38(PanelLeft, { focusable: "false" })
+                                      className: getLayoutClassName(
+                                        "leftSideBarToggle"
+                                      ),
+                                      children: /* @__PURE__ */ jsx38(
+                                        IconButton,
+                                        {
+                                          onClick: () => {
+                                            toggleSidebars("left");
+                                          },
+                                          title: "Toggle left sidebar",
+                                          children: /* @__PURE__ */ jsx38(PanelLeft, { focusable: "false" })
+                                        }
+                                      )
                                     }
-                                  )
-                                }
-                              ),
-                              /* @__PURE__ */ jsx38(
-                                "div",
-                                {
-                                  className: getLayoutClassName(
-                                    "rightSideBarToggle"
                                   ),
-                                  children: /* @__PURE__ */ jsx38(
-                                    IconButton,
+                                  /* @__PURE__ */ jsx38(
+                                    "div",
                                     {
-                                      onClick: () => {
-                                        toggleSidebars("right");
-                                      },
-                                      title: "Toggle right sidebar",
-                                      children: /* @__PURE__ */ jsx38(PanelRight, { focusable: "false" })
+                                      className: getLayoutClassName(
+                                        "rightSideBarToggle"
+                                      ),
+                                      children: /* @__PURE__ */ jsx38(
+                                        IconButton,
+                                        {
+                                          onClick: () => {
+                                            toggleSidebars("right");
+                                          },
+                                          title: "Toggle right sidebar",
+                                          children: /* @__PURE__ */ jsx38(PanelRight, { focusable: "false" })
+                                        }
+                                      )
                                     }
                                   )
-                                }
-                              )
-                            ] }),
-                            /* @__PURE__ */ jsx38("div", { className: getLayoutClassName("headerTitle"), children: /* @__PURE__ */ jsxs21(Heading, { rank: "2", size: "xs", children: [
-                              headerTitle || rootProps.title || "Page",
-                              headerPath && /* @__PURE__ */ jsxs21(Fragment19, { children: [
-                                " ",
-                                /* @__PURE__ */ jsx38(
-                                  "code",
-                                  {
-                                    className: getLayoutClassName("headerPath"),
-                                    children: headerPath
-                                  }
-                                )
-                              ] })
-                            ] }) }),
-                            /* @__PURE__ */ jsxs21("div", { className: getLayoutClassName("headerTools"), children: [
-                              /* @__PURE__ */ jsx38("div", { className: getLayoutClassName("menuButton"), children: /* @__PURE__ */ jsx38(
-                                IconButton,
-                                {
-                                  onClick: () => {
-                                    return setMenuOpen(!menuOpen);
-                                  },
-                                  title: "Toggle menu bar",
-                                  children: menuOpen ? /* @__PURE__ */ jsx38(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx38(ChevronDown, { focusable: "false" })
-                                }
-                              ) }),
-                              /* @__PURE__ */ jsx38(
-                                MenuBar,
-                                {
-                                  appState,
-                                  data,
-                                  dispatch,
-                                  onPublish,
-                                  menuOpen,
-                                  renderHeaderActions: () => /* @__PURE__ */ jsx38(CustomHeaderActions, { children: /* @__PURE__ */ jsx38(
-                                    Button,
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ jsx38(
+                              "div",
+                              {
+                                className: getLayoutClassName("headerTitle"),
+                                children: /* @__PURE__ */ jsxs21(Heading, { rank: "2", size: "xs", children: [
+                                  headerTitle || rootProps.title || "Page",
+                                  headerPath && /* @__PURE__ */ jsxs21(Fragment19, { children: [
+                                    " ",
+                                    /* @__PURE__ */ jsx38(
+                                      "code",
+                                      {
+                                        className: getLayoutClassName(
+                                          "headerPath"
+                                        ),
+                                        children: headerPath
+                                      }
+                                    )
+                                  ] })
+                                ] })
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs21(
+                              "div",
+                              {
+                                className: getLayoutClassName("headerTools"),
+                                children: [
+                                  /* @__PURE__ */ jsx38(
+                                    "div",
                                     {
-                                      onClick: () => {
-                                        onPublish && onPublish(data);
-                                      },
-                                      icon: /* @__PURE__ */ jsx38(Globe, { size: "14px" }),
-                                      children: "Publish"
+                                      className: getLayoutClassName("menuButton"),
+                                      children: /* @__PURE__ */ jsx38(
+                                        IconButton,
+                                        {
+                                          onClick: () => {
+                                            return setMenuOpen(!menuOpen);
+                                          },
+                                          title: "Toggle menu bar",
+                                          children: menuOpen ? /* @__PURE__ */ jsx38(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx38(ChevronDown, { focusable: "false" })
+                                        }
+                                      )
                                     }
-                                  ) }),
-                                  setMenuOpen
-                                }
-                              )
-                            ] })
+                                  ),
+                                  /* @__PURE__ */ jsx38(
+                                    MenuBar,
+                                    {
+                                      appState,
+                                      dispatch,
+                                      onPublish,
+                                      menuOpen,
+                                      renderHeaderActions: () => /* @__PURE__ */ jsx38(CustomHeaderActions, { children: /* @__PURE__ */ jsx38(
+                                        Button,
+                                        {
+                                          onClick: () => {
+                                            onPublish && onPublish(data);
+                                          },
+                                          icon: /* @__PURE__ */ jsx38(Globe, { size: "14px" }),
+                                          children: "Publish"
+                                        }
+                                      ) }),
+                                      setMenuOpen
+                                    }
+                                  )
+                                ]
+                              }
+                            )
                           ] }) })
                         }
                       ),
@@ -5395,7 +5587,7 @@ function Puck({
               }
             )
           }
-        )
+        ) })
       }
     ),
     /* @__PURE__ */ jsx38("div", { id: "puck-portal-root", className: getClassName27("portal") })
@@ -5544,24 +5736,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,
@@ -5587,11 +5770,13 @@ export {
   DropZoneProvider,
   FieldLabel,
   FieldLabelInternal2 as FieldLabelInternal,
+  Group,
   IconButton,
   Puck,
   Render,
   dropZoneContext,
   migrate,
+  overrideKeys,
   resolveAllData,
   transformProps,
   usePuck