@measured/puck 0.18.3-canary.934cfae → 0.18.3-canary.9de70d3

package/dist/{chunk-CHWFBYEM.mjs → chunk-4QIG6FWS.mjs}

@@ -91,6 +91,49 @@ var init_react_import = __esm({
   }
 });
 
+// lib/transform-props.ts
+init_react_import();
+
+// lib/default-data.ts
+init_react_import();
+var defaultData = (data) => __spreadProps(__spreadValues({}, data), {
+  root: data.root || {},
+  content: data.content || []
+});
+
+// lib/transform-props.ts
+function transformProps(data, propTransforms) {
+  const mapItem = (item) => {
+    if (propTransforms[item.type]) {
+      return __spreadProps(__spreadValues({}, item), {
+        props: propTransforms[item.type](item.props)
+      });
+    }
+    return item;
+  };
+  const defaultedData = defaultData(data);
+  const rootProps = defaultedData.root.props || defaultedData.root;
+  let newRoot = __spreadValues({}, defaultedData.root);
+  if (propTransforms["root"]) {
+    if (defaultedData.root.props) {
+      newRoot.props = propTransforms["root"](rootProps);
+    } else {
+      newRoot = propTransforms["root"](rootProps);
+    }
+  }
+  const afterPropTransforms = __spreadProps(__spreadValues({}, defaultedData), {
+    root: newRoot,
+    content: defaultedData.content.map(mapItem),
+    zones: Object.keys(data.zones || {}).reduce(
+      (acc, zoneKey) => __spreadProps(__spreadValues({}, acc), {
+        [zoneKey]: data.zones[zoneKey].map(mapItem)
+      }),
+      {}
+    )
+  });
+  return afterPropTransforms;
+}
+
 // lib/resolve-all-data.ts
 init_react_import();
 
@@ -181,13 +224,6 @@ function resolveRootData(data, config) {
   });
 }
 
-// lib/default-data.ts
-init_react_import();
-var defaultData = (data) => __spreadProps(__spreadValues({}, data), {
-  root: data.root || {},
-  content: data.content || []
-});
-
 // lib/resolve-all-data.ts
 function resolveAllData(data, config, onResolveStart, onResolveEnd) {
   return __async(this, null, function* () {
@@ -251,6 +287,6 @@ export {
   getChanged,
   resolveComponentData,
   resolveRootData,
-  defaultData,
+  transformProps,
   resolveAllData
 };

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, h as DefaultComponentProps, i as DefaultRootFieldProps, H as History, A as AppState, E as ExtractPropsFromConfig, j as ExtractRootPropsFromConfig, k as ComponentDataMap } from './resolve-all-data-ppm982Jh.mjs';
-export { Q as Adaptor, K as ArrayField, s as ArrayState, a3 as AsFieldProps, B as BaseData, z as BaseField, u as ComponentConfig, x as ComponentData, y as Content, Y as CustomField, a0 as DefaultRootProps, $ as DefaultRootRenderProps, l as Direction, m as DragAxis, X as ExternalField, W as ExternalFieldWithAdaptor, q as FieldRenderFunctions, Z as Fields, r as ItemWithId, M as MappedItem, N as NumberField, L as ObjectField, p as OverrideKey, t as PuckComponent, _ as PuckContext, J as RadioField, w as RootData, R as RootDataWithProps, v as RootDataWithoutProps, S as SelectField, T as TextField, G as TextareaField, n as Viewport, a4 as WithChildren, a1 as WithId, a2 as WithPuckProps, o as overrideKeys, a5 as resolveAllData } from './resolve-all-data-ppm982Jh.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, H as History, A as AppState, E as ExtractPropsFromConfig, h as ExtractRootPropsFromConfig, i as ComponentDataMap } from './resolve-all-data-ChsqfT2w.mjs';
+export { K as Adaptor, G as ArrayField, q as ArrayState, a3 as AsFieldProps, B as BaseData, x as BaseField, s as ComponentConfig, v as ComponentData, w as Content, W as CustomField, a0 as DefaultComponentProps, Z as DefaultRootFieldProps, $ as DefaultRootProps, _ as DefaultRootRenderProps, j as Direction, k as DragAxis, Q as ExternalField, L as ExternalFieldWithAdaptor, n as FieldRenderFunctions, X as Fields, p as ItemWithId, M as MappedItem, N as NumberField, J as ObjectField, m as OverrideKey, r as PuckComponent, Y as PuckContext, z as RadioField, u as RootData, R as RootDataWithProps, t as RootDataWithoutProps, S as SelectField, T as TextField, y as TextareaField, l as Viewport, a4 as WithChildren, a1 as WithId, a2 as WithPuckProps, o as overrideKeys, a6 as resolveAllData, a5 as transformProps } from './resolve-all-data-ChsqfT2w.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, SyntheticEvent, ReactElement } from 'react';
@@ -140,17 +140,6 @@ declare function Render<UserConfig extends Config = Config, G extends UserGeneri
 
 declare function migrate(data: Data): Data;
 
-type PropTransform<Props extends DefaultComponentProps = DefaultComponentProps, RootProps extends DefaultComponentProps = DefaultRootFieldProps> = Partial<{
-    [ComponentName in keyof Props]: (props: Props[ComponentName] & {
-        [key: string]: any;
-    }) => Props[ComponentName];
-} & {
-    root: (props: RootProps & {
-        [key: string]: any;
-    }) => RootProps;
-}>;
-declare function transformProps<Props extends DefaultComponentProps = DefaultComponentProps, RootProps extends DefaultComponentProps = DefaultRootFieldProps>(data: Partial<Data>, propTransforms: PropTransform<Props, RootProps>): Data;
-
 type HistoryStore<D = any> = {
     index: number;
     hasPast: boolean;
@@ -194,4 +183,4 @@ declare const usePuck: <UserConfig extends Config = Config>() => {
     selectedItem: ComponentDataMap<ExtractPropsFromConfig<UserConfig>> | null;
 };
 
-export { Action, ActionBar, AppState, AutoField, Button, ComponentDataMap, Config, Data, DefaultComponentProps, DefaultRootFieldProps, Drawer, DropZone, ExtractPropsFromConfig, ExtractRootPropsFromConfig, Field, FieldLabel, FieldProps, Group, History, IconButton, IframeConfig, InitialHistory, Label, OnAction, Overrides, Permissions, Plugin, Puck, PuckAction, Render, UiState, UserGenerics, Viewports, migrate, transformProps, usePuck };
+export { Action, ActionBar, AppState, AutoField, Button, ComponentDataMap, Config, Data, Drawer, DropZone, ExtractPropsFromConfig, ExtractRootPropsFromConfig, Field, FieldLabel, FieldProps, Group, History, IconButton, IframeConfig, InitialHistory, Label, OnAction, Overrides, Permissions, Plugin, Puck, PuckAction, Render, UiState, UserGenerics, Viewports, migrate, usePuck };

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, h as DefaultComponentProps, i as DefaultRootFieldProps, H as History, A as AppState, E as ExtractPropsFromConfig, j as ExtractRootPropsFromConfig, k as ComponentDataMap } from './resolve-all-data-ppm982Jh.js';
-export { Q as Adaptor, K as ArrayField, s as ArrayState, a3 as AsFieldProps, B as BaseData, z as BaseField, u as ComponentConfig, x as ComponentData, y as Content, Y as CustomField, a0 as DefaultRootProps, $ as DefaultRootRenderProps, l as Direction, m as DragAxis, X as ExternalField, W as ExternalFieldWithAdaptor, q as FieldRenderFunctions, Z as Fields, r as ItemWithId, M as MappedItem, N as NumberField, L as ObjectField, p as OverrideKey, t as PuckComponent, _ as PuckContext, J as RadioField, w as RootData, R as RootDataWithProps, v as RootDataWithoutProps, S as SelectField, T as TextField, G as TextareaField, n as Viewport, a4 as WithChildren, a1 as WithId, a2 as WithPuckProps, o as overrideKeys, a5 as resolveAllData } from './resolve-all-data-ppm982Jh.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, H as History, A as AppState, E as ExtractPropsFromConfig, h as ExtractRootPropsFromConfig, i as ComponentDataMap } from './resolve-all-data-ChsqfT2w.js';
+export { K as Adaptor, G as ArrayField, q as ArrayState, a3 as AsFieldProps, B as BaseData, x as BaseField, s as ComponentConfig, v as ComponentData, w as Content, W as CustomField, a0 as DefaultComponentProps, Z as DefaultRootFieldProps, $ as DefaultRootProps, _ as DefaultRootRenderProps, j as Direction, k as DragAxis, Q as ExternalField, L as ExternalFieldWithAdaptor, n as FieldRenderFunctions, X as Fields, p as ItemWithId, M as MappedItem, N as NumberField, J as ObjectField, m as OverrideKey, r as PuckComponent, Y as PuckContext, z as RadioField, u as RootData, R as RootDataWithProps, t as RootDataWithoutProps, S as SelectField, T as TextField, y as TextareaField, l as Viewport, a4 as WithChildren, a1 as WithId, a2 as WithPuckProps, o as overrideKeys, a6 as resolveAllData, a5 as transformProps } from './resolve-all-data-ChsqfT2w.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, SyntheticEvent, ReactElement } from 'react';
@@ -140,17 +140,6 @@ declare function Render<UserConfig extends Config = Config, G extends UserGeneri
 
 declare function migrate(data: Data): Data;
 
-type PropTransform<Props extends DefaultComponentProps = DefaultComponentProps, RootProps extends DefaultComponentProps = DefaultRootFieldProps> = Partial<{
-    [ComponentName in keyof Props]: (props: Props[ComponentName] & {
-        [key: string]: any;
-    }) => Props[ComponentName];
-} & {
-    root: (props: RootProps & {
-        [key: string]: any;
-    }) => RootProps;
-}>;
-declare function transformProps<Props extends DefaultComponentProps = DefaultComponentProps, RootProps extends DefaultComponentProps = DefaultRootFieldProps>(data: Partial<Data>, propTransforms: PropTransform<Props, RootProps>): Data;
-
 type HistoryStore<D = any> = {
     index: number;
     hasPast: boolean;
@@ -194,4 +183,4 @@ declare const usePuck: <UserConfig extends Config = Config>() => {
     selectedItem: ComponentDataMap<ExtractPropsFromConfig<UserConfig>> | null;
 };
 
-export { Action, ActionBar, AppState, AutoField, Button, ComponentDataMap, Config, Data, DefaultComponentProps, DefaultRootFieldProps, Drawer, DropZone, ExtractPropsFromConfig, ExtractRootPropsFromConfig, Field, FieldLabel, FieldProps, Group, History, IconButton, IframeConfig, InitialHistory, Label, OnAction, Overrides, Permissions, Plugin, Puck, PuckAction, Render, UiState, UserGenerics, Viewports, migrate, transformProps, usePuck };
+export { Action, ActionBar, AppState, AutoField, Button, ComponentDataMap, Config, Data, Drawer, DropZone, ExtractPropsFromConfig, ExtractRootPropsFromConfig, Field, FieldLabel, FieldProps, Group, History, IconButton, IframeConfig, InitialHistory, Label, OnAction, Overrides, Permissions, Plugin, Puck, PuckAction, Render, UiState, UserGenerics, Viewports, migrate, usePuck };

package/dist/index.js

@@ -1301,7 +1301,8 @@ function useDraggableSafe(input) {
 function useSortableSafe(input) {
   if (typeof window === "undefined") {
     return { ref: () => {
-    }, status: "idle" };
+    }, status: "idle", handleRef: () => {
+    } };
   }
   return (0, import_sortable.useSortable)(input);
 }
@@ -1576,23 +1577,26 @@ function patchWindow(window2) {
 
 // lib/dnd/use-sensors.ts
 var import_utilities2 = require("@dnd-kit/dom/utilities");
-var useSensors = () => {
+var useSensors = ({
+  other,
+  mouse,
+  touch
+} = {
+  touch: { delay: { value: 200, tolerance: 10 } },
+  other: { delay: { value: 200, tolerance: 10 }, distance: { value: 5 } }
+}) => {
   const [sensors] = (0, import_react9.useState)(() => [
     PointerSensor.configure({
       activationConstraints(event, source) {
         var _a;
         const { pointerType, target } = event;
         if (pointerType === "mouse" && (0, import_utilities2.isElement)(target) && (source.handle === target || ((_a = source.handle) == null ? void 0 : _a.contains(target)))) {
-          return void 0;
+          return mouse;
         }
-        const delay = { value: 200, tolerance: 10 };
         if (pointerType === "touch") {
-          return { delay };
+          return touch;
         }
-        return {
-          delay,
-          distance: { value: 5 }
-        };
+        return other;
       }
     })
   ]);
@@ -1945,7 +1949,9 @@ var SortableProvider = ({
   onMove
 }) => {
   const [move, setMove] = (0, import_react11.useState)({ source: -1, target: -1 });
-  const sensors = useSensors();
+  const sensors = useSensors({
+    mouse: { distance: { value: 5 } }
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     import_react10.DragDropProvider,
     {
@@ -2000,7 +2006,11 @@ var Sortable = ({
   children,
   type = "item"
 }) => {
-  const { ref: sortableRef, status } = useSortableSafe({
+  const {
+    ref: sortableRef,
+    status,
+    handleRef
+  } = useSortableSafe({
     id,
     type,
     index,
@@ -2008,7 +2018,7 @@ var Sortable = ({
     data: { index },
     collisionDetector: createDynamicCollisionDetector("y")
   });
-  return children({ status, ref: sortableRef });
+  return children({ status, ref: sortableRef, handleRef });
 };
 
 // components/AutoField/context.tsx
@@ -2173,7 +2183,7 @@ var ArrayField = ({
                 addDisabled
               }),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                localState.arrayState.items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "div",
                   {
                     ref: dndContainerRef,
@@ -2188,7 +2198,7 @@ var ArrayField = ({
                           id: _arrayId,
                           index: i,
                           disabled: readOnly,
-                          children: ({ status, ref }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                          children: ({ status, ref, handleRef }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                             "div",
                             {
                               ref,
@@ -2201,6 +2211,7 @@ var ArrayField = ({
                                 /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                                   "div",
                                   {
+                                    ref: handleRef,
                                     onClick: (e) => {
                                       if (isDragging) return;
                                       e.preventDefault();
@@ -2278,58 +2289,49 @@ var ArrayField = ({
                                     ]
                                   }
                                 ),
-                                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                                  "fieldset",
-                                  {
-                                    className: getClassNameItem("fieldset"),
-                                    onPointerDownCapture: (e) => {
-                                      e.stopPropagation();
-                                    },
-                                    children: Object.keys(field.arrayFields).map((subName) => {
-                                      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__ */ (0, import_jsx_runtime8.jsx)(
-                                        NestedFieldProvider,
+                                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("fieldset", { className: getClassNameItem("fieldset"), children: Object.keys(field.arrayFields).map((subName) => {
+                                  const subField = field.arrayFields[subName];
+                                  const indexName = `${name}[${i}]`;
+                                  const subPath = `${indexName}.${subName}`;
+                                  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__ */ (0, import_jsx_runtime8.jsx)(
+                                    NestedFieldProvider,
+                                    {
+                                      name: localIndexName,
+                                      wildcardName: localWildcardName,
+                                      subName,
+                                      readOnlyFields,
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                                        AutoFieldPrivate,
                                         {
-                                          name: localIndexName,
-                                          wildcardName: localWildcardName,
-                                          subName,
-                                          readOnlyFields,
-                                          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                                            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
-                                      );
-                                    })
-                                  }
-                                ) })
+                                          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
+                                  );
+                                }) }) })
                               ]
                             }
                           )
@@ -3751,10 +3753,18 @@ var DraggableComponent = ({
           const rect = el.getBoundingClientRect();
           const diffLeft = rect.x;
           const exceedsBoundsLeft = diffLeft < 0;
+          const diffTop = rect.y;
+          const exceedsBoundsTop = diffTop < 0;
           if (exceedsBoundsLeft) {
             el.style.transformOrigin = "left top";
             el.style.left = "0px";
           }
+          if (exceedsBoundsTop) {
+            el.style.top = "12px";
+            if (!exceedsBoundsLeft) {
+              el.style.transformOrigin = "right top";
+            }
+          }
         }
       }
     },
@@ -5045,7 +5055,7 @@ var DragDropContextClient = ({
   disableAutoScroll
 }) => {
   const { state, config, dispatch, resolveData } = useAppContext();
-  const id = (0, import_react32.useId)();
+  const id = useSafeId();
   const { data } = state;
   const debouncedParamsRef = (0, import_react32.useRef)(null);
   const tempDisableFallback = useTempDisableFallback(100);
@@ -5528,7 +5538,7 @@ var Drawer = ({
       "Warning: The `direction` prop on Drawer is deprecated and no longer required to achieve multi-directional dragging."
     );
   }
-  const id = (0, import_react33.useId)();
+  const id = useSafeId();
   const { ref } = useDroppableSafe({
     id,
     type: "void",

package/dist/index.mjs

@@ -8,15 +8,15 @@ import {
   __spreadProps,
   __spreadValues,
   __toESM,
-  defaultData,
   getChanged,
   init_react_import,
   resolveAllData,
   resolveComponentData,
   resolveRootData,
   rootDroppableId,
-  setupZone
-} from "./chunk-CHWFBYEM.mjs";
+  setupZone,
+  transformProps
+} from "./chunk-4QIG6FWS.mjs";
 
 // ../../node_modules/classnames/index.js
 var require_classnames = __commonJS({
@@ -1110,7 +1110,8 @@ function useDraggableSafe(input) {
 function useSortableSafe(input) {
   if (typeof window === "undefined") {
     return { ref: () => {
-    }, status: "idle" };
+    }, status: "idle", handleRef: () => {
+    } };
   }
   return useSortable(input);
 }
@@ -1394,23 +1395,26 @@ function patchWindow(window2) {
 
 // lib/dnd/use-sensors.ts
 import { isElement as isElement2 } from "@dnd-kit/dom/utilities";
-var useSensors = () => {
+var useSensors = ({
+  other,
+  mouse,
+  touch
+} = {
+  touch: { delay: { value: 200, tolerance: 10 } },
+  other: { delay: { value: 200, tolerance: 10 }, distance: { value: 5 } }
+}) => {
   const [sensors] = useState5(() => [
     PointerSensor.configure({
       activationConstraints(event, source) {
         var _a;
         const { pointerType, target } = event;
         if (pointerType === "mouse" && isElement2(target) && (source.handle === target || ((_a = source.handle) == null ? void 0 : _a.contains(target)))) {
-          return void 0;
+          return mouse;
         }
-        const delay = { value: 200, tolerance: 10 };
         if (pointerType === "touch") {
-          return { delay };
+          return touch;
         }
-        return {
-          delay,
-          distance: { value: 5 }
-        };
+        return other;
       }
     })
   ]);
@@ -1766,7 +1770,9 @@ var SortableProvider = ({
   onMove
 }) => {
   const [move, setMove] = useState6({ source: -1, target: -1 });
-  const sensors = useSensors();
+  const sensors = useSensors({
+    mouse: { distance: { value: 5 } }
+  });
   return /* @__PURE__ */ jsx6(
     DragDropProvider,
     {
@@ -1821,7 +1827,11 @@ var Sortable = ({
   children,
   type = "item"
 }) => {
-  const { ref: sortableRef, status } = useSortableSafe({
+  const {
+    ref: sortableRef,
+    status,
+    handleRef
+  } = useSortableSafe({
     id,
     type,
     index,
@@ -1829,7 +1839,7 @@ var Sortable = ({
     data: { index },
     collisionDetector: createDynamicCollisionDetector("y")
   });
-  return children({ status, ref: sortableRef });
+  return children({ status, ref: sortableRef, handleRef });
 };
 
 // components/AutoField/context.tsx
@@ -1994,7 +2004,7 @@ var ArrayField = ({
                 addDisabled
               }),
               children: [
-                /* @__PURE__ */ jsx8(
+                localState.arrayState.items.length > 0 && /* @__PURE__ */ jsx8(
                   "div",
                   {
                     ref: dndContainerRef,
@@ -2009,7 +2019,7 @@ var ArrayField = ({
                           id: _arrayId,
                           index: i,
                           disabled: readOnly,
-                          children: ({ status, ref }) => /* @__PURE__ */ jsxs3(
+                          children: ({ status, ref, handleRef }) => /* @__PURE__ */ jsxs3(
                             "div",
                             {
                               ref,
@@ -2022,6 +2032,7 @@ var ArrayField = ({
                                 /* @__PURE__ */ jsxs3(
                                   "div",
                                   {
+                                    ref: handleRef,
                                     onClick: (e) => {
                                       if (isDragging) return;
                                       e.preventDefault();
@@ -2099,58 +2110,49 @@ var ArrayField = ({
                                     ]
                                   }
                                 ),
-                                /* @__PURE__ */ jsx8("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ jsx8(
-                                  "fieldset",
-                                  {
-                                    className: getClassNameItem("fieldset"),
-                                    onPointerDownCapture: (e) => {
-                                      e.stopPropagation();
-                                    },
-                                    children: Object.keys(field.arrayFields).map((subName) => {
-                                      const subField = field.arrayFields[subName];
-                                      const indexName = `${name}[${i}]`;
-                                      const subPath = `${indexName}.${subName}`;
-                                      const localIndexName = `${localName}[${i}]`;
-                                      const localWildcardName = `${localName}[*]`;
-                                      const localSubPath = `${localIndexName}.${subName}`;
-                                      const localWildcardSubPath = `${localWildcardName}.${subName}`;
-                                      const subReadOnly = forceReadOnly ? forceReadOnly : typeof readOnlyFields[subPath] !== "undefined" ? readOnlyFields[localSubPath] : readOnlyFields[localWildcardSubPath];
-                                      const label2 = subField.label || subName;
-                                      return /* @__PURE__ */ jsx8(
-                                        NestedFieldProvider,
+                                /* @__PURE__ */ jsx8("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ jsx8("fieldset", { className: getClassNameItem("fieldset"), children: Object.keys(field.arrayFields).map((subName) => {
+                                  const subField = field.arrayFields[subName];
+                                  const indexName = `${name}[${i}]`;
+                                  const subPath = `${indexName}.${subName}`;
+                                  const localIndexName = `${localName}[${i}]`;
+                                  const localWildcardName = `${localName}[*]`;
+                                  const localSubPath = `${localIndexName}.${subName}`;
+                                  const localWildcardSubPath = `${localWildcardName}.${subName}`;
+                                  const subReadOnly = forceReadOnly ? forceReadOnly : typeof readOnlyFields[subPath] !== "undefined" ? readOnlyFields[localSubPath] : readOnlyFields[localWildcardSubPath];
+                                  const label2 = subField.label || subName;
+                                  return /* @__PURE__ */ jsx8(
+                                    NestedFieldProvider,
+                                    {
+                                      name: localIndexName,
+                                      wildcardName: localWildcardName,
+                                      subName,
+                                      readOnlyFields,
+                                      children: /* @__PURE__ */ jsx8(
+                                        AutoFieldPrivate,
                                         {
-                                          name: localIndexName,
-                                          wildcardName: localWildcardName,
-                                          subName,
-                                          readOnlyFields,
-                                          children: /* @__PURE__ */ jsx8(
-                                            AutoFieldPrivate,
-                                            {
-                                              name: subPath,
-                                              label: label2,
-                                              id: `${_arrayId}_${subName}`,
-                                              readOnly: subReadOnly,
-                                              field: __spreadProps(__spreadValues({}, subField), {
-                                                label: label2
-                                                // May be used by custom fields
-                                              }),
-                                              value: data[subName],
-                                              onChange: (val, ui) => {
-                                                onChange(
-                                                  replace(value, i, __spreadProps(__spreadValues({}, data), {
-                                                    [subName]: val
-                                                  })),
-                                                  ui
-                                                );
-                                              }
-                                            }
-                                          )
-                                        },
-                                        subPath
-                                      );
-                                    })
-                                  }
-                                ) })
+                                          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
+                                  );
+                                }) }) })
                               ]
                             }
                           )
@@ -3128,7 +3130,7 @@ init_react_import();
 var styles_module_default10 = { "Drawer": "_Drawer_fkqfo_1", "Drawer-draggable": "_Drawer-draggable_fkqfo_8", "Drawer-draggableBg": "_Drawer-draggableBg_fkqfo_12", "Drawer-draggableFg": "_Drawer-draggableFg_fkqfo_21", "DrawerItem-draggable": "_DrawerItem-draggable_fkqfo_25", "DrawerItem--disabled": "_DrawerItem--disabled_fkqfo_38", "DrawerItem": "_DrawerItem_fkqfo_25", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_fkqfo_48", "DrawerItem-name": "_DrawerItem-name_fkqfo_66" };
 
 // components/Drawer/index.tsx
-import { useId as useId2, useMemo as useMemo9, useState as useState19 } from "react";
+import { useMemo as useMemo9, useState as useState19 } from "react";
 
 // components/DragDropContext/index.tsx
 init_react_import();
@@ -3138,7 +3140,6 @@ import {
   useCallback as useCallback11,
   useContext as useContext7,
   useEffect as useEffect15,
-  useId,
   useRef as useRef4,
   useState as useState18
 } from "react";
@@ -3605,10 +3606,18 @@ var DraggableComponent = ({
           const rect = el.getBoundingClientRect();
           const diffLeft = rect.x;
           const exceedsBoundsLeft = diffLeft < 0;
+          const diffTop = rect.y;
+          const exceedsBoundsTop = diffTop < 0;
           if (exceedsBoundsLeft) {
             el.style.transformOrigin = "left top";
             el.style.left = "0px";
           }
+          if (exceedsBoundsTop) {
+            el.style.top = "12px";
+            if (!exceedsBoundsLeft) {
+              el.style.transformOrigin = "right top";
+            }
+          }
         }
       }
     },
@@ -4899,7 +4908,7 @@ var DragDropContextClient = ({
   disableAutoScroll
 }) => {
   const { state, config, dispatch, resolveData } = useAppContext();
-  const id = useId();
+  const id = useSafeId();
   const { data } = state;
   const debouncedParamsRef = useRef4(null);
   const tempDisableFallback = useTempDisableFallback(100);
@@ -5382,7 +5391,7 @@ var Drawer = ({
       "Warning: The `direction` prop on Drawer is deprecated and no longer required to achieve multi-directional dragging."
     );
   }
-  const id = useId2();
+  const id = useSafeId();
   const { ref } = useDroppableSafe({
     id,
     type: "void",
@@ -7825,40 +7834,6 @@ function migrate(data) {
   return migrations == null ? void 0 : migrations.reduce((acc, migration) => migration(acc), data);
 }
 
-// lib/transform-props.ts
-init_react_import();
-function transformProps(data, propTransforms) {
-  const mapItem = (item) => {
-    if (propTransforms[item.type]) {
-      return __spreadProps(__spreadValues({}, item), {
-        props: propTransforms[item.type](item.props)
-      });
-    }
-    return item;
-  };
-  const defaultedData = defaultData(data);
-  const rootProps = defaultedData.root.props || defaultedData.root;
-  let newRoot = __spreadValues({}, defaultedData.root);
-  if (propTransforms["root"]) {
-    if (defaultedData.root.props) {
-      newRoot.props = propTransforms["root"](rootProps);
-    } else {
-      newRoot = propTransforms["root"](rootProps);
-    }
-  }
-  const afterPropTransforms = __spreadProps(__spreadValues({}, defaultedData), {
-    root: newRoot,
-    content: defaultedData.content.map(mapItem),
-    zones: Object.keys(data.zones || {}).reduce(
-      (acc, zoneKey) => __spreadProps(__spreadValues({}, acc), {
-        [zoneKey]: data.zones[zoneKey].map(mapItem)
-      }),
-      {}
-    )
-  });
-  return afterPropTransforms;
-}
-
 // lib/use-puck.ts
 init_react_import();
 var usePuck = () => {

package/dist/{resolve-all-data-ppm982Jh.d.mts → resolve-all-data-ChsqfT2w.d.mts}

@@ -457,6 +457,17 @@ type PuckAction = {
     recordHistory?: boolean;
 } & (ReorderAction | InsertAction | MoveAction | ReplaceAction | RemoveAction | DuplicateAction | SetAction | SetDataAction | SetUiAction | RegisterZoneAction | UnregisterZoneAction);
 
+type PropTransform<Props extends DefaultComponentProps = DefaultComponentProps, RootProps extends DefaultComponentProps = DefaultRootFieldProps> = Partial<{
+    [ComponentName in keyof Props]: (props: Props[ComponentName] & {
+        [key: string]: any;
+    }) => Props[ComponentName];
+} & {
+    root: (props: RootProps & {
+        [key: string]: any;
+    }) => RootProps;
+}>;
+declare function transformProps<Props extends DefaultComponentProps = DefaultComponentProps, RootProps extends DefaultComponentProps = DefaultRootFieldProps>(data: Partial<Data>, propTransforms: PropTransform<Props, RootProps>): Data;
+
 declare function resolveAllData<Props extends DefaultComponentProps = DefaultComponentProps, RootProps extends Record<string, any> = DefaultRootFieldProps>(data: Partial<Data>, config: Config, onResolveStart?: (item: ComponentData) => void, onResolveEnd?: (item: ComponentData) => void): Promise<Data<Props, RootProps>>;
 
-export { type DefaultRootRenderProps as $, type AppState as A, type BaseData as B, type Config as C, type DropZoneProps as D, type ExtractPropsFromConfig as E, type FieldProps as F, type TextareaField as G, type History as H, type IframeConfig as I, type RadioField as J, type ArrayField as K, type ObjectField as L, type MappedItem as M, type NumberField as N, type OnAction as O, type Permissions as P, type Adaptor as Q, type RootDataWithProps as R, type SelectField as S, type TextField as T, type UserGenerics as U, type Viewports as V, type ExternalFieldWithAdaptor as W, type ExternalField as X, type CustomField as Y, type Fields as Z, type PuckContext as _, type Field as a, type DefaultRootProps as a0, type WithId as a1, type WithPuckProps as a2, type AsFieldProps as a3, type WithChildren as a4, resolveAllData as a5, type Data as b, type UiState as c, type Plugin as d, type Overrides as e, type PuckAction as f, type InitialHistory as g, type DefaultComponentProps as h, type DefaultRootFieldProps as i, type ExtractRootPropsFromConfig as j, type ComponentDataMap as k, type Direction as l, type DragAxis as m, type Viewport as n, overrideKeys as o, type OverrideKey as p, type FieldRenderFunctions as q, type ItemWithId as r, type ArrayState as s, type PuckComponent as t, type ComponentConfig as u, type RootDataWithoutProps as v, type RootData as w, type ComponentData as x, type Content as y, type BaseField as z };
+export { type DefaultRootProps as $, type AppState as A, type BaseData as B, type Config as C, type DropZoneProps as D, type ExtractPropsFromConfig as E, type FieldProps as F, type ArrayField as G, type History as H, type IframeConfig as I, type ObjectField as J, type Adaptor as K, type ExternalFieldWithAdaptor as L, type MappedItem as M, type NumberField as N, type OnAction as O, type Permissions as P, type ExternalField as Q, type RootDataWithProps as R, type SelectField as S, type TextField as T, type UserGenerics as U, type Viewports as V, type CustomField as W, type Fields as X, type PuckContext as Y, type DefaultRootFieldProps as Z, type DefaultRootRenderProps as _, type Field as a, type DefaultComponentProps as a0, type WithId as a1, type WithPuckProps as a2, type AsFieldProps as a3, type WithChildren as a4, transformProps as a5, resolveAllData as a6, type Data as b, type UiState as c, type Plugin as d, type Overrides as e, type PuckAction as f, type InitialHistory as g, type ExtractRootPropsFromConfig as h, type ComponentDataMap as i, type Direction as j, type DragAxis as k, type Viewport as l, type OverrideKey as m, type FieldRenderFunctions as n, overrideKeys as o, type ItemWithId as p, type ArrayState as q, type PuckComponent as r, type ComponentConfig as s, type RootDataWithoutProps as t, type RootData as u, type ComponentData as v, type Content as w, type BaseField as x, type TextareaField as y, type RadioField as z };

package/dist/{resolve-all-data-ppm982Jh.d.ts → resolve-all-data-ChsqfT2w.d.ts}

@@ -457,6 +457,17 @@ type PuckAction = {
     recordHistory?: boolean;
 } & (ReorderAction | InsertAction | MoveAction | ReplaceAction | RemoveAction | DuplicateAction | SetAction | SetDataAction | SetUiAction | RegisterZoneAction | UnregisterZoneAction);
 
+type PropTransform<Props extends DefaultComponentProps = DefaultComponentProps, RootProps extends DefaultComponentProps = DefaultRootFieldProps> = Partial<{
+    [ComponentName in keyof Props]: (props: Props[ComponentName] & {
+        [key: string]: any;
+    }) => Props[ComponentName];
+} & {
+    root: (props: RootProps & {
+        [key: string]: any;
+    }) => RootProps;
+}>;
+declare function transformProps<Props extends DefaultComponentProps = DefaultComponentProps, RootProps extends DefaultComponentProps = DefaultRootFieldProps>(data: Partial<Data>, propTransforms: PropTransform<Props, RootProps>): Data;
+
 declare function resolveAllData<Props extends DefaultComponentProps = DefaultComponentProps, RootProps extends Record<string, any> = DefaultRootFieldProps>(data: Partial<Data>, config: Config, onResolveStart?: (item: ComponentData) => void, onResolveEnd?: (item: ComponentData) => void): Promise<Data<Props, RootProps>>;
 
-export { type DefaultRootRenderProps as $, type AppState as A, type BaseData as B, type Config as C, type DropZoneProps as D, type ExtractPropsFromConfig as E, type FieldProps as F, type TextareaField as G, type History as H, type IframeConfig as I, type RadioField as J, type ArrayField as K, type ObjectField as L, type MappedItem as M, type NumberField as N, type OnAction as O, type Permissions as P, type Adaptor as Q, type RootDataWithProps as R, type SelectField as S, type TextField as T, type UserGenerics as U, type Viewports as V, type ExternalFieldWithAdaptor as W, type ExternalField as X, type CustomField as Y, type Fields as Z, type PuckContext as _, type Field as a, type DefaultRootProps as a0, type WithId as a1, type WithPuckProps as a2, type AsFieldProps as a3, type WithChildren as a4, resolveAllData as a5, type Data as b, type UiState as c, type Plugin as d, type Overrides as e, type PuckAction as f, type InitialHistory as g, type DefaultComponentProps as h, type DefaultRootFieldProps as i, type ExtractRootPropsFromConfig as j, type ComponentDataMap as k, type Direction as l, type DragAxis as m, type Viewport as n, overrideKeys as o, type OverrideKey as p, type FieldRenderFunctions as q, type ItemWithId as r, type ArrayState as s, type PuckComponent as t, type ComponentConfig as u, type RootDataWithoutProps as v, type RootData as w, type ComponentData as x, type Content as y, type BaseField as z };
+export { type DefaultRootProps as $, type AppState as A, type BaseData as B, type Config as C, type DropZoneProps as D, type ExtractPropsFromConfig as E, type FieldProps as F, type ArrayField as G, type History as H, type IframeConfig as I, type ObjectField as J, type Adaptor as K, type ExternalFieldWithAdaptor as L, type MappedItem as M, type NumberField as N, type OnAction as O, type Permissions as P, type ExternalField as Q, type RootDataWithProps as R, type SelectField as S, type TextField as T, type UserGenerics as U, type Viewports as V, type CustomField as W, type Fields as X, type PuckContext as Y, type DefaultRootFieldProps as Z, type DefaultRootRenderProps as _, type Field as a, type DefaultComponentProps as a0, type WithId as a1, type WithPuckProps as a2, type AsFieldProps as a3, type WithChildren as a4, transformProps as a5, resolveAllData as a6, type Data as b, type UiState as c, type Plugin as d, type Overrides as e, type PuckAction as f, type InitialHistory as g, type ExtractRootPropsFromConfig as h, type ComponentDataMap as i, type Direction as j, type DragAxis as k, type Viewport as l, type OverrideKey as m, type FieldRenderFunctions as n, overrideKeys as o, type ItemWithId as p, type ArrayState as q, type PuckComponent as r, type ComponentConfig as s, type RootDataWithoutProps as t, type RootData as u, type ComponentData as v, type Content as w, type BaseField as x, type TextareaField as y, type RadioField as z };

package/dist/rsc.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as Config, U as UserGenerics } from './resolve-all-data-ppm982Jh.mjs';
-export { a5 as resolveAllData } from './resolve-all-data-ppm982Jh.mjs';
+import { C as Config, U as UserGenerics } from './resolve-all-data-ChsqfT2w.mjs';
+export { a6 as resolveAllData, a5 as transformProps } from './resolve-all-data-ChsqfT2w.mjs';
 import 'react';
 
 declare function Render<UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>>({ config, data }: {

package/dist/rsc.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as Config, U as UserGenerics } from './resolve-all-data-ppm982Jh.js';
-export { a5 as resolveAllData } from './resolve-all-data-ppm982Jh.js';
+import { C as Config, U as UserGenerics } from './resolve-all-data-ChsqfT2w.js';
+export { a6 as resolveAllData, a5 as transformProps } from './resolve-all-data-ChsqfT2w.js';
 import 'react';
 
 declare function Render<UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>>({ config, data }: {

package/dist/rsc.js

@@ -68,7 +68,8 @@ var __async = (__this, __arguments, generator) => {
 var rsc_exports = {};
 __export(rsc_exports, {
   Render: () => Render,
-  resolveAllData: () => resolveAllData
+  resolveAllData: () => resolveAllData,
+  transformProps: () => transformProps
 });
 module.exports = __toCommonJS(rsc_exports);
 
@@ -271,8 +272,42 @@ function resolveAllData(data, config, onResolveStart, onResolveEnd) {
     });
   });
 }
+
+// lib/transform-props.ts
+function transformProps(data, propTransforms) {
+  const mapItem = (item) => {
+    if (propTransforms[item.type]) {
+      return __spreadProps(__spreadValues({}, item), {
+        props: propTransforms[item.type](item.props)
+      });
+    }
+    return item;
+  };
+  const defaultedData = defaultData(data);
+  const rootProps = defaultedData.root.props || defaultedData.root;
+  let newRoot = __spreadValues({}, defaultedData.root);
+  if (propTransforms["root"]) {
+    if (defaultedData.root.props) {
+      newRoot.props = propTransforms["root"](rootProps);
+    } else {
+      newRoot = propTransforms["root"](rootProps);
+    }
+  }
+  const afterPropTransforms = __spreadProps(__spreadValues({}, defaultedData), {
+    root: newRoot,
+    content: defaultedData.content.map(mapItem),
+    zones: Object.keys(data.zones || {}).reduce(
+      (acc, zoneKey) => __spreadProps(__spreadValues({}, acc), {
+        [zoneKey]: data.zones[zoneKey].map(mapItem)
+      }),
+      {}
+    )
+  });
+  return afterPropTransforms;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Render,
-  resolveAllData
+  resolveAllData,
+  transformProps
 });

package/dist/rsc.mjs

@@ -4,8 +4,9 @@ import {
   init_react_import,
   resolveAllData,
   rootDroppableId,
-  setupZone
-} from "./chunk-CHWFBYEM.mjs";
+  setupZone,
+  transformProps
+} from "./chunk-4QIG6FWS.mjs";
 
 // rsc.tsx
 init_react_import();
@@ -76,5 +77,6 @@ function Render({ config, data }) {
 }
 export {
   Render,
-  resolveAllData
+  resolveAllData,
+  transformProps
 };

package/package.json

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