@measured/puck 0.21.0-canary.ec77dd9f → 0.21.0-canary.ed10e2a4

package/dist/{chunk-TC25DCTQ.mjs → chunk-JA7SEUEH.mjs}

@@ -914,8 +914,9 @@ var Item = ({
   );
 };
 var SlotRender = forwardRef(
-  function SlotRenderInternal({ className, style, content, config, metadata }, ref) {
-    return /* @__PURE__ */ jsx("div", { className, style, ref, children: content.map((item) => {
+  function SlotRenderInternal({ className, style, content, config, metadata, as }, ref) {
+    const El = as != null ? as : "div";
+    return /* @__PURE__ */ jsx(El, { className, style, ref, children: content.map((item) => {
       if (!config.components[item.type]) {
         return null;
       }

package/dist/{chunk-NW2GGRCZ.mjs → chunk-UABEUL66.mjs}

@@ -25,7 +25,7 @@ import {
   walkAppState,
   walkField,
   walkTree
-} from "./chunk-TC25DCTQ.mjs";
+} from "./chunk-JA7SEUEH.mjs";
 
 // ../../node_modules/classnames/index.js
 var require_classnames = __commonJS({
@@ -1074,26 +1074,34 @@ var createPermissionsSlice = (set, get) => {
   const resolvePermissions = (..._0) => __async(null, [..._0], function* (params = {}, force) {
     const { state, permissions, config } = get();
     const { cache, globalPermissions } = permissions;
-    const resolveDataForItem = (item2, force2 = false) => __async(null, null, function* () {
-      var _a, _b, _c;
+    const resolvePermissionsForItem = (item2, force2 = false) => __async(null, null, function* () {
+      var _a, _b;
       const { config: config2, state: appState, setComponentLoading } = get();
+      const itemCache = cache[item2.props.id];
+      const nodes = appState.indexes.nodes;
+      const parentId = (_a = nodes[item2.props.id]) == null ? void 0 : _a.parentId;
+      const parentNode = parentId ? nodes[parentId] : null;
+      const parentData = (_b = parentNode == null ? void 0 : parentNode.data) != null ? _b : null;
       const componentConfig = item2.type === "root" ? config2.root : config2.components[item2.type];
       if (!componentConfig) {
         return;
       }
       const initialPermissions = __spreadValues(__spreadValues({}, globalPermissions), componentConfig.permissions);
       if (componentConfig.resolvePermissions) {
-        const changed = getChanged(item2, (_a = cache[item2.props.id]) == null ? void 0 : _a.lastData);
-        if (Object.values(changed).some((el) => el === true) || force2) {
+        const changed = getChanged(item2, itemCache == null ? void 0 : itemCache.lastData);
+        const propsChanged = Object.values(changed).some((el) => el === true);
+        const parentChanged = (itemCache == null ? void 0 : itemCache.lastParentId) !== parentId;
+        if (propsChanged || parentChanged || force2) {
           const clearTimeout2 = setComponentLoading(item2.props.id, true, 50);
           const resolvedPermissions = yield componentConfig.resolvePermissions(
             item2,
             {
               changed,
-              lastPermissions: ((_b = cache[item2.props.id]) == null ? void 0 : _b.lastPermissions) || null,
+              lastPermissions: (itemCache == null ? void 0 : itemCache.lastPermissions) || null,
               permissions: initialPermissions,
               appState: makeStatePublic(appState),
-              lastData: ((_c = cache[item2.props.id]) == null ? void 0 : _c.lastData) || null
+              lastData: (itemCache == null ? void 0 : itemCache.lastData) || null,
+              parent: parentData
             }
           );
           const latest = get().permissions;
@@ -1101,6 +1109,7 @@ var createPermissionsSlice = (set, get) => {
             permissions: __spreadProps(__spreadValues({}, latest), {
               cache: __spreadProps(__spreadValues({}, latest.cache), {
                 [item2.props.id]: {
+                  lastParentId: parentId,
                   lastData: item2,
                   lastPermissions: resolvedPermissions
                 }
@@ -1114,9 +1123,9 @@ var createPermissionsSlice = (set, get) => {
         }
       }
     });
-    const resolveDataForRoot = (force2 = false) => {
+    const resolvePermissionsForRoot = (force2 = false) => {
       const { state: appState } = get();
-      resolveDataForItem(
+      resolvePermissionsForItem(
         // Shim the root data in by conforming to component data shape
         {
           type: "root",
@@ -1127,16 +1136,16 @@ var createPermissionsSlice = (set, get) => {
     };
     const { item, type, root } = params;
     if (item) {
-      yield resolveDataForItem(item, force);
+      yield resolvePermissionsForItem(item, force);
     } else if (type) {
       flattenData(state, config).filter((item2) => item2.type === type).map((item2) => __async(null, null, function* () {
-        yield resolveDataForItem(item2, force);
+        yield resolvePermissionsForItem(item2, force);
       }));
     } else if (root) {
-      resolveDataForRoot(force);
+      resolvePermissionsForRoot(force);
     } else {
       flattenData(state, config).map((item2) => __async(null, null, function* () {
-        yield resolveDataForItem(item2, force);
+        yield resolvePermissionsForItem(item2, force);
       }));
     }
   });
@@ -4844,7 +4853,20 @@ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlu
 
 // lib/insert-component.ts
 init_react_import();
+
+// lib/get-selector-for-id.ts
+init_react_import();
+var getSelectorForId = (state, id) => {
+  const node = state.indexes.nodes[id];
+  if (!node) return;
+  const zoneCompound = `${node.parentId}:${node.zone}`;
+  const index = state.indexes.zones[zoneCompound].contentIds.indexOf(id);
+  return { zone: zoneCompound, index };
+};
+
+// lib/insert-component.ts
 var insertComponent = (componentType, zone, index, appStore) => __async(null, null, function* () {
+  const { getState } = appStore;
   const id = generateId(componentType);
   const insertActionData = {
     type: "insert",
@@ -4853,8 +4875,9 @@ var insertComponent = (componentType, zone, index, appStore) => __async(null, nu
     destinationZone: zone,
     id
   };
-  const { state, dispatch, resolveComponentData: resolveComponentData2 } = appStore;
-  const insertedState = insertAction(state, insertActionData, appStore);
+  const stateBefore = getState().state;
+  const insertedState = insertAction(stateBefore, insertActionData, getState());
+  const dispatch = getState().dispatch;
   dispatch(__spreadProps(__spreadValues({}, insertActionData), {
     // Dispatch insert rather set, as user's may rely on this via onAction
     // We must always record history here so the insert is added to user history
@@ -4862,23 +4885,21 @@ var insertComponent = (componentType, zone, index, appStore) => __async(null, nu
     // entries on insert - one for the initial insert, and one when the data resolves
     recordHistory: true
   }));
-  const itemSelector = {
-    index,
-    zone
-  };
+  const itemSelector = { index, zone };
   dispatch({ type: "setUi", ui: { itemSelector } });
   const itemData = getItem(itemSelector, insertedState);
-  if (itemData) {
-    const resolved = yield resolveComponentData2(itemData, "insert");
-    if (resolved.didChange) {
-      dispatch({
-        type: "replace",
-        destinationZone: itemSelector.zone,
-        destinationIndex: itemSelector.index,
-        data: resolved.node
-      });
-    }
-  }
+  if (!itemData) return;
+  const resolveComponentData2 = getState().resolveComponentData;
+  const resolved = yield resolveComponentData2(itemData, "insert");
+  if (!resolved.didChange) return;
+  const latestItemSelector = getSelectorForId(getState().state, id);
+  if (!latestItemSelector) return;
+  dispatch({
+    type: "replace",
+    destinationZone: latestItemSelector.zone,
+    destinationIndex: latestItemSelector.index,
+    data: resolved.node
+  });
 });
 
 // components/DragDropContext/index.tsx
@@ -5115,7 +5136,7 @@ var DragDropContextClient = ({
                     thisPreview.componentType,
                     thisPreview.zone,
                     thisPreview.index,
-                    appStore.getState()
+                    appStore
                   );
                 } else if (initialSelector.current) {
                   dispatch({
@@ -5499,7 +5520,8 @@ var useMinEmptyHeight = ({
       }
     }
   }, [ref.current, draggedItem, onDragFinished]);
-  return [prevHeight || userMinEmptyHeight, isAnimating];
+  const returnedMinHeight = isNaN(Number(userMinEmptyHeight)) ? userMinEmptyHeight : `${userMinEmptyHeight}px`;
+  return [prevHeight ? `${prevHeight}px` : returnedMinHeight, isAnimating];
 };
 
 // lib/assign-refs.ts
@@ -5757,16 +5779,6 @@ function setDeep(node, path, newVal) {
   return __spreadValues(__spreadValues({}, node), newNode);
 }
 
-// lib/get-selector-for-id.ts
-init_react_import();
-var getSelectorForId = (state, id) => {
-  const node = state.indexes.nodes[id];
-  if (!node) return;
-  const zoneCompound = `${node.parentId}:${node.zone}`;
-  const index = state.indexes.zones[zoneCompound].contentIds.indexOf(id);
-  return { zone: zoneCompound, index };
-};
-
 // components/InlineTextField/index.tsx
 import { jsx as jsx24 } from "react/jsx-runtime";
 var getClassName18 = get_class_name_factory_default("InlineTextField", styles_module_default13);
@@ -6086,8 +6098,9 @@ var DropZoneEdit = forwardRef3(
     disallow,
     style,
     className,
-    minEmptyHeight: userMinEmptyHeight = 128,
-    collisionAxis
+    minEmptyHeight: userMinEmptyHeight = "128px",
+    collisionAxis,
+    as
   }, userRef) {
     const ctx = useContext8(dropZoneContext);
     const appStoreApi = useAppStoreApi();
@@ -6230,8 +6243,9 @@ var DropZoneEdit = forwardRef3(
       userMinEmptyHeight,
       ref
     });
+    const El = as != null ? as : "div";
     return /* @__PURE__ */ jsx26(
-      "div",
+      El,
       {
         className: `${getClassName19({
           isRootZone,
@@ -6247,7 +6261,7 @@ var DropZoneEdit = forwardRef3(
         "data-testid": `dropzone:${zoneCompound}`,
         "data-puck-dropzone": zoneCompound,
         style: __spreadProps(__spreadValues({}, style), {
-          "--min-empty-height": `${minEmptyHeight}px`,
+          "--min-empty-height": minEmptyHeight,
           backgroundColor: RENDER_DEBUG ? getRandomColor() : style == null ? void 0 : style.backgroundColor
         }),
         children: contentIdsWithPreview.map((componentId, i) => {
@@ -6294,7 +6308,7 @@ var DropZoneRenderItem = ({
 };
 var DropZoneRenderPure = (props) => /* @__PURE__ */ jsx26(DropZoneRender, __spreadValues({}, props));
 var DropZoneRender = forwardRef3(
-  function DropZoneRenderInternal({ className, style, zone }, ref) {
+  function DropZoneRenderInternal({ className, style, zone, as }, ref) {
     const ctx = useContext8(dropZoneContext);
     const { areaId = "root" } = ctx || {};
     const { config, data, metadata } = useContext8(renderContext);
@@ -6307,13 +6321,14 @@ var DropZoneRender = forwardRef3(
         }
       }
     }, [content]);
+    const El = as != null ? as : "div";
     if (!data || !config) {
       return null;
     }
     if (zoneCompound !== rootDroppableId) {
       content = setupZone(data, zoneCompound).zones[zoneCompound];
     }
-    return /* @__PURE__ */ jsx26("div", { className, style, ref, children: content.map((item) => {
+    return /* @__PURE__ */ jsx26(El, { className, style, ref, children: content.map((item) => {
       const Component = config.components[item.type];
       if (Component) {
         return /* @__PURE__ */ jsx26(
@@ -6415,7 +6430,15 @@ var generateUsePuck = (store) => {
     selectedItem: store.selectedItem || null,
     getItemBySelector: (selector) => getItem(selector, store.state),
     getItemById: (id) => store.state.indexes.nodes[id].data,
-    getSelectorForId: (id) => getSelectorForId(store.state, id)
+    getSelectorForId: (id) => getSelectorForId(store.state, id),
+    getParentById: (id) => {
+      const node = store.state.indexes.nodes[id];
+      const parentId = node.parentId;
+      if (parentId === null) return;
+      const parentNode = store.state.indexes.nodes[parentId];
+      if (!parentNode) return;
+      return parentNode.data;
+    }
   };
   return storeData;
 };
@@ -6604,48 +6627,47 @@ var DefaultFields = ({
   return /* @__PURE__ */ jsx29(Fragment8, { children });
 };
 var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(null, null, function* () {
-  let currentProps;
   const { dispatch, state, selectedItem, resolveComponentData: resolveComponentData2 } = appStore.getState();
   const { data, ui } = state;
   const { itemSelector } = ui;
   const rootProps = data.root.props || data.root;
-  if (selectedItem) {
-    currentProps = selectedItem.props;
-  } else {
-    currentProps = rootProps;
-  }
-  const newProps = __spreadProps(__spreadValues({}, currentProps), {
-    [fieldName]: value
-  });
+  const currentProps = selectedItem ? selectedItem.props : rootProps;
+  const newProps = __spreadProps(__spreadValues({}, currentProps), { [fieldName]: value });
   if (selectedItem && itemSelector) {
+    const resolved = yield resolveComponentData2(
+      __spreadProps(__spreadValues({}, selectedItem), { props: newProps }),
+      "replace"
+    );
+    const latestSelector = getSelectorForId(
+      appStore.getState().state,
+      selectedItem.props.id
+    );
+    if (!latestSelector) return;
     dispatch({
       type: "replace",
-      destinationIndex: itemSelector.index,
-      destinationZone: itemSelector.zone || rootDroppableId,
-      data: (yield resolveComponentData2(
-        __spreadProps(__spreadValues({}, selectedItem), { props: newProps }),
+      destinationIndex: latestSelector.index,
+      destinationZone: latestSelector.zone || rootDroppableId,
+      data: resolved.node,
+      ui: updatedUi
+    });
+    return;
+  }
+  if (data.root.props) {
+    dispatch({
+      type: "replaceRoot",
+      root: (yield resolveComponentData2(
+        __spreadProps(__spreadValues({}, data.root), { props: newProps }),
         "replace"
       )).node,
-      ui: updatedUi
+      ui: __spreadValues(__spreadValues({}, ui), updatedUi),
+      recordHistory: true
     });
-  } else {
-    if (data.root.props) {
-      dispatch({
-        type: "replaceRoot",
-        root: (yield resolveComponentData2(
-          __spreadProps(__spreadValues({}, data.root), { props: newProps }),
-          "replace"
-        )).node,
-        ui: __spreadValues(__spreadValues({}, ui), updatedUi),
-        recordHistory: true
-      });
-    } else {
-      dispatch({
-        type: "setData",
-        data: { root: newProps }
-      });
-    }
+    return;
   }
+  dispatch({
+    type: "setData",
+    data: { root: newProps }
+  });
 });
 var FieldsChild = ({ fieldName }) => {
   const field = useAppStore((s) => s.fields.fields[fieldName]);

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { H as History, P as Permissions, a as ComponentData, C as Config, U as UserGenerics, F as Fields, b as PuckAction, R as RootDataWithProps, c as ResolveDataTrigger, d as Plugin, O as Overrides, V as Viewports, I as IframeConfig, e as UiState, f as ComponentConfig, A as AppState, M as Metadata, g as FieldTransforms, h as Field, i as FieldProps, D as DropZoneProps, j as Data, k as OnAction, l as InitialHistory, n as ItemSelector } from './walk-tree-CkSoNBF7.mjs';
-export { ad as Adaptor, ab as ArrayField, B as ArrayState, ar as AsFieldProps, X as BaseData, a5 as BaseField, af as CacheOpts, J as ComponentConfigExtensions, T as ComponentConfigParams, a0 as ComponentDataMap, _ as ComponentDataOptionalId, a3 as ComponentMetadata, Q as ConfigParams, a1 as Content, ai as CustomField, ah as CustomFieldRender, ao as DefaultComponentProps, L as DefaultComponents, al as DefaultRootFieldProps, an as DefaultRootProps, am as DefaultRootRenderProps, o as Direction, p as DragAxis, ag as ExternalField, ae as ExternalFieldWithAdaptor, N as ExtractConfigParams, at as ExtractField, a4 as FieldMetadata, y as FieldRenderFunctions, u as FieldTransformFn, s as FieldTransformFnParams, z as ItemWithId, $ as MappedItem, a7 as NumberField, ac as ObjectField, x as OverrideKey, G as PuckComponent, ak as PuckContext, a2 as PuckMetadata, aa as RadioField, K as RootConfig, Z as RootData, Y as RootDataWithoutProps, a9 as SelectField, S as Slot, E as SlotComponent, aj as SlotField, a6 as TextField, a8 as TextareaField, q as Viewport, as as WithChildren, ap as WithId, aq as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-CkSoNBF7.mjs';
+import { H as History, P as Permissions, a as ComponentData, C as Config, U as UserGenerics, F as Fields, b as PuckAction, R as RootDataWithProps, c as ResolveDataTrigger, d as Plugin, O as Overrides, V as Viewports, I as IframeConfig, e as UiState, f as ComponentConfig, A as AppState, M as Metadata, g as FieldTransforms, h as Field, i as FieldProps, D as DropZoneProps, j as Data, k as OnAction, l as InitialHistory, n as ItemSelector } from './walk-tree-CgWnYC1X.mjs';
+export { ad as Adaptor, ab as ArrayField, B as ArrayState, ar as AsFieldProps, X as BaseData, a5 as BaseField, af as CacheOpts, J as ComponentConfigExtensions, T as ComponentConfigParams, a0 as ComponentDataMap, _ as ComponentDataOptionalId, a3 as ComponentMetadata, Q as ConfigParams, a1 as Content, ai as CustomField, ah as CustomFieldRender, ao as DefaultComponentProps, L as DefaultComponents, al as DefaultRootFieldProps, an as DefaultRootProps, am as DefaultRootRenderProps, o as Direction, p as DragAxis, ag as ExternalField, ae as ExternalFieldWithAdaptor, N as ExtractConfigParams, at as ExtractField, a4 as FieldMetadata, y as FieldRenderFunctions, u as FieldTransformFn, s as FieldTransformFnParams, z as ItemWithId, $ as MappedItem, a7 as NumberField, ac as ObjectField, x as OverrideKey, G as PuckComponent, ak as PuckContext, a2 as PuckMetadata, aa as RadioField, K as RootConfig, Z as RootData, Y as RootDataWithoutProps, a9 as SelectField, S as Slot, E as SlotComponent, aj as SlotField, a6 as TextField, a8 as TextareaField, q as Viewport, as as WithChildren, ap as WithId, aq as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-CgWnYC1X.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import react__default, { ReactNode, SyntheticEvent, ReactElement } from 'react';
@@ -47,6 +47,7 @@ type RefreshPermissions<UserConfig extends Config = Config> = (params?: Permissi
 type Cache = Record<string, {
     lastPermissions: Partial<Permissions>;
     lastData: ComponentData | null;
+    lastParentId: string | null;
 }>;
 type PermissionsSlice = {
     cache: Cache;
@@ -271,6 +272,7 @@ type UsePuckData<UserConfig extends Config = Config, G extends UserGenerics<User
     getItemBySelector: (selector: ItemSelector) => G["UserComponentData"] | undefined;
     getItemById: (id: string) => G["UserComponentData"] | undefined;
     getSelectorForId: (id: string) => Required<ItemSelector> | undefined;
+    getParentById: (id: string) => ComponentData | undefined;
     history: {
         back: HistorySlice["back"];
         forward: HistorySlice["forward"];

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { H as History, P as Permissions, a as ComponentData, C as Config, U as UserGenerics, F as Fields, b as PuckAction, R as RootDataWithProps, c as ResolveDataTrigger, d as Plugin, O as Overrides, V as Viewports, I as IframeConfig, e as UiState, f as ComponentConfig, A as AppState, M as Metadata, g as FieldTransforms, h as Field, i as FieldProps, D as DropZoneProps, j as Data, k as OnAction, l as InitialHistory, n as ItemSelector } from './walk-tree-CkSoNBF7.js';
-export { ad as Adaptor, ab as ArrayField, B as ArrayState, ar as AsFieldProps, X as BaseData, a5 as BaseField, af as CacheOpts, J as ComponentConfigExtensions, T as ComponentConfigParams, a0 as ComponentDataMap, _ as ComponentDataOptionalId, a3 as ComponentMetadata, Q as ConfigParams, a1 as Content, ai as CustomField, ah as CustomFieldRender, ao as DefaultComponentProps, L as DefaultComponents, al as DefaultRootFieldProps, an as DefaultRootProps, am as DefaultRootRenderProps, o as Direction, p as DragAxis, ag as ExternalField, ae as ExternalFieldWithAdaptor, N as ExtractConfigParams, at as ExtractField, a4 as FieldMetadata, y as FieldRenderFunctions, u as FieldTransformFn, s as FieldTransformFnParams, z as ItemWithId, $ as MappedItem, a7 as NumberField, ac as ObjectField, x as OverrideKey, G as PuckComponent, ak as PuckContext, a2 as PuckMetadata, aa as RadioField, K as RootConfig, Z as RootData, Y as RootDataWithoutProps, a9 as SelectField, S as Slot, E as SlotComponent, aj as SlotField, a6 as TextField, a8 as TextareaField, q as Viewport, as as WithChildren, ap as WithId, aq as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-CkSoNBF7.js';
+import { H as History, P as Permissions, a as ComponentData, C as Config, U as UserGenerics, F as Fields, b as PuckAction, R as RootDataWithProps, c as ResolveDataTrigger, d as Plugin, O as Overrides, V as Viewports, I as IframeConfig, e as UiState, f as ComponentConfig, A as AppState, M as Metadata, g as FieldTransforms, h as Field, i as FieldProps, D as DropZoneProps, j as Data, k as OnAction, l as InitialHistory, n as ItemSelector } from './walk-tree-CgWnYC1X.js';
+export { ad as Adaptor, ab as ArrayField, B as ArrayState, ar as AsFieldProps, X as BaseData, a5 as BaseField, af as CacheOpts, J as ComponentConfigExtensions, T as ComponentConfigParams, a0 as ComponentDataMap, _ as ComponentDataOptionalId, a3 as ComponentMetadata, Q as ConfigParams, a1 as Content, ai as CustomField, ah as CustomFieldRender, ao as DefaultComponentProps, L as DefaultComponents, al as DefaultRootFieldProps, an as DefaultRootProps, am as DefaultRootRenderProps, o as Direction, p as DragAxis, ag as ExternalField, ae as ExternalFieldWithAdaptor, N as ExtractConfigParams, at as ExtractField, a4 as FieldMetadata, y as FieldRenderFunctions, u as FieldTransformFn, s as FieldTransformFnParams, z as ItemWithId, $ as MappedItem, a7 as NumberField, ac as ObjectField, x as OverrideKey, G as PuckComponent, ak as PuckContext, a2 as PuckMetadata, aa as RadioField, K as RootConfig, Z as RootData, Y as RootDataWithoutProps, a9 as SelectField, S as Slot, E as SlotComponent, aj as SlotField, a6 as TextField, a8 as TextareaField, q as Viewport, as as WithChildren, ap as WithId, aq as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-CgWnYC1X.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import react__default, { ReactNode, SyntheticEvent, ReactElement } from 'react';
@@ -47,6 +47,7 @@ type RefreshPermissions<UserConfig extends Config = Config> = (params?: Permissi
 type Cache = Record<string, {
     lastPermissions: Partial<Permissions>;
     lastData: ComponentData | null;
+    lastParentId: string | null;
 }>;
 type PermissionsSlice = {
     cache: Cache;
@@ -271,6 +272,7 @@ type UsePuckData<UserConfig extends Config = Config, G extends UserGenerics<User
     getItemBySelector: (selector: ItemSelector) => G["UserComponentData"] | undefined;
     getItemById: (id: string) => G["UserComponentData"] | undefined;
     getSelectorForId: (id: string) => Required<ItemSelector> | undefined;
+    getParentById: (id: string) => ComponentData | undefined;
     history: {
         back: HistorySlice["back"];
         forward: HistorySlice["forward"];

package/dist/index.js

@@ -1979,26 +1979,34 @@ var createPermissionsSlice = (set, get) => {
   const resolvePermissions = (..._0) => __async(null, [..._0], function* (params = {}, force) {
     const { state, permissions, config } = get();
     const { cache: cache2, globalPermissions } = permissions;
-    const resolveDataForItem = (item2, force2 = false) => __async(null, null, function* () {
-      var _a, _b, _c;
+    const resolvePermissionsForItem = (item2, force2 = false) => __async(null, null, function* () {
+      var _a, _b;
       const { config: config2, state: appState, setComponentLoading } = get();
+      const itemCache = cache2[item2.props.id];
+      const nodes = appState.indexes.nodes;
+      const parentId = (_a = nodes[item2.props.id]) == null ? void 0 : _a.parentId;
+      const parentNode = parentId ? nodes[parentId] : null;
+      const parentData = (_b = parentNode == null ? void 0 : parentNode.data) != null ? _b : null;
       const componentConfig = item2.type === "root" ? config2.root : config2.components[item2.type];
       if (!componentConfig) {
         return;
       }
       const initialPermissions = __spreadValues(__spreadValues({}, globalPermissions), componentConfig.permissions);
       if (componentConfig.resolvePermissions) {
-        const changed = getChanged(item2, (_a = cache2[item2.props.id]) == null ? void 0 : _a.lastData);
-        if (Object.values(changed).some((el) => el === true) || force2) {
+        const changed = getChanged(item2, itemCache == null ? void 0 : itemCache.lastData);
+        const propsChanged = Object.values(changed).some((el) => el === true);
+        const parentChanged = (itemCache == null ? void 0 : itemCache.lastParentId) !== parentId;
+        if (propsChanged || parentChanged || force2) {
           const clearTimeout2 = setComponentLoading(item2.props.id, true, 50);
           const resolvedPermissions = yield componentConfig.resolvePermissions(
             item2,
             {
               changed,
-              lastPermissions: ((_b = cache2[item2.props.id]) == null ? void 0 : _b.lastPermissions) || null,
+              lastPermissions: (itemCache == null ? void 0 : itemCache.lastPermissions) || null,
               permissions: initialPermissions,
               appState: makeStatePublic(appState),
-              lastData: ((_c = cache2[item2.props.id]) == null ? void 0 : _c.lastData) || null
+              lastData: (itemCache == null ? void 0 : itemCache.lastData) || null,
+              parent: parentData
             }
           );
           const latest = get().permissions;
@@ -2006,6 +2014,7 @@ var createPermissionsSlice = (set, get) => {
             permissions: __spreadProps(__spreadValues({}, latest), {
               cache: __spreadProps(__spreadValues({}, latest.cache), {
                 [item2.props.id]: {
+                  lastParentId: parentId,
                   lastData: item2,
                   lastPermissions: resolvedPermissions
                 }
@@ -2019,9 +2028,9 @@ var createPermissionsSlice = (set, get) => {
         }
       }
     });
-    const resolveDataForRoot = (force2 = false) => {
+    const resolvePermissionsForRoot = (force2 = false) => {
       const { state: appState } = get();
-      resolveDataForItem(
+      resolvePermissionsForItem(
         // Shim the root data in by conforming to component data shape
         {
           type: "root",
@@ -2032,16 +2041,16 @@ var createPermissionsSlice = (set, get) => {
     };
     const { item, type, root } = params;
     if (item) {
-      yield resolveDataForItem(item, force);
+      yield resolvePermissionsForItem(item, force);
     } else if (type) {
       flattenData(state, config).filter((item2) => item2.type === type).map((item2) => __async(null, null, function* () {
-        yield resolveDataForItem(item2, force);
+        yield resolvePermissionsForItem(item2, force);
       }));
     } else if (root) {
-      resolveDataForRoot(force);
+      resolvePermissionsForRoot(force);
     } else {
       flattenData(state, config).map((item2) => __async(null, null, function* () {
-        yield resolveDataForItem(item2, force);
+        yield resolvePermissionsForItem(item2, force);
       }));
     }
   });
@@ -5233,7 +5242,8 @@ var useMinEmptyHeight = ({
       }
     }
   }, [ref.current, draggedItem, onDragFinished]);
-  return [prevHeight || userMinEmptyHeight, isAnimating];
+  const returnedMinHeight = isNaN(Number(userMinEmptyHeight)) ? userMinEmptyHeight : `${userMinEmptyHeight}px`;
+  return [prevHeight ? `${prevHeight}px` : returnedMinHeight, isAnimating];
 };
 
 // lib/assign-refs.ts
@@ -5467,8 +5477,9 @@ var Item = ({
   );
 };
 var SlotRender = (0, import_react31.forwardRef)(
-  function SlotRenderInternal({ className, style, content, config, metadata }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className, style, ref, children: content.map((item) => {
+  function SlotRenderInternal({ className, style, content, config, metadata, as }, ref) {
+    const El = as != null ? as : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(El, { className, style, ref, children: content.map((item) => {
       if (!config.components[item.type]) {
         return null;
       }
@@ -5982,8 +5993,9 @@ var DropZoneEdit = (0, import_react34.forwardRef)(
     disallow,
     style,
     className,
-    minEmptyHeight: userMinEmptyHeight = 128,
-    collisionAxis
+    minEmptyHeight: userMinEmptyHeight = "128px",
+    collisionAxis,
+    as
   }, userRef) {
     const ctx = (0, import_react34.useContext)(dropZoneContext);
     const appStoreApi = useAppStoreApi();
@@ -6126,8 +6138,9 @@ var DropZoneEdit = (0, import_react34.forwardRef)(
       userMinEmptyHeight,
       ref
     });
+    const El = as != null ? as : "div";
     return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      "div",
+      El,
       {
         className: `${getClassName18({
           isRootZone,
@@ -6143,7 +6156,7 @@ var DropZoneEdit = (0, import_react34.forwardRef)(
         "data-testid": `dropzone:${zoneCompound}`,
         "data-puck-dropzone": zoneCompound,
         style: __spreadProps(__spreadValues({}, style), {
-          "--min-empty-height": `${minEmptyHeight}px`,
+          "--min-empty-height": minEmptyHeight,
           backgroundColor: RENDER_DEBUG ? getRandomColor() : style == null ? void 0 : style.backgroundColor
         }),
         children: contentIdsWithPreview.map((componentId, i) => {
@@ -6190,7 +6203,7 @@ var DropZoneRenderItem = ({
 };
 var DropZoneRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DropZoneRender, __spreadValues({}, props));
 var DropZoneRender = (0, import_react34.forwardRef)(
-  function DropZoneRenderInternal({ className, style, zone }, ref) {
+  function DropZoneRenderInternal({ className, style, zone, as }, ref) {
     const ctx = (0, import_react34.useContext)(dropZoneContext);
     const { areaId = "root" } = ctx || {};
     const { config, data, metadata } = (0, import_react34.useContext)(renderContext);
@@ -6203,13 +6216,14 @@ var DropZoneRender = (0, import_react34.forwardRef)(
         }
       }
     }, [content]);
+    const El = as != null ? as : "div";
     if (!data || !config) {
       return null;
     }
     if (zoneCompound !== rootDroppableId) {
       content = setupZone(data, zoneCompound).zones[zoneCompound];
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className, style, ref, children: content.map((item) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(El, { className, style, ref, children: content.map((item) => {
       const Component = config.components[item.type];
       if (Component) {
         return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
@@ -6516,6 +6530,7 @@ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlu
 // lib/insert-component.ts
 init_react_import();
 var insertComponent = (componentType, zone, index, appStore) => __async(null, null, function* () {
+  const { getState } = appStore;
   const id = generateId(componentType);
   const insertActionData = {
     type: "insert",
@@ -6524,8 +6539,9 @@ var insertComponent = (componentType, zone, index, appStore) => __async(null, nu
     destinationZone: zone,
     id
   };
-  const { state, dispatch, resolveComponentData: resolveComponentData2 } = appStore;
-  const insertedState = insertAction(state, insertActionData, appStore);
+  const stateBefore = getState().state;
+  const insertedState = insertAction(stateBefore, insertActionData, getState());
+  const dispatch = getState().dispatch;
   dispatch(__spreadProps(__spreadValues({}, insertActionData), {
     // Dispatch insert rather set, as user's may rely on this via onAction
     // We must always record history here so the insert is added to user history
@@ -6533,23 +6549,21 @@ var insertComponent = (componentType, zone, index, appStore) => __async(null, nu
     // entries on insert - one for the initial insert, and one when the data resolves
     recordHistory: true
   }));
-  const itemSelector = {
-    index,
-    zone
-  };
+  const itemSelector = { index, zone };
   dispatch({ type: "setUi", ui: { itemSelector } });
   const itemData = getItem(itemSelector, insertedState);
-  if (itemData) {
-    const resolved = yield resolveComponentData2(itemData, "insert");
-    if (resolved.didChange) {
-      dispatch({
-        type: "replace",
-        destinationZone: itemSelector.zone,
-        destinationIndex: itemSelector.index,
-        data: resolved.node
-      });
-    }
-  }
+  if (!itemData) return;
+  const resolveComponentData2 = getState().resolveComponentData;
+  const resolved = yield resolveComponentData2(itemData, "insert");
+  if (!resolved.didChange) return;
+  const latestItemSelector = getSelectorForId(getState().state, id);
+  if (!latestItemSelector) return;
+  dispatch({
+    type: "replace",
+    destinationZone: latestItemSelector.zone,
+    destinationIndex: latestItemSelector.index,
+    data: resolved.node
+  });
 });
 
 // components/DragDropContext/index.tsx
@@ -6786,7 +6800,7 @@ var DragDropContextClient = ({
                     thisPreview.componentType,
                     thisPreview.zone,
                     thisPreview.index,
-                    appStore.getState()
+                    appStore
                   );
                 } else if (initialSelector.current) {
                   dispatch({
@@ -7224,48 +7238,47 @@ var DefaultFields = ({
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children });
 };
 var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(null, null, function* () {
-  let currentProps;
   const { dispatch, state, selectedItem, resolveComponentData: resolveComponentData2 } = appStore.getState();
   const { data, ui } = state;
   const { itemSelector } = ui;
   const rootProps = data.root.props || data.root;
-  if (selectedItem) {
-    currentProps = selectedItem.props;
-  } else {
-    currentProps = rootProps;
-  }
-  const newProps = __spreadProps(__spreadValues({}, currentProps), {
-    [fieldName]: value
-  });
+  const currentProps = selectedItem ? selectedItem.props : rootProps;
+  const newProps = __spreadProps(__spreadValues({}, currentProps), { [fieldName]: value });
   if (selectedItem && itemSelector) {
+    const resolved = yield resolveComponentData2(
+      __spreadProps(__spreadValues({}, selectedItem), { props: newProps }),
+      "replace"
+    );
+    const latestSelector = getSelectorForId(
+      appStore.getState().state,
+      selectedItem.props.id
+    );
+    if (!latestSelector) return;
     dispatch({
       type: "replace",
-      destinationIndex: itemSelector.index,
-      destinationZone: itemSelector.zone || rootDroppableId,
-      data: (yield resolveComponentData2(
-        __spreadProps(__spreadValues({}, selectedItem), { props: newProps }),
+      destinationIndex: latestSelector.index,
+      destinationZone: latestSelector.zone || rootDroppableId,
+      data: resolved.node,
+      ui: updatedUi
+    });
+    return;
+  }
+  if (data.root.props) {
+    dispatch({
+      type: "replaceRoot",
+      root: (yield resolveComponentData2(
+        __spreadProps(__spreadValues({}, data.root), { props: newProps }),
         "replace"
       )).node,
-      ui: updatedUi
+      ui: __spreadValues(__spreadValues({}, ui), updatedUi),
+      recordHistory: true
     });
-  } else {
-    if (data.root.props) {
-      dispatch({
-        type: "replaceRoot",
-        root: (yield resolveComponentData2(
-          __spreadProps(__spreadValues({}, data.root), { props: newProps }),
-          "replace"
-        )).node,
-        ui: __spreadValues(__spreadValues({}, ui), updatedUi),
-        recordHistory: true
-      });
-    } else {
-      dispatch({
-        type: "setData",
-        data: { root: newProps }
-      });
-    }
+    return;
   }
+  dispatch({
+    type: "setData",
+    data: { root: newProps }
+  });
 });
 var FieldsChild = ({ fieldName }) => {
   const field = useAppStore((s) => s.fields.fields[fieldName]);
@@ -8731,7 +8744,15 @@ var generateUsePuck = (store) => {
     selectedItem: store.selectedItem || null,
     getItemBySelector: (selector) => getItem(selector, store.state),
     getItemById: (id) => store.state.indexes.nodes[id].data,
-    getSelectorForId: (id) => getSelectorForId(store.state, id)
+    getSelectorForId: (id) => getSelectorForId(store.state, id),
+    getParentById: (id) => {
+      const node = store.state.indexes.nodes[id];
+      const parentId = node.parentId;
+      if (parentId === null) return;
+      const parentNode = store.state.indexes.nodes[parentId];
+      if (!parentNode) return;
+      return parentNode.data;
+    }
   };
   return storeData;
 };

package/dist/index.mjs

@@ -18,14 +18,14 @@ import {
   setDeep,
   useGetPuck,
   usePuck
-} from "./chunk-NW2GGRCZ.mjs";
+} from "./chunk-UABEUL66.mjs";
 import {
   init_react_import,
   migrate,
   resolveAllData,
   transformProps,
   walkTree
-} from "./chunk-TC25DCTQ.mjs";
+} from "./chunk-JA7SEUEH.mjs";
 
 // bundle/index.ts
 init_react_import();

package/dist/no-external.d.mts

@@ -1,4 +1,4 @@
-export { ad as Adaptor, A as AppState, ab as ArrayField, B as ArrayState, ar as AsFieldProps, X as BaseData, a5 as BaseField, af as CacheOpts, f as ComponentConfig, J as ComponentConfigExtensions, T as ComponentConfigParams, a as ComponentData, a0 as ComponentDataMap, _ as ComponentDataOptionalId, a3 as ComponentMetadata, C as Config, Q as ConfigParams, a1 as Content, ai as CustomField, ah as CustomFieldRender, j as Data, ao as DefaultComponentProps, L as DefaultComponents, al as DefaultRootFieldProps, an as DefaultRootProps, am as DefaultRootRenderProps, o as Direction, p as DragAxis, ag as ExternalField, ae as ExternalFieldWithAdaptor, N as ExtractConfigParams, at as ExtractField, h as Field, a4 as FieldMetadata, i as FieldProps, y as FieldRenderFunctions, u as FieldTransformFn, s as FieldTransformFnParams, g as FieldTransforms, F as Fields, H as History, I as IframeConfig, l as InitialHistory, z as ItemWithId, $ as MappedItem, M as Metadata, a7 as NumberField, ac as ObjectField, k as OnAction, x as OverrideKey, O as Overrides, P as Permissions, d as Plugin, b as PuckAction, G as PuckComponent, ak as PuckContext, a2 as PuckMetadata, aa as RadioField, c as ResolveDataTrigger, K as RootConfig, Z as RootData, R as RootDataWithProps, Y as RootDataWithoutProps, a9 as SelectField, S as Slot, E as SlotComponent, aj as SlotField, a6 as TextField, a8 as TextareaField, e as UiState, U as UserGenerics, q as Viewport, V as Viewports, as as WithChildren, ap as WithId, aq as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-CkSoNBF7.mjs';
+export { ad as Adaptor, A as AppState, ab as ArrayField, B as ArrayState, ar as AsFieldProps, X as BaseData, a5 as BaseField, af as CacheOpts, f as ComponentConfig, J as ComponentConfigExtensions, T as ComponentConfigParams, a as ComponentData, a0 as ComponentDataMap, _ as ComponentDataOptionalId, a3 as ComponentMetadata, C as Config, Q as ConfigParams, a1 as Content, ai as CustomField, ah as CustomFieldRender, j as Data, ao as DefaultComponentProps, L as DefaultComponents, al as DefaultRootFieldProps, an as DefaultRootProps, am as DefaultRootRenderProps, o as Direction, p as DragAxis, ag as ExternalField, ae as ExternalFieldWithAdaptor, N as ExtractConfigParams, at as ExtractField, h as Field, a4 as FieldMetadata, i as FieldProps, y as FieldRenderFunctions, u as FieldTransformFn, s as FieldTransformFnParams, g as FieldTransforms, F as Fields, H as History, I as IframeConfig, l as InitialHistory, z as ItemWithId, $ as MappedItem, M as Metadata, a7 as NumberField, ac as ObjectField, k as OnAction, x as OverrideKey, O as Overrides, P as Permissions, d as Plugin, b as PuckAction, G as PuckComponent, ak as PuckContext, a2 as PuckMetadata, aa as RadioField, c as ResolveDataTrigger, K as RootConfig, Z as RootData, R as RootDataWithProps, Y as RootDataWithoutProps, a9 as SelectField, S as Slot, E as SlotComponent, aj as SlotField, a6 as TextField, a8 as TextareaField, e as UiState, U as UserGenerics, q as Viewport, V as Viewports, as as WithChildren, ap as WithId, aq as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-CgWnYC1X.mjs';
 export { Action, ActionBar, AutoField, Button, Drawer, DropZone, FieldLabel, Group, IconButton, Label, Puck, PuckApi, Render, UsePuckData, createUsePuck, registerOverlayPortal, renderContext, setDeep, useGetPuck, usePuck } from './index.mjs';
 import 'react';
 import 'react/jsx-runtime';

package/dist/no-external.d.ts

@@ -1,4 +1,4 @@
-export { ad as Adaptor, A as AppState, ab as ArrayField, B as ArrayState, ar as AsFieldProps, X as BaseData, a5 as BaseField, af as CacheOpts, f as ComponentConfig, J as ComponentConfigExtensions, T as ComponentConfigParams, a as ComponentData, a0 as ComponentDataMap, _ as ComponentDataOptionalId, a3 as ComponentMetadata, C as Config, Q as ConfigParams, a1 as Content, ai as CustomField, ah as CustomFieldRender, j as Data, ao as DefaultComponentProps, L as DefaultComponents, al as DefaultRootFieldProps, an as DefaultRootProps, am as DefaultRootRenderProps, o as Direction, p as DragAxis, ag as ExternalField, ae as ExternalFieldWithAdaptor, N as ExtractConfigParams, at as ExtractField, h as Field, a4 as FieldMetadata, i as FieldProps, y as FieldRenderFunctions, u as FieldTransformFn, s as FieldTransformFnParams, g as FieldTransforms, F as Fields, H as History, I as IframeConfig, l as InitialHistory, z as ItemWithId, $ as MappedItem, M as Metadata, a7 as NumberField, ac as ObjectField, k as OnAction, x as OverrideKey, O as Overrides, P as Permissions, d as Plugin, b as PuckAction, G as PuckComponent, ak as PuckContext, a2 as PuckMetadata, aa as RadioField, c as ResolveDataTrigger, K as RootConfig, Z as RootData, R as RootDataWithProps, Y as RootDataWithoutProps, a9 as SelectField, S as Slot, E as SlotComponent, aj as SlotField, a6 as TextField, a8 as TextareaField, e as UiState, U as UserGenerics, q as Viewport, V as Viewports, as as WithChildren, ap as WithId, aq as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-CkSoNBF7.js';
+export { ad as Adaptor, A as AppState, ab as ArrayField, B as ArrayState, ar as AsFieldProps, X as BaseData, a5 as BaseField, af as CacheOpts, f as ComponentConfig, J as ComponentConfigExtensions, T as ComponentConfigParams, a as ComponentData, a0 as ComponentDataMap, _ as ComponentDataOptionalId, a3 as ComponentMetadata, C as Config, Q as ConfigParams, a1 as Content, ai as CustomField, ah as CustomFieldRender, j as Data, ao as DefaultComponentProps, L as DefaultComponents, al as DefaultRootFieldProps, an as DefaultRootProps, am as DefaultRootRenderProps, o as Direction, p as DragAxis, ag as ExternalField, ae as ExternalFieldWithAdaptor, N as ExtractConfigParams, at as ExtractField, h as Field, a4 as FieldMetadata, i as FieldProps, y as FieldRenderFunctions, u as FieldTransformFn, s as FieldTransformFnParams, g as FieldTransforms, F as Fields, H as History, I as IframeConfig, l as InitialHistory, z as ItemWithId, $ as MappedItem, M as Metadata, a7 as NumberField, ac as ObjectField, k as OnAction, x as OverrideKey, O as Overrides, P as Permissions, d as Plugin, b as PuckAction, G as PuckComponent, ak as PuckContext, a2 as PuckMetadata, aa as RadioField, c as ResolveDataTrigger, K as RootConfig, Z as RootData, R as RootDataWithProps, Y as RootDataWithoutProps, a9 as SelectField, S as Slot, E as SlotComponent, aj as SlotField, a6 as TextField, a8 as TextareaField, e as UiState, U as UserGenerics, q as Viewport, V as Viewports, as as WithChildren, ap as WithId, aq as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-CgWnYC1X.js';
 export { Action, ActionBar, AutoField, Button, Drawer, DropZone, FieldLabel, Group, IconButton, Label, Puck, PuckApi, Render, UsePuckData, createUsePuck, registerOverlayPortal, renderContext, setDeep, useGetPuck, usePuck } from './index.js';
 import 'react';
 import 'react/jsx-runtime';

package/dist/no-external.js

@@ -1979,26 +1979,34 @@ var createPermissionsSlice = (set, get) => {
   const resolvePermissions = (..._0) => __async(null, [..._0], function* (params = {}, force) {
     const { state, permissions, config } = get();
     const { cache: cache2, globalPermissions } = permissions;
-    const resolveDataForItem = (item2, force2 = false) => __async(null, null, function* () {
-      var _a, _b, _c;
+    const resolvePermissionsForItem = (item2, force2 = false) => __async(null, null, function* () {
+      var _a, _b;
       const { config: config2, state: appState, setComponentLoading } = get();
+      const itemCache = cache2[item2.props.id];
+      const nodes = appState.indexes.nodes;
+      const parentId = (_a = nodes[item2.props.id]) == null ? void 0 : _a.parentId;
+      const parentNode = parentId ? nodes[parentId] : null;
+      const parentData = (_b = parentNode == null ? void 0 : parentNode.data) != null ? _b : null;
       const componentConfig = item2.type === "root" ? config2.root : config2.components[item2.type];
       if (!componentConfig) {
         return;
       }
       const initialPermissions = __spreadValues(__spreadValues({}, globalPermissions), componentConfig.permissions);
       if (componentConfig.resolvePermissions) {
-        const changed = getChanged(item2, (_a = cache2[item2.props.id]) == null ? void 0 : _a.lastData);
-        if (Object.values(changed).some((el) => el === true) || force2) {
+        const changed = getChanged(item2, itemCache == null ? void 0 : itemCache.lastData);
+        const propsChanged = Object.values(changed).some((el) => el === true);
+        const parentChanged = (itemCache == null ? void 0 : itemCache.lastParentId) !== parentId;
+        if (propsChanged || parentChanged || force2) {
           const clearTimeout2 = setComponentLoading(item2.props.id, true, 50);
           const resolvedPermissions = yield componentConfig.resolvePermissions(
             item2,
             {
               changed,
-              lastPermissions: ((_b = cache2[item2.props.id]) == null ? void 0 : _b.lastPermissions) || null,
+              lastPermissions: (itemCache == null ? void 0 : itemCache.lastPermissions) || null,
               permissions: initialPermissions,
               appState: makeStatePublic(appState),
-              lastData: ((_c = cache2[item2.props.id]) == null ? void 0 : _c.lastData) || null
+              lastData: (itemCache == null ? void 0 : itemCache.lastData) || null,
+              parent: parentData
             }
           );
           const latest = get().permissions;
@@ -2006,6 +2014,7 @@ var createPermissionsSlice = (set, get) => {
             permissions: __spreadProps(__spreadValues({}, latest), {
               cache: __spreadProps(__spreadValues({}, latest.cache), {
                 [item2.props.id]: {
+                  lastParentId: parentId,
                   lastData: item2,
                   lastPermissions: resolvedPermissions
                 }
@@ -2019,9 +2028,9 @@ var createPermissionsSlice = (set, get) => {
         }
       }
     });
-    const resolveDataForRoot = (force2 = false) => {
+    const resolvePermissionsForRoot = (force2 = false) => {
       const { state: appState } = get();
-      resolveDataForItem(
+      resolvePermissionsForItem(
         // Shim the root data in by conforming to component data shape
         {
           type: "root",
@@ -2032,16 +2041,16 @@ var createPermissionsSlice = (set, get) => {
     };
     const { item, type, root } = params;
     if (item) {
-      yield resolveDataForItem(item, force);
+      yield resolvePermissionsForItem(item, force);
     } else if (type) {
       flattenData(state, config).filter((item2) => item2.type === type).map((item2) => __async(null, null, function* () {
-        yield resolveDataForItem(item2, force);
+        yield resolvePermissionsForItem(item2, force);
       }));
     } else if (root) {
-      resolveDataForRoot(force);
+      resolvePermissionsForRoot(force);
     } else {
       flattenData(state, config).map((item2) => __async(null, null, function* () {
-        yield resolveDataForItem(item2, force);
+        yield resolvePermissionsForItem(item2, force);
       }));
     }
   });
@@ -5233,7 +5242,8 @@ var useMinEmptyHeight = ({
       }
     }
   }, [ref.current, draggedItem, onDragFinished]);
-  return [prevHeight || userMinEmptyHeight, isAnimating];
+  const returnedMinHeight = isNaN(Number(userMinEmptyHeight)) ? userMinEmptyHeight : `${userMinEmptyHeight}px`;
+  return [prevHeight ? `${prevHeight}px` : returnedMinHeight, isAnimating];
 };
 
 // lib/assign-refs.ts
@@ -5467,8 +5477,9 @@ var Item = ({
   );
 };
 var SlotRender = (0, import_react31.forwardRef)(
-  function SlotRenderInternal({ className, style, content, config, metadata }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className, style, ref, children: content.map((item) => {
+  function SlotRenderInternal({ className, style, content, config, metadata, as }, ref) {
+    const El = as != null ? as : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(El, { className, style, ref, children: content.map((item) => {
       if (!config.components[item.type]) {
         return null;
       }
@@ -5982,8 +5993,9 @@ var DropZoneEdit = (0, import_react34.forwardRef)(
     disallow,
     style,
     className,
-    minEmptyHeight: userMinEmptyHeight = 128,
-    collisionAxis
+    minEmptyHeight: userMinEmptyHeight = "128px",
+    collisionAxis,
+    as
   }, userRef) {
     const ctx = (0, import_react34.useContext)(dropZoneContext);
     const appStoreApi = useAppStoreApi();
@@ -6126,8 +6138,9 @@ var DropZoneEdit = (0, import_react34.forwardRef)(
       userMinEmptyHeight,
       ref
     });
+    const El = as != null ? as : "div";
     return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      "div",
+      El,
       {
         className: `${getClassName18({
           isRootZone,
@@ -6143,7 +6156,7 @@ var DropZoneEdit = (0, import_react34.forwardRef)(
         "data-testid": `dropzone:${zoneCompound}`,
         "data-puck-dropzone": zoneCompound,
         style: __spreadProps(__spreadValues({}, style), {
-          "--min-empty-height": `${minEmptyHeight}px`,
+          "--min-empty-height": minEmptyHeight,
           backgroundColor: RENDER_DEBUG ? getRandomColor() : style == null ? void 0 : style.backgroundColor
         }),
         children: contentIdsWithPreview.map((componentId, i) => {
@@ -6190,7 +6203,7 @@ var DropZoneRenderItem = ({
 };
 var DropZoneRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DropZoneRender, __spreadValues({}, props));
 var DropZoneRender = (0, import_react34.forwardRef)(
-  function DropZoneRenderInternal({ className, style, zone }, ref) {
+  function DropZoneRenderInternal({ className, style, zone, as }, ref) {
     const ctx = (0, import_react34.useContext)(dropZoneContext);
     const { areaId = "root" } = ctx || {};
     const { config, data, metadata } = (0, import_react34.useContext)(renderContext);
@@ -6203,13 +6216,14 @@ var DropZoneRender = (0, import_react34.forwardRef)(
         }
       }
     }, [content]);
+    const El = as != null ? as : "div";
     if (!data || !config) {
       return null;
     }
     if (zoneCompound !== rootDroppableId) {
       content = setupZone(data, zoneCompound).zones[zoneCompound];
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className, style, ref, children: content.map((item) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(El, { className, style, ref, children: content.map((item) => {
       const Component = config.components[item.type];
       if (Component) {
         return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
@@ -6516,6 +6530,7 @@ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlu
 // lib/insert-component.ts
 init_react_import();
 var insertComponent = (componentType, zone, index, appStore) => __async(null, null, function* () {
+  const { getState } = appStore;
   const id = generateId(componentType);
   const insertActionData = {
     type: "insert",
@@ -6524,8 +6539,9 @@ var insertComponent = (componentType, zone, index, appStore) => __async(null, nu
     destinationZone: zone,
     id
   };
-  const { state, dispatch, resolveComponentData: resolveComponentData2 } = appStore;
-  const insertedState = insertAction(state, insertActionData, appStore);
+  const stateBefore = getState().state;
+  const insertedState = insertAction(stateBefore, insertActionData, getState());
+  const dispatch = getState().dispatch;
   dispatch(__spreadProps(__spreadValues({}, insertActionData), {
     // Dispatch insert rather set, as user's may rely on this via onAction
     // We must always record history here so the insert is added to user history
@@ -6533,23 +6549,21 @@ var insertComponent = (componentType, zone, index, appStore) => __async(null, nu
     // entries on insert - one for the initial insert, and one when the data resolves
     recordHistory: true
   }));
-  const itemSelector = {
-    index,
-    zone
-  };
+  const itemSelector = { index, zone };
   dispatch({ type: "setUi", ui: { itemSelector } });
   const itemData = getItem(itemSelector, insertedState);
-  if (itemData) {
-    const resolved = yield resolveComponentData2(itemData, "insert");
-    if (resolved.didChange) {
-      dispatch({
-        type: "replace",
-        destinationZone: itemSelector.zone,
-        destinationIndex: itemSelector.index,
-        data: resolved.node
-      });
-    }
-  }
+  if (!itemData) return;
+  const resolveComponentData2 = getState().resolveComponentData;
+  const resolved = yield resolveComponentData2(itemData, "insert");
+  if (!resolved.didChange) return;
+  const latestItemSelector = getSelectorForId(getState().state, id);
+  if (!latestItemSelector) return;
+  dispatch({
+    type: "replace",
+    destinationZone: latestItemSelector.zone,
+    destinationIndex: latestItemSelector.index,
+    data: resolved.node
+  });
 });
 
 // components/DragDropContext/index.tsx
@@ -6786,7 +6800,7 @@ var DragDropContextClient = ({
                     thisPreview.componentType,
                     thisPreview.zone,
                     thisPreview.index,
-                    appStore.getState()
+                    appStore
                   );
                 } else if (initialSelector.current) {
                   dispatch({
@@ -7224,48 +7238,47 @@ var DefaultFields = ({
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children });
 };
 var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(null, null, function* () {
-  let currentProps;
   const { dispatch, state, selectedItem, resolveComponentData: resolveComponentData2 } = appStore.getState();
   const { data, ui } = state;
   const { itemSelector } = ui;
   const rootProps = data.root.props || data.root;
-  if (selectedItem) {
-    currentProps = selectedItem.props;
-  } else {
-    currentProps = rootProps;
-  }
-  const newProps = __spreadProps(__spreadValues({}, currentProps), {
-    [fieldName]: value
-  });
+  const currentProps = selectedItem ? selectedItem.props : rootProps;
+  const newProps = __spreadProps(__spreadValues({}, currentProps), { [fieldName]: value });
   if (selectedItem && itemSelector) {
+    const resolved = yield resolveComponentData2(
+      __spreadProps(__spreadValues({}, selectedItem), { props: newProps }),
+      "replace"
+    );
+    const latestSelector = getSelectorForId(
+      appStore.getState().state,
+      selectedItem.props.id
+    );
+    if (!latestSelector) return;
     dispatch({
       type: "replace",
-      destinationIndex: itemSelector.index,
-      destinationZone: itemSelector.zone || rootDroppableId,
-      data: (yield resolveComponentData2(
-        __spreadProps(__spreadValues({}, selectedItem), { props: newProps }),
+      destinationIndex: latestSelector.index,
+      destinationZone: latestSelector.zone || rootDroppableId,
+      data: resolved.node,
+      ui: updatedUi
+    });
+    return;
+  }
+  if (data.root.props) {
+    dispatch({
+      type: "replaceRoot",
+      root: (yield resolveComponentData2(
+        __spreadProps(__spreadValues({}, data.root), { props: newProps }),
         "replace"
       )).node,
-      ui: updatedUi
+      ui: __spreadValues(__spreadValues({}, ui), updatedUi),
+      recordHistory: true
     });
-  } else {
-    if (data.root.props) {
-      dispatch({
-        type: "replaceRoot",
-        root: (yield resolveComponentData2(
-          __spreadProps(__spreadValues({}, data.root), { props: newProps }),
-          "replace"
-        )).node,
-        ui: __spreadValues(__spreadValues({}, ui), updatedUi),
-        recordHistory: true
-      });
-    } else {
-      dispatch({
-        type: "setData",
-        data: { root: newProps }
-      });
-    }
+    return;
   }
+  dispatch({
+    type: "setData",
+    data: { root: newProps }
+  });
 });
 var FieldsChild = ({ fieldName }) => {
   const field = useAppStore((s) => s.fields.fields[fieldName]);
@@ -8731,7 +8744,15 @@ var generateUsePuck = (store) => {
     selectedItem: store.selectedItem || null,
     getItemBySelector: (selector) => getItem(selector, store.state),
     getItemById: (id) => store.state.indexes.nodes[id].data,
-    getSelectorForId: (id) => getSelectorForId(store.state, id)
+    getSelectorForId: (id) => getSelectorForId(store.state, id),
+    getParentById: (id) => {
+      const node = store.state.indexes.nodes[id];
+      const parentId = node.parentId;
+      if (parentId === null) return;
+      const parentNode = store.state.indexes.nodes[parentId];
+      if (!parentNode) return;
+      return parentNode.data;
+    }
   };
   return storeData;
 };

package/dist/no-external.mjs

@@ -18,14 +18,14 @@ import {
   setDeep,
   useGetPuck,
   usePuck
-} from "./chunk-NW2GGRCZ.mjs";
+} from "./chunk-UABEUL66.mjs";
 import {
   init_react_import,
   migrate,
   resolveAllData,
   transformProps,
   walkTree
-} from "./chunk-TC25DCTQ.mjs";
+} from "./chunk-JA7SEUEH.mjs";
 
 // bundle/no-external.ts
 init_react_import();

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, M as Metadata } from './walk-tree-CkSoNBF7.mjs';
-export { m as migrate, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-CkSoNBF7.mjs';
+import { C as Config, U as UserGenerics, M as Metadata } from './walk-tree-CgWnYC1X.mjs';
+export { m as migrate, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-CgWnYC1X.mjs';
 import 'react';
 
 declare function Render<UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>>({ config, data, metadata, }: {

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, M as Metadata } from './walk-tree-CkSoNBF7.js';
-export { m as migrate, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-CkSoNBF7.js';
+import { C as Config, U as UserGenerics, M as Metadata } from './walk-tree-CgWnYC1X.js';
+export { m as migrate, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-CgWnYC1X.js';
 import 'react';
 
 declare function Render<UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>>({ config, data, metadata, }: {

package/dist/rsc.js

@@ -346,8 +346,9 @@ var Item = ({
   );
 };
 var SlotRender = (0, import_react3.forwardRef)(
-  function SlotRenderInternal({ className, style, content, config, metadata }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style, ref, children: content.map((item) => {
+  function SlotRenderInternal({ className, style, content, config, metadata, as }, ref) {
+    const El = as != null ? as : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(El, { className, style, ref, children: content.map((item) => {
       if (!config.components[item.type]) {
         return null;
       }

package/dist/rsc.mjs

@@ -12,7 +12,7 @@ import {
   transformProps,
   useSlots,
   walkTree
-} from "./chunk-TC25DCTQ.mjs";
+} from "./chunk-JA7SEUEH.mjs";
 
 // bundle/rsc.tsx
 init_react_import();

package/dist/{walk-tree-CkSoNBF7.d.mts → walk-tree-CgWnYC1X.d.mts}

@@ -1,4 +1,4 @@
-import { ReactElement, CSSProperties, ReactNode, JSX } from 'react';
+import { ReactElement, ReactNode, CSSProperties, ElementType, JSX } from 'react';
 
 type ItemSelector = {
     index: number;
@@ -53,7 +53,7 @@ interface ArrayField<Props extends {
         } ? Field<Props[0][SubPropName], UserField> | UserField : Field<Props[0][SubPropName], UserField>;
     };
     defaultItemProps?: Props[0] | ((index: number) => Props[0]);
-    getItemSummary?: (item: Props[0], index?: number) => string;
+    getItemSummary?: (item: Props[0], index?: number) => ReactNode;
     max?: number;
     min?: number;
 }
@@ -80,7 +80,7 @@ type ExternalFieldWithAdaptor<Props extends any = {
     placeholder?: string;
     adaptor: Adaptor<any, any, Props>;
     adaptorParams?: object;
-    getItemSummary: (item: NotUndefined<Props>, index?: number) => string;
+    getItemSummary: (item: NotUndefined<Props>, index?: number) => ReactNode;
 };
 type CacheOpts = {
     enabled?: boolean;
@@ -97,7 +97,7 @@ interface ExternalField<Props extends any = {
     }) => Promise<any[] | null>;
     mapProp?: (value: any) => Props;
     mapRow?: (value: any) => Record<string, string | number | ReactElement>;
-    getItemSummary?: (item: NotUndefined<Props>, index?: number) => string;
+    getItemSummary?: (item: NotUndefined<Props>, index?: number) => ReactNode;
     showSearch?: boolean;
     renderFooter?: (props: {
         items: any[];
@@ -146,9 +146,10 @@ type DropZoneProps = {
     allow?: string[];
     disallow?: string[];
     style?: CSSProperties;
-    minEmptyHeight?: number;
+    minEmptyHeight?: CSSProperties["minHeight"] | number;
     className?: string;
     collisionAxis?: DragAxis;
+    as?: ElementType;
 };
 
 type PuckContext = {
@@ -239,6 +240,7 @@ UserField extends BaseField = {}> = {
         permissions: Partial<Permissions>;
         appState: AppState;
         lastData: DataShape | null;
+        parent: ComponentData | null;
     }) => Promise<Partial<Permissions>> | Partial<Permissions>;
     metadata?: ComponentMetadata;
 } & ComponentConfigExtensions;

package/dist/{walk-tree-CkSoNBF7.d.ts → walk-tree-CgWnYC1X.d.ts}

@@ -1,4 +1,4 @@
-import { ReactElement, CSSProperties, ReactNode, JSX } from 'react';
+import { ReactElement, ReactNode, CSSProperties, ElementType, JSX } from 'react';
 
 type ItemSelector = {
     index: number;
@@ -53,7 +53,7 @@ interface ArrayField<Props extends {
         } ? Field<Props[0][SubPropName], UserField> | UserField : Field<Props[0][SubPropName], UserField>;
     };
     defaultItemProps?: Props[0] | ((index: number) => Props[0]);
-    getItemSummary?: (item: Props[0], index?: number) => string;
+    getItemSummary?: (item: Props[0], index?: number) => ReactNode;
     max?: number;
     min?: number;
 }
@@ -80,7 +80,7 @@ type ExternalFieldWithAdaptor<Props extends any = {
     placeholder?: string;
     adaptor: Adaptor<any, any, Props>;
     adaptorParams?: object;
-    getItemSummary: (item: NotUndefined<Props>, index?: number) => string;
+    getItemSummary: (item: NotUndefined<Props>, index?: number) => ReactNode;
 };
 type CacheOpts = {
     enabled?: boolean;
@@ -97,7 +97,7 @@ interface ExternalField<Props extends any = {
     }) => Promise<any[] | null>;
     mapProp?: (value: any) => Props;
     mapRow?: (value: any) => Record<string, string | number | ReactElement>;
-    getItemSummary?: (item: NotUndefined<Props>, index?: number) => string;
+    getItemSummary?: (item: NotUndefined<Props>, index?: number) => ReactNode;
     showSearch?: boolean;
     renderFooter?: (props: {
         items: any[];
@@ -146,9 +146,10 @@ type DropZoneProps = {
     allow?: string[];
     disallow?: string[];
     style?: CSSProperties;
-    minEmptyHeight?: number;
+    minEmptyHeight?: CSSProperties["minHeight"] | number;
     className?: string;
     collisionAxis?: DragAxis;
+    as?: ElementType;
 };
 
 type PuckContext = {
@@ -239,6 +240,7 @@ UserField extends BaseField = {}> = {
         permissions: Partial<Permissions>;
         appState: AppState;
         lastData: DataShape | null;
+        parent: ComponentData | null;
     }) => Promise<Partial<Permissions>> | Partial<Permissions>;
     metadata?: ComponentMetadata;
 } & ComponentConfigExtensions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.21.0-canary.ec77dd9f",
+  "version": "0.21.0-canary.ed10e2a4",
   "description": "The open-source visual editor for React",
   "author": "Chris Villa <chris@puckeditor.com>",
   "repository": "measuredco/puck",