@contentful/experiences-visual-editor-react 1.39.0-alpha-20250528T1549-bd210e1.0 → 1.39.0-beta.0

package/dist/index.js

@@ -1,268 +1,38 @@
 import styleInject from 'style-inject';
-import React, { useState, useEffect, useCallback, forwardRef, useMemo, useLayoutEffect, useRef } from 'react';
-import { create } from 'zustand';
-import { produce } from 'immer';
-import { isEqual, omit, isArray, get as get$1 } from 'lodash-es';
+import React, { useEffect, useRef, useState, useCallback, forwardRef, useLayoutEffect, useMemo } from 'react';
 import { z } from 'zod';
+import { omit, isArray, isEqual, get as get$1 } from 'lodash-es';
 import md5 from 'md5';
 import { BLOCKS } from '@contentful/rich-text-types';
+import { create } 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);
 
-const ROOT_ID = 'root';
-var TreeAction;
-(function (TreeAction) {
-    TreeAction[TreeAction["REMOVE_NODE"] = 0] = "REMOVE_NODE";
-    TreeAction[TreeAction["ADD_NODE"] = 1] = "ADD_NODE";
-    TreeAction[TreeAction["MOVE_NODE"] = 2] = "MOVE_NODE";
-    TreeAction[TreeAction["UPDATE_NODE"] = 3] = "UPDATE_NODE";
-    TreeAction[TreeAction["REORDER_NODE"] = 4] = "REORDER_NODE";
-    TreeAction[TreeAction["REPLACE_NODE"] = 5] = "REPLACE_NODE";
-})(TreeAction || (TreeAction = {}));
-
-function updateNode(nodeId, updatedNode, node) {
-    if (node.data.id === nodeId) {
-        node.data = updatedNode.data;
-        return;
-    }
-    node.children.forEach((childNode) => updateNode(nodeId, updatedNode, childNode));
-}
-function replaceNode(indexToReplace, updatedNode, node) {
-    if (node.data.id === updatedNode.parentId) {
-        node.children = [
-            ...node.children.slice(0, indexToReplace),
-            updatedNode,
-            ...node.children.slice(indexToReplace + 1),
-        ];
-        return;
-    }
-    node.children.forEach((childNode) => replaceNode(indexToReplace, updatedNode, childNode));
-}
-function removeChildNode(indexToRemove, nodeId, parentNodeId, node) {
-    if (node.data.id === parentNodeId) {
-        const childIndex = node.children.findIndex((child) => child.data.id === nodeId);
-        node.children.splice(childIndex === -1 ? indexToRemove : childIndex, 1);
-        return;
-    }
-    node.children.forEach((childNode) => removeChildNode(indexToRemove, nodeId, parentNodeId, childNode));
-}
-function addChildNode(indexToAdd, parentNodeId, nodeToAdd, node) {
-    if (node.data.id === parentNodeId) {
-        node.children = [
-            ...node.children.slice(0, indexToAdd),
-            nodeToAdd,
-            ...node.children.slice(indexToAdd),
-        ];
-        return;
-    }
-    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;
-    }
-    // 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;
-}
-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) {
-        return { type: TreeAction.ADD_NODE, indexToAdd: index, nodeToAdd: child, parentNodeId };
-    }
-    const item = getItem({ id: child.data.id }, tree);
-    if (item) {
-        const parentNode = getItem({ id: item.parentId }, tree);
-        if (!parentNode) {
-            return null;
-        }
-        const sourceIndex = parentNode.children.findIndex((c) => c.data.id === child.data.id);
-        return { type: TreeAction.MOVE_NODE, sourceIndex, destinationIndex: index, parentNodeId };
-    }
-    return {
-        type: TreeAction.REPLACE_NODE,
-        originalId: currentNode.children[index].data.id,
-        indexToReplace: index,
-        node: child,
-    };
-}
-function matchingNodeAction({ index, originalIndex, nodeRemoved, nodeAdded, parentNodeId, }) {
-    if (index !== originalIndex && !nodeRemoved && !nodeAdded) {
-        return {
-            type: TreeAction.REORDER_NODE,
-            sourceIndex: originalIndex,
-            destinationIndex: index,
-            parentNodeId,
-        };
-    }
-    return null;
-}
-function compareNodes({ currentNode, updatedNode, originalTree, differences = [], }) {
-    // In the end, this map contains the list of nodes that are not present
-    // in the updated tree and must be removed
-    const map = new Map();
-    if (!currentNode || !updatedNode) {
-        return differences;
-    }
-    // On each tree level, consider only the children of the current node to differentiate between added, removed, or replaced case
-    const currentNodeCount = currentNode.children.length;
-    const updatedNodeCount = updatedNode.children.length;
-    const nodeRemoved = currentNodeCount > updatedNodeCount;
-    const nodeAdded = currentNodeCount < updatedNodeCount;
-    const parentNodeId = updatedNode.data.id;
-    /**
-     * The data of the current node has changed, we need to update
-     * this node to reflect the data change. (design, content, unbound values)
-     */
-    if (!isEqual(currentNode.data, updatedNode.data)) {
-        differences.push({
-            type: TreeAction.UPDATE_NODE,
-            nodeId: currentNode.data.id,
-            node: updatedNode,
-        });
-    }
-    // Map children of the first tree by their ID
-    currentNode.children.forEach((child, index) => map.set(child.data.id, index));
-    // Compare with the second tree
-    updatedNode.children.forEach((child, index) => {
-        const childId = child.data.id;
-        // The original tree does not have this node in the updated tree.
-        if (!map.has(childId)) {
-            const diff = missingNodeAction({
-                index,
-                child,
-                nodeAdded,
-                parentNodeId,
-                tree: originalTree,
-                currentNode,
-            });
-            if (diff?.type === TreeAction.REPLACE_NODE) {
-                // Remove it from the deletion map to avoid adding another REMOVE_NODE action
-                map.delete(diff.originalId);
-            }
-            return differences.push(diff);
-        }
-        const originalIndex = map.get(childId);
-        const diff = matchingNodeAction({
-            index,
-            originalIndex,
-            nodeAdded,
-            nodeRemoved,
-            parentNodeId,
-        });
-        differences.push(diff);
-        map.delete(childId);
-        compareNodes({
-            currentNode: currentNode.children[originalIndex],
-            updatedNode: child,
-            originalTree,
-            differences,
-        });
-    });
-    map.forEach((index, key) => {
-        // If the node count of the entire tree doesn't signify
-        // a node was removed, don't add that as a diff
-        if (!nodeRemoved) {
-            return;
-        }
-        // Remaining nodes in the map are removed in the second tree
-        differences.push({
-            type: TreeAction.REMOVE_NODE,
-            indexToRemove: index,
-            parentNodeId,
-            idToRemove: key,
-        });
-    });
-    return differences;
-}
-function getTreeDiffs(tree1, tree2, originalTree) {
-    const differences = [];
-    compareNodes({
-        currentNode: tree1,
-        updatedNode: tree2,
-        originalTree,
-        differences,
-    });
-    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',
-};
 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',
 };
-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
@@ -274,56 +44,7 @@ var StudioCanvasMode$3;
     StudioCanvasMode["EDITOR"] = "editorMode";
     StudioCanvasMode["NONE"] = "none";
 })(StudioCanvasMode$3 || (StudioCanvasMode$3 = {}));
-const ASSEMBLY_NODE_TYPE = 'assembly';
-const ASSEMBLY_DEFAULT_CATEGORY = 'Assemblies';
-const EMPTY_CONTAINER_HEIGHT$1 = '80px';
-const HYPERLINK_DEFAULT_PATTERN = `/{locale}/{entry.fields.slug}/`;
-var PostMessageMethods$3;
-(function (PostMessageMethods) {
-    PostMessageMethods["REQUEST_ENTITIES"] = "REQUEST_ENTITIES";
-    PostMessageMethods["REQUESTED_ENTITIES"] = "REQUESTED_ENTITIES";
-})(PostMessageMethods$3 || (PostMessageMethods$3 = {}));
-
-/** @deprecated will be removed when dropping backward compatibility for old DND */
-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',
-};
-/**
- * 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 = {
+const CONTENTFUL_COMPONENTS$2 = {
     section: {
         id: 'contentful-section',
         name: 'Section',
@@ -369,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',
@@ -411,24 +135,30 @@ const CF_STYLE_ATTRIBUTES = [
     'cfBackgroundImageAlignmentVertical',
     'cfBackgroundImageAlignmentHorizontal',
 ];
-const EMPTY_CONTAINER_HEIGHT = '80px';
+const EMPTY_CONTAINER_HEIGHT$1 = '80px';
 const DEFAULT_IMAGE_WIDTH = '500px';
-var PostMessageMethods$2;
+var PostMessageMethods$3;
 (function (PostMessageMethods) {
     PostMessageMethods["REQUEST_ENTITIES"] = "REQUEST_ENTITIES";
     PostMessageMethods["REQUESTED_ENTITIES"] = "REQUESTED_ENTITIES";
-})(PostMessageMethods$2 || (PostMessageMethods$2 = {}));
+})(PostMessageMethods$3 || (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');
 };
@@ -1351,6 +1081,32 @@ propertyName, resolveDesignTokens = true) => {
 };
 
 const CF_DEBUG_KEY$1 = 'cf_debug';
+/**
+ * To ensure that the localStorage API can be used safely, we check
+ * for availability (e.g. undefined in Node.js). Additionally, we
+ * check if the localStorage can be used as some browsers throw a
+ * SecurityError (e.g. Brave or Chromium with specific settings).
+ */
+const checkLocalStorageAvailability$1 = () => {
+    if (typeof localStorage === 'undefined' || localStorage === null) {
+        return false;
+    }
+    try {
+        // Attempt to set and remove an item to check if localStorage is enabled
+        const TEST_KEY = 'cf_test_local_storage';
+        localStorage.setItem(TEST_KEY, 'yes');
+        if (localStorage.getItem(TEST_KEY) === 'yes') {
+            localStorage.removeItem(TEST_KEY);
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    catch (_error) {
+        return false;
+    }
+};
 let DebugLogger$1 = class DebugLogger {
     constructor() {
         // Public methods for logging
@@ -1358,7 +1114,7 @@ let DebugLogger$1 = class DebugLogger {
         this.warn = this.logger('warn');
         this.log = this.logger('log');
         this.debug = this.logger('debug');
-        if (typeof localStorage === 'undefined') {
+        if (!checkLocalStorageAvailability$1()) {
             this.enabled = false;
             return;
         }
@@ -1398,6 +1154,51 @@ let DebugLogger$1 = class DebugLogger {
 DebugLogger$1.instance = null;
 DebugLogger$1.getInstance();
 
+const findOutermostCoordinates = (first, second) => {
+    return {
+        top: Math.min(first.top, second.top),
+        right: Math.max(first.right, second.right),
+        bottom: Math.max(first.bottom, second.bottom),
+        left: Math.min(first.left, second.left),
+    };
+};
+const getElementCoordinates = (element) => {
+    const rect = element.getBoundingClientRect();
+    /**
+     * If element does not have children, or element has it's own width or height,
+     * return the element's coordinates.
+     */
+    if (element.children.length === 0 || rect.width !== 0 || rect.height !== 0) {
+        return rect;
+    }
+    const rects = [];
+    /**
+     * If element has children, or element does not have it's own width and height,
+     * we find the cordinates of the children, and assume the outermost coordinates of the children
+     * as the coordinate of the element.
+     *
+     * E.g child1 => {top: 2, bottom: 3, left: 4, right: 6} & child2 => {top: 1, bottom: 8, left: 12, right: 24}
+     * The final assumed coordinates of the element would be => { top: 1, right: 24, bottom: 8, left: 4 }
+     */
+    for (const child of element.children) {
+        const childRect = getElementCoordinates(child);
+        if (childRect.width !== 0 || childRect.height !== 0) {
+            const { top, right, bottom, left } = childRect;
+            rects.push({ top, right, bottom, left });
+        }
+    }
+    if (rects.length === 0) {
+        return rect;
+    }
+    const { top, right, bottom, left } = rects.reduce(findOutermostCoordinates);
+    return DOMRect.fromRect({
+        x: left,
+        y: top,
+        height: bottom - top,
+        width: right - left,
+    });
+};
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const isLinkToAsset = (variable) => {
     if (!variable)
@@ -1809,7 +1610,7 @@ const calculateNodeDefaultHeight = ({ blockId, children, value, }) => {
     if (children.length) {
         return '100%';
     }
-    return EMPTY_CONTAINER_HEIGHT;
+    return EMPTY_CONTAINER_HEIGHT$1;
 };
 
 function getOptimizedImageUrl(url, width, quality, format) {
@@ -2240,10 +2041,10 @@ const tryParseMessage = (event) => {
         throw new ParseError(`Field eventData.source must be equal to 'composability-app', instead of '${eventData.source}'`);
     }
     // check eventData.eventType
-    const supportedEventTypes = Object.values(INCOMING_EVENTS);
+    const supportedEventTypes = Object.values(INCOMING_EVENTS$1);
     if (!supportedEventTypes.includes(eventData.eventType)) {
         // Expected message: This message is handled in the EntityStore to store fetched entities
-        if (eventData.eventType !== PostMessageMethods$2.REQUESTED_ENTITIES) {
+        if (eventData.eventType !== PostMessageMethods$3.REQUESTED_ENTITIES) {
             throw new ParseError(`Field eventData.eventType must be one of the supported values: [${supportedEventTypes.join(', ')}]`);
         }
     }
@@ -2508,7 +2309,7 @@ class EditorEntityStore extends EntityStoreBase {
         }
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const newPromise = new Promise((resolve, reject) => {
-            const unsubscribe = this.subscribe(PostMessageMethods$2.REQUESTED_ENTITIES, (message) => {
+            const unsubscribe = this.subscribe(PostMessageMethods$3.REQUESTED_ENTITIES, (message) => {
                 const messageIds = [
                     ...message.entities.map((entity) => entity.sys.id),
                     ...(message.missingEntityIds ?? []),
@@ -2530,7 +2331,7 @@ class EditorEntityStore extends EntityStoreBase {
                 ids.forEach((id) => this.cleanupPromise(id));
                 unsubscribe();
             }, this.timeoutDuration);
-            this.sendMessage(PostMessageMethods$2.REQUEST_ENTITIES, {
+            this.sendMessage(PostMessageMethods$3.REQUEST_ENTITIES, {
                 entityIds: missing,
                 entityType: type,
                 locale: this.locale,
@@ -2632,74 +2433,567 @@ class EditorModeEntityStore extends EditorEntityStore {
         const { missing: missingAssetIds } = this.getEntitiesFromMap('Asset', uniqueAssetIds);
         return { missingEntryIds, missingAssetIds };
     }
-    getValue(entityLinkOrEntity, path) {
-        const entity = this.getEntryOrAsset(entityLinkOrEntity, path.join('/'));
-        if (!entity) {
-            return;
+    getValue(entityLinkOrEntity, path) {
+        const entity = this.getEntryOrAsset(entityLinkOrEntity, path.join('/'));
+        if (!entity) {
+            return;
+        }
+        const fieldValue = get(entity, path);
+        return transformAssetFileToUrl(fieldValue);
+    }
+}
+
+var VisualEditorMode$1;
+(function (VisualEditorMode) {
+    VisualEditorMode["LazyLoad"] = "lazyLoad";
+    VisualEditorMode["InjectScript"] = "injectScript";
+})(VisualEditorMode$1 || (VisualEditorMode$1 = {}));
+
+class DeepReference {
+    constructor({ path, dataSource }) {
+        const { key, field, referentField } = parseDataSourcePathWithL1DeepBindings(path);
+        this.originalPath = path;
+        this.entityId = dataSource[key].sys.id;
+        this.entityLink = dataSource[key];
+        this.field = field;
+        this.referentField = referentField;
+    }
+    get headEntityId() {
+        return this.entityId;
+    }
+    /**
+     * Extracts referent from the path, using EntityStore as source of
+     * entities during the resolution path.
+     */
+    extractReferent(entityStore) {
+        const headEntity = entityStore.getEntityFromLink(this.entityLink);
+        const maybeReferentLink = headEntity?.fields[this.field];
+        if (undefined === maybeReferentLink) {
+            // field references nothing (or even field doesn't exist)
+            return undefined;
+        }
+        if (!isLink(maybeReferentLink)) {
+            // Scenario of "impostor referent", where one of the deepPath's segments is not a Link but some other type
+            // Under normal circumstance we expect field to be a Link, but it could be an "impostor"
+            // eg. `Text` or `Number` or anything like that; could be due to CT changes or manual path creation via CMA
+            return undefined;
+        }
+        return maybeReferentLink;
+    }
+    static from(opt) {
+        return new DeepReference(opt);
+    }
+}
+function gatherDeepReferencesFromTree(startingNode, dataSource) {
+    const deepReferences = [];
+    treeVisit(startingNode, (node) => {
+        if (!node.data.props)
+            return;
+        for (const [, variableMapping] of Object.entries(node.data.props)) {
+            if (variableMapping.type !== 'BoundValue')
+                continue;
+            if (!isDeepPath(variableMapping.path))
+                continue;
+            deepReferences.push(DeepReference.from({
+                path: variableMapping.path,
+                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";
+    TreeAction[TreeAction["ADD_NODE"] = 1] = "ADD_NODE";
+    TreeAction[TreeAction["MOVE_NODE"] = 2] = "MOVE_NODE";
+    TreeAction[TreeAction["UPDATE_NODE"] = 3] = "UPDATE_NODE";
+    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) {
+        node.data = updatedNode.data;
+        return;
+    }
+    node.children.forEach((childNode) => updateNode(nodeId, updatedNode, childNode));
+}
+function replaceNode(indexToReplace, updatedNode, node) {
+    if (node.data.id === updatedNode.parentId) {
+        node.children = [
+            ...node.children.slice(0, indexToReplace),
+            updatedNode,
+            ...node.children.slice(indexToReplace + 1),
+        ];
+        return;
+    }
+    node.children.forEach((childNode) => replaceNode(indexToReplace, updatedNode, childNode));
+}
+function removeChildNode(indexToRemove, nodeId, parentNodeId, node) {
+    if (node.data.id === parentNodeId) {
+        const childIndex = node.children.findIndex((child) => child.data.id === nodeId);
+        node.children.splice(childIndex === -1 ? indexToRemove : childIndex, 1);
+        return;
+    }
+    node.children.forEach((childNode) => removeChildNode(indexToRemove, nodeId, parentNodeId, childNode));
+}
+function addChildNode(indexToAdd, parentNodeId, nodeToAdd, node) {
+    if (node.data.id === parentNodeId) {
+        node.children = [
+            ...node.children.slice(0, indexToAdd),
+            nodeToAdd,
+            ...node.children.slice(indexToAdd),
+        ];
+        return;
+    }
+    node.children.forEach((childNode) => addChildNode(indexToAdd, parentNodeId, nodeToAdd, childNode));
+}
+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;
+    }
+    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;
+    }
+    removeChildNode(oldIndex, nodeToMove.data.id, sourceNodeId, node);
+    addChildNode(newIndex, destinationNodeId, nodeToMove, node);
+}
+
+function missingNodeAction({ index, nodeAdded, child, tree, parentNodeId, currentNode, }) {
+    if (nodeAdded) {
+        return { type: TreeAction.ADD_NODE, indexToAdd: index, nodeToAdd: child, parentNodeId };
+    }
+    const item = getItem({ id: child.data.id }, tree);
+    if (item) {
+        const parentNode = getItem({ id: item.parentId }, tree);
+        if (!parentNode) {
+            return null;
         }
-        const fieldValue = get(entity, path);
-        return transformAssetFileToUrl(fieldValue);
+        const sourceIndex = parentNode.children.findIndex((c) => c.data.id === child.data.id);
+        return { type: TreeAction.MOVE_NODE, sourceIndex, destinationIndex: index, parentNodeId };
     }
+    return {
+        type: TreeAction.REPLACE_NODE,
+        originalId: currentNode.children[index].data.id,
+        indexToReplace: index,
+        node: child,
+    };
 }
-
-var VisualEditorMode$1;
-(function (VisualEditorMode) {
-    VisualEditorMode["LazyLoad"] = "lazyLoad";
-    VisualEditorMode["InjectScript"] = "injectScript";
-})(VisualEditorMode$1 || (VisualEditorMode$1 = {}));
-
-class DeepReference {
-    constructor({ path, dataSource }) {
-        const { key, field, referentField } = parseDataSourcePathWithL1DeepBindings(path);
-        this.originalPath = path;
-        this.entityId = dataSource[key].sys.id;
-        this.entityLink = dataSource[key];
-        this.field = field;
-        this.referentField = referentField;
+function matchingNodeAction({ index, originalIndex, nodeRemoved, nodeAdded, parentNodeId, }) {
+    if (index !== originalIndex && !nodeRemoved && !nodeAdded) {
+        return {
+            type: TreeAction.REORDER_NODE,
+            sourceIndex: originalIndex,
+            destinationIndex: index,
+            parentNodeId,
+        };
     }
-    get headEntityId() {
-        return this.entityId;
+    return null;
+}
+function compareNodes({ currentNode, updatedNode, originalTree, differences = [], }) {
+    // In the end, this map contains the list of nodes that are not present
+    // in the updated tree and must be removed
+    const map = new Map();
+    if (!currentNode || !updatedNode) {
+        return differences;
     }
+    // On each tree level, consider only the children of the current node to differentiate between added, removed, or replaced case
+    const currentNodeCount = currentNode.children.length;
+    const updatedNodeCount = updatedNode.children.length;
+    const nodeRemoved = currentNodeCount > updatedNodeCount;
+    const nodeAdded = currentNodeCount < updatedNodeCount;
+    const parentNodeId = updatedNode.data.id;
     /**
-     * Extracts referent from the path, using EntityStore as source of
-     * entities during the resolution path.
+     * The data of the current node has changed, we need to update
+     * this node to reflect the data change. (design, content, unbound values)
      */
-    extractReferent(entityStore) {
-        const headEntity = entityStore.getEntityFromLink(this.entityLink);
-        const maybeReferentLink = headEntity?.fields[this.field];
-        if (undefined === maybeReferentLink) {
-            // field references nothing (or even field doesn't exist)
-            return undefined;
-        }
-        if (!isLink(maybeReferentLink)) {
-            // Scenario of "impostor referent", where one of the deepPath's segments is not a Link but some other type
-            // Under normal circumstance we expect field to be a Link, but it could be an "impostor"
-            // eg. `Text` or `Number` or anything like that; could be due to CT changes or manual path creation via CMA
-            return undefined;
-        }
-        return maybeReferentLink;
-    }
-    static from(opt) {
-        return new DeepReference(opt);
+    if (!isEqual(currentNode.data, updatedNode.data)) {
+        differences.push({
+            type: TreeAction.UPDATE_NODE,
+            nodeId: currentNode.data.id,
+            node: updatedNode,
+        });
     }
-}
-function gatherDeepReferencesFromTree(startingNode, dataSource) {
-    const deepReferences = [];
-    treeVisit(startingNode, (node) => {
-        if (!node.data.props)
+    // Map children of the first tree by their ID
+    currentNode.children.forEach((child, index) => map.set(child.data.id, index));
+    // Compare with the second tree
+    updatedNode.children.forEach((child, index) => {
+        const childId = child.data.id;
+        // The original tree does not have this node in the updated tree.
+        if (!map.has(childId)) {
+            const diff = missingNodeAction({
+                index,
+                child,
+                nodeAdded,
+                parentNodeId,
+                tree: originalTree,
+                currentNode,
+            });
+            if (diff?.type === TreeAction.REPLACE_NODE) {
+                // Remove it from the deletion map to avoid adding another REMOVE_NODE action
+                map.delete(diff.originalId);
+            }
+            return differences.push(diff);
+        }
+        const originalIndex = map.get(childId);
+        const diff = matchingNodeAction({
+            index,
+            originalIndex,
+            nodeAdded,
+            nodeRemoved,
+            parentNodeId,
+        });
+        differences.push(diff);
+        map.delete(childId);
+        compareNodes({
+            currentNode: currentNode.children[originalIndex],
+            updatedNode: child,
+            originalTree,
+            differences,
+        });
+    });
+    map.forEach((index, key) => {
+        // If the node count of the entire tree doesn't signify
+        // a node was removed, don't add that as a diff
+        if (!nodeRemoved) {
             return;
-        for (const [, variableMapping] of Object.entries(node.data.props)) {
-            if (variableMapping.type !== 'BoundValue')
-                continue;
-            if (!isDeepPath(variableMapping.path))
-                continue;
-            deepReferences.push(DeepReference.from({
-                path: variableMapping.path,
-                dataSource,
-            }));
         }
+        // Remaining nodes in the map are removed in the second tree
+        differences.push({
+            type: TreeAction.REMOVE_NODE,
+            indexToRemove: index,
+            parentNodeId,
+            idToRemove: key,
+        });
     });
-    return deepReferences;
+    return differences;
+}
+function getTreeDiffs(tree1, tree2, originalTree) {
+    const differences = [];
+    compareNodes({
+        currentNode: tree1,
+        updatedNode: tree2,
+        originalTree,
+        differences,
+    });
+    return differences.filter((diff) => diff);
 }
 
 const useTreeStore = create((set, get) => ({
@@ -2733,6 +3027,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;
         /**
@@ -2778,6 +3086,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);
+        }));
+    },
 }));
 const hasBreakpointDiffs = (currentTree, newTree) => {
     const currentBreakpoints = currentTree?.root?.data?.breakpoints ?? [];
@@ -2795,8 +3118,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
@@ -2835,6 +3158,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.
@@ -2868,10 +3251,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 };
@@ -2903,7 +3290,6 @@ const useEditorStore = create((set, get) => ({
 var css_248z$8 = "/* Initially added with PR #253 for each component, this is now a global setting\n * It is recommended on MDN to use this as a default for layouting.\n*/\n* {\n  box-sizing: border-box;\n}\n";
 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
@@ -3403,6 +3789,32 @@ var CodeNames;
 })(CodeNames || (CodeNames = {}));
 
 const CF_DEBUG_KEY = 'cf_debug';
+/**
+ * To ensure that the localStorage API can be used safely, we check
+ * for availability (e.g. undefined in Node.js). Additionally, we
+ * check if the localStorage can be used as some browsers throw a
+ * SecurityError (e.g. Brave or Chromium with specific settings).
+ */
+const checkLocalStorageAvailability = () => {
+    if (typeof localStorage === 'undefined' || localStorage === null) {
+        return false;
+    }
+    try {
+        // Attempt to set and remove an item to check if localStorage is enabled
+        const TEST_KEY = 'cf_test_local_storage';
+        localStorage.setItem(TEST_KEY, 'yes');
+        if (localStorage.getItem(TEST_KEY) === 'yes') {
+            localStorage.removeItem(TEST_KEY);
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    catch (_error) {
+        return false;
+    }
+};
 class DebugLogger {
     constructor() {
         // Public methods for logging
@@ -3410,7 +3822,7 @@ class DebugLogger {
         this.warn = this.logger('warn');
         this.log = this.logger('log');
         this.debug = this.logger('debug');
-        if (typeof localStorage === 'undefined') {
+        if (!checkLocalStorageAvailability()) {
             this.enabled = false;
             return;
         }
@@ -3456,8 +3868,8 @@ var VisualEditorMode;
     VisualEditorMode["InjectScript"] = "injectScript";
 })(VisualEditorMode || (VisualEditorMode = {}));
 
-var css_248z$2 = ".contentful-container {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  pointer-events: all;\n}\n\n.contentful-container::-webkit-scrollbar {\n  display: none; /* Safari and Chrome */\n}\n\n.cf-container-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n.contentful-container:after {\n  content: '';\n  display: block;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow-x: clip;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 12px;\n  color: var(--exp-builder-gray400);\n  z-index: 1;\n}\n\n.contentful-section-label:after {\n  content: 'Section';\n}\n\n.contentful-container-label:after {\n  content: 'Container';\n}\n\n/* used by ContentfulSectionAsHyperlink.tsx */\n\n.contentful-container-link,\n.contentful-container-link:active,\n.contentful-container-link:visited,\n.contentful-container-link:hover,\n.contentful-container-link:read-write,\n.contentful-container-link:focus-visible {\n  color: inherit;\n  text-decoration: unset;\n  outline: unset;\n}\n";
-styleInject(css_248z$2);
+var css_248z$2$1 = ".contentful-container {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  pointer-events: all;\n}\n\n.contentful-container::-webkit-scrollbar {\n  display: none; /* Safari and Chrome */\n}\n\n.cf-single-column-wrapper {\n  position: relative;\n}\n\n.cf-container-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n.contentful-container:after {\n  content: '';\n  display: block;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow-x: clip;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 12px;\n  color: var(--exp-builder-gray400);\n  z-index: 1;\n}\n\n.contentful-section-label:after {\n  content: 'Section';\n}\n\n.contentful-container-label:after {\n  content: 'Container';\n}\n\n/* used by ContentfulSectionAsHyperlink.tsx */\n\n.contentful-container-link,\n.contentful-container-link:active,\n.contentful-container-link:visited,\n.contentful-container-link:hover,\n.contentful-container-link:read-write,\n.contentful-container-link:focus-visible {\n  color: inherit;\n  text-decoration: unset;\n  outline: unset;\n}\n";
+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: {
@@ -3481,14 +3893,34 @@ const Flex = forwardRef(({ id, children, onMouseEnter, onMouseUp, onMouseLeave,
 });
 Flex.displayName = 'Flex';
 
-var css_248z$1$1 = ".cf-divider {\n  display: contents;\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n.cf-divider hr {\n  border: none;\n}\n";
+var css_248z$1$1 = ".cf-divider {\n  display: contents;\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n.cf-divider hr {\n  border: none;\n}\n\n/* For the editor mode add this 10px tolerance to make it easier picking up the divider component.\n * Using the DND zone as precondition makes sure that we don't render this pseudo element in delivery. */\n\n[data-ctfl-zone-id='root'] .cf-divider::before {\n  content: \"\";\n  position: absolute;\n  top: -5px;\n  left: -5px;\n  bottom: -5px;\n  right: -5px;\n  pointer-events: all;\n}\n";
 styleInject(css_248z$1$1);
 
-var css_248z$9 = ".cf-columns {\n  display: flex;\n  gap: 24px;\n  grid-template-columns: repeat(12, 1fr);\n  flex-direction: column;\n  min-height: 0; /* NEW */\n  min-width: 0; /* NEW; needed for Firefox */\n}\n\n@media (min-width: 768px) {\n  .cf-columns {\n    display: grid;\n  }\n}\n\n.cf-single-column-wrapper {\n  position: relative;\n}\n\n.cf-single-column-wrapper:after {\n  content: '';\n  display: block;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow-x: clip;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 12px;\n  color: var(--exp-builder-gray400);\n  z-index: 1;\n}\n\n.cf-single-column-label:after {\n  content: 'Column';\n}\n";
+var css_248z$9 = ".cf-columns {\n  display: flex;\n  gap: 24px;\n  grid-template-columns: repeat(12, 1fr);\n  flex-direction: column;\n  min-height: 0; /* NEW */\n  min-width: 0; /* NEW; needed for Firefox */\n}\n\n@media (min-width: 768px) {\n  .cf-columns {\n    display: grid;\n  }\n}\n\n.cf-single-column-wrapper {\n  position: relative;\n  display: flex;\n}\n\n.cf-single-column {\n  pointer-events: all;\n}\n\n.cf-single-column-wrapper:after {\n  content: '';\n  display: block;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow-x: clip;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 12px;\n  color: var(--exp-builder-gray400);\n  z-index: 1;\n}\n\n.cf-single-column-label:after {\n  content: 'Column';\n}\n";
 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 });
@@ -3511,6 +3943,75 @@ const useEntityStore = create((set) => ({
     },
 }));
 
+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() {
     const entityStore = useEntityStore((state) => state.entityStore);
     const areEntitiesFetched = useEntityStore((state) => state.areEntitiesFetched);
@@ -3524,7 +4025,14 @@ function useEditorSubscriber() {
     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 resetEntityStore = useEntityStore((state) => state.resetEntityStore);
+    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
@@ -3625,12 +4133,12 @@ function useEditorSubscriber() {
             }
             const eventData = tryParseMessage(event);
             console.debug(`[experiences-sdk-react::onMessage] Received message [${eventData.eventType}]`, eventData);
-            if (eventData.eventType === PostMessageMethods$3.REQUESTED_ENTITIES) {
+            if (eventData.eventType === PostMessageMethods$2.REQUESTED_ENTITIES) {
                 // Expected message: This message is handled in the EntityStore to store fetched entities
                 return;
             }
             switch (eventData.eventType) {
-                case INCOMING_EVENTS$1.ExperienceUpdated: {
+                case INCOMING_EVENTS.ExperienceUpdated: {
                     const { tree, locale, changedNode, changedValueType, assemblies } = eventData.payload;
                     // Make sure to first store the assemblies before setting the tree and thus triggering a rerender
                     if (assemblies) {
@@ -3674,7 +4182,7 @@ function useEditorSubscriber() {
                     updateTree(tree);
                     break;
                 }
-                case INCOMING_EVENTS$1.AssembliesRegistered: {
+                case INCOMING_EVENTS.AssembliesRegistered: {
                     const { assemblies } = eventData.payload;
                     assemblies.forEach((definition) => {
                         addComponentRegistration({
@@ -3684,7 +4192,7 @@ function useEditorSubscriber() {
                     });
                     break;
                 }
-                case INCOMING_EVENTS$1.AssembliesAdded: {
+                case INCOMING_EVENTS.AssembliesAdded: {
                     const { assembly, assemblyDefinition, } = eventData.payload;
                     entityStore.updateEntity(assembly);
                     // Using a Map here to avoid setting state and rerending all existing assemblies when a new assembly is added
@@ -3701,7 +4209,28 @@ function useEditorSubscriber() {
                     }
                     break;
                 }
-                case INCOMING_EVENTS$1.UpdatedEntity: {
+                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) {
                         const storedEntity = entityStore.entities.find((entity) => entity.sys.id === updatedEntity.sys.id);
@@ -3714,7 +4243,52 @@ function useEditorSubscriber() {
                     }
                     break;
                 }
-                case INCOMING_EVENTS$1.RequestEditorMode: {
+                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:
@@ -3727,8 +4301,11 @@ function useEditorSubscriber() {
         };
     }, [
         entityStore,
+        setComponentId,
+        setDraggingOnCanvas,
         setDataSource,
         setLocale,
+        setSelectedNodeId,
         dataSource,
         areEntitiesFetched,
         fetchMissingEntities,
@@ -3736,92 +4313,328 @@ function useEditorSubscriber() {
         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 = ({ node, wrappingPatternIds, }) => {
-    const entityStore = useEntityStore((state) => state.entityStore);
-    return (React.createElement("div", { "data-cf-node-id": node.data.id, "data-cf-node-block-id": node.data.blockId, "data-cf-node-block-type": node.type, "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 = entityStore.getEntityFromLink(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,
+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,
+    });
+};
+
+/**
+ * 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 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;
+        }
+        /**
+         * 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];
         }
-        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;
+        /**
+         * 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);
         }
-        return registration;
-    }, [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 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;
 };
 
 /**
@@ -3869,13 +4682,15 @@ const getUnboundValues = ({ key, fallback, unboundValues, }) => {
     return get$1(unboundValues, lodashPath, fallback);
 };
 
-const useComponentProps = ({ node, resolveDesignValue, definition, options, }) => {
+const useComponentProps = ({ node, 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 entityStore = useEntityStore((state) => state.entityStore);
-    const areEntitiesFetched = useEntityStore((state) => state.areEntitiesFetched);
+    const draggingId = useDraggedItemStore((state) => state.onBeforeCaptureId);
+    const nodeRect = useDraggedItemStore((state) => state.domRect);
+    const isEmptyZone = !node.children.length;
     const props = useMemo(() => {
         const propsBase = {
             cfSsrClassName: node.data.props.cfSsrClassName
@@ -3965,126 +4780,1133 @@ const useComponentProps = ({ node, resolveDesignValue, definition, options, }) =
                 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,
         node,
-        locale,
-        definition,
-        resolveDesignValue,
-        dataSource,
+        locale,
+        definition,
+        resolveDesignValue,
+        dataSource,
+        areEntitiesFetched,
+        unboundValues,
+        entityStore,
+        renderDropzone,
+    ]);
+    const cfStyles = useMemo(() => buildCfStyles(props), [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,
+        ...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,
+        isAssemblyBlock,
+        isEmptyZone,
+        isSingleColumn,
+        isStructureComponent,
+        node?.data.blockId,
+        overrideStyles,
+        userIsDragging,
+    ]);
+    const componentClass = useEditorModeClassName({
+        styles: componentStyles,
+        nodeId: node.data.id,
+    });
+    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) => {
+    const entityStore = useEntityStore((state) => state.entityStore);
+    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 = entityStore.getEntityFromLink(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, resolveDesignValue, renderDropzone, userIsDragging, wrappingPatternIds, }) => {
+    const areEntitiesFetched = useEntityStore((state) => state.areEntitiesFetched);
+    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,
         areEntitiesFetched,
-        unboundValues,
-        entityStore,
-    ]);
-    const cfStyles = useMemo(() => buildCfStyles(props), [props]);
-    // Styles that will be applied to the component element
-    const componentStyles = useMemo(() => ({
-        ...cfStyles,
-        ...(!node.children.length &&
-            isStructureWithRelativeHeight(node.data.blockId, cfStyles.height) && {
-            minHeight: EMPTY_CONTAINER_HEIGHT$1,
-        }),
-    }), [cfStyles, node.children.length, node.data.blockId]);
-    const cfCsrClassName = useEditorModeClassName({
-        styles: componentStyles,
-        nodeId: node.data.id,
+        resolveDesignValue,
+        renderDropzone,
+        definition: componentRegistration?.definition,
+        options: componentRegistration?.options,
+        userIsDragging,
+        requiresDragWrapper,
     });
-    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 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(), }) {
-    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' };
         }
-        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, { node: node, 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 })))));
-    }
-    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 })))
-        : null;
-    return (React.createElement(RegistrationComponent, { node: node, resolveDesignValue: resolveDesignValue, componentRegistration: componentRegistration, slotNodes: slotNodes }, children));
+        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';
+        }
+    }
+    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, }) => {
-    const { componentProps } = useComponentProps({
-        node,
+
+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, 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,
         resolveDesignValue,
-        definition: componentRegistration.definition,
-        options: componentRegistration.options,
+        renderDropzone,
+        userIsDragging,
+        wrappingPatternIds,
     });
-    return React.createElement(ImportedComponentErrorBoundary, { componentId: node.data.blockId }, React.createElement(componentRegistration.component, { ...componentProps, ...slotNodes }, children));
+    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,
+    });
+    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")));
+};
+
+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, resolveDesignValue, snapshot, provided, renderDropzone, wrappingPatternIds, }) => {
+    const userIsDragging = useDraggedItemStore((state) => state.isDraggingOnCanvas);
+    const { node, elementToRender } = useComponent({
+        node: rawNode,
+        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),
+        },
+    });
 };
 
-const RootRenderer = () => {
+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, zoneId, resolveDesignValue, WrapperComponent = 'div', renderDropzone, dragProps, wrappingPatternIds, ...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, { key: componentId, node: item, resolveDesignValue: resolveDesignValue, renderDropzone: renderDropzone, wrappingPatternIds: wrappingPatternIds }));
+    })));
+}
+
+function Dropzone({ node, zoneId, resolveDesignValue, className, WrapperComponent = 'div', dragProps, 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]);
+        }
+        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, node: node, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds, ...props }));
+    }, [wrappingPatternIds, resolveDesignValue]);
+    const renderClonedDropzone = useCallback((node, props) => {
+        return (React.createElement(DropzoneClone, { zoneId: node.data.id, node: node, resolveDesignValue: resolveDesignValue, renderDropzone: renderClonedDropzone, wrappingPatternIds: wrappingPatternIds, ...props }));
+    }, [resolveDesignValue, wrappingPatternIds]);
+    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;
+    }
+    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, { 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);
+                }
+                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, { 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 RootRenderer = ({ onChange }) => {
     useEditorSubscriber();
+    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);
-    // 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();
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { "data-ctfl-root": true, className: styles$2.rootContainer, ref: containerRef }, !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 })))))));
+    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: '',
+        });
+        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(() => {
+        if (onChange)
+            onChange(tree);
+    }, [tree, onChange]);
+    useEffect(() => {
+        window.addEventListener('mouseover', handleMouseOver);
+        return () => {
+            window.removeEventListener('mouseover', handleMouseOver);
+        };
+    }, [handleMouseOver]);
+    useEffect(() => {
+        document.addEventListener('click', handleClickOutside);
+        return () => {
+            document.removeEventListener('click', handleClickOutside);
+        };
+    }, [handleClickOutside]);
+    useEffect(() => {
+        handleResizeCanvas();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [containerRef.current]);
+    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 }),
+            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 = () => {
@@ -4128,11 +5950,38 @@ const useInitializeEditor = () => {
 const VisualEditorRoot = ({ experience }) => {
     const initialized = useInitializeEditor();
     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, null);