@measured/puck 0.17.0-canary.ccec96e → 0.17.0-canary.f71da6d

package/dist/index.css

@@ -204,27 +204,27 @@
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css/#css-module-data */
-._Input_3pq3z_1 {
+._InputWrapper_1l5m8_1 {
   color: var(--puck-color-grey-04);
   padding: 16px;
   padding-bottom: 12px;
   display: block;
 }
-._Input_3pq3z_1 ._Input_3pq3z_1 {
+._InputWrapper_1l5m8_1 + ._InputWrapper_1l5m8_1 {
+  border-top: 1px solid var(--puck-color-grey-09);
+  margin-top: 8px;
+}
+._Input_1l5m8_1 ._InputWrapper_1l5m8_1 {
   padding: 0px;
 }
-._Input_3pq3z_1 * {
+._Input_1l5m8_1 * {
   box-sizing: border-box;
 }
-._Input_3pq3z_1 + ._Input_3pq3z_1 {
-  border-top: 1px solid var(--puck-color-grey-09);
-  margin-top: 8px;
-}
-._Input_3pq3z_1 ._Input_3pq3z_1 + ._Input_3pq3z_1 {
+._Input_1l5m8_1 ._InputWrapper_1l5m8_1 + ._InputWrapper_1l5m8_1 {
   border-top: 0px;
   margin-top: 12px;
 }
-._Input-label_3pq3z_26 {
+._Input-label_1l5m8_26 {
   align-items: center;
   color: var(--puck-color-grey-04);
   display: flex;
@@ -232,17 +232,17 @@
   font-size: var(--puck-font-size-xxs);
   font-weight: 600;
 }
-._Input-labelIcon_3pq3z_35 {
+._Input-labelIcon_1l5m8_35 {
   color: var(--puck-color-grey-07);
   display: flex;
   margin-right: 4px;
   padding-left: 4px;
 }
-._Input-disabledIcon_3pq3z_42 {
+._Input-disabledIcon_1l5m8_42 {
   color: var(--puck-color-grey-05);
   margin-left: auto;
 }
-._Input-input_3pq3z_47 {
+._Input-input_1l5m8_47 {
   background: var(--puck-color-white);
   border-width: 1px;
   border-style: solid;
@@ -254,7 +254,7 @@
   transition: border-color 50ms ease-in;
   width: 100%;
 }
-select._Input-input_3pq3z_47 {
+select._Input-input_1l5m8_47 {
   appearance: none;
   background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
   background-size: 12px;
@@ -264,25 +264,25 @@ select._Input-input_3pq3z_47 {
   cursor: pointer;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._Input_3pq3z_1:has(> input):hover ._Input-input_3pq3z_47:not([readonly]),
-  ._Input_3pq3z_1:has(> textarea):hover ._Input-input_3pq3z_47:not([readonly]) {
+  ._Input_1l5m8_1:has(> input):hover ._Input-input_1l5m8_47:not([readonly]),
+  ._Input_1l5m8_1:has(> textarea):hover ._Input-input_1l5m8_47:not([readonly]) {
     border-color: var(--puck-color-grey-05);
     transition: none;
   }
-  ._Input_3pq3z_1:has(> select):hover ._Input-input_3pq3z_47:not([disabled]) {
+  ._Input_1l5m8_1:has(> select):hover ._Input-input_1l5m8_47:not([disabled]) {
     background-color: var(--puck-color-azure-12);
     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%235a5a5a'><polygon points='0,0 100,0 50,50'/></svg>");
     border-color: var(--puck-color-grey-05);
     transition: none;
   }
 }
-._Input-input_3pq3z_47:focus {
+._Input-input_1l5m8_47:focus {
   border-color: var(--puck-color-grey-05);
   outline: 2px solid var(--puck-color-azure-05);
   transition: none;
 }
-._Input--readOnly_3pq3z_91 > ._Input-input_3pq3z_47,
-._Input--readOnly_3pq3z_91 > select._Input-input_3pq3z_47 {
+._Input--readOnly_1l5m8_91 > ._Input-input_1l5m8_47,
+._Input--readOnly_1l5m8_91 > select._Input-input_1l5m8_47 {
   background-color: var(--puck-color-grey-11);
   border-color: var(--puck-color-grey-09);
   color: var(--puck-color-grey-04);
@@ -291,34 +291,34 @@ select._Input-input_3pq3z_47 {
   outline: 0;
   transition: none;
 }
-._Input-radioGroupItems_3pq3z_102 {
+._Input-radioGroupItems_1l5m8_102 {
   display: flex;
   border: 1px solid var(--puck-color-grey-09);
   border-radius: 4px;
   flex-wrap: wrap;
 }
-._Input-radio_3pq3z_102 {
+._Input-radio_1l5m8_102 {
   border-right: 1px solid var(--puck-color-grey-09);
   flex-grow: 1;
 }
-._Input-radio_3pq3z_102:first-of-type {
+._Input-radio_1l5m8_102:first-of-type {
   border-bottom-left-radius: 4px;
   border-top-left-radius: 4px;
 }
-._Input-radio_3pq3z_102:first-of-type ._Input-radioInner_3pq3z_119 {
+._Input-radio_1l5m8_102:first-of-type ._Input-radioInner_1l5m8_119 {
   border-bottom-left-radius: 3px;
   border-top-left-radius: 3px;
 }
-._Input-radio_3pq3z_102:last-of-type {
+._Input-radio_1l5m8_102:last-of-type {
   border-bottom-right-radius: 4px;
   border-right: 0;
   border-top-right-radius: 4px;
 }
-._Input-radio_3pq3z_102:last-of-type ._Input-radioInner_3pq3z_119 {
+._Input-radio_1l5m8_102:last-of-type ._Input-radioInner_1l5m8_119 {
   border-bottom-right-radius: 3px;
   border-top-right-radius: 3px;
 }
-._Input-radioInner_3pq3z_119 {
+._Input-radioInner_1l5m8_119 {
   background-color: var(--puck-color-white);
   color: var(--puck-color-grey-04);
   cursor: pointer;
@@ -327,32 +327,32 @@ select._Input-input_3pq3z_47 {
   text-align: center;
   transition: background-color 50ms ease-in;
 }
-._Input-radio_3pq3z_102:has(:focus-visible) {
+._Input-radio_1l5m8_102:has(:focus-visible) {
   outline: 2px solid var(--puck-color-azure-05);
   outline-offset: 2px;
   position: relative;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._Input-radioInner_3pq3z_119:hover {
+  ._Input-radioInner_1l5m8_119:hover {
     background-color: var(--puck-color-azure-12);
     transition: none;
   }
 }
-._Input--readOnly_3pq3z_91 ._Input-radioInner_3pq3z_119 {
+._Input--readOnly_1l5m8_91 ._Input-radioInner_1l5m8_119 {
   background-color: var(--puck-color-white);
   color: var(--puck-color-grey-04);
   cursor: default;
 }
-._Input-radio_3pq3z_102 ._Input-radioInput_3pq3z_164:checked ~ ._Input-radioInner_3pq3z_119 {
+._Input-radio_1l5m8_102 ._Input-radioInput_1l5m8_164:checked ~ ._Input-radioInner_1l5m8_119 {
   background-color: var(--puck-color-azure-11);
   color: var(--puck-color-azure-04);
   font-weight: 500;
 }
-._Input--readOnly_3pq3z_91 ._Input-radioInput_3pq3z_164:checked ~ ._Input-radioInner_3pq3z_119 {
+._Input--readOnly_1l5m8_91 ._Input-radioInput_1l5m8_164:checked ~ ._Input-radioInner_1l5m8_119 {
   background-color: var(--puck-color-grey-11);
   color: var(--puck-color-grey-04);
 }
-._Input-radio_3pq3z_102 ._Input-radioInput_3pq3z_164 {
+._Input-radio_1l5m8_102 ._Input-radioInput_1l5m8_164 {
   clip: rect(0 0 0 0);
   clip-path: inset(100%);
   height: 1px;
@@ -361,7 +361,7 @@ select._Input-input_3pq3z_47 {
   white-space: nowrap;
   width: 1px;
 }
-textarea._Input-input_3pq3z_47 {
+textarea._Input-input_1l5m8_47 {
   margin-bottom: -4px;
 }
 

package/dist/index.d.mts

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

package/dist/index.d.ts

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

package/dist/index.js

@@ -276,7 +276,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css#css-module
 init_react_import();
-var styles_module_default2 = { "Input": "_Input_3pq3z_1", "Input-label": "_Input-label_3pq3z_26", "Input-labelIcon": "_Input-labelIcon_3pq3z_35", "Input-disabledIcon": "_Input-disabledIcon_3pq3z_42", "Input-input": "_Input-input_3pq3z_47", "Input--readOnly": "_Input--readOnly_3pq3z_91", "Input-radioGroupItems": "_Input-radioGroupItems_3pq3z_102", "Input-radio": "_Input-radio_3pq3z_102", "Input-radioInner": "_Input-radioInner_3pq3z_119", "Input-radioInput": "_Input-radioInput_3pq3z_164" };
+var styles_module_default2 = { "InputWrapper": "_InputWrapper_1l5m8_1", "Input": "_Input_1l5m8_1", "Input-label": "_Input-label_1l5m8_26", "Input-labelIcon": "_Input-labelIcon_1l5m8_35", "Input-disabledIcon": "_Input-disabledIcon_1l5m8_42", "Input-input": "_Input-input_1l5m8_47", "Input--readOnly": "_Input--readOnly_1l5m8_91", "Input-radioGroupItems": "_Input-radioGroupItems_1l5m8_102", "Input-radio": "_Input-radio_1l5m8_102", "Input-radioInner": "_Input-radioInner_1l5m8_119", "Input-radioInput": "_Input-radioInput_1l5m8_164" };
 
 // components/AutoField/index.tsx
 var import_react13 = require("react");
@@ -1071,7 +1071,8 @@ var defaultAppState = {
       },
       options: [],
       controlsVisible: true
-    }
+    },
+    field: { focus: null }
   }
 };
 var defaultContext = {
@@ -1415,11 +1416,13 @@ var ArrayField = ({
                 event.source.index,
                 (_b = event.destination) == null ? void 0 : _b.index
               );
-              onChange(newValue, {
+              const newUi = {
                 arrayState: __spreadProps(__spreadValues({}, state.ui.arrayState), {
                   [id]: __spreadProps(__spreadValues({}, arrayState), { items: newArrayStateItems })
                 })
-              });
+              };
+              setUi(newUi, false);
+              onChange(newValue, newUi);
               setLocalState({
                 value: newValue,
                 arrayState: __spreadProps(__spreadValues({}, arrayState), { items: newArrayStateItems })
@@ -1485,32 +1488,60 @@ var ArrayField = ({
                               children: [
                                 field.getItemSummary ? field.getItemSummary(data, i) : `Item #${_originalIndex}`,
                                 /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: getClassNameItem("rhs"), children: [
-                                  !readOnly && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassNameItem("actions"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                                    IconButton,
-                                    {
-                                      type: "button",
-                                      disabled: field.min !== void 0 && field.min >= localState.arrayState.items.length,
-                                      onClick: (e) => {
-                                        e.stopPropagation();
-                                        const existingValue = [
-                                          ...value || []
-                                        ];
-                                        const existingItems = [
-                                          ...arrayState.items || []
-                                        ];
-                                        existingValue.splice(i, 1);
-                                        existingItems.splice(i, 1);
-                                        onChange(
-                                          existingValue,
-                                          mapArrayStateToUi({
-                                            items: existingItems
-                                          })
-                                        );
-                                      },
-                                      title: "Delete",
-                                      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Trash, { size: 16 })
-                                    }
-                                  ) }) }),
+                                  !readOnly && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: getClassNameItem("actions"), children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                      IconButton,
+                                      {
+                                        type: "button",
+                                        disabled: !!addDisabled,
+                                        onClick: (e) => {
+                                          e.stopPropagation();
+                                          const existingValue = [
+                                            ...value || []
+                                          ];
+                                          existingValue.splice(
+                                            i,
+                                            0,
+                                            existingValue[i]
+                                          );
+                                          onChange(
+                                            existingValue,
+                                            mapArrayStateToUi(
+                                              regenerateArrayState(existingValue)
+                                            )
+                                          );
+                                        },
+                                        title: "Duplicate",
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Copy, { size: 16 })
+                                      }
+                                    ) }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                      IconButton,
+                                      {
+                                        type: "button",
+                                        disabled: field.min !== void 0 && field.min >= localState.arrayState.items.length,
+                                        onClick: (e) => {
+                                          e.stopPropagation();
+                                          const existingValue = [
+                                            ...value || []
+                                          ];
+                                          const existingItems = [
+                                            ...arrayState.items || []
+                                          ];
+                                          existingValue.splice(i, 1);
+                                          existingItems.splice(i, 1);
+                                          onChange(
+                                            existingValue,
+                                            mapArrayStateToUi({
+                                              items: existingItems
+                                            })
+                                          );
+                                        },
+                                        title: "Delete",
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Trash, { size: 16 })
+                                      }
+                                    ) })
+                                  ] }),
                                   /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DragIcon, {}) })
                                 ] })
                               ]
@@ -2241,6 +2272,7 @@ var useSafeId = () => {
 // components/AutoField/index.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var getClassName15 = get_class_name_factory_default("Input", styles_module_default2);
+var getClassNameWrapper = get_class_name_factory_default("InputWrapper", styles_module_default2);
 var FieldLabel = ({
   children,
   icon,
@@ -2288,7 +2320,7 @@ var FieldLabelInternal2 = ({
 };
 function AutoFieldInternal(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  const { overrides } = useAppContext();
+  const { dispatch, overrides } = useAppContext();
   const { id, Label = FieldLabelInternal2 } = props;
   const field = props.field;
   const label = field.label;
@@ -2320,23 +2352,45 @@ function AutoFieldInternal(props) {
     Label,
     id: resolvedId
   });
+  const onFocus = (0, import_react13.useCallback)(
+    (e) => {
+      if (mergedProps.name && e.target.nodeName === "INPUT") {
+        e.stopPropagation();
+        dispatch({
+          type: "setUi",
+          ui: {
+            field: { focus: mergedProps.name }
+          }
+        });
+      }
+    },
+    [mergedProps.name]
+  );
+  const onBlur = (0, import_react13.useCallback)((e) => {
+    if ("name" in e.target) {
+      dispatch({
+        type: "setUi",
+        ui: {
+          field: { focus: null }
+        }
+      });
+    }
+  }, []);
   if (field.type === "custom") {
     if (!field.render) {
       return null;
     }
     const CustomField = field.render;
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName15(), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CustomField, __spreadValues({}, mergedProps)) });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassNameWrapper(), onFocus, onBlur, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName15(), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CustomField, __spreadValues({}, mergedProps)) }) });
   }
   const children = defaultFields[field.type](mergedProps);
   const Render2 = render[field.type];
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Render2, __spreadProps(__spreadValues({}, mergedProps), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassNameWrapper(), onFocus, onBlur, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Render2, __spreadProps(__spreadValues({}, mergedProps), { children })) });
 }
-var RECENT_CHANGE_TIMEOUT = 200;
 function AutoFieldPrivate(props) {
+  const { state } = useAppContext();
   const { value, onChange } = props;
   const [localValue, setLocalValue] = (0, import_react13.useState)(value);
-  const [recentlyChanged, setRecentlyChanged] = (0, import_react13.useState)(false);
-  const timeoutRef = (0, import_react13.useRef)();
   const onChangeDb = (0, import_use_debounce.useDebouncedCallback)(
     (val, ui) => {
       onChange(val, ui);
@@ -2346,15 +2400,10 @@ function AutoFieldPrivate(props) {
   );
   const onChangeLocal = (0, import_react13.useCallback)((val, ui) => {
     setLocalValue(val);
-    setRecentlyChanged(true);
-    clearTimeout(timeoutRef.current);
-    timeoutRef.current = setTimeout(() => {
-      setRecentlyChanged(false);
-    }, RECENT_CHANGE_TIMEOUT);
     onChangeDb(val, ui);
   }, []);
   (0, import_react13.useEffect)(() => {
-    if (!recentlyChanged) {
+    if (state.ui.field.focus !== props.name) {
       setLocalValue(value);
     }
   }, [value]);
@@ -3079,7 +3128,7 @@ function DropZone(props) {
 
 // components/Puck/index.tsx
 init_react_import();
-var import_react32 = require("react");
+var import_react33 = require("react");
 
 // lib/use-placeholder-style.ts
 init_react_import();
@@ -3686,7 +3735,23 @@ init_react_import();
 var styles_module_default16 = { "PuckFields": "_PuckFields_jp3lw_1", "PuckFields--isLoading": "_PuckFields--isLoading_jp3lw_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_jp3lw_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_jp3lw_25" };
 
 // components/Puck/components/Fields/index.tsx
+var import_react22 = require("react");
+
+// lib/use-parent.ts
+init_react_import();
 var import_react21 = require("react");
+var useParent = (itemSelector) => {
+  var _a;
+  const { selectedItem, state } = useAppContext();
+  const { pathData } = (0, import_react21.useContext)(dropZoneContext) || {};
+  const item = itemSelector ? getItem(itemSelector, state.data) : selectedItem;
+  const breadcrumbs = convertPathDataToBreadcrumbs(item, pathData, state.data);
+  const lastItem = breadcrumbs[breadcrumbs.length - 1];
+  const parent = (lastItem == null ? void 0 : lastItem.selector) ? (_a = getItem(lastItem.selector, state.data)) != null ? _a : null : null;
+  return parent || null;
+};
+
+// components/Puck/components/Fields/index.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
 var defaultPageFields = {
@@ -3700,23 +3765,24 @@ var DefaultFields = ({
 var useResolvedFields = () => {
   var _a, _b;
   const { selectedItem, state, config } = useAppContext();
+  const parent = useParent();
   const { data } = state;
   const rootFields = ((_a = config.root) == null ? void 0 : _a.fields) || defaultPageFields;
   const componentConfig = selectedItem ? config.components[selectedItem.type] : null;
-  const defaultFields = (0, import_react21.useMemo)(
+  const defaultFields = (0, import_react22.useMemo)(
     () => (selectedItem ? componentConfig == null ? void 0 : componentConfig.fields : rootFields) || {},
     [selectedItem, rootFields, componentConfig == null ? void 0 : componentConfig.fields]
   );
   const rootProps = data.root.props || data.root;
-  const [lastSelectedData, setLastSelectedData] = (0, import_react21.useState)({});
-  const [resolvedFields, setResolvedFields] = (0, import_react21.useState)(defaultFields);
-  const [fieldsLoading, setFieldsLoading] = (0, import_react21.useState)(false);
+  const [lastSelectedData, setLastSelectedData] = (0, import_react22.useState)({});
+  const [resolvedFields, setResolvedFields] = (0, import_react22.useState)(defaultFields);
+  const [fieldsLoading, setFieldsLoading] = (0, import_react22.useState)(false);
   const defaultResolveFields = (_componentData, _params) => defaultFields;
   const componentData = selectedItem ? selectedItem : { props: rootProps, readOnly: data.root.readOnly };
   const hasComponentResolver = selectedItem && (componentConfig == null ? void 0 : componentConfig.resolveFields);
   const hasRootResolver = !selectedItem && ((_b = config.root) == null ? void 0 : _b.resolveFields);
   const hasResolver = hasComponentResolver || hasRootResolver;
-  const resolveFields = (0, import_react21.useCallback)(
+  const resolveFields = (0, import_react22.useCallback)(
     (..._0) => __async(void 0, [..._0], function* (fields = {}) {
       var _a2;
       const lastData = ((_a2 = lastSelectedData.props) == null ? void 0 : _a2.id) === componentData.props.id ? lastSelectedData : null;
@@ -3730,7 +3796,8 @@ var useResolvedFields = () => {
             fields,
             lastFields: resolvedFields,
             lastData,
-            appState: state
+            appState: state,
+            parent
           }
         );
       }
@@ -3740,7 +3807,8 @@ var useResolvedFields = () => {
           fields,
           lastFields: resolvedFields,
           lastData,
-          appState: state
+          appState: state,
+          parent
         });
       }
       return defaultResolveFields(componentData, {
@@ -3752,7 +3820,7 @@ var useResolvedFields = () => {
     }),
     [data, config, componentData, selectedItem, resolvedFields, state]
   );
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (hasResolver) {
       setFieldsLoading(true);
       resolveFields(defaultFields).then((fields) => {
@@ -3762,7 +3830,7 @@ var useResolvedFields = () => {
     } else {
       setResolvedFields(defaultFields);
     }
-  }, [data, defaultFields, state.ui.itemSelector, hasResolver]);
+  }, [data, defaultFields, selectedItem, hasResolver]);
   return [resolvedFields, fieldsLoading];
 };
 var Fields = () => {
@@ -3783,7 +3851,7 @@ var Fields = () => {
   const componentResolving = selectedItem ? ((_a = componentState[selectedItem == null ? void 0 : selectedItem.props.id]) == null ? void 0 : _a.loadingCount) > 0 : ((_b = componentState["puck-root"]) == null ? void 0 : _b.loadingCount) > 0;
   const isLoading = fieldsResolving || componentResolving;
   const rootProps = data.root.props || data.root;
-  const Wrapper = (0, import_react21.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
+  const Wrapper = (0, import_react22.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "form",
     {
@@ -3904,7 +3972,7 @@ init_react_import();
 
 // lib/use-component-list.tsx
 init_react_import();
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // components/ComponentList/index.tsx
 init_react_import();
@@ -3982,8 +4050,8 @@ ComponentList.Item = ComponentListItem;
 // lib/use-component-list.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var useComponentList = (config, ui) => {
-  const [componentList, setComponentList] = (0, import_react22.useState)();
-  (0, import_react22.useEffect)(() => {
+  const [componentList, setComponentList] = (0, import_react23.useState)();
+  (0, import_react23.useEffect)(() => {
     var _a, _b, _c;
     if (Object.keys(ui.componentList).length > 0) {
       const matchedComponents = [];
@@ -4052,22 +4120,22 @@ var useComponentList = (config, ui) => {
 };
 
 // components/Puck/components/Components/index.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var Components = () => {
   const { config, state, overrides } = useAppContext();
   const componentList = useComponentList(config, state.ui);
-  const Wrapper = (0, import_react23.useMemo)(() => overrides.components || "div", [overrides]);
+  const Wrapper = (0, import_react24.useMemo)(() => overrides.components || "div", [overrides]);
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ComponentList, { id: "all" }) });
 };
 
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // components/AutoFrame/index.tsx
 init_react_import();
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_object_hash = __toESM(require("object-hash"));
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime31 = require("react/jsx-runtime");
@@ -4113,7 +4181,7 @@ var CopyHostStyles = ({
   onStylesLoaded = () => null
 }) => {
   const { document: doc, window: win } = useFrame();
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!win || !doc) {
       return () => {
       };
@@ -4272,8 +4340,8 @@ var CopyHostStyles = ({
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children });
 };
-var autoFrameContext = (0, import_react24.createContext)({});
-var useFrame = () => (0, import_react24.useContext)(autoFrameContext);
+var autoFrameContext = (0, import_react25.createContext)({});
+var useFrame = () => (0, import_react25.useContext)(autoFrameContext);
 function AutoFrame(_a) {
   var _b = _a, {
     children,
@@ -4288,11 +4356,11 @@ function AutoFrame(_a) {
     "id",
     "onStylesLoaded"
   ]);
-  const [loaded, setLoaded] = (0, import_react24.useState)(false);
-  const [ctx, setCtx] = (0, import_react24.useState)({});
-  const ref = (0, import_react24.useRef)(null);
-  const [mountTarget, setMountTarget] = (0, import_react24.useState)();
-  (0, import_react24.useEffect)(() => {
+  const [loaded, setLoaded] = (0, import_react25.useState)(false);
+  const [ctx, setCtx] = (0, import_react25.useState)({});
+  const ref = (0, import_react25.useRef)(null);
+  const [mountTarget, setMountTarget] = (0, import_react25.useState)();
+  (0, import_react25.useEffect)(() => {
     var _a2;
     if (ref.current) {
       setCtx({
@@ -4328,7 +4396,7 @@ var import_jsx_runtime32 = require("react/jsx-runtime");
 var getClassName23 = get_class_name_factory_default("PuckPreview", styles_module_default18);
 var Preview = ({ id = "puck-preview" }) => {
   const { config, dispatch, state, setStatus, iframe, overrides } = useAppContext();
-  const Page = (0, import_react25.useCallback)(
+  const Page = (0, import_react26.useCallback)(
     (pageProps) => {
       var _a, _b;
       return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadValues({
@@ -4337,7 +4405,7 @@ var Preview = ({ id = "puck-preview" }) => {
     },
     [config.root]
   );
-  const Frame = (0, import_react25.useMemo)(() => overrides.iframe, [overrides]);
+  const Frame = (0, import_react26.useMemo)(() => overrides.iframe, [overrides]);
   const rootProps = state.data.root.props || state.data.root;
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
@@ -4426,7 +4494,7 @@ var scrollIntoView = (el) => {
 };
 
 // components/LayerTree/index.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // lib/is-child-of-zone.ts
 init_react_import();
@@ -4453,7 +4521,7 @@ var LayerTree = ({
   label
 }) => {
   const zones = data.zones || {};
-  const ctx = (0, import_react26.useContext)(dropZoneContext);
+  const ctx = (0, import_react27.useContext)(dropZoneContext);
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: getClassName24("zoneTitle"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Layers, { size: "16" }) }),
@@ -4559,13 +4627,13 @@ var LayerTree = ({
 };
 
 // components/Puck/components/Outline/index.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var Outline = () => {
   const { dispatch, state, overrides, config } = useAppContext();
   const { data, ui } = state;
   const { itemSelector } = ui;
-  const setItemSelector = (0, import_react27.useCallback)(
+  const setItemSelector = (0, import_react28.useCallback)(
     (newItemSelector) => {
       dispatch({
         type: "setUi",
@@ -4574,7 +4642,7 @@ var Outline = () => {
     },
     []
   );
-  const Wrapper = (0, import_react27.useMemo)(() => overrides.outline || "div", [overrides]);
+  const Wrapper = (0, import_react28.useMemo)(() => overrides.outline || "div", [overrides]);
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
     (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       LayerTree,
@@ -4663,19 +4731,19 @@ function usePuckHistory({
 
 // lib/use-history-store.ts
 init_react_import();
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_use_debounce3 = require("use-debounce");
 var EMPTY_HISTORY_INDEX = 0;
 function useHistoryStore(initialHistory) {
   var _a, _b;
-  const [histories, setHistories] = (0, import_react28.useState)(
+  const [histories, setHistories] = (0, import_react29.useState)(
     (_a = initialHistory == null ? void 0 : initialHistory.histories) != null ? _a : []
   );
   const updateHistories = (histories2) => {
     setHistories(histories2);
     setIndex(histories2.length - 1);
   };
-  const [index, setIndex] = (0, import_react28.useState)(
+  const [index, setIndex] = (0, import_react29.useState)(
     (_b = initialHistory == null ? void 0 : initialHistory.index) != null ? _b : EMPTY_HISTORY_INDEX
   );
   const hasPast = index > EMPTY_HISTORY_INDEX;
@@ -4835,11 +4903,11 @@ var getBox = function getBox2(el) {
 };
 
 // components/Puck/components/Canvas/index.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // components/ViewportControls/index.tsx
 init_react_import();
-var import_react29 = require("react");
+var import_react30 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
 init_react_import();
@@ -4862,8 +4930,8 @@ var ViewportButton = ({
   onClick
 }) => {
   const { state } = useAppContext();
-  const [isActive, setIsActive] = (0, import_react29.useState)(false);
-  (0, import_react29.useEffect)(() => {
+  const [isActive, setIsActive] = (0, import_react30.useState)(false);
+  (0, import_react30.useEffect)(() => {
     setIsActive(width === state.ui.viewports.current.width);
   }, [width, state.ui.viewports.current.width]);
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
@@ -4899,7 +4967,7 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
-  const zoomOptions = (0, import_react29.useMemo)(
+  const zoomOptions = (0, import_react30.useMemo)(
     () => [
       ...defaultZoomOptions,
       ...defaultsContainAutoZoom ? [] : [
@@ -5022,17 +5090,17 @@ var Canvas = () => {
   const { status, iframe } = useAppContext();
   const { dispatch, state, overrides, setUi, zoomConfig, setZoomConfig } = useAppContext();
   const { ui } = state;
-  const frameRef = (0, import_react30.useRef)(null);
-  const [showTransition, setShowTransition] = (0, import_react30.useState)(false);
-  const defaultRender = (0, import_react30.useMemo)(() => {
+  const frameRef = (0, import_react31.useRef)(null);
+  const [showTransition, setShowTransition] = (0, import_react31.useState)(false);
+  const defaultRender = (0, import_react31.useMemo)(() => {
     const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children });
     return PuckDefault;
   }, []);
-  const CustomPreview = (0, import_react30.useMemo)(
+  const CustomPreview = (0, import_react31.useMemo)(
     () => overrides.preview || defaultRender,
     [overrides]
   );
-  const getFrameDimensions = (0, import_react30.useCallback)(() => {
+  const getFrameDimensions = (0, import_react31.useCallback)(() => {
     if (frameRef.current) {
       const frame = frameRef.current;
       const box = getBox(frame);
@@ -5040,7 +5108,7 @@ var Canvas = () => {
     }
     return { width: 0, height: 0 };
   }, [frameRef]);
-  const resetAutoZoom = (0, import_react30.useCallback)(
+  const resetAutoZoom = (0, import_react31.useCallback)(
     (ui2 = state.ui) => {
       if (frameRef.current) {
         setZoomConfig(
@@ -5050,11 +5118,11 @@ var Canvas = () => {
     },
     [frameRef, zoomConfig, state.ui]
   );
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     setShowTransition(false);
     resetAutoZoom();
   }, [frameRef, ui.leftSideBarVisible, ui.rightSideBarVisible]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     const { height: frameHeight } = getFrameDimensions();
     if (ui.viewports.current.height === "auto") {
       setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
@@ -5062,13 +5130,13 @@ var Canvas = () => {
       }));
     }
   }, [zoomConfig.zoom]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (ZOOM_ON_CHANGE) {
       setShowTransition(true);
       resetAutoZoom(ui);
     }
   }, [ui.viewports.current.width]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     const observer = new ResizeObserver(() => {
       setShowTransition(false);
       resetAutoZoom();
@@ -5080,8 +5148,8 @@ var Canvas = () => {
       observer.disconnect();
     };
   }, []);
-  const [showLoader, setShowLoader] = (0, import_react30.useState)(false);
-  (0, import_react30.useEffect)(() => {
+  const [showLoader, setShowLoader] = (0, import_react31.useState)(false);
+  (0, import_react31.useEffect)(() => {
     setTimeout(() => {
       setShowLoader(true);
     }, 500);
@@ -5184,7 +5252,7 @@ var insertComponent = (componentType, zone, index, {
 
 // lib/use-loaded-overrides.ts
 init_react_import();
-var import_react31 = require("react");
+var import_react32 = require("react");
 
 // lib/load-overrides.ts
 init_react_import();
@@ -5223,7 +5291,7 @@ var useLoadedOverrides = ({
   overrides,
   plugins
 }) => {
-  return (0, import_react31.useMemo)(() => {
+  return (0, import_react32.useMemo)(() => {
     return loadOverrides({ overrides, plugins });
   }, [plugins, overrides]);
 };
@@ -5262,7 +5330,7 @@ function Puck({
     enabled: true,
     waitForStyles: true
   }, _iframe);
-  const [generatedAppState] = (0, import_react32.useState)(() => {
+  const [generatedAppState] = (0, import_react33.useState)(() => {
     var _a2, _b, _c, _d, _e, _f, _g, _h, _i;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
@@ -5334,22 +5402,22 @@ function Puck({
     histories,
     index: initialHistoryIndex
   });
-  const [reducer] = (0, import_react32.useState)(
+  const [reducer] = (0, import_react33.useState)(
     () => createReducer({
       config,
       record: historyStore.record,
       onAction
     })
   );
-  const [appState, dispatch] = (0, import_react32.useReducer)(
+  const [appState, dispatch] = (0, import_react33.useReducer)(
     reducer,
     flushZones(initialAppState)
   );
   const { data, ui } = appState;
   const history = usePuckHistory({ dispatch, initialAppState, historyStore });
-  const [menuOpen, setMenuOpen] = (0, import_react32.useState)(false);
+  const [menuOpen, setMenuOpen] = (0, import_react33.useState)(false);
   const { itemSelector, leftSideBarVisible, rightSideBarVisible } = ui;
-  const setItemSelector = (0, import_react32.useCallback)(
+  const setItemSelector = (0, import_react33.useCallback)(
     (newItemSelector) => {
       if (newItemSelector === itemSelector) return;
       dispatch({
@@ -5361,13 +5429,13 @@ function Puck({
     [itemSelector]
   );
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (onChange) onChange(data);
   }, [data]);
   const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
-  const [draggedItem, setDraggedItem] = (0, import_react32.useState)();
+  const [draggedItem, setDraggedItem] = (0, import_react33.useState)();
   const rootProps = data.root.props || data.root;
-  const toggleSidebars = (0, import_react32.useCallback)(
+  const toggleSidebars = (0, import_react33.useCallback)(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -5381,7 +5449,7 @@ function Puck({
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -5404,7 +5472,7 @@ function Puck({
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  const defaultHeaderRender = (0, import_react32.useMemo)(() => {
+  const defaultHeaderRender = (0, import_react33.useMemo)(() => {
     if (renderHeader) {
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
@@ -5418,7 +5486,7 @@ function Puck({
     }
     return DefaultOverride;
   }, [renderHeader]);
-  const defaultHeaderActionsRender = (0, import_react32.useMemo)(() => {
+  const defaultHeaderActionsRender = (0, import_react33.useMemo)(() => {
     if (renderHeaderActions) {
       console.warn(
         "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
@@ -5435,20 +5503,20 @@ function Puck({
     overrides,
     plugins
   });
-  const CustomPuck = (0, import_react32.useMemo)(
+  const CustomPuck = (0, import_react33.useMemo)(
     () => loadedOverrides.puck || DefaultOverride,
     [loadedOverrides]
   );
-  const CustomHeader = (0, import_react32.useMemo)(
+  const CustomHeader = (0, import_react33.useMemo)(
     () => loadedOverrides.header || defaultHeaderRender,
     [loadedOverrides]
   );
-  const CustomHeaderActions = (0, import_react32.useMemo)(
+  const CustomHeaderActions = (0, import_react33.useMemo)(
     () => loadedOverrides.headerActions || defaultHeaderActionsRender,
     [loadedOverrides]
   );
-  const [mounted, setMounted] = (0, import_react32.useState)(false);
-  (0, import_react32.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react33.useState)(false);
+  (0, import_react33.useEffect)(() => {
     setMounted(true);
   }, []);
   const selectedComponentConfig = selectedItem && config.components[selectedItem.type];

package/dist/index.mjs

@@ -178,14 +178,13 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css#css-module
 init_react_import();
-var styles_module_default2 = { "Input": "_Input_3pq3z_1", "Input-label": "_Input-label_3pq3z_26", "Input-labelIcon": "_Input-labelIcon_3pq3z_35", "Input-disabledIcon": "_Input-disabledIcon_3pq3z_42", "Input-input": "_Input-input_3pq3z_47", "Input--readOnly": "_Input--readOnly_3pq3z_91", "Input-radioGroupItems": "_Input-radioGroupItems_3pq3z_102", "Input-radio": "_Input-radio_3pq3z_102", "Input-radioInner": "_Input-radioInner_3pq3z_119", "Input-radioInput": "_Input-radioInput_3pq3z_164" };
+var styles_module_default2 = { "InputWrapper": "_InputWrapper_1l5m8_1", "Input": "_Input_1l5m8_1", "Input-label": "_Input-label_1l5m8_26", "Input-labelIcon": "_Input-labelIcon_1l5m8_35", "Input-disabledIcon": "_Input-disabledIcon_1l5m8_42", "Input-input": "_Input-input_1l5m8_47", "Input--readOnly": "_Input--readOnly_1l5m8_91", "Input-radioGroupItems": "_Input-radioGroupItems_1l5m8_102", "Input-radio": "_Input-radio_1l5m8_102", "Input-radioInner": "_Input-radioInner_1l5m8_119", "Input-radioInput": "_Input-radioInput_1l5m8_164" };
 
 // components/AutoField/index.tsx
 import {
   useCallback as useCallback5,
   useEffect as useEffect9,
   useMemo as useMemo2,
-  useRef as useRef2,
   useState as useState10
 } from "react";
 
@@ -880,7 +879,8 @@ var defaultAppState = {
       },
       options: [],
       controlsVisible: true
-    }
+    },
+    field: { focus: null }
   }
 };
 var defaultContext = {
@@ -1228,11 +1228,13 @@ var ArrayField = ({
                 event.source.index,
                 (_b = event.destination) == null ? void 0 : _b.index
               );
-              onChange(newValue, {
+              const newUi = {
                 arrayState: __spreadProps(__spreadValues({}, state.ui.arrayState), {
                   [id]: __spreadProps(__spreadValues({}, arrayState), { items: newArrayStateItems })
                 })
-              });
+              };
+              setUi(newUi, false);
+              onChange(newValue, newUi);
               setLocalState({
                 value: newValue,
                 arrayState: __spreadProps(__spreadValues({}, arrayState), { items: newArrayStateItems })
@@ -1298,32 +1300,60 @@ var ArrayField = ({
                               children: [
                                 field.getItemSummary ? field.getItemSummary(data, i) : `Item #${_originalIndex}`,
                                 /* @__PURE__ */ jsxs4("div", { className: getClassNameItem("rhs"), children: [
-                                  !readOnly && /* @__PURE__ */ jsx9("div", { className: getClassNameItem("actions"), children: /* @__PURE__ */ jsx9("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx9(
-                                    IconButton,
-                                    {
-                                      type: "button",
-                                      disabled: field.min !== void 0 && field.min >= localState.arrayState.items.length,
-                                      onClick: (e) => {
-                                        e.stopPropagation();
-                                        const existingValue = [
-                                          ...value || []
-                                        ];
-                                        const existingItems = [
-                                          ...arrayState.items || []
-                                        ];
-                                        existingValue.splice(i, 1);
-                                        existingItems.splice(i, 1);
-                                        onChange(
-                                          existingValue,
-                                          mapArrayStateToUi({
-                                            items: existingItems
-                                          })
-                                        );
-                                      },
-                                      title: "Delete",
-                                      children: /* @__PURE__ */ jsx9(Trash, { size: 16 })
-                                    }
-                                  ) }) }),
+                                  !readOnly && /* @__PURE__ */ jsxs4("div", { className: getClassNameItem("actions"), children: [
+                                    /* @__PURE__ */ jsx9("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx9(
+                                      IconButton,
+                                      {
+                                        type: "button",
+                                        disabled: !!addDisabled,
+                                        onClick: (e) => {
+                                          e.stopPropagation();
+                                          const existingValue = [
+                                            ...value || []
+                                          ];
+                                          existingValue.splice(
+                                            i,
+                                            0,
+                                            existingValue[i]
+                                          );
+                                          onChange(
+                                            existingValue,
+                                            mapArrayStateToUi(
+                                              regenerateArrayState(existingValue)
+                                            )
+                                          );
+                                        },
+                                        title: "Duplicate",
+                                        children: /* @__PURE__ */ jsx9(Copy, { size: 16 })
+                                      }
+                                    ) }),
+                                    /* @__PURE__ */ jsx9("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx9(
+                                      IconButton,
+                                      {
+                                        type: "button",
+                                        disabled: field.min !== void 0 && field.min >= localState.arrayState.items.length,
+                                        onClick: (e) => {
+                                          e.stopPropagation();
+                                          const existingValue = [
+                                            ...value || []
+                                          ];
+                                          const existingItems = [
+                                            ...arrayState.items || []
+                                          ];
+                                          existingValue.splice(i, 1);
+                                          existingItems.splice(i, 1);
+                                          onChange(
+                                            existingValue,
+                                            mapArrayStateToUi({
+                                              items: existingItems
+                                            })
+                                          );
+                                        },
+                                        title: "Delete",
+                                        children: /* @__PURE__ */ jsx9(Trash, { size: 16 })
+                                      }
+                                    ) })
+                                  ] }),
                                   /* @__PURE__ */ jsx9("div", { children: /* @__PURE__ */ jsx9(DragIcon, {}) })
                                 ] })
                               ]
@@ -2060,6 +2090,7 @@ var useSafeId = () => {
 // components/AutoField/index.tsx
 import { Fragment as Fragment8, jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 var getClassName15 = get_class_name_factory_default("Input", styles_module_default2);
+var getClassNameWrapper = get_class_name_factory_default("InputWrapper", styles_module_default2);
 var FieldLabel = ({
   children,
   icon,
@@ -2107,7 +2138,7 @@ var FieldLabelInternal2 = ({
 };
 function AutoFieldInternal(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  const { overrides } = useAppContext();
+  const { dispatch, overrides } = useAppContext();
   const { id, Label = FieldLabelInternal2 } = props;
   const field = props.field;
   const label = field.label;
@@ -2139,23 +2170,45 @@ function AutoFieldInternal(props) {
     Label,
     id: resolvedId
   });
+  const onFocus = useCallback5(
+    (e) => {
+      if (mergedProps.name && e.target.nodeName === "INPUT") {
+        e.stopPropagation();
+        dispatch({
+          type: "setUi",
+          ui: {
+            field: { focus: mergedProps.name }
+          }
+        });
+      }
+    },
+    [mergedProps.name]
+  );
+  const onBlur = useCallback5((e) => {
+    if ("name" in e.target) {
+      dispatch({
+        type: "setUi",
+        ui: {
+          field: { focus: null }
+        }
+      });
+    }
+  }, []);
   if (field.type === "custom") {
     if (!field.render) {
       return null;
     }
     const CustomField = field.render;
-    return /* @__PURE__ */ jsx20("div", { className: getClassName15(), children: /* @__PURE__ */ jsx20(CustomField, __spreadValues({}, mergedProps)) });
+    return /* @__PURE__ */ jsx20("div", { className: getClassNameWrapper(), onFocus, onBlur, children: /* @__PURE__ */ jsx20("div", { className: getClassName15(), children: /* @__PURE__ */ jsx20(CustomField, __spreadValues({}, mergedProps)) }) });
   }
   const children = defaultFields[field.type](mergedProps);
   const Render2 = render[field.type];
-  return /* @__PURE__ */ jsx20(Render2, __spreadProps(__spreadValues({}, mergedProps), { children }));
+  return /* @__PURE__ */ jsx20("div", { className: getClassNameWrapper(), onFocus, onBlur, children: /* @__PURE__ */ jsx20(Render2, __spreadProps(__spreadValues({}, mergedProps), { children })) });
 }
-var RECENT_CHANGE_TIMEOUT = 200;
 function AutoFieldPrivate(props) {
+  const { state } = useAppContext();
   const { value, onChange } = props;
   const [localValue, setLocalValue] = useState10(value);
-  const [recentlyChanged, setRecentlyChanged] = useState10(false);
-  const timeoutRef = useRef2();
   const onChangeDb = useDebouncedCallback(
     (val, ui) => {
       onChange(val, ui);
@@ -2165,15 +2218,10 @@ function AutoFieldPrivate(props) {
   );
   const onChangeLocal = useCallback5((val, ui) => {
     setLocalValue(val);
-    setRecentlyChanged(true);
-    clearTimeout(timeoutRef.current);
-    timeoutRef.current = setTimeout(() => {
-      setRecentlyChanged(false);
-    }, RECENT_CHANGE_TIMEOUT);
     onChangeDb(val, ui);
   }, []);
   useEffect9(() => {
-    if (!recentlyChanged) {
+    if (state.ui.field.focus !== props.name) {
       setLocalValue(value);
     }
   }, [value]);
@@ -3524,6 +3572,22 @@ var styles_module_default16 = { "PuckFields": "_PuckFields_jp3lw_1", "PuckFields
 
 // components/Puck/components/Fields/index.tsx
 import { useCallback as useCallback7, useEffect as useEffect13, useMemo as useMemo6, useState as useState15 } from "react";
+
+// lib/use-parent.ts
+init_react_import();
+import { useContext as useContext5 } from "react";
+var useParent = (itemSelector) => {
+  var _a;
+  const { selectedItem, state } = useAppContext();
+  const { pathData } = useContext5(dropZoneContext) || {};
+  const item = itemSelector ? getItem(itemSelector, state.data) : selectedItem;
+  const breadcrumbs = convertPathDataToBreadcrumbs(item, pathData, state.data);
+  const lastItem = breadcrumbs[breadcrumbs.length - 1];
+  const parent = (lastItem == null ? void 0 : lastItem.selector) ? (_a = getItem(lastItem.selector, state.data)) != null ? _a : null : null;
+  return parent || null;
+};
+
+// components/Puck/components/Fields/index.tsx
 import { Fragment as Fragment12, jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
 var defaultPageFields = {
@@ -3537,6 +3601,7 @@ var DefaultFields = ({
 var useResolvedFields = () => {
   var _a, _b;
   const { selectedItem, state, config } = useAppContext();
+  const parent = useParent();
   const { data } = state;
   const rootFields = ((_a = config.root) == null ? void 0 : _a.fields) || defaultPageFields;
   const componentConfig = selectedItem ? config.components[selectedItem.type] : null;
@@ -3567,7 +3632,8 @@ var useResolvedFields = () => {
             fields,
             lastFields: resolvedFields,
             lastData,
-            appState: state
+            appState: state,
+            parent
           }
         );
       }
@@ -3577,7 +3643,8 @@ var useResolvedFields = () => {
           fields,
           lastFields: resolvedFields,
           lastData,
-          appState: state
+          appState: state,
+          parent
         });
       }
       return defaultResolveFields(componentData, {
@@ -3599,7 +3666,7 @@ var useResolvedFields = () => {
     } else {
       setResolvedFields(defaultFields);
     }
-  }, [data, defaultFields, state.ui.itemSelector, hasResolver]);
+  }, [data, defaultFields, selectedItem, hasResolver]);
   return [resolvedFields, fieldsLoading];
 };
 var Fields = () => {
@@ -3906,7 +3973,7 @@ import { useCallback as useCallback8, useMemo as useMemo8 } from "react";
 init_react_import();
 import {
   createContext as createContext4,
-  useContext as useContext5,
+  useContext as useContext6,
   useEffect as useEffect15,
   useRef as useRef3,
   useState as useState17
@@ -4116,7 +4183,7 @@ var CopyHostStyles = ({
   return /* @__PURE__ */ jsx31(Fragment13, { children });
 };
 var autoFrameContext = createContext4({});
-var useFrame = () => useContext5(autoFrameContext);
+var useFrame = () => useContext6(autoFrameContext);
 function AutoFrame(_a) {
   var _b = _a, {
     children,
@@ -4269,7 +4336,7 @@ var scrollIntoView = (el) => {
 };
 
 // components/LayerTree/index.tsx
-import { useContext as useContext6 } from "react";
+import { useContext as useContext7 } from "react";
 
 // lib/is-child-of-zone.ts
 init_react_import();
@@ -4296,7 +4363,7 @@ var LayerTree = ({
   label
 }) => {
   const zones = data.zones || {};
-  const ctx = useContext6(dropZoneContext);
+  const ctx = useContext7(dropZoneContext);
   return /* @__PURE__ */ jsxs17(Fragment15, { children: [
     label && /* @__PURE__ */ jsxs17("div", { className: getClassName24("zoneTitle"), children: [
       /* @__PURE__ */ jsx33("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ jsx33(Layers, { size: "16" }) }),

package/dist/{resolve-all-data-Bd3DnhYE.d.mts → resolve-all-data-C7aAQCY3.d.mts}

@@ -145,6 +145,7 @@ type ComponentConfig<RenderProps extends DefaultComponentProps = DefaultComponen
         lastFields: Fields<FieldProps>;
         lastData: DataShape | null;
         appState: AppState;
+        parent: ComponentData | null;
     }) => Promise<Fields<FieldProps>> | Fields<FieldProps>;
     resolveData?: (data: DataShape, params: {
         changed: Partial<Record<keyof FieldProps, boolean>>;
@@ -274,6 +275,9 @@ type UiState = {
         controlsVisible: boolean;
         options: Viewport[];
     };
+    field: {
+        focus?: string | null;
+    };
 };
 type AppState<UserData extends Data = Data> = {
     data: UserData;

package/dist/{resolve-all-data-Bd3DnhYE.d.ts → resolve-all-data-C7aAQCY3.d.ts}

@@ -145,6 +145,7 @@ type ComponentConfig<RenderProps extends DefaultComponentProps = DefaultComponen
         lastFields: Fields<FieldProps>;
         lastData: DataShape | null;
         appState: AppState;
+        parent: ComponentData | null;
     }) => Promise<Fields<FieldProps>> | Fields<FieldProps>;
     resolveData?: (data: DataShape, params: {
         changed: Partial<Record<keyof FieldProps, boolean>>;
@@ -274,6 +275,9 @@ type UiState = {
         controlsVisible: boolean;
         options: Viewport[];
     };
+    field: {
+        focus?: string | null;
+    };
 };
 type AppState<UserData extends Data = Data> = {
     data: UserData;

package/dist/rsc.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as Config, D as Data } from './resolve-all-data-Bd3DnhYE.mjs';
-export { a4 as resolveAllData } from './resolve-all-data-Bd3DnhYE.mjs';
+import { C as Config, D as Data } from './resolve-all-data-C7aAQCY3.mjs';
+export { a4 as resolveAllData } from './resolve-all-data-C7aAQCY3.mjs';
 import 'react';
 
 declare function Render<UserConfig extends Config = Config>({ config, data, }: {

package/dist/rsc.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as Config, D as Data } from './resolve-all-data-Bd3DnhYE.js';
-export { a4 as resolveAllData } from './resolve-all-data-Bd3DnhYE.js';
+import { C as Config, D as Data } from './resolve-all-data-C7aAQCY3.js';
+export { a4 as resolveAllData } from './resolve-all-data-C7aAQCY3.js';
 import 'react';
 
 declare function Render<UserConfig extends Config = Config>({ config, data, }: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.17.0-canary.ccec96e",
+  "version": "0.17.0-canary.f71da6d",
   "author": "Measured Corporation Ltd <hello@measured.co>",
   "repository": "measuredco/puck",
   "bugs": "https://github.com/measuredco/puck/issues",