@measured/puck 0.20.0-canary.f2447833 → 0.20.0-canary.f73c8fa0

package/dist/{chunk-F7MIAKDQ.mjs → chunk-UBWXLOVR.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-BNXRZWNI.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;
+      }
+    })();
+  }
+});
 
 // bundle/index.ts
 init_react_import();
@@ -100,6 +145,33 @@ init_react_import();
 // 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" };
@@ -152,9 +224,9 @@ var styles_module_default2 = { "InputWrapper": "_InputWrapper_bsxfo_1", "Input-l
 
 // components/AutoField/index.tsx
 import {
-  useCallback as useCallback4,
-  useContext as useContext2,
-  useEffect as useEffect6,
+  useCallback as useCallback5,
+  useContext as useContext3,
+  useEffect as useEffect10,
   useMemo as useMemo3,
   useState as useState8
 } from "react";
@@ -525,12 +597,1430 @@ init_react_import();
 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" };
+// 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 defaultFields2 = componentConfig.fields || {};
+      const resolver = componentConfig.resolveFields;
+      let lastFields = fields;
+      if (reset) {
+        appStore.setState((s) => ({
+          fields: __spreadProps(__spreadValues({}, s.fields), { fields: defaultFields2, id })
+        }));
+        lastFields = defaultFields2;
+      }
+      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: defaultFields2,
+          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: defaultFields2, 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);
+}
+
+// lib/get-zoom-config.ts
+init_react_import();
+
+// ../../node_modules/css-box-model/dist/css-box-model.esm.js
+init_react_import();
+
+// ../../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 };
+};
 
-// components/Loader/index.tsx
-init_react_import();
+// 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();
@@ -617,8 +2107,8 @@ var IconButton = ({
 // components/AutoField/fields/ArrayField/index.tsx
 import {
   memo as memo2,
-  useCallback,
-  useEffect,
+  useCallback as useCallback2,
+  useEffect as useEffect5,
   useRef,
   useState as useState3
 } from "react";
@@ -1071,11 +2561,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 jsx6 } 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 || {}
   });
@@ -1185,6 +2675,7 @@ var SubFieldInternal = ({
 var SubField = memo(SubFieldInternal);
 
 // components/AutoField/fields/ArrayField/index.tsx
+import fdeq from "fast-deep-equal";
 import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var getClassName5 = get_class_name_factory_default("ArrayField", styles_module_default3);
 var getClassNameItem = get_class_name_factory_default("ArrayFieldItem", styles_module_default3);
@@ -1283,14 +2774,14 @@ var ArrayField = ({
   const setUi = useAppStore((s) => s.setUi);
   const appStoreApi = useAppStoreApi();
   const { localName = name } = useNestedFieldContext();
-  const getValue = useCallback(() => {
+  const getValue = useCallback2(() => {
     var _a;
     if (typeof value !== "undefined") return value;
     const { selectedItem } = appStoreApi.getState();
     const props = (_a = name ? selectedItem == null ? void 0 : selectedItem.props : {}) != null ? _a : {};
     return name ? getDeep(props, name) : [];
   }, [appStoreApi, name, value]);
-  const getArrayState = useCallback(() => {
+  const getArrayState = useCallback2(() => {
     const { state } = appStoreApi.getState();
     const value2 = getValue();
     return state.ui.arrayState[id] || {
@@ -1311,7 +2802,7 @@ var ArrayField = ({
   });
   const [mirror, setLocalState] = useState3(getArrayState());
   const appStore = useAppStoreApi();
-  const mapArrayStateToUi = useCallback(
+  const mapArrayStateToUi = useCallback2(
     (partialArrayState) => {
       const state = appStore.getState().state;
       return {
@@ -1322,13 +2813,13 @@ var ArrayField = ({
     },
     [appStore]
   );
-  const getHighestIndex = useCallback(() => {
+  const getHighestIndex = useCallback2(() => {
     return getArrayState().items.reduce(
       (acc, item) => item._originalIndex > acc ? item._originalIndex : acc,
       -1
     );
   }, []);
-  const regenerateArrayState = useCallback((value2) => {
+  const regenerateArrayState = useCallback2((value2) => {
     let highestIndex = getHighestIndex();
     const arrayState = getArrayState();
     const newItems = Array.from(value2 || []).map((item, idx) => {
@@ -1349,10 +2840,10 @@ var ArrayField = ({
   const [draggedItem, setDraggedItem] = useState3("");
   const isDraggingAny = !!draggedItem;
   const valueRef = useRef([]);
-  useEffect(() => {
+  useEffect5(() => {
     valueRef.current = getValue();
   }, []);
-  const uniqifyItem = useCallback(
+  const uniqifyItem = useCallback2(
     (val) => {
       if (field.type !== "array" || !field.arrayFields) return;
       const config = appStore.getState().config;
@@ -1370,7 +2861,7 @@ var ArrayField = ({
     },
     [appStore, field]
   );
-  const syncCurrentIndexes = useCallback(() => {
+  const syncCurrentIndexes = useCallback2(() => {
     const arrayState = getArrayState();
     const newArrayStateItems = arrayState.items.map((item, index) => __spreadProps(__spreadValues({}, item), {
       _currentIndex: index
@@ -1386,7 +2877,7 @@ var ArrayField = ({
     };
     setUi(newUi, false);
   }, []);
-  const updateValue = useCallback(
+  const updateValue = useCallback2(
     (newValue) => {
       const newArrayState = regenerateArrayState(newValue);
       setUi(mapArrayStateToUi(newArrayState), false);
@@ -1395,6 +2886,23 @@ var ArrayField = ({
     },
     [regenerateArrayState, setUi, mapArrayStateToUi, onChange, setLocalState]
   );
+  useEffect5(() => {
+    return appStoreApi.subscribe(
+      ({ selectedItem }) => {
+        var _a;
+        const props = (_a = name ? selectedItem == null ? void 0 : selectedItem.props : {}) != null ? _a : {};
+        return name ? getDeep(props, name) : [];
+      },
+      (val) => {
+        if (!fdeq(val, valueRef.current)) {
+          valueRef.current = val;
+          const newArrayState = regenerateArrayState(valueRef.current);
+          setUi(mapArrayStateToUi(newArrayState), false);
+          setLocalState(newArrayState);
+        }
+      }
+    );
+  }, [appStoreApi]);
   if (field.type !== "array" || !field.arrayFields) {
     return null;
   }
@@ -1410,6 +2918,7 @@ var ArrayField = ({
         SortableProvider,
         {
           onDragStart: (id2) => {
+            valueRef.current = getValue();
             setDraggedItem(id2);
             syncCurrentIndexes();
           },
@@ -1423,8 +2932,7 @@ var ArrayField = ({
             if (arrayState.items[move.source]._arrayId !== draggedItem) {
               return;
             }
-            const value2 = getValue();
-            const newValue = reorder(value2, move.source, move.target);
+            const newValue = reorder(valueRef.current, move.source, move.target);
             const newArrayStateItems = reorder(
               arrayState.items,
               move.source,
@@ -1628,15 +3136,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";
 
@@ -1646,7 +3154,7 @@ var styles_module_default6 = { "ExternalInput-actions": "_ExternalInput-actions_
 
 // components/Modal/index.tsx
 init_react_import();
-import { useEffect as useEffect2, useState as useState4 } from "react";
+import { useEffect as useEffect6, useState as useState4 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Modal/styles.module.css#css-module
 init_react_import();
@@ -1662,7 +3170,7 @@ var Modal = ({
   isOpen
 }) => {
   const [rootEl, setRootEl] = useState4(null);
-  useEffect2(() => {
+  useEffect6(() => {
     setRootEl(document.getElementById("puck-portal-root"));
   }, []);
   if (!rootEl) {
@@ -1709,7 +3217,7 @@ init_react_import();
 
 // components/Button/Button.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/Button/Button.module.css#css-module
 init_react_import();
@@ -1760,7 +3268,7 @@ var Button = (_a) => {
     "loading"
   ]);
   const [loading, setLoading] = useState5(loadingProp);
-  useEffect3(() => setLoading(loadingProp), [loadingProp]);
+  useEffect7(() => setLoading(loadingProp), [loadingProp]);
   const ElementType = href ? "a" : type ? "button" : "span";
   const dataAttrs = filterDataAttrs(props);
   const el = /* @__PURE__ */ jsxs5(
@@ -1836,7 +3344,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)}`;
@@ -1849,7 +3357,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",
@@ -1857,7 +3365,7 @@ var ExternalInput = ({
     ] }),
     [field.renderFooter]
   );
-  useEffect4(() => {
+  useEffect8(() => {
     search(searchQuery, filters);
   }, []);
   return /* @__PURE__ */ jsxs6(
@@ -2033,7 +3541,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."
@@ -2227,7 +3735,7 @@ init_react_import();
 var styles_module_default9 = { "ObjectField": "_ObjectField_1ua3y_5", "ObjectField-fieldset": "_ObjectField-fieldset_1ua3y_13" };
 
 // components/AutoField/fields/ObjectField/index.tsx
-import { useCallback as useCallback3 } from "react";
+import { useCallback as useCallback4 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 var getClassName14 = get_class_name_factory_default("ObjectField", styles_module_default9);
 var ObjectField = ({
@@ -2246,7 +3754,7 @@ var ObjectField = ({
   const canEdit = useAppStore(
     (s) => s.permissions.getPermissions({ item: s.selectedItem }).edit
   );
-  const getValue = useCallback3(() => {
+  const getValue = useCallback4(() => {
     var _a;
     if (typeof value !== "undefined") return value;
     const { selectedItem } = appStoreApi.getState();
@@ -2373,7 +3881,7 @@ function AutoFieldInternal(_a) {
     var _a3;
     return (_a3 = s.selectedItem) == null ? void 0 : _a3.readOnly;
   }));
-  const nestedFieldContext = useContext2(NestedFieldContext);
+  const nestedFieldContext = useContext3(NestedFieldContext);
   const { id, Label: Label2 = FieldLabelInternal } = props;
   const field = props.field;
   const label = field.label;
@@ -2394,7 +3902,7 @@ function AutoFieldInternal(_a) {
         number: ((_h = overrides.fieldTypes) == null ? void 0 : _h.number) || defaultFields.number
       });
     },
-    [overrides, defaultFields]
+    [overrides]
   );
   const mergedProps = useMemo3(
     () => __spreadProps(__spreadValues({}, props), {
@@ -2406,7 +3914,7 @@ function AutoFieldInternal(_a) {
     }),
     [props, field, label, labelIcon, Label2, resolvedId]
   );
-  const onFocus = useCallback4(
+  const onFocus = useCallback5(
     (e) => {
       if (mergedProps.name && (e.target.nodeName === "INPUT" || e.target.nodeName === "TEXTAREA")) {
         e.stopPropagation();
@@ -2420,7 +3928,7 @@ function AutoFieldInternal(_a) {
     },
     [mergedProps.name]
   );
-  const onBlur = useCallback4((e) => {
+  const onBlur = useCallback5((e) => {
     if ("name" in e.target) {
       dispatch({
         type: "setUi",
@@ -2430,6 +3938,12 @@ function AutoFieldInternal(_a) {
       });
     }
   }, []);
+  let Children = useMemo3(() => {
+    if (field.type !== "custom" && field.type !== "slot") {
+      return defaultFields[field.type];
+    }
+    return (_props) => null;
+  }, [field.type]);
   let FieldComponent = useMemo3(() => {
     if (field.type === "custom") {
       if (!field.render) {
@@ -2439,14 +3953,8 @@ function AutoFieldInternal(_a) {
     } else {
       return render[field.type];
     }
-  }, [field, defaultFields, render]);
+  }, [field.type, render]);
   const { visible = true } = props.field;
-  let Children = useMemo3(() => {
-    if (field.type !== "custom" && field.type !== "slot") {
-      return defaultFields[field.type];
-    }
-    return () => null;
-  }, [field]);
   if (!visible) {
     return null;
   }
@@ -2494,7 +4002,7 @@ function AutoFieldPrivate(props) {
     }
   });
   const [localValue, setLocalValue] = useState8(value);
-  const onChangeLocal = useCallback4(
+  const onChangeLocal = useCallback5(
     (val, ui) => {
       const excludedFields = ["array", "object"];
       if (!excludedFields.includes(props.field.type)) {
@@ -2504,12 +4012,12 @@ function AutoFieldPrivate(props) {
     },
     [props.field.type]
   );
-  useEffect6(() => {
+  useEffect10(() => {
     if (!isFocused) {
       setLocalValue(value);
     }
   }, [value]);
-  useEffect6(() => {
+  useEffect10(() => {
     if (!isFocused) {
       if (value !== localValue) {
         setLocalValue(value);
@@ -2556,19 +4064,19 @@ init_react_import();
 var styles_module_default10 = { "Drawer": "_Drawer_pl7z0_1", "Drawer-draggable": "_Drawer-draggable_pl7z0_8", "Drawer-draggableBg": "_Drawer-draggableBg_pl7z0_12", "DrawerItem-draggable": "_DrawerItem-draggable_pl7z0_22", "DrawerItem--disabled": "_DrawerItem--disabled_pl7z0_35", "DrawerItem": "_DrawerItem_pl7z0_22", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_pl7z0_45", "DrawerItem-name": "_DrawerItem-name_pl7z0_63" };
 
 // components/Drawer/index.tsx
-import { useMemo as useMemo9, useState as useState15 } from "react";
+import { useMemo as useMemo9, useState as useState16 } from "react";
 
 // components/DragDropContext/index.tsx
 init_react_import();
 import { DragDropProvider as DragDropProvider2 } from "@dnd-kit/react";
 import {
-  createContext as createContext3,
-  useCallback as useCallback11,
-  useContext as useContext7,
-  useEffect as useEffect13,
+  createContext as createContext4,
+  useCallback as useCallback12,
+  useContext as useContext8,
+  useEffect as useEffect18,
   useMemo as useMemo8,
-  useRef as useRef5,
-  useState as useState14
+  useRef as useRef6,
+  useState as useState15
 } from "react";
 import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
 
@@ -2576,20 +4084,20 @@ import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
 init_react_import();
 import {
   forwardRef as forwardRef3,
-  memo as memo3,
-  useCallback as useCallback10,
-  useContext as useContext6,
-  useEffect as useEffect12,
+  memo as memo4,
+  useCallback as useCallback11,
+  useContext as useContext7,
+  useEffect as useEffect17,
   useMemo as useMemo7,
-  useRef as useRef4
+  useRef as useRef5
 } from "react";
 
 // components/DraggableComponent/index.tsx
 init_react_import();
 import {
-  useCallback as useCallback7,
-  useContext as useContext4,
-  useEffect as useEffect8,
+  useCallback as useCallback8,
+  useContext as useContext5,
+  useEffect as useEffect12,
   useMemo as useMemo5,
   useRef as useRef2,
   useState as useState10,
@@ -2625,14 +4133,14 @@ function getDeepScrollPosition(element) {
 // components/DropZone/context.tsx
 init_react_import();
 import {
-  createContext as createContext2,
-  useCallback as useCallback5,
+  createContext as createContext3,
+  useCallback as useCallback6,
   useMemo as useMemo4
 } from "react";
 import { createStore as createStore2 } from "zustand";
 import { Fragment as Fragment6, jsx as jsx20 } from "react/jsx-runtime";
-var dropZoneContext = createContext2(null);
-var ZoneStoreContext = createContext2(
+var dropZoneContext = createContext3(null);
+var ZoneStoreContext = createContext3(
   createStore2(() => ({
     zoneDepthIndex: {},
     nextZoneDepthIndex: {},
@@ -2655,7 +4163,7 @@ var DropZoneProvider = ({
   value
 }) => {
   const dispatch = useAppStore((s) => s.dispatch);
-  const registerZone = useCallback5(
+  const registerZone = useCallback6(
     (zoneCompound) => {
       dispatch({
         type: "registerZone",
@@ -2694,23 +4202,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 as useShallow2 } 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, useShallow2(selector));
+  return useStore2(store, useShallow2(selector));
 }
 
 // lib/dnd/use-on-drag-finished.ts
 init_react_import();
-import { useCallback as useCallback6 } from "react";
+import { useCallback as useCallback7 } from "react";
 var useOnDragFinished = (cb, deps = []) => {
   const appStore = useAppStoreApi();
-  return useCallback6(() => {
+  return useCallback7(() => {
     let dispose = () => {
     };
     const processDragging = (isDragging2) => {
@@ -2783,9 +4291,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 = useCallback7(
+  const registerLocalZone = useCallback8(
     (zoneCompound2, active) => {
       var _a;
       (_a = ctx == null ? void 0 : ctx.registerLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2, active);
@@ -2795,7 +4303,7 @@ var DraggableComponent = ({
     },
     [setLocalZones]
   );
-  const unregisterLocalZone = useCallback7(
+  const unregisterLocalZone = useCallback8(
     (zoneCompound2) => {
       var _a;
       (_a = ctx == null ? void 0 : ctx.unregisterLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2);
@@ -2818,7 +4326,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),
@@ -2852,7 +4360,7 @@ var DraggableComponent = ({
     },
     feedback: "clone"
   });
-  useEffect8(() => {
+  useEffect12(() => {
     const isEnabled = zoneStore.getState().enabledIndex[zoneCompound];
     sortable.droppable.disabled = !isEnabled;
     sortable.draggable.disabled = !permissions.drag;
@@ -2870,7 +4378,7 @@ var DraggableComponent = ({
     return cleanup;
   }, [permissions.drag, zoneCompound]);
   const ref = useRef2(null);
-  const refSetter = useCallback7(
+  const refSetter = useCallback8(
     (el) => {
       sortableRef(el);
       if (el) {
@@ -2880,13 +4388,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 = useCallback7(() => {
+  const getStyle = useCallback8(() => {
     var _a, _b, _c;
     if (!ref.current) return;
     const rect = ref.current.getBoundingClientRect();
@@ -2912,10 +4420,10 @@ var DraggableComponent = ({
     return style2;
   }, [ref.current]);
   const [style, setStyle] = useState10();
-  const sync = useCallback7(() => {
+  const sync = useCallback8(() => {
     setStyle(getStyle());
   }, [ref.current, iframe]);
-  useEffect8(() => {
+  useEffect12(() => {
     if (ref.current) {
       const observer = new ResizeObserver(sync);
       observer.observe(ref.current);
@@ -2925,13 +4433,13 @@ var DraggableComponent = ({
     }
   }, [ref.current]);
   const registerNode = useAppStore((s) => s.nodes.registerNode);
-  const hideOverlay = useCallback7(() => {
+  const hideOverlay = useCallback8(() => {
     setIsVisible(false);
   }, []);
-  const showOverlay = useCallback7(() => {
+  const showOverlay = useCallback8(() => {
     setIsVisible(true);
   }, []);
-  useEffect8(() => {
+  useEffect12(() => {
     var _a;
     registerNode(id, {
       methods: { sync, showOverlay, hideOverlay },
@@ -2956,7 +4464,7 @@ var DraggableComponent = ({
     () => overrides.componentOverlay || DefaultOverlay,
     [overrides.componentOverlay]
   );
-  const onClick = useCallback7(
+  const onClick = useCallback8(
     (e) => {
       const el = e.target;
       if (!el.closest("[data-puck-overlay-portal]")) {
@@ -2972,7 +4480,7 @@ var DraggableComponent = ({
     [index, zoneCompound, id]
   );
   const appStore = useAppStoreApi();
-  const onSelectParent = useCallback7(() => {
+  const onSelectParent = useCallback8(() => {
     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;
@@ -2993,14 +4501,14 @@ var DraggableComponent = ({
       }
     });
   }, [ctx, path]);
-  const onDuplicate = useCallback7(() => {
+  const onDuplicate = useCallback8(() => {
     dispatch({
       type: "duplicate",
       sourceIndex: index,
       sourceZone: zoneCompound
     });
   }, [index, zoneCompound]);
-  const onDelete = useCallback7(() => {
+  const onDelete = useCallback8(() => {
     dispatch({
       type: "remove",
       index,
@@ -3012,7 +4520,7 @@ var DraggableComponent = ({
     ZoneStoreContext,
     (s) => s.hoveringComponent === id
   );
-  useEffect8(() => {
+  useEffect12(() => {
     if (!ref.current) {
       return;
     }
@@ -3060,7 +4568,7 @@ var DraggableComponent = ({
   const [isVisible, setIsVisible] = useState10(false);
   const [dragFinished, setDragFinished] = useState10(true);
   const [_, startTransition] = useTransition();
-  useEffect8(() => {
+  useEffect12(() => {
     startTransition(() => {
       if (hover || indicativeHover || isSelected) {
         sync();
@@ -3082,15 +4590,15 @@ var DraggableComponent = ({
       setDragFinished(false);
     }
   });
-  useEffect8(() => {
+  useEffect12(() => {
     if (thisIsDragging) {
       setThisWasDragging(true);
     }
   }, [thisIsDragging]);
-  useEffect8(() => {
+  useEffect12(() => {
     if (thisWasDragging) return onDragFinished();
   }, [thisWasDragging, onDragFinished]);
-  const syncActionsPosition = useCallback7(
+  const syncActionsPosition = useCallback8(
     (el) => {
       if (el) {
         const view = el.ownerDocument.defaultView;
@@ -3115,7 +4623,7 @@ var DraggableComponent = ({
     },
     [zoom]
   );
-  useEffect8(() => {
+  useEffect12(() => {
     if (userDragAxis) {
       setDragAxis(userDragAxis);
       return;
@@ -3229,7 +4737,7 @@ import { useDroppable } from "@dnd-kit/react";
 
 // components/DropZone/lib/use-min-empty-height.ts
 init_react_import();
-import { useEffect as useEffect9, useRef as useRef3, useState as useState11 } from "react";
+import { useEffect as useEffect13, useRef as useRef3, useState as useState11 } from "react";
 var getNumItems = (appStore, zoneCompound) => appStore.getState().state.indexes.zones[zoneCompound].contentIds.length;
 var useMinEmptyHeight = ({
   zoneCompound,
@@ -3281,7 +4789,7 @@ var useMinEmptyHeight = ({
     },
     [appStore, prevHeight, zoneCompound]
   );
-  useEffect9(() => {
+  useEffect13(() => {
     if (draggedItem && ref.current) {
       if (isZone) {
         const rect = ref.current.getBoundingClientRect();
@@ -3312,15 +4820,15 @@ function assignRefs(refs, node) {
 
 // components/DropZone/lib/use-content-with-preview.ts
 init_react_import();
-import { useContext as useContext5, useEffect as useEffect10, useState as useState12 } from "react";
+import { useContext as useContext6, useEffect as useEffect14, useState as useState12 } 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);
@@ -3331,7 +4839,7 @@ function useRenderedCallback(callback, deps) {
 
 // components/DropZone/lib/use-content-with-preview.ts
 var useContentIdsWithPreview = (contentIds, zoneCompound) => {
-  const zoneStore = useContext5(ZoneStoreContext);
+  const zoneStore = useContext6(ZoneStoreContext);
   const preview = useContextStore(
     ZoneStoreContext,
     (s) => s.previewIndex[zoneCompound]
@@ -3373,7 +4881,7 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
     },
     []
   );
-  useEffect10(() => {
+  useEffect14(() => {
     var _a;
     const s = zoneStore.getState();
     const draggedItemId = (_a = s.draggedItem) == null ? void 0 : _a.id;
@@ -3391,7 +4899,7 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
 
 // components/DropZone/lib/use-drag-axis.ts
 init_react_import();
-import { useCallback as useCallback9, useEffect as useEffect11, useState as useState13 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect15, useState as useState13 } from "react";
 var GRID_DRAG_AXIS = "dynamic";
 var FLEX_ROW_DRAG_AXIS = "x";
 var DEFAULT_DRAG_AXIS = "y";
@@ -3400,7 +4908,7 @@ var useDragAxis = (ref, collisionAxis) => {
   const [dragAxis, setDragAxis] = useState13(
     collisionAxis || DEFAULT_DRAG_AXIS
   );
-  const calculateDragAxis = useCallback9(() => {
+  const calculateDragAxis = useCallback10(() => {
     if (ref.current) {
       const computedStyle = window.getComputedStyle(ref.current);
       if (computedStyle.display === "grid") {
@@ -3412,7 +4920,7 @@ var useDragAxis = (ref, collisionAxis) => {
       }
     }
   }, [ref.current]);
-  useEffect11(() => {
+  useEffect15(() => {
     const onViewportChange = () => {
       calculateDragAxis();
     };
@@ -3421,7 +4929,7 @@ var useDragAxis = (ref, collisionAxis) => {
       window.removeEventListener("viewportchange", onViewportChange);
     };
   }, []);
-  useEffect11(calculateDragAxis, [status, collisionAxis]);
+  useEffect15(calculateDragAxis, [status, collisionAxis]);
   return [dragAxis, calculateDragAxis];
 };
 
@@ -3509,12 +5017,259 @@ function Render({
   return /* @__PURE__ */ jsx23(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx23(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx23(DropZoneRenderPure, { zone: rootZone }) }) });
 }
 
+// lib/field-transforms/default-transforms/inline-text-transform.tsx
+init_react_import();
+
+// components/InlineTextField/index.tsx
+init_react_import();
+import { memo as memo3, useEffect as useEffect16, useRef as useRef4, useState as useState14 } 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);
+}
+
+// lib/get-selector-for-id.ts
+init_react_import();
+var getSelectorForId = (state, id) => {
+  const node = state.indexes.nodes[id];
+  if (!node) return;
+  const zoneCompound = `${node.parentId}:${node.zone}`;
+  const index = state.indexes.zones[zoneCompound].contentIds.indexOf(id);
+  return { zone: zoneCompound, index };
+};
+
+// components/InlineTextField/index.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+var getClassName17 = get_class_name_factory_default("InlineTextField", styles_module_default13);
+var InlineTextFieldInternal = ({
+  propPath,
+  componentId,
+  value,
+  isReadOnly,
+  opts = {}
+}) => {
+  var _a;
+  const ref = useRef4(null);
+  const appStoreApi = useAppStoreApi();
+  const disableLineBreaks = (_a = opts.disableLineBreaks) != null ? _a : false;
+  useEffect16(() => {
+    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] = useState14(false);
+  const [isFocused, setIsFocused] = useState14(false);
+  return /* @__PURE__ */ jsx24(
+    "span",
+    {
+      className: getClassName17(),
+      ref,
+      contentEditable: isHovering || isFocused ? "plaintext-only" : "false",
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      onClickCapture: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const itemSelector = getSelectorForId(
+          appStoreApi.getState().state,
+          componentId
+        );
+        appStoreApi.getState().setUi({ itemSelector });
+      },
+      onKeyDown: (e) => {
+        e.stopPropagation();
+        if (disableLineBreaks && e.key === "Enter" || isReadOnly) {
+          e.preventDefault();
+        }
+      },
+      onKeyUp: (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+      },
+      onMouseOverCapture: () => setIsHovering(true),
+      onMouseOutCapture: () => setIsHovering(false),
+      onFocus: () => setIsFocused(true),
+      onBlur: () => setIsFocused(false)
+    }
+  );
+};
+var InlineTextField = memo3(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 Fragment8, jsx as jsx24, jsxs as jsxs10 } from "react/jsx-runtime";
-var getClassName17 = get_class_name_factory_default("DropZone", styles_module_default12);
+import { Fragment as Fragment8, jsx as jsx26, jsxs as jsxs10 } from "react/jsx-runtime";
+var getClassName18 = get_class_name_factory_default("DropZone", styles_module_default12);
 var getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;
 var RENDER_DEBUG = false;
-var DropZoneEditPure = (props) => /* @__PURE__ */ jsx24(DropZoneEdit, __spreadValues({}, props));
+var DropZoneEditPure = (props) => /* @__PURE__ */ jsx26(DropZoneEdit, __spreadValues({}, props));
 var DropZoneChild = ({
   zoneCompound,
   componentId,
@@ -3525,9 +5280,9 @@ var DropZoneChild = ({
 }) => {
   var _a, _b;
   const metadata = useAppStore((s) => s.metadata);
-  const ctx = useContext6(dropZoneContext);
+  const ctx = useContext7(dropZoneContext);
   const { depth = 1 } = ctx != null ? ctx : {};
-  const zoneStore = useContext6(ZoneStoreContext);
+  const zoneStore = useContext7(ZoneStoreContext);
   const nodeProps = useAppStore(
     useShallow5((s) => {
       var _a2;
@@ -3598,10 +5353,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]
   );
@@ -3624,7 +5379,7 @@ var DropZoneChild = ({
   const plugins = useAppStore((s) => s.plugins);
   const userFieldTransforms = useAppStore((s) => s.fieldTransforms);
   const combinedFieldTransforms = useMemo7(
-    () => __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),
@@ -3647,7 +5402,7 @@ var DropZoneChild = ({
   if (isInserting) {
     Render2 = renderPreview;
   }
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx26(
     DraggableComponent,
     {
       id: componentId,
@@ -3661,18 +5416,18 @@ var DropZoneChild = ({
       autoDragAxis: dragAxis,
       userDragAxis: collisionAxis,
       inDroppableZone,
-      children: (dragRef) => (componentConfig == null ? void 0 : componentConfig.inline) && !isInserting ? /* @__PURE__ */ jsx24(Fragment8, { children: /* @__PURE__ */ jsx24(
+      children: (dragRef) => (componentConfig == null ? void 0 : componentConfig.inline) && !isInserting ? /* @__PURE__ */ jsx26(Fragment8, { 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 = memo3(DropZoneChild);
+var DropZoneChildMemo = memo4(DropZoneChild);
 var DropZoneEdit = forwardRef3(
   function DropZoneEditInternal({
     zone,
@@ -3683,7 +5438,7 @@ var DropZoneEdit = forwardRef3(
     minEmptyHeight: userMinEmptyHeight = 128,
     collisionAxis
   }, userRef) {
-    const ctx = useContext6(dropZoneContext);
+    const ctx = useContext7(dropZoneContext);
     const appStoreApi = useAppStoreApi();
     const {
       // These all need setting via context
@@ -3721,14 +5476,14 @@ var DropZoneEdit = forwardRef3(
         return (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.type;
       })
     );
-    useEffect12(() => {
+    useEffect17(() => {
       if (!zoneType || zoneType === "dropzone") {
         if (ctx == null ? void 0 : ctx.registerZone) {
           ctx == null ? void 0 : ctx.registerZone(zoneCompound);
         }
       }
     }, [zoneType, appStoreApi]);
-    useEffect12(() => {
+    useEffect17(() => {
       if (zoneType === "dropzone") {
         if (zoneCompound !== rootDroppableId) {
           console.warn(
@@ -3740,8 +5495,8 @@ var DropZoneEdit = forwardRef3(
     const contentIds = useMemo7(() => {
       return zoneContentIds || [];
     }, [zoneContentIds]);
-    const ref = useRef4(null);
-    const acceptsTarget = useCallback10(
+    const ref = useRef5(null);
+    const acceptsTarget = useCallback11(
       (componentType) => {
         if (!componentType) {
           return true;
@@ -3779,7 +5534,7 @@ var DropZoneEdit = forwardRef3(
       }
       return _isEnabled;
     });
-    useEffect12(() => {
+    useEffect17(() => {
       if (registerLocalZone) {
         registerLocalZone(zoneCompound, targetAccepted || isEnabled);
       }
@@ -3794,8 +5549,8 @@ var DropZoneEdit = forwardRef3(
       zoneCompound
     );
     const isDropEnabled = isEnabled && (preview ? contentIdsWithPreview.length === 1 : contentIdsWithPreview.length === 0);
-    const zoneStore = useContext6(ZoneStoreContext);
-    useEffect12(() => {
+    const zoneStore = useContext7(ZoneStoreContext);
+    useEffect17(() => {
       const { enabledIndex } = zoneStore.getState();
       zoneStore.setState({
         enabledIndex: __spreadProps(__spreadValues({}, enabledIndex), { [zoneCompound]: isEnabled })
@@ -3824,10 +5579,10 @@ var DropZoneEdit = forwardRef3(
       userMinEmptyHeight,
       ref
     });
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx26(
       "div",
       {
-        className: `${getClassName17({
+        className: `${getClassName18({
           isRootZone,
           hoveringOverArea,
           isEnabled,
@@ -3845,7 +5600,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,
@@ -3868,7 +5623,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 = useMemo7(
     () => ({
       areaId: props.id,
@@ -3876,7 +5631,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), {
@@ -3886,15 +5641,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 = useContext6(dropZoneContext);
+    const ctx = useContext7(dropZoneContext);
     const { areaId = "root" } = ctx || {};
-    const { config, data, metadata } = useContext6(renderContext);
+    const { config, data, metadata } = useContext7(renderContext);
     let zoneCompound = `${areaId}:${zone}`;
     let content = (data == null ? void 0 : data.content) || [];
-    useEffect12(() => {
+    useEffect17(() => {
       if (!content) {
         if (ctx == null ? void 0 : ctx.registerZone) {
           ctx == null ? void 0 : ctx.registerZone(zoneCompound);
@@ -3907,10 +5662,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,
@@ -3924,14 +5679,14 @@ 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 = useContext6(dropZoneContext);
+    const ctx = useContext7(dropZoneContext);
     if ((ctx == null ? void 0 : ctx.mode) === "edit") {
-      return /* @__PURE__ */ jsx24(Fragment8, { children: /* @__PURE__ */ jsx24(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
+      return /* @__PURE__ */ jsx26(Fragment8, { children: /* @__PURE__ */ jsx26(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
     }
-    return /* @__PURE__ */ jsx24(Fragment8, { children: /* @__PURE__ */ jsx24(DropZoneRender, __spreadProps(__spreadValues({}, props), { ref })) });
+    return /* @__PURE__ */ jsx26(Fragment8, { children: /* @__PURE__ */ jsx26(DropZoneRender, __spreadProps(__spreadValues({}, props), { ref })) });
   }
 );
 
@@ -4222,7 +5977,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
@@ -4238,7 +5993,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",
@@ -4267,14 +6022,14 @@ function getDeepDir(el) {
 
 // components/DragDropContext/index.tsx
 import { effect } from "@dnd-kit/state";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var DEBUG3 = false;
-var dragListenerContext = createContext3({
+var dragListenerContext = createContext4({
   dragListeners: {}
 });
 function useDragListener(type, fn, deps = []) {
-  const { setDragListeners } = useContext7(dragListenerContext);
-  useEffect13(() => {
+  const { setDragListeners } = useContext8(dragListenerContext);
+  useEffect18(() => {
     if (setDragListeners) {
       setDragListeners((old) => __spreadProps(__spreadValues({}, old), {
         [type]: [...old[type] || [], fn]
@@ -4284,8 +6039,8 @@ function useDragListener(type, fn, deps = []) {
 }
 var AREA_CHANGE_DEBOUNCE_MS = 100;
 var useTempDisableFallback = (timeout3) => {
-  const lastFallbackDisable = useRef5(null);
-  return useCallback11((manager) => {
+  const lastFallbackDisable = useRef6(null);
+  return useCallback12((manager) => {
     collisionStore.setState({ fallbackEnabled: false });
     const fallbackId = generateId();
     lastFallbackDisable.current = fallbackId;
@@ -4304,9 +6059,9 @@ var DragDropContextClient = ({
   const dispatch = useAppStore((s) => s.dispatch);
   const appStore = useAppStoreApi();
   const id = useSafeId();
-  const debouncedParamsRef = useRef5(null);
+  const debouncedParamsRef = useRef6(null);
   const tempDisableFallback = useTempDisableFallback(100);
-  const [zoneStore] = useState14(
+  const [zoneStore] = useState15(
     () => createStore3(() => ({
       zoneDepthIndex: {},
       nextZoneDepthIndex: {},
@@ -4318,7 +6073,7 @@ var DragDropContextClient = ({
       hoveringComponent: null
     }))
   );
-  const getChanged = useCallback11(
+  const getChanged2 = useCallback12(
     (params, id2) => {
       const { zoneDepthIndex = {}, areaDepthIndex = {} } = zoneStore.getState() || {};
       const stateHasZone = Object.keys(zoneDepthIndex).length > 0;
@@ -4339,9 +6094,9 @@ var DragDropContextClient = ({
     },
     [zoneStore]
   );
-  const setDeepestAndCollide = useCallback11(
+  const setDeepestAndCollide = useCallback12(
     (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 } : {},
@@ -4363,7 +6118,7 @@ var DragDropContextClient = ({
     setDeepestDb.cancel();
     debouncedParamsRef.current = null;
   };
-  useEffect13(() => {
+  useEffect18(() => {
     if (DEBUG3) {
       zoneStore.subscribe(
         (s) => {
@@ -4377,13 +6132,13 @@ var DragDropContextClient = ({
       );
     }
   }, []);
-  const [plugins] = useState14(() => [
+  const [plugins] = useState15(() => [
     ...disableAutoScroll ? defaultPreset.plugins.filter((plugin) => plugin !== AutoScroller) : defaultPreset.plugins,
     createNestedDroppablePlugin(
       {
         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 = {};
@@ -4425,9 +6180,9 @@ var DragDropContextClient = ({
     )
   ]);
   const sensors = useSensors();
-  const [dragListeners, setDragListeners] = useState14({});
-  const dragMode = useRef5(null);
-  const initialSelector = useRef5(void 0);
+  const [dragListeners, setDragListeners] = useState15({});
+  const dragMode = useRef6(null);
+  const initialSelector = useRef6(void 0);
   const nextContextValue = useMemo8(
     () => ({
       mode: "edit",
@@ -4436,14 +6191,14 @@ var DragDropContextClient = ({
     }),
     []
   );
-  return /* @__PURE__ */ jsx25("div", { id, children: /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx27("div", { id, children: /* @__PURE__ */ jsx27(
     dragListenerContext.Provider,
     {
       value: {
         dragListeners,
         setDragListeners
       },
-      children: /* @__PURE__ */ jsx25(
+      children: /* @__PURE__ */ jsx27(
         DragDropProvider2,
         {
           plugins,
@@ -4659,7 +6414,7 @@ var DragDropContextClient = ({
             const entryEl = (_d = getFrame()) == null ? void 0 : _d.querySelector("[data-puck-entry]");
             entryEl == null ? void 0 : entryEl.setAttribute("data-puck-dragging", "true");
           },
-          children: /* @__PURE__ */ jsx25(ZoneStoreProvider, { store: zoneStore, children: /* @__PURE__ */ jsx25(DropZoneProvider, { value: nextContextValue, children }) })
+          children: /* @__PURE__ */ jsx27(ZoneStoreProvider, { store: zoneStore, children: /* @__PURE__ */ jsx27(DropZoneProvider, { value: nextContextValue, children }) })
         }
       )
     }
@@ -4673,13 +6428,13 @@ var DragDropContext = ({
   if (status === "LOADING") {
     return children;
   }
-  return /* @__PURE__ */ jsx25(DragDropContextClient, { disableAutoScroll, children });
+  return /* @__PURE__ */ jsx27(DragDropContextClient, { disableAutoScroll, children });
 };
 
 // components/Drawer/index.tsx
 import { useDraggable, useDroppable as useDroppable2 } from "@dnd-kit/react";
-import { jsx as jsx26, jsxs as jsxs11 } from "react/jsx-runtime";
-var getClassName18 = get_class_name_factory_default("Drawer", styles_module_default10);
+import { jsx as jsx28, jsxs as jsxs11 } from "react/jsx-runtime";
+var getClassName19 = get_class_name_factory_default("Drawer", styles_module_default10);
 var getClassNameItem2 = get_class_name_factory_default("DrawerItem", styles_module_default10);
 var DrawerItemInner = ({
   children,
@@ -4689,10 +6444,10 @@ var DrawerItemInner = ({
   isDragDisabled
 }) => {
   const CustomInner = useMemo9(
-    () => children || (({ children: children2 }) => /* @__PURE__ */ jsx26("div", { className: getClassNameItem2("default"), children: children2 })),
+    () => children || (({ children: children2 }) => /* @__PURE__ */ jsx28("div", { className: getClassNameItem2("default"), children: children2 })),
     [children]
   );
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx28(
     "div",
     {
       className: getClassNameItem2({ disabled: isDragDisabled }),
@@ -4700,9 +6455,9 @@ var DrawerItemInner = ({
       onMouseDown: (e) => e.preventDefault(),
       "data-testid": dragRef ? `drawer-item:${name}` : "",
       "data-puck-drawer-item": true,
-      children: /* @__PURE__ */ jsx26(CustomInner, { name, children: /* @__PURE__ */ jsx26("div", { className: getClassNameItem2("draggableWrapper"), children: /* @__PURE__ */ jsxs11("div", { className: getClassNameItem2("draggable"), children: [
-        /* @__PURE__ */ jsx26("div", { className: getClassNameItem2("name"), children: label != null ? label : name }),
-        /* @__PURE__ */ jsx26("div", { className: getClassNameItem2("icon"), children: /* @__PURE__ */ jsx26(DragIcon, {}) })
+      children: /* @__PURE__ */ jsx28(CustomInner, { name, children: /* @__PURE__ */ jsx28("div", { className: getClassNameItem2("draggableWrapper"), children: /* @__PURE__ */ jsxs11("div", { className: getClassNameItem2("draggable"), children: [
+        /* @__PURE__ */ jsx28("div", { className: getClassNameItem2("name"), children: label != null ? label : name }),
+        /* @__PURE__ */ jsx28("div", { className: getClassNameItem2("icon"), children: /* @__PURE__ */ jsx28(DragIcon, {}) })
       ] }) }) })
     }
   );
@@ -4720,9 +6475,9 @@ var DrawerItemDraggable = ({
     disabled: isDragDisabled,
     type: "drawer"
   });
-  return /* @__PURE__ */ jsxs11("div", { className: getClassName18("draggable"), children: [
-    /* @__PURE__ */ jsx26("div", { className: getClassName18("draggableBg"), children: /* @__PURE__ */ jsx26(DrawerItemInner, { name, label, children }) }),
-    /* @__PURE__ */ jsx26("div", { className: getClassName18("draggableFg"), children: /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsxs11("div", { className: getClassName19("draggable"), children: [
+    /* @__PURE__ */ jsx28("div", { className: getClassName19("draggableBg"), children: /* @__PURE__ */ jsx28(DrawerItemInner, { name, label, children }) }),
+    /* @__PURE__ */ jsx28("div", { className: getClassName19("draggableFg"), children: /* @__PURE__ */ jsx28(
       DrawerItemInner,
       {
         name,
@@ -4743,7 +6498,7 @@ var DrawerItem = ({
   isDragDisabled
 }) => {
   const resolvedId = id || name;
-  const [dynamicId, setDynamicId] = useState15(generateId(resolvedId));
+  const [dynamicId, setDynamicId] = useState16(generateId(resolvedId));
   if (typeof index !== "undefined") {
     console.error(
       "Warning: The `index` prop on Drawer.Item is deprecated and no longer required."
@@ -4756,7 +6511,7 @@ var DrawerItem = ({
     },
     [resolvedId]
   );
-  return /* @__PURE__ */ jsx26("div", { children: /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx28("div", { children: /* @__PURE__ */ jsx28(
     DrawerItemDraggable,
     {
       name,
@@ -4789,10 +6544,10 @@ var Drawer = ({
     collisionPriority: 0
     // Never collide with this, but we use it so NestedDroppablePlugin respects the Drawer
   });
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx28(
     "div",
     {
-      className: getClassName18(),
+      className: getClassName19(),
       ref,
       "data-puck-dnd": id,
       "data-puck-drawer": true,
@@ -4806,13 +6561,13 @@ Drawer.Item = DrawerItem;
 // components/Puck/index.tsx
 init_react_import();
 import {
-  createContext as createContext7,
-  useCallback as useCallback20,
-  useContext as useContext12,
-  useEffect as useEffect25,
+  createContext as createContext8,
+  useCallback as useCallback21,
+  useContext as useContext13,
+  useEffect as useEffect30,
   useMemo as useMemo21,
-  useRef as useRef11,
-  useState as useState25
+  useRef as useRef12,
+  useState as useState26
 } from "react";
 
 // components/Puck/components/Fields/index.tsx
@@ -4820,21 +6575,21 @@ 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_default13 = { "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_default14 = { "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 memo4, useCallback as useCallback12, useMemo as useMemo10 } from "react";
+import { memo as memo5, useCallback as useCallback13, useMemo as useMemo10 } from "react";
 import { useShallow as useShallow6 } from "zustand/react/shallow";
-import { Fragment as Fragment9, jsx as jsx27, jsxs as jsxs12 } from "react/jsx-runtime";
-var getClassName19 = get_class_name_factory_default("PuckFields", styles_module_default13);
+import { Fragment as Fragment9, jsx as jsx29, jsxs as jsxs12 } from "react/jsx-runtime";
+var getClassName20 = get_class_name_factory_default("PuckFields", styles_module_default14);
 var DefaultFields = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx27(Fragment9, { children });
+  return /* @__PURE__ */ jsx29(Fragment9, { 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;
@@ -4851,7 +6606,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,
@@ -4861,7 +6616,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,
@@ -4892,13 +6647,13 @@ var FieldsChild = ({ fieldName }) => {
     })
   );
   const appStore = useAppStoreApi();
-  const onChange = useCallback12(createOnChange(fieldName, appStore), [
+  const onChange = useCallback13(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: getClassName19("field"), children: /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx29("div", { className: getClassName20("field"), children: /* @__PURE__ */ jsx29(
     AutoFieldPrivate,
     {
       field,
@@ -4909,7 +6664,7 @@ var FieldsChild = ({ fieldName }) => {
     }
   ) }, id);
 };
-var FieldsChildMemo = memo4(FieldsChild);
+var FieldsChildMemo = memo5(FieldsChild);
 var FieldsInternal = ({ wrapFields = true }) => {
   const overrides = useAppStore((s) => s.overrides);
   const componentResolving = useAppStore((s) => {
@@ -4938,37 +6693,37 @@ var FieldsInternal = ({ wrapFields = true }) => {
   return /* @__PURE__ */ jsxs12(
     "form",
     {
-      className: getClassName19({ wrapFields }),
+      className: getClassName20({ 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: getClassName19("loadingOverlay"), children: /* @__PURE__ */ jsx27("div", { className: getClassName19("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: getClassName20("loadingOverlay"), children: /* @__PURE__ */ jsx29("div", { className: getClassName20("loadingOverlayInner"), children: /* @__PURE__ */ jsx29(Loader, { size: 16 }) }) })
       ]
     }
   );
 };
-var Fields = memo4(FieldsInternal);
+var Fields = memo5(FieldsInternal);
 
 // components/Puck/components/Components/index.tsx
 init_react_import();
 
 // lib/use-component-list.tsx
 init_react_import();
-import { useEffect as useEffect15, useState as useState16 } from "react";
+import { useEffect as useEffect20, useState as useState17 } 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_default14 = { "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_default15 = { "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 useEffect14 } from "react";
-import { jsx as jsx28, jsxs as jsxs13 } from "react/jsx-runtime";
-var getClassName20 = get_class_name_factory_default("ComponentList", styles_module_default14);
+import { useEffect as useEffect19 } from "react";
+import { jsx as jsx30, jsxs as jsxs13 } from "react/jsx-runtime";
+var getClassName21 = get_class_name_factory_default("ComponentList", styles_module_default15);
 var ComponentListItem = ({
   name,
   label
@@ -4980,14 +6735,14 @@ var ComponentListItem = ({
       type: name
     }).insert
   );
-  useEffect14(() => {
+  useEffect19(() => {
     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,
@@ -4998,12 +6753,12 @@ var ComponentList = ({
   const setUi = useAppStore((s) => s.setUi);
   const componentList = useAppStore((s) => s.state.ui.componentList);
   const { expanded = true } = componentList[id] || {};
-  return /* @__PURE__ */ jsxs13("div", { className: getClassName20({ isExpanded: expanded }), children: [
+  return /* @__PURE__ */ jsxs13("div", { className: getClassName21({ isExpanded: expanded }), children: [
     title && /* @__PURE__ */ jsxs13(
       "button",
       {
         type: "button",
-        className: getClassName20("title"),
+        className: getClassName21("title"),
         onClick: () => setUi({
           componentList: __spreadProps(__spreadValues({}, componentList), {
             [id]: __spreadProps(__spreadValues({}, componentList[id]), {
@@ -5013,14 +6768,14 @@ var ComponentList = ({
         }),
         title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
         children: [
-          /* @__PURE__ */ jsx28("div", { children: title }),
-          /* @__PURE__ */ jsx28("div", { className: getClassName20("titleIcon"), children: expanded ? /* @__PURE__ */ jsx28(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx28(ChevronDown, { size: 12 }) })
+          /* @__PURE__ */ jsx30("div", { children: title }),
+          /* @__PURE__ */ jsx30("div", { className: getClassName21("titleIcon"), children: expanded ? /* @__PURE__ */ jsx30(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx30(ChevronDown, { size: 12 }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx28("div", { className: getClassName20("content"), children: /* @__PURE__ */ jsx28(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
+    /* @__PURE__ */ jsx30("div", { className: getClassName21("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,
@@ -5034,12 +6789,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] = useState16();
+  const [componentList, setComponentList] = useState17();
   const config = useAppStore((s) => s.config);
   const uiComponentList = useAppStore((s) => s.state.ui.componentList);
-  useEffect15(() => {
+  useEffect20(() => {
     var _a, _b, _c;
     if (Object.keys(uiComponentList).length > 0) {
       const matchedComponents = [];
@@ -5049,7 +6804,7 @@ var useComponentList = () => {
           if (category.visible === false || !category.components) {
             return null;
           }
-          return /* @__PURE__ */ jsx29(
+          return /* @__PURE__ */ jsx31(
             ComponentList,
             {
               id: categoryKey,
@@ -5058,7 +6813,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,
@@ -5078,7 +6833,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",
@@ -5086,7 +6841,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,
@@ -5109,7 +6864,14 @@ var useComponentList = () => {
 
 // components/Puck/components/Components/index.tsx
 import { useMemo as useMemo11 } from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Components/styles.module.css#css-module
+init_react_import();
+var styles_module_default16 = { "Components": "_Components_uwdh8_1" };
+
+// components/Puck/components/Components/index.tsx
+import { jsx as jsx32 } from "react/jsx-runtime";
+var getClassName22 = get_class_name_factory_default("Components", styles_module_default16);
 var Components = () => {
   const overrides = useAppStore((s) => s.overrides);
   const componentList = useComponentList();
@@ -5121,24 +6883,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("div", { className: getClassName22(), children: /* @__PURE__ */ jsx32(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx32(ComponentList, { id: "all" }) }) });
 };
 
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-import { useCallback as useCallback13, useEffect as useEffect17, useRef as useRef6, useMemo as useMemo12 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect22, useRef as useRef7, useMemo as useMemo12 } from "react";
 
 // components/AutoFrame/index.tsx
 init_react_import();
 import {
-  createContext as createContext4,
-  useContext as useContext8,
-  useEffect as useEffect16,
-  useState as useState17
+  createContext as createContext5,
+  useContext as useContext9,
+  useEffect as useEffect21,
+  useState as useState18
 } from "react";
 import hash from "object-hash";
 import { createPortal as createPortal3 } from "react-dom";
-import { Fragment as Fragment10, jsx as jsx31 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx33 } from "react/jsx-runtime";
 var styleSelector = 'style, link[rel="stylesheet"]';
 var collectStyles = (doc) => {
   const collected = [];
@@ -5188,7 +6950,7 @@ var CopyHostStyles = ({
   onStylesLoaded = () => null
 }) => {
   const { document: doc, window: win } = useFrame();
-  useEffect16(() => {
+  useEffect21(() => {
     if (!win || !doc) {
       return () => {
       };
@@ -5345,10 +7107,10 @@ var CopyHostStyles = ({
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ jsx31(Fragment10, { children });
+  return /* @__PURE__ */ jsx33(Fragment10, { children });
 };
-var autoFrameContext = createContext4({});
-var useFrame = () => useContext8(autoFrameContext);
+var autoFrameContext = createContext5({});
+var useFrame = () => useContext9(autoFrameContext);
 function AutoFrame(_a) {
   var _b = _a, {
     children,
@@ -5369,11 +7131,11 @@ function AutoFrame(_a) {
     "onNotReady",
     "frameRef"
   ]);
-  const [loaded, setLoaded] = useState17(false);
-  const [ctx, setCtx] = useState17({});
-  const [mountTarget, setMountTarget] = useState17();
-  const [stylesLoaded, setStylesLoaded] = useState17(false);
-  useEffect16(() => {
+  const [loaded, setLoaded] = useState18(false);
+  const [ctx, setCtx] = useState18({});
+  const [mountTarget, setMountTarget] = useState18();
+  const [stylesLoaded, setStylesLoaded] = useState18(false);
+  useEffect21(() => {
     var _a2;
     if (frameRef.current) {
       const doc = frameRef.current.contentDocument;
@@ -5392,7 +7154,7 @@ function AutoFrame(_a) {
       }
     }
   }, [frameRef, loaded, stylesLoaded]);
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx33(
     "iframe",
     __spreadProps(__spreadValues({}, props), {
       className,
@@ -5402,7 +7164,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,
@@ -5418,14 +7180,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_default15 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPreview-frame": "_PuckPreview-frame_z2rgu_6" };
+var styles_module_default17 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPreview-frame": "_PuckPreview-frame_z2rgu_6" };
 
 // components/Puck/components/Preview/index.tsx
-import { Fragment as Fragment11, jsx as jsx32 } from "react/jsx-runtime";
-var getClassName21 = get_class_name_factory_default("PuckPreview", styles_module_default15);
+import { Fragment as Fragment11, jsx as jsx34 } from "react/jsx-runtime";
+var getClassName23 = get_class_name_factory_default("PuckPreview", styles_module_default17);
 var useBubbleIframeEvents = (ref) => {
   const status = useAppStore((s) => s.status);
-  useEffect17(() => {
+  useEffect22(() => {
     if (ref.current && status === "READY") {
       const iframe = ref.current;
       const handlePointerMove = (event) => {
@@ -5474,7 +7236,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
   const renderData = useAppStore(
     (s) => s.state.ui.previewMode === "edit" ? null : s.state.data
   );
-  const Page = useCallback13(
+  const Page = useCallback14(
     (pageProps) => {
       var _a, _b;
       const propsWithSlots = useSlots(
@@ -5484,15 +7246,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(Fragment11, { children: propsWithSlots.children });
+      }, propsWithSlots)) : /* @__PURE__ */ jsx34(Fragment11, { children: propsWithSlots.children });
     },
     [config]
   );
   const Frame = useMemo12(() => 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: {
@@ -5502,18 +7264,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 });
-  useEffect17(() => {
+  ) : /* @__PURE__ */ jsx34(Render, { data: renderData, config, metadata });
+  useEffect22(() => {
     if (!iframe.enabled) {
       setStatus("READY");
     }
   }, [iframe.enabled]);
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx34(
     "div",
     {
-      className: getClassName21(),
+      className: getClassName23(),
       id,
       "data-puck-preview": true,
       onClick: (e) => {
@@ -5522,11 +7284,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: getClassName21("frame"),
+          className: getClassName23("frame"),
           "data-rfd-iframe": true,
           onReady: () => {
             setStatus("READY");
@@ -5535,18 +7297,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: getClassName21("frame"),
+          className: getClassName23("frame"),
           ref,
           "data-puck-entry": true,
           children: inner
@@ -5564,7 +7326,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_default16 = { "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_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" };
 
 // lib/scroll-into-view.ts
 init_react_import();
@@ -5578,7 +7340,7 @@ var scrollIntoView = (el) => {
 };
 
 // components/LayerTree/index.tsx
-import { useCallback as useCallback14, useContext as useContext9 } from "react";
+import { useCallback as useCallback15, useContext as useContext10 } from "react";
 
 // lib/on-scroll-end.ts
 init_react_import();
@@ -5601,9 +7363,9 @@ var onScrollEnd = (frame, cb) => {
 
 // components/LayerTree/index.tsx
 import { useShallow as useShallow7 } from "zustand/react/shallow";
-import { Fragment as Fragment12, jsx as jsx33, jsxs as jsxs14 } from "react/jsx-runtime";
-var getClassName22 = get_class_name_factory_default("LayerTree", styles_module_default16);
-var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default16);
+import { Fragment as Fragment12, jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
+var getClassName24 = get_class_name_factory_default("LayerTree", styles_module_default18);
+var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default18);
 var Layer = ({
   index,
   itemId,
@@ -5613,7 +7375,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 = useCallback14(
+  const setItemSelector = useCallback15(
     (itemSelector2) => {
       dispatch({ type: "setUi", ui: { itemSelector: itemSelector2 } });
     },
@@ -5633,7 +7395,7 @@ var Layer = ({
     )
   );
   const containsZone = zonesForItem.length > 0;
-  const zoneStore = useContext9(ZoneStoreContext);
+  const zoneStore = useContext10(ZoneStoreContext);
   const isHovering = useContextStore(
     ZoneStoreContext,
     (s) => s.hoveringComponent === itemId
@@ -5658,7 +7420,7 @@ var Layer = ({
         childIsSelected
       }),
       children: [
-        /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs14(
+        /* @__PURE__ */ jsx35("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs14(
           "button",
           {
             type: "button",
@@ -5696,22 +7458,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__ */ jsxs14("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))
       ]
     }
   );
@@ -5738,14 +7500,14 @@ var LayerTree = ({
     )
   );
   return /* @__PURE__ */ jsxs14(Fragment12, { children: [
-    label && /* @__PURE__ */ jsxs14("div", { className: getClassName22("zoneTitle"), children: [
-      /* @__PURE__ */ jsx33("div", { className: getClassName22("zoneIcon"), children: /* @__PURE__ */ jsx33(Layers, { size: "16" }) }),
+    label && /* @__PURE__ */ jsxs14("div", { className: getClassName24("zoneTitle"), children: [
+      /* @__PURE__ */ jsx35("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ jsx35(Layers, { size: "16" }) }),
       label
     ] }),
-    /* @__PURE__ */ jsxs14("ul", { className: getClassName22(), children: [
-      contentIds.length === 0 && /* @__PURE__ */ jsx33("div", { className: getClassName22("helper"), children: "No items" }),
+    /* @__PURE__ */ jsxs14("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,
@@ -5772,21 +7534,28 @@ var findZonesForArea = (state, area) => {
 
 // components/Puck/components/Outline/index.tsx
 import { useShallow as useShallow8 } from "zustand/react/shallow";
-import { jsx as jsx34 } from "react/jsx-runtime";
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Outline/styles.module.css#css-module
+init_react_import();
+var styles_module_default19 = { "Outline": "_Outline_1rrni_1" };
+
+// components/Puck/components/Outline/index.tsx
+import { jsx as jsx36 } from "react/jsx-runtime";
+var getClassName25 = get_class_name_factory_default("Outline", styles_module_default19);
 var Outline = () => {
   const outlineOverride = useAppStore((s) => s.overrides.outline);
   const rootZones = useAppStore(
     useShallow8((s) => findZonesForArea(s.state, "root"))
   );
   const Wrapper = useMemo13(() => outlineOverride || "div", [outlineOverride]);
-  return /* @__PURE__ */ jsx34(Wrapper, { children: rootZones.map((zoneCompound) => /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx36("div", { className: getClassName25(), children: /* @__PURE__ */ jsx36(Wrapper, { children: rootZones.map((zoneCompound) => /* @__PURE__ */ jsx36(
     LayerTree,
     {
       label: rootZones.length === 1 ? "" : zoneCompound.split(":")[1],
       zoneCompound
     },
     zoneCompound
-  )) });
+  )) }) });
 };
 
 // lib/use-loaded-overrides.ts
@@ -5840,8 +7609,8 @@ var useLoadedOverrides = ({
 
 // lib/use-puck.ts
 init_react_import();
-import { createContext as createContext5, useContext as useContext10, useEffect as useEffect18, useState as useState18 } from "react";
-import { createStore as createStore4, useStore as useStore2 } from "zustand";
+import { createContext as createContext6, useContext as useContext11, useEffect as useEffect23, useState as useState19 } from "react";
+import { createStore as createStore4, useStore as useStore3 } from "zustand";
 var generateUsePuck = (store) => {
   const history = {
     back: store.history.back,
@@ -5863,17 +7632,11 @@ var generateUsePuck = (store) => {
     selectedItem: store.selectedItem || null,
     getItemBySelector: (selector) => getItem(selector, store.state),
     getItemById: (id) => store.state.indexes.nodes[id].data,
-    getSelectorForId: (id) => {
-      const node = store.state.indexes.nodes[id];
-      if (!node) return;
-      const zoneCompound = `${node.parentId}:${node.zone}`;
-      const index = store.state.indexes.zones[zoneCompound].contentIds.indexOf(id);
-      return { zone: zoneCompound, index };
-    }
+    getSelectorForId: (id) => getSelectorForId(store.state, id)
   };
   return storeData;
 };
-var UsePuckStoreContext = createContext5(
+var UsePuckStoreContext = createContext6(
   null
 );
 var convertToPickedStore = (store) => {
@@ -5887,12 +7650,12 @@ var convertToPickedStore = (store) => {
   };
 };
 var useRegisterUsePuckStore = (appStore) => {
-  const [usePuckStore] = useState18(
+  const [usePuckStore] = useState19(
     () => createStore4(
       () => generateUsePuck(convertToPickedStore(appStore.getState()))
     )
   );
-  useEffect18(() => {
+  useEffect23(() => {
     return appStore.subscribe(
       (store) => convertToPickedStore(store),
       (pickedStore) => {
@@ -5904,11 +7667,11 @@ var useRegisterUsePuckStore = (appStore) => {
 };
 function createUsePuck() {
   return function usePuck2(selector) {
-    const usePuckApi = useContext10(UsePuckStoreContext);
+    const usePuckApi = useContext11(UsePuckStoreContext);
     if (!usePuckApi) {
       throw new Error("usePuck must be used inside <Puck>.");
     }
-    const result = useStore2(
+    const result = useStore3(
       usePuckApi,
       selector != null ? selector : (s) => s
     );
@@ -5916,7 +7679,7 @@ function createUsePuck() {
   };
 }
 function usePuck() {
-  useEffect18(() => {
+  useEffect23(() => {
     console.warn(
       "You're using the `usePuck` method without a selector, which may cause unnecessary re-renders. Replace with `createUsePuck` and provide a selector for improved performance."
     );
@@ -5924,7 +7687,7 @@ function usePuck() {
   return createUsePuck()((s) => s);
 }
 function useGetPuck() {
-  const usePuckApi = useContext10(UsePuckStoreContext);
+  const usePuckApi = useContext11(UsePuckStoreContext);
   if (!usePuckApi) {
     throw new Error("usePuckGet must be used inside <Puck>.");
   }
@@ -5932,26 +7695,26 @@ function useGetPuck() {
 }
 
 // components/Puck/index.tsx
-import fdeq from "fast-deep-equal";
+import fdeq2 from "fast-deep-equal";
 
 // components/Puck/components/Layout/index.tsx
 init_react_import();
-import { useEffect as useEffect24, useMemo as useMemo20, useState as useState24 } from "react";
+import { useEffect as useEffect29, useMemo as useMemo20, useState as useState25 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Layout/styles.module.css#css-module
 init_react_import();
-var styles_module_default17 = { "Puck": "_Puck_1rc26_19", "Puck-portal": "_Puck-portal_1rc26_31", "PuckLayout-inner": "_PuckLayout-inner_1rc26_36", "PuckLayout--mounted": "_PuckLayout--mounted_1rc26_48", "PuckLayout--leftSideBarVisible": "_PuckLayout--leftSideBarVisible_1rc26_61", "PuckLayout--rightSideBarVisible": "_PuckLayout--rightSideBarVisible_1rc26_69", "PuckLayout-mounted": "_PuckLayout-mounted_1rc26_85", "PuckLayout": "_PuckLayout_1rc26_36", "PuckLayout-nav": "_PuckLayout-nav_1rc26_126", "PuckPluginTab": "_PuckPluginTab_1rc26_131", "PuckPluginTab--visible": "_PuckPluginTab--visible_1rc26_135" };
+var styles_module_default20 = { "Puck": "_Puck_94wda_19", "Puck-portal": "_Puck-portal_94wda_31", "PuckLayout-inner": "_PuckLayout-inner_94wda_36", "PuckLayout--mounted": "_PuckLayout--mounted_94wda_57", "PuckLayout--leftSideBarVisible": "_PuckLayout--leftSideBarVisible_94wda_61", "PuckLayout--rightSideBarVisible": "_PuckLayout--rightSideBarVisible_94wda_69", "PuckLayout-mounted": "_PuckLayout-mounted_94wda_85", "PuckLayout": "_PuckLayout_94wda_36", "PuckLayout-nav": "_PuckLayout-nav_94wda_126", "PuckPluginTab": "_PuckPluginTab_94wda_131", "PuckPluginTab--visible": "_PuckPluginTab--visible_94wda_136" };
 
 // lib/use-inject-css.ts
 init_react_import();
-import { useEffect as useEffect19, useState as useState19 } from "react";
+import { useEffect as useEffect24, useState as useState20 } from "react";
 var styles = ``;
 var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
-  const [el, setEl] = useState19();
-  useEffect19(() => {
+  const [el, setEl] = useState20();
+  useEffect24(() => {
     setEl(document.createElement("style"));
   }, []);
-  useEffect19(() => {
+  useEffect24(() => {
     var _a;
     if (!el || typeof window === "undefined") {
       return;
@@ -5971,15 +7734,15 @@ var useInjectGlobalCss = (iframeEnabled) => {
 
 // components/DefaultOverride/index.tsx
 init_react_import();
-import { Fragment as Fragment13, jsx as jsx35 } from "react/jsx-runtime";
-var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx35(Fragment13, { children });
+import { Fragment as Fragment13, jsx as jsx37 } from "react/jsx-runtime";
+var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx37(Fragment13, { children });
 
 // 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",
@@ -5994,18 +7757,18 @@ var usePreviewModeHotkeys = () => {
 
 // components/Puck/components/Header/index.tsx
 init_react_import();
-import { memo as memo5, useCallback as useCallback16, useMemo as useMemo15, useState as useState20 } from "react";
+import { memo as memo6, useCallback as useCallback17, useMemo as useMemo15, useState as useState21 } 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_default18 = { "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_default21 = { "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 jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
-var getClassName23 = get_class_name_factory_default("MenuBar", styles_module_default18);
+import { Fragment as Fragment14, jsx as jsx38, jsxs as jsxs15 } from "react/jsx-runtime";
+var getClassName26 = get_class_name_factory_default("MenuBar", styles_module_default21);
 function MenuBar({
   menuOpen = false,
   renderHeaderActions,
@@ -6015,10 +7778,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__ */ jsx36(
+  return /* @__PURE__ */ jsx38(
     "div",
     {
-      className: getClassName23({ menuOpen }),
+      className: getClassName26({ menuOpen }),
       onClick: (event) => {
         var _a;
         const element = event.target;
@@ -6029,30 +7792,30 @@ function MenuBar({
           setMenuOpen(false);
         }
       },
-      children: /* @__PURE__ */ jsxs15("div", { className: getClassName23("inner"), children: [
-        /* @__PURE__ */ jsxs15("div", { className: getClassName23("history"), children: [
-          /* @__PURE__ */ jsx36(
+      children: /* @__PURE__ */ jsxs15("div", { className: getClassName26("inner"), children: [
+        /* @__PURE__ */ jsxs15("div", { className: getClassName26("history"), children: [
+          /* @__PURE__ */ jsx38(
             IconButton,
             {
               type: "button",
               title: "undo",
               disabled: !hasPast,
               onClick: back,
-              children: /* @__PURE__ */ jsx36(Undo2, { size: 21 })
+              children: /* @__PURE__ */ jsx38(Undo2, { size: 21 })
             }
           ),
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx38(
             IconButton,
             {
               type: "button",
               title: "redo",
               disabled: !hasFuture,
               onClick: forward,
-              children: /* @__PURE__ */ jsx36(Redo2, { size: 21 })
+              children: /* @__PURE__ */ jsx38(Redo2, { size: 21 })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx36(Fragment14, { children: renderHeaderActions && renderHeaderActions() })
+        /* @__PURE__ */ jsx38(Fragment14, { children: renderHeaderActions && renderHeaderActions() })
       ] })
     }
   );
@@ -6060,11 +7823,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_default19 = { "PuckHeader": "_PuckHeader_1ehbp_1", "PuckHeader-inner": "_PuckHeader-inner_1ehbp_16", "PuckHeader-toggle": "_PuckHeader-toggle_1ehbp_33", "PuckHeader--rightSideBarVisible": "_PuckHeader--rightSideBarVisible_1ehbp_40", "PuckHeader-rightSideBarToggle": "_PuckHeader-rightSideBarToggle_1ehbp_40", "PuckHeader--leftSideBarVisible": "_PuckHeader--leftSideBarVisible_1ehbp_41", "PuckHeader-leftSideBarToggle": "_PuckHeader-leftSideBarToggle_1ehbp_41", "PuckHeader-title": "_PuckHeader-title_1ehbp_45", "PuckHeader-path": "_PuckHeader-path_1ehbp_49", "PuckHeader-tools": "_PuckHeader-tools_1ehbp_56", "PuckHeader-menuButton": "_PuckHeader-menuButton_1ehbp_62", "PuckHeader--menuOpen": "_PuckHeader--menuOpen_1ehbp_67" };
+var styles_module_default22 = { "PuckHeader": "_PuckHeader_1ehbp_1", "PuckHeader-inner": "_PuckHeader-inner_1ehbp_16", "PuckHeader-toggle": "_PuckHeader-toggle_1ehbp_33", "PuckHeader--rightSideBarVisible": "_PuckHeader--rightSideBarVisible_1ehbp_40", "PuckHeader-rightSideBarToggle": "_PuckHeader-rightSideBarToggle_1ehbp_40", "PuckHeader--leftSideBarVisible": "_PuckHeader--leftSideBarVisible_1ehbp_41", "PuckHeader-leftSideBarToggle": "_PuckHeader-leftSideBarToggle_1ehbp_41", "PuckHeader-title": "_PuckHeader-title_1ehbp_45", "PuckHeader-path": "_PuckHeader-path_1ehbp_49", "PuckHeader-tools": "_PuckHeader-tools_1ehbp_56", "PuckHeader-menuButton": "_PuckHeader-menuButton_1ehbp_62", "PuckHeader--menuOpen": "_PuckHeader--menuOpen_1ehbp_67" };
 
 // components/Puck/components/Header/index.tsx
-import { Fragment as Fragment15, jsx as jsx37, jsxs as jsxs16 } from "react/jsx-runtime";
-var getClassName24 = get_class_name_factory_default("PuckHeader", styles_module_default19);
+import { Fragment as Fragment15, jsx as jsx39, jsxs as jsxs16 } from "react/jsx-runtime";
+var getClassName27 = get_class_name_factory_default("PuckHeader", styles_module_default22);
 var HeaderInner = () => {
   const {
     onPublish,
@@ -6085,7 +7848,7 @@ var HeaderInner = () => {
         var _b = _a, { actions } = _b, props = __objRest(_b, ["actions"]);
         const Comp = renderHeader;
         const appState = useAppStore((s) => s.state);
-        return /* @__PURE__ */ jsx37(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
+        return /* @__PURE__ */ jsx39(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
       };
       return RenderHeader;
     }
@@ -6099,19 +7862,19 @@ var HeaderInner = () => {
       const RenderHeader = (props) => {
         const Comp = renderHeaderActions;
         const appState = useAppStore((s) => s.state);
-        return /* @__PURE__ */ jsx37(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
+        return /* @__PURE__ */ jsx39(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] = useState20(false);
+  const [menuOpen, setMenuOpen] = useState21(false);
   const rootTitle = useAppStore((s) => {
     var _a, _b;
     const rootData = (_a = s.state.indexes.nodes["root"]) == null ? void 0 : _a.data;
@@ -6121,7 +7884,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;
@@ -6135,27 +7898,27 @@ var HeaderInner = () => {
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx39(
     CustomHeader,
     {
-      actions: /* @__PURE__ */ jsx37(Fragment15, { children: /* @__PURE__ */ jsx37(CustomHeaderActions, { children: /* @__PURE__ */ jsx37(
+      actions: /* @__PURE__ */ jsx39(Fragment15, { children: /* @__PURE__ */ jsx39(CustomHeaderActions, { children: /* @__PURE__ */ jsx39(
         Button,
         {
           onClick: () => {
             const data = appStore.getState().state.data;
             onPublish && onPublish(data);
           },
-          icon: /* @__PURE__ */ jsx37(Globe, { size: "14px" }),
+          icon: /* @__PURE__ */ jsx39(Globe, { size: "14px" }),
           children: "Publish"
         }
       ) }) }),
-      children: /* @__PURE__ */ jsx37(
+      children: /* @__PURE__ */ jsx39(
         "header",
         {
-          className: getClassName24({ leftSideBarVisible, rightSideBarVisible }),
-          children: /* @__PURE__ */ jsxs16("div", { className: getClassName24("inner"), children: [
-            /* @__PURE__ */ jsxs16("div", { className: getClassName24("toggle"), children: [
-              /* @__PURE__ */ jsx37("div", { className: getClassName24("leftSideBarToggle"), children: /* @__PURE__ */ jsx37(
+          className: getClassName27({ leftSideBarVisible, rightSideBarVisible }),
+          children: /* @__PURE__ */ jsxs16("div", { className: getClassName27("inner"), children: [
+            /* @__PURE__ */ jsxs16("div", { className: getClassName27("toggle"), children: [
+              /* @__PURE__ */ jsx39("div", { className: getClassName27("leftSideBarToggle"), children: /* @__PURE__ */ jsx39(
                 IconButton,
                 {
                   type: "button",
@@ -6163,10 +7926,10 @@ var HeaderInner = () => {
                     toggleSidebars("left");
                   },
                   title: "Toggle left sidebar",
-                  children: /* @__PURE__ */ jsx37(PanelLeft, { focusable: "false" })
+                  children: /* @__PURE__ */ jsx39(PanelLeft, { focusable: "false" })
                 }
               ) }),
-              /* @__PURE__ */ jsx37("div", { className: getClassName24("rightSideBarToggle"), children: /* @__PURE__ */ jsx37(
+              /* @__PURE__ */ jsx39("div", { className: getClassName27("rightSideBarToggle"), children: /* @__PURE__ */ jsx39(
                 IconButton,
                 {
                   type: "button",
@@ -6174,19 +7937,19 @@ var HeaderInner = () => {
                     toggleSidebars("right");
                   },
                   title: "Toggle right sidebar",
-                  children: /* @__PURE__ */ jsx37(PanelRight, { focusable: "false" })
+                  children: /* @__PURE__ */ jsx39(PanelRight, { focusable: "false" })
                 }
               ) })
             ] }),
-            /* @__PURE__ */ jsx37("div", { className: getClassName24("title"), children: /* @__PURE__ */ jsxs16(Heading, { rank: "2", size: "xs", children: [
+            /* @__PURE__ */ jsx39("div", { className: getClassName27("title"), children: /* @__PURE__ */ jsxs16(Heading, { rank: "2", size: "xs", children: [
               headerTitle || rootTitle || "Page",
               headerPath && /* @__PURE__ */ jsxs16(Fragment15, { children: [
                 " ",
-                /* @__PURE__ */ jsx37("code", { className: getClassName24("path"), children: headerPath })
+                /* @__PURE__ */ jsx39("code", { className: getClassName27("path"), children: headerPath })
               ] })
             ] }) }),
-            /* @__PURE__ */ jsxs16("div", { className: getClassName24("tools"), children: [
-              /* @__PURE__ */ jsx37("div", { className: getClassName24("menuButton"), children: /* @__PURE__ */ jsx37(
+            /* @__PURE__ */ jsxs16("div", { className: getClassName27("tools"), children: [
+              /* @__PURE__ */ jsx39("div", { className: getClassName27("menuButton"), children: /* @__PURE__ */ jsx39(
                 IconButton,
                 {
                   type: "button",
@@ -6194,23 +7957,23 @@ var HeaderInner = () => {
                     return setMenuOpen(!menuOpen);
                   },
                   title: "Toggle menu bar",
-                  children: menuOpen ? /* @__PURE__ */ jsx37(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx37(ChevronDown, { focusable: "false" })
+                  children: menuOpen ? /* @__PURE__ */ jsx39(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx39(ChevronDown, { focusable: "false" })
                 }
               ) }),
-              /* @__PURE__ */ jsx37(
+              /* @__PURE__ */ jsx39(
                 MenuBar,
                 {
                   dispatch,
                   onPublish,
                   menuOpen,
-                  renderHeaderActions: () => /* @__PURE__ */ jsx37(CustomHeaderActions, { children: /* @__PURE__ */ jsx37(
+                  renderHeaderActions: () => /* @__PURE__ */ jsx39(CustomHeaderActions, { children: /* @__PURE__ */ jsx39(
                     Button,
                     {
                       onClick: () => {
                         const data = appStore.getState().state.data;
                         onPublish && onPublish(data);
                       },
-                      icon: /* @__PURE__ */ jsx37(Globe, { size: "14px" }),
+                      icon: /* @__PURE__ */ jsx39(Globe, { size: "14px" }),
                       children: "Publish"
                     }
                   ) }),
@@ -6224,14 +7987,14 @@ var HeaderInner = () => {
     }
   );
 };
-var Header = memo5(HeaderInner);
+var Header = memo6(HeaderInner);
 
 // components/SidebarSection/index.tsx
 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_default20 = { "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_default23 = { "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();
@@ -6278,8 +8041,8 @@ var useBreadcrumbs = (renderCount) => {
 };
 
 // components/SidebarSection/index.tsx
-import { jsx as jsx38, jsxs as jsxs17 } from "react/jsx-runtime";
-var getClassName25 = get_class_name_factory_default("SidebarSection", styles_module_default20);
+import { jsx as jsx40, jsxs as jsxs17 } from "react/jsx-runtime";
+var getClassName28 = get_class_name_factory_default("SidebarSection", styles_module_default23);
 var SidebarSection = ({
   children,
   title,
@@ -6294,26 +8057,26 @@ var SidebarSection = ({
   return /* @__PURE__ */ jsxs17(
     "div",
     {
-      className: getClassName25({ noBorderTop, noPadding }),
+      className: getClassName28({ noBorderTop, noPadding }),
       style: { background },
       children: [
-        /* @__PURE__ */ jsx38("div", { className: getClassName25("title"), children: /* @__PURE__ */ jsxs17("div", { className: getClassName25("breadcrumbs"), children: [
-          showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs17("div", { className: getClassName25("breadcrumb"), children: [
-            /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx40("div", { className: getClassName28("title"), children: /* @__PURE__ */ jsxs17("div", { className: getClassName28("breadcrumbs"), children: [
+          showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs17("div", { className: getClassName28("breadcrumb"), children: [
+            /* @__PURE__ */ jsx40(
               "button",
               {
                 type: "button",
-                className: getClassName25("breadcrumbLabel"),
+                className: getClassName28("breadcrumbLabel"),
                 onClick: () => setUi({ itemSelector: breadcrumb.selector }),
                 children: breadcrumb.label
               }
             ),
-            /* @__PURE__ */ jsx38(ChevronRight, { size: 16 })
+            /* @__PURE__ */ jsx40(ChevronRight, { size: 16 })
           ] }, i)) : null,
-          /* @__PURE__ */ jsx38("div", { className: getClassName25("heading"), children: /* @__PURE__ */ jsx38(Heading, { rank: "2", size: "xs", children: title }) })
+          /* @__PURE__ */ jsx40("div", { className: getClassName28("heading"), children: /* @__PURE__ */ jsx40(Heading, { rank: "2", size: "xs", children: title }) })
         ] }) }),
-        /* @__PURE__ */ jsx38("div", { className: getClassName25("content"), children }),
-        isLoading && /* @__PURE__ */ jsx38("div", { className: getClassName25("loadingOverlay"), children: /* @__PURE__ */ jsx38(Loader, { size: 32 }) })
+        /* @__PURE__ */ jsx40("div", { className: getClassName28("content"), children }),
+        isLoading && /* @__PURE__ */ jsx40("div", { className: getClassName28("loadingOverlay"), children: /* @__PURE__ */ jsx40(Loader, { size: 32 }) })
       ]
     }
   );
@@ -6322,30 +8085,30 @@ var SidebarSection = ({
 // components/Puck/components/Canvas/index.tsx
 init_react_import();
 import {
-  useCallback as useCallback17,
-  useEffect as useEffect21,
+  useCallback as useCallback18,
+  useEffect as useEffect26,
   useMemo as useMemo19,
-  useRef as useRef8,
-  useState as useState22
+  useRef as useRef9,
+  useState as useState23
 } from "react";
 
 // components/ViewportControls/index.tsx
 init_react_import();
-import { useEffect as useEffect20, useMemo as useMemo17, useState as useState21 } from "react";
+import { useEffect as useEffect25, useMemo as useMemo17, useState as useState22 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
 init_react_import();
-var styles_module_default21 = { "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_default24 = { "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 jsx39, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs18 } from "react/jsx-runtime";
 var icons = {
-  Smartphone: /* @__PURE__ */ jsx39(Smartphone, { size: 16 }),
-  Tablet: /* @__PURE__ */ jsx39(Tablet, { size: 16 }),
-  Monitor: /* @__PURE__ */ jsx39(Monitor, { size: 16 })
+  Smartphone: /* @__PURE__ */ jsx41(Smartphone, { size: 16 }),
+  Tablet: /* @__PURE__ */ jsx41(Tablet, { size: 16 }),
+  Monitor: /* @__PURE__ */ jsx41(Monitor, { size: 16 })
 };
-var getClassName26 = get_class_name_factory_default("ViewportControls", styles_module_default21);
-var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default21);
+var getClassName29 = get_class_name_factory_default("ViewportControls", styles_module_default24);
+var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default24);
 var ViewportButton = ({
   children,
   height = "auto",
@@ -6354,11 +8117,11 @@ var ViewportButton = ({
   onClick
 }) => {
   const viewports = useAppStore((s) => s.state.ui.viewports);
-  const [isActive, setIsActive] = useState21(false);
-  useEffect20(() => {
+  const [isActive, setIsActive] = useState22(false);
+  useEffect25(() => {
     setIsActive(width === viewports.current.width);
   }, [width, viewports.current.width]);
-  return /* @__PURE__ */ jsx39("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx41("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx41(
     IconButton,
     {
       type: "button",
@@ -6368,7 +8131,7 @@ var ViewportButton = ({
         e.stopPropagation();
         onClick({ width, height });
       },
-      children: /* @__PURE__ */ jsx39("span", { className: getClassNameButton("inner"), children })
+      children: /* @__PURE__ */ jsx41("span", { className: getClassNameButton("inner"), children })
     }
   ) });
 };
@@ -6404,8 +8167,8 @@ var ViewportControls = ({
     ].filter((a) => a.value <= autoZoom).sort((a, b) => a.value > b.value ? 1 : -1),
     [autoZoom]
   );
-  return /* @__PURE__ */ jsxs18("div", { className: getClassName26(), children: [
-    viewports.map((viewport, i) => /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsxs18("div", { className: getClassName29(), children: [
+    viewports.map((viewport, i) => /* @__PURE__ */ jsx41(
       ViewportButton,
       {
         height: viewport.height,
@@ -6416,8 +8179,8 @@ var ViewportControls = ({
       },
       i
     )),
-    /* @__PURE__ */ jsx39("div", { className: getClassName26("divider") }),
-    /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx41("div", { className: getClassName29("divider") }),
+    /* @__PURE__ */ jsx41(
       IconButton,
       {
         type: "button",
@@ -6432,10 +8195,10 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ jsx39(ZoomOut, { size: 16 })
+        children: /* @__PURE__ */ jsx41(ZoomOut, { size: 16 })
       }
     ),
-    /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx41(
       IconButton,
       {
         type: "button",
@@ -6450,19 +8213,19 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ jsx39(ZoomIn, { size: 16 })
+        children: /* @__PURE__ */ jsx41(ZoomIn, { size: 16 })
       }
     ),
-    /* @__PURE__ */ jsx39("div", { className: getClassName26("divider") }),
-    /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx41("div", { className: getClassName29("divider") }),
+    /* @__PURE__ */ jsx41(
       "select",
       {
-        className: getClassName26("zoomSelect"),
+        className: getClassName29("zoomSelect"),
         value: zoom.toString(),
         onChange: (e) => {
           onZoom(parseFloat(e.currentTarget.value));
         },
-        children: zoomOptions.map((option) => /* @__PURE__ */ jsx39(
+        children: zoomOptions.map((option) => /* @__PURE__ */ jsx41(
           "option",
           {
             value: option.value,
@@ -6477,7 +8240,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_default22 = { "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_default25 = { "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 useShallow9 } from "zustand/react/shallow";
@@ -6485,27 +8248,27 @@ import { useShallow as useShallow9 } 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 useMemo18
 } from "react";
-import { jsx as jsx40 } from "react/jsx-runtime";
-var FrameContext = createContext6(null);
+import { jsx as jsx42 } from "react/jsx-runtime";
+var FrameContext = createContext7(null);
 var FrameProvider = ({
   children
 }) => {
-  const frameRef = useRef7(null);
+  const frameRef = useRef8(null);
   const value = useMemo18(
     () => ({
       frameRef
     }),
     []
   );
-  return /* @__PURE__ */ jsx40(FrameContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx42(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");
   }
@@ -6513,8 +8276,8 @@ var useCanvasFrame = () => {
 };
 
 // components/Puck/components/Canvas/index.tsx
-import { Fragment as Fragment16, jsx as jsx41, jsxs as jsxs19 } from "react/jsx-runtime";
-var getClassName27 = get_class_name_factory_default("PuckCanvas", styles_module_default22);
+import { Fragment as Fragment16, jsx as jsx43, jsxs as jsxs19 } from "react/jsx-runtime";
+var getClassName30 = get_class_name_factory_default("PuckCanvas", styles_module_default25);
 var ZOOM_ON_CHANGE = true;
 var TRANSITION_DURATION = 150;
 var Canvas = () => {
@@ -6554,17 +8317,17 @@ var Canvas = () => {
       viewports: s.state.ui.viewports
     }))
   );
-  const [showTransition, setShowTransition] = useState22(false);
-  const isResizingRef = useRef8(false);
+  const [showTransition, setShowTransition] = useState23(false);
+  const isResizingRef = useRef9(false);
   const defaultRender = useMemo19(() => {
-    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx41(Fragment16, { children });
+    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx43(Fragment16, { children });
     return PuckDefault;
   }, []);
   const CustomPreview = useMemo19(
     () => overrides.preview || defaultRender,
     [overrides]
   );
-  const getFrameDimensions = useCallback17(() => {
+  const getFrameDimensions = useCallback18(() => {
     if (frameRef.current) {
       const frame = frameRef.current;
       const box = getBox(frame);
@@ -6572,7 +8335,7 @@ var Canvas = () => {
     }
     return { width: 0, height: 0 };
   }, [frameRef]);
-  useEffect21(() => {
+  useEffect26(() => {
     resetAutoZoom();
   }, [
     frameRef,
@@ -6582,7 +8345,7 @@ var Canvas = () => {
     rightSideBarWidth,
     viewports
   ]);
-  useEffect21(() => {
+  useEffect26(() => {
     const { height: frameHeight } = getFrameDimensions();
     if (viewports.current.height === "auto") {
       setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
@@ -6590,12 +8353,12 @@ var Canvas = () => {
       }));
     }
   }, [zoomConfig.zoom, getFrameDimensions, setZoomConfig]);
-  useEffect21(() => {
+  useEffect26(() => {
     if (ZOOM_ON_CHANGE) {
       resetAutoZoom();
     }
   }, [viewports.current.width, viewports]);
-  useEffect21(() => {
+  useEffect26(() => {
     if (!frameRef.current) return;
     const resizeObserver = new ResizeObserver(() => {
       if (!isResizingRef.current) {
@@ -6607,8 +8370,8 @@ var Canvas = () => {
       resizeObserver.disconnect();
     };
   }, [frameRef.current]);
-  const [showLoader, setShowLoader] = useState22(false);
-  useEffect21(() => {
+  const [showLoader, setShowLoader] = useState23(false);
+  useEffect26(() => {
     setTimeout(() => {
       setShowLoader(true);
     }, 500);
@@ -6616,7 +8379,7 @@ var Canvas = () => {
   return /* @__PURE__ */ jsxs19(
     "div",
     {
-      className: getClassName27({
+      className: getClassName30({
         ready: status === "READY" || !iframe.enabled || !iframe.waitForStyles,
         showLoader
       }),
@@ -6631,7 +8394,7 @@ var Canvas = () => {
         }
       },
       children: [
-        viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx41("div", { className: getClassName27("controls"), children: /* @__PURE__ */ jsx41(
+        viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx43("div", { className: getClassName30("controls"), children: /* @__PURE__ */ jsx43(
           ViewportControls,
           {
             autoZoom: zoomConfig.autoZoom,
@@ -6661,11 +8424,11 @@ var Canvas = () => {
             }
           }
         ) }),
-        /* @__PURE__ */ jsxs19("div", { className: getClassName27("inner"), ref: frameRef, children: [
-          /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsxs19("div", { className: getClassName30("inner"), ref: frameRef, children: [
+          /* @__PURE__ */ jsx43(
             "div",
             {
-              className: getClassName27("root"),
+              className: getClassName30("root"),
               style: {
                 width: iframe.enabled ? viewports.current.width : "100%",
                 height: zoomConfig.rootHeight,
@@ -6679,10 +8442,10 @@ var Canvas = () => {
                 setShowTransition(false);
                 isResizingRef.current = false;
               },
-              children: /* @__PURE__ */ jsx41(CustomPreview, { children: /* @__PURE__ */ jsx41(Preview2, {}) })
+              children: /* @__PURE__ */ jsx43(CustomPreview, { children: /* @__PURE__ */ jsx43(Preview2, {}) })
             }
           ),
-          /* @__PURE__ */ jsx41("div", { className: getClassName27("loader"), children: /* @__PURE__ */ jsx41(Loader, { size: 24 }) })
+          /* @__PURE__ */ jsx43("div", { className: getClassName30("loader"), children: /* @__PURE__ */ jsx43(Loader, { size: 24 }) })
         ] })
       ]
     }
@@ -6691,14 +8454,14 @@ var Canvas = () => {
 
 // lib/use-sidebar-resize.ts
 init_react_import();
-import { useCallback as useCallback18, useEffect as useEffect22, useRef as useRef9, useState as useState23 } from "react";
+import { useCallback as useCallback19, useEffect as useEffect27, useRef as useRef10, useState as useState24 } from "react";
 function useSidebarResize(position, dispatch) {
-  const [width, setWidth] = useState23(null);
-  const sidebarRef = useRef9(null);
+  const [width, setWidth] = useState24(null);
+  const sidebarRef = useRef10(null);
   const storeWidth = useAppStore(
     (s) => position === "left" ? s.state.ui.leftSideBarWidth : s.state.ui.rightSideBarWidth
   );
-  useEffect22(() => {
+  useEffect27(() => {
     if (typeof window !== "undefined" && !storeWidth) {
       try {
         const savedWidths = localStorage.getItem("puck-sidebar-widths");
@@ -6723,12 +8486,12 @@ function useSidebarResize(position, dispatch) {
       }
     }
   }, [dispatch, position, storeWidth]);
-  useEffect22(() => {
+  useEffect27(() => {
     if (storeWidth !== void 0) {
       setWidth(storeWidth);
     }
   }, [storeWidth]);
-  const handleResizeEnd = useCallback18(
+  const handleResizeEnd = useCallback19(
     (width2) => {
       dispatch({
         type: "setUi",
@@ -6775,15 +8538,15 @@ init_react_import();
 
 // components/Puck/components/ResizeHandle/index.tsx
 init_react_import();
-import { useCallback as useCallback19, useRef as useRef10 } from "react";
+import { useCallback as useCallback20, useRef as useRef11 } 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_default26 = { "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 jsx42 } from "react/jsx-runtime";
-var getClassName28 = get_class_name_factory_default("ResizeHandle", styles_module_default23);
+import { jsx as jsx44 } from "react/jsx-runtime";
+var getClassName31 = get_class_name_factory_default("ResizeHandle", styles_module_default26);
 var ResizeHandle = ({
   position,
   sidebarRef,
@@ -6792,11 +8555,11 @@ var ResizeHandle = ({
 }) => {
   const { frameRef } = useCanvasFrame();
   const resetAutoZoom = useResetAutoZoom(frameRef);
-  const handleRef = useRef10(null);
-  const isDragging = useRef10(false);
-  const startX = useRef10(0);
-  const startWidth = useRef10(0);
-  const handleMouseMove = useCallback19(
+  const handleRef = useRef11(null);
+  const isDragging = useRef11(false);
+  const startX = useRef11(0);
+  const startWidth = useRef11(0);
+  const handleMouseMove = useCallback20(
     (e) => {
       if (!isDragging.current) return;
       const delta = e.clientX - startX.current;
@@ -6807,7 +8570,7 @@ var ResizeHandle = ({
     },
     [onResize, position]
   );
-  const handleMouseUp = useCallback19(() => {
+  const handleMouseUp = useCallback20(() => {
     var _a;
     if (!isDragging.current) return;
     isDragging.current = false;
@@ -6823,7 +8586,7 @@ var ResizeHandle = ({
     onResizeEnd(finalWidth);
     resetAutoZoom();
   }, [onResizeEnd]);
-  const handleMouseDown = useCallback19(
+  const handleMouseDown = useCallback20(
     (e) => {
       var _a;
       isDragging.current = true;
@@ -6841,11 +8604,11 @@ var ResizeHandle = ({
     },
     [position, handleMouseMove, handleMouseUp]
   );
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx44(
     "div",
     {
       ref: handleRef,
-      className: getClassName28({ [position]: true }),
+      className: getClassName31({ [position]: true }),
       onMouseDown: handleMouseDown
     }
   );
@@ -6853,24 +8616,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_2pzs4_1", "Sidebar--left": "_Sidebar--left_2pzs4_8", "Sidebar--right": "_Sidebar--right_2pzs4_15", "Sidebar-resizeHandle": "_Sidebar-resizeHandle_2pzs4_21" };
+var styles_module_default27 = { "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 Fragment17, jsx as jsx43, jsxs as jsxs20 } from "react/jsx-runtime";
-var getClassName29 = get_class_name_factory_default("Sidebar", styles_module_default24);
+import { Fragment as Fragment17, jsx as jsx45, jsxs as jsxs20 } from "react/jsx-runtime";
+var getClassName32 = get_class_name_factory_default("Sidebar", styles_module_default27);
 var Sidebar = ({
   position,
   sidebarRef,
   isVisible,
-  width,
   onResize,
   onResizeEnd,
   children
 }) => {
   if (!isVisible) return null;
   return /* @__PURE__ */ jsxs20(Fragment17, { children: [
-    /* @__PURE__ */ jsx43("div", { ref: sidebarRef, className: getClassName29({ [position]: true }), children }),
-    /* @__PURE__ */ jsx43("div", { className: `${getClassName29("resizeHandle")}`, children: /* @__PURE__ */ jsx43(
+    /* @__PURE__ */ jsx45("div", { ref: sidebarRef, className: getClassName32({ [position]: true }), children }),
+    /* @__PURE__ */ jsx45("div", { className: `${getClassName32("resizeHandle")}`, children: /* @__PURE__ */ jsx45(
       ResizeHandle,
       {
         position,
@@ -6887,13 +8649,13 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Nav/styles.module.css#css-module
 init_react_import();
-var styles_module_default25 = { "Nav-list": "_Nav-list_b6txo_1", "NavSection": "_NavSection_b6txo_7", "Nav--slim": "_Nav--slim_b6txo_15", "NavSection-list": "_NavSection-list_b6txo_24", "NavSection-title": "_NavSection-title_b6txo_36", "NavItem-link": "_NavItem-link_b6txo_47", "NavItem-linkIcon": "_NavItem-linkIcon_b6txo_67", "NavItem--active": "_NavItem--active_b6txo_72", "NavItem": "_NavItem_b6txo_47", "NavItem-list": "_NavItem-list_b6txo_91" };
+var styles_module_default28 = { "Nav-list": "_Nav-list_b6txo_1", "NavSection": "_NavSection_b6txo_7", "Nav--slim": "_Nav--slim_b6txo_15", "NavSection-list": "_NavSection-list_b6txo_24", "NavSection-title": "_NavSection-title_b6txo_36", "NavItem-link": "_NavItem-link_b6txo_47", "NavItem-linkIcon": "_NavItem-linkIcon_b6txo_67", "NavItem--active": "_NavItem--active_b6txo_72", "NavItem": "_NavItem_b6txo_47", "NavItem-list": "_NavItem-list_b6txo_91" };
 
 // components/Puck/components/Nav/index.tsx
-import { jsx as jsx44, jsxs as jsxs21 } from "react/jsx-runtime";
-var getClassName30 = get_class_name_factory_default("Nav", styles_module_default25);
-var getClassNameSection = get_class_name_factory_default("NavSection", styles_module_default25);
-var getClassNameItem3 = get_class_name_factory_default("NavItem", styles_module_default25);
+import { jsx as jsx46, jsxs as jsxs21 } from "react/jsx-runtime";
+var getClassName33 = get_class_name_factory_default("Nav", styles_module_default28);
+var getClassNameSection = get_class_name_factory_default("NavSection", styles_module_default28);
+var getClassNameItem3 = get_class_name_factory_default("NavItem", styles_module_default28);
 var MenuItem = ({
   label,
   icon,
@@ -6904,32 +8666,32 @@ var MenuItem = ({
   const showChildren = isActive;
   return /* @__PURE__ */ jsxs21("li", { className: getClassNameItem3({ active: isActive }), children: [
     onClick && /* @__PURE__ */ jsxs21("div", { className: getClassNameItem3("link"), onClick, children: [
-      icon && /* @__PURE__ */ jsx44("span", { className: getClassNameItem3("linkIcon"), children: icon }),
-      /* @__PURE__ */ jsx44("span", { className: getClassNameItem3("linkLabel"), children: label })
+      icon && /* @__PURE__ */ jsx46("span", { className: getClassNameItem3("linkIcon"), children: icon }),
+      /* @__PURE__ */ jsx46("span", { className: getClassNameItem3("linkLabel"), children: label })
     ] }),
-    items && showChildren && /* @__PURE__ */ jsx44("ul", { className: getClassNameItem3("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ jsx44(MenuItem, __spreadValues({}, item), key)) })
+    items && showChildren && /* @__PURE__ */ jsx46("ul", { className: getClassNameItem3("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ jsx46(MenuItem, __spreadValues({}, item), key)) })
   ] });
 };
 var NavSection = ({ title, items }) => {
   return /* @__PURE__ */ jsxs21("li", { className: getClassNameSection(), children: [
-    title && /* @__PURE__ */ jsx44("div", { className: getClassNameSection("title"), children: title }),
-    /* @__PURE__ */ jsx44("ul", { className: getClassNameSection("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ jsx44(MenuItem, __spreadValues({}, item), key)) })
+    title && /* @__PURE__ */ jsx46("div", { className: getClassNameSection("title"), children: title }),
+    /* @__PURE__ */ jsx46("ul", { className: getClassNameSection("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ jsx46(MenuItem, __spreadValues({}, item), key)) })
   ] });
 };
 var Nav = ({
   navigation,
   slim
 }) => {
-  return /* @__PURE__ */ jsx44("nav", { className: getClassName30({ slim }), children: /* @__PURE__ */ jsx44("ul", { className: getClassName30("list"), children: Object.entries(navigation).map(([key, section]) => {
-    return /* @__PURE__ */ jsx44(NavSection, { title: section.title, items: section.items }, key);
+  return /* @__PURE__ */ jsx46("nav", { className: getClassName33({ slim }), children: /* @__PURE__ */ jsx46("ul", { className: getClassName33("list"), children: Object.entries(navigation).map(([key, section]) => {
+    return /* @__PURE__ */ jsx46(NavSection, { title: section.title, items: section.items }, key);
   }) }) });
 };
 
 // components/Puck/components/Layout/index.tsx
-import { jsx as jsx45, jsxs as jsxs22 } from "react/jsx-runtime";
-var getClassName31 = get_class_name_factory_default("Puck", styles_module_default17);
-var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_module_default17);
-var getPluginTabClassName = get_class_name_factory_default("PuckPluginTab", styles_module_default17);
+import { jsx as jsx47, jsxs as jsxs22 } from "react/jsx-runtime";
+var getClassName34 = get_class_name_factory_default("Puck", styles_module_default20);
+var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_module_default20);
+var getPluginTabClassName = get_class_name_factory_default("PuckPluginTab", styles_module_default20);
 var FieldSideBar = () => {
   const title = useAppStore(
     (s) => {
@@ -6937,13 +8699,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__ */ jsx45(SidebarSection, { noPadding: true, noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx45(Fields, {}) });
+  return /* @__PURE__ */ jsx47(SidebarSection, { noPadding: true, noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx47(Fields, {}) });
 };
 var PluginTab = ({
   children,
   visible
 }) => {
-  return /* @__PURE__ */ jsx45("div", { className: getPluginTabClassName({ visible }), children });
+  return /* @__PURE__ */ jsx47("div", { className: getPluginTabClassName({ visible }), children });
 };
 var Layout = ({ children }) => {
   const {
@@ -6977,7 +8739,7 @@ var Layout = ({ children }) => {
     sidebarRef: rightSidebarRef,
     handleResizeEnd: handleRightSidebarResizeEnd
   } = useSidebarResize("right", dispatch);
-  useEffect24(() => {
+  useEffect29(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -7005,13 +8767,13 @@ var Layout = ({ 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) {
@@ -7020,7 +8782,19 @@ var Layout = ({ children }) => {
     }
   }, [ready, iframe.enabled]);
   usePreviewModeHotkeys();
-  const [view, setView] = useState24();
+  const layoutOptions = {};
+  if (leftWidth) {
+    layoutOptions["--puck-user-left-side-bar-width"] = `${leftWidth}px`;
+  }
+  if (rightWidth) {
+    layoutOptions["--puck-user-right-side-bar-width"] = `${rightWidth}px`;
+  }
+  const setUi = useAppStore((s) => s.setUi);
+  const currentPlugin = useAppStore((s) => {
+    var _a;
+    return (_a = s.state.ui.plugin) == null ? void 0 : _a.current;
+  });
+  const appStoreApi = useAppStoreApi();
   const pluginItems = useMemo20(() => {
     const details = {};
     const defaultPlugins = [blocksPlugin(), outlinePlugin()];
@@ -7033,25 +8807,38 @@ var Layout = ({ children }) => {
         }
         details[plugin.name] = {
           label: (_a = plugin.label) != null ? _a : plugin.name,
-          icon: (_b = plugin.icon) != null ? _b : /* @__PURE__ */ jsx45(ToyBrick, {}),
+          icon: (_b = plugin.icon) != null ? _b : /* @__PURE__ */ jsx47(ToyBrick, {}),
           onClick: () => {
-            setView(plugin.name);
+            if (plugin.name === currentPlugin) {
+              if (leftSideBarVisible) {
+                setUi({ leftSideBarVisible: false });
+              } else {
+                setUi({ leftSideBarVisible: true });
+              }
+            } else {
+              if (plugin.name) {
+                setUi({
+                  plugin: { current: plugin.name },
+                  leftSideBarVisible: true
+                });
+              }
+            }
           },
-          isActive: view === plugin.name,
+          isActive: leftSideBarVisible && currentPlugin === plugin.name,
           render: plugin.render
         };
       }
     });
     return details;
-  }, [plugins, view]);
-  useEffect24(() => {
-    if (!view) {
+  }, [plugins, currentPlugin, appStoreApi, leftSideBarVisible]);
+  useEffect29(() => {
+    if (!currentPlugin) {
       const names = Object.keys(pluginItems);
-      setView(names[0]);
+      setUi({ plugin: { current: names[0] } });
     }
-  }, [pluginItems, view]);
-  return /* @__PURE__ */ jsxs22("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(
+  }, [pluginItems, currentPlugin]);
+  return /* @__PURE__ */ jsxs22("div", { className: `Puck ${getClassName34()}`, children: [
+    /* @__PURE__ */ jsx47(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx47(CustomPuck, { children: children || /* @__PURE__ */ jsx47(FrameProvider, { children: /* @__PURE__ */ jsx47(
       "div",
       {
         className: getLayoutClassName({
@@ -7063,13 +8850,10 @@ var Layout = ({ children }) => {
           "div",
           {
             className: getLayoutClassName("inner"),
-            style: {
-              "--puck-user-left-side-bar-width": `${leftWidth}px`,
-              "--puck-user-right-side-bar-width": `${rightWidth}px`
-            },
+            style: layoutOptions,
             children: [
-              /* @__PURE__ */ jsx45(Header, {}),
-              /* @__PURE__ */ jsx45("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ jsx45(
+              /* @__PURE__ */ jsx47(Header, {}),
+              /* @__PURE__ */ jsx47("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ jsx47(
                 Nav,
                 {
                   slim: true,
@@ -7080,31 +8864,29 @@ var Layout = ({ children }) => {
                   }
                 }
               ) }),
-              /* @__PURE__ */ jsx45(
+              /* @__PURE__ */ jsx47(
                 Sidebar,
                 {
                   position: "left",
                   sidebarRef: leftSidebarRef,
                   isVisible: leftSideBarVisible,
-                  width: leftWidth,
                   onResize: setLeftWidth,
                   onResizeEnd: handleLeftSidebarResizeEnd,
                   children: Object.entries(pluginItems).map(
-                    ([id, { render: Render2 }]) => /* @__PURE__ */ jsx45(PluginTab, { visible: view === id, children: /* @__PURE__ */ jsx45(Render2, {}) }, id)
+                    ([id, { render: Render2 }]) => /* @__PURE__ */ jsx47(PluginTab, { visible: currentPlugin === id, children: /* @__PURE__ */ jsx47(Render2, {}) }, id)
                   )
                 }
               ),
-              /* @__PURE__ */ jsx45(Canvas, {}),
-              /* @__PURE__ */ jsx45(
+              /* @__PURE__ */ jsx47(Canvas, {}),
+              /* @__PURE__ */ jsx47(
                 Sidebar,
                 {
                   position: "right",
                   sidebarRef: rightSidebarRef,
                   isVisible: rightSideBarVisible,
-                  width: rightWidth,
                   onResize: setRightWidth,
                   onResizeEnd: handleRightSidebarResizeEnd,
-                  children: /* @__PURE__ */ jsx45(FieldSideBar, {})
+                  children: /* @__PURE__ */ jsx47(FieldSideBar, {})
                 }
               )
             ]
@@ -7112,17 +8894,17 @@ var Layout = ({ children }) => {
         )
       }
     ) }) }) }),
-    /* @__PURE__ */ jsx45("div", { id: "puck-portal-root", className: getClassName31("portal") })
+    /* @__PURE__ */ jsx47("div", { id: "puck-portal-root", className: getClassName34("portal") })
   ] });
 };
 
 // components/Puck/index.tsx
-import { jsx as jsx46 } from "react/jsx-runtime";
-var propsContext = createContext7({});
+import { jsx as jsx48 } from "react/jsx-runtime";
+var propsContext = createContext8({});
 function PropsProvider(props) {
-  return /* @__PURE__ */ jsx46(propsContext.Provider, { value: props, children: props.children });
+  return /* @__PURE__ */ jsx48(propsContext.Provider, { value: props, children: props.children });
 }
-var usePropsContext = () => useContext12(propsContext);
+var usePropsContext = () => useContext13(propsContext);
 function PuckProvider({ children }) {
   const {
     config,
@@ -7146,7 +8928,7 @@ function PuckProvider({ children }) {
     }, _iframe),
     [_iframe]
   );
-  const [generatedAppState] = useState25(() => {
+  const [generatedAppState] = useState26(() => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
@@ -7206,7 +8988,7 @@ function PuckProvider({ children }) {
     return walkAppState(newAppState, config);
   });
   const { appendData = true } = _initialHistory || {};
-  const [blendedHistories] = useState25(
+  const [blendedHistories] = useState26(
     [
       ...(_initialHistory == null ? void 0 : _initialHistory.histories) || [],
       ...appendData ? [{ state: generatedAppState }] : []
@@ -7234,7 +9016,7 @@ function PuckProvider({ children }) {
     );
     return __spreadValues(__spreadValues({}, pluginFieldTransforms), fieldTransforms);
   }, [fieldTransforms, plugins]);
-  const generateAppStore = useCallback20(
+  const generateAppStore = useCallback21(
     (state) => {
       return {
         state,
@@ -7260,15 +9042,15 @@ function PuckProvider({ children }) {
       loadedFieldTransforms
     ]
   );
-  const [appStore] = useState25(
+  const [appStore] = useState26(
     () => createAppStore(generateAppStore(initialAppState))
   );
-  useEffect25(() => {
+  useEffect30(() => {
     if (process.env.NODE_ENV !== "production") {
       window.__PUCK_INTERNAL_DO_NOT_USE = { appStore };
     }
   }, [appStore]);
-  useEffect25(() => {
+  useEffect30(() => {
     const state = appStore.getState().state;
     appStore.setState(__spreadValues({}, generateAppStore(state)));
   }, [config, plugins, loadedOverrides, viewports, iframe, onAction, metadata]);
@@ -7277,13 +9059,13 @@ function PuckProvider({ children }) {
     index: initialHistoryIndex,
     initialAppState
   });
-  const previousData = useRef11(null);
-  useEffect25(() => {
+  const previousData = useRef12(null);
+  useEffect30(() => {
     appStore.subscribe(
       (s) => s.state.data,
       (data) => {
         if (onChange) {
-          if (fdeq(data, previousData.current)) return;
+          if (fdeq2(data, previousData.current)) return;
           onChange(data);
           previousData.current = data;
         }
@@ -7292,14 +9074,14 @@ function PuckProvider({ children }) {
   }, []);
   useRegisterPermissionsSlice(appStore, permissions);
   const uPuckStore = useRegisterUsePuckStore(appStore);
-  useEffect25(() => {
+  useEffect30(() => {
     const { resolveAndCommitData } = appStore.getState();
     resolveAndCommitData();
   }, []);
-  return /* @__PURE__ */ jsx46(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx46(UsePuckStoreContext.Provider, { value: uPuckStore, children }) });
+  return /* @__PURE__ */ jsx48(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx48(UsePuckStoreContext.Provider, { value: uPuckStore, children }) });
 }
 function Puck(props) {
-  return /* @__PURE__ */ jsx46(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx46(PuckProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx46(Layout, { children: props.children }) })) }));
+  return /* @__PURE__ */ jsx48(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx48(PuckProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx48(Layout, { children: props.children }) })) }));
 }
 Puck.Components = Components;
 Puck.Fields = Fields;
@@ -7308,18 +9090,18 @@ Puck.Preview = Preview2;
 
 // lib/default-plugins.tsx
 init_react_import();
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var blocksPlugin = () => ({
   name: "blocks",
   label: "Blocks",
   render: Components,
-  icon: /* @__PURE__ */ jsx47(Hammer, {})
+  icon: /* @__PURE__ */ jsx49(Hammer, {})
 });
 var outlinePlugin = () => ({
   name: "outline",
   label: "Outline",
   render: Outline,
-  icon: /* @__PURE__ */ jsx47(Layers, {})
+  icon: /* @__PURE__ */ jsx49(Layers, {})
 });
 
 export {
@@ -7334,6 +9116,8 @@ export {
   AutoField,
   renderContext,
   Render,
+  registerOverlayPortal,
+  setDeep,
   DropZone,
   Drawer,
   createUsePuck,
@@ -7345,6 +9129,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