@measured/puck 0.18.3-canary.9e8e47b → 0.18.3-canary.b44056f

package/dist/index.js

@@ -1301,7 +1301,8 @@ function useDraggableSafe(input) {
 function useSortableSafe(input) {
   if (typeof window === "undefined") {
     return { ref: () => {
-    }, status: "idle" };
+    }, status: "idle", handleRef: () => {
+    } };
   }
   return (0, import_sortable.useSortable)(input);
 }
@@ -1576,23 +1577,26 @@ function patchWindow(window2) {
 
 // lib/dnd/use-sensors.ts
 var import_utilities2 = require("@dnd-kit/dom/utilities");
-var useSensors = () => {
+var useSensors = ({
+  other,
+  mouse,
+  touch
+} = {
+  touch: { delay: { value: 200, tolerance: 10 } },
+  other: { delay: { value: 200, tolerance: 10 }, distance: { value: 5 } }
+}) => {
   const [sensors] = (0, import_react9.useState)(() => [
     PointerSensor.configure({
       activationConstraints(event, source) {
         var _a;
         const { pointerType, target } = event;
         if (pointerType === "mouse" && (0, import_utilities2.isElement)(target) && (source.handle === target || ((_a = source.handle) == null ? void 0 : _a.contains(target)))) {
-          return void 0;
+          return mouse;
         }
-        const delay = { value: 200, tolerance: 10 };
         if (pointerType === "touch") {
-          return { delay };
+          return touch;
         }
-        return {
-          delay,
-          distance: { value: 5 }
-        };
+        return other;
       }
     })
   ]);
@@ -1938,13 +1942,16 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
 var import_modifiers = require("@dnd-kit/dom/modifiers");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var SortableProvider = ({
+  container,
   children,
   onDragStart,
   onDragEnd,
   onMove
 }) => {
   const [move, setMove] = (0, import_react11.useState)({ source: -1, target: -1 });
-  const sensors = useSensors();
+  const sensors = useSensors({
+    mouse: { distance: { value: 5 } }
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     import_react10.DragDropProvider,
     {
@@ -1952,7 +1959,7 @@ var SortableProvider = ({
       modifiers: [
         import_modifiers.RestrictToElement.configure({
           element() {
-            return document.querySelector("[data-dnd-container]");
+            return container.current;
           }
         })
       ],
@@ -1999,7 +2006,11 @@ var Sortable = ({
   children,
   type = "item"
 }) => {
-  const { ref: sortableRef, status } = useSortableSafe({
+  const {
+    ref: sortableRef,
+    status,
+    handleRef
+  } = useSortableSafe({
     id,
     type,
     index,
@@ -2007,7 +2018,7 @@ var Sortable = ({
     data: { index },
     collisionDetector: createDynamicCollisionDetector("y")
   });
-  return children({ status, ref: sortableRef });
+  return children({ status, ref: sortableRef, handleRef });
 };
 
 // components/AutoField/context.tsx
@@ -2126,6 +2137,7 @@ var ArrayField = ({
     }
   }, []);
   const [isDragging, setIsDragging] = (0, import_react13.useState)(false);
+  const dndContainerRef = (0, import_react13.useRef)(null);
   const forceReadOnly = getPermissions({ item: selectedItem }).edit === false;
   if (field.type !== "array" || !field.arrayFields) {
     return null;
@@ -2141,6 +2153,7 @@ var ArrayField = ({
       children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         SortableProvider,
         {
+          container: dndContainerRef,
           onDragStart: () => setIsDragging(true),
           onDragEnd: () => setIsDragging(false),
           onMove: (move) => {
@@ -2169,117 +2182,114 @@ var ArrayField = ({
                 hasItems: Array.isArray(value) && value.length > 0,
                 addDisabled
               }),
-              onClick: (e) => {
-                e.preventDefault();
-              },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName5("inner"), "data-dnd-container": true, children: localState.arrayState.items.map((item, i) => {
-                  const { _arrayId = `${id}-${i}`, _originalIndex = i } = item;
-                  const data = Array.from(localState.value || [])[i] || {};
-                  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                    Sortable,
-                    {
-                      id: _arrayId,
-                      index: i,
-                      disabled: readOnly,
-                      children: ({ status, ref }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                        "div",
+                localState.arrayState.items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  "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__ */ (0, import_jsx_runtime8.jsx)(
+                        Sortable,
                         {
-                          ref,
-                          className: getClassNameItem({
-                            isExpanded: arrayState.openId === _arrayId,
-                            isDragging: status === "dragging",
-                            readOnly
-                          }),
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                              "div",
-                              {
-                                onClick: (e) => {
-                                  if (isDragging) return;
-                                  e.preventDefault();
-                                  e.stopPropagation();
-                                  if (arrayState.openId === _arrayId) {
-                                    setUi(
-                                      mapArrayStateToUi({
-                                        openId: ""
-                                      })
-                                    );
-                                  } else {
-                                    setUi(
-                                      mapArrayStateToUi({
-                                        openId: _arrayId
-                                      })
-                                    );
+                          id: _arrayId,
+                          index: i,
+                          disabled: readOnly,
+                          children: ({ status, ref, handleRef }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                            "div",
+                            {
+                              ref,
+                              className: getClassNameItem({
+                                isExpanded: arrayState.openId === _arrayId,
+                                isDragging: status === "dragging",
+                                readOnly
+                              }),
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                                  "div",
+                                  {
+                                    ref: handleRef,
+                                    onClick: (e) => {
+                                      if (isDragging) return;
+                                      e.preventDefault();
+                                      e.stopPropagation();
+                                      if (arrayState.openId === _arrayId) {
+                                        setUi(
+                                          mapArrayStateToUi({
+                                            openId: ""
+                                          })
+                                        );
+                                      } else {
+                                        setUi(
+                                          mapArrayStateToUi({
+                                            openId: _arrayId
+                                          })
+                                        );
+                                      }
+                                    },
+                                    className: getClassNameItem("summary"),
+                                    children: [
+                                      field.getItemSummary ? field.getItemSummary(data, i) : `Item #${_originalIndex}`,
+                                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassNameItem("rhs"), children: [
+                                        !readOnly && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassNameItem("actions"), children: [
+                                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                                            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__ */ (0, import_jsx_runtime8.jsx)(Copy, { size: 16 })
+                                            }
+                                          ) }),
+                                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                                            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__ */ (0, import_jsx_runtime8.jsx)(Trash, { size: 16 })
+                                            }
+                                          ) })
+                                        ] }),
+                                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DragIcon, {}) })
+                                      ] })
+                                    ]
                                   }
-                                },
-                                className: getClassNameItem("summary"),
-                                children: [
-                                  field.getItemSummary ? field.getItemSummary(data, i) : `Item #${_originalIndex}`,
-                                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassNameItem("rhs"), children: [
-                                    !readOnly && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassNameItem("actions"), children: [
-                                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                                        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__ */ (0, import_jsx_runtime8.jsx)(Copy, { size: 16 })
-                                        }
-                                      ) }),
-                                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                                        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__ */ (0, import_jsx_runtime8.jsx)(Trash, { size: 16 })
-                                        }
-                                      ) })
-                                    ] }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DragIcon, {}) })
-                                  ] })
-                                ]
-                              }
-                            ),
-                            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                              "fieldset",
-                              {
-                                className: getClassNameItem("fieldset"),
-                                onPointerDownCapture: (e) => {
-                                  e.stopPropagation();
-                                },
-                                children: Object.keys(field.arrayFields).map((subName) => {
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("fieldset", { className: getClassNameItem("fieldset"), children: Object.keys(field.arrayFields).map((subName) => {
                                   const subField = field.arrayFields[subName];
                                   const indexName = `${name}[${i}]`;
                                   const subPath = `${indexName}.${subName}`;
@@ -2321,16 +2331,16 @@ var ArrayField = ({
                                     },
                                     subPath
                                   );
-                                })
-                              }
-                            ) })
-                          ]
-                        }
-                      )
-                    },
-                    _arrayId
-                  );
-                }) }),
+                                }) }) })
+                              ]
+                            }
+                          )
+                        },
+                        _arrayId
+                      );
+                    })
+                  }
+                ),
                 !addDisabled && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "button",
                   {
@@ -3254,10 +3264,13 @@ function AutoFieldPrivate(props) {
     50,
     { leading: true }
   );
-  const onChangeLocal = (0, import_react21.useCallback)((val, ui) => {
-    setLocalValue(val);
-    onChangeDb(val, ui);
-  }, []);
+  const onChangeLocal = (0, import_react21.useCallback)(
+    (val, ui) => {
+      setLocalValue(val);
+      onChangeDb(val, ui);
+    },
+    [onChange]
+  );
   (0, import_react21.useEffect)(() => {
     if (state.ui.field.focus !== props.name) {
       setLocalValue(value);
@@ -3740,10 +3753,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";
+            }
+          }
         }
       }
     },
@@ -5034,7 +5055,7 @@ var DragDropContextClient = ({
   disableAutoScroll
 }) => {
   const { state, config, dispatch, resolveData } = useAppContext();
-  const id = (0, import_react32.useId)();
+  const id = useSafeId();
   const { data } = state;
   const debouncedParamsRef = (0, import_react32.useRef)(null);
   const tempDisableFallback = useTempDisableFallback(100);
@@ -5517,7 +5538,7 @@ var Drawer = ({
       "Warning: The `direction` prop on Drawer is deprecated and no longer required to achieve multi-directional dragging."
     );
   }
-  const id = (0, import_react33.useId)();
+  const id = useSafeId();
   const { ref } = useDroppableSafe({
     id,
     type: "void",

package/dist/index.mjs

@@ -674,7 +674,7 @@ var IconButton = ({
 };
 
 // components/AutoField/fields/ArrayField/index.tsx
-import { useCallback as useCallback3, useEffect as useEffect4, useState as useState7 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useRef, useState as useState7 } from "react";
 
 // components/DragIcon/index.tsx
 init_react_import();
@@ -1110,7 +1110,8 @@ function useDraggableSafe(input) {
 function useSortableSafe(input) {
   if (typeof window === "undefined") {
     return { ref: () => {
-    }, status: "idle" };
+    }, status: "idle", handleRef: () => {
+    } };
   }
   return useSortable(input);
 }
@@ -1394,23 +1395,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;
       }
     })
   ]);
@@ -1759,13 +1763,16 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
 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,
     {
@@ -1773,7 +1780,7 @@ var SortableProvider = ({
       modifiers: [
         RestrictToElement.configure({
           element() {
-            return document.querySelector("[data-dnd-container]");
+            return container.current;
           }
         })
       ],
@@ -1820,7 +1827,11 @@ var Sortable = ({
   children,
   type = "item"
 }) => {
-  const { ref: sortableRef, status } = useSortableSafe({
+  const {
+    ref: sortableRef,
+    status,
+    handleRef
+  } = useSortableSafe({
     id,
     type,
     index,
@@ -1828,7 +1839,7 @@ var Sortable = ({
     data: { index },
     collisionDetector: createDynamicCollisionDetector("y")
   });
-  return children({ status, ref: sortableRef });
+  return children({ status, ref: sortableRef, handleRef });
 };
 
 // components/AutoField/context.tsx
@@ -1947,6 +1958,7 @@ var ArrayField = ({
     }
   }, []);
   const [isDragging, setIsDragging] = useState7(false);
+  const dndContainerRef = useRef(null);
   const forceReadOnly = getPermissions({ item: selectedItem }).edit === false;
   if (field.type !== "array" || !field.arrayFields) {
     return null;
@@ -1962,6 +1974,7 @@ var ArrayField = ({
       children: /* @__PURE__ */ jsx8(
         SortableProvider,
         {
+          container: dndContainerRef,
           onDragStart: () => setIsDragging(true),
           onDragEnd: () => setIsDragging(false),
           onMove: (move) => {
@@ -1990,117 +2003,114 @@ var ArrayField = ({
                 hasItems: Array.isArray(value) && value.length > 0,
                 addDisabled
               }),
-              onClick: (e) => {
-                e.preventDefault();
-              },
               children: [
-                /* @__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 }) => /* @__PURE__ */ jsxs3(
-                        "div",
+                localState.arrayState.items.length > 0 && /* @__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,
                         {
-                          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
-                                      })
-                                    );
+                          id: _arrayId,
+                          index: i,
+                          disabled: readOnly,
+                          children: ({ status, ref, handleRef }) => /* @__PURE__ */ jsxs3(
+                            "div",
+                            {
+                              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
+                                          })
+                                        );
+                                      }
+                                    },
+                                    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, {}) })
+                                      ] })
+                                    ]
                                   }
-                                },
-                                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, {}) })
-                                  ] })
-                                ]
-                              }
-                            ),
-                            /* @__PURE__ */ jsx8("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ jsx8(
-                              "fieldset",
-                              {
-                                className: getClassNameItem("fieldset"),
-                                onPointerDownCapture: (e) => {
-                                  e.stopPropagation();
-                                },
-                                children: Object.keys(field.arrayFields).map((subName) => {
+                                ),
+                                /* @__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}`;
@@ -2142,16 +2152,16 @@ var ArrayField = ({
                                     },
                                     subPath
                                   );
-                                })
-                              }
-                            ) })
-                          ]
-                        }
-                      )
-                    },
-                    _arrayId
-                  );
-                }) }),
+                                }) }) })
+                              ]
+                            }
+                          )
+                        },
+                        _arrayId
+                      );
+                    })
+                  }
+                ),
                 !addDisabled && /* @__PURE__ */ jsx8(
                   "button",
                   {
@@ -3081,10 +3091,13 @@ function AutoFieldPrivate(props) {
     50,
     { leading: true }
   );
-  const onChangeLocal = useCallback5((val, ui) => {
-    setLocalValue(val);
-    onChangeDb(val, ui);
-  }, []);
+  const onChangeLocal = useCallback5(
+    (val, ui) => {
+      setLocalValue(val);
+      onChangeDb(val, ui);
+    },
+    [onChange]
+  );
   useEffect9(() => {
     if (state.ui.field.focus !== props.name) {
       setLocalValue(value);
@@ -3117,7 +3130,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 useState19 } from "react";
+import { useMemo as useMemo9, useState as useState19 } from "react";
 
 // components/DragDropContext/index.tsx
 init_react_import();
@@ -3127,8 +3140,7 @@ import {
   useCallback as useCallback11,
   useContext as useContext7,
   useEffect as useEffect15,
-  useId,
-  useRef as useRef3,
+  useRef as useRef4,
   useState as useState18
 } from "react";
 import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
@@ -3141,7 +3153,7 @@ import {
   useContext as useContext6,
   useEffect as useEffect14,
   useMemo as useMemo8,
-  useRef as useRef2
+  useRef as useRef3
 } from "react";
 
 // components/DraggableComponent/index.tsx
@@ -3151,7 +3163,7 @@ import {
   useContext as useContext5,
   useEffect as useEffect10,
   useMemo as useMemo7,
-  useRef,
+  useRef as useRef2,
   useState as useState14
 } from "react";
 
@@ -3401,7 +3413,7 @@ var DraggableComponent = ({
     }
   });
   const thisIsDragging = status === "dragging";
-  const ref = useRef(null);
+  const ref = useRef2(null);
   const refSetter = useCallback7(
     (el) => {
       sortableRef(el);
@@ -3594,10 +3606,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";
+            }
+          }
         }
       }
     },
@@ -3947,7 +3967,7 @@ var DropZoneEdit = forwardRef3(
       }
       return data.content || [];
     }, [data, zoneCompound]);
-    const ref = useRef2(null);
+    const ref = useRef3(null);
     const acceptsTarget = useCallback10(
       (componentType) => {
         if (!componentType) {
@@ -4870,7 +4890,7 @@ function useDragListener(type, fn, deps = []) {
 }
 var AREA_CHANGE_DEBOUNCE_MS = 100;
 var useTempDisableFallback = (timeout3) => {
-  const lastFallbackDisable = useRef3(null);
+  const lastFallbackDisable = useRef4(null);
   return useCallback11((manager) => {
     collisionStore.setState({ fallbackEnabled: false });
     const fallbackId = generateId();
@@ -4888,9 +4908,9 @@ var DragDropContextClient = ({
   disableAutoScroll
 }) => {
   const { state, config, dispatch, resolveData } = useAppContext();
-  const id = useId();
+  const id = useSafeId();
   const { data } = state;
-  const debouncedParamsRef = useRef3(null);
+  const debouncedParamsRef = useRef4(null);
   const tempDisableFallback = useTempDisableFallback(100);
   const [zoneStore] = useState18(
     () => createStore3(() => ({
@@ -5011,7 +5031,7 @@ var DragDropContextClient = ({
   const sensors = useSensors();
   const [dragListeners, setDragListeners] = useState18({});
   const [pathData, setPathData] = useState18();
-  const dragMode = useRef3(null);
+  const dragMode = useRef4(null);
   const registerPath = useCallback11(
     (id2, selector, label) => {
       const [area] = getZoneId(selector.zone);
@@ -5040,7 +5060,7 @@ var DragDropContextClient = ({
     },
     [data, setPathData]
   );
-  const initialSelector = useRef3(void 0);
+  const initialSelector = useRef4(void 0);
   return /* @__PURE__ */ jsx23("div", { id, children: /* @__PURE__ */ jsx23(
     dragListenerContext.Provider,
     {
@@ -5371,7 +5391,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",
@@ -5599,7 +5619,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 useRef5, useState as useState20 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect17, useMemo as useMemo11, useRef as useRef6, useState as useState20 } from "react";
 
 // lib/use-parent.ts
 init_react_import();
@@ -5627,9 +5647,9 @@ var useParent = () => {
 
 // lib/use-on-value-change.ts
 init_react_import();
-import { useRef as useRef4, useEffect as useEffect16 } from "react";
+import { useRef as useRef5, useEffect as useEffect16 } from "react";
 function useOnValueChange(value, onChange, compare = Object.is, deps = []) {
-  const tracked = useRef4(value);
+  const tracked = useRef5(value);
   useEffect16(() => {
     const oldValue = tracked.current;
     if (!compare(value, oldValue)) {
@@ -5668,7 +5688,7 @@ var useResolvedFields = ({
     id: selectedItem == null ? void 0 : selectedItem.props.id
   });
   const [fieldsLoading, setFieldsLoading] = useState20(false);
-  const lastFields = useRef5(defaultFields);
+  const lastFields = useRef6(defaultFields);
   const defaultResolveFields = (_componentData, _params) => defaultFields;
   const componentData = useMemo11(
     () => selectedItem ? selectedItem : { props: rootProps, readOnly: data.root.readOnly || {} },
@@ -6059,7 +6079,7 @@ var Components = () => {
 
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-import { useCallback as useCallback14, useEffect as useEffect20, useRef as useRef7, useMemo as useMemo14 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect20, useRef as useRef8, useMemo as useMemo14 } from "react";
 
 // components/AutoFrame/index.tsx
 init_react_import();
@@ -6433,7 +6453,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
   );
   const Frame = useMemo14(() => overrides.iframe, [overrides]);
   const rootProps = state.data.root.props || state.data.root;
-  const ref = useRef7(null);
+  const ref = useRef8(null);
   useBubbleIframeEvents(ref);
   const inner = state.ui.previewMode === "edit" ? /* @__PURE__ */ jsx33(
     Page,
@@ -6988,7 +7008,7 @@ import {
   useCallback as useCallback16,
   useEffect as useEffect22,
   useMemo as useMemo17,
-  useRef as useRef8,
+  useRef as useRef9,
   useState as useState25
 } from "react";
 
@@ -7177,7 +7197,7 @@ var Canvas = () => {
   const { status, iframe } = useAppContext();
   const { dispatch, state, overrides, setUi, zoomConfig, setZoomConfig } = useAppContext();
   const { ui } = state;
-  const frameRef = useRef8(null);
+  const frameRef = useRef9(null);
   const [showTransition, setShowTransition] = useState25(false);
   const defaultRender = useMemo17(() => {
     const PuckDefault = ({ children }) => /* @__PURE__ */ jsx37(Fragment13, { children });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.18.3-canary.9e8e47b",
+  "version": "0.18.3-canary.b44056f",
   "author": "Measured Corporation Ltd <hello@measured.co>",
   "repository": "measuredco/puck",
   "bugs": "https://github.com/measuredco/puck/issues",
@@ -75,7 +75,7 @@
     "react-hotkeys-hook": "^4.6.1",
     "use-debounce": "^9.0.4",
     "uuid": "^9.0.1",
-    "zustand": "^5.0.2"
+    "zustand": "^4.5.6"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0"