@measured/puck 0.17.0-canary.6e568de → 0.17.0-canary.6e5864a

package/dist/index.js

@@ -9,9 +9,6 @@ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues = (a, b) => {
   for (var prop in b || (b = {}))
@@ -64,10 +61,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -178,9 +171,6 @@ init_react_import();
 // types/API/index.ts
 init_react_import();
 
-// types/API/DropZone.ts
-init_react_import();
-
 // types/API/Viewports.ts
 init_react_import();
 
@@ -225,26 +215,26 @@ init_react_import();
 // lib/get-class-name-factory.ts
 init_react_import();
 var import_classnames = __toESM(require_classnames());
-var getClassNameFactory = (rootClass, styles2, config = { baseClass: "" }) => (options = {}) => {
+var getClassNameFactory = (rootClass, styles, config = { baseClass: "" }) => (options = {}) => {
   if (typeof options === "string") {
     const descendant = options;
-    const style = styles2[`${rootClass}-${descendant}`];
+    const style = styles[`${rootClass}-${descendant}`];
     if (style) {
-      return config.baseClass + styles2[`${rootClass}-${descendant}`] || "";
+      return config.baseClass + styles[`${rootClass}-${descendant}`] || "";
     }
     return "";
   } else if (typeof options === "object") {
     const modifiers = options;
     const prefixedModifiers = {};
     for (let modifier in modifiers) {
-      prefixedModifiers[styles2[`${rootClass}--${modifier}`]] = modifiers[modifier];
+      prefixedModifiers[styles[`${rootClass}--${modifier}`]] = modifiers[modifier];
     }
-    const c = styles2[rootClass];
+    const c = styles[rootClass];
     return config.baseClass + (0, import_classnames.default)(__spreadValues({
       [c]: !!c
     }, prefixedModifiers));
   } else {
-    return config.baseClass + styles2[rootClass] || "";
+    return config.baseClass + styles[rootClass] || "";
   }
 };
 var get_class_name_factory_default = getClassNameFactory;
@@ -289,7 +279,7 @@ init_react_import();
 var styles_module_default2 = { "InputWrapper": "_InputWrapper_1l5m8_1", "Input": "_Input_1l5m8_1", "Input-label": "_Input-label_1l5m8_26", "Input-labelIcon": "_Input-labelIcon_1l5m8_35", "Input-disabledIcon": "_Input-disabledIcon_1l5m8_42", "Input-input": "_Input-input_1l5m8_47", "Input--readOnly": "_Input--readOnly_1l5m8_91", "Input-radioGroupItems": "_Input-radioGroupItems_1l5m8_102", "Input-radio": "_Input-radio_1l5m8_102", "Input-radioInner": "_Input-radioInner_1l5m8_119", "Input-radioInput": "_Input-radioInput_1l5m8_164" };
 
 // components/AutoField/index.tsx
-var import_react13 = require("react");
+var import_react15 = require("react");
 
 // components/AutoField/fields/index.tsx
 init_react_import();
@@ -691,7 +681,7 @@ var IconButton = ({
   return el;
 };
 
-// components/LegacyDnd/Droppable/index.tsx
+// components/Droppable/index.tsx
 init_react_import();
 var import_dnd = require("@measured/dnd");
 
@@ -737,6 +727,9 @@ var defaultViewports = [
   { width: 1280, height: "auto", icon: "Monitor", label: "Large" }
 ];
 
+// components/Puck/context.tsx
+var import_ua_parser_js = require("ua-parser-js");
+
 // lib/use-resolved-permissions.ts
 init_react_import();
 var import_react4 = require("react");
@@ -1104,6 +1097,7 @@ var defaultContext = {
   status: "LOADING",
   setStatus: () => null,
   iframe: {},
+  safariFallbackMode: false,
   globalPermissions: {},
   getPermissions: () => ({}),
   refreshPermissions: () => null
@@ -1118,6 +1112,24 @@ var AppProvider = ({
   (0, import_react6.useEffect)(() => {
     setStatus("MOUNTED");
   }, []);
+  const [safariFallbackMode, setSafariFallbackMode] = (0, import_react6.useState)(false);
+  (0, import_react6.useEffect)(() => {
+    var _a, _b, _c;
+    const ua = new import_ua_parser_js.UAParser(navigator.userAgent);
+    const { browser } = ua.getResult();
+    if (browser.name === "Safari" && (((_a = browser.version) == null ? void 0 : _a.indexOf("17.2.")) || ((_b = browser.version) == null ? void 0 : _b.indexOf("17.3.")) || ((_c = browser.version) == null ? void 0 : _c.indexOf("17.4.")))) {
+      if (process.env.NODE_ENV !== "production" && value.iframe.enabled) {
+        console.warn(
+          `Detected Safari ${browser.version}, which contains a bug that prevents Puck DropZones from detecting a mouseover event within an iframe. This affects Safari versions 17.2, 17.3 and 17.4.
+
+Running in compatibility mode, which may have some DropZone side-effects. Alternatively, consider disabling iframes: https://puckeditor.com/docs/integrating-puck/viewports#opting-out-of-iframes.
+
+See https://github.com/measuredco/puck/issues/411 for more information. This message will not show in production.`
+        );
+      }
+      setSafariFallbackMode(true);
+    }
+  }, []);
   const selectedItem = value.state.ui.itemSelector ? getItem(value.state.ui.itemSelector, value.state.data) : void 0;
   const [componentState, setComponentState] = (0, import_react6.useState)({});
   const setComponentLoading = (id) => {
@@ -1164,6 +1176,7 @@ var AppProvider = ({
         setZoomConfig,
         status,
         setStatus,
+        safariFallbackMode,
         getPermissions,
         refreshPermissions,
         componentState,
@@ -1188,7 +1201,7 @@ function useAppContext() {
   });
 }
 
-// components/LegacyDnd/Droppable/index.tsx
+// components/Droppable/index.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var defaultProvided = {
   droppableProps: {
@@ -1211,7 +1224,7 @@ var Droppable = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(El, __spreadValues({}, props));
 };
 
-// components/LegacyDnd/Draggable/index.tsx
+// components/Draggable/index.tsx
 init_react_import();
 var import_dnd2 = require("@measured/dnd");
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -1293,7 +1306,7 @@ var import_jsx_runtime7 = require("react/jsx-runtime");
 var getClassName4 = get_class_name_factory_default("DragIcon", styles_module_default5);
 var DragIcon = ({ isDragDisabled }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName4({ disabled: isDragDisabled }), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { viewBox: "0 0 20 20", width: "12", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z" }) }) });
 
-// components/LegacyDnd/DragDropContext/index.tsx
+// components/DragDropContext/index.tsx
 init_react_import();
 var import_dnd3 = require("@measured/dnd");
 var import_jsx_runtime8 = require("react/jsx-runtime");
@@ -1624,6 +1637,7 @@ var DefaultField = ({
           className: getClassName6("input"),
           autoComplete: "off",
           type: field.type,
+          title: label || name,
           name,
           value: typeof value === "undefined" ? "" : value.toString(),
           onChange: (e) => {
@@ -2038,6 +2052,20 @@ var ExternalField = ({
 
 // components/AutoField/fields/RadioField/index.tsx
 init_react_import();
+var import_react12 = require("react");
+
+// lib/safe-json-parse.ts
+init_react_import();
+var safeJsonParse = (str) => {
+  try {
+    const jsonValue = JSON.parse(str);
+    return jsonValue;
+  } catch (e) {
+    return str;
+  }
+};
+
+// components/AutoField/fields/RadioField/index.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var getClassName11 = get_class_name_factory_default("Input", styles_module_default2);
 var RadioField = ({
@@ -2050,6 +2078,10 @@ var RadioField = ({
   label,
   Label
 }) => {
+  const flatOptions = (0, import_react12.useMemo)(
+    () => field.type === "radio" ? field.options.map(({ value: value2 }) => value2) : [],
+    [field]
+  );
   if (field.type !== "radio" || !field.options) {
     return null;
   }
@@ -2073,11 +2105,12 @@ var RadioField = ({
                 value: option.value,
                 name,
                 onChange: (e) => {
-                  if (e.currentTarget.value === "true" || e.currentTarget.value === "false") {
-                    onChange(JSON.parse(e.currentTarget.value));
-                    return;
+                  const jsonValue = safeJsonParse(e.target.value) || e.target.value;
+                  if (flatOptions.indexOf(jsonValue) > -1) {
+                    onChange(jsonValue);
+                  } else {
+                    onChange(e.target.value);
                   }
-                  onChange(e.currentTarget.value);
                 },
                 disabled: readOnly,
                 checked: value === option.value
@@ -2094,6 +2127,7 @@ var RadioField = ({
 
 // components/AutoField/fields/SelectField/index.tsx
 init_react_import();
+var import_react13 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var getClassName12 = get_class_name_factory_default("Input", styles_module_default2);
 var SelectField = ({
@@ -2106,6 +2140,10 @@ var SelectField = ({
   readOnly,
   id
 }) => {
+  const flatOptions = (0, import_react13.useMemo)(
+    () => field.type === "select" ? field.options.map(({ value: value2 }) => value2) : [],
+    [field]
+  );
   if (field.type !== "select" || !field.options) {
     return null;
   }
@@ -2119,14 +2157,16 @@ var SelectField = ({
         "select",
         {
           id,
+          title: label || name,
           className: getClassName12("input"),
           disabled: readOnly,
           onChange: (e) => {
-            if (e.currentTarget.value === "true" || e.currentTarget.value === "false") {
-              onChange(JSON.parse(e.currentTarget.value));
-              return;
+            const jsonValue = safeJsonParse(e.target.value) || e.target.value;
+            if (flatOptions.indexOf(jsonValue) > -1) {
+              onChange(jsonValue);
+            } else {
+              onChange(e.target.value);
             }
-            onChange(e.currentTarget.value);
           },
           value,
           children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -2240,7 +2280,7 @@ var ObjectField = ({
 
 // lib/use-safe-id.ts
 init_react_import();
-var import_react12 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 
 // lib/generate-id.ts
 init_react_import();
@@ -2249,10 +2289,10 @@ var generateId = (type) => type ? `${type}-${(0, import_uuid.v4)()}` : (0, impor
 
 // lib/use-safe-id.ts
 var useSafeId = () => {
-  if (typeof import_react12.default.useId !== "undefined") {
-    return import_react12.default.useId();
+  if (typeof import_react14.default.useId !== "undefined") {
+    return import_react14.default.useId();
   }
-  const [id] = (0, import_react12.useState)(generateId());
+  const [id] = (0, import_react14.useState)(generateId());
   return id;
 };
 
@@ -2286,7 +2326,7 @@ var FieldLabelInternal2 = ({
   readOnly
 }) => {
   const { overrides } = useAppContext();
-  const Wrapper = (0, import_react13.useMemo)(
+  const Wrapper = (0, import_react15.useMemo)(
     () => overrides.fieldLabel || FieldLabel,
     [overrides]
   );
@@ -2339,7 +2379,7 @@ function AutoFieldInternal(props) {
     Label,
     id: resolvedId
   });
-  const onFocus = (0, import_react13.useCallback)(
+  const onFocus = (0, import_react15.useCallback)(
     (e) => {
       if (mergedProps.name && e.target.nodeName === "INPUT") {
         e.stopPropagation();
@@ -2353,7 +2393,7 @@ function AutoFieldInternal(props) {
     },
     [mergedProps.name]
   );
-  const onBlur = (0, import_react13.useCallback)((e) => {
+  const onBlur = (0, import_react15.useCallback)((e) => {
     if ("name" in e.target) {
       dispatch({
         type: "setUi",
@@ -2372,12 +2412,23 @@ function AutoFieldInternal(props) {
   }
   const children = defaultFields[field.type](mergedProps);
   const Render2 = render[field.type];
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassNameWrapper(), onFocus, onBlur, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Render2, __spreadProps(__spreadValues({}, mergedProps), { children })) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "div",
+    {
+      className: getClassNameWrapper(),
+      onFocus,
+      onBlur,
+      onClick: (e) => {
+        e.stopPropagation();
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Render2, __spreadProps(__spreadValues({}, mergedProps), { children }))
+    }
+  );
 }
 function AutoFieldPrivate(props) {
   const { state } = useAppContext();
   const { value, onChange } = props;
-  const [localValue, setLocalValue] = (0, import_react13.useState)(value);
+  const [localValue, setLocalValue] = (0, import_react15.useState)(value);
   const onChangeDb = (0, import_use_debounce.useDebouncedCallback)(
     (val, ui) => {
       onChange(val, ui);
@@ -2385,11 +2436,11 @@ function AutoFieldPrivate(props) {
     50,
     { leading: true }
   );
-  const onChangeLocal = (0, import_react13.useCallback)((val, ui) => {
+  const onChangeLocal = (0, import_react15.useCallback)((val, ui) => {
     setLocalValue(val);
     onChangeDb(val, ui);
   }, []);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (state.ui.field.focus !== props.name) {
       setLocalValue(value);
     }
@@ -2401,7 +2452,7 @@ function AutoFieldPrivate(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AutoFieldInternal, __spreadValues(__spreadValues({}, props), localProps));
 }
 function AutoField(props) {
-  const DefaultLabel = (0, import_react13.useMemo)(() => {
+  const DefaultLabel = (0, import_react15.useMemo)(() => {
     const DefaultLabel2 = (labelProps) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "div",
       __spreadProps(__spreadValues({}, labelProps), {
@@ -2418,35 +2469,104 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css#css-module
 init_react_import();
-var styles_module_default10 = { "Drawer": "_Drawer_1ob9x_1", "DrawerItem-draggable": "_DrawerItem-draggable_1ob9x_8", "DrawerItem--disabled": "_DrawerItem--disabled_1ob9x_21", "DrawerItem": "_DrawerItem_1ob9x_8", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_1ob9x_31", "DrawerItem-name": "_DrawerItem-name_1ob9x_49" };
+var styles_module_default10 = { "Drawer": "_Drawer_1oa7v_1", "DrawerItem--disabled": "_DrawerItem--disabled_1oa7v_5", "DrawerItem-draggable": "_DrawerItem-draggable_1oa7v_5", "DrawerItem-default": "_DrawerItem-default_1oa7v_11", "DrawerItem-draggableWrapper": "_DrawerItem-draggableWrapper_1oa7v_11", "DrawerItem": "_DrawerItem_1oa7v_5", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_1oa7v_36", "DrawerItem-name": "_DrawerItem-name_1oa7v_54" };
 
 // components/Drawer/index.tsx
-var import_react21 = require("react");
-
-// components/DragDropContext/index.tsx
-init_react_import();
-var import_react19 = require("@dnd-kit/react");
-var import_react20 = require("react");
-var import_dom = require("@dnd-kit/dom");
+var import_react16 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var getClassName16 = get_class_name_factory_default("Drawer", styles_module_default10);
+var getClassNameItem2 = get_class_name_factory_default("DrawerItem", styles_module_default10);
+var drawerContext = (0, import_react16.createContext)({
+  droppableId: ""
+});
+var DrawerDraggable = ({
+  children,
+  id,
+  index,
+  isDragDisabled
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    Draggable,
+    {
+      id,
+      index,
+      isDragDisabled,
+      showShadow: true,
+      disableAnimations: true,
+      className: () => getClassNameItem2({ disabled: isDragDisabled }),
+      children: () => children
+    },
+    id
+  );
+};
+var DrawerItem = ({
+  name,
+  children,
+  id,
+  label,
+  index,
+  isDragDisabled
+}) => {
+  const ctx = (0, import_react16.useContext)(drawerContext);
+  const resolvedId = `${ctx.droppableId}::${id || name}`;
+  const CustomInner = (0, import_react16.useMemo)(
+    () => children || (({ children: children2, name: name2 }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: getClassNameItem2("default"), children: children2 })),
+    [children]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    DrawerDraggable,
+    {
+      id: resolvedId,
+      index,
+      isDragDisabled,
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CustomInner, { name, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: getClassNameItem2("draggableWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: getClassNameItem2("draggable"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: getClassNameItem2("name"), children: label != null ? label : name }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: getClassNameItem2("icon"), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DragIcon, { isDragDisabled }) })
+      ] }) }) })
+    }
+  );
+};
+var Drawer = ({
+  children,
+  droppableId: _droppableId = "default",
+  direction = "vertical"
+}) => {
+  const droppableId = `component-list:${_droppableId}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(drawerContext.Provider, { value: { droppableId }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Droppable, { droppableId, isDropDisabled: true, direction, children: (provided, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    "div",
+    __spreadProps(__spreadValues({}, provided.droppableProps), {
+      ref: provided.innerRef,
+      className: getClassName16({
+        isDraggingFrom: !!snapshot.draggingFromThisWith
+      }),
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: { display: "none" }, children: provided.placeholder })
+      ]
+    })
+  ) }) });
+};
+Drawer.Item = DrawerItem;
 
 // components/DropZone/index.tsx
 init_react_import();
-var import_react18 = require("react");
+var import_react20 = require("react");
 
 // components/DraggableComponent/index.tsx
 init_react_import();
-var import_react16 = require("react");
+var import_react18 = require("react");
+var import_dnd4 = require("@measured/dnd");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
 init_react_import();
-var styles_module_default11 = { "DraggableComponent": "_DraggableComponent_1uqah_1", "DraggableComponent-overlay": "_DraggableComponent-overlay_1uqah_12", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_1uqah_29", "DraggableComponent--hover": "_DraggableComponent--hover_1uqah_45", "DraggableComponent--isLocked": "_DraggableComponent--isLocked_1uqah_45", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_1uqah_54", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_1uqah_66", "DraggableComponent-actions": "_DraggableComponent-actions_1uqah_66" };
+var styles_module_default11 = { "DraggableComponent": "_DraggableComponent_1bhad_1", "DraggableComponent--isDragging": "_DraggableComponent--isDragging_1bhad_11", "DraggableComponent-contents": "_DraggableComponent-contents_1bhad_16", "DraggableComponent-overlay": "_DraggableComponent-overlay_1bhad_29", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_1bhad_49", "DraggableComponent--isLocked": "_DraggableComponent--isLocked_1bhad_65", "DraggableComponent--forceHover": "_DraggableComponent--forceHover_1bhad_71", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_1bhad_76", "DraggableComponent--indicativeHover": "_DraggableComponent--indicativeHover_1bhad_81", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_1bhad_97", "DraggableComponent-actions": "_DraggableComponent-actions_1bhad_97" };
 
 // lib/use-modifier-held.ts
 init_react_import();
-var import_react14 = require("react");
+var import_react17 = require("react");
 var useModifierHeld = (modifier) => {
-  const [modifierHeld, setModifierHeld] = (0, import_react14.useState)(false);
-  (0, import_react14.useEffect)(() => {
+  const [modifierHeld, setModifierHeld] = (0, import_react17.useState)(false);
+  (0, import_react17.useEffect)(() => {
     function downHandler({ key }) {
       if (key === modifier) {
         setModifierHeld(true);
@@ -2467,762 +2587,179 @@ var useModifierHeld = (modifier) => {
   return modifierHeld;
 };
 
-// components/DraggableComponent/index.tsx
-var import_react_dom2 = require("react-dom");
-
-// components/DraggableComponent/collision/dynamic/index.ts
-init_react_import();
-var import_abstract8 = require("@dnd-kit/abstract");
-
-// components/DraggableComponent/collision/directional/index.ts
-init_react_import();
-var import_abstract = require("@dnd-kit/abstract");
-
-// components/DraggableComponent/collision/collision-debug.ts
-init_react_import();
-var DEBUG = false;
-var debugElements = {};
-var timeout;
-var collisionDebug = (a, b, id, color, label) => {
-  if (!DEBUG) return;
-  const debugId = `${id}-debug`;
-  clearTimeout(timeout);
-  timeout = setTimeout(() => {
-    Object.entries(debugElements).forEach(([id2, { svg }]) => {
-      svg.remove();
-      delete debugElements[id2];
-    });
-  }, 1e3);
-  requestAnimationFrame(() => {
-    var _a, _b;
-    const existingEl = debugElements[debugId];
-    let line = (_a = debugElements[debugId]) == null ? void 0 : _a.line;
-    let text = (_b = debugElements[debugId]) == null ? void 0 : _b.text;
-    if (!existingEl) {
-      const svgNs = "http://www.w3.org/2000/svg";
-      const svg = document.createElementNS(svgNs, "svg");
-      line = document.createElementNS(svgNs, "line");
-      text = document.createElementNS(svgNs, "text");
-      svg.setAttribute("id", debugId);
-      svg.setAttribute(
-        "style",
-        "position: fixed; height: 100%; width: 100%; pointer-events: none;"
-      );
-      svg.appendChild(line);
-      svg.appendChild(text);
-      text.setAttribute("fill", `black`);
-      document.body.appendChild(svg);
-      debugElements[debugId] = { svg, line, text };
-    }
-    line.setAttribute("x1", a.x.toString());
-    line.setAttribute("x2", b.x.toString());
-    line.setAttribute("y1", a.y.toString());
-    line.setAttribute("y2", b.y.toString());
-    line.setAttribute("style", `stroke:${color};stroke-width:2`);
-    text.setAttribute("x", (a.x - (a.x - b.x) / 2).toString());
-    text.setAttribute("y", (a.y - (a.y - b.y) / 2).toString());
-    if (label) {
-      text.innerHTML = label;
-    }
-  });
-};
-
-// components/DraggableComponent/collision/directional/index.ts
-var distanceChange = "increasing";
-var directionalCollision = (input, previous) => {
-  var _a;
-  const { dragOperation, droppable } = input;
-  const { shape: dropShape } = droppable;
-  const { position } = dragOperation;
-  const dragShape = (_a = dragOperation.shape) == null ? void 0 : _a.current;
-  if (!dragShape || !dropShape) return null;
-  const dropCenter = dropShape.center;
-  const distanceToPrevious = Math.sqrt(
-    Math.pow(dropCenter.x - previous.x, 2) + Math.pow(dropCenter.y - previous.y, 2)
-  );
-  const distanceToCurrent = Math.sqrt(
-    Math.pow(dropCenter.x - position.current.x, 2) + Math.pow(dropCenter.y - position.current.y, 2)
-  );
-  distanceChange = distanceToCurrent === distanceToPrevious ? distanceChange : distanceToCurrent < distanceToPrevious ? "decreasing" : "increasing";
-  collisionDebug(
-    dragShape.center,
-    dropCenter,
-    droppable.id.toString(),
-    "rebeccapurple"
-  );
-  if (distanceChange === "decreasing") {
-    return {
-      id: droppable.id,
-      value: 1,
-      type: import_abstract.CollisionType.Collision
-    };
-  }
-  return null;
-};
-
-// components/DraggableComponent/collision/dynamic/get-direction.ts
-init_react_import();
-var getDirection = (dragAxis, delta) => {
-  if (dragAxis === "dynamic") {
-    if (Math.abs(delta.y) > Math.abs(delta.x)) {
-      return delta.y === 0 ? null : delta.y > 0 ? "down" : "up";
-    } else {
-      return delta.x === 0 ? null : delta.x > 0 ? "right" : "left";
-    }
-  } else if (dragAxis === "x") {
-    return delta.x === 0 ? null : delta.x > 0 ? "right" : "left";
-  }
-  return delta.y === 0 ? null : delta.y > 0 ? "down" : "up";
-};
-
-// components/DraggableComponent/collision/dynamic/get-midpoint-impact.ts
-init_react_import();
-var getMidpointImpact = (dragShape, dropShape, direction, offsetMultiplier = 0) => {
-  const dragRect = dragShape.boundingRectangle;
-  const dropCenter = dropShape.center;
-  if (direction === "down") {
-    const offset2 = offsetMultiplier * dropShape.boundingRectangle.height;
-    return dragRect.bottom >= dropCenter.y + offset2;
-  } else if (direction === "up") {
-    const offset2 = offsetMultiplier * dropShape.boundingRectangle.height;
-    return dragRect.top < dropCenter.y - offset2;
-  } else if (direction === "left") {
-    const offset2 = offsetMultiplier * dropShape.boundingRectangle.width;
-    return dropCenter.x - offset2 >= dragRect.left;
-  }
-  const offset = offsetMultiplier * dropShape.boundingRectangle.width;
-  return dragRect.right - offset >= dropCenter.x;
-};
-
-// components/DraggableComponent/collision/dynamic/track-movement-interval.ts
-init_react_import();
-var import_geometry = require("@dnd-kit/geometry");
-var INTERVAL_SENSITIVITY = 10;
-var intervalCache = {
-  current: { x: 0, y: 0 },
-  delta: { x: 0, y: 0 },
-  previous: { x: 0, y: 0 },
-  direction: null
-};
-var trackMovementInterval = (point, dragAxis = "dynamic") => {
-  intervalCache.current = point;
-  intervalCache.delta = {
-    x: point.x - intervalCache.previous.x,
-    y: point.y - intervalCache.previous.y
-  };
-  intervalCache.direction = getDirection(dragAxis, intervalCache.delta) || intervalCache.direction;
-  if (Math.abs(intervalCache.delta.x) > INTERVAL_SENSITIVITY || Math.abs(intervalCache.delta.y) > INTERVAL_SENSITIVITY) {
-    intervalCache.previous = import_geometry.Point.from(point);
-  }
-  return intervalCache;
-};
-
-// ../../node_modules/@dnd-kit/collision/dist/index.js
-init_react_import();
-var import_abstract2 = require("@dnd-kit/abstract");
-var import_geometry2 = require("@dnd-kit/geometry");
-var import_abstract3 = require("@dnd-kit/abstract");
-var import_geometry3 = require("@dnd-kit/geometry");
-var import_abstract4 = require("@dnd-kit/abstract");
-var import_geometry4 = require("@dnd-kit/geometry");
-var import_abstract5 = require("@dnd-kit/abstract");
-var import_geometry5 = require("@dnd-kit/geometry");
-var import_abstract6 = require("@dnd-kit/abstract");
-var import_geometry6 = require("@dnd-kit/geometry");
-var import_abstract7 = require("@dnd-kit/abstract");
-var import_geometry7 = require("@dnd-kit/geometry");
-var pointerIntersection = ({
-  dragOperation,
-  droppable
-}) => {
-  const pointerCoordinates = dragOperation.position.current;
-  if (!pointerCoordinates) {
-    return null;
-  }
-  const { id } = droppable;
-  if (!droppable.shape) {
-    return null;
-  }
-  if (droppable.shape.containsPoint(pointerCoordinates)) {
-    const distance = import_geometry2.Point.distance(droppable.shape.center, pointerCoordinates);
-    return {
-      id,
-      value: 1 / distance,
-      type: import_abstract2.CollisionType.PointerIntersection,
-      priority: import_abstract2.CollisionPriority.High
-    };
-  }
-  return null;
-};
-var closestCorners = (input) => {
-  const { dragOperation, droppable } = input;
-  const { shape, position } = dragOperation;
-  if (!droppable.shape) {
-    return null;
-  }
-  const { left, top, right, bottom } = droppable.shape.boundingRectangle;
-  const corners = [
-    {
-      x: left,
-      y: top
-    },
-    {
-      x: right,
-      y: top
-    },
-    {
-      x: left,
-      y: bottom
-    },
-    {
-      x: right,
-      y: bottom
-    }
-  ];
-  const distance = corners.reduce(
-    (acc, corner) => {
-      var _a;
-      return acc + import_geometry4.Point.distance(
-        import_geometry4.Point.from(corner),
-        (_a = shape == null ? void 0 : shape.current.center) != null ? _a : position.current
-      );
-    },
-    0
-  );
-  const value = distance / 4;
-  return {
-    id: droppable.id,
-    value: 1 / value,
-    type: import_abstract4.CollisionType.Collision,
-    priority: import_abstract4.CollisionPriority.Normal
-  };
-};
-
-// components/DraggableComponent/collision/dynamic/index.ts
-var flushNext = "";
-var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input) => {
-  var _a, _b, _c, _d, _e;
-  const { dragOperation, droppable } = input;
-  const { position } = dragOperation;
-  const dragShape = (_a = dragOperation.shape) == null ? void 0 : _a.current;
-  const { shape: dropShape } = droppable;
-  if (!dragShape || !dropShape) {
-    return null;
-  }
-  const { center: dragCenter } = dragShape;
-  const interval = trackMovementInterval(position.current, dragAxis);
-  dragOperation.data = __spreadProps(__spreadValues({}, dragOperation.data), {
-    direction: interval.direction
-  });
-  const collisionMap = dragOperation.data.collisionMap || {};
-  dragOperation.data.collisionMap = collisionMap;
-  collisionMap[droppable.id] = {
-    direction: interval.direction
-  };
-  const { center: dropCenter } = dropShape;
-  const overMidpoint = getMidpointImpact(
-    dragShape,
-    dropShape,
-    interval.direction,
-    midpointOffset
-  );
-  if (((_b = dragOperation.source) == null ? void 0 : _b.id) === droppable.id) {
-    const collision = directionalCollision(input, interval.previous);
-    collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "yellow");
-    if (collision) {
-      return __spreadProps(__spreadValues({}, collision), {
-        priority: import_abstract8.CollisionPriority.Highest
-      });
-    }
-  }
-  const intersectionArea = dragShape.intersectionArea(dropShape);
-  const intersectionRatio = intersectionArea / dropShape.area;
-  if (intersectionArea && overMidpoint) {
-    collisionDebug(
-      dragCenter,
-      dropCenter,
-      droppable.id.toString(),
-      "green",
-      interval.direction
-    );
-    const collision = {
-      id: droppable.id,
-      value: intersectionRatio,
-      priority: import_abstract8.CollisionPriority.High,
-      type: import_abstract8.CollisionType.Collision
-    };
-    const shouldFlushId = flushNext === droppable.id;
-    flushNext = "";
-    return __spreadProps(__spreadValues({}, collision), { id: shouldFlushId ? "flush" : collision.id });
-  }
-  if (((_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) {
-      const fallbackCollision = closestCorners(input);
-      if (fallbackCollision) {
-        const direction = getDirection(dragAxis, {
-          x: dragShape.center.x - (((_d = droppable.shape) == null ? void 0 : _d.center.x) || 0),
-          y: dragShape.center.y - (((_e = droppable.shape) == null ? void 0 : _e.center.y) || 0)
-        });
-        collisionMap[droppable.id] = {
-          direction
-        };
-        if (intersectionArea) {
-          collisionDebug(
-            dragCenter,
-            dropCenter,
-            droppable.id.toString(),
-            "red",
-            direction || ""
-          );
-          flushNext = droppable.id;
-          return __spreadProps(__spreadValues({}, fallbackCollision), {
-            priority: import_abstract8.CollisionPriority.Low
-          });
-        }
-        collisionDebug(
-          dragCenter,
-          dropCenter,
-          droppable.id.toString(),
-          "orange",
-          direction || ""
-        );
-        return __spreadProps(__spreadValues({}, fallbackCollision), { priority: import_abstract8.CollisionPriority.Lowest });
-      }
-    }
-  }
-  collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "hotpink");
-  delete collisionMap[droppable.id];
-  return null;
-};
-
-// lib/dnd-kit/safe.ts
-init_react_import();
-var import_react15 = require("@dnd-kit/react");
-var import_sortable = require("@dnd-kit/react/sortable");
-function useDroppableSafe(input) {
-  if (typeof window === "undefined") {
-    return { ref: () => {
-    } };
-  }
-  return (0, import_react15.useDroppable)(input);
-}
-function useDraggableSafe(input) {
-  if (typeof window === "undefined") {
-    return { ref: () => {
-    } };
-  }
-  return (0, import_react15.useDraggable)(input);
-}
-function useSortableSafe(input) {
-  if (typeof window === "undefined") {
-    return { ref: () => {
-    }, status: "idle" };
-  }
-  return (0, import_sortable.useSortable)(input);
-}
-
-// lib/get-deep-scroll-position.ts
+// lib/is-ios.ts
 init_react_import();
-function getDeepScrollPosition(element) {
-  let totalScroll = {
-    x: 0,
-    y: 0
-  };
-  let current = element;
-  while (current && current !== document.documentElement) {
-    const parent = current.parentElement;
-    if (parent) {
-      totalScroll.x += parent.scrollLeft;
-      totalScroll.y += parent.scrollTop;
-    }
-    current = parent;
-  }
-  return totalScroll;
-}
+var isIos = () => [
+  "iPad Simulator",
+  "iPhone Simulator",
+  "iPod Simulator",
+  "iPad",
+  "iPhone",
+  "iPod"
+].includes(navigator.platform) || // iPad on iOS 13 detection
+navigator.userAgent.includes("Mac") && "ontouchend" in document;
 
 // components/DraggableComponent/index.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var getClassName16 = get_class_name_factory_default("DraggableComponent", styles_module_default11);
-var DEBUG2 = false;
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var getClassName17 = get_class_name_factory_default("DraggableComponent", styles_module_default11);
 var space = 8;
 var actionsOverlayTop = space * 6.5;
 var actionsTop = -(actionsOverlayTop - 8);
-var actionsSide = space;
+var actionsRight = space;
 var DefaultActionBar = ({
   label,
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ActionBar, { label, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ActionBar.Group, { children }) });
+}) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ActionBar, { label, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ActionBar.Group, { children }) });
 var DraggableComponent = ({
   children,
-  depth,
-  componentType,
   id,
   index,
-  zoneCompound,
   isLoading = false,
   isSelected = false,
+  onClick = () => null,
+  onMount = () => null,
+  onMouseDown = () => null,
+  onMouseUp = () => null,
+  onMouseOver = () => null,
+  onMouseOut = () => null,
+  onDelete = () => null,
+  onDuplicate = () => null,
   debug,
   label,
-  isEnabled,
-  autoDragAxis,
-  userDragAxis,
-  inDroppableZone = true
+  isLocked = false,
+  isDragDisabled,
+  forceHover = false,
+  indicativeHover = false,
+  style
 }) => {
-  const {
-    zoomConfig,
-    overrides,
-    selectedItem,
-    getPermissions,
-    dispatch,
-    iframe,
-    state
-  } = useAppContext();
+  const { zoomConfig, status, overrides, selectedItem, getPermissions } = useAppContext();
   const isModifierHeld = useModifierHeld("Alt");
-  const ctx = (0, import_react16.useContext)(dropZoneContext);
-  const [localZones, setLocalZones] = (0, import_react16.useState)({});
-  const registerLocalZone = (0, import_react16.useCallback)(
-    (zoneCompound2, active) => {
-      var _a;
-      (_a = ctx == null ? void 0 : ctx.registerLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2, active);
-      setLocalZones((obj) => __spreadProps(__spreadValues({}, obj), {
-        [zoneCompound2]: active
-      }));
-    },
-    [setLocalZones]
-  );
-  const containsActiveZone = Object.values(localZones).filter(Boolean).length > 0;
-  const { path = [] } = ctx || {};
-  const [canDrag, setCanDrag] = (0, import_react16.useState)(false);
-  (0, import_react16.useEffect)(() => {
-    var _a;
-    const item = getItem({ index, zone: zoneCompound }, state.data);
-    if (item) {
-      const perms = getPermissions({
-        item
-      });
-      setCanDrag((_a = perms.drag) != null ? _a : true);
-    }
-  }, [state, index, zoneCompound, getPermissions]);
-  const userIsDragging = !!(ctx == null ? void 0 : ctx.draggedItem);
-  const canCollide = canDrag || userIsDragging;
-  const disabled = !isEnabled || !canCollide;
-  const [dragAxis, setDragAxis] = (0, import_react16.useState)(userDragAxis || autoDragAxis);
-  const { ref: sortableRef, status } = useSortableSafe({
-    id,
-    index,
-    group: zoneCompound,
-    type: "component",
-    data: {
-      zone: zoneCompound,
-      index,
-      componentType,
-      containsActiveZone,
-      depth,
-      path,
-      inDroppableZone
-    },
-    collisionPriority: isEnabled ? depth : 0,
-    collisionDetector: createDynamicCollisionDetector(dragAxis),
-    disabled,
-    // "Out of the way" transition from react-beautiful-dnd
-    transition: {
-      duration: 200,
-      easing: "cubic-bezier(0.2, 0, 0, 1)"
-    }
-  });
-  const thisIsDragging = status === "dragging";
-  const ref = (0, import_react16.useRef)();
-  const refSetter = (0, import_react16.useCallback)(
-    (el) => {
-      sortableRef(el);
-      if (el) {
-        ref.current = el;
-      }
-    },
-    [sortableRef]
-  );
-  const [portalEl, setPortalEl] = (0, import_react16.useState)();
-  (0, import_react16.useEffect)(() => {
-    var _a, _b, _c;
-    setPortalEl(
-      iframe.enabled ? (_a = ref.current) == null ? void 0 : _a.ownerDocument.body : (_c = (_b = ref.current) == null ? void 0 : _b.closest("[data-puck-preview]")) != null ? _c : document.body
-    );
-  }, [iframe.enabled, ref.current]);
-  const getStyle = (0, import_react16.useCallback)(() => {
-    var _a, _b, _c;
-    if (!ref.current) return;
-    const rect = ref.current.getBoundingClientRect();
-    const deepScrollPosition = getDeepScrollPosition(ref.current);
-    const portalContainerEl = iframe.enabled ? null : (_a = ref.current) == null ? void 0 : _a.closest("[data-puck-preview]");
-    const portalContainerRect = portalContainerEl == null ? void 0 : portalContainerEl.getBoundingClientRect();
-    const portalScroll = portalContainerEl ? getDeepScrollPosition(portalContainerEl) : { x: 0, y: 0 };
-    const scroll = {
-      x: deepScrollPosition.x - portalScroll.x - ((_b = portalContainerRect == null ? void 0 : portalContainerRect.left) != null ? _b : 0),
-      y: deepScrollPosition.y - portalScroll.y - ((_c = portalContainerRect == null ? void 0 : portalContainerRect.top) != null ? _c : 0)
-    };
-    const style2 = {
-      left: `${rect.left + scroll.x}px`,
-      top: `${rect.top + scroll.y}px`,
-      height: `${rect.height}px`,
-      width: `${rect.width}px`
-    };
-    return style2;
-  }, [ref.current]);
-  const [style, setStyle] = (0, import_react16.useState)();
-  const sync = (0, import_react16.useCallback)(() => {
-    setStyle(getStyle());
-  }, [ref.current, iframe]);
-  (0, import_react16.useEffect)(() => {
-    if (ref.current) {
-      const observer = new ResizeObserver(sync);
-      observer.observe(ref.current);
-      return () => {
-        observer.disconnect();
-      };
+  const El = status !== "LOADING" ? import_dnd4.Draggable : DefaultDraggable;
+  (0, import_react18.useEffect)(onMount, []);
+  const [disableSecondaryAnimation, setDisableSecondaryAnimation] = (0, import_react18.useState)(false);
+  (0, import_react18.useEffect)(() => {
+    if (isIos()) {
+      setDisableSecondaryAnimation(true);
     }
-  }, [ref.current]);
-  (0, import_react16.useEffect)(() => {
-    ctx == null ? void 0 : ctx.registerPath({
-      index,
-      zone: zoneCompound
-    });
-  }, [isSelected]);
-  const CustomActionBar = (0, import_react16.useMemo)(
+  }, []);
+  const CustomActionBar = (0, import_react18.useMemo)(
     () => overrides.actionBar || DefaultActionBar,
     [overrides.actionBar]
   );
   const permissions = getPermissions({
     item: selectedItem
   });
-  const onClick = (0, import_react16.useCallback)(
-    (e) => {
-      e.stopPropagation();
-      dispatch({
-        type: "setUi",
-        ui: {
-          itemSelector: { index, zone: zoneCompound }
-        }
-      });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    El,
+    {
+      draggableId: id,
+      index,
+      isDragDisabled,
+      disableSecondaryAnimation,
+      children: (provided, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        "div",
+        __spreadProps(__spreadValues(__spreadValues({
+          ref: provided.innerRef
+        }, provided.draggableProps), provided.dragHandleProps), {
+          className: getClassName17({
+            isSelected,
+            isModifierHeld,
+            isDragging: snapshot.isDragging,
+            isLocked,
+            forceHover,
+            indicativeHover
+          }),
+          style: __spreadProps(__spreadValues(__spreadValues({}, style), provided.draggableProps.style), {
+            cursor: isModifierHeld || isDragDisabled ? "pointer" : "grab"
+          }),
+          onMouseOver,
+          onMouseOut,
+          onMouseDown,
+          onMouseUp,
+          onClick,
+          children: [
+            debug,
+            isLoading && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: getClassName17("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loader, {}) }),
+            isSelected && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              "div",
+              {
+                className: getClassName17("actionsOverlay"),
+                style: {
+                  top: actionsOverlayTop / zoomConfig.zoom
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  "div",
+                  {
+                    className: getClassName17("actions"),
+                    style: {
+                      transform: `scale(${1 / zoomConfig.zoom}`,
+                      top: actionsTop / zoomConfig.zoom,
+                      right: actionsRight / zoomConfig.zoom
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(CustomActionBar, { label, children: [
+                      permissions.duplicate && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Copy, { size: 16 }) }),
+                      permissions.delete && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Trash, { size: 16 }) })
+                    ] })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: getClassName17("overlay") }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: getClassName17("contents"), children })
+          ]
+        })
+      )
     },
-    [index, zoneCompound, id]
-  );
-  const onDuplicate = (0, import_react16.useCallback)(
-    (e) => {
-      e.stopPropagation();
-      dispatch({
-        type: "duplicate",
-        sourceIndex: index,
-        sourceZone: zoneCompound
-      });
-    },
-    [index, zoneCompound]
-  );
-  const onDelete = (0, import_react16.useCallback)(
-    (e) => {
-      e.stopPropagation();
-      dispatch({
-        type: "remove",
-        index,
-        zone: zoneCompound
-      });
-    },
-    [index, zoneCompound]
-  );
-  const [hover, setHover] = (0, import_react16.useState)(false);
-  const indicativeHover = (ctx == null ? void 0 : ctx.hoveringComponent) === id;
-  (0, import_react16.useEffect)(() => {
-    if (!ref.current) {
-      return;
-    }
-    const el = ref.current;
-    const _onMouseOver = (e) => {
-      if (userIsDragging) {
-        if (thisIsDragging) {
-          setHover(true);
-        } else {
-          setHover(false);
-        }
-      } else {
-        setHover(true);
-      }
-      e.stopPropagation();
-    };
-    const _onMouseOut = (e) => {
-      e.stopPropagation();
-      setHover(false);
-    };
-    el.setAttribute("data-puck-component", id);
-    el.style.position = "relative";
-    el.addEventListener("click", onClick);
-    el.addEventListener("mouseover", _onMouseOver);
-    el.addEventListener("mouseout", _onMouseOut);
-    if (thisIsDragging) {
-      el.setAttribute("data-puck-dragging", "");
-    } else {
-      el.removeAttribute("data-puck-dragging");
-    }
-    return () => {
-      el.removeAttribute("data-puck-component");
-      el.removeEventListener("click", onClick);
-      el.removeEventListener("mouseover", _onMouseOver);
-      el.removeEventListener("mouseout", _onMouseOut);
-      el.removeAttribute("data-puck-dragging");
-    };
-  }, [
-    ref,
-    onClick,
-    containsActiveZone,
-    zoneCompound,
-    id,
-    userIsDragging,
-    thisIsDragging,
-    inDroppableZone
-  ]);
-  (0, import_react16.useEffect)(() => {
-    if (ref.current && disabled) {
-      ref.current.setAttribute("data-puck-disabled", "");
-      return () => {
-        var _a;
-        (_a = ref.current) == null ? void 0 : _a.removeAttribute("data-puck-disabled");
-      };
-    }
-  }, [disabled, ref]);
-  const [isVisible, setIsVisible] = (0, import_react16.useState)(false);
-  (0, import_react16.useEffect)(() => {
-    sync();
-    if ((isSelected || hover || indicativeHover) && !userIsDragging) {
-      setIsVisible(true);
-    } else {
-      setIsVisible(false);
-    }
-  }, [isSelected, hover, indicativeHover, iframe, state.data, userIsDragging]);
-  const syncActionsPosition = (0, import_react16.useCallback)(
-    (el) => {
-      if (el) {
-        const view = el.ownerDocument.defaultView;
-        if (view) {
-          const rect = el.getBoundingClientRect();
-          const diffLeft = rect.x;
-          const exceedsBoundsLeft = diffLeft < 0;
-          if (exceedsBoundsLeft) {
-            el.style.transformOrigin = "left top";
-            el.style.left = "0px";
-          } else {
-            el.style.transformOrigin = "right top";
-            el.style.left = "";
-          }
-        }
-      }
-    },
-    [zoomConfig]
-  );
-  (0, import_react16.useEffect)(() => {
-    if (userDragAxis) {
-      setDragAxis(userDragAxis);
-      return;
-    }
-    if (ref.current) {
-      const computedStyle = window.getComputedStyle(ref.current);
-      if (computedStyle.display === "inline" || computedStyle.display === "inline-block") {
-        setDragAxis("x");
-        return;
-      }
-    }
-    setDragAxis(autoDragAxis);
-  }, [ref, userDragAxis, autoDragAxis]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-    DropZoneProvider,
-    {
-      value: __spreadProps(__spreadValues({}, ctx), {
-        areaId: id,
-        zoneCompound,
-        index,
-        depth: depth + 1,
-        registerLocalZone,
-        path: [...path, id]
-      }),
-      children: [
-        isVisible && (0, import_react_dom2.createPortal)(
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-            "div",
-            {
-              className: getClassName16({
-                isSelected,
-                isDragging: thisIsDragging,
-                isModifierHeld,
-                hover: hover || indicativeHover
-              }),
-              style: __spreadValues({}, style),
-              children: [
-                debug,
-                isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: getClassName16("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loader, {}) }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                  "div",
-                  {
-                    className: getClassName16("actionsOverlay"),
-                    style: {
-                      top: actionsOverlayTop / zoomConfig.zoom
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                      "div",
-                      {
-                        className: getClassName16("actions"),
-                        style: {
-                          transform: `scale(${1 / zoomConfig.zoom}`,
-                          top: actionsTop / zoomConfig.zoom,
-                          right: 0,
-                          paddingLeft: actionsSide,
-                          paddingRight: actionsSide
-                        },
-                        ref: syncActionsPosition,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(CustomActionBar, { label: DEBUG2 ? id : label, children: [
-                          permissions.duplicate && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Copy, { size: 16 }) }),
-                          permissions.delete && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Trash, { size: 16 }) })
-                        ] })
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: getClassName16("overlay") })
-              ]
-            }
-          ),
-          portalEl || document.body
-        ),
-        children(refSetter)
-      ]
-    }
+    id
   );
 };
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css#css-module
 init_react_import();
-var styles_module_default12 = { "DropZone": "_DropZone_74ebh_1", "DropZone--hasChildren": "_DropZone--hasChildren_74ebh_12", "DropZone--userIsDragging": "_DropZone--userIsDragging_74ebh_20", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_74ebh_29", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_74ebh_30", "DropZone--isRootZone": "_DropZone--isRootZone_74ebh_30", "DropZone--isDestination": "_DropZone--isDestination_74ebh_40", "DropZone-item": "_DropZone-item_74ebh_52", "DropZone-hitbox": "_DropZone-hitbox_74ebh_56", "DropZone--isEnabled": "_DropZone--isEnabled_74ebh_64" };
+var styles_module_default12 = { "DropZone": "_DropZone_djoti_1", "DropZone-content": "_DropZone-content_djoti_10", "DropZone--userIsDragging": "_DropZone--userIsDragging_djoti_15", "DropZone--draggingOverArea": "_DropZone--draggingOverArea_djoti_19", "DropZone--draggingNewComponent": "_DropZone--draggingNewComponent_djoti_20", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_djoti_26", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_djoti_27", "DropZone--isDisabled": "_DropZone--isDisabled_djoti_28", "DropZone--isRootZone": "_DropZone--isRootZone_djoti_29", "DropZone--hasChildren": "_DropZone--hasChildren_djoti_30", "DropZone--isDestination": "_DropZone--isDestination_djoti_40", "DropZone-item": "_DropZone-item_djoti_52", "DropZone-hitbox": "_DropZone-hitbox_djoti_56" };
 
 // components/DropZone/context.tsx
 init_react_import();
-var import_react17 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var dropZoneContext = (0, import_react17.createContext)(null);
+var import_react19 = require("react");
+var import_use_debounce2 = require("use-debounce");
+
+// lib/get-zone-id.ts
+init_react_import();
+var getZoneId = (zoneCompound) => {
+  if (!zoneCompound) {
+    return [];
+  }
+  if (zoneCompound && zoneCompound.indexOf(":") > -1) {
+    return zoneCompound.split(":");
+  }
+  return [rootDroppableId, zoneCompound];
+};
+
+// components/DropZone/context.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var dropZoneContext = (0, import_react19.createContext)(null);
 var DropZoneProvider = ({
   children,
   value
 }) => {
-  const [hoveringComponent, setHoveringComponent] = (0, import_react17.useState)();
-  const [areasWithZones, setAreasWithZones] = (0, import_react17.useState)(
+  const [hoveringArea, setHoveringArea] = (0, import_react19.useState)(null);
+  const [hoveringZone, setHoveringZone] = (0, import_react19.useState)(
+    rootDroppableId
+  );
+  const [hoveringComponent, setHoveringComponent] = (0, import_react19.useState)();
+  const [hoveringAreaDb] = (0, import_use_debounce2.useDebounce)(hoveringArea, 75, { leading: false });
+  const [areasWithZones, setAreasWithZones] = (0, import_react19.useState)(
     {}
   );
-  const [activeZones, setActiveZones] = (0, import_react17.useState)({});
+  const [activeZones, setActiveZones] = (0, import_react19.useState)({});
   const { dispatch = null } = value ? value : {};
-  const registerZoneArea = (0, import_react17.useCallback)(
+  const registerZoneArea = (0, import_react19.useCallback)(
     (area) => {
       setAreasWithZones((latest) => __spreadProps(__spreadValues({}, latest), { [area]: true }));
     },
     [setAreasWithZones]
   );
-  const registerZone = (0, import_react17.useCallback)(
+  const registerZone = (0, import_react19.useCallback)(
     (zoneCompound) => {
       if (!dispatch) {
         return;
@@ -3235,7 +2772,7 @@ var DropZoneProvider = ({
     },
     [setActiveZones, dispatch]
   );
-  const unregisterZone = (0, import_react17.useCallback)(
+  const unregisterZone = (0, import_react19.useCallback)(
     (zoneCompound) => {
       if (!dispatch) {
         return;
@@ -3250,76 +2787,89 @@ var DropZoneProvider = ({
     },
     [setActiveZones, dispatch]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children: value && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  const [pathData, setPathData] = (0, import_react19.useState)();
+  const registerPath = (0, import_react19.useCallback)(
+    (selector) => {
+      if (!(value == null ? void 0 : value.data)) {
+        return;
+      }
+      const item = getItem(selector, value.data);
+      if (!item) {
+        return;
+      }
+      const [area] = getZoneId(selector.zone);
+      setPathData((latestPathData = {}) => {
+        const parentPathData = latestPathData[area] || { path: [] };
+        return __spreadProps(__spreadValues({}, latestPathData), {
+          [item.props.id]: {
+            path: [
+              ...parentPathData.path,
+              ...selector.zone ? [selector.zone] : []
+            ],
+            label: item.type
+          }
+        });
+      });
+    },
+    [value, setPathData]
+  );
+  const [zoneWillDrag, setZoneWillDrag] = (0, import_react19.useState)("");
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children: value && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     dropZoneContext.Provider,
     {
       value: __spreadValues({
+        hoveringArea: value.draggedItem ? hoveringAreaDb : hoveringArea,
+        setHoveringArea,
+        hoveringZone,
+        setHoveringZone,
         hoveringComponent,
         setHoveringComponent,
         registerZoneArea,
         areasWithZones,
         registerZone,
         unregisterZone,
-        activeZones
+        activeZones,
+        registerPath,
+        pathData,
+        zoneWillDrag,
+        setZoneWillDrag
       }, value),
       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/index.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var getClassName17 = get_class_name_factory_default("DropZone", styles_module_default12);
-var DEBUG3 = false;
-var GRID_DRAG_AXIS = "dynamic";
-var FLEX_ROW_DRAG_AXIS = "x";
-var DEFAULT_DRAG_AXIS = "y";
-function DropZoneEdit({
-  zone,
-  allow,
-  disallow,
-  style,
-  className,
-  minEmptyHeight = 128,
-  dragRef,
-  collisionAxis
-}) {
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var getClassName18 = get_class_name_factory_default("DropZone", styles_module_default12);
+function DropZoneEdit({ zone, allow, disallow, style }) {
+  var _a;
   const appContext2 = useAppContext();
-  const ctx = (0, import_react18.useContext)(dropZoneContext);
+  const ctx = (0, import_react20.useContext)(dropZoneContext);
   const {
     // These all need setting via context
     data,
+    dispatch = () => null,
     config,
+    itemSelector,
+    setItemSelector = () => null,
     areaId,
     draggedItem,
+    placeholderStyle,
     registerZoneArea,
-    depth,
-    registerLocalZone,
-    deepestZone = rootDroppableId,
-    deepestArea,
-    nextDeepestArea,
-    path = []
-  } = ctx;
-  const { itemSelector } = appContext2.state.ui;
+    areasWithZones,
+    hoveringComponent,
+    zoneWillDrag,
+    setZoneWillDrag = () => null
+  } = ctx || {};
   let content = data.content || [];
   let zoneCompound = rootDroppableId;
-  (0, import_react18.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (areaId && registerZoneArea) {
       registerZoneArea(areaId);
     }
   }, [areaId]);
-  (0, import_react18.useEffect)(() => {
-    if (registerLocalZone) {
-      registerLocalZone(zoneCompound, isDroppableTarget());
-    }
+  (0, import_react20.useEffect)(() => {
     if (ctx == null ? void 0 : ctx.registerZone) {
       ctx == null ? void 0 : ctx.registerZone(zoneCompound);
     }
@@ -3335,199 +2885,247 @@ function DropZoneEdit({
       content = setupZone(data, zoneCompound).zones[zoneCompound];
     }
   }
-  const ref = (0, import_react18.useRef)();
-  const isDroppableTarget = (0, import_react18.useCallback)(() => {
-    if (!draggedItem) {
-      return true;
+  const isRootZone = zoneCompound === rootDroppableId || zone === rootDroppableId || areaId === "root";
+  const draggedSourceId = draggedItem && draggedItem.source.droppableId;
+  const draggedDestinationId = draggedItem && ((_a = draggedItem.destination) == null ? void 0 : _a.droppableId);
+  const [zoneArea] = getZoneId(zoneCompound);
+  const [draggedSourceArea] = getZoneId(draggedSourceId);
+  const userWillDrag = zoneWillDrag === zone;
+  const userIsDragging = !!draggedItem;
+  const draggingOverArea = userIsDragging && zoneArea === draggedSourceArea;
+  const draggingNewComponent = draggedSourceId == null ? void 0 : draggedSourceId.startsWith("component-list");
+  if (!(ctx == null ? void 0 : ctx.config) || !ctx.setHoveringArea || !ctx.setHoveringZone || !ctx.setHoveringComponent || !ctx.setItemSelector || !ctx.registerPath || !ctx.dispatch) {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: "DropZone requires context to work." });
+  }
+  const {
+    hoveringArea = "root",
+    setHoveringArea,
+    hoveringZone,
+    setHoveringZone,
+    setHoveringComponent
+  } = ctx;
+  const hoveringOverArea = hoveringArea ? hoveringArea === zoneArea : isRootZone;
+  const hoveringOverZone = hoveringZone === zoneCompound;
+  let isEnabled = userWillDrag;
+  if (userIsDragging) {
+    if (draggingNewComponent) {
+      if (appContext2.safariFallbackMode) {
+        isEnabled = true;
+      } else {
+        isEnabled = hoveringOverArea;
+      }
+    } else {
+      isEnabled = draggingOverArea && hoveringOverZone;
     }
-    const { componentType } = draggedItem.data;
+  }
+  if (isEnabled && userIsDragging && (allow || disallow)) {
+    const [_, componentType] = draggedItem.draggableId.split("::");
     if (disallow) {
       const defaultedAllow = allow || [];
       const filteredDisallow = (disallow || []).filter(
         (item) => defaultedAllow.indexOf(item) === -1
       );
       if (filteredDisallow.indexOf(componentType) !== -1) {
-        return false;
+        isEnabled = false;
       }
     } else if (allow) {
       if (allow.indexOf(componentType) === -1) {
-        return false;
+        isEnabled = false;
       }
     }
-    return true;
-  }, [draggedItem]);
-  (0, import_react18.useEffect)(() => {
-    if (registerLocalZone) {
-      registerLocalZone(zoneCompound, isDroppableTarget());
-    }
-  }, [draggedItem, zoneCompound]);
-  const isRootZone = zoneCompound === rootDroppableId || zone === rootDroppableId || areaId === "root";
-  const hoveringOverArea = nextDeepestArea ? nextDeepestArea === areaId : isRootZone;
-  const userIsDragging = !!draggedItem;
-  let isEnabled = true;
-  if (draggedItem) {
-    isEnabled = deepestZone === zoneCompound;
   }
-  if (isEnabled) {
-    isEnabled = isDroppableTarget();
-  }
-  const preview = (0, import_react18.useContext)(previewContext);
-  const previewInZone = (preview == null ? void 0 : preview.zone) === zoneCompound;
-  const contentWithPreview = (0, import_react18.useMemo)(() => {
-    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);
-  const droppableConfig = {
-    id: zoneCompound,
-    collisionPriority: isEnabled ? depth : 0,
-    disabled: !isDropEnabled,
-    collisionDetector: pointerIntersection,
-    type: "dropzone",
-    data: {
-      areaId,
-      depth,
-      isDroppableTarget: isDroppableTarget(),
-      path
-    }
-  };
-  const { ref: dropRef } = useDroppableSafe(droppableConfig);
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
-  const isAreaSelected = selectedItem && areaId === selectedItem.props.id;
-  const [dragAxis, setDragAxis] = (0, import_react18.useState)(
-    collisionAxis || DEFAULT_DRAG_AXIS
-  );
-  const calculateDragAxis = (0, import_react18.useCallback)(() => {
-    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]);
-  (0, import_react18.useEffect)(calculateDragAxis, [appContext2.status, collisionAxis]);
-  (0, import_react18.useEffect)(() => {
-    const onViewportChange = () => {
-      calculateDragAxis();
-    };
-    window.addEventListener("viewportchange", onViewportChange);
-    return () => {
-      window.removeEventListener("viewportchange", onViewportChange);
-    };
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  const isAreaSelected = selectedItem && zoneArea === selectedItem.props.id;
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "div",
     {
-      className: `${getClassName17({
+      className: getClassName18({
         isRootZone,
         userIsDragging,
+        draggingOverArea,
         hoveringOverArea,
-        isEnabled,
+        draggingNewComponent,
+        isDestination: draggedDestinationId === zoneCompound,
+        isDisabled: !isEnabled,
         isAreaSelected,
         hasChildren: content.length > 0
-      })}${className ? ` ${className}` : ""}`,
-      ref: (node) => {
-        ref.current = node;
-        dropRef(node);
-        if (dragRef) dragRef(node);
-      },
-      style: __spreadProps(__spreadValues({}, style), {
-        "--min-empty-height": `${minEmptyHeight}px`
       }),
-      children: [
-        isRootZone && DEBUG3 && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { children: deepestZone || rootDroppableId }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("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
-          };
-          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__ */ (0, import_jsx_runtime23.jsxs)("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__ */ (0, import_jsx_runtime23.jsx)(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__ */ (0, import_jsx_runtime23.jsx)(
-            DropZoneProvider,
-            {
-              value: __spreadProps(__spreadValues({}, ctx), { path: [...path, zoneCompound] }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                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: isDroppableTarget(),
-                  children: (dragRef2) => (componentConfig == null ? void 0 : componentConfig.inline) ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                    Render2,
-                    __spreadProps(__spreadValues({}, defaultedProps), {
-                      puck: __spreadProps(__spreadValues({}, defaultedProps.puck), {
-                        dragRef: dragRef2
+      onMouseUp: () => {
+        setZoneWillDrag("");
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        Droppable,
+        {
+          droppableId: zoneCompound,
+          direction: "vertical",
+          isDropDisabled: !isEnabled,
+          children: (provided, snapshot) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+              "div",
+              __spreadProps(__spreadValues({}, (provided || { droppableProps: {} }).droppableProps), {
+                className: getClassName18("content"),
+                ref: provided == null ? void 0 : provided.innerRef,
+                style,
+                id: zoneCompound,
+                onMouseOver: (e) => {
+                  e.stopPropagation();
+                  setHoveringArea(zoneArea);
+                  setHoveringZone(zoneCompound);
+                },
+                children: [
+                  content.map((item, i) => {
+                    var _a2, _b, _c;
+                    const componentId = item.props.id;
+                    const puckProps = {
+                      renderDropZone: DropZone,
+                      isEditing: true
+                    };
+                    const defaultedProps = __spreadProps(__spreadValues(__spreadValues({}, (_a2 = config.components[item.type]) == null ? void 0 : _a2.defaultProps), item.props), {
+                      puck: puckProps,
+                      editMode: true
+                      // DEPRECATED
+                    });
+                    const isSelected = (selectedItem == null ? void 0 : selectedItem.props.id) === componentId || false;
+                    const isDragging = ((draggedItem == null ? void 0 : draggedItem.draggableId) || "draggable-").split(
+                      "draggable-"
+                    )[1] === componentId;
+                    const containsZone = areasWithZones ? areasWithZones[componentId] : false;
+                    const Render2 = config.components[item.type] ? config.components[item.type].render : () => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { padding: 48, textAlign: "center" }, children: [
+                      "No configuration for ",
+                      item.type
+                    ] });
+                    const componentConfig = config.components[item.type];
+                    const label = (_b = componentConfig == null ? void 0 : componentConfig["label"]) != null ? _b : item.type.toString();
+                    const canDrag = appContext2.getPermissions({
+                      item: getItem(
+                        { index: i, zone: zoneCompound },
+                        appContext2.state.data
+                      )
+                    }).drag;
+                    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+                      "div",
+                      {
+                        className: getClassName18("item"),
+                        style: { zIndex: isDragging ? 1 : void 0 },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                            DropZoneProvider,
+                            {
+                              value: __spreadProps(__spreadValues({}, ctx), {
+                                areaId: componentId
+                              }),
+                              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                                DraggableComponent,
+                                {
+                                  label,
+                                  id: `draggable-${componentId}`,
+                                  index: i,
+                                  isSelected,
+                                  isLocked: userIsDragging,
+                                  forceHover: hoveringComponent === componentId && !userIsDragging,
+                                  isDragDisabled: !canDrag,
+                                  indicativeHover: userIsDragging && containsZone && hoveringArea === componentId,
+                                  isLoading: ((_c = appContext2.componentState[componentId]) == null ? void 0 : _c.loadingCount) > 0,
+                                  onMount: () => {
+                                    ctx.registerPath({
+                                      index: i,
+                                      zone: zoneCompound
+                                    });
+                                  },
+                                  onClick: (e) => {
+                                    setItemSelector({
+                                      index: i,
+                                      zone: zoneCompound
+                                    });
+                                    e.stopPropagation();
+                                  },
+                                  onMouseDown: (e) => {
+                                    e.stopPropagation();
+                                    setZoneWillDrag(zone);
+                                  },
+                                  onMouseOver: (e) => {
+                                    e.stopPropagation();
+                                    if (containsZone) {
+                                      setHoveringArea(componentId);
+                                    } else {
+                                      setHoveringArea(zoneArea);
+                                    }
+                                    setHoveringComponent(componentId);
+                                    setHoveringZone(zoneCompound);
+                                  },
+                                  onMouseOut: () => {
+                                    setHoveringArea(null);
+                                    setHoveringZone(null);
+                                    setHoveringComponent(null);
+                                  },
+                                  onDelete: (e) => {
+                                    dispatch({
+                                      type: "remove",
+                                      index: i,
+                                      zone: zoneCompound
+                                    });
+                                    setItemSelector(null);
+                                    e.stopPropagation();
+                                  },
+                                  onDuplicate: (e) => {
+                                    dispatch({
+                                      type: "duplicate",
+                                      sourceIndex: i,
+                                      sourceZone: zoneCompound
+                                    });
+                                    setItemSelector({
+                                      zone: zoneCompound,
+                                      index: i + 1
+                                    });
+                                    e.stopPropagation();
+                                  },
+                                  style: {
+                                    pointerEvents: userIsDragging && draggingNewComponent ? "all" : void 0
+                                  },
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: getClassName18("renderWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Render2, __spreadValues({}, defaultedProps)) })
+                                }
+                              )
+                            }
+                          ),
+                          userIsDragging && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                            "div",
+                            {
+                              className: getClassName18("hitbox"),
+                              onMouseOver: (e) => {
+                                e.stopPropagation();
+                                setHoveringArea(zoneArea);
+                                setHoveringZone(zoneCompound);
+                              }
+                            }
+                          )
+                        ]
+                      },
+                      item.props.id
+                    );
+                  }),
+                  provided == null ? void 0 : provided.placeholder,
+                  (snapshot == null ? void 0 : snapshot.isDraggingOver) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                    "div",
+                    {
+                      "data-puck-placeholder": true,
+                      style: __spreadProps(__spreadValues({}, placeholderStyle), {
+                        background: "var(--puck-color-azure-06)",
+                        opacity: 0.3,
+                        zIndex: 0
                       })
-                    })
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref: dragRef2, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Render2, __spreadValues({}, defaultedProps)) })
-                }
-              )
-            },
-            componentId
-          );
-        })
-      ]
+                    }
+                  )
+                ]
+              })
+            );
+          }
+        }
+      )
     }
   );
 }
-function DropZoneRender({ className, style, zone }) {
-  const ctx = (0, import_react18.useContext)(dropZoneContext);
+function DropZoneRender({ zone }) {
+  const ctx = (0, import_react20.useContext)(dropZoneContext);
   const { data, areaId = "root", config } = ctx || {};
   let zoneCompound = rootDroppableId;
   let content = (data == null ? void 0 : data.content) || [];
@@ -3538,23 +3136,17 @@ function DropZoneRender({ className, style, zone }) {
     zoneCompound = `${areaId}:${zone}`;
     content = setupZone(data, zoneCompound).zones[zoneCompound];
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className, style, children: content.map((item) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children: content.map((item) => {
     const Component = config.components[item.type];
     if (Component) {
-      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         DropZoneProvider,
         {
-          value: {
-            data,
-            config,
-            areaId: item.props.id,
-            depth: 1,
-            path: []
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          value: { data, config, areaId: item.props.id },
+          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             Component.render,
             __spreadProps(__spreadValues({}, item.props), {
-              puck: { renderDropZone: DropZoneRender }
+              puck: { renderDropZone: DropZone }
             })
           )
         },
@@ -3565,224 +3157,192 @@ function DropZoneRender({ className, style, zone }) {
   }) });
 }
 function DropZone(props) {
-  const ctx = (0, import_react18.useContext)(dropZoneContext);
+  const ctx = (0, import_react20.useContext)(dropZoneContext);
   if ((ctx == null ? void 0 : ctx.mode) === "edit") {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DropZoneEdit, __spreadValues({}, props)) });
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropZoneEdit, __spreadValues({}, props));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DropZoneRender, __spreadValues({}, props)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropZoneRender, __spreadValues({}, props));
 }
 
-// lib/get-zone-id.ts
+// components/Puck/index.tsx
 init_react_import();
-var getZoneId = (zoneCompound) => {
-  if (!zoneCompound) {
-    return [];
-  }
-  if (zoneCompound && zoneCompound.indexOf(":") > -1) {
-    return zoneCompound.split(":");
-  }
-  return [rootDroppableId, zoneCompound];
-};
+var import_react35 = require("react");
 
-// components/DragDropContext/NestedDroppablePlugin.ts
+// lib/use-placeholder-style.ts
 init_react_import();
-var import_abstract9 = require("@dnd-kit/abstract");
-var import_state = require("@dnd-kit/state");
+var import_react21 = require("react");
 
-// lib/throttle.ts
+// lib/get-frame.ts
 init_react_import();
-function timeout2(callback, duration) {
-  const id = setTimeout(callback, duration);
-  return () => clearTimeout(id);
-}
-function throttle(func, limit) {
-  const time = () => performance.now();
-  let cancel;
-  let lastRan = 0;
-  return function(...args) {
-    const now = time();
-    const context = this;
-    if (now - lastRan >= limit) {
-      func.apply(context, args);
-      lastRan = now;
-    } else {
-      cancel == null ? void 0 : cancel();
-      cancel = timeout2(() => {
-        func.apply(context, args);
-        lastRan = time();
-      }, limit - (now - lastRan));
-    }
-  };
-}
+var getFrame = () => {
+  let frame = document.querySelector("#preview-frame");
+  if ((frame == null ? void 0 : frame.tagName) === "IFRAME") {
+    frame = frame.contentDocument;
+  }
+  return frame;
+};
 
-// components/DragDropContext/NestedDroppablePlugin.ts
-function isPositionInsideRect(position, rect) {
-  return position.x >= rect.left && position.x <= rect.right && position.y >= rect.top && position.y <= rect.bottom;
-}
-var BUFFER_ZONE = 8;
-var REFRESH_ON_MOVE = true;
-var depthSort = (candidates) => {
-  return candidates.sort((a, b) => {
-    const aData = a.data;
-    const bData = b.data;
-    if (aData.depth > bData.depth) {
-      return 1;
-    }
-    if (bData.depth > aData.depth) {
-      return -1;
+// lib/use-placeholder-style.ts
+var usePlaceholderStyle = () => {
+  const queryAttr = "data-rfd-drag-handle-draggable-id";
+  const [placeholderStyle, setPlaceholderStyle] = (0, import_react21.useState)();
+  const onDragStartOrUpdate = (draggedItem) => {
+    var _a;
+    const draggableId = draggedItem.draggableId;
+    const destinationIndex = (draggedItem.destination || draggedItem.source).index;
+    const droppableId = (draggedItem.destination || draggedItem.source).droppableId;
+    const domQuery = `[${queryAttr}='${draggableId}']`;
+    const frame = getFrame();
+    const draggedDOM = document.querySelector(domQuery) || (frame == null ? void 0 : frame.querySelector(domQuery));
+    if (!draggedDOM) {
+      return;
     }
-    return 0;
-  });
-};
-var getZoneId2 = (candidate) => {
-  let id = candidate == null ? void 0 : candidate.id;
-  if (!candidate) return null;
-  if (candidate.type === "component") {
-    const data = candidate.data;
-    if (data.containsActiveZone) {
-      id = null;
-    } else {
-      id = data.zone;
+    const targetListElement = frame == null ? void 0 : frame.querySelector(
+      `[data-rfd-droppable-id='${droppableId}']`
+    );
+    const { clientHeight } = draggedDOM;
+    if (!targetListElement) {
+      return;
     }
-  } else if (candidate.type === "void") {
-    return "void";
-  }
-  return id;
-};
-var getAreaId = (candidate) => {
-  if (candidate.type === "component") {
-    const data = candidate.data;
-    if (data.containsActiveZone) {
-      return candidate.id;
+    let clientY = 0;
+    const isSameDroppable = draggedItem.source.droppableId === ((_a = draggedItem.destination) == null ? void 0 : _a.droppableId);
+    if (destinationIndex > 0) {
+      const end = destinationIndex > draggedItem.source.index && isSameDroppable ? destinationIndex + 1 : destinationIndex;
+      const children = Array.from(targetListElement.children).filter(
+        (item) => item !== draggedDOM && item.getAttributeNames().indexOf("data-puck-placeholder") === -1 && item.getAttributeNames().indexOf("data-rfd-placeholder-context-id") === -1
+      ).slice(0, end);
+      clientY = children.reduce(
+        (total, item) => total + item.clientHeight + parseInt(window.getComputedStyle(item).marginTop.replace("px", "")) + parseInt(
+          window.getComputedStyle(item).marginBottom.replace("px", "")
+        ),
+        0
+      );
     }
-  }
-  return null;
-};
-var getDeepestId = (candidates, idFn) => {
-  let id = null;
-  for (let i = 0; i < candidates.length; i++) {
-    const candidate = candidates[i];
-    id = idFn(candidate);
-    if (id) break;
-  }
-  return id;
-};
-var expandHitBox = (rect) => {
-  return {
-    bottom: rect.bottom + BUFFER_ZONE,
-    top: rect.top - BUFFER_ZONE,
-    width: rect.width + BUFFER_ZONE * 2,
-    height: rect.height + BUFFER_ZONE * 2,
-    left: rect.left - BUFFER_ZONE,
-    right: rect.right + BUFFER_ZONE
+    setPlaceholderStyle({
+      position: "absolute",
+      top: clientY,
+      left: 0,
+      height: clientHeight,
+      width: "100%"
+    });
   };
+  return { onDragStartOrUpdate, placeholderStyle };
 };
-var getPointerCollisions = (position, manager) => {
-  var _a;
-  const candidates = [];
-  const source = (_a = manager.dragOperation) == null ? void 0 : _a.source;
-  const sourceData = source ? source.data : void 0;
-  for (const droppable of manager.registry.droppables.value) {
-    if (droppable.shape) {
-      let rect = droppable.shape.boundingRectangle;
-      const isNotSourceZone = droppable.id !== ((sourceData == null ? void 0 : sourceData.zone) || (source == null ? void 0 : source.id));
-      const isNotTargetZone = droppable.id !== ((sourceData == null ? void 0 : sourceData.zone) || (source == null ? void 0 : source.id));
-      if (droppable.type === "dropzone" && isNotSourceZone && isNotTargetZone) {
-        rect = expandHitBox(rect);
-      }
-      if (isPositionInsideRect(position, rect)) {
-        candidates.push(droppable);
-      }
-    }
-  }
-  return candidates;
-};
-var findDeepestCandidate = (position, manager) => {
-  const candidates = getPointerCollisions(position, manager);
-  if (candidates.length > 0) {
-    const sortedCandidates = depthSort(candidates);
-    const draggable = manager.dragOperation.source;
-    const draggedCandidateIndex = sortedCandidates.findIndex(
-      (candidate) => candidate.id === (draggable == null ? void 0 : draggable.id)
+
+// components/SidebarSection/index.tsx
+init_react_import();
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css#css-module
+init_react_import();
+var styles_module_default13 = { "SidebarSection": "_SidebarSection_125qe_1", "SidebarSection-title": "_SidebarSection-title_125qe_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_125qe_20", "SidebarSection-content": "_SidebarSection-content_125qe_24", "SidebarSection--noPadding": "_SidebarSection--noPadding_125qe_28", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_125qe_41", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_125qe_70", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_125qe_41", "SidebarSection-heading": "_SidebarSection-heading_125qe_82", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_125qe_86" };
+
+// lib/use-breadcrumbs.ts
+init_react_import();
+var import_react22 = require("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: [] };
+  if (!id) {
+    return [];
+  }
+  return currentPathData == null ? void 0 : currentPathData.path.reduce((acc, zoneCompound) => {
+    const [area] = getZoneId(zoneCompound);
+    if (area === rootDroppableId) {
+      return [
+        {
+          label: "Page",
+          selector: null
+        }
+      ];
+    }
+    const parentZoneCompound = acc.length > 0 ? acc[acc.length - 1].zoneCompound : rootDroppableId;
+    let parentZone = data.content;
+    if (parentZoneCompound && parentZoneCompound !== rootDroppableId) {
+      parentZone = data.zones[parentZoneCompound];
+    }
+    if (!parentZone) {
+      return acc;
+    }
+    const itemIndex = parentZone.findIndex(
+      (queryItem) => queryItem.props.id === area
     );
-    const draggedCandidateId = draggable == null ? void 0 : draggable.id;
-    let filteredCandidates = [...sortedCandidates];
-    if (draggedCandidateId && draggedCandidateIndex > -1) {
-      filteredCandidates.splice(draggedCandidateIndex, 1);
+    const item = parentZone[itemIndex];
+    if (!item) {
+      return acc;
     }
-    filteredCandidates = filteredCandidates.filter((candidate) => {
-      const candidateData = candidate.data;
-      if (draggedCandidateId && draggedCandidateIndex > -1) {
-        if (candidateData.path.indexOf(draggedCandidateId) > -1) {
-          return false;
-        }
-      }
-      if (candidate.type === "dropzone") {
-        const candidateData2 = candidate.data;
-        if (!candidateData2.isDroppableTarget) {
-          return false;
-        }
-        if (candidateData2.areaId === draggedCandidateId) {
-          return false;
-        }
-      } else if (candidate.type === "component") {
-        const candidateData2 = candidate.data;
-        if (!candidateData2.inDroppableZone) {
-          return false;
-        }
+    return [
+      ...acc,
+      {
+        label: item.type.toString(),
+        selector: {
+          index: itemIndex,
+          zone: parentZoneCompound
+        },
+        zoneCompound
       }
-      return true;
-    });
-    filteredCandidates.reverse();
-    const zone = getZoneId2(filteredCandidates[0]);
-    const area = getDeepestId(filteredCandidates, getAreaId);
-    return { zone, area };
-  }
-  return {
-    zone: "default-zone",
-    area: null
-  };
+    ];
+  }, []);
 };
-var createNestedDroppablePlugin = ({
-  onChange
-}) => class NestedDroppablePlugin extends import_abstract9.Plugin {
-  constructor(manager, options) {
-    super(manager);
-    if (typeof window === "undefined") {
-      return;
+var useBreadcrumbs = (renderCount) => {
+  const {
+    state: { data },
+    selectedItem
+  } = useAppContext();
+  const dzContext = (0, import_react22.useContext)(dropZoneContext);
+  return (0, import_react22.useMemo)(() => {
+    const breadcrumbs = convertPathDataToBreadcrumbs(
+      selectedItem,
+      dzContext == null ? void 0 : dzContext.pathData,
+      data
+    );
+    if (renderCount) {
+      return breadcrumbs.slice(breadcrumbs.length - renderCount);
     }
-    const cleanupEffect = (0, import_state.effects)(() => {
-      const handleMove = (position) => {
-        if (REFRESH_ON_MOVE) {
-          for (const droppable of manager.registry.droppables.value) {
-            droppable.refreshShape();
-          }
-        }
-        onChange(findDeepestCandidate(position, manager), manager);
-      };
-      const handleMoveThrottled = throttle(handleMove, 50);
-      const handlePointerMove = (event) => {
-        handleMoveThrottled({
-          x: event.clientX,
-          y: event.clientY
-        });
-      };
-      document.body.addEventListener("pointermove", handlePointerMove, {
-        capture: true
-        // dndkit's PointerSensor prevents propagation during drag
-      });
-      this.destroy = () => {
-        document.body.removeEventListener("pointermove", handlePointerMove, {
-          capture: true
-        });
-        cleanupEffect();
-      };
-    });
-  }
+    return breadcrumbs;
+  }, [selectedItem, dzContext == null ? void 0 : dzContext.pathData, renderCount]);
 };
 
-// lib/insert-component.ts
-init_react_import();
+// components/SidebarSection/index.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var getClassName19 = get_class_name_factory_default("SidebarSection", styles_module_default13);
+var SidebarSection = ({
+  children,
+  title,
+  background,
+  showBreadcrumbs,
+  noBorderTop,
+  noPadding,
+  isLoading
+}) => {
+  const { setUi } = useAppContext();
+  const breadcrumbs = useBreadcrumbs(1);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    "div",
+    {
+      className: getClassName19({ noBorderTop, noPadding }),
+      style: { background },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: getClassName19("title"), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: getClassName19("breadcrumbs"), children: [
+          showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: getClassName19("breadcrumb"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              "button",
+              {
+                type: "button",
+                className: getClassName19("breadcrumbLabel"),
+                onClick: () => setUi({ itemSelector: breadcrumb.selector }),
+                children: breadcrumb.label
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChevronRight, { size: 16 })
+          ] }, i)) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: getClassName19("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Heading, { rank: "2", size: "xs", children: title }) })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: getClassName19("content"), children }),
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: getClassName19("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Loader, { size: 32 }) })
+      ]
+    }
+  );
+};
 
 // reducer/index.ts
 init_react_import();
@@ -3790,6 +3350,14 @@ init_react_import();
 // reducer/data.ts
 init_react_import();
 
+// lib/insert.ts
+init_react_import();
+var insert = (list, index, item) => {
+  const result = Array.from(list);
+  result.splice(index, 0, item);
+  return result;
+};
+
 // lib/remove.ts
 init_react_import();
 var remove = (list, index) => {
@@ -3917,27 +3485,6 @@ function insertAction(data, action, config) {
     })
   });
 }
-var reorderAction = (data, action) => {
-  if (action.destinationZone === rootDroppableId) {
-    return __spreadProps(__spreadValues({}, data), {
-      content: reorder(
-        data.content,
-        action.sourceIndex,
-        action.destinationIndex
-      )
-    });
-  }
-  const newData = setupZone(data, action.destinationZone);
-  return __spreadProps(__spreadValues({}, data), {
-    zones: __spreadProps(__spreadValues({}, newData.zones), {
-      [action.destinationZone]: reorder(
-        newData.zones[action.destinationZone],
-        action.sourceIndex,
-        action.destinationIndex
-      )
-    })
-  });
-};
 function reduceData(data, action, config) {
   if (action.type === "insert") {
     return insertAction(data, action, config);
@@ -3973,12 +3520,27 @@ function reduceData(data, action, config) {
     });
   }
   if (action.type === "reorder") {
-    return reorderAction(data, action);
+    if (action.destinationZone === rootDroppableId) {
+      return __spreadProps(__spreadValues({}, data), {
+        content: reorder(
+          data.content,
+          action.sourceIndex,
+          action.destinationIndex
+        )
+      });
+    }
+    const newData = setupZone(data, action.destinationZone);
+    return __spreadProps(__spreadValues({}, data), {
+      zones: __spreadProps(__spreadValues({}, newData.zones), {
+        [action.destinationZone]: reorder(
+          newData.zones[action.destinationZone],
+          action.sourceIndex,
+          action.destinationIndex
+        )
+      })
+    });
   }
   if (action.type === "move") {
-    if (action.sourceZone === action.destinationZone && action.sourceIndex === action.destinationIndex) {
-      return data;
-    }
     const newData = setupZone(
       setupZone(data, action.sourceZone),
       action.destinationZone
@@ -3987,9 +3549,6 @@ function reduceData(data, action, config) {
       { zone: action.sourceZone, index: action.sourceIndex },
       newData
     );
-    if (action.sourceZone === action.destinationZone) {
-      return reorderAction(data, __spreadProps(__spreadValues({}, action), { type: "reorder" }));
-    }
     if (action.sourceZone === rootDroppableId) {
       return __spreadProps(__spreadValues({}, newData), {
         content: remove(newData.content, action.sourceIndex),
@@ -4086,11 +3645,6 @@ var reduceUi = (ui, action) => {
     }
     return __spreadValues(__spreadValues({}, ui), action.ui(ui));
   }
-  if (action.type === "duplicate") {
-    return __spreadProps(__spreadValues({}, ui), {
-      itemSelector: { index: action.sourceIndex + 1, zone: action.sourceZone }
-    });
-  }
   return ui;
 };
 
@@ -4127,851 +3681,18 @@ function createReducer({
   onAction
 }) {
   return storeInterceptor(
-    (state, action) => {
-      const data = reduceData(state.data, action, config);
-      const ui = reduceUi(state.ui, action);
-      if (action.type === "set") {
-        return setAction(state, action);
-      }
-      return { data, ui };
-    },
-    record,
-    onAction
-  );
-}
-
-// lib/insert-component.ts
-var insertComponent = (componentType, zone, index, {
-  config,
-  dispatch,
-  resolveData,
-  state
-}) => {
-  const id = generateId(componentType);
-  const insertActionData = {
-    type: "insert",
-    componentType,
-    destinationIndex: index,
-    destinationZone: zone,
-    id
-  };
-  const insertedData = insertAction(state.data, insertActionData, config);
-  dispatch(__spreadProps(__spreadValues({}, insertActionData), {
-    // Dispatch insert rather set, as user's may rely on this via onAction
-    // We must always record history here so the insert is added to user history
-    // If the user has defined a resolveData method, they will end up with 2 history
-    // entries on insert - one for the initial insert, and one when the data resolves
-    recordHistory: true
-  }));
-  const itemSelector = {
-    index,
-    zone
-  };
-  dispatch({ type: "setUi", ui: { itemSelector } });
-  resolveData({
-    data: insertedData,
-    ui: __spreadProps(__spreadValues({}, state.ui), { itemSelector })
-  });
-};
-
-// components/DragDropContext/index.tsx
-var import_use_debounce2 = require("use-debounce");
-var import_utilities2 = require("@dnd-kit/dom/utilities");
-
-// components/DragDropContext/PointerSensor.ts
-init_react_import();
-var import_state3 = require("@dnd-kit/state");
-var import_abstract10 = require("@dnd-kit/abstract");
-var import_geometry8 = require("@dnd-kit/geometry");
-var import_utilities = require("@dnd-kit/dom/utilities");
-var _clearTimeout;
-var _PointerSensor = class _PointerSensor extends import_abstract10.Sensor {
-  constructor(manager, options) {
-    super(manager);
-    this.manager = manager;
-    this.options = options;
-    this.listeners = new import_utilities.Listeners();
-    this.cleanup = /* @__PURE__ */ new Set();
-    this.source = void 0;
-    __privateAdd(this, _clearTimeout);
-    this.handleCancel = this.handleCancel.bind(this);
-    this.handlePointerUp = this.handlePointerUp.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    (0, import_state3.effect)(() => {
-      const unbindGlobal = this.bindGlobal(options != null ? options : {});
-      return () => {
-        unbindGlobal();
-      };
-    });
-  }
-  bind(source, options = this.options) {
-    const unbind = (0, import_state3.effect)(() => {
-      var _a;
-      const target = (_a = source.handle) != null ? _a : source.element;
-      const listener = (event) => {
-        if ((0, import_utilities.isPointerEvent)(event)) {
-          this.handlePointerDown(event, source, options);
-        }
-      };
-      if (target) {
-        patchWindow(target.ownerDocument.defaultView);
-        target.addEventListener("pointerdown", listener);
-        return () => {
-          target.removeEventListener("pointerdown", listener);
-        };
-      }
-    });
-    return unbind;
-  }
-  bindGlobal(options) {
-    const documents = /* @__PURE__ */ new Set();
-    for (const draggable of this.manager.registry.draggables.value) {
-      if (draggable.element) {
-        documents.add((0, import_utilities.getDocument)(draggable.element));
-      }
-    }
-    for (const droppable of this.manager.registry.droppables.value) {
-      if (droppable.element) {
-        documents.add((0, import_utilities.getDocument)(droppable.element));
-      }
-    }
-    const unbindFns = Array.from(documents).map(
-      (doc) => this.listeners.bind(doc, [
-        {
-          type: "pointermove",
-          listener: (event) => this.handlePointerMove(event, doc, options)
-        },
-        {
-          type: "pointerup",
-          listener: this.handlePointerUp,
-          options: {
-            capture: true
-          }
-        },
-        {
-          // Cancel activation if there is a competing Drag and Drop interaction
-          type: "dragstart",
-          listener: this.handleDragStart
-        }
-      ])
-    );
-    return () => {
-      unbindFns.forEach((unbind) => unbind());
-    };
-  }
-  handlePointerDown(event, source, options = {}) {
-    if (this.disabled || !event.isPrimary || event.button !== 0 || !(0, import_utilities.isElement)(event.target) || source.disabled) {
-      return;
-    }
-    const offset = (0, import_utilities.getFrameTransform)(source.element);
-    this.initialCoordinates = {
-      x: event.clientX * offset.scaleX + offset.x,
-      y: event.clientY * offset.scaleY + offset.y
-    };
-    this.source = source;
-    const { activationConstraints } = options;
-    const constraints = typeof activationConstraints === "function" ? activationConstraints(event, source) : activationConstraints;
-    event.stopImmediatePropagation();
-    if (!(constraints == null ? void 0 : constraints.delay) && !(constraints == null ? void 0 : constraints.distance)) {
-      this.handleStart(source, event);
-    } else {
-      const { delay } = constraints;
-      if (delay) {
-        const timeout3 = setTimeout(
-          () => this.handleStart(source, event),
-          delay.value
-        );
-        __privateSet(this, _clearTimeout, () => {
-          clearTimeout(timeout3);
-          __privateSet(this, _clearTimeout, void 0);
-        });
-      }
-    }
-    const cleanup = () => {
-      var _a;
-      (_a = __privateGet(this, _clearTimeout)) == null ? void 0 : _a.call(this);
-      this.initialCoordinates = void 0;
-      this.source = void 0;
-    };
-    this.cleanup.add(cleanup);
-  }
-  handlePointerMove(event, doc, options) {
-    if (!this.source) {
-      return;
-    }
-    const ownerDocument = this.source.element && (0, import_utilities.getDocument)(this.source.element);
-    if (doc !== ownerDocument) {
-      return;
-    }
-    const coordinates = {
-      x: event.clientX,
-      y: event.clientY
-    };
-    const offset = (0, import_utilities.getFrameTransform)(this.source.element);
-    coordinates.x = coordinates.x * offset.scaleX + offset.x;
-    coordinates.y = coordinates.y * offset.scaleY + offset.y;
-    if (this.manager.dragOperation.status.dragging) {
-      event.preventDefault();
-      event.stopPropagation();
-      this.manager.actions.move({ to: coordinates });
-      return;
-    }
-    if (!this.initialCoordinates) {
-      return;
-    }
-    const delta = {
-      x: coordinates.x - this.initialCoordinates.x,
-      y: coordinates.y - this.initialCoordinates.y
-    };
-    const { activationConstraints } = options;
-    const constraints = typeof activationConstraints === "function" ? activationConstraints(event, this.source) : activationConstraints;
-    const { distance, delay } = constraints != null ? constraints : {};
-    if (distance) {
-      if (distance.tolerance != null && (0, import_geometry8.exceedsDistance)(delta, distance.tolerance)) {
-        return this.handleCancel();
-      }
-      if ((0, import_geometry8.exceedsDistance)(delta, distance.value)) {
-        return this.handleStart(this.source, event);
-      }
-    }
-    if (delay) {
-      if ((0, import_geometry8.exceedsDistance)(delta, delay.tolerance)) {
-        return this.handleCancel();
-      }
-    }
-  }
-  handlePointerUp(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    const { status } = this.manager.dragOperation;
-    if (!status.idle) {
-      const canceled = !status.initialized;
-      this.manager.actions.stop({ canceled });
-    }
-    this.cleanup.forEach((cleanup) => cleanup());
-    this.cleanup.clear();
-  }
-  handleKeyDown(event) {
-    if (event.key === "Escape") {
-      event.preventDefault();
-      this.handleCancel();
-    }
-  }
-  handleStart(source, event) {
-    var _a;
-    const { manager, initialCoordinates } = this;
-    (_a = __privateGet(this, _clearTimeout)) == null ? void 0 : _a.call(this);
-    if (!initialCoordinates || manager.dragOperation.status.initialized) {
-      return;
-    }
-    if (event.defaultPrevented) {
-      return;
-    }
-    event.preventDefault();
-    (0, import_state3.batch)(() => {
-      manager.actions.setDragSource(source.id);
-      manager.actions.start({ coordinates: initialCoordinates, event });
-    });
-    const ownerDocument = (0, import_utilities.getDocument)(event.target);
-    const unbind = this.listeners.bind(ownerDocument, [
-      {
-        // Prevent scrolling on touch devices
-        type: "touchmove",
-        listener: preventDefault,
-        options: {
-          passive: false
-        }
-      },
-      {
-        // Prevent click events
-        type: "click",
-        listener: preventDefault
-      },
-      {
-        type: "keydown",
-        listener: this.handleKeyDown
-      }
-    ]);
-    ownerDocument.body.setPointerCapture(event.pointerId);
-    this.cleanup.add(unbind);
-  }
-  handleDragStart(event) {
-    const { target } = event;
-    if (!(0, import_utilities.isElement)(target)) {
-      return;
-    }
-    const isNativeDraggable = (0, import_utilities.isHTMLElement)(target) && target.draggable && target.getAttribute("draggable") === "true";
-    if (isNativeDraggable) {
-      this.handleCancel();
-    } else {
-      preventDefault(event);
-    }
-  }
-  handleCancel() {
-    const { dragOperation } = this.manager;
-    if (dragOperation.status.initialized) {
-      this.manager.actions.stop({ canceled: true });
-    }
-    this.cleanup.forEach((cleanup) => cleanup());
-    this.cleanup.clear();
-  }
-  destroy() {
-    this.listeners.clear();
-  }
-};
-_clearTimeout = new WeakMap();
-_PointerSensor.configure = (0, import_abstract10.configurator)(_PointerSensor);
-var PointerSensor = _PointerSensor;
-function preventDefault(event) {
-  event.preventDefault();
-}
-function noop() {
-}
-var windows = /* @__PURE__ */ new WeakSet();
-function patchWindow(window2) {
-  if (!window2 || windows.has(window2)) {
-    return;
-  }
-  window2.addEventListener("touchmove", noop, {
-    capture: false,
-    passive: false
-  });
-  windows.add(window2);
-}
-
-// components/DragDropContext/index.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var dragListenerContext = (0, import_react20.createContext)({
-  dragListeners: {}
-});
-function useDragListener(type, fn, deps = []) {
-  const { setDragListeners } = (0, import_react20.useContext)(dragListenerContext);
-  (0, import_react20.useEffect)(() => {
-    if (setDragListeners) {
-      setDragListeners((old) => __spreadProps(__spreadValues({}, old), {
-        [type]: [...old[type] || [], fn]
-      }));
-    }
-  }, deps);
-}
-var previewContext = (0, import_react20.createContext)(null);
-var AREA_CHANGE_DEBOUNCE_MS = 100;
-var DragDropContextClient = ({ children }) => {
-  const { state, config, dispatch, resolveData } = useAppContext();
-  const [preview, setPreview] = (0, import_react20.useState)(null);
-  const previewRef = (0, import_react20.useRef)(null);
-  const { data } = state;
-  const [deepest, setDeepest] = (0, import_react20.useState)(null);
-  const [nextDeepest, setNextDeepest] = (0, import_react20.useState)(null);
-  const deepestRef = (0, import_react20.useRef)(deepest);
-  const dbDeepestRef = (0, import_react20.useRef)(deepest);
-  const setDeepestDb = (0, import_use_debounce2.useDebouncedCallback)((params) => {
-    setDeepest(params);
-    dbDeepestRef.current = params;
-  }, AREA_CHANGE_DEBOUNCE_MS);
-  const setDeepestDbMaybe = (0, import_react20.useCallback)(
-    (params) => {
-      var _a, _b;
-      if (deepestRef.current === null || ((_a = deepestRef.current) == null ? void 0 : _a.zone) === "void" || params.zone && params.area && ((_b = dbDeepestRef.current) == null ? void 0 : _b.area) === params.area) {
-        setDeepest(params);
-      } else {
-        setDeepestDb(params);
-      }
-      if (!dbDeepestRef.current) {
-        dbDeepestRef.current = params;
-      }
-    },
-    [deepest]
-  );
-  const [plugins] = (0, import_react20.useState)(() => [
-    ...import_dom.defaultPreset.plugins,
-    createNestedDroppablePlugin({
-      onChange: (params, manager) => {
-        var _a, _b, _c;
-        const paramsChanged = !deepestRef.current || params.area !== ((_a = deepestRef.current) == null ? void 0 : _a.area) || params.zone !== ((_b = deepestRef.current) == null ? void 0 : _b.zone);
-        if (paramsChanged) {
-          if (manager.dragOperation.status.dragging) {
-            setDeepestDbMaybe(params);
-          } else {
-            setDeepest(params);
-          }
-          setNextDeepest(params);
-        }
-        if (params.area !== ((_c = deepestRef.current) == null ? void 0 : _c.area)) {
-          setTimeout(() => {
-            manager.collisionObserver.forceUpdate(true);
-          }, 50);
-        }
-        deepestRef.current = params;
-      }
-    })
-  ]);
-  const [sensors] = (0, import_react20.useState)(() => [
-    PointerSensor.configure({
-      activationConstraints(event, source) {
-        var _a;
-        const { pointerType, target } = event;
-        if (pointerType === "mouse" && (0, import_utilities2.isElement)(target) && (source.handle === target || ((_a = source.handle) == null ? void 0 : _a.contains(target)))) {
-          return void 0;
-        }
-        const delay = { value: 200, tolerance: 10 };
-        if (pointerType === "touch") {
-          return { delay };
-        }
-        return {
-          delay,
-          distance: { value: 5 }
-        };
-      }
-    })
-  ]);
-  const [draggedItem, setDraggedItem] = (0, import_react20.useState)();
-  const [dragListeners, setDragListeners] = (0, import_react20.useState)({});
-  const [pathData, setPathData] = (0, import_react20.useState)();
-  const dragMode = (0, import_react20.useRef)(null);
-  const registerPath = (0, import_react20.useCallback)(
-    (selector) => {
-      const item = getItem(selector, data);
-      if (!item) {
-        return;
-      }
-      const [area] = getZoneId(selector.zone);
-      setPathData((latestPathData = {}) => {
-        const parentPathData = latestPathData[area] || { path: [] };
-        return __spreadProps(__spreadValues({}, latestPathData), {
-          [item.props.id]: {
-            path: [
-              ...parentPathData.path,
-              ...selector.zone ? [selector.zone] : []
-            ],
-            label: item.type
-          }
-        });
-      });
-    },
-    [data, setPathData]
-  );
-  const initialSelector = (0, import_react20.useRef)();
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    dragListenerContext.Provider,
-    {
-      value: {
-        dragListeners,
-        setDragListeners
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(previewContext.Provider, { value: preview, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-        import_react19.DragDropProvider,
-        {
-          plugins,
-          sensors,
-          onDragEnd: (event, manager) => {
-            const { source, target } = event.operation;
-            deepestRef.current = null;
-            if (!source) {
-              setDraggedItem(null);
-              return;
-            }
-            const { zone, index } = source.data;
-            const thisPreview = previewRef.current ? __spreadValues({}, previewRef.current) : null;
-            previewRef.current = null;
-            setTimeout(() => {
-              var _a, _b;
-              setDraggedItem(null);
-              if (event.canceled || (target == null ? void 0 : target.type) === "void") {
-                setPreview(null);
-                (_a = dragListeners.dragend) == null ? void 0 : _a.forEach((fn) => {
-                  fn(event, manager);
-                });
-                return;
-              }
-              if (thisPreview) {
-                setPreview(null);
-                if (thisPreview.type === "insert") {
-                  insertComponent(
-                    thisPreview.componentType,
-                    thisPreview.zone,
-                    thisPreview.index,
-                    { config, dispatch, resolveData, state }
-                  );
-                } else if (initialSelector.current) {
-                  dispatch({
-                    type: "move",
-                    sourceIndex: initialSelector.current.index,
-                    sourceZone: initialSelector.current.zone,
-                    destinationIndex: thisPreview.index,
-                    destinationZone: thisPreview.zone,
-                    recordHistory: false
-                  });
-                }
-              }
-              dispatch({
-                type: "setUi",
-                ui: {
-                  itemSelector: { index, zone },
-                  isDragging: false
-                },
-                recordHistory: true
-              });
-              (_b = dragListeners.dragend) == null ? void 0 : _b.forEach((fn) => {
-                fn(event, manager);
-              });
-            }, 300);
-          },
-          onDragOver: (event, manager) => {
-            var _a, _b, _c, _d;
-            event.preventDefault();
-            if (!draggedItem) return;
-            const { source, target } = event.operation;
-            if (!target || !source || target.type === "void") return;
-            const [sourceId] = source.id.split(":");
-            const [targetId] = target.id.split(":");
-            const sourceData = source.data;
-            let sourceZone = sourceData.zone;
-            let sourceIndex = sourceData.index;
-            let targetZone = "";
-            let targetIndex = 0;
-            if (target.type === "component") {
-              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 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;
-              }
-              if (collisionPosition === "after") {
-                targetIndex = targetIndex + 1;
-              }
-            } else {
-              targetZone = target.id.toString();
-              targetIndex = 0;
-            }
-            if (targetId === sourceId || ((_c = pathData == null ? void 0 : pathData[target.id]) == null ? void 0 : _c.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()
-                }
-              };
-              setPreview(previewRef.current);
-            } else {
-              if (!initialSelector.current) {
-                initialSelector.current = {
-                  zone: sourceData.zone,
-                  index: sourceData.index
-                };
-              }
-              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);
-              }
-            }
-            (_d = dragListeners.dragover) == null ? void 0 : _d.forEach((fn) => {
-              fn(event, manager);
-            });
-          },
-          onDragStart: (event, manager) => {
-            var _a;
-            setDeepest(
-              findDeepestCandidate(event.operation.position.current, manager)
-            );
-            dispatch({
-              type: "setUi",
-              ui: { itemSelector: null, isDragging: true }
-            });
-            (_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);
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-            DropZoneProvider,
-            {
-              value: {
-                data,
-                config,
-                dispatch,
-                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 DragDropContext2 = ({ children }) => {
-  const { status } = useAppContext();
-  if (status === "LOADING") {
-    return children;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DragDropContextClient, { children });
-};
-
-// components/Drawer/index.tsx
-var import_jsx_runtime25 = require("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 = ({
-  children,
-  name,
-  label,
-  dragRef,
-  isDragDisabled
-}) => {
-  const CustomInner = (0, import_react21.useMemo)(
-    () => children || (({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: getClassNameItem2("default"), children: children2 })),
-    [children]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-    "div",
-    {
-      className: getClassNameItem2({ disabled: isDragDisabled }),
-      ref: dragRef,
-      onMouseDown: (e) => e.preventDefault(),
-      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CustomInner, { name, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: getClassNameItem2("draggableWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: getClassNameItem2("draggable"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: getClassNameItem2("name"), children: label != null ? label : name }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: getClassNameItem2("icon"), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DragIcon, {}) })
-      ] }) }) })
-    }
-  );
-};
-var DrawerItemDraggable = ({
-  children,
-  name,
-  label,
-  id,
-  isDragDisabled
-}) => {
-  const { ref } = useDraggableSafe({
-    id,
-    data: { type: "drawer", componentType: name },
-    disabled: isDragDisabled
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-    DrawerItemInner,
-    {
-      name,
-      label,
-      dragRef: ref,
-      isDragDisabled,
-      children
-    }
-  );
-};
-var DrawerItem = ({
-  name,
-  children,
-  id,
-  label,
-  index,
-  isDragDisabled
-}) => {
-  const resolvedId = id || name;
-  const [dynamicId, setDynamicId] = (0, import_react21.useState)(generateId(resolvedId));
-  if (typeof index !== "undefined") {
-    console.error(
-      "Warning: The `index` prop on Drawer.Item is deprecated and no longer required."
-    );
-  }
-  useDragListener(
-    "dragend",
-    () => {
-      setDynamicId(generateId(resolvedId));
-    },
-    [resolvedId]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-    DrawerItemDraggable,
-    {
-      name,
-      label,
-      id: dynamicId,
-      isDragDisabled,
-      children
-    }
-  ) }, dynamicId);
-};
-var Drawer = ({
-  children,
-  droppableId,
-  direction
-}) => {
-  if (droppableId) {
-    console.error(
-      "Warning: The `droppableId` prop on Drawer is deprecated and no longer required."
-    );
-  }
-  if (direction) {
-    console.error(
-      "Warning: The `direction` prop on Drawer is deprecated and no longer required to achieve multi-directional dragging."
-    );
-  }
-  const [id] = (0, import_react21.useState)(generateId());
-  const { ref } = useDroppableSafe({
-    id,
-    type: "void",
-    collisionPriority: 0
-    // Never collide with this, but we use it so NestedDroppablePlugin respects the Drawer
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: getClassName18(), ref, children });
-};
-Drawer.Item = DrawerItem;
-
-// components/Puck/index.tsx
-init_react_import();
-var import_react36 = require("react");
-
-// components/SidebarSection/index.tsx
-init_react_import();
-
-// css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css#css-module
-init_react_import();
-var styles_module_default13 = { "SidebarSection": "_SidebarSection_125qe_1", "SidebarSection-title": "_SidebarSection-title_125qe_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_125qe_20", "SidebarSection-content": "_SidebarSection-content_125qe_24", "SidebarSection--noPadding": "_SidebarSection--noPadding_125qe_28", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_125qe_41", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_125qe_70", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_125qe_41", "SidebarSection-heading": "_SidebarSection-heading_125qe_82", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_125qe_86" };
-
-// lib/use-breadcrumbs.ts
-init_react_import();
-var import_react22 = require("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: [] };
-  if (!id) {
-    return [];
-  }
-  return currentPathData == null ? void 0 : currentPathData.path.reduce((acc, zoneCompound) => {
-    const [area] = getZoneId(zoneCompound);
-    if (area === rootDroppableId) {
-      return [
-        {
-          label: "Page",
-          selector: null
-        }
-      ];
-    }
-    const parentZoneCompound = acc.length > 0 ? acc[acc.length - 1].zoneCompound : rootDroppableId;
-    let parentZone = data.content;
-    if (parentZoneCompound && parentZoneCompound !== rootDroppableId) {
-      parentZone = data.zones[parentZoneCompound];
-    }
-    if (!parentZone) {
-      return acc;
-    }
-    const itemIndex = parentZone.findIndex(
-      (queryItem) => queryItem.props.id === area
-    );
-    const item = parentZone[itemIndex];
-    if (!item) {
-      return acc;
-    }
-    return [
-      ...acc,
-      {
-        label: item.type.toString(),
-        selector: {
-          index: itemIndex,
-          zone: parentZoneCompound
-        },
-        zoneCompound
-      }
-    ];
-  }, []);
-};
-var useBreadcrumbs = (renderCount) => {
-  const {
-    state: { data },
-    selectedItem
-  } = useAppContext();
-  const dzContext = (0, import_react22.useContext)(dropZoneContext);
-  return (0, import_react22.useMemo)(() => {
-    const breadcrumbs = convertPathDataToBreadcrumbs(
-      selectedItem,
-      dzContext == null ? void 0 : dzContext.pathData,
-      data
-    );
-    if (renderCount) {
-      return breadcrumbs.slice(breadcrumbs.length - renderCount);
-    }
-    return breadcrumbs;
-  }, [selectedItem, dzContext == null ? void 0 : dzContext.pathData, renderCount]);
-};
-
-// components/SidebarSection/index.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var getClassName19 = get_class_name_factory_default("SidebarSection", styles_module_default13);
-var SidebarSection = ({
-  children,
-  title,
-  background,
-  showBreadcrumbs,
-  noBorderTop,
-  noPadding,
-  isLoading
-}) => {
-  const { setUi } = useAppContext();
-  const breadcrumbs = useBreadcrumbs(1);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-    "div",
-    {
-      className: getClassName19({ noBorderTop, noPadding }),
-      style: { background },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: getClassName19("title"), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: getClassName19("breadcrumbs"), children: [
-          showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: getClassName19("breadcrumb"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-              "button",
-              {
-                type: "button",
-                className: getClassName19("breadcrumbLabel"),
-                onClick: () => setUi({ itemSelector: breadcrumb.selector }),
-                children: breadcrumb.label
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ChevronRight, { size: 16 })
-          ] }, i)) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: getClassName19("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Heading, { rank: "2", size: "xs", children: title }) })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: getClassName19("content"), children }),
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: getClassName19("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Loader, { size: 32 }) })
-      ]
-    }
+    (state, action) => {
+      const data = reduceData(state.data, action, config);
+      const ui = reduceUi(state.ui, action);
+      if (action.type === "set") {
+        return setAction(state, action);
+      }
+      return { data, ui };
+    },
+    record,
+    onAction
   );
-};
+}
 
 // lib/flush-zones.ts
 init_react_import();
@@ -4998,7 +3719,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
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var getClassName20 = get_class_name_factory_default("MenuBar", styles_module_default14);
 function MenuBar({
   appState,
@@ -5012,7 +3733,7 @@ function MenuBar({
     history: { back, forward, historyStore }
   } = useAppContext();
   const { hasFuture = false, hasPast = false } = historyStore || {};
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
       className: getClassName20({ menuOpen }),
@@ -5026,12 +3747,12 @@ function MenuBar({
           setMenuOpen(false);
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: getClassName20("inner"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: getClassName20("history"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconButton, { title: "undo", disabled: !hasPast, onClick: back, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Undo2, { size: 21 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconButton, { title: "redo", disabled: !hasFuture, onClick: forward, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Redo2, { size: 21 }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: getClassName20("inner"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: getClassName20("history"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(IconButton, { title: "undo", disabled: !hasPast, onClick: back, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Undo2, { size: 21 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(IconButton, { title: "redo", disabled: !hasFuture, onClick: forward, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Redo2, { size: 21 }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, { children: renderHeaderActions && renderHeaderActions({
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: renderHeaderActions && renderHeaderActions({
           state: appState,
           dispatch
         }) })
@@ -5069,7 +3790,7 @@ var useParent = (itemSelector) => {
 };
 
 // components/Puck/components/Fields/index.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
 var defaultPageFields = {
   title: { type: "text" }
@@ -5077,7 +3798,7 @@ var defaultPageFields = {
 var DefaultFields = ({
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, { children });
 };
 var useResolvedFields = () => {
   var _a, _b;
@@ -5169,7 +3890,7 @@ var Fields = () => {
   const isLoading = fieldsResolving || componentResolving;
   const rootProps = data.root.props || data.root;
   const Wrapper = (0, import_react24.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "form",
     {
       className: getClassName21(),
@@ -5177,7 +3898,7 @@ var Fields = () => {
         e.preventDefault();
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Wrapper, { isLoading, itemSelector, children: Object.keys(fields).map((fieldName) => {
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(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) => {
@@ -5247,38 +3968,40 @@ var Fields = () => {
             const { edit } = getPermissions({
               item: selectedItem
             });
-            return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            const id = `${selectedItem.props.id}_${field.type}_${fieldName}`;
+            return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               AutoFieldPrivate,
               {
                 field,
                 name: fieldName,
-                id: `${selectedItem.props.id}_${fieldName}`,
+                id,
                 readOnly: !edit || readOnly[fieldName],
                 value: selectedItem.props[fieldName],
                 onChange
               },
-              `${selectedItem.props.id}_${fieldName}`
+              id
             );
           } else {
             const readOnly = data.root.readOnly || {};
             const { edit } = getPermissions({
               root: true
             });
-            return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            const id = `root_${field.type}_${fieldName}`;
+            return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               AutoFieldPrivate,
               {
                 field,
                 name: fieldName,
-                id: `root_${fieldName}`,
+                id,
                 readOnly: !edit || readOnly[fieldName],
                 value: rootProps[fieldName],
                 onChange
               },
-              `page_${fieldName}`
+              id
             );
           }
         }) }),
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: getClassName21("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: getClassName21("loadingOverlayInner"), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Loader, { size: 16 }) }) })
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: getClassName21("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: getClassName21("loadingOverlayInner"), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Loader, { size: 16 }) }) })
       ]
     }
   );
@@ -5299,17 +4022,27 @@ 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
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var getClassName22 = get_class_name_factory_default("ComponentList", styles_module_default17);
 var ComponentListItem = ({
   name,
-  label
+  label,
+  index
 }) => {
   const { overrides, getPermissions } = useAppContext();
   const canInsert = getPermissions({
     type: name
   }).insert;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: overrides.componentItem });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    Drawer.Item,
+    {
+      label,
+      name,
+      index,
+      isDragDisabled: !canInsert,
+      children: overrides.componentItem
+    }
+  );
 };
 var ComponentList = ({
   children,
@@ -5318,8 +4051,8 @@ var ComponentList = ({
 }) => {
   const { config, state, setUi } = useAppContext();
   const { expanded = true } = state.ui.componentList[id] || {};
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: getClassName22({ isExpanded: expanded }), children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: getClassName22({ isExpanded: expanded }), children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
       "button",
       {
         type: "button",
@@ -5333,18 +4066,19 @@ var ComponentList = ({
         }),
         title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: getClassName22("titleIcon"), children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ChevronUp, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ChevronDown, { size: 12 }) })
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: getClassName22("titleIcon"), children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ChevronUp, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ChevronDown, { size: 12 }) })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: getClassName22("content"), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: getClassName22("content"), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Drawer, { droppableId: title, children: children || Object.keys(config.components).map((componentKey, i) => {
       var _a;
-      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         ComponentListItem,
         {
           label: (_a = config.components[componentKey]["label"]) != null ? _a : componentKey,
-          name: componentKey
+          name: componentKey,
+          index: i
         },
         componentKey
       );
@@ -5354,7 +4088,7 @@ var ComponentList = ({
 ComponentList.Item = ComponentListItem;
 
 // lib/use-component-list.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var useComponentList = (config, ui) => {
   const [componentList, setComponentList] = (0, import_react25.useState)();
   (0, import_react25.useEffect)(() => {
@@ -5367,7 +4101,7 @@ var useComponentList = (config, ui) => {
           if (category.visible === false || !category.components) {
             return null;
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             ComponentList,
             {
               id: categoryKey,
@@ -5376,7 +4110,7 @@ var useComponentList = (config, ui) => {
                 var _a2;
                 matchedComponents.push(componentName);
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   ComponentList.Item,
                   {
                     label: (_a2 = componentConf["label"]) != null ? _a2 : componentName,
@@ -5396,7 +4130,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__ */ (0, import_jsx_runtime30.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             ComponentList,
             {
               id: "other",
@@ -5404,7 +4138,7 @@ var useComponentList = (config, ui) => {
               children: remainingComponents.map((componentName, i) => {
                 var _a2;
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   ComponentList.Item,
                   {
                     name: componentName,
@@ -5427,12 +4161,12 @@ var useComponentList = (config, ui) => {
 
 // components/Puck/components/Components/index.tsx
 var import_react26 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var Components = () => {
   const { config, state, overrides } = useAppContext();
   const componentList = useComponentList(config, state.ui);
   const Wrapper = (0, import_react26.useMemo)(() => overrides.components || "div", [overrides]);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ComponentList, { id: "all" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ComponentList, { id: "all" }) });
 };
 
 // components/Puck/components/Preview/index.tsx
@@ -5443,8 +4177,8 @@ var import_react28 = require("react");
 init_react_import();
 var import_react27 = require("react");
 var import_object_hash = __toESM(require("object-hash"));
-var import_react_dom3 = require("react-dom");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_react_dom2 = require("react-dom");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var styleSelector = 'style, link[rel="stylesheet"]';
 var collectStyles = (doc) => {
   const collected = [];
@@ -5511,8 +4245,8 @@ var CopyHostStyles = ({
           });
           styleSheet = getStyleSheet(el);
         }
-        const styles2 = getStyles(styleSheet);
-        if (!styles2) {
+        const styles = getStyles(styleSheet);
+        if (!styles) {
           if (debug) {
             console.warn(
               `Tried to load styles for link element, but couldn't find them. Skipping...`
@@ -5520,7 +4254,7 @@ var CopyHostStyles = ({
           }
           return;
         }
-        mirror.innerHTML = styles2;
+        mirror.innerHTML = styles;
         mirror.setAttribute("data-href", el.getAttribute("href"));
       } else {
         mirror = el.cloneNode(true);
@@ -5644,7 +4378,7 @@ var CopyHostStyles = ({
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children });
 };
 var autoFrameContext = (0, import_react27.createContext)({});
 var useFrame = () => (0, import_react27.useContext)(autoFrameContext);
@@ -5654,42 +4388,39 @@ function AutoFrame(_a) {
     className,
     debug,
     id,
-    onStylesLoaded,
-    frameRef
+    onStylesLoaded
   } = _b, props = __objRest(_b, [
     "children",
     "className",
     "debug",
     "id",
-    "onStylesLoaded",
-    "frameRef"
+    "onStylesLoaded"
   ]);
   const [loaded, setLoaded] = (0, import_react27.useState)(false);
   const [ctx, setCtx] = (0, import_react27.useState)({});
+  const ref = (0, import_react27.useRef)(null);
   const [mountTarget, setMountTarget] = (0, import_react27.useState)();
   (0, import_react27.useEffect)(() => {
     var _a2;
-    if (frameRef.current) {
+    if (ref.current) {
       setCtx({
-        document: frameRef.current.contentDocument || void 0,
-        window: frameRef.current.contentWindow || void 0
+        document: ref.current.contentDocument || void 0,
+        window: ref.current.contentWindow || void 0
       });
-      setMountTarget(
-        (_a2 = frameRef.current.contentDocument) == null ? void 0 : _a2.getElementById("frame-root")
-      );
+      setMountTarget((_a2 = ref.current.contentDocument) == null ? void 0 : _a2.getElementById("frame-root"));
     }
-  }, [frameRef, loaded]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  }, [ref, loaded]);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "iframe",
     __spreadProps(__spreadValues({}, props), {
       className,
       id,
       srcDoc: '<!DOCTYPE html><html><head></head><body><div id="frame-root"></div></body></html>',
-      ref: frameRef,
+      ref,
       onLoad: () => {
         setLoaded(true);
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CopyHostStyles, { debug, onStylesLoaded, children: (0, import_react_dom3.createPortal)(children, mountTarget) }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CopyHostStyles, { debug, onStylesLoaded, children: (0, import_react_dom2.createPortal)(children, mountTarget) }) })
     })
   );
 }
@@ -5698,46 +4429,11 @@ var AutoFrame_default = AutoFrame;
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css#css-module
 init_react_import();
-var styles_module_default18 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPreview-frame": "_PuckPreview-frame_z2rgu_6" };
+var styles_module_default18 = { "PuckPreview": "_PuckPreview_rxwlr_1", "PuckPreview-frame": "_PuckPreview-frame_rxwlr_5" };
 
 // components/Puck/components/Preview/index.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var getClassName23 = get_class_name_factory_default("PuckPreview", styles_module_default18);
-var useBubbleIframeEvents = (ref) => {
-  const { status } = useAppContext();
-  (0, import_react28.useEffect)(() => {
-    var _a;
-    if (ref.current && status === "READY") {
-      const iframe = ref.current;
-      const handlePointerMove = (event) => {
-        var _a2;
-        const rect = iframe.getBoundingClientRect();
-        const evt = new CustomEvent("pointermove", {
-          bubbles: true,
-          cancelable: false
-        });
-        const scaleFactor = rect.width / (((_a2 = iframe.contentWindow) == null ? void 0 : _a2.innerWidth) || 1);
-        evt.clientX = event.clientX * scaleFactor + rect.left;
-        evt.clientY = event.clientY * scaleFactor + rect.top;
-        iframe.dispatchEvent(evt);
-      };
-      (_a = iframe.contentDocument) == null ? void 0 : _a.addEventListener(
-        "pointermove",
-        handlePointerMove,
-        {
-          capture: true
-        }
-      );
-      return () => {
-        var _a2;
-        (_a2 = iframe.contentDocument) == null ? void 0 : _a2.removeEventListener(
-          "pointermove",
-          handlePointerMove
-        );
-      };
-    }
-  }, [status]);
-};
 var Preview = ({ id = "puck-preview" }) => {
   const { config, dispatch, state, setStatus, iframe, overrides } = useAppContext();
   const Page = (0, import_react28.useCallback)(
@@ -5745,24 +4441,21 @@ var Preview = ({ id = "puck-preview" }) => {
       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__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: pageProps.children });
+      }, pageProps)) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: pageProps.children });
     },
     [config.root]
   );
   const Frame = (0, import_react28.useMemo)(() => overrides.iframe, [overrides]);
   const rootProps = state.data.root.props || state.data.root;
-  const ref = (0, import_react28.useRef)(null);
-  useBubbleIframeEvents(ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
       className: getClassName23(),
       id,
-      "data-puck-preview": true,
       onClick: () => {
         dispatch({ type: "setUi", ui: __spreadProps(__spreadValues({}, state.ui), { itemSelector: null }) });
       },
-      children: iframe.enabled ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      children: iframe.enabled ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         AutoFrame_default,
         {
           id: "preview-frame",
@@ -5771,32 +4464,27 @@ var Preview = ({ id = "puck-preview" }) => {
           onStylesLoaded: () => {
             setStatus("READY");
           },
-          frameRef: ref,
-          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
-            const inner = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
+            const inner = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               Page,
               __spreadProps(__spreadValues({}, rootProps), {
-                puck: {
-                  renderDropZone: DropZone,
-                  isEditing: true,
-                  dragRef: null
-                },
+                puck: { renderDropZone: DropZone, isEditing: true },
                 editMode: true,
-                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DropZone, { zone: rootDroppableId })
+                children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropZone, { zone: rootDroppableId })
               })
             );
             if (Frame) {
-              return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Frame, { document: document2, children: inner });
+              return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Frame, { document: document2, children: inner });
             }
             return inner;
           } })
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { id: "preview-frame", className: getClassName23("frame"), ref, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { id: "preview-frame", className: getClassName23("frame"), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         Page,
         __spreadProps(__spreadValues({}, rootProps), {
-          puck: { renderDropZone: DropZone, isEditing: true, dragRef: null },
+          puck: { renderDropZone: DropZone, isEditing: true },
           editMode: true,
-          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DropZone, { zone: rootDroppableId })
+          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropZone, { zone: rootDroppableId })
         })
       ) })
     }
@@ -5859,38 +4547,8 @@ var isChildOfZone = (item, maybeChild, ctx) => {
   })) : false;
 };
 
-// lib/get-frame.ts
-init_react_import();
-var getFrame = () => {
-  if (typeof window === "undefined") return;
-  let frameEl = document.querySelector("#preview-frame");
-  if ((frameEl == null ? void 0 : frameEl.tagName) === "IFRAME") {
-    return frameEl.contentDocument || document;
-  }
-  return (frameEl == null ? void 0 : frameEl.ownerDocument) || document;
-};
-
-// lib/on-scroll-end.ts
-init_react_import();
-var onScrollEnd = (frame, cb) => {
-  let scrollTimeout;
-  const callback = function() {
-    clearTimeout(scrollTimeout);
-    scrollTimeout = setTimeout(function() {
-      cb();
-      frame == null ? void 0 : frame.removeEventListener("scroll", callback);
-    }, 50);
-  };
-  frame == null ? void 0 : frame.addEventListener("scroll", callback);
-  setTimeout(() => {
-    if (!scrollTimeout) {
-      cb();
-    }
-  }, 50);
-};
-
 // components/LayerTree/index.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("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 = ({
@@ -5904,27 +4562,32 @@ var LayerTree = ({
 }) => {
   const zones = data.zones || {};
   const ctx = (0, import_react29.useContext)(dropZoneContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName24("zoneTitle"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Layers, { size: "16" }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: getClassName24("zoneTitle"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Layers, { size: "16" }) }),
       " ",
       label
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("ul", { className: getClassName24(), children: [
-      zoneContent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName24("helper"), children: "No items" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("ul", { className: getClassName24(), children: [
+      zoneContent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("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);
         const zonesForItem = findZonesForArea(data, item.props.id);
         const containsZone = Object.keys(zonesForItem).length > 0;
-        const { setHoveringComponent = () => {
-        }, hoveringComponent } = ctx || {};
+        const {
+          setHoveringArea = () => {
+          },
+          setHoveringComponent = () => {
+          },
+          hoveringComponent
+        } = ctx || {};
         const selectedItem = itemSelector && data ? getItem(itemSelector, data) : null;
         const isHovering = hoveringComponent === item.props.id;
         const childIsSelected = isChildOfZone(item, selectedItem, ctx);
         const componentConfig = config.components[item.type];
         const label2 = (_a = componentConfig == null ? void 0 : componentConfig["label"]) != null ? _a : item.type.toString();
-        return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
           "li",
           {
             className: getClassNameLayer({
@@ -5934,7 +4597,7 @@ var LayerTree = ({
               childIsSelected
             }),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -5944,51 +4607,45 @@ var LayerTree = ({
                       setItemSelector(null);
                       return;
                     }
+                    setItemSelector({
+                      index: i,
+                      zone
+                    });
                     const id = zoneContent[i].props.id;
                     const frame = getFrame();
-                    const el = frame == null ? void 0 : frame.querySelector(
-                      `[data-puck-component="${id}"]`
+                    scrollIntoView(
+                      frame == null ? void 0 : frame.querySelector(
+                        `[data-rfd-drag-handle-draggable-id="draggable-${id}"]`
+                      )
                     );
-                    if (!el) {
-                      console.error(
-                        "Scroll failed. No element was found for",
-                        id
-                      );
-                      return;
-                    }
-                    scrollIntoView(el);
-                    onScrollEnd(frame, () => {
-                      setItemSelector({
-                        index: i,
-                        zone
-                      });
-                    });
                   },
                   onMouseOver: (e) => {
                     e.stopPropagation();
+                    setHoveringArea(item.props.id);
                     setHoveringComponent(item.props.id);
                   },
                   onMouseOut: (e) => {
                     e.stopPropagation();
+                    setHoveringArea(null);
                     setHoveringComponent(null);
                   },
                   children: [
-                    containsZone && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                    containsZone && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       "div",
                       {
                         className: getClassNameLayer("chevron"),
                         title: isSelected ? "Collapse" : "Expand",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronDown, { size: "12" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChevronDown, { size: "12" })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassNameLayer("title"), children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Type, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(LayoutGrid, { size: "16" }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassNameLayer("name"), children: label2 })
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: getClassNameLayer("title"), children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Type, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(LayoutGrid, { size: "16" }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassNameLayer("name"), children: label2 })
                     ] })
                   ]
                 }
               ) }),
-              containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                 LayerTree,
                 {
                   config,
@@ -6011,7 +4668,7 @@ var LayerTree = ({
 
 // components/Puck/components/Outline/index.tsx
 var import_react30 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var Outline = () => {
   const { dispatch, state, overrides, config } = useAppContext();
   const { data, ui } = state;
@@ -6026,8 +4683,8 @@ var Outline = () => {
     []
   );
   const Wrapper = (0, import_react30.useMemo)(() => overrides.outline || "div", [overrides]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-    (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+    (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       LayerTree,
       {
         config,
@@ -6040,7 +4697,7 @@ var Outline = () => {
     ),
     Object.entries(findZonesForArea(data, "root")).map(
       ([zoneKey, zone]) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           LayerTree,
           {
             config,
@@ -6064,8 +4721,7 @@ var import_react_hotkeys_hook = require("react-hotkeys-hook");
 function usePuckHistory({
   dispatch,
   initialAppState,
-  historyStore,
-  iframeEnabled
+  historyStore
 }) {
   const back = () => {
     var _a;
@@ -6083,16 +4739,6 @@ function usePuckHistory({
       historyStore.forward();
     }
   };
-  const backIframe = () => {
-    if (iframeEnabled) {
-      back();
-    }
-  };
-  const forwardIframe = () => {
-    if (iframeEnabled) {
-      forward();
-    }
-  };
   const setHistories = (histories) => {
     var _a;
     dispatch({
@@ -6111,23 +4757,9 @@ function usePuckHistory({
       historyStore.setHistoryIndex(index);
     }
   };
-  const frame = getFrame();
-  const resolvedFrame = typeof window !== "undefined" && frame !== document ? frame : void 0;
   (0, import_react_hotkeys_hook.useHotkeys)("meta+z", back, { preventDefault: true });
   (0, import_react_hotkeys_hook.useHotkeys)("meta+shift+z", forward, { preventDefault: true });
   (0, import_react_hotkeys_hook.useHotkeys)("meta+y", forward, { preventDefault: true });
-  (0, import_react_hotkeys_hook.useHotkeys)("meta+z", backIframe, {
-    preventDefault: true,
-    document: resolvedFrame
-  });
-  (0, import_react_hotkeys_hook.useHotkeys)("meta+shift+z", forwardIframe, {
-    preventDefault: true,
-    document: resolvedFrame
-  });
-  (0, import_react_hotkeys_hook.useHotkeys)("meta+y", forwardIframe, {
-    preventDefault: true,
-    document: resolvedFrame
-  });
   return {
     back,
     forward,
@@ -6278,24 +4910,24 @@ var parse = function parse2(raw) {
   !!isNaN(result) ? process.env.NODE_ENV !== "production" ? invariant(false, "Could not parse value [raw: " + raw + ", without suffix: " + value + "]") : invariant(false) : void 0;
   return result;
 };
-var calculateBox = function calculateBox2(borderBox, styles2) {
+var calculateBox = function calculateBox2(borderBox, styles) {
   var margin = {
-    top: parse(styles2.marginTop),
-    right: parse(styles2.marginRight),
-    bottom: parse(styles2.marginBottom),
-    left: parse(styles2.marginLeft)
+    top: parse(styles.marginTop),
+    right: parse(styles.marginRight),
+    bottom: parse(styles.marginBottom),
+    left: parse(styles.marginLeft)
   };
   var padding = {
-    top: parse(styles2.paddingTop),
-    right: parse(styles2.paddingRight),
-    bottom: parse(styles2.paddingBottom),
-    left: parse(styles2.paddingLeft)
+    top: parse(styles.paddingTop),
+    right: parse(styles.paddingRight),
+    bottom: parse(styles.paddingBottom),
+    left: parse(styles.paddingLeft)
   };
   var border = {
-    top: parse(styles2.borderTopWidth),
-    right: parse(styles2.borderRightWidth),
-    bottom: parse(styles2.borderBottomWidth),
-    left: parse(styles2.borderLeftWidth)
+    top: parse(styles.borderTopWidth),
+    right: parse(styles.borderRightWidth),
+    bottom: parse(styles.borderBottomWidth),
+    left: parse(styles.borderLeftWidth)
   };
   return createBox({
     borderBox,
@@ -6306,8 +4938,8 @@ var calculateBox = function calculateBox2(borderBox, styles2) {
 };
 var getBox = function getBox2(el) {
   var borderBox = el.getBoundingClientRect();
-  var styles2 = window.getComputedStyle(el);
-  return calculateBox(borderBox, styles2);
+  var styles = window.getComputedStyle(el);
+  return calculateBox(borderBox, styles);
 };
 
 // components/Puck/components/Canvas/index.tsx
@@ -6322,11 +4954,11 @@ 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
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var icons = {
-  Smartphone: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Smartphone, { size: 16 }),
-  Tablet: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Tablet, { size: 16 }),
-  Monitor: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Monitor, { size: 16 })
+  Smartphone: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Smartphone, { size: 16 }),
+  Tablet: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Tablet, { size: 16 }),
+  Monitor: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(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);
@@ -6342,7 +4974,7 @@ var ViewportButton = ({
   (0, import_react32.useEffect)(() => {
     setIsActive(width === state.ui.viewports.current.width);
   }, [width, state.ui.viewports.current.width]);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     IconButton,
     {
       title,
@@ -6351,7 +4983,7 @@ var ViewportButton = ({
         e.stopPropagation();
         onClick({ width, height });
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: getClassNameButton("inner"), children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: getClassNameButton("inner"), children })
     }
   ) });
 };
@@ -6387,8 +5019,8 @@ var ViewportControls = ({
     ].filter((a) => a.value <= autoZoom).sort((a, b) => a.value > b.value ? 1 : -1),
     [autoZoom]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: getClassName25(), children: [
-    viewports.map((viewport, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassName25(), children: [
+    viewports.map((viewport, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       ViewportButton,
       {
         height: viewport.height,
@@ -6399,8 +5031,8 @@ var ViewportControls = ({
       },
       i
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: getClassName25("divider") }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName25("divider") }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       IconButton,
       {
         title: "Zoom viewport out",
@@ -6414,10 +5046,10 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ZoomOut, { size: 16 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ZoomOut, { size: 16 })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       IconButton,
       {
         title: "Zoom viewport in",
@@ -6431,11 +5063,11 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ZoomIn, { size: 16 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ZoomIn, { size: 16 })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: getClassName25("divider") }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName25("divider") }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "select",
       {
         className: getClassName25("zoomSelect"),
@@ -6443,7 +5075,7 @@ var ViewportControls = ({
         onChange: (e) => {
           onZoom(parseFloat(e.currentTarget.value));
         },
-        children: zoomOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        children: zoomOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           "option",
           {
             value: option.value,
@@ -6458,7 +5090,7 @@ var ViewportControls = ({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css#css-module
 init_react_import();
-var styles_module_default21 = { "PuckCanvas": "_PuckCanvas_18jay_1", "PuckCanvas-controls": "_PuckCanvas-controls_18jay_16", "PuckCanvas-inner": "_PuckCanvas-inner_18jay_21", "PuckCanvas-root": "_PuckCanvas-root_18jay_30", "PuckCanvas--ready": "_PuckCanvas--ready_18jay_55", "PuckCanvas-loader": "_PuckCanvas-loader_18jay_60", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_18jay_70" };
+var styles_module_default21 = { "PuckCanvas": "_PuckCanvas_avf1c_1", "PuckCanvas-controls": "_PuckCanvas-controls_avf1c_16", "PuckCanvas-inner": "_PuckCanvas-inner_avf1c_21", "PuckCanvas-root": "_PuckCanvas-root_avf1c_32", "PuckCanvas--ready": "_PuckCanvas--ready_avf1c_57", "PuckCanvas-loader": "_PuckCanvas-loader_avf1c_62", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_avf1c_72" };
 
 // lib/get-zoom-config.ts
 init_react_import();
@@ -6491,7 +5123,7 @@ var getZoomConfig = (uiViewport, frame, zoom) => {
 };
 
 // components/Puck/components/Canvas/index.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var getClassName26 = get_class_name_factory_default("PuckCanvas", styles_module_default21);
 var ZOOM_ON_CHANGE = true;
 var Canvas = () => {
@@ -6501,7 +5133,7 @@ var Canvas = () => {
   const frameRef = (0, import_react33.useRef)(null);
   const [showTransition, setShowTransition] = (0, import_react33.useState)(false);
   const defaultRender = (0, import_react33.useMemo)(() => {
-    const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children });
+    const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children });
     return PuckDefault;
   }, []);
   const CustomPreview = (0, import_react33.useMemo)(
@@ -6545,13 +5177,15 @@ var Canvas = () => {
     }
   }, [ui.viewports.current.width]);
   (0, import_react33.useEffect)(() => {
-    const cb = () => {
+    const observer = new ResizeObserver(() => {
       setShowTransition(false);
       resetAutoZoom();
-    };
-    window.addEventListener("resize", cb);
+    });
+    if (document.body) {
+      observer.observe(document.body);
+    }
     return () => {
-      window.removeEventListener("resize", cb);
+      observer.disconnect();
     };
   }, []);
   const [showLoader, setShowLoader] = (0, import_react33.useState)(false);
@@ -6560,7 +5194,7 @@ var Canvas = () => {
       setShowLoader(true);
     }, 500);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "div",
     {
       className: getClassName26({
@@ -6573,7 +5207,7 @@ var Canvas = () => {
         recordHistory: true
       }),
       children: [
-        ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: getClassName26("controls"), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: getClassName26("controls"), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           ViewportControls,
           {
             autoZoom: zoomConfig.autoZoom,
@@ -6585,8 +5219,7 @@ var Canvas = () => {
                 zoom: zoomConfig.zoom
               });
               const newUi = __spreadProps(__spreadValues({}, ui), {
-                viewports: __spreadProps(__spreadValues({}, ui.viewports), { current: uiViewport }),
-                itemSelector: null
+                viewports: __spreadProps(__spreadValues({}, ui.viewports), { current: uiViewport })
               });
               setUi(newUi);
               if (ZOOM_ON_CHANGE) {
@@ -6599,8 +5232,8 @@ var Canvas = () => {
             }
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: getClassName26("inner"), ref: frameRef, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: getClassName26("inner"), ref: frameRef, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "div",
             {
               className: getClassName26("root"),
@@ -6612,25 +5245,51 @@ var Canvas = () => {
                 overflow: iframe.enabled ? void 0 : "auto"
               },
               suppressHydrationWarning: true,
-              id: "puck-canvas-root",
-              onTransitionEnd: () => {
-                window.dispatchEvent(
-                  new CustomEvent("viewportchange", {
-                    bubbles: true,
-                    cancelable: false
-                  })
-                );
-              },
-              children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Preview, {}) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Preview, {}) })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: getClassName26("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Loader, { size: 24 }) })
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: getClassName26("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Loader, { size: 24 }) })
         ] })
       ]
     }
   );
 };
 
+// lib/insert-component.ts
+init_react_import();
+var insertComponent = (componentType, zone, index, {
+  config,
+  dispatch,
+  resolveData,
+  state
+}) => {
+  const id = generateId(componentType);
+  const insertActionData = {
+    type: "insert",
+    componentType,
+    destinationIndex: index,
+    destinationZone: zone,
+    id
+  };
+  const insertedData = insertAction(state.data, insertActionData, config);
+  dispatch(__spreadProps(__spreadValues({}, insertActionData), {
+    // Dispatch insert rather set, as user's may rely on this via onAction
+    // We must always record history here so the insert is added to user history
+    // If the user has defined a resolveData method, they will end up with 2 history
+    // entries on insert - one for the initial insert, and one when the data resolves
+    recordHistory: true
+  }));
+  const itemSelector = {
+    index,
+    zone
+  };
+  dispatch({ type: "setUi", ui: { itemSelector } });
+  resolveData({
+    data: insertedData,
+    ui: __spreadProps(__spreadValues({}, state.ui), { itemSelector })
+  });
+};
+
 // lib/use-loaded-overrides.ts
 init_react_import();
 var import_react34 = require("react");
@@ -6679,79 +5338,11 @@ var useLoadedOverrides = ({
 
 // components/DefaultOverride/index.tsx
 init_react_import();
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var DefaultOverride = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children });
-
-// components/Puck/index.tsx
-var import_dom2 = require("@dnd-kit/dom");
-
-// lib/use-inject-css.ts
-init_react_import();
-var import_react35 = require("react");
-var styles = `
-/* Prevent user from interacting with underlying component */
-[data-puck-component] * {
-  pointer-events: none;
-  user-select: none;
-    -webkit-user-select: none;
-}
-
-[data-puck-component] {
-  cursor: grab;
-  pointer-events: auto !important;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-[data-puck-disabled] {
-  cursor: pointer;
-}
-
-/* Placeholder */
-[data-puck-dragging]:not([data-dnd-dragging]) {
-  background: var(--puck-color-azure-06) !important;
-  border: none !important;
-  color: #00000000 !important;
-  opacity: 0.3 !important;
-  outline: none !important;
-  transition: none !important;
-}
-
-[data-puck-dragging]:not([data-dnd-dragging]) *, [data-puck-dragging]:not([data-dnd-dragging])::after, [data-puck-dragging]:not([data-dnd-dragging])::before {
-  opacity: 0 !important;
-}
-
-[data-dnd-dragging] {
-  pointer-events: none !important;
-  outline: 2px var(--puck-color-azure-09) solid !important;
-  outline-offset: -2px !important;
-}
-`;
-var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
-  const [el, setEl] = (0, import_react35.useState)();
-  (0, import_react35.useEffect)(() => {
-    setEl(document.createElement("style"));
-  }, []);
-  (0, import_react35.useEffect)(() => {
-    var _a;
-    if (!el || typeof window === "undefined") {
-      return;
-    }
-    el.innerHTML = initialStyles;
-    if (iframeEnabled) {
-      const frame = getFrame();
-      (_a = frame == null ? void 0 : frame.head) == null ? void 0 : _a.appendChild(el);
-    }
-    document.head.appendChild(el);
-  }, [iframeEnabled, el]);
-  return el;
-};
-var useInjectGlobalCss = (iframeEnabled) => {
-  return useInjectStyleSheet(styles, iframeEnabled);
-};
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var DefaultOverride = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children });
 
 // components/Puck/index.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("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({
@@ -6774,14 +5365,13 @@ function Puck({
   dnd,
   initialHistory: _initialHistory
 }) {
-  var _a, _b;
+  var _a;
   const iframe = __spreadValues({
     enabled: true,
     waitForStyles: true
   }, _iframe);
-  useInjectGlobalCss(iframe.enabled);
-  const [generatedAppState] = (0, import_react36.useState)(() => {
-    var _a2, _b2, _c, _d, _e, _f, _g, _h, _i;
+  const [generatedAppState] = (0, import_react35.useState)(() => {
+    var _a2, _b, _c, _d, _e, _f, _g, _h, _i;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
     if (typeof window !== "undefined") {
@@ -6801,7 +5391,7 @@ function Puck({
         clientUiState = __spreadProps(__spreadValues({}, clientUiState), {
           viewports: __spreadProps(__spreadValues({}, initial.viewports), {
             current: __spreadProps(__spreadValues({}, initial.viewports.current), {
-              height: ((_b2 = (_a2 = initialUi == null ? void 0 : initialUi.viewports) == null ? void 0 : _a2.current) == null ? void 0 : _b2.height) || ((_c = viewports[closestViewport]) == null ? void 0 : _c.height) || "auto",
+              height: ((_b = (_a2 = initialUi == null ? void 0 : initialUi.viewports) == null ? void 0 : _a2.current) == null ? void 0 : _b.height) || ((_c = viewports[closestViewport]) == null ? void 0 : _c.height) || "auto",
               width: ((_e = (_d = initialUi == null ? void 0 : initialUi.viewports) == null ? void 0 : _d.current) == null ? void 0 : _e.width) || ((_f = viewports[closestViewport]) == null ? void 0 : _f.width)
             })
           })
@@ -6852,32 +5442,40 @@ function Puck({
     histories,
     index: initialHistoryIndex
   });
-  const [reducer] = (0, import_react36.useState)(
+  const [reducer] = (0, import_react35.useState)(
     () => createReducer({
       config,
       record: historyStore.record,
       onAction
     })
   );
-  const [appState, dispatch] = (0, import_react36.useReducer)(
+  const [appState, dispatch] = (0, import_react35.useReducer)(
     reducer,
     flushZones(initialAppState)
   );
   const { data, ui } = appState;
-  const history = usePuckHistory({
-    dispatch,
-    initialAppState,
-    historyStore,
-    iframeEnabled: (_a = _iframe == null ? void 0 : _iframe.enabled) != null ? _a : true
-  });
-  const [menuOpen, setMenuOpen] = (0, import_react36.useState)(false);
+  const history = usePuckHistory({ dispatch, initialAppState, historyStore });
+  const [menuOpen, setMenuOpen] = (0, import_react35.useState)(false);
   const { itemSelector, leftSideBarVisible, rightSideBarVisible } = ui;
+  const setItemSelector = (0, import_react35.useCallback)(
+    (newItemSelector) => {
+      if (newItemSelector === itemSelector) return;
+      dispatch({
+        type: "setUi",
+        ui: { itemSelector: newItemSelector },
+        recordHistory: true
+      });
+    },
+    [itemSelector]
+  );
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
-  (0, import_react36.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (onChange) onChange(data);
   }, [data]);
+  const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
+  const [draggedItem, setDraggedItem] = (0, import_react35.useState)();
   const rootProps = data.root.props || data.root;
-  const toggleSidebars = (0, import_react36.useCallback)(
+  const toggleSidebars = (0, import_react35.useCallback)(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -6891,7 +5489,7 @@ function Puck({
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  (0, import_react36.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -6914,28 +5512,28 @@ function Puck({
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  const defaultHeaderRender = (0, import_react36.useMemo)(() => {
+  const defaultHeaderRender = (0, import_react35.useMemo)(() => {
     if (renderHeader) {
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
       );
       const RenderHeader = (_a2) => {
-        var _b2 = _a2, { actions } = _b2, props = __objRest(_b2, ["actions"]);
+        var _b = _a2, { actions } = _b, props = __objRest(_b, ["actions"]);
         const Comp = renderHeader;
-        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
+        return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
       };
       return RenderHeader;
     }
     return DefaultOverride;
   }, [renderHeader]);
-  const defaultHeaderActionsRender = (0, import_react36.useMemo)(() => {
+  const defaultHeaderActionsRender = (0, import_react35.useMemo)(() => {
     if (renderHeaderActions) {
       console.warn(
         "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
       );
       const RenderHeader = (props) => {
         const Comp = renderHeaderActions;
-        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
+        return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
       };
       return RenderHeader;
     }
@@ -6945,27 +5543,26 @@ function Puck({
     overrides,
     plugins
   });
-  const CustomPuck = (0, import_react36.useMemo)(
+  const CustomPuck = (0, import_react35.useMemo)(
     () => loadedOverrides.puck || DefaultOverride,
     [loadedOverrides]
   );
-  const CustomHeader = (0, import_react36.useMemo)(
+  const CustomHeader = (0, import_react35.useMemo)(
     () => loadedOverrides.header || defaultHeaderRender,
     [loadedOverrides]
   );
-  const CustomHeaderActions = (0, import_react36.useMemo)(
+  const CustomHeaderActions = (0, import_react35.useMemo)(
     () => loadedOverrides.headerActions || defaultHeaderActionsRender,
     [loadedOverrides]
   );
-  const [mounted, setMounted] = (0, import_react36.useState)(false);
-  (0, import_react36.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react35.useState)(false);
+  (0, import_react35.useEffect)(() => {
     setMounted(true);
   }, []);
   const selectedComponentConfig = selectedItem && config.components[selectedItem.type];
-  const selectedComponentLabel = selectedItem ? (_b = selectedComponentConfig == null ? void 0 : selectedComponentConfig["label"]) != null ? _b : selectedItem.type.toString() : "";
-  const [manager] = (0, import_react36.useState)(new import_dom2.DragDropManager({ plugins: [import_dom2.Feedback] }));
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: `Puck ${getClassName27()}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  const selectedComponentLabel = selectedItem ? (_a = selectedComponentConfig == null ? void 0 : selectedComponentConfig["label"]) != null ? _a : selectedItem.type.toString() : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: `Puck ${getClassName27()}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       AppProvider,
       {
         value: {
@@ -6987,133 +5584,233 @@ function Puck({
           getPermissions: () => ({}),
           refreshPermissions: () => null
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DragDropContext2, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CustomPuck, { children: children || /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-          "div",
+        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(appContext.Consumer, { children: ({ resolveData }) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          DragDropContext,
           {
-            className: getLayoutClassName({
-              leftSideBarVisible,
-              menuOpen,
-              mounted,
-              rightSideBarVisible
-            }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: getLayoutClassName("inner"), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                CustomHeader,
-                {
-                  actions: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                    Button,
-                    {
-                      onClick: () => {
-                        onPublish && onPublish(data);
-                      },
-                      icon: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Globe, { size: "14px" }),
-                      children: "Publish"
-                    }
-                  ) }) }),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("header", { className: getLayoutClassName("header"), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: getLayoutClassName("headerInner"), children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: getLayoutClassName("headerToggle"), children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                        "div",
-                        {
-                          className: getLayoutClassName("leftSideBarToggle"),
-                          children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                            IconButton,
-                            {
-                              onClick: () => {
-                                toggleSidebars("left");
-                              },
-                              title: "Toggle left sidebar",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PanelLeft, { focusable: "false" })
-                            }
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                        "div",
-                        {
-                          className: getLayoutClassName("rightSideBarToggle"),
-                          children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                            IconButton,
-                            {
-                              onClick: () => {
-                                toggleSidebars("right");
-                              },
-                              title: "Toggle right sidebar",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PanelRight, { focusable: "false" })
-                            }
-                          )
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: getLayoutClassName("headerTitle"), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Heading, { rank: "2", size: "xs", children: [
-                      headerTitle || rootProps.title || "Page",
-                      headerPath && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-                        " ",
-                        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                          "code",
-                          {
-                            className: getLayoutClassName("headerPath"),
-                            children: headerPath
-                          }
-                        )
-                      ] })
-                    ] }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: getLayoutClassName("headerTools"), children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: getLayoutClassName("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                        IconButton,
-                        {
-                          onClick: () => {
-                            return setMenuOpen(!menuOpen);
-                          },
-                          title: "Toggle menu bar",
-                          children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ChevronDown, { focusable: "false" })
-                        }
-                      ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                        MenuBar,
+            autoScrollerOptions: { disabled: dnd == null ? void 0 : dnd.disableAutoScroll },
+            onDragUpdate: (update) => {
+              setDraggedItem(__spreadValues(__spreadValues({}, draggedItem), update));
+              onDragStartOrUpdate(update);
+            },
+            onBeforeDragStart: (start) => {
+              onDragStartOrUpdate(start);
+              setItemSelector(null);
+              dispatch({ type: "setUi", ui: { isDragging: true } });
+            },
+            onDragEnd: (droppedItem) => {
+              setDraggedItem(void 0);
+              dispatch({ type: "setUi", ui: { isDragging: false } });
+              if (!droppedItem.destination) {
+                return;
+              }
+              if (droppedItem.source.droppableId.startsWith("component-list") && droppedItem.destination) {
+                const [_, componentType] = droppedItem.draggableId.split("::");
+                insertComponent(
+                  componentType || droppedItem.draggableId,
+                  droppedItem.destination.droppableId,
+                  droppedItem.destination.index,
+                  { config, dispatch, resolveData, state: appState }
+                );
+                return;
+              } else {
+                const { source, destination } = droppedItem;
+                if (source.droppableId === destination.droppableId) {
+                  dispatch({
+                    type: "reorder",
+                    sourceIndex: source.index,
+                    destinationIndex: destination.index,
+                    destinationZone: destination.droppableId
+                  });
+                } else {
+                  dispatch({
+                    type: "move",
+                    sourceZone: source.droppableId,
+                    sourceIndex: source.index,
+                    destinationIndex: destination.index,
+                    destinationZone: destination.droppableId
+                  });
+                }
+                setItemSelector({
+                  index: destination.index,
+                  zone: destination.droppableId
+                });
+              }
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              DropZoneProvider,
+              {
+                value: {
+                  data,
+                  itemSelector,
+                  setItemSelector,
+                  config,
+                  dispatch,
+                  draggedItem,
+                  placeholderStyle,
+                  mode: "edit",
+                  areaId: "root"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CustomPuck, { children: children || /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                  "div",
+                  {
+                    className: getLayoutClassName({
+                      leftSideBarVisible,
+                      menuOpen,
+                      mounted,
+                      rightSideBarVisible
+                    }),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: getLayoutClassName("inner"), children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                        CustomHeader,
                         {
-                          appState,
-                          dispatch,
-                          onPublish,
-                          menuOpen,
-                          renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                          actions: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                             Button,
                             {
                               onClick: () => {
                                 onPublish && onPublish(data);
                               },
-                              icon: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Globe, { size: "14px" }),
+                              icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Globe, { size: "14px" }),
                               children: "Publish"
                             }
-                          ) }),
-                          setMenuOpen
+                          ) }) }),
+                          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("header", { className: getLayoutClassName("header"), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: getLayoutClassName("headerInner"), children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+                              "div",
+                              {
+                                className: getLayoutClassName("headerToggle"),
+                                children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                                    "div",
+                                    {
+                                      className: getLayoutClassName(
+                                        "leftSideBarToggle"
+                                      ),
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                                        IconButton,
+                                        {
+                                          onClick: () => {
+                                            toggleSidebars("left");
+                                          },
+                                          title: "Toggle left sidebar",
+                                          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PanelLeft, { focusable: "false" })
+                                        }
+                                      )
+                                    }
+                                  ),
+                                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                                    "div",
+                                    {
+                                      className: getLayoutClassName(
+                                        "rightSideBarToggle"
+                                      ),
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                                        IconButton,
+                                        {
+                                          onClick: () => {
+                                            toggleSidebars("right");
+                                          },
+                                          title: "Toggle right sidebar",
+                                          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PanelRight, { focusable: "false" })
+                                        }
+                                      )
+                                    }
+                                  )
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                              "div",
+                              {
+                                className: getLayoutClassName("headerTitle"),
+                                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Heading, { rank: "2", size: "xs", children: [
+                                  headerTitle || rootProps.title || "Page",
+                                  headerPath && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+                                    " ",
+                                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                                      "code",
+                                      {
+                                        className: getLayoutClassName(
+                                          "headerPath"
+                                        ),
+                                        children: headerPath
+                                      }
+                                    )
+                                  ] })
+                                ] })
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+                              "div",
+                              {
+                                className: getLayoutClassName("headerTools"),
+                                children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                                    "div",
+                                    {
+                                      className: getLayoutClassName("menuButton"),
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                                        IconButton,
+                                        {
+                                          onClick: () => {
+                                            return setMenuOpen(!menuOpen);
+                                          },
+                                          title: "Toggle menu bar",
+                                          children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ChevronDown, { focusable: "false" })
+                                        }
+                                      )
+                                    }
+                                  ),
+                                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                                    MenuBar,
+                                    {
+                                      appState,
+                                      dispatch,
+                                      onPublish,
+                                      menuOpen,
+                                      renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                                        Button,
+                                        {
+                                          onClick: () => {
+                                            onPublish && onPublish(data);
+                                          },
+                                          icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Globe, { size: "14px" }),
+                                          children: "Publish"
+                                        }
+                                      ) }),
+                                      setMenuOpen
+                                    }
+                                  )
+                                ]
+                              }
+                            )
+                          ] }) })
                         }
-                      )
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: getLayoutClassName("leftSideBar"), children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Components, {}) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Outline, {}) })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Canvas, {}),
+                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: getLayoutClassName("rightSideBar"), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                        SidebarSection,
+                        {
+                          noPadding: true,
+                          noBorderTop: true,
+                          showBreadcrumbs: true,
+                          title: selectedItem ? selectedComponentLabel : "Page",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Fields, {})
+                        }
+                      ) })
                     ] })
-                  ] }) })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: getLayoutClassName("leftSideBar"), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Components, {}) }),
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Outline, {}) })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Canvas, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: getLayoutClassName("rightSideBar"), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                SidebarSection,
-                {
-                  noPadding: true,
-                  noBorderTop: true,
-                  showBreadcrumbs: true,
-                  title: selectedItem ? selectedComponentLabel : "Page",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Fields, {})
-                }
-              ) })
-            ] })
+                  }
+                ) })
+              }
+            )
           }
-        ) }) })
+        ) })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { id: "puck-portal-root", className: getClassName27("portal") })
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { id: "puck-portal-root", className: getClassName27("portal") })
   ] });
 }
 Puck.Components = Components;
@@ -7123,7 +5820,7 @@ Puck.Preview = Preview;
 
 // components/Render/index.tsx
 init_react_import();
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function Render({
   config,
   data
@@ -7136,45 +5833,21 @@ 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__ */ (0, import_jsx_runtime40.jsx)(
-      DropZoneProvider,
-      {
-        value: {
-          data: defaultedData,
-          config,
-          mode: "render",
-          depth: 0,
-          path: []
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DropZoneProvider, { value: { data: defaultedData, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      config.root.render,
+      __spreadProps(__spreadValues({}, rootProps), {
+        puck: {
+          renderDropZone: DropZone,
+          isEditing: false
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-          config.root.render,
-          __spreadProps(__spreadValues({}, rootProps), {
-            puck: {
-              renderDropZone: DropZone,
-              isEditing: false
-            },
-            title,
-            editMode: false,
-            id: "puck-root",
-            children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(DropZone, { zone: rootDroppableId })
-          })
-        )
-      }
-    );
+        title,
+        editMode: false,
+        id: "puck-root",
+        children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DropZone, { zone: rootDroppableId })
+      })
+    ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-    DropZoneProvider,
-    {
-      value: {
-        data: defaultedData,
-        config,
-        mode: "render",
-        depth: 0,
-        path: []
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(DropZone, { zone: rootDroppableId })
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DropZoneProvider, { value: { data: defaultedData, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DropZone, { zone: rootDroppableId }) });
 }
 
 // lib/migrate.ts
@@ -7286,6 +5959,11 @@ var usePuck = () => {
     getPermissions,
     refreshPermissions
   } = useAppContext();
+  if (dispatch === defaultContext.dispatch) {
+    throw new Error(
+      "usePuck was used outside of the <Puck> component. The usePuck hook must be rendered within the <Puck> context as children, overrides or plugins as described in https://puckeditor.com/docs/api-reference/functions/use-puck."
+    );
+  }
   return {
     appState,
     config,