@contentful/experiences-visual-editor-react 0.0.1-alpha.2 → 0.0.1-alpha.4

package/dist/index.js

@@ -11,33 +11,25 @@ import { produce } from 'immer';
 import { createPortal } from 'react-dom';
 import { v4 } from 'uuid';
 
-var css_248z$7 = "html,\nbody {\n  margin: 0;\n  padding: 0;\n}\n\n\n/*\n * All of these variables are tokens from Forma-36 and should not be adjusted as these\n * are global variables that may affect multiple places.\n * As our customers may use other design libraries, we try to avoid overlapping global\n * variables by always using the prefix `--exp-builder-` inside this SDK.\n */\n\n\n:root {\n  /* Color tokens from Forma 36: https://f36.contentful.com/tokens/color-system */\n  --exp-builder-blue100: #e8f5ff;\n  --exp-builder-blue200: #ceecff;\n  --exp-builder-blue300: #98cbff;\n  --exp-builder-blue400: #40a0ff;\n  --exp-builder-blue500: #036fe3;\n  --exp-builder-blue600: #0059c8;\n  --exp-builder-blue700: #0041ab;\n  --exp-builder-blue800: #003298;\n  --exp-builder-blue900: #002a8e;\n  --exp-builder-gray100: #f7f9fa;\n  --exp-builder-gray200: #e7ebee;\n  --exp-builder-gray300: #cfd9e0;\n  --exp-builder-gray400: #aec1cc;\n  --exp-builder-gray500: #67728a;\n  --exp-builder-gray600: #5a657c;\n  --exp-builder-gray700: #414d63;\n  --exp-builder-gray800: #1b273a;\n  --exp-builder-gray900: #111b2b;\n  --exp-builder-purple600: #6c3ecf;\n  --exp-builder-red200: #ffe0e0;\n  --exp-builder-red800: #7f0010;\n  --exp-builder-color-white: #ffffff;\n  --exp-builder-glow-primary: 0px 0px 0px 3px #e8f5ff;\n\n  /* RGB colors for applying opacity */\n  --exp-builder-blue100-rgb: 232, 245, 255;\n  --exp-builder-blue300-rgb: 152, 203, 255;\n\n  /* Spacing tokens from Forma 36: https://f36.contentful.com/tokens/spacing */\n  --exp-builder-spacing-s: 0.75rem;\n  --exp-builder-spacing-2xs: 0.25rem;\n\n  /* Typography tokens from Forma 36: https://f36.contentful.com/tokens/typography */\n  --exp-builder-font-size-l: 1rem;\n  --exp-builder-font-size-m: 0.875rem;\n  --exp-builder-font-stack-primary: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,\n    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\n  --exp-builder-line-height-condensed: 1.25;\n}\n";
+var css_248z$7 = "html,\nbody {\n  margin: 0;\n  padding: 0;\n}\n\n/*\n * All of these variables are tokens from Forma-36 and should not be adjusted as these\n * are global variables that may affect multiple places.\n * As our customers may use other design libraries, we try to avoid overlapping global\n * variables by always using the prefix `--exp-builder-` inside this SDK.\n */\n\n:root {\n  /* Color tokens from Forma 36: https://f36.contentful.com/tokens/color-system */\n  --exp-builder-blue100: #e8f5ff;\n  --exp-builder-blue200: #ceecff;\n  --exp-builder-blue300: #98cbff;\n  --exp-builder-blue400: #40a0ff;\n  --exp-builder-blue500: #036fe3;\n  --exp-builder-blue600: #0059c8;\n  --exp-builder-blue700: #0041ab;\n  --exp-builder-blue800: #003298;\n  --exp-builder-blue900: #002a8e;\n  --exp-builder-gray100: #f7f9fa;\n  --exp-builder-gray200: #e7ebee;\n  --exp-builder-gray300: #cfd9e0;\n  --exp-builder-gray400: #aec1cc;\n  --exp-builder-gray500: #67728a;\n  --exp-builder-gray600: #5a657c;\n  --exp-builder-gray700: #414d63;\n  --exp-builder-gray800: #1b273a;\n  --exp-builder-gray900: #111b2b;\n  --exp-builder-purple600: #6c3ecf;\n  --exp-builder-red200: #ffe0e0;\n  --exp-builder-red800: #7f0010;\n  --exp-builder-color-white: #ffffff;\n  --exp-builder-glow-primary: 0px 0px 0px 3px #e8f5ff;\n\n  /* RGB colors for applying opacity */\n  --exp-builder-blue100-rgb: 232, 245, 255;\n  --exp-builder-blue300-rgb: 152, 203, 255;\n\n  /* Spacing tokens from Forma 36: https://f36.contentful.com/tokens/spacing */\n  --exp-builder-spacing-s: 0.75rem;\n  --exp-builder-spacing-2xs: 0.25rem;\n\n  /* Typography tokens from Forma 36: https://f36.contentful.com/tokens/typography */\n  --exp-builder-font-size-l: 1rem;\n  --exp-builder-font-size-m: 0.875rem;\n  --exp-builder-font-stack-primary: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,\n    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\n  --exp-builder-line-height-condensed: 1.25;\n}\n";
 styleInject(css_248z$7);
 
 const INCOMING_EVENTS$1 = {
     RequestEditorMode: 'requestEditorMode',
-    CompositionUpdated: 'componentTreeUpdated',
+    ExperienceUpdated: 'componentTreeUpdated',
     ComponentDraggingChanged: 'componentDraggingChanged',
     ComponentDragCanceled: 'componentDragCanceled',
     ComponentDragStarted: 'componentDragStarted',
     ComponentDragEnded: 'componentDragEnded',
+    ComponentMoveEnded: 'componentMoveEnded',
     CanvasResized: 'canvasResized',
     SelectComponent: 'selectComponent',
     HoverComponent: 'hoverComponent',
     UpdatedEntity: 'updatedEntity',
-    /**
-     * @deprecated use `AssembliesAdded` instead. This will be removed in version 5.
-     * In the meanwhile, the experience builder will send the old and the new event to support multiple SDK versions.
-     */
-    DesignComponentsAdded: 'designComponentsAdded',
-    /**
-     * @deprecated use `AssembliesRegistered` instead. This will be removed in version 5.
-     * In the meanwhile, the experience builder will send the old and the new event to support multiple SDK versions.
-     */
-    DesignComponentsRegistered: 'designComponentsRegistered',
     AssembliesAdded: 'assembliesAdded',
     AssembliesRegistered: 'assembliesRegistered',
     InitEditor: 'initEditor',
+    MouseMove: 'mouseMove',
 };
 const CONTENTFUL_COMPONENTS$1 = {
     section: {
@@ -1195,6 +1187,13 @@ class EntityStoreBase {
         }
         return this.entryMap.get(id);
     }
+    toJSON() {
+        return {
+            entryMap: Object.fromEntries(this.entryMap),
+            assetMap: Object.fromEntries(this.assetMap),
+            locale: this.locale,
+        };
+    }
 }
 
 /**
@@ -1443,32 +1442,8 @@ function gatherDeepReferencesFromTree(startingNode, dataSource) {
     return deepReferences;
 }
 
-class DragState {
-    constructor() {
-        this.isDragStartedOnParent = false;
-        this.isDraggingItem = false;
-    }
-    get isDragging() {
-        return this.isDraggingItem;
-    }
-    get isDragStart() {
-        return this.isDragStartedOnParent;
-    }
-    updateIsDragging(isDraggingItem) {
-        this.isDraggingItem = isDraggingItem;
-    }
-    updateIsDragStartedOnParent(isDragStartedOnParent) {
-        this.isDragStartedOnParent = isDragStartedOnParent;
-    }
-    reset() {
-        this.isDraggingItem = false;
-        this.isDragStartedOnParent = false;
-    }
-}
-var dragState = new DragState();
-
-var css_248z$6 = ".styles-module_DraggableComponent__m5-dA {\n  pointer-events: all;\n  position: relative;\n  transition: outline 0.2s;\n  cursor: grab;\n  outline-offset: -2px;\n  outline: 2px solid transparent;\n  box-sizing: border-box;\n  display: flex;\n}\n\n.styles-module_DraggableComponent__m5-dA > * {\n  pointer-events: none;\n}\n\n.styles-module_isDragging__WHjPU {\n  overflow: hidden;\n}\n\n.styles-module_isDragging__WHjPU * {\n  pointer-events: none !important;\n}\n\n.styles-module_isSelected__BzICQ {\n  outline: 2px solid transparent !important;\n}\n\n.styles-module_overlay__r4th9 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  min-width: max-content;\n  height: 24px;\n  z-index: 1;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 14px;\n  font-weight: 500;\n  background-color: var(--exp-builder-gray500);\n  color: var(--exp-builder-color-white);\n  border-radius: 0 0 2px 0;\n  padding: 4px 12px 4px 12px;\n  transition: opacity 0.2s;\n  opacity: 0;\n  text-wrap: nowrap;\n}\n\n.styles-module_overlayContainer__eiX-5 {\n  opacity: 0;\n}\n\n.styles-module_overlayAssembly__tOzZU {\n  background-color: var(--exp-builder-purple600);\n}\n\n/* .DraggableComponent:hover .overlay {\n  opacity: 1;\n} */\n\n.styles-module_userIsDragging__lqbjG > .styles-module_overlay__r4th9,\n.styles-module_userIsDragging__lqbjG > .styles-module_overlayContainer__eiX-5 {\n  opacity: 0 !important;\n}\n\n.styles-module_userIsDragging__lqbjG {\n  outline: 2px solid transparent !important;\n}\n\n.styles-module_DraggableComponent__m5-dA:hover:not(:has(div[data-rfd-draggable-id]:hover)) > .styles-module_overlay__r4th9 {\n  opacity: 1;\n}\n\n.styles-module_DraggableComponent__m5-dA:hover,\n.styles-module_DraggableComponent__m5-dA:hover div[data-rfd-draggable-id] {\n  outline: 2px dashed var(--exp-builder-gray500);\n}\n\n.styles-module_DraggableComponent__m5-dA:hover:not(:has(div[data-rfd-draggable-id]:hover)) {\n  outline: 2px solid var(--exp-builder-gray500);\n}\n\n.styles-module_isAssemblyBlock__Y3Avk:hover,\n.styles-module_isAssemblyBlock__Y3Avk:hover div[data-rfd-draggable-id],\n.styles-module_DraggableComponent__m5-dA:hover div[data-rfd-draggable-id][data-cf-node-block-type^='assembly'] {\n  outline: 2px dashed var(--exp-builder-purple600) !important;\n}\n\n.styles-module_isAssemblyBlock__Y3Avk:hover:not(:has(div[data-rfd-draggable-id]:hover)) {\n  outline: 2px solid var(--exp-builder-purple600) !important;\n}\n";
-var styles$3 = {"DraggableComponent":"styles-module_DraggableComponent__m5-dA","isDragging":"styles-module_isDragging__WHjPU","isSelected":"styles-module_isSelected__BzICQ","overlay":"styles-module_overlay__r4th9","overlayContainer":"styles-module_overlayContainer__eiX-5","overlayAssembly":"styles-module_overlayAssembly__tOzZU","userIsDragging":"styles-module_userIsDragging__lqbjG","isAssemblyBlock":"styles-module_isAssemblyBlock__Y3Avk"};
+var css_248z$6 = ".styles-module_DraggableComponent__m5-dA {\n  pointer-events: all;\n  position: relative;\n  transition: outline 0.2s;\n  cursor: grab;\n  outline-offset: -2px;\n  outline: 2px solid transparent;\n  box-sizing: border-box;\n  display: flex;\n}\n\n.styles-module_DraggableClone__X8zTA {\n  outline: 2px solid var(--exp-builder-blue500);\n}\n\n.styles-module_DraggableComponent__m5-dA > * {\n  pointer-events: none;\n}\n\n.styles-module_isDragging__WHjPU {\n  overflow: hidden;\n}\n\n.styles-module_isDragging__WHjPU * {\n  pointer-events: none !important;\n}\n\n.styles-module_isSelected__BzICQ {\n  outline: 2px solid transparent !important;\n}\n\n.styles-module_overlay__r4th9 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  min-width: max-content;\n  height: 24px;\n  z-index: 1;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 14px;\n  font-weight: 500;\n  background-color: var(--exp-builder-gray500);\n  color: var(--exp-builder-color-white);\n  border-radius: 0 0 2px 0;\n  padding: 4px 12px 4px 12px;\n  transition: opacity 0.2s;\n  opacity: 0;\n  text-wrap: nowrap;\n}\n\n.styles-module_overlayContainer__eiX-5 {\n  opacity: 0;\n}\n\n.styles-module_overlayAssembly__tOzZU {\n  background-color: var(--exp-builder-purple600);\n}\n\n.styles-module_userIsDragging__lqbjG > .styles-module_overlay__r4th9,\n.styles-module_userIsDragging__lqbjG > .styles-module_overlayContainer__eiX-5 {\n  opacity: 0 !important;\n}\n\n.styles-module_userIsDragging__lqbjG {\n  outline: 2px solid transparent !important;\n}\n\n.styles-module_DraggableComponent__m5-dA:hover:not(:has(div[data-rfd-draggable-id]:hover)) > .styles-module_overlay__r4th9 {\n  opacity: 1;\n}\n\n.styles-module_DraggableComponent__m5-dA:hover,\n.styles-module_DraggableComponent__m5-dA:hover div[data-rfd-draggable-id] {\n  outline: 2px dashed var(--exp-builder-gray500);\n}\n\n.styles-module_DraggableComponent__m5-dA:hover:not(:has(div[data-rfd-draggable-id]:hover)) {\n  outline: 2px solid var(--exp-builder-gray500);\n}\n\n.styles-module_isAssemblyBlock__Y3Avk:hover,\n.styles-module_isAssemblyBlock__Y3Avk:hover div[data-rfd-draggable-id],\n.styles-module_DraggableComponent__m5-dA:hover div[data-rfd-draggable-id][data-cf-node-block-type^='assembly'] {\n  outline: 2px dashed var(--exp-builder-purple600);\n}\n\n.styles-module_isAssemblyBlock__Y3Avk:hover:not(:has(div[data-rfd-draggable-id]:hover)) {\n  outline: 2px solid var(--exp-builder-purple600);\n}\n";
+var styles$3 = {"DraggableComponent":"styles-module_DraggableComponent__m5-dA","DraggableClone":"styles-module_DraggableClone__X8zTA","isDragging":"styles-module_isDragging__WHjPU","isSelected":"styles-module_isSelected__BzICQ","overlay":"styles-module_overlay__r4th9","overlayContainer":"styles-module_overlayContainer__eiX-5","overlayAssembly":"styles-module_overlayAssembly__tOzZU","userIsDragging":"styles-module_userIsDragging__lqbjG","isAssemblyBlock":"styles-module_isAssemblyBlock__Y3Avk"};
 styleInject(css_248z$6);
 
 const SCROLL_STATES = {
@@ -1493,32 +1468,26 @@ const OUTGOING_EVENTS = {
     UpdateHoveredComponentCoordinates: 'updateHoveredComponentCoordinates',
     CanvasScroll: 'canvasScrolling',
     CanvasError: 'canvasError',
+    ComponentMoveStarted: 'componentMoveStarted',
+    ComponentMoveEnded: 'componentMoveEnded',
     OutsideCanvasClick: 'outsideCanvasClick',
 };
 const INCOMING_EVENTS = {
     RequestEditorMode: 'requestEditorMode',
-    CompositionUpdated: 'componentTreeUpdated',
+    ExperienceUpdated: 'componentTreeUpdated',
     ComponentDraggingChanged: 'componentDraggingChanged',
     ComponentDragCanceled: 'componentDragCanceled',
     ComponentDragStarted: 'componentDragStarted',
     ComponentDragEnded: 'componentDragEnded',
+    ComponentMoveEnded: 'componentMoveEnded',
     CanvasResized: 'canvasResized',
     SelectComponent: 'selectComponent',
     HoverComponent: 'hoverComponent',
     UpdatedEntity: 'updatedEntity',
-    /**
-     * @deprecated use `AssembliesAdded` instead. This will be removed in version 5.
-     * In the meanwhile, the experience builder will send the old and the new event to support multiple SDK versions.
-     */
-    DesignComponentsAdded: 'designComponentsAdded',
-    /**
-     * @deprecated use `AssembliesRegistered` instead. This will be removed in version 5.
-     * In the meanwhile, the experience builder will send the old and the new event to support multiple SDK versions.
-     */
-    DesignComponentsRegistered: 'designComponentsRegistered',
     AssembliesAdded: 'assembliesAdded',
     AssembliesRegistered: 'assembliesRegistered',
     InitEditor: 'initEditor',
+    MouseMove: 'mouseMove',
 };
 const INTERNAL_EVENTS = {
     ComponentsRegistered: 'cfComponentsRegistered',
@@ -1569,15 +1538,6 @@ const ASSEMBLY_NODE_TYPE = 'assembly';
 const ASSEMBLY_DEFAULT_CATEGORY = 'Assemblies';
 const ASSEMBLY_BLOCK_NODE_TYPE = 'assemblyBlock';
 const ASSEMBLY_NODE_TYPES = [ASSEMBLY_NODE_TYPE, ASSEMBLY_BLOCK_NODE_TYPE];
-/** @deprecated use `ASSEMBLY_NODE_TYPE` instead. This will be removed in version 5. */
-const DESIGN_COMPONENT_NODE_TYPE = 'designComponent';
-/** @deprecated use `ASSEMBLY_BLOCK_NODE_TYPE` instead. This will be removed in version 5. */
-const DESIGN_COMPONENT_BLOCK_NODE_TYPE = 'designComponentBlock';
-/** @deprecated use `ASSEMBLY_NODE_TYPES` instead. This will be removed in version 5. */
-const DESIGN_COMPONENT_NODE_TYPES = [
-    DESIGN_COMPONENT_NODE_TYPE,
-    DESIGN_COMPONENT_BLOCK_NODE_TYPE,
-];
 const CF_STYLE_ATTRIBUTES = [
     'cfHorizontalAlignment',
     'cfVerticalAlignment',
@@ -1704,8 +1664,13 @@ const Tooltip = ({ coordinates, id, label, isAssemblyBlock, isContainer }) => {
 
 const useDraggedItemStore = create((set) => ({
     draggedItem: undefined,
+    domRect: undefined,
     componentId: '',
     isDraggingOnCanvas: false,
+    onBeforeCaptureId: '',
+    mouseX: 0,
+    mouseY: 0,
+    scrollY: 0,
     setComponentId(id) {
         set({ componentId: id });
     },
@@ -1715,6 +1680,18 @@ const useDraggedItemStore = create((set) => ({
     setDraggingOnCanvas: (isDraggingOnCanvas) => {
         set({ isDraggingOnCanvas });
     },
+    setOnBeforeCaptureId: (onBeforeCaptureId) => {
+        set({ onBeforeCaptureId });
+    },
+    setMousePosition(x, y) {
+        set({ mouseX: x, mouseY: y });
+    },
+    setDomRect(domRect) {
+        set({ domRect });
+    },
+    setScrollY(y) {
+        set({ scrollY: y });
+    },
 }));
 
 const DRAGGABLE_HEIGHT = 30;
@@ -1722,7 +1699,9 @@ const DRAGGABLE_WIDTH = 50;
 const DRAG_PADDING = 4;
 const ROOT_ID = 'root';
 const COMPONENT_LIST_ID = 'component-list';
+const NEW_COMPONENT_ID = 'ctfl-new-draggable';
 const CTFL_ZONE_ID = 'data-ctfl-zone-id';
+const CTFL_DRAGGING_ELEMENT = 'data-ctfl-dragging-element';
 const HITBOX = {
     WIDTH: 80,
     HEIGHT: 20,
@@ -1756,6 +1735,11 @@ var HitboxDirection;
     HitboxDirection[HitboxDirection["SELF_VERTICAL"] = 4] = "SELF_VERTICAL";
     HitboxDirection[HitboxDirection["SELF_HORIZONTAL"] = 5] = "SELF_HORIZONTAL";
 })(HitboxDirection || (HitboxDirection = {}));
+var DraggablePosition;
+(function (DraggablePosition) {
+    DraggablePosition[DraggablePosition["CENTERED"] = 0] = "CENTERED";
+    DraggablePosition[DraggablePosition["MOUSE_POSITION"] = 1] = "MOUSE_POSITION";
+})(DraggablePosition || (DraggablePosition = {}));
 
 /**
  * Calculate the size and position of the dropzone indicator
@@ -1859,6 +1843,28 @@ const Placeholder = (props) => {
         } })));
 };
 
+function useDraggablePosition({ draggableId, draggableRef, position }) {
+    const isDraggingOnCanvas = useDraggedItemStore((state) => state.isDraggingOnCanvas);
+    const draggingId = useDraggedItemStore((state) => state.onBeforeCaptureId);
+    const preDragDomRect = useDraggedItemStore((state) => state.domRect);
+    useEffect(() => {
+        const el = draggableRef?.current;
+        if (!isDraggingOnCanvas || draggingId !== draggableId || !el) {
+            return;
+        }
+        const isCentered = position === DraggablePosition.CENTERED || !preDragDomRect;
+        const domRect = isCentered ? el.getBoundingClientRect() : preDragDomRect;
+        const { mouseX, mouseY } = useDraggedItemStore.getState();
+        const top = isCentered ? mouseY - domRect.height / 2 : domRect.top;
+        const left = isCentered ? mouseX - domRect.width / 2 : domRect.left;
+        el.style.position = 'fixed';
+        el.style.left = `${left}px`;
+        el.style.top = `${top}px`;
+        el.style.width = `${domRect.width}px`;
+        el.style.height = `${domRect.height}px`;
+    }, [draggableRef, draggableId, isDraggingOnCanvas, draggingId, position, preDragDomRect]);
+}
+
 function getStyle$2(style, snapshot) {
     if (!snapshot.isDropAnimating) {
         return style;
@@ -1869,8 +1875,18 @@ function getStyle$2(style, snapshot) {
         transitionDuration: `0.001s`,
     };
 }
-const DraggableComponent = ({ children, id, index, isAssemblyBlock = false, isSelected = false, onClick = () => null, label, coordinates, userIsDragging, style, wrapperProps, isContainer, blockId, isDragDisabled = false, placeholder, ...rest }) => {
-    return (React.createElement(Draggable, { key: id, draggableId: id, index: index, isDragDisabled: isDragDisabled }, (provided, snapshot) => (React.createElement("div", { "data-ctfl-draggable-id": id, "data-test-id": `draggable-${blockId ?? 'node'}`, ref: provided.innerRef, ...wrapperProps, ...provided.draggableProps, ...provided.dragHandleProps, ...rest, className: classNames(styles$3.DraggableComponent, wrapperProps.className, {
+const DraggableComponent = ({ children, id, index, isAssemblyBlock = false, isSelected = false, onClick = () => null, coordinates, userIsDragging, style, wrapperProps, isContainer, blockId, isDragDisabled = false, placeholder, definition, ...rest }) => {
+    const ref = useRef(null);
+    const setDomRect = useDraggedItemStore((state) => state.setDomRect);
+    useDraggablePosition({
+        draggableId: id,
+        draggableRef: ref,
+        position: DraggablePosition.MOUSE_POSITION,
+    });
+    return (React.createElement(Draggable, { key: id, draggableId: id, index: index, isDragDisabled: isDragDisabled }, (provided, snapshot) => (React.createElement("div", { "data-ctfl-draggable-id": id, "data-test-id": `draggable-${blockId ?? 'node'}`, ref: (refNode) => {
+            provided?.innerRef(refNode);
+            ref.current = refNode;
+        }, ...wrapperProps, ...provided.draggableProps, ...provided.dragHandleProps, ...rest, className: classNames(styles$3.DraggableComponent, wrapperProps.className, {
             [styles$3.isAssemblyBlock]: isAssemblyBlock,
             [styles$3.isDragging]: snapshot.isDragging,
             [styles$3.isSelected]: isSelected,
@@ -1878,8 +1894,14 @@ const DraggableComponent = ({ children, id, index, isAssemblyBlock = false, isSe
         }), style: {
             ...style,
             ...getStyle$2(provided.draggableProps.style, snapshot),
+        }, onMouseDown: (e) => {
+            if (isDragDisabled) {
+                return;
+            }
+            e.stopPropagation();
+            setDomRect(e.currentTarget.getBoundingClientRect());
         }, onClick: onClick },
-        React.createElement(Tooltip, { id: id, coordinates: coordinates, isAssemblyBlock: isAssemblyBlock, isContainer: isContainer, label: label }),
+        React.createElement(Tooltip, { id: id, coordinates: coordinates, isAssemblyBlock: isAssemblyBlock, isContainer: isContainer, label: definition.name || 'No label specified' }),
         React.createElement(Placeholder, { ...placeholder, id: id }),
         children))));
 };
@@ -2061,14 +2083,10 @@ const useEntityStore = create((set) => ({
 const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, renderDropzone, definition, userIsDragging, }) => {
     const unboundValues = useEditorStore((state) => state.unboundValues);
     const dataSource = useEditorStore((state) => state.dataSource);
-    const newComponentId = useDraggedItemStore((state) => state.componentId);
-    const isDraggingNewCompont = !!newComponentId;
     const entityStore = useEntityStore((state) => state.entityStore);
     const props = useMemo(() => {
         // Don't enrich the assembly wrapper node with props
-        if (!definition ||
-            node.type === DESIGN_COMPONENT_NODE_TYPE ||
-            node.type === ASSEMBLY_NODE_TYPE) {
+        if (!definition || node.type === ASSEMBLY_NODE_TYPE) {
             return {};
         }
         return Object.entries(definition.variables).reduce((acc, [variableName, variableDefinition]) => {
@@ -2195,7 +2213,6 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
                 minHeight: EMPTY_CONTAINER_HEIGHT,
             }),
             ...(userIsDragging &&
-                isDraggingNewCompont &&
                 isContentfulStructureComponent(node?.data.blockId) &&
                 node?.data.blockId !== CONTENTFUL_COMPONENTS.columns.id && {
                 padding: addExtraDropzonePadding(componentStyles.padding?.toString() || '0 0 0 0'),
@@ -2367,7 +2384,7 @@ const deserializeAssemblyNode = ({ node, nodeId, nodeLocation, parentId, assembl
     };
 };
 const resolveAssembly = ({ node, entityStore, }) => {
-    if (node.type !== DESIGN_COMPONENT_NODE_TYPE && node.type !== ASSEMBLY_NODE_TYPE) {
+    if (node.type !== ASSEMBLY_NODE_TYPE) {
         return node;
     }
     const componentId = node.data.blockId;
@@ -2378,7 +2395,9 @@ const resolveAssembly = ({ node, entityStore, }) => {
         });
         return node;
     }
-    const componentFields = entityStore?.getValue(assembly, ['fields']);
+    const componentFields = entityStore?.getValue(assembly, [
+        'fields',
+    ]);
     if (!componentFields) {
         console.warn(`Entry for assembly with ID '${componentId}' not found`, { entityStore });
         return node;
@@ -2412,8 +2431,7 @@ const useComponent = ({ node: rawNode, resolveDesignValue, renderDropzone, userI
     const areEntitiesFetched = useEntityStore((state) => state.areEntitiesFetched);
     const entityStore = useEntityStore((state) => state.entityStore);
     const node = useMemo(() => {
-        if ((rawNode.type === DESIGN_COMPONENT_NODE_TYPE || rawNode.type === ASSEMBLY_NODE_TYPE) &&
-            areEntitiesFetched) {
+        if (rawNode.type === ASSEMBLY_NODE_TYPE && areEntitiesFetched) {
             return resolveAssembly({
                 node: rawNode,
                 entityStore,
@@ -2423,8 +2441,7 @@ const useComponent = ({ node: rawNode, resolveDesignValue, renderDropzone, userI
     }, [areEntitiesFetched, rawNode, entityStore]);
     const componentRegistration = useMemo(() => {
         const registration = componentRegistry.get(node.data.blockId);
-        if ((node.type === DESIGN_COMPONENT_NODE_TYPE || node.type === ASSEMBLY_NODE_TYPE) &&
-            !registration) {
+        if (node.type === ASSEMBLY_NODE_TYPE && !registration) {
             return createAssemblyRegistration({
                 definitionId: node.data.blockId,
                 component: Assembly,
@@ -2448,7 +2465,7 @@ const useComponent = ({ node: rawNode, resolveDesignValue, renderDropzone, userI
     const { editorMode, renderDropzone: _renderDropzone, ...otherComponentProps } = componentProps;
     const elementToRender = builtInComponents.includes(node.data.blockId || '')
         ? (dragProps) => React.createElement(componentRegistration.component, { ...dragProps, ...componentProps })
-        : node.type === DESIGN_COMPONENT_NODE_TYPE || node.type === ASSEMBLY_NODE_TYPE
+        : node.type === ASSEMBLY_NODE_TYPE
             ? // Assembly.tsx requires renderDropzone and editorMode as well
                 () => React.createElement(componentRegistration.component, componentProps)
             : () => React.createElement(componentRegistration.component, otherComponentProps);
@@ -2457,7 +2474,7 @@ const useComponent = ({ node: rawNode, resolveDesignValue, renderDropzone, userI
         componentId,
         elementToRender,
         wrapperProps,
-        label: componentRegistration.definition.name,
+        definition: componentRegistration.definition,
     };
 };
 
@@ -2471,7 +2488,7 @@ const useComponent = ({ node: rawNode, resolveDesignValue, renderDropzone, userI
  * component.
  */
 const DraggableChildComponent = (props) => {
-    const { elementToRender, id, index, isAssemblyBlock = false, isSelected = false, onClick = () => null, label, coordinates, userIsDragging, style, isContainer, blockId, isDragDisabled = false, wrapperProps, } = props;
+    const { elementToRender, id, index, isAssemblyBlock = false, isSelected = false, onClick = () => null, coordinates, userIsDragging, style, isContainer, blockId, isDragDisabled = false, wrapperProps, definition, } = props;
     return (React.createElement(Draggable, { key: id, draggableId: id, index: index, isDragDisabled: isDragDisabled }, (provided, snapshot) => elementToRender({
         ['data-ctfl-draggable-id']: id,
         ['data-test-id']: `draggable-${blockId}`,
@@ -2490,11 +2507,11 @@ const DraggableChildComponent = (props) => {
             ...provided.draggableProps.style,
         },
         onClick,
-        Tooltip: (React.createElement(Tooltip, { id: id, coordinates: coordinates, isAssemblyBlock: isAssemblyBlock, isContainer: isContainer, label: label })),
+        Tooltip: (React.createElement(Tooltip, { id: id, coordinates: coordinates, isAssemblyBlock: isAssemblyBlock, isContainer: isContainer, label: definition.name || 'No label specified' })),
     })));
 };
 
-var css_248z$2 = ".styles-module_container__te-1H {\n  margin-left: auto;\n  margin-right: auto;\n  position: relative;\n  height: 100%;\n  outline-offset: -2px;\n  outline: 2px solid transparent;\n  width: 100%;\n  transition: outline 0.2s;\n  pointer-events: all;\n}\n\n.styles-module_container__te-1H:not(.styles-module_isRoot__5cn-i) {\n  outline-offset: -1px;\n}\n\n.styles-module_isRoot__5cn-i,\n.styles-module_isEmptyCanvas__0XHZR {\n  flex: 1;\n}\n\n.styles-module_isEmptyZone__zVpnZ {\n  min-height: 80px;\n}\n\n.styles-module_isDragging__Gm8v5:not(.styles-module_isRoot__5cn-i) {\n  outline: 2px dashed var(--exp-builder-blue500);\n}\n\n.styles-module_isDestination__5sCQx:not(.styles-module_isRoot__5cn-i) {\n  outline: 2px dashed var(--exp-builder-blue500);\n  background-color: rgba(var(--exp-builder-blue100-rgb), 0.5);\n}\n\n.styles-module_hitbox__YQ-1Z {\n  position: fixed;\n  pointer-events: all !important;\n}\n";
+var css_248z$2 = ".styles-module_container__te-1H {\n  margin-left: auto;\n  margin-right: auto;\n  position: relative;\n  height: 100%;\n  outline-offset: -2px;\n  outline: 2px solid transparent;\n  width: 100%;\n  background-color: transparent;\n  transition:\n    outline 0.2s,\n    background-color 0.2s;\n  pointer-events: all;\n}\n\n.styles-module_container__te-1H:not(.styles-module_isRoot__5cn-i) {\n  outline-offset: -1px;\n}\n\n.styles-module_isRoot__5cn-i,\n.styles-module_isEmptyCanvas__0XHZR {\n  flex: 1;\n}\n\n.styles-module_isEmptyZone__zVpnZ {\n  min-height: 80px;\n}\n\n.styles-module_isDragging__Gm8v5:not(.styles-module_isRoot__5cn-i) {\n  outline: 2px dashed var(--exp-builder-gray300);\n}\n\n.styles-module_isDestination__5sCQx:not(.styles-module_isRoot__5cn-i) {\n  outline: 2px dashed var(--exp-builder-blue400);\n  background-color: rgba(var(--exp-builder-blue100-rgb), 0.5);\n  z-index: 100;\n}\n\n.styles-module_hitbox__YQ-1Z {\n  position: fixed;\n  pointer-events: all !important;\n}\n";
 var styles$2 = {"container":"styles-module_container__te-1H","isRoot":"styles-module_isRoot__5cn-i","isEmptyCanvas":"styles-module_isEmptyCanvas__0XHZR","isEmptyZone":"styles-module_isEmptyZone__zVpnZ","isDragging":"styles-module_isDragging__Gm8v5","isDestination":"styles-module_isDestination__5sCQx","hitbox":"styles-module_hitbox__YQ-1Z"};
 styleInject(css_248z$2);
 
@@ -2755,7 +2772,7 @@ function treeVisit(initialNode, onNode) {
 }
 
 const isAssemblyNode = (node) => {
-    return node.type === DESIGN_COMPONENT_NODE_TYPE || node.type === ASSEMBLY_NODE_TYPE;
+    return node.type === ASSEMBLY_NODE_TYPE;
 };
 const useTreeStore = create((set, get) => ({
     tree: {
@@ -2901,7 +2918,7 @@ const getHitboxStyles = ({ direction, zoneDepth, domRect }) => {
             return {
                 width,
                 height: HEIGHT,
-                top: top - calcOffsetDepth(zoneDepth),
+                top: top - calcOffsetDepth(zoneDepth) - scrollY,
                 left,
                 zIndex: 100 + zoneDepth,
             };
@@ -2909,7 +2926,7 @@ const getHitboxStyles = ({ direction, zoneDepth, domRect }) => {
             return {
                 width,
                 height: HEIGHT,
-                top: bottom + calcOffsetDepth(zoneDepth),
+                top: bottom + calcOffsetDepth(zoneDepth) - scrollY,
                 left,
                 zIndex: 100 + zoneDepth,
             };
@@ -2918,7 +2935,7 @@ const getHitboxStyles = ({ direction, zoneDepth, domRect }) => {
                 width: WIDTH,
                 height: height - HEIGHT,
                 left: left - calcOffsetDepth(zoneDepth) - WIDTH / 2,
-                top: top + HEIGHT / 2,
+                top: top + HEIGHT / 2 - scrollY,
                 zIndex: 100 + zoneDepth,
             };
         case HitboxDirection.RIGHT:
@@ -2926,7 +2943,7 @@ const getHitboxStyles = ({ direction, zoneDepth, domRect }) => {
                 width: WIDTH,
                 height: height - HEIGHT,
                 left: right - calcOffsetDepth(zoneDepth) - WIDTH / 2,
-                top: top + HEIGHT / 2,
+                top: top + HEIGHT / 2 - scrollY,
                 zIndex: 100 + zoneDepth,
             };
         case HitboxDirection.SELF_VERTICAL: {
@@ -2938,7 +2955,7 @@ const getHitboxStyles = ({ direction, zoneDepth, domRect }) => {
                 width,
                 height: selfHeight,
                 left,
-                top: top + height / 2 - selfHeight / 2,
+                top: top + height / 2 - selfHeight / 2 - scrollY,
                 zIndex: 1000 + zoneDepth,
             };
         }
@@ -2950,7 +2967,7 @@ const getHitboxStyles = ({ direction, zoneDepth, domRect }) => {
                 width: width - DRAGGABLE_WIDTH * 2,
                 height,
                 left: left + (DRAGGABLE_WIDTH * 2) / 2,
-                top,
+                top: top - scrollY,
                 zIndex: 1000 + zoneDepth,
             };
         }
@@ -2962,6 +2979,7 @@ const getHitboxStyles = ({ direction, zoneDepth, domRect }) => {
 const Hitboxes = ({ zoneId, parentZoneId, enableRootHitboxes }) => {
     const tree = useTreeStore((state) => state.tree);
     const isDraggingOnCanvas = useDraggedItemStore((state) => state.isDraggingOnCanvas);
+    const scrollY = useDraggedItemStore((state) => state.scrollY);
     const zoneDepth = useMemo(() => getItemDepthFromNode({ id: parentZoneId }, tree.root), [tree, parentZoneId]);
     const [fetchDomRect, setFetchDomRect] = useState(Date.now());
     useEffect(() => {
@@ -2987,10 +3005,11 @@ const Hitboxes = ({ zoneId, parentZoneId, enableRootHitboxes }) => {
     const isVertical = zoneDirection === 'vertical';
     const isRoot = parentZoneId === ROOT_ID;
     const showRootHitboxes = isRoot && enableRootHitboxes;
-    const getStyles = useCallback((direction) => getHitboxStyles({ direction, zoneDepth, domRect }), [zoneDepth, domRect]);
+    const getStyles = useCallback((direction) => getHitboxStyles({ direction, zoneDepth, domRect, scrollY }), [zoneDepth, domRect, scrollY]);
     const ActiveHitboxes = (React.createElement(React.Fragment, null,
         React.createElement("div", { "data-ctfl-zone-id": zoneId, className: styles$2.hitbox, style: getStyles(isVertical ? HitboxDirection.SELF_VERTICAL : HitboxDirection.SELF_HORIZONTAL) }),
-        showRootHitboxes ? (React.createElement("div", { "data-ctfl-zone-id": parentZoneId, className: styles$2.hitbox, style: getStyles(HitboxDirection.BOTTOM) })) : (React.createElement(React.Fragment, null,
+        showRootHitboxes && (React.createElement("div", { "data-ctfl-zone-id": parentZoneId, className: styles$2.hitbox, style: getStyles(HitboxDirection.BOTTOM) })),
+        !isRoot && (React.createElement(React.Fragment, null,
             React.createElement("div", { "data-ctfl-zone-id": parentZoneId, className: styles$2.hitbox, style: getStyles(isVertical ? HitboxDirection.TOP : HitboxDirection.LEFT) }),
             React.createElement("div", { "data-ctfl-zone-id": parentZoneId, className: styles$2.hitbox, style: getStyles(isVertical ? HitboxDirection.BOTTOM : HitboxDirection.RIGHT) })))));
     if (!hitboxContainer) {
@@ -3002,7 +3021,7 @@ const Hitboxes = ({ zoneId, parentZoneId, enableRootHitboxes }) => {
 const EditorBlock = ({ node: rawNode, resolveDesignValue, renderDropzone, draggingNewComponent, index, zoneId, userIsDragging, placeholder, }) => {
     const setSelectedNodeId = useEditorStore((state) => state.setSelectedNodeId);
     const selectedNodeId = useEditorStore((state) => state.selectedNodeId);
-    const { node, componentId, wrapperProps, label, elementToRender } = useComponent({
+    const { node, componentId, wrapperProps, definition, elementToRender } = useComponent({
         node: rawNode,
         resolveDesignValue,
         renderDropzone,
@@ -3015,7 +3034,7 @@ const EditorBlock = ({ node: rawNode, resolveDesignValue, renderDropzone, draggi
     const isAssembly = node.type === ASSEMBLY_NODE_TYPE;
     const isStructureComponent = isContentfulStructureComponent(node.data.blockId);
     const isRootComponent = zoneId === ROOT_ID;
-    const enableRootHitboxes = isRootComponent && !draggingNewComponent;
+    const enableRootHitboxes = isRootComponent && !!draggingNewComponent;
     const onClick = (e) => {
         e.stopPropagation();
         if (!userIsDragging) {
@@ -3035,10 +3054,10 @@ const EditorBlock = ({ node: rawNode, resolveDesignValue, renderDropzone, draggi
     };
     if (node.data.blockId === CONTENTFUL_COMPONENTS.singleColumn.id) {
         return (React.createElement(React.Fragment, null,
-            React.createElement(DraggableChildComponent, { elementToRender: elementToRender, label: label || 'No Label Specified', id: componentId, index: index, isAssemblyBlock: isAssemblyBlock, isDragDisabled: isSingleColumn, isSelected: selectedNodeId === componentId, userIsDragging: userIsDragging, isContainer: isContainer, blockId: node.data.blockId, coordinates: coordinates, wrapperProps: wrapperProps, onClick: onClick }),
+            React.createElement(DraggableChildComponent, { elementToRender: elementToRender, id: componentId, index: index, isAssemblyBlock: isAssemblyBlock, isDragDisabled: isSingleColumn, isSelected: selectedNodeId === componentId, userIsDragging: userIsDragging, isContainer: isContainer, blockId: node.data.blockId, coordinates: coordinates, wrapperProps: wrapperProps, onClick: onClick, definition: definition }),
             isStructureComponent && userIsDragging && (React.createElement(Hitboxes, { parentZoneId: zoneId, zoneId: componentId, enableRootHitboxes: enableRootHitboxes }))));
     }
-    return (React.createElement(DraggableComponent, { placeholder: placeholder, label: label || 'No Label Specified', id: componentId, index: index, isAssemblyBlock: isAssemblyBlock, isDragDisabled: isAssemblyBlock, isSelected: selectedNodeId === componentId, userIsDragging: userIsDragging, isContainer: isContainer, blockId: node.data.blockId, coordinates: coordinates, wrapperProps: wrapperProps, onClick: onClick },
+    return (React.createElement(DraggableComponent, { placeholder: placeholder, definition: definition, id: componentId, index: index, isAssemblyBlock: isAssemblyBlock, isDragDisabled: isAssemblyBlock, isSelected: selectedNodeId === componentId, userIsDragging: userIsDragging, isContainer: isContainer, blockId: node.data.blockId, coordinates: coordinates, wrapperProps: wrapperProps, onClick: onClick },
         elementToRender(),
         isStructureComponent && userIsDragging && (React.createElement(Hitboxes, { parentZoneId: zoneId, zoneId: componentId, enableRootHitboxes: enableRootHitboxes }))));
 };
@@ -3057,7 +3076,7 @@ const EmptyContainer = ({ isDragging }) => {
             React.createElement("rect", { width: "11.676", height: "11.676", x: "18.011", y: "18.625", rx: "1.621", transform: "rotate(45 18.01 18.625)" }),
             React.createElement("rect", { width: "11.676", height: "11.676", x: "30.557", y: "10.131", rx: "1.621", transform: "rotate(60 30.557 10.13)" }),
             React.createElement("path", { fill: "#fff", stroke: "#fff", strokeWidth: ".243", d: "M31.113 17.038a.463.463 0 0 0-.683-.517l-1.763 1.032-1.033-1.763a.464.464 0 0 0-.8.469l1.034 1.763-1.763 1.033a.463.463 0 1 0 .468.8l1.763-1.033 1.033 1.763a.463.463 0 1 0 .8-.469l-1.033-1.763 1.763-1.033a.463.463 0 0 0 .214-.282Z" })),
-        React.createElement("span", { className: styles$1.label }, "Add elements to begin")));
+        React.createElement("span", { className: styles$1.label }, "Add components to begin")));
 };
 
 const getZoneParents = (zoneId) => {
@@ -3133,7 +3152,7 @@ const EditorBlockClone = ({ node: rawNode, resolveDesignValue, snapshot, provide
     if (isSingleColumn) {
         return elementToRender();
     }
-    return (React.createElement("div", { ref: provided?.innerRef, ...wrapperProps, ...provided?.draggableProps, ...provided?.dragHandleProps, className: classNames(styles$3.DraggableComponent, wrapperProps.className, {
+    return (React.createElement("div", { ref: provided?.innerRef, "data-ctfl-dragging-element": true, ...wrapperProps, ...provided?.draggableProps, ...provided?.dragHandleProps, className: classNames(styles$3.DraggableComponent, wrapperProps.className, styles$3.DraggableClone, {
             [styles$3.isAssemblyBlock]: isAssemblyBlock,
             [styles$3.isDragging]: snapshot?.isDragging,
         }), style: getStyle$1(provided?.draggableProps.style, snapshot) }, elementToRender()));
@@ -3170,8 +3189,7 @@ function Dropzone({ node, zoneId, resolveDesignValue, className, WrapperComponen
     const isRootZone = zoneId === ROOT_ID;
     const isDestination = draggedDestinationId === zoneId;
     const isEmptyCanvas = isRootZone && !content.length;
-    const isAssembly = DESIGN_COMPONENT_NODE_TYPES.includes(node?.type || '') ||
-        ASSEMBLY_NODE_TYPES.includes(node?.type || '');
+    const isAssembly = ASSEMBLY_NODE_TYPES.includes(node?.type || '');
     // To avoid a circular dependency, we create the recursive rendering function here and trickle it down
     const renderDropzone = useCallback((node, props) => {
         return (React.createElement(Dropzone, { zoneId: node.data.id, node: node, resolveDesignValue: resolveDesignValue, ...props }));
@@ -3182,13 +3200,30 @@ function Dropzone({ node, zoneId, resolveDesignValue, className, WrapperComponen
     if (!resolveDesignValue) {
         return null;
     }
-    // Don't trigger the dropzone when it's the root because then the only hit boxes that show up will be root level zones
-    // Exception 1: If it comes from the component list (because we want the component list components to work for all zones
-    // Exception 2: If it's a child of a root level zone (because we want to be able to re-order root level containers)
+    /**
+     * The Rules of Dropzones
+     *
+     * 1. A dropzone is disabled unless the mouse is hovering over it
+     *
+     * 2. Dragging a new component onto the canvas has no addtional rules
+     * besides rule #1
+     *
+     * 3. Dragging a component that is a direct descendant of the root
+     * (parentId === ROOT_ID) then only the Root Dropzone is enabled
+     *
+     * 4. Dragging a nested component (parentId !== ROOT_ID) then the Root
+     * Dropzone is disabled, all other Dropzones follow rule #1
+     *
+     * 5. Assemblies and the SingleColumn component are always disabled
+     *
+     */
     const isDropzoneEnabled = () => {
         if (node?.data.blockId === CONTENTFUL_COMPONENTS.columns.id) {
             return false;
         }
+        if (isAssembly) {
+            return false;
+        }
         if (isDraggingNewComponent) {
             return isHoveringZone;
         }
@@ -3231,6 +3266,12 @@ function getStyle(style, snapshot) {
     };
 }
 const DraggableContainer = ({ id }) => {
+    const ref = useRef(null);
+    useDraggablePosition({
+        draggableId: id,
+        draggableRef: ref,
+        position: DraggablePosition.CENTERED,
+    });
     return (React.createElement("div", { id: COMPONENT_LIST_ID, style: {
             position: 'absolute',
             top: 0,
@@ -3239,7 +3280,10 @@ const DraggableContainer = ({ id }) => {
             zIndex: -1,
         } },
         React.createElement(Droppable, { droppableId: COMPONENT_LIST_ID, isDropDisabled: true }, (provided) => (React.createElement("div", { ...provided.droppableProps, ref: provided.innerRef },
-            React.createElement(Draggable, { draggableId: id, key: id, index: 0 }, (provided, snapshot) => (React.createElement("div", { id: "item", ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: {
+            React.createElement(Draggable, { draggableId: id, key: id, index: 0 }, (provided, snapshot) => (React.createElement("div", { id: NEW_COMPONENT_ID, "data-ctfl-dragging-element": true, ref: (node) => {
+                    provided.innerRef(node);
+                    ref.current = node;
+                }, ...provided.draggableProps, ...provided.dragHandleProps, style: {
                     ...getStyle(provided.draggableProps.style, snapshot),
                     width: DRAGGABLE_WIDTH,
                     height: DRAGGABLE_HEIGHT,
@@ -3407,8 +3451,7 @@ class MouseOverHandler {
         };
     }
     getBoundingClientRect(element) {
-        const isAssembly = element.getAttribute('data-cf-node-block-type') === DESIGN_COMPONENT_NODE_TYPE ||
-            element.getAttribute('data-cf-node-block-type') === ASSEMBLY_NODE_TYPE;
+        const isAssembly = element.getAttribute('data-cf-node-block-type') === ASSEMBLY_NODE_TYPE;
         if (!isAssembly) {
             return element.getBoundingClientRect();
         }
@@ -3459,39 +3502,74 @@ const sendHoveredComponentCoordinates = (instanceId) => {
     mouseOverHandler.handleMouseMove(selectedElement || null);
 };
 
-function updateDraggableElement(x, y) {
-    const container = document.querySelector('#component-list');
-    if (!container) {
-        return;
+class DragState {
+    constructor() {
+        this.isDragStartedOnParent = false;
+        this.isDraggingItem = false;
+    }
+    get isDragging() {
+        return this.isDraggingItem;
+    }
+    get isDraggingOnParent() {
+        return this.isDragStartedOnParent;
+    }
+    updateIsDragging(isDraggingItem) {
+        this.isDraggingItem = isDraggingItem;
+    }
+    updateIsDragStartedOnParent(isDragStartedOnParent) {
+        this.isDragStartedOnParent = isDragStartedOnParent;
+    }
+    resetState() {
+        this.isDraggingItem = false;
+        this.isDragStartedOnParent = false;
     }
-    container.style.setProperty('top', `${y}px`);
-    container.style.setProperty('left', `${x}px`);
 }
-function simulateMouseEvent(coordX, coordY, eventName = 'mousemove') {
-    const element = document.querySelector('#item');
-    if (!dragState.isDragStart) {
-        return;
+
+class SimulateDnD extends DragState {
+    constructor() {
+        super();
+        this.draggingElement = null;
     }
-    if (!dragState.isDragging) {
-        updateDraggableElement(coordX, coordY);
-        eventName = 'mousedown';
-        dragState.updateIsDragging(true);
-    }
-    const options = {
-        bubbles: true,
-        cancelable: true,
-        view: window,
-        pageX: 0,
-        pageY: 0,
-        clientX: coordX - DRAGGABLE_WIDTH / 2,
-        clientY: coordY - DRAGGABLE_HEIGHT / 2 - window.scrollY,
-    };
-    if (!element) {
-        return;
+    setupDrag() {
+        this.updateIsDragStartedOnParent(true);
+    }
+    startDrag(coordX, coordY) {
+        this.draggingElement = document.getElementById(NEW_COMPONENT_ID);
+        this.updateIsDragging(true);
+        this.simulateMouseEvent(coordX, coordY, 'mousedown');
+    }
+    updateDrag(coordX, coordY) {
+        if (!this.draggingElement) {
+            this.draggingElement = document.querySelector(`[${CTFL_DRAGGING_ELEMENT}]`);
+        }
+        this.simulateMouseEvent(coordX, coordY);
+    }
+    endDrag(coordX, coordY) {
+        this.simulateMouseEvent(coordX, coordY, 'mouseup');
+        this.reset();
+    }
+    reset() {
+        this.draggingElement = null;
+        this.resetState();
+    }
+    simulateMouseEvent(coordX, coordY, eventName = 'mousemove') {
+        if (!this.draggingElement) {
+            return;
+        }
+        const options = {
+            bubbles: true,
+            cancelable: true,
+            view: window,
+            pageX: 0,
+            pageY: 0,
+            clientX: coordX,
+            clientY: coordY,
+        };
+        const event = new MouseEvent(eventName, options);
+        this.draggingElement.dispatchEvent(event);
     }
-    const event = new MouseEvent(eventName, options);
-    element.dispatchEvent(event);
 }
+var SimulateDnD$1 = new SimulateDnD();
 
 function useEditorSubscriber() {
     const entityStore = useEntityStore((state) => state.entityStore);
@@ -3510,6 +3588,8 @@ function useEditorSubscriber() {
     const selectedNodeId = useEditorStore((state) => state.selectedNodeId);
     const setComponentId = useDraggedItemStore((state) => state.setComponentId);
     const setDraggingOnCanvas = useDraggedItemStore((state) => state.setDraggingOnCanvas);
+    const setMousePosition = useDraggedItemStore((state) => state.setMousePosition);
+    const setScrollY = useDraggedItemStore((state) => state.setScrollY);
     // TODO: As we have disabled the useEffect, we can remove these states
     const [, /* isFetchingEntities */ setFetchingEntities] = useState(false);
     const reloadApp = () => {
@@ -3623,7 +3703,7 @@ function useEditorSubscriber() {
             console.debug(`[experiences-sdk-react::onMessage] Received message [${eventData.eventType}]`, eventData);
             const { payload } = eventData;
             switch (eventData.eventType) {
-                case INCOMING_EVENTS.CompositionUpdated: {
+                case INCOMING_EVENTS.ExperienceUpdated: {
                     const { tree, locale, changedNode, changedValueType, assemblies, } = payload;
                     // Make sure to first store the assemblies before setting the tree and thus triggering a rerender
                     if (assemblies) {
@@ -3666,9 +3746,6 @@ function useEditorSubscriber() {
                     }
                     break;
                 }
-                case INCOMING_EVENTS.DesignComponentsRegistered:
-                    // Event was deprecated and support will be discontinued with version 5
-                    break;
                 case INCOMING_EVENTS.AssembliesRegistered: {
                     const { assemblies } = payload;
                     assemblies.forEach((definition) => {
@@ -3679,9 +3756,6 @@ function useEditorSubscriber() {
                     });
                     break;
                 }
-                case INCOMING_EVENTS.DesignComponentsAdded:
-                    // Event was deprecated and support will be discontinued with version 5
-                    break;
                 case INCOMING_EVENTS.AssembliesAdded: {
                     const { assembly, assemblyDefinition, } = payload;
                     entityStore.updateEntity(assembly);
@@ -3700,6 +3774,10 @@ function useEditorSubscriber() {
                     break;
                 }
                 case INCOMING_EVENTS.CanvasResized: {
+                    const { selectedNodeId } = payload;
+                    if (selectedNodeId) {
+                        sendSelectedComponentCoordinates(selectedNodeId);
+                    }
                     break;
                 }
                 case INCOMING_EVENTS.HoverComponent: {
@@ -3712,7 +3790,7 @@ function useEditorSubscriber() {
                     if (!isDragging) {
                         setComponentId('');
                         setDraggingOnCanvas(false);
-                        dragState.reset();
+                        SimulateDnD$1.reset();
                     }
                     break;
                 }
@@ -3733,23 +3811,23 @@ function useEditorSubscriber() {
                     break;
                 }
                 case INCOMING_EVENTS.ComponentDragCanceled: {
-                    if (dragState.isDragging) {
+                    if (SimulateDnD$1.isDragging) {
                         //simulate a mouseup event to cancel the drag
-                        simulateMouseEvent(0, 0, 'mouseup');
+                        SimulateDnD$1.endDrag(0, 0);
                     }
                     break;
                 }
                 case INCOMING_EVENTS.ComponentDragStarted: {
-                    dragState.updateIsDragStartedOnParent(true);
-                    setDraggingOnCanvas(true);
+                    SimulateDnD$1.setupDrag();
                     setComponentId(payload.id || '');
+                    setDraggingOnCanvas(true);
                     sendMessage(OUTGOING_EVENTS.ComponentSelected, {
                         nodeId: '',
                     });
                     break;
                 }
                 case INCOMING_EVENTS.ComponentDragEnded: {
-                    dragState.reset();
+                    SimulateDnD$1.reset();
                     setComponentId('');
                     setDraggingOnCanvas(false);
                     break;
@@ -3760,6 +3838,22 @@ function useEditorSubscriber() {
                     sendSelectedComponentCoordinates(nodeId);
                     break;
                 }
+                case INCOMING_EVENTS.MouseMove: {
+                    const { mouseX, mouseY } = payload;
+                    setMousePosition(mouseX, mouseY);
+                    if (SimulateDnD$1.isDraggingOnParent && !SimulateDnD$1.isDragging) {
+                        SimulateDnD$1.startDrag(mouseX, mouseY);
+                    }
+                    else {
+                        SimulateDnD$1.updateDrag(mouseX, mouseY);
+                    }
+                    break;
+                }
+                case INCOMING_EVENTS.ComponentMoveEnded: {
+                    const { mouseX, mouseY } = payload;
+                    SimulateDnD$1.endDrag(mouseX, mouseY);
+                    break;
+                }
                 default:
                     console.error(`[experiences-sdk-react::onMessage] Logic error, unsupported eventType: [${eventData.eventType}]`);
             }
@@ -3782,6 +3876,7 @@ function useEditorSubscriber() {
         unboundValues,
         updateTree,
         updateNodesByUpdatedEntity,
+        setMousePosition,
     ]);
     /*
      * Handles on scroll business
@@ -3790,6 +3885,7 @@ function useEditorSubscriber() {
         let timeoutId = 0;
         let isScrolling = false;
         const onScroll = () => {
+            setScrollY(window.scrollY);
             if (isScrolling === false) {
                 sendMessage(OUTGOING_EVENTS.CanvasScroll, SCROLL_STATES.Start);
             }
@@ -3815,7 +3911,7 @@ function useEditorSubscriber() {
             window.removeEventListener('scroll', onScroll, { capture: true });
             clearTimeout(timeoutId);
         };
-    }, [selectedNodeId]);
+    }, [selectedNodeId, setScrollY]);
 }
 
 const onComponentMoved = (options) => {
@@ -3978,30 +4074,36 @@ const TestDNDContainer = ({ onDragEnd, onBeforeDragStart, onDragUpdate, children
 const DNDProvider = ({ children }) => {
     const setSelectedNodeId = useEditorStore((state) => state.setSelectedNodeId);
     const draggedItem = useDraggedItemStore((state) => state.draggedItem);
+    const setOnBeforeCaptureId = useDraggedItemStore((state) => state.setOnBeforeCaptureId);
     const setDraggingOnCanvas = useDraggedItemStore((state) => state.setDraggingOnCanvas);
     const updateItem = useDraggedItemStore((state) => state.updateItem);
     const { onAddComponent, onMoveComponent } = useCanvasInteractions();
     const selectedNodeId = useEditorStore((state) => state.selectedNodeId);
     const prevSelectedNodeId = useRef(null);
     const isTestRun = typeof window !== 'undefined' && Object.prototype.hasOwnProperty.call(window, 'Cypress');
-    const dragStart = () => {
+    const dragStart = ({ source }) => {
         prevSelectedNodeId.current = selectedNodeId;
         //Unselect the current node when dragging and remove the outline
         setSelectedNodeId('');
         sendMessage(OUTGOING_EVENTS.ComponentSelected, {
             nodeId: '',
         });
+        if (source.droppableId !== COMPONENT_LIST_ID) {
+            sendMessage(OUTGOING_EVENTS.ComponentMoveStarted);
+        }
     };
-    const beforeCapture = () => {
+    const beforeCapture = ({ draggableId }) => {
         setDraggingOnCanvas(true);
+        setOnBeforeCaptureId(draggableId);
     };
     const dragUpdate = (update) => {
         updateItem(update);
     };
     const dragEnd = (dropResult) => {
         setDraggingOnCanvas(false);
+        setOnBeforeCaptureId('');
         updateItem(undefined);
-        dragState.reset();
+        SimulateDnD$1.reset();
         if (!dropResult.destination) {
             if (!draggedItem?.destination) {
                 // User cancel drag
@@ -4028,6 +4130,7 @@ const DNDProvider = ({ children }) => {
         }
         // If a node was previously selected prior to dragging, re-select it
         setSelectedNodeId(dropResult.draggableId);
+        sendMessage(OUTGOING_EVENTS.ComponentMoveEnded);
         sendMessage(OUTGOING_EVENTS.ComponentSelected, {
             nodeId: dropResult.draggableId,
         });
@@ -4154,6 +4257,7 @@ const findNearestDropzone = (element) => {
 const VisualEditorRoot = () => {
     const initialized = useInitializeEditor();
     const locale = useEditorStore((state) => state.locale);
+    const setMousePosition = useDraggedItemStore((state) => state.setMousePosition);
     const entityStore = useEntityStore((state) => state.entityStore);
     const setHoveringZone = useZoneStore((state) => state.setHoveringZone);
     const resetEntityStore = useEntityStore((state) => state.resetEntityStore);
@@ -4168,18 +4272,19 @@ const VisualEditorRoot = () => {
     }, [locale, resetEntityStore, entityStore.locale]);
     useEffect(() => {
         const onMouseMove = (e) => {
+            setMousePosition(e.clientX, e.clientY);
             const target = e.target;
             const zoneId = findNearestDropzone(target);
             if (zoneId) {
                 setHoveringZone(zoneId);
             }
-            if (e.target?.id === 'item') {
+            if (!SimulateDnD$1.isDragging) {
                 return;
             }
-            if (!dragState.isDragStart) {
+            if (target.id === NEW_COMPONENT_ID) {
                 return;
             }
-            simulateMouseEvent(e.pageX, e.pageY);
+            SimulateDnD$1.updateDrag(e.clientX, e.clientY);
             sendMessage(OUTGOING_EVENTS.MouseMove, {
                 clientX: e.pageX,
                 clientY: e.pageY - window.scrollY,