@measured/puck 0.20.0-canary.68dd73b8 → 0.20.0-canary.6cf56a8a

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_react22 = 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,627 +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, 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
-  );
-}
-
-// 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);
@@ -1981,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]) {
@@ -2133,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 = {
@@ -2237,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 }
@@ -2349,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,
@@ -2416,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();
@@ -2434,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) {
@@ -2540,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({
@@ -2550,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,
       () => {
@@ -2558,7 +2119,7 @@ var useRegisterPermissionsSlice = (appStore, globalPermissions) => {
       }
     );
   }, []);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     return appStore.subscribe(
       (s) => s.config,
       () => {
@@ -2570,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: {},
@@ -2580,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;
@@ -2635,16 +2196,78 @@ var useRegisterFieldsSlice = (appStore, id) => {
         }));
       }
     }),
-    [id]
+    [id]
+  );
+  (0, import_react8.useEffect)(() => {
+    resolveFields(true);
+    return appStore.subscribe(
+      (s) => s.state.indexes.nodes[id || "root"],
+      () => resolveFields()
+    );
+  }, [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
   );
-  (0, import_react10.useEffect)(() => {
-    resolveFields(true);
-    return appStore.subscribe(
-      (s) => s.state.indexes.nodes[id || "root"],
-      () => resolveFields()
-    );
-  }, [id]);
-};
+  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();
@@ -2663,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" }
@@ -2839,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 = {
@@ -2870,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;
@@ -3206,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,
@@ -3216,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) => {
@@ -3281,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 || {}
   });
@@ -3299,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) {
@@ -3315,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 },
@@ -3325,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 = ({
@@ -3337,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);
@@ -3352,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 {
@@ -3370,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) => {
@@ -3395,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;
@@ -3424,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),
@@ -3462,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({
@@ -3470,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,
@@ -3489,7 +3140,7 @@ var ArrayField = ({
                             readOnly
                           }),
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                               "div",
                               {
                                 ref: handleRef,
@@ -3514,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",
@@ -3535,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",
@@ -3560,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}`;
@@ -3579,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,
@@ -3619,7 +3270,7 @@ var ArrayField = ({
                     _arrayId
                   );
                 }) }),
-                !addDisabled && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                !addDisabled && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3637,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 })
                   }
                 )
               ]
@@ -3651,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,
@@ -3665,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"),
@@ -3712,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();
@@ -3724,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();
@@ -3732,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"),
@@ -3767,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({
@@ -3787,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();
@@ -3807,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, {
@@ -3837,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({
@@ -3866,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 }) })
       ]
     })
   );
@@ -3876,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 = {};
@@ -3893,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)}`;
@@ -3927,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({
@@ -3948,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",
@@ -3971,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({
@@ -3989,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"),
@@ -4008,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",
@@ -4020,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,
@@ -4053,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"),
@@ -4064,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" },
@@ -4074,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 }) })
             ]
           }
         ) })
@@ -4093,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,
@@ -4108,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."
@@ -4118,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,
@@ -4151,7 +3802,7 @@ var ExternalField = ({
 
 // components/AutoField/fields/RadioField/index.tsx
 init_react_import();
-var import_react21 = require("react");
+var import_react19 = require("react");
 
 // lib/safe-json-parse.ts
 init_react_import();
@@ -4165,7 +3816,7 @@ var safeJsonParse = (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,
@@ -4178,26 +3829,26 @@ var RadioField = ({
   labelIcon,
   Label: Label2
 }) => {
-  const flatOptions = (0, import_react21.useMemo)(
+  const flatOptions = (0, import_react19.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)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassName11("radioGroupItems"), id, children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
         "label",
         {
           className: getClassName11("radio"),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               "input",
               {
                 type: "radio",
@@ -4217,7 +3868,7 @@ var RadioField = ({
                 checked: value === option.value
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: getClassName11("radioInner"), children: option.label || option.value })
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassName11("radioInner"), children: option.label || option.value })
           ]
         },
         option.label + option.value
@@ -4228,8 +3879,8 @@ var RadioField = ({
 
 // components/AutoField/fields/SelectField/index.tsx
 init_react_import();
-var import_react22 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var getClassName12 = get_class_name_factory_default("Input", styles_module_default2);
 var SelectField = ({
   field,
@@ -4242,20 +3893,20 @@ var SelectField = ({
   readOnly,
   id
 }) => {
-  const flatOptions = (0, import_react22.useMemo)(
+  const flatOptions = (0, import_react20.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,
@@ -4272,7 +3923,7 @@ var SelectField = ({
             }
           },
           value,
-          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "option",
             {
               label: option.label,
@@ -4288,7 +3939,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,
@@ -4301,13 +3952,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,
@@ -4334,7 +3985,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,
@@ -4352,25 +4003,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 = `${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,
@@ -4402,17 +4053,17 @@ var ObjectField = ({
 
 // lib/use-safe-id.ts
 init_react_import();
-var import_react23 = __toESM(require("react"));
+var import_react21 = __toESM(require("react"));
 var useSafeId = () => {
-  if (typeof import_react23.default.useId !== "undefined") {
-    return import_react23.default.useId();
+  if (typeof import_react21.default.useId !== "undefined") {
+    return import_react21.default.useId();
   }
-  const [id] = (0, import_react23.useState)(generateId());
+  const [id] = (0, import_react21.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 = ({
@@ -4424,11 +4075,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
   ] });
@@ -4441,14 +4092,14 @@ var FieldLabelInternal = ({
   readOnly
 }) => {
   const overrides = useAppStore((s) => s.overrides);
-  const Wrapper = (0, import_react24.useMemo)(
+  const Wrapper = (0, import_react22.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,
@@ -4468,7 +4119,7 @@ function AutoFieldInternal(props) {
     var _a2;
     return (_a2 = s.selectedItem) == null ? void 0 : _a2.readOnly;
   });
-  const nestedFieldContext = (0, import_react24.useContext)(NestedFieldContext);
+  const nestedFieldContext = (0, import_react22.useContext)(NestedFieldContext);
   const { id, Label: Label2 = FieldLabelInternal } = props;
   const field = props.field;
   const label = field.label;
@@ -4502,7 +4153,7 @@ function AutoFieldInternal(props) {
     Label: Label2,
     id: resolvedId
   });
-  const onFocus = (0, import_react24.useCallback)(
+  const onFocus = (0, import_react22.useCallback)(
     (e) => {
       if (mergedProps.name && (e.target.nodeName === "INPUT" || e.target.nodeName === "TEXTAREA")) {
         e.stopPropagation();
@@ -4516,7 +4167,7 @@ function AutoFieldInternal(props) {
     },
     [mergedProps.name]
   );
-  const onBlur = (0, import_react24.useCallback)((e) => {
+  const onBlur = (0, import_react22.useCallback)((e) => {
     if ("name" in e.target) {
       dispatch({
         type: "setUi",
@@ -4544,14 +4195,14 @@ function AutoFieldInternal(props) {
     children = defaultFields[field.type](mergedProps);
     FieldComponent = 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: (_i = nestedFieldContext.localName) != null ? _i : mergedProps.name
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "div",
         {
           className: getClassNameWrapper(),
@@ -4560,7 +4211,7 @@ function AutoFieldInternal(props) {
           onClick: (e) => {
             e.stopPropagation();
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(FieldComponent, __spreadProps(__spreadValues({}, mergedProps), { children }))
+          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(FieldComponent, __spreadProps(__spreadValues({}, mergedProps), { children }))
         }
       )
     }
@@ -4569,20 +4220,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_react22.useState)(value);
+  const onChangeLocal = (0, import_react22.useCallback)(
     (val, ui) => {
       setLocalValue(val);
       onChange(val, ui);
     },
     [onChange]
   );
-  (0, import_react24.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!isFocused) {
       setLocalValue(value);
     }
   }, [value]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!isFocused) {
       if (value !== localValue) {
         setLocalValue(value);
@@ -4593,11 +4244,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_react22.useMemo)(() => {
+    const DefaultLabel2 = (labelProps) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "div",
       __spreadProps(__spreadValues({}, labelProps), {
         className: getClassName15({ readOnly: props.readOnly })
@@ -4608,7 +4259,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
@@ -4633,7 +4284,7 @@ var import_react35 = require("react");
 
 // components/DraggableComponent/index.tsx
 init_react_import();
-var import_react28 = require("react");
+var import_react26 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
 init_react_import();
@@ -4663,11 +4314,11 @@ function getDeepScrollPosition(element) {
 
 // components/DropZone/context.tsx
 init_react_import();
-var import_react25 = require("react");
+var import_react23 = 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_react23.createContext)(null);
+var ZoneStoreContext = (0, import_react23.createContext)(
   (0, import_zustand3.createStore)(() => ({
     zoneDepthIndex: {},
     nextZoneDepthIndex: {},
@@ -4683,14 +4334,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_react23.useCallback)(
     (zoneCompound) => {
       dispatch({
         type: "registerZone",
@@ -4699,13 +4350,13 @@ var DropZoneProvider = ({
     },
     [dispatch]
   );
-  const memoValue = (0, import_react25.useMemo)(
+  const memoValue = (0, import_react23.useMemo)(
     () => __spreadValues({
       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
@@ -4729,11 +4380,11 @@ function accumulateTransform(el) {
 
 // lib/use-context-store.ts
 init_react_import();
-var import_react26 = require("react");
+var import_react24 = 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_react24.useContext)(context);
   if (!store) {
     throw new Error("useContextStore must be used inside context");
   }
@@ -4742,10 +4393,10 @@ function useContextStore(context, selector) {
 
 // lib/dnd/use-on-drag-finished.ts
 init_react_import();
-var import_react27 = require("react");
+var import_react25 = require("react");
 var useOnDragFinished = (cb, deps = []) => {
   const appStore = useAppStoreApi();
-  return (0, import_react27.useCallback)(() => {
+  return (0, import_react25.useCallback)(() => {
     let dispose = () => {
     };
     const processDragging = (isDragging2) => {
@@ -4773,7 +4424,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;
@@ -4784,12 +4435,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,
@@ -4815,9 +4466,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_react26.useContext)(dropZoneContext);
+  const [localZones, setLocalZones] = (0, import_react26.useState)({});
+  const registerLocalZone = (0, import_react26.useCallback)(
     (zoneCompound2, active) => {
       var _a;
       (_a = ctx == null ? void 0 : ctx.registerLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2, active);
@@ -4827,7 +4478,7 @@ var DraggableComponent = ({
     },
     [setLocalZones]
   );
-  const unregisterLocalZone = (0, import_react28.useCallback)(
+  const unregisterLocalZone = (0, import_react26.useCallback)(
     (zoneCompound2) => {
       var _a;
       (_a = ctx == null ? void 0 : ctx.unregisterLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2);
@@ -4850,9 +4501,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_react26.useContext)(ZoneStoreContext);
+  const [dragAxis, setDragAxis] = (0, import_react26.useState)(userDragAxis || autoDragAxis);
+  const dynamicCollisionDetector = (0, import_react26.useMemo)(
     () => createDynamicCollisionDetector(dragAxis),
     [dragAxis]
   );
@@ -4884,7 +4535,7 @@ var DraggableComponent = ({
     },
     feedback: "clone"
   });
-  (0, import_react28.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     const isEnabled = zoneStore.getState().enabledIndex[zoneCompound];
     sortable.droppable.disabled = !isEnabled;
     sortable.draggable.disabled = !permissions.drag;
@@ -4901,8 +4552,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_react26.useRef)(null);
+  const refSetter = (0, import_react26.useCallback)(
     (el) => {
       sortableRef(el);
       if (el) {
@@ -4911,14 +4562,14 @@ var DraggableComponent = ({
     },
     [sortableRef]
   );
-  const [portalEl, setPortalEl] = (0, import_react28.useState)();
-  (0, import_react28.useEffect)(() => {
+  const [portalEl, setPortalEl] = (0, import_react26.useState)();
+  (0, import_react26.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_react26.useCallback)(() => {
     var _a, _b, _c;
     if (!ref.current) return;
     const rect = ref.current.getBoundingClientRect();
@@ -4943,11 +4594,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_react26.useState)();
+  const sync = (0, import_react26.useCallback)(() => {
     setStyle(getStyle());
   }, [ref.current, iframe]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (ref.current) {
       const observer = new ResizeObserver(sync);
       observer.observe(ref.current);
@@ -4957,13 +4608,13 @@ var DraggableComponent = ({
     }
   }, [ref.current]);
   const registerNode = useAppStore((s) => s.nodes.registerNode);
-  const hideOverlay = (0, import_react28.useCallback)(() => {
+  const hideOverlay = (0, import_react26.useCallback)(() => {
     setIsVisible(false);
   }, []);
-  const showOverlay = (0, import_react28.useCallback)(() => {
+  const showOverlay = (0, import_react26.useCallback)(() => {
     setIsVisible(true);
   }, []);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     var _a;
     registerNode(id, {
       methods: { sync, showOverlay, hideOverlay },
@@ -4980,11 +4631,11 @@ var DraggableComponent = ({
       });
     };
   }, [id, zoneCompound, index, componentType, sync]);
-  const CustomActionBar = (0, import_react28.useMemo)(
+  const CustomActionBar = (0, import_react26.useMemo)(
     () => overrides.actionBar || DefaultActionBar,
     [overrides.actionBar]
   );
-  const onClick = (0, import_react28.useCallback)(
+  const onClick = (0, import_react26.useCallback)(
     (e) => {
       e.stopPropagation();
       dispatch({
@@ -4997,7 +4648,7 @@ var DraggableComponent = ({
     [index, zoneCompound, id]
   );
   const appStore = useAppStoreApi();
-  const onSelectParent = (0, import_react28.useCallback)(() => {
+  const onSelectParent = (0, import_react26.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;
@@ -5018,26 +4669,26 @@ var DraggableComponent = ({
       }
     });
   }, [ctx, path]);
-  const onDuplicate = (0, import_react28.useCallback)(() => {
+  const onDuplicate = (0, import_react26.useCallback)(() => {
     dispatch({
       type: "duplicate",
       sourceIndex: index,
       sourceZone: zoneCompound
     });
   }, [index, zoneCompound]);
-  const onDelete = (0, import_react28.useCallback)(() => {
+  const onDelete = (0, import_react26.useCallback)(() => {
     dispatch({
       type: "remove",
       index,
       zone: zoneCompound
     });
   }, [index, zoneCompound]);
-  const [hover, setHover] = (0, import_react28.useState)(false);
+  const [hover, setHover] = (0, import_react26.useState)(false);
   const indicativeHover = useContextStore(
     ZoneStoreContext,
     (s) => s.hoveringComponent === id
   );
-  (0, import_react28.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!ref.current) {
       return;
     }
@@ -5073,7 +4724,8 @@ var DraggableComponent = ({
       el.removeEventListener("mouseout", _onMouseOut);
     };
   }, [
-    ref,
+    ref.current,
+    // Remount attributes if the element changes
     onClick,
     containsActiveZone,
     zoneCompound,
@@ -5081,10 +4733,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_react26.useState)(false);
+  const [dragFinished, setDragFinished] = (0, import_react26.useState)(true);
+  const [_, startTransition] = (0, import_react26.useTransition)();
+  (0, import_react26.useEffect)(() => {
     startTransition(() => {
       if (hover || indicativeHover || isSelected) {
         sync();
@@ -5095,7 +4747,7 @@ var DraggableComponent = ({
       }
     });
   }, [hover, indicativeHover, isSelected, iframe]);
-  const [thisWasDragging, setThisWasDragging] = (0, import_react28.useState)(false);
+  const [thisWasDragging, setThisWasDragging] = (0, import_react26.useState)(false);
   const onDragFinished = useOnDragFinished((finished) => {
     if (finished) {
       startTransition(() => {
@@ -5106,15 +4758,15 @@ var DraggableComponent = ({
       setDragFinished(false);
     }
   });
-  (0, import_react28.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (thisIsDragging) {
       setThisWasDragging(true);
     }
   }, [thisIsDragging]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (thisWasDragging) return onDragFinished();
   }, [thisWasDragging, onDragFinished]);
-  const syncActionsPosition = (0, import_react28.useCallback)(
+  const syncActionsPosition = (0, import_react26.useCallback)(
     (el) => {
       if (el) {
         const view = el.ownerDocument.defaultView;
@@ -5139,7 +4791,7 @@ var DraggableComponent = ({
     },
     [zoom]
   );
-  (0, import_react28.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (userDragAxis) {
       setDragAxis(userDragAxis);
       return;
@@ -5153,11 +4805,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_react26.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_react26.useMemo)(
     () => __spreadProps(__spreadValues({}, ctx), {
       areaId: id,
       zoneCompound,
@@ -5176,9 +4828,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({
@@ -5190,15 +4842,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"),
@@ -5210,14 +4862,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 }) })
                         ]
                       }
                     )
@@ -5225,7 +4877,7 @@ var DraggableComponent = ({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: getClassName16("overlay") })
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName16("overlay") })
           ]
         }
       ),
@@ -5244,7 +4896,7 @@ var import_react36 = require("@dnd-kit/react");
 
 // components/DropZone/lib/use-min-empty-height.ts
 init_react_import();
-var import_react29 = require("react");
+var import_react27 = require("react");
 var getNumItems = (appStore, zoneCompound) => appStore.getState().state.indexes.zones[zoneCompound].contentIds.length;
 var useMinEmptyHeight = ({
   zoneCompound,
@@ -5252,8 +4904,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_react27.useState)(0);
+  const [isAnimating, setIsAnimating] = (0, import_react27.useState)(false);
   const { draggedItem, isZone } = useContextStore(ZoneStoreContext, (s) => {
     var _a, _b;
     return {
@@ -5261,7 +4913,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_react27.useRef)(0);
   const onDragFinished = useOnDragFinished(
     (finished) => {
       var _a;
@@ -5296,7 +4948,7 @@ var useMinEmptyHeight = ({
     },
     [appStore, prevHeight, zoneCompound]
   );
-  (0, import_react29.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (draggedItem && ref.current) {
       if (isZone) {
         const rect = ref.current.getBoundingClientRect();
@@ -5327,15 +4979,15 @@ function assignRefs(refs, node) {
 
 // components/DropZone/lib/use-content-with-preview.ts
 init_react_import();
-var import_react32 = require("react");
+var import_react30 = 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_react28 = require("@dnd-kit/react");
+var import_react29 = require("react");
 function useRenderedCallback(callback, deps) {
-  const manager = (0, import_react30.useDragDropManager)();
-  return (0, import_react31.useCallback)(
+  const manager = (0, import_react28.useDragDropManager)();
+  return (0, import_react29.useCallback)(
     (...args) => __async(this, null, function* () {
       yield manager == null ? void 0 : manager.renderer.rendering;
       return callback(...args);
@@ -5346,14 +4998,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_react30.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_react30.useState)(contentIds);
+  const [localPreview, setLocalPreview] = (0, import_react30.useState)(
     preview
   );
   const updateContent = useRenderedCallback(
@@ -5388,7 +5040,7 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
     },
     []
   );
-  (0, import_react32.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     var _a;
     const s = zoneStore.getState();
     const draggedItemId = (_a = s.draggedItem) == null ? void 0 : _a.id;
@@ -5406,16 +5058,16 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
 
 // components/DropZone/lib/use-drag-axis.ts
 init_react_import();
-var import_react33 = require("react");
+var import_react31 = 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_react31.useState)(
     collisionAxis || DEFAULT_DRAG_AXIS
   );
-  const calculateDragAxis = (0, import_react33.useCallback)(() => {
+  const calculateDragAxis = (0, import_react31.useCallback)(() => {
     if (ref.current) {
       const computedStyle = window.getComputedStyle(ref.current);
       if (computedStyle.display === "grid") {
@@ -5427,7 +5079,7 @@ var useDragAxis = (ref, collisionAxis) => {
       }
     }
   }, [ref.current]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     const onViewportChange = () => {
       calculateDragAxis();
     };
@@ -5436,20 +5088,145 @@ var useDragAxis = (ref, collisionAxis) => {
       window.removeEventListener("viewportchange", onViewportChange);
     };
   }, []);
-  (0, import_react33.useEffect)(calculateDragAxis, [status, collisionAxis]);
+  (0, import_react31.useEffect)(calculateDragAxis, [status, collisionAxis]);
   return [dragAxis, calculateDragAxis];
 };
-
-// components/DropZone/index.tsx
-var import_shallow4 = require("zustand/react/shallow");
-
-// components/Render/index.tsx
-init_react_import();
-var import_react34 = __toESM(require("react"));
+
+// components/DropZone/index.tsx
+var import_shallow4 = require("zustand/react/shallow");
+
+// components/Render/index.tsx
+init_react_import();
+
+// lib/use-slots.tsx
+init_react_import();
+var import_react32 = require("react");
+function useSlots(config, item, renderSlotEdit, renderSlotRender = renderSlotEdit, readOnly, forceReadOnly) {
+  const slotProps = (0, import_react32.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_react32.useMemo)(
+    () => __spreadValues(__spreadValues({}, item.props), slotProps),
+    [item.props, slotProps]
+  );
+  return mergedProps;
+}
+
+// components/Render/index.tsx
+var import_react34 = __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_react33 = 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_react33.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,
@@ -5483,7 +5260,7 @@ var renderContext = import_react34.default.createContext({
   data: { root: {}, content: [] },
   metadata: {}
 });
-function Render2({
+function Render({
   config,
   data,
   metadata = {}
@@ -5575,7 +5352,8 @@ var DropZoneChild = ({
       return {
         type: preview.componentType,
         props: preview.props,
-        previewType: preview.type
+        previewType: preview.type,
+        element: preview.element
       };
     }
     return null;
@@ -5608,6 +5386,12 @@ 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)(
     () => 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]
@@ -5637,14 +5421,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,
@@ -5661,13 +5445,13 @@ 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)) })
     }
   );
 };
@@ -6563,6 +6347,7 @@ var DragDropContextClient = ({
                     type: "insert",
                     index: targetIndex,
                     zone: targetZone,
+                    element: source.element,
                     props: {
                       id: source.id.toString()
                     }
@@ -6588,7 +6373,8 @@ var DragDropContextClient = ({
                       type: "move",
                       index: targetIndex,
                       zone: targetZone,
-                      props: item.props
+                      props: item.props,
+                      element: source.element
                     }
                   }
                 });
@@ -6618,7 +6404,8 @@ var DragDropContextClient = ({
                       type: "move",
                       index: sourceData.index,
                       zone: sourceData.zone,
-                      props: item.props
+                      props: item.props,
+                      element: source.element
                     }
                   }
                 });
@@ -7573,7 +7360,7 @@ 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, metadata });
+  ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Render, { data: renderData, config, metadata });
   (0, import_react46.useEffect)(() => {
     if (!iframe.enabled) {
       setStatus("READY");
@@ -9029,6 +8816,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,