@measured/puck 0.21.0-canary.7dca3a5a → 0.21.0-canary.8416d520

package/dist/{chunk-FKDVYRQW.mjs → chunk-N52WGXS5.mjs}

@@ -25,7 +25,7 @@ import {
   walkAppState,
   walkField,
   walkTree
-} from "./chunk-6SIKCDJJ.mjs";
+} from "./chunk-FY5AZKYD.mjs";
 
 // ../../node_modules/classnames/index.js
 var require_classnames = __commonJS({
@@ -1071,10 +1071,10 @@ var flattenData = (state, config) => {
 
 // store/slices/permissions.ts
 var createPermissionsSlice = (set, get) => {
-  const resolvePermissions = (..._0) => __async(void 0, [..._0], function* (params = {}, force) {
+  const resolvePermissions = (..._0) => __async(null, [..._0], function* (params = {}, force) {
     const { state, permissions, config } = get();
     const { cache, globalPermissions } = permissions;
-    const resolveDataForItem = (item2, force2 = false) => __async(void 0, null, function* () {
+    const resolveDataForItem = (item2, force2 = false) => __async(null, null, function* () {
       var _a, _b, _c;
       const { config: config2, state: appState, setComponentLoading } = get();
       const componentConfig = item2.type === "root" ? config2.root : config2.components[item2.type];
@@ -1129,13 +1129,13 @@ var createPermissionsSlice = (set, get) => {
     if (item) {
       yield resolveDataForItem(item, force);
     } else if (type) {
-      flattenData(state, config).filter((item2) => item2.type === type).map((item2) => __async(void 0, null, function* () {
+      flattenData(state, config).filter((item2) => item2.type === type).map((item2) => __async(null, null, function* () {
         yield resolveDataForItem(item2, force);
       }));
     } else if (root) {
       resolveDataForRoot(force);
     } else {
-      flattenData(state, config).map((item2) => __async(void 0, null, function* () {
+      flattenData(state, config).map((item2) => __async(null, null, function* () {
         yield resolveDataForItem(item2, force);
       }));
     }
@@ -1216,7 +1216,7 @@ var createFieldsSlice = (_set, _get) => {
 };
 var useRegisterFieldsSlice = (appStore, id) => {
   const resolveFields = useCallback(
-    (reset) => __async(void 0, null, function* () {
+    (reset) => __async(null, null, function* () {
       var _a, _b;
       const { fields, lastResolvedData } = appStore.getState().fields;
       const metadata = appStore.getState().metadata;
@@ -1417,7 +1417,7 @@ var createAppStore = (initialAppStore) => create2()(
         const selectedItem = state.ui.itemSelector ? getItem(state.ui.itemSelector, state) : null;
         return __spreadProps(__spreadValues({}, s), { state, selectedItem });
       }),
-      resolveComponentData: (componentData, trigger) => __async(void 0, null, function* () {
+      resolveComponentData: (componentData, trigger) => __async(null, null, function* () {
         const { config, metadata, setComponentLoading, permissions } = get();
         const timeouts = {};
         return yield resolveComponentData(
@@ -1428,7 +1428,7 @@ var createAppStore = (initialAppStore) => create2()(
             const id = "id" in item.props ? item.props.id : "root";
             timeouts[id] = setComponentLoading(id, true, 50);
           },
-          (item) => __async(void 0, null, function* () {
+          (item) => __async(null, null, function* () {
             const id = "id" in item.props ? item.props.id : "root";
             if ("type" in item) {
               yield permissions.refreshPermissions({ item });
@@ -1440,7 +1440,7 @@ var createAppStore = (initialAppStore) => create2()(
           trigger
         );
       }),
-      resolveAndCommitData: () => __async(void 0, null, function* () {
+      resolveAndCommitData: () => __async(null, null, function* () {
         const { config, state, dispatch, resolveComponentData: resolveComponentData2 } = get();
         walkAppState(
           state,
@@ -1837,7 +1837,7 @@ var styles_module_default3 = { "InputWrapper": "_InputWrapper_bsxfo_1", "Input-l
 
 // components/AutoField/index.tsx
 import {
-  useCallback as useCallback4,
+  useCallback as useCallback5,
   useContext as useContext3,
   useEffect as useEffect10,
   useMemo as useMemo3,
@@ -2250,7 +2250,13 @@ var ZoomOut = createLucideIcon("ZoomOut", [
 init_react_import();
 
 // components/AutoField/fields/ArrayField/index.tsx
-import { useCallback as useCallback2, useEffect as useEffect6, useRef, useState as useState4 } from "react";
+import {
+  memo as memo2,
+  useCallback as useCallback2,
+  useEffect as useEffect6,
+  useRef,
+  useState as useState4
+} from "react";
 
 // components/DragIcon/index.tsx
 init_react_import();
@@ -2528,7 +2534,7 @@ var collisionStore = createStore(() => ({
 
 // lib/dnd/collision/dynamic/index.ts
 var flushNext = "";
-var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input) => {
+var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => ((input) => {
   var _a, _b, _c, _d, _e;
   const { dragOperation, droppable } = input;
   const { position } = dragOperation;
@@ -2621,7 +2627,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
   }
   collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "hotpink");
   return null;
-};
+});
 
 // components/Sortable/index.tsx
 import { useSortable } from "@dnd-kit/react/sortable";
@@ -2743,89 +2749,250 @@ var NestedFieldProvider = ({
   );
 };
 
+// lib/data/get-deep.ts
+init_react_import();
+var getDeep = (node, path) => {
+  const pathParts = path.split(".");
+  return pathParts.reduce((acc, item) => {
+    if (!acc) return;
+    const [prop, indexStr] = item.replace("]", "").split("[");
+    const val = acc[prop];
+    if (indexStr && val) {
+      return val[parseInt(indexStr)];
+    }
+    return val;
+  }, node);
+};
+
+// components/AutoField/subfield.tsx
+init_react_import();
+import { memo } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var SubFieldInternal = ({
+  field,
+  id,
+  index,
+  name,
+  subName,
+  localName,
+  onChange,
+  forceReadOnly,
+  value
+}) => {
+  const indexName = typeof index !== "undefined" ? `${name}[${index}]` : name;
+  const subPath = name ? `${indexName}.${subName}` : subName;
+  const localIndexName = typeof index !== "undefined" ? `${localName}[${index}]` : localName != null ? localName : subName;
+  const localWildcardName = typeof index !== "undefined" ? `${localName}[*]` : localName;
+  const localSubPath = `${localIndexName}.${subName}`;
+  const localWildcardSubPath = `${localWildcardName}.${subName}`;
+  const { readOnlyFields } = useNestedFieldContext();
+  const subReadOnly = forceReadOnly ? forceReadOnly : typeof readOnlyFields[subPath] !== "undefined" ? readOnlyFields[localSubPath] : readOnlyFields[localWildcardSubPath];
+  const label = field.label || subName;
+  return /* @__PURE__ */ jsx8(
+    NestedFieldProvider,
+    {
+      name: localIndexName,
+      wildcardName: localWildcardName,
+      subName,
+      readOnlyFields,
+      children: /* @__PURE__ */ jsx8(
+        AutoFieldPrivate,
+        {
+          name: subPath,
+          label,
+          id,
+          readOnly: subReadOnly,
+          field: __spreadProps(__spreadValues({}, field), {
+            label
+            // May be used by custom fields
+          }),
+          onChange: (val, ui) => {
+            onChange(val, ui, subName);
+          },
+          value: typeof value !== "undefined" ? getDeep(value, subPath) : void 0
+        }
+      )
+    },
+    subPath
+  );
+};
+var SubField = memo(SubFieldInternal);
+
 // components/AutoField/fields/ArrayField/index.tsx
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var import_fast_deep_equal = __toESM(require_fast_deep_equal());
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var getClassName6 = get_class_name_factory_default("ArrayField", styles_module_default4);
 var getClassNameItem = get_class_name_factory_default("ArrayFieldItem", styles_module_default4);
+var ArrayFieldItemInternal = ({
+  id,
+  arrayId,
+  index,
+  dragIndex,
+  originalIndex,
+  field,
+  onChange,
+  onToggleExpand,
+  readOnly,
+  actions,
+  name,
+  localName,
+  getValue,
+  value
+}) => {
+  const isExpanded = useAppStore((s) => {
+    var _a;
+    return ((_a = s.state.ui.arrayState[arrayId]) == null ? void 0 : _a.openId) === id;
+  });
+  const itemSummary = useAppStore(() => {
+    const data = value != null ? value : getValue();
+    if (data && field.getItemSummary) {
+      return field.getItemSummary(data, index);
+    }
+    return `Item #${originalIndex}`;
+  });
+  const canEdit = useAppStore(
+    (s) => s.permissions.getPermissions({ item: s.selectedItem }).edit
+  );
+  return /* @__PURE__ */ jsx9(Sortable, { id, index: dragIndex, disabled: readOnly, children: ({ isDragging, ref, handleRef }) => /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      ref,
+      className: getClassNameItem({
+        isExpanded,
+        isDragging,
+        readOnly
+      }),
+      children: [
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            ref: handleRef,
+            onClick: (e) => {
+              if (isDragging) return;
+              e.preventDefault();
+              e.stopPropagation();
+              onToggleExpand(id, isExpanded);
+            },
+            className: getClassNameItem("summary"),
+            children: [
+              itemSummary,
+              /* @__PURE__ */ jsxs4("div", { className: getClassNameItem("rhs"), children: [
+                !readOnly && /* @__PURE__ */ jsx9("div", { className: getClassNameItem("actions"), children: actions }),
+                /* @__PURE__ */ jsx9("div", { children: /* @__PURE__ */ jsx9(DragIcon, {}) })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx9("div", { className: getClassNameItem("body"), children: isExpanded && /* @__PURE__ */ jsx9("fieldset", { className: getClassNameItem("fieldset"), children: Object.keys(field.arrayFields).map((subName) => {
+          const subField = field.arrayFields[subName];
+          return /* @__PURE__ */ jsx9(
+            SubField,
+            {
+              id: `${id}_${subName}`,
+              name,
+              subName,
+              localName,
+              index,
+              field: subField,
+              onChange,
+              forceReadOnly: !canEdit,
+              value: value == null ? void 0 : value[index]
+            },
+            subName
+          );
+        }) }) })
+      ]
+    }
+  ) }, id);
+};
+var ArrayFieldItem = memo2(ArrayFieldItemInternal);
 var ArrayField = ({
   field,
   onChange,
-  value: _value,
   name,
   label,
   labelIcon,
   readOnly,
   id,
-  Label: Label2 = (props) => /* @__PURE__ */ jsx8("div", __spreadValues({}, props))
+  Label: Label2 = (props) => /* @__PURE__ */ jsx9("div", __spreadValues({}, props)),
+  value
 }) => {
-  const thisArrayState = useAppStore((s) => s.state.ui.arrayState[id]);
   const setUi = useAppStore((s) => s.setUi);
-  const { readOnlyFields, localName = name } = useNestedFieldContext();
-  const value = _value;
-  const arrayState = thisArrayState || {
-    items: Array.from(value || []).map((item, idx) => {
-      return {
-        _originalIndex: idx,
-        _arrayId: `${id}-${idx}`
-      };
-    }),
-    openId: ""
-  };
-  const [localState, setLocalState] = useState4({ arrayState, value });
-  useEffect6(() => {
+  const appStoreApi = useAppStoreApi();
+  const { localName = name } = useNestedFieldContext();
+  const getValue = useCallback2(() => {
+    var _a, _b;
+    if (typeof value !== "undefined") return value;
+    const { selectedItem } = appStoreApi.getState();
+    const props = (_a = name ? selectedItem == null ? void 0 : selectedItem.props : {}) != null ? _a : {};
+    return name ? (_b = getDeep(props, name)) != null ? _b : [] : [];
+  }, [appStoreApi, name, value]);
+  const getArrayState = useCallback2(() => {
     var _a;
-    const _arrayState = (_a = appStore.getState().state.ui.arrayState[id]) != null ? _a : arrayState;
-    setLocalState({ arrayState: _arrayState, value });
-  }, [value]);
+    const { state } = appStoreApi.getState();
+    const thisState = state.ui.arrayState[id];
+    if ((_a = thisState == null ? void 0 : thisState.items) == null ? void 0 : _a.length) return thisState;
+    const value2 = getValue();
+    return {
+      items: Array.from(value2 || []).map((item, idx) => {
+        return {
+          _originalIndex: idx,
+          _currentIndex: idx,
+          _arrayId: `${id}-${idx}`
+        };
+      }),
+      openId: ""
+    };
+  }, [appStoreApi, id, getValue]);
+  const numItems = useAppStore((s) => {
+    var _a, _b;
+    const { selectedItem } = s;
+    const props = (_a = name ? selectedItem == null ? void 0 : selectedItem.props : {}) != null ? _a : {};
+    return (name ? (_b = getDeep(props, name)) != null ? _b : [] : []).length;
+  });
+  const [mirror, setLocalState] = useState4(getArrayState());
   const appStore = useAppStoreApi();
   const mapArrayStateToUi = useCallback2(
     (partialArrayState) => {
       const state = appStore.getState().state;
       return {
         arrayState: __spreadProps(__spreadValues({}, state.ui.arrayState), {
-          [id]: __spreadValues(__spreadValues({}, arrayState), partialArrayState)
+          [id]: __spreadValues(__spreadValues({}, getArrayState()), partialArrayState)
         })
       };
     },
-    [arrayState, appStore]
+    [appStore]
   );
   const getHighestIndex = useCallback2(() => {
-    return arrayState.items.reduce(
+    return getArrayState().items.reduce(
       (acc, item) => item._originalIndex > acc ? item._originalIndex : acc,
       -1
     );
-  }, [arrayState]);
-  const regenerateArrayState = useCallback2(
-    (value2) => {
-      let highestIndex = getHighestIndex();
-      const newItems = Array.from(value2 || []).map((item, idx) => {
-        var _a;
-        const arrayStateItem = arrayState.items[idx];
-        const newItem = {
-          _originalIndex: typeof (arrayStateItem == null ? void 0 : arrayStateItem._originalIndex) !== "undefined" ? arrayStateItem._originalIndex : highestIndex + 1,
-          _arrayId: ((_a = arrayState.items[idx]) == null ? void 0 : _a._arrayId) || `${id}-${highestIndex + 1}`
-        };
-        if (newItem._originalIndex > highestIndex) {
-          highestIndex = newItem._originalIndex;
-        }
-        return newItem;
-      });
-      return __spreadProps(__spreadValues({}, arrayState), { items: newItems });
-    },
-    [arrayState]
-  );
-  useEffect6(() => {
-    if (arrayState.items.length > 0) {
-      setUi(mapArrayStateToUi(arrayState));
-    }
+  }, []);
+  const regenerateArrayState = useCallback2((value2) => {
+    let highestIndex = getHighestIndex();
+    const arrayState = getArrayState();
+    const newItems = Array.from(value2 || []).map((item, idx) => {
+      var _a, _b, _c;
+      const arrayStateItem = arrayState.items[idx];
+      const newItem = {
+        _originalIndex: (_a = arrayStateItem == null ? void 0 : arrayStateItem._originalIndex) != null ? _a : highestIndex + 1,
+        _currentIndex: (_b = arrayStateItem == null ? void 0 : arrayStateItem._currentIndex) != null ? _b : idx,
+        _arrayId: ((_c = arrayState.items[idx]) == null ? void 0 : _c._arrayId) || `${id}-${highestIndex + 1}`
+      };
+      if (newItem._originalIndex > highestIndex) {
+        highestIndex = newItem._originalIndex;
+      }
+      return newItem;
+    });
+    return __spreadProps(__spreadValues({}, arrayState), { items: newItems });
   }, []);
   const [draggedItem, setDraggedItem] = useState4("");
   const isDraggingAny = !!draggedItem;
-  const canEdit = useAppStore(
-    (s) => s.permissions.getPermissions({ item: s.selectedItem }).edit
-  );
-  const forceReadOnly = !canEdit;
-  const valueRef = useRef(value);
+  const valueRef = useRef([]);
+  useEffect6(() => {
+    valueRef.current = getValue();
+  }, []);
   const uniqifyItem = useCallback2(
     (val) => {
       if (field.type !== "array" || !field.arrayFields) return;
@@ -2844,30 +3011,96 @@ var ArrayField = ({
     },
     [appStore, field]
   );
+  const syncCurrentIndexes = useCallback2(() => {
+    const arrayState = getArrayState();
+    const newArrayStateItems = arrayState.items.map((item, index) => __spreadProps(__spreadValues({}, item), {
+      _currentIndex: index
+    }));
+    setLocalState(__spreadProps(__spreadValues({}, arrayState), {
+      items: newArrayStateItems
+    }));
+    const state = appStore.getState().state;
+    const newUi = {
+      arrayState: __spreadProps(__spreadValues({}, state.ui.arrayState), {
+        [id]: __spreadProps(__spreadValues({}, arrayState), { items: newArrayStateItems })
+      })
+    };
+    setUi(newUi, false);
+  }, []);
+  const updateValue = useCallback2(
+    (newValue) => {
+      const newArrayState = regenerateArrayState(newValue);
+      setUi(mapArrayStateToUi(newArrayState), false);
+      onChange(newValue);
+      setLocalState(newArrayState);
+    },
+    [regenerateArrayState, setUi, mapArrayStateToUi, onChange, setLocalState]
+  );
+  const reset = useCallback2(
+    (value2) => {
+      valueRef.current = value2;
+      const newArrayState = regenerateArrayState(valueRef.current);
+      if (!(0, import_fast_deep_equal.default)(newArrayState, getArrayState())) {
+        setUi(mapArrayStateToUi(newArrayState), false);
+        setLocalState(newArrayState);
+      }
+    },
+    [
+      regenerateArrayState,
+      mapArrayStateToUi,
+      setUi,
+      setLocalState,
+      getArrayState
+    ]
+  );
+  useEffect6(() => {
+    if (value) return;
+    return appStoreApi.subscribe(
+      ({ selectedItem }) => {
+        var _a;
+        const props = (_a = name ? selectedItem == null ? void 0 : selectedItem.props : {}) != null ? _a : {};
+        return name ? getDeep(props, name) : [];
+      },
+      (val) => {
+        if (!(0, import_fast_deep_equal.default)(val, valueRef.current)) {
+          reset(val);
+        }
+      }
+    );
+  }, [appStoreApi, name, value]);
+  useEffect6(() => {
+    reset(getValue());
+  }, [reset, getValue, name]);
   if (field.type !== "array" || !field.arrayFields) {
     return null;
   }
-  const addDisabled = field.max !== void 0 && localState.arrayState.items.length >= field.max || readOnly;
-  return /* @__PURE__ */ jsx8(
+  const addDisabled = field.max !== void 0 && mirror.items.length >= field.max || readOnly;
+  return /* @__PURE__ */ jsx9(
     Label2,
     {
       label: label || name,
-      icon: labelIcon || /* @__PURE__ */ jsx8(List, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ jsx9(List, { size: 16 }),
       el: "div",
       readOnly,
-      children: /* @__PURE__ */ jsx8(
+      children: /* @__PURE__ */ jsx9(
         SortableProvider,
         {
-          onDragStart: (id2) => setDraggedItem(id2),
+          onDragStart: (id2) => {
+            valueRef.current = getValue();
+            setDraggedItem(id2);
+            syncCurrentIndexes();
+          },
           onDragEnd: () => {
             setDraggedItem("");
             onChange(valueRef.current);
+            syncCurrentIndexes();
           },
           onMove: (move) => {
+            const arrayState = getArrayState();
             if (arrayState.items[move.source]._arrayId !== draggedItem) {
               return;
             }
-            const newValue = reorder(localState.value, move.source, move.target);
+            const newValue = reorder(valueRef.current, move.source, move.target);
             const newArrayStateItems = reorder(
               arrayState.items,
               move.source,
@@ -2880,172 +3113,107 @@ var ArrayField = ({
               })
             };
             setUi(newUi, false);
-            setLocalState({
-              value: newValue,
-              arrayState: __spreadProps(__spreadValues({}, arrayState), { items: newArrayStateItems })
-            });
+            setLocalState(__spreadProps(__spreadValues({}, arrayState), {
+              items: newArrayStateItems
+            }));
             valueRef.current = newValue;
           },
           children: /* @__PURE__ */ jsxs4(
             "div",
             {
               className: getClassName6({
-                hasItems: Array.isArray(value) && value.length > 0,
+                hasItems: numItems > 0,
                 addDisabled
               }),
               children: [
-                localState.arrayState.items.length > 0 && /* @__PURE__ */ jsx8("div", { className: getClassName6("inner"), "data-dnd-container": true, children: localState.arrayState.items.map((item, i) => {
-                  const { _arrayId = `${id}-${i}`, _originalIndex = i } = item;
-                  const data = Array.from(localState.value || [])[i] || {};
-                  return /* @__PURE__ */ jsx8(
-                    Sortable,
+                mirror.items.length > 0 && /* @__PURE__ */ jsx9("div", { className: getClassName6("inner"), "data-dnd-container": true, children: mirror.items.map((item, index) => {
+                  const {
+                    _arrayId = `${id}-${index}`,
+                    _originalIndex = index,
+                    _currentIndex = index
+                  } = item;
+                  return /* @__PURE__ */ jsx9(
+                    ArrayFieldItem,
                     {
+                      index: _currentIndex,
+                      dragIndex: index,
+                      originalIndex: _originalIndex,
+                      arrayId: id,
                       id: _arrayId,
-                      index: i,
-                      disabled: readOnly,
-                      children: ({ isDragging, ref, handleRef }) => /* @__PURE__ */ jsxs4(
-                        "div",
-                        {
-                          ref,
-                          className: getClassNameItem({
-                            isExpanded: arrayState.openId === _arrayId,
-                            isDragging,
-                            readOnly
-                          }),
-                          children: [
-                            /* @__PURE__ */ jsxs4(
-                              "div",
-                              {
-                                ref: handleRef,
-                                onClick: (e) => {
-                                  if (isDragging) return;
-                                  e.preventDefault();
-                                  e.stopPropagation();
-                                  if (arrayState.openId === _arrayId) {
-                                    setUi(
-                                      mapArrayStateToUi({
-                                        openId: ""
-                                      })
-                                    );
-                                  } else {
-                                    setUi(
-                                      mapArrayStateToUi({
-                                        openId: _arrayId
-                                      })
-                                    );
-                                  }
-                                },
-                                className: getClassNameItem("summary"),
-                                children: [
-                                  field.getItemSummary ? field.getItemSummary(data, i) : `Item #${_originalIndex}`,
-                                  /* @__PURE__ */ jsxs4("div", { className: getClassNameItem("rhs"), children: [
-                                    !readOnly && /* @__PURE__ */ jsxs4("div", { className: getClassNameItem("actions"), children: [
-                                      /* @__PURE__ */ jsx8("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx8(
-                                        IconButton,
-                                        {
-                                          type: "button",
-                                          disabled: !!addDisabled,
-                                          onClick: (e) => {
-                                            e.stopPropagation();
-                                            const existingValue = [...value || []];
-                                            const newItem = uniqifyItem(
-                                              existingValue[i]
-                                            );
-                                            existingValue.splice(i, 0, newItem);
-                                            const newUi = mapArrayStateToUi(
-                                              regenerateArrayState(existingValue)
-                                            );
-                                            setUi(newUi, false);
-                                            onChange(existingValue);
-                                          },
-                                          title: "Duplicate",
-                                          children: /* @__PURE__ */ jsx8(Copy, { size: 16 })
-                                        }
-                                      ) }),
-                                      /* @__PURE__ */ jsx8("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx8(
-                                        IconButton,
-                                        {
-                                          type: "button",
-                                          disabled: field.min !== void 0 && field.min >= localState.arrayState.items.length,
-                                          onClick: (e) => {
-                                            e.stopPropagation();
-                                            const existingValue = [...value || []];
-                                            const existingItems = [
-                                              ...arrayState.items || []
-                                            ];
-                                            existingValue.splice(i, 1);
-                                            existingItems.splice(i, 1);
-                                            setUi(
-                                              mapArrayStateToUi({
-                                                items: existingItems
-                                              }),
-                                              false
-                                            );
-                                            onChange(existingValue);
-                                          },
-                                          title: "Delete",
-                                          children: /* @__PURE__ */ jsx8(Trash, { size: 16 })
-                                        }
-                                      ) })
-                                    ] }),
-                                    /* @__PURE__ */ jsx8("div", { children: /* @__PURE__ */ jsx8(DragIcon, {}) })
-                                  ] })
-                                ]
-                              }
-                            ),
-                            /* @__PURE__ */ jsx8("div", { className: getClassNameItem("body"), children: arrayState.openId === _arrayId && /* @__PURE__ */ jsx8("fieldset", { className: getClassNameItem("fieldset"), children: Object.keys(field.arrayFields).map(
-                              (subName) => {
-                                const subField = field.arrayFields[subName];
-                                const indexName = `${name}[${i}]`;
-                                const subPath = `${indexName}.${subName}`;
-                                const localIndexName = `${localName}[${i}]`;
-                                const localWildcardName = `${localName}[*]`;
-                                const localSubPath = `${localIndexName}.${subName}`;
-                                const localWildcardSubPath = `${localWildcardName}.${subName}`;
-                                const subReadOnly = forceReadOnly ? forceReadOnly : typeof readOnlyFields[subPath] !== "undefined" ? readOnlyFields[localSubPath] : readOnlyFields[localWildcardSubPath];
-                                const label2 = subField.label || subName;
-                                return /* @__PURE__ */ jsx8(
-                                  NestedFieldProvider,
-                                  {
-                                    name: localIndexName,
-                                    wildcardName: localWildcardName,
-                                    subName,
-                                    readOnlyFields,
-                                    children: /* @__PURE__ */ jsx8(
-                                      AutoFieldPrivate,
-                                      {
-                                        name: subPath,
-                                        label: label2,
-                                        id: `${_arrayId}_${subName}`,
-                                        readOnly: subReadOnly,
-                                        field: __spreadProps(__spreadValues({}, subField), {
-                                          label: label2
-                                          // May be used by custom fields
-                                        }),
-                                        value: data[subName],
-                                        onChange: (val, ui) => {
-                                          onChange(
-                                            replace(value, i, __spreadProps(__spreadValues({}, data), {
-                                              [subName]: val
-                                            })),
-                                            ui
-                                          );
-                                        }
-                                      }
-                                    )
-                                  },
-                                  subPath
-                                );
-                              }
-                            ) }) })
-                          ]
+                      readOnly,
+                      field,
+                      name,
+                      localName,
+                      value,
+                      getValue: () => {
+                        const value2 = getValue();
+                        return value2[_currentIndex];
+                      },
+                      onChange: (val, ui, subName) => {
+                        const value2 = getValue();
+                        const data = Array.from(value2 || [])[index] || {};
+                        onChange(
+                          replace(value2, index, __spreadProps(__spreadValues({}, data), {
+                            [subName]: val
+                          })),
+                          ui
+                        );
+                      },
+                      onToggleExpand: (id2, isExpanded) => {
+                        if (isExpanded) {
+                          setUi(
+                            mapArrayStateToUi({
+                              openId: ""
+                            })
+                          );
+                        } else {
+                          setUi(
+                            mapArrayStateToUi({
+                              openId: id2
+                            })
+                          );
                         }
-                      )
+                      },
+                      actions: /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                        /* @__PURE__ */ jsx9("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx9(
+                          IconButton,
+                          {
+                            type: "button",
+                            disabled: !!addDisabled,
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              const value2 = getValue();
+                              const existingValue = [...value2 || []];
+                              const newItem = uniqifyItem(existingValue[index]);
+                              existingValue.splice(index, 0, newItem);
+                              updateValue(existingValue);
+                            },
+                            title: "Duplicate",
+                            children: /* @__PURE__ */ jsx9(Copy, { size: 16 })
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx9("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx9(
+                          IconButton,
+                          {
+                            type: "button",
+                            disabled: field.min !== void 0 && field.min >= mirror.items.length,
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              const value2 = getValue();
+                              const existingValue = [...value2 || []];
+                              existingValue.splice(index, 1);
+                              updateValue(existingValue);
+                            },
+                            title: "Delete",
+                            children: /* @__PURE__ */ jsx9(Trash, { size: 16 })
+                          }
+                        ) })
+                      ] })
                     },
                     _arrayId
                   );
                 }) }),
-                !addDisabled && /* @__PURE__ */ jsx8(
+                !addDisabled && /* @__PURE__ */ jsx9(
                   "button",
                   {
                     type: "button",
@@ -3053,18 +3221,17 @@ var ArrayField = ({
                     onClick: () => {
                       var _a;
                       if (isDraggingAny) return;
-                      const existingValue = value || [];
+                      const value2 = getValue();
+                      const existingValue = value2 || [];
                       const defaultProps = typeof field.defaultItemProps === "function" ? field.defaultItemProps(existingValue.length) : (_a = field.defaultItemProps) != null ? _a : {};
                       const newItem = defaultSlots(
                         uniqifyItem(defaultProps),
                         field.arrayFields
                       );
                       const newValue = [...existingValue, newItem];
-                      const newArrayState = regenerateArrayState(newValue);
-                      setUi(mapArrayStateToUi(newArrayState), false);
-                      onChange(newValue);
+                      updateValue(newValue);
                     },
-                    children: /* @__PURE__ */ jsx8(Plus, { size: 21 })
+                    children: /* @__PURE__ */ jsx9(Plus, { size: 21 })
                   }
                 )
               ]
@@ -3078,7 +3245,7 @@ var ArrayField = ({
 
 // components/AutoField/fields/DefaultField/index.tsx
 init_react_import();
-import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var getClassName7 = get_class_name_factory_default("Input", styles_module_default3);
 var DefaultField = ({
   field,
@@ -3092,16 +3259,16 @@ var DefaultField = ({
   id
 }) => {
   const value = _value;
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     Label2,
     {
       label: label || name,
-      icon: labelIcon || /* @__PURE__ */ jsxs5(Fragment2, { children: [
-        field.type === "text" && /* @__PURE__ */ jsx9(Type, { size: 16 }),
-        field.type === "number" && /* @__PURE__ */ jsx9(Hash, { size: 16 })
+      icon: labelIcon || /* @__PURE__ */ jsxs5(Fragment3, { children: [
+        field.type === "text" && /* @__PURE__ */ jsx10(Type, { size: 16 }),
+        field.type === "number" && /* @__PURE__ */ jsx10(Hash, { size: 16 })
       ] }),
       readOnly,
-      children: /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsx10(
         "input",
         {
           className: getClassName7("input"),
@@ -3165,7 +3332,7 @@ var styles_module_default7 = { "Modal": "_Modal_ikbaj_1", "Modal--isOpen": "_Mod
 
 // components/Modal/index.tsx
 import { createPortal } from "react-dom";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var getClassName8 = get_class_name_factory_default("Modal", styles_module_default7);
 var Modal = ({
   children,
@@ -3177,10 +3344,10 @@ var Modal = ({
     setRootEl(document.getElementById("puck-portal-root"));
   }, []);
   if (!rootEl) {
-    return /* @__PURE__ */ jsx10("div", {});
+    return /* @__PURE__ */ jsx11("div", {});
   }
   return createPortal(
-    /* @__PURE__ */ jsx10("div", { className: getClassName8({ isOpen }), onClick: onClose, children: /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx11("div", { className: getClassName8({ isOpen }), onClick: onClose, children: /* @__PURE__ */ jsx11(
       "div",
       {
         className: getClassName8("inner"),
@@ -3200,11 +3367,11 @@ init_react_import();
 var styles_module_default8 = { "Heading": "_Heading_qxrry_1", "Heading--xxxxl": "_Heading--xxxxl_qxrry_12", "Heading--xxxl": "_Heading--xxxl_qxrry_18", "Heading--xxl": "_Heading--xxl_qxrry_22", "Heading--xl": "_Heading--xl_qxrry_26", "Heading--l": "_Heading--l_qxrry_30", "Heading--m": "_Heading--m_qxrry_34", "Heading--s": "_Heading--s_qxrry_38", "Heading--xs": "_Heading--xs_qxrry_42" };
 
 // components/Heading/index.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var getClassName9 = get_class_name_factory_default("Heading", styles_module_default8);
 var Heading = ({ children, rank, size = "m" }) => {
   const Tag = rank ? `h${rank}` : "span";
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     Tag,
     {
       className: getClassName9({
@@ -3219,7 +3386,7 @@ var Heading = ({ children, rank, size = "m" }) => {
 init_react_import();
 
 // components/ExternalInput/index.tsx
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 var getClassName10 = get_class_name_factory_default("ExternalInput", styles_module_default6);
 var getClassNameModal = get_class_name_factory_default("ExternalInputModal", styles_module_default6);
 var dataCache = {};
@@ -3260,7 +3427,7 @@ var ExternalInput = ({
   }, [mappedData]);
   const [searchQuery, setSearchQuery] = useState6(field.initialQuery || "");
   const search = useCallback3(
-    (query, filters2) => __async(void 0, null, function* () {
+    (query, filters2) => __async(null, null, function* () {
       setIsLoading(true);
       const cacheKey = `${id}-${query}-${JSON.stringify(filters2)}`;
       let listData;
@@ -3301,20 +3468,20 @@ var ExternalInput = ({
       id,
       children: [
         /* @__PURE__ */ jsxs6("div", { className: getClassName10("actions"), children: [
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13(
             "button",
             {
               type: "button",
               onClick: () => setOpen(true),
               className: getClassName10("button"),
               disabled: readOnly,
-              children: value ? field.getItemSummary ? field.getItemSummary(value) : "External item" : /* @__PURE__ */ jsxs6(Fragment3, { children: [
-                /* @__PURE__ */ jsx12(Link, { size: "16" }),
-                /* @__PURE__ */ jsx12("span", { children: field.placeholder })
+              children: value ? field.getItemSummary ? field.getItemSummary(value) : "External item" : /* @__PURE__ */ jsxs6(Fragment4, { children: [
+                /* @__PURE__ */ jsx13(Link, { size: "16" }),
+                /* @__PURE__ */ jsx13("span", { children: field.placeholder })
               ] })
             }
           ),
-          value && /* @__PURE__ */ jsx12(
+          value && /* @__PURE__ */ jsx13(
             "button",
             {
               type: "button",
@@ -3323,11 +3490,11 @@ var ExternalInput = ({
                 onChange(null);
               },
               disabled: readOnly,
-              children: /* @__PURE__ */ jsx12(LockOpen, { size: 16 })
+              children: /* @__PURE__ */ jsx13(LockOpen, { size: 16 })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx12(Modal, { onClose: () => setOpen(false), isOpen, children: /* @__PURE__ */ jsxs6(
+        /* @__PURE__ */ jsx13(Modal, { onClose: () => setOpen(false), isOpen, children: /* @__PURE__ */ jsxs6(
           "form",
           {
             className: getClassNameModal({
@@ -3342,11 +3509,11 @@ var ExternalInput = ({
               search(searchQuery, filters);
             },
             children: [
-              /* @__PURE__ */ jsx12("div", { className: getClassNameModal("masthead"), children: field.showSearch ? /* @__PURE__ */ jsxs6("div", { className: getClassNameModal("searchForm"), children: [
+              /* @__PURE__ */ jsx13("div", { className: getClassNameModal("masthead"), children: field.showSearch ? /* @__PURE__ */ jsxs6("div", { className: getClassNameModal("searchForm"), children: [
                 /* @__PURE__ */ jsxs6("label", { className: getClassNameModal("search"), children: [
-                  /* @__PURE__ */ jsx12("span", { className: getClassNameModal("searchIconText"), children: "Search" }),
-                  /* @__PURE__ */ jsx12("div", { className: getClassNameModal("searchIcon"), children: /* @__PURE__ */ jsx12(Search, { size: "18" }) }),
-                  /* @__PURE__ */ jsx12(
+                  /* @__PURE__ */ jsx13("span", { className: getClassNameModal("searchIconText"), children: "Search" }),
+                  /* @__PURE__ */ jsx13("div", { className: getClassNameModal("searchIcon"), children: /* @__PURE__ */ jsx13(Search, { size: "18" }) }),
+                  /* @__PURE__ */ jsx13(
                     "input",
                     {
                       className: getClassNameModal("searchInput"),
@@ -3362,8 +3529,8 @@ var ExternalInput = ({
                   )
                 ] }),
                 /* @__PURE__ */ jsxs6("div", { className: getClassNameModal("searchActions"), children: [
-                  /* @__PURE__ */ jsx12(Button, { type: "submit", loading: isLoading, fullWidth: true, children: "Search" }),
-                  hasFilterFields && /* @__PURE__ */ jsx12("div", { className: getClassNameModal("searchActionIcon"), children: /* @__PURE__ */ jsx12(
+                  /* @__PURE__ */ jsx13(Button, { type: "submit", loading: isLoading, fullWidth: true, children: "Search" }),
+                  hasFilterFields && /* @__PURE__ */ jsx13("div", { className: getClassNameModal("searchActionIcon"), children: /* @__PURE__ */ jsx13(
                     IconButton,
                     {
                       type: "button",
@@ -3373,19 +3540,19 @@ var ExternalInput = ({
                         e.stopPropagation();
                         setFiltersToggled(!filtersToggled);
                       },
-                      children: /* @__PURE__ */ jsx12(SlidersHorizontal, { size: 20 })
+                      children: /* @__PURE__ */ jsx13(SlidersHorizontal, { size: 20 })
                     }
                   ) })
                 ] })
-              ] }) : /* @__PURE__ */ jsx12(Heading, { rank: "2", size: "xs", children: field.placeholder || "Select data" }) }),
+              ] }) : /* @__PURE__ */ jsx13(Heading, { rank: "2", size: "xs", children: field.placeholder || "Select data" }) }),
               /* @__PURE__ */ jsxs6("div", { className: getClassNameModal("grid"), children: [
-                hasFilterFields && /* @__PURE__ */ jsx12("div", { className: getClassNameModal("filters"), children: hasFilterFields && Object.keys(filterFields).map((fieldName) => {
+                hasFilterFields && /* @__PURE__ */ jsx13("div", { className: getClassNameModal("filters"), children: hasFilterFields && Object.keys(filterFields).map((fieldName) => {
                   const filterField = filterFields[fieldName];
-                  return /* @__PURE__ */ jsx12(
+                  return /* @__PURE__ */ jsx13(
                     "div",
                     {
                       className: getClassNameModal("field"),
-                      children: /* @__PURE__ */ jsx12(
+                      children: /* @__PURE__ */ jsx13(
                         AutoFieldPrivate,
                         {
                           field: filterField,
@@ -3394,11 +3561,13 @@ var ExternalInput = ({
                           label: filterField.label || fieldName,
                           value: filters[fieldName],
                           onChange: (value2) => {
-                            const newFilters = __spreadProps(__spreadValues({}, filters), {
-                              [fieldName]: value2
+                            setFilters((filters2) => {
+                              const newFilters = __spreadProps(__spreadValues({}, filters2), {
+                                [fieldName]: value2
+                              });
+                              search(searchQuery, newFilters);
+                              return newFilters;
                             });
-                            setFilters(newFilters);
-                            search(searchQuery, newFilters);
                           }
                         }
                       )
@@ -3408,7 +3577,7 @@ var ExternalInput = ({
                 }) }),
                 /* @__PURE__ */ jsxs6("div", { className: getClassNameModal("tableWrapper"), children: [
                   /* @__PURE__ */ jsxs6("table", { className: getClassNameModal("table"), children: [
-                    /* @__PURE__ */ jsx12("thead", { className: getClassNameModal("thead"), children: /* @__PURE__ */ jsx12("tr", { className: getClassNameModal("tr"), children: keys.map((key) => /* @__PURE__ */ jsx12(
+                    /* @__PURE__ */ jsx13("thead", { className: getClassNameModal("thead"), children: /* @__PURE__ */ jsx13("tr", { className: getClassNameModal("tr"), children: keys.map((key) => /* @__PURE__ */ jsx13(
                       "th",
                       {
                         className: getClassNameModal("th"),
@@ -3417,8 +3586,8 @@ var ExternalInput = ({
                       },
                       key
                     )) }) }),
-                    /* @__PURE__ */ jsx12("tbody", { className: getClassNameModal("tbody"), children: mappedData.map((item, i) => {
-                      return /* @__PURE__ */ jsx12(
+                    /* @__PURE__ */ jsx13("tbody", { className: getClassNameModal("tbody"), children: mappedData.map((item, i) => {
+                      return /* @__PURE__ */ jsx13(
                         "tr",
                         {
                           style: { whiteSpace: "nowrap" },
@@ -3427,16 +3596,16 @@ var ExternalInput = ({
                             onChange(mapProp(data[i]));
                             setOpen(false);
                           },
-                          children: keys.map((key) => /* @__PURE__ */ jsx12("td", { className: getClassNameModal("td"), children: item[key] }, key))
+                          children: keys.map((key) => /* @__PURE__ */ jsx13("td", { className: getClassNameModal("td"), children: item[key] }, key))
                         },
                         i
                       );
                     }) })
                   ] }),
-                  /* @__PURE__ */ jsx12("div", { className: getClassNameModal("loadingBanner"), children: /* @__PURE__ */ jsx12(Loader, { size: 24 }) })
+                  /* @__PURE__ */ jsx13("div", { className: getClassNameModal("loadingBanner"), children: /* @__PURE__ */ jsx13(Loader, { size: 24 }) })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx12("div", { className: getClassNameModal("footerContainer"), children: /* @__PURE__ */ jsx12(Footer, { items: mappedData }) })
+              /* @__PURE__ */ jsx13("div", { className: getClassNameModal("footerContainer"), children: /* @__PURE__ */ jsx13(Footer, { items: mappedData }) })
             ]
           }
         ) })
@@ -3446,7 +3615,7 @@ var ExternalInput = ({
 };
 
 // components/AutoField/fields/ExternalField/index.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var ExternalField = ({
   field,
   onChange,
@@ -3471,13 +3640,13 @@ var ExternalField = ({
   if (field.type !== "external") {
     return null;
   }
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     Label2,
     {
       label: label || name,
-      icon: labelIcon || /* @__PURE__ */ jsx13(Link, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ jsx14(Link, { size: 16 }),
       el: "div",
-      children: /* @__PURE__ */ jsx13(
+      children: /* @__PURE__ */ jsx14(
         ExternalInput,
         {
           name,
@@ -3486,7 +3655,7 @@ var ExternalField = ({
             placeholder: ((_a = deprecatedField.adaptor) == null ? void 0 : _a.name) ? `Select from ${deprecatedField.adaptor.name}` : validField.placeholder || "Select data",
             mapProp: ((_b = deprecatedField.adaptor) == null ? void 0 : _b.mapProp) || validField.mapProp,
             mapRow: validField.mapRow,
-            fetchList: ((_c = deprecatedField.adaptor) == null ? void 0 : _c.fetchList) ? () => __async(void 0, null, function* () {
+            fetchList: ((_c = deprecatedField.adaptor) == null ? void 0 : _c.fetchList) ? () => __async(null, null, function* () {
               return yield deprecatedField.adaptor.fetchList(
                 deprecatedField.adaptorParams
               );
@@ -3504,7 +3673,7 @@ var ExternalField = ({
 
 // components/AutoField/fields/RadioField/index.tsx
 init_react_import();
-import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 var getClassName11 = get_class_name_factory_default("Input", styles_module_default3);
 var RadioField = ({
   field,
@@ -3520,21 +3689,21 @@ var RadioField = ({
   if (field.type !== "radio" || !field.options) {
     return null;
   }
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     Label2,
     {
-      icon: labelIcon || /* @__PURE__ */ jsx14(CircleCheckBig, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ jsx15(CircleCheckBig, { size: 16 }),
       label: label || name,
       readOnly,
       el: "div",
-      children: /* @__PURE__ */ jsx14("div", { className: getClassName11("radioGroupItems"), id, children: field.options.map((option) => {
+      children: /* @__PURE__ */ jsx15("div", { className: getClassName11("radioGroupItems"), id, children: field.options.map((option) => {
         var _a;
         return /* @__PURE__ */ jsxs7(
           "label",
           {
             className: getClassName11("radio"),
             children: [
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15(
                 "input",
                 {
                   type: "radio",
@@ -3548,7 +3717,7 @@ var RadioField = ({
                   checked: value === option.value
                 }
               ),
-              /* @__PURE__ */ jsx14("div", { className: getClassName11("radioInner"), children: option.label || ((_a = option.value) == null ? void 0 : _a.toString()) })
+              /* @__PURE__ */ jsx15("div", { className: getClassName11("radioInner"), children: option.label || ((_a = option.value) == null ? void 0 : _a.toString()) })
             ]
           },
           option.label + option.value
@@ -3560,7 +3729,7 @@ var RadioField = ({
 
 // components/AutoField/fields/SelectField/index.tsx
 init_react_import();
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var getClassName12 = get_class_name_factory_default("Input", styles_module_default3);
 var SelectField = ({
   field,
@@ -3576,13 +3745,13 @@ var SelectField = ({
   if (field.type !== "select" || !field.options) {
     return null;
   }
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     Label2,
     {
       label: label || name,
-      icon: labelIcon || /* @__PURE__ */ jsx15(ChevronDown, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ jsx16(ChevronDown, { size: 16 }),
       readOnly,
-      children: /* @__PURE__ */ jsx15(
+      children: /* @__PURE__ */ jsx16(
         "select",
         {
           id,
@@ -3593,7 +3762,7 @@ var SelectField = ({
             onChange(JSON.parse(e.target.value).value);
           },
           value: JSON.stringify({ value }),
-          children: field.options.map((option) => /* @__PURE__ */ jsx15(
+          children: field.options.map((option) => /* @__PURE__ */ jsx16(
             "option",
             {
               label: option.label,
@@ -3609,7 +3778,7 @@ var SelectField = ({
 
 // components/AutoField/fields/TextareaField/index.tsx
 init_react_import();
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var getClassName13 = get_class_name_factory_default("Input", styles_module_default3);
 var TextareaField = ({
   field,
@@ -3622,13 +3791,13 @@ var TextareaField = ({
   Label: Label2,
   id
 }) => {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     Label2,
     {
       label: label || name,
-      icon: labelIcon || /* @__PURE__ */ jsx16(Type, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ jsx17(Type, { size: 16 }),
       readOnly,
-      children: /* @__PURE__ */ jsx16(
+      children: /* @__PURE__ */ jsx17(
         "textarea",
         {
           id,
@@ -3655,64 +3824,59 @@ init_react_import();
 var styles_module_default9 = { "ObjectField": "_ObjectField_1ua3y_5", "ObjectField-fieldset": "_ObjectField-fieldset_1ua3y_13" };
 
 // components/AutoField/fields/ObjectField/index.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { useCallback as useCallback4 } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var getClassName14 = get_class_name_factory_default("ObjectField", styles_module_default9);
 var ObjectField = ({
   field,
   onChange,
-  value,
   name,
   label,
   labelIcon,
   Label: Label2,
   readOnly,
-  id
+  id,
+  value
 }) => {
-  const { readOnlyFields, localName = name } = useNestedFieldContext();
+  const { localName = name } = useNestedFieldContext();
+  const appStoreApi = useAppStoreApi();
+  const canEdit = useAppStore(
+    (s) => s.permissions.getPermissions({ item: s.selectedItem }).edit
+  );
+  const getValue = useCallback4(() => {
+    var _a;
+    if (typeof value !== "undefined") return value;
+    const { selectedItem } = appStoreApi.getState();
+    const props = (_a = name ? selectedItem == null ? void 0 : selectedItem.props : {}) != null ? _a : {};
+    return name ? getDeep(props, name) : {};
+  }, [appStoreApi, name, value]);
   if (field.type !== "object" || !field.objectFields) {
     return null;
   }
-  const data = value || {};
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     Label2,
     {
       label: label || name,
-      icon: labelIcon || /* @__PURE__ */ jsx17(EllipsisVertical, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ jsx18(EllipsisVertical, { size: 16 }),
       el: "div",
       readOnly,
-      children: /* @__PURE__ */ jsx17("div", { className: getClassName14(), children: /* @__PURE__ */ jsx17("fieldset", { className: getClassName14("fieldset"), children: Object.keys(field.objectFields).map((subName) => {
+      children: /* @__PURE__ */ jsx18("div", { className: getClassName14(), children: /* @__PURE__ */ jsx18("fieldset", { className: getClassName14("fieldset"), children: Object.keys(field.objectFields).map((subName) => {
         const subField = field.objectFields[subName];
         const subPath = `${localName}.${subName}`;
-        const subReadOnly = readOnly ? readOnly : readOnlyFields[subPath];
-        const label2 = subField.label || subName;
-        return /* @__PURE__ */ jsx17(
-          NestedFieldProvider,
+        return /* @__PURE__ */ jsx18(
+          SubField,
           {
-            name: localName || id,
+            id: `${id}_${subName}`,
+            name,
             subName,
-            readOnlyFields,
-            children: /* @__PURE__ */ jsx17(
-              AutoFieldPrivate,
-              {
-                name: subPath,
-                label: subPath,
-                id: `${id}_${subName}`,
-                readOnly: subReadOnly,
-                field: __spreadProps(__spreadValues({}, subField), {
-                  label: label2
-                  // May be used by custom fields
-                }),
-                value: data[subName],
-                onChange: (val, ui) => {
-                  onChange(
-                    __spreadProps(__spreadValues({}, data), {
-                      [subName]: val
-                    }),
-                    ui
-                  );
-                }
-              }
-            )
+            localName,
+            field: subField,
+            forceReadOnly: !canEdit,
+            value,
+            onChange: (subValue, ui, subName2) => {
+              const value2 = getValue();
+              onChange(__spreadProps(__spreadValues({}, value2), { [subName2]: subValue }), ui);
+            }
           },
           subPath
         );
@@ -3733,7 +3897,8 @@ var useSafeId = () => {
 };
 
 // components/AutoField/index.tsx
-import { Fragment as Fragment4, jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useShallow } from "zustand/react/shallow";
+import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
 var getClassName15 = get_class_name_factory_default("Input", styles_module_default3);
 var getClassNameWrapper = get_class_name_factory_default("InputWrapper", styles_module_default3);
 var FieldLabel = ({
@@ -3747,9 +3912,9 @@ var FieldLabel = ({
   const El = el;
   return /* @__PURE__ */ jsxs8(El, { className, children: [
     /* @__PURE__ */ jsxs8("div", { className: getClassName15("label"), children: [
-      icon ? /* @__PURE__ */ jsx18("div", { className: getClassName15("labelIcon"), children: icon }) : /* @__PURE__ */ jsx18(Fragment4, {}),
+      icon ? /* @__PURE__ */ jsx19("div", { className: getClassName15("labelIcon"), children: icon }) : /* @__PURE__ */ jsx19(Fragment5, {}),
       label,
-      readOnly && /* @__PURE__ */ jsx18("div", { className: getClassName15("disabledIcon"), title: "Read-only", children: /* @__PURE__ */ jsx18(Lock, { size: "12" }) })
+      readOnly && /* @__PURE__ */ jsx19("div", { className: getClassName15("disabledIcon"), title: "Read-only", children: /* @__PURE__ */ jsx19(Lock, { size: "12" }) })
     ] }),
     children
   ] });
@@ -3767,9 +3932,9 @@ var FieldLabelInternal = ({
     [overrides]
   );
   if (!label) {
-    return /* @__PURE__ */ jsx18(Fragment4, { children });
+    return /* @__PURE__ */ jsx19(Fragment5, { children });
   }
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     Wrapper,
     {
       label,
@@ -3795,10 +3960,10 @@ function AutoFieldInternal(props) {
   var _a;
   const dispatch = useAppStore((s) => s.dispatch);
   const overrides = useAppStore((s) => s.overrides);
-  const readOnly = useAppStore((s) => {
+  const readOnly = useAppStore(useShallow((s) => {
     var _a2;
     return (_a2 = s.selectedItem) == null ? void 0 : _a2.readOnly;
-  });
+  }));
   const nestedFieldContext = useContext3(NestedFieldContext);
   const { id, Label: Label2 = FieldLabelInternal } = props;
   const field = props.field;
@@ -3832,7 +3997,7 @@ function AutoFieldInternal(props) {
     }),
     [props, field, label, labelIcon, Label2, resolvedId]
   );
-  const onFocus = useCallback4(
+  const onFocus = useCallback5(
     (e) => {
       if (mergedProps.name && (e.target.nodeName === "INPUT" || e.target.nodeName === "TEXTAREA")) {
         e.stopPropagation();
@@ -3846,7 +4011,7 @@ function AutoFieldInternal(props) {
     },
     [mergedProps.name]
   );
-  const onBlur = useCallback4((e) => {
+  const onBlur = useCallback5((e) => {
     if ("name" in e.target) {
       dispatch({
         type: "setUi",
@@ -3862,6 +4027,7 @@ function AutoFieldInternal(props) {
     }
     return (_props) => null;
   }, [field.type]);
+  const fieldKey = field.type === "custom" ? field.key : void 0;
   let FieldComponent = useMemo3(() => {
     if (field.type === "custom") {
       if (!field.render) {
@@ -3871,7 +4037,7 @@ function AutoFieldInternal(props) {
     } else if (field.type !== "slot") {
       return render[field.type];
     }
-  }, [field.type, render]);
+  }, [field.type, fieldKey, render]);
   const { visible = true } = props.field;
   if (!visible) {
     return null;
@@ -3882,14 +4048,14 @@ function AutoFieldInternal(props) {
   if (!FieldComponent) {
     throw new Error(`Field type for ${field.type} did not exist.`);
   }
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     NestedFieldContext.Provider,
     {
       value: {
         readOnlyFields: nestedFieldContext.readOnlyFields || readOnly || {},
         localName: (_a = nestedFieldContext.localName) != null ? _a : mergedProps.name
       },
-      children: /* @__PURE__ */ jsx18(
+      children: /* @__PURE__ */ jsx19(
         "div",
         {
           className: getClassNameWrapper(),
@@ -3898,7 +4064,7 @@ function AutoFieldInternal(props) {
           onClick: (e) => {
             e.stopPropagation();
           },
-          children: /* @__PURE__ */ jsx18(FieldComponent, __spreadProps(__spreadValues({}, mergedProps), { children: /* @__PURE__ */ jsx18(Children, __spreadValues({}, mergedProps)) }))
+          children: /* @__PURE__ */ jsx19(FieldComponent, __spreadProps(__spreadValues({}, mergedProps), { children: /* @__PURE__ */ jsx19(Children, __spreadValues({}, mergedProps)) }))
         }
       )
     }
@@ -3906,14 +4072,30 @@ function AutoFieldInternal(props) {
 }
 function AutoFieldPrivate(props) {
   const isFocused = useAppStore((s) => s.state.ui.field.focus === props.name);
-  const { value, onChange } = props;
+  const { onChange } = props;
+  const value = useAppStore((s) => {
+    if (typeof props.value !== "undefined") return props.value;
+    const { name, field } = props;
+    if (!name) return;
+    const excludedFields = ["array", "object"];
+    if (!excludedFields.includes(field.type)) {
+      const rootProps = s.state.data.root.props || s.state.data.root;
+      const props2 = s.selectedItem ? s.selectedItem.props : rootProps;
+      if (props2) {
+        return getDeep(props2, name);
+      }
+    }
+  });
   const [localValue, setLocalValue] = useState8(value);
-  const onChangeLocal = useCallback4(
+  const onChangeLocal = useCallback5(
     (val, ui) => {
-      setLocalValue(val);
+      const excludedFields = ["array", "object"];
+      if (!excludedFields.includes(props.field.type)) {
+        setLocalValue(val);
+      }
       onChange(val, ui);
     },
-    [onChange]
+    [props.field.type]
   );
   useEffect10(() => {
     if (!isFocused) {
@@ -3927,15 +4109,19 @@ function AutoFieldPrivate(props) {
       }
     }
   }, [isFocused, value, localValue]);
-  const localProps = {
-    value: localValue,
-    onChange: onChangeLocal
-  };
-  return /* @__PURE__ */ jsx18(AutoFieldInternal, __spreadValues(__spreadValues({}, props), localProps));
+  const localProps = useMemo3(
+    () => ({
+      // localValue is sometimes undefined when using outside of Fields context
+      value: localValue != null ? localValue : value,
+      onChange: onChangeLocal
+    }),
+    [value, localValue, onChangeLocal]
+  );
+  return /* @__PURE__ */ jsx19(AutoFieldInternal, __spreadValues(__spreadValues({}, props), localProps));
 }
 function AutoField(props) {
   const DefaultLabel = useMemo3(() => {
-    const DefaultLabel2 = (labelProps) => /* @__PURE__ */ jsx18(
+    const DefaultLabel2 = (labelProps) => /* @__PURE__ */ jsx19(
       "div",
       __spreadProps(__spreadValues({}, labelProps), {
         className: getClassName15({ readOnly: props.readOnly })
@@ -3946,7 +4132,7 @@ function AutoField(props) {
   if (props.field.type === "slot") {
     return null;
   }
-  return /* @__PURE__ */ jsx18(AutoFieldInternal, __spreadProps(__spreadValues({}, props), { Label: DefaultLabel }));
+  return /* @__PURE__ */ jsx19(AutoFieldInternal, __spreadProps(__spreadValues({}, props), { Label: DefaultLabel }));
 }
 
 // components/Render/index.tsx
@@ -3956,8 +4142,8 @@ init_react_import();
 init_react_import();
 import {
   forwardRef as forwardRef3,
-  memo as memo2,
-  useCallback as useCallback11,
+  memo as memo4,
+  useCallback as useCallback12,
   useContext as useContext8,
   useEffect as useEffect18,
   useMemo as useMemo8,
@@ -3967,7 +4153,7 @@ import {
 // components/DraggableComponent/index.tsx
 init_react_import();
 import {
-  useCallback as useCallback7,
+  useCallback as useCallback8,
   useContext as useContext5,
   useEffect as useEffect12,
   useMemo as useMemo5,
@@ -4006,11 +4192,11 @@ function getDeepScrollPosition(element) {
 init_react_import();
 import {
   createContext as createContext3,
-  useCallback as useCallback5,
+  useCallback as useCallback6,
   useMemo as useMemo4
 } from "react";
 import { createStore as createStore2 } from "zustand";
-import { Fragment as Fragment5, jsx as jsx19 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx20 } from "react/jsx-runtime";
 var dropZoneContext = createContext3(null);
 var ZoneStoreContext = createContext3(
   createStore2(() => ({
@@ -4028,14 +4214,14 @@ var ZoneStoreProvider = ({
   children,
   store
 }) => {
-  return /* @__PURE__ */ jsx19(ZoneStoreContext.Provider, { value: store, children });
+  return /* @__PURE__ */ jsx20(ZoneStoreContext.Provider, { value: store, children });
 };
 var DropZoneProvider = ({
   children,
   value
 }) => {
   const dispatch = useAppStore((s) => s.dispatch);
-  const registerZone = useCallback5(
+  const registerZone = useCallback6(
     (zoneCompound) => {
       dispatch({
         type: "registerZone",
@@ -4050,11 +4236,11 @@ var DropZoneProvider = ({
     }, value),
     [value]
   );
-  return /* @__PURE__ */ jsx19(Fragment5, { children: memoValue && /* @__PURE__ */ jsx19(dropZoneContext.Provider, { value: memoValue, children }) });
+  return /* @__PURE__ */ jsx20(Fragment6, { children: memoValue && /* @__PURE__ */ jsx20(dropZoneContext.Provider, { value: memoValue, children }) });
 };
 
 // components/DraggableComponent/index.tsx
-import { useShallow as useShallow2 } from "zustand/react/shallow";
+import { useShallow as useShallow3 } from "zustand/react/shallow";
 import { useSortable as useSortable2 } from "@dnd-kit/react/sortable";
 
 // lib/accumulate-transform.ts
@@ -4076,21 +4262,21 @@ function accumulateTransform(el) {
 init_react_import();
 import { useContext as useContext4 } from "react";
 import { useStore as useStore2 } from "zustand";
-import { useShallow } from "zustand/react/shallow";
+import { useShallow as useShallow2 } from "zustand/react/shallow";
 function useContextStore(context, selector) {
   const store = useContext4(context);
   if (!store) {
     throw new Error("useContextStore must be used inside context");
   }
-  return useStore2(store, useShallow(selector));
+  return useStore2(store, useShallow2(selector));
 }
 
 // lib/dnd/use-on-drag-finished.ts
 init_react_import();
-import { useCallback as useCallback6 } from "react";
+import { useCallback as useCallback7 } from "react";
 var useOnDragFinished = (cb, deps = []) => {
   const appStore = useAppStoreApi();
-  return useCallback6(() => {
+  return useCallback7(() => {
     let dispose = () => {
     };
     const processDragging = (isDragging2) => {
@@ -4118,7 +4304,7 @@ var useOnDragFinished = (cb, deps = []) => {
 };
 
 // components/DraggableComponent/index.tsx
-import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
 var getClassName16 = get_class_name_factory_default("DraggableComponent", styles_module_default10);
 var DEBUG2 = false;
 var space = 8;
@@ -4132,13 +4318,13 @@ var DefaultActionBar = ({
 }) => /* @__PURE__ */ jsxs9(ActionBar, { children: [
   /* @__PURE__ */ jsxs9(ActionBar.Group, { children: [
     parentAction,
-    label && /* @__PURE__ */ jsx20(ActionBar.Label, { label })
+    label && /* @__PURE__ */ jsx21(ActionBar.Label, { label })
   ] }),
-  /* @__PURE__ */ jsx20(ActionBar.Group, { children })
+  /* @__PURE__ */ jsx21(ActionBar.Group, { children })
 ] });
 var DefaultOverlay = ({
   children
-}) => /* @__PURE__ */ jsx20(Fragment6, { children });
+}) => /* @__PURE__ */ jsx21(Fragment7, { children });
 var DraggableComponent = ({
   children,
   depth,
@@ -4165,7 +4351,7 @@ var DraggableComponent = ({
   const iframe = useAppStore((s) => s.iframe);
   const ctx = useContext5(dropZoneContext);
   const [localZones, setLocalZones] = useState10({});
-  const registerLocalZone = useCallback7(
+  const registerLocalZone = useCallback8(
     (zoneCompound2, active) => {
       var _a;
       (_a = ctx == null ? void 0 : ctx.registerLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2, active);
@@ -4175,7 +4361,7 @@ var DraggableComponent = ({
     },
     [setLocalZones]
   );
-  const unregisterLocalZone = useCallback7(
+  const unregisterLocalZone = useCallback8(
     (zoneCompound2) => {
       var _a;
       (_a = ctx == null ? void 0 : ctx.unregisterLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2);
@@ -4188,12 +4374,12 @@ var DraggableComponent = ({
     [setLocalZones]
   );
   const containsActiveZone = Object.values(localZones).filter(Boolean).length > 0;
-  const path = useAppStore(useShallow2((s) => {
+  const path = useAppStore(useShallow3((s) => {
     var _a;
     return (_a = s.state.indexes.nodes[id]) == null ? void 0 : _a.path;
   }));
   const permissions = useAppStore(
-    useShallow2((s) => {
+    useShallow3((s) => {
       const item = getItem({ index, zone: zoneCompound }, s.state);
       return s.permissions.getPermissions({ item });
     })
@@ -4251,7 +4437,7 @@ var DraggableComponent = ({
   }, [permissions.drag, zoneCompound]);
   const [, setRerender] = useState10(0);
   const ref = useRef2(null);
-  const refSetter = useCallback7(
+  const refSetter = useCallback8(
     (el) => {
       sortableRef(el);
       if (ref.current !== el) {
@@ -4268,7 +4454,7 @@ var DraggableComponent = ({
       iframe.enabled ? (_a = ref.current) == null ? void 0 : _a.ownerDocument.body : (_c = (_b = ref.current) == null ? void 0 : _b.closest("[data-puck-preview]")) != null ? _c : document.body
     );
   }, [iframe.enabled, ref.current]);
-  const getStyle = useCallback7(() => {
+  const getStyle = useCallback8(() => {
     var _a, _b, _c;
     if (!ref.current) return;
     const rect = ref.current.getBoundingClientRect();
@@ -4294,7 +4480,7 @@ var DraggableComponent = ({
     return style2;
   }, [ref.current]);
   const [style, setStyle] = useState10();
-  const sync = useCallback7(() => {
+  const sync = useCallback8(() => {
     setStyle(getStyle());
   }, [ref.current, iframe]);
   useEffect12(() => {
@@ -4307,10 +4493,10 @@ var DraggableComponent = ({
     }
   }, [ref.current]);
   const registerNode = useAppStore((s) => s.nodes.registerNode);
-  const hideOverlay = useCallback7(() => {
+  const hideOverlay = useCallback8(() => {
     setIsVisible(false);
   }, []);
-  const showOverlay = useCallback7(() => {
+  const showOverlay = useCallback8(() => {
     setIsVisible(true);
   }, []);
   useEffect12(() => {
@@ -4338,7 +4524,7 @@ var DraggableComponent = ({
     () => overrides.componentOverlay || DefaultOverlay,
     [overrides.componentOverlay]
   );
-  const onClick = useCallback7(
+  const onClick = useCallback8(
     (e) => {
       const el = e.target;
       if (!el.closest("[data-puck-overlay-portal]")) {
@@ -4363,7 +4549,7 @@ var DraggableComponent = ({
     [index, zoneCompound, id, isSelected]
   );
   const appStore = useAppStoreApi();
-  const onSelectParent = useCallback7(() => {
+  const onSelectParent = useCallback8(() => {
     const { nodes, zones } = appStore.getState().state.indexes;
     const node = nodes[id];
     const parentNode = (node == null ? void 0 : node.parentId) ? nodes[node == null ? void 0 : node.parentId] : null;
@@ -4384,14 +4570,14 @@ var DraggableComponent = ({
       }
     });
   }, [ctx, path]);
-  const onDuplicate = useCallback7(() => {
+  const onDuplicate = useCallback8(() => {
     dispatch({
       type: "duplicate",
       sourceIndex: index,
       sourceZone: zoneCompound
     });
   }, [index, zoneCompound]);
-  const onDelete = useCallback7(() => {
+  const onDelete = useCallback8(() => {
     dispatch({
       type: "remove",
       index,
@@ -4481,7 +4667,7 @@ var DraggableComponent = ({
   useEffect12(() => {
     if (thisWasDragging) return onDragFinished();
   }, [thisWasDragging, onDragFinished]);
-  const syncActionsPosition = useCallback7(
+  const syncActionsPosition = useCallback8(
     (el) => {
       if (el) {
         const view = el.ownerDocument.defaultView;
@@ -4521,7 +4707,7 @@ var DraggableComponent = ({
     setDragAxis(autoDragAxis);
   }, [ref, userDragAxis, autoDragAxis]);
   const parentAction = useMemo5(
-    () => (ctx == null ? void 0 : ctx.areaId) && (ctx == null ? void 0 : ctx.areaId) !== "root" && /* @__PURE__ */ jsx20(ActionBar.Action, { onClick: onSelectParent, label: "Select parent", children: /* @__PURE__ */ jsx20(CornerLeftUp, { size: 16 }) }),
+    () => (ctx == null ? void 0 : ctx.areaId) && (ctx == null ? void 0 : ctx.areaId) !== "root" && /* @__PURE__ */ jsx21(ActionBar.Action, { onClick: onSelectParent, label: "Select parent", children: /* @__PURE__ */ jsx21(CornerLeftUp, { size: 16 }) }),
     [ctx == null ? void 0 : ctx.areaId]
   );
   const nextContextValue = useMemo5(
@@ -4557,15 +4743,15 @@ var DraggableComponent = ({
           "data-puck-overlay": true,
           children: [
             debug,
-            isLoading && /* @__PURE__ */ jsx20("div", { className: getClassName16("loadingOverlay"), children: /* @__PURE__ */ jsx20(Loader, {}) }),
-            /* @__PURE__ */ jsx20(
+            isLoading && /* @__PURE__ */ jsx21("div", { className: getClassName16("loadingOverlay"), children: /* @__PURE__ */ jsx21(Loader, {}) }),
+            /* @__PURE__ */ jsx21(
               "div",
               {
                 className: getClassName16("actionsOverlay"),
                 style: {
                   top: actionsOverlayTop / zoom
                 },
-                children: /* @__PURE__ */ jsx20(
+                children: /* @__PURE__ */ jsx21(
                   "div",
                   {
                     className: getClassName16("actions"),
@@ -4583,8 +4769,8 @@ var DraggableComponent = ({
                         parentAction,
                         label: DEBUG2 ? id : label,
                         children: [
-                          permissions.duplicate && /* @__PURE__ */ jsx20(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ jsx20(Copy, { size: 16 }) }),
-                          permissions.delete && /* @__PURE__ */ jsx20(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ jsx20(Trash, { size: 16 }) })
+                          permissions.duplicate && /* @__PURE__ */ jsx21(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ jsx21(Copy, { size: 16 }) }),
+                          permissions.delete && /* @__PURE__ */ jsx21(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ jsx21(Trash, { size: 16 }) })
                         ]
                       }
                     )
@@ -4592,14 +4778,14 @@ var DraggableComponent = ({
                 )
               }
             ),
-            /* @__PURE__ */ jsx20("div", { className: getClassName16("overlayWrapper"), children: /* @__PURE__ */ jsx20(
+            /* @__PURE__ */ jsx21("div", { className: getClassName16("overlayWrapper"), children: /* @__PURE__ */ jsx21(
               CustomOverlay,
               {
                 componentId: id,
                 componentType,
                 hover,
                 isSelected,
-                children: /* @__PURE__ */ jsx20("div", { className: getClassName16("overlay") })
+                children: /* @__PURE__ */ jsx21("div", { className: getClassName16("overlay") })
               }
             ) })
           ]
@@ -4633,7 +4819,7 @@ init_react_import();
 import { DragDropProvider as DragDropProvider2 } from "@dnd-kit/react";
 import {
   createContext as createContext4,
-  useCallback as useCallback8,
+  useCallback as useCallback9,
   useContext as useContext6,
   useEffect as useEffect13,
   useMemo as useMemo6,
@@ -4920,7 +5106,7 @@ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlu
 
 // lib/insert-component.ts
 init_react_import();
-var insertComponent = (componentType, zone, index, appStore) => __async(void 0, null, function* () {
+var insertComponent = (componentType, zone, index, appStore) => __async(null, null, function* () {
   const id = generateId(componentType);
   const insertActionData = {
     type: "insert",
@@ -4974,7 +5160,7 @@ function getDeepDir(el) {
 
 // components/DragDropContext/index.tsx
 import { effect } from "@dnd-kit/state";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var DEBUG3 = false;
 var dragListenerContext = createContext4({
   dragListeners: {}
@@ -4992,7 +5178,7 @@ function useDragListener(type, fn, deps = []) {
 var AREA_CHANGE_DEBOUNCE_MS = 100;
 var useTempDisableFallback = (timeout3) => {
   const lastFallbackDisable = useRef3(null);
-  return useCallback8((manager) => {
+  return useCallback9((manager) => {
     collisionStore.setState({ fallbackEnabled: false });
     const fallbackId = generateId();
     lastFallbackDisable.current = fallbackId;
@@ -5025,7 +5211,7 @@ var DragDropContextClient = ({
       hoveringComponent: null
     }))
   );
-  const getChanged2 = useCallback8(
+  const getChanged2 = useCallback9(
     (params) => {
       const { zoneDepthIndex = {}, areaDepthIndex = {} } = zoneStore.getState() || {};
       const stateHasZone = Object.keys(zoneDepthIndex).length > 0;
@@ -5046,7 +5232,7 @@ var DragDropContextClient = ({
     },
     [zoneStore]
   );
-  const setDeepestAndCollide = useCallback8(
+  const setDeepestAndCollide = useCallback9(
     (params, manager) => {
       const { zoneChanged, areaChanged } = getChanged2(params);
       if (!zoneChanged && !areaChanged) return;
@@ -5143,14 +5329,14 @@ var DragDropContextClient = ({
     }),
     []
   );
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     dragListenerContext.Provider,
     {
       value: {
         dragListeners,
         setDragListeners
       },
-      children: /* @__PURE__ */ jsx21(
+      children: /* @__PURE__ */ jsx22(
         DragDropProvider2,
         {
           plugins,
@@ -5366,7 +5552,7 @@ var DragDropContextClient = ({
             const entryEl = (_d = getFrame()) == null ? void 0 : _d.querySelector("[data-puck-entry]");
             entryEl == null ? void 0 : entryEl.setAttribute("data-puck-dragging", "true");
           },
-          children: /* @__PURE__ */ jsx21(ZoneStoreProvider, { store: zoneStore, children: /* @__PURE__ */ jsx21(DropZoneProvider, { value: nextContextValue, children }) })
+          children: /* @__PURE__ */ jsx22(ZoneStoreProvider, { store: zoneStore, children: /* @__PURE__ */ jsx22(DropZoneProvider, { value: nextContextValue, children }) })
         }
       )
     }
@@ -5380,12 +5566,12 @@ var DragDropContext = ({
   if (status === "LOADING") {
     return children;
   }
-  return /* @__PURE__ */ jsx21(DragDropContextClient, { disableAutoScroll, children });
+  return /* @__PURE__ */ jsx22(DragDropContextClient, { disableAutoScroll, children });
 };
 
 // components/Drawer/index.tsx
 import { useDraggable, useDroppable } from "@dnd-kit/react";
-import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
 var getClassName17 = get_class_name_factory_default("Drawer", styles_module_default12);
 var getClassNameItem2 = get_class_name_factory_default("DrawerItem", styles_module_default12);
 var DrawerItemInner = ({
@@ -5396,10 +5582,10 @@ var DrawerItemInner = ({
   isDragDisabled
 }) => {
   const CustomInner = useMemo7(
-    () => children || (({ children: children2 }) => /* @__PURE__ */ jsx22("div", { className: getClassNameItem2("default"), children: children2 })),
+    () => children || (({ children: children2 }) => /* @__PURE__ */ jsx23("div", { className: getClassNameItem2("default"), children: children2 })),
     [children]
   );
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "div",
     {
       className: getClassNameItem2({ disabled: isDragDisabled }),
@@ -5407,9 +5593,9 @@ var DrawerItemInner = ({
       onMouseDown: (e) => e.preventDefault(),
       "data-testid": dragRef ? `drawer-item:${name}` : "",
       "data-puck-drawer-item": true,
-      children: /* @__PURE__ */ jsx22(CustomInner, { name, children: /* @__PURE__ */ jsx22("div", { className: getClassNameItem2("draggableWrapper"), children: /* @__PURE__ */ jsxs10("div", { className: getClassNameItem2("draggable"), children: [
-        /* @__PURE__ */ jsx22("div", { className: getClassNameItem2("name"), children: label != null ? label : name }),
-        /* @__PURE__ */ jsx22("div", { className: getClassNameItem2("icon"), children: /* @__PURE__ */ jsx22(DragIcon, {}) })
+      children: /* @__PURE__ */ jsx23(CustomInner, { name, children: /* @__PURE__ */ jsx23("div", { className: getClassNameItem2("draggableWrapper"), children: /* @__PURE__ */ jsxs10("div", { className: getClassNameItem2("draggable"), children: [
+        /* @__PURE__ */ jsx23("div", { className: getClassNameItem2("name"), children: label != null ? label : name }),
+        /* @__PURE__ */ jsx23("div", { className: getClassNameItem2("icon"), children: /* @__PURE__ */ jsx23(DragIcon, {}) })
       ] }) }) })
     }
   );
@@ -5428,8 +5614,8 @@ var DrawerItemDraggable = ({
     type: "drawer"
   });
   return /* @__PURE__ */ jsxs10("div", { className: getClassName17("draggable"), children: [
-    /* @__PURE__ */ jsx22("div", { className: getClassName17("draggableBg"), children: /* @__PURE__ */ jsx22(DrawerItemInner, { name, label, children }) }),
-    /* @__PURE__ */ jsx22("div", { className: getClassName17("draggableFg"), children: /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx23("div", { className: getClassName17("draggableBg"), children: /* @__PURE__ */ jsx23(DrawerItemInner, { name, label, children }) }),
+    /* @__PURE__ */ jsx23("div", { className: getClassName17("draggableFg"), children: /* @__PURE__ */ jsx23(
       DrawerItemInner,
       {
         name,
@@ -5463,7 +5649,7 @@ var DrawerItem = ({
     },
     [resolvedId]
   );
-  return /* @__PURE__ */ jsx22("div", { children: /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23("div", { children: /* @__PURE__ */ jsx23(
     DrawerItemDraggable,
     {
       name,
@@ -5496,7 +5682,7 @@ var Drawer = ({
     collisionPriority: 0
     // Never collide with this, but we use it so NestedDroppablePlugin respects the Drawer
   });
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "div",
     {
       className: getClassName17(),
@@ -5600,11 +5786,11 @@ import { useContext as useContext7, useEffect as useEffect15, useState as useSta
 // lib/dnd/use-rendered-callback.ts
 init_react_import();
 import { useDragDropManager } from "@dnd-kit/react";
-import { useCallback as useCallback9 } from "react";
+import { useCallback as useCallback10 } from "react";
 function useRenderedCallback(callback, deps) {
   const manager = useDragDropManager();
-  return useCallback9(
-    (...args) => __async(this, null, function* () {
+  return useCallback10(
+    (...args) => __async(null, null, function* () {
       yield manager == null ? void 0 : manager.renderer.rendering;
       return callback(...args);
     }),
@@ -5674,7 +5860,7 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
 
 // components/DropZone/lib/use-drag-axis.ts
 init_react_import();
-import { useCallback as useCallback10, useEffect as useEffect16, useState as useState15 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect16, useState as useState15 } from "react";
 var GRID_DRAG_AXIS = "dynamic";
 var FLEX_ROW_DRAG_AXIS = "x";
 var DEFAULT_DRAG_AXIS = "y";
@@ -5683,7 +5869,7 @@ var useDragAxis = (ref, collisionAxis) => {
   const [dragAxis, setDragAxis] = useState15(
     collisionAxis || DEFAULT_DRAG_AXIS
   );
-  const calculateDragAxis = useCallback10(() => {
+  const calculateDragAxis = useCallback11(() => {
     if (ref.current) {
       const computedStyle = window.getComputedStyle(ref.current);
       if (computedStyle.display === "grid") {
@@ -5709,12 +5895,12 @@ var useDragAxis = (ref, collisionAxis) => {
 };
 
 // components/DropZone/index.tsx
-import { useShallow as useShallow4 } from "zustand/react/shallow";
+import { useShallow as useShallow5 } from "zustand/react/shallow";
 
 // components/SlotRender/index.tsx
 init_react_import();
-import { useShallow as useShallow3 } from "zustand/react/shallow";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { useShallow as useShallow4 } from "zustand/react/shallow";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var ContextSlotRender = ({
   componentId,
   zone
@@ -5722,14 +5908,14 @@ var ContextSlotRender = ({
   const config = useAppStore((s) => s.config);
   const metadata = useAppStore((s) => s.metadata);
   const slotContent = useAppStore(
-    useShallow3((s) => {
+    useShallow4((s) => {
       var _a, _b;
       const indexes = s.state.indexes;
       const contentIds = (_b = (_a = indexes.zones[`${componentId}:${zone}`]) == null ? void 0 : _a.contentIds) != null ? _b : [];
       return contentIds.map((contentId) => indexes.nodes[contentId].flatData);
     })
   );
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     SlotRenderPure,
     {
       content: slotContent,
@@ -5745,7 +5931,7 @@ init_react_import();
 
 // components/InlineTextField/index.tsx
 init_react_import();
-import { memo, useEffect as useEffect17, useRef as useRef5, useState as useState16 } from "react";
+import { memo as memo3, useEffect as useEffect17, useRef as useRef5, useState as useState16 } from "react";
 
 // lib/overlay-portal/index.tsx
 init_react_import();
@@ -5844,7 +6030,7 @@ var getSelectorForId = (state, id) => {
 };
 
 // components/InlineTextField/index.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var getClassName18 = get_class_name_factory_default("InlineTextField", styles_module_default13);
 var InlineTextFieldInternal = ({
   propPath,
@@ -5871,7 +6057,7 @@ var InlineTextFieldInternal = ({
         ref.current.replaceChildren(value);
       }
       const cleanupPortal = registerOverlayPortal(ref.current);
-      const handleInput = (e) => __async(void 0, null, function* () {
+      const handleInput = (e) => __async(null, null, function* () {
         var _a2;
         const appStore2 = appStoreApi.getState();
         const node = appStore2.state.indexes.nodes[componentId];
@@ -5905,7 +6091,7 @@ var InlineTextFieldInternal = ({
   }, [appStoreApi, ref.current, value, disableLineBreaks]);
   const [isHovering, setIsHovering] = useState16(false);
   const [isFocused, setIsFocused] = useState16(false);
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     "span",
     {
       className: getClassName18(),
@@ -5941,14 +6127,14 @@ var InlineTextFieldInternal = ({
     }
   );
 };
-var InlineTextField = memo(InlineTextFieldInternal);
+var InlineTextField = memo3(InlineTextFieldInternal);
 
 // lib/field-transforms/default-transforms/inline-text-transform.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var getInlineTextTransform = () => ({
   text: ({ value, componentId, field, propPath, isReadOnly }) => {
     if (field.contentEditable) {
-      return /* @__PURE__ */ jsx25(
+      return /* @__PURE__ */ jsx26(
         InlineTextField,
         {
           propPath,
@@ -5963,7 +6149,7 @@ var getInlineTextTransform = () => ({
   },
   textarea: ({ value, componentId, field, propPath, isReadOnly }) => {
     if (field.contentEditable) {
-      return /* @__PURE__ */ jsx25(
+      return /* @__PURE__ */ jsx26(
         InlineTextField,
         {
           propPath,
@@ -5977,7 +6163,7 @@ var getInlineTextTransform = () => ({
   },
   custom: ({ value, componentId, field, propPath, isReadOnly }) => {
     if (field.contentEditable && typeof value === "string") {
-      return /* @__PURE__ */ jsx25(
+      return /* @__PURE__ */ jsx26(
         InlineTextField,
         {
           propPath,
@@ -5992,11 +6178,11 @@ var getInlineTextTransform = () => ({
 });
 
 // components/DropZone/index.tsx
-import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs11 } from "react/jsx-runtime";
 var getClassName19 = get_class_name_factory_default("DropZone", styles_module_default11);
 var getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;
 var RENDER_DEBUG = false;
-var DropZoneEditPure = (props) => /* @__PURE__ */ jsx26(DropZoneEdit, __spreadValues({}, props));
+var DropZoneEditPure = (props) => /* @__PURE__ */ jsx27(DropZoneEdit, __spreadValues({}, props));
 var DropZoneChild = ({
   zoneCompound,
   componentId,
@@ -6011,7 +6197,7 @@ var DropZoneChild = ({
   const { depth = 1 } = ctx != null ? ctx : {};
   const zoneStore = useContext8(ZoneStoreContext);
   const nodeProps = useAppStore(
-    useShallow4((s) => {
+    useShallow5((s) => {
       var _a2;
       return (_a2 = s.state.indexes.nodes[componentId]) == null ? void 0 : _a2.flatData.props;
     })
@@ -6023,7 +6209,7 @@ var DropZoneChild = ({
     }
   );
   const nodeReadOnly = useAppStore(
-    useShallow4((s) => {
+    useShallow5((s) => {
       var _a2;
       return (_a2 = s.state.indexes.nodes[componentId]) == null ? void 0 : _a2.data.readOnly;
     })
@@ -6080,10 +6266,10 @@ var DropZoneChild = ({
       if (item && "element" in item && item.element) {
         return (
           // Safe to use this since the HTML is set by the user
-          /* @__PURE__ */ jsx26("div", { dangerouslySetInnerHTML: { __html: item.element.outerHTML } })
+          /* @__PURE__ */ jsx27("div", { dangerouslySetInnerHTML: { __html: item.element.outerHTML } })
         );
       }
-      return /* @__PURE__ */ jsx26(DrawerItemInner, { name: label, children: (_a2 = overrides.componentItem) != null ? _a2 : overrides.drawerItem });
+      return /* @__PURE__ */ jsx27(DrawerItemInner, { name: label, children: (_a2 = overrides.componentItem) != null ? _a2 : overrides.drawerItem });
     },
     [componentId, label, overrides]
   );
@@ -6106,7 +6292,7 @@ var DropZoneChild = ({
   const plugins = useAppStore((s) => s.plugins);
   const userFieldTransforms = useAppStore((s) => s.fieldTransforms);
   const combinedFieldTransforms = useMemo8(
-    () => __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, getSlotTransform(DropZoneEditPure, (slotProps) => /* @__PURE__ */ jsx26(ContextSlotRender, { componentId, zone: slotProps.zone }))), getInlineTextTransform()), plugins.reduce(
+    () => __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, getSlotTransform(DropZoneEditPure, (slotProps) => /* @__PURE__ */ jsx27(ContextSlotRender, { componentId, zone: slotProps.zone }))), getInlineTextTransform()), plugins.reduce(
       (acc, plugin) => __spreadValues(__spreadValues({}, acc), plugin.fieldTransforms),
       {}
     )), userFieldTransforms),
@@ -6129,7 +6315,7 @@ var DropZoneChild = ({
   if (isInserting) {
     Render2 = renderPreview;
   }
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     DraggableComponent,
     {
       id: componentId,
@@ -6143,18 +6329,18 @@ var DropZoneChild = ({
       autoDragAxis: dragAxis,
       userDragAxis: collisionAxis,
       inDroppableZone,
-      children: (dragRef) => (componentConfig == null ? void 0 : componentConfig.inline) && !isInserting ? /* @__PURE__ */ jsx26(Fragment7, { children: /* @__PURE__ */ jsx26(
+      children: (dragRef) => (componentConfig == null ? void 0 : componentConfig.inline) && !isInserting ? /* @__PURE__ */ jsx27(Fragment8, { children: /* @__PURE__ */ jsx27(
         Render2,
         __spreadProps(__spreadValues({}, transformedProps), {
           puck: __spreadProps(__spreadValues({}, transformedProps.puck), {
             dragRef
           })
         })
-      ) }) : /* @__PURE__ */ jsx26("div", { ref: dragRef, children: /* @__PURE__ */ jsx26(Render2, __spreadValues({}, transformedProps)) })
+      ) }) : /* @__PURE__ */ jsx27("div", { ref: dragRef, children: /* @__PURE__ */ jsx27(Render2, __spreadValues({}, transformedProps)) })
     }
   );
 };
-var DropZoneChildMemo = memo2(DropZoneChild);
+var DropZoneChildMemo = memo4(DropZoneChild);
 var DropZoneEdit = forwardRef3(
   function DropZoneEditInternal({
     zone,
@@ -6175,7 +6361,7 @@ var DropZoneEdit = forwardRef3(
       unregisterLocalZone
     } = ctx != null ? ctx : {};
     const path = useAppStore(
-      useShallow4((s) => {
+      useShallow5((s) => {
         var _a;
         return areaId ? (_a = s.state.indexes.nodes[areaId]) == null ? void 0 : _a.path : null;
       })
@@ -6192,13 +6378,13 @@ var DropZoneEdit = forwardRef3(
       (s) => s.nextAreaDepthIndex[areaId || ""]
     );
     const zoneContentIds = useAppStore(
-      useShallow4((s) => {
+      useShallow5((s) => {
         var _a;
         return (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.contentIds;
       })
     );
     const zoneType = useAppStore(
-      useShallow4((s) => {
+      useShallow5((s) => {
         var _a;
         return (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.type;
       })
@@ -6223,7 +6409,7 @@ var DropZoneEdit = forwardRef3(
       return zoneContentIds || [];
     }, [zoneContentIds]);
     const ref = useRef6(null);
-    const acceptsTarget = useCallback11(
+    const acceptsTarget = useCallback12(
       (componentType) => {
         if (!componentType) {
           return true;
@@ -6306,7 +6492,7 @@ var DropZoneEdit = forwardRef3(
       userMinEmptyHeight,
       ref
     });
-    return /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsx27(
       "div",
       {
         className: `${getClassName19({
@@ -6327,7 +6513,7 @@ var DropZoneEdit = forwardRef3(
           backgroundColor: RENDER_DEBUG ? getRandomColor() : style == null ? void 0 : style.backgroundColor
         }),
         children: contentIdsWithPreview.map((componentId, i) => {
-          return /* @__PURE__ */ jsx26(
+          return /* @__PURE__ */ jsx27(
             DropZoneChildMemo,
             {
               zoneCompound,
@@ -6350,7 +6536,7 @@ var DropZoneRenderItem = ({
   metadata
 }) => {
   const Component = config.components[item.type];
-  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ jsx26(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
+  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ jsx27(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
   const nextContextValue = useMemo8(
     () => ({
       areaId: props.id,
@@ -6358,7 +6544,7 @@ var DropZoneRenderItem = ({
     }),
     [props]
   );
-  return /* @__PURE__ */ jsx26(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx27(
     Component.render,
     __spreadProps(__spreadValues({}, props), {
       puck: __spreadProps(__spreadValues({}, props.puck), {
@@ -6368,7 +6554,7 @@ var DropZoneRenderItem = ({
     })
   ) }, props.id);
 };
-var DropZoneRenderPure = (props) => /* @__PURE__ */ jsx26(DropZoneRender, __spreadValues({}, props));
+var DropZoneRenderPure = (props) => /* @__PURE__ */ jsx27(DropZoneRender, __spreadValues({}, props));
 var DropZoneRender = forwardRef3(
   function DropZoneRenderInternal({ className, style, zone }, ref) {
     const ctx = useContext8(dropZoneContext);
@@ -6389,10 +6575,10 @@ var DropZoneRender = forwardRef3(
     if (zoneCompound !== rootDroppableId) {
       content = setupZone(data, zoneCompound).zones[zoneCompound];
     }
-    return /* @__PURE__ */ jsx26("div", { className, style, ref, children: content.map((item) => {
+    return /* @__PURE__ */ jsx27("div", { className, style, ref, children: content.map((item) => {
       const Component = config.components[item.type];
       if (Component) {
-        return /* @__PURE__ */ jsx26(
+        return /* @__PURE__ */ jsx27(
           DropZoneRenderItem,
           {
             config,
@@ -6406,20 +6592,20 @@ var DropZoneRender = forwardRef3(
     }) });
   }
 );
-var DropZonePure = (props) => /* @__PURE__ */ jsx26(DropZone, __spreadValues({}, props));
+var DropZonePure = (props) => /* @__PURE__ */ jsx27(DropZone, __spreadValues({}, props));
 var DropZone = forwardRef3(
   function DropZone2(props, ref) {
     const ctx = useContext8(dropZoneContext);
     if ((ctx == null ? void 0 : ctx.mode) === "edit") {
-      return /* @__PURE__ */ jsx26(Fragment7, { children: /* @__PURE__ */ jsx26(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
+      return /* @__PURE__ */ jsx27(Fragment8, { children: /* @__PURE__ */ jsx27(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
     }
-    return /* @__PURE__ */ jsx26(Fragment7, { children: /* @__PURE__ */ jsx26(DropZoneRender, __spreadProps(__spreadValues({}, props), { ref })) });
+    return /* @__PURE__ */ jsx27(Fragment8, { children: /* @__PURE__ */ jsx27(DropZoneRender, __spreadProps(__spreadValues({}, props), { ref })) });
   }
 );
 
 // components/Render/index.tsx
 import React3, { useMemo as useMemo9 } from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var renderContext = React3.createContext({
   config: { components: {} },
   data: { root: {}, content: [] },
@@ -6451,7 +6637,7 @@ function Render({
   const propsWithSlots = useSlots(
     config,
     { type: "root", props: pageProps },
-    (props) => /* @__PURE__ */ jsx27(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata }))
+    (props) => /* @__PURE__ */ jsx28(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata }))
   );
   const nextContextValue = useMemo9(
     () => ({
@@ -6461,9 +6647,9 @@ function Render({
     []
   );
   if ((_a = config.root) == null ? void 0 : _a.render) {
-    return /* @__PURE__ */ jsx27(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx27(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx27(config.root.render, __spreadProps(__spreadValues({}, propsWithSlots), { children: /* @__PURE__ */ jsx27(DropZoneRenderPure, { zone: rootZone }) })) }) });
+    return /* @__PURE__ */ jsx28(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx28(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx28(config.root.render, __spreadProps(__spreadValues({}, propsWithSlots), { children: /* @__PURE__ */ jsx28(DropZoneRenderPure, { zone: rootZone }) })) }) });
   }
-  return /* @__PURE__ */ jsx27(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx27(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx27(DropZoneRenderPure, { zone: rootZone }) }) });
+  return /* @__PURE__ */ jsx28(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx28(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx28(DropZoneRenderPure, { zone: rootZone }) }) });
 }
 
 // lib/use-puck.ts
@@ -6532,7 +6718,7 @@ function createUsePuck() {
     }
     const result = useStore3(
       usePuckApi,
-      selector != null ? selector : (s) => s
+      selector != null ? selector : ((s) => s)
     );
     return result;
   };
@@ -6572,7 +6758,7 @@ var styles_module_default14 = { "ComponentList": "_ComponentList_1rrlt_1", "Comp
 
 // components/ComponentList/index.tsx
 import { useEffect as useEffect20 } from "react";
-import { jsx as jsx28, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs12 } from "react/jsx-runtime";
 var getClassName20 = get_class_name_factory_default("ComponentList", styles_module_default14);
 var ComponentListItem = ({
   name,
@@ -6592,7 +6778,7 @@ var ComponentListItem = ({
       );
     }
   }, [overrides]);
-  return /* @__PURE__ */ jsx28(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: (_a = overrides.componentItem) != null ? _a : overrides.drawerItem });
+  return /* @__PURE__ */ jsx29(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: (_a = overrides.componentItem) != null ? _a : overrides.drawerItem });
 };
 var ComponentList = ({
   children,
@@ -6618,14 +6804,14 @@ var ComponentList = ({
         }),
         title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
         children: [
-          /* @__PURE__ */ jsx28("div", { children: title }),
-          /* @__PURE__ */ jsx28("div", { className: getClassName20("titleIcon"), children: expanded ? /* @__PURE__ */ jsx28(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx28(ChevronDown, { size: 12 }) })
+          /* @__PURE__ */ jsx29("div", { children: title }),
+          /* @__PURE__ */ jsx29("div", { className: getClassName20("titleIcon"), children: expanded ? /* @__PURE__ */ jsx29(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx29(ChevronDown, { size: 12 }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx28("div", { className: getClassName20("content"), children: /* @__PURE__ */ jsx28(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
+    /* @__PURE__ */ jsx29("div", { className: getClassName20("content"), children: /* @__PURE__ */ jsx29(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
       var _a;
-      return /* @__PURE__ */ jsx28(
+      return /* @__PURE__ */ jsx29(
         ComponentListItem,
         {
           label: (_a = config.components[componentKey]["label"]) != null ? _a : componentKey,
@@ -6639,7 +6825,7 @@ var ComponentList = ({
 ComponentList.Item = ComponentListItem;
 
 // lib/use-component-list.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var useComponentList = () => {
   const [componentList, setComponentList] = useState18();
   const config = useAppStore((s) => s.config);
@@ -6660,7 +6846,7 @@ var useComponentList = () => {
           if (category.visible === false) {
             return null;
           }
-          return /* @__PURE__ */ jsx29(
+          return /* @__PURE__ */ jsx30(
             ComponentList,
             {
               id: categoryKey,
@@ -6668,7 +6854,7 @@ var useComponentList = () => {
               children: category.components.map((componentName, i) => {
                 var _a2;
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ jsx29(
+                return /* @__PURE__ */ jsx30(
                   ComponentList.Item,
                   {
                     label: (_a2 = componentConf["label"]) != null ? _a2 : componentName,
@@ -6688,7 +6874,7 @@ var useComponentList = () => {
       );
       if (remainingComponents.length > 0 && !((_a = uiComponentList.other) == null ? void 0 : _a.components) && ((_b = uiComponentList.other) == null ? void 0 : _b.visible) !== false) {
         _componentList.push(
-          /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsx30(
             ComponentList,
             {
               id: "other",
@@ -6696,7 +6882,7 @@ var useComponentList = () => {
               children: remainingComponents.map((componentName, i) => {
                 var _a2;
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ jsx29(
+                return /* @__PURE__ */ jsx30(
                   ComponentList.Item,
                   {
                     name: componentName,
@@ -6725,7 +6911,7 @@ init_react_import();
 var styles_module_default15 = { "Components": "_Components_3pbdy_1" };
 
 // components/Puck/components/Components/index.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var getClassName21 = get_class_name_factory_default("Components", styles_module_default15);
 var Components = () => {
   const overrides = useAppStore((s) => s.overrides);
@@ -6738,16 +6924,16 @@ var Components = () => {
     }
     return overrides.components || overrides.drawer || "div";
   }, [overrides]);
-  return /* @__PURE__ */ jsx30("div", { className: getClassName21(), children: /* @__PURE__ */ jsx30(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx30(ComponentList, { id: "all" }) }) });
+  return /* @__PURE__ */ jsx31("div", { className: getClassName21(), children: /* @__PURE__ */ jsx31(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx31(ComponentList, { id: "all" }) }) });
 };
 
 // plugins/blocks/index.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var blocksPlugin = () => ({
   name: "blocks",
   label: "Blocks",
   render: Components,
-  icon: /* @__PURE__ */ jsx31(Hammer, {})
+  icon: /* @__PURE__ */ jsx32(Hammer, {})
 });
 
 // plugins/outline/index.tsx
@@ -6775,7 +6961,7 @@ var scrollIntoView = (el) => {
 };
 
 // components/LayerTree/index.tsx
-import { useCallback as useCallback12, useContext as useContext10 } from "react";
+import { useCallback as useCallback13, useContext as useContext10 } from "react";
 
 // lib/on-scroll-end.ts
 init_react_import();
@@ -6797,8 +6983,8 @@ var onScrollEnd = (frame, cb) => {
 };
 
 // components/LayerTree/index.tsx
-import { useShallow as useShallow5 } from "zustand/react/shallow";
-import { Fragment as Fragment8, jsx as jsx32, jsxs as jsxs13 } from "react/jsx-runtime";
+import { useShallow as useShallow6 } from "zustand/react/shallow";
+import { Fragment as Fragment9, jsx as jsx33, jsxs as jsxs13 } from "react/jsx-runtime";
 var getClassName22 = get_class_name_factory_default("LayerTree", styles_module_default16);
 var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default16);
 var Layer = ({
@@ -6810,7 +6996,7 @@ var Layer = ({
   const config = useAppStore((s) => s.config);
   const itemSelector = useAppStore((s) => s.state.ui.itemSelector);
   const dispatch = useAppStore((s) => s.dispatch);
-  const setItemSelector = useCallback12(
+  const setItemSelector = useCallback13(
     (itemSelector2) => {
       dispatch({ type: "setUi", ui: { itemSelector: itemSelector2 } });
     },
@@ -6823,7 +7009,7 @@ var Layer = ({
   const isSelected = selecedItemId === itemId || itemSelector && itemSelector.zone === rootDroppableId && !zoneCompound;
   const nodeData = useAppStore((s) => s.state.indexes.nodes[itemId]);
   const zonesForItem = useAppStore(
-    useShallow5(
+    useShallow6(
       (s) => Object.keys(s.state.indexes.zones).filter(
         (z) => z.split(":")[0] === itemId
       )
@@ -6855,7 +7041,7 @@ var Layer = ({
         childIsSelected
       }),
       children: [
-        /* @__PURE__ */ jsx32("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs13(
+        /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs13(
           "button",
           {
             type: "button",
@@ -6893,22 +7079,22 @@ var Layer = ({
               zoneStore.setState({ hoveringComponent: null });
             },
             children: [
-              containsZone && /* @__PURE__ */ jsx32(
+              containsZone && /* @__PURE__ */ jsx33(
                 "div",
                 {
                   className: getClassNameLayer("chevron"),
                   title: isSelected ? "Collapse" : "Expand",
-                  children: /* @__PURE__ */ jsx32(ChevronDown, { size: "12" })
+                  children: /* @__PURE__ */ jsx33(ChevronDown, { size: "12" })
                 }
               ),
               /* @__PURE__ */ jsxs13("div", { className: getClassNameLayer("title"), children: [
-                /* @__PURE__ */ jsx32("div", { className: getClassNameLayer("icon"), children: nodeData.data.type === "Text" || nodeData.data.type === "Heading" ? /* @__PURE__ */ jsx32(Type, { size: "16" }) : /* @__PURE__ */ jsx32(LayoutGrid, { size: "16" }) }),
-                /* @__PURE__ */ jsx32("div", { className: getClassNameLayer("name"), children: label })
+                /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("icon"), children: nodeData.data.type === "Text" || nodeData.data.type === "Heading" ? /* @__PURE__ */ jsx33(Type, { size: "16" }) : /* @__PURE__ */ jsx33(LayoutGrid, { size: "16" }) }),
+                /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("name"), children: label })
               ] })
             ]
           }
         ) }),
-        containsZone && zonesForItem.map((subzone) => /* @__PURE__ */ jsx32("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ jsx32(LayerTree, { zoneCompound: subzone }) }, subzone))
+        containsZone && zonesForItem.map((subzone) => /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ jsx33(LayerTree, { zoneCompound: subzone }) }, subzone))
       ]
     }
   );
@@ -6927,22 +7113,22 @@ var LayerTree = ({
     return (_d = (_c = (_b = configForComponent == null ? void 0 : configForComponent.fields) == null ? void 0 : _b[slotId]) == null ? void 0 : _c.label) != null ? _d : slotId;
   });
   const contentIds = useAppStore(
-    useShallow5(
+    useShallow6(
       (s) => {
         var _a, _b;
         return zoneCompound ? (_b = (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.contentIds) != null ? _b : [] : [];
       }
     )
   );
-  return /* @__PURE__ */ jsxs13(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs13(Fragment9, { children: [
     label && /* @__PURE__ */ jsxs13("div", { className: getClassName22("zoneTitle"), children: [
-      /* @__PURE__ */ jsx32("div", { className: getClassName22("zoneIcon"), children: /* @__PURE__ */ jsx32(Layers, { size: "16" }) }),
+      /* @__PURE__ */ jsx33("div", { className: getClassName22("zoneIcon"), children: /* @__PURE__ */ jsx33(Layers, { size: "16" }) }),
       label
     ] }),
     /* @__PURE__ */ jsxs13("ul", { className: getClassName22(), children: [
-      contentIds.length === 0 && /* @__PURE__ */ jsx32("div", { className: getClassName22("helper"), children: "No items" }),
+      contentIds.length === 0 && /* @__PURE__ */ jsx33("div", { className: getClassName22("helper"), children: "No items" }),
       contentIds.map((itemId, i) => {
-        return /* @__PURE__ */ jsx32(
+        return /* @__PURE__ */ jsx33(
           Layer,
           {
             index: i,
@@ -6968,22 +7154,22 @@ var findZonesForArea = (state, area) => {
 };
 
 // components/Puck/components/Outline/index.tsx
-import { useShallow as useShallow6 } from "zustand/react/shallow";
+import { useShallow as useShallow7 } from "zustand/react/shallow";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Outline/styles.module.css#css-module
 init_react_import();
 var styles_module_default17 = { "Outline": "_Outline_cvjlj_1" };
 
 // components/Puck/components/Outline/index.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var getClassName23 = get_class_name_factory_default("Outline", styles_module_default17);
 var Outline = () => {
   const outlineOverride = useAppStore((s) => s.overrides.outline);
   const rootZones = useAppStore(
-    useShallow6((s) => findZonesForArea(s.state, "root"))
+    useShallow7((s) => findZonesForArea(s.state, "root"))
   );
   const Wrapper = useMemo11(() => outlineOverride || "div", [outlineOverride]);
-  return /* @__PURE__ */ jsx33("div", { className: getClassName23(), children: /* @__PURE__ */ jsx33(Wrapper, { children: rootZones.map((zoneCompound) => /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34("div", { className: getClassName23(), children: /* @__PURE__ */ jsx34(Wrapper, { children: rootZones.map((zoneCompound) => /* @__PURE__ */ jsx34(
     LayerTree,
     {
       label: rootZones.length === 1 ? "" : zoneCompound.split(":")[1],
@@ -6994,12 +7180,12 @@ var Outline = () => {
 };
 
 // plugins/outline/index.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var outlinePlugin = () => ({
   name: "outline",
   label: "Outline",
   render: Outline,
-  icon: /* @__PURE__ */ jsx34(Layers, {})
+  icon: /* @__PURE__ */ jsx35(Layers, {})
 });
 
 // plugins/fields/index.tsx
@@ -7057,7 +7243,7 @@ var useBreadcrumbs = (renderCount) => {
 };
 
 // components/Breadcrumbs/index.tsx
-import { jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
 var getClassName24 = get_class_name_factory_default("Breadcrumbs", styles_module_default18);
 var Breadcrumbs = ({
   children,
@@ -7067,7 +7253,7 @@ var Breadcrumbs = ({
   const breadcrumbs = useBreadcrumbs(numParents);
   return /* @__PURE__ */ jsxs14("div", { className: getClassName24(), children: [
     breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs14("div", { className: getClassName24("breadcrumb"), children: [
-      /* @__PURE__ */ jsx35(
+      /* @__PURE__ */ jsx36(
         "button",
         {
           type: "button",
@@ -7076,7 +7262,7 @@ var Breadcrumbs = ({
           children: breadcrumb.label
         }
       ),
-      /* @__PURE__ */ jsx35(ChevronRight, { size: 16 })
+      /* @__PURE__ */ jsx36(ChevronRight, { size: 16 })
     ] }, i)),
     children
   ] });
@@ -7090,16 +7276,16 @@ init_react_import();
 var styles_module_default19 = { "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 { memo as memo3, useCallback as useCallback13, useMemo as useMemo13 } from "react";
-import { useShallow as useShallow7 } from "zustand/react/shallow";
-import { Fragment as Fragment9, jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
+import { memo as memo5, useCallback as useCallback14, useMemo as useMemo13 } from "react";
+import { useShallow as useShallow8 } from "zustand/react/shallow";
+import { Fragment as Fragment10, jsx as jsx37, jsxs as jsxs15 } from "react/jsx-runtime";
 var getClassName25 = get_class_name_factory_default("PuckFields", styles_module_default19);
 var DefaultFields = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx36(Fragment9, { children });
+  return /* @__PURE__ */ jsx37(Fragment10, { children });
 };
-var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(void 0, null, function* () {
+var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(null, null, function* () {
   let currentProps;
   const { dispatch, state, selectedItem, resolveComponentData: resolveComponentData2 } = appStore.getState();
   const { data, ui } = state;
@@ -7148,40 +7334,35 @@ var FieldsChild = ({ fieldName }) => {
   const isReadOnly = useAppStore(
     (s) => ((s.selectedItem ? s.selectedItem.readOnly : s.state.data.root.readOnly) || {})[fieldName]
   );
-  const value = useAppStore((s) => {
-    const rootProps = s.state.data.root.props || s.state.data.root;
-    return s.selectedItem ? s.selectedItem.props[fieldName] : rootProps[fieldName];
-  });
   const id = useAppStore((s) => {
     if (!field) return null;
     return s.selectedItem ? `${s.selectedItem.props.id}_${field.type}_${fieldName}` : `root_${field.type}_${fieldName}`;
   });
   const permissions = useAppStore(
-    useShallow7((s) => {
+    useShallow8((s) => {
       const { selectedItem, permissions: permissions2 } = s;
       return selectedItem ? permissions2.getPermissions({ item: selectedItem }) : permissions2.getPermissions({ root: true });
     })
   );
   const appStore = useAppStoreApi();
-  const onChange = useCallback13(createOnChange(fieldName, appStore), [
+  const onChange = useCallback14(createOnChange(fieldName, appStore), [
     fieldName
   ]);
   const { visible = true } = field != null ? field : {};
   if (!field || !id || !visible) return null;
   if (field.type === "slot") return null;
-  return /* @__PURE__ */ jsx36("div", { className: getClassName25("field"), children: /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37("div", { className: getClassName25("field"), children: /* @__PURE__ */ jsx37(
     AutoFieldPrivate,
     {
       field,
       name: fieldName,
       id,
       readOnly: !permissions.edit || isReadOnly,
-      value,
       onChange
     }
   ) }, id);
 };
-var FieldsChildMemo = memo3(FieldsChild);
+var FieldsChildMemo = memo5(FieldsChild);
 var FieldsInternal = ({ wrapFields = true }) => {
   const overrides = useAppStore((s) => s.overrides);
   const componentResolving = useAppStore((s) => {
@@ -7189,7 +7370,7 @@ var FieldsInternal = ({ wrapFields = true }) => {
     const loadingCount = s.selectedItem ? (_a = s.componentState[s.selectedItem.props.id]) == null ? void 0 : _a.loadingCount : (_b = s.componentState["root"]) == null ? void 0 : _b.loadingCount;
     return (loadingCount != null ? loadingCount : 0) > 0;
   });
-  const itemSelector = useAppStore(useShallow7((s) => s.state.ui.itemSelector));
+  const itemSelector = useAppStore(useShallow8((s) => s.state.ui.itemSelector));
   const id = useAppStore((s) => {
     var _a;
     return (_a = s.selectedItem) == null ? void 0 : _a.props.id;
@@ -7198,7 +7379,7 @@ var FieldsInternal = ({ wrapFields = true }) => {
   useRegisterFieldsSlice(appStore, id);
   const fieldsLoading = useAppStore((s) => s.fields.loading);
   const fieldNames = useAppStore(
-    useShallow7((s) => {
+    useShallow8((s) => {
       if (s.fields.id === id) {
         return Object.keys(s.fields.fields);
       }
@@ -7215,20 +7396,20 @@ var FieldsInternal = ({ wrapFields = true }) => {
         e.preventDefault();
       },
       children: [
-        /* @__PURE__ */ jsx36(Wrapper, { isLoading, itemSelector, children: fieldNames.map((fieldName) => /* @__PURE__ */ jsx36(FieldsChildMemo, { fieldName }, fieldName)) }),
-        isLoading && /* @__PURE__ */ jsx36("div", { className: getClassName25("loadingOverlay"), children: /* @__PURE__ */ jsx36("div", { className: getClassName25("loadingOverlayInner"), children: /* @__PURE__ */ jsx36(Loader, { size: 16 }) }) })
+        /* @__PURE__ */ jsx37(Wrapper, { isLoading, itemSelector, children: fieldNames.map((fieldName) => /* @__PURE__ */ jsx37(FieldsChildMemo, { fieldName }, fieldName)) }),
+        isLoading && /* @__PURE__ */ jsx37("div", { className: getClassName25("loadingOverlay"), children: /* @__PURE__ */ jsx37("div", { className: getClassName25("loadingOverlayInner"), children: /* @__PURE__ */ jsx37(Loader, { size: 16 }) }) })
       ]
     }
   );
 };
-var Fields = memo3(FieldsInternal);
+var Fields = memo5(FieldsInternal);
 
 // css-module:/home/runner/work/puck/puck/packages/core/plugins/fields/styles.module.css#css-module
 init_react_import();
 var styles_module_default20 = { "FieldsPlugin": "_FieldsPlugin_nd930_1", "FieldsPlugin-header": "_FieldsPlugin-header_nd930_7" };
 
 // plugins/fields/index.tsx
-import { jsx as jsx37, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs16 } from "react/jsx-runtime";
 var getClassName26 = get_class_name_factory_default("FieldsPlugin", styles_module_default20);
 var CurrentTitle = () => {
   const label = useAppStore((s) => {
@@ -7242,10 +7423,10 @@ var fieldsPlugin = ({ mobileOnly = true } = {}) => ({
   name: "fields",
   label: "Fields",
   render: () => /* @__PURE__ */ jsxs16("div", { className: getClassName26(), children: [
-    /* @__PURE__ */ jsx37("div", { className: getClassName26("header"), children: /* @__PURE__ */ jsx37(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ jsx37(CurrentTitle, {}) }) }),
-    /* @__PURE__ */ jsx37(Fields, {})
+    /* @__PURE__ */ jsx38("div", { className: getClassName26("header"), children: /* @__PURE__ */ jsx38(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ jsx38(CurrentTitle, {}) }) }),
+    /* @__PURE__ */ jsx38(Fields, {})
   ] }),
-  icon: /* @__PURE__ */ jsx37(RectangleEllipsis, {}),
+  icon: /* @__PURE__ */ jsx38(RectangleEllipsis, {}),
   mobileOnly
 });
 
@@ -7253,7 +7434,7 @@ var fieldsPlugin = ({ mobileOnly = true } = {}) => ({
 init_react_import();
 import {
   createContext as createContext8,
-  useCallback as useCallback21,
+  useCallback as useCallback22,
   useContext as useContext13,
   useEffect as useEffect30,
   useMemo as useMemo21,
@@ -7263,7 +7444,7 @@ import {
 
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-import { useCallback as useCallback14, useEffect as useEffect23, useRef as useRef7, useMemo as useMemo14 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect23, useRef as useRef7, useMemo as useMemo14 } from "react";
 
 // components/AutoFrame/index.tsx
 init_react_import();
@@ -7275,7 +7456,7 @@ import {
 } from "react";
 import hash from "object-hash";
 import { createPortal as createPortal3 } from "react-dom";
-import { Fragment as Fragment10, jsx as jsx38 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx39 } from "react/jsx-runtime";
 var styleSelector = 'style, link[rel="stylesheet"]';
 var collectStyles = (doc) => {
   const collected = [];
@@ -7333,7 +7514,7 @@ var CopyHostStyles = ({
     let elements = [];
     const hashes = {};
     const lookupEl = (el) => elements.findIndex((elementMap) => elementMap.original === el);
-    const mirrorEl = (el, inlineStyles = false) => __async(void 0, null, function* () {
+    const mirrorEl = (el, inlineStyles = false) => __async(null, null, function* () {
       let mirror;
       if (el.nodeName === "LINK" && inlineStyles) {
         mirror = document.createElement("style");
@@ -7365,7 +7546,7 @@ var CopyHostStyles = ({
       }
       return mirror;
     });
-    const addEl = (el) => __async(void 0, null, function* () {
+    const addEl = (el) => __async(null, null, function* () {
       const index = lookupEl(el);
       if (index > -1) {
         if (debug)
@@ -7438,7 +7619,7 @@ var CopyHostStyles = ({
     const parentBody = parentDocument.getElementsByTagName("body")[0];
     syncAttributes(parentBody, doc.body);
     Promise.all(
-      collectedStyles.map((styleNode, i) => __async(void 0, null, function* () {
+      collectedStyles.map((styleNode, i) => __async(null, null, function* () {
         if (styleNode.nodeName === "LINK") {
           const linkHref = styleNode.href;
           if (hrefs.indexOf(linkHref) > -1) {
@@ -7482,7 +7663,7 @@ var CopyHostStyles = ({
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ jsx38(Fragment10, { children });
+  return /* @__PURE__ */ jsx39(Fragment11, { children });
 };
 var autoFrameContext = createContext6({});
 var useFrame = () => useContext11(autoFrameContext);
@@ -7529,7 +7710,7 @@ function AutoFrame(_a) {
       }
     }
   }, [frameRef, loaded, stylesLoaded]);
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "iframe",
     __spreadProps(__spreadValues({}, props), {
       className,
@@ -7539,7 +7720,7 @@ function AutoFrame(_a) {
       onLoad: () => {
         setLoaded(true);
       },
-      children: /* @__PURE__ */ jsx38(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx38(
+      children: /* @__PURE__ */ jsx39(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx39(
         CopyHostStyles,
         {
           debug,
@@ -7558,7 +7739,7 @@ init_react_import();
 var styles_module_default21 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPreview-frame": "_PuckPreview-frame_z2rgu_6" };
 
 // components/Puck/components/Preview/index.tsx
-import { Fragment as Fragment11, jsx as jsx39 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx40 } from "react/jsx-runtime";
 var getClassName27 = get_class_name_factory_default("PuckPreview", styles_module_default21);
 var useBubbleIframeEvents = (ref) => {
   const status = useAppStore((s) => s.status);
@@ -7611,7 +7792,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
   const renderData = useAppStore(
     (s) => s.state.ui.previewMode === "edit" ? null : s.state.data
   );
-  const Page = useCallback14(
+  const Page = useCallback15(
     (pageProps) => {
       var _a, _b;
       const propsWithSlots = useSlots(
@@ -7621,7 +7802,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
       );
       return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadValues({
         id: "puck-root"
-      }, propsWithSlots)) : /* @__PURE__ */ jsx39(Fragment11, { children: propsWithSlots.children });
+      }, propsWithSlots)) : /* @__PURE__ */ jsx40(Fragment12, { children: propsWithSlots.children });
     },
     [config]
   );
@@ -7629,7 +7810,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
   const rootProps = root.props || root;
   const ref = useRef7(null);
   useBubbleIframeEvents(ref);
-  const inner = !renderData ? /* @__PURE__ */ jsx39(
+  const inner = !renderData ? /* @__PURE__ */ jsx40(
     Page,
     __spreadProps(__spreadValues({}, rootProps), {
       puck: {
@@ -7639,15 +7820,15 @@ var Preview2 = ({ id = "puck-preview" }) => {
         metadata
       },
       editMode: true,
-      children: /* @__PURE__ */ jsx39(DropZonePure, { zone: rootDroppableId })
+      children: /* @__PURE__ */ jsx40(DropZonePure, { zone: rootDroppableId })
     })
-  ) : /* @__PURE__ */ jsx39(Render, { data: renderData, config, metadata });
+  ) : /* @__PURE__ */ jsx40(Render, { data: renderData, config, metadata });
   useEffect23(() => {
     if (!iframe.enabled) {
       setStatus("READY");
     }
   }, [iframe.enabled]);
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     "div",
     {
       className: getClassName27(),
@@ -7659,7 +7840,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
           dispatch({ type: "setUi", ui: { itemSelector: null } });
         }
       },
-      children: iframe.enabled ? /* @__PURE__ */ jsx39(
+      children: iframe.enabled ? /* @__PURE__ */ jsx40(
         AutoFrame_default,
         {
           id: "preview-frame",
@@ -7672,14 +7853,14 @@ var Preview2 = ({ id = "puck-preview" }) => {
             setStatus("MOUNTED");
           },
           frameRef: ref,
-          children: /* @__PURE__ */ jsx39(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
+          children: /* @__PURE__ */ jsx40(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
             if (Frame) {
-              return /* @__PURE__ */ jsx39(Frame, { document: document2, children: inner });
+              return /* @__PURE__ */ jsx40(Frame, { document: document2, children: inner });
             }
             return inner;
           } })
         }
-      ) : /* @__PURE__ */ jsx39(
+      ) : /* @__PURE__ */ jsx40(
         "div",
         {
           id: "preview-frame",
@@ -7743,7 +7924,7 @@ var useLoadedOverrides = ({
 };
 
 // components/Puck/index.tsx
-var import_fast_deep_equal = __toESM(require_fast_deep_equal());
+var import_fast_deep_equal2 = __toESM(require_fast_deep_equal());
 
 // components/Puck/components/Layout/index.tsx
 init_react_import();
@@ -7751,7 +7932,7 @@ import { useEffect as useEffect29, useMemo as useMemo20, useState as useState25
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Layout/styles.module.css#css-module
 init_react_import();
-var styles_module_default22 = { "Puck": "_Puck_hv23j_19", "Puck-portal": "_Puck-portal_hv23j_31", "PuckLayout": "_PuckLayout_hv23j_36", "PuckLayout-inner": "_PuckLayout-inner_hv23j_40", "PuckLayout--mounted": "_PuckLayout--mounted_hv23j_73", "PuckLayout--mobilePanelHeightToggle": "_PuckLayout--mobilePanelHeightToggle_hv23j_77", "PuckLayout--leftSideBarVisible": "_PuckLayout--leftSideBarVisible_hv23j_77", "PuckLayout--isExpanded": "_PuckLayout--isExpanded_hv23j_83", "PuckLayout--mobilePanelHeightMinContent": "_PuckLayout--mobilePanelHeightMinContent_hv23j_101", "PuckLayout--rightSideBarVisible": "_PuckLayout--rightSideBarVisible_hv23j_128", "PuckLayout-mounted": "_PuckLayout-mounted_hv23j_147", "PuckLayout-nav": "_PuckLayout-nav_hv23j_188", "PuckLayout-header": "_PuckLayout-header_hv23j_204", "PuckPluginTab": "_PuckPluginTab_hv23j_218", "PuckPluginTab--visible": "_PuckPluginTab--visible_hv23j_224", "PuckPluginTab-body": "_PuckPluginTab-body_hv23j_229" };
+var styles_module_default22 = { "Puck": "_Puck_lqzmv_19", "Puck-portal": "_Puck-portal_lqzmv_32", "PuckLayout": "_PuckLayout_lqzmv_37", "PuckLayout-inner": "_PuckLayout-inner_lqzmv_41", "PuckLayout--mounted": "_PuckLayout--mounted_lqzmv_74", "PuckLayout--mobilePanelHeightToggle": "_PuckLayout--mobilePanelHeightToggle_lqzmv_78", "PuckLayout--leftSideBarVisible": "_PuckLayout--leftSideBarVisible_lqzmv_78", "PuckLayout--isExpanded": "_PuckLayout--isExpanded_lqzmv_84", "PuckLayout--mobilePanelHeightMinContent": "_PuckLayout--mobilePanelHeightMinContent_lqzmv_102", "PuckLayout--rightSideBarVisible": "_PuckLayout--rightSideBarVisible_lqzmv_129", "PuckLayout-mounted": "_PuckLayout-mounted_lqzmv_148", "PuckLayout-nav": "_PuckLayout-nav_lqzmv_189", "PuckLayout-header": "_PuckLayout-header_lqzmv_205", "PuckPluginTab": "_PuckPluginTab_lqzmv_219", "PuckPluginTab--visible": "_PuckPluginTab--visible_lqzmv_225", "PuckPluginTab-body": "_PuckPluginTab-body_lqzmv_230" };
 
 // lib/use-inject-css.ts
 init_react_import();
@@ -7782,15 +7963,15 @@ var useInjectGlobalCss = (iframeEnabled) => {
 
 // components/DefaultOverride/index.tsx
 init_react_import();
-import { Fragment as Fragment12, jsx as jsx40 } from "react/jsx-runtime";
-var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx40(Fragment12, { children });
+import { Fragment as Fragment13, jsx as jsx41 } from "react/jsx-runtime";
+var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx41(Fragment13, { children });
 
 // lib/use-preview-mode-hotkeys.ts
 init_react_import();
-import { useCallback as useCallback15 } from "react";
+import { useCallback as useCallback16 } from "react";
 var usePreviewModeHotkeys = () => {
   const appStore = useAppStoreApi();
-  const toggleInteractive = useCallback15(() => {
+  const toggleInteractive = useCallback16(() => {
     const dispatch = appStore.getState().dispatch;
     dispatch({
       type: "setUi",
@@ -7805,7 +7986,7 @@ var usePreviewModeHotkeys = () => {
 
 // components/Puck/components/Header/index.tsx
 init_react_import();
-import { memo as memo4, useCallback as useCallback16, useMemo as useMemo16, useState as useState21 } from "react";
+import { memo as memo6, useCallback as useCallback17, useMemo as useMemo16, useState as useState21 } from "react";
 
 // components/MenuBar/index.tsx
 init_react_import();
@@ -7815,7 +7996,7 @@ init_react_import();
 var styles_module_default23 = { "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 Fragment13, jsx as jsx41, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx42, jsxs as jsxs17 } from "react/jsx-runtime";
 var getClassName28 = get_class_name_factory_default("MenuBar", styles_module_default23);
 function MenuBar({
   menuOpen = false,
@@ -7826,7 +8007,7 @@ function MenuBar({
   const forward = useAppStore((s) => s.history.forward);
   const hasFuture = useAppStore((s) => s.history.hasFuture());
   const hasPast = useAppStore((s) => s.history.hasPast());
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "div",
     {
       className: getClassName28({ menuOpen }),
@@ -7842,28 +8023,28 @@ function MenuBar({
       },
       children: /* @__PURE__ */ jsxs17("div", { className: getClassName28("inner"), children: [
         /* @__PURE__ */ jsxs17("div", { className: getClassName28("history"), children: [
-          /* @__PURE__ */ jsx41(
+          /* @__PURE__ */ jsx42(
             IconButton,
             {
               type: "button",
               title: "undo",
               disabled: !hasPast,
               onClick: back,
-              children: /* @__PURE__ */ jsx41(Undo2, { size: 21 })
+              children: /* @__PURE__ */ jsx42(Undo2, { size: 21 })
             }
           ),
-          /* @__PURE__ */ jsx41(
+          /* @__PURE__ */ jsx42(
             IconButton,
             {
               type: "button",
               title: "redo",
               disabled: !hasFuture,
               onClick: forward,
-              children: /* @__PURE__ */ jsx41(Redo2, { size: 21 })
+              children: /* @__PURE__ */ jsx42(Redo2, { size: 21 })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx41(Fragment13, { children: renderHeaderActions && renderHeaderActions() })
+        /* @__PURE__ */ jsx42(Fragment14, { children: renderHeaderActions && renderHeaderActions() })
       ] })
     }
   );
@@ -7874,7 +8055,7 @@ init_react_import();
 var styles_module_default24 = { "PuckHeader": "_PuckHeader_1bhmt_1", "PuckHeader-inner": "_PuckHeader-inner_1bhmt_16", "PuckHeader-toggle": "_PuckHeader-toggle_1bhmt_32", "PuckHeader--rightSideBarVisible": "_PuckHeader--rightSideBarVisible_1bhmt_39", "PuckHeader-rightSideBarToggle": "_PuckHeader-rightSideBarToggle_1bhmt_39", "PuckHeader--leftSideBarVisible": "_PuckHeader--leftSideBarVisible_1bhmt_40", "PuckHeader-leftSideBarToggle": "_PuckHeader-leftSideBarToggle_1bhmt_40", "PuckHeader-title": "_PuckHeader-title_1bhmt_56", "PuckHeader-path": "_PuckHeader-path_1bhmt_60", "PuckHeader-tools": "_PuckHeader-tools_1bhmt_67", "PuckHeader-menuButton": "_PuckHeader-menuButton_1bhmt_73", "PuckHeader--menuOpen": "_PuckHeader--menuOpen_1bhmt_78" };
 
 // components/Puck/components/Header/index.tsx
-import { Fragment as Fragment14, jsx as jsx42, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx43, jsxs as jsxs18 } from "react/jsx-runtime";
 var getClassName29 = get_class_name_factory_default("PuckHeader", styles_module_default24);
 var HeaderInner = () => {
   const {
@@ -7896,7 +8077,7 @@ var HeaderInner = () => {
         var _b = _a, { actions } = _b, props = __objRest(_b, ["actions"]);
         const Comp = renderHeader;
         const appState = useAppStore((s) => s.state);
-        return /* @__PURE__ */ jsx42(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
+        return /* @__PURE__ */ jsx43(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
       };
       return RenderHeader;
     }
@@ -7910,7 +8091,7 @@ var HeaderInner = () => {
       const RenderHeader = (props) => {
         const Comp = renderHeaderActions;
         const appState = useAppStore((s) => s.state);
-        return /* @__PURE__ */ jsx42(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
+        return /* @__PURE__ */ jsx43(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
       };
       return RenderHeader;
     }
@@ -7932,7 +8113,7 @@ var HeaderInner = () => {
   const rightSideBarVisible = useAppStore(
     (s) => s.state.ui.rightSideBarVisible
   );
-  const toggleSidebars = useCallback16(
+  const toggleSidebars = useCallback17(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -7946,27 +8127,27 @@ var HeaderInner = () => {
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     CustomHeader,
     {
-      actions: /* @__PURE__ */ jsx42(Fragment14, { children: /* @__PURE__ */ jsx42(CustomHeaderActions, { children: /* @__PURE__ */ jsx42(
+      actions: /* @__PURE__ */ jsx43(Fragment15, { children: /* @__PURE__ */ jsx43(CustomHeaderActions, { children: /* @__PURE__ */ jsx43(
         Button,
         {
           onClick: () => {
             const data = appStore.getState().state.data;
             onPublish && onPublish(data);
           },
-          icon: /* @__PURE__ */ jsx42(Globe, { size: "14px" }),
+          icon: /* @__PURE__ */ jsx43(Globe, { size: "14px" }),
           children: "Publish"
         }
       ) }) }),
-      children: /* @__PURE__ */ jsx42(
+      children: /* @__PURE__ */ jsx43(
         "header",
         {
           className: getClassName29({ leftSideBarVisible, rightSideBarVisible }),
           children: /* @__PURE__ */ jsxs18("div", { className: getClassName29("inner"), children: [
             /* @__PURE__ */ jsxs18("div", { className: getClassName29("toggle"), children: [
-              /* @__PURE__ */ jsx42("div", { className: getClassName29("leftSideBarToggle"), children: /* @__PURE__ */ jsx42(
+              /* @__PURE__ */ jsx43("div", { className: getClassName29("leftSideBarToggle"), children: /* @__PURE__ */ jsx43(
                 IconButton,
                 {
                   type: "button",
@@ -7974,10 +8155,10 @@ var HeaderInner = () => {
                     toggleSidebars("left");
                   },
                   title: "Toggle left sidebar",
-                  children: /* @__PURE__ */ jsx42(PanelLeft, { focusable: "false" })
+                  children: /* @__PURE__ */ jsx43(PanelLeft, { focusable: "false" })
                 }
               ) }),
-              /* @__PURE__ */ jsx42("div", { className: getClassName29("rightSideBarToggle"), children: /* @__PURE__ */ jsx42(
+              /* @__PURE__ */ jsx43("div", { className: getClassName29("rightSideBarToggle"), children: /* @__PURE__ */ jsx43(
                 IconButton,
                 {
                   type: "button",
@@ -7985,19 +8166,19 @@ var HeaderInner = () => {
                     toggleSidebars("right");
                   },
                   title: "Toggle right sidebar",
-                  children: /* @__PURE__ */ jsx42(PanelRight, { focusable: "false" })
+                  children: /* @__PURE__ */ jsx43(PanelRight, { focusable: "false" })
                 }
               ) })
             ] }),
-            /* @__PURE__ */ jsx42("div", { className: getClassName29("title"), children: /* @__PURE__ */ jsxs18(Heading, { rank: "2", size: "xs", children: [
+            /* @__PURE__ */ jsx43("div", { className: getClassName29("title"), children: /* @__PURE__ */ jsxs18(Heading, { rank: "2", size: "xs", children: [
               headerTitle || rootTitle || "Page",
-              headerPath && /* @__PURE__ */ jsxs18(Fragment14, { children: [
+              headerPath && /* @__PURE__ */ jsxs18(Fragment15, { children: [
                 " ",
-                /* @__PURE__ */ jsx42("code", { className: getClassName29("path"), children: headerPath })
+                /* @__PURE__ */ jsx43("code", { className: getClassName29("path"), children: headerPath })
               ] })
             ] }) }),
             /* @__PURE__ */ jsxs18("div", { className: getClassName29("tools"), children: [
-              /* @__PURE__ */ jsx42("div", { className: getClassName29("menuButton"), children: /* @__PURE__ */ jsx42(
+              /* @__PURE__ */ jsx43("div", { className: getClassName29("menuButton"), children: /* @__PURE__ */ jsx43(
                 IconButton,
                 {
                   type: "button",
@@ -8005,23 +8186,23 @@ var HeaderInner = () => {
                     return setMenuOpen(!menuOpen);
                   },
                   title: "Toggle menu bar",
-                  children: menuOpen ? /* @__PURE__ */ jsx42(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx42(ChevronDown, { focusable: "false" })
+                  children: menuOpen ? /* @__PURE__ */ jsx43(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx43(ChevronDown, { focusable: "false" })
                 }
               ) }),
-              /* @__PURE__ */ jsx42(
+              /* @__PURE__ */ jsx43(
                 MenuBar,
                 {
                   dispatch,
                   onPublish,
                   menuOpen,
-                  renderHeaderActions: () => /* @__PURE__ */ jsx42(CustomHeaderActions, { children: /* @__PURE__ */ jsx42(
+                  renderHeaderActions: () => /* @__PURE__ */ jsx43(CustomHeaderActions, { children: /* @__PURE__ */ jsx43(
                     Button,
                     {
                       onClick: () => {
                         const data = appStore.getState().state.data;
                         onPublish && onPublish(data);
                       },
-                      icon: /* @__PURE__ */ jsx42(Globe, { size: "14px" }),
+                      icon: /* @__PURE__ */ jsx43(Globe, { size: "14px" }),
                       children: "Publish"
                     }
                   ) }),
@@ -8035,7 +8216,7 @@ var HeaderInner = () => {
     }
   );
 };
-var Header = memo4(HeaderInner);
+var Header = memo6(HeaderInner);
 
 // components/SidebarSection/index.tsx
 init_react_import();
@@ -8045,7 +8226,7 @@ init_react_import();
 var styles_module_default25 = { "SidebarSection": "_SidebarSection_8boj8_1", "SidebarSection-title": "_SidebarSection-title_8boj8_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_8boj8_20", "SidebarSection-content": "_SidebarSection-content_8boj8_24", "SidebarSection--noPadding": "_SidebarSection--noPadding_8boj8_28", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_8boj8_41", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_8boj8_70", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_8boj8_41", "SidebarSection-heading": "_SidebarSection-heading_8boj8_82", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_8boj8_86" };
 
 // components/SidebarSection/index.tsx
-import { jsx as jsx43, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs19 } from "react/jsx-runtime";
 var getClassName30 = get_class_name_factory_default("SidebarSection", styles_module_default25);
 var SidebarSection = ({
   children,
@@ -8062,12 +8243,12 @@ var SidebarSection = ({
       className: getClassName30({ noBorderTop, noPadding }),
       style: { background },
       children: [
-        /* @__PURE__ */ jsx43("div", { className: getClassName30("title"), children: /* @__PURE__ */ jsxs19("div", { className: getClassName30("breadcrumbs"), children: [
-          showBreadcrumbs && /* @__PURE__ */ jsx43(Breadcrumbs, {}),
-          /* @__PURE__ */ jsx43("div", { className: getClassName30("heading"), children: /* @__PURE__ */ jsx43(Heading, { rank: "2", size: "xs", children: title }) })
+        /* @__PURE__ */ jsx44("div", { className: getClassName30("title"), children: /* @__PURE__ */ jsxs19("div", { className: getClassName30("breadcrumbs"), children: [
+          showBreadcrumbs && /* @__PURE__ */ jsx44(Breadcrumbs, {}),
+          /* @__PURE__ */ jsx44("div", { className: getClassName30("heading"), children: /* @__PURE__ */ jsx44(Heading, { rank: "2", size: "xs", children: title }) })
         ] }) }),
-        /* @__PURE__ */ jsx43("div", { className: getClassName30("content"), children }),
-        isLoading && /* @__PURE__ */ jsx43("div", { className: getClassName30("loadingOverlay"), children: /* @__PURE__ */ jsx43(Loader, { size: 32 }) })
+        /* @__PURE__ */ jsx44("div", { className: getClassName30("content"), children }),
+        isLoading && /* @__PURE__ */ jsx44("div", { className: getClassName30("loadingOverlay"), children: /* @__PURE__ */ jsx44(Loader, { size: 32 }) })
       ]
     }
   );
@@ -8076,7 +8257,7 @@ var SidebarSection = ({
 // components/Puck/components/Canvas/index.tsx
 init_react_import();
 import {
-  useCallback as useCallback17,
+  useCallback as useCallback18,
   useEffect as useEffect26,
   useMemo as useMemo19,
   useRef as useRef9,
@@ -8092,12 +8273,12 @@ init_react_import();
 var styles_module_default26 = { "ViewportControls": "_ViewportControls_e3unb_1", "ViewportControls--fullScreen": "_ViewportControls--fullScreen_e3unb_5", "ViewportControls-toggleButton": "_ViewportControls-toggleButton_e3unb_14", "ViewportControls--isExpanded": "_ViewportControls--isExpanded_e3unb_38", "ViewportControls-actions": "_ViewportControls-actions_e3unb_42", "ViewportControls-actionsInner": "_ViewportControls-actionsInner_e3unb_46", "ViewportControls-divider": "_ViewportControls-divider_e3unb_75", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_e3unb_81", "ViewportControls-zoom": "_ViewportControls-zoom_e3unb_81", "ViewportButton-inner": "_ViewportButton-inner_e3unb_111", "ViewportButton--isActive": "_ViewportButton--isActive_e3unb_119" };
 
 // components/ViewportControls/index.tsx
-import { jsx as jsx44, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs20 } from "react/jsx-runtime";
 var icons = {
-  Smartphone: /* @__PURE__ */ jsx44(Smartphone, { size: 16 }),
-  Tablet: /* @__PURE__ */ jsx44(Tablet, { size: 16 }),
-  Monitor: /* @__PURE__ */ jsx44(Monitor, { size: 16 }),
-  FullWidth: /* @__PURE__ */ jsx44(Expand, { size: 16 })
+  Smartphone: /* @__PURE__ */ jsx45(Smartphone, { size: 16 }),
+  Tablet: /* @__PURE__ */ jsx45(Tablet, { size: 16 }),
+  Monitor: /* @__PURE__ */ jsx45(Monitor, { size: 16 }),
+  FullWidth: /* @__PURE__ */ jsx45(Expand, { size: 16 })
 };
 var getClassName31 = get_class_name_factory_default("ViewportControls", styles_module_default26);
 var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default26);
@@ -8108,7 +8289,7 @@ var ActionButton = ({
   isActive,
   disabled
 }) => {
-  return /* @__PURE__ */ jsx44("span", { className: getClassNameButton({ isActive }), suppressHydrationWarning: true, children: /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45("span", { className: getClassNameButton({ isActive }), suppressHydrationWarning: true, children: /* @__PURE__ */ jsx45(
     IconButton,
     {
       type: "button",
@@ -8116,7 +8297,7 @@ var ActionButton = ({
       disabled: disabled || isActive,
       onClick,
       suppressHydrationWarning: true,
-      children: /* @__PURE__ */ jsx44("span", { className: getClassNameButton("inner"), children })
+      children: /* @__PURE__ */ jsx45("span", { className: getClassNameButton("inner"), children })
     }
   ) });
 };
@@ -8167,8 +8348,8 @@ var ViewportControls = ({
       className: getClassName31({ isExpanded, fullScreen }),
       suppressHydrationWarning: true,
       children: [
-        /* @__PURE__ */ jsx44("div", { className: getClassName31("actions"), children: /* @__PURE__ */ jsxs20("div", { className: getClassName31("actionsInner"), children: [
-          viewports.map((viewport, i) => /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx45("div", { className: getClassName31("actions"), children: /* @__PURE__ */ jsxs20("div", { className: getClassName31("actionsInner"), children: [
+          viewports.map((viewport, i) => /* @__PURE__ */ jsx45(
             ActionButton,
             {
               title: viewport.label ? `Switch to ${viewport.label} viewport` : "Switch viewport",
@@ -8181,8 +8362,8 @@ var ViewportControls = ({
             },
             i
           )),
-          /* @__PURE__ */ jsx44("div", { className: getClassName31("divider") }),
-          /* @__PURE__ */ jsx44(
+          /* @__PURE__ */ jsx45("div", { className: getClassName31("divider") }),
+          /* @__PURE__ */ jsx45(
             ActionButton,
             {
               title: "Zoom viewport out",
@@ -8196,10 +8377,10 @@ var ViewportControls = ({
                   )].value
                 );
               },
-              children: /* @__PURE__ */ jsx44(ZoomOut, { size: 16 })
+              children: /* @__PURE__ */ jsx45(ZoomOut, { size: 16 })
             }
           ),
-          /* @__PURE__ */ jsx44(
+          /* @__PURE__ */ jsx45(
             ActionButton,
             {
               title: "Zoom viewport in",
@@ -8213,12 +8394,12 @@ var ViewportControls = ({
                   )].value
                 );
               },
-              children: /* @__PURE__ */ jsx44(ZoomIn, { size: 16 })
+              children: /* @__PURE__ */ jsx45(ZoomIn, { size: 16 })
             }
           ),
           /* @__PURE__ */ jsxs20("div", { className: getClassName31("zoom"), children: [
-            /* @__PURE__ */ jsx44("div", { className: getClassName31("divider") }),
-            /* @__PURE__ */ jsx44(
+            /* @__PURE__ */ jsx45("div", { className: getClassName31("divider") }),
+            /* @__PURE__ */ jsx45(
               "select",
               {
                 className: getClassName31("zoomSelect"),
@@ -8229,7 +8410,7 @@ var ViewportControls = ({
                 onChange: (e) => {
                   onZoom(parseFloat(e.currentTarget.value));
                 },
-                children: zoomOptions.map((option) => /* @__PURE__ */ jsx44(
+                children: zoomOptions.map((option) => /* @__PURE__ */ jsx45(
                   "option",
                   {
                     value: option.value,
@@ -8241,13 +8422,13 @@ var ViewportControls = ({
             )
           ] })
         ] }) }),
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx45(
           "button",
           {
             className: getClassName31("toggleButton"),
             title: "Toggle viewport menu",
             onClick: () => setIsExpanded((s) => !s),
-            children: isExpanded ? /* @__PURE__ */ jsx44(X, { size: 16 }) : /* @__PURE__ */ jsx44(Monitor, { size: 16 })
+            children: isExpanded ? /* @__PURE__ */ jsx45(X, { size: 16 }) : /* @__PURE__ */ jsx45(Monitor, { size: 16 })
           }
         )
       ]
@@ -8260,7 +8441,7 @@ init_react_import();
 var styles_module_default27 = { "PuckCanvas": "_PuckCanvas_t6s9b_1", "PuckCanvas-controls": "_PuckCanvas-controls_t6s9b_17", "PuckCanvas--fullScreen": "_PuckCanvas--fullScreen_t6s9b_22", "PuckCanvas-inner": "_PuckCanvas-inner_t6s9b_33", "PuckCanvas-root": "_PuckCanvas-root_t6s9b_42", "PuckCanvas--ready": "_PuckCanvas--ready_t6s9b_67", "PuckCanvas-loader": "_PuckCanvas-loader_t6s9b_72", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_t6s9b_82" };
 
 // components/Puck/components/Canvas/index.tsx
-import { useShallow as useShallow8 } from "zustand/react/shallow";
+import { useShallow as useShallow9 } from "zustand/react/shallow";
 
 // lib/frame-context.tsx
 init_react_import();
@@ -8270,7 +8451,7 @@ import {
   useRef as useRef8,
   useMemo as useMemo18
 } from "react";
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 var FrameContext = createContext7(null);
 var FrameProvider = ({
   children
@@ -8282,7 +8463,7 @@ var FrameProvider = ({
     }),
     []
   );
-  return /* @__PURE__ */ jsx45(FrameContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx46(FrameContext.Provider, { value, children });
 };
 var useCanvasFrame = () => {
   const context = useContext12(FrameContext);
@@ -8293,7 +8474,7 @@ var useCanvasFrame = () => {
 };
 
 // components/Puck/components/Canvas/index.tsx
-import { Fragment as Fragment15, jsx as jsx46, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx47, jsxs as jsxs21 } from "react/jsx-runtime";
 var getClassName32 = get_class_name_factory_default("PuckCanvas", styles_module_default27);
 var ZOOM_ON_CHANGE = true;
 var TRANSITION_DURATION = 150;
@@ -8310,7 +8491,7 @@ var Canvas = () => {
     status,
     iframe
   } = useAppStore(
-    useShallow8((s) => ({
+    useShallow9((s) => ({
       dispatch: s.dispatch,
       overrides: s.overrides,
       setUi: s.setUi,
@@ -8327,7 +8508,7 @@ var Canvas = () => {
     rightSideBarWidth,
     viewports
   } = useAppStore(
-    useShallow8((s) => ({
+    useShallow9((s) => ({
       leftSideBarVisible: s.state.ui.leftSideBarVisible,
       rightSideBarVisible: s.state.ui.rightSideBarVisible,
       leftSideBarWidth: s.state.ui.leftSideBarWidth,
@@ -8338,14 +8519,14 @@ var Canvas = () => {
   const [showTransition, setShowTransition] = useState23(false);
   const isResizingRef = useRef9(false);
   const defaultRender = useMemo19(() => {
-    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx46(Fragment15, { children });
+    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx47(Fragment16, { children });
     return PuckDefault;
   }, []);
   const CustomPreview = useMemo19(
     () => overrides.preview || defaultRender,
     [overrides]
   );
-  const getFrameDimensions = useCallback17(() => {
+  const getFrameDimensions = useCallback18(() => {
     if (frameRef.current) {
       const frame = frameRef.current;
       const box = getBox(frame);
@@ -8413,7 +8594,7 @@ var Canvas = () => {
         }
       },
       children: [
-        viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx46("div", { className: getClassName32("controls"), children: /* @__PURE__ */ jsx46(
+        viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx47("div", { className: getClassName32("controls"), children: /* @__PURE__ */ jsx47(
           ViewportControls,
           {
             fullScreen: _experimentalFullScreenCanvas,
@@ -8444,7 +8625,7 @@ var Canvas = () => {
           }
         ) }),
         /* @__PURE__ */ jsxs21("div", { className: getClassName32("inner"), ref: frameRef, children: [
-          /* @__PURE__ */ jsx46(
+          /* @__PURE__ */ jsx47(
             "div",
             {
               className: getClassName32("root"),
@@ -8461,10 +8642,10 @@ var Canvas = () => {
                 setShowTransition(false);
                 isResizingRef.current = false;
               },
-              children: /* @__PURE__ */ jsx46(CustomPreview, { children: /* @__PURE__ */ jsx46(Preview2, {}) })
+              children: /* @__PURE__ */ jsx47(CustomPreview, { children: /* @__PURE__ */ jsx47(Preview2, {}) })
             }
           ),
-          /* @__PURE__ */ jsx46("div", { className: getClassName32("loader"), children: /* @__PURE__ */ jsx46(Loader, { size: 24 }) })
+          /* @__PURE__ */ jsx47("div", { className: getClassName32("loader"), children: /* @__PURE__ */ jsx47(Loader, { size: 24 }) })
         ] })
       ]
     }
@@ -8473,7 +8654,7 @@ var Canvas = () => {
 
 // lib/use-sidebar-resize.ts
 init_react_import();
-import { useCallback as useCallback18, useEffect as useEffect27, useRef as useRef10, useState as useState24 } from "react";
+import { useCallback as useCallback19, useEffect as useEffect27, useRef as useRef10, useState as useState24 } from "react";
 function useSidebarResize(position, dispatch) {
   const [width, setWidth] = useState24(null);
   const sidebarRef = useRef10(null);
@@ -8510,7 +8691,7 @@ function useSidebarResize(position, dispatch) {
       setWidth(storeWidth);
     }
   }, [storeWidth]);
-  const handleResizeEnd = useCallback18(
+  const handleResizeEnd = useCallback19(
     (width2) => {
       dispatch({
         type: "setUi",
@@ -8557,14 +8738,14 @@ init_react_import();
 
 // components/Puck/components/ResizeHandle/index.tsx
 init_react_import();
-import { useCallback as useCallback19, useRef as useRef11 } from "react";
+import { useCallback as useCallback20, useRef as useRef11 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/ResizeHandle/styles.module.css#css-module
 init_react_import();
 var styles_module_default28 = { "ResizeHandle": "_ResizeHandle_144bf_2", "ResizeHandle--left": "_ResizeHandle--left_144bf_16", "ResizeHandle--right": "_ResizeHandle--right_144bf_20" };
 
 // components/Puck/components/ResizeHandle/index.tsx
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var getClassName33 = get_class_name_factory_default("ResizeHandle", styles_module_default28);
 var ResizeHandle = ({
   position,
@@ -8578,7 +8759,7 @@ var ResizeHandle = ({
   const isDragging = useRef11(false);
   const startX = useRef11(0);
   const startWidth = useRef11(0);
-  const handleMouseMove = useCallback19(
+  const handleMouseMove = useCallback20(
     (e) => {
       if (!isDragging.current) return;
       const delta = e.clientX - startX.current;
@@ -8589,7 +8770,7 @@ var ResizeHandle = ({
     },
     [onResize, position]
   );
-  const handleMouseUp = useCallback19(() => {
+  const handleMouseUp = useCallback20(() => {
     var _a;
     if (!isDragging.current) return;
     isDragging.current = false;
@@ -8605,7 +8786,7 @@ var ResizeHandle = ({
     onResizeEnd(finalWidth);
     resetAutoZoom();
   }, [onResizeEnd]);
-  const handleMouseDown = useCallback19(
+  const handleMouseDown = useCallback20(
     (e) => {
       var _a;
       isDragging.current = true;
@@ -8623,7 +8804,7 @@ var ResizeHandle = ({
     },
     [position, handleMouseMove, handleMouseUp]
   );
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     "div",
     {
       ref: handleRef,
@@ -8638,7 +8819,7 @@ init_react_import();
 var styles_module_default29 = { "Sidebar": "_Sidebar_o396p_1", "Sidebar--isVisible": "_Sidebar--isVisible_o396p_9", "Sidebar--left": "_Sidebar--left_o396p_13", "Sidebar--right": "_Sidebar--right_o396p_25", "Sidebar-resizeHandle": "_Sidebar-resizeHandle_o396p_37" };
 
 // components/Puck/components/Sidebar/index.tsx
-import { Fragment as Fragment16, jsx as jsx48, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx49, jsxs as jsxs22 } from "react/jsx-runtime";
 var getClassName34 = get_class_name_factory_default("Sidebar", styles_module_default29);
 var Sidebar = ({
   position,
@@ -8648,8 +8829,8 @@ var Sidebar = ({
   onResizeEnd,
   children
 }) => {
-  return /* @__PURE__ */ jsxs22(Fragment16, { children: [
-    /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsxs22(Fragment17, { children: [
+    /* @__PURE__ */ jsx49(
       "div",
       {
         ref: sidebarRef,
@@ -8657,7 +8838,7 @@ var Sidebar = ({
         children
       }
     ),
-    /* @__PURE__ */ jsx48("div", { className: `${getClassName34("resizeHandle")}`, children: /* @__PURE__ */ jsx48(
+    /* @__PURE__ */ jsx49("div", { className: `${getClassName34("resizeHandle")}`, children: /* @__PURE__ */ jsx49(
       ResizeHandle,
       {
         position,
@@ -8671,7 +8852,7 @@ var Sidebar = ({
 
 // lib/use-delete-hotkeys.ts
 init_react_import();
-import { useCallback as useCallback20 } from "react";
+import { useCallback as useCallback21 } from "react";
 var isElementVisible = (element) => {
   let current = element;
   while (current && current !== document.body) {
@@ -8706,7 +8887,7 @@ var shouldBlockDeleteHotkey = (e) => {
 };
 var useDeleteHotkeys = () => {
   const appStore = useAppStoreApi();
-  const deleteSelectedComponent = useCallback20(
+  const deleteSelectedComponent = useCallback21(
     (e) => {
       var _a;
       if (shouldBlockDeleteHotkey(e)) {
@@ -8738,7 +8919,7 @@ init_react_import();
 var styles_module_default30 = { "Nav": "_Nav_3nnxc_1", "Nav-list": "_Nav-list_3nnxc_5", "Nav-mobileActions": "_Nav-mobileActions_3nnxc_23", "NavItem-link": "_NavItem-link_3nnxc_38", "NavItem": "_NavItem_3nnxc_38", "NavItem-linkIcon": "_NavItem-linkIcon_3nnxc_88", "NavItem--active": "_NavItem--active_3nnxc_93", "NavItem--mobileOnly": "_NavItem--mobileOnly_3nnxc_120" };
 
 // components/Puck/components/Nav/index.tsx
-import { jsx as jsx49, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs23 } from "react/jsx-runtime";
 var getClassName35 = get_class_name_factory_default("Nav", styles_module_default30);
 var getClassNameItem3 = get_class_name_factory_default("NavItem", styles_module_default30);
 var MenuItem = ({
@@ -8748,9 +8929,9 @@ var MenuItem = ({
   isActive,
   mobileOnly
 }) => {
-  return /* @__PURE__ */ jsx49("li", { className: getClassNameItem3({ active: isActive, mobileOnly }), children: onClick && /* @__PURE__ */ jsxs23("div", { className: getClassNameItem3("link"), onClick, children: [
-    icon && /* @__PURE__ */ jsx49("span", { className: getClassNameItem3("linkIcon"), children: icon }),
-    /* @__PURE__ */ jsx49("span", { className: getClassNameItem3("linkLabel"), children: label })
+  return /* @__PURE__ */ jsx50("li", { className: getClassNameItem3({ active: isActive, mobileOnly }), children: onClick && /* @__PURE__ */ jsxs23("div", { className: getClassNameItem3("link"), onClick, children: [
+    icon && /* @__PURE__ */ jsx50("span", { className: getClassNameItem3("linkIcon"), children: icon }),
+    /* @__PURE__ */ jsx50("span", { className: getClassNameItem3("linkLabel"), children: label })
   ] }) });
 };
 var Nav = ({
@@ -8758,13 +8939,13 @@ var Nav = ({
   mobileActions
 }) => {
   return /* @__PURE__ */ jsxs23("nav", { className: getClassName35(), children: [
-    /* @__PURE__ */ jsx49("ul", { className: getClassName35("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ jsx49(MenuItem, __spreadValues({}, item), key)) }),
-    mobileActions && /* @__PURE__ */ jsx49("div", { className: getClassName35("mobileActions"), children: mobileActions })
+    /* @__PURE__ */ jsx50("ul", { className: getClassName35("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ jsx50(MenuItem, __spreadValues({}, item), key)) }),
+    mobileActions && /* @__PURE__ */ jsx50("div", { className: getClassName35("mobileActions"), children: mobileActions })
   ] });
 };
 
 // components/Puck/components/Layout/index.tsx
-import { jsx as jsx50, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs24 } from "react/jsx-runtime";
 var getClassName36 = get_class_name_factory_default("Puck", styles_module_default22);
 var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_module_default22);
 var getPluginTabClassName = get_class_name_factory_default("PuckPluginTab", styles_module_default22);
@@ -8775,14 +8956,14 @@ var FieldSideBar = () => {
       return s.selectedItem ? (_b = (_a = s.config.components[s.selectedItem.type]) == null ? void 0 : _a["label"]) != null ? _b : s.selectedItem.type.toString() : "Page";
     }
   );
-  return /* @__PURE__ */ jsx50(SidebarSection, { noPadding: true, noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx50(Fields, {}) });
+  return /* @__PURE__ */ jsx51(SidebarSection, { noPadding: true, noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx51(Fields, {}) });
 };
 var PluginTab = ({
   children,
   visible,
   mobileOnly
 }) => {
-  return /* @__PURE__ */ jsx50("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ jsx50("div", { className: getPluginTabClassName("body"), children }) });
+  return /* @__PURE__ */ jsx51("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ jsx51("div", { className: getPluginTabClassName("body"), children }) });
 };
 var Layout = ({ children }) => {
   const {
@@ -8790,7 +8971,7 @@ var Layout = ({ children }) => {
     dnd,
     initialHistory: _initialHistory,
     plugins,
-    height = "100dvh"
+    height
   } = usePropsContext();
   const iframe = useMemo20(
     () => __spreadValues({
@@ -8894,7 +9075,7 @@ var Layout = ({ children }) => {
         }
         details[plugin.name] = {
           label: (_a = plugin.label) != null ? _a : plugin.name,
-          icon: (_b = plugin.icon) != null ? _b : /* @__PURE__ */ jsx50(ToyBrick, {}),
+          icon: (_b = plugin.icon) != null ? _b : /* @__PURE__ */ jsx51(ToyBrick, {}),
           onClick: () => {
             var _a2;
             setMobilePanelHeightMode((_a2 = plugin.mobilePanelHeight) != null ? _a2 : "toggle");
@@ -8934,99 +9115,92 @@ var Layout = ({ children }) => {
       return (_a = s.state.ui.mobilePanelExpanded) != null ? _a : false;
     }
   );
-  return /* @__PURE__ */ jsxs24(
-    "div",
-    {
-      className: `Puck ${getClassName36()}`,
-      style: { height },
-      id: instanceId,
-      children: [
-        /* @__PURE__ */ jsx50(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx50(CustomPuck, { children: children || /* @__PURE__ */ jsx50(FrameProvider, { children: /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsxs24("div", { className: `Puck ${getClassName36()}`, id: instanceId, children: [
+    /* @__PURE__ */ jsx51(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx51(CustomPuck, { children: children || /* @__PURE__ */ jsx51(FrameProvider, { children: /* @__PURE__ */ jsx51(
+      "div",
+      {
+        className: getLayoutClassName({
+          leftSideBarVisible,
+          mounted,
+          rightSideBarVisible: !hasDesktopFieldsPlugin && rightSideBarVisible,
+          isExpanded: mobilePanelExpanded,
+          mobilePanelHeightToggle: mobilePanelHeightMode === "toggle",
+          mobilePanelHeightMinContent: mobilePanelHeightMode === "min-content"
+        }),
+        style: { height },
+        children: /* @__PURE__ */ jsxs24(
           "div",
           {
-            className: getLayoutClassName({
-              leftSideBarVisible,
-              mounted,
-              rightSideBarVisible: !hasDesktopFieldsPlugin && rightSideBarVisible,
-              isExpanded: mobilePanelExpanded,
-              mobilePanelHeightToggle: mobilePanelHeightMode === "toggle",
-              mobilePanelHeightMinContent: mobilePanelHeightMode === "min-content"
-            }),
-            children: /* @__PURE__ */ jsxs24(
-              "div",
-              {
-                className: getLayoutClassName("inner"),
-                style: layoutOptions,
-                children: [
-                  /* @__PURE__ */ jsx50("div", { className: getLayoutClassName("header"), children: /* @__PURE__ */ jsx50(Header, {}) }),
-                  /* @__PURE__ */ jsx50("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ jsx50(
-                    Nav,
-                    {
-                      items: pluginItems,
-                      mobileActions: leftSideBarVisible && mobilePanelHeightMode === "toggle" && /* @__PURE__ */ jsx50(
-                        IconButton,
-                        {
-                          type: "button",
-                          title: "maximize",
-                          onClick: () => {
-                            setUi({
-                              mobilePanelExpanded: !mobilePanelExpanded
-                            });
-                          },
-                          children: mobilePanelExpanded ? /* @__PURE__ */ jsx50(Minimize2, { size: 21 }) : /* @__PURE__ */ jsx50(Maximize2, { size: 21 })
-                        }
-                      )
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx50(
-                    Sidebar,
-                    {
-                      position: "left",
-                      sidebarRef: leftSidebarRef,
-                      isVisible: leftSideBarVisible,
-                      onResize: setLeftWidth,
-                      onResizeEnd: handleLeftSidebarResizeEnd,
-                      children: Object.entries(pluginItems).map(
-                        ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ jsx50(
-                          PluginTab,
-                          {
-                            visible: currentPlugin === id,
-                            mobileOnly,
-                            children: /* @__PURE__ */ jsx50(Render2, {})
-                          },
-                          id
-                        )
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsx50(Canvas, {}),
-                  !hasDesktopFieldsPlugin && /* @__PURE__ */ jsx50(
-                    Sidebar,
+            className: getLayoutClassName("inner"),
+            style: layoutOptions,
+            children: [
+              /* @__PURE__ */ jsx51("div", { className: getLayoutClassName("header"), children: /* @__PURE__ */ jsx51(Header, {}) }),
+              /* @__PURE__ */ jsx51("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ jsx51(
+                Nav,
+                {
+                  items: pluginItems,
+                  mobileActions: leftSideBarVisible && mobilePanelHeightMode === "toggle" && /* @__PURE__ */ jsx51(
+                    IconButton,
                     {
-                      position: "right",
-                      sidebarRef: rightSidebarRef,
-                      isVisible: rightSideBarVisible,
-                      onResize: setRightWidth,
-                      onResizeEnd: handleRightSidebarResizeEnd,
-                      children: /* @__PURE__ */ jsx50(FieldSideBar, {})
+                      type: "button",
+                      title: "maximize",
+                      onClick: () => {
+                        setUi({
+                          mobilePanelExpanded: !mobilePanelExpanded
+                        });
+                      },
+                      children: mobilePanelExpanded ? /* @__PURE__ */ jsx51(Minimize2, { size: 21 }) : /* @__PURE__ */ jsx51(Maximize2, { size: 21 })
                     }
                   )
-                ]
-              }
-            )
+                }
+              ) }),
+              /* @__PURE__ */ jsx51(
+                Sidebar,
+                {
+                  position: "left",
+                  sidebarRef: leftSidebarRef,
+                  isVisible: leftSideBarVisible,
+                  onResize: setLeftWidth,
+                  onResizeEnd: handleLeftSidebarResizeEnd,
+                  children: Object.entries(pluginItems).map(
+                    ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ jsx51(
+                      PluginTab,
+                      {
+                        visible: currentPlugin === id,
+                        mobileOnly,
+                        children: /* @__PURE__ */ jsx51(Render2, {})
+                      },
+                      id
+                    )
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx51(Canvas, {}),
+              !hasDesktopFieldsPlugin && /* @__PURE__ */ jsx51(
+                Sidebar,
+                {
+                  position: "right",
+                  sidebarRef: rightSidebarRef,
+                  isVisible: rightSideBarVisible,
+                  onResize: setRightWidth,
+                  onResizeEnd: handleRightSidebarResizeEnd,
+                  children: /* @__PURE__ */ jsx51(FieldSideBar, {})
+                }
+              )
+            ]
           }
-        ) }) }) }),
-        /* @__PURE__ */ jsx50("div", { id: "puck-portal-root", className: getClassName36("portal") })
-      ]
-    }
-  );
+        )
+      }
+    ) }) }) }),
+    /* @__PURE__ */ jsx51("div", { id: "puck-portal-root", className: getClassName36("portal") })
+  ] });
 };
 
 // components/Puck/index.tsx
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var propsContext = createContext8({});
 function PropsProvider(props) {
-  return /* @__PURE__ */ jsx51(propsContext.Provider, { value: props, children: props.children });
+  return /* @__PURE__ */ jsx52(propsContext.Provider, { value: props, children: props.children });
 }
 var usePropsContext = () => useContext13(propsContext);
 function PuckProvider({ children }) {
@@ -9155,7 +9329,7 @@ function PuckProvider({ children }) {
     return __spreadValues(__spreadValues({}, pluginFieldTransforms), fieldTransforms);
   }, [fieldTransforms, plugins]);
   const instanceId = useSafeId();
-  const generateAppStore = useCallback21(
+  const generateAppStore = useCallback22(
     (state) => {
       return {
         instanceId,
@@ -9206,7 +9380,7 @@ function PuckProvider({ children }) {
       (s) => s.state.data,
       (data) => {
         if (onChange) {
-          if ((0, import_fast_deep_equal.default)(data, previousData.current)) return;
+          if ((0, import_fast_deep_equal2.default)(data, previousData.current)) return;
           onChange(data);
           previousData.current = data;
         }
@@ -9219,10 +9393,10 @@ function PuckProvider({ children }) {
     const { resolveAndCommitData } = appStore.getState();
     resolveAndCommitData();
   }, []);
-  return /* @__PURE__ */ jsx51(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx51(UsePuckStoreContext.Provider, { value: uPuckStore, children }) });
+  return /* @__PURE__ */ jsx52(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx52(UsePuckStoreContext.Provider, { value: uPuckStore, children }) });
 }
 function Puck(props) {
-  return /* @__PURE__ */ jsx51(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx51(PuckProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx51(Layout, { children: props.children }) })) }));
+  return /* @__PURE__ */ jsx52(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx52(PuckProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx52(Layout, { children: props.children }) })) }));
 }
 Puck.Components = Components;
 Puck.Fields = Fields;
@@ -9299,325 +9473,45 @@ classnames/index.js:
   *)
 
 lucide-react/dist/esm/shared/src/utils.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/defaultAttributes.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/Icon.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/createLucideIcon.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/chevron-down.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/chevron-right.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/chevron-up.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/circle-check-big.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/copy.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/corner-left-up.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/ellipsis-vertical.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/expand.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/globe.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/hammer.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/hash.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/layers.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/layout-grid.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/link.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/list.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/lock-open.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/lock.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/maximize-2.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/minimize-2.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/monitor.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/panel-left.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/panel-right.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/plus.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/rectangle-ellipsis.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/redo-2.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/search.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/sliders-horizontal.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/smartphone.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/tablet.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/toy-brick.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/trash.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/type.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/undo-2.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/x.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/zoom-in.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/zoom-out.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/lucide-react.js:
   (**
    * @license lucide-react v0.468.0 - ISC