@measured/puck-plugin-heading-analyzer 0.14.3-canary.9df6633 → 0.15.0-canary.47a27ed

package/dist/index.js

@@ -45807,292 +45807,6 @@ var require_object_hash = __commonJS({
   }
 });
 
-// ../../node_modules/@measured/auto-frame-component/dist/index.js
-var require_dist = __commonJS({
-  "../../node_modules/@measured/auto-frame-component/dist/index.js"(exports, module2) {
-    "use strict";
-    init_react_import();
-    var __create2 = Object.create;
-    var __defProp2 = Object.defineProperty;
-    var __defProps2 = Object.defineProperties;
-    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
-    var __getOwnPropDescs2 = Object.getOwnPropertyDescriptors;
-    var __getOwnPropNames2 = Object.getOwnPropertyNames;
-    var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
-    var __getProtoOf2 = Object.getPrototypeOf;
-    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
-    var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
-    var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-    var __spreadValues2 = (a2, b) => {
-      for (var prop in b || (b = {}))
-        if (__hasOwnProp2.call(b, prop))
-          __defNormalProp2(a2, prop, b[prop]);
-      if (__getOwnPropSymbols2)
-        for (var prop of __getOwnPropSymbols2(b)) {
-          if (__propIsEnum2.call(b, prop))
-            __defNormalProp2(a2, prop, b[prop]);
-        }
-      return a2;
-    };
-    var __spreadProps2 = (a2, b) => __defProps2(a2, __getOwnPropDescs2(b));
-    var __objRest2 = (source, exclude) => {
-      var target = {};
-      for (var prop in source)
-        if (__hasOwnProp2.call(source, prop) && exclude.indexOf(prop) < 0)
-          target[prop] = source[prop];
-      if (source != null && __getOwnPropSymbols2)
-        for (var prop of __getOwnPropSymbols2(source)) {
-          if (exclude.indexOf(prop) < 0 && __propIsEnum2.call(source, prop))
-            target[prop] = source[prop];
-        }
-      return target;
-    };
-    var __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: true });
-    };
-    var __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from === "object" || typeof from === "function") {
-        for (let key of __getOwnPropNames2(from))
-          if (!__hasOwnProp2.call(to, key) && key !== except)
-            __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      }
-      return to;
-    };
-    var __toESM2 = (mod, isNodeMode, target) => (target = mod != null ? __create2(__getProtoOf2(mod)) : {}, __copyProps2(
-      // If the importer is in node compatibility mode or this is not an ESM
-      // file that has been converted to a CommonJS file using a Babel-
-      // compatible transform (i.e. "__esModule" has not been set), then set
-      // "default" to the CommonJS "module.exports" for node compatibility.
-      isNodeMode || !mod || !mod.__esModule ? __defProp2(target, "default", { value: mod, enumerable: true }) : target,
-      mod
-    ));
-    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
-    var __async2 = (__this, __arguments, generator) => {
-      return new Promise((resolve, reject) => {
-        var fulfilled = (value) => {
-          try {
-            step(generator.next(value));
-          } catch (e2) {
-            reject(e2);
-          }
-        };
-        var rejected = (value) => {
-          try {
-            step(generator.throw(value));
-          } catch (e2) {
-            reject(e2);
-          }
-        };
-        var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-        step((generator = generator.apply(__this, __arguments)).next());
-      });
-    };
-    var auto_frame_component_exports = {};
-    __export2(auto_frame_component_exports, {
-      default: () => AutoFrameComponent_default
-    });
-    module2.exports = __toCommonJS2(auto_frame_component_exports);
-    var import_react13 = __toESM2(require("react"));
-    var import_react22 = __toESM2(require("react"));
-    var import_react_frame_component = __toESM2(require_lib());
-    var import_object_hash = __toESM2(require_object_hash());
-    var import_jsx_runtime8 = require("react/jsx-runtime");
-    var styleSelector = 'style, link[as="style"], link[rel="stylesheet"]';
-    var collectStyles = (doc) => {
-      const collected = [];
-      doc.head.querySelectorAll(styleSelector).forEach((style2) => {
-        collected.push(style2);
-      });
-      return collected;
-    };
-    var getStyleSheet = (el) => {
-      return Array.from(document.styleSheets).find((ss) => {
-        const ownerNode = ss.ownerNode;
-        return ownerNode.href === el.href;
-      });
-    };
-    var getStyles2 = (styleSheet) => {
-      if (styleSheet) {
-        try {
-          return [...styleSheet.cssRules].map((rule) => rule.cssText).join("");
-        } catch (e2) {
-          console.warn(
-            "Access to stylesheet %s is denied. Ignoring\u2026",
-            styleSheet.href
-          );
-        }
-      }
-      return "";
-    };
-    var defer = (fn) => setTimeout(fn, 0);
-    var CopyHostStyles = ({
-      children,
-      debug = false,
-      onStylesLoaded = () => null
-    }) => {
-      const { document: doc, window: win } = (0, import_react_frame_component.useFrame)();
-      (0, import_react22.useEffect)(() => {
-        if (!win || !doc) {
-          return () => {
-          };
-        }
-        let elements = [];
-        const hashes = {};
-        const lookupEl = (el) => elements.findIndex((elementMap) => elementMap.original === el);
-        const mirrorEl = (el, onLoad = () => {
-        }) => __async2(void 0, null, function* () {
-          let mirror;
-          if (el.nodeName === "LINK") {
-            mirror = document.createElement("style");
-            mirror.type = "text/css";
-            let styleSheet = getStyleSheet(el);
-            if (!styleSheet) {
-              yield new Promise((resolve) => {
-                const fn = () => {
-                  resolve();
-                  el.removeEventListener("load", fn);
-                };
-                el.addEventListener("load", fn);
-              });
-              styleSheet = getStyleSheet(el);
-            }
-            const styles = getStyles2(styleSheet);
-            if (!styles) {
-              if (debug) {
-                console.warn(
-                  `Tried to load styles for link element, but couldn't find them. Skipping...`
-                );
-              }
-              return;
-            }
-            mirror.innerHTML = styles;
-            mirror.setAttribute("data-href", el.getAttribute("href"));
-          } else {
-            mirror = el.cloneNode(true);
-          }
-          mirror.onload = onLoad;
-          return mirror;
-        });
-        const addEl = (el, onLoad = () => {
-        }) => __async2(void 0, null, function* () {
-          const index = lookupEl(el);
-          if (index > -1) {
-            if (debug)
-              console.log(
-                `Tried to add an element that was already mirrored. Updating instead...`
-              );
-            elements[index].mirror.innerText = el.innerText;
-            onLoad();
-            return;
-          }
-          const mirror = yield mirrorEl(el, onLoad);
-          if (!mirror) {
-            onLoad();
-            return;
-          }
-          const elHash = (0, import_object_hash.default)(mirror.outerHTML);
-          if (hashes[elHash]) {
-            if (debug)
-              console.log(
-                `iframe already contains element that is being mirrored. Skipping...`
-              );
-            onLoad();
-            return;
-          }
-          hashes[elHash] = true;
-          mirror.onload = onLoad;
-          doc.head.append(mirror);
-          elements.push({ original: el, mirror });
-          if (debug)
-            console.log(`Added style node ${el.outerHTML}`);
-        });
-        const removeEl = (el) => {
-          var _a3, _b;
-          const index = lookupEl(el);
-          if (index === -1) {
-            if (debug)
-              console.log(
-                `Tried to remove an element that did not exist. Skipping...`
-              );
-            return;
-          }
-          const elHash = (0, import_object_hash.default)(el.outerHTML);
-          (_b = (_a3 = elements[index]) == null ? void 0 : _a3.mirror) == null ? void 0 : _b.remove();
-          delete hashes[elHash];
-          if (debug)
-            console.log(`Removed style node ${el.outerHTML}`);
-        };
-        const observer = new MutationObserver((mutations) => {
-          mutations.forEach((mutation) => {
-            if (mutation.type === "childList") {
-              mutation.addedNodes.forEach((node) => {
-                if (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ELEMENT_NODE) {
-                  const el = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
-                  if (el && el.matches(styleSelector)) {
-                    defer(() => addEl(el));
-                  }
-                }
-              });
-              mutation.removedNodes.forEach((node) => {
-                if (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ELEMENT_NODE) {
-                  const el = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
-                  if (el && el.matches(styleSelector)) {
-                    defer(() => removeEl(el));
-                  }
-                }
-              });
-            }
-          });
-        });
-        const parentDocument = win.parent.document;
-        const collectedStyles = collectStyles(parentDocument);
-        const hrefs = [];
-        Promise.all(
-          collectedStyles.map((styleNode, i2) => __async2(void 0, null, function* () {
-            if (styleNode.nodeName === "LINK") {
-              const linkHref = styleNode.href;
-              if (hrefs.indexOf(linkHref) > -1) {
-                return;
-              }
-              hrefs.push(linkHref);
-            }
-            const mirror = yield mirrorEl(styleNode);
-            if (!mirror)
-              return;
-            elements.push({ original: styleNode, mirror });
-            return mirror;
-          }))
-        ).then((mirrorStyles) => {
-          const filtered = mirrorStyles.filter(
-            (el) => typeof el !== "undefined"
-          );
-          doc.head.innerHTML = "";
-          doc.head.append(...filtered);
-          observer.observe(parentDocument.head, { childList: true, subtree: true });
-          filtered.forEach((el) => {
-            const elHash = (0, import_object_hash.default)(el.outerHTML);
-            hashes[elHash] = true;
-          });
-          onStylesLoaded();
-        });
-        return () => {
-          observer.disconnect();
-        };
-      }, []);
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children });
-    };
-    var AutoFrameComponent = import_react22.default.forwardRef(
-      function(_a3, ref2) {
-        var _b = _a3, { children, debug, onStylesLoaded } = _b, props = __objRest2(_b, ["children", "debug", "onStylesLoaded"]);
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_frame_component.default, __spreadProps2(__spreadValues2({}, props), { ref: ref2, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CopyHostStyles, { debug, onStylesLoaded, children }) }));
-      }
-    );
-    AutoFrameComponent.displayName = "AutoFrameComponent";
-    var AutoFrameComponent_default = AutoFrameComponent;
-  }
-});
-
 // ../../node_modules/react-hotkeys-hook/dist/react-hotkeys-hook.esm.js
 var react_hotkeys_hook_esm_exports = {};
 __export(react_hotkeys_hook_esm_exports, {
@@ -46562,7 +46276,7 @@ var init_react_hotkeys_hook_esm = __esm({
 });
 
 // ../core/dist/index.js
-var require_dist2 = __commonJS({
+var require_dist = __commonJS({
   "../core/dist/index.js"(exports, module2) {
     "use strict";
     init_react_import();
@@ -54586,9 +54300,9 @@ var require_dist2 = __commonJS({
             if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart === "function") {
               __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
             }
-            var React210 = require("react");
+            var React32 = require("react");
             var Scheduler = require_scheduler2();
-            var ReactSharedInternals = React210.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+            var ReactSharedInternals = React32.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
             var suppressWarning = false;
             function setSuppressWarning(newSuppressWarning) {
               {
@@ -54637,7 +54351,7 @@ var require_dist2 = __commonJS({
             var HostPortal = 4;
             var HostComponent = 5;
             var HostText = 6;
-            var Fragment17 = 7;
+            var Fragment18 = 7;
             var Mode = 8;
             var ContextConsumer = 9;
             var ContextProvider = 10;
@@ -55793,7 +55507,7 @@ var require_dist2 = __commonJS({
                   return "DehydratedFragment";
                 case ForwardRef:
                   return getWrappedName$1(type, type.render, "ForwardRef");
-                case Fragment17:
+                case Fragment18:
                   return "Fragment";
                 case HostComponent:
                   return type;
@@ -56193,7 +55907,7 @@ var require_dist2 = __commonJS({
               {
                 if (props.value == null) {
                   if (typeof props.children === "object" && props.children !== null) {
-                    React210.Children.forEach(props.children, function(child) {
+                    React32.Children.forEach(props.children, function(child) {
                       if (child == null) {
                         return;
                       }
@@ -64640,7 +64354,7 @@ var require_dist2 = __commonJS({
               }
             }
             var fakeInternalInstance = {};
-            var emptyRefsObject = new React210.Component().refs;
+            var emptyRefsObject = new React32.Component().refs;
             var didWarnAboutStateAssignmentForComponent;
             var didWarnAboutUninitializedState;
             var didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate;
@@ -65464,7 +65178,7 @@ var require_dist2 = __commonJS({
                 }
               }
               function updateFragment2(returnFiber, current2, fragment, lanes, key) {
-                if (current2 === null || current2.tag !== Fragment17) {
+                if (current2 === null || current2.tag !== Fragment18) {
                   var created = createFiberFromFragment(fragment, returnFiber.mode, lanes, key);
                   created.return = returnFiber;
                   return created;
@@ -65867,7 +65581,7 @@ var require_dist2 = __commonJS({
                   if (child.key === key) {
                     var elementType = element.type;
                     if (elementType === REACT_FRAGMENT_TYPE) {
-                      if (child.tag === Fragment17) {
+                      if (child.tag === Fragment18) {
                         deleteRemainingChildren(returnFiber, child.sibling);
                         var existing = useFiber(child, element.props.children);
                         existing.return = returnFiber;
@@ -70042,7 +69756,7 @@ var require_dist2 = __commonJS({
                   var _resolvedProps2 = workInProgress2.elementType === type ? _unresolvedProps2 : resolveDefaultProps(type, _unresolvedProps2);
                   return updateForwardRef(current2, workInProgress2, type, _resolvedProps2, renderLanes2);
                 }
-                case Fragment17:
+                case Fragment18:
                   return updateFragment(current2, workInProgress2, renderLanes2);
                 case Mode:
                   return updateMode(current2, workInProgress2, renderLanes2);
@@ -70315,7 +70029,7 @@ var require_dist2 = __commonJS({
                 case SimpleMemoComponent:
                 case FunctionComponent:
                 case ForwardRef:
-                case Fragment17:
+                case Fragment18:
                 case Mode:
                 case Profiler:
                 case ContextConsumer:
@@ -74574,7 +74288,7 @@ var require_dist2 = __commonJS({
               return fiber;
             }
             function createFiberFromFragment(elements, mode, lanes, key) {
-              var fiber = createFiber(Fragment17, elements, key, mode);
+              var fiber = createFiber(Fragment18, elements, key, mode);
               fiber.lanes = lanes;
               return fiber;
             }
@@ -75833,7 +75547,7 @@ var require_dist2 = __commonJS({
     var import_ua_parser_js2 = require_ua_parser();
     var import_jsx_runtime22 = require("react/jsx-runtime");
     var defaultAppState2 = {
-      data: { content: [], root: { props: { title: "" } } },
+      data: { content: [], root: { props: {} } },
       ui: {
         leftSideBarVisible: true,
         rightSideBarVisible: true,
@@ -76931,7 +76645,7 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
       return el;
     };
     init_react_import2();
-    var import_react28 = require("react");
+    var import_react29 = require("react");
     init_react_import2();
     var import_react112 = require("react");
     init_react_import2();
@@ -77450,6 +77164,16 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
     init_react_import2();
     var import_react132 = require("react");
     init_react_import2();
+    init_react_import2();
+    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 __spreadProps2(__spreadValues2({}, acc), {
+          [item]: oldItemProps[item] !== newItemProps[item]
+        });
+      }, {}) : {};
+    };
     var cache = { lastChange: {} };
     var resolveAllComponentData = (content, config, onResolveStart, onResolveEnd) => __async2(void 0, null, function* () {
       return yield Promise.all(
@@ -77466,25 +77190,15 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
     var resolveComponentData = (item, config, onResolveStart, onResolveEnd) => __async2(void 0, null, function* () {
       const configForItem = config.components[item.type];
       if (configForItem.resolveData) {
-        let changed = Object.keys(item.props).reduce(
-          (acc, item2) => __spreadProps2(__spreadValues2({}, acc), { [item2]: true }),
-          {}
-        );
-        if (cache.lastChange[item.props.id]) {
-          const { item: oldItem, resolved } = cache.lastChange[item.props.id];
-          if (oldItem === item) {
-            return resolved;
-          }
-          Object.keys(item.props).forEach((propName) => {
-            if (oldItem.props[propName] === item.props[propName]) {
-              changed[propName] = false;
-            }
-          });
+        const { item: oldItem = {}, 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 });
+        const { props: resolvedProps, readOnly = {} } = yield configForItem.resolveData(item, { changed, lastData: oldItem });
         const { readOnly: existingReadOnly = {} } = item || {};
         const newReadOnly = __spreadValues2(__spreadValues2({}, existingReadOnly), readOnly);
         const resolvedItem = __spreadProps2(__spreadValues2({}, item), {
@@ -77523,26 +77237,16 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
     init_react_import2();
     var cache2 = {};
     var resolveRootData = (data, config) => __async2(void 0, null, function* () {
-      var _a3, _b;
+      var _a3, _b, _c, _d, _e;
       if (((_a3 = config.root) == null ? void 0 : _a3.resolveData) && data.root.props) {
-        let changed = Object.keys(data.root.props).reduce(
-          (acc, item) => __spreadProps2(__spreadValues2({}, acc), { [item]: true }),
-          {}
-        );
-        if (cache2.lastChange) {
-          const { original, resolved } = cache2.lastChange;
-          if (original === data.root) {
-            return resolved;
-          }
-          Object.keys(data.root.props).forEach((propName) => {
-            if (original.props[propName] === data.root.props[propName]) {
-              changed[propName] = false;
-            }
-          });
+        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 (_b = config.root) == null ? void 0 : _b.resolveData(rootWithProps, {
-          changed
+        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,
@@ -77562,7 +77266,7 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
       const [componentState, setComponentState] = (0, import_react132.useState)({});
       const deferredSetStates = {};
       const setComponentLoading = (0, import_react132.useCallback)(
-        (id, loading, defer = 0) => {
+        (id, loading, defer2 = 0) => {
           if (deferredSetStates[id]) {
             clearTimeout(deferredSetStates[id]);
             delete deferredSetStates[id];
@@ -77572,7 +77276,7 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
               [id]: __spreadProps2(__spreadValues2({}, prev[id]), { loading })
             }));
             delete deferredSetStates[id];
-          }, defer);
+          }, defer2);
         },
         []
       );
@@ -77652,7 +77356,7 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
     var getClassName9 = get_class_name_factory_default2("MenuBar", styles_module_default7);
     var MenuBar = ({
       appState,
-      data = { content: [], root: { props: { title: "" } } },
+      data = { content: [], root: {} },
       dispatch,
       menuOpen = false,
       onPublish,
@@ -77697,17 +77401,7 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
             /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: renderHeaderActions && renderHeaderActions({
               state: appState,
               dispatch
-            }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-              Button,
-              {
-                onClick: () => {
-                  onPublish && onPublish(data);
-                },
-                icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Globe, { size: "14px" }),
-                children: "Publish"
-              }
-            ) })
+            }) })
           ] })
         }
       );
@@ -78616,7 +78310,7 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
       return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Render2, __spreadProps2(__spreadValues2({}, mergedProps), { children }));
     };
     init_react_import2();
-    var styles_module_default14 = { "PuckFields": "_PuckFields_17k3p_1", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_17k3p_6" };
+    var styles_module_default14 = { "PuckFields": "_PuckFields_1o0if_1", "PuckFields--isLoading": "_PuckFields--isLoading_1o0if_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_1o0if_10" };
     var import_react19 = require("react");
     var import_jsx_runtime25 = require("react/jsx-runtime");
     var getClassName19 = get_class_name_factory_default2("PuckFields", styles_module_default14);
@@ -78627,13 +78321,73 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
       children,
       isLoading
     }) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: getClassName19(), children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: getClassName19({ isLoading }), children: [
         children,
         isLoading && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: getClassName19("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_spinners6.ClipLoader, { "aria-label": "loading" }) })
       ] });
     };
+    var useResolvedFields = () => {
+      var _a3;
+      const { selectedItem, state, config } = useAppContext2();
+      const { data } = state;
+      const rootFields = ((_a3 = config.root) == null ? void 0 : _a3.fields) || defaultPageFields;
+      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_react19.useState)(
+        {}
+      );
+      const [resolvedFields, setResolvedFields] = (0, import_react19.useState)(defaultFields || {});
+      const [fieldsLoading, setFieldsLoading] = (0, import_react19.useState)(false);
+      const defaultResolveFields = (_componentData, _params) => defaultFields;
+      const componentData = selectedItem ? selectedItem : { props: rootProps, readOnly: data.root.readOnly };
+      const resolveFields = (0, import_react19.useCallback)(
+        (..._0) => __async2(void 0, [..._0], function* (fields = {}) {
+          var _a22, _b, _c;
+          const lastData = ((_a22 = lastSelectedData.props) == null ? void 0 : _a22.id) === componentData.props.id ? lastSelectedData : {};
+          const changed = getChanged(componentData, lastData);
+          setLastSelectedData(componentData);
+          if (selectedItem && (componentConfig == null ? void 0 : componentConfig.resolveFields)) {
+            return yield componentConfig == null ? void 0 : componentConfig.resolveFields(
+              componentData,
+              {
+                changed,
+                fields,
+                lastFields: resolvedFields,
+                lastData,
+                appState: state
+              }
+            );
+          }
+          if (!selectedItem && ((_b = config.root) == null ? void 0 : _b.resolveFields)) {
+            return yield (_c = config.root) == null ? void 0 : _c.resolveFields(componentData, {
+              changed,
+              fields,
+              lastFields: resolvedFields,
+              lastData,
+              appState: state
+            });
+          }
+          return defaultResolveFields(componentData, {
+            changed,
+            fields,
+            lastFields: resolvedFields,
+            lastData
+          });
+        }),
+        [data, config, componentData, selectedItem, resolvedFields, state]
+      );
+      (0, import_react19.useEffect)(() => {
+        setFieldsLoading(true);
+        resolveFields(defaultFields).then((fields) => {
+          setResolvedFields(fields || {});
+          setFieldsLoading(false);
+        });
+      }, [data, defaultFields]);
+      return [resolvedFields, fieldsLoading];
+    };
     var Fields = () => {
-      var _a3, _b, _c, _d;
+      var _a3, _b;
       const {
         selectedItem,
         state,
@@ -78645,9 +78399,9 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
       } = useAppContext2();
       const { data, ui } = state;
       const { itemSelector } = ui;
-      const rootFields = ((_a3 = config.root) == null ? void 0 : _a3.fields) || defaultPageFields;
-      const fields = selectedItem ? ((_b = config.components[selectedItem.type]) == null ? void 0 : _b.fields) || {} : rootFields;
-      const isLoading = selectedItem ? (_c = componentState[selectedItem == null ? void 0 : selectedItem.props.id]) == null ? void 0 : _c.loading : (_d = componentState["puck-root"]) == null ? void 0 : _d.loading;
+      const [fields, fieldsResolving] = useResolvedFields();
+      const componentResolving = selectedItem ? (_a3 = componentState[selectedItem == null ? void 0 : selectedItem.props.id]) == null ? void 0 : _a3.loading : (_b = componentState["puck-root"]) == null ? void 0 : _b.loading;
+      const isLoading = fieldsResolving || componentResolving;
       const rootProps = data.root.props || data.root;
       const Wrapper = (0, import_react19.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
       return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
@@ -78659,6 +78413,8 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Wrapper, { isLoading, itemSelector, children: Object.keys(fields).map((fieldName) => {
             const field = fields[fieldName];
+            if (!(field == null ? void 0 : field.type))
+              return null;
             const onChange = (value, updatedUi) => {
               var _a22, _b2;
               let currentProps;
@@ -78894,15 +78650,212 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
       return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ComponentList, { id: "all" }) });
     };
     init_react_import2();
-    var import_react222 = require("react");
-    var import_auto_frame_component = __toESM2(require_dist());
+    var import_react23 = require("react");
     init_react_import2();
-    var styles_module_default16 = { "PuckPreview": "_PuckPreview_rxwlr_1", "PuckPreview-frame": "_PuckPreview-frame_rxwlr_5" };
+    var import_react222 = __toESM2(require("react"));
+    var import_react_frame_component = __toESM2(require_lib());
+    var import_object_hash = __toESM2(require_object_hash());
     var import_jsx_runtime29 = require("react/jsx-runtime");
+    var styleSelector = 'style, link[rel="stylesheet"]';
+    var collectStyles = (doc) => {
+      const collected = [];
+      doc.head.querySelectorAll(styleSelector).forEach((style2) => {
+        collected.push(style2);
+      });
+      return collected;
+    };
+    var getStyleSheet = (el) => {
+      return Array.from(document.styleSheets).find((ss) => {
+        const ownerNode = ss.ownerNode;
+        return ownerNode.href === el.href;
+      });
+    };
+    var getStyles2 = (styleSheet) => {
+      if (styleSheet) {
+        try {
+          return [...styleSheet.cssRules].map((rule) => rule.cssText).join("");
+        } catch (e2) {
+          console.warn(
+            "Access to stylesheet %s is denied. Ignoring\u2026",
+            styleSheet.href
+          );
+        }
+      }
+      return "";
+    };
+    var defer = (fn) => setTimeout(fn, 0);
+    var CopyHostStyles = ({
+      children,
+      debug = false,
+      onStylesLoaded = () => null
+    }) => {
+      const { document: doc, window: win } = (0, import_react_frame_component.useFrame)();
+      (0, import_react222.useEffect)(() => {
+        if (!win || !doc) {
+          return () => {
+          };
+        }
+        let elements = [];
+        const hashes = {};
+        const lookupEl = (el) => elements.findIndex((elementMap) => elementMap.original === el);
+        const mirrorEl = (el, inlineStyles = false) => __async2(void 0, null, function* () {
+          let mirror;
+          if (el.nodeName === "LINK" && inlineStyles) {
+            mirror = document.createElement("style");
+            mirror.type = "text/css";
+            let styleSheet = getStyleSheet(el);
+            if (!styleSheet) {
+              yield new Promise((resolve) => {
+                const fn = () => {
+                  resolve();
+                  el.removeEventListener("load", fn);
+                };
+                el.addEventListener("load", fn);
+              });
+              styleSheet = getStyleSheet(el);
+            }
+            const styles = getStyles2(styleSheet);
+            if (!styles) {
+              if (debug) {
+                console.warn(
+                  `Tried to load styles for link element, but couldn't find them. Skipping...`
+                );
+              }
+              return;
+            }
+            mirror.innerHTML = styles;
+            mirror.setAttribute("data-href", el.getAttribute("href"));
+          } else {
+            mirror = el.cloneNode(true);
+          }
+          return mirror;
+        });
+        const addEl = (el) => __async2(void 0, null, function* () {
+          const index = lookupEl(el);
+          if (index > -1) {
+            if (debug)
+              console.log(
+                `Tried to add an element that was already mirrored. Updating instead...`
+              );
+            elements[index].mirror.innerText = el.innerText;
+            return;
+          }
+          const mirror = yield mirrorEl(el);
+          if (!mirror) {
+            return;
+          }
+          const elHash = (0, import_object_hash.default)(mirror.outerHTML);
+          if (hashes[elHash]) {
+            if (debug)
+              console.log(
+                `iframe already contains element that is being mirrored. Skipping...`
+              );
+            return;
+          }
+          hashes[elHash] = true;
+          doc.head.append(mirror);
+          elements.push({ original: el, mirror });
+          if (debug)
+            console.log(`Added style node ${el.outerHTML}`);
+        });
+        const removeEl = (el) => {
+          var _a3, _b;
+          const index = lookupEl(el);
+          if (index === -1) {
+            if (debug)
+              console.log(
+                `Tried to remove an element that did not exist. Skipping...`
+              );
+            return;
+          }
+          const elHash = (0, import_object_hash.default)(el.outerHTML);
+          (_b = (_a3 = elements[index]) == null ? void 0 : _a3.mirror) == null ? void 0 : _b.remove();
+          delete hashes[elHash];
+          if (debug)
+            console.log(`Removed style node ${el.outerHTML}`);
+        };
+        const observer = new MutationObserver((mutations) => {
+          mutations.forEach((mutation) => {
+            if (mutation.type === "childList") {
+              mutation.addedNodes.forEach((node) => {
+                if (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ELEMENT_NODE) {
+                  const el = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
+                  if (el && el.matches(styleSelector)) {
+                    defer(() => addEl(el));
+                  }
+                }
+              });
+              mutation.removedNodes.forEach((node) => {
+                if (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ELEMENT_NODE) {
+                  const el = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
+                  if (el && el.matches(styleSelector)) {
+                    defer(() => removeEl(el));
+                  }
+                }
+              });
+            }
+          });
+        });
+        const parentDocument = win.parent.document;
+        const collectedStyles = collectStyles(parentDocument);
+        const hrefs = [];
+        let stylesLoaded = 0;
+        Promise.all(
+          collectedStyles.map((styleNode, i2) => __async2(void 0, null, function* () {
+            if (styleNode.nodeName === "LINK") {
+              const linkHref = styleNode.href;
+              if (hrefs.indexOf(linkHref) > -1) {
+                return;
+              }
+              hrefs.push(linkHref);
+            }
+            const mirror = yield mirrorEl(styleNode);
+            if (!mirror)
+              return;
+            elements.push({ original: styleNode, mirror });
+            return mirror;
+          }))
+        ).then((mirrorStyles) => {
+          const filtered = mirrorStyles.filter(
+            (el) => typeof el !== "undefined"
+          );
+          filtered.forEach((mirror) => {
+            mirror.onload = () => {
+              stylesLoaded = stylesLoaded + 1;
+              if (stylesLoaded >= elements.length) {
+                onStylesLoaded();
+              }
+            };
+          });
+          doc.head.innerHTML = "";
+          doc.head.append(...filtered);
+          observer.observe(parentDocument.head, { childList: true, subtree: true });
+          filtered.forEach((el) => {
+            const elHash = (0, import_object_hash.default)(el.outerHTML);
+            hashes[elHash] = true;
+          });
+        });
+        return () => {
+          observer.disconnect();
+        };
+      }, []);
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children });
+    };
+    var AutoFrameComponent = import_react222.default.forwardRef(
+      function(_a3, ref2) {
+        var _b = _a3, { children, debug, onStylesLoaded } = _b, props = __objRest2(_b, ["children", "debug", "onStylesLoaded"]);
+        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_frame_component.default, __spreadProps2(__spreadValues2({}, props), { ref: ref2, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CopyHostStyles, { debug, onStylesLoaded, children }) }));
+      }
+    );
+    AutoFrameComponent.displayName = "AutoFrameComponent";
+    var AutoFrame_default = AutoFrameComponent;
+    init_react_import2();
+    var styles_module_default16 = { "PuckPreview": "_PuckPreview_rxwlr_1", "PuckPreview-frame": "_PuckPreview-frame_rxwlr_5" };
+    var import_jsx_runtime30 = require("react/jsx-runtime");
     var getClassName21 = get_class_name_factory_default2("PuckPreview", styles_module_default16);
     var Preview = ({ id = "puck-preview" }) => {
       const { config, dispatch, state, setStatus, iframe } = useAppContext2();
-      const Page = (0, import_react222.useCallback)(
+      const Page = (0, import_react23.useCallback)(
         (pageProps) => {
           var _a3, _b;
           return ((_a3 = config.root) == null ? void 0 : _a3.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadProps2(__spreadValues2({
@@ -78910,13 +78863,13 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
           }, pageProps), {
             editMode: true,
             puck: { renderDropZone: DropZone }
-          })) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: pageProps.children });
+          })) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: pageProps.children });
         },
         [config.root]
       );
       const rootProps = state.data.root.props || state.data.root;
-      const ref2 = (0, import_react222.useRef)(null);
-      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      const ref2 = (0, import_react23.useRef)(null);
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "div",
         {
           className: getClassName21(),
@@ -78924,8 +78877,8 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
           onClick: () => {
             dispatch({ type: "setUi", ui: __spreadProps2(__spreadValues2({}, state.ui), { itemSelector: null }) });
           },
-          children: iframe.enabled ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            import_auto_frame_component.default,
+          children: iframe.enabled ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            AutoFrame_default,
             {
               id: "preview-frame",
               className: getClassName21("frame"),
@@ -78934,9 +78887,9 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
               onStylesLoaded: () => {
                 setStatus("READY");
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Page, __spreadProps2(__spreadValues2({ dispatch, state }, rootProps), { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DropZone, { zone: rootDroppableId2 }) }))
+              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Page, __spreadProps2(__spreadValues2({ dispatch, state }, rootProps), { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DropZone, { zone: rootDroppableId2 }) }))
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { id: "preview-frame", className: getClassName21("frame"), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Page, __spreadProps2(__spreadValues2({ dispatch, state }, rootProps), { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DropZone, { zone: rootDroppableId2 }) })) })
+          ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { id: "preview-frame", className: getClassName21("frame"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Page, __spreadProps2(__spreadValues2({ dispatch, state }, rootProps), { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DropZone, { zone: rootDroppableId2 }) })) })
         }
       );
     };
@@ -78968,7 +78921,7 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
         el.style.scrollMargin = oldStyle.scrollMargin || "";
       }
     };
-    var import_react23 = require("react");
+    var import_react24 = require("react");
     init_react_import2();
     var isChildOfZone = (item, maybeChild, ctx) => {
       var _a3;
@@ -78978,7 +78931,7 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
         return area === item.props.id;
       })) : false;
     };
-    var import_jsx_runtime30 = require("react/jsx-runtime");
+    var import_jsx_runtime31 = require("react/jsx-runtime");
     var getClassName222 = get_class_name_factory_default2("LayerTree", styles_module_default17);
     var getClassNameLayer = get_class_name_factory_default2("Layer", styles_module_default17);
     var LayerTree = ({
@@ -78991,15 +78944,15 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
       label
     }) => {
       const zones = data.zones || {};
-      const ctx = (0, import_react23.useContext)(dropZoneContext2);
-      return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: getClassName222("zoneTitle"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassName222("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Layers, { size: "16" }) }),
+      const ctx = (0, import_react24.useContext)(dropZoneContext2);
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: getClassName222("zoneTitle"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: getClassName222("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Layers, { size: "16" }) }),
           " ",
           label
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("ul", { className: getClassName222(), children: [
-          zoneContent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassName222("helper"), children: "No items" }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("ul", { className: getClassName222(), children: [
+          zoneContent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: getClassName222("helper"), children: "No items" }),
           zoneContent.map((item, i2) => {
             var _a3;
             const isSelected = (itemSelector == null ? void 0 : itemSelector.index) === i2 && (itemSelector.zone === zone || itemSelector.zone === rootDroppableId2 && !zone);
@@ -79015,7 +78968,7 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
             const selectedItem = itemSelector && data ? getItem2(itemSelector, data) : null;
             const isHovering = hoveringComponent === item.props.id;
             const childIsSelected = isChildOfZone(item, selectedItem, ctx);
-            return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
               "li",
               {
                 className: getClassNameLayer({
@@ -79025,7 +78978,7 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
                   childIsSelected
                 }),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                     "button",
                     {
                       className: getClassNameLayer("clickable"),
@@ -79057,22 +79010,22 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
                         setHoveringComponent(null);
                       },
                       children: [
-                        containsZone && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                        containsZone && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                           "div",
                           {
                             className: getClassNameLayer("chevron"),
                             title: isSelected ? "Collapse" : "Expand",
-                            children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ChevronDown, { size: "12" })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ChevronDown, { size: "12" })
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: getClassNameLayer("title"), children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Type, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(LayoutGrid, { size: "16" }) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassNameLayer("name"), children: (_a3 = config.components[item.type]["label"]) != null ? _a3 : item.type })
+                        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: getClassNameLayer("title"), children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Type, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(LayoutGrid, { size: "16" }) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: getClassNameLayer("name"), children: (_a3 = config.components[item.type]["label"]) != null ? _a3 : item.type })
                         ] })
                       ]
                     }
                   ) }),
-                  containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                     LayerTree,
                     {
                       config,
@@ -79092,13 +79045,13 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
         ] })
       ] });
     };
-    var import_react24 = require("react");
-    var import_jsx_runtime31 = require("react/jsx-runtime");
+    var import_react25 = require("react");
+    var import_jsx_runtime322 = require("react/jsx-runtime");
     var Outline = () => {
       const { dispatch, state, overrides, config } = useAppContext2();
       const { data, ui } = state;
       const { itemSelector } = ui;
-      const setItemSelector = (0, import_react24.useCallback)(
+      const setItemSelector = (0, import_react25.useCallback)(
         (newItemSelector) => {
           dispatch({
             type: "setUi",
@@ -79107,9 +79060,9 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
         },
         []
       );
-      const Wrapper = (0, import_react24.useMemo)(() => overrides.outline || "div", [overrides]);
-      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(dropZoneContext2.Consumer, { children: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-        (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId2]) && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      const Wrapper = (0, import_react25.useMemo)(() => overrides.outline || "div", [overrides]);
+      return /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(dropZoneContext2.Consumer, { children: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime322.jsxs)(import_jsx_runtime322.Fragment, { children: [
+        (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId2]) && /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
           LayerTree,
           {
             config,
@@ -79122,7 +79075,7 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
         ),
         Object.entries(findZonesForArea(data, "root")).map(
           ([zoneKey, zone]) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
               LayerTree,
               {
                 config,
@@ -79201,12 +79154,12 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
       };
     }
     init_react_import2();
-    var import_react25 = require("react");
+    var import_react26 = require("react");
     var import_use_debounce3 = (init_index_module(), __toCommonJS(index_module_exports));
     var EMPTY_HISTORY_INDEX = -1;
     function useHistoryStore() {
-      const [histories, setHistories] = (0, import_react25.useState)([]);
-      const [index, setIndex] = (0, import_react25.useState)(EMPTY_HISTORY_INDEX);
+      const [histories, setHistories] = (0, import_react26.useState)([]);
+      const [index, setIndex] = (0, import_react26.useState)(EMPTY_HISTORY_INDEX);
       const hasPast = index > EMPTY_HISTORY_INDEX;
       const hasFuture = index < histories.length - 1;
       const currentHistory = histories[index];
@@ -79356,16 +79309,16 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
       var styles = window.getComputedStyle(el);
       return calculateBox3(borderBox, styles);
     };
-    var import_react27 = require("react");
+    var import_react28 = require("react");
     init_react_import2();
-    var import_react26 = require("react");
+    var import_react27 = require("react");
     init_react_import2();
     var styles_module_default18 = { "ViewportControls": "_ViewportControls_3zdvn_1", "ViewportControls-divider": "_ViewportControls-divider_3zdvn_15", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_3zdvn_21", "ViewportButton--isActive": "_ViewportButton--isActive_3zdvn_33", "ViewportButton-inner": "_ViewportButton-inner_3zdvn_33" };
-    var import_jsx_runtime322 = require("react/jsx-runtime");
+    var import_jsx_runtime33 = require("react/jsx-runtime");
     var icons = {
-      Smartphone: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(Smartphone, { size: 16 }),
-      Tablet: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(Tablet, { size: 16 }),
-      Monitor: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(Monitor, { size: 16 })
+      Smartphone: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Smartphone, { size: 16 }),
+      Tablet: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Tablet, { size: 16 }),
+      Monitor: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Monitor, { size: 16 })
     };
     var getClassName23 = get_class_name_factory_default2("ViewportControls", styles_module_default18);
     var getClassNameButton = get_class_name_factory_default2("ViewportButton", styles_module_default18);
@@ -79377,11 +79330,11 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
       onClick
     }) => {
       const { state } = useAppContext2();
-      const [isActive2, setIsActive] = (0, import_react26.useState)(false);
-      (0, import_react26.useEffect)(() => {
+      const [isActive2, setIsActive] = (0, import_react27.useState)(false);
+      (0, import_react27.useEffect)(() => {
         setIsActive(width === state.ui.viewports.current.width);
       }, [width, state.ui.viewports.current.width]);
-      return /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("span", { className: getClassNameButton({ isActive: isActive2 }), children: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: getClassNameButton({ isActive: isActive2 }), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         IconButton,
         {
           title,
@@ -79390,7 +79343,7 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
             e2.stopPropagation();
             onClick({ width, height });
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("span", { className: getClassNameButton("inner"), children })
+          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: getClassNameButton("inner"), children })
         }
       ) });
     };
@@ -79414,7 +79367,7 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
       const defaultsContainAutoZoom = defaultZoomOptions.find(
         (option) => option.value === autoZoom
       );
-      const zoomOptions = (0, import_react26.useMemo)(
+      const zoomOptions = (0, import_react27.useMemo)(
         () => [
           ...defaultZoomOptions,
           ...defaultsContainAutoZoom ? [] : [
@@ -79426,8 +79379,8 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
         ].filter((a2) => a2.value <= autoZoom).sort((a2, b) => a2.value > b.value ? 1 : -1),
         [autoZoom]
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime322.jsxs)("div", { className: getClassName23(), children: [
-        viewports.map((viewport, i2) => /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: getClassName23(), children: [
+        viewports.map((viewport, i2) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           ViewportButton,
           {
             height: viewport.height,
@@ -79438,8 +79391,8 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
           },
           i2
         )),
-        /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("div", { className: getClassName23("divider") }),
-        /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName23("divider") }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           IconButton,
           {
             title: "Zoom viewport out",
@@ -79453,10 +79406,10 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
                 )].value
               );
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(ZoomOut, { size: 16 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ZoomOut, { size: 16 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           IconButton,
           {
             title: "Zoom viewport in",
@@ -79470,11 +79423,11 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
                 )].value
               );
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(ZoomIn, { size: 16 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ZoomIn, { size: 16 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("div", { className: getClassName23("divider") }),
-        /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName23("divider") }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "select",
           {
             className: getClassName23("zoomSelect"),
@@ -79482,7 +79435,7 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
             onChange: (e2) => {
               onZoom(parseFloat(e2.currentTarget.value));
             },
-            children: zoomOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
+            children: zoomOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               "option",
               {
                 value: option.value,
@@ -79524,24 +79477,24 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
       }
       return { autoZoom, rootHeight, zoom };
     };
-    var import_jsx_runtime33 = require("react/jsx-runtime");
+    var import_jsx_runtime34 = require("react/jsx-runtime");
     var getClassName24 = get_class_name_factory_default2("PuckCanvas", styles_module_default19);
     var ZOOM_ON_CHANGE = true;
     var Canvas = () => {
       const { status, iframe } = useAppContext2();
       const { dispatch, state, overrides, setUi, zoomConfig, setZoomConfig } = useAppContext2();
       const { ui } = state;
-      const frameRef = (0, import_react27.useRef)(null);
-      const [showTransition, setShowTransition] = (0, import_react27.useState)(false);
-      const defaultRender = (0, import_react27.useMemo)(() => {
-        const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children });
+      const frameRef = (0, import_react28.useRef)(null);
+      const [showTransition, setShowTransition] = (0, import_react28.useState)(false);
+      const defaultRender = (0, import_react28.useMemo)(() => {
+        const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children });
         return PuckDefault;
       }, []);
-      const CustomPreview = (0, import_react27.useMemo)(
+      const CustomPreview = (0, import_react28.useMemo)(
         () => overrides.preview || defaultRender,
         [overrides]
       );
-      const getFrameDimensions = (0, import_react27.useCallback)(() => {
+      const getFrameDimensions = (0, import_react28.useCallback)(() => {
         if (frameRef.current) {
           const frame = frameRef.current;
           const box = getBox3(frame);
@@ -79549,7 +79502,7 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
         }
         return { width: 0, height: 0 };
       }, [frameRef]);
-      const resetAutoZoom = (0, import_react27.useCallback)(
+      const resetAutoZoom = (0, import_react28.useCallback)(
         (ui2 = state.ui) => {
           if (frameRef.current) {
             setZoomConfig(
@@ -79559,11 +79512,11 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
         },
         [frameRef, zoomConfig, state.ui]
       );
-      (0, import_react27.useEffect)(() => {
+      (0, import_react28.useEffect)(() => {
         setShowTransition(false);
         resetAutoZoom();
       }, [frameRef, ui.leftSideBarVisible, ui.rightSideBarVisible]);
-      (0, import_react27.useEffect)(() => {
+      (0, import_react28.useEffect)(() => {
         const { height: frameHeight } = getFrameDimensions();
         if (ui.viewports.current.height === "auto") {
           setZoomConfig(__spreadProps2(__spreadValues2({}, zoomConfig), {
@@ -79571,7 +79524,7 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
           }));
         }
       }, [zoomConfig.zoom]);
-      (0, import_react27.useEffect)(() => {
+      (0, import_react28.useEffect)(() => {
         const observer = new ResizeObserver(() => {
           setShowTransition(false);
           resetAutoZoom();
@@ -79583,7 +79536,7 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
           observer.disconnect();
         };
       }, []);
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
         "div",
         {
           className: getClassName24({
@@ -79595,7 +79548,7 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
             recordHistory: true
           }),
           children: [
-            ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName24("controls"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName24("controls"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               ViewportControls,
               {
                 autoZoom: zoomConfig.autoZoom,
@@ -79620,7 +79573,7 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
                 }
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName24("inner"), ref: frameRef, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName24("inner"), ref: frameRef, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               "div",
               {
                 className: getClassName24("root"),
@@ -79632,19 +79585,19 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
                   overflow: iframe.enabled ? void 0 : "auto"
                 },
                 suppressHydrationWarning: true,
-                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Preview, {}) })
+                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Preview, {}) })
               }
             ) })
           ]
         }
       );
     };
-    var import_jsx_runtime34 = require("react/jsx-runtime");
+    var import_jsx_runtime35 = require("react/jsx-runtime");
     var getClassName25 = get_class_name_factory_default2("Puck", styles_module_default8);
     function Puck({
       children,
       config,
-      data: initialData = { content: [], root: { props: { title: "" } } },
+      data: initialData = { content: [], root: {} },
       ui: initialUi,
       onChange,
       onPublish,
@@ -79662,11 +79615,11 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
     }) {
       var _a3;
       const historyStore = useHistoryStore();
-      const [reducer2] = (0, import_react28.useState)(
+      const [reducer2] = (0, import_react29.useState)(
         () => createReducer({ config, record: historyStore.record })
       );
-      const [initialAppState] = (0, import_react28.useState)(() => {
-        var _a22, _b, _c, _d;
+      const [initialAppState] = (0, import_react29.useState)(() => {
+        var _a22, _b, _c, _d, _e, _f;
         const initial = __spreadValues2(__spreadValues2({}, defaultAppState2.ui), initialUi);
         let clientUiState = {};
         if (typeof window !== "undefined") {
@@ -79693,8 +79646,13 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
             };
           }
         }
+        const rootProps2 = ((_e = initialData == null ? void 0 : initialData.root) == null ? void 0 : _e.props) || initialData.root || {};
+        const defaultedRootProps = __spreadValues2(__spreadValues2({}, (_f = config.root) == null ? void 0 : _f.defaultProps), rootProps2);
         return __spreadProps2(__spreadValues2({}, defaultAppState2), {
-          data: initialData,
+          data: __spreadProps2(__spreadValues2({}, initialData), {
+            root: defaultedRootProps,
+            content: initialData.content || []
+          }),
           ui: __spreadProps2(__spreadValues2(__spreadValues2({}, initial), clientUiState), {
             // Store categories under componentList on state to allow render functions and plugins to modify
             componentList: config.categories ? Object.entries(config.categories).reduce(
@@ -79713,7 +79671,7 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
           })
         });
       });
-      const [appState, dispatch] = (0, import_react28.useReducer)(
+      const [appState, dispatch] = (0, import_react29.useReducer)(
         reducer2,
         flushZones(initialAppState)
       );
@@ -79724,9 +79682,9 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
         config,
         dispatch
       );
-      const [menuOpen, setMenuOpen] = (0, import_react28.useState)(false);
+      const [menuOpen, setMenuOpen] = (0, import_react29.useState)(false);
       const { itemSelector, leftSideBarVisible, rightSideBarVisible } = ui;
-      const setItemSelector = (0, import_react28.useCallback)(
+      const setItemSelector = (0, import_react29.useCallback)(
         (newItemSelector) => {
           if (newItemSelector === itemSelector)
             return;
@@ -79739,21 +79697,21 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
         [itemSelector]
       );
       const selectedItem = itemSelector ? getItem2(itemSelector, data) : null;
-      (0, import_react28.useEffect)(() => {
+      (0, import_react29.useEffect)(() => {
         if (onChange)
           onChange(data);
       }, [data]);
       const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
-      const [draggedItem, setDraggedItem] = (0, import_react28.useState)();
+      const [draggedItem, setDraggedItem] = (0, import_react29.useState)();
       const rootProps = data.root.props || data.root;
-      (0, import_react28.useEffect)(() => {
+      (0, import_react29.useEffect)(() => {
         if (Object.keys(data.root).length > 0 && !data.root.props) {
           console.error(
             "Warning: Defining props on `root` is deprecated. Please use `root.props`. This will be a breaking change in a future release."
           );
         }
       }, []);
-      const toggleSidebars = (0, import_react28.useCallback)(
+      const toggleSidebars = (0, import_react29.useCallback)(
         (sidebar) => {
           const widerViewport = window.matchMedia("(min-width: 638px)").matches;
           const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -79767,7 +79725,7 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
         },
         [dispatch, leftSideBarVisible, rightSideBarVisible]
       );
-      (0, import_react28.useEffect)(() => {
+      (0, import_react29.useEffect)(() => {
         if (!window.matchMedia("(min-width: 638px)").matches) {
           dispatch({
             type: "setUi",
@@ -79790,11 +79748,11 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
           window.removeEventListener("resize", handleResize);
         };
       }, []);
-      const defaultRender = (0, import_react28.useMemo)(() => {
-        const PuckDefault = ({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: children2 });
+      const defaultRender = (0, import_react29.useMemo)(() => {
+        const PuckDefault = ({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: children2 });
         return PuckDefault;
       }, []);
-      const defaultHeaderRender = (0, import_react28.useMemo)(() => {
+      const defaultHeaderRender = (0, import_react29.useMemo)(() => {
         if (renderHeader) {
           console.warn(
             "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
@@ -79802,45 +79760,45 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
           const RenderHeader = (_a22) => {
             var _b = _a22, { actions } = _b, props = __objRest2(_b, ["actions"]);
             const Comp = renderHeader;
-            return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Comp, __spreadProps2(__spreadValues2({}, props), { dispatch, state: appState, children: actions }));
+            return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Comp, __spreadProps2(__spreadValues2({}, props), { dispatch, state: appState, children: actions }));
           };
           return RenderHeader;
         }
         return defaultRender;
       }, [renderHeader]);
-      const defaultHeaderActionsRender = (0, import_react28.useMemo)(() => {
+      const defaultHeaderActionsRender = (0, import_react29.useMemo)(() => {
         if (renderHeaderActions) {
           console.warn(
             "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
           );
           const RenderHeader = (props) => {
             const Comp = renderHeaderActions;
-            return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Comp, __spreadProps2(__spreadValues2({}, props), { dispatch, state: appState }));
+            return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Comp, __spreadProps2(__spreadValues2({}, props), { dispatch, state: appState }));
           };
           return RenderHeader;
         }
         return defaultRender;
       }, [renderHeader]);
-      const loadedOverrides = (0, import_react28.useMemo)(() => {
+      const loadedOverrides = (0, import_react29.useMemo)(() => {
         return loadOverrides({ overrides, plugins });
       }, [plugins]);
-      const CustomPuck = (0, import_react28.useMemo)(
+      const CustomPuck = (0, import_react29.useMemo)(
         () => loadedOverrides.puck || defaultRender,
         [loadedOverrides]
       );
-      const CustomHeader = (0, import_react28.useMemo)(
+      const CustomHeader = (0, import_react29.useMemo)(
         () => loadedOverrides.header || defaultHeaderRender,
         [loadedOverrides]
       );
-      const CustomHeaderActions = (0, import_react28.useMemo)(
+      const CustomHeaderActions = (0, import_react29.useMemo)(
         () => loadedOverrides.headerActions || defaultHeaderActionsRender,
         [loadedOverrides]
       );
-      const [mounted, setMounted] = (0, import_react28.useState)(false);
-      (0, import_react28.useEffect)(() => {
+      const [mounted, setMounted] = (0, import_react29.useState)(false);
+      (0, import_react29.useEffect)(() => {
         setMounted(true);
       }, []);
-      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "Puck", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "Puck", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         AppProvider,
         {
           value: {
@@ -79855,7 +79813,7 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
             viewports,
             iframe
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             DragDropContext2,
             {
               autoScrollerOptions: { disabled: dnd == null ? void 0 : dnd.disableAutoScroll },
@@ -79911,7 +79869,7 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
                   });
                 }
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                 DropZoneProvider,
                 {
                   value: {
@@ -79925,7 +79883,7 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
                     mode: "edit",
                     areaId: "root"
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomPuck, { children: children || /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomPuck, { children: children || /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                     "div",
                     {
                       className: getClassName25({
@@ -79935,65 +79893,62 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
                         rightSideBarVisible
                       }),
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("layout"), children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassName25("layout"), children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                             CustomHeader,
                             {
-                              actions: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomHeaderActions, {}),
-                                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                                  Button,
-                                  {
-                                    onClick: () => {
-                                      onPublish && onPublish(data);
-                                    },
-                                    icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Globe, { size: "14px" }),
-                                    children: "Publish"
-                                  }
-                                )
-                              ] }),
-                              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("header", { className: getClassName25("header"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerInner"), children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerToggle"), children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("leftSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                              actions: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                                Button,
+                                {
+                                  onClick: () => {
+                                    onPublish && onPublish(data);
+                                  },
+                                  icon: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Globe, { size: "14px" }),
+                                  children: "Publish"
+                                }
+                              ) }) }),
+                              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("header", { className: getClassName25("header"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassName25("headerInner"), children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassName25("headerToggle"), children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName25("leftSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                     IconButton,
                                     {
                                       onClick: () => {
                                         toggleSidebars("left");
                                       },
                                       title: "Toggle left sidebar",
-                                      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PanelLeft, { focusable: "false" })
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PanelLeft, { focusable: "false" })
                                     }
                                   ) }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName25("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                     IconButton,
                                     {
                                       onClick: () => {
                                         toggleSidebars("right");
                                       },
                                       title: "Toggle right sidebar",
-                                      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PanelRight, { focusable: "false" })
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PanelRight, { focusable: "false" })
                                     }
                                   ) })
                                 ] }),
-                                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("headerTitle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Heading2, { rank: 2, size: "xs", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName25("headerTitle"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Heading2, { rank: 2, size: "xs", children: [
                                   headerTitle || rootProps.title || "Page",
-                                  headerPath && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+                                  headerPath && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
                                     " ",
-                                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("code", { className: getClassName25("headerPath"), children: headerPath })
+                                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("code", { className: getClassName25("headerPath"), children: headerPath })
                                   ] })
                                 ] }) }),
-                                /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerTools"), children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassName25("headerTools"), children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName25("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                     IconButton,
                                     {
                                       onClick: () => {
                                         return setMenuOpen(!menuOpen);
                                       },
                                       title: "Toggle menu bar",
-                                      children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronDown, { focusable: "false" })
+                                      children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChevronDown, { focusable: "false" })
                                     }
                                   ) }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                     MenuBar,
                                     {
                                       appState,
@@ -80001,7 +79956,16 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
                                       dispatch,
                                       onPublish,
                                       menuOpen,
-                                      renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomHeaderActions, {}),
+                                      renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                                        Button,
+                                        {
+                                          onClick: () => {
+                                            onPublish && onPublish(data);
+                                          },
+                                          icon: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Globe, { size: "14px" }),
+                                          children: "Publish"
+                                        }
+                                      ) }),
                                       setMenuOpen
                                     }
                                   )
@@ -80009,23 +79973,23 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
                               ] }) })
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("leftSideBar"), children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SidebarSection2, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Components, {}) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SidebarSection2, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Outline, {}) })
+                          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassName25("leftSideBar"), children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SidebarSection2, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Components, {}) }),
+                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SidebarSection2, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Outline, {}) })
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Canvas, {}),
-                          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("rightSideBar"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Canvas, {}),
+                          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName25("rightSideBar"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                             SidebarSection2,
                             {
                               noPadding: true,
                               noBorderTop: true,
                               showBreadcrumbs: true,
                               title: selectedItem ? (_a3 = config.components[selectedItem.type]["label"]) != null ? _a3 : selectedItem.type : "Page",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Fields, {})
+                              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Fields, {})
                             }
                           ) })
                         ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                           "div",
                           {
                             id: "puck-portal-root",
@@ -80047,16 +80011,20 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
     Puck.Outline = Outline;
     Puck.Preview = Preview;
     init_react_import2();
-    var import_jsx_runtime35 = require("react/jsx-runtime");
+    var import_jsx_runtime36 = require("react/jsx-runtime");
     function Render({
       config,
       data
     }) {
       var _a3;
-      const rootProps = data.root.props || data.root;
+      const defaultedData = __spreadProps2(__spreadValues2({}, data), {
+        root: data.root || {},
+        content: data.content || []
+      });
+      const rootProps = defaultedData.root.props || defaultedData.root;
       const title = (rootProps == null ? void 0 : rootProps.title) || "";
       if ((_a3 = config.root) == null ? void 0 : _a3.render) {
-        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropZoneProvider, { value: { data: defaultedData, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           config.root.render,
           __spreadProps2(__spreadValues2({}, rootProps), {
             puck: {
@@ -80065,11 +80033,11 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
             title,
             editMode: false,
             id: "puck-root",
-            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropZone, { zone: rootDroppableId2 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropZone, { zone: rootDroppableId2 })
           })
         ) });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropZone, { zone: rootDroppableId2 }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropZoneProvider, { value: { data: defaultedData, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropZone, { zone: rootDroppableId2 }) });
     }
     init_react_import2();
     var migrations = [
@@ -80093,6 +80061,11 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
       return migrations == null ? void 0 : migrations.reduce((acc, migration) => migration(acc), data);
     }
     init_react_import2();
+    init_react_import2();
+    var defaultData = (data) => __spreadProps2(__spreadValues2({}, data), {
+      root: data.root || {},
+      content: data.content || []
+    });
     function transformProps(data, propTransforms) {
       const mapItem = (item) => {
         if (propTransforms[item.type]) {
@@ -80102,18 +80075,19 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
         }
         return item;
       };
-      const rootProps = data.root.props || data.root;
-      let newRoot = __spreadValues2({}, data.root);
+      const defaultedData = defaultData(data);
+      const rootProps = defaultedData.root.props || defaultedData.root;
+      let newRoot = __spreadValues2({}, defaultedData.root);
       if (propTransforms["root"]) {
-        if (data.root.props) {
+        if (defaultedData.root.props) {
           newRoot.props = propTransforms["root"](rootProps);
         } else {
           newRoot = propTransforms["root"](rootProps);
         }
       }
-      const afterPropTransforms = __spreadProps2(__spreadValues2({}, data), {
+      const afterPropTransforms = __spreadProps2(__spreadValues2({}, defaultedData), {
         root: newRoot,
-        content: data.content.map(mapItem),
+        content: defaultedData.content.map(mapItem),
         zones: Object.keys(data.zones || {}).reduce(
           (acc, zoneKey) => __spreadProps2(__spreadValues2({}, acc), {
             [zoneKey]: data.zones[zoneKey].map(mapItem)
@@ -80126,7 +80100,8 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
     init_react_import2();
     function resolveAllData(data, config, onResolveStart, onResolveEnd) {
       return __async2(this, null, function* () {
-        const dynamicRoot = yield resolveRootData(data, config);
+        const defaultedData = defaultData(data);
+        const dynamicRoot = yield resolveRootData(defaultedData, config);
         const { zones = {} } = data;
         const zoneKeys = Object.keys(zones);
         const resolvedZones = {};
@@ -80139,10 +80114,10 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
             onResolveEnd
           );
         }
-        return __spreadProps2(__spreadValues2({}, data), {
+        return __spreadProps2(__spreadValues2({}, defaultedData), {
           root: dynamicRoot,
           content: yield resolveAllComponentData(
-            data.content,
+            defaultedData.content,
             config,
             onResolveStart,
             onResolveEnd
@@ -80234,7 +80209,7 @@ init_react_import();
 // src/HeadingAnalyzer.tsx
 init_react_import();
 var import_react12 = require("react");
-var import_puck = __toESM(require_dist2());
+var import_puck = __toESM(require_dist());
 
 // ../core/components/SidebarSection/index.tsx
 init_react_import();
@@ -80422,7 +80397,7 @@ var defaultViewports = [
 var import_ua_parser_js = __toESM(require_ua_parser());
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var defaultAppState = {
-  data: { content: [], root: { props: { title: "" } } },
+  data: { content: [], root: { props: {} } },
   ui: {
     leftSideBarVisible: true,
     rightSideBarVisible: true,