@contentful/experiences-visual-editor-react 0.0.1-alpha.10

package/dist/index.js

@@ -0,0 +1,4529 @@
+import styleInject from 'style-inject';
+import React, { useRef, useMemo, useEffect, useState, forwardRef, useCallback } from 'react';
+import md5 from 'md5';
+import { BLOCKS } from '@contentful/rich-text-types';
+import { Draggable, Droppable, DragDropContext } from '@hello-pangea/dnd';
+import classNames from 'classnames';
+import { create } from 'zustand';
+import { isEqual, get as get$1, omit } from 'lodash-es';
+import '@contentful/rich-text-react-renderer';
+import { produce } from 'immer';
+import { createPortal } from 'react-dom';
+import { v4 } from 'uuid';
+
+var css_248z$8 = "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$8);
+
+const INCOMING_EVENTS$1 = {
+    RequestEditorMode: 'requestEditorMode',
+    ExperienceUpdated: 'componentTreeUpdated',
+    ComponentDraggingChanged: 'componentDraggingChanged',
+    ComponentDragCanceled: 'componentDragCanceled',
+    ComponentDragStarted: 'componentDragStarted',
+    ComponentDragEnded: 'componentDragEnded',
+    ComponentMoveEnded: 'componentMoveEnded',
+    CanvasResized: 'canvasResized',
+    SelectComponent: 'selectComponent',
+    HoverComponent: 'hoverComponent',
+    UpdatedEntity: 'updatedEntity',
+    AssembliesAdded: 'assembliesAdded',
+    AssembliesRegistered: 'assembliesRegistered',
+    InitEditor: 'initEditor',
+    MouseMove: 'mouseMove',
+};
+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: 'button',
+        name: 'Button',
+    },
+    heading: {
+        id: 'heading',
+        name: 'Heading',
+    },
+    image: {
+        id: 'image',
+        name: 'Image',
+    },
+    richText: {
+        id: 'richText',
+        name: 'Rich Text',
+    },
+    text: {
+        id: 'text',
+        name: 'Text',
+    },
+};
+const EMPTY_CONTAINER_HEIGHT$1 = '80px';
+const DEFAULT_IMAGE_WIDTH = '500px';
+var PostMessageMethods$2;
+(function (PostMessageMethods) {
+    PostMessageMethods["REQUEST_ENTITIES"] = "REQUEST_ENTITIES";
+    PostMessageMethods["REQUESTED_ENTITIES"] = "REQUESTED_ENTITIES";
+})(PostMessageMethods$2 || (PostMessageMethods$2 = {}));
+const SUPPORTED_IMAGE_FORMATS = ['jpg', 'png', 'webp', 'gif', 'avif'];
+
+const structureComponents = new Set([
+    CONTENTFUL_COMPONENTS$1.section.id,
+    CONTENTFUL_COMPONENTS$1.columns.id,
+    CONTENTFUL_COMPONENTS$1.container.id,
+    CONTENTFUL_COMPONENTS$1.singleColumn.id,
+]);
+const isContentfulStructureComponent = (componentId) => structureComponents.has(componentId ?? '');
+const isEmptyStructureWithRelativeHeight = (children, componentId, height) => {
+    return (children === 0 &&
+        isContentfulStructureComponent(componentId) &&
+        !height?.toString().endsWith('px'));
+};
+
+const findOutermostCoordinates = (first, second) => {
+    return {
+        top: Math.min(first.top, second.top),
+        right: Math.max(first.right, second.right),
+        bottom: Math.max(first.bottom, second.bottom),
+        left: Math.min(first.left, second.left),
+    };
+};
+const getElementCoordinates = (element) => {
+    const rect = element.getBoundingClientRect();
+    /**
+     * If element does not have children, or element has it's own width or height,
+     * return the element's coordinates.
+     */
+    if (element.children.length === 0 || rect.width !== 0 || rect.height !== 0) {
+        return rect;
+    }
+    const rects = [];
+    /**
+     * If element has children, or element does not have it's own width and height,
+     * we find the cordinates of the children, and assume the outermost coordinates of the children
+     * as the coordinate of the element.
+     *
+     * E.g child1 => {top: 2, bottom: 3, left: 4, right: 6} & child2 => {top: 1, bottom: 8, left: 12, right: 24}
+     * The final assumed coordinates of the element would be => { top: 1, right: 24, bottom: 8, left: 4 }
+     */
+    for (const child of element.children) {
+        const childRect = getElementCoordinates(child);
+        if (childRect.width !== 0 || childRect.height !== 0) {
+            const { top, right, bottom, left } = childRect;
+            rects.push({ top, right, bottom, left });
+        }
+    }
+    if (rects.length === 0) {
+        return rect;
+    }
+    const { top, right, bottom, left } = rects.reduce(findOutermostCoordinates);
+    return DOMRect.fromRect({
+        x: left,
+        y: top,
+        height: bottom - top,
+        width: right - left,
+    });
+};
+
+class ParseError extends Error {
+    constructor(message) {
+        super(message);
+    }
+}
+const isValidJsonObject = (s) => {
+    try {
+        const result = JSON.parse(s);
+        if ('object' !== typeof result) {
+            return false;
+        }
+        return true;
+    }
+    catch (e) {
+        return false;
+    }
+};
+const doesMismatchMessageSchema = (event) => {
+    try {
+        tryParseMessage(event);
+        return false;
+    }
+    catch (e) {
+        if (e instanceof ParseError) {
+            return e.message;
+        }
+        throw e;
+    }
+};
+const tryParseMessage = (event) => {
+    if (!event.data) {
+        throw new ParseError('Field event.data is missing');
+    }
+    if ('string' !== typeof event.data) {
+        throw new ParseError(`Field event.data must be a string, instead of '${typeof event.data}'`);
+    }
+    if (!isValidJsonObject(event.data)) {
+        throw new ParseError('Field event.data must be a valid JSON object serialized as string');
+    }
+    const eventData = JSON.parse(event.data);
+    if (!eventData.source) {
+        throw new ParseError(`Field eventData.source must be equal to 'composability-app'`);
+    }
+    if ('composability-app' !== eventData.source) {
+        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);
+    if (!supportedEventTypes.includes(eventData.eventType)) {
+        // Expected message: This message is handled in the EntityStore to store fetched entities
+        if (eventData.eventType !== PostMessageMethods$2.REQUESTED_ENTITIES) {
+            throw new ParseError(`Field eventData.eventType must be one of the supported values: [${supportedEventTypes.join(', ')}]`);
+        }
+    }
+    return eventData;
+};
+
+const transformFill = (value) => (value === 'fill' ? '100%' : value);
+const transformGridColumn = (span) => {
+    if (!span) {
+        return {};
+    }
+    return {
+        gridColumn: `span ${span}`,
+    };
+};
+const transformBorderStyle = (value) => {
+    if (!value)
+        return {};
+    const parts = value.split(' ');
+    // Just accept the passed value
+    if (parts.length < 3)
+        return { border: value };
+    // Replace the second part always with `solid` and set the box sizing accordingly
+    const [borderSize, borderStyle, ...borderColorParts] = parts;
+    const borderColor = borderColorParts.join(' ');
+    return {
+        border: `${borderSize} ${borderStyle} ${borderColor}`,
+    };
+};
+const transformAlignment = (cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection = 'column') => cfFlexDirection === 'row'
+    ? {
+        alignItems: cfHorizontalAlignment,
+        justifyContent: cfVerticalAlignment === 'center' ? `safe ${cfVerticalAlignment}` : cfVerticalAlignment,
+    }
+    : {
+        alignItems: cfVerticalAlignment,
+        justifyContent: cfHorizontalAlignment === 'center'
+            ? `safe ${cfHorizontalAlignment}`
+            : cfHorizontalAlignment,
+    };
+const transformBackgroundImage = (cfBackgroundImageUrl, cfBackgroundImageOptions) => {
+    const matchBackgroundSize = (scaling) => {
+        if ('fill' === scaling)
+            return 'cover';
+        if ('fit' === scaling)
+            return 'contain';
+    };
+    const matchBackgroundPosition = (alignment) => {
+        if (!alignment || 'string' !== typeof alignment) {
+            return;
+        }
+        let [horizontalAlignment, verticalAlignment] = alignment.trim().split(/\s+/, 2);
+        // Special case for handling single values
+        // for backwards compatibility with single values 'right','left', 'center', 'top','bottom'
+        if (horizontalAlignment && !verticalAlignment) {
+            const singleValue = horizontalAlignment;
+            switch (singleValue) {
+                case 'left':
+                    horizontalAlignment = 'left';
+                    verticalAlignment = 'center';
+                    break;
+                case 'right':
+                    horizontalAlignment = 'right';
+                    verticalAlignment = 'center';
+                    break;
+                case 'center':
+                    horizontalAlignment = 'center';
+                    verticalAlignment = 'center';
+                    break;
+                case 'top':
+                    horizontalAlignment = 'center';
+                    verticalAlignment = 'top';
+                    break;
+                case 'bottom':
+                    horizontalAlignment = 'center';
+                    verticalAlignment = 'bottom';
+                    break;
+                // just fall down to the normal validation logic for horiz and vert
+            }
+        }
+        const isHorizontalValid = ['left', 'right', 'center'].includes(horizontalAlignment);
+        const isVerticalValid = ['top', 'bottom', 'center'].includes(verticalAlignment);
+        horizontalAlignment = isHorizontalValid ? horizontalAlignment : 'left';
+        verticalAlignment = isVerticalValid ? verticalAlignment : 'top';
+        return `${horizontalAlignment} ${verticalAlignment}`;
+    };
+    if (!cfBackgroundImageUrl) {
+        return;
+    }
+    let backgroundImage;
+    let backgroundImageSet;
+    if (typeof cfBackgroundImageUrl === 'string') {
+        backgroundImage = `url(${cfBackgroundImageUrl})`;
+    }
+    else {
+        const imgSet = cfBackgroundImageUrl.srcSet?.join(',');
+        backgroundImage = `url(${cfBackgroundImageUrl.url})`;
+        backgroundImageSet = `image-set(${imgSet})`;
+    }
+    return {
+        backgroundImage,
+        backgroundImage2: backgroundImageSet,
+        backgroundRepeat: cfBackgroundImageOptions?.scaling === 'tile' ? 'repeat' : 'no-repeat',
+        backgroundPosition: matchBackgroundPosition(cfBackgroundImageOptions?.alignment),
+        backgroundSize: matchBackgroundSize(cfBackgroundImageOptions?.scaling),
+    };
+};
+const transformWidthSizing = ({ value, cfMargin, }) => {
+    if (!value || !cfMargin)
+        return;
+    const transformedValue = transformFill(value);
+    const marginValues = cfMargin.split(' ');
+    const rightMargin = marginValues[1] || '0px';
+    const leftMargin = marginValues[3] || '0px';
+    const calcValue = `calc(${transformedValue} - ${leftMargin} - ${rightMargin})`;
+    /**
+     * We want to check if the calculated value is valid CSS. If this fails,
+     * this means the `transformedValue` is not a calculable value (not a px, rem, or %).
+     * The value may instead be a string such as `min-content` or `max-content`. In
+     * that case we don't want to use calc and instead return the raw value.
+     */
+    if (typeof window !== 'undefined' && CSS.supports('width', calcValue)) {
+        return calcValue;
+    }
+    return transformedValue;
+};
+
+const toCSSAttribute = (key) => {
+    let val = key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
+    // Remove the number from the end of the key to allow for overrides on style properties
+    val = val.replace(/\d+$/, '');
+    return val;
+};
+const buildStyleTag = ({ styles, nodeId }) => {
+    const stylesStr = Object.entries(styles)
+        .filter(([, value]) => value !== undefined)
+        .reduce((acc, [key, value]) => `${acc}
+        ${toCSSAttribute(key)}: ${value};`, '');
+    const className = `cfstyles-${nodeId ? nodeId : md5(stylesStr)}`;
+    const styleRule = `.${className}{ ${stylesStr} }`;
+    return [className, styleRule];
+};
+const buildCfStyles = ({ cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection, cfFlexWrap, cfMargin, cfPadding, cfBackgroundColor, cfWidth, cfHeight, cfMaxWidth, cfBorder, cfBorderRadius, cfGap, cfBackgroundImageUrl, cfBackgroundImageOptions, cfFontSize, cfFontWeight, cfImageOptions, cfLineHeight, cfLetterSpacing, cfTextColor, cfTextAlign, cfTextTransform, cfTextBold, cfTextItalic, cfTextUnderline, cfColumnSpan, }) => {
+    return {
+        margin: cfMargin,
+        padding: cfPadding,
+        backgroundColor: cfBackgroundColor,
+        width: transformWidthSizing({ value: cfWidth || cfImageOptions?.width, cfMargin }),
+        height: transformFill(cfHeight || cfImageOptions?.height),
+        maxWidth: cfMaxWidth,
+        ...transformGridColumn(cfColumnSpan),
+        ...transformBorderStyle(cfBorder),
+        borderRadius: cfBorderRadius,
+        gap: cfGap,
+        ...transformAlignment(cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection),
+        flexDirection: cfFlexDirection,
+        flexWrap: cfFlexWrap,
+        ...transformBackgroundImage(cfBackgroundImageUrl, cfBackgroundImageOptions),
+        fontSize: cfFontSize,
+        fontWeight: cfTextBold ? 'bold' : cfFontWeight,
+        fontStyle: cfTextItalic ? 'italic' : 'normal',
+        lineHeight: cfLineHeight,
+        letterSpacing: cfLetterSpacing,
+        color: cfTextColor,
+        textAlign: cfTextAlign,
+        textTransform: cfTextTransform,
+        textDecoration: cfTextUnderline ? 'underline' : 'none',
+        boxSizing: 'border-box',
+        objectFit: cfImageOptions?.objectFit,
+        objectPosition: cfImageOptions?.objectPosition,
+    };
+};
+/**
+ * Container/section default behavior:
+ * Default height => height: EMPTY_CONTAINER_HEIGHT (120px)
+ * If a container component has children => height: 'fit-content'
+ */
+const calculateNodeDefaultHeight = ({ blockId, children, value, }) => {
+    if (!blockId || !isContentfulStructureComponent(blockId) || value !== 'auto') {
+        return value;
+    }
+    if (children.length) {
+        return '100%';
+    }
+    return EMPTY_CONTAINER_HEIGHT$1;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function get(obj, path) {
+    if (!path.length) {
+        return obj;
+    }
+    try {
+        const [currentPath, ...nextPath] = path;
+        return get(obj[currentPath], nextPath);
+    }
+    catch (err) {
+        return undefined;
+    }
+}
+
+const getBoundValue = (entryOrAsset, path) => {
+    const value = get(entryOrAsset, path.split('/').slice(2, -1));
+    return value && typeof value == 'object' && value.url
+        ? value.url
+        : value;
+};
+
+const transformRichText = (entryOrAsset, path) => {
+    const value = getBoundValue(entryOrAsset, path);
+    if (typeof value === 'string') {
+        return {
+            data: {},
+            content: [
+                {
+                    nodeType: BLOCKS.PARAGRAPH,
+                    data: {},
+                    content: [
+                        {
+                            data: {},
+                            nodeType: 'text',
+                            value: value,
+                            marks: [],
+                        },
+                    ],
+                },
+            ],
+            nodeType: BLOCKS.DOCUMENT,
+        };
+    }
+    if (typeof value === 'object' && value.nodeType === BLOCKS.DOCUMENT) {
+        return value;
+    }
+    return undefined;
+};
+
+function getOptimizedImageUrl(url, width, quality, format) {
+    if (url.startsWith('//')) {
+        url = 'https:' + url;
+    }
+    const params = new URLSearchParams();
+    if (width) {
+        params.append('w', width.toString());
+    }
+    if (quality && quality > 0 && quality < 100) {
+        params.append('q', quality.toString());
+    }
+    if (format) {
+        params.append('fm', format);
+    }
+    const queryString = params.toString();
+    return `${url}${queryString ? '?' + queryString : ''}`;
+}
+
+const MAX_WIDTH_ALLOWED$1 = 2000;
+const getOptimizedBackgroundImageAsset = (file, widthStyle, quality = 100, format) => {
+    if (!validateParams(file, quality, format)) ;
+    const url = file.url;
+    const { width1x, width2x } = getWidths(widthStyle, file);
+    const imageUrl1x = getOptimizedImageUrl(url, width1x, quality, format);
+    const imageUrl2x = getOptimizedImageUrl(url, width2x, quality, format);
+    const srcSet = [`url(${imageUrl1x}) 1x`, `url(${imageUrl2x}) 2x`];
+    const returnedUrlImageUrl = getOptimizedImageUrl(url, width2x, quality, format);
+    const optimizedBackgroundImageAsset = {
+        url: returnedUrlImageUrl,
+        srcSet,
+        file,
+    };
+    return optimizedBackgroundImageAsset;
+    function validateParams(file, quality, format) {
+        if (!file.details.image) {
+            throw Error('No image in file asset to transform');
+        }
+        if (quality < 0 || quality > 100) {
+            throw Error('Quality must be between 0 and 100');
+        }
+        if (format && !SUPPORTED_IMAGE_FORMATS.includes(format)) {
+            throw Error(`Format must be one of ${SUPPORTED_IMAGE_FORMATS.join(', ')}`);
+        }
+        return true;
+    }
+};
+function getWidths(widthStyle, file) {
+    let width1x = 0;
+    let width2x = 0;
+    const intrinsicImageWidth = file.details.image.width;
+    if (widthStyle.endsWith('px')) {
+        width1x = Math.min(Number(widthStyle.replace('px', '')), intrinsicImageWidth);
+    }
+    else {
+        width1x = Math.min(MAX_WIDTH_ALLOWED$1, intrinsicImageWidth);
+    }
+    width2x = Math.min(width1x * 2, intrinsicImageWidth);
+    return { width1x, width2x };
+}
+
+const MAX_WIDTH_ALLOWED = 4000;
+const getOptimizedImageAsset = (file, sizes, quality = 100, format) => {
+    if (!validateParams(file, quality, format)) ;
+    const url = file.url;
+    const maxWidth = Math.min(file.details.image.width, MAX_WIDTH_ALLOWED);
+    const numOfParts = Math.max(2, Math.ceil(maxWidth / 500));
+    const widthParts = Array.from({ length: numOfParts }, (_, index) => Math.ceil((index + 1) * (maxWidth / numOfParts)));
+    const srcSet = sizes
+        ? widthParts.map((width) => `${getOptimizedImageUrl(url, width, quality, format)} ${width}w`)
+        : [];
+    const intrinsicImageWidth = file.details.image.width;
+    if (intrinsicImageWidth > MAX_WIDTH_ALLOWED) {
+        srcSet.push(`${getOptimizedImageUrl(url, undefined, quality, format)} ${intrinsicImageWidth}w`);
+    }
+    const returnedUrl = getOptimizedImageUrl(url, file.details.image.width > 2000 ? 2000 : undefined, quality, format);
+    const optimizedImageAsset = {
+        url: returnedUrl,
+        srcSet,
+        sizes,
+        file,
+    };
+    return optimizedImageAsset;
+    function validateParams(file, quality, format) {
+        if (!file.details.image) {
+            throw Error('No image in file asset to transform');
+        }
+        if (quality < 0 || quality > 100) {
+            throw Error('Quality must be between 0 and 100');
+        }
+        if (format && !SUPPORTED_IMAGE_FORMATS.includes(format)) {
+            throw Error(`Format must be one of ${SUPPORTED_IMAGE_FORMATS.join(', ')}`);
+        }
+        return true;
+    }
+};
+
+const transformMedia = (asset, variables, resolveDesignValue, variableName, path) => {
+    let value;
+    //TODO: this will be better served by injectable type transformers instead of if statement
+    if (variableName === 'cfImageAsset') {
+        const optionsVariableName = 'cfImageOptions';
+        const options = resolveDesignValue(variables[optionsVariableName]?.type === 'DesignValue'
+            ? variables[optionsVariableName].valuesByBreakpoint
+            : {}, optionsVariableName);
+        if (!options) {
+            console.error(`Error transforming image asset: Required variable [${optionsVariableName}] missing from component definition`);
+            return;
+        }
+        try {
+            value = getOptimizedImageAsset(asset.fields.file, options.targetSize, Number(options.quality), options.format);
+            return value;
+        }
+        catch (error) {
+            console.error('Error transforming image asset', error);
+        }
+        return;
+    }
+    if (variableName === 'cfBackgroundImageUrl') {
+        const width = resolveDesignValue(variables['cfWidth']?.type === 'DesignValue' ? variables['cfWidth'].valuesByBreakpoint : {}, 'cfWidth');
+        const optionsVariableName = 'cfBackgroundImageOptions';
+        const options = resolveDesignValue(variables[optionsVariableName]?.type === 'DesignValue'
+            ? variables[optionsVariableName].valuesByBreakpoint
+            : {}, optionsVariableName);
+        if (!options) {
+            console.error(`Error transforming image asset: Required variable [${optionsVariableName}] missing from component definition`);
+            return;
+        }
+        try {
+            value = getOptimizedBackgroundImageAsset(asset.fields.file, width, Number(options.quality), options.format);
+            return value;
+        }
+        catch (error) {
+            console.error('Error transforming image asset', error);
+        }
+        return;
+    }
+    // return getBoundValue(asset, entityStore, binding, path);
+    return getBoundValue(asset, path);
+};
+
+const transformBoundContentValue = (variables, entityStore, binding, resolveDesignValue, variableName, variableDefinition, path) => {
+    const entityOrAsset = entityStore.getEntryOrAsset(binding, path);
+    if (!entityOrAsset)
+        return;
+    switch (variableDefinition.type) {
+        case 'Media':
+            return transformMedia(entityOrAsset, variables, resolveDesignValue, variableName, path);
+        case 'RichText':
+            return transformRichText(entityOrAsset, path);
+        default:
+            return getBoundValue(entityOrAsset, path);
+    }
+};
+
+const getDataFromTree = (tree) => {
+    let dataSource = {};
+    let unboundValues = {};
+    const queue = [...tree.root.children];
+    while (queue.length) {
+        const node = queue.shift();
+        if (!node) {
+            continue;
+        }
+        dataSource = { ...dataSource, ...node.data.dataSource };
+        unboundValues = { ...unboundValues, ...node.data.unboundValues };
+        if (node.children.length) {
+            queue.push(...node.children);
+        }
+    }
+    return {
+        dataSource,
+        unboundValues,
+    };
+};
+
+const builtInStyles = {
+    cfVerticalAlignment: {
+        validations: {
+            in: [
+                {
+                    value: 'start',
+                    displayName: 'Align left',
+                },
+                {
+                    value: 'center',
+                    displayName: 'Align center',
+                },
+                {
+                    value: 'end',
+                    displayName: 'Align right',
+                },
+            ],
+        },
+        type: 'Text',
+        group: 'style',
+        description: 'The horizontal alignment of the section',
+        defaultValue: 'center',
+        displayName: 'Vertical alignment',
+    },
+    cfHorizontalAlignment: {
+        validations: {
+            in: [
+                {
+                    value: 'start',
+                    displayName: 'Align top',
+                },
+                {
+                    value: 'center',
+                    displayName: 'Align center',
+                },
+                {
+                    value: 'end',
+                    displayName: 'Align bottom',
+                },
+            ],
+        },
+        type: 'Text',
+        group: 'style',
+        description: 'The horizontal alignment of the section',
+        defaultValue: 'center',
+        displayName: 'Horizontal alignment',
+    },
+    cfMargin: {
+        displayName: 'Margin',
+        type: 'Text',
+        group: 'style',
+        description: 'The margin of the section',
+        defaultValue: '0 0 0 0',
+    },
+    cfPadding: {
+        displayName: 'Padding',
+        type: 'Text',
+        group: 'style',
+        description: 'The padding of the section',
+        defaultValue: '0 0 0 0',
+    },
+    cfBackgroundColor: {
+        displayName: 'Background color',
+        type: 'Text',
+        group: 'style',
+        description: 'The background color of the section',
+        defaultValue: 'rgba(255, 255, 255, 0)',
+    },
+    cfWidth: {
+        displayName: 'Width',
+        type: 'Text',
+        group: 'style',
+        description: 'The width of the section',
+        defaultValue: 'fill',
+    },
+    cfHeight: {
+        displayName: 'Height',
+        type: 'Text',
+        group: 'style',
+        description: 'The height of the section',
+        defaultValue: 'fit-content',
+    },
+    cfMaxWidth: {
+        displayName: 'Max width',
+        type: 'Text',
+        group: 'style',
+        description: 'The max-width of the section',
+        defaultValue: 'none',
+    },
+    cfFlexDirection: {
+        displayName: 'Direction',
+        type: 'Text',
+        group: 'style',
+        description: 'The orientation of the section',
+        defaultValue: 'column',
+    },
+    cfFlexWrap: {
+        displayName: 'Wrap objects',
+        type: 'Text',
+        group: 'style',
+        description: 'Wrap objects',
+        defaultValue: 'nowrap',
+    },
+    cfBorder: {
+        displayName: 'Border',
+        type: 'Text',
+        group: 'style',
+        description: 'The border of the section',
+        defaultValue: '0px solid rgba(0, 0, 0, 0)',
+    },
+    cfBorderRadius: {
+        displayName: 'Border Radius',
+        type: 'Text',
+        group: 'style',
+        description: 'The border radius of the section',
+        defaultValue: '0px',
+    },
+    cfGap: {
+        displayName: 'Gap',
+        type: 'Text',
+        group: 'style',
+        description: 'The spacing between the elements of the section',
+        defaultValue: '0px',
+    },
+    cfHyperlink: {
+        displayName: 'Hyperlink',
+        type: 'Text',
+        defaultValue: '',
+        validations: {
+            format: 'URL',
+        },
+        description: 'hyperlink for section or container',
+    },
+    cfOpenInNewTab: {
+        displayName: 'Hyperlink behaviour',
+        type: 'Boolean',
+        defaultValue: false,
+        description: 'To open hyperlink in new Tab or not',
+    },
+};
+const optionalBuiltInStyles = {
+    cfFontSize: {
+        displayName: 'Font Size',
+        type: 'Text',
+        group: 'style',
+        description: 'The font size of the element',
+        defaultValue: '16px',
+    },
+    cfFontWeight: {
+        validations: {
+            in: [
+                {
+                    value: '400',
+                    displayName: 'Normal',
+                },
+                {
+                    value: '500',
+                    displayName: 'Medium',
+                },
+                {
+                    value: '600',
+                    displayName: 'Semi Bold',
+                },
+            ],
+        },
+        displayName: 'Font Weight',
+        type: 'Text',
+        group: 'style',
+        description: 'The font weight of the element',
+        defaultValue: '400',
+    },
+    cfImageAsset: {
+        displayName: 'Image',
+        type: 'Media',
+        description: 'Image to display',
+    },
+    cfImageOptions: {
+        displayName: 'Image options',
+        type: 'Object',
+        group: 'style',
+        defaultValue: {
+            width: DEFAULT_IMAGE_WIDTH,
+            height: '100%',
+            objectFit: 'none',
+            objectPosition: 'center center',
+            quality: '100',
+            targetSize: DEFAULT_IMAGE_WIDTH,
+        },
+    },
+    cfBackgroundImageUrl: {
+        displayName: 'Background image',
+        type: 'Media',
+        description: 'Background image for component',
+    },
+    cfBackgroundImageOptions: {
+        displayName: 'Background image options',
+        type: 'Object',
+        group: 'style',
+        defaultValue: {
+            scaling: 'fill',
+            alignment: 'left top',
+            quality: '100',
+            targetSize: '2000px',
+        },
+    },
+    cfLineHeight: {
+        displayName: 'Line Height',
+        type: 'Text',
+        group: 'style',
+        description: 'The line height of the element',
+        defaultValue: '20px',
+    },
+    cfLetterSpacing: {
+        displayName: 'Letter Spacing',
+        type: 'Text',
+        group: 'style',
+        description: 'The letter spacing of the element',
+        defaultValue: '0px',
+    },
+    cfTextColor: {
+        displayName: 'Text Color',
+        type: 'Text',
+        group: 'style',
+        description: 'The text color of the element',
+        defaultValue: 'rgba(0, 0, 0, 1)',
+    },
+    cfTextAlign: {
+        validations: {
+            in: [
+                {
+                    value: 'left',
+                    displayName: 'Align left',
+                },
+                {
+                    value: 'center',
+                    displayName: 'Align center',
+                },
+                {
+                    value: 'right',
+                    displayName: 'Align right',
+                },
+            ],
+        },
+        displayName: 'Text Align',
+        type: 'Text',
+        group: 'style',
+        description: 'The text alignment of the element',
+        defaultValue: 'left',
+    },
+    cfTextTransform: {
+        validations: {
+            in: [
+                {
+                    value: 'none',
+                    displayName: 'Normal',
+                },
+                {
+                    value: 'capitalize',
+                    displayName: 'Capitalize',
+                },
+                {
+                    value: 'uppercase',
+                    displayName: 'Uppercase',
+                },
+                {
+                    value: 'lowercase',
+                    displayName: 'Lowercase',
+                },
+            ],
+        },
+        displayName: 'Text Transform',
+        type: 'Text',
+        group: 'style',
+        description: 'The text transform of the element',
+        defaultValue: 'none',
+    },
+    cfTextBold: {
+        displayName: 'Bold',
+        type: 'Boolean',
+        group: 'style',
+        description: 'The text bold of the element',
+        defaultValue: false,
+    },
+    cfTextItalic: {
+        displayName: 'Italic',
+        type: 'Boolean',
+        group: 'style',
+        description: 'The text italic of the element',
+        defaultValue: false,
+    },
+    cfTextUnderline: {
+        displayName: 'Underline',
+        type: 'Boolean',
+        group: 'style',
+        description: 'The text underline of the element',
+        defaultValue: false,
+    },
+};
+
+const designTokensRegistry = {};
+/**
+ * Register design tokens styling
+ * @param designTokenDefinition - {[key:string]: Record<string, string>}
+ * @returns void
+ */
+const defineDesignTokens = (designTokenDefinition) => {
+    Object.assign(designTokensRegistry, designTokenDefinition);
+};
+const templateStringRegex = /\${(.+?)}/g;
+const getDesignTokenRegistration = (breakpointValue, variableName) => {
+    if (!breakpointValue)
+        return breakpointValue;
+    let resolvedValue = '';
+    for (const part of breakpointValue.split(' ')) {
+        const tokenValue = templateStringRegex.test(part)
+            ? resolveSimpleDesignToken(part, variableName)
+            : part;
+        resolvedValue += `${tokenValue} `;
+    }
+    // Not trimming would end up with a trailing space that breaks the check in `calculateNodeDefaultHeight`
+    return resolvedValue.trim();
+};
+const resolveSimpleDesignToken = (templateString, variableName) => {
+    const nonTemplateValue = templateString.replace(templateStringRegex, '$1');
+    const [tokenCategory, tokenName] = nonTemplateValue.split('.');
+    const tokenValues = designTokensRegistry[tokenCategory];
+    if (tokenValues && tokenValues[tokenName]) {
+        if (variableName === 'cfBorder') {
+            const { width, style, color } = tokenValues[tokenName];
+            return `${width} ${style} ${color}`;
+        }
+        return tokenValues[tokenName];
+    }
+    if (builtInStyles[variableName]) {
+        return builtInStyles[variableName].defaultValue;
+    }
+    if (optionalBuiltInStyles[variableName]) {
+        return optionalBuiltInStyles[variableName].defaultValue;
+    }
+    return '0px';
+};
+
+const MEDIA_QUERY_REGEXP = /(<|>)(\d{1,})(px|cm|mm|in|pt|pc)$/;
+const toCSSMediaQuery = ({ query }) => {
+    if (query === '*')
+        return undefined;
+    const match = query.match(MEDIA_QUERY_REGEXP);
+    if (!match)
+        return undefined;
+    const [, operator, value, unit] = match;
+    if (operator === '<') {
+        const maxScreenWidth = Number(value) - 1;
+        return `(max-width: ${maxScreenWidth}${unit})`;
+    }
+    else if (operator === '>') {
+        const minScreenWidth = Number(value) + 1;
+        return `(min-width: ${minScreenWidth}${unit})`;
+    }
+    return undefined;
+};
+// Remove this helper when upgrading to TypeScript 5.0 - https://github.com/microsoft/TypeScript/issues/48829
+const findLast = (array, predicate) => {
+    return array.reverse().find(predicate);
+};
+// Initialise media query matchers. This won't include the always matching fallback breakpoint.
+const mediaQueryMatcher = (breakpoints) => {
+    const mediaQueryMatches = {};
+    const mediaQueryMatchers = breakpoints
+        .map((breakpoint) => {
+        const cssMediaQuery = toCSSMediaQuery(breakpoint);
+        if (!cssMediaQuery)
+            return undefined;
+        if (typeof window === 'undefined')
+            return undefined;
+        const mediaQueryMatcher = window.matchMedia(cssMediaQuery);
+        mediaQueryMatches[breakpoint.id] = mediaQueryMatcher.matches;
+        return { id: breakpoint.id, signal: mediaQueryMatcher };
+    })
+        .filter((matcher) => !!matcher);
+    return [mediaQueryMatchers, mediaQueryMatches];
+};
+const getActiveBreakpointIndex = (breakpoints, mediaQueryMatches, fallbackBreakpointIndex) => {
+    // The breakpoints are ordered (desktop-first: descending by screen width)
+    const breakpointsWithMatches = breakpoints.map(({ id }, index) => ({
+        id,
+        index,
+        // The fallback breakpoint with wildcard query will always match
+        isMatch: mediaQueryMatches[id] ?? index === fallbackBreakpointIndex,
+    }));
+    // Find the last breakpoint in the list that matches (desktop-first: the narrowest one)
+    const mostSpecificIndex = findLast(breakpointsWithMatches, ({ isMatch }) => isMatch)?.index;
+    return mostSpecificIndex ?? fallbackBreakpointIndex;
+};
+const getFallbackBreakpointIndex = (breakpoints) => {
+    // We assume that there will be a single breakpoint which uses the wildcard query.
+    // If there is none, we just take the first one in the list.
+    return Math.max(breakpoints.findIndex(({ query }) => query === '*'), 0);
+};
+const builtInStylesWithDesignTokens = [
+    'cfMargin',
+    'cfPadding',
+    'cfGap',
+    'cfWidth',
+    'cfHeight',
+    'cfBackgroundColor',
+    'cfBorder',
+    'cfBorderRadius',
+    'cfFontSize',
+    'cfLineHeight',
+    'cfLetterSpacing',
+    'cfTextColor',
+];
+const getValueForBreakpoint = (valuesByBreakpoint, breakpoints, activeBreakpointIndex, variableName) => {
+    const eventuallyResolveDesignTokens = (value) => {
+        // For some built-in design propertier, we support design tokens
+        if (builtInStylesWithDesignTokens.includes(variableName)) {
+            return getDesignTokenRegistration(value, variableName);
+        }
+        // For all other properties, we just return the breakpoint-specific value
+        return value;
+    };
+    if (valuesByBreakpoint instanceof Object) {
+        // Assume that the values are sorted by media query to apply the cascading CSS logic
+        for (let index = activeBreakpointIndex; index >= 0; index--) {
+            const breakpointId = breakpoints[index].id;
+            if (valuesByBreakpoint[breakpointId]) {
+                // If the value is defined, we use it and stop the breakpoints cascade
+                return eventuallyResolveDesignTokens(valuesByBreakpoint[breakpointId]);
+            }
+        }
+        // If no breakpoint matched, we search and apply the fallback breakpoint
+        const fallbackBreakpointIndex = getFallbackBreakpointIndex(breakpoints);
+        const fallbackBreakpointId = breakpoints[fallbackBreakpointIndex].id;
+        return eventuallyResolveDesignTokens(valuesByBreakpoint[fallbackBreakpointId]);
+    }
+    else {
+        // Old design properties did not support breakpoints, keep for backward compatibility
+        return valuesByBreakpoint;
+    }
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isLinkToAsset = (variable) => {
+    if (!variable)
+        return false;
+    if (typeof variable !== 'object')
+        return false;
+    return (variable.sys?.linkType === 'Asset' &&
+        typeof variable.sys?.id === 'string' &&
+        !!variable.sys?.id &&
+        variable.sys?.type === 'Link');
+};
+
+const isLink = (maybeLink) => {
+    if (maybeLink === null)
+        return false;
+    if (typeof maybeLink !== 'object')
+        return false;
+    const link = maybeLink;
+    return Boolean(link.sys?.id) && link.sys?.type === 'Link';
+};
+
+/**
+ * This module encapsulates format of the path to a deep reference.
+ */
+const parseDataSourcePathIntoFieldset = (path) => {
+    const parsedPath = parseDeepPath(path);
+    if (null === parsedPath) {
+        throw new Error(`Cannot parse path '${path}' as deep path`);
+    }
+    return parsedPath.fields.map((field) => [null, field, '~locale']);
+};
+/**
+ * Parse path into components, supports  L1 references (one reference follow) atm.
+ * @param path from data source. eg. `/uuid123/fields/image/~locale/fields/file/~locale`
+ *                               eg. `/uuid123/fields/file/~locale/fields/title/~locale`
+ * @returns
+ */
+const parseDataSourcePathWithL1DeepBindings = (path) => {
+    const parsedPath = parseDeepPath(path);
+    if (null === parsedPath) {
+        throw new Error(`Cannot parse path '${path}' as deep path`);
+    }
+    return {
+        key: parsedPath.key,
+        field: parsedPath.fields[0],
+        referentField: parsedPath.fields[1],
+    };
+};
+/**
+ * Detects if paths is valid deep-path, like:
+ *  - /gV6yKXp61hfYrR7rEyKxY/fields/mainStory/~locale/fields/cover/~locale/fields/title/~locale
+ * or regular, like:
+ *  - /6J8eA60yXwdm5eyUh9fX6/fields/mainStory/~locale
+ * @returns
+ */
+const isDeepPath = (deepPathCandidate) => {
+    const deepPathParsed = parseDeepPath(deepPathCandidate);
+    if (!deepPathParsed) {
+        return false;
+    }
+    return deepPathParsed.fields.length > 1;
+};
+const parseDeepPath = (deepPathCandidate) => {
+    // ALGORITHM:
+    // We start with deep path in form:
+    // /uuid123/fields/mainStory/~locale/fields/cover/~locale/fields/title/~locale
+    // First turn string into array of segments
+    //      ['', 'uuid123', 'fields', 'mainStory', '~locale', 'fields', 'cover', '~locale', 'fields', 'title', '~locale']
+    // Then group segments into intermediate represenatation - chunks, where each non-initial chunk starts with 'fields'
+    //      [
+    //        [ "", "uuid123" ],
+    //        [ "fields", "mainStory", "~locale" ],
+    //        [ "fields", "cover", "~locale" ],
+    //        [ "fields", "title", "~locale" ]
+    //      ]
+    // Then check "initial" chunk for corretness
+    // Then check all "field-leading" chunks for correctness
+    const isValidInitialChunk = (initialChunk) => {
+        // must have start with '' and have at least 2 segments, second non-empty
+        // eg. /-_432uuid123123
+        return /^\/([^/^~]+)$/.test(initialChunk.join('/'));
+    };
+    const isValidFieldChunk = (fieldChunk) => {
+        // must start with 'fields' and have at least 3 segments, second non-empty and last segment must be '~locale'
+        // eg. fields/-32234mainStory/~locale
+        return /^fields\/[^/^~]+\/~locale$/.test(fieldChunk.join('/'));
+    };
+    const deepPathSegments = deepPathCandidate.split('/');
+    const chunks = chunkSegments(deepPathSegments, { startNextChunkOnElementEqualTo: 'fields' });
+    if (chunks.length <= 1) {
+        return null; // malformed path, even regular paths have at least 2 chunks
+    }
+    else if (chunks.length === 2) {
+        return null; // deep paths have at least 3 chunks
+    }
+    // With 3+ chunks we can now check for deep path correctness
+    const [initialChunk, ...fieldChunks] = chunks;
+    if (!isValidInitialChunk(initialChunk)) {
+        return null;
+    }
+    if (!fieldChunks.every(isValidFieldChunk)) {
+        return null;
+    }
+    return {
+        key: initialChunk[1], // pick uuid from initial chunk ['','uuid123'],
+        fields: fieldChunks.map((fieldChunk) => fieldChunk[1]), // pick  only fieldName eg. from  ['fields','mainStory', '~locale'] we pick `mainStory`
+    };
+};
+const chunkSegments = (segments, { startNextChunkOnElementEqualTo }) => {
+    const chunks = [];
+    let currentChunk = [];
+    const isSegmentBeginningOfChunk = (segment) => segment === startNextChunkOnElementEqualTo;
+    const excludeEmptyChunks = (chunk) => chunk.length > 0;
+    for (let i = 0; i < segments.length; i++) {
+        const isInitialElement = i === 0;
+        const segment = segments[i];
+        if (isInitialElement) {
+            currentChunk = [segment];
+        }
+        else if (isSegmentBeginningOfChunk(segment)) {
+            chunks.push(currentChunk);
+            currentChunk = [segment];
+        }
+        else {
+            currentChunk.push(segment);
+        }
+    }
+    chunks.push(currentChunk);
+    return chunks.filter(excludeEmptyChunks);
+};
+
+const sendMessage = (eventType, data) => {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    console.debug(`[experiences-sdk-react::sendMessage] Sending message [${eventType}]`, {
+        source: 'customer-app',
+        eventType,
+        payload: data,
+    });
+    window.parent?.postMessage({
+        source: 'customer-app',
+        eventType,
+        payload: data,
+    }, '*');
+};
+
+/**
+ * Base Store for entities
+ * Can be extended for the different loading behaviours (editor, production, ..)
+ */
+class EntityStoreBase {
+    constructor({ entities, locale }) {
+        this.entryMap = new Map();
+        this.assetMap = new Map();
+        this.locale = locale;
+        for (const entity of entities) {
+            this.addEntity(entity);
+        }
+    }
+    get entities() {
+        return [...this.entryMap.values(), ...this.assetMap.values()];
+    }
+    updateEntity(entity) {
+        this.addEntity(entity);
+    }
+    getEntryOrAsset(linkOrEntryOrAsset, path) {
+        if (isDeepPath(path)) {
+            return this.getDeepEntry(linkOrEntryOrAsset, path);
+        }
+        let entity;
+        if (isLink(linkOrEntryOrAsset)) {
+            const resolvedEntity = linkOrEntryOrAsset.sys.linkType === 'Entry'
+                ? this.entryMap.get(linkOrEntryOrAsset.sys.id)
+                : this.assetMap.get(linkOrEntryOrAsset.sys.id);
+            if (!resolvedEntity || resolvedEntity.sys.type !== linkOrEntryOrAsset.sys.linkType) {
+                console.warn(`Experience references unresolved entity: ${JSON.stringify(linkOrEntryOrAsset)}`);
+                return;
+            }
+            entity = resolvedEntity;
+        }
+        else {
+            // We already have the complete entity in preview & delivery (resolved by the CMA client)
+            entity = linkOrEntryOrAsset;
+        }
+        return entity;
+    }
+    /**
+     * @deprecated in the base class this should be simply an abstract method
+     * @param entityLink
+     * @param path
+     * @returns
+     */
+    getValue(entityLink, path) {
+        const entity = this.getEntity(entityLink.sys.linkType, entityLink.sys.id);
+        if (!entity) {
+            // TODO: move to `debug` utils once it is extracted
+            console.warn(`Unresolved entity reference: ${entityLink.sys.linkType} with ID ${entityLink.sys.id}`);
+            return;
+        }
+        return get(entity, path);
+    }
+    getEntityFromLink(link) {
+        const resolvedEntity = link.sys.linkType === 'Entry'
+            ? this.entryMap.get(link.sys.id)
+            : this.assetMap.get(link.sys.id);
+        if (!resolvedEntity || resolvedEntity.sys.type !== link.sys.linkType) {
+            console.warn(`Experience references unresolved entity: ${JSON.stringify(link)}`);
+            return;
+        }
+        return resolvedEntity;
+    }
+    getEntitiesFromMap(type, ids) {
+        const resolved = [];
+        const missing = [];
+        for (const id of ids) {
+            const entity = this.getEntity(type, id);
+            if (entity) {
+                resolved.push(entity);
+            }
+            else {
+                missing.push(id);
+            }
+        }
+        return {
+            resolved,
+            missing,
+        };
+    }
+    addEntity(entity) {
+        if (this.isAsset(entity)) {
+            this.assetMap.set(entity.sys.id, entity);
+        }
+        else {
+            this.entryMap.set(entity.sys.id, entity);
+        }
+    }
+    async fetchAsset(id) {
+        const { resolved, missing } = this.getEntitiesFromMap('Asset', [id]);
+        if (missing.length) {
+            // TODO: move to `debug` utils once it is extracted
+            console.warn(`Asset "${id}" is not in the store`);
+            return;
+        }
+        return resolved[0];
+    }
+    async fetchAssets(ids) {
+        const { resolved, missing } = this.getEntitiesFromMap('Asset', ids);
+        if (missing.length) {
+            throw new Error(`Missing assets in the store (${missing.join(',')})`);
+        }
+        return resolved;
+    }
+    async fetchEntry(id) {
+        const { resolved, missing } = this.getEntitiesFromMap('Entry', [id]);
+        if (missing.length) {
+            // TODO: move to `debug` utils once it is extracted
+            console.warn(`Entry "${id}" is not in the store`);
+            return;
+        }
+        return resolved[0];
+    }
+    async fetchEntries(ids) {
+        const { resolved, missing } = this.getEntitiesFromMap('Entry', ids);
+        if (missing.length) {
+            throw new Error(`Missing assets in the store (${missing.join(',')})`);
+        }
+        return resolved;
+    }
+    getDeepEntry(linkOrEntryOrAsset, path) {
+        const resolveFieldset = (unresolvedFieldset, headEntry) => {
+            const resolvedFieldset = [];
+            let entityToResolveFieldsFrom = headEntry;
+            for (let i = 0; i < unresolvedFieldset.length; i++) {
+                const isLeaf = i === unresolvedFieldset.length - 1; // with last row, we are not expecting a link, but a value
+                const row = unresolvedFieldset[i];
+                const [, field, _localeQualifier] = row;
+                if (!entityToResolveFieldsFrom) {
+                    throw new Error(`Logic Error: Cannot resolve field ${field} of a fieldset as there is no entity to resolve it from.`);
+                }
+                if (isLeaf) {
+                    resolvedFieldset.push([entityToResolveFieldsFrom, field, _localeQualifier]);
+                    break;
+                }
+                const fieldValue = get(entityToResolveFieldsFrom, ['fields', field]);
+                if (undefined === fieldValue) {
+                    return {
+                        resolvedFieldset,
+                        isFullyResolved: false,
+                        reason: `Cannot resolve field Link<${entityToResolveFieldsFrom.sys.type}>(sys.id=${entityToResolveFieldsFrom.sys.id}).fields[${field}] as field value is not defined`,
+                    };
+                }
+                else if (isLink(fieldValue)) {
+                    const entity = this.getEntityFromLink(fieldValue);
+                    if (entity === undefined) {
+                        return {
+                            resolvedFieldset,
+                            isFullyResolved: false,
+                            reason: `Field reference Link (sys.id=${fieldValue.sys.id}) not found in the EntityStore, waiting...`,
+                        };
+                    }
+                    resolvedFieldset.push([entityToResolveFieldsFrom, field, _localeQualifier]);
+                    entityToResolveFieldsFrom = entity; // we move up
+                }
+                else {
+                    // TODO: Eg. when someone changed the schema and the field is not a link anymore, what should we return then?
+                    throw new Error(`LogicError: Invalid value of a field we consider a reference field. Cannot resolve field ${field} of a fieldset as it is not a link, neither undefined.`);
+                }
+            }
+            return {
+                resolvedFieldset,
+                isFullyResolved: true,
+            };
+        };
+        const headEntity = isLink(linkOrEntryOrAsset)
+            ? this.getEntityFromLink(linkOrEntryOrAsset)
+            : linkOrEntryOrAsset;
+        if (undefined === headEntity) {
+            return;
+        }
+        const unresolvedFieldset = parseDataSourcePathIntoFieldset(path);
+        // The purpose here is to take this intermediate representation of the deep-path
+        // and to follow the links to the leaf-entity and field
+        // in case we can't follow till the end, we should signal that there was null-reference in the path
+        const { resolvedFieldset, isFullyResolved, reason } = resolveFieldset(unresolvedFieldset, headEntity);
+        if (!isFullyResolved) {
+            reason &&
+                console.debug(`[exp-builder.sdk::EntityStoreBased::getValueDeep()] Deep path wasn't resolved till leaf node, falling back to undefined, because: ${reason}`);
+            return;
+        }
+        const [leafEntity] = resolvedFieldset[resolvedFieldset.length - 1];
+        return leafEntity;
+    }
+    isAsset(entity) {
+        return entity.sys.type === 'Asset';
+    }
+    getEntity(type, id) {
+        if (type === 'Asset') {
+            return this.assetMap.get(id);
+        }
+        return this.entryMap.get(id);
+    }
+    toJSON() {
+        return {
+            entryMap: Object.fromEntries(this.entryMap),
+            assetMap: Object.fromEntries(this.assetMap),
+            locale: this.locale,
+        };
+    }
+}
+
+/**
+ * EntityStore which resolves entries and assets from the editor
+ * over the sendMessage and subscribe functions.
+ */
+class EditorEntityStore extends EntityStoreBase {
+    constructor({ entities, locale, sendMessage, subscribe, timeoutDuration = 3000, }) {
+        super({ entities, locale });
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.requestCache = new Map();
+        this.cacheIdSeperator = ',';
+        this.sendMessage = sendMessage;
+        this.subscribe = subscribe;
+        this.timeoutDuration = timeoutDuration;
+    }
+    cleanupPromise(referenceId) {
+        setTimeout(() => {
+            this.requestCache.delete(referenceId);
+        }, 300);
+    }
+    getCacheId(id) {
+        return id.length === 1 ? id[0] : id.join(this.cacheIdSeperator);
+    }
+    async fetchEntity(type, ids, skipCache = false) {
+        let missing;
+        if (!skipCache) {
+            const { missing: missingFromCache, resolved } = this.getEntitiesFromMap(type, ids);
+            if (missingFromCache.length === 0) {
+                // everything is already in cache
+                return resolved;
+            }
+            missing = missingFromCache;
+        }
+        else {
+            missing = [...ids];
+        }
+        const cacheId = this.getCacheId(missing);
+        const openRequest = this.requestCache.get(cacheId);
+        if (openRequest) {
+            return openRequest;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const newPromise = new Promise((resolve, reject) => {
+            const unsubscribe = this.subscribe(PostMessageMethods$2.REQUESTED_ENTITIES, (message) => {
+                const messageIds = [
+                    ...message.entities.map((entity) => entity.sys.id),
+                    ...(message.missingEntityIds ?? []),
+                ];
+                if (missing.every((id) => messageIds.find((entityId) => entityId === id))) {
+                    clearTimeout(timeout);
+                    resolve(message.entities);
+                    this.cleanupPromise(cacheId);
+                    ids.forEach((id) => this.cleanupPromise(id));
+                    unsubscribe();
+                }
+                else {
+                    console.warn('Unexpected entities received in REQUESTED_ENTITIES. Ignoring this response.');
+                }
+            });
+            const timeout = setTimeout(() => {
+                reject(new Error(`Request for entities timed out ${this.timeoutDuration}ms} for ${cacheId}`));
+                this.cleanupPromise(cacheId);
+                ids.forEach((id) => this.cleanupPromise(id));
+                unsubscribe();
+            }, this.timeoutDuration);
+            this.sendMessage(PostMessageMethods$2.REQUEST_ENTITIES, {
+                entityIds: missing,
+                entityType: type,
+                locale: this.locale,
+            });
+        });
+        this.requestCache.set(cacheId, newPromise);
+        ids.forEach((cid) => {
+            this.requestCache.set(cid, newPromise);
+        });
+        const result = (await newPromise);
+        result.forEach((value) => {
+            this.addEntity(value);
+        });
+        return this.getEntitiesFromMap(type, ids).resolved;
+    }
+    async fetchAsset(id, skipCache = false) {
+        try {
+            return (await this.fetchAssets([id], skipCache))[0];
+        }
+        catch (err) {
+            // TODO: move to debug utils once it is extracted
+            console.warn(`Failed to request asset ${id}`);
+            return undefined;
+        }
+    }
+    fetchAssets(ids, skipCache = false) {
+        return this.fetchEntity('Asset', ids, skipCache);
+    }
+    async fetchEntry(id, skipCache = false) {
+        try {
+            return (await this.fetchEntries([id], skipCache))[0];
+        }
+        catch (err) {
+            // TODO: move to debug utils once it is extracted
+            console.warn(`Failed to request entry ${id}`, err);
+            return undefined;
+        }
+    }
+    fetchEntries(ids, skipCache = false) {
+        return this.fetchEntity('Entry', ids, skipCache);
+    }
+}
+
+// The default of 3s in the EditorEntityStore is sometimes timing out and
+// leads to not rendering bound content and assemblies.
+const REQUEST_TIMEOUT = 10000;
+class EditorModeEntityStore extends EditorEntityStore {
+    constructor({ entities, locale }) {
+        console.debug(`[experiences-sdk-react] Initializing editor entity store with ${entities.length} entities for locale ${locale}.`, { entities });
+        const subscribe = (method, cb) => {
+            const handleMessage = (event) => {
+                const data = JSON.parse(event.data);
+                if (typeof data !== 'object' || !data)
+                    return;
+                if (data.source !== 'composability-app')
+                    return;
+                if (data.eventType === method) {
+                    cb(data.payload);
+                }
+            };
+            if (typeof window !== 'undefined') {
+                window.addEventListener('message', handleMessage);
+            }
+            return () => {
+                if (typeof window !== 'undefined') {
+                    window.removeEventListener('message', handleMessage);
+                }
+            };
+        };
+        super({ entities, sendMessage, subscribe, locale, timeoutDuration: REQUEST_TIMEOUT });
+        this.locale = locale;
+    }
+    /**
+     * This function collects and returns the list of requested entries and assets. Additionally, it checks
+     * upfront whether any async fetching logic is actually happening. If not, it returns a plain `false` value, so we
+     * can detect this early and avoid unnecessary re-renders.
+     * @param entityLinks
+     * @returns false if no async fetching is happening, otherwise a promise that resolves when all entities are fetched
+     */
+    async fetchEntities({ missingEntryIds, missingAssetIds, skipCache = false, }) {
+        // Entries and assets will be stored in entryMap and assetMap
+        await Promise.all([
+            this.fetchEntries(missingEntryIds, skipCache),
+            this.fetchAssets(missingAssetIds, skipCache),
+        ]);
+    }
+    getMissingEntityIds(entityLinks) {
+        const entryLinks = entityLinks.filter((link) => link.sys?.linkType === 'Entry');
+        const assetLinks = entityLinks.filter((link) => link.sys?.linkType === 'Asset');
+        const uniqueEntryIds = [...new Set(entryLinks.map((link) => link.sys.id))];
+        const uniqueAssetIds = [...new Set(assetLinks.map((link) => link.sys.id))];
+        const { missing: missingEntryIds } = this.getEntitiesFromMap('Entry', uniqueEntryIds);
+        const { missing: missingAssetIds } = this.getEntitiesFromMap('Asset', uniqueAssetIds);
+        return { missingEntryIds, missingAssetIds };
+    }
+    getValue(entityLinkOrEntity, path) {
+        const entity = this.getEntryOrAsset(entityLinkOrEntity, path.join('/'));
+        if (!entity) {
+            return;
+        }
+        const fieldValue = get(entity, path);
+        // walk around to render asset files
+        return fieldValue && typeof fieldValue == 'object' && fieldValue.url
+            ? fieldValue.url
+            : fieldValue;
+    }
+}
+
+var VisualEditorMode;
+(function (VisualEditorMode) {
+    VisualEditorMode["LazyLoad"] = "lazyLoad";
+    VisualEditorMode["InjectScript"] = "injectScript";
+})(VisualEditorMode || (VisualEditorMode = {}));
+
+function treeVisit$1(initialNode, onNode) {
+    // returns last used index
+    const _treeVisit = (currentNode, currentIndex, currentDepth) => {
+        // Copy children in case of onNode removing it as we pass the node by reference
+        const children = [...currentNode.children];
+        onNode(currentNode, currentIndex, currentDepth);
+        let nextAvailableIndex = currentIndex + 1;
+        const lastUsedIndex = currentIndex;
+        for (const child of children) {
+            const lastUsedIndex = _treeVisit(child, nextAvailableIndex, currentDepth + 1);
+            nextAvailableIndex = lastUsedIndex + 1;
+        }
+        return lastUsedIndex;
+    };
+    _treeVisit(initialNode, 0, 0);
+}
+
+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.
+     * TODO: should it be called `extractLeafReferent` ? or `followToLeafReferent`
+     */
+    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$1(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;
+}
+
+var css_248z$7 = ".styles-module_DraggableComponent__m5-dA {\n  pointer-events: all;\n  position: relative;\n  transition: outline 0.2s;\n  cursor: grab;\n  box-sizing: border-box;\n  display: flex;\n}\n\n.styles-module_DraggableComponent__m5-dA: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  pointer-events: none;\n}\n\n.styles-module_DraggableClone__X8zTA:before {\n  outline: 2px solid var(--exp-builder-blue500);\n}\n\n.styles-module_DraggableClone__X8zTA,\n.styles-module_DraggableClone__X8zTA * {\n  pointer-events: none !important;\n}\n\n.styles-module_DraggableComponent__m5-dA:not(.styles-module_userIsDragging__lqbjG) :not(.styles-module_DraggableComponent__m5-dA) {\n  pointer-events: none;\n}\n\n.styles-module_isDragging__WHjPU {\n  overflow: hidden;\n}\n\n.styles-module_isSelected__BzICQ:before {\n  outline: 2px solid transparent !important;\n}\n\n.styles-module_overlay__r4th9 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  min-width: max-content;\n  height: 24px;\n  z-index: 1;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 14px;\n  font-weight: 500;\n  background-color: var(--exp-builder-gray500);\n  color: var(--exp-builder-color-white);\n  border-radius: 0 0 2px 0;\n  padding: 4px 12px 4px 12px;\n  transition: opacity 0.2s;\n  opacity: 0;\n  text-wrap: nowrap;\n}\n\n.styles-module_overlayContainer__eiX-5 {\n  opacity: 0;\n}\n\n.styles-module_overlayAssembly__tOzZU {\n  background-color: var(--exp-builder-purple600);\n}\n\n.styles-module_userIsDragging__lqbjG > .styles-module_overlay__r4th9,\n.styles-module_userIsDragging__lqbjG > .styles-module_overlayContainer__eiX-5 {\n  opacity: 0 !important;\n}\n\n.styles-module_userIsDragging__lqbjG:before {\n  outline: 2px solid transparent !important;\n}\n\n.styles-module_DraggableComponent__m5-dA:hover:not(:has(div[data-rfd-draggable-id]:hover)) > .styles-module_overlay__r4th9 {\n  opacity: 1;\n}\n\n.styles-module_DraggableComponent__m5-dA:hover:before,\n.styles-module_DraggableComponent__m5-dA:hover div[data-rfd-draggable-id]:before {\n  outline: 2px dashed var(--exp-builder-gray500);\n}\n\n.styles-module_DraggableComponent__m5-dA:hover:not(:has(div[data-rfd-draggable-id]:hover)):before {\n  outline: 2px solid var(--exp-builder-gray500);\n}\n\n.styles-module_isAssemblyBlock__Y3Avk:hover:before,\n.styles-module_isAssemblyBlock__Y3Avk:hover div[data-rfd-draggable-id]:before,\n.styles-module_DraggableComponent__m5-dA:hover div[data-rfd-draggable-id][data-cf-node-block-type^='assembly']:before {\n  outline: 2px dashed var(--exp-builder-purple600);\n}\n\n.styles-module_isAssemblyBlock__Y3Avk:hover:not(:has(div[data-rfd-draggable-id]:hover)):before {\n  outline: 2px solid var(--exp-builder-purple600);\n}\n";
+var styles$3 = {"DraggableComponent":"styles-module_DraggableComponent__m5-dA","DraggableClone":"styles-module_DraggableClone__X8zTA","userIsDragging":"styles-module_userIsDragging__lqbjG","isDragging":"styles-module_isDragging__WHjPU","isSelected":"styles-module_isSelected__BzICQ","overlay":"styles-module_overlay__r4th9","overlayContainer":"styles-module_overlayContainer__eiX-5","overlayAssembly":"styles-module_overlayAssembly__tOzZU","isAssemblyBlock":"styles-module_isAssemblyBlock__Y3Avk"};
+styleInject(css_248z$7);
+
+const SCROLL_STATES = {
+    Start: 'scrollStart',
+    IsScrolling: 'isScrolling',
+    End: 'scrollEnd',
+};
+const OUTGOING_EVENTS = {
+    Connected: 'connected',
+    DesignTokens: 'registerDesignTokens',
+    HoveredSection: 'hoveredSection',
+    MouseMove: 'mouseMove',
+    NewHoveredElement: 'newHoveredElement',
+    ComponentSelected: 'componentSelected',
+    RegisteredComponents: 'registeredComponents',
+    RequestComponentTreeUpdate: 'requestComponentTreeUpdate',
+    ComponentDragCanceled: 'componentDragCanceled',
+    ComponentDropped: 'componentDropped',
+    ComponentMoved: 'componentMoved',
+    CanvasReload: 'canvasReload',
+    UpdateSelectedComponentCoordinates: 'updateSelectedComponentCoordinates',
+    UpdateHoveredComponentCoordinates: 'updateHoveredComponentCoordinates',
+    CanvasScroll: 'canvasScrolling',
+    CanvasError: 'canvasError',
+    ComponentMoveStarted: 'componentMoveStarted',
+    ComponentMoveEnded: 'componentMoveEnded',
+    OutsideCanvasClick: 'outsideCanvasClick',
+};
+const INCOMING_EVENTS = {
+    RequestEditorMode: 'requestEditorMode',
+    ExperienceUpdated: 'componentTreeUpdated',
+    ComponentDraggingChanged: 'componentDraggingChanged',
+    ComponentDragCanceled: 'componentDragCanceled',
+    ComponentDragStarted: 'componentDragStarted',
+    ComponentDragEnded: 'componentDragEnded',
+    ComponentMoveEnded: 'componentMoveEnded',
+    CanvasResized: 'canvasResized',
+    SelectComponent: 'selectComponent',
+    HoverComponent: 'hoverComponent',
+    UpdatedEntity: 'updatedEntity',
+    AssembliesAdded: 'assembliesAdded',
+    AssembliesRegistered: 'assembliesRegistered',
+    InitEditor: 'initEditor',
+    MouseMove: 'mouseMove',
+};
+const INTERNAL_EVENTS = {
+    ComponentsRegistered: 'cfComponentsRegistered',
+    VisualEditorInitialize: 'cfVisualEditorInitialize',
+};
+const VISUAL_EDITOR_EVENTS = {
+    Ready: 'cfVisualEditorReady',
+};
+const CONTENTFUL_COMPONENTS = {
+    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: 'button',
+        name: 'Button',
+    },
+    heading: {
+        id: 'heading',
+        name: 'Heading',
+    },
+    image: {
+        id: 'image',
+        name: 'Image',
+    },
+    richText: {
+        id: 'richText',
+        name: 'Rich Text',
+    },
+    text: {
+        id: 'text',
+        name: 'Text',
+    },
+};
+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 CF_STYLE_ATTRIBUTES = [
+    'cfHorizontalAlignment',
+    'cfVerticalAlignment',
+    'cfMargin',
+    'cfPadding',
+    'cfBackgroundColor',
+    'cfWidth',
+    'cfMaxWidth',
+    'cfHeight',
+    'cfImageAsset',
+    'cfImageOptions',
+    'cfBackgroundImageUrl',
+    'cfBackgroundImageOptions',
+    'cfFlexDirection',
+    'cfFlexWrap',
+    'cfBorder',
+    'cfBorderRadius',
+    'cfGap',
+    'cfFontSize',
+    'cfFontWeight',
+    'cfLineHeight',
+    'cfLetterSpacing',
+    'cfTextColor',
+    'cfTextAlign',
+    'cfTextTransform',
+    'cfTextBold',
+    'cfTextItalic',
+    'cfTextUnderline',
+    // For backwards compatibility
+    // we need to keep those in this constant array
+    // so that omit() in <VisualEditorBlock> and <CompositionBlock>
+    // can filter them out and not pass as props
+    'cfBackgroundImageScaling',
+    'cfBackgroundImageAlignment',
+    'cfBackgroundImageAlignmentVertical',
+    'cfBackgroundImageAlignmentHorizontal',
+];
+const EMPTY_CONTAINER_HEIGHT = '80px';
+var PostMessageMethods$1;
+(function (PostMessageMethods) {
+    PostMessageMethods["REQUEST_ENTITIES"] = "REQUEST_ENTITIES";
+    PostMessageMethods["REQUESTED_ENTITIES"] = "REQUESTED_ENTITIES";
+})(PostMessageMethods$1 || (PostMessageMethods$1 = {}));
+
+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;
+};
+
+const Tooltip = ({ coordinates, id, label, isAssemblyBlock, isContainer }) => {
+    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]);
+    return (React.createElement("div", { ref: tooltipRef, style: tooltipStyles, className: classNames(styles$3.overlay, {
+            [styles$3.overlayContainer]: isContainer,
+            [styles$3.overlayAssembly]: isAssemblyBlock,
+        }) }, label));
+};
+
+const useDraggedItemStore = create((set) => ({
+    draggedItem: undefined,
+    domRect: undefined,
+    componentId: '',
+    isDraggingOnCanvas: false,
+    onBeforeCaptureId: '',
+    mouseX: 0,
+    mouseY: 0,
+    scrollY: 0,
+    setComponentId(id) {
+        set({ componentId: 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 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,
+};
+const builtInComponents = [
+    CONTENTFUL_COMPONENTS.container.id,
+    CONTENTFUL_COMPONENTS.section.id,
+    CONTENTFUL_COMPONENTS.columns.id,
+    CONTENTFUL_COMPONENTS.singleColumn.id,
+];
+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 = {}));
+
+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',
+        } })));
+};
+
+function useDraggablePosition({ draggableId, draggableRef, position }) {
+    const isDraggingOnCanvas = useDraggedItemStore((state) => state.isDraggingOnCanvas);
+    const draggingId = useDraggedItemStore((state) => state.onBeforeCaptureId);
+    const preDragDomRect = useDraggedItemStore((state) => state.domRect);
+    useEffect(() => {
+        const el = draggableRef?.current;
+        if (!isDraggingOnCanvas || draggingId !== draggableId || !el) {
+            return;
+        }
+        const isCentered = position === DraggablePosition.CENTERED || !preDragDomRect;
+        const domRect = isCentered ? el.getBoundingClientRect() : preDragDomRect;
+        const { mouseX, mouseY } = useDraggedItemStore.getState();
+        const top = isCentered ? mouseY - domRect.height / 2 : domRect.top;
+        const left = isCentered ? mouseX - domRect.width / 2 : domRect.left;
+        el.style.position = 'fixed';
+        el.style.left = `${left}px`;
+        el.style.top = `${top}px`;
+        el.style.width = `${domRect.width}px`;
+        el.style.height = `${domRect.height}px`;
+    }, [draggableRef, draggableId, isDraggingOnCanvas, draggingId, position, preDragDomRect]);
+}
+
+function getStyle$2(style, snapshot) {
+    if (!snapshot.isDropAnimating) {
+        return style;
+    }
+    return {
+        ...style,
+        // cannot be 0, but make it super tiny
+        transitionDuration: `0.001s`,
+    };
+}
+const DraggableComponent = ({ children, id, index, isAssemblyBlock = false, isSelected = false, onClick = () => null, coordinates, userIsDragging, style, wrapperProps, isContainer, blockId, isDragDisabled = false, placeholder, definition, ...rest }) => {
+    const ref = useRef(null);
+    const setDomRect = useDraggedItemStore((state) => state.setDomRect);
+    useDraggablePosition({
+        draggableId: id,
+        draggableRef: ref,
+        position: DraggablePosition.MOUSE_POSITION,
+    });
+    return (React.createElement(Draggable, { key: id, draggableId: id, index: index, isDragDisabled: isDragDisabled }, (provided, snapshot) => (React.createElement("div", { "data-ctfl-draggable-id": id, "data-test-id": `draggable-${blockId ?? 'node'}`, ref: (refNode) => {
+            provided?.innerRef(refNode);
+            ref.current = refNode;
+        }, ...wrapperProps, ...provided.draggableProps, ...provided.dragHandleProps, ...rest, className: classNames(styles$3.DraggableComponent, wrapperProps.className, {
+            [styles$3.isAssemblyBlock]: isAssemblyBlock,
+            [styles$3.isDragging]: snapshot.isDragging,
+            [styles$3.isSelected]: isSelected,
+            [styles$3.userIsDragging]: userIsDragging,
+        }), style: {
+            ...style,
+            ...getStyle$2(provided.draggableProps.style, snapshot),
+        }, onMouseDown: (e) => {
+            if (isDragDisabled) {
+                return;
+            }
+            e.stopPropagation();
+            setDomRect(e.currentTarget.getBoundingClientRect());
+        }, onClick: onClick },
+        React.createElement(Tooltip, { id: id, coordinates: coordinates, isAssemblyBlock: isAssemblyBlock, isContainer: isContainer, label: definition.name || 'No label specified' }),
+        React.createElement(Placeholder, { ...placeholder, id: id }),
+        children))));
+};
+
+/**
+ * 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) => {
+    if (!instanceId)
+        return;
+    let selectedElement = document.querySelector(`[data-cf-node-id="${instanceId}"]`);
+    let selectedAssemblyChild = undefined;
+    const [rootNodeId, nodeLocation] = instanceId.split('---');
+    if (nodeLocation) {
+        selectedAssemblyChild = selectedElement;
+        selectedElement = document.querySelector(`[data-cf-node-id="${rootNodeId}"]`);
+    }
+    // Finds the first parent that is a VisualEditorBlock
+    let parent = selectedElement?.parentElement;
+    while (parent) {
+        if (parent?.dataset?.cfNodeId) {
+            break;
+        }
+        parent = parent?.parentElement;
+    }
+    if (selectedElement) {
+        sendMessage(OUTGOING_EVENTS.UpdateSelectedComponentCoordinates, {
+            selectedNodeCoordinates: getElementCoordinates(selectedElement),
+            selectedAssemblyChildCoordinates: selectedAssemblyChild
+                ? getElementCoordinates(selectedAssemblyChild)
+                : null,
+            parentCoordinates: parent ? getElementCoordinates(parent) : null,
+        });
+    }
+};
+
+// 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.
+const assembliesRegistry = new Map([]);
+const setAssemblies = (assemblies) => {
+    for (const assembly of assemblies) {
+        assembliesRegistry.set(assembly.sys.id, assembly);
+    }
+};
+const componentRegistry = new Map();
+const addComponentRegistration = (componentRegistration) => {
+    componentRegistry.set(componentRegistration.definition.id, componentRegistration);
+};
+const createAssemblyRegistration = ({ definitionId, definitionName, component, }) => {
+    const componentRegistration = componentRegistry.get(definitionId);
+    if (componentRegistration) {
+        return componentRegistration;
+    }
+    const definition = {
+        id: definitionId,
+        name: definitionName || 'Component',
+        variables: {},
+        children: true,
+        category: ASSEMBLY_DEFAULT_CATEGORY,
+    };
+    addComponentRegistration({ component, definition });
+    return componentRegistry.get(definitionId);
+};
+
+const useEditorStore = create((set, get) => ({
+    dataSource: {},
+    unboundValues: {},
+    isDragging: false,
+    dragItem: '',
+    selectedNodeId: null,
+    locale: null,
+    setSelectedNodeId: (id) => {
+        set({ selectedNodeId: id });
+    },
+    setDataSource(data) {
+        const dataSource = get().dataSource;
+        const newDataSource = { ...dataSource, ...data };
+        if (isEqual(dataSource, newDataSource)) {
+            return;
+        }
+        set({ dataSource: newDataSource });
+    },
+    setUnboundValues(values) {
+        set({ unboundValues: values });
+    },
+    setLocale(locale) {
+        const currentLocale = get().locale;
+        if (locale === currentLocale) {
+            return;
+        }
+        set({ locale });
+    },
+    initializeEditor({ componentRegistry: initialRegistry, designTokens, initialLocale }) {
+        initialRegistry.forEach((registration) => {
+            componentRegistry.set(registration.definition.id, registration);
+        });
+        // Re-register the design tokens with the Visual Editor's instance of the experiences-core package
+        defineDesignTokens(designTokens);
+        set({ locale: initialLocale });
+    },
+}));
+
+/**
+ * This hook gets the element co-ordinates of a specified element in the DOM
+ * and sends the DOM Rect to the client app
+ */
+const useSelectedInstanceCoordinates = ({ node }) => {
+    const selectedNodeId = useEditorStore((state) => state.selectedNodeId);
+    useEffect(() => {
+        if (selectedNodeId !== node.data.id) {
+            return;
+        }
+        // Allows the drop animation to finish before
+        // calculating the components coordinates
+        setTimeout(() => {
+            sendSelectedComponentCoordinates(node.data.id);
+        }, 10);
+    }, [node, selectedNodeId]);
+    const selectedElement = node.data.id
+        ? document.querySelector(`[data-cf-node-id="${selectedNodeId}"]`)
+        : undefined;
+    return selectedElement ? getElementCoordinates(selectedElement) : null;
+};
+
+/**
+ *
+ * @param styles: the list of styles to apply
+ * @param nodeId: [Optional] the id of node that these styles will be applied to
+ * @returns className: the className that was used
+ * Builds and adds a style tag in the document. Returns the className to be attached to the element.
+ * In editor mode the nodeId is used as the identifier in order to avoid creating endless tags as the styles are tweeked
+ * In preview/delivery mode the styles don't change oftem so we're using the md5 hash of the content of the tag
+ */
+const useStyleTag = ({ styles, nodeId }) => {
+    const [className, setClassName] = useState('');
+    useEffect(() => {
+        if (Object.keys(styles).length === 0) {
+            return;
+        }
+        const [className, styleRule] = buildStyleTag({ styles, nodeId });
+        setClassName(className);
+        const existingTag = document.querySelector(`[data-cf-styles="${className}"]`);
+        if (existingTag) {
+            // editor mode - update existing
+            if (nodeId) {
+                existingTag.innerHTML = styleRule;
+            }
+            // preview/delivery mode - here we don't need to update the existing tag because
+            // the className is based on the md5 hash of the content so it hasn't changed
+            return;
+        }
+        const styleTag = document.createElement('style');
+        styleTag.dataset['cfStyles'] = className;
+        document.head.appendChild(styleTag).innerHTML = styleRule;
+    }, [styles, nodeId]);
+    return { className };
+};
+
+const getUnboundValues = ({ key, fallback, unboundValues, }) => {
+    const lodashPath = `${key}.value`;
+    return get$1(unboundValues, lodashPath, fallback);
+};
+
+const useEntityStore = create((set) => ({
+    entityStore: new EditorModeEntityStore({ locale: 'en-US', entities: [] }),
+    areEntitiesFetched: false,
+    setEntitiesFetched(fetched) {
+        set({ areEntitiesFetched: fetched });
+    },
+    resetEntityStore(locale, entities = []) {
+        console.debug(`[experiences-sdk-react] Resetting entity store because the locale changed to '${locale}'.`);
+        const newEntityStore = new EditorModeEntityStore({ locale, entities });
+        set({
+            entityStore: newEntityStore,
+            areEntitiesFetched: false,
+        });
+        return newEntityStore;
+    },
+}));
+
+const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, renderDropzone, definition, userIsDragging, }) => {
+    const unboundValues = useEditorStore((state) => state.unboundValues);
+    const dataSource = useEditorStore((state) => state.dataSource);
+    const entityStore = useEntityStore((state) => state.entityStore);
+    const props = useMemo(() => {
+        // Don't enrich the assembly wrapper node with props
+        if (!definition || node.type === ASSEMBLY_NODE_TYPE) {
+            return {};
+        }
+        return Object.entries(definition.variables).reduce((acc, [variableName, variableDefinition]) => {
+            const variableMapping = node.data.props[variableName];
+            if (!variableMapping) {
+                return {
+                    ...acc,
+                    [variableName]: variableDefinition.defaultValue,
+                };
+            }
+            if (variableMapping.type === 'DesignValue') {
+                const valueByBreakpoint = resolveDesignValue(variableMapping.valuesByBreakpoint, variableName);
+                const designValue = variableName === 'cfHeight'
+                    ? calculateNodeDefaultHeight({
+                        blockId: node.data.blockId,
+                        children: node.children,
+                        value: valueByBreakpoint,
+                    })
+                    : valueByBreakpoint;
+                return {
+                    ...acc,
+                    [variableName]: designValue,
+                };
+            }
+            else if (variableMapping.type === 'BoundValue') {
+                const [, uuid, path] = variableMapping.path.split('/');
+                const binding = dataSource[uuid];
+                const variableDefinition = definition.variables[variableName];
+                let boundValue = transformBoundContentValue(node.data.props, entityStore, binding, resolveDesignValue, variableName, variableDefinition, variableMapping.path);
+                // In some cases, there may be an asset linked in the path, so we need to consider this scenario:
+                // If no 'boundValue' is found, we also attempt to extract the value associated with the second-to-last item in the path.
+                // If successful, it means we have identified the linked asset.
+                if (!boundValue) {
+                    const maybeBoundAsset = areEntitiesFetched
+                        ? entityStore.getValue(binding, path.split('/').slice(0, -2))
+                        : undefined;
+                    if (isLinkToAsset(maybeBoundAsset)) {
+                        boundValue = maybeBoundAsset;
+                    }
+                }
+                const value = boundValue || variableDefinition.defaultValue;
+                return {
+                    ...acc,
+                    [variableName]: value,
+                };
+            }
+            else {
+                const value = getUnboundValues({
+                    key: variableMapping.key,
+                    fallback: variableDefinition.defaultValue,
+                    unboundValues: unboundValues || {},
+                });
+                return {
+                    ...acc,
+                    [variableName]: value,
+                };
+            }
+        }, {});
+    }, [
+        definition,
+        node.data.props,
+        node.children,
+        node.data.blockId,
+        resolveDesignValue,
+        dataSource,
+        areEntitiesFetched,
+        unboundValues,
+        node.type,
+        entityStore,
+    ]);
+    const cfStyles = buildCfStyles(props);
+    // Separate the component styles from the editor wrapper styles
+    const { margin, height, width, maxWidth, ...componentStyles } = cfStyles;
+    // Styles that will be applied to the editor wrapper (draggable) element
+    const { className: wrapperClass } = useStyleTag({
+        styles: 
+        // To ensure that assembly nodes are rendered like they are rendered in
+        // the assembly editor, we need to use a normal block instead of a flex box.
+        node.type === ASSEMBLY_NODE_TYPE
+            ? {
+                display: 'block !important',
+                width: '100%',
+            }
+            : {
+                margin,
+                maxWidth,
+                width,
+                height,
+            },
+        nodeId: `editor-${node.data.id}`,
+    });
+    // Styles that will be applied to the component element
+    const { className: componentClass } = useStyleTag({
+        styles: {
+            ...componentStyles,
+            margin: 0,
+            width: '100%',
+            height: '100%',
+            maxWidth: 'none',
+            ...(isEmptyStructureWithRelativeHeight(node.children.length, node?.data.blockId, height) && {
+                minHeight: EMPTY_CONTAINER_HEIGHT,
+            }),
+            ...(userIsDragging &&
+                isContentfulStructureComponent(node?.data.blockId) &&
+                node?.data.blockId !== CONTENTFUL_COMPONENTS.columns.id && {
+                padding: addExtraDropzonePadding(componentStyles.padding?.toString() || '0 0 0 0'),
+            }),
+        },
+        nodeId: node.data.id,
+    });
+    const wrapperProps = {
+        className: wrapperClass,
+        'data-cf-node-id': node.data.id,
+        'data-cf-node-block-id': node.data.blockId,
+        'data-cf-node-block-type': node.type,
+    };
+    //List explicit style props that will end up being passed to the component
+    const stylesToKeep = ['cfImageAsset'];
+    const stylesToRemove = CF_STYLE_ATTRIBUTES.filter((style) => !stylesToKeep.includes(style));
+    const componentProps = {
+        className: componentClass,
+        editorMode: true,
+        node,
+        renderDropzone,
+        ...omit(props, stylesToRemove, ['cfHyperlink', 'cfOpenInNewTab']),
+        ...(definition.children ? { children: renderDropzone(node) } : {}),
+    };
+    return { componentProps, wrapperProps };
+};
+const addExtraDropzonePadding = (padding) => padding
+    .split(' ')
+    .map((value) => {
+    if (value.endsWith('px')) {
+        const parsedValue = parseInt(value.replace(/px$/, ''), 10);
+        return (parsedValue < DRAG_PADDING ? DRAG_PADDING : parsedValue) + 'px';
+    }
+    return `${DRAG_PADDING}px`;
+})
+    .join(' ');
+
+var PostMessageMethods;
+(function (PostMessageMethods) {
+    PostMessageMethods["REQUEST_ENTITIES"] = "REQUEST_ENTITIES";
+    PostMessageMethods["REQUESTED_ENTITIES"] = "REQUESTED_ENTITIES";
+})(PostMessageMethods || (PostMessageMethods = {}));
+
+var css_248z$5 = ".cf-heading {\n  white-space: pre-line;\n}\n";
+styleInject(css_248z$5);
+
+var css_248z$4 = ".cf-richtext {\n  white-space: pre-line;\n}\n";
+styleInject(css_248z$4);
+
+var css_248z$3 = ".cf-text {\n  white-space: pre-line;\n}\n";
+styleInject(css_248z$3);
+
+var css_248z$2$1 = ".cf-no-image {\n  position: relative;\n}\n\n.cf-no-image img {\n  background-color: var(--cf-color-gray100);\n  outline-offset: -2px;\n  outline: 2px solid rgba(var(--cf-color-gray400-rgb), 0.5);\n}\n\n[data-ctfl-draggable-id] .cf-no-image {\n  width: 100%;\n  height: 100%;\n}\n\n[data-ctfl-draggable-id] .cf-no-image img {\n  width: 100%;\n}\n\n.cf-no-image svg {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  height: var(--cf-text-3xl);\n  width: var(--cf-text-3xl);\n  max-height: 100%;\n  max-width: 100%;\n}\n\n.cf-no-image svg path {\n  fill: var(--cf-color-gray400);\n}\n";
+styleInject(css_248z$2$1);
+
+var css_248z$1$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.cf-container-label {\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: 10;\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$1$1);
+
+const Flex = forwardRef(({ id, children, onMouseEnter, onMouseUp, onMouseLeave, onMouseDown, onClick, flex, flexBasis, flexShrink, flexDirection, gap, justifyContent, justifyItems, justifySelf, alignItems, alignSelf, alignContent, order, flexWrap, flexGrow, className, cssStyles, ...props }, ref) => {
+    return (React.createElement("div", { id: id, ref: ref, style: {
+            display: 'flex',
+            flex,
+            flexBasis,
+            flexShrink,
+            flexDirection,
+            gap,
+            justifyContent,
+            justifyItems,
+            justifySelf,
+            alignItems,
+            alignSelf,
+            alignContent,
+            order,
+            flexWrap,
+            flexGrow,
+            ...cssStyles,
+        }, className: className, onMouseEnter: onMouseEnter, onMouseUp: onMouseUp, onMouseDown: onMouseDown, onMouseLeave: onMouseLeave, onClick: onClick, ...props }, children));
+});
+Flex.displayName = 'Flex';
+
+var css_248z$6 = ".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  .Columns {\n    display: grid;\n  }\n}\n\n.cf-single-column-wrapper {\n  position: relative;\n}\n\n.cf-single-column {\n  pointer-events: all;\n}\n\n.cf-single-column-label {\n  pointer-events: none;\n  position: absolute;\n  z-index: -1;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 12px;\n  color: var(--exp-builder-gray400);\n  z-index: 100;\n}\n";
+styleInject(css_248z$6);
+
+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 } = props;
+        return props.renderDropzone(node, {
+            ['data-test-id']: 'contentful-assembly',
+            className: props.className,
+            style: assemblyStyle,
+        });
+    }
+    // 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 });
+};
+
+const deserializeAssemblyNode = ({ node, nodeId, nodeLocation, parentId, assemblyDataSource, assemblyId, assemblyComponentId, assemblyUnboundValues, componentInstanceProps, componentInstanceUnboundValues, componentInstanceDataSource, }) => {
+    const childNodeVariable = {};
+    const dataSource = {};
+    const unboundValues = {};
+    for (const [variableName, variable] of Object.entries(node.variables)) {
+        childNodeVariable[variableName] = variable;
+        if (variable.type === 'ComponentValue') {
+            const componentValueKey = variable.key;
+            const instanceProperty = componentInstanceProps[componentValueKey];
+            // For assembly, we look up the value in the assembly instance and
+            // replace the componentValue with that one.
+            if (instanceProperty?.type === 'UnboundValue') {
+                const componentInstanceValue = componentInstanceUnboundValues[instanceProperty.key];
+                unboundValues[instanceProperty.key] = componentInstanceValue;
+                childNodeVariable[variableName] = {
+                    type: 'UnboundValue',
+                    key: instanceProperty.key,
+                };
+            }
+            else if (instanceProperty?.type === 'BoundValue') {
+                const [, dataSourceKey] = instanceProperty.path.split('/');
+                const componentInstanceValue = componentInstanceDataSource[dataSourceKey];
+                dataSource[dataSourceKey] = componentInstanceValue;
+                childNodeVariable[variableName] = {
+                    type: 'BoundValue',
+                    path: instanceProperty.path,
+                };
+            }
+        }
+    }
+    const isAssembly = assembliesRegistry.has(node.definitionId);
+    const children = node.children.map((child, childIndex) => {
+        const newNodeLocation = nodeLocation === null ? `${childIndex}` : nodeLocation + '_' + childIndex;
+        return deserializeAssemblyNode({
+            node: child,
+            nodeId: `${assemblyComponentId}---${newNodeLocation}`,
+            parentId: nodeId,
+            nodeLocation: newNodeLocation,
+            assemblyId,
+            assemblyDataSource,
+            assemblyComponentId,
+            assemblyUnboundValues,
+            componentInstanceProps,
+            componentInstanceUnboundValues,
+            componentInstanceDataSource,
+        });
+    });
+    return {
+        // separate node type identifiers for assemblies and their blocks, so we can treat them differently in as much as we want
+        type: isAssembly ? ASSEMBLY_NODE_TYPE : ASSEMBLY_BLOCK_NODE_TYPE,
+        parentId,
+        data: {
+            id: nodeId,
+            assembly: {
+                id: assemblyId,
+                componentId: assemblyComponentId,
+                nodeLocation: nodeLocation || null,
+            },
+            blockId: node.definitionId,
+            props: childNodeVariable,
+            dataSource,
+            unboundValues,
+            breakpoints: [],
+        },
+        children,
+    };
+};
+const resolveAssembly = ({ node, entityStore, }) => {
+    if (node.type !== ASSEMBLY_NODE_TYPE) {
+        return node;
+    }
+    const componentId = node.data.blockId;
+    const assembly = assembliesRegistry.get(componentId);
+    if (!assembly) {
+        console.warn(`Link to assembly with ID '${componentId}' not found`, {
+            assembliesRegistry,
+        });
+        return node;
+    }
+    const componentFields = entityStore?.getValue(assembly, [
+        'fields',
+    ]);
+    if (!componentFields) {
+        console.warn(`Entry for assembly with ID '${componentId}' not found`, { entityStore });
+        return node;
+    }
+    if (!componentFields.componentTree?.children) {
+        console.warn(`Component tree for assembly with ID '${componentId}' not found`, {
+            componentFields,
+        });
+    }
+    const deserializedNode = deserializeAssemblyNode({
+        node: {
+            definitionId: node.data.blockId || '',
+            variables: {},
+            children: componentFields.componentTree?.children ?? [],
+        },
+        nodeLocation: null,
+        nodeId: node.data.id,
+        parentId: node.parentId,
+        assemblyDataSource: {},
+        assemblyId: assembly.sys.id,
+        assemblyComponentId: node.data.id,
+        assemblyUnboundValues: componentFields.unboundValues,
+        componentInstanceProps: node.data.props,
+        componentInstanceUnboundValues: node.data.unboundValues,
+        componentInstanceDataSource: node.data.dataSource,
+    });
+    return deserializedNode;
+};
+
+const useComponent = ({ node: rawNode, resolveDesignValue, renderDropzone, userIsDragging, }) => {
+    const areEntitiesFetched = useEntityStore((state) => state.areEntitiesFetched);
+    const entityStore = useEntityStore((state) => state.entityStore);
+    const node = useMemo(() => {
+        if (rawNode.type === ASSEMBLY_NODE_TYPE && areEntitiesFetched) {
+            return resolveAssembly({
+                node: rawNode,
+                entityStore,
+            });
+        }
+        return rawNode;
+    }, [areEntitiesFetched, rawNode, entityStore]);
+    const componentRegistration = useMemo(() => {
+        const registration = componentRegistry.get(node.data.blockId);
+        if (node.type === ASSEMBLY_NODE_TYPE && !registration) {
+            return createAssemblyRegistration({
+                definitionId: node.data.blockId,
+                component: Assembly,
+            });
+        }
+        else if (!registration) {
+            console.warn(`[experiences-sdk-react] Component registration not found for ${node.data.blockId}`);
+        }
+        return registration;
+    }, [node]);
+    const componentId = node.data.id;
+    const { componentProps, wrapperProps } = useComponentProps({
+        node,
+        areEntitiesFetched,
+        resolveDesignValue,
+        renderDropzone,
+        definition: componentRegistration.definition,
+        userIsDragging,
+    });
+    // Only pass editor props to built-in components
+    const { editorMode, renderDropzone: _renderDropzone, ...otherComponentProps } = componentProps;
+    const elementToRender = builtInComponents.includes(node.data.blockId || '')
+        ? (dragProps) => React.createElement(componentRegistration.component, { ...dragProps, ...componentProps })
+        : node.type === ASSEMBLY_NODE_TYPE
+            ? // Assembly.tsx requires renderDropzone and editorMode as well
+                () => React.createElement(componentRegistration.component, componentProps)
+            : () => React.createElement(componentRegistration.component, otherComponentProps);
+    return {
+        node,
+        componentId,
+        elementToRender,
+        wrapperProps,
+        definition: componentRegistration.definition,
+    };
+};
+
+/**
+ * This component is meant to function the same as DraggableComponent except
+ * with the difference that the draggable props are passed to the underlying
+ * component. This removes an extra nexted `div` in editor mode that otherwise
+ * is not visible in delivery mode.
+ *
+ * This is helpful for `flex` or `grid` layouts. Currently used by the SingleColumn
+ * component.
+ */
+const DraggableChildComponent = (props) => {
+    const { elementToRender, id, index, isAssemblyBlock = false, isSelected = false, onClick = () => null, coordinates, userIsDragging, style, isContainer, blockId, isDragDisabled = false, wrapperProps, definition, } = props;
+    return (React.createElement(Draggable, { key: id, draggableId: id, index: index, isDragDisabled: isDragDisabled }, (provided, snapshot) => elementToRender({
+        ['data-ctfl-draggable-id']: id,
+        ['data-test-id']: `draggable-${blockId}`,
+        innerRef: provided.innerRef,
+        ...wrapperProps,
+        draggableProps: provided.draggableProps,
+        wrapperClassName: classNames(styles$3.DraggableComponent, wrapperProps.className, {
+            [styles$3.isAssemblyBlock]: isAssemblyBlock,
+            [styles$3.isDragging]: snapshot.isDragging,
+            [styles$3.isSelected]: isSelected,
+            [styles$3.userIsDragging]: userIsDragging,
+        }),
+        dragHandleProps: provided.dragHandleProps,
+        style: {
+            ...style,
+            ...provided.draggableProps.style,
+        },
+        onClick,
+        Tooltip: (React.createElement(Tooltip, { id: id, coordinates: coordinates, isAssemblyBlock: isAssemblyBlock, isContainer: isContainer, label: definition.name || 'No label specified' })),
+    })));
+};
+
+var css_248z$2 = ".styles-module_container__te-1H {\n  margin-left: auto;\n  margin-right: auto;\n  position: relative;\n  height: 100%;\n  width: 100%;\n  background-color: transparent;\n  transition: background-color 0.2s;\n  pointer-events: all !important;\n}\n\n.styles-module_container__te-1H:not(.styles-module_isRoot__5cn-i):before {\n  content: '';\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  outline-offset: -1px;\n  outline: 2px solid transparent;\n  z-index: 1;\n  transition: outline 0.2s;\n  pointer-events: none;\n}\n\n.styles-module_isRoot__5cn-i,\n.styles-module_isEmptyCanvas__0XHZR {\n  flex: 1;\n}\n\n.styles-module_isEmptyZone__zVpnZ {\n  min-height: 80px;\n}\n\n.styles-module_isDragging__Gm8v5:not(.styles-module_isRoot__5cn-i):before {\n  outline: 2px dashed var(--exp-builder-gray300);\n}\n\n.styles-module_isDestination__5sCQx:not(.styles-module_isRoot__5cn-i):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_hitbox__YQ-1Z {\n  position: fixed;\n  pointer-events: all !important;\n}\n\n.styles-module_hitbox__YQ-1Z {\n  position: fixed;\n  pointer-events: all !important;\n}\n";
+var styles$2 = {"container":"styles-module_container__te-1H","isRoot":"styles-module_isRoot__5cn-i","isEmptyCanvas":"styles-module_isEmptyCanvas__0XHZR","isEmptyZone":"styles-module_isEmptyZone__zVpnZ","isDragging":"styles-module_isDragging__Gm8v5","isDestination":"styles-module_isDestination__5sCQx","hitbox":"styles-module_hitbox__YQ-1Z"};
+styleInject(css_248z$2);
+
+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,
+        };
+    }
+    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;
+    const isRoot = currentNode.data.id === ROOT_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 (!isRoot && !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 in favor of one in 'core' package
+ */
+function treeVisit(initialNode, onNode) {
+    // returns last used index
+    const _treeVisit = (currentNode, currentIndex, currentDepth) => {
+        // Copy children in case of onNode removing it as we pass the node by reference
+        const children = [...currentNode.children];
+        onNode(currentNode, currentIndex, currentDepth);
+        let nextAvailableIndex = currentIndex + 1;
+        const lastUsedIndex = currentIndex;
+        for (const child of children) {
+            const lastUsedIndex = _treeVisit(child, nextAvailableIndex, currentDepth + 1);
+            nextAvailableIndex = lastUsedIndex + 1;
+        }
+        return lastUsedIndex;
+    };
+    _treeVisit(initialNode, 0, 0);
+}
+
+const isAssemblyNode = (node) => {
+    return node.type === ASSEMBLY_NODE_TYPE;
+};
+const useTreeStore = create((set, get) => ({
+    tree: {
+        root: {
+            children: [],
+            type: 'root',
+            data: {
+                breakpoints: [],
+                dataSource: {},
+                id: ROOT_ID,
+                props: {},
+                unboundValues: {},
+            },
+        },
+    },
+    breakpoints: [],
+    updateNodesByUpdatedEntity: (entityId) => {
+        set(produce((draftState) => {
+            treeVisit(draftState.tree.root, (node) => {
+                if (isAssemblyNode(node) && node.data.blockId === entityId) {
+                    // Cannot use `structuredClone()` as node is probably a Proxy object with weird references
+                    updateNode(node.data.id, cloneDeepAsPOJO(node), draftState.tree.root);
+                    return;
+                }
+                const dataSourceIds = Object.values(node.data.dataSource).map((link) => link.sys.id);
+                if (dataSourceIds.includes(entityId)) {
+                    // Cannot use `structuredClone()` as node is probably a Proxy object with weird references
+                    updateNode(node.data.id, cloneDeepAsPOJO(node), draftState.tree.root);
+                }
+            });
+        }));
+    },
+    /**
+     * 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;
+        /**
+         * If we simply update the tree as in:
+         *
+         * `state.tree = tree`
+         *
+         * we end up causing a lot of unnecesary rerenders which can lead to
+         * flickering of the component layout. Instead, we use this function
+         * to deteremine exactly which nodes in the tree changed and combined
+         * with immer, we end up updating only the changed nodes instead of
+         * rerendering the entire tree.
+         */
+        const treeDiff = getTreeDiffs({ ...currentTree.root }, { ...tree.root }, currentTree);
+        // The current and updated tree are the same, no tree update required.
+        if (!treeDiff.length) {
+            console.debug(`[exp-builder.visual-editor::updateTree()]: During smart-diffing no diffs. Skipping tree update.`);
+            return;
+        }
+        set(produce((state) => {
+            treeDiff.map((diff) => {
+                switch (diff.type) {
+                    case TreeAction.ADD_NODE:
+                        addChildNode(diff.indexToAdd, diff.parentNodeId, diff.nodeToAdd, state.tree.root);
+                        break;
+                    case TreeAction.REPLACE_NODE:
+                        replaceNode(diff.indexToReplace, diff.node, state.tree.root);
+                        break;
+                    case TreeAction.UPDATE_NODE:
+                        updateNode(diff.nodeId, diff.node, state.tree.root);
+                        break;
+                    case TreeAction.REMOVE_NODE:
+                        removeChildNode(diff.indexToRemove, diff.idToRemove, diff.parentNodeId, state.tree.root);
+                        break;
+                    case TreeAction.MOVE_NODE:
+                    case TreeAction.REORDER_NODE:
+                        state.tree = tree;
+                        break;
+                }
+            });
+            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);
+        }));
+    },
+}));
+// Serialize and deserialize an object again to remove all functions and references.
+// Some people refer to this as "Plain Old JavaScript Object" (POJO) as it solely contains plain data.
+function cloneDeepAsPOJO(obj) {
+    return JSON.parse(JSON.stringify(obj));
+}
+
+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 }) => {
+    if (!domRect) {
+        return {
+            display: 'none',
+        };
+    }
+    const { width, height, top, left, bottom, right } = domRect;
+    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 - calcOffsetDepth(zoneDepth) - scrollY,
+                left,
+                zIndex: 100 + zoneDepth,
+            };
+        case HitboxDirection.BOTTOM:
+            return {
+                width,
+                height: HEIGHT,
+                top: bottom + calcOffsetDepth(zoneDepth) - scrollY,
+                left,
+                zIndex: 100 + zoneDepth,
+            };
+        case HitboxDirection.LEFT:
+            return {
+                width: WIDTH,
+                height: height - HEIGHT,
+                left: left - calcOffsetDepth(zoneDepth) - WIDTH / 2,
+                top: top + HEIGHT / 2 - scrollY,
+                zIndex: 100 + zoneDepth,
+            };
+        case HitboxDirection.RIGHT:
+            return {
+                width: WIDTH,
+                height: height - HEIGHT,
+                left: right - calcOffsetDepth(zoneDepth) - WIDTH / 2,
+                top: top + HEIGHT / 2 - scrollY,
+                zIndex: 100 + zoneDepth,
+            };
+        case HitboxDirection.SELF_VERTICAL: {
+            if (isAboveMaxHeight && !isDeepZone) {
+                return { display: 'none' };
+            }
+            const selfHeight = isDeepZone ? MIN_DEPTH_HEIGHT : MIN_HEIGHT;
+            return {
+                width,
+                height: selfHeight,
+                left,
+                top: top + height / 2 - selfHeight / 2 - scrollY,
+                zIndex: 1000 + zoneDepth,
+            };
+        }
+        case HitboxDirection.SELF_HORIZONTAL: {
+            if (width > DRAGGABLE_WIDTH) {
+                return { display: 'none' };
+            }
+            return {
+                width: width - DRAGGABLE_WIDTH * 2,
+                height,
+                left: left + (DRAGGABLE_WIDTH * 2) / 2,
+                top: top - scrollY,
+                zIndex: 1000 + zoneDepth,
+            };
+        }
+        default:
+            return {};
+    }
+};
+
+const Hitboxes = ({ zoneId, parentZoneId, enableRootHitboxes }) => {
+    const tree = useTreeStore((state) => state.tree);
+    const isDraggingOnCanvas = useDraggedItemStore((state) => state.isDraggingOnCanvas);
+    const scrollY = useDraggedItemStore((state) => state.scrollY);
+    const zoneDepth = useMemo(() => getItemDepthFromNode({ id: parentZoneId }, tree.root), [tree, parentZoneId]);
+    const [fetchDomRect, setFetchDomRect] = useState(Date.now());
+    useEffect(() => {
+        /**
+         * A bit hacky but we need to wait a very small amount
+         * of time to fetch the dom getBoundingClientRect once a
+         * drag starts because we need pre-drag styles like padding
+         * applied before we calculate positions of hitboxes
+         */
+        setTimeout(() => {
+            setFetchDomRect(Date.now());
+        }, 50);
+    }, [isDraggingOnCanvas]);
+    const hitboxContainer = useMemo(() => {
+        return document.querySelector('[data-ctfl-hitboxes]');
+    }, []);
+    const domRect = useMemo(() => {
+        return document.querySelector(`[${CTFL_ZONE_ID}="${zoneId}"]`)?.getBoundingClientRect();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [zoneId, fetchDomRect]);
+    const zones = useZoneStore((state) => state.zones);
+    const zoneDirection = zones[parentZoneId]?.direction || 'vertical';
+    const isVertical = zoneDirection === 'vertical';
+    const isRoot = parentZoneId === ROOT_ID;
+    const showRootHitboxes = isRoot && enableRootHitboxes;
+    const getStyles = useCallback((direction) => getHitboxStyles({ direction, zoneDepth, domRect, scrollY }), [zoneDepth, domRect, scrollY]);
+    const ActiveHitboxes = (React.createElement(React.Fragment, null,
+        React.createElement("div", { "data-ctfl-zone-id": zoneId, className: styles$2.hitbox, style: getStyles(isVertical ? HitboxDirection.SELF_VERTICAL : HitboxDirection.SELF_HORIZONTAL) }),
+        showRootHitboxes && (React.createElement("div", { "data-ctfl-zone-id": parentZoneId, className: styles$2.hitbox, style: getStyles(HitboxDirection.BOTTOM) })),
+        !isRoot && (React.createElement(React.Fragment, null,
+            React.createElement("div", { "data-ctfl-zone-id": parentZoneId, className: styles$2.hitbox, style: getStyles(isVertical ? HitboxDirection.TOP : HitboxDirection.LEFT) }),
+            React.createElement("div", { "data-ctfl-zone-id": parentZoneId, className: styles$2.hitbox, style: getStyles(isVertical ? HitboxDirection.BOTTOM : HitboxDirection.RIGHT) })))));
+    if (!hitboxContainer) {
+        return null;
+    }
+    return createPortal(ActiveHitboxes, hitboxContainer);
+};
+
+const EditorBlock = ({ node: rawNode, resolveDesignValue, renderDropzone, draggingNewComponent, index, zoneId, userIsDragging, placeholder, }) => {
+    const setSelectedNodeId = useEditorStore((state) => state.setSelectedNodeId);
+    const selectedNodeId = useEditorStore((state) => state.selectedNodeId);
+    const { node, componentId, wrapperProps, definition, elementToRender } = useComponent({
+        node: rawNode,
+        resolveDesignValue,
+        renderDropzone,
+        userIsDragging,
+    });
+    const coordinates = useSelectedInstanceCoordinates({ node });
+    const isContainer = node.data.blockId === CONTENTFUL_COMPONENTS.container.id;
+    const isSingleColumn = node.data.blockId === CONTENTFUL_COMPONENTS.singleColumn.id;
+    const isAssemblyBlock = node.type === ASSEMBLY_BLOCK_NODE_TYPE;
+    const isAssembly = node.type === ASSEMBLY_NODE_TYPE;
+    const isStructureComponent = isContentfulStructureComponent(node.data.blockId);
+    const isRootComponent = zoneId === ROOT_ID;
+    const enableRootHitboxes = isRootComponent && !!draggingNewComponent;
+    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 (isAssembly) {
+                sendMessage(OUTGOING_EVENTS.ComponentSelected, {
+                    nodeId: node.data.id,
+                });
+                return;
+            }
+            sendMessage(OUTGOING_EVENTS.ComponentSelected, {
+                assembly: node.data.assembly,
+                nodeId: node.data.id,
+            });
+        }
+    };
+    if (node.data.blockId === CONTENTFUL_COMPONENTS.singleColumn.id) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(DraggableChildComponent, { elementToRender: elementToRender, id: componentId, index: index, isAssemblyBlock: isAssemblyBlock, isDragDisabled: isSingleColumn, isSelected: selectedNodeId === componentId, userIsDragging: userIsDragging, isContainer: isContainer, blockId: node.data.blockId, coordinates: coordinates, wrapperProps: wrapperProps, onClick: onClick, definition: definition }),
+            isStructureComponent && !isSingleColumn && userIsDragging && (React.createElement(Hitboxes, { parentZoneId: zoneId, zoneId: componentId, enableRootHitboxes: enableRootHitboxes }))));
+    }
+    return (React.createElement(DraggableComponent, { placeholder: placeholder, definition: definition, id: componentId, index: index, isAssemblyBlock: isAssemblyBlock, isDragDisabled: isAssemblyBlock, isSelected: selectedNodeId === componentId, userIsDragging: userIsDragging, isContainer: isContainer, blockId: node.data.blockId, coordinates: coordinates, wrapperProps: wrapperProps, onClick: onClick },
+        elementToRender(),
+        isStructureComponent && !isSingleColumn && userIsDragging && (React.createElement(Hitboxes, { parentZoneId: zoneId, zoneId: componentId, enableRootHitboxes: enableRootHitboxes }))));
+};
+
+var css_248z$1 = ".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$1 = {"container":"EmptyContainer-module_container__XPH5b","highlight":"EmptyContainer-module_highlight__lcICy","icon":"EmptyContainer-module_icon__82-2O","label":"EmptyContainer-module_label__4TxRa"};
+styleInject(css_248z$1);
+
+const EmptyContainer = ({ isDragging }) => {
+    return (React.createElement("div", { className: classNames(styles$1.container, {
+            [styles$1.highlight]: isDragging,
+        }), "data-type": "empty-container" },
+        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "37", height: "36", fill: "none", className: styles$1.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$1.label }, "Add components to begin")));
+};
+
+const getZoneParents = (zoneId) => {
+    const element = document.querySelector(`[data-rfd-droppable-id='${zoneId}']`);
+    if (!element) {
+        return [];
+    }
+    function getZonesToRoot(element, parentIds = []) {
+        if (!element) {
+            return parentIds;
+        }
+        const attribute = element.getAttribute('data-rfd-droppable-id');
+        if (attribute === ROOT_ID) {
+            return parentIds;
+        }
+        if (attribute) {
+            parentIds.push(attribute);
+        }
+        return getZonesToRoot(element.parentElement, parentIds);
+    }
+    return getZonesToRoot(element);
+};
+
+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.columns.id) {
+                return 'horizontal';
+            }
+            const designValues = node.data.props['cfFlexDirection'];
+            if (!designValues || !resolveDesignValue || designValues.type !== 'DesignValue') {
+                return 'vertical';
+            }
+            const direction = resolveDesignValue(designValues.valuesByBreakpoint, 'cfFlexDirection');
+            if (direction === 'row') {
+                return 'horizontal';
+            }
+            return 'vertical';
+        }
+        upsertZone(zoneId, { direction: getDirection() });
+    }, [node, resolveDesignValue, zoneId, upsertZone]);
+    return zone[zoneId]?.direction || 'vertical';
+};
+
+function getStyle$1(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, }) => {
+    const userIsDragging = useDraggedItemStore((state) => state.isDraggingOnCanvas);
+    const { node, wrapperProps, elementToRender } = useComponent({
+        node: rawNode,
+        resolveDesignValue,
+        renderDropzone,
+        userIsDragging,
+    });
+    const isAssemblyBlock = node.type === ASSEMBLY_BLOCK_NODE_TYPE;
+    const isSingleColumn = node.data.blockId === CONTENTFUL_COMPONENTS.singleColumn.id;
+    if (isSingleColumn) {
+        return elementToRender();
+    }
+    return (React.createElement("div", { ref: provided?.innerRef, "data-ctfl-dragging-element": true, ...wrapperProps, ...provided?.draggableProps, ...provided?.dragHandleProps, className: classNames(styles$3.DraggableComponent, wrapperProps.className, styles$3.DraggableClone, {
+            [styles$3.isAssemblyBlock]: isAssemblyBlock,
+            [styles$3.isDragging]: snapshot?.isDragging,
+        }), style: getStyle$1(provided?.draggableProps.style, snapshot) }, elementToRender()));
+};
+
+function DropzoneClone({ node, zoneId, resolveDesignValue, className, WrapperComponent = 'div', renderDropzone, ...rest }) {
+    const tree = useTreeStore((state) => state.tree);
+    const content = node?.children || tree.root?.children || [];
+    const isRootZone = zoneId === ROOT_ID;
+    if (!resolveDesignValue) {
+        return null;
+    }
+    return (React.createElement(WrapperComponent, { className: classNames(styles$2.container, {
+            [styles$2.isRoot]: isRootZone,
+            [styles$2.isEmptyZone]: !content.length,
+        }, className), node: node, ...rest }, content.map((item) => {
+        const componentId = item.data.id;
+        return (React.createElement(EditorBlockClone, { key: componentId, node: item, resolveDesignValue: resolveDesignValue, renderDropzone: renderDropzone }));
+    })));
+}
+
+function Dropzone({ node, zoneId, resolveDesignValue, className, WrapperComponent = 'div', ...rest }) {
+    const userIsDragging = useDraggedItemStore((state) => state.isDraggingOnCanvas);
+    const draggedItem = useDraggedItemStore((state) => state.draggedItem);
+    const newComponentId = useDraggedItemStore((state) => state.componentId);
+    const hoveringZone = useZoneStore((state) => state.hoveringZone);
+    const tree = useTreeStore((state) => state.tree);
+    const content = node?.children || tree.root?.children || [];
+    const direction = useDropzoneDirection({ resolveDesignValue, node, zoneId });
+    const draggedSourceId = draggedItem && draggedItem.source.droppableId;
+    const draggedDestinationId = draggedItem && draggedItem.destination?.droppableId;
+    const isDraggingNewComponent = !!newComponentId;
+    const isHoveringZone = hoveringZone === zoneId;
+    const isRootZone = zoneId === ROOT_ID;
+    const isDestination = draggedDestinationId === zoneId;
+    const isEmptyCanvas = isRootZone && !content.length;
+    const isAssembly = ASSEMBLY_NODE_TYPES.includes(node?.type || '');
+    // To avoid a circular dependency, we create the recursive rendering function here and trickle it down
+    const renderDropzone = useCallback((node, props) => {
+        return (React.createElement(Dropzone, { zoneId: node.data.id, node: node, resolveDesignValue: resolveDesignValue, ...props }));
+    }, [resolveDesignValue]);
+    const renderClonedDropzone = useCallback((node, props) => {
+        return (React.createElement(DropzoneClone, { zoneId: node.data.id, node: node, resolveDesignValue: resolveDesignValue, renderDropzone: renderClonedDropzone, ...props }));
+    }, [resolveDesignValue]);
+    if (!resolveDesignValue) {
+        return null;
+    }
+    /**
+     * The Rules of Dropzones
+     *
+     * 1. A dropzone is disabled unless the mouse is hovering over it
+     *
+     * 2. Dragging a new component onto the canvas has no addtional rules
+     * besides rule #1
+     *
+     * 3. Dragging a component that is a direct descendant of the root
+     * (parentId === ROOT_ID) then only the Root Dropzone is enabled
+     *
+     * 4. Dragging a nested component (parentId !== ROOT_ID) then the Root
+     * Dropzone is disabled, all other Dropzones follow rule #1
+     *
+     * 5. Assemblies and the SingleColumn component are always disabled
+     *
+     */
+    const isDropzoneEnabled = () => {
+        if (node?.data.blockId === CONTENTFUL_COMPONENTS.columns.id) {
+            return false;
+        }
+        if (isAssembly) {
+            return false;
+        }
+        if (isDraggingNewComponent) {
+            return isHoveringZone;
+        }
+        const draggingParentIds = getZoneParents(draggedSourceId || '');
+        if (!draggingParentIds.length) {
+            return isRootZone;
+        }
+        return isHoveringZone && !isRootZone;
+    };
+    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 })) }, (provided, snapshot) => {
+        return (React.createElement(WrapperComponent, { ...(provided || { droppableProps: {} }).droppableProps, ref: provided?.innerRef, id: zoneId, "data-ctfl-zone-id": zoneId, className: classNames(styles$2.container, {
+                [styles$2.isEmptyCanvas]: isEmptyCanvas,
+                [styles$2.isDragging]: userIsDragging && !isAssembly,
+                [styles$2.isDestination]: isDestination && !isAssembly,
+                [styles$2.isRoot]: isRootZone,
+                [styles$2.isEmptyZone]: !content.length,
+            }, className), node: node, ...rest },
+            isEmptyCanvas ? (React.createElement(EmptyContainer, { isDragging: isRootZone && userIsDragging })) : (content.map((item, i) => {
+                const componentId = item.data.id;
+                return (React.createElement(EditorBlock, { placeholder: {
+                        isDraggingOver: snapshot?.isDraggingOver,
+                        totalIndexes: content.length,
+                        elementIndex: i,
+                        dropzoneElementId: zoneId,
+                        direction,
+                    }, index: i, zoneId: zoneId, key: componentId, userIsDragging: userIsDragging, draggingNewComponent: isDraggingNewComponent, node: item, resolveDesignValue: resolveDesignValue, renderDropzone: renderDropzone }));
+            })),
+            provided?.placeholder));
+    }));
+}
+
+function getStyle(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(provided.draggableProps.style, snapshot),
+                    width: DRAGGABLE_WIDTH,
+                    height: DRAGGABLE_HEIGHT,
+                    pointerEvents: 'none',
+                } }))),
+            provided.placeholder)))));
+};
+
+var css_248z = ".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: -10px;\n  left: 0;\n  width: 100%;\n  height: 10px;\n  z-index: 1000000;\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 = {"hitbox":"render-module_hitbox__l4ysJ","hitboxLower":"render-module_hitboxLower__tgsA1","container":"render-module_container__-C3d7"};
+styleInject(css_248z);
+
+// TODO: In order to support integrations without React, we should extract this heavy logic into simple
+// functions that we can reuse in other frameworks.
+/*
+ * Registers media query change listeners for each breakpoint (except for "*").
+ * It will always assume the last matching media query in the list. It therefore,
+ * assumes that the breakpoints are sorted beginning with the default value (query: "*")
+ * and then decending by screen width. For mobile-first designs, the order would be ascending
+ */
+const useBreakpoints = (breakpoints) => {
+    const [mediaQueryMatches, setMediaQueryMatches] = useState({});
+    const fallbackBreakpointIndex = getFallbackBreakpointIndex(breakpoints);
+    // Register event listeners to update the media query states
+    useEffect(() => {
+        const [mediaQueryMatchers, initialMediaQueryMatches] = mediaQueryMatcher(breakpoints);
+        // Store the media query state in the beginning to initialise the state
+        setMediaQueryMatches(initialMediaQueryMatches);
+        const eventListeners = mediaQueryMatchers.map(({ id, signal }) => {
+            const onChange = () => setMediaQueryMatches((prev) => ({
+                ...prev,
+                [id]: signal.matches,
+            }));
+            signal.addEventListener('change', onChange);
+            return onChange;
+        });
+        return () => {
+            eventListeners.forEach((eventListener, index) => {
+                mediaQueryMatchers[index].signal.removeEventListener('change', eventListener);
+            });
+        };
+        // Only re-setup all listeners when the breakpoint definition changed
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [breakpoints]);
+    const activeBreakpointIndex = getActiveBreakpointIndex(breakpoints, mediaQueryMatches, fallbackBreakpointIndex);
+    const resolveDesignValue = useCallback((valuesByBreakpoint, variableName) => {
+        return getValueForBreakpoint(valuesByBreakpoint, breakpoints, activeBreakpointIndex, variableName);
+    }, [activeBreakpointIndex, breakpoints]);
+    return { resolveDesignValue };
+};
+
+class MouseOverHandler {
+    constructor() {
+        this.currentHoveredElementId = null;
+        this.getMargins = (element) => {
+            if (typeof window === 'undefined')
+                return undefined;
+            const styles = window.getComputedStyle(element);
+            const top = parseInt(styles.marginTop);
+            const bottom = parseInt(styles.marginBottom);
+            const left = parseInt(styles.marginLeft);
+            const right = parseInt(styles.marginRight);
+            return { top, bottom, left, right };
+        };
+        this.getFullCoordinates = (element) => {
+            const validChildren = Array.from(element.children).filter((child) => child instanceof HTMLElement && child.dataset.cfNodeBlockType === 'block');
+            const { left, top, width, height } = this.getBoundingClientRect(element);
+            const margins = this.getMargins(element);
+            const childrenCoordinates = validChildren.map((child) => {
+                const { left, top, width, height } = this.getBoundingClientRect(child);
+                return { left, top, width, height, margins };
+            });
+            return {
+                left,
+                top,
+                width,
+                height,
+                margins,
+                childrenCoordinates,
+            };
+        };
+        this.getClosestComponentInformation = (element) => {
+            let target = element;
+            // If the target is outside on the root or anywhere else on the iframes body
+            if (target?.id === 'VisualEditorRoot' || target?.tagName === 'BODY') {
+                const rootElement = document.getElementById('VisualEditorRoot');
+                const hoveredRootElement = {
+                    nodeId: 'root',
+                    blockType: 'root',
+                    blockId: 'root',
+                };
+                return [rootElement, hoveredRootElement];
+            }
+            // Find the closest contentful container or direct parent that is a contentful container
+            while (target) {
+                if (
+                // is itself a section?
+                target.dataset.cfNodeId ||
+                    // Or a direct child of a section
+                    (target.parentElement && target.parentElement.dataset.cfNodeBlockId === 'ContentfulSection')) {
+                    const sectionId = target.dataset.cfNodeId;
+                    const sectionBlockId = target.dataset.cfNodeBlockId;
+                    const sectionBlockType = target.dataset.cfNodeBlockType;
+                    const hoveredElement = {
+                        nodeId: sectionId,
+                        blockId: sectionBlockId,
+                        blockType: sectionBlockType,
+                    };
+                    return [target, hoveredElement];
+                }
+                target = target.parentElement;
+            }
+        };
+        this.getNewlyHoveredElement = (element) => {
+            let parentElement = null;
+            let parentSectionIndex = -1;
+            const [hoveredElement, hoveredInfo] = this.getClosestComponentInformation(element) || [
+                null,
+                null,
+            ];
+            if (!hoveredElement)
+                return;
+            // if hovered element is already hovered and the information is already sent
+            // ignore the rest and don't proceed.
+            if (hoveredInfo.nodeId === this.currentHoveredElementId)
+                return;
+            let parentHTMLElement = hoveredElement?.parentElement || null;
+            while (parentHTMLElement) {
+                const parentIsRoot = parentHTMLElement.id === 'VisualEditorRoot';
+                if (parentHTMLElement.dataset.cfNodeId || parentIsRoot) {
+                    parentElement = {
+                        nodeId: parentIsRoot ? 'root' : parentHTMLElement.dataset.cfNodeId,
+                        blockType: parentHTMLElement.dataset.cfNodeBlockType,
+                        blockId: parentHTMLElement.dataset.cfNodeBlockId,
+                    };
+                    const parentChildrenElements = parentHTMLElement.children;
+                    parentSectionIndex = Array.from(parentChildrenElements).findIndex((child) => child === hoveredElement);
+                    break;
+                }
+                parentHTMLElement = parentHTMLElement.parentElement;
+            }
+            const coordinates = this.getFullCoordinates(hoveredElement);
+            return { coordinates, hoveredElement: hoveredInfo, parentElement, parentSectionIndex };
+        };
+        this.handleMouseMove = (target) => {
+            const hoveredElementInfo = this.getNewlyHoveredElement(target);
+            if (!hoveredElementInfo) {
+                return;
+            }
+            const { coordinates, hoveredElement, parentElement, parentSectionIndex } = hoveredElementInfo;
+            this.currentHoveredElementId = hoveredElementInfo.hoveredElement.nodeId || null;
+            sendMessage(OUTGOING_EVENTS.NewHoveredElement, {
+                hoveredElement,
+                parentElement,
+                parentSectionIndex,
+                coordinates,
+            });
+        };
+        this.onMouseMove = (event) => {
+            const target = event.target;
+            this.handleMouseMove(target);
+        };
+        this.onMouseLeave = () => {
+            this.currentHoveredElementId = null;
+        };
+    }
+    getBoundingClientRect(element) {
+        const isAssembly = element.getAttribute('data-cf-node-block-type') === ASSEMBLY_NODE_TYPE;
+        if (!isAssembly) {
+            return element.getBoundingClientRect();
+        }
+        else {
+            // As we use `display: contents` for assemblies, there is no real "block"
+            // in the DOM and thus the browser fails to calculate the bounding rect.
+            // Instead, we calculate it for each child and add it up:
+            if (!element.firstElementChild) {
+                return { left: 0, top: 0, width: 0, height: 0 };
+            }
+            const firstChildRect = element.firstElementChild.getBoundingClientRect();
+            let fullHeight = firstChildRect.height;
+            let nextChild = element.firstElementChild.nextElementSibling;
+            while (nextChild) {
+                const nextChildRect = nextChild.getBoundingClientRect();
+                fullHeight += nextChildRect.height;
+                nextChild = nextChild.nextElementSibling;
+            }
+            // The root of a assembly positions its first level containers vertically.
+            // So we just need to add up the height and use the remaining properties from the first child.
+            return {
+                left: firstChildRect.left,
+                top: firstChildRect.top,
+                width: firstChildRect.width,
+                height: fullHeight,
+            };
+        }
+    }
+    attachEvent() {
+        document.addEventListener('mousemove', this.onMouseMove);
+        document.addEventListener('mouseout', this.onMouseLeave);
+    }
+    detachEvent() {
+        document.removeEventListener('mousemove', this.onMouseMove);
+        document.removeEventListener('mouseout', this.onMouseLeave);
+    }
+}
+
+/**
+ * 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 sendHoveredComponentCoordinates = (instanceId) => {
+    const selectedElement = instanceId
+        ? document.querySelector(`[data-cf-node-id="${instanceId}"]`)
+        : undefined;
+    const mouseOverHandler = new MouseOverHandler();
+    mouseOverHandler.handleMouseMove(selectedElement || null);
+};
+
+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);
+    const setEntitiesFetched = useEntityStore((state) => state.setEntitiesFetched);
+    const { updateTree, updateNodesByUpdatedEntity } = useTreeStore((state) => ({
+        updateTree: state.updateTree,
+        updateNodesByUpdatedEntity: state.updateNodesByUpdatedEntity,
+    }));
+    const unboundValues = useEditorStore((state) => state.unboundValues);
+    const dataSource = useEditorStore((state) => state.dataSource);
+    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 setDraggingOnCanvas = useDraggedItemStore((state) => state.setDraggingOnCanvas);
+    const setMousePosition = useDraggedItemStore((state) => state.setMousePosition);
+    const setScrollY = useDraggedItemStore((state) => state.setScrollY);
+    // TODO: As we have disabled the useEffect, we can remove these states
+    const [, /* isFetchingEntities */ setFetchingEntities] = useState(false);
+    const reloadApp = () => {
+        sendMessage(OUTGOING_EVENTS.CanvasReload, {});
+        // Wait a moment to ensure that the message was sent
+        setTimeout(() => {
+            // Received a hot reload message from webpack dev server -> reload the canvas
+            window.location.reload();
+        }, 50);
+    };
+    useEffect(() => {
+        sendMessage(OUTGOING_EVENTS.RequestComponentTreeUpdate);
+    }, []);
+    /**
+     * Fills up entityStore with entities from newDataSource and from the tree.
+     * Also manages "entity status" variables (areEntitiesFetched, isFetchingEntities)
+     */
+    const fetchMissingEntities = useCallback(async (entityStore, newDataSource, tree) => {
+        // if we realize that there's nothing missing and nothing to fill-fetch before we do any async call,
+        // then we can simply return and not lock the EntityStore at all.
+        const startFetching = () => {
+            setEntitiesFetched(false);
+            setFetchingEntities(true);
+        };
+        const endFetching = () => {
+            setEntitiesFetched(true);
+            setFetchingEntities(false);
+        };
+        // Prepare L1 entities and deepReferences
+        const entityLinksL1 = [
+            ...Object.values(newDataSource),
+            ...assembliesRegistry.values(), // we count assemblies here as "L1 entities", for convenience. Even though they're not headEntities.
+        ];
+        const deepReferences = gatherDeepReferencesFromTree(tree.root, newDataSource);
+        /**
+         * Checks only for _missing_ L1 entities
+         * WARNING: Does NOT check for entity staleness/versions. If an entity is stale, it will NOT be considered missing.
+         *          If ExperienceBuilder wants to update stale entities, it should post  `▼UPDATED_ENTITY` message to SDK.
+         */
+        const isMissingL1Entities = (entityLinks) => {
+            const { missingAssetIds, missingEntryIds } = entityStore.getMissingEntityIds(entityLinks);
+            return Boolean(missingAssetIds.length) || Boolean(missingEntryIds.length);
+        };
+        /**
+         * PRECONDITION: all L1 entities are fetched
+         */
+        const isMissingL2Entities = (deepReferences) => {
+            const referentLinks = deepReferences
+                .map((deepReference) => deepReference.extractReferent(entityStore))
+                .filter(isLink);
+            const { missingAssetIds, missingEntryIds } = entityStore.getMissingEntityIds(referentLinks);
+            return Boolean(missingAssetIds.length) || Boolean(missingEntryIds.length);
+        };
+        /**
+         * POST_CONDITION: entityStore is has all L1 entities (aka headEntities)
+         */
+        const fillupL1 = async ({ entityLinksL1, }) => {
+            const { missingAssetIds, missingEntryIds } = entityStore.getMissingEntityIds(entityLinksL1);
+            await entityStore.fetchEntities({ missingAssetIds, missingEntryIds });
+        };
+        /**
+         * PRECONDITION: all L1 entites are fetched
+         */
+        const fillupL2 = async ({ deepReferences }) => {
+            const referentLinks = deepReferences
+                .map((deepReference) => deepReference.extractReferent(entityStore))
+                .filter(isLink);
+            const { missingAssetIds, missingEntryIds } = entityStore.getMissingEntityIds(referentLinks);
+            await entityStore.fetchEntities({ missingAssetIds, missingEntryIds });
+        };
+        try {
+            if (isMissingL1Entities(entityLinksL1)) {
+                startFetching();
+                await fillupL1({ entityLinksL1 });
+            }
+            if (isMissingL2Entities(deepReferences)) {
+                startFetching();
+                await fillupL2({ deepReferences });
+            }
+        }
+        catch (error) {
+            console.error('[experiences-sdk-react] Failed fetching entities');
+            console.error(error);
+            throw error; // TODO: The original catch didn't let's rethrow; for the moment throw to see if we have any errors
+        }
+        finally {
+            endFetching();
+        }
+    }, [setEntitiesFetched /* setFetchingEntities, assembliesRegistry */]);
+    useEffect(() => {
+        const onMessage = async (event) => {
+            let reason;
+            if ((reason = doesMismatchMessageSchema(event))) {
+                if (event.origin.startsWith('http://localhost') &&
+                    `${event.data}`.includes('webpackHotUpdate')) {
+                    reloadApp();
+                }
+                else {
+                    console.warn(`[experiences-sdk-react::onMessage] Ignoring alien incoming message from origin [${event.origin}], due to: [${reason}]`, event);
+                }
+                return;
+            }
+            const eventData = tryParseMessage(event);
+            if (eventData.eventType === PostMessageMethods$1.REQUESTED_ENTITIES) {
+                // Expected message: This message is handled in the EntityStore to store fetched entities
+                return;
+            }
+            console.debug(`[experiences-sdk-react::onMessage] Received message [${eventData.eventType}]`, eventData);
+            const { payload } = eventData;
+            switch (eventData.eventType) {
+                case INCOMING_EVENTS.ExperienceUpdated: {
+                    const { tree, locale, changedNode, changedValueType, assemblies, } = payload;
+                    // Make sure to first store the assemblies before setting the tree and thus triggering a rerender
+                    if (assemblies) {
+                        setAssemblies(assemblies);
+                        // If the assemblyEntry is not yet fetched, this will be done below by
+                        // the imperative calls to fetchMissingEntities.
+                    }
+                    let newEntityStore = entityStore;
+                    if (entityStore.locale !== locale) {
+                        newEntityStore = resetEntityStore(locale);
+                        setLocale(locale);
+                    }
+                    // Below are mutually exclusive cases
+                    if (changedNode) {
+                        /**
+                         * On single node updates, we want to skip the process of getting the data (datasource and unbound values)
+                         * from tree. Since we know the updated node, we can skip that recursion everytime the tree updates and
+                         * just update the relevant data we need from the relevant node.
+                         *
+                         * We still update the tree here so we don't have a stale "tree"
+                         */
+                        if (changedValueType === 'BoundValue') {
+                            const newDataSource = { ...dataSource, ...changedNode.data.dataSource };
+                            setDataSource(newDataSource);
+                            await fetchMissingEntities(newEntityStore, newDataSource, tree);
+                        }
+                        else if (changedValueType === 'UnboundValue') {
+                            setUnboundValues({
+                                ...unboundValues,
+                                ...changedNode.data.unboundValues,
+                            });
+                        }
+                    }
+                    else {
+                        const { dataSource, unboundValues } = getDataFromTree(tree);
+                        setDataSource(dataSource);
+                        setUnboundValues(unboundValues);
+                        await fetchMissingEntities(newEntityStore, dataSource, tree);
+                    }
+                    // Update the tree when all necessary data is fetched and ready for rendering.
+                    updateTree(tree);
+                    break;
+                }
+                case INCOMING_EVENTS.AssembliesRegistered: {
+                    const { assemblies } = payload;
+                    assemblies.forEach((definition) => {
+                        addComponentRegistration({
+                            component: Assembly,
+                            definition,
+                        });
+                    });
+                    break;
+                }
+                case INCOMING_EVENTS.AssembliesAdded: {
+                    const { assembly, assemblyDefinition, } = payload;
+                    entityStore.updateEntity(assembly);
+                    // Using a Map here to avoid setting state and rerending all existing assemblies when a new assembly is added
+                    // TODO: Figure out if we can extend this love to data source and unbound values. Maybe that'll solve the blink
+                    // of all bound and unbound values when new values are added
+                    assembliesRegistry.set(assembly.sys.id, {
+                        sys: { id: assembly.sys.id, linkType: 'Entry', type: 'Link' },
+                    });
+                    if (assemblyDefinition) {
+                        addComponentRegistration({
+                            component: Assembly,
+                            definition: assemblyDefinition,
+                        });
+                    }
+                    break;
+                }
+                case INCOMING_EVENTS.CanvasResized: {
+                    const { selectedNodeId } = payload;
+                    if (selectedNodeId) {
+                        sendSelectedComponentCoordinates(selectedNodeId);
+                    }
+                    break;
+                }
+                case INCOMING_EVENTS.HoverComponent: {
+                    const { hoveredNodeId } = payload;
+                    sendHoveredComponentCoordinates(hoveredNodeId);
+                    break;
+                }
+                case INCOMING_EVENTS.ComponentDraggingChanged: {
+                    const { isDragging } = payload;
+                    if (!isDragging) {
+                        setComponentId('');
+                        setDraggingOnCanvas(false);
+                        SimulateDnD$1.reset();
+                    }
+                    break;
+                }
+                case INCOMING_EVENTS.UpdatedEntity: {
+                    const { entity: updatedEntity, shouldRerender } = payload;
+                    if (updatedEntity) {
+                        const storedEntity = entityStore.entities.find((entity) => entity.sys.id === updatedEntity.sys.id);
+                        const didEntityChange = storedEntity?.sys.version !== updatedEntity.sys.version;
+                        entityStore.updateEntity(updatedEntity);
+                        // We traverse the whole tree, so this is a opt-in feature to only use it when required.
+                        if (shouldRerender && didEntityChange) {
+                            updateNodesByUpdatedEntity(updatedEntity.sys.id);
+                        }
+                    }
+                    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: {
+                    SimulateDnD$1.setupDrag();
+                    setComponentId(payload.id || '');
+                    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 } = payload;
+                    setSelectedNodeId(nodeId);
+                    sendSelectedComponentCoordinates(nodeId);
+                    break;
+                }
+                case INCOMING_EVENTS.MouseMove: {
+                    const { mouseX, mouseY } = payload;
+                    setMousePosition(mouseX, mouseY);
+                    if (SimulateDnD$1.isDraggingOnParent && !SimulateDnD$1.isDragging) {
+                        SimulateDnD$1.startDrag(mouseX, mouseY);
+                    }
+                    else {
+                        SimulateDnD$1.updateDrag(mouseX, mouseY);
+                    }
+                    break;
+                }
+                case INCOMING_EVENTS.ComponentMoveEnded: {
+                    const { mouseX, mouseY } = payload;
+                    SimulateDnD$1.endDrag(mouseX, mouseY);
+                    break;
+                }
+                default:
+                    console.error(`[experiences-sdk-react::onMessage] Logic error, unsupported eventType: [${eventData.eventType}]`);
+            }
+        };
+        window.addEventListener('message', onMessage);
+        return () => {
+            window.removeEventListener('message', onMessage);
+        };
+    }, [
+        entityStore,
+        setComponentId,
+        setDraggingOnCanvas,
+        setDataSource,
+        setLocale,
+        setSelectedNodeId,
+        dataSource,
+        areEntitiesFetched,
+        fetchMissingEntities,
+        setUnboundValues,
+        unboundValues,
+        updateTree,
+        updateNodesByUpdatedEntity,
+        setMousePosition,
+        resetEntityStore,
+    ]);
+    /*
+     * 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 }) => {
+    const node = {
+        type: 'block',
+        data: {
+            id: generateId(blockId),
+            blockId,
+            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, }) => {
+    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),
+            breakpoints: [],
+            dataSource: {},
+            props: {},
+            unboundValues: {},
+        },
+    };
+    onComponentDropped({
+        node: emptyComponentData,
+        index: destinationIndex,
+        parentType: parentIsRoot ? 'root' : parentNode?.type,
+        parentBlockId: parentNode?.data.blockId,
+        parentId: parentIsRoot ? 'root' : parentId,
+    });
+};
+
+function useCanvasInteractions() {
+    const tree = useTreeStore((state) => state.tree);
+    const reorderChildren = useTreeStore((state) => state.reorderChildren);
+    const reparentChild = useTreeStore((state) => state.reparentChild);
+    const addChild = useTreeStore((state) => state.addChild);
+    const onAddComponent = (droppedItem) => {
+        const { destination, draggableId } = droppedItem;
+        if (!destination) {
+            return;
+        }
+        const droppingOnRoot = destination.droppableId === ROOT_ID;
+        const isValidRootComponent = draggableId === CONTENTFUL_COMPONENTS.container.id;
+        let node = createTreeNode({ blockId: draggableId, parentId: destination.droppableId });
+        if (droppingOnRoot && !isValidRootComponent) {
+            const wrappingContainer = createTreeNode({
+                blockId: CONTENTFUL_COMPONENTS.container.id,
+                parentId: destination.droppableId,
+            });
+            const childNode = createTreeNode({
+                blockId: draggableId,
+                parentId: wrappingContainer.data.id,
+            });
+            node = wrappingContainer;
+            node.children = [childNode];
+        }
+        addChild(destination.index, destination.droppableId, node);
+        onDrop({
+            data: tree,
+            componentType: draggableId,
+            destinationIndex: destination.index,
+            destinationZoneId: destination.droppableId,
+        });
+    };
+    const onMoveComponent = (droppedItem) => {
+        const { destination, source, draggableId } = droppedItem;
+        if (!destination || !source) {
+            return;
+        }
+        if (destination.droppableId === source.droppableId) {
+            reorderChildren(destination.index, destination.droppableId, source.index);
+        }
+        if (destination.droppableId !== source.droppableId) {
+            reparentChild(destination.index, destination.droppableId, source.index, source.droppableId);
+        }
+        onComponentMoved({
+            nodeId: draggableId,
+            destinationIndex: destination.index,
+            destinationParentId: destination.droppableId,
+            sourceIndex: source.index,
+            sourceParentId: source.droppableId,
+        });
+    };
+    return { onAddComponent, onMoveComponent };
+}
+
+const TestDNDContainer = ({ onDragEnd, onBeforeDragStart, 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);
+    };
+    const handleDrag = (event) => {
+        const draggedItem = event.nativeEvent;
+        const update = {
+            mode: draggedItem.mode,
+            draggableId: draggedItem.draggableId,
+            type: draggedItem.type,
+            source: draggedItem.source,
+            destination: draggedItem.destination,
+            combine: draggedItem.combine,
+        };
+        onDragUpdate(update, {});
+    };
+    const handleDragEnd = (event) => {
+        const draggedItem = event.nativeEvent;
+        const result = {
+            mode: draggedItem.mode,
+            draggableId: draggedItem.draggableId,
+            type: draggedItem.type,
+            source: draggedItem.source,
+            destination: draggedItem.destination,
+            combine: draggedItem.combine,
+            reason: draggedItem.reason,
+        };
+        onDragEnd(result, {});
+    };
+    return (React.createElement("div", { "data-test-id": "dnd-context-substitute", onDragStart: handleDragStart, onDrag: handleDrag, onDragEnd: handleDragEnd }, children));
+};
+
+const DNDProvider = ({ children }) => {
+    const setSelectedNodeId = useEditorStore((state) => state.setSelectedNodeId);
+    const draggedItem = useDraggedItemStore((state) => state.draggedItem);
+    const setOnBeforeCaptureId = useDraggedItemStore((state) => state.setOnBeforeCaptureId);
+    const setDraggingOnCanvas = useDraggedItemStore((state) => state.setDraggingOnCanvas);
+    const updateItem = useDraggedItemStore((state) => state.updateItem);
+    const { onAddComponent, onMoveComponent } = useCanvasInteractions();
+    const selectedNodeId = useEditorStore((state) => state.selectedNodeId);
+    const prevSelectedNodeId = useRef(null);
+    const isTestRun = typeof window !== 'undefined' && Object.prototype.hasOwnProperty.call(window, 'Cypress');
+    const dragStart = ({ source }) => {
+        prevSelectedNodeId.current = selectedNodeId;
+        //Unselect the current node when dragging and remove the outline
+        setSelectedNodeId('');
+        sendMessage(OUTGOING_EVENTS.ComponentSelected, {
+            nodeId: '',
+        });
+        if (source.droppableId !== COMPONENT_LIST_ID) {
+            sendMessage(OUTGOING_EVENTS.ComponentMoveStarted);
+        }
+    };
+    const beforeCapture = ({ draggableId }) => {
+        setDraggingOnCanvas(true);
+        setOnBeforeCaptureId(draggableId);
+    };
+    const dragUpdate = (update) => {
+        updateItem(update);
+    };
+    const dragEnd = (dropResult) => {
+        setDraggingOnCanvas(false);
+        setOnBeforeCaptureId('');
+        updateItem(undefined);
+        SimulateDnD$1.reset();
+        if (!dropResult.destination) {
+            if (!draggedItem?.destination) {
+                // User cancel drag
+                sendMessage(OUTGOING_EVENTS.ComponentDragCanceled);
+                //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);
+        sendMessage(OUTGOING_EVENTS.ComponentSelected, {
+            nodeId: dropResult.draggableId,
+        });
+    };
+    return (React.createElement(DragDropContext, { onBeforeCapture: beforeCapture, onDragUpdate: dragUpdate, onBeforeDragStart: dragStart, onDragEnd: dragEnd }, isTestRun ? (React.createElement(TestDNDContainer, { onDragEnd: dragEnd, onBeforeDragStart: dragStart, onDragUpdate: dragUpdate }, children)) : (children)));
+};
+
+const RootRenderer = ({ onChange }) => {
+    useEditorSubscriber();
+    const dragItem = useDraggedItemStore((state) => state.componentId);
+    const userIsDragging = useDraggedItemStore((state) => state.isDraggingOnCanvas);
+    const breakpoints = useTreeStore((state) => state.breakpoints);
+    const setSelectedNodeId = useEditorStore((state) => state.setSelectedNodeId);
+    const draggableSourceId = useDraggedItemStore((state) => state.draggedItem?.source.droppableId);
+    const draggingNewComponent = !!draggableSourceId?.startsWith(COMPONENT_LIST_ID);
+    const containerRef = useRef(null);
+    const { resolveDesignValue } = useBreakpoints(breakpoints);
+    const [containerStyles, setContainerStyles] = useState({});
+    const tree = useTreeStore((state) => state.tree);
+    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, {
+            selectedId: '',
+        });
+        setSelectedNodeId('');
+    }, [setSelectedNodeId]);
+    const handleResizeCanvas = useCallback(() => {
+        const parentElement = containerRef.current?.parentElement;
+        if (!parentElement) {
+            return;
+        }
+        let siblingHeight = 0;
+        for (const child of parentElement.children) {
+            if (!child.hasAttribute('data-ctfl-root')) {
+                siblingHeight += child.getBoundingClientRect().height;
+            }
+        }
+        if (!siblingHeight) {
+            /**
+             * DRAGGABLE_HEIGHT is subtracted here due to an uninteded scrolling effect
+             * when dragging a new component onto the canvas
+             *
+             * The DRAGGABLE_HEIGHT is then added as margin bottom to offset this value
+             * so that visually there is no difference to the user.
+             */
+            setContainerStyles({
+                minHeight: `${window.innerHeight - DRAGGABLE_HEIGHT}px`,
+            });
+            return;
+        }
+        setContainerStyles({
+            minHeight: `${window.innerHeight - siblingHeight}px`,
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [containerRef.current]);
+    useEffect(() => {
+        if (onChange)
+            onChange(tree);
+    }, [tree, onChange]);
+    useEffect(() => {
+        document.addEventListener('click', handleClickOutside);
+        return () => {
+            document.removeEventListener('click', handleClickOutside);
+        };
+    }, [handleClickOutside]);
+    useEffect(() => {
+        handleResizeCanvas();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [containerRef.current]);
+    return (React.createElement(DNDProvider, null,
+        dragItem && React.createElement(DraggableContainer, { id: dragItem }),
+        React.createElement("div", { "data-ctfl-root": true, className: styles.container, ref: containerRef, style: containerStyles },
+            userIsDragging && draggingNewComponent && (React.createElement("div", { className: styles.hitbox, "data-ctfl-zone-id": ROOT_ID })),
+            React.createElement(Dropzone, { zoneId: ROOT_ID, resolveDesignValue: resolveDesignValue }),
+            userIsDragging && draggingNewComponent && (React.createElement("div", { "data-ctfl-zone-id": ROOT_ID, className: styles.hitboxLower }))),
+        React.createElement("div", { "data-ctfl-hitboxes": true })));
+};
+
+const useInitializeEditor = () => {
+    const initializeEditor = useEditorStore((state) => state.initializeEditor);
+    const [initialized, setInitialized] = useState(false);
+    const resetEntityStore = useEntityStore((state) => state.resetEntityStore);
+    useEffect(() => {
+        const onVisualEditorInitialize = (event) => {
+            if (!event.detail)
+                return;
+            const { componentRegistry, designTokens, locale: initialLocale, 
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            entities, } = event.detail;
+            initializeEditor({
+                initialLocale,
+                componentRegistry,
+                designTokens,
+            });
+            // if entities is set to [], then everything will still work as EntityStore will
+            // request entities on demand via ▲REQUEST_ENTITY
+            resetEntityStore(initialLocale, entities);
+            setInitialized(true);
+        };
+        // Listen for VisualEditorComponents internal event
+        window.addEventListener(INTERNAL_EVENTS.VisualEditorInitialize, onVisualEditorInitialize);
+        // Clean up the event listener
+        return () => {
+            window.removeEventListener(INTERNAL_EVENTS.VisualEditorInitialize, onVisualEditorInitialize);
+        };
+    }, [initializeEditor, resetEntityStore]);
+    useEffect(() => {
+        if (initialized) {
+            return;
+        }
+        // Dispatch Visual Editor Ready event
+        window.dispatchEvent(new CustomEvent(VISUAL_EDITOR_EVENTS.Ready));
+    }, [initialized]);
+    return initialized;
+};
+
+const VisualEditorRoot = () => {
+    const initialized = useInitializeEditor();
+    const setMousePosition = useDraggedItemStore((state) => state.setMousePosition);
+    const setHoveringZone = useZoneStore((state) => state.setHoveringZone);
+    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,
+                clientY: e.pageY - window.scrollY,
+            });
+        };
+        document.addEventListener('mousemove', onMouseMove);
+        return () => {
+            document.removeEventListener('mousemove', onMouseMove);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    if (!initialized)
+        return null;
+    return React.createElement(RootRenderer, null);
+};
+
+export { VisualEditorRoot as default };
+//# sourceMappingURL=index.js.map