npm - @measured/puck - Versions diffs - 0.19.0-canary.de23f9d → 0.19.0-canary.e62832e - Mend

@measured/puck 0.19.0-canary.de23f9d → 0.19.0-canary.e62832e

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/{chunk-T6VJEBJD.mjs → chunk-7N5DRY4G.mjs} +44 -8
package/dist/index.css +13 -0
package/dist/index.d.mts +3 -14
package/dist/index.d.ts +3 -14
package/dist/index.js +410 -365
package/dist/index.mjs +267 -257
package/dist/{resolve-all-data-wwgDuTnC.d.mts → resolve-all-data-3XjIPfNh.d.mts} +13 -1
package/dist/{resolve-all-data-wwgDuTnC.d.ts → resolve-all-data-3XjIPfNh.d.ts} +13 -1
package/dist/rsc.d.mts +2 -2
package/dist/rsc.d.ts +2 -2
package/dist/rsc.js +37 -2
package/dist/rsc.mjs +5 -3
package/package.json +4 -3

package/dist/index.js CHANGED Viewed

@@ -311,7 +311,7 @@ init_react_import();
 var styles_module_default2 = { "InputWrapper": "_InputWrapper_g5w3n_1", "Input-label": "_Input-label_g5w3n_5", "Input-labelIcon": "_Input-labelIcon_g5w3n_14", "Input-disabledIcon": "_Input-disabledIcon_g5w3n_21", "Input-input": "_Input-input_g5w3n_26", "Input": "_Input_g5w3n_1", "Input--readOnly": "_Input--readOnly_g5w3n_74", "Input-radioGroupItems": "_Input-radioGroupItems_g5w3n_85", "Input-radio": "_Input-radio_g5w3n_85", "Input-radioInner": "_Input-radioInner_g5w3n_102", "Input-radioInput": "_Input-radioInput_g5w3n_147" };
 // components/AutoField/index.tsx
-var import_react24 = require("react");
+var import_react23 = require("react");
 // components/AutoField/fields/index.tsx
 init_react_import();
@@ -771,7 +771,7 @@ var IconButton = ({
 };
 // components/AutoField/fields/ArrayField/index.tsx
-var import_react16 = require("react");
+var import_react15 = require("react");
 // components/DragIcon/index.tsx
 init_react_import();
@@ -2098,7 +2098,6 @@ function useAppStoreApi() {
 // components/Sortable/index.tsx
 init_react_import();
 var import_react13 = require("@dnd-kit/react");
-var import_react14 = require("react");
 // lib/dnd/dnd-kit/safe.ts
 init_react_import();
@@ -2121,7 +2120,8 @@ function useDraggableSafe(input) {
 function useSortableSafe(input) {
   if (typeof window === "undefined") {
     return { ref: () => {
-    }, status: "idle" };
+    }, status: "idle", handleRef: () => {
+    } };
   }
   return (0, import_sortable.useSortable)(input);
 }
@@ -2145,6 +2145,7 @@ var _PointerSensor = class _PointerSensor extends import_abstract.Sensor {
     this.listeners = new import_utilities.Listeners();
     this.cleanup = /* @__PURE__ */ new Set();
     this.source = void 0;
+    this.started = false;
     __privateAdd(this, _clearTimeout);
     this.handleCancel = this.handleCancel.bind(this);
     this.handlePointerUp = this.handlePointerUp.bind(this);
@@ -2302,6 +2303,12 @@ var _PointerSensor = class _PointerSensor extends import_abstract.Sensor {
     if (!status.idle) {
       const canceled = !status.initialized;
       this.manager.actions.stop({ canceled });
+    } else if (this.started) {
+      setTimeout(() => {
+        if (!this.manager.dragOperation.status.idle) {
+          this.manager.actions.stop({ canceled: false });
+        }
+      }, 10);
     }
     this.cleanup.forEach((cleanup) => cleanup());
     this.cleanup.clear();
@@ -2316,12 +2323,13 @@ var _PointerSensor = class _PointerSensor extends import_abstract.Sensor {
     var _a;
     const { manager, initialCoordinates } = this;
     (_a = __privateGet(this, _clearTimeout)) == null ? void 0 : _a.call(this);
-    if (!initialCoordinates || manager.dragOperation.status.initialized) {
+    if (!initialCoordinates || manager.dragOperation.status.initialized || this.started) {
       return;
     }
     if (event.defaultPrevented) {
       return;
     }
+    this.started = true;
     event.preventDefault();
     (0, import_state2.batch)(() => {
       manager.actions.setDragSource(source.id);
@@ -2349,6 +2357,9 @@ var _PointerSensor = class _PointerSensor extends import_abstract.Sensor {
     ]);
     ownerDocument.body.setPointerCapture(event.pointerId);
     this.cleanup.add(unbind);
+    this.cleanup.add(() => {
+      this.started = false;
+    });
   }
   handleDragStart(event) {
     const { target } = event;
@@ -2396,23 +2407,26 @@ function patchWindow(window2) {
 // lib/dnd/use-sensors.ts
 var import_utilities2 = require("@dnd-kit/dom/utilities");
-var useSensors = () => {
+var useSensors = ({
+  other,
+  mouse,
+  touch
+} = {
+  touch: { delay: { value: 200, tolerance: 10 } },
+  other: { delay: { value: 200, tolerance: 10 }, distance: { value: 5 } }
+}) => {
   const [sensors] = (0, import_react12.useState)(() => [
     PointerSensor.configure({
       activationConstraints(event, source) {
         var _a;
         const { pointerType, target } = event;
         if (pointerType === "mouse" && (0, import_utilities2.isElement)(target) && (source.handle === target || ((_a = source.handle) == null ? void 0 : _a.contains(target)))) {
-          return void 0;
+          return mouse;
         }
-        const delay = { value: 200, tolerance: 10 };
         if (pointerType === "touch") {
-          return { delay };
+          return touch;
         }
-        return {
-          delay,
-          distance: { value: 5 }
-        };
+        return other;
       }
     })
   ]);
@@ -2755,7 +2769,6 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
 };
 // components/Sortable/index.tsx
-var import_modifiers = require("@dnd-kit/dom/modifiers");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var SortableProvider = ({
   children,
@@ -2763,22 +2776,20 @@ var SortableProvider = ({
   onDragEnd,
   onMove
 }) => {
-  const [move, setMove] = (0, import_react14.useState)({ source: -1, target: -1 });
-  const sensors = useSensors();
+  const sensors = useSensors({
+    mouse: { distance: { value: 5 } }
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_react13.DragDropProvider,
     {
       sensors,
-      modifiers: [
-        import_modifiers.RestrictToElement.configure({
-          element() {
-            return document.querySelector("[data-dnd-container]");
-          }
-        })
-      ],
-      onDragStart,
+      onDragStart: (event) => {
+        var _a, _b;
+        return onDragStart((_b = (_a = event.operation.source) == null ? void 0 : _a.id.toString()) != null ? _b : "");
+      },
       onDragOver: (event, manager) => {
         var _a, _b;
+        event.preventDefault();
         const { operation } = event;
         const { source, target } = operation;
         if (!source || !target) return;
@@ -2786,14 +2797,14 @@ var SortableProvider = ({
         let targetIndex = target.data.index;
         const collisionData = (_b = (_a = manager.dragOperation.data) == null ? void 0 : _a.collisionMap) == null ? void 0 : _b[target.id];
         if (sourceIndex !== targetIndex && source.id !== target.id) {
-          const collisionPosition = (collisionData == null ? void 0 : collisionData.direction) === "up" ? "before" : "after";
+          const collisionPosition = collisionData.direction === "up" ? "before" : "after";
           if (targetIndex >= sourceIndex) {
             targetIndex = targetIndex - 1;
           }
           if (collisionPosition === "after") {
             targetIndex = targetIndex + 1;
           }
-          setMove({
+          onMove({
             source: sourceIndex,
             target: targetIndex
           });
@@ -2801,12 +2812,8 @@ var SortableProvider = ({
       },
       onDragEnd: () => {
         setTimeout(() => {
-          if (move.source !== -1 && move.target !== -1) {
-            onMove(move);
-          }
           onDragEnd();
         }, 250);
-        setMove({ source: -1, target: -1 });
       },
       children
     }
@@ -2819,7 +2826,11 @@ var Sortable = ({
   children,
   type = "item"
 }) => {
-  const { ref: sortableRef, status } = useSortableSafe({
+  const {
+    ref: sortableRef,
+    status,
+    handleRef
+  } = useSortableSafe({
     id,
     type,
     index,
@@ -2827,16 +2838,16 @@ var Sortable = ({
     data: { index },
     collisionDetector: createDynamicCollisionDetector("y")
   });
-  return children({ status, ref: sortableRef });
+  return children({ status, ref: sortableRef, handleRef });
 };
 // components/AutoField/context.tsx
 init_react_import();
-var import_react15 = require("react");
+var import_react14 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var NestedFieldContext = (0, import_react15.createContext)({});
+var NestedFieldContext = (0, import_react14.createContext)({});
 var useNestedFieldContext = () => {
-  const context = (0, import_react15.useContext)(NestedFieldContext);
+  const context = (0, import_react14.useContext)(NestedFieldContext);
   return __spreadProps(__spreadValues({}, context), {
     readOnlyFields: context.readOnlyFields || {}
   });
@@ -2850,7 +2861,7 @@ var NestedFieldProvider = ({
 }) => {
   const subPath = `${name}.${subName}`;
   const wildcardSubPath = `${wildcardName}.${subName}`;
-  const subReadOnlyFields = (0, import_react15.useMemo)(
+  const subReadOnlyFields = (0, import_react14.useMemo)(
     () => Object.keys(readOnlyFields).reduce((acc, readOnlyKey) => {
       const isLocal = readOnlyKey.indexOf(subPath) > -1 || readOnlyKey.indexOf(wildcardSubPath) > -1;
       if (isLocal) {
@@ -2885,6 +2896,7 @@ var ArrayField = ({
   value: _value,
   name,
   label,
+  labelIcon,
   readOnly,
   id,
   Label: Label2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", __spreadValues({}, props))
@@ -2902,12 +2914,14 @@ var ArrayField = ({
     }),
     openId: ""
   };
-  const [localState, setLocalState] = (0, import_react16.useState)({ arrayState, value });
-  (0, import_react16.useEffect)(() => {
-    setLocalState({ arrayState, value });
-  }, [value, thisArrayState]);
+  const [localState, setLocalState] = (0, import_react15.useState)({ arrayState, value });
+  (0, import_react15.useEffect)(() => {
+    var _a;
+    const _arrayState = (_a = appStore.getState().state.ui.arrayState[id]) != null ? _a : arrayState;
+    setLocalState({ arrayState: _arrayState, value });
+  }, [value]);
   const appStore = useAppStoreApi();
-  const mapArrayStateToUi = (0, import_react16.useCallback)(
+  const mapArrayStateToUi = (0, import_react15.useCallback)(
     (partialArrayState) => {
       const state = appStore.getState().state;
       return {
@@ -2918,13 +2932,13 @@ var ArrayField = ({
     },
     [arrayState, appStore]
   );
-  const getHighestIndex = (0, import_react16.useCallback)(() => {
+  const getHighestIndex = (0, import_react15.useCallback)(() => {
     return arrayState.items.reduce(
       (acc, item) => item._originalIndex > acc ? item._originalIndex : acc,
       -1
     );
   }, [arrayState]);
-  const regenerateArrayState = (0, import_react16.useCallback)(
+  const regenerateArrayState = (0, import_react15.useCallback)(
     (value2) => {
       let highestIndex = getHighestIndex();
       const newItems = Array.from(value2 || []).map((item, idx) => {
@@ -2943,12 +2957,13 @@ var ArrayField = ({
     },
     [arrayState]
   );
-  (0, import_react16.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (arrayState.items.length > 0) {
       setUi(mapArrayStateToUi(arrayState));
     }
   }, []);
-  const [isDragging, setIsDragging] = (0, import_react16.useState)(false);
+  const [draggedItem, setDraggedItem] = (0, import_react15.useState)("");
+  const isDragging = !!draggedItem;
   const canEdit = useAppStore(
     (s) => s.permissions.getPermissions({ item: s.selectedItem }).edit
   );
@@ -2961,16 +2976,22 @@ var ArrayField = ({
     Label2,
     {
       label: label || name,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(List, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(List, { size: 16 }),
       el: "div",
       readOnly,
       children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         SortableProvider,
         {
-          onDragStart: () => setIsDragging(true),
-          onDragEnd: () => setIsDragging(false),
+          onDragStart: (id2) => setDraggedItem(id2),
+          onDragEnd: () => {
+            setDraggedItem("");
+            onChange(localState.value);
+          },
           onMove: (move) => {
-            const newValue = reorder(value, move.source, move.target);
+            if (arrayState.items[move.source]._arrayId !== draggedItem) {
+              return;
+            }
+            const newValue = reorder(localState.value, move.source, move.target);
             const newArrayStateItems = reorder(
               arrayState.items,
               move.source,
@@ -2983,7 +3004,6 @@ var ArrayField = ({
               })
             };
             setUi(newUi, false);
-            onChange(newValue, newUi);
             setLocalState({
               value: newValue,
               arrayState: __spreadProps(__spreadValues({}, arrayState), { items: newArrayStateItems })
@@ -2996,11 +3016,8 @@ var ArrayField = ({
                 hasItems: Array.isArray(value) && value.length > 0,
                 addDisabled
               }),
-              onClick: (e) => {
-                e.preventDefault();
-              },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName5("inner"), "data-dnd-container": true, children: localState.arrayState.items.map((item, i) => {
+                localState.arrayState.items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName5("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__ */ (0, import_jsx_runtime7.jsx)(
@@ -3009,7 +3026,7 @@ var ArrayField = ({
                       id: _arrayId,
                       index: i,
                       disabled: readOnly,
-                      children: ({ status, ref }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                      children: ({ status, ref, handleRef }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                         "div",
                         {
                           ref,
@@ -3022,6 +3039,7 @@ var ArrayField = ({
                             /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                               "div",
                               {
+                                ref: handleRef,
                                 onClick: (e) => {
                                   if (isDragging) return;
                                   e.preventDefault();
@@ -3058,12 +3076,11 @@ var ArrayField = ({
                                               0,
                                               existingValue[i]
                                             );
-                                            onChange(
-                                              existingValue,
-                                              mapArrayStateToUi(
-                                                regenerateArrayState(existingValue)
-                                              )
+                                            const newUi = mapArrayStateToUi(
+                                              regenerateArrayState(existingValue)
                                             );
+                                            setUi(newUi, false);
+                                            onChange(existingValue);
                                           },
                                           title: "Duplicate",
                                           children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Copy, { size: 16 })
@@ -3082,12 +3099,13 @@ var ArrayField = ({
                                             ];
                                             existingValue.splice(i, 1);
                                             existingItems.splice(i, 1);
-                                            onChange(
-                                              existingValue,
+                                            setUi(
                                               mapArrayStateToUi({
                                                 items: existingItems
-                                              })
+                                              }),
+                                              false
                                             );
+                                            onChange(existingValue);
                                           },
                                           title: "Delete",
                                           children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Trash, { size: 16 })
@@ -3099,58 +3117,49 @@ var ArrayField = ({
                                 ]
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                              "fieldset",
-                              {
-                                className: getClassNameItem("fieldset"),
-                                onPointerDownCapture: (e) => {
-                                  e.stopPropagation();
-                                },
-                                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__ */ (0, import_jsx_runtime7.jsx)(
-                                    NestedFieldProvider,
+                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsx)(
+                                NestedFieldProvider,
+                                {
+                                  name: localIndexName,
+                                  wildcardName: localWildcardName,
+                                  subName,
+                                  readOnlyFields,
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                                    AutoFieldPrivate,
                                     {
-                                      name: localIndexName,
-                                      wildcardName: localWildcardName,
-                                      subName,
-                                      readOnlyFields,
-                                      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                                        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
-                                  );
-                                })
-                              }
-                            ) })
+                                      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
+                              );
+                            }) }) })
                           ]
                         }
                       )
@@ -3171,7 +3180,8 @@ var ArrayField = ({
                         field.defaultItemProps || {}
                       ];
                       const newArrayState = regenerateArrayState(newValue);
-                      onChange(newValue, mapArrayStateToUi(newArrayState));
+                      setUi(mapArrayStateToUi(newArrayState), false);
+                      onChange(newValue);
                     },
                     children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Plus, { size: 21 })
                   }
@@ -3196,6 +3206,7 @@ var DefaultField = ({
   value: _value,
   name,
   label,
+  labelIcon,
   Label: Label2,
   id
 }) => {
@@ -3204,7 +3215,7 @@ var DefaultField = ({
     Label2,
     {
       label: label || name,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
         field.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Type, { size: 16 }),
         field.type === "number" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Hash, { size: 16 })
       ] }),
@@ -3247,11 +3258,11 @@ var DefaultField = ({
 // components/AutoField/fields/ExternalField/index.tsx
 init_react_import();
-var import_react20 = require("react");
+var import_react19 = require("react");
 // components/ExternalInput/index.tsx
 init_react_import();
-var import_react19 = require("react");
+var import_react18 = require("react");
 // css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css#css-module
 init_react_import();
@@ -3259,7 +3270,7 @@ var styles_module_default6 = { "ExternalInput-actions": "_ExternalInput-actions_
 // components/Modal/index.tsx
 init_react_import();
-var import_react17 = require("react");
+var import_react16 = require("react");
 // css-module:/home/runner/work/puck/puck/packages/core/components/Modal/styles.module.css#css-module
 init_react_import();
@@ -3274,8 +3285,8 @@ var Modal = ({
   onClose,
   isOpen
 }) => {
-  const [rootEl, setRootEl] = (0, import_react17.useState)(null);
-  (0, import_react17.useEffect)(() => {
+  const [rootEl, setRootEl] = (0, import_react16.useState)(null);
+  (0, import_react16.useEffect)(() => {
     setRootEl(document.getElementById("puck-portal-root"));
   }, []);
   if (!rootEl) {
@@ -3322,7 +3333,7 @@ init_react_import();
 // components/Button/Button.tsx
 init_react_import();
-var import_react18 = require("react");
+var import_react17 = require("react");
 // css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css#css-module
 init_react_import();
@@ -3372,8 +3383,8 @@ var Button = (_a) => {
     "size",
     "loading"
   ]);
-  const [loading, setLoading] = (0, import_react18.useState)(loadingProp);
-  (0, import_react18.useEffect)(() => setLoading(loadingProp), [loadingProp]);
+  const [loading, setLoading] = (0, import_react17.useState)(loadingProp);
+  (0, import_react17.useEffect)(() => setLoading(loadingProp), [loadingProp]);
   const ElementType = href ? "a" : type ? "button" : "span";
   const dataAttrs = filterDataAttrs(props);
   const el = /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
@@ -3428,28 +3439,28 @@ var ExternalInput = ({
     mapRow = (val) => val,
     filterFields
   } = field || {};
-  const [data, setData] = (0, import_react19.useState)([]);
-  const [isOpen, setOpen] = (0, import_react19.useState)(false);
-  const [isLoading, setIsLoading] = (0, import_react19.useState)(true);
+  const [data, setData] = (0, import_react18.useState)([]);
+  const [isOpen, setOpen] = (0, import_react18.useState)(false);
+  const [isLoading, setIsLoading] = (0, import_react18.useState)(true);
   const hasFilterFields = !!filterFields;
-  const [filters, setFilters] = (0, import_react19.useState)(field.initialFilters || {});
-  const [filtersToggled, setFiltersToggled] = (0, import_react19.useState)(hasFilterFields);
-  const mappedData = (0, import_react19.useMemo)(() => {
+  const [filters, setFilters] = (0, import_react18.useState)(field.initialFilters || {});
+  const [filtersToggled, setFiltersToggled] = (0, import_react18.useState)(hasFilterFields);
+  const mappedData = (0, import_react18.useMemo)(() => {
     return data.map(mapRow);
   }, [data]);
-  const keys = (0, import_react19.useMemo)(() => {
+  const keys = (0, import_react18.useMemo)(() => {
     const validKeys = /* @__PURE__ */ new Set();
     for (const item of mappedData) {
       for (const key of Object.keys(item)) {
-        if (typeof item[key] === "string" || typeof item[key] === "number" || (0, import_react19.isValidElement)(item[key])) {
+        if (typeof item[key] === "string" || typeof item[key] === "number" || (0, import_react18.isValidElement)(item[key])) {
           validKeys.add(key);
         }
       }
     }
     return Array.from(validKeys);
   }, [mappedData]);
-  const [searchQuery, setSearchQuery] = (0, import_react19.useState)(field.initialQuery || "");
-  const search = (0, import_react19.useCallback)(
+  const [searchQuery, setSearchQuery] = (0, import_react18.useState)(field.initialQuery || "");
+  const search = (0, import_react18.useCallback)(
     (query, filters2) => __async(void 0, null, function* () {
       setIsLoading(true);
       const cacheKey = `${id}-${query}-${JSON.stringify(filters2)}`;
@@ -3462,7 +3473,7 @@ var ExternalInput = ({
     }),
     [id, field]
   );
-  const Footer = (0, import_react19.useCallback)(
+  const Footer = (0, import_react18.useCallback)(
     (props) => field.renderFooter ? field.renderFooter(props) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: getClassNameModal("footer"), children: [
       props.items.length,
       " result",
@@ -3470,7 +3481,7 @@ var ExternalInput = ({
     ] }),
     [field.renderFooter]
   );
-  (0, import_react19.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     search(searchQuery, filters);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
@@ -3634,6 +3645,7 @@ var ExternalField = ({
   value,
   name,
   label,
+  labelIcon,
   Label: Label2,
   id,
   readOnly
@@ -3641,7 +3653,7 @@ var ExternalField = ({
   var _a, _b, _c;
   const validField = field;
   const deprecatedField = field;
-  (0, import_react20.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (deprecatedField.adaptor) {
       console.error(
         "Warning: The `adaptor` API is deprecated. Please use updated APIs on the `external` field instead. This will be a breaking change in a future release."
@@ -3651,32 +3663,40 @@ var ExternalField = ({
   if (field.type !== "external") {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Label2, { label: label || name, icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Link, { size: 16 }), el: "div", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    ExternalInput,
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    Label2,
     {
-      name,
-      field: __spreadProps(__spreadValues({}, validField), {
-        // DEPRECATED
-        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* () {
-          return yield deprecatedField.adaptor.fetchList(
-            deprecatedField.adaptorParams
-          );
-        }) : validField.fetchList
-      }),
-      onChange,
-      value,
-      id,
-      readOnly
+      label: label || name,
+      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Link, { size: 16 }),
+      el: "div",
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        ExternalInput,
+        {
+          name,
+          field: __spreadProps(__spreadValues({}, validField), {
+            // DEPRECATED
+            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* () {
+              return yield deprecatedField.adaptor.fetchList(
+                deprecatedField.adaptorParams
+              );
+            }) : validField.fetchList
+          }),
+          onChange,
+          value,
+          id,
+          readOnly
+        }
+      )
     }
-  ) });
+  );
 };
 // components/AutoField/fields/RadioField/index.tsx
 init_react_import();
-var import_react21 = require("react");
+var import_react20 = require("react");
 // lib/safe-json-parse.ts
 init_react_import();
@@ -3700,9 +3720,10 @@ var RadioField = ({
   name,
   id,
   label,
+  labelIcon,
   Label: Label2
 }) => {
-  const flatOptions = (0, import_react21.useMemo)(
+  const flatOptions = (0, import_react20.useMemo)(
     () => field.type === "radio" ? field.options.map(({ value: value2 }) => value2) : [],
     [field]
   );
@@ -3712,7 +3733,7 @@ var RadioField = ({
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     Label2,
     {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CircleCheckBig, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CircleCheckBig, { size: 16 }),
       label: label || name,
       readOnly,
       el: "div",
@@ -3752,20 +3773,21 @@ var RadioField = ({
 // components/AutoField/fields/SelectField/index.tsx
 init_react_import();
-var import_react22 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var getClassName12 = get_class_name_factory_default("Input", styles_module_default2);
 var SelectField = ({
   field,
   onChange,
   label,
+  labelIcon,
   Label: Label2,
   value,
   name,
   readOnly,
   id
 }) => {
-  const flatOptions = (0, import_react22.useMemo)(
+  const flatOptions = (0, import_react21.useMemo)(
     () => field.type === "select" ? field.options.map(({ value: value2 }) => value2) : [],
     [field]
   );
@@ -3776,7 +3798,7 @@ var SelectField = ({
     Label2,
     {
       label: label || name,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronDown, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronDown, { size: 16 }),
       readOnly,
       children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "select",
@@ -3820,24 +3842,33 @@ var TextareaField = ({
   value,
   name,
   label,
+  labelIcon,
   Label: Label2,
   id
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label2, { label: label || name, icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Type, { size: 16 }), readOnly, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    "textarea",
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    Label2,
     {
-      id,
-      className: getClassName13("input"),
-      autoComplete: "off",
-      name,
-      value: typeof value === "undefined" ? "" : value,
-      onChange: (e) => onChange(e.currentTarget.value),
+      label: label || name,
+      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Type, { size: 16 }),
       readOnly,
-      tabIndex: readOnly ? -1 : void 0,
-      rows: 5,
-      placeholder: field.type === "textarea" ? field.placeholder : void 0
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "textarea",
+        {
+          id,
+          className: getClassName13("input"),
+          autoComplete: "off",
+          name,
+          value: typeof value === "undefined" ? "" : value,
+          onChange: (e) => onChange(e.currentTarget.value),
+          readOnly,
+          tabIndex: readOnly ? -1 : void 0,
+          rows: 5,
+          placeholder: field.type === "textarea" ? field.placeholder : void 0
+        }
+      )
     }
-  ) });
+  );
 };
 // components/AutoField/fields/ObjectField/index.tsx
@@ -3856,6 +3887,7 @@ var ObjectField = ({
   value,
   name,
   label,
+  labelIcon,
   Label: Label2,
   readOnly,
   id
@@ -3869,7 +3901,7 @@ var ObjectField = ({
     Label2,
     {
       label: label || name,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(EllipsisVertical, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(EllipsisVertical, { size: 16 }),
       el: "div",
       readOnly,
       children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: getClassName14(), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("fieldset", { className: getClassName14("fieldset"), children: Object.keys(field.objectFields).map((subName) => {
@@ -3916,12 +3948,12 @@ var ObjectField = ({
 // lib/use-safe-id.ts
 init_react_import();
-var import_react23 = __toESM(require("react"));
+var import_react22 = __toESM(require("react"));
 var useSafeId = () => {
-  if (typeof import_react23.default.useId !== "undefined") {
-    return import_react23.default.useId();
+  if (typeof import_react22.default.useId !== "undefined") {
+    return import_react22.default.useId();
   }
-  const [id] = (0, import_react23.useState)(generateId());
+  const [id] = (0, import_react22.useState)(generateId());
   return id;
 };
@@ -3955,7 +3987,7 @@ var FieldLabelInternal = ({
   readOnly
 }) => {
   const overrides = useAppStore((s) => s.overrides);
-  const Wrapper = (0, import_react24.useMemo)(
+  const Wrapper = (0, import_react23.useMemo)(
     () => overrides.fieldLabel || FieldLabel,
     [overrides]
   );
@@ -3982,10 +4014,11 @@ function AutoFieldInternal(props) {
     var _a2;
     return (_a2 = s.selectedItem) == null ? void 0 : _a2.readOnly;
   });
-  const nestedFieldContext = (0, import_react24.useContext)(NestedFieldContext);
+  const nestedFieldContext = (0, import_react23.useContext)(NestedFieldContext);
   const { id, Label: Label2 = FieldLabelInternal } = props;
   const field = props.field;
   const label = field.label;
+  const labelIcon = field.labelIcon;
   const defaultId = useSafeId();
   const resolvedId = id || defaultId;
   const defaultFields = {
@@ -4011,10 +4044,11 @@ function AutoFieldInternal(props) {
   const mergedProps = __spreadProps(__spreadValues({}, props), {
     field,
     label,
+    labelIcon,
     Label: Label2,
     id: resolvedId
   });
-  const onFocus = (0, import_react24.useCallback)(
+  const onFocus = (0, import_react23.useCallback)(
     (e) => {
       if (mergedProps.name && (e.target.nodeName === "INPUT" || e.target.nodeName === "TEXTAREA")) {
         e.stopPropagation();
@@ -4028,7 +4062,7 @@ function AutoFieldInternal(props) {
     },
     [mergedProps.name]
   );
-  const onBlur = (0, import_react24.useCallback)((e) => {
+  const onBlur = (0, import_react23.useCallback)((e) => {
     if ("name" in e.target) {
       dispatch({
         type: "setUi",
@@ -4072,12 +4106,15 @@ function AutoFieldInternal(props) {
 function AutoFieldPrivate(props) {
   const isFocused = useAppStore((s) => s.state.ui.field.focus === props.name);
   const { value, onChange } = props;
-  const [localValue, setLocalValue] = (0, import_react24.useState)(value);
-  const onChangeLocal = (0, import_react24.useCallback)((val, ui) => {
-    setLocalValue(val);
-    onChange(val, ui);
-  }, []);
-  (0, import_react24.useEffect)(() => {
+  const [localValue, setLocalValue] = (0, import_react23.useState)(value);
+  const onChangeLocal = (0, import_react23.useCallback)(
+    (val, ui) => {
+      setLocalValue(val);
+      onChange(val, ui);
+    },
+    [onChange]
+  );
+  (0, import_react23.useEffect)(() => {
     if (!isFocused) {
       setLocalValue(value);
     }
@@ -4089,7 +4126,7 @@ function AutoFieldPrivate(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AutoFieldInternal, __spreadValues(__spreadValues({}, props), localProps));
 }
 function AutoField(props) {
-  const DefaultLabel = (0, import_react24.useMemo)(() => {
+  const DefaultLabel = (0, import_react23.useMemo)(() => {
     const DefaultLabel2 = (labelProps) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "div",
       __spreadProps(__spreadValues({}, labelProps), {
@@ -4109,21 +4146,21 @@ init_react_import();
 var styles_module_default10 = { "Drawer": "_Drawer_fkqfo_1", "Drawer-draggable": "_Drawer-draggable_fkqfo_8", "Drawer-draggableBg": "_Drawer-draggableBg_fkqfo_12", "Drawer-draggableFg": "_Drawer-draggableFg_fkqfo_21", "DrawerItem-draggable": "_DrawerItem-draggable_fkqfo_25", "DrawerItem--disabled": "_DrawerItem--disabled_fkqfo_38", "DrawerItem": "_DrawerItem_fkqfo_25", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_fkqfo_48", "DrawerItem-name": "_DrawerItem-name_fkqfo_66" };
 // components/Drawer/index.tsx
-var import_react37 = require("react");
+var import_react36 = require("react");
 // components/DragDropContext/index.tsx
 init_react_import();
-var import_react35 = require("@dnd-kit/react");
-var import_react36 = require("react");
+var import_react34 = require("@dnd-kit/react");
+var import_react35 = require("react");
 var import_dom = require("@dnd-kit/dom");
 // components/DropZone/index.tsx
 init_react_import();
-var import_react34 = require("react");
+var import_react33 = require("react");
 // components/DraggableComponent/index.tsx
 init_react_import();
-var import_react27 = require("react");
+var import_react26 = require("react");
 // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
 init_react_import();
@@ -4153,11 +4190,11 @@ function getDeepScrollPosition(element) {
 // components/DropZone/context.tsx
 init_react_import();
-var import_react25 = require("react");
+var import_react24 = require("react");
 var import_zustand3 = require("zustand");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var dropZoneContext = (0, import_react25.createContext)(null);
-var ZoneStoreContext = (0, import_react25.createContext)(
+var dropZoneContext = (0, import_react24.createContext)(null);
+var ZoneStoreContext = (0, import_react24.createContext)(
   (0, import_zustand3.createStore)(() => ({
     zoneDepthIndex: {},
     nextZoneDepthIndex: {},
@@ -4177,10 +4214,10 @@ var DropZoneProvider = ({
   children,
   value
 }) => {
-  const [hoveringComponent, setHoveringComponent] = (0, import_react25.useState)();
-  const [activeZones, setActiveZones] = (0, import_react25.useState)({});
+  const [hoveringComponent, setHoveringComponent] = (0, import_react24.useState)();
+  const [activeZones, setActiveZones] = (0, import_react24.useState)({});
   const dispatch = useAppStore((s) => s.dispatch);
-  const registerZone = (0, import_react25.useCallback)(
+  const registerZone = (0, import_react24.useCallback)(
     (zoneCompound) => {
       if (!dispatch) {
         return;
@@ -4193,7 +4230,7 @@ var DropZoneProvider = ({
     },
     [setActiveZones, dispatch]
   );
-  const unregisterZone = (0, import_react25.useCallback)(
+  const unregisterZone = (0, import_react24.useCallback)(
     (zoneCompound) => {
       if (!dispatch) {
         return;
@@ -4208,7 +4245,7 @@ var DropZoneProvider = ({
     },
     [setActiveZones, dispatch]
   );
-  const memoValue = (0, import_react25.useMemo)(
+  const memoValue = (0, import_react24.useMemo)(
     () => __spreadValues({
       hoveringComponent,
       setHoveringComponent,
@@ -4223,11 +4260,11 @@ var DropZoneProvider = ({
 // lib/use-context-store.ts
 init_react_import();
-var import_react26 = require("react");
+var import_react25 = require("react");
 var import_zustand4 = require("zustand");
 var import_shallow = require("zustand/react/shallow");
 function useContextStore(context, selector) {
-  const store = (0, import_react26.useContext)(context);
+  const store = (0, import_react25.useContext)(context);
   if (!store) {
     throw new Error("useContextStore must be used inside context");
   }
@@ -4285,9 +4322,9 @@ var DraggableComponent = ({
   );
   const dispatch = useAppStore((s) => s.dispatch);
   const iframe = useAppStore((s) => s.iframe);
-  const ctx = (0, import_react27.useContext)(dropZoneContext);
-  const [localZones, setLocalZones] = (0, import_react27.useState)({});
-  const registerLocalZone = (0, import_react27.useCallback)(
+  const ctx = (0, import_react26.useContext)(dropZoneContext);
+  const [localZones, setLocalZones] = (0, import_react26.useState)({});
+  const registerLocalZone = (0, import_react26.useCallback)(
     (zoneCompound2, active) => {
       var _a;
       (_a = ctx == null ? void 0 : ctx.registerLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2, active);
@@ -4297,7 +4334,7 @@ var DraggableComponent = ({
     },
     [setLocalZones]
   );
-  const unregisterLocalZone = (0, import_react27.useCallback)(
+  const unregisterLocalZone = (0, import_react26.useCallback)(
     (zoneCompound2) => {
       var _a;
       (_a = ctx == null ? void 0 : ctx.unregisterLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2);
@@ -4327,7 +4364,7 @@ var DraggableComponent = ({
   );
   const canCollide = permissions.drag || userIsDragging;
   const disabled = !isEnabled || !canCollide;
-  const [dragAxis, setDragAxis] = (0, import_react27.useState)(userDragAxis || autoDragAxis);
+  const [dragAxis, setDragAxis] = (0, import_react26.useState)(userDragAxis || autoDragAxis);
   const { ref: sortableRef, status } = useSortableSafe({
     id,
     index,
@@ -4353,8 +4390,8 @@ var DraggableComponent = ({
     }
   });
   const thisIsDragging = status === "dragging";
-  const ref = (0, import_react27.useRef)(null);
-  const refSetter = (0, import_react27.useCallback)(
+  const ref = (0, import_react26.useRef)(null);
+  const refSetter = (0, import_react26.useCallback)(
     (el) => {
       sortableRef(el);
       if (el) {
@@ -4363,14 +4400,14 @@ var DraggableComponent = ({
     },
     [sortableRef]
   );
-  const [portalEl, setPortalEl] = (0, import_react27.useState)();
-  (0, import_react27.useEffect)(() => {
+  const [portalEl, setPortalEl] = (0, import_react26.useState)();
+  (0, import_react26.useEffect)(() => {
     var _a, _b, _c;
     setPortalEl(
       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 = (0, import_react27.useCallback)(() => {
+  const getStyle = (0, import_react26.useCallback)(() => {
     var _a, _b, _c;
     if (!ref.current) return;
     const rect = ref.current.getBoundingClientRect();
@@ -4390,11 +4427,11 @@ var DraggableComponent = ({
     };
     return style2;
   }, [ref.current]);
-  const [style, setStyle] = (0, import_react27.useState)();
-  const sync = (0, import_react27.useCallback)(() => {
+  const [style, setStyle] = (0, import_react26.useState)();
+  const sync = (0, import_react26.useCallback)(() => {
     setStyle(getStyle());
   }, [ref.current, iframe]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (ref.current && !userIsDragging) {
       const observer = new ResizeObserver(sync);
       observer.observe(ref.current);
@@ -4404,18 +4441,18 @@ var DraggableComponent = ({
     }
   }, [ref.current, userIsDragging]);
   const registerNode = useAppStore((s) => s.nodes.registerNode);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     var _a;
     registerNode(id, { methods: { sync }, element: (_a = ref.current) != null ? _a : null });
     return () => {
       registerNode(id, { methods: { sync: () => null }, element: null });
     };
   }, [id, zoneCompound, index, componentType, sync]);
-  const CustomActionBar = (0, import_react27.useMemo)(
+  const CustomActionBar = (0, import_react26.useMemo)(
     () => overrides.actionBar || DefaultActionBar,
     [overrides.actionBar]
   );
-  const onClick = (0, import_react27.useCallback)(
+  const onClick = (0, import_react26.useCallback)(
     (e) => {
       e.stopPropagation();
       dispatch({
@@ -4428,7 +4465,7 @@ var DraggableComponent = ({
     [index, zoneCompound, id]
   );
   const appStore = useAppStoreApi();
-  const onSelectParent = (0, import_react27.useCallback)(() => {
+  const onSelectParent = (0, import_react26.useCallback)(() => {
     const { nodes } = appStore.getState().nodes;
     const node = nodes[id];
     const parentNode = (node == null ? void 0 : node.parentId) ? nodes[node == null ? void 0 : node.parentId] : null;
@@ -4445,23 +4482,23 @@ var DraggableComponent = ({
       }
     });
   }, [ctx, path]);
-  const onDuplicate = (0, import_react27.useCallback)(() => {
+  const onDuplicate = (0, import_react26.useCallback)(() => {
     dispatch({
       type: "duplicate",
       sourceIndex: index,
       sourceZone: zoneCompound
     });
   }, [index, zoneCompound]);
-  const onDelete = (0, import_react27.useCallback)(() => {
+  const onDelete = (0, import_react26.useCallback)(() => {
     dispatch({
       type: "remove",
       index,
       zone: zoneCompound
     });
   }, [index, zoneCompound]);
-  const [hover, setHover] = (0, import_react27.useState)(false);
+  const [hover, setHover] = (0, import_react26.useState)(false);
   const indicativeHover = (ctx == null ? void 0 : ctx.hoveringComponent) === id;
-  (0, import_react27.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!ref.current) {
       return;
     }
@@ -4511,7 +4548,7 @@ var DraggableComponent = ({
     thisIsDragging,
     inDroppableZone
   ]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (ref.current && disabled) {
       ref.current.setAttribute("data-puck-disabled", "");
       return () => {
@@ -4520,8 +4557,8 @@ var DraggableComponent = ({
       };
     }
   }, [disabled, ref]);
-  const [isVisible, setIsVisible] = (0, import_react27.useState)(false);
-  (0, import_react27.useEffect)(() => {
+  const [isVisible, setIsVisible] = (0, import_react26.useState)(false);
+  (0, import_react26.useEffect)(() => {
     sync();
     if ((isSelected || hover || indicativeHover) && !userIsDragging) {
       setIsVisible(true);
@@ -4529,7 +4566,7 @@ var DraggableComponent = ({
       setIsVisible(false);
     }
   }, [isSelected, hover, indicativeHover, iframe, userIsDragging]);
-  const syncActionsPosition = (0, import_react27.useCallback)(
+  const syncActionsPosition = (0, import_react26.useCallback)(
     (el) => {
       if (el) {
         const view = el.ownerDocument.defaultView;
@@ -4537,16 +4574,24 @@ var DraggableComponent = ({
           const rect = el.getBoundingClientRect();
           const diffLeft = rect.x;
           const exceedsBoundsLeft = diffLeft < 0;
+          const diffTop = rect.y;
+          const exceedsBoundsTop = diffTop < 0;
           if (exceedsBoundsLeft) {
             el.style.transformOrigin = "left top";
             el.style.left = "0px";
           }
+          if (exceedsBoundsTop) {
+            el.style.top = "12px";
+            if (!exceedsBoundsLeft) {
+              el.style.transformOrigin = "right top";
+            }
+          }
         }
       }
     },
     [zoom]
   );
-  (0, import_react27.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (userDragAxis) {
       setDragAxis(userDragAxis);
       return;
@@ -4639,15 +4684,15 @@ var styles_module_default12 = { "DropZone": "_DropZone_kmkdc_1", "DropZone--isAc
 // components/DropZone/lib/use-min-empty-height.ts
 init_react_import();
-var import_react28 = require("react");
+var import_react27 = require("react");
 var useMinEmptyHeight = ({
   zoneCompound,
   userMinEmptyHeight,
   ref
 }) => {
   const appStore = useAppStoreApi();
-  const [prevHeight, setPrevHeight] = (0, import_react28.useState)(0);
-  const [isAnimating, setIsAnimating] = (0, import_react28.useState)(false);
+  const [prevHeight, setPrevHeight] = (0, import_react27.useState)(0);
+  const [isAnimating, setIsAnimating] = (0, import_react27.useState)(false);
   const { draggedItem, isZone } = useContextStore(ZoneStoreContext, (s) => {
     var _a, _b;
     return {
@@ -4655,7 +4700,7 @@ var useMinEmptyHeight = ({
       isZone: ((_b = s.draggedItem) == null ? void 0 : _b.data.zone) === zoneCompound
     };
   });
-  (0, import_react28.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (draggedItem && ref.current) {
       if (isZone) {
         const rect = ref.current.getBoundingClientRect();
@@ -4693,15 +4738,15 @@ function assignRefs(refs, node) {
 // components/DropZone/lib/use-content-with-preview.ts
 init_react_import();
-var import_react31 = require("react");
+var import_react30 = require("react");
 // lib/dnd/use-rendered-callback.ts
 init_react_import();
-var import_react29 = require("@dnd-kit/react");
-var import_react30 = require("react");
+var import_react28 = require("@dnd-kit/react");
+var import_react29 = require("react");
 function useRenderedCallback(callback, deps) {
-  const manager = (0, import_react29.useDragDropManager)();
-  return (0, import_react30.useCallback)(
+  const manager = (0, import_react28.useDragDropManager)();
+  return (0, import_react29.useCallback)(
     (...args) => __async(this, null, function* () {
       yield manager == null ? void 0 : manager.renderer.rendering;
       return callback(...args);
@@ -4724,8 +4769,8 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
     }
   );
   const isDragging = useAppStore((s) => s.state.ui.isDragging);
-  const [contentIdsWithPreview, setContentIdsWithPreview] = (0, import_react31.useState)(contentIds);
-  const [localPreview, setLocalPreview] = (0, import_react31.useState)(
+  const [contentIdsWithPreview, setContentIdsWithPreview] = (0, import_react30.useState)(contentIds);
+  const [localPreview, setLocalPreview] = (0, import_react30.useState)(
     preview
   );
   const updateContent = useRenderedCallback(
@@ -4760,7 +4805,7 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
     },
     [draggedItemId, previewExists]
   );
-  (0, import_react31.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     updateContent(contentIds, preview, isDragging);
   }, [contentIds, preview, isDragging]);
   return [contentIdsWithPreview, localPreview];
@@ -4768,16 +4813,16 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
 // components/DropZone/lib/use-drag-axis.ts
 init_react_import();
-var import_react32 = require("react");
+var import_react31 = require("react");
 var GRID_DRAG_AXIS = "dynamic";
 var FLEX_ROW_DRAG_AXIS = "x";
 var DEFAULT_DRAG_AXIS = "y";
 var useDragAxis = (ref, collisionAxis) => {
   const status = useAppStore((s) => s.status);
-  const [dragAxis, setDragAxis] = (0, import_react32.useState)(
+  const [dragAxis, setDragAxis] = (0, import_react31.useState)(
     collisionAxis || DEFAULT_DRAG_AXIS
   );
-  const calculateDragAxis = (0, import_react32.useCallback)(() => {
+  const calculateDragAxis = (0, import_react31.useCallback)(() => {
     if (ref.current) {
       const computedStyle = window.getComputedStyle(ref.current);
       if (computedStyle.display === "grid") {
@@ -4789,7 +4834,7 @@ var useDragAxis = (ref, collisionAxis) => {
       }
     }
   }, [ref.current]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     const onViewportChange = () => {
       calculateDragAxis();
     };
@@ -4798,7 +4843,7 @@ var useDragAxis = (ref, collisionAxis) => {
       window.removeEventListener("viewportchange", onViewportChange);
     };
   }, []);
-  (0, import_react32.useEffect)(calculateDragAxis, [status, collisionAxis]);
+  (0, import_react31.useEffect)(calculateDragAxis, [status, collisionAxis]);
   return [dragAxis, calculateDragAxis];
 };
@@ -4807,9 +4852,9 @@ var import_shallow3 = require("zustand/react/shallow");
 // components/Render/index.tsx
 init_react_import();
-var import_react33 = __toESM(require("react"));
+var import_react32 = __toESM(require("react"));
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var renderContext = import_react33.default.createContext({
+var renderContext = import_react32.default.createContext({
   config: { components: {} },
   data: { root: {}, content: [] },
   metadata: {}
@@ -4888,7 +4933,7 @@ var DropZoneChild = ({
     dragRef: null,
     metadata
   };
-  const ctx = (0, import_react34.useContext)(dropZoneContext);
+  const ctx = (0, import_react33.useContext)(dropZoneContext);
   const { depth } = ctx;
   const contentItem = useAppStore(
     (0, import_shallow3.useShallow)((s) => {
@@ -4917,7 +4962,7 @@ var DropZoneChild = ({
     }
   );
   let label = (_b = (_a = componentConfig == null ? void 0 : componentConfig.label) != null ? _a : item == null ? void 0 : item.type.toString()) != null ? _b : "Component";
-  const renderPreview = (0, import_react34.useMemo)(
+  const renderPreview = (0, import_react33.useMemo)(
     () => function Preview4() {
       return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DrawerItemInner, { name: label, children: overrides.componentItem });
     },
@@ -4964,7 +5009,7 @@ var DropZoneChild = ({
     }
   );
 };
-var DropZoneEdit = (0, import_react34.forwardRef)(
+var DropZoneEdit = (0, import_react33.forwardRef)(
   function DropZoneEditInternal({
     zone,
     allow,
@@ -4974,7 +5019,7 @@ var DropZoneEdit = (0, import_react34.forwardRef)(
     minEmptyHeight: userMinEmptyHeight = 128,
     collisionAxis
   }, userRef) {
-    const ctx = (0, import_react34.useContext)(dropZoneContext);
+    const ctx = (0, import_react33.useContext)(dropZoneContext);
     const {
       // These all need setting via context
       areaId,
@@ -5011,7 +5056,7 @@ var DropZoneEdit = (0, import_react34.forwardRef)(
         userIsDragging: !!s.draggedItem
       };
     });
-    (0, import_react34.useEffect)(() => {
+    (0, import_react33.useEffect)(() => {
       if (ctx == null ? void 0 : ctx.registerZone) {
         ctx == null ? void 0 : ctx.registerZone(zoneCompound);
       }
@@ -5030,8 +5075,8 @@ var DropZoneEdit = (0, import_react34.forwardRef)(
         return content.map(({ props }) => props.id);
       })
     );
-    const ref = (0, import_react34.useRef)(null);
-    const acceptsTarget = (0, import_react34.useCallback)(
+    const ref = (0, import_react33.useRef)(null);
+    const acceptsTarget = (0, import_react33.useCallback)(
       (componentType) => {
         if (!componentType) {
           return true;
@@ -5053,7 +5098,7 @@ var DropZoneEdit = (0, import_react34.forwardRef)(
       },
       [allow, disallow]
     );
-    (0, import_react34.useEffect)(() => {
+    (0, import_react33.useEffect)(() => {
       if (registerLocalZone) {
         registerLocalZone(zoneCompound, acceptsTarget(draggedComponentType));
       }
@@ -5143,14 +5188,14 @@ var DropZoneEdit = (0, import_react34.forwardRef)(
   }
 );
 var DropZoneRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropZoneRender, __spreadValues({}, props));
-var DropZoneRender = (0, import_react34.forwardRef)(
+var DropZoneRender = (0, import_react33.forwardRef)(
   function DropZoneRenderInternal({ className, style, zone }, ref) {
-    const ctx = (0, import_react34.useContext)(dropZoneContext);
+    const ctx = (0, import_react33.useContext)(dropZoneContext);
     const { areaId = "root" } = ctx || {};
-    const { config, data, metadata } = (0, import_react34.useContext)(renderContext);
+    const { config, data, metadata } = (0, import_react33.useContext)(renderContext);
     let zoneCompound = rootDroppableId;
     let content = (data == null ? void 0 : data.content) || [];
-    (0, import_react34.useEffect)(() => {
+    (0, import_react33.useEffect)(() => {
       if (ctx == null ? void 0 : ctx.registerZone) {
         ctx == null ? void 0 : ctx.registerZone(zoneCompound);
       }
@@ -5195,9 +5240,9 @@ var DropZoneRender = (0, import_react34.forwardRef)(
   }
 );
 var DropZonePure = (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropZone, __spreadValues({}, props));
-var DropZone = (0, import_react34.forwardRef)(
+var DropZone = (0, import_react33.forwardRef)(
   function DropZone2(props, ref) {
-    const ctx = (0, import_react34.useContext)(dropZoneContext);
+    const ctx = (0, import_react33.useContext)(dropZoneContext);
     if ((ctx == null ? void 0 : ctx.mode) === "edit") {
       return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
     }
@@ -5517,12 +5562,12 @@ function getDeepDir(el) {
 // components/DragDropContext/index.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var DEBUG3 = false;
-var dragListenerContext = (0, import_react36.createContext)({
+var dragListenerContext = (0, import_react35.createContext)({
   dragListeners: {}
 });
 function useDragListener(type, fn, deps = []) {
-  const { setDragListeners } = (0, import_react36.useContext)(dragListenerContext);
-  (0, import_react36.useEffect)(() => {
+  const { setDragListeners } = (0, import_react35.useContext)(dragListenerContext);
+  (0, import_react35.useEffect)(() => {
     if (setDragListeners) {
       setDragListeners((old) => __spreadProps(__spreadValues({}, old), {
         [type]: [...old[type] || [], fn]
@@ -5532,8 +5577,8 @@ function useDragListener(type, fn, deps = []) {
 }
 var AREA_CHANGE_DEBOUNCE_MS = 100;
 var useTempDisableFallback = (timeout3) => {
-  const lastFallbackDisable = (0, import_react36.useRef)(null);
-  return (0, import_react36.useCallback)((manager) => {
+  const lastFallbackDisable = (0, import_react35.useRef)(null);
+  return (0, import_react35.useCallback)((manager) => {
     collisionStore.setState({ fallbackEnabled: false });
     const fallbackId = generateId();
     lastFallbackDisable.current = fallbackId;
@@ -5554,10 +5599,10 @@ var DragDropContextClient = ({
   const resolveData2 = useAppStore((s) => s.resolveData);
   const metadata = useAppStore((s) => s.metadata);
   const appStore = useAppStoreApi();
-  const id = (0, import_react36.useId)();
-  const debouncedParamsRef = (0, import_react36.useRef)(null);
+  const id = useSafeId();
+  const debouncedParamsRef = (0, import_react35.useRef)(null);
   const tempDisableFallback = useTempDisableFallback(100);
-  const [zoneStore] = (0, import_react36.useState)(
+  const [zoneStore] = (0, import_react35.useState)(
     () => (0, import_zustand5.createStore)(() => ({
       zoneDepthIndex: {},
       nextZoneDepthIndex: {},
@@ -5567,7 +5612,7 @@ var DragDropContextClient = ({
       previewIndex: {}
     }))
   );
-  const getChanged2 = (0, import_react36.useCallback)(
+  const getChanged2 = (0, import_react35.useCallback)(
     (params, id2) => {
       const { zoneDepthIndex = {}, areaDepthIndex = {} } = zoneStore.getState() || {};
       const stateHasZone = Object.keys(zoneDepthIndex).length > 0;
@@ -5588,7 +5633,7 @@ var DragDropContextClient = ({
     },
     [zoneStore]
   );
-  const setDeepestAndCollide = (0, import_react36.useCallback)(
+  const setDeepestAndCollide = (0, import_react35.useCallback)(
     (params, manager) => {
       const { zoneChanged, areaChanged } = getChanged2(params, id);
       if (!zoneChanged && !areaChanged) return;
@@ -5612,7 +5657,7 @@ var DragDropContextClient = ({
     setDeepestDb.cancel();
     debouncedParamsRef.current = null;
   };
-  (0, import_react36.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (DEBUG3) {
       zoneStore.subscribe(
         (s) => {
@@ -5626,7 +5671,7 @@ var DragDropContextClient = ({
       );
     }
   }, []);
-  const [plugins] = (0, import_react36.useState)(() => [
+  const [plugins] = (0, import_react35.useState)(() => [
     ...disableAutoScroll ? import_dom.defaultPreset.plugins.filter((plugin) => plugin !== import_dom.AutoScroller) : import_dom.defaultPreset.plugins,
     createNestedDroppablePlugin(
       {
@@ -5674,9 +5719,9 @@ var DragDropContextClient = ({
     )
   ]);
   const sensors = useSensors();
-  const [dragListeners, setDragListeners] = (0, import_react36.useState)({});
-  const dragMode = (0, import_react36.useRef)(null);
-  const initialSelector = (0, import_react36.useRef)(void 0);
+  const [dragListeners, setDragListeners] = (0, import_react35.useState)({});
+  const dragMode = (0, import_react35.useRef)(null);
+  const initialSelector = (0, import_react35.useRef)(void 0);
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { id, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     dragListenerContext.Provider,
     {
@@ -5685,7 +5730,7 @@ var DragDropContextClient = ({
         setDragListeners
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-        import_react35.DragDropProvider,
+        import_react34.DragDropProvider,
         {
           plugins,
           sensors,
@@ -5915,7 +5960,7 @@ var DrawerItemInner = ({
   dragRef,
   isDragDisabled
 }) => {
-  const CustomInner = (0, import_react37.useMemo)(
+  const CustomInner = (0, import_react36.useMemo)(
     () => children || (({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: getClassNameItem2("default"), children: children2 })),
     [children]
   );
@@ -5969,7 +6014,7 @@ var DrawerItem = ({
   isDragDisabled
 }) => {
   const resolvedId = id || name;
-  const [dynamicId, setDynamicId] = (0, import_react37.useState)(generateId(resolvedId));
+  const [dynamicId, setDynamicId] = (0, import_react36.useState)(generateId(resolvedId));
   if (typeof index !== "undefined") {
     console.error(
       "Warning: The `index` prop on Drawer.Item is deprecated and no longer required."
@@ -6008,7 +6053,7 @@ var Drawer = ({
       "Warning: The `direction` prop on Drawer is deprecated and no longer required to achieve multi-directional dragging."
     );
   }
-  const id = (0, import_react37.useId)();
+  const id = useSafeId();
   const { ref } = useDroppableSafe({
     id,
     type: "void",
@@ -6030,7 +6075,7 @@ Drawer.Item = DrawerItem;
 // components/Puck/index.tsx
 init_react_import();
-var import_react52 = require("react");
+var import_react51 = require("react");
 // components/SidebarSection/index.tsx
 init_react_import();
@@ -6041,7 +6086,7 @@ var styles_module_default13 = { "SidebarSection": "_SidebarSection_8boj8_1", "Si
 // lib/use-breadcrumbs.ts
 init_react_import();
-var import_react38 = require("react");
+var import_react37 = require("react");
 var useBreadcrumbs = (renderCount) => {
   const selectedId = useAppStore((s) => {
     var _a;
@@ -6053,7 +6098,7 @@ var useBreadcrumbs = (renderCount) => {
     return (_a = s.nodes.nodes[selectedId]) == null ? void 0 : _a.path;
   });
   const appStore = useAppStoreApi();
-  return (0, import_react38.useMemo)(() => {
+  return (0, import_react37.useMemo)(() => {
     const breadcrumbs = (path == null ? void 0 : path.map((zoneCompound) => {
       var _a, _b;
       const [componentId] = zoneCompound.split(":");
@@ -6178,7 +6223,7 @@ init_react_import();
 var styles_module_default16 = { "PuckFields": "_PuckFields_10bh7_1", "PuckFields--isLoading": "_PuckFields--isLoading_10bh7_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_10bh7_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_10bh7_25", "PuckFields-field": "_PuckFields-field_10bh7_32", "PuckFields--wrapFields": "_PuckFields--wrapFields_10bh7_36" };
 // components/Puck/components/Fields/index.tsx
-var import_react39 = require("react");
+var import_react38 = require("react");
 var import_shallow4 = require("zustand/react/shallow");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
@@ -6273,7 +6318,7 @@ var FieldsChild = ({ fieldName }) => {
     })
   );
   const appStore = useAppStoreApi();
-  const onChange = (0, import_react39.useCallback)(createOnChange(fieldName, appStore), [
+  const onChange = (0, import_react38.useCallback)(createOnChange(fieldName, appStore), [
     fieldName
   ]);
   if (!field || !id) return null;
@@ -6308,7 +6353,7 @@ var Fields = ({ wrapFields = true }) => {
     (0, import_shallow4.useShallow)((s) => Object.keys(s.fields.fields))
   );
   const isLoading = fieldsLoading || componentResolving;
-  const Wrapper = (0, import_react39.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
+  const Wrapper = (0, import_react38.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "form",
     {
@@ -6329,7 +6374,7 @@ init_react_import();
 // lib/use-component-list.tsx
 init_react_import();
-var import_react40 = require("react");
+var import_react39 = require("react");
 // components/ComponentList/index.tsx
 init_react_import();
@@ -6400,10 +6445,10 @@ ComponentList.Item = ComponentListItem;
 // lib/use-component-list.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var useComponentList = () => {
-  const [componentList, setComponentList] = (0, import_react40.useState)();
+  const [componentList, setComponentList] = (0, import_react39.useState)();
   const config = useAppStore((s) => s.config);
   const uiComponentList = useAppStore((s) => s.state.ui.componentList);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     var _a, _b, _c;
     if (Object.keys(uiComponentList).length > 0) {
       const matchedComponents = [];
@@ -6472,22 +6517,22 @@ var useComponentList = () => {
 };
 // components/Puck/components/Components/index.tsx
-var import_react41 = require("react");
+var import_react40 = require("react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var Components = () => {
   const overrides = useAppStore((s) => s.overrides);
   const componentList = useComponentList();
-  const Wrapper = (0, import_react41.useMemo)(() => overrides.components || "div", [overrides]);
+  const Wrapper = (0, import_react40.useMemo)(() => overrides.components || "div", [overrides]);
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ComponentList, { id: "all" }) });
 };
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-var import_react43 = require("react");
+var import_react42 = require("react");
 // components/AutoFrame/index.tsx
 init_react_import();
-var import_react42 = require("react");
+var import_react41 = require("react");
 var import_object_hash = __toESM(require("object-hash"));
 var import_react_dom3 = require("react-dom");
 var import_jsx_runtime31 = require("react/jsx-runtime");
@@ -6533,7 +6578,7 @@ var CopyHostStyles = ({
   onStylesLoaded = () => null
 }) => {
   const { document: doc, window: win } = useFrame();
-  (0, import_react42.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (!win || !doc) {
       return () => {
       };
@@ -6692,8 +6737,8 @@ var CopyHostStyles = ({
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children });
 };
-var autoFrameContext = (0, import_react42.createContext)({});
-var useFrame = () => (0, import_react42.useContext)(autoFrameContext);
+var autoFrameContext = (0, import_react41.createContext)({});
+var useFrame = () => (0, import_react41.useContext)(autoFrameContext);
 function AutoFrame(_a) {
   var _b = _a, {
     children,
@@ -6714,11 +6759,11 @@ function AutoFrame(_a) {
     "onNotReady",
     "frameRef"
   ]);
-  const [loaded, setLoaded] = (0, import_react42.useState)(false);
-  const [ctx, setCtx] = (0, import_react42.useState)({});
-  const [mountTarget, setMountTarget] = (0, import_react42.useState)();
-  const [stylesLoaded, setStylesLoaded] = (0, import_react42.useState)(false);
-  (0, import_react42.useEffect)(() => {
+  const [loaded, setLoaded] = (0, import_react41.useState)(false);
+  const [ctx, setCtx] = (0, import_react41.useState)({});
+  const [mountTarget, setMountTarget] = (0, import_react41.useState)();
+  const [stylesLoaded, setStylesLoaded] = (0, import_react41.useState)(false);
+  (0, import_react41.useEffect)(() => {
     var _a2;
     if (frameRef.current) {
       const doc = frameRef.current.contentDocument;
@@ -6770,7 +6815,7 @@ var import_jsx_runtime32 = require("react/jsx-runtime");
 var getClassName23 = get_class_name_factory_default("PuckPreview", styles_module_default18);
 var useBubbleIframeEvents = (ref) => {
   const status = useAppStore((s) => s.status);
-  (0, import_react43.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (ref.current && status === "READY") {
       const iframe = ref.current;
       const handlePointerMove = (event) => {
@@ -6819,7 +6864,7 @@ var Preview3 = ({ id = "puck-preview" }) => {
   const renderData = useAppStore(
     (s) => s.state.ui.previewMode === "edit" ? null : s.state.data
   );
-  const Page = (0, import_react43.useCallback)(
+  const Page = (0, import_react42.useCallback)(
     (pageProps) => {
       var _a, _b;
       return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadValues({
@@ -6828,9 +6873,9 @@ var Preview3 = ({ id = "puck-preview" }) => {
     },
     [config.root]
   );
-  const Frame = (0, import_react43.useMemo)(() => overrides.iframe, [overrides]);
+  const Frame = (0, import_react42.useMemo)(() => overrides.iframe, [overrides]);
   const rootProps = root.props || root;
-  const ref = (0, import_react43.useRef)(null);
+  const ref = (0, import_react42.useRef)(null);
   useBubbleIframeEvents(ref);
   const inner = !renderData ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     Page,
@@ -6845,7 +6890,7 @@ var Preview3 = ({ id = "puck-preview" }) => {
       children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropZonePure, { zone: rootDroppableId })
     })
   ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Render, { data: renderData, config });
-  (0, import_react43.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (!iframe.enabled) {
       setStatus("READY");
     }
@@ -6936,7 +6981,7 @@ var scrollIntoView = (el) => {
 };
 // components/LayerTree/index.tsx
-var import_react44 = require("react");
+var import_react43 = require("react");
 // lib/on-scroll-end.ts
 init_react_import();
@@ -6971,7 +7016,7 @@ var LayerTree = ({
   label
 }) => {
   const zones = data.zones || {};
-  const ctx = (0, import_react44.useContext)(dropZoneContext);
+  const ctx = (0, import_react43.useContext)(dropZoneContext);
   const nodes = useAppStore((s) => s.nodes.nodes);
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: getClassName24("zoneTitle"), children: [
@@ -7083,7 +7128,7 @@ var LayerTree = ({
 };
 // components/Puck/components/Outline/index.tsx
-var import_react45 = require("react");
+var import_react44 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var Outline = () => {
   const state = useAppStore((s) => s.state);
@@ -7092,7 +7137,7 @@ var Outline = () => {
   const { data, ui } = state;
   const { itemSelector } = ui;
   const appStore = useAppStoreApi();
-  const setItemSelector = (0, import_react45.useCallback)(
+  const setItemSelector = (0, import_react44.useCallback)(
     (newItemSelector) => {
       const { dispatch } = appStore.getState();
       dispatch({
@@ -7102,7 +7147,7 @@ var Outline = () => {
     },
     [appStore]
   );
-  const Wrapper = (0, import_react45.useMemo)(() => outlineOverride || "div", [outlineOverride]);
+  const Wrapper = (0, import_react44.useMemo)(() => outlineOverride || "div", [outlineOverride]);
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
     (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       LayerTree,
@@ -7258,11 +7303,11 @@ var getBox = function getBox2(el) {
 };
 // components/Puck/components/Canvas/index.tsx
-var import_react47 = require("react");
+var import_react46 = require("react");
 // components/ViewportControls/index.tsx
 init_react_import();
-var import_react46 = require("react");
+var import_react45 = require("react");
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
 init_react_import();
@@ -7285,8 +7330,8 @@ var ViewportButton = ({
   onClick
 }) => {
   const viewports = useAppStore((s) => s.state.ui.viewports);
-  const [isActive, setIsActive] = (0, import_react46.useState)(false);
-  (0, import_react46.useEffect)(() => {
+  const [isActive, setIsActive] = (0, import_react45.useState)(false);
+  (0, import_react45.useEffect)(() => {
     setIsActive(width === viewports.current.width);
   }, [width, viewports.current.width]);
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
@@ -7322,7 +7367,7 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
-  const zoomOptions = (0, import_react46.useMemo)(
+  const zoomOptions = (0, import_react45.useMemo)(
     () => [
       ...defaultZoomOptions,
       ...defaultsContainAutoZoom ? [] : [
@@ -7469,17 +7514,17 @@ var Canvas = () => {
       viewports: s.state.ui.viewports
     }))
   );
-  const frameRef = (0, import_react47.useRef)(null);
-  const [showTransition, setShowTransition] = (0, import_react47.useState)(false);
-  const defaultRender = (0, import_react47.useMemo)(() => {
+  const frameRef = (0, import_react46.useRef)(null);
+  const [showTransition, setShowTransition] = (0, import_react46.useState)(false);
+  const defaultRender = (0, import_react46.useMemo)(() => {
     const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children });
     return PuckDefault;
   }, []);
-  const CustomPreview = (0, import_react47.useMemo)(
+  const CustomPreview = (0, import_react46.useMemo)(
     () => overrides.preview || defaultRender,
     [overrides]
   );
-  const getFrameDimensions = (0, import_react47.useCallback)(() => {
+  const getFrameDimensions = (0, import_react46.useCallback)(() => {
     if (frameRef.current) {
       const frame = frameRef.current;
       const box = getBox(frame);
@@ -7487,7 +7532,7 @@ var Canvas = () => {
     }
     return { width: 0, height: 0 };
   }, [frameRef]);
-  const resetAutoZoom = (0, import_react47.useCallback)(
+  const resetAutoZoom = (0, import_react46.useCallback)(
     (newViewports = viewports) => {
       if (frameRef.current) {
         setZoomConfig(
@@ -7501,11 +7546,11 @@ var Canvas = () => {
     },
     [frameRef, zoomConfig, viewports]
   );
-  (0, import_react47.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     setShowTransition(false);
     resetAutoZoom(viewports);
   }, [frameRef, leftSideBarVisible, rightSideBarVisible]);
-  (0, import_react47.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     const { height: frameHeight } = getFrameDimensions();
     if (viewports.current.height === "auto") {
       setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
@@ -7513,13 +7558,13 @@ var Canvas = () => {
       }));
     }
   }, [zoomConfig.zoom]);
-  (0, import_react47.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     if (ZOOM_ON_CHANGE) {
       setShowTransition(true);
       resetAutoZoom(viewports);
     }
   }, [viewports.current.width]);
-  (0, import_react47.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     const cb = () => {
       setShowTransition(false);
       resetAutoZoom();
@@ -7529,8 +7574,8 @@ var Canvas = () => {
       window.removeEventListener("resize", cb);
     };
   }, []);
-  const [showLoader, setShowLoader] = (0, import_react47.useState)(false);
-  (0, import_react47.useEffect)(() => {
+  const [showLoader, setShowLoader] = (0, import_react46.useState)(false);
+  (0, import_react46.useEffect)(() => {
     setTimeout(() => {
       setShowLoader(true);
     }, 500);
@@ -7608,7 +7653,7 @@ var Canvas = () => {
 // lib/use-loaded-overrides.ts
 init_react_import();
-var import_react48 = require("react");
+var import_react47 = require("react");
 // lib/load-overrides.ts
 init_react_import();
@@ -7647,7 +7692,7 @@ var useLoadedOverrides = ({
   overrides,
   plugins
 }) => {
-  return (0, import_react48.useMemo)(() => {
+  return (0, import_react47.useMemo)(() => {
     return loadOverrides({ overrides, plugins });
   }, [plugins, overrides]);
 };
@@ -7659,14 +7704,14 @@ var DefaultOverride = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime37
 // lib/use-inject-css.ts
 init_react_import();
-var import_react49 = require("react");
+var import_react48 = require("react");
 var styles = ``;
 var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
-  const [el, setEl] = (0, import_react49.useState)();
-  (0, import_react49.useEffect)(() => {
+  const [el, setEl] = (0, import_react48.useState)();
+  (0, import_react48.useEffect)(() => {
     setEl(document.createElement("style"));
   }, []);
-  (0, import_react49.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     var _a;
     if (!el || typeof window === "undefined") {
       return;
@@ -7686,10 +7731,10 @@ var useInjectGlobalCss = (iframeEnabled) => {
 // lib/use-preview-mode-hotkeys.ts
 init_react_import();
-var import_react50 = require("react");
+var import_react49 = require("react");
 var usePreviewModeHotkeys = () => {
   const appStore = useAppStoreApi();
-  const toggleInteractive = (0, import_react50.useCallback)(() => {
+  const toggleInteractive = (0, import_react49.useCallback)(() => {
     const dispatch = appStore.getState().dispatch;
     dispatch({
       type: "setUi",
@@ -7704,7 +7749,7 @@ var usePreviewModeHotkeys = () => {
 // lib/use-puck.ts
 init_react_import();
-var import_react51 = require("react");
+var import_react50 = require("react");
 var import_zustand6 = require("zustand");
 var generateUsePuck = (store) => {
   const history = {
@@ -7729,14 +7774,14 @@ var generateUsePuck = (store) => {
   const get = () => storeData;
   return __spreadProps(__spreadValues({}, storeData), { get });
 };
-var UsePuckStoreContext = (0, import_react51.createContext)(
+var UsePuckStoreContext = (0, import_react50.createContext)(
   null
 );
 var useRegisterUsePuckStore = (appStore) => {
-  const [usePuckStore] = (0, import_react51.useState)(
+  const [usePuckStore] = (0, import_react50.useState)(
     () => (0, import_zustand6.createStore)(() => generateUsePuck(appStore.getState()))
   );
-  (0, import_react51.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     return appStore.subscribe(
       (store) => {
         const pickedStore = {
@@ -7758,7 +7803,7 @@ var useRegisterUsePuckStore = (appStore) => {
 };
 function createUsePuck() {
   return function usePuck2(selector) {
-    const usePuckApi = (0, import_react51.useContext)(UsePuckStoreContext);
+    const usePuckApi = (0, import_react50.useContext)(UsePuckStoreContext);
     if (!usePuckApi) {
       throw new Error("usePuck must be used inside <Puck>.");
     }
@@ -7770,7 +7815,7 @@ function createUsePuck() {
   };
 }
 function usePuck() {
-  (0, import_react51.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     console.warn(
       "You're using the `usePuck` method without a selector, which may cause unnecessary re-renders. Replace with `createUsePuck` and provide a selector for improved performance."
     );
@@ -7791,11 +7836,11 @@ var FieldSideBar = () => {
   );
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SidebarSection, { noPadding: true, noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Fields, {}) });
 };
-var propsContext = (0, import_react52.createContext)({});
+var propsContext = (0, import_react51.createContext)({});
 function PropsProvider(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(propsContext.Provider, { value: props, children: props.children });
 }
-var usePropsContext = () => (0, import_react52.useContext)(propsContext);
+var usePropsContext = () => (0, import_react51.useContext)(propsContext);
 function PuckProvider({ children }) {
   const {
     config,
@@ -7815,7 +7860,7 @@ function PuckProvider({ children }) {
     enabled: true,
     waitForStyles: true
   }, _iframe);
-  const [generatedAppState] = (0, import_react52.useState)(() => {
+  const [generatedAppState] = (0, import_react51.useState)(() => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
@@ -7887,7 +7932,7 @@ function PuckProvider({ children }) {
     overrides,
     plugins
   });
-  const generateAppStore = (0, import_react52.useCallback)(() => {
+  const generateAppStore = (0, import_react51.useCallback)(() => {
     return {
       state: initialAppState,
       config,
@@ -7908,8 +7953,8 @@ function PuckProvider({ children }) {
     onAction,
     metadata
   ]);
-  const [appStore] = (0, import_react52.useState)(() => createAppStore(generateAppStore()));
-  (0, import_react52.useEffect)(() => {
+  const [appStore] = (0, import_react51.useState)(() => createAppStore(generateAppStore()));
+  (0, import_react51.useEffect)(() => {
     appStore.setState(__spreadValues({}, generateAppStore()));
   }, [
     initialAppState,
@@ -7926,7 +7971,7 @@ function PuckProvider({ children }) {
     index: initialHistoryIndex,
     initialAppState
   });
-  (0, import_react52.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     appStore.subscribe((s) => {
       if (onChange) onChange(s.state.data);
     });
@@ -7934,7 +7979,7 @@ function PuckProvider({ children }) {
   useRegisterNodesSlice(appStore);
   useRegisterPermissionsSlice(appStore, permissions);
   const uPuckStore = useRegisterUsePuckStore(appStore);
-  (0, import_react52.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     const { state, resolveData: resolveData2 } = appStore.getState();
     resolveData2(state);
   }, []);
@@ -7961,9 +8006,9 @@ function PuckLayout({ children }) {
   const rightSideBarVisible = useAppStore(
     (s) => s.state.ui.rightSideBarVisible
   );
-  const [menuOpen, setMenuOpen] = (0, import_react52.useState)(false);
+  const [menuOpen, setMenuOpen] = (0, import_react51.useState)(false);
   const appStore = useAppStoreApi();
-  (0, import_react52.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     return appStore.subscribe((s) => {
       if (onChange) onChange(s.state.data);
     });
@@ -7972,7 +8017,7 @@ function PuckLayout({ children }) {
     (s) => s.state.data.root.props || s.state.data.root.props
   );
   const dispatch = useAppStore((s) => s.dispatch);
-  const toggleSidebars = (0, import_react52.useCallback)(
+  const toggleSidebars = (0, import_react51.useCallback)(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -7986,7 +8031,7 @@ function PuckLayout({ children }) {
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  (0, import_react52.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -8009,7 +8054,7 @@ function PuckLayout({ children }) {
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  const defaultHeaderRender = (0, import_react52.useMemo)(() => {
+  const defaultHeaderRender = (0, import_react51.useMemo)(() => {
     if (renderHeader) {
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
@@ -8024,7 +8069,7 @@ function PuckLayout({ children }) {
     }
     return DefaultOverride;
   }, [renderHeader]);
-  const defaultHeaderActionsRender = (0, import_react52.useMemo)(() => {
+  const defaultHeaderActionsRender = (0, import_react51.useMemo)(() => {
     if (renderHeaderActions) {
       console.warn(
         "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
@@ -8039,25 +8084,25 @@ function PuckLayout({ children }) {
     return DefaultOverride;
   }, [renderHeader]);
   const overrides = useAppStore((s) => s.overrides);
-  const CustomPuck = (0, import_react52.useMemo)(
+  const CustomPuck = (0, import_react51.useMemo)(
     () => overrides.puck || DefaultOverride,
     [overrides]
   );
-  const CustomHeader = (0, import_react52.useMemo)(
+  const CustomHeader = (0, import_react51.useMemo)(
     () => overrides.header || defaultHeaderRender,
     [overrides]
   );
-  const CustomHeaderActions = (0, import_react52.useMemo)(
+  const CustomHeaderActions = (0, import_react51.useMemo)(
     () => overrides.headerActions || defaultHeaderActionsRender,
     [overrides]
   );
-  const [mounted, setMounted] = (0, import_react52.useState)(false);
-  (0, import_react52.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react51.useState)(false);
+  (0, import_react51.useEffect)(() => {
     setMounted(true);
   }, []);
   const ready = useAppStore((s) => s.status === "READY");
   useMonitorHotkeys();
-  (0, import_react52.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (ready && iframe.enabled) {
       const frameDoc = getFrame();
       if (frameDoc) {