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

package/dist/index.mjs

@@ -8,7 +8,6 @@ import {
   __spreadProps,
   __spreadValues,
   __toESM,
-  defaultData,
   getChanged,
   init_react_import,
   resolveAllData,
@@ -17,8 +16,9 @@ import {
   rootAreaId,
   rootDroppableId,
   rootZone,
-  setupZone
-} from "./chunk-T6VJEBJD.mjs";
+  setupZone,
+  transformProps
+} from "./chunk-7N5DRY4G.mjs";
 
 // ../../node_modules/classnames/index.js
 var require_classnames = __commonJS({
@@ -215,7 +215,7 @@ import {
   useContext as useContext3,
   useEffect as useEffect11,
   useMemo as useMemo5,
-  useState as useState9
+  useState as useState8
 } from "react";
 
 // components/AutoField/fields/index.tsx
@@ -676,7 +676,7 @@ var IconButton = ({
 };
 
 // components/AutoField/fields/ArrayField/index.tsx
-import { useCallback as useCallback2, useEffect as useEffect6, useState as useState4 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect6, useState as useState3 } from "react";
 
 // components/DragIcon/index.tsx
 init_react_import();
@@ -1891,7 +1891,6 @@ function useAppStoreApi() {
 // components/Sortable/index.tsx
 init_react_import();
 import { DragDropProvider } from "@dnd-kit/react";
-import { useState as useState3 } from "react";
 
 // lib/dnd/dnd-kit/safe.ts
 init_react_import();
@@ -1917,7 +1916,8 @@ function useDraggableSafe(input) {
 function useSortableSafe(input) {
   if (typeof window === "undefined") {
     return { ref: () => {
-    }, status: "idle" };
+    }, status: "idle", handleRef: () => {
+    } };
   }
   return useSortable(input);
 }
@@ -1950,6 +1950,7 @@ var _PointerSensor = class _PointerSensor extends Sensor {
     this.listeners = new 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);
@@ -2107,6 +2108,12 @@ var _PointerSensor = class _PointerSensor extends 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();
@@ -2121,12 +2128,13 @@ var _PointerSensor = class _PointerSensor extends 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();
     batch(() => {
       manager.actions.setDragSource(source.id);
@@ -2154,6 +2162,9 @@ var _PointerSensor = class _PointerSensor extends Sensor {
     ]);
     ownerDocument.body.setPointerCapture(event.pointerId);
     this.cleanup.add(unbind);
+    this.cleanup.add(() => {
+      this.started = false;
+    });
   }
   handleDragStart(event) {
     const { target } = event;
@@ -2201,23 +2212,26 @@ function patchWindow(window2) {
 
 // lib/dnd/use-sensors.ts
 import { isElement as isElement2 } from "@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] = useState2(() => [
     PointerSensor.configure({
       activationConstraints(event, source) {
         var _a;
         const { pointerType, target } = event;
         if (pointerType === "mouse" && isElement2(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;
       }
     })
   ]);
@@ -2563,7 +2577,6 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
 };
 
 // components/Sortable/index.tsx
-import { RestrictToElement } from "@dnd-kit/dom/modifiers";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var SortableProvider = ({
   children,
@@ -2571,22 +2584,20 @@ var SortableProvider = ({
   onDragEnd,
   onMove
 }) => {
-  const [move, setMove] = useState3({ source: -1, target: -1 });
-  const sensors = useSensors();
+  const sensors = useSensors({
+    mouse: { distance: { value: 5 } }
+  });
   return /* @__PURE__ */ jsx5(
     DragDropProvider,
     {
       sensors,
-      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;
@@ -2594,14 +2605,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
           });
@@ -2609,12 +2620,8 @@ var SortableProvider = ({
       },
       onDragEnd: () => {
         setTimeout(() => {
-          if (move.source !== -1 && move.target !== -1) {
-            onMove(move);
-          }
           onDragEnd();
         }, 250);
-        setMove({ source: -1, target: -1 });
       },
       children
     }
@@ -2627,7 +2634,11 @@ var Sortable = ({
   children,
   type = "item"
 }) => {
-  const { ref: sortableRef, status } = useSortableSafe({
+  const {
+    ref: sortableRef,
+    status,
+    handleRef
+  } = useSortableSafe({
     id,
     type,
     index,
@@ -2635,7 +2646,7 @@ var Sortable = ({
     data: { index },
     collisionDetector: createDynamicCollisionDetector("y")
   });
-  return children({ status, ref: sortableRef });
+  return children({ status, ref: sortableRef, handleRef });
 };
 
 // components/AutoField/context.tsx
@@ -2693,6 +2704,7 @@ var ArrayField = ({
   value: _value,
   name,
   label,
+  labelIcon,
   readOnly,
   id,
   Label: Label2 = (props) => /* @__PURE__ */ jsx7("div", __spreadValues({}, props))
@@ -2710,10 +2722,12 @@ var ArrayField = ({
     }),
     openId: ""
   };
-  const [localState, setLocalState] = useState4({ arrayState, value });
+  const [localState, setLocalState] = useState3({ arrayState, value });
   useEffect6(() => {
-    setLocalState({ arrayState, value });
-  }, [value, thisArrayState]);
+    var _a;
+    const _arrayState = (_a = appStore.getState().state.ui.arrayState[id]) != null ? _a : arrayState;
+    setLocalState({ arrayState: _arrayState, value });
+  }, [value]);
   const appStore = useAppStoreApi();
   const mapArrayStateToUi = useCallback2(
     (partialArrayState) => {
@@ -2756,7 +2770,8 @@ var ArrayField = ({
       setUi(mapArrayStateToUi(arrayState));
     }
   }, []);
-  const [isDragging, setIsDragging] = useState4(false);
+  const [draggedItem, setDraggedItem] = useState3("");
+  const isDragging = !!draggedItem;
   const canEdit = useAppStore(
     (s) => s.permissions.getPermissions({ item: s.selectedItem }).edit
   );
@@ -2769,16 +2784,22 @@ var ArrayField = ({
     Label2,
     {
       label: label || name,
-      icon: /* @__PURE__ */ jsx7(List, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ jsx7(List, { size: 16 }),
       el: "div",
       readOnly,
       children: /* @__PURE__ */ jsx7(
         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,
@@ -2791,7 +2812,6 @@ var ArrayField = ({
               })
             };
             setUi(newUi, false);
-            onChange(newValue, newUi);
             setLocalState({
               value: newValue,
               arrayState: __spreadProps(__spreadValues({}, arrayState), { items: newArrayStateItems })
@@ -2804,11 +2824,8 @@ var ArrayField = ({
                 hasItems: Array.isArray(value) && value.length > 0,
                 addDisabled
               }),
-              onClick: (e) => {
-                e.preventDefault();
-              },
               children: [
-                /* @__PURE__ */ jsx7("div", { className: getClassName5("inner"), "data-dnd-container": true, children: localState.arrayState.items.map((item, i) => {
+                localState.arrayState.items.length > 0 && /* @__PURE__ */ jsx7("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__ */ jsx7(
@@ -2817,7 +2834,7 @@ var ArrayField = ({
                       id: _arrayId,
                       index: i,
                       disabled: readOnly,
-                      children: ({ status, ref }) => /* @__PURE__ */ jsxs3(
+                      children: ({ status, ref, handleRef }) => /* @__PURE__ */ jsxs3(
                         "div",
                         {
                           ref,
@@ -2830,6 +2847,7 @@ var ArrayField = ({
                             /* @__PURE__ */ jsxs3(
                               "div",
                               {
+                                ref: handleRef,
                                 onClick: (e) => {
                                   if (isDragging) return;
                                   e.preventDefault();
@@ -2866,12 +2884,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__ */ jsx7(Copy, { size: 16 })
@@ -2890,12 +2907,13 @@ var ArrayField = ({
                                             ];
                                             existingValue.splice(i, 1);
                                             existingItems.splice(i, 1);
-                                            onChange(
-                                              existingValue,
+                                            setUi(
                                               mapArrayStateToUi({
                                                 items: existingItems
-                                              })
+                                              }),
+                                              false
                                             );
+                                            onChange(existingValue);
                                           },
                                           title: "Delete",
                                           children: /* @__PURE__ */ jsx7(Trash, { size: 16 })
@@ -2907,58 +2925,49 @@ var ArrayField = ({
                                 ]
                               }
                             ),
-                            /* @__PURE__ */ jsx7("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ jsx7(
-                              "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__ */ jsx7(
-                                    NestedFieldProvider,
+                            /* @__PURE__ */ jsx7("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ jsx7("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__ */ jsx7(
+                                NestedFieldProvider,
+                                {
+                                  name: localIndexName,
+                                  wildcardName: localWildcardName,
+                                  subName,
+                                  readOnlyFields,
+                                  children: /* @__PURE__ */ jsx7(
+                                    AutoFieldPrivate,
                                     {
-                                      name: localIndexName,
-                                      wildcardName: localWildcardName,
-                                      subName,
-                                      readOnlyFields,
-                                      children: /* @__PURE__ */ jsx7(
-                                        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
+                              );
+                            }) }) })
                           ]
                         }
                       )
@@ -2979,7 +2988,8 @@ var ArrayField = ({
                         field.defaultItemProps || {}
                       ];
                       const newArrayState = regenerateArrayState(newValue);
-                      onChange(newValue, mapArrayStateToUi(newArrayState));
+                      setUi(mapArrayStateToUi(newArrayState), false);
+                      onChange(newValue);
                     },
                     children: /* @__PURE__ */ jsx7(Plus, { size: 21 })
                   }
@@ -3004,6 +3014,7 @@ var DefaultField = ({
   value: _value,
   name,
   label,
+  labelIcon,
   Label: Label2,
   id
 }) => {
@@ -3012,7 +3023,7 @@ var DefaultField = ({
     Label2,
     {
       label: label || name,
-      icon: /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      icon: labelIcon || /* @__PURE__ */ jsxs4(Fragment2, { children: [
         field.type === "text" && /* @__PURE__ */ jsx8(Type, { size: 16 }),
         field.type === "number" && /* @__PURE__ */ jsx8(Hash, { size: 16 })
       ] }),
@@ -3062,7 +3073,7 @@ init_react_import();
 import {
   useMemo as useMemo2,
   useEffect as useEffect9,
-  useState as useState7,
+  useState as useState6,
   useCallback as useCallback3,
   isValidElement
 } from "react";
@@ -3073,7 +3084,7 @@ var styles_module_default6 = { "ExternalInput-actions": "_ExternalInput-actions_
 
 // components/Modal/index.tsx
 init_react_import();
-import { useEffect as useEffect7, useState as useState5 } from "react";
+import { useEffect as useEffect7, useState as useState4 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Modal/styles.module.css#css-module
 init_react_import();
@@ -3088,7 +3099,7 @@ var Modal = ({
   onClose,
   isOpen
 }) => {
-  const [rootEl, setRootEl] = useState5(null);
+  const [rootEl, setRootEl] = useState4(null);
   useEffect7(() => {
     setRootEl(document.getElementById("puck-portal-root"));
   }, []);
@@ -3136,7 +3147,7 @@ init_react_import();
 
 // components/Button/Button.tsx
 init_react_import();
-import { useEffect as useEffect8, useState as useState6 } from "react";
+import { useEffect as useEffect8, useState as useState5 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css#css-module
 init_react_import();
@@ -3186,7 +3197,7 @@ var Button = (_a) => {
     "size",
     "loading"
   ]);
-  const [loading, setLoading] = useState6(loadingProp);
+  const [loading, setLoading] = useState5(loadingProp);
   useEffect8(() => setLoading(loadingProp), [loadingProp]);
   const ElementType = href ? "a" : type ? "button" : "span";
   const dataAttrs = filterDataAttrs(props);
@@ -3242,12 +3253,12 @@ var ExternalInput = ({
     mapRow = (val) => val,
     filterFields
   } = field || {};
-  const [data, setData] = useState7([]);
-  const [isOpen, setOpen] = useState7(false);
-  const [isLoading, setIsLoading] = useState7(true);
+  const [data, setData] = useState6([]);
+  const [isOpen, setOpen] = useState6(false);
+  const [isLoading, setIsLoading] = useState6(true);
   const hasFilterFields = !!filterFields;
-  const [filters, setFilters] = useState7(field.initialFilters || {});
-  const [filtersToggled, setFiltersToggled] = useState7(hasFilterFields);
+  const [filters, setFilters] = useState6(field.initialFilters || {});
+  const [filtersToggled, setFiltersToggled] = useState6(hasFilterFields);
   const mappedData = useMemo2(() => {
     return data.map(mapRow);
   }, [data]);
@@ -3262,7 +3273,7 @@ var ExternalInput = ({
     }
     return Array.from(validKeys);
   }, [mappedData]);
-  const [searchQuery, setSearchQuery] = useState7(field.initialQuery || "");
+  const [searchQuery, setSearchQuery] = useState6(field.initialQuery || "");
   const search = useCallback3(
     (query, filters2) => __async(void 0, null, function* () {
       setIsLoading(true);
@@ -3448,6 +3459,7 @@ var ExternalField = ({
   value,
   name,
   label,
+  labelIcon,
   Label: Label2,
   id,
   readOnly
@@ -3465,27 +3477,35 @@ var ExternalField = ({
   if (field.type !== "external") {
     return null;
   }
-  return /* @__PURE__ */ jsx13(Label2, { label: label || name, icon: /* @__PURE__ */ jsx13(Link, { size: 16 }), el: "div", children: /* @__PURE__ */ jsx13(
-    ExternalInput,
+  return /* @__PURE__ */ jsx13(
+    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__ */ jsx13(Link, { size: 16 }),
+      el: "div",
+      children: /* @__PURE__ */ jsx13(
+        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
@@ -3514,6 +3534,7 @@ var RadioField = ({
   name,
   id,
   label,
+  labelIcon,
   Label: Label2
 }) => {
   const flatOptions = useMemo3(
@@ -3526,7 +3547,7 @@ var RadioField = ({
   return /* @__PURE__ */ jsx14(
     Label2,
     {
-      icon: /* @__PURE__ */ jsx14(CircleCheckBig, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ jsx14(CircleCheckBig, { size: 16 }),
       label: label || name,
       readOnly,
       el: "div",
@@ -3573,6 +3594,7 @@ var SelectField = ({
   field,
   onChange,
   label,
+  labelIcon,
   Label: Label2,
   value,
   name,
@@ -3590,7 +3612,7 @@ var SelectField = ({
     Label2,
     {
       label: label || name,
-      icon: /* @__PURE__ */ jsx15(ChevronDown, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ jsx15(ChevronDown, { size: 16 }),
       readOnly,
       children: /* @__PURE__ */ jsx15(
         "select",
@@ -3634,24 +3656,33 @@ var TextareaField = ({
   value,
   name,
   label,
+  labelIcon,
   Label: Label2,
   id
 }) => {
-  return /* @__PURE__ */ jsx16(Label2, { label: label || name, icon: /* @__PURE__ */ jsx16(Type, { size: 16 }), readOnly, children: /* @__PURE__ */ jsx16(
-    "textarea",
+  return /* @__PURE__ */ jsx16(
+    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__ */ jsx16(Type, { size: 16 }),
       readOnly,
-      tabIndex: readOnly ? -1 : void 0,
-      rows: 5,
-      placeholder: field.type === "textarea" ? field.placeholder : void 0
+      children: /* @__PURE__ */ jsx16(
+        "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
@@ -3670,6 +3701,7 @@ var ObjectField = ({
   value,
   name,
   label,
+  labelIcon,
   Label: Label2,
   readOnly,
   id
@@ -3683,7 +3715,7 @@ var ObjectField = ({
     Label2,
     {
       label: label || name,
-      icon: /* @__PURE__ */ jsx17(EllipsisVertical, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ jsx17(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) => {
@@ -3730,12 +3762,12 @@ var ObjectField = ({
 
 // lib/use-safe-id.ts
 init_react_import();
-import React2, { useState as useState8 } from "react";
+import React2, { useState as useState7 } from "react";
 var useSafeId = () => {
   if (typeof React2.useId !== "undefined") {
     return React2.useId();
   }
-  const [id] = useState8(generateId());
+  const [id] = useState7(generateId());
   return id;
 };
 
@@ -3800,6 +3832,7 @@ function AutoFieldInternal(props) {
   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 = {
@@ -3825,6 +3858,7 @@ function AutoFieldInternal(props) {
   const mergedProps = __spreadProps(__spreadValues({}, props), {
     field,
     label,
+    labelIcon,
     Label: Label2,
     id: resolvedId
   });
@@ -3886,11 +3920,14 @@ function AutoFieldInternal(props) {
 function AutoFieldPrivate(props) {
   const isFocused = useAppStore((s) => s.state.ui.field.focus === props.name);
   const { value, onChange } = props;
-  const [localValue, setLocalValue] = useState9(value);
-  const onChangeLocal = useCallback4((val, ui) => {
-    setLocalValue(val);
-    onChange(val, ui);
-  }, []);
+  const [localValue, setLocalValue] = useState8(value);
+  const onChangeLocal = useCallback4(
+    (val, ui) => {
+      setLocalValue(val);
+      onChange(val, ui);
+    },
+    [onChange]
+  );
   useEffect11(() => {
     if (!isFocused) {
       setLocalValue(value);
@@ -3923,7 +3960,7 @@ 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
-import { useId as useId2, useMemo as useMemo9, useState as useState16 } from "react";
+import { useMemo as useMemo9, useState as useState15 } from "react";
 
 // components/DragDropContext/index.tsx
 init_react_import();
@@ -3933,9 +3970,8 @@ import {
   useCallback as useCallback10,
   useContext as useContext7,
   useEffect as useEffect17,
-  useId,
-  useRef as useRef3,
-  useState as useState15
+  useRef as useRef4,
+  useState as useState14
 } from "react";
 import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
 
@@ -3947,7 +3983,7 @@ import {
   useContext as useContext6,
   useEffect as useEffect16,
   useMemo as useMemo8,
-  useRef as useRef2
+  useRef as useRef3
 } from "react";
 
 // components/DraggableComponent/index.tsx
@@ -3957,8 +3993,8 @@ import {
   useContext as useContext5,
   useEffect as useEffect12,
   useMemo as useMemo7,
-  useRef,
-  useState as useState11
+  useRef as useRef2,
+  useState as useState10
 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
@@ -3993,7 +4029,7 @@ import {
   createContext as createContext3,
   useCallback as useCallback5,
   useMemo as useMemo6,
-  useState as useState10
+  useState as useState9
 } from "react";
 import { createStore as createStore2 } from "zustand";
 import { Fragment as Fragment5, jsx as jsx19 } from "react/jsx-runtime";
@@ -4018,8 +4054,8 @@ var DropZoneProvider = ({
   children,
   value
 }) => {
-  const [hoveringComponent, setHoveringComponent] = useState10();
-  const [activeZones, setActiveZones] = useState10({});
+  const [hoveringComponent, setHoveringComponent] = useState9();
+  const [activeZones, setActiveZones] = useState9({});
   const dispatch = useAppStore((s) => s.dispatch);
   const registerZone = useCallback5(
     (zoneCompound) => {
@@ -4127,7 +4163,7 @@ var DraggableComponent = ({
   const dispatch = useAppStore((s) => s.dispatch);
   const iframe = useAppStore((s) => s.iframe);
   const ctx = useContext5(dropZoneContext);
-  const [localZones, setLocalZones] = useState11({});
+  const [localZones, setLocalZones] = useState10({});
   const registerLocalZone = useCallback6(
     (zoneCompound2, active) => {
       var _a;
@@ -4168,7 +4204,7 @@ var DraggableComponent = ({
   );
   const canCollide = permissions.drag || userIsDragging;
   const disabled = !isEnabled || !canCollide;
-  const [dragAxis, setDragAxis] = useState11(userDragAxis || autoDragAxis);
+  const [dragAxis, setDragAxis] = useState10(userDragAxis || autoDragAxis);
   const { ref: sortableRef, status } = useSortableSafe({
     id,
     index,
@@ -4194,7 +4230,7 @@ var DraggableComponent = ({
     }
   });
   const thisIsDragging = status === "dragging";
-  const ref = useRef(null);
+  const ref = useRef2(null);
   const refSetter = useCallback6(
     (el) => {
       sortableRef(el);
@@ -4204,7 +4240,7 @@ var DraggableComponent = ({
     },
     [sortableRef]
   );
-  const [portalEl, setPortalEl] = useState11();
+  const [portalEl, setPortalEl] = useState10();
   useEffect12(() => {
     var _a, _b, _c;
     setPortalEl(
@@ -4231,7 +4267,7 @@ var DraggableComponent = ({
     };
     return style2;
   }, [ref.current]);
-  const [style, setStyle] = useState11();
+  const [style, setStyle] = useState10();
   const sync = useCallback6(() => {
     setStyle(getStyle());
   }, [ref.current, iframe]);
@@ -4300,7 +4336,7 @@ var DraggableComponent = ({
       zone: zoneCompound
     });
   }, [index, zoneCompound]);
-  const [hover, setHover] = useState11(false);
+  const [hover, setHover] = useState10(false);
   const indicativeHover = (ctx == null ? void 0 : ctx.hoveringComponent) === id;
   useEffect12(() => {
     if (!ref.current) {
@@ -4361,7 +4397,7 @@ var DraggableComponent = ({
       };
     }
   }, [disabled, ref]);
-  const [isVisible, setIsVisible] = useState11(false);
+  const [isVisible, setIsVisible] = useState10(false);
   useEffect12(() => {
     sync();
     if ((isSelected || hover || indicativeHover) && !userIsDragging) {
@@ -4378,10 +4414,18 @@ 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";
+            }
+          }
         }
       }
     },
@@ -4480,15 +4524,15 @@ var styles_module_default12 = { "DropZone": "_DropZone_kmkdc_1", "DropZone--isAc
 
 // components/DropZone/lib/use-min-empty-height.ts
 init_react_import();
-import { useEffect as useEffect13, useState as useState12 } from "react";
+import { useEffect as useEffect13, useState as useState11 } from "react";
 var useMinEmptyHeight = ({
   zoneCompound,
   userMinEmptyHeight,
   ref
 }) => {
   const appStore = useAppStoreApi();
-  const [prevHeight, setPrevHeight] = useState12(0);
-  const [isAnimating, setIsAnimating] = useState12(false);
+  const [prevHeight, setPrevHeight] = useState11(0);
+  const [isAnimating, setIsAnimating] = useState11(false);
   const { draggedItem, isZone } = useContextStore(ZoneStoreContext, (s) => {
     var _a, _b;
     return {
@@ -4534,7 +4578,7 @@ function assignRefs(refs, node) {
 
 // components/DropZone/lib/use-content-with-preview.ts
 init_react_import();
-import { useEffect as useEffect14, useState as useState13 } from "react";
+import { useEffect as useEffect14, useState as useState12 } from "react";
 
 // lib/dnd/use-rendered-callback.ts
 init_react_import();
@@ -4565,8 +4609,8 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
     }
   );
   const isDragging = useAppStore((s) => s.state.ui.isDragging);
-  const [contentIdsWithPreview, setContentIdsWithPreview] = useState13(contentIds);
-  const [localPreview, setLocalPreview] = useState13(
+  const [contentIdsWithPreview, setContentIdsWithPreview] = useState12(contentIds);
+  const [localPreview, setLocalPreview] = useState12(
     preview
   );
   const updateContent = useRenderedCallback(
@@ -4609,13 +4653,13 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
 
 // components/DropZone/lib/use-drag-axis.ts
 init_react_import();
-import { useCallback as useCallback8, useEffect as useEffect15, useState as useState14 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect15, useState as useState13 } from "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] = useState14(
+  const [dragAxis, setDragAxis] = useState13(
     collisionAxis || DEFAULT_DRAG_AXIS
   );
   const calculateDragAxis = useCallback8(() => {
@@ -4871,7 +4915,7 @@ var DropZoneEdit = forwardRef3(
         return content.map(({ props }) => props.id);
       })
     );
-    const ref = useRef2(null);
+    const ref = useRef3(null);
     const acceptsTarget = useCallback9(
       (componentType) => {
         if (!componentType) {
@@ -5373,7 +5417,7 @@ function useDragListener(type, fn, deps = []) {
 }
 var AREA_CHANGE_DEBOUNCE_MS = 100;
 var useTempDisableFallback = (timeout3) => {
-  const lastFallbackDisable = useRef3(null);
+  const lastFallbackDisable = useRef4(null);
   return useCallback10((manager) => {
     collisionStore.setState({ fallbackEnabled: false });
     const fallbackId = generateId();
@@ -5395,10 +5439,10 @@ var DragDropContextClient = ({
   const resolveData2 = useAppStore((s) => s.resolveData);
   const metadata = useAppStore((s) => s.metadata);
   const appStore = useAppStoreApi();
-  const id = useId();
-  const debouncedParamsRef = useRef3(null);
+  const id = useSafeId();
+  const debouncedParamsRef = useRef4(null);
   const tempDisableFallback = useTempDisableFallback(100);
-  const [zoneStore] = useState15(
+  const [zoneStore] = useState14(
     () => createStore3(() => ({
       zoneDepthIndex: {},
       nextZoneDepthIndex: {},
@@ -5467,7 +5511,7 @@ var DragDropContextClient = ({
       );
     }
   }, []);
-  const [plugins] = useState15(() => [
+  const [plugins] = useState14(() => [
     ...disableAutoScroll ? defaultPreset.plugins.filter((plugin) => plugin !== AutoScroller) : defaultPreset.plugins,
     createNestedDroppablePlugin(
       {
@@ -5515,9 +5559,9 @@ var DragDropContextClient = ({
     )
   ]);
   const sensors = useSensors();
-  const [dragListeners, setDragListeners] = useState15({});
-  const dragMode = useRef3(null);
-  const initialSelector = useRef3(void 0);
+  const [dragListeners, setDragListeners] = useState14({});
+  const dragMode = useRef4(null);
+  const initialSelector = useRef4(void 0);
   return /* @__PURE__ */ jsx23("div", { id, children: /* @__PURE__ */ jsx23(
     dragListenerContext.Provider,
     {
@@ -5810,7 +5854,7 @@ var DrawerItem = ({
   isDragDisabled
 }) => {
   const resolvedId = id || name;
-  const [dynamicId, setDynamicId] = useState16(generateId(resolvedId));
+  const [dynamicId, setDynamicId] = useState15(generateId(resolvedId));
   if (typeof index !== "undefined") {
     console.error(
       "Warning: The `index` prop on Drawer.Item is deprecated and no longer required."
@@ -5849,7 +5893,7 @@ var Drawer = ({
       "Warning: The `direction` prop on Drawer is deprecated and no longer required to achieve multi-directional dragging."
     );
   }
-  const id = useId2();
+  const id = useSafeId();
   const { ref } = useDroppableSafe({
     id,
     type: "void",
@@ -5877,7 +5921,7 @@ import {
   useContext as useContext11,
   useEffect as useEffect25,
   useMemo as useMemo18,
-  useState as useState23
+  useState as useState22
 } from "react";
 
 // components/SidebarSection/index.tsx
@@ -6177,7 +6221,7 @@ init_react_import();
 
 // lib/use-component-list.tsx
 init_react_import();
-import { useEffect as useEffect18, useState as useState17 } from "react";
+import { useEffect as useEffect18, useState as useState16 } from "react";
 
 // components/ComponentList/index.tsx
 init_react_import();
@@ -6248,7 +6292,7 @@ ComponentList.Item = ComponentListItem;
 // lib/use-component-list.tsx
 import { jsx as jsx29 } from "react/jsx-runtime";
 var useComponentList = () => {
-  const [componentList, setComponentList] = useState17();
+  const [componentList, setComponentList] = useState16();
   const config = useAppStore((s) => s.config);
   const uiComponentList = useAppStore((s) => s.state.ui.componentList);
   useEffect18(() => {
@@ -6331,7 +6375,7 @@ var Components = () => {
 
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-import { useCallback as useCallback12, useEffect as useEffect20, useRef as useRef4, useMemo as useMemo13 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect20, useRef as useRef5, useMemo as useMemo13 } from "react";
 
 // components/AutoFrame/index.tsx
 init_react_import();
@@ -6339,7 +6383,7 @@ import {
   createContext as createContext5,
   useContext as useContext8,
   useEffect as useEffect19,
-  useState as useState18
+  useState as useState17
 } from "react";
 import hash from "object-hash";
 import { createPortal as createPortal3 } from "react-dom";
@@ -6567,10 +6611,10 @@ function AutoFrame(_a) {
     "onNotReady",
     "frameRef"
   ]);
-  const [loaded, setLoaded] = useState18(false);
-  const [ctx, setCtx] = useState18({});
-  const [mountTarget, setMountTarget] = useState18();
-  const [stylesLoaded, setStylesLoaded] = useState18(false);
+  const [loaded, setLoaded] = useState17(false);
+  const [ctx, setCtx] = useState17({});
+  const [mountTarget, setMountTarget] = useState17();
+  const [stylesLoaded, setStylesLoaded] = useState17(false);
   useEffect19(() => {
     var _a2;
     if (frameRef.current) {
@@ -6683,7 +6727,7 @@ var Preview3 = ({ id = "puck-preview" }) => {
   );
   const Frame = useMemo13(() => overrides.iframe, [overrides]);
   const rootProps = root.props || root;
-  const ref = useRef4(null);
+  const ref = useRef5(null);
   useBubbleIframeEvents(ref);
   const inner = !renderData ? /* @__PURE__ */ jsx32(
     Page,
@@ -7115,13 +7159,13 @@ import {
   useCallback as useCallback14,
   useEffect as useEffect22,
   useMemo as useMemo16,
-  useRef as useRef5,
-  useState as useState20
+  useRef as useRef6,
+  useState as useState19
 } from "react";
 
 // components/ViewportControls/index.tsx
 init_react_import();
-import { useEffect as useEffect21, useMemo as useMemo15, useState as useState19 } from "react";
+import { useEffect as useEffect21, useMemo as useMemo15, useState as useState18 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
 init_react_import();
@@ -7144,7 +7188,7 @@ var ViewportButton = ({
   onClick
 }) => {
   const viewports = useAppStore((s) => s.state.ui.viewports);
-  const [isActive, setIsActive] = useState19(false);
+  const [isActive, setIsActive] = useState18(false);
   useEffect21(() => {
     setIsActive(width === viewports.current.width);
   }, [width, viewports.current.width]);
@@ -7328,8 +7372,8 @@ var Canvas = () => {
       viewports: s.state.ui.viewports
     }))
   );
-  const frameRef = useRef5(null);
-  const [showTransition, setShowTransition] = useState20(false);
+  const frameRef = useRef6(null);
+  const [showTransition, setShowTransition] = useState19(false);
   const defaultRender = useMemo16(() => {
     const PuckDefault = ({ children }) => /* @__PURE__ */ jsx36(Fragment13, { children });
     return PuckDefault;
@@ -7388,7 +7432,7 @@ var Canvas = () => {
       window.removeEventListener("resize", cb);
     };
   }, []);
-  const [showLoader, setShowLoader] = useState20(false);
+  const [showLoader, setShowLoader] = useState19(false);
   useEffect22(() => {
     setTimeout(() => {
       setShowLoader(true);
@@ -7518,10 +7562,10 @@ var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx37(Fragment14, { chil
 
 // lib/use-inject-css.ts
 init_react_import();
-import { useEffect as useEffect23, useState as useState21 } from "react";
+import { useEffect as useEffect23, useState as useState20 } from "react";
 var styles = ``;
 var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
-  const [el, setEl] = useState21();
+  const [el, setEl] = useState20();
   useEffect23(() => {
     setEl(document.createElement("style"));
   }, []);
@@ -7563,7 +7607,7 @@ var usePreviewModeHotkeys = () => {
 
 // lib/use-puck.ts
 init_react_import();
-import { createContext as createContext6, useContext as useContext10, useEffect as useEffect24, useState as useState22 } from "react";
+import { createContext as createContext6, useContext as useContext10, useEffect as useEffect24, useState as useState21 } from "react";
 import { createStore as createStore4, useStore as useStore3 } from "zustand";
 var generateUsePuck = (store) => {
   const history = {
@@ -7592,7 +7636,7 @@ var UsePuckStoreContext = createContext6(
   null
 );
 var useRegisterUsePuckStore = (appStore) => {
-  const [usePuckStore] = useState22(
+  const [usePuckStore] = useState21(
     () => createStore4(() => generateUsePuck(appStore.getState()))
   );
   useEffect24(() => {
@@ -7674,7 +7718,7 @@ function PuckProvider({ children }) {
     enabled: true,
     waitForStyles: true
   }, _iframe);
-  const [generatedAppState] = useState23(() => {
+  const [generatedAppState] = useState22(() => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
@@ -7767,7 +7811,7 @@ function PuckProvider({ children }) {
     onAction,
     metadata
   ]);
-  const [appStore] = useState23(() => createAppStore(generateAppStore()));
+  const [appStore] = useState22(() => createAppStore(generateAppStore()));
   useEffect25(() => {
     appStore.setState(__spreadValues({}, generateAppStore()));
   }, [
@@ -7820,7 +7864,7 @@ function PuckLayout({ children }) {
   const rightSideBarVisible = useAppStore(
     (s) => s.state.ui.rightSideBarVisible
   );
-  const [menuOpen, setMenuOpen] = useState23(false);
+  const [menuOpen, setMenuOpen] = useState22(false);
   const appStore = useAppStoreApi();
   useEffect25(() => {
     return appStore.subscribe((s) => {
@@ -7910,7 +7954,7 @@ function PuckLayout({ children }) {
     () => overrides.headerActions || defaultHeaderActionsRender,
     [overrides]
   );
-  const [mounted, setMounted] = useState23(false);
+  const [mounted, setMounted] = useState22(false);
   useEffect25(() => {
     setMounted(true);
   }, []);
@@ -8075,40 +8119,6 @@ var migrations = [
 function migrate(data) {
   return migrations == null ? void 0 : migrations.reduce((acc, migration) => migration(acc), data);
 }
-
-// lib/transform-props.ts
-init_react_import();
-function transformProps(data, propTransforms) {
-  const mapItem = (item) => {
-    if (propTransforms[item.type]) {
-      return __spreadProps(__spreadValues({}, item), {
-        props: propTransforms[item.type](item.props)
-      });
-    }
-    return item;
-  };
-  const defaultedData = defaultData(data);
-  const rootProps = defaultedData.root.props || defaultedData.root;
-  let newRoot = __spreadValues({}, defaultedData.root);
-  if (propTransforms["root"]) {
-    if (defaultedData.root.props) {
-      newRoot.props = propTransforms["root"](rootProps);
-    } else {
-      newRoot = propTransforms["root"](rootProps);
-    }
-  }
-  const afterPropTransforms = __spreadProps(__spreadValues({}, defaultedData), {
-    root: newRoot,
-    content: defaultedData.content.map(mapItem),
-    zones: Object.keys(data.zones || {}).reduce(
-      (acc, zoneKey) => __spreadProps(__spreadValues({}, acc), {
-        [zoneKey]: data.zones[zoneKey].map(mapItem)
-      }),
-      {}
-    )
-  });
-  return afterPropTransforms;
-}
 export {
   Action,
   ActionBar,