@measured/puck 0.19.0-canary.85ee736 → 0.19.0-canary.af4f756

package/dist/index.mjs

@@ -676,7 +676,7 @@ var IconButton = ({
 };
 
 // components/AutoField/fields/ArrayField/index.tsx
-import { useCallback as useCallback2, useEffect as useEffect6, useState as useState4 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect6, useRef, useState as useState4 } from "react";
 
 // components/DragIcon/index.tsx
 init_react_import();
@@ -1917,7 +1917,8 @@ function useDraggableSafe(input) {
 function useSortableSafe(input) {
   if (typeof window === "undefined") {
     return { ref: () => {
-    }, status: "idle" };
+    }, status: "idle", handleRef: () => {
+    } };
   }
   return useSortable(input);
 }
@@ -2201,23 +2202,26 @@ function patchWindow(window2) {
 
 // lib/dnd/use-sensors.ts
 import { isElement as isElement2 } from "@dnd-kit/dom/utilities";
-var useSensors = () => {
+var useSensors = ({
+  other,
+  mouse,
+  touch
+} = {
+  touch: { delay: { value: 200, tolerance: 10 } },
+  other: { delay: { value: 200, tolerance: 10 }, distance: { value: 5 } }
+}) => {
   const [sensors] = useState2(() => [
     PointerSensor.configure({
       activationConstraints(event, source) {
         var _a;
         const { pointerType, target } = event;
         if (pointerType === "mouse" && isElement2(target) && (source.handle === target || ((_a = source.handle) == null ? void 0 : _a.contains(target)))) {
-          return void 0;
+          return mouse;
         }
-        const delay = { value: 200, tolerance: 10 };
         if (pointerType === "touch") {
-          return { delay };
+          return touch;
         }
-        return {
-          delay,
-          distance: { value: 5 }
-        };
+        return other;
       }
     })
   ]);
@@ -2566,13 +2570,16 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
 import { RestrictToElement } from "@dnd-kit/dom/modifiers";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var SortableProvider = ({
+  container,
   children,
   onDragStart,
   onDragEnd,
   onMove
 }) => {
   const [move, setMove] = useState3({ source: -1, target: -1 });
-  const sensors = useSensors();
+  const sensors = useSensors({
+    mouse: { distance: { value: 5 } }
+  });
   return /* @__PURE__ */ jsx5(
     DragDropProvider,
     {
@@ -2580,7 +2587,7 @@ var SortableProvider = ({
       modifiers: [
         RestrictToElement.configure({
           element() {
-            return document.querySelector("[data-dnd-container]");
+            return container.current;
           }
         })
       ],
@@ -2627,7 +2634,11 @@ var Sortable = ({
   children,
   type = "item"
 }) => {
-  const { ref: sortableRef, status } = useSortableSafe({
+  const {
+    ref: sortableRef,
+    status,
+    handleRef
+  } = useSortableSafe({
     id,
     type,
     index,
@@ -2635,7 +2646,7 @@ var Sortable = ({
     data: { index },
     collisionDetector: createDynamicCollisionDetector("y")
   });
-  return children({ status, ref: sortableRef });
+  return children({ status, ref: sortableRef, handleRef });
 };
 
 // components/AutoField/context.tsx
@@ -2693,6 +2704,7 @@ var ArrayField = ({
   value: _value,
   name,
   label,
+  labelIcon,
   readOnly,
   id,
   Label: Label2 = (props) => /* @__PURE__ */ jsx7("div", __spreadValues({}, props))
@@ -2757,6 +2769,7 @@ var ArrayField = ({
     }
   }, []);
   const [isDragging, setIsDragging] = useState4(false);
+  const dndContainerRef = useRef(null);
   const canEdit = useAppStore(
     (s) => s.permissions.getPermissions({ item: s.selectedItem }).edit
   );
@@ -2769,12 +2782,13 @@ var ArrayField = ({
     Label2,
     {
       label: label || name,
-      icon: /* @__PURE__ */ jsx7(List, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ jsx7(List, { size: 16 }),
       el: "div",
       readOnly,
       children: /* @__PURE__ */ jsx7(
         SortableProvider,
         {
+          container: dndContainerRef,
           onDragStart: () => setIsDragging(true),
           onDragEnd: () => setIsDragging(false),
           onMove: (move) => {
@@ -2804,117 +2818,114 @@ var ArrayField = ({
                 hasItems: Array.isArray(value) && value.length > 0,
                 addDisabled
               }),
-              onClick: (e) => {
-                e.preventDefault();
-              },
               children: [
-                /* @__PURE__ */ jsx7("div", { className: getClassName5("inner"), "data-dnd-container": true, children: localState.arrayState.items.map((item, i) => {
-                  const { _arrayId = `${id}-${i}`, _originalIndex = i } = item;
-                  const data = Array.from(localState.value || [])[i] || {};
-                  return /* @__PURE__ */ jsx7(
-                    Sortable,
-                    {
-                      id: _arrayId,
-                      index: i,
-                      disabled: readOnly,
-                      children: ({ status, ref }) => /* @__PURE__ */ jsxs3(
-                        "div",
+                localState.arrayState.items.length > 0 && /* @__PURE__ */ jsx7(
+                  "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__ */ jsx7(
+                        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__ */ jsx7("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx7(
+                                            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__ */ jsx7(Copy, { size: 16 })
+                                            }
+                                          ) }),
+                                          /* @__PURE__ */ jsx7("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx7(
+                                            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__ */ jsx7(Trash, { size: 16 })
+                                            }
+                                          ) })
+                                        ] }),
+                                        /* @__PURE__ */ jsx7("div", { children: /* @__PURE__ */ jsx7(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__ */ jsx7("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx7(
-                                        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__ */ jsx7(Copy, { size: 16 })
-                                        }
-                                      ) }),
-                                      /* @__PURE__ */ jsx7("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx7(
-                                        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__ */ jsx7(Trash, { size: 16 })
-                                        }
-                                      ) })
-                                    ] }),
-                                    /* @__PURE__ */ jsx7("div", { children: /* @__PURE__ */ jsx7(DragIcon, {}) })
-                                  ] })
-                                ]
-                              }
-                            ),
-                            /* @__PURE__ */ jsx7("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ jsx7(
-                              "fieldset",
-                              {
-                                className: getClassNameItem("fieldset"),
-                                onPointerDownCapture: (e) => {
-                                  e.stopPropagation();
-                                },
-                                children: Object.keys(field.arrayFields).map((subName) => {
+                                ),
+                                /* @__PURE__ */ jsx7("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ jsx7("fieldset", { className: getClassNameItem("fieldset"), children: Object.keys(field.arrayFields).map((subName) => {
                                   const subField = field.arrayFields[subName];
                                   const indexName = `${name}[${i}]`;
                                   const subPath = `${indexName}.${subName}`;
@@ -2956,16 +2967,16 @@ var ArrayField = ({
                                     },
                                     subPath
                                   );
-                                })
-                              }
-                            ) })
-                          ]
-                        }
-                      )
-                    },
-                    _arrayId
-                  );
-                }) }),
+                                }) }) })
+                              ]
+                            }
+                          )
+                        },
+                        _arrayId
+                      );
+                    })
+                  }
+                ),
                 !addDisabled && /* @__PURE__ */ jsx7(
                   "button",
                   {
@@ -3004,6 +3015,7 @@ var DefaultField = ({
   value: _value,
   name,
   label,
+  labelIcon,
   Label: Label2,
   id
 }) => {
@@ -3012,7 +3024,7 @@ var DefaultField = ({
     Label2,
     {
       label: label || name,
-      icon: /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      icon: labelIcon || /* @__PURE__ */ jsxs4(Fragment2, { children: [
         field.type === "text" && /* @__PURE__ */ jsx8(Type, { size: 16 }),
         field.type === "number" && /* @__PURE__ */ jsx8(Hash, { size: 16 })
       ] }),
@@ -3448,6 +3460,7 @@ var ExternalField = ({
   value,
   name,
   label,
+  labelIcon,
   Label: Label2,
   id,
   readOnly
@@ -3465,27 +3478,35 @@ var ExternalField = ({
   if (field.type !== "external") {
     return null;
   }
-  return /* @__PURE__ */ jsx13(Label2, { label: label || name, icon: /* @__PURE__ */ jsx13(Link, { size: 16 }), el: "div", children: /* @__PURE__ */ jsx13(
-    ExternalInput,
+  return /* @__PURE__ */ jsx13(
+    Label2,
     {
-      name,
-      field: __spreadProps(__spreadValues({}, validField), {
-        // DEPRECATED
-        placeholder: ((_a = deprecatedField.adaptor) == null ? void 0 : _a.name) ? `Select from ${deprecatedField.adaptor.name}` : validField.placeholder || "Select data",
-        mapProp: ((_b = deprecatedField.adaptor) == null ? void 0 : _b.mapProp) || validField.mapProp,
-        mapRow: validField.mapRow,
-        fetchList: ((_c = deprecatedField.adaptor) == null ? void 0 : _c.fetchList) ? () => __async(void 0, null, function* () {
-          return yield deprecatedField.adaptor.fetchList(
-            deprecatedField.adaptorParams
-          );
-        }) : validField.fetchList
-      }),
-      onChange,
-      value,
-      id,
-      readOnly
+      label: label || name,
+      icon: labelIcon || /* @__PURE__ */ jsx13(Link, { size: 16 }),
+      el: "div",
+      children: /* @__PURE__ */ jsx13(
+        ExternalInput,
+        {
+          name,
+          field: __spreadProps(__spreadValues({}, validField), {
+            // DEPRECATED
+            placeholder: ((_a = deprecatedField.adaptor) == null ? void 0 : _a.name) ? `Select from ${deprecatedField.adaptor.name}` : validField.placeholder || "Select data",
+            mapProp: ((_b = deprecatedField.adaptor) == null ? void 0 : _b.mapProp) || validField.mapProp,
+            mapRow: validField.mapRow,
+            fetchList: ((_c = deprecatedField.adaptor) == null ? void 0 : _c.fetchList) ? () => __async(void 0, null, function* () {
+              return yield deprecatedField.adaptor.fetchList(
+                deprecatedField.adaptorParams
+              );
+            }) : validField.fetchList
+          }),
+          onChange,
+          value,
+          id,
+          readOnly
+        }
+      )
     }
-  ) });
+  );
 };
 
 // components/AutoField/fields/RadioField/index.tsx
@@ -3514,6 +3535,7 @@ var RadioField = ({
   name,
   id,
   label,
+  labelIcon,
   Label: Label2
 }) => {
   const flatOptions = useMemo3(
@@ -3526,7 +3548,7 @@ var RadioField = ({
   return /* @__PURE__ */ jsx14(
     Label2,
     {
-      icon: /* @__PURE__ */ jsx14(CircleCheckBig, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ jsx14(CircleCheckBig, { size: 16 }),
       label: label || name,
       readOnly,
       el: "div",
@@ -3573,6 +3595,7 @@ var SelectField = ({
   field,
   onChange,
   label,
+  labelIcon,
   Label: Label2,
   value,
   name,
@@ -3590,7 +3613,7 @@ var SelectField = ({
     Label2,
     {
       label: label || name,
-      icon: /* @__PURE__ */ jsx15(ChevronDown, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ jsx15(ChevronDown, { size: 16 }),
       readOnly,
       children: /* @__PURE__ */ jsx15(
         "select",
@@ -3634,24 +3657,33 @@ var TextareaField = ({
   value,
   name,
   label,
+  labelIcon,
   Label: Label2,
   id
 }) => {
-  return /* @__PURE__ */ jsx16(Label2, { label: label || name, icon: /* @__PURE__ */ jsx16(Type, { size: 16 }), readOnly, children: /* @__PURE__ */ jsx16(
-    "textarea",
+  return /* @__PURE__ */ jsx16(
+    Label2,
     {
-      id,
-      className: getClassName13("input"),
-      autoComplete: "off",
-      name,
-      value: typeof value === "undefined" ? "" : value,
-      onChange: (e) => onChange(e.currentTarget.value),
+      label: label || name,
+      icon: labelIcon || /* @__PURE__ */ jsx16(Type, { size: 16 }),
       readOnly,
-      tabIndex: readOnly ? -1 : void 0,
-      rows: 5,
-      placeholder: field.type === "textarea" ? field.placeholder : void 0
+      children: /* @__PURE__ */ jsx16(
+        "textarea",
+        {
+          id,
+          className: getClassName13("input"),
+          autoComplete: "off",
+          name,
+          value: typeof value === "undefined" ? "" : value,
+          onChange: (e) => onChange(e.currentTarget.value),
+          readOnly,
+          tabIndex: readOnly ? -1 : void 0,
+          rows: 5,
+          placeholder: field.type === "textarea" ? field.placeholder : void 0
+        }
+      )
     }
-  ) });
+  );
 };
 
 // components/AutoField/fields/ObjectField/index.tsx
@@ -3670,6 +3702,7 @@ var ObjectField = ({
   value,
   name,
   label,
+  labelIcon,
   Label: Label2,
   readOnly,
   id
@@ -3683,7 +3716,7 @@ var ObjectField = ({
     Label2,
     {
       label: label || name,
-      icon: /* @__PURE__ */ jsx17(EllipsisVertical, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ jsx17(EllipsisVertical, { size: 16 }),
       el: "div",
       readOnly,
       children: /* @__PURE__ */ jsx17("div", { className: getClassName14(), children: /* @__PURE__ */ jsx17("fieldset", { className: getClassName14("fieldset"), children: Object.keys(field.objectFields).map((subName) => {
@@ -3800,6 +3833,7 @@ function AutoFieldInternal(props) {
   const { id, Label: Label2 = FieldLabelInternal } = props;
   const field = props.field;
   const label = field.label;
+  const labelIcon = field.labelIcon;
   const defaultId = useSafeId();
   const resolvedId = id || defaultId;
   const defaultFields = {
@@ -3825,6 +3859,7 @@ function AutoFieldInternal(props) {
   const mergedProps = __spreadProps(__spreadValues({}, props), {
     field,
     label,
+    labelIcon,
     Label: Label2,
     id: resolvedId
   });
@@ -3887,10 +3922,13 @@ function AutoFieldPrivate(props) {
   const isFocused = useAppStore((s) => s.state.ui.field.focus === props.name);
   const { value, onChange } = props;
   const [localValue, setLocalValue] = useState9(value);
-  const onChangeLocal = useCallback4((val, ui) => {
-    setLocalValue(val);
-    onChange(val, ui);
-  }, []);
+  const onChangeLocal = useCallback4(
+    (val, ui) => {
+      setLocalValue(val);
+      onChange(val, ui);
+    },
+    [onChange]
+  );
   useEffect11(() => {
     if (!isFocused) {
       setLocalValue(value);
@@ -3923,7 +3961,7 @@ init_react_import();
 var styles_module_default10 = { "Drawer": "_Drawer_fkqfo_1", "Drawer-draggable": "_Drawer-draggable_fkqfo_8", "Drawer-draggableBg": "_Drawer-draggableBg_fkqfo_12", "Drawer-draggableFg": "_Drawer-draggableFg_fkqfo_21", "DrawerItem-draggable": "_DrawerItem-draggable_fkqfo_25", "DrawerItem--disabled": "_DrawerItem--disabled_fkqfo_38", "DrawerItem": "_DrawerItem_fkqfo_25", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_fkqfo_48", "DrawerItem-name": "_DrawerItem-name_fkqfo_66" };
 
 // components/Drawer/index.tsx
-import { useId as useId2, useMemo as useMemo9, useState as useState16 } from "react";
+import { useMemo as useMemo9, useState as useState16 } from "react";
 
 // components/DragDropContext/index.tsx
 init_react_import();
@@ -3933,8 +3971,7 @@ import {
   useCallback as useCallback10,
   useContext as useContext7,
   useEffect as useEffect17,
-  useId,
-  useRef as useRef3,
+  useRef as useRef4,
   useState as useState15
 } from "react";
 import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
@@ -3947,7 +3984,7 @@ import {
   useContext as useContext6,
   useEffect as useEffect16,
   useMemo as useMemo8,
-  useRef as useRef2
+  useRef as useRef3
 } from "react";
 
 // components/DraggableComponent/index.tsx
@@ -3957,7 +3994,7 @@ import {
   useContext as useContext5,
   useEffect as useEffect12,
   useMemo as useMemo7,
-  useRef,
+  useRef as useRef2,
   useState as useState11
 } from "react";
 
@@ -4194,7 +4231,7 @@ var DraggableComponent = ({
     }
   });
   const thisIsDragging = status === "dragging";
-  const ref = useRef(null);
+  const ref = useRef2(null);
   const refSetter = useCallback6(
     (el) => {
       sortableRef(el);
@@ -4871,7 +4908,7 @@ var DropZoneEdit = forwardRef3(
         return content.map(({ props }) => props.id);
       })
     );
-    const ref = useRef2(null);
+    const ref = useRef3(null);
     const acceptsTarget = useCallback9(
       (componentType) => {
         if (!componentType) {
@@ -5373,7 +5410,7 @@ function useDragListener(type, fn, deps = []) {
 }
 var AREA_CHANGE_DEBOUNCE_MS = 100;
 var useTempDisableFallback = (timeout3) => {
-  const lastFallbackDisable = useRef3(null);
+  const lastFallbackDisable = useRef4(null);
   return useCallback10((manager) => {
     collisionStore.setState({ fallbackEnabled: false });
     const fallbackId = generateId();
@@ -5395,8 +5432,8 @@ var DragDropContextClient = ({
   const resolveData2 = useAppStore((s) => s.resolveData);
   const metadata = useAppStore((s) => s.metadata);
   const appStore = useAppStoreApi();
-  const id = useId();
-  const debouncedParamsRef = useRef3(null);
+  const id = useSafeId();
+  const debouncedParamsRef = useRef4(null);
   const tempDisableFallback = useTempDisableFallback(100);
   const [zoneStore] = useState15(
     () => createStore3(() => ({
@@ -5516,8 +5553,8 @@ var DragDropContextClient = ({
   ]);
   const sensors = useSensors();
   const [dragListeners, setDragListeners] = useState15({});
-  const dragMode = useRef3(null);
-  const initialSelector = useRef3(void 0);
+  const dragMode = useRef4(null);
+  const initialSelector = useRef4(void 0);
   return /* @__PURE__ */ jsx23("div", { id, children: /* @__PURE__ */ jsx23(
     dragListenerContext.Provider,
     {
@@ -5849,7 +5886,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",
@@ -6331,7 +6368,7 @@ var Components = () => {
 
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-import { useCallback as useCallback12, useEffect as useEffect20, useRef as useRef4, useMemo as useMemo13 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect20, useRef as useRef5, useMemo as useMemo13 } from "react";
 
 // components/AutoFrame/index.tsx
 init_react_import();
@@ -6683,7 +6720,7 @@ var Preview3 = ({ id = "puck-preview" }) => {
   );
   const Frame = useMemo13(() => overrides.iframe, [overrides]);
   const rootProps = root.props || root;
-  const ref = useRef4(null);
+  const ref = useRef5(null);
   useBubbleIframeEvents(ref);
   const inner = !renderData ? /* @__PURE__ */ jsx32(
     Page,
@@ -7115,7 +7152,7 @@ import {
   useCallback as useCallback14,
   useEffect as useEffect22,
   useMemo as useMemo16,
-  useRef as useRef5,
+  useRef as useRef6,
   useState as useState20
 } from "react";
 
@@ -7328,7 +7365,7 @@ var Canvas = () => {
       viewports: s.state.ui.viewports
     }))
   );
-  const frameRef = useRef5(null);
+  const frameRef = useRef6(null);
   const [showTransition, setShowTransition] = useState20(false);
   const defaultRender = useMemo16(() => {
     const PuckDefault = ({ children }) => /* @__PURE__ */ jsx36(Fragment13, { children });