@measured/puck 0.16.0-canary.2bef00b → 0.16.0-canary.2cce878

package/dist/index.js

@@ -161,6 +161,7 @@ __export(core_exports, {
   Render: () => Render,
   dropZoneContext: () => dropZoneContext,
   migrate: () => migrate,
+  overrideKeys: () => overrideKeys,
   resolveAllData: () => resolveAllData,
   transformProps: () => transformProps,
   usePuck: () => usePuck
@@ -168,46 +169,73 @@ __export(core_exports, {
 module.exports = __toCommonJS(core_exports);
 init_react_import();
 
+// types/API/index.ts
+init_react_import();
+
+// types/API/Viewports.ts
+init_react_import();
+
+// types/index.ts
+init_react_import();
+
+// types/API/Overrides.ts
+init_react_import();
+var overrideKeys = [
+  "header",
+  "headerActions",
+  "fields",
+  "fieldLabel",
+  "components",
+  "componentItem",
+  "outline",
+  "puck",
+  "preview"
+];
+
+// types/AppState.tsx
+init_react_import();
+
 // types/Config.tsx
 init_react_import();
 
-// types/Plugin.ts
+// types/Data.tsx
 init_react_import();
 
 // types/Fields.ts
 init_react_import();
 
+// types/Props.tsx
+init_react_import();
+
+// types/Utils.tsx
+init_react_import();
+
 // components/ActionBar/index.tsx
 init_react_import();
 
 // lib/get-class-name-factory.ts
 init_react_import();
 var import_classnames = __toESM(require_classnames());
-var getClassNameFactory = (rootClass, styles, { baseClass = "" } = {}) => (options = {}) => {
-  let descendant = false;
-  let modifiers = false;
+var getClassNameFactory = (rootClass, styles, config = { baseClass: "" }) => (options = {}) => {
   if (typeof options === "string") {
-    descendant = options;
-  } else if (typeof options === "object") {
-    modifiers = options;
-  }
-  if (descendant) {
+    const descendant = options;
     const style = styles[`${rootClass}-${descendant}`];
     if (style) {
-      return baseClass + styles[`${rootClass}-${descendant}`] || "";
+      return config.baseClass + styles[`${rootClass}-${descendant}`] || "";
     }
     return "";
-  } else if (modifiers) {
+  } else if (typeof options === "object") {
+    const modifiers = options;
     const prefixedModifiers = {};
     for (let modifier in modifiers) {
       prefixedModifiers[styles[`${rootClass}--${modifier}`]] = modifiers[modifier];
     }
     const c = styles[rootClass];
-    return baseClass + (0, import_classnames.default)(__spreadValues({
+    return config.baseClass + (0, import_classnames.default)(__spreadValues({
       [c]: !!c
     }, prefixedModifiers));
   } else {
-    return baseClass + styles[rootClass] || "";
+    return config.baseClass + styles[rootClass] || "";
   }
 };
 var get_class_name_factory_default = getClassNameFactory;
@@ -230,7 +258,16 @@ var Action = ({
   children,
   label,
   onClick
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: getClassName("action"), onClick, title: label, children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "button",
+  {
+    type: "button",
+    className: getClassName("action"),
+    onClick,
+    title: label,
+    children
+  }
+);
 ActionBar.Action = Action;
 
 // components/AutoField/index.tsx
@@ -664,21 +701,22 @@ var setupZone = (data, zoneKey) => {
   if (zoneKey === rootDroppableId) {
     return data;
   }
-  const newData = __spreadValues({}, data);
-  newData.zones = data.zones || {};
+  const newData = __spreadProps(__spreadValues({}, data), {
+    zones: data.zones || {}
+  });
   newData.zones[zoneKey] = newData.zones[zoneKey] || [];
   return newData;
 };
 
 // lib/get-item.ts
-var getItem = (selector, data, dynamicProps = {}) => {
+function getItem(selector, data, dynamicProps = {}) {
   if (!selector.zone || selector.zone === rootDroppableId) {
     const item2 = data.content[selector.index];
     return (item2 == null ? void 0 : item2.props) ? __spreadProps(__spreadValues({}, item2), { props: dynamicProps[item2.props.id] || item2.props }) : void 0;
   }
   const item = setupZone(data, selector.zone).zones[selector.zone][selector.index];
   return (item == null ? void 0 : item.props) ? __spreadProps(__spreadValues({}, item), { props: dynamicProps[item.props.id] || item.props }) : void 0;
-};
+}
 
 // components/ViewportControls/default-viewports.ts
 init_react_import();
@@ -692,7 +730,7 @@ var defaultViewports = [
 var import_ua_parser_js = require("ua-parser-js");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var defaultAppState = {
-  data: { content: [], root: { props: {} } },
+  data: { content: [], root: {} },
   ui: {
     leftSideBarVisible: true,
     rightSideBarVisible: true,
@@ -1427,6 +1465,7 @@ var ExternalInput = ({
           value && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "button",
             {
+              type: "button",
               className: getClassName10("detachButton"),
               onClick: () => {
                 onChange(null);
@@ -1483,7 +1522,7 @@ var ExternalInput = ({
                     }
                   ) })
                 ] })
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Heading, { rank: 2, size: "xs", children: field.placeholder || "Select data" }) }),
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Heading, { rank: "2", size: "xs", children: field.placeholder || "Select data" }) }),
               /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: getClassNameModal("grid"), children: [
                 hasFilterFields && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassNameModal("filters"), children: hasFilterFields && Object.keys(filterFields).map((fieldName) => {
                   const filterField = filterFields[fieldName];
@@ -2898,6 +2937,7 @@ var SidebarSection = ({
             /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               "button",
               {
+                type: "button",
                 className: getClassName19("breadcrumbLabel"),
                 onClick: () => setUi({ itemSelector: breadcrumb.selector }),
                 children: breadcrumb.label
@@ -2905,7 +2945,7 @@ var SidebarSection = ({
             ),
             /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ChevronRight, { size: 16 })
           ] }, i)) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: getClassName19("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Heading, { rank: 2, size: "xs", children: title }) })
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: getClassName19("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Heading, { rank: "2", size: "xs", children: title }) })
         ] }) }),
         /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: getClassName19("content"), children }),
         isLoading && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: getClassName19("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Loader, { size: 32 }) })
@@ -2938,7 +2978,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) => {
@@ -2952,28 +2992,34 @@ var reduceRelatedZones = (item, data, fn) => {
       {}
     )
   });
-};
+}
 var findRelatedByZoneId = (zoneId, data) => {
   const [zoneParentId] = getZoneId(zoneId);
-  return (data.zones[zoneId] || []).reduce((acc, zoneItem) => {
-    const related = findRelatedByItem(zoneItem, data);
-    if (zoneItem.props.id === zoneParentId) {
-      return __spreadProps(__spreadValues(__spreadValues({}, acc), related), { [zoneId]: zoneItem });
-    }
-    return __spreadValues(__spreadValues({}, acc), related);
-  }, {});
+  return (data.zones[zoneId] || []).reduce(
+    (acc, zoneItem) => {
+      const related = findRelatedByItem(zoneItem, data);
+      if (zoneItem.props.id === zoneParentId) {
+        return __spreadProps(__spreadValues(__spreadValues({}, acc), related), { [zoneId]: zoneItem });
+      }
+      return __spreadValues(__spreadValues({}, acc), related);
+    },
+    {}
+  );
 };
 var findRelatedByItem = (item, data) => {
-  return Object.keys(data.zones || {}).reduce((acc, zoneId) => {
-    const [zoneParentId] = getZoneId(zoneId);
-    if (item.props.id === zoneParentId) {
-      const related = findRelatedByZoneId(zoneId, data);
-      return __spreadProps(__spreadValues(__spreadValues({}, acc), related), {
-        [zoneId]: data.zones[zoneId]
-      });
-    }
-    return acc;
-  }, {});
+  return Object.keys(data.zones || {}).reduce(
+    (acc, zoneId) => {
+      const [zoneParentId] = getZoneId(zoneId);
+      if (item.props.id === zoneParentId) {
+        const related = findRelatedByZoneId(zoneId, data);
+        return __spreadProps(__spreadValues(__spreadValues({}, acc), related), {
+          [zoneId]: data.zones[zoneId]
+        });
+      }
+      return acc;
+    },
+    {}
+  );
 };
 var removeRelatedZones = (item, data) => {
   const newData = __spreadValues({}, data);
@@ -2983,7 +3029,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) })
@@ -2998,7 +3044,7 @@ var duplicateRelatedZones = (item, data, newId) => {
       [`${newId}:${zoneId}`]: dupedZone
     });
   });
-};
+}
 
 // reducer/data.ts
 var zoneCache = {};
@@ -3022,7 +3068,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 || {}), {
@@ -3048,8 +3094,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);
   }
@@ -3198,7 +3244,7 @@ var reduceData = (data, action, config) => {
     return __spreadValues(__spreadValues({}, data), action.data(data));
   }
   return data;
-};
+}
 
 // reducer/state.ts
 init_react_import();
@@ -3216,7 +3262,7 @@ var reduceUi = (ui, action) => {
 init_react_import();
 
 // reducer/index.ts
-var storeInterceptor = (reducer, record, onAction) => {
+function storeInterceptor(reducer, record, onAction) {
   return (state, action) => {
     const newAppState = reducer(state, action);
     const isValidType = ![
@@ -3232,7 +3278,7 @@ var storeInterceptor = (reducer, record, onAction) => {
     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);
@@ -3347,28 +3393,30 @@ var applyDynamicProps = (data, dynamicProps, rootData) => {
 // lib/resolve-root-data.ts
 init_react_import();
 var cache3 = {};
-var resolveRootData = (data, config) => __async(void 0, 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;
+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)
+      });
     }
-    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)
-    });
-  }
-  return data.root;
-});
+    return data.root;
+  });
+}
 
 // lib/use-resolved-data.ts
 var useResolvedData = (appState, config, dispatch) => {
@@ -3473,15 +3521,14 @@ var styles_module_default14 = { "MenuBar": "_MenuBar_8pf8c_1", "MenuBar--menuOpe
 // components/MenuBar/index.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var getClassName20 = get_class_name_factory_default("MenuBar", styles_module_default14);
-var MenuBar = ({
+function MenuBar({
   appState,
-  data = { content: [], root: {} },
   dispatch,
   menuOpen = false,
   onPublish,
   renderHeaderActions,
   setMenuOpen
-}) => {
+}) {
   const {
     history: { back, forward, historyStore }
   } = useAppContext();
@@ -3512,7 +3559,7 @@ var MenuBar = ({
       ] })
     }
   );
-};
+}
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css#css-module
 init_react_import();
@@ -3545,9 +3592,7 @@ var useResolvedFields = () => {
   const componentConfig = selectedItem ? config.components[selectedItem.type] : null;
   const defaultFields = selectedItem ? componentConfig == null ? void 0 : componentConfig.fields : rootFields;
   const rootProps = data.root.props || data.root;
-  const [lastSelectedData, setLastSelectedData] = (0, import_react20.useState)(
-    {}
-  );
+  const [lastSelectedData, setLastSelectedData] = (0, import_react20.useState)({});
   const [resolvedFields, setResolvedFields] = (0, import_react20.useState)(defaultFields || {});
   const [fieldsLoading, setFieldsLoading] = (0, import_react20.useState)(false);
   const defaultResolveFields = (_componentData, _params) => defaultFields;
@@ -3710,7 +3755,7 @@ var Fields = () => {
               `${selectedItem.props.id}_${fieldName}`
             );
           } else {
-            const { readOnly = {} } = data.root;
+            const readOnly = data.root.readOnly || {};
             return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               AutoFieldPrivate,
               {
@@ -3782,6 +3827,7 @@ var ComponentList = ({
     title && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
       "button",
       {
+        type: "button",
         className: getClassName22("title"),
         onClick: () => setUi({
           componentList: __spreadProps(__spreadValues({}, state.ui.componentList), {
@@ -3944,13 +3990,17 @@ var defer = (fn) => setTimeout(fn, 0);
 var CopyHostStyles = ({
   children,
   debug = false,
-  onStylesLoaded = () => null
+  onStylesLoaded = () => null,
+  enabled = true
 }) => {
   const { document: doc, window: win } = useFrame();
   (0, import_react23.useEffect)(() => {
     if (!win || !doc) {
-      return () => {
-      };
+      return;
+    }
+    if (!enabled) {
+      onStylesLoaded();
+      return;
     }
     let elements = [];
     const hashes = {};
@@ -4114,13 +4164,15 @@ function AutoFrame(_a) {
     className,
     debug,
     id,
-    onStylesLoaded
+    onStylesLoaded,
+    syncHostStyles = true
   } = _b, props = __objRest(_b, [
     "children",
     "className",
     "debug",
     "id",
-    "onStylesLoaded"
+    "onStylesLoaded",
+    "syncHostStyles"
   ]);
   const [loaded, setLoaded] = (0, import_react23.useState)(false);
   const [ctx, setCtx] = (0, import_react23.useState)({});
@@ -4146,7 +4198,15 @@ function AutoFrame(_a) {
       onLoad: () => {
         setLoaded(true);
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CopyHostStyles, { debug, onStylesLoaded, children: (0, import_react_dom2.createPortal)(children, mountTarget) }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        CopyHostStyles,
+        {
+          debug,
+          onStylesLoaded,
+          enabled: syncHostStyles,
+          children: (0, import_react_dom2.createPortal)(children, mountTarget)
+        }
+      ) })
     })
   );
 }
@@ -4165,13 +4225,9 @@ var Preview = ({ id = "puck-preview" }) => {
   const Page = (0, import_react24.useCallback)(
     (pageProps) => {
       var _a, _b;
-      return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadProps(__spreadValues({
+      return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadValues({
         id: "puck-root"
-      }, pageProps), {
-        editMode: true,
-        // DEPRECATED
-        puck: { renderDropZone: DropZone, isEditing: true }
-      })) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: pageProps.children });
+      }, pageProps)) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: pageProps.children });
     },
     [config.root]
   );
@@ -4194,15 +4250,30 @@ var Preview = ({ id = "puck-preview" }) => {
           onStylesLoaded: () => {
             setStatus("READY");
           },
+          syncHostStyles: iframe.syncHostStyles,
           children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
-            const inner = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Page, __spreadProps(__spreadValues({ dispatch, state }, rootProps), { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DropZone, { zone: rootDroppableId }) }));
+            const inner = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              Page,
+              __spreadProps(__spreadValues({}, rootProps), {
+                puck: { renderDropZone: DropZone, isEditing: true },
+                editMode: true,
+                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DropZone, { zone: rootDroppableId })
+              })
+            );
             if (Frame) {
               return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Frame, { document: document2, children: inner });
             }
             return inner;
           } })
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { id: "preview-frame", className: getClassName23("frame"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Page, __spreadProps(__spreadValues({ dispatch, state }, rootProps), { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DropZone, { zone: rootDroppableId }) })) })
+      ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { id: "preview-frame", className: getClassName23("frame"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        Page,
+        __spreadProps(__spreadValues({}, rootProps), {
+          puck: { renderDropZone: DropZone, isEditing: true },
+          editMode: true,
+          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DropZone, { zone: rootDroppableId })
+        })
+      ) })
     }
   );
 };
@@ -4316,6 +4387,7 @@ var LayerTree = ({
               /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
                 "button",
                 {
+                  type: "button",
                   className: getClassNameLayer("clickable"),
                   onClick: () => {
                     if (isSelected) {
@@ -4805,7 +4877,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();
@@ -4897,11 +4969,18 @@ var Canvas = () => {
       observer.disconnect();
     };
   }, []);
+  const [showLoader, setShowLoader] = (0, import_react29.useState)(false);
+  (0, import_react29.useEffect)(() => {
+    setTimeout(() => {
+      setShowLoader(true);
+    }, 500);
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "div",
     {
       className: getClassName26({
-        ready: status === "READY" || !iframe.enabled
+        ready: status === "READY" || !iframe.enabled,
+        showLoader
       }),
       onClick: () => dispatch({
         type: "setUi",
@@ -4934,21 +5013,24 @@ var Canvas = () => {
             }
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: getClassName26("inner"), ref: frameRef, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-          "div",
-          {
-            className: getClassName26("root"),
-            style: {
-              width: iframe.enabled ? ui.viewports.current.width : "100%",
-              height: zoomConfig.rootHeight,
-              transform: iframe.enabled ? `scale(${zoomConfig.zoom})` : void 0,
-              transition: showTransition ? "width 150ms ease-out, height 150ms ease-out, transform 150ms ease-out" : "",
-              overflow: iframe.enabled ? void 0 : "auto"
-            },
-            suppressHydrationWarning: true,
-            children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Preview, {}) })
-          }
-        ) })
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: getClassName26("inner"), ref: frameRef, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            "div",
+            {
+              className: getClassName26("root"),
+              style: {
+                width: iframe.enabled ? ui.viewports.current.width : "100%",
+                height: zoomConfig.rootHeight,
+                transform: iframe.enabled ? `scale(${zoomConfig.zoom})` : void 0,
+                transition: showTransition ? "width 150ms ease-out, height 150ms ease-out, transform 150ms ease-out" : "",
+                overflow: iframe.enabled ? void 0 : "auto"
+              },
+              suppressHydrationWarning: true,
+              children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Preview, {}) })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: getClassName26("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Loader, { size: 24 }) })
+        ] })
       ]
     }
   );
@@ -4998,7 +5080,8 @@ var loadOverrides = ({
 }) => {
   const collected = __spreadValues({}, overrides);
   plugins == null ? void 0 : plugins.forEach((plugin) => {
-    Object.keys(plugin.overrides).forEach((overridesType) => {
+    Object.keys(plugin.overrides).forEach((_overridesType) => {
+      const overridesType = _overridesType;
       if (overridesType === "fieldTypes") {
         const fieldTypes = plugin.overrides.fieldTypes;
         Object.keys(fieldTypes).forEach((fieldType) => {
@@ -5038,7 +5121,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,
@@ -5051,19 +5134,25 @@ function Puck({
   headerTitle,
   headerPath,
   viewports = defaultViewports,
-  iframe = {
-    enabled: true
-  },
+  iframe: _iframe,
   dnd,
   initialHistory
 }) {
   var _a;
   const historyStore = useHistoryStore(initialHistory);
   const [reducer] = (0, import_react31.useState)(
-    () => createReducer({ config, record: historyStore.record, onAction })
+    () => createReducer({
+      config,
+      record: historyStore.record,
+      onAction
+    })
   );
+  const iframe = __spreadValues({
+    enabled: true,
+    syncHostStyles: true
+  }, _iframe);
   const [initialAppState] = (0, import_react31.useState)(() => {
-    var _a2, _b, _c, _d, _e, _f, _g;
+    var _a2, _b, _c, _d, _e, _f, _g, _h, _i;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
     if (typeof window !== "undefined") {
@@ -5083,20 +5172,20 @@ function Puck({
         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) || viewports[closestViewport].height || "auto",
-              width: ((_d = (_c = initialUi == null ? void 0 : initialUi.viewports) == null ? void 0 : _c.current) == null ? void 0 : _d.width) || viewports[closestViewport].width
+              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 && !((_e = initialData == null ? void 0 : initialData.root) == null ? void 0 : _e.props)) {
+    if (Object.keys((initialData == null ? void 0 : initialData.root) || {}).length > 0 && !((_g = initialData == null ? void 0 : initialData.root) == null ? void 0 : _g.props)) {
       console.error(
         "Warning: Defining props on `root` is deprecated. Please use `root.props`, or republish this page to migrate automatically."
       );
     }
-    const rootProps2 = ((_f = initialData == null ? void 0 : initialData.root) == null ? void 0 : _f.props) || (initialData == null ? void 0 : initialData.root) || {};
-    const defaultedRootProps = __spreadValues(__spreadValues({}, (_g = config.root) == null ? void 0 : _g.defaultProps), rootProps2);
+    const rootProps2 = ((_h = initialData == null ? void 0 : initialData.root) == null ? void 0 : _h.props) || (initialData == null ? void 0 : initialData.root) || {};
+    const defaultedRootProps = __spreadValues(__spreadValues({}, (_i = config.root) == null ? void 0 : _i.defaultProps), rootProps2);
     return __spreadProps(__spreadValues({}, defaultAppState), {
       data: __spreadProps(__spreadValues({}, initialData), {
         root: __spreadProps(__spreadValues({}, initialData == null ? void 0 : initialData.root), { props: defaultedRootProps }),
@@ -5388,7 +5477,7 @@ function Puck({
                                 }
                               )
                             ] }),
-                            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: getLayoutClassName("headerTitle"), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Heading, { rank: 2, size: "xs", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: getLayoutClassName("headerTitle"), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Heading, { rank: "2", size: "xs", children: [
                               headerTitle || rootProps.title || "Page",
                               headerPath && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
                                 " ",
@@ -5416,7 +5505,6 @@ function Puck({
                                 MenuBar,
                                 {
                                   appState,
-                                  data,
                                   dispatch,
                                   onPublish,
                                   menuOpen,
@@ -5472,10 +5560,7 @@ Puck.Preview = Preview;
 // components/Render/index.tsx
 init_react_import();
 var import_jsx_runtime39 = require("react/jsx-runtime");
-function Render({
-  config,
-  data
-}) {
+function Render({ config, data }) {
   var _a;
   const defaultedData = __spreadProps(__spreadValues({}, data), {
     root: data.root || {},
@@ -5656,6 +5741,7 @@ var usePuck = () => {
   Render,
   dropZoneContext,
   migrate,
+  overrideKeys,
   resolveAllData,
   transformProps,
   usePuck