npm - @measured/puck - Versions diffs - 0.18.0-canary.e6e29ad → 0.18.0-canary.f27871b - Mend

@measured/puck 0.18.0-canary.e6e29ad → 0.18.0-canary.f27871b

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/{chunk-EXKSBUY5.mjs → chunk-CHWFBYEM.mjs} +2 -4
package/dist/index.css +27 -34
package/dist/index.d.mts +0 -6
package/dist/index.d.ts +0 -6
package/dist/index.js +1239 -883
package/dist/index.mjs +1171 -812
package/dist/rsc.js +2 -4
package/dist/rsc.mjs +1 -1
package/package.json +3 -2

package/dist/index.mjs CHANGED Viewed

@@ -16,7 +16,7 @@ import {
   resolveRootData,
   rootDroppableId,
   setupZone
-} from "./chunk-EXKSBUY5.mjs";
+} from "./chunk-CHWFBYEM.mjs";
 // ../../node_modules/classnames/index.js
 var require_classnames = __commonJS({
@@ -210,8 +210,9 @@ var styles_module_default2 = { "InputWrapper": "_InputWrapper_1l5m8_1", "Input":
 // components/AutoField/index.tsx
 import {
   useCallback as useCallback5,
+  useContext as useContext3,
   useEffect as useEffect9,
-  useMemo as useMemo4,
+  useMemo as useMemo5,
   useState as useState11
 } from "react";
@@ -1085,7 +1086,7 @@ init_react_import();
 import { DragDropProvider } from "@dnd-kit/react";
 import { useState as useState5 } from "react";
-// lib/dnd-kit/safe.ts
+// lib/dnd/dnd-kit/safe.ts
 init_react_import();
 import {
   useDraggable,
@@ -1165,8 +1166,53 @@ var Sortable = ({
   return children({ status, ref: sortableRef });
 };
+// components/AutoField/context.tsx
+init_react_import();
+import { createContext as createContext2, useContext as useContext2, useMemo } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var NestedFieldContext = createContext2({});
+var useNestedFieldContext = () => {
+  const context = useContext2(NestedFieldContext);
+  return __spreadProps(__spreadValues({}, context), {
+    readOnlyFields: context.readOnlyFields || {}
+  });
+};
+var NestedFieldProvider = ({
+  children,
+  name,
+  subName,
+  wildcardName = name,
+  readOnlyFields
+}) => {
+  const subPath = `${name}.${subName}`;
+  const wildcardSubPath = `${wildcardName}.${subName}`;
+  const subReadOnlyFields = useMemo(
+    () => Object.keys(readOnlyFields).reduce((acc, readOnlyKey) => {
+      const isLocal = readOnlyKey.indexOf(subPath) > -1 || readOnlyKey.indexOf(wildcardSubPath) > -1;
+      if (isLocal) {
+        const subPathPattern = new RegExp(
+          `^(${name}|${wildcardName}).`.replace(/\[/g, "\\[").replace(/\]/g, "\\]").replace(/\./g, "\\.").replace(/\*/g, "\\*")
+        );
+        const localName = readOnlyKey.replace(subPathPattern, "");
+        return __spreadProps(__spreadValues({}, acc), {
+          [localName]: readOnlyFields[readOnlyKey]
+        });
+      }
+      return acc;
+    }, {}),
+    [name, subName, wildcardName, readOnlyFields]
+  );
+  return /* @__PURE__ */ jsx7(
+    NestedFieldContext.Provider,
+    {
+      value: { readOnlyFields: subReadOnlyFields, localName: subName },
+      children
+    }
+  );
+};
 // components/AutoField/fields/ArrayField/index.tsx
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var getClassName5 = get_class_name_factory_default("ArrayField", styles_module_default3);
 var getClassNameItem = get_class_name_factory_default("ArrayFieldItem", styles_module_default3);
 var ArrayField = ({
@@ -1177,10 +1223,10 @@ var ArrayField = ({
   label,
   readOnly,
   id,
-  Label: Label2 = (props) => /* @__PURE__ */ jsx7("div", __spreadValues({}, props))
+  Label: Label2 = (props) => /* @__PURE__ */ jsx8("div", __spreadValues({}, props))
 }) => {
   const { state, setUi, selectedItem, getPermissions } = useAppContext();
-  const readOnlyFields = (selectedItem == null ? void 0 : selectedItem.readOnly) || {};
+  const { readOnlyFields, localName = name } = useNestedFieldContext();
   const value = _value;
   const arrayState = state.ui.arrayState[id] || {
     items: Array.from(value || []).map((item, idx) => {
@@ -1240,14 +1286,14 @@ var ArrayField = ({
     return null;
   }
   const addDisabled = field.max !== void 0 && localState.arrayState.items.length >= field.max || readOnly;
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     Label2,
     {
       label: label || name,
-      icon: /* @__PURE__ */ jsx7(List, { size: 16 }),
+      icon: /* @__PURE__ */ jsx8(List, { size: 16 }),
       el: "div",
       readOnly,
-      children: /* @__PURE__ */ jsx7(
+      children: /* @__PURE__ */ jsx8(
         SortableProvider,
         {
           onMove: (move) => {
@@ -1283,7 +1329,7 @@ var ArrayField = ({
                 localState.arrayState.items.map((item, i) => {
                   const { _arrayId = `${id}-${i}`, _originalIndex = i } = item;
                   const data = Array.from(localState.value || [])[i] || {};
-                  return /* @__PURE__ */ jsx7(
+                  return /* @__PURE__ */ jsx8(
                     Sortable,
                     {
                       id: _arrayId,
@@ -1324,7 +1370,7 @@ var ArrayField = ({
                                   field.getItemSummary ? field.getItemSummary(data, i) : `Item #${_originalIndex}`,
                                   /* @__PURE__ */ jsxs3("div", { className: getClassNameItem("rhs"), children: [
                                     !readOnly && /* @__PURE__ */ jsxs3("div", { className: getClassNameItem("actions"), children: [
-                                      /* @__PURE__ */ jsx7("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx7(
+                                      /* @__PURE__ */ jsx8("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx8(
                                         IconButton,
                                         {
                                           type: "button",
@@ -1341,10 +1387,10 @@ var ArrayField = ({
                                             );
                                           },
                                           title: "Duplicate",
-                                          children: /* @__PURE__ */ jsx7(Copy, { size: 16 })
+                                          children: /* @__PURE__ */ jsx8(Copy, { size: 16 })
                                         }
                                       ) }),
-                                      /* @__PURE__ */ jsx7("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx7(
+                                      /* @__PURE__ */ jsx8("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx8(
                                         IconButton,
                                         {
                                           type: "button",
@@ -1365,39 +1411,56 @@ var ArrayField = ({
                                             );
                                           },
                                           title: "Delete",
-                                          children: /* @__PURE__ */ jsx7(Trash, { size: 16 })
+                                          children: /* @__PURE__ */ jsx8(Trash, { size: 16 })
                                         }
                                       ) })
                                     ] }),
-                                    /* @__PURE__ */ jsx7("div", { children: /* @__PURE__ */ jsx7(DragIcon, {}) })
+                                    /* @__PURE__ */ jsx8("div", { children: /* @__PURE__ */ jsx8(DragIcon, {}) })
                                   ] })
                                 ]
                               }
                             ),
-                            /* @__PURE__ */ jsx7("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ jsx7("fieldset", { className: getClassNameItem("fieldset"), children: Object.keys(field.arrayFields).map((fieldName) => {
-                              const subField = field.arrayFields[fieldName];
-                              const subFieldName = `${name}[${i}].${fieldName}`;
-                              const wildcardFieldName = `${name}[*].${fieldName}`;
-                              const subReadOnly = forceReadOnly ? forceReadOnly : typeof readOnlyFields[subFieldName] !== "undefined" ? readOnlyFields[subFieldName] : readOnlyFields[wildcardFieldName];
-                              return /* @__PURE__ */ jsx7(
-                                AutoFieldPrivate,
+                            /* @__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: subFieldName,
-                                  label: subField.label || fieldName,
-                                  id: `${_arrayId}_${fieldName}`,
-                                  readOnly: subReadOnly,
-                                  field: subField,
-                                  value: data[fieldName],
-                                  onChange: (val, ui) => {
-                                    onChange(
-                                      replace(value, i, __spreadProps(__spreadValues({}, data), {
-                                        [fieldName]: val
-                                      })),
-                                      ui
-                                    );
-                                  }
+                                  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
+                                        );
+                                      }
+                                    }
+                                  )
                                 },
-                                subFieldName
+                                subPath
                               );
                             }) }) })
                           ]
@@ -1407,7 +1470,7 @@ var ArrayField = ({
                     _arrayId
                   );
                 }),
-                !addDisabled && /* @__PURE__ */ jsx7(
+                !addDisabled && /* @__PURE__ */ jsx8(
                   "button",
                   {
                     type: "button",
@@ -1421,7 +1484,7 @@ var ArrayField = ({
                       const newArrayState = regenerateArrayState(newValue);
                       onChange(newValue, mapArrayStateToUi(newArrayState));
                     },
-                    children: /* @__PURE__ */ jsx7(Plus, { size: 21 })
+                    children: /* @__PURE__ */ jsx8(Plus, { size: 21 })
                   }
                 )
               ]
@@ -1435,7 +1498,7 @@ var ArrayField = ({
 // components/AutoField/fields/DefaultField/index.tsx
 init_react_import();
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var getClassName6 = get_class_name_factory_default("Input", styles_module_default2);
 var DefaultField = ({
   field,
@@ -1447,16 +1510,16 @@ var DefaultField = ({
   Label: Label2,
   id
 }) => {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     Label2,
     {
       label: label || name,
       icon: /* @__PURE__ */ jsxs4(Fragment2, { children: [
-        field.type === "text" && /* @__PURE__ */ jsx8(Type, { size: 16 }),
-        field.type === "number" && /* @__PURE__ */ jsx8(Hash, { size: 16 })
+        field.type === "text" && /* @__PURE__ */ jsx9(Type, { size: 16 }),
+        field.type === "number" && /* @__PURE__ */ jsx9(Hash, { size: 16 })
       ] }),
       readOnly,
-      children: /* @__PURE__ */ jsx8(
+      children: /* @__PURE__ */ jsx9(
         "input",
         {
           className: getClassName6("input"),
@@ -1467,7 +1530,14 @@ var DefaultField = ({
           value: typeof value === "undefined" ? "" : value.toString(),
           onChange: (e) => {
             if (field.type === "number") {
-              onChange(Number(e.currentTarget.value));
+              const numberValue = Number(e.currentTarget.value);
+              if (typeof field.min !== "undefined" && numberValue < field.min) {
+                return;
+              }
+              if (typeof field.max !== "undefined" && numberValue > field.max) {
+                return;
+              }
+              onChange(numberValue);
             } else {
               onChange(e.currentTarget.value);
             }
@@ -1490,7 +1560,7 @@ import { useEffect as useEffect8 } from "react";
 // components/ExternalInput/index.tsx
 init_react_import();
 import {
-  useMemo,
+  useMemo as useMemo2,
   useEffect as useEffect7,
   useState as useState9,
   useCallback as useCallback4,
@@ -1511,7 +1581,7 @@ var styles_module_default7 = { "Modal": "_Modal_ikbaj_1", "Modal--isOpen": "_Mod
 // components/Modal/index.tsx
 import { createPortal } from "react-dom";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var getClassName7 = get_class_name_factory_default("Modal", styles_module_default7);
 var Modal = ({
   children,
@@ -1523,10 +1593,10 @@ var Modal = ({
     setRootEl(document.getElementById("puck-portal-root"));
   }, []);
   if (!rootEl) {
-    return /* @__PURE__ */ jsx9("div", {});
+    return /* @__PURE__ */ jsx10("div", {});
   }
   return createPortal(
-    /* @__PURE__ */ jsx9("div", { className: getClassName7({ isOpen }), onClick: onClose, children: /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10("div", { className: getClassName7({ isOpen }), onClick: onClose, children: /* @__PURE__ */ jsx10(
       "div",
       {
         className: getClassName7("inner"),
@@ -1546,11 +1616,11 @@ init_react_import();
 var styles_module_default8 = { "Heading": "_Heading_qxrry_1", "Heading--xxxxl": "_Heading--xxxxl_qxrry_12", "Heading--xxxl": "_Heading--xxxl_qxrry_18", "Heading--xxl": "_Heading--xxl_qxrry_22", "Heading--xl": "_Heading--xl_qxrry_26", "Heading--l": "_Heading--l_qxrry_30", "Heading--m": "_Heading--m_qxrry_34", "Heading--s": "_Heading--s_qxrry_38", "Heading--xs": "_Heading--xs_qxrry_42" };
 // components/Heading/index.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var getClassName8 = get_class_name_factory_default("Heading", styles_module_default8);
 var Heading = ({ children, rank, size = "m" }) => {
   const Tag = rank ? `h${rank}` : "span";
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     Tag,
     {
       className: getClassName8({
@@ -1586,7 +1656,7 @@ var filterDataAttrs = (props) => {
 };
 // components/Button/Button.tsx
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 var getClassName9 = get_class_name_factory_default("Button", Button_module_default);
 var Button = (_a) => {
   var _b = _a, {
@@ -1645,9 +1715,9 @@ var Button = (_a) => {
       href
     }, dataAttrs), {
       children: [
-        icon && /* @__PURE__ */ jsx11("div", { className: getClassName9("icon"), children: icon }),
+        icon && /* @__PURE__ */ jsx12("div", { className: getClassName9("icon"), children: icon }),
         children,
-        loading && /* @__PURE__ */ jsx11("div", { className: getClassName9("spinner"), children: /* @__PURE__ */ jsx11(Loader, { size: 14 }) })
+        loading && /* @__PURE__ */ jsx12("div", { className: getClassName9("spinner"), children: /* @__PURE__ */ jsx12(Loader, { size: 14 }) })
       ]
     })
   );
@@ -1655,7 +1725,7 @@ var Button = (_a) => {
 };
 // components/ExternalInput/index.tsx
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 var getClassName10 = get_class_name_factory_default("ExternalInput", styles_module_default6);
 var getClassNameModal = get_class_name_factory_default("ExternalInputModal", styles_module_default6);
 var dataCache = {};
@@ -1678,10 +1748,10 @@ var ExternalInput = ({
   const hasFilterFields = !!filterFields;
   const [filters, setFilters] = useState9(field.initialFilters || {});
   const [filtersToggled, setFiltersToggled] = useState9(hasFilterFields);
-  const mappedData = useMemo(() => {
+  const mappedData = useMemo2(() => {
     return data.map(mapRow);
   }, [data]);
-  const keys = useMemo(() => {
+  const keys = useMemo2(() => {
     const validKeys = /* @__PURE__ */ new Set();
     for (const item of mappedData) {
       for (const key of Object.keys(item)) {
@@ -1728,7 +1798,7 @@ var ExternalInput = ({
       id,
       children: [
         /* @__PURE__ */ jsxs6("div", { className: getClassName10("actions"), children: [
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13(
             "button",
             {
               type: "button",
@@ -1736,12 +1806,12 @@ var ExternalInput = ({
               className: getClassName10("button"),
               disabled: readOnly,
               children: value ? field.getItemSummary ? field.getItemSummary(value) : "External item" : /* @__PURE__ */ jsxs6(Fragment3, { children: [
-                /* @__PURE__ */ jsx12(Link, { size: "16" }),
-                /* @__PURE__ */ jsx12("span", { children: field.placeholder })
+                /* @__PURE__ */ jsx13(Link, { size: "16" }),
+                /* @__PURE__ */ jsx13("span", { children: field.placeholder })
               ] })
             }
           ),
-          value && /* @__PURE__ */ jsx12(
+          value && /* @__PURE__ */ jsx13(
             "button",
             {
               type: "button",
@@ -1750,11 +1820,11 @@ var ExternalInput = ({
                 onChange(null);
               },
               disabled: readOnly,
-              children: /* @__PURE__ */ jsx12(LockOpen, { size: 16 })
+              children: /* @__PURE__ */ jsx13(LockOpen, { size: 16 })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx12(Modal, { onClose: () => setOpen(false), isOpen, children: /* @__PURE__ */ jsxs6(
+        /* @__PURE__ */ jsx13(Modal, { onClose: () => setOpen(false), isOpen, children: /* @__PURE__ */ jsxs6(
           "form",
           {
             className: getClassNameModal({
@@ -1768,11 +1838,11 @@ var ExternalInput = ({
               search(searchQuery, filters);
             },
             children: [
-              /* @__PURE__ */ jsx12("div", { className: getClassNameModal("masthead"), children: field.showSearch ? /* @__PURE__ */ jsxs6("div", { className: getClassNameModal("searchForm"), children: [
+              /* @__PURE__ */ jsx13("div", { className: getClassNameModal("masthead"), children: field.showSearch ? /* @__PURE__ */ jsxs6("div", { className: getClassNameModal("searchForm"), children: [
                 /* @__PURE__ */ jsxs6("label", { className: getClassNameModal("search"), children: [
-                  /* @__PURE__ */ jsx12("span", { className: getClassNameModal("searchIconText"), children: "Search" }),
-                  /* @__PURE__ */ jsx12("div", { className: getClassNameModal("searchIcon"), children: /* @__PURE__ */ jsx12(Search, { size: "18" }) }),
-                  /* @__PURE__ */ jsx12(
+                  /* @__PURE__ */ jsx13("span", { className: getClassNameModal("searchIconText"), children: "Search" }),
+                  /* @__PURE__ */ jsx13("div", { className: getClassNameModal("searchIcon"), children: /* @__PURE__ */ jsx13(Search, { size: "18" }) }),
+                  /* @__PURE__ */ jsx13(
                     "input",
                     {
                       className: getClassNameModal("searchInput"),
@@ -1788,8 +1858,8 @@ var ExternalInput = ({
                   )
                 ] }),
                 /* @__PURE__ */ jsxs6("div", { className: getClassNameModal("searchActions"), children: [
-                  /* @__PURE__ */ jsx12(Button, { type: "submit", loading: isLoading, fullWidth: true, children: "Search" }),
-                  hasFilterFields && /* @__PURE__ */ jsx12("div", { className: getClassNameModal("searchActionIcon"), children: /* @__PURE__ */ jsx12(
+                  /* @__PURE__ */ jsx13(Button, { type: "submit", loading: isLoading, fullWidth: true, children: "Search" }),
+                  hasFilterFields && /* @__PURE__ */ jsx13("div", { className: getClassNameModal("searchActionIcon"), children: /* @__PURE__ */ jsx13(
                     IconButton,
                     {
                       title: "Toggle filters",
@@ -1798,15 +1868,15 @@ var ExternalInput = ({
                         e.stopPropagation();
                         setFiltersToggled(!filtersToggled);
                       },
-                      children: /* @__PURE__ */ jsx12(SlidersHorizontal, { size: 20 })
+                      children: /* @__PURE__ */ jsx13(SlidersHorizontal, { size: 20 })
                     }
                   ) })
                 ] })
-              ] }) : /* @__PURE__ */ jsx12(Heading, { rank: "2", size: "xs", children: field.placeholder || "Select data" }) }),
+              ] }) : /* @__PURE__ */ jsx13(Heading, { rank: "2", size: "xs", children: field.placeholder || "Select data" }) }),
               /* @__PURE__ */ jsxs6("div", { className: getClassNameModal("grid"), children: [
-                hasFilterFields && /* @__PURE__ */ jsx12("div", { className: getClassNameModal("filters"), children: hasFilterFields && Object.keys(filterFields).map((fieldName) => {
+                hasFilterFields && /* @__PURE__ */ jsx13("div", { className: getClassNameModal("filters"), children: hasFilterFields && Object.keys(filterFields).map((fieldName) => {
                   const filterField = filterFields[fieldName];
-                  return /* @__PURE__ */ jsx12(
+                  return /* @__PURE__ */ jsx13(
                     AutoFieldPrivate,
                     {
                       field: filterField,
@@ -1825,7 +1895,7 @@ var ExternalInput = ({
                 }) }),
                 /* @__PURE__ */ jsxs6("div", { className: getClassNameModal("tableWrapper"), children: [
                   /* @__PURE__ */ jsxs6("table", { className: getClassNameModal("table"), children: [
-                    /* @__PURE__ */ jsx12("thead", { className: getClassNameModal("thead"), children: /* @__PURE__ */ jsx12("tr", { className: getClassNameModal("tr"), children: keys.map((key) => /* @__PURE__ */ jsx12(
+                    /* @__PURE__ */ jsx13("thead", { className: getClassNameModal("thead"), children: /* @__PURE__ */ jsx13("tr", { className: getClassNameModal("tr"), children: keys.map((key) => /* @__PURE__ */ jsx13(
                       "th",
                       {
                         className: getClassNameModal("th"),
@@ -1834,8 +1904,8 @@ var ExternalInput = ({
                       },
                       key
                     )) }) }),
-                    /* @__PURE__ */ jsx12("tbody", { className: getClassNameModal("tbody"), children: mappedData.map((item, i) => {
-                      return /* @__PURE__ */ jsx12(
+                    /* @__PURE__ */ jsx13("tbody", { className: getClassNameModal("tbody"), children: mappedData.map((item, i) => {
+                      return /* @__PURE__ */ jsx13(
                         "tr",
                         {
                           style: { whiteSpace: "nowrap" },
@@ -1844,16 +1914,16 @@ var ExternalInput = ({
                             onChange(mapProp(data[i]));
                             setOpen(false);
                           },
-                          children: keys.map((key) => /* @__PURE__ */ jsx12("td", { className: getClassNameModal("td"), children: item[key] }, key))
+                          children: keys.map((key) => /* @__PURE__ */ jsx13("td", { className: getClassNameModal("td"), children: item[key] }, key))
                         },
                         i
                       );
                     }) })
                   ] }),
-                  /* @__PURE__ */ jsx12("div", { className: getClassNameModal("loadingBanner"), children: /* @__PURE__ */ jsx12(Loader, { size: 24 }) })
+                  /* @__PURE__ */ jsx13("div", { className: getClassNameModal("loadingBanner"), children: /* @__PURE__ */ jsx13(Loader, { size: 24 }) })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx12("div", { className: getClassNameModal("footerContainer"), children: /* @__PURE__ */ jsx12(Footer, { items: mappedData }) })
+              /* @__PURE__ */ jsx13("div", { className: getClassNameModal("footerContainer"), children: /* @__PURE__ */ jsx13(Footer, { items: mappedData }) })
             ]
           }
         ) })
@@ -1863,7 +1933,7 @@ var ExternalInput = ({
 };
 // components/AutoField/fields/ExternalField/index.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var ExternalField = ({
   field,
   onChange,
@@ -1887,7 +1957,7 @@ var ExternalField = ({
   if (field.type !== "external") {
     return null;
   }
-  return /* @__PURE__ */ jsx13(Label2, { label: label || name, icon: /* @__PURE__ */ jsx13(Link, { size: 16 }), el: "div", children: /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(Label2, { label: label || name, icon: /* @__PURE__ */ jsx14(Link, { size: 16 }), el: "div", children: /* @__PURE__ */ jsx14(
     ExternalInput,
     {
       name,
@@ -1912,7 +1982,7 @@ var ExternalField = ({
 // components/AutoField/fields/RadioField/index.tsx
 init_react_import();
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 // lib/safe-json-parse.ts
 init_react_import();
@@ -1926,7 +1996,7 @@ var safeJsonParse = (str) => {
 };
 // components/AutoField/fields/RadioField/index.tsx
-import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 var getClassName11 = get_class_name_factory_default("Input", styles_module_default2);
 var RadioField = ({
   field,
@@ -1938,26 +2008,26 @@ var RadioField = ({
   label,
   Label: Label2
 }) => {
-  const flatOptions = useMemo2(
+  const flatOptions = useMemo3(
     () => field.type === "radio" ? field.options.map(({ value: value2 }) => value2) : [],
     [field]
   );
   if (field.type !== "radio" || !field.options) {
     return null;
   }
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     Label2,
     {
-      icon: /* @__PURE__ */ jsx14(CircleCheckBig, { size: 16 }),
+      icon: /* @__PURE__ */ jsx15(CircleCheckBig, { size: 16 }),
       label: label || name,
       readOnly,
       el: "div",
-      children: /* @__PURE__ */ jsx14("div", { className: getClassName11("radioGroupItems"), id, children: field.options.map((option) => /* @__PURE__ */ jsxs7(
+      children: /* @__PURE__ */ jsx15("div", { className: getClassName11("radioGroupItems"), id, children: field.options.map((option) => /* @__PURE__ */ jsxs7(
         "label",
         {
           className: getClassName11("radio"),
           children: [
-            /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx15(
               "input",
               {
                 type: "radio",
@@ -1977,7 +2047,7 @@ var RadioField = ({
                 checked: value === option.value
               }
             ),
-            /* @__PURE__ */ jsx14("div", { className: getClassName11("radioInner"), children: option.label || option.value })
+            /* @__PURE__ */ jsx15("div", { className: getClassName11("radioInner"), children: option.label || option.value })
           ]
         },
         option.label + option.value
@@ -1988,8 +2058,8 @@ var RadioField = ({
 // components/AutoField/fields/SelectField/index.tsx
 init_react_import();
-import { useMemo as useMemo3 } from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { useMemo as useMemo4 } from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var getClassName12 = get_class_name_factory_default("Input", styles_module_default2);
 var SelectField = ({
   field,
@@ -2001,20 +2071,20 @@ var SelectField = ({
   readOnly,
   id
 }) => {
-  const flatOptions = useMemo3(
+  const flatOptions = useMemo4(
     () => field.type === "select" ? field.options.map(({ value: value2 }) => value2) : [],
     [field]
   );
   if (field.type !== "select" || !field.options) {
     return null;
   }
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     Label2,
     {
       label: label || name,
-      icon: /* @__PURE__ */ jsx15(ChevronDown, { size: 16 }),
+      icon: /* @__PURE__ */ jsx16(ChevronDown, { size: 16 }),
       readOnly,
-      children: /* @__PURE__ */ jsx15(
+      children: /* @__PURE__ */ jsx16(
         "select",
         {
           id,
@@ -2031,7 +2101,7 @@ var SelectField = ({
             }
           },
           value,
-          children: field.options.map((option) => /* @__PURE__ */ jsx15(
+          children: field.options.map((option) => /* @__PURE__ */ jsx16(
             "option",
             {
               label: option.label,
@@ -2047,7 +2117,7 @@ var SelectField = ({
 // components/AutoField/fields/TextareaField/index.tsx
 init_react_import();
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var getClassName13 = get_class_name_factory_default("Input", styles_module_default2);
 var TextareaField = ({
   onChange,
@@ -2058,7 +2128,7 @@ var TextareaField = ({
   Label: Label2,
   id
 }) => {
-  return /* @__PURE__ */ jsx16(Label2, { label: label || name, icon: /* @__PURE__ */ jsx16(Type, { size: 16 }), readOnly, children: /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(Label2, { label: label || name, icon: /* @__PURE__ */ jsx17(Type, { size: 16 }), readOnly, children: /* @__PURE__ */ jsx17(
     "textarea",
     {
       id,
@@ -2085,7 +2155,7 @@ init_react_import();
 var styles_module_default9 = { "ObjectField": "_ObjectField_1ua3y_5", "ObjectField-fieldset": "_ObjectField-fieldset_1ua3y_13" };
 // components/AutoField/fields/ObjectField/index.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var getClassName14 = get_class_name_factory_default("ObjectField", styles_module_default9);
 var ObjectField = ({
   field,
@@ -2097,43 +2167,54 @@ var ObjectField = ({
   readOnly,
   id
 }) => {
-  const { selectedItem } = useAppContext();
+  const { readOnlyFields, localName = name } = useNestedFieldContext();
   if (field.type !== "object" || !field.objectFields) {
     return null;
   }
-  const readOnlyFields = (selectedItem == null ? void 0 : selectedItem.readOnly) || {};
   const data = value || {};
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     Label2,
     {
       label: label || name,
-      icon: /* @__PURE__ */ jsx17(EllipsisVertical, { size: 16 }),
+      icon: /* @__PURE__ */ jsx18(EllipsisVertical, { size: 16 }),
       el: "div",
       readOnly,
-      children: /* @__PURE__ */ jsx17("div", { className: getClassName14(), children: /* @__PURE__ */ jsx17("fieldset", { className: getClassName14("fieldset"), children: Object.keys(field.objectFields).map((fieldName) => {
-        const subField = field.objectFields[fieldName];
-        const subFieldName = `${name}.${fieldName}`;
-        const wildcardFieldName = `${name}.${fieldName}`;
-        const subReadOnly = readOnly ? readOnly : typeof readOnlyFields[subFieldName] !== "undefined" ? readOnlyFields[subFieldName] : readOnlyFields[wildcardFieldName];
-        return /* @__PURE__ */ jsx17(
-          AutoFieldPrivate,
+      children: /* @__PURE__ */ jsx18("div", { className: getClassName14(), children: /* @__PURE__ */ jsx18("fieldset", { className: getClassName14("fieldset"), children: Object.keys(field.objectFields).map((subName) => {
+        const subField = field.objectFields[subName];
+        const subPath = `${name}.${subName}`;
+        const localSubPath = `${localName || name}.${subName}`;
+        const subReadOnly = readOnly ? readOnly : readOnlyFields[localSubPath];
+        const label2 = subField.label || subName;
+        return /* @__PURE__ */ jsx18(
+          NestedFieldProvider,
           {
-            name: subFieldName,
-            label: subField.label || fieldName,
-            id: `${id}_${fieldName}`,
-            readOnly: subReadOnly,
-            field: subField,
-            value: data[fieldName],
-            onChange: (val, ui) => {
-              onChange(
-                __spreadProps(__spreadValues({}, data), {
-                  [fieldName]: val
+            name: localName || id,
+            subName,
+            readOnlyFields,
+            children: /* @__PURE__ */ jsx18(
+              AutoFieldPrivate,
+              {
+                name: subPath,
+                label: subPath,
+                id: `${id}_${subName}`,
+                readOnly: subReadOnly,
+                field: __spreadProps(__spreadValues({}, subField), {
+                  label: label2
+                  // May be used by custom fields
                 }),
-                ui
-              );
-            }
+                value: data[subName],
+                onChange: (val, ui) => {
+                  onChange(
+                    __spreadProps(__spreadValues({}, data), {
+                      [subName]: val
+                    }),
+                    ui
+                  );
+                }
+              }
+            )
           },
-          subFieldName
+          subPath
         );
       }) }) })
     }
@@ -2159,7 +2240,7 @@ var useSafeId = () => {
 };
 // components/AutoField/index.tsx
-import { Fragment as Fragment4, jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
 var getClassName15 = get_class_name_factory_default("Input", styles_module_default2);
 var getClassNameWrapper = get_class_name_factory_default("InputWrapper", styles_module_default2);
 var FieldLabel = ({
@@ -2173,14 +2254,14 @@ var FieldLabel = ({
   const El = el;
   return /* @__PURE__ */ jsxs8(El, { className, children: [
     /* @__PURE__ */ jsxs8("div", { className: getClassName15("label"), children: [
-      icon ? /* @__PURE__ */ jsx18("div", { className: getClassName15("labelIcon"), children: icon }) : /* @__PURE__ */ jsx18(Fragment4, {}),
+      icon ? /* @__PURE__ */ jsx19("div", { className: getClassName15("labelIcon"), children: icon }) : /* @__PURE__ */ jsx19(Fragment4, {}),
       label,
-      readOnly && /* @__PURE__ */ jsx18("div", { className: getClassName15("disabledIcon"), title: "Read-only", children: /* @__PURE__ */ jsx18(Lock, { size: "12" }) })
+      readOnly && /* @__PURE__ */ jsx19("div", { className: getClassName15("disabledIcon"), title: "Read-only", children: /* @__PURE__ */ jsx19(Lock, { size: "12" }) })
     ] }),
     children
   ] });
 };
-var FieldLabelInternal2 = ({
+var FieldLabelInternal = ({
   children,
   icon,
   label,
@@ -2188,14 +2269,14 @@ var FieldLabelInternal2 = ({
   readOnly
 }) => {
   const { overrides } = useAppContext();
-  const Wrapper = useMemo4(
+  const Wrapper = useMemo5(
     () => overrides.fieldLabel || FieldLabel,
     [overrides]
   );
   if (!label) {
-    return /* @__PURE__ */ jsx18(Fragment4, { children });
+    return /* @__PURE__ */ jsx19(Fragment4, { children });
   }
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     Wrapper,
     {
       label,
@@ -2209,8 +2290,9 @@ var FieldLabelInternal2 = ({
 };
 function AutoFieldInternal(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  const { dispatch, overrides } = useAppContext();
-  const { id, Label: Label2 = FieldLabelInternal2 } = props;
+  const { dispatch, overrides, selectedItem } = useAppContext();
+  const nestedFieldContext = useContext3(NestedFieldContext);
+  const { id, Label: Label2 = FieldLabelInternal } = props;
   const field = props.field;
   const label = field.label;
   const defaultId = useSafeId();
@@ -2270,20 +2352,29 @@ function AutoFieldInternal(props) {
       return null;
     }
     const CustomField = field.render;
-    return /* @__PURE__ */ jsx18("div", { className: getClassNameWrapper(), onFocus, onBlur, children: /* @__PURE__ */ jsx18("div", { className: getClassName15(), children: /* @__PURE__ */ jsx18(CustomField, __spreadValues({}, mergedProps)) }) });
+    return /* @__PURE__ */ jsx19("div", { className: getClassNameWrapper(), onFocus, onBlur, children: /* @__PURE__ */ jsx19("div", { className: getClassName15(), children: /* @__PURE__ */ jsx19(CustomField, __spreadValues({}, mergedProps)) }) });
   }
   const children = defaultFields[field.type](mergedProps);
   const Render2 = render[field.type];
-  return /* @__PURE__ */ jsx18(
-    "div",
+  return /* @__PURE__ */ jsx19(
+    NestedFieldContext.Provider,
     {
-      className: getClassNameWrapper(),
-      onFocus,
-      onBlur,
-      onClick: (e) => {
-        e.stopPropagation();
+      value: {
+        readOnlyFields: nestedFieldContext.readOnlyFields || (selectedItem == null ? void 0 : selectedItem.readOnly) || {},
+        localName: nestedFieldContext.localName
       },
-      children: /* @__PURE__ */ jsx18(Render2, __spreadProps(__spreadValues({}, mergedProps), { children }))
+      children: /* @__PURE__ */ jsx19(
+        "div",
+        {
+          className: getClassNameWrapper(),
+          onFocus,
+          onBlur,
+          onClick: (e) => {
+            e.stopPropagation();
+          },
+          children: /* @__PURE__ */ jsx19(Render2, __spreadProps(__spreadValues({}, mergedProps), { children }))
+        }
+      )
     }
   );
 }
@@ -2311,11 +2402,11 @@ function AutoFieldPrivate(props) {
     value: localValue,
     onChange: onChangeLocal
   };
-  return /* @__PURE__ */ jsx18(AutoFieldInternal, __spreadValues(__spreadValues({}, props), localProps));
+  return /* @__PURE__ */ jsx19(AutoFieldInternal, __spreadValues(__spreadValues({}, props), localProps));
 }
 function AutoField(props) {
-  const DefaultLabel = useMemo4(() => {
-    const DefaultLabel2 = (labelProps) => /* @__PURE__ */ jsx18(
+  const DefaultLabel = useMemo5(() => {
+    const DefaultLabel2 = (labelProps) => /* @__PURE__ */ jsx19(
       "div",
       __spreadProps(__spreadValues({}, labelProps), {
         className: getClassName15({ readOnly: props.readOnly })
@@ -2323,7 +2414,7 @@ function AutoField(props) {
     );
     return DefaultLabel2;
   }, [props.readOnly]);
-  return /* @__PURE__ */ jsx18(AutoFieldInternal, __spreadProps(__spreadValues({}, props), { Label: DefaultLabel }));
+  return /* @__PURE__ */ jsx19(AutoFieldInternal, __spreadProps(__spreadValues({}, props), { Label: DefaultLabel }));
 }
 // components/Drawer/index.tsx
@@ -2334,18 +2425,19 @@ init_react_import();
 var styles_module_default10 = { "Drawer": "_Drawer_fkqfo_1", "Drawer-draggable": "_Drawer-draggable_fkqfo_8", "Drawer-draggableBg": "_Drawer-draggableBg_fkqfo_12", "Drawer-draggableFg": "_Drawer-draggableFg_fkqfo_21", "DrawerItem-draggable": "_DrawerItem-draggable_fkqfo_25", "DrawerItem--disabled": "_DrawerItem--disabled_fkqfo_38", "DrawerItem": "_DrawerItem_fkqfo_25", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_fkqfo_48", "DrawerItem-name": "_DrawerItem-name_fkqfo_66" };
 // components/Drawer/index.tsx
-import { useMemo as useMemo8, useState as useState17 } from "react";
+import { useId as useId2, useMemo as useMemo9, useState as useState18 } from "react";
 // components/DragDropContext/index.tsx
 init_react_import();
 import { DragDropProvider as DragDropProvider2 } from "@dnd-kit/react";
 import {
-  createContext as createContext3,
-  useCallback as useCallback9,
-  useContext as useContext4,
-  useEffect as useEffect13,
-  useRef as useRef5,
-  useState as useState16
+  createContext as createContext4,
+  useCallback as useCallback11,
+  useContext as useContext7,
+  useEffect as useEffect15,
+  useId,
+  useRef as useRef4,
+  useState as useState17
 } from "react";
 import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
@@ -2353,23 +2445,22 @@ import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
 init_react_import();
 import {
   forwardRef as forwardRef3,
-  useCallback as useCallback8,
-  useContext as useContext3,
-  useEffect as useEffect12,
-  useMemo as useMemo7,
-  useRef as useRef4,
-  useState as useState15
+  useCallback as useCallback10,
+  useContext as useContext6,
+  useEffect as useEffect14,
+  useMemo as useMemo8,
+  useRef as useRef3
 } from "react";
 // components/DraggableComponent/index.tsx
 init_react_import();
 import {
-  useCallback as useCallback6,
-  useContext as useContext2,
+  useCallback as useCallback7,
+  useContext as useContext5,
   useEffect as useEffect10,
-  useMemo as useMemo5,
-  useRef as useRef3,
-  useState as useState12
+  useMemo as useMemo7,
+  useRef as useRef2,
+  useState as useState13
 } from "react";
 // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
@@ -2379,18 +2470,18 @@ var styles_module_default11 = { "DraggableComponent": "_DraggableComponent_1ukn8
 // components/DraggableComponent/index.tsx
 import { createPortal as createPortal2 } from "react-dom";
-// components/DraggableComponent/collision/dynamic/index.ts
+// lib/dnd/collision/dynamic/index.ts
 init_react_import();
 import {
   CollisionPriority as CollisionPriority7,
   CollisionType as CollisionType7
 } from "@dnd-kit/abstract";
-// components/DraggableComponent/collision/directional/index.ts
+// lib/dnd/collision/directional/index.ts
 init_react_import();
 import { CollisionType } from "@dnd-kit/abstract";
-// components/DraggableComponent/collision/collision-debug.ts
+// lib/dnd/collision/collision-debug.ts
 init_react_import();
 var DEBUG = false;
 var debugElements = {};
@@ -2439,7 +2530,7 @@ var collisionDebug = (a, b, id, color, label) => {
   });
 };
-// components/DraggableComponent/collision/directional/index.ts
+// lib/dnd/collision/directional/index.ts
 var distanceChange = "increasing";
 var directionalCollision = (input, previous) => {
   var _a;
@@ -2472,7 +2563,7 @@ var directionalCollision = (input, previous) => {
   return null;
 };
-// components/DraggableComponent/collision/dynamic/get-direction.ts
+// lib/dnd/collision/dynamic/get-direction.ts
 init_react_import();
 var getDirection = (dragAxis, delta) => {
   if (dragAxis === "dynamic") {
@@ -2487,7 +2578,7 @@ var getDirection = (dragAxis, delta) => {
   return delta.y === 0 ? null : delta.y > 0 ? "down" : "up";
 };
-// components/DraggableComponent/collision/dynamic/get-midpoint-impact.ts
+// lib/dnd/collision/dynamic/get-midpoint-impact.ts
 init_react_import();
 var getMidpointImpact = (dragShape, dropShape, direction, offsetMultiplier = 0) => {
   const dragRect = dragShape.boundingRectangle;
@@ -2506,7 +2597,7 @@ var getMidpointImpact = (dragShape, dropShape, direction, offsetMultiplier = 0)
   return dragRect.right - offset >= dropCenter.x;
 };
-// components/DraggableComponent/collision/dynamic/track-movement-interval.ts
+// lib/dnd/collision/dynamic/track-movement-interval.ts
 init_react_import();
 import { Point } from "@dnd-kit/geometry";
 var INTERVAL_SENSITIVITY = 10;
@@ -2610,7 +2701,14 @@ var closestCorners = (input) => {
   };
 };
-// components/DraggableComponent/collision/dynamic/index.ts
+// lib/dnd/collision/dynamic/store.ts
+init_react_import();
+import { createStore } from "zustand/vanilla";
+var collisionStore = createStore(() => ({
+  fallbackEnabled: false
+}));
+// lib/dnd/collision/dynamic/index.ts
 var flushNext = "";
 var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input) => {
   var _a, _b, _c, _d, _e;
@@ -2622,6 +2720,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
     return null;
   }
   const { center: dragCenter } = dragShape;
+  const { fallbackEnabled } = collisionStore.getState();
   const interval = trackMovementInterval(position.current, dragAxis);
   dragOperation.data = __spreadProps(__spreadValues({}, dragOperation.data), {
     direction: interval.direction
@@ -2667,7 +2766,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
     flushNext = "";
     return __spreadProps(__spreadValues({}, collision), { id: shouldFlushId ? "flush" : collision.id });
   }
-  if (((_c = dragOperation.source) == null ? void 0 : _c.id) !== droppable.id) {
+  if (fallbackEnabled && ((_c = dragOperation.source) == null ? void 0 : _c.id) !== droppable.id) {
     const xAxisIntersection = dropShape.boundingRectangle.right > dragShape.boundingRectangle.left && dropShape.boundingRectangle.left < dragShape.boundingRectangle.right;
     const yAxisIntersection = dropShape.boundingRectangle.bottom > dragShape.boundingRectangle.top && dropShape.boundingRectangle.top < dragShape.boundingRectangle.bottom;
     if (dragAxis === "y" && xAxisIntersection || yAxisIntersection) {
@@ -2728,8 +2827,107 @@ function getDeepScrollPosition(element) {
   return totalScroll;
 }
+// components/DropZone/context.tsx
+init_react_import();
+import {
+  createContext as createContext3,
+  useCallback as useCallback6,
+  useMemo as useMemo6,
+  useState as useState12
+} from "react";
+import { createStore as createStore2 } from "zustand";
+import { Fragment as Fragment5, jsx as jsx20 } from "react/jsx-runtime";
+var dropZoneContext = createContext3(null);
+var ZoneStoreContext = createContext3(
+  createStore2(() => ({
+    zoneDepthIndex: {},
+    nextZoneDepthIndex: {},
+    areaDepthIndex: {},
+    nextAreaDepthIndex: {},
+    draggedItem: null,
+    previewIndex: {}
+  }))
+);
+var ZoneStoreProvider = ({
+  children,
+  store
+}) => {
+  return /* @__PURE__ */ jsx20(ZoneStoreContext.Provider, { value: store, children });
+};
+var DropZoneProvider = ({
+  children,
+  value
+}) => {
+  const [hoveringComponent, setHoveringComponent] = useState12();
+  const [areasWithZones, setAreasWithZones] = useState12(
+    {}
+  );
+  const [activeZones, setActiveZones] = useState12({});
+  const { dispatch } = useAppContext();
+  const registerZoneArea = useCallback6(
+    (area) => {
+      setAreasWithZones((latest) => __spreadProps(__spreadValues({}, latest), { [area]: true }));
+    },
+    [setAreasWithZones]
+  );
+  const registerZone = useCallback6(
+    (zoneCompound) => {
+      if (!dispatch) {
+        return;
+      }
+      dispatch({
+        type: "registerZone",
+        zone: zoneCompound
+      });
+      setActiveZones((latest) => __spreadProps(__spreadValues({}, latest), { [zoneCompound]: true }));
+    },
+    [setActiveZones, dispatch]
+  );
+  const unregisterZone = useCallback6(
+    (zoneCompound) => {
+      if (!dispatch) {
+        return;
+      }
+      dispatch({
+        type: "unregisterZone",
+        zone: zoneCompound
+      });
+      setActiveZones((latest) => __spreadProps(__spreadValues({}, latest), {
+        [zoneCompound]: false
+      }));
+    },
+    [setActiveZones, dispatch]
+  );
+  const memoValue = useMemo6(
+    () => __spreadValues({
+      hoveringComponent,
+      setHoveringComponent,
+      registerZoneArea,
+      areasWithZones,
+      registerZone,
+      unregisterZone,
+      activeZones
+    }, value),
+    [value, hoveringComponent, areasWithZones, activeZones]
+  );
+  return /* @__PURE__ */ jsx20(Fragment5, { children: memoValue && /* @__PURE__ */ jsx20(dropZoneContext.Provider, { value: memoValue, children }) });
+};
+// lib/use-context-store.ts
+init_react_import();
+import { useContext as useContext4 } from "react";
+import { useStore } from "zustand";
+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 useStore(store, useShallow(selector));
+}
 // components/DraggableComponent/index.tsx
-import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
 var getClassName16 = get_class_name_factory_default("DraggableComponent", styles_module_default11);
 var DEBUG2 = false;
 var space = 8;
@@ -2743,9 +2941,9 @@ var DefaultActionBar = ({
 }) => /* @__PURE__ */ jsxs9(ActionBar, { children: [
   /* @__PURE__ */ jsxs9(ActionBar.Group, { children: [
     parentAction,
-    label && /* @__PURE__ */ jsx19(ActionBar.Label, { label })
+    label && /* @__PURE__ */ jsx21(ActionBar.Label, { label })
   ] }),
-  /* @__PURE__ */ jsx19(ActionBar.Group, { children })
+  /* @__PURE__ */ jsx21(ActionBar.Group, { children })
 ] });
 var convertIdToSelector = (id, zoneCompound, data) => {
   const content = zoneCompound && data.zones && zoneCompound !== "default-zone" ? data.zones[zoneCompound] : data.content;
@@ -2780,9 +2978,9 @@ var DraggableComponent = ({
     iframe,
     state
   } = useAppContext();
-  const ctx = useContext2(dropZoneContext);
-  const [localZones, setLocalZones] = useState12({});
-  const registerLocalZone = useCallback6(
+  const ctx = useContext5(dropZoneContext);
+  const [localZones, setLocalZones] = useState13({});
+  const registerLocalZone = useCallback7(
     (zoneCompound2, active) => {
       var _a;
       (_a = ctx == null ? void 0 : ctx.registerLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2, active);
@@ -2792,7 +2990,7 @@ var DraggableComponent = ({
     },
     [setLocalZones]
   );
-  const unregisterLocalZone = useCallback6(
+  const unregisterLocalZone = useCallback7(
     (zoneCompound2) => {
       var _a;
       (_a = ctx == null ? void 0 : ctx.unregisterLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2);
@@ -2806,7 +3004,7 @@ var DraggableComponent = ({
   );
   const containsActiveZone = Object.values(localZones).filter(Boolean).length > 0;
   const { path = [] } = ctx || {};
-  const [canDrag, setCanDrag] = useState12(false);
+  const [canDrag, setCanDrag] = useState13(false);
   useEffect10(() => {
     var _a;
     const item = getItem({ index, zone: zoneCompound }, state.data);
@@ -2817,10 +3015,13 @@ var DraggableComponent = ({
       setCanDrag((_a = perms.drag) != null ? _a : true);
     }
   }, [state, index, zoneCompound, getPermissions]);
-  const userIsDragging = !!(ctx == null ? void 0 : ctx.draggedItem);
+  const userIsDragging = useContextStore(
+    ZoneStoreContext,
+    (s) => !!s.draggedItem
+  );
   const canCollide = canDrag || userIsDragging;
   const disabled = !isEnabled || !canCollide;
-  const [dragAxis, setDragAxis] = useState12(userDragAxis || autoDragAxis);
+  const [dragAxis, setDragAxis] = useState13(userDragAxis || autoDragAxis);
   const { ref: sortableRef, status } = useSortableSafe({
     id,
     index,
@@ -2846,8 +3047,8 @@ var DraggableComponent = ({
     }
   });
   const thisIsDragging = status === "dragging";
-  const ref = useRef3(null);
-  const refSetter = useCallback6(
+  const ref = useRef2(null);
+  const refSetter = useCallback7(
     (el) => {
       sortableRef(el);
       if (el) {
@@ -2856,14 +3057,14 @@ var DraggableComponent = ({
     },
     [sortableRef]
   );
-  const [portalEl, setPortalEl] = useState12();
+  const [portalEl, setPortalEl] = useState13();
   useEffect10(() => {
     var _a, _b, _c;
     setPortalEl(
       iframe.enabled ? (_a = ref.current) == null ? void 0 : _a.ownerDocument.body : (_c = (_b = ref.current) == null ? void 0 : _b.closest("[data-puck-preview]")) != null ? _c : document.body
     );
   }, [iframe.enabled, ref.current]);
-  const getStyle = useCallback6(() => {
+  const getStyle = useCallback7(() => {
     var _a, _b, _c;
     if (!ref.current) return;
     const rect = ref.current.getBoundingClientRect();
@@ -2883,8 +3084,8 @@ var DraggableComponent = ({
     };
     return style2;
   }, [ref.current]);
-  const [style, setStyle] = useState12();
-  const sync = useCallback6(() => {
+  const [style, setStyle] = useState13();
+  const sync = useCallback7(() => {
     setStyle(getStyle());
   }, [ref.current, iframe]);
   useEffect10(() => {
@@ -2897,19 +3098,21 @@ var DraggableComponent = ({
     }
   }, [ref.current]);
   useEffect10(() => {
-    ctx == null ? void 0 : ctx.registerPath({
-      index,
-      zone: zoneCompound
-    });
+    if (isSelected) {
+      ctx == null ? void 0 : ctx.registerPath({
+        index,
+        zone: zoneCompound
+      });
+    }
   }, [isSelected]);
-  const CustomActionBar = useMemo5(
+  const CustomActionBar = useMemo7(
     () => overrides.actionBar || DefaultActionBar,
     [overrides.actionBar]
   );
   const permissions = getPermissions({
     item: selectedItem
   });
-  const onClick = useCallback6(
+  const onClick = useCallback7(
     (e) => {
       e.stopPropagation();
       dispatch({
@@ -2921,7 +3124,7 @@ var DraggableComponent = ({
     },
     [index, zoneCompound, id]
   );
-  const onSelectParent = useCallback6(() => {
+  const onSelectParent = useCallback7(() => {
     if (!(ctx == null ? void 0 : ctx.areaId)) {
       return;
     }
@@ -2939,21 +3142,21 @@ var DraggableComponent = ({
       }
     });
   }, [ctx, path]);
-  const onDuplicate = useCallback6(() => {
+  const onDuplicate = useCallback7(() => {
     dispatch({
       type: "duplicate",
       sourceIndex: index,
       sourceZone: zoneCompound
     });
   }, [index, zoneCompound]);
-  const onDelete = useCallback6(() => {
+  const onDelete = useCallback7(() => {
     dispatch({
       type: "remove",
       index,
       zone: zoneCompound
     });
   }, [index, zoneCompound]);
-  const [hover, setHover] = useState12(false);
+  const [hover, setHover] = useState13(false);
   const indicativeHover = (ctx == null ? void 0 : ctx.hoveringComponent) === id;
   useEffect10(() => {
     if (!ref.current) {
@@ -3014,7 +3217,7 @@ var DraggableComponent = ({
       };
     }
   }, [disabled, ref]);
-  const [isVisible, setIsVisible] = useState12(false);
+  const [isVisible, setIsVisible] = useState13(false);
   useEffect10(() => {
     sync();
     if ((isSelected || hover || indicativeHover) && !userIsDragging) {
@@ -3023,7 +3226,7 @@ var DraggableComponent = ({
       setIsVisible(false);
     }
   }, [isSelected, hover, indicativeHover, iframe, state.data, userIsDragging]);
-  const syncActionsPosition = useCallback6(
+  const syncActionsPosition = useCallback7(
     (el) => {
       if (el) {
         const view = el.ownerDocument.defaultView;
@@ -3054,7 +3257,7 @@ var DraggableComponent = ({
     }
     setDragAxis(autoDragAxis);
   }, [ref, userDragAxis, autoDragAxis]);
-  const parentAction = (ctx == null ? void 0 : ctx.areaId) && (ctx == null ? void 0 : ctx.areaId) !== "root" && /* @__PURE__ */ jsx19(ActionBar.Action, { onClick: onSelectParent, label: "Select parent", children: /* @__PURE__ */ jsx19(CornerLeftUp, { size: 16 }) });
+  const parentAction = (ctx == null ? void 0 : ctx.areaId) && (ctx == null ? void 0 : ctx.areaId) !== "root" && /* @__PURE__ */ jsx21(ActionBar.Action, { onClick: onSelectParent, label: "Select parent", children: /* @__PURE__ */ jsx21(CornerLeftUp, { size: 16 }) });
   return /* @__PURE__ */ jsxs9(
     DropZoneProvider,
     {
@@ -3081,15 +3284,15 @@ var DraggableComponent = ({
               "data-puck-overlay": true,
               children: [
                 debug,
-                isLoading && /* @__PURE__ */ jsx19("div", { className: getClassName16("loadingOverlay"), children: /* @__PURE__ */ jsx19(Loader, {}) }),
-                /* @__PURE__ */ jsx19(
+                isLoading && /* @__PURE__ */ jsx21("div", { className: getClassName16("loadingOverlay"), children: /* @__PURE__ */ jsx21(Loader, {}) }),
+                /* @__PURE__ */ jsx21(
                   "div",
                   {
                     className: getClassName16("actionsOverlay"),
                     style: {
                       top: actionsOverlayTop / zoomConfig.zoom
                     },
-                    children: /* @__PURE__ */ jsx19(
+                    children: /* @__PURE__ */ jsx21(
                       "div",
                       {
                         className: getClassName16("actions"),
@@ -3107,8 +3310,8 @@ var DraggableComponent = ({
                             parentAction,
                             label: DEBUG2 ? id : label,
                             children: [
-                              permissions.duplicate && /* @__PURE__ */ jsx19(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ jsx19(Copy, { size: 16 }) }),
-                              permissions.delete && /* @__PURE__ */ jsx19(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ jsx19(Trash, { size: 16 }) })
+                              permissions.duplicate && /* @__PURE__ */ jsx21(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ jsx21(Copy, { size: 16 }) }),
+                              permissions.delete && /* @__PURE__ */ jsx21(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ jsx21(Trash, { size: 16 }) })
                             ]
                           }
                         )
@@ -3116,7 +3319,7 @@ var DraggableComponent = ({
                     )
                   }
                 ),
-                /* @__PURE__ */ jsx19("div", { className: getClassName16("overlay") })
+                /* @__PURE__ */ jsx21("div", { className: getClassName16("overlay") })
               ]
             }
           ),
@@ -3132,98 +3335,26 @@ var DraggableComponent = ({
 init_react_import();
 var styles_module_default12 = { "DropZone": "_DropZone_kmkdc_1", "DropZone--isActive": "_DropZone--isActive_kmkdc_10", "DropZone--hasChildren": "_DropZone--hasChildren_kmkdc_14", "DropZone--userIsDragging": "_DropZone--userIsDragging_kmkdc_22", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_kmkdc_26", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_kmkdc_27", "DropZone--isRootZone": "_DropZone--isRootZone_kmkdc_27", "DropZone--isDestination": "_DropZone--isDestination_kmkdc_37", "DropZone-item": "_DropZone-item_kmkdc_49", "DropZone-hitbox": "_DropZone-hitbox_kmkdc_53", "DropZone--isEnabled": "_DropZone--isEnabled_kmkdc_61", "DropZone--isAnimating": "_DropZone--isAnimating_kmkdc_70" };
-// components/DropZone/context.tsx
-init_react_import();
-import {
-  createContext as createContext2,
-  useCallback as useCallback7,
-  useMemo as useMemo6,
-  useState as useState13
-} from "react";
-import { Fragment as Fragment5, jsx as jsx20 } from "react/jsx-runtime";
-var dropZoneContext = createContext2(null);
-var DropZoneProvider = ({
-  children,
-  value
-}) => {
-  const [hoveringComponent, setHoveringComponent] = useState13();
-  const [areasWithZones, setAreasWithZones] = useState13(
-    {}
-  );
-  const [activeZones, setActiveZones] = useState13({});
-  const { dispatch } = useAppContext();
-  const registerZoneArea = useCallback7(
-    (area) => {
-      setAreasWithZones((latest) => __spreadProps(__spreadValues({}, latest), { [area]: true }));
-    },
-    [setAreasWithZones]
-  );
-  const registerZone = useCallback7(
-    (zoneCompound) => {
-      if (!dispatch) {
-        return;
-      }
-      dispatch({
-        type: "registerZone",
-        zone: zoneCompound
-      });
-      setActiveZones((latest) => __spreadProps(__spreadValues({}, latest), { [zoneCompound]: true }));
-    },
-    [setActiveZones, dispatch]
-  );
-  const unregisterZone = useCallback7(
-    (zoneCompound) => {
-      if (!dispatch) {
-        return;
-      }
-      dispatch({
-        type: "unregisterZone",
-        zone: zoneCompound
-      });
-      setActiveZones((latest) => __spreadProps(__spreadValues({}, latest), {
-        [zoneCompound]: false
-      }));
-    },
-    [setActiveZones, dispatch]
-  );
-  const memoValue = useMemo6(
-    () => __spreadValues({
-      hoveringComponent,
-      setHoveringComponent,
-      registerZoneArea,
-      areasWithZones,
-      registerZone,
-      unregisterZone,
-      activeZones
-    }, value),
-    [value, hoveringComponent, areasWithZones, activeZones]
-  );
-  return /* @__PURE__ */ jsx20(Fragment5, { children: memoValue && /* @__PURE__ */ jsx20(dropZoneContext.Provider, { value: memoValue, children }) });
-};
-// lib/insert.ts
-init_react_import();
-var insert = (list, index, item) => {
-  const result = Array.from(list);
-  result.splice(index, 0, item);
-  return result;
-};
-// components/DropZone/use-min-empty-height.ts
+// components/DropZone/lib/use-min-empty-height.ts
 init_react_import();
 import { useEffect as useEffect11, useState as useState14 } from "react";
 var useMinEmptyHeight = ({
-  draggedItem,
   zoneCompound,
   userMinEmptyHeight,
   ref
 }) => {
   const [prevHeight, setPrevHeight] = useState14(0);
   const [isAnimating, setIsAnimating] = useState14(false);
+  const { draggedItem, isZone } = useContextStore(ZoneStoreContext, (s) => {
+    var _a, _b;
+    return {
+      draggedItem: ((_a = s.draggedItem) == null ? void 0 : _a.data.zone) === zoneCompound ? s.draggedItem : null,
+      isZone: ((_b = s.draggedItem) == null ? void 0 : _b.data.zone) === zoneCompound
+    };
+  });
   useEffect11(() => {
     if (draggedItem && ref.current) {
-      const componentData = draggedItem.data;
-      if (componentData.zone === zoneCompound) {
+      if (isZone) {
         const rect = ref.current.getBoundingClientRect();
         setPrevHeight(rect.height);
         setIsAnimating(true);
@@ -3253,15 +3384,131 @@ function assignRefs(refs, node) {
   });
 }
-// components/DropZone/index.tsx
-import { Fragment as Fragment6, jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
-var getClassName17 = get_class_name_factory_default("DropZone", styles_module_default12);
-var DEBUG3 = false;
+// components/DropZone/lib/use-content-with-preview.ts
+init_react_import();
+import { useEffect as useEffect12, useState as useState15 } from "react";
+// lib/dnd/use-rendered-callback.ts
+init_react_import();
+import { useDragDropManager } from "@dnd-kit/react";
+import { useCallback as useCallback8 } from "react";
+function useRenderedCallback(callback, deps) {
+  const manager = useDragDropManager();
+  return useCallback8(
+    (...args) => __async(this, null, function* () {
+      yield manager == null ? void 0 : manager.renderer.rendering;
+      return callback(...args);
+    }),
+    [...deps, manager]
+  );
+}
+// lib/insert.ts
+init_react_import();
+var insert = (list, index, item) => {
+  const result = Array.from(list);
+  result.splice(index, 0, item);
+  return result;
+};
+// components/DropZone/lib/use-content-with-preview.ts
+var useContentWithPreview = (content, zoneCompound) => {
+  const { draggedItemId, preview, previewExists } = useContextStore(
+    ZoneStoreContext,
+    (s) => {
+      var _a;
+      return {
+        draggedItemId: (_a = s.draggedItem) == null ? void 0 : _a.id,
+        preview: s.previewIndex[zoneCompound],
+        previewExists: Object.keys(s.previewIndex || {}).length > 0
+      };
+    }
+  );
+  const [contentWithPreview, setContentWithPreview] = useState15(content);
+  const updateContent = useRenderedCallback(
+    (content2, preview2) => {
+      if (preview2) {
+        if (preview2.type === "insert") {
+          setContentWithPreview(
+            insert(
+              content2.filter((item) => item.props.id !== preview2.props.id),
+              preview2.index,
+              {
+                type: "preview",
+                props: { id: preview2.props.id }
+              }
+            )
+          );
+        } else {
+          setContentWithPreview(
+            insert(
+              content2.filter((item) => item.props.id !== preview2.props.id),
+              preview2.index,
+              {
+                type: preview2.componentType,
+                props: preview2.props
+              }
+            )
+          );
+        }
+      } else {
+        setContentWithPreview(
+          previewExists ? content2.filter((item) => item.props.id !== draggedItemId) : content2
+        );
+      }
+    },
+    [draggedItemId, previewExists]
+  );
+  useEffect12(() => {
+    updateContent(content, preview);
+  }, [content, preview]);
+  return contentWithPreview;
+};
+// components/DropZone/lib/use-drag-axis.ts
+init_react_import();
+import { useCallback as useCallback9, useEffect as useEffect13, useState as useState16 } from "react";
 var GRID_DRAG_AXIS = "dynamic";
 var FLEX_ROW_DRAG_AXIS = "x";
 var DEFAULT_DRAG_AXIS = "y";
+var useDragAxis = (ref, collisionAxis) => {
+  const { status } = useAppContext();
+  const [dragAxis, setDragAxis] = useState16(
+    collisionAxis || DEFAULT_DRAG_AXIS
+  );
+  const calculateDragAxis = useCallback9(() => {
+    if (ref.current) {
+      const computedStyle = window.getComputedStyle(ref.current);
+      if (computedStyle.display === "grid") {
+        setDragAxis(GRID_DRAG_AXIS);
+      } else if (computedStyle.display === "flex" && computedStyle.flexDirection === "row") {
+        setDragAxis(FLEX_ROW_DRAG_AXIS);
+      } else {
+        setDragAxis(DEFAULT_DRAG_AXIS);
+      }
+    }
+  }, [ref.current]);
+  useEffect13(() => {
+    const onViewportChange = () => {
+      calculateDragAxis();
+    };
+    window.addEventListener("viewportchange", onViewportChange);
+    return () => {
+      window.removeEventListener("viewportchange", onViewportChange);
+    };
+  }, []);
+  useEffect13(calculateDragAxis, [status, collisionAxis]);
+  return [dragAxis, calculateDragAxis];
+};
+// components/DropZone/index.tsx
+import { Fragment as Fragment6, jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
+var getClassName17 = get_class_name_factory_default("DropZone", styles_module_default12);
+var getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+var RENDER_DEBUG = false;
+var DropZoneEditPure = (props) => /* @__PURE__ */ jsx22(DropZoneEdit, __spreadValues({}, props));
 var DropZoneEdit = forwardRef3(
-  function DropZoneEdit2({
+  function DropZoneEditInternal({
     zone,
     allow,
     disallow,
@@ -3271,31 +3518,50 @@ var DropZoneEdit = forwardRef3(
     collisionAxis
   }, userRef) {
     const appContext2 = useAppContext();
-    const ctx = useContext3(dropZoneContext);
+    const ctx = useContext6(dropZoneContext);
     const {
       // These all need setting via context
       data,
       config,
       areaId,
-      draggedItem,
       registerZoneArea,
       depth,
       registerLocalZone,
       unregisterLocalZone,
-      deepestZone = rootDroppableId,
-      deepestArea,
-      nextDeepestArea,
       path = [],
       activeZones
     } = ctx;
-    const { itemSelector } = appContext2.state.ui;
     let zoneCompound = rootDroppableId;
-    useEffect12(() => {
+    if (areaId) {
+      if (zone !== rootDroppableId) {
+        zoneCompound = `${areaId}:${zone}`;
+      }
+    }
+    const isRootZone = zoneCompound === rootDroppableId || zone === rootDroppableId || areaId === "root";
+    const {
+      isDeepestZone,
+      inNextDeepestArea,
+      draggedComponentType,
+      userIsDragging,
+      preview
+    } = useContextStore(ZoneStoreContext, (s) => {
+      var _a, _b, _c;
+      return {
+        isDeepestZone: (_a = s.zoneDepthIndex[zoneCompound]) != null ? _a : false,
+        inNextDeepestArea: s.nextAreaDepthIndex[areaId || ""],
+        draggedItemId: (_b = s.draggedItem) == null ? void 0 : _b.id,
+        draggedComponentType: (_c = s.draggedItem) == null ? void 0 : _c.data.componentType,
+        userIsDragging: !!s.draggedItem,
+        preview: s.previewIndex[zoneCompound]
+      };
+    });
+    const { itemSelector } = appContext2.state.ui;
+    useEffect14(() => {
       if (areaId && registerZoneArea) {
         registerZoneArea(areaId);
       }
     }, [areaId]);
-    useEffect12(() => {
+    useEffect14(() => {
       if (ctx == null ? void 0 : ctx.registerZone) {
         ctx == null ? void 0 : ctx.registerZone(zoneCompound);
       }
@@ -3305,25 +3571,18 @@ var DropZoneEdit = forwardRef3(
         }
       };
     }, []);
-    if (areaId) {
-      if (zone !== rootDroppableId) {
-        zoneCompound = `${areaId}:${zone}`;
-      }
-    }
-    const content = useMemo7(() => {
+    const content = useMemo8(() => {
       if (areaId && zone !== rootDroppableId) {
         return setupZone(data, zoneCompound).zones[zoneCompound];
       }
       return data.content || [];
     }, [data, zoneCompound]);
-    const ref = useRef4(null);
-    const acceptsTarget = useCallback8(
-      (target) => {
-        if (!target) {
+    const ref = useRef3(null);
+    const acceptsTarget = useCallback10(
+      (componentType) => {
+        if (!componentType) {
           return true;
         }
-        const data2 = target.data;
-        const { componentType } = data2;
         if (disallow) {
           const defaultedAllow = allow || [];
           const filteredDisallow = (disallow || []).filter(
@@ -3341,49 +3600,26 @@ var DropZoneEdit = forwardRef3(
       },
       [allow, disallow]
     );
-    useEffect12(() => {
+    useEffect14(() => {
       if (registerLocalZone) {
-        registerLocalZone(zoneCompound, acceptsTarget(draggedItem));
+        registerLocalZone(zoneCompound, acceptsTarget(draggedComponentType));
       }
       return () => {
         if (unregisterLocalZone) {
           unregisterLocalZone(zoneCompound);
         }
       };
-    }, [draggedItem, zoneCompound]);
-    const isRootZone = zoneCompound === rootDroppableId || zone === rootDroppableId || areaId === "root";
-    const hoveringOverArea = nextDeepestArea ? nextDeepestArea === areaId : isRootZone;
-    const userIsDragging = !!draggedItem;
+    }, [draggedComponentType, zoneCompound]);
+    const hoveringOverArea = inNextDeepestArea || isRootZone;
     let isEnabled = true;
-    if (draggedItem) {
-      isEnabled = deepestZone === zoneCompound;
+    if (userIsDragging) {
+      isEnabled = isDeepestZone;
     }
     if (isEnabled) {
-      isEnabled = acceptsTarget(draggedItem);
-    }
-    const preview = useContext3(previewContext);
-    const previewInZone = (preview == null ? void 0 : preview.zone) === zoneCompound;
-    const contentWithPreview = useMemo7(() => {
-      let contentWithPreview2 = preview ? content.filter((item) => item.props.id !== preview.props.id) : content;
-      if (previewInZone) {
-        contentWithPreview2 = content.filter(
-          (item) => item.props.id !== preview.props.id
-        );
-        if (preview.type === "insert") {
-          contentWithPreview2 = insert(contentWithPreview2, preview.index, {
-            type: "preview",
-            props: { id: preview.props.id }
-          });
-        } else {
-          contentWithPreview2 = insert(contentWithPreview2, preview.index, {
-            type: preview.componentType,
-            props: preview.props
-          });
-        }
-      }
-      return contentWithPreview2;
-    }, [preview, content]);
-    const isDropEnabled = isEnabled && (previewInZone ? contentWithPreview.length === 1 : contentWithPreview.length === 0);
+      isEnabled = acceptsTarget(draggedComponentType);
+    }
+    const contentWithPreview = useContentWithPreview(content, zoneCompound);
+    const isDropEnabled = isEnabled && (preview ? contentWithPreview.length === 1 : contentWithPreview.length === 0);
     const droppableConfig = {
       id: zoneCompound,
       collisionPriority: isEnabled ? depth : 0,
@@ -3393,45 +3629,20 @@ var DropZoneEdit = forwardRef3(
       data: {
         areaId,
         depth,
-        isDroppableTarget: acceptsTarget(draggedItem),
+        isDroppableTarget: acceptsTarget(draggedComponentType),
         path
       }
     };
     const { ref: dropRef } = useDroppableSafe(droppableConfig);
     const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
     const isAreaSelected = selectedItem && areaId === selectedItem.props.id;
-    const [dragAxis, setDragAxis] = useState15(
-      collisionAxis || DEFAULT_DRAG_AXIS
-    );
-    const calculateDragAxis = useCallback8(() => {
-      if (ref.current) {
-        const computedStyle = window.getComputedStyle(ref.current);
-        if (computedStyle.display === "grid") {
-          setDragAxis(GRID_DRAG_AXIS);
-        } else if (computedStyle.display === "flex" && computedStyle.flexDirection === "row") {
-          setDragAxis(FLEX_ROW_DRAG_AXIS);
-        } else {
-          setDragAxis(DEFAULT_DRAG_AXIS);
-        }
-      }
-    }, [ref.current]);
-    useEffect12(calculateDragAxis, [appContext2.status, collisionAxis]);
-    useEffect12(() => {
-      const onViewportChange = () => {
-        calculateDragAxis();
-      };
-      window.addEventListener("viewportchange", onViewportChange);
-      return () => {
-        window.removeEventListener("viewportchange", onViewportChange);
-      };
-    }, []);
+    const [dragAxis] = useDragAxis(ref, collisionAxis);
     const [minEmptyHeight, isAnimating] = useMinEmptyHeight({
-      draggedItem,
       zoneCompound,
       userMinEmptyHeight,
       ref
     });
-    return /* @__PURE__ */ jsxs10(
+    return /* @__PURE__ */ jsx22(
       "div",
       {
         className: `${getClassName17({
@@ -3451,88 +3662,84 @@ var DropZoneEdit = forwardRef3(
         "data-puck-dropzone": zoneCompound,
         "data-puck-dnd": zoneCompound,
         style: __spreadProps(__spreadValues({}, style), {
-          "--min-empty-height": `${minEmptyHeight}px`
+          "--min-empty-height": `${minEmptyHeight}px`,
+          backgroundColor: RENDER_DEBUG ? getRandomColor() : void 0
         }),
-        children: [
-          isRootZone && DEBUG3 && /* @__PURE__ */ jsxs10("div", { "data-puck-component": true, children: [
-            /* @__PURE__ */ jsx21("p", { children: deepestZone || rootDroppableId }),
-            /* @__PURE__ */ jsx21("p", { children: deepestArea || "No area" })
-          ] }),
-          contentWithPreview.map((item, i) => {
-            var _a, _b, _c, _d, _e;
-            const componentId = item.props.id;
-            const puckProps = {
-              renderDropZone: DropZone,
-              isEditing: true,
-              dragRef: null
+        children: contentWithPreview.map((item, i) => {
+          var _a, _b, _c, _d, _e, _f, _g;
+          const componentId = item.props.id;
+          const puckProps = {
+            renderDropZone: DropZoneEditPure,
+            isEditing: true,
+            dragRef: null
+          };
+          const defaultedProps = __spreadProps(__spreadValues(__spreadValues({}, (_a = config.components[item.type]) == null ? void 0 : _a.defaultProps), item.props), {
+            puck: puckProps,
+            editMode: true
+            // DEPRECATED
+          });
+          const isSelected = (selectedItem == null ? void 0 : selectedItem.props.id) === componentId || false;
+          let Render2 = config.components[item.type] && item.type !== "preview" ? config.components[item.type].render : () => /* @__PURE__ */ jsxs10("div", { style: { padding: 48, textAlign: "center" }, children: [
+            "No configuration for ",
+            item.type
+          ] });
+          const componentConfig = config.components[item.type];
+          let componentType = item.type;
+          let label = (_b = componentConfig == null ? void 0 : componentConfig["label"]) != null ? _b : item.type.toString();
+          if (item.type === "preview") {
+            let Preview4 = function() {
+              return /* @__PURE__ */ jsx22(DrawerItemInner, { name: label, children: appContext2.overrides.componentItem });
             };
-            const defaultedProps = __spreadProps(__spreadValues(__spreadValues({}, (_a = config.components[item.type]) == null ? void 0 : _a.defaultProps), item.props), {
-              puck: puckProps,
-              editMode: true
-              // DEPRECATED
-            });
-            const isSelected = (selectedItem == null ? void 0 : selectedItem.props.id) === componentId || false;
-            let Render2 = config.components[item.type] ? config.components[item.type].render : () => /* @__PURE__ */ jsxs10("div", { style: { padding: 48, textAlign: "center" }, children: [
-              "No configuration for ",
-              item.type
-            ] });
-            const componentConfig = config.components[item.type];
-            let componentType = item.type;
-            let label = (_b = componentConfig == null ? void 0 : componentConfig["label"]) != null ? _b : item.type.toString();
-            if (item.type === "preview") {
-              let Preview3 = function() {
-                return /* @__PURE__ */ jsx21(DrawerItemInner, { name: label });
-              };
-              var Preview2 = Preview3;
-              componentType = preview.componentType;
-              label = (_d = (_c = config.components[componentType]) == null ? void 0 : _c.label) != null ? _d : preview.componentType;
-              Render2 = Preview3;
-            }
-            return /* @__PURE__ */ jsx21(
-              DropZoneProvider,
-              {
-                value: __spreadProps(__spreadValues({}, ctx), { path: [...path, zoneCompound] }),
-                children: /* @__PURE__ */ jsx21(
-                  DraggableComponent,
-                  {
-                    id: componentId,
-                    componentType,
-                    zoneCompound,
-                    depth: depth + 1,
-                    index: i,
-                    isLoading: ((_e = appContext2.componentState[componentId]) == null ? void 0 : _e.loadingCount) > 0,
-                    isSelected,
-                    label,
-                    isEnabled,
-                    autoDragAxis: dragAxis,
-                    userDragAxis: collisionAxis,
-                    inDroppableZone: acceptsTarget(draggedItem),
-                    children: (dragRef) => (componentConfig == null ? void 0 : componentConfig.inline) ? /* @__PURE__ */ jsx21(
-                      Render2,
-                      __spreadProps(__spreadValues({}, defaultedProps), {
-                        puck: __spreadProps(__spreadValues({}, defaultedProps.puck), {
-                          dragRef
-                        })
+            var Preview3 = Preview4;
+            componentType = (_c = preview == null ? void 0 : preview.componentType) != null ? _c : "__preview";
+            label = (_f = (_e = (_d = config.components[componentType]) == null ? void 0 : _d.label) != null ? _e : componentType) != null ? _f : "Preview";
+            Render2 = Preview4;
+          }
+          return /* @__PURE__ */ jsx22(
+            DropZoneProvider,
+            {
+              value: __spreadProps(__spreadValues({}, ctx), { path: [...path, zoneCompound] }),
+              children: /* @__PURE__ */ jsx22(
+                DraggableComponent,
+                {
+                  id: componentId,
+                  componentType,
+                  zoneCompound,
+                  depth: depth + 1,
+                  index: i,
+                  isLoading: ((_g = appContext2.componentState[componentId]) == null ? void 0 : _g.loadingCount) > 0,
+                  isSelected,
+                  label,
+                  isEnabled,
+                  autoDragAxis: dragAxis,
+                  userDragAxis: collisionAxis,
+                  inDroppableZone: acceptsTarget(draggedComponentType),
+                  children: (dragRef) => (componentConfig == null ? void 0 : componentConfig.inline) ? /* @__PURE__ */ jsx22(
+                    Render2,
+                    __spreadProps(__spreadValues({}, defaultedProps), {
+                      puck: __spreadProps(__spreadValues({}, defaultedProps.puck), {
+                        dragRef
                       })
-                    ) : /* @__PURE__ */ jsx21("div", { ref: dragRef, children: /* @__PURE__ */ jsx21(Render2, __spreadValues({}, defaultedProps)) })
-                  }
-                )
-              },
-              componentId
-            );
-          })
-        ]
+                    })
+                  ) : /* @__PURE__ */ jsx22("div", { ref: dragRef, children: /* @__PURE__ */ jsx22(Render2, __spreadValues({}, defaultedProps)) })
+                }
+              )
+            },
+            componentId
+          );
+        })
       }
     );
   }
 );
+var DropZoneRenderPure = (props) => /* @__PURE__ */ jsx22(DropZoneRender, __spreadValues({}, props));
 var DropZoneRender = forwardRef3(
-  function DropZoneRender2({ className, style, zone }, ref) {
-    const ctx = useContext3(dropZoneContext);
+  function DropZoneRenderInternal({ className, style, zone }, ref) {
+    const ctx = useContext6(dropZoneContext);
     const { data, areaId = "root", config } = ctx || {};
     let zoneCompound = rootDroppableId;
     let content = (data == null ? void 0 : data.content) || [];
-    useEffect12(() => {
+    useEffect14(() => {
       if (ctx == null ? void 0 : ctx.registerZone) {
         ctx == null ? void 0 : ctx.registerZone(zoneCompound);
       }
@@ -3549,10 +3756,10 @@ var DropZoneRender = forwardRef3(
       zoneCompound = `${areaId}:${zone}`;
       content = setupZone(data, zoneCompound).zones[zoneCompound];
     }
-    return /* @__PURE__ */ jsx21("div", { className, style, ref, children: content.map((item) => {
+    return /* @__PURE__ */ jsx22("div", { className, style, ref, children: content.map((item) => {
       const Component = config.components[item.type];
       if (Component) {
-        return /* @__PURE__ */ jsx21(
+        return /* @__PURE__ */ jsx22(
           DropZoneProvider,
           {
             value: {
@@ -3562,10 +3769,12 @@ var DropZoneRender = forwardRef3(
               depth: 1,
               path: []
             },
-            children: /* @__PURE__ */ jsx21(
+            children: /* @__PURE__ */ jsx22(
               Component.render,
               __spreadProps(__spreadValues({}, item.props), {
-                puck: { renderDropZone: DropZoneRender2 }
+                puck: {
+                  renderDropZone: DropZoneRenderPure
+                }
               })
             )
           },
@@ -3578,11 +3787,11 @@ var DropZoneRender = forwardRef3(
 );
 var DropZone = forwardRef3(
   function DropZone2(props, ref) {
-    const ctx = useContext3(dropZoneContext);
+    const ctx = useContext6(dropZoneContext);
     if ((ctx == null ? void 0 : ctx.mode) === "edit") {
-      return /* @__PURE__ */ jsx21(Fragment6, { children: /* @__PURE__ */ jsx21(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
+      return /* @__PURE__ */ jsx22(Fragment6, { children: /* @__PURE__ */ jsx22(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
     }
-    return /* @__PURE__ */ jsx21(Fragment6, { children: /* @__PURE__ */ jsx21(DropZoneRender, __spreadProps(__spreadValues({}, props), { ref })) });
+    return /* @__PURE__ */ jsx22(Fragment6, { children: /* @__PURE__ */ jsx22(DropZoneRender, __spreadProps(__spreadValues({}, props), { ref })) });
   }
 );
@@ -3598,7 +3807,7 @@ var getZoneId = (zoneCompound) => {
   return [rootDroppableId, zoneCompound];
 };
-// components/DragDropContext/NestedDroppablePlugin.ts
+// lib/dnd/NestedDroppablePlugin.ts
 init_react_import();
 import { Plugin } from "@dnd-kit/abstract";
 import { effects } from "@dnd-kit/state";
@@ -3640,7 +3849,49 @@ var getFrame = () => {
   return (frameEl == null ? void 0 : frameEl.ownerDocument) || document;
 };
-// components/DragDropContext/NestedDroppablePlugin.ts
+// lib/global-position.ts
+init_react_import();
+var GlobalPosition = class {
+  constructor(target, original) {
+    this.scaleFactor = 1;
+    this.frameEl = null;
+    this.frameRect = null;
+    var _a;
+    this.target = target;
+    this.original = original;
+    this.frameEl = document.querySelector("iframe");
+    if (this.frameEl) {
+      this.frameRect = this.frameEl.getBoundingClientRect();
+      this.scaleFactor = this.frameRect.width / (((_a = this.frameEl.contentWindow) == null ? void 0 : _a.innerWidth) || 1);
+    }
+  }
+  get x() {
+    return this.original.x;
+  }
+  get y() {
+    return this.original.y;
+  }
+  get global() {
+    if (document !== this.target.ownerDocument && this.frameRect) {
+      return {
+        x: this.x * this.scaleFactor + this.frameRect.left,
+        y: this.y * this.scaleFactor + this.frameRect.top
+      };
+    }
+    return this.original;
+  }
+  get frame() {
+    if (document === this.target.ownerDocument && this.frameRect) {
+      return {
+        x: (this.x - this.frameRect.left) / this.scaleFactor,
+        y: (this.y - this.frameRect.top) / this.scaleFactor
+      };
+    }
+    return this.original;
+  }
+};
+// lib/dnd/NestedDroppablePlugin.ts
 var depthSort = (candidates) => {
   return candidates.sort((a, b) => {
     const aData = a.data;
@@ -3669,10 +3920,12 @@ var getZoneId2 = (candidate) => {
   }
   return id;
 };
-var getPointerCollisions = (position, manager, ownerDocument) => {
-  var _a;
+var getPointerCollisions = (position, manager) => {
   const candidates = [];
-  let elements = ownerDocument.elementsFromPoint(position.x, position.y);
+  let elements = position.target.ownerDocument.elementsFromPoint(
+    position.x,
+    position.y
+  );
   const previewFrame = elements.find(
     (el) => el.getAttribute("data-puck-preview")
   );
@@ -3681,17 +3934,9 @@ var getPointerCollisions = (position, manager, ownerDocument) => {
     elements = [drawer];
   }
   if (previewFrame) {
-    const iframe = previewFrame.querySelector("iframe");
-    if (iframe) {
-      const rect = iframe.getBoundingClientRect();
-      const frame = getFrame();
-      if (frame) {
-        const scaleFactor = rect.width / (((_a = iframe.contentWindow) == null ? void 0 : _a.innerWidth) || 1);
-        elements = frame.elementsFromPoint(
-          (position.x - rect.left) / scaleFactor,
-          (position.y - rect.top) / scaleFactor
-        );
-      }
+    const frame = getFrame();
+    if (frame) {
+      elements = frame.elementsFromPoint(position.frame.x, position.frame.y);
     }
   }
   if (elements) {
@@ -3708,9 +3953,9 @@ var getPointerCollisions = (position, manager, ownerDocument) => {
   }
   return candidates;
 };
-var findDeepestCandidate = (position, manager, ownerDocument) => {
+var findDeepestCandidate = (position, manager) => {
   var _a;
-  const candidates = getPointerCollisions(position, manager, ownerDocument);
+  const candidates = getPointerCollisions(position, manager);
   if (candidates.length > 0) {
     const sortedCandidates = depthSort(candidates);
     const draggable = manager.dragOperation.source;
@@ -3755,9 +4000,7 @@ var findDeepestCandidate = (position, manager, ownerDocument) => {
     area: null
   };
 };
-var createNestedDroppablePlugin = ({
-  onChange
-}) => class NestedDroppablePlugin extends Plugin {
+var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlugin extends Plugin {
   constructor(manager, options) {
     super(manager);
     if (typeof window === "undefined") {
@@ -3765,16 +4008,19 @@ var createNestedDroppablePlugin = ({
     }
     const cleanupEffect = effects(() => {
       const handleMove = (event) => {
-        const position = {
+        const target = event.originalTarget || event.target;
+        const position = new GlobalPosition(target, {
           x: event.clientX,
           y: event.clientY
-        };
-        const target = event.originalTarget || event.target;
-        const ownerDocument = target == null ? void 0 : target.ownerDocument;
-        onChange(
-          findDeepestCandidate(position, manager, ownerDocument),
-          manager
+        });
+        const elements = document.elementsFromPoint(
+          position.global.x,
+          position.global.y
         );
+        const overEl = elements.some((el) => el.id === id);
+        if (overEl) {
+          onChange(findDeepestCandidate(position, manager), manager);
+        }
       };
       const handleMoveThrottled = throttle(handleMove, 50);
       const handlePointerMove = (event) => {
@@ -4104,6 +4350,11 @@ var reduceUi = (ui, action) => {
       itemSelector: { index: action.sourceIndex + 1, zone: action.sourceZone }
     });
   }
+  if (action.type === "remove") {
+    return __spreadProps(__spreadValues({}, ui), {
+      itemSelector: null
+    });
+  }
   return ui;
 };
@@ -4191,7 +4442,7 @@ var insertComponent = (componentType, zone, index, {
 import { useDebouncedCallback as useDebouncedCallback2 } from "use-debounce";
 import { isElement as isElement2 } from "@dnd-kit/dom/utilities";
-// components/DragDropContext/PointerSensor.ts
+// lib/dnd/PointerSensor.ts
 init_react_import();
 import { batch, effect } from "@dnd-kit/state";
 import { Sensor, configurator } from "@dnd-kit/abstract";
@@ -4363,6 +4614,9 @@ var _PointerSensor = class _PointerSensor extends Sensor {
     }
   }
   handlePointerUp(event) {
+    if (!this.source) {
+      return;
+    }
     event.preventDefault();
     event.stopPropagation();
     const { status } = this.manager.dragOperation;
@@ -4462,13 +4716,15 @@ function patchWindow(window2) {
 }
 // components/DragDropContext/index.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
-var dragListenerContext = createContext3({
+import { createStore as createStore3 } from "zustand";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var DEBUG3 = false;
+var dragListenerContext = createContext4({
   dragListeners: {}
 });
 function useDragListener(type, fn, deps = []) {
-  const { setDragListeners } = useContext4(dragListenerContext);
-  useEffect13(() => {
+  const { setDragListeners } = useContext7(dragListenerContext);
+  useEffect15(() => {
     if (setDragListeners) {
       setDragListeners((old) => __spreadProps(__spreadValues({}, old), {
         [type]: [...old[type] || [], fn]
@@ -4476,80 +4732,147 @@ function useDragListener(type, fn, deps = []) {
     }
   }, deps);
 }
-var previewContext = createContext3(null);
 var AREA_CHANGE_DEBOUNCE_MS = 100;
+var useTempDisableFallback = (timeout3) => {
+  const lastFallbackDisable = useRef4(null);
+  return useCallback11((manager) => {
+    collisionStore.setState({ fallbackEnabled: false });
+    const fallbackId = generateId();
+    lastFallbackDisable.current = fallbackId;
+    setTimeout(() => {
+      if (lastFallbackDisable.current === fallbackId) {
+        collisionStore.setState({ fallbackEnabled: true });
+        manager.collisionObserver.forceUpdate(true);
+      }
+    }, timeout3);
+  }, []);
+};
 var DragDropContextClient = ({
   children,
   disableAutoScroll
 }) => {
   const { state, config, dispatch, resolveData } = useAppContext();
-  const [preview, setPreview] = useState16(null);
-  const previewRef = useRef5(null);
+  const id = useId();
   const { data } = state;
-  const [deepest, setDeepest] = useState16(null);
-  const [nextDeepest, setNextDeepest] = useState16(null);
-  const deepestRef = useRef5(deepest);
-  const debouncedParamsRef = useRef5(null);
-  const setDeepestAndCollide = useCallback9(
+  const debouncedParamsRef = useRef4(null);
+  const tempDisableFallback = useTempDisableFallback(100);
+  const [zoneStore] = useState17(
+    () => createStore3(() => ({
+      zoneDepthIndex: {},
+      nextZoneDepthIndex: {},
+      areaDepthIndex: {},
+      nextAreaDepthIndex: {},
+      draggedItem: null,
+      previewIndex: {}
+    }))
+  );
+  const getChanged2 = useCallback11(
+    (params, id2) => {
+      const { zoneDepthIndex = {}, areaDepthIndex = {} } = zoneStore.getState() || {};
+      const stateHasZone = Object.keys(zoneDepthIndex).length > 0;
+      const stateHasArea = Object.keys(areaDepthIndex).length > 0;
+      let zoneChanged = false;
+      let areaChanged = false;
+      if (params.zone && !zoneDepthIndex[params.zone]) {
+        zoneChanged = true;
+      } else if (!params.zone && stateHasZone) {
+        zoneChanged = true;
+      }
+      if (params.area && !areaDepthIndex[params.area]) {
+        areaChanged = true;
+      } else if (!params.area && stateHasArea) {
+        areaChanged = true;
+      }
+      return { zoneChanged, areaChanged };
+    },
+    [zoneStore]
+  );
+  const setDeepestAndCollide = useCallback11(
     (params, manager) => {
-      setDeepest(params);
+      const { zoneChanged, areaChanged } = getChanged2(params, id);
+      if (!zoneChanged && !areaChanged) return;
+      zoneStore.setState({
+        zoneDepthIndex: params.zone ? { [params.zone]: true } : {},
+        areaDepthIndex: params.area ? { [params.area]: true } : {}
+      });
+      tempDisableFallback(manager);
       setTimeout(() => {
         manager.collisionObserver.forceUpdate(true);
       }, 50);
       debouncedParamsRef.current = null;
     },
-    []
+    [zoneStore]
   );
   const setDeepestDb = useDebouncedCallback2(
     setDeepestAndCollide,
     AREA_CHANGE_DEBOUNCE_MS
   );
-  useEffect13(() => {
-    deepestRef.current = deepest;
-  }, [deepest]);
   const cancelDb = () => {
     setDeepestDb.cancel();
     debouncedParamsRef.current = null;
   };
-  const [plugins] = useState16(() => [
-    ...disableAutoScroll ? defaultPreset.plugins.filter((plugin) => plugin !== AutoScroller) : defaultPreset.plugins,
-    createNestedDroppablePlugin({
-      onChange: (params, manager) => {
-        const lastParams = deepestRef.current;
-        const areaChanged = params.area !== (lastParams == null ? void 0 : lastParams.area);
-        const zoneChanged = params.zone !== (lastParams == null ? void 0 : lastParams.zone);
-        const isDragging = manager.dragOperation.status.dragging;
-        if (areaChanged || zoneChanged) {
-          setNextDeepest(params);
-        }
-        if (params.zone !== "void" && (lastParams == null ? void 0 : lastParams.zone) === "void") {
-          setDeepest(params);
-          manager.collisionObserver.forceUpdate(true);
-          return;
+  useEffect15(() => {
+    if (DEBUG3) {
+      zoneStore.subscribe(
+        (s) => {
+          var _a, _b;
+          return console.log(
+            s.previewIndex,
+            (_a = Object.entries(s.zoneDepthIndex || {})[0]) == null ? void 0 : _a[0],
+            (_b = Object.entries(s.areaDepthIndex || {})[0]) == null ? void 0 : _b[0]
+          );
         }
-        if (areaChanged) {
-          if (isDragging) {
-            const debouncedParams = debouncedParamsRef.current;
-            const isSameParams = debouncedParams && debouncedParams.area === params.area && debouncedParams.zone === params.zone;
-            if (!isSameParams) {
+      );
+    }
+  }, []);
+  const [plugins] = useState17(() => [
+    ...disableAutoScroll ? defaultPreset.plugins.filter((plugin) => plugin !== AutoScroller) : defaultPreset.plugins,
+    createNestedDroppablePlugin(
+      {
+        onChange: (params, manager) => {
+          const state2 = zoneStore.getState();
+          const { zoneChanged, areaChanged } = getChanged2(params, id);
+          const isDragging = manager.dragOperation.status.dragging;
+          if (areaChanged || zoneChanged) {
+            let nextZoneDepthIndex = {};
+            let nextAreaDepthIndex = {};
+            if (params.zone) {
+              nextZoneDepthIndex = { [params.zone]: true };
+            }
+            if (params.area) {
+              nextAreaDepthIndex = { [params.area]: true };
+            }
+            zoneStore.setState({ nextZoneDepthIndex, nextAreaDepthIndex });
+          }
+          if (params.zone !== "void" && (state2 == null ? void 0 : state2.zoneDepthIndex["void"])) {
+            setDeepestAndCollide(params, manager);
+            return;
+          }
+          if (areaChanged) {
+            if (isDragging) {
+              const debouncedParams = debouncedParamsRef.current;
+              const isSameParams = debouncedParams && debouncedParams.area === params.area && debouncedParams.zone === params.zone;
+              if (!isSameParams) {
+                cancelDb();
+                setDeepestDb(params, manager);
+                debouncedParamsRef.current = params;
+              }
+            } else {
               cancelDb();
-              setDeepestDb(params, manager);
-              debouncedParamsRef.current = params;
+              setDeepestAndCollide(params, manager);
             }
-          } else {
-            cancelDb();
+            return;
+          }
+          if (zoneChanged) {
             setDeepestAndCollide(params, manager);
           }
-          return;
-        }
-        if (zoneChanged) {
-          setDeepestAndCollide(params, manager);
+          cancelDb();
         }
-        cancelDb();
-      }
-    })
+      },
+      id
+    )
   ]);
-  const [sensors] = useState16(() => [
+  const [sensors] = useState17(() => [
     PointerSensor.configure({
       activationConstraints(event, source) {
         var _a;
@@ -4568,11 +4891,10 @@ var DragDropContextClient = ({
       }
     })
   ]);
-  const [draggedItem, setDraggedItem] = useState16();
-  const [dragListeners, setDragListeners] = useState16({});
-  const [pathData, setPathData] = useState16();
-  const dragMode = useRef5(null);
-  const registerPath = useCallback9(
+  const [dragListeners, setDragListeners] = useState17({});
+  const [pathData, setPathData] = useState17();
+  const dragMode = useRef4(null);
+  const registerPath = useCallback11(
     (selector) => {
       const item = getItem(selector, data);
       if (!item) {
@@ -4594,41 +4916,41 @@ var DragDropContextClient = ({
     },
     [data, setPathData]
   );
-  const initialSelector = useRef5(void 0);
-  return /* @__PURE__ */ jsx22(
+  const initialSelector = useRef4(void 0);
+  return /* @__PURE__ */ jsx23("div", { id, children: /* @__PURE__ */ jsx23(
     dragListenerContext.Provider,
     {
       value: {
         dragListeners,
         setDragListeners
       },
-      children: /* @__PURE__ */ jsx22(previewContext.Provider, { value: preview, children: /* @__PURE__ */ jsx22(
+      children: /* @__PURE__ */ jsx23(
         DragDropProvider2,
         {
           plugins,
           sensors,
           onDragEnd: (event, manager) => {
+            var _a;
             const { source, target } = event.operation;
-            deepestRef.current = null;
             if (!source) {
-              setDraggedItem(null);
+              zoneStore.setState({ draggedItem: null });
               return;
             }
             const { zone, index } = source.data;
-            const thisPreview = previewRef.current ? __spreadValues({}, previewRef.current) : null;
-            previewRef.current = null;
+            const { previewIndex = {} } = zoneStore.getState() || {};
+            const thisPreview = ((_a = previewIndex[zone]) == null ? void 0 : _a.props.id) === source.id ? previewIndex[zone] : null;
             setTimeout(() => {
-              var _a, _b;
-              setDraggedItem(null);
+              var _a2, _b;
+              zoneStore.setState({ draggedItem: null });
               if (event.canceled || (target == null ? void 0 : target.type) === "void") {
-                setPreview(null);
-                (_a = dragListeners.dragend) == null ? void 0 : _a.forEach((fn) => {
+                zoneStore.setState({ previewIndex: {} });
+                (_a2 = dragListeners.dragend) == null ? void 0 : _a2.forEach((fn) => {
                   fn(event, manager);
                 });
                 return;
               }
               if (thisPreview) {
-                setPreview(null);
+                zoneStore.setState({ previewIndex: {} });
                 if (thisPreview.type === "insert") {
                   insertComponent(
                     thisPreview.componentType,
@@ -4663,8 +4985,9 @@ var DragDropContextClient = ({
             }, 250);
           },
           onDragOver: (event, manager) => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             event.preventDefault();
+            const draggedItem = (_a = zoneStore.getState()) == null ? void 0 : _a.draggedItem;
             if (!draggedItem) return;
             cancelDb();
             const { source, target } = event.operation;
@@ -4680,7 +5003,7 @@ var DragDropContextClient = ({
               const targetData = target.data;
               targetZone = targetData.zone;
               targetIndex = targetData.index;
-              const collisionData = (_b = (_a = manager.dragOperation.data) == null ? void 0 : _a.collisionMap) == null ? void 0 : _b[targetId];
+              const collisionData = (_c = (_b = manager.dragOperation.data) == null ? void 0 : _b.collisionMap) == null ? void 0 : _c[targetId];
               const collisionPosition = (collisionData == null ? void 0 : collisionData.direction) === "up" || (collisionData == null ? void 0 : collisionData.direction) === "left" ? "before" : "after";
               if (targetIndex >= sourceIndex && sourceZone === targetZone) {
                 targetIndex = targetIndex - 1;
@@ -4692,23 +5015,26 @@ var DragDropContextClient = ({
               targetZone = target.id.toString();
               targetIndex = 0;
             }
-            if (targetId === sourceId || ((_c = pathData == null ? void 0 : pathData[target.id]) == null ? void 0 : _c.path.find((path) => {
+            if (targetId === sourceId || ((_d = pathData == null ? void 0 : pathData[target.id]) == null ? void 0 : _d.path.find((path) => {
               const [pathId] = path.split(":");
               return pathId === sourceId;
             }))) {
               return;
             }
             if (dragMode.current === "new") {
-              previewRef.current = {
-                componentType: sourceData.componentType,
-                type: "insert",
-                index: targetIndex,
-                zone: targetZone,
-                props: {
-                  id: source.id.toString()
+              zoneStore.setState({
+                previewIndex: {
+                  [targetZone]: {
+                    componentType: sourceData.componentType,
+                    type: "insert",
+                    index: targetIndex,
+                    zone: targetZone,
+                    props: {
+                      id: source.id.toString()
+                    }
+                  }
                 }
-              };
-              setPreview(previewRef.current);
+              });
             } else {
               if (!initialSelector.current) {
                 initialSelector.current = {
@@ -4718,17 +5044,20 @@ var DragDropContextClient = ({
               }
               const item = getItem(initialSelector.current, data);
               if (item) {
-                previewRef.current = {
-                  componentType: sourceData.componentType,
-                  type: "move",
-                  index: targetIndex,
-                  zone: targetZone,
-                  props: item.props
-                };
-                setPreview(previewRef.current);
+                zoneStore.setState({
+                  previewIndex: {
+                    [targetZone]: {
+                      componentType: sourceData.componentType,
+                      type: "move",
+                      index: targetIndex,
+                      zone: targetZone,
+                      props: item.props
+                    }
+                  }
+                });
               }
             }
-            (_d = dragListeners.dragover) == null ? void 0 : _d.forEach((fn) => {
+            (_e = dragListeners.dragover) == null ? void 0 : _e.forEach((fn) => {
               fn(event, manager);
             });
           },
@@ -4738,45 +5067,61 @@ var DragDropContextClient = ({
               type: "setUi",
               ui: { itemSelector: null, isDragging: true }
             });
+            const { source } = event.operation;
+            if (source && source.type !== "void") {
+              const sourceData = source.data;
+              const item = getItem(
+                {
+                  zone: sourceData.zone,
+                  index: sourceData.index
+                },
+                data
+              );
+              if (item) {
+                zoneStore.setState({
+                  previewIndex: {
+                    [sourceData.zone]: {
+                      componentType: sourceData.componentType,
+                      type: "move",
+                      index: sourceData.index,
+                      zone: sourceData.zone,
+                      props: item.props
+                    }
+                  }
+                });
+              }
+            }
             (_a = dragListeners.dragstart) == null ? void 0 : _a.forEach((fn) => {
               fn(event, manager);
             });
           },
           onBeforeDragStart: (event) => {
             var _a;
-            if (draggedItem) {
-              console.warn("New drag started before previous drag cleaned up");
-            }
             const isNewComponent = ((_a = event.operation.source) == null ? void 0 : _a.data.type) === "drawer";
             dragMode.current = isNewComponent ? "new" : "existing";
             initialSelector.current = void 0;
-            setDraggedItem(event.operation.source);
+            zoneStore.setState({ draggedItem: event.operation.source });
           },
-          children: /* @__PURE__ */ jsx22(
+          children: /* @__PURE__ */ jsx23(ZoneStoreProvider, { store: zoneStore, children: /* @__PURE__ */ jsx23(
             DropZoneProvider,
             {
               value: {
                 data,
                 config,
-                draggedItem,
                 mode: "edit",
                 areaId: "root",
                 depth: 0,
                 registerPath,
                 pathData,
-                deepestZone: deepest == null ? void 0 : deepest.zone,
-                deepestArea: deepest == null ? void 0 : deepest.area,
-                nextDeepestZone: nextDeepest == null ? void 0 : nextDeepest.zone,
-                nextDeepestArea: nextDeepest == null ? void 0 : nextDeepest.area,
                 path: []
               },
               children
             }
-          )
+          ) })
         }
-      ) })
+      )
     }
-  );
+  ) });
 };
 var DragDropContext = ({
   children,
@@ -4786,11 +5131,11 @@ var DragDropContext = ({
   if (status === "LOADING") {
     return children;
   }
-  return /* @__PURE__ */ jsx22(DragDropContextClient, { disableAutoScroll, children });
+  return /* @__PURE__ */ jsx23(DragDropContextClient, { disableAutoScroll, children });
 };
 // components/Drawer/index.tsx
-import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
 var getClassName18 = get_class_name_factory_default("Drawer", styles_module_default10);
 var getClassNameItem2 = get_class_name_factory_default("DrawerItem", styles_module_default10);
 var DrawerItemInner = ({
@@ -4800,11 +5145,11 @@ var DrawerItemInner = ({
   dragRef,
   isDragDisabled
 }) => {
-  const CustomInner = useMemo8(
-    () => children || (({ children: children2 }) => /* @__PURE__ */ jsx23("div", { className: getClassNameItem2("default"), children: children2 })),
+  const CustomInner = useMemo9(
+    () => children || (({ children: children2 }) => /* @__PURE__ */ jsx24("div", { className: getClassNameItem2("default"), children: children2 })),
     [children]
   );
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     "div",
     {
       className: getClassNameItem2({ disabled: isDragDisabled }),
@@ -4812,9 +5157,9 @@ var DrawerItemInner = ({
       onMouseDown: (e) => e.preventDefault(),
       "data-testid": dragRef ? `drawer-item:${name}` : "",
       "data-puck-drawer-item": true,
-      children: /* @__PURE__ */ jsx23(CustomInner, { name, children: /* @__PURE__ */ jsx23("div", { className: getClassNameItem2("draggableWrapper"), children: /* @__PURE__ */ jsxs11("div", { className: getClassNameItem2("draggable"), children: [
-        /* @__PURE__ */ jsx23("div", { className: getClassNameItem2("name"), children: label != null ? label : name }),
-        /* @__PURE__ */ jsx23("div", { className: getClassNameItem2("icon"), children: /* @__PURE__ */ jsx23(DragIcon, {}) })
+      children: /* @__PURE__ */ jsx24(CustomInner, { name, children: /* @__PURE__ */ jsx24("div", { className: getClassNameItem2("draggableWrapper"), children: /* @__PURE__ */ jsxs11("div", { className: getClassNameItem2("draggable"), children: [
+        /* @__PURE__ */ jsx24("div", { className: getClassNameItem2("name"), children: label != null ? label : name }),
+        /* @__PURE__ */ jsx24("div", { className: getClassNameItem2("icon"), children: /* @__PURE__ */ jsx24(DragIcon, {}) })
       ] }) }) })
     }
   );
@@ -4832,8 +5177,8 @@ var DrawerItemDraggable = ({
     disabled: isDragDisabled
   });
   return /* @__PURE__ */ jsxs11("div", { className: getClassName18("draggable"), children: [
-    /* @__PURE__ */ jsx23("div", { className: getClassName18("draggableBg"), children: /* @__PURE__ */ jsx23(DrawerItemInner, { name, label, children }) }),
-    /* @__PURE__ */ jsx23("div", { className: getClassName18("draggableFg"), children: /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24("div", { className: getClassName18("draggableBg"), children: /* @__PURE__ */ jsx24(DrawerItemInner, { name, label, children }) }),
+    /* @__PURE__ */ jsx24("div", { className: getClassName18("draggableFg"), children: /* @__PURE__ */ jsx24(
       DrawerItemInner,
       {
         name,
@@ -4854,7 +5199,7 @@ var DrawerItem = ({
   isDragDisabled
 }) => {
   const resolvedId = id || name;
-  const [dynamicId, setDynamicId] = useState17(generateId(resolvedId));
+  const [dynamicId, setDynamicId] = useState18(generateId(resolvedId));
   if (typeof index !== "undefined") {
     console.error(
       "Warning: The `index` prop on Drawer.Item is deprecated and no longer required."
@@ -4867,7 +5212,7 @@ var DrawerItem = ({
     },
     [resolvedId]
   );
-  return /* @__PURE__ */ jsx23("div", { children: /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24("div", { children: /* @__PURE__ */ jsx24(
     DrawerItemDraggable,
     {
       name,
@@ -4893,14 +5238,14 @@ var Drawer = ({
       "Warning: The `direction` prop on Drawer is deprecated and no longer required to achieve multi-directional dragging."
     );
   }
-  const [id] = useState17(generateId());
+  const id = useId2();
   const { ref } = useDroppableSafe({
     id,
     type: "void",
     collisionPriority: 0
     // Never collide with this, but we use it so NestedDroppablePlugin respects the Drawer
   });
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     "div",
     {
       className: getClassName18(),
@@ -4916,11 +5261,11 @@ Drawer.Item = DrawerItem;
 // components/Puck/index.tsx
 init_react_import();
 import {
-  useCallback as useCallback15,
-  useEffect as useEffect21,
-  useMemo as useMemo17,
+  useCallback as useCallback17,
+  useEffect as useEffect23,
+  useMemo as useMemo18,
   useReducer,
-  useState as useState25
+  useState as useState26
 } from "react";
 // components/SidebarSection/index.tsx
@@ -4932,7 +5277,7 @@ var styles_module_default13 = { "SidebarSection": "_SidebarSection_125qe_1", "Si
 // lib/use-breadcrumbs.ts
 init_react_import();
-import { useContext as useContext5, useMemo as useMemo9 } from "react";
+import { useContext as useContext8, useMemo as useMemo10 } from "react";
 var convertPathDataToBreadcrumbs = (selectedItem, pathData, data) => {
   const id = selectedItem ? selectedItem == null ? void 0 : selectedItem.props.id : "";
   const currentPathData = pathData && id && pathData[id] ? __spreadValues({}, pathData[id]) : { label: "Page", path: [] };
@@ -4982,8 +5327,8 @@ var useBreadcrumbs = (renderCount) => {
     state: { data },
     selectedItem
   } = useAppContext();
-  const dzContext = useContext5(dropZoneContext);
-  return useMemo9(() => {
+  const dzContext = useContext8(dropZoneContext);
+  return useMemo10(() => {
     const breadcrumbs = convertPathDataToBreadcrumbs(
       selectedItem,
       dzContext == null ? void 0 : dzContext.pathData,
@@ -4997,7 +5342,7 @@ var useBreadcrumbs = (renderCount) => {
 };
 // components/SidebarSection/index.tsx
-import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
 var getClassName19 = get_class_name_factory_default("SidebarSection", styles_module_default13);
 var SidebarSection = ({
   children,
@@ -5016,9 +5361,9 @@ var SidebarSection = ({
       className: getClassName19({ noBorderTop, noPadding }),
       style: { background },
       children: [
-        /* @__PURE__ */ jsx24("div", { className: getClassName19("title"), children: /* @__PURE__ */ jsxs12("div", { className: getClassName19("breadcrumbs"), children: [
+        /* @__PURE__ */ jsx25("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__ */ jsx24(
+            /* @__PURE__ */ jsx25(
               "button",
               {
                 type: "button",
@@ -5027,12 +5372,12 @@ var SidebarSection = ({
                 children: breadcrumb.label
               }
             ),
-            /* @__PURE__ */ jsx24(ChevronRight, { size: 16 })
+            /* @__PURE__ */ jsx25(ChevronRight, { size: 16 })
           ] }, i)) : null,
-          /* @__PURE__ */ jsx24("div", { className: getClassName19("heading"), children: /* @__PURE__ */ jsx24(Heading, { rank: "2", size: "xs", children: title }) })
+          /* @__PURE__ */ jsx25("div", { className: getClassName19("heading"), children: /* @__PURE__ */ jsx25(Heading, { rank: "2", size: "xs", children: title }) })
         ] }) }),
-        /* @__PURE__ */ jsx24("div", { className: getClassName19("content"), children }),
-        isLoading && /* @__PURE__ */ jsx24("div", { className: getClassName19("loadingOverlay"), children: /* @__PURE__ */ jsx24(Loader, { size: 32 }) })
+        /* @__PURE__ */ jsx25("div", { className: getClassName19("content"), children }),
+        isLoading && /* @__PURE__ */ jsx25("div", { className: getClassName19("loadingOverlay"), children: /* @__PURE__ */ jsx25(Loader, { size: 32 }) })
       ]
     }
   );
@@ -5063,7 +5408,7 @@ init_react_import();
 var styles_module_default14 = { "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 Fragment7, jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
 var getClassName20 = get_class_name_factory_default("MenuBar", styles_module_default14);
 function MenuBar({
   appState,
@@ -5077,7 +5422,7 @@ function MenuBar({
     history: { back, forward, historyStore }
   } = useAppContext();
   const { hasFuture = false, hasPast = false } = historyStore || {};
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       className: getClassName20({ menuOpen }),
@@ -5093,10 +5438,10 @@ function MenuBar({
       },
       children: /* @__PURE__ */ jsxs13("div", { className: getClassName20("inner"), children: [
         /* @__PURE__ */ jsxs13("div", { className: getClassName20("history"), children: [
-          /* @__PURE__ */ jsx25(IconButton, { title: "undo", disabled: !hasPast, onClick: back, children: /* @__PURE__ */ jsx25(Undo2, { size: 21 }) }),
-          /* @__PURE__ */ jsx25(IconButton, { title: "redo", disabled: !hasFuture, onClick: forward, children: /* @__PURE__ */ jsx25(Redo2, { size: 21 }) })
+          /* @__PURE__ */ jsx26(IconButton, { title: "undo", disabled: !hasPast, onClick: back, children: /* @__PURE__ */ jsx26(Undo2, { size: 21 }) }),
+          /* @__PURE__ */ jsx26(IconButton, { title: "redo", disabled: !hasFuture, onClick: forward, children: /* @__PURE__ */ jsx26(Redo2, { size: 21 }) })
         ] }),
-        /* @__PURE__ */ jsx25(Fragment7, { children: renderHeaderActions && renderHeaderActions({
+        /* @__PURE__ */ jsx26(Fragment7, { children: renderHeaderActions && renderHeaderActions({
           state: appState,
           dispatch
         }) })
@@ -5107,7 +5452,7 @@ function MenuBar({
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css#css-module
 init_react_import();
-var styles_module_default15 = { "Puck": "_Puck_1g88c_19", "Puck-portal": "_Puck-portal_1g88c_24", "PuckLayout": "_PuckLayout_1g88c_31", "PuckLayout-inner": "_PuckLayout-inner_1g88c_39", "PuckLayout--mounted": "_PuckLayout--mounted_1g88c_51", "PuckLayout--leftSideBarVisible": "_PuckLayout--leftSideBarVisible_1g88c_55", "PuckLayout--rightSideBarVisible": "_PuckLayout--rightSideBarVisible_1g88c_61", "PuckLayout-mounted": "_PuckLayout-mounted_1g88c_75", "PuckLayout-header": "_PuckLayout-header_1g88c_116", "PuckLayout-headerInner": "_PuckLayout-headerInner_1g88c_125", "PuckLayout-headerToggle": "_PuckLayout-headerToggle_1g88c_135", "PuckLayout-rightSideBarToggle": "_PuckLayout-rightSideBarToggle_1g88c_142", "PuckLayout-leftSideBarToggle": "_PuckLayout-leftSideBarToggle_1g88c_143", "PuckLayout-headerTitle": "_PuckLayout-headerTitle_1g88c_147", "PuckLayout-headerPath": "_PuckLayout-headerPath_1g88c_151", "PuckLayout-headerTools": "_PuckLayout-headerTools_1g88c_158", "PuckLayout-menuButton": "_PuckLayout-menuButton_1g88c_164", "PuckLayout--menuOpen": "_PuckLayout--menuOpen_1g88c_169", "PuckLayout-leftSideBar": "_PuckLayout-leftSideBar_1g88c_143", "PuckLayout-rightSideBar": "_PuckLayout-rightSideBar_1g88c_142" };
+var styles_module_default15 = { "Puck": "_Puck_12s9r_19", "Puck-portal": "_Puck-portal_12s9r_24", "PuckLayout-inner": "_PuckLayout-inner_12s9r_31", "PuckLayout--mounted": "_PuckLayout--mounted_12s9r_43", "PuckLayout--leftSideBarVisible": "_PuckLayout--leftSideBarVisible_12s9r_47", "PuckLayout--rightSideBarVisible": "_PuckLayout--rightSideBarVisible_12s9r_53", "PuckLayout-mounted": "_PuckLayout-mounted_12s9r_67", "PuckLayout": "_PuckLayout_12s9r_31", "PuckLayout-header": "_PuckLayout-header_12s9r_108", "PuckLayout-headerInner": "_PuckLayout-headerInner_12s9r_117", "PuckLayout-headerToggle": "_PuckLayout-headerToggle_12s9r_127", "PuckLayout-rightSideBarToggle": "_PuckLayout-rightSideBarToggle_12s9r_134", "PuckLayout-leftSideBarToggle": "_PuckLayout-leftSideBarToggle_12s9r_135", "PuckLayout-headerTitle": "_PuckLayout-headerTitle_12s9r_139", "PuckLayout-headerPath": "_PuckLayout-headerPath_12s9r_143", "PuckLayout-headerTools": "_PuckLayout-headerTools_12s9r_150", "PuckLayout-menuButton": "_PuckLayout-menuButton_12s9r_156", "PuckLayout--menuOpen": "_PuckLayout--menuOpen_12s9r_161", "PuckLayout-leftSideBar": "_PuckLayout-leftSideBar_12s9r_135", "PuckLayout-rightSideBar": "_PuckLayout-rightSideBar_12s9r_134" };
 // components/Puck/components/Fields/index.tsx
 init_react_import();
@@ -5117,15 +5462,15 @@ init_react_import();
 var styles_module_default16 = { "PuckFields": "_PuckFields_jp3lw_1", "PuckFields--isLoading": "_PuckFields--isLoading_jp3lw_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_jp3lw_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_jp3lw_25" };
 // components/Puck/components/Fields/index.tsx
-import { useCallback as useCallback10, useEffect as useEffect14, useMemo as useMemo10, useState as useState18 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect16, useMemo as useMemo11, useState as useState19 } from "react";
 // lib/use-parent.ts
 init_react_import();
-import { useContext as useContext6 } from "react";
+import { useContext as useContext9 } from "react";
 var useParent = (itemSelector) => {
   var _a;
   const { selectedItem, state } = useAppContext();
-  const { pathData } = useContext6(dropZoneContext) || {};
+  const { pathData } = useContext9(dropZoneContext) || {};
   const item = itemSelector ? getItem(itemSelector, state.data) : selectedItem;
   const breadcrumbs = convertPathDataToBreadcrumbs(item, pathData, state.data);
   const lastItem = breadcrumbs[breadcrumbs.length - 1];
@@ -5134,7 +5479,7 @@ var useParent = (itemSelector) => {
 };
 // components/Puck/components/Fields/index.tsx
-import { Fragment as Fragment8, jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
 var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
 var defaultPageFields = {
   title: { type: "text" }
@@ -5142,7 +5487,7 @@ var defaultPageFields = {
 var DefaultFields = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx26(Fragment8, { children });
+  return /* @__PURE__ */ jsx27(Fragment8, { children });
 };
 var useResolvedFields = () => {
   var _a, _b;
@@ -5151,20 +5496,20 @@ var useResolvedFields = () => {
   const { data } = state;
   const rootFields = ((_a = config.root) == null ? void 0 : _a.fields) || defaultPageFields;
   const componentConfig = selectedItem ? config.components[selectedItem.type] : null;
-  const defaultFields = useMemo10(
+  const defaultFields = useMemo11(
     () => (selectedItem ? componentConfig == null ? void 0 : componentConfig.fields : rootFields) || {},
     [selectedItem, rootFields, componentConfig == null ? void 0 : componentConfig.fields]
   );
   const rootProps = data.root.props || data.root;
-  const [lastSelectedData, setLastSelectedData] = useState18({});
-  const [resolvedFields, setResolvedFields] = useState18(defaultFields);
-  const [fieldsLoading, setFieldsLoading] = useState18(false);
+  const [lastSelectedData, setLastSelectedData] = useState19({});
+  const [resolvedFields, setResolvedFields] = useState19(defaultFields);
+  const [fieldsLoading, setFieldsLoading] = useState19(false);
   const defaultResolveFields = (_componentData, _params) => defaultFields;
   const componentData = selectedItem ? selectedItem : { props: rootProps, readOnly: data.root.readOnly };
   const hasComponentResolver = selectedItem && (componentConfig == null ? void 0 : componentConfig.resolveFields);
   const hasRootResolver = !selectedItem && ((_b = config.root) == null ? void 0 : _b.resolveFields);
   const hasResolver = hasComponentResolver || hasRootResolver;
-  const resolveFields = useCallback10(
+  const resolveFields = useCallback12(
     (..._0) => __async(void 0, [..._0], function* (fields = {}) {
       var _a2;
       const lastData = ((_a2 = lastSelectedData.props) == null ? void 0 : _a2.id) === componentData.props.id ? lastSelectedData : null;
@@ -5200,19 +5545,33 @@ var useResolvedFields = () => {
         lastData
       });
     }),
-    [data, config, componentData, selectedItem, resolvedFields, state]
+    [data, config, componentData, selectedItem, resolvedFields, state, parent]
   );
-  useEffect14(() => {
-    if (hasResolver) {
-      setFieldsLoading(true);
-      resolveFields(defaultFields).then((fields) => {
-        setResolvedFields(fields || {});
-        setFieldsLoading(false);
-      });
-    } else {
-      setResolvedFields(defaultFields);
+  const [hasParent, setHasParent] = useState19(false);
+  useEffect16(() => {
+    setHasParent(!!parent);
+  }, [parent]);
+  useEffect16(() => {
+    var _a2, _b2;
+    if (!((_a2 = state.ui.itemSelector) == null ? void 0 : _a2.zone) || ((_b2 = state.ui.itemSelector) == null ? void 0 : _b2.zone) === "default-zone" || hasParent) {
+      if (hasResolver) {
+        setFieldsLoading(true);
+        resolveFields(defaultFields).then((fields) => {
+          setResolvedFields(fields || {});
+          setFieldsLoading(false);
+        });
+      } else {
+        setResolvedFields(defaultFields);
+      }
     }
-  }, [data, defaultFields, selectedItem, hasResolver]);
+  }, [
+    data,
+    defaultFields,
+    state.ui.itemSelector,
+    selectedItem,
+    hasResolver,
+    hasParent
+  ]);
   return [resolvedFields, fieldsLoading];
 };
 var Fields = () => {
@@ -5233,7 +5592,7 @@ var Fields = () => {
   const componentResolving = selectedItem ? ((_a = componentState[selectedItem == null ? void 0 : selectedItem.props.id]) == null ? void 0 : _a.loadingCount) > 0 : ((_b = componentState["puck-root"]) == null ? void 0 : _b.loadingCount) > 0;
   const isLoading = fieldsResolving || componentResolving;
   const rootProps = data.root.props || data.root;
-  const Wrapper = useMemo10(() => overrides.fields || DefaultFields, [overrides]);
+  const Wrapper = useMemo11(() => overrides.fields || DefaultFields, [overrides]);
   return /* @__PURE__ */ jsxs14(
     "form",
     {
@@ -5242,7 +5601,7 @@ var Fields = () => {
         e.preventDefault();
       },
       children: [
-        /* @__PURE__ */ jsx26(Wrapper, { isLoading, itemSelector, children: Object.keys(fields).map((fieldName) => {
+        /* @__PURE__ */ jsx27(Wrapper, { isLoading, itemSelector, children: Object.keys(fields).map((fieldName) => {
           const field = fields[fieldName];
           if (!(field == null ? void 0 : field.type)) return null;
           const onChange = (value, updatedUi) => {
@@ -5313,7 +5672,7 @@ var Fields = () => {
               item: selectedItem
             });
             const id = `${selectedItem.props.id}_${field.type}_${fieldName}`;
-            return /* @__PURE__ */ jsx26(
+            return /* @__PURE__ */ jsx27(
               AutoFieldPrivate,
               {
                 field,
@@ -5331,7 +5690,7 @@ var Fields = () => {
               root: true
             });
             const id = `root_${field.type}_${fieldName}`;
-            return /* @__PURE__ */ jsx26(
+            return /* @__PURE__ */ jsx27(
               AutoFieldPrivate,
               {
                 field,
@@ -5345,7 +5704,7 @@ var Fields = () => {
             );
           }
         }) }),
-        isLoading && /* @__PURE__ */ jsx26("div", { className: getClassName21("loadingOverlay"), children: /* @__PURE__ */ jsx26("div", { className: getClassName21("loadingOverlayInner"), children: /* @__PURE__ */ jsx26(Loader, { size: 16 }) }) })
+        isLoading && /* @__PURE__ */ jsx27("div", { className: getClassName21("loadingOverlay"), children: /* @__PURE__ */ jsx27("div", { className: getClassName21("loadingOverlayInner"), children: /* @__PURE__ */ jsx27(Loader, { size: 16 }) }) })
       ]
     }
   );
@@ -5356,7 +5715,7 @@ init_react_import();
 // lib/use-component-list.tsx
 init_react_import();
-import { useEffect as useEffect15, useState as useState19 } from "react";
+import { useEffect as useEffect17, useState as useState20 } from "react";
 // components/ComponentList/index.tsx
 init_react_import();
@@ -5366,7 +5725,7 @@ init_react_import();
 var styles_module_default17 = { "ComponentList": "_ComponentList_odh9d_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_odh9d_5", "ComponentList-content": "_ComponentList-content_odh9d_9", "ComponentList-title": "_ComponentList-title_odh9d_17", "ComponentList-titleIcon": "_ComponentList-titleIcon_odh9d_53" };
 // components/ComponentList/index.tsx
-import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
 var getClassName22 = get_class_name_factory_default("ComponentList", styles_module_default17);
 var ComponentListItem = ({
   name,
@@ -5376,7 +5735,7 @@ var ComponentListItem = ({
   const canInsert = getPermissions({
     type: name
   }).insert;
-  return /* @__PURE__ */ jsx27(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: overrides.componentItem });
+  return /* @__PURE__ */ jsx28(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: overrides.componentItem });
 };
 var ComponentList = ({
   children,
@@ -5400,14 +5759,14 @@ var ComponentList = ({
         }),
         title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
         children: [
-          /* @__PURE__ */ jsx27("div", { children: title }),
-          /* @__PURE__ */ jsx27("div", { className: getClassName22("titleIcon"), children: expanded ? /* @__PURE__ */ jsx27(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx27(ChevronDown, { size: 12 }) })
+          /* @__PURE__ */ jsx28("div", { children: title }),
+          /* @__PURE__ */ jsx28("div", { className: getClassName22("titleIcon"), children: expanded ? /* @__PURE__ */ jsx28(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx28(ChevronDown, { size: 12 }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx27("div", { className: getClassName22("content"), children: /* @__PURE__ */ jsx27(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
+    /* @__PURE__ */ jsx28("div", { className: getClassName22("content"), children: /* @__PURE__ */ jsx28(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
       var _a;
-      return /* @__PURE__ */ jsx27(
+      return /* @__PURE__ */ jsx28(
         ComponentListItem,
         {
           label: (_a = config.components[componentKey]["label"]) != null ? _a : componentKey,
@@ -5421,10 +5780,10 @@ var ComponentList = ({
 ComponentList.Item = ComponentListItem;
 // lib/use-component-list.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var useComponentList = (config, ui) => {
-  const [componentList, setComponentList] = useState19();
-  useEffect15(() => {
+  const [componentList, setComponentList] = useState20();
+  useEffect17(() => {
     var _a, _b, _c;
     if (Object.keys(ui.componentList).length > 0) {
       const matchedComponents = [];
@@ -5434,7 +5793,7 @@ var useComponentList = (config, ui) => {
           if (category.visible === false || !category.components) {
             return null;
           }
-          return /* @__PURE__ */ jsx28(
+          return /* @__PURE__ */ jsx29(
             ComponentList,
             {
               id: categoryKey,
@@ -5443,7 +5802,7 @@ var useComponentList = (config, ui) => {
                 var _a2;
                 matchedComponents.push(componentName);
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ jsx28(
+                return /* @__PURE__ */ jsx29(
                   ComponentList.Item,
                   {
                     label: (_a2 = componentConf["label"]) != null ? _a2 : componentName,
@@ -5463,7 +5822,7 @@ var useComponentList = (config, ui) => {
       );
       if (remainingComponents.length > 0 && !((_a = ui.componentList.other) == null ? void 0 : _a.components) && ((_b = ui.componentList.other) == null ? void 0 : _b.visible) !== false) {
         _componentList.push(
-          /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsx29(
             ComponentList,
             {
               id: "other",
@@ -5471,7 +5830,7 @@ var useComponentList = (config, ui) => {
               children: remainingComponents.map((componentName, i) => {
                 var _a2;
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ jsx28(
+                return /* @__PURE__ */ jsx29(
                   ComponentList.Item,
                   {
                     name: componentName,
@@ -5493,30 +5852,30 @@ var useComponentList = (config, ui) => {
 };
 // components/Puck/components/Components/index.tsx
-import { useMemo as useMemo11 } from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { useMemo as useMemo12 } from "react";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var Components = () => {
   const { config, state, overrides } = useAppContext();
   const componentList = useComponentList(config, state.ui);
-  const Wrapper = useMemo11(() => overrides.components || "div", [overrides]);
-  return /* @__PURE__ */ jsx29(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx29(ComponentList, { id: "all" }) });
+  const Wrapper = useMemo12(() => overrides.components || "div", [overrides]);
+  return /* @__PURE__ */ jsx30(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx30(ComponentList, { id: "all" }) });
 };
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-import { useCallback as useCallback11, useEffect as useEffect17, useRef as useRef7, useMemo as useMemo12 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect19, useRef as useRef6, useMemo as useMemo13 } from "react";
 // components/AutoFrame/index.tsx
 init_react_import();
 import {
-  createContext as createContext4,
-  useContext as useContext7,
-  useEffect as useEffect16,
-  useState as useState20
+  createContext as createContext5,
+  useContext as useContext10,
+  useEffect as useEffect18,
+  useState as useState21
 } from "react";
 import hash from "object-hash";
 import { createPortal as createPortal3 } from "react-dom";
-import { Fragment as Fragment9, jsx as jsx30 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx31 } from "react/jsx-runtime";
 var styleSelector = 'style, link[rel="stylesheet"]';
 var collectStyles = (doc) => {
   const collected = [];
@@ -5559,7 +5918,7 @@ var CopyHostStyles = ({
   onStylesLoaded = () => null
 }) => {
   const { document: doc, window: win } = useFrame();
-  useEffect16(() => {
+  useEffect18(() => {
     if (!win || !doc) {
       return () => {
       };
@@ -5716,10 +6075,10 @@ var CopyHostStyles = ({
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ jsx30(Fragment9, { children });
+  return /* @__PURE__ */ jsx31(Fragment9, { children });
 };
-var autoFrameContext = createContext4({});
-var useFrame = () => useContext7(autoFrameContext);
+var autoFrameContext = createContext5({});
+var useFrame = () => useContext10(autoFrameContext);
 function AutoFrame(_a) {
   var _b = _a, {
     children,
@@ -5736,10 +6095,10 @@ function AutoFrame(_a) {
     "onStylesLoaded",
     "frameRef"
   ]);
-  const [loaded, setLoaded] = useState20(false);
-  const [ctx, setCtx] = useState20({});
-  const [mountTarget, setMountTarget] = useState20();
-  useEffect16(() => {
+  const [loaded, setLoaded] = useState21(false);
+  const [ctx, setCtx] = useState21({});
+  const [mountTarget, setMountTarget] = useState21();
+  useEffect18(() => {
     var _a2;
     if (frameRef.current) {
       setCtx({
@@ -5751,7 +6110,7 @@ function AutoFrame(_a) {
       );
     }
   }, [frameRef, loaded]);
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     "iframe",
     __spreadProps(__spreadValues({}, props), {
       className,
@@ -5761,7 +6120,7 @@ function AutoFrame(_a) {
       onLoad: () => {
         setLoaded(true);
       },
-      children: /* @__PURE__ */ jsx30(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx30(CopyHostStyles, { debug, onStylesLoaded, children: createPortal3(children, mountTarget) }) })
+      children: /* @__PURE__ */ jsx31(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx31(CopyHostStyles, { debug, onStylesLoaded, children: createPortal3(children, mountTarget) }) })
     })
   );
 }
@@ -5774,7 +6133,7 @@ var styles_module_default18 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPrev
 // components/Render/index.tsx
 init_react_import();
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function Render({
   config,
   data
@@ -5787,7 +6146,7 @@ function Render({
   const rootProps = defaultedData.root.props || defaultedData.root;
   const title = (rootProps == null ? void 0 : rootProps.title) || "";
   if ((_a = config.root) == null ? void 0 : _a.render) {
-    return /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx32(
       DropZoneProvider,
       {
         value: {
@@ -5797,7 +6156,7 @@ function Render({
           depth: 0,
           path: []
         },
-        children: /* @__PURE__ */ jsx31(
+        children: /* @__PURE__ */ jsx32(
           config.root.render,
           __spreadProps(__spreadValues({}, rootProps), {
             puck: {
@@ -5807,13 +6166,13 @@ function Render({
             title,
             editMode: false,
             id: "puck-root",
-            children: /* @__PURE__ */ jsx31(DropZone, { zone: rootDroppableId })
+            children: /* @__PURE__ */ jsx32(DropZone, { zone: rootDroppableId })
           })
         )
       }
     );
   }
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     DropZoneProvider,
     {
       value: {
@@ -5823,17 +6182,17 @@ function Render({
         depth: 0,
         path: []
       },
-      children: /* @__PURE__ */ jsx31(DropZone, { zone: rootDroppableId })
+      children: /* @__PURE__ */ jsx32(DropZone, { zone: rootDroppableId })
     }
   );
 }
 // components/Puck/components/Preview/index.tsx
-import { Fragment as Fragment10, jsx as jsx32 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx33 } from "react/jsx-runtime";
 var getClassName23 = get_class_name_factory_default("PuckPreview", styles_module_default18);
 var useBubbleIframeEvents = (ref) => {
   const { status } = useAppContext();
-  useEffect17(() => {
+  useEffect19(() => {
     var _a;
     if (ref.current && status === "READY") {
       const iframe = ref.current;
@@ -5870,22 +6229,22 @@ var useBubbleIframeEvents = (ref) => {
     }
   }, [status]);
 };
-var Preview = ({ id = "puck-preview" }) => {
+var Preview2 = ({ id = "puck-preview" }) => {
   const { config, dispatch, state, setStatus, iframe, overrides } = useAppContext();
-  const Page = useCallback11(
+  const Page = useCallback13(
     (pageProps) => {
       var _a, _b;
       return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadValues({
         id: "puck-root"
-      }, pageProps)) : /* @__PURE__ */ jsx32(Fragment10, { children: pageProps.children });
+      }, pageProps)) : /* @__PURE__ */ jsx33(Fragment10, { children: pageProps.children });
     },
     [config.root]
   );
-  const Frame = useMemo12(() => overrides.iframe, [overrides]);
+  const Frame = useMemo13(() => overrides.iframe, [overrides]);
   const rootProps = state.data.root.props || state.data.root;
-  const ref = useRef7(null);
+  const ref = useRef6(null);
   useBubbleIframeEvents(ref);
-  const inner = state.ui.previewMode === "edit" ? /* @__PURE__ */ jsx32(
+  const inner = state.ui.previewMode === "edit" ? /* @__PURE__ */ jsx33(
     Page,
     __spreadProps(__spreadValues({}, rootProps), {
       puck: {
@@ -5894,10 +6253,10 @@ var Preview = ({ id = "puck-preview" }) => {
         dragRef: null
       },
       editMode: true,
-      children: /* @__PURE__ */ jsx32(DropZone, { zone: rootDroppableId })
+      children: /* @__PURE__ */ jsx33(DropZone, { zone: rootDroppableId })
     })
-  ) : /* @__PURE__ */ jsx32(Render, { data: state.data, config });
-  return /* @__PURE__ */ jsx32(
+  ) : /* @__PURE__ */ jsx33(Render, { data: state.data, config });
+  return /* @__PURE__ */ jsx33(
     "div",
     {
       className: getClassName23(),
@@ -5906,7 +6265,7 @@ var Preview = ({ id = "puck-preview" }) => {
       onClick: () => {
         dispatch({ type: "setUi", ui: __spreadProps(__spreadValues({}, state.ui), { itemSelector: null }) });
       },
-      children: iframe.enabled ? /* @__PURE__ */ jsx32(
+      children: iframe.enabled ? /* @__PURE__ */ jsx33(
         AutoFrame_default,
         {
           id: "preview-frame",
@@ -5916,14 +6275,14 @@ var Preview = ({ id = "puck-preview" }) => {
             setStatus("READY");
           },
           frameRef: ref,
-          children: /* @__PURE__ */ jsx32(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
+          children: /* @__PURE__ */ jsx33(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
             if (Frame) {
-              return /* @__PURE__ */ jsx32(Frame, { document: document2, children: inner });
+              return /* @__PURE__ */ jsx33(Frame, { document: document2, children: inner });
             }
             return inner;
           } })
         }
-      ) : /* @__PURE__ */ jsx32(
+      ) : /* @__PURE__ */ jsx33(
         "div",
         {
           id: "preview-frame",
@@ -5980,7 +6339,7 @@ var scrollIntoView = (el) => {
 };
 // components/LayerTree/index.tsx
-import { useContext as useContext8 } from "react";
+import { useContext as useContext11 } from "react";
 // lib/is-child-of-zone.ts
 init_react_import();
@@ -6013,7 +6372,7 @@ var onScrollEnd = (frame, cb) => {
 };
 // components/LayerTree/index.tsx
-import { Fragment as Fragment11, jsx as jsx33, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx34, jsxs as jsxs16 } 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 LayerTree = ({
@@ -6026,15 +6385,15 @@ var LayerTree = ({
   label
 }) => {
   const zones = data.zones || {};
-  const ctx = useContext8(dropZoneContext);
+  const ctx = useContext11(dropZoneContext);
   return /* @__PURE__ */ jsxs16(Fragment11, { children: [
     label && /* @__PURE__ */ jsxs16("div", { className: getClassName24("zoneTitle"), children: [
-      /* @__PURE__ */ jsx33("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ jsx33(Layers, { size: "16" }) }),
+      /* @__PURE__ */ jsx34("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ jsx34(Layers, { size: "16" }) }),
       " ",
       label
     ] }),
     /* @__PURE__ */ jsxs16("ul", { className: getClassName24(), children: [
-      zoneContent.length === 0 && /* @__PURE__ */ jsx33("div", { className: getClassName24("helper"), children: "No items" }),
+      zoneContent.length === 0 && /* @__PURE__ */ jsx34("div", { className: getClassName24("helper"), children: "No items" }),
       zoneContent.map((item, i) => {
         var _a;
         const isSelected = (itemSelector == null ? void 0 : itemSelector.index) === i && (itemSelector.zone === zone || itemSelector.zone === rootDroppableId && !zone);
@@ -6057,7 +6416,7 @@ var LayerTree = ({
               childIsSelected
             }),
             children: [
-              /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs16(
+              /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs16(
                 "button",
                 {
                   type: "button",
@@ -6096,22 +6455,22 @@ var LayerTree = ({
                     setHoveringComponent(null);
                   },
                   children: [
-                    containsZone && /* @__PURE__ */ jsx33(
+                    containsZone && /* @__PURE__ */ jsx34(
                       "div",
                       {
                         className: getClassNameLayer("chevron"),
                         title: isSelected ? "Collapse" : "Expand",
-                        children: /* @__PURE__ */ jsx33(ChevronDown, { size: "12" })
+                        children: /* @__PURE__ */ jsx34(ChevronDown, { size: "12" })
                       }
                     ),
                     /* @__PURE__ */ jsxs16("div", { className: getClassNameLayer("title"), children: [
-                      /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ jsx33(Type, { size: "16" }) : /* @__PURE__ */ jsx33(LayoutGrid, { size: "16" }) }),
-                      /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("name"), children: label2 })
+                      /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ jsx34(Type, { size: "16" }) : /* @__PURE__ */ jsx34(LayoutGrid, { size: "16" }) }),
+                      /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("name"), children: label2 })
                     ] })
                   ]
                 }
               ) }),
-              containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ jsx33(
+              containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ jsx34(
                 LayerTree,
                 {
                   config,
@@ -6133,13 +6492,13 @@ var LayerTree = ({
 };
 // components/Puck/components/Outline/index.tsx
-import { useCallback as useCallback12, useMemo as useMemo13 } from "react";
-import { Fragment as Fragment12, jsx as jsx34, jsxs as jsxs17 } from "react/jsx-runtime";
+import { useCallback as useCallback14, useMemo as useMemo14 } from "react";
+import { Fragment as Fragment12, jsx as jsx35, jsxs as jsxs17 } from "react/jsx-runtime";
 var Outline = () => {
   const { dispatch, state, overrides, config } = useAppContext();
   const { data, ui } = state;
   const { itemSelector } = ui;
-  const setItemSelector = useCallback12(
+  const setItemSelector = useCallback14(
     (newItemSelector) => {
       dispatch({
         type: "setUi",
@@ -6148,9 +6507,9 @@ var Outline = () => {
     },
     []
   );
-  const Wrapper = useMemo13(() => overrides.outline || "div", [overrides]);
-  return /* @__PURE__ */ jsx34(Wrapper, { children: /* @__PURE__ */ jsx34(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ jsxs17(Fragment12, { children: [
-    (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ jsx34(
+  const Wrapper = useMemo14(() => overrides.outline || "div", [overrides]);
+  return /* @__PURE__ */ jsx35(Wrapper, { children: /* @__PURE__ */ jsx35(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ jsxs17(Fragment12, { children: [
+    (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ jsx35(
       LayerTree,
       {
         config,
@@ -6163,7 +6522,7 @@ var Outline = () => {
     ),
     Object.entries(findZonesForArea(data, "root")).map(
       ([zoneKey, zone]) => {
-        return /* @__PURE__ */ jsx34(
+        return /* @__PURE__ */ jsx35(
           LayerTree,
           {
             config,
@@ -6262,19 +6621,19 @@ function usePuckHistory({
 // lib/use-history-store.ts
 init_react_import();
-import { useState as useState21 } from "react";
+import { useState as useState22 } from "react";
 import { useDebouncedCallback as useDebouncedCallback3 } from "use-debounce";
 var EMPTY_HISTORY_INDEX = 0;
 function useHistoryStore(initialHistory) {
   var _a, _b;
-  const [histories, setHistories] = useState21(
+  const [histories, setHistories] = useState22(
     (_a = initialHistory == null ? void 0 : initialHistory.histories) != null ? _a : []
   );
   const updateHistories = (histories2) => {
     setHistories(histories2);
     setIndex(histories2.length - 1);
   };
-  const [index, setIndex] = useState21(
+  const [index, setIndex] = useState22(
     (_b = initialHistory == null ? void 0 : initialHistory.index) != null ? _b : EMPTY_HISTORY_INDEX
   );
   const hasPast = index > EMPTY_HISTORY_INDEX;
@@ -6435,27 +6794,27 @@ var getBox = function getBox2(el) {
 // components/Puck/components/Canvas/index.tsx
 import {
-  useCallback as useCallback13,
-  useEffect as useEffect19,
-  useMemo as useMemo15,
-  useRef as useRef8,
-  useState as useState23
+  useCallback as useCallback15,
+  useEffect as useEffect21,
+  useMemo as useMemo16,
+  useRef as useRef7,
+  useState as useState24
 } from "react";
 // components/ViewportControls/index.tsx
 init_react_import();
-import { useEffect as useEffect18, useMemo as useMemo14, useState as useState22 } from "react";
+import { useEffect as useEffect20, useMemo as useMemo15, useState as useState23 } from "react";
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
 init_react_import();
 var styles_module_default20 = { "ViewportControls": "_ViewportControls_g1wgg_1", "ViewportControls-divider": "_ViewportControls-divider_g1wgg_15", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_g1wgg_21", "ViewportButton--isActive": "_ViewportButton--isActive_g1wgg_34", "ViewportButton-inner": "_ViewportButton-inner_g1wgg_34" };
 // components/ViewportControls/index.tsx
-import { jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs18 } 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__ */ jsx36(Smartphone, { size: 16 }),
+  Tablet: /* @__PURE__ */ jsx36(Tablet, { size: 16 }),
+  Monitor: /* @__PURE__ */ jsx36(Monitor, { size: 16 })
 };
 var getClassName25 = get_class_name_factory_default("ViewportControls", styles_module_default20);
 var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default20);
@@ -6467,11 +6826,11 @@ var ViewportButton = ({
   onClick
 }) => {
   const { state } = useAppContext();
-  const [isActive, setIsActive] = useState22(false);
-  useEffect18(() => {
+  const [isActive, setIsActive] = useState23(false);
+  useEffect20(() => {
     setIsActive(width === state.ui.viewports.current.width);
   }, [width, state.ui.viewports.current.width]);
-  return /* @__PURE__ */ jsx35("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx36(
     IconButton,
     {
       title,
@@ -6480,7 +6839,7 @@ var ViewportButton = ({
         e.stopPropagation();
         onClick({ width, height });
       },
-      children: /* @__PURE__ */ jsx35("span", { className: getClassNameButton("inner"), children })
+      children: /* @__PURE__ */ jsx36("span", { className: getClassNameButton("inner"), children })
     }
   ) });
 };
@@ -6504,7 +6863,7 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
-  const zoomOptions = useMemo14(
+  const zoomOptions = useMemo15(
     () => [
       ...defaultZoomOptions,
       ...defaultsContainAutoZoom ? [] : [
@@ -6517,7 +6876,7 @@ var ViewportControls = ({
     [autoZoom]
   );
   return /* @__PURE__ */ jsxs18("div", { className: getClassName25(), children: [
-    viewports.map((viewport, i) => /* @__PURE__ */ jsx35(
+    viewports.map((viewport, i) => /* @__PURE__ */ jsx36(
       ViewportButton,
       {
         height: viewport.height,
@@ -6528,8 +6887,8 @@ var ViewportControls = ({
       },
       i
     )),
-    /* @__PURE__ */ jsx35("div", { className: getClassName25("divider") }),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36("div", { className: getClassName25("divider") }),
+    /* @__PURE__ */ jsx36(
       IconButton,
       {
         title: "Zoom viewport out",
@@ -6543,10 +6902,10 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ jsx35(ZoomOut, { size: 16 })
+        children: /* @__PURE__ */ jsx36(ZoomOut, { size: 16 })
       }
     ),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36(
       IconButton,
       {
         title: "Zoom viewport in",
@@ -6560,11 +6919,11 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ jsx35(ZoomIn, { size: 16 })
+        children: /* @__PURE__ */ jsx36(ZoomIn, { size: 16 })
       }
     ),
-    /* @__PURE__ */ jsx35("div", { className: getClassName25("divider") }),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36("div", { className: getClassName25("divider") }),
+    /* @__PURE__ */ jsx36(
       "select",
       {
         className: getClassName25("zoomSelect"),
@@ -6572,7 +6931,7 @@ var ViewportControls = ({
         onChange: (e) => {
           onZoom(parseFloat(e.currentTarget.value));
         },
-        children: zoomOptions.map((option) => /* @__PURE__ */ jsx35(
+        children: zoomOptions.map((option) => /* @__PURE__ */ jsx36(
           "option",
           {
             value: option.value,
@@ -6620,24 +6979,24 @@ var getZoomConfig = (uiViewport, frame, zoom) => {
 };
 // components/Puck/components/Canvas/index.tsx
-import { Fragment as Fragment13, jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
 var getClassName26 = get_class_name_factory_default("PuckCanvas", styles_module_default21);
 var ZOOM_ON_CHANGE = true;
 var Canvas = () => {
   const { status, iframe } = useAppContext();
   const { dispatch, state, overrides, setUi, zoomConfig, setZoomConfig } = useAppContext();
   const { ui } = state;
-  const frameRef = useRef8(null);
-  const [showTransition, setShowTransition] = useState23(false);
-  const defaultRender = useMemo15(() => {
-    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx36(Fragment13, { children });
+  const frameRef = useRef7(null);
+  const [showTransition, setShowTransition] = useState24(false);
+  const defaultRender = useMemo16(() => {
+    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx37(Fragment13, { children });
     return PuckDefault;
   }, []);
-  const CustomPreview = useMemo15(
+  const CustomPreview = useMemo16(
     () => overrides.preview || defaultRender,
     [overrides]
   );
-  const getFrameDimensions = useCallback13(() => {
+  const getFrameDimensions = useCallback15(() => {
     if (frameRef.current) {
       const frame = frameRef.current;
       const box = getBox(frame);
@@ -6645,7 +7004,7 @@ var Canvas = () => {
     }
     return { width: 0, height: 0 };
   }, [frameRef]);
-  const resetAutoZoom = useCallback13(
+  const resetAutoZoom = useCallback15(
     (ui2 = state.ui) => {
       if (frameRef.current) {
         setZoomConfig(
@@ -6655,11 +7014,11 @@ var Canvas = () => {
     },
     [frameRef, zoomConfig, state.ui]
   );
-  useEffect19(() => {
+  useEffect21(() => {
     setShowTransition(false);
     resetAutoZoom();
   }, [frameRef, ui.leftSideBarVisible, ui.rightSideBarVisible]);
-  useEffect19(() => {
+  useEffect21(() => {
     const { height: frameHeight } = getFrameDimensions();
     if (ui.viewports.current.height === "auto") {
       setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
@@ -6667,13 +7026,13 @@ var Canvas = () => {
       }));
     }
   }, [zoomConfig.zoom]);
-  useEffect19(() => {
+  useEffect21(() => {
     if (ZOOM_ON_CHANGE) {
       setShowTransition(true);
       resetAutoZoom(ui);
     }
   }, [ui.viewports.current.width]);
-  useEffect19(() => {
+  useEffect21(() => {
     const cb = () => {
       setShowTransition(false);
       resetAutoZoom();
@@ -6683,8 +7042,8 @@ var Canvas = () => {
       window.removeEventListener("resize", cb);
     };
   }, []);
-  const [showLoader, setShowLoader] = useState23(false);
-  useEffect19(() => {
+  const [showLoader, setShowLoader] = useState24(false);
+  useEffect21(() => {
     setTimeout(() => {
       setShowLoader(true);
     }, 500);
@@ -6702,7 +7061,7 @@ var Canvas = () => {
         recordHistory: true
       }),
       children: [
-        ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx36("div", { className: getClassName26("controls"), children: /* @__PURE__ */ jsx36(
+        ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx37("div", { className: getClassName26("controls"), children: /* @__PURE__ */ jsx37(
           ViewportControls,
           {
             autoZoom: zoomConfig.autoZoom,
@@ -6729,7 +7088,7 @@ var Canvas = () => {
           }
         ) }),
         /* @__PURE__ */ jsxs19("div", { className: getClassName26("inner"), ref: frameRef, children: [
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx37(
             "div",
             {
               className: getClassName26("root"),
@@ -6750,10 +7109,10 @@ var Canvas = () => {
                   })
                 );
               },
-              children: /* @__PURE__ */ jsx36(CustomPreview, { children: /* @__PURE__ */ jsx36(Preview, {}) })
+              children: /* @__PURE__ */ jsx37(CustomPreview, { children: /* @__PURE__ */ jsx37(Preview2, {}) })
             }
           ),
-          /* @__PURE__ */ jsx36("div", { className: getClassName26("loader"), children: /* @__PURE__ */ jsx36(Loader, { size: 24 }) })
+          /* @__PURE__ */ jsx37("div", { className: getClassName26("loader"), children: /* @__PURE__ */ jsx37(Loader, { size: 24 }) })
         ] })
       ]
     }
@@ -6762,7 +7121,7 @@ var Canvas = () => {
 // lib/use-loaded-overrides.ts
 init_react_import();
-import { useMemo as useMemo16 } from "react";
+import { useMemo as useMemo17 } from "react";
 // lib/load-overrides.ts
 init_react_import();
@@ -6801,26 +7160,26 @@ var useLoadedOverrides = ({
   overrides,
   plugins
 }) => {
-  return useMemo16(() => {
+  return useMemo17(() => {
     return loadOverrides({ overrides, plugins });
   }, [plugins, overrides]);
 };
 // components/DefaultOverride/index.tsx
 init_react_import();
-import { Fragment as Fragment14, jsx as jsx37 } from "react/jsx-runtime";
-var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx37(Fragment14, { children });
+import { Fragment as Fragment14, jsx as jsx38 } from "react/jsx-runtime";
+var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx38(Fragment14, { children });
 // lib/use-inject-css.ts
 init_react_import();
-import { useEffect as useEffect20, useState as useState24 } from "react";
+import { useEffect as useEffect22, useState as useState25 } from "react";
 var styles = ``;
 var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
-  const [el, setEl] = useState24();
-  useEffect20(() => {
+  const [el, setEl] = useState25();
+  useEffect22(() => {
     setEl(document.createElement("style"));
   }, []);
-  useEffect20(() => {
+  useEffect22(() => {
     var _a;
     if (!el || typeof window === "undefined") {
       return;
@@ -6840,10 +7199,10 @@ var useInjectGlobalCss = (iframeEnabled) => {
 // lib/use-preview-mode-hotkeys.ts
 init_react_import();
-import { useCallback as useCallback14 } from "react";
+import { useCallback as useCallback16 } from "react";
 import { useHotkeys as useHotkeys2 } from "react-hotkeys-hook";
 var usePreviewModeHotkeys = (dispatch, iframeEnabled) => {
-  const toggleInteractive = useCallback14(() => {
+  const toggleInteractive = useCallback16(() => {
     dispatch({
       type: "setUi",
       ui: (ui) => ({
@@ -6866,7 +7225,7 @@ var usePreviewModeHotkeys = (dispatch, iframeEnabled) => {
 };
 // components/Puck/index.tsx
-import { Fragment as Fragment15, jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
 var getClassName27 = get_class_name_factory_default("Puck", styles_module_default15);
 var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_module_default15);
 function Puck({
@@ -6895,7 +7254,7 @@ function Puck({
     waitForStyles: true
   }, _iframe);
   useInjectGlobalCss(iframe.enabled);
-  const [generatedAppState] = useState25(() => {
+  const [generatedAppState] = useState26(() => {
     var _a2, _b2, _c, _d, _e, _f, _g, _h, _i;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
@@ -6967,7 +7326,7 @@ function Puck({
     histories,
     index: initialHistoryIndex
   });
-  const [reducer] = useState25(
+  const [reducer] = useState26(
     () => createReducer({
       config,
       record: historyStore.record,
@@ -6985,14 +7344,14 @@ function Puck({
     historyStore,
     iframeEnabled: (_a = _iframe == null ? void 0 : _iframe.enabled) != null ? _a : true
   });
-  const [menuOpen, setMenuOpen] = useState25(false);
+  const [menuOpen, setMenuOpen] = useState26(false);
   const { itemSelector, leftSideBarVisible, rightSideBarVisible } = ui;
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
-  useEffect21(() => {
+  useEffect23(() => {
     if (onChange) onChange(data);
   }, [data]);
   const rootProps = data.root.props || data.root;
-  const toggleSidebars = useCallback15(
+  const toggleSidebars = useCallback17(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -7006,7 +7365,7 @@ function Puck({
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  useEffect21(() => {
+  useEffect23(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -7029,7 +7388,7 @@ function Puck({
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  const defaultHeaderRender = useMemo17(() => {
+  const defaultHeaderRender = useMemo18(() => {
     if (renderHeader) {
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
@@ -7037,20 +7396,20 @@ function Puck({
       const RenderHeader = (_a2) => {
         var _b2 = _a2, { actions } = _b2, props = __objRest(_b2, ["actions"]);
         const Comp = renderHeader;
-        return /* @__PURE__ */ jsx38(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
+        return /* @__PURE__ */ jsx39(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
       };
       return RenderHeader;
     }
     return DefaultOverride;
   }, [renderHeader]);
-  const defaultHeaderActionsRender = useMemo17(() => {
+  const defaultHeaderActionsRender = useMemo18(() => {
     if (renderHeaderActions) {
       console.warn(
         "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
       );
       const RenderHeader = (props) => {
         const Comp = renderHeaderActions;
-        return /* @__PURE__ */ jsx38(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
+        return /* @__PURE__ */ jsx39(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
       };
       return RenderHeader;
     }
@@ -7060,27 +7419,27 @@ function Puck({
     overrides,
     plugins
   });
-  const CustomPuck = useMemo17(
+  const CustomPuck = useMemo18(
     () => loadedOverrides.puck || DefaultOverride,
     [loadedOverrides]
   );
-  const CustomHeader = useMemo17(
+  const CustomHeader = useMemo18(
     () => loadedOverrides.header || defaultHeaderRender,
     [loadedOverrides]
   );
-  const CustomHeaderActions = useMemo17(
+  const CustomHeaderActions = useMemo18(
     () => loadedOverrides.headerActions || defaultHeaderActionsRender,
     [loadedOverrides]
   );
-  const [mounted, setMounted] = useState25(false);
-  useEffect21(() => {
+  const [mounted, setMounted] = useState26(false);
+  useEffect23(() => {
     setMounted(true);
   }, []);
   const selectedComponentConfig = selectedItem && config.components[selectedItem.type];
   const selectedComponentLabel = selectedItem ? (_b = selectedComponentConfig == null ? void 0 : selectedComponentConfig["label"]) != null ? _b : selectedItem.type.toString() : "";
   usePreviewModeHotkeys(dispatch, iframe.enabled);
   return /* @__PURE__ */ jsxs20("div", { className: `Puck ${getClassName27()}`, children: [
-    /* @__PURE__ */ jsx38(
+    /* @__PURE__ */ jsx39(
       AppProvider,
       {
         value: {
@@ -7102,7 +7461,7 @@ function Puck({
           getPermissions: () => ({}),
           refreshPermissions: () => null
         },
-        children: /* @__PURE__ */ jsx38(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx38(CustomPuck, { children: children || /* @__PURE__ */ jsx38(
+        children: /* @__PURE__ */ jsx39(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx39(CustomPuck, { children: children || /* @__PURE__ */ jsx39(
           "div",
           {
             className: getLayoutClassName({
@@ -7112,59 +7471,59 @@ function Puck({
               rightSideBarVisible
             }),
             children: /* @__PURE__ */ jsxs20("div", { className: getLayoutClassName("inner"), children: [
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39(
                 CustomHeader,
                 {
-                  actions: /* @__PURE__ */ jsx38(Fragment15, { children: /* @__PURE__ */ jsx38(CustomHeaderActions, { children: /* @__PURE__ */ jsx38(
+                  actions: /* @__PURE__ */ jsx39(Fragment15, { children: /* @__PURE__ */ jsx39(CustomHeaderActions, { children: /* @__PURE__ */ jsx39(
                     Button,
                     {
                       onClick: () => {
                         onPublish && onPublish(data);
                       },
-                      icon: /* @__PURE__ */ jsx38(Globe, { size: "14px" }),
+                      icon: /* @__PURE__ */ jsx39(Globe, { size: "14px" }),
                       children: "Publish"
                     }
                   ) }) }),
-                  children: /* @__PURE__ */ jsx38("header", { className: getLayoutClassName("header"), children: /* @__PURE__ */ jsxs20("div", { className: getLayoutClassName("headerInner"), children: [
+                  children: /* @__PURE__ */ jsx39("header", { className: getLayoutClassName("header"), children: /* @__PURE__ */ jsxs20("div", { className: getLayoutClassName("headerInner"), children: [
                     /* @__PURE__ */ jsxs20("div", { className: getLayoutClassName("headerToggle"), children: [
-                      /* @__PURE__ */ jsx38(
+                      /* @__PURE__ */ jsx39(
                         "div",
                         {
                           className: getLayoutClassName("leftSideBarToggle"),
-                          children: /* @__PURE__ */ jsx38(
+                          children: /* @__PURE__ */ jsx39(
                             IconButton,
                             {
                               onClick: () => {
                                 toggleSidebars("left");
                               },
                               title: "Toggle left sidebar",
-                              children: /* @__PURE__ */ jsx38(PanelLeft, { focusable: "false" })
+                              children: /* @__PURE__ */ jsx39(PanelLeft, { focusable: "false" })
                             }
                           )
                         }
                       ),
-                      /* @__PURE__ */ jsx38(
+                      /* @__PURE__ */ jsx39(
                         "div",
                         {
                           className: getLayoutClassName("rightSideBarToggle"),
-                          children: /* @__PURE__ */ jsx38(
+                          children: /* @__PURE__ */ jsx39(
                             IconButton,
                             {
                               onClick: () => {
                                 toggleSidebars("right");
                               },
                               title: "Toggle right sidebar",
-                              children: /* @__PURE__ */ jsx38(PanelRight, { focusable: "false" })
+                              children: /* @__PURE__ */ jsx39(PanelRight, { focusable: "false" })
                             }
                           )
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsx38("div", { className: getLayoutClassName("headerTitle"), children: /* @__PURE__ */ jsxs20(Heading, { rank: "2", size: "xs", children: [
+                    /* @__PURE__ */ jsx39("div", { className: getLayoutClassName("headerTitle"), children: /* @__PURE__ */ jsxs20(Heading, { rank: "2", size: "xs", children: [
                       headerTitle || rootProps.title || "Page",
                       headerPath && /* @__PURE__ */ jsxs20(Fragment15, { children: [
                         " ",
-                        /* @__PURE__ */ jsx38(
+                        /* @__PURE__ */ jsx39(
                           "code",
                           {
                             className: getLayoutClassName("headerPath"),
@@ -7174,30 +7533,30 @@ function Puck({
                       ] })
                     ] }) }),
                     /* @__PURE__ */ jsxs20("div", { className: getLayoutClassName("headerTools"), children: [
-                      /* @__PURE__ */ jsx38("div", { className: getLayoutClassName("menuButton"), children: /* @__PURE__ */ jsx38(
+                      /* @__PURE__ */ jsx39("div", { className: getLayoutClassName("menuButton"), children: /* @__PURE__ */ jsx39(
                         IconButton,
                         {
                           onClick: () => {
                             return setMenuOpen(!menuOpen);
                           },
                           title: "Toggle menu bar",
-                          children: menuOpen ? /* @__PURE__ */ jsx38(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx38(ChevronDown, { focusable: "false" })
+                          children: menuOpen ? /* @__PURE__ */ jsx39(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx39(ChevronDown, { focusable: "false" })
                         }
                       ) }),
-                      /* @__PURE__ */ jsx38(
+                      /* @__PURE__ */ jsx39(
                         MenuBar,
                         {
                           appState,
                           dispatch,
                           onPublish,
                           menuOpen,
-                          renderHeaderActions: () => /* @__PURE__ */ jsx38(CustomHeaderActions, { children: /* @__PURE__ */ jsx38(
+                          renderHeaderActions: () => /* @__PURE__ */ jsx39(CustomHeaderActions, { children: /* @__PURE__ */ jsx39(
                             Button,
                             {
                               onClick: () => {
                                 onPublish && onPublish(data);
                               },
-                              icon: /* @__PURE__ */ jsx38(Globe, { size: "14px" }),
+                              icon: /* @__PURE__ */ jsx39(Globe, { size: "14px" }),
                               children: "Publish"
                             }
                           ) }),
@@ -7209,18 +7568,18 @@ function Puck({
                 }
               ),
               /* @__PURE__ */ jsxs20("div", { className: getLayoutClassName("leftSideBar"), children: [
-                /* @__PURE__ */ jsx38(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx38(Components, {}) }),
-                /* @__PURE__ */ jsx38(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx38(Outline, {}) })
+                /* @__PURE__ */ jsx39(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx39(Components, {}) }),
+                /* @__PURE__ */ jsx39(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx39(Outline, {}) })
               ] }),
-              /* @__PURE__ */ jsx38(Canvas, {}),
-              /* @__PURE__ */ jsx38("div", { className: getLayoutClassName("rightSideBar"), children: /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39(Canvas, {}),
+              /* @__PURE__ */ jsx39("div", { className: getLayoutClassName("rightSideBar"), children: /* @__PURE__ */ jsx39(
                 SidebarSection,
                 {
                   noPadding: true,
                   noBorderTop: true,
                   showBreadcrumbs: true,
                   title: selectedItem ? selectedComponentLabel : "Page",
-                  children: /* @__PURE__ */ jsx38(Fields, {})
+                  children: /* @__PURE__ */ jsx39(Fields, {})
                 }
               ) })
             ] })
@@ -7228,13 +7587,13 @@ function Puck({
         ) }) })
       }
     ),
-    /* @__PURE__ */ jsx38("div", { id: "puck-portal-root", className: getClassName27("portal") })
+    /* @__PURE__ */ jsx39("div", { id: "puck-portal-root", className: getClassName27("portal") })
   ] });
 }
 Puck.Components = Components;
 Puck.Fields = Fields;
 Puck.Outline = Outline;
-Puck.Preview = Preview;
+Puck.Preview = Preview2;
 // lib/migrate.ts
 init_react_import();