@measured/puck 0.18.3-canary.098fdd1 → 0.18.3-canary.1d484ee

package/dist/index.mjs

@@ -8,15 +8,15 @@ import {
   __spreadProps,
   __spreadValues,
   __toESM,
-  defaultData,
   getChanged,
   init_react_import,
   resolveAllData,
   resolveComponentData,
   resolveRootData,
   rootDroppableId,
-  setupZone
-} from "./chunk-CHWFBYEM.mjs";
+  setupZone,
+  transformProps
+} from "./chunk-4QIG6FWS.mjs";
 
 // ../../node_modules/classnames/index.js
 var require_classnames = __commonJS({
@@ -213,7 +213,7 @@ import {
   useContext as useContext3,
   useEffect as useEffect9,
   useMemo as useMemo5,
-  useState as useState12
+  useState as useState11
 } from "react";
 
 // components/AutoField/fields/index.tsx
@@ -674,7 +674,7 @@ var IconButton = ({
 };
 
 // components/AutoField/fields/ArrayField/index.tsx
-import { useCallback as useCallback3, useEffect as useEffect4, useRef, useState as useState7 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useState as useState6 } from "react";
 
 // components/DragIcon/index.tsx
 init_react_import();
@@ -1084,7 +1084,6 @@ function useAppContext() {
 // components/Sortable/index.tsx
 init_react_import();
 import { DragDropProvider } from "@dnd-kit/react";
-import { useState as useState6 } from "react";
 
 // lib/dnd/dnd-kit/safe.ts
 init_react_import();
@@ -1110,7 +1109,8 @@ function useDraggableSafe(input) {
 function useSortableSafe(input) {
   if (typeof window === "undefined") {
     return { ref: () => {
-    }, status: "idle" };
+    }, status: "idle", handleRef: () => {
+    } };
   }
   return useSortable(input);
 }
@@ -1394,23 +1394,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] = useState5(() => [
     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;
       }
     })
   ]);
@@ -1756,31 +1759,27 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
 };
 
 // components/Sortable/index.tsx
-import { RestrictToElement } from "@dnd-kit/dom/modifiers";
 import { jsx as jsx6 } from "react/jsx-runtime";
 var SortableProvider = ({
-  container,
   children,
   onDragStart,
   onDragEnd,
   onMove
 }) => {
-  const [move, setMove] = useState6({ source: -1, target: -1 });
-  const sensors = useSensors();
+  const sensors = useSensors({
+    mouse: { distance: { value: 5 } }
+  });
   return /* @__PURE__ */ jsx6(
     DragDropProvider,
     {
       sensors,
-      modifiers: [
-        RestrictToElement.configure({
-          element() {
-            return container.current;
-          }
-        })
-      ],
-      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;
@@ -1788,14 +1787,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
           });
@@ -1803,12 +1802,8 @@ var SortableProvider = ({
       },
       onDragEnd: () => {
         setTimeout(() => {
-          if (move.source !== -1 && move.target !== -1) {
-            onMove(move);
-          }
           onDragEnd();
         }, 250);
-        setMove({ source: -1, target: -1 });
       },
       children
     }
@@ -1821,7 +1816,11 @@ var Sortable = ({
   children,
   type = "item"
 }) => {
-  const { ref: sortableRef, status } = useSortableSafe({
+  const {
+    ref: sortableRef,
+    status,
+    handleRef
+  } = useSortableSafe({
     id,
     type,
     index,
@@ -1829,7 +1828,7 @@ var Sortable = ({
     data: { index },
     collisionDetector: createDynamicCollisionDetector("y")
   });
-  return children({ status, ref: sortableRef });
+  return children({ status, ref: sortableRef, handleRef });
 };
 
 // components/AutoField/context.tsx
@@ -1903,10 +1902,16 @@ var ArrayField = ({
     }),
     openId: ""
   };
-  const [localState, setLocalState] = useState7({ arrayState, value });
+  const [localState, setLocalState] = useState6({ arrayState, value });
+  const updateLocalState = useCallback3(
+    (value2) => {
+      setLocalState({ arrayState, value: value2 });
+    },
+    [arrayState]
+  );
   useEffect4(() => {
-    setLocalState({ arrayState, value });
-  }, [value, state.ui.arrayState[id]]);
+    updateLocalState(value);
+  }, [value]);
   const mapArrayStateToUi = useCallback3(
     (partialArrayState) => {
       return {
@@ -1947,8 +1952,8 @@ var ArrayField = ({
       setUi(mapArrayStateToUi(arrayState));
     }
   }, []);
-  const [isDragging, setIsDragging] = useState7(false);
-  const dndContainerRef = useRef(null);
+  const [draggedItem, setDraggedItem] = useState6("");
+  const isDragging = !!draggedItem;
   const forceReadOnly = getPermissions({ item: selectedItem }).edit === false;
   if (field.type !== "array" || !field.arrayFields) {
     return null;
@@ -1964,11 +1969,16 @@ var ArrayField = ({
       children: /* @__PURE__ */ jsx8(
         SortableProvider,
         {
-          container: dndContainerRef,
-          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,
@@ -1980,7 +1990,6 @@ var ArrayField = ({
               })
             };
             setUi(newUi, false);
-            onChange(newValue, newUi);
             setLocalState({
               value: newValue,
               arrayState: __spreadProps(__spreadValues({}, arrayState), { items: newArrayStateItems })
@@ -1994,172 +2003,156 @@ var ArrayField = ({
                 addDisabled
               }),
               children: [
-                /* @__PURE__ */ jsx8(
-                  "div",
-                  {
-                    ref: dndContainerRef,
-                    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__ */ jsx8(
-                        Sortable,
+                localState.arrayState.items.length > 0 && /* @__PURE__ */ jsx8("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__ */ jsx8(
+                    Sortable,
+                    {
+                      id: _arrayId,
+                      index: i,
+                      disabled: readOnly,
+                      children: ({ status, ref, handleRef }) => /* @__PURE__ */ jsxs3(
+                        "div",
                         {
-                          id: _arrayId,
-                          index: i,
-                          disabled: readOnly,
-                          children: ({ status, ref }) => /* @__PURE__ */ jsxs3(
-                            "div",
-                            {
-                              ref,
-                              className: getClassNameItem({
-                                isExpanded: arrayState.openId === _arrayId,
-                                isDragging: status === "dragging",
-                                readOnly
-                              }),
-                              children: [
-                                /* @__PURE__ */ jsxs3(
-                                  "div",
-                                  {
-                                    onClick: (e) => {
-                                      if (isDragging) return;
-                                      e.preventDefault();
-                                      e.stopPropagation();
-                                      if (arrayState.openId === _arrayId) {
-                                        setUi(
-                                          mapArrayStateToUi({
-                                            openId: ""
-                                          })
-                                        );
-                                      } else {
-                                        setUi(
-                                          mapArrayStateToUi({
-                                            openId: _arrayId
-                                          })
-                                        );
-                                      }
-                                    },
-                                    className: getClassNameItem("summary"),
-                                    children: [
-                                      field.getItemSummary ? field.getItemSummary(data, i) : `Item #${_originalIndex}`,
-                                      /* @__PURE__ */ jsxs3("div", { className: getClassNameItem("rhs"), children: [
-                                        !readOnly && /* @__PURE__ */ jsxs3("div", { className: getClassNameItem("actions"), children: [
-                                          /* @__PURE__ */ jsx8("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx8(
-                                            IconButton,
-                                            {
-                                              type: "button",
-                                              disabled: !!addDisabled,
-                                              onClick: (e) => {
-                                                e.stopPropagation();
-                                                const existingValue = [...value || []];
-                                                existingValue.splice(
-                                                  i,
-                                                  0,
-                                                  existingValue[i]
-                                                );
-                                                onChange(
-                                                  existingValue,
-                                                  mapArrayStateToUi(
-                                                    regenerateArrayState(existingValue)
-                                                  )
-                                                );
-                                              },
-                                              title: "Duplicate",
-                                              children: /* @__PURE__ */ jsx8(Copy, { size: 16 })
-                                            }
-                                          ) }),
-                                          /* @__PURE__ */ jsx8("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx8(
-                                            IconButton,
-                                            {
-                                              type: "button",
-                                              disabled: field.min !== void 0 && field.min >= localState.arrayState.items.length,
-                                              onClick: (e) => {
-                                                e.stopPropagation();
-                                                const existingValue = [...value || []];
-                                                const existingItems = [
-                                                  ...arrayState.items || []
-                                                ];
-                                                existingValue.splice(i, 1);
-                                                existingItems.splice(i, 1);
-                                                onChange(
-                                                  existingValue,
-                                                  mapArrayStateToUi({
-                                                    items: existingItems
-                                                  })
-                                                );
-                                              },
-                                              title: "Delete",
-                                              children: /* @__PURE__ */ jsx8(Trash, { size: 16 })
-                                            }
-                                          ) })
-                                        ] }),
-                                        /* @__PURE__ */ jsx8("div", { children: /* @__PURE__ */ jsx8(DragIcon, {}) })
-                                      ] })
-                                    ]
+                          ref,
+                          className: getClassNameItem({
+                            isExpanded: arrayState.openId === _arrayId,
+                            isDragging: status === "dragging",
+                            readOnly
+                          }),
+                          children: [
+                            /* @__PURE__ */ jsxs3(
+                              "div",
+                              {
+                                ref: handleRef,
+                                onClick: (e) => {
+                                  if (isDragging) return;
+                                  e.preventDefault();
+                                  e.stopPropagation();
+                                  if (arrayState.openId === _arrayId) {
+                                    setUi(
+                                      mapArrayStateToUi({
+                                        openId: ""
+                                      })
+                                    );
+                                  } else {
+                                    setUi(
+                                      mapArrayStateToUi({
+                                        openId: _arrayId
+                                      })
+                                    );
                                   }
-                                ),
-                                /* @__PURE__ */ jsx8("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ jsx8(
-                                  "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__ */ jsx8(
-                                        NestedFieldProvider,
+                                },
+                                className: getClassNameItem("summary"),
+                                children: [
+                                  field.getItemSummary ? field.getItemSummary(data, i) : `Item #${_originalIndex}`,
+                                  /* @__PURE__ */ jsxs3("div", { className: getClassNameItem("rhs"), children: [
+                                    !readOnly && /* @__PURE__ */ jsxs3("div", { className: getClassNameItem("actions"), children: [
+                                      /* @__PURE__ */ jsx8("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx8(
+                                        IconButton,
                                         {
-                                          name: localIndexName,
-                                          wildcardName: localWildcardName,
-                                          subName,
-                                          readOnlyFields,
-                                          children: /* @__PURE__ */ jsx8(
-                                            AutoFieldPrivate,
-                                            {
-                                              name: subPath,
-                                              label: label2,
-                                              id: `${_arrayId}_${subName}`,
-                                              readOnly: subReadOnly,
-                                              field: __spreadProps(__spreadValues({}, subField), {
-                                                label: label2
-                                                // May be used by custom fields
-                                              }),
-                                              value: data[subName],
-                                              onChange: (val, ui) => {
-                                                onChange(
-                                                  replace(value, i, __spreadProps(__spreadValues({}, data), {
-                                                    [subName]: val
-                                                  })),
-                                                  ui
-                                                );
-                                              }
-                                            }
-                                          )
-                                        },
-                                        subPath
-                                      );
-                                    })
-                                  }
-                                ) })
-                              ]
-                            }
-                          )
-                        },
-                        _arrayId
-                      );
-                    })
-                  }
-                ),
+                                          type: "button",
+                                          disabled: !!addDisabled,
+                                          onClick: (e) => {
+                                            e.stopPropagation();
+                                            const existingValue = [...value || []];
+                                            existingValue.splice(
+                                              i,
+                                              0,
+                                              existingValue[i]
+                                            );
+                                            onChange(
+                                              existingValue,
+                                              mapArrayStateToUi(
+                                                regenerateArrayState(existingValue)
+                                              )
+                                            );
+                                          },
+                                          title: "Duplicate",
+                                          children: /* @__PURE__ */ jsx8(Copy, { size: 16 })
+                                        }
+                                      ) }),
+                                      /* @__PURE__ */ jsx8("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx8(
+                                        IconButton,
+                                        {
+                                          type: "button",
+                                          disabled: field.min !== void 0 && field.min >= localState.arrayState.items.length,
+                                          onClick: (e) => {
+                                            e.stopPropagation();
+                                            const existingValue = [...value || []];
+                                            const existingItems = [
+                                              ...arrayState.items || []
+                                            ];
+                                            existingValue.splice(i, 1);
+                                            existingItems.splice(i, 1);
+                                            onChange(
+                                              existingValue,
+                                              mapArrayStateToUi({
+                                                items: existingItems
+                                              })
+                                            );
+                                          },
+                                          title: "Delete",
+                                          children: /* @__PURE__ */ jsx8(Trash, { size: 16 })
+                                        }
+                                      ) })
+                                    ] }),
+                                    /* @__PURE__ */ jsx8("div", { children: /* @__PURE__ */ jsx8(DragIcon, {}) })
+                                  ] })
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ jsx8("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ jsx8("fieldset", { className: getClassNameItem("fieldset"), children: Object.keys(field.arrayFields).map((subName) => {
+                              const subField = field.arrayFields[subName];
+                              const indexName = `${name}[${i}]`;
+                              const subPath = `${indexName}.${subName}`;
+                              const localIndexName = `${localName}[${i}]`;
+                              const localWildcardName = `${localName}[*]`;
+                              const localSubPath = `${localIndexName}.${subName}`;
+                              const localWildcardSubPath = `${localWildcardName}.${subName}`;
+                              const subReadOnly = forceReadOnly ? forceReadOnly : typeof readOnlyFields[subPath] !== "undefined" ? readOnlyFields[localSubPath] : readOnlyFields[localWildcardSubPath];
+                              const label2 = subField.label || subName;
+                              return /* @__PURE__ */ jsx8(
+                                NestedFieldProvider,
+                                {
+                                  name: localIndexName,
+                                  wildcardName: localWildcardName,
+                                  subName,
+                                  readOnlyFields,
+                                  children: /* @__PURE__ */ jsx8(
+                                    AutoFieldPrivate,
+                                    {
+                                      name: subPath,
+                                      label: label2,
+                                      id: `${_arrayId}_${subName}`,
+                                      readOnly: subReadOnly,
+                                      field: __spreadProps(__spreadValues({}, subField), {
+                                        label: label2
+                                        // May be used by custom fields
+                                      }),
+                                      value: data[subName],
+                                      onChange: (val, ui) => {
+                                        onChange(
+                                          replace(value, i, __spreadProps(__spreadValues({}, data), {
+                                            [subName]: val
+                                          })),
+                                          ui
+                                        );
+                                      }
+                                    }
+                                  )
+                                },
+                                subPath
+                              );
+                            }) }) })
+                          ]
+                        }
+                      )
+                    },
+                    _arrayId
+                  );
+                }) }),
                 !addDisabled && /* @__PURE__ */ jsx8(
                   "button",
                   {
@@ -2254,7 +2247,7 @@ init_react_import();
 import {
   useMemo as useMemo2,
   useEffect as useEffect7,
-  useState as useState10,
+  useState as useState9,
   useCallback as useCallback4,
   isValidElement
 } from "react";
@@ -2265,7 +2258,7 @@ var styles_module_default6 = { "ExternalInput-actions": "_ExternalInput-actions_
 
 // components/Modal/index.tsx
 init_react_import();
-import { useEffect as useEffect5, useState as useState8 } from "react";
+import { useEffect as useEffect5, useState as useState7 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Modal/styles.module.css#css-module
 init_react_import();
@@ -2280,7 +2273,7 @@ var Modal = ({
   onClose,
   isOpen
 }) => {
-  const [rootEl, setRootEl] = useState8(null);
+  const [rootEl, setRootEl] = useState7(null);
   useEffect5(() => {
     setRootEl(document.getElementById("puck-portal-root"));
   }, []);
@@ -2328,7 +2321,7 @@ init_react_import();
 
 // components/Button/Button.tsx
 init_react_import();
-import { useEffect as useEffect6, useState as useState9 } from "react";
+import { useEffect as useEffect6, useState as useState8 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css#css-module
 init_react_import();
@@ -2378,7 +2371,7 @@ var Button = (_a) => {
     "size",
     "loading"
   ]);
-  const [loading, setLoading] = useState9(loadingProp);
+  const [loading, setLoading] = useState8(loadingProp);
   useEffect6(() => setLoading(loadingProp), [loadingProp]);
   const ElementType = href ? "a" : type ? "button" : "span";
   const dataAttrs = filterDataAttrs(props);
@@ -2434,12 +2427,12 @@ var ExternalInput = ({
     mapRow = (val) => val,
     filterFields
   } = field || {};
-  const [data, setData] = useState10([]);
-  const [isOpen, setOpen] = useState10(false);
-  const [isLoading, setIsLoading] = useState10(true);
+  const [data, setData] = useState9([]);
+  const [isOpen, setOpen] = useState9(false);
+  const [isLoading, setIsLoading] = useState9(true);
   const hasFilterFields = !!filterFields;
-  const [filters, setFilters] = useState10(field.initialFilters || {});
-  const [filtersToggled, setFiltersToggled] = useState10(hasFilterFields);
+  const [filters, setFilters] = useState9(field.initialFilters || {});
+  const [filtersToggled, setFiltersToggled] = useState9(hasFilterFields);
   const mappedData = useMemo2(() => {
     return data.map(mapRow);
   }, [data]);
@@ -2454,7 +2447,7 @@ var ExternalInput = ({
     }
     return Array.from(validKeys);
   }, [mappedData]);
-  const [searchQuery, setSearchQuery] = useState10(field.initialQuery || "");
+  const [searchQuery, setSearchQuery] = useState9(field.initialQuery || "");
   const search = useCallback4(
     (query, filters2) => __async(void 0, null, function* () {
       setIsLoading(true);
@@ -2923,7 +2916,7 @@ var ObjectField = ({
 
 // lib/use-safe-id.ts
 init_react_import();
-import React2, { useState as useState11 } from "react";
+import React2, { useState as useState10 } from "react";
 
 // lib/generate-id.ts
 init_react_import();
@@ -2935,7 +2928,7 @@ var useSafeId = () => {
   if (typeof React2.useId !== "undefined") {
     return React2.useId();
   }
-  const [id] = useState11(generateId());
+  const [id] = useState10(generateId());
   return id;
 };
 
@@ -3081,7 +3074,7 @@ function AutoFieldInternal(props) {
 function AutoFieldPrivate(props) {
   const { state } = useAppContext();
   const { value, onChange } = props;
-  const [localValue, setLocalValue] = useState12(value);
+  const [localValue, setLocalValue] = useState11(value);
   const onChangeDb = useDebouncedCallback(
     (val, ui) => {
       onChange(val, ui);
@@ -3128,7 +3121,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 { useMemo as useMemo9, useState as useState19 } from "react";
+import { useMemo as useMemo9, useState as useState18 } from "react";
 
 // components/DragDropContext/index.tsx
 init_react_import();
@@ -3139,7 +3132,7 @@ import {
   useContext as useContext7,
   useEffect as useEffect15,
   useRef as useRef4,
-  useState as useState18
+  useState as useState17
 } from "react";
 import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
 
@@ -3162,7 +3155,7 @@ import {
   useEffect as useEffect10,
   useMemo as useMemo7,
   useRef as useRef2,
-  useState as useState14
+  useState as useState13
 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
@@ -3197,7 +3190,7 @@ import {
   createContext as createContext3,
   useCallback as useCallback6,
   useMemo as useMemo6,
-  useState as useState13
+  useState as useState12
 } from "react";
 import { createStore as createStore2 } from "zustand";
 import { Fragment as Fragment5, jsx as jsx20 } from "react/jsx-runtime";
@@ -3222,11 +3215,11 @@ var DropZoneProvider = ({
   children,
   value
 }) => {
-  const [hoveringComponent, setHoveringComponent] = useState13();
-  const [areasWithZones, setAreasWithZones] = useState13(
+  const [hoveringComponent, setHoveringComponent] = useState12();
+  const [areasWithZones, setAreasWithZones] = useState12(
     {}
   );
-  const [activeZones, setActiveZones] = useState13({});
+  const [activeZones, setActiveZones] = useState12({});
   const { dispatch } = useAppContext();
   const registerZoneArea = useCallback6(
     (area) => {
@@ -3343,7 +3336,7 @@ var DraggableComponent = ({
     state
   } = useAppContext();
   const ctx = useContext5(dropZoneContext);
-  const [localZones, setLocalZones] = useState14({});
+  const [localZones, setLocalZones] = useState13({});
   const registerLocalZone = useCallback7(
     (zoneCompound2, active) => {
       var _a;
@@ -3368,7 +3361,7 @@ var DraggableComponent = ({
   );
   const containsActiveZone = Object.values(localZones).filter(Boolean).length > 0;
   const { path = [] } = ctx || {};
-  const [canDrag, setCanDrag] = useState14(false);
+  const [canDrag, setCanDrag] = useState13(false);
   useEffect10(() => {
     var _a;
     const item = getItem({ index, zone: zoneCompound }, state.data);
@@ -3385,7 +3378,7 @@ var DraggableComponent = ({
   );
   const canCollide = canDrag || userIsDragging;
   const disabled = !isEnabled || !canCollide;
-  const [dragAxis, setDragAxis] = useState14(userDragAxis || autoDragAxis);
+  const [dragAxis, setDragAxis] = useState13(userDragAxis || autoDragAxis);
   const { ref: sortableRef, status } = useSortableSafe({
     id,
     index,
@@ -3421,7 +3414,7 @@ var DraggableComponent = ({
     },
     [sortableRef]
   );
-  const [portalEl, setPortalEl] = useState14();
+  const [portalEl, setPortalEl] = useState13();
   useEffect10(() => {
     var _a, _b, _c;
     setPortalEl(
@@ -3448,7 +3441,7 @@ var DraggableComponent = ({
     };
     return style2;
   }, [ref.current]);
-  const [style, setStyle] = useState14();
+  const [style, setStyle] = useState13();
   const sync = useCallback7(() => {
     setStyle(getStyle());
   }, [ref.current, iframe]);
@@ -3526,7 +3519,7 @@ var DraggableComponent = ({
       zone: zoneCompound
     });
   }, [index, zoneCompound]);
-  const [hover, setHover] = useState14(false);
+  const [hover, setHover] = useState13(false);
   const indicativeHover = (ctx == null ? void 0 : ctx.hoveringComponent) === id;
   useEffect10(() => {
     if (!ref.current) {
@@ -3587,7 +3580,7 @@ var DraggableComponent = ({
       };
     }
   }, [disabled, ref]);
-  const [isVisible, setIsVisible] = useState14(false);
+  const [isVisible, setIsVisible] = useState13(false);
   useEffect10(() => {
     sync();
     if ((isSelected || hover || indicativeHover) && !userIsDragging) {
@@ -3604,10 +3597,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";
+            }
+          }
         }
       }
     },
@@ -3707,14 +3708,14 @@ var styles_module_default12 = { "DropZone": "_DropZone_kmkdc_1", "DropZone--isAc
 
 // components/DropZone/lib/use-min-empty-height.ts
 init_react_import();
-import { useEffect as useEffect11, useState as useState15 } from "react";
+import { useEffect as useEffect11, useState as useState14 } from "react";
 var useMinEmptyHeight = ({
   zoneCompound,
   userMinEmptyHeight,
   ref
 }) => {
-  const [prevHeight, setPrevHeight] = useState15(0);
-  const [isAnimating, setIsAnimating] = useState15(false);
+  const [prevHeight, setPrevHeight] = useState14(0);
+  const [isAnimating, setIsAnimating] = useState14(false);
   const { draggedItem, isZone } = useContextStore(ZoneStoreContext, (s) => {
     var _a, _b;
     return {
@@ -3756,7 +3757,7 @@ function assignRefs(refs, node) {
 
 // components/DropZone/lib/use-content-with-preview.ts
 init_react_import();
-import { useEffect as useEffect12, useState as useState16 } from "react";
+import { useEffect as useEffect12, useState as useState15 } from "react";
 
 // lib/dnd/use-rendered-callback.ts
 init_react_import();
@@ -3799,8 +3800,8 @@ var useContentWithPreview = (content, zoneCompound) => {
       ui: { isDragging }
     }
   } = useAppContext();
-  const [contentWithPreview, setContentWithPreview] = useState16(content);
-  const [localPreview, setLocalPreview] = useState16(
+  const [contentWithPreview, setContentWithPreview] = useState15(content);
+  const [localPreview, setLocalPreview] = useState15(
     preview
   );
   const updateContent = useRenderedCallback(
@@ -3849,13 +3850,13 @@ var useContentWithPreview = (content, zoneCompound) => {
 
 // components/DropZone/lib/use-drag-axis.ts
 init_react_import();
-import { useCallback as useCallback9, useEffect as useEffect13, useState as useState17 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect13, useState as useState16 } from "react";
 var GRID_DRAG_AXIS = "dynamic";
 var FLEX_ROW_DRAG_AXIS = "x";
 var DEFAULT_DRAG_AXIS = "y";
 var useDragAxis = (ref, collisionAxis) => {
   const { status } = useAppContext();
-  const [dragAxis, setDragAxis] = useState17(
+  const [dragAxis, setDragAxis] = useState16(
     collisionAxis || DEFAULT_DRAG_AXIS
   );
   const calculateDragAxis = useCallback9(() => {
@@ -4902,7 +4903,7 @@ var DragDropContextClient = ({
   const { data } = state;
   const debouncedParamsRef = useRef4(null);
   const tempDisableFallback = useTempDisableFallback(100);
-  const [zoneStore] = useState18(
+  const [zoneStore] = useState17(
     () => createStore3(() => ({
       zoneDepthIndex: {},
       nextZoneDepthIndex: {},
@@ -4971,7 +4972,7 @@ var DragDropContextClient = ({
       );
     }
   }, []);
-  const [plugins] = useState18(() => [
+  const [plugins] = useState17(() => [
     ...disableAutoScroll ? defaultPreset.plugins.filter((plugin) => plugin !== AutoScroller) : defaultPreset.plugins,
     createNestedDroppablePlugin(
       {
@@ -5019,8 +5020,8 @@ var DragDropContextClient = ({
     )
   ]);
   const sensors = useSensors();
-  const [dragListeners, setDragListeners] = useState18({});
-  const [pathData, setPathData] = useState18();
+  const [dragListeners, setDragListeners] = useState17({});
+  const [pathData, setPathData] = useState17();
   const dragMode = useRef4(null);
   const registerPath = useCallback11(
     (id2, selector, label) => {
@@ -5342,7 +5343,7 @@ var DrawerItem = ({
   isDragDisabled
 }) => {
   const resolvedId = id || name;
-  const [dynamicId, setDynamicId] = useState19(generateId(resolvedId));
+  const [dynamicId, setDynamicId] = useState18(generateId(resolvedId));
   if (typeof index !== "undefined") {
     console.error(
       "Warning: The `index` prop on Drawer.Item is deprecated and no longer required."
@@ -5408,7 +5409,7 @@ import {
   useEffect as useEffect24,
   useMemo as useMemo19,
   useReducer,
-  useState as useState27
+  useState as useState26
 } from "react";
 
 // components/SidebarSection/index.tsx
@@ -5609,7 +5610,7 @@ import { useMemo as useMemo12 } from "react";
 
 // lib/use-resolved-fields.ts
 init_react_import();
-import { useCallback as useCallback13, useEffect as useEffect17, useMemo as useMemo11, useRef as useRef6, useState as useState20 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect17, useMemo as useMemo11, useRef as useRef6, useState as useState19 } from "react";
 
 // lib/use-parent.ts
 init_react_import();
@@ -5672,12 +5673,12 @@ var useResolvedFields = ({
     [selectedItem, rootFields, componentConfig == null ? void 0 : componentConfig.fields]
   );
   const rootProps = data.root.props || data.root;
-  const [lastSelectedData, setLastSelectedData] = useState20({});
-  const [resolvedFields, setResolvedFields] = useState20({
+  const [lastSelectedData, setLastSelectedData] = useState19({});
+  const [resolvedFields, setResolvedFields] = useState19({
     fields: defaultFields,
     id: selectedItem == null ? void 0 : selectedItem.props.id
   });
-  const [fieldsLoading, setFieldsLoading] = useState20(false);
+  const [fieldsLoading, setFieldsLoading] = useState19(false);
   const lastFields = useRef6(defaultFields);
   const defaultResolveFields = (_componentData, _params) => defaultFields;
   const componentData = useMemo11(
@@ -5921,7 +5922,7 @@ init_react_import();
 
 // lib/use-component-list.tsx
 init_react_import();
-import { useEffect as useEffect18, useState as useState21 } from "react";
+import { useEffect as useEffect18, useState as useState20 } from "react";
 
 // components/ComponentList/index.tsx
 init_react_import();
@@ -5988,7 +5989,7 @@ ComponentList.Item = ComponentListItem;
 // lib/use-component-list.tsx
 import { jsx as jsx29 } from "react/jsx-runtime";
 var useComponentList = (config, ui) => {
-  const [componentList, setComponentList] = useState21();
+  const [componentList, setComponentList] = useState20();
   useEffect18(() => {
     var _a, _b, _c;
     if (Object.keys(ui.componentList).length > 0) {
@@ -6077,7 +6078,7 @@ import {
   createContext as createContext5,
   useContext as useContext10,
   useEffect as useEffect19,
-  useState as useState22
+  useState as useState21
 } from "react";
 import hash from "object-hash";
 import { createPortal as createPortal3 } from "react-dom";
@@ -6301,9 +6302,9 @@ function AutoFrame(_a) {
     "onStylesLoaded",
     "frameRef"
   ]);
-  const [loaded, setLoaded] = useState22(false);
-  const [ctx, setCtx] = useState22({});
-  const [mountTarget, setMountTarget] = useState22();
+  const [loaded, setLoaded] = useState21(false);
+  const [ctx, setCtx] = useState21({});
+  const [mountTarget, setMountTarget] = useState21();
   useEffect19(() => {
     var _a2;
     if (frameRef.current) {
@@ -6822,19 +6823,19 @@ function usePuckHistory({
 
 // lib/use-history-store.ts
 init_react_import();
-import { useState as useState23 } from "react";
+import { useState as useState22 } from "react";
 import { useDebouncedCallback as useDebouncedCallback3 } from "use-debounce";
 var EMPTY_HISTORY_INDEX = 0;
 function useHistoryStore(initialHistory) {
   var _a, _b;
-  const [histories, setHistories] = useState23(
+  const [histories, setHistories] = useState22(
     (_a = initialHistory == null ? void 0 : initialHistory.histories) != null ? _a : []
   );
   const updateHistories = (histories2) => {
     setHistories(histories2);
     setIndex(histories2.length - 1);
   };
-  const [index, setIndex] = useState23(
+  const [index, setIndex] = useState22(
     (_b = initialHistory == null ? void 0 : initialHistory.index) != null ? _b : EMPTY_HISTORY_INDEX
   );
   const hasPast = index > EMPTY_HISTORY_INDEX;
@@ -6999,12 +7000,12 @@ import {
   useEffect as useEffect22,
   useMemo as useMemo17,
   useRef as useRef9,
-  useState as useState25
+  useState as useState24
 } from "react";
 
 // components/ViewportControls/index.tsx
 init_react_import();
-import { useEffect as useEffect21, useMemo as useMemo16, useState as useState24 } from "react";
+import { useEffect as useEffect21, useMemo as useMemo16, useState as useState23 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
 init_react_import();
@@ -7027,7 +7028,7 @@ var ViewportButton = ({
   onClick
 }) => {
   const { state } = useAppContext();
-  const [isActive, setIsActive] = useState24(false);
+  const [isActive, setIsActive] = useState23(false);
   useEffect21(() => {
     setIsActive(width === state.ui.viewports.current.width);
   }, [width, state.ui.viewports.current.width]);
@@ -7188,7 +7189,7 @@ var Canvas = () => {
   const { dispatch, state, overrides, setUi, zoomConfig, setZoomConfig } = useAppContext();
   const { ui } = state;
   const frameRef = useRef9(null);
-  const [showTransition, setShowTransition] = useState25(false);
+  const [showTransition, setShowTransition] = useState24(false);
   const defaultRender = useMemo17(() => {
     const PuckDefault = ({ children }) => /* @__PURE__ */ jsx37(Fragment13, { children });
     return PuckDefault;
@@ -7243,7 +7244,7 @@ var Canvas = () => {
       window.removeEventListener("resize", cb);
     };
   }, []);
-  const [showLoader, setShowLoader] = useState25(false);
+  const [showLoader, setShowLoader] = useState24(false);
   useEffect22(() => {
     setTimeout(() => {
       setShowLoader(true);
@@ -7373,10 +7374,10 @@ var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx38(Fragment14, { chil
 
 // lib/use-inject-css.ts
 init_react_import();
-import { useEffect as useEffect23, useState as useState26 } from "react";
+import { useEffect as useEffect23, useState as useState25 } from "react";
 var styles = ``;
 var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
-  const [el, setEl] = useState26();
+  const [el, setEl] = useState25();
   useEffect23(() => {
     setEl(document.createElement("style"));
   }, []);
@@ -7460,7 +7461,7 @@ function Puck({
     waitForStyles: true
   }, _iframe);
   useInjectGlobalCss(iframe.enabled);
-  const [generatedAppState] = useState27(() => {
+  const [generatedAppState] = useState26(() => {
     var _a2, _b2, _c, _d, _e, _f, _g, _h, _i;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
@@ -7532,7 +7533,7 @@ function Puck({
     histories,
     index: initialHistoryIndex
   });
-  const [reducer] = useState27(
+  const [reducer] = useState26(
     () => createReducer({
       config,
       record: historyStore.record,
@@ -7550,7 +7551,7 @@ function Puck({
     historyStore,
     iframeEnabled: (_a = _iframe == null ? void 0 : _iframe.enabled) != null ? _a : true
   });
-  const [menuOpen, setMenuOpen] = useState27(false);
+  const [menuOpen, setMenuOpen] = useState26(false);
   const { itemSelector, leftSideBarVisible, rightSideBarVisible } = ui;
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
   useEffect24(() => {
@@ -7637,7 +7638,7 @@ function Puck({
     () => loadedOverrides.headerActions || defaultHeaderActionsRender,
     [loadedOverrides]
   );
-  const [mounted, setMounted] = useState27(false);
+  const [mounted, setMounted] = useState26(false);
   useEffect24(() => {
     setMounted(true);
   }, []);
@@ -7824,40 +7825,6 @@ 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;
-}
-
 // lib/use-puck.ts
 init_react_import();
 var usePuck = () => {