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

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { F as FieldProps, a as Field, D as DropZoneProps, C as Config, U as UserGenerics, b as Data, c as UiState, O as OnAction, P as Permissions, d as Plugin, e as Overrides, f as PuckAction, V as Viewports, I as IframeConfig, g as InitialHistory, M as Metadata, h as DefaultComponentProps, i as DefaultRootFieldProps, H as History, j as ComponentData, k as Fields, A as AppState, l as ComponentConfig } from './resolve-all-data-wwgDuTnC.mjs';
-export { Q as Adaptor, K as ArrayField, t as ArrayState, a2 as AsFieldProps, B as BaseData, E as BaseField, y as ComponentDataMap, z as Content, Y as CustomField, $ as DefaultRootProps, _ as DefaultRootRenderProps, m as Direction, n as DragAxis, X as ExternalField, W as ExternalFieldWithAdaptor, a4 as ExtractPropsFromConfig, a5 as ExtractRootPropsFromConfig, r as FieldRenderFunctions, s as ItemWithId, x as MappedItem, N as NumberField, L as ObjectField, q as OverrideKey, u as PuckComponent, Z as PuckContext, J as RadioField, w as RootData, R as RootDataWithProps, v as RootDataWithoutProps, S as SelectField, T as TextField, G as TextareaField, o as Viewport, a3 as WithChildren, a0 as WithId, a1 as WithPuckProps, p as overrideKeys, a6 as resolveAllData } from './resolve-all-data-wwgDuTnC.mjs';
+import { F as FieldProps, a as Field, D as DropZoneProps, C as Config, U as UserGenerics, b as Data, c as UiState, O as OnAction, P as Permissions, d as Plugin, e as Overrides, f as PuckAction, V as Viewports, I as IframeConfig, g as InitialHistory, M as Metadata, h as DefaultComponentProps, i as DefaultRootFieldProps, H as History, j as ComponentData, k as Fields, A as AppState, l as ComponentConfig } from './resolve-all-data-DleIzc4N.mjs';
+export { Q as Adaptor, K as ArrayField, t as ArrayState, a2 as AsFieldProps, B as BaseData, E as BaseField, y as ComponentDataMap, z as Content, Y as CustomField, $ as DefaultRootProps, _ as DefaultRootRenderProps, m as Direction, n as DragAxis, X as ExternalField, W as ExternalFieldWithAdaptor, a4 as ExtractPropsFromConfig, a5 as ExtractRootPropsFromConfig, r as FieldRenderFunctions, s as ItemWithId, x as MappedItem, N as NumberField, L as ObjectField, q as OverrideKey, u as PuckComponent, Z as PuckContext, J as RadioField, w as RootData, R as RootDataWithProps, v as RootDataWithoutProps, S as SelectField, T as TextField, G as TextareaField, o as Viewport, a3 as WithChildren, a0 as WithId, a1 as WithPuckProps, p as overrideKeys, a6 as resolveAllData } from './resolve-all-data-DleIzc4N.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import react__default, { ReactNode, SyntheticEvent, ReactElement } from 'react';

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { F as FieldProps, a as Field, D as DropZoneProps, C as Config, U as UserGenerics, b as Data, c as UiState, O as OnAction, P as Permissions, d as Plugin, e as Overrides, f as PuckAction, V as Viewports, I as IframeConfig, g as InitialHistory, M as Metadata, h as DefaultComponentProps, i as DefaultRootFieldProps, H as History, j as ComponentData, k as Fields, A as AppState, l as ComponentConfig } from './resolve-all-data-wwgDuTnC.js';
-export { Q as Adaptor, K as ArrayField, t as ArrayState, a2 as AsFieldProps, B as BaseData, E as BaseField, y as ComponentDataMap, z as Content, Y as CustomField, $ as DefaultRootProps, _ as DefaultRootRenderProps, m as Direction, n as DragAxis, X as ExternalField, W as ExternalFieldWithAdaptor, a4 as ExtractPropsFromConfig, a5 as ExtractRootPropsFromConfig, r as FieldRenderFunctions, s as ItemWithId, x as MappedItem, N as NumberField, L as ObjectField, q as OverrideKey, u as PuckComponent, Z as PuckContext, J as RadioField, w as RootData, R as RootDataWithProps, v as RootDataWithoutProps, S as SelectField, T as TextField, G as TextareaField, o as Viewport, a3 as WithChildren, a0 as WithId, a1 as WithPuckProps, p as overrideKeys, a6 as resolveAllData } from './resolve-all-data-wwgDuTnC.js';
+import { F as FieldProps, a as Field, D as DropZoneProps, C as Config, U as UserGenerics, b as Data, c as UiState, O as OnAction, P as Permissions, d as Plugin, e as Overrides, f as PuckAction, V as Viewports, I as IframeConfig, g as InitialHistory, M as Metadata, h as DefaultComponentProps, i as DefaultRootFieldProps, H as History, j as ComponentData, k as Fields, A as AppState, l as ComponentConfig } from './resolve-all-data-DleIzc4N.js';
+export { Q as Adaptor, K as ArrayField, t as ArrayState, a2 as AsFieldProps, B as BaseData, E as BaseField, y as ComponentDataMap, z as Content, Y as CustomField, $ as DefaultRootProps, _ as DefaultRootRenderProps, m as Direction, n as DragAxis, X as ExternalField, W as ExternalFieldWithAdaptor, a4 as ExtractPropsFromConfig, a5 as ExtractRootPropsFromConfig, r as FieldRenderFunctions, s as ItemWithId, x as MappedItem, N as NumberField, L as ObjectField, q as OverrideKey, u as PuckComponent, Z as PuckContext, J as RadioField, w as RootData, R as RootDataWithProps, v as RootDataWithoutProps, S as SelectField, T as TextField, G as TextareaField, o as Viewport, a3 as WithChildren, a0 as WithId, a1 as WithPuckProps, p as overrideKeys, a6 as resolveAllData } from './resolve-all-data-DleIzc4N.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import react__default, { ReactNode, SyntheticEvent, ReactElement } from 'react';

package/dist/index.js

@@ -2121,7 +2121,8 @@ function useDraggableSafe(input) {
 function useSortableSafe(input) {
   if (typeof window === "undefined") {
     return { ref: () => {
-    }, status: "idle" };
+    }, status: "idle", handleRef: () => {
+    } };
   }
   return (0, import_sortable.useSortable)(input);
 }
@@ -2396,23 +2397,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_react12.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;
       }
     })
   ]);
@@ -2758,13 +2762,16 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
 var import_modifiers = require("@dnd-kit/dom/modifiers");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var SortableProvider = ({
+  container,
   children,
   onDragStart,
   onDragEnd,
   onMove
 }) => {
   const [move, setMove] = (0, import_react14.useState)({ source: -1, target: -1 });
-  const sensors = useSensors();
+  const sensors = useSensors({
+    mouse: { distance: { value: 5 } }
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_react13.DragDropProvider,
     {
@@ -2772,7 +2779,7 @@ var SortableProvider = ({
       modifiers: [
         import_modifiers.RestrictToElement.configure({
           element() {
-            return document.querySelector("[data-dnd-container]");
+            return container.current;
           }
         })
       ],
@@ -2819,7 +2826,11 @@ var Sortable = ({
   children,
   type = "item"
 }) => {
-  const { ref: sortableRef, status } = useSortableSafe({
+  const {
+    ref: sortableRef,
+    status,
+    handleRef
+  } = useSortableSafe({
     id,
     type,
     index,
@@ -2827,7 +2838,7 @@ var Sortable = ({
     data: { index },
     collisionDetector: createDynamicCollisionDetector("y")
   });
-  return children({ status, ref: sortableRef });
+  return children({ status, ref: sortableRef, handleRef });
 };
 
 // components/AutoField/context.tsx
@@ -2885,6 +2896,7 @@ var ArrayField = ({
   value: _value,
   name,
   label,
+  labelIcon,
   readOnly,
   id,
   Label: Label2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", __spreadValues({}, props))
@@ -2949,6 +2961,7 @@ var ArrayField = ({
     }
   }, []);
   const [isDragging, setIsDragging] = (0, import_react16.useState)(false);
+  const dndContainerRef = (0, import_react16.useRef)(null);
   const canEdit = useAppStore(
     (s) => s.permissions.getPermissions({ item: s.selectedItem }).edit
   );
@@ -2961,12 +2974,13 @@ var ArrayField = ({
     Label2,
     {
       label: label || name,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(List, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(List, { size: 16 }),
       el: "div",
       readOnly,
       children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         SortableProvider,
         {
+          container: dndContainerRef,
           onDragStart: () => setIsDragging(true),
           onDragEnd: () => setIsDragging(false),
           onMove: (move) => {
@@ -2996,117 +3010,114 @@ var ArrayField = ({
                 hasItems: Array.isArray(value) && value.length > 0,
                 addDisabled
               }),
-              onClick: (e) => {
-                e.preventDefault();
-              },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsx)(
-                    Sortable,
-                    {
-                      id: _arrayId,
-                      index: i,
-                      disabled: readOnly,
-                      children: ({ status, ref }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-                        "div",
+                localState.arrayState.items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsx)(
+                        Sortable,
                         {
-                          ref,
-                          className: getClassNameItem({
-                            isExpanded: arrayState.openId === _arrayId,
-                            isDragging: status === "dragging",
-                            readOnly
-                          }),
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsxs)(
+                            "div",
+                            {
+                              ref,
+                              className: getClassNameItem({
+                                isExpanded: arrayState.openId === _arrayId,
+                                isDragging: status === "dragging",
+                                readOnly
+                              }),
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsxs)("div", { className: getClassNameItem("rhs"), children: [
+                                        !readOnly && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: getClassNameItem("actions"), children: [
+                                          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsx)(Copy, { size: 16 })
+                                            }
+                                          ) }),
+                                          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsx)(Trash, { size: 16 })
+                                            }
+                                          ) })
+                                        ] }),
+                                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DragIcon, {}) })
+                                      ] })
+                                    ]
                                   }
-                                },
-                                className: getClassNameItem("summary"),
-                                children: [
-                                  field.getItemSummary ? field.getItemSummary(data, i) : `Item #${_originalIndex}`,
-                                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: getClassNameItem("rhs"), children: [
-                                    !readOnly && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: getClassNameItem("actions"), children: [
-                                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsx)(Copy, { size: 16 })
-                                        }
-                                      ) }),
-                                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsx)(Trash, { size: 16 })
-                                        }
-                                      ) })
-                                    ] }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DragIcon, {}) })
-                                  ] })
-                                ]
-                              }
-                            ),
-                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                              "fieldset",
-                              {
-                                className: getClassNameItem("fieldset"),
-                                onPointerDownCapture: (e) => {
-                                  e.stopPropagation();
-                                },
-                                children: Object.keys(field.arrayFields).map((subName) => {
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ (0, import_jsx_runtime7.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}`;
@@ -3148,16 +3159,16 @@ var ArrayField = ({
                                     },
                                     subPath
                                   );
-                                })
-                              }
-                            ) })
-                          ]
-                        }
-                      )
-                    },
-                    _arrayId
-                  );
-                }) }),
+                                }) }) })
+                              ]
+                            }
+                          )
+                        },
+                        _arrayId
+                      );
+                    })
+                  }
+                ),
                 !addDisabled && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "button",
                   {
@@ -3196,6 +3207,7 @@ var DefaultField = ({
   value: _value,
   name,
   label,
+  labelIcon,
   Label: Label2,
   id
 }) => {
@@ -3204,7 +3216,7 @@ var DefaultField = ({
     Label2,
     {
       label: label || name,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
         field.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Type, { size: 16 }),
         field.type === "number" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Hash, { size: 16 })
       ] }),
@@ -3634,6 +3646,7 @@ var ExternalField = ({
   value,
   name,
   label,
+  labelIcon,
   Label: Label2,
   id,
   readOnly
@@ -3651,27 +3664,35 @@ var ExternalField = ({
   if (field.type !== "external") {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Label2, { label: label || name, icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Link, { size: 16 }), el: "div", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    ExternalInput,
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    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__ */ (0, import_jsx_runtime13.jsx)(Link, { size: 16 }),
+      el: "div",
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        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
@@ -3700,6 +3721,7 @@ var RadioField = ({
   name,
   id,
   label,
+  labelIcon,
   Label: Label2
 }) => {
   const flatOptions = (0, import_react21.useMemo)(
@@ -3712,7 +3734,7 @@ var RadioField = ({
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     Label2,
     {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CircleCheckBig, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CircleCheckBig, { size: 16 }),
       label: label || name,
       readOnly,
       el: "div",
@@ -3759,6 +3781,7 @@ var SelectField = ({
   field,
   onChange,
   label,
+  labelIcon,
   Label: Label2,
   value,
   name,
@@ -3776,7 +3799,7 @@ var SelectField = ({
     Label2,
     {
       label: label || name,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronDown, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronDown, { size: 16 }),
       readOnly,
       children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "select",
@@ -3820,24 +3843,33 @@ var TextareaField = ({
   value,
   name,
   label,
+  labelIcon,
   Label: Label2,
   id
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label2, { label: label || name, icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Type, { size: 16 }), readOnly, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    "textarea",
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    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__ */ (0, import_jsx_runtime16.jsx)(Type, { size: 16 }),
       readOnly,
-      tabIndex: readOnly ? -1 : void 0,
-      rows: 5,
-      placeholder: field.type === "textarea" ? field.placeholder : void 0
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "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
@@ -3856,6 +3888,7 @@ var ObjectField = ({
   value,
   name,
   label,
+  labelIcon,
   Label: Label2,
   readOnly,
   id
@@ -3869,7 +3902,7 @@ var ObjectField = ({
     Label2,
     {
       label: label || name,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(EllipsisVertical, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(EllipsisVertical, { size: 16 }),
       el: "div",
       readOnly,
       children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: getClassName14(), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("fieldset", { className: getClassName14("fieldset"), children: Object.keys(field.objectFields).map((subName) => {
@@ -3986,6 +4019,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 = {
@@ -4011,6 +4045,7 @@ function AutoFieldInternal(props) {
   const mergedProps = __spreadProps(__spreadValues({}, props), {
     field,
     label,
+    labelIcon,
     Label: Label2,
     id: resolvedId
   });
@@ -4073,10 +4108,13 @@ function AutoFieldPrivate(props) {
   const isFocused = useAppStore((s) => s.state.ui.field.focus === props.name);
   const { value, onChange } = props;
   const [localValue, setLocalValue] = (0, import_react24.useState)(value);
-  const onChangeLocal = (0, import_react24.useCallback)((val, ui) => {
-    setLocalValue(val);
-    onChange(val, ui);
-  }, []);
+  const onChangeLocal = (0, import_react24.useCallback)(
+    (val, ui) => {
+      setLocalValue(val);
+      onChange(val, ui);
+    },
+    [onChange]
+  );
   (0, import_react24.useEffect)(() => {
     if (!isFocused) {
       setLocalValue(value);
@@ -5554,7 +5592,7 @@ var DragDropContextClient = ({
   const resolveData2 = useAppStore((s) => s.resolveData);
   const metadata = useAppStore((s) => s.metadata);
   const appStore = useAppStoreApi();
-  const id = (0, import_react36.useId)();
+  const id = useSafeId();
   const debouncedParamsRef = (0, import_react36.useRef)(null);
   const tempDisableFallback = useTempDisableFallback(100);
   const [zoneStore] = (0, import_react36.useState)(
@@ -6008,7 +6046,7 @@ var Drawer = ({
       "Warning: The `direction` prop on Drawer is deprecated and no longer required to achieve multi-directional dragging."
     );
   }
-  const id = (0, import_react37.useId)();
+  const id = useSafeId();
   const { ref } = useDroppableSafe({
     id,
     type: "void",