@measured/puck 0.18.0-canary.4a04445 → 0.18.0-canary.51219fa

package/dist/index.mjs

@@ -205,7 +205,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css#css-module
 init_react_import();
-var styles_module_default2 = { "InputWrapper": "_InputWrapper_1l5m8_1", "Input": "_Input_1l5m8_1", "Input-label": "_Input-label_1l5m8_26", "Input-labelIcon": "_Input-labelIcon_1l5m8_35", "Input-disabledIcon": "_Input-disabledIcon_1l5m8_42", "Input-input": "_Input-input_1l5m8_47", "Input--readOnly": "_Input--readOnly_1l5m8_91", "Input-radioGroupItems": "_Input-radioGroupItems_1l5m8_102", "Input-radio": "_Input-radio_1l5m8_102", "Input-radioInner": "_Input-radioInner_1l5m8_119", "Input-radioInput": "_Input-radioInput_1l5m8_164" };
+var styles_module_default2 = { "InputWrapper": "_InputWrapper_1h1p1_1", "Input-label": "_Input-label_1h1p1_5", "Input-labelIcon": "_Input-labelIcon_1h1p1_14", "Input-disabledIcon": "_Input-disabledIcon_1h1p1_21", "Input-input": "_Input-input_1h1p1_26", "Input": "_Input_1h1p1_1", "Input--readOnly": "_Input--readOnly_1h1p1_70", "Input-radioGroupItems": "_Input-radioGroupItems_1h1p1_81", "Input-radio": "_Input-radio_1h1p1_81", "Input-radioInner": "_Input-radioInner_1h1p1_98", "Input-radioInput": "_Input-radioInput_1h1p1_143" };
 
 // components/AutoField/index.tsx
 import {
@@ -1504,12 +1504,13 @@ var DefaultField = ({
   field,
   onChange,
   readOnly,
-  value,
+  value: _value,
   name,
   label,
   Label: Label2,
   id
 }) => {
+  const value = _value;
   return /* @__PURE__ */ jsx9(
     Label2,
     {
@@ -1527,7 +1528,7 @@ var DefaultField = ({
           type: field.type,
           title: label || name,
           name,
-          value: typeof value === "undefined" ? "" : value.toString(),
+          value: (value == null ? void 0 : value.toString) ? value.toString() : "",
           onChange: (e) => {
             if (field.type === "number") {
               const numberValue = Number(e.currentTarget.value);
@@ -2436,7 +2437,7 @@ import {
   useContext as useContext7,
   useEffect as useEffect15,
   useId,
-  useRef as useRef4,
+  useRef as useRef3,
   useState as useState17
 } from "react";
 import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
@@ -2449,7 +2450,7 @@ import {
   useContext as useContext6,
   useEffect as useEffect14,
   useMemo as useMemo8,
-  useRef as useRef3
+  useRef as useRef2
 } from "react";
 
 // components/DraggableComponent/index.tsx
@@ -2459,7 +2460,7 @@ import {
   useContext as useContext5,
   useEffect as useEffect10,
   useMemo as useMemo7,
-  useRef as useRef2,
+  useRef,
   useState as useState13
 } from "react";
 
@@ -3047,7 +3048,7 @@ var DraggableComponent = ({
     }
   });
   const thisIsDragging = status === "dragging";
-  const ref = useRef2(null);
+  const ref = useRef(null);
   const refSetter = useCallback7(
     (el) => {
       sortableRef(el);
@@ -3098,13 +3099,19 @@ var DraggableComponent = ({
     }
   }, [ref.current]);
   useEffect10(() => {
-    if (isSelected) {
-      ctx == null ? void 0 : ctx.registerPath({
+    ctx == null ? void 0 : ctx.registerPath(
+      id,
+      {
         index,
         zone: zoneCompound
-      });
-    }
-  }, [isSelected]);
+      },
+      componentType
+    );
+    return () => {
+      var _a;
+      (_a = ctx == null ? void 0 : ctx.unregisterPath) == null ? void 0 : _a.call(ctx, id);
+    };
+  }, [id, zoneCompound, index, componentType]);
   const CustomActionBar = useMemo7(
     () => overrides.actionBar || DefaultActionBar,
     [overrides.actionBar]
@@ -3424,9 +3431,20 @@ var useContentWithPreview = (content, zoneCompound) => {
       };
     }
   );
+  const {
+    state: {
+      ui: { isDragging }
+    }
+  } = useAppContext();
   const [contentWithPreview, setContentWithPreview] = useState15(content);
+  const [localPreview, setLocalPreview] = useState15(
+    preview
+  );
   const updateContent = useRenderedCallback(
-    (content2, preview2) => {
+    (content2, preview2, isDragging2) => {
+      if (isDragging2 && !previewExists) {
+        return;
+      }
       if (preview2) {
         if (preview2.type === "insert") {
           setContentWithPreview(
@@ -3456,13 +3474,14 @@ var useContentWithPreview = (content, zoneCompound) => {
           previewExists ? content2.filter((item) => item.props.id !== draggedItemId) : content2
         );
       }
+      setLocalPreview(preview2);
     },
     [draggedItemId, previewExists]
   );
   useEffect12(() => {
-    updateContent(content, preview);
-  }, [content, preview]);
-  return contentWithPreview;
+    updateContent(content, preview, isDragging);
+  }, [content, preview, isDragging]);
+  return [contentWithPreview, localPreview];
 };
 
 // components/DropZone/lib/use-drag-axis.ts
@@ -3506,6 +3525,7 @@ import { Fragment as Fragment6, jsx as jsx22, jsxs as jsxs10 } from "react/jsx-r
 var getClassName17 = get_class_name_factory_default("DropZone", styles_module_default12);
 var getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;
 var RENDER_DEBUG = false;
+var DropZoneEditPure = (props) => /* @__PURE__ */ jsx22(DropZoneEdit, __spreadValues({}, props));
 var DropZoneEdit = forwardRef3(
   function DropZoneEditInternal({
     zone,
@@ -3541,8 +3561,7 @@ var DropZoneEdit = forwardRef3(
       isDeepestZone,
       inNextDeepestArea,
       draggedComponentType,
-      userIsDragging,
-      preview
+      userIsDragging
     } = useContextStore(ZoneStoreContext, (s) => {
       var _a, _b, _c;
       return {
@@ -3550,8 +3569,7 @@ var DropZoneEdit = forwardRef3(
         inNextDeepestArea: s.nextAreaDepthIndex[areaId || ""],
         draggedItemId: (_b = s.draggedItem) == null ? void 0 : _b.id,
         draggedComponentType: (_c = s.draggedItem) == null ? void 0 : _c.data.componentType,
-        userIsDragging: !!s.draggedItem,
-        preview: s.previewIndex[zoneCompound]
+        userIsDragging: !!s.draggedItem
       };
     });
     const { itemSelector } = appContext2.state.ui;
@@ -3576,7 +3594,7 @@ var DropZoneEdit = forwardRef3(
       }
       return data.content || [];
     }, [data, zoneCompound]);
-    const ref = useRef3(null);
+    const ref = useRef2(null);
     const acceptsTarget = useCallback10(
       (componentType) => {
         if (!componentType) {
@@ -3617,7 +3635,10 @@ var DropZoneEdit = forwardRef3(
     if (isEnabled) {
       isEnabled = acceptsTarget(draggedComponentType);
     }
-    const contentWithPreview = useContentWithPreview(content, zoneCompound);
+    const [contentWithPreview, preview] = useContentWithPreview(
+      content,
+      zoneCompound
+    );
     const isDropEnabled = isEnabled && (preview ? contentWithPreview.length === 1 : contentWithPreview.length === 0);
     const droppableConfig = {
       id: zoneCompound,
@@ -3659,16 +3680,15 @@ var DropZoneEdit = forwardRef3(
         },
         "data-testid": `dropzone:${zoneCompound}`,
         "data-puck-dropzone": zoneCompound,
-        "data-puck-dnd": zoneCompound,
         style: __spreadProps(__spreadValues({}, style), {
           "--min-empty-height": `${minEmptyHeight}px`,
-          backgroundColor: RENDER_DEBUG ? getRandomColor() : void 0
+          backgroundColor: RENDER_DEBUG ? getRandomColor() : style == null ? void 0 : style.backgroundColor
         }),
         children: contentWithPreview.map((item, i) => {
-          var _a, _b, _c, _d, _e;
+          var _a, _b, _c, _d, _e, _f, _g;
           const componentId = item.props.id;
           const puckProps = {
-            renderDropZone: (props) => /* @__PURE__ */ jsx22(DropZoneEdit, __spreadValues({}, props)),
+            renderDropZone: DropZoneEditPure,
             isEditing: true,
             dragRef: null
           };
@@ -3685,13 +3705,13 @@ var DropZoneEdit = forwardRef3(
           const componentConfig = config.components[item.type];
           let componentType = item.type;
           let label = (_b = componentConfig == null ? void 0 : componentConfig["label"]) != null ? _b : item.type.toString();
-          if (item.type === "preview" && preview) {
+          if (item.type === "preview") {
             let Preview4 = function() {
               return /* @__PURE__ */ jsx22(DrawerItemInner, { name: label, children: appContext2.overrides.componentItem });
             };
             var Preview3 = Preview4;
-            componentType = preview.componentType;
-            label = (_d = (_c = config.components[componentType]) == null ? void 0 : _c.label) != null ? _d : preview.componentType;
+            componentType = (_c = preview == null ? void 0 : preview.componentType) != null ? _c : "__preview";
+            label = (_f = (_e = (_d = config.components[componentType]) == null ? void 0 : _d.label) != null ? _e : componentType) != null ? _f : "Preview";
             Render2 = Preview4;
           }
           return /* @__PURE__ */ jsx22(
@@ -3706,7 +3726,7 @@ var DropZoneEdit = forwardRef3(
                   zoneCompound,
                   depth: depth + 1,
                   index: i,
-                  isLoading: ((_e = appContext2.componentState[componentId]) == null ? void 0 : _e.loadingCount) > 0,
+                  isLoading: ((_g = appContext2.componentState[componentId]) == null ? void 0 : _g.loadingCount) > 0,
                   isSelected,
                   label,
                   isEnabled,
@@ -3731,6 +3751,7 @@ var DropZoneEdit = forwardRef3(
     );
   }
 );
+var DropZoneRenderPure = (props) => /* @__PURE__ */ jsx22(DropZoneRender, __spreadValues({}, props));
 var DropZoneRender = forwardRef3(
   function DropZoneRenderInternal({ className, style, zone }, ref) {
     const ctx = useContext6(dropZoneContext);
@@ -3770,7 +3791,9 @@ var DropZoneRender = forwardRef3(
             children: /* @__PURE__ */ jsx22(
               Component.render,
               __spreadProps(__spreadValues({}, item.props), {
-                puck: { renderDropZone: DropZoneRender }
+                puck: {
+                  renderDropZone: DropZoneRenderPure
+                }
               })
             )
           },
@@ -3938,6 +3961,13 @@ var getPointerCollisions = (position, manager) => {
   if (elements) {
     for (let i = 0; i < elements.length; i++) {
       const element = elements[i];
+      const dropzoneId = element.getAttribute("data-puck-dropzone");
+      if (dropzoneId) {
+        const droppable = manager.registry.droppables.get(dropzoneId);
+        if (droppable) {
+          candidates.push(droppable);
+        }
+      }
       const id = element.getAttribute("data-puck-dnd");
       if (id) {
         const droppable = manager.registry.droppables.get(id);
@@ -4346,6 +4376,11 @@ var reduceUi = (ui, action) => {
       itemSelector: { index: action.sourceIndex + 1, zone: action.sourceZone }
     });
   }
+  if (action.type === "remove") {
+    return __spreadProps(__spreadValues({}, ui), {
+      itemSelector: null
+    });
+  }
   return ui;
 };
 
@@ -4605,6 +4640,9 @@ var _PointerSensor = class _PointerSensor extends Sensor {
     }
   }
   handlePointerUp(event) {
+    if (!this.source) {
+      return;
+    }
     event.preventDefault();
     event.stopPropagation();
     const { status } = this.manager.dragOperation;
@@ -4722,7 +4760,7 @@ function useDragListener(type, fn, deps = []) {
 }
 var AREA_CHANGE_DEBOUNCE_MS = 100;
 var useTempDisableFallback = (timeout3) => {
-  const lastFallbackDisable = useRef4(null);
+  const lastFallbackDisable = useRef3(null);
   return useCallback11((manager) => {
     collisionStore.setState({ fallbackEnabled: false });
     const fallbackId = generateId();
@@ -4742,7 +4780,7 @@ var DragDropContextClient = ({
   const { state, config, dispatch, resolveData } = useAppContext();
   const id = useId();
   const { data } = state;
-  const debouncedParamsRef = useRef4(null);
+  const debouncedParamsRef = useRef3(null);
   const tempDisableFallback = useTempDisableFallback(100);
   const [zoneStore] = useState17(
     () => createStore3(() => ({
@@ -4881,30 +4919,36 @@ var DragDropContextClient = ({
   ]);
   const [dragListeners, setDragListeners] = useState17({});
   const [pathData, setPathData] = useState17();
-  const dragMode = useRef4(null);
+  const dragMode = useRef3(null);
   const registerPath = useCallback11(
-    (selector) => {
-      const item = getItem(selector, data);
-      if (!item) {
-        return;
-      }
+    (id2, selector, label) => {
       const [area] = getZoneId(selector.zone);
       setPathData((latestPathData = {}) => {
         const parentPathData = latestPathData[area] || { path: [] };
         return __spreadProps(__spreadValues({}, latestPathData), {
-          [item.props.id]: {
+          [id2]: {
             path: [
               ...parentPathData.path,
               ...selector.zone ? [selector.zone] : []
             ],
-            label: item.type
+            label
           }
         });
       });
     },
     [data, setPathData]
   );
-  const initialSelector = useRef4(void 0);
+  const unregisterPath = useCallback11(
+    (id2) => {
+      setPathData((latestPathData = {}) => {
+        const newPathData = __spreadValues({}, latestPathData);
+        delete newPathData[id2];
+        return newPathData;
+      });
+    },
+    [data, setPathData]
+  );
+  const initialSelector = useRef3(void 0);
   return /* @__PURE__ */ jsx23("div", { id, children: /* @__PURE__ */ jsx23(
     dragListenerContext.Provider,
     {
@@ -5100,6 +5144,7 @@ var DragDropContextClient = ({
                 areaId: "root",
                 depth: 0,
                 registerPath,
+                unregisterPath,
                 pathData,
                 path: []
               },
@@ -5249,9 +5294,9 @@ Drawer.Item = DrawerItem;
 // components/Puck/index.tsx
 init_react_import();
 import {
-  useCallback as useCallback17,
-  useEffect as useEffect23,
-  useMemo as useMemo18,
+  useCallback as useCallback18,
+  useEffect as useEffect24,
+  useMemo as useMemo19,
   useReducer,
   useState as useState26
 } from "react";
@@ -5447,36 +5492,61 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css#css-module
 init_react_import();
-var styles_module_default16 = { "PuckFields": "_PuckFields_jp3lw_1", "PuckFields--isLoading": "_PuckFields--isLoading_jp3lw_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_jp3lw_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_jp3lw_25" };
+var styles_module_default16 = { "PuckFields": "_PuckFields_10bh7_1", "PuckFields--isLoading": "_PuckFields--isLoading_10bh7_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_10bh7_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_10bh7_25", "PuckFields-field": "_PuckFields-field_10bh7_32", "PuckFields--wrapFields": "_PuckFields--wrapFields_10bh7_36" };
 
 // components/Puck/components/Fields/index.tsx
-import { useCallback as useCallback12, useEffect as useEffect16, useMemo as useMemo11, useState as useState19 } from "react";
+import { useMemo as useMemo12 } from "react";
+
+// lib/use-resolved-fields.ts
+init_react_import();
+import { useCallback as useCallback13, useEffect as useEffect17, useMemo as useMemo11, useRef as useRef5, useState as useState19 } from "react";
 
 // lib/use-parent.ts
 init_react_import();
-import { useContext as useContext9 } from "react";
-var useParent = (itemSelector) => {
+import { useCallback as useCallback12, useContext as useContext9 } from "react";
+var getParent = (itemSelector, pathData, data) => {
   var _a;
-  const { selectedItem, state } = useAppContext();
-  const { pathData } = useContext9(dropZoneContext) || {};
-  const item = itemSelector ? getItem(itemSelector, state.data) : selectedItem;
-  const breadcrumbs = convertPathDataToBreadcrumbs(item, pathData, state.data);
+  if (!itemSelector) return null;
+  const item = getItem(itemSelector, data);
+  const breadcrumbs = convertPathDataToBreadcrumbs(item, pathData, data);
   const lastItem = breadcrumbs[breadcrumbs.length - 1];
-  const parent = (lastItem == null ? void 0 : lastItem.selector) ? (_a = getItem(lastItem.selector, state.data)) != null ? _a : null : null;
+  const parent = (lastItem == null ? void 0 : lastItem.selector) ? (_a = getItem(lastItem.selector, data)) != null ? _a : null : null;
   return parent || null;
 };
+var useGetParent = () => {
+  const { state } = useAppContext();
+  const { pathData } = useContext9(dropZoneContext) || {};
+  return useCallback12(
+    () => getParent(state.ui.itemSelector, pathData, state.data),
+    [state.ui.itemSelector, pathData, state.data]
+  );
+};
+var useParent = () => {
+  return useGetParent()();
+};
 
-// components/Puck/components/Fields/index.tsx
-import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
-var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
+// lib/use-on-value-change.ts
+init_react_import();
+import { useRef as useRef4, useEffect as useEffect16 } from "react";
+function useOnValueChange(value, onChange, compare = Object.is, deps = []) {
+  const tracked = useRef4(value);
+  useEffect16(() => {
+    const oldValue = tracked.current;
+    if (!compare(value, oldValue)) {
+      tracked.current = value;
+      onChange(value, oldValue);
+    }
+  }, [onChange, compare, value, ...deps]);
+}
+
+// lib/selector-is.ts
+init_react_import();
+var selectorIs = (a, b) => (a == null ? void 0 : a.zone) === (b == null ? void 0 : b.zone) && (a == null ? void 0 : a.index) === (b == null ? void 0 : b.index);
+
+// lib/use-resolved-fields.ts
 var defaultPageFields = {
   title: { type: "text" }
 };
-var DefaultFields = ({
-  children
-}) => {
-  return /* @__PURE__ */ jsx27(Fragment8, { children });
-};
 var useResolvedFields = () => {
   var _a, _b;
   const { selectedItem, state, config } = useAppContext();
@@ -5492,12 +5562,13 @@ var useResolvedFields = () => {
   const [lastSelectedData, setLastSelectedData] = useState19({});
   const [resolvedFields, setResolvedFields] = useState19(defaultFields);
   const [fieldsLoading, setFieldsLoading] = useState19(false);
+  const lastFields = useRef5(defaultFields);
   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 = useCallback12(
+  const resolveFields = useCallback13(
     (..._0) => __async(void 0, [..._0], function* (fields = {}) {
       var _a2;
       const lastData = ((_a2 = lastSelectedData.props) == null ? void 0 : _a2.id) === componentData.props.id ? lastSelectedData : null;
@@ -5509,7 +5580,7 @@ var useResolvedFields = () => {
           {
             changed,
             fields,
-            lastFields: resolvedFields,
+            lastFields: lastFields.current,
             lastData,
             appState: state,
             parent
@@ -5520,7 +5591,7 @@ var useResolvedFields = () => {
         return yield config.root.resolveFields(componentData, {
           changed,
           fields,
-          lastFields: resolvedFields,
+          lastFields: lastFields.current,
           lastData,
           appState: state,
           parent
@@ -5529,40 +5600,56 @@ var useResolvedFields = () => {
       return defaultResolveFields(componentData, {
         changed,
         fields,
-        lastFields: resolvedFields,
+        lastFields: lastFields.current,
         lastData
       });
     }),
-    [data, config, componentData, selectedItem, resolvedFields, state, parent]
+    [data, config, componentData, selectedItem, state, parent]
   );
-  const [hasParent, setHasParent] = useState19(false);
-  useEffect16(() => {
-    setHasParent(!!parent);
-  }, [parent]);
-  useEffect16(() => {
-    var _a2;
-    if (!((_a2 = state.ui.itemSelector) == null ? void 0 : _a2.zone) || hasParent) {
+  const triggerResolver = useCallback13(() => {
+    var _a2, _b2;
+    if (!((_a2 = state.ui.itemSelector) == null ? void 0 : _a2.zone) || ((_b2 = state.ui.itemSelector) == null ? void 0 : _b2.zone) === "default-zone" || parent) {
       if (hasResolver) {
         setFieldsLoading(true);
         resolveFields(defaultFields).then((fields) => {
           setResolvedFields(fields || {});
+          lastFields.current = fields;
           setFieldsLoading(false);
         });
-      } else {
-        setResolvedFields(defaultFields);
+        return;
       }
     }
-  }, [
-    data,
-    defaultFields,
+    setResolvedFields(defaultFields);
+  }, [defaultFields, state.ui.itemSelector, hasResolver, parent]);
+  useOnValueChange(
     state.ui.itemSelector,
-    selectedItem,
-    hasResolver,
-    hasParent
-  ]);
+    () => {
+      lastFields.current = defaultFields;
+    },
+    selectorIs
+  );
+  useOnValueChange(
+    { data, parent, itemSelector: state.ui.itemSelector },
+    () => {
+      triggerResolver();
+    },
+    (a, b) => JSON.stringify(a) === JSON.stringify(b)
+  );
+  useEffect17(() => {
+    triggerResolver();
+  }, []);
   return [resolvedFields, fieldsLoading];
 };
-var Fields = () => {
+
+// components/Puck/components/Fields/index.tsx
+import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
+var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
+var DefaultFields = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx27(Fragment8, { children });
+};
+var Fields = ({ wrapFields = true }) => {
   var _a, _b;
   const {
     selectedItem,
@@ -5580,11 +5667,11 @@ var Fields = () => {
   const componentResolving = selectedItem ? ((_a = componentState[selectedItem == null ? void 0 : selectedItem.props.id]) == null ? void 0 : _a.loadingCount) > 0 : ((_b = componentState["puck-root"]) == null ? void 0 : _b.loadingCount) > 0;
   const isLoading = fieldsResolving || componentResolving;
   const rootProps = data.root.props || data.root;
-  const Wrapper = useMemo11(() => overrides.fields || DefaultFields, [overrides]);
+  const Wrapper = useMemo12(() => overrides.fields || DefaultFields, [overrides]);
   return /* @__PURE__ */ jsxs14(
     "form",
     {
-      className: getClassName21(),
+      className: getClassName21({ wrapFields }),
       onSubmit: (e) => {
         e.preventDefault();
       },
@@ -5660,7 +5747,7 @@ var Fields = () => {
               item: selectedItem
             });
             const id = `${selectedItem.props.id}_${field.type}_${fieldName}`;
-            return /* @__PURE__ */ jsx27(
+            return /* @__PURE__ */ jsx27("div", { className: getClassName21("field"), children: /* @__PURE__ */ jsx27(
               AutoFieldPrivate,
               {
                 field,
@@ -5669,16 +5756,15 @@ var Fields = () => {
                 readOnly: !edit || readOnly[fieldName],
                 value: selectedItem.props[fieldName],
                 onChange
-              },
-              id
-            );
+              }
+            ) }, id);
           } else {
             const readOnly = data.root.readOnly || {};
             const { edit } = getPermissions({
               root: true
             });
             const id = `root_${field.type}_${fieldName}`;
-            return /* @__PURE__ */ jsx27(
+            return /* @__PURE__ */ jsx27("div", { className: getClassName21("field"), children: /* @__PURE__ */ jsx27(
               AutoFieldPrivate,
               {
                 field,
@@ -5687,9 +5773,8 @@ var Fields = () => {
                 readOnly: !edit || readOnly[fieldName],
                 value: rootProps[fieldName],
                 onChange
-              },
-              id
-            );
+              }
+            ) }, id);
           }
         }) }),
         isLoading && /* @__PURE__ */ jsx27("div", { className: getClassName21("loadingOverlay"), children: /* @__PURE__ */ jsx27("div", { className: getClassName21("loadingOverlayInner"), children: /* @__PURE__ */ jsx27(Loader, { size: 16 }) }) })
@@ -5703,7 +5788,7 @@ init_react_import();
 
 // lib/use-component-list.tsx
 init_react_import();
-import { useEffect as useEffect17, useState as useState20 } from "react";
+import { useEffect as useEffect18, useState as useState20 } from "react";
 
 // components/ComponentList/index.tsx
 init_react_import();
@@ -5771,7 +5856,7 @@ ComponentList.Item = ComponentListItem;
 import { jsx as jsx29 } from "react/jsx-runtime";
 var useComponentList = (config, ui) => {
   const [componentList, setComponentList] = useState20();
-  useEffect17(() => {
+  useEffect18(() => {
     var _a, _b, _c;
     if (Object.keys(ui.componentList).length > 0) {
       const matchedComponents = [];
@@ -5840,25 +5925,25 @@ var useComponentList = (config, ui) => {
 };
 
 // components/Puck/components/Components/index.tsx
-import { useMemo as useMemo12 } from "react";
+import { useMemo as useMemo13 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 var Components = () => {
   const { config, state, overrides } = useAppContext();
   const componentList = useComponentList(config, state.ui);
-  const Wrapper = useMemo12(() => overrides.components || "div", [overrides]);
+  const Wrapper = useMemo13(() => overrides.components || "div", [overrides]);
   return /* @__PURE__ */ jsx30(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx30(ComponentList, { id: "all" }) });
 };
 
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-import { useCallback as useCallback13, useEffect as useEffect19, useRef as useRef6, useMemo as useMemo13 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect20, useRef as useRef7, useMemo as useMemo14 } from "react";
 
 // components/AutoFrame/index.tsx
 init_react_import();
 import {
   createContext as createContext5,
   useContext as useContext10,
-  useEffect as useEffect18,
+  useEffect as useEffect19,
   useState as useState21
 } from "react";
 import hash from "object-hash";
@@ -5906,7 +5991,7 @@ var CopyHostStyles = ({
   onStylesLoaded = () => null
 }) => {
   const { document: doc, window: win } = useFrame();
-  useEffect18(() => {
+  useEffect19(() => {
     if (!win || !doc) {
       return () => {
       };
@@ -6086,7 +6171,7 @@ function AutoFrame(_a) {
   const [loaded, setLoaded] = useState21(false);
   const [ctx, setCtx] = useState21({});
   const [mountTarget, setMountTarget] = useState21();
-  useEffect18(() => {
+  useEffect19(() => {
     var _a2;
     if (frameRef.current) {
       setCtx({
@@ -6180,7 +6265,7 @@ import { Fragment as Fragment10, jsx as jsx33 } from "react/jsx-runtime";
 var getClassName23 = get_class_name_factory_default("PuckPreview", styles_module_default18);
 var useBubbleIframeEvents = (ref) => {
   const { status } = useAppContext();
-  useEffect19(() => {
+  useEffect20(() => {
     var _a;
     if (ref.current && status === "READY") {
       const iframe = ref.current;
@@ -6219,7 +6304,7 @@ var useBubbleIframeEvents = (ref) => {
 };
 var Preview2 = ({ id = "puck-preview" }) => {
   const { config, dispatch, state, setStatus, iframe, overrides } = useAppContext();
-  const Page = useCallback13(
+  const Page = useCallback14(
     (pageProps) => {
       var _a, _b;
       return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadValues({
@@ -6228,9 +6313,9 @@ var Preview2 = ({ id = "puck-preview" }) => {
     },
     [config.root]
   );
-  const Frame = useMemo13(() => overrides.iframe, [overrides]);
+  const Frame = useMemo14(() => overrides.iframe, [overrides]);
   const rootProps = state.data.root.props || state.data.root;
-  const ref = useRef6(null);
+  const ref = useRef7(null);
   useBubbleIframeEvents(ref);
   const inner = state.ui.previewMode === "edit" ? /* @__PURE__ */ jsx33(
     Page,
@@ -6480,13 +6565,13 @@ var LayerTree = ({
 };
 
 // components/Puck/components/Outline/index.tsx
-import { useCallback as useCallback14, useMemo as useMemo14 } from "react";
+import { useCallback as useCallback15, useMemo as useMemo15 } from "react";
 import { Fragment as Fragment12, jsx as jsx35, jsxs as jsxs17 } from "react/jsx-runtime";
 var Outline = () => {
   const { dispatch, state, overrides, config } = useAppContext();
   const { data, ui } = state;
   const { itemSelector } = ui;
-  const setItemSelector = useCallback14(
+  const setItemSelector = useCallback15(
     (newItemSelector) => {
       dispatch({
         type: "setUi",
@@ -6495,7 +6580,7 @@ var Outline = () => {
     },
     []
   );
-  const Wrapper = useMemo14(() => overrides.outline || "div", [overrides]);
+  const Wrapper = useMemo15(() => overrides.outline || "div", [overrides]);
   return /* @__PURE__ */ jsx35(Wrapper, { children: /* @__PURE__ */ jsx35(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ jsxs17(Fragment12, { children: [
     (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ jsx35(
       LayerTree,
@@ -6782,16 +6867,16 @@ var getBox = function getBox2(el) {
 
 // components/Puck/components/Canvas/index.tsx
 import {
-  useCallback as useCallback15,
-  useEffect as useEffect21,
-  useMemo as useMemo16,
-  useRef as useRef7,
+  useCallback as useCallback16,
+  useEffect as useEffect22,
+  useMemo as useMemo17,
+  useRef as useRef8,
   useState as useState24
 } from "react";
 
 // components/ViewportControls/index.tsx
 init_react_import();
-import { useEffect as useEffect20, useMemo as useMemo15, useState as useState23 } from "react";
+import { useEffect as useEffect21, useMemo as useMemo16, useState as useState23 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
 init_react_import();
@@ -6815,7 +6900,7 @@ var ViewportButton = ({
 }) => {
   const { state } = useAppContext();
   const [isActive, setIsActive] = useState23(false);
-  useEffect20(() => {
+  useEffect21(() => {
     setIsActive(width === state.ui.viewports.current.width);
   }, [width, state.ui.viewports.current.width]);
   return /* @__PURE__ */ jsx36("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx36(
@@ -6851,7 +6936,7 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
-  const zoomOptions = useMemo15(
+  const zoomOptions = useMemo16(
     () => [
       ...defaultZoomOptions,
       ...defaultsContainAutoZoom ? [] : [
@@ -6974,17 +7059,17 @@ var Canvas = () => {
   const { status, iframe } = useAppContext();
   const { dispatch, state, overrides, setUi, zoomConfig, setZoomConfig } = useAppContext();
   const { ui } = state;
-  const frameRef = useRef7(null);
+  const frameRef = useRef8(null);
   const [showTransition, setShowTransition] = useState24(false);
-  const defaultRender = useMemo16(() => {
+  const defaultRender = useMemo17(() => {
     const PuckDefault = ({ children }) => /* @__PURE__ */ jsx37(Fragment13, { children });
     return PuckDefault;
   }, []);
-  const CustomPreview = useMemo16(
+  const CustomPreview = useMemo17(
     () => overrides.preview || defaultRender,
     [overrides]
   );
-  const getFrameDimensions = useCallback15(() => {
+  const getFrameDimensions = useCallback16(() => {
     if (frameRef.current) {
       const frame = frameRef.current;
       const box = getBox(frame);
@@ -6992,7 +7077,7 @@ var Canvas = () => {
     }
     return { width: 0, height: 0 };
   }, [frameRef]);
-  const resetAutoZoom = useCallback15(
+  const resetAutoZoom = useCallback16(
     (ui2 = state.ui) => {
       if (frameRef.current) {
         setZoomConfig(
@@ -7002,11 +7087,11 @@ var Canvas = () => {
     },
     [frameRef, zoomConfig, state.ui]
   );
-  useEffect21(() => {
+  useEffect22(() => {
     setShowTransition(false);
     resetAutoZoom();
   }, [frameRef, ui.leftSideBarVisible, ui.rightSideBarVisible]);
-  useEffect21(() => {
+  useEffect22(() => {
     const { height: frameHeight } = getFrameDimensions();
     if (ui.viewports.current.height === "auto") {
       setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
@@ -7014,13 +7099,13 @@ var Canvas = () => {
       }));
     }
   }, [zoomConfig.zoom]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (ZOOM_ON_CHANGE) {
       setShowTransition(true);
       resetAutoZoom(ui);
     }
   }, [ui.viewports.current.width]);
-  useEffect21(() => {
+  useEffect22(() => {
     const cb = () => {
       setShowTransition(false);
       resetAutoZoom();
@@ -7031,7 +7116,7 @@ var Canvas = () => {
     };
   }, []);
   const [showLoader, setShowLoader] = useState24(false);
-  useEffect21(() => {
+  useEffect22(() => {
     setTimeout(() => {
       setShowLoader(true);
     }, 500);
@@ -7109,7 +7194,7 @@ var Canvas = () => {
 
 // lib/use-loaded-overrides.ts
 init_react_import();
-import { useMemo as useMemo17 } from "react";
+import { useMemo as useMemo18 } from "react";
 
 // lib/load-overrides.ts
 init_react_import();
@@ -7148,7 +7233,7 @@ var useLoadedOverrides = ({
   overrides,
   plugins
 }) => {
-  return useMemo17(() => {
+  return useMemo18(() => {
     return loadOverrides({ overrides, plugins });
   }, [plugins, overrides]);
 };
@@ -7160,14 +7245,14 @@ var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx38(Fragment14, { chil
 
 // lib/use-inject-css.ts
 init_react_import();
-import { useEffect as useEffect22, useState as useState25 } from "react";
+import { useEffect as useEffect23, useState as useState25 } from "react";
 var styles = ``;
 var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
   const [el, setEl] = useState25();
-  useEffect22(() => {
+  useEffect23(() => {
     setEl(document.createElement("style"));
   }, []);
-  useEffect22(() => {
+  useEffect23(() => {
     var _a;
     if (!el || typeof window === "undefined") {
       return;
@@ -7187,10 +7272,10 @@ var useInjectGlobalCss = (iframeEnabled) => {
 
 // lib/use-preview-mode-hotkeys.ts
 init_react_import();
-import { useCallback as useCallback16 } from "react";
+import { useCallback as useCallback17 } from "react";
 import { useHotkeys as useHotkeys2 } from "react-hotkeys-hook";
 var usePreviewModeHotkeys = (dispatch, iframeEnabled) => {
-  const toggleInteractive = useCallback16(() => {
+  const toggleInteractive = useCallback17(() => {
     dispatch({
       type: "setUi",
       ui: (ui) => ({
@@ -7335,11 +7420,11 @@ function Puck({
   const [menuOpen, setMenuOpen] = useState26(false);
   const { itemSelector, leftSideBarVisible, rightSideBarVisible } = ui;
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
-  useEffect23(() => {
+  useEffect24(() => {
     if (onChange) onChange(data);
   }, [data]);
   const rootProps = data.root.props || data.root;
-  const toggleSidebars = useCallback17(
+  const toggleSidebars = useCallback18(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -7353,7 +7438,7 @@ function Puck({
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  useEffect23(() => {
+  useEffect24(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -7376,7 +7461,7 @@ function Puck({
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  const defaultHeaderRender = useMemo18(() => {
+  const defaultHeaderRender = useMemo19(() => {
     if (renderHeader) {
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
@@ -7390,7 +7475,7 @@ function Puck({
     }
     return DefaultOverride;
   }, [renderHeader]);
-  const defaultHeaderActionsRender = useMemo18(() => {
+  const defaultHeaderActionsRender = useMemo19(() => {
     if (renderHeaderActions) {
       console.warn(
         "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
@@ -7407,20 +7492,20 @@ function Puck({
     overrides,
     plugins
   });
-  const CustomPuck = useMemo18(
+  const CustomPuck = useMemo19(
     () => loadedOverrides.puck || DefaultOverride,
     [loadedOverrides]
   );
-  const CustomHeader = useMemo18(
+  const CustomHeader = useMemo19(
     () => loadedOverrides.header || defaultHeaderRender,
     [loadedOverrides]
   );
-  const CustomHeaderActions = useMemo18(
+  const CustomHeaderActions = useMemo19(
     () => loadedOverrides.headerActions || defaultHeaderActionsRender,
     [loadedOverrides]
   );
   const [mounted, setMounted] = useState26(false);
-  useEffect23(() => {
+  useEffect24(() => {
     setMounted(true);
   }, []);
   const selectedComponentConfig = selectedItem && config.components[selectedItem.type];