@measured/puck 0.17.0-canary.35170f8 → 0.17.0-canary.6e568de

package/dist/index.mjs

@@ -2,6 +2,9 @@ import {
   __async,
   __commonJS,
   __objRest,
+  __privateAdd,
+  __privateGet,
+  __privateSet,
   __spreadProps,
   __spreadValues,
   __toESM,
@@ -13,7 +16,7 @@ import {
   resolveRootData,
   rootDroppableId,
   setupZone
-} from "./chunk-7IH6SUIT.mjs";
+} from "./chunk-EXKSBUY5.mjs";
 
 // ../../node_modules/classnames/index.js
 var require_classnames = __commonJS({
@@ -73,6 +76,9 @@ init_react_import();
 // types/API/index.ts
 init_react_import();
 
+// types/API/DropZone.ts
+init_react_import();
+
 // types/API/Viewports.ts
 init_react_import();
 
@@ -117,26 +123,26 @@ init_react_import();
 // lib/get-class-name-factory.ts
 init_react_import();
 var import_classnames = __toESM(require_classnames());
-var getClassNameFactory = (rootClass, styles, config = { baseClass: "" }) => (options = {}) => {
+var getClassNameFactory = (rootClass, styles2, config = { baseClass: "" }) => (options = {}) => {
   if (typeof options === "string") {
     const descendant = options;
-    const style = styles[`${rootClass}-${descendant}`];
+    const style = styles2[`${rootClass}-${descendant}`];
     if (style) {
-      return config.baseClass + styles[`${rootClass}-${descendant}`] || "";
+      return config.baseClass + styles2[`${rootClass}-${descendant}`] || "";
     }
     return "";
   } else if (typeof options === "object") {
     const modifiers = options;
     const prefixedModifiers = {};
     for (let modifier in modifiers) {
-      prefixedModifiers[styles[`${rootClass}--${modifier}`]] = modifiers[modifier];
+      prefixedModifiers[styles2[`${rootClass}--${modifier}`]] = modifiers[modifier];
     }
-    const c = styles[rootClass];
+    const c = styles2[rootClass];
     return config.baseClass + (0, import_classnames.default)(__spreadValues({
       [c]: !!c
     }, prefixedModifiers));
   } else {
-    return config.baseClass + styles[rootClass] || "";
+    return config.baseClass + styles2[rootClass] || "";
   }
 };
 var get_class_name_factory_default = getClassNameFactory;
@@ -588,7 +594,7 @@ var IconButton = ({
   return el;
 };
 
-// components/Droppable/index.tsx
+// components/LegacyDnd/Droppable/index.tsx
 init_react_import();
 import {
   Droppable as DndDroppable
@@ -622,9 +628,6 @@ var defaultViewports = [
   { width: 1280, height: "auto", icon: "Monitor", label: "Large" }
 ];
 
-// components/Puck/context.tsx
-import { UAParser } from "ua-parser-js";
-
 // lib/use-resolved-permissions.ts
 init_react_import();
 import { useCallback, useEffect, useState as useState2 } from "react";
@@ -905,7 +908,6 @@ var defaultContext = {
   status: "LOADING",
   setStatus: () => null,
   iframe: {},
-  safariFallbackMode: false,
   globalPermissions: {},
   getPermissions: () => ({}),
   refreshPermissions: () => null
@@ -920,24 +922,6 @@ var AppProvider = ({
   useEffect3(() => {
     setStatus("MOUNTED");
   }, []);
-  const [safariFallbackMode, setSafariFallbackMode] = useState4(false);
-  useEffect3(() => {
-    var _a, _b, _c;
-    const ua = new 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] = useState4({});
   const setComponentLoading = (id) => {
@@ -984,7 +968,6 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
         setZoomConfig,
         status,
         setStatus,
-        safariFallbackMode,
         getPermissions,
         refreshPermissions,
         componentState,
@@ -1009,7 +992,7 @@ function useAppContext() {
   });
 }
 
-// components/Droppable/index.tsx
+// components/LegacyDnd/Droppable/index.tsx
 import { Fragment as Fragment2, jsx as jsx5 } from "react/jsx-runtime";
 var defaultProvided = {
   droppableProps: {
@@ -1032,7 +1015,7 @@ var Droppable = (props) => {
   return /* @__PURE__ */ jsx5(El, __spreadValues({}, props));
 };
 
-// components/Draggable/index.tsx
+// components/LegacyDnd/Draggable/index.tsx
 init_react_import();
 import {
   Draggable as DndDraggable
@@ -1116,7 +1099,7 @@ import { jsx as jsx7 } from "react/jsx-runtime";
 var getClassName4 = get_class_name_factory_default("DragIcon", styles_module_default5);
 var DragIcon = ({ isDragDisabled }) => /* @__PURE__ */ jsx7("div", { className: getClassName4({ disabled: isDragDisabled }), children: /* @__PURE__ */ jsx7("svg", { viewBox: "0 0 20 20", width: "12", fill: "currentColor", children: /* @__PURE__ */ jsx7("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/DragDropContext/index.tsx
+// components/LegacyDnd/DragDropContext/index.tsx
 init_react_import();
 import {
   DragDropContext as DndDragDropContext
@@ -2249,105 +2232,49 @@ 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_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" };
+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" };
 
 // components/Drawer/index.tsx
+import { useMemo as useMemo5, useState as useState16 } from "react";
+
+// components/DragDropContext/index.tsx
+init_react_import();
+import { DragDropProvider } from "@dnd-kit/react";
 import {
-  createContext as createContext2,
-  useContext as useContext2,
-  useMemo as useMemo3
+  createContext as createContext3,
+  useCallback as useCallback9,
+  useContext as useContext4,
+  useEffect as useEffect13,
+  useRef as useRef5,
+  useState as useState15
 } from "react";
-import { jsx as jsx21, jsxs as jsxs10 } from "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 = createContext2({
-  droppableId: ""
-});
-var DrawerDraggable = ({
-  children,
-  id,
-  index,
-  isDragDisabled
-}) => {
-  return /* @__PURE__ */ jsx21(
-    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 = useContext2(drawerContext);
-  const resolvedId = `${ctx.droppableId}::${id || name}`;
-  const CustomInner = useMemo3(
-    () => children || (({ children: children2, name: name2 }) => /* @__PURE__ */ jsx21("div", { className: getClassNameItem2("default"), children: children2 })),
-    [children]
-  );
-  return /* @__PURE__ */ jsx21(
-    DrawerDraggable,
-    {
-      id: resolvedId,
-      index,
-      isDragDisabled,
-      children: /* @__PURE__ */ jsx21(CustomInner, { name, children: /* @__PURE__ */ jsx21("div", { className: getClassNameItem2("draggableWrapper"), children: /* @__PURE__ */ jsxs10("div", { className: getClassNameItem2("draggable"), children: [
-        /* @__PURE__ */ jsx21("div", { className: getClassNameItem2("name"), children: label != null ? label : name }),
-        /* @__PURE__ */ jsx21("div", { className: getClassNameItem2("icon"), children: /* @__PURE__ */ jsx21(DragIcon, { isDragDisabled }) })
-      ] }) }) })
-    }
-  );
-};
-var Drawer = ({
-  children,
-  droppableId: _droppableId = "default",
-  direction = "vertical"
-}) => {
-  const droppableId = `component-list:${_droppableId}`;
-  return /* @__PURE__ */ jsx21(drawerContext.Provider, { value: { droppableId }, children: /* @__PURE__ */ jsx21(Droppable, { droppableId, isDropDisabled: true, direction, children: (provided, snapshot) => /* @__PURE__ */ jsxs10(
-    "div",
-    __spreadProps(__spreadValues({}, provided.droppableProps), {
-      ref: provided.innerRef,
-      className: getClassName16({
-        isDraggingFrom: !!snapshot.draggingFromThisWith
-      }),
-      children: [
-        children,
-        /* @__PURE__ */ jsx21("span", { style: { display: "none" }, children: provided.placeholder })
-      ]
-    })
-  ) }) });
-};
-Drawer.Item = DrawerItem;
+import { defaultPreset } from "@dnd-kit/dom";
 
 // components/DropZone/index.tsx
 init_react_import();
-import { useContext as useContext3, useEffect as useEffect12 } from "react";
+import {
+  useCallback as useCallback8,
+  useContext as useContext3,
+  useEffect as useEffect12,
+  useMemo as useMemo4,
+  useRef as useRef4,
+  useState as useState14
+} from "react";
 
 // components/DraggableComponent/index.tsx
 init_react_import();
 import {
+  useCallback as useCallback6,
+  useContext as useContext2,
   useEffect as useEffect11,
-  useMemo as useMemo4,
+  useMemo as useMemo3,
+  useRef as useRef3,
   useState as useState12
 } from "react";
-import { Draggable as Draggable2 } from "@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_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" };
+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" };
 
 // lib/use-modifier-held.ts
 init_react_import();
@@ -2375,183 +2302,768 @@ var useModifierHeld = (modifier) => {
   return modifierHeld;
 };
 
-// lib/is-ios.ts
+// components/DraggableComponent/index.tsx
+import { createPortal as createPortal2 } from "react-dom";
+
+// components/DraggableComponent/collision/dynamic/index.ts
+init_react_import();
+import {
+  CollisionPriority as CollisionPriority7,
+  CollisionType as CollisionType7
+} from "@dnd-kit/abstract";
+
+// components/DraggableComponent/collision/directional/index.ts
+init_react_import();
+import { CollisionType } from "@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: 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();
+import { Point } from "@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 = Point.from(point);
+  }
+  return intervalCache;
+};
+
+// ../../node_modules/@dnd-kit/collision/dist/index.js
+init_react_import();
+import { CollisionPriority, CollisionType as CollisionType2 } from "@dnd-kit/abstract";
+import { Point as Point2 } from "@dnd-kit/geometry";
+import { CollisionPriority as CollisionPriority2, CollisionType as CollisionType22 } from "@dnd-kit/abstract";
+import { Point as Point22 } from "@dnd-kit/geometry";
+import { CollisionPriority as CollisionPriority3, CollisionType as CollisionType3 } from "@dnd-kit/abstract";
+import { Point as Point3 } from "@dnd-kit/geometry";
+import { CollisionPriority as CollisionPriority4, CollisionType as CollisionType4 } from "@dnd-kit/abstract";
+import { Point as Point4 } from "@dnd-kit/geometry";
+import { CollisionPriority as CollisionPriority5, CollisionType as CollisionType5 } from "@dnd-kit/abstract";
+import { Point as Point5 } from "@dnd-kit/geometry";
+import { CollisionPriority as CollisionPriority6, CollisionType as CollisionType6 } from "@dnd-kit/abstract";
+import { Point as Point6 } from "@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 = Point2.distance(droppable.shape.center, pointerCoordinates);
+    return {
+      id,
+      value: 1 / distance,
+      type: CollisionType2.PointerIntersection,
+      priority: 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 + Point3.distance(
+        Point3.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: CollisionType3.Collision,
+    priority: CollisionPriority3.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: CollisionPriority7.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: CollisionPriority7.High,
+      type: CollisionType7.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: CollisionPriority7.Low
+          });
+        }
+        collisionDebug(
+          dragCenter,
+          dropCenter,
+          droppable.id.toString(),
+          "orange",
+          direction || ""
+        );
+        return __spreadProps(__spreadValues({}, fallbackCollision), { priority: CollisionPriority7.Lowest });
+      }
+    }
+  }
+  collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "hotpink");
+  delete collisionMap[droppable.id];
+  return null;
+};
+
+// lib/dnd-kit/safe.ts
+init_react_import();
+import {
+  useDraggable,
+  useDroppable
+} from "@dnd-kit/react";
+import { useSortable } from "@dnd-kit/react/sortable";
+function useDroppableSafe(input) {
+  if (typeof window === "undefined") {
+    return { ref: () => {
+    } };
+  }
+  return useDroppable(input);
+}
+function useDraggableSafe(input) {
+  if (typeof window === "undefined") {
+    return { ref: () => {
+    } };
+  }
+  return useDraggable(input);
+}
+function useSortableSafe(input) {
+  if (typeof window === "undefined") {
+    return { ref: () => {
+    }, status: "idle" };
+  }
+  return useSortable(input);
+}
+
+// lib/get-deep-scroll-position.ts
 init_react_import();
-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;
+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;
+}
 
 // components/DraggableComponent/index.tsx
-import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
-var getClassName17 = get_class_name_factory_default("DraggableComponent", styles_module_default11);
+import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+var getClassName16 = get_class_name_factory_default("DraggableComponent", styles_module_default11);
+var DEBUG2 = false;
 var space = 8;
 var actionsOverlayTop = space * 6.5;
 var actionsTop = -(actionsOverlayTop - 8);
-var actionsRight = space;
+var actionsSide = space;
 var DefaultActionBar = ({
   label,
   children
-}) => /* @__PURE__ */ jsx22(ActionBar, { label, children: /* @__PURE__ */ jsx22(ActionBar.Group, { children }) });
+}) => /* @__PURE__ */ jsx21(ActionBar, { label, children: /* @__PURE__ */ jsx21(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,
-  isLocked = false,
-  isDragDisabled,
-  forceHover = false,
-  indicativeHover = false,
-  style
+  isEnabled,
+  autoDragAxis,
+  userDragAxis,
+  inDroppableZone = true
 }) => {
-  const { zoomConfig, status, overrides, selectedItem, getPermissions } = useAppContext();
+  const {
+    zoomConfig,
+    overrides,
+    selectedItem,
+    getPermissions,
+    dispatch,
+    iframe,
+    state
+  } = useAppContext();
   const isModifierHeld = useModifierHeld("Alt");
-  const El = status !== "LOADING" ? Draggable2 : DefaultDraggable;
-  useEffect11(onMount, []);
-  const [disableSecondaryAnimation, setDisableSecondaryAnimation] = useState12(false);
+  const ctx = useContext2(dropZoneContext);
+  const [localZones, setLocalZones] = useState12({});
+  const registerLocalZone = useCallback6(
+    (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] = useState12(false);
   useEffect11(() => {
-    if (isIos()) {
-      setDisableSecondaryAnimation(true);
+    var _a;
+    const item = getItem({ index, zone: zoneCompound }, state.data);
+    if (item) {
+      const perms = getPermissions({
+        item
+      });
+      setCanDrag((_a = perms.drag) != null ? _a : true);
     }
-  }, []);
-  const CustomActionBar = useMemo4(
+  }, [state, index, zoneCompound, getPermissions]);
+  const userIsDragging = !!(ctx == null ? void 0 : ctx.draggedItem);
+  const canCollide = canDrag || userIsDragging;
+  const disabled = !isEnabled || !canCollide;
+  const [dragAxis, setDragAxis] = useState12(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 = useRef3();
+  const refSetter = useCallback6(
+    (el) => {
+      sortableRef(el);
+      if (el) {
+        ref.current = el;
+      }
+    },
+    [sortableRef]
+  );
+  const [portalEl, setPortalEl] = useState12();
+  useEffect11(() => {
+    var _a, _b, _c;
+    setPortalEl(
+      iframe.enabled ? (_a = ref.current) == null ? void 0 : _a.ownerDocument.body : (_c = (_b = ref.current) == null ? void 0 : _b.closest("[data-puck-preview]")) != null ? _c : document.body
+    );
+  }, [iframe.enabled, ref.current]);
+  const getStyle = useCallback6(() => {
+    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] = useState12();
+  const sync = useCallback6(() => {
+    setStyle(getStyle());
+  }, [ref.current, iframe]);
+  useEffect11(() => {
+    if (ref.current) {
+      const observer = new ResizeObserver(sync);
+      observer.observe(ref.current);
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, [ref.current]);
+  useEffect11(() => {
+    ctx == null ? void 0 : ctx.registerPath({
+      index,
+      zone: zoneCompound
+    });
+  }, [isSelected]);
+  const CustomActionBar = useMemo3(
     () => overrides.actionBar || DefaultActionBar,
     [overrides.actionBar]
   );
   const permissions = getPermissions({
     item: selectedItem
   });
-  return /* @__PURE__ */ jsx22(
-    El,
-    {
-      draggableId: id,
-      index,
-      isDragDisabled,
-      disableSecondaryAnimation,
-      children: (provided, snapshot) => /* @__PURE__ */ jsxs11(
-        "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__ */ jsx22("div", { className: getClassName17("loadingOverlay"), children: /* @__PURE__ */ jsx22(Loader, {}) }),
-            isSelected && /* @__PURE__ */ jsx22(
-              "div",
-              {
-                className: getClassName17("actionsOverlay"),
-                style: {
-                  top: actionsOverlayTop / zoomConfig.zoom
-                },
-                children: /* @__PURE__ */ jsx22(
-                  "div",
-                  {
-                    className: getClassName17("actions"),
-                    style: {
-                      transform: `scale(${1 / zoomConfig.zoom}`,
-                      top: actionsTop / zoomConfig.zoom,
-                      right: actionsRight / zoomConfig.zoom
-                    },
-                    children: /* @__PURE__ */ jsxs11(CustomActionBar, { label, children: [
-                      permissions.duplicate && /* @__PURE__ */ jsx22(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ jsx22(Copy, { size: 16 }) }),
-                      permissions.delete && /* @__PURE__ */ jsx22(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ jsx22(Trash, { size: 16 }) })
-                    ] })
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx22("div", { className: getClassName17("overlay") }),
-            /* @__PURE__ */ jsx22("div", { className: getClassName17("contents"), children })
-          ]
-        })
-      )
+  const onClick = useCallback6(
+    (e) => {
+      e.stopPropagation();
+      dispatch({
+        type: "setUi",
+        ui: {
+          itemSelector: { index, zone: zoneCompound }
+        }
+      });
     },
-    id
+    [index, zoneCompound, id]
+  );
+  const onDuplicate = useCallback6(
+    (e) => {
+      e.stopPropagation();
+      dispatch({
+        type: "duplicate",
+        sourceIndex: index,
+        sourceZone: zoneCompound
+      });
+    },
+    [index, zoneCompound]
+  );
+  const onDelete = useCallback6(
+    (e) => {
+      e.stopPropagation();
+      dispatch({
+        type: "remove",
+        index,
+        zone: zoneCompound
+      });
+    },
+    [index, zoneCompound]
+  );
+  const [hover, setHover] = useState12(false);
+  const indicativeHover = (ctx == null ? void 0 : ctx.hoveringComponent) === id;
+  useEffect11(() => {
+    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
+  ]);
+  useEffect11(() => {
+    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] = useState12(false);
+  useEffect11(() => {
+    sync();
+    if ((isSelected || hover || indicativeHover) && !userIsDragging) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  }, [isSelected, hover, indicativeHover, iframe, state.data, userIsDragging]);
+  const syncActionsPosition = useCallback6(
+    (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]
+  );
+  useEffect11(() => {
+    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__ */ jsxs10(
+    DropZoneProvider,
+    {
+      value: __spreadProps(__spreadValues({}, ctx), {
+        areaId: id,
+        zoneCompound,
+        index,
+        depth: depth + 1,
+        registerLocalZone,
+        path: [...path, id]
+      }),
+      children: [
+        isVisible && createPortal2(
+          /* @__PURE__ */ jsxs10(
+            "div",
+            {
+              className: getClassName16({
+                isSelected,
+                isDragging: thisIsDragging,
+                isModifierHeld,
+                hover: hover || indicativeHover
+              }),
+              style: __spreadValues({}, style),
+              children: [
+                debug,
+                isLoading && /* @__PURE__ */ jsx21("div", { className: getClassName16("loadingOverlay"), children: /* @__PURE__ */ jsx21(Loader, {}) }),
+                /* @__PURE__ */ jsx21(
+                  "div",
+                  {
+                    className: getClassName16("actionsOverlay"),
+                    style: {
+                      top: actionsOverlayTop / zoomConfig.zoom
+                    },
+                    children: /* @__PURE__ */ jsx21(
+                      "div",
+                      {
+                        className: getClassName16("actions"),
+                        style: {
+                          transform: `scale(${1 / zoomConfig.zoom}`,
+                          top: actionsTop / zoomConfig.zoom,
+                          right: 0,
+                          paddingLeft: actionsSide,
+                          paddingRight: actionsSide
+                        },
+                        ref: syncActionsPosition,
+                        children: /* @__PURE__ */ jsxs10(CustomActionBar, { label: DEBUG2 ? id : label, children: [
+                          permissions.duplicate && /* @__PURE__ */ jsx21(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ jsx21(Copy, { size: 16 }) }),
+                          permissions.delete && /* @__PURE__ */ jsx21(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ jsx21(Trash, { size: 16 }) })
+                        ] })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx21("div", { className: getClassName16("overlay") })
+              ]
+            }
+          ),
+          portalEl || document.body
+        ),
+        children(refSetter)
+      ]
+    }
   );
 };
-
-// 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_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();
-import {
-  createContext as createContext3,
-  useCallback as useCallback6,
-  useState as useState13
-} from "react";
-import { useDebounce } from "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];
-};
+
+// 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" };
 
 // components/DropZone/context.tsx
-import { Fragment as Fragment9, jsx as jsx23 } from "react/jsx-runtime";
-var dropZoneContext = createContext3(null);
+init_react_import();
+import { createContext as createContext2, useCallback as useCallback7, useState as useState13 } from "react";
+import { Fragment as Fragment9, jsx as jsx22 } from "react/jsx-runtime";
+var dropZoneContext = createContext2(null);
 var DropZoneProvider = ({
   children,
   value
 }) => {
-  const [hoveringArea, setHoveringArea] = useState13(null);
-  const [hoveringZone, setHoveringZone] = useState13(
-    rootDroppableId
-  );
   const [hoveringComponent, setHoveringComponent] = useState13();
-  const [hoveringAreaDb] = useDebounce(hoveringArea, 75, { leading: false });
   const [areasWithZones, setAreasWithZones] = useState13(
     {}
   );
   const [activeZones, setActiveZones] = useState13({});
   const { dispatch = null } = value ? value : {};
-  const registerZoneArea = useCallback6(
+  const registerZoneArea = useCallback7(
     (area) => {
       setAreasWithZones((latest) => __spreadProps(__spreadValues({}, latest), { [area]: true }));
     },
     [setAreasWithZones]
   );
-  const registerZone = useCallback6(
+  const registerZone = useCallback7(
     (zoneCompound) => {
       if (!dispatch) {
         return;
@@ -2564,7 +3076,7 @@ var DropZoneProvider = ({
     },
     [setActiveZones, dispatch]
   );
-  const unregisterZone = useCallback6(
+  const unregisterZone = useCallback7(
     (zoneCompound) => {
       if (!dispatch) {
         return;
@@ -2579,81 +3091,65 @@ var DropZoneProvider = ({
     },
     [setActiveZones, dispatch]
   );
-  const [pathData, setPathData] = useState13();
-  const registerPath = useCallback6(
-    (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] = useState13("");
-  return /* @__PURE__ */ jsx23(Fragment9, { children: value && /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx22(Fragment9, { children: value && /* @__PURE__ */ jsx22(
     dropZoneContext.Provider,
     {
       value: __spreadValues({
-        hoveringArea: value.draggedItem ? hoveringAreaDb : hoveringArea,
-        setHoveringArea,
-        hoveringZone,
-        setHoveringZone,
         hoveringComponent,
         setHoveringComponent,
         registerZoneArea,
         areasWithZones,
         registerZone,
         unregisterZone,
-        activeZones,
-        registerPath,
-        pathData,
-        zoneWillDrag,
-        setZoneWillDrag
+        activeZones
       }, 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
-import { Fragment as Fragment10, jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
-var getClassName18 = get_class_name_factory_default("DropZone", styles_module_default12);
-function DropZoneEdit({ zone, allow, disallow, style }) {
-  var _a;
+import { Fragment as Fragment10, jsx as jsx23, jsxs as jsxs11 } from "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
+}) {
   const appContext2 = useAppContext();
   const ctx = useContext3(dropZoneContext);
   const {
     // These all need setting via context
     data,
-    dispatch = () => null,
     config,
-    itemSelector,
-    setItemSelector = () => null,
     areaId,
     draggedItem,
-    placeholderStyle,
     registerZoneArea,
-    areasWithZones,
-    hoveringComponent,
-    zoneWillDrag,
-    setZoneWillDrag = () => null
-  } = ctx || {};
+    depth,
+    registerLocalZone,
+    deepestZone = rootDroppableId,
+    deepestArea,
+    nextDeepestArea,
+    path = []
+  } = ctx;
+  const { itemSelector } = appContext2.state.ui;
   let content = data.content || [];
   let zoneCompound = rootDroppableId;
   useEffect12(() => {
@@ -2662,6 +3158,9 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
     }
   }, [areaId]);
   useEffect12(() => {
+    if (registerLocalZone) {
+      registerLocalZone(zoneCompound, isDroppableTarget());
+    }
     if (ctx == null ? void 0 : ctx.registerZone) {
       ctx == null ? void 0 : ctx.registerZone(zoneCompound);
     }
@@ -2677,246 +3176,198 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
       content = setupZone(data, zoneCompound).zones[zoneCompound];
     }
   }
-  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__ */ jsx24("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 ref = useRef4();
+  const isDroppableTarget = useCallback8(() => {
+    if (!draggedItem) {
+      return true;
     }
-  }
-  if (isEnabled && userIsDragging && (allow || disallow)) {
-    const [_, componentType] = draggedItem.draggableId.split("::");
+    const { componentType } = draggedItem.data;
     if (disallow) {
       const defaultedAllow = allow || [];
       const filteredDisallow = (disallow || []).filter(
         (item) => defaultedAllow.indexOf(item) === -1
       );
       if (filteredDisallow.indexOf(componentType) !== -1) {
-        isEnabled = false;
+        return false;
       }
     } else if (allow) {
       if (allow.indexOf(componentType) === -1) {
-        isEnabled = false;
+        return false;
       }
     }
+    return true;
+  }, [draggedItem]);
+  useEffect12(() => {
+    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 = useContext3(previewContext);
+  const previewInZone = (preview == null ? void 0 : preview.zone) === zoneCompound;
+  const contentWithPreview = useMemo4(() => {
+    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 && zoneArea === selectedItem.props.id;
-  return /* @__PURE__ */ jsx24(
+  const isAreaSelected = selectedItem && areaId === selectedItem.props.id;
+  const [dragAxis, setDragAxis] = useState14(
+    collisionAxis || DEFAULT_DRAG_AXIS
+  );
+  const calculateDragAxis = useCallback8(() => {
+    if (ref.current) {
+      const computedStyle = window.getComputedStyle(ref.current);
+      if (computedStyle.display === "grid") {
+        setDragAxis(GRID_DRAG_AXIS);
+      } else if (computedStyle.display === "flex" && computedStyle.flexDirection === "row") {
+        setDragAxis(FLEX_ROW_DRAG_AXIS);
+      } else {
+        setDragAxis(DEFAULT_DRAG_AXIS);
+      }
+    }
+  }, [ref.current]);
+  useEffect12(calculateDragAxis, [appContext2.status, collisionAxis]);
+  useEffect12(() => {
+    const onViewportChange = () => {
+      calculateDragAxis();
+    };
+    window.addEventListener("viewportchange", onViewportChange);
+    return () => {
+      window.removeEventListener("viewportchange", onViewportChange);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
-      className: getClassName18({
+      className: `${getClassName17({
         isRootZone,
         userIsDragging,
-        draggingOverArea,
         hoveringOverArea,
-        draggingNewComponent,
-        isDestination: draggedDestinationId === zoneCompound,
-        isDisabled: !isEnabled,
+        isEnabled,
         isAreaSelected,
         hasChildren: content.length > 0
-      }),
-      onMouseUp: () => {
-        setZoneWillDrag("");
+      })}${className ? ` ${className}` : ""}`,
+      ref: (node) => {
+        ref.current = node;
+        dropRef(node);
+        if (dragRef) dragRef(node);
       },
-      children: /* @__PURE__ */ jsx24(
-        Droppable,
-        {
-          droppableId: zoneCompound,
-          direction: "vertical",
-          isDropDisabled: !isEnabled,
-          children: (provided, snapshot) => {
-            return /* @__PURE__ */ jsxs12(
-              "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__ */ jsxs12("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__ */ jsxs12(
-                      "div",
-                      {
-                        className: getClassName18("item"),
-                        style: { zIndex: isDragging ? 1 : void 0 },
-                        children: [
-                          /* @__PURE__ */ jsx24(
-                            DropZoneProvider,
-                            {
-                              value: __spreadProps(__spreadValues({}, ctx), {
-                                areaId: componentId
-                              }),
-                              children: /* @__PURE__ */ jsx24(
-                                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__ */ jsx24("div", { className: getClassName18("renderWrapper"), children: /* @__PURE__ */ jsx24(Render2, __spreadValues({}, defaultedProps)) })
-                                }
-                              )
-                            }
-                          ),
-                          userIsDragging && /* @__PURE__ */ jsx24(
-                            "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__ */ jsx24(
-                    "div",
-                    {
-                      "data-puck-placeholder": true,
-                      style: __spreadProps(__spreadValues({}, placeholderStyle), {
-                        background: "var(--puck-color-azure-06)",
-                        opacity: 0.3,
-                        zIndex: 0
-                      })
-                    }
-                  )
-                ]
-              })
-            );
+      style: __spreadProps(__spreadValues({}, style), {
+        "--min-empty-height": `${minEmptyHeight}px`
+      }),
+      children: [
+        isRootZone && DEBUG3 && /* @__PURE__ */ jsxs11(Fragment10, { children: [
+          /* @__PURE__ */ jsx23("p", { children: deepestZone || rootDroppableId }),
+          /* @__PURE__ */ jsx23("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__ */ jsxs11("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__ */ jsx23(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__ */ jsx23(
+            DropZoneProvider,
+            {
+              value: __spreadProps(__spreadValues({}, ctx), { path: [...path, zoneCompound] }),
+              children: /* @__PURE__ */ jsx23(
+                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__ */ jsx23(
+                    Render2,
+                    __spreadProps(__spreadValues({}, defaultedProps), {
+                      puck: __spreadProps(__spreadValues({}, defaultedProps.puck), {
+                        dragRef: dragRef2
+                      })
+                    })
+                  ) : /* @__PURE__ */ jsx23("div", { ref: dragRef2, children: /* @__PURE__ */ jsx23(Render2, __spreadValues({}, defaultedProps)) })
+                }
+              )
+            },
+            componentId
+          );
+        })
+      ]
     }
   );
 }
-function DropZoneRender({ zone }) {
+function DropZoneRender({ className, style, zone }) {
   const ctx = useContext3(dropZoneContext);
   const { data, areaId = "root", config } = ctx || {};
   let zoneCompound = rootDroppableId;
@@ -2928,17 +3379,23 @@ function DropZoneRender({ zone }) {
     zoneCompound = `${areaId}:${zone}`;
     content = setupZone(data, zoneCompound).zones[zoneCompound];
   }
-  return /* @__PURE__ */ jsx24(Fragment10, { children: content.map((item) => {
+  return /* @__PURE__ */ jsx23("div", { className, style, children: content.map((item) => {
     const Component = config.components[item.type];
     if (Component) {
-      return /* @__PURE__ */ jsx24(
+      return /* @__PURE__ */ jsx23(
         DropZoneProvider,
         {
-          value: { data, config, areaId: item.props.id },
-          children: /* @__PURE__ */ jsx24(
+          value: {
+            data,
+            config,
+            areaId: item.props.id,
+            depth: 1,
+            path: []
+          },
+          children: /* @__PURE__ */ jsx23(
             Component.render,
             __spreadProps(__spreadValues({}, item.props), {
-              puck: { renderDropZone: DropZone }
+              puck: { renderDropZone: DropZoneRender }
             })
           )
         },
@@ -2951,196 +3408,222 @@ function DropZoneRender({ zone }) {
 function DropZone(props) {
   const ctx = useContext3(dropZoneContext);
   if ((ctx == null ? void 0 : ctx.mode) === "edit") {
-    return /* @__PURE__ */ jsx24(DropZoneEdit, __spreadValues({}, props));
+    return /* @__PURE__ */ jsx23(Fragment10, { children: /* @__PURE__ */ jsx23(DropZoneEdit, __spreadValues({}, props)) });
   }
-  return /* @__PURE__ */ jsx24(DropZoneRender, __spreadValues({}, props));
+  return /* @__PURE__ */ jsx23(Fragment10, { children: /* @__PURE__ */ jsx23(DropZoneRender, __spreadValues({}, props)) });
 }
 
-// components/Puck/index.tsx
+// lib/get-zone-id.ts
 init_react_import();
-import {
-  useCallback as useCallback11,
-  useEffect as useEffect18,
-  useMemo as useMemo13,
-  useReducer,
-  useState as useState21
-} from "react";
+var getZoneId = (zoneCompound) => {
+  if (!zoneCompound) {
+    return [];
+  }
+  if (zoneCompound && zoneCompound.indexOf(":") > -1) {
+    return zoneCompound.split(":");
+  }
+  return [rootDroppableId, zoneCompound];
+};
 
-// lib/use-placeholder-style.ts
+// components/DragDropContext/NestedDroppablePlugin.ts
 init_react_import();
-import { useState as useState14 } from "react";
+import { Plugin } from "@dnd-kit/abstract";
+import { effects } from "@dnd-kit/state";
 
-// lib/get-frame.ts
+// lib/throttle.ts
 init_react_import();
-var getFrame = () => {
-  let frame = document.querySelector("#preview-frame");
-  if ((frame == null ? void 0 : frame.tagName) === "IFRAME") {
-    frame = frame.contentDocument;
+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));
+    }
+  };
+}
+
+// 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;
+    }
+    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;
+    }
+  } else if (candidate.type === "void") {
+    return "void";
   }
-  return frame;
+  return id;
 };
-
-// lib/use-placeholder-style.ts
-var usePlaceholderStyle = () => {
-  const queryAttr = "data-rfd-drag-handle-draggable-id";
-  const [placeholderStyle, setPlaceholderStyle] = useState14();
-  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;
+var getAreaId = (candidate) => {
+  if (candidate.type === "component") {
+    const data = candidate.data;
+    if (data.containsActiveZone) {
+      return candidate.id;
     }
-    const targetListElement = frame == null ? void 0 : frame.querySelector(
-      `[data-rfd-droppable-id='${droppableId}']`
-    );
-    const { clientHeight } = draggedDOM;
-    if (!targetListElement) {
-      return;
+  }
+  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
+  };
+};
+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);
+      }
     }
-    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 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)
+    );
+    const draggedCandidateId = draggable == null ? void 0 : draggable.id;
+    let filteredCandidates = [...sortedCandidates];
+    if (draggedCandidateId && draggedCandidateIndex > -1) {
+      filteredCandidates.splice(draggedCandidateIndex, 1);
     }
-    setPlaceholderStyle({
-      position: "absolute",
-      top: clientY,
-      left: 0,
-      height: clientHeight,
-      width: "100%"
+    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 true;
     });
+    filteredCandidates.reverse();
+    const zone = getZoneId2(filteredCandidates[0]);
+    const area = getDeepestId(filteredCandidates, getAreaId);
+    return { zone, area };
+  }
+  return {
+    zone: "default-zone",
+    area: null
   };
-  return { onDragStartOrUpdate, placeholderStyle };
 };
-
-// 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();
-import { useContext as useContext4, useMemo as useMemo5 } from "react";
-var convertPathDataToBreadcrumbs = (selectedItem, pathData, data) => {
-  const id = selectedItem ? selectedItem == null ? void 0 : selectedItem.props.id : "";
-  const currentPathData = pathData && id && pathData[id] ? __spreadValues({}, pathData[id]) : { label: "Page", path: [] };
-  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 = useContext4(dropZoneContext);
-  return useMemo5(() => {
-    const breadcrumbs = convertPathDataToBreadcrumbs(
-      selectedItem,
-      dzContext == null ? void 0 : dzContext.pathData,
-      data
-    );
-    if (renderCount) {
-      return breadcrumbs.slice(breadcrumbs.length - renderCount);
+var createNestedDroppablePlugin = ({
+  onChange
+}) => class NestedDroppablePlugin extends Plugin {
+  constructor(manager, options) {
+    super(manager);
+    if (typeof window === "undefined") {
+      return;
     }
-    return breadcrumbs;
-  }, [selectedItem, dzContext == null ? void 0 : dzContext.pathData, renderCount]);
+    const cleanupEffect = 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();
+      };
+    });
+  }
 };
 
-// components/SidebarSection/index.tsx
-import { jsx as jsx25, jsxs as jsxs13 } from "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__ */ jsxs13(
-    "div",
-    {
-      className: getClassName19({ noBorderTop, noPadding }),
-      style: { background },
-      children: [
-        /* @__PURE__ */ jsx25("div", { className: getClassName19("title"), children: /* @__PURE__ */ jsxs13("div", { className: getClassName19("breadcrumbs"), children: [
-          showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs13("div", { className: getClassName19("breadcrumb"), children: [
-            /* @__PURE__ */ jsx25(
-              "button",
-              {
-                type: "button",
-                className: getClassName19("breadcrumbLabel"),
-                onClick: () => setUi({ itemSelector: breadcrumb.selector }),
-                children: breadcrumb.label
-              }
-            ),
-            /* @__PURE__ */ jsx25(ChevronRight, { size: 16 })
-          ] }, i)) : null,
-          /* @__PURE__ */ jsx25("div", { className: getClassName19("heading"), children: /* @__PURE__ */ jsx25(Heading, { rank: "2", size: "xs", children: title }) })
-        ] }) }),
-        /* @__PURE__ */ jsx25("div", { className: getClassName19("content"), children }),
-        isLoading && /* @__PURE__ */ jsx25("div", { className: getClassName19("loadingOverlay"), children: /* @__PURE__ */ jsx25(Loader, { size: 32 }) })
-      ]
-    }
-  );
-};
+// lib/insert-component.ts
+init_react_import();
 
 // reducer/index.ts
 init_react_import();
@@ -3148,14 +3631,6 @@ 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) => {
@@ -3283,6 +3758,27 @@ 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);
@@ -3318,27 +3814,12 @@ function reduceData(data, action, config) {
     });
   }
   if (action.type === "reorder") {
-    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
-        )
-      })
-    });
+    return reorderAction(data, action);
   }
   if (action.type === "move") {
+    if (action.sourceZone === action.destinationZone && action.sourceIndex === action.destinationIndex) {
+      return data;
+    }
     const newData = setupZone(
       setupZone(data, action.sourceZone),
       action.destinationZone
@@ -3347,6 +3828,9 @@ 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),
@@ -3443,6 +3927,11 @@ 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;
 };
 
@@ -3490,7 +3979,855 @@ function createReducer({
     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
+import { useDebouncedCallback as useDebouncedCallback2 } from "use-debounce";
+import { isElement as isElement2 } from "@dnd-kit/dom/utilities";
+
+// components/DragDropContext/PointerSensor.ts
+init_react_import();
+import { batch, effect } from "@dnd-kit/state";
+import { Sensor, configurator } from "@dnd-kit/abstract";
+import {
+  exceedsDistance
+} from "@dnd-kit/geometry";
+import {
+  getDocument,
+  isElement,
+  isHTMLElement,
+  isPointerEvent,
+  Listeners,
+  getFrameTransform
+} from "@dnd-kit/dom/utilities";
+var _clearTimeout;
+var _PointerSensor = class _PointerSensor extends Sensor {
+  constructor(manager, options) {
+    super(manager);
+    this.manager = manager;
+    this.options = options;
+    this.listeners = new 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);
+    effect(() => {
+      const unbindGlobal = this.bindGlobal(options != null ? options : {});
+      return () => {
+        unbindGlobal();
+      };
+    });
+  }
+  bind(source, options = this.options) {
+    const unbind = effect(() => {
+      var _a;
+      const target = (_a = source.handle) != null ? _a : source.element;
+      const listener = (event) => {
+        if (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(getDocument(draggable.element));
+      }
+    }
+    for (const droppable of this.manager.registry.droppables.value) {
+      if (droppable.element) {
+        documents.add(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 || !isElement(event.target) || source.disabled) {
+      return;
+    }
+    const offset = 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 && getDocument(this.source.element);
+    if (doc !== ownerDocument) {
+      return;
+    }
+    const coordinates = {
+      x: event.clientX,
+      y: event.clientY
+    };
+    const offset = 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 && exceedsDistance(delta, distance.tolerance)) {
+        return this.handleCancel();
+      }
+      if (exceedsDistance(delta, distance.value)) {
+        return this.handleStart(this.source, event);
+      }
+    }
+    if (delay) {
+      if (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();
+    batch(() => {
+      manager.actions.setDragSource(source.id);
+      manager.actions.start({ coordinates: initialCoordinates, event });
+    });
+    const ownerDocument = 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 (!isElement(target)) {
+      return;
+    }
+    const isNativeDraggable = 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 = 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
+import { jsx as jsx24 } from "react/jsx-runtime";
+var dragListenerContext = createContext3({
+  dragListeners: {}
+});
+function useDragListener(type, fn, deps = []) {
+  const { setDragListeners } = useContext4(dragListenerContext);
+  useEffect13(() => {
+    if (setDragListeners) {
+      setDragListeners((old) => __spreadProps(__spreadValues({}, old), {
+        [type]: [...old[type] || [], fn]
+      }));
+    }
+  }, deps);
+}
+var previewContext = createContext3(null);
+var AREA_CHANGE_DEBOUNCE_MS = 100;
+var DragDropContextClient = ({ children }) => {
+  const { state, config, dispatch, resolveData } = useAppContext();
+  const [preview, setPreview] = useState15(null);
+  const previewRef = useRef5(null);
+  const { data } = state;
+  const [deepest, setDeepest] = useState15(null);
+  const [nextDeepest, setNextDeepest] = useState15(null);
+  const deepestRef = useRef5(deepest);
+  const dbDeepestRef = useRef5(deepest);
+  const setDeepestDb = useDebouncedCallback2((params) => {
+    setDeepest(params);
+    dbDeepestRef.current = params;
+  }, AREA_CHANGE_DEBOUNCE_MS);
+  const setDeepestDbMaybe = useCallback9(
+    (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] = useState15(() => [
+    ...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] = useState15(() => [
+    PointerSensor.configure({
+      activationConstraints(event, source) {
+        var _a;
+        const { pointerType, target } = event;
+        if (pointerType === "mouse" && isElement2(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] = useState15();
+  const [dragListeners, setDragListeners] = useState15({});
+  const [pathData, setPathData] = useState15();
+  const dragMode = useRef5(null);
+  const registerPath = useCallback9(
+    (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 = useRef5();
+  return /* @__PURE__ */ jsx24(
+    dragListenerContext.Provider,
+    {
+      value: {
+        dragListeners,
+        setDragListeners
+      },
+      children: /* @__PURE__ */ jsx24(previewContext.Provider, { value: preview, children: /* @__PURE__ */ jsx24(
+        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__ */ jsx24(
+            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__ */ jsx24(DragDropContextClient, { children });
+};
+
+// components/Drawer/index.tsx
+import { jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
+var getClassName18 = get_class_name_factory_default("Drawer", styles_module_default10);
+var getClassNameItem2 = get_class_name_factory_default("DrawerItem", styles_module_default10);
+var DrawerItemInner = ({
+  children,
+  name,
+  label,
+  dragRef,
+  isDragDisabled
+}) => {
+  const CustomInner = useMemo5(
+    () => children || (({ children: children2 }) => /* @__PURE__ */ jsx25("div", { className: getClassNameItem2("default"), children: children2 })),
+    [children]
+  );
+  return /* @__PURE__ */ jsx25(
+    "div",
+    {
+      className: getClassNameItem2({ disabled: isDragDisabled }),
+      ref: dragRef,
+      onMouseDown: (e) => e.preventDefault(),
+      children: /* @__PURE__ */ jsx25(CustomInner, { name, children: /* @__PURE__ */ jsx25("div", { className: getClassNameItem2("draggableWrapper"), children: /* @__PURE__ */ jsxs12("div", { className: getClassNameItem2("draggable"), children: [
+        /* @__PURE__ */ jsx25("div", { className: getClassNameItem2("name"), children: label != null ? label : name }),
+        /* @__PURE__ */ jsx25("div", { className: getClassNameItem2("icon"), children: /* @__PURE__ */ jsx25(DragIcon, {}) })
+      ] }) }) })
+    }
+  );
+};
+var DrawerItemDraggable = ({
+  children,
+  name,
+  label,
+  id,
+  isDragDisabled
+}) => {
+  const { ref } = useDraggableSafe({
+    id,
+    data: { type: "drawer", componentType: name },
+    disabled: isDragDisabled
+  });
+  return /* @__PURE__ */ jsx25(
+    DrawerItemInner,
+    {
+      name,
+      label,
+      dragRef: ref,
+      isDragDisabled,
+      children
+    }
+  );
+};
+var DrawerItem = ({
+  name,
+  children,
+  id,
+  label,
+  index,
+  isDragDisabled
+}) => {
+  const resolvedId = id || name;
+  const [dynamicId, setDynamicId] = useState16(generateId(resolvedId));
+  if (typeof index !== "undefined") {
+    console.error(
+      "Warning: The `index` prop on Drawer.Item is deprecated and no longer required."
+    );
+  }
+  useDragListener(
+    "dragend",
+    () => {
+      setDynamicId(generateId(resolvedId));
+    },
+    [resolvedId]
+  );
+  return /* @__PURE__ */ jsx25("div", { children: /* @__PURE__ */ jsx25(
+    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] = useState16(generateId());
+  const { ref } = useDroppableSafe({
+    id,
+    type: "void",
+    collisionPriority: 0
+    // Never collide with this, but we use it so NestedDroppablePlugin respects the Drawer
+  });
+  return /* @__PURE__ */ jsx25("div", { className: getClassName18(), ref, children });
+};
+Drawer.Item = DrawerItem;
+
+// components/Puck/index.tsx
+init_react_import();
+import {
+  useCallback as useCallback14,
+  useEffect as useEffect21,
+  useMemo as useMemo14,
+  useReducer,
+  useState as useState24
+} from "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();
+import { useContext as useContext5, useMemo as useMemo6 } from "react";
+var convertPathDataToBreadcrumbs = (selectedItem, pathData, data) => {
+  const id = selectedItem ? selectedItem == null ? void 0 : selectedItem.props.id : "";
+  const currentPathData = pathData && id && pathData[id] ? __spreadValues({}, pathData[id]) : { label: "Page", path: [] };
+  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 = useContext5(dropZoneContext);
+  return useMemo6(() => {
+    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
+import { jsx as jsx26, jsxs as jsxs13 } from "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__ */ jsxs13(
+    "div",
+    {
+      className: getClassName19({ noBorderTop, noPadding }),
+      style: { background },
+      children: [
+        /* @__PURE__ */ jsx26("div", { className: getClassName19("title"), children: /* @__PURE__ */ jsxs13("div", { className: getClassName19("breadcrumbs"), children: [
+          showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs13("div", { className: getClassName19("breadcrumb"), children: [
+            /* @__PURE__ */ jsx26(
+              "button",
+              {
+                type: "button",
+                className: getClassName19("breadcrumbLabel"),
+                onClick: () => setUi({ itemSelector: breadcrumb.selector }),
+                children: breadcrumb.label
+              }
+            ),
+            /* @__PURE__ */ jsx26(ChevronRight, { size: 16 })
+          ] }, i)) : null,
+          /* @__PURE__ */ jsx26("div", { className: getClassName19("heading"), children: /* @__PURE__ */ jsx26(Heading, { rank: "2", size: "xs", children: title }) })
+        ] }) }),
+        /* @__PURE__ */ jsx26("div", { className: getClassName19("content"), children }),
+        isLoading && /* @__PURE__ */ jsx26("div", { className: getClassName19("loadingOverlay"), children: /* @__PURE__ */ jsx26(Loader, { size: 32 }) })
+      ]
+    }
+  );
+};
 
 // lib/flush-zones.ts
 init_react_import();
@@ -3517,7 +4854,7 @@ init_react_import();
 var styles_module_default14 = { "MenuBar": "_MenuBar_8pf8c_1", "MenuBar--menuOpen": "_MenuBar--menuOpen_8pf8c_14", "MenuBar-inner": "_MenuBar-inner_8pf8c_29", "MenuBar-history": "_MenuBar-history_8pf8c_45" };
 
 // components/MenuBar/index.tsx
-import { Fragment as Fragment11, jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
 var getClassName20 = get_class_name_factory_default("MenuBar", styles_module_default14);
 function MenuBar({
   appState,
@@ -3531,7 +4868,7 @@ function MenuBar({
     history: { back, forward, historyStore }
   } = useAppContext();
   const { hasFuture = false, hasPast = false } = historyStore || {};
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       className: getClassName20({ menuOpen }),
@@ -3547,10 +4884,10 @@ function MenuBar({
       },
       children: /* @__PURE__ */ jsxs14("div", { className: getClassName20("inner"), children: [
         /* @__PURE__ */ jsxs14("div", { className: getClassName20("history"), children: [
-          /* @__PURE__ */ jsx26(IconButton, { title: "undo", disabled: !hasPast, onClick: back, children: /* @__PURE__ */ jsx26(Undo2, { size: 21 }) }),
-          /* @__PURE__ */ jsx26(IconButton, { title: "redo", disabled: !hasFuture, onClick: forward, children: /* @__PURE__ */ jsx26(Redo2, { size: 21 }) })
+          /* @__PURE__ */ jsx27(IconButton, { title: "undo", disabled: !hasPast, onClick: back, children: /* @__PURE__ */ jsx27(Undo2, { size: 21 }) }),
+          /* @__PURE__ */ jsx27(IconButton, { title: "redo", disabled: !hasFuture, onClick: forward, children: /* @__PURE__ */ jsx27(Redo2, { size: 21 }) })
         ] }),
-        /* @__PURE__ */ jsx26(Fragment11, { children: renderHeaderActions && renderHeaderActions({
+        /* @__PURE__ */ jsx27(Fragment11, { children: renderHeaderActions && renderHeaderActions({
           state: appState,
           dispatch
         }) })
@@ -3571,8 +4908,24 @@ init_react_import();
 var styles_module_default16 = { "PuckFields": "_PuckFields_jp3lw_1", "PuckFields--isLoading": "_PuckFields--isLoading_jp3lw_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_jp3lw_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_jp3lw_25" };
 
 // components/Puck/components/Fields/index.tsx
-import { useCallback as useCallback7, useEffect as useEffect13, useMemo as useMemo6, useState as useState15 } from "react";
-import { Fragment as Fragment12, jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+import { useCallback as useCallback10, useEffect as useEffect14, useMemo as useMemo7, useState as useState17 } from "react";
+
+// lib/use-parent.ts
+init_react_import();
+import { useContext as useContext6 } from "react";
+var useParent = (itemSelector) => {
+  var _a;
+  const { selectedItem, state } = useAppContext();
+  const { pathData } = useContext6(dropZoneContext) || {};
+  const item = itemSelector ? getItem(itemSelector, state.data) : selectedItem;
+  const breadcrumbs = convertPathDataToBreadcrumbs(item, pathData, state.data);
+  const lastItem = breadcrumbs[breadcrumbs.length - 1];
+  const parent = (lastItem == null ? void 0 : lastItem.selector) ? (_a = getItem(lastItem.selector, state.data)) != null ? _a : null : null;
+  return parent || null;
+};
+
+// components/Puck/components/Fields/index.tsx
+import { Fragment as Fragment12, jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
 var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
 var defaultPageFields = {
   title: { type: "text" }
@@ -3580,28 +4933,29 @@ var defaultPageFields = {
 var DefaultFields = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx27(Fragment12, { children });
+  return /* @__PURE__ */ jsx28(Fragment12, { children });
 };
 var useResolvedFields = () => {
   var _a, _b;
   const { selectedItem, state, config } = useAppContext();
+  const parent = useParent();
   const { data } = state;
   const rootFields = ((_a = config.root) == null ? void 0 : _a.fields) || defaultPageFields;
   const componentConfig = selectedItem ? config.components[selectedItem.type] : null;
-  const defaultFields = useMemo6(
+  const defaultFields = useMemo7(
     () => (selectedItem ? componentConfig == null ? void 0 : componentConfig.fields : rootFields) || {},
     [selectedItem, rootFields, componentConfig == null ? void 0 : componentConfig.fields]
   );
   const rootProps = data.root.props || data.root;
-  const [lastSelectedData, setLastSelectedData] = useState15({});
-  const [resolvedFields, setResolvedFields] = useState15(defaultFields);
-  const [fieldsLoading, setFieldsLoading] = useState15(false);
+  const [lastSelectedData, setLastSelectedData] = useState17({});
+  const [resolvedFields, setResolvedFields] = useState17(defaultFields);
+  const [fieldsLoading, setFieldsLoading] = useState17(false);
   const defaultResolveFields = (_componentData, _params) => defaultFields;
   const componentData = selectedItem ? selectedItem : { props: rootProps, readOnly: data.root.readOnly };
   const hasComponentResolver = selectedItem && (componentConfig == null ? void 0 : componentConfig.resolveFields);
   const hasRootResolver = !selectedItem && ((_b = config.root) == null ? void 0 : _b.resolveFields);
   const hasResolver = hasComponentResolver || hasRootResolver;
-  const resolveFields = useCallback7(
+  const resolveFields = useCallback10(
     (..._0) => __async(void 0, [..._0], function* (fields = {}) {
       var _a2;
       const lastData = ((_a2 = lastSelectedData.props) == null ? void 0 : _a2.id) === componentData.props.id ? lastSelectedData : null;
@@ -3615,7 +4969,8 @@ var useResolvedFields = () => {
             fields,
             lastFields: resolvedFields,
             lastData,
-            appState: state
+            appState: state,
+            parent
           }
         );
       }
@@ -3625,7 +4980,8 @@ var useResolvedFields = () => {
           fields,
           lastFields: resolvedFields,
           lastData,
-          appState: state
+          appState: state,
+          parent
         });
       }
       return defaultResolveFields(componentData, {
@@ -3637,7 +4993,7 @@ var useResolvedFields = () => {
     }),
     [data, config, componentData, selectedItem, resolvedFields, state]
   );
-  useEffect13(() => {
+  useEffect14(() => {
     if (hasResolver) {
       setFieldsLoading(true);
       resolveFields(defaultFields).then((fields) => {
@@ -3647,7 +5003,7 @@ var useResolvedFields = () => {
     } else {
       setResolvedFields(defaultFields);
     }
-  }, [data, defaultFields, state.ui.itemSelector, hasResolver]);
+  }, [data, defaultFields, selectedItem, hasResolver]);
   return [resolvedFields, fieldsLoading];
 };
 var Fields = () => {
@@ -3668,7 +5024,7 @@ var Fields = () => {
   const componentResolving = selectedItem ? ((_a = componentState[selectedItem == null ? void 0 : selectedItem.props.id]) == null ? void 0 : _a.loadingCount) > 0 : ((_b = componentState["puck-root"]) == null ? void 0 : _b.loadingCount) > 0;
   const isLoading = fieldsResolving || componentResolving;
   const rootProps = data.root.props || data.root;
-  const Wrapper = useMemo6(() => overrides.fields || DefaultFields, [overrides]);
+  const Wrapper = useMemo7(() => overrides.fields || DefaultFields, [overrides]);
   return /* @__PURE__ */ jsxs15(
     "form",
     {
@@ -3677,7 +5033,7 @@ var Fields = () => {
         e.preventDefault();
       },
       children: [
-        /* @__PURE__ */ jsx27(Wrapper, { isLoading, itemSelector, children: Object.keys(fields).map((fieldName) => {
+        /* @__PURE__ */ jsx28(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) => {
@@ -3747,7 +5103,7 @@ var Fields = () => {
             const { edit } = getPermissions({
               item: selectedItem
             });
-            return /* @__PURE__ */ jsx27(
+            return /* @__PURE__ */ jsx28(
               AutoFieldPrivate,
               {
                 field,
@@ -3764,7 +5120,7 @@ var Fields = () => {
             const { edit } = getPermissions({
               root: true
             });
-            return /* @__PURE__ */ jsx27(
+            return /* @__PURE__ */ jsx28(
               AutoFieldPrivate,
               {
                 field,
@@ -3778,7 +5134,7 @@ var Fields = () => {
             );
           }
         }) }),
-        isLoading && /* @__PURE__ */ jsx27("div", { className: getClassName21("loadingOverlay"), children: /* @__PURE__ */ jsx27("div", { className: getClassName21("loadingOverlayInner"), children: /* @__PURE__ */ jsx27(Loader, { size: 16 }) }) })
+        isLoading && /* @__PURE__ */ jsx28("div", { className: getClassName21("loadingOverlay"), children: /* @__PURE__ */ jsx28("div", { className: getClassName21("loadingOverlayInner"), children: /* @__PURE__ */ jsx28(Loader, { size: 16 }) }) })
       ]
     }
   );
@@ -3789,7 +5145,7 @@ init_react_import();
 
 // lib/use-component-list.tsx
 init_react_import();
-import { useEffect as useEffect14, useState as useState16 } from "react";
+import { useEffect as useEffect15, useState as useState18 } from "react";
 
 // components/ComponentList/index.tsx
 init_react_import();
@@ -3799,27 +5155,17 @@ init_react_import();
 var styles_module_default17 = { "ComponentList": "_ComponentList_odh9d_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_odh9d_5", "ComponentList-content": "_ComponentList-content_odh9d_9", "ComponentList-title": "_ComponentList-title_odh9d_17", "ComponentList-titleIcon": "_ComponentList-titleIcon_odh9d_53" };
 
 // components/ComponentList/index.tsx
-import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 var getClassName22 = get_class_name_factory_default("ComponentList", styles_module_default17);
 var ComponentListItem = ({
   name,
-  label,
-  index
+  label
 }) => {
   const { overrides, getPermissions } = useAppContext();
   const canInsert = getPermissions({
     type: name
   }).insert;
-  return /* @__PURE__ */ jsx28(
-    Drawer.Item,
-    {
-      label,
-      name,
-      index,
-      isDragDisabled: !canInsert,
-      children: overrides.componentItem
-    }
-  );
+  return /* @__PURE__ */ jsx29(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: overrides.componentItem });
 };
 var ComponentList = ({
   children,
@@ -3843,19 +5189,18 @@ var ComponentList = ({
         }),
         title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
         children: [
-          /* @__PURE__ */ jsx28("div", { children: title }),
-          /* @__PURE__ */ jsx28("div", { className: getClassName22("titleIcon"), children: expanded ? /* @__PURE__ */ jsx28(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx28(ChevronDown, { size: 12 }) })
+          /* @__PURE__ */ jsx29("div", { children: title }),
+          /* @__PURE__ */ jsx29("div", { className: getClassName22("titleIcon"), children: expanded ? /* @__PURE__ */ jsx29(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx29(ChevronDown, { size: 12 }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx28("div", { className: getClassName22("content"), children: /* @__PURE__ */ jsx28(Drawer, { droppableId: title, children: children || Object.keys(config.components).map((componentKey, i) => {
+    /* @__PURE__ */ jsx29("div", { className: getClassName22("content"), children: /* @__PURE__ */ jsx29(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
       var _a;
-      return /* @__PURE__ */ jsx28(
+      return /* @__PURE__ */ jsx29(
         ComponentListItem,
         {
           label: (_a = config.components[componentKey]["label"]) != null ? _a : componentKey,
-          name: componentKey,
-          index: i
+          name: componentKey
         },
         componentKey
       );
@@ -3865,10 +5210,10 @@ var ComponentList = ({
 ComponentList.Item = ComponentListItem;
 
 // lib/use-component-list.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var useComponentList = (config, ui) => {
-  const [componentList, setComponentList] = useState16();
-  useEffect14(() => {
+  const [componentList, setComponentList] = useState18();
+  useEffect15(() => {
     var _a, _b, _c;
     if (Object.keys(ui.componentList).length > 0) {
       const matchedComponents = [];
@@ -3878,7 +5223,7 @@ var useComponentList = (config, ui) => {
           if (category.visible === false || !category.components) {
             return null;
           }
-          return /* @__PURE__ */ jsx29(
+          return /* @__PURE__ */ jsx30(
             ComponentList,
             {
               id: categoryKey,
@@ -3887,7 +5232,7 @@ var useComponentList = (config, ui) => {
                 var _a2;
                 matchedComponents.push(componentName);
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ jsx29(
+                return /* @__PURE__ */ jsx30(
                   ComponentList.Item,
                   {
                     label: (_a2 = componentConf["label"]) != null ? _a2 : componentName,
@@ -3907,7 +5252,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__ */ jsx29(
+          /* @__PURE__ */ jsx30(
             ComponentList,
             {
               id: "other",
@@ -3915,7 +5260,7 @@ var useComponentList = (config, ui) => {
               children: remainingComponents.map((componentName, i) => {
                 var _a2;
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ jsx29(
+                return /* @__PURE__ */ jsx30(
                   ComponentList.Item,
                   {
                     name: componentName,
@@ -3937,31 +5282,30 @@ var useComponentList = (config, ui) => {
 };
 
 // components/Puck/components/Components/index.tsx
-import { useMemo as useMemo7 } from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { useMemo as useMemo8 } from "react";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var Components = () => {
   const { config, state, overrides } = useAppContext();
   const componentList = useComponentList(config, state.ui);
-  const Wrapper = useMemo7(() => overrides.components || "div", [overrides]);
-  return /* @__PURE__ */ jsx30(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx30(ComponentList, { id: "all" }) });
+  const Wrapper = useMemo8(() => overrides.components || "div", [overrides]);
+  return /* @__PURE__ */ jsx31(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx31(ComponentList, { id: "all" }) });
 };
 
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-import { useCallback as useCallback8, useMemo as useMemo8 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect17, useRef as useRef7, useMemo as useMemo9 } from "react";
 
 // components/AutoFrame/index.tsx
 init_react_import();
 import {
   createContext as createContext4,
-  useContext as useContext5,
-  useEffect as useEffect15,
-  useRef as useRef3,
-  useState as useState17
+  useContext as useContext7,
+  useEffect as useEffect16,
+  useState as useState19
 } from "react";
 import hash from "object-hash";
-import { createPortal as createPortal2 } from "react-dom";
-import { Fragment as Fragment13, jsx as jsx31 } from "react/jsx-runtime";
+import { createPortal as createPortal3 } from "react-dom";
+import { Fragment as Fragment13, jsx as jsx32 } from "react/jsx-runtime";
 var styleSelector = 'style, link[rel="stylesheet"]';
 var collectStyles = (doc) => {
   const collected = [];
@@ -4004,7 +5348,7 @@ var CopyHostStyles = ({
   onStylesLoaded = () => null
 }) => {
   const { document: doc, window: win } = useFrame();
-  useEffect15(() => {
+  useEffect16(() => {
     if (!win || !doc) {
       return () => {
       };
@@ -4028,8 +5372,8 @@ var CopyHostStyles = ({
           });
           styleSheet = getStyleSheet(el);
         }
-        const styles = getStyles(styleSheet);
-        if (!styles) {
+        const styles2 = getStyles(styleSheet);
+        if (!styles2) {
           if (debug) {
             console.warn(
               `Tried to load styles for link element, but couldn't find them. Skipping...`
@@ -4037,7 +5381,7 @@ var CopyHostStyles = ({
           }
           return;
         }
-        mirror.innerHTML = styles;
+        mirror.innerHTML = styles2;
         mirror.setAttribute("data-href", el.getAttribute("href"));
       } else {
         mirror = el.cloneNode(true);
@@ -4161,49 +5505,52 @@ var CopyHostStyles = ({
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ jsx31(Fragment13, { children });
+  return /* @__PURE__ */ jsx32(Fragment13, { children });
 };
 var autoFrameContext = createContext4({});
-var useFrame = () => useContext5(autoFrameContext);
+var useFrame = () => useContext7(autoFrameContext);
 function AutoFrame(_a) {
   var _b = _a, {
     children,
     className,
     debug,
     id,
-    onStylesLoaded
+    onStylesLoaded,
+    frameRef
   } = _b, props = __objRest(_b, [
     "children",
     "className",
     "debug",
     "id",
-    "onStylesLoaded"
+    "onStylesLoaded",
+    "frameRef"
   ]);
-  const [loaded, setLoaded] = useState17(false);
-  const [ctx, setCtx] = useState17({});
-  const ref = useRef3(null);
-  const [mountTarget, setMountTarget] = useState17();
-  useEffect15(() => {
+  const [loaded, setLoaded] = useState19(false);
+  const [ctx, setCtx] = useState19({});
+  const [mountTarget, setMountTarget] = useState19();
+  useEffect16(() => {
     var _a2;
-    if (ref.current) {
+    if (frameRef.current) {
       setCtx({
-        document: ref.current.contentDocument || void 0,
-        window: ref.current.contentWindow || void 0
+        document: frameRef.current.contentDocument || void 0,
+        window: frameRef.current.contentWindow || void 0
       });
-      setMountTarget((_a2 = ref.current.contentDocument) == null ? void 0 : _a2.getElementById("frame-root"));
+      setMountTarget(
+        (_a2 = frameRef.current.contentDocument) == null ? void 0 : _a2.getElementById("frame-root")
+      );
     }
-  }, [ref, loaded]);
-  return /* @__PURE__ */ jsx31(
+  }, [frameRef, loaded]);
+  return /* @__PURE__ */ jsx32(
     "iframe",
     __spreadProps(__spreadValues({}, props), {
       className,
       id,
       srcDoc: '<!DOCTYPE html><html><head></head><body><div id="frame-root"></div></body></html>',
-      ref,
+      ref: frameRef,
       onLoad: () => {
         setLoaded(true);
       },
-      children: /* @__PURE__ */ jsx31(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx31(CopyHostStyles, { debug, onStylesLoaded, children: createPortal2(children, mountTarget) }) })
+      children: /* @__PURE__ */ jsx32(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx32(CopyHostStyles, { debug, onStylesLoaded, children: createPortal3(children, mountTarget) }) })
     })
   );
 }
@@ -4212,33 +5559,71 @@ 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_rxwlr_1", "PuckPreview-frame": "_PuckPreview-frame_rxwlr_5" };
+var styles_module_default18 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPreview-frame": "_PuckPreview-frame_z2rgu_6" };
 
 // components/Puck/components/Preview/index.tsx
-import { Fragment as Fragment14, jsx as jsx32 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx33 } from "react/jsx-runtime";
 var getClassName23 = get_class_name_factory_default("PuckPreview", styles_module_default18);
+var useBubbleIframeEvents = (ref) => {
+  const { status } = useAppContext();
+  useEffect17(() => {
+    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 = useCallback8(
+  const Page = useCallback11(
     (pageProps) => {
       var _a, _b;
       return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadValues({
         id: "puck-root"
-      }, pageProps)) : /* @__PURE__ */ jsx32(Fragment14, { children: pageProps.children });
+      }, pageProps)) : /* @__PURE__ */ jsx33(Fragment14, { children: pageProps.children });
     },
     [config.root]
   );
-  const Frame = useMemo8(() => overrides.iframe, [overrides]);
+  const Frame = useMemo9(() => overrides.iframe, [overrides]);
   const rootProps = state.data.root.props || state.data.root;
-  return /* @__PURE__ */ jsx32(
+  const ref = useRef7(null);
+  useBubbleIframeEvents(ref);
+  return /* @__PURE__ */ jsx33(
     "div",
     {
       className: getClassName23(),
       id,
+      "data-puck-preview": true,
       onClick: () => {
         dispatch({ type: "setUi", ui: __spreadProps(__spreadValues({}, state.ui), { itemSelector: null }) });
       },
-      children: iframe.enabled ? /* @__PURE__ */ jsx32(
+      children: iframe.enabled ? /* @__PURE__ */ jsx33(
         AutoFrame_default,
         {
           id: "preview-frame",
@@ -4247,27 +5632,32 @@ var Preview = ({ id = "puck-preview" }) => {
           onStylesLoaded: () => {
             setStatus("READY");
           },
-          children: /* @__PURE__ */ jsx32(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
-            const inner = /* @__PURE__ */ jsx32(
+          frameRef: ref,
+          children: /* @__PURE__ */ jsx33(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
+            const inner = /* @__PURE__ */ jsx33(
               Page,
               __spreadProps(__spreadValues({}, rootProps), {
-                puck: { renderDropZone: DropZone, isEditing: true },
+                puck: {
+                  renderDropZone: DropZone,
+                  isEditing: true,
+                  dragRef: null
+                },
                 editMode: true,
-                children: /* @__PURE__ */ jsx32(DropZone, { zone: rootDroppableId })
+                children: /* @__PURE__ */ jsx33(DropZone, { zone: rootDroppableId })
               })
             );
             if (Frame) {
-              return /* @__PURE__ */ jsx32(Frame, { document: document2, children: inner });
+              return /* @__PURE__ */ jsx33(Frame, { document: document2, children: inner });
             }
             return inner;
           } })
         }
-      ) : /* @__PURE__ */ jsx32("div", { id: "preview-frame", className: getClassName23("frame"), children: /* @__PURE__ */ jsx32(
+      ) : /* @__PURE__ */ jsx33("div", { id: "preview-frame", className: getClassName23("frame"), ref, children: /* @__PURE__ */ jsx33(
         Page,
         __spreadProps(__spreadValues({}, rootProps), {
-          puck: { renderDropZone: DropZone, isEditing: true },
+          puck: { renderDropZone: DropZone, isEditing: true, dragRef: null },
           editMode: true,
-          children: /* @__PURE__ */ jsx32(DropZone, { zone: rootDroppableId })
+          children: /* @__PURE__ */ jsx33(DropZone, { zone: rootDroppableId })
         })
       ) })
     }
@@ -4317,7 +5707,7 @@ var scrollIntoView = (el) => {
 };
 
 // components/LayerTree/index.tsx
-import { useContext as useContext6 } from "react";
+import { useContext as useContext8 } from "react";
 
 // lib/is-child-of-zone.ts
 init_react_import();
@@ -4330,8 +5720,38 @@ 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
-import { Fragment as Fragment15, jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx34, jsxs as jsxs17 } from "react/jsx-runtime";
 var getClassName24 = get_class_name_factory_default("LayerTree", styles_module_default19);
 var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default19);
 var LayerTree = ({
@@ -4344,27 +5764,22 @@ var LayerTree = ({
   label
 }) => {
   const zones = data.zones || {};
-  const ctx = useContext6(dropZoneContext);
+  const ctx = useContext8(dropZoneContext);
   return /* @__PURE__ */ jsxs17(Fragment15, { children: [
     label && /* @__PURE__ */ jsxs17("div", { className: getClassName24("zoneTitle"), children: [
-      /* @__PURE__ */ jsx33("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ jsx33(Layers, { size: "16" }) }),
+      /* @__PURE__ */ jsx34("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ jsx34(Layers, { size: "16" }) }),
       " ",
       label
     ] }),
     /* @__PURE__ */ jsxs17("ul", { className: getClassName24(), children: [
-      zoneContent.length === 0 && /* @__PURE__ */ jsx33("div", { className: getClassName24("helper"), children: "No items" }),
+      zoneContent.length === 0 && /* @__PURE__ */ jsx34("div", { className: getClassName24("helper"), children: "No items" }),
       zoneContent.map((item, i) => {
         var _a;
         const isSelected = (itemSelector == null ? void 0 : itemSelector.index) === i && (itemSelector.zone === zone || itemSelector.zone === rootDroppableId && !zone);
         const zonesForItem = findZonesForArea(data, item.props.id);
         const containsZone = Object.keys(zonesForItem).length > 0;
-        const {
-          setHoveringArea = () => {
-          },
-          setHoveringComponent = () => {
-          },
-          hoveringComponent
-        } = ctx || {};
+        const { setHoveringComponent = () => {
+        }, hoveringComponent } = ctx || {};
         const selectedItem = itemSelector && data ? getItem(itemSelector, data) : null;
         const isHovering = hoveringComponent === item.props.id;
         const childIsSelected = isChildOfZone(item, selectedItem, ctx);
@@ -4380,7 +5795,7 @@ var LayerTree = ({
               childIsSelected
             }),
             children: [
-              /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs17(
+              /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs17(
                 "button",
                 {
                   type: "button",
@@ -4390,45 +5805,51 @@ var LayerTree = ({
                       setItemSelector(null);
                       return;
                     }
-                    setItemSelector({
-                      index: i,
-                      zone
-                    });
                     const id = zoneContent[i].props.id;
                     const frame = getFrame();
-                    scrollIntoView(
-                      frame == null ? void 0 : frame.querySelector(
-                        `[data-rfd-drag-handle-draggable-id="draggable-${id}"]`
-                      )
+                    const el = frame == null ? void 0 : frame.querySelector(
+                      `[data-puck-component="${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__ */ jsx33(
+                    containsZone && /* @__PURE__ */ jsx34(
                       "div",
                       {
                         className: getClassNameLayer("chevron"),
                         title: isSelected ? "Collapse" : "Expand",
-                        children: /* @__PURE__ */ jsx33(ChevronDown, { size: "12" })
+                        children: /* @__PURE__ */ jsx34(ChevronDown, { size: "12" })
                       }
                     ),
                     /* @__PURE__ */ jsxs17("div", { className: getClassNameLayer("title"), children: [
-                      /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ jsx33(Type, { size: "16" }) : /* @__PURE__ */ jsx33(LayoutGrid, { size: "16" }) }),
-                      /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("name"), children: label2 })
+                      /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ jsx34(Type, { size: "16" }) : /* @__PURE__ */ jsx34(LayoutGrid, { size: "16" }) }),
+                      /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("name"), children: label2 })
                     ] })
                   ]
                 }
               ) }),
-              containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ jsx33(
+              containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ jsx34(
                 LayerTree,
                 {
                   config,
@@ -4450,13 +5871,13 @@ var LayerTree = ({
 };
 
 // components/Puck/components/Outline/index.tsx
-import { useCallback as useCallback9, useMemo as useMemo9 } from "react";
-import { Fragment as Fragment16, jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
+import { useCallback as useCallback12, useMemo as useMemo10 } from "react";
+import { Fragment as Fragment16, jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
 var Outline = () => {
   const { dispatch, state, overrides, config } = useAppContext();
   const { data, ui } = state;
   const { itemSelector } = ui;
-  const setItemSelector = useCallback9(
+  const setItemSelector = useCallback12(
     (newItemSelector) => {
       dispatch({
         type: "setUi",
@@ -4465,9 +5886,9 @@ var Outline = () => {
     },
     []
   );
-  const Wrapper = useMemo9(() => overrides.outline || "div", [overrides]);
-  return /* @__PURE__ */ jsx34(Wrapper, { children: /* @__PURE__ */ jsx34(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ jsxs18(Fragment16, { children: [
-    (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ jsx34(
+  const Wrapper = useMemo10(() => overrides.outline || "div", [overrides]);
+  return /* @__PURE__ */ jsx35(Wrapper, { children: /* @__PURE__ */ jsx35(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ jsxs18(Fragment16, { children: [
+    (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ jsx35(
       LayerTree,
       {
         config,
@@ -4480,7 +5901,7 @@ var Outline = () => {
     ),
     Object.entries(findZonesForArea(data, "root")).map(
       ([zoneKey, zone]) => {
-        return /* @__PURE__ */ jsx34(
+        return /* @__PURE__ */ jsx35(
           LayerTree,
           {
             config,
@@ -4504,7 +5925,8 @@ import { useHotkeys } from "react-hotkeys-hook";
 function usePuckHistory({
   dispatch,
   initialAppState,
-  historyStore
+  historyStore,
+  iframeEnabled
 }) {
   const back = () => {
     var _a;
@@ -4522,6 +5944,16 @@ function usePuckHistory({
       historyStore.forward();
     }
   };
+  const backIframe = () => {
+    if (iframeEnabled) {
+      back();
+    }
+  };
+  const forwardIframe = () => {
+    if (iframeEnabled) {
+      forward();
+    }
+  };
   const setHistories = (histories) => {
     var _a;
     dispatch({
@@ -4540,9 +5972,23 @@ function usePuckHistory({
       historyStore.setHistoryIndex(index);
     }
   };
+  const frame = getFrame();
+  const resolvedFrame = typeof window !== "undefined" && frame !== document ? frame : void 0;
   useHotkeys("meta+z", back, { preventDefault: true });
   useHotkeys("meta+shift+z", forward, { preventDefault: true });
   useHotkeys("meta+y", forward, { preventDefault: true });
+  useHotkeys("meta+z", backIframe, {
+    preventDefault: true,
+    document: resolvedFrame
+  });
+  useHotkeys("meta+shift+z", forwardIframe, {
+    preventDefault: true,
+    document: resolvedFrame
+  });
+  useHotkeys("meta+y", forwardIframe, {
+    preventDefault: true,
+    document: resolvedFrame
+  });
   return {
     back,
     forward,
@@ -4554,19 +6000,19 @@ function usePuckHistory({
 
 // lib/use-history-store.ts
 init_react_import();
-import { useState as useState18 } from "react";
-import { useDebouncedCallback as useDebouncedCallback2 } from "use-debounce";
+import { useState as useState20 } from "react";
+import { useDebouncedCallback as useDebouncedCallback3 } from "use-debounce";
 var EMPTY_HISTORY_INDEX = 0;
 function useHistoryStore(initialHistory) {
   var _a, _b;
-  const [histories, setHistories] = useState18(
+  const [histories, setHistories] = useState20(
     (_a = initialHistory == null ? void 0 : initialHistory.histories) != null ? _a : []
   );
   const updateHistories = (histories2) => {
     setHistories(histories2);
     setIndex(histories2.length - 1);
   };
-  const [index, setIndex] = useState18(
+  const [index, setIndex] = useState20(
     (_b = initialHistory == null ? void 0 : initialHistory.index) != null ? _b : EMPTY_HISTORY_INDEX
   );
   const hasPast = index > EMPTY_HISTORY_INDEX;
@@ -4574,7 +6020,7 @@ function useHistoryStore(initialHistory) {
   const currentHistory = histories[index];
   const nextHistory = hasFuture ? histories[index + 1] : null;
   const prevHistory = hasPast ? histories[index - 1] : null;
-  const record = useDebouncedCallback2((state) => {
+  const record = useDebouncedCallback3((state) => {
     const history = {
       state,
       id: generateId("history")
@@ -4693,24 +6139,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, styles) {
+var calculateBox = function calculateBox2(borderBox, styles2) {
   var margin = {
-    top: parse(styles.marginTop),
-    right: parse(styles.marginRight),
-    bottom: parse(styles.marginBottom),
-    left: parse(styles.marginLeft)
+    top: parse(styles2.marginTop),
+    right: parse(styles2.marginRight),
+    bottom: parse(styles2.marginBottom),
+    left: parse(styles2.marginLeft)
   };
   var padding = {
-    top: parse(styles.paddingTop),
-    right: parse(styles.paddingRight),
-    bottom: parse(styles.paddingBottom),
-    left: parse(styles.paddingLeft)
+    top: parse(styles2.paddingTop),
+    right: parse(styles2.paddingRight),
+    bottom: parse(styles2.paddingBottom),
+    left: parse(styles2.paddingLeft)
   };
   var border = {
-    top: parse(styles.borderTopWidth),
-    right: parse(styles.borderRightWidth),
-    bottom: parse(styles.borderBottomWidth),
-    left: parse(styles.borderLeftWidth)
+    top: parse(styles2.borderTopWidth),
+    right: parse(styles2.borderRightWidth),
+    bottom: parse(styles2.borderBottomWidth),
+    left: parse(styles2.borderLeftWidth)
   };
   return createBox({
     borderBox,
@@ -4721,33 +6167,33 @@ var calculateBox = function calculateBox2(borderBox, styles) {
 };
 var getBox = function getBox2(el) {
   var borderBox = el.getBoundingClientRect();
-  var styles = window.getComputedStyle(el);
-  return calculateBox(borderBox, styles);
+  var styles2 = window.getComputedStyle(el);
+  return calculateBox(borderBox, styles2);
 };
 
 // components/Puck/components/Canvas/index.tsx
 import {
-  useCallback as useCallback10,
-  useEffect as useEffect17,
-  useMemo as useMemo11,
-  useRef as useRef4,
-  useState as useState20
+  useCallback as useCallback13,
+  useEffect as useEffect19,
+  useMemo as useMemo12,
+  useRef as useRef8,
+  useState as useState22
 } from "react";
 
 // components/ViewportControls/index.tsx
 init_react_import();
-import { useEffect as useEffect16, useMemo as useMemo10, useState as useState19 } from "react";
+import { useEffect as useEffect18, useMemo as useMemo11, useState as useState21 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
 init_react_import();
 var styles_module_default20 = { "ViewportControls": "_ViewportControls_g1wgg_1", "ViewportControls-divider": "_ViewportControls-divider_g1wgg_15", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_g1wgg_21", "ViewportButton--isActive": "_ViewportButton--isActive_g1wgg_34", "ViewportButton-inner": "_ViewportButton-inner_g1wgg_34" };
 
 // components/ViewportControls/index.tsx
-import { jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
 var icons = {
-  Smartphone: /* @__PURE__ */ jsx35(Smartphone, { size: 16 }),
-  Tablet: /* @__PURE__ */ jsx35(Tablet, { size: 16 }),
-  Monitor: /* @__PURE__ */ jsx35(Monitor, { size: 16 })
+  Smartphone: /* @__PURE__ */ jsx36(Smartphone, { size: 16 }),
+  Tablet: /* @__PURE__ */ jsx36(Tablet, { size: 16 }),
+  Monitor: /* @__PURE__ */ jsx36(Monitor, { size: 16 })
 };
 var getClassName25 = get_class_name_factory_default("ViewportControls", styles_module_default20);
 var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default20);
@@ -4759,11 +6205,11 @@ var ViewportButton = ({
   onClick
 }) => {
   const { state } = useAppContext();
-  const [isActive, setIsActive] = useState19(false);
-  useEffect16(() => {
+  const [isActive, setIsActive] = useState21(false);
+  useEffect18(() => {
     setIsActive(width === state.ui.viewports.current.width);
   }, [width, state.ui.viewports.current.width]);
-  return /* @__PURE__ */ jsx35("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx36(
     IconButton,
     {
       title,
@@ -4772,7 +6218,7 @@ var ViewportButton = ({
         e.stopPropagation();
         onClick({ width, height });
       },
-      children: /* @__PURE__ */ jsx35("span", { className: getClassNameButton("inner"), children })
+      children: /* @__PURE__ */ jsx36("span", { className: getClassNameButton("inner"), children })
     }
   ) });
 };
@@ -4796,7 +6242,7 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
-  const zoomOptions = useMemo10(
+  const zoomOptions = useMemo11(
     () => [
       ...defaultZoomOptions,
       ...defaultsContainAutoZoom ? [] : [
@@ -4809,7 +6255,7 @@ var ViewportControls = ({
     [autoZoom]
   );
   return /* @__PURE__ */ jsxs19("div", { className: getClassName25(), children: [
-    viewports.map((viewport, i) => /* @__PURE__ */ jsx35(
+    viewports.map((viewport, i) => /* @__PURE__ */ jsx36(
       ViewportButton,
       {
         height: viewport.height,
@@ -4820,8 +6266,8 @@ var ViewportControls = ({
       },
       i
     )),
-    /* @__PURE__ */ jsx35("div", { className: getClassName25("divider") }),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36("div", { className: getClassName25("divider") }),
+    /* @__PURE__ */ jsx36(
       IconButton,
       {
         title: "Zoom viewport out",
@@ -4835,10 +6281,10 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ jsx35(ZoomOut, { size: 16 })
+        children: /* @__PURE__ */ jsx36(ZoomOut, { size: 16 })
       }
     ),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36(
       IconButton,
       {
         title: "Zoom viewport in",
@@ -4852,11 +6298,11 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ jsx35(ZoomIn, { size: 16 })
+        children: /* @__PURE__ */ jsx36(ZoomIn, { size: 16 })
       }
     ),
-    /* @__PURE__ */ jsx35("div", { className: getClassName25("divider") }),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36("div", { className: getClassName25("divider") }),
+    /* @__PURE__ */ jsx36(
       "select",
       {
         className: getClassName25("zoomSelect"),
@@ -4864,7 +6310,7 @@ var ViewportControls = ({
         onChange: (e) => {
           onZoom(parseFloat(e.currentTarget.value));
         },
-        children: zoomOptions.map((option) => /* @__PURE__ */ jsx35(
+        children: zoomOptions.map((option) => /* @__PURE__ */ jsx36(
           "option",
           {
             value: option.value,
@@ -4879,7 +6325,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_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" };
+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" };
 
 // lib/get-zoom-config.ts
 init_react_import();
@@ -4912,24 +6358,24 @@ var getZoomConfig = (uiViewport, frame, zoom) => {
 };
 
 // components/Puck/components/Canvas/index.tsx
-import { Fragment as Fragment17, jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx37, jsxs as jsxs20 } from "react/jsx-runtime";
 var getClassName26 = get_class_name_factory_default("PuckCanvas", styles_module_default21);
 var ZOOM_ON_CHANGE = true;
 var Canvas = () => {
   const { status, iframe } = useAppContext();
   const { dispatch, state, overrides, setUi, zoomConfig, setZoomConfig } = useAppContext();
   const { ui } = state;
-  const frameRef = useRef4(null);
-  const [showTransition, setShowTransition] = useState20(false);
-  const defaultRender = useMemo11(() => {
-    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx36(Fragment17, { children });
+  const frameRef = useRef8(null);
+  const [showTransition, setShowTransition] = useState22(false);
+  const defaultRender = useMemo12(() => {
+    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx37(Fragment17, { children });
     return PuckDefault;
   }, []);
-  const CustomPreview = useMemo11(
+  const CustomPreview = useMemo12(
     () => overrides.preview || defaultRender,
     [overrides]
   );
-  const getFrameDimensions = useCallback10(() => {
+  const getFrameDimensions = useCallback13(() => {
     if (frameRef.current) {
       const frame = frameRef.current;
       const box = getBox(frame);
@@ -4937,7 +6383,7 @@ var Canvas = () => {
     }
     return { width: 0, height: 0 };
   }, [frameRef]);
-  const resetAutoZoom = useCallback10(
+  const resetAutoZoom = useCallback13(
     (ui2 = state.ui) => {
       if (frameRef.current) {
         setZoomConfig(
@@ -4947,11 +6393,11 @@ var Canvas = () => {
     },
     [frameRef, zoomConfig, state.ui]
   );
-  useEffect17(() => {
+  useEffect19(() => {
     setShowTransition(false);
     resetAutoZoom();
   }, [frameRef, ui.leftSideBarVisible, ui.rightSideBarVisible]);
-  useEffect17(() => {
+  useEffect19(() => {
     const { height: frameHeight } = getFrameDimensions();
     if (ui.viewports.current.height === "auto") {
       setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
@@ -4959,26 +6405,24 @@ var Canvas = () => {
       }));
     }
   }, [zoomConfig.zoom]);
-  useEffect17(() => {
+  useEffect19(() => {
     if (ZOOM_ON_CHANGE) {
       setShowTransition(true);
       resetAutoZoom(ui);
     }
   }, [ui.viewports.current.width]);
-  useEffect17(() => {
-    const observer = new ResizeObserver(() => {
+  useEffect19(() => {
+    const cb = () => {
       setShowTransition(false);
       resetAutoZoom();
-    });
-    if (document.body) {
-      observer.observe(document.body);
-    }
+    };
+    window.addEventListener("resize", cb);
     return () => {
-      observer.disconnect();
+      window.removeEventListener("resize", cb);
     };
   }, []);
-  const [showLoader, setShowLoader] = useState20(false);
-  useEffect17(() => {
+  const [showLoader, setShowLoader] = useState22(false);
+  useEffect19(() => {
     setTimeout(() => {
       setShowLoader(true);
     }, 500);
@@ -4996,7 +6440,7 @@ var Canvas = () => {
         recordHistory: true
       }),
       children: [
-        ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx36("div", { className: getClassName26("controls"), children: /* @__PURE__ */ jsx36(
+        ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx37("div", { className: getClassName26("controls"), children: /* @__PURE__ */ jsx37(
           ViewportControls,
           {
             autoZoom: zoomConfig.autoZoom,
@@ -5008,7 +6452,8 @@ var Canvas = () => {
                 zoom: zoomConfig.zoom
               });
               const newUi = __spreadProps(__spreadValues({}, ui), {
-                viewports: __spreadProps(__spreadValues({}, ui.viewports), { current: uiViewport })
+                viewports: __spreadProps(__spreadValues({}, ui.viewports), { current: uiViewport }),
+                itemSelector: null
               });
               setUi(newUi);
               if (ZOOM_ON_CHANGE) {
@@ -5022,7 +6467,7 @@ var Canvas = () => {
           }
         ) }),
         /* @__PURE__ */ jsxs20("div", { className: getClassName26("inner"), ref: frameRef, children: [
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx37(
             "div",
             {
               className: getClassName26("root"),
@@ -5034,54 +6479,28 @@ var Canvas = () => {
                 overflow: iframe.enabled ? void 0 : "auto"
               },
               suppressHydrationWarning: true,
-              children: /* @__PURE__ */ jsx36(CustomPreview, { children: /* @__PURE__ */ jsx36(Preview, {}) })
+              id: "puck-canvas-root",
+              onTransitionEnd: () => {
+                window.dispatchEvent(
+                  new CustomEvent("viewportchange", {
+                    bubbles: true,
+                    cancelable: false
+                  })
+                );
+              },
+              children: /* @__PURE__ */ jsx37(CustomPreview, { children: /* @__PURE__ */ jsx37(Preview, {}) })
             }
           ),
-          /* @__PURE__ */ jsx36("div", { className: getClassName26("loader"), children: /* @__PURE__ */ jsx36(Loader, { size: 24 }) })
+          /* @__PURE__ */ jsx37("div", { className: getClassName26("loader"), children: /* @__PURE__ */ jsx37(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();
-import { useMemo as useMemo12 } from "react";
+import { useMemo as useMemo13 } from "react";
 
 // lib/load-overrides.ts
 init_react_import();
@@ -5120,18 +6539,86 @@ var useLoadedOverrides = ({
   overrides,
   plugins
 }) => {
-  return useMemo12(() => {
+  return useMemo13(() => {
     return loadOverrides({ overrides, plugins });
   }, [plugins, overrides]);
 };
 
 // components/DefaultOverride/index.tsx
 init_react_import();
-import { Fragment as Fragment18, jsx as jsx37 } from "react/jsx-runtime";
-var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx37(Fragment18, { children });
+import { Fragment as Fragment18, jsx as jsx38 } from "react/jsx-runtime";
+var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx38(Fragment18, { children });
+
+// components/Puck/index.tsx
+import { DragDropManager as DragDropManager2, Feedback } from "@dnd-kit/dom";
+
+// lib/use-inject-css.ts
+init_react_import();
+import { useEffect as useEffect20, useState as useState23 } from "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] = useState23();
+  useEffect20(() => {
+    setEl(document.createElement("style"));
+  }, []);
+  useEffect20(() => {
+    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);
+};
 
 // components/Puck/index.tsx
-import { Fragment as Fragment19, jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
 var getClassName27 = get_class_name_factory_default("Puck", styles_module_default15);
 var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_module_default15);
 function Puck({
@@ -5154,13 +6641,14 @@ function Puck({
   dnd,
   initialHistory: _initialHistory
 }) {
-  var _a;
+  var _a, _b;
   const iframe = __spreadValues({
     enabled: true,
     waitForStyles: true
   }, _iframe);
-  const [generatedAppState] = useState21(() => {
-    var _a2, _b, _c, _d, _e, _f, _g, _h, _i;
+  useInjectGlobalCss(iframe.enabled);
+  const [generatedAppState] = useState24(() => {
+    var _a2, _b2, _c, _d, _e, _f, _g, _h, _i;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
     if (typeof window !== "undefined") {
@@ -5180,7 +6668,7 @@ function Puck({
         clientUiState = __spreadProps(__spreadValues({}, clientUiState), {
           viewports: __spreadProps(__spreadValues({}, initial.viewports), {
             current: __spreadProps(__spreadValues({}, initial.viewports.current), {
-              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",
+              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",
               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)
             })
           })
@@ -5231,7 +6719,7 @@ function Puck({
     histories,
     index: initialHistoryIndex
   });
-  const [reducer] = useState21(
+  const [reducer] = useState24(
     () => createReducer({
       config,
       record: historyStore.record,
@@ -5243,28 +6731,20 @@ function Puck({
     flushZones(initialAppState)
   );
   const { data, ui } = appState;
-  const history = usePuckHistory({ dispatch, initialAppState, historyStore });
-  const [menuOpen, setMenuOpen] = useState21(false);
+  const history = usePuckHistory({
+    dispatch,
+    initialAppState,
+    historyStore,
+    iframeEnabled: (_a = _iframe == null ? void 0 : _iframe.enabled) != null ? _a : true
+  });
+  const [menuOpen, setMenuOpen] = useState24(false);
   const { itemSelector, leftSideBarVisible, rightSideBarVisible } = ui;
-  const setItemSelector = useCallback11(
-    (newItemSelector) => {
-      if (newItemSelector === itemSelector) return;
-      dispatch({
-        type: "setUi",
-        ui: { itemSelector: newItemSelector },
-        recordHistory: true
-      });
-    },
-    [itemSelector]
-  );
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
-  useEffect18(() => {
+  useEffect21(() => {
     if (onChange) onChange(data);
   }, [data]);
-  const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
-  const [draggedItem, setDraggedItem] = useState21();
   const rootProps = data.root.props || data.root;
-  const toggleSidebars = useCallback11(
+  const toggleSidebars = useCallback14(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -5278,7 +6758,7 @@ function Puck({
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  useEffect18(() => {
+  useEffect21(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -5301,28 +6781,28 @@ function Puck({
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  const defaultHeaderRender = useMemo13(() => {
+  const defaultHeaderRender = useMemo14(() => {
     if (renderHeader) {
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
       );
       const RenderHeader = (_a2) => {
-        var _b = _a2, { actions } = _b, props = __objRest(_b, ["actions"]);
+        var _b2 = _a2, { actions } = _b2, props = __objRest(_b2, ["actions"]);
         const Comp = renderHeader;
-        return /* @__PURE__ */ jsx38(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
+        return /* @__PURE__ */ jsx39(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
       };
       return RenderHeader;
     }
     return DefaultOverride;
   }, [renderHeader]);
-  const defaultHeaderActionsRender = useMemo13(() => {
+  const defaultHeaderActionsRender = useMemo14(() => {
     if (renderHeaderActions) {
       console.warn(
         "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
       );
       const RenderHeader = (props) => {
         const Comp = renderHeaderActions;
-        return /* @__PURE__ */ jsx38(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
+        return /* @__PURE__ */ jsx39(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
       };
       return RenderHeader;
     }
@@ -5332,26 +6812,27 @@ function Puck({
     overrides,
     plugins
   });
-  const CustomPuck = useMemo13(
+  const CustomPuck = useMemo14(
     () => loadedOverrides.puck || DefaultOverride,
     [loadedOverrides]
   );
-  const CustomHeader = useMemo13(
+  const CustomHeader = useMemo14(
     () => loadedOverrides.header || defaultHeaderRender,
     [loadedOverrides]
   );
-  const CustomHeaderActions = useMemo13(
+  const CustomHeaderActions = useMemo14(
     () => loadedOverrides.headerActions || defaultHeaderActionsRender,
     [loadedOverrides]
   );
-  const [mounted, setMounted] = useState21(false);
-  useEffect18(() => {
+  const [mounted, setMounted] = useState24(false);
+  useEffect21(() => {
     setMounted(true);
   }, []);
   const selectedComponentConfig = selectedItem && config.components[selectedItem.type];
-  const selectedComponentLabel = selectedItem ? (_a = selectedComponentConfig == null ? void 0 : selectedComponentConfig["label"]) != null ? _a : selectedItem.type.toString() : "";
+  const selectedComponentLabel = selectedItem ? (_b = selectedComponentConfig == null ? void 0 : selectedComponentConfig["label"]) != null ? _b : selectedItem.type.toString() : "";
+  const [manager] = useState24(new DragDropManager2({ plugins: [Feedback] }));
   return /* @__PURE__ */ jsxs21("div", { className: `Puck ${getClassName27()}`, children: [
-    /* @__PURE__ */ jsx38(
+    /* @__PURE__ */ jsx39(
       AppProvider,
       {
         value: {
@@ -5373,233 +6854,133 @@ function Puck({
           getPermissions: () => ({}),
           refreshPermissions: () => null
         },
-        children: /* @__PURE__ */ jsx38(appContext.Consumer, { children: ({ resolveData }) => /* @__PURE__ */ jsx38(
-          DragDropContext,
+        children: /* @__PURE__ */ jsx39(DragDropContext2, { children: /* @__PURE__ */ jsx39(CustomPuck, { children: children || /* @__PURE__ */ jsx39(
+          "div",
           {
-            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__ */ jsx38(
-              DropZoneProvider,
-              {
-                value: {
-                  data,
-                  itemSelector,
-                  setItemSelector,
-                  config,
-                  dispatch,
-                  draggedItem,
-                  placeholderStyle,
-                  mode: "edit",
-                  areaId: "root"
-                },
-                children: /* @__PURE__ */ jsx38(CustomPuck, { children: children || /* @__PURE__ */ jsx38(
-                  "div",
-                  {
-                    className: getLayoutClassName({
-                      leftSideBarVisible,
-                      menuOpen,
-                      mounted,
-                      rightSideBarVisible
-                    }),
-                    children: /* @__PURE__ */ jsxs21("div", { className: getLayoutClassName("inner"), children: [
-                      /* @__PURE__ */ jsx38(
-                        CustomHeader,
+            className: getLayoutClassName({
+              leftSideBarVisible,
+              menuOpen,
+              mounted,
+              rightSideBarVisible
+            }),
+            children: /* @__PURE__ */ jsxs21("div", { className: getLayoutClassName("inner"), children: [
+              /* @__PURE__ */ jsx39(
+                CustomHeader,
+                {
+                  actions: /* @__PURE__ */ jsx39(Fragment19, { children: /* @__PURE__ */ jsx39(CustomHeaderActions, { children: /* @__PURE__ */ jsx39(
+                    Button,
+                    {
+                      onClick: () => {
+                        onPublish && onPublish(data);
+                      },
+                      icon: /* @__PURE__ */ jsx39(Globe, { size: "14px" }),
+                      children: "Publish"
+                    }
+                  ) }) }),
+                  children: /* @__PURE__ */ jsx39("header", { className: getLayoutClassName("header"), children: /* @__PURE__ */ jsxs21("div", { className: getLayoutClassName("headerInner"), children: [
+                    /* @__PURE__ */ jsxs21("div", { className: getLayoutClassName("headerToggle"), children: [
+                      /* @__PURE__ */ jsx39(
+                        "div",
                         {
-                          actions: /* @__PURE__ */ jsx38(Fragment19, { children: /* @__PURE__ */ jsx38(CustomHeaderActions, { children: /* @__PURE__ */ jsx38(
-                            Button,
+                          className: getLayoutClassName("leftSideBarToggle"),
+                          children: /* @__PURE__ */ jsx39(
+                            IconButton,
                             {
                               onClick: () => {
-                                onPublish && onPublish(data);
+                                toggleSidebars("left");
                               },
-                              icon: /* @__PURE__ */ jsx38(Globe, { size: "14px" }),
-                              children: "Publish"
+                              title: "Toggle left sidebar",
+                              children: /* @__PURE__ */ jsx39(PanelLeft, { focusable: "false" })
                             }
-                          ) }) }),
-                          children: /* @__PURE__ */ jsx38("header", { className: getLayoutClassName("header"), children: /* @__PURE__ */ jsxs21("div", { className: getLayoutClassName("headerInner"), children: [
-                            /* @__PURE__ */ jsxs21(
-                              "div",
-                              {
-                                className: getLayoutClassName("headerToggle"),
-                                children: [
-                                  /* @__PURE__ */ jsx38(
-                                    "div",
-                                    {
-                                      className: getLayoutClassName(
-                                        "leftSideBarToggle"
-                                      ),
-                                      children: /* @__PURE__ */ jsx38(
-                                        IconButton,
-                                        {
-                                          onClick: () => {
-                                            toggleSidebars("left");
-                                          },
-                                          title: "Toggle left sidebar",
-                                          children: /* @__PURE__ */ jsx38(PanelLeft, { focusable: "false" })
-                                        }
-                                      )
-                                    }
-                                  ),
-                                  /* @__PURE__ */ jsx38(
-                                    "div",
-                                    {
-                                      className: getLayoutClassName(
-                                        "rightSideBarToggle"
-                                      ),
-                                      children: /* @__PURE__ */ jsx38(
-                                        IconButton,
-                                        {
-                                          onClick: () => {
-                                            toggleSidebars("right");
-                                          },
-                                          title: "Toggle right sidebar",
-                                          children: /* @__PURE__ */ jsx38(PanelRight, { focusable: "false" })
-                                        }
-                                      )
-                                    }
-                                  )
-                                ]
-                              }
-                            ),
-                            /* @__PURE__ */ jsx38(
-                              "div",
-                              {
-                                className: getLayoutClassName("headerTitle"),
-                                children: /* @__PURE__ */ jsxs21(Heading, { rank: "2", size: "xs", children: [
-                                  headerTitle || rootProps.title || "Page",
-                                  headerPath && /* @__PURE__ */ jsxs21(Fragment19, { children: [
-                                    " ",
-                                    /* @__PURE__ */ jsx38(
-                                      "code",
-                                      {
-                                        className: getLayoutClassName(
-                                          "headerPath"
-                                        ),
-                                        children: headerPath
-                                      }
-                                    )
-                                  ] })
-                                ] })
-                              }
-                            ),
-                            /* @__PURE__ */ jsxs21(
-                              "div",
-                              {
-                                className: getLayoutClassName("headerTools"),
-                                children: [
-                                  /* @__PURE__ */ jsx38(
-                                    "div",
-                                    {
-                                      className: getLayoutClassName("menuButton"),
-                                      children: /* @__PURE__ */ jsx38(
-                                        IconButton,
-                                        {
-                                          onClick: () => {
-                                            return setMenuOpen(!menuOpen);
-                                          },
-                                          title: "Toggle menu bar",
-                                          children: menuOpen ? /* @__PURE__ */ jsx38(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx38(ChevronDown, { focusable: "false" })
-                                        }
-                                      )
-                                    }
-                                  ),
-                                  /* @__PURE__ */ jsx38(
-                                    MenuBar,
-                                    {
-                                      appState,
-                                      dispatch,
-                                      onPublish,
-                                      menuOpen,
-                                      renderHeaderActions: () => /* @__PURE__ */ jsx38(CustomHeaderActions, { children: /* @__PURE__ */ jsx38(
-                                        Button,
-                                        {
-                                          onClick: () => {
-                                            onPublish && onPublish(data);
-                                          },
-                                          icon: /* @__PURE__ */ jsx38(Globe, { size: "14px" }),
-                                          children: "Publish"
-                                        }
-                                      ) }),
-                                      setMenuOpen
-                                    }
-                                  )
-                                ]
-                              }
-                            )
-                          ] }) })
+                          )
                         }
                       ),
-                      /* @__PURE__ */ jsxs21("div", { className: getLayoutClassName("leftSideBar"), children: [
-                        /* @__PURE__ */ jsx38(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx38(Components, {}) }),
-                        /* @__PURE__ */ jsx38(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx38(Outline, {}) })
-                      ] }),
-                      /* @__PURE__ */ jsx38(Canvas, {}),
-                      /* @__PURE__ */ jsx38("div", { className: getLayoutClassName("rightSideBar"), children: /* @__PURE__ */ jsx38(
-                        SidebarSection,
+                      /* @__PURE__ */ jsx39(
+                        "div",
+                        {
+                          className: getLayoutClassName("rightSideBarToggle"),
+                          children: /* @__PURE__ */ jsx39(
+                            IconButton,
+                            {
+                              onClick: () => {
+                                toggleSidebars("right");
+                              },
+                              title: "Toggle right sidebar",
+                              children: /* @__PURE__ */ jsx39(PanelRight, { focusable: "false" })
+                            }
+                          )
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx39("div", { className: getLayoutClassName("headerTitle"), children: /* @__PURE__ */ jsxs21(Heading, { rank: "2", size: "xs", children: [
+                      headerTitle || rootProps.title || "Page",
+                      headerPath && /* @__PURE__ */ jsxs21(Fragment19, { children: [
+                        " ",
+                        /* @__PURE__ */ jsx39(
+                          "code",
+                          {
+                            className: getLayoutClassName("headerPath"),
+                            children: headerPath
+                          }
+                        )
+                      ] })
+                    ] }) }),
+                    /* @__PURE__ */ jsxs21("div", { className: getLayoutClassName("headerTools"), children: [
+                      /* @__PURE__ */ jsx39("div", { className: getLayoutClassName("menuButton"), children: /* @__PURE__ */ jsx39(
+                        IconButton,
+                        {
+                          onClick: () => {
+                            return setMenuOpen(!menuOpen);
+                          },
+                          title: "Toggle menu bar",
+                          children: menuOpen ? /* @__PURE__ */ jsx39(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx39(ChevronDown, { focusable: "false" })
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx39(
+                        MenuBar,
                         {
-                          noPadding: true,
-                          noBorderTop: true,
-                          showBreadcrumbs: true,
-                          title: selectedItem ? selectedComponentLabel : "Page",
-                          children: /* @__PURE__ */ jsx38(Fields, {})
+                          appState,
+                          dispatch,
+                          onPublish,
+                          menuOpen,
+                          renderHeaderActions: () => /* @__PURE__ */ jsx39(CustomHeaderActions, { children: /* @__PURE__ */ jsx39(
+                            Button,
+                            {
+                              onClick: () => {
+                                onPublish && onPublish(data);
+                              },
+                              icon: /* @__PURE__ */ jsx39(Globe, { size: "14px" }),
+                              children: "Publish"
+                            }
+                          ) }),
+                          setMenuOpen
                         }
-                      ) })
+                      )
                     ] })
-                  }
-                ) })
-              }
-            )
+                  ] }) })
+                }
+              ),
+              /* @__PURE__ */ jsxs21("div", { className: getLayoutClassName("leftSideBar"), children: [
+                /* @__PURE__ */ jsx39(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx39(Components, {}) }),
+                /* @__PURE__ */ jsx39(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx39(Outline, {}) })
+              ] }),
+              /* @__PURE__ */ jsx39(Canvas, {}),
+              /* @__PURE__ */ jsx39("div", { className: getLayoutClassName("rightSideBar"), children: /* @__PURE__ */ jsx39(
+                SidebarSection,
+                {
+                  noPadding: true,
+                  noBorderTop: true,
+                  showBreadcrumbs: true,
+                  title: selectedItem ? selectedComponentLabel : "Page",
+                  children: /* @__PURE__ */ jsx39(Fields, {})
+                }
+              ) })
+            ] })
           }
-        ) })
+        ) }) })
       }
     ),
-    /* @__PURE__ */ jsx38("div", { id: "puck-portal-root", className: getClassName27("portal") })
+    /* @__PURE__ */ jsx39("div", { id: "puck-portal-root", className: getClassName27("portal") })
   ] });
 }
 Puck.Components = Components;
@@ -5609,7 +6990,7 @@ Puck.Preview = Preview;
 
 // components/Render/index.tsx
 init_react_import();
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 function Render({
   config,
   data
@@ -5622,21 +7003,45 @@ 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__ */ jsx39(DropZoneProvider, { value: { data: defaultedData, config, mode: "render" }, children: /* @__PURE__ */ jsx39(
-      config.root.render,
-      __spreadProps(__spreadValues({}, rootProps), {
-        puck: {
-          renderDropZone: DropZone,
-          isEditing: false
+    return /* @__PURE__ */ jsx40(
+      DropZoneProvider,
+      {
+        value: {
+          data: defaultedData,
+          config,
+          mode: "render",
+          depth: 0,
+          path: []
         },
-        title,
-        editMode: false,
-        id: "puck-root",
-        children: /* @__PURE__ */ jsx39(DropZone, { zone: rootDroppableId })
-      })
-    ) });
+        children: /* @__PURE__ */ jsx40(
+          config.root.render,
+          __spreadProps(__spreadValues({}, rootProps), {
+            puck: {
+              renderDropZone: DropZone,
+              isEditing: false
+            },
+            title,
+            editMode: false,
+            id: "puck-root",
+            children: /* @__PURE__ */ jsx40(DropZone, { zone: rootDroppableId })
+          })
+        )
+      }
+    );
   }
-  return /* @__PURE__ */ jsx39(DropZoneProvider, { value: { data: defaultedData, config, mode: "render" }, children: /* @__PURE__ */ jsx39(DropZone, { zone: rootDroppableId }) });
+  return /* @__PURE__ */ jsx40(
+    DropZoneProvider,
+    {
+      value: {
+        data: defaultedData,
+        config,
+        mode: "render",
+        depth: 0,
+        path: []
+      },
+      children: /* @__PURE__ */ jsx40(DropZone, { zone: rootDroppableId })
+    }
+  );
 }
 
 // lib/migrate.ts