@measured/puck 0.21.0-canary.20aafb6a → 0.21.0-canary.29ef7131

package/dist/{chunk-OOLYDXKW.mjs → chunk-VBJEDLUM.mjs}

@@ -681,19 +681,19 @@ init_react_import();
 
 // lib/get-changed.ts
 init_react_import();
-import fdeq from "fast-deep-equal";
+import { deepEqual } from "fast-equals";
 var getChanged = (newItem, oldItem) => {
   return newItem ? Object.keys(newItem.props || {}).reduce((acc, item) => {
     const newItemProps = (newItem == null ? void 0 : newItem.props) || {};
     const oldItemProps = (oldItem == null ? void 0 : oldItem.props) || {};
     return __spreadProps(__spreadValues({}, acc), {
-      [item]: !fdeq(oldItemProps[item], newItemProps[item])
+      [item]: !deepEqual(oldItemProps[item], newItemProps[item])
     });
   }, {}) : {};
 };
 
 // lib/resolve-component-data.ts
-import fdeq2 from "fast-deep-equal";
+import { deepEqual as deepEqual2 } from "fast-equals";
 var cache = { lastChange: {} };
 var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], function* (item, config, metadata = {}, onResolveStart, onResolveEnd, trigger = "replace") {
   const configForItem = "type" in item && item.type !== "root" ? config.components[item.type] : config.root;
@@ -702,7 +702,7 @@ var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], f
   const id = "id" in item.props ? item.props.id : "root";
   if (shouldRunResolver) {
     const { item: oldItem = null, resolved = {} } = cache.lastChange[id] || {};
-    if (trigger !== "force" && item && fdeq2(item, oldItem)) {
+    if (trigger !== "force" && item && deepEqual2(item, oldItem)) {
       return { node: resolved, didChange: false };
     }
     const changed = getChanged(item, oldItem);
@@ -752,7 +752,7 @@ var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], f
   };
   return {
     node: itemWithResolvedChildren,
-    didChange: !fdeq2(item, itemWithResolvedChildren)
+    didChange: !deepEqual2(item, itemWithResolvedChildren)
   };
 });
 
@@ -958,6 +958,7 @@ export {
   useSlots,
   SlotRenderPure,
   SlotRender,
+  toComponent,
   migrate,
   transformProps,
   resolveAllData

package/dist/{chunk-MSKEXIWC.mjs → chunk-YRZRLNQC.mjs}

@@ -19,12 +19,13 @@ import {
   rootDroppableId,
   rootZone,
   setupZone,
+  toComponent,
   useFieldTransforms,
   useSlots,
   walkAppState,
   walkField,
   walkTree
-} from "./chunk-OOLYDXKW.mjs";
+} from "./chunk-VBJEDLUM.mjs";
 
 // ../../node_modules/classnames/index.js
 var require_classnames = __commonJS({
@@ -88,6 +89,42 @@ var require_classnames = __commonJS({
   }
 });
 
+// ../../node_modules/fast-deep-equal/index.js
+var require_fast_deep_equal = __commonJS({
+  "../../node_modules/fast-deep-equal/index.js"(exports, module) {
+    "use strict";
+    init_react_import();
+    module.exports = function equal(a, b) {
+      if (a === b) return true;
+      if (a && b && typeof a == "object" && typeof b == "object") {
+        if (a.constructor !== b.constructor) return false;
+        var length, i, keys;
+        if (Array.isArray(a)) {
+          length = a.length;
+          if (length != b.length) return false;
+          for (i = length; i-- !== 0; )
+            if (!equal(a[i], b[i])) return false;
+          return true;
+        }
+        if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
+        if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
+        if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
+        keys = Object.keys(a);
+        length = keys.length;
+        if (length !== Object.keys(b).length) return false;
+        for (i = length; i-- !== 0; )
+          if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
+        for (i = length; i-- !== 0; ) {
+          var key = keys[i];
+          if (!equal(a[key], b[key])) return false;
+        }
+        return true;
+      }
+      return a !== a && b !== b;
+    };
+  }
+});
+
 // types/API/Overrides.ts
 init_react_import();
 var overrideKeys = [
@@ -820,6 +857,10 @@ var monitorHotkeys = (doc) => {
       useHotkeyStore.getState().reset();
     }
   };
+  const onBlur = () => {
+    useHotkeyStore.getState().reset();
+  };
+  window.addEventListener("blur", onBlur);
   doc.addEventListener("keydown", onKeyDown);
   doc.addEventListener("keyup", onKeyUp);
   doc.addEventListener("visibilitychange", onVisibilityChanged);
@@ -827,6 +868,7 @@ var monitorHotkeys = (doc) => {
     doc.removeEventListener("keydown", onKeyDown);
     doc.removeEventListener("keyup", onKeyUp);
     doc.removeEventListener("visibilitychange", onVisibilityChanged);
+    window.removeEventListener("blur", onBlur);
   };
 };
 var useMonitorHotkeys = () => {
@@ -1021,7 +1063,7 @@ var flattenData = (state, config) => {
     (content) => content,
     (item) => {
       data.push(item);
-      return null;
+      return item;
     }
   );
   return data;
@@ -2944,8 +2986,9 @@ var ArrayField = ({
                       var _a;
                       if (isDraggingAny) return;
                       const existingValue = value || [];
+                      const defaultProps = typeof field.defaultItemProps === "function" ? field.defaultItemProps(existingValue.length) : (_a = field.defaultItemProps) != null ? _a : {};
                       const newItem = defaultSlots(
-                        uniqifyItem((_a = field.defaultItemProps) != null ? _a : {}),
+                        uniqifyItem(defaultProps),
                         field.arrayFields
                       );
                       const newValue = [...existingValue, newItem];
@@ -3120,11 +3163,13 @@ var ExternalInput = ({
   id,
   readOnly
 }) => {
+  var _a;
   const {
     mapProp = (val) => val,
     mapRow = (val) => val,
     filterFields
   } = field || {};
+  const { enabled: shouldCacheData } = (_a = field.cache) != null ? _a : { enabled: true };
   const [data, setData] = useState6([]);
   const [isOpen, setOpen] = useState6(false);
   const [isLoading, setIsLoading] = useState6(true);
@@ -3150,11 +3195,18 @@ var ExternalInput = ({
     (query, filters2) => __async(void 0, null, function* () {
       setIsLoading(true);
       const cacheKey = `${id}-${query}-${JSON.stringify(filters2)}`;
-      const listData = dataCache[cacheKey] || (yield field.fetchList({ query, filters: filters2 }));
+      let listData;
+      if (shouldCacheData && dataCache[cacheKey]) {
+        listData = dataCache[cacheKey];
+      } else {
+        listData = yield field.fetchList({ query, filters: filters2 });
+      }
       if (listData) {
         setData(listData);
         setIsLoading(false);
-        dataCache[cacheKey] = listData;
+        if (shouldCacheData) {
+          dataCache[cacheKey] = listData;
+        }
       }
     }),
     [id, field]
@@ -3218,6 +3270,7 @@ var ExternalInput = ({
             }),
             onSubmit: (e) => {
               e.preventDefault();
+              e.stopPropagation();
               search(searchQuery, filters);
             },
             children: [
@@ -4128,12 +4181,14 @@ var DraggableComponent = ({
     }
     return cleanup;
   }, [permissions.drag, zoneCompound]);
+  const [, setRerender] = useState10(0);
   const ref = useRef2(null);
   const refSetter = useCallback7(
     (el) => {
       sortableRef(el);
-      if (el) {
+      if (ref.current !== el) {
         ref.current = el;
+        setRerender((update) => update + 1);
       }
     },
     [sortableRef]
@@ -5638,26 +5693,26 @@ var registerOverlayPortal = (el, opts = {}) => {
       capture: true
     });
   };
-  if (disableDragOnFocus) {
-    el.addEventListener("focus", onFocus, { capture: true });
-    el.addEventListener("blur", onBlur, { capture: true });
-  } else if (disableDrag) {
+  if (disableDrag) {
     el.addEventListener("pointerdown", stopPropagation, {
       capture: true
     });
+  } else if (disableDragOnFocus) {
+    el.addEventListener("focus", onFocus, { capture: true });
+    el.addEventListener("blur", onBlur, { capture: true });
   }
   el.setAttribute("data-puck-overlay-portal", "true");
   return () => {
     el.removeEventListener("mouseover", stopPropagation, {
       capture: true
     });
-    if (disableDragOnFocus) {
-      el.removeEventListener("focus", onFocus, { capture: true });
-      el.removeEventListener("blur", onFocus, { capture: true });
-    } else if (disableDrag) {
+    if (disableDrag) {
       el.removeEventListener("pointerdown", stopPropagation, {
         capture: true
       });
+    } else if (disableDragOnFocus) {
+      el.removeEventListener("focus", onFocus, { capture: true });
+      el.removeEventListener("blur", onBlur, { capture: true });
     }
     el.removeAttribute("data-puck-overlay-portal");
   };
@@ -5665,7 +5720,7 @@ var registerOverlayPortal = (el, opts = {}) => {
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/InlineTextField/styles.module.css#css-module
 init_react_import();
-var styles_module_default13 = { "InlineTextField": "_InlineTextField_1xph6_1" };
+var styles_module_default13 = { "InlineTextField": "_InlineTextField_104qp_1" };
 
 // lib/data/set-deep.ts
 init_react_import();
@@ -8047,7 +8102,7 @@ var useDeleteHotkeys = () => {
 };
 
 // components/Puck/index.tsx
-import fdeq from "fast-deep-equal";
+var import_fast_deep_equal = __toESM(require_fast_deep_equal());
 
 // components/Puck/components/Header/index.tsx
 init_react_import();
@@ -8551,9 +8606,13 @@ function PuckProvider({ children }) {
     }
     const rootProps = ((_h = initialData == null ? void 0 : initialData.root) == null ? void 0 : _h.props) || (initialData == null ? void 0 : initialData.root) || {};
     const defaultedRootProps = __spreadValues(__spreadValues({}, (_i = config.root) == null ? void 0 : _i.defaultProps), rootProps);
+    const root = populateIds(
+      toComponent(__spreadProps(__spreadValues({}, initialData == null ? void 0 : initialData.root), { props: defaultedRootProps })),
+      config
+    );
     const newAppState = __spreadProps(__spreadValues({}, defaultAppState), {
       data: __spreadProps(__spreadValues({}, initialData), {
-        root: __spreadProps(__spreadValues({}, initialData == null ? void 0 : initialData.root), { props: defaultedRootProps }),
+        root: __spreadProps(__spreadValues({}, initialData == null ? void 0 : initialData.root), { props: root.props }),
         content: initialData.content || []
       }),
       ui: __spreadProps(__spreadValues(__spreadValues({}, initial), clientUiState), {
@@ -8649,17 +8708,17 @@ function PuckProvider({ children }) {
   });
   const previousData = useRef12(null);
   useEffect29(() => {
-    appStore.subscribe(
+    return appStore.subscribe(
       (s) => s.state.data,
       (data) => {
         if (onChange) {
-          if (fdeq(data, previousData.current)) return;
+          if ((0, import_fast_deep_equal.default)(data, previousData.current)) return;
           onChange(data);
           previousData.current = data;
         }
       }
     );
-  }, []);
+  }, [onChange]);
   useRegisterPermissionsSlice(appStore, permissions);
   const uPuckStore = useRegisterUsePuckStore(appStore);
   useEffect29(() => {

package/dist/index.css

@@ -1331,16 +1331,17 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/InlineTextField/styles.module.css/#css-module-data */
-._InlineTextField_1xph6_1 {
+._InlineTextField_104qp_1 {
   cursor: text;
   display: inline-block;
   white-space: pre-wrap;
+  text-decoration: inherit;
 }
-[data-dnd-dragging] ._InlineTextField_1xph6_1 {
+[data-dnd-dragging] ._InlineTextField_104qp_1 {
   cursor: none;
   caret-color: transparent;
 }
-[data-dnd-dragging] ._InlineTextField_1xph6_1::selection {
+[data-dnd-dragging] ._InlineTextField_104qp_1::selection {
   display: none;
 }
 

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-Ctf3FZQI.mjs';
-export { a7 as Adaptor, a5 as ArrayField, B as ArrayState, ak as AsFieldProps, N as BaseData, $ as BaseField, Z as ComponentDataMap, X as ComponentDataOptionalId, _ as Content, ab as CustomField, aa as CustomFieldRender, ah as DefaultComponentProps, K as DefaultComponents, ae as DefaultRootFieldProps, ag as DefaultRootProps, af as DefaultRootRenderProps, o as Direction, p as DragAxis, a9 as ExternalField, a8 as ExternalFieldWithAdaptor, L as ExtractConfigParams, am as ExtractField, y as FieldRenderFunctions, u as FieldTransformFn, s as FieldTransformFnParams, z as ItemWithId, Y as MappedItem, a1 as NumberField, a6 as ObjectField, x as OverrideKey, G as PuckComponent, ad as PuckContext, a4 as RadioField, J as RootConfig, T as RootData, Q as RootDataWithoutProps, a3 as SelectField, S as Slot, E as SlotComponent, ac as SlotField, a0 as TextField, a2 as TextareaField, q as Viewport, al as WithChildren, ai as WithId, aj as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-Ctf3FZQI.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-7SvCIsj8.mjs';
+export { a7 as Adaptor, a5 as ArrayField, B as ArrayState, al as AsFieldProps, N as BaseData, $ as BaseField, a9 as CacheOpts, Z as ComponentDataMap, X as ComponentDataOptionalId, _ as Content, ac as CustomField, ab as CustomFieldRender, ai as DefaultComponentProps, K as DefaultComponents, af as DefaultRootFieldProps, ah as DefaultRootProps, ag as DefaultRootRenderProps, o as Direction, p as DragAxis, aa as ExternalField, a8 as ExternalFieldWithAdaptor, L as ExtractConfigParams, an as ExtractField, y as FieldRenderFunctions, u as FieldTransformFn, s as FieldTransformFnParams, z as ItemWithId, Y as MappedItem, a1 as NumberField, a6 as ObjectField, x as OverrideKey, G as PuckComponent, ae as PuckContext, a4 as RadioField, J as RootConfig, T as RootData, Q as RootDataWithoutProps, a3 as SelectField, S as Slot, E as SlotComponent, ad as SlotField, a0 as TextField, a2 as TextareaField, q as Viewport, am as WithChildren, aj as WithId, ak as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-7SvCIsj8.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import react__default, { ReactNode, SyntheticEvent, ReactElement } from 'react';

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { 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-Ctf3FZQI.js';
-export { a7 as Adaptor, a5 as ArrayField, B as ArrayState, ak as AsFieldProps, N as BaseData, $ as BaseField, Z as ComponentDataMap, X as ComponentDataOptionalId, _ as Content, ab as CustomField, aa as CustomFieldRender, ah as DefaultComponentProps, K as DefaultComponents, ae as DefaultRootFieldProps, ag as DefaultRootProps, af as DefaultRootRenderProps, o as Direction, p as DragAxis, a9 as ExternalField, a8 as ExternalFieldWithAdaptor, L as ExtractConfigParams, am as ExtractField, y as FieldRenderFunctions, u as FieldTransformFn, s as FieldTransformFnParams, z as ItemWithId, Y as MappedItem, a1 as NumberField, a6 as ObjectField, x as OverrideKey, G as PuckComponent, ad as PuckContext, a4 as RadioField, J as RootConfig, T as RootData, Q as RootDataWithoutProps, a3 as SelectField, S as Slot, E as SlotComponent, ac as SlotField, a0 as TextField, a2 as TextareaField, q as Viewport, al as WithChildren, ai as WithId, aj as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-Ctf3FZQI.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-7SvCIsj8.js';
+export { a7 as Adaptor, a5 as ArrayField, B as ArrayState, al as AsFieldProps, N as BaseData, $ as BaseField, a9 as CacheOpts, Z as ComponentDataMap, X as ComponentDataOptionalId, _ as Content, ac as CustomField, ab as CustomFieldRender, ai as DefaultComponentProps, K as DefaultComponents, af as DefaultRootFieldProps, ah as DefaultRootProps, ag as DefaultRootRenderProps, o as Direction, p as DragAxis, aa as ExternalField, a8 as ExternalFieldWithAdaptor, L as ExtractConfigParams, an as ExtractField, y as FieldRenderFunctions, u as FieldTransformFn, s as FieldTransformFnParams, z as ItemWithId, Y as MappedItem, a1 as NumberField, a6 as ObjectField, x as OverrideKey, G as PuckComponent, ae as PuckContext, a4 as RadioField, J as RootConfig, T as RootData, Q as RootDataWithoutProps, a3 as SelectField, S as Slot, E as SlotComponent, ad as SlotField, a0 as TextField, a2 as TextareaField, q as Viewport, am as WithChildren, aj as WithId, ak as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-7SvCIsj8.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import react__default, { ReactNode, SyntheticEvent, ReactElement } from 'react';

package/dist/index.js

@@ -153,6 +153,42 @@ var require_classnames = __commonJS({
   }
 });
 
+// ../../node_modules/fast-deep-equal/index.js
+var require_fast_deep_equal = __commonJS({
+  "../../node_modules/fast-deep-equal/index.js"(exports2, module2) {
+    "use strict";
+    init_react_import();
+    module2.exports = function equal(a, b) {
+      if (a === b) return true;
+      if (a && b && typeof a == "object" && typeof b == "object") {
+        if (a.constructor !== b.constructor) return false;
+        var length, i, keys;
+        if (Array.isArray(a)) {
+          length = a.length;
+          if (length != b.length) return false;
+          for (i = length; i-- !== 0; )
+            if (!equal(a[i], b[i])) return false;
+          return true;
+        }
+        if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
+        if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
+        if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
+        keys = Object.keys(a);
+        length = keys.length;
+        if (length !== Object.keys(b).length) return false;
+        for (i = length; i-- !== 0; )
+          if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
+        for (i = length; i-- !== 0; ) {
+          var key = keys[i];
+          if (!equal(a[key], b[key])) return false;
+        }
+        return true;
+      }
+      return a !== a && b !== b;
+    };
+  }
+});
+
 // bundle/index.ts
 var bundle_exports = {};
 __export(bundle_exports, {
@@ -1713,6 +1749,10 @@ var monitorHotkeys = (doc) => {
       useHotkeyStore.getState().reset();
     }
   };
+  const onBlur = () => {
+    useHotkeyStore.getState().reset();
+  };
+  window.addEventListener("blur", onBlur);
   doc.addEventListener("keydown", onKeyDown);
   doc.addEventListener("keyup", onKeyUp);
   doc.addEventListener("visibilitychange", onVisibilityChanged);
@@ -1720,6 +1760,7 @@ var monitorHotkeys = (doc) => {
     doc.removeEventListener("keydown", onKeyDown);
     doc.removeEventListener("keyup", onKeyUp);
     doc.removeEventListener("visibilitychange", onVisibilityChanged);
+    window.removeEventListener("blur", onBlur);
   };
 };
 var useMonitorHotkeys = () => {
@@ -1914,7 +1955,7 @@ var flattenData = (state, config) => {
     (content) => content,
     (item) => {
       data.push(item);
-      return null;
+      return item;
     }
   );
   return data;
@@ -1922,13 +1963,13 @@ var flattenData = (state, config) => {
 
 // lib/get-changed.ts
 init_react_import();
-var import_fast_deep_equal = __toESM(require("fast-deep-equal"));
+var import_fast_equals = require("fast-equals");
 var getChanged = (newItem, oldItem) => {
   return newItem ? Object.keys(newItem.props || {}).reduce((acc, item) => {
     const newItemProps = (newItem == null ? void 0 : newItem.props) || {};
     const oldItemProps = (oldItem == null ? void 0 : oldItem.props) || {};
     return __spreadProps(__spreadValues({}, acc), {
-      [item]: !(0, import_fast_deep_equal.default)(oldItemProps[item], newItemProps[item])
+      [item]: !(0, import_fast_equals.deepEqual)(oldItemProps[item], newItemProps[item])
     });
   }, {}) : {};
 };
@@ -2149,7 +2190,7 @@ var useRegisterFieldsSlice = (appStore, id) => {
 
 // lib/resolve-component-data.ts
 init_react_import();
-var import_fast_deep_equal2 = __toESM(require("fast-deep-equal"));
+var import_fast_equals2 = require("fast-equals");
 var cache = { lastChange: {} };
 var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], function* (item, config, metadata = {}, onResolveStart, onResolveEnd, trigger = "replace") {
   const configForItem = "type" in item && item.type !== "root" ? config.components[item.type] : config.root;
@@ -2158,7 +2199,7 @@ var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], f
   const id = "id" in item.props ? item.props.id : "root";
   if (shouldRunResolver) {
     const { item: oldItem = null, resolved = {} } = cache.lastChange[id] || {};
-    if (trigger !== "force" && item && (0, import_fast_deep_equal2.default)(item, oldItem)) {
+    if (trigger !== "force" && item && (0, import_fast_equals2.deepEqual)(item, oldItem)) {
       return { node: resolved, didChange: false };
     }
     const changed = getChanged(item, oldItem);
@@ -2208,7 +2249,7 @@ var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], f
   };
   return {
     node: itemWithResolvedChildren,
-    didChange: !(0, import_fast_deep_equal2.default)(item, itemWithResolvedChildren)
+    didChange: !(0, import_fast_equals2.deepEqual)(item, itemWithResolvedChildren)
   };
 });
 
@@ -3494,8 +3535,9 @@ var ArrayField = ({
                       var _a;
                       if (isDraggingAny) return;
                       const existingValue = value || [];
+                      const defaultProps = typeof field.defaultItemProps === "function" ? field.defaultItemProps(existingValue.length) : (_a = field.defaultItemProps) != null ? _a : {};
                       const newItem = defaultSlots(
-                        uniqifyItem((_a = field.defaultItemProps) != null ? _a : {}),
+                        uniqifyItem(defaultProps),
                         field.arrayFields
                       );
                       const newValue = [...existingValue, newItem];
@@ -3754,11 +3796,13 @@ var ExternalInput = ({
   id,
   readOnly
 }) => {
+  var _a;
   const {
     mapProp = (val) => val,
     mapRow = (val) => val,
     filterFields
   } = field || {};
+  const { enabled: shouldCacheData } = (_a = field.cache) != null ? _a : { enabled: true };
   const [data, setData] = (0, import_react17.useState)([]);
   const [isOpen, setOpen] = (0, import_react17.useState)(false);
   const [isLoading, setIsLoading] = (0, import_react17.useState)(true);
@@ -3784,11 +3828,18 @@ var ExternalInput = ({
     (query, filters2) => __async(void 0, null, function* () {
       setIsLoading(true);
       const cacheKey = `${id}-${query}-${JSON.stringify(filters2)}`;
-      const listData = dataCache[cacheKey] || (yield field.fetchList({ query, filters: filters2 }));
+      let listData;
+      if (shouldCacheData && dataCache[cacheKey]) {
+        listData = dataCache[cacheKey];
+      } else {
+        listData = yield field.fetchList({ query, filters: filters2 });
+      }
       if (listData) {
         setData(listData);
         setIsLoading(false);
-        dataCache[cacheKey] = listData;
+        if (shouldCacheData) {
+          dataCache[cacheKey] = listData;
+        }
       }
     }),
     [id, field]
@@ -3852,6 +3903,7 @@ var ExternalInput = ({
             }),
             onSubmit: (e) => {
               e.preventDefault();
+              e.stopPropagation();
               search(searchQuery, filters);
             },
             children: [
@@ -4755,12 +4807,14 @@ var DraggableComponent = ({
     }
     return cleanup;
   }, [permissions.drag, zoneCompound]);
+  const [, setRerender] = (0, import_react24.useState)(0);
   const ref = (0, import_react24.useRef)(null);
   const refSetter = (0, import_react24.useCallback)(
     (el) => {
       sortableRef(el);
-      if (el) {
+      if (ref.current !== el) {
         ref.current = el;
+        setRerender((update) => update + 1);
       }
     },
     [sortableRef]
@@ -5535,26 +5589,26 @@ var registerOverlayPortal = (el, opts = {}) => {
       capture: true
     });
   };
-  if (disableDragOnFocus) {
-    el.addEventListener("focus", onFocus, { capture: true });
-    el.addEventListener("blur", onBlur, { capture: true });
-  } else if (disableDrag) {
+  if (disableDrag) {
     el.addEventListener("pointerdown", stopPropagation, {
       capture: true
     });
+  } else if (disableDragOnFocus) {
+    el.addEventListener("focus", onFocus, { capture: true });
+    el.addEventListener("blur", onBlur, { capture: true });
   }
   el.setAttribute("data-puck-overlay-portal", "true");
   return () => {
     el.removeEventListener("mouseover", stopPropagation, {
       capture: true
     });
-    if (disableDragOnFocus) {
-      el.removeEventListener("focus", onFocus, { capture: true });
-      el.removeEventListener("blur", onFocus, { capture: true });
-    } else if (disableDrag) {
+    if (disableDrag) {
       el.removeEventListener("pointerdown", stopPropagation, {
         capture: true
       });
+    } else if (disableDragOnFocus) {
+      el.removeEventListener("focus", onFocus, { capture: true });
+      el.removeEventListener("blur", onBlur, { capture: true });
     }
     el.removeAttribute("data-puck-overlay-portal");
   };
@@ -5562,7 +5616,7 @@ var registerOverlayPortal = (el, opts = {}) => {
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/InlineTextField/styles.module.css#css-module
 init_react_import();
-var styles_module_default13 = { "InlineTextField": "_InlineTextField_1xph6_1" };
+var styles_module_default13 = { "InlineTextField": "_InlineTextField_104qp_1" };
 
 // lib/data/set-deep.ts
 init_react_import();
@@ -8739,7 +8793,7 @@ function useGetPuck() {
 }
 
 // components/Puck/index.tsx
-var import_fast_deep_equal3 = __toESM(require("fast-deep-equal"));
+var import_fast_deep_equal = __toESM(require_fast_deep_equal());
 
 // components/Puck/components/Header/index.tsx
 init_react_import();
@@ -9167,6 +9221,15 @@ function useSidebarResize(position, dispatch) {
   };
 }
 
+// lib/data/to-component.ts
+init_react_import();
+var toComponent = (item) => {
+  return "type" in item ? item : __spreadProps(__spreadValues({}, item), {
+    props: __spreadProps(__spreadValues({}, item.props), { id: "root" }),
+    type: "root"
+  });
+};
+
 // components/Puck/index.tsx
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var getClassName31 = get_class_name_factory_default("Puck", styles_module_default15);
@@ -9243,9 +9306,13 @@ function PuckProvider({ children }) {
     }
     const rootProps = ((_h = initialData == null ? void 0 : initialData.root) == null ? void 0 : _h.props) || (initialData == null ? void 0 : initialData.root) || {};
     const defaultedRootProps = __spreadValues(__spreadValues({}, (_i = config.root) == null ? void 0 : _i.defaultProps), rootProps);
+    const root = populateIds(
+      toComponent(__spreadProps(__spreadValues({}, initialData == null ? void 0 : initialData.root), { props: defaultedRootProps })),
+      config
+    );
     const newAppState = __spreadProps(__spreadValues({}, defaultAppState), {
       data: __spreadProps(__spreadValues({}, initialData), {
-        root: __spreadProps(__spreadValues({}, initialData == null ? void 0 : initialData.root), { props: defaultedRootProps }),
+        root: __spreadProps(__spreadValues({}, initialData == null ? void 0 : initialData.root), { props: root.props }),
         content: initialData.content || []
       }),
       ui: __spreadProps(__spreadValues(__spreadValues({}, initial), clientUiState), {
@@ -9341,17 +9408,17 @@ function PuckProvider({ children }) {
   });
   const previousData = (0, import_react60.useRef)(null);
   (0, import_react60.useEffect)(() => {
-    appStore.subscribe(
+    return appStore.subscribe(
       (s) => s.state.data,
       (data) => {
         if (onChange) {
-          if ((0, import_fast_deep_equal3.default)(data, previousData.current)) return;
+          if ((0, import_fast_deep_equal.default)(data, previousData.current)) return;
           onChange(data);
           previousData.current = data;
         }
       }
     );
-  }, []);
+  }, [onChange]);
   useRegisterPermissionsSlice(appStore, permissions);
   const uPuckStore = useRegisterUsePuckStore(appStore);
   (0, import_react60.useEffect)(() => {
@@ -9664,17 +9731,6 @@ function transformProps(data, propTransforms, config = { components: {} }) {
 
 // lib/resolve-all-data.ts
 init_react_import();
-
-// lib/data/to-component.ts
-init_react_import();
-var toComponent = (item) => {
-  return "type" in item ? item : __spreadProps(__spreadValues({}, item), {
-    props: __spreadProps(__spreadValues({}, item.props), { id: "root" }),
-    type: "root"
-  });
-};
-
-// lib/resolve-all-data.ts
 function resolveAllData(_0, _1) {
   return __async(this, arguments, function* (data, config, metadata = {}, onResolveStart, onResolveEnd) {
     var _a;

package/dist/index.mjs

@@ -18,14 +18,14 @@ import {
   setDeep,
   useGetPuck,
   usePuck
-} from "./chunk-MSKEXIWC.mjs";
+} from "./chunk-YRZRLNQC.mjs";
 import {
   init_react_import,
   migrate,
   resolveAllData,
   transformProps,
   walkTree
-} from "./chunk-OOLYDXKW.mjs";
+} from "./chunk-VBJEDLUM.mjs";
 
 // bundle/index.ts
 init_react_import();

package/dist/no-external.css

@@ -1329,16 +1329,17 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/InlineTextField/styles.module.css/#css-module-data */
-._InlineTextField_1xph6_1 {
+._InlineTextField_104qp_1 {
   cursor: text;
   display: inline-block;
   white-space: pre-wrap;
+  text-decoration: inherit;
 }
-[data-dnd-dragging] ._InlineTextField_1xph6_1 {
+[data-dnd-dragging] ._InlineTextField_104qp_1 {
   cursor: none;
   caret-color: transparent;
 }
-[data-dnd-dragging] ._InlineTextField_1xph6_1::selection {
+[data-dnd-dragging] ._InlineTextField_104qp_1::selection {
   display: none;
 }
 

package/dist/no-external.d.mts

@@ -1,4 +1,4 @@
-export { a7 as Adaptor, A as AppState, a5 as ArrayField, B as ArrayState, ak as AsFieldProps, N as BaseData, $ as BaseField, f as ComponentConfig, a as ComponentData, Z as ComponentDataMap, X as ComponentDataOptionalId, C as Config, _ as Content, ab as CustomField, aa as CustomFieldRender, j as Data, ah as DefaultComponentProps, K as DefaultComponents, ae as DefaultRootFieldProps, ag as DefaultRootProps, af as DefaultRootRenderProps, o as Direction, p as DragAxis, a9 as ExternalField, a8 as ExternalFieldWithAdaptor, L as ExtractConfigParams, am as ExtractField, h as Field, 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, Y as MappedItem, M as Metadata, a1 as NumberField, a6 as ObjectField, k as OnAction, x as OverrideKey, O as Overrides, P as Permissions, d as Plugin, b as PuckAction, G as PuckComponent, ad as PuckContext, a4 as RadioField, c as ResolveDataTrigger, J as RootConfig, T as RootData, R as RootDataWithProps, Q as RootDataWithoutProps, a3 as SelectField, S as Slot, E as SlotComponent, ac as SlotField, a0 as TextField, a2 as TextareaField, e as UiState, U as UserGenerics, q as Viewport, V as Viewports, al as WithChildren, ai as WithId, aj as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-Ctf3FZQI.mjs';
+export { a7 as Adaptor, A as AppState, a5 as ArrayField, B as ArrayState, al as AsFieldProps, N as BaseData, $ as BaseField, a9 as CacheOpts, f as ComponentConfig, a as ComponentData, Z as ComponentDataMap, X as ComponentDataOptionalId, C as Config, _ as Content, ac as CustomField, ab as CustomFieldRender, j as Data, ai as DefaultComponentProps, K as DefaultComponents, af as DefaultRootFieldProps, ah as DefaultRootProps, ag as DefaultRootRenderProps, o as Direction, p as DragAxis, aa as ExternalField, a8 as ExternalFieldWithAdaptor, L as ExtractConfigParams, an as ExtractField, h as Field, 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, Y as MappedItem, M as Metadata, a1 as NumberField, a6 as ObjectField, k as OnAction, x as OverrideKey, O as Overrides, P as Permissions, d as Plugin, b as PuckAction, G as PuckComponent, ae as PuckContext, a4 as RadioField, c as ResolveDataTrigger, J as RootConfig, T as RootData, R as RootDataWithProps, Q as RootDataWithoutProps, a3 as SelectField, S as Slot, E as SlotComponent, ad as SlotField, a0 as TextField, a2 as TextareaField, e as UiState, U as UserGenerics, q as Viewport, V as Viewports, am as WithChildren, aj as WithId, ak as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-7SvCIsj8.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 { a7 as Adaptor, A as AppState, a5 as ArrayField, B as ArrayState, ak as AsFieldProps, N as BaseData, $ as BaseField, f as ComponentConfig, a as ComponentData, Z as ComponentDataMap, X as ComponentDataOptionalId, C as Config, _ as Content, ab as CustomField, aa as CustomFieldRender, j as Data, ah as DefaultComponentProps, K as DefaultComponents, ae as DefaultRootFieldProps, ag as DefaultRootProps, af as DefaultRootRenderProps, o as Direction, p as DragAxis, a9 as ExternalField, a8 as ExternalFieldWithAdaptor, L as ExtractConfigParams, am as ExtractField, h as Field, 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, Y as MappedItem, M as Metadata, a1 as NumberField, a6 as ObjectField, k as OnAction, x as OverrideKey, O as Overrides, P as Permissions, d as Plugin, b as PuckAction, G as PuckComponent, ad as PuckContext, a4 as RadioField, c as ResolveDataTrigger, J as RootConfig, T as RootData, R as RootDataWithProps, Q as RootDataWithoutProps, a3 as SelectField, S as Slot, E as SlotComponent, ac as SlotField, a0 as TextField, a2 as TextareaField, e as UiState, U as UserGenerics, q as Viewport, V as Viewports, al as WithChildren, ai as WithId, aj as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-Ctf3FZQI.js';
+export { a7 as Adaptor, A as AppState, a5 as ArrayField, B as ArrayState, al as AsFieldProps, N as BaseData, $ as BaseField, a9 as CacheOpts, f as ComponentConfig, a as ComponentData, Z as ComponentDataMap, X as ComponentDataOptionalId, C as Config, _ as Content, ac as CustomField, ab as CustomFieldRender, j as Data, ai as DefaultComponentProps, K as DefaultComponents, af as DefaultRootFieldProps, ah as DefaultRootProps, ag as DefaultRootRenderProps, o as Direction, p as DragAxis, aa as ExternalField, a8 as ExternalFieldWithAdaptor, L as ExtractConfigParams, an as ExtractField, h as Field, 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, Y as MappedItem, M as Metadata, a1 as NumberField, a6 as ObjectField, k as OnAction, x as OverrideKey, O as Overrides, P as Permissions, d as Plugin, b as PuckAction, G as PuckComponent, ae as PuckContext, a4 as RadioField, c as ResolveDataTrigger, J as RootConfig, T as RootData, R as RootDataWithProps, Q as RootDataWithoutProps, a3 as SelectField, S as Slot, E as SlotComponent, ad as SlotField, a0 as TextField, a2 as TextareaField, e as UiState, U as UserGenerics, q as Viewport, V as Viewports, am as WithChildren, aj as WithId, ak as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-7SvCIsj8.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

@@ -153,6 +153,42 @@ var require_classnames = __commonJS({
   }
 });
 
+// ../../node_modules/fast-deep-equal/index.js
+var require_fast_deep_equal = __commonJS({
+  "../../node_modules/fast-deep-equal/index.js"(exports2, module2) {
+    "use strict";
+    init_react_import();
+    module2.exports = function equal(a, b) {
+      if (a === b) return true;
+      if (a && b && typeof a == "object" && typeof b == "object") {
+        if (a.constructor !== b.constructor) return false;
+        var length, i, keys;
+        if (Array.isArray(a)) {
+          length = a.length;
+          if (length != b.length) return false;
+          for (i = length; i-- !== 0; )
+            if (!equal(a[i], b[i])) return false;
+          return true;
+        }
+        if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
+        if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
+        if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
+        keys = Object.keys(a);
+        length = keys.length;
+        if (length !== Object.keys(b).length) return false;
+        for (i = length; i-- !== 0; )
+          if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
+        for (i = length; i-- !== 0; ) {
+          var key = keys[i];
+          if (!equal(a[key], b[key])) return false;
+        }
+        return true;
+      }
+      return a !== a && b !== b;
+    };
+  }
+});
+
 // bundle/no-external.ts
 var no_external_exports = {};
 __export(no_external_exports, {
@@ -1713,6 +1749,10 @@ var monitorHotkeys = (doc) => {
       useHotkeyStore.getState().reset();
     }
   };
+  const onBlur = () => {
+    useHotkeyStore.getState().reset();
+  };
+  window.addEventListener("blur", onBlur);
   doc.addEventListener("keydown", onKeyDown);
   doc.addEventListener("keyup", onKeyUp);
   doc.addEventListener("visibilitychange", onVisibilityChanged);
@@ -1720,6 +1760,7 @@ var monitorHotkeys = (doc) => {
     doc.removeEventListener("keydown", onKeyDown);
     doc.removeEventListener("keyup", onKeyUp);
     doc.removeEventListener("visibilitychange", onVisibilityChanged);
+    window.removeEventListener("blur", onBlur);
   };
 };
 var useMonitorHotkeys = () => {
@@ -1914,7 +1955,7 @@ var flattenData = (state, config) => {
     (content) => content,
     (item) => {
       data.push(item);
-      return null;
+      return item;
     }
   );
   return data;
@@ -1922,13 +1963,13 @@ var flattenData = (state, config) => {
 
 // lib/get-changed.ts
 init_react_import();
-var import_fast_deep_equal = __toESM(require("fast-deep-equal"));
+var import_fast_equals = require("fast-equals");
 var getChanged = (newItem, oldItem) => {
   return newItem ? Object.keys(newItem.props || {}).reduce((acc, item) => {
     const newItemProps = (newItem == null ? void 0 : newItem.props) || {};
     const oldItemProps = (oldItem == null ? void 0 : oldItem.props) || {};
     return __spreadProps(__spreadValues({}, acc), {
-      [item]: !(0, import_fast_deep_equal.default)(oldItemProps[item], newItemProps[item])
+      [item]: !(0, import_fast_equals.deepEqual)(oldItemProps[item], newItemProps[item])
     });
   }, {}) : {};
 };
@@ -2149,7 +2190,7 @@ var useRegisterFieldsSlice = (appStore, id) => {
 
 // lib/resolve-component-data.ts
 init_react_import();
-var import_fast_deep_equal2 = __toESM(require("fast-deep-equal"));
+var import_fast_equals2 = require("fast-equals");
 var cache = { lastChange: {} };
 var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], function* (item, config, metadata = {}, onResolveStart, onResolveEnd, trigger = "replace") {
   const configForItem = "type" in item && item.type !== "root" ? config.components[item.type] : config.root;
@@ -2158,7 +2199,7 @@ var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], f
   const id = "id" in item.props ? item.props.id : "root";
   if (shouldRunResolver) {
     const { item: oldItem = null, resolved = {} } = cache.lastChange[id] || {};
-    if (trigger !== "force" && item && (0, import_fast_deep_equal2.default)(item, oldItem)) {
+    if (trigger !== "force" && item && (0, import_fast_equals2.deepEqual)(item, oldItem)) {
       return { node: resolved, didChange: false };
     }
     const changed = getChanged(item, oldItem);
@@ -2208,7 +2249,7 @@ var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], f
   };
   return {
     node: itemWithResolvedChildren,
-    didChange: !(0, import_fast_deep_equal2.default)(item, itemWithResolvedChildren)
+    didChange: !(0, import_fast_equals2.deepEqual)(item, itemWithResolvedChildren)
   };
 });
 
@@ -3494,8 +3535,9 @@ var ArrayField = ({
                       var _a;
                       if (isDraggingAny) return;
                       const existingValue = value || [];
+                      const defaultProps = typeof field.defaultItemProps === "function" ? field.defaultItemProps(existingValue.length) : (_a = field.defaultItemProps) != null ? _a : {};
                       const newItem = defaultSlots(
-                        uniqifyItem((_a = field.defaultItemProps) != null ? _a : {}),
+                        uniqifyItem(defaultProps),
                         field.arrayFields
                       );
                       const newValue = [...existingValue, newItem];
@@ -3754,11 +3796,13 @@ var ExternalInput = ({
   id,
   readOnly
 }) => {
+  var _a;
   const {
     mapProp = (val) => val,
     mapRow = (val) => val,
     filterFields
   } = field || {};
+  const { enabled: shouldCacheData } = (_a = field.cache) != null ? _a : { enabled: true };
   const [data, setData] = (0, import_react17.useState)([]);
   const [isOpen, setOpen] = (0, import_react17.useState)(false);
   const [isLoading, setIsLoading] = (0, import_react17.useState)(true);
@@ -3784,11 +3828,18 @@ var ExternalInput = ({
     (query, filters2) => __async(void 0, null, function* () {
       setIsLoading(true);
       const cacheKey = `${id}-${query}-${JSON.stringify(filters2)}`;
-      const listData = dataCache[cacheKey] || (yield field.fetchList({ query, filters: filters2 }));
+      let listData;
+      if (shouldCacheData && dataCache[cacheKey]) {
+        listData = dataCache[cacheKey];
+      } else {
+        listData = yield field.fetchList({ query, filters: filters2 });
+      }
       if (listData) {
         setData(listData);
         setIsLoading(false);
-        dataCache[cacheKey] = listData;
+        if (shouldCacheData) {
+          dataCache[cacheKey] = listData;
+        }
       }
     }),
     [id, field]
@@ -3852,6 +3903,7 @@ var ExternalInput = ({
             }),
             onSubmit: (e) => {
               e.preventDefault();
+              e.stopPropagation();
               search(searchQuery, filters);
             },
             children: [
@@ -4755,12 +4807,14 @@ var DraggableComponent = ({
     }
     return cleanup;
   }, [permissions.drag, zoneCompound]);
+  const [, setRerender] = (0, import_react24.useState)(0);
   const ref = (0, import_react24.useRef)(null);
   const refSetter = (0, import_react24.useCallback)(
     (el) => {
       sortableRef(el);
-      if (el) {
+      if (ref.current !== el) {
         ref.current = el;
+        setRerender((update) => update + 1);
       }
     },
     [sortableRef]
@@ -5535,26 +5589,26 @@ var registerOverlayPortal = (el, opts = {}) => {
       capture: true
     });
   };
-  if (disableDragOnFocus) {
-    el.addEventListener("focus", onFocus, { capture: true });
-    el.addEventListener("blur", onBlur, { capture: true });
-  } else if (disableDrag) {
+  if (disableDrag) {
     el.addEventListener("pointerdown", stopPropagation, {
       capture: true
     });
+  } else if (disableDragOnFocus) {
+    el.addEventListener("focus", onFocus, { capture: true });
+    el.addEventListener("blur", onBlur, { capture: true });
   }
   el.setAttribute("data-puck-overlay-portal", "true");
   return () => {
     el.removeEventListener("mouseover", stopPropagation, {
       capture: true
     });
-    if (disableDragOnFocus) {
-      el.removeEventListener("focus", onFocus, { capture: true });
-      el.removeEventListener("blur", onFocus, { capture: true });
-    } else if (disableDrag) {
+    if (disableDrag) {
       el.removeEventListener("pointerdown", stopPropagation, {
         capture: true
       });
+    } else if (disableDragOnFocus) {
+      el.removeEventListener("focus", onFocus, { capture: true });
+      el.removeEventListener("blur", onBlur, { capture: true });
     }
     el.removeAttribute("data-puck-overlay-portal");
   };
@@ -5562,7 +5616,7 @@ var registerOverlayPortal = (el, opts = {}) => {
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/InlineTextField/styles.module.css#css-module
 init_react_import();
-var styles_module_default13 = { "InlineTextField": "_InlineTextField_1xph6_1" };
+var styles_module_default13 = { "InlineTextField": "_InlineTextField_104qp_1" };
 
 // lib/data/set-deep.ts
 init_react_import();
@@ -8739,7 +8793,7 @@ function useGetPuck() {
 }
 
 // components/Puck/index.tsx
-var import_fast_deep_equal3 = __toESM(require("fast-deep-equal"));
+var import_fast_deep_equal = __toESM(require_fast_deep_equal());
 
 // components/Puck/components/Header/index.tsx
 init_react_import();
@@ -9167,6 +9221,15 @@ function useSidebarResize(position, dispatch) {
   };
 }
 
+// lib/data/to-component.ts
+init_react_import();
+var toComponent = (item) => {
+  return "type" in item ? item : __spreadProps(__spreadValues({}, item), {
+    props: __spreadProps(__spreadValues({}, item.props), { id: "root" }),
+    type: "root"
+  });
+};
+
 // components/Puck/index.tsx
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var getClassName31 = get_class_name_factory_default("Puck", styles_module_default15);
@@ -9243,9 +9306,13 @@ function PuckProvider({ children }) {
     }
     const rootProps = ((_h = initialData == null ? void 0 : initialData.root) == null ? void 0 : _h.props) || (initialData == null ? void 0 : initialData.root) || {};
     const defaultedRootProps = __spreadValues(__spreadValues({}, (_i = config.root) == null ? void 0 : _i.defaultProps), rootProps);
+    const root = populateIds(
+      toComponent(__spreadProps(__spreadValues({}, initialData == null ? void 0 : initialData.root), { props: defaultedRootProps })),
+      config
+    );
     const newAppState = __spreadProps(__spreadValues({}, defaultAppState), {
       data: __spreadProps(__spreadValues({}, initialData), {
-        root: __spreadProps(__spreadValues({}, initialData == null ? void 0 : initialData.root), { props: defaultedRootProps }),
+        root: __spreadProps(__spreadValues({}, initialData == null ? void 0 : initialData.root), { props: root.props }),
         content: initialData.content || []
       }),
       ui: __spreadProps(__spreadValues(__spreadValues({}, initial), clientUiState), {
@@ -9341,17 +9408,17 @@ function PuckProvider({ children }) {
   });
   const previousData = (0, import_react60.useRef)(null);
   (0, import_react60.useEffect)(() => {
-    appStore.subscribe(
+    return appStore.subscribe(
       (s) => s.state.data,
       (data) => {
         if (onChange) {
-          if ((0, import_fast_deep_equal3.default)(data, previousData.current)) return;
+          if ((0, import_fast_deep_equal.default)(data, previousData.current)) return;
           onChange(data);
           previousData.current = data;
         }
       }
     );
-  }, []);
+  }, [onChange]);
   useRegisterPermissionsSlice(appStore, permissions);
   const uPuckStore = useRegisterUsePuckStore(appStore);
   (0, import_react60.useEffect)(() => {
@@ -9664,17 +9731,6 @@ function transformProps(data, propTransforms, config = { components: {} }) {
 
 // lib/resolve-all-data.ts
 init_react_import();
-
-// lib/data/to-component.ts
-init_react_import();
-var toComponent = (item) => {
-  return "type" in item ? item : __spreadProps(__spreadValues({}, item), {
-    props: __spreadProps(__spreadValues({}, item.props), { id: "root" }),
-    type: "root"
-  });
-};
-
-// lib/resolve-all-data.ts
 function resolveAllData(_0, _1) {
   return __async(this, arguments, function* (data, config, metadata = {}, onResolveStart, onResolveEnd) {
     var _a;

package/dist/no-external.mjs

@@ -18,14 +18,14 @@ import {
   setDeep,
   useGetPuck,
   usePuck
-} from "./chunk-MSKEXIWC.mjs";
+} from "./chunk-YRZRLNQC.mjs";
 import {
   init_react_import,
   migrate,
   resolveAllData,
   transformProps,
   walkTree
-} from "./chunk-OOLYDXKW.mjs";
+} from "./chunk-VBJEDLUM.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-Ctf3FZQI.mjs';
-export { m as migrate, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-Ctf3FZQI.mjs';
+import { C as Config, U as UserGenerics, M as Metadata } from './walk-tree-7SvCIsj8.mjs';
+export { m as migrate, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-7SvCIsj8.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-Ctf3FZQI.js';
-export { m as migrate, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-Ctf3FZQI.js';
+import { C as Config, U as UserGenerics, M as Metadata } from './walk-tree-7SvCIsj8.js';
+export { m as migrate, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-7SvCIsj8.js';
 import 'react';
 
 declare function Render<UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>>({ config, data, metadata, }: {

package/dist/rsc.js

@@ -460,19 +460,19 @@ function Render({
 }
 
 // lib/get-changed.ts
-var import_fast_deep_equal = __toESM(require("fast-deep-equal"));
+var import_fast_equals = require("fast-equals");
 var getChanged = (newItem, oldItem) => {
   return newItem ? Object.keys(newItem.props || {}).reduce((acc, item) => {
     const newItemProps = (newItem == null ? void 0 : newItem.props) || {};
     const oldItemProps = (oldItem == null ? void 0 : oldItem.props) || {};
     return __spreadProps(__spreadValues({}, acc), {
-      [item]: !(0, import_fast_deep_equal.default)(oldItemProps[item], newItemProps[item])
+      [item]: !(0, import_fast_equals.deepEqual)(oldItemProps[item], newItemProps[item])
     });
   }, {}) : {};
 };
 
 // lib/resolve-component-data.ts
-var import_fast_deep_equal2 = __toESM(require("fast-deep-equal"));
+var import_fast_equals2 = require("fast-equals");
 var cache = { lastChange: {} };
 var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], function* (item, config, metadata = {}, onResolveStart, onResolveEnd, trigger = "replace") {
   const configForItem = "type" in item && item.type !== "root" ? config.components[item.type] : config.root;
@@ -481,7 +481,7 @@ var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], f
   const id = "id" in item.props ? item.props.id : "root";
   if (shouldRunResolver) {
     const { item: oldItem = null, resolved = {} } = cache.lastChange[id] || {};
-    if (trigger !== "force" && item && (0, import_fast_deep_equal2.default)(item, oldItem)) {
+    if (trigger !== "force" && item && (0, import_fast_equals2.deepEqual)(item, oldItem)) {
       return { node: resolved, didChange: false };
     }
     const changed = getChanged(item, oldItem);
@@ -531,7 +531,7 @@ var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], f
   };
   return {
     node: itemWithResolvedChildren,
-    didChange: !(0, import_fast_deep_equal2.default)(item, itemWithResolvedChildren)
+    didChange: !(0, import_fast_equals2.deepEqual)(item, itemWithResolvedChildren)
   };
 });
 

package/dist/rsc.mjs

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

package/dist/{walk-tree-Ctf3FZQI.d.mts → walk-tree-7SvCIsj8.d.mts}

@@ -52,7 +52,7 @@ type ArrayField<Props extends {
             type: PropertyKey;
         } ? Field<Props[0][SubPropName], UserField> | UserField : Field<Props[0][SubPropName], UserField>;
     };
-    defaultItemProps?: Props[0];
+    defaultItemProps?: Props[0] | ((index: number) => Props[0]);
     getItemSummary?: (item: Props[0], index?: number) => string;
     max?: number;
     min?: number;
@@ -82,10 +82,14 @@ type ExternalFieldWithAdaptor<Props extends any = {
     adaptorParams?: object;
     getItemSummary: (item: NotUndefined<Props>, index?: number) => string;
 };
+type CacheOpts = {
+    enabled?: boolean;
+};
 type ExternalField<Props extends any = {
     [key: string]: any;
 }> = BaseField & {
     type: "external";
+    cache?: CacheOpts;
     placeholder?: string;
     fetchList: (params: {
         query: string;
@@ -147,7 +151,7 @@ type DropZoneProps = {
 };
 
 type PuckContext = {
-    renderDropZone: React.FC<DropZoneProps>;
+    renderDropZone: (props: DropZoneProps) => React.ReactNode;
     metadata: Metadata;
     isEditing: boolean;
     dragRef: ((element: Element | null) => void) | null;
@@ -631,4 +635,4 @@ type WalkTreeOptions = {
 };
 declare function walkTree<T extends ComponentData | RootData | G["UserData"], UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>>(data: T, config: UserConfig, callbackFn: (data: Content, options: WalkTreeOptions) => Content | null | void): T;
 
-export { type BaseField as $, type AppState as A, type ArrayState as B, type Config as C, type DropZoneProps as D, type SlotComponent as E, type Fields as F, type PuckComponent as G, type History as H, type IframeConfig as I, type RootConfig as J, type DefaultComponents as K, type ExtractConfigParams as L, type Metadata as M, type BaseData as N, type Overrides as O, type Permissions as P, type RootDataWithoutProps as Q, type RootDataWithProps as R, type Slot as S, type RootData as T, type UserGenerics as U, type Viewports as V, type WithSlotProps as W, type ComponentDataOptionalId as X, type MappedItem as Y, type ComponentDataMap as Z, type Content as _, type ComponentData as a, type TextField as a0, type NumberField as a1, type TextareaField as a2, type SelectField as a3, type RadioField as a4, type ArrayField as a5, type ObjectField as a6, type Adaptor as a7, type ExternalFieldWithAdaptor as a8, type ExternalField as a9, type CustomFieldRender as aa, type CustomField as ab, type SlotField as ac, type PuckContext as ad, type DefaultRootFieldProps as ae, type DefaultRootRenderProps as af, type DefaultRootProps as ag, type DefaultComponentProps as ah, type WithId as ai, type WithPuckProps as aj, type AsFieldProps as ak, type WithChildren as al, type ExtractField as am, type PuckAction as b, type ResolveDataTrigger as c, type Plugin as d, type UiState as e, type ComponentConfig as f, type FieldTransforms as g, type Field as h, type FieldProps as i, type Data as j, type OnAction as k, type InitialHistory as l, migrate as m, type ItemSelector as n, type Direction as o, type DragAxis as p, type Viewport as q, resolveAllData as r, type FieldTransformFnParams as s, transformProps as t, type FieldTransformFn as u, overrideKeys as v, walkTree as w, type OverrideKey as x, type FieldRenderFunctions as y, type ItemWithId as z };
+export { type BaseField as $, type AppState as A, type ArrayState as B, type Config as C, type DropZoneProps as D, type SlotComponent as E, type Fields as F, type PuckComponent as G, type History as H, type IframeConfig as I, type RootConfig as J, type DefaultComponents as K, type ExtractConfigParams as L, type Metadata as M, type BaseData as N, type Overrides as O, type Permissions as P, type RootDataWithoutProps as Q, type RootDataWithProps as R, type Slot as S, type RootData as T, type UserGenerics as U, type Viewports as V, type WithSlotProps as W, type ComponentDataOptionalId as X, type MappedItem as Y, type ComponentDataMap as Z, type Content as _, type ComponentData as a, type TextField as a0, type NumberField as a1, type TextareaField as a2, type SelectField as a3, type RadioField as a4, type ArrayField as a5, type ObjectField as a6, type Adaptor as a7, type ExternalFieldWithAdaptor as a8, type CacheOpts as a9, type ExternalField as aa, type CustomFieldRender as ab, type CustomField as ac, type SlotField as ad, type PuckContext as ae, type DefaultRootFieldProps as af, type DefaultRootRenderProps as ag, type DefaultRootProps as ah, type DefaultComponentProps as ai, type WithId as aj, type WithPuckProps as ak, type AsFieldProps as al, type WithChildren as am, type ExtractField as an, type PuckAction as b, type ResolveDataTrigger as c, type Plugin as d, type UiState as e, type ComponentConfig as f, type FieldTransforms as g, type Field as h, type FieldProps as i, type Data as j, type OnAction as k, type InitialHistory as l, migrate as m, type ItemSelector as n, type Direction as o, type DragAxis as p, type Viewport as q, resolveAllData as r, type FieldTransformFnParams as s, transformProps as t, type FieldTransformFn as u, overrideKeys as v, walkTree as w, type OverrideKey as x, type FieldRenderFunctions as y, type ItemWithId as z };

package/dist/{walk-tree-Ctf3FZQI.d.ts → walk-tree-7SvCIsj8.d.ts}

@@ -52,7 +52,7 @@ type ArrayField<Props extends {
             type: PropertyKey;
         } ? Field<Props[0][SubPropName], UserField> | UserField : Field<Props[0][SubPropName], UserField>;
     };
-    defaultItemProps?: Props[0];
+    defaultItemProps?: Props[0] | ((index: number) => Props[0]);
     getItemSummary?: (item: Props[0], index?: number) => string;
     max?: number;
     min?: number;
@@ -82,10 +82,14 @@ type ExternalFieldWithAdaptor<Props extends any = {
     adaptorParams?: object;
     getItemSummary: (item: NotUndefined<Props>, index?: number) => string;
 };
+type CacheOpts = {
+    enabled?: boolean;
+};
 type ExternalField<Props extends any = {
     [key: string]: any;
 }> = BaseField & {
     type: "external";
+    cache?: CacheOpts;
     placeholder?: string;
     fetchList: (params: {
         query: string;
@@ -147,7 +151,7 @@ type DropZoneProps = {
 };
 
 type PuckContext = {
-    renderDropZone: React.FC<DropZoneProps>;
+    renderDropZone: (props: DropZoneProps) => React.ReactNode;
     metadata: Metadata;
     isEditing: boolean;
     dragRef: ((element: Element | null) => void) | null;
@@ -631,4 +635,4 @@ type WalkTreeOptions = {
 };
 declare function walkTree<T extends ComponentData | RootData | G["UserData"], UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>>(data: T, config: UserConfig, callbackFn: (data: Content, options: WalkTreeOptions) => Content | null | void): T;
 
-export { type BaseField as $, type AppState as A, type ArrayState as B, type Config as C, type DropZoneProps as D, type SlotComponent as E, type Fields as F, type PuckComponent as G, type History as H, type IframeConfig as I, type RootConfig as J, type DefaultComponents as K, type ExtractConfigParams as L, type Metadata as M, type BaseData as N, type Overrides as O, type Permissions as P, type RootDataWithoutProps as Q, type RootDataWithProps as R, type Slot as S, type RootData as T, type UserGenerics as U, type Viewports as V, type WithSlotProps as W, type ComponentDataOptionalId as X, type MappedItem as Y, type ComponentDataMap as Z, type Content as _, type ComponentData as a, type TextField as a0, type NumberField as a1, type TextareaField as a2, type SelectField as a3, type RadioField as a4, type ArrayField as a5, type ObjectField as a6, type Adaptor as a7, type ExternalFieldWithAdaptor as a8, type ExternalField as a9, type CustomFieldRender as aa, type CustomField as ab, type SlotField as ac, type PuckContext as ad, type DefaultRootFieldProps as ae, type DefaultRootRenderProps as af, type DefaultRootProps as ag, type DefaultComponentProps as ah, type WithId as ai, type WithPuckProps as aj, type AsFieldProps as ak, type WithChildren as al, type ExtractField as am, type PuckAction as b, type ResolveDataTrigger as c, type Plugin as d, type UiState as e, type ComponentConfig as f, type FieldTransforms as g, type Field as h, type FieldProps as i, type Data as j, type OnAction as k, type InitialHistory as l, migrate as m, type ItemSelector as n, type Direction as o, type DragAxis as p, type Viewport as q, resolveAllData as r, type FieldTransformFnParams as s, transformProps as t, type FieldTransformFn as u, overrideKeys as v, walkTree as w, type OverrideKey as x, type FieldRenderFunctions as y, type ItemWithId as z };
+export { type BaseField as $, type AppState as A, type ArrayState as B, type Config as C, type DropZoneProps as D, type SlotComponent as E, type Fields as F, type PuckComponent as G, type History as H, type IframeConfig as I, type RootConfig as J, type DefaultComponents as K, type ExtractConfigParams as L, type Metadata as M, type BaseData as N, type Overrides as O, type Permissions as P, type RootDataWithoutProps as Q, type RootDataWithProps as R, type Slot as S, type RootData as T, type UserGenerics as U, type Viewports as V, type WithSlotProps as W, type ComponentDataOptionalId as X, type MappedItem as Y, type ComponentDataMap as Z, type Content as _, type ComponentData as a, type TextField as a0, type NumberField as a1, type TextareaField as a2, type SelectField as a3, type RadioField as a4, type ArrayField as a5, type ObjectField as a6, type Adaptor as a7, type ExternalFieldWithAdaptor as a8, type CacheOpts as a9, type ExternalField as aa, type CustomFieldRender as ab, type CustomField as ac, type SlotField as ad, type PuckContext as ae, type DefaultRootFieldProps as af, type DefaultRootRenderProps as ag, type DefaultRootProps as ah, type DefaultComponentProps as ai, type WithId as aj, type WithPuckProps as ak, type AsFieldProps as al, type WithChildren as am, type ExtractField as an, type PuckAction as b, type ResolveDataTrigger as c, type Plugin as d, type UiState as e, type ComponentConfig as f, type FieldTransforms as g, type Field as h, type FieldProps as i, type Data as j, type OnAction as k, type InitialHistory as l, migrate as m, type ItemSelector as n, type Direction as o, type DragAxis as p, type Viewport as q, resolveAllData as r, type FieldTransformFnParams as s, transformProps as t, type FieldTransformFn as u, overrideKeys as v, walkTree as w, type OverrideKey as x, type FieldRenderFunctions as y, type ItemWithId as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.21.0-canary.20aafb6a",
+  "version": "0.21.0-canary.29ef7131",
   "description": "The open-source visual editor for React",
   "author": "Chris Villa <chris@puckeditor.com>",
   "repository": "measuredco/puck",
@@ -96,7 +96,7 @@
     "@dnd-kit/helpers": "0.1.18",
     "@dnd-kit/react": "0.1.18",
     "deep-diff": "^1.0.2",
-    "fast-deep-equal": "^3.1.3",
+    "fast-equals": "5.2.2",
     "flat": "^5.0.2",
     "object-hash": "^3.0.0",
     "react-hotkeys-hook": "^4.6.1",