@contentful/experiences-visual-editor-react 1.42.4-prerelease-20250702T1207-37b3bfc.0 → 2.0.0-beta.0

package/dist/index.js

@@ -1,10 +1,10 @@
 import styleInject from 'style-inject';
 import React, { useEffect, useRef, useState, useCallback, forwardRef, useLayoutEffect, useMemo } from 'react';
 import { z } from 'zod';
-import { omit, isArray, isEqual, get as get$1 } from 'lodash-es';
+import { omit, isArray, isEqual, get as get$2 } from 'lodash-es';
 import md5 from 'md5';
 import { BLOCKS } from '@contentful/rich-text-types';
-import { create } from 'zustand';
+import { create, useStore } from 'zustand';
 import { Droppable, Draggable, DragDropContext } from '@hello-pangea/dnd';
 import { produce } from 'immer';
 import '@contentful/rich-text-react-renderer';
@@ -126,14 +126,6 @@ const CF_STYLE_ATTRIBUTES = [
     'cfTextBold',
     'cfTextItalic',
     'cfTextUnderline',
-    // For backwards compatibility
-    // we need to keep those in this constant array
-    // so that omit() in <VisualEditorBlock> and <CompositionBlock>
-    // can filter them out and not pass as props
-    'cfBackgroundImageScaling',
-    'cfBackgroundImageAlignment',
-    'cfBackgroundImageAlignmentVertical',
-    'cfBackgroundImageAlignmentHorizontal',
 ];
 const EMPTY_CONTAINER_HEIGHT$1 = '80px';
 const DEFAULT_IMAGE_WIDTH = '500px';
@@ -836,7 +828,13 @@ const ParameterDefinitionSchema$1 = z.object({
         }),
     })
         .optional(),
-    contentTypes: z.array(z.string()),
+    contentTypes: z.record(z.string(), z.object({
+        sys: z.object({
+            type: z.literal('Link'),
+            id: z.string(),
+            linkType: z.enum(['ContentType']),
+        }),
+    })),
     passToNodes: z.array(PassToNodeSchema$1).optional(),
 });
 const ParameterDefinitionsSchema$1 = z.record(propertyKeySchema$1, ParameterDefinitionSchema$1);
@@ -856,7 +854,7 @@ const ComponentSettingsSchema$1 = z
     variableDefinitions: ComponentVariablesSchema$1,
     thumbnailId: z.enum(THUMBNAIL_IDS$1).optional(),
     category: z.string().max(50, 'Category must contain at most 50 characters').optional(),
-    prebindingDefinitions: z.array(PrebindingDefinitionSchema$1).length(1).optional(),
+    prebindingDefinitions: z.array(PrebindingDefinitionSchema$1).max(1).optional(),
 })
     .strict();
 z.object({
@@ -1099,6 +1097,24 @@ propertyName, resolveDesignTokens = true) => {
         return valuesByBreakpoint;
     }
 };
+/** Overwrites the default value breakpoint by breakpoint. If a breakpoint
+ * is not overwritten, it will fall back to the default. */
+function mergeDesignValuesByBreakpoint(defaultValue, overwriteValue) {
+    if (!defaultValue || !overwriteValue) {
+        return defaultValue ?? overwriteValue;
+    }
+    const mergedValuesByBreakpoint = { ...defaultValue.valuesByBreakpoint };
+    for (const [breakpointId, value] of Object.entries(overwriteValue.valuesByBreakpoint)) {
+        if (!isValidBreakpointValue(value)) {
+            continue;
+        }
+        mergedValuesByBreakpoint[breakpointId] = value;
+    }
+    return {
+        type: 'DesignValue',
+        valuesByBreakpoint: mergedValuesByBreakpoint,
+    };
+}
 
 const CF_DEBUG_KEY$1 = 'cf_debug';
 /**
@@ -1220,11 +1236,19 @@ const getElementCoordinates = (element) => {
     });
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const isLinkToAsset = (variable) => {
-    if (!variable)
+    if (variable === null || typeof variable !== 'object')
+        return false;
+    // The `'prop' in` pattern is informing TypeScript of the object shape, no need to cast `as`.
+    if (!('sys' in variable))
+        return false;
+    if (variable.sys === null || typeof variable.sys !== 'object')
+        return false;
+    if (!('linkType' in variable.sys))
         return false;
-    if (typeof variable !== 'object')
+    if (!('id' in variable.sys))
+        return false;
+    if (!('type' in variable.sys))
         return false;
     return (variable.sys?.linkType === 'Asset' &&
         typeof variable.sys?.id === 'string' &&
@@ -1232,20 +1256,20 @@ const isLinkToAsset = (variable) => {
         variable.sys?.type === 'Link');
 };
 
-const isLink = (maybeLink) => {
+const isLink$1 = (maybeLink) => {
     if (maybeLink === null)
         return false;
     if (typeof maybeLink !== 'object')
         return false;
     const link = maybeLink;
-    return Boolean(link.sys?.id) && link.sys?.type === 'Link';
+    return Boolean(link.sys?.id) && link.sys?.type === 'Link' && Boolean(link.sys?.linkType);
 };
 
 /**
  * This module encapsulates format of the path to a deep reference.
  */
-const parseDataSourcePathIntoFieldset = (path) => {
-    const parsedPath = parseDeepPath(path);
+const parseDataSourcePathIntoFieldset$1 = (path) => {
+    const parsedPath = parseDeepPath$1(path);
     if (null === parsedPath) {
         throw new Error(`Cannot parse path '${path}' as deep path`);
     }
@@ -1258,7 +1282,7 @@ const parseDataSourcePathIntoFieldset = (path) => {
  * @returns
  */
 const parseDataSourcePathWithL1DeepBindings = (path) => {
-    const parsedPath = parseDeepPath(path);
+    const parsedPath = parseDeepPath$1(path);
     if (null === parsedPath) {
         throw new Error(`Cannot parse path '${path}' as deep path`);
     }
@@ -1275,14 +1299,14 @@ const parseDataSourcePathWithL1DeepBindings = (path) => {
  *  - /6J8eA60yXwdm5eyUh9fX6/fields/mainStory/~locale
  * @returns
  */
-const isDeepPath = (deepPathCandidate) => {
-    const deepPathParsed = parseDeepPath(deepPathCandidate);
+const isDeepPath$1 = (deepPathCandidate) => {
+    const deepPathParsed = parseDeepPath$1(deepPathCandidate);
     if (!deepPathParsed) {
         return false;
     }
     return deepPathParsed.fields.length > 1;
 };
-const parseDeepPath = (deepPathCandidate) => {
+const parseDeepPath$1 = (deepPathCandidate) => {
     // ALGORITHM:
     // We start with deep path in form:
     // /uuid123/fields/mainStory/~locale/fields/cover/~locale/fields/title/~locale
@@ -1308,7 +1332,7 @@ const parseDeepPath = (deepPathCandidate) => {
         return /^fields\/[^/^~]+\/~locale$/.test(fieldChunk.join('/'));
     };
     const deepPathSegments = deepPathCandidate.split('/');
-    const chunks = chunkSegments(deepPathSegments, { startNextChunkOnElementEqualTo: 'fields' });
+    const chunks = chunkSegments$1(deepPathSegments, { startNextChunkOnElementEqualTo: 'fields' });
     if (chunks.length <= 1) {
         return null; // malformed path, even regular paths have at least 2 chunks
     }
@@ -1328,7 +1352,7 @@ const parseDeepPath = (deepPathCandidate) => {
         fields: fieldChunks.map((fieldChunk) => fieldChunk[1]), // pick  only fieldName eg. from  ['fields','mainStory', '~locale'] we pick `mainStory`
     };
 };
-const chunkSegments = (segments, { startNextChunkOnElementEqualTo }) => {
+const chunkSegments$1 = (segments, { startNextChunkOnElementEqualTo }) => {
     const chunks = [];
     let currentChunk = [];
     const isSegmentBeginningOfChunk = (segment) => segment === startNextChunkOnElementEqualTo;
@@ -1429,11 +1453,6 @@ const transformVisibility = (value) => {
     // Don't explicitly set anything when visible to not overwrite values like `grid` or `flex`.
     return {};
 };
-// TODO: Remove in next major version v2 since the change is 17 months old
-// Keep this for backwards compatibility - deleting this would be a breaking change
-// because existing components on a users experience will have the width value as fill
-// rather than 100%
-const transformFill = (value) => (value === 'fill' ? '100%' : value);
 const transformGridColumn = (span) => {
     if (!span) {
         return {};
@@ -1478,34 +1497,6 @@ const transformBackgroundImage = (cfBackgroundImageUrl, cfBackgroundImageOptions
             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';
@@ -1590,8 +1581,8 @@ const buildCfStyles = (values) => {
         margin: values.cfMargin,
         padding: values.cfPadding,
         backgroundColor: values.cfBackgroundColor,
-        width: transformFill(values.cfWidth || values.cfImageOptions?.width),
-        height: transformFill(values.cfHeight || values.cfImageOptions?.height),
+        width: values.cfWidth || values.cfImageOptions?.width,
+        height: values.cfHeight || values.cfImageOptions?.height,
         maxWidth: values.cfMaxWidth,
         ...transformGridColumn(values.cfColumnSpan),
         ...transformBorderStyle(values.cfBorder),
@@ -1697,13 +1688,13 @@ const getOptimizedBackgroundImageAsset = (file, widthStyle, quality = '100%', fo
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function get(obj, path) {
+function get$1(obj, path) {
     if (!path.length) {
         return obj;
     }
     try {
         const [currentPath, ...nextPath] = path;
-        return get(obj[currentPath], nextPath);
+        return get$1(obj[currentPath], nextPath);
     }
     catch (err) {
         return undefined;
@@ -1711,7 +1702,7 @@ function get(obj, path) {
 }
 
 const getBoundValue = (entryOrAsset, path) => {
-    const value = get(entryOrAsset, path.split('/').slice(2, -1));
+    const value = get$1(entryOrAsset, path.split('/').slice(2, -1));
     return value && typeof value == 'object' && value.url
         ? value.url
         : value;
@@ -1741,7 +1732,9 @@ const transformRichText = (entryOrAsset, entityStore, path) => {
     }
     if (typeof value === 'object' && value.nodeType === BLOCKS.DOCUMENT) {
         // resolve any links to assets/entries/hyperlinks
-        const richTextDocument = value;
+        // we need to clone, as we want to keep the original Entity in the EntityStore intact,
+        // and resolveLinks() is mutating the node object.
+        const richTextDocument = structuredClone(value);
         resolveLinks(richTextDocument, entityStore);
         return richTextDocument;
     }
@@ -1796,7 +1789,7 @@ const transformMedia = (asset, variables, resolveDesignValue, variableName, path
     let value;
     // If it is not a deep path and not pointing to the file of the asset,
     // it is just pointing to a normal field and therefore we just resolve the value as normal field
-    if (!isDeepPath(path) && !lastPathNamedSegmentEq(path, 'file')) {
+    if (!isDeepPath$1(path) && !lastPathNamedSegmentEq(path, 'file')) {
         return getBoundValue(asset, path);
     }
     //TODO: this will be better served by injectable type transformers instead of if statement
@@ -1854,104 +1847,97 @@ const transformMedia = (asset, variables, resolveDesignValue, variableName, path
     }
     return asset.fields.file?.url;
 };
-
-const isAsset = (value) => {
+const isEntry$1 = (value) => {
     return (null !== value &&
         typeof value === 'object' &&
         'sys' in value &&
-        value.sys?.type === 'Asset');
+        value.sys?.type === 'Entry');
 };
-const isEntry = (value) => {
+const isAsset$1 = (value) => {
     return (null !== value &&
         typeof value === 'object' &&
         'sys' in value &&
-        value.sys?.type === 'Entry');
+        value.sys?.type === 'Asset');
 };
 
 function getResolvedEntryFromLink(entryOrAsset, path, entityStore) {
-    if (isAsset(entryOrAsset)) {
+    if (isAsset$1(entryOrAsset)) {
         return entryOrAsset;
     }
-    else if (!isEntry(entryOrAsset)) {
+    else if (!isEntry$1(entryOrAsset)) {
         throw new Error(`Expected an Entry or Asset, but got: ${JSON.stringify(entryOrAsset)}`);
     }
-    const value = get(entryOrAsset, path.split('/').slice(2, -1));
+    const fieldName = path.split('/').slice(2, -1);
+    const value = get$1(entryOrAsset, fieldName);
     let resolvedEntity;
-    if (isAsset(value) || isEntry(value)) {
+    if (isAsset$1(value) || isEntry$1(value)) {
         // In some cases, reference fields are already resolved
         resolvedEntity = value;
     }
     else if (value?.sys.type === 'Link') {
         // Look up the reference in the entity store
         resolvedEntity = entityStore.getEntityFromLink(value);
-        if (!resolvedEntity) {
-            return;
-        }
     }
     else {
-        console.warn(`Expected a link to a reference, but got: ${JSON.stringify(value)}`);
+        console.warn(`When attempting to follow link in field '${fieldName}' of entity, the value is expected to be a link, but got: ${JSON.stringify(value)}`, { entity: entryOrAsset });
+        return;
+    }
+    // no need to make structuredClone(entityStore.getEntityFromLink(value)) because
+    // we provide component with the original Object.frozen object of the entity.
+    // As we don't resolve L3 and don't mutate the entity before returning anymore,
+    // we don't need to make a copy of the entity. And even provide better referential integrity
+    // for the component for the same entity.
+    if (!resolvedEntity) {
         return;
     }
-    //resolve any embedded links - we currently only support 2 levels deep
-    const fields = resolvedEntity.fields || {};
-    Object.entries(fields).forEach(([fieldKey, field]) => {
-        if (field && field.sys?.type === 'Link') {
-            const entity = entityStore.getEntityFromLink(field);
-            if (entity) {
-                resolvedEntity.fields[fieldKey] = entity;
-            }
-        }
-        else if (field && Array.isArray(field)) {
-            resolvedEntity.fields[fieldKey] = field.map((innerField) => {
-                if (innerField && innerField.sys?.type === 'Link') {
-                    const entity = entityStore.getEntityFromLink(innerField);
-                    if (entity) {
-                        return entity;
-                    }
-                }
-                return innerField;
-            });
-        }
-    });
     return resolvedEntity;
 }
 
+const excludeUndefined = (value) => {
+    return value !== undefined;
+};
 function getArrayValue(entryOrAsset, path, entityStore) {
+    // NOTE: Not sure if we need this if-statement,
+    // as it is NOT possible to bind to Array variable an Asset
+    // (as Assets don't have multi-reference fields) unless it's a degenerate case.
     if (entryOrAsset.sys.type === 'Asset') {
         return entryOrAsset;
     }
-    const arrayValue = get(entryOrAsset, path.split('/').slice(2, -1));
+    const fieldName = path.split('/').slice(2, -1);
+    const arrayValue = get$1(entryOrAsset, fieldName);
     if (!isArray(arrayValue)) {
-        console.warn(`Expected a value to be an array, but got: ${JSON.stringify(arrayValue)}`);
+        console.warn(`A field '${fieldName}' of an entity was bound to an Array variable. Expected value of that field to be an array, but got: ${JSON.stringify(arrayValue)}`, { entity: entryOrAsset });
         return;
     }
-    const result = arrayValue.map((value) => {
+    const result = arrayValue
+        .map((value) => {
         if (typeof value === 'string') {
-            return value;
+            return value; // handles case where Text array is bound (in [Content Model] tab of the platform, select Text and make it a list)
         }
         else if (value?.sys?.type === 'Link') {
             const resolvedEntity = entityStore.getEntityFromLink(value);
             if (!resolvedEntity) {
+                // We return undefined, which means that entity wasn't availble in the Entity Store due to:
+                //  - because it's archived entity (and they normally wouldn't be sent to the Entity Store)
+                //  - bug where some entity wasn't added to the Entity Store
+                //  BTW, deleted entities shouldn't even be possible here as they require CT deletion first and that shouldn't allow us to load them at all)
                 return;
             }
-            //resolve any embedded links - we currently only support 2 levels deep
-            const fields = resolvedEntity.fields || {};
-            Object.entries(fields).forEach(([fieldKey, field]) => {
-                if (field && field.sys?.type === 'Link') {
-                    const entity = entityStore.getEntityFromLink(field);
-                    if (entity) {
-                        resolvedEntity.fields[fieldKey] = entity;
-                    }
-                }
-            });
             return resolvedEntity;
         }
         else {
             console.warn(`Expected value to be a string or Link, but got: ${JSON.stringify(value)}`);
             return undefined;
         }
-    });
-    return result;
+    })
+        .filter(excludeUndefined);
+    // eg. imagine you have multi-referene field with 3 links to archived entries,
+    //     all of them will be undefined on previous step and will be filtered out
+    //     of resultWithoutUndefined. Instead of passing to component an empty array,
+    //     we pass undefined. This means that develloper making custom component
+    //     does not have to handle empty array case. But only undefiened, which signals:
+    //     user didn't bind anything; user bound to reference field which is unset; all references are archived
+    return result.length > 0 ? result : undefined;
 }
 
 const transformBoundContentValue = (variables, entityStore, binding, resolveDesignValue, variableName, variableType, path) => {
@@ -2110,11 +2096,22 @@ const sendMessage = (eventType, data) => {
     }, '*');
 };
 
+function deepFreeze$1(obj) {
+    const propNames = Object.getOwnPropertyNames(obj);
+    for (const name of propNames) {
+        const value = obj[name];
+        if (value && typeof value === 'object') {
+            deepFreeze$1(value);
+        }
+    }
+    return Object.freeze(obj);
+}
+
 /**
  * Base Store for entities
  * Can be extended for the different loading behaviours (editor, production, ..)
  */
-class EntityStoreBase {
+let EntityStoreBase$1 = class EntityStoreBase {
     constructor({ entities, locale }) {
         /* serialized */ this.entryMap = new Map();
         /* serialized */ this.assetMap = new Map();
@@ -2130,11 +2127,11 @@ class EntityStoreBase {
         this.addEntity(entity);
     }
     getEntryOrAsset(linkOrEntryOrAsset, path) {
-        if (isDeepPath(path)) {
+        if (isDeepPath$1(path)) {
             return this.getDeepEntry(linkOrEntryOrAsset, path);
         }
         let entity;
-        if (isLink(linkOrEntryOrAsset)) {
+        if (isLink$1(linkOrEntryOrAsset)) {
             const resolvedEntity = linkOrEntryOrAsset.sys.linkType === 'Entry'
                 ? this.entryMap.get(linkOrEntryOrAsset.sys.id)
                 : this.assetMap.get(linkOrEntryOrAsset.sys.id);
@@ -2144,7 +2141,7 @@ class EntityStoreBase {
             }
             entity = resolvedEntity;
         }
-        else if (isAsset(linkOrEntryOrAsset) || isEntry(linkOrEntryOrAsset)) {
+        else if (isAsset$1(linkOrEntryOrAsset) || isEntry$1(linkOrEntryOrAsset)) {
             // We already have the complete entity in preview & delivery (resolved by the CMA client)
             entity = linkOrEntryOrAsset;
         }
@@ -2166,7 +2163,7 @@ class EntityStoreBase {
             console.warn(`Unresolved entity reference: ${entityLink.sys.linkType} with ID ${entityLink.sys.id}`);
             return;
         }
-        return get(entity, path);
+        return get$1(entity, path);
     }
     getEntityFromLink(link) {
         const resolvedEntity = link.sys.linkType === 'Entry'
@@ -2178,6 +2175,22 @@ class EntityStoreBase {
         }
         return resolvedEntity;
     }
+    getAssetById(assetId) {
+        const asset = this.assetMap.get(assetId);
+        if (!asset) {
+            console.warn(`Asset with ID "${assetId}" is not found in the store`);
+            return;
+        }
+        return asset;
+    }
+    getEntryById(entryId) {
+        const entry = this.entryMap.get(entryId);
+        if (!entry) {
+            console.warn(`Entry with ID "${entryId}" is not found in the store`);
+            return;
+        }
+        return entry;
+    }
     getEntitiesFromMap(type, ids) {
         const resolved = [];
         const missing = [];
@@ -2196,11 +2209,13 @@ class EntityStoreBase {
         };
     }
     addEntity(entity) {
-        if (isAsset(entity)) {
-            this.assetMap.set(entity.sys.id, entity);
+        if (isAsset$1(entity)) {
+            // cloned and frozen
+            this.assetMap.set(entity.sys.id, deepFreeze$1(structuredClone(entity)));
         }
-        else if (isEntry(entity)) {
-            this.entryMap.set(entity.sys.id, entity);
+        else if (isEntry$1(entity)) {
+            // cloned and frozen
+            this.entryMap.set(entity.sys.id, deepFreeze$1(structuredClone(entity)));
         }
         else {
             throw new Error(`Attempted to add an entity to the store that is neither Asset nor Entry: '${JSON.stringify(entity)}'`);
@@ -2253,7 +2268,7 @@ class EntityStoreBase {
                     resolvedFieldset.push([entityToResolveFieldsFrom, field, _localeQualifier]);
                     break;
                 }
-                const fieldValue = get(entityToResolveFieldsFrom, ['fields', field]);
+                const fieldValue = get$1(entityToResolveFieldsFrom, ['fields', field]);
                 if (undefined === fieldValue) {
                     return {
                         resolvedFieldset,
@@ -2261,7 +2276,7 @@ class EntityStoreBase {
                         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)) {
+                else if (isLink$1(fieldValue)) {
                     const entity = this.getEntityFromLink(fieldValue);
                     if (entity === undefined) {
                         return {
@@ -2273,7 +2288,7 @@ class EntityStoreBase {
                     resolvedFieldset.push([entityToResolveFieldsFrom, field, _localeQualifier]);
                     entityToResolveFieldsFrom = entity; // we move up
                 }
-                else if (isAsset(fieldValue) || isEntry(fieldValue)) {
+                else if (isAsset$1(fieldValue) || isEntry$1(fieldValue)) {
                     resolvedFieldset.push([entityToResolveFieldsFrom, field, _localeQualifier]);
                     entityToResolveFieldsFrom = fieldValue; // we move up
                 }
@@ -2290,13 +2305,13 @@ class EntityStoreBase {
                 isFullyResolved: true,
             };
         };
-        const headEntity = isLink(linkOrEntryOrAsset)
+        const headEntity = isLink$1(linkOrEntryOrAsset)
             ? this.getEntityFromLink(linkOrEntryOrAsset)
             : linkOrEntryOrAsset;
         if (undefined === headEntity) {
             return;
         }
-        const unresolvedFieldset = parseDataSourcePathIntoFieldset(path);
+        const unresolvedFieldset = parseDataSourcePathIntoFieldset$1(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
@@ -2322,13 +2337,13 @@ class EntityStoreBase {
             locale: this.locale,
         };
     }
-}
+};
 
 /**
  * EntityStore which resolves entries and assets from the editor
  * over the sendMessage and subscribe functions.
  */
-class EditorEntityStore extends EntityStoreBase {
+class EditorEntityStore extends EntityStoreBase$1 {
     constructor({ entities, locale, sendMessage, subscribe, timeoutDuration = 3000, }) {
         super({ entities, locale });
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2465,7 +2480,6 @@ class EditorModeEntityStore extends EditorEntityStore {
             };
         };
         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
@@ -2495,11 +2509,91 @@ class EditorModeEntityStore extends EditorEntityStore {
         if (!entity) {
             return;
         }
-        const fieldValue = get(entity, path);
+        const fieldValue = get$1(entity, path);
         return transformAssetFileToUrl(fieldValue);
     }
 }
 
+let UninitializedEntityStore$1 = class UninitializedEntityStore extends EntityStoreBase$1 {
+    constructor() {
+        super({ entities: [], locale: 'uninitialized-locale-in-uninitialized-entity-store' });
+    }
+};
+
+const inMemoryEntitiesStore = create((set, get) => ({
+    // The UninitializedEntityStore is a placeholder instance and is here to highlight the
+    // // fact that it's not used by anything until during loading lifecycle it'sreplaced by real entity store:
+    //   - in Preview+Delivery mode: right after we fetch Expereince and it entities
+    //   - in EDITOR (VisualEditor) mode: right after the VisualEditor is async imported and initialize event happens
+    entityStore: new UninitializedEntityStore$1(),
+    areEntitiesFetched: false,
+    setEntitiesFetched(fetched) {
+        set({ areEntitiesFetched: fetched });
+    },
+    resolveAssetById(assetId) {
+        if (!assetId)
+            return undefined;
+        const { entityStore } = get();
+        return entityStore.getAssetById(assetId);
+    },
+    resolveEntryById(entryId) {
+        if (!entryId)
+            return undefined;
+        const { entityStore } = get();
+        return entityStore.getEntryById(entryId);
+    },
+    resolveEntity(link) {
+        if (!link)
+            return undefined;
+        const { entityStore } = get();
+        return entityStore.getEntityFromLink(link);
+    },
+    resetEntityStore(entityStore) {
+        set({
+            entityStore,
+            areEntitiesFetched: false,
+        });
+    },
+}));
+
+function maybeResolveLink(maybeLink) {
+    if (!isLink$1(maybeLink)) {
+        console.warn('maybeResolveLink function must receive Link shape. Provided argument does not match the Link shape: ', maybeLink);
+        return undefined;
+    }
+    return inMemoryEntitiesStore.getState().resolveEntity(maybeLink);
+}
+function maybeResolveByAssetId(assetId) {
+    return inMemoryEntitiesStore.getState().resolveAssetById(assetId);
+}
+function maybeResolveByEntryId(entryId) {
+    return inMemoryEntitiesStore.getState().resolveEntryById(entryId);
+}
+function hasEntry(entryId) {
+    return Boolean(maybeResolveByEntryId(entryId));
+}
+function hasAsset(assetId) {
+    return Boolean(maybeResolveByAssetId(assetId));
+}
+function addEntities(entities) {
+    if (!Array.isArray(entities) || entities.length === 0) {
+        return;
+    }
+    const { entityStore } = inMemoryEntitiesStore.getState();
+    const definedEntities = entities.filter(Boolean);
+    for (const entity of definedEntities) {
+        entityStore.updateEntity(entity);
+    }
+}
+const inMemoryEntities = {
+    maybeResolveLink,
+    maybeResolveByAssetId,
+    maybeResolveByEntryId,
+    hasEntry,
+    hasAsset,
+    addEntities,
+};
+
 var VisualEditorMode$1;
 (function (VisualEditorMode) {
     VisualEditorMode["LazyLoad"] = "lazyLoad";
@@ -2529,7 +2623,7 @@ class DeepReference {
             // field references nothing (or even field doesn't exist)
             return undefined;
         }
-        if (!isLink(maybeReferentLink)) {
+        if (!isLink$1(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
@@ -2549,7 +2643,7 @@ function gatherDeepReferencesFromTree(startingNode, dataSource) {
         for (const [, variableMapping] of Object.entries(node.data.props)) {
             if (variableMapping.type !== 'BoundValue')
                 continue;
-            if (!isDeepPath(variableMapping.path))
+            if (!isDeepPath$1(variableMapping.path))
                 continue;
             deepReferences.push(DeepReference.from({
                 path: variableMapping.path,
@@ -3158,6 +3252,26 @@ const useTreeStore = create((set, get) => ({
             reparentChildNode(sourceIndex, destinationIndex, sourceParentId, destinationParentId, state.tree.root);
         }));
     },
+    // breadth first search
+    findNodeById(nodeId) {
+        if (!nodeId) {
+            return null;
+        }
+        const rootNode = get().tree.root;
+        const visitedNodeIds = [];
+        const queue = [];
+        let currentNode = rootNode;
+        queue.push(currentNode);
+        while (queue.length) {
+            currentNode = queue.shift();
+            visitedNodeIds.push(currentNode.data.id);
+            if (currentNode.data.id === nodeId) {
+                return currentNode;
+            }
+            queue.push(...currentNode.children);
+        }
+        return null;
+    },
 }));
 const hasBreakpointDiffs = (currentTree, newTree) => {
     const currentBreakpoints = currentTree?.root?.data?.breakpoints ?? [];
@@ -3706,7 +3820,13 @@ const ParameterDefinitionSchema = z.object({
         }),
     })
         .optional(),
-    contentTypes: z.array(z.string()),
+    contentTypes: z.record(z.string(), z.object({
+        sys: z.object({
+            type: z.literal('Link'),
+            id: z.string(),
+            linkType: z.enum(['ContentType']),
+        }),
+    })),
     passToNodes: z.array(PassToNodeSchema).optional(),
 });
 const ParameterDefinitionsSchema = z.record(propertyKeySchema, ParameterDefinitionSchema);
@@ -3726,7 +3846,7 @@ const ComponentSettingsSchema = z
     variableDefinitions: ComponentVariablesSchema,
     thumbnailId: z.enum(THUMBNAIL_IDS).optional(),
     category: z.string().max(50, 'Category must contain at most 50 characters').optional(),
-    prebindingDefinitions: z.array(PrebindingDefinitionSchema).length(1).optional(),
+    prebindingDefinitions: z.array(PrebindingDefinitionSchema).max(1).optional(),
 })
     .strict();
 z.object({
@@ -3932,124 +4052,520 @@ class DebugLogger {
 DebugLogger.instance = null;
 DebugLogger.getInstance();
 
-var VisualEditorMode;
-(function (VisualEditorMode) {
-    VisualEditorMode["LazyLoad"] = "lazyLoad";
-    VisualEditorMode["InjectScript"] = "injectScript";
-})(VisualEditorMode || (VisualEditorMode = {}));
-
-var css_248z$2$1 = ".contentful-container{display:flex;pointer-events:all;position:relative}.contentful-container::-webkit-scrollbar{display:none}.cf-single-column-wrapper{position:relative}.cf-container-wrapper{position:relative;width:100%}.contentful-container:after{align-items:center;bottom:0;color:var(--exp-builder-gray400);content:\"\";display:block;display:flex;font-family:var(--exp-builder-font-stack-primary);font-size:12px;justify-content:center;left:0;overflow-x:clip;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.contentful-section-label:after{content:\"Section\"}.contentful-container-label:after{content:\"Container\"}.contentful-container-link,.contentful-container-link:active,.contentful-container-link:focus-visible,.contentful-container-link:hover,.contentful-container-link:read-write,.contentful-container-link:visited{color:inherit;outline:unset;text-decoration:unset}";
-styleInject(css_248z$2$1);
-
-const Flex = forwardRef(({ id, children, onMouseEnter, onMouseUp, onMouseLeave, onMouseDown, onClick, flex, flexBasis, flexShrink, flexDirection, gap, justifyContent, justifyItems, justifySelf, alignItems, alignSelf, alignContent, order, flexWrap, flexGrow, className, cssStyles, ...props }, ref) => {
-    return (React.createElement("div", { id: id, ref: ref, style: {
-            display: 'flex',
-            flex,
-            flexBasis,
-            flexShrink,
-            flexDirection,
-            gap,
-            justifyContent,
-            justifyItems,
-            justifySelf,
-            alignItems,
-            alignSelf,
-            alignContent,
-            order,
-            flexWrap,
-            flexGrow,
-            ...cssStyles,
-        }, className: className, onMouseEnter: onMouseEnter, onMouseUp: onMouseUp, onMouseDown: onMouseDown, onMouseLeave: onMouseLeave, onClick: onClick, ...props }, children));
-});
-Flex.displayName = 'Flex';
-
-var css_248z$1$1 = ".cf-divider{display:contents;height:100%;position:relative;width:100%}.cf-divider hr{border:none}[data-ctfl-zone-id=root] .cf-divider:before{bottom:-5px;content:\"\";left:-5px;pointer-events:all;position:absolute;right:-5px;top:-5px}";
-styleInject(css_248z$1$1);
-
-var css_248z$9 = ".cf-columns{display:flex;flex-direction:column;gap:24px;grid-template-columns:repeat(12,1fr);min-height:0;min-width:0}@media (min-width:768px){.cf-columns{display:grid}}.cf-single-column-wrapper{display:flex;position:relative}.cf-single-column{pointer-events:all}.cf-single-column-wrapper:after{align-items:center;bottom:0;color:var(--exp-builder-gray400);content:\"\";display:block;display:flex;font-family:var(--exp-builder-font-stack-primary);font-size:12px;justify-content:center;left:0;overflow-x:clip;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.cf-single-column-label:after{content:\"Column\"}";
-styleInject(css_248z$9);
-
-const ColumnWrapper = forwardRef((props, ref) => {
-    return (React.createElement("div", { ref: ref, ...props, style: {
-            ...(props.style || {}),
-            display: 'grid',
-            gridTemplateColumns: 'repeat(12, [col-start] 1fr)',
-        } }, props.children));
-});
-ColumnWrapper.displayName = 'ColumnWrapper';
-
-const assemblyStyle = { display: 'contents' };
-// Feel free to do any magic as regards variable definitions for assemblies
-// Or if this isn't necessary by the time we figure that part out, we can bid this part farewell
-const Assembly = (props) => {
-    if (props.editorMode) {
-        const { node, dragProps, ...editorModeProps } = props;
-        return props.renderDropzone(node, {
-            ...editorModeProps,
-            ['data-test-id']: 'contentful-assembly',
-            className: props.className,
-            dragProps,
-        });
-    }
-    // Using a display contents so assembly content/children
-    // can appear as if they are direct children of the div wrapper's parent
-    return React.createElement("div", { "data-test-id": "assembly", ...props, style: assemblyStyle });
+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' && Boolean(link.sys?.linkType);
 };
 
-const useEntityStore = create((set) => ({
-    entityStore: new EditorModeEntityStore({ locale: 'en-US', entities: [] }),
-    areEntitiesFetched: false,
-    setEntitiesFetched(fetched) {
-        set({ areEntitiesFetched: fetched });
-    },
-    resetEntityStore(locale, entities = []) {
-        console.debug(`[experiences-sdk-react] Resetting entity store because the locale changed to '${locale}'.`);
-        const newEntityStore = new EditorModeEntityStore({ locale, entities });
-        set({
-            entityStore: newEntityStore,
-            areEntitiesFetched: false,
-        });
-        return newEntityStore;
-    },
-}));
-
-class DragState {
-    constructor() {
-        this.isDragStartedOnParent = false;
-        this.isDraggingItem = false;
-    }
-    get isDragging() {
-        return this.isDraggingItem;
-    }
-    get isDraggingOnParent() {
-        return this.isDragStartedOnParent;
-    }
-    updateIsDragging(isDraggingItem) {
-        this.isDraggingItem = isDraggingItem;
-    }
-    updateIsDragStartedOnParent(isDragStartedOnParent) {
-        this.isDragStartedOnParent = isDragStartedOnParent;
-    }
-    resetState() {
-        this.isDraggingItem = false;
-        this.isDragStartedOnParent = false;
-    }
-}
-
-class SimulateDnD extends DragState {
-    constructor() {
-        super();
-        this.draggingElement = null;
-    }
-    setupDrag() {
-        this.updateIsDragStartedOnParent(true);
+/**
+ * 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`);
     }
-    startDrag(coordX, coordY) {
-        this.draggingElement = document.getElementById(NEW_COMPONENT_ID);
-        this.updateIsDragging(true);
-        this.simulateMouseEvent(coordX, coordY, 'mousedown');
+    return parsedPath.fields.map((field) => [null, field, '~locale']);
+};
+/**
+ * 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;
     }
-    updateDrag(coordX, coordY) {
+    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);
+};
+
+// 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 isEntry = (value) => {
+    return (null !== value &&
+        typeof value === 'object' &&
+        'sys' in value &&
+        value.sys?.type === 'Entry');
+};
+const isAsset = (value) => {
+    return (null !== value &&
+        typeof value === 'object' &&
+        'sys' in value &&
+        value.sys?.type === 'Asset');
+};
+
+function deepFreeze(obj) {
+    const propNames = Object.getOwnPropertyNames(obj);
+    for (const name of propNames) {
+        const value = obj[name];
+        if (value && typeof value === 'object') {
+            deepFreeze(value);
+        }
+    }
+    return Object.freeze(obj);
+}
+
+/**
+ * Base Store for entities
+ * Can be extended for the different loading behaviours (editor, production, ..)
+ */
+class EntityStoreBase {
+    constructor({ entities, locale }) {
+        /* serialized */ this.entryMap = new Map();
+        /* serialized */ 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 if (isAsset(linkOrEntryOrAsset) || isEntry(linkOrEntryOrAsset)) {
+            // We already have the complete entity in preview & delivery (resolved by the CMA client)
+            entity = linkOrEntryOrAsset;
+        }
+        else {
+            throw new Error(`Unexpected object when resolving entity: ${JSON.stringify(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;
+    }
+    getAssetById(assetId) {
+        const asset = this.assetMap.get(assetId);
+        if (!asset) {
+            console.warn(`Asset with ID "${assetId}" is not found in the store`);
+            return;
+        }
+        return asset;
+    }
+    getEntryById(entryId) {
+        const entry = this.entryMap.get(entryId);
+        if (!entry) {
+            console.warn(`Entry with ID "${entryId}" is not found in the store`);
+            return;
+        }
+        return entry;
+    }
+    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 (isAsset(entity)) {
+            // cloned and frozen
+            this.assetMap.set(entity.sys.id, deepFreeze(structuredClone(entity)));
+        }
+        else if (isEntry(entity)) {
+            // cloned and frozen
+            this.entryMap.set(entity.sys.id, deepFreeze(structuredClone(entity)));
+        }
+        else {
+            throw new Error(`Attempted to add an entity to the store that is neither Asset nor Entry: '${JSON.stringify(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 if (isAsset(fieldValue) || isEntry(fieldValue)) {
+                    resolvedFieldset.push([entityToResolveFieldsFrom, field, _localeQualifier]);
+                    entityToResolveFieldsFrom = fieldValue; // we move up
+                }
+                else {
+                    return {
+                        resolvedFieldset,
+                        isFullyResolved: false,
+                        reason: `Deep path points to an invalid field value of type '${typeof fieldValue}' (value=${fieldValue})`,
+                    };
+                }
+            }
+            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;
+    }
+    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,
+        };
+    }
+}
+
+class UninitializedEntityStore extends EntityStoreBase {
+    constructor() {
+        super({ entities: [], locale: 'uninitialized-locale-in-uninitialized-entity-store' });
+    }
+}
+
+create((set, get) => ({
+    // The UninitializedEntityStore is a placeholder instance and is here to highlight the
+    // // fact that it's not used by anything until during loading lifecycle it'sreplaced by real entity store:
+    //   - in Preview+Delivery mode: right after we fetch Expereince and it entities
+    //   - in EDITOR (VisualEditor) mode: right after the VisualEditor is async imported and initialize event happens
+    entityStore: new UninitializedEntityStore(),
+    areEntitiesFetched: false,
+    setEntitiesFetched(fetched) {
+        set({ areEntitiesFetched: fetched });
+    },
+    resolveAssetById(assetId) {
+        if (!assetId)
+            return undefined;
+        const { entityStore } = get();
+        return entityStore.getAssetById(assetId);
+    },
+    resolveEntryById(entryId) {
+        if (!entryId)
+            return undefined;
+        const { entityStore } = get();
+        return entityStore.getEntryById(entryId);
+    },
+    resolveEntity(link) {
+        if (!link)
+            return undefined;
+        const { entityStore } = get();
+        return entityStore.getEntityFromLink(link);
+    },
+    resetEntityStore(entityStore) {
+        set({
+            entityStore,
+            areEntitiesFetched: false,
+        });
+    },
+}));
+
+var VisualEditorMode;
+(function (VisualEditorMode) {
+    VisualEditorMode["LazyLoad"] = "lazyLoad";
+    VisualEditorMode["InjectScript"] = "injectScript";
+})(VisualEditorMode || (VisualEditorMode = {}));
+
+var css_248z$2$1 = ".contentful-container{display:flex;pointer-events:all;position:relative}.contentful-container::-webkit-scrollbar{display:none}.cf-single-column-wrapper{position:relative}.cf-container-wrapper{position:relative;width:100%}.contentful-container:after{align-items:center;bottom:0;color:var(--exp-builder-gray400);content:\"\";display:block;display:flex;font-family:var(--exp-builder-font-stack-primary);font-size:12px;justify-content:center;left:0;overflow-x:clip;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.contentful-section-label:after{content:\"Section\"}.contentful-container-label:after{content:\"Container\"}.contentful-container-link,.contentful-container-link:active,.contentful-container-link:focus-visible,.contentful-container-link:hover,.contentful-container-link:read-write,.contentful-container-link:visited{color:inherit;outline:unset;text-decoration:unset}";
+styleInject(css_248z$2$1);
+
+const Flex = forwardRef(({ id, children, onMouseEnter, onMouseUp, onMouseLeave, onMouseDown, onClick, flex, flexBasis, flexShrink, flexDirection, gap, justifyContent, justifyItems, justifySelf, alignItems, alignSelf, alignContent, order, flexWrap, flexGrow, className, cssStyles, ...props }, ref) => {
+    return (React.createElement("div", { id: id, ref: ref, style: {
+            display: 'flex',
+            flex,
+            flexBasis,
+            flexShrink,
+            flexDirection,
+            gap,
+            justifyContent,
+            justifyItems,
+            justifySelf,
+            alignItems,
+            alignSelf,
+            alignContent,
+            order,
+            flexWrap,
+            flexGrow,
+            ...cssStyles,
+        }, className: className, onMouseEnter: onMouseEnter, onMouseUp: onMouseUp, onMouseDown: onMouseDown, onMouseLeave: onMouseLeave, onClick: onClick, ...props }, children));
+});
+Flex.displayName = 'Flex';
+
+var css_248z$1$1 = ".cf-divider{display:contents;height:100%;position:relative;width:100%}.cf-divider hr{border:none}[data-ctfl-zone-id=root] .cf-divider:before{bottom:-5px;content:\"\";left:-5px;pointer-events:all;position:absolute;right:-5px;top:-5px}";
+styleInject(css_248z$1$1);
+
+var css_248z$9 = ".cf-columns{display:flex;flex-direction:column;gap:24px;grid-template-columns:repeat(12,1fr);min-height:0;min-width:0}@media (min-width:768px){.cf-columns{display:grid}}.cf-single-column-wrapper{display:flex;position:relative}.cf-single-column{pointer-events:all}.cf-single-column-wrapper:after{align-items:center;bottom:0;color:var(--exp-builder-gray400);content:\"\";display:block;display:flex;font-family:var(--exp-builder-font-stack-primary);font-size:12px;justify-content:center;left:0;overflow-x:clip;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.cf-single-column-label:after{content:\"Column\"}";
+styleInject(css_248z$9);
+
+const ColumnWrapper = forwardRef((props, ref) => {
+    return (React.createElement("div", { ref: ref, ...props, style: {
+            ...(props.style || {}),
+            display: 'grid',
+            gridTemplateColumns: 'repeat(12, [col-start] 1fr)',
+        } }, props.children));
+});
+ColumnWrapper.displayName = 'ColumnWrapper';
+
+const assemblyStyle = { display: 'contents' };
+// Feel free to do any magic as regards variable definitions for assemblies
+// Or if this isn't necessary by the time we figure that part out, we can bid this part farewell
+const Assembly = (props) => {
+    if (props.editorMode) {
+        const { node, dragProps, ...editorModeProps } = props;
+        return props.renderDropzone(node, {
+            ...editorModeProps,
+            ['data-test-id']: 'contentful-assembly',
+            className: props.className,
+            dragProps,
+        });
+    }
+    // Using a display contents so assembly content/children
+    // can appear as if they are direct children of the div wrapper's parent
+    return React.createElement("div", { "data-test-id": "assembly", ...props, style: assemblyStyle });
+};
+
+class DragState {
+    constructor() {
+        this.isDragStartedOnParent = false;
+        this.isDraggingItem = false;
+    }
+    get isDragging() {
+        return this.isDraggingItem;
+    }
+    get isDraggingOnParent() {
+        return this.isDragStartedOnParent;
+    }
+    updateIsDragging(isDraggingItem) {
+        this.isDraggingItem = isDraggingItem;
+    }
+    updateIsDragStartedOnParent(isDragStartedOnParent) {
+        this.isDragStartedOnParent = isDragStartedOnParent;
+    }
+    resetState() {
+        this.isDraggingItem = false;
+        this.isDragStartedOnParent = false;
+    }
+}
+
+class SimulateDnD extends DragState {
+    constructor() {
+        super();
+        this.draggingElement = null;
+    }
+    setupDrag() {
+        this.updateIsDragStartedOnParent(true);
+    }
+    startDrag(coordX, coordY) {
+        this.draggingElement = document.getElementById(NEW_COMPONENT_ID);
+        this.updateIsDragging(true);
+        this.simulateMouseEvent(coordX, coordY, 'mousedown');
+    }
+    updateDrag(coordX, coordY) {
         if (!this.draggingElement) {
             this.draggingElement = document.querySelector(`[${CTFL_DRAGGING_ELEMENT}]`);
         }
@@ -4082,10 +4598,11 @@ class SimulateDnD extends DragState {
 }
 var SimulateDnD$1 = new SimulateDnD();
 
-function useEditorSubscriber() {
-    const entityStore = useEntityStore((state) => state.entityStore);
-    const areEntitiesFetched = useEntityStore((state) => state.areEntitiesFetched);
-    const setEntitiesFetched = useEntityStore((state) => state.setEntitiesFetched);
+function useEditorSubscriber(entityCache) {
+    const entityStore = entityCache((state) => state.entityStore);
+    const areEntitiesFetched = entityCache((state) => state.areEntitiesFetched);
+    const setEntitiesFetched = entityCache((state) => state.setEntitiesFetched);
+    const resetEntityStore = entityCache((state) => state.resetEntityStore);
     const { updateTree, updateNodesByUpdatedEntity } = useTreeStore((state) => ({
         updateTree: state.updateTree,
         updateNodesByUpdatedEntity: state.updateNodesByUpdatedEntity,
@@ -4097,7 +4614,6 @@ 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 setHoveredComponentId = useDraggedItemStore((state) => state.setHoveredComponentId);
     const setDraggingOnCanvas = useDraggedItemStore((state) => state.setDraggingOnCanvas);
@@ -4148,7 +4664,7 @@ function useEditorSubscriber() {
         const isMissingL2Entities = (deepReferences) => {
             const referentLinks = deepReferences
                 .map((deepReference) => deepReference.extractReferent(entityStore))
-                .filter(isLink);
+                .filter(isLink$1);
             const { missingAssetIds, missingEntryIds } = entityStore.getMissingEntityIds(referentLinks);
             return Boolean(missingAssetIds.length) || Boolean(missingEntryIds.length);
         };
@@ -4165,7 +4681,7 @@ function useEditorSubscriber() {
         const fillupL2 = async ({ deepReferences }) => {
             const referentLinks = deepReferences
                 .map((deepReference) => deepReference.extractReferent(entityStore))
-                .filter(isLink);
+                .filter(isLink$1);
             const { missingAssetIds, missingEntryIds } = entityStore.getMissingEntityIds(referentLinks);
             await entityStore.fetchEntities({ missingAssetIds, missingEntryIds });
         };
@@ -4218,8 +4734,9 @@ function useEditorSubscriber() {
                     }
                     let newEntityStore = entityStore;
                     if (entityStore.locale !== locale) {
-                        newEntityStore = resetEntityStore(locale);
+                        newEntityStore = new EditorModeEntityStore({ locale, entities: [] });
                         setLocale(locale);
+                        resetEntityStore(newEntityStore);
                     }
                     // Below are mutually exclusive cases
                     if (changedNode) {
@@ -4749,17 +5266,49 @@ const addStylesTag = (className, styleRules) => {
 
 const getUnboundValues = ({ key, fallback, unboundValues, }) => {
     const lodashPath = `${key}.value`;
-    return get$1(unboundValues, lodashPath, fallback);
+    return get$2(unboundValues, lodashPath, fallback);
 };
 
-const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, renderDropzone, definition, options, userIsDragging, requiresDragWrapper, }) => {
+/**
+ * When node is a pattern block, we need to look up for default values of the pattern variables
+ * and merge them with the updated node props.
+ * While loop is making sure that we look up for the updated default values in the parent pattern
+ * component settings as well.
+ */
+const maybeMergePatternDefaultDesignValues = ({ variableName, variableMapping, node, findNodeById, }) => {
+    if (node.type === ASSEMBLY_BLOCK_NODE_TYPE) {
+        const patternId = node.data.pattern?.id;
+        const exposedPropertyName = node['exposedPropertyNameToKeyMap'][variableName];
+        if (!exposedPropertyName || !patternId) {
+            return variableMapping.valuesByBreakpoint;
+        }
+        const exposedVariableDefinition = componentRegistry.get(patternId)?.definition.variables[exposedPropertyName];
+        let exposedDefaultValue = exposedVariableDefinition?.defaultValue;
+        let parentPatternNode = findNodeById(node.data.pattern?.nodeId);
+        while (parentPatternNode) {
+            const parentPatternId = parentPatternNode.data.pattern?.id;
+            const nextKey = parentPatternNode['exposedPropertyNameToKeyMap'][exposedPropertyName];
+            if (!parentPatternId || !nextKey) {
+                break;
+            }
+            const parentPatternVariableDefinition = componentRegistry.get(parentPatternId)?.definition.variables[nextKey];
+            exposedDefaultValue = mergeDesignValuesByBreakpoint(parentPatternVariableDefinition?.defaultValue, exposedDefaultValue);
+            parentPatternNode = findNodeById(parentPatternNode.data.pattern?.nodeId);
+        }
+        const mergedDesignValue = mergeDesignValuesByBreakpoint(exposedDefaultValue, variableMapping);
+        return mergedDesignValue?.valuesByBreakpoint;
+    }
+    return variableMapping.valuesByBreakpoint;
+};
+
+const useComponentProps = ({ node, entityStore, areEntitiesFetched, resolveDesignValue, renderDropzone, definition, options, userIsDragging, requiresDragWrapper, }) => {
     const unboundValues = useEditorStore((state) => state.unboundValues);
     const hyperlinkPattern = useEditorStore((state) => state.hyperLinkPattern);
     const locale = useEditorStore((state) => state.locale);
     const dataSource = useEditorStore((state) => state.dataSource);
-    const entityStore = useEntityStore((state) => state.entityStore);
     const draggingId = useDraggedItemStore((state) => state.onBeforeCaptureId);
     const nodeRect = useDraggedItemStore((state) => state.domRect);
+    const findNodeById = useTreeStore((state) => state.findNodeById);
     const isEmptyZone = !node.children.length;
     const props = useMemo(() => {
         const propsBase = {
@@ -4783,7 +5332,13 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
                 };
             }
             if (variableMapping.type === 'DesignValue') {
-                const valuesByBreakpoint = resolveDesignValue(variableMapping.valuesByBreakpoint, variableName);
+                const value = maybeMergePatternDefaultDesignValues({
+                    variableName,
+                    variableMapping,
+                    node,
+                    findNodeById,
+                });
+                const valuesByBreakpoint = resolveDesignValue(value, variableName);
                 const designValue = variableName === 'cfHeight'
                     ? calculateNodeDefaultHeight({
                         blockId: node.data.blockId,
@@ -4874,6 +5429,7 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
         unboundValues,
         entityStore,
         renderDropzone,
+        findNodeById,
     ]);
     const cfStyles = useMemo(() => ({
         ...buildCfStyles(props),
@@ -5046,7 +5602,6 @@ const MissingComponentPlaceholder = ({ blockId }) => {
 };
 
 const CircularDependencyErrorPlaceholder = forwardRef(({ wrappingPatternIds, ...props }, ref) => {
-    const entityStore = useEntityStore((state) => state.entityStore);
     return (React.createElement("div", { ...props, 
         // Pass through ref to avoid DND errors being logged
         ref: ref, "data-cf-node-error": "circular-pattern-dependency", style: {
@@ -5059,7 +5614,7 @@ const CircularDependencyErrorPlaceholder = forwardRef(({ wrappingPatternIds, ...
         "Circular usage of patterns detected:",
         React.createElement("ul", null, Array.from(wrappingPatternIds).map((patternId) => {
             const entryLink = { sys: { type: 'Link', linkType: 'Entry', id: patternId } };
-            const entry = entityStore.getEntityFromLink(entryLink);
+            const entry = inMemoryEntities.maybeResolveLink(entryLink);
             const entryTitle = entry?.fields?.title;
             const text = entryTitle ? `${entryTitle} (${patternId})` : patternId;
             return React.createElement("li", { key: patternId }, text);
@@ -5067,8 +5622,7 @@ const CircularDependencyErrorPlaceholder = forwardRef(({ wrappingPatternIds, ...
 });
 CircularDependencyErrorPlaceholder.displayName = 'CircularDependencyErrorPlaceholder';
 
-const useComponent = ({ node, resolveDesignValue, renderDropzone, userIsDragging, wrappingPatternIds, }) => {
-    const areEntitiesFetched = useEntityStore((state) => state.areEntitiesFetched);
+const useComponent = ({ node, entityStore, areEntitiesFetched, resolveDesignValue, renderDropzone, userIsDragging, wrappingPatternIds, }) => {
     const tree = useTreeStore((state) => state.tree);
     const componentRegistration = useMemo(() => {
         let registration = componentRegistry.get(node.data.blockId);
@@ -5094,6 +5648,7 @@ const useComponent = ({ node, resolveDesignValue, renderDropzone, userIsDragging
     const requiresDragWrapper = !isPatternNode && !isStructureComponent && !componentRegistration?.options?.wrapComponent;
     const { componentProps, wrapperStyles } = useComponentProps({
         node,
+        entityStore,
         areEntitiesFetched,
         resolveDesignValue,
         renderDropzone,
@@ -5568,13 +6123,15 @@ function getStyle$1(style, snapshot) {
         transitionDuration: `0.001s`,
     };
 }
-const EditorBlock = ({ node: rawNode, resolveDesignValue, renderDropzone, index, zoneId, userIsDragging, placeholder, wrappingPatternIds, }) => {
+const EditorBlock = ({ node: rawNode, entityStore, areEntitiesFetched, resolveDesignValue, renderDropzone, index, zoneId, userIsDragging, placeholder, wrappingPatternIds, }) => {
     const { slotId } = parseZoneId(zoneId);
     const ref = useRef(null);
     const setSelectedNodeId = useEditorStore((state) => state.setSelectedNodeId);
     const selectedNodeId = useEditorStore((state) => state.selectedNodeId);
     const { node, componentId, elementToRender, definition, isPatternNode, isPatternComponent, isNestedPattern, } = useComponent({
         node: rawNode,
+        entityStore,
+        areEntitiesFetched,
         resolveDesignValue,
         renderDropzone,
         userIsDragging,
@@ -5715,10 +6272,12 @@ function getStyle(style = {}, snapshot) {
         transitionDuration: `0.001s`,
     };
 }
-const EditorBlockClone = ({ node: rawNode, resolveDesignValue, snapshot, provided, renderDropzone, wrappingPatternIds, }) => {
+const EditorBlockClone = ({ node: rawNode, entityStore, areEntitiesFetched, resolveDesignValue, snapshot, provided, renderDropzone, wrappingPatternIds, }) => {
     const userIsDragging = useDraggedItemStore((state) => state.isDraggingOnCanvas);
     const { node, elementToRender } = useComponent({
         node: rawNode,
+        entityStore,
+        areEntitiesFetched,
         resolveDesignValue,
         renderDropzone,
         userIsDragging,
@@ -5755,7 +6314,7 @@ const getHtmlComponentProps = (props) => {
     return {};
 };
 
-function DropzoneClone({ node, zoneId, resolveDesignValue, WrapperComponent = 'div', renderDropzone, dragProps, wrappingPatternIds, ...rest }) {
+function DropzoneClone({ node, entityStore, zoneId, resolveDesignValue, WrapperComponent = 'div', renderDropzone, dragProps, wrappingPatternIds, areEntitiesFetched, ...rest }) {
     const tree = useTreeStore((state) => state.tree);
     const content = node?.children || tree.root?.children || [];
     const { slotId } = parseZoneId(zoneId);
@@ -5776,11 +6335,11 @@ function DropzoneClone({ node, zoneId, resolveDesignValue, WrapperComponent = 'd
         .filter((node) => node.data.slotId === slotId)
         .map((item) => {
         const componentId = item.data.id;
-        return (React.createElement(EditorBlockClone, { key: componentId, node: item, resolveDesignValue: resolveDesignValue, renderDropzone: renderDropzone, wrappingPatternIds: wrappingPatternIds }));
+        return (React.createElement(EditorBlockClone, { entityStore: entityStore, areEntitiesFetched: areEntitiesFetched, key: componentId, node: item, resolveDesignValue: resolveDesignValue, renderDropzone: renderDropzone, wrappingPatternIds: wrappingPatternIds }));
     })));
 }
 
-function Dropzone({ node, zoneId, resolveDesignValue, className, WrapperComponent = 'div', dragProps, wrappingPatternIds: parentWrappingPatternIds = new Set(), ...rest }) {
+function Dropzone({ node, zoneId, resolveDesignValue, className, WrapperComponent = 'div', dragProps, entityStore, areEntitiesFetched, wrappingPatternIds: parentWrappingPatternIds = new Set(), ...rest }) {
     const userIsDragging = useDraggedItemStore((state) => state.isDraggingOnCanvas);
     const draggedItem = useDraggedItemStore((state) => state.draggedItem);
     const isDraggingNewComponent = useDraggedItemStore((state) => Boolean(state.componentId));
@@ -5815,11 +6374,11 @@ function Dropzone({ node, zoneId, resolveDesignValue, className, WrapperComponen
     }, [isRootAssembly, node, parentWrappingPatternIds, tree.root.data.blockId]);
     // To avoid a circular dependency, we create the recursive rendering function here and trickle it down
     const renderDropzone = useCallback((node, props) => {
-        return (React.createElement(Dropzone, { zoneId: node.data.id, node: node, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds, ...props }));
-    }, [wrappingPatternIds, resolveDesignValue]);
+        return (React.createElement(Dropzone, { zoneId: node.data.id, entityStore: entityStore, node: node, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds, areEntitiesFetched: areEntitiesFetched, ...props }));
+    }, [wrappingPatternIds, resolveDesignValue, entityStore, areEntitiesFetched]);
     const renderClonedDropzone = useCallback((node, props) => {
-        return (React.createElement(DropzoneClone, { zoneId: node.data.id, node: node, resolveDesignValue: resolveDesignValue, renderDropzone: renderClonedDropzone, wrappingPatternIds: wrappingPatternIds, ...props }));
-    }, [resolveDesignValue, wrappingPatternIds]);
+        return (React.createElement(DropzoneClone, { entityStore: entityStore, areEntitiesFetched: areEntitiesFetched, zoneId: node.data.id, node: node, resolveDesignValue: resolveDesignValue, renderDropzone: renderClonedDropzone, wrappingPatternIds: wrappingPatternIds, ...props }));
+    }, [resolveDesignValue, wrappingPatternIds, entityStore, areEntitiesFetched]);
     const isDropzoneEnabled = useMemo(() => {
         const isColumns = node?.data.blockId === CONTENTFUL_COMPONENTS$1.columns.id;
         const isDraggingSingleColumn = draggedNode?.data.blockId === CONTENTFUL_COMPONENTS$1.singleColumn.id;
@@ -5861,7 +6420,7 @@ function Dropzone({ node, zoneId, resolveDesignValue, className, WrapperComponen
         ? node.children.length === 1 &&
             resolveDesignValue(node?.children[0]?.data.props.cfWidth?.valuesByBreakpoint ?? {}, 'cfWidth') === '100%'
         : false;
-    return (React.createElement(Droppable, { droppableId: zoneId, direction: direction, isDropDisabled: !isDropzoneEnabled, renderClone: (provided, snapshot, rubic) => (React.createElement(EditorBlockClone, { node: content[rubic.source.index], resolveDesignValue: resolveDesignValue, provided: provided, snapshot: snapshot, renderDropzone: renderClonedDropzone, wrappingPatternIds: wrappingPatternIds })) }, (provided, snapshot) => {
+    return (React.createElement(Droppable, { droppableId: zoneId, direction: direction, isDropDisabled: !isDropzoneEnabled, renderClone: (provided, snapshot, rubic) => (React.createElement(EditorBlockClone, { entityStore: entityStore, areEntitiesFetched: areEntitiesFetched, node: content[rubic.source.index], resolveDesignValue: resolveDesignValue, provided: provided, snapshot: snapshot, renderDropzone: renderClonedDropzone, wrappingPatternIds: wrappingPatternIds })) }, (provided, snapshot) => {
         return (React.createElement(WrapperComponent, { ...(provided || { droppableProps: {} }).droppableProps, ...htmlDraggableProps, ...htmlProps, ref: (refNode) => {
                 if (dragProps?.innerRef) {
                     dragProps.innerRef(refNode);
@@ -5879,7 +6438,7 @@ function Dropzone({ node, zoneId, resolveDesignValue, className, WrapperComponen
             }) },
             isEmptyCanvas ? (React.createElement(EmptyContainer, { isDragging: isRootZone && userIsDragging })) : (content
                 .filter((node) => node.data.slotId === slotId)
-                .map((item, i) => (React.createElement(EditorBlock, { placeholder: {
+                .map((item, i) => (React.createElement(EditorBlock, { entityStore: entityStore, areEntitiesFetched: areEntitiesFetched, placeholder: {
                     isDraggingOver: snapshot?.isDraggingOver,
                     totalIndexes: content.length,
                     elementIndex: i,
@@ -5891,8 +6450,8 @@ function Dropzone({ node, zoneId, resolveDesignValue, className, WrapperComponen
     }));
 }
 
-const RootRenderer = ({ onChange }) => {
-    useEditorSubscriber();
+const RootRenderer = ({ onChange, inMemoryEntitiesStore, }) => {
+    useEditorSubscriber(inMemoryEntitiesStore);
     const dragItem = useDraggedItemStore((state) => state.componentId);
     const userIsDragging = useDraggedItemStore((state) => state.isDraggingOnCanvas);
     const setHoveredComponentId = useDraggedItemStore((state) => state.setHoveredComponentId);
@@ -5972,28 +6531,28 @@ const RootRenderer = ({ onChange }) => {
         handleResizeCanvas();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [containerRef.current]);
+    const entityStore = inMemoryEntitiesStore((state) => state.entityStore);
+    const areEntitiesFetched = inMemoryEntitiesStore((state) => state.areEntitiesFetched);
     return (React.createElement(DNDProvider, null,
         dragItem && React.createElement(DraggableContainer, { id: dragItem }),
         React.createElement("div", { "data-ctfl-root": true, className: styles$3.container, ref: containerRef, style: containerStyles },
             userIsDragging && React.createElement("div", { "data-ctfl-zone-id": ROOT_ID, className: styles$3.hitbox }),
-            React.createElement(Dropzone, { zoneId: ROOT_ID, resolveDesignValue: resolveDesignValue }),
+            React.createElement(Dropzone, { zoneId: ROOT_ID, resolveDesignValue: resolveDesignValue, entityStore: entityStore, areEntitiesFetched: areEntitiesFetched }),
             userIsDragging && (React.createElement(React.Fragment, null,
                 React.createElement("div", { "data-ctfl-zone-id": ROOT_ID, className: styles$3.hitboxLower }),
                 React.createElement("div", { "data-ctfl-zone-id": ROOT_ID, className: styles$3.canvasBottomSpacer })))),
         React.createElement("div", { "data-ctfl-hitboxes": true })));
 };
 
-const useInitializeEditor = () => {
+const useInitializeEditor = (inMemoryEntitiesStore) => {
     const initializeEditor = useEditorStore((state) => state.initializeEditor);
     const [initialized, setInitialized] = useState(false);
-    const resetEntityStore = useEntityStore((state) => state.resetEntityStore);
+    const resetEntityStore = useStore(inMemoryEntitiesStore, (state) => state.resetEntityStore);
     useEffect(() => {
         const onVisualEditorInitialize = (event) => {
             if (!event.detail)
                 return;
-            const { componentRegistry, designTokens, locale: initialLocale, 
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            entities, } = event.detail;
+            const { componentRegistry, designTokens, locale: initialLocale, entities } = event.detail;
             initializeEditor({
                 initialLocale,
                 componentRegistry,
@@ -6001,7 +6560,7 @@ const useInitializeEditor = () => {
             });
             // if entities is set to [], then everything will still work as EntityStore will
             // request entities on demand via ▲REQUEST_ENTITY
-            resetEntityStore(initialLocale, entities);
+            resetEntityStore(new EditorModeEntityStore({ locale: initialLocale, entities }));
             setInitialized(true);
         };
         // Listen for VisualEditorComponents internal event
@@ -6021,8 +6580,8 @@ const useInitializeEditor = () => {
     return initialized;
 };
 
-const VisualEditorRoot = ({ experience }) => {
-    const initialized = useInitializeEditor();
+const VisualEditorRoot = ({ experience, inMemoryEntitiesStore: inMemoryEntitiesStore$1 = inMemoryEntitiesStore, }) => {
+    const initialized = useInitializeEditor(inMemoryEntitiesStore$1);
     const setHyperLinkPattern = useEditorStore((state) => state.setHyperLinkPattern);
     const setMousePosition = useDraggedItemStore((state) => state.setMousePosition);
     const setHoveringZone = useZoneStore((state) => state.setHoveringZone);
@@ -6058,7 +6617,7 @@ const VisualEditorRoot = ({ experience }) => {
     }, [setHoveringZone, setMousePosition]);
     if (!initialized)
         return null;
-    return React.createElement(RootRenderer, null);
+    return React.createElement(RootRenderer, { inMemoryEntitiesStore: inMemoryEntitiesStore$1 });
 };
 
 export { VisualEditorRoot as default };