@measured/puck 0.21.0-canary.16a3eee1 → 0.21.0-canary.1b69a8f3

package/dist/{chunk-JZ2BPCUI.mjs → chunk-47DMTRCY.mjs}

@@ -19,12 +19,13 @@ import {
   rootDroppableId,
   rootZone,
   setupZone,
+  toComponent,
   useFieldTransforms,
   useSlots,
   walkAppState,
   walkField,
   walkTree
-} from "./chunk-X7YZ3YE7.mjs";
+} from "./chunk-JA7SEUEH.mjs";
 
 // ../../node_modules/classnames/index.js
 var require_classnames = __commonJS({
@@ -856,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);
@@ -863,6 +868,7 @@ var monitorHotkeys = (doc) => {
     doc.removeEventListener("keydown", onKeyDown);
     doc.removeEventListener("keyup", onKeyUp);
     doc.removeEventListener("visibilitychange", onVisibilityChanged);
+    window.removeEventListener("blur", onBlur);
   };
 };
 var useMonitorHotkeys = () => {
@@ -1065,29 +1071,37 @@ var flattenData = (state, config) => {
 
 // store/slices/permissions.ts
 var createPermissionsSlice = (set, get) => {
-  const resolvePermissions = (..._0) => __async(void 0, [..._0], function* (params = {}, force) {
+  const resolvePermissions = (..._0) => __async(null, [..._0], function* (params = {}, force) {
     const { state, permissions, config } = get();
     const { cache, globalPermissions } = permissions;
-    const resolveDataForItem = (item2, force2 = false) => __async(void 0, null, function* () {
-      var _a, _b, _c;
+    const resolvePermissionsForItem = (item2, force2 = false) => __async(null, null, function* () {
+      var _a, _b;
       const { config: config2, state: appState, setComponentLoading } = get();
+      const itemCache = cache[item2.props.id];
+      const nodes = appState.indexes.nodes;
+      const parentId = (_a = nodes[item2.props.id]) == null ? void 0 : _a.parentId;
+      const parentNode = parentId ? nodes[parentId] : null;
+      const parentData = (_b = parentNode == null ? void 0 : parentNode.data) != null ? _b : null;
       const componentConfig = item2.type === "root" ? config2.root : config2.components[item2.type];
       if (!componentConfig) {
         return;
       }
       const initialPermissions = __spreadValues(__spreadValues({}, globalPermissions), componentConfig.permissions);
       if (componentConfig.resolvePermissions) {
-        const changed = getChanged(item2, (_a = cache[item2.props.id]) == null ? void 0 : _a.lastData);
-        if (Object.values(changed).some((el) => el === true) || force2) {
+        const changed = getChanged(item2, itemCache == null ? void 0 : itemCache.lastData);
+        const propsChanged = Object.values(changed).some((el) => el === true);
+        const parentChanged = (itemCache == null ? void 0 : itemCache.lastParentId) !== parentId;
+        if (propsChanged || parentChanged || force2) {
           const clearTimeout2 = setComponentLoading(item2.props.id, true, 50);
           const resolvedPermissions = yield componentConfig.resolvePermissions(
             item2,
             {
               changed,
-              lastPermissions: ((_b = cache[item2.props.id]) == null ? void 0 : _b.lastPermissions) || null,
+              lastPermissions: (itemCache == null ? void 0 : itemCache.lastPermissions) || null,
               permissions: initialPermissions,
               appState: makeStatePublic(appState),
-              lastData: ((_c = cache[item2.props.id]) == null ? void 0 : _c.lastData) || null
+              lastData: (itemCache == null ? void 0 : itemCache.lastData) || null,
+              parent: parentData
             }
           );
           const latest = get().permissions;
@@ -1095,6 +1109,7 @@ var createPermissionsSlice = (set, get) => {
             permissions: __spreadProps(__spreadValues({}, latest), {
               cache: __spreadProps(__spreadValues({}, latest.cache), {
                 [item2.props.id]: {
+                  lastParentId: parentId,
                   lastData: item2,
                   lastPermissions: resolvedPermissions
                 }
@@ -1108,9 +1123,9 @@ var createPermissionsSlice = (set, get) => {
         }
       }
     });
-    const resolveDataForRoot = (force2 = false) => {
+    const resolvePermissionsForRoot = (force2 = false) => {
       const { state: appState } = get();
-      resolveDataForItem(
+      resolvePermissionsForItem(
         // Shim the root data in by conforming to component data shape
         {
           type: "root",
@@ -1121,16 +1136,16 @@ var createPermissionsSlice = (set, get) => {
     };
     const { item, type, root } = params;
     if (item) {
-      yield resolveDataForItem(item, force);
+      yield resolvePermissionsForItem(item, force);
     } else if (type) {
-      flattenData(state, config).filter((item2) => item2.type === type).map((item2) => __async(void 0, null, function* () {
-        yield resolveDataForItem(item2, force);
+      flattenData(state, config).filter((item2) => item2.type === type).map((item2) => __async(null, null, function* () {
+        yield resolvePermissionsForItem(item2, force);
       }));
     } else if (root) {
-      resolveDataForRoot(force);
+      resolvePermissionsForRoot(force);
     } else {
-      flattenData(state, config).map((item2) => __async(void 0, null, function* () {
-        yield resolveDataForItem(item2, force);
+      flattenData(state, config).map((item2) => __async(null, null, function* () {
+        yield resolvePermissionsForItem(item2, force);
       }));
     }
   });
@@ -1210,7 +1225,7 @@ var createFieldsSlice = (_set, _get) => {
 };
 var useRegisterFieldsSlice = (appStore, id) => {
   const resolveFields = useCallback(
-    (reset) => __async(void 0, null, function* () {
+    (reset) => __async(null, null, function* () {
       var _a, _b;
       const { fields, lastResolvedData } = appStore.getState().fields;
       const metadata = appStore.getState().metadata;
@@ -1410,7 +1425,7 @@ var createAppStore = (initialAppStore) => create2()(
         const selectedItem = state.ui.itemSelector ? getItem(state.ui.itemSelector, state) : null;
         return __spreadProps(__spreadValues({}, s), { state, selectedItem });
       }),
-      resolveComponentData: (componentData, trigger) => __async(void 0, null, function* () {
+      resolveComponentData: (componentData, trigger) => __async(null, null, function* () {
         const { config, metadata, setComponentLoading, permissions } = get();
         const timeouts = {};
         return yield resolveComponentData(
@@ -1421,7 +1436,7 @@ var createAppStore = (initialAppStore) => create2()(
             const id = "id" in item.props ? item.props.id : "root";
             timeouts[id] = setComponentLoading(id, true, 50);
           },
-          (item) => __async(void 0, null, function* () {
+          (item) => __async(null, null, function* () {
             const id = "id" in item.props ? item.props.id : "root";
             if ("type" in item) {
               yield permissions.refreshPermissions({ item });
@@ -1433,7 +1448,7 @@ var createAppStore = (initialAppStore) => create2()(
           trigger
         );
       }),
-      resolveAndCommitData: () => __async(void 0, null, function* () {
+      resolveAndCommitData: () => __async(null, null, function* () {
         const { config, state, dispatch, resolveComponentData: resolveComponentData2 } = get();
         walkAppState(
           state,
@@ -2454,7 +2469,7 @@ var collisionStore = createStore(() => ({
 
 // lib/dnd/collision/dynamic/index.ts
 var flushNext = "";
-var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input) => {
+var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => ((input) => {
   var _a, _b, _c, _d, _e;
   const { dragOperation, droppable } = input;
   const { position } = dragOperation;
@@ -2547,7 +2562,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
   }
   collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "hotpink");
   return null;
-};
+});
 
 // components/Sortable/index.tsx
 import { useSortable } from "@dnd-kit/react/sortable";
@@ -2980,8 +2995,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];
@@ -3156,11 +3172,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);
@@ -3183,14 +3201,21 @@ var ExternalInput = ({
   }, [mappedData]);
   const [searchQuery, setSearchQuery] = useState6(field.initialQuery || "");
   const search = useCallback3(
-    (query, filters2) => __async(void 0, null, function* () {
+    (query, filters2) => __async(null, 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]
@@ -3254,6 +3279,7 @@ var ExternalInput = ({
             }),
             onSubmit: (e) => {
               e.preventDefault();
+              e.stopPropagation();
               search(searchQuery, filters);
             },
             children: [
@@ -3401,7 +3427,7 @@ var ExternalField = ({
             placeholder: ((_a = deprecatedField.adaptor) == null ? void 0 : _a.name) ? `Select from ${deprecatedField.adaptor.name}` : validField.placeholder || "Select data",
             mapProp: ((_b = deprecatedField.adaptor) == null ? void 0 : _b.mapProp) || validField.mapProp,
             mapRow: validField.mapRow,
-            fetchList: ((_c = deprecatedField.adaptor) == null ? void 0 : _c.fetchList) ? () => __async(void 0, null, function* () {
+            fetchList: ((_c = deprecatedField.adaptor) == null ? void 0 : _c.fetchList) ? () => __async(null, null, function* () {
               return yield deprecatedField.adaptor.fetchList(
                 deprecatedField.adaptorParams
               );
@@ -3777,6 +3803,7 @@ function AutoFieldInternal(props) {
     }
     return (_props) => null;
   }, [field.type]);
+  const fieldKey = field.type === "custom" ? field.key : void 0;
   let FieldComponent = useMemo3(() => {
     if (field.type === "custom") {
       if (!field.render) {
@@ -3786,7 +3813,7 @@ function AutoFieldInternal(props) {
     } else if (field.type !== "slot") {
       return render[field.type];
     }
-  }, [field.type, render]);
+  }, [field.type, fieldKey, render]);
   const { visible = true } = props.field;
   if (!visible) {
     return null;
@@ -4164,12 +4191,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]
@@ -4824,7 +4853,20 @@ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlu
 
 // lib/insert-component.ts
 init_react_import();
-var insertComponent = (componentType, zone, index, appStore) => __async(void 0, null, function* () {
+
+// lib/get-selector-for-id.ts
+init_react_import();
+var getSelectorForId = (state, id) => {
+  const node = state.indexes.nodes[id];
+  if (!node) return;
+  const zoneCompound = `${node.parentId}:${node.zone}`;
+  const index = state.indexes.zones[zoneCompound].contentIds.indexOf(id);
+  return { zone: zoneCompound, index };
+};
+
+// lib/insert-component.ts
+var insertComponent = (componentType, zone, index, appStore) => __async(null, null, function* () {
+  const { getState } = appStore;
   const id = generateId(componentType);
   const insertActionData = {
     type: "insert",
@@ -4833,8 +4875,9 @@ var insertComponent = (componentType, zone, index, appStore) => __async(void 0,
     destinationZone: zone,
     id
   };
-  const { state, dispatch, resolveComponentData: resolveComponentData2 } = appStore;
-  const insertedState = insertAction(state, insertActionData, appStore);
+  const stateBefore = getState().state;
+  const insertedState = insertAction(stateBefore, insertActionData, getState());
+  const dispatch = getState().dispatch;
   dispatch(__spreadProps(__spreadValues({}, insertActionData), {
     // Dispatch insert rather set, as user's may rely on this via onAction
     // We must always record history here so the insert is added to user history
@@ -4842,23 +4885,21 @@ var insertComponent = (componentType, zone, index, appStore) => __async(void 0,
     // entries on insert - one for the initial insert, and one when the data resolves
     recordHistory: true
   }));
-  const itemSelector = {
-    index,
-    zone
-  };
+  const itemSelector = { index, zone };
   dispatch({ type: "setUi", ui: { itemSelector } });
   const itemData = getItem(itemSelector, insertedState);
-  if (itemData) {
-    const resolved = yield resolveComponentData2(itemData, "insert");
-    if (resolved.didChange) {
-      dispatch({
-        type: "replace",
-        destinationZone: itemSelector.zone,
-        destinationIndex: itemSelector.index,
-        data: resolved.node
-      });
-    }
-  }
+  if (!itemData) return;
+  const resolveComponentData2 = getState().resolveComponentData;
+  const resolved = yield resolveComponentData2(itemData, "insert");
+  if (!resolved.didChange) return;
+  const latestItemSelector = getSelectorForId(getState().state, id);
+  if (!latestItemSelector) return;
+  dispatch({
+    type: "replace",
+    destinationZone: latestItemSelector.zone,
+    destinationIndex: latestItemSelector.index,
+    data: resolved.node
+  });
 });
 
 // components/DragDropContext/index.tsx
@@ -5095,7 +5136,7 @@ var DragDropContextClient = ({
                     thisPreview.componentType,
                     thisPreview.zone,
                     thisPreview.index,
-                    appStore.getState()
+                    appStore
                   );
                 } else if (initialSelector.current) {
                   dispatch({
@@ -5508,7 +5549,7 @@ import { useCallback as useCallback9 } from "react";
 function useRenderedCallback(callback, deps) {
   const manager = useDragDropManager();
   return useCallback9(
-    (...args) => __async(this, null, function* () {
+    (...args) => __async(null, null, function* () {
       yield manager == null ? void 0 : manager.renderer.rendering;
       return callback(...args);
     }),
@@ -5674,26 +5715,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");
   };
@@ -5701,7 +5742,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();
@@ -5737,16 +5778,6 @@ function setDeep(node, path, newVal) {
   return __spreadValues(__spreadValues({}, node), newNode);
 }
 
-// lib/get-selector-for-id.ts
-init_react_import();
-var getSelectorForId = (state, id) => {
-  const node = state.indexes.nodes[id];
-  if (!node) return;
-  const zoneCompound = `${node.parentId}:${node.zone}`;
-  const index = state.indexes.zones[zoneCompound].contentIds.indexOf(id);
-  return { zone: zoneCompound, index };
-};
-
 // components/InlineTextField/index.tsx
 import { jsx as jsx24 } from "react/jsx-runtime";
 var getClassName18 = get_class_name_factory_default("InlineTextField", styles_module_default13);
@@ -5775,7 +5806,7 @@ var InlineTextFieldInternal = ({
         ref.current.replaceChildren(value);
       }
       const cleanupPortal = registerOverlayPortal(ref.current);
-      const handleInput = (e) => __async(void 0, null, function* () {
+      const handleInput = (e) => __async(null, null, function* () {
         var _a2;
         const appStore2 = appStoreApi.getState();
         const node = appStore2.state.indexes.nodes[componentId];
@@ -6067,7 +6098,8 @@ var DropZoneEdit = forwardRef3(
     style,
     className,
     minEmptyHeight: userMinEmptyHeight = 128,
-    collisionAxis
+    collisionAxis,
+    as
   }, userRef) {
     const ctx = useContext8(dropZoneContext);
     const appStoreApi = useAppStoreApi();
@@ -6210,8 +6242,9 @@ var DropZoneEdit = forwardRef3(
       userMinEmptyHeight,
       ref
     });
+    const El = as != null ? as : "div";
     return /* @__PURE__ */ jsx26(
-      "div",
+      El,
       {
         className: `${getClassName19({
           isRootZone,
@@ -6274,7 +6307,7 @@ var DropZoneRenderItem = ({
 };
 var DropZoneRenderPure = (props) => /* @__PURE__ */ jsx26(DropZoneRender, __spreadValues({}, props));
 var DropZoneRender = forwardRef3(
-  function DropZoneRenderInternal({ className, style, zone }, ref) {
+  function DropZoneRenderInternal({ className, style, zone, as }, ref) {
     const ctx = useContext8(dropZoneContext);
     const { areaId = "root" } = ctx || {};
     const { config, data, metadata } = useContext8(renderContext);
@@ -6287,13 +6320,14 @@ var DropZoneRender = forwardRef3(
         }
       }
     }, [content]);
+    const El = as != null ? as : "div";
     if (!data || !config) {
       return null;
     }
     if (zoneCompound !== rootDroppableId) {
       content = setupZone(data, zoneCompound).zones[zoneCompound];
     }
-    return /* @__PURE__ */ jsx26("div", { className, style, ref, children: content.map((item) => {
+    return /* @__PURE__ */ jsx26(El, { className, style, ref, children: content.map((item) => {
       const Component = config.components[item.type];
       if (Component) {
         return /* @__PURE__ */ jsx26(
@@ -6436,7 +6470,7 @@ function createUsePuck() {
     }
     const result = useStore3(
       usePuckApi,
-      selector != null ? selector : (s) => s
+      selector != null ? selector : ((s) => s)
     );
     return result;
   };
@@ -6583,49 +6617,48 @@ var DefaultFields = ({
 }) => {
   return /* @__PURE__ */ jsx29(Fragment8, { children });
 };
-var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(void 0, null, function* () {
-  let currentProps;
+var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(null, null, function* () {
   const { dispatch, state, selectedItem, resolveComponentData: resolveComponentData2 } = appStore.getState();
   const { data, ui } = state;
   const { itemSelector } = ui;
   const rootProps = data.root.props || data.root;
-  if (selectedItem) {
-    currentProps = selectedItem.props;
-  } else {
-    currentProps = rootProps;
-  }
-  const newProps = __spreadProps(__spreadValues({}, currentProps), {
-    [fieldName]: value
-  });
+  const currentProps = selectedItem ? selectedItem.props : rootProps;
+  const newProps = __spreadProps(__spreadValues({}, currentProps), { [fieldName]: value });
   if (selectedItem && itemSelector) {
+    const resolved = yield resolveComponentData2(
+      __spreadProps(__spreadValues({}, selectedItem), { props: newProps }),
+      "replace"
+    );
+    const latestSelector = getSelectorForId(
+      appStore.getState().state,
+      selectedItem.props.id
+    );
+    if (!latestSelector) return;
     dispatch({
       type: "replace",
-      destinationIndex: itemSelector.index,
-      destinationZone: itemSelector.zone || rootDroppableId,
-      data: (yield resolveComponentData2(
-        __spreadProps(__spreadValues({}, selectedItem), { props: newProps }),
+      destinationIndex: latestSelector.index,
+      destinationZone: latestSelector.zone || rootDroppableId,
+      data: resolved.node,
+      ui: updatedUi
+    });
+    return;
+  }
+  if (data.root.props) {
+    dispatch({
+      type: "replaceRoot",
+      root: (yield resolveComponentData2(
+        __spreadProps(__spreadValues({}, data.root), { props: newProps }),
         "replace"
       )).node,
-      ui: updatedUi
+      ui: __spreadValues(__spreadValues({}, ui), updatedUi),
+      recordHistory: true
     });
-  } else {
-    if (data.root.props) {
-      dispatch({
-        type: "replaceRoot",
-        root: (yield resolveComponentData2(
-          __spreadProps(__spreadValues({}, data.root), { props: newProps }),
-          "replace"
-        )).node,
-        ui: __spreadValues(__spreadValues({}, ui), updatedUi),
-        recordHistory: true
-      });
-    } else {
-      dispatch({
-        type: "setData",
-        data: { root: newProps }
-      });
-    }
+    return;
   }
+  dispatch({
+    type: "setData",
+    data: { root: newProps }
+  });
 });
 var FieldsChild = ({ fieldName }) => {
   const field = useAppStore((s) => s.fields.fields[fieldName]);
@@ -6957,7 +6990,7 @@ var CopyHostStyles = ({
     let elements = [];
     const hashes = {};
     const lookupEl = (el) => elements.findIndex((elementMap) => elementMap.original === el);
-    const mirrorEl = (el, inlineStyles = false) => __async(void 0, null, function* () {
+    const mirrorEl = (el, inlineStyles = false) => __async(null, null, function* () {
       let mirror;
       if (el.nodeName === "LINK" && inlineStyles) {
         mirror = document.createElement("style");
@@ -6989,7 +7022,7 @@ var CopyHostStyles = ({
       }
       return mirror;
     });
-    const addEl = (el) => __async(void 0, null, function* () {
+    const addEl = (el) => __async(null, null, function* () {
       const index = lookupEl(el);
       if (index > -1) {
         if (debug)
@@ -7062,7 +7095,7 @@ var CopyHostStyles = ({
     const parentBody = parentDocument.getElementsByTagName("body")[0];
     syncAttributes(parentBody, doc.body);
     Promise.all(
-      collectedStyles.map((styleNode, i) => __async(void 0, null, function* () {
+      collectedStyles.map((styleNode, i) => __async(null, null, function* () {
         if (styleNode.nodeName === "LINK") {
           const linkHref = styleNode.href;
           if (hrefs.indexOf(linkHref) > -1) {
@@ -8587,9 +8620,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), {
@@ -8626,7 +8663,12 @@ function PuckProvider({ children }) {
       });
     })
   );
-  const initialHistoryIndex = (_initialHistory == null ? void 0 : _initialHistory.index) || blendedHistories.length - 1;
+  const initialHistoryIndex = useMemo20(() => {
+    if ((_initialHistory == null ? void 0 : _initialHistory.index) !== void 0 && (_initialHistory == null ? void 0 : _initialHistory.index) >= 0 && (_initialHistory == null ? void 0 : _initialHistory.index) < blendedHistories.length) {
+      return _initialHistory == null ? void 0 : _initialHistory.index;
+    }
+    return blendedHistories.length - 1;
+  }, []);
   const initialAppState = blendedHistories[initialHistoryIndex].state;
   const loadedOverrides = useLoadedOverrides({
     overrides,
@@ -8685,7 +8727,7 @@ function PuckProvider({ children }) {
   });
   const previousData = useRef12(null);
   useEffect29(() => {
-    appStore.subscribe(
+    return appStore.subscribe(
       (s) => s.state.data,
       (data) => {
         if (onChange) {
@@ -8695,7 +8737,7 @@ function PuckProvider({ children }) {
         }
       }
     );
-  }, []);
+  }, [onChange]);
   useRegisterPermissionsSlice(appStore, permissions);
   const uPuckStore = useRegisterUsePuckStore(appStore);
   useEffect29(() => {
@@ -8911,269 +8953,38 @@ classnames/index.js:
   *)
 
 lucide-react/dist/esm/shared/src/utils.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/defaultAttributes.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/Icon.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/createLucideIcon.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/chevron-down.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/chevron-right.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/chevron-up.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/circle-check-big.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/copy.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/corner-left-up.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/ellipsis-vertical.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/globe.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/hash.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/layers.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/layout-grid.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/link.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/list.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/lock-open.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/lock.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/monitor.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/panel-left.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/panel-right.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/plus.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/redo-2.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/search.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/sliders-horizontal.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/smartphone.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/tablet.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/trash.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/type.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/undo-2.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/zoom-in.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/zoom-out.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/lucide-react.js:
   (**
    * @license lucide-react v0.468.0 - ISC