@measured/puck 0.19.0-canary.f96dc87b → 0.19.0-canary.fb0e8e24

package/dist/index.mjs

@@ -1,4 +1,6 @@
 import {
+  SlotRender,
+  SlotRenderPure,
   __async,
   __commonJS,
   __objRest,
@@ -8,17 +10,20 @@ import {
   __spreadProps,
   __spreadValues,
   __toESM,
+  createIsSlotConfig,
   getChanged,
   init_react_import,
+  isSlot,
   resolveAllData,
   resolveComponentData,
-  resolveRootData,
   rootAreaId,
   rootDroppableId,
   rootZone,
   setupZone,
-  transformProps
-} from "./chunk-7N5DRY4G.mjs";
+  transformProps,
+  useSlots,
+  walkTree
+} from "./chunk-COT3ZFIM.mjs";
 
 // ../../node_modules/classnames/index.js
 var require_classnames = __commonJS({
@@ -207,13 +212,13 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css#css-module
 init_react_import();
-var styles_module_default2 = { "InputWrapper": "_InputWrapper_g5w3n_1", "Input-label": "_Input-label_g5w3n_5", "Input-labelIcon": "_Input-labelIcon_g5w3n_14", "Input-disabledIcon": "_Input-disabledIcon_g5w3n_21", "Input-input": "_Input-input_g5w3n_26", "Input": "_Input_g5w3n_1", "Input--readOnly": "_Input--readOnly_g5w3n_74", "Input-radioGroupItems": "_Input-radioGroupItems_g5w3n_85", "Input-radio": "_Input-radio_g5w3n_85", "Input-radioInner": "_Input-radioInner_g5w3n_102", "Input-radioInput": "_Input-radioInput_g5w3n_147" };
+var styles_module_default2 = { "InputWrapper": "_InputWrapper_4xor1_1", "Input-label": "_Input-label_4xor1_5", "Input-labelIcon": "_Input-labelIcon_4xor1_14", "Input-disabledIcon": "_Input-disabledIcon_4xor1_21", "Input-input": "_Input-input_4xor1_26", "Input": "_Input_4xor1_1", "Input--readOnly": "_Input--readOnly_4xor1_75", "Input-radioGroupItems": "_Input-radioGroupItems_4xor1_86", "Input-radio": "_Input-radio_4xor1_86", "Input-radioInner": "_Input-radioInner_4xor1_103", "Input-radioInput": "_Input-radioInput_4xor1_148" };
 
 // components/AutoField/index.tsx
 import {
   useCallback as useCallback4,
   useContext as useContext3,
-  useEffect as useEffect11,
+  useEffect as useEffect10,
   useMemo as useMemo5,
   useState as useState8
 } from "react";
@@ -575,7 +580,7 @@ init_react_import();
 // lib/filter.ts
 init_react_import();
 
-// lib/reorder.ts
+// lib/data/reorder.ts
 init_react_import();
 var reorder = (list, startIndex, endIndex) => {
   const result = Array.from(list);
@@ -584,7 +589,7 @@ var reorder = (list, startIndex, endIndex) => {
   return result;
 };
 
-// lib/replace.ts
+// lib/data/replace.ts
 init_react_import();
 var replace = (list, index, newItem) => {
   const result = Array.from(list);
@@ -676,7 +681,7 @@ var IconButton = ({
 };
 
 // components/AutoField/fields/ArrayField/index.tsx
-import { useCallback as useCallback2, useEffect as useEffect6, useRef, useState as useState3 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect5, useRef, useState as useState3 } from "react";
 
 // components/DragIcon/index.tsx
 init_react_import();
@@ -696,44 +701,37 @@ init_react_import();
 // reducer/index.ts
 init_react_import();
 
-// reducer/data.ts
-init_react_import();
-
-// lib/insert.ts
+// reducer/actions/set.ts
 init_react_import();
-var insert = (list, index, item) => {
-  const result = Array.from(list);
-  result.splice(index, 0, item);
-  return result;
-};
 
-// lib/remove.ts
+// lib/data/walk-app-state.ts
 init_react_import();
-var remove = (list, index) => {
-  const result = Array.from(list);
-  result.splice(index, 1);
-  return result;
-};
 
-// lib/get-item.ts
+// lib/data/for-each-slot.ts
 init_react_import();
-function getItem(selector, data, dynamicProps = {}) {
-  if (!selector.zone || selector.zone === rootDroppableId) {
-    const item2 = data.content[selector.index];
-    return (item2 == null ? void 0 : item2.props) ? __spreadProps(__spreadValues({}, item2), { props: dynamicProps[item2.props.id] || item2.props }) : void 0;
+var forEachSlot = (item, cb, recursive = false, isSlot2 = isSlot) => {
+  const props = item.props || {};
+  const propKeys = Object.keys(props);
+  for (let i = 0; i < propKeys.length; i++) {
+    const propKey = propKeys[i];
+    const itemType = "type" in item ? item.type : "root";
+    if (isSlot2(itemType, propKey, props[propKey])) {
+      const content = props[propKey];
+      cb(props.id, propKey, content);
+      if (recursive) {
+        content.forEach(
+          (childItem) => __async(void 0, null, function* () {
+            return forEachSlot(childItem, cb, true, isSlot2);
+          })
+        );
+      }
+    }
   }
-  const item = setupZone(data, selector.zone).zones[selector.zone][selector.index];
-  return (item == null ? void 0 : item.props) ? __spreadProps(__spreadValues({}, item), { props: dynamicProps[item.props.id] || item.props }) : void 0;
-}
+};
 
-// lib/reduce-related-zones.ts
+// lib/data/for-related-zones.ts
 init_react_import();
 
-// lib/generate-id.ts
-init_react_import();
-import { v4 as uuidv4 } from "uuid";
-var generateId = (type) => type ? `${type}-${uuidv4()}` : uuidv4();
-
 // lib/get-zone-id.ts
 init_react_import();
 var getZoneId = (zoneCompound) => {
@@ -746,301 +744,566 @@ var getZoneId = (zoneCompound) => {
   return [rootDroppableId, zoneCompound];
 };
 
-// lib/reduce-related-zones.ts
-function reduceRelatedZones(item, data, fn) {
+// lib/data/for-related-zones.ts
+function forRelatedZones(item, data, cb, path = []) {
+  Object.entries(data.zones || {}).forEach(([zoneCompound, content]) => {
+    const [parentId] = getZoneId(zoneCompound);
+    if (parentId === item.props.id) {
+      cb(path, zoneCompound, content);
+    }
+  });
+}
+
+// lib/data/strip-slots.ts
+init_react_import();
+var stripSlots = (data) => {
   return __spreadProps(__spreadValues({}, data), {
-    zones: Object.keys(data.zones || {}).reduce(
-      (acc, key) => {
-        const [parentId] = getZoneId(key);
-        if (parentId === item.props.id) {
-          const zones = data.zones;
-          return fn(acc, key, zones[key]);
+    props: Object.entries(data.props).reduce(
+      (acc, [propKey, propVal]) => {
+        if (isSlot(propVal)) {
+          return acc;
         }
-        return __spreadProps(__spreadValues({}, acc), { [key]: data.zones[key] });
+        return __spreadProps(__spreadValues({}, acc), { [propKey]: propVal });
       },
-      {}
+      { id: data.props.id }
     )
   });
+};
+
+// lib/data/walk-app-state.ts
+function walkAppState(state, config, mapContent = (content) => content, mapNodeOrSkip = (item) => item) {
+  var _a;
+  let newZones = {};
+  const newZoneIndex = {};
+  const newNodeIndex = {};
+  const processContent = (path, zoneCompound, content, zoneType, newId) => {
+    var _a2;
+    const [parentId] = zoneCompound.split(":");
+    const mappedContent = ((_a2 = mapContent(content, zoneCompound, zoneType)) != null ? _a2 : content) || [];
+    const [_2, zone] = zoneCompound.split(":");
+    const newZoneCompound = `${newId || parentId}:${zone}`;
+    const newContent2 = mappedContent.map(
+      (zoneChild, index) => processItem(zoneChild, [...path, newZoneCompound], index)
+    );
+    newZoneIndex[newZoneCompound] = {
+      contentIds: newContent2.map((item) => item.props.id),
+      type: zoneType
+    };
+    return [newZoneCompound, newContent2];
+  };
+  const processRelatedZones = (item, newId, initialPath) => {
+    forRelatedZones(
+      item,
+      state.data,
+      (relatedPath, relatedZoneCompound, relatedContent) => {
+        const [zoneCompound, newContent2] = processContent(
+          relatedPath,
+          relatedZoneCompound,
+          relatedContent,
+          "dropzone",
+          newId
+        );
+        newZones[zoneCompound] = newContent2;
+      },
+      initialPath
+    );
+  };
+  const processItem = (item, path, index) => {
+    const mappedItem = mapNodeOrSkip(item, path, index);
+    if (!mappedItem) return item;
+    const id = mappedItem.props.id;
+    const newProps = __spreadValues({}, mappedItem.props);
+    forEachSlot(
+      mappedItem,
+      (parentId2, slotId, content) => {
+        const zoneCompound = `${parentId2}:${slotId}`;
+        const [_2, newContent2] = processContent(
+          path,
+          zoneCompound,
+          content,
+          "slot",
+          parentId2
+        );
+        newProps[slotId] = newContent2;
+      },
+      false,
+      createIsSlotConfig(config)
+    );
+    processRelatedZones(item, id, path);
+    const newItem = __spreadProps(__spreadValues({}, item), { props: newProps });
+    const thisZoneCompound = path[path.length - 1];
+    const [parentId, zone] = thisZoneCompound ? thisZoneCompound.split(":") : [null, ""];
+    newNodeIndex[id] = {
+      data: newItem,
+      flatData: stripSlots(newItem),
+      path,
+      parentId,
+      zone
+    };
+    const finalData = __spreadProps(__spreadValues({}, newItem), { props: __spreadValues({}, newItem.props) });
+    if (newProps.id === "root") {
+      delete finalData["type"];
+      delete finalData.props["id"];
+    }
+    return finalData;
+  };
+  const zones = state.data.zones || {};
+  const [_, newContent] = processContent(
+    [],
+    rootDroppableId,
+    state.data.content,
+    "root"
+  );
+  const processedContent = newContent;
+  const zonesAlreadyProcessed = Object.keys(newZones);
+  Object.keys(zones || {}).forEach((zoneCompound) => {
+    const [parentId] = zoneCompound.split(":");
+    if (zonesAlreadyProcessed.includes(zoneCompound)) {
+      return;
+    }
+    const [_2, newContent2] = processContent(
+      [rootDroppableId],
+      zoneCompound,
+      zones[zoneCompound],
+      "dropzone",
+      parentId
+    );
+    newZones[zoneCompound] = newContent2;
+  }, newZones);
+  const processedRoot = processItem(
+    {
+      type: "root",
+      props: __spreadProps(__spreadValues({}, (_a = state.data.root.props) != null ? _a : state.data.root), { id: "root" })
+    },
+    [],
+    -1
+  );
+  const root = __spreadProps(__spreadValues({}, state.data.root), {
+    props: processedRoot.props
+  });
+  return __spreadProps(__spreadValues({}, state), {
+    data: {
+      root,
+      content: processedContent,
+      zones: __spreadValues(__spreadValues({}, state.data.zones), newZones)
+    },
+    indexes: {
+      nodes: __spreadValues(__spreadValues({}, state.indexes.nodes), newNodeIndex),
+      zones: __spreadValues(__spreadValues({}, state.indexes.zones), newZoneIndex)
+    }
+  });
+}
+
+// reducer/actions/set.ts
+var setAction = (state, action, appStore) => {
+  if (typeof action.state === "object") {
+    const newState = __spreadValues(__spreadValues({}, state), action.state);
+    if (action.state.indexes) {
+      return newState;
+    }
+    console.warn(
+      "`set` is expensive and may cause unnecessary re-renders. Consider using a more atomic action instead."
+    );
+    return walkAppState(newState, appStore.config);
+  }
+  return __spreadValues(__spreadValues({}, state), action.state(state));
+};
+
+// reducer/actions/insert.ts
+init_react_import();
+
+// lib/data/insert.ts
+init_react_import();
+var insert = (list, index, item) => {
+  const result = Array.from(list || []);
+  result.splice(index, 0, item);
+  return result;
+};
+
+// lib/generate-id.ts
+init_react_import();
+import { v4 as uuidv4 } from "uuid";
+var generateId = (type) => type ? `${type}-${uuidv4()}` : uuidv4();
+
+// lib/data/get-ids-for-parent.ts
+init_react_import();
+var getIdsForParent = (zoneCompound, state) => {
+  const [parentId] = zoneCompound.split(":");
+  const node = state.indexes.nodes[parentId];
+  return ((node == null ? void 0 : node.path) || []).map((p) => p.split(":")[0]);
+};
+
+// lib/data/populate-ids.ts
+init_react_import();
+var populateIds = (data, config, override = false) => {
+  const id = generateId(data.type);
+  return walkTree(
+    __spreadProps(__spreadValues({}, data), {
+      props: override ? __spreadProps(__spreadValues({}, data.props), { id }) : __spreadValues({ id }, data.props)
+    }),
+    config,
+    (contents) => contents.map((item) => {
+      const id2 = generateId(item.type);
+      return __spreadProps(__spreadValues({}, item), {
+        props: override ? __spreadProps(__spreadValues({}, item.props), { id: id2 }) : __spreadValues({ id: id2 }, item.props)
+      });
+    })
+  );
+};
+
+// reducer/actions/insert.ts
+function insertAction(state, action, appStore) {
+  const id = action.id || generateId(action.componentType);
+  const emptyComponentData = populateIds(
+    {
+      type: action.componentType,
+      props: __spreadProps(__spreadValues({}, appStore.config.components[action.componentType].defaultProps || {}), {
+        id
+      })
+    },
+    appStore.config
+  );
+  const [parentId] = action.destinationZone.split(":");
+  const idsInPath = getIdsForParent(action.destinationZone, state);
+  return walkAppState(
+    state,
+    appStore.config,
+    (content, zoneCompound) => {
+      if (zoneCompound === action.destinationZone) {
+        return insert(
+          content || [],
+          action.destinationIndex,
+          emptyComponentData
+        );
+      }
+      return content;
+    },
+    (childItem, path) => {
+      if (childItem.props.id === id || childItem.props.id === parentId) {
+        return childItem;
+      } else if (idsInPath.includes(childItem.props.id)) {
+        return childItem;
+      } else if (path.includes(action.destinationZone)) {
+        return childItem;
+      }
+      return null;
+    }
+  );
 }
-var findRelatedByZoneId = (zoneId, data) => {
-  const [zoneParentId] = getZoneId(zoneId);
-  return (data.zones[zoneId] || []).reduce(
-    (acc, zoneItem) => {
-      const related = findRelatedByItem(zoneItem, data);
-      if (zoneItem.props.id === zoneParentId) {
-        return __spreadProps(__spreadValues(__spreadValues({}, acc), related), { [zoneId]: zoneItem });
+
+// reducer/actions/replace.ts
+init_react_import();
+var replaceAction = (state, action, appStore) => {
+  const [parentId] = action.destinationZone.split(":");
+  const idsInPath = getIdsForParent(action.destinationZone, state);
+  const originalId = state.indexes.zones[action.destinationZone].contentIds[action.destinationIndex];
+  const idChanged = originalId !== action.data.props.id;
+  if (idChanged) {
+    throw new Error(
+      `Can't change the id during a replace action. Please us "remove" and "insert" to define a new node.`
+    );
+  }
+  const data = populateIds(action.data, appStore.config);
+  return walkAppState(
+    state,
+    appStore.config,
+    (content, zoneCompound) => {
+      const newContent = [...content];
+      if (zoneCompound === action.destinationZone) {
+        newContent[action.destinationIndex] = data;
       }
-      return __spreadValues(__spreadValues({}, acc), related);
+      return newContent;
     },
-    {}
+    (childItem, path) => {
+      const pathIds = path.map((p) => p.split(":")[0]);
+      if (childItem.props.id === data.props.id) {
+        return data;
+      } else if (childItem.props.id === parentId) {
+        return childItem;
+      } else if (idsInPath.indexOf(childItem.props.id) > -1) {
+        return childItem;
+      } else if (pathIds.indexOf(data.props.id) > -1) {
+        return childItem;
+      }
+      return null;
+    }
   );
 };
-var findRelatedByItem = (item, data) => {
-  return Object.keys(data.zones || {}).reduce(
-    (acc, zoneId) => {
-      const [zoneParentId] = getZoneId(zoneId);
-      if (item.props.id === zoneParentId) {
-        const related = findRelatedByZoneId(zoneId, data);
-        return __spreadProps(__spreadValues(__spreadValues({}, acc), related), {
-          [zoneId]: data.zones[zoneId]
+
+// reducer/actions/replace-root.ts
+init_react_import();
+var replaceRootAction = (state, action, appStore) => {
+  return walkAppState(
+    state,
+    appStore.config,
+    (content) => content,
+    (childItem) => {
+      if (childItem.props.id === "root") {
+        return __spreadProps(__spreadValues({}, childItem), {
+          props: __spreadValues(__spreadValues({}, childItem.props), action.root.props),
+          readOnly: action.root.readOnly
         });
       }
-      return acc;
-    },
-    {}
+      return childItem;
+    }
   );
 };
-var removeRelatedZones = (item, data) => {
-  const newData = __spreadValues({}, data);
-  const related = findRelatedByItem(item, data);
-  Object.keys(related).forEach((key) => {
-    delete newData.zones[key];
-  });
-  return newData;
-};
-function duplicateRelatedZones(item, data, newId) {
-  return reduceRelatedZones(item, data, (acc, key, zone) => {
-    const dupedZone = zone.map((zoneItem) => __spreadProps(__spreadValues({}, zoneItem), {
-      props: __spreadProps(__spreadValues({}, zoneItem.props), { id: generateId(zoneItem.type) })
-    }));
-    const dupeOfDupes = dupedZone.reduce(
-      (dupeOfDupes2, item2, index) => __spreadValues(__spreadValues({}, dupeOfDupes2), duplicateRelatedZones(zone[index], data, item2.props.id).zones),
-      acc
-    );
-    const [_, zoneId] = getZoneId(key);
-    return __spreadProps(__spreadValues({}, dupeOfDupes), {
-      [key]: zone,
-      [`${newId}:${zoneId}`]: dupedZone
-    });
-  });
+
+// reducer/actions/duplicate.ts
+init_react_import();
+
+// lib/data/get-item.ts
+init_react_import();
+function getItem(selector, state) {
+  var _a, _b;
+  const zone = (_a = state.indexes.zones) == null ? void 0 : _a[selector.zone || rootDroppableId];
+  return zone ? (_b = state.indexes.nodes[zone.contentIds[selector.index]]) == null ? void 0 : _b.data : void 0;
 }
 
-// reducer/data.ts
-var zoneCache = {};
-var replaceAction = (data, action) => {
-  if (action.destinationZone === rootDroppableId) {
-    return __spreadProps(__spreadValues({}, data), {
-      content: replace(data.content, action.destinationIndex, action.data)
-    });
-  }
-  const newData = setupZone(data, action.destinationZone);
-  return __spreadProps(__spreadValues({}, newData), {
-    zones: __spreadProps(__spreadValues({}, newData.zones), {
-      [action.destinationZone]: replace(
-        newData.zones[action.destinationZone],
-        action.destinationIndex,
-        action.data
-      )
+// reducer/actions/duplicate.ts
+function duplicateAction(state, action, appStore) {
+  const item = getItem(
+    { index: action.sourceIndex, zone: action.sourceZone },
+    state
+  );
+  const idsInPath = getIdsForParent(action.sourceZone, state);
+  const newItem = __spreadProps(__spreadValues({}, item), {
+    props: __spreadProps(__spreadValues({}, item.props), {
+      id: generateId(item.type)
     })
   });
-};
-function insertAction(data, action, config) {
-  const emptyComponentData = {
-    type: action.componentType,
-    props: __spreadProps(__spreadValues({}, config.components[action.componentType].defaultProps || {}), {
-      id: action.id || generateId(action.componentType)
-    })
-  };
-  if (action.destinationZone === rootDroppableId) {
-    return __spreadProps(__spreadValues({}, data), {
-      content: insert(
-        data.content,
-        action.destinationIndex,
-        emptyComponentData
-      )
-    });
-  }
-  const newData = setupZone(data, action.destinationZone);
-  return __spreadProps(__spreadValues({}, data), {
-    zones: __spreadProps(__spreadValues({}, newData.zones), {
-      [action.destinationZone]: insert(
-        newData.zones[action.destinationZone],
-        action.destinationIndex,
-        emptyComponentData
-      )
+  const modified = walkAppState(
+    state,
+    appStore.config,
+    (content, zoneCompound) => {
+      if (zoneCompound === action.sourceZone) {
+        return insert(content, action.sourceIndex + 1, item);
+      }
+      return content;
+    },
+    (childItem, path, index) => {
+      const zoneCompound = path[path.length - 1];
+      const parents = path.map((p) => p.split(":")[0]);
+      if (parents.indexOf(newItem.props.id) > -1) {
+        return __spreadProps(__spreadValues({}, childItem), {
+          props: __spreadProps(__spreadValues({}, childItem.props), {
+            id: generateId(childItem.type)
+          })
+        });
+      }
+      if (zoneCompound === action.sourceZone && index === action.sourceIndex + 1) {
+        return newItem;
+      }
+      const [sourceZoneParent] = action.sourceZone.split(":");
+      if (sourceZoneParent === childItem.props.id || idsInPath.indexOf(childItem.props.id) > -1) {
+        return childItem;
+      }
+      return null;
+    }
+  );
+  return __spreadProps(__spreadValues({}, modified), {
+    ui: __spreadProps(__spreadValues({}, modified.ui), {
+      itemSelector: {
+        index: action.sourceIndex + 1,
+        zone: action.sourceZone
+      }
     })
   });
 }
-var reorderAction = (data, action) => {
-  if (action.destinationZone === rootDroppableId) {
-    return __spreadProps(__spreadValues({}, data), {
-      content: reorder(
-        data.content,
-        action.sourceIndex,
-        action.destinationIndex
-      )
-    });
-  }
-  const newData = setupZone(data, action.destinationZone);
-  return __spreadProps(__spreadValues({}, data), {
-    zones: __spreadProps(__spreadValues({}, newData.zones), {
-      [action.destinationZone]: reorder(
-        newData.zones[action.destinationZone],
-        action.sourceIndex,
-        action.destinationIndex
-      )
-    })
-  });
+
+// reducer/actions/reorder.ts
+init_react_import();
+
+// reducer/actions/move.ts
+init_react_import();
+
+// lib/data/remove.ts
+init_react_import();
+var remove = (list, index) => {
+  const result = Array.from(list);
+  result.splice(index, 1);
+  return result;
 };
-function reduceData(data, action, config) {
-  if (action.type === "insert") {
-    return insertAction(data, action, config);
-  }
-  if (action.type === "duplicate") {
-    const item = getItem(
-      { index: action.sourceIndex, zone: action.sourceZone },
-      data
-    );
-    const newItem = __spreadProps(__spreadValues({}, item), {
-      props: __spreadProps(__spreadValues({}, item.props), {
-        id: generateId(item.type)
-      })
-    });
-    const dataWithRelatedDuplicated = duplicateRelatedZones(
-      item,
-      data,
-      newItem.props.id
-    );
-    if (action.sourceZone === rootDroppableId) {
-      return __spreadProps(__spreadValues({}, dataWithRelatedDuplicated), {
-        content: insert(data.content, action.sourceIndex + 1, newItem)
-      });
-    }
-    return __spreadProps(__spreadValues({}, dataWithRelatedDuplicated), {
-      zones: __spreadProps(__spreadValues({}, dataWithRelatedDuplicated.zones), {
-        [action.sourceZone]: insert(
-          dataWithRelatedDuplicated.zones[action.sourceZone],
-          action.sourceIndex + 1,
-          newItem
-        )
-      })
-    });
-  }
-  if (action.type === "reorder") {
-    return reorderAction(data, action);
+
+// reducer/actions/move.ts
+var moveAction = (state, action, appStore) => {
+  if (action.sourceZone === action.destinationZone && action.sourceIndex === action.destinationIndex) {
+    return state;
   }
-  if (action.type === "move") {
-    if (action.sourceZone === action.destinationZone && action.sourceIndex === action.destinationIndex) {
-      return data;
+  const item = getItem(
+    { zone: action.sourceZone, index: action.sourceIndex },
+    state
+  );
+  if (!item) return state;
+  const idsInSourcePath = getIdsForParent(action.sourceZone, state);
+  const idsInDestinationPath = getIdsForParent(action.destinationZone, state);
+  return walkAppState(
+    state,
+    appStore.config,
+    (content, zoneCompound) => {
+      if (zoneCompound === action.sourceZone && zoneCompound === action.destinationZone) {
+        return insert(
+          remove(content, action.sourceIndex),
+          action.destinationIndex,
+          item
+        );
+      } else if (zoneCompound === action.sourceZone) {
+        return remove(content, action.sourceIndex);
+      } else if (zoneCompound === action.destinationZone) {
+        return insert(content, action.destinationIndex, item);
+      }
+      return content;
+    },
+    (childItem, path) => {
+      const [sourceZoneParent] = action.sourceZone.split(":");
+      const [destinationZoneParent] = action.destinationZone.split(":");
+      const childId = childItem.props.id;
+      if (sourceZoneParent === childId || destinationZoneParent === childId || item.props.id === childId || idsInSourcePath.indexOf(childId) > -1 || idsInDestinationPath.indexOf(childId) > -1 || path.includes(action.destinationZone)) {
+        return childItem;
+      }
+      return null;
     }
-    const newData = setupZone(
-      setupZone(data, action.sourceZone),
-      action.destinationZone
-    );
-    const item = getItem(
-      { zone: action.sourceZone, index: action.sourceIndex },
-      newData
-    );
-    if (action.sourceZone === action.destinationZone) {
-      return reorderAction(data, __spreadProps(__spreadValues({}, action), { type: "reorder" }));
-    }
-    if (action.sourceZone === rootDroppableId) {
-      return __spreadProps(__spreadValues({}, newData), {
-        content: remove(newData.content, action.sourceIndex),
-        zones: __spreadProps(__spreadValues({}, newData.zones), {
-          [action.destinationZone]: insert(
-            newData.zones[action.destinationZone],
-            action.destinationIndex,
-            item
-          )
-        })
-      });
+  );
+};
+
+// reducer/actions/reorder.ts
+var reorderAction = (state, action, appStore) => {
+  return moveAction(
+    state,
+    {
+      type: "move",
+      sourceIndex: action.sourceIndex,
+      sourceZone: action.destinationZone,
+      destinationIndex: action.destinationIndex,
+      destinationZone: action.destinationZone
+    },
+    appStore
+  );
+};
+
+// reducer/actions/remove.ts
+init_react_import();
+var removeAction = (state, action, appStore) => {
+  const item = getItem({ index: action.index, zone: action.zone }, state);
+  const nodesToDelete = Object.entries(state.indexes.nodes).reduce(
+    (acc, [nodeId, nodeData]) => {
+      const pathIds = nodeData.path.map((p) => p.split(":")[0]);
+      if (pathIds.includes(item.props.id)) {
+        return [...acc, nodeId];
+      }
+      return acc;
+    },
+    [item.props.id]
+  );
+  const newState = walkAppState(
+    state,
+    appStore.config,
+    (content, zoneCompound) => {
+      if (zoneCompound === action.zone) {
+        return remove(content, action.index);
+      }
+      return content;
     }
-    if (action.destinationZone === rootDroppableId) {
-      return __spreadProps(__spreadValues({}, newData), {
-        content: insert(newData.content, action.destinationIndex, item),
-        zones: __spreadProps(__spreadValues({}, newData.zones), {
-          [action.sourceZone]: remove(
-            newData.zones[action.sourceZone],
-            action.sourceIndex
-          )
-        })
-      });
+  );
+  Object.keys(newState.data.zones || {}).forEach((zoneCompound) => {
+    const parentId = zoneCompound.split(":")[0];
+    if (nodesToDelete.includes(parentId) && newState.data.zones) {
+      delete newState.data.zones[zoneCompound];
     }
-    return __spreadProps(__spreadValues({}, newData), {
-      zones: __spreadProps(__spreadValues({}, newData.zones), {
-        [action.sourceZone]: remove(
-          newData.zones[action.sourceZone],
-          action.sourceIndex
-        ),
-        [action.destinationZone]: insert(
-          newData.zones[action.destinationZone],
-          action.destinationIndex,
-          item
-        )
-      })
-    });
-  }
-  if (action.type === "replace") {
-    return replaceAction(data, action);
-  }
-  if (action.type === "remove") {
-    const item = getItem({ index: action.index, zone: action.zone }, data);
-    const dataWithRelatedRemoved = setupZone(
-      removeRelatedZones(item, data),
-      action.zone
-    );
-    if (action.zone === rootDroppableId) {
-      return __spreadProps(__spreadValues({}, dataWithRelatedRemoved), {
-        content: remove(data.content, action.index)
-      });
+  });
+  Object.keys(newState.indexes.zones).forEach((zoneCompound) => {
+    const parentId = zoneCompound.split(":")[0];
+    if (nodesToDelete.includes(parentId)) {
+      delete newState.indexes.zones[zoneCompound];
     }
-    return __spreadProps(__spreadValues({}, dataWithRelatedRemoved), {
-      zones: __spreadProps(__spreadValues({}, dataWithRelatedRemoved.zones), {
-        [action.zone]: remove(
-          dataWithRelatedRemoved.zones[action.zone],
-          action.index
-        )
-      })
-    });
-  }
-  if (action.type === "registerZone") {
-    if (zoneCache[action.zone]) {
-      return __spreadProps(__spreadValues({}, data), {
-        zones: __spreadProps(__spreadValues({}, data.zones), {
+  });
+  nodesToDelete.forEach((id) => {
+    delete newState.indexes.nodes[id];
+  });
+  return newState;
+};
+
+// reducer/actions/register-zone.ts
+init_react_import();
+var zoneCache = {};
+function registerZoneAction(state, action) {
+  if (zoneCache[action.zone]) {
+    return __spreadProps(__spreadValues({}, state), {
+      data: __spreadProps(__spreadValues({}, state.data), {
+        zones: __spreadProps(__spreadValues({}, state.data.zones), {
           [action.zone]: zoneCache[action.zone]
         })
-      });
-    }
-    return setupZone(data, action.zone);
-  }
-  if (action.type === "unregisterZone") {
-    const _zones = __spreadValues({}, data.zones || {});
-    if (_zones[action.zone]) {
-      zoneCache[action.zone] = _zones[action.zone];
-      delete _zones[action.zone];
-    }
-    return __spreadProps(__spreadValues({}, data), { zones: _zones });
+      }),
+      indexes: __spreadProps(__spreadValues({}, state.indexes), {
+        zones: __spreadProps(__spreadValues({}, state.indexes.zones), {
+          [action.zone]: __spreadProps(__spreadValues({}, state.indexes.zones[action.zone]), {
+            contentIds: zoneCache[action.zone].map((item) => item.props.id),
+            type: "dropzone"
+          })
+        })
+      })
+    });
   }
-  if (action.type === "setData") {
-    if (typeof action.data === "object") {
-      return __spreadValues(__spreadValues({}, data), action.data);
-    }
-    return __spreadValues(__spreadValues({}, data), action.data(data));
+  return __spreadProps(__spreadValues({}, state), { data: setupZone(state.data, action.zone) });
+}
+function unregisterZoneAction(state, action) {
+  const _zones = __spreadValues({}, state.data.zones || {});
+  const zoneIndex = __spreadValues({}, state.indexes.zones || {});
+  if (_zones[action.zone]) {
+    zoneCache[action.zone] = _zones[action.zone];
+    delete _zones[action.zone];
   }
-  return data;
+  delete zoneIndex[action.zone];
+  return __spreadProps(__spreadValues({}, state), {
+    data: __spreadProps(__spreadValues({}, state.data), {
+      zones: _zones
+    }),
+    indexes: __spreadProps(__spreadValues({}, state.indexes), {
+      zones: zoneIndex
+    })
+  });
 }
 
-// reducer/state.ts
+// reducer/actions/set-data.ts
 init_react_import();
-var reduceUi = (ui, action) => {
-  if (action.type === "setUi") {
-    if (typeof action.ui === "object") {
-      return __spreadValues(__spreadValues({}, ui), action.ui);
-    }
-    return __spreadValues(__spreadValues({}, ui), action.ui(ui));
-  }
-  if (action.type === "duplicate") {
-    return __spreadProps(__spreadValues({}, ui), {
-      itemSelector: { index: action.sourceIndex + 1, zone: action.sourceZone }
-    });
+var setDataAction = (state, action, appStore) => {
+  if (typeof action.data === "object") {
+    console.warn(
+      "`setData` is expensive and may cause unnecessary re-renders. Consider using a more atomic action instead."
+    );
+    return walkAppState(
+      __spreadProps(__spreadValues({}, state), {
+        data: __spreadValues(__spreadValues({}, state.data), action.data)
+      }),
+      appStore.config
+    );
   }
-  if (action.type === "remove") {
-    return __spreadProps(__spreadValues({}, ui), {
-      itemSelector: null
+  return walkAppState(
+    __spreadProps(__spreadValues({}, state), {
+      data: __spreadValues(__spreadValues({}, state.data), action.data(state.data))
+    }),
+    appStore.config
+  );
+};
+
+// reducer/actions/set-ui.ts
+init_react_import();
+var setUiAction = (state, action) => {
+  if (typeof action.ui === "object") {
+    return __spreadProps(__spreadValues({}, state), {
+      ui: __spreadValues(__spreadValues({}, state.ui), action.ui)
     });
   }
-  return ui;
+  return __spreadProps(__spreadValues({}, state), {
+    ui: __spreadValues(__spreadValues({}, state.ui), action.ui(state.ui))
+  });
+};
+
+// lib/data/make-state-public.ts
+init_react_import();
+var makeStatePublic = (state) => {
+  const { data, ui } = state;
+  return { data, ui };
 };
 
 // reducer/actions.tsx
@@ -1060,29 +1323,54 @@ function storeInterceptor(reducer, record, onAction) {
     if (typeof action.recordHistory !== "undefined" ? action.recordHistory : isValidType) {
       if (record) record(newAppState);
     }
-    onAction == null ? void 0 : onAction(action, newAppState, state);
+    onAction == null ? void 0 : onAction(action, makeStatePublic(newAppState), makeStatePublic(state));
     return newAppState;
   };
 }
-var setAction = (state, action) => {
-  if (typeof action.state === "object") {
-    return __spreadValues(__spreadValues({}, state), action.state);
-  }
-  return __spreadValues(__spreadValues({}, state), action.state(state));
-};
 function createReducer({
-  config,
   record,
-  onAction
+  onAction,
+  appStore
 }) {
   return storeInterceptor(
     (state, action) => {
-      const data = reduceData(state.data, action, config);
-      const ui = reduceUi(state.ui, action);
       if (action.type === "set") {
-        return setAction(state, action);
+        return setAction(state, action, appStore);
+      }
+      if (action.type === "insert") {
+        return insertAction(state, action, appStore);
+      }
+      if (action.type === "replace") {
+        return replaceAction(state, action, appStore);
+      }
+      if (action.type === "replaceRoot") {
+        return replaceRootAction(state, action, appStore);
+      }
+      if (action.type === "duplicate") {
+        return duplicateAction(state, action, appStore);
+      }
+      if (action.type === "reorder") {
+        return reorderAction(state, action, appStore);
+      }
+      if (action.type === "move") {
+        return moveAction(state, action, appStore);
+      }
+      if (action.type === "remove") {
+        return removeAction(state, action, appStore);
+      }
+      if (action.type === "registerZone") {
+        return registerZoneAction(state, action);
+      }
+      if (action.type === "unregisterZone") {
+        return unregisterZoneAction(state, action);
+      }
+      if (action.type === "setData") {
+        return setDataAction(state, action, appStore);
       }
-      return { data, ui };
+      if (action.type === "setUi") {
+        return setUiAction(state, action);
+      }
+      return state;
     },
     record,
     onAction
@@ -1100,128 +1388,6 @@ var defaultViewports = [
 // store/index.ts
 import { create as create2, useStore } from "zustand";
 import { subscribeWithSelector as subscribeWithSelector2 } from "zustand/middleware";
-
-// lib/resolve-data.ts
-init_react_import();
-
-// lib/apply-dynamic-props.ts
-init_react_import();
-var applyDynamicProps = (data, dynamicProps, rootData) => {
-  return __spreadProps(__spreadValues({}, data), {
-    root: rootData ? __spreadValues(__spreadValues({}, data.root), rootData ? rootData : {}) : data.root,
-    content: data.content.map((item) => {
-      return dynamicProps[item.props.id] ? __spreadValues(__spreadValues({}, item), dynamicProps[item.props.id]) : item;
-    }),
-    zones: Object.keys(data.zones || {}).reduce((acc, zoneKey) => {
-      return __spreadProps(__spreadValues({}, acc), {
-        [zoneKey]: data.zones[zoneKey].map((item) => {
-          return dynamicProps[item.props.id] ? __spreadValues(__spreadValues({}, item), dynamicProps[item.props.id]) : item;
-        })
-      });
-    }, {})
-  });
-};
-
-// lib/flatten-data.ts
-init_react_import();
-var flattenData = (data) => {
-  return Object.keys(data.zones || {}).reduce(
-    (acc, zone) => [...acc, ...data.zones[zone]],
-    data.content
-  );
-};
-
-// lib/resolve-data.ts
-import fdeq from "fast-deep-equal";
-var resolveData = (newAppState, appStoreData) => {
-  const {
-    state: appState,
-    config,
-    dispatch,
-    resolveDataRuns,
-    setComponentLoading,
-    unsetComponentLoading,
-    metadata,
-    permissions
-  } = appStoreData;
-  const deferredSetStates = {};
-  const _setComponentLoading = (id, loading, defer2 = 0) => {
-    if (deferredSetStates[id]) {
-      clearTimeout(deferredSetStates[id]);
-      delete deferredSetStates[id];
-    }
-    deferredSetStates[id] = setTimeout(() => {
-      if (loading) {
-        setComponentLoading(id);
-      } else {
-        unsetComponentLoading(id);
-      }
-      delete deferredSetStates[id];
-    }, defer2);
-  };
-  const runResolvers = () => __async(void 0, null, function* () {
-    const newData = newAppState.data;
-    const flatContent = flattenData(newData).filter(
-      (item) => {
-        var _a;
-        return !!((_a = config.components[item.type]) == null ? void 0 : _a.resolveData);
-      }
-    );
-    const applyIfChange = (dynamicDataMap, dynamicRoot) => {
-      const processed = applyDynamicProps(
-        __spreadValues({}, appState.data),
-        dynamicDataMap,
-        dynamicRoot
-      );
-      const processedAppState = __spreadProps(__spreadValues({}, appState), { data: processed });
-      const containsChanges = !fdeq(appState, processedAppState);
-      if (containsChanges) {
-        dispatch({
-          type: "set",
-          state: (prev) => __spreadProps(__spreadValues({}, prev), {
-            data: applyDynamicProps(prev.data, dynamicDataMap, dynamicRoot),
-            ui: resolveDataRuns > 0 ? __spreadValues(__spreadValues({}, prev.ui), newAppState.ui) : prev.ui
-          }),
-          recordHistory: resolveDataRuns > 0
-        });
-      }
-    };
-    const promises = [];
-    promises.push(
-      (() => __async(void 0, null, function* () {
-        _setComponentLoading("puck-root", true, 50);
-        const dynamicRoot = yield resolveRootData(newData, config, metadata);
-        applyIfChange({}, dynamicRoot);
-        _setComponentLoading("puck-root", false);
-      }))()
-    );
-    flatContent.forEach((item) => {
-      promises.push(
-        (() => __async(void 0, null, function* () {
-          permissions.resolvePermissions({ item }, true);
-          const dynamicData = yield resolveComponentData(
-            item,
-            config,
-            metadata,
-            (item2) => {
-              _setComponentLoading(item2.props.id, true, 50);
-            },
-            (item2) => {
-              deferredSetStates[item2.props.id];
-              _setComponentLoading(item2.props.id, false);
-            }
-          );
-          const dynamicDataMap = { [item.props.id]: dynamicData };
-          applyIfChange(dynamicDataMap);
-        }))()
-      );
-    });
-    yield Promise.all(promises);
-  });
-  return runResolvers();
-};
-
-// store/index.ts
 import { createContext, useContext } from "react";
 
 // store/slices/history.ts
@@ -1416,7 +1582,7 @@ var createHistorySlice = (set, get) => {
       const { dispatch, history } = get();
       dispatch({
         type: "set",
-        state: ((_a = history.histories[history.index]) == null ? void 0 : _a.state) || history.initialAppState
+        state: ((_a = history.histories[index]) == null ? void 0 : _a.state) || history.initialAppState
       });
       set({ history: __spreadProps(__spreadValues({}, history), { index }) });
     },
@@ -1454,71 +1620,14 @@ function useRegisterHistorySlice(appStore, {
 
 // store/slices/nodes.ts
 init_react_import();
-import deepEqual from "fast-deep-equal";
-import { useEffect as useEffect3 } from "react";
-var partialDeepEqual = (newItem, existingItem) => {
-  const filteredExistingItem = Object.keys(newItem).reduce(
-    (acc, key) => __spreadProps(__spreadValues({}, acc), { [key]: existingItem[key] }),
-    {}
-  );
-  return deepEqual(newItem, filteredExistingItem);
-};
-var generateNodesSlice = (data, appStore) => {
-  const nodeIndex = {};
-  const forAllData = (cb) => {
-    data.content.forEach((data2, index) => {
-      cb(data2, rootAreaId, rootZone, index);
-    });
-    Object.entries(data.zones || {}).forEach(([zoneCompound, content]) => {
-      const [parentId, zone] = zoneCompound.split(":");
-      content.forEach((data2, index) => {
-        cb(data2, parentId, zone, index);
-      });
-    });
-  };
-  forAllData((data2, parentId, zone, index) => {
-    nodeIndex[data2.props.id] = { data: data2, parentId, zone, path: [], index };
-  });
-  const nodes = appStore.getState().nodes;
-  const registerNode = nodes.registerNode;
-  Object.keys(nodeIndex).forEach((componentId) => {
-    const details = nodeIndex[componentId];
-    let currentDetails = details;
-    let path = [];
-    while ((currentDetails == null ? void 0 : currentDetails.parentId) !== rootAreaId) {
-      path.unshift(`${currentDetails.parentId}:${currentDetails.zone}`);
-      currentDetails = nodeIndex[currentDetails.parentId];
-    }
-    path.unshift(rootDroppableId);
-    nodeIndex[componentId].path = path;
-    registerNode(componentId, nodeIndex[componentId]);
-  });
-  const rootProps = data.root.props || data.root;
-  registerNode("root", {
-    data: { type: "root", props: __spreadValues({ id: "root" }, rootProps) }
-  });
-  Object.keys(nodes.nodes).forEach((key) => {
-    if (!nodeIndex[key] && key !== "root") {
-      nodes.unregisterNode(key);
-    }
-  });
-};
 var createNodesSlice = (set, get) => ({
   nodes: {},
   registerNode: (id, node) => {
     const s = get().nodes;
-    if (s.nodes[id] && partialDeepEqual(node, s.nodes[id])) {
-      return;
-    }
     const emptyNode = {
       id,
       methods: { sync: () => null },
-      data: { props: { id }, type: "unknown" },
-      parentId: "",
-      zone: "",
-      path: [],
-      element: null,
-      index: -1
+      element: null
     };
     const existingNode = s.nodes[id];
     set({
@@ -1545,31 +1654,36 @@ var createNodesSlice = (set, get) => ({
     }
   }
 });
-var useRegisterNodesSlice = (appStore) => {
-  useEffect3(() => {
-    return appStore.subscribe(
-      (s) => s.state.data,
-      (data) => generateNodesSlice(data, appStore)
-    );
-  }, []);
-};
 
 // store/slices/permissions.ts
 init_react_import();
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect3 } from "react";
+
+// lib/data/flatten-data.ts
+init_react_import();
+var flattenData = (state, config) => {
+  const data = [];
+  walkAppState(
+    state,
+    config,
+    (content) => content,
+    (item) => {
+      data.push(item);
+      return null;
+    }
+  );
+  return data;
+};
+
+// store/slices/permissions.ts
 var createPermissionsSlice = (set, get) => {
   const resolvePermissions = (..._0) => __async(void 0, [..._0], function* (params = {}, force) {
-    const { state, permissions } = get();
+    const { state, permissions, config } = get();
     const { cache, globalPermissions } = permissions;
     const resolveDataForItem = (item2, force2 = false) => __async(void 0, null, function* () {
       var _a, _b, _c;
-      const {
-        config,
-        state: appState,
-        setComponentLoading,
-        unsetComponentLoading
-      } = get();
-      const componentConfig = item2.type === "root" ? config.root : config.components[item2.type];
+      const { config: config2, state: appState, setComponentLoading } = get();
+      const componentConfig = item2.type === "root" ? config2.root : config2.components[item2.type];
       if (!componentConfig) {
         return;
       }
@@ -1577,14 +1691,14 @@ var createPermissionsSlice = (set, get) => {
       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) {
-          setComponentLoading(item2.props.id);
+          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,
               permissions: initialPermissions,
-              appState,
+              appState: makeStatePublic(appState),
               lastData: ((_c = cache[item2.props.id]) == null ? void 0 : _c.lastData) || null
             }
           );
@@ -1602,7 +1716,7 @@ var createPermissionsSlice = (set, get) => {
               })
             })
           });
-          unsetComponentLoading(item2.props.id);
+          clearTimeout2();
         }
       }
     });
@@ -1612,7 +1726,7 @@ var createPermissionsSlice = (set, get) => {
         // Shim the root data in by conforming to component data shape
         {
           type: "root",
-          props: __spreadProps(__spreadValues({}, appState.data.root.props), { id: "puck-root" })
+          props: __spreadProps(__spreadValues({}, appState.data.root.props), { id: "root" })
         },
         force2
       );
@@ -1621,14 +1735,13 @@ var createPermissionsSlice = (set, get) => {
     if (item) {
       yield resolveDataForItem(item, force);
     } else if (type) {
-      flattenData(state.data).filter((item2) => item2.type === type).map((item2) => __async(void 0, null, function* () {
+      flattenData(state, config).filter((item2) => item2.type === type).map((item2) => __async(void 0, null, function* () {
         yield resolveDataForItem(item2, force);
       }));
     } else if (root) {
       resolveDataForRoot(force);
     } else {
-      resolveDataForRoot(force);
-      flattenData(state.data).map((item2) => __async(void 0, null, function* () {
+      flattenData(state, config).map((item2) => __async(void 0, null, function* () {
         yield resolveDataForItem(item2, force);
       }));
     }
@@ -1658,7 +1771,7 @@ var createPermissionsSlice = (set, get) => {
       } else if (root) {
         const rootConfig = config.root;
         const initialPermissions = __spreadValues(__spreadValues({}, globalPermissions), rootConfig == null ? void 0 : rootConfig.permissions);
-        const resolvedForItem = resolvedPermissions["puck-root"];
+        const resolvedForItem = resolvedPermissions["root"];
         return resolvedForItem ? __spreadValues(__spreadValues({}, globalPermissions), resolvedForItem) : initialPermissions;
       }
       return globalPermissions;
@@ -1668,7 +1781,7 @@ var createPermissionsSlice = (set, get) => {
   };
 };
 var useRegisterPermissionsSlice = (appStore, globalPermissions) => {
-  useEffect4(() => {
+  useEffect3(() => {
     const { permissions } = appStore.getState();
     const { globalPermissions: existingGlobalPermissions } = permissions;
     appStore.setState({
@@ -1678,7 +1791,7 @@ var useRegisterPermissionsSlice = (appStore, globalPermissions) => {
     });
     permissions.resolvePermissions();
   }, [globalPermissions]);
-  useEffect4(() => {
+  useEffect3(() => {
     return appStore.subscribe(
       (s) => s.state.data,
       () => {
@@ -1686,7 +1799,7 @@ var useRegisterPermissionsSlice = (appStore, globalPermissions) => {
       }
     );
   }, []);
-  useEffect4(() => {
+  useEffect3(() => {
     return appStore.subscribe(
       (s) => s.config,
       () => {
@@ -1698,8 +1811,8 @@ var useRegisterPermissionsSlice = (appStore, globalPermissions) => {
 
 // store/slices/fields.ts
 init_react_import();
-import { useCallback, useEffect as useEffect5 } from "react";
-var createFieldsStore = (_set, _get) => {
+import { useCallback, useEffect as useEffect4 } from "react";
+var createFieldsSlice = (_set, _get) => {
   return {
     fields: {},
     loading: false,
@@ -1711,10 +1824,10 @@ var useRegisterFieldsSlice = (appStore, id) => {
     (reset) => __async(void 0, null, function* () {
       var _a, _b;
       const { fields, lastResolvedData } = appStore.getState().fields;
-      const nodeStore = appStore.getState().nodes;
-      const node = nodeStore.nodes[id || "root"];
+      const nodes = appStore.getState().state.indexes.nodes;
+      const node = nodes[id || "root"];
       const componentData = node == null ? void 0 : node.data;
-      const parentNode = (node == null ? void 0 : node.parentId) ? nodeStore.nodes[node.parentId] : null;
+      const parentNode = (node == null ? void 0 : node.parentId) ? nodes[node.parentId] : null;
       const parent = (parentNode == null ? void 0 : parentNode.data) || null;
       const { getComponentConfig, state } = appStore.getState();
       const componentConfig = getComponentConfig(componentData == null ? void 0 : componentData.type);
@@ -1741,7 +1854,7 @@ var useRegisterFieldsSlice = (appStore, id) => {
           fields: defaultFields,
           lastFields,
           lastData,
-          appState: state,
+          appState: makeStatePublic(state),
           parent
         });
         clearTimeout(timeout3);
@@ -1763,15 +1876,32 @@ var useRegisterFieldsSlice = (appStore, id) => {
     }),
     [id]
   );
-  useEffect5(() => {
+  useEffect4(() => {
     resolveFields(true);
     return appStore.subscribe(
-      (s) => s.nodes.nodes[id || "root"],
+      (s) => s.state.indexes.nodes[id || "root"],
       () => resolveFields()
     );
   }, [id]);
 };
 
+// lib/data/to-root.ts
+init_react_import();
+var toRoot = (item) => {
+  if ("type" in item && item.type !== "root") {
+    throw new Error("Converting non-root item to root.");
+  }
+  const { readOnly } = item;
+  if (item.props) {
+    if ("id" in item.props) {
+      const _a = item.props, { id } = _a, props = __objRest(_a, ["id"]);
+      return { props, readOnly };
+    }
+    return { props: item.props, readOnly };
+  }
+  return { props: {}, readOnly };
+};
+
 // store/index.ts
 var defaultAppState = {
   data: { content: [], root: {}, zones: {} },
@@ -1792,92 +1922,186 @@ var defaultAppState = {
       controlsVisible: true
     },
     field: { focus: null }
+  },
+  indexes: {
+    nodes: {},
+    zones: {}
   }
 };
 var defaultPageFields = {
   title: { type: "text" }
 };
 var createAppStore = (initialAppStore) => create2()(
-  subscribeWithSelector2((set, get) => __spreadProps(__spreadValues({
-    state: defaultAppState,
-    config: { components: {} },
-    componentState: {},
-    plugins: [],
-    overrides: {},
-    viewports: defaultViewports,
-    zoomConfig: {
-      autoZoom: 1,
-      rootHeight: 0,
-      zoom: 1
-    },
-    status: "LOADING",
-    iframe: {},
-    metadata: {}
-  }, initialAppStore), {
-    fields: createFieldsStore(set, get),
-    history: createHistorySlice(set, get),
-    nodes: createNodesSlice(set, get),
-    permissions: createPermissionsSlice(set, get),
-    getComponentConfig: (type) => {
-      var _a;
-      const { config, selectedItem } = get();
-      const rootFields = ((_a = config.root) == null ? void 0 : _a.fields) || defaultPageFields;
-      return type && type !== "root" ? config.components[type] : selectedItem ? config.components[selectedItem.type] : __spreadProps(__spreadValues({}, config.root), { fields: rootFields });
-    },
-    dispatch: (action) => set((s) => {
-      var _a, _b;
-      const { record } = get().history;
-      const dispatch = createReducer({ config: s.config, record });
-      const state = dispatch(s.state, action);
-      const selectedItem = state.ui.itemSelector ? getItem(state.ui.itemSelector, state.data) : null;
-      (_b = (_a = get()).onAction) == null ? void 0 : _b.call(_a, action, state, get().state);
-      return __spreadProps(__spreadValues({}, s), { state, selectedItem });
-    }),
-    setZoomConfig: (zoomConfig) => set({ zoomConfig }),
-    setStatus: (status) => set({ status }),
-    setComponentState: (componentState) => set({ componentState }),
-    setComponentLoading: (id) => {
-      var _a;
-      const { setComponentState, componentState } = get();
-      setComponentState(__spreadProps(__spreadValues({}, componentState), {
-        [id]: __spreadProps(__spreadValues({}, componentState[id]), {
-          loadingCount: (((_a = componentState[id]) == null ? void 0 : _a.loadingCount) || 0) + 1
-        })
-      }));
-    },
-    unsetComponentLoading: (id) => {
-      var _a;
-      const { setComponentState, componentState } = get();
-      setComponentState(__spreadProps(__spreadValues({}, componentState), {
-        [id]: __spreadProps(__spreadValues({}, componentState[id]), {
-          loadingCount: Math.max(
-            (((_a = componentState[id]) == null ? void 0 : _a.loadingCount) || 0) - 1,
-            0
-          )
-        })
-      }));
-    },
-    // Helper
-    setUi: (ui, recordHistory) => set((s) => {
-      const dispatch = createReducer({
-        config: s.config,
-        record: () => {
-        }
-      });
-      const state = dispatch(s.state, {
-        type: "setUi",
-        ui,
-        recordHistory
-      });
-      const selectedItem = state.ui.itemSelector ? getItem(state.ui.itemSelector, state.data) : null;
-      return __spreadProps(__spreadValues({}, s), { state, selectedItem });
-    }),
-    resolveDataRuns: 0,
-    resolveData: (newAppState) => set((s) => {
-      resolveData(newAppState, get());
-      return __spreadProps(__spreadValues({}, s), { resolveDataRuns: s.resolveDataRuns + 1 });
-    })
-  }))
+  subscribeWithSelector2((set, get) => {
+    var _a, _b;
+    return __spreadProps(__spreadValues({
+      state: defaultAppState,
+      config: { components: {} },
+      componentState: {},
+      plugins: [],
+      overrides: {},
+      viewports: defaultViewports,
+      zoomConfig: {
+        autoZoom: 1,
+        rootHeight: 0,
+        zoom: 1
+      },
+      status: "LOADING",
+      iframe: {},
+      metadata: {}
+    }, initialAppStore), {
+      fields: createFieldsSlice(set, get),
+      history: createHistorySlice(set, get),
+      nodes: createNodesSlice(set, get),
+      permissions: createPermissionsSlice(set, get),
+      getComponentConfig: (type) => {
+        var _a2;
+        const { config, selectedItem } = get();
+        const rootFields = ((_a2 = config.root) == null ? void 0 : _a2.fields) || defaultPageFields;
+        return type && type !== "root" ? config.components[type] : selectedItem ? config.components[selectedItem.type] : __spreadProps(__spreadValues({}, config.root), { fields: rootFields });
+      },
+      selectedItem: ((_a = initialAppStore == null ? void 0 : initialAppStore.state) == null ? void 0 : _a.ui.itemSelector) ? getItem(
+        (_b = initialAppStore == null ? void 0 : initialAppStore.state) == null ? void 0 : _b.ui.itemSelector,
+        initialAppStore.state
+      ) : null,
+      dispatch: (action) => set((s) => {
+        var _a2, _b2;
+        const { record } = get().history;
+        const dispatch = createReducer({
+          record,
+          appStore: s
+        });
+        const state = dispatch(s.state, action);
+        const selectedItem = state.ui.itemSelector ? getItem(state.ui.itemSelector, state) : null;
+        (_b2 = (_a2 = get()).onAction) == null ? void 0 : _b2.call(_a2, action, state, get().state);
+        return __spreadProps(__spreadValues({}, s), { state, selectedItem });
+      }),
+      setZoomConfig: (zoomConfig) => set({ zoomConfig }),
+      setStatus: (status) => set({ status }),
+      setComponentState: (componentState) => set({ componentState }),
+      pendingLoadTimeouts: {},
+      setComponentLoading: (id, loading = true, defer2 = 0) => {
+        const { setComponentState, pendingLoadTimeouts } = get();
+        const loadId = generateId();
+        const setLoading = () => {
+          var _a2;
+          const { componentState } = get();
+          setComponentState(__spreadProps(__spreadValues({}, componentState), {
+            [id]: __spreadProps(__spreadValues({}, componentState[id]), {
+              loadingCount: (((_a2 = componentState[id]) == null ? void 0 : _a2.loadingCount) || 0) + 1
+            })
+          }));
+        };
+        const unsetLoading = () => {
+          var _a2;
+          const { componentState } = get();
+          clearTimeout(timeout3);
+          delete pendingLoadTimeouts[loadId];
+          set({ pendingLoadTimeouts });
+          setComponentState(__spreadProps(__spreadValues({}, componentState), {
+            [id]: __spreadProps(__spreadValues({}, componentState[id]), {
+              loadingCount: Math.max(
+                (((_a2 = componentState[id]) == null ? void 0 : _a2.loadingCount) || 0) - 1,
+                0
+              )
+            })
+          }));
+        };
+        const timeout3 = setTimeout(() => {
+          if (loading) {
+            setLoading();
+          } else {
+            unsetLoading();
+          }
+          delete pendingLoadTimeouts[loadId];
+          set({ pendingLoadTimeouts });
+        }, defer2);
+        set({
+          pendingLoadTimeouts: __spreadProps(__spreadValues({}, pendingLoadTimeouts), {
+            [id]: timeout3
+          })
+        });
+        return unsetLoading;
+      },
+      unsetComponentLoading: (id) => {
+        const { setComponentLoading } = get();
+        setComponentLoading(id, false);
+      },
+      // Helper
+      setUi: (ui, recordHistory) => set((s) => {
+        const dispatch = createReducer({
+          record: () => {
+          },
+          appStore: s
+        });
+        const state = dispatch(s.state, {
+          type: "setUi",
+          ui,
+          recordHistory
+        });
+        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* () {
+        const { config, metadata, setComponentLoading, permissions } = get();
+        const timeouts = {};
+        return yield resolveComponentData(
+          componentData,
+          config,
+          metadata,
+          (item) => {
+            const id = "id" in item.props ? item.props.id : "root";
+            timeouts[id] = setComponentLoading(id, true, 50);
+          },
+          (item) => __async(void 0, null, function* () {
+            const id = "id" in item.props ? item.props.id : "root";
+            if ("type" in item) {
+              yield permissions.refreshPermissions({ item });
+            } else {
+              yield permissions.refreshPermissions({ root: true });
+            }
+            timeouts[id]();
+          }),
+          trigger
+        );
+      }),
+      resolveAndCommitData: () => __async(void 0, null, function* () {
+        const { config, state, dispatch, resolveComponentData: resolveComponentData2 } = get();
+        walkAppState(
+          state,
+          config,
+          (content) => content,
+          (childItem) => {
+            resolveComponentData2(childItem, "load").then((resolved) => {
+              const { state: state2 } = get();
+              const node = state2.indexes.nodes[resolved.node.props.id];
+              if (node && resolved.didChange) {
+                if (resolved.node.props.id === "root") {
+                  dispatch({
+                    type: "replaceRoot",
+                    root: toRoot(resolved.node)
+                  });
+                } else {
+                  const zoneCompound = `${node.parentId}:${node.zone}`;
+                  const parentZone = state2.indexes.zones[zoneCompound];
+                  const index = parentZone.contentIds.indexOf(
+                    resolved.node.props.id
+                  );
+                  dispatch({
+                    type: "replace",
+                    data: resolved.node,
+                    destinationIndex: index,
+                    destinationZone: zoneCompound
+                  });
+                }
+              }
+            });
+            return childItem;
+          }
+        );
+      })
+    });
+  })
 );
 var appStoreContext = createContext(createAppStore());
 function useAppStore(selector) {
@@ -2723,7 +2947,7 @@ var ArrayField = ({
     openId: ""
   };
   const [localState, setLocalState] = useState3({ arrayState, value });
-  useEffect6(() => {
+  useEffect5(() => {
     var _a;
     const _arrayState = (_a = appStore.getState().state.ui.arrayState[id]) != null ? _a : arrayState;
     setLocalState({ arrayState: _arrayState, value });
@@ -2765,7 +2989,7 @@ var ArrayField = ({
     },
     [arrayState]
   );
-  useEffect6(() => {
+  useEffect5(() => {
     if (arrayState.items.length > 0) {
       setUi(mapArrayStateToUi(arrayState));
     }
@@ -3068,13 +3292,13 @@ var DefaultField = ({
 
 // components/AutoField/fields/ExternalField/index.tsx
 init_react_import();
-import { useEffect as useEffect10 } from "react";
+import { useEffect as useEffect9 } from "react";
 
 // components/ExternalInput/index.tsx
 init_react_import();
 import {
   useMemo as useMemo2,
-  useEffect as useEffect9,
+  useEffect as useEffect8,
   useState as useState6,
   useCallback as useCallback3,
   isValidElement
@@ -3086,7 +3310,7 @@ var styles_module_default6 = { "ExternalInput-actions": "_ExternalInput-actions_
 
 // components/Modal/index.tsx
 init_react_import();
-import { useEffect as useEffect7, useState as useState4 } from "react";
+import { useEffect as useEffect6, useState as useState4 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Modal/styles.module.css#css-module
 init_react_import();
@@ -3102,7 +3326,7 @@ var Modal = ({
   isOpen
 }) => {
   const [rootEl, setRootEl] = useState4(null);
-  useEffect7(() => {
+  useEffect6(() => {
     setRootEl(document.getElementById("puck-portal-root"));
   }, []);
   if (!rootEl) {
@@ -3149,7 +3373,7 @@ init_react_import();
 
 // components/Button/Button.tsx
 init_react_import();
-import { useEffect as useEffect8, useState as useState5 } from "react";
+import { useEffect as useEffect7, useState as useState5 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css#css-module
 init_react_import();
@@ -3200,7 +3424,7 @@ var Button = (_a) => {
     "loading"
   ]);
   const [loading, setLoading] = useState5(loadingProp);
-  useEffect8(() => setLoading(loadingProp), [loadingProp]);
+  useEffect7(() => setLoading(loadingProp), [loadingProp]);
   const ElementType = href ? "a" : type ? "button" : "span";
   const dataAttrs = filterDataAttrs(props);
   const el = /* @__PURE__ */ jsxs5(
@@ -3297,7 +3521,7 @@ var ExternalInput = ({
     ] }),
     [field.renderFooter]
   );
-  useEffect9(() => {
+  useEffect8(() => {
     search(searchQuery, filters);
   }, []);
   return /* @__PURE__ */ jsxs6(
@@ -3469,7 +3693,7 @@ var ExternalField = ({
   var _a, _b, _c;
   const validField = field;
   const deprecatedField = field;
-  useEffect10(() => {
+  useEffect9(() => {
     if (deprecatedField.adaptor) {
       console.error(
         "Warning: The `adaptor` API is deprecated. Please use updated APIs on the `external` field instead. This will be a breaking change in a future release."
@@ -3888,6 +4112,9 @@ function AutoFieldInternal(props) {
       });
     }
   }, []);
+  if (field.type === "slot") {
+    return null;
+  }
   if (field.type === "custom") {
     if (!field.render) {
       return null;
@@ -3930,11 +4157,18 @@ function AutoFieldPrivate(props) {
     },
     [onChange]
   );
-  useEffect11(() => {
+  useEffect10(() => {
     if (!isFocused) {
       setLocalValue(value);
     }
   }, [value]);
+  useEffect10(() => {
+    if (!isFocused) {
+      if (value !== localValue) {
+        setLocalValue(value);
+      }
+    }
+  }, [isFocused, value, localValue]);
   const localProps = {
     value: localValue,
     onChange: onChangeLocal
@@ -3951,6 +4185,9 @@ function AutoField(props) {
     );
     return DefaultLabel2;
   }, [props.readOnly]);
+  if (props.field.type === "slot") {
+    return null;
+  }
   return /* @__PURE__ */ jsx18(AutoFieldInternal, __spreadProps(__spreadValues({}, props), { Label: DefaultLabel }));
 }
 
@@ -3962,7 +4199,7 @@ init_react_import();
 var styles_module_default10 = { "Drawer": "_Drawer_fkqfo_1", "Drawer-draggable": "_Drawer-draggable_fkqfo_8", "Drawer-draggableBg": "_Drawer-draggableBg_fkqfo_12", "Drawer-draggableFg": "_Drawer-draggableFg_fkqfo_21", "DrawerItem-draggable": "_DrawerItem-draggable_fkqfo_25", "DrawerItem--disabled": "_DrawerItem--disabled_fkqfo_38", "DrawerItem": "_DrawerItem_fkqfo_25", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_fkqfo_48", "DrawerItem-name": "_DrawerItem-name_fkqfo_66" };
 
 // components/Drawer/index.tsx
-import { useMemo as useMemo9, useState as useState15 } from "react";
+import { useMemo as useMemo11, useState as useState15 } from "react";
 
 // components/DragDropContext/index.tsx
 init_react_import();
@@ -3971,7 +4208,8 @@ import {
   createContext as createContext4,
   useCallback as useCallback10,
   useContext as useContext7,
-  useEffect as useEffect17,
+  useEffect as useEffect16,
+  useMemo as useMemo10,
   useRef as useRef4,
   useState as useState14
 } from "react";
@@ -3981,10 +4219,11 @@ import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
 init_react_import();
 import {
   forwardRef as forwardRef3,
+  memo,
   useCallback as useCallback9,
   useContext as useContext6,
-  useEffect as useEffect16,
-  useMemo as useMemo8,
+  useEffect as useEffect15,
+  useMemo as useMemo9,
   useRef as useRef3
 } from "react";
 
@@ -3993,7 +4232,7 @@ init_react_import();
 import {
   useCallback as useCallback6,
   useContext as useContext5,
-  useEffect as useEffect12,
+  useEffect as useEffect11,
   useMemo as useMemo7,
   useRef as useRef2,
   useState as useState10
@@ -4001,7 +4240,7 @@ import {
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
 init_react_import();
-var styles_module_default11 = { "DraggableComponent": "_DraggableComponent_1ukn8_1", "DraggableComponent-overlay": "_DraggableComponent-overlay_1ukn8_12", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_1ukn8_29", "DraggableComponent--hover": "_DraggableComponent--hover_1ukn8_45", "DraggableComponent--isLocked": "_DraggableComponent--isLocked_1ukn8_45", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_1ukn8_54", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_1ukn8_66", "DraggableComponent-actions": "_DraggableComponent-actions_1ukn8_66" };
+var styles_module_default11 = { "DraggableComponent": "_DraggableComponent_qzbgx_1", "DraggableComponent-overlay": "_DraggableComponent-overlay_qzbgx_12", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_qzbgx_29", "DraggableComponent--hover": "_DraggableComponent--hover_qzbgx_45", "DraggableComponent--isLocked": "_DraggableComponent--isLocked_qzbgx_45", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_qzbgx_54", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_qzbgx_66", "DraggableComponent-actions": "_DraggableComponent-actions_qzbgx_66" };
 
 // components/DraggableComponent/index.tsx
 import { createPortal as createPortal2 } from "react-dom";
@@ -4057,45 +4296,33 @@ var DropZoneProvider = ({
   value
 }) => {
   const [hoveringComponent, setHoveringComponent] = useState9();
-  const [activeZones, setActiveZones] = useState9({});
   const dispatch = useAppStore((s) => s.dispatch);
   const registerZone = useCallback5(
     (zoneCompound) => {
-      if (!dispatch) {
-        return;
-      }
       dispatch({
         type: "registerZone",
         zone: zoneCompound
       });
-      setActiveZones((latest) => __spreadProps(__spreadValues({}, latest), { [zoneCompound]: true }));
     },
-    [setActiveZones, dispatch]
+    [dispatch]
   );
   const unregisterZone = useCallback5(
     (zoneCompound) => {
-      if (!dispatch) {
-        return;
-      }
       dispatch({
         type: "unregisterZone",
         zone: zoneCompound
       });
-      setActiveZones((latest) => __spreadProps(__spreadValues({}, latest), {
-        [zoneCompound]: false
-      }));
     },
-    [setActiveZones, dispatch]
+    [dispatch]
   );
   const memoValue = useMemo6(
     () => __spreadValues({
       hoveringComponent,
       setHoveringComponent,
       registerZone,
-      unregisterZone,
-      activeZones
+      unregisterZone
     }, value),
-    [value, hoveringComponent, activeZones]
+    [value, hoveringComponent]
   );
   return /* @__PURE__ */ jsx19(Fragment5, { children: memoValue && /* @__PURE__ */ jsx19(dropZoneContext.Provider, { value: memoValue, children }) });
 };
@@ -4156,12 +4383,6 @@ var DraggableComponent = ({
     }
   );
   const overrides = useAppStore((s) => s.overrides);
-  const selectedItem = useAppStore(
-    (s) => {
-      var _a;
-      return ((_a = s.selectedItem) == null ? void 0 : _a.props.id) === id ? s.selectedItem : null;
-    }
-  );
   const dispatch = useAppStore((s) => s.dispatch);
   const iframe = useAppStore((s) => s.iframe);
   const ctx = useContext5(dropZoneContext);
@@ -4189,16 +4410,15 @@ var DraggableComponent = ({
     [setLocalZones]
   );
   const containsActiveZone = Object.values(localZones).filter(Boolean).length > 0;
-  const path = useAppStore((s) => {
-    var _a;
-    return (_a = s.nodes.nodes[id]) == null ? void 0 : _a.path;
-  });
-  const item = useAppStore((s) => {
+  const path = useAppStore(useShallow2((s) => {
     var _a;
-    return (_a = s.nodes.nodes[id]) == null ? void 0 : _a.data;
-  });
+    return (_a = s.state.indexes.nodes[id]) == null ? void 0 : _a.path;
+  }));
   const permissions = useAppStore(
-    useShallow2((s) => s.permissions.getPermissions({ item }))
+    useShallow2((s) => {
+      const item = getItem({ index, zone: zoneCompound }, s.state);
+      return s.permissions.getPermissions({ item });
+    })
   );
   const userIsDragging = useContextStore(
     ZoneStoreContext,
@@ -4243,7 +4463,7 @@ var DraggableComponent = ({
     [sortableRef]
   );
   const [portalEl, setPortalEl] = useState10();
-  useEffect12(() => {
+  useEffect11(() => {
     var _a, _b, _c;
     setPortalEl(
       iframe.enabled ? (_a = ref.current) == null ? void 0 : _a.ownerDocument.body : (_c = (_b = ref.current) == null ? void 0 : _b.closest("[data-puck-preview]")) != null ? _c : document.body
@@ -4273,7 +4493,7 @@ var DraggableComponent = ({
   const sync = useCallback6(() => {
     setStyle(getStyle());
   }, [ref.current, iframe]);
-  useEffect12(() => {
+  useEffect11(() => {
     if (ref.current && !userIsDragging) {
       const observer = new ResizeObserver(sync);
       observer.observe(ref.current);
@@ -4283,7 +4503,7 @@ var DraggableComponent = ({
     }
   }, [ref.current, userIsDragging]);
   const registerNode = useAppStore((s) => s.nodes.registerNode);
-  useEffect12(() => {
+  useEffect11(() => {
     var _a;
     registerNode(id, { methods: { sync }, element: (_a = ref.current) != null ? _a : null });
     return () => {
@@ -4308,18 +4528,22 @@ var DraggableComponent = ({
   );
   const appStore = useAppStoreApi();
   const onSelectParent = useCallback6(() => {
-    const { nodes } = appStore.getState().nodes;
+    const { nodes, zones } = appStore.getState().state.indexes;
     const node = nodes[id];
     const parentNode = (node == null ? void 0 : node.parentId) ? nodes[node == null ? void 0 : node.parentId] : null;
-    if (!parentNode) {
+    if (!parentNode || !node.parentId) {
       return;
     }
+    const parentZoneCompound = `${parentNode.parentId}:${parentNode.zone}`;
+    const parentIndex = zones[parentZoneCompound].contentIds.indexOf(
+      node.parentId
+    );
     dispatch({
       type: "setUi",
       ui: {
         itemSelector: {
-          zone: `${parentNode.parentId}:${parentNode.zone}`,
-          index: parentNode.index
+          zone: parentZoneCompound,
+          index: parentIndex
         }
       }
     });
@@ -4340,7 +4564,7 @@ var DraggableComponent = ({
   }, [index, zoneCompound]);
   const [hover, setHover] = useState10(false);
   const indicativeHover = (ctx == null ? void 0 : ctx.hoveringComponent) === id;
-  useEffect12(() => {
+  useEffect11(() => {
     if (!ref.current) {
       return;
     }
@@ -4390,7 +4614,7 @@ var DraggableComponent = ({
     thisIsDragging,
     inDroppableZone
   ]);
-  useEffect12(() => {
+  useEffect11(() => {
     if (ref.current && disabled) {
       ref.current.setAttribute("data-puck-disabled", "");
       return () => {
@@ -4400,7 +4624,7 @@ var DraggableComponent = ({
     }
   }, [disabled, ref]);
   const [isVisible, setIsVisible] = useState10(false);
-  useEffect12(() => {
+  useEffect11(() => {
     sync();
     if ((isSelected || hover || indicativeHover) && !userIsDragging) {
       setIsVisible(true);
@@ -4433,7 +4657,7 @@ var DraggableComponent = ({
     },
     [zoom]
   );
-  useEffect12(() => {
+  useEffect11(() => {
     if (userDragAxis) {
       setDragAxis(userDragAxis);
       return;
@@ -4448,85 +4672,91 @@ var DraggableComponent = ({
     setDragAxis(autoDragAxis);
   }, [ref, userDragAxis, autoDragAxis]);
   const parentAction = (ctx == null ? void 0 : ctx.areaId) && (ctx == null ? void 0 : ctx.areaId) !== "root" && /* @__PURE__ */ jsx20(ActionBar.Action, { onClick: onSelectParent, label: "Select parent", children: /* @__PURE__ */ jsx20(CornerLeftUp, { size: 16 }) });
-  return /* @__PURE__ */ jsxs9(
-    DropZoneProvider,
-    {
-      value: __spreadProps(__spreadValues({}, ctx), {
-        areaId: id,
-        zoneCompound,
-        index,
-        depth: depth + 1,
-        registerLocalZone,
-        unregisterLocalZone
-      }),
-      children: [
-        isVisible && createPortal2(
-          /* @__PURE__ */ jsxs9(
-            "div",
-            {
-              className: getClassName16({
-                isSelected,
-                isDragging: thisIsDragging,
-                hover: hover || indicativeHover
-              }),
-              style: __spreadValues({}, style),
-              "data-puck-overlay": true,
-              children: [
-                debug,
-                isLoading && /* @__PURE__ */ jsx20("div", { className: getClassName16("loadingOverlay"), children: /* @__PURE__ */ jsx20(Loader, {}) }),
-                /* @__PURE__ */ jsx20(
+  const nextContextValue = useMemo7(
+    () => __spreadProps(__spreadValues({}, ctx), {
+      areaId: id,
+      zoneCompound,
+      index,
+      depth: depth + 1,
+      registerLocalZone,
+      unregisterLocalZone
+    }),
+    [
+      ctx,
+      id,
+      zoneCompound,
+      index,
+      depth,
+      registerLocalZone,
+      unregisterLocalZone
+    ]
+  );
+  return /* @__PURE__ */ jsxs9(DropZoneProvider, { value: nextContextValue, children: [
+    isVisible && createPortal2(
+      /* @__PURE__ */ jsxs9(
+        "div",
+        {
+          className: getClassName16({
+            isSelected,
+            isDragging: thisIsDragging,
+            hover: hover || indicativeHover
+          }),
+          style: __spreadValues({}, style),
+          "data-puck-overlay": true,
+          children: [
+            debug,
+            isLoading && /* @__PURE__ */ jsx20("div", { className: getClassName16("loadingOverlay"), children: /* @__PURE__ */ jsx20(Loader, {}) }),
+            /* @__PURE__ */ jsx20(
+              "div",
+              {
+                className: getClassName16("actionsOverlay"),
+                style: {
+                  top: actionsOverlayTop / zoom
+                },
+                children: /* @__PURE__ */ jsx20(
                   "div",
                   {
-                    className: getClassName16("actionsOverlay"),
+                    className: getClassName16("actions"),
                     style: {
-                      top: actionsOverlayTop / zoom
+                      transform: `scale(${1 / zoom}`,
+                      top: actionsTop / zoom,
+                      right: 0,
+                      paddingLeft: actionsSide,
+                      paddingRight: actionsSide
                     },
-                    children: /* @__PURE__ */ jsx20(
-                      "div",
+                    ref: syncActionsPosition,
+                    children: /* @__PURE__ */ jsxs9(
+                      CustomActionBar,
                       {
-                        className: getClassName16("actions"),
-                        style: {
-                          transform: `scale(${1 / zoom}`,
-                          top: actionsTop / zoom,
-                          right: 0,
-                          paddingLeft: actionsSide,
-                          paddingRight: actionsSide
-                        },
-                        ref: syncActionsPosition,
-                        children: /* @__PURE__ */ jsxs9(
-                          CustomActionBar,
-                          {
-                            parentAction,
-                            label: DEBUG2 ? id : label,
-                            children: [
-                              permissions.duplicate && /* @__PURE__ */ jsx20(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ jsx20(Copy, { size: 16 }) }),
-                              permissions.delete && /* @__PURE__ */ jsx20(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ jsx20(Trash, { size: 16 }) })
-                            ]
-                          }
-                        )
+                        parentAction,
+                        label: DEBUG2 ? id : label,
+                        children: [
+                          permissions.duplicate && /* @__PURE__ */ jsx20(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ jsx20(Copy, { size: 16 }) }),
+                          permissions.delete && /* @__PURE__ */ jsx20(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ jsx20(Trash, { size: 16 }) })
+                        ]
                       }
                     )
                   }
-                ),
-                /* @__PURE__ */ jsx20("div", { className: getClassName16("overlay") })
-              ]
-            }
-          ),
-          portalEl || document.body
-        ),
-        children(refSetter)
-      ]
-    }
-  );
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx20("div", { className: getClassName16("overlay") })
+          ]
+        }
+      ),
+      portalEl || document.body
+    ),
+    children(refSetter)
+  ] });
 };
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css#css-module
 init_react_import();
-var styles_module_default12 = { "DropZone": "_DropZone_kmkdc_1", "DropZone--isActive": "_DropZone--isActive_kmkdc_10", "DropZone--hasChildren": "_DropZone--hasChildren_kmkdc_14", "DropZone--userIsDragging": "_DropZone--userIsDragging_kmkdc_22", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_kmkdc_26", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_kmkdc_27", "DropZone--isRootZone": "_DropZone--isRootZone_kmkdc_27", "DropZone--isDestination": "_DropZone--isDestination_kmkdc_37", "DropZone-item": "_DropZone-item_kmkdc_49", "DropZone-hitbox": "_DropZone-hitbox_kmkdc_53", "DropZone--isEnabled": "_DropZone--isEnabled_kmkdc_61", "DropZone--isAnimating": "_DropZone--isAnimating_kmkdc_70" };
+var styles_module_default12 = { "DropZone": "_DropZone_3dmev_1", "DropZone--hasChildren": "_DropZone--hasChildren_3dmev_11", "DropZone--userIsDragging": "_DropZone--userIsDragging_3dmev_19", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_3dmev_23", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_3dmev_24", "DropZone--isRootZone": "_DropZone--isRootZone_3dmev_24", "DropZone--isDestination": "_DropZone--isDestination_3dmev_34", "DropZone-item": "_DropZone-item_3dmev_46", "DropZone-hitbox": "_DropZone-hitbox_3dmev_50", "DropZone--isEnabled": "_DropZone--isEnabled_3dmev_58", "DropZone--isAnimating": "_DropZone--isAnimating_3dmev_67" };
 
 // components/DropZone/lib/use-min-empty-height.ts
 init_react_import();
-import { useEffect as useEffect13, useState as useState11 } from "react";
+import { useEffect as useEffect12, useState as useState11 } from "react";
 var useMinEmptyHeight = ({
   zoneCompound,
   userMinEmptyHeight,
@@ -4542,7 +4772,7 @@ var useMinEmptyHeight = ({
       isZone: ((_b = s.draggedItem) == null ? void 0 : _b.data.zone) === zoneCompound
     };
   });
-  useEffect13(() => {
+  useEffect12(() => {
     if (draggedItem && ref.current) {
       if (isZone) {
         const rect = ref.current.getBoundingClientRect();
@@ -4553,10 +4783,18 @@ var useMinEmptyHeight = ({
     }
     setPrevHeight(0);
     setTimeout(() => {
-      const { nodes } = appStore.getState().nodes;
-      Object.entries(nodes).forEach(([_, node]) => {
+      var _a, _b;
+      const zones = appStore.getState().state.indexes.zones;
+      const nodes = appStore.getState().nodes;
+      const selectedItem = appStore.getState().selectedItem;
+      const contentIds = ((_a = zones[zoneCompound]) == null ? void 0 : _a.contentIds) || [];
+      contentIds.forEach((contentId) => {
+        const node = nodes.nodes[contentId];
         node == null ? void 0 : node.methods.sync();
       });
+      if (selectedItem) {
+        (_b = nodes.nodes[selectedItem.props.id]) == null ? void 0 : _b.methods.sync();
+      }
       setIsAnimating(false);
     }, 400);
   }, [ref.current, draggedItem, zoneCompound]);
@@ -4580,7 +4818,7 @@ function assignRefs(refs, node) {
 
 // components/DropZone/lib/use-content-with-preview.ts
 init_react_import();
-import { useEffect as useEffect14, useState as useState12 } from "react";
+import { useEffect as useEffect13, useState as useState12 } from "react";
 
 // lib/dnd/use-rendered-callback.ts
 init_react_import();
@@ -4647,7 +4885,7 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
     },
     [draggedItemId, previewExists]
   );
-  useEffect14(() => {
+  useEffect13(() => {
     updateContent(contentIds, preview, isDragging);
   }, [contentIds, preview, isDragging]);
   return [contentIdsWithPreview, localPreview];
@@ -4655,7 +4893,7 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
 
 // components/DropZone/lib/use-drag-axis.ts
 init_react_import();
-import { useCallback as useCallback8, useEffect as useEffect15, useState as useState13 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect14, useState as useState13 } from "react";
 var GRID_DRAG_AXIS = "dynamic";
 var FLEX_ROW_DRAG_AXIS = "x";
 var DEFAULT_DRAG_AXIS = "y";
@@ -4676,7 +4914,7 @@ var useDragAxis = (ref, collisionAxis) => {
       }
     }
   }, [ref.current]);
-  useEffect15(() => {
+  useEffect14(() => {
     const onViewportChange = () => {
       calculateDragAxis();
     };
@@ -4685,7 +4923,7 @@ var useDragAxis = (ref, collisionAxis) => {
       window.removeEventListener("viewportchange", onViewportChange);
     };
   }, []);
-  useEffect15(calculateDragAxis, [status, collisionAxis]);
+  useEffect14(calculateDragAxis, [status, collisionAxis]);
   return [dragAxis, calculateDragAxis];
 };
 
@@ -4694,8 +4932,36 @@ import { useShallow as useShallow3 } from "zustand/react/shallow";
 
 // components/Render/index.tsx
 init_react_import();
-import React3 from "react";
+import React3, { useMemo as useMemo8 } from "react";
+
+// components/SlotRender/index.tsx
+init_react_import();
 import { jsx as jsx21 } from "react/jsx-runtime";
+var ContextSlotRender = ({
+  componentId,
+  zone
+}) => {
+  const config = useAppStore((s) => s.config);
+  const metadata = useAppStore((s) => s.metadata);
+  const slotContent = useAppStore(
+    (s) => {
+      var _a, _b;
+      return (_b = (_a = s.state.indexes.nodes[componentId]) == null ? void 0 : _a.data.props[zone]) != null ? _b : null;
+    }
+  );
+  return /* @__PURE__ */ jsx21(
+    SlotRenderPure,
+    {
+      content: slotContent,
+      zone,
+      config,
+      metadata
+    }
+  );
+};
+
+// components/Render/index.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
 var renderContext = React3.createContext({
   config: { components: {} },
   data: { root: {}, content: [] },
@@ -4713,51 +4979,38 @@ function Render({
   });
   const rootProps = defaultedData.root.props || defaultedData.root;
   const title = (rootProps == null ? void 0 : rootProps.title) || "";
+  const pageProps = __spreadProps(__spreadValues({}, rootProps), {
+    puck: {
+      renderDropZone: DropZonePure,
+      isEditing: false,
+      dragRef: null,
+      metadata
+    },
+    title,
+    editMode: false,
+    id: "puck-root"
+  });
+  const propsWithSlots = useSlots(config.root, pageProps, (props) => /* @__PURE__ */ jsx22(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata })));
+  const nextContextValue = useMemo8(
+    () => ({
+      mode: "render",
+      depth: 0
+    }),
+    []
+  );
   if ((_a = config.root) == null ? void 0 : _a.render) {
-    return /* @__PURE__ */ jsx21(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx21(
-      DropZoneProvider,
-      {
-        value: {
-          mode: "render",
-          depth: 0
-        },
-        children: /* @__PURE__ */ jsx21(
-          config.root.render,
-          __spreadProps(__spreadValues({}, rootProps), {
-            puck: {
-              renderDropZone: DropZonePure,
-              isEditing: false,
-              dragRef: null
-            },
-            title,
-            editMode: false,
-            id: "puck-root",
-            children: /* @__PURE__ */ jsx21(DropZoneRenderPure, { zone: rootZone })
-          })
-        )
-      }
-    ) });
+    return /* @__PURE__ */ jsx22(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx22(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx22(config.root.render, __spreadProps(__spreadValues({}, propsWithSlots), { children: /* @__PURE__ */ jsx22(DropZoneRenderPure, { zone: rootZone }) })) }) });
   }
-  return /* @__PURE__ */ jsx21(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx21(
-    DropZoneProvider,
-    {
-      value: {
-        mode: "render",
-        depth: 0
-      },
-      children: /* @__PURE__ */ jsx21(DropZoneRenderPure, { zone: rootZone })
-    }
-  ) });
+  return /* @__PURE__ */ jsx22(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx22(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx22(DropZoneRenderPure, { zone: rootZone }) }) });
 }
 
 // components/DropZone/index.tsx
-import { Fragment as Fragment6, jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
 var getClassName17 = get_class_name_factory_default("DropZone", styles_module_default12);
 var getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;
 var RENDER_DEBUG = false;
-var DropZoneEditPure = (props) => /* @__PURE__ */ jsx22(DropZoneEdit, __spreadValues({}, props));
+var DropZoneEditPure = (props) => /* @__PURE__ */ jsx23(DropZoneEdit, __spreadValues({}, props));
 var DropZoneChild = ({
-  zone,
   zoneCompound,
   componentId,
   preview,
@@ -4769,27 +5022,37 @@ var DropZoneChild = ({
 }) => {
   var _a, _b;
   const metadata = useAppStore((s) => s.metadata);
-  const puckProps = {
-    renderDropZone: DropZoneEditPure,
-    isEditing: true,
-    dragRef: null,
-    metadata
-  };
   const ctx = useContext6(dropZoneContext);
-  const { depth } = ctx;
-  const contentItem = useAppStore(
+  const { depth = 1 } = ctx != null ? ctx : {};
+  const nodeProps = useAppStore(
     useShallow3((s) => {
-      let content = s.state.data.content || [];
-      if (zoneCompound !== rootDroppableId) {
-        content = setupZone(s.state.data, zoneCompound).zones[zoneCompound];
-      }
-      return content.find((item2) => item2.props.id === componentId);
+      var _a2;
+      return (_a2 = s.state.indexes.nodes[componentId]) == null ? void 0 : _a2.flatData.props;
+    })
+  );
+  const nodeType = useAppStore(
+    (s) => {
+      var _a2;
+      return (_a2 = s.state.indexes.nodes[componentId]) == null ? void 0 : _a2.data.type;
+    }
+  );
+  const nodeReadOnly = useAppStore(
+    useShallow3((s) => {
+      var _a2;
+      return (_a2 = s.state.indexes.nodes[componentId]) == null ? void 0 : _a2.data.readOnly;
     })
   );
-  const item = contentItem != null ? contentItem : (preview == null ? void 0 : preview.componentType) ? { type: preview.componentType, props: preview.props } : null;
+  const node = { type: nodeType, props: nodeProps };
+  const item = nodeProps ? node : (preview == null ? void 0 : preview.componentType) ? { type: preview.componentType, props: preview.props } : null;
   const componentConfig = useAppStore(
     (s) => (item == null ? void 0 : item.type) ? s.config.components[item.type] : null
   );
+  const puckProps = {
+    renderDropZone: DropZoneEditPure,
+    isEditing: true,
+    dragRef: null,
+    metadata: __spreadValues(__spreadValues({}, metadata), componentConfig == null ? void 0 : componentConfig.metadata)
+  };
   const overrides = useAppStore((s) => s.overrides);
   const isLoading = useAppStore(
     (s) => {
@@ -4804,18 +5067,29 @@ var DropZoneChild = ({
     }
   );
   let label = (_b = (_a = componentConfig == null ? void 0 : componentConfig.label) != null ? _a : item == null ? void 0 : item.type.toString()) != null ? _b : "Component";
-  const renderPreview = useMemo8(
+  const renderPreview = useMemo9(
     () => function Preview4() {
-      return /* @__PURE__ */ jsx22(DrawerItemInner, { name: label, children: overrides.componentItem });
+      return /* @__PURE__ */ jsx23(DrawerItemInner, { name: label, children: overrides.componentItem });
     },
     [componentId, label, overrides]
   );
+  const defaultsProps = useMemo9(
+    () => __spreadProps(__spreadValues(__spreadValues({}, componentConfig == null ? void 0 : componentConfig.defaultProps), item == null ? void 0 : item.props), {
+      puck: puckProps,
+      editMode: true
+      // DEPRECATED
+    }),
+    [componentConfig == null ? void 0 : componentConfig.defaultProps, item == null ? void 0 : item.props, puckProps]
+  );
+  const defaultedPropsWithSlots = useSlots(
+    componentConfig,
+    defaultsProps,
+    DropZoneEditPure,
+    (slotProps) => /* @__PURE__ */ jsx23(ContextSlotRender, { componentId, zone: slotProps.zone }),
+    nodeReadOnly,
+    isLoading
+  );
   if (!item) return;
-  const defaultedProps = __spreadProps(__spreadValues(__spreadValues({}, componentConfig == null ? void 0 : componentConfig.defaultProps), item.props), {
-    puck: puckProps,
-    editMode: true
-    // DEPRECATED
-  });
   let Render2 = componentConfig ? componentConfig.render : () => /* @__PURE__ */ jsxs10("div", { style: { padding: 48, textAlign: "center" }, children: [
     "No configuration for ",
     item.type
@@ -4825,7 +5099,7 @@ var DropZoneChild = ({
   if (isPreview) {
     Render2 = renderPreview;
   }
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     DraggableComponent,
     {
       id: componentId,
@@ -4840,17 +5114,18 @@ var DropZoneChild = ({
       autoDragAxis: dragAxis,
       userDragAxis: collisionAxis,
       inDroppableZone,
-      children: (dragRef) => (componentConfig == null ? void 0 : componentConfig.inline) && !isPreview ? /* @__PURE__ */ jsx22(Fragment6, { children: /* @__PURE__ */ jsx22(
+      children: (dragRef) => (componentConfig == null ? void 0 : componentConfig.inline) && !isPreview ? /* @__PURE__ */ jsx23(Fragment6, { children: /* @__PURE__ */ jsx23(
         Render2,
-        __spreadProps(__spreadValues({}, defaultedProps), {
-          puck: __spreadProps(__spreadValues({}, defaultedProps.puck), {
+        __spreadProps(__spreadValues({}, defaultedPropsWithSlots), {
+          puck: __spreadProps(__spreadValues({}, defaultedPropsWithSlots.puck), {
             dragRef
           })
         })
-      ) }) : /* @__PURE__ */ jsx22("div", { ref: dragRef, children: /* @__PURE__ */ jsx22(Render2, __spreadValues({}, defaultedProps)) })
+      ) }) : /* @__PURE__ */ jsx23("div", { ref: dragRef, children: /* @__PURE__ */ jsx23(Render2, __spreadValues({}, defaultedPropsWithSlots)) })
     }
   );
 };
+var DropZoneChildMemo = memo(DropZoneChild);
 var DropZoneEdit = forwardRef3(
   function DropZoneEditInternal({
     zone,
@@ -4865,16 +5140,15 @@ var DropZoneEdit = forwardRef3(
     const {
       // These all need setting via context
       areaId,
-      depth,
+      depth = 0,
       registerLocalZone,
-      unregisterLocalZone,
-      activeZones
-    } = ctx;
+      unregisterLocalZone
+    } = ctx != null ? ctx : {};
     const path = useAppStore(
-      (s) => {
+      useShallow3((s) => {
         var _a;
-        return areaId ? (_a = s.nodes.nodes[areaId]) == null ? void 0 : _a.path : null;
-      }
+        return areaId ? (_a = s.state.indexes.nodes[areaId]) == null ? void 0 : _a.path : null;
+      })
     );
     let zoneCompound = rootDroppableId;
     if (areaId) {
@@ -4889,34 +5163,46 @@ var DropZoneEdit = forwardRef3(
       draggedComponentType,
       userIsDragging
     } = useContextStore(ZoneStoreContext, (s) => {
-      var _a, _b, _c;
+      var _a, _b;
       return {
         isDeepestZone: (_a = s.zoneDepthIndex[zoneCompound]) != null ? _a : false,
         inNextDeepestArea: s.nextAreaDepthIndex[areaId || ""],
-        draggedItemId: (_b = s.draggedItem) == null ? void 0 : _b.id,
-        draggedComponentType: (_c = s.draggedItem) == null ? void 0 : _c.data.componentType,
+        draggedComponentType: (_b = s.draggedItem) == null ? void 0 : _b.data.componentType,
         userIsDragging: !!s.draggedItem
       };
     });
-    useEffect16(() => {
-      if (ctx == null ? void 0 : ctx.registerZone) {
-        ctx == null ? void 0 : ctx.registerZone(zoneCompound);
-      }
-      return () => {
-        if (ctx == null ? void 0 : ctx.unregisterZone) {
-          ctx == null ? void 0 : ctx.unregisterZone(zoneCompound);
-        }
-      };
-    }, []);
-    const contentIds = useAppStore(
+    const zoneContentIds = useAppStore(
       useShallow3((s) => {
-        let content = s.state.data.content || [];
-        if (zoneCompound !== rootDroppableId) {
-          content = setupZone(s.state.data, zoneCompound).zones[zoneCompound];
-        }
-        return content.map(({ props }) => props.id);
+        var _a;
+        return (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.contentIds;
+      })
+    );
+    const zoneType = useAppStore(
+      useShallow3((s) => {
+        var _a;
+        return (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.type;
       })
     );
+    useEffect15(() => {
+      if (!zoneType || zoneType === "dropzone") {
+        if (zoneCompound !== rootDroppableId) {
+          console.warn(
+            "DropZones have been deprecated in favor of slot fields and will be removed in a future version of Puck. Please see the migration guide: https://www.puckeditor.com/docs/guides/migrations/dropzones-to-slots"
+          );
+        }
+        if (ctx == null ? void 0 : ctx.registerZone) {
+          ctx == null ? void 0 : ctx.registerZone(zoneCompound);
+        }
+        return () => {
+          if (ctx == null ? void 0 : ctx.unregisterZone) {
+            ctx == null ? void 0 : ctx.unregisterZone(zoneCompound);
+          }
+        };
+      }
+    }, [zoneType]);
+    const contentIds = useMemo9(() => {
+      return zoneContentIds || [];
+    }, [zoneContentIds]);
     const ref = useRef3(null);
     const acceptsTarget = useCallback9(
       (componentType) => {
@@ -4940,7 +5226,7 @@ var DropZoneEdit = forwardRef3(
       },
       [allow, disallow]
     );
-    useEffect16(() => {
+    useEffect15(() => {
       if (registerLocalZone) {
         registerLocalZone(zoneCompound, acceptsTarget(draggedComponentType));
       }
@@ -4986,7 +5272,7 @@ var DropZoneEdit = forwardRef3(
       userMinEmptyHeight,
       ref
     });
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx23(
       "div",
       {
         className: `${getClassName17({
@@ -4996,7 +5282,6 @@ var DropZoneEdit = forwardRef3(
           isEnabled,
           isAreaSelected,
           hasChildren: contentIds.length > 0,
-          isActive: activeZones == null ? void 0 : activeZones[zoneCompound],
           isAnimating
         })}${className ? ` ${className}` : ""}`,
         ref: (node) => {
@@ -5009,10 +5294,9 @@ var DropZoneEdit = forwardRef3(
           backgroundColor: RENDER_DEBUG ? getRandomColor() : style == null ? void 0 : style.backgroundColor
         }),
         children: contentIdsWithPreview.map((componentId, i) => {
-          return /* @__PURE__ */ jsx22(
-            DropZoneChild,
+          return /* @__PURE__ */ jsx23(
+            DropZoneChildMemo,
             {
-              zone,
               zoneCompound,
               componentId,
               preview,
@@ -5029,7 +5313,31 @@ var DropZoneEdit = forwardRef3(
     );
   }
 );
-var DropZoneRenderPure = (props) => /* @__PURE__ */ jsx22(DropZoneRender, __spreadValues({}, props));
+var DropZoneRenderItem = ({
+  config,
+  item,
+  metadata
+}) => {
+  const Component = config.components[item.type];
+  const props = useSlots(Component, item.props, (slotProps) => /* @__PURE__ */ jsx23(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
+  const nextContextValue = useMemo9(
+    () => ({
+      areaId: props.id,
+      depth: 1
+    }),
+    [props]
+  );
+  return /* @__PURE__ */ jsx23(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx23(
+    Component.render,
+    __spreadProps(__spreadValues({}, props), {
+      puck: __spreadProps(__spreadValues({}, props.puck), {
+        renderDropZone: DropZoneRenderPure,
+        metadata: __spreadValues(__spreadValues({}, metadata), Component.metadata)
+      })
+    })
+  ) }, props.id);
+};
+var DropZoneRenderPure = (props) => /* @__PURE__ */ jsx23(DropZoneRender, __spreadValues({}, props));
 var DropZoneRender = forwardRef3(
   function DropZoneRenderInternal({ className, style, zone }, ref) {
     const ctx = useContext6(dropZoneContext);
@@ -5037,16 +5345,18 @@ var DropZoneRender = forwardRef3(
     const { config, data, metadata } = useContext6(renderContext);
     let zoneCompound = rootDroppableId;
     let content = (data == null ? void 0 : data.content) || [];
-    useEffect16(() => {
-      if (ctx == null ? void 0 : ctx.registerZone) {
-        ctx == null ? void 0 : ctx.registerZone(zoneCompound);
-      }
-      return () => {
-        if (ctx == null ? void 0 : ctx.unregisterZone) {
-          ctx == null ? void 0 : ctx.unregisterZone(zoneCompound);
+    useEffect15(() => {
+      if (!content) {
+        if (ctx == null ? void 0 : ctx.registerZone) {
+          ctx == null ? void 0 : ctx.registerZone(zoneCompound);
         }
-      };
-    }, []);
+        return () => {
+          if (ctx == null ? void 0 : ctx.unregisterZone) {
+            ctx == null ? void 0 : ctx.unregisterZone(zoneCompound);
+          }
+        };
+      }
+    }, [content]);
     if (!data || !config) {
       return null;
     }
@@ -5054,25 +5364,15 @@ var DropZoneRender = forwardRef3(
       zoneCompound = `${areaId}:${zone}`;
       content = setupZone(data, zoneCompound).zones[zoneCompound];
     }
-    return /* @__PURE__ */ jsx22("div", { className, style, ref, children: content.map((item) => {
+    return /* @__PURE__ */ jsx23("div", { className, style, ref, children: content.map((item) => {
       const Component = config.components[item.type];
       if (Component) {
-        return /* @__PURE__ */ jsx22(
-          DropZoneProvider,
+        return /* @__PURE__ */ jsx23(
+          DropZoneRenderItem,
           {
-            value: {
-              areaId: item.props.id,
-              depth: 1
-            },
-            children: /* @__PURE__ */ jsx22(
-              Component.render,
-              __spreadProps(__spreadValues({}, item.props), {
-                puck: {
-                  renderDropZone: DropZoneRenderPure,
-                  metadata: metadata || {}
-                }
-              })
-            )
+            config,
+            item,
+            metadata
           },
           item.props.id
         );
@@ -5081,14 +5381,14 @@ var DropZoneRender = forwardRef3(
     }) });
   }
 );
-var DropZonePure = (props) => /* @__PURE__ */ jsx22(DropZone, __spreadValues({}, props));
+var DropZonePure = (props) => /* @__PURE__ */ jsx23(DropZone, __spreadValues({}, props));
 var DropZone = forwardRef3(
   function DropZone2(props, ref) {
     const ctx = useContext6(dropZoneContext);
     if ((ctx == null ? void 0 : ctx.mode) === "edit") {
-      return /* @__PURE__ */ jsx22(Fragment6, { children: /* @__PURE__ */ jsx22(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
+      return /* @__PURE__ */ jsx23(Fragment6, { children: /* @__PURE__ */ jsx23(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
     }
-    return /* @__PURE__ */ jsx22(Fragment6, { children: /* @__PURE__ */ jsx22(DropZoneRender, __spreadProps(__spreadValues({}, props), { ref })) });
+    return /* @__PURE__ */ jsx23(Fragment6, { children: /* @__PURE__ */ jsx23(DropZoneRender, __spreadProps(__spreadValues({}, props), { ref })) });
   }
 );
 
@@ -5144,7 +5444,7 @@ var GlobalPosition = class {
     var _a;
     this.target = target;
     this.original = original;
-    this.frameEl = document.querySelector("iframe");
+    this.frameEl = document.querySelector("#preview-frame");
     if (this.frameEl) {
       this.frameRect = this.frameEl.getBoundingClientRect();
       this.scaleFactor = this.frameRect.width / (((_a = this.frameEl.contentWindow) == null ? void 0 : _a.innerWidth) || 1);
@@ -5353,12 +5653,7 @@ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlu
 
 // lib/insert-component.ts
 init_react_import();
-var insertComponent = (componentType, zone, index, {
-  config,
-  dispatch,
-  resolveData: resolveData2,
-  state
-}) => {
+var insertComponent = (componentType, zone, index, appStore) => __async(void 0, null, function* () {
   const id = generateId(componentType);
   const insertActionData = {
     type: "insert",
@@ -5367,7 +5662,8 @@ var insertComponent = (componentType, zone, index, {
     destinationZone: zone,
     id
   };
-  const insertedData = insertAction(state.data, insertActionData, config);
+  const { state, dispatch, resolveComponentData: resolveComponentData2 } = appStore;
+  const insertedState = insertAction(state, insertActionData, appStore);
   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
@@ -5380,11 +5676,19 @@ var insertComponent = (componentType, zone, index, {
     zone
   };
   dispatch({ type: "setUi", ui: { itemSelector } });
-  resolveData2({
-    data: insertedData,
-    ui: __spreadProps(__spreadValues({}, state.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
+      });
+    }
+  }
+});
 
 // components/DragDropContext/index.tsx
 import { useDebouncedCallback } from "use-debounce";
@@ -5402,14 +5706,14 @@ function getDeepDir(el) {
 }
 
 // components/DragDropContext/index.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var DEBUG3 = false;
 var dragListenerContext = createContext4({
   dragListeners: {}
 });
 function useDragListener(type, fn, deps = []) {
   const { setDragListeners } = useContext7(dragListenerContext);
-  useEffect17(() => {
+  useEffect16(() => {
     if (setDragListeners) {
       setDragListeners((old) => __spreadProps(__spreadValues({}, old), {
         [type]: [...old[type] || [], fn]
@@ -5436,10 +5740,7 @@ var DragDropContextClient = ({
   children,
   disableAutoScroll
 }) => {
-  const config = useAppStore((s) => s.config);
   const dispatch = useAppStore((s) => s.dispatch);
-  const resolveData2 = useAppStore((s) => s.resolveData);
-  const metadata = useAppStore((s) => s.metadata);
   const appStore = useAppStoreApi();
   const id = useSafeId();
   const debouncedParamsRef = useRef4(null);
@@ -5499,7 +5800,7 @@ var DragDropContextClient = ({
     setDeepestDb.cancel();
     debouncedParamsRef.current = null;
   };
-  useEffect17(() => {
+  useEffect16(() => {
     if (DEBUG3) {
       zoneStore.subscribe(
         (s) => {
@@ -5564,14 +5865,22 @@ var DragDropContextClient = ({
   const [dragListeners, setDragListeners] = useState14({});
   const dragMode = useRef4(null);
   const initialSelector = useRef4(void 0);
-  return /* @__PURE__ */ jsx23("div", { id, children: /* @__PURE__ */ jsx23(
+  const nextContextValue = useMemo10(
+    () => ({
+      mode: "edit",
+      areaId: "root",
+      depth: 0
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsx24("div", { id, children: /* @__PURE__ */ jsx24(
     dragListenerContext.Provider,
     {
       value: {
         dragListeners,
         setDragListeners
       },
-      children: /* @__PURE__ */ jsx23(
+      children: /* @__PURE__ */ jsx24(
         DragDropProvider2,
         {
           plugins,
@@ -5605,13 +5914,12 @@ var DragDropContextClient = ({
               }
               if (thisPreview) {
                 zoneStore.setState({ previewIndex: {} });
-                const state = appStore.getState().state;
                 if (thisPreview.type === "insert") {
                   insertComponent(
                     thisPreview.componentType,
                     thisPreview.zone,
                     thisPreview.index,
-                    { config, dispatch, resolveData: resolveData2, state }
+                    appStore.getState()
                   );
                 } else if (initialSelector.current) {
                   dispatch({
@@ -5671,7 +5979,7 @@ var DragDropContextClient = ({
               targetZone = target.id.toString();
               targetIndex = 0;
             }
-            const path = ((_d = appStore.getState().nodes.nodes[target.id]) == null ? void 0 : _d.path) || [];
+            const path = ((_d = appStore.getState().state.indexes.nodes[target.id]) == null ? void 0 : _d.path) || [];
             if (targetId === sourceId || path.find((path2) => {
               const [pathId] = path2.split(":");
               return pathId === sourceId;
@@ -5701,8 +6009,7 @@ var DragDropContextClient = ({
               }
               const item = getItem(
                 initialSelector.current,
-                appStore.getState().state.data,
-                {}
+                appStore.getState().state
               );
               if (item) {
                 zoneStore.setState({
@@ -5731,13 +6038,12 @@ var DragDropContextClient = ({
             const { source } = event.operation;
             if (source && source.type !== "void") {
               const sourceData = source.data;
-              const { data } = appStore.getState().state;
               const item = getItem(
                 {
                   zone: sourceData.zone,
                   index: sourceData.index
                 },
-                data
+                appStore.getState().state
               );
               if (item) {
                 zoneStore.setState({
@@ -5764,17 +6070,7 @@ var DragDropContextClient = ({
             initialSelector.current = void 0;
             zoneStore.setState({ draggedItem: event.operation.source });
           },
-          children: /* @__PURE__ */ jsx23(ZoneStoreProvider, { store: zoneStore, children: /* @__PURE__ */ jsx23(
-            DropZoneProvider,
-            {
-              value: {
-                mode: "edit",
-                areaId: "root",
-                depth: 0
-              },
-              children
-            }
-          ) })
+          children: /* @__PURE__ */ jsx24(ZoneStoreProvider, { store: zoneStore, children: /* @__PURE__ */ jsx24(DropZoneProvider, { value: nextContextValue, children }) })
         }
       )
     }
@@ -5788,11 +6084,11 @@ var DragDropContext = ({
   if (status === "LOADING") {
     return children;
   }
-  return /* @__PURE__ */ jsx23(DragDropContextClient, { disableAutoScroll, children });
+  return /* @__PURE__ */ jsx24(DragDropContextClient, { disableAutoScroll, children });
 };
 
 // components/Drawer/index.tsx
-import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
 var getClassName18 = get_class_name_factory_default("Drawer", styles_module_default10);
 var getClassNameItem2 = get_class_name_factory_default("DrawerItem", styles_module_default10);
 var DrawerItemInner = ({
@@ -5802,11 +6098,11 @@ var DrawerItemInner = ({
   dragRef,
   isDragDisabled
 }) => {
-  const CustomInner = useMemo9(
-    () => children || (({ children: children2 }) => /* @__PURE__ */ jsx24("div", { className: getClassNameItem2("default"), children: children2 })),
+  const CustomInner = useMemo11(
+    () => children || (({ children: children2 }) => /* @__PURE__ */ jsx25("div", { className: getClassNameItem2("default"), children: children2 })),
     [children]
   );
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     "div",
     {
       className: getClassNameItem2({ disabled: isDragDisabled }),
@@ -5814,9 +6110,9 @@ var DrawerItemInner = ({
       onMouseDown: (e) => e.preventDefault(),
       "data-testid": dragRef ? `drawer-item:${name}` : "",
       "data-puck-drawer-item": true,
-      children: /* @__PURE__ */ jsx24(CustomInner, { name, children: /* @__PURE__ */ jsx24("div", { className: getClassNameItem2("draggableWrapper"), children: /* @__PURE__ */ jsxs11("div", { className: getClassNameItem2("draggable"), children: [
-        /* @__PURE__ */ jsx24("div", { className: getClassNameItem2("name"), children: label != null ? label : name }),
-        /* @__PURE__ */ jsx24("div", { className: getClassNameItem2("icon"), children: /* @__PURE__ */ jsx24(DragIcon, {}) })
+      children: /* @__PURE__ */ jsx25(CustomInner, { name, children: /* @__PURE__ */ jsx25("div", { className: getClassNameItem2("draggableWrapper"), children: /* @__PURE__ */ jsxs11("div", { className: getClassNameItem2("draggable"), children: [
+        /* @__PURE__ */ jsx25("div", { className: getClassNameItem2("name"), children: label != null ? label : name }),
+        /* @__PURE__ */ jsx25("div", { className: getClassNameItem2("icon"), children: /* @__PURE__ */ jsx25(DragIcon, {}) })
       ] }) }) })
     }
   );
@@ -5834,8 +6130,8 @@ var DrawerItemDraggable = ({
     disabled: isDragDisabled
   });
   return /* @__PURE__ */ jsxs11("div", { className: getClassName18("draggable"), children: [
-    /* @__PURE__ */ jsx24("div", { className: getClassName18("draggableBg"), children: /* @__PURE__ */ jsx24(DrawerItemInner, { name, label, children }) }),
-    /* @__PURE__ */ jsx24("div", { className: getClassName18("draggableFg"), children: /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx25("div", { className: getClassName18("draggableBg"), children: /* @__PURE__ */ jsx25(DrawerItemInner, { name, label, children }) }),
+    /* @__PURE__ */ jsx25("div", { className: getClassName18("draggableFg"), children: /* @__PURE__ */ jsx25(
       DrawerItemInner,
       {
         name,
@@ -5869,7 +6165,7 @@ var DrawerItem = ({
     },
     [resolvedId]
   );
-  return /* @__PURE__ */ jsx24("div", { children: /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25("div", { children: /* @__PURE__ */ jsx25(
     DrawerItemDraggable,
     {
       name,
@@ -5902,7 +6198,7 @@ var Drawer = ({
     collisionPriority: 0
     // Never collide with this, but we use it so NestedDroppablePlugin respects the Drawer
   });
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     "div",
     {
       className: getClassName18(),
@@ -5921,8 +6217,8 @@ import {
   createContext as createContext7,
   useCallback as useCallback16,
   useContext as useContext11,
-  useEffect as useEffect25,
-  useMemo as useMemo18,
+  useEffect as useEffect24,
+  useMemo as useMemo20,
   useState as useState22
 } from "react";
 
@@ -5935,7 +6231,7 @@ var styles_module_default13 = { "SidebarSection": "_SidebarSection_8boj8_1", "Si
 
 // lib/use-breadcrumbs.ts
 init_react_import();
-import { useMemo as useMemo10 } from "react";
+import { useMemo as useMemo12 } from "react";
 var useBreadcrumbs = (renderCount) => {
   const selectedId = useAppStore((s) => {
     var _a;
@@ -5944,12 +6240,12 @@ var useBreadcrumbs = (renderCount) => {
   const config = useAppStore((s) => s.config);
   const path = useAppStore((s) => {
     var _a;
-    return (_a = s.nodes.nodes[selectedId]) == null ? void 0 : _a.path;
+    return (_a = s.state.indexes.nodes[selectedId]) == null ? void 0 : _a.path;
   });
   const appStore = useAppStoreApi();
-  return useMemo10(() => {
+  return useMemo12(() => {
     const breadcrumbs = (path == null ? void 0 : path.map((zoneCompound) => {
-      var _a, _b;
+      var _a, _b, _c;
       const [componentId] = zoneCompound.split(":");
       if (componentId === "root") {
         return {
@@ -5957,12 +6253,15 @@ var useBreadcrumbs = (renderCount) => {
           selector: null
         };
       }
-      const node = appStore.getState().nodes.nodes[componentId];
-      const label = node ? (_b = (_a = config.components[node.data.type]) == null ? void 0 : _a.label) != null ? _b : node.data.type : "Component";
+      const node = appStore.getState().state.indexes.nodes[componentId];
+      const parentId = node.path[node.path.length - 1];
+      const contentIds = ((_a = appStore.getState().state.indexes.zones[parentId]) == null ? void 0 : _a.contentIds) || [];
+      const index = contentIds.indexOf(componentId);
+      const label = node ? (_c = (_b = config.components[node.data.type]) == null ? void 0 : _b.label) != null ? _c : node.data.type : "Component";
       return {
         label,
         selector: node ? {
-          index: node.index,
+          index,
           zone: node.path[node.path.length - 1]
         } : null
       };
@@ -5975,7 +6274,7 @@ var useBreadcrumbs = (renderCount) => {
 };
 
 // components/SidebarSection/index.tsx
-import { jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
 var getClassName19 = get_class_name_factory_default("SidebarSection", styles_module_default13);
 var SidebarSection = ({
   children,
@@ -5994,9 +6293,9 @@ var SidebarSection = ({
       className: getClassName19({ noBorderTop, noPadding }),
       style: { background },
       children: [
-        /* @__PURE__ */ jsx25("div", { className: getClassName19("title"), children: /* @__PURE__ */ jsxs12("div", { className: getClassName19("breadcrumbs"), children: [
+        /* @__PURE__ */ jsx26("div", { className: getClassName19("title"), children: /* @__PURE__ */ jsxs12("div", { className: getClassName19("breadcrumbs"), children: [
           showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs12("div", { className: getClassName19("breadcrumb"), children: [
-            /* @__PURE__ */ jsx25(
+            /* @__PURE__ */ jsx26(
               "button",
               {
                 type: "button",
@@ -6005,12 +6304,12 @@ var SidebarSection = ({
                 children: breadcrumb.label
               }
             ),
-            /* @__PURE__ */ jsx25(ChevronRight, { size: 16 })
+            /* @__PURE__ */ jsx26(ChevronRight, { size: 16 })
           ] }, i)) : null,
-          /* @__PURE__ */ jsx25("div", { className: getClassName19("heading"), children: /* @__PURE__ */ jsx25(Heading, { rank: "2", size: "xs", children: title }) })
+          /* @__PURE__ */ jsx26("div", { className: getClassName19("heading"), children: /* @__PURE__ */ jsx26(Heading, { rank: "2", size: "xs", children: title }) })
         ] }) }),
-        /* @__PURE__ */ jsx25("div", { className: getClassName19("content"), children }),
-        isLoading && /* @__PURE__ */ jsx25("div", { className: getClassName19("loadingOverlay"), children: /* @__PURE__ */ jsx25(Loader, { size: 32 }) })
+        /* @__PURE__ */ jsx26("div", { className: getClassName19("content"), children }),
+        isLoading && /* @__PURE__ */ jsx26("div", { className: getClassName19("loadingOverlay"), children: /* @__PURE__ */ jsx26(Loader, { size: 32 }) })
       ]
     }
   );
@@ -6024,7 +6323,7 @@ init_react_import();
 var styles_module_default14 = { "MenuBar": "_MenuBar_8pf8c_1", "MenuBar--menuOpen": "_MenuBar--menuOpen_8pf8c_14", "MenuBar-inner": "_MenuBar-inner_8pf8c_29", "MenuBar-history": "_MenuBar-history_8pf8c_45" };
 
 // components/MenuBar/index.tsx
-import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
 var getClassName20 = get_class_name_factory_default("MenuBar", styles_module_default14);
 function MenuBar({
   menuOpen = false,
@@ -6035,7 +6334,7 @@ function MenuBar({
   const forward = useAppStore((s) => s.history.forward);
   const hasFuture = useAppStore((s) => s.history.hasFuture());
   const hasPast = useAppStore((s) => s.history.hasPast());
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       className: getClassName20({ menuOpen }),
@@ -6051,10 +6350,10 @@ function MenuBar({
       },
       children: /* @__PURE__ */ jsxs13("div", { className: getClassName20("inner"), children: [
         /* @__PURE__ */ jsxs13("div", { className: getClassName20("history"), children: [
-          /* @__PURE__ */ jsx26(IconButton, { title: "undo", disabled: !hasPast, onClick: back, children: /* @__PURE__ */ jsx26(Undo2, { size: 21 }) }),
-          /* @__PURE__ */ jsx26(IconButton, { title: "redo", disabled: !hasFuture, onClick: forward, children: /* @__PURE__ */ jsx26(Redo2, { size: 21 }) })
+          /* @__PURE__ */ jsx27(IconButton, { title: "undo", disabled: !hasPast, onClick: back, children: /* @__PURE__ */ jsx27(Undo2, { size: 21 }) }),
+          /* @__PURE__ */ jsx27(IconButton, { title: "redo", disabled: !hasFuture, onClick: forward, children: /* @__PURE__ */ jsx27(Redo2, { size: 21 }) })
         ] }),
-        /* @__PURE__ */ jsx26(Fragment7, { children: renderHeaderActions && renderHeaderActions() })
+        /* @__PURE__ */ jsx27(Fragment7, { children: renderHeaderActions && renderHeaderActions() })
       ] })
     }
   );
@@ -6072,19 +6371,18 @@ init_react_import();
 var styles_module_default16 = { "PuckFields": "_PuckFields_10bh7_1", "PuckFields--isLoading": "_PuckFields--isLoading_10bh7_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_10bh7_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_10bh7_25", "PuckFields-field": "_PuckFields-field_10bh7_32", "PuckFields--wrapFields": "_PuckFields--wrapFields_10bh7_36" };
 
 // components/Puck/components/Fields/index.tsx
-import { useCallback as useCallback11, useMemo as useMemo11 } from "react";
+import { useCallback as useCallback11, useMemo as useMemo13 } from "react";
 import { useShallow as useShallow4 } from "zustand/react/shallow";
-import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx28, jsxs as jsxs14 } from "react/jsx-runtime";
 var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
 var DefaultFields = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx27(Fragment8, { children });
+  return /* @__PURE__ */ jsx28(Fragment8, { children });
 };
-var createOnChange = (fieldName, appStore) => (value, updatedUi) => {
-  var _a, _b;
+var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(void 0, null, function* () {
   let currentProps;
-  const { dispatch, resolveData: resolveData2, config, state, selectedItem } = appStore.getState();
+  const { dispatch, state, selectedItem, resolveComponentData: resolveComponentData2 } = appStore.getState();
   const { data, ui } = state;
   const { itemSelector } = ui;
   const rootProps = data.root.props || data.root;
@@ -6097,48 +6395,27 @@ var createOnChange = (fieldName, appStore) => (value, updatedUi) => {
     [fieldName]: value
   });
   if (selectedItem && itemSelector) {
-    const replaceActionData = {
+    dispatch({
       type: "replace",
       destinationIndex: itemSelector.index,
       destinationZone: itemSelector.zone || rootDroppableId,
-      data: __spreadProps(__spreadValues({}, selectedItem), { props: newProps })
-    };
-    const replacedData = replaceAction(data, replaceActionData);
-    const setActionData = {
-      type: "set",
-      state: {
-        data: __spreadValues(__spreadValues({}, data), replacedData),
-        ui: __spreadValues(__spreadValues({}, ui), updatedUi)
-      }
-    };
-    if ((_a = config.components[selectedItem.type]) == null ? void 0 : _a.resolveData) {
-      resolveData2(setAction(state, setActionData));
-    } else {
-      dispatch(__spreadProps(__spreadValues({}, setActionData), {
-        recordHistory: true
-      }));
-    }
+      data: (yield resolveComponentData2(
+        __spreadProps(__spreadValues({}, selectedItem), { props: newProps }),
+        "replace"
+      )).node,
+      ui: updatedUi
+    });
   } else {
     if (data.root.props) {
-      if ((_b = config.root) == null ? void 0 : _b.resolveData) {
-        resolveData2({
-          ui: __spreadValues(__spreadValues({}, ui), updatedUi),
-          data: __spreadProps(__spreadValues({}, data), {
-            root: { props: newProps }
-          })
-        });
-      } else {
-        dispatch({
-          type: "set",
-          state: {
-            ui: __spreadValues(__spreadValues({}, ui), updatedUi),
-            data: __spreadProps(__spreadValues({}, data), {
-              root: { props: newProps }
-            })
-          },
-          recordHistory: true
-        });
-      }
+      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",
@@ -6146,7 +6423,7 @@ var createOnChange = (fieldName, appStore) => (value, updatedUi) => {
       });
     }
   }
-};
+});
 var FieldsChild = ({ fieldName }) => {
   const field = useAppStore((s) => s.fields.fields[fieldName]);
   const isReadOnly = useAppStore(
@@ -6171,7 +6448,8 @@ var FieldsChild = ({ fieldName }) => {
     fieldName
   ]);
   if (!field || !id) return null;
-  return /* @__PURE__ */ jsx27("div", { className: getClassName21("field"), children: /* @__PURE__ */ jsx27(
+  if (field.type === "slot") return null;
+  return /* @__PURE__ */ jsx28("div", { className: getClassName21("field"), children: /* @__PURE__ */ jsx28(
     AutoFieldPrivate,
     {
       field,
@@ -6187,7 +6465,7 @@ var Fields = ({ wrapFields = true }) => {
   const overrides = useAppStore((s) => s.overrides);
   const componentResolving = useAppStore((s) => {
     var _a, _b;
-    const loadingCount = s.selectedItem ? (_a = s.componentState[s.selectedItem.props.id]) == null ? void 0 : _a.loadingCount : (_b = s.componentState["puck-root"]) == null ? void 0 : _b.loadingCount;
+    const loadingCount = s.selectedItem ? (_a = s.componentState[s.selectedItem.props.id]) == null ? void 0 : _a.loadingCount : (_b = s.componentState["root"]) == null ? void 0 : _b.loadingCount;
     return (loadingCount != null ? loadingCount : 0) > 0;
   });
   const itemSelector = useAppStore(useShallow4((s) => s.state.ui.itemSelector));
@@ -6202,7 +6480,7 @@ var Fields = ({ wrapFields = true }) => {
     useShallow4((s) => Object.keys(s.fields.fields))
   );
   const isLoading = fieldsLoading || componentResolving;
-  const Wrapper = useMemo11(() => overrides.fields || DefaultFields, [overrides]);
+  const Wrapper = useMemo13(() => overrides.fields || DefaultFields, [overrides]);
   return /* @__PURE__ */ jsxs14(
     "form",
     {
@@ -6211,8 +6489,8 @@ var Fields = ({ wrapFields = true }) => {
         e.preventDefault();
       },
       children: [
-        /* @__PURE__ */ jsx27(Wrapper, { isLoading, itemSelector, children: fieldNames.map((fieldName) => /* @__PURE__ */ jsx27(FieldsChild, { fieldName }, fieldName)) }),
-        isLoading && /* @__PURE__ */ jsx27("div", { className: getClassName21("loadingOverlay"), children: /* @__PURE__ */ jsx27("div", { className: getClassName21("loadingOverlayInner"), children: /* @__PURE__ */ jsx27(Loader, { size: 16 }) }) })
+        /* @__PURE__ */ jsx28(Wrapper, { isLoading, itemSelector, children: fieldNames.map((fieldName) => /* @__PURE__ */ jsx28(FieldsChild, { fieldName }, fieldName)) }),
+        isLoading && /* @__PURE__ */ jsx28("div", { className: getClassName21("loadingOverlay"), children: /* @__PURE__ */ jsx28("div", { className: getClassName21("loadingOverlayInner"), children: /* @__PURE__ */ jsx28(Loader, { size: 16 }) }) })
       ]
     }
   );
@@ -6223,7 +6501,7 @@ init_react_import();
 
 // lib/use-component-list.tsx
 init_react_import();
-import { useEffect as useEffect18, useState as useState16 } from "react";
+import { useEffect as useEffect17, useState as useState16 } from "react";
 
 // components/ComponentList/index.tsx
 init_react_import();
@@ -6233,7 +6511,7 @@ init_react_import();
 var styles_module_default17 = { "ComponentList": "_ComponentList_1rrlt_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_1rrlt_5", "ComponentList-content": "_ComponentList-content_1rrlt_9", "ComponentList-title": "_ComponentList-title_1rrlt_17", "ComponentList-titleIcon": "_ComponentList-titleIcon_1rrlt_53" };
 
 // components/ComponentList/index.tsx
-import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs15 } from "react/jsx-runtime";
 var getClassName22 = get_class_name_factory_default("ComponentList", styles_module_default17);
 var ComponentListItem = ({
   name,
@@ -6245,7 +6523,7 @@ var ComponentListItem = ({
       type: name
     }).insert
   );
-  return /* @__PURE__ */ jsx28(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: overrides.componentItem });
+  return /* @__PURE__ */ jsx29(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: overrides.componentItem });
 };
 var ComponentList = ({
   children,
@@ -6271,14 +6549,14 @@ var ComponentList = ({
         }),
         title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
         children: [
-          /* @__PURE__ */ jsx28("div", { children: title }),
-          /* @__PURE__ */ jsx28("div", { className: getClassName22("titleIcon"), children: expanded ? /* @__PURE__ */ jsx28(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx28(ChevronDown, { size: 12 }) })
+          /* @__PURE__ */ jsx29("div", { children: title }),
+          /* @__PURE__ */ jsx29("div", { className: getClassName22("titleIcon"), children: expanded ? /* @__PURE__ */ jsx29(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx29(ChevronDown, { size: 12 }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx28("div", { className: getClassName22("content"), children: /* @__PURE__ */ jsx28(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
+    /* @__PURE__ */ jsx29("div", { className: getClassName22("content"), children: /* @__PURE__ */ jsx29(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
       var _a;
-      return /* @__PURE__ */ jsx28(
+      return /* @__PURE__ */ jsx29(
         ComponentListItem,
         {
           label: (_a = config.components[componentKey]["label"]) != null ? _a : componentKey,
@@ -6292,12 +6570,12 @@ var ComponentList = ({
 ComponentList.Item = ComponentListItem;
 
 // lib/use-component-list.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var useComponentList = () => {
   const [componentList, setComponentList] = useState16();
   const config = useAppStore((s) => s.config);
   const uiComponentList = useAppStore((s) => s.state.ui.componentList);
-  useEffect18(() => {
+  useEffect17(() => {
     var _a, _b, _c;
     if (Object.keys(uiComponentList).length > 0) {
       const matchedComponents = [];
@@ -6307,7 +6585,7 @@ var useComponentList = () => {
           if (category.visible === false || !category.components) {
             return null;
           }
-          return /* @__PURE__ */ jsx29(
+          return /* @__PURE__ */ jsx30(
             ComponentList,
             {
               id: categoryKey,
@@ -6316,7 +6594,7 @@ var useComponentList = () => {
                 var _a2;
                 matchedComponents.push(componentName);
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ jsx29(
+                return /* @__PURE__ */ jsx30(
                   ComponentList.Item,
                   {
                     label: (_a2 = componentConf["label"]) != null ? _a2 : componentName,
@@ -6336,7 +6614,7 @@ var useComponentList = () => {
       );
       if (remainingComponents.length > 0 && !((_a = uiComponentList.other) == null ? void 0 : _a.components) && ((_b = uiComponentList.other) == null ? void 0 : _b.visible) !== false) {
         _componentList.push(
-          /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsx30(
             ComponentList,
             {
               id: "other",
@@ -6344,7 +6622,7 @@ var useComponentList = () => {
               children: remainingComponents.map((componentName, i) => {
                 var _a2;
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ jsx29(
+                return /* @__PURE__ */ jsx30(
                   ComponentList.Item,
                   {
                     name: componentName,
@@ -6366,30 +6644,30 @@ var useComponentList = () => {
 };
 
 // components/Puck/components/Components/index.tsx
-import { useMemo as useMemo12 } from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { useMemo as useMemo14 } from "react";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var Components = () => {
   const overrides = useAppStore((s) => s.overrides);
   const componentList = useComponentList();
-  const Wrapper = useMemo12(() => overrides.components || "div", [overrides]);
-  return /* @__PURE__ */ jsx30(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx30(ComponentList, { id: "all" }) });
+  const Wrapper = useMemo14(() => overrides.components || "div", [overrides]);
+  return /* @__PURE__ */ jsx31(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx31(ComponentList, { id: "all" }) });
 };
 
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-import { useCallback as useCallback12, useEffect as useEffect20, useRef as useRef5, useMemo as useMemo13 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect19, useRef as useRef5, useMemo as useMemo15 } from "react";
 
 // components/AutoFrame/index.tsx
 init_react_import();
 import {
   createContext as createContext5,
   useContext as useContext8,
-  useEffect as useEffect19,
+  useEffect as useEffect18,
   useState as useState17
 } from "react";
 import hash from "object-hash";
 import { createPortal as createPortal3 } from "react-dom";
-import { Fragment as Fragment9, jsx as jsx31 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx32 } from "react/jsx-runtime";
 var styleSelector = 'style, link[rel="stylesheet"]';
 var collectStyles = (doc) => {
   const collected = [];
@@ -6432,7 +6710,7 @@ var CopyHostStyles = ({
   onStylesLoaded = () => null
 }) => {
   const { document: doc, window: win } = useFrame();
-  useEffect19(() => {
+  useEffect18(() => {
     if (!win || !doc) {
       return () => {
       };
@@ -6589,7 +6867,7 @@ var CopyHostStyles = ({
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ jsx31(Fragment9, { children });
+  return /* @__PURE__ */ jsx32(Fragment9, { children });
 };
 var autoFrameContext = createContext5({});
 var useFrame = () => useContext8(autoFrameContext);
@@ -6617,7 +6895,7 @@ function AutoFrame(_a) {
   const [ctx, setCtx] = useState17({});
   const [mountTarget, setMountTarget] = useState17();
   const [stylesLoaded, setStylesLoaded] = useState17(false);
-  useEffect19(() => {
+  useEffect18(() => {
     var _a2;
     if (frameRef.current) {
       const doc = frameRef.current.contentDocument;
@@ -6636,7 +6914,7 @@ function AutoFrame(_a) {
       }
     }
   }, [frameRef, loaded, stylesLoaded]);
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     "iframe",
     __spreadProps(__spreadValues({}, props), {
       className,
@@ -6646,7 +6924,7 @@ function AutoFrame(_a) {
       onLoad: () => {
         setLoaded(true);
       },
-      children: /* @__PURE__ */ jsx31(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx31(
+      children: /* @__PURE__ */ jsx32(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx32(
         CopyHostStyles,
         {
           debug,
@@ -6665,11 +6943,11 @@ init_react_import();
 var styles_module_default18 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPreview-frame": "_PuckPreview-frame_z2rgu_6" };
 
 // components/Puck/components/Preview/index.tsx
-import { Fragment as Fragment10, jsx as jsx32 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx33 } from "react/jsx-runtime";
 var getClassName23 = get_class_name_factory_default("PuckPreview", styles_module_default18);
 var useBubbleIframeEvents = (ref) => {
   const status = useAppStore((s) => s.status);
-  useEffect20(() => {
+  useEffect19(() => {
     if (ref.current && status === "READY") {
       const iframe = ref.current;
       const handlePointerMove = (event) => {
@@ -6721,17 +6999,19 @@ var Preview3 = ({ id = "puck-preview" }) => {
   const Page = useCallback12(
     (pageProps) => {
       var _a, _b;
+      const rootConfig = config.root;
+      const propsWithSlots = useSlots(rootConfig, pageProps, DropZoneEditPure);
       return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadValues({
         id: "puck-root"
-      }, pageProps)) : /* @__PURE__ */ jsx32(Fragment10, { children: pageProps.children });
+      }, propsWithSlots)) : /* @__PURE__ */ jsx33(Fragment10, { children: propsWithSlots.children });
     },
     [config.root]
   );
-  const Frame = useMemo13(() => overrides.iframe, [overrides]);
+  const Frame = useMemo15(() => overrides.iframe, [overrides]);
   const rootProps = root.props || root;
   const ref = useRef5(null);
   useBubbleIframeEvents(ref);
-  const inner = !renderData ? /* @__PURE__ */ jsx32(
+  const inner = !renderData ? /* @__PURE__ */ jsx33(
     Page,
     __spreadProps(__spreadValues({}, rootProps), {
       puck: {
@@ -6741,15 +7021,15 @@ var Preview3 = ({ id = "puck-preview" }) => {
         metadata
       },
       editMode: true,
-      children: /* @__PURE__ */ jsx32(DropZonePure, { zone: rootDroppableId })
+      children: /* @__PURE__ */ jsx33(DropZonePure, { zone: rootDroppableId })
     })
-  ) : /* @__PURE__ */ jsx32(Render, { data: renderData, config });
-  useEffect20(() => {
+  ) : /* @__PURE__ */ jsx33(Render, { data: renderData, config });
+  useEffect19(() => {
     if (!iframe.enabled) {
       setStatus("READY");
     }
   }, [iframe.enabled]);
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     "div",
     {
       className: getClassName23(),
@@ -6758,7 +7038,7 @@ var Preview3 = ({ id = "puck-preview" }) => {
       onClick: () => {
         dispatch({ type: "setUi", ui: { itemSelector: null } });
       },
-      children: iframe.enabled ? /* @__PURE__ */ jsx32(
+      children: iframe.enabled ? /* @__PURE__ */ jsx33(
         AutoFrame_default,
         {
           id: "preview-frame",
@@ -6771,14 +7051,14 @@ var Preview3 = ({ id = "puck-preview" }) => {
             setStatus("MOUNTED");
           },
           frameRef: ref,
-          children: /* @__PURE__ */ jsx32(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
+          children: /* @__PURE__ */ jsx33(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
             if (Frame) {
-              return /* @__PURE__ */ jsx32(Frame, { document: document2, children: inner });
+              return /* @__PURE__ */ jsx33(Frame, { document: document2, children: inner });
             }
             return inner;
           } })
         }
-      ) : /* @__PURE__ */ jsx32(
+      ) : /* @__PURE__ */ jsx33(
         "div",
         {
           id: "preview-frame",
@@ -6795,27 +7075,6 @@ var Preview3 = ({ id = "puck-preview" }) => {
 // components/Puck/components/Outline/index.tsx
 init_react_import();
 
-// lib/area-contains-zones.ts
-init_react_import();
-
-// lib/find-zones-for-area.ts
-init_react_import();
-var findZonesForArea = (data, area) => {
-  const { zones = {} } = data;
-  const result = Object.keys(zones).filter(
-    (zoneId) => getZoneId(zoneId)[0] === area
-  );
-  return result.reduce((acc, key) => {
-    return __spreadProps(__spreadValues({}, acc), { [key]: zones[key] });
-  }, {});
-};
-
-// lib/area-contains-zones.ts
-var areaContainsZones = (data, area) => {
-  const zones = Object.keys(findZonesForArea(data, area));
-  return zones.length > 0;
-};
-
 // components/LayerTree/index.tsx
 init_react_import();
 
@@ -6835,7 +7094,7 @@ var scrollIntoView = (el) => {
 };
 
 // components/LayerTree/index.tsx
-import { useContext as useContext9 } from "react";
+import { useCallback as useCallback13, useContext as useContext9 } from "react";
 
 // lib/on-scroll-end.ts
 init_react_import();
@@ -6857,124 +7116,147 @@ var onScrollEnd = (frame, cb) => {
 };
 
 // components/LayerTree/index.tsx
-import { Fragment as Fragment11, jsx as jsx33, jsxs as jsxs16 } from "react/jsx-runtime";
+import { useShallow as useShallow5 } from "zustand/react/shallow";
+import { Fragment as Fragment11, jsx as jsx34, jsxs as jsxs16 } from "react/jsx-runtime";
 var getClassName24 = get_class_name_factory_default("LayerTree", styles_module_default19);
 var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default19);
-var LayerTree = ({
-  data,
-  config,
-  zoneContent,
-  itemSelector,
-  setItemSelector,
-  zone,
-  label
+var Layer = ({
+  index,
+  itemId,
+  zoneCompound
 }) => {
-  const zones = data.zones || {};
+  var _a;
   const ctx = useContext9(dropZoneContext);
-  const nodes = useAppStore((s) => s.nodes.nodes);
+  const config = useAppStore((s) => s.config);
+  const itemSelector = useAppStore((s) => s.state.ui.itemSelector);
+  const dispatch = useAppStore((s) => s.dispatch);
+  const setItemSelector = useCallback13(
+    (itemSelector2) => {
+      dispatch({ type: "setUi", ui: { itemSelector: itemSelector2 } });
+    },
+    [dispatch]
+  );
+  const selecedItemId = useAppStore((s) => {
+    var _a2;
+    return (_a2 = s.selectedItem) == null ? void 0 : _a2.props.id;
+  });
+  const isSelected = selecedItemId === itemId || itemSelector && itemSelector.zone === rootDroppableId && !zoneCompound;
+  const nodeData = useAppStore((s) => s.state.indexes.nodes[itemId]);
+  const zonesForItem = useAppStore(
+    useShallow5(
+      (s) => Object.keys(s.state.indexes.zones).filter(
+        (z) => z.split(":")[0] === itemId
+      )
+    )
+  );
+  const containsZone = zonesForItem.length > 0;
+  const { setHoveringComponent = () => {
+  }, hoveringComponent } = ctx || {};
+  const isHovering = hoveringComponent === itemId;
+  const childIsSelected = useAppStore((s) => {
+    var _a2, _b;
+    const selectedData = s.state.indexes.nodes[(_a2 = s.selectedItem) == null ? void 0 : _a2.props.id];
+    return (_b = selectedData == null ? void 0 : selectedData.path.some((candidate) => {
+      const [candidateId] = candidate.split(":");
+      return candidateId === itemId;
+    })) != null ? _b : false;
+  });
+  const componentConfig = config.components[nodeData.data.type];
+  const label = (_a = componentConfig == null ? void 0 : componentConfig["label"]) != null ? _a : nodeData.data.type.toString();
+  return /* @__PURE__ */ jsxs16(
+    "li",
+    {
+      className: getClassNameLayer({
+        isSelected,
+        isHovering,
+        containsZone,
+        childIsSelected
+      }),
+      children: [
+        /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs16(
+          "button",
+          {
+            type: "button",
+            className: getClassNameLayer("clickable"),
+            onClick: () => {
+              if (isSelected) {
+                setItemSelector(null);
+                return;
+              }
+              const frame = getFrame();
+              const el = frame == null ? void 0 : frame.querySelector(
+                `[data-puck-component="${itemId}"]`
+              );
+              if (!el) {
+                console.error("Scroll failed. No element was found for", itemId);
+                return;
+              }
+              scrollIntoView(el);
+              onScrollEnd(frame, () => {
+                setItemSelector({
+                  index,
+                  zone: zoneCompound
+                });
+              });
+            },
+            onMouseOver: (e) => {
+              e.stopPropagation();
+              setHoveringComponent(itemId);
+            },
+            onMouseOut: (e) => {
+              e.stopPropagation();
+              setHoveringComponent(null);
+            },
+            children: [
+              containsZone && /* @__PURE__ */ jsx34(
+                "div",
+                {
+                  className: getClassNameLayer("chevron"),
+                  title: isSelected ? "Collapse" : "Expand",
+                  children: /* @__PURE__ */ jsx34(ChevronDown, { size: "12" })
+                }
+              ),
+              /* @__PURE__ */ jsxs16("div", { className: getClassNameLayer("title"), children: [
+                /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("icon"), children: nodeData.data.type === "Text" || nodeData.data.type === "Heading" ? /* @__PURE__ */ jsx34(Type, { size: "16" }) : /* @__PURE__ */ jsx34(LayoutGrid, { size: "16" }) }),
+                /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("name"), children: label })
+              ] })
+            ]
+          }
+        ) }),
+        containsZone && zonesForItem.map((subzone) => /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ jsx34(LayerTree, { zoneCompound: subzone }) }, subzone))
+      ]
+    }
+  );
+};
+var LayerTree = ({
+  label: _label,
+  zoneCompound
+}) => {
+  const label = _label != null ? _label : zoneCompound.split(":")[1];
+  const contentIds = useAppStore(
+    useShallow5(
+      (s) => {
+        var _a, _b;
+        return zoneCompound ? (_b = (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.contentIds) != null ? _b : [] : [];
+      }
+    )
+  );
   return /* @__PURE__ */ jsxs16(Fragment11, { children: [
     label && /* @__PURE__ */ jsxs16("div", { className: getClassName24("zoneTitle"), children: [
-      /* @__PURE__ */ jsx33("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ jsx33(Layers, { size: "16" }) }),
-      " ",
+      /* @__PURE__ */ jsx34("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ jsx34(Layers, { size: "16" }) }),
       label
     ] }),
     /* @__PURE__ */ jsxs16("ul", { className: getClassName24(), children: [
-      zoneContent.length === 0 && /* @__PURE__ */ jsx33("div", { className: getClassName24("helper"), children: "No items" }),
-      zoneContent.map((item, i) => {
-        var _a, _b, _c, _d;
-        const isSelected = (itemSelector == null ? void 0 : itemSelector.index) === i && (itemSelector.zone === zone || itemSelector.zone === rootDroppableId && !zone);
-        const zonesForItem = findZonesForArea(data, item.props.id);
-        const containsZone = Object.keys(zonesForItem).length > 0;
-        const { setHoveringComponent = () => {
-        }, hoveringComponent } = ctx || {};
-        const selectedItem = itemSelector && data ? getItem(itemSelector, data) : null;
-        const isHovering = hoveringComponent === item.props.id;
-        const path = selectedItem ? (_b = (_a = nodes[selectedItem == null ? void 0 : selectedItem.props.id]) == null ? void 0 : _a.path) != null ? _b : [] : [];
-        const childIsSelected = (_c = path == null ? void 0 : path.some((candidate) => {
-          const [candidateId] = candidate.split(":");
-          return candidateId === item.props.id;
-        })) != null ? _c : false;
-        const componentConfig = config.components[item.type];
-        const label2 = (_d = componentConfig == null ? void 0 : componentConfig["label"]) != null ? _d : item.type.toString();
-        return /* @__PURE__ */ jsxs16(
-          "li",
+      contentIds.length === 0 && /* @__PURE__ */ jsx34("div", { className: getClassName24("helper"), children: "No items" }),
+      contentIds.map((itemId, i) => {
+        return /* @__PURE__ */ jsx34(
+          Layer,
           {
-            className: getClassNameLayer({
-              isSelected,
-              isHovering,
-              containsZone,
-              childIsSelected
-            }),
-            children: [
-              /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs16(
-                "button",
-                {
-                  type: "button",
-                  className: getClassNameLayer("clickable"),
-                  onClick: () => {
-                    if (isSelected) {
-                      setItemSelector(null);
-                      return;
-                    }
-                    const id = zoneContent[i].props.id;
-                    const frame = getFrame();
-                    const el = frame == null ? void 0 : frame.querySelector(
-                      `[data-puck-component="${id}"]`
-                    );
-                    if (!el) {
-                      console.error(
-                        "Scroll failed. No element was found for",
-                        id
-                      );
-                      return;
-                    }
-                    scrollIntoView(el);
-                    onScrollEnd(frame, () => {
-                      setItemSelector({
-                        index: i,
-                        zone
-                      });
-                    });
-                  },
-                  onMouseOver: (e) => {
-                    e.stopPropagation();
-                    setHoveringComponent(item.props.id);
-                  },
-                  onMouseOut: (e) => {
-                    e.stopPropagation();
-                    setHoveringComponent(null);
-                  },
-                  children: [
-                    containsZone && /* @__PURE__ */ jsx33(
-                      "div",
-                      {
-                        className: getClassNameLayer("chevron"),
-                        title: isSelected ? "Collapse" : "Expand",
-                        children: /* @__PURE__ */ jsx33(ChevronDown, { size: "12" })
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs16("div", { className: getClassNameLayer("title"), children: [
-                      /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ jsx33(Type, { size: "16" }) : /* @__PURE__ */ jsx33(LayoutGrid, { size: "16" }) }),
-                      /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("name"), children: label2 })
-                    ] })
-                  ]
-                }
-              ) }),
-              containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ jsx33(
-                LayerTree,
-                {
-                  config,
-                  data,
-                  zoneContent: zones[zoneKey],
-                  setItemSelector,
-                  itemSelector,
-                  zone: zoneKey,
-                  label: getZoneId(zoneKey)[1]
-                }
-              ) }, idx))
-            ]
+            index: i,
+            itemId,
+            zoneCompound
           },
-          `${item.props.id}_${i}`
+          itemId
         );
       })
     ] })
@@ -6982,56 +7264,33 @@ var LayerTree = ({
 };
 
 // components/Puck/components/Outline/index.tsx
-import { useCallback as useCallback13, useMemo as useMemo14 } from "react";
-import { Fragment as Fragment12, jsx as jsx34, jsxs as jsxs17 } from "react/jsx-runtime";
+import { useMemo as useMemo16 } from "react";
+
+// lib/data/find-zones-for-area.ts
+init_react_import();
+var findZonesForArea = (state, area) => {
+  return Object.keys(state.indexes.zones).filter(
+    (zone) => zone.split(":")[0] === area
+  );
+};
+
+// components/Puck/components/Outline/index.tsx
+import { useShallow as useShallow6 } from "zustand/react/shallow";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var Outline = () => {
-  const state = useAppStore((s) => s.state);
-  const config = useAppStore((s) => s.config);
   const outlineOverride = useAppStore((s) => s.overrides.outline);
-  const { data, ui } = state;
-  const { itemSelector } = ui;
-  const appStore = useAppStoreApi();
-  const setItemSelector = useCallback13(
-    (newItemSelector) => {
-      const { dispatch } = appStore.getState();
-      dispatch({
-        type: "setUi",
-        ui: { itemSelector: newItemSelector }
-      });
-    },
-    [appStore]
+  const rootZones = useAppStore(
+    useShallow6((s) => findZonesForArea(s.state, "root"))
   );
-  const Wrapper = useMemo14(() => outlineOverride || "div", [outlineOverride]);
-  return /* @__PURE__ */ jsx34(Wrapper, { children: /* @__PURE__ */ jsx34(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ jsxs17(Fragment12, { children: [
-    (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ jsx34(
-      LayerTree,
-      {
-        config,
-        data,
-        label: areaContainsZones(data, "root") ? rootDroppableId : "",
-        zoneContent: data.content,
-        setItemSelector,
-        itemSelector
-      }
-    ),
-    Object.entries(findZonesForArea(data, "root")).map(
-      ([zoneKey, zone]) => {
-        return /* @__PURE__ */ jsx34(
-          LayerTree,
-          {
-            config,
-            data,
-            label: zoneKey,
-            zone: zoneKey,
-            zoneContent: zone,
-            setItemSelector,
-            itemSelector
-          },
-          zoneKey
-        );
-      }
-    )
-  ] }) }) });
+  const Wrapper = useMemo16(() => outlineOverride || "div", [outlineOverride]);
+  return /* @__PURE__ */ jsx35(Wrapper, { children: rootZones.map((zoneCompound) => /* @__PURE__ */ jsx35(
+    LayerTree,
+    {
+      label: rootZones.length === 1 ? "" : zoneCompound.split(":")[1],
+      zoneCompound
+    },
+    zoneCompound
+  )) });
 };
 
 // components/Puck/components/Canvas/index.tsx
@@ -7159,26 +7418,26 @@ var getBox = function getBox2(el) {
 // components/Puck/components/Canvas/index.tsx
 import {
   useCallback as useCallback14,
-  useEffect as useEffect22,
-  useMemo as useMemo16,
+  useEffect as useEffect21,
+  useMemo as useMemo18,
   useRef as useRef6,
   useState as useState19
 } from "react";
 
 // components/ViewportControls/index.tsx
 init_react_import();
-import { useEffect as useEffect21, useMemo as useMemo15, useState as useState18 } from "react";
+import { useEffect as useEffect20, useMemo as useMemo17, useState as useState18 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
 init_react_import();
 var styles_module_default20 = { "ViewportControls": "_ViewportControls_gejzr_1", "ViewportControls-divider": "_ViewportControls-divider_gejzr_15", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_gejzr_21", "ViewportButton--isActive": "_ViewportButton--isActive_gejzr_38", "ViewportButton-inner": "_ViewportButton-inner_gejzr_38" };
 
 // components/ViewportControls/index.tsx
-import { jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs17 } from "react/jsx-runtime";
 var icons = {
-  Smartphone: /* @__PURE__ */ jsx35(Smartphone, { size: 16 }),
-  Tablet: /* @__PURE__ */ jsx35(Tablet, { size: 16 }),
-  Monitor: /* @__PURE__ */ jsx35(Monitor, { size: 16 })
+  Smartphone: /* @__PURE__ */ jsx36(Smartphone, { size: 16 }),
+  Tablet: /* @__PURE__ */ jsx36(Tablet, { size: 16 }),
+  Monitor: /* @__PURE__ */ jsx36(Monitor, { size: 16 })
 };
 var getClassName25 = get_class_name_factory_default("ViewportControls", styles_module_default20);
 var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default20);
@@ -7191,10 +7450,10 @@ var ViewportButton = ({
 }) => {
   const viewports = useAppStore((s) => s.state.ui.viewports);
   const [isActive, setIsActive] = useState18(false);
-  useEffect21(() => {
+  useEffect20(() => {
     setIsActive(width === viewports.current.width);
   }, [width, viewports.current.width]);
-  return /* @__PURE__ */ jsx35("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx36(
     IconButton,
     {
       title,
@@ -7203,7 +7462,7 @@ var ViewportButton = ({
         e.stopPropagation();
         onClick({ width, height });
       },
-      children: /* @__PURE__ */ jsx35("span", { className: getClassNameButton("inner"), children })
+      children: /* @__PURE__ */ jsx36("span", { className: getClassNameButton("inner"), children })
     }
   ) });
 };
@@ -7227,7 +7486,7 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
-  const zoomOptions = useMemo15(
+  const zoomOptions = useMemo17(
     () => [
       ...defaultZoomOptions,
       ...defaultsContainAutoZoom ? [] : [
@@ -7239,8 +7498,8 @@ var ViewportControls = ({
     ].filter((a) => a.value <= autoZoom).sort((a, b) => a.value > b.value ? 1 : -1),
     [autoZoom]
   );
-  return /* @__PURE__ */ jsxs18("div", { className: getClassName25(), children: [
-    viewports.map((viewport, i) => /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsxs17("div", { className: getClassName25(), children: [
+    viewports.map((viewport, i) => /* @__PURE__ */ jsx36(
       ViewportButton,
       {
         height: viewport.height,
@@ -7251,8 +7510,8 @@ var ViewportControls = ({
       },
       i
     )),
-    /* @__PURE__ */ jsx35("div", { className: getClassName25("divider") }),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36("div", { className: getClassName25("divider") }),
+    /* @__PURE__ */ jsx36(
       IconButton,
       {
         title: "Zoom viewport out",
@@ -7266,10 +7525,10 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ jsx35(ZoomOut, { size: 16 })
+        children: /* @__PURE__ */ jsx36(ZoomOut, { size: 16 })
       }
     ),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36(
       IconButton,
       {
         title: "Zoom viewport in",
@@ -7283,11 +7542,11 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ jsx35(ZoomIn, { size: 16 })
+        children: /* @__PURE__ */ jsx36(ZoomIn, { size: 16 })
       }
     ),
-    /* @__PURE__ */ jsx35("div", { className: getClassName25("divider") }),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36("div", { className: getClassName25("divider") }),
+    /* @__PURE__ */ jsx36(
       "select",
       {
         className: getClassName25("zoomSelect"),
@@ -7295,7 +7554,7 @@ var ViewportControls = ({
         onChange: (e) => {
           onZoom(parseFloat(e.currentTarget.value));
         },
-        children: zoomOptions.map((option) => /* @__PURE__ */ jsx35(
+        children: zoomOptions.map((option) => /* @__PURE__ */ jsx36(
           "option",
           {
             value: option.value,
@@ -7343,8 +7602,8 @@ var getZoomConfig = (uiViewport, frame, zoom) => {
 };
 
 // components/Puck/components/Canvas/index.tsx
-import { useShallow as useShallow5 } from "zustand/react/shallow";
-import { Fragment as Fragment13, jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
+import { useShallow as useShallow7 } from "zustand/react/shallow";
+import { Fragment as Fragment12, jsx as jsx37, jsxs as jsxs18 } from "react/jsx-runtime";
 var getClassName26 = get_class_name_factory_default("PuckCanvas", styles_module_default21);
 var ZOOM_ON_CHANGE = true;
 var Canvas = () => {
@@ -7357,7 +7616,7 @@ var Canvas = () => {
     status,
     iframe
   } = useAppStore(
-    useShallow5((s) => ({
+    useShallow7((s) => ({
       dispatch: s.dispatch,
       overrides: s.overrides,
       setUi: s.setUi,
@@ -7368,7 +7627,7 @@ var Canvas = () => {
     }))
   );
   const { leftSideBarVisible, rightSideBarVisible, viewports } = useAppStore(
-    useShallow5((s) => ({
+    useShallow7((s) => ({
       leftSideBarVisible: s.state.ui.leftSideBarVisible,
       rightSideBarVisible: s.state.ui.rightSideBarVisible,
       viewports: s.state.ui.viewports
@@ -7376,11 +7635,11 @@ var Canvas = () => {
   );
   const frameRef = useRef6(null);
   const [showTransition, setShowTransition] = useState19(false);
-  const defaultRender = useMemo16(() => {
-    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx36(Fragment13, { children });
+  const defaultRender = useMemo18(() => {
+    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx37(Fragment12, { children });
     return PuckDefault;
   }, []);
-  const CustomPreview = useMemo16(
+  const CustomPreview = useMemo18(
     () => overrides.preview || defaultRender,
     [overrides]
   );
@@ -7406,11 +7665,11 @@ var Canvas = () => {
     },
     [frameRef, zoomConfig, viewports]
   );
-  useEffect22(() => {
+  useEffect21(() => {
     setShowTransition(false);
     resetAutoZoom(viewports);
   }, [frameRef, leftSideBarVisible, rightSideBarVisible]);
-  useEffect22(() => {
+  useEffect21(() => {
     const { height: frameHeight } = getFrameDimensions();
     if (viewports.current.height === "auto") {
       setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
@@ -7418,13 +7677,13 @@ var Canvas = () => {
       }));
     }
   }, [zoomConfig.zoom]);
-  useEffect22(() => {
+  useEffect21(() => {
     if (ZOOM_ON_CHANGE) {
       setShowTransition(true);
       resetAutoZoom(viewports);
     }
   }, [viewports.current.width]);
-  useEffect22(() => {
+  useEffect21(() => {
     const cb = () => {
       setShowTransition(false);
       resetAutoZoom();
@@ -7435,12 +7694,12 @@ var Canvas = () => {
     };
   }, []);
   const [showLoader, setShowLoader] = useState19(false);
-  useEffect22(() => {
+  useEffect21(() => {
     setTimeout(() => {
       setShowLoader(true);
     }, 500);
   }, []);
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       className: getClassName26({
@@ -7453,7 +7712,7 @@ var Canvas = () => {
         recordHistory: true
       }),
       children: [
-        viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx36("div", { className: getClassName26("controls"), children: /* @__PURE__ */ jsx36(
+        viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx37("div", { className: getClassName26("controls"), children: /* @__PURE__ */ jsx37(
           ViewportControls,
           {
             autoZoom: zoomConfig.autoZoom,
@@ -7479,8 +7738,8 @@ var Canvas = () => {
             }
           }
         ) }),
-        /* @__PURE__ */ jsxs19("div", { className: getClassName26("inner"), ref: frameRef, children: [
-          /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsxs18("div", { className: getClassName26("inner"), ref: frameRef, children: [
+          /* @__PURE__ */ jsx37(
             "div",
             {
               className: getClassName26("root"),
@@ -7501,10 +7760,10 @@ var Canvas = () => {
                   })
                 );
               },
-              children: /* @__PURE__ */ jsx36(CustomPreview, { children: /* @__PURE__ */ jsx36(Preview3, {}) })
+              children: /* @__PURE__ */ jsx37(CustomPreview, { children: /* @__PURE__ */ jsx37(Preview3, {}) })
             }
           ),
-          /* @__PURE__ */ jsx36("div", { className: getClassName26("loader"), children: /* @__PURE__ */ jsx36(Loader, { size: 24 }) })
+          /* @__PURE__ */ jsx37("div", { className: getClassName26("loader"), children: /* @__PURE__ */ jsx37(Loader, { size: 24 }) })
         ] })
       ]
     }
@@ -7513,7 +7772,7 @@ var Canvas = () => {
 
 // lib/use-loaded-overrides.ts
 init_react_import();
-import { useMemo as useMemo17 } from "react";
+import { useMemo as useMemo19 } from "react";
 
 // lib/load-overrides.ts
 init_react_import();
@@ -7552,26 +7811,26 @@ var useLoadedOverrides = ({
   overrides,
   plugins
 }) => {
-  return useMemo17(() => {
+  return useMemo19(() => {
     return loadOverrides({ overrides, plugins });
   }, [plugins, overrides]);
 };
 
 // components/DefaultOverride/index.tsx
 init_react_import();
-import { Fragment as Fragment14, jsx as jsx37 } from "react/jsx-runtime";
-var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx37(Fragment14, { children });
+import { Fragment as Fragment13, jsx as jsx38 } from "react/jsx-runtime";
+var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx38(Fragment13, { children });
 
 // lib/use-inject-css.ts
 init_react_import();
-import { useEffect as useEffect23, useState as useState20 } from "react";
+import { useEffect as useEffect22, useState as useState20 } from "react";
 var styles = ``;
 var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
   const [el, setEl] = useState20();
-  useEffect23(() => {
+  useEffect22(() => {
     setEl(document.createElement("style"));
   }, []);
-  useEffect23(() => {
+  useEffect22(() => {
     var _a;
     if (!el || typeof window === "undefined") {
       return;
@@ -7609,7 +7868,7 @@ var usePreviewModeHotkeys = () => {
 
 // lib/use-puck.ts
 init_react_import();
-import { createContext as createContext6, useContext as useContext10, useEffect as useEffect24, useState as useState21 } from "react";
+import { createContext as createContext6, useContext as useContext10, useEffect as useEffect23, useState as useState21 } from "react";
 import { createStore as createStore4, useStore as useStore3 } from "zustand";
 var generateUsePuck = (store) => {
   const history = {
@@ -7623,13 +7882,22 @@ var generateUsePuck = (store) => {
     index: store.history.index
   };
   const storeData = {
-    appState: store.state,
+    appState: makeStatePublic(store.state),
     config: store.config,
     dispatch: store.dispatch,
     getPermissions: store.permissions.getPermissions,
     refreshPermissions: store.permissions.refreshPermissions,
     history,
-    selectedItem: store.selectedItem || null
+    selectedItem: store.selectedItem || null,
+    getItemBySelector: (selector) => getItem(selector, store.state),
+    getItemById: (id) => store.state.indexes.nodes[id].data,
+    getSelectorForId: (id) => {
+      const node = store.state.indexes.nodes[id];
+      if (!node) return;
+      const zoneCompound = `${node.parentId}:${node.zone}`;
+      const index = store.state.indexes.zones[zoneCompound].contentIds.indexOf(id);
+      return { zone: zoneCompound, index };
+    }
   };
   const get = () => storeData;
   return __spreadProps(__spreadValues({}, storeData), { get });
@@ -7637,23 +7905,25 @@ var generateUsePuck = (store) => {
 var UsePuckStoreContext = createContext6(
   null
 );
+var convertToPickedStore = (store) => {
+  return {
+    state: store.state,
+    config: store.config,
+    dispatch: store.dispatch,
+    permissions: store.permissions,
+    history: store.history,
+    selectedItem: store.selectedItem
+  };
+};
 var useRegisterUsePuckStore = (appStore) => {
   const [usePuckStore] = useState21(
-    () => createStore4(() => generateUsePuck(appStore.getState()))
+    () => createStore4(
+      () => generateUsePuck(convertToPickedStore(appStore.getState()))
+    )
   );
-  useEffect24(() => {
+  useEffect23(() => {
     return appStore.subscribe(
-      (store) => {
-        const pickedStore = {
-          state: store.state,
-          config: store.config,
-          dispatch: store.dispatch,
-          permissions: store.permissions,
-          history: store.history,
-          selectedItem: store.selectedItem
-        };
-        return pickedStore;
-      },
+      (store) => convertToPickedStore(store),
       (pickedStore) => {
         usePuckStore.setState(generateUsePuck(pickedStore));
       }
@@ -7675,7 +7945,7 @@ function createUsePuck() {
   };
 }
 function usePuck() {
-  useEffect24(() => {
+  useEffect23(() => {
     console.warn(
       "You're using the `usePuck` method without a selector, which may cause unnecessary re-renders. Replace with `createUsePuck` and provide a selector for improved performance."
     );
@@ -7684,7 +7954,7 @@ function usePuck() {
 }
 
 // components/Puck/index.tsx
-import { Fragment as Fragment15, jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx39, jsxs as jsxs19 } from "react/jsx-runtime";
 var getClassName27 = get_class_name_factory_default("Puck", styles_module_default15);
 var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_module_default15);
 var FieldSideBar = () => {
@@ -7694,11 +7964,11 @@ var FieldSideBar = () => {
       return s.selectedItem ? (_b = (_a = s.config.components[s.selectedItem.type]) == null ? void 0 : _a["label"]) != null ? _b : s.selectedItem.type.toString() : "Page";
     }
   );
-  return /* @__PURE__ */ jsx38(SidebarSection, { noPadding: true, noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx38(Fields, {}) });
+  return /* @__PURE__ */ jsx39(SidebarSection, { noPadding: true, noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx39(Fields, {}) });
 };
 var propsContext = createContext7({});
 function PropsProvider(props) {
-  return /* @__PURE__ */ jsx38(propsContext.Provider, { value: props, children: props.children });
+  return /* @__PURE__ */ jsx39(propsContext.Provider, { value: props, children: props.children });
 }
 var usePropsContext = () => useContext11(propsContext);
 function PuckProvider({ children }) {
@@ -7755,7 +8025,7 @@ 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);
-    return __spreadProps(__spreadValues({}, defaultAppState), {
+    const newAppState = __spreadProps(__spreadValues({}, defaultAppState), {
       data: __spreadProps(__spreadValues({}, initialData), {
         root: __spreadProps(__spreadValues({}, initialData == null ? void 0 : initialData.root), { props: defaultedRootProps }),
         content: initialData.content || []
@@ -7777,73 +8047,77 @@ function PuckProvider({ children }) {
         ) : {}
       })
     });
+    return walkAppState(newAppState, config);
   });
   const { appendData = true } = _initialHistory || {};
-  const blendedHistories = [
-    ...(_initialHistory == null ? void 0 : _initialHistory.histories) || [],
-    ...appendData ? [{ state: generatedAppState }] : []
-  ].map((history) => __spreadProps(__spreadValues({}, history), {
-    // Inject default data to enable partial history injections
-    state: __spreadValues(__spreadValues({}, generatedAppState), history.state)
-  }));
+  const [blendedHistories] = useState22(
+    [
+      ...(_initialHistory == null ? void 0 : _initialHistory.histories) || [],
+      ...appendData ? [{ state: generatedAppState }] : []
+    ].map((history) => {
+      let newState = __spreadValues(__spreadValues({}, generatedAppState), history.state);
+      if (!history.state.indexes) {
+        newState = walkAppState(newState, config);
+      }
+      return __spreadProps(__spreadValues({}, history), {
+        state: newState
+      });
+    })
+  );
   const initialHistoryIndex = (_initialHistory == null ? void 0 : _initialHistory.index) || blendedHistories.length - 1;
   const initialAppState = blendedHistories[initialHistoryIndex].state;
   const loadedOverrides = useLoadedOverrides({
     overrides,
     plugins
   });
-  const generateAppStore = useCallback16(() => {
-    return {
-      state: initialAppState,
+  const generateAppStore = useCallback16(
+    (state) => {
+      return {
+        state,
+        config,
+        plugins: plugins || [],
+        overrides: loadedOverrides,
+        viewports,
+        iframe,
+        onAction,
+        metadata
+      };
+    },
+    [
+      initialAppState,
       config,
-      plugins: plugins || [],
-      overrides: loadedOverrides,
+      plugins,
+      loadedOverrides,
       viewports,
       iframe,
       onAction,
       metadata
-    };
-  }, [
-    initialAppState,
-    config,
-    plugins,
-    loadedOverrides,
-    viewports,
-    iframe,
-    onAction,
-    metadata
-  ]);
-  const [appStore] = useState22(() => createAppStore(generateAppStore()));
-  useEffect25(() => {
-    appStore.setState(__spreadValues({}, generateAppStore()));
-  }, [
-    initialAppState,
-    config,
-    plugins,
-    loadedOverrides,
-    viewports,
-    iframe,
-    onAction,
-    metadata
-  ]);
+    ]
+  );
+  const [appStore] = useState22(
+    () => createAppStore(generateAppStore(initialAppState))
+  );
+  useEffect24(() => {
+    const state = appStore.getState().state;
+    appStore.setState(__spreadValues({}, generateAppStore(state)));
+  }, [config, plugins, loadedOverrides, viewports, iframe, onAction, metadata]);
   useRegisterHistorySlice(appStore, {
     histories: blendedHistories,
     index: initialHistoryIndex,
     initialAppState
   });
-  useEffect25(() => {
+  useEffect24(() => {
     appStore.subscribe((s) => {
       if (onChange) onChange(s.state.data);
     });
   }, []);
-  useRegisterNodesSlice(appStore);
   useRegisterPermissionsSlice(appStore, permissions);
   const uPuckStore = useRegisterUsePuckStore(appStore);
-  useEffect25(() => {
-    const { state, resolveData: resolveData2 } = appStore.getState();
-    resolveData2(state);
+  useEffect24(() => {
+    const { resolveAndCommitData } = appStore.getState();
+    resolveAndCommitData();
   }, []);
-  return /* @__PURE__ */ jsx38(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx38(UsePuckStoreContext.Provider, { value: uPuckStore, children }) });
+  return /* @__PURE__ */ jsx39(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx39(UsePuckStoreContext.Provider, { value: uPuckStore, children }) });
 }
 function PuckLayout({ children }) {
   const {
@@ -7868,7 +8142,7 @@ function PuckLayout({ children }) {
   );
   const [menuOpen, setMenuOpen] = useState22(false);
   const appStore = useAppStoreApi();
-  useEffect25(() => {
+  useEffect24(() => {
     return appStore.subscribe((s) => {
       if (onChange) onChange(s.state.data);
     });
@@ -7891,7 +8165,7 @@ function PuckLayout({ children }) {
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  useEffect25(() => {
+  useEffect24(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -7914,7 +8188,7 @@ function PuckLayout({ children }) {
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  const defaultHeaderRender = useMemo18(() => {
+  const defaultHeaderRender = useMemo20(() => {
     if (renderHeader) {
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
@@ -7923,13 +8197,13 @@ function PuckLayout({ children }) {
         var _b = _a, { actions } = _b, props = __objRest(_b, ["actions"]);
         const Comp = renderHeader;
         const appState = useAppStore((s) => s.state);
-        return /* @__PURE__ */ jsx38(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
+        return /* @__PURE__ */ jsx39(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
       };
       return RenderHeader;
     }
     return DefaultOverride;
   }, [renderHeader]);
-  const defaultHeaderActionsRender = useMemo18(() => {
+  const defaultHeaderActionsRender = useMemo20(() => {
     if (renderHeaderActions) {
       console.warn(
         "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
@@ -7937,32 +8211,32 @@ function PuckLayout({ children }) {
       const RenderHeader = (props) => {
         const Comp = renderHeaderActions;
         const appState = useAppStore((s) => s.state);
-        return /* @__PURE__ */ jsx38(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
+        return /* @__PURE__ */ jsx39(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
       };
       return RenderHeader;
     }
     return DefaultOverride;
   }, [renderHeader]);
   const overrides = useAppStore((s) => s.overrides);
-  const CustomPuck = useMemo18(
+  const CustomPuck = useMemo20(
     () => overrides.puck || DefaultOverride,
     [overrides]
   );
-  const CustomHeader = useMemo18(
+  const CustomHeader = useMemo20(
     () => overrides.header || defaultHeaderRender,
     [overrides]
   );
-  const CustomHeaderActions = useMemo18(
+  const CustomHeaderActions = useMemo20(
     () => overrides.headerActions || defaultHeaderActionsRender,
     [overrides]
   );
   const [mounted, setMounted] = useState22(false);
-  useEffect25(() => {
+  useEffect24(() => {
     setMounted(true);
   }, []);
   const ready = useAppStore((s) => s.status === "READY");
   useMonitorHotkeys();
-  useEffect25(() => {
+  useEffect24(() => {
     if (ready && iframe.enabled) {
       const frameDoc = getFrame();
       if (frameDoc) {
@@ -7971,8 +8245,8 @@ function PuckLayout({ children }) {
     }
   }, [ready, iframe.enabled]);
   usePreviewModeHotkeys();
-  return /* @__PURE__ */ jsxs20("div", { className: `Puck ${getClassName27()}`, children: [
-    /* @__PURE__ */ jsx38(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx38(CustomPuck, { children: children || /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsxs19("div", { className: `Puck ${getClassName27()}`, children: [
+    /* @__PURE__ */ jsx39(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx39(CustomPuck, { children: children || /* @__PURE__ */ jsx39(
       "div",
       {
         className: getLayoutClassName({
@@ -7981,61 +8255,61 @@ function PuckLayout({ children }) {
           mounted,
           rightSideBarVisible
         }),
-        children: /* @__PURE__ */ jsxs20("div", { className: getLayoutClassName("inner"), children: [
-          /* @__PURE__ */ jsx38(
+        children: /* @__PURE__ */ jsxs19("div", { className: getLayoutClassName("inner"), children: [
+          /* @__PURE__ */ jsx39(
             CustomHeader,
             {
-              actions: /* @__PURE__ */ jsx38(Fragment15, { children: /* @__PURE__ */ jsx38(CustomHeaderActions, { children: /* @__PURE__ */ jsx38(
+              actions: /* @__PURE__ */ jsx39(Fragment14, { children: /* @__PURE__ */ jsx39(CustomHeaderActions, { children: /* @__PURE__ */ jsx39(
                 Button,
                 {
                   onClick: () => {
                     const data = appStore.getState().state.data;
                     onPublish && onPublish(data);
                   },
-                  icon: /* @__PURE__ */ jsx38(Globe, { size: "14px" }),
+                  icon: /* @__PURE__ */ jsx39(Globe, { size: "14px" }),
                   children: "Publish"
                 }
               ) }) }),
-              children: /* @__PURE__ */ jsx38("header", { className: getLayoutClassName("header"), children: /* @__PURE__ */ jsxs20("div", { className: getLayoutClassName("headerInner"), children: [
-                /* @__PURE__ */ jsxs20("div", { className: getLayoutClassName("headerToggle"), children: [
-                  /* @__PURE__ */ jsx38(
+              children: /* @__PURE__ */ jsx39("header", { className: getLayoutClassName("header"), children: /* @__PURE__ */ jsxs19("div", { className: getLayoutClassName("headerInner"), children: [
+                /* @__PURE__ */ jsxs19("div", { className: getLayoutClassName("headerToggle"), children: [
+                  /* @__PURE__ */ jsx39(
                     "div",
                     {
                       className: getLayoutClassName("leftSideBarToggle"),
-                      children: /* @__PURE__ */ jsx38(
+                      children: /* @__PURE__ */ jsx39(
                         IconButton,
                         {
                           onClick: () => {
                             toggleSidebars("left");
                           },
                           title: "Toggle left sidebar",
-                          children: /* @__PURE__ */ jsx38(PanelLeft, { focusable: "false" })
+                          children: /* @__PURE__ */ jsx39(PanelLeft, { focusable: "false" })
                         }
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsx38(
+                  /* @__PURE__ */ jsx39(
                     "div",
                     {
                       className: getLayoutClassName("rightSideBarToggle"),
-                      children: /* @__PURE__ */ jsx38(
+                      children: /* @__PURE__ */ jsx39(
                         IconButton,
                         {
                           onClick: () => {
                             toggleSidebars("right");
                           },
                           title: "Toggle right sidebar",
-                          children: /* @__PURE__ */ jsx38(PanelRight, { focusable: "false" })
+                          children: /* @__PURE__ */ jsx39(PanelRight, { focusable: "false" })
                         }
                       )
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx38("div", { className: getLayoutClassName("headerTitle"), children: /* @__PURE__ */ jsxs20(Heading, { rank: "2", size: "xs", children: [
+                /* @__PURE__ */ jsx39("div", { className: getLayoutClassName("headerTitle"), children: /* @__PURE__ */ jsxs19(Heading, { rank: "2", size: "xs", children: [
                   headerTitle || (rootProps == null ? void 0 : rootProps.title) || "Page",
-                  headerPath && /* @__PURE__ */ jsxs20(Fragment15, { children: [
+                  headerPath && /* @__PURE__ */ jsxs19(Fragment14, { children: [
                     " ",
-                    /* @__PURE__ */ jsx38(
+                    /* @__PURE__ */ jsx39(
                       "code",
                       {
                         className: getLayoutClassName("headerPath"),
@@ -8044,31 +8318,31 @@ function PuckLayout({ children }) {
                     )
                   ] })
                 ] }) }),
-                /* @__PURE__ */ jsxs20("div", { className: getLayoutClassName("headerTools"), children: [
-                  /* @__PURE__ */ jsx38("div", { className: getLayoutClassName("menuButton"), children: /* @__PURE__ */ jsx38(
+                /* @__PURE__ */ jsxs19("div", { className: getLayoutClassName("headerTools"), children: [
+                  /* @__PURE__ */ jsx39("div", { className: getLayoutClassName("menuButton"), children: /* @__PURE__ */ jsx39(
                     IconButton,
                     {
                       onClick: () => {
                         return setMenuOpen(!menuOpen);
                       },
                       title: "Toggle menu bar",
-                      children: menuOpen ? /* @__PURE__ */ jsx38(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx38(ChevronDown, { focusable: "false" })
+                      children: menuOpen ? /* @__PURE__ */ jsx39(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx39(ChevronDown, { focusable: "false" })
                     }
                   ) }),
-                  /* @__PURE__ */ jsx38(
+                  /* @__PURE__ */ jsx39(
                     MenuBar,
                     {
                       dispatch,
                       onPublish,
                       menuOpen,
-                      renderHeaderActions: () => /* @__PURE__ */ jsx38(CustomHeaderActions, { children: /* @__PURE__ */ jsx38(
+                      renderHeaderActions: () => /* @__PURE__ */ jsx39(CustomHeaderActions, { children: /* @__PURE__ */ jsx39(
                         Button,
                         {
                           onClick: () => {
                             const data = appStore.getState().state.data;
                             onPublish && onPublish(data);
                           },
-                          icon: /* @__PURE__ */ jsx38(Globe, { size: "14px" }),
+                          icon: /* @__PURE__ */ jsx39(Globe, { size: "14px" }),
                           children: "Publish"
                         }
                       ) }),
@@ -8079,20 +8353,20 @@ function PuckLayout({ children }) {
               ] }) })
             }
           ),
-          /* @__PURE__ */ jsxs20("div", { className: getLayoutClassName("leftSideBar"), children: [
-            /* @__PURE__ */ jsx38(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx38(Components, {}) }),
-            /* @__PURE__ */ jsx38(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx38(Outline, {}) })
+          /* @__PURE__ */ jsxs19("div", { className: getLayoutClassName("leftSideBar"), children: [
+            /* @__PURE__ */ jsx39(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx39(Components, {}) }),
+            /* @__PURE__ */ jsx39(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx39(Outline, {}) })
           ] }),
-          /* @__PURE__ */ jsx38(Canvas, {}),
-          /* @__PURE__ */ jsx38("div", { className: getLayoutClassName("rightSideBar"), children: /* @__PURE__ */ jsx38(FieldSideBar, {}) })
+          /* @__PURE__ */ jsx39(Canvas, {}),
+          /* @__PURE__ */ jsx39("div", { className: getLayoutClassName("rightSideBar"), children: /* @__PURE__ */ jsx39(FieldSideBar, {}) })
         ] })
       }
     ) }) }),
-    /* @__PURE__ */ jsx38("div", { id: "puck-portal-root", className: getClassName27("portal") })
+    /* @__PURE__ */ jsx39("div", { id: "puck-portal-root", className: getClassName27("portal") })
   ] });
 }
 function Puck(props) {
-  return /* @__PURE__ */ jsx38(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx38(PuckProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx38(PuckLayout, __spreadValues({}, props)) })) }));
+  return /* @__PURE__ */ jsx39(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx39(PuckProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx39(PuckLayout, __spreadValues({}, props)) })) }));
 }
 Puck.Components = Components;
 Puck.Fields = Fields;
@@ -8116,10 +8390,67 @@ var migrations = [
       });
     }
     return data;
+  },
+  // Migrate zones to slots
+  (data, config) => {
+    var _a;
+    if (!config) return data;
+    console.log("Migrating DropZones to slots...");
+    const updatedItems = {};
+    const appState = __spreadProps(__spreadValues({}, defaultAppState), { data });
+    const { indexes } = walkAppState(appState, config);
+    const deletedCompounds = [];
+    walkAppState(appState, config, (content, zoneCompound, zoneType) => {
+      var _a2, _b;
+      if (zoneType === "dropzone") {
+        const [id, slotName] = zoneCompound.split(":");
+        const nodeData = indexes.nodes[id].data;
+        const componentType = nodeData.type;
+        const configForComponent = config.components[componentType];
+        if (((_b = (_a2 = configForComponent == null ? void 0 : configForComponent.fields) == null ? void 0 : _a2[slotName]) == null ? void 0 : _b.type) === "slot") {
+          updatedItems[id] = __spreadProps(__spreadValues({}, nodeData), {
+            props: __spreadProps(__spreadValues({}, nodeData.props), {
+              [slotName]: content
+            })
+          });
+          deletedCompounds.push(zoneCompound);
+        }
+        return content;
+      }
+      return content;
+    });
+    const updated = walkAppState(
+      appState,
+      config,
+      (content) => content,
+      (item) => {
+        var _a2;
+        return (_a2 = updatedItems[item.props.id]) != null ? _a2 : item;
+      }
+    );
+    deletedCompounds.forEach((zoneCompound) => {
+      var _a2;
+      const [_, propName] = zoneCompound.split(":");
+      console.log(
+        `\u2713 Success: Migrated "${zoneCompound}" from DropZone to slot field "${propName}"`
+      );
+      (_a2 = updated.data.zones) == null ? true : delete _a2[zoneCompound];
+    });
+    Object.keys((_a = updated.data.zones) != null ? _a : {}).forEach((zoneCompound) => {
+      const [_, propName] = zoneCompound.split(":");
+      throw new Error(
+        `Could not migrate DropZone "${zoneCompound}" to slot field. No slot exists with the name "${propName}".`
+      );
+    });
+    delete updated.data.zones;
+    return updated.data;
   }
 ];
-function migrate(data) {
-  return migrations == null ? void 0 : migrations.reduce((acc, migration) => migration(acc), data);
+function migrate(data, config) {
+  return migrations == null ? void 0 : migrations.reduce(
+    (acc, migration) => migration(acc, config),
+    data
+  );
 }
 export {
   Action,
@@ -8140,7 +8471,8 @@ export {
   renderContext,
   resolveAllData,
   transformProps,
-  usePuck
+  usePuck,
+  walkTree
 };
 /*! Bundled license information: