@measured/puck 0.16.1-canary.8fcf0d8 → 0.16.1

package/dist/index.mjs

@@ -138,7 +138,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
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -180,6 +180,7 @@ import {
   useCallback as useCallback5,
   useEffect as useEffect9,
   useMemo as useMemo2,
+  useRef as useRef2,
   useState as useState10
 } from "react";
 
@@ -652,16 +653,15 @@ var useResolvedPermissions = (config, appState, globalPermissions, setComponentL
   const resolveDataForItem = useCallback(
     (item, force = false) => __async(void 0, null, function* () {
       var _a, _b, _c;
-      setComponentLoading == null ? void 0 : setComponentLoading(item.props.id);
       const componentConfig = item.type === "root" ? config.root : config.components[item.type];
       if (!componentConfig) {
-        unsetComponentLoading == null ? void 0 : unsetComponentLoading(item.props.id);
         return;
       }
       const initialPermissions = __spreadValues(__spreadValues({}, globalPermissions), componentConfig.permissions);
       if (componentConfig.resolvePermissions) {
         const changed = getChanged(item, (_a = cache3[item.props.id]) == null ? void 0 : _a.lastData);
         if (Object.values(changed).some((el) => el === true) || force) {
+          setComponentLoading == null ? void 0 : setComponentLoading(item.props.id);
           const resolvedPermissions2 = yield componentConfig.resolvePermissions(
             item,
             {
@@ -681,9 +681,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]
   );
@@ -1339,6 +1339,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;
@@ -2217,9 +2220,12 @@ function AutoFieldInternal(props) {
   const Render2 = render[field.type];
   return /* @__PURE__ */ jsx20(Render2, __spreadProps(__spreadValues({}, mergedProps), { children }));
 }
+var RECENT_CHANGE_TIMEOUT = 200;
 function AutoFieldPrivate(props) {
   const { value, onChange } = props;
   const [localValue, setLocalValue] = useState10(value);
+  const [recentlyChanged, setRecentlyChanged] = useState10(false);
+  const timeoutRef = useRef2();
   const onChangeDb = useDebouncedCallback(
     (val, ui) => {
       onChange(val, ui);
@@ -2229,10 +2235,17 @@ function AutoFieldPrivate(props) {
   );
   const onChangeLocal = useCallback5((val, ui) => {
     setLocalValue(val);
+    setRecentlyChanged(true);
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+      setRecentlyChanged(false);
+    }, RECENT_CHANGE_TIMEOUT);
     onChangeDb(val, ui);
   }, []);
   useEffect9(() => {
-    setLocalValue(value);
+    if (!recentlyChanged) {
+      setLocalValue(value);
+    }
   }, [value]);
   const localProps = {
     value: localValue,
@@ -2240,8 +2253,16 @@ function AutoFieldPrivate(props) {
   };
   return /* @__PURE__ */ jsx20(AutoFieldInternal, __spreadValues(__spreadValues({}, props), localProps));
 }
-var DefaultLabel = (props) => /* @__PURE__ */ jsx20("div", __spreadValues({}, props));
 function AutoField(props) {
+  const DefaultLabel = useMemo2(() => {
+    const DefaultLabel2 = (labelProps) => /* @__PURE__ */ jsx20(
+      "div",
+      __spreadProps(__spreadValues({}, labelProps), {
+        className: getClassName15({ readOnly: props.readOnly })
+      })
+    );
+    return DefaultLabel2;
+  }, [props.readOnly]);
   return /* @__PURE__ */ jsx20(AutoFieldInternal, __spreadProps(__spreadValues({}, props), { Label: DefaultLabel }));
 }
 
@@ -2388,13 +2409,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();
-import { Fragment as Fragment9, jsx as jsx22 } from "react/jsx-runtime";
-var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx22(Fragment9, { children });
-
 // components/DraggableComponent/index.tsx
-import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
 var getClassName17 = get_class_name_factory_default("DraggableComponent", styles_module_default11);
 var space = 8;
 var actionsOverlayTop = space * 6.5;
@@ -2403,7 +2419,7 @@ var actionsRight = space;
 var DefaultActionBar = ({
   label,
   children
-}) => /* @__PURE__ */ jsx23(ActionBar, { label, children: /* @__PURE__ */ jsx23(ActionBar.Group, { children: /* @__PURE__ */ jsx23(DefaultOverride, { children }) }) });
+}) => /* @__PURE__ */ jsx22(ActionBar, { label, children: /* @__PURE__ */ jsx22(ActionBar.Group, { children }) });
 var DraggableComponent = ({
   children,
   id,
@@ -2443,7 +2459,7 @@ var DraggableComponent = ({
   const permissions = getPermissions({
     item: selectedItem
   });
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx22(
     El,
     {
       draggableId: id,
@@ -2473,15 +2489,15 @@ var DraggableComponent = ({
           onClick,
           children: [
             debug,
-            isLoading && /* @__PURE__ */ jsx23("div", { className: getClassName17("loadingOverlay"), children: /* @__PURE__ */ jsx23(Loader, {}) }),
-            isSelected && /* @__PURE__ */ jsx23(
+            isLoading && /* @__PURE__ */ jsx22("div", { className: getClassName17("loadingOverlay"), children: /* @__PURE__ */ jsx22(Loader, {}) }),
+            isSelected && /* @__PURE__ */ jsx22(
               "div",
               {
                 className: getClassName17("actionsOverlay"),
                 style: {
                   top: actionsOverlayTop / zoomConfig.zoom
                 },
-                children: /* @__PURE__ */ jsx23(
+                children: /* @__PURE__ */ jsx22(
                   "div",
                   {
                     className: getClassName17("actions"),
@@ -2491,15 +2507,15 @@ var DraggableComponent = ({
                       right: actionsRight / zoomConfig.zoom
                     },
                     children: /* @__PURE__ */ jsxs11(CustomActionBar, { label, children: [
-                      permissions.duplicate && /* @__PURE__ */ jsx23(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ jsx23(Copy, { size: 16 }) }),
-                      permissions.delete && /* @__PURE__ */ jsx23(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ jsx23(Trash, { size: 16 }) })
+                      permissions.duplicate && /* @__PURE__ */ jsx22(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ jsx22(Copy, { size: 16 }) }),
+                      permissions.delete && /* @__PURE__ */ jsx22(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ jsx22(Trash, { size: 16 }) })
                     ] })
                   }
                 )
               }
             ),
-            /* @__PURE__ */ jsx23("div", { className: getClassName17("overlay") }),
-            /* @__PURE__ */ jsx23("div", { className: getClassName17("contents"), children })
+            /* @__PURE__ */ jsx22("div", { className: getClassName17("overlay") }),
+            /* @__PURE__ */ jsx22("div", { className: getClassName17("contents"), children })
           ]
         })
       )
@@ -2534,7 +2550,7 @@ var getZoneId = (zoneCompound) => {
 };
 
 // components/DropZone/context.tsx
-import { Fragment as Fragment10, jsx as jsx24 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx23 } from "react/jsx-runtime";
 var dropZoneContext = createContext3(null);
 var DropZoneProvider = ({
   children,
@@ -2612,7 +2628,7 @@ var DropZoneProvider = ({
     [value, setPathData]
   );
   const [zoneWillDrag, setZoneWillDrag] = useState13("");
-  return /* @__PURE__ */ jsx24(Fragment10, { children: value && /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx23(Fragment9, { children: value && /* @__PURE__ */ jsx23(
     dropZoneContext.Provider,
     {
       value: __spreadValues({
@@ -2638,7 +2654,7 @@ var DropZoneProvider = ({
 };
 
 // components/DropZone/index.tsx
-import { Fragment as Fragment11, jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
 var getClassName18 = get_class_name_factory_default("DropZone", styles_module_default12);
 function DropZoneEdit({ zone, allow, disallow, style }) {
   var _a;
@@ -2693,7 +2709,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__ */ jsx25("div", { children: "DropZone requires context to work." });
+    return /* @__PURE__ */ jsx24("div", { children: "DropZone requires context to work." });
   }
   const {
     hoveringArea = "root",
@@ -2734,7 +2750,7 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
   }
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
   const isAreaSelected = selectedItem && zoneArea === selectedItem.props.id;
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx24(
     "div",
     {
       className: getClassName18({
@@ -2751,7 +2767,7 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
       onMouseUp: () => {
         setZoneWillDrag("");
       },
-      children: /* @__PURE__ */ jsx25(
+      children: /* @__PURE__ */ jsx24(
         Droppable,
         {
           droppableId: zoneCompound,
@@ -2806,13 +2822,13 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
                         className: getClassName18("item"),
                         style: { zIndex: isDragging ? 1 : void 0 },
                         children: [
-                          /* @__PURE__ */ jsx25(
+                          /* @__PURE__ */ jsx24(
                             DropZoneProvider,
                             {
                               value: __spreadProps(__spreadValues({}, ctx), {
                                 areaId: componentId
                               }),
-                              children: /* @__PURE__ */ jsx25(
+                              children: /* @__PURE__ */ jsx24(
                                 DraggableComponent,
                                 {
                                   label,
@@ -2880,12 +2896,12 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
                                   style: {
                                     pointerEvents: userIsDragging && draggingNewComponent ? "all" : void 0
                                   },
-                                  children: /* @__PURE__ */ jsx25("div", { className: getClassName18("renderWrapper"), children: /* @__PURE__ */ jsx25(Render2, __spreadValues({}, defaultedProps)) })
+                                  children: /* @__PURE__ */ jsx24("div", { className: getClassName18("renderWrapper"), children: /* @__PURE__ */ jsx24(Render2, __spreadValues({}, defaultedProps)) })
                                 }
                               )
                             }
                           ),
-                          userIsDragging && /* @__PURE__ */ jsx25(
+                          userIsDragging && /* @__PURE__ */ jsx24(
                             "div",
                             {
                               className: getClassName18("hitbox"),
@@ -2902,7 +2918,7 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
                     );
                   }),
                   provided == null ? void 0 : provided.placeholder,
-                  (snapshot == null ? void 0 : snapshot.isDraggingOver) && /* @__PURE__ */ jsx25(
+                  (snapshot == null ? void 0 : snapshot.isDraggingOver) && /* @__PURE__ */ jsx24(
                     "div",
                     {
                       "data-puck-placeholder": true,
@@ -2934,14 +2950,14 @@ function DropZoneRender({ zone }) {
     zoneCompound = `${areaId}:${zone}`;
     content = setupZone(data, zoneCompound).zones[zoneCompound];
   }
-  return /* @__PURE__ */ jsx25(Fragment11, { children: content.map((item) => {
+  return /* @__PURE__ */ jsx24(Fragment10, { children: content.map((item) => {
     const Component = config.components[item.type];
     if (Component) {
-      return /* @__PURE__ */ jsx25(
+      return /* @__PURE__ */ jsx24(
         DropZoneProvider,
         {
           value: { data, config, areaId: item.props.id },
-          children: /* @__PURE__ */ jsx25(
+          children: /* @__PURE__ */ jsx24(
             Component.render,
             __spreadProps(__spreadValues({}, item.props), {
               puck: { renderDropZone: DropZone }
@@ -2957,9 +2973,9 @@ function DropZoneRender({ zone }) {
 function DropZone(props) {
   const ctx = useContext3(dropZoneContext);
   if ((ctx == null ? void 0 : ctx.mode) === "edit") {
-    return /* @__PURE__ */ jsx25(DropZoneEdit, __spreadValues({}, props));
+    return /* @__PURE__ */ jsx24(DropZoneEdit, __spreadValues({}, props));
   }
-  return /* @__PURE__ */ jsx25(DropZoneRender, __spreadValues({}, props));
+  return /* @__PURE__ */ jsx24(DropZoneRender, __spreadValues({}, props));
 }
 
 // components/Puck/index.tsx
@@ -3107,7 +3123,7 @@ var useBreadcrumbs = (renderCount) => {
 };
 
 // components/SidebarSection/index.tsx
-import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
 var getClassName19 = get_class_name_factory_default("SidebarSection", styles_module_default13);
 var SidebarSection = ({
   children,
@@ -3126,9 +3142,9 @@ var SidebarSection = ({
       className: getClassName19({ noBorderTop, noPadding }),
       style: { background },
       children: [
-        /* @__PURE__ */ jsx26("div", { className: getClassName19("title"), children: /* @__PURE__ */ jsxs13("div", { className: getClassName19("breadcrumbs"), children: [
+        /* @__PURE__ */ jsx25("div", { className: getClassName19("title"), children: /* @__PURE__ */ jsxs13("div", { className: getClassName19("breadcrumbs"), children: [
           showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs13("div", { className: getClassName19("breadcrumb"), children: [
-            /* @__PURE__ */ jsx26(
+            /* @__PURE__ */ jsx25(
               "button",
               {
                 type: "button",
@@ -3137,12 +3153,12 @@ var SidebarSection = ({
                 children: breadcrumb.label
               }
             ),
-            /* @__PURE__ */ jsx26(ChevronRight, { size: 16 })
+            /* @__PURE__ */ jsx25(ChevronRight, { size: 16 })
           ] }, i)) : null,
-          /* @__PURE__ */ jsx26("div", { className: getClassName19("heading"), children: /* @__PURE__ */ jsx26(Heading, { rank: "2", size: "xs", children: title }) })
+          /* @__PURE__ */ jsx25("div", { className: getClassName19("heading"), children: /* @__PURE__ */ jsx25(Heading, { rank: "2", size: "xs", children: title }) })
         ] }) }),
-        /* @__PURE__ */ jsx26("div", { className: getClassName19("content"), children }),
-        isLoading && /* @__PURE__ */ jsx26("div", { className: getClassName19("loadingOverlay"), children: /* @__PURE__ */ jsx26(Loader, { size: 32 }) })
+        /* @__PURE__ */ jsx25("div", { className: getClassName19("content"), children }),
+        isLoading && /* @__PURE__ */ jsx25("div", { className: getClassName19("loadingOverlay"), children: /* @__PURE__ */ jsx25(Loader, { size: 32 }) })
       ]
     }
   );
@@ -3523,7 +3539,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
-import { Fragment as Fragment12, jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
 var getClassName20 = get_class_name_factory_default("MenuBar", styles_module_default14);
 function MenuBar({
   appState,
@@ -3537,7 +3553,7 @@ function MenuBar({
     history: { back, forward, historyStore }
   } = useAppContext();
   const { hasFuture = false, hasPast = false } = historyStore || {};
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       className: getClassName20({ menuOpen }),
@@ -3553,10 +3569,10 @@ function MenuBar({
       },
       children: /* @__PURE__ */ jsxs14("div", { className: getClassName20("inner"), children: [
         /* @__PURE__ */ jsxs14("div", { className: getClassName20("history"), children: [
-          /* @__PURE__ */ jsx27(IconButton, { title: "undo", disabled: !hasPast, onClick: back, children: /* @__PURE__ */ jsx27(Undo2, { size: 21 }) }),
-          /* @__PURE__ */ jsx27(IconButton, { title: "redo", disabled: !hasFuture, onClick: forward, children: /* @__PURE__ */ jsx27(Redo2, { size: 21 }) })
+          /* @__PURE__ */ jsx26(IconButton, { title: "undo", disabled: !hasPast, onClick: back, children: /* @__PURE__ */ jsx26(Undo2, { size: 21 }) }),
+          /* @__PURE__ */ jsx26(IconButton, { title: "redo", disabled: !hasFuture, onClick: forward, children: /* @__PURE__ */ jsx26(Redo2, { size: 21 }) })
         ] }),
-        /* @__PURE__ */ jsx27(Fragment12, { children: renderHeaderActions && renderHeaderActions({
+        /* @__PURE__ */ jsx26(Fragment11, { children: renderHeaderActions && renderHeaderActions({
           state: appState,
           dispatch
         }) })
@@ -3578,7 +3594,7 @@ var styles_module_default16 = { "PuckFields": "_PuckFields_jp3lw_1", "PuckFields
 
 // components/Puck/components/Fields/index.tsx
 import { useCallback as useCallback7, useEffect as useEffect13, useMemo as useMemo6, useState as useState15 } from "react";
-import { Fragment as Fragment13, jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
 var defaultPageFields = {
   title: { type: "text" }
@@ -3586,10 +3602,10 @@ var defaultPageFields = {
 var DefaultFields = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx28(Fragment13, { children });
+  return /* @__PURE__ */ jsx27(Fragment12, { 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;
@@ -3601,14 +3617,17 @@ var useResolvedFields = () => {
   const [fieldsLoading, setFieldsLoading] = useState15(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 = useCallback7(
     (..._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,
@@ -3619,8 +3638,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,
@@ -3638,12 +3657,16 @@ var useResolvedFields = () => {
     [data, config, componentData, selectedItem, resolvedFields, state]
   );
   useEffect13(() => {
-    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 = () => {
@@ -3673,7 +3696,7 @@ var Fields = () => {
         e.preventDefault();
       },
       children: [
-        /* @__PURE__ */ jsx28(Wrapper, { isLoading, itemSelector, children: Object.keys(fields).map((fieldName) => {
+        /* @__PURE__ */ jsx27(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) => {
@@ -3743,7 +3766,7 @@ var Fields = () => {
             const { edit } = getPermissions({
               item: selectedItem
             });
-            return /* @__PURE__ */ jsx28(
+            return /* @__PURE__ */ jsx27(
               AutoFieldPrivate,
               {
                 field,
@@ -3760,7 +3783,7 @@ var Fields = () => {
             const { edit } = getPermissions({
               root: true
             });
-            return /* @__PURE__ */ jsx28(
+            return /* @__PURE__ */ jsx27(
               AutoFieldPrivate,
               {
                 field,
@@ -3774,7 +3797,7 @@ var Fields = () => {
             );
           }
         }) }),
-        isLoading && /* @__PURE__ */ jsx28("div", { className: getClassName21("loadingOverlay"), children: /* @__PURE__ */ jsx28("div", { className: getClassName21("loadingOverlayInner"), children: /* @__PURE__ */ jsx28(Loader, { size: 16 }) }) })
+        isLoading && /* @__PURE__ */ jsx27("div", { className: getClassName21("loadingOverlay"), children: /* @__PURE__ */ jsx27("div", { className: getClassName21("loadingOverlayInner"), children: /* @__PURE__ */ jsx27(Loader, { size: 16 }) }) })
       ]
     }
   );
@@ -3795,7 +3818,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
-import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
 var getClassName22 = get_class_name_factory_default("ComponentList", styles_module_default17);
 var ComponentListItem = ({
   name,
@@ -3806,7 +3829,7 @@ var ComponentListItem = ({
   const canInsert = getPermissions({
     type: name
   }).insert;
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx28(
     Drawer.Item,
     {
       label,
@@ -3839,14 +3862,14 @@ var ComponentList = ({
         }),
         title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
         children: [
-          /* @__PURE__ */ jsx29("div", { children: title }),
-          /* @__PURE__ */ jsx29("div", { className: getClassName22("titleIcon"), children: expanded ? /* @__PURE__ */ jsx29(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx29(ChevronDown, { size: 12 }) })
+          /* @__PURE__ */ jsx28("div", { children: title }),
+          /* @__PURE__ */ jsx28("div", { className: getClassName22("titleIcon"), children: expanded ? /* @__PURE__ */ jsx28(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx28(ChevronDown, { size: 12 }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx29("div", { className: getClassName22("content"), children: /* @__PURE__ */ jsx29(Drawer, { droppableId: title, children: children || Object.keys(config.components).map((componentKey, i) => {
+    /* @__PURE__ */ jsx28("div", { className: getClassName22("content"), children: /* @__PURE__ */ jsx28(Drawer, { droppableId: title, children: children || Object.keys(config.components).map((componentKey, i) => {
       var _a;
-      return /* @__PURE__ */ jsx29(
+      return /* @__PURE__ */ jsx28(
         ComponentListItem,
         {
           label: (_a = config.components[componentKey]["label"]) != null ? _a : componentKey,
@@ -3861,7 +3884,7 @@ var ComponentList = ({
 ComponentList.Item = ComponentListItem;
 
 // lib/use-component-list.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var useComponentList = (config, ui) => {
   const [componentList, setComponentList] = useState16();
   useEffect14(() => {
@@ -3874,7 +3897,7 @@ var useComponentList = (config, ui) => {
           if (category.visible === false || !category.components) {
             return null;
           }
-          return /* @__PURE__ */ jsx30(
+          return /* @__PURE__ */ jsx29(
             ComponentList,
             {
               id: categoryKey,
@@ -3883,7 +3906,7 @@ var useComponentList = (config, ui) => {
                 var _a2;
                 matchedComponents.push(componentName);
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ jsx30(
+                return /* @__PURE__ */ jsx29(
                   ComponentList.Item,
                   {
                     label: (_a2 = componentConf["label"]) != null ? _a2 : componentName,
@@ -3903,7 +3926,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__ */ jsx30(
+          /* @__PURE__ */ jsx29(
             ComponentList,
             {
               id: "other",
@@ -3911,7 +3934,7 @@ var useComponentList = (config, ui) => {
               children: remainingComponents.map((componentName, i) => {
                 var _a2;
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ jsx30(
+                return /* @__PURE__ */ jsx29(
                   ComponentList.Item,
                   {
                     name: componentName,
@@ -3934,12 +3957,12 @@ var useComponentList = (config, ui) => {
 
 // components/Puck/components/Components/index.tsx
 import { useMemo as useMemo7 } from "react";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var Components = () => {
   const { config, state, overrides } = useAppContext();
   const componentList = useComponentList(config, state.ui);
   const Wrapper = useMemo7(() => overrides.components || "div", [overrides]);
-  return /* @__PURE__ */ jsx31(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx31(ComponentList, { id: "all" }) });
+  return /* @__PURE__ */ jsx30(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx30(ComponentList, { id: "all" }) });
 };
 
 // components/Puck/components/Preview/index.tsx
@@ -3952,12 +3975,12 @@ import {
   createContext as createContext4,
   useContext as useContext5,
   useEffect as useEffect15,
-  useRef as useRef2,
+  useRef as useRef3,
   useState as useState17
 } from "react";
 import hash from "object-hash";
 import { createPortal as createPortal2 } from "react-dom";
-import { Fragment as Fragment14, jsx as jsx32 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx31 } from "react/jsx-runtime";
 var styleSelector = 'style, link[rel="stylesheet"]';
 var collectStyles = (doc) => {
   const collected = [];
@@ -4157,7 +4180,7 @@ var CopyHostStyles = ({
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ jsx32(Fragment14, { children });
+  return /* @__PURE__ */ jsx31(Fragment13, { children });
 };
 var autoFrameContext = createContext4({});
 var useFrame = () => useContext5(autoFrameContext);
@@ -4177,7 +4200,7 @@ function AutoFrame(_a) {
   ]);
   const [loaded, setLoaded] = useState17(false);
   const [ctx, setCtx] = useState17({});
-  const ref = useRef2(null);
+  const ref = useRef3(null);
   const [mountTarget, setMountTarget] = useState17();
   useEffect15(() => {
     var _a2;
@@ -4189,7 +4212,7 @@ function AutoFrame(_a) {
       setMountTarget((_a2 = ref.current.contentDocument) == null ? void 0 : _a2.getElementById("frame-root"));
     }
   }, [ref, loaded]);
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx31(
     "iframe",
     __spreadProps(__spreadValues({}, props), {
       className,
@@ -4199,7 +4222,7 @@ function AutoFrame(_a) {
       onLoad: () => {
         setLoaded(true);
       },
-      children: /* @__PURE__ */ jsx32(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx32(CopyHostStyles, { debug, onStylesLoaded, children: createPortal2(children, mountTarget) }) })
+      children: /* @__PURE__ */ jsx31(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx31(CopyHostStyles, { debug, onStylesLoaded, children: createPortal2(children, mountTarget) }) })
     })
   );
 }
@@ -4211,7 +4234,7 @@ init_react_import();
 var styles_module_default18 = { "PuckPreview": "_PuckPreview_rxwlr_1", "PuckPreview-frame": "_PuckPreview-frame_rxwlr_5" };
 
 // components/Puck/components/Preview/index.tsx
-import { Fragment as Fragment15, jsx as jsx33 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx32 } from "react/jsx-runtime";
 var getClassName23 = get_class_name_factory_default("PuckPreview", styles_module_default18);
 var Preview = ({ id = "puck-preview" }) => {
   const { config, dispatch, state, setStatus, iframe, overrides } = useAppContext();
@@ -4220,13 +4243,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__ */ jsx33(Fragment15, { children: pageProps.children });
+      }, pageProps)) : /* @__PURE__ */ jsx32(Fragment14, { children: pageProps.children });
     },
     [config.root]
   );
   const Frame = useMemo8(() => overrides.iframe, [overrides]);
   const rootProps = state.data.root.props || state.data.root;
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx32(
     "div",
     {
       className: getClassName23(),
@@ -4234,7 +4257,7 @@ var Preview = ({ id = "puck-preview" }) => {
       onClick: () => {
         dispatch({ type: "setUi", ui: __spreadProps(__spreadValues({}, state.ui), { itemSelector: null }) });
       },
-      children: iframe.enabled ? /* @__PURE__ */ jsx33(
+      children: iframe.enabled ? /* @__PURE__ */ jsx32(
         AutoFrame_default,
         {
           id: "preview-frame",
@@ -4243,27 +4266,27 @@ var Preview = ({ id = "puck-preview" }) => {
           onStylesLoaded: () => {
             setStatus("READY");
           },
-          children: /* @__PURE__ */ jsx33(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
-            const inner = /* @__PURE__ */ jsx33(
+          children: /* @__PURE__ */ jsx32(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
+            const inner = /* @__PURE__ */ jsx32(
               Page,
               __spreadProps(__spreadValues({}, rootProps), {
                 puck: { renderDropZone: DropZone, isEditing: true },
                 editMode: true,
-                children: /* @__PURE__ */ jsx33(DropZone, { zone: rootDroppableId })
+                children: /* @__PURE__ */ jsx32(DropZone, { zone: rootDroppableId })
               })
             );
             if (Frame) {
-              return /* @__PURE__ */ jsx33(Frame, { document: document2, children: inner });
+              return /* @__PURE__ */ jsx32(Frame, { document: document2, children: inner });
             }
             return inner;
           } })
         }
-      ) : /* @__PURE__ */ jsx33("div", { id: "preview-frame", className: getClassName23("frame"), children: /* @__PURE__ */ jsx33(
+      ) : /* @__PURE__ */ jsx32("div", { id: "preview-frame", className: getClassName23("frame"), children: /* @__PURE__ */ jsx32(
         Page,
         __spreadProps(__spreadValues({}, rootProps), {
           puck: { renderDropZone: DropZone, isEditing: true },
           editMode: true,
-          children: /* @__PURE__ */ jsx33(DropZone, { zone: rootDroppableId })
+          children: /* @__PURE__ */ jsx32(DropZone, { zone: rootDroppableId })
         })
       ) })
     }
@@ -4327,7 +4350,7 @@ var isChildOfZone = (item, maybeChild, ctx) => {
 };
 
 // components/LayerTree/index.tsx
-import { Fragment as Fragment16, jsx as jsx34, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx33, jsxs as jsxs17 } from "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 = ({
@@ -4341,14 +4364,14 @@ var LayerTree = ({
 }) => {
   const zones = data.zones || {};
   const ctx = useContext6(dropZoneContext);
-  return /* @__PURE__ */ jsxs17(Fragment16, { children: [
+  return /* @__PURE__ */ jsxs17(Fragment15, { children: [
     label && /* @__PURE__ */ jsxs17("div", { className: getClassName24("zoneTitle"), children: [
-      /* @__PURE__ */ jsx34("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ jsx34(Layers, { size: "16" }) }),
+      /* @__PURE__ */ jsx33("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ jsx33(Layers, { size: "16" }) }),
       " ",
       label
     ] }),
     /* @__PURE__ */ jsxs17("ul", { className: getClassName24(), children: [
-      zoneContent.length === 0 && /* @__PURE__ */ jsx34("div", { className: getClassName24("helper"), children: "No items" }),
+      zoneContent.length === 0 && /* @__PURE__ */ jsx33("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);
@@ -4376,7 +4399,7 @@ var LayerTree = ({
               childIsSelected
             }),
             children: [
-              /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs17(
+              /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs17(
                 "button",
                 {
                   type: "button",
@@ -4409,22 +4432,22 @@ var LayerTree = ({
                     setHoveringComponent(null);
                   },
                   children: [
-                    containsZone && /* @__PURE__ */ jsx34(
+                    containsZone && /* @__PURE__ */ jsx33(
                       "div",
                       {
                         className: getClassNameLayer("chevron"),
                         title: isSelected ? "Collapse" : "Expand",
-                        children: /* @__PURE__ */ jsx34(ChevronDown, { size: "12" })
+                        children: /* @__PURE__ */ jsx33(ChevronDown, { size: "12" })
                       }
                     ),
                     /* @__PURE__ */ jsxs17("div", { className: getClassNameLayer("title"), children: [
-                      /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ jsx34(Type, { size: "16" }) : /* @__PURE__ */ jsx34(LayoutGrid, { size: "16" }) }),
-                      /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("name"), children: label2 })
+                      /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ jsx33(Type, { size: "16" }) : /* @__PURE__ */ jsx33(LayoutGrid, { size: "16" }) }),
+                      /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("name"), children: label2 })
                     ] })
                   ]
                 }
               ) }),
-              containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ jsx34(
+              containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ jsx33(
                 LayerTree,
                 {
                   config,
@@ -4447,7 +4470,7 @@ var LayerTree = ({
 
 // components/Puck/components/Outline/index.tsx
 import { useCallback as useCallback9, useMemo as useMemo9 } from "react";
-import { Fragment as Fragment17, jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
 var Outline = () => {
   const { dispatch, state, overrides, config } = useAppContext();
   const { data, ui } = state;
@@ -4462,8 +4485,8 @@ var Outline = () => {
     []
   );
   const Wrapper = useMemo9(() => overrides.outline || "div", [overrides]);
-  return /* @__PURE__ */ jsx35(Wrapper, { children: /* @__PURE__ */ jsx35(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ jsxs18(Fragment17, { children: [
-    (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx34(Wrapper, { children: /* @__PURE__ */ jsx34(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ jsxs18(Fragment16, { children: [
+    (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ jsx34(
       LayerTree,
       {
         config,
@@ -4476,7 +4499,7 @@ var Outline = () => {
     ),
     Object.entries(findZonesForArea(data, "root")).map(
       ([zoneKey, zone]) => {
-        return /* @__PURE__ */ jsx35(
+        return /* @__PURE__ */ jsx34(
           LayerTree,
           {
             config,
@@ -4726,7 +4749,7 @@ import {
   useCallback as useCallback10,
   useEffect as useEffect17,
   useMemo as useMemo11,
-  useRef as useRef3,
+  useRef as useRef4,
   useState as useState20
 } from "react";
 
@@ -4739,11 +4762,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
-import { jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
 var icons = {
-  Smartphone: /* @__PURE__ */ jsx36(Smartphone, { size: 16 }),
-  Tablet: /* @__PURE__ */ jsx36(Tablet, { size: 16 }),
-  Monitor: /* @__PURE__ */ jsx36(Monitor, { size: 16 })
+  Smartphone: /* @__PURE__ */ jsx35(Smartphone, { size: 16 }),
+  Tablet: /* @__PURE__ */ jsx35(Tablet, { size: 16 }),
+  Monitor: /* @__PURE__ */ jsx35(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);
@@ -4759,7 +4782,7 @@ var ViewportButton = ({
   useEffect16(() => {
     setIsActive(width === state.ui.viewports.current.width);
   }, [width, state.ui.viewports.current.width]);
-  return /* @__PURE__ */ jsx36("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx35("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx35(
     IconButton,
     {
       title,
@@ -4768,7 +4791,7 @@ var ViewportButton = ({
         e.stopPropagation();
         onClick({ width, height });
       },
-      children: /* @__PURE__ */ jsx36("span", { className: getClassNameButton("inner"), children })
+      children: /* @__PURE__ */ jsx35("span", { className: getClassNameButton("inner"), children })
     }
   ) });
 };
@@ -4805,7 +4828,7 @@ var ViewportControls = ({
     [autoZoom]
   );
   return /* @__PURE__ */ jsxs19("div", { className: getClassName25(), children: [
-    viewports.map((viewport, i) => /* @__PURE__ */ jsx36(
+    viewports.map((viewport, i) => /* @__PURE__ */ jsx35(
       ViewportButton,
       {
         height: viewport.height,
@@ -4816,8 +4839,8 @@ var ViewportControls = ({
       },
       i
     )),
-    /* @__PURE__ */ jsx36("div", { className: getClassName25("divider") }),
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx35("div", { className: getClassName25("divider") }),
+    /* @__PURE__ */ jsx35(
       IconButton,
       {
         title: "Zoom viewport out",
@@ -4831,10 +4854,10 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ jsx36(ZoomOut, { size: 16 })
+        children: /* @__PURE__ */ jsx35(ZoomOut, { size: 16 })
       }
     ),
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx35(
       IconButton,
       {
         title: "Zoom viewport in",
@@ -4848,11 +4871,11 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ jsx36(ZoomIn, { size: 16 })
+        children: /* @__PURE__ */ jsx35(ZoomIn, { size: 16 })
       }
     ),
-    /* @__PURE__ */ jsx36("div", { className: getClassName25("divider") }),
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx35("div", { className: getClassName25("divider") }),
+    /* @__PURE__ */ jsx35(
       "select",
       {
         className: getClassName25("zoomSelect"),
@@ -4860,7 +4883,7 @@ var ViewportControls = ({
         onChange: (e) => {
           onZoom(parseFloat(e.currentTarget.value));
         },
-        children: zoomOptions.map((option) => /* @__PURE__ */ jsx36(
+        children: zoomOptions.map((option) => /* @__PURE__ */ jsx35(
           "option",
           {
             value: option.value,
@@ -4875,7 +4898,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();
@@ -4908,17 +4931,17 @@ var getZoomConfig = (uiViewport, frame, zoom) => {
 };
 
 // components/Puck/components/Canvas/index.tsx
-import { Fragment as Fragment18, jsx as jsx37, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
 var getClassName26 = get_class_name_factory_default("PuckCanvas", styles_module_default21);
 var ZOOM_ON_CHANGE = true;
 var Canvas = () => {
   const { status, iframe } = useAppContext();
   const { dispatch, state, overrides, setUi, zoomConfig, setZoomConfig } = useAppContext();
   const { ui } = state;
-  const frameRef = useRef3(null);
+  const frameRef = useRef4(null);
   const [showTransition, setShowTransition] = useState20(false);
   const defaultRender = useMemo11(() => {
-    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx37(Fragment18, { children });
+    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx36(Fragment17, { children });
     return PuckDefault;
   }, []);
   const CustomPreview = useMemo11(
@@ -4992,7 +5015,7 @@ var Canvas = () => {
         recordHistory: true
       }),
       children: [
-        ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx37("div", { className: getClassName26("controls"), children: /* @__PURE__ */ jsx37(
+        ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx36("div", { className: getClassName26("controls"), children: /* @__PURE__ */ jsx36(
           ViewportControls,
           {
             autoZoom: zoomConfig.autoZoom,
@@ -5018,7 +5041,7 @@ var Canvas = () => {
           }
         ) }),
         /* @__PURE__ */ jsxs20("div", { className: getClassName26("inner"), ref: frameRef, children: [
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx36(
             "div",
             {
               className: getClassName26("root"),
@@ -5030,10 +5053,10 @@ var Canvas = () => {
                 overflow: iframe.enabled ? void 0 : "auto"
               },
               suppressHydrationWarning: true,
-              children: /* @__PURE__ */ jsx37(CustomPreview, { children: /* @__PURE__ */ jsx37(Preview, {}) })
+              children: /* @__PURE__ */ jsx36(CustomPreview, { children: /* @__PURE__ */ jsx36(Preview, {}) })
             }
           ),
-          /* @__PURE__ */ jsx37("div", { className: getClassName26("loader"), children: /* @__PURE__ */ jsx37(Loader, { size: 24 }) })
+          /* @__PURE__ */ jsx36("div", { className: getClassName26("loader"), children: /* @__PURE__ */ jsx36(Loader, { size: 24 }) })
         ] })
       ]
     }
@@ -5121,6 +5144,11 @@ var useLoadedOverrides = ({
   }, [plugins, overrides]);
 };
 
+// components/DefaultOverride/index.tsx
+init_react_import();
+import { Fragment as Fragment18, jsx as jsx37 } from "react/jsx-runtime";
+var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx37(Fragment18, { children });
+
 // components/Puck/index.tsx
 import { Fragment as Fragment19, jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
 var getClassName27 = get_class_name_factory_default("Puck", styles_module_default15);