@contentful/experiences-visual-editor-react 2.0.0-prerelease-20250704T1603-11d76eb.0 → 2.0.1-dev-20250708T1456-b79aa28.0

package/dist/index.js

@@ -1,41 +1,35 @@
 import styleInject from 'style-inject';
-import React, { useState, useEffect, useCallback, forwardRef, useMemo, useLayoutEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState, useCallback, forwardRef, useLayoutEffect, useMemo } from 'react';
 import { z } from 'zod';
-import { omit, isArray, isEqual, get as get$2, debounce } from 'lodash-es';
+import { omit, isArray, isEqual, get as get$2 } from 'lodash-es';
 import md5 from 'md5';
 import { BLOCKS } from '@contentful/rich-text-types';
 import { create, useStore } from 'zustand';
+import { Droppable, Draggable, DragDropContext } from '@hello-pangea/dnd';
 import { produce } from 'immer';
 import '@contentful/rich-text-react-renderer';
+import { v4 } from 'uuid';
+import { createPortal } from 'react-dom';
+import classNames from 'classnames';
 
 var css_248z$b = "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$b);
 
-/** @deprecated will be removed when dropping backward compatibility for old DND */
 const INCOMING_EVENTS$1 = {
     RequestEditorMode: 'requestEditorMode',
     RequestReadOnlyMode: 'requestReadOnlyMode',
     ExperienceUpdated: 'componentTreeUpdated',
-    /** @deprecated will be removed when dropping backward compatibility for old DND */
     ComponentDraggingChanged: 'componentDraggingChanged',
-    /** @deprecated will be removed when dropping backward compatibility for old DND */
     ComponentDragCanceled: 'componentDragCanceled',
-    /** @deprecated will be removed when dropping backward compatibility for old DND */
     ComponentDragStarted: 'componentDragStarted',
-    /** @deprecated will be removed when dropping backward compatibility for old DND */
     ComponentDragEnded: 'componentDragEnded',
-    /** @deprecated will be removed when dropping backward compatibility for old DND */
     ComponentMoveEnded: 'componentMoveEnded',
-    /** @deprecated will be removed when dropping backward compatibility for old DND */
     CanvasResized: 'canvasResized',
-    /** @deprecated will be removed when dropping backward compatibility for old DND */
     SelectComponent: 'selectComponent',
-    /** @deprecated will be removed when dropping backward compatibility for old DND */
     HoverComponent: 'hoverComponent',
     UpdatedEntity: 'updatedEntity',
     AssembliesAdded: 'assembliesAdded',
     AssembliesRegistered: 'assembliesRegistered',
-    /** @deprecated will be removed when dropping backward compatibility for old DND */
     MouseMove: 'mouseMove',
     RequestedEntities: 'REQUESTED_ENTITIES',
 };
@@ -50,7 +44,7 @@ var StudioCanvasMode$3;
     StudioCanvasMode["EDITOR"] = "editorMode";
     StudioCanvasMode["NONE"] = "none";
 })(StudioCanvasMode$3 || (StudioCanvasMode$3 = {}));
-const CONTENTFUL_COMPONENTS$1 = {
+const CONTENTFUL_COMPONENTS$2 = {
     section: {
         id: 'contentful-section',
         name: 'Section',
@@ -96,6 +90,9 @@ const CONTENTFUL_COMPONENTS$1 = {
         name: 'Carousel',
     },
 };
+const ASSEMBLY_NODE_TYPE$1 = 'assembly';
+const ASSEMBLY_DEFAULT_CATEGORY$1 = 'Assemblies';
+const ASSEMBLY_BLOCK_NODE_TYPE$1 = 'assemblyBlock';
 const CF_STYLE_ATTRIBUTES = [
     'cfVisibility',
     'cfHorizontalAlignment',
@@ -130,7 +127,7 @@ const CF_STYLE_ATTRIBUTES = [
     'cfTextItalic',
     'cfTextUnderline',
 ];
-const EMPTY_CONTAINER_SIZE$1 = '80px';
+const EMPTY_CONTAINER_HEIGHT$1 = '80px';
 const DEFAULT_IMAGE_WIDTH = '500px';
 var PostMessageMethods$3;
 (function (PostMessageMethods) {
@@ -140,14 +137,20 @@ var PostMessageMethods$3;
 const SUPPORTED_IMAGE_FORMATS = ['jpg', 'png', 'webp', 'gif', 'avif'];
 
 const structureComponentIds = new Set([
-    CONTENTFUL_COMPONENTS$1.section.id,
-    CONTENTFUL_COMPONENTS$1.columns.id,
-    CONTENTFUL_COMPONENTS$1.container.id,
-    CONTENTFUL_COMPONENTS$1.singleColumn.id,
+    CONTENTFUL_COMPONENTS$2.section.id,
+    CONTENTFUL_COMPONENTS$2.columns.id,
+    CONTENTFUL_COMPONENTS$2.container.id,
+    CONTENTFUL_COMPONENTS$2.singleColumn.id,
 ]);
-const allContentfulComponentIds = new Set(Object.values(CONTENTFUL_COMPONENTS$1).map((component) => component.id));
+const patternTypes = new Set([ASSEMBLY_NODE_TYPE$1, ASSEMBLY_BLOCK_NODE_TYPE$1]);
+const allContentfulComponentIds = new Set(Object.values(CONTENTFUL_COMPONENTS$2).map((component) => component.id));
+const isPatternComponent = (type) => patternTypes.has(type ?? '');
 const isContentfulStructureComponent = (componentId) => structureComponentIds.has((componentId ?? ''));
 const isContentfulComponent = (componentId) => allContentfulComponentIds.has((componentId ?? ''));
+const isComponentAllowedOnRoot = ({ type, category, componentId }) => isPatternComponent(type) ||
+    category === ASSEMBLY_DEFAULT_CATEGORY$1 ||
+    isContentfulStructureComponent(componentId) ||
+    componentId === CONTENTFUL_COMPONENTS$2.divider.id;
 const isStructureWithRelativeHeight = (componentId, height) => {
     return isContentfulStructureComponent(componentId) && !height?.toString().endsWith('px');
 };
@@ -1190,10 +1193,6 @@ const findOutermostCoordinates = (first, second) => {
         left: Math.min(first.left, second.left),
     };
 };
-const isElementHidden = (rect) => {
-    /** if the rect has no size and position, its element is not rendered in the DOM */
-    return rect.width === 0 && rect.height === 0 && rect.x === 0 && rect.y === 0;
-};
 const getElementCoordinates = (element) => {
     const rect = element.getBoundingClientRect();
     /**
@@ -1433,17 +1432,21 @@ function buildTemplate({ template, context, }) {
 
 const stylesToKeep = ['cfImageAsset'];
 const stylesToRemove = CF_STYLE_ATTRIBUTES.filter((style) => !stylesToKeep.includes(style));
-// cfWrapColumns & cfWrapColumnsCount are no real style attributes as they are handled on the editor side
-const propsToRemove = [
-    'cfHyperlink',
-    'cfOpenInNewTab',
-    'cfSsrClassName',
-    'cfWrapColumns',
-    'cfWrapColumnsCount',
-];
+const propsToRemove = ['cfHyperlink', 'cfOpenInNewTab', 'cfSsrClassName'];
 const sanitizeNodeProps = (nodeProps) => {
     return omit(nodeProps, stylesToRemove, propsToRemove);
 };
+
+/** Turn the visibility value into a style object that can be used for inline styles in React */
+const transformVisibility = (value) => {
+    if (value === false) {
+        return {
+            display: 'none !important',
+        };
+    }
+    // Don't explicitly set anything when visible to not overwrite values like `grid` or `flex`.
+    return {};
+};
 const transformGridColumn = (span) => {
     if (!span) {
         return {};
@@ -1602,7 +1605,7 @@ const buildCfStyles = (values) => {
 };
 /**
  * Container/section default behavior:
- * Default height => height: EMPTY_CONTAINER_SIZE
+ * Default height => height: EMPTY_CONTAINER_HEIGHT
  * If a container component has children => height: 'fit-content'
  */
 const calculateNodeDefaultHeight = ({ blockId, children, value, }) => {
@@ -1612,7 +1615,7 @@ const calculateNodeDefaultHeight = ({ blockId, children, value, }) => {
     if (children.length) {
         return '100%';
     }
-    return EMPTY_CONTAINER_SIZE$1;
+    return EMPTY_CONTAINER_HEIGHT$1;
 };
 
 function getOptimizedImageUrl(url, width, quality, format) {
@@ -2645,7 +2648,180 @@ function gatherDeepReferencesFromTree(startingNode, dataSource) {
     return deepReferences;
 }
 
+const useDraggedItemStore = create((set) => ({
+    draggedItem: undefined,
+    hoveredComponentId: undefined,
+    domRect: undefined,
+    componentId: '',
+    isDraggingOnCanvas: false,
+    onBeforeCaptureId: '',
+    mouseX: 0,
+    mouseY: 0,
+    scrollY: 0,
+    setComponentId(id) {
+        set({ componentId: id });
+    },
+    setHoveredComponentId(id) {
+        set({ hoveredComponentId: id });
+    },
+    updateItem: (item) => {
+        set({ draggedItem: item });
+    },
+    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 SCROLL_STATES = {
+    Start: 'scrollStart',
+    IsScrolling: 'isScrolling',
+    End: 'scrollEnd',
+};
+const OUTGOING_EVENTS = {
+    Connected: 'connected',
+    DesignTokens: 'registerDesignTokens',
+    RegisteredBreakpoints: 'registeredBreakpoints',
+    MouseMove: 'mouseMove',
+    NewHoveredElement: 'newHoveredElement',
+    ComponentSelected: 'componentSelected',
+    RegisteredComponents: 'registeredComponents',
+    RequestComponentTreeUpdate: 'requestComponentTreeUpdate',
+    ComponentDragCanceled: 'componentDragCanceled',
+    ComponentDropped: 'componentDropped',
+    ComponentMoved: 'componentMoved',
+    CanvasReload: 'canvasReload',
+    UpdateSelectedComponentCoordinates: 'updateSelectedComponentCoordinates',
+    CanvasScroll: 'canvasScrolling',
+    CanvasError: 'canvasError',
+    ComponentMoveStarted: 'componentMoveStarted',
+    ComponentMoveEnded: 'componentMoveEnded',
+    OutsideCanvasClick: 'outsideCanvasClick',
+    SDKFeatures: 'sdkFeatures',
+    RequestEntities: 'REQUEST_ENTITIES',
+};
+const INCOMING_EVENTS = {
+    RequestEditorMode: 'requestEditorMode',
+    RequestReadOnlyMode: 'requestReadOnlyMode',
+    ExperienceUpdated: 'componentTreeUpdated',
+    ComponentDraggingChanged: 'componentDraggingChanged',
+    ComponentDragCanceled: 'componentDragCanceled',
+    ComponentDragStarted: 'componentDragStarted',
+    ComponentDragEnded: 'componentDragEnded',
+    ComponentMoveEnded: 'componentMoveEnded',
+    CanvasResized: 'canvasResized',
+    SelectComponent: 'selectComponent',
+    HoverComponent: 'hoverComponent',
+    UpdatedEntity: 'updatedEntity',
+    AssembliesAdded: 'assembliesAdded',
+    AssembliesRegistered: 'assembliesRegistered',
+    MouseMove: 'mouseMove',
+    RequestedEntities: 'REQUESTED_ENTITIES',
+};
+const INTERNAL_EVENTS = {
+    ComponentsRegistered: 'cfComponentsRegistered',
+    VisualEditorInitialize: 'cfVisualEditorInitialize',
+};
+const VISUAL_EDITOR_EVENTS = {
+    Ready: 'cfVisualEditorReady',
+};
+/**
+ * These modes are ONLY intended to be internally used within the context of
+ * editing an experience inside of Contentful Studio. i.e. these modes
+ * intentionally do not include preview/delivery modes.
+ */
+var StudioCanvasMode$2;
+(function (StudioCanvasMode) {
+    StudioCanvasMode["READ_ONLY"] = "readOnlyMode";
+    StudioCanvasMode["EDITOR"] = "editorMode";
+    StudioCanvasMode["NONE"] = "none";
+})(StudioCanvasMode$2 || (StudioCanvasMode$2 = {}));
+const CONTENTFUL_COMPONENTS$1 = {
+    section: {
+        id: 'contentful-section',
+        name: 'Section',
+    },
+    container: {
+        id: 'contentful-container',
+        name: 'Container',
+    },
+    columns: {
+        id: 'contentful-columns',
+        name: 'Columns',
+    },
+    singleColumn: {
+        id: 'contentful-single-column',
+        name: 'Column',
+    },
+    button: {
+        id: 'contentful-button',
+        name: 'Button',
+    },
+    heading: {
+        id: 'contentful-heading',
+        name: 'Heading',
+    },
+    image: {
+        id: 'contentful-image',
+        name: 'Image',
+    },
+    richText: {
+        id: 'contentful-richText',
+        name: 'Rich Text',
+    },
+    text: {
+        id: 'contentful-text',
+        name: 'Text',
+    },
+    divider: {
+        id: 'contentful-divider',
+        name: 'Divider',
+    },
+    carousel: {
+        id: 'contentful-carousel',
+        name: 'Carousel',
+    },
+};
+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];
+const EMPTY_CONTAINER_HEIGHT = '80px';
+const HYPERLINK_DEFAULT_PATTERN = `/{locale}/{entry.fields.slug}/`;
+var PostMessageMethods$2;
+(function (PostMessageMethods) {
+    PostMessageMethods["REQUEST_ENTITIES"] = "REQUEST_ENTITIES";
+    PostMessageMethods["REQUESTED_ENTITIES"] = "REQUESTED_ENTITIES";
+})(PostMessageMethods$2 || (PostMessageMethods$2 = {}));
+
+const DRAGGABLE_HEIGHT = 30;
+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: 70,
+    HEIGHT: 20,
+    INITIAL_OFFSET: 10,
+    OFFSET_INCREMENT: 8,
+    MIN_HEIGHT: 45,
+    MIN_DEPTH_HEIGHT: 20,
+    DEEP_ZONE: 5,
+};
 var TreeAction;
 (function (TreeAction) {
     TreeAction[TreeAction["REMOVE_NODE"] = 0] = "REMOVE_NODE";
@@ -2655,6 +2831,139 @@ var TreeAction;
     TreeAction[TreeAction["REORDER_NODE"] = 4] = "REORDER_NODE";
     TreeAction[TreeAction["REPLACE_NODE"] = 5] = "REPLACE_NODE";
 })(TreeAction || (TreeAction = {}));
+var HitboxDirection;
+(function (HitboxDirection) {
+    HitboxDirection[HitboxDirection["TOP"] = 0] = "TOP";
+    HitboxDirection[HitboxDirection["LEFT"] = 1] = "LEFT";
+    HitboxDirection[HitboxDirection["RIGHT"] = 2] = "RIGHT";
+    HitboxDirection[HitboxDirection["BOTTOM"] = 3] = "BOTTOM";
+    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 = {}));
+
+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 ??
+            document.querySelector(`[${CTFL_DRAGGING_ELEMENT}][data-cf-node-id="${draggableId}"]`);
+        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;
+    }
+    return {
+        ...style,
+        // cannot be 0, but make it super tiny
+        transitionDuration: `0.001s`,
+    };
+}
+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,
+            left: 0,
+            pointerEvents: 'none',
+            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: NEW_COMPONENT_ID, "data-ctfl-dragging-element": true, ref: (node) => {
+                    provided.innerRef(node);
+                    ref.current = node;
+                }, ...provided.draggableProps, ...provided.dragHandleProps, style: {
+                    ...getStyle$2(provided.draggableProps.style, snapshot),
+                    width: DRAGGABLE_WIDTH,
+                    height: DRAGGABLE_HEIGHT,
+                    pointerEvents: 'none',
+                } }))),
+            provided.placeholder)))));
+};
+
+function getItemFromTree(id, node) {
+    // Check if the current node's id matches the search id
+    if (node.data.id === id) {
+        return node;
+    }
+    // Recursively search through each child
+    for (const child of node.children) {
+        const foundNode = getItemFromTree(id, child);
+        if (foundNode) {
+            // Node found in children
+            return foundNode;
+        }
+    }
+    // If the node is not found in this branch of the tree, return undefined
+    return undefined;
+}
+function findDepthById(node, id, currentDepth = 1) {
+    if (node.data.id === id) {
+        return currentDepth;
+    }
+    // If the node has children, check each one
+    for (const child of node.children) {
+        const childDepth = findDepthById(child, id, currentDepth + 1);
+        if (childDepth !== -1) {
+            return childDepth; // Found the node in a child
+        }
+    }
+    return -1; // Node not found in this branch
+}
+const getChildFromTree = (parentId, index, node) => {
+    // Check if the current node's id matches the search id
+    if (node.data.id === parentId) {
+        return node.children[index];
+    }
+    // Recursively search through each child
+    for (const child of node.children) {
+        const foundNode = getChildFromTree(parentId, index, child);
+        if (foundNode) {
+            // Node found in children
+            return foundNode;
+        }
+    }
+    // If the node is not found in this branch of the tree, return undefined
+    return undefined;
+};
+const getItem = (selector, tree) => {
+    return getItemFromTree(selector.id, {
+        type: 'block',
+        data: {
+            id: ROOT_ID,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        },
+        children: tree.root.children,
+    });
+};
+const getItemDepthFromNode = (selector, node) => {
+    return findDepthById(node, selector.id);
+};
 
 function updateNode(nodeId, updatedNode, node) {
     if (node.data.id === nodeId) {
@@ -2693,33 +3002,24 @@ function addChildNode(indexToAdd, parentNodeId, nodeToAdd, node) {
     }
     node.children.forEach((childNode) => addChildNode(indexToAdd, parentNodeId, nodeToAdd, childNode));
 }
-
-function getItemFromTree(id, node) {
-    // Check if the current node's id matches the search id
-    if (node.data.id === id) {
-        return node;
+function reorderChildNode(oldIndex, newIndex, parentNodeId, node) {
+    if (node.data.id === parentNodeId) {
+        // Remove the child from the old position
+        const [childToMove] = node.children.splice(oldIndex, 1);
+        // Insert the child at the new position
+        node.children.splice(newIndex, 0, childToMove);
+        return;
     }
-    // Recursively search through each child
-    for (const child of node.children) {
-        const foundNode = getItemFromTree(id, child);
-        if (foundNode) {
-            // Node found in children
-            return foundNode;
-        }
+    node.children.forEach((childNode) => reorderChildNode(oldIndex, newIndex, parentNodeId, childNode));
+}
+function reparentChildNode(oldIndex, newIndex, sourceNodeId, destinationNodeId, node) {
+    const nodeToMove = getChildFromTree(sourceNodeId, oldIndex, node);
+    if (!nodeToMove) {
+        return;
     }
-    // If the node is not found in this branch of the tree, return undefined
-    return undefined;
+    removeChildNode(oldIndex, nodeToMove.data.id, sourceNodeId, node);
+    addChildNode(newIndex, destinationNodeId, nodeToMove, node);
 }
-const getItem = (selector, tree) => {
-    return getItemFromTree(selector.id, {
-        type: 'block',
-        data: {
-            id: ROOT_ID,
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        },
-        children: tree.root.children,
-    });
-};
 
 function missingNodeAction({ index, nodeAdded, child, tree, parentNodeId, currentNode, }) {
     if (nodeAdded) {
@@ -2841,85 +3141,6 @@ function getTreeDiffs(tree1, tree2, originalTree) {
     return differences.filter((diff) => diff);
 }
 
-/** @deprecated will be removed when dropping backward compatibility for old DND */
-const OUTGOING_EVENTS = {
-    Connected: 'connected',
-    DesignTokens: 'registerDesignTokens',
-    RegisteredBreakpoints: 'registeredBreakpoints',
-    /** @deprecated will be removed when dropping backward compatibility for old DND */
-    MouseMove: 'mouseMove',
-    /** @deprecated will be removed when dropping backward compatibility for old DND */
-    ComponentSelected: 'componentSelected',
-    RegisteredComponents: 'registeredComponents',
-    RequestComponentTreeUpdate: 'requestComponentTreeUpdate',
-    CanvasReload: 'canvasReload',
-    /** @deprecated will be removed when dropping backward compatibility for old DND */
-    UpdateSelectedComponentCoordinates: 'updateSelectedComponentCoordinates',
-    /** @deprecated will be removed when dropping backward compatibility for old DND */
-    CanvasScroll: 'canvasScrolling',
-    CanvasError: 'canvasError',
-    /** @deprecated will be removed when dropping backward compatibility for old DND */
-    OutsideCanvasClick: 'outsideCanvasClick',
-    SDKFeatures: 'sdkFeatures',
-    RequestEntities: 'REQUEST_ENTITIES',
-    CanvasGeometryUpdated: 'canvasGeometryUpdated',
-};
-const INCOMING_EVENTS = {
-    RequestEditorMode: 'requestEditorMode',
-    RequestReadOnlyMode: 'requestReadOnlyMode',
-    ExperienceUpdated: 'componentTreeUpdated',
-    /** @deprecated will be removed when dropping backward compatibility for old DND */
-    ComponentDraggingChanged: 'componentDraggingChanged',
-    /** @deprecated will be removed when dropping backward compatibility for old DND */
-    ComponentDragCanceled: 'componentDragCanceled',
-    /** @deprecated will be removed when dropping backward compatibility for old DND */
-    ComponentDragStarted: 'componentDragStarted',
-    /** @deprecated will be removed when dropping backward compatibility for old DND */
-    ComponentDragEnded: 'componentDragEnded',
-    /** @deprecated will be removed when dropping backward compatibility for old DND */
-    ComponentMoveEnded: 'componentMoveEnded',
-    /** @deprecated will be removed when dropping backward compatibility for old DND */
-    CanvasResized: 'canvasResized',
-    /** @deprecated will be removed when dropping backward compatibility for old DND */
-    SelectComponent: 'selectComponent',
-    /** @deprecated will be removed when dropping backward compatibility for old DND */
-    HoverComponent: 'hoverComponent',
-    UpdatedEntity: 'updatedEntity',
-    AssembliesAdded: 'assembliesAdded',
-    AssembliesRegistered: 'assembliesRegistered',
-    /** @deprecated will be removed when dropping backward compatibility for old DND */
-    MouseMove: 'mouseMove',
-    RequestedEntities: 'REQUESTED_ENTITIES',
-};
-const INTERNAL_EVENTS = {
-    ComponentsRegistered: 'cfComponentsRegistered',
-    VisualEditorInitialize: 'cfVisualEditorInitialize',
-};
-const VISUAL_EDITOR_EVENTS = {
-    Ready: 'cfVisualEditorReady',
-};
-/**
- * These modes are ONLY intended to be internally used within the context of
- * editing an experience inside of Contentful Studio. i.e. these modes
- * intentionally do not include preview/delivery modes.
- */
-var StudioCanvasMode$2;
-(function (StudioCanvasMode) {
-    StudioCanvasMode["READ_ONLY"] = "readOnlyMode";
-    StudioCanvasMode["EDITOR"] = "editorMode";
-    StudioCanvasMode["NONE"] = "none";
-})(StudioCanvasMode$2 || (StudioCanvasMode$2 = {}));
-const ASSEMBLY_NODE_TYPE = 'assembly';
-const ASSEMBLY_DEFAULT_CATEGORY = 'Assemblies';
-const ASSEMBLY_BLOCK_NODE_TYPE = 'assemblyBlock';
-const EMPTY_CONTAINER_SIZE = '80px';
-const HYPERLINK_DEFAULT_PATTERN = `/{locale}/{entry.fields.slug}/`;
-var PostMessageMethods$2;
-(function (PostMessageMethods) {
-    PostMessageMethods["REQUEST_ENTITIES"] = "REQUEST_ENTITIES";
-    PostMessageMethods["REQUESTED_ENTITIES"] = "REQUESTED_ENTITIES";
-})(PostMessageMethods$2 || (PostMessageMethods$2 = {}));
-
 const useTreeStore = create((set, get) => ({
     tree: {
         root: {
@@ -2951,6 +3172,20 @@ const useTreeStore = create((set, get) => ({
             });
         }));
     },
+    /**
+     * NOTE: this is for debugging purposes only as it causes ugly canvas flash.
+     *
+     * Force updates entire tree. Usually shouldn't be used as updateTree()
+     * uses smart update algorithm based on diffs. But for troubleshooting
+     * you may want to force update the tree so leaving this in.
+     */
+    updateTreeForced: (tree) => {
+        set({
+            tree,
+            // Breakpoints must be updated, as we receive completely new tree with possibly new breakpoints
+            breakpoints: tree?.root?.data?.breakpoints || [],
+        });
+    },
     updateTree: (tree) => {
         const currentTree = get().tree;
         /**
@@ -2996,6 +3231,21 @@ const useTreeStore = create((set, get) => ({
             state.breakpoints = tree?.root?.data?.breakpoints || [];
         }));
     },
+    addChild: (index, parentId, node) => {
+        set(produce((state) => {
+            addChildNode(index, parentId, node, state.tree.root);
+        }));
+    },
+    reorderChildren: (destinationIndex, destinationParentId, sourceIndex) => {
+        set(produce((state) => {
+            reorderChildNode(sourceIndex, destinationIndex, destinationParentId, state.tree.root);
+        }));
+    },
+    reparentChild: (destinationIndex, destinationParentId, sourceIndex, sourceParentId) => {
+        set(produce((state) => {
+            reparentChildNode(sourceIndex, destinationIndex, sourceParentId, destinationParentId, state.tree.root);
+        }));
+    },
     // breadth first search
     findNodeById(nodeId) {
         if (!nodeId) {
@@ -3033,8 +3283,8 @@ const cloneDeepAsPOJO = (obj) => {
     return JSON.parse(JSON.stringify(obj));
 };
 
-var css_248z$a = ".RootRenderer-module_rootContainer__9UawM {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n\nbody {\n  margin: 0;\n}\n\nhtml {\n  -ms-overflow-style: none; /* Internet Explorer 10+ */\n  scrollbar-width: none; /* Firefox */\n}\n\nhtml::-webkit-scrollbar {\n  display: none;\n}\n";
-var styles$2 = {"rootContainer":"RootRenderer-module_rootContainer__9UawM"};
+var css_248z$a = ".render-module_hitbox__l4ysJ {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 10px;\n  z-index: 1000000;\n}\n\n.render-module_hitboxLower__tgsA1 {\n  position: absolute;\n  bottom: -20px;\n  left: 0;\n  width: 100%;\n  height: 20px;\n  z-index: 1000000;\n}\n\n.render-module_canvasBottomSpacer__JuxVh {\n  position: absolute;\n  width: 100%;\n  height: 50px;\n}\n\n.render-module_container__-C3d7 {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n\nbody {\n  margin: 0;\n}\n\nhtml {\n  -ms-overflow-style: none; /* Internet Explorer 10+ */\n  scrollbar-width: none; /* Firefox */\n}\n\nhtml::-webkit-scrollbar {\n  display: none;\n}\n";
+var styles$3 = {"hitbox":"render-module_hitbox__l4ysJ","hitboxLower":"render-module_hitboxLower__tgsA1","canvasBottomSpacer":"render-module_canvasBottomSpacer__JuxVh","container":"render-module_container__-C3d7"};
 styleInject(css_248z$a);
 
 // TODO: In order to support integrations without React, we should extract this heavy logic into simple
@@ -3073,6 +3323,66 @@ const useBreakpoints = (breakpoints) => {
     return { resolveDesignValue };
 };
 
+/**
+ * This function gets the element co-ordinates of a specified component in the DOM and its parent
+ * and sends the DOM Rect to the client app
+ */
+const sendSelectedComponentCoordinates = (instanceId) => {
+    const selection = getSelectionNodes(instanceId);
+    if (selection?.target) {
+        const sendUpdateSelectedComponentCoordinates = () => {
+            sendMessage(OUTGOING_EVENTS.UpdateSelectedComponentCoordinates, {
+                selectedNodeCoordinates: getElementCoordinates(selection.target),
+                selectedAssemblyChildCoordinates: selection.patternChild
+                    ? getElementCoordinates(selection.patternChild)
+                    : undefined,
+                parentCoordinates: selection.parent ? getElementCoordinates(selection.parent) : undefined,
+            });
+        };
+        // If the target contains an image, wait for this image to be loaded before sending the coordinates
+        const childImage = selection.target.querySelector('img');
+        if (childImage) {
+            const handleImageLoad = () => {
+                sendUpdateSelectedComponentCoordinates();
+                childImage.removeEventListener('load', handleImageLoad);
+            };
+            childImage.addEventListener('load', handleImageLoad);
+        }
+        sendUpdateSelectedComponentCoordinates();
+    }
+};
+const getSelectionNodes = (instanceId) => {
+    if (!instanceId)
+        return;
+    let selectedNode = document.querySelector(`[data-cf-node-id="${instanceId}"]`);
+    let selectedPatternChild = null;
+    let selectedParent = null;
+    // Use RegEx instead of split to match the last occurrence of '---' in the instanceId instead of the first one
+    const idMatch = instanceId.match(/(.*)---(.*)/);
+    const rootNodeId = idMatch?.[1] ?? instanceId;
+    const nodeLocation = idMatch?.[2];
+    const isNestedPattern = nodeLocation && selectedNode?.dataset?.cfNodeBlockType === ASSEMBLY_NODE_TYPE;
+    const isPatternChild = !isNestedPattern && nodeLocation;
+    if (isPatternChild) {
+        // For pattern child nodes, render the pattern itself as selected component
+        selectedPatternChild = selectedNode;
+        selectedNode = document.querySelector(`[data-cf-node-id="${rootNodeId}"]`);
+    }
+    else if (isNestedPattern) {
+        // For nested patterns, return the upper pattern as parent
+        selectedParent = document.querySelector(`[data-cf-node-id="${rootNodeId}"]`);
+    }
+    else {
+        // Find the next valid parent of the selected element
+        selectedParent = selectedNode?.parentElement ?? null;
+        // Ensure that the selection parent is a VisualEditorBlock
+        while (selectedParent && !selectedParent.dataset?.cfNodeId) {
+            selectedParent = selectedParent?.parentElement;
+        }
+    }
+    return { target: selectedNode, patternChild: selectedPatternChild, parent: selectedParent };
+};
+
 // Note: During development, the hot reloading might empty this and it
 // stays empty leading to not rendering assemblies. Ideally, this is
 // integrated into the state machine to keep track of its state.
@@ -3106,10 +3416,14 @@ const useEditorStore = create((set, get) => ({
     dataSource: {},
     hyperLinkPattern: undefined,
     unboundValues: {},
+    selectedNodeId: null,
     locale: null,
     setHyperLinkPattern: (pattern) => {
         set({ hyperLinkPattern: pattern });
     },
+    setSelectedNodeId: (id) => {
+        set({ selectedNodeId: id });
+    },
     setDataSource(data) {
         const dataSource = get().dataSource;
         const newDataSource = { ...dataSource, ...data };
@@ -3141,7 +3455,6 @@ const useEditorStore = create((set, get) => ({
 var css_248z$8 = "@import url(https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;1,400;1,600&display=swap);:root{--cf-color-white:#fff;--cf-color-black:#000;--cf-color-gray100:#f7f9fa;--cf-color-gray400:#aec1cc;--cf-color-gray400-rgb:174,193,204;--cf-spacing-0:0rem;--cf-spacing-1:0.125rem;--cf-spacing-2:0.25rem;--cf-spacing-3:0.375rem;--cf-spacing-4:0.5rem;--cf-spacing-5:0.625rem;--cf-spacing-6:0.75rem;--cf-spacing-7:0.875rem;--cf-spacing-8:1rem;--cf-spacing-9:1.25rem;--cf-spacing-10:1.5rem;--cf-spacing-11:1.75rem;--cf-spacing-12:2rem;--cf-spacing-13:2.25rem;--cf-text-xs:0.75rem;--cf-text-sm:0.875rem;--cf-text-base:1rem;--cf-text-lg:1.125rem;--cf-text-xl:1.25rem;--cf-text-2xl:1.5rem;--cf-text-3xl:2rem;--cf-text-4xl:2.75rem;--cf-font-light:300;--cf-font-normal:400;--cf-font-medium:500;--cf-font-semibold:600;--cf-font-bold:700;--cf-font-extra-bold:800;--cf-font-black:900;--cf-border-radius-none:0px;--cf-border-radius-sm:0.125rem;--cf-border-radius:0.25rem;--cf-border-radius-md:0.375rem;--cf-border-radius-lg:0.5rem;--cf-border-radius-xl:0.75rem;--cf-border-radius-2xl:1rem;--cf-border-radius-3xl:1.5rem;--cf-border-radius-full:9999px;--cf-font-family-sans:Archivo,Helvetica,Arial,sans-serif;--cf-font-family-serif:Georgia,Cambria,Times New Roman,Times,serif;--cf-max-width-full:100%;--cf-button-bg:var(--cf-color-black);--cf-button-color:var(--cf-color-white);--cf-text-color:var(--cf-color-black)}*{box-sizing:border-box}";
 styleInject(css_248z$8);
 
-/** @deprecated will be removed when dropping backward compatibility for old DND */
 /**
  * These modes are ONLY intended to be internally used within the context of
  * editing an experience inside of Contentful Studio. i.e. these modes
@@ -4146,8 +4459,8 @@ var VisualEditorMode;
     VisualEditorMode["InjectScript"] = "injectScript";
 })(VisualEditorMode || (VisualEditorMode = {}));
 
-var css_248z$2 = ".contentful-container{display:flex;pointer-events:all;position:relative}.contentful-container::-webkit-scrollbar{display:none}.cf-container-wrapper{position:relative;width:100%}.contentful-container:after{align-items:center;bottom:0;color:var(--exp-builder-gray400);content:\"\";display:block;display:flex;font-family:var(--exp-builder-font-stack-primary);font-size:12px;justify-content:center;left:0;overflow-x:clip;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.contentful-section-label:after{content:\"Section\"}.contentful-container-label:after{content:\"Container\"}.contentful-container-link,.contentful-container-link:active,.contentful-container-link:focus-visible,.contentful-container-link:hover,.contentful-container-link:read-write,.contentful-container-link:visited{color:inherit;outline:unset;text-decoration:unset}";
-styleInject(css_248z$2);
+var css_248z$2$1 = ".contentful-container{display:flex;pointer-events:all;position:relative}.contentful-container::-webkit-scrollbar{display:none}.cf-single-column-wrapper{position:relative}.cf-container-wrapper{position:relative;width:100%}.contentful-container:after{align-items:center;bottom:0;color:var(--exp-builder-gray400);content:\"\";display:block;display:flex;font-family:var(--exp-builder-font-stack-primary);font-size:12px;justify-content:center;left:0;overflow-x:clip;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.contentful-section-label:after{content:\"Section\"}.contentful-container-label:after{content:\"Container\"}.contentful-container-link,.contentful-container-link:active,.contentful-container-link:focus-visible,.contentful-container-link:hover,.contentful-container-link:read-write,.contentful-container-link:visited{color:inherit;outline:unset;text-decoration:unset}";
+styleInject(css_248z$2$1);
 
 const Flex = forwardRef(({ id, children, onMouseEnter, onMouseUp, onMouseLeave, onMouseDown, onClick, flex, flexBasis, flexShrink, flexDirection, gap, justifyContent, justifyItems, justifySelf, alignItems, alignSelf, alignContent, order, flexWrap, flexGrow, className, cssStyles, ...props }, ref) => {
     return (React.createElement("div", { id: id, ref: ref, style: {
@@ -4171,24 +4484,113 @@ const Flex = forwardRef(({ id, children, onMouseEnter, onMouseUp, onMouseLeave,
 });
 Flex.displayName = 'Flex';
 
-var css_248z$1$1 = ".cf-divider{display:contents;height:100%;position:relative;width:100%}.cf-divider hr{border:none}";
+var css_248z$1$1 = ".cf-divider{display:contents;height:100%;position:relative;width:100%}.cf-divider hr{border:none}[data-ctfl-zone-id=root] .cf-divider:before{bottom:-5px;content:\"\";left:-5px;pointer-events:all;position:absolute;right:-5px;top:-5px}";
 styleInject(css_248z$1$1);
 
-var css_248z$9 = ".cf-columns{display:flex;flex-direction:column;gap:24px;grid-template-columns:repeat(12,1fr);min-height:0;min-width:0}@media (min-width:768px){.cf-columns{display:grid}}.cf-single-column-wrapper{position:relative}.cf-single-column-wrapper:after{align-items:center;bottom:0;color:var(--exp-builder-gray400);content:\"\";display:block;display:flex;font-family:var(--exp-builder-font-stack-primary);font-size:12px;justify-content:center;left:0;overflow-x:clip;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.cf-single-column-label:after{content:\"Column\"}";
+var css_248z$9 = ".cf-columns{display:flex;flex-direction:column;gap:24px;grid-template-columns:repeat(12,1fr);min-height:0;min-width:0}@media (min-width:768px){.cf-columns{display:grid}}.cf-single-column-wrapper{display:flex;position:relative}.cf-single-column{pointer-events:all}.cf-single-column-wrapper:after{align-items:center;bottom:0;color:var(--exp-builder-gray400);content:\"\";display:block;display:flex;font-family:var(--exp-builder-font-stack-primary);font-size:12px;justify-content:center;left:0;overflow-x:clip;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.cf-single-column-label:after{content:\"Column\"}";
 styleInject(css_248z$9);
 
+const ColumnWrapper = forwardRef((props, ref) => {
+    return (React.createElement("div", { ref: ref, ...props, style: {
+            ...(props.style || {}),
+            display: 'grid',
+            gridTemplateColumns: 'repeat(12, [col-start] 1fr)',
+        } }, props.children));
+});
+ColumnWrapper.displayName = 'ColumnWrapper';
+
 const assemblyStyle = { display: 'contents' };
+// Feel free to do any magic as regards variable definitions for assemblies
+// Or if this isn't necessary by the time we figure that part out, we can bid this part farewell
 const Assembly = (props) => {
+    if (props.editorMode) {
+        const { node, dragProps, ...editorModeProps } = props;
+        return props.renderDropzone(node, {
+            ...editorModeProps,
+            ['data-test-id']: 'contentful-assembly',
+            className: props.className,
+            dragProps,
+        });
+    }
     // Using a display contents so assembly content/children
     // can appear as if they are direct children of the div wrapper's parent
     return React.createElement("div", { "data-test-id": "assembly", ...props, style: assemblyStyle });
 };
 
-function useEditorSubscriber(inMemoryEntitiesStore) {
-    const entityStore = inMemoryEntitiesStore((state) => state.entityStore);
-    const areEntitiesFetched = inMemoryEntitiesStore((state) => state.areEntitiesFetched);
-    const setEntitiesFetched = inMemoryEntitiesStore((state) => state.setEntitiesFetched);
-    const resetEntityStore = inMemoryEntitiesStore((state) => state.resetEntityStore);
+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;
+    }
+}
+
+class SimulateDnD extends DragState {
+    constructor() {
+        super();
+        this.draggingElement = null;
+    }
+    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);
+    }
+}
+var SimulateDnD$1 = new SimulateDnD();
+
+function useEditorSubscriber(entityCache) {
+    const entityStore = entityCache((state) => state.entityStore);
+    const areEntitiesFetched = entityCache((state) => state.areEntitiesFetched);
+    const setEntitiesFetched = entityCache((state) => state.setEntitiesFetched);
+    const resetEntityStore = entityCache((state) => state.resetEntityStore);
     const { updateTree, updateNodesByUpdatedEntity } = useTreeStore((state) => ({
         updateTree: state.updateTree,
         updateNodesByUpdatedEntity: state.updateNodesByUpdatedEntity,
@@ -4198,6 +4600,13 @@ function useEditorSubscriber(inMemoryEntitiesStore) {
     const setLocale = useEditorStore((state) => state.setLocale);
     const setUnboundValues = useEditorStore((state) => state.setUnboundValues);
     const setDataSource = useEditorStore((state) => state.setDataSource);
+    const setSelectedNodeId = useEditorStore((state) => state.setSelectedNodeId);
+    const selectedNodeId = useEditorStore((state) => state.selectedNodeId);
+    const setComponentId = useDraggedItemStore((state) => state.setComponentId);
+    const setHoveredComponentId = useDraggedItemStore((state) => state.setHoveredComponentId);
+    const setDraggingOnCanvas = useDraggedItemStore((state) => state.setDraggingOnCanvas);
+    const setMousePosition = useDraggedItemStore((state) => state.setMousePosition);
+    const setScrollY = useDraggedItemStore((state) => state.setScrollY);
     const reloadApp = () => {
         sendMessage(OUTGOING_EVENTS.CanvasReload, undefined);
         // Wait a moment to ensure that the message was sent
@@ -4375,6 +4784,27 @@ function useEditorSubscriber(inMemoryEntitiesStore) {
                     }
                     break;
                 }
+                case INCOMING_EVENTS.CanvasResized: {
+                    const { selectedNodeId } = eventData.payload;
+                    if (selectedNodeId) {
+                        sendSelectedComponentCoordinates(selectedNodeId);
+                    }
+                    break;
+                }
+                case INCOMING_EVENTS.HoverComponent: {
+                    const { hoveredNodeId } = eventData.payload;
+                    setHoveredComponentId(hoveredNodeId);
+                    break;
+                }
+                case INCOMING_EVENTS.ComponentDraggingChanged: {
+                    const { isDragging } = eventData.payload;
+                    if (!isDragging) {
+                        setComponentId('');
+                        setDraggingOnCanvas(false);
+                        SimulateDnD$1.reset();
+                    }
+                    break;
+                }
                 case INCOMING_EVENTS.UpdatedEntity: {
                     const { entity: updatedEntity, shouldRerender } = eventData.payload;
                     if (updatedEntity) {
@@ -4391,6 +4821,51 @@ function useEditorSubscriber(inMemoryEntitiesStore) {
                 case INCOMING_EVENTS.RequestEditorMode: {
                     break;
                 }
+                case INCOMING_EVENTS.ComponentDragCanceled: {
+                    if (SimulateDnD$1.isDragging) {
+                        //simulate a mouseup event to cancel the drag
+                        SimulateDnD$1.endDrag(0, 0);
+                    }
+                    break;
+                }
+                case INCOMING_EVENTS.ComponentDragStarted: {
+                    const { id, isAssembly } = eventData.payload;
+                    SimulateDnD$1.setupDrag();
+                    setComponentId(`${id}:${isAssembly}` || '');
+                    setDraggingOnCanvas(true);
+                    sendMessage(OUTGOING_EVENTS.ComponentSelected, {
+                        nodeId: '',
+                    });
+                    break;
+                }
+                case INCOMING_EVENTS.ComponentDragEnded: {
+                    SimulateDnD$1.reset();
+                    setComponentId('');
+                    setDraggingOnCanvas(false);
+                    break;
+                }
+                case INCOMING_EVENTS.SelectComponent: {
+                    const { selectedNodeId: nodeId } = eventData.payload;
+                    setSelectedNodeId(nodeId);
+                    sendSelectedComponentCoordinates(nodeId);
+                    break;
+                }
+                case INCOMING_EVENTS.MouseMove: {
+                    const { mouseX, mouseY } = eventData.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 } = eventData.payload;
+                    SimulateDnD$1.endDrag(mouseX, mouseY);
+                    break;
+                }
                 default:
                     console.error(`[experiences-sdk-react::onMessage] Logic error, unsupported eventType: [${eventData.eventType}]`);
             }
@@ -4401,8 +4876,11 @@ function useEditorSubscriber(inMemoryEntitiesStore) {
         };
     }, [
         entityStore,
+        setComponentId,
+        setDraggingOnCanvas,
         setDataSource,
         setLocale,
+        setSelectedNodeId,
         dataSource,
         areEntitiesFetched,
         fetchMissingEntities,
@@ -4410,125 +4888,362 @@ function useEditorSubscriber(inMemoryEntitiesStore) {
         unboundValues,
         updateTree,
         updateNodesByUpdatedEntity,
+        setMousePosition,
         resetEntityStore,
+        setHoveredComponentId,
     ]);
+    /*
+     * Handles on scroll business
+     */
+    useEffect(() => {
+        let timeoutId = 0;
+        let isScrolling = false;
+        const onScroll = () => {
+            setScrollY(window.scrollY);
+            if (isScrolling === false) {
+                sendMessage(OUTGOING_EVENTS.CanvasScroll, SCROLL_STATES.Start);
+            }
+            sendMessage(OUTGOING_EVENTS.CanvasScroll, SCROLL_STATES.IsScrolling);
+            isScrolling = true;
+            clearTimeout(timeoutId);
+            timeoutId = window.setTimeout(() => {
+                if (isScrolling === false) {
+                    return;
+                }
+                isScrolling = false;
+                sendMessage(OUTGOING_EVENTS.CanvasScroll, SCROLL_STATES.End);
+                /**
+                 * On scroll end, send new co-ordinates of selected node
+                 */
+                if (selectedNodeId) {
+                    sendSelectedComponentCoordinates(selectedNodeId);
+                }
+            }, 150);
+        };
+        window.addEventListener('scroll', onScroll, { capture: true, passive: true });
+        return () => {
+            window.removeEventListener('scroll', onScroll, { capture: true });
+            clearTimeout(timeoutId);
+        };
+    }, [selectedNodeId, setScrollY]);
 }
 
-const CircularDependencyErrorPlaceholder = ({ wrappingPatternIds, ...props }) => {
-    return (React.createElement("div", { ...props, "data-cf-node-error": "circular-pattern-dependency", style: {
-            border: '1px solid red',
-            background: 'rgba(255, 0, 0, 0.1)',
-            padding: '1rem 1rem 0 1rem',
-            width: '100%',
-            height: '100%',
-        } },
-        "Circular usage of patterns detected:",
-        React.createElement("ul", null, Array.from(wrappingPatternIds).map((patternId) => {
-            const entryLink = { sys: { type: 'Link', linkType: 'Entry', id: patternId } };
-            const entry = inMemoryEntities.maybeResolveLink(entryLink);
-            const entryTitle = entry?.fields?.title;
-            const text = entryTitle ? `${entryTitle} (${patternId})` : patternId;
-            return React.createElement("li", { key: patternId }, text);
-        }))));
+const onComponentMoved = (options) => {
+    sendMessage(OUTGOING_EVENTS.ComponentMoved, options);
 };
 
-class ImportedComponentError extends Error {
-    constructor(message) {
-        super(message);
-        this.name = 'ImportedComponentError';
-    }
-}
-class ExperienceSDKError extends Error {
-    constructor(message) {
-        super(message);
-        this.name = 'ExperienceSDKError';
-    }
-}
-class ImportedComponentErrorBoundary extends React.Component {
-    componentDidCatch(error, _errorInfo) {
-        if (error.name === 'ImportedComponentError' || error.name === 'ExperienceSDKError') {
-            // This error was already handled by a nested error boundary and should be passed upwards
-            // We have to do this as we wrap every component on every layer with this error boundary and
-            // thus an error deep in the tree bubbles through many layers of error boundaries.
-            throw error;
-        }
-        // Differentiate between custom and SDK-provided components for error tracking
-        const ErrorClass = isContentfulComponent(this.props.componentId)
-            ? ExperienceSDKError
-            : ImportedComponentError;
-        const err = new ErrorClass(error.message);
-        err.stack = error.stack;
-        throw err;
-    }
-    render() {
-        return this.props.children;
-    }
-}
+const generateId = (type) => `${type}-${v4()}`;
 
-const MissingComponentPlaceholder = ({ blockId }) => {
-    return (React.createElement("div", { style: {
-            border: '1px solid red',
-            width: '100%',
-            height: '100%',
-        } },
-        "Missing component '",
-        blockId,
-        "'"));
+const createTreeNode = ({ blockId, parentId, slotId }) => {
+    const node = {
+        type: 'block',
+        data: {
+            id: generateId(blockId),
+            blockId,
+            slotId,
+            props: {},
+            dataSource: {},
+            breakpoints: [],
+            unboundValues: {},
+        },
+        parentId,
+        children: [],
+    };
+    return node;
 };
 
-var css_248z$1 = ".EditorBlock-module_emptySlot__za-Bi {\n  min-height: 80px;\n  min-width: 80px;\n}\n";
-var styles$1 = {"emptySlot":"EditorBlock-module_emptySlot__za-Bi"};
-styleInject(css_248z$1);
+const onComponentDropped = ({ node, index, parentBlockId, parentType, parentId, }) => {
+    sendMessage(OUTGOING_EVENTS.ComponentDropped, {
+        node,
+        index: index ?? node.children.length,
+        parentNode: {
+            type: parentType,
+            data: {
+                blockId: parentBlockId,
+                id: parentId,
+            },
+        },
+    });
+};
 
-const useComponentRegistration = (node) => {
-    return useMemo(() => {
-        let registration = componentRegistry.get(node.data.blockId);
-        if (node.type === ASSEMBLY_NODE_TYPE && !registration) {
-            registration = createAssemblyRegistration({
-                definitionId: node.data.blockId,
-                component: Assembly,
-            });
-        }
-        if (!registration) {
-            console.warn(`Component registration not found for component with id: "${node.data.blockId}". The registered component might have been removed from the code. To proceed, remove the component manually from the layers tab.`);
-            return undefined;
-        }
-        return registration;
-    }, [node]);
+const onDrop = ({ destinationIndex, componentType, destinationZoneId, data, slotId, }) => {
+    const parentId = destinationZoneId;
+    const parentNode = getItem({ id: parentId }, data);
+    const parentIsRoot = parentId === ROOT_ID;
+    const emptyComponentData = {
+        type: 'block',
+        parentId,
+        children: [],
+        data: {
+            blockId: componentType,
+            id: generateId(componentType),
+            slotId,
+            breakpoints: [],
+            dataSource: {},
+            props: {},
+            unboundValues: {},
+        },
+    };
+    onComponentDropped({
+        node: emptyComponentData,
+        index: destinationIndex,
+        parentType: parentIsRoot ? 'root' : parentNode?.type,
+        parentBlockId: parentNode?.data.blockId,
+        parentId: parentIsRoot ? 'root' : parentId,
+    });
 };
 
 /**
- * @param styles: the list of styles to apply
- * @param nodeId: the id of node that these styles will be applied to
- * @returns className: the className that was used
- * Builds and adds a style tag in the document. Returns the className to be attached to the element.
- * In editor mode the nodeId is used as the identifier in order to avoid creating endless tags as the styles are tweeked
+ * Parses a droppable zone ID into a node ID and slot ID.
+ *
+ * The slot ID is optional and only present if the component implements multiple drop zones.
+ *
+ * @param zoneId - Expected formats are `nodeId` or `nodeId|slotId`.
  */
-const useEditorModeClassName = ({ styles, nodeId, }) => {
-    const [className, setClassName] = useState('');
-    useLayoutEffect(() => {
-        if (Object.keys(styles).length === 0) {
+const parseZoneId = (zoneId) => {
+    const [nodeId, slotId] = zoneId.includes('|') ? zoneId.split('|') : [zoneId, undefined];
+    return { nodeId, slotId };
+};
+
+function useCanvasInteractions() {
+    const tree = useTreeStore((state) => state.tree);
+    const reorderChildren = useTreeStore((state) => state.reorderChildren);
+    const reparentChild = useTreeStore((state) => state.reparentChild);
+    const addChild = useTreeStore((state) => state.addChild);
+    const onAddComponent = (droppedItem) => {
+        const { destination, draggableId } = droppedItem;
+        if (!destination) {
             return;
         }
-        const [newClassName, styleRules] = buildStyleTag({ styles, nodeId });
-        addStylesTag(newClassName, styleRules);
-        if (className !== newClassName) {
-            setClassName(newClassName);
-            // Clean up: remove outdated styles from DOM
-            removeStylesTag(className);
+        /**
+         * We only have the draggableId as information about the new component being dropped.
+         * So we need to split it to get the blockId and the isAssembly flag.
+         */
+        const [blockId, isAssembly] = draggableId.split(':');
+        const { nodeId: parentId, slotId } = parseZoneId(destination.droppableId);
+        const droppingOnRoot = parentId === ROOT_ID;
+        const isValidRootComponent = blockId === CONTENTFUL_COMPONENTS$1.container.id;
+        let node = createTreeNode({ blockId, parentId, slotId });
+        if (droppingOnRoot && !isValidRootComponent) {
+            const wrappingContainer = createTreeNode({
+                blockId: CONTENTFUL_COMPONENTS$1.container.id,
+                parentId,
+            });
+            const childNode = createTreeNode({
+                blockId,
+                parentId: wrappingContainer.data.id,
+            });
+            node = wrappingContainer;
+            node.children = [childNode];
         }
-    }, [styles, nodeId, className]);
-    return className;
-};
-const removeStylesTag = (className) => {
-    const existingTag = document.querySelector(`[data-cf-styles="${className}"]`);
-    if (existingTag) {
-        document.head.removeChild(existingTag);
-    }
+        /**
+         * isAssembly comes from a string ID so we need to check if it's 'true' or 'false'
+         * in string format.
+         */
+        if (isAssembly === 'false') {
+            addChild(destination.index, parentId, node);
+        }
+        onDrop({
+            data: tree,
+            componentType: blockId,
+            destinationIndex: destination.index,
+            destinationZoneId: parentId,
+            slotId,
+        });
+    };
+    const onMoveComponent = (droppedItem) => {
+        const { destination, source, draggableId } = droppedItem;
+        if (!destination || !source) {
+            return;
+        }
+        if (destination.droppableId === source.droppableId) {
+            reorderChildren(destination.index, destination.droppableId, source.index);
+        }
+        if (destination.droppableId !== source.droppableId) {
+            reparentChild(destination.index, destination.droppableId, source.index, source.droppableId);
+        }
+        onComponentMoved({
+            nodeId: draggableId,
+            destinationIndex: destination.index,
+            destinationParentId: destination.droppableId,
+            sourceIndex: source.index,
+            sourceParentId: source.droppableId,
+        });
+    };
+    return { onAddComponent, onMoveComponent };
+}
+
+const TestDNDContainer = ({ onDragEnd, onBeforeDragStart, onDragStart, onDragUpdate, children, }) => {
+    const handleDragStart = (event) => {
+        const draggedItem = event.nativeEvent;
+        const start = {
+            mode: draggedItem.mode,
+            draggableId: draggedItem.draggableId,
+            type: draggedItem.type,
+            source: draggedItem.source,
+        };
+        onBeforeDragStart(start);
+        onDragStart(start, {});
+    };
+    const handleDrag = (event) => {
+        const draggedItem = event.nativeEvent;
+        const update = {
+            mode: draggedItem.mode,
+            draggableId: draggedItem.draggableId,
+            type: draggedItem.type,
+            source: draggedItem.source,
+            destination: draggedItem.destination,
+            combine: draggedItem.combine,
+        };
+        onDragUpdate(update, {});
+    };
+    const handleDragEnd = (event) => {
+        const draggedItem = event.nativeEvent;
+        const result = {
+            mode: draggedItem.mode,
+            draggableId: draggedItem.draggableId,
+            type: draggedItem.type,
+            source: draggedItem.source,
+            destination: draggedItem.destination,
+            combine: draggedItem.combine,
+            reason: draggedItem.reason,
+        };
+        onDragEnd(result, {});
+    };
+    return (React.createElement("div", { "data-test-id": "dnd-context-substitute", onDragStart: handleDragStart, onDrag: handleDrag, onDragEnd: handleDragEnd }, children));
 };
-const addStylesTag = (className, styleRules) => {
-    const existingTag = document.querySelector(`[data-cf-styles="${className}"]`);
-    if (existingTag) {
+
+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 beforeDragStart = ({ source }) => {
+        prevSelectedNodeId.current = selectedNodeId;
+        // Unselect the current node when dragging and remove the outline
+        setSelectedNodeId('');
+        // Set dragging state here to make sure that DnD capture phase has completed
+        setDraggingOnCanvas(true);
+        sendMessage(OUTGOING_EVENTS.ComponentSelected, {
+            nodeId: '',
+        });
+        if (source.droppableId !== COMPONENT_LIST_ID) {
+            sendMessage(OUTGOING_EVENTS.ComponentMoveStarted, undefined);
+        }
+    };
+    const beforeCapture = ({ draggableId }) => {
+        setOnBeforeCaptureId(draggableId);
+    };
+    const dragStart = (start) => {
+        updateItem(start);
+    };
+    const dragUpdate = (update) => {
+        updateItem(update);
+    };
+    const dragEnd = (dropResult) => {
+        setDraggingOnCanvas(false);
+        setOnBeforeCaptureId('');
+        updateItem();
+        SimulateDnD$1.reset();
+        // If the component is being dropped onto itself, do nothing
+        // This can happen from an apparent race condition where the hovering zone gets set
+        // to the component after its dropped.
+        if (dropResult.destination?.droppableId === dropResult.draggableId) {
+            return;
+        }
+        if (!dropResult.destination) {
+            if (!draggedItem?.destination) {
+                // User cancel drag
+                sendMessage(OUTGOING_EVENTS.ComponentDragCanceled, undefined);
+                //select the previously selected node if drag was canceled
+                if (prevSelectedNodeId.current) {
+                    setSelectedNodeId(prevSelectedNodeId.current);
+                    sendMessage(OUTGOING_EVENTS.ComponentSelected, {
+                        nodeId: prevSelectedNodeId.current,
+                    });
+                    prevSelectedNodeId.current = null;
+                }
+                return;
+            }
+            // Use the destination from the draggedItem (when clicking the canvas)
+            dropResult.destination = draggedItem.destination;
+        }
+        // New component added to canvas
+        if (dropResult.source.droppableId.startsWith('component-list')) {
+            onAddComponent(dropResult);
+        }
+        else {
+            onMoveComponent(dropResult);
+        }
+        // If a node was previously selected prior to dragging, re-select it
+        setSelectedNodeId(dropResult.draggableId);
+        sendMessage(OUTGOING_EVENTS.ComponentMoveEnded, undefined);
+        sendMessage(OUTGOING_EVENTS.ComponentSelected, {
+            nodeId: dropResult.draggableId,
+        });
+    };
+    return (React.createElement(DragDropContext, { onBeforeCapture: beforeCapture, onDragUpdate: dragUpdate, onBeforeDragStart: beforeDragStart, onDragStart: dragStart, onDragEnd: dragEnd }, isTestRun ? (React.createElement(TestDNDContainer, { onDragEnd: dragEnd, onBeforeDragStart: beforeDragStart, onDragStart: dragStart, onDragUpdate: dragUpdate }, children)) : (children)));
+};
+
+/**
+ * This hook gets the element co-ordinates of a specified element in the DOM
+ * and sends the DOM Rect to the client app
+ */
+const useSelectedInstanceCoordinates = ({ node }) => {
+    const selectedNodeId = useEditorStore((state) => state.selectedNodeId);
+    useEffect(() => {
+        if (selectedNodeId !== node.data.id) {
+            return;
+        }
+        // Allows the drop animation to finish before
+        // calculating the components coordinates
+        setTimeout(() => {
+            sendSelectedComponentCoordinates(node.data.id);
+        }, 10);
+    }, [node, selectedNodeId]);
+    const selectedElement = node.data.id
+        ? document.querySelector(`[data-cf-node-id="${selectedNodeId}"]`)
+        : undefined;
+    return selectedElement ? getElementCoordinates(selectedElement) : null;
+};
+
+/**
+ * @param styles: the list of styles to apply
+ * @param nodeId: the id of node that these styles will be applied to
+ * @returns className: the className that was used
+ * Builds and adds a style tag in the document. Returns the className to be attached to the element.
+ * In editor mode the nodeId is used as the identifier in order to avoid creating endless tags as the styles are tweeked
+ */
+const useEditorModeClassName = ({ styles, nodeId, }) => {
+    const [className, setClassName] = useState('');
+    useLayoutEffect(() => {
+        if (Object.keys(styles).length === 0) {
+            return;
+        }
+        const [newClassName, styleRules] = buildStyleTag({ styles, nodeId });
+        addStylesTag(newClassName, styleRules);
+        if (className !== newClassName) {
+            setClassName(newClassName);
+            // Clean up: remove outdated styles from DOM
+            removeStylesTag(className);
+        }
+    }, [styles, nodeId, className]);
+    return className;
+};
+const removeStylesTag = (className) => {
+    const existingTag = document.querySelector(`[data-cf-styles="${className}"]`);
+    if (existingTag) {
+        document.head.removeChild(existingTag);
+    }
+};
+const addStylesTag = (className, styleRules) => {
+    const existingTag = document.querySelector(`[data-cf-styles="${className}"]`);
+    if (existingTag) {
         existingTag.innerHTML = styleRules;
         return;
     }
@@ -4574,12 +5289,15 @@ const maybeMergePatternDefaultDesignValues = ({ variableName, variableMapping, n
     return variableMapping.valuesByBreakpoint;
 };
 
-const useComponentProps = ({ node, entityStore, areEntitiesFetched, resolveDesignValue, definition, options, }) => {
+const useComponentProps = ({ node, entityStore, areEntitiesFetched, resolveDesignValue, renderDropzone, definition, options, userIsDragging, requiresDragWrapper, }) => {
     const unboundValues = useEditorStore((state) => state.unboundValues);
     const hyperlinkPattern = useEditorStore((state) => state.hyperLinkPattern);
     const locale = useEditorStore((state) => state.locale);
     const dataSource = useEditorStore((state) => state.dataSource);
+    const draggingId = useDraggedItemStore((state) => state.onBeforeCaptureId);
+    const nodeRect = useDraggedItemStore((state) => state.domRect);
     const findNodeById = useTreeStore((state) => state.findNodeById);
+    const isEmptyZone = !node.children.length;
     const props = useMemo(() => {
         const propsBase = {
             cfSsrClassName: node.data.props.cfSsrClassName
@@ -4675,9 +5393,18 @@ const useComponentProps = ({ node, entityStore, areEntitiesFetched, resolveDesig
                 return { ...acc };
             }
         }, {});
+        const slotProps = {};
+        if (definition.slots) {
+            for (const slotId in definition.slots) {
+                slotProps[slotId] = renderDropzone(node, {
+                    zoneId: [node.data.id, slotId].join('|'),
+                });
+            }
+        }
         return {
             ...propsBase,
             ...extractedProps,
+            ...slotProps,
         };
     }, [
         hyperlinkPattern,
@@ -4689,224 +5416,1120 @@ const useComponentProps = ({ node, entityStore, areEntitiesFetched, resolveDesig
         areEntitiesFetched,
         unboundValues,
         entityStore,
+        renderDropzone,
         findNodeById,
     ]);
-    const cfStyles = useMemo(() => buildCfStyles(props), [props]);
-    const shouldRenderEmptySpaceWithMinSize = useMemo(() => {
-        if (node.children.length)
-            return false;
-        // Render with minimum height and with in those two scenarios:
-        if (isStructureWithRelativeHeight(node.data.blockId, cfStyles.height))
-            return true;
-        if (definition?.children)
-            return true;
-        return false;
-    }, [cfStyles.height, definition?.children, node.children.length, node.data.blockId]);
+    const cfStyles = useMemo(() => ({
+        ...buildCfStyles(props),
+        // This is not handled by buildCfStyles as it requires separate disjunct media queries in preview mode
+        ...transformVisibility(props.cfVisibility),
+    }), [props]);
+    const cfVisibility = props['cfVisibility'];
+    const isAssemblyBlock = node.type === ASSEMBLY_BLOCK_NODE_TYPE;
+    const isSingleColumn = node?.data.blockId === CONTENTFUL_COMPONENTS$1.columns.id;
+    const isStructureComponent = isContentfulStructureComponent(node?.data.blockId);
+    const isPatternNode = node.type === ASSEMBLY_NODE_TYPE;
+    const { overrideStyles, wrapperStyles } = useMemo(() => {
+        // Move size styles to the wrapping div and override the component styles
+        const overrideStyles = {};
+        const wrapperStyles = { width: options?.wrapContainerWidth };
+        if (requiresDragWrapper) {
+            // when element is marked by user as not-visible, on that element the node `display: none !important`
+            // will be set and it will disappear. However, when such a node has a wrapper div, the wrapper
+            // should not have any css properties (at least not ones which force size), as such div should
+            // simply be a zero height wrapper around element with `display: none !important`.
+            // Hence we guard all wrapperStyles with `cfVisibility` check.
+            if (cfVisibility && cfStyles.width)
+                wrapperStyles.width = cfStyles.width;
+            if (cfVisibility && cfStyles.height)
+                wrapperStyles.height = cfStyles.height;
+            if (cfVisibility && cfStyles.maxWidth)
+                wrapperStyles.maxWidth = cfStyles.maxWidth;
+            if (cfVisibility && cfStyles.margin)
+                wrapperStyles.margin = cfStyles.margin;
+        }
+        // Override component styles to fill the wrapper
+        if (wrapperStyles.width)
+            overrideStyles.width = '100%';
+        if (wrapperStyles.height)
+            overrideStyles.height = '100%';
+        if (wrapperStyles.margin)
+            overrideStyles.margin = '0';
+        if (wrapperStyles.maxWidth)
+            overrideStyles.maxWidth = 'none';
+        // Prevent the dragging element from changing sizes when it has a percentage width or height
+        if (draggingId === node.data.id && nodeRect) {
+            if (requiresDragWrapper) {
+                if (isPercentValue(cfStyles.width))
+                    wrapperStyles.maxWidth = nodeRect.width;
+                if (isPercentValue(cfStyles.height))
+                    wrapperStyles.maxHeight = nodeRect.height;
+            }
+            else {
+                if (isPercentValue(cfStyles.width))
+                    overrideStyles.maxWidth = nodeRect.width;
+                if (isPercentValue(cfStyles.height))
+                    overrideStyles.maxHeight = nodeRect.height;
+            }
+        }
+        return { overrideStyles, wrapperStyles };
+    }, [
+        cfStyles,
+        options?.wrapContainerWidth,
+        requiresDragWrapper,
+        node.data.id,
+        draggingId,
+        nodeRect,
+        cfVisibility,
+    ]);
     // Styles that will be applied to the component element
+    // This has to be memoized to avoid recreating the styles in useEditorModeClassName on every render
     const componentStyles = useMemo(() => ({
         ...cfStyles,
-        ...(shouldRenderEmptySpaceWithMinSize && {
-            minHeight: EMPTY_CONTAINER_SIZE,
-            minWidth: EMPTY_CONTAINER_SIZE,
+        ...overrideStyles,
+        ...(isEmptyZone &&
+            isStructureWithRelativeHeight(node?.data.blockId, cfStyles.height) && {
+            minHeight: EMPTY_CONTAINER_HEIGHT,
+        }),
+        ...(userIsDragging &&
+            isStructureComponent &&
+            !isSingleColumn &&
+            !isAssemblyBlock && {
+            padding: addExtraDropzonePadding(cfStyles.padding?.toString() || '0 0 0 0'),
         }),
-    }), [cfStyles, shouldRenderEmptySpaceWithMinSize]);
-    const cfCsrClassName = useEditorModeClassName({
+    }), [
+        cfStyles,
+        isAssemblyBlock,
+        isEmptyZone,
+        isSingleColumn,
+        isStructureComponent,
+        node?.data.blockId,
+        overrideStyles,
+        userIsDragging,
+    ]);
+    const componentClass = useEditorModeClassName({
         styles: componentStyles,
         nodeId: node.data.id,
     });
-    const componentProps = useMemo(() => {
-        const sharedProps = {
-            'data-cf-node-id': node.data.id,
-            'data-cf-node-block-id': node.data.blockId,
-            'data-cf-node-block-type': node.type,
-            className: props.cfSsrClassName ?? cfCsrClassName,
+    const sharedProps = {
+        'data-cf-node-id': node.data.id,
+        'data-cf-node-block-id': node.data.blockId,
+        'data-cf-node-block-type': node.type,
+        className: props.cfSsrClassName ?? componentClass,
+        ...(definition?.children ? { children: renderDropzone(node) } : {}),
+    };
+    const customComponentProps = {
+        ...sharedProps,
+        // Allows custom components to render differently in the editor. This needs to be activated
+        // through options as the component has to be aware of this prop to not cause any React warnings.
+        ...(options?.enableCustomEditorView ? { isInExpEditorMode: true } : {}),
+        ...sanitizeNodeProps(props),
+    };
+    const structuralOrPatternComponentProps = {
+        ...sharedProps,
+        editorMode: true,
+        node,
+        renderDropzone,
+    };
+    return {
+        componentProps: isStructureComponent || isPatternNode
+            ? structuralOrPatternComponentProps
+            : customComponentProps,
+        componentStyles,
+        wrapperStyles,
+    };
+};
+const addExtraDropzonePadding = (padding) => padding
+    .split(' ')
+    .map((value) => parseFloat(value) === 0 ? `${DRAG_PADDING}px` : `calc(${value} + ${DRAG_PADDING}px)`)
+    .join(' ');
+const isPercentValue = (value) => typeof value === 'string' && value.endsWith('%');
+
+class ImportedComponentError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = 'ImportedComponentError';
+    }
+}
+class ExperienceSDKError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = 'ExperienceSDKError';
+    }
+}
+class ImportedComponentErrorBoundary extends React.Component {
+    componentDidCatch(error, _errorInfo) {
+        if (error.name === 'ImportedComponentError' || error.name === 'ExperienceSDKError') {
+            // This error was already handled by a nested error boundary and should be passed upwards
+            // We have to do this as we wrap every component on every layer with this error boundary and
+            // thus an error deep in the tree bubbles through many layers of error boundaries.
+            throw error;
+        }
+        // Differentiate between custom and SDK-provided components for error tracking
+        const ErrorClass = isContentfulComponent(this.props.componentId)
+            ? ExperienceSDKError
+            : ImportedComponentError;
+        const err = new ErrorClass(error.message);
+        err.stack = error.stack;
+        throw err;
+    }
+    render() {
+        return this.props.children;
+    }
+}
+
+const MissingComponentPlaceholder = ({ blockId }) => {
+    return (React.createElement("div", { style: {
+            border: '1px solid red',
+            width: '100%',
+            height: '100%',
+        } },
+        "Missing component '",
+        blockId,
+        "'"));
+};
+
+const CircularDependencyErrorPlaceholder = forwardRef(({ wrappingPatternIds, ...props }, ref) => {
+    return (React.createElement("div", { ...props, 
+        // Pass through ref to avoid DND errors being logged
+        ref: ref, "data-cf-node-error": "circular-pattern-dependency", style: {
+            border: '1px solid red',
+            background: 'rgba(255, 0, 0, 0.1)',
+            padding: '1rem 1rem 0 1rem',
+            width: '100%',
+            height: '100%',
+        } },
+        "Circular usage of patterns detected:",
+        React.createElement("ul", null, Array.from(wrappingPatternIds).map((patternId) => {
+            const entryLink = { sys: { type: 'Link', linkType: 'Entry', id: patternId } };
+            const entry = inMemoryEntities.maybeResolveLink(entryLink);
+            const entryTitle = entry?.fields?.title;
+            const text = entryTitle ? `${entryTitle} (${patternId})` : patternId;
+            return React.createElement("li", { key: patternId }, text);
+        }))));
+});
+CircularDependencyErrorPlaceholder.displayName = 'CircularDependencyErrorPlaceholder';
+
+const useComponent = ({ node, entityStore, areEntitiesFetched, resolveDesignValue, renderDropzone, userIsDragging, wrappingPatternIds, }) => {
+    const tree = useTreeStore((state) => state.tree);
+    const componentRegistration = useMemo(() => {
+        let registration = componentRegistry.get(node.data.blockId);
+        if (node.type === ASSEMBLY_NODE_TYPE && !registration) {
+            registration = createAssemblyRegistration({
+                definitionId: node.data.blockId,
+                component: Assembly,
+            });
+        }
+        if (!registration) {
+            console.warn(`Component registration not found for component with id: "${node.data.blockId}". The registered component might have been removed from the code. To proceed, remove the component manually from the layers tab.`);
+            return undefined;
+        }
+        return registration;
+    }, [node]);
+    const componentId = node.data.id;
+    const isPatternNode = node.type === ASSEMBLY_NODE_TYPE;
+    const isPatternComponent = node.type === ASSEMBLY_BLOCK_NODE_TYPE;
+    const parentComponentNode = getItem({ id: node.parentId }, tree);
+    const isNestedPattern = isPatternNode &&
+        [ASSEMBLY_BLOCK_NODE_TYPE, ASSEMBLY_NODE_TYPE].includes(parentComponentNode?.type ?? '');
+    const isStructureComponent = isContentfulStructureComponent(node.data.blockId);
+    const requiresDragWrapper = !isPatternNode && !isStructureComponent && !componentRegistration?.options?.wrapComponent;
+    const { componentProps, wrapperStyles } = useComponentProps({
+        node,
+        entityStore,
+        areEntitiesFetched,
+        resolveDesignValue,
+        renderDropzone,
+        definition: componentRegistration?.definition,
+        options: componentRegistration?.options,
+        userIsDragging,
+        requiresDragWrapper,
+    });
+    const elementToRender = (props) => {
+        const { dragProps = {} } = props || {};
+        const { children, innerRef, Tag = 'div', ToolTipAndPlaceholder, style, ...rest } = dragProps;
+        const { 'data-cf-node-block-id': dataCfNodeBlockId, 'data-cf-node-block-type': dataCfNodeBlockType, 'data-cf-node-id': dataCfNodeId, } = componentProps;
+        const refCallback = (refNode) => {
+            if (innerRef && refNode)
+                innerRef(refNode);
         };
-        // Only pass `editorMode` and `node` to structure components and assembly root nodes.
-        const isStructureComponent = isContentfulStructureComponent(node.data.blockId);
-        if (isStructureComponent) {
-            return {
-                ...sharedProps,
-                editorMode: true,
-                node,
-            };
+        if (!componentRegistration) {
+            return React.createElement(MissingComponentPlaceholder, { blockId: node.data.blockId });
+        }
+        if (node.data.blockId && wrappingPatternIds.has(node.data.blockId)) {
+            return (React.createElement(CircularDependencyErrorPlaceholder, { ref: refCallback, "data-cf-node-id": dataCfNodeId, "data-cf-node-block-id": dataCfNodeBlockId, "data-cf-node-block-type": dataCfNodeBlockType, wrappingPatternIds: wrappingPatternIds }));
         }
+        const element = React.createElement(ImportedComponentErrorBoundary, { componentId: node.data.blockId }, React.createElement(componentRegistration.component, {
+            ...componentProps,
+            dragProps,
+        }));
+        if (!requiresDragWrapper) {
+            return element;
+        }
+        return (React.createElement(Tag, { ...rest, style: { ...style, ...wrapperStyles }, ref: refCallback, "data-cf-node-id": dataCfNodeId, "data-cf-node-block-id": dataCfNodeBlockId, "data-cf-node-block-type": dataCfNodeBlockType },
+            ToolTipAndPlaceholder,
+            element));
+    };
+    return {
+        node,
+        parentComponentNode,
+        isAssembly: isPatternNode,
+        isPatternNode,
+        isPatternComponent,
+        isNestedPattern,
+        componentId,
+        elementToRender,
+        definition: componentRegistration?.definition,
+    };
+};
+
+const calcOffsetLeft = (parentElement, placeholderWidth, nodeWidth) => {
+    if (!parentElement) {
+        return 0;
+    }
+    const alignItems = window.getComputedStyle(parentElement).alignItems;
+    if (alignItems === 'center') {
+        return -(placeholderWidth - nodeWidth) / 2;
+    }
+    if (alignItems === 'end') {
+        return -placeholderWidth + nodeWidth + 2;
+    }
+    return 0;
+};
+const calcOffsetTop = (parentElement, placeholderHeight, nodeHeight) => {
+    if (!parentElement) {
+        return 0;
+    }
+    const alignItems = window.getComputedStyle(parentElement).alignItems;
+    if (alignItems === 'center') {
+        return -(placeholderHeight - nodeHeight) / 2;
+    }
+    if (alignItems === 'end') {
+        return -placeholderHeight + nodeHeight + 2;
+    }
+    return 0;
+};
+const getPaddingOffset = (element) => {
+    const paddingLeft = parseFloat(window.getComputedStyle(element).paddingLeft);
+    const paddingRight = parseFloat(window.getComputedStyle(element).paddingRight);
+    const paddingTop = parseFloat(window.getComputedStyle(element).paddingTop);
+    const paddingBottom = parseFloat(window.getComputedStyle(element).paddingBottom);
+    const horizontalOffset = paddingLeft + paddingRight;
+    const verticalOffset = paddingTop + paddingBottom;
+    return [horizontalOffset, verticalOffset];
+};
+/**
+ * Calculate the size and position of the dropzone indicator
+ * when dragging a new component onto the canvas
+ */
+const calcNewComponentStyles = (params) => {
+    const { destinationIndex, elementIndex, dropzoneElementId, id, direction, totalIndexes } = params;
+    const isEnd = destinationIndex === totalIndexes && elementIndex === totalIndexes - 1;
+    const isHorizontal = direction === 'horizontal';
+    const isRightAlign = isHorizontal && isEnd;
+    const isBottomAlign = !isHorizontal && isEnd;
+    const dropzone = document.querySelector(`[data-rfd-droppable-id="${dropzoneElementId}"]`);
+    const element = document.querySelector(`[data-ctfl-draggable-id="${id}"]`);
+    if (!dropzone || !element) {
+        return emptyStyles;
+    }
+    const elementSizes = element.getBoundingClientRect();
+    const dropzoneSizes = dropzone.getBoundingClientRect();
+    const [horizontalPadding, verticalPadding] = getPaddingOffset(dropzone);
+    const width = isHorizontal ? DRAGGABLE_WIDTH : dropzoneSizes.width - horizontalPadding;
+    const height = isHorizontal ? dropzoneSizes.height - verticalPadding : DRAGGABLE_HEIGHT;
+    const top = isHorizontal
+        ? calcOffsetTop(element.parentElement, height, elementSizes.height)
+        : -height;
+    const left = isHorizontal
+        ? -width
+        : calcOffsetLeft(element.parentElement, width, elementSizes.width);
+    return {
+        width,
+        height,
+        top: !isBottomAlign ? top : 'unset',
+        right: isRightAlign ? -width : 'unset',
+        bottom: isBottomAlign ? -height : 'unset',
+        left: !isRightAlign ? left : 'unset',
+    };
+};
+/**
+ * Calculate the size and position of the dropzone indicator
+ * when moving an existing component on the canvas
+ */
+const calcMovementStyles = (params) => {
+    const { destinationIndex, sourceIndex, destinationId, sourceId, elementIndex, dropzoneElementId, id, direction, totalIndexes, draggableId, } = params;
+    const isEnd = destinationIndex === totalIndexes && elementIndex === totalIndexes - 1;
+    const isHorizontal = direction === 'horizontal';
+    const isSameZone = destinationId === sourceId;
+    const isBelowSourceIndex = destinationIndex > sourceIndex;
+    const isRightAlign = isHorizontal && (isEnd || (isSameZone && isBelowSourceIndex));
+    const isBottomAlign = !isHorizontal && (isEnd || (isSameZone && isBelowSourceIndex));
+    const dropzone = document.querySelector(`[data-rfd-droppable-id="${dropzoneElementId}"]`);
+    const draggable = document.querySelector(`[data-rfd-draggable-id="${draggableId}"]`);
+    const element = document.querySelector(`[data-ctfl-draggable-id="${id}"]`);
+    if (!dropzone || !element || !draggable) {
+        return emptyStyles;
+    }
+    const elementSizes = element.getBoundingClientRect();
+    const dropzoneSizes = dropzone.getBoundingClientRect();
+    const draggableSizes = draggable.getBoundingClientRect();
+    const [horizontalPadding, verticalPadding] = getPaddingOffset(dropzone);
+    const width = isHorizontal ? draggableSizes.width : dropzoneSizes.width - horizontalPadding;
+    const height = isHorizontal ? dropzoneSizes.height - verticalPadding : draggableSizes.height;
+    const top = isHorizontal
+        ? calcOffsetTop(element.parentElement, height, elementSizes.height)
+        : -height;
+    const left = isHorizontal
+        ? -width
+        : calcOffsetLeft(element.parentElement, width, elementSizes.width);
+    return {
+        width,
+        height,
+        top: !isBottomAlign ? top : 'unset',
+        right: isRightAlign ? -width : 'unset',
+        bottom: isBottomAlign ? -height : 'unset',
+        left: !isRightAlign ? left : 'unset',
+    };
+};
+const emptyStyles = { width: 0, height: 0 };
+const calcPlaceholderStyles = (params) => {
+    const { isDraggingOver, sourceId } = params;
+    if (!isDraggingOver) {
+        return emptyStyles;
+    }
+    if (sourceId === COMPONENT_LIST_ID) {
+        return calcNewComponentStyles(params);
+    }
+    return calcMovementStyles(params);
+};
+const Placeholder = (props) => {
+    const sourceIndex = useDraggedItemStore((state) => state.draggedItem?.source.index) ?? -1;
+    const draggableId = useDraggedItemStore((state) => state.draggedItem?.draggableId) ?? '';
+    const sourceId = useDraggedItemStore((state) => state.draggedItem?.source.droppableId) ?? '';
+    const destinationIndex = useDraggedItemStore((state) => state.draggedItem?.destination?.index) ?? -1;
+    const destinationId = useDraggedItemStore((state) => state.draggedItem?.destination?.droppableId) ?? '';
+    const { elementIndex, totalIndexes, isDraggingOver } = props;
+    const isActive = destinationIndex === elementIndex;
+    const isEnd = destinationIndex === totalIndexes && elementIndex === totalIndexes - 1;
+    const isVisible = isEnd || isActive;
+    const isComponentList = destinationId === COMPONENT_LIST_ID;
+    return (!isComponentList &&
+        isDraggingOver &&
+        isVisible && (React.createElement("div", { style: {
+            ...calcPlaceholderStyles({
+                ...props,
+                sourceId,
+                sourceIndex,
+                destinationId,
+                destinationIndex,
+                draggableId,
+            }),
+            backgroundColor: 'rgba(var(--exp-builder-blue300-rgb), 0.5)',
+            position: 'absolute',
+            pointerEvents: 'none',
+        } })));
+};
+
+var css_248z$2 = ".styles-module_hitbox__i3wKV {\n  position: fixed;\n  pointer-events: all;\n}\n";
+var styles$2 = {"hitbox":"styles-module_hitbox__i3wKV"};
+styleInject(css_248z$2);
+
+const useZoneStore = create()((set) => ({
+    zones: {},
+    hoveringZone: '',
+    setHoveringZone(zoneId) {
+        set({
+            hoveringZone: zoneId,
+        });
+    },
+    upsertZone(id, data) {
+        set(produce((state) => {
+            state.zones[id] = { ...(state.zones[id] || {}), ...data };
+        }));
+    },
+}));
+
+const { WIDTH, HEIGHT, INITIAL_OFFSET, OFFSET_INCREMENT, MIN_HEIGHT, MIN_DEPTH_HEIGHT, DEEP_ZONE } = HITBOX;
+const calcOffsetDepth = (depth) => {
+    return INITIAL_OFFSET - OFFSET_INCREMENT * depth;
+};
+const getHitboxStyles = ({ direction, zoneDepth, domRect, scrollY, offsetRect, }) => {
+    if (!domRect) {
         return {
-            ...sharedProps,
-            // Allows custom components to render differently in the editor. This needs to be activated
-            // through options as the component has to be aware of this prop to not cause any React warnings.
-            ...(options?.enableCustomEditorView ? { isInExpEditorMode: true } : {}),
-            ...sanitizeNodeProps(props),
+            display: 'none',
         };
-    }, [cfCsrClassName, node, options?.enableCustomEditorView, props]);
-    return { componentProps };
+    }
+    const { width, height, top, left, bottom, right } = domRect;
+    const { height: offsetHeight, width: offsetWidth } = offsetRect || { height: 0, width: 0 };
+    const MAX_SELF_HEIGHT = DRAGGABLE_HEIGHT * 2;
+    const isDeepZone = zoneDepth > DEEP_ZONE;
+    const isAboveMaxHeight = height > MAX_SELF_HEIGHT;
+    switch (direction) {
+        case HitboxDirection.TOP:
+            return {
+                width,
+                height: HEIGHT,
+                top: top + offsetHeight - calcOffsetDepth(zoneDepth) - scrollY,
+                left,
+                zIndex: 100 + zoneDepth,
+            };
+        case HitboxDirection.BOTTOM:
+            return {
+                width,
+                height: HEIGHT,
+                top: bottom + offsetHeight + calcOffsetDepth(zoneDepth) - scrollY,
+                left,
+                zIndex: 100 + zoneDepth,
+            };
+        case HitboxDirection.LEFT:
+            return {
+                width: WIDTH,
+                height: height - HEIGHT,
+                left: left + offsetWidth - calcOffsetDepth(zoneDepth) - WIDTH / 2,
+                top: top + HEIGHT / 2 - scrollY,
+                zIndex: 100 + zoneDepth,
+            };
+        case HitboxDirection.RIGHT:
+            return {
+                width: WIDTH,
+                height: height - HEIGHT,
+                left: right + offsetWidth + calcOffsetDepth(zoneDepth) - WIDTH / 2,
+                top: top + HEIGHT / 2 - scrollY,
+                zIndex: 100 + zoneDepth,
+            };
+        case HitboxDirection.SELF_VERTICAL: {
+            if (isAboveMaxHeight && !isDeepZone) {
+                return { display: 'none' };
+            }
+            const selfHeight = isDeepZone ? MIN_DEPTH_HEIGHT : MIN_HEIGHT;
+            return {
+                width,
+                height: selfHeight,
+                left,
+                top: top + height / 2 - selfHeight / 2 - scrollY,
+                zIndex: 1000 + zoneDepth,
+            };
+        }
+        case HitboxDirection.SELF_HORIZONTAL: {
+            if (width > DRAGGABLE_WIDTH) {
+                return { display: 'none' };
+            }
+            return {
+                width: width - DRAGGABLE_WIDTH * 2,
+                height,
+                left: left + DRAGGABLE_WIDTH,
+                top: top - scrollY,
+                zIndex: 1000 + zoneDepth,
+            };
+        }
+        default:
+            return {};
+    }
 };
 
-function EditorBlock({ node, resolveDesignValue, wrappingPatternIds: parentWrappingPatternIds = new Set(), entityStore, areEntitiesFetched, }) {
-    const isRootAssemblyNode = node.type === ASSEMBLY_NODE_TYPE;
-    const wrappingPatternIds = useMemo(() => {
-        if (isRootAssemblyNode && node.data.blockId) {
-            return new Set([node.data.blockId, ...parentWrappingPatternIds]);
+const Hitboxes = ({ zoneId, parentZoneId, isEmptyZone }) => {
+    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 zones = useZoneStore((state) => state.zones);
+    const hoveringZone = useZoneStore((state) => state.hoveringZone);
+    const isHoveringZone = hoveringZone === zoneId;
+    const hitboxContainer = useMemo(() => {
+        return document.querySelector('[data-ctfl-hitboxes]');
+    }, []);
+    const domRect = useMemo(() => {
+        if (!isDraggingOnCanvas)
+            return;
+        return document.querySelector(`[${CTFL_ZONE_ID}="${zoneId}"]`)?.getBoundingClientRect();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [zoneId, isDraggingOnCanvas]);
+    // Use the size of the cloned dragging element to offset the position of the hitboxes
+    // So that when dragging causes a dropzone to expand, the hitboxes will be in the correct position
+    const offsetRect = useMemo(() => {
+        if (!isDraggingOnCanvas || isEmptyZone || !isHoveringZone)
+            return;
+        return document.querySelector(`[${CTFL_DRAGGING_ELEMENT}]`)?.getBoundingClientRect();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isEmptyZone, isHoveringZone, isDraggingOnCanvas]);
+    const zoneDirection = zones[parentZoneId]?.direction || 'vertical';
+    const isVertical = zoneDirection === 'vertical';
+    const isRoot = parentZoneId === ROOT_ID;
+    const { slotId: parentSlotId } = parseZoneId(parentZoneId);
+    const getStyles = useCallback((direction) => getHitboxStyles({
+        direction,
+        zoneDepth,
+        domRect,
+        scrollY,
+        offsetRect,
+    }), [zoneDepth, domRect, scrollY, offsetRect]);
+    const renderFinalRootHitbox = () => {
+        if (!isRoot)
+            return null;
+        return (React.createElement("div", { "data-ctfl-zone-id": parentZoneId, className: styles$2.hitbox, style: getStyles(HitboxDirection.BOTTOM) }));
+    };
+    const renderSurroundingHitboxes = () => {
+        if (isRoot || parentSlotId)
+            return null;
+        return (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) })));
+    };
+    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) }),
+        renderSurroundingHitboxes(),
+        renderFinalRootHitbox()));
+    if (!hitboxContainer) {
+        return null;
+    }
+    return createPortal(ActiveHitboxes, hitboxContainer);
+};
+
+const isRelativePreviewSize = (width) => {
+    // For now, we solely allow 100% as relative value
+    return width === '100%';
+};
+const getTooltipPositions = ({ previewSize, tooltipRect, coordinates, }) => {
+    if (!coordinates || !tooltipRect) {
+        return { display: 'none' };
+    }
+    /**
+     * By default, the tooltip floats to the left of the element
+     */
+    const newTooltipStyles = { display: 'flex' };
+    // If the preview size is relative, we don't change the floating direction
+    if (!isRelativePreviewSize(previewSize)) {
+        const previewSizeMatch = previewSize.match(/(\d{1,})px/);
+        if (!previewSizeMatch) {
+            return { display: 'none' };
+        }
+        const previewSizePx = parseInt(previewSizeMatch[1]);
+        /**
+         * If the element is at the right edge of the canvas, and the element isn't wide enough to fit the tooltip width,
+         * we float the tooltip to the right of the element.
+         */
+        if (tooltipRect.width > previewSizePx - coordinates.right &&
+            tooltipRect.width > coordinates.width) {
+            newTooltipStyles['float'] = 'right';
         }
-        return parentWrappingPatternIds;
-    }, [isRootAssemblyNode, node, parentWrappingPatternIds]);
-    const componentRegistration = useComponentRegistration(node);
-    if (!componentRegistration) {
-        return React.createElement(MissingComponentPlaceholder, { blockId: node.data.blockId });
-    }
-    if (isRootAssemblyNode && node.data.blockId && parentWrappingPatternIds.has(node.data.blockId)) {
-        return React.createElement(CircularDependencyErrorPlaceholder, { wrappingPatternIds: wrappingPatternIds });
-    }
-    const slotNodes = {};
-    for (const slotId in componentRegistration.definition.slots) {
-        const nodes = node.children.filter((child) => child.data.slotId === slotId);
-        slotNodes[slotId] =
-            nodes.length === 0 ? (React.createElement("div", { className: styles$1.emptySlot })) : (React.createElement(React.Fragment, null, nodes.map((slotChildNode) => (React.createElement(EditorBlock, { key: slotChildNode.data.id, node: slotChildNode, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds, entityStore: entityStore, areEntitiesFetched: areEntitiesFetched })))));
-    }
-    const children = componentRegistration.definition.children
-        ? node.children
-            .filter((node) => node.data.slotId === undefined)
-            .map((childNode) => (React.createElement(EditorBlock, { key: childNode.data.id, node: childNode, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds, entityStore: entityStore, areEntitiesFetched: areEntitiesFetched })))
-        : null;
-    return (React.createElement(RegistrationComponent, { node: node, resolveDesignValue: resolveDesignValue, componentRegistration: componentRegistration, slotNodes: slotNodes, entityStore: entityStore, areEntitiesFetched: areEntitiesFetched }, children));
+    }
+    const tooltipHeight = tooltipRect.height === 0 ? 32 : tooltipRect.height;
+    /**
+     * For elements with small heights, we don't want the tooltip covering the content in the element,
+     * so we show the tooltip at the top or bottom.
+     */
+    if (tooltipHeight * 2 > coordinates.height) {
+        /**
+         * If there's enough space for the tooltip at the top of the element, we show the tooltip at the top of the element,
+         * else we show the tooltip at the bottom.
+         */
+        if (tooltipHeight < coordinates.top) {
+            newTooltipStyles['bottom'] = coordinates.height;
+        }
+        else {
+            newTooltipStyles['top'] = coordinates.height;
+        }
+    }
+    /**
+     * If the component draws outside of the borders of the canvas to the left we move the tooltip to the right
+     * so that it is fully visible.
+     */
+    if (coordinates.left < 0) {
+        newTooltipStyles['left'] = -coordinates.left;
+    }
+    /**
+     * If for any reason, the element's top is negative, we show the tooltip at the bottom
+     */
+    if (coordinates.top < 0) {
+        newTooltipStyles['top'] = coordinates.height;
+    }
+    return newTooltipStyles;
+};
+
+var css_248z$1 = ".styles-module_DraggableComponent__oyE7Q,\n.styles-module_Dropzone__3R-sm:not(.styles-module_isSlot__HI9yO) {\n  position: relative;\n  transition: background-color 0.2s;\n  pointer-events: all;\n  box-sizing: border-box;\n  cursor: grab;\n}\n\n.styles-module_DraggableComponent__oyE7Q:before,\n.styles-module_Dropzone__3R-sm:not(.styles-module_isSlot__HI9yO):before {\n  content: '';\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  outline-offset: -2px;\n  outline: 2px solid transparent;\n  z-index: 1;\n  transition: outline 0.2s;\n  pointer-events: none;\n}\n\n.styles-module_DraggableComponent__oyE7Q.styles-module_isDragging__hldL4.styles-module_Dropzone__3R-sm:before {\n  outline-offset: -1px;\n}\n\n.styles-module_DraggableComponent__oyE7Q.styles-module_isDragging__hldL4.styles-module_Dropzone__3R-sm {\n  pointer-events: all;\n}\n\n.styles-module_Dropzone__3R-sm.styles-module_fullHeight__afMfT {\n  height: 100%;\n}\n\n.styles-module_Dropzone__3R-sm.styles-module_fullWidth__Od117 {\n  width: 100%;\n}\n\n.styles-module_isRoot__c-c-x,\n.styles-module_isEmptyCanvas__Mm6Al {\n  flex: 1;\n}\n\n.styles-module_isEmptyZone__XZ1Ej {\n  min-height: 80px;\n  min-width: 80px;\n}\n\n.styles-module_isDragging__hldL4:not(.styles-module_isRoot__c-c-x):not(.styles-module_DraggableClone__CdKIH):before {\n  outline: 2px dashed var(--exp-builder-gray300);\n}\n\n.styles-module_Dropzone__3R-sm.styles-module_isDestination__sE70P:not(.styles-module_isRoot__c-c-x):before {\n  transition:\n    outline 0.2s,\n    background-color 0.2s;\n  outline: 2px dashed var(--exp-builder-blue400);\n  background-color: rgba(var(--exp-builder-blue100-rgb), 0.5);\n  z-index: 2;\n}\n\n.styles-module_DraggableClone__CdKIH:before {\n  outline: 2px solid var(--exp-builder-blue500);\n}\n\n.styles-module_DropzoneClone__xiT8j,\n.styles-module_DraggableClone__CdKIH,\n.styles-module_DropzoneClone__xiT8j *,\n.styles-module_DraggableClone__CdKIH * {\n  pointer-events: none !important;\n}\n\n.styles-module_DraggableComponent__oyE7Q:not(.styles-module_isDragging__hldL4) :not(.styles-module_DraggableComponent__oyE7Q) {\n  pointer-events: none;\n}\n\n.styles-module_isDraggingThisComponent__yCZTp {\n  overflow: hidden;\n}\n\n.styles-module_isSelected__c2QEJ:before {\n  outline: 2px solid transparent !important;\n}\n\n.styles-module_tooltipWrapper__kqvmR {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  z-index: 10;\n  pointer-events: none;\n}\n\n.styles-module_DraggableComponent__oyE7Q.styles-module_isDragging__hldL4 .styles-module_tooltipWrapper__kqvmR {\n  display: none;\n}\n\n.styles-module_overlay__knwhE {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  min-width: max-content;\n  height: 24px;\n  z-index: 2;\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  padding: 4px 12px 4px 12px;\n  transition: opacity 0.1s;\n  opacity: 0;\n  text-wrap: nowrap;\n}\n\n.styles-module_overlayContainer__lUsiC {\n  opacity: 0;\n}\n\n.styles-module_overlayAssembly__3BKl4 {\n  background-color: var(--exp-builder-purple600);\n}\n\n.styles-module_isDragging__hldL4 > .styles-module_overlay__knwhE,\n.styles-module_isDragging__hldL4 > .styles-module_overlayContainer__lUsiC {\n  opacity: 0 !important;\n}\n\n.styles-module_isDragging__hldL4:not(.styles-module_Dropzone__3R-sm):before {\n  outline: 2px solid transparent !important;\n}\n\n.styles-module_isHoveringComponent__f7G5m > div > .styles-module_overlay__knwhE,\n.styles-module_DraggableComponent__oyE7Q:hover:not(:has(.styles-module_DraggableComponent__oyE7Q:hover)) > div > .styles-module_overlay__knwhE {\n  opacity: 1;\n}\n\n/* hovering related component in layers tab */\n\n.styles-module_DraggableComponent__oyE7Q:has(.styles-module_isHoveringComponent__f7G5m):not(.styles-module_isAssemblyBlock__goT9z):before,\n.styles-module_DraggableComponent__oyE7Q:has(.styles-module_isHoveringComponent__f7G5m):not(.styles-module_isAssemblyBlock__goT9z) .styles-module_DraggableComponent__oyE7Q:not(.styles-module_isHoveringComponent__f7G5m):not(.styles-module_isAssemblyBlock__goT9z):before,\n.styles-module_isHoveringComponent__f7G5m:not(.styles-module_isAssemblyBlock__goT9z) .styles-module_DraggableComponent__oyE7Q:not(.styles-module_isAssemblyBlock__goT9z):before,\n\n.styles-module_DraggableComponent__oyE7Q:not(.styles-module_isAssemblyBlock__goT9z):not(.styles-module_isDragging__hldL4):hover:before,\n.styles-module_DraggableComponent__oyE7Q:not(.styles-module_isDragging__hldL4):hover .styles-module_DraggableComponent__oyE7Q:before {\n  outline: 2px dashed var(--exp-builder-gray500);\n}\n\n/* hovering component in layers tab */\n\n.styles-module_isHoveringComponent__f7G5m:not(.styles-module_isAssemblyBlock__goT9z):before,\n\n.styles-module_DraggableComponent__oyE7Q:not(.styles-module_isAssemblyBlock__goT9z):not(.styles-module_isDragging__hldL4):hover:not(:has(.styles-module_DraggableComponent__oyE7Q:hover)):before {\n  outline: 2px solid var(--exp-builder-gray500);\n}\n\n/* hovering related pattern in layers tab */\n\n.styles-module_isAssemblyBlock__goT9z:has(.styles-module_isHoveringComponent__f7G5m):before,\n.styles-module_isAssemblyBlock__goT9z:has(.styles-module_isHoveringComponent__f7G5m) .styles-module_isAssemblyBlock__goT9z:not(.styles-module_isHoveringComponent__f7G5m):before,\n.styles-module_isHoveringComponent__f7G5m .styles-module_isAssemblyBlock__goT9z:before,\n\n.styles-module_isAssemblyBlock__goT9z:hover:before,\n.styles-module_isAssemblyBlock__goT9z:hover .styles-module_DraggableComponent__oyE7Q:before,\n.styles-module_DraggableComponent__oyE7Q:not(.styles-module_isDragging__hldL4):hover .styles-module_isAssemblyBlock__goT9z:before {\n  outline: 2px dashed var(--exp-builder-purple600);\n}\n\n/* hovering pattern in layers tab */\n\n.styles-module_isAssemblyBlock__goT9z.styles-module_isHoveringComponent__f7G5m:before,\n\n.styles-module_isAssemblyBlock__goT9z:hover:not(:has(.styles-module_DraggableComponent__oyE7Q:hover)):before {\n  outline: 2px solid var(--exp-builder-purple600);\n}\n";
+var styles$1 = {"DraggableComponent":"styles-module_DraggableComponent__oyE7Q","Dropzone":"styles-module_Dropzone__3R-sm","isSlot":"styles-module_isSlot__HI9yO","isDragging":"styles-module_isDragging__hldL4","fullHeight":"styles-module_fullHeight__afMfT","fullWidth":"styles-module_fullWidth__Od117","isRoot":"styles-module_isRoot__c-c-x","isEmptyCanvas":"styles-module_isEmptyCanvas__Mm6Al","isEmptyZone":"styles-module_isEmptyZone__XZ1Ej","DraggableClone":"styles-module_DraggableClone__CdKIH","isDestination":"styles-module_isDestination__sE70P","DropzoneClone":"styles-module_DropzoneClone__xiT8j","isDraggingThisComponent":"styles-module_isDraggingThisComponent__yCZTp","isSelected":"styles-module_isSelected__c2QEJ","tooltipWrapper":"styles-module_tooltipWrapper__kqvmR","overlay":"styles-module_overlay__knwhE","overlayContainer":"styles-module_overlayContainer__lUsiC","overlayAssembly":"styles-module_overlayAssembly__3BKl4","isHoveringComponent":"styles-module_isHoveringComponent__f7G5m","isAssemblyBlock":"styles-module_isAssemblyBlock__goT9z"};
+styleInject(css_248z$1);
+
+const Tooltip = ({ coordinates, id, label, isAssemblyBlock, isContainer, isSelected, }) => {
+    const tooltipRef = useRef(null);
+    const previewSize = '100%'; // This should be based on breakpoints and added to usememo dependency array
+    const tooltipStyles = useMemo(() => {
+        const tooltipRect = tooltipRef.current?.getBoundingClientRect();
+        const draggableRect = document
+            .querySelector(`[data-ctfl-draggable-id="${id}"]`)
+            ?.getBoundingClientRect();
+        const newTooltipStyles = getTooltipPositions({
+            previewSize,
+            tooltipRect,
+            coordinates: draggableRect,
+        });
+        return newTooltipStyles;
+        // Ignore eslint because we intentionally want to trigger this whenever a user clicks on a container/component which is tracked by these coordinates of the component being clicked being changed
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [coordinates, id, tooltipRef.current]);
+    if (isSelected) {
+        return null;
+    }
+    return (React.createElement("div", { "data-tooltip": true, className: styles$1.tooltipWrapper },
+        React.createElement("div", { "data-tooltip": true, ref: tooltipRef, style: tooltipStyles, className: classNames(styles$1.overlay, {
+                [styles$1.overlayContainer]: isContainer,
+                [styles$1.overlayAssembly]: isAssemblyBlock,
+            }) }, label)));
+};
+
+function useSingleColumn(node, resolveDesignValue) {
+    const tree = useTreeStore((store) => store.tree);
+    const isSingleColumn = node.data.blockId === CONTENTFUL_COMPONENTS$1.singleColumn.id;
+    const isWrapped = useMemo(() => {
+        if (!node.parentId || !isSingleColumn) {
+            return false;
+        }
+        const parentNode = getItem({ id: node.parentId }, tree);
+        if (!parentNode || parentNode.data.blockId !== CONTENTFUL_COMPONENTS$1.columns.id) {
+            return false;
+        }
+        const { cfWrapColumns } = parentNode.data.props;
+        if (cfWrapColumns?.type !== 'DesignValue') {
+            return false;
+        }
+        return resolveDesignValue(cfWrapColumns.valuesByBreakpoint);
+    }, [tree, node, isSingleColumn, resolveDesignValue]);
+    return {
+        isSingleColumn,
+        isWrapped,
+    };
 }
-const RegistrationComponent = ({ node, resolveDesignValue, componentRegistration, slotNodes, children, entityStore, areEntitiesFetched, }) => {
-    const { componentProps } = useComponentProps({
-        node,
-        resolveDesignValue,
-        definition: componentRegistration.definition,
-        options: componentRegistration.options,
+
+function getStyle$1(style, snapshot) {
+    if (!snapshot.isDropAnimating) {
+        return style;
+    }
+    return {
+        ...style,
+        // cannot be 0, but make it super tiny
+        transitionDuration: `0.001s`,
+    };
+}
+const EditorBlock = ({ node: rawNode, entityStore, areEntitiesFetched, resolveDesignValue, renderDropzone, index, zoneId, userIsDragging, placeholder, wrappingPatternIds, }) => {
+    const { slotId } = parseZoneId(zoneId);
+    const ref = useRef(null);
+    const setSelectedNodeId = useEditorStore((state) => state.setSelectedNodeId);
+    const selectedNodeId = useEditorStore((state) => state.selectedNodeId);
+    const { node, componentId, elementToRender, definition, isPatternNode, isPatternComponent, isNestedPattern, } = useComponent({
+        node: rawNode,
         entityStore,
         areEntitiesFetched,
+        resolveDesignValue,
+        renderDropzone,
+        userIsDragging,
+        wrappingPatternIds,
+    });
+    const { isSingleColumn, isWrapped } = useSingleColumn(node, resolveDesignValue);
+    const setDomRect = useDraggedItemStore((state) => state.setDomRect);
+    const isHoveredComponent = useDraggedItemStore((state) => state.hoveredComponentId === componentId);
+    const coordinates = useSelectedInstanceCoordinates({ node });
+    const displayName = node.data.displayName || rawNode.data.displayName || definition?.name;
+    const testId = `draggable-${node.data.blockId ?? 'node'}`;
+    const isSelected = node.data.id === selectedNodeId;
+    const isContainer = node.data.blockId === CONTENTFUL_COMPONENTS$1.container.id;
+    const isSlotComponent = Boolean(node.data.slotId);
+    const isDragDisabled = isNestedPattern || isPatternComponent || (isSingleColumn && isWrapped) || isSlotComponent;
+    const isEmptyZone = useMemo(() => {
+        return !node.children.filter((node) => node.data.slotId === slotId).length;
+    }, [node.children, slotId]);
+    useDraggablePosition({
+        draggableId: componentId,
+        draggableRef: ref,
+        position: DraggablePosition.MOUSE_POSITION,
     });
-    return React.createElement(ImportedComponentErrorBoundary, { componentId: node.data.blockId }, React.createElement(componentRegistration.component, { ...componentProps, ...slotNodes }, children));
+    const onClick = (e) => {
+        e.stopPropagation();
+        if (!userIsDragging) {
+            setSelectedNodeId(node.data.id);
+            // if it is the assembly directly we just want to select it as a normal component
+            if (isPatternNode) {
+                sendMessage(OUTGOING_EVENTS.ComponentSelected, {
+                    nodeId: node.data.id,
+                });
+                return;
+            }
+            sendMessage(OUTGOING_EVENTS.ComponentSelected, {
+                assembly: node.data.assembly,
+                nodeId: node.data.id,
+            });
+        }
+    };
+    const onMouseOver = (e) => {
+        e.stopPropagation();
+        if (userIsDragging)
+            return;
+        sendMessage(OUTGOING_EVENTS.NewHoveredElement, {
+            nodeId: componentId,
+        });
+    };
+    const onMouseDown = (e) => {
+        if (isDragDisabled) {
+            return;
+        }
+        e.stopPropagation();
+        setDomRect(e.currentTarget.getBoundingClientRect());
+    };
+    const ToolTipAndPlaceholder = (React.createElement(React.Fragment, null,
+        React.createElement(Tooltip, { id: componentId, coordinates: coordinates, isAssemblyBlock: isPatternNode || isPatternComponent, isContainer: isContainer, isSelected: isSelected, label: displayName || 'No label specified' }),
+        React.createElement(Placeholder, { ...placeholder, id: componentId }),
+        userIsDragging && !isPatternComponent && (React.createElement(Hitboxes, { parentZoneId: zoneId, zoneId: componentId, isEmptyZone: isEmptyZone }))));
+    return (React.createElement(Draggable, { key: componentId, draggableId: componentId, index: index, isDragDisabled: isDragDisabled, disableInteractiveElementBlocking: true }, (provided, snapshot) => elementToRender({
+        dragProps: {
+            ...provided.draggableProps,
+            ...provided.dragHandleProps,
+            'data-ctfl-draggable-id': componentId,
+            'data-test-id': testId,
+            innerRef: (refNode) => {
+                provided?.innerRef(refNode);
+                ref.current = refNode;
+            },
+            className: classNames(styles$1.DraggableComponent, {
+                [styles$1.isAssemblyBlock]: isPatternComponent || isPatternNode,
+                [styles$1.isDragging]: snapshot?.isDragging || userIsDragging,
+                [styles$1.isSelected]: isSelected,
+                [styles$1.isHoveringComponent]: isHoveredComponent,
+            }),
+            style: getStyle$1(provided.draggableProps.style, snapshot),
+            onMouseDown,
+            onMouseOver,
+            onClick,
+            ToolTipAndPlaceholder,
+        },
+    })));
 };
 
-var css_248z = ".EmptyCanvasMessage-module_empty-canvas-container__7K-0l {\n  height: 200px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  flex-direction: row;\n  transition: all 0.2s;\n  color: var(--exp-builder-gray400);\n  font-size: var(--exp-builder-font-size-l);\n  font-family: var(--exp-builder-font-stack-primary);\n  outline: 2px dashed var(--exp-builder-gray400);\n  outline-offset: -2px;\n}\n\n.EmptyCanvasMessage-module_empty-canvas-icon__EztFr rect {\n  fill: var(--exp-builder-gray400);\n}\n\n.EmptyCanvasMessage-module_empty-canvas-label__cbIrR {\n  margin-left: var(--exp-builder-spacing-s);\n}\n";
-var styles = {"empty-canvas-container":"EmptyCanvasMessage-module_empty-canvas-container__7K-0l","empty-canvas-icon":"EmptyCanvasMessage-module_empty-canvas-icon__EztFr","empty-canvas-label":"EmptyCanvasMessage-module_empty-canvas-label__cbIrR"};
+var css_248z = ".EmptyContainer-module_container__XPH5b {\n  height: 200px;\n  display: flex;\n  width: 100%;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n  flex-direction: row;\n  transition: all 0.2s;\n  color: var(--exp-builder-gray400);\n  font-size: var(--exp-builder-font-size-l);\n  font-family: var(--exp-builder-font-stack-primary);\n  outline: 2px dashed var(--exp-builder-gray400);\n  outline-offset: -2px;\n}\n\n.EmptyContainer-module_highlight__lcICy:hover {\n  outline: 2px dashed var(--exp-builder-blue500);\n  background-color: rgba(var(--exp-builder-blue100-rgb), 0.5);\n  cursor: grabbing;\n}\n\n.EmptyContainer-module_icon__82-2O rect {\n  fill: var(--exp-builder-gray400);\n}\n\n.EmptyContainer-module_label__4TxRa {\n  margin-left: var(--exp-builder-spacing-s);\n}\n";
+var styles = {"container":"EmptyContainer-module_container__XPH5b","highlight":"EmptyContainer-module_highlight__lcICy","icon":"EmptyContainer-module_icon__82-2O","label":"EmptyContainer-module_label__4TxRa"};
 styleInject(css_248z);
 
-const EmptyCanvasMessage = () => {
-    return (React.createElement("div", { className: styles['empty-canvas-container'], "data-type": "empty-container" },
-        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "37", height: "36", fill: "none", className: styles['empty-canvas-icon'] },
+const EmptyContainer = ({ isDragging }) => {
+    return (React.createElement("div", { className: classNames(styles.container, {
+            [styles.highlight]: isDragging,
+        }), "data-type": "empty-container" },
+        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "37", height: "36", fill: "none", className: styles.icon },
             React.createElement("rect", { width: "11.676", height: "11.676", x: "18.512", y: ".153", rx: "1.621", transform: "rotate(45 18.512 .153)" }),
             React.createElement("rect", { width: "11.676", height: "11.676", x: "9.254", y: "9.139", rx: "1.621", transform: "rotate(45 9.254 9.139)" }),
             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['empty-canvas-label'] }, "Add components to begin")));
+        React.createElement("span", { className: styles.label }, "Add components to begin")));
 };
 
-/**
- * This function gets the element co-ordinates of a specified component in the DOM and its parent
- * and sends the DOM Rect to the client app.
- */
-const sendCanvasGeometryUpdatedMessage = async (tree, sourceEvent) => {
-    const nodeToCoordinatesMap = {};
-    await waitForAllImagesToBeLoaded();
-    collectNodeCoordinates(tree.root, nodeToCoordinatesMap);
-    sendMessage(OUTGOING_EVENTS.CanvasGeometryUpdated, {
-        size: {
-            width: document.documentElement.offsetWidth,
-            height: document.documentElement.offsetHeight,
+const useDropzoneDirection = ({ resolveDesignValue, node, zoneId }) => {
+    const zone = useZoneStore((state) => state.zones);
+    const upsertZone = useZoneStore((state) => state.upsertZone);
+    useEffect(() => {
+        function getDirection() {
+            if (!node || !node.data.blockId) {
+                return 'vertical';
+            }
+            if (!isContentfulStructureComponent(node.data.blockId)) {
+                return 'vertical';
+            }
+            if (node.data.blockId === CONTENTFUL_COMPONENTS$1.columns.id) {
+                return 'horizontal';
+            }
+            const designValues = node.data.props['cfFlexDirection'];
+            if (!designValues || !resolveDesignValue || designValues.type !== 'DesignValue') {
+                return 'vertical';
+            }
+            const direction = resolveDesignValue(designValues.valuesByBreakpoint);
+            if (direction === 'row') {
+                return 'horizontal';
+            }
+            return 'vertical';
+        }
+        upsertZone(zoneId, { direction: getDirection() });
+    }, [node, resolveDesignValue, zoneId, upsertZone]);
+    return zone[zoneId]?.direction || 'vertical';
+};
+
+function getStyle(style = {}, snapshot) {
+    if (!snapshot?.isDropAnimating) {
+        return style;
+    }
+    return {
+        ...style,
+        // cannot be 0, but make it super tiny
+        transitionDuration: `0.001s`,
+    };
+}
+const EditorBlockClone = ({ node: rawNode, entityStore, areEntitiesFetched, resolveDesignValue, snapshot, provided, renderDropzone, wrappingPatternIds, }) => {
+    const userIsDragging = useDraggedItemStore((state) => state.isDraggingOnCanvas);
+    const { node, elementToRender } = useComponent({
+        node: rawNode,
+        entityStore,
+        areEntitiesFetched,
+        resolveDesignValue,
+        renderDropzone,
+        userIsDragging,
+        wrappingPatternIds,
+    });
+    const isAssemblyBlock = node.type === ASSEMBLY_BLOCK_NODE_TYPE;
+    return elementToRender({
+        dragProps: {
+            ...provided?.draggableProps,
+            ...provided?.dragHandleProps,
+            'data-ctfl-dragging-element': 'true',
+            innerRef: provided?.innerRef,
+            className: classNames(styles$1.DraggableComponent, styles$1.DraggableClone, {
+                [styles$1.isAssemblyBlock]: isAssemblyBlock,
+                [styles$1.isDragging]: snapshot?.isDragging,
+            }),
+            style: getStyle(provided?.draggableProps.style, snapshot),
         },
-        nodes: nodeToCoordinatesMap,
-        sourceEvent,
     });
 };
-const collectNodeCoordinates = (node, nodeToCoordinatesMap) => {
-    const selectedElement = document.querySelector(`[data-cf-node-id="${node.data.id}"]`);
-    if (selectedElement) {
-        const rect = getElementCoordinates(selectedElement);
-        if (isElementHidden(rect)) {
+
+const getHtmlDragProps = (dragProps) => {
+    if (dragProps) {
+        const { ToolTipAndPlaceholder, Tag, innerRef, wrapComponent, ...htmlDragProps } = dragProps;
+        return htmlDragProps;
+    }
+    return {};
+};
+const getHtmlComponentProps = (props) => {
+    if (props) {
+        const { editorMode, renderDropzone, node, ...htmlProps } = props;
+        return htmlProps;
+    }
+    return {};
+};
+
+function DropzoneClone({ node, entityStore, zoneId, resolveDesignValue, WrapperComponent = 'div', renderDropzone, dragProps, wrappingPatternIds, areEntitiesFetched, ...rest }) {
+    const tree = useTreeStore((state) => state.tree);
+    const content = node?.children || tree.root?.children || [];
+    const { slotId } = parseZoneId(zoneId);
+    const htmlDraggableProps = getHtmlDragProps(dragProps);
+    const htmlProps = getHtmlComponentProps(rest);
+    const isRootZone = zoneId === ROOT_ID;
+    if (!resolveDesignValue) {
+        return null;
+    }
+    return (React.createElement(WrapperComponent, { ...htmlDraggableProps, ...htmlProps, className: classNames(dragProps?.className, styles$1.Dropzone, styles$1.DropzoneClone, rest.className, {
+            [styles$1.isRoot]: isRootZone,
+            [styles$1.isEmptyZone]: !content.length,
+        }), "data-ctfl-slot-id": slotId, ref: (refNode) => {
+            if (dragProps?.innerRef) {
+                dragProps.innerRef(refNode);
+            }
+        } }, content
+        .filter((node) => node.data.slotId === slotId)
+        .map((item) => {
+        const componentId = item.data.id;
+        return (React.createElement(EditorBlockClone, { entityStore: entityStore, areEntitiesFetched: areEntitiesFetched, key: componentId, node: item, resolveDesignValue: resolveDesignValue, renderDropzone: renderDropzone, wrappingPatternIds: wrappingPatternIds }));
+    })));
+}
+
+function Dropzone({ node, zoneId, resolveDesignValue, className, WrapperComponent = 'div', dragProps, entityStore, areEntitiesFetched, wrappingPatternIds: parentWrappingPatternIds = new Set(), ...rest }) {
+    const userIsDragging = useDraggedItemStore((state) => state.isDraggingOnCanvas);
+    const draggedItem = useDraggedItemStore((state) => state.draggedItem);
+    const isDraggingNewComponent = useDraggedItemStore((state) => Boolean(state.componentId));
+    const isHoveringZone = useZoneStore((state) => state.hoveringZone === zoneId);
+    const tree = useTreeStore((state) => state.tree);
+    const content = node?.children || tree.root?.children || [];
+    const { slotId } = parseZoneId(zoneId);
+    const direction = useDropzoneDirection({ resolveDesignValue, node, zoneId });
+    const draggedDestinationId = draggedItem && draggedItem.destination?.droppableId;
+    const draggedNode = useMemo(() => {
+        if (!draggedItem)
             return;
+        return getItem({ id: draggedItem.draggableId }, tree);
+    }, [draggedItem, tree]);
+    const isRootZone = zoneId === ROOT_ID;
+    const isDestination = draggedDestinationId === zoneId;
+    const isEmptyCanvas = isRootZone && !content.length;
+    const isAssembly = ASSEMBLY_NODE_TYPES.includes(node?.type || '');
+    const isRootAssembly = node?.type === ASSEMBLY_NODE_TYPE;
+    const htmlDraggableProps = getHtmlDragProps(dragProps);
+    const htmlProps = getHtmlComponentProps(rest);
+    const wrappingPatternIds = useMemo(() => {
+        // On the top level, the node is not defined. If the root blockId is not the default string,
+        // we assume that it is the entry ID of the experience/ pattern to properly detect circular dependencies
+        if (!node && tree.root.data.blockId && tree.root.data.blockId !== ROOT_ID) {
+            return new Set([tree.root.data.blockId, ...parentWrappingPatternIds]);
         }
-        nodeToCoordinatesMap[node.data.id] = {
-            coordinates: {
-                x: rect.x + window.scrollX,
-                y: rect.y + window.scrollY,
-                width: rect.width,
-                height: rect.height,
-            },
-        };
+        if (isRootAssembly && node?.data.blockId) {
+            return new Set([node.data.blockId, ...parentWrappingPatternIds]);
+        }
+        return parentWrappingPatternIds;
+    }, [isRootAssembly, node, parentWrappingPatternIds, tree.root.data.blockId]);
+    // 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, entityStore: entityStore, node: node, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds, areEntitiesFetched: areEntitiesFetched, ...props }));
+    }, [wrappingPatternIds, resolveDesignValue, entityStore, areEntitiesFetched]);
+    const renderClonedDropzone = useCallback((node, props) => {
+        return (React.createElement(DropzoneClone, { entityStore: entityStore, areEntitiesFetched: areEntitiesFetched, zoneId: node.data.id, node: node, resolveDesignValue: resolveDesignValue, renderDropzone: renderClonedDropzone, wrappingPatternIds: wrappingPatternIds, ...props }));
+    }, [resolveDesignValue, wrappingPatternIds, entityStore, areEntitiesFetched]);
+    const isDropzoneEnabled = useMemo(() => {
+        const isColumns = node?.data.blockId === CONTENTFUL_COMPONENTS$1.columns.id;
+        const isDraggingSingleColumn = draggedNode?.data.blockId === CONTENTFUL_COMPONENTS$1.singleColumn.id;
+        const isParentOfDraggedNode = node?.data.id === draggedNode?.parentId;
+        // If dragging a single column, only enable the dropzone of the parent
+        // columns component
+        if (isDraggingSingleColumn && isColumns && isParentOfDraggedNode) {
+            return true;
+        }
+        // If dragging a single column, disable dropzones for any component besides
+        // the parent of the dragged single column
+        if (isDraggingSingleColumn && !isParentOfDraggedNode) {
+            return false;
+        }
+        // Disable dropzone for Columns component
+        if (isColumns) {
+            return false;
+        }
+        // Disable dropzone for Assembly
+        if (isAssembly) {
+            return false;
+        }
+        // Enable dropzone for the non-root hovered zones if component is not allowed on root
+        if (!isDraggingNewComponent &&
+            !isComponentAllowedOnRoot({ type: draggedNode?.type, componentId: draggedNode?.data.blockId })) {
+            return isHoveringZone && !isRootZone;
+        }
+        // Enable dropzone for the hovered zone only
+        return isHoveringZone;
+    }, [isAssembly, isHoveringZone, isRootZone, isDraggingNewComponent, draggedNode, node]);
+    if (!resolveDesignValue) {
+        return null;
     }
-    node.children.forEach((child) => collectNodeCoordinates(child, nodeToCoordinatesMap));
-};
-const waitForAllImagesToBeLoaded = () => {
-    // If the document contains an image, wait for this image to be loaded before collecting & sending all geometry data.
-    const allImageNodes = document.querySelectorAll('img');
-    return Promise.all(Array.from(allImageNodes).map((imageNode) => {
-        if (imageNode.complete) {
-            return Promise.resolve();
-        }
-        return new Promise((resolve, reject) => {
-            const handleImageLoad = (event) => {
-                imageNode.removeEventListener('load', handleImageLoad);
-                imageNode.removeEventListener('error', handleImageLoad);
-                if (event.type === 'error') {
-                    console.warn('Image failed to load:', imageNode);
-                    reject();
+    const isPatternWrapperComponentFullHeight = isRootAssembly
+        ? node.children.length === 1 &&
+            resolveDesignValue(node?.children[0]?.data.props.cfHeight?.valuesByBreakpoint ?? {}, 'cfHeight') === '100%'
+        : false;
+    const isPatternWrapperComponentFullWidth = isRootAssembly
+        ? node.children.length === 1 &&
+            resolveDesignValue(node?.children[0]?.data.props.cfWidth?.valuesByBreakpoint ?? {}, 'cfWidth') === '100%'
+        : false;
+    return (React.createElement(Droppable, { droppableId: zoneId, direction: direction, isDropDisabled: !isDropzoneEnabled, renderClone: (provided, snapshot, rubic) => (React.createElement(EditorBlockClone, { entityStore: entityStore, areEntitiesFetched: areEntitiesFetched, node: content[rubic.source.index], resolveDesignValue: resolveDesignValue, provided: provided, snapshot: snapshot, renderDropzone: renderClonedDropzone, wrappingPatternIds: wrappingPatternIds })) }, (provided, snapshot) => {
+        return (React.createElement(WrapperComponent, { ...(provided || { droppableProps: {} }).droppableProps, ...htmlDraggableProps, ...htmlProps, ref: (refNode) => {
+                if (dragProps?.innerRef) {
+                    dragProps.innerRef(refNode);
                 }
-                else {
-                    resolve();
-                }
-            };
-            imageNode.addEventListener('load', handleImageLoad);
-            imageNode.addEventListener('error', handleImageLoad);
-        });
+                provided?.innerRef(refNode);
+            }, id: zoneId, "data-ctfl-zone-id": zoneId, "data-ctfl-slot-id": slotId, className: classNames(dragProps?.className, styles$1.Dropzone, className, {
+                [styles$1.isEmptyCanvas]: isEmptyCanvas,
+                [styles$1.isDragging]: userIsDragging,
+                [styles$1.isDestination]: isDestination && !isAssembly,
+                [styles$1.isRoot]: isRootZone,
+                [styles$1.isEmptyZone]: !content.length,
+                [styles$1.isSlot]: Boolean(slotId),
+                [styles$1.fullHeight]: isPatternWrapperComponentFullHeight,
+                [styles$1.fullWidth]: isPatternWrapperComponentFullWidth,
+            }) },
+            isEmptyCanvas ? (React.createElement(EmptyContainer, { isDragging: isRootZone && userIsDragging })) : (content
+                .filter((node) => node.data.slotId === slotId)
+                .map((item, i) => (React.createElement(EditorBlock, { entityStore: entityStore, areEntitiesFetched: areEntitiesFetched, placeholder: {
+                    isDraggingOver: snapshot?.isDraggingOver,
+                    totalIndexes: content.length,
+                    elementIndex: i,
+                    dropzoneElementId: zoneId,
+                    direction,
+                }, index: i, zoneId: zoneId, key: item.data.id, userIsDragging: userIsDragging, draggingNewComponent: isDraggingNewComponent, node: item, resolveDesignValue: resolveDesignValue, renderDropzone: renderDropzone, wrappingPatternIds: wrappingPatternIds })))),
+            provided?.placeholder,
+            dragProps?.ToolTipAndPlaceholder));
     }));
-};
+}
 
-const useCanvasGeometryUpdates = ({ tree }) => {
-    const debouncedUpdateGeometry = useMemo(() => debounce((tree, sourceEvent) => {
-        // When the DOM changed, we still need to wait for the next frame to ensure that
-        // rendering is complete (e.g. this is required when deleting a node).
-        window.requestAnimationFrame(() => {
-            sendCanvasGeometryUpdatedMessage(tree, sourceEvent);
+const RootRenderer = ({ onChange, inMemoryEntitiesStore, }) => {
+    useEditorSubscriber(inMemoryEntitiesStore);
+    const dragItem = useDraggedItemStore((state) => state.componentId);
+    const userIsDragging = useDraggedItemStore((state) => state.isDraggingOnCanvas);
+    const setHoveredComponentId = useDraggedItemStore((state) => state.setHoveredComponentId);
+    const breakpoints = useTreeStore((state) => state.breakpoints);
+    const setSelectedNodeId = useEditorStore((state) => state.setSelectedNodeId);
+    const containerRef = useRef(null);
+    const { resolveDesignValue } = useBreakpoints(breakpoints);
+    const [containerStyles, setContainerStyles] = useState({});
+    const tree = useTreeStore((state) => state.tree);
+    const handleMouseOver = useCallback(() => {
+        // Remove hover state set by UI when mouse is over canvas
+        setHoveredComponentId();
+        // Remove hover styling from components in the layers tab
+        sendMessage(OUTGOING_EVENTS.NewHoveredElement, {});
+    }, [setHoveredComponentId]);
+    const handleClickOutside = useCallback((e) => {
+        const element = e.target;
+        const isRoot = element.getAttribute('data-ctfl-zone-id') === ROOT_ID;
+        const clickedOnCanvas = element.closest(`[data-ctfl-root]`);
+        if (clickedOnCanvas && !isRoot) {
+            return;
+        }
+        sendMessage(OUTGOING_EVENTS.OutsideCanvasClick, {
+            outsideCanvasClick: true,
+        });
+        sendMessage(OUTGOING_EVENTS.ComponentSelected, {
+            nodeId: '',
         });
-    }, 100, {
-        leading: true,
-        // To be sure, we recalculate it at the end of the frame again. Though, we couldn't
-        // yet show the need for this. So we might be able to drop this later to boost performance.
-        trailing: true,
-    }), []);
-    // Store tree in a ref to avoid the need to deactivate & reactivate the mutation observer
-    // when the tree changes. This is important to avoid missing out on some mutation events.
-    const treeRef = useRef(tree);
+        setSelectedNodeId('');
+    }, [setSelectedNodeId]);
+    const handleResizeCanvas = useCallback(() => {
+        const parentElement = containerRef.current?.parentElement;
+        if (!parentElement) {
+            return;
+        }
+        let siblingHeight = 0;
+        for (const child of parentElement.children) {
+            if (!child.hasAttribute('data-ctfl-root')) {
+                siblingHeight += child.getBoundingClientRect().height;
+            }
+        }
+        if (!siblingHeight) {
+            /**
+             * DRAGGABLE_HEIGHT is subtracted here due to an uninteded scrolling effect
+             * when dragging a new component onto the canvas
+             *
+             * The DRAGGABLE_HEIGHT is then added as margin bottom to offset this value
+             * so that visually there is no difference to the user.
+             */
+            setContainerStyles({
+                minHeight: `${window.innerHeight - DRAGGABLE_HEIGHT}px`,
+            });
+            return;
+        }
+        setContainerStyles({
+            minHeight: `${window.innerHeight - siblingHeight}px`,
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [containerRef.current]);
     useEffect(() => {
-        treeRef.current = tree;
-    }, [tree]);
-    // Handling window resize events
+        if (onChange)
+            onChange(tree);
+    }, [tree, onChange]);
     useEffect(() => {
-        const resizeEventListener = () => debouncedUpdateGeometry(treeRef.current, 'resize');
-        window.addEventListener('resize', resizeEventListener);
-        return () => window.removeEventListener('resize', resizeEventListener);
-    }, [debouncedUpdateGeometry]);
-    // Handling DOM mutations
+        window.addEventListener('mouseover', handleMouseOver);
+        return () => {
+            window.removeEventListener('mouseover', handleMouseOver);
+        };
+    }, [handleMouseOver]);
     useEffect(() => {
-        const observer = new MutationObserver(() => debouncedUpdateGeometry(treeRef.current, 'mutation'));
-        observer.observe(document.documentElement, {
-            childList: true,
-            subtree: true,
-            attributes: true,
-        });
-        return () => observer.disconnect();
-    }, [debouncedUpdateGeometry]);
-};
-
-const RootRenderer = ({ inMemoryEntitiesStore }) => {
-    useEditorSubscriber(inMemoryEntitiesStore);
-    const tree = useTreeStore((state) => state.tree);
-    useCanvasGeometryUpdates({ tree });
-    const breakpoints = useTreeStore((state) => state.breakpoints);
-    const { resolveDesignValue } = useBreakpoints(breakpoints);
-    // If the root blockId is defined but not the default string, it is the entry ID
-    // of the experience/ pattern to properly detect circular dependencies.
-    const rootBlockId = tree.root.data.blockId ?? ROOT_ID;
-    const wrappingPatternIds = rootBlockId !== ROOT_ID ? new Set([rootBlockId]) : new Set();
+        document.addEventListener('click', handleClickOutside);
+        return () => {
+            document.removeEventListener('click', handleClickOutside);
+        };
+    }, [handleClickOutside]);
+    useEffect(() => {
+        handleResizeCanvas();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [containerRef.current]);
     const entityStore = inMemoryEntitiesStore((state) => state.entityStore);
     const areEntitiesFetched = inMemoryEntitiesStore((state) => state.areEntitiesFetched);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { "data-ctfl-root": true, className: styles$2.rootContainer }, !tree.root.children.length ? (React.createElement(EmptyCanvasMessage, null)) : (tree.root.children.map((topLevelChildNode) => (React.createElement(EditorBlock, { key: topLevelChildNode.data.id, node: topLevelChildNode, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds, entityStore: entityStore, areEntitiesFetched: areEntitiesFetched })))))));
+    return (React.createElement(DNDProvider, null,
+        dragItem && React.createElement(DraggableContainer, { id: dragItem }),
+        React.createElement("div", { "data-ctfl-root": true, className: styles$3.container, ref: containerRef, style: containerStyles },
+            userIsDragging && React.createElement("div", { "data-ctfl-zone-id": ROOT_ID, className: styles$3.hitbox }),
+            React.createElement(Dropzone, { zoneId: ROOT_ID, resolveDesignValue: resolveDesignValue, entityStore: entityStore, areEntitiesFetched: areEntitiesFetched }),
+            userIsDragging && (React.createElement(React.Fragment, null,
+                React.createElement("div", { "data-ctfl-zone-id": ROOT_ID, className: styles$3.hitboxLower }),
+                React.createElement("div", { "data-ctfl-zone-id": ROOT_ID, className: styles$3.canvasBottomSpacer })))),
+        React.createElement("div", { "data-ctfl-hitboxes": true })));
 };
 
 const useInitializeEditor = (inMemoryEntitiesStore) => {
@@ -4948,11 +6571,38 @@ const useInitializeEditor = (inMemoryEntitiesStore) => {
 const VisualEditorRoot = ({ experience, inMemoryEntitiesStore: inMemoryEntitiesStore$1 = inMemoryEntitiesStore, }) => {
     const initialized = useInitializeEditor(inMemoryEntitiesStore$1);
     const setHyperLinkPattern = useEditorStore((state) => state.setHyperLinkPattern);
+    const setMousePosition = useDraggedItemStore((state) => state.setMousePosition);
+    const setHoveringZone = useZoneStore((state) => state.setHoveringZone);
     useEffect(() => {
         if (experience?.hyperlinkPattern) {
             setHyperLinkPattern(experience.hyperlinkPattern);
         }
     }, [experience?.hyperlinkPattern, setHyperLinkPattern]);
+    useEffect(() => {
+        const onMouseMove = (e) => {
+            setMousePosition(e.clientX, e.clientY);
+            const target = e.target;
+            const zoneId = target.closest(`[${CTFL_ZONE_ID}]`)?.getAttribute(CTFL_ZONE_ID);
+            if (zoneId) {
+                setHoveringZone(zoneId);
+            }
+            if (!SimulateDnD$1.isDragging) {
+                return;
+            }
+            if (target.id === NEW_COMPONENT_ID) {
+                return;
+            }
+            SimulateDnD$1.updateDrag(e.clientX, e.clientY);
+            sendMessage(OUTGOING_EVENTS.MouseMove, {
+                clientX: e.pageX - window.scrollX,
+                clientY: e.pageY - window.scrollY,
+            });
+        };
+        document.addEventListener('mousemove', onMouseMove);
+        return () => {
+            document.removeEventListener('mousemove', onMouseMove);
+        };
+    }, [setHoveringZone, setMousePosition]);
     if (!initialized)
         return null;
     return React.createElement(RootRenderer, { inMemoryEntitiesStore: inMemoryEntitiesStore$1 });