@measured/puck 0.16.1-canary.1a6216d → 0.16.1-canary.20d7309

package/dist/index.js

@@ -243,7 +243,7 @@ var get_class_name_factory_default = getClassNameFactory;
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css#css-module
 init_react_import();
-var styles_module_default = { "ActionBar": "_ActionBar_fp58q_1", "ActionBar-actionsLabel": "_ActionBar-actionsLabel_fp58q_16", "ActionBar-group": "_ActionBar-group_fp58q_29", "ActionBar-action": "_ActionBar-action_fp58q_16" };
+var styles_module_default = { "ActionBar": "_ActionBar_1xlbj_1", "ActionBar-actionsLabel": "_ActionBar-actionsLabel_1xlbj_16", "ActionBar-group": "_ActionBar-group_1xlbj_29", "ActionBar-action": "_ActionBar-action_1xlbj_16" };
 
 // components/ActionBar/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -764,16 +764,15 @@ var useResolvedPermissions = (config, appState, globalPermissions, setComponentL
   const resolveDataForItem = (0, import_react4.useCallback)(
     (item, force = false) => __async(void 0, null, function* () {
       var _a, _b, _c;
-      setComponentLoading == null ? void 0 : setComponentLoading(item.props.id);
       const componentConfig = item.type === "root" ? config.root : config.components[item.type];
       if (!componentConfig) {
-        unsetComponentLoading == null ? void 0 : unsetComponentLoading(item.props.id);
         return;
       }
       const initialPermissions = __spreadValues(__spreadValues({}, globalPermissions), componentConfig.permissions);
       if (componentConfig.resolvePermissions) {
         const changed = getChanged(item, (_a = cache3[item.props.id]) == null ? void 0 : _a.lastData);
         if (Object.values(changed).some((el) => el === true) || force) {
+          setComponentLoading == null ? void 0 : setComponentLoading(item.props.id);
           const resolvedPermissions2 = yield componentConfig.resolvePermissions(
             item,
             {
@@ -793,9 +792,9 @@ var useResolvedPermissions = (config, appState, globalPermissions, setComponentL
           setResolvedPermissions((p) => __spreadProps(__spreadValues({}, p), {
             [item.props.id]: resolvedPermissions2
           }));
+          unsetComponentLoading == null ? void 0 : unsetComponentLoading(item.props.id);
         }
       }
-      unsetComponentLoading == null ? void 0 : unsetComponentLoading(item.props.id);
     }),
     [config, globalPermissions, appState, cache3]
   );
@@ -1447,6 +1446,9 @@ var ArrayField = ({
                   e.stopPropagation();
                   setHovering(false);
                 },
+                onClick: (e) => {
+                  e.preventDefault();
+                },
                 children: [
                   localState.arrayState.items.map((item, i) => {
                     const { _arrayId = `${id}-${i}`, _originalIndex = i } = item;
@@ -2325,9 +2327,12 @@ function AutoFieldInternal(props) {
   const Render2 = render[field.type];
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Render2, __spreadProps(__spreadValues({}, mergedProps), { children }));
 }
+var RECENT_CHANGE_TIMEOUT = 200;
 function AutoFieldPrivate(props) {
   const { value, onChange } = props;
   const [localValue, setLocalValue] = (0, import_react13.useState)(value);
+  const [recentlyChanged, setRecentlyChanged] = (0, import_react13.useState)(false);
+  const timeoutRef = (0, import_react13.useRef)();
   const onChangeDb = (0, import_use_debounce.useDebouncedCallback)(
     (val, ui) => {
       onChange(val, ui);
@@ -2337,10 +2342,17 @@ function AutoFieldPrivate(props) {
   );
   const onChangeLocal = (0, import_react13.useCallback)((val, ui) => {
     setLocalValue(val);
+    setRecentlyChanged(true);
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+      setRecentlyChanged(false);
+    }, RECENT_CHANGE_TIMEOUT);
     onChangeDb(val, ui);
   }, []);
   (0, import_react13.useEffect)(() => {
-    setLocalValue(value);
+    if (!recentlyChanged) {
+      setLocalValue(value);
+    }
   }, [value]);
   const localProps = {
     value: localValue,
@@ -2348,8 +2360,16 @@ function AutoFieldPrivate(props) {
   };
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AutoFieldInternal, __spreadValues(__spreadValues({}, props), localProps));
 }
-var DefaultLabel = (props) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", __spreadValues({}, props));
 function AutoField(props) {
+  const DefaultLabel = (0, import_react13.useMemo)(() => {
+    const DefaultLabel2 = (labelProps) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      "div",
+      __spreadProps(__spreadValues({}, labelProps), {
+        className: getClassName15({ readOnly: props.readOnly })
+      })
+    );
+    return DefaultLabel2;
+  }, [props.readOnly]);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AutoFieldInternal, __spreadProps(__spreadValues({}, props), { Label: DefaultLabel }));
 }
 
@@ -2488,13 +2508,8 @@ var isIos = () => [
 ].includes(navigator.platform) || // iPad on iOS 13 detection
 navigator.userAgent.includes("Mac") && "ontouchend" in document;
 
-// components/DefaultOverride/index.tsx
-init_react_import();
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var DefaultOverride = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children });
-
 // components/DraggableComponent/index.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var getClassName17 = get_class_name_factory_default("DraggableComponent", styles_module_default11);
 var space = 8;
 var actionsOverlayTop = space * 6.5;
@@ -2503,7 +2518,7 @@ var actionsRight = space;
 var DefaultActionBar = ({
   label,
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ActionBar, { label, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ActionBar.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DefaultOverride, { children }) }) });
+}) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ActionBar, { label, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ActionBar.Group, { children }) });
 var DraggableComponent = ({
   children,
   id,
@@ -2543,14 +2558,14 @@ var DraggableComponent = ({
   const permissions = getPermissions({
     item: selectedItem
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     El,
     {
       draggableId: id,
       index,
       isDragDisabled,
       disableSecondaryAnimation,
-      children: (provided, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      children: (provided, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
         "div",
         __spreadProps(__spreadValues(__spreadValues({
           ref: provided.innerRef
@@ -2573,15 +2588,15 @@ var DraggableComponent = ({
           onClick,
           children: [
             debug,
-            isLoading && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: getClassName17("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Loader, {}) }),
-            isSelected && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            isLoading && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: getClassName17("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loader, {}) }),
+            isSelected && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               "div",
               {
                 className: getClassName17("actionsOverlay"),
                 style: {
                   top: actionsOverlayTop / zoomConfig.zoom
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "div",
                   {
                     className: getClassName17("actions"),
@@ -2590,16 +2605,16 @@ var DraggableComponent = ({
                       top: actionsTop / zoomConfig.zoom,
                       right: actionsRight / zoomConfig.zoom
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(CustomActionBar, { label, children: [
-                      permissions.duplicate && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Copy, { size: 16 }) }),
-                      permissions.delete && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Trash, { size: 16 }) })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(CustomActionBar, { label, children: [
+                      permissions.duplicate && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Copy, { size: 16 }) }),
+                      permissions.delete && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Trash, { size: 16 }) })
                     ] })
                   }
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: getClassName17("overlay") }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: getClassName17("contents"), children })
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: getClassName17("overlay") }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: getClassName17("contents"), children })
           ]
         })
       )
@@ -2630,7 +2645,7 @@ var getZoneId = (zoneCompound) => {
 };
 
 // components/DropZone/context.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var dropZoneContext = (0, import_react17.createContext)(null);
 var DropZoneProvider = ({
   children,
@@ -2708,7 +2723,7 @@ var DropZoneProvider = ({
     [value, setPathData]
   );
   const [zoneWillDrag, setZoneWillDrag] = (0, import_react17.useState)("");
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children: value && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children: value && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     dropZoneContext.Provider,
     {
       value: __spreadValues({
@@ -2734,7 +2749,7 @@ var DropZoneProvider = ({
 };
 
 // components/DropZone/index.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var getClassName18 = get_class_name_factory_default("DropZone", styles_module_default12);
 function DropZoneEdit({ zone, allow, disallow, style }) {
   var _a;
@@ -2789,7 +2804,7 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
   const draggingOverArea = userIsDragging && zoneArea === draggedSourceArea;
   const draggingNewComponent = draggedSourceId == null ? void 0 : draggedSourceId.startsWith("component-list");
   if (!(ctx == null ? void 0 : ctx.config) || !ctx.setHoveringArea || !ctx.setHoveringZone || !ctx.setHoveringComponent || !ctx.setItemSelector || !ctx.registerPath || !ctx.dispatch) {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: "DropZone requires context to work." });
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: "DropZone requires context to work." });
   }
   const {
     hoveringArea = "root",
@@ -2830,7 +2845,7 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
   }
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
   const isAreaSelected = selectedItem && zoneArea === selectedItem.props.id;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "div",
     {
       className: getClassName18({
@@ -2847,14 +2862,14 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
       onMouseUp: () => {
         setZoneWillDrag("");
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         Droppable,
         {
           droppableId: zoneCompound,
           direction: "vertical",
           isDropDisabled: !isEnabled,
           children: (provided, snapshot) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
               "div",
               __spreadProps(__spreadValues({}, (provided || { droppableProps: {} }).droppableProps), {
                 className: getClassName18("content"),
@@ -2884,7 +2899,7 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
                       "draggable-"
                     )[1] === componentId;
                     const containsZone = areasWithZones ? areasWithZones[componentId] : false;
-                    const Render2 = config.components[item.type] ? config.components[item.type].render : () => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { style: { padding: 48, textAlign: "center" }, children: [
+                    const Render2 = config.components[item.type] ? config.components[item.type].render : () => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { padding: 48, textAlign: "center" }, children: [
                       "No configuration for ",
                       item.type
                     ] });
@@ -2896,19 +2911,19 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
                         appContext2.state.data
                       )
                     }).drag;
-                    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                       "div",
                       {
                         className: getClassName18("item"),
                         style: { zIndex: isDragging ? 1 : void 0 },
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                             DropZoneProvider,
                             {
                               value: __spreadProps(__spreadValues({}, ctx), {
                                 areaId: componentId
                               }),
-                              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                                 DraggableComponent,
                                 {
                                   label,
@@ -2976,12 +2991,12 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
                                   style: {
                                     pointerEvents: userIsDragging && draggingNewComponent ? "all" : void 0
                                   },
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: getClassName18("renderWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Render2, __spreadValues({}, defaultedProps)) })
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: getClassName18("renderWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Render2, __spreadValues({}, defaultedProps)) })
                                 }
                               )
                             }
                           ),
-                          userIsDragging && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                          userIsDragging && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                             "div",
                             {
                               className: getClassName18("hitbox"),
@@ -2998,7 +3013,7 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
                     );
                   }),
                   provided == null ? void 0 : provided.placeholder,
-                  (snapshot == null ? void 0 : snapshot.isDraggingOver) && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  (snapshot == null ? void 0 : snapshot.isDraggingOver) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                     "div",
                     {
                       "data-puck-placeholder": true,
@@ -3030,14 +3045,14 @@ function DropZoneRender({ zone }) {
     zoneCompound = `${areaId}:${zone}`;
     content = setupZone(data, zoneCompound).zones[zoneCompound];
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: content.map((item) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children: content.map((item) => {
     const Component = config.components[item.type];
     if (Component) {
-      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         DropZoneProvider,
         {
           value: { data, config, areaId: item.props.id },
-          children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             Component.render,
             __spreadProps(__spreadValues({}, item.props), {
               puck: { renderDropZone: DropZone }
@@ -3053,9 +3068,9 @@ function DropZoneRender({ zone }) {
 function DropZone(props) {
   const ctx = (0, import_react18.useContext)(dropZoneContext);
   if ((ctx == null ? void 0 : ctx.mode) === "edit") {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropZoneEdit, __spreadValues({}, props));
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropZoneEdit, __spreadValues({}, props));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropZoneRender, __spreadValues({}, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropZoneRender, __spreadValues({}, props));
 }
 
 // components/Puck/index.tsx
@@ -3197,7 +3212,7 @@ var useBreadcrumbs = (renderCount) => {
 };
 
 // components/SidebarSection/index.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var getClassName19 = get_class_name_factory_default("SidebarSection", styles_module_default13);
 var SidebarSection = ({
   children,
@@ -3210,15 +3225,15 @@ var SidebarSection = ({
 }) => {
   const { setUi } = useAppContext();
   const breadcrumbs = useBreadcrumbs(1);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "div",
     {
       className: getClassName19({ noBorderTop, noPadding }),
       style: { background },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: getClassName19("title"), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: getClassName19("breadcrumbs"), children: [
-          showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: getClassName19("breadcrumb"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: getClassName19("title"), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: getClassName19("breadcrumbs"), children: [
+          showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: getClassName19("breadcrumb"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               "button",
               {
                 type: "button",
@@ -3227,12 +3242,12 @@ var SidebarSection = ({
                 children: breadcrumb.label
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ChevronRight, { size: 16 })
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChevronRight, { size: 16 })
           ] }, i)) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: getClassName19("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Heading, { rank: "2", size: "xs", children: title }) })
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: getClassName19("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Heading, { rank: "2", size: "xs", children: title }) })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: getClassName19("content"), children }),
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: getClassName19("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Loader, { size: 32 }) })
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: getClassName19("content"), children }),
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: getClassName19("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Loader, { size: 32 }) })
       ]
     }
   );
@@ -3613,7 +3628,7 @@ init_react_import();
 var styles_module_default14 = { "MenuBar": "_MenuBar_8pf8c_1", "MenuBar--menuOpen": "_MenuBar--menuOpen_8pf8c_14", "MenuBar-inner": "_MenuBar-inner_8pf8c_29", "MenuBar-history": "_MenuBar-history_8pf8c_45" };
 
 // components/MenuBar/index.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var getClassName20 = get_class_name_factory_default("MenuBar", styles_module_default14);
 function MenuBar({
   appState,
@@ -3627,7 +3642,7 @@ function MenuBar({
     history: { back, forward, historyStore }
   } = useAppContext();
   const { hasFuture = false, hasPast = false } = historyStore || {};
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
       className: getClassName20({ menuOpen }),
@@ -3641,12 +3656,12 @@ function MenuBar({
           setMenuOpen(false);
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: getClassName20("inner"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: getClassName20("history"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconButton, { title: "undo", disabled: !hasPast, onClick: back, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Undo2, { size: 21 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconButton, { title: "redo", disabled: !hasFuture, onClick: forward, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Redo2, { size: 21 }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: getClassName20("inner"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: getClassName20("history"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(IconButton, { title: "undo", disabled: !hasPast, onClick: back, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Undo2, { size: 21 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(IconButton, { title: "redo", disabled: !hasFuture, onClick: forward, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Redo2, { size: 21 }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, { children: renderHeaderActions && renderHeaderActions({
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: renderHeaderActions && renderHeaderActions({
           state: appState,
           dispatch
         }) })
@@ -3668,7 +3683,7 @@ var styles_module_default16 = { "PuckFields": "_PuckFields_jp3lw_1", "PuckFields
 
 // components/Puck/components/Fields/index.tsx
 var import_react21 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
 var defaultPageFields = {
   title: { type: "text" }
@@ -3676,10 +3691,10 @@ var defaultPageFields = {
 var DefaultFields = ({
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, { children });
 };
 var useResolvedFields = () => {
-  var _a;
+  var _a, _b;
   const { selectedItem, state, config } = useAppContext();
   const { data } = state;
   const rootFields = ((_a = config.root) == null ? void 0 : _a.fields) || defaultPageFields;
@@ -3691,14 +3706,17 @@ var useResolvedFields = () => {
   const [fieldsLoading, setFieldsLoading] = (0, import_react21.useState)(false);
   const defaultResolveFields = (_componentData, _params) => defaultFields;
   const componentData = selectedItem ? selectedItem : { props: rootProps, readOnly: data.root.readOnly };
+  const hasComponentResolver = selectedItem && (componentConfig == null ? void 0 : componentConfig.resolveFields);
+  const hasRootResolver = !selectedItem && ((_b = config.root) == null ? void 0 : _b.resolveFields);
+  const hasResolver = hasComponentResolver || hasRootResolver;
   const resolveFields = (0, import_react21.useCallback)(
     (..._0) => __async(void 0, [..._0], function* (fields = {}) {
-      var _a2, _b, _c;
+      var _a2;
       const lastData = ((_a2 = lastSelectedData.props) == null ? void 0 : _a2.id) === componentData.props.id ? lastSelectedData : null;
       const changed = getChanged(componentData, lastData);
       setLastSelectedData(componentData);
-      if (selectedItem && (componentConfig == null ? void 0 : componentConfig.resolveFields)) {
-        return yield componentConfig == null ? void 0 : componentConfig.resolveFields(
+      if (hasComponentResolver) {
+        return yield componentConfig.resolveFields(
           componentData,
           {
             changed,
@@ -3709,8 +3727,8 @@ var useResolvedFields = () => {
           }
         );
       }
-      if (!selectedItem && ((_b = config.root) == null ? void 0 : _b.resolveFields)) {
-        return yield (_c = config.root) == null ? void 0 : _c.resolveFields(componentData, {
+      if (hasRootResolver) {
+        return yield config.root.resolveFields(componentData, {
           changed,
           fields,
           lastFields: resolvedFields,
@@ -3728,12 +3746,16 @@ var useResolvedFields = () => {
     [data, config, componentData, selectedItem, resolvedFields, state]
   );
   (0, import_react21.useEffect)(() => {
-    setFieldsLoading(true);
-    resolveFields(defaultFields).then((fields) => {
-      setResolvedFields(fields || {});
-      setFieldsLoading(false);
-    });
-  }, [data, defaultFields, state.ui.itemSelector]);
+    if (hasResolver) {
+      setFieldsLoading(true);
+      resolveFields(defaultFields).then((fields) => {
+        setResolvedFields(fields || {});
+        setFieldsLoading(false);
+      });
+    } else {
+      setResolvedFields(defaultFields);
+    }
+  }, [data, defaultFields, state.ui.itemSelector, hasResolver]);
   return [resolvedFields, fieldsLoading];
 };
 var Fields = () => {
@@ -3755,7 +3777,7 @@ var Fields = () => {
   const isLoading = fieldsResolving || componentResolving;
   const rootProps = data.root.props || data.root;
   const Wrapper = (0, import_react21.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "form",
     {
       className: getClassName21(),
@@ -3763,7 +3785,7 @@ var Fields = () => {
         e.preventDefault();
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Wrapper, { isLoading, itemSelector, children: Object.keys(fields).map((fieldName) => {
+        /* @__PURE__ */ (0, import_jsx_runtime27.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) => {
@@ -3833,7 +3855,7 @@ var Fields = () => {
             const { edit } = getPermissions({
               item: selectedItem
             });
-            return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               AutoFieldPrivate,
               {
                 field,
@@ -3850,7 +3872,7 @@ var Fields = () => {
             const { edit } = getPermissions({
               root: true
             });
-            return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               AutoFieldPrivate,
               {
                 field,
@@ -3864,7 +3886,7 @@ var Fields = () => {
             );
           }
         }) }),
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: getClassName21("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: getClassName21("loadingOverlayInner"), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Loader, { size: 16 }) }) })
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: getClassName21("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: getClassName21("loadingOverlayInner"), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Loader, { size: 16 }) }) })
       ]
     }
   );
@@ -3885,7 +3907,7 @@ init_react_import();
 var styles_module_default17 = { "ComponentList": "_ComponentList_odh9d_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_odh9d_5", "ComponentList-content": "_ComponentList-content_odh9d_9", "ComponentList-title": "_ComponentList-title_odh9d_17", "ComponentList-titleIcon": "_ComponentList-titleIcon_odh9d_53" };
 
 // components/ComponentList/index.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var getClassName22 = get_class_name_factory_default("ComponentList", styles_module_default17);
 var ComponentListItem = ({
   name,
@@ -3896,7 +3918,7 @@ var ComponentListItem = ({
   const canInsert = getPermissions({
     type: name
   }).insert;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     Drawer.Item,
     {
       label,
@@ -3914,8 +3936,8 @@ var ComponentList = ({
 }) => {
   const { config, state, setUi } = useAppContext();
   const { expanded = true } = state.ui.componentList[id] || {};
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: getClassName22({ isExpanded: expanded }), children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: getClassName22({ isExpanded: expanded }), children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
       "button",
       {
         type: "button",
@@ -3929,14 +3951,14 @@ var ComponentList = ({
         }),
         title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: getClassName22("titleIcon"), children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ChevronUp, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ChevronDown, { size: 12 }) })
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: getClassName22("titleIcon"), children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ChevronUp, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ChevronDown, { size: 12 }) })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: getClassName22("content"), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Drawer, { droppableId: title, children: children || Object.keys(config.components).map((componentKey, i) => {
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: getClassName22("content"), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Drawer, { droppableId: title, children: children || Object.keys(config.components).map((componentKey, i) => {
       var _a;
-      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         ComponentListItem,
         {
           label: (_a = config.components[componentKey]["label"]) != null ? _a : componentKey,
@@ -3951,7 +3973,7 @@ var ComponentList = ({
 ComponentList.Item = ComponentListItem;
 
 // lib/use-component-list.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var useComponentList = (config, ui) => {
   const [componentList, setComponentList] = (0, import_react22.useState)();
   (0, import_react22.useEffect)(() => {
@@ -3964,7 +3986,7 @@ var useComponentList = (config, ui) => {
           if (category.visible === false || !category.components) {
             return null;
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             ComponentList,
             {
               id: categoryKey,
@@ -3973,7 +3995,7 @@ var useComponentList = (config, ui) => {
                 var _a2;
                 matchedComponents.push(componentName);
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   ComponentList.Item,
                   {
                     label: (_a2 = componentConf["label"]) != null ? _a2 : componentName,
@@ -3993,7 +4015,7 @@ var useComponentList = (config, ui) => {
       );
       if (remainingComponents.length > 0 && !((_a = ui.componentList.other) == null ? void 0 : _a.components) && ((_b = ui.componentList.other) == null ? void 0 : _b.visible) !== false) {
         _componentList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             ComponentList,
             {
               id: "other",
@@ -4001,7 +4023,7 @@ var useComponentList = (config, ui) => {
               children: remainingComponents.map((componentName, i) => {
                 var _a2;
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   ComponentList.Item,
                   {
                     name: componentName,
@@ -4024,12 +4046,12 @@ var useComponentList = (config, ui) => {
 
 // components/Puck/components/Components/index.tsx
 var import_react23 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var Components = () => {
   const { config, state, overrides } = useAppContext();
   const componentList = useComponentList(config, state.ui);
   const Wrapper = (0, import_react23.useMemo)(() => overrides.components || "div", [overrides]);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ComponentList, { id: "all" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ComponentList, { id: "all" }) });
 };
 
 // components/Puck/components/Preview/index.tsx
@@ -4041,7 +4063,7 @@ init_react_import();
 var import_react24 = require("react");
 var import_object_hash = __toESM(require("object-hash"));
 var import_react_dom2 = require("react-dom");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var styleSelector = 'style, link[rel="stylesheet"]';
 var collectStyles = (doc) => {
   const collected = [];
@@ -4241,7 +4263,7 @@ var CopyHostStyles = ({
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children });
 };
 var autoFrameContext = (0, import_react24.createContext)({});
 var useFrame = () => (0, import_react24.useContext)(autoFrameContext);
@@ -4273,7 +4295,7 @@ function AutoFrame(_a) {
       setMountTarget((_a2 = ref.current.contentDocument) == null ? void 0 : _a2.getElementById("frame-root"));
     }
   }, [ref, loaded]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "iframe",
     __spreadProps(__spreadValues({}, props), {
       className,
@@ -4283,7 +4305,7 @@ function AutoFrame(_a) {
       onLoad: () => {
         setLoaded(true);
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CopyHostStyles, { debug, onStylesLoaded, children: (0, import_react_dom2.createPortal)(children, mountTarget) }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CopyHostStyles, { debug, onStylesLoaded, children: (0, import_react_dom2.createPortal)(children, mountTarget) }) })
     })
   );
 }
@@ -4295,7 +4317,7 @@ init_react_import();
 var styles_module_default18 = { "PuckPreview": "_PuckPreview_rxwlr_1", "PuckPreview-frame": "_PuckPreview-frame_rxwlr_5" };
 
 // components/Puck/components/Preview/index.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var getClassName23 = get_class_name_factory_default("PuckPreview", styles_module_default18);
 var Preview = ({ id = "puck-preview" }) => {
   const { config, dispatch, state, setStatus, iframe, overrides } = useAppContext();
@@ -4304,13 +4326,13 @@ var Preview = ({ id = "puck-preview" }) => {
       var _a, _b;
       return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadValues({
         id: "puck-root"
-      }, pageProps)) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: pageProps.children });
+      }, pageProps)) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: pageProps.children });
     },
     [config.root]
   );
   const Frame = (0, import_react25.useMemo)(() => overrides.iframe, [overrides]);
   const rootProps = state.data.root.props || state.data.root;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
       className: getClassName23(),
@@ -4318,7 +4340,7 @@ var Preview = ({ id = "puck-preview" }) => {
       onClick: () => {
         dispatch({ type: "setUi", ui: __spreadProps(__spreadValues({}, state.ui), { itemSelector: null }) });
       },
-      children: iframe.enabled ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      children: iframe.enabled ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         AutoFrame_default,
         {
           id: "preview-frame",
@@ -4327,27 +4349,27 @@ var Preview = ({ id = "puck-preview" }) => {
           onStylesLoaded: () => {
             setStatus("READY");
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
-            const inner = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
+            const inner = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               Page,
               __spreadProps(__spreadValues({}, rootProps), {
                 puck: { renderDropZone: DropZone, isEditing: true },
                 editMode: true,
-                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DropZone, { zone: rootDroppableId })
+                children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropZone, { zone: rootDroppableId })
               })
             );
             if (Frame) {
-              return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Frame, { document: document2, children: inner });
+              return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Frame, { document: document2, children: inner });
             }
             return inner;
           } })
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { id: "preview-frame", className: getClassName23("frame"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { id: "preview-frame", className: getClassName23("frame"), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         Page,
         __spreadProps(__spreadValues({}, rootProps), {
           puck: { renderDropZone: DropZone, isEditing: true },
           editMode: true,
-          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DropZone, { zone: rootDroppableId })
+          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropZone, { zone: rootDroppableId })
         })
       ) })
     }
@@ -4411,7 +4433,7 @@ var isChildOfZone = (item, maybeChild, ctx) => {
 };
 
 // components/LayerTree/index.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var getClassName24 = get_class_name_factory_default("LayerTree", styles_module_default19);
 var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default19);
 var LayerTree = ({
@@ -4425,14 +4447,14 @@ var LayerTree = ({
 }) => {
   const zones = data.zones || {};
   const ctx = (0, import_react26.useContext)(dropZoneContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName24("zoneTitle"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Layers, { size: "16" }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: getClassName24("zoneTitle"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Layers, { size: "16" }) }),
       " ",
       label
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("ul", { className: getClassName24(), children: [
-      zoneContent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName24("helper"), children: "No items" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("ul", { className: getClassName24(), children: [
+      zoneContent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName24("helper"), children: "No items" }),
       zoneContent.map((item, i) => {
         var _a;
         const isSelected = (itemSelector == null ? void 0 : itemSelector.index) === i && (itemSelector.zone === zone || itemSelector.zone === rootDroppableId && !zone);
@@ -4450,7 +4472,7 @@ var LayerTree = ({
         const childIsSelected = isChildOfZone(item, selectedItem, ctx);
         const componentConfig = config.components[item.type];
         const label2 = (_a = componentConfig == null ? void 0 : componentConfig["label"]) != null ? _a : item.type.toString();
-        return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
           "li",
           {
             className: getClassNameLayer({
@@ -4460,7 +4482,7 @@ var LayerTree = ({
               childIsSelected
             }),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -4493,22 +4515,22 @@ var LayerTree = ({
                     setHoveringComponent(null);
                   },
                   children: [
-                    containsZone && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                    containsZone && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       "div",
                       {
                         className: getClassNameLayer("chevron"),
                         title: isSelected ? "Collapse" : "Expand",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronDown, { size: "12" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChevronDown, { size: "12" })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassNameLayer("title"), children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Type, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(LayoutGrid, { size: "16" }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassNameLayer("name"), children: label2 })
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: getClassNameLayer("title"), children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Type, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(LayoutGrid, { size: "16" }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassNameLayer("name"), children: label2 })
                     ] })
                   ]
                 }
               ) }),
-              containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                 LayerTree,
                 {
                   config,
@@ -4531,7 +4553,7 @@ var LayerTree = ({
 
 // components/Puck/components/Outline/index.tsx
 var import_react27 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var Outline = () => {
   const { dispatch, state, overrides, config } = useAppContext();
   const { data, ui } = state;
@@ -4546,8 +4568,8 @@ var Outline = () => {
     []
   );
   const Wrapper = (0, import_react27.useMemo)(() => overrides.outline || "div", [overrides]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-    (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+    (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       LayerTree,
       {
         config,
@@ -4560,7 +4582,7 @@ var Outline = () => {
     ),
     Object.entries(findZonesForArea(data, "root")).map(
       ([zoneKey, zone]) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           LayerTree,
           {
             config,
@@ -4817,11 +4839,11 @@ init_react_import();
 var styles_module_default20 = { "ViewportControls": "_ViewportControls_g1wgg_1", "ViewportControls-divider": "_ViewportControls-divider_g1wgg_15", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_g1wgg_21", "ViewportButton--isActive": "_ViewportButton--isActive_g1wgg_34", "ViewportButton-inner": "_ViewportButton-inner_g1wgg_34" };
 
 // components/ViewportControls/index.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var icons = {
-  Smartphone: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Smartphone, { size: 16 }),
-  Tablet: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Tablet, { size: 16 }),
-  Monitor: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Monitor, { size: 16 })
+  Smartphone: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Smartphone, { size: 16 }),
+  Tablet: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Tablet, { size: 16 }),
+  Monitor: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Monitor, { size: 16 })
 };
 var getClassName25 = get_class_name_factory_default("ViewportControls", styles_module_default20);
 var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default20);
@@ -4837,7 +4859,7 @@ var ViewportButton = ({
   (0, import_react29.useEffect)(() => {
     setIsActive(width === state.ui.viewports.current.width);
   }, [width, state.ui.viewports.current.width]);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     IconButton,
     {
       title,
@@ -4846,7 +4868,7 @@ var ViewportButton = ({
         e.stopPropagation();
         onClick({ width, height });
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: getClassNameButton("inner"), children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: getClassNameButton("inner"), children })
     }
   ) });
 };
@@ -4882,8 +4904,8 @@ var ViewportControls = ({
     ].filter((a) => a.value <= autoZoom).sort((a, b) => a.value > b.value ? 1 : -1),
     [autoZoom]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: getClassName25(), children: [
-    viewports.map((viewport, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassName25(), children: [
+    viewports.map((viewport, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       ViewportButton,
       {
         height: viewport.height,
@@ -4894,8 +4916,8 @@ var ViewportControls = ({
       },
       i
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: getClassName25("divider") }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName25("divider") }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       IconButton,
       {
         title: "Zoom viewport out",
@@ -4909,10 +4931,10 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ZoomOut, { size: 16 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ZoomOut, { size: 16 })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       IconButton,
       {
         title: "Zoom viewport in",
@@ -4926,11 +4948,11 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ZoomIn, { size: 16 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ZoomIn, { size: 16 })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: getClassName25("divider") }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName25("divider") }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "select",
       {
         className: getClassName25("zoomSelect"),
@@ -4938,7 +4960,7 @@ var ViewportControls = ({
         onChange: (e) => {
           onZoom(parseFloat(e.currentTarget.value));
         },
-        children: zoomOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        children: zoomOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           "option",
           {
             value: option.value,
@@ -4953,7 +4975,7 @@ var ViewportControls = ({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css#css-module
 init_react_import();
-var styles_module_default21 = { "PuckCanvas": "_PuckCanvas_esbg1_1", "PuckCanvas-controls": "_PuckCanvas-controls_esbg1_16", "PuckCanvas-inner": "_PuckCanvas-inner_esbg1_21", "PuckCanvas-root": "_PuckCanvas-root_esbg1_32", "PuckCanvas--ready": "_PuckCanvas--ready_esbg1_56", "PuckCanvas-loader": "_PuckCanvas-loader_esbg1_60", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_esbg1_70" };
+var styles_module_default21 = { "PuckCanvas": "_PuckCanvas_avf1c_1", "PuckCanvas-controls": "_PuckCanvas-controls_avf1c_16", "PuckCanvas-inner": "_PuckCanvas-inner_avf1c_21", "PuckCanvas-root": "_PuckCanvas-root_avf1c_32", "PuckCanvas--ready": "_PuckCanvas--ready_avf1c_57", "PuckCanvas-loader": "_PuckCanvas-loader_avf1c_62", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_avf1c_72" };
 
 // lib/get-zoom-config.ts
 init_react_import();
@@ -4986,7 +5008,7 @@ var getZoomConfig = (uiViewport, frame, zoom) => {
 };
 
 // components/Puck/components/Canvas/index.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var getClassName26 = get_class_name_factory_default("PuckCanvas", styles_module_default21);
 var ZOOM_ON_CHANGE = true;
 var Canvas = () => {
@@ -4996,7 +5018,7 @@ var Canvas = () => {
   const frameRef = (0, import_react30.useRef)(null);
   const [showTransition, setShowTransition] = (0, import_react30.useState)(false);
   const defaultRender = (0, import_react30.useMemo)(() => {
-    const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children });
+    const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children });
     return PuckDefault;
   }, []);
   const CustomPreview = (0, import_react30.useMemo)(
@@ -5057,7 +5079,7 @@ var Canvas = () => {
       setShowLoader(true);
     }, 500);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "div",
     {
       className: getClassName26({
@@ -5070,7 +5092,7 @@ var Canvas = () => {
         recordHistory: true
       }),
       children: [
-        ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: getClassName26("controls"), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: getClassName26("controls"), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           ViewportControls,
           {
             autoZoom: zoomConfig.autoZoom,
@@ -5095,8 +5117,8 @@ var Canvas = () => {
             }
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: getClassName26("inner"), ref: frameRef, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: getClassName26("inner"), ref: frameRef, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "div",
             {
               className: getClassName26("root"),
@@ -5108,10 +5130,10 @@ var Canvas = () => {
                 overflow: iframe.enabled ? void 0 : "auto"
               },
               suppressHydrationWarning: true,
-              children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Preview, {}) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Preview, {}) })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: getClassName26("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Loader, { size: 24 }) })
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: getClassName26("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Loader, { size: 24 }) })
         ] })
       ]
     }
@@ -5199,6 +5221,11 @@ var useLoadedOverrides = ({
   }, [plugins, overrides]);
 };
 
+// components/DefaultOverride/index.tsx
+init_react_import();
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var DefaultOverride = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children });
+
 // components/Puck/index.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var getClassName27 = get_class_name_factory_default("Puck", styles_module_default15);