@contentful/experiences-core 0.0.1-alpha.10

package/dist/index.js

@@ -0,0 +1,2359 @@
+import md5 from 'md5';
+import { BLOCKS } from '@contentful/rich-text-types';
+
+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 CONTENTFUL_COMPONENT_CATEGORY = 'contentful-component';
+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: 'contentful-button',
+        name: 'Button',
+    },
+    heading: {
+        id: 'contentful-heading',
+        name: 'Heading',
+    },
+    image: {
+        id: 'contentful-image',
+        name: 'Image',
+    },
+    richText: {
+        id: 'contentful-richText',
+        name: 'Rich Text',
+    },
+    text: {
+        id: 'contentful-text',
+        name: 'Text',
+    },
+};
+const ASSEMBLY_DEFAULT_CATEGORY = 'Assemblies';
+const EMPTY_CONTAINER_HEIGHT = '80px';
+const DEFAULT_IMAGE_WIDTH = '500px';
+var PostMessageMethods;
+(function (PostMessageMethods) {
+    PostMessageMethods["REQUEST_ENTITIES"] = "REQUEST_ENTITIES";
+    PostMessageMethods["REQUESTED_ENTITIES"] = "REQUESTED_ENTITIES";
+})(PostMessageMethods || (PostMessageMethods = {}));
+const SUPPORTED_IMAGE_FORMATS = ['jpg', 'png', 'webp', 'gif', 'avif'];
+
+const structureComponents = new Set([
+    CONTENTFUL_COMPONENTS.section.id,
+    CONTENTFUL_COMPONENTS.columns.id,
+    CONTENTFUL_COMPONENTS.container.id,
+    CONTENTFUL_COMPONENTS.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);
+    if (!supportedEventTypes.includes(eventData.eventType)) {
+        // Expected message: This message is handled in the EntityStore to store fetched entities
+        if (eventData.eventType !== PostMessageMethods.REQUESTED_ENTITIES) {
+            throw new ParseError(`Field eventData.eventType must be one of the supported values: [${supportedEventTypes.join(', ')}]`);
+        }
+    }
+    return eventData;
+};
+const validateExperienceBuilderConfig = ({ locale, isEditorMode, }) => {
+    if (isEditorMode) {
+        return;
+    }
+    if (!locale) {
+        throw new Error('Parameter "locale" is required for experience builder initialization outside of editor mode');
+    }
+};
+
+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;
+};
+
+// 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 : ''}`;
+}
+
+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 MAX_WIDTH_ALLOWED$1 = 2000;
+const getOptimizedBackgroundImageAsset = (file, widthStyle, quality = '100%', format) => {
+    const qualityNumber = Number(quality.replace('%', ''));
+    if (!validateParams(file, qualityNumber, format)) ;
+    if (!validateParams(file, qualityNumber, format)) ;
+    const url = file.url;
+    const { width1x, width2x } = getWidths(widthStyle, file);
+    const imageUrl1x = getOptimizedImageUrl(url, width1x, qualityNumber, format);
+    const imageUrl2x = getOptimizedImageUrl(url, width2x, qualityNumber, format);
+    const srcSet = [`url(${imageUrl1x}) 1x`, `url(${imageUrl2x}) 2x`];
+    const returnedUrl = getOptimizedImageUrl(url, width2x, qualityNumber, format);
+    const optimizedBackgroundImageAsset = {
+        url: returnedUrl,
+        srcSet,
+        file,
+    };
+    return optimizedBackgroundImageAsset;
+    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) => {
+    const qualityNumber = Number(quality.replace('%', ''));
+    if (!validateParams(file, qualityNumber, 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, qualityNumber, format)} ${width}w`)
+        : [];
+    const intrinsicImageWidth = file.details.image.width;
+    if (intrinsicImageWidth > MAX_WIDTH_ALLOWED) {
+        srcSet.push(`${getOptimizedImageUrl(url, undefined, qualityNumber, format)} ${intrinsicImageWidth}w`);
+    }
+    const returnedUrl = getOptimizedImageUrl(url, file.details.image.width > 2000 ? 2000 : undefined, qualityNumber, format);
+    const optimizedImageAsset = {
+        url: returnedUrl,
+        srcSet,
+        sizes,
+        file,
+    };
+    return optimizedImageAsset;
+};
+
+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, 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, 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,
+    };
+};
+/**
+ * Gets calculates the index to drop the dragged component based on the mouse position
+ * @returns {InsertionData} a object containing a node that will become a parent for dragged component and index at which it must be inserted
+ */
+const getInsertionData = ({ dropReceiverParentNode, dropReceiverNode, flexDirection, isMouseAtTopBorder, isMouseAtBottomBorder, isMouseInLeftHalf, isMouseInUpperHalf, isOverTopIndicator, isOverBottomIndicator, }) => {
+    const APPEND_INSIDE = dropReceiverNode.children.length;
+    const PREPEND_INSIDE = 0;
+    if (isMouseAtTopBorder || isMouseAtBottomBorder) {
+        const indexOfSectionInParentChildren = dropReceiverParentNode.children.findIndex((n) => n.data.id === dropReceiverNode.data.id);
+        const APPEND_OUTSIDE = indexOfSectionInParentChildren + 1;
+        const PREPEND_OUTSIDE = indexOfSectionInParentChildren;
+        return {
+            // when the mouse is around the border we want to drop the new component as a new section onto the root node
+            node: dropReceiverParentNode,
+            index: isMouseAtBottomBorder ? APPEND_OUTSIDE : PREPEND_OUTSIDE,
+        };
+    }
+    // if over one of the section indicators
+    if (isOverTopIndicator || isOverBottomIndicator) {
+        const indexOfSectionInParentChildren = dropReceiverParentNode.children.findIndex((n) => n.data.id === dropReceiverNode.data.id);
+        const APPEND_OUTSIDE = indexOfSectionInParentChildren + 1;
+        const PREPEND_OUTSIDE = indexOfSectionInParentChildren;
+        return {
+            // when the mouse is around the border we want to drop the new component as a new section onto the root node
+            node: dropReceiverParentNode,
+            index: isOverBottomIndicator ? APPEND_OUTSIDE : PREPEND_OUTSIDE,
+        };
+    }
+    if (flexDirection === undefined || flexDirection === 'row') {
+        return {
+            node: dropReceiverNode,
+            index: isMouseInLeftHalf ? PREPEND_INSIDE : APPEND_INSIDE,
+        };
+    }
+    else {
+        return {
+            node: dropReceiverNode,
+            index: isMouseInUpperHalf ? PREPEND_INSIDE : APPEND_INSIDE,
+        };
+    }
+};
+const generateRandomId = (letterCount) => {
+    const LETTERS = 'abcdefghijklmnopqvwxyzABCDEFGHIJKLMNOPQVWXYZ';
+    const NUMS = '0123456789';
+    const ALNUM = NUMS + LETTERS;
+    const times = (n, callback) => Array.from({ length: n }, callback);
+    const random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+    return times(letterCount, () => ALNUM[random(0, ALNUM.length - 1)]).join('');
+};
+const checkIsAssemblyNode = ({ componentId, usedComponents, }) => {
+    if (!usedComponents?.length)
+        return false;
+    return usedComponents.some((usedComponent) => usedComponent.sys.id === componentId);
+};
+/** @deprecated use `checkIsAssemblyNode` instead. Will be removed with SDK v5. */
+const checkIsAssembly = checkIsAssemblyNode;
+/**
+ * This check assumes that the entry is already ensured to be an experience, i.e. the
+ * content type of the entry is an experience type with the necessary annotations.
+ **/
+const checkIsAssemblyEntry = (entry) => {
+    return Boolean(entry.fields?.componentSettings);
+};
+const checkIsAssemblyDefinition = (component) => component?.category === ASSEMBLY_DEFAULT_CATEGORY;
+
+const isExperienceEntry = (entry) => {
+    return (entry?.sys?.type === 'Entry' &&
+        !!entry.fields?.title &&
+        !!entry.fields?.slug &&
+        !!entry.fields?.componentTree &&
+        Array.isArray(entry.fields.componentTree.breakpoints) &&
+        Array.isArray(entry.fields.componentTree.children) &&
+        typeof entry.fields.componentTree.schemaVersion === 'string');
+};
+
+const supportedModes = ['delivery', 'preview', 'editor'];
+
+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%',
+            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',
+            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 sectionBuiltInStyles = {
+    ...builtInStyles,
+    cfBackgroundImageUrl: optionalBuiltInStyles.cfBackgroundImageUrl,
+    cfBackgroundImageOptions: optionalBuiltInStyles.cfBackgroundImageOptions,
+};
+const containerBuiltInStyles = {
+    ...builtInStyles,
+    cfBackgroundImageUrl: optionalBuiltInStyles.cfBackgroundImageUrl,
+    cfBackgroundImageOptions: optionalBuiltInStyles.cfBackgroundImageOptions,
+    cfMaxWidth: {
+        displayName: 'Max Width',
+        type: 'Text',
+        group: 'style',
+        description: 'The max-width of the section',
+        defaultValue: '1192px',
+    },
+};
+const singleColumnBuiltInStyles = {
+    cfBackgroundImageUrl: optionalBuiltInStyles.cfBackgroundImageUrl,
+    cfBackgroundImageOptions: optionalBuiltInStyles.cfBackgroundImageOptions,
+    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 column',
+        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 column',
+        defaultValue: 'center',
+        displayName: 'Horizontal alignment',
+    },
+    cfPadding: {
+        displayName: 'Padding',
+        type: 'Text',
+        group: 'style',
+        description: 'The padding of the column',
+        defaultValue: '0 0 0 0',
+    },
+    cfBackgroundColor: {
+        displayName: 'Background color',
+        type: 'Text',
+        group: 'style',
+        description: 'The background color of the column',
+        defaultValue: 'rgba(255, 255, 255, 0)',
+    },
+    cfFlexDirection: {
+        displayName: 'Direction',
+        type: 'Text',
+        group: 'style',
+        description: 'The orientation of the column',
+        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 column',
+        defaultValue: '0px solid rgba(0, 0, 0, 0)',
+    },
+    cfBorderRadius: {
+        displayName: 'Border Radius',
+        type: 'Text',
+        group: 'style',
+        description: 'The border radius of the column',
+        defaultValue: '0px',
+    },
+    cfGap: {
+        displayName: 'Gap',
+        type: 'Text',
+        group: 'style',
+        description: 'The spacing between the elements of the column',
+        defaultValue: '0px',
+    },
+    cfColumnSpan: {
+        type: 'Text',
+        defaultValue: '6',
+        group: 'style',
+    },
+    cfColumnSpanLock: {
+        type: 'Boolean',
+        defaultValue: false,
+        group: 'style',
+    },
+};
+const columnsBuiltInStyles = {
+    cfBackgroundImageUrl: optionalBuiltInStyles.cfBackgroundImageUrl,
+    cfBackgroundImageOptions: optionalBuiltInStyles.cfBackgroundImageOptions,
+    cfMargin: {
+        displayName: 'Margin',
+        type: 'Text',
+        group: 'style',
+        description: 'The margin of the columns',
+        defaultValue: '0 0 0 0',
+    },
+    cfWidth: {
+        displayName: 'Width',
+        type: 'Text',
+        group: 'style',
+        description: 'The width of the columns',
+        defaultValue: 'fill',
+    },
+    cfMaxWidth: {
+        displayName: 'Max width',
+        type: 'Text',
+        group: 'style',
+        description: 'The max-width of the columns',
+        defaultValue: '1192px',
+    },
+    cfPadding: {
+        displayName: 'Padding',
+        type: 'Text',
+        group: 'style',
+        description: 'The padding of the columns',
+        defaultValue: '10px 10px 10px 10px',
+    },
+    cfBackgroundColor: {
+        displayName: 'Background color',
+        type: 'Text',
+        group: 'style',
+        description: 'The background color of the columns',
+        defaultValue: 'rgba(255, 255, 255, 0)',
+    },
+    cfBorder: {
+        displayName: 'Border',
+        type: 'Text',
+        group: 'style',
+        description: 'The border of the columns',
+        defaultValue: '0px solid rgba(0, 0, 0, 0)',
+    },
+    cfBorderRadius: {
+        displayName: 'Border Radius',
+        type: 'Text',
+        group: 'style',
+        description: 'The border radius of the columns',
+        defaultValue: '0px',
+    },
+    cfGap: {
+        displayName: 'Gap',
+        type: 'Text',
+        group: 'style',
+        description: 'The spacing between the elements of the columns',
+        defaultValue: '10px 10px',
+    },
+    cfColumns: {
+        type: 'Text',
+        defaultValue: '[6,6]',
+        group: 'style',
+    },
+    cfWrapColumns: {
+        type: 'Boolean',
+        defaultValue: false,
+        group: 'style',
+    },
+    cfWrapColumnsCount: {
+        type: 'Text',
+        defaultValue: '2',
+        group: 'style',
+    },
+};
+
+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 sectionDefinition = {
+    id: CONTENTFUL_COMPONENTS.section.id,
+    name: CONTENTFUL_COMPONENTS.section.name,
+    category: CONTENTFUL_COMPONENT_CATEGORY,
+    children: true,
+    variables: sectionBuiltInStyles,
+    tooltip: {
+        description: 'Create a new full width section of your experience by dragging this component onto the canvas. Other components and patterns can be added into a section.',
+    },
+};
+const containerDefinition = {
+    id: CONTENTFUL_COMPONENTS.container.id,
+    name: CONTENTFUL_COMPONENTS.container.name,
+    category: CONTENTFUL_COMPONENT_CATEGORY,
+    children: true,
+    variables: containerBuiltInStyles,
+    tooltip: {
+        description: 'Create a new area or pattern within your page layout by dragging a container onto the canvas. Other components and patterns can be added into a container.',
+    },
+};
+const columnsDefinition = {
+    id: CONTENTFUL_COMPONENTS.columns.id,
+    name: CONTENTFUL_COMPONENTS.columns.name,
+    category: CONTENTFUL_COMPONENT_CATEGORY,
+    children: true,
+    variables: columnsBuiltInStyles,
+    tooltip: {
+        description: 'Add columns to a container to create your desired layout and ensure that the experience is responsive across different screen sizes.',
+    },
+};
+const singleColumnDefinition = {
+    id: CONTENTFUL_COMPONENTS.singleColumn.id,
+    name: CONTENTFUL_COMPONENTS.singleColumn.name,
+    category: CONTENTFUL_COMPONENT_CATEGORY,
+    children: true,
+    variables: singleColumnBuiltInStyles,
+};
+
+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.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.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);
+    }
+}
+
+function transformAssetFileToUrl(fieldValue) {
+    return fieldValue && typeof fieldValue == 'object' && fieldValue.url
+        ? fieldValue.url
+        : fieldValue;
+}
+
+// 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;
+    }
+}
+
+class EntityStore extends EntityStoreBase {
+    constructor(options) {
+        if (typeof options === 'string') {
+            const data = JSON.parse(options);
+            const { _experienceEntry, _unboundValues, locale, entryMap, assetMap } = data.entityStore;
+            super({
+                entities: [
+                    ...Object.values(entryMap),
+                    ...Object.values(assetMap),
+                ],
+                locale,
+            });
+            this._experienceEntry = _experienceEntry;
+            this._unboundValues = _unboundValues;
+        }
+        else {
+            const { experienceEntry, entities, locale } = options;
+            super({ entities, locale });
+            if (isExperienceEntry(experienceEntry)) {
+                this._experienceEntry = experienceEntry.fields;
+                this._unboundValues = experienceEntry.fields.unboundValues;
+            }
+            else {
+                throw new Error('Provided entry is not experience entry');
+            }
+        }
+    }
+    getCurrentLocale() {
+        return this.locale;
+    }
+    get experienceEntryFields() {
+        return this._experienceEntry;
+    }
+    get schemaVersion() {
+        return this._experienceEntry?.componentTree.schemaVersion;
+    }
+    get breakpoints() {
+        return this._experienceEntry?.componentTree.breakpoints ?? [];
+    }
+    get dataSource() {
+        return this._experienceEntry?.dataSource ?? {};
+    }
+    get unboundValues() {
+        return this._unboundValues ?? {};
+    }
+    get usedComponents() {
+        return this._experienceEntry?.usedComponents ?? [];
+    }
+    /**
+     * Extend the existing set of unbound values with the ones from the assembly definition.
+     * When creating a new assembly out of a container, the unbound value keys are copied and
+     * thus the existing and the added ones have colliding keys. In the case of overlapping value
+     * keys, the ones from the experience overrule the ones from the assembly definition as
+     * the latter one is certainly just a default value while the other one is from the actual instance.
+     * @param unboundValues set of unbound values defined in the assembly definition
+     */
+    addAssemblyUnboundValues(unboundValues) {
+        this._unboundValues = { ...unboundValues, ...(this._unboundValues ?? {}) };
+    }
+    getValue(entityLinkOrEntity, path) {
+        const entity = isLink(entityLinkOrEntity)
+            ? this.getEntityFromLink(entityLinkOrEntity)
+            : entityLinkOrEntity;
+        if (entity === undefined) {
+            return;
+        }
+        const fieldValue = get(entity, path);
+        return transformAssetFileToUrl(fieldValue);
+    }
+    toJSON() {
+        return {
+            _experienceEntry: this._experienceEntry,
+            _unboundValues: this._unboundValues,
+            ...super.toJSON(),
+        };
+    }
+}
+
+var VisualEditorMode;
+(function (VisualEditorMode) {
+    VisualEditorMode["LazyLoad"] = "lazyLoad";
+    VisualEditorMode["InjectScript"] = "injectScript";
+})(VisualEditorMode || (VisualEditorMode = {}));
+
+function createExperience(options) {
+    if (typeof options === 'string') {
+        const entityStore = new EntityStore(options);
+        return {
+            entityStore,
+        };
+    }
+    else {
+        const { experienceEntry, referencedAssets, referencedEntries, locale } = options;
+        if (!isExperienceEntry(experienceEntry)) {
+            throw new Error('Provided entry is not experience entry');
+        }
+        const entityStore = new EntityStore({
+            experienceEntry,
+            entities: [...referencedEntries, ...referencedAssets],
+            locale,
+        });
+        return {
+            entityStore,
+        };
+    }
+}
+
+const fetchExperienceEntry = async ({ client, experienceTypeId, locale, identifier, }) => {
+    if (!client) {
+        throw new Error('Failed to fetch experience entities. Required "client" parameter was not provided');
+    }
+    if (!locale) {
+        throw new Error('Failed to fetch experience entities. Required "locale" parameter was not provided');
+    }
+    if (!experienceTypeId) {
+        throw new Error('Failed to fetch experience entities. Required "experienceTypeId" parameter was not provided');
+    }
+    if (!identifier.slug && !identifier.id) {
+        throw new Error(`Failed to fetch experience entities. At least one identifier must be provided. Received: ${JSON.stringify(identifier)}`);
+    }
+    const filter = identifier.slug ? { 'fields.slug': identifier.slug } : { 'sys.id': identifier.id };
+    const entries = await client.getEntries({
+        content_type: experienceTypeId,
+        locale,
+        ...filter,
+    });
+    if (entries.items.length > 1) {
+        throw new Error(`More than one experience with identifier: ${JSON.stringify(identifier)} was found`);
+    }
+    return entries.items[0];
+};
+
+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);
+}
+
+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 gatherDeepReferencesFromExperienceEntry(experienceEntry) {
+    const deepReferences = [];
+    const dataSource = experienceEntry.fields.dataSource;
+    const { children } = experienceEntry.fields.componentTree;
+    treeVisit({
+        definitionId: 'root',
+        variables: {},
+        children,
+    }, (node) => {
+        if (!node.variables)
+            return;
+        for (const [, variableMapping] of Object.entries(node.variables)) {
+            if (variableMapping.type !== 'BoundValue')
+                continue;
+            if (!isDeepPath(variableMapping.path))
+                continue;
+            deepReferences.push(DeepReference.from({
+                path: variableMapping.path,
+                dataSource,
+            }));
+        }
+    });
+    return deepReferences;
+}
+function gatherDeepReferencesFromTree(startingNode, dataSource) {
+    const deepReferences = [];
+    treeVisit(startingNode, (node) => {
+        if (!node.data.props)
+            return;
+        for (const [, variableMapping] of Object.entries(node.data.props)) {
+            if (variableMapping.type !== 'BoundValue')
+                continue;
+            if (!isDeepPath(variableMapping.path))
+                continue;
+            deepReferences.push(DeepReference.from({
+                path: variableMapping.path,
+                dataSource,
+            }));
+        }
+    });
+    return deepReferences;
+}
+
+/**
+ * Traverses deep-references and extracts referents from valid deep-paths.
+ * The referents are received from the CDA/CPA response `.includes` field.
+ *
+ * In case deep-paths not resolving till the end, eg.:
+ *  - non-link referents: are ignored
+ *  - unset references:   are ignored
+ *
+ * Errors are thrown in case of deep-paths being correct,
+ * but referents not found. Because if we don't throw now, the EntityStore will
+ * be missing entities and upon rendering will not be able to render bindings.
+ */
+function gatherAutoFetchedReferentsFromIncludes(deepReferences, entriesResponse) {
+    const autoFetchedReferentEntries = [];
+    const autoFetchedReferentAssets = [];
+    for (const reference of deepReferences) {
+        const headEntry = entriesResponse.items.find((entry) => entry.sys.id === reference.headEntityId);
+        if (!headEntry) {
+            throw new Error(`LogicError: When resolving deep-references could not find headEntry (id=${reference.entityId})`);
+        }
+        const linkToReferent = headEntry.fields[reference.field];
+        if (undefined === linkToReferent) {
+            console.debug(`[experiences-sdk-react::gatherAutoFetchedReferentsFromIncludes] Empty reference in headEntity. Probably reference is simply not set.`);
+            continue;
+        }
+        if (!isLink(linkToReferent)) {
+            console.debug(`[experiences-sdk-react::gatherAutoFetchedReferentsFromIncludes] Non-link value in headEntity. Probably broken path '${reference.originalPath}'`);
+            continue;
+        }
+        if (linkToReferent.sys.linkType === 'Entry') {
+            const referentEntry = entriesResponse.includes?.Entry?.find((entry) => entry.sys.id === linkToReferent.sys.id);
+            if (!referentEntry) {
+                throw new Error(`Logic Error: L2-referent Entry was not found within .includes (${JSON.stringify({
+                    linkToReferent,
+                })})`);
+            }
+            autoFetchedReferentEntries.push(referentEntry);
+        }
+        else if (linkToReferent.sys.linkType === 'Asset') {
+            const referentAsset = entriesResponse.includes?.Asset?.find((entry) => entry.sys.id === linkToReferent.sys.id);
+            if (!referentAsset) {
+                throw new Error(`Logic Error: L2-referent Asset was not found within includes (${JSON.stringify({
+                    linkToReferent,
+                })})`);
+            }
+            autoFetchedReferentAssets.push(referentAsset);
+        }
+        else {
+            console.debug(`[experiences-sdk-react::gatherAutoFetchedReferentsFromIncludes] Unhandled linkType :${JSON.stringify(linkToReferent)}`);
+        }
+    } // for (reference of deepReferences)
+    return { autoFetchedReferentAssets, autoFetchedReferentEntries };
+}
+
+const MIN_FETCH_LIMIT = 1;
+const fetchEntities = async ({ entityType, client, query, }) => {
+    if (entityType === 'Asset') {
+        return client.getAssets({ ...query });
+    }
+    return client.withoutLinkResolution.getEntries({ ...query });
+};
+const fetchAllEntities = async ({ client, entityType, ids, locale, skip = 0, limit = 100, responseItems = [], }) => {
+    try {
+        if (!ids.length || !client) {
+            return {
+                items: [],
+            };
+        }
+        const query = { 'sys.id[in]': ids, locale, limit, skip };
+        const response = await fetchEntities({ entityType, client, query });
+        if (!response) {
+            return {
+                items: responseItems,
+            };
+        }
+        responseItems.push(...response.items);
+        if (skip + limit < response.total) {
+            await fetchAllEntities({
+                client,
+                entityType,
+                ids,
+                locale,
+                skip: skip + limit,
+                limit,
+                responseItems,
+            });
+        }
+        return {
+            items: responseItems,
+        };
+    }
+    catch (error) {
+        if (error instanceof Error &&
+            error.message.includes('size too big') &&
+            limit > MIN_FETCH_LIMIT) {
+            const newLimit = Math.max(MIN_FETCH_LIMIT, Math.floor(limit / 2));
+            return fetchAllEntities({
+                client,
+                entityType,
+                ids,
+                locale,
+                skip,
+                limit: newLimit,
+                responseItems,
+            });
+        }
+        return error;
+    }
+};
+
+const fetchReferencedEntities = async ({ client, experienceEntry, locale, }) => {
+    if (!client) {
+        throw new Error('Failed to fetch experience entities. Required "client" parameter was not provided');
+    }
+    if (!locale) {
+        throw new Error('Failed to fetch experience entities. Required "locale" parameter was not provided');
+    }
+    if (!isExperienceEntry(experienceEntry)) {
+        throw new Error('Failed to fetch experience entities. Provided "experienceEntry" does not match experience entry schema');
+    }
+    const deepReferences = gatherDeepReferencesFromExperienceEntry(experienceEntry);
+    const entryIds = [];
+    const assetIds = [];
+    for (const dataBinding of Object.values(experienceEntry.fields.dataSource)) {
+        if (!('sys' in dataBinding)) {
+            continue;
+        }
+        if (dataBinding.sys.linkType === 'Entry') {
+            entryIds.push(dataBinding.sys.id);
+        }
+        if (dataBinding.sys.linkType === 'Asset') {
+            assetIds.push(dataBinding.sys.id);
+        }
+    }
+    const [entriesResponse, assetsResponse] = (await Promise.all([
+        fetchAllEntities({ client, entityType: 'Entry', ids: entryIds, locale }),
+        fetchAllEntities({ client, entityType: 'Asset', ids: assetIds, locale }),
+    ]));
+    const { autoFetchedReferentAssets, autoFetchedReferentEntries } = gatherAutoFetchedReferentsFromIncludes(deepReferences, entriesResponse);
+    // Using client getEntries resolves all linked entry references, so we do not need to resolve entries in usedComponents
+    const allResolvedEntries = [
+        ...(entriesResponse?.items ?? []),
+        ...(experienceEntry.fields.usedComponents || []),
+        ...autoFetchedReferentEntries,
+    ];
+    const allResolvedAssets = [
+        ...(assetsResponse.items ?? []),
+        ...autoFetchedReferentAssets,
+    ];
+    return {
+        entries: allResolvedEntries,
+        assets: allResolvedAssets,
+    };
+};
+
+const errorMessagesWhileFetching$1 = {
+    experience: 'Failed to fetch experience',
+    experienceReferences: 'Failed to fetch entities, referenced in experience',
+};
+const handleError$1 = (generalMessage, error) => {
+    const message = error instanceof Error ? error.message : `Unknown error: ${error}`;
+    throw Error(message);
+};
+/**
+ * Fetch experience entry using slug as the identifier
+ * @param {string} experienceTypeId - id of the content type associated with the experience
+ * @param {string} slug - slug of the experience (defined in entry settings)
+ * @param {string} localeCode - locale code to fetch the experience. Falls back to the currently active locale in the state
+ */
+//  Promise<Experience<EntityStore> | undefined> =>
+async function fetchBySlug({ client, experienceTypeId, slug, localeCode, }) {
+    let experienceEntry = undefined;
+    try {
+        experienceEntry = await fetchExperienceEntry({
+            client,
+            experienceTypeId,
+            locale: localeCode,
+            identifier: {
+                slug,
+            },
+        });
+        if (!experienceEntry) {
+            throw new Error(`No experience entry with slug: ${slug} exists`);
+        }
+        try {
+            const { entries, assets } = await fetchReferencedEntities({
+                client,
+                experienceEntry,
+                locale: localeCode,
+            });
+            const experience = createExperience({
+                experienceEntry,
+                referencedAssets: assets,
+                referencedEntries: entries,
+                locale: localeCode,
+            });
+            return experience;
+        }
+        catch (error) {
+            handleError$1(errorMessagesWhileFetching$1.experienceReferences, error);
+        }
+    }
+    catch (error) {
+        handleError$1(errorMessagesWhileFetching$1.experience, error);
+    }
+}
+
+const errorMessagesWhileFetching = {
+    experience: 'Failed to fetch experience',
+    experienceReferences: 'Failed to fetch entities, referenced in experience',
+};
+const handleError = (generalMessage, error) => {
+    const message = error instanceof Error ? error.message : `Unknown error: ${error}`;
+    throw Error(message);
+};
+/**
+ * Fetch experience entry using slug as the identifier
+ * @param {string} experienceTypeId - id of the content type associated with the experience
+ * @param {string} slug - slug of the experience (defined in entry settings)
+ * @param {string} localeCode - locale code to fetch the experience. Falls back to the currently active locale in the state
+ */
+async function fetchById({ client, experienceTypeId, id, localeCode, }) {
+    let experienceEntry = undefined;
+    try {
+        experienceEntry = await fetchExperienceEntry({
+            client,
+            experienceTypeId,
+            locale: localeCode,
+            identifier: {
+                id,
+            },
+        });
+        if (!experienceEntry) {
+            throw new Error(`No experience entry with id: ${id} exists`);
+        }
+        try {
+            const { entries, assets } = await fetchReferencedEntities({
+                client,
+                experienceEntry,
+                locale: localeCode,
+            });
+            const experience = createExperience({
+                experienceEntry,
+                referencedAssets: assets,
+                referencedEntries: entries,
+                locale: localeCode,
+            });
+            return experience;
+        }
+        catch (error) {
+            handleError(errorMessagesWhileFetching.experienceReferences, error);
+        }
+    }
+    catch (error) {
+        handleError(errorMessagesWhileFetching.experience, error);
+    }
+}
+
+export { DeepReference, EditorModeEntityStore, EntityStore, EntityStoreBase, MEDIA_QUERY_REGEXP, VisualEditorMode, buildCfStyles, buildStyleTag, builtInStyles, calculateNodeDefaultHeight, checkIsAssembly, checkIsAssemblyDefinition, checkIsAssemblyEntry, checkIsAssemblyNode, columnsBuiltInStyles, columnsDefinition, containerBuiltInStyles, containerDefinition, createExperience, defineDesignTokens, designTokensRegistry, doesMismatchMessageSchema, fetchById, fetchBySlug, findOutermostCoordinates, gatherDeepReferencesFromExperienceEntry, gatherDeepReferencesFromTree, generateRandomId, getActiveBreakpointIndex, getDataFromTree, getDesignTokenRegistration, getElementCoordinates, getFallbackBreakpointIndex, getInsertionData, getValueForBreakpoint, isContentfulStructureComponent, isDeepPath, isEmptyStructureWithRelativeHeight, isExperienceEntry, isLink, isLinkToAsset, mediaQueryMatcher, optionalBuiltInStyles, parseDataSourcePathIntoFieldset, parseDataSourcePathWithL1DeepBindings, sectionBuiltInStyles, sectionDefinition, sendMessage, singleColumnBuiltInStyles, singleColumnDefinition, supportedModes, transformBoundContentValue, tryParseMessage, validateExperienceBuilderConfig };
+//# sourceMappingURL=index.js.map