@measured/puck 0.20.0-canary.8909f8cc → 0.20.0-canary.8f2f0f46

package/dist/{chunk-EMTLDPBH.mjs → chunk-5PAQR6UC.mjs}

@@ -12,17 +12,19 @@ import {
   defaultViewports,
   expandNode,
   getChanged,
+  getSlotTransform,
   init_react_import,
   resolveComponentData,
   rootAreaId,
   rootDroppableId,
   rootZone,
   setupZone,
+  useFieldTransforms,
   useSlots,
   walkAppState,
   walkField,
   walkTree
-} from "./chunk-32MJ3X3H.mjs";
+} from "./chunk-HUKJ36SA.mjs";
 
 // ../../node_modules/classnames/index.js
 var require_classnames = __commonJS({
@@ -93,8 +95,9 @@ var overrideKeys = [
   "headerActions",
   "fields",
   "fieldLabel",
-  "components",
-  "componentItem",
+  "drawer",
+  "drawerItem",
+  "componentOverlay",
   "outline",
   "puck",
   "preview"
@@ -210,7 +213,6 @@ var replace = (list, index, newItem) => {
 
 // lib/use-reset-auto-zoom.ts
 init_react_import();
-import { useCallback as useCallback2 } from "react";
 
 // store/index.ts
 init_react_import();
@@ -1271,7 +1273,8 @@ var createAppStore = (initialAppStore) => create2()(
       },
       status: "LOADING",
       iframe: {},
-      metadata: {}
+      metadata: {},
+      fieldTransforms: {}
     }, initialAppStore), {
       fields: createFieldsSlice(set, get),
       history: createHistorySlice(set, get),
@@ -1587,56 +1590,18 @@ var getZoomConfig = (uiViewport, frame, zoom) => {
 };
 
 // lib/use-reset-auto-zoom.ts
-import { useShallow } from "zustand/react/shallow";
 var useResetAutoZoom = (frameRef) => {
-  const { viewports, zoomConfig, setZoomConfig } = useAppStore(
-    useShallow((s) => ({
-      viewports: s.state.ui.viewports,
-      zoomConfig: s.zoomConfig,
-      setZoomConfig: s.setZoomConfig
-    }))
-  );
-  const resetAutoZoom = useCallback2(
-    (options) => {
-      const newViewports = (options == null ? void 0 : options.viewports) || viewports;
-      if (!(options == null ? void 0 : options.isResettingRef)) {
-        if (frameRef.current) {
-          setZoomConfig(
-            getZoomConfig(
-              newViewports == null ? void 0 : newViewports.current,
-              frameRef.current,
-              zoomConfig.zoom
-            )
-          );
-        }
-        return;
-      }
-      const {
-        isResettingRef,
-        setShowTransition,
-        showTransition = false
-      } = options;
-      if (!isResettingRef.current) {
-        isResettingRef.current = true;
-        if (setShowTransition) {
-          setShowTransition(showTransition);
-        }
-        if (frameRef.current) {
-          setZoomConfig(
-            getZoomConfig(
-              newViewports == null ? void 0 : newViewports.current,
-              frameRef.current,
-              zoomConfig.zoom
-            )
-          );
-        }
-        setTimeout(() => {
-          isResettingRef.current = false;
-        }, 0);
-      }
-    },
-    [frameRef, zoomConfig, viewports, setZoomConfig]
-  );
+  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;
 };
 
@@ -1817,11 +1782,11 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css#css-module
 init_react_import();
-var styles_module_default3 = { "InputWrapper": "_InputWrapper_py9hf_1", "Input-label": "_Input-label_py9hf_5", "Input-labelIcon": "_Input-labelIcon_py9hf_14", "Input-disabledIcon": "_Input-disabledIcon_py9hf_21", "Input-input": "_Input-input_py9hf_26", "Input": "_Input_py9hf_1", "Input--readOnly": "_Input--readOnly_py9hf_76", "Input-radioGroupItems": "_Input-radioGroupItems_py9hf_87", "Input-radio": "_Input-radio_py9hf_87", "Input-radioInner": "_Input-radioInner_py9hf_104", "Input-radioInput": "_Input-radioInput_py9hf_149" };
+var styles_module_default3 = { "InputWrapper": "_InputWrapper_bsxfo_1", "Input-label": "_Input-label_bsxfo_5", "Input-labelIcon": "_Input-labelIcon_bsxfo_14", "Input-disabledIcon": "_Input-disabledIcon_bsxfo_21", "Input-input": "_Input-input_bsxfo_26", "Input": "_Input_bsxfo_1", "Input--readOnly": "_Input--readOnly_bsxfo_82", "Input-radioGroupItems": "_Input-radioGroupItems_bsxfo_93", "Input-radio": "_Input-radio_bsxfo_93", "Input-radioInner": "_Input-radioInner_bsxfo_110", "Input-radioInput": "_Input-radioInput_bsxfo_155" };
 
 // components/AutoField/index.tsx
 import {
-  useCallback as useCallback5,
+  useCallback as useCallback4,
   useContext as useContext3,
   useEffect as useEffect10,
   useMemo as useMemo3,
@@ -2169,7 +2134,7 @@ var ZoomOut = createLucideIcon("ZoomOut", [
 init_react_import();
 
 // components/AutoField/fields/ArrayField/index.tsx
-import { useCallback as useCallback3, useEffect as useEffect6, useRef, useState as useState4 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect6, useRef, useState as useState4 } from "react";
 
 // components/DragIcon/index.tsx
 init_react_import();
@@ -2697,7 +2662,7 @@ var ArrayField = ({
     setLocalState({ arrayState: _arrayState, value });
   }, [value]);
   const appStore = useAppStoreApi();
-  const mapArrayStateToUi = useCallback3(
+  const mapArrayStateToUi = useCallback2(
     (partialArrayState) => {
       const state = appStore.getState().state;
       return {
@@ -2708,13 +2673,13 @@ var ArrayField = ({
     },
     [arrayState, appStore]
   );
-  const getHighestIndex = useCallback3(() => {
+  const getHighestIndex = useCallback2(() => {
     return arrayState.items.reduce(
       (acc, item) => item._originalIndex > acc ? item._originalIndex : acc,
       -1
     );
   }, [arrayState]);
-  const regenerateArrayState = useCallback3(
+  const regenerateArrayState = useCallback2(
     (value2) => {
       let highestIndex = getHighestIndex();
       const newItems = Array.from(value2 || []).map((item, idx) => {
@@ -2745,14 +2710,19 @@ var ArrayField = ({
   );
   const forceReadOnly = !canEdit;
   const valueRef = useRef(value);
-  const uniqifyItem = useCallback3(
+  const uniqifyItem = useCallback2(
     (val) => {
       if (field.type !== "array" || !field.arrayFields) return;
       const config = appStore.getState().config;
       return walkField({
         value: val,
         fields: field.arrayFields,
-        map: (content) => content.map((item) => populateIds(item, config, true)),
+        mappers: {
+          slot: ({ value: value2 }) => {
+            const content = value2;
+            return content.map((item) => populateIds(item, config, true));
+          }
+        },
         config
       });
     },
@@ -2907,49 +2877,51 @@ var ArrayField = ({
                                 ]
                               }
                             ),
-                            /* @__PURE__ */ jsx8("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ jsx8("fieldset", { className: getClassNameItem("fieldset"), children: Object.keys(field.arrayFields).map((subName) => {
-                              const subField = field.arrayFields[subName];
-                              const indexName = `${name}[${i}]`;
-                              const subPath = `${indexName}.${subName}`;
-                              const localIndexName = `${localName}[${i}]`;
-                              const localWildcardName = `${localName}[*]`;
-                              const localSubPath = `${localIndexName}.${subName}`;
-                              const localWildcardSubPath = `${localWildcardName}.${subName}`;
-                              const subReadOnly = forceReadOnly ? forceReadOnly : typeof readOnlyFields[subPath] !== "undefined" ? readOnlyFields[localSubPath] : readOnlyFields[localWildcardSubPath];
-                              const label2 = subField.label || subName;
-                              return /* @__PURE__ */ jsx8(
-                                NestedFieldProvider,
-                                {
-                                  name: localIndexName,
-                                  wildcardName: localWildcardName,
-                                  subName,
-                                  readOnlyFields,
-                                  children: /* @__PURE__ */ jsx8(
-                                    AutoFieldPrivate,
-                                    {
-                                      name: subPath,
-                                      label: label2,
-                                      id: `${_arrayId}_${subName}`,
-                                      readOnly: subReadOnly,
-                                      field: __spreadProps(__spreadValues({}, subField), {
-                                        label: label2
-                                        // May be used by custom fields
-                                      }),
-                                      value: data[subName],
-                                      onChange: (val, ui) => {
-                                        onChange(
-                                          replace(value, i, __spreadProps(__spreadValues({}, data), {
-                                            [subName]: val
-                                          })),
-                                          ui
-                                        );
+                            /* @__PURE__ */ jsx8("div", { className: getClassNameItem("body"), children: arrayState.openId === _arrayId && /* @__PURE__ */ jsx8("fieldset", { className: getClassNameItem("fieldset"), children: Object.keys(field.arrayFields).map(
+                              (subName) => {
+                                const subField = field.arrayFields[subName];
+                                const indexName = `${name}[${i}]`;
+                                const subPath = `${indexName}.${subName}`;
+                                const localIndexName = `${localName}[${i}]`;
+                                const localWildcardName = `${localName}[*]`;
+                                const localSubPath = `${localIndexName}.${subName}`;
+                                const localWildcardSubPath = `${localWildcardName}.${subName}`;
+                                const subReadOnly = forceReadOnly ? forceReadOnly : typeof readOnlyFields[subPath] !== "undefined" ? readOnlyFields[localSubPath] : readOnlyFields[localWildcardSubPath];
+                                const label2 = subField.label || subName;
+                                return /* @__PURE__ */ jsx8(
+                                  NestedFieldProvider,
+                                  {
+                                    name: localIndexName,
+                                    wildcardName: localWildcardName,
+                                    subName,
+                                    readOnlyFields,
+                                    children: /* @__PURE__ */ jsx8(
+                                      AutoFieldPrivate,
+                                      {
+                                        name: subPath,
+                                        label: label2,
+                                        id: `${_arrayId}_${subName}`,
+                                        readOnly: subReadOnly,
+                                        field: __spreadProps(__spreadValues({}, subField), {
+                                          label: label2
+                                          // May be used by custom fields
+                                        }),
+                                        value: data[subName],
+                                        onChange: (val, ui) => {
+                                          onChange(
+                                            replace(value, i, __spreadProps(__spreadValues({}, data), {
+                                              [subName]: val
+                                            })),
+                                            ui
+                                          );
+                                        }
                                       }
-                                    }
-                                  )
-                                },
-                                subPath
-                              );
-                            }) }) })
+                                    )
+                                  },
+                                  subPath
+                                );
+                              }
+                            ) }) })
                           ]
                         }
                       )
@@ -3058,7 +3030,7 @@ import {
   useMemo as useMemo2,
   useEffect as useEffect8,
   useState as useState6,
-  useCallback as useCallback4,
+  useCallback as useCallback3,
   isValidElement
 } from "react";
 
@@ -3168,7 +3140,7 @@ var ExternalInput = ({
     return Array.from(validKeys);
   }, [mappedData]);
   const [searchQuery, setSearchQuery] = useState6(field.initialQuery || "");
-  const search = useCallback4(
+  const search = useCallback3(
     (query, filters2) => __async(void 0, null, function* () {
       setIsLoading(true);
       const cacheKey = `${id}-${query}-${JSON.stringify(filters2)}`;
@@ -3181,7 +3153,7 @@ var ExternalInput = ({
     }),
     [id, field]
   );
-  const Footer = useCallback4(
+  const Footer = useCallback3(
     (props) => field.renderFooter ? field.renderFooter(props) : /* @__PURE__ */ jsxs6("span", { className: getClassNameModal("footer"), children: [
       props.items.length,
       " result",
@@ -3724,7 +3696,7 @@ function AutoFieldInternal(props) {
     Label: Label2,
     id: resolvedId
   });
-  const onFocus = useCallback5(
+  const onFocus = useCallback4(
     (e) => {
       if (mergedProps.name && (e.target.nodeName === "INPUT" || e.target.nodeName === "TEXTAREA")) {
         e.stopPropagation();
@@ -3738,7 +3710,7 @@ function AutoFieldInternal(props) {
     },
     [mergedProps.name]
   );
-  const onBlur = useCallback5((e) => {
+  const onBlur = useCallback4((e) => {
     if ("name" in e.target) {
       dispatch({
         type: "setUi",
@@ -3792,7 +3764,7 @@ function AutoFieldPrivate(props) {
   const isFocused = useAppStore((s) => s.state.ui.field.focus === props.name);
   const { value, onChange } = props;
   const [localValue, setLocalValue] = useState8(value);
-  const onChangeLocal = useCallback5(
+  const onChangeLocal = useCallback4(
     (val, ui) => {
       setLocalValue(val);
       onChange(val, ui);
@@ -3840,18 +3812,18 @@ init_react_import();
 init_react_import();
 import {
   forwardRef as forwardRef3,
-  memo,
-  useCallback as useCallback12,
+  memo as memo2,
+  useCallback as useCallback11,
   useContext as useContext8,
-  useEffect as useEffect17,
+  useEffect as useEffect18,
   useMemo as useMemo8,
-  useRef as useRef5
+  useRef as useRef6
 } from "react";
 
 // components/DraggableComponent/index.tsx
 init_react_import();
 import {
-  useCallback as useCallback8,
+  useCallback as useCallback7,
   useContext as useContext5,
   useEffect as useEffect12,
   useMemo as useMemo5,
@@ -3862,7 +3834,7 @@ import {
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
 init_react_import();
-var styles_module_default10 = { "DraggableComponent": "_DraggableComponent_qzbgx_1", "DraggableComponent-overlay": "_DraggableComponent-overlay_qzbgx_12", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_qzbgx_29", "DraggableComponent--hover": "_DraggableComponent--hover_qzbgx_45", "DraggableComponent--isLocked": "_DraggableComponent--isLocked_qzbgx_45", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_qzbgx_54", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_qzbgx_66", "DraggableComponent-actions": "_DraggableComponent-actions_qzbgx_66" };
+var styles_module_default10 = { "DraggableComponent": "_DraggableComponent_1vaqy_1", "DraggableComponent-overlayWrapper": "_DraggableComponent-overlayWrapper_1vaqy_12", "DraggableComponent-overlay": "_DraggableComponent-overlay_1vaqy_12", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_1vaqy_34", "DraggableComponent--hover": "_DraggableComponent--hover_1vaqy_50", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_1vaqy_57", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_1vaqy_71", "DraggableComponent-actions": "_DraggableComponent-actions_1vaqy_71" };
 
 // components/DraggableComponent/index.tsx
 import { createPortal as createPortal2 } from "react-dom";
@@ -3890,7 +3862,7 @@ function getDeepScrollPosition(element) {
 init_react_import();
 import {
   createContext as createContext3,
-  useCallback as useCallback6,
+  useCallback as useCallback5,
   useMemo as useMemo4
 } from "react";
 import { createStore as createStore2 } from "zustand";
@@ -3919,7 +3891,7 @@ var DropZoneProvider = ({
   value
 }) => {
   const dispatch = useAppStore((s) => s.dispatch);
-  const registerZone = useCallback6(
+  const registerZone = useCallback5(
     (zoneCompound) => {
       dispatch({
         type: "registerZone",
@@ -3938,7 +3910,7 @@ var DropZoneProvider = ({
 };
 
 // components/DraggableComponent/index.tsx
-import { useShallow as useShallow3 } from "zustand/react/shallow";
+import { useShallow as useShallow2 } from "zustand/react/shallow";
 import { useSortable as useSortable2 } from "@dnd-kit/react/sortable";
 
 // lib/accumulate-transform.ts
@@ -3960,21 +3932,21 @@ function accumulateTransform(el) {
 init_react_import();
 import { useContext as useContext4 } from "react";
 import { useStore as useStore2 } from "zustand";
-import { useShallow as useShallow2 } from "zustand/react/shallow";
+import { useShallow } from "zustand/react/shallow";
 function useContextStore(context, selector) {
   const store = useContext4(context);
   if (!store) {
     throw new Error("useContextStore must be used inside context");
   }
-  return useStore2(store, useShallow2(selector));
+  return useStore2(store, useShallow(selector));
 }
 
 // lib/dnd/use-on-drag-finished.ts
 init_react_import();
-import { useCallback as useCallback7 } from "react";
+import { useCallback as useCallback6 } from "react";
 var useOnDragFinished = (cb, deps = []) => {
   const appStore = useAppStoreApi();
-  return useCallback7(() => {
+  return useCallback6(() => {
     let dispose = () => {
     };
     const processDragging = (isDragging2) => {
@@ -4002,7 +3974,7 @@ var useOnDragFinished = (cb, deps = []) => {
 };
 
 // components/DraggableComponent/index.tsx
-import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 var getClassName16 = get_class_name_factory_default("DraggableComponent", styles_module_default10);
 var DEBUG2 = false;
 var space = 8;
@@ -4020,6 +3992,9 @@ var DefaultActionBar = ({
   ] }),
   /* @__PURE__ */ jsx20(ActionBar.Group, { children })
 ] });
+var DefaultOverlay = ({
+  children
+}) => /* @__PURE__ */ jsx20(Fragment6, { children });
 var DraggableComponent = ({
   children,
   depth,
@@ -4046,7 +4021,7 @@ var DraggableComponent = ({
   const iframe = useAppStore((s) => s.iframe);
   const ctx = useContext5(dropZoneContext);
   const [localZones, setLocalZones] = useState10({});
-  const registerLocalZone = useCallback8(
+  const registerLocalZone = useCallback7(
     (zoneCompound2, active) => {
       var _a;
       (_a = ctx == null ? void 0 : ctx.registerLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2, active);
@@ -4056,7 +4031,7 @@ var DraggableComponent = ({
     },
     [setLocalZones]
   );
-  const unregisterLocalZone = useCallback8(
+  const unregisterLocalZone = useCallback7(
     (zoneCompound2) => {
       var _a;
       (_a = ctx == null ? void 0 : ctx.unregisterLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2);
@@ -4069,12 +4044,12 @@ var DraggableComponent = ({
     [setLocalZones]
   );
   const containsActiveZone = Object.values(localZones).filter(Boolean).length > 0;
-  const path = useAppStore(useShallow3((s) => {
+  const path = useAppStore(useShallow2((s) => {
     var _a;
     return (_a = s.state.indexes.nodes[id]) == null ? void 0 : _a.path;
   }));
   const permissions = useAppStore(
-    useShallow3((s) => {
+    useShallow2((s) => {
       const item = getItem({ index, zone: zoneCompound }, s.state);
       return s.permissions.getPermissions({ item });
     })
@@ -4131,7 +4106,7 @@ var DraggableComponent = ({
     return cleanup;
   }, [permissions.drag, zoneCompound]);
   const ref = useRef2(null);
-  const refSetter = useCallback8(
+  const refSetter = useCallback7(
     (el) => {
       sortableRef(el);
       if (el) {
@@ -4147,7 +4122,7 @@ var DraggableComponent = ({
       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 = useCallback8(() => {
+  const getStyle = useCallback7(() => {
     var _a, _b, _c;
     if (!ref.current) return;
     const rect = ref.current.getBoundingClientRect();
@@ -4173,7 +4148,7 @@ var DraggableComponent = ({
     return style2;
   }, [ref.current]);
   const [style, setStyle] = useState10();
-  const sync = useCallback8(() => {
+  const sync = useCallback7(() => {
     setStyle(getStyle());
   }, [ref.current, iframe]);
   useEffect12(() => {
@@ -4186,10 +4161,10 @@ var DraggableComponent = ({
     }
   }, [ref.current]);
   const registerNode = useAppStore((s) => s.nodes.registerNode);
-  const hideOverlay = useCallback8(() => {
+  const hideOverlay = useCallback7(() => {
     setIsVisible(false);
   }, []);
-  const showOverlay = useCallback8(() => {
+  const showOverlay = useCallback7(() => {
     setIsVisible(true);
   }, []);
   useEffect12(() => {
@@ -4213,9 +4188,16 @@ var DraggableComponent = ({
     () => overrides.actionBar || DefaultActionBar,
     [overrides.actionBar]
   );
-  const onClick = useCallback8(
+  const CustomOverlay = useMemo5(
+    () => overrides.componentOverlay || DefaultOverlay,
+    [overrides.componentOverlay]
+  );
+  const onClick = useCallback7(
     (e) => {
-      e.stopPropagation();
+      const el = e.target;
+      if (!el.closest("[data-puck-overlay-portal]")) {
+        e.stopPropagation();
+      }
       dispatch({
         type: "setUi",
         ui: {
@@ -4226,7 +4208,7 @@ var DraggableComponent = ({
     [index, zoneCompound, id]
   );
   const appStore = useAppStoreApi();
-  const onSelectParent = useCallback8(() => {
+  const onSelectParent = useCallback7(() => {
     const { nodes, zones } = appStore.getState().state.indexes;
     const node = nodes[id];
     const parentNode = (node == null ? void 0 : node.parentId) ? nodes[node == null ? void 0 : node.parentId] : null;
@@ -4247,14 +4229,14 @@ var DraggableComponent = ({
       }
     });
   }, [ctx, path]);
-  const onDuplicate = useCallback8(() => {
+  const onDuplicate = useCallback7(() => {
     dispatch({
       type: "duplicate",
       sourceIndex: index,
       sourceZone: zoneCompound
     });
   }, [index, zoneCompound]);
-  const onDelete = useCallback8(() => {
+  const onDelete = useCallback7(() => {
     dispatch({
       type: "remove",
       index,
@@ -4344,7 +4326,7 @@ var DraggableComponent = ({
   useEffect12(() => {
     if (thisWasDragging) return onDragFinished();
   }, [thisWasDragging, onDragFinished]);
-  const syncActionsPosition = useCallback8(
+  const syncActionsPosition = useCallback7(
     (el) => {
       if (el) {
         const view = el.ownerDocument.defaultView;
@@ -4455,7 +4437,16 @@ var DraggableComponent = ({
                 )
               }
             ),
-            /* @__PURE__ */ jsx20("div", { className: getClassName16("overlay") })
+            /* @__PURE__ */ jsx20("div", { className: getClassName16("overlayWrapper"), children: /* @__PURE__ */ jsx20(
+              CustomOverlay,
+              {
+                componentId: id,
+                componentType,
+                hover,
+                isSelected,
+                children: /* @__PURE__ */ jsx20("div", { className: getClassName16("overlay") })
+              }
+            ) })
           ]
         }
       ),
@@ -4487,7 +4478,7 @@ init_react_import();
 import { DragDropProvider as DragDropProvider2 } from "@dnd-kit/react";
 import {
   createContext as createContext4,
-  useCallback as useCallback9,
+  useCallback as useCallback8,
   useContext as useContext6,
   useEffect as useEffect13,
   useMemo as useMemo6,
@@ -4846,7 +4837,7 @@ function useDragListener(type, fn, deps = []) {
 var AREA_CHANGE_DEBOUNCE_MS = 100;
 var useTempDisableFallback = (timeout3) => {
   const lastFallbackDisable = useRef3(null);
-  return useCallback9((manager) => {
+  return useCallback8((manager) => {
     collisionStore.setState({ fallbackEnabled: false });
     const fallbackId = generateId();
     lastFallbackDisable.current = fallbackId;
@@ -4879,7 +4870,7 @@ var DragDropContextClient = ({
       hoveringComponent: null
     }))
   );
-  const getChanged2 = useCallback9(
+  const getChanged2 = useCallback8(
     (params, id2) => {
       const { zoneDepthIndex = {}, areaDepthIndex = {} } = zoneStore.getState() || {};
       const stateHasZone = Object.keys(zoneDepthIndex).length > 0;
@@ -4900,7 +4891,7 @@ var DragDropContextClient = ({
     },
     [zoneStore]
   );
-  const setDeepestAndCollide = useCallback9(
+  const setDeepestAndCollide = useCallback8(
     (params, manager) => {
       const { zoneChanged, areaChanged } = getChanged2(params, id);
       if (!zoneChanged && !areaChanged) return;
@@ -5454,10 +5445,10 @@ import { useContext as useContext7, useEffect as useEffect15, useState as useSta
 // lib/dnd/use-rendered-callback.ts
 init_react_import();
 import { useDragDropManager } from "@dnd-kit/react";
-import { useCallback as useCallback10 } from "react";
+import { useCallback as useCallback9 } from "react";
 function useRenderedCallback(callback, deps) {
   const manager = useDragDropManager();
-  return useCallback10(
+  return useCallback9(
     (...args) => __async(this, null, function* () {
       yield manager == null ? void 0 : manager.renderer.rendering;
       return callback(...args);
@@ -5528,7 +5519,7 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
 
 // components/DropZone/lib/use-drag-axis.ts
 init_react_import();
-import { useCallback as useCallback11, useEffect as useEffect16, useState as useState15 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect16, useState as useState15 } from "react";
 var GRID_DRAG_AXIS = "dynamic";
 var FLEX_ROW_DRAG_AXIS = "x";
 var DEFAULT_DRAG_AXIS = "y";
@@ -5537,7 +5528,7 @@ var useDragAxis = (ref, collisionAxis) => {
   const [dragAxis, setDragAxis] = useState15(
     collisionAxis || DEFAULT_DRAG_AXIS
   );
-  const calculateDragAxis = useCallback11(() => {
+  const calculateDragAxis = useCallback10(() => {
     if (ref.current) {
       const computedStyle = window.getComputedStyle(ref.current);
       if (computedStyle.display === "grid") {
@@ -5563,11 +5554,11 @@ var useDragAxis = (ref, collisionAxis) => {
 };
 
 // components/DropZone/index.tsx
-import { useShallow as useShallow5 } from "zustand/react/shallow";
+import { useShallow as useShallow4 } from "zustand/react/shallow";
 
 // components/SlotRender/index.tsx
 init_react_import();
-import { useShallow as useShallow4 } from "zustand/react/shallow";
+import { useShallow as useShallow3 } from "zustand/react/shallow";
 import { jsx as jsx23 } from "react/jsx-runtime";
 var ContextSlotRender = ({
   componentId,
@@ -5576,7 +5567,7 @@ var ContextSlotRender = ({
   const config = useAppStore((s) => s.config);
   const metadata = useAppStore((s) => s.metadata);
   const slotContent = useAppStore(
-    useShallow4((s) => {
+    useShallow3((s) => {
       var _a, _b;
       const indexes = s.state.indexes;
       const contentIds = (_b = (_a = indexes.zones[`${componentId}:${zone}`]) == null ? void 0 : _a.contentIds) != null ? _b : [];
@@ -5594,12 +5585,259 @@ var ContextSlotRender = ({
   );
 };
 
+// lib/field-transforms/default-transforms/inline-text-transform.tsx
+init_react_import();
+
+// components/InlineTextField/index.tsx
+init_react_import();
+import { memo, useEffect as useEffect17, useRef as useRef5, useState as useState16 } from "react";
+
+// lib/overlay-portal/index.tsx
+init_react_import();
+var registerOverlayPortal = (el, opts = {}) => {
+  if (!el) return;
+  const { disableDrag = false, disableDragOnFocus = true } = opts;
+  const stopPropagation = (e) => {
+    e.stopPropagation();
+  };
+  el.addEventListener("mouseover", stopPropagation, {
+    capture: true
+  });
+  const onFocus = () => {
+    setTimeout(() => {
+      el.addEventListener("pointerdown", stopPropagation, {
+        capture: true
+      });
+    }, 200);
+  };
+  const onBlur = () => {
+    el.removeEventListener("pointerdown", stopPropagation, {
+      capture: true
+    });
+  };
+  if (disableDragOnFocus) {
+    el.addEventListener("focus", onFocus, { capture: true });
+    el.addEventListener("blur", onBlur, { capture: true });
+  } else if (disableDrag) {
+    el.addEventListener("pointerdown", stopPropagation, {
+      capture: true
+    });
+  }
+  el.setAttribute("data-puck-overlay-portal", "true");
+  return () => {
+    el.removeEventListener("mouseover", stopPropagation, {
+      capture: true
+    });
+    if (disableDragOnFocus) {
+      el.removeEventListener("focus", onFocus, { capture: true });
+      el.removeEventListener("blur", onFocus, { capture: true });
+    } else if (disableDrag) {
+      el.removeEventListener("pointerdown", stopPropagation, {
+        capture: true
+      });
+    }
+    el.removeAttribute("data-puck-overlay-portal");
+  };
+};
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/InlineTextField/styles.module.css#css-module
+init_react_import();
+var styles_module_default13 = { "InlineTextField": "_InlineTextField_ilw2a_1" };
+
+// lib/data/set-deep.ts
+init_react_import();
+function setDeep(node, path, newVal) {
+  const parts = path.split(".");
+  const newNode = __spreadValues({}, node);
+  let cur = newNode;
+  for (let i = 0; i < parts.length; i++) {
+    const [prop, idxStr] = parts[i].replace("]", "").split("[");
+    const isLast = i === parts.length - 1;
+    if (idxStr !== void 0) {
+      if (!Array.isArray(cur[prop])) {
+        cur[prop] = [];
+      }
+      const idx = Number(idxStr);
+      if (isLast) {
+        cur[prop][idx] = newVal;
+        continue;
+      }
+      if (cur[prop][idx] === void 0) cur[prop][idx] = {};
+      cur = cur[prop][idx];
+      continue;
+    }
+    if (isLast) {
+      cur[prop] = newVal;
+      continue;
+    }
+    if (cur[prop] === void 0) {
+      cur[prop] = {};
+    }
+    cur = cur[prop];
+  }
+  return __spreadValues(__spreadValues({}, node), newNode);
+}
+
+// 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 getClassName18 = get_class_name_factory_default("InlineTextField", styles_module_default13);
+var InlineTextFieldInternal = ({
+  propPath,
+  componentId,
+  value,
+  isReadOnly,
+  opts = {}
+}) => {
+  var _a;
+  const ref = useRef5(null);
+  const appStoreApi = useAppStoreApi();
+  const disableLineBreaks = (_a = opts.disableLineBreaks) != null ? _a : false;
+  useEffect17(() => {
+    const appStore = appStoreApi.getState();
+    const data = appStore.state.indexes.nodes[componentId].data;
+    const componentConfig = appStore.getComponentConfig(data.type);
+    if (!componentConfig) {
+      throw new Error(
+        `InlineTextField Error: No config defined for ${data.type}`
+      );
+    }
+    if (ref.current) {
+      if (value !== ref.current.innerText) {
+        ref.current.replaceChildren(value);
+      }
+      const cleanupPortal = registerOverlayPortal(ref.current);
+      const handleInput = (e) => __async(void 0, null, function* () {
+        var _a2;
+        const appStore2 = appStoreApi.getState();
+        const node = appStore2.state.indexes.nodes[componentId];
+        const zoneCompound = `${node.parentId}:${node.zone}`;
+        const index = (_a2 = appStore2.state.indexes.zones[zoneCompound]) == null ? void 0 : _a2.contentIds.indexOf(
+          componentId
+        );
+        const newProps = setDeep(node.data.props, propPath, e.target.innerText);
+        const resolvedData = yield appStore2.resolveComponentData(
+          __spreadProps(__spreadValues({}, node.data), { props: newProps }),
+          "replace"
+        );
+        appStore2.dispatch({
+          type: "replace",
+          data: resolvedData.node,
+          destinationIndex: index,
+          destinationZone: zoneCompound
+        });
+      });
+      ref.current.addEventListener("input", handleInput);
+      return () => {
+        var _a2;
+        (_a2 = ref.current) == null ? void 0 : _a2.removeEventListener("input", handleInput);
+        cleanupPortal == null ? void 0 : cleanupPortal();
+      };
+    }
+  }, [appStoreApi, ref.current, value]);
+  const [isHovering, setIsHovering] = useState16(false);
+  const [isFocused, setIsFocused] = useState16(false);
+  return /* @__PURE__ */ jsx24(
+    "span",
+    {
+      className: getClassName18(),
+      ref,
+      contentEditable: isHovering || isFocused ? "plaintext-only" : "false",
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      onClickCapture: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        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 = memo(InlineTextFieldInternal);
+
+// lib/field-transforms/default-transforms/inline-text-transform.tsx
+import { jsx as jsx25 } from "react/jsx-runtime";
+var getInlineTextTransform = () => ({
+  text: ({ value, componentId, field, propPath, isReadOnly }) => {
+    if (field.contentEditable) {
+      return /* @__PURE__ */ jsx25(
+        InlineTextField,
+        {
+          propPath,
+          componentId,
+          value,
+          opts: { disableLineBreaks: true },
+          isReadOnly
+        }
+      );
+    }
+    return value;
+  },
+  textarea: ({ value, componentId, field, propPath, isReadOnly }) => {
+    if (field.contentEditable) {
+      return /* @__PURE__ */ jsx25(
+        InlineTextField,
+        {
+          propPath,
+          componentId,
+          value,
+          isReadOnly
+        }
+      );
+    }
+    return value;
+  },
+  custom: ({ value, componentId, field, propPath, isReadOnly }) => {
+    if (field.contentEditable && typeof value === "string") {
+      return /* @__PURE__ */ jsx25(
+        InlineTextField,
+        {
+          propPath,
+          componentId,
+          value,
+          isReadOnly
+        }
+      );
+    }
+    return value;
+  }
+});
+
 // components/DropZone/index.tsx
-import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
-var getClassName18 = get_class_name_factory_default("DropZone", styles_module_default11);
+import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs11 } from "react/jsx-runtime";
+var getClassName19 = get_class_name_factory_default("DropZone", styles_module_default11);
 var getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;
 var RENDER_DEBUG = false;
-var DropZoneEditPure = (props) => /* @__PURE__ */ jsx24(DropZoneEdit, __spreadValues({}, props));
+var DropZoneEditPure = (props) => /* @__PURE__ */ jsx26(DropZoneEdit, __spreadValues({}, props));
 var DropZoneChild = ({
   zoneCompound,
   componentId,
@@ -5614,7 +5852,7 @@ var DropZoneChild = ({
   const { depth = 1 } = ctx != null ? ctx : {};
   const zoneStore = useContext8(ZoneStoreContext);
   const nodeProps = useAppStore(
-    useShallow5((s) => {
+    useShallow4((s) => {
       var _a2;
       return (_a2 = s.state.indexes.nodes[componentId]) == null ? void 0 : _a2.flatData.props;
     })
@@ -5626,7 +5864,7 @@ var DropZoneChild = ({
     }
   );
   const nodeReadOnly = useAppStore(
-    useShallow5((s) => {
+    useShallow4((s) => {
       var _a2;
       return (_a2 = s.state.indexes.nodes[componentId]) == null ? void 0 : _a2.data.readOnly;
     })
@@ -5679,13 +5917,14 @@ var DropZoneChild = ({
   let label = (_b = (_a = componentConfig == null ? void 0 : componentConfig.label) != null ? _a : item == null ? void 0 : item.type.toString()) != null ? _b : "Component";
   const renderPreview = useMemo8(
     () => function Preview3() {
+      var _a2;
       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: overrides.componentItem });
+      return /* @__PURE__ */ jsx26(DrawerItemInner, { name: label, children: (_a2 = overrides.componentItem) != null ? _a2 : overrides.drawerItem });
     },
     [componentId, label, overrides]
   );
@@ -5705,11 +5944,19 @@ var DropZoneChild = ({
     [item == null ? void 0 : item.type, nodeType, defaultsProps]
   );
   const config = useAppStore((s) => s.config);
-  const defaultedPropsWithSlots = useSlots(
+  const plugins = useAppStore((s) => s.plugins);
+  const userFieldTransforms = useAppStore((s) => s.fieldTransforms);
+  const combinedFieldTransforms = useMemo8(
+    () => __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),
+    [plugins, userFieldTransforms]
+  );
+  const transformedProps = useFieldTransforms(
     config,
     defaultedNode,
-    DropZoneEditPure,
-    (slotProps) => /* @__PURE__ */ jsx24(ContextSlotRender, { componentId, zone: slotProps.zone }),
+    combinedFieldTransforms,
     nodeReadOnly,
     isLoading
   );
@@ -5723,7 +5970,7 @@ var DropZoneChild = ({
   if (isInserting) {
     Render2 = renderPreview;
   }
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx26(
     DraggableComponent,
     {
       id: componentId,
@@ -5737,18 +5984,18 @@ var DropZoneChild = ({
       autoDragAxis: dragAxis,
       userDragAxis: collisionAxis,
       inDroppableZone,
-      children: (dragRef) => (componentConfig == null ? void 0 : componentConfig.inline) && !isInserting ? /* @__PURE__ */ jsx24(Fragment6, { children: /* @__PURE__ */ jsx24(
+      children: (dragRef) => (componentConfig == null ? void 0 : componentConfig.inline) && !isInserting ? /* @__PURE__ */ jsx26(Fragment7, { children: /* @__PURE__ */ jsx26(
         Render2,
-        __spreadProps(__spreadValues({}, defaultedPropsWithSlots), {
-          puck: __spreadProps(__spreadValues({}, defaultedPropsWithSlots.puck), {
+        __spreadProps(__spreadValues({}, transformedProps), {
+          puck: __spreadProps(__spreadValues({}, transformedProps.puck), {
             dragRef
           })
         })
-      ) }) : /* @__PURE__ */ jsx24("div", { ref: dragRef, children: /* @__PURE__ */ jsx24(Render2, __spreadValues({}, defaultedPropsWithSlots)) })
+      ) }) : /* @__PURE__ */ jsx26("div", { ref: dragRef, children: /* @__PURE__ */ jsx26(Render2, __spreadValues({}, transformedProps)) })
     }
   );
 };
-var DropZoneChildMemo = memo(DropZoneChild);
+var DropZoneChildMemo = memo2(DropZoneChild);
 var DropZoneEdit = forwardRef3(
   function DropZoneEditInternal({
     zone,
@@ -5769,7 +6016,7 @@ var DropZoneEdit = forwardRef3(
       unregisterLocalZone
     } = ctx != null ? ctx : {};
     const path = useAppStore(
-      useShallow5((s) => {
+      useShallow4((s) => {
         var _a;
         return areaId ? (_a = s.state.indexes.nodes[areaId]) == null ? void 0 : _a.path : null;
       })
@@ -5786,25 +6033,25 @@ var DropZoneEdit = forwardRef3(
       (s) => s.nextAreaDepthIndex[areaId || ""]
     );
     const zoneContentIds = useAppStore(
-      useShallow5((s) => {
+      useShallow4((s) => {
         var _a;
         return (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.contentIds;
       })
     );
     const zoneType = useAppStore(
-      useShallow5((s) => {
+      useShallow4((s) => {
         var _a;
         return (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.type;
       })
     );
-    useEffect17(() => {
+    useEffect18(() => {
       if (!zoneType || zoneType === "dropzone") {
         if (ctx == null ? void 0 : ctx.registerZone) {
           ctx == null ? void 0 : ctx.registerZone(zoneCompound);
         }
       }
     }, [zoneType, appStoreApi]);
-    useEffect17(() => {
+    useEffect18(() => {
       if (zoneType === "dropzone") {
         if (zoneCompound !== rootDroppableId) {
           console.warn(
@@ -5816,8 +6063,8 @@ var DropZoneEdit = forwardRef3(
     const contentIds = useMemo8(() => {
       return zoneContentIds || [];
     }, [zoneContentIds]);
-    const ref = useRef5(null);
-    const acceptsTarget = useCallback12(
+    const ref = useRef6(null);
+    const acceptsTarget = useCallback11(
       (componentType) => {
         if (!componentType) {
           return true;
@@ -5855,7 +6102,7 @@ var DropZoneEdit = forwardRef3(
       }
       return _isEnabled;
     });
-    useEffect17(() => {
+    useEffect18(() => {
       if (registerLocalZone) {
         registerLocalZone(zoneCompound, targetAccepted || isEnabled);
       }
@@ -5871,7 +6118,7 @@ var DropZoneEdit = forwardRef3(
     );
     const isDropEnabled = isEnabled && (preview ? contentIdsWithPreview.length === 1 : contentIdsWithPreview.length === 0);
     const zoneStore = useContext8(ZoneStoreContext);
-    useEffect17(() => {
+    useEffect18(() => {
       const { enabledIndex } = zoneStore.getState();
       zoneStore.setState({
         enabledIndex: __spreadProps(__spreadValues({}, enabledIndex), { [zoneCompound]: isEnabled })
@@ -5900,10 +6147,10 @@ var DropZoneEdit = forwardRef3(
       userMinEmptyHeight,
       ref
     });
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx26(
       "div",
       {
-        className: `${getClassName18({
+        className: `${getClassName19({
           isRootZone,
           hoveringOverArea,
           isEnabled,
@@ -5921,7 +6168,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,
@@ -5944,7 +6191,7 @@ var DropZoneRenderItem = ({
   metadata
 }) => {
   const Component = config.components[item.type];
-  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ jsx24(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
+  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ jsx26(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
   const nextContextValue = useMemo8(
     () => ({
       areaId: props.id,
@@ -5952,7 +6199,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), {
@@ -5962,7 +6209,7 @@ 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 = useContext8(dropZoneContext);
@@ -5970,7 +6217,7 @@ var DropZoneRender = forwardRef3(
     const { config, data, metadata } = useContext8(renderContext);
     let zoneCompound = `${areaId}:${zone}`;
     let content = (data == null ? void 0 : data.content) || [];
-    useEffect17(() => {
+    useEffect18(() => {
       if (!content) {
         if (ctx == null ? void 0 : ctx.registerZone) {
           ctx == null ? void 0 : ctx.registerZone(zoneCompound);
@@ -5983,10 +6230,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,
@@ -6000,20 +6247,20 @@ var DropZoneRender = forwardRef3(
     }) });
   }
 );
-var DropZonePure = (props) => /* @__PURE__ */ jsx24(DropZone, __spreadValues({}, props));
+var DropZonePure = (props) => /* @__PURE__ */ jsx26(DropZone, __spreadValues({}, props));
 var DropZone = forwardRef3(
   function DropZone2(props, ref) {
     const ctx = useContext8(dropZoneContext);
     if ((ctx == null ? void 0 : ctx.mode) === "edit") {
-      return /* @__PURE__ */ jsx24(Fragment6, { children: /* @__PURE__ */ jsx24(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
+      return /* @__PURE__ */ jsx26(Fragment7, { children: /* @__PURE__ */ jsx26(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
     }
-    return /* @__PURE__ */ jsx24(Fragment6, { children: /* @__PURE__ */ jsx24(DropZoneRender, __spreadProps(__spreadValues({}, props), { ref })) });
+    return /* @__PURE__ */ jsx26(Fragment7, { children: /* @__PURE__ */ jsx26(DropZoneRender, __spreadProps(__spreadValues({}, props), { ref })) });
   }
 );
 
 // components/Render/index.tsx
 import React3, { useMemo as useMemo9 } from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var renderContext = React3.createContext({
   config: { components: {} },
   data: { root: {}, content: [] },
@@ -6045,7 +6292,7 @@ function Render({
   const propsWithSlots = useSlots(
     config,
     { type: "root", props: pageProps },
-    (props) => /* @__PURE__ */ jsx25(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata }))
+    (props) => /* @__PURE__ */ jsx27(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata }))
   );
   const nextContextValue = useMemo9(
     () => ({
@@ -6055,14 +6302,14 @@ function Render({
     []
   );
   if ((_a = config.root) == null ? void 0 : _a.render) {
-    return /* @__PURE__ */ jsx25(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx25(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx25(config.root.render, __spreadProps(__spreadValues({}, propsWithSlots), { children: /* @__PURE__ */ jsx25(DropZoneRenderPure, { zone: rootZone }) })) }) });
+    return /* @__PURE__ */ jsx27(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx27(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx27(config.root.render, __spreadProps(__spreadValues({}, propsWithSlots), { children: /* @__PURE__ */ jsx27(DropZoneRenderPure, { zone: rootZone }) })) }) });
   }
-  return /* @__PURE__ */ jsx25(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx25(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx25(DropZoneRenderPure, { zone: rootZone }) }) });
+  return /* @__PURE__ */ jsx27(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx27(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx27(DropZoneRenderPure, { zone: rootZone }) }) });
 }
 
 // lib/use-puck.ts
 init_react_import();
-import { createContext as createContext5, useContext as useContext9, useEffect as useEffect18, useState as useState16 } from "react";
+import { createContext as createContext5, useContext as useContext9, useEffect as useEffect19, useState as useState17 } from "react";
 import { createStore as createStore4, useStore as useStore3 } from "zustand";
 var generateUsePuck = (store) => {
   const history = {
@@ -6085,13 +6332,7 @@ 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;
 };
@@ -6109,12 +6350,12 @@ var convertToPickedStore = (store) => {
   };
 };
 var useRegisterUsePuckStore = (appStore) => {
-  const [usePuckStore] = useState16(
+  const [usePuckStore] = useState17(
     () => createStore4(
       () => generateUsePuck(convertToPickedStore(appStore.getState()))
     )
   );
-  useEffect18(() => {
+  useEffect19(() => {
     return appStore.subscribe(
       (store) => convertToPickedStore(store),
       (pickedStore) => {
@@ -6138,7 +6379,7 @@ function createUsePuck() {
   };
 }
 function usePuck() {
-  useEffect18(() => {
+  useEffect19(() => {
     console.warn(
       "You're using the `usePuck` method without a selector, which may cause unnecessary re-renders. Replace with `createUsePuck` and provide a selector for improved performance."
     );
@@ -6157,12 +6398,12 @@ function useGetPuck() {
 init_react_import();
 import {
   createContext as createContext8,
-  useCallback as useCallback21,
+  useCallback as useCallback20,
   useContext as useContext13,
-  useEffect as useEffect27,
+  useEffect as useEffect29,
   useMemo as useMemo20,
-  useRef as useRef11,
-  useState as useState24
+  useRef as useRef12,
+  useState as useState25
 } from "react";
 
 // components/SidebarSection/index.tsx
@@ -6170,7 +6411,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css#css-module
 init_react_import();
-var styles_module_default13 = { "SidebarSection": "_SidebarSection_8boj8_1", "SidebarSection-title": "_SidebarSection-title_8boj8_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_8boj8_20", "SidebarSection-content": "_SidebarSection-content_8boj8_24", "SidebarSection--noPadding": "_SidebarSection--noPadding_8boj8_28", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_8boj8_41", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_8boj8_70", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_8boj8_41", "SidebarSection-heading": "_SidebarSection-heading_8boj8_82", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_8boj8_86" };
+var styles_module_default14 = { "SidebarSection": "_SidebarSection_8boj8_1", "SidebarSection-title": "_SidebarSection-title_8boj8_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_8boj8_20", "SidebarSection-content": "_SidebarSection-content_8boj8_24", "SidebarSection--noPadding": "_SidebarSection--noPadding_8boj8_28", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_8boj8_41", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_8boj8_70", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_8boj8_41", "SidebarSection-heading": "_SidebarSection-heading_8boj8_82", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_8boj8_86" };
 
 // lib/use-breadcrumbs.ts
 init_react_import();
@@ -6217,8 +6458,8 @@ var useBreadcrumbs = (renderCount) => {
 };
 
 // components/SidebarSection/index.tsx
-import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
-var getClassName19 = get_class_name_factory_default("SidebarSection", styles_module_default13);
+import { jsx as jsx28, jsxs as jsxs12 } from "react/jsx-runtime";
+var getClassName20 = get_class_name_factory_default("SidebarSection", styles_module_default14);
 var SidebarSection = ({
   children,
   title,
@@ -6233,26 +6474,26 @@ var SidebarSection = ({
   return /* @__PURE__ */ jsxs12(
     "div",
     {
-      className: getClassName19({ noBorderTop, noPadding }),
+      className: getClassName20({ noBorderTop, noPadding }),
       style: { background },
       children: [
-        /* @__PURE__ */ jsx26("div", { className: getClassName19("title"), children: /* @__PURE__ */ jsxs12("div", { className: getClassName19("breadcrumbs"), children: [
-          showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs12("div", { className: getClassName19("breadcrumb"), children: [
-            /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx28("div", { className: getClassName20("title"), children: /* @__PURE__ */ jsxs12("div", { className: getClassName20("breadcrumbs"), children: [
+          showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs12("div", { className: getClassName20("breadcrumb"), children: [
+            /* @__PURE__ */ jsx28(
               "button",
               {
                 type: "button",
-                className: getClassName19("breadcrumbLabel"),
+                className: getClassName20("breadcrumbLabel"),
                 onClick: () => setUi({ itemSelector: breadcrumb.selector }),
                 children: breadcrumb.label
               }
             ),
-            /* @__PURE__ */ jsx26(ChevronRight, { size: 16 })
+            /* @__PURE__ */ jsx28(ChevronRight, { size: 16 })
           ] }, i)) : null,
-          /* @__PURE__ */ jsx26("div", { className: getClassName19("heading"), children: /* @__PURE__ */ jsx26(Heading, { rank: "2", size: "xs", children: title }) })
+          /* @__PURE__ */ jsx28("div", { className: getClassName20("heading"), children: /* @__PURE__ */ jsx28(Heading, { rank: "2", size: "xs", children: title }) })
         ] }) }),
-        /* @__PURE__ */ jsx26("div", { className: getClassName19("content"), children }),
-        isLoading && /* @__PURE__ */ jsx26("div", { className: getClassName19("loadingOverlay"), children: /* @__PURE__ */ jsx26(Loader, { size: 32 }) })
+        /* @__PURE__ */ jsx28("div", { className: getClassName20("content"), children }),
+        isLoading && /* @__PURE__ */ jsx28("div", { className: getClassName20("loadingOverlay"), children: /* @__PURE__ */ jsx28(Loader, { size: 32 }) })
       ]
     }
   );
@@ -6260,24 +6501,24 @@ var SidebarSection = ({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css#css-module
 init_react_import();
-var styles_module_default14 = { "Puck": "_Puck_vnhjy_19", "Puck-portal": "_Puck-portal_vnhjy_31", "PuckLayout-inner": "_PuckLayout-inner_vnhjy_38", "PuckLayout--mounted": "_PuckLayout--mounted_vnhjy_50", "PuckLayout--leftSideBarVisible": "_PuckLayout--leftSideBarVisible_vnhjy_54", "PuckLayout--rightSideBarVisible": "_PuckLayout--rightSideBarVisible_vnhjy_60", "PuckLayout-mounted": "_PuckLayout-mounted_vnhjy_74", "PuckLayout": "_PuckLayout_vnhjy_38" };
+var styles_module_default15 = { "Puck": "_Puck_1yxlw_19", "Puck-portal": "_Puck-portal_1yxlw_31", "PuckLayout-inner": "_PuckLayout-inner_1yxlw_38", "PuckLayout--mounted": "_PuckLayout--mounted_1yxlw_59", "PuckLayout--leftSideBarVisible": "_PuckLayout--leftSideBarVisible_1yxlw_63", "PuckLayout--rightSideBarVisible": "_PuckLayout--rightSideBarVisible_1yxlw_69", "PuckLayout-mounted": "_PuckLayout-mounted_1yxlw_83", "PuckLayout": "_PuckLayout_1yxlw_38" };
 
 // components/Puck/components/Fields/index.tsx
 init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css#css-module
 init_react_import();
-var styles_module_default15 = { "PuckFields": "_PuckFields_10bh7_1", "PuckFields--isLoading": "_PuckFields--isLoading_10bh7_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_10bh7_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_10bh7_25", "PuckFields-field": "_PuckFields-field_10bh7_32", "PuckFields--wrapFields": "_PuckFields--wrapFields_10bh7_36" };
+var styles_module_default16 = { "PuckFields": "_PuckFields_10bh7_1", "PuckFields--isLoading": "_PuckFields--isLoading_10bh7_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_10bh7_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_10bh7_25", "PuckFields-field": "_PuckFields-field_10bh7_32", "PuckFields--wrapFields": "_PuckFields--wrapFields_10bh7_36" };
 
 // components/Puck/components/Fields/index.tsx
-import { memo as memo2, useCallback as useCallback13, useMemo as useMemo11 } from "react";
-import { useShallow as useShallow6 } from "zustand/react/shallow";
-import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
-var getClassName20 = get_class_name_factory_default("PuckFields", styles_module_default15);
+import { memo as memo3, useCallback as useCallback12, useMemo as useMemo11 } from "react";
+import { useShallow as useShallow5 } from "zustand/react/shallow";
+import { Fragment as Fragment8, jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
+var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
 var DefaultFields = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx27(Fragment7, { children });
+  return /* @__PURE__ */ jsx29(Fragment8, { children });
 };
 var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(void 0, null, function* () {
   let currentProps;
@@ -6337,19 +6578,19 @@ var FieldsChild = ({ fieldName }) => {
     return s.selectedItem ? `${s.selectedItem.props.id}_${field.type}_${fieldName}` : `root_${field.type}_${fieldName}`;
   });
   const permissions = useAppStore(
-    useShallow6((s) => {
+    useShallow5((s) => {
       const { selectedItem, permissions: permissions2 } = s;
       return selectedItem ? permissions2.getPermissions({ item: selectedItem }) : permissions2.getPermissions({ root: true });
     })
   );
   const appStore = useAppStoreApi();
-  const onChange = useCallback13(createOnChange(fieldName, appStore), [
+  const onChange = useCallback12(createOnChange(fieldName, appStore), [
     fieldName
   ]);
   const { visible = true } = field != null ? field : {};
   if (!field || !id || !visible) return null;
   if (field.type === "slot") return null;
-  return /* @__PURE__ */ jsx27("div", { className: getClassName20("field"), children: /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx29("div", { className: getClassName21("field"), children: /* @__PURE__ */ jsx29(
     AutoFieldPrivate,
     {
       field,
@@ -6361,7 +6602,7 @@ var FieldsChild = ({ fieldName }) => {
     }
   ) }, id);
 };
-var FieldsChildMemo = memo2(FieldsChild);
+var FieldsChildMemo = memo3(FieldsChild);
 var FieldsInternal = ({ wrapFields = true }) => {
   const overrides = useAppStore((s) => s.overrides);
   const componentResolving = useAppStore((s) => {
@@ -6369,7 +6610,7 @@ var FieldsInternal = ({ wrapFields = true }) => {
     const loadingCount = s.selectedItem ? (_a = s.componentState[s.selectedItem.props.id]) == null ? void 0 : _a.loadingCount : (_b = s.componentState["root"]) == null ? void 0 : _b.loadingCount;
     return (loadingCount != null ? loadingCount : 0) > 0;
   });
-  const itemSelector = useAppStore(useShallow6((s) => s.state.ui.itemSelector));
+  const itemSelector = useAppStore(useShallow5((s) => s.state.ui.itemSelector));
   const id = useAppStore((s) => {
     var _a;
     return (_a = s.selectedItem) == null ? void 0 : _a.props.id;
@@ -6378,7 +6619,7 @@ var FieldsInternal = ({ wrapFields = true }) => {
   useRegisterFieldsSlice(appStore, id);
   const fieldsLoading = useAppStore((s) => s.fields.loading);
   const fieldNames = useAppStore(
-    useShallow6((s) => {
+    useShallow5((s) => {
       if (s.fields.id === id) {
         return Object.keys(s.fields.fields);
       }
@@ -6390,47 +6631,56 @@ var FieldsInternal = ({ wrapFields = true }) => {
   return /* @__PURE__ */ jsxs13(
     "form",
     {
-      className: getClassName20({ wrapFields }),
+      className: getClassName21({ wrapFields }),
       onSubmit: (e) => {
         e.preventDefault();
       },
       children: [
-        /* @__PURE__ */ jsx27(Wrapper, { isLoading, itemSelector, children: fieldNames.map((fieldName) => /* @__PURE__ */ jsx27(FieldsChildMemo, { fieldName }, fieldName)) }),
-        isLoading && /* @__PURE__ */ jsx27("div", { className: getClassName20("loadingOverlay"), children: /* @__PURE__ */ jsx27("div", { className: getClassName20("loadingOverlayInner"), children: /* @__PURE__ */ jsx27(Loader, { size: 16 }) }) })
+        /* @__PURE__ */ jsx29(Wrapper, { isLoading, itemSelector, children: fieldNames.map((fieldName) => /* @__PURE__ */ jsx29(FieldsChildMemo, { fieldName }, fieldName)) }),
+        isLoading && /* @__PURE__ */ jsx29("div", { className: getClassName21("loadingOverlay"), children: /* @__PURE__ */ jsx29("div", { className: getClassName21("loadingOverlayInner"), children: /* @__PURE__ */ jsx29(Loader, { size: 16 }) }) })
       ]
     }
   );
 };
-var Fields = memo2(FieldsInternal);
+var Fields = memo3(FieldsInternal);
 
 // components/Puck/components/Components/index.tsx
 init_react_import();
 
 // lib/use-component-list.tsx
 init_react_import();
-import { useEffect as useEffect19, useState as useState17 } from "react";
+import { useEffect as useEffect21, useState as useState18 } from "react";
 
 // components/ComponentList/index.tsx
 init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css#css-module
 init_react_import();
-var styles_module_default16 = { "ComponentList": "_ComponentList_1rrlt_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_1rrlt_5", "ComponentList-content": "_ComponentList-content_1rrlt_9", "ComponentList-title": "_ComponentList-title_1rrlt_17", "ComponentList-titleIcon": "_ComponentList-titleIcon_1rrlt_53" };
+var styles_module_default17 = { "ComponentList": "_ComponentList_1rrlt_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_1rrlt_5", "ComponentList-content": "_ComponentList-content_1rrlt_9", "ComponentList-title": "_ComponentList-title_1rrlt_17", "ComponentList-titleIcon": "_ComponentList-titleIcon_1rrlt_53" };
 
 // components/ComponentList/index.tsx
-import { jsx as jsx28, jsxs as jsxs14 } from "react/jsx-runtime";
-var getClassName21 = get_class_name_factory_default("ComponentList", styles_module_default16);
+import { useEffect as useEffect20 } from "react";
+import { jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
+var getClassName22 = get_class_name_factory_default("ComponentList", styles_module_default17);
 var ComponentListItem = ({
   name,
   label
 }) => {
+  var _a;
   const overrides = useAppStore((s) => s.overrides);
   const canInsert = useAppStore(
     (s) => s.permissions.getPermissions({
       type: name
     }).insert
   );
-  return /* @__PURE__ */ jsx28(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: overrides.componentItem });
+  useEffect20(() => {
+    if (overrides.componentItem) {
+      console.warn(
+        "The `componentItem` override has been deprecated and renamed to `drawerItem`"
+      );
+    }
+  }, [overrides]);
+  return /* @__PURE__ */ jsx30(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: (_a = overrides.componentItem) != null ? _a : overrides.drawerItem });
 };
 var ComponentList = ({
   children,
@@ -6441,12 +6691,12 @@ var ComponentList = ({
   const setUi = useAppStore((s) => s.setUi);
   const componentList = useAppStore((s) => s.state.ui.componentList);
   const { expanded = true } = componentList[id] || {};
-  return /* @__PURE__ */ jsxs14("div", { className: getClassName21({ isExpanded: expanded }), children: [
+  return /* @__PURE__ */ jsxs14("div", { className: getClassName22({ isExpanded: expanded }), children: [
     title && /* @__PURE__ */ jsxs14(
       "button",
       {
         type: "button",
-        className: getClassName21("title"),
+        className: getClassName22("title"),
         onClick: () => setUi({
           componentList: __spreadProps(__spreadValues({}, componentList), {
             [id]: __spreadProps(__spreadValues({}, componentList[id]), {
@@ -6456,14 +6706,14 @@ var ComponentList = ({
         }),
         title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
         children: [
-          /* @__PURE__ */ jsx28("div", { children: title }),
-          /* @__PURE__ */ jsx28("div", { className: getClassName21("titleIcon"), children: expanded ? /* @__PURE__ */ jsx28(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx28(ChevronDown, { size: 12 }) })
+          /* @__PURE__ */ jsx30("div", { children: title }),
+          /* @__PURE__ */ jsx30("div", { className: getClassName22("titleIcon"), children: expanded ? /* @__PURE__ */ jsx30(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx30(ChevronDown, { size: 12 }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx28("div", { className: getClassName21("content"), children: /* @__PURE__ */ jsx28(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
+    /* @__PURE__ */ jsx30("div", { className: getClassName22("content"), children: /* @__PURE__ */ jsx30(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
       var _a;
-      return /* @__PURE__ */ jsx28(
+      return /* @__PURE__ */ jsx30(
         ComponentListItem,
         {
           label: (_a = config.components[componentKey]["label"]) != null ? _a : componentKey,
@@ -6477,12 +6727,12 @@ var ComponentList = ({
 ComponentList.Item = ComponentListItem;
 
 // lib/use-component-list.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var useComponentList = () => {
-  const [componentList, setComponentList] = useState17();
+  const [componentList, setComponentList] = useState18();
   const config = useAppStore((s) => s.config);
   const uiComponentList = useAppStore((s) => s.state.ui.componentList);
-  useEffect19(() => {
+  useEffect21(() => {
     var _a, _b, _c;
     if (Object.keys(uiComponentList).length > 0) {
       const matchedComponents = [];
@@ -6492,7 +6742,7 @@ var useComponentList = () => {
           if (category.visible === false || !category.components) {
             return null;
           }
-          return /* @__PURE__ */ jsx29(
+          return /* @__PURE__ */ jsx31(
             ComponentList,
             {
               id: categoryKey,
@@ -6501,7 +6751,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,
@@ -6521,7 +6771,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",
@@ -6529,7 +6779,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,
@@ -6552,29 +6802,36 @@ var useComponentList = () => {
 
 // components/Puck/components/Components/index.tsx
 import { useMemo as useMemo12 } from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var Components = () => {
   const overrides = useAppStore((s) => s.overrides);
   const componentList = useComponentList();
-  const Wrapper = useMemo12(() => overrides.components || "div", [overrides]);
-  return /* @__PURE__ */ jsx30(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx30(ComponentList, { id: "all" }) });
+  const Wrapper = useMemo12(() => {
+    if (overrides.components) {
+      console.warn(
+        "The `components` override has been deprecated and renamed to `drawer`"
+      );
+    }
+    return overrides.components || overrides.drawer || "div";
+  }, [overrides]);
+  return /* @__PURE__ */ jsx32(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx32(ComponentList, { id: "all" }) });
 };
 
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-import { useCallback as useCallback14, useEffect as useEffect21, useRef as useRef6, useMemo as useMemo13 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect23, useRef as useRef7, useMemo as useMemo13 } from "react";
 
 // components/AutoFrame/index.tsx
 init_react_import();
 import {
   createContext as createContext6,
   useContext as useContext10,
-  useEffect as useEffect20,
-  useState as useState18
+  useEffect as useEffect22,
+  useState as useState19
 } from "react";
 import hash from "object-hash";
 import { createPortal as createPortal3 } from "react-dom";
-import { Fragment as Fragment8, jsx as jsx31 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx33 } from "react/jsx-runtime";
 var styleSelector = 'style, link[rel="stylesheet"]';
 var collectStyles = (doc) => {
   const collected = [];
@@ -6624,7 +6881,7 @@ var CopyHostStyles = ({
   onStylesLoaded = () => null
 }) => {
   const { document: doc, window: win } = useFrame();
-  useEffect20(() => {
+  useEffect22(() => {
     if (!win || !doc) {
       return () => {
       };
@@ -6781,7 +7038,7 @@ var CopyHostStyles = ({
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ jsx31(Fragment8, { children });
+  return /* @__PURE__ */ jsx33(Fragment9, { children });
 };
 var autoFrameContext = createContext6({});
 var useFrame = () => useContext10(autoFrameContext);
@@ -6805,11 +7062,11 @@ function AutoFrame(_a) {
     "onNotReady",
     "frameRef"
   ]);
-  const [loaded, setLoaded] = useState18(false);
-  const [ctx, setCtx] = useState18({});
-  const [mountTarget, setMountTarget] = useState18();
-  const [stylesLoaded, setStylesLoaded] = useState18(false);
-  useEffect20(() => {
+  const [loaded, setLoaded] = useState19(false);
+  const [ctx, setCtx] = useState19({});
+  const [mountTarget, setMountTarget] = useState19();
+  const [stylesLoaded, setStylesLoaded] = useState19(false);
+  useEffect22(() => {
     var _a2;
     if (frameRef.current) {
       const doc = frameRef.current.contentDocument;
@@ -6828,7 +7085,7 @@ function AutoFrame(_a) {
       }
     }
   }, [frameRef, loaded, stylesLoaded]);
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx33(
     "iframe",
     __spreadProps(__spreadValues({}, props), {
       className,
@@ -6838,7 +7095,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,
@@ -6854,14 +7111,14 @@ var AutoFrame_default = AutoFrame;
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css#css-module
 init_react_import();
-var styles_module_default17 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPreview-frame": "_PuckPreview-frame_z2rgu_6" };
+var styles_module_default18 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPreview-frame": "_PuckPreview-frame_z2rgu_6" };
 
 // components/Puck/components/Preview/index.tsx
-import { Fragment as Fragment9, jsx as jsx32 } from "react/jsx-runtime";
-var getClassName22 = get_class_name_factory_default("PuckPreview", styles_module_default17);
+import { Fragment as Fragment10, jsx as jsx34 } from "react/jsx-runtime";
+var getClassName23 = get_class_name_factory_default("PuckPreview", styles_module_default18);
 var useBubbleIframeEvents = (ref) => {
   const status = useAppStore((s) => s.status);
-  useEffect21(() => {
+  useEffect23(() => {
     if (ref.current && status === "READY") {
       const iframe = ref.current;
       const handlePointerMove = (event) => {
@@ -6910,7 +7167,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
   const renderData = useAppStore(
     (s) => s.state.ui.previewMode === "edit" ? null : s.state.data
   );
-  const Page = useCallback14(
+  const Page = useCallback13(
     (pageProps) => {
       var _a, _b;
       const propsWithSlots = useSlots(
@@ -6920,15 +7177,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(Fragment9, { children: propsWithSlots.children });
+      }, propsWithSlots)) : /* @__PURE__ */ jsx34(Fragment10, { children: propsWithSlots.children });
     },
     [config]
   );
   const Frame = useMemo13(() => overrides.iframe, [overrides]);
   const rootProps = root.props || root;
-  const ref = useRef6(null);
+  const ref = useRef7(null);
   useBubbleIframeEvents(ref);
-  const inner = !renderData ? /* @__PURE__ */ jsx32(
+  const inner = !renderData ? /* @__PURE__ */ jsx34(
     Page,
     __spreadProps(__spreadValues({}, rootProps), {
       puck: {
@@ -6938,28 +7195,31 @@ 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 });
-  useEffect21(() => {
+  ) : /* @__PURE__ */ jsx34(Render, { data: renderData, config, metadata });
+  useEffect23(() => {
     if (!iframe.enabled) {
       setStatus("READY");
     }
   }, [iframe.enabled]);
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx34(
     "div",
     {
-      className: getClassName22(),
+      className: getClassName23(),
       id,
       "data-puck-preview": true,
-      onClick: () => {
-        dispatch({ type: "setUi", ui: { itemSelector: null } });
+      onClick: (e) => {
+        const el = e.target;
+        if (!el.hasAttribute("data-puck-component") && !el.hasAttribute("data-puck-dropzone")) {
+          dispatch({ type: "setUi", ui: { itemSelector: null } });
+        }
       },
-      children: iframe.enabled ? /* @__PURE__ */ jsx32(
+      children: iframe.enabled ? /* @__PURE__ */ jsx34(
         AutoFrame_default,
         {
           id: "preview-frame",
-          className: getClassName22("frame"),
+          className: getClassName23("frame"),
           "data-rfd-iframe": true,
           onReady: () => {
             setStatus("READY");
@@ -6968,18 +7228,18 @@ var Preview2 = ({ id = "puck-preview" }) => {
             setStatus("MOUNTED");
           },
           frameRef: ref,
-          children: /* @__PURE__ */ jsx32(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
+          children: /* @__PURE__ */ jsx34(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
             if (Frame) {
-              return /* @__PURE__ */ jsx32(Frame, { document: document2, children: inner });
+              return /* @__PURE__ */ jsx34(Frame, { document: document2, children: inner });
             }
             return inner;
           } })
         }
-      ) : /* @__PURE__ */ jsx32(
+      ) : /* @__PURE__ */ jsx34(
         "div",
         {
           id: "preview-frame",
-          className: getClassName22("frame"),
+          className: getClassName23("frame"),
           ref,
           "data-puck-entry": true,
           children: inner
@@ -6997,7 +7257,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css#css-module
 init_react_import();
-var styles_module_default18 = { "LayerTree": "_LayerTree_7rx04_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_7rx04_11", "LayerTree-helper": "_LayerTree-helper_7rx04_17", "Layer": "_Layer_7rx04_1", "Layer-inner": "_Layer-inner_7rx04_29", "Layer--containsZone": "_Layer--containsZone_7rx04_35", "Layer-clickable": "_Layer-clickable_7rx04_39", "Layer--isSelected": "_Layer--isSelected_7rx04_61", "Layer-chevron": "_Layer-chevron_7rx04_77", "Layer--childIsSelected": "_Layer--childIsSelected_7rx04_78", "Layer-zones": "_Layer-zones_7rx04_82", "Layer-title": "_Layer-title_7rx04_96", "Layer-name": "_Layer-name_7rx04_105", "Layer-icon": "_Layer-icon_7rx04_111", "Layer-zoneIcon": "_Layer-zoneIcon_7rx04_116" };
+var styles_module_default19 = { "LayerTree": "_LayerTree_7rx04_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_7rx04_11", "LayerTree-helper": "_LayerTree-helper_7rx04_17", "Layer": "_Layer_7rx04_1", "Layer-inner": "_Layer-inner_7rx04_29", "Layer--containsZone": "_Layer--containsZone_7rx04_35", "Layer-clickable": "_Layer-clickable_7rx04_39", "Layer--isSelected": "_Layer--isSelected_7rx04_61", "Layer-chevron": "_Layer-chevron_7rx04_77", "Layer--childIsSelected": "_Layer--childIsSelected_7rx04_78", "Layer-zones": "_Layer-zones_7rx04_82", "Layer-title": "_Layer-title_7rx04_96", "Layer-name": "_Layer-name_7rx04_105", "Layer-icon": "_Layer-icon_7rx04_111", "Layer-zoneIcon": "_Layer-zoneIcon_7rx04_116" };
 
 // lib/scroll-into-view.ts
 init_react_import();
@@ -7011,7 +7271,7 @@ var scrollIntoView = (el) => {
 };
 
 // components/LayerTree/index.tsx
-import { useCallback as useCallback15, useContext as useContext11 } from "react";
+import { useCallback as useCallback14, useContext as useContext11 } from "react";
 
 // lib/on-scroll-end.ts
 init_react_import();
@@ -7033,10 +7293,10 @@ var onScrollEnd = (frame, cb) => {
 };
 
 // components/LayerTree/index.tsx
-import { useShallow as useShallow7 } from "zustand/react/shallow";
-import { Fragment as Fragment10, jsx as jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
-var getClassName23 = get_class_name_factory_default("LayerTree", styles_module_default18);
-var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default18);
+import { useShallow as useShallow6 } from "zustand/react/shallow";
+import { Fragment as Fragment11, jsx as jsx35, jsxs as jsxs15 } from "react/jsx-runtime";
+var getClassName24 = get_class_name_factory_default("LayerTree", styles_module_default19);
+var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default19);
 var Layer = ({
   index,
   itemId,
@@ -7046,7 +7306,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 = useCallback15(
+  const setItemSelector = useCallback14(
     (itemSelector2) => {
       dispatch({ type: "setUi", ui: { itemSelector: itemSelector2 } });
     },
@@ -7059,7 +7319,7 @@ var Layer = ({
   const isSelected = selecedItemId === itemId || itemSelector && itemSelector.zone === rootDroppableId && !zoneCompound;
   const nodeData = useAppStore((s) => s.state.indexes.nodes[itemId]);
   const zonesForItem = useAppStore(
-    useShallow7(
+    useShallow6(
       (s) => Object.keys(s.state.indexes.zones).filter(
         (z) => z.split(":")[0] === itemId
       )
@@ -7091,7 +7351,7 @@ var Layer = ({
         childIsSelected
       }),
       children: [
-        /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsx35("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs15(
           "button",
           {
             type: "button",
@@ -7129,22 +7389,22 @@ var Layer = ({
               zoneStore.setState({ hoveringComponent: null });
             },
             children: [
-              containsZone && /* @__PURE__ */ jsx33(
+              containsZone && /* @__PURE__ */ jsx35(
                 "div",
                 {
                   className: getClassNameLayer("chevron"),
                   title: isSelected ? "Collapse" : "Expand",
-                  children: /* @__PURE__ */ jsx33(ChevronDown, { size: "12" })
+                  children: /* @__PURE__ */ jsx35(ChevronDown, { size: "12" })
                 }
               ),
               /* @__PURE__ */ jsxs15("div", { className: getClassNameLayer("title"), children: [
-                /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("icon"), children: nodeData.data.type === "Text" || nodeData.data.type === "Heading" ? /* @__PURE__ */ jsx33(Type, { size: "16" }) : /* @__PURE__ */ jsx33(LayoutGrid, { size: "16" }) }),
-                /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("name"), children: label })
+                /* @__PURE__ */ jsx35("div", { className: getClassNameLayer("icon"), children: nodeData.data.type === "Text" || nodeData.data.type === "Heading" ? /* @__PURE__ */ jsx35(Type, { size: "16" }) : /* @__PURE__ */ jsx35(LayoutGrid, { size: "16" }) }),
+                /* @__PURE__ */ jsx35("div", { className: getClassNameLayer("name"), children: label })
               ] })
             ]
           }
         ) }),
-        containsZone && zonesForItem.map((subzone) => /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ jsx33(LayerTree, { zoneCompound: subzone }) }, subzone))
+        containsZone && zonesForItem.map((subzone) => /* @__PURE__ */ jsx35("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ jsx35(LayerTree, { zoneCompound: subzone }) }, subzone))
       ]
     }
   );
@@ -7163,22 +7423,22 @@ var LayerTree = ({
     return (_d = (_c = (_b = configForComponent == null ? void 0 : configForComponent.fields) == null ? void 0 : _b[slotId]) == null ? void 0 : _c.label) != null ? _d : slotId;
   });
   const contentIds = useAppStore(
-    useShallow7(
+    useShallow6(
       (s) => {
         var _a, _b;
         return zoneCompound ? (_b = (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.contentIds) != null ? _b : [] : [];
       }
     )
   );
-  return /* @__PURE__ */ jsxs15(Fragment10, { children: [
-    label && /* @__PURE__ */ jsxs15("div", { className: getClassName23("zoneTitle"), children: [
-      /* @__PURE__ */ jsx33("div", { className: getClassName23("zoneIcon"), children: /* @__PURE__ */ jsx33(Layers, { size: "16" }) }),
+  return /* @__PURE__ */ jsxs15(Fragment11, { children: [
+    label && /* @__PURE__ */ jsxs15("div", { className: getClassName24("zoneTitle"), children: [
+      /* @__PURE__ */ jsx35("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ jsx35(Layers, { size: "16" }) }),
       label
     ] }),
-    /* @__PURE__ */ jsxs15("ul", { className: getClassName23(), children: [
-      contentIds.length === 0 && /* @__PURE__ */ jsx33("div", { className: getClassName23("helper"), children: "No items" }),
+    /* @__PURE__ */ jsxs15("ul", { className: getClassName24(), children: [
+      contentIds.length === 0 && /* @__PURE__ */ jsx35("div", { className: getClassName24("helper"), children: "No items" }),
       contentIds.map((itemId, i) => {
-        return /* @__PURE__ */ jsx33(
+        return /* @__PURE__ */ jsx35(
           Layer,
           {
             index: i,
@@ -7204,15 +7464,15 @@ 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";
+import { useShallow as useShallow7 } from "zustand/react/shallow";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var Outline = () => {
   const outlineOverride = useAppStore((s) => s.overrides.outline);
   const rootZones = useAppStore(
-    useShallow8((s) => findZonesForArea(s.state, "root"))
+    useShallow7((s) => findZonesForArea(s.state, "root"))
   );
   const Wrapper = useMemo14(() => outlineOverride || "div", [outlineOverride]);
-  return /* @__PURE__ */ jsx34(Wrapper, { children: rootZones.map((zoneCompound) => /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx36(Wrapper, { children: rootZones.map((zoneCompound) => /* @__PURE__ */ jsx36(
     LayerTree,
     {
       label: rootZones.length === 1 ? "" : zoneCompound.split(":")[1],
@@ -7225,30 +7485,30 @@ var Outline = () => {
 // components/Puck/components/Canvas/index.tsx
 init_react_import();
 import {
-  useCallback as useCallback16,
-  useEffect as useEffect23,
+  useCallback as useCallback15,
+  useEffect as useEffect25,
   useMemo as useMemo17,
-  useRef as useRef8,
-  useState as useState20
+  useRef as useRef9,
+  useState as useState21
 } from "react";
 
 // components/ViewportControls/index.tsx
 init_react_import();
-import { useEffect as useEffect22, useMemo as useMemo15, useState as useState19 } from "react";
+import { useEffect as useEffect24, useMemo as useMemo15, useState as useState20 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
 init_react_import();
-var styles_module_default19 = { "ViewportControls": "_ViewportControls_gejzr_1", "ViewportControls-divider": "_ViewportControls-divider_gejzr_15", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_gejzr_21", "ViewportButton--isActive": "_ViewportButton--isActive_gejzr_38", "ViewportButton-inner": "_ViewportButton-inner_gejzr_38" };
+var styles_module_default20 = { "ViewportControls": "_ViewportControls_gejzr_1", "ViewportControls-divider": "_ViewportControls-divider_gejzr_15", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_gejzr_21", "ViewportButton--isActive": "_ViewportButton--isActive_gejzr_38", "ViewportButton-inner": "_ViewportButton-inner_gejzr_38" };
 
 // components/ViewportControls/index.tsx
-import { jsx as jsx35, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs16 } from "react/jsx-runtime";
 var icons = {
-  Smartphone: /* @__PURE__ */ jsx35(Smartphone, { size: 16 }),
-  Tablet: /* @__PURE__ */ jsx35(Tablet, { size: 16 }),
-  Monitor: /* @__PURE__ */ jsx35(Monitor, { size: 16 })
+  Smartphone: /* @__PURE__ */ jsx37(Smartphone, { size: 16 }),
+  Tablet: /* @__PURE__ */ jsx37(Tablet, { size: 16 }),
+  Monitor: /* @__PURE__ */ jsx37(Monitor, { size: 16 })
 };
-var getClassName24 = get_class_name_factory_default("ViewportControls", styles_module_default19);
-var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default19);
+var getClassName25 = get_class_name_factory_default("ViewportControls", styles_module_default20);
+var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default20);
 var ViewportButton = ({
   children,
   height = "auto",
@@ -7257,11 +7517,11 @@ var ViewportButton = ({
   onClick
 }) => {
   const viewports = useAppStore((s) => s.state.ui.viewports);
-  const [isActive, setIsActive] = useState19(false);
-  useEffect22(() => {
+  const [isActive, setIsActive] = useState20(false);
+  useEffect24(() => {
     setIsActive(width === viewports.current.width);
   }, [width, viewports.current.width]);
-  return /* @__PURE__ */ jsx35("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx37("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx37(
     IconButton,
     {
       type: "button",
@@ -7271,7 +7531,7 @@ var ViewportButton = ({
         e.stopPropagation();
         onClick({ width, height });
       },
-      children: /* @__PURE__ */ jsx35("span", { className: getClassNameButton("inner"), children })
+      children: /* @__PURE__ */ jsx37("span", { className: getClassNameButton("inner"), children })
     }
   ) });
 };
@@ -7307,8 +7567,8 @@ var ViewportControls = ({
     ].filter((a) => a.value <= autoZoom).sort((a, b) => a.value > b.value ? 1 : -1),
     [autoZoom]
   );
-  return /* @__PURE__ */ jsxs16("div", { className: getClassName24(), children: [
-    viewports.map((viewport, i) => /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsxs16("div", { className: getClassName25(), children: [
+    viewports.map((viewport, i) => /* @__PURE__ */ jsx37(
       ViewportButton,
       {
         height: viewport.height,
@@ -7319,8 +7579,8 @@ var ViewportControls = ({
       },
       i
     )),
-    /* @__PURE__ */ jsx35("div", { className: getClassName24("divider") }),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx37("div", { className: getClassName25("divider") }),
+    /* @__PURE__ */ jsx37(
       IconButton,
       {
         type: "button",
@@ -7335,10 +7595,10 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ jsx35(ZoomOut, { size: 16 })
+        children: /* @__PURE__ */ jsx37(ZoomOut, { size: 16 })
       }
     ),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx37(
       IconButton,
       {
         type: "button",
@@ -7353,19 +7613,19 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ jsx35(ZoomIn, { size: 16 })
+        children: /* @__PURE__ */ jsx37(ZoomIn, { size: 16 })
       }
     ),
-    /* @__PURE__ */ jsx35("div", { className: getClassName24("divider") }),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx37("div", { className: getClassName25("divider") }),
+    /* @__PURE__ */ jsx37(
       "select",
       {
-        className: getClassName24("zoomSelect"),
+        className: getClassName25("zoomSelect"),
         value: zoom.toString(),
         onChange: (e) => {
           onZoom(parseFloat(e.currentTarget.value));
         },
-        children: zoomOptions.map((option) => /* @__PURE__ */ jsx35(
+        children: zoomOptions.map((option) => /* @__PURE__ */ jsx37(
           "option",
           {
             value: option.value,
@@ -7380,32 +7640,32 @@ var ViewportControls = ({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css#css-module
 init_react_import();
-var styles_module_default20 = { "PuckCanvas": "_PuckCanvas_18jay_1", "PuckCanvas-controls": "_PuckCanvas-controls_18jay_16", "PuckCanvas-inner": "_PuckCanvas-inner_18jay_21", "PuckCanvas-root": "_PuckCanvas-root_18jay_30", "PuckCanvas--ready": "_PuckCanvas--ready_18jay_55", "PuckCanvas-loader": "_PuckCanvas-loader_18jay_60", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_18jay_70" };
+var styles_module_default21 = { "PuckCanvas": "_PuckCanvas_18jay_1", "PuckCanvas-controls": "_PuckCanvas-controls_18jay_16", "PuckCanvas-inner": "_PuckCanvas-inner_18jay_21", "PuckCanvas-root": "_PuckCanvas-root_18jay_30", "PuckCanvas--ready": "_PuckCanvas--ready_18jay_55", "PuckCanvas-loader": "_PuckCanvas-loader_18jay_60", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_18jay_70" };
 
 // components/Puck/components/Canvas/index.tsx
-import { useShallow as useShallow9 } from "zustand/react/shallow";
+import { useShallow as useShallow8 } from "zustand/react/shallow";
 
 // lib/frame-context.tsx
 init_react_import();
 import {
   createContext as createContext7,
   useContext as useContext12,
-  useRef as useRef7,
+  useRef as useRef8,
   useMemo as useMemo16
 } from "react";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var FrameContext = createContext7(null);
 var FrameProvider = ({
   children
 }) => {
-  const frameRef = useRef7(null);
+  const frameRef = useRef8(null);
   const value = useMemo16(
     () => ({
       frameRef
     }),
     []
   );
-  return /* @__PURE__ */ jsx36(FrameContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx38(FrameContext.Provider, { value, children });
 };
 var useCanvasFrame = () => {
   const context = useContext12(FrameContext);
@@ -7416,9 +7676,10 @@ var useCanvasFrame = () => {
 };
 
 // components/Puck/components/Canvas/index.tsx
-import { Fragment as Fragment11, jsx as jsx37, jsxs as jsxs17 } from "react/jsx-runtime";
-var getClassName25 = get_class_name_factory_default("PuckCanvas", styles_module_default20);
+import { Fragment as Fragment12, jsx as jsx39, jsxs as jsxs17 } from "react/jsx-runtime";
+var getClassName26 = get_class_name_factory_default("PuckCanvas", styles_module_default21);
 var ZOOM_ON_CHANGE = true;
+var TRANSITION_DURATION = 150;
 var Canvas = () => {
   const { frameRef } = useCanvasFrame();
   const resetAutoZoom = useResetAutoZoom(frameRef);
@@ -7431,7 +7692,7 @@ var Canvas = () => {
     status,
     iframe
   } = useAppStore(
-    useShallow9((s) => ({
+    useShallow8((s) => ({
       dispatch: s.dispatch,
       overrides: s.overrides,
       setUi: s.setUi,
@@ -7448,7 +7709,7 @@ var Canvas = () => {
     rightSideBarWidth,
     viewports
   } = useAppStore(
-    useShallow9((s) => ({
+    useShallow8((s) => ({
       leftSideBarVisible: s.state.ui.leftSideBarVisible,
       rightSideBarVisible: s.state.ui.rightSideBarVisible,
       leftSideBarWidth: s.state.ui.leftSideBarWidth,
@@ -7456,17 +7717,17 @@ var Canvas = () => {
       viewports: s.state.ui.viewports
     }))
   );
-  const [showTransition, setShowTransition] = useState20(false);
-  const isResettingZoomRef = useRef8(false);
+  const [showTransition, setShowTransition] = useState21(false);
+  const isResizingRef = useRef9(false);
   const defaultRender = useMemo17(() => {
-    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx37(Fragment11, { children });
+    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx39(Fragment12, { children });
     return PuckDefault;
   }, []);
   const CustomPreview = useMemo17(
     () => overrides.preview || defaultRender,
     [overrides]
   );
-  const getFrameDimensions = useCallback16(() => {
+  const getFrameDimensions = useCallback15(() => {
     if (frameRef.current) {
       const frame = frameRef.current;
       const box = getBox(frame);
@@ -7474,23 +7735,17 @@ var Canvas = () => {
     }
     return { width: 0, height: 0 };
   }, [frameRef]);
-  useEffect23(() => {
-    resetAutoZoom({
-      isResettingRef: isResettingZoomRef,
-      setShowTransition,
-      showTransition: false,
-      viewports
-    });
+  useEffect25(() => {
+    resetAutoZoom();
   }, [
     frameRef,
     leftSideBarVisible,
     rightSideBarVisible,
     leftSideBarWidth,
     rightSideBarWidth,
-    resetAutoZoom,
     viewports
   ]);
-  useEffect23(() => {
+  useEffect25(() => {
     const { height: frameHeight } = getFrameDimensions();
     if (viewports.current.height === "auto") {
       setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
@@ -7498,31 +7753,25 @@ var Canvas = () => {
       }));
     }
   }, [zoomConfig.zoom, getFrameDimensions, setZoomConfig]);
-  useEffect23(() => {
+  useEffect25(() => {
     if (ZOOM_ON_CHANGE) {
-      resetAutoZoom({
-        isResettingRef: isResettingZoomRef,
-        setShowTransition,
-        showTransition: true,
-        viewports
-      });
-    }
-  }, [viewports.current.width, resetAutoZoom, viewports]);
-  useEffect23(() => {
-    const cb = () => {
-      resetAutoZoom({
-        isResettingRef: isResettingZoomRef,
-        setShowTransition,
-        showTransition: false
-      });
-    };
-    window.addEventListener("resize", cb);
+      resetAutoZoom();
+    }
+  }, [viewports.current.width, viewports]);
+  useEffect25(() => {
+    if (!frameRef.current) return;
+    const resizeObserver = new ResizeObserver(() => {
+      if (!isResizingRef.current) {
+        resetAutoZoom();
+      }
+    });
+    resizeObserver.observe(frameRef.current);
     return () => {
-      window.removeEventListener("resize", cb);
+      resizeObserver.disconnect();
     };
-  }, [resetAutoZoom]);
-  const [showLoader, setShowLoader] = useState20(false);
-  useEffect23(() => {
+  }, [frameRef.current]);
+  const [showLoader, setShowLoader] = useState21(false);
+  useEffect25(() => {
     setTimeout(() => {
       setShowLoader(true);
     }, 500);
@@ -7530,23 +7779,29 @@ var Canvas = () => {
   return /* @__PURE__ */ jsxs17(
     "div",
     {
-      className: getClassName25({
+      className: getClassName26({
         ready: status === "READY" || !iframe.enabled || !iframe.waitForStyles,
         showLoader
       }),
-      onClick: () => dispatch({
-        type: "setUi",
-        ui: { itemSelector: null },
-        recordHistory: true
-      }),
+      onClick: (e) => {
+        const el = e.target;
+        if (!el.hasAttribute("data-puck-component") && !el.hasAttribute("data-puck-dropzone")) {
+          dispatch({
+            type: "setUi",
+            ui: { itemSelector: null },
+            recordHistory: true
+          });
+        }
+      },
       children: [
-        viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx37("div", { className: getClassName25("controls"), children: /* @__PURE__ */ jsx37(
+        viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx39("div", { className: getClassName26("controls"), children: /* @__PURE__ */ jsx39(
           ViewportControls,
           {
             autoZoom: zoomConfig.autoZoom,
             zoom: zoomConfig.zoom,
             onViewportChange: (viewport) => {
               setShowTransition(true);
+              isResizingRef.current = true;
               const uiViewport = __spreadProps(__spreadValues({}, viewport), {
                 height: viewport.height || "auto",
                 zoom: zoomConfig.zoom
@@ -7558,42 +7813,39 @@ var Canvas = () => {
               setUi(newUi);
               if (ZOOM_ON_CHANGE) {
                 resetAutoZoom({
-                  isResettingRef: isResettingZoomRef,
-                  setShowTransition,
-                  showTransition: true,
                   viewports: __spreadProps(__spreadValues({}, viewports), { current: uiViewport })
                 });
               }
             },
             onZoom: (zoom) => {
               setShowTransition(true);
+              isResizingRef.current = true;
               setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), { zoom }));
             }
           }
         ) }),
-        /* @__PURE__ */ jsxs17("div", { className: getClassName25("inner"), ref: frameRef, children: [
-          /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsxs17("div", { className: getClassName26("inner"), ref: frameRef, children: [
+          /* @__PURE__ */ jsx39(
             "div",
             {
-              className: getClassName25("root"),
+              className: getClassName26("root"),
               style: {
                 width: iframe.enabled ? viewports.current.width : "100%",
                 height: zoomConfig.rootHeight,
                 transform: iframe.enabled ? `scale(${zoomConfig.zoom})` : void 0,
-                transition: showTransition ? "width 150ms ease-out, height 150ms ease-out, transform 150ms ease-out" : "",
+                transition: showTransition ? `width ${TRANSITION_DURATION}ms ease-out, height ${TRANSITION_DURATION}ms ease-out, transform ${TRANSITION_DURATION}ms ease-out` : "",
                 overflow: iframe.enabled ? void 0 : "auto"
               },
               suppressHydrationWarning: true,
               id: "puck-canvas-root",
               onTransitionEnd: () => {
-                resetAutoZoom({
-                  isResettingRef: isResettingZoomRef
-                });
+                setShowTransition(false);
+                isResizingRef.current = false;
               },
-              children: /* @__PURE__ */ jsx37(CustomPreview, { children: /* @__PURE__ */ jsx37(Preview2, {}) })
+              children: /* @__PURE__ */ jsx39(CustomPreview, { children: /* @__PURE__ */ jsx39(Preview2, {}) })
             }
           ),
-          /* @__PURE__ */ jsx37("div", { className: getClassName25("loader"), children: /* @__PURE__ */ jsx37(Loader, { size: 24 }) })
+          /* @__PURE__ */ jsx39("div", { className: getClassName26("loader"), children: /* @__PURE__ */ jsx39(Loader, { size: 24 }) })
         ] })
       ]
     }
@@ -7612,8 +7864,11 @@ var loadOverrides = ({
 }) => {
   const collected = __spreadValues({}, overrides);
   plugins == null ? void 0 : plugins.forEach((plugin) => {
+    if (!plugin.overrides) return;
     Object.keys(plugin.overrides).forEach((_overridesType) => {
+      var _a;
       const overridesType = _overridesType;
+      if (!((_a = plugin.overrides) == null ? void 0 : _a[overridesType])) return;
       if (overridesType === "fieldTypes") {
         const fieldTypes = plugin.overrides.fieldTypes;
         Object.keys(fieldTypes).forEach((fieldType) => {
@@ -7648,19 +7903,19 @@ var useLoadedOverrides = ({
 
 // components/DefaultOverride/index.tsx
 init_react_import();
-import { Fragment as Fragment12, jsx as jsx38 } from "react/jsx-runtime";
-var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx38(Fragment12, { children });
+import { Fragment as Fragment13, jsx as jsx40 } from "react/jsx-runtime";
+var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx40(Fragment13, { children });
 
 // lib/use-inject-css.ts
 init_react_import();
-import { useEffect as useEffect24, useState as useState21 } from "react";
+import { useEffect as useEffect26, useState as useState22 } from "react";
 var styles = ``;
 var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
-  const [el, setEl] = useState21();
-  useEffect24(() => {
+  const [el, setEl] = useState22();
+  useEffect26(() => {
     setEl(document.createElement("style"));
   }, []);
-  useEffect24(() => {
+  useEffect26(() => {
     var _a;
     if (!el || typeof window === "undefined") {
       return;
@@ -7680,10 +7935,10 @@ var useInjectGlobalCss = (iframeEnabled) => {
 
 // lib/use-preview-mode-hotkeys.ts
 init_react_import();
-import { useCallback as useCallback17 } from "react";
+import { useCallback as useCallback16 } from "react";
 var usePreviewModeHotkeys = () => {
   const appStore = useAppStoreApi();
-  const toggleInteractive = useCallback17(() => {
+  const toggleInteractive = useCallback16(() => {
     const dispatch = appStore.getState().dispatch;
     dispatch({
       type: "setUi",
@@ -7701,18 +7956,18 @@ import fdeq from "fast-deep-equal";
 
 // components/Puck/components/Header/index.tsx
 init_react_import();
-import { memo as memo3, useCallback as useCallback18, useMemo as useMemo19, useState as useState22 } from "react";
+import { memo as memo4, useCallback as useCallback17, useMemo as useMemo19, useState as useState23 } from "react";
 
 // components/MenuBar/index.tsx
 init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css#css-module
 init_react_import();
-var styles_module_default21 = { "MenuBar": "_MenuBar_8pf8c_1", "MenuBar--menuOpen": "_MenuBar--menuOpen_8pf8c_14", "MenuBar-inner": "_MenuBar-inner_8pf8c_29", "MenuBar-history": "_MenuBar-history_8pf8c_45" };
+var styles_module_default22 = { "MenuBar": "_MenuBar_8pf8c_1", "MenuBar--menuOpen": "_MenuBar--menuOpen_8pf8c_14", "MenuBar-inner": "_MenuBar-inner_8pf8c_29", "MenuBar-history": "_MenuBar-history_8pf8c_45" };
 
 // components/MenuBar/index.tsx
-import { Fragment as Fragment13, jsx as jsx39, jsxs as jsxs18 } from "react/jsx-runtime";
-var getClassName26 = get_class_name_factory_default("MenuBar", styles_module_default21);
+import { Fragment as Fragment14, jsx as jsx41, jsxs as jsxs18 } from "react/jsx-runtime";
+var getClassName27 = get_class_name_factory_default("MenuBar", styles_module_default22);
 function MenuBar({
   menuOpen = false,
   renderHeaderActions,
@@ -7722,10 +7977,10 @@ function MenuBar({
   const forward = useAppStore((s) => s.history.forward);
   const hasFuture = useAppStore((s) => s.history.hasFuture());
   const hasPast = useAppStore((s) => s.history.hasPast());
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx41(
     "div",
     {
-      className: getClassName26({ menuOpen }),
+      className: getClassName27({ menuOpen }),
       onClick: (event) => {
         var _a;
         const element = event.target;
@@ -7736,30 +7991,30 @@ function MenuBar({
           setMenuOpen(false);
         }
       },
-      children: /* @__PURE__ */ jsxs18("div", { className: getClassName26("inner"), children: [
-        /* @__PURE__ */ jsxs18("div", { className: getClassName26("history"), children: [
-          /* @__PURE__ */ jsx39(
+      children: /* @__PURE__ */ jsxs18("div", { className: getClassName27("inner"), children: [
+        /* @__PURE__ */ jsxs18("div", { className: getClassName27("history"), children: [
+          /* @__PURE__ */ jsx41(
             IconButton,
             {
               type: "button",
               title: "undo",
               disabled: !hasPast,
               onClick: back,
-              children: /* @__PURE__ */ jsx39(Undo2, { size: 21 })
+              children: /* @__PURE__ */ jsx41(Undo2, { size: 21 })
             }
           ),
-          /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx41(
             IconButton,
             {
               type: "button",
               title: "redo",
               disabled: !hasFuture,
               onClick: forward,
-              children: /* @__PURE__ */ jsx39(Redo2, { size: 21 })
+              children: /* @__PURE__ */ jsx41(Redo2, { size: 21 })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx39(Fragment13, { children: renderHeaderActions && renderHeaderActions() })
+        /* @__PURE__ */ jsx41(Fragment14, { children: renderHeaderActions && renderHeaderActions() })
       ] })
     }
   );
@@ -7767,11 +8022,11 @@ function MenuBar({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Header/styles.module.css#css-module
 init_react_import();
-var styles_module_default22 = { "PuckHeader": "_PuckHeader_15xnq_1", "PuckHeader-inner": "_PuckHeader-inner_15xnq_10", "PuckHeader-toggle": "_PuckHeader-toggle_15xnq_20", "PuckHeader--rightSideBarVisible": "_PuckHeader--rightSideBarVisible_15xnq_27", "PuckHeader-rightSideBarToggle": "_PuckHeader-rightSideBarToggle_15xnq_27", "PuckHeader--leftSideBarVisible": "_PuckHeader--leftSideBarVisible_15xnq_28", "PuckHeader-leftSideBarToggle": "_PuckHeader-leftSideBarToggle_15xnq_28", "PuckHeader-title": "_PuckHeader-title_15xnq_32", "PuckHeader-path": "_PuckHeader-path_15xnq_36", "PuckHeader-tools": "_PuckHeader-tools_15xnq_43", "PuckHeader-menuButton": "_PuckHeader-menuButton_15xnq_49", "PuckHeader--menuOpen": "_PuckHeader--menuOpen_15xnq_54" };
+var styles_module_default23 = { "PuckHeader": "_PuckHeader_15xnq_1", "PuckHeader-inner": "_PuckHeader-inner_15xnq_10", "PuckHeader-toggle": "_PuckHeader-toggle_15xnq_20", "PuckHeader--rightSideBarVisible": "_PuckHeader--rightSideBarVisible_15xnq_27", "PuckHeader-rightSideBarToggle": "_PuckHeader-rightSideBarToggle_15xnq_27", "PuckHeader--leftSideBarVisible": "_PuckHeader--leftSideBarVisible_15xnq_28", "PuckHeader-leftSideBarToggle": "_PuckHeader-leftSideBarToggle_15xnq_28", "PuckHeader-title": "_PuckHeader-title_15xnq_32", "PuckHeader-path": "_PuckHeader-path_15xnq_36", "PuckHeader-tools": "_PuckHeader-tools_15xnq_43", "PuckHeader-menuButton": "_PuckHeader-menuButton_15xnq_49", "PuckHeader--menuOpen": "_PuckHeader--menuOpen_15xnq_54" };
 
 // components/Puck/components/Header/index.tsx
-import { Fragment as Fragment14, jsx as jsx40, jsxs as jsxs19 } from "react/jsx-runtime";
-var getClassName27 = get_class_name_factory_default("PuckHeader", styles_module_default22);
+import { Fragment as Fragment15, jsx as jsx42, jsxs as jsxs19 } from "react/jsx-runtime";
+var getClassName28 = get_class_name_factory_default("PuckHeader", styles_module_default23);
 var HeaderInner = () => {
   const {
     onPublish,
@@ -7792,7 +8047,7 @@ var HeaderInner = () => {
         var _b = _a, { actions } = _b, props = __objRest(_b, ["actions"]);
         const Comp = renderHeader;
         const appState = useAppStore((s) => s.state);
-        return /* @__PURE__ */ jsx40(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
+        return /* @__PURE__ */ jsx42(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
       };
       return RenderHeader;
     }
@@ -7806,19 +8061,19 @@ var HeaderInner = () => {
       const RenderHeader = (props) => {
         const Comp = renderHeaderActions;
         const appState = useAppStore((s) => s.state);
-        return /* @__PURE__ */ jsx40(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
+        return /* @__PURE__ */ jsx42(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
       };
       return RenderHeader;
     }
     return DefaultOverride;
-  }, [renderHeader]);
+  }, [renderHeaderActions]);
   const CustomHeader = useAppStore(
     (s) => s.overrides.header || defaultHeaderRender
   );
   const CustomHeaderActions = useAppStore(
     (s) => s.overrides.headerActions || defaultHeaderActionsRender
   );
-  const [menuOpen, setMenuOpen] = useState22(false);
+  const [menuOpen, setMenuOpen] = useState23(false);
   const rootTitle = useAppStore((s) => {
     var _a, _b;
     const rootData = (_a = s.state.indexes.nodes["root"]) == null ? void 0 : _a.data;
@@ -7828,7 +8083,7 @@ var HeaderInner = () => {
   const rightSideBarVisible = useAppStore(
     (s) => s.state.ui.rightSideBarVisible
   );
-  const toggleSidebars = useCallback18(
+  const toggleSidebars = useCallback17(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -7842,27 +8097,27 @@ var HeaderInner = () => {
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx42(
     CustomHeader,
     {
-      actions: /* @__PURE__ */ jsx40(Fragment14, { children: /* @__PURE__ */ jsx40(CustomHeaderActions, { children: /* @__PURE__ */ jsx40(
+      actions: /* @__PURE__ */ jsx42(Fragment15, { children: /* @__PURE__ */ jsx42(CustomHeaderActions, { children: /* @__PURE__ */ jsx42(
         Button,
         {
           onClick: () => {
             const data = appStore.getState().state.data;
             onPublish && onPublish(data);
           },
-          icon: /* @__PURE__ */ jsx40(Globe, { size: "14px" }),
+          icon: /* @__PURE__ */ jsx42(Globe, { size: "14px" }),
           children: "Publish"
         }
       ) }) }),
-      children: /* @__PURE__ */ jsx40(
+      children: /* @__PURE__ */ jsx42(
         "header",
         {
-          className: getClassName27({ leftSideBarVisible, rightSideBarVisible }),
-          children: /* @__PURE__ */ jsxs19("div", { className: getClassName27("inner"), children: [
-            /* @__PURE__ */ jsxs19("div", { className: getClassName27("toggle"), children: [
-              /* @__PURE__ */ jsx40("div", { className: getClassName27("leftSideBarToggle"), children: /* @__PURE__ */ jsx40(
+          className: getClassName28({ leftSideBarVisible, rightSideBarVisible }),
+          children: /* @__PURE__ */ jsxs19("div", { className: getClassName28("inner"), children: [
+            /* @__PURE__ */ jsxs19("div", { className: getClassName28("toggle"), children: [
+              /* @__PURE__ */ jsx42("div", { className: getClassName28("leftSideBarToggle"), children: /* @__PURE__ */ jsx42(
                 IconButton,
                 {
                   type: "button",
@@ -7870,10 +8125,10 @@ var HeaderInner = () => {
                     toggleSidebars("left");
                   },
                   title: "Toggle left sidebar",
-                  children: /* @__PURE__ */ jsx40(PanelLeft, { focusable: "false" })
+                  children: /* @__PURE__ */ jsx42(PanelLeft, { focusable: "false" })
                 }
               ) }),
-              /* @__PURE__ */ jsx40("div", { className: getClassName27("rightSideBarToggle"), children: /* @__PURE__ */ jsx40(
+              /* @__PURE__ */ jsx42("div", { className: getClassName28("rightSideBarToggle"), children: /* @__PURE__ */ jsx42(
                 IconButton,
                 {
                   type: "button",
@@ -7881,19 +8136,19 @@ var HeaderInner = () => {
                     toggleSidebars("right");
                   },
                   title: "Toggle right sidebar",
-                  children: /* @__PURE__ */ jsx40(PanelRight, { focusable: "false" })
+                  children: /* @__PURE__ */ jsx42(PanelRight, { focusable: "false" })
                 }
               ) })
             ] }),
-            /* @__PURE__ */ jsx40("div", { className: getClassName27("title"), children: /* @__PURE__ */ jsxs19(Heading, { rank: "2", size: "xs", children: [
+            /* @__PURE__ */ jsx42("div", { className: getClassName28("title"), children: /* @__PURE__ */ jsxs19(Heading, { rank: "2", size: "xs", children: [
               headerTitle || rootTitle || "Page",
-              headerPath && /* @__PURE__ */ jsxs19(Fragment14, { children: [
+              headerPath && /* @__PURE__ */ jsxs19(Fragment15, { children: [
                 " ",
-                /* @__PURE__ */ jsx40("code", { className: getClassName27("path"), children: headerPath })
+                /* @__PURE__ */ jsx42("code", { className: getClassName28("path"), children: headerPath })
               ] })
             ] }) }),
-            /* @__PURE__ */ jsxs19("div", { className: getClassName27("tools"), children: [
-              /* @__PURE__ */ jsx40("div", { className: getClassName27("menuButton"), children: /* @__PURE__ */ jsx40(
+            /* @__PURE__ */ jsxs19("div", { className: getClassName28("tools"), children: [
+              /* @__PURE__ */ jsx42("div", { className: getClassName28("menuButton"), children: /* @__PURE__ */ jsx42(
                 IconButton,
                 {
                   type: "button",
@@ -7901,23 +8156,23 @@ var HeaderInner = () => {
                     return setMenuOpen(!menuOpen);
                   },
                   title: "Toggle menu bar",
-                  children: menuOpen ? /* @__PURE__ */ jsx40(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx40(ChevronDown, { focusable: "false" })
+                  children: menuOpen ? /* @__PURE__ */ jsx42(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx42(ChevronDown, { focusable: "false" })
                 }
               ) }),
-              /* @__PURE__ */ jsx40(
+              /* @__PURE__ */ jsx42(
                 MenuBar,
                 {
                   dispatch,
                   onPublish,
                   menuOpen,
-                  renderHeaderActions: () => /* @__PURE__ */ jsx40(CustomHeaderActions, { children: /* @__PURE__ */ jsx40(
+                  renderHeaderActions: () => /* @__PURE__ */ jsx42(CustomHeaderActions, { children: /* @__PURE__ */ jsx42(
                     Button,
                     {
                       onClick: () => {
                         const data = appStore.getState().state.data;
                         onPublish && onPublish(data);
                       },
-                      icon: /* @__PURE__ */ jsx40(Globe, { size: "14px" }),
+                      icon: /* @__PURE__ */ jsx42(Globe, { size: "14px" }),
                       children: "Publish"
                     }
                   ) }),
@@ -7931,22 +8186,22 @@ var HeaderInner = () => {
     }
   );
 };
-var Header = memo3(HeaderInner);
+var Header = memo4(HeaderInner);
 
 // components/Puck/components/Sidebar/index.tsx
 init_react_import();
 
 // components/Puck/components/ResizeHandle/index.tsx
 init_react_import();
-import { useCallback as useCallback19, useRef as useRef9 } from "react";
+import { useCallback as useCallback18, useRef as useRef10 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/ResizeHandle/styles.module.css#css-module
 init_react_import();
-var styles_module_default23 = { "ResizeHandle": "_ResizeHandle_v7w0r_1", "ResizeHandle--left": "_ResizeHandle--left_v7w0r_15", "ResizeHandle--right": "_ResizeHandle--right_v7w0r_19" };
+var styles_module_default24 = { "ResizeHandle": "_ResizeHandle_144bf_2", "ResizeHandle--left": "_ResizeHandle--left_144bf_16", "ResizeHandle--right": "_ResizeHandle--right_144bf_20" };
 
 // components/Puck/components/ResizeHandle/index.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
-var getClassName28 = get_class_name_factory_default("ResizeHandle", styles_module_default23);
+import { jsx as jsx43 } from "react/jsx-runtime";
+var getClassName29 = get_class_name_factory_default("ResizeHandle", styles_module_default24);
 var ResizeHandle = ({
   position,
   sidebarRef,
@@ -7955,11 +8210,11 @@ var ResizeHandle = ({
 }) => {
   const { frameRef } = useCanvasFrame();
   const resetAutoZoom = useResetAutoZoom(frameRef);
-  const handleRef = useRef9(null);
-  const isDragging = useRef9(false);
-  const startX = useRef9(0);
-  const startWidth = useRef9(0);
-  const handleMouseMove = useCallback19(
+  const handleRef = useRef10(null);
+  const isDragging = useRef10(false);
+  const startX = useRef10(0);
+  const startWidth = useRef10(0);
+  const handleMouseMove = useCallback18(
     (e) => {
       if (!isDragging.current) return;
       const delta = e.clientX - startX.current;
@@ -7970,7 +8225,7 @@ var ResizeHandle = ({
     },
     [onResize, position]
   );
-  const handleMouseUp = useCallback19(() => {
+  const handleMouseUp = useCallback18(() => {
     var _a;
     if (!isDragging.current) return;
     isDragging.current = false;
@@ -7985,8 +8240,8 @@ var ResizeHandle = ({
     const finalWidth = ((_a = sidebarRef.current) == null ? void 0 : _a.getBoundingClientRect().width) || 0;
     onResizeEnd(finalWidth);
     resetAutoZoom();
-  }, [onResizeEnd, resetAutoZoom]);
-  const handleMouseDown = useCallback19(
+  }, [onResizeEnd]);
+  const handleMouseDown = useCallback18(
     (e) => {
       var _a;
       isDragging.current = true;
@@ -8004,11 +8259,11 @@ var ResizeHandle = ({
     },
     [position, handleMouseMove, handleMouseUp]
   );
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx43(
     "div",
     {
       ref: handleRef,
-      className: getClassName28({ [position]: true }),
+      className: getClassName29({ [position]: true }),
       onMouseDown: handleMouseDown
     }
   );
@@ -8016,24 +8271,23 @@ var ResizeHandle = ({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Sidebar/styles.module.css#css-module
 init_react_import();
-var styles_module_default24 = { "Sidebar": "_Sidebar_1xksb_1", "Sidebar--left": "_Sidebar--left_1xksb_8", "Sidebar--right": "_Sidebar--right_1xksb_14", "Sidebar-resizeHandle": "_Sidebar-resizeHandle_1xksb_20" };
+var styles_module_default25 = { "Sidebar": "_Sidebar_1xksb_1", "Sidebar--left": "_Sidebar--left_1xksb_8", "Sidebar--right": "_Sidebar--right_1xksb_14", "Sidebar-resizeHandle": "_Sidebar-resizeHandle_1xksb_20" };
 
 // components/Puck/components/Sidebar/index.tsx
-import { Fragment as Fragment15, jsx as jsx42, jsxs as jsxs20 } from "react/jsx-runtime";
-var getClassName29 = get_class_name_factory_default("Sidebar", styles_module_default24);
+import { Fragment as Fragment16, jsx as jsx44, jsxs as jsxs20 } from "react/jsx-runtime";
+var getClassName30 = get_class_name_factory_default("Sidebar", styles_module_default25);
 var Sidebar = ({
   position,
   sidebarRef,
   isVisible,
-  width,
   onResize,
   onResizeEnd,
   children
 }) => {
   if (!isVisible) return null;
-  return /* @__PURE__ */ jsxs20(Fragment15, { children: [
-    /* @__PURE__ */ jsx42("div", { ref: sidebarRef, className: getClassName29({ [position]: true }), children }),
-    /* @__PURE__ */ jsx42("div", { className: `${getClassName29("resizeHandle")}`, children: /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsxs20(Fragment16, { children: [
+    /* @__PURE__ */ jsx44("div", { ref: sidebarRef, className: getClassName30({ [position]: true }), children }),
+    /* @__PURE__ */ jsx44("div", { className: `${getClassName30("resizeHandle")}`, children: /* @__PURE__ */ jsx44(
       ResizeHandle,
       {
         position,
@@ -8047,25 +8301,26 @@ var Sidebar = ({
 
 // lib/use-sidebar-resize.ts
 init_react_import();
-import { useCallback as useCallback20, useEffect as useEffect26, useRef as useRef10, useState as useState23 } from "react";
+import { useCallback as useCallback19, useEffect as useEffect28, useRef as useRef11, useState as useState24 } from "react";
 function useSidebarResize(position, dispatch) {
-  const [width, setWidth] = useState23(null);
-  const sidebarRef = useRef10(null);
+  const [width, setWidth] = useState24(null);
+  const sidebarRef = useRef11(null);
   const storeWidth = useAppStore(
     (s) => position === "left" ? s.state.ui.leftSideBarWidth : s.state.ui.rightSideBarWidth
   );
-  useEffect26(() => {
+  useEffect28(() => {
     if (typeof window !== "undefined" && !storeWidth) {
       try {
         const savedWidths = localStorage.getItem("puck-sidebar-widths");
         if (savedWidths) {
           const widths = JSON.parse(savedWidths);
           const savedWidth = widths[position];
+          const key = position === "left" ? "leftSideBarWidth" : "rightSideBarWidth";
           if (savedWidth) {
             dispatch({
               type: "setUi",
               ui: {
-                [position === "left" ? "leftSideBarWidth" : "rightSideBarWidth"]: savedWidth
+                [key]: savedWidth
               }
             });
           }
@@ -8078,12 +8333,12 @@ function useSidebarResize(position, dispatch) {
       }
     }
   }, [dispatch, position, storeWidth]);
-  useEffect26(() => {
+  useEffect28(() => {
     if (storeWidth !== void 0) {
       setWidth(storeWidth);
     }
   }, [storeWidth]);
-  const handleResizeEnd = useCallback20(
+  const handleResizeEnd = useCallback19(
     (width2) => {
       dispatch({
         type: "setUi",
@@ -8126,9 +8381,9 @@ function useSidebarResize(position, dispatch) {
 }
 
 // components/Puck/index.tsx
-import { jsx as jsx43, jsxs as jsxs21 } from "react/jsx-runtime";
-var getClassName30 = get_class_name_factory_default("Puck", styles_module_default14);
-var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_module_default14);
+import { jsx as jsx45, jsxs as jsxs21 } from "react/jsx-runtime";
+var getClassName31 = get_class_name_factory_default("Puck", styles_module_default15);
+var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_module_default15);
 var FieldSideBar = () => {
   const title = useAppStore(
     (s) => {
@@ -8136,11 +8391,11 @@ var FieldSideBar = () => {
       return s.selectedItem ? (_b = (_a = s.config.components[s.selectedItem.type]) == null ? void 0 : _a["label"]) != null ? _b : s.selectedItem.type.toString() : "Page";
     }
   );
-  return /* @__PURE__ */ jsx43(SidebarSection, { noPadding: true, noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx43(Fields, {}) });
+  return /* @__PURE__ */ jsx45(SidebarSection, { noPadding: true, noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx45(Fields, {}) });
 };
 var propsContext = createContext8({});
 function PropsProvider(props) {
-  return /* @__PURE__ */ jsx43(propsContext.Provider, { value: props, children: props.children });
+  return /* @__PURE__ */ jsx45(propsContext.Provider, { value: props, children: props.children });
 }
 var usePropsContext = () => useContext13(propsContext);
 function PuckProvider({ children }) {
@@ -8156,7 +8411,8 @@ function PuckProvider({ children }) {
     iframe: _iframe,
     initialHistory: _initialHistory,
     metadata,
-    onAction
+    onAction,
+    fieldTransforms
   } = usePropsContext();
   const iframe = useMemo20(
     () => __spreadValues({
@@ -8165,7 +8421,7 @@ function PuckProvider({ children }) {
     }, _iframe),
     [_iframe]
   );
-  const [generatedAppState] = useState24(() => {
+  const [generatedAppState] = useState25(() => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
@@ -8194,7 +8450,7 @@ function PuckProvider({ children }) {
       }
     }
     if (Object.keys((initialData == null ? void 0 : initialData.root) || {}).length > 0 && !((_g = initialData == null ? void 0 : initialData.root) == null ? void 0 : _g.props)) {
-      console.error(
+      console.warn(
         "Warning: Defining props on `root` is deprecated. Please use `root.props`, or republish this page to migrate automatically."
       );
     }
@@ -8225,7 +8481,7 @@ function PuckProvider({ children }) {
     return walkAppState(newAppState, config);
   });
   const { appendData = true } = _initialHistory || {};
-  const [blendedHistories] = useState24(
+  const [blendedHistories] = useState25(
     [
       ...(_initialHistory == null ? void 0 : _initialHistory.histories) || [],
       ...appendData ? [{ state: generatedAppState }] : []
@@ -8245,7 +8501,15 @@ function PuckProvider({ children }) {
     overrides,
     plugins
   });
-  const generateAppStore = useCallback21(
+  const loadedFieldTransforms = useMemo20(() => {
+    const _plugins = plugins || [];
+    const pluginFieldTransforms = _plugins.reduce(
+      (acc, plugin) => __spreadValues(__spreadValues({}, acc), plugin.fieldTransforms),
+      {}
+    );
+    return __spreadValues(__spreadValues({}, pluginFieldTransforms), fieldTransforms);
+  }, [fieldTransforms, plugins]);
+  const generateAppStore = useCallback20(
     (state) => {
       return {
         state,
@@ -8255,7 +8519,8 @@ function PuckProvider({ children }) {
         viewports,
         iframe,
         onAction,
-        metadata
+        metadata,
+        fieldTransforms: loadedFieldTransforms
       };
     },
     [
@@ -8266,18 +8531,19 @@ function PuckProvider({ children }) {
       viewports,
       iframe,
       onAction,
-      metadata
+      metadata,
+      loadedFieldTransforms
     ]
   );
-  const [appStore] = useState24(
+  const [appStore] = useState25(
     () => createAppStore(generateAppStore(initialAppState))
   );
-  useEffect27(() => {
+  useEffect29(() => {
     if (process.env.NODE_ENV !== "production") {
       window.__PUCK_INTERNAL_DO_NOT_USE = { appStore };
     }
   }, [appStore]);
-  useEffect27(() => {
+  useEffect29(() => {
     const state = appStore.getState().state;
     appStore.setState(__spreadValues({}, generateAppStore(state)));
   }, [config, plugins, loadedOverrides, viewports, iframe, onAction, metadata]);
@@ -8286,8 +8552,8 @@ function PuckProvider({ children }) {
     index: initialHistoryIndex,
     initialAppState
   });
-  const previousData = useRef11(null);
-  useEffect27(() => {
+  const previousData = useRef12(null);
+  useEffect29(() => {
     appStore.subscribe(
       (s) => s.state.data,
       (data) => {
@@ -8301,11 +8567,11 @@ function PuckProvider({ children }) {
   }, []);
   useRegisterPermissionsSlice(appStore, permissions);
   const uPuckStore = useRegisterUsePuckStore(appStore);
-  useEffect27(() => {
+  useEffect29(() => {
     const { resolveAndCommitData } = appStore.getState();
     resolveAndCommitData();
   }, []);
-  return /* @__PURE__ */ jsx43(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx43(UsePuckStoreContext.Provider, { value: uPuckStore, children }) });
+  return /* @__PURE__ */ jsx45(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx45(UsePuckStoreContext.Provider, { value: uPuckStore, children }) });
 }
 function PuckLayout({ children }) {
   const {
@@ -8338,7 +8604,7 @@ function PuckLayout({ children }) {
     sidebarRef: rightSidebarRef,
     handleResizeEnd: handleRightSidebarResizeEnd
   } = useSidebarResize("right", dispatch);
-  useEffect27(() => {
+  useEffect29(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -8366,13 +8632,13 @@ function PuckLayout({ children }) {
     () => overrides.puck || DefaultOverride,
     [overrides]
   );
-  const [mounted, setMounted] = useState24(false);
-  useEffect27(() => {
+  const [mounted, setMounted] = useState25(false);
+  useEffect29(() => {
     setMounted(true);
   }, []);
   const ready = useAppStore((s) => s.status === "READY");
   useMonitorHotkeys();
-  useEffect27(() => {
+  useEffect29(() => {
     if (ready && iframe.enabled) {
       const frameDoc = getFrame();
       if (frameDoc) {
@@ -8381,8 +8647,15 @@ function PuckLayout({ children }) {
     }
   }, [ready, iframe.enabled]);
   usePreviewModeHotkeys();
-  return /* @__PURE__ */ jsxs21("div", { className: `Puck ${getClassName30()}`, children: [
-    /* @__PURE__ */ jsx43(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx43(CustomPuck, { children: children || /* @__PURE__ */ jsx43(FrameProvider, { children: /* @__PURE__ */ jsx43(
+  const layoutOptions = {};
+  if (leftWidth) {
+    layoutOptions["--puck-user-left-side-bar-width"] = `${leftWidth}px`;
+  }
+  if (rightWidth) {
+    layoutOptions["--puck-user-right-side-bar-width"] = `${rightWidth}px`;
+  }
+  return /* @__PURE__ */ jsxs21("div", { className: `Puck ${getClassName31()}`, children: [
+    /* @__PURE__ */ jsx45(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx45(CustomPuck, { children: children || /* @__PURE__ */ jsx45(FrameProvider, { children: /* @__PURE__ */ jsx45(
       "div",
       {
         className: getLayoutClassName({
@@ -8394,41 +8667,33 @@ function PuckLayout({ children }) {
           "div",
           {
             className: getLayoutClassName("inner"),
-            style: {
-              gridTemplateColumns: `
-                    ${leftSideBarVisible ? leftWidth ? `${leftWidth}px` : "var(--puck-side-bar-width)" : "0"} 
-                    var(--puck-frame-width) 
-                    ${rightSideBarVisible ? rightWidth ? `${rightWidth}px` : "var(--puck-side-bar-width)" : "0"}
-                  `
-            },
+            style: layoutOptions,
             children: [
-              /* @__PURE__ */ jsx43(Header, {}),
+              /* @__PURE__ */ jsx45(Header, {}),
               /* @__PURE__ */ jsxs21(
                 Sidebar,
                 {
                   position: "left",
                   sidebarRef: leftSidebarRef,
                   isVisible: leftSideBarVisible,
-                  width: leftWidth,
                   onResize: setLeftWidth,
                   onResizeEnd: handleLeftSidebarResizeEnd,
                   children: [
-                    /* @__PURE__ */ jsx43(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx43(Components, {}) }),
-                    /* @__PURE__ */ jsx43(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx43(Outline, {}) })
+                    /* @__PURE__ */ jsx45(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx45(Components, {}) }),
+                    /* @__PURE__ */ jsx45(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx45(Outline, {}) })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx43(Canvas, {}),
-              /* @__PURE__ */ jsx43(
+              /* @__PURE__ */ jsx45(Canvas, {}),
+              /* @__PURE__ */ jsx45(
                 Sidebar,
                 {
                   position: "right",
                   sidebarRef: rightSidebarRef,
                   isVisible: rightSideBarVisible,
-                  width: rightWidth,
                   onResize: setRightWidth,
                   onResizeEnd: handleRightSidebarResizeEnd,
-                  children: /* @__PURE__ */ jsx43(FieldSideBar, {})
+                  children: /* @__PURE__ */ jsx45(FieldSideBar, {})
                 }
               )
             ]
@@ -8436,11 +8701,11 @@ function PuckLayout({ children }) {
         )
       }
     ) }) }) }),
-    /* @__PURE__ */ jsx43("div", { id: "puck-portal-root", className: getClassName30("portal") })
+    /* @__PURE__ */ jsx45("div", { id: "puck-portal-root", className: getClassName31("portal") })
   ] });
 }
 function Puck(props) {
-  return /* @__PURE__ */ jsx43(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx43(PuckProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx43(PuckLayout, __spreadValues({}, props)) })) }));
+  return /* @__PURE__ */ jsx45(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx45(PuckProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx45(PuckLayout, __spreadValues({}, props)) })) }));
 }
 Puck.Components = Components;
 Puck.Fields = Fields;
@@ -8459,6 +8724,9 @@ init_react_import();
 // types/API/Viewports.ts
 init_react_import();
 
+// types/API/FieldTransforms.ts
+init_react_import();
+
 // types/index.ts
 init_react_import();
 
@@ -8492,6 +8760,8 @@ export {
   AutoField,
   renderContext,
   Render,
+  registerOverlayPortal,
+  setDeep,
   DropZone,
   Drawer,
   createUsePuck,