@contentful/experiences-visual-editor-react 1.39.0 → 1.40.0-alpha-20250604T1545-078bcac.0

package/dist/index.js

@@ -1,38 +1,269 @@
 import styleInject from 'style-inject';
-import React, { useEffect, useRef, useState, useCallback, forwardRef, useLayoutEffect, useMemo } from 'react';
+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, debounce } from 'lodash-es';
 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',
+    CanvasGeometryUpdated: 'canvasGeometryUpdated',
+};
 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
@@ -44,40 +275,89 @@ var StudioCanvasMode$3;
     StudioCanvasMode["EDITOR"] = "editorMode";
     StudioCanvasMode["NONE"] = "none";
 })(StudioCanvasMode$3 || (StudioCanvasMode$3 = {}));
-const CONTENTFUL_COMPONENTS$2 = {
-    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: {
+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 = {
+    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',
     },
@@ -90,9 +370,6 @@ const CONTENTFUL_COMPONENTS$2 = {
         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',
@@ -135,30 +412,24 @@ const CF_STYLE_ATTRIBUTES = [
     'cfBackgroundImageAlignmentVertical',
     'cfBackgroundImageAlignmentHorizontal',
 ];
-const EMPTY_CONTAINER_HEIGHT$1 = '80px';
+const EMPTY_CONTAINER_HEIGHT = '80px';
 const DEFAULT_IMAGE_WIDTH = '500px';
-var PostMessageMethods$3;
+var PostMessageMethods$2;
 (function (PostMessageMethods) {
     PostMessageMethods["REQUEST_ENTITIES"] = "REQUEST_ENTITIES";
     PostMessageMethods["REQUESTED_ENTITIES"] = "REQUESTED_ENTITIES";
-})(PostMessageMethods$3 || (PostMessageMethods$3 = {}));
+})(PostMessageMethods$2 || (PostMessageMethods$2 = {}));
 const SUPPORTED_IMAGE_FORMATS = ['jpg', 'png', 'webp', 'gif', 'avif'];
 
 const structureComponentIds = new Set([
-    CONTENTFUL_COMPONENTS$2.section.id,
-    CONTENTFUL_COMPONENTS$2.columns.id,
-    CONTENTFUL_COMPONENTS$2.container.id,
-    CONTENTFUL_COMPONENTS$2.singleColumn.id,
+    CONTENTFUL_COMPONENTS$1.section.id,
+    CONTENTFUL_COMPONENTS$1.columns.id,
+    CONTENTFUL_COMPONENTS$1.container.id,
+    CONTENTFUL_COMPONENTS$1.singleColumn.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 allContentfulComponentIds = new Set(Object.values(CONTENTFUL_COMPONENTS$1).map((component) => component.id));
 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');
 };
@@ -1610,7 +1881,7 @@ const calculateNodeDefaultHeight = ({ blockId, children, value, }) => {
     if (children.length) {
         return '100%';
     }
-    return EMPTY_CONTAINER_HEIGHT$1;
+    return EMPTY_CONTAINER_HEIGHT;
 };
 
 function getOptimizedImageUrl(url, width, quality, format) {
@@ -2041,10 +2312,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$1);
+    const supportedEventTypes = Object.values(INCOMING_EVENTS);
     if (!supportedEventTypes.includes(eventData.eventType)) {
         // Expected message: This message is handled in the EntityStore to store fetched entities
-        if (eventData.eventType !== PostMessageMethods$3.REQUESTED_ENTITIES) {
+        if (eventData.eventType !== PostMessageMethods$2.REQUESTED_ENTITIES) {
             throw new ParseError(`Field eventData.eventType must be one of the supported values: [${supportedEventTypes.join(', ')}]`);
         }
     }
@@ -2309,7 +2580,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$3.REQUESTED_ENTITIES, (message) => {
+            const unsubscribe = this.subscribe(PostMessageMethods$2.REQUESTED_ENTITIES, (message) => {
                 const messageIds = [
                     ...message.entities.map((entity) => entity.sys.id),
                     ...(message.missingEntityIds ?? []),
@@ -2331,7 +2602,7 @@ class EditorEntityStore extends EntityStoreBase {
                 ids.forEach((id) => this.cleanupPromise(id));
                 unsubscribe();
             }, this.timeoutDuration);
-            this.sendMessage(PostMessageMethods$3.REQUEST_ENTITIES, {
+            this.sendMessage(PostMessageMethods$2.REQUEST_ENTITIES, {
                 entityIds: missing,
                 entityType: type,
                 locale: this.locale,
@@ -2451,549 +2722,56 @@ var 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 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,
-        };
+        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;
     }
-    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;
+    get headEntityId() {
+        return this.entityId;
     }
-    // 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)
+     * Extracts referent from the path, using EntityStore as source of
+     * entities during the resolution path.
      */
-    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);
+    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;
         }
-        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;
+        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;
         }
-        // Remaining nodes in the map are removed in the second tree
-        differences.push({
-            type: TreeAction.REMOVE_NODE,
-            indexToRemove: index,
-            parentNodeId,
-            idToRemove: key,
-        });
-    });
-    return differences;
+        return maybeReferentLink;
+    }
+    static from(opt) {
+        return new DeepReference(opt);
+    }
 }
-function getTreeDiffs(tree1, tree2, originalTree) {
-    const differences = [];
-    compareNodes({
-        currentNode: tree1,
-        updatedNode: tree2,
-        originalTree,
-        differences,
+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 differences.filter((diff) => diff);
+    return deepReferences;
 }
 
 const useTreeStore = create((set, get) => ({
@@ -3027,20 +2805,6 @@ 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;
         /**
@@ -3086,21 +2850,6 @@ 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 ?? [];
@@ -3118,8 +2867,8 @@ const cloneDeepAsPOJO = (obj) => {
     return JSON.parse(JSON.stringify(obj));
 };
 
-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"};
+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"};
 styleInject(css_248z$a);
 
 // TODO: In order to support integrations without React, we should extract this heavy logic into simple
@@ -3158,66 +2907,6 @@ 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.
@@ -3251,14 +2940,10 @@ 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 };
@@ -3290,6 +2975,7 @@ 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
@@ -3868,8 +3554,8 @@ var VisualEditorMode;
     VisualEditorMode["InjectScript"] = "injectScript";
 })(VisualEditorMode || (VisualEditorMode = {}));
 
-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);
+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);
 
 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: {
@@ -3893,34 +3579,14 @@ 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\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";
+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";
 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  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";
+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";
 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 });
@@ -3943,75 +3609,6 @@ 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);
@@ -4025,14 +3622,7 @@ 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
@@ -4133,12 +3723,12 @@ function useEditorSubscriber() {
             }
             const eventData = tryParseMessage(event);
             console.debug(`[experiences-sdk-react::onMessage] Received message [${eventData.eventType}]`, eventData);
-            if (eventData.eventType === PostMessageMethods$2.REQUESTED_ENTITIES) {
+            if (eventData.eventType === PostMessageMethods$3.REQUESTED_ENTITIES) {
                 // Expected message: This message is handled in the EntityStore to store fetched entities
                 return;
             }
             switch (eventData.eventType) {
-                case INCOMING_EVENTS.ExperienceUpdated: {
+                case INCOMING_EVENTS$1.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) {
@@ -4182,7 +3772,7 @@ function useEditorSubscriber() {
                     updateTree(tree);
                     break;
                 }
-                case INCOMING_EVENTS.AssembliesRegistered: {
+                case INCOMING_EVENTS$1.AssembliesRegistered: {
                     const { assemblies } = eventData.payload;
                     assemblies.forEach((definition) => {
                         addComponentRegistration({
@@ -4192,7 +3782,7 @@ function useEditorSubscriber() {
                     });
                     break;
                 }
-                case INCOMING_EVENTS.AssembliesAdded: {
+                case INCOMING_EVENTS$1.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
@@ -4209,28 +3799,7 @@ function useEditorSubscriber() {
                     }
                     break;
                 }
-                case INCOMING_EVENTS.CanvasResized: {
-                    const { selectedNodeId } = eventData.payload;
-                    if (selectedNodeId) {
-                        sendSelectedComponentCoordinates(selectedNodeId);
-                    }
-                    break;
-                }
-                case INCOMING_EVENTS.HoverComponent: {
-                    const { hoveredNodeId } = eventData.payload;
-                    setHoveredComponentId(hoveredNodeId);
-                    break;
-                }
-                case INCOMING_EVENTS.ComponentDraggingChanged: {
-                    const { isDragging } = eventData.payload;
-                    if (!isDragging) {
-                        setComponentId('');
-                        setDraggingOnCanvas(false);
-                        SimulateDnD$1.reset();
-                    }
-                    break;
-                }
-                case INCOMING_EVENTS.UpdatedEntity: {
+                case INCOMING_EVENTS$1.UpdatedEntity: {
                     const { entity: updatedEntity, shouldRerender } = eventData.payload;
                     if (updatedEntity) {
                         const storedEntity = entityStore.entities.find((entity) => entity.sys.id === updatedEntity.sys.id);
@@ -4243,52 +3812,7 @@ function useEditorSubscriber() {
                     }
                     break;
                 }
-                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);
+                case INCOMING_EVENTS$1.RequestEditorMode: {
                     break;
                 }
                 default:
@@ -4298,343 +3822,104 @@ function useEditorSubscriber() {
         window.addEventListener('message', onMessage);
         return () => {
             window.removeEventListener('message', onMessage);
-        };
-    }, [
-        entityStore,
-        setComponentId,
-        setDraggingOnCanvas,
-        setDataSource,
-        setLocale,
-        setSelectedNodeId,
-        dataSource,
-        areEntitiesFetched,
-        fetchMissingEntities,
-        setUnboundValues,
-        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 onComponentMoved = (options) => {
-    sendMessage(OUTGOING_EVENTS.ComponentMoved, options);
-};
-
-const generateId = (type) => `${type}-${v4()}`;
-
-const createTreeNode = ({ blockId, parentId, slotId }) => {
-    const node = {
-        type: 'block',
-        data: {
-            id: generateId(blockId),
-            blockId,
-            slotId,
-            props: {},
-            dataSource: {},
-            breakpoints: [],
-            unboundValues: {},
-        },
-        parentId,
-        children: [],
-    };
-    return node;
-};
-
-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 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,
-    });
-};
+        };
+    }, [
+        entityStore,
+        setDataSource,
+        setLocale,
+        dataSource,
+        areEntitiesFetched,
+        fetchMissingEntities,
+        setUnboundValues,
+        unboundValues,
+        updateTree,
+        updateNodesByUpdatedEntity,
+        resetEntityStore,
+    ]);
+}
 
-/**
- * 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 };
+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);
+        }))));
 };
 
-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];
-        }
-        /**
-         * isAssembly comes from a string ID so we need to check if it's 'true' or 'false'
-         * in string format.
-         */
-        if (isAssembly === 'false') {
-            addChild(destination.index, parentId, node);
-        }
-        onDrop({
-            data: tree,
-            componentType: blockId,
-            destinationIndex: destination.index,
-            destinationZoneId: parentId,
-            slotId,
-        });
-    };
-    const onMoveComponent = (droppedItem) => {
-        const { destination, source, draggableId } = droppedItem;
-        if (!destination || !source) {
-            return;
-        }
-        if (destination.droppableId === source.droppableId) {
-            reorderChildren(destination.index, destination.droppableId, source.index);
-        }
-        if (destination.droppableId !== source.droppableId) {
-            reparentChild(destination.index, destination.droppableId, source.index, source.droppableId);
+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;
         }
-        onComponentMoved({
-            nodeId: draggableId,
-            destinationIndex: destination.index,
-            destinationParentId: destination.droppableId,
-            sourceIndex: source.index,
-            sourceParentId: source.droppableId,
-        });
-    };
-    return { onAddComponent, onMoveComponent };
+        // 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 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 MissingComponentPlaceholder = ({ blockId }) => {
+    return (React.createElement("div", { style: {
+            border: '1px solid red',
+            width: '100%',
+            height: '100%',
+        } },
+        "Missing component '",
+        blockId,
+        "'"));
 };
 
-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)));
-};
+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);
 
-/**
- * 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;
+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,
+            });
         }
-        // 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;
+        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]);
 };
 
 /**
@@ -4682,15 +3967,13 @@ const getUnboundValues = ({ key, fallback, unboundValues, }) => {
     return get$1(unboundValues, lodashPath, fallback);
 };
 
-const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, renderDropzone, definition, options, userIsDragging, requiresDragWrapper, }) => {
+const useComponentProps = ({ node, resolveDesignValue, definition, options, }) => {
     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 draggingId = useDraggedItemStore((state) => state.onBeforeCaptureId);
-    const nodeRect = useDraggedItemStore((state) => state.domRect);
-    const isEmptyZone = !node.children.length;
+    const areEntitiesFetched = useEntityStore((state) => state.areEntitiesFetched);
     const props = useMemo(() => {
         const propsBase = {
             cfSsrClassName: node.data.props.cfSsrClassName
@@ -4778,1135 +4061,222 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
             }
             else {
                 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,
-        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({
+            }
+        }, {});
+        return {
+            ...propsBase,
+            ...extractedProps,
+        };
+    }, [
+        hyperlinkPattern,
         node,
-        areEntitiesFetched,
+        locale,
+        definition,
         resolveDesignValue,
-        renderDropzone,
-        definition: componentRegistration?.definition,
-        options: componentRegistration?.options,
-        userIsDragging,
-        requiresDragWrapper,
+        dataSource,
+        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,
     });
-    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);
-        };
-        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 {
-            display: 'none',
+    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 { 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;
+        // Only pass `editorMode` and `node` to structure components and assembly root nodes.
+        const isStructureComponent = isContentfulStructureComponent(node.data.blockId);
+        if (isStructureComponent) {
             return {
-                width,
-                height: selfHeight,
-                left,
-                top: top + height / 2 - selfHeight / 2 - scrollY,
-                zIndex: 1000 + zoneDepth,
+                ...sharedProps,
+                editorMode: true,
+                node,
             };
         }
-        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 {};
-    }
-};
-
-const Hitboxes = ({ zoneId, parentZoneId, isEmptyZone }) => {
-    const tree = useTreeStore((state) => state.tree);
-    const isDraggingOnCanvas = useDraggedItemStore((state) => state.isDraggingOnCanvas);
-    const scrollY = useDraggedItemStore((state) => state.scrollY);
-    const zoneDepth = useMemo(() => getItemDepthFromNode({ id: parentZoneId }, tree.root), [tree, parentZoneId]);
-    const zones = useZoneStore((state) => state.zones);
-    const hoveringZone = useZoneStore((state) => state.hoveringZone);
-    const isHoveringZone = hoveringZone === zoneId;
-    const hitboxContainer = useMemo(() => {
-        return document.querySelector('[data-ctfl-hitboxes]');
-    }, []);
-    const domRect = useMemo(() => {
-        if (!isDraggingOnCanvas)
-            return;
-        return document.querySelector(`[${CTFL_ZONE_ID}="${zoneId}"]`)?.getBoundingClientRect();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [zoneId, isDraggingOnCanvas]);
-    // Use the size of the cloned dragging element to offset the position of the hitboxes
-    // So that when dragging causes a dropzone to expand, the hitboxes will be in the correct position
-    const offsetRect = useMemo(() => {
-        if (!isDraggingOnCanvas || isEmptyZone || !isHoveringZone)
-            return;
-        return document.querySelector(`[${CTFL_DRAGGING_ELEMENT}]`)?.getBoundingClientRect();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isEmptyZone, isHoveringZone, isDraggingOnCanvas]);
-    const zoneDirection = zones[parentZoneId]?.direction || 'vertical';
-    const isVertical = zoneDirection === 'vertical';
-    const isRoot = parentZoneId === ROOT_ID;
-    const { slotId: parentSlotId } = parseZoneId(parentZoneId);
-    const getStyles = useCallback((direction) => getHitboxStyles({
-        direction,
-        zoneDepth,
-        domRect,
-        scrollY,
-        offsetRect,
-    }), [zoneDepth, domRect, scrollY, offsetRect]);
-    const renderFinalRootHitbox = () => {
-        if (!isRoot)
-            return null;
-        return (React.createElement("div", { "data-ctfl-zone-id": parentZoneId, className: styles$2.hitbox, style: getStyles(HitboxDirection.BOTTOM) }));
-    };
-    const renderSurroundingHitboxes = () => {
-        if (isRoot || parentSlotId)
-            return null;
-        return (React.createElement(React.Fragment, null,
-            React.createElement("div", { "data-ctfl-zone-id": parentZoneId, className: styles$2.hitbox, style: getStyles(isVertical ? HitboxDirection.TOP : HitboxDirection.LEFT) }),
-            React.createElement("div", { "data-ctfl-zone-id": parentZoneId, className: styles$2.hitbox, style: getStyles(isVertical ? HitboxDirection.BOTTOM : HitboxDirection.RIGHT) })));
-    };
-    const ActiveHitboxes = (React.createElement(React.Fragment, null,
-        React.createElement("div", { "data-ctfl-zone-id": zoneId, className: styles$2.hitbox, style: getStyles(isVertical ? HitboxDirection.SELF_VERTICAL : HitboxDirection.SELF_HORIZONTAL) }),
-        renderSurroundingHitboxes(),
-        renderFinalRootHitbox()));
-    if (!hitboxContainer) {
-        return null;
-    }
-    return createPortal(ActiveHitboxes, hitboxContainer);
-};
-
-const isRelativePreviewSize = (width) => {
-    // For now, we solely allow 100% as relative value
-    return width === '100%';
-};
-const getTooltipPositions = ({ previewSize, tooltipRect, coordinates, }) => {
-    if (!coordinates || !tooltipRect) {
-        return { display: 'none' };
-    }
-    /**
-     * By default, the tooltip floats to the left of the element
-     */
-    const newTooltipStyles = { display: 'flex' };
-    // If the preview size is relative, we don't change the floating direction
-    if (!isRelativePreviewSize(previewSize)) {
-        const previewSizeMatch = previewSize.match(/(\d{1,})px/);
-        if (!previewSizeMatch) {
-            return { display: 'none' };
-        }
-        const previewSizePx = parseInt(previewSizeMatch[1]);
-        /**
-         * If the element is at the right edge of the canvas, and the element isn't wide enough to fit the tooltip width,
-         * we float the tooltip to the right of the element.
-         */
-        if (tooltipRect.width > previewSizePx - coordinates.right &&
-            tooltipRect.width > coordinates.width) {
-            newTooltipStyles['float'] = 'right';
-        }
-    }
-    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)));
+        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),
+        };
+    }, [cfCsrClassName, node, options?.enableCustomEditorView, props]);
+    return { componentProps };
 };
 
-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;
+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]);
         }
-        return resolveDesignValue(cfWrapColumns.valuesByBreakpoint);
-    }, [tree, node, isSingleColumn, resolveDesignValue]);
-    return {
-        isSingleColumn,
-        isWrapped,
-    };
-}
-
-function getStyle$1(style, snapshot) {
-    if (!snapshot.isDropAnimating) {
-        return style;
-    }
-    return {
-        ...style,
-        // cannot be 0, but make it super tiny
-        transitionDuration: `0.001s`,
-    };
+        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 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,
+const RegistrationComponent = ({ node, resolveDesignValue, componentRegistration, slotNodes, children, }) => {
+    const { componentProps } = useComponentProps({
+        node,
         resolveDesignValue,
-        renderDropzone,
-        userIsDragging,
-        wrappingPatternIds,
+        definition: componentRegistration.definition,
+        options: componentRegistration.options,
     });
-    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,
-        },
-    })));
+    return React.createElement(ImportedComponentErrorBoundary, { componentId: node.data.blockId }, React.createElement(componentRegistration.component, { ...componentProps, ...slotNodes }, children));
 };
 
-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"};
+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"};
 styleInject(css_248z);
 
-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 },
+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'] },
             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.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';
+        React.createElement("span", { className: styles['empty-canvas-label'] }, "Add components to begin")));
 };
 
-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),
+/**
+ * This function gets the element co-ordinates of a specified component in the DOM and its parent
+ * and sends the DOM Rect to the client app.
+ */
+const sendCanvasGeometryUpdatedMessage = async (tree, sourceEvent) => {
+    const nodeToCoordinatesMap = {};
+    await waitForAllImagesToBeLoaded();
+    collectNodeCoordinates(tree.root, nodeToCoordinatesMap);
+    sendMessage(OUTGOING_EVENTS.CanvasGeometryUpdated, {
+        size: {
+            width: document.documentElement.offsetWidth,
+            height: document.documentElement.offsetHeight,
         },
+        nodes: nodeToCoordinatesMap,
+        sourceEvent,
     });
 };
-
-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;
+const collectNodeCoordinates = (node, nodeToCoordinatesMap) => {
+    const selectedElement = document.querySelector(`[data-cf-node-id="${node.data.id}"]`);
+    if (selectedElement) {
+        const rect = getElementCoordinates(selectedElement);
+        nodeToCoordinatesMap[node.data.id] = {
+            coordinates: {
+                x: rect.x + window.scrollX,
+                y: rect.y + window.scrollY,
+                width: rect.width,
+                height: rect.height,
+            },
+        };
     }
-    return {};
+    node.children.forEach((child) => collectNodeCoordinates(child, nodeToCoordinatesMap));
 };
-
-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);
+const waitForAllImagesToBeLoaded = () => {
+    // If the document contains an image, wait for this image to be loaded before collecting & sending all geometry data.
+    const allImageNodes = document.querySelectorAll('img');
+    return Promise.all(Array.from(allImageNodes).map((imageNode) => {
+        if (imageNode.complete) {
+            return Promise.resolve();
+        }
+        return new Promise((resolve, reject) => {
+            const handleImageLoad = (event) => {
+                imageNode.removeEventListener('load', handleImageLoad);
+                imageNode.removeEventListener('error', handleImageLoad);
+                if (event.type === 'error') {
+                    console.warn('Image failed to load:', imageNode);
+                    reject();
+                }
+                else {
+                    resolve();
                 }
-                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));
+            };
+            imageNode.addEventListener('load', handleImageLoad);
+            imageNode.addEventListener('error', handleImageLoad);
+        });
     }));
-}
+};
 
-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);
-    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`,
+const useCanvasGeometryUpdates = ({ tree }) => {
+    const debouncedUpdateGeometry = useMemo(() => debounce((tree, sourceEvent) => {
+        // When the DOM changed, we still need to wait for the next frame to ensure that
+        // rendering is complete (e.g. this is required when deleting a node).
+        window.requestAnimationFrame(() => {
+            sendCanvasGeometryUpdatedMessage(tree, sourceEvent);
         });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [containerRef.current]);
+    }, 100, {
+        leading: true,
+        // To be sure, we recalculate it at the end of the frame again. Though, we couldn't
+        // yet show the need for this. So we might be able to drop this later to boost performance.
+        trailing: true,
+    }), []);
+    // Store tree in a ref to avoid the need to deactivate & reactivate the mutation observer
+    // when the tree changes. This is important to avoid missing out on some mutation events.
+    const treeRef = useRef(tree);
     useEffect(() => {
-        if (onChange)
-            onChange(tree);
-    }, [tree, onChange]);
-    useEffect(() => {
-        window.addEventListener('mouseover', handleMouseOver);
-        return () => {
-            window.removeEventListener('mouseover', handleMouseOver);
-        };
-    }, [handleMouseOver]);
+        treeRef.current = tree;
+    }, [tree]);
+    // Handling window resize events
     useEffect(() => {
-        document.addEventListener('click', handleClickOutside);
-        return () => {
-            document.removeEventListener('click', handleClickOutside);
-        };
-    }, [handleClickOutside]);
+        const resizeEventListener = () => debouncedUpdateGeometry(treeRef.current, 'resize');
+        window.addEventListener('resize', resizeEventListener);
+        return () => window.removeEventListener('resize', resizeEventListener);
+    }, [debouncedUpdateGeometry]);
+    // Handling DOM mutations
     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 observer = new MutationObserver(() => debouncedUpdateGeometry(treeRef.current, 'mutation'));
+        observer.observe(document.documentElement, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+        });
+        return () => observer.disconnect();
+    }, [debouncedUpdateGeometry]);
+};
+
+const RootRenderer = () => {
+    const tree = useTreeStore((state) => state.tree);
+    useCanvasGeometryUpdates({ tree });
+    useEditorSubscriber();
+    const breakpoints = useTreeStore((state) => state.breakpoints);
+    const { resolveDesignValue } = useBreakpoints(breakpoints);
+    // If the root blockId is defined but not the default string, it is the entry ID
+    // of the experience/ pattern to properly detect circular dependencies.
+    const rootBlockId = tree.root.data.blockId ?? ROOT_ID;
+    const wrappingPatternIds = rootBlockId !== ROOT_ID ? new Set([rootBlockId]) : new Set();
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { "data-ctfl-root": true, className: styles$2.rootContainer }, !tree.root.children.length ? (React.createElement(EmptyCanvasMessage, null)) : (tree.root.children.map((topLevelChildNode) => (React.createElement(EditorBlock, { key: topLevelChildNode.data.id, node: topLevelChildNode, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds })))))));
 };
 
 const useInitializeEditor = () => {
@@ -5950,38 +4320,11 @@ 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);