@measured/puck 0.20.0-canary.7d869af1 → 0.20.0-canary.82bd49a3

package/dist/{chunk-FNRZXWXT.mjs → chunk-AQUDTV7N.mjs}

@@ -2,46 +2,91 @@ import {
   SlotRender,
   SlotRenderPure,
   __async,
+  __commonJS,
   __objRest,
   __spreadProps,
   __spreadValues,
-  appStoreContext,
-  createAppStore,
+  __toESM,
   defaultAppState,
   defaultSlots,
   defaultViewports,
   expandNode,
-  generateId,
-  getBox,
-  getInlineTextTransform,
-  getItem,
+  getChanged,
   getSlotTransform,
-  get_class_name_factory_default,
   init_react_import,
-  insert,
-  insertAction,
-  makeStatePublic,
-  monitorHotkeys,
-  populateIds,
-  reorder,
-  replace,
+  resolveComponentData,
   rootAreaId,
   rootDroppableId,
   rootZone,
   setupZone,
-  useAppStore,
-  useAppStoreApi,
   useFieldTransforms,
-  useHotkey,
-  useMonitorHotkeys,
-  useRegisterFieldsSlice,
-  useRegisterHistorySlice,
-  useRegisterPermissionsSlice,
-  useResetAutoZoom,
   useSlots,
   walkAppState,
-  walkField
-} from "./chunk-IP64IXIP.mjs";
+  walkField,
+  walkTree
+} from "./chunk-HUKJ36SA.mjs";
+
+// ../../node_modules/classnames/index.js
+var require_classnames = __commonJS({
+  "../../node_modules/classnames/index.js"(exports, module) {
+    "use strict";
+    init_react_import();
+    (function() {
+      "use strict";
+      var hasOwn = {}.hasOwnProperty;
+      function classNames() {
+        var classes = "";
+        for (var i = 0; i < arguments.length; i++) {
+          var arg = arguments[i];
+          if (arg) {
+            classes = appendClass(classes, parseValue(arg));
+          }
+        }
+        return classes;
+      }
+      function parseValue(arg) {
+        if (typeof arg === "string" || typeof arg === "number") {
+          return arg;
+        }
+        if (typeof arg !== "object") {
+          return "";
+        }
+        if (Array.isArray(arg)) {
+          return classNames.apply(null, arg);
+        }
+        if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
+          return arg.toString();
+        }
+        var classes = "";
+        for (var key in arg) {
+          if (hasOwn.call(arg, key) && arg[key]) {
+            classes = appendClass(classes, key);
+          }
+        }
+        return classes;
+      }
+      function appendClass(value, newClass) {
+        if (!newClass) {
+          return value;
+        }
+        if (value) {
+          return value + " " + newClass;
+        }
+        return value + newClass;
+      }
+      if (typeof module !== "undefined" && module.exports) {
+        classNames.default = classNames;
+        module.exports = classNames;
+      } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
+        define("classnames", [], function() {
+          return classNames;
+        });
+      } else {
+        window.classNames = classNames;
+      }
+    })();
+  }
+});
 
 // types/API/Overrides.ts
 init_react_import();
@@ -61,6 +106,33 @@ var overrideKeys = [
 // components/ActionBar/index.tsx
 init_react_import();
 
+// lib/get-class-name-factory.ts
+init_react_import();
+var import_classnames = __toESM(require_classnames());
+var getClassNameFactory = (rootClass, styles2, config = { baseClass: "" }) => (options = {}) => {
+  if (typeof options === "string") {
+    const descendant = options;
+    const style = styles2[`${rootClass}-${descendant}`];
+    if (style) {
+      return config.baseClass + styles2[`${rootClass}-${descendant}`] || "";
+    }
+    return "";
+  } else if (typeof options === "object") {
+    const modifiers = options;
+    const prefixedModifiers = {};
+    for (let modifier in modifiers) {
+      prefixedModifiers[styles2[`${rootClass}--${modifier}`]] = modifiers[modifier];
+    }
+    const c = styles2[rootClass];
+    return config.baseClass + (0, import_classnames.default)(__spreadValues({
+      [c]: !!c
+    }, prefixedModifiers));
+  } else {
+    return config.baseClass + styles2[rootClass] || "";
+  }
+};
+var get_class_name_factory_default = getClassNameFactory;
+
 // css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css#css-module
 init_react_import();
 var styles_module_default = { "ActionBar": "_ActionBar_rvadt_1", "ActionBar-label": "_ActionBar-label_rvadt_18", "ActionBar-action": "_ActionBar-action_rvadt_30", "ActionBar-group": "_ActionBar-group_rvadt_38" };
@@ -98,22 +170,1440 @@ var Action = ({
     children
   }
 );
-var Group = ({ children }) => /* @__PURE__ */ jsx("div", { className: getClassName("group"), children });
-var Label = ({ label }) => /* @__PURE__ */ jsx("div", { className: getClassName("label"), children: label });
-ActionBar.Action = Action;
-ActionBar.Label = Label;
-ActionBar.Group = Group;
+var Group = ({ children }) => /* @__PURE__ */ jsx("div", { className: getClassName("group"), children });
+var Label = ({ label }) => /* @__PURE__ */ jsx("div", { className: getClassName("label"), children: label });
+ActionBar.Action = Action;
+ActionBar.Label = Label;
+ActionBar.Group = Group;
+
+// components/IconButton/IconButton.tsx
+init_react_import();
+import { useState } from "react";
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css#css-module
+init_react_import();
+var IconButton_module_default = { "IconButton": "_IconButton_swpni_1", "IconButton--disabled": "_IconButton--disabled_swpni_20", "IconButton-title": "_IconButton-title_swpni_33" };
+
+// components/Loader/index.tsx
+init_react_import();
+
+// lib/index.ts
+init_react_import();
+
+// lib/filter.ts
+init_react_import();
+
+// lib/data/reorder.ts
+init_react_import();
+var reorder = (list, startIndex, endIndex) => {
+  const result = Array.from(list);
+  const [removed] = result.splice(startIndex, 1);
+  result.splice(endIndex, 0, removed);
+  return result;
+};
+
+// lib/data/replace.ts
+init_react_import();
+var replace = (list, index, newItem) => {
+  const result = Array.from(list);
+  result.splice(index, 1);
+  result.splice(index, 0, newItem);
+  return result;
+};
+
+// lib/use-reset-auto-zoom.ts
+init_react_import();
+
+// store/index.ts
+init_react_import();
+
+// reducer/index.ts
+init_react_import();
+
+// reducer/actions/set.ts
+init_react_import();
+var setAction = (state, action, appStore) => {
+  if (typeof action.state === "object") {
+    const newState = __spreadValues(__spreadValues({}, state), action.state);
+    if (action.state.indexes) {
+      return newState;
+    }
+    console.warn(
+      "`set` is expensive and may cause unnecessary re-renders. Consider using a more atomic action instead."
+    );
+    return walkAppState(newState, appStore.config);
+  }
+  return __spreadValues(__spreadValues({}, state), action.state(state));
+};
+
+// reducer/actions/insert.ts
+init_react_import();
+
+// lib/data/insert.ts
+init_react_import();
+var insert = (list, index, item) => {
+  const result = Array.from(list || []);
+  result.splice(index, 0, item);
+  return result;
+};
+
+// lib/generate-id.ts
+init_react_import();
+import { v4 as uuidv4 } from "uuid";
+var generateId = (type) => type ? `${type}-${uuidv4()}` : uuidv4();
+
+// lib/data/get-ids-for-parent.ts
+init_react_import();
+var getIdsForParent = (zoneCompound, state) => {
+  const [parentId] = zoneCompound.split(":");
+  const node = state.indexes.nodes[parentId];
+  return ((node == null ? void 0 : node.path) || []).map((p) => p.split(":")[0]);
+};
+
+// lib/data/populate-ids.ts
+init_react_import();
+var populateIds = (data, config, override = false) => {
+  const id = generateId(data.type);
+  return walkTree(
+    __spreadProps(__spreadValues({}, data), {
+      props: override ? __spreadProps(__spreadValues({}, data.props), { id }) : __spreadValues({}, data.props)
+    }),
+    config,
+    (contents) => contents.map((item) => {
+      const id2 = generateId(item.type);
+      return __spreadProps(__spreadValues({}, item), {
+        props: override ? __spreadProps(__spreadValues({}, item.props), { id: id2 }) : __spreadValues({ id: id2 }, item.props)
+      });
+    })
+  );
+};
+
+// reducer/actions/insert.ts
+function insertAction(state, action, appStore) {
+  const id = action.id || generateId(action.componentType);
+  const emptyComponentData = populateIds(
+    {
+      type: action.componentType,
+      props: __spreadProps(__spreadValues({}, appStore.config.components[action.componentType].defaultProps || {}), {
+        id
+      })
+    },
+    appStore.config
+  );
+  const [parentId] = action.destinationZone.split(":");
+  const idsInPath = getIdsForParent(action.destinationZone, state);
+  return walkAppState(
+    state,
+    appStore.config,
+    (content, zoneCompound) => {
+      if (zoneCompound === action.destinationZone) {
+        return insert(
+          content || [],
+          action.destinationIndex,
+          emptyComponentData
+        );
+      }
+      return content;
+    },
+    (childItem, path) => {
+      if (childItem.props.id === id || childItem.props.id === parentId) {
+        return childItem;
+      } else if (idsInPath.includes(childItem.props.id)) {
+        return childItem;
+      } else if (path.includes(action.destinationZone)) {
+        return childItem;
+      }
+      return null;
+    }
+  );
+}
+
+// reducer/actions/replace.ts
+init_react_import();
+var replaceAction = (state, action, appStore) => {
+  const [parentId] = action.destinationZone.split(":");
+  const idsInPath = getIdsForParent(action.destinationZone, state);
+  const originalId = state.indexes.zones[action.destinationZone].contentIds[action.destinationIndex];
+  const idChanged = originalId !== action.data.props.id;
+  if (idChanged) {
+    throw new Error(
+      `Can't change the id during a replace action. Please us "remove" and "insert" to define a new node.`
+    );
+  }
+  const 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
+init_react_import();
+var remove = (list, index) => {
+  const result = Array.from(list);
+  result.splice(index, 1);
+  return result;
+};
+
+// reducer/actions/move.ts
+var moveAction = (state, action, appStore) => {
+  if (action.sourceZone === action.destinationZone && action.sourceIndex === action.destinationIndex) {
+    return state;
+  }
+  const item = getItem(
+    { zone: action.sourceZone, index: action.sourceIndex },
+    state
+  );
+  if (!item) return state;
+  const idsInSourcePath = getIdsForParent(action.sourceZone, state);
+  const idsInDestinationPath = getIdsForParent(action.destinationZone, state);
+  return walkAppState(
+    state,
+    appStore.config,
+    (content, zoneCompound) => {
+      if (zoneCompound === action.sourceZone && zoneCompound === action.destinationZone) {
+        return insert(
+          remove(content, action.sourceIndex),
+          action.destinationIndex,
+          item
+        );
+      } else if (zoneCompound === action.sourceZone) {
+        return remove(content, action.sourceIndex);
+      } else if (zoneCompound === action.destinationZone) {
+        return insert(content, action.destinationIndex, item);
+      }
+      return content;
+    },
+    (childItem, path) => {
+      const [sourceZoneParent] = action.sourceZone.split(":");
+      const [destinationZoneParent] = action.destinationZone.split(":");
+      const childId = childItem.props.id;
+      if (sourceZoneParent === childId || destinationZoneParent === childId || item.props.id === childId || idsInSourcePath.indexOf(childId) > -1 || idsInDestinationPath.indexOf(childId) > -1 || path.includes(action.destinationZone)) {
+        return childItem;
+      }
+      return null;
+    }
+  );
+};
+
+// reducer/actions/reorder.ts
+var reorderAction = (state, action, appStore) => {
+  return moveAction(
+    state,
+    {
+      type: "move",
+      sourceIndex: action.sourceIndex,
+      sourceZone: action.destinationZone,
+      destinationIndex: action.destinationIndex,
+      destinationZone: action.destinationZone
+    },
+    appStore
+  );
+};
+
+// reducer/actions/remove.ts
+init_react_import();
+var removeAction = (state, action, appStore) => {
+  const item = getItem({ index: action.index, zone: action.zone }, state);
+  const nodesToDelete = Object.entries(state.indexes.nodes).reduce(
+    (acc, [nodeId, nodeData]) => {
+      const pathIds = nodeData.path.map((p) => p.split(":")[0]);
+      if (pathIds.includes(item.props.id)) {
+        return [...acc, nodeId];
+      }
+      return acc;
+    },
+    [item.props.id]
+  );
+  const newState = walkAppState(
+    state,
+    appStore.config,
+    (content, zoneCompound) => {
+      if (zoneCompound === action.zone) {
+        return remove(content, action.index);
+      }
+      return content;
+    }
+  );
+  Object.keys(newState.data.zones || {}).forEach((zoneCompound) => {
+    const parentId = zoneCompound.split(":")[0];
+    if (nodesToDelete.includes(parentId) && newState.data.zones) {
+      delete newState.data.zones[zoneCompound];
+    }
+  });
+  Object.keys(newState.indexes.zones).forEach((zoneCompound) => {
+    const parentId = zoneCompound.split(":")[0];
+    if (nodesToDelete.includes(parentId)) {
+      delete newState.indexes.zones[zoneCompound];
+    }
+  });
+  nodesToDelete.forEach((id) => {
+    delete newState.indexes.nodes[id];
+  });
+  return newState;
+};
+
+// reducer/actions/register-zone.ts
+init_react_import();
+var zoneCache = {};
+function registerZoneAction(state, action) {
+  if (zoneCache[action.zone]) {
+    return __spreadProps(__spreadValues({}, state), {
+      data: __spreadProps(__spreadValues({}, state.data), {
+        zones: __spreadProps(__spreadValues({}, state.data.zones), {
+          [action.zone]: zoneCache[action.zone]
+        })
+      }),
+      indexes: __spreadProps(__spreadValues({}, state.indexes), {
+        zones: __spreadProps(__spreadValues({}, state.indexes.zones), {
+          [action.zone]: __spreadProps(__spreadValues({}, state.indexes.zones[action.zone]), {
+            contentIds: zoneCache[action.zone].map((item) => item.props.id),
+            type: "dropzone"
+          })
+        })
+      })
+    });
+  }
+  return __spreadProps(__spreadValues({}, state), { data: setupZone(state.data, action.zone) });
+}
+function unregisterZoneAction(state, action) {
+  const _zones = __spreadValues({}, state.data.zones || {});
+  const zoneIndex = __spreadValues({}, state.indexes.zones || {});
+  if (_zones[action.zone]) {
+    zoneCache[action.zone] = _zones[action.zone];
+    delete _zones[action.zone];
+  }
+  delete zoneIndex[action.zone];
+  return __spreadProps(__spreadValues({}, state), {
+    data: __spreadProps(__spreadValues({}, state.data), {
+      zones: _zones
+    }),
+    indexes: __spreadProps(__spreadValues({}, state.indexes), {
+      zones: zoneIndex
+    })
+  });
+}
+
+// reducer/actions/set-data.ts
+init_react_import();
+var setDataAction = (state, action, appStore) => {
+  if (typeof action.data === "object") {
+    console.warn(
+      "`setData` is expensive and may cause unnecessary re-renders. Consider using a more atomic action instead."
+    );
+    return walkAppState(
+      __spreadProps(__spreadValues({}, state), {
+        data: __spreadValues(__spreadValues({}, state.data), action.data)
+      }),
+      appStore.config
+    );
+  }
+  return walkAppState(
+    __spreadProps(__spreadValues({}, state), {
+      data: __spreadValues(__spreadValues({}, state.data), action.data(state.data))
+    }),
+    appStore.config
+  );
+};
+
+// reducer/actions/set-ui.ts
+init_react_import();
+var setUiAction = (state, action) => {
+  if (typeof action.ui === "object") {
+    return __spreadProps(__spreadValues({}, state), {
+      ui: __spreadValues(__spreadValues({}, state.ui), action.ui)
+    });
+  }
+  return __spreadProps(__spreadValues({}, state), {
+    ui: __spreadValues(__spreadValues({}, state.ui), action.ui(state.ui))
+  });
+};
+
+// lib/data/make-state-public.ts
+init_react_import();
+var makeStatePublic = (state) => {
+  const { data, ui } = state;
+  return { data, ui };
+};
+
+// reducer/actions.tsx
+init_react_import();
+
+// reducer/index.ts
+function storeInterceptor(reducer, record, onAction) {
+  return (state, action) => {
+    const newAppState = reducer(state, action);
+    const isValidType = ![
+      "registerZone",
+      "unregisterZone",
+      "setData",
+      "setUi",
+      "set"
+    ].includes(action.type);
+    if (typeof action.recordHistory !== "undefined" ? action.recordHistory : isValidType) {
+      if (record) record(newAppState);
+    }
+    onAction == null ? void 0 : onAction(action, makeStatePublic(newAppState), makeStatePublic(state));
+    return newAppState;
+  };
+}
+function createReducer({
+  record,
+  onAction,
+  appStore
+}) {
+  return storeInterceptor(
+    (state, action) => {
+      if (action.type === "set") {
+        return setAction(state, action, appStore);
+      }
+      if (action.type === "insert") {
+        return insertAction(state, action, appStore);
+      }
+      if (action.type === "replace") {
+        return replaceAction(state, action, appStore);
+      }
+      if (action.type === "replaceRoot") {
+        return replaceRootAction(state, action, appStore);
+      }
+      if (action.type === "duplicate") {
+        return duplicateAction(state, action, appStore);
+      }
+      if (action.type === "reorder") {
+        return reorderAction(state, action, appStore);
+      }
+      if (action.type === "move") {
+        return moveAction(state, action, appStore);
+      }
+      if (action.type === "remove") {
+        return removeAction(state, action, appStore);
+      }
+      if (action.type === "registerZone") {
+        return registerZoneAction(state, action);
+      }
+      if (action.type === "unregisterZone") {
+        return unregisterZoneAction(state, action);
+      }
+      if (action.type === "setData") {
+        return setDataAction(state, action, appStore);
+      }
+      if (action.type === "setUi") {
+        return setUiAction(state, action);
+      }
+      return state;
+    },
+    record,
+    onAction
+  );
+}
+
+// store/index.ts
+import { create as create2, useStore } from "zustand";
+import { subscribeWithSelector as subscribeWithSelector2 } from "zustand/middleware";
+import { createContext, useContext } from "react";
+
+// store/slices/history.ts
+init_react_import();
+import { useEffect as useEffect2 } from "react";
+
+// lib/use-hotkey.ts
+init_react_import();
+import { useEffect } from "react";
+import { create } from "zustand";
+import { subscribeWithSelector } from "zustand/middleware";
+var keyCodeMap = {
+  ControlLeft: "ctrl",
+  ControlRight: "ctrl",
+  MetaLeft: "meta",
+  MetaRight: "meta",
+  ShiftLeft: "shift",
+  ShiftRight: "shift",
+  KeyA: "a",
+  KeyB: "b",
+  KeyC: "c",
+  KeyD: "d",
+  KeyE: "e",
+  KeyF: "f",
+  KeyG: "g",
+  KeyH: "h",
+  KeyI: "i",
+  KeyJ: "j",
+  KeyK: "k",
+  KeyL: "l",
+  KeyM: "m",
+  KeyN: "n",
+  KeyO: "o",
+  KeyP: "p",
+  KeyQ: "q",
+  KeyR: "r",
+  KeyS: "s",
+  KeyT: "t",
+  KeyU: "u",
+  KeyV: "v",
+  KeyW: "w",
+  KeyX: "x",
+  KeyY: "y",
+  KeyZ: "z"
+};
+var useHotkeyStore = create()(
+  subscribeWithSelector((set) => ({
+    held: {},
+    hold: (key) => set((s) => s.held[key] ? s : { held: __spreadProps(__spreadValues({}, s.held), { [key]: true }) }),
+    release: (key) => set((s) => s.held[key] ? { held: __spreadProps(__spreadValues({}, s.held), { [key]: false }) } : s),
+    reset: (held = {}) => set(() => ({ held })),
+    triggers: {}
+  }))
+);
+var monitorHotkeys = (doc) => {
+  const onKeyDown = (e) => {
+    const key = keyCodeMap[e.code];
+    if (key) {
+      useHotkeyStore.getState().hold(key);
+      const { held, triggers } = useHotkeyStore.getState();
+      Object.values(triggers).forEach(({ combo, cb }) => {
+        const conditionMet = Object.entries(combo).every(
+          ([key2, value]) => value === !!held[key2]
+        ) && Object.entries(held).every(
+          ([key2, value]) => value === !!combo[key2]
+        );
+        if (conditionMet) {
+          e.preventDefault();
+          cb();
+        }
+      });
+      if (key !== "meta" && key !== "ctrl" && key !== "shift") {
+        useHotkeyStore.getState().release(key);
+      }
+    }
+  };
+  const onKeyUp = (e) => {
+    const key = keyCodeMap[e.code];
+    if (key) {
+      if (key === "meta") {
+        useHotkeyStore.getState().reset();
+      } else {
+        useHotkeyStore.getState().release(key);
+      }
+    }
+  };
+  const onVisibilityChanged = (e) => {
+    if (document.visibilityState === "hidden") {
+      useHotkeyStore.getState().reset();
+    }
+  };
+  doc.addEventListener("keydown", onKeyDown);
+  doc.addEventListener("keyup", onKeyUp);
+  doc.addEventListener("visibilitychange", onVisibilityChanged);
+  return () => {
+    doc.removeEventListener("keydown", onKeyDown);
+    doc.removeEventListener("keyup", onKeyUp);
+    doc.removeEventListener("visibilitychange", onVisibilityChanged);
+  };
+};
+var useMonitorHotkeys = () => {
+  useEffect(() => monitorHotkeys(document), []);
+};
+var useHotkey = (combo, cb) => {
+  useEffect(
+    () => useHotkeyStore.setState((s) => ({
+      triggers: __spreadProps(__spreadValues({}, s.triggers), {
+        [`${Object.keys(combo).join("+")}`]: { combo, cb }
+      })
+    })),
+    []
+  );
+};
+
+// store/slices/history.ts
+var EMPTY_HISTORY_INDEX = 0;
+function debounce(func, timeout3 = 300) {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      func(...args);
+    }, timeout3);
+  };
+}
+var tidyState = (state) => {
+  return __spreadProps(__spreadValues({}, state), {
+    ui: __spreadProps(__spreadValues({}, state.ui), {
+      field: {
+        focus: null
+      }
+    })
+  });
+};
+var createHistorySlice = (set, get) => {
+  const record = debounce((state) => {
+    const { histories, index } = get().history;
+    const history = {
+      state,
+      id: generateId("history")
+    };
+    const newHistories = [...histories.slice(0, index + 1), history];
+    set({
+      history: __spreadProps(__spreadValues({}, get().history), {
+        histories: newHistories,
+        index: newHistories.length - 1
+      })
+    });
+  }, 250);
+  return {
+    initialAppState: {},
+    index: EMPTY_HISTORY_INDEX,
+    histories: [],
+    hasPast: () => get().history.index > EMPTY_HISTORY_INDEX,
+    hasFuture: () => get().history.index < get().history.histories.length - 1,
+    prevHistory: () => {
+      const { history } = get();
+      return history.hasPast() ? history.histories[history.index - 1] : null;
+    },
+    nextHistory: () => {
+      const s = get().history;
+      return s.hasFuture() ? s.histories[s.index + 1] : null;
+    },
+    currentHistory: () => get().history.histories[get().history.index],
+    back: () => {
+      var _a;
+      const { history, dispatch } = get();
+      if (history.hasPast()) {
+        const state = tidyState(
+          ((_a = history.prevHistory()) == null ? void 0 : _a.state) || history.initialAppState
+        );
+        dispatch({
+          type: "set",
+          state
+        });
+        set({ history: __spreadProps(__spreadValues({}, history), { index: history.index - 1 }) });
+      }
+    },
+    forward: () => {
+      var _a;
+      const { history, dispatch } = get();
+      if (history.hasFuture()) {
+        const state = (_a = history.nextHistory()) == null ? void 0 : _a.state;
+        dispatch({ type: "set", state: state ? tidyState(state) : {} });
+        set({ history: __spreadProps(__spreadValues({}, history), { index: history.index + 1 }) });
+      }
+    },
+    setHistories: (histories) => {
+      var _a;
+      const { dispatch, history } = get();
+      dispatch({
+        type: "set",
+        state: ((_a = histories[histories.length - 1]) == null ? void 0 : _a.state) || history.initialAppState
+      });
+      set({ history: __spreadProps(__spreadValues({}, history), { histories, index: histories.length - 1 }) });
+    },
+    setHistoryIndex: (index) => {
+      var _a;
+      const { dispatch, history } = get();
+      dispatch({
+        type: "set",
+        state: ((_a = history.histories[index]) == null ? void 0 : _a.state) || history.initialAppState
+      });
+      set({ history: __spreadProps(__spreadValues({}, history), { index }) });
+    },
+    record
+  };
+};
+function useRegisterHistorySlice(appStore, {
+  histories,
+  index,
+  initialAppState
+}) {
+  useEffect2(
+    () => appStore.setState({
+      history: __spreadProps(__spreadValues({}, appStore.getState().history), {
+        histories,
+        index,
+        initialAppState
+      })
+    }),
+    [histories, index, initialAppState]
+  );
+  const back = () => {
+    appStore.getState().history.back();
+  };
+  const forward = () => {
+    appStore.getState().history.forward();
+  };
+  useHotkey({ meta: true, z: true }, back);
+  useHotkey({ meta: true, shift: true, z: true }, forward);
+  useHotkey({ meta: true, y: true }, forward);
+  useHotkey({ ctrl: true, z: true }, back);
+  useHotkey({ ctrl: true, shift: true, z: true }, forward);
+  useHotkey({ ctrl: true, y: true }, forward);
+}
+
+// store/slices/nodes.ts
+init_react_import();
+var createNodesSlice = (set, get) => ({
+  nodes: {},
+  registerNode: (id, node) => {
+    const s = get().nodes;
+    const emptyNode = {
+      id,
+      methods: {
+        sync: () => null,
+        hideOverlay: () => null,
+        showOverlay: () => null
+      },
+      element: null
+    };
+    const existingNode = s.nodes[id];
+    set({
+      nodes: __spreadProps(__spreadValues({}, s), {
+        nodes: __spreadProps(__spreadValues({}, s.nodes), {
+          [id]: __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, emptyNode), existingNode), node), {
+            id
+          })
+        })
+      })
+    });
+  },
+  unregisterNode: (id) => {
+    const s = get().nodes;
+    const existingNode = s.nodes[id];
+    if (existingNode) {
+      const newNodes = __spreadValues({}, s.nodes);
+      delete newNodes[id];
+      set({
+        nodes: __spreadProps(__spreadValues({}, s), {
+          nodes: newNodes
+        })
+      });
+    }
+  }
+});
+
+// store/slices/permissions.ts
+init_react_import();
+import { useEffect as useEffect3 } from "react";
+
+// lib/data/flatten-data.ts
+init_react_import();
+var flattenData = (state, config) => {
+  const data = [];
+  walkAppState(
+    state,
+    config,
+    (content) => content,
+    (item) => {
+      data.push(item);
+      return null;
+    }
+  );
+  return data;
+};
+
+// store/slices/permissions.ts
+var createPermissionsSlice = (set, get) => {
+  const resolvePermissions = (..._0) => __async(void 0, [..._0], function* (params = {}, force) {
+    const { state, permissions, config } = get();
+    const { cache, globalPermissions } = permissions;
+    const resolveDataForItem = (item2, force2 = false) => __async(void 0, null, function* () {
+      var _a, _b, _c;
+      const { config: config2, state: appState, setComponentLoading } = get();
+      const componentConfig = item2.type === "root" ? config2.root : config2.components[item2.type];
+      if (!componentConfig) {
+        return;
+      }
+      const initialPermissions = __spreadValues(__spreadValues({}, globalPermissions), componentConfig.permissions);
+      if (componentConfig.resolvePermissions) {
+        const changed = getChanged(item2, (_a = cache[item2.props.id]) == null ? void 0 : _a.lastData);
+        if (Object.values(changed).some((el) => el === true) || force2) {
+          const clearTimeout2 = setComponentLoading(item2.props.id, true, 50);
+          const resolvedPermissions = yield componentConfig.resolvePermissions(
+            item2,
+            {
+              changed,
+              lastPermissions: ((_b = cache[item2.props.id]) == null ? void 0 : _b.lastPermissions) || null,
+              permissions: initialPermissions,
+              appState: makeStatePublic(appState),
+              lastData: ((_c = cache[item2.props.id]) == null ? void 0 : _c.lastData) || null
+            }
+          );
+          const latest = get().permissions;
+          set({
+            permissions: __spreadProps(__spreadValues({}, latest), {
+              cache: __spreadProps(__spreadValues({}, latest.cache), {
+                [item2.props.id]: {
+                  lastData: item2,
+                  lastPermissions: resolvedPermissions
+                }
+              }),
+              resolvedPermissions: __spreadProps(__spreadValues({}, latest.resolvedPermissions), {
+                [item2.props.id]: resolvedPermissions
+              })
+            })
+          });
+          clearTimeout2();
+        }
+      }
+    });
+    const resolveDataForRoot = (force2 = false) => {
+      const { state: appState } = get();
+      resolveDataForItem(
+        // Shim the root data in by conforming to component data shape
+        {
+          type: "root",
+          props: __spreadProps(__spreadValues({}, appState.data.root.props), { id: "root" })
+        },
+        force2
+      );
+    };
+    const { item, type, root } = params;
+    if (item) {
+      yield resolveDataForItem(item, force);
+    } else if (type) {
+      flattenData(state, config).filter((item2) => item2.type === type).map((item2) => __async(void 0, null, function* () {
+        yield resolveDataForItem(item2, force);
+      }));
+    } else if (root) {
+      resolveDataForRoot(force);
+    } else {
+      flattenData(state, config).map((item2) => __async(void 0, null, function* () {
+        yield resolveDataForItem(item2, force);
+      }));
+    }
+  });
+  const refreshPermissions = (params) => resolvePermissions(params, true);
+  return {
+    cache: {},
+    globalPermissions: {
+      drag: true,
+      edit: true,
+      delete: true,
+      duplicate: true,
+      insert: true
+    },
+    resolvedPermissions: {},
+    getPermissions: ({ item, type, root } = {}) => {
+      const { config, permissions } = get();
+      const { globalPermissions, resolvedPermissions } = permissions;
+      if (item) {
+        const componentConfig = config.components[item.type];
+        const initialPermissions = __spreadValues(__spreadValues({}, globalPermissions), componentConfig == null ? void 0 : componentConfig.permissions);
+        const resolvedForItem = resolvedPermissions[item.props.id];
+        return resolvedForItem ? __spreadValues(__spreadValues({}, globalPermissions), resolvedForItem) : initialPermissions;
+      } else if (type) {
+        const componentConfig = config.components[type];
+        return __spreadValues(__spreadValues({}, globalPermissions), componentConfig == null ? void 0 : componentConfig.permissions);
+      } else if (root) {
+        const rootConfig = config.root;
+        const initialPermissions = __spreadValues(__spreadValues({}, globalPermissions), rootConfig == null ? void 0 : rootConfig.permissions);
+        const resolvedForItem = resolvedPermissions["root"];
+        return resolvedForItem ? __spreadValues(__spreadValues({}, globalPermissions), resolvedForItem) : initialPermissions;
+      }
+      return globalPermissions;
+    },
+    resolvePermissions,
+    refreshPermissions
+  };
+};
+var useRegisterPermissionsSlice = (appStore, globalPermissions) => {
+  useEffect3(() => {
+    const { permissions } = appStore.getState();
+    const { globalPermissions: existingGlobalPermissions } = permissions;
+    appStore.setState({
+      permissions: __spreadProps(__spreadValues({}, permissions), {
+        globalPermissions: __spreadValues(__spreadValues({}, existingGlobalPermissions), globalPermissions)
+      })
+    });
+    permissions.resolvePermissions();
+  }, [globalPermissions]);
+  useEffect3(() => {
+    return appStore.subscribe(
+      (s) => s.state.data,
+      () => {
+        appStore.getState().permissions.resolvePermissions();
+      }
+    );
+  }, []);
+  useEffect3(() => {
+    return appStore.subscribe(
+      (s) => s.config,
+      () => {
+        appStore.getState().permissions.resolvePermissions();
+      }
+    );
+  }, []);
+};
+
+// store/slices/fields.ts
+init_react_import();
+import { useCallback, useEffect as useEffect4 } from "react";
+var createFieldsSlice = (_set, _get) => {
+  return {
+    fields: {},
+    loading: false,
+    lastResolvedData: {},
+    id: void 0
+  };
+};
+var useRegisterFieldsSlice = (appStore, id) => {
+  const resolveFields = useCallback(
+    (reset) => __async(void 0, null, function* () {
+      var _a, _b;
+      const { fields, lastResolvedData } = appStore.getState().fields;
+      const nodes = appStore.getState().state.indexes.nodes;
+      const node = nodes[id || "root"];
+      const componentData = node == null ? void 0 : node.data;
+      const parentNode = (node == null ? void 0 : node.parentId) ? nodes[node.parentId] : null;
+      const parent = (parentNode == null ? void 0 : parentNode.data) || null;
+      const { getComponentConfig, state } = appStore.getState();
+      const componentConfig = getComponentConfig(componentData == null ? void 0 : componentData.type);
+      if (!componentData || !componentConfig) return;
+      const defaultFields = componentConfig.fields || {};
+      const resolver = componentConfig.resolveFields;
+      let lastFields = fields;
+      if (reset) {
+        appStore.setState((s) => ({
+          fields: __spreadProps(__spreadValues({}, s.fields), { fields: defaultFields, id })
+        }));
+        lastFields = defaultFields;
+      }
+      if (resolver) {
+        const timeout3 = setTimeout(() => {
+          appStore.setState((s) => ({
+            fields: __spreadProps(__spreadValues({}, s.fields), { loading: true })
+          }));
+        }, 50);
+        const lastData = ((_a = lastResolvedData.props) == null ? void 0 : _a.id) === id ? lastResolvedData : null;
+        const changed = getChanged(componentData, lastData);
+        const newFields = yield resolver(componentData, {
+          changed,
+          fields: defaultFields,
+          lastFields,
+          lastData,
+          appState: makeStatePublic(state),
+          parent
+        });
+        clearTimeout(timeout3);
+        if (((_b = appStore.getState().selectedItem) == null ? void 0 : _b.props.id) !== id) {
+          return;
+        }
+        appStore.setState({
+          fields: {
+            fields: newFields,
+            loading: false,
+            lastResolvedData: componentData,
+            id
+          }
+        });
+      } else {
+        appStore.setState((s) => ({
+          fields: __spreadProps(__spreadValues({}, s.fields), { fields: defaultFields, id })
+        }));
+      }
+    }),
+    [id]
+  );
+  useEffect4(() => {
+    resolveFields(true);
+    return appStore.subscribe(
+      (s) => s.state.indexes.nodes[id || "root"],
+      () => resolveFields()
+    );
+  }, [id]);
+};
+
+// lib/data/to-root.ts
+init_react_import();
+var toRoot = (item) => {
+  if ("type" in item && item.type !== "root") {
+    throw new Error("Converting non-root item to root.");
+  }
+  const { readOnly } = item;
+  if (item.props) {
+    if ("id" in item.props) {
+      const _a = item.props, { id } = _a, props = __objRest(_a, ["id"]);
+      return { props, readOnly };
+    }
+    return { props: item.props, readOnly };
+  }
+  return { props: {}, readOnly };
+};
+
+// store/index.ts
+var defaultPageFields = {
+  title: { type: "text" }
+};
+var createAppStore = (initialAppStore) => create2()(
+  subscribeWithSelector2((set, get) => {
+    var _a, _b;
+    return __spreadProps(__spreadValues({
+      state: defaultAppState,
+      config: { components: {} },
+      componentState: {},
+      plugins: [],
+      overrides: {},
+      viewports: defaultViewports,
+      zoomConfig: {
+        autoZoom: 1,
+        rootHeight: 0,
+        zoom: 1
+      },
+      status: "LOADING",
+      iframe: {},
+      metadata: {},
+      fieldTransforms: {}
+    }, initialAppStore), {
+      fields: createFieldsSlice(set, get),
+      history: createHistorySlice(set, get),
+      nodes: createNodesSlice(set, get),
+      permissions: createPermissionsSlice(set, get),
+      getComponentConfig: (type) => {
+        var _a2;
+        const { config, selectedItem } = get();
+        const rootFields = ((_a2 = config.root) == null ? void 0 : _a2.fields) || defaultPageFields;
+        return type && type !== "root" ? config.components[type] : selectedItem ? config.components[selectedItem.type] : __spreadProps(__spreadValues({}, config.root), { fields: rootFields });
+      },
+      selectedItem: ((_a = initialAppStore == null ? void 0 : initialAppStore.state) == null ? void 0 : _a.ui.itemSelector) ? getItem(
+        (_b = initialAppStore == null ? void 0 : initialAppStore.state) == null ? void 0 : _b.ui.itemSelector,
+        initialAppStore.state
+      ) : null,
+      dispatch: (action) => set((s) => {
+        var _a2, _b2;
+        const { record } = get().history;
+        const dispatch = createReducer({
+          record,
+          appStore: s
+        });
+        const state = dispatch(s.state, action);
+        const selectedItem = state.ui.itemSelector ? getItem(state.ui.itemSelector, state) : null;
+        (_b2 = (_a2 = get()).onAction) == null ? void 0 : _b2.call(_a2, action, state, get().state);
+        return __spreadProps(__spreadValues({}, s), { state, selectedItem });
+      }),
+      setZoomConfig: (zoomConfig) => set({ zoomConfig }),
+      setStatus: (status) => set({ status }),
+      setComponentState: (componentState) => set({ componentState }),
+      pendingLoadTimeouts: {},
+      setComponentLoading: (id, loading = true, defer2 = 0) => {
+        const { setComponentState, pendingLoadTimeouts } = get();
+        const loadId = generateId();
+        const setLoading = () => {
+          var _a2;
+          const { componentState } = get();
+          setComponentState(__spreadProps(__spreadValues({}, componentState), {
+            [id]: __spreadProps(__spreadValues({}, componentState[id]), {
+              loadingCount: (((_a2 = componentState[id]) == null ? void 0 : _a2.loadingCount) || 0) + 1
+            })
+          }));
+        };
+        const unsetLoading = () => {
+          var _a2;
+          const { componentState } = get();
+          clearTimeout(timeout3);
+          delete pendingLoadTimeouts[loadId];
+          set({ pendingLoadTimeouts });
+          setComponentState(__spreadProps(__spreadValues({}, componentState), {
+            [id]: __spreadProps(__spreadValues({}, componentState[id]), {
+              loadingCount: Math.max(
+                (((_a2 = componentState[id]) == null ? void 0 : _a2.loadingCount) || 0) - 1,
+                0
+              )
+            })
+          }));
+        };
+        const timeout3 = setTimeout(() => {
+          if (loading) {
+            setLoading();
+          } else {
+            unsetLoading();
+          }
+          delete pendingLoadTimeouts[loadId];
+          set({ pendingLoadTimeouts });
+        }, defer2);
+        set({
+          pendingLoadTimeouts: __spreadProps(__spreadValues({}, pendingLoadTimeouts), {
+            [id]: timeout3
+          })
+        });
+        return unsetLoading;
+      },
+      unsetComponentLoading: (id) => {
+        const { setComponentLoading } = get();
+        setComponentLoading(id, false);
+      },
+      // Helper
+      setUi: (ui, recordHistory) => set((s) => {
+        const dispatch = createReducer({
+          record: () => {
+          },
+          appStore: s
+        });
+        const state = dispatch(s.state, {
+          type: "setUi",
+          ui,
+          recordHistory
+        });
+        const selectedItem = state.ui.itemSelector ? getItem(state.ui.itemSelector, state) : null;
+        return __spreadProps(__spreadValues({}, s), { state, selectedItem });
+      }),
+      resolveComponentData: (componentData, trigger) => __async(void 0, null, function* () {
+        const { config, metadata, setComponentLoading, permissions } = get();
+        const timeouts = {};
+        return yield resolveComponentData(
+          componentData,
+          config,
+          metadata,
+          (item) => {
+            const id = "id" in item.props ? item.props.id : "root";
+            timeouts[id] = setComponentLoading(id, true, 50);
+          },
+          (item) => __async(void 0, null, function* () {
+            const id = "id" in item.props ? item.props.id : "root";
+            if ("type" in item) {
+              yield permissions.refreshPermissions({ item });
+            } else {
+              yield permissions.refreshPermissions({ root: true });
+            }
+            timeouts[id]();
+          }),
+          trigger
+        );
+      }),
+      resolveAndCommitData: () => __async(void 0, null, function* () {
+        const { config, state, dispatch, resolveComponentData: resolveComponentData2 } = get();
+        walkAppState(
+          state,
+          config,
+          (content) => content,
+          (childItem) => {
+            resolveComponentData2(childItem, "load").then((resolved) => {
+              const { state: state2 } = get();
+              const node = state2.indexes.nodes[resolved.node.props.id];
+              if (node && resolved.didChange) {
+                if (resolved.node.props.id === "root") {
+                  dispatch({
+                    type: "replaceRoot",
+                    root: toRoot(resolved.node)
+                  });
+                } else {
+                  const zoneCompound = `${node.parentId}:${node.zone}`;
+                  const parentZone = state2.indexes.zones[zoneCompound];
+                  const index = parentZone.contentIds.indexOf(
+                    resolved.node.props.id
+                  );
+                  dispatch({
+                    type: "replace",
+                    data: resolved.node,
+                    destinationIndex: index,
+                    destinationZone: zoneCompound
+                  });
+                }
+              }
+            });
+            return childItem;
+          }
+        );
+      })
+    });
+  })
+);
+var appStoreContext = createContext(createAppStore());
+function useAppStore(selector) {
+  const context = useContext(appStoreContext);
+  return useStore(context, selector);
+}
+function useAppStoreApi() {
+  return useContext(appStoreContext);
+}
 
-// components/IconButton/IconButton.tsx
+// lib/get-zoom-config.ts
 init_react_import();
-import { useState } from "react";
 
-// css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css#css-module
+// ../../node_modules/css-box-model/dist/css-box-model.esm.js
 init_react_import();
-var IconButton_module_default = { "IconButton": "_IconButton_swpni_1", "IconButton--disabled": "_IconButton--disabled_swpni_20", "IconButton-title": "_IconButton-title_swpni_33" };
 
-// components/Loader/index.tsx
+// ../../node_modules/tiny-invariant/dist/esm/tiny-invariant.js
 init_react_import();
+var isProduction = process.env.NODE_ENV === "production";
+var prefix = "Invariant failed";
+function invariant(condition, message) {
+  if (condition) {
+    return;
+  }
+  if (isProduction) {
+    throw new Error(prefix);
+  }
+  var provided = typeof message === "function" ? message() : message;
+  var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
+  throw new Error(value);
+}
+
+// ../../node_modules/css-box-model/dist/css-box-model.esm.js
+var getRect = function getRect2(_ref) {
+  var top = _ref.top, right = _ref.right, bottom = _ref.bottom, left = _ref.left;
+  var width = right - left;
+  var height = bottom - top;
+  var rect = {
+    top,
+    right,
+    bottom,
+    left,
+    width,
+    height,
+    x: left,
+    y: top,
+    center: {
+      x: (right + left) / 2,
+      y: (bottom + top) / 2
+    }
+  };
+  return rect;
+};
+var expand = function expand2(target, expandBy) {
+  return {
+    top: target.top - expandBy.top,
+    left: target.left - expandBy.left,
+    bottom: target.bottom + expandBy.bottom,
+    right: target.right + expandBy.right
+  };
+};
+var shrink = function shrink2(target, shrinkBy) {
+  return {
+    top: target.top + shrinkBy.top,
+    left: target.left + shrinkBy.left,
+    bottom: target.bottom - shrinkBy.bottom,
+    right: target.right - shrinkBy.right
+  };
+};
+var noSpacing = {
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+};
+var createBox = function createBox2(_ref2) {
+  var borderBox = _ref2.borderBox, _ref2$margin = _ref2.margin, margin = _ref2$margin === void 0 ? noSpacing : _ref2$margin, _ref2$border = _ref2.border, border = _ref2$border === void 0 ? noSpacing : _ref2$border, _ref2$padding = _ref2.padding, padding = _ref2$padding === void 0 ? noSpacing : _ref2$padding;
+  var marginBox = getRect(expand(borderBox, margin));
+  var paddingBox = getRect(shrink(borderBox, border));
+  var contentBox = getRect(shrink(paddingBox, padding));
+  return {
+    marginBox,
+    borderBox: getRect(borderBox),
+    paddingBox,
+    contentBox,
+    margin,
+    border,
+    padding
+  };
+};
+var parse = function parse2(raw) {
+  var value = raw.slice(0, -2);
+  var suffix = raw.slice(-2);
+  if (suffix !== "px") {
+    return 0;
+  }
+  var result = Number(value);
+  !!isNaN(result) ? process.env.NODE_ENV !== "production" ? invariant(false, "Could not parse value [raw: " + raw + ", without suffix: " + value + "]") : invariant(false) : void 0;
+  return result;
+};
+var calculateBox = function calculateBox2(borderBox, styles2) {
+  var margin = {
+    top: parse(styles2.marginTop),
+    right: parse(styles2.marginRight),
+    bottom: parse(styles2.marginBottom),
+    left: parse(styles2.marginLeft)
+  };
+  var padding = {
+    top: parse(styles2.paddingTop),
+    right: parse(styles2.paddingRight),
+    bottom: parse(styles2.paddingBottom),
+    left: parse(styles2.paddingLeft)
+  };
+  var border = {
+    top: parse(styles2.borderTopWidth),
+    right: parse(styles2.borderRightWidth),
+    bottom: parse(styles2.borderBottomWidth),
+    left: parse(styles2.borderLeftWidth)
+  };
+  return createBox({
+    borderBox,
+    margin,
+    padding,
+    border
+  });
+};
+var getBox = function getBox2(el) {
+  var borderBox = el.getBoundingClientRect();
+  var styles2 = window.getComputedStyle(el);
+  return calculateBox(borderBox, styles2);
+};
+
+// lib/get-zoom-config.ts
+var RESET_ZOOM_SMALLER_THAN_FRAME = true;
+var getZoomConfig = (uiViewport, frame, zoom) => {
+  const box = getBox(frame);
+  const { width: frameWidth, height: frameHeight } = box.contentBox;
+  const viewportHeight = uiViewport.height === "auto" ? frameHeight : uiViewport.height;
+  let rootHeight = 0;
+  let autoZoom = 1;
+  if (uiViewport.width > frameWidth || viewportHeight > frameHeight) {
+    const widthZoom = Math.min(frameWidth / uiViewport.width, 1);
+    const heightZoom = Math.min(frameHeight / viewportHeight, 1);
+    zoom = widthZoom;
+    if (widthZoom < heightZoom) {
+      rootHeight = viewportHeight / zoom;
+    } else {
+      rootHeight = viewportHeight;
+      zoom = heightZoom;
+    }
+    autoZoom = zoom;
+  } else {
+    if (RESET_ZOOM_SMALLER_THAN_FRAME) {
+      autoZoom = 1;
+      zoom = 1;
+      rootHeight = viewportHeight;
+    }
+  }
+  return { autoZoom, rootHeight, zoom };
+};
+
+// lib/use-reset-auto-zoom.ts
+var useResetAutoZoom = (frameRef) => {
+  const appStoreApi = useAppStoreApi();
+  const resetAutoZoom = (options) => {
+    const { state, zoomConfig, setZoomConfig } = appStoreApi.getState();
+    const { viewports } = state.ui;
+    const newViewports = (options == null ? void 0 : options.viewports) || viewports;
+    if (frameRef.current) {
+      setZoomConfig(
+        getZoomConfig(newViewports == null ? void 0 : newViewports.current, frameRef.current, zoomConfig.zoom)
+      );
+    }
+  };
+  return resetAutoZoom;
+};
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Loader/styles.module.css#css-module
 init_react_import();
@@ -199,7 +1689,7 @@ var IconButton = ({
 
 // components/Button/Button.tsx
 init_react_import();
-import { useEffect, useState as useState2 } from "react";
+import { useEffect as useEffect5, useState as useState2 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css#css-module
 init_react_import();
@@ -250,7 +1740,7 @@ var Button = (_a) => {
     "loading"
   ]);
   const [loading, setLoading] = useState2(loadingProp);
-  useEffect(() => setLoading(loadingProp), [loadingProp]);
+  useEffect5(() => setLoading(loadingProp), [loadingProp]);
   const ElementType = href ? "a" : type ? "button" : "span";
   const dataAttrs = filterDataAttrs(props);
   const el = /* @__PURE__ */ jsxs3(
@@ -296,9 +1786,9 @@ var styles_module_default3 = { "InputWrapper": "_InputWrapper_bsxfo_1", "Input-l
 
 // components/AutoField/index.tsx
 import {
-  useCallback as useCallback3,
-  useContext as useContext2,
-  useEffect as useEffect6,
+  useCallback as useCallback4,
+  useContext as useContext3,
+  useEffect as useEffect10,
   useMemo as useMemo3,
   useState as useState8
 } from "react";
@@ -644,7 +2134,7 @@ var ZoomOut = createLucideIcon("ZoomOut", [
 init_react_import();
 
 // components/AutoField/fields/ArrayField/index.tsx
-import { useCallback, useEffect as useEffect2, useRef, useState as useState4 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect6, useRef, useState as useState4 } from "react";
 
 // components/DragIcon/index.tsx
 init_react_import();
@@ -1094,11 +2584,11 @@ var Sortable = ({
 
 // components/AutoField/context.tsx
 init_react_import();
-import { createContext, useContext, useMemo } from "react";
+import { createContext as createContext2, useContext as useContext2, useMemo } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
-var NestedFieldContext = createContext({});
+var NestedFieldContext = createContext2({});
 var useNestedFieldContext = () => {
-  const context = useContext(NestedFieldContext);
+  const context = useContext2(NestedFieldContext);
   return __spreadProps(__spreadValues({}, context), {
     readOnlyFields: context.readOnlyFields || {}
   });
@@ -1166,13 +2656,13 @@ var ArrayField = ({
     openId: ""
   };
   const [localState, setLocalState] = useState4({ arrayState, value });
-  useEffect2(() => {
+  useEffect6(() => {
     var _a;
     const _arrayState = (_a = appStore.getState().state.ui.arrayState[id]) != null ? _a : arrayState;
     setLocalState({ arrayState: _arrayState, value });
   }, [value]);
   const appStore = useAppStoreApi();
-  const mapArrayStateToUi = useCallback(
+  const mapArrayStateToUi = useCallback2(
     (partialArrayState) => {
       const state = appStore.getState().state;
       return {
@@ -1183,13 +2673,13 @@ var ArrayField = ({
     },
     [arrayState, appStore]
   );
-  const getHighestIndex = useCallback(() => {
+  const getHighestIndex = useCallback2(() => {
     return arrayState.items.reduce(
       (acc, item) => item._originalIndex > acc ? item._originalIndex : acc,
       -1
     );
   }, [arrayState]);
-  const regenerateArrayState = useCallback(
+  const regenerateArrayState = useCallback2(
     (value2) => {
       let highestIndex = getHighestIndex();
       const newItems = Array.from(value2 || []).map((item, idx) => {
@@ -1208,7 +2698,7 @@ var ArrayField = ({
     },
     [arrayState]
   );
-  useEffect2(() => {
+  useEffect6(() => {
     if (arrayState.items.length > 0) {
       setUi(mapArrayStateToUi(arrayState));
     }
@@ -1220,7 +2710,7 @@ var ArrayField = ({
   );
   const forceReadOnly = !canEdit;
   const valueRef = useRef(value);
-  const uniqifyItem = useCallback(
+  const uniqifyItem = useCallback2(
     (val) => {
       if (field.type !== "array" || !field.arrayFields) return;
       const config = appStore.getState().config;
@@ -1532,15 +3022,15 @@ var DefaultField = ({
 
 // components/AutoField/fields/ExternalField/index.tsx
 init_react_import();
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect9 } from "react";
 
 // components/ExternalInput/index.tsx
 init_react_import();
 import {
   useMemo as useMemo2,
-  useEffect as useEffect4,
+  useEffect as useEffect8,
   useState as useState6,
-  useCallback as useCallback2,
+  useCallback as useCallback3,
   isValidElement
 } from "react";
 
@@ -1550,7 +3040,7 @@ var styles_module_default6 = { "ExternalInput-actions": "_ExternalInput-actions_
 
 // components/Modal/index.tsx
 init_react_import();
-import { useEffect as useEffect3, useState as useState5 } from "react";
+import { useEffect as useEffect7, useState as useState5 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Modal/styles.module.css#css-module
 init_react_import();
@@ -1566,7 +3056,7 @@ var Modal = ({
   isOpen
 }) => {
   const [rootEl, setRootEl] = useState5(null);
-  useEffect3(() => {
+  useEffect7(() => {
     setRootEl(document.getElementById("puck-portal-root"));
   }, []);
   if (!rootEl) {
@@ -1650,7 +3140,7 @@ var ExternalInput = ({
     return Array.from(validKeys);
   }, [mappedData]);
   const [searchQuery, setSearchQuery] = useState6(field.initialQuery || "");
-  const search = useCallback2(
+  const search = useCallback3(
     (query, filters2) => __async(void 0, null, function* () {
       setIsLoading(true);
       const cacheKey = `${id}-${query}-${JSON.stringify(filters2)}`;
@@ -1663,7 +3153,7 @@ var ExternalInput = ({
     }),
     [id, field]
   );
-  const Footer = useCallback2(
+  const Footer = useCallback3(
     (props) => field.renderFooter ? field.renderFooter(props) : /* @__PURE__ */ jsxs6("span", { className: getClassNameModal("footer"), children: [
       props.items.length,
       " result",
@@ -1671,7 +3161,7 @@ var ExternalInput = ({
     ] }),
     [field.renderFooter]
   );
-  useEffect4(() => {
+  useEffect8(() => {
     search(searchQuery, filters);
   }, []);
   return /* @__PURE__ */ jsxs6(
@@ -1844,7 +3334,7 @@ var ExternalField = ({
   var _a, _b, _c;
   const validField = field;
   const deprecatedField = field;
-  useEffect5(() => {
+  useEffect9(() => {
     if (deprecatedField.adaptor) {
       console.error(
         "Warning: The `adaptor` API is deprecated. Please use updated APIs on the `external` field instead. This will be a breaking change in a future release."
@@ -2172,7 +3662,7 @@ function AutoFieldInternal(props) {
     var _a2;
     return (_a2 = s.selectedItem) == null ? void 0 : _a2.readOnly;
   });
-  const nestedFieldContext = useContext2(NestedFieldContext);
+  const nestedFieldContext = useContext3(NestedFieldContext);
   const { id, Label: Label2 = FieldLabelInternal } = props;
   const field = props.field;
   const label = field.label;
@@ -2206,7 +3696,7 @@ function AutoFieldInternal(props) {
     Label: Label2,
     id: resolvedId
   });
-  const onFocus = useCallback3(
+  const onFocus = useCallback4(
     (e) => {
       if (mergedProps.name && (e.target.nodeName === "INPUT" || e.target.nodeName === "TEXTAREA")) {
         e.stopPropagation();
@@ -2220,7 +3710,7 @@ function AutoFieldInternal(props) {
     },
     [mergedProps.name]
   );
-  const onBlur = useCallback3((e) => {
+  const onBlur = useCallback4((e) => {
     if ("name" in e.target) {
       dispatch({
         type: "setUi",
@@ -2274,19 +3764,19 @@ function AutoFieldPrivate(props) {
   const isFocused = useAppStore((s) => s.state.ui.field.focus === props.name);
   const { value, onChange } = props;
   const [localValue, setLocalValue] = useState8(value);
-  const onChangeLocal = useCallback3(
+  const onChangeLocal = useCallback4(
     (val, ui) => {
       setLocalValue(val);
       onChange(val, ui);
     },
     [onChange]
   );
-  useEffect6(() => {
+  useEffect10(() => {
     if (!isFocused) {
       setLocalValue(value);
     }
   }, [value]);
-  useEffect6(() => {
+  useEffect10(() => {
     if (!isFocused) {
       if (value !== localValue) {
         setLocalValue(value);
@@ -2322,20 +3812,20 @@ init_react_import();
 init_react_import();
 import {
   forwardRef as forwardRef3,
-  memo,
-  useCallback as useCallback10,
-  useContext as useContext7,
-  useEffect as useEffect13,
+  memo as memo2,
+  useCallback as useCallback11,
+  useContext as useContext8,
+  useEffect as useEffect18,
   useMemo as useMemo8,
-  useRef as useRef5
+  useRef as useRef6
 } from "react";
 
 // components/DraggableComponent/index.tsx
 init_react_import();
 import {
-  useCallback as useCallback6,
-  useContext as useContext4,
-  useEffect as useEffect8,
+  useCallback as useCallback7,
+  useContext as useContext5,
+  useEffect as useEffect12,
   useMemo as useMemo5,
   useRef as useRef2,
   useState as useState10,
@@ -2371,14 +3861,14 @@ function getDeepScrollPosition(element) {
 // components/DropZone/context.tsx
 init_react_import();
 import {
-  createContext as createContext2,
-  useCallback as useCallback4,
+  createContext as createContext3,
+  useCallback as useCallback5,
   useMemo as useMemo4
 } from "react";
 import { createStore as createStore2 } from "zustand";
 import { Fragment as Fragment5, jsx as jsx19 } from "react/jsx-runtime";
-var dropZoneContext = createContext2(null);
-var ZoneStoreContext = createContext2(
+var dropZoneContext = createContext3(null);
+var ZoneStoreContext = createContext3(
   createStore2(() => ({
     zoneDepthIndex: {},
     nextZoneDepthIndex: {},
@@ -2401,7 +3891,7 @@ var DropZoneProvider = ({
   value
 }) => {
   const dispatch = useAppStore((s) => s.dispatch);
-  const registerZone = useCallback4(
+  const registerZone = useCallback5(
     (zoneCompound) => {
       dispatch({
         type: "registerZone",
@@ -2440,23 +3930,23 @@ function accumulateTransform(el) {
 
 // lib/use-context-store.ts
 init_react_import();
-import { useContext as useContext3 } from "react";
-import { useStore } from "zustand";
+import { useContext as useContext4 } from "react";
+import { useStore as useStore2 } from "zustand";
 import { useShallow } from "zustand/react/shallow";
 function useContextStore(context, selector) {
-  const store = useContext3(context);
+  const store = useContext4(context);
   if (!store) {
     throw new Error("useContextStore must be used inside context");
   }
-  return useStore(store, useShallow(selector));
+  return useStore2(store, useShallow(selector));
 }
 
 // lib/dnd/use-on-drag-finished.ts
 init_react_import();
-import { useCallback as useCallback5 } from "react";
+import { useCallback as useCallback6 } from "react";
 var useOnDragFinished = (cb, deps = []) => {
   const appStore = useAppStoreApi();
-  return useCallback5(() => {
+  return useCallback6(() => {
     let dispose = () => {
     };
     const processDragging = (isDragging2) => {
@@ -2529,9 +4019,9 @@ var DraggableComponent = ({
   const overrides = useAppStore((s) => s.overrides);
   const dispatch = useAppStore((s) => s.dispatch);
   const iframe = useAppStore((s) => s.iframe);
-  const ctx = useContext4(dropZoneContext);
+  const ctx = useContext5(dropZoneContext);
   const [localZones, setLocalZones] = useState10({});
-  const registerLocalZone = useCallback6(
+  const registerLocalZone = useCallback7(
     (zoneCompound2, active) => {
       var _a;
       (_a = ctx == null ? void 0 : ctx.registerLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2, active);
@@ -2541,7 +4031,7 @@ var DraggableComponent = ({
     },
     [setLocalZones]
   );
-  const unregisterLocalZone = useCallback6(
+  const unregisterLocalZone = useCallback7(
     (zoneCompound2) => {
       var _a;
       (_a = ctx == null ? void 0 : ctx.unregisterLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2);
@@ -2564,7 +4054,7 @@ var DraggableComponent = ({
       return s.permissions.getPermissions({ item });
     })
   );
-  const zoneStore = useContext4(ZoneStoreContext);
+  const zoneStore = useContext5(ZoneStoreContext);
   const [dragAxis, setDragAxis] = useState10(userDragAxis || autoDragAxis);
   const dynamicCollisionDetector = useMemo5(
     () => createDynamicCollisionDetector(dragAxis),
@@ -2598,7 +4088,7 @@ var DraggableComponent = ({
     },
     feedback: "clone"
   });
-  useEffect8(() => {
+  useEffect12(() => {
     const isEnabled = zoneStore.getState().enabledIndex[zoneCompound];
     sortable.droppable.disabled = !isEnabled;
     sortable.draggable.disabled = !permissions.drag;
@@ -2616,7 +4106,7 @@ var DraggableComponent = ({
     return cleanup;
   }, [permissions.drag, zoneCompound]);
   const ref = useRef2(null);
-  const refSetter = useCallback6(
+  const refSetter = useCallback7(
     (el) => {
       sortableRef(el);
       if (el) {
@@ -2626,13 +4116,13 @@ var DraggableComponent = ({
     [sortableRef]
   );
   const [portalEl, setPortalEl] = useState10();
-  useEffect8(() => {
+  useEffect12(() => {
     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 = useCallback6(() => {
+  const getStyle = useCallback7(() => {
     var _a, _b, _c;
     if (!ref.current) return;
     const rect = ref.current.getBoundingClientRect();
@@ -2658,10 +4148,10 @@ var DraggableComponent = ({
     return style2;
   }, [ref.current]);
   const [style, setStyle] = useState10();
-  const sync = useCallback6(() => {
+  const sync = useCallback7(() => {
     setStyle(getStyle());
   }, [ref.current, iframe]);
-  useEffect8(() => {
+  useEffect12(() => {
     if (ref.current) {
       const observer = new ResizeObserver(sync);
       observer.observe(ref.current);
@@ -2671,13 +4161,13 @@ var DraggableComponent = ({
     }
   }, [ref.current]);
   const registerNode = useAppStore((s) => s.nodes.registerNode);
-  const hideOverlay = useCallback6(() => {
+  const hideOverlay = useCallback7(() => {
     setIsVisible(false);
   }, []);
-  const showOverlay = useCallback6(() => {
+  const showOverlay = useCallback7(() => {
     setIsVisible(true);
   }, []);
-  useEffect8(() => {
+  useEffect12(() => {
     var _a;
     registerNode(id, {
       methods: { sync, showOverlay, hideOverlay },
@@ -2702,7 +4192,7 @@ var DraggableComponent = ({
     () => overrides.componentOverlay || DefaultOverlay,
     [overrides.componentOverlay]
   );
-  const onClick = useCallback6(
+  const onClick = useCallback7(
     (e) => {
       const el = e.target;
       if (!el.closest("[data-puck-overlay-portal]")) {
@@ -2718,7 +4208,7 @@ var DraggableComponent = ({
     [index, zoneCompound, id]
   );
   const appStore = useAppStoreApi();
-  const onSelectParent = useCallback6(() => {
+  const onSelectParent = useCallback7(() => {
     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;
@@ -2739,14 +4229,14 @@ var DraggableComponent = ({
       }
     });
   }, [ctx, path]);
-  const onDuplicate = useCallback6(() => {
+  const onDuplicate = useCallback7(() => {
     dispatch({
       type: "duplicate",
       sourceIndex: index,
       sourceZone: zoneCompound
     });
   }, [index, zoneCompound]);
-  const onDelete = useCallback6(() => {
+  const onDelete = useCallback7(() => {
     dispatch({
       type: "remove",
       index,
@@ -2758,7 +4248,7 @@ var DraggableComponent = ({
     ZoneStoreContext,
     (s) => s.hoveringComponent === id
   );
-  useEffect8(() => {
+  useEffect12(() => {
     if (!ref.current) {
       return;
     }
@@ -2806,7 +4296,7 @@ var DraggableComponent = ({
   const [isVisible, setIsVisible] = useState10(false);
   const [dragFinished, setDragFinished] = useState10(true);
   const [_, startTransition] = useTransition();
-  useEffect8(() => {
+  useEffect12(() => {
     startTransition(() => {
       if (hover || indicativeHover || isSelected) {
         sync();
@@ -2828,15 +4318,15 @@ var DraggableComponent = ({
       setDragFinished(false);
     }
   });
-  useEffect8(() => {
+  useEffect12(() => {
     if (thisIsDragging) {
       setThisWasDragging(true);
     }
   }, [thisIsDragging]);
-  useEffect8(() => {
+  useEffect12(() => {
     if (thisWasDragging) return onDragFinished();
   }, [thisWasDragging, onDragFinished]);
-  const syncActionsPosition = useCallback6(
+  const syncActionsPosition = useCallback7(
     (el) => {
       if (el) {
         const view = el.ownerDocument.defaultView;
@@ -2861,7 +4351,7 @@ var DraggableComponent = ({
     },
     [zoom]
   );
-  useEffect8(() => {
+  useEffect12(() => {
     if (userDragAxis) {
       setDragAxis(userDragAxis);
       return;
@@ -2987,10 +4477,10 @@ import { useMemo as useMemo7, useState as useState12 } from "react";
 init_react_import();
 import { DragDropProvider as DragDropProvider2 } from "@dnd-kit/react";
 import {
-  createContext as createContext3,
-  useCallback as useCallback7,
-  useContext as useContext5,
-  useEffect as useEffect9,
+  createContext as createContext4,
+  useCallback as useCallback8,
+  useContext as useContext6,
+  useEffect as useEffect13,
   useMemo as useMemo6,
   useRef as useRef3,
   useState as useState11
@@ -3284,7 +4774,7 @@ var insertComponent = (componentType, zone, index, appStore) => __async(void 0,
     destinationZone: zone,
     id
   };
-  const { state, dispatch, resolveComponentData } = appStore;
+  const { state, dispatch, resolveComponentData: resolveComponentData2 } = appStore;
   const insertedState = insertAction(state, insertActionData, appStore);
   dispatch(__spreadProps(__spreadValues({}, insertActionData), {
     // Dispatch insert rather set, as user's may rely on this via onAction
@@ -3300,7 +4790,7 @@ var insertComponent = (componentType, zone, index, appStore) => __async(void 0,
   dispatch({ type: "setUi", ui: { itemSelector } });
   const itemData = getItem(itemSelector, insertedState);
   if (itemData) {
-    const resolved = yield resolveComponentData(itemData, "insert");
+    const resolved = yield resolveComponentData2(itemData, "insert");
     if (resolved.didChange) {
       dispatch({
         type: "replace",
@@ -3331,12 +4821,12 @@ function getDeepDir(el) {
 import { effect } from "@dnd-kit/state";
 import { jsx as jsx21 } from "react/jsx-runtime";
 var DEBUG3 = false;
-var dragListenerContext = createContext3({
+var dragListenerContext = createContext4({
   dragListeners: {}
 });
 function useDragListener(type, fn, deps = []) {
-  const { setDragListeners } = useContext5(dragListenerContext);
-  useEffect9(() => {
+  const { setDragListeners } = useContext6(dragListenerContext);
+  useEffect13(() => {
     if (setDragListeners) {
       setDragListeners((old) => __spreadProps(__spreadValues({}, old), {
         [type]: [...old[type] || [], fn]
@@ -3347,7 +4837,7 @@ function useDragListener(type, fn, deps = []) {
 var AREA_CHANGE_DEBOUNCE_MS = 100;
 var useTempDisableFallback = (timeout3) => {
   const lastFallbackDisable = useRef3(null);
-  return useCallback7((manager) => {
+  return useCallback8((manager) => {
     collisionStore.setState({ fallbackEnabled: false });
     const fallbackId = generateId();
     lastFallbackDisable.current = fallbackId;
@@ -3380,7 +4870,7 @@ var DragDropContextClient = ({
       hoveringComponent: null
     }))
   );
-  const getChanged = useCallback7(
+  const getChanged2 = useCallback8(
     (params, id2) => {
       const { zoneDepthIndex = {}, areaDepthIndex = {} } = zoneStore.getState() || {};
       const stateHasZone = Object.keys(zoneDepthIndex).length > 0;
@@ -3401,9 +4891,9 @@ var DragDropContextClient = ({
     },
     [zoneStore]
   );
-  const setDeepestAndCollide = useCallback7(
+  const setDeepestAndCollide = useCallback8(
     (params, manager) => {
-      const { zoneChanged, areaChanged } = getChanged(params, id);
+      const { zoneChanged, areaChanged } = getChanged2(params, id);
       if (!zoneChanged && !areaChanged) return;
       zoneStore.setState({
         zoneDepthIndex: params.zone ? { [params.zone]: true } : {},
@@ -3425,7 +4915,7 @@ var DragDropContextClient = ({
     setDeepestDb.cancel();
     debouncedParamsRef.current = null;
   };
-  useEffect9(() => {
+  useEffect13(() => {
     if (DEBUG3) {
       zoneStore.subscribe(
         (s) => {
@@ -3445,7 +4935,7 @@ var DragDropContextClient = ({
       {
         onChange: (params, manager) => {
           const state = zoneStore.getState();
-          const { zoneChanged, areaChanged } = getChanged(params, id);
+          const { zoneChanged, areaChanged } = getChanged2(params, id);
           const isDragging = manager.dragOperation.status.dragging;
           if (areaChanged || zoneChanged) {
             let nextZoneDepthIndex = {};
@@ -3867,7 +5357,7 @@ Drawer.Item = DrawerItem;
 
 // components/DropZone/lib/use-min-empty-height.ts
 init_react_import();
-import { useEffect as useEffect10, useRef as useRef4, useState as useState13 } from "react";
+import { useEffect as useEffect14, useRef as useRef4, useState as useState13 } from "react";
 var getNumItems = (appStore, zoneCompound) => appStore.getState().state.indexes.zones[zoneCompound].contentIds.length;
 var useMinEmptyHeight = ({
   zoneCompound,
@@ -3919,7 +5409,7 @@ var useMinEmptyHeight = ({
     },
     [appStore, prevHeight, zoneCompound]
   );
-  useEffect10(() => {
+  useEffect14(() => {
     if (draggedItem && ref.current) {
       if (isZone) {
         const rect = ref.current.getBoundingClientRect();
@@ -3950,15 +5440,15 @@ function assignRefs(refs, node) {
 
 // components/DropZone/lib/use-content-with-preview.ts
 init_react_import();
-import { useContext as useContext6, useEffect as useEffect11, useState as useState14 } from "react";
+import { useContext as useContext7, useEffect as useEffect15, useState as useState14 } from "react";
 
 // lib/dnd/use-rendered-callback.ts
 init_react_import();
 import { useDragDropManager } from "@dnd-kit/react";
-import { useCallback as useCallback8 } from "react";
+import { useCallback as useCallback9 } from "react";
 function useRenderedCallback(callback, deps) {
   const manager = useDragDropManager();
-  return useCallback8(
+  return useCallback9(
     (...args) => __async(this, null, function* () {
       yield manager == null ? void 0 : manager.renderer.rendering;
       return callback(...args);
@@ -3969,7 +5459,7 @@ function useRenderedCallback(callback, deps) {
 
 // components/DropZone/lib/use-content-with-preview.ts
 var useContentIdsWithPreview = (contentIds, zoneCompound) => {
-  const zoneStore = useContext6(ZoneStoreContext);
+  const zoneStore = useContext7(ZoneStoreContext);
   const preview = useContextStore(
     ZoneStoreContext,
     (s) => s.previewIndex[zoneCompound]
@@ -4011,7 +5501,7 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
     },
     []
   );
-  useEffect11(() => {
+  useEffect15(() => {
     var _a;
     const s = zoneStore.getState();
     const draggedItemId = (_a = s.draggedItem) == null ? void 0 : _a.id;
@@ -4029,7 +5519,7 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
 
 // components/DropZone/lib/use-drag-axis.ts
 init_react_import();
-import { useCallback as useCallback9, useEffect as useEffect12, useState as useState15 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect16, useState as useState15 } from "react";
 var GRID_DRAG_AXIS = "dynamic";
 var FLEX_ROW_DRAG_AXIS = "x";
 var DEFAULT_DRAG_AXIS = "y";
@@ -4038,7 +5528,7 @@ var useDragAxis = (ref, collisionAxis) => {
   const [dragAxis, setDragAxis] = useState15(
     collisionAxis || DEFAULT_DRAG_AXIS
   );
-  const calculateDragAxis = useCallback9(() => {
+  const calculateDragAxis = useCallback10(() => {
     if (ref.current) {
       const computedStyle = window.getComputedStyle(ref.current);
       if (computedStyle.display === "grid") {
@@ -4050,7 +5540,7 @@ var useDragAxis = (ref, collisionAxis) => {
       }
     }
   }, [ref.current]);
-  useEffect12(() => {
+  useEffect16(() => {
     const onViewportChange = () => {
       calculateDragAxis();
     };
@@ -4059,7 +5549,7 @@ var useDragAxis = (ref, collisionAxis) => {
       window.removeEventListener("viewportchange", onViewportChange);
     };
   }, []);
-  useEffect12(calculateDragAxis, [status, collisionAxis]);
+  useEffect16(calculateDragAxis, [status, collisionAxis]);
   return [dragAxis, calculateDragAxis];
 };
 
@@ -4095,12 +5585,239 @@ var ContextSlotRender = ({
   );
 };
 
+// lib/field-transforms/default-transforms/inline-text-transform.tsx
+init_react_import();
+
+// components/InlineTextField/index.tsx
+init_react_import();
+import { memo, useEffect as useEffect17, useRef as useRef5, useState as useState16 } from "react";
+
+// lib/overlay-portal/index.tsx
+init_react_import();
+var registerOverlayPortal = (el, opts = {}) => {
+  if (!el) return;
+  const { disableDrag = false, disableDragOnFocus = true } = opts;
+  const stopPropagation = (e) => {
+    e.stopPropagation();
+  };
+  el.addEventListener("mouseover", stopPropagation, {
+    capture: true
+  });
+  const onFocus = () => {
+    setTimeout(() => {
+      el.addEventListener("pointerdown", stopPropagation, {
+        capture: true
+      });
+    }, 200);
+  };
+  const onBlur = () => {
+    el.removeEventListener("pointerdown", stopPropagation, {
+      capture: true
+    });
+  };
+  if (disableDragOnFocus) {
+    el.addEventListener("focus", onFocus, { capture: true });
+    el.addEventListener("blur", onBlur, { capture: true });
+  } else if (disableDrag) {
+    el.addEventListener("pointerdown", stopPropagation, {
+      capture: true
+    });
+  }
+  el.setAttribute("data-puck-overlay-portal", "true");
+  return () => {
+    el.removeEventListener("mouseover", stopPropagation, {
+      capture: true
+    });
+    if (disableDragOnFocus) {
+      el.removeEventListener("focus", onFocus, { capture: true });
+      el.removeEventListener("blur", onFocus, { capture: true });
+    } else if (disableDrag) {
+      el.removeEventListener("pointerdown", stopPropagation, {
+        capture: true
+      });
+    }
+    el.removeAttribute("data-puck-overlay-portal");
+  };
+};
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/InlineTextField/styles.module.css#css-module
+init_react_import();
+var styles_module_default13 = { "InlineTextField": "_InlineTextField_ilw2a_1" };
+
+// lib/data/set-deep.ts
+init_react_import();
+function setDeep(node, path, newVal) {
+  const parts = path.split(".");
+  const newNode = __spreadValues({}, node);
+  let cur = newNode;
+  for (let i = 0; i < parts.length; i++) {
+    const [prop, idxStr] = parts[i].replace("]", "").split("[");
+    const isLast = i === parts.length - 1;
+    if (idxStr !== void 0) {
+      if (!Array.isArray(cur[prop])) {
+        cur[prop] = [];
+      }
+      const idx = Number(idxStr);
+      if (isLast) {
+        cur[prop][idx] = newVal;
+        continue;
+      }
+      if (cur[prop][idx] === void 0) cur[prop][idx] = {};
+      cur = cur[prop][idx];
+      continue;
+    }
+    if (isLast) {
+      cur[prop] = newVal;
+      continue;
+    }
+    if (cur[prop] === void 0) {
+      cur[prop] = {};
+    }
+    cur = cur[prop];
+  }
+  return __spreadValues(__spreadValues({}, node), newNode);
+}
+
+// components/InlineTextField/index.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+var getClassName18 = get_class_name_factory_default("InlineTextField", styles_module_default13);
+var InlineTextFieldInternal = ({
+  propPath,
+  componentId,
+  value,
+  isReadOnly,
+  opts = {}
+}) => {
+  var _a;
+  const ref = useRef5(null);
+  const appStoreApi = useAppStoreApi();
+  const disableLineBreaks = (_a = opts.disableLineBreaks) != null ? _a : false;
+  useEffect17(() => {
+    const appStore = appStoreApi.getState();
+    const data = appStore.state.indexes.nodes[componentId].data;
+    const componentConfig = appStore.getComponentConfig(data.type);
+    if (!componentConfig) {
+      throw new Error(
+        `InlineTextField Error: No config defined for ${data.type}`
+      );
+    }
+    if (ref.current) {
+      if (value !== ref.current.innerText) {
+        ref.current.replaceChildren(value);
+      }
+      const cleanupPortal = registerOverlayPortal(ref.current);
+      const handleInput = (e) => __async(void 0, null, function* () {
+        var _a2;
+        const appStore2 = appStoreApi.getState();
+        const node = appStore2.state.indexes.nodes[componentId];
+        const zoneCompound = `${node.parentId}:${node.zone}`;
+        const index = (_a2 = appStore2.state.indexes.zones[zoneCompound]) == null ? void 0 : _a2.contentIds.indexOf(
+          componentId
+        );
+        const newProps = setDeep(node.data.props, propPath, e.target.innerText);
+        const resolvedData = yield appStore2.resolveComponentData(
+          __spreadProps(__spreadValues({}, node.data), { props: newProps }),
+          "replace"
+        );
+        appStore2.dispatch({
+          type: "replace",
+          data: resolvedData.node,
+          destinationIndex: index,
+          destinationZone: zoneCompound
+        });
+      });
+      ref.current.addEventListener("input", handleInput);
+      return () => {
+        var _a2;
+        (_a2 = ref.current) == null ? void 0 : _a2.removeEventListener("input", handleInput);
+        cleanupPortal == null ? void 0 : cleanupPortal();
+      };
+    }
+  }, [appStoreApi, ref.current, value]);
+  const [isHovering, setIsHovering] = useState16(false);
+  const [isFocused, setIsFocused] = useState16(false);
+  return /* @__PURE__ */ jsx24(
+    "span",
+    {
+      className: getClassName18(),
+      ref,
+      contentEditable: isHovering || isFocused ? "plaintext-only" : "false",
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      onClickCapture: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      onKeyDown: (e) => {
+        if (disableLineBreaks && e.key === "Enter" || isReadOnly) {
+          e.preventDefault();
+        }
+      },
+      onMouseOverCapture: () => setIsHovering(true),
+      onMouseOutCapture: () => setIsHovering(false),
+      onFocus: () => setIsFocused(true),
+      onBlur: () => setIsFocused(false)
+    }
+  );
+};
+var InlineTextField = memo(InlineTextFieldInternal);
+
+// lib/field-transforms/default-transforms/inline-text-transform.tsx
+import { jsx as jsx25 } from "react/jsx-runtime";
+var getInlineTextTransform = () => ({
+  text: ({ value, componentId, field, propPath, isReadOnly }) => {
+    if (field.contentEditable) {
+      return /* @__PURE__ */ jsx25(
+        InlineTextField,
+        {
+          propPath,
+          componentId,
+          value,
+          opts: { disableLineBreaks: true },
+          isReadOnly
+        }
+      );
+    }
+    return value;
+  },
+  textarea: ({ value, componentId, field, propPath, isReadOnly }) => {
+    if (field.contentEditable) {
+      return /* @__PURE__ */ jsx25(
+        InlineTextField,
+        {
+          propPath,
+          componentId,
+          value,
+          isReadOnly
+        }
+      );
+    }
+    return value;
+  },
+  custom: ({ value, componentId, field, propPath, isReadOnly }) => {
+    if (field.contentEditable && typeof value === "string") {
+      return /* @__PURE__ */ jsx25(
+        InlineTextField,
+        {
+          propPath,
+          componentId,
+          value,
+          isReadOnly
+        }
+      );
+    }
+    return value;
+  }
+});
+
 // components/DropZone/index.tsx
-import { Fragment as Fragment7, jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
-var getClassName18 = get_class_name_factory_default("DropZone", styles_module_default11);
+import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs11 } from "react/jsx-runtime";
+var getClassName19 = get_class_name_factory_default("DropZone", styles_module_default11);
 var getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;
 var RENDER_DEBUG = false;
-var DropZoneEditPure = (props) => /* @__PURE__ */ jsx24(DropZoneEdit, __spreadValues({}, props));
+var DropZoneEditPure = (props) => /* @__PURE__ */ jsx26(DropZoneEdit, __spreadValues({}, props));
 var DropZoneChild = ({
   zoneCompound,
   componentId,
@@ -4111,9 +5828,9 @@ var DropZoneChild = ({
 }) => {
   var _a, _b;
   const metadata = useAppStore((s) => s.metadata);
-  const ctx = useContext7(dropZoneContext);
+  const ctx = useContext8(dropZoneContext);
   const { depth = 1 } = ctx != null ? ctx : {};
-  const zoneStore = useContext7(ZoneStoreContext);
+  const zoneStore = useContext8(ZoneStoreContext);
   const nodeProps = useAppStore(
     useShallow4((s) => {
       var _a2;
@@ -4184,10 +5901,10 @@ var DropZoneChild = ({
       if (item && "element" in item && item.element) {
         return (
           // Safe to use this since the HTML is set by the user
-          /* @__PURE__ */ jsx24("div", { dangerouslySetInnerHTML: { __html: item.element.outerHTML } })
+          /* @__PURE__ */ jsx26("div", { dangerouslySetInnerHTML: { __html: item.element.outerHTML } })
         );
       }
-      return /* @__PURE__ */ jsx24(DrawerItemInner, { name: label, children: (_a2 = overrides.componentItem) != null ? _a2 : overrides.drawerItem });
+      return /* @__PURE__ */ jsx26(DrawerItemInner, { name: label, children: (_a2 = overrides.componentItem) != null ? _a2 : overrides.drawerItem });
     },
     [componentId, label, overrides]
   );
@@ -4210,7 +5927,7 @@ var DropZoneChild = ({
   const plugins = useAppStore((s) => s.plugins);
   const userFieldTransforms = useAppStore((s) => s.fieldTransforms);
   const combinedFieldTransforms = useMemo8(
-    () => __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, getSlotTransform(DropZoneEditPure, (slotProps) => /* @__PURE__ */ jsx24(ContextSlotRender, { componentId, zone: slotProps.zone }))), getInlineTextTransform()), plugins.reduce(
+    () => __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, getSlotTransform(DropZoneEditPure, (slotProps) => /* @__PURE__ */ jsx26(ContextSlotRender, { componentId, zone: slotProps.zone }))), getInlineTextTransform()), plugins.reduce(
       (acc, plugin) => __spreadValues(__spreadValues({}, acc), plugin.fieldTransforms),
       {}
     )), userFieldTransforms),
@@ -4233,7 +5950,7 @@ var DropZoneChild = ({
   if (isInserting) {
     Render2 = renderPreview;
   }
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx26(
     DraggableComponent,
     {
       id: componentId,
@@ -4247,18 +5964,18 @@ var DropZoneChild = ({
       autoDragAxis: dragAxis,
       userDragAxis: collisionAxis,
       inDroppableZone,
-      children: (dragRef) => (componentConfig == null ? void 0 : componentConfig.inline) && !isInserting ? /* @__PURE__ */ jsx24(Fragment7, { children: /* @__PURE__ */ jsx24(
+      children: (dragRef) => (componentConfig == null ? void 0 : componentConfig.inline) && !isInserting ? /* @__PURE__ */ jsx26(Fragment7, { children: /* @__PURE__ */ jsx26(
         Render2,
         __spreadProps(__spreadValues({}, transformedProps), {
           puck: __spreadProps(__spreadValues({}, transformedProps.puck), {
             dragRef
           })
         })
-      ) }) : /* @__PURE__ */ jsx24("div", { ref: dragRef, children: /* @__PURE__ */ jsx24(Render2, __spreadValues({}, transformedProps)) })
+      ) }) : /* @__PURE__ */ jsx26("div", { ref: dragRef, children: /* @__PURE__ */ jsx26(Render2, __spreadValues({}, transformedProps)) })
     }
   );
 };
-var DropZoneChildMemo = memo(DropZoneChild);
+var DropZoneChildMemo = memo2(DropZoneChild);
 var DropZoneEdit = forwardRef3(
   function DropZoneEditInternal({
     zone,
@@ -4269,7 +5986,7 @@ var DropZoneEdit = forwardRef3(
     minEmptyHeight: userMinEmptyHeight = 128,
     collisionAxis
   }, userRef) {
-    const ctx = useContext7(dropZoneContext);
+    const ctx = useContext8(dropZoneContext);
     const appStoreApi = useAppStoreApi();
     const {
       // These all need setting via context
@@ -4307,14 +6024,14 @@ var DropZoneEdit = forwardRef3(
         return (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.type;
       })
     );
-    useEffect13(() => {
+    useEffect18(() => {
       if (!zoneType || zoneType === "dropzone") {
         if (ctx == null ? void 0 : ctx.registerZone) {
           ctx == null ? void 0 : ctx.registerZone(zoneCompound);
         }
       }
     }, [zoneType, appStoreApi]);
-    useEffect13(() => {
+    useEffect18(() => {
       if (zoneType === "dropzone") {
         if (zoneCompound !== rootDroppableId) {
           console.warn(
@@ -4326,8 +6043,8 @@ var DropZoneEdit = forwardRef3(
     const contentIds = useMemo8(() => {
       return zoneContentIds || [];
     }, [zoneContentIds]);
-    const ref = useRef5(null);
-    const acceptsTarget = useCallback10(
+    const ref = useRef6(null);
+    const acceptsTarget = useCallback11(
       (componentType) => {
         if (!componentType) {
           return true;
@@ -4365,7 +6082,7 @@ var DropZoneEdit = forwardRef3(
       }
       return _isEnabled;
     });
-    useEffect13(() => {
+    useEffect18(() => {
       if (registerLocalZone) {
         registerLocalZone(zoneCompound, targetAccepted || isEnabled);
       }
@@ -4380,8 +6097,8 @@ var DropZoneEdit = forwardRef3(
       zoneCompound
     );
     const isDropEnabled = isEnabled && (preview ? contentIdsWithPreview.length === 1 : contentIdsWithPreview.length === 0);
-    const zoneStore = useContext7(ZoneStoreContext);
-    useEffect13(() => {
+    const zoneStore = useContext8(ZoneStoreContext);
+    useEffect18(() => {
       const { enabledIndex } = zoneStore.getState();
       zoneStore.setState({
         enabledIndex: __spreadProps(__spreadValues({}, enabledIndex), { [zoneCompound]: isEnabled })
@@ -4410,10 +6127,10 @@ var DropZoneEdit = forwardRef3(
       userMinEmptyHeight,
       ref
     });
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx26(
       "div",
       {
-        className: `${getClassName18({
+        className: `${getClassName19({
           isRootZone,
           hoveringOverArea,
           isEnabled,
@@ -4431,7 +6148,7 @@ var DropZoneEdit = forwardRef3(
           backgroundColor: RENDER_DEBUG ? getRandomColor() : style == null ? void 0 : style.backgroundColor
         }),
         children: contentIdsWithPreview.map((componentId, i) => {
-          return /* @__PURE__ */ jsx24(
+          return /* @__PURE__ */ jsx26(
             DropZoneChildMemo,
             {
               zoneCompound,
@@ -4454,7 +6171,7 @@ var DropZoneRenderItem = ({
   metadata
 }) => {
   const Component = config.components[item.type];
-  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ jsx24(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
+  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ jsx26(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
   const nextContextValue = useMemo8(
     () => ({
       areaId: props.id,
@@ -4462,7 +6179,7 @@ var DropZoneRenderItem = ({
     }),
     [props]
   );
-  return /* @__PURE__ */ jsx24(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx26(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx26(
     Component.render,
     __spreadProps(__spreadValues({}, props), {
       puck: __spreadProps(__spreadValues({}, props.puck), {
@@ -4472,15 +6189,15 @@ var DropZoneRenderItem = ({
     })
   ) }, props.id);
 };
-var DropZoneRenderPure = (props) => /* @__PURE__ */ jsx24(DropZoneRender, __spreadValues({}, props));
+var DropZoneRenderPure = (props) => /* @__PURE__ */ jsx26(DropZoneRender, __spreadValues({}, props));
 var DropZoneRender = forwardRef3(
   function DropZoneRenderInternal({ className, style, zone }, ref) {
-    const ctx = useContext7(dropZoneContext);
+    const ctx = useContext8(dropZoneContext);
     const { areaId = "root" } = ctx || {};
-    const { config, data, metadata } = useContext7(renderContext);
+    const { config, data, metadata } = useContext8(renderContext);
     let zoneCompound = `${areaId}:${zone}`;
     let content = (data == null ? void 0 : data.content) || [];
-    useEffect13(() => {
+    useEffect18(() => {
       if (!content) {
         if (ctx == null ? void 0 : ctx.registerZone) {
           ctx == null ? void 0 : ctx.registerZone(zoneCompound);
@@ -4493,10 +6210,10 @@ var DropZoneRender = forwardRef3(
     if (zoneCompound !== rootDroppableId) {
       content = setupZone(data, zoneCompound).zones[zoneCompound];
     }
-    return /* @__PURE__ */ jsx24("div", { className, style, ref, children: content.map((item) => {
+    return /* @__PURE__ */ jsx26("div", { className, style, ref, children: content.map((item) => {
       const Component = config.components[item.type];
       if (Component) {
-        return /* @__PURE__ */ jsx24(
+        return /* @__PURE__ */ jsx26(
           DropZoneRenderItem,
           {
             config,
@@ -4510,20 +6227,20 @@ var DropZoneRender = forwardRef3(
     }) });
   }
 );
-var DropZonePure = (props) => /* @__PURE__ */ jsx24(DropZone, __spreadValues({}, props));
+var DropZonePure = (props) => /* @__PURE__ */ jsx26(DropZone, __spreadValues({}, props));
 var DropZone = forwardRef3(
   function DropZone2(props, ref) {
-    const ctx = useContext7(dropZoneContext);
+    const ctx = useContext8(dropZoneContext);
     if ((ctx == null ? void 0 : ctx.mode) === "edit") {
-      return /* @__PURE__ */ jsx24(Fragment7, { children: /* @__PURE__ */ jsx24(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
+      return /* @__PURE__ */ jsx26(Fragment7, { children: /* @__PURE__ */ jsx26(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
     }
-    return /* @__PURE__ */ jsx24(Fragment7, { children: /* @__PURE__ */ jsx24(DropZoneRender, __spreadProps(__spreadValues({}, props), { ref })) });
+    return /* @__PURE__ */ jsx26(Fragment7, { children: /* @__PURE__ */ jsx26(DropZoneRender, __spreadProps(__spreadValues({}, props), { ref })) });
   }
 );
 
 // components/Render/index.tsx
 import React3, { useMemo as useMemo9 } from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var renderContext = React3.createContext({
   config: { components: {} },
   data: { root: {}, content: [] },
@@ -4555,7 +6272,7 @@ function Render({
   const propsWithSlots = useSlots(
     config,
     { type: "root", props: pageProps },
-    (props) => /* @__PURE__ */ jsx25(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata }))
+    (props) => /* @__PURE__ */ jsx27(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata }))
   );
   const nextContextValue = useMemo9(
     () => ({
@@ -4565,15 +6282,15 @@ function Render({
     []
   );
   if ((_a = config.root) == null ? void 0 : _a.render) {
-    return /* @__PURE__ */ jsx25(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx25(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx25(config.root.render, __spreadProps(__spreadValues({}, propsWithSlots), { children: /* @__PURE__ */ jsx25(DropZoneRenderPure, { zone: rootZone }) })) }) });
+    return /* @__PURE__ */ jsx27(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx27(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx27(config.root.render, __spreadProps(__spreadValues({}, propsWithSlots), { children: /* @__PURE__ */ jsx27(DropZoneRenderPure, { zone: rootZone }) })) }) });
   }
-  return /* @__PURE__ */ jsx25(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx25(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx25(DropZoneRenderPure, { zone: rootZone }) }) });
+  return /* @__PURE__ */ jsx27(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx27(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx27(DropZoneRenderPure, { zone: rootZone }) }) });
 }
 
 // lib/use-puck.ts
 init_react_import();
-import { createContext as createContext4, useContext as useContext8, useEffect as useEffect14, useState as useState16 } from "react";
-import { createStore as createStore4, useStore as useStore2 } from "zustand";
+import { createContext as createContext5, useContext as useContext9, useEffect as useEffect19, useState as useState17 } from "react";
+import { createStore as createStore4, useStore as useStore3 } from "zustand";
 var generateUsePuck = (store) => {
   const history = {
     back: store.history.back,
@@ -4605,7 +6322,7 @@ var generateUsePuck = (store) => {
   };
   return storeData;
 };
-var UsePuckStoreContext = createContext4(
+var UsePuckStoreContext = createContext5(
   null
 );
 var convertToPickedStore = (store) => {
@@ -4619,12 +6336,12 @@ var convertToPickedStore = (store) => {
   };
 };
 var useRegisterUsePuckStore = (appStore) => {
-  const [usePuckStore] = useState16(
+  const [usePuckStore] = useState17(
     () => createStore4(
       () => generateUsePuck(convertToPickedStore(appStore.getState()))
     )
   );
-  useEffect14(() => {
+  useEffect19(() => {
     return appStore.subscribe(
       (store) => convertToPickedStore(store),
       (pickedStore) => {
@@ -4636,11 +6353,11 @@ var useRegisterUsePuckStore = (appStore) => {
 };
 function createUsePuck() {
   return function usePuck2(selector) {
-    const usePuckApi = useContext8(UsePuckStoreContext);
+    const usePuckApi = useContext9(UsePuckStoreContext);
     if (!usePuckApi) {
       throw new Error("usePuck must be used inside <Puck>.");
     }
-    const result = useStore2(
+    const result = useStore3(
       usePuckApi,
       selector != null ? selector : (s) => s
     );
@@ -4648,7 +6365,7 @@ function createUsePuck() {
   };
 }
 function usePuck() {
-  useEffect14(() => {
+  useEffect19(() => {
     console.warn(
       "You're using the `usePuck` method without a selector, which may cause unnecessary re-renders. Replace with `createUsePuck` and provide a selector for improved performance."
     );
@@ -4656,7 +6373,7 @@ function usePuck() {
   return createUsePuck()((s) => s);
 }
 function useGetPuck() {
-  const usePuckApi = useContext8(UsePuckStoreContext);
+  const usePuckApi = useContext9(UsePuckStoreContext);
   if (!usePuckApi) {
     throw new Error("usePuckGet must be used inside <Puck>.");
   }
@@ -4666,13 +6383,13 @@ function useGetPuck() {
 // components/Puck/index.tsx
 init_react_import();
 import {
-  createContext as createContext7,
-  useCallback as useCallback19,
-  useContext as useContext12,
-  useEffect as useEffect24,
+  createContext as createContext8,
+  useCallback as useCallback20,
+  useContext as useContext13,
+  useEffect as useEffect29,
   useMemo as useMemo20,
-  useRef as useRef11,
-  useState as useState24
+  useRef as useRef12,
+  useState as useState25
 } from "react";
 
 // components/SidebarSection/index.tsx
@@ -4680,7 +6397,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css#css-module
 init_react_import();
-var styles_module_default13 = { "SidebarSection": "_SidebarSection_8boj8_1", "SidebarSection-title": "_SidebarSection-title_8boj8_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_8boj8_20", "SidebarSection-content": "_SidebarSection-content_8boj8_24", "SidebarSection--noPadding": "_SidebarSection--noPadding_8boj8_28", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_8boj8_41", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_8boj8_70", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_8boj8_41", "SidebarSection-heading": "_SidebarSection-heading_8boj8_82", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_8boj8_86" };
+var styles_module_default14 = { "SidebarSection": "_SidebarSection_8boj8_1", "SidebarSection-title": "_SidebarSection-title_8boj8_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_8boj8_20", "SidebarSection-content": "_SidebarSection-content_8boj8_24", "SidebarSection--noPadding": "_SidebarSection--noPadding_8boj8_28", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_8boj8_41", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_8boj8_70", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_8boj8_41", "SidebarSection-heading": "_SidebarSection-heading_8boj8_82", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_8boj8_86" };
 
 // lib/use-breadcrumbs.ts
 init_react_import();
@@ -4727,8 +6444,8 @@ var useBreadcrumbs = (renderCount) => {
 };
 
 // components/SidebarSection/index.tsx
-import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
-var getClassName19 = get_class_name_factory_default("SidebarSection", styles_module_default13);
+import { jsx as jsx28, jsxs as jsxs12 } from "react/jsx-runtime";
+var getClassName20 = get_class_name_factory_default("SidebarSection", styles_module_default14);
 var SidebarSection = ({
   children,
   title,
@@ -4743,26 +6460,26 @@ var SidebarSection = ({
   return /* @__PURE__ */ jsxs12(
     "div",
     {
-      className: getClassName19({ noBorderTop, noPadding }),
+      className: getClassName20({ noBorderTop, noPadding }),
       style: { background },
       children: [
-        /* @__PURE__ */ jsx26("div", { className: getClassName19("title"), children: /* @__PURE__ */ jsxs12("div", { className: getClassName19("breadcrumbs"), children: [
-          showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs12("div", { className: getClassName19("breadcrumb"), children: [
-            /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx28("div", { className: getClassName20("title"), children: /* @__PURE__ */ jsxs12("div", { className: getClassName20("breadcrumbs"), children: [
+          showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs12("div", { className: getClassName20("breadcrumb"), children: [
+            /* @__PURE__ */ jsx28(
               "button",
               {
                 type: "button",
-                className: getClassName19("breadcrumbLabel"),
+                className: getClassName20("breadcrumbLabel"),
                 onClick: () => setUi({ itemSelector: breadcrumb.selector }),
                 children: breadcrumb.label
               }
             ),
-            /* @__PURE__ */ jsx26(ChevronRight, { size: 16 })
+            /* @__PURE__ */ jsx28(ChevronRight, { size: 16 })
           ] }, i)) : null,
-          /* @__PURE__ */ jsx26("div", { className: getClassName19("heading"), children: /* @__PURE__ */ jsx26(Heading, { rank: "2", size: "xs", children: title }) })
+          /* @__PURE__ */ jsx28("div", { className: getClassName20("heading"), children: /* @__PURE__ */ jsx28(Heading, { rank: "2", size: "xs", children: title }) })
         ] }) }),
-        /* @__PURE__ */ jsx26("div", { className: getClassName19("content"), children }),
-        isLoading && /* @__PURE__ */ jsx26("div", { className: getClassName19("loadingOverlay"), children: /* @__PURE__ */ jsx26(Loader, { size: 32 }) })
+        /* @__PURE__ */ jsx28("div", { className: getClassName20("content"), children }),
+        isLoading && /* @__PURE__ */ jsx28("div", { className: getClassName20("loadingOverlay"), children: /* @__PURE__ */ jsx28(Loader, { size: 32 }) })
       ]
     }
   );
@@ -4770,28 +6487,28 @@ var SidebarSection = ({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css#css-module
 init_react_import();
-var styles_module_default14 = { "Puck": "_Puck_vnhjy_19", "Puck-portal": "_Puck-portal_vnhjy_31", "PuckLayout-inner": "_PuckLayout-inner_vnhjy_38", "PuckLayout--mounted": "_PuckLayout--mounted_vnhjy_50", "PuckLayout--leftSideBarVisible": "_PuckLayout--leftSideBarVisible_vnhjy_54", "PuckLayout--rightSideBarVisible": "_PuckLayout--rightSideBarVisible_vnhjy_60", "PuckLayout-mounted": "_PuckLayout-mounted_vnhjy_74", "PuckLayout": "_PuckLayout_vnhjy_38" };
+var styles_module_default15 = { "Puck": "_Puck_a45x1_19", "Puck-portal": "_Puck-portal_a45x1_31", "PuckLayout-inner": "_PuckLayout-inner_a45x1_38", "PuckLayout--mounted": "_PuckLayout--mounted_a45x1_59", "PuckLayout--leftSideBarVisible": "_PuckLayout--leftSideBarVisible_a45x1_63", "PuckLayout--rightSideBarVisible": "_PuckLayout--rightSideBarVisible_a45x1_69", "PuckLayout-mounted": "_PuckLayout-mounted_a45x1_83", "PuckLayout": "_PuckLayout_a45x1_38" };
 
 // components/Puck/components/Fields/index.tsx
 init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css#css-module
 init_react_import();
-var styles_module_default15 = { "PuckFields": "_PuckFields_10bh7_1", "PuckFields--isLoading": "_PuckFields--isLoading_10bh7_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_10bh7_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_10bh7_25", "PuckFields-field": "_PuckFields-field_10bh7_32", "PuckFields--wrapFields": "_PuckFields--wrapFields_10bh7_36" };
+var styles_module_default16 = { "PuckFields": "_PuckFields_10bh7_1", "PuckFields--isLoading": "_PuckFields--isLoading_10bh7_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_10bh7_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_10bh7_25", "PuckFields-field": "_PuckFields-field_10bh7_32", "PuckFields--wrapFields": "_PuckFields--wrapFields_10bh7_36" };
 
 // components/Puck/components/Fields/index.tsx
-import { memo as memo2, useCallback as useCallback11, useMemo as useMemo11 } from "react";
+import { memo as memo3, useCallback as useCallback12, useMemo as useMemo11 } from "react";
 import { useShallow as useShallow5 } from "zustand/react/shallow";
-import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
-var getClassName20 = get_class_name_factory_default("PuckFields", styles_module_default15);
+import { Fragment as Fragment8, jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
+var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
 var DefaultFields = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx27(Fragment8, { children });
+  return /* @__PURE__ */ jsx29(Fragment8, { children });
 };
 var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(void 0, null, function* () {
   let currentProps;
-  const { dispatch, state, selectedItem, resolveComponentData } = appStore.getState();
+  const { dispatch, state, selectedItem, resolveComponentData: resolveComponentData2 } = appStore.getState();
   const { data, ui } = state;
   const { itemSelector } = ui;
   const rootProps = data.root.props || data.root;
@@ -4808,7 +6525,7 @@ var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(void
       type: "replace",
       destinationIndex: itemSelector.index,
       destinationZone: itemSelector.zone || rootDroppableId,
-      data: (yield resolveComponentData(
+      data: (yield resolveComponentData2(
         __spreadProps(__spreadValues({}, selectedItem), { props: newProps }),
         "replace"
       )).node,
@@ -4818,7 +6535,7 @@ var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(void
     if (data.root.props) {
       dispatch({
         type: "replaceRoot",
-        root: (yield resolveComponentData(
+        root: (yield resolveComponentData2(
           __spreadProps(__spreadValues({}, data.root), { props: newProps }),
           "replace"
         )).node,
@@ -4853,13 +6570,13 @@ var FieldsChild = ({ fieldName }) => {
     })
   );
   const appStore = useAppStoreApi();
-  const onChange = useCallback11(createOnChange(fieldName, appStore), [
+  const onChange = useCallback12(createOnChange(fieldName, appStore), [
     fieldName
   ]);
   const { visible = true } = field != null ? field : {};
   if (!field || !id || !visible) return null;
   if (field.type === "slot") return null;
-  return /* @__PURE__ */ jsx27("div", { className: getClassName20("field"), children: /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx29("div", { className: getClassName21("field"), children: /* @__PURE__ */ jsx29(
     AutoFieldPrivate,
     {
       field,
@@ -4871,7 +6588,7 @@ var FieldsChild = ({ fieldName }) => {
     }
   ) }, id);
 };
-var FieldsChildMemo = memo2(FieldsChild);
+var FieldsChildMemo = memo3(FieldsChild);
 var FieldsInternal = ({ wrapFields = true }) => {
   const overrides = useAppStore((s) => s.overrides);
   const componentResolving = useAppStore((s) => {
@@ -4900,37 +6617,37 @@ var FieldsInternal = ({ wrapFields = true }) => {
   return /* @__PURE__ */ jsxs13(
     "form",
     {
-      className: getClassName20({ wrapFields }),
+      className: getClassName21({ wrapFields }),
       onSubmit: (e) => {
         e.preventDefault();
       },
       children: [
-        /* @__PURE__ */ jsx27(Wrapper, { isLoading, itemSelector, children: fieldNames.map((fieldName) => /* @__PURE__ */ jsx27(FieldsChildMemo, { fieldName }, fieldName)) }),
-        isLoading && /* @__PURE__ */ jsx27("div", { className: getClassName20("loadingOverlay"), children: /* @__PURE__ */ jsx27("div", { className: getClassName20("loadingOverlayInner"), children: /* @__PURE__ */ jsx27(Loader, { size: 16 }) }) })
+        /* @__PURE__ */ jsx29(Wrapper, { isLoading, itemSelector, children: fieldNames.map((fieldName) => /* @__PURE__ */ jsx29(FieldsChildMemo, { fieldName }, fieldName)) }),
+        isLoading && /* @__PURE__ */ jsx29("div", { className: getClassName21("loadingOverlay"), children: /* @__PURE__ */ jsx29("div", { className: getClassName21("loadingOverlayInner"), children: /* @__PURE__ */ jsx29(Loader, { size: 16 }) }) })
       ]
     }
   );
 };
-var Fields = memo2(FieldsInternal);
+var Fields = memo3(FieldsInternal);
 
 // components/Puck/components/Components/index.tsx
 init_react_import();
 
 // lib/use-component-list.tsx
 init_react_import();
-import { useEffect as useEffect16, useState as useState17 } from "react";
+import { useEffect as useEffect21, useState as useState18 } from "react";
 
 // components/ComponentList/index.tsx
 init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css#css-module
 init_react_import();
-var styles_module_default16 = { "ComponentList": "_ComponentList_1rrlt_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_1rrlt_5", "ComponentList-content": "_ComponentList-content_1rrlt_9", "ComponentList-title": "_ComponentList-title_1rrlt_17", "ComponentList-titleIcon": "_ComponentList-titleIcon_1rrlt_53" };
+var styles_module_default17 = { "ComponentList": "_ComponentList_1rrlt_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_1rrlt_5", "ComponentList-content": "_ComponentList-content_1rrlt_9", "ComponentList-title": "_ComponentList-title_1rrlt_17", "ComponentList-titleIcon": "_ComponentList-titleIcon_1rrlt_53" };
 
 // components/ComponentList/index.tsx
-import { useEffect as useEffect15 } from "react";
-import { jsx as jsx28, jsxs as jsxs14 } from "react/jsx-runtime";
-var getClassName21 = get_class_name_factory_default("ComponentList", styles_module_default16);
+import { useEffect as useEffect20 } from "react";
+import { jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
+var getClassName22 = get_class_name_factory_default("ComponentList", styles_module_default17);
 var ComponentListItem = ({
   name,
   label
@@ -4942,14 +6659,14 @@ var ComponentListItem = ({
       type: name
     }).insert
   );
-  useEffect15(() => {
+  useEffect20(() => {
     if (overrides.componentItem) {
       console.warn(
         "The `componentItem` override has been deprecated and renamed to `drawerItem`"
       );
     }
   }, [overrides]);
-  return /* @__PURE__ */ jsx28(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: (_a = overrides.componentItem) != null ? _a : overrides.drawerItem });
+  return /* @__PURE__ */ jsx30(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: (_a = overrides.componentItem) != null ? _a : overrides.drawerItem });
 };
 var ComponentList = ({
   children,
@@ -4960,12 +6677,12 @@ var ComponentList = ({
   const setUi = useAppStore((s) => s.setUi);
   const componentList = useAppStore((s) => s.state.ui.componentList);
   const { expanded = true } = componentList[id] || {};
-  return /* @__PURE__ */ jsxs14("div", { className: getClassName21({ isExpanded: expanded }), children: [
+  return /* @__PURE__ */ jsxs14("div", { className: getClassName22({ isExpanded: expanded }), children: [
     title && /* @__PURE__ */ jsxs14(
       "button",
       {
         type: "button",
-        className: getClassName21("title"),
+        className: getClassName22("title"),
         onClick: () => setUi({
           componentList: __spreadProps(__spreadValues({}, componentList), {
             [id]: __spreadProps(__spreadValues({}, componentList[id]), {
@@ -4975,14 +6692,14 @@ var ComponentList = ({
         }),
         title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
         children: [
-          /* @__PURE__ */ jsx28("div", { children: title }),
-          /* @__PURE__ */ jsx28("div", { className: getClassName21("titleIcon"), children: expanded ? /* @__PURE__ */ jsx28(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx28(ChevronDown, { size: 12 }) })
+          /* @__PURE__ */ jsx30("div", { children: title }),
+          /* @__PURE__ */ jsx30("div", { className: getClassName22("titleIcon"), children: expanded ? /* @__PURE__ */ jsx30(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx30(ChevronDown, { size: 12 }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx28("div", { className: getClassName21("content"), children: /* @__PURE__ */ jsx28(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
+    /* @__PURE__ */ jsx30("div", { className: getClassName22("content"), children: /* @__PURE__ */ jsx30(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
       var _a;
-      return /* @__PURE__ */ jsx28(
+      return /* @__PURE__ */ jsx30(
         ComponentListItem,
         {
           label: (_a = config.components[componentKey]["label"]) != null ? _a : componentKey,
@@ -4996,12 +6713,12 @@ var ComponentList = ({
 ComponentList.Item = ComponentListItem;
 
 // lib/use-component-list.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var useComponentList = () => {
-  const [componentList, setComponentList] = useState17();
+  const [componentList, setComponentList] = useState18();
   const config = useAppStore((s) => s.config);
   const uiComponentList = useAppStore((s) => s.state.ui.componentList);
-  useEffect16(() => {
+  useEffect21(() => {
     var _a, _b, _c;
     if (Object.keys(uiComponentList).length > 0) {
       const matchedComponents = [];
@@ -5011,7 +6728,7 @@ var useComponentList = () => {
           if (category.visible === false || !category.components) {
             return null;
           }
-          return /* @__PURE__ */ jsx29(
+          return /* @__PURE__ */ jsx31(
             ComponentList,
             {
               id: categoryKey,
@@ -5020,7 +6737,7 @@ var useComponentList = () => {
                 var _a2;
                 matchedComponents.push(componentName);
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ jsx29(
+                return /* @__PURE__ */ jsx31(
                   ComponentList.Item,
                   {
                     label: (_a2 = componentConf["label"]) != null ? _a2 : componentName,
@@ -5040,7 +6757,7 @@ var useComponentList = () => {
       );
       if (remainingComponents.length > 0 && !((_a = uiComponentList.other) == null ? void 0 : _a.components) && ((_b = uiComponentList.other) == null ? void 0 : _b.visible) !== false) {
         _componentList.push(
-          /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsx31(
             ComponentList,
             {
               id: "other",
@@ -5048,7 +6765,7 @@ var useComponentList = () => {
               children: remainingComponents.map((componentName, i) => {
                 var _a2;
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ jsx29(
+                return /* @__PURE__ */ jsx31(
                   ComponentList.Item,
                   {
                     name: componentName,
@@ -5071,7 +6788,7 @@ var useComponentList = () => {
 
 // components/Puck/components/Components/index.tsx
 import { useMemo as useMemo12 } from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var Components = () => {
   const overrides = useAppStore((s) => s.overrides);
   const componentList = useComponentList();
@@ -5083,24 +6800,24 @@ var Components = () => {
     }
     return overrides.components || overrides.drawer || "div";
   }, [overrides]);
-  return /* @__PURE__ */ jsx30(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx30(ComponentList, { id: "all" }) });
+  return /* @__PURE__ */ jsx32(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx32(ComponentList, { id: "all" }) });
 };
 
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-import { useCallback as useCallback12, useEffect as useEffect18, useRef as useRef6, useMemo as useMemo13 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect23, useRef as useRef7, useMemo as useMemo13 } from "react";
 
 // components/AutoFrame/index.tsx
 init_react_import();
 import {
-  createContext as createContext5,
-  useContext as useContext9,
-  useEffect as useEffect17,
-  useState as useState18
+  createContext as createContext6,
+  useContext as useContext10,
+  useEffect as useEffect22,
+  useState as useState19
 } from "react";
 import hash from "object-hash";
 import { createPortal as createPortal3 } from "react-dom";
-import { Fragment as Fragment9, jsx as jsx31 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx33 } from "react/jsx-runtime";
 var styleSelector = 'style, link[rel="stylesheet"]';
 var collectStyles = (doc) => {
   const collected = [];
@@ -5150,7 +6867,7 @@ var CopyHostStyles = ({
   onStylesLoaded = () => null
 }) => {
   const { document: doc, window: win } = useFrame();
-  useEffect17(() => {
+  useEffect22(() => {
     if (!win || !doc) {
       return () => {
       };
@@ -5307,10 +7024,10 @@ var CopyHostStyles = ({
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ jsx31(Fragment9, { children });
+  return /* @__PURE__ */ jsx33(Fragment9, { children });
 };
-var autoFrameContext = createContext5({});
-var useFrame = () => useContext9(autoFrameContext);
+var autoFrameContext = createContext6({});
+var useFrame = () => useContext10(autoFrameContext);
 function AutoFrame(_a) {
   var _b = _a, {
     children,
@@ -5331,11 +7048,11 @@ function AutoFrame(_a) {
     "onNotReady",
     "frameRef"
   ]);
-  const [loaded, setLoaded] = useState18(false);
-  const [ctx, setCtx] = useState18({});
-  const [mountTarget, setMountTarget] = useState18();
-  const [stylesLoaded, setStylesLoaded] = useState18(false);
-  useEffect17(() => {
+  const [loaded, setLoaded] = useState19(false);
+  const [ctx, setCtx] = useState19({});
+  const [mountTarget, setMountTarget] = useState19();
+  const [stylesLoaded, setStylesLoaded] = useState19(false);
+  useEffect22(() => {
     var _a2;
     if (frameRef.current) {
       const doc = frameRef.current.contentDocument;
@@ -5354,7 +7071,7 @@ function AutoFrame(_a) {
       }
     }
   }, [frameRef, loaded, stylesLoaded]);
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx33(
     "iframe",
     __spreadProps(__spreadValues({}, props), {
       className,
@@ -5364,7 +7081,7 @@ function AutoFrame(_a) {
       onLoad: () => {
         setLoaded(true);
       },
-      children: /* @__PURE__ */ jsx31(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx31(
+      children: /* @__PURE__ */ jsx33(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx33(
         CopyHostStyles,
         {
           debug,
@@ -5380,14 +7097,14 @@ var AutoFrame_default = AutoFrame;
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css#css-module
 init_react_import();
-var styles_module_default17 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPreview-frame": "_PuckPreview-frame_z2rgu_6" };
+var styles_module_default18 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPreview-frame": "_PuckPreview-frame_z2rgu_6" };
 
 // components/Puck/components/Preview/index.tsx
-import { Fragment as Fragment10, jsx as jsx32 } from "react/jsx-runtime";
-var getClassName22 = get_class_name_factory_default("PuckPreview", styles_module_default17);
+import { Fragment as Fragment10, jsx as jsx34 } from "react/jsx-runtime";
+var getClassName23 = get_class_name_factory_default("PuckPreview", styles_module_default18);
 var useBubbleIframeEvents = (ref) => {
   const status = useAppStore((s) => s.status);
-  useEffect18(() => {
+  useEffect23(() => {
     if (ref.current && status === "READY") {
       const iframe = ref.current;
       const handlePointerMove = (event) => {
@@ -5436,7 +7153,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
   const renderData = useAppStore(
     (s) => s.state.ui.previewMode === "edit" ? null : s.state.data
   );
-  const Page = useCallback12(
+  const Page = useCallback13(
     (pageProps) => {
       var _a, _b;
       const propsWithSlots = useSlots(
@@ -5446,15 +7163,15 @@ var Preview2 = ({ id = "puck-preview" }) => {
       );
       return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadValues({
         id: "puck-root"
-      }, propsWithSlots)) : /* @__PURE__ */ jsx32(Fragment10, { children: propsWithSlots.children });
+      }, propsWithSlots)) : /* @__PURE__ */ jsx34(Fragment10, { children: propsWithSlots.children });
     },
     [config]
   );
   const Frame = useMemo13(() => overrides.iframe, [overrides]);
   const rootProps = root.props || root;
-  const ref = useRef6(null);
+  const ref = useRef7(null);
   useBubbleIframeEvents(ref);
-  const inner = !renderData ? /* @__PURE__ */ jsx32(
+  const inner = !renderData ? /* @__PURE__ */ jsx34(
     Page,
     __spreadProps(__spreadValues({}, rootProps), {
       puck: {
@@ -5464,18 +7181,18 @@ var Preview2 = ({ id = "puck-preview" }) => {
         metadata
       },
       editMode: true,
-      children: /* @__PURE__ */ jsx32(DropZonePure, { zone: rootDroppableId })
+      children: /* @__PURE__ */ jsx34(DropZonePure, { zone: rootDroppableId })
     })
-  ) : /* @__PURE__ */ jsx32(Render, { data: renderData, config, metadata });
-  useEffect18(() => {
+  ) : /* @__PURE__ */ jsx34(Render, { data: renderData, config, metadata });
+  useEffect23(() => {
     if (!iframe.enabled) {
       setStatus("READY");
     }
   }, [iframe.enabled]);
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx34(
     "div",
     {
-      className: getClassName22(),
+      className: getClassName23(),
       id,
       "data-puck-preview": true,
       onClick: (e) => {
@@ -5484,11 +7201,11 @@ var Preview2 = ({ id = "puck-preview" }) => {
           dispatch({ type: "setUi", ui: { itemSelector: null } });
         }
       },
-      children: iframe.enabled ? /* @__PURE__ */ jsx32(
+      children: iframe.enabled ? /* @__PURE__ */ jsx34(
         AutoFrame_default,
         {
           id: "preview-frame",
-          className: getClassName22("frame"),
+          className: getClassName23("frame"),
           "data-rfd-iframe": true,
           onReady: () => {
             setStatus("READY");
@@ -5497,18 +7214,18 @@ var Preview2 = ({ id = "puck-preview" }) => {
             setStatus("MOUNTED");
           },
           frameRef: ref,
-          children: /* @__PURE__ */ jsx32(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
+          children: /* @__PURE__ */ jsx34(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
             if (Frame) {
-              return /* @__PURE__ */ jsx32(Frame, { document: document2, children: inner });
+              return /* @__PURE__ */ jsx34(Frame, { document: document2, children: inner });
             }
             return inner;
           } })
         }
-      ) : /* @__PURE__ */ jsx32(
+      ) : /* @__PURE__ */ jsx34(
         "div",
         {
           id: "preview-frame",
-          className: getClassName22("frame"),
+          className: getClassName23("frame"),
           ref,
           "data-puck-entry": true,
           children: inner
@@ -5526,7 +7243,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css#css-module
 init_react_import();
-var styles_module_default18 = { "LayerTree": "_LayerTree_7rx04_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_7rx04_11", "LayerTree-helper": "_LayerTree-helper_7rx04_17", "Layer": "_Layer_7rx04_1", "Layer-inner": "_Layer-inner_7rx04_29", "Layer--containsZone": "_Layer--containsZone_7rx04_35", "Layer-clickable": "_Layer-clickable_7rx04_39", "Layer--isSelected": "_Layer--isSelected_7rx04_61", "Layer-chevron": "_Layer-chevron_7rx04_77", "Layer--childIsSelected": "_Layer--childIsSelected_7rx04_78", "Layer-zones": "_Layer-zones_7rx04_82", "Layer-title": "_Layer-title_7rx04_96", "Layer-name": "_Layer-name_7rx04_105", "Layer-icon": "_Layer-icon_7rx04_111", "Layer-zoneIcon": "_Layer-zoneIcon_7rx04_116" };
+var styles_module_default19 = { "LayerTree": "_LayerTree_7rx04_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_7rx04_11", "LayerTree-helper": "_LayerTree-helper_7rx04_17", "Layer": "_Layer_7rx04_1", "Layer-inner": "_Layer-inner_7rx04_29", "Layer--containsZone": "_Layer--containsZone_7rx04_35", "Layer-clickable": "_Layer-clickable_7rx04_39", "Layer--isSelected": "_Layer--isSelected_7rx04_61", "Layer-chevron": "_Layer-chevron_7rx04_77", "Layer--childIsSelected": "_Layer--childIsSelected_7rx04_78", "Layer-zones": "_Layer-zones_7rx04_82", "Layer-title": "_Layer-title_7rx04_96", "Layer-name": "_Layer-name_7rx04_105", "Layer-icon": "_Layer-icon_7rx04_111", "Layer-zoneIcon": "_Layer-zoneIcon_7rx04_116" };
 
 // lib/scroll-into-view.ts
 init_react_import();
@@ -5540,7 +7257,7 @@ var scrollIntoView = (el) => {
 };
 
 // components/LayerTree/index.tsx
-import { useCallback as useCallback13, useContext as useContext10 } from "react";
+import { useCallback as useCallback14, useContext as useContext11 } from "react";
 
 // lib/on-scroll-end.ts
 init_react_import();
@@ -5563,9 +7280,9 @@ var onScrollEnd = (frame, cb) => {
 
 // components/LayerTree/index.tsx
 import { useShallow as useShallow6 } from "zustand/react/shallow";
-import { Fragment as Fragment11, jsx as jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
-var getClassName23 = get_class_name_factory_default("LayerTree", styles_module_default18);
-var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default18);
+import { Fragment as Fragment11, jsx as jsx35, jsxs as jsxs15 } from "react/jsx-runtime";
+var getClassName24 = get_class_name_factory_default("LayerTree", styles_module_default19);
+var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default19);
 var Layer = ({
   index,
   itemId,
@@ -5575,7 +7292,7 @@ var Layer = ({
   const config = useAppStore((s) => s.config);
   const itemSelector = useAppStore((s) => s.state.ui.itemSelector);
   const dispatch = useAppStore((s) => s.dispatch);
-  const setItemSelector = useCallback13(
+  const setItemSelector = useCallback14(
     (itemSelector2) => {
       dispatch({ type: "setUi", ui: { itemSelector: itemSelector2 } });
     },
@@ -5595,7 +7312,7 @@ var Layer = ({
     )
   );
   const containsZone = zonesForItem.length > 0;
-  const zoneStore = useContext10(ZoneStoreContext);
+  const zoneStore = useContext11(ZoneStoreContext);
   const isHovering = useContextStore(
     ZoneStoreContext,
     (s) => s.hoveringComponent === itemId
@@ -5620,7 +7337,7 @@ var Layer = ({
         childIsSelected
       }),
       children: [
-        /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsx35("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs15(
           "button",
           {
             type: "button",
@@ -5658,22 +7375,22 @@ var Layer = ({
               zoneStore.setState({ hoveringComponent: null });
             },
             children: [
-              containsZone && /* @__PURE__ */ jsx33(
+              containsZone && /* @__PURE__ */ jsx35(
                 "div",
                 {
                   className: getClassNameLayer("chevron"),
                   title: isSelected ? "Collapse" : "Expand",
-                  children: /* @__PURE__ */ jsx33(ChevronDown, { size: "12" })
+                  children: /* @__PURE__ */ jsx35(ChevronDown, { size: "12" })
                 }
               ),
               /* @__PURE__ */ jsxs15("div", { className: getClassNameLayer("title"), children: [
-                /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("icon"), children: nodeData.data.type === "Text" || nodeData.data.type === "Heading" ? /* @__PURE__ */ jsx33(Type, { size: "16" }) : /* @__PURE__ */ jsx33(LayoutGrid, { size: "16" }) }),
-                /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("name"), children: label })
+                /* @__PURE__ */ jsx35("div", { className: getClassNameLayer("icon"), children: nodeData.data.type === "Text" || nodeData.data.type === "Heading" ? /* @__PURE__ */ jsx35(Type, { size: "16" }) : /* @__PURE__ */ jsx35(LayoutGrid, { size: "16" }) }),
+                /* @__PURE__ */ jsx35("div", { className: getClassNameLayer("name"), children: label })
               ] })
             ]
           }
         ) }),
-        containsZone && zonesForItem.map((subzone) => /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ jsx33(LayerTree, { zoneCompound: subzone }) }, subzone))
+        containsZone && zonesForItem.map((subzone) => /* @__PURE__ */ jsx35("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ jsx35(LayerTree, { zoneCompound: subzone }) }, subzone))
       ]
     }
   );
@@ -5700,14 +7417,14 @@ var LayerTree = ({
     )
   );
   return /* @__PURE__ */ jsxs15(Fragment11, { children: [
-    label && /* @__PURE__ */ jsxs15("div", { className: getClassName23("zoneTitle"), children: [
-      /* @__PURE__ */ jsx33("div", { className: getClassName23("zoneIcon"), children: /* @__PURE__ */ jsx33(Layers, { size: "16" }) }),
+    label && /* @__PURE__ */ jsxs15("div", { className: getClassName24("zoneTitle"), children: [
+      /* @__PURE__ */ jsx35("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ jsx35(Layers, { size: "16" }) }),
       label
     ] }),
-    /* @__PURE__ */ jsxs15("ul", { className: getClassName23(), children: [
-      contentIds.length === 0 && /* @__PURE__ */ jsx33("div", { className: getClassName23("helper"), children: "No items" }),
+    /* @__PURE__ */ jsxs15("ul", { className: getClassName24(), children: [
+      contentIds.length === 0 && /* @__PURE__ */ jsx35("div", { className: getClassName24("helper"), children: "No items" }),
       contentIds.map((itemId, i) => {
-        return /* @__PURE__ */ jsx33(
+        return /* @__PURE__ */ jsx35(
           Layer,
           {
             index: i,
@@ -5734,14 +7451,14 @@ var findZonesForArea = (state, area) => {
 
 // components/Puck/components/Outline/index.tsx
 import { useShallow as useShallow7 } from "zustand/react/shallow";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var Outline = () => {
   const outlineOverride = useAppStore((s) => s.overrides.outline);
   const rootZones = useAppStore(
     useShallow7((s) => findZonesForArea(s.state, "root"))
   );
   const Wrapper = useMemo14(() => outlineOverride || "div", [outlineOverride]);
-  return /* @__PURE__ */ jsx34(Wrapper, { children: rootZones.map((zoneCompound) => /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx36(Wrapper, { children: rootZones.map((zoneCompound) => /* @__PURE__ */ jsx36(
     LayerTree,
     {
       label: rootZones.length === 1 ? "" : zoneCompound.split(":")[1],
@@ -5754,30 +7471,30 @@ var Outline = () => {
 // components/Puck/components/Canvas/index.tsx
 init_react_import();
 import {
-  useCallback as useCallback14,
-  useEffect as useEffect20,
+  useCallback as useCallback15,
+  useEffect as useEffect25,
   useMemo as useMemo17,
-  useRef as useRef8,
-  useState as useState20
+  useRef as useRef9,
+  useState as useState21
 } from "react";
 
 // components/ViewportControls/index.tsx
 init_react_import();
-import { useEffect as useEffect19, useMemo as useMemo15, useState as useState19 } from "react";
+import { useEffect as useEffect24, useMemo as useMemo15, useState as useState20 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
 init_react_import();
-var styles_module_default19 = { "ViewportControls": "_ViewportControls_gejzr_1", "ViewportControls-divider": "_ViewportControls-divider_gejzr_15", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_gejzr_21", "ViewportButton--isActive": "_ViewportButton--isActive_gejzr_38", "ViewportButton-inner": "_ViewportButton-inner_gejzr_38" };
+var styles_module_default20 = { "ViewportControls": "_ViewportControls_gejzr_1", "ViewportControls-divider": "_ViewportControls-divider_gejzr_15", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_gejzr_21", "ViewportButton--isActive": "_ViewportButton--isActive_gejzr_38", "ViewportButton-inner": "_ViewportButton-inner_gejzr_38" };
 
 // components/ViewportControls/index.tsx
-import { jsx as jsx35, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs16 } from "react/jsx-runtime";
 var icons = {
-  Smartphone: /* @__PURE__ */ jsx35(Smartphone, { size: 16 }),
-  Tablet: /* @__PURE__ */ jsx35(Tablet, { size: 16 }),
-  Monitor: /* @__PURE__ */ jsx35(Monitor, { size: 16 })
+  Smartphone: /* @__PURE__ */ jsx37(Smartphone, { size: 16 }),
+  Tablet: /* @__PURE__ */ jsx37(Tablet, { size: 16 }),
+  Monitor: /* @__PURE__ */ jsx37(Monitor, { size: 16 })
 };
-var getClassName24 = get_class_name_factory_default("ViewportControls", styles_module_default19);
-var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default19);
+var getClassName25 = get_class_name_factory_default("ViewportControls", styles_module_default20);
+var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default20);
 var ViewportButton = ({
   children,
   height = "auto",
@@ -5786,11 +7503,11 @@ var ViewportButton = ({
   onClick
 }) => {
   const viewports = useAppStore((s) => s.state.ui.viewports);
-  const [isActive, setIsActive] = useState19(false);
-  useEffect19(() => {
+  const [isActive, setIsActive] = useState20(false);
+  useEffect24(() => {
     setIsActive(width === viewports.current.width);
   }, [width, viewports.current.width]);
-  return /* @__PURE__ */ jsx35("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx37("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx37(
     IconButton,
     {
       type: "button",
@@ -5800,7 +7517,7 @@ var ViewportButton = ({
         e.stopPropagation();
         onClick({ width, height });
       },
-      children: /* @__PURE__ */ jsx35("span", { className: getClassNameButton("inner"), children })
+      children: /* @__PURE__ */ jsx37("span", { className: getClassNameButton("inner"), children })
     }
   ) });
 };
@@ -5836,8 +7553,8 @@ var ViewportControls = ({
     ].filter((a) => a.value <= autoZoom).sort((a, b) => a.value > b.value ? 1 : -1),
     [autoZoom]
   );
-  return /* @__PURE__ */ jsxs16("div", { className: getClassName24(), children: [
-    viewports.map((viewport, i) => /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsxs16("div", { className: getClassName25(), children: [
+    viewports.map((viewport, i) => /* @__PURE__ */ jsx37(
       ViewportButton,
       {
         height: viewport.height,
@@ -5848,8 +7565,8 @@ var ViewportControls = ({
       },
       i
     )),
-    /* @__PURE__ */ jsx35("div", { className: getClassName24("divider") }),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx37("div", { className: getClassName25("divider") }),
+    /* @__PURE__ */ jsx37(
       IconButton,
       {
         type: "button",
@@ -5864,10 +7581,10 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ jsx35(ZoomOut, { size: 16 })
+        children: /* @__PURE__ */ jsx37(ZoomOut, { size: 16 })
       }
     ),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx37(
       IconButton,
       {
         type: "button",
@@ -5882,19 +7599,19 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ jsx35(ZoomIn, { size: 16 })
+        children: /* @__PURE__ */ jsx37(ZoomIn, { size: 16 })
       }
     ),
-    /* @__PURE__ */ jsx35("div", { className: getClassName24("divider") }),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx37("div", { className: getClassName25("divider") }),
+    /* @__PURE__ */ jsx37(
       "select",
       {
-        className: getClassName24("zoomSelect"),
+        className: getClassName25("zoomSelect"),
         value: zoom.toString(),
         onChange: (e) => {
           onZoom(parseFloat(e.currentTarget.value));
         },
-        children: zoomOptions.map((option) => /* @__PURE__ */ jsx35(
+        children: zoomOptions.map((option) => /* @__PURE__ */ jsx37(
           "option",
           {
             value: option.value,
@@ -5909,7 +7626,7 @@ var ViewportControls = ({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css#css-module
 init_react_import();
-var styles_module_default20 = { "PuckCanvas": "_PuckCanvas_18jay_1", "PuckCanvas-controls": "_PuckCanvas-controls_18jay_16", "PuckCanvas-inner": "_PuckCanvas-inner_18jay_21", "PuckCanvas-root": "_PuckCanvas-root_18jay_30", "PuckCanvas--ready": "_PuckCanvas--ready_18jay_55", "PuckCanvas-loader": "_PuckCanvas-loader_18jay_60", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_18jay_70" };
+var styles_module_default21 = { "PuckCanvas": "_PuckCanvas_18jay_1", "PuckCanvas-controls": "_PuckCanvas-controls_18jay_16", "PuckCanvas-inner": "_PuckCanvas-inner_18jay_21", "PuckCanvas-root": "_PuckCanvas-root_18jay_30", "PuckCanvas--ready": "_PuckCanvas--ready_18jay_55", "PuckCanvas-loader": "_PuckCanvas-loader_18jay_60", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_18jay_70" };
 
 // components/Puck/components/Canvas/index.tsx
 import { useShallow as useShallow8 } from "zustand/react/shallow";
@@ -5917,27 +7634,27 @@ import { useShallow as useShallow8 } from "zustand/react/shallow";
 // lib/frame-context.tsx
 init_react_import();
 import {
-  createContext as createContext6,
-  useContext as useContext11,
-  useRef as useRef7,
+  createContext as createContext7,
+  useContext as useContext12,
+  useRef as useRef8,
   useMemo as useMemo16
 } from "react";
-import { jsx as jsx36 } from "react/jsx-runtime";
-var FrameContext = createContext6(null);
+import { jsx as jsx38 } from "react/jsx-runtime";
+var FrameContext = createContext7(null);
 var FrameProvider = ({
   children
 }) => {
-  const frameRef = useRef7(null);
+  const frameRef = useRef8(null);
   const value = useMemo16(
     () => ({
       frameRef
     }),
     []
   );
-  return /* @__PURE__ */ jsx36(FrameContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx38(FrameContext.Provider, { value, children });
 };
 var useCanvasFrame = () => {
-  const context = useContext11(FrameContext);
+  const context = useContext12(FrameContext);
   if (context === null) {
     throw new Error("useCanvasFrame must be used within a FrameProvider");
   }
@@ -5945,8 +7662,8 @@ var useCanvasFrame = () => {
 };
 
 // components/Puck/components/Canvas/index.tsx
-import { Fragment as Fragment12, jsx as jsx37, jsxs as jsxs17 } from "react/jsx-runtime";
-var getClassName25 = get_class_name_factory_default("PuckCanvas", styles_module_default20);
+import { Fragment as Fragment12, jsx as jsx39, jsxs as jsxs17 } from "react/jsx-runtime";
+var getClassName26 = get_class_name_factory_default("PuckCanvas", styles_module_default21);
 var ZOOM_ON_CHANGE = true;
 var TRANSITION_DURATION = 150;
 var Canvas = () => {
@@ -5986,17 +7703,17 @@ var Canvas = () => {
       viewports: s.state.ui.viewports
     }))
   );
-  const [showTransition, setShowTransition] = useState20(false);
-  const isResizingRef = useRef8(false);
+  const [showTransition, setShowTransition] = useState21(false);
+  const isResizingRef = useRef9(false);
   const defaultRender = useMemo17(() => {
-    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx37(Fragment12, { children });
+    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx39(Fragment12, { children });
     return PuckDefault;
   }, []);
   const CustomPreview = useMemo17(
     () => overrides.preview || defaultRender,
     [overrides]
   );
-  const getFrameDimensions = useCallback14(() => {
+  const getFrameDimensions = useCallback15(() => {
     if (frameRef.current) {
       const frame = frameRef.current;
       const box = getBox(frame);
@@ -6004,7 +7721,7 @@ var Canvas = () => {
     }
     return { width: 0, height: 0 };
   }, [frameRef]);
-  useEffect20(() => {
+  useEffect25(() => {
     resetAutoZoom();
   }, [
     frameRef,
@@ -6014,7 +7731,7 @@ var Canvas = () => {
     rightSideBarWidth,
     viewports
   ]);
-  useEffect20(() => {
+  useEffect25(() => {
     const { height: frameHeight } = getFrameDimensions();
     if (viewports.current.height === "auto") {
       setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
@@ -6022,12 +7739,12 @@ var Canvas = () => {
       }));
     }
   }, [zoomConfig.zoom, getFrameDimensions, setZoomConfig]);
-  useEffect20(() => {
+  useEffect25(() => {
     if (ZOOM_ON_CHANGE) {
       resetAutoZoom();
     }
   }, [viewports.current.width, viewports]);
-  useEffect20(() => {
+  useEffect25(() => {
     if (!frameRef.current) return;
     const resizeObserver = new ResizeObserver(() => {
       if (!isResizingRef.current) {
@@ -6039,8 +7756,8 @@ var Canvas = () => {
       resizeObserver.disconnect();
     };
   }, [frameRef.current]);
-  const [showLoader, setShowLoader] = useState20(false);
-  useEffect20(() => {
+  const [showLoader, setShowLoader] = useState21(false);
+  useEffect25(() => {
     setTimeout(() => {
       setShowLoader(true);
     }, 500);
@@ -6048,7 +7765,7 @@ var Canvas = () => {
   return /* @__PURE__ */ jsxs17(
     "div",
     {
-      className: getClassName25({
+      className: getClassName26({
         ready: status === "READY" || !iframe.enabled || !iframe.waitForStyles,
         showLoader
       }),
@@ -6063,7 +7780,7 @@ var Canvas = () => {
         }
       },
       children: [
-        viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx37("div", { className: getClassName25("controls"), children: /* @__PURE__ */ jsx37(
+        viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx39("div", { className: getClassName26("controls"), children: /* @__PURE__ */ jsx39(
           ViewportControls,
           {
             autoZoom: zoomConfig.autoZoom,
@@ -6093,11 +7810,11 @@ var Canvas = () => {
             }
           }
         ) }),
-        /* @__PURE__ */ jsxs17("div", { className: getClassName25("inner"), ref: frameRef, children: [
-          /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsxs17("div", { className: getClassName26("inner"), ref: frameRef, children: [
+          /* @__PURE__ */ jsx39(
             "div",
             {
-              className: getClassName25("root"),
+              className: getClassName26("root"),
               style: {
                 width: iframe.enabled ? viewports.current.width : "100%",
                 height: zoomConfig.rootHeight,
@@ -6111,10 +7828,10 @@ var Canvas = () => {
                 setShowTransition(false);
                 isResizingRef.current = false;
               },
-              children: /* @__PURE__ */ jsx37(CustomPreview, { children: /* @__PURE__ */ jsx37(Preview2, {}) })
+              children: /* @__PURE__ */ jsx39(CustomPreview, { children: /* @__PURE__ */ jsx39(Preview2, {}) })
             }
           ),
-          /* @__PURE__ */ jsx37("div", { className: getClassName25("loader"), children: /* @__PURE__ */ jsx37(Loader, { size: 24 }) })
+          /* @__PURE__ */ jsx39("div", { className: getClassName26("loader"), children: /* @__PURE__ */ jsx39(Loader, { size: 24 }) })
         ] })
       ]
     }
@@ -6172,19 +7889,19 @@ var useLoadedOverrides = ({
 
 // components/DefaultOverride/index.tsx
 init_react_import();
-import { Fragment as Fragment13, jsx as jsx38 } from "react/jsx-runtime";
-var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx38(Fragment13, { children });
+import { Fragment as Fragment13, jsx as jsx40 } from "react/jsx-runtime";
+var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx40(Fragment13, { children });
 
 // lib/use-inject-css.ts
 init_react_import();
-import { useEffect as useEffect21, useState as useState21 } from "react";
+import { useEffect as useEffect26, useState as useState22 } from "react";
 var styles = ``;
 var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
-  const [el, setEl] = useState21();
-  useEffect21(() => {
+  const [el, setEl] = useState22();
+  useEffect26(() => {
     setEl(document.createElement("style"));
   }, []);
-  useEffect21(() => {
+  useEffect26(() => {
     var _a;
     if (!el || typeof window === "undefined") {
       return;
@@ -6204,10 +7921,10 @@ var useInjectGlobalCss = (iframeEnabled) => {
 
 // lib/use-preview-mode-hotkeys.ts
 init_react_import();
-import { useCallback as useCallback15 } from "react";
+import { useCallback as useCallback16 } from "react";
 var usePreviewModeHotkeys = () => {
   const appStore = useAppStoreApi();
-  const toggleInteractive = useCallback15(() => {
+  const toggleInteractive = useCallback16(() => {
     const dispatch = appStore.getState().dispatch;
     dispatch({
       type: "setUi",
@@ -6225,18 +7942,18 @@ import fdeq from "fast-deep-equal";
 
 // components/Puck/components/Header/index.tsx
 init_react_import();
-import { memo as memo3, useCallback as useCallback16, useMemo as useMemo19, useState as useState22 } from "react";
+import { memo as memo4, useCallback as useCallback17, useMemo as useMemo19, useState as useState23 } from "react";
 
 // components/MenuBar/index.tsx
 init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css#css-module
 init_react_import();
-var styles_module_default21 = { "MenuBar": "_MenuBar_8pf8c_1", "MenuBar--menuOpen": "_MenuBar--menuOpen_8pf8c_14", "MenuBar-inner": "_MenuBar-inner_8pf8c_29", "MenuBar-history": "_MenuBar-history_8pf8c_45" };
+var styles_module_default22 = { "MenuBar": "_MenuBar_8pf8c_1", "MenuBar--menuOpen": "_MenuBar--menuOpen_8pf8c_14", "MenuBar-inner": "_MenuBar-inner_8pf8c_29", "MenuBar-history": "_MenuBar-history_8pf8c_45" };
 
 // components/MenuBar/index.tsx
-import { Fragment as Fragment14, jsx as jsx39, jsxs as jsxs18 } from "react/jsx-runtime";
-var getClassName26 = get_class_name_factory_default("MenuBar", styles_module_default21);
+import { Fragment as Fragment14, jsx as jsx41, jsxs as jsxs18 } from "react/jsx-runtime";
+var getClassName27 = get_class_name_factory_default("MenuBar", styles_module_default22);
 function MenuBar({
   menuOpen = false,
   renderHeaderActions,
@@ -6246,10 +7963,10 @@ function MenuBar({
   const forward = useAppStore((s) => s.history.forward);
   const hasFuture = useAppStore((s) => s.history.hasFuture());
   const hasPast = useAppStore((s) => s.history.hasPast());
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx41(
     "div",
     {
-      className: getClassName26({ menuOpen }),
+      className: getClassName27({ menuOpen }),
       onClick: (event) => {
         var _a;
         const element = event.target;
@@ -6260,30 +7977,30 @@ function MenuBar({
           setMenuOpen(false);
         }
       },
-      children: /* @__PURE__ */ jsxs18("div", { className: getClassName26("inner"), children: [
-        /* @__PURE__ */ jsxs18("div", { className: getClassName26("history"), children: [
-          /* @__PURE__ */ jsx39(
+      children: /* @__PURE__ */ jsxs18("div", { className: getClassName27("inner"), children: [
+        /* @__PURE__ */ jsxs18("div", { className: getClassName27("history"), children: [
+          /* @__PURE__ */ jsx41(
             IconButton,
             {
               type: "button",
               title: "undo",
               disabled: !hasPast,
               onClick: back,
-              children: /* @__PURE__ */ jsx39(Undo2, { size: 21 })
+              children: /* @__PURE__ */ jsx41(Undo2, { size: 21 })
             }
           ),
-          /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx41(
             IconButton,
             {
               type: "button",
               title: "redo",
               disabled: !hasFuture,
               onClick: forward,
-              children: /* @__PURE__ */ jsx39(Redo2, { size: 21 })
+              children: /* @__PURE__ */ jsx41(Redo2, { size: 21 })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx39(Fragment14, { children: renderHeaderActions && renderHeaderActions() })
+        /* @__PURE__ */ jsx41(Fragment14, { children: renderHeaderActions && renderHeaderActions() })
       ] })
     }
   );
@@ -6291,11 +8008,11 @@ function MenuBar({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Header/styles.module.css#css-module
 init_react_import();
-var styles_module_default22 = { "PuckHeader": "_PuckHeader_15xnq_1", "PuckHeader-inner": "_PuckHeader-inner_15xnq_10", "PuckHeader-toggle": "_PuckHeader-toggle_15xnq_20", "PuckHeader--rightSideBarVisible": "_PuckHeader--rightSideBarVisible_15xnq_27", "PuckHeader-rightSideBarToggle": "_PuckHeader-rightSideBarToggle_15xnq_27", "PuckHeader--leftSideBarVisible": "_PuckHeader--leftSideBarVisible_15xnq_28", "PuckHeader-leftSideBarToggle": "_PuckHeader-leftSideBarToggle_15xnq_28", "PuckHeader-title": "_PuckHeader-title_15xnq_32", "PuckHeader-path": "_PuckHeader-path_15xnq_36", "PuckHeader-tools": "_PuckHeader-tools_15xnq_43", "PuckHeader-menuButton": "_PuckHeader-menuButton_15xnq_49", "PuckHeader--menuOpen": "_PuckHeader--menuOpen_15xnq_54" };
+var styles_module_default23 = { "PuckHeader": "_PuckHeader_15xnq_1", "PuckHeader-inner": "_PuckHeader-inner_15xnq_10", "PuckHeader-toggle": "_PuckHeader-toggle_15xnq_20", "PuckHeader--rightSideBarVisible": "_PuckHeader--rightSideBarVisible_15xnq_27", "PuckHeader-rightSideBarToggle": "_PuckHeader-rightSideBarToggle_15xnq_27", "PuckHeader--leftSideBarVisible": "_PuckHeader--leftSideBarVisible_15xnq_28", "PuckHeader-leftSideBarToggle": "_PuckHeader-leftSideBarToggle_15xnq_28", "PuckHeader-title": "_PuckHeader-title_15xnq_32", "PuckHeader-path": "_PuckHeader-path_15xnq_36", "PuckHeader-tools": "_PuckHeader-tools_15xnq_43", "PuckHeader-menuButton": "_PuckHeader-menuButton_15xnq_49", "PuckHeader--menuOpen": "_PuckHeader--menuOpen_15xnq_54" };
 
 // components/Puck/components/Header/index.tsx
-import { Fragment as Fragment15, jsx as jsx40, jsxs as jsxs19 } from "react/jsx-runtime";
-var getClassName27 = get_class_name_factory_default("PuckHeader", styles_module_default22);
+import { Fragment as Fragment15, jsx as jsx42, jsxs as jsxs19 } from "react/jsx-runtime";
+var getClassName28 = get_class_name_factory_default("PuckHeader", styles_module_default23);
 var HeaderInner = () => {
   const {
     onPublish,
@@ -6316,7 +8033,7 @@ var HeaderInner = () => {
         var _b = _a, { actions } = _b, props = __objRest(_b, ["actions"]);
         const Comp = renderHeader;
         const appState = useAppStore((s) => s.state);
-        return /* @__PURE__ */ jsx40(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
+        return /* @__PURE__ */ jsx42(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
       };
       return RenderHeader;
     }
@@ -6330,19 +8047,19 @@ var HeaderInner = () => {
       const RenderHeader = (props) => {
         const Comp = renderHeaderActions;
         const appState = useAppStore((s) => s.state);
-        return /* @__PURE__ */ jsx40(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
+        return /* @__PURE__ */ jsx42(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
       };
       return RenderHeader;
     }
     return DefaultOverride;
-  }, [renderHeader]);
+  }, [renderHeaderActions]);
   const CustomHeader = useAppStore(
     (s) => s.overrides.header || defaultHeaderRender
   );
   const CustomHeaderActions = useAppStore(
     (s) => s.overrides.headerActions || defaultHeaderActionsRender
   );
-  const [menuOpen, setMenuOpen] = useState22(false);
+  const [menuOpen, setMenuOpen] = useState23(false);
   const rootTitle = useAppStore((s) => {
     var _a, _b;
     const rootData = (_a = s.state.indexes.nodes["root"]) == null ? void 0 : _a.data;
@@ -6352,7 +8069,7 @@ var HeaderInner = () => {
   const rightSideBarVisible = useAppStore(
     (s) => s.state.ui.rightSideBarVisible
   );
-  const toggleSidebars = useCallback16(
+  const toggleSidebars = useCallback17(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -6366,27 +8083,27 @@ var HeaderInner = () => {
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx42(
     CustomHeader,
     {
-      actions: /* @__PURE__ */ jsx40(Fragment15, { children: /* @__PURE__ */ jsx40(CustomHeaderActions, { children: /* @__PURE__ */ jsx40(
+      actions: /* @__PURE__ */ jsx42(Fragment15, { children: /* @__PURE__ */ jsx42(CustomHeaderActions, { children: /* @__PURE__ */ jsx42(
         Button,
         {
           onClick: () => {
             const data = appStore.getState().state.data;
             onPublish && onPublish(data);
           },
-          icon: /* @__PURE__ */ jsx40(Globe, { size: "14px" }),
+          icon: /* @__PURE__ */ jsx42(Globe, { size: "14px" }),
           children: "Publish"
         }
       ) }) }),
-      children: /* @__PURE__ */ jsx40(
+      children: /* @__PURE__ */ jsx42(
         "header",
         {
-          className: getClassName27({ leftSideBarVisible, rightSideBarVisible }),
-          children: /* @__PURE__ */ jsxs19("div", { className: getClassName27("inner"), children: [
-            /* @__PURE__ */ jsxs19("div", { className: getClassName27("toggle"), children: [
-              /* @__PURE__ */ jsx40("div", { className: getClassName27("leftSideBarToggle"), children: /* @__PURE__ */ jsx40(
+          className: getClassName28({ leftSideBarVisible, rightSideBarVisible }),
+          children: /* @__PURE__ */ jsxs19("div", { className: getClassName28("inner"), children: [
+            /* @__PURE__ */ jsxs19("div", { className: getClassName28("toggle"), children: [
+              /* @__PURE__ */ jsx42("div", { className: getClassName28("leftSideBarToggle"), children: /* @__PURE__ */ jsx42(
                 IconButton,
                 {
                   type: "button",
@@ -6394,10 +8111,10 @@ var HeaderInner = () => {
                     toggleSidebars("left");
                   },
                   title: "Toggle left sidebar",
-                  children: /* @__PURE__ */ jsx40(PanelLeft, { focusable: "false" })
+                  children: /* @__PURE__ */ jsx42(PanelLeft, { focusable: "false" })
                 }
               ) }),
-              /* @__PURE__ */ jsx40("div", { className: getClassName27("rightSideBarToggle"), children: /* @__PURE__ */ jsx40(
+              /* @__PURE__ */ jsx42("div", { className: getClassName28("rightSideBarToggle"), children: /* @__PURE__ */ jsx42(
                 IconButton,
                 {
                   type: "button",
@@ -6405,19 +8122,19 @@ var HeaderInner = () => {
                     toggleSidebars("right");
                   },
                   title: "Toggle right sidebar",
-                  children: /* @__PURE__ */ jsx40(PanelRight, { focusable: "false" })
+                  children: /* @__PURE__ */ jsx42(PanelRight, { focusable: "false" })
                 }
               ) })
             ] }),
-            /* @__PURE__ */ jsx40("div", { className: getClassName27("title"), children: /* @__PURE__ */ jsxs19(Heading, { rank: "2", size: "xs", children: [
+            /* @__PURE__ */ jsx42("div", { className: getClassName28("title"), children: /* @__PURE__ */ jsxs19(Heading, { rank: "2", size: "xs", children: [
               headerTitle || rootTitle || "Page",
               headerPath && /* @__PURE__ */ jsxs19(Fragment15, { children: [
                 " ",
-                /* @__PURE__ */ jsx40("code", { className: getClassName27("path"), children: headerPath })
+                /* @__PURE__ */ jsx42("code", { className: getClassName28("path"), children: headerPath })
               ] })
             ] }) }),
-            /* @__PURE__ */ jsxs19("div", { className: getClassName27("tools"), children: [
-              /* @__PURE__ */ jsx40("div", { className: getClassName27("menuButton"), children: /* @__PURE__ */ jsx40(
+            /* @__PURE__ */ jsxs19("div", { className: getClassName28("tools"), children: [
+              /* @__PURE__ */ jsx42("div", { className: getClassName28("menuButton"), children: /* @__PURE__ */ jsx42(
                 IconButton,
                 {
                   type: "button",
@@ -6425,23 +8142,23 @@ var HeaderInner = () => {
                     return setMenuOpen(!menuOpen);
                   },
                   title: "Toggle menu bar",
-                  children: menuOpen ? /* @__PURE__ */ jsx40(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx40(ChevronDown, { focusable: "false" })
+                  children: menuOpen ? /* @__PURE__ */ jsx42(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx42(ChevronDown, { focusable: "false" })
                 }
               ) }),
-              /* @__PURE__ */ jsx40(
+              /* @__PURE__ */ jsx42(
                 MenuBar,
                 {
                   dispatch,
                   onPublish,
                   menuOpen,
-                  renderHeaderActions: () => /* @__PURE__ */ jsx40(CustomHeaderActions, { children: /* @__PURE__ */ jsx40(
+                  renderHeaderActions: () => /* @__PURE__ */ jsx42(CustomHeaderActions, { children: /* @__PURE__ */ jsx42(
                     Button,
                     {
                       onClick: () => {
                         const data = appStore.getState().state.data;
                         onPublish && onPublish(data);
                       },
-                      icon: /* @__PURE__ */ jsx40(Globe, { size: "14px" }),
+                      icon: /* @__PURE__ */ jsx42(Globe, { size: "14px" }),
                       children: "Publish"
                     }
                   ) }),
@@ -6455,22 +8172,22 @@ var HeaderInner = () => {
     }
   );
 };
-var Header = memo3(HeaderInner);
+var Header = memo4(HeaderInner);
 
 // components/Puck/components/Sidebar/index.tsx
 init_react_import();
 
 // components/Puck/components/ResizeHandle/index.tsx
 init_react_import();
-import { useCallback as useCallback17, useRef as useRef9 } from "react";
+import { useCallback as useCallback18, useRef as useRef10 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/ResizeHandle/styles.module.css#css-module
 init_react_import();
-var styles_module_default23 = { "ResizeHandle": "_ResizeHandle_144bf_2", "ResizeHandle--left": "_ResizeHandle--left_144bf_16", "ResizeHandle--right": "_ResizeHandle--right_144bf_20" };
+var styles_module_default24 = { "ResizeHandle": "_ResizeHandle_144bf_2", "ResizeHandle--left": "_ResizeHandle--left_144bf_16", "ResizeHandle--right": "_ResizeHandle--right_144bf_20" };
 
 // components/Puck/components/ResizeHandle/index.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
-var getClassName28 = get_class_name_factory_default("ResizeHandle", styles_module_default23);
+import { jsx as jsx43 } from "react/jsx-runtime";
+var getClassName29 = get_class_name_factory_default("ResizeHandle", styles_module_default24);
 var ResizeHandle = ({
   position,
   sidebarRef,
@@ -6479,11 +8196,11 @@ var ResizeHandle = ({
 }) => {
   const { frameRef } = useCanvasFrame();
   const resetAutoZoom = useResetAutoZoom(frameRef);
-  const handleRef = useRef9(null);
-  const isDragging = useRef9(false);
-  const startX = useRef9(0);
-  const startWidth = useRef9(0);
-  const handleMouseMove = useCallback17(
+  const handleRef = useRef10(null);
+  const isDragging = useRef10(false);
+  const startX = useRef10(0);
+  const startWidth = useRef10(0);
+  const handleMouseMove = useCallback18(
     (e) => {
       if (!isDragging.current) return;
       const delta = e.clientX - startX.current;
@@ -6494,7 +8211,7 @@ var ResizeHandle = ({
     },
     [onResize, position]
   );
-  const handleMouseUp = useCallback17(() => {
+  const handleMouseUp = useCallback18(() => {
     var _a;
     if (!isDragging.current) return;
     isDragging.current = false;
@@ -6510,7 +8227,7 @@ var ResizeHandle = ({
     onResizeEnd(finalWidth);
     resetAutoZoom();
   }, [onResizeEnd]);
-  const handleMouseDown = useCallback17(
+  const handleMouseDown = useCallback18(
     (e) => {
       var _a;
       isDragging.current = true;
@@ -6528,11 +8245,11 @@ var ResizeHandle = ({
     },
     [position, handleMouseMove, handleMouseUp]
   );
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx43(
     "div",
     {
       ref: handleRef,
-      className: getClassName28({ [position]: true }),
+      className: getClassName29({ [position]: true }),
       onMouseDown: handleMouseDown
     }
   );
@@ -6540,24 +8257,23 @@ var ResizeHandle = ({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Sidebar/styles.module.css#css-module
 init_react_import();
-var styles_module_default24 = { "Sidebar": "_Sidebar_1xksb_1", "Sidebar--left": "_Sidebar--left_1xksb_8", "Sidebar--right": "_Sidebar--right_1xksb_14", "Sidebar-resizeHandle": "_Sidebar-resizeHandle_1xksb_20" };
+var styles_module_default25 = { "Sidebar": "_Sidebar_1xksb_1", "Sidebar--left": "_Sidebar--left_1xksb_8", "Sidebar--right": "_Sidebar--right_1xksb_14", "Sidebar-resizeHandle": "_Sidebar-resizeHandle_1xksb_20" };
 
 // components/Puck/components/Sidebar/index.tsx
-import { Fragment as Fragment16, jsx as jsx42, jsxs as jsxs20 } from "react/jsx-runtime";
-var getClassName29 = get_class_name_factory_default("Sidebar", styles_module_default24);
+import { Fragment as Fragment16, jsx as jsx44, jsxs as jsxs20 } from "react/jsx-runtime";
+var getClassName30 = get_class_name_factory_default("Sidebar", styles_module_default25);
 var Sidebar = ({
   position,
   sidebarRef,
   isVisible,
-  width,
   onResize,
   onResizeEnd,
   children
 }) => {
   if (!isVisible) return null;
   return /* @__PURE__ */ jsxs20(Fragment16, { children: [
-    /* @__PURE__ */ jsx42("div", { ref: sidebarRef, className: getClassName29({ [position]: true }), children }),
-    /* @__PURE__ */ jsx42("div", { className: `${getClassName29("resizeHandle")}`, children: /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx44("div", { ref: sidebarRef, className: getClassName30({ [position]: true }), children }),
+    /* @__PURE__ */ jsx44("div", { className: `${getClassName30("resizeHandle")}`, children: /* @__PURE__ */ jsx44(
       ResizeHandle,
       {
         position,
@@ -6571,14 +8287,14 @@ var Sidebar = ({
 
 // lib/use-sidebar-resize.ts
 init_react_import();
-import { useCallback as useCallback18, useEffect as useEffect23, useRef as useRef10, useState as useState23 } from "react";
+import { useCallback as useCallback19, useEffect as useEffect28, useRef as useRef11, useState as useState24 } from "react";
 function useSidebarResize(position, dispatch) {
-  const [width, setWidth] = useState23(null);
-  const sidebarRef = useRef10(null);
+  const [width, setWidth] = useState24(null);
+  const sidebarRef = useRef11(null);
   const storeWidth = useAppStore(
     (s) => position === "left" ? s.state.ui.leftSideBarWidth : s.state.ui.rightSideBarWidth
   );
-  useEffect23(() => {
+  useEffect28(() => {
     if (typeof window !== "undefined" && !storeWidth) {
       try {
         const savedWidths = localStorage.getItem("puck-sidebar-widths");
@@ -6603,12 +8319,12 @@ function useSidebarResize(position, dispatch) {
       }
     }
   }, [dispatch, position, storeWidth]);
-  useEffect23(() => {
+  useEffect28(() => {
     if (storeWidth !== void 0) {
       setWidth(storeWidth);
     }
   }, [storeWidth]);
-  const handleResizeEnd = useCallback18(
+  const handleResizeEnd = useCallback19(
     (width2) => {
       dispatch({
         type: "setUi",
@@ -6651,9 +8367,9 @@ function useSidebarResize(position, dispatch) {
 }
 
 // components/Puck/index.tsx
-import { jsx as jsx43, jsxs as jsxs21 } from "react/jsx-runtime";
-var getClassName30 = get_class_name_factory_default("Puck", styles_module_default14);
-var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_module_default14);
+import { jsx as jsx45, jsxs as jsxs21 } from "react/jsx-runtime";
+var getClassName31 = get_class_name_factory_default("Puck", styles_module_default15);
+var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_module_default15);
 var FieldSideBar = () => {
   const title = useAppStore(
     (s) => {
@@ -6661,13 +8377,13 @@ var FieldSideBar = () => {
       return s.selectedItem ? (_b = (_a = s.config.components[s.selectedItem.type]) == null ? void 0 : _a["label"]) != null ? _b : s.selectedItem.type.toString() : "Page";
     }
   );
-  return /* @__PURE__ */ jsx43(SidebarSection, { noPadding: true, noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx43(Fields, {}) });
+  return /* @__PURE__ */ jsx45(SidebarSection, { noPadding: true, noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx45(Fields, {}) });
 };
-var propsContext = createContext7({});
+var propsContext = createContext8({});
 function PropsProvider(props) {
-  return /* @__PURE__ */ jsx43(propsContext.Provider, { value: props, children: props.children });
+  return /* @__PURE__ */ jsx45(propsContext.Provider, { value: props, children: props.children });
 }
-var usePropsContext = () => useContext12(propsContext);
+var usePropsContext = () => useContext13(propsContext);
 function PuckProvider({ children }) {
   const {
     config,
@@ -6691,7 +8407,7 @@ function PuckProvider({ children }) {
     }, _iframe),
     [_iframe]
   );
-  const [generatedAppState] = useState24(() => {
+  const [generatedAppState] = useState25(() => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
@@ -6751,7 +8467,7 @@ function PuckProvider({ children }) {
     return walkAppState(newAppState, config);
   });
   const { appendData = true } = _initialHistory || {};
-  const [blendedHistories] = useState24(
+  const [blendedHistories] = useState25(
     [
       ...(_initialHistory == null ? void 0 : _initialHistory.histories) || [],
       ...appendData ? [{ state: generatedAppState }] : []
@@ -6779,7 +8495,7 @@ function PuckProvider({ children }) {
     );
     return __spreadValues(__spreadValues({}, pluginFieldTransforms), fieldTransforms);
   }, [fieldTransforms, plugins]);
-  const generateAppStore = useCallback19(
+  const generateAppStore = useCallback20(
     (state) => {
       return {
         state,
@@ -6805,15 +8521,15 @@ function PuckProvider({ children }) {
       loadedFieldTransforms
     ]
   );
-  const [appStore] = useState24(
+  const [appStore] = useState25(
     () => createAppStore(generateAppStore(initialAppState))
   );
-  useEffect24(() => {
+  useEffect29(() => {
     if (process.env.NODE_ENV !== "production") {
       window.__PUCK_INTERNAL_DO_NOT_USE = { appStore };
     }
   }, [appStore]);
-  useEffect24(() => {
+  useEffect29(() => {
     const state = appStore.getState().state;
     appStore.setState(__spreadValues({}, generateAppStore(state)));
   }, [config, plugins, loadedOverrides, viewports, iframe, onAction, metadata]);
@@ -6822,8 +8538,8 @@ function PuckProvider({ children }) {
     index: initialHistoryIndex,
     initialAppState
   });
-  const previousData = useRef11(null);
-  useEffect24(() => {
+  const previousData = useRef12(null);
+  useEffect29(() => {
     appStore.subscribe(
       (s) => s.state.data,
       (data) => {
@@ -6837,11 +8553,11 @@ function PuckProvider({ children }) {
   }, []);
   useRegisterPermissionsSlice(appStore, permissions);
   const uPuckStore = useRegisterUsePuckStore(appStore);
-  useEffect24(() => {
+  useEffect29(() => {
     const { resolveAndCommitData } = appStore.getState();
     resolveAndCommitData();
   }, []);
-  return /* @__PURE__ */ jsx43(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx43(UsePuckStoreContext.Provider, { value: uPuckStore, children }) });
+  return /* @__PURE__ */ jsx45(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx45(UsePuckStoreContext.Provider, { value: uPuckStore, children }) });
 }
 function PuckLayout({ children }) {
   const {
@@ -6874,7 +8590,7 @@ function PuckLayout({ children }) {
     sidebarRef: rightSidebarRef,
     handleResizeEnd: handleRightSidebarResizeEnd
   } = useSidebarResize("right", dispatch);
-  useEffect24(() => {
+  useEffect29(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -6902,13 +8618,13 @@ function PuckLayout({ children }) {
     () => overrides.puck || DefaultOverride,
     [overrides]
   );
-  const [mounted, setMounted] = useState24(false);
-  useEffect24(() => {
+  const [mounted, setMounted] = useState25(false);
+  useEffect29(() => {
     setMounted(true);
   }, []);
   const ready = useAppStore((s) => s.status === "READY");
   useMonitorHotkeys();
-  useEffect24(() => {
+  useEffect29(() => {
     if (ready && iframe.enabled) {
       const frameDoc = getFrame();
       if (frameDoc) {
@@ -6917,8 +8633,15 @@ function PuckLayout({ children }) {
     }
   }, [ready, iframe.enabled]);
   usePreviewModeHotkeys();
-  return /* @__PURE__ */ jsxs21("div", { className: `Puck ${getClassName30()}`, children: [
-    /* @__PURE__ */ jsx43(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx43(CustomPuck, { children: children || /* @__PURE__ */ jsx43(FrameProvider, { children: /* @__PURE__ */ jsx43(
+  const layoutOptions = {};
+  if (leftWidth) {
+    layoutOptions["--puck-user-left-side-bar-width"] = `${leftWidth}px`;
+  }
+  if (rightWidth) {
+    layoutOptions["--puck-user-right-side-bar-width"] = `${rightWidth}px`;
+  }
+  return /* @__PURE__ */ jsxs21("div", { className: `Puck ${getClassName31()}`, children: [
+    /* @__PURE__ */ jsx45(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx45(CustomPuck, { children: children || /* @__PURE__ */ jsx45(FrameProvider, { children: /* @__PURE__ */ jsx45(
       "div",
       {
         className: getLayoutClassName({
@@ -6930,41 +8653,33 @@ function PuckLayout({ children }) {
           "div",
           {
             className: getLayoutClassName("inner"),
-            style: {
-              gridTemplateColumns: `
-                    ${leftSideBarVisible ? leftWidth ? `${leftWidth}px` : "var(--puck-side-bar-width)" : "0"} 
-                    var(--puck-frame-width) 
-                    ${rightSideBarVisible ? rightWidth ? `${rightWidth}px` : "var(--puck-side-bar-width)" : "0"}
-                  `
-            },
+            style: layoutOptions,
             children: [
-              /* @__PURE__ */ jsx43(Header, {}),
+              /* @__PURE__ */ jsx45(Header, {}),
               /* @__PURE__ */ jsxs21(
                 Sidebar,
                 {
                   position: "left",
                   sidebarRef: leftSidebarRef,
                   isVisible: leftSideBarVisible,
-                  width: leftWidth,
                   onResize: setLeftWidth,
                   onResizeEnd: handleLeftSidebarResizeEnd,
                   children: [
-                    /* @__PURE__ */ jsx43(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx43(Components, {}) }),
-                    /* @__PURE__ */ jsx43(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx43(Outline, {}) })
+                    /* @__PURE__ */ jsx45(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx45(Components, {}) }),
+                    /* @__PURE__ */ jsx45(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx45(Outline, {}) })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx43(Canvas, {}),
-              /* @__PURE__ */ jsx43(
+              /* @__PURE__ */ jsx45(Canvas, {}),
+              /* @__PURE__ */ jsx45(
                 Sidebar,
                 {
                   position: "right",
                   sidebarRef: rightSidebarRef,
                   isVisible: rightSideBarVisible,
-                  width: rightWidth,
                   onResize: setRightWidth,
                   onResizeEnd: handleRightSidebarResizeEnd,
-                  children: /* @__PURE__ */ jsx43(FieldSideBar, {})
+                  children: /* @__PURE__ */ jsx45(FieldSideBar, {})
                 }
               )
             ]
@@ -6972,11 +8687,11 @@ function PuckLayout({ children }) {
         )
       }
     ) }) }) }),
-    /* @__PURE__ */ jsx43("div", { id: "puck-portal-root", className: getClassName30("portal") })
+    /* @__PURE__ */ jsx45("div", { id: "puck-portal-root", className: getClassName31("portal") })
   ] });
 }
 function Puck(props) {
-  return /* @__PURE__ */ jsx43(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx43(PuckProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx43(PuckLayout, __spreadValues({}, props)) })) }));
+  return /* @__PURE__ */ jsx45(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx45(PuckProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx45(PuckLayout, __spreadValues({}, props)) })) }));
 }
 Puck.Components = Components;
 Puck.Fields = Fields;
@@ -7031,6 +8746,8 @@ export {
   AutoField,
   renderContext,
   Render,
+  registerOverlayPortal,
+  setDeep,
   DropZone,
   Drawer,
   createUsePuck,
@@ -7040,6 +8757,13 @@ export {
 };
 /*! Bundled license information:
 
+classnames/index.js:
+  (*!
+  	Copyright (c) 2018 Jed Watson.
+  	Licensed under the MIT License (MIT), see
+  	http://jedwatson.github.io/classnames
+  *)
+
 lucide-react/dist/esm/shared/src/utils.js:
   (**
    * @license lucide-react v0.468.0 - ISC