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

package/dist/index.mjs

@@ -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