@measured/puck 0.19.0-canary.59cb0d9 → 0.19.0-canary.61c8658

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();
@@ -2566,6 +2566,7 @@ 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,
@@ -2580,7 +2581,7 @@ var SortableProvider = ({
       modifiers: [
         RestrictToElement.configure({
           element() {
-            return document.querySelector("[data-dnd-container]");
+            return container.current;
           }
         })
       ],
@@ -2693,6 +2694,7 @@ var ArrayField = ({
   value: _value,
   name,
   label,
+  labelIcon,
   readOnly,
   id,
   Label: Label2 = (props) => /* @__PURE__ */ jsx7("div", __spreadValues({}, props))
@@ -2757,6 +2759,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 +2772,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,168 +2808,173 @@ 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",
+                /* @__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 }) => /* @__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__ */ 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) => {
-                                  const subField = field.arrayFields[subName];
-                                  const indexName = `${name}[${i}]`;
-                                  const subPath = `${indexName}.${subName}`;
-                                  const localIndexName = `${localName}[${i}]`;
-                                  const localWildcardName = `${localName}[*]`;
-                                  const localSubPath = `${localIndexName}.${subName}`;
-                                  const localWildcardSubPath = `${localWildcardName}.${subName}`;
-                                  const subReadOnly = forceReadOnly ? forceReadOnly : typeof readOnlyFields[subPath] !== "undefined" ? readOnlyFields[localSubPath] : readOnlyFields[localWildcardSubPath];
-                                  const label2 = subField.label || subName;
-                                  return /* @__PURE__ */ jsx7(
-                                    NestedFieldProvider,
-                                    {
-                                      name: localIndexName,
-                                      wildcardName: localWildcardName,
-                                      subName,
-                                      readOnlyFields,
-                                      children: /* @__PURE__ */ jsx7(
-                                        AutoFieldPrivate,
-                                        {
-                                          name: 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
-                                            );
-                                          }
-                                        }
-                                      )
+                                ),
+                                /* @__PURE__ */ jsx7("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ jsx7(
+                                  "fieldset",
+                                  {
+                                    className: getClassNameItem("fieldset"),
+                                    onPointerDownCapture: (e) => {
+                                      e.stopPropagation();
                                     },
-                                    subPath
-                                  );
-                                })
-                              }
-                            ) })
-                          ]
-                        }
-                      )
-                    },
-                    _arrayId
-                  );
-                }) }),
+                                    children: Object.keys(field.arrayFields).map((subName) => {
+                                      const subField = field.arrayFields[subName];
+                                      const indexName = `${name}[${i}]`;
+                                      const subPath = `${indexName}.${subName}`;
+                                      const localIndexName = `${localName}[${i}]`;
+                                      const localWildcardName = `${localName}[*]`;
+                                      const localSubPath = `${localIndexName}.${subName}`;
+                                      const localWildcardSubPath = `${localWildcardName}.${subName}`;
+                                      const subReadOnly = forceReadOnly ? forceReadOnly : typeof readOnlyFields[subPath] !== "undefined" ? readOnlyFields[localSubPath] : readOnlyFields[localWildcardSubPath];
+                                      const label2 = subField.label || subName;
+                                      return /* @__PURE__ */ jsx7(
+                                        NestedFieldProvider,
+                                        {
+                                          name: localIndexName,
+                                          wildcardName: localWildcardName,
+                                          subName,
+                                          readOnlyFields,
+                                          children: /* @__PURE__ */ jsx7(
+                                            AutoFieldPrivate,
+                                            {
+                                              name: 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__ */ jsx7(
                   "button",
                   {
@@ -3004,6 +3013,7 @@ var DefaultField = ({
   value: _value,
   name,
   label,
+  labelIcon,
   Label: Label2,
   id
 }) => {
@@ -3012,7 +3022,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 +3458,7 @@ var ExternalField = ({
   value,
   name,
   label,
+  labelIcon,
   Label: Label2,
   id,
   readOnly
@@ -3465,27 +3476,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 +3533,7 @@ var RadioField = ({
   name,
   id,
   label,
+  labelIcon,
   Label: Label2
 }) => {
   const flatOptions = useMemo3(
@@ -3526,7 +3546,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 +3593,7 @@ var SelectField = ({
   field,
   onChange,
   label,
+  labelIcon,
   Label: Label2,
   value,
   name,
@@ -3590,7 +3611,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 +3655,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 +3700,7 @@ var ObjectField = ({
   value,
   name,
   label,
+  labelIcon,
   Label: Label2,
   readOnly,
   id
@@ -3683,7 +3714,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 +3831,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 +3857,7 @@ function AutoFieldInternal(props) {
   const mergedProps = __spreadProps(__spreadValues({}, props), {
     field,
     label,
+    labelIcon,
     Label: Label2,
     id: resolvedId
   });
@@ -3887,10 +3920,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 +3959,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 +3969,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 +3982,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 +3992,7 @@ import {
   useContext as useContext5,
   useEffect as useEffect12,
   useMemo as useMemo7,
-  useRef,
+  useRef as useRef2,
   useState as useState11
 } from "react";
 
@@ -4194,7 +4229,7 @@ var DraggableComponent = ({
     }
   });
   const thisIsDragging = status === "dragging";
-  const ref = useRef(null);
+  const ref = useRef2(null);
   const refSetter = useCallback6(
     (el) => {
       sortableRef(el);
@@ -4871,7 +4906,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 +5408,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 +5430,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 +5551,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 +5884,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 +6366,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 +6718,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 +7150,7 @@ import {
   useCallback as useCallback14,
   useEffect as useEffect22,
   useMemo as useMemo16,
-  useRef as useRef5,
+  useRef as useRef6,
   useState as useState20
 } from "react";
 
@@ -7328,7 +7363,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 });