@measured/puck 0.19.4-canary.fde74e8a → 0.20.0-canary.167a8f71

package/dist/index.js

@@ -153,9 +153,9 @@ var require_classnames = __commonJS({
   }
 });
 
-// index.ts
-var core_exports = {};
-__export(core_exports, {
+// bundle/index.ts
+var bundle_exports = {};
+__export(bundle_exports, {
   Action: () => Action,
   ActionBar: () => ActionBar,
   AutoField: () => AutoField,
@@ -167,7 +167,7 @@ __export(core_exports, {
   IconButton: () => IconButton,
   Label: () => Label,
   Puck: () => Puck,
-  Render: () => Render2,
+  Render: () => Render,
   createUsePuck: () => createUsePuck,
   migrate: () => migrate,
   overrideKeys: () => overrideKeys,
@@ -178,7 +178,10 @@ __export(core_exports, {
   usePuck: () => usePuck,
   walkTree: () => walkTree
 });
-module.exports = __toCommonJS(core_exports);
+module.exports = __toCommonJS(bundle_exports);
+init_react_import();
+
+// bundle/core.ts
 init_react_import();
 
 // types/API/index.ts
@@ -306,7 +309,7 @@ init_react_import();
 var styles_module_default2 = { "InputWrapper": "_InputWrapper_py9hf_1", "Input-label": "_Input-label_py9hf_5", "Input-labelIcon": "_Input-labelIcon_py9hf_14", "Input-disabledIcon": "_Input-disabledIcon_py9hf_21", "Input-input": "_Input-input_py9hf_26", "Input": "_Input_py9hf_1", "Input--readOnly": "_Input--readOnly_py9hf_76", "Input-radioGroupItems": "_Input-radioGroupItems_py9hf_87", "Input-radio": "_Input-radio_py9hf_87", "Input-radioInner": "_Input-radioInner_py9hf_104", "Input-radioInput": "_Input-radioInput_py9hf_149" };
 
 // components/AutoField/index.tsx
-var import_react24 = require("react");
+var import_react20 = require("react");
 
 // components/AutoField/fields/index.tsx
 init_react_import();
@@ -766,7 +769,7 @@ var IconButton = ({
 };
 
 // components/AutoField/fields/ArrayField/index.tsx
-var import_react16 = require("react");
+var import_react14 = require("react");
 
 // components/DragIcon/index.tsx
 init_react_import();
@@ -1253,585 +1256,149 @@ function insertAction(state, action, appStore) {
 
 // reducer/actions/replace.ts
 init_react_import();
-
-// rsc.tsx
-init_react_import();
-
-// components/ServerRender/index.tsx
-init_react_import();
-
-// lib/data/setup-zone.ts
-init_react_import();
-var setupZone = (data, zoneKey) => {
-  if (zoneKey === rootDroppableId) {
-    return data;
+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 newData = __spreadProps(__spreadValues({}, data), {
-    zones: data.zones ? __spreadValues({}, data.zones) : {}
+  const newSlotIds = [];
+  const data = walkTree(action.data, appStore.config, (contents, opts) => {
+    newSlotIds.push(`${opts.parentId}:${opts.propName}`);
+    return contents.map((item) => {
+      const id = generateId(item.type);
+      return __spreadProps(__spreadValues({}, item), {
+        props: __spreadValues({ id }, item.props)
+      });
+    });
   });
-  newData.zones[zoneKey] = newData.zones[zoneKey] || [];
-  return newData;
+  const stateWithDeepSlotsRemoved = __spreadValues({}, state);
+  Object.keys(state.indexes.zones).forEach((zoneCompound) => {
+    const id = zoneCompound.split(":")[0];
+    if (id === originalId) {
+      if (!newSlotIds.includes(zoneCompound)) {
+        delete stateWithDeepSlotsRemoved.indexes.zones[zoneCompound];
+      }
+    }
+  });
+  return walkAppState(
+    stateWithDeepSlotsRemoved,
+    appStore.config,
+    (content, zoneCompound) => {
+      const newContent = [...content];
+      if (zoneCompound === action.destinationZone) {
+        newContent[action.destinationIndex] = data;
+      }
+      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;
+    }
+  );
 };
 
-// lib/use-slots.tsx
+// reducer/actions/replace-root.ts
 init_react_import();
-var import_react5 = require("react");
-function useSlots(config, item, renderSlotEdit, renderSlotRender = renderSlotEdit, readOnly, forceReadOnly) {
-  const slotProps = (0, import_react5.useMemo)(() => {
-    const mapped = mapSlots(
-      item,
-      (content, _parentId, propName, field, propPath) => {
-        const wildcardPath = propPath.replace(/\[\d+\]/g, "[*]");
-        const isReadOnly = (readOnly == null ? void 0 : readOnly[propPath]) || (readOnly == null ? void 0 : readOnly[wildcardPath]) || forceReadOnly;
-        const render = isReadOnly ? renderSlotRender : renderSlotEdit;
-        const Slot = (dzProps) => render(__spreadProps(__spreadValues({
-          allow: (field == null ? void 0 : field.type) === "slot" ? field.allow : [],
-          disallow: (field == null ? void 0 : field.type) === "slot" ? field.disallow : []
-        }, dzProps), {
-          zone: propName,
-          content
-        }));
-        return Slot;
-      },
-      config
-    ).props;
-    return mapped;
-  }, [config, item, readOnly, forceReadOnly]);
-  const mergedProps = (0, import_react5.useMemo)(
-    () => __spreadValues(__spreadValues({}, item.props), slotProps),
-    [item.props, slotProps]
+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 childItem;
+    }
   );
-  return mergedProps;
-}
+};
 
-// components/SlotRender/server.tsx
+// reducer/actions/duplicate.ts
 init_react_import();
-var import_react6 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var SlotRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SlotRender, __spreadValues({}, props));
-var Item = ({
-  config,
-  item,
-  metadata
-}) => {
-  const Component = config.components[item.type];
-  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    Component.render,
-    __spreadProps(__spreadValues({}, props), {
-      puck: __spreadProps(__spreadValues({}, props.puck), {
-        renderDropZone: DropZoneRender,
-        metadata: metadata || {}
-      })
-    })
+
+// 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/actions/duplicate.ts
+function duplicateAction(state, action, appStore) {
+  const item = getItem(
+    { index: action.sourceIndex, zone: action.sourceZone },
+    state
   );
-};
-var SlotRender = (0, import_react6.forwardRef)(
-  function SlotRenderInternal({ className, style, content, config, metadata }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, style, ref, children: content.map((item) => {
-      if (!config.components[item.type]) {
-        return null;
+  const idsInPath = getIdsForParent(action.sourceZone, state);
+  const newItem = __spreadProps(__spreadValues({}, item), {
+    props: __spreadProps(__spreadValues({}, item.props), {
+      id: generateId(item.type)
+    })
+  });
+  const modified = walkAppState(
+    state,
+    appStore.config,
+    (content, zoneCompound) => {
+      if (zoneCompound === action.sourceZone) {
+        return insert(content, action.sourceIndex + 1, item);
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Item,
-        {
-          config,
-          item,
-          metadata
-        },
-        item.props.id
-      );
-    }) });
-  }
-);
-
-// components/ServerRender/index.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-function DropZoneRender({
-  zone,
-  data,
-  areaId = "root",
-  config,
-  metadata = {}
-}) {
-  let zoneCompound = rootDroppableId;
-  let content = (data == null ? void 0 : data.content) || [];
-  if (!data || !config) {
-    return null;
-  }
-  if (areaId !== rootAreaId && zone !== rootZone) {
-    zoneCompound = `${areaId}:${zone}`;
-    content = setupZone(data, zoneCompound).zones[zoneCompound];
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: content.map((item) => {
-    const Component = config.components[item.type];
-    const props = __spreadProps(__spreadValues({}, item.props), {
-      puck: {
-        renderDropZone: ({ zone: zone2 }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          DropZoneRender,
-          {
-            zone: zone2,
-            data,
-            areaId: item.props.id,
-            config,
-            metadata
-          }
-        ),
-        metadata,
-        dragRef: null,
-        isEditing: false
+      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)
+          })
+        });
       }
-    });
-    const renderItem = __spreadProps(__spreadValues({}, item), { props });
-    const propsWithSlots = useSlots(config, renderItem, (props2) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, props2), { config, metadata })));
-    if (Component) {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Component.render, __spreadValues({}, propsWithSlots), renderItem.props.id);
+      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 null;
-  }) });
+  );
+  return __spreadProps(__spreadValues({}, modified), {
+    ui: __spreadProps(__spreadValues({}, modified.ui), {
+      itemSelector: {
+        index: action.sourceIndex + 1,
+        zone: action.sourceZone
+      }
+    })
+  });
 }
 
-// lib/resolve-all-data.ts
+// reducer/actions/reorder.ts
 init_react_import();
 
-// lib/resolve-component-data.ts
+// reducer/actions/move.ts
 init_react_import();
 
-// lib/get-changed.ts
-init_react_import();
-var import_fast_deep_equal = __toESM(require("fast-deep-equal"));
-var getChanged = (newItem, oldItem) => {
-  return newItem ? Object.keys(newItem.props || {}).reduce((acc, item) => {
-    const newItemProps = (newItem == null ? void 0 : newItem.props) || {};
-    const oldItemProps = (oldItem == null ? void 0 : oldItem.props) || {};
-    return __spreadProps(__spreadValues({}, acc), {
-      [item]: !(0, import_fast_deep_equal.default)(oldItemProps[item], newItemProps[item])
-    });
-  }, {}) : {};
-};
-
-// lib/resolve-component-data.ts
-var import_fast_deep_equal2 = __toESM(require("fast-deep-equal"));
-var cache = { lastChange: {} };
-var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], function* (item, config, metadata = {}, onResolveStart, onResolveEnd, trigger = "replace") {
-  const configForItem = "type" in item && item.type !== "root" ? config.components[item.type] : config.root;
-  const resolvedItem = __spreadValues({}, item);
-  const shouldRunResolver = (configForItem == null ? void 0 : configForItem.resolveData) && item.props;
-  const id = "id" in item.props ? item.props.id : "root";
-  if (shouldRunResolver) {
-    const { item: oldItem = null, resolved = {} } = cache.lastChange[id] || {};
-    if (item && (0, import_fast_deep_equal2.default)(item, oldItem)) {
-      return { node: resolved, didChange: false };
-    }
-    const changed = getChanged(item, oldItem);
-    if (onResolveStart) {
-      onResolveStart(item);
-    }
-    const { props: resolvedProps, readOnly = {} } = yield configForItem.resolveData(item, {
-      changed,
-      lastData: oldItem,
-      metadata: __spreadValues(__spreadValues({}, metadata), configForItem.metadata),
-      trigger
-    });
-    resolvedItem.props = __spreadValues(__spreadValues({}, item.props), resolvedProps);
-    if (Object.keys(readOnly).length) {
-      resolvedItem.readOnly = readOnly;
-    }
-  }
-  let itemWithResolvedChildren = yield mapSlots(
-    resolvedItem,
-    (content) => __async(void 0, null, function* () {
-      return yield Promise.all(
-        content.map(
-          (childItem) => __async(void 0, null, function* () {
-            return (yield resolveComponentData(
-              childItem,
-              config,
-              metadata,
-              onResolveStart,
-              onResolveEnd,
-              trigger
-            )).node;
-          })
-        )
-      );
-    }),
-    config
-  );
-  if (shouldRunResolver && onResolveEnd) {
-    onResolveEnd(resolvedItem);
-  }
-  cache.lastChange[id] = {
-    item,
-    resolved: itemWithResolvedChildren
-  };
-  return {
-    node: itemWithResolvedChildren,
-    didChange: !(0, import_fast_deep_equal2.default)(item, itemWithResolvedChildren)
-  };
-});
-
-// lib/data/default-data.ts
-init_react_import();
-var defaultData = (data) => __spreadProps(__spreadValues({}, data), {
-  root: data.root || {},
-  content: data.content || []
-});
-
-// lib/data/to-component.ts
-init_react_import();
-var toComponent = (item) => {
-  return "type" in item ? item : __spreadProps(__spreadValues({}, item), {
-    props: __spreadProps(__spreadValues({}, item.props), { id: "root" }),
-    type: "root"
-  });
-};
-
-// lib/resolve-all-data.ts
-function resolveAllData(_0, _1) {
-  return __async(this, arguments, function* (data, config, metadata = {}, onResolveStart, onResolveEnd) {
-    var _a;
-    const defaultedData = defaultData(data);
-    const resolveNode = (_node) => __async(this, null, function* () {
-      const node = toComponent(_node);
-      onResolveStart == null ? void 0 : onResolveStart(node);
-      const resolved = (yield resolveComponentData(
-        node,
-        config,
-        metadata,
-        () => {
-        },
-        () => {
-        },
-        "force"
-      )).node;
-      const resolvedDeep = yield mapSlots(
-        resolved,
-        processContent,
-        config
-      );
-      onResolveEnd == null ? void 0 : onResolveEnd(toComponent(resolvedDeep));
-      return resolvedDeep;
-    });
-    const processContent = (content) => __async(this, null, function* () {
-      return Promise.all(content.map(resolveNode));
-    });
-    const processZones = () => __async(this, null, function* () {
-      var _a2;
-      const zones = (_a2 = data.zones) != null ? _a2 : {};
-      Object.entries(zones).forEach((_02) => __async(this, [_02], function* ([zoneKey, content]) {
-        zones[zoneKey] = yield Promise.all(content.map(resolveNode));
-      }));
-      return zones;
-    });
-    const dynamic = {
-      root: yield resolveNode(defaultedData.root),
-      content: yield processContent(defaultedData.content),
-      zones: yield processZones()
-    };
-    Object.keys((_a = defaultedData.zones) != null ? _a : {}).forEach((zoneKey) => __async(this, null, function* () {
-      const content = defaultedData.zones[zoneKey];
-      dynamic.zones[zoneKey] = yield processContent(content);
-    }), {});
-    return dynamic;
-  });
-}
-
-// lib/transform-props.ts
-init_react_import();
-function transformProps(data, propTransforms, config = { components: {} }) {
-  const mapItem = (item) => {
-    if (propTransforms[item.type]) {
-      return __spreadProps(__spreadValues({}, item), {
-        props: __spreadValues({
-          id: item.props.id
-        }, propTransforms[item.type](item.props))
-      });
-    }
-    return item;
-  };
-  const defaultedData = defaultData(data);
-  const rootProps = defaultedData.root.props || defaultedData.root;
-  let newRoot = __spreadValues({}, defaultedData.root);
-  if (propTransforms["root"]) {
-    newRoot.props = propTransforms["root"](rootProps);
-  }
-  const dataWithUpdatedRoot = __spreadProps(__spreadValues({}, defaultedData), { root: newRoot });
-  const updatedData = walkTree(
-    dataWithUpdatedRoot,
-    config,
-    (content) => content.map(mapItem)
-  );
-  if (!defaultedData.root.props) {
-    updatedData.root = updatedData.root.props;
-  }
-  return updatedData;
-}
-
-// lib/migrate.ts
-init_react_import();
-
-// store/default-app-state.ts
-init_react_import();
-
-// components/ViewportControls/default-viewports.ts
-init_react_import();
-var defaultViewports = [
-  { width: 360, height: "auto", icon: "Smartphone", label: "Small" },
-  { width: 768, height: "auto", icon: "Tablet", label: "Medium" },
-  { width: 1280, height: "auto", icon: "Monitor", label: "Large" }
-];
-
-// store/default-app-state.ts
-var defaultAppState = {
-  data: { content: [], root: {}, zones: {} },
-  ui: {
-    leftSideBarVisible: true,
-    rightSideBarVisible: true,
-    arrayState: {},
-    itemSelector: null,
-    componentList: {},
-    isDragging: false,
-    previewMode: "edit",
-    viewports: {
-      current: {
-        width: defaultViewports[0].width,
-        height: defaultViewports[0].height || "auto"
-      },
-      options: [],
-      controlsVisible: true
-    },
-    field: { focus: null }
-  },
-  indexes: {
-    nodes: {},
-    zones: {}
-  }
-};
-
-// lib/migrate.ts
-var migrations = [
-  // Migrate root to root.props
-  (data) => {
-    const rootProps = data.root.props || data.root;
-    if (Object.keys(data.root).length > 0 && !data.root.props) {
-      console.warn(
-        "Migration applied: Root props moved from `root` to `root.props`."
-      );
-      return __spreadProps(__spreadValues({}, data), {
-        root: {
-          props: __spreadValues({}, rootProps)
-        }
-      });
-    }
-    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, _c;
-      if (zoneType === "dropzone") {
-        const [id, slotName] = zoneCompound.split(":");
-        const nodeData = indexes.nodes[id].data;
-        const componentType = nodeData.type;
-        const configForComponent = id === "root" ? config.root : 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(__spreadValues({}, nodeData.props), (_c = updatedItems[id]) == null ? void 0 : _c.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, config) {
-  return migrations == null ? void 0 : migrations.reduce(
-    (acc, migration) => migration(acc, config),
-    data
-  );
-}
-
-// reducer/actions/replace.ts
-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 newSlotIds = [];
-  const data = walkTree(action.data, appStore.config, (contents, opts) => {
-    newSlotIds.push(`${opts.parentId}:${opts.propName}`);
-    return contents.map((item) => {
-      const id = generateId(item.type);
-      return __spreadProps(__spreadValues({}, item), {
-        props: __spreadValues({ id }, item.props)
-      });
-    });
-  });
-  const stateWithDeepSlotsRemoved = __spreadValues({}, state);
-  Object.keys(state.indexes.zones).forEach((zoneCompound) => {
-    const id = zoneCompound.split(":")[0];
-    if (id === originalId) {
-      if (!newSlotIds.includes(zoneCompound)) {
-        delete stateWithDeepSlotsRemoved.indexes.zones[zoneCompound];
-      }
-    }
-  });
-  return walkAppState(
-    stateWithDeepSlotsRemoved,
-    appStore.config,
-    (content, zoneCompound) => {
-      const newContent = [...content];
-      if (zoneCompound === action.destinationZone) {
-        newContent[action.destinationIndex] = data;
-      }
-      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;
-    }
-  );
-};
-
-// 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 childItem;
-    }
-  );
-};
-
-// 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/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)
-    })
-  });
-  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
-      }
-    })
-  });
-}
-
-// reducer/actions/reorder.ts
-init_react_import();
-
-// reducer/actions/move.ts
-init_react_import();
-
-// lib/data/remove.ts
+// lib/data/remove.ts
 init_react_import();
 var remove = (list, index) => {
   const result = Array.from(list);
@@ -1939,6 +1506,21 @@ var removeAction = (state, action, appStore) => {
 
 // reducer/actions/register-zone.ts
 init_react_import();
+
+// lib/data/setup-zone.ts
+init_react_import();
+var setupZone = (data, zoneKey) => {
+  if (zoneKey === rootDroppableId) {
+    return data;
+  }
+  const newData = __spreadProps(__spreadValues({}, data), {
+    zones: data.zones ? __spreadValues({}, data.zones) : {}
+  });
+  newData.zones[zoneKey] = newData.zones[zoneKey] || [];
+  return newData;
+};
+
+// reducer/actions/register-zone.ts
 var zoneCache = {};
 function registerZoneAction(state, action) {
   if (zoneCache[action.zone]) {
@@ -2091,18 +1673,26 @@ function createReducer({
   );
 }
 
+// components/ViewportControls/default-viewports.ts
+init_react_import();
+var defaultViewports = [
+  { width: 360, height: "auto", icon: "Smartphone", label: "Small" },
+  { width: 768, height: "auto", icon: "Tablet", label: "Medium" },
+  { width: 1280, height: "auto", icon: "Monitor", label: "Large" }
+];
+
 // store/index.ts
 var import_zustand2 = require("zustand");
 var import_middleware2 = require("zustand/middleware");
-var import_react11 = require("react");
+var import_react9 = require("react");
 
 // store/slices/history.ts
 init_react_import();
-var import_react8 = require("react");
+var import_react6 = require("react");
 
 // lib/use-hotkey.ts
 init_react_import();
-var import_react7 = require("react");
+var import_react5 = require("react");
 var import_zustand = require("zustand");
 var import_middleware = require("zustand/middleware");
 var keyCodeMap = {
@@ -2195,10 +1785,10 @@ var monitorHotkeys = (doc) => {
   };
 };
 var useMonitorHotkeys = () => {
-  (0, import_react7.useEffect)(() => monitorHotkeys(document), []);
+  (0, import_react5.useEffect)(() => monitorHotkeys(document), []);
 };
 var useHotkey = (combo, cb) => {
-  (0, import_react7.useEffect)(
+  (0, import_react5.useEffect)(
     () => useHotkeyStore.setState((s) => ({
       triggers: __spreadProps(__spreadValues({}, s.triggers), {
         [`${Object.keys(combo).join("+")}`]: { combo, cb }
@@ -2307,7 +1897,7 @@ function useRegisterHistorySlice(appStore, {
   index,
   initialAppState
 }) {
-  (0, import_react8.useEffect)(
+  (0, import_react6.useEffect)(
     () => appStore.setState({
       history: __spreadProps(__spreadValues({}, appStore.getState().history), {
         histories,
@@ -2374,7 +1964,7 @@ var createNodesSlice = (set, get) => ({
 
 // store/slices/permissions.ts
 init_react_import();
-var import_react9 = require("react");
+var import_react7 = require("react");
 
 // lib/data/flatten-data.ts
 init_react_import();
@@ -2392,6 +1982,19 @@ var flattenData = (state, config) => {
   return data;
 };
 
+// lib/get-changed.ts
+init_react_import();
+var import_fast_deep_equal = __toESM(require("fast-deep-equal"));
+var getChanged = (newItem, oldItem) => {
+  return newItem ? Object.keys(newItem.props || {}).reduce((acc, item) => {
+    const newItemProps = (newItem == null ? void 0 : newItem.props) || {};
+    const oldItemProps = (oldItem == null ? void 0 : oldItem.props) || {};
+    return __spreadProps(__spreadValues({}, acc), {
+      [item]: !(0, import_fast_deep_equal.default)(oldItemProps[item], newItemProps[item])
+    });
+  }, {}) : {};
+};
+
 // store/slices/permissions.ts
 var createPermissionsSlice = (set, get) => {
   const resolvePermissions = (..._0) => __async(void 0, [..._0], function* (params = {}, force) {
@@ -2498,7 +2101,7 @@ var createPermissionsSlice = (set, get) => {
   };
 };
 var useRegisterPermissionsSlice = (appStore, globalPermissions) => {
-  (0, import_react9.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const { permissions } = appStore.getState();
     const { globalPermissions: existingGlobalPermissions } = permissions;
     appStore.setState({
@@ -2508,7 +2111,7 @@ var useRegisterPermissionsSlice = (appStore, globalPermissions) => {
     });
     permissions.resolvePermissions();
   }, [globalPermissions]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     return appStore.subscribe(
       (s) => s.state.data,
       () => {
@@ -2516,7 +2119,7 @@ var useRegisterPermissionsSlice = (appStore, globalPermissions) => {
       }
     );
   }, []);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     return appStore.subscribe(
       (s) => s.config,
       () => {
@@ -2528,7 +2131,7 @@ var useRegisterPermissionsSlice = (appStore, globalPermissions) => {
 
 // store/slices/fields.ts
 init_react_import();
-var import_react10 = require("react");
+var import_react8 = require("react");
 var createFieldsSlice = (_set, _get) => {
   return {
     fields: {},
@@ -2538,7 +2141,7 @@ var createFieldsSlice = (_set, _get) => {
   };
 };
 var useRegisterFieldsSlice = (appStore, id) => {
-  const resolveFields = (0, import_react10.useCallback)(
+  const resolveFields = (0, import_react8.useCallback)(
     (reset) => __async(void 0, null, function* () {
       var _a, _b;
       const { fields, lastResolvedData } = appStore.getState().fields;
@@ -2595,7 +2198,7 @@ var useRegisterFieldsSlice = (appStore, id) => {
     }),
     [id]
   );
-  (0, import_react10.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     resolveFields(true);
     return appStore.subscribe(
       (s) => s.state.indexes.nodes[id || "root"],
@@ -2604,6 +2207,68 @@ var useRegisterFieldsSlice = (appStore, id) => {
   }, [id]);
 };
 
+// lib/resolve-component-data.ts
+init_react_import();
+var import_fast_deep_equal2 = __toESM(require("fast-deep-equal"));
+var cache = { lastChange: {} };
+var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], function* (item, config, metadata = {}, onResolveStart, onResolveEnd, trigger = "replace") {
+  const configForItem = "type" in item && item.type !== "root" ? config.components[item.type] : config.root;
+  const resolvedItem = __spreadValues({}, item);
+  const shouldRunResolver = (configForItem == null ? void 0 : configForItem.resolveData) && item.props;
+  const id = "id" in item.props ? item.props.id : "root";
+  if (shouldRunResolver) {
+    const { item: oldItem = null, resolved = {} } = cache.lastChange[id] || {};
+    if (item && (0, import_fast_deep_equal2.default)(item, oldItem)) {
+      return { node: resolved, didChange: false };
+    }
+    const changed = getChanged(item, oldItem);
+    if (onResolveStart) {
+      onResolveStart(item);
+    }
+    const { props: resolvedProps, readOnly = {} } = yield configForItem.resolveData(item, {
+      changed,
+      lastData: oldItem,
+      metadata: __spreadValues(__spreadValues({}, metadata), configForItem.metadata),
+      trigger
+    });
+    resolvedItem.props = __spreadValues(__spreadValues({}, item.props), resolvedProps);
+    if (Object.keys(readOnly).length) {
+      resolvedItem.readOnly = readOnly;
+    }
+  }
+  let itemWithResolvedChildren = yield mapSlots(
+    resolvedItem,
+    (content) => __async(void 0, null, function* () {
+      return yield Promise.all(
+        content.map(
+          (childItem) => __async(void 0, null, function* () {
+            return (yield resolveComponentData(
+              childItem,
+              config,
+              metadata,
+              onResolveStart,
+              onResolveEnd,
+              trigger
+            )).node;
+          })
+        )
+      );
+    }),
+    config
+  );
+  if (shouldRunResolver && onResolveEnd) {
+    onResolveEnd(resolvedItem);
+  }
+  cache.lastChange[id] = {
+    item,
+    resolved: itemWithResolvedChildren
+  };
+  return {
+    node: itemWithResolvedChildren,
+    didChange: !(0, import_fast_deep_equal2.default)(item, itemWithResolvedChildren)
+  };
+});
+
 // lib/data/to-root.ts
 init_react_import();
 var toRoot = (item) => {
@@ -2621,6 +2286,34 @@ var toRoot = (item) => {
   return { props: {}, readOnly };
 };
 
+// store/default-app-state.ts
+init_react_import();
+var defaultAppState = {
+  data: { content: [], root: {}, zones: {} },
+  ui: {
+    leftSideBarVisible: true,
+    rightSideBarVisible: true,
+    arrayState: {},
+    itemSelector: null,
+    componentList: {},
+    isDragging: false,
+    previewMode: "edit",
+    viewports: {
+      current: {
+        width: defaultViewports[0].width,
+        height: defaultViewports[0].height || "auto"
+      },
+      options: [],
+      controlsVisible: true
+    },
+    field: { focus: null }
+  },
+  indexes: {
+    nodes: {},
+    zones: {}
+  }
+};
+
 // store/index.ts
 var defaultPageFields = {
   title: { type: "text" }
@@ -2797,23 +2490,23 @@ var createAppStore = (initialAppStore) => (0, import_zustand2.create)()(
     });
   })
 );
-var appStoreContext = (0, import_react11.createContext)(createAppStore());
+var appStoreContext = (0, import_react9.createContext)(createAppStore());
 function useAppStore(selector) {
-  const context = (0, import_react11.useContext)(appStoreContext);
+  const context = (0, import_react9.useContext)(appStoreContext);
   return (0, import_zustand2.useStore)(context, selector);
 }
 function useAppStoreApi() {
-  return (0, import_react11.useContext)(appStoreContext);
+  return (0, import_react9.useContext)(appStoreContext);
 }
 
 // components/Sortable/index.tsx
 init_react_import();
-var import_react14 = require("@dnd-kit/react");
+var import_react12 = require("@dnd-kit/react");
 
 // lib/dnd/use-sensors.ts
 init_react_import();
-var import_react12 = require("react");
-var import_react13 = require("@dnd-kit/react");
+var import_react10 = require("react");
+var import_react11 = require("@dnd-kit/react");
 var import_utilities = require("@dnd-kit/dom/utilities");
 var touchDefault = { delay: { value: 200, tolerance: 10 } };
 var otherDefault = {
@@ -2828,8 +2521,8 @@ var useSensors = ({
   touch: touchDefault,
   other: otherDefault
 }) => {
-  const [sensors] = (0, import_react12.useState)(() => [
-    import_react13.PointerSensor.configure({
+  const [sensors] = (0, import_react10.useState)(() => [
+    import_react11.PointerSensor.configure({
       activationConstraints(event, source) {
         var _a;
         const { pointerType, target } = event;
@@ -3164,7 +2857,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
 
 // components/Sortable/index.tsx
 var import_sortable = require("@dnd-kit/react/sortable");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var SortableProvider = ({
   children,
   onDragStart,
@@ -3174,8 +2867,8 @@ var SortableProvider = ({
   const sensors = useSensors({
     mouse: { distance: { value: 5 } }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_react14.DragDropProvider,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_react12.DragDropProvider,
     {
       sensors,
       onDragStart: (event) => {
@@ -3239,11 +2932,11 @@ var Sortable = ({
 
 // components/AutoField/context.tsx
 init_react_import();
-var import_react15 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var NestedFieldContext = (0, import_react15.createContext)({});
+var import_react13 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var NestedFieldContext = (0, import_react13.createContext)({});
 var useNestedFieldContext = () => {
-  const context = (0, import_react15.useContext)(NestedFieldContext);
+  const context = (0, import_react13.useContext)(NestedFieldContext);
   return __spreadProps(__spreadValues({}, context), {
     readOnlyFields: context.readOnlyFields || {}
   });
@@ -3257,7 +2950,7 @@ var NestedFieldProvider = ({
 }) => {
   const subPath = `${name}.${subName}`;
   const wildcardSubPath = `${wildcardName}.${subName}`;
-  const subReadOnlyFields = (0, import_react15.useMemo)(
+  const subReadOnlyFields = (0, import_react13.useMemo)(
     () => Object.keys(readOnlyFields).reduce((acc, readOnlyKey) => {
       const isLocal = readOnlyKey.indexOf(subPath) > -1 || readOnlyKey.indexOf(wildcardSubPath) > -1;
       if (isLocal) {
@@ -3273,7 +2966,7 @@ var NestedFieldProvider = ({
     }, {}),
     [name, subName, wildcardName, readOnlyFields]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     NestedFieldContext.Provider,
     {
       value: { readOnlyFields: subReadOnlyFields, localName: subName },
@@ -3283,7 +2976,7 @@ var NestedFieldProvider = ({
 };
 
 // components/AutoField/fields/ArrayField/index.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var getClassName5 = get_class_name_factory_default("ArrayField", styles_module_default3);
 var getClassNameItem = get_class_name_factory_default("ArrayFieldItem", styles_module_default3);
 var ArrayField = ({
@@ -3295,7 +2988,7 @@ var ArrayField = ({
   labelIcon,
   readOnly,
   id,
-  Label: Label2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", __spreadValues({}, props))
+  Label: Label2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", __spreadValues({}, props))
 }) => {
   const thisArrayState = useAppStore((s) => s.state.ui.arrayState[id]);
   const setUi = useAppStore((s) => s.setUi);
@@ -3310,14 +3003,14 @@ var ArrayField = ({
     }),
     openId: ""
   };
-  const [localState, setLocalState] = (0, import_react16.useState)({ arrayState, value });
-  (0, import_react16.useEffect)(() => {
+  const [localState, setLocalState] = (0, import_react14.useState)({ arrayState, value });
+  (0, import_react14.useEffect)(() => {
     var _a;
     const _arrayState = (_a = appStore.getState().state.ui.arrayState[id]) != null ? _a : arrayState;
     setLocalState({ arrayState: _arrayState, value });
   }, [value]);
   const appStore = useAppStoreApi();
-  const mapArrayStateToUi = (0, import_react16.useCallback)(
+  const mapArrayStateToUi = (0, import_react14.useCallback)(
     (partialArrayState) => {
       const state = appStore.getState().state;
       return {
@@ -3328,13 +3021,13 @@ var ArrayField = ({
     },
     [arrayState, appStore]
   );
-  const getHighestIndex = (0, import_react16.useCallback)(() => {
+  const getHighestIndex = (0, import_react14.useCallback)(() => {
     return arrayState.items.reduce(
       (acc, item) => item._originalIndex > acc ? item._originalIndex : acc,
       -1
     );
   }, [arrayState]);
-  const regenerateArrayState = (0, import_react16.useCallback)(
+  const regenerateArrayState = (0, import_react14.useCallback)(
     (value2) => {
       let highestIndex = getHighestIndex();
       const newItems = Array.from(value2 || []).map((item, idx) => {
@@ -3353,19 +3046,19 @@ var ArrayField = ({
     },
     [arrayState]
   );
-  (0, import_react16.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (arrayState.items.length > 0) {
       setUi(mapArrayStateToUi(arrayState));
     }
   }, []);
-  const [draggedItem, setDraggedItem] = (0, import_react16.useState)("");
+  const [draggedItem, setDraggedItem] = (0, import_react14.useState)("");
   const isDraggingAny = !!draggedItem;
   const canEdit = useAppStore(
     (s) => s.permissions.getPermissions({ item: s.selectedItem }).edit
   );
   const forceReadOnly = !canEdit;
-  const valueRef = (0, import_react16.useRef)(value);
-  const uniqifyItem = (0, import_react16.useCallback)(
+  const valueRef = (0, import_react14.useRef)(value);
+  const uniqifyItem = (0, import_react14.useCallback)(
     (val) => {
       if (field.type !== "array" || !field.arrayFields) return;
       const config = appStore.getState().config;
@@ -3382,14 +3075,14 @@ var ArrayField = ({
     return null;
   }
   const addDisabled = field.max !== void 0 && localState.arrayState.items.length >= field.max || readOnly;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     Label2,
     {
       label: label || name,
-      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(List, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(List, { size: 16 }),
       el: "div",
       readOnly,
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         SortableProvider,
         {
           onDragStart: (id2) => setDraggedItem(id2),
@@ -3420,7 +3113,7 @@ var ArrayField = ({
             });
             valueRef.current = newValue;
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
             "div",
             {
               className: getClassName5({
@@ -3428,16 +3121,16 @@ var ArrayField = ({
                 addDisabled
               }),
               children: [
-                localState.arrayState.items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassName5("inner"), "data-dnd-container": true, children: localState.arrayState.items.map((item, i) => {
+                localState.arrayState.items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName5("inner"), "data-dnd-container": true, children: localState.arrayState.items.map((item, i) => {
                   const { _arrayId = `${id}-${i}`, _originalIndex = i } = item;
                   const data = Array.from(localState.value || [])[i] || {};
-                  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                     Sortable,
                     {
                       id: _arrayId,
                       index: i,
                       disabled: readOnly,
-                      children: ({ isDragging, ref, handleRef }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                      children: ({ isDragging, ref, handleRef }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                         "div",
                         {
                           ref,
@@ -3447,7 +3140,7 @@ var ArrayField = ({
                             readOnly
                           }),
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                               "div",
                               {
                                 ref: handleRef,
@@ -3472,9 +3165,9 @@ var ArrayField = ({
                                 className: getClassNameItem("summary"),
                                 children: [
                                   field.getItemSummary ? field.getItemSummary(data, i) : `Item #${_originalIndex}`,
-                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: getClassNameItem("rhs"), children: [
-                                    !readOnly && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: getClassNameItem("actions"), children: [
-                                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: getClassNameItem("rhs"), children: [
+                                    !readOnly && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: getClassNameItem("actions"), children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                                         IconButton,
                                         {
                                           type: "button",
@@ -3493,10 +3186,10 @@ var ArrayField = ({
                                             onChange(existingValue);
                                           },
                                           title: "Duplicate",
-                                          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Copy, { size: 16 })
+                                          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Copy, { size: 16 })
                                         }
                                       ) }),
-                                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                                         IconButton,
                                         {
                                           type: "button",
@@ -3518,16 +3211,16 @@ var ArrayField = ({
                                             onChange(existingValue);
                                           },
                                           title: "Delete",
-                                          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Trash, { size: 16 })
+                                          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Trash, { size: 16 })
                                         }
                                       ) })
                                     ] }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DragIcon, {}) })
+                                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DragIcon, {}) })
                                   ] })
                                 ]
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("fieldset", { className: getClassNameItem("fieldset"), children: Object.keys(field.arrayFields).map((subName) => {
+                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("fieldset", { className: getClassNameItem("fieldset"), children: Object.keys(field.arrayFields).map((subName) => {
                               const subField = field.arrayFields[subName];
                               const indexName = `${name}[${i}]`;
                               const subPath = `${indexName}.${subName}`;
@@ -3537,14 +3230,14 @@ var ArrayField = ({
                               const localWildcardSubPath = `${localWildcardName}.${subName}`;
                               const subReadOnly = forceReadOnly ? forceReadOnly : typeof readOnlyFields[subPath] !== "undefined" ? readOnlyFields[localSubPath] : readOnlyFields[localWildcardSubPath];
                               const label2 = subField.label || subName;
-                              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                              return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                                 NestedFieldProvider,
                                 {
                                   name: localIndexName,
                                   wildcardName: localWildcardName,
                                   subName,
                                   readOnlyFields,
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                                     AutoFieldPrivate,
                                     {
                                       name: subPath,
@@ -3577,7 +3270,7 @@ var ArrayField = ({
                     _arrayId
                   );
                 }) }),
-                !addDisabled && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                !addDisabled && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3595,7 +3288,7 @@ var ArrayField = ({
                       setUi(mapArrayStateToUi(newArrayState), false);
                       onChange(newValue);
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Plus, { size: 21 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Plus, { size: 21 })
                   }
                 )
               ]
@@ -3609,7 +3302,7 @@ var ArrayField = ({
 
 // components/AutoField/fields/DefaultField/index.tsx
 init_react_import();
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var getClassName6 = get_class_name_factory_default("Input", styles_module_default2);
 var DefaultField = ({
   field,
@@ -3623,16 +3316,16 @@ var DefaultField = ({
   id
 }) => {
   const value = _value;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     Label2,
     {
       label: label || name,
-      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-        field.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Type, { size: 16 }),
-        field.type === "number" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Hash, { size: 16 })
+      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+        field.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Type, { size: 16 }),
+        field.type === "number" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Hash, { size: 16 })
       ] }),
       readOnly,
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "input",
         {
           className: getClassName6("input"),
@@ -3670,11 +3363,11 @@ var DefaultField = ({
 
 // components/AutoField/fields/ExternalField/index.tsx
 init_react_import();
-var import_react20 = require("react");
+var import_react18 = require("react");
 
 // components/ExternalInput/index.tsx
 init_react_import();
-var import_react19 = require("react");
+var import_react17 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css#css-module
 init_react_import();
@@ -3682,7 +3375,7 @@ var styles_module_default6 = { "ExternalInput-actions": "_ExternalInput-actions_
 
 // components/Modal/index.tsx
 init_react_import();
-var import_react17 = require("react");
+var import_react15 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Modal/styles.module.css#css-module
 init_react_import();
@@ -3690,22 +3383,22 @@ var styles_module_default7 = { "Modal": "_Modal_ikbaj_1", "Modal--isOpen": "_Mod
 
 // components/Modal/index.tsx
 var import_react_dom = require("react-dom");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var getClassName7 = get_class_name_factory_default("Modal", styles_module_default7);
 var Modal = ({
   children,
   onClose,
   isOpen
 }) => {
-  const [rootEl, setRootEl] = (0, import_react17.useState)(null);
-  (0, import_react17.useEffect)(() => {
+  const [rootEl, setRootEl] = (0, import_react15.useState)(null);
+  (0, import_react15.useEffect)(() => {
     setRootEl(document.getElementById("puck-portal-root"));
   }, []);
   if (!rootEl) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", {});
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", {});
   }
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName7({ isOpen }), onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassName7({ isOpen }), onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "div",
       {
         className: getClassName7("inner"),
@@ -3725,11 +3418,11 @@ init_react_import();
 var styles_module_default8 = { "Heading": "_Heading_qxrry_1", "Heading--xxxxl": "_Heading--xxxxl_qxrry_12", "Heading--xxxl": "_Heading--xxxl_qxrry_18", "Heading--xxl": "_Heading--xxl_qxrry_22", "Heading--xl": "_Heading--xl_qxrry_26", "Heading--l": "_Heading--l_qxrry_30", "Heading--m": "_Heading--m_qxrry_34", "Heading--s": "_Heading--s_qxrry_38", "Heading--xs": "_Heading--xs_qxrry_42" };
 
 // components/Heading/index.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var getClassName8 = get_class_name_factory_default("Heading", styles_module_default8);
 var Heading = ({ children, rank, size = "m" }) => {
   const Tag = rank ? `h${rank}` : "span";
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     Tag,
     {
       className: getClassName8({
@@ -3745,7 +3438,7 @@ init_react_import();
 
 // components/Button/Button.tsx
 init_react_import();
-var import_react18 = require("react");
+var import_react16 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css#css-module
 init_react_import();
@@ -3765,7 +3458,7 @@ var filterDataAttrs = (props) => {
 };
 
 // components/Button/Button.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var getClassName9 = get_class_name_factory_default("Button", Button_module_default);
 var Button = (_a) => {
   var _b = _a, {
@@ -3795,11 +3488,11 @@ var Button = (_a) => {
     "size",
     "loading"
   ]);
-  const [loading, setLoading] = (0, import_react18.useState)(loadingProp);
-  (0, import_react18.useEffect)(() => setLoading(loadingProp), [loadingProp]);
+  const [loading, setLoading] = (0, import_react16.useState)(loadingProp);
+  (0, import_react16.useEffect)(() => setLoading(loadingProp), [loadingProp]);
   const ElementType = href ? "a" : type ? "button" : "span";
   const dataAttrs = filterDataAttrs(props);
-  const el = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  const el = /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     ElementType,
     __spreadProps(__spreadValues({
       className: getClassName9({
@@ -3824,9 +3517,9 @@ var Button = (_a) => {
       href
     }, dataAttrs), {
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: getClassName9("icon"), children: icon }),
+        icon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName9("icon"), children: icon }),
         children,
-        loading && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: getClassName9("spinner"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Loader, { size: 14 }) })
+        loading && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName9("spinner"), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Loader, { size: 14 }) })
       ]
     })
   );
@@ -3834,7 +3527,7 @@ var Button = (_a) => {
 };
 
 // components/ExternalInput/index.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var getClassName10 = get_class_name_factory_default("ExternalInput", styles_module_default6);
 var getClassNameModal = get_class_name_factory_default("ExternalInputModal", styles_module_default6);
 var dataCache = {};
@@ -3851,28 +3544,28 @@ var ExternalInput = ({
     mapRow = (val) => val,
     filterFields
   } = field || {};
-  const [data, setData] = (0, import_react19.useState)([]);
-  const [isOpen, setOpen] = (0, import_react19.useState)(false);
-  const [isLoading, setIsLoading] = (0, import_react19.useState)(true);
+  const [data, setData] = (0, import_react17.useState)([]);
+  const [isOpen, setOpen] = (0, import_react17.useState)(false);
+  const [isLoading, setIsLoading] = (0, import_react17.useState)(true);
   const hasFilterFields = !!filterFields;
-  const [filters, setFilters] = (0, import_react19.useState)(field.initialFilters || {});
-  const [filtersToggled, setFiltersToggled] = (0, import_react19.useState)(hasFilterFields);
-  const mappedData = (0, import_react19.useMemo)(() => {
+  const [filters, setFilters] = (0, import_react17.useState)(field.initialFilters || {});
+  const [filtersToggled, setFiltersToggled] = (0, import_react17.useState)(hasFilterFields);
+  const mappedData = (0, import_react17.useMemo)(() => {
     return data.map(mapRow);
   }, [data]);
-  const keys = (0, import_react19.useMemo)(() => {
+  const keys = (0, import_react17.useMemo)(() => {
     const validKeys = /* @__PURE__ */ new Set();
     for (const item of mappedData) {
       for (const key of Object.keys(item)) {
-        if (typeof item[key] === "string" || typeof item[key] === "number" || (0, import_react19.isValidElement)(item[key])) {
+        if (typeof item[key] === "string" || typeof item[key] === "number" || (0, import_react17.isValidElement)(item[key])) {
           validKeys.add(key);
         }
       }
     }
     return Array.from(validKeys);
   }, [mappedData]);
-  const [searchQuery, setSearchQuery] = (0, import_react19.useState)(field.initialQuery || "");
-  const search = (0, import_react19.useCallback)(
+  const [searchQuery, setSearchQuery] = (0, import_react17.useState)(field.initialQuery || "");
+  const search = (0, import_react17.useCallback)(
     (query, filters2) => __async(void 0, null, function* () {
       setIsLoading(true);
       const cacheKey = `${id}-${query}-${JSON.stringify(filters2)}`;
@@ -3885,18 +3578,18 @@ var ExternalInput = ({
     }),
     [id, field]
   );
-  const Footer = (0, import_react19.useCallback)(
-    (props) => field.renderFooter ? field.renderFooter(props) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: getClassNameModal("footer"), children: [
+  const Footer = (0, import_react17.useCallback)(
+    (props) => field.renderFooter ? field.renderFooter(props) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: getClassNameModal("footer"), children: [
       props.items.length,
       " result",
       props.items.length === 1 ? "" : "s"
     ] }),
     [field.renderFooter]
   );
-  (0, import_react19.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     search(searchQuery, filters);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
     {
       className: getClassName10({
@@ -3906,21 +3599,21 @@ var ExternalInput = ({
       }),
       id,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: getClassName10("actions"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: getClassName10("actions"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "button",
             {
               type: "button",
               onClick: () => setOpen(true),
               className: getClassName10("button"),
               disabled: readOnly,
-              children: value ? field.getItemSummary ? field.getItemSummary(value) : "External item" : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Link, { size: "16" }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: field.placeholder })
+              children: value ? field.getItemSummary ? field.getItemSummary(value) : "External item" : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Link, { size: "16" }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: field.placeholder })
               ] })
             }
           ),
-          value && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          value && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "button",
             {
               type: "button",
@@ -3929,11 +3622,11 @@ var ExternalInput = ({
                 onChange(null);
               },
               disabled: readOnly,
-              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(LockOpen, { size: 16 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LockOpen, { size: 16 })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Modal, { onClose: () => setOpen(false), isOpen, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Modal, { onClose: () => setOpen(false), isOpen, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
           "form",
           {
             className: getClassNameModal({
@@ -3947,11 +3640,11 @@ var ExternalInput = ({
               search(searchQuery, filters);
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassNameModal("masthead"), children: field.showSearch ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: getClassNameModal("searchForm"), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: getClassNameModal("search"), children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: getClassNameModal("searchIconText"), children: "Search" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassNameModal("searchIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Search, { size: "18" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameModal("masthead"), children: field.showSearch ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: getClassNameModal("searchForm"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: getClassNameModal("search"), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: getClassNameModal("searchIconText"), children: "Search" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameModal("searchIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Search, { size: "18" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                     "input",
                     {
                       className: getClassNameModal("searchInput"),
@@ -3966,9 +3659,9 @@ var ExternalInput = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: getClassNameModal("searchActions"), children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { type: "submit", loading: isLoading, fullWidth: true, children: "Search" }),
-                  hasFilterFields && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassNameModal("searchActionIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: getClassNameModal("searchActions"), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { type: "submit", loading: isLoading, fullWidth: true, children: "Search" }),
+                  hasFilterFields && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameModal("searchActionIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                     IconButton,
                     {
                       type: "button",
@@ -3978,19 +3671,19 @@ var ExternalInput = ({
                         e.stopPropagation();
                         setFiltersToggled(!filtersToggled);
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SlidersHorizontal, { size: 20 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SlidersHorizontal, { size: 20 })
                     }
                   ) })
                 ] })
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Heading, { rank: "2", size: "xs", children: field.placeholder || "Select data" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: getClassNameModal("grid"), children: [
-                hasFilterFields && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassNameModal("filters"), children: hasFilterFields && Object.keys(filterFields).map((fieldName) => {
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Heading, { rank: "2", size: "xs", children: field.placeholder || "Select data" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: getClassNameModal("grid"), children: [
+                hasFilterFields && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameModal("filters"), children: hasFilterFields && Object.keys(filterFields).map((fieldName) => {
                   const filterField = filterFields[fieldName];
-                  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                     "div",
                     {
                       className: getClassNameModal("field"),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                         AutoFieldPrivate,
                         {
                           field: filterField,
@@ -4011,9 +3704,9 @@ var ExternalInput = ({
                     fieldName
                   );
                 }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: getClassNameModal("tableWrapper"), children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("table", { className: getClassNameModal("table"), children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("thead", { className: getClassNameModal("thead"), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("tr", { className: getClassNameModal("tr"), children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: getClassNameModal("tableWrapper"), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("table", { className: getClassNameModal("table"), children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("thead", { className: getClassNameModal("thead"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { className: getClassNameModal("tr"), children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                       "th",
                       {
                         className: getClassNameModal("th"),
@@ -4022,8 +3715,8 @@ var ExternalInput = ({
                       },
                       key
                     )) }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("tbody", { className: getClassNameModal("tbody"), children: mappedData.map((item, i) => {
-                      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tbody", { className: getClassNameModal("tbody"), children: mappedData.map((item, i) => {
+                      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                         "tr",
                         {
                           style: { whiteSpace: "nowrap" },
@@ -4032,16 +3725,16 @@ var ExternalInput = ({
                             onChange(mapProp(data[i]));
                             setOpen(false);
                           },
-                          children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("td", { className: getClassNameModal("td"), children: item[key] }, key))
+                          children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { className: getClassNameModal("td"), children: item[key] }, key))
                         },
                         i
                       );
                     }) })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassNameModal("loadingBanner"), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Loader, { size: 24 }) })
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameModal("loadingBanner"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Loader, { size: 24 }) })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassNameModal("footerContainer"), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Footer, { items: mappedData }) })
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameModal("footerContainer"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Footer, { items: mappedData }) })
             ]
           }
         ) })
@@ -4051,7 +3744,7 @@ var ExternalInput = ({
 };
 
 // components/AutoField/fields/ExternalField/index.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var ExternalField = ({
   field,
   onChange,
@@ -4066,7 +3759,7 @@ var ExternalField = ({
   var _a, _b, _c;
   const validField = field;
   const deprecatedField = field;
-  (0, import_react20.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     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."
@@ -4076,13 +3769,13 @@ var ExternalField = ({
   if (field.type !== "external") {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     Label2,
     {
       label: label || name,
-      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Link, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Link, { size: 16 }),
       el: "div",
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         ExternalInput,
         {
           name,
@@ -4109,21 +3802,7 @@ var ExternalField = ({
 
 // components/AutoField/fields/RadioField/index.tsx
 init_react_import();
-var import_react21 = require("react");
-
-// lib/safe-json-parse.ts
-init_react_import();
-var safeJsonParse = (str) => {
-  try {
-    const jsonValue = JSON.parse(str);
-    return jsonValue;
-  } catch (e) {
-    return str;
-  }
-};
-
-// components/AutoField/fields/RadioField/index.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var getClassName11 = get_class_name_factory_default("Input", styles_module_default2);
 var RadioField = ({
   field,
@@ -4136,58 +3815,50 @@ var RadioField = ({
   labelIcon,
   Label: Label2
 }) => {
-  const flatOptions = (0, import_react21.useMemo)(
-    () => field.type === "radio" ? field.options.map(({ value: value2 }) => value2) : [],
-    [field]
-  );
   if (field.type !== "radio" || !field.options) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     Label2,
     {
-      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CircleCheckBig, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CircleCheckBig, { size: 16 }),
       label: label || name,
       readOnly,
       el: "div",
-      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: getClassName11("radioGroupItems"), id, children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-        "label",
-        {
-          className: getClassName11("radio"),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              "input",
-              {
-                type: "radio",
-                className: getClassName11("radioInput"),
-                value: option.value,
-                name,
-                onChange: (e) => {
-                  var _a;
-                  const jsonValue = (_a = safeJsonParse(e.target.value)) != null ? _a : e.target.value;
-                  if (flatOptions.indexOf(jsonValue) > -1) {
-                    onChange(jsonValue);
-                  } else {
-                    onChange(e.target.value);
-                  }
-                },
-                disabled: readOnly,
-                checked: value === option.value
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: getClassName11("radioInner"), children: option.label || option.value })
-          ]
-        },
-        option.label + option.value
-      )) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassName11("radioGroupItems"), id, children: field.options.map((option) => {
+        var _a;
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          "label",
+          {
+            className: getClassName11("radio"),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                "input",
+                {
+                  type: "radio",
+                  className: getClassName11("radioInput"),
+                  value: JSON.stringify({ value: option.value }),
+                  name,
+                  onChange: (e) => {
+                    onChange(JSON.parse(e.target.value).value);
+                  },
+                  disabled: readOnly,
+                  checked: value === option.value
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassName11("radioInner"), children: option.label || ((_a = option.value) == null ? void 0 : _a.toString()) })
+            ]
+          },
+          option.label + option.value
+        );
+      }) })
     }
   );
 };
 
 // components/AutoField/fields/SelectField/index.tsx
 init_react_import();
-var import_react22 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var getClassName12 = get_class_name_factory_default("Input", styles_module_default2);
 var SelectField = ({
   field,
@@ -4200,20 +3871,16 @@ var SelectField = ({
   readOnly,
   id
 }) => {
-  const flatOptions = (0, import_react22.useMemo)(
-    () => field.type === "select" ? field.options.map(({ value: value2 }) => value2) : [],
-    [field]
-  );
   if (field.type !== "select" || !field.options) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     Label2,
     {
       label: label || name,
-      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChevronDown, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronDown, { size: 16 }),
       readOnly,
-      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "select",
         {
           id,
@@ -4221,22 +3888,16 @@ var SelectField = ({
           className: getClassName12("input"),
           disabled: readOnly,
           onChange: (e) => {
-            var _a;
-            const jsonValue = (_a = safeJsonParse(e.target.value)) != null ? _a : e.target.value;
-            if (flatOptions.indexOf(jsonValue) > -1) {
-              onChange(jsonValue);
-            } else {
-              onChange(e.target.value);
-            }
+            onChange(JSON.parse(e.target.value).value);
           },
-          value,
-          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          value: JSON.stringify({ value }),
+          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "option",
             {
               label: option.label,
-              value: option.value
+              value: JSON.stringify({ value: option.value })
             },
-            option.label + option.value
+            option.label + JSON.stringify(option.value)
           ))
         }
       )
@@ -4246,7 +3907,7 @@ var SelectField = ({
 
 // components/AutoField/fields/TextareaField/index.tsx
 init_react_import();
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var getClassName13 = get_class_name_factory_default("Input", styles_module_default2);
 var TextareaField = ({
   field,
@@ -4259,13 +3920,13 @@ var TextareaField = ({
   Label: Label2,
   id
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     Label2,
     {
       label: label || name,
-      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Type, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Type, { size: 16 }),
       readOnly,
-      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "textarea",
         {
           id,
@@ -4292,7 +3953,7 @@ init_react_import();
 var styles_module_default9 = { "ObjectField": "_ObjectField_1ua3y_5", "ObjectField-fieldset": "_ObjectField-fieldset_1ua3y_13" };
 
 // components/AutoField/fields/ObjectField/index.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var getClassName14 = get_class_name_factory_default("ObjectField", styles_module_default9);
 var ObjectField = ({
   field,
@@ -4310,26 +3971,25 @@ var ObjectField = ({
     return null;
   }
   const data = value || {};
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     Label2,
     {
       label: label || name,
-      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(EllipsisVertical, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(EllipsisVertical, { size: 16 }),
       el: "div",
       readOnly,
-      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassName14(), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("fieldset", { className: getClassName14("fieldset"), children: Object.keys(field.objectFields).map((subName) => {
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: getClassName14(), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("fieldset", { className: getClassName14("fieldset"), children: Object.keys(field.objectFields).map((subName) => {
         const subField = field.objectFields[subName];
-        const subPath = `${name}.${subName}`;
-        const localSubPath = `${localName || name}.${subName}`;
-        const subReadOnly = readOnly ? readOnly : readOnlyFields[localSubPath];
+        const subPath = `${localName}.${subName}`;
+        const subReadOnly = readOnly ? readOnly : readOnlyFields[subPath];
         const label2 = subField.label || subName;
-        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           NestedFieldProvider,
           {
             name: localName || id,
             subName,
             readOnlyFields,
-            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               AutoFieldPrivate,
               {
                 name: subPath,
@@ -4361,17 +4021,17 @@ var ObjectField = ({
 
 // lib/use-safe-id.ts
 init_react_import();
-var import_react23 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 var useSafeId = () => {
-  if (typeof import_react23.default.useId !== "undefined") {
-    return import_react23.default.useId();
+  if (typeof import_react19.default.useId !== "undefined") {
+    return import_react19.default.useId();
   }
-  const [id] = (0, import_react23.useState)(generateId());
+  const [id] = (0, import_react19.useState)(generateId());
   return id;
 };
 
 // components/AutoField/index.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var getClassName15 = get_class_name_factory_default("Input", styles_module_default2);
 var getClassNameWrapper = get_class_name_factory_default("InputWrapper", styles_module_default2);
 var FieldLabel = ({
@@ -4383,11 +4043,11 @@ var FieldLabel = ({
   className
 }) => {
   const El = el;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(El, { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: getClassName15("label"), children: [
-      icon ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName15("labelIcon"), children: icon }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, {}),
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(El, { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: getClassName15("label"), children: [
+      icon ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: getClassName15("labelIcon"), children: icon }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, {}),
       label,
-      readOnly && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName15("disabledIcon"), title: "Read-only", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Lock, { size: "12" }) })
+      readOnly && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: getClassName15("disabledIcon"), title: "Read-only", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Lock, { size: "12" }) })
     ] }),
     children
   ] });
@@ -4400,14 +4060,14 @@ var FieldLabelInternal = ({
   readOnly
 }) => {
   const overrides = useAppStore((s) => s.overrides);
-  const Wrapper = (0, import_react24.useMemo)(
+  const Wrapper = (0, import_react20.useMemo)(
     () => overrides.fieldLabel || FieldLabel,
     [overrides]
   );
   if (!label) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     Wrapper,
     {
       label,
@@ -4420,14 +4080,14 @@ var FieldLabelInternal = ({
   );
 };
 function AutoFieldInternal(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const dispatch = useAppStore((s) => s.dispatch);
   const overrides = useAppStore((s) => s.overrides);
   const readOnly = useAppStore((s) => {
     var _a2;
     return (_a2 = s.selectedItem) == null ? void 0 : _a2.readOnly;
   });
-  const nestedFieldContext = (0, import_react24.useContext)(NestedFieldContext);
+  const nestedFieldContext = (0, import_react20.useContext)(NestedFieldContext);
   const { id, Label: Label2 = FieldLabelInternal } = props;
   const field = props.field;
   const label = field.label;
@@ -4461,7 +4121,7 @@ function AutoFieldInternal(props) {
     Label: Label2,
     id: resolvedId
   });
-  const onFocus = (0, import_react24.useCallback)(
+  const onFocus = (0, import_react20.useCallback)(
     (e) => {
       if (mergedProps.name && (e.target.nodeName === "INPUT" || e.target.nodeName === "TEXTAREA")) {
         e.stopPropagation();
@@ -4475,7 +4135,7 @@ function AutoFieldInternal(props) {
     },
     [mergedProps.name]
   );
-  const onBlur = (0, import_react24.useCallback)((e) => {
+  const onBlur = (0, import_react20.useCallback)((e) => {
     if ("name" in e.target) {
       dispatch({
         type: "setUi",
@@ -4492,23 +4152,25 @@ function AutoFieldInternal(props) {
   if (field.type === "slot") {
     return null;
   }
+  let children = null;
+  let FieldComponent;
   if (field.type === "custom") {
     if (!field.render) {
       return null;
     }
-    const CustomField = field.render;
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassNameWrapper(), onFocus, onBlur, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName15(), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CustomField, __spreadValues({}, mergedProps)) }) });
+    FieldComponent = field.render;
+  } else {
+    children = defaultFields[field.type](mergedProps);
+    FieldComponent = render[field.type];
   }
-  const children = defaultFields[field.type](mergedProps);
-  const Render3 = render[field.type];
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     NestedFieldContext.Provider,
     {
       value: {
         readOnlyFields: nestedFieldContext.readOnlyFields || readOnly || {},
-        localName: nestedFieldContext.localName
+        localName: (_i = nestedFieldContext.localName) != null ? _i : mergedProps.name
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "div",
         {
           className: getClassNameWrapper(),
@@ -4517,7 +4179,7 @@ function AutoFieldInternal(props) {
           onClick: (e) => {
             e.stopPropagation();
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Render3, __spreadProps(__spreadValues({}, mergedProps), { children }))
+          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(FieldComponent, __spreadProps(__spreadValues({}, mergedProps), { children }))
         }
       )
     }
@@ -4526,20 +4188,20 @@ function AutoFieldInternal(props) {
 function AutoFieldPrivate(props) {
   const isFocused = useAppStore((s) => s.state.ui.field.focus === props.name);
   const { value, onChange } = props;
-  const [localValue, setLocalValue] = (0, import_react24.useState)(value);
-  const onChangeLocal = (0, import_react24.useCallback)(
+  const [localValue, setLocalValue] = (0, import_react20.useState)(value);
+  const onChangeLocal = (0, import_react20.useCallback)(
     (val, ui) => {
       setLocalValue(val);
       onChange(val, ui);
     },
     [onChange]
   );
-  (0, import_react24.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!isFocused) {
       setLocalValue(value);
     }
   }, [value]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!isFocused) {
       if (value !== localValue) {
         setLocalValue(value);
@@ -4550,11 +4212,11 @@ function AutoFieldPrivate(props) {
     value: localValue,
     onChange: onChangeLocal
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AutoFieldInternal, __spreadValues(__spreadValues({}, props), localProps));
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AutoFieldInternal, __spreadValues(__spreadValues({}, props), localProps));
 }
 function AutoField(props) {
-  const DefaultLabel = (0, import_react24.useMemo)(() => {
-    const DefaultLabel2 = (labelProps) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  const DefaultLabel = (0, import_react20.useMemo)(() => {
+    const DefaultLabel2 = (labelProps) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "div",
       __spreadProps(__spreadValues({}, labelProps), {
         className: getClassName15({ readOnly: props.readOnly })
@@ -4565,7 +4227,7 @@ function AutoField(props) {
   if (props.field.type === "slot") {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AutoFieldInternal, __spreadProps(__spreadValues({}, props), { Label: DefaultLabel }));
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AutoFieldInternal, __spreadProps(__spreadValues({}, props), { Label: DefaultLabel }));
 }
 
 // components/Drawer/index.tsx
@@ -4576,21 +4238,21 @@ init_react_import();
 var styles_module_default10 = { "Drawer": "_Drawer_pl7z0_1", "Drawer-draggable": "_Drawer-draggable_pl7z0_8", "Drawer-draggableBg": "_Drawer-draggableBg_pl7z0_12", "DrawerItem-draggable": "_DrawerItem-draggable_pl7z0_22", "DrawerItem--disabled": "_DrawerItem--disabled_pl7z0_35", "DrawerItem": "_DrawerItem_pl7z0_22", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_pl7z0_45", "DrawerItem-name": "_DrawerItem-name_pl7z0_63" };
 
 // components/Drawer/index.tsx
-var import_react39 = require("react");
+var import_react37 = require("react");
 
 // components/DragDropContext/index.tsx
 init_react_import();
-var import_react37 = require("@dnd-kit/react");
-var import_react38 = require("react");
+var import_react35 = require("@dnd-kit/react");
+var import_react36 = require("react");
 var import_dom = require("@dnd-kit/dom");
 
 // components/DropZone/index.tsx
 init_react_import();
-var import_react35 = require("react");
+var import_react33 = require("react");
 
 // components/DraggableComponent/index.tsx
 init_react_import();
-var import_react28 = require("react");
+var import_react24 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
 init_react_import();
@@ -4620,11 +4282,11 @@ function getDeepScrollPosition(element) {
 
 // components/DropZone/context.tsx
 init_react_import();
-var import_react25 = require("react");
+var import_react21 = require("react");
 var import_zustand3 = require("zustand");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var dropZoneContext = (0, import_react25.createContext)(null);
-var ZoneStoreContext = (0, import_react25.createContext)(
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var dropZoneContext = (0, import_react21.createContext)(null);
+var ZoneStoreContext = (0, import_react21.createContext)(
   (0, import_zustand3.createStore)(() => ({
     zoneDepthIndex: {},
     nextZoneDepthIndex: {},
@@ -4640,14 +4302,14 @@ var ZoneStoreProvider = ({
   children,
   store
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ZoneStoreContext.Provider, { value: store, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ZoneStoreContext.Provider, { value: store, children });
 };
 var DropZoneProvider = ({
   children,
   value
 }) => {
   const dispatch = useAppStore((s) => s.dispatch);
-  const registerZone = (0, import_react25.useCallback)(
+  const registerZone = (0, import_react21.useCallback)(
     (zoneCompound) => {
       dispatch({
         type: "registerZone",
@@ -4656,23 +4318,13 @@ var DropZoneProvider = ({
     },
     [dispatch]
   );
-  const unregisterZone = (0, import_react25.useCallback)(
-    (zoneCompound) => {
-      dispatch({
-        type: "unregisterZone",
-        zone: zoneCompound
-      });
-    },
-    [dispatch]
-  );
-  const memoValue = (0, import_react25.useMemo)(
+  const memoValue = (0, import_react21.useMemo)(
     () => __spreadValues({
-      registerZone,
-      unregisterZone
+      registerZone
     }, value),
     [value]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: memoValue && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(dropZoneContext.Provider, { value: memoValue, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: memoValue && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(dropZoneContext.Provider, { value: memoValue, children }) });
 };
 
 // components/DraggableComponent/index.tsx
@@ -4696,11 +4348,11 @@ function accumulateTransform(el) {
 
 // lib/use-context-store.ts
 init_react_import();
-var import_react26 = require("react");
+var import_react22 = require("react");
 var import_zustand4 = require("zustand");
 var import_shallow = require("zustand/react/shallow");
 function useContextStore(context, selector) {
-  const store = (0, import_react26.useContext)(context);
+  const store = (0, import_react22.useContext)(context);
   if (!store) {
     throw new Error("useContextStore must be used inside context");
   }
@@ -4709,10 +4361,10 @@ function useContextStore(context, selector) {
 
 // lib/dnd/use-on-drag-finished.ts
 init_react_import();
-var import_react27 = require("react");
+var import_react23 = require("react");
 var useOnDragFinished = (cb, deps = []) => {
   const appStore = useAppStoreApi();
-  return (0, import_react27.useCallback)(() => {
+  return (0, import_react23.useCallback)(() => {
     let dispose = () => {
     };
     const processDragging = (isDragging2) => {
@@ -4740,7 +4392,7 @@ var useOnDragFinished = (cb, deps = []) => {
 };
 
 // components/DraggableComponent/index.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var getClassName16 = get_class_name_factory_default("DraggableComponent", styles_module_default11);
 var DEBUG2 = false;
 var space = 8;
@@ -4751,12 +4403,12 @@ var DefaultActionBar = ({
   label,
   children,
   parentAction
-}) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(ActionBar, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(ActionBar.Group, { children: [
+}) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(ActionBar, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(ActionBar.Group, { children: [
     parentAction,
-    label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ActionBar.Label, { label })
+    label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ActionBar.Label, { label })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ActionBar.Group, { children })
+  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ActionBar.Group, { children })
 ] });
 var DraggableComponent = ({
   children,
@@ -4782,9 +4434,9 @@ var DraggableComponent = ({
   const overrides = useAppStore((s) => s.overrides);
   const dispatch = useAppStore((s) => s.dispatch);
   const iframe = useAppStore((s) => s.iframe);
-  const ctx = (0, import_react28.useContext)(dropZoneContext);
-  const [localZones, setLocalZones] = (0, import_react28.useState)({});
-  const registerLocalZone = (0, import_react28.useCallback)(
+  const ctx = (0, import_react24.useContext)(dropZoneContext);
+  const [localZones, setLocalZones] = (0, import_react24.useState)({});
+  const registerLocalZone = (0, import_react24.useCallback)(
     (zoneCompound2, active) => {
       var _a;
       (_a = ctx == null ? void 0 : ctx.registerLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2, active);
@@ -4794,7 +4446,7 @@ var DraggableComponent = ({
     },
     [setLocalZones]
   );
-  const unregisterLocalZone = (0, import_react28.useCallback)(
+  const unregisterLocalZone = (0, import_react24.useCallback)(
     (zoneCompound2) => {
       var _a;
       (_a = ctx == null ? void 0 : ctx.unregisterLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2);
@@ -4817,9 +4469,9 @@ var DraggableComponent = ({
       return s.permissions.getPermissions({ item });
     })
   );
-  const zoneStore = (0, import_react28.useContext)(ZoneStoreContext);
-  const [dragAxis, setDragAxis] = (0, import_react28.useState)(userDragAxis || autoDragAxis);
-  const dynamicCollisionDetector = (0, import_react28.useMemo)(
+  const zoneStore = (0, import_react24.useContext)(ZoneStoreContext);
+  const [dragAxis, setDragAxis] = (0, import_react24.useState)(userDragAxis || autoDragAxis);
+  const dynamicCollisionDetector = (0, import_react24.useMemo)(
     () => createDynamicCollisionDetector(dragAxis),
     [dragAxis]
   );
@@ -4851,7 +4503,7 @@ var DraggableComponent = ({
     },
     feedback: "clone"
   });
-  (0, import_react28.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     const isEnabled = zoneStore.getState().enabledIndex[zoneCompound];
     sortable.droppable.disabled = !isEnabled;
     sortable.draggable.disabled = !permissions.drag;
@@ -4868,8 +4520,8 @@ var DraggableComponent = ({
     }
     return cleanup;
   }, [permissions.drag, zoneCompound]);
-  const ref = (0, import_react28.useRef)(null);
-  const refSetter = (0, import_react28.useCallback)(
+  const ref = (0, import_react24.useRef)(null);
+  const refSetter = (0, import_react24.useCallback)(
     (el) => {
       sortableRef(el);
       if (el) {
@@ -4878,14 +4530,14 @@ var DraggableComponent = ({
     },
     [sortableRef]
   );
-  const [portalEl, setPortalEl] = (0, import_react28.useState)();
-  (0, import_react28.useEffect)(() => {
+  const [portalEl, setPortalEl] = (0, import_react24.useState)();
+  (0, import_react24.useEffect)(() => {
     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
     );
   }, [iframe.enabled, ref.current]);
-  const getStyle = (0, import_react28.useCallback)(() => {
+  const getStyle = (0, import_react24.useCallback)(() => {
     var _a, _b, _c;
     if (!ref.current) return;
     const rect = ref.current.getBoundingClientRect();
@@ -4910,11 +4562,11 @@ var DraggableComponent = ({
     };
     return style2;
   }, [ref.current]);
-  const [style, setStyle] = (0, import_react28.useState)();
-  const sync = (0, import_react28.useCallback)(() => {
+  const [style, setStyle] = (0, import_react24.useState)();
+  const sync = (0, import_react24.useCallback)(() => {
     setStyle(getStyle());
   }, [ref.current, iframe]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (ref.current) {
       const observer = new ResizeObserver(sync);
       observer.observe(ref.current);
@@ -4924,13 +4576,13 @@ var DraggableComponent = ({
     }
   }, [ref.current]);
   const registerNode = useAppStore((s) => s.nodes.registerNode);
-  const hideOverlay = (0, import_react28.useCallback)(() => {
+  const hideOverlay = (0, import_react24.useCallback)(() => {
     setIsVisible(false);
   }, []);
-  const showOverlay = (0, import_react28.useCallback)(() => {
+  const showOverlay = (0, import_react24.useCallback)(() => {
     setIsVisible(true);
   }, []);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     var _a;
     registerNode(id, {
       methods: { sync, showOverlay, hideOverlay },
@@ -4947,11 +4599,11 @@ var DraggableComponent = ({
       });
     };
   }, [id, zoneCompound, index, componentType, sync]);
-  const CustomActionBar = (0, import_react28.useMemo)(
+  const CustomActionBar = (0, import_react24.useMemo)(
     () => overrides.actionBar || DefaultActionBar,
     [overrides.actionBar]
   );
-  const onClick = (0, import_react28.useCallback)(
+  const onClick = (0, import_react24.useCallback)(
     (e) => {
       e.stopPropagation();
       dispatch({
@@ -4964,7 +4616,7 @@ var DraggableComponent = ({
     [index, zoneCompound, id]
   );
   const appStore = useAppStoreApi();
-  const onSelectParent = (0, import_react28.useCallback)(() => {
+  const onSelectParent = (0, import_react24.useCallback)(() => {
     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;
@@ -4985,26 +4637,26 @@ var DraggableComponent = ({
       }
     });
   }, [ctx, path]);
-  const onDuplicate = (0, import_react28.useCallback)(() => {
+  const onDuplicate = (0, import_react24.useCallback)(() => {
     dispatch({
       type: "duplicate",
       sourceIndex: index,
       sourceZone: zoneCompound
     });
   }, [index, zoneCompound]);
-  const onDelete = (0, import_react28.useCallback)(() => {
+  const onDelete = (0, import_react24.useCallback)(() => {
     dispatch({
       type: "remove",
       index,
       zone: zoneCompound
     });
   }, [index, zoneCompound]);
-  const [hover, setHover] = (0, import_react28.useState)(false);
+  const [hover, setHover] = (0, import_react24.useState)(false);
   const indicativeHover = useContextStore(
     ZoneStoreContext,
     (s) => s.hoveringComponent === id
   );
-  (0, import_react28.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (!ref.current) {
       return;
     }
@@ -5040,7 +4692,8 @@ var DraggableComponent = ({
       el.removeEventListener("mouseout", _onMouseOut);
     };
   }, [
-    ref,
+    ref.current,
+    // Remount attributes if the element changes
     onClick,
     containsActiveZone,
     zoneCompound,
@@ -5048,10 +4701,10 @@ var DraggableComponent = ({
     thisIsDragging,
     inDroppableZone
   ]);
-  const [isVisible, setIsVisible] = (0, import_react28.useState)(false);
-  const [dragFinished, setDragFinished] = (0, import_react28.useState)(true);
-  const [_, startTransition] = (0, import_react28.useTransition)();
-  (0, import_react28.useEffect)(() => {
+  const [isVisible, setIsVisible] = (0, import_react24.useState)(false);
+  const [dragFinished, setDragFinished] = (0, import_react24.useState)(true);
+  const [_, startTransition] = (0, import_react24.useTransition)();
+  (0, import_react24.useEffect)(() => {
     startTransition(() => {
       if (hover || indicativeHover || isSelected) {
         sync();
@@ -5062,7 +4715,7 @@ var DraggableComponent = ({
       }
     });
   }, [hover, indicativeHover, isSelected, iframe]);
-  const [thisWasDragging, setThisWasDragging] = (0, import_react28.useState)(false);
+  const [thisWasDragging, setThisWasDragging] = (0, import_react24.useState)(false);
   const onDragFinished = useOnDragFinished((finished) => {
     if (finished) {
       startTransition(() => {
@@ -5073,15 +4726,15 @@ var DraggableComponent = ({
       setDragFinished(false);
     }
   });
-  (0, import_react28.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (thisIsDragging) {
       setThisWasDragging(true);
     }
   }, [thisIsDragging]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (thisWasDragging) return onDragFinished();
   }, [thisWasDragging, onDragFinished]);
-  const syncActionsPosition = (0, import_react28.useCallback)(
+  const syncActionsPosition = (0, import_react24.useCallback)(
     (el) => {
       if (el) {
         const view = el.ownerDocument.defaultView;
@@ -5106,7 +4759,7 @@ var DraggableComponent = ({
     },
     [zoom]
   );
-  (0, import_react28.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (userDragAxis) {
       setDragAxis(userDragAxis);
       return;
@@ -5120,11 +4773,11 @@ var DraggableComponent = ({
     }
     setDragAxis(autoDragAxis);
   }, [ref, userDragAxis, autoDragAxis]);
-  const parentAction = (0, import_react28.useMemo)(
-    () => (ctx == null ? void 0 : ctx.areaId) && (ctx == null ? void 0 : ctx.areaId) !== "root" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ActionBar.Action, { onClick: onSelectParent, label: "Select parent", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CornerLeftUp, { size: 16 }) }),
+  const parentAction = (0, import_react24.useMemo)(
+    () => (ctx == null ? void 0 : ctx.areaId) && (ctx == null ? void 0 : ctx.areaId) !== "root" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ActionBar.Action, { onClick: onSelectParent, label: "Select parent", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CornerLeftUp, { size: 16 }) }),
     [ctx == null ? void 0 : ctx.areaId]
   );
-  const nextContextValue = (0, import_react28.useMemo)(
+  const nextContextValue = (0, import_react24.useMemo)(
     () => __spreadProps(__spreadValues({}, ctx), {
       areaId: id,
       zoneCompound,
@@ -5143,9 +4796,9 @@ var DraggableComponent = ({
       unregisterLocalZone
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(DropZoneProvider, { value: nextContextValue, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DropZoneProvider, { value: nextContextValue, children: [
     dragFinished && isVisible && (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
         "div",
         {
           className: getClassName16({
@@ -5157,15 +4810,15 @@ var DraggableComponent = ({
           "data-puck-overlay": true,
           children: [
             debug,
-            isLoading && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: getClassName16("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loader, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            isLoading && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName16("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Loader, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "div",
               {
                 className: getClassName16("actionsOverlay"),
                 style: {
                   top: actionsOverlayTop / zoom
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                   "div",
                   {
                     className: getClassName16("actions"),
@@ -5177,14 +4830,14 @@ var DraggableComponent = ({
                       paddingRight: actionsSide
                     },
                     ref: syncActionsPosition,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                       CustomActionBar,
                       {
                         parentAction,
                         label: DEBUG2 ? id : label,
                         children: [
-                          permissions.duplicate && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Copy, { size: 16 }) }),
-                          permissions.delete && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Trash, { size: 16 }) })
+                          permissions.duplicate && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Copy, { size: 16 }) }),
+                          permissions.delete && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Trash, { size: 16 }) })
                         ]
                       }
                     )
@@ -5192,7 +4845,7 @@ var DraggableComponent = ({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: getClassName16("overlay") })
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName16("overlay") })
           ]
         }
       ),
@@ -5207,11 +4860,11 @@ init_react_import();
 var styles_module_default12 = { "DropZone": "_DropZone_1i2sv_1", "DropZone--hasChildren": "_DropZone--hasChildren_1i2sv_11", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_1i2sv_24", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_1i2sv_25", "DropZone--isRootZone": "_DropZone--isRootZone_1i2sv_25", "DropZone--isDestination": "_DropZone--isDestination_1i2sv_35", "DropZone-item": "_DropZone-item_1i2sv_47", "DropZone-hitbox": "_DropZone-hitbox_1i2sv_51", "DropZone--isEnabled": "_DropZone--isEnabled_1i2sv_59", "DropZone--isAnimating": "_DropZone--isAnimating_1i2sv_68" };
 
 // components/DropZone/index.tsx
-var import_react36 = require("@dnd-kit/react");
+var import_react34 = require("@dnd-kit/react");
 
 // components/DropZone/lib/use-min-empty-height.ts
 init_react_import();
-var import_react29 = require("react");
+var import_react25 = require("react");
 var getNumItems = (appStore, zoneCompound) => appStore.getState().state.indexes.zones[zoneCompound].contentIds.length;
 var useMinEmptyHeight = ({
   zoneCompound,
@@ -5219,8 +4872,8 @@ var useMinEmptyHeight = ({
   ref
 }) => {
   const appStore = useAppStoreApi();
-  const [prevHeight, setPrevHeight] = (0, import_react29.useState)(0);
-  const [isAnimating, setIsAnimating] = (0, import_react29.useState)(false);
+  const [prevHeight, setPrevHeight] = (0, import_react25.useState)(0);
+  const [isAnimating, setIsAnimating] = (0, import_react25.useState)(false);
   const { draggedItem, isZone } = useContextStore(ZoneStoreContext, (s) => {
     var _a, _b;
     return {
@@ -5228,7 +4881,7 @@ var useMinEmptyHeight = ({
       isZone: ((_b = s.draggedItem) == null ? void 0 : _b.data.zone) === zoneCompound
     };
   });
-  const numItems = (0, import_react29.useRef)(0);
+  const numItems = (0, import_react25.useRef)(0);
   const onDragFinished = useOnDragFinished(
     (finished) => {
       var _a;
@@ -5263,7 +4916,7 @@ var useMinEmptyHeight = ({
     },
     [appStore, prevHeight, zoneCompound]
   );
-  (0, import_react29.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (draggedItem && ref.current) {
       if (isZone) {
         const rect = ref.current.getBoundingClientRect();
@@ -5294,15 +4947,15 @@ function assignRefs(refs, node) {
 
 // components/DropZone/lib/use-content-with-preview.ts
 init_react_import();
-var import_react32 = require("react");
+var import_react28 = require("react");
 
 // lib/dnd/use-rendered-callback.ts
 init_react_import();
-var import_react30 = require("@dnd-kit/react");
-var import_react31 = require("react");
+var import_react26 = require("@dnd-kit/react");
+var import_react27 = require("react");
 function useRenderedCallback(callback, deps) {
-  const manager = (0, import_react30.useDragDropManager)();
-  return (0, import_react31.useCallback)(
+  const manager = (0, import_react26.useDragDropManager)();
+  return (0, import_react27.useCallback)(
     (...args) => __async(this, null, function* () {
       yield manager == null ? void 0 : manager.renderer.rendering;
       return callback(...args);
@@ -5313,14 +4966,14 @@ function useRenderedCallback(callback, deps) {
 
 // components/DropZone/lib/use-content-with-preview.ts
 var useContentIdsWithPreview = (contentIds, zoneCompound) => {
-  const zoneStore = (0, import_react32.useContext)(ZoneStoreContext);
+  const zoneStore = (0, import_react28.useContext)(ZoneStoreContext);
   const preview = useContextStore(
     ZoneStoreContext,
     (s) => s.previewIndex[zoneCompound]
   );
   const isDragging = useAppStore((s) => s.state.ui.isDragging);
-  const [contentIdsWithPreview, setContentIdsWithPreview] = (0, import_react32.useState)(contentIds);
-  const [localPreview, setLocalPreview] = (0, import_react32.useState)(
+  const [contentIdsWithPreview, setContentIdsWithPreview] = (0, import_react28.useState)(contentIds);
+  const [localPreview, setLocalPreview] = (0, import_react28.useState)(
     preview
   );
   const updateContent = useRenderedCallback(
@@ -5355,7 +5008,7 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
     },
     []
   );
-  (0, import_react32.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     var _a;
     const s = zoneStore.getState();
     const draggedItemId = (_a = s.draggedItem) == null ? void 0 : _a.id;
@@ -5373,16 +5026,16 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
 
 // components/DropZone/lib/use-drag-axis.ts
 init_react_import();
-var import_react33 = require("react");
+var import_react29 = require("react");
 var GRID_DRAG_AXIS = "dynamic";
 var FLEX_ROW_DRAG_AXIS = "x";
 var DEFAULT_DRAG_AXIS = "y";
 var useDragAxis = (ref, collisionAxis) => {
   const status = useAppStore((s) => s.status);
-  const [dragAxis, setDragAxis] = (0, import_react33.useState)(
+  const [dragAxis, setDragAxis] = (0, import_react29.useState)(
     collisionAxis || DEFAULT_DRAG_AXIS
   );
-  const calculateDragAxis = (0, import_react33.useCallback)(() => {
+  const calculateDragAxis = (0, import_react29.useCallback)(() => {
     if (ref.current) {
       const computedStyle = window.getComputedStyle(ref.current);
       if (computedStyle.display === "grid") {
@@ -5394,7 +5047,7 @@ var useDragAxis = (ref, collisionAxis) => {
       }
     }
   }, [ref.current]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     const onViewportChange = () => {
       calculateDragAxis();
     };
@@ -5403,7 +5056,7 @@ var useDragAxis = (ref, collisionAxis) => {
       window.removeEventListener("viewportchange", onViewportChange);
     };
   }, []);
-  (0, import_react33.useEffect)(calculateDragAxis, [status, collisionAxis]);
+  (0, import_react29.useEffect)(calculateDragAxis, [status, collisionAxis]);
   return [dragAxis, calculateDragAxis];
 };
 
@@ -5412,11 +5065,136 @@ var import_shallow4 = require("zustand/react/shallow");
 
 // components/Render/index.tsx
 init_react_import();
-var import_react34 = __toESM(require("react"));
+
+// lib/use-slots.tsx
+init_react_import();
+var import_react30 = require("react");
+function useSlots(config, item, renderSlotEdit, renderSlotRender = renderSlotEdit, readOnly, forceReadOnly) {
+  const slotProps = (0, import_react30.useMemo)(() => {
+    const mapped = mapSlots(
+      item,
+      (content, _parentId, propName, field, propPath) => {
+        const wildcardPath = propPath.replace(/\[\d+\]/g, "[*]");
+        const isReadOnly = (readOnly == null ? void 0 : readOnly[propPath]) || (readOnly == null ? void 0 : readOnly[wildcardPath]) || forceReadOnly;
+        const render = isReadOnly ? renderSlotRender : renderSlotEdit;
+        const Slot = (dzProps) => render(__spreadProps(__spreadValues({
+          allow: (field == null ? void 0 : field.type) === "slot" ? field.allow : [],
+          disallow: (field == null ? void 0 : field.type) === "slot" ? field.disallow : []
+        }, dzProps), {
+          zone: propName,
+          content
+        }));
+        return Slot;
+      },
+      config
+    ).props;
+    return mapped;
+  }, [config, item, readOnly, forceReadOnly]);
+  const mergedProps = (0, import_react30.useMemo)(
+    () => __spreadValues(__spreadValues({}, item.props), slotProps),
+    [item.props, slotProps]
+  );
+  return mergedProps;
+}
+
+// components/Render/index.tsx
+var import_react32 = __toESM(require("react"));
+
+// components/SlotRender/index.tsx
+init_react_import();
+var import_shallow3 = require("zustand/react/shallow");
+
+// components/SlotRender/server.tsx
+init_react_import();
+var import_react31 = require("react");
+
+// components/ServerRender/index.tsx
+init_react_import();
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function DropZoneRender({
+  zone,
+  data,
+  areaId = "root",
+  config,
+  metadata = {}
+}) {
+  let zoneCompound = rootDroppableId;
+  let content = (data == null ? void 0 : data.content) || [];
+  if (!data || !config) {
+    return null;
+  }
+  if (areaId !== rootAreaId && zone !== rootZone) {
+    zoneCompound = `${areaId}:${zone}`;
+    content = setupZone(data, zoneCompound).zones[zoneCompound];
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: content.map((item) => {
+    const Component = config.components[item.type];
+    const props = __spreadProps(__spreadValues({}, item.props), {
+      puck: {
+        renderDropZone: ({ zone: zone2 }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          DropZoneRender,
+          {
+            zone: zone2,
+            data,
+            areaId: item.props.id,
+            config,
+            metadata
+          }
+        ),
+        metadata,
+        dragRef: null,
+        isEditing: false
+      }
+    });
+    const renderItem = __spreadProps(__spreadValues({}, item), { props });
+    const propsWithSlots = useSlots(config, renderItem, (props2) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, props2), { config, metadata })));
+    if (Component) {
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Component.render, __spreadValues({}, propsWithSlots), renderItem.props.id);
+    }
+    return null;
+  }) });
+}
+
+// components/SlotRender/server.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var SlotRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SlotRender, __spreadValues({}, props));
+var Item = ({
+  config,
+  item,
+  metadata
+}) => {
+  const Component = config.components[item.type];
+  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    Component.render,
+    __spreadProps(__spreadValues({}, props), {
+      puck: __spreadProps(__spreadValues({}, props.puck), {
+        renderDropZone: DropZoneRender,
+        metadata: metadata || {}
+      })
+    })
+  );
+};
+var SlotRender = (0, import_react31.forwardRef)(
+  function SlotRenderInternal({ className, style, content, config, metadata }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className, style, ref, children: content.map((item) => {
+      if (!config.components[item.type]) {
+        return null;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        Item,
+        {
+          config,
+          item,
+          metadata
+        },
+        item.props.id
+      );
+    }) });
+  }
+);
 
 // components/SlotRender/index.tsx
-init_react_import();
-var import_shallow3 = require("zustand/react/shallow");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var ContextSlotRender = ({
   componentId,
@@ -5445,12 +5223,12 @@ var ContextSlotRender = ({
 
 // components/Render/index.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var renderContext = import_react34.default.createContext({
+var renderContext = import_react32.default.createContext({
   config: { components: {} },
   data: { root: {}, content: [] },
   metadata: {}
 });
-function Render2({
+function Render({
   config,
   data,
   metadata = {}
@@ -5478,7 +5256,7 @@ function Render2({
     { type: "root", props: pageProps },
     (props) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata }))
   );
-  const nextContextValue = (0, import_react34.useMemo)(
+  const nextContextValue = (0, import_react32.useMemo)(
     () => ({
       mode: "render",
       depth: 0
@@ -5507,9 +5285,9 @@ var DropZoneChild = ({
 }) => {
   var _a, _b;
   const metadata = useAppStore((s) => s.metadata);
-  const ctx = (0, import_react35.useContext)(dropZoneContext);
+  const ctx = (0, import_react33.useContext)(dropZoneContext);
   const { depth = 1 } = ctx != null ? ctx : {};
-  const zoneStore = (0, import_react35.useContext)(ZoneStoreContext);
+  const zoneStore = (0, import_react33.useContext)(ZoneStoreContext);
   const nodeProps = useAppStore(
     (0, import_shallow4.useShallow)((s) => {
       var _a2;
@@ -5529,7 +5307,7 @@ var DropZoneChild = ({
     })
   );
   const appStore = useAppStoreApi();
-  const item = (0, import_react35.useMemo)(() => {
+  const item = (0, import_react33.useMemo)(() => {
     if (nodeProps) {
       const expanded = expandNode({
         type: nodeType,
@@ -5542,7 +5320,8 @@ var DropZoneChild = ({
       return {
         type: preview.componentType,
         props: preview.props,
-        previewType: preview.type
+        previewType: preview.type,
+        element: preview.element
       };
     }
     return null;
@@ -5550,7 +5329,7 @@ var DropZoneChild = ({
   const componentConfig = useAppStore(
     (s) => (item == null ? void 0 : item.type) ? s.config.components[item.type] : null
   );
-  const puckProps = (0, import_react35.useMemo)(
+  const puckProps = (0, import_react33.useMemo)(
     () => ({
       renderDropZone: DropZoneEditPure,
       isEditing: true,
@@ -5573,13 +5352,19 @@ 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 = (0, import_react35.useMemo)(
+  const renderPreview = (0, import_react33.useMemo)(
     () => function Preview3() {
+      if (item && "element" in item && item.element) {
+        return (
+          // Safe to use this since the HTML is set by the user
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { dangerouslySetInnerHTML: { __html: item.element.outerHTML } })
+        );
+      }
       return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DrawerItemInner, { name: label, children: overrides.componentItem });
     },
     [componentId, label, overrides]
   );
-  const defaultsProps = (0, import_react35.useMemo)(
+  const defaultsProps = (0, import_react33.useMemo)(
     () => __spreadProps(__spreadValues(__spreadValues({}, componentConfig == null ? void 0 : componentConfig.defaultProps), item == null ? void 0 : item.props), {
       puck: puckProps,
       editMode: true
@@ -5587,7 +5372,7 @@ var DropZoneChild = ({
     }),
     [componentConfig == null ? void 0 : componentConfig.defaultProps, item == null ? void 0 : item.props, puckProps]
   );
-  const defaultedNode = (0, import_react35.useMemo)(
+  const defaultedNode = (0, import_react33.useMemo)(
     () => {
       var _a2;
       return { type: (_a2 = item == null ? void 0 : item.type) != null ? _a2 : nodeType, props: defaultsProps };
@@ -5604,14 +5389,14 @@ var DropZoneChild = ({
     isLoading
   );
   if (!item) return;
-  let Render3 = componentConfig ? componentConfig.render : () => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { style: { padding: 48, textAlign: "center" }, children: [
+  let Render2 = componentConfig ? componentConfig.render : () => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { style: { padding: 48, textAlign: "center" }, children: [
     "No configuration for ",
     item.type
   ] });
   let componentType = item.type;
   const isInserting = "previewType" in item ? item.previewType === "insert" : false;
   if (isInserting) {
-    Render3 = renderPreview;
+    Render2 = renderPreview;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     DraggableComponent,
@@ -5628,18 +5413,18 @@ var DropZoneChild = ({
       userDragAxis: collisionAxis,
       inDroppableZone,
       children: (dragRef) => (componentConfig == null ? void 0 : componentConfig.inline) && !isInserting ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-        Render3,
+        Render2,
         __spreadProps(__spreadValues({}, defaultedPropsWithSlots), {
           puck: __spreadProps(__spreadValues({}, defaultedPropsWithSlots.puck), {
             dragRef
           })
         })
-      ) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref: dragRef, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Render3, __spreadValues({}, defaultedPropsWithSlots)) })
+      ) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref: dragRef, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Render2, __spreadValues({}, defaultedPropsWithSlots)) })
     }
   );
 };
-var DropZoneChildMemo = (0, import_react35.memo)(DropZoneChild);
-var DropZoneEdit = (0, import_react35.forwardRef)(
+var DropZoneChildMemo = (0, import_react33.memo)(DropZoneChild);
+var DropZoneEdit = (0, import_react33.forwardRef)(
   function DropZoneEditInternal({
     zone,
     allow,
@@ -5649,7 +5434,8 @@ var DropZoneEdit = (0, import_react35.forwardRef)(
     minEmptyHeight: userMinEmptyHeight = 128,
     collisionAxis
   }, userRef) {
-    const ctx = (0, import_react35.useContext)(dropZoneContext);
+    const ctx = (0, import_react33.useContext)(dropZoneContext);
+    const appStoreApi = useAppStoreApi();
     const {
       // These all need setting via context
       areaId,
@@ -5686,19 +5472,14 @@ var DropZoneEdit = (0, import_react35.forwardRef)(
         return (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.type;
       })
     );
-    (0, import_react35.useEffect)(() => {
+    (0, import_react33.useEffect)(() => {
       if (!zoneType || zoneType === "dropzone") {
         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]);
-    (0, import_react35.useEffect)(() => {
+    }, [zoneType, appStoreApi]);
+    (0, import_react33.useEffect)(() => {
       if (zoneType === "dropzone") {
         if (zoneCompound !== rootDroppableId) {
           console.warn(
@@ -5707,11 +5488,11 @@ var DropZoneEdit = (0, import_react35.forwardRef)(
         }
       }
     }, [zoneType]);
-    const contentIds = (0, import_react35.useMemo)(() => {
+    const contentIds = (0, import_react33.useMemo)(() => {
       return zoneContentIds || [];
     }, [zoneContentIds]);
-    const ref = (0, import_react35.useRef)(null);
-    const acceptsTarget = (0, import_react35.useCallback)(
+    const ref = (0, import_react33.useRef)(null);
+    const acceptsTarget = (0, import_react33.useCallback)(
       (componentType) => {
         if (!componentType) {
           return true;
@@ -5749,7 +5530,7 @@ var DropZoneEdit = (0, import_react35.forwardRef)(
       }
       return _isEnabled;
     });
-    (0, import_react35.useEffect)(() => {
+    (0, import_react33.useEffect)(() => {
       if (registerLocalZone) {
         registerLocalZone(zoneCompound, targetAccepted || isEnabled);
       }
@@ -5764,8 +5545,8 @@ var DropZoneEdit = (0, import_react35.forwardRef)(
       zoneCompound
     );
     const isDropEnabled = isEnabled && (preview ? contentIdsWithPreview.length === 1 : contentIdsWithPreview.length === 0);
-    const zoneStore = (0, import_react35.useContext)(ZoneStoreContext);
-    (0, import_react35.useEffect)(() => {
+    const zoneStore = (0, import_react33.useContext)(ZoneStoreContext);
+    (0, import_react33.useEffect)(() => {
       const { enabledIndex } = zoneStore.getState();
       zoneStore.setState({
         enabledIndex: __spreadProps(__spreadValues({}, enabledIndex), { [zoneCompound]: isEnabled })
@@ -5784,7 +5565,7 @@ var DropZoneEdit = (0, import_react35.forwardRef)(
         path: path || []
       }
     };
-    const { ref: dropRef } = (0, import_react36.useDroppable)(droppableConfig);
+    const { ref: dropRef } = (0, import_react34.useDroppable)(droppableConfig);
     const isAreaSelected = useAppStore(
       (s) => (s == null ? void 0 : s.selectedItem) && areaId === (s == null ? void 0 : s.selectedItem.props.id)
     );
@@ -5839,7 +5620,7 @@ var DropZoneRenderItem = ({
 }) => {
   const Component = config.components[item.type];
   const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
-  const nextContextValue = (0, import_react35.useMemo)(
+  const nextContextValue = (0, import_react33.useMemo)(
     () => ({
       areaId: props.id,
       depth: 1
@@ -5857,23 +5638,18 @@ var DropZoneRenderItem = ({
   ) }, props.id);
 };
 var DropZoneRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropZoneRender2, __spreadValues({}, props));
-var DropZoneRender2 = (0, import_react35.forwardRef)(
+var DropZoneRender2 = (0, import_react33.forwardRef)(
   function DropZoneRenderInternal({ className, style, zone }, ref) {
-    const ctx = (0, import_react35.useContext)(dropZoneContext);
+    const ctx = (0, import_react33.useContext)(dropZoneContext);
     const { areaId = "root" } = ctx || {};
-    const { config, data, metadata } = (0, import_react35.useContext)(renderContext);
+    const { config, data, metadata } = (0, import_react33.useContext)(renderContext);
     let zoneCompound = `${areaId}:${zone}`;
     let content = (data == null ? void 0 : data.content) || [];
-    (0, import_react35.useEffect)(() => {
+    (0, import_react33.useEffect)(() => {
       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) {
@@ -5900,9 +5676,9 @@ var DropZoneRender2 = (0, import_react35.forwardRef)(
   }
 );
 var DropZonePure = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropZone, __spreadValues({}, props));
-var DropZone = (0, import_react35.forwardRef)(
+var DropZone = (0, import_react33.forwardRef)(
   function DropZone2(props, ref) {
-    const ctx = (0, import_react35.useContext)(dropZoneContext);
+    const ctx = (0, import_react33.useContext)(dropZoneContext);
     if ((ctx == null ? void 0 : ctx.mode) === "edit") {
       return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
     }
@@ -6134,6 +5910,7 @@ var findDeepestCandidate = (position, manager) => {
     });
     filteredCandidates.reverse();
     const primaryCandidate = filteredCandidates[0];
+    if (!primaryCandidate) return { zone: null, area: null };
     const primaryCandidateData = primaryCandidate.data;
     const primaryCandidateIsComponent = "containsActiveZone" in primaryCandidateData;
     const zone = getZoneId2(primaryCandidate);
@@ -6243,12 +6020,12 @@ function getDeepDir(el) {
 var import_state = require("@dnd-kit/state");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var DEBUG3 = false;
-var dragListenerContext = (0, import_react38.createContext)({
+var dragListenerContext = (0, import_react36.createContext)({
   dragListeners: {}
 });
 function useDragListener(type, fn, deps = []) {
-  const { setDragListeners } = (0, import_react38.useContext)(dragListenerContext);
-  (0, import_react38.useEffect)(() => {
+  const { setDragListeners } = (0, import_react36.useContext)(dragListenerContext);
+  (0, import_react36.useEffect)(() => {
     if (setDragListeners) {
       setDragListeners((old) => __spreadProps(__spreadValues({}, old), {
         [type]: [...old[type] || [], fn]
@@ -6258,8 +6035,8 @@ function useDragListener(type, fn, deps = []) {
 }
 var AREA_CHANGE_DEBOUNCE_MS = 100;
 var useTempDisableFallback = (timeout3) => {
-  const lastFallbackDisable = (0, import_react38.useRef)(null);
-  return (0, import_react38.useCallback)((manager) => {
+  const lastFallbackDisable = (0, import_react36.useRef)(null);
+  return (0, import_react36.useCallback)((manager) => {
     collisionStore.setState({ fallbackEnabled: false });
     const fallbackId = generateId();
     lastFallbackDisable.current = fallbackId;
@@ -6278,9 +6055,9 @@ var DragDropContextClient = ({
   const dispatch = useAppStore((s) => s.dispatch);
   const appStore = useAppStoreApi();
   const id = useSafeId();
-  const debouncedParamsRef = (0, import_react38.useRef)(null);
+  const debouncedParamsRef = (0, import_react36.useRef)(null);
   const tempDisableFallback = useTempDisableFallback(100);
-  const [zoneStore] = (0, import_react38.useState)(
+  const [zoneStore] = (0, import_react36.useState)(
     () => (0, import_zustand5.createStore)(() => ({
       zoneDepthIndex: {},
       nextZoneDepthIndex: {},
@@ -6292,7 +6069,7 @@ var DragDropContextClient = ({
       hoveringComponent: null
     }))
   );
-  const getChanged2 = (0, import_react38.useCallback)(
+  const getChanged2 = (0, import_react36.useCallback)(
     (params, id2) => {
       const { zoneDepthIndex = {}, areaDepthIndex = {} } = zoneStore.getState() || {};
       const stateHasZone = Object.keys(zoneDepthIndex).length > 0;
@@ -6313,7 +6090,7 @@ var DragDropContextClient = ({
     },
     [zoneStore]
   );
-  const setDeepestAndCollide = (0, import_react38.useCallback)(
+  const setDeepestAndCollide = (0, import_react36.useCallback)(
     (params, manager) => {
       const { zoneChanged, areaChanged } = getChanged2(params, id);
       if (!zoneChanged && !areaChanged) return;
@@ -6337,7 +6114,7 @@ var DragDropContextClient = ({
     setDeepestDb.cancel();
     debouncedParamsRef.current = null;
   };
-  (0, import_react38.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (DEBUG3) {
       zoneStore.subscribe(
         (s) => {
@@ -6351,7 +6128,7 @@ var DragDropContextClient = ({
       );
     }
   }, []);
-  const [plugins] = (0, import_react38.useState)(() => [
+  const [plugins] = (0, import_react36.useState)(() => [
     ...disableAutoScroll ? import_dom.defaultPreset.plugins.filter((plugin) => plugin !== import_dom.AutoScroller) : import_dom.defaultPreset.plugins,
     createNestedDroppablePlugin(
       {
@@ -6399,10 +6176,10 @@ var DragDropContextClient = ({
     )
   ]);
   const sensors = useSensors();
-  const [dragListeners, setDragListeners] = (0, import_react38.useState)({});
-  const dragMode = (0, import_react38.useRef)(null);
-  const initialSelector = (0, import_react38.useRef)(void 0);
-  const nextContextValue = (0, import_react38.useMemo)(
+  const [dragListeners, setDragListeners] = (0, import_react36.useState)({});
+  const dragMode = (0, import_react36.useRef)(null);
+  const initialSelector = (0, import_react36.useRef)(void 0);
+  const nextContextValue = (0, import_react36.useMemo)(
     () => ({
       mode: "edit",
       areaId: "root",
@@ -6418,7 +6195,7 @@ var DragDropContextClient = ({
         setDragListeners
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        import_react37.DragDropProvider,
+        import_react35.DragDropProvider,
         {
           plugins,
           sensors,
@@ -6538,6 +6315,7 @@ var DragDropContextClient = ({
                     type: "insert",
                     index: targetIndex,
                     zone: targetZone,
+                    element: source.element,
                     props: {
                       id: source.id.toString()
                     }
@@ -6563,7 +6341,8 @@ var DragDropContextClient = ({
                       type: "move",
                       index: targetIndex,
                       zone: targetZone,
-                      props: item.props
+                      props: item.props,
+                      element: source.element
                     }
                   }
                 });
@@ -6593,7 +6372,8 @@ var DragDropContextClient = ({
                       type: "move",
                       index: sourceData.index,
                       zone: sourceData.zone,
-                      props: item.props
+                      props: item.props,
+                      element: source.element
                     }
                   }
                 });
@@ -6648,7 +6428,7 @@ var DragDropContext = ({
 };
 
 // components/Drawer/index.tsx
-var import_react40 = require("@dnd-kit/react");
+var import_react38 = require("@dnd-kit/react");
 var import_jsx_runtime27 = require("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);
@@ -6659,7 +6439,7 @@ var DrawerItemInner = ({
   dragRef,
   isDragDisabled
 }) => {
-  const CustomInner = (0, import_react39.useMemo)(
+  const CustomInner = (0, import_react37.useMemo)(
     () => children || (({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: getClassNameItem2("default"), children: children2 })),
     [children]
   );
@@ -6685,7 +6465,7 @@ var DrawerItemDraggable = ({
   id,
   isDragDisabled
 }) => {
-  const { ref } = (0, import_react40.useDraggable)({
+  const { ref } = (0, import_react38.useDraggable)({
     id,
     data: { componentType: name },
     disabled: isDragDisabled,
@@ -6714,7 +6494,7 @@ var DrawerItem = ({
   isDragDisabled
 }) => {
   const resolvedId = id || name;
-  const [dynamicId, setDynamicId] = (0, import_react39.useState)(generateId(resolvedId));
+  const [dynamicId, setDynamicId] = (0, import_react37.useState)(generateId(resolvedId));
   if (typeof index !== "undefined") {
     console.error(
       "Warning: The `index` prop on Drawer.Item is deprecated and no longer required."
@@ -6754,7 +6534,7 @@ var Drawer = ({
     );
   }
   const id = useSafeId();
-  const { ref } = (0, import_react40.useDroppable)({
+  const { ref } = (0, import_react38.useDroppable)({
     id,
     type: "void",
     collisionPriority: 0
@@ -6776,7 +6556,7 @@ Drawer.Item = DrawerItem;
 
 // components/Puck/index.tsx
 init_react_import();
-var import_react56 = require("react");
+var import_react54 = require("react");
 
 // components/SidebarSection/index.tsx
 init_react_import();
@@ -6787,7 +6567,7 @@ var styles_module_default13 = { "SidebarSection": "_SidebarSection_8boj8_1", "Si
 
 // lib/use-breadcrumbs.ts
 init_react_import();
-var import_react41 = require("react");
+var import_react39 = require("react");
 var useBreadcrumbs = (renderCount) => {
   const selectedId = useAppStore((s) => {
     var _a;
@@ -6799,7 +6579,7 @@ var useBreadcrumbs = (renderCount) => {
     return (_a = s.state.indexes.nodes[selectedId]) == null ? void 0 : _a.path;
   });
   const appStore = useAppStoreApi();
-  return (0, import_react41.useMemo)(() => {
+  return (0, import_react39.useMemo)(() => {
     const breadcrumbs = (path == null ? void 0 : path.map((zoneCompound) => {
       var _a, _b, _c;
       const [componentId] = zoneCompound.split(":");
@@ -6883,7 +6663,7 @@ init_react_import();
 var styles_module_default15 = { "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
-var import_react42 = require("react");
+var import_react40 = require("react");
 var import_shallow5 = require("zustand/react/shallow");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var getClassName20 = get_class_name_factory_default("PuckFields", styles_module_default15);
@@ -6956,7 +6736,7 @@ var FieldsChild = ({ fieldName }) => {
     })
   );
   const appStore = useAppStoreApi();
-  const onChange = (0, import_react42.useCallback)(createOnChange(fieldName, appStore), [
+  const onChange = (0, import_react40.useCallback)(createOnChange(fieldName, appStore), [
     fieldName
   ]);
   const { visible = true } = field != null ? field : {};
@@ -6974,7 +6754,7 @@ var FieldsChild = ({ fieldName }) => {
     }
   ) }, id);
 };
-var FieldsChildMemo = (0, import_react42.memo)(FieldsChild);
+var FieldsChildMemo = (0, import_react40.memo)(FieldsChild);
 var FieldsInternal = ({ wrapFields = true }) => {
   const overrides = useAppStore((s) => s.overrides);
   const componentResolving = useAppStore((s) => {
@@ -6999,7 +6779,7 @@ var FieldsInternal = ({ wrapFields = true }) => {
     })
   );
   const isLoading = fieldsLoading || componentResolving;
-  const Wrapper = (0, import_react42.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
+  const Wrapper = (0, import_react40.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "form",
     {
@@ -7014,14 +6794,14 @@ var FieldsInternal = ({ wrapFields = true }) => {
     }
   );
 };
-var Fields = (0, import_react42.memo)(FieldsInternal);
+var Fields = (0, import_react40.memo)(FieldsInternal);
 
 // components/Puck/components/Components/index.tsx
 init_react_import();
 
 // lib/use-component-list.tsx
 init_react_import();
-var import_react43 = require("react");
+var import_react41 = require("react");
 
 // components/ComponentList/index.tsx
 init_react_import();
@@ -7092,10 +6872,10 @@ ComponentList.Item = ComponentListItem;
 // lib/use-component-list.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var useComponentList = () => {
-  const [componentList, setComponentList] = (0, import_react43.useState)();
+  const [componentList, setComponentList] = (0, import_react41.useState)();
   const config = useAppStore((s) => s.config);
   const uiComponentList = useAppStore((s) => s.state.ui.componentList);
-  (0, import_react43.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     var _a, _b, _c;
     if (Object.keys(uiComponentList).length > 0) {
       const matchedComponents = [];
@@ -7164,22 +6944,22 @@ var useComponentList = () => {
 };
 
 // components/Puck/components/Components/index.tsx
-var import_react44 = require("react");
+var import_react42 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var Components = () => {
   const overrides = useAppStore((s) => s.overrides);
   const componentList = useComponentList();
-  const Wrapper = (0, import_react44.useMemo)(() => overrides.components || "div", [overrides]);
+  const Wrapper = (0, import_react42.useMemo)(() => overrides.components || "div", [overrides]);
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ComponentList, { id: "all" }) });
 };
 
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-var import_react46 = require("react");
+var import_react44 = require("react");
 
 // components/AutoFrame/index.tsx
 init_react_import();
-var import_react45 = require("react");
+var import_react43 = require("react");
 var import_object_hash = __toESM(require("object-hash"));
 var import_react_dom3 = require("react-dom");
 var import_jsx_runtime33 = require("react/jsx-runtime");
@@ -7232,7 +7012,7 @@ var CopyHostStyles = ({
   onStylesLoaded = () => null
 }) => {
   const { document: doc, window: win } = useFrame();
-  (0, import_react45.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (!win || !doc) {
       return () => {
       };
@@ -7391,8 +7171,8 @@ var CopyHostStyles = ({
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children });
 };
-var autoFrameContext = (0, import_react45.createContext)({});
-var useFrame = () => (0, import_react45.useContext)(autoFrameContext);
+var autoFrameContext = (0, import_react43.createContext)({});
+var useFrame = () => (0, import_react43.useContext)(autoFrameContext);
 function AutoFrame(_a) {
   var _b = _a, {
     children,
@@ -7413,11 +7193,11 @@ function AutoFrame(_a) {
     "onNotReady",
     "frameRef"
   ]);
-  const [loaded, setLoaded] = (0, import_react45.useState)(false);
-  const [ctx, setCtx] = (0, import_react45.useState)({});
-  const [mountTarget, setMountTarget] = (0, import_react45.useState)();
-  const [stylesLoaded, setStylesLoaded] = (0, import_react45.useState)(false);
-  (0, import_react45.useEffect)(() => {
+  const [loaded, setLoaded] = (0, import_react43.useState)(false);
+  const [ctx, setCtx] = (0, import_react43.useState)({});
+  const [mountTarget, setMountTarget] = (0, import_react43.useState)();
+  const [stylesLoaded, setStylesLoaded] = (0, import_react43.useState)(false);
+  (0, import_react43.useEffect)(() => {
     var _a2;
     if (frameRef.current) {
       const doc = frameRef.current.contentDocument;
@@ -7469,7 +7249,7 @@ var import_jsx_runtime34 = require("react/jsx-runtime");
 var getClassName22 = get_class_name_factory_default("PuckPreview", styles_module_default17);
 var useBubbleIframeEvents = (ref) => {
   const status = useAppStore((s) => s.status);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     if (ref.current && status === "READY") {
       const iframe = ref.current;
       const handlePointerMove = (event) => {
@@ -7518,7 +7298,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
   const renderData = useAppStore(
     (s) => s.state.ui.previewMode === "edit" ? null : s.state.data
   );
-  const Page = (0, import_react46.useCallback)(
+  const Page = (0, import_react44.useCallback)(
     (pageProps) => {
       var _a, _b;
       const propsWithSlots = useSlots(
@@ -7532,9 +7312,9 @@ var Preview2 = ({ id = "puck-preview" }) => {
     },
     [config]
   );
-  const Frame = (0, import_react46.useMemo)(() => overrides.iframe, [overrides]);
+  const Frame = (0, import_react44.useMemo)(() => overrides.iframe, [overrides]);
   const rootProps = root.props || root;
-  const ref = (0, import_react46.useRef)(null);
+  const ref = (0, import_react44.useRef)(null);
   useBubbleIframeEvents(ref);
   const inner = !renderData ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     Page,
@@ -7548,8 +7328,8 @@ var Preview2 = ({ id = "puck-preview" }) => {
       editMode: true,
       children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DropZonePure, { zone: rootDroppableId })
     })
-  ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Render2, { data: renderData, config });
-  (0, import_react46.useEffect)(() => {
+  ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Render, { data: renderData, config, metadata });
+  (0, import_react44.useEffect)(() => {
     if (!iframe.enabled) {
       setStatus("READY");
     }
@@ -7619,7 +7399,7 @@ var scrollIntoView = (el) => {
 };
 
 // components/LayerTree/index.tsx
-var import_react47 = require("react");
+var import_react45 = require("react");
 
 // lib/on-scroll-end.ts
 init_react_import();
@@ -7654,7 +7434,7 @@ var Layer = ({
   const config = useAppStore((s) => s.config);
   const itemSelector = useAppStore((s) => s.state.ui.itemSelector);
   const dispatch = useAppStore((s) => s.dispatch);
-  const setItemSelector = (0, import_react47.useCallback)(
+  const setItemSelector = (0, import_react45.useCallback)(
     (itemSelector2) => {
       dispatch({ type: "setUi", ui: { itemSelector: itemSelector2 } });
     },
@@ -7674,7 +7454,7 @@ var Layer = ({
     )
   );
   const containsZone = zonesForItem.length > 0;
-  const zoneStore = (0, import_react47.useContext)(ZoneStoreContext);
+  const zoneStore = (0, import_react45.useContext)(ZoneStoreContext);
   const isHovering = useContextStore(
     ZoneStoreContext,
     (s) => s.hoveringComponent === itemId
@@ -7801,7 +7581,7 @@ var LayerTree = ({
 };
 
 // components/Puck/components/Outline/index.tsx
-var import_react48 = require("react");
+var import_react46 = require("react");
 
 // lib/data/find-zones-for-area.ts
 init_react_import();
@@ -7819,7 +7599,7 @@ var Outline = () => {
   const rootZones = useAppStore(
     (0, import_shallow7.useShallow)((s) => findZonesForArea(s.state, "root"))
   );
-  const Wrapper = (0, import_react48.useMemo)(() => outlineOverride || "div", [outlineOverride]);
+  const Wrapper = (0, import_react46.useMemo)(() => outlineOverride || "div", [outlineOverride]);
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Wrapper, { children: rootZones.map((zoneCompound) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     LayerTree,
     {
@@ -7953,11 +7733,11 @@ var getBox = function getBox2(el) {
 };
 
 // components/Puck/components/Canvas/index.tsx
-var import_react50 = require("react");
+var import_react48 = require("react");
 
 // components/ViewportControls/index.tsx
 init_react_import();
-var import_react49 = require("react");
+var import_react47 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
 init_react_import();
@@ -7980,8 +7760,8 @@ var ViewportButton = ({
   onClick
 }) => {
   const viewports = useAppStore((s) => s.state.ui.viewports);
-  const [isActive, setIsActive] = (0, import_react49.useState)(false);
-  (0, import_react49.useEffect)(() => {
+  const [isActive, setIsActive] = (0, import_react47.useState)(false);
+  (0, import_react47.useEffect)(() => {
     setIsActive(width === viewports.current.width);
   }, [width, viewports.current.width]);
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
@@ -8018,7 +7798,7 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
-  const zoomOptions = (0, import_react49.useMemo)(
+  const zoomOptions = (0, import_react47.useMemo)(
     () => [
       ...defaultZoomOptions,
       ...defaultsContainAutoZoom ? [] : [
@@ -8167,17 +7947,17 @@ var Canvas = () => {
       viewports: s.state.ui.viewports
     }))
   );
-  const frameRef = (0, import_react50.useRef)(null);
-  const [showTransition, setShowTransition] = (0, import_react50.useState)(false);
-  const defaultRender = (0, import_react50.useMemo)(() => {
+  const frameRef = (0, import_react48.useRef)(null);
+  const [showTransition, setShowTransition] = (0, import_react48.useState)(false);
+  const defaultRender = (0, import_react48.useMemo)(() => {
     const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children });
     return PuckDefault;
   }, []);
-  const CustomPreview = (0, import_react50.useMemo)(
+  const CustomPreview = (0, import_react48.useMemo)(
     () => overrides.preview || defaultRender,
     [overrides]
   );
-  const getFrameDimensions = (0, import_react50.useCallback)(() => {
+  const getFrameDimensions = (0, import_react48.useCallback)(() => {
     if (frameRef.current) {
       const frame = frameRef.current;
       const box = getBox(frame);
@@ -8185,7 +7965,7 @@ var Canvas = () => {
     }
     return { width: 0, height: 0 };
   }, [frameRef]);
-  const resetAutoZoom = (0, import_react50.useCallback)(
+  const resetAutoZoom = (0, import_react48.useCallback)(
     (newViewports = viewports) => {
       if (frameRef.current) {
         setZoomConfig(
@@ -8199,11 +7979,11 @@ var Canvas = () => {
     },
     [frameRef, zoomConfig, viewports]
   );
-  (0, import_react50.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     setShowTransition(false);
     resetAutoZoom(viewports);
   }, [frameRef, leftSideBarVisible, rightSideBarVisible]);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     const { height: frameHeight } = getFrameDimensions();
     if (viewports.current.height === "auto") {
       setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
@@ -8211,13 +7991,13 @@ var Canvas = () => {
       }));
     }
   }, [zoomConfig.zoom]);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     if (ZOOM_ON_CHANGE) {
       setShowTransition(true);
       resetAutoZoom(viewports);
     }
   }, [viewports.current.width]);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     const cb = () => {
       setShowTransition(false);
       resetAutoZoom();
@@ -8227,8 +8007,8 @@ var Canvas = () => {
       window.removeEventListener("resize", cb);
     };
   }, []);
-  const [showLoader, setShowLoader] = (0, import_react50.useState)(false);
-  (0, import_react50.useEffect)(() => {
+  const [showLoader, setShowLoader] = (0, import_react48.useState)(false);
+  (0, import_react48.useEffect)(() => {
     setTimeout(() => {
       setShowLoader(true);
     }, 500);
@@ -8306,7 +8086,7 @@ var Canvas = () => {
 
 // lib/use-loaded-overrides.ts
 init_react_import();
-var import_react51 = require("react");
+var import_react49 = require("react");
 
 // lib/load-overrides.ts
 init_react_import();
@@ -8345,7 +8125,7 @@ var useLoadedOverrides = ({
   overrides,
   plugins
 }) => {
-  return (0, import_react51.useMemo)(() => {
+  return (0, import_react49.useMemo)(() => {
     return loadOverrides({ overrides, plugins });
   }, [plugins, overrides]);
 };
@@ -8357,14 +8137,14 @@ var DefaultOverride = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime39
 
 // lib/use-inject-css.ts
 init_react_import();
-var import_react52 = require("react");
+var import_react50 = require("react");
 var styles = ``;
 var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
-  const [el, setEl] = (0, import_react52.useState)();
-  (0, import_react52.useEffect)(() => {
+  const [el, setEl] = (0, import_react50.useState)();
+  (0, import_react50.useEffect)(() => {
     setEl(document.createElement("style"));
   }, []);
-  (0, import_react52.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     var _a;
     if (!el || typeof window === "undefined") {
       return;
@@ -8384,10 +8164,10 @@ var useInjectGlobalCss = (iframeEnabled) => {
 
 // lib/use-preview-mode-hotkeys.ts
 init_react_import();
-var import_react53 = require("react");
+var import_react51 = require("react");
 var usePreviewModeHotkeys = () => {
   const appStore = useAppStoreApi();
-  const toggleInteractive = (0, import_react53.useCallback)(() => {
+  const toggleInteractive = (0, import_react51.useCallback)(() => {
     const dispatch = appStore.getState().dispatch;
     dispatch({
       type: "setUi",
@@ -8402,7 +8182,7 @@ var usePreviewModeHotkeys = () => {
 
 // lib/use-puck.ts
 init_react_import();
-var import_react54 = require("react");
+var import_react52 = require("react");
 var import_zustand6 = require("zustand");
 var generateUsePuck = (store) => {
   const history = {
@@ -8433,10 +8213,9 @@ var generateUsePuck = (store) => {
       return { zone: zoneCompound, index };
     }
   };
-  const get = () => storeData;
-  return __spreadProps(__spreadValues({}, storeData), { get });
+  return storeData;
 };
-var UsePuckStoreContext = (0, import_react54.createContext)(
+var UsePuckStoreContext = (0, import_react52.createContext)(
   null
 );
 var convertToPickedStore = (store) => {
@@ -8450,12 +8229,12 @@ var convertToPickedStore = (store) => {
   };
 };
 var useRegisterUsePuckStore = (appStore) => {
-  const [usePuckStore] = (0, import_react54.useState)(
+  const [usePuckStore] = (0, import_react52.useState)(
     () => (0, import_zustand6.createStore)(
       () => generateUsePuck(convertToPickedStore(appStore.getState()))
     )
   );
-  (0, import_react54.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     return appStore.subscribe(
       (store) => convertToPickedStore(store),
       (pickedStore) => {
@@ -8467,7 +8246,7 @@ var useRegisterUsePuckStore = (appStore) => {
 };
 function createUsePuck() {
   return function usePuck2(selector) {
-    const usePuckApi = (0, import_react54.useContext)(UsePuckStoreContext);
+    const usePuckApi = (0, import_react52.useContext)(UsePuckStoreContext);
     if (!usePuckApi) {
       throw new Error("usePuck must be used inside <Puck>.");
     }
@@ -8479,7 +8258,7 @@ function createUsePuck() {
   };
 }
 function usePuck() {
-  (0, import_react54.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     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."
     );
@@ -8487,7 +8266,7 @@ function usePuck() {
   return createUsePuck()((s) => s);
 }
 function useGetPuck() {
-  const usePuckApi = (0, import_react54.useContext)(UsePuckStoreContext);
+  const usePuckApi = (0, import_react52.useContext)(UsePuckStoreContext);
   if (!usePuckApi) {
     throw new Error("usePuckGet must be used inside <Puck>.");
   }
@@ -8499,7 +8278,7 @@ var import_fast_deep_equal3 = __toESM(require("fast-deep-equal"));
 
 // components/Puck/components/Header/index.tsx
 init_react_import();
-var import_react55 = require("react");
+var import_react53 = require("react");
 
 // components/MenuBar/index.tsx
 init_react_import();
@@ -8581,7 +8360,7 @@ var HeaderInner = () => {
   } = usePropsContext();
   const dispatch = useAppStore((s) => s.dispatch);
   const appStore = useAppStoreApi();
-  const defaultHeaderRender = (0, import_react55.useMemo)(() => {
+  const defaultHeaderRender = (0, import_react53.useMemo)(() => {
     if (renderHeader) {
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
@@ -8596,7 +8375,7 @@ var HeaderInner = () => {
     }
     return DefaultOverride;
   }, [renderHeader]);
-  const defaultHeaderActionsRender = (0, import_react55.useMemo)(() => {
+  const defaultHeaderActionsRender = (0, import_react53.useMemo)(() => {
     if (renderHeaderActions) {
       console.warn(
         "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
@@ -8616,7 +8395,7 @@ var HeaderInner = () => {
   const CustomHeaderActions = useAppStore(
     (s) => s.overrides.headerActions || defaultHeaderActionsRender
   );
-  const [menuOpen, setMenuOpen] = (0, import_react55.useState)(false);
+  const [menuOpen, setMenuOpen] = (0, import_react53.useState)(false);
   const rootTitle = useAppStore((s) => {
     var _a, _b;
     const rootData = (_a = s.state.indexes.nodes["root"]) == null ? void 0 : _a.data;
@@ -8626,7 +8405,7 @@ var HeaderInner = () => {
   const rightSideBarVisible = useAppStore(
     (s) => s.state.ui.rightSideBarVisible
   );
-  const toggleSidebars = (0, import_react55.useCallback)(
+  const toggleSidebars = (0, import_react53.useCallback)(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -8729,7 +8508,7 @@ var HeaderInner = () => {
     }
   );
 };
-var Header = (0, import_react55.memo)(HeaderInner);
+var Header = (0, import_react53.memo)(HeaderInner);
 
 // components/Puck/index.tsx
 var import_jsx_runtime42 = require("react/jsx-runtime");
@@ -8744,11 +8523,11 @@ var FieldSideBar = () => {
   );
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SidebarSection, { noPadding: true, noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Fields, {}) });
 };
-var propsContext = (0, import_react56.createContext)({});
+var propsContext = (0, import_react54.createContext)({});
 function PropsProvider(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(propsContext.Provider, { value: props, children: props.children });
 }
-var usePropsContext = () => (0, import_react56.useContext)(propsContext);
+var usePropsContext = () => (0, import_react54.useContext)(propsContext);
 function PuckProvider({ children }) {
   const {
     config,
@@ -8764,14 +8543,14 @@ function PuckProvider({ children }) {
     metadata,
     onAction
   } = usePropsContext();
-  const iframe = (0, import_react56.useMemo)(
+  const iframe = (0, import_react54.useMemo)(
     () => __spreadValues({
       enabled: true,
       waitForStyles: true
     }, _iframe),
     [_iframe]
   );
-  const [generatedAppState] = (0, import_react56.useState)(() => {
+  const [generatedAppState] = (0, import_react54.useState)(() => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
@@ -8831,7 +8610,7 @@ function PuckProvider({ children }) {
     return walkAppState(newAppState, config);
   });
   const { appendData = true } = _initialHistory || {};
-  const [blendedHistories] = (0, import_react56.useState)(
+  const [blendedHistories] = (0, import_react54.useState)(
     [
       ...(_initialHistory == null ? void 0 : _initialHistory.histories) || [],
       ...appendData ? [{ state: generatedAppState }] : []
@@ -8851,7 +8630,7 @@ function PuckProvider({ children }) {
     overrides,
     plugins
   });
-  const generateAppStore = (0, import_react56.useCallback)(
+  const generateAppStore = (0, import_react54.useCallback)(
     (state) => {
       return {
         state,
@@ -8875,15 +8654,15 @@ function PuckProvider({ children }) {
       metadata
     ]
   );
-  const [appStore] = (0, import_react56.useState)(
+  const [appStore] = (0, import_react54.useState)(
     () => createAppStore(generateAppStore(initialAppState))
   );
-  (0, import_react56.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (process.env.NODE_ENV !== "production") {
       window.__PUCK_INTERNAL_DO_NOT_USE = { appStore };
     }
   }, [appStore]);
-  (0, import_react56.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     const state = appStore.getState().state;
     appStore.setState(__spreadValues({}, generateAppStore(state)));
   }, [config, plugins, loadedOverrides, viewports, iframe, onAction, metadata]);
@@ -8892,8 +8671,8 @@ function PuckProvider({ children }) {
     index: initialHistoryIndex,
     initialAppState
   });
-  const previousData = (0, import_react56.useRef)(null);
-  (0, import_react56.useEffect)(() => {
+  const previousData = (0, import_react54.useRef)(null);
+  (0, import_react54.useEffect)(() => {
     appStore.subscribe(
       (s) => s.state.data,
       (data) => {
@@ -8907,7 +8686,7 @@ function PuckProvider({ children }) {
   }, []);
   useRegisterPermissionsSlice(appStore, permissions);
   const uPuckStore = useRegisterUsePuckStore(appStore);
-  (0, import_react56.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     const { resolveAndCommitData } = appStore.getState();
     resolveAndCommitData();
   }, []);
@@ -8919,7 +8698,7 @@ function PuckLayout({ children }) {
     dnd,
     initialHistory: _initialHistory
   } = usePropsContext();
-  const iframe = (0, import_react56.useMemo)(
+  const iframe = (0, import_react54.useMemo)(
     () => __spreadValues({
       enabled: true,
       waitForStyles: true
@@ -8932,7 +8711,7 @@ function PuckLayout({ children }) {
     (s) => s.state.ui.rightSideBarVisible
   );
   const dispatch = useAppStore((s) => s.dispatch);
-  (0, import_react56.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -8956,17 +8735,17 @@ function PuckLayout({ children }) {
     };
   }, []);
   const overrides = useAppStore((s) => s.overrides);
-  const CustomPuck = (0, import_react56.useMemo)(
+  const CustomPuck = (0, import_react54.useMemo)(
     () => overrides.puck || DefaultOverride,
     [overrides]
   );
-  const [mounted, setMounted] = (0, import_react56.useState)(false);
-  (0, import_react56.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react54.useState)(false);
+  (0, import_react54.useEffect)(() => {
     setMounted(true);
   }, []);
   const ready = useAppStore((s) => s.status === "READY");
   useMonitorHotkeys();
-  (0, import_react56.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (ready && iframe.enabled) {
       const frameDoc = getFrame();
       if (frameDoc) {
@@ -9005,6 +8784,230 @@ Puck.Components = Components;
 Puck.Fields = Fields;
 Puck.Outline = Outline;
 Puck.Preview = Preview2;
+
+// lib/migrate.ts
+init_react_import();
+var migrations = [
+  // Migrate root to root.props
+  (data) => {
+    const rootProps = data.root.props || data.root;
+    if (Object.keys(data.root).length > 0 && !data.root.props) {
+      console.warn(
+        "Migration applied: Root props moved from `root` to `root.props`."
+      );
+      return __spreadProps(__spreadValues({}, data), {
+        root: {
+          props: __spreadValues({}, rootProps)
+        }
+      });
+    }
+    return data;
+  },
+  // Migrate zones to slots
+  (data, config, migrationOptions) => {
+    var _a, _b;
+    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, _b2, _c;
+      if (zoneType === "dropzone") {
+        const [id, slotName] = zoneCompound.split(":");
+        const nodeData = indexes.nodes[id].data;
+        const componentType = nodeData.type;
+        const configForComponent = id === "root" ? config.root : config.components[componentType];
+        if (((_b2 = (_a2 = configForComponent == null ? void 0 : configForComponent.fields) == null ? void 0 : _a2[slotName]) == null ? void 0 : _b2.type) === "slot") {
+          updatedItems[id] = __spreadProps(__spreadValues({}, nodeData), {
+            props: __spreadProps(__spreadValues(__spreadValues({}, nodeData.props), (_c = updatedItems[id]) == null ? void 0 : _c.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];
+    });
+    if (migrationOptions == null ? void 0 : migrationOptions.migrateDynamicZonesForComponent) {
+      const unmigratedZonesGrouped = {};
+      Object.keys((_a = updated.data.zones) != null ? _a : {}).forEach((zoneCompound) => {
+        var _a2;
+        const [componentId, propName] = zoneCompound.split(":");
+        const content = (_a2 = updated.data.zones) == null ? void 0 : _a2[zoneCompound];
+        if (!content) {
+          return;
+        }
+        if (!unmigratedZonesGrouped[componentId]) {
+          unmigratedZonesGrouped[componentId] = {};
+        }
+        if (!unmigratedZonesGrouped[componentId][propName]) {
+          unmigratedZonesGrouped[componentId][propName] = content;
+        }
+      });
+      Object.keys(unmigratedZonesGrouped).forEach((componentId) => {
+        updated.data = walkTree(updated.data, config, (content) => {
+          return content.map((child) => {
+            var _a2;
+            if (child.props.id !== componentId) {
+              return child;
+            }
+            const migrateFn = (_a2 = migrationOptions == null ? void 0 : migrationOptions.migrateDynamicZonesForComponent) == null ? void 0 : _a2[child.type];
+            if (!migrateFn) {
+              return child;
+            }
+            const zones = unmigratedZonesGrouped[componentId];
+            const migratedProps = migrateFn(child.props, zones);
+            Object.keys(zones).forEach((propName) => {
+              var _a3;
+              const zoneCompound = `${componentId}:${propName}`;
+              console.log(`\u2713 Success: Migrated "${zoneCompound}" DropZone`);
+              (_a3 = updated.data.zones) == null ? true : delete _a3[zoneCompound];
+            });
+            return __spreadProps(__spreadValues({}, child), {
+              props: migratedProps
+            });
+          });
+        });
+      });
+    }
+    Object.keys((_b = updated.data.zones) != null ? _b : {}).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, config, migrationOptions) {
+  return migrations == null ? void 0 : migrations.reduce(
+    (acc, migration) => migration(acc, config, migrationOptions),
+    data
+  );
+}
+
+// lib/transform-props.ts
+init_react_import();
+
+// lib/data/default-data.ts
+init_react_import();
+var defaultData = (data) => __spreadProps(__spreadValues({}, data), {
+  root: data.root || {},
+  content: data.content || []
+});
+
+// lib/transform-props.ts
+function transformProps(data, propTransforms, config = { components: {} }) {
+  const mapItem = (item) => {
+    if (propTransforms[item.type]) {
+      return __spreadProps(__spreadValues({}, item), {
+        props: __spreadValues({
+          id: item.props.id
+        }, propTransforms[item.type](item.props))
+      });
+    }
+    return item;
+  };
+  const defaultedData = defaultData(data);
+  const rootProps = defaultedData.root.props || defaultedData.root;
+  let newRoot = __spreadValues({}, defaultedData.root);
+  if (propTransforms["root"]) {
+    newRoot.props = propTransforms["root"](rootProps);
+  }
+  const dataWithUpdatedRoot = __spreadProps(__spreadValues({}, defaultedData), { root: newRoot });
+  const updatedData = walkTree(
+    dataWithUpdatedRoot,
+    config,
+    (content) => content.map(mapItem)
+  );
+  if (!defaultedData.root.props) {
+    updatedData.root = updatedData.root.props;
+  }
+  return updatedData;
+}
+
+// lib/resolve-all-data.ts
+init_react_import();
+
+// lib/data/to-component.ts
+init_react_import();
+var toComponent = (item) => {
+  return "type" in item ? item : __spreadProps(__spreadValues({}, item), {
+    props: __spreadProps(__spreadValues({}, item.props), { id: "root" }),
+    type: "root"
+  });
+};
+
+// lib/resolve-all-data.ts
+function resolveAllData(_0, _1) {
+  return __async(this, arguments, function* (data, config, metadata = {}, onResolveStart, onResolveEnd) {
+    var _a;
+    const defaultedData = defaultData(data);
+    const resolveNode = (_node) => __async(this, null, function* () {
+      const node = toComponent(_node);
+      onResolveStart == null ? void 0 : onResolveStart(node);
+      const resolved = (yield resolveComponentData(
+        node,
+        config,
+        metadata,
+        () => {
+        },
+        () => {
+        },
+        "force"
+      )).node;
+      const resolvedDeep = yield mapSlots(
+        resolved,
+        processContent,
+        config
+      );
+      onResolveEnd == null ? void 0 : onResolveEnd(toComponent(resolvedDeep));
+      return resolvedDeep;
+    });
+    const processContent = (content) => __async(this, null, function* () {
+      return Promise.all(content.map(resolveNode));
+    });
+    const processZones = () => __async(this, null, function* () {
+      var _a2;
+      const zones = (_a2 = data.zones) != null ? _a2 : {};
+      Object.entries(zones).forEach((_02) => __async(this, [_02], function* ([zoneKey, content]) {
+        zones[zoneKey] = yield Promise.all(content.map(resolveNode));
+      }));
+      return zones;
+    });
+    const dynamic = {
+      root: yield resolveNode(defaultedData.root),
+      content: yield processContent(defaultedData.content),
+      zones: yield processZones()
+    };
+    Object.keys((_a = defaultedData.zones) != null ? _a : {}).forEach((zoneKey) => __async(this, null, function* () {
+      const content = defaultedData.zones[zoneKey];
+      dynamic.zones[zoneKey] = yield processContent(content);
+    }), {});
+    return dynamic;
+  });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Action,