@contentful/experiences-visual-editor-react 0.0.1-alpha.6 → 0.0.1-alpha.8

package/dist/index.js

@@ -11,8 +11,8 @@ import { produce } from 'immer';
 import { createPortal } from 'react-dom';
 import { v4 } from 'uuid';
 
-var css_248z$7 = "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$7);
+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',
@@ -70,11 +70,13 @@ const CONTENTFUL_COMPONENTS$1 = {
     },
 };
 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,
@@ -225,24 +227,18 @@ const transformAlignment = (cfHorizontalAlignment, cfVerticalAlignment, cfFlexDi
             ? `safe ${cfHorizontalAlignment}`
             : cfHorizontalAlignment,
     };
-const transformBackgroundImage = (cfBackgroundImageUrl, cfBackgroundImageScaling, cfBackgroundImageAlignment) => {
-    const matchBackgroundSize = (backgroundImageScaling) => {
-        if ('fill' === backgroundImageScaling)
+const transformBackgroundImage = (cfBackgroundImageUrl, cfBackgroundImageOptions) => {
+    const matchBackgroundSize = (scaling) => {
+        if ('fill' === scaling)
             return 'cover';
-        if ('fit' === backgroundImageScaling)
+        if ('fit' === scaling)
             return 'contain';
-        return undefined;
     };
-    const matchBackgroundPosition = (cfBackgroundImageAlignment) => {
-        if (!cfBackgroundImageAlignment) {
-            return undefined;
-        }
-        if ('string' !== typeof cfBackgroundImageAlignment) {
-            return undefined;
+    const matchBackgroundPosition = (alignment) => {
+        if (!alignment || 'string' !== typeof alignment) {
+            return;
         }
-        let [horizontalAlignment, verticalAlignment] = cfBackgroundImageAlignment
-            .trim()
-            .split(/\s+/, 2);
+        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) {
@@ -278,50 +274,29 @@ const transformBackgroundImage = (cfBackgroundImageUrl, cfBackgroundImageScaling
         return `${horizontalAlignment} ${verticalAlignment}`;
     };
     if (!cfBackgroundImageUrl) {
-        return undefined;
-    }
-    return {
-        backgroundImage: `url(${cfBackgroundImageUrl})`,
-        backgroundRepeat: cfBackgroundImageScaling === 'tile' ? 'repeat' : 'no-repeat',
-        backgroundPosition: matchBackgroundPosition(cfBackgroundImageAlignment),
-        backgroundSize: matchBackgroundSize(cfBackgroundImageScaling),
-    };
-};
-const transformContentValue = (value, variableDefinition) => {
-    if (variableDefinition.type === 'RichText') {
-        return transformRichText(value);
+        return;
     }
-    return value;
-};
-const transformRichText = (value) => {
-    if (typeof value === 'string') {
-        return {
-            data: {},
-            content: [
-                {
-                    nodeType: BLOCKS.PARAGRAPH,
-                    data: {},
-                    content: [
-                        {
-                            data: {},
-                            nodeType: 'text',
-                            value: value,
-                            marks: [],
-                        },
-                    ],
-                },
-            ],
-            nodeType: BLOCKS.DOCUMENT,
-        };
+    let backgroundImage;
+    let backgroundImageSet;
+    if (typeof cfBackgroundImageUrl === 'string') {
+        backgroundImage = `url(${cfBackgroundImageUrl})`;
     }
-    if (typeof value === 'object' && value.nodeType === BLOCKS.DOCUMENT) {
-        return value;
+    else {
+        const imgSet = cfBackgroundImageUrl.srcSet?.join(',');
+        backgroundImage = `url(${cfBackgroundImageUrl.url})`;
+        backgroundImageSet = `image-set(${imgSet})`;
     }
-    return undefined;
+    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 undefined;
+        return;
     const transformedValue = transformFill(value);
     const marginValues = cfMargin.split(' ');
     const rightMargin = marginValues[1] || '0px';
@@ -339,7 +314,12 @@ const transformWidthSizing = ({ value, cfMargin, }) => {
     return transformedValue;
 };
 
-const toCSSAttribute = (key) => key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
+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)
@@ -349,13 +329,13 @@ const buildStyleTag = ({ styles, nodeId }) => {
     const styleRule = `.${className}{ ${stylesStr} }`;
     return [className, styleRule];
 };
-const buildCfStyles = ({ cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection, cfFlexWrap, cfMargin, cfPadding, cfBackgroundColor, cfWidth, cfHeight, cfMaxWidth, cfBorder, cfGap, cfBackgroundImageUrl, cfBackgroundImageAlignment, cfBackgroundImageScaling, cfFontSize, cfFontWeight, cfLineHeight, cfLetterSpacing, cfTextColor, cfTextAlign, cfTextTransform, cfTextBold, cfTextItalic, cfTextUnderline, cfColumnSpan, }) => {
+const buildCfStyles = ({ cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection, cfFlexWrap, cfMargin, cfPadding, cfBackgroundColor, cfWidth, cfHeight, cfMaxWidth, cfBorder, 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, cfMargin }),
-        height: transformFill(cfHeight),
+        width: transformWidthSizing({ value: cfWidth || cfImageOptions?.width, cfMargin }),
+        height: transformFill(cfHeight || cfImageOptions?.height),
         maxWidth: cfMaxWidth,
         ...transformGridColumn(cfColumnSpan),
         ...transformBorderStyle(cfBorder),
@@ -363,7 +343,7 @@ const buildCfStyles = ({ cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirec
         ...transformAlignment(cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection),
         flexDirection: cfFlexDirection,
         flexWrap: cfFlexWrap,
-        ...transformBackgroundImage(cfBackgroundImageUrl, cfBackgroundImageScaling, cfBackgroundImageAlignment),
+        ...transformBackgroundImage(cfBackgroundImageUrl, cfBackgroundImageOptions),
         fontSize: cfFontSize,
         fontWeight: cfTextBold ? 'bold' : cfFontWeight,
         fontStyle: cfTextItalic ? 'italic' : 'normal',
@@ -374,10 +354,12 @@ const buildCfStyles = ({ cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirec
         textTransform: cfTextTransform,
         textDecoration: cfTextUnderline ? 'underline' : 'none',
         boxSizing: 'border-box',
+        objectFit: cfImageOptions?.objectFit,
+        objectPosition: cfImageOptions?.objectPosition,
     };
 };
 /**
- * Container/section default behaviour:
+ * Container/section default behavior:
  * Default height => height: EMPTY_CONTAINER_HEIGHT (120px)
  * If a container component has children => height: 'fit-content'
  */
@@ -391,6 +373,206 @@ const calculateNodeDefaultHeight = ({ blockId, children, value, }) => {
     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) {
+    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 = {};
@@ -529,42 +711,6 @@ const builtInStyles = {
         description: 'The spacing between the elements of the section',
         defaultValue: '0px',
     },
-    cfBackgroundImageUrl: {
-        displayName: 'Background image',
-        type: 'Text',
-        defaultValue: '',
-        description: 'Background image for section or container',
-    },
-    cfBackgroundImageScaling: {
-        displayName: 'Image scaling',
-        type: 'Text',
-        group: 'style',
-        description: 'Adjust background image to fit, fill or tile the container',
-        defaultValue: 'fit',
-        validations: {
-            in: [
-                {
-                    value: 'fill',
-                    displayName: 'Fill',
-                },
-                {
-                    value: 'fit',
-                    displayName: 'Fit',
-                },
-                {
-                    value: 'tile',
-                    displayName: 'Tile',
-                },
-            ],
-        },
-    },
-    cfBackgroundImageAlignment: {
-        displayName: 'Image alignment',
-        type: 'Text',
-        group: 'style',
-        description: 'Align background image to the edges of the container',
-        defaultValue: 'left top',
-    },
     cfHyperlink: {
         displayName: 'Hyperlink',
         type: 'Text',
@@ -612,6 +758,40 @@ const optionalBuiltInStyles = {
         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',
@@ -994,29 +1174,9 @@ const sendMessage = (eventType, data) => {
     }, '*');
 };
 
-// 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;
-    }
-}
-
-function transformAssetFileToUrl(fieldValue) {
-    return fieldValue && typeof fieldValue == 'object' && fieldValue.url
-        ? fieldValue.url
-        : fieldValue;
-}
-
 /**
  * Base Store for entities
- * Can be extened for the different loading behaviours (editor, production, ..)
+ * Can be extended for the different loading behaviours (editor, production, ..)
  */
 class EntityStoreBase {
     constructor({ entities, locale }) {
@@ -1033,68 +1193,26 @@ class EntityStoreBase {
     updateEntity(entity) {
         this.addEntity(entity);
     }
-    getValueDeep(headLinkOrEntity, deepPath) {
-        const resolveFieldset = (unresolvedFieldset, headEntity) => {
-            const resolvedFieldset = [];
-            let entityToResolveFieldsFrom = headEntity;
-            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) {
-                        throw new Error(`Logic Error: Broken Precondition [by the time resolution of deep path happens all referents should be in EntityStore]: Cannot resolve field ${field} of a fieldset row [${JSON.stringify(row)}] as linked entity not found in the EntityStore. ${JSON.stringify({
-                            link: fieldValue,
-                        })}`);
-                    }
-                    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.`);
-                }
+    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;
             }
-            return {
-                resolvedFieldset,
-                isFullyResolved: true,
-            };
-        };
-        const headEntity = isLink(headLinkOrEntity)
-            ? this.getEntityFromLink(headLinkOrEntity)
-            : headLinkOrEntity;
-        if (undefined === headEntity) {
-            return;
+            entity = resolvedEntity;
         }
-        const unresolvedFieldset = parseDataSourcePathIntoFieldset(deepPath);
-        // 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(`[experiences-sdk-react::EntityStoreBased::getValueDeep()] Deep path wasn't resolved till leaf node, falling back to undefined, because: ${reason}`);
-            return undefined;
+        else {
+            // We already have the complete entity in preview & delivery (resolved by the CMA client)
+            entity = linkOrEntryOrAsset;
         }
-        const [leafEntity, field /* localeQualifier */] = resolvedFieldset[resolvedFieldset.length - 1];
-        const fieldValue = get(leafEntity, ['fields', field]); // is allowed to be undefined (when non-required field not set; or even when field does NOT exist on the type)
-        return transformAssetFileToUrl(fieldValue);
+        return entity;
     }
     /**
      * @deprecated in the base class this should be simply an abstract method
@@ -1151,7 +1269,7 @@ class EntityStoreBase {
         if (missing.length) {
             // TODO: move to `debug` utils once it is extracted
             console.warn(`Asset "${id}" is not in the store`);
-            return undefined;
+            return;
         }
         return resolved[0];
     }
@@ -1167,7 +1285,7 @@ class EntityStoreBase {
         if (missing.length) {
             // TODO: move to `debug` utils once it is extracted
             console.warn(`Entry "${id}" is not in the store`);
-            return undefined;
+            return;
         }
         return resolved[0];
     }
@@ -1178,6 +1296,70 @@ class EntityStoreBase {
         }
         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';
     }
@@ -1356,11 +1538,16 @@ class EditorModeEntityStore extends EditorEntityStore {
         const { missing: missingAssetIds } = this.getEntitiesFromMap('Asset', uniqueAssetIds);
         return { missingEntryIds, missingAssetIds };
     }
-    getValue(entityLink, path) {
-        if (!entityLink || !entityLink.sys)
+    getValue(entityLinkOrEntity, path) {
+        const entity = this.getEntryOrAsset(entityLinkOrEntity, path.join('/'));
+        if (!entity) {
             return;
-        const fieldValue = super.getValue(entityLink, path);
-        return transformAssetFileToUrl(fieldValue);
+        }
+        const fieldValue = get(entity, path);
+        // walk around to render asset files
+        return fieldValue && typeof fieldValue == 'object' && fieldValue.url
+            ? fieldValue.url
+            : fieldValue;
     }
 }
 
@@ -1442,9 +1629,9 @@ function gatherDeepReferencesFromTree(startingNode, dataSource) {
     return deepReferences;
 }
 
-var css_248z$6 = ".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 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$6);
+styleInject(css_248z$7);
 
 const SCROLL_STATES = {
     Start: 'scrollStart',
@@ -1547,13 +1734,14 @@ const CF_STYLE_ATTRIBUTES = [
     'cfWidth',
     'cfMaxWidth',
     'cfHeight',
+    'cfImageAsset',
+    'cfImageOptions',
+    'cfBackgroundImageUrl',
+    'cfBackgroundImageOptions',
     'cfFlexDirection',
     'cfFlexWrap',
     'cfBorder',
     'cfGap',
-    'cfBackgroundImageUrl',
-    'cfBackgroundImageScaling',
-    'cfBackgroundImageAlignment',
     'cfFontSize',
     'cfFontWeight',
     'cfLineHeight',
@@ -1568,6 +1756,8 @@ const CF_STYLE_ATTRIBUTES = [
     // 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',
 ];
@@ -1703,7 +1893,7 @@ 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: 80,
+    WIDTH: 70,
     HEIGHT: 20,
     INITIAL_OFFSET: 10,
     OFFSET_INCREMENT: 8,
@@ -2120,10 +2310,12 @@ const useEntityStore = create((set) => ({
     },
     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: new EditorModeEntityStore({ locale, entities }),
+            entityStore: newEntityStore,
             areEntitiesFetched: false,
         });
+        return newEntityStore;
     },
 }));
 
@@ -2159,48 +2351,25 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
                 };
             }
             else if (variableMapping.type === 'BoundValue') {
-                if (!areEntitiesFetched) {
-                    console.debug(`[experiences-sdk-react::useComponentProps] Idle-cycle: as entities are not fetched(areEntitiesFetched=${areEntitiesFetched}), we cannot resolve bound values for ${variableName} so we just resolve them to default values.`);
-                    // Just forcing default value (if we're in idle-cycle, entities are missing)
-                    return {
-                        ...acc,
-                        [variableName]: transformContentValue(variableDefinition.defaultValue, variableDefinition),
-                    };
-                }
-                if (isDeepPath(variableMapping.path)) {
-                    const [, uuid] = variableMapping.path.split('/');
-                    const link = dataSource[uuid];
-                    const boundValue = entityStore?.getValueDeep(link, variableMapping.path);
-                    const value = boundValue || variableDefinition.defaultValue;
-                    return {
-                        ...acc,
-                        [variableName]: transformContentValue(value, variableDefinition),
-                    };
-                }
-                // // take value from the datasource for both bound and unbound value types
-                const [, uuid, ...path] = variableMapping.path.split('/');
+                const [, uuid, path] = variableMapping.path.split('/');
                 const binding = dataSource[uuid];
-                let boundValue = areEntitiesFetched
-                    ? entityStore.getValue(binding, path.slice(0, -1))
-                    : undefined;
+                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.slice(0, -2))
+                        ? entityStore.getValue(binding, path.split('/').slice(0, -2))
                         : undefined;
                     if (isLinkToAsset(maybeBoundAsset)) {
                         boundValue = maybeBoundAsset;
                     }
                 }
-                if (typeof boundValue === 'object' && boundValue.sys?.linkType === 'Asset') {
-                    boundValue = entityStore?.getValue(boundValue, ['fields', 'file']);
-                }
                 const value = boundValue || variableDefinition.defaultValue;
                 return {
                     ...acc,
-                    [variableName]: transformContentValue(value, variableDefinition),
+                    [variableName]: value,
                 };
             }
             else {
@@ -2273,12 +2442,15 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
         '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, CF_STYLE_ATTRIBUTES, ['cfHyperlink', 'cfOpenInNewTab']),
+        ...omit(props, stylesToRemove, ['cfHyperlink', 'cfOpenInNewTab']),
         ...(definition.children ? { children: renderDropzone(node) } : {}),
     };
     return { componentProps, wrapperProps };
@@ -2300,13 +2472,16 @@ var PostMessageMethods;
     PostMessageMethods["REQUESTED_ENTITIES"] = "REQUESTED_ENTITIES";
 })(PostMessageMethods || (PostMessageMethods = {}));
 
-var css_248z$4 = ".cf-heading {\n  white-space: pre-line;\n}\n";
+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-richtext {\n  white-space: pre-line;\n}\n";
+var css_248z$3 = ".cf-text {\n  white-space: pre-line;\n}\n";
 styleInject(css_248z$3);
 
-var css_248z$2$1 = ".cf-text {\n  white-space: pre-line;\n}\n";
+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";
@@ -2334,8 +2509,8 @@ const Flex = forwardRef(({ id, children, onMouseEnter, onMouseUp, onMouseLeave,
 });
 Flex.displayName = 'Flex';
 
-var css_248z$5 = ".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$5);
+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: {
@@ -2558,7 +2733,7 @@ const DraggableChildComponent = (props) => {
     })));
 };
 
-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";
+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);
 
@@ -3102,11 +3277,11 @@ const EditorBlock = ({ node: rawNode, resolveDesignValue, renderDropzone, draggi
     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 && userIsDragging && (React.createElement(Hitboxes, { parentZoneId: zoneId, zoneId: componentId, enableRootHitboxes: enableRootHitboxes }))));
+            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 && userIsDragging && (React.createElement(Hitboxes, { parentZoneId: zoneId, zoneId: componentId, enableRootHitboxes: enableRootHitboxes }))));
+        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";
@@ -3633,6 +3808,7 @@ function useEditorSubscriber() {
     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);
@@ -3654,7 +3830,7 @@ function useEditorSubscriber() {
      * Fills up entityStore with entities from newDataSource and from the tree.
      * Also manages "entity status" variables (areEntitiesFetched, isFetchingEntities)
      */
-    const fetchMissingEntities = useCallback(async (newDataSource, tree) => {
+    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 = () => {
@@ -3725,10 +3901,7 @@ function useEditorSubscriber() {
         finally {
             endFetching();
         }
-    }, [
-        /* dataSource, */ entityStore,
-        setEntitiesFetched /* setFetchingEntities, assembliesRegistry */,
-    ]);
+    }, [setEntitiesFetched /* setFetchingEntities, assembliesRegistry */]);
     useEffect(() => {
         const onMessage = async (event) => {
             let reason;
@@ -3758,6 +3931,11 @@ function useEditorSubscriber() {
                         // 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) {
                         /**
@@ -3770,7 +3948,7 @@ function useEditorSubscriber() {
                         if (changedValueType === 'BoundValue') {
                             const newDataSource = { ...dataSource, ...changedNode.data.dataSource };
                             setDataSource(newDataSource);
-                            await fetchMissingEntities(newDataSource, tree);
+                            await fetchMissingEntities(newEntityStore, newDataSource, tree);
                         }
                         else if (changedValueType === 'UnboundValue') {
                             setUnboundValues({
@@ -3778,19 +3956,15 @@ function useEditorSubscriber() {
                                 ...changedNode.data.unboundValues,
                             });
                         }
-                        // Update the tree when all necessary data is fetched and ready for rendering.
-                        updateTree(tree);
-                        setLocale(locale);
                     }
                     else {
                         const { dataSource, unboundValues } = getDataFromTree(tree);
                         setDataSource(dataSource);
                         setUnboundValues(unboundValues);
-                        await fetchMissingEntities(dataSource, tree);
-                        // Update the tree when all necessary data is fetched and ready for rendering.
-                        updateTree(tree);
-                        setLocale(locale);
+                        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: {
@@ -3924,6 +4098,7 @@ function useEditorSubscriber() {
         updateTree,
         updateNodesByUpdatedEntity,
         setMousePosition,
+        resetEntityStore,
     ]);
     /*
      * Handles on scroll business
@@ -4304,20 +4479,8 @@ const useInitializeEditor = () => {
 
 const VisualEditorRoot = () => {
     const initialized = useInitializeEditor();
-    const locale = useEditorStore((state) => state.locale);
     const setMousePosition = useDraggedItemStore((state) => state.setMousePosition);
-    const entityStore = useEntityStore((state) => state.entityStore);
     const setHoveringZone = useZoneStore((state) => state.setHoveringZone);
-    const resetEntityStore = useEntityStore((state) => state.resetEntityStore);
-    useEffect(() => {
-        if (!locale) {
-            return;
-        }
-        if (entityStore.locale === locale) {
-            return;
-        }
-        resetEntityStore(locale);
-    }, [locale, resetEntityStore, entityStore.locale]);
     useEffect(() => {
         const onMouseMove = (e) => {
             setMousePosition(e.clientX, e.clientY);