@contentful/experiences-visual-editor-react 3.7.0-prerelease-20250917T1034-42f0486.0 → 3.7.0

package/dist/index.js

@@ -1,15 +1,16 @@
 import styleInject from 'style-inject';
 import React, { useState, useEffect, useCallback, forwardRef, useMemo, useLayoutEffect, useRef } from 'react';
 import { z } from 'zod';
-import { cloneDeep, omit, isArray, isEqual, get as get$2, debounce } from 'lodash-es';
+import cloneDeep from 'lodash.clonedeep';
 import md5 from 'md5';
 import { BLOCKS } from '@contentful/rich-text-types';
 import { create, useStore } from 'zustand';
 import { produce } from 'immer';
+import { isEqual, get as get$2, debounce } from 'lodash-es';
 import '@contentful/rich-text-react-renderer';
 
-var css_248z$a = "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$a);
+var css_248z$b = "html,\nbody {\n  margin: 0;\n  padding: 0;\n}\n\n/*\n * All of these variables are tokens from Forma-36 and should not be adjusted as these\n * are global variables that may affect multiple places.\n * As our customers may use other design libraries, we try to avoid overlapping global\n * variables by always using the prefix `--exp-builder-` inside this SDK.\n */\n\n:root {\n  /* Color tokens from Forma 36: https://f36.contentful.com/tokens/color-system */\n  --exp-builder-blue100: #e8f5ff;\n  --exp-builder-blue200: #ceecff;\n  --exp-builder-blue300: #98cbff;\n  --exp-builder-blue400: #40a0ff;\n  --exp-builder-blue500: #036fe3;\n  --exp-builder-blue600: #0059c8;\n  --exp-builder-blue700: #0041ab;\n  --exp-builder-blue800: #003298;\n  --exp-builder-blue900: #002a8e;\n  --exp-builder-gray100: #f7f9fa;\n  --exp-builder-gray200: #e7ebee;\n  --exp-builder-gray300: #cfd9e0;\n  --exp-builder-gray400: #aec1cc;\n  --exp-builder-gray500: #67728a;\n  --exp-builder-gray600: #5a657c;\n  --exp-builder-gray700: #414d63;\n  --exp-builder-gray800: #1b273a;\n  --exp-builder-gray900: #111b2b;\n  --exp-builder-purple600: #6c3ecf;\n  --exp-builder-red200: #ffe0e0;\n  --exp-builder-red800: #7f0010;\n  --exp-builder-color-white: #ffffff;\n  --exp-builder-glow-primary: 0px 0px 0px 3px #e8f5ff;\n\n  /* RGB colors for applying opacity */\n  --exp-builder-blue100-rgb: 232, 245, 255;\n  --exp-builder-blue300-rgb: 152, 203, 255;\n\n  /* Spacing tokens from Forma 36: https://f36.contentful.com/tokens/spacing */\n  --exp-builder-spacing-s: 0.75rem;\n  --exp-builder-spacing-2xs: 0.25rem;\n\n  /* Typography tokens from Forma 36: https://f36.contentful.com/tokens/typography */\n  --exp-builder-font-size-l: 1rem;\n  --exp-builder-font-size-m: 0.875rem;\n  --exp-builder-font-stack-primary: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,\n    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\n  --exp-builder-line-height-condensed: 1.25;\n}\n";
+styleInject(css_248z$b);
 
 /** @deprecated will be removed when dropping backward compatibility for old DND */
 const INCOMING_EVENTS$1 = {
@@ -33,7 +34,9 @@ const INCOMING_EVENTS$1 = {
     /** @deprecated will be removed when dropping backward compatibility for old DND */
     HoverComponent: 'hoverComponent',
     UpdatedEntity: 'updatedEntity',
+    /** @deprecated not needed after `patternResolution` was introduced. Will be removed in the next major version. */
     AssembliesAdded: 'assembliesAdded',
+    /** @deprecated not needed after `patternResolution` was introduced. Will be removed in the next major version. */
     AssembliesRegistered: 'assembliesRegistered',
     /** @deprecated will be removed when dropping backward compatibility for old DND */
     MouseMove: 'mouseMove',
@@ -96,6 +99,7 @@ const CONTENTFUL_COMPONENTS$1 = {
         name: 'Carousel',
     },
 };
+const ASSEMBLY_DEFAULT_CATEGORY = 'Assemblies';
 const CF_STYLE_ATTRIBUTES = [
     'cfVisibility',
     'cfHorizontalAlignment',
@@ -754,7 +758,7 @@ const BreakpointSchema$1 = z
     id: propertyKeySchema$1,
     // Can be replace with z.templateLiteral when upgrading to zod v4
     query: z.string().refine((s) => BREAKPOINT_QUERY_REGEX$1.test(s)),
-    previewSize: z.string(),
+    previewSize: z.string().optional(),
     displayName: z.string(),
     displayIcon: z.enum(['desktop', 'tablet', 'mobile']).optional(),
 })
@@ -791,19 +795,6 @@ const ComponentVariableSchema$1 = z.object({
 });
 const ComponentTreeNodeSchema$1 = BaseComponentTreeNodeSchema$1.extend({
     children: z.lazy(() => ComponentTreeNodeSchema$1.array()),
-}).superRefine(({ id, prebindingId, parameters }, ctx) => {
-    if (prebindingId && !parameters) {
-        ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: `Found "prebindingId" but no "parameters" for node with id: "${id}"`,
-        });
-    }
-    if (parameters && !prebindingId) {
-        ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: `Found "parameters" but no "prebindingId" for node with id: "${id}"`,
-        });
-    }
 });
 const ComponentTreeSchema$1 = z
     .object({
@@ -821,6 +812,25 @@ z.object({
     usedComponents: localeWrapper$1(UsedComponentsSchema$1).optional(),
 });
 
+function treeVisit$1$1(initialNode, onNode) {
+    const _treeVisit = (currentNode) => {
+        const children = [...currentNode.children];
+        onNode(currentNode);
+        for (const child of children) {
+            _treeVisit(child);
+        }
+    };
+    if (Array.isArray(initialNode)) {
+        for (const node of initialNode) {
+            _treeVisit(node);
+        }
+    }
+    else {
+        _treeVisit(initialNode);
+    }
+}
+
+const MAX_ALLOWED_PATHS$1 = 200;
 const THUMBNAIL_IDS$1 = [
     'columns',
     'columnsPlusRight',
@@ -851,7 +861,17 @@ const THUMBNAIL_IDS$1 = [
 const VariableMappingSchema$1 = z.object({
     parameterId: propertyKeySchema$1,
     type: z.literal('ContentTypeMapping'),
-    pathsByContentType: z.record(z.string(), z.object({ path: z.string() })),
+    pathsByContentType: z
+        .record(z.string(), z.object({ path: z.string() }))
+        .superRefine((paths, ctx) => {
+        const variableId = ctx.path[ctx.path.length - 2];
+        if (Object.keys(paths).length > MAX_ALLOWED_PATHS$1) {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: `Too many paths defined for variable mapping with id "${variableId}", maximum allowed is ${MAX_ALLOWED_PATHS$1}`,
+            });
+        }
+    }),
 });
 const PassToNodeSchema$1 = z
     .object({
@@ -875,7 +895,10 @@ const ParameterDefinitionSchema$1 = z.object({
     })
         .optional(),
     contentTypes: z.array(z.string()).min(1),
-    passToNodes: z.array(PassToNodeSchema$1).optional(),
+    passToNodes: z
+        .array(PassToNodeSchema$1)
+        .max(1, 'At most one "passToNodes" element is allowed per parameter definition.')
+        .optional(), // we might change this to be empty array for native parameter definitions, that's why we don't use .length(1)
 });
 const ParameterDefinitionsSchema$1 = z.record(propertyKeySchema$1, ParameterDefinitionSchema$1);
 const VariableMappingsSchema$1 = z.record(propertyKeySchema$1, VariableMappingSchema$1);
@@ -896,14 +919,108 @@ const ComponentSettingsSchema$1 = z
     category: z.string().max(50, 'Category must contain at most 50 characters').optional(),
     prebindingDefinitions: z.array(PrebindingDefinitionSchema$1).length(1).optional(),
 })
-    .strict();
-z.object({
+    .strict()
+    .superRefine((componentSettings, ctx) => {
+    const { variableDefinitions, prebindingDefinitions } = componentSettings;
+    if (!prebindingDefinitions || prebindingDefinitions.length === 0) {
+        return;
+    }
+    const { parameterDefinitions, variableMappings, allowedVariableOverrides } = prebindingDefinitions[0];
+    validateAtMostOneNativeParameterDefinition$1(parameterDefinitions, ctx);
+    validateNoOverlapBetweenMappingAndOverrides$1(variableMappings, allowedVariableOverrides, ctx);
+    validateMappingsAgainstVariableDefinitions$1(variableMappings, allowedVariableOverrides, variableDefinitions, ctx);
+    validateMappingsAgainstParameterDefinitions$1(variableMappings, parameterDefinitions, ctx);
+});
+z
+    .object({
     componentTree: localeWrapper$1(ComponentTreeSchema$1),
     dataSource: localeWrapper$1(DataSourceSchema$1),
     unboundValues: localeWrapper$1(UnboundValuesSchema$1),
     usedComponents: localeWrapper$1(UsedComponentsSchema$1).optional(),
     componentSettings: localeWrapper$1(ComponentSettingsSchema$1),
+})
+    .superRefine((patternFields, ctx) => {
+    const { componentTree, componentSettings } = patternFields;
+    // values at this point are wrapped under locale code
+    const nonLocalisedComponentTree = Object.values(componentTree)[0];
+    const nonLocalisedComponentSettings = Object.values(componentSettings)[0];
+    if (!nonLocalisedComponentSettings || !nonLocalisedComponentTree) {
+        return;
+    }
+    validatePassToNodes$1(nonLocalisedComponentTree.children || [], nonLocalisedComponentSettings || {}, ctx);
 });
+const validateAtMostOneNativeParameterDefinition$1 = (parameterDefinitions, ctx) => {
+    const nativeParamDefinitions = Object.values(parameterDefinitions).filter((paramDefinition) => !(paramDefinition.passToNodes && paramDefinition.passToNodes.length > 0));
+    if (nativeParamDefinitions.length > 1) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `Only one native parameter definition (parameter definition without passToNodes) is allowed per prebinding definition.`,
+        });
+    }
+};
+const validateNoOverlapBetweenMappingAndOverrides$1 = (variableMappings, allowedVariableOverrides, ctx) => {
+    const variableMappingKeys = Object.keys(variableMappings || {});
+    const overridesSet = new Set(allowedVariableOverrides || []);
+    const overlap = variableMappingKeys.filter((key) => overridesSet.has(key));
+    if (overlap.length > 0) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `Found both variable mapping and allowed override for the following keys: ${overlap.map((key) => `"${key}"`).join(', ')}.`,
+        });
+    }
+};
+const validateMappingsAgainstVariableDefinitions$1 = (variableMappings, allowedVariableOverrides, variableDefinitions, ctx) => {
+    const nonDesignVariableDefinitionKeys = Object.entries(variableDefinitions)
+        .filter(([_, def]) => def.group !== 'style')
+        .map(([key]) => key);
+    const variableMappingKeys = Object.keys(variableMappings || {});
+    const allKeys = [...variableMappingKeys, ...(allowedVariableOverrides || [])];
+    const invalidMappings = allKeys.filter((key) => !nonDesignVariableDefinitionKeys.includes(key));
+    if (invalidMappings.length > 0) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `The following variable mappings or overrides are missing from the variable definitions: ${invalidMappings.map((key) => `"${key}"`).join(', ')}.`,
+        });
+    }
+};
+const validateMappingsAgainstParameterDefinitions$1 = (variableMappings, parameterDefinitions, ctx) => {
+    const parameterDefinitionKeys = Object.keys(parameterDefinitions || {});
+    for (const [mappingKey, mappingValue] of Object.entries(variableMappings || {})) {
+        if (!parameterDefinitionKeys.includes(mappingValue.parameterId)) {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: `The variable mapping with id "${mappingKey}" references a non-existing parameterId "${mappingValue.parameterId}".`,
+            });
+        }
+    }
+};
+const validatePassToNodes$1 = (rootChildren, componentSettings, ctx) => {
+    if (!componentSettings.prebindingDefinitions ||
+        componentSettings.prebindingDefinitions.length === 0) {
+        return;
+    }
+    const { parameterDefinitions } = componentSettings.prebindingDefinitions[0];
+    let nodeIds = new Set();
+    for (const paramDef of Object.values(parameterDefinitions || {})) {
+        paramDef.passToNodes?.forEach((n) => nodeIds.add(n.nodeId));
+    }
+    treeVisit$1$1(rootChildren, (node) => {
+        if (!node.id)
+            return;
+        if (nodeIds.has(node.id)) {
+            nodeIds.delete(node.id);
+        }
+    });
+    if (nodeIds.size > 0) {
+        const stringifiedNodeIds = Array.from(nodeIds)
+            .map((id) => `"${id}"`)
+            .join(', ');
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `The following node IDs referenced in passToNodes are not present in the component tree: ${stringifiedNodeIds}.`,
+        });
+    }
+};
 
 z
     .object({
@@ -1570,7 +1687,9 @@ const stylesToRemove = CF_STYLE_ATTRIBUTES.filter((style) => !stylesToKeep.inclu
 // cfWrapColumns & cfWrapColumnsCount are no real style attributes as they are handled on the editor side
 const propsToRemove = ['cfSsrClassName', 'cfWrapColumns', 'cfWrapColumnsCount'];
 const sanitizeNodeProps = (nodeProps) => {
-    return omit(nodeProps, stylesToRemove, propsToRemove);
+    const keysToRemove = [...stylesToRemove, ...propsToRemove];
+    const sanitizedProps = Object.fromEntries(Object.entries(nodeProps).filter(([key]) => !keysToRemove.includes(key)));
+    return sanitizedProps;
 };
 
 /** Turn the visibility value into a style object that can be used for inline styles in React */
@@ -2049,7 +2168,7 @@ function getArrayValue(entryOrAsset, path, entityStore) {
     }
     const fieldName = path.split('/').slice(2, -1);
     const arrayValue = get$1(entryOrAsset, fieldName);
-    if (!isArray(arrayValue)) {
+    if (!Array.isArray(arrayValue)) {
         debug$1.warn(`[experiences-core::getArrayValue] 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;
     }
@@ -2166,6 +2285,19 @@ function getTargetValueInPixels(targetWidthObject) {
             return targetWidthObject.value;
     }
 }
+/**
+ * Creates a component definition for an assembly. As all assemblies use the same definition in the SDK,
+ * all should be registered via this function.
+ */
+const createAssemblyDefinition = (definitionId) => {
+    return {
+        id: definitionId,
+        name: 'Component',
+        variables: {},
+        children: true,
+        category: ASSEMBLY_DEFAULT_CATEGORY,
+    };
+};
 
 class ParseError extends Error {
     constructor(message) {
@@ -2801,6 +2933,9 @@ class DeepReference {
         return new DeepReference(opt);
     }
 }
+/**
+ * used in editor mode. for delivery mode see `gatherDeepReferencesFromExperienceEntry`
+ */
 function gatherDeepReferencesFromTree(startingNode, dataSource, getEntityFromLink) {
     const deepReferences = [];
     treeVisit(startingNode, (node) => {
@@ -3071,7 +3206,9 @@ const INCOMING_EVENTS = {
     /** @deprecated will be removed when dropping backward compatibility for old DND */
     HoverComponent: 'hoverComponent',
     UpdatedEntity: 'updatedEntity',
+    /** @deprecated not needed after `patternResolution` was introduced. Will be removed in the next major version. */
     AssembliesAdded: 'assembliesAdded',
+    /** @deprecated not needed after `patternResolution` was introduced. Will be removed in the next major version. */
     AssembliesRegistered: 'assembliesRegistered',
     /** @deprecated will be removed when dropping backward compatibility for old DND */
     MouseMove: 'mouseMove',
@@ -3096,7 +3233,6 @@ var StudioCanvasMode$2;
     StudioCanvasMode["NONE"] = "none";
 })(StudioCanvasMode$2 || (StudioCanvasMode$2 = {}));
 const ASSEMBLY_NODE_TYPE = 'assembly';
-const ASSEMBLY_DEFAULT_CATEGORY = 'Assemblies';
 const ASSEMBLY_BLOCK_NODE_TYPE = 'assemblyBlock';
 const EMPTY_CONTAINER_SIZE = '80px';
 const HYPERLINK_DEFAULT_PATTERN = `/{locale}/{entry.fields.slug}/`;
@@ -3255,34 +3391,7 @@ const useBreakpoints = (breakpoints) => {
     return { resolveDesignValue };
 };
 
-// Note: During development, the hot reloading might empty this and it
-// stays empty leading to not rendering assemblies. Ideally, this is
-// integrated into the state machine to keep track of its state.
-const assembliesRegistry = new Map([]);
-const setAssemblies = (assemblies) => {
-    for (const assembly of assemblies) {
-        assembliesRegistry.set(assembly.sys.id, assembly);
-    }
-};
 const componentRegistry = new Map();
-const addComponentRegistration = (componentRegistration) => {
-    componentRegistry.set(componentRegistration.definition.id, componentRegistration);
-};
-const createAssemblyRegistration = ({ definitionId, definitionName, component, }) => {
-    const componentRegistration = componentRegistry.get(definitionId);
-    if (componentRegistration) {
-        return componentRegistration;
-    }
-    const definition = {
-        id: definitionId,
-        name: definitionName || 'Component',
-        variables: {},
-        children: true,
-        category: ASSEMBLY_DEFAULT_CATEGORY,
-    };
-    addComponentRegistration({ component, definition });
-    return componentRegistry.get(definitionId);
-};
 
 const useEditorStore = create((set, get) => ({
     dataSource: {},
@@ -3322,173 +3431,445 @@ const useEditorStore = create((set, get) => ({
     },
 }));
 
-var css_248z$8 = ":root{--cf-color-white:#fff;--cf-color-black:#000;--cf-color-gray100:#f7f9fa;--cf-color-gray400:#aec1cc;--cf-color-gray400-rgb:174,193,204;--cf-spacing-0:0rem;--cf-spacing-1:0.125rem;--cf-spacing-2:0.25rem;--cf-spacing-3:0.375rem;--cf-spacing-4:0.5rem;--cf-spacing-5:0.625rem;--cf-spacing-6:0.75rem;--cf-spacing-7:0.875rem;--cf-spacing-8:1rem;--cf-spacing-9:1.25rem;--cf-spacing-10:1.5rem;--cf-spacing-11:1.75rem;--cf-spacing-12:2rem;--cf-spacing-13:2.25rem;--cf-text-xs:0.75rem;--cf-text-sm:0.875rem;--cf-text-base:1rem;--cf-text-lg:1.125rem;--cf-text-xl:1.25rem;--cf-text-2xl:1.5rem;--cf-text-3xl:2rem;--cf-text-4xl:2.75rem;--cf-font-light:300;--cf-font-normal:400;--cf-font-medium:500;--cf-font-semibold:600;--cf-font-bold:700;--cf-font-extra-bold:800;--cf-font-black:900;--cf-border-radius-none:0px;--cf-border-radius-sm:0.125rem;--cf-border-radius:0.25rem;--cf-border-radius-md:0.375rem;--cf-border-radius-lg:0.5rem;--cf-border-radius-xl:0.75rem;--cf-border-radius-2xl:1rem;--cf-border-radius-3xl:1.5rem;--cf-border-radius-full:9999px;--cf-max-width-full:100%;--cf-button-bg:var(--cf-color-black);--cf-button-color:var(--cf-color-white);--cf-text-color:var(--cf-color-black)}*{box-sizing:border-box}";
-styleInject(css_248z$8);
-
-/** @deprecated will be removed when dropping backward compatibility for old DND */
-/**
- * These modes are ONLY intended to be internally used within the context of
- * editing an experience inside of Contentful Studio. i.e. these modes
- * intentionally do not include preview/delivery modes.
- */
-var StudioCanvasMode$1;
-(function (StudioCanvasMode) {
-    StudioCanvasMode["READ_ONLY"] = "readOnlyMode";
-    StudioCanvasMode["EDITOR"] = "editorMode";
-    StudioCanvasMode["NONE"] = "none";
-})(StudioCanvasMode$1 || (StudioCanvasMode$1 = {}));
-var PostMessageMethods$1;
-(function (PostMessageMethods) {
-    PostMessageMethods["REQUEST_ENTITIES"] = "REQUEST_ENTITIES";
-    PostMessageMethods["REQUESTED_ENTITIES"] = "REQUESTED_ENTITIES";
-})(PostMessageMethods$1 || (PostMessageMethods$1 = {}));
-
-var css_248z$7 = ".cf-button:empty:before{content:\"\";display:inline-block}";
-styleInject(css_248z$7);
-
-var css_248z$6 = ".cf-heading{white-space:pre-line}";
-styleInject(css_248z$6);
-
-var css_248z$5 = ".cf-richtext{white-space:pre-line}.cf-richtext>:first-child{margin-top:0}.cf-richtext>:last-child{margin-bottom:0}";
-styleInject(css_248z$5);
-
-var css_248z$4 = ".cf-text{white-space:pre-line}.cf-text-link .cf-text{margin:0}";
-styleInject(css_248z$4);
-
-var css_248z$3 = "div.cf-placeholder-wrapper{outline:2px solid rgba(var(--cf-color-gray400-rgb),.5);outline-offset:-2px;overflow:hidden;position:relative}img.cf-placeholder-image{background-color:var(--cf-color-gray100);height:100%;width:100%}svg.cf-placeholder-icon{height:var(--cf-text-3xl);left:50%;max-height:100%;max-width:100%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--cf-text-3xl)}svg.cf-placeholder-icon path{fill:var(--cf-color-gray400)}";
-styleInject(css_248z$3);
-
-/**
- * These modes are ONLY intended to be internally used within the context of
- * editing an experience inside of Contentful Studio. i.e. these modes
- * intentionally do not include preview/delivery modes.
- */
-var StudioCanvasMode;
-(function (StudioCanvasMode) {
-    StudioCanvasMode["READ_ONLY"] = "readOnlyMode";
-    StudioCanvasMode["EDITOR"] = "editorMode";
-    StudioCanvasMode["NONE"] = "none";
-})(StudioCanvasMode || (StudioCanvasMode = {}));
-const CONTENTFUL_COMPONENTS = {
-    section: {
-        id: 'contentful-section',
-        name: 'Section',
-    },
-    container: {
-        id: 'contentful-container',
-        name: 'Container',
-    },
-    columns: {
-        id: 'contentful-columns',
-        name: 'Columns',
-    },
-    singleColumn: {
-        id: 'contentful-single-column',
-        name: 'Column',
-    },
-    button: {
-        id: 'contentful-button',
-        name: 'Button',
-    },
-    heading: {
-        id: 'contentful-heading',
-        name: 'Heading',
-    },
-    image: {
-        id: 'contentful-image',
-        name: 'Image',
-    },
-    richText: {
-        id: 'contentful-richText',
-        name: 'Rich Text',
-    },
-    text: {
-        id: 'contentful-text',
-        name: 'Text',
-    },
-    divider: {
-        id: 'contentful-divider',
-        name: 'Divider',
-    },
-    carousel: {
-        id: 'contentful-carousel',
-        name: 'Carousel',
-    },
-};
-var PostMessageMethods;
-(function (PostMessageMethods) {
-    PostMessageMethods["REQUEST_ENTITIES"] = "REQUEST_ENTITIES";
-    PostMessageMethods["REQUESTED_ENTITIES"] = "REQUESTED_ENTITIES";
-})(PostMessageMethods || (PostMessageMethods = {}));
-new Set(Object.values(CONTENTFUL_COMPONENTS).map((component) => component.id));
-
-// If more than one version is supported, use z.union
-const SchemaVersions = z.literal('2023-09-28');
-// Keep deprecated versions here just for reference
-z.union([
-    z.literal('2023-08-23'),
-    z.literal('2023-07-26'),
-    z.literal('2023-06-27'),
-]);
-
-const DefinitionPropertyTypeSchema = z.enum([
-    'Text',
-    'RichText',
-    'Number',
-    'Date',
-    'Boolean',
-    'Location',
-    'Media',
-    'Object',
-    'Hyperlink',
-    'Array',
-    'Link',
-]);
-const DefinitionPropertyKeySchema = z
-    .string()
-    .regex(/^[a-zA-Z0-9-_]{1,32}$/, { message: 'Property needs to match: /^[a-zA-Z0-9-_]{1,32}$/' });
-const PrimitiveValueSchema = z.union([
-    z.string(),
-    z.boolean(),
-    z.number(),
-    z.record(z.any(), z.any()),
-    z.undefined(),
-]);
-const UsedComponentsSchema = z.array(z.object({
-    sys: z.object({
-        type: z.literal('Link'),
-        id: z.string(),
-        linkType: z.literal('Entry'),
-    }),
-}));
-const uuidKeySchema = z
-    .string()
-    .regex(/^[a-zA-Z0-9-_]{1,21}$/, { message: 'Does not match /^[a-zA-Z0-9-_]{1,21}$/' });
-const DataSourceSchema = z.record(uuidKeySchema, z.object({
-    sys: z.object({
-        type: z.literal('Link'),
-        id: z.string(),
-        linkType: z.enum(['Entry', 'Asset']),
-    }),
-}));
-const UnboundValuesSchema = z.record(uuidKeySchema, z.object({
-    value: PrimitiveValueSchema,
-}));
-/**
- * Property keys for imported components have a limit of 32 characters (to be implemented) while
- * property keys for patterns have a limit of 54 characters (<32-char-variable-name>_<21-char-nanoid-id>).
- * Because we cannot distinguish between the two in the componentTree, we will use the larger limit for both.
- */
-const propertyKeySchema = z
-    .string()
-    .regex(/^[a-zA-Z0-9-_]{1,54}$/, { message: 'Does not match /^[a-zA-Z0-9-_]{1,54}$/' });
-const ComponentTreeNodeIdSchema = z
-    .string()
-    .regex(/^[a-zA-Z0-9]{1,8}$/, { message: 'Does not match /^[a-zA-Z0-9]{1,8}$/' });
-const breakpointsRefinement = (value, ctx) => {
-    if (!value.length || value[0].query !== '*') {
-        ctx.addIssue({
-            code: z.ZodIssueCode.custom,
+function useEditorSubscriber(inMemoryEntitiesStore) {
+    const entityStore = inMemoryEntitiesStore((state) => state.entityStore);
+    const areEntitiesFetched = inMemoryEntitiesStore((state) => state.areEntitiesFetched);
+    const setEntitiesFetched = inMemoryEntitiesStore((state) => state.setEntitiesFetched);
+    const resetEntityStore = inMemoryEntitiesStore((state) => state.resetEntityStore);
+    const { updateTree, updateNodesByUpdatedEntity } = useTreeStore((state) => ({
+        updateTree: state.updateTree,
+        updateNodesByUpdatedEntity: state.updateNodesByUpdatedEntity,
+    }));
+    const unboundValues = useEditorStore((state) => state.unboundValues);
+    const dataSource = useEditorStore((state) => state.dataSource);
+    const setLocale = useEditorStore((state) => state.setLocale);
+    const setUnboundValues = useEditorStore((state) => state.setUnboundValues);
+    const setDataSource = useEditorStore((state) => state.setDataSource);
+    const reloadApp = () => {
+        sendMessage(OUTGOING_EVENTS.CanvasReload, undefined);
+        // Wait a moment to ensure that the message was sent
+        setTimeout(() => {
+            // Received a hot reload message from webpack dev server -> reload the canvas
+            window.location.reload();
+        }, 50);
+    };
+    useEffect(() => {
+        sendMessage(OUTGOING_EVENTS.RequestComponentTreeUpdate, undefined);
+    }, []);
+    /**
+     * Fills up entityStore with entities from newDataSource and from the tree.
+     * Also manages "entity status" variables (areEntitiesFetched, isFetchingEntities)
+     */
+    const fetchMissingEntities = useCallback(async (entityStore, newDataSource, tree) => {
+        // if we realize that there's nothing missing and nothing to fill-fetch before we do any async call,
+        // then we can simply return and not lock the EntityStore at all.
+        const startFetching = () => {
+            setEntitiesFetched(false);
+        };
+        const endFetching = () => {
+            setEntitiesFetched(true);
+        };
+        // Prepare L1 entities and deepReferences
+        const entityLinksL1 = Object.values(newDataSource);
+        /**
+         * Checks only for _missing_ L1 entities
+         * WARNING: Does NOT check for entity staleness/versions. If an entity is stale, it will NOT be considered missing.
+         *          If ExperienceBuilder wants to update stale entities, it should post  `▼UPDATED_ENTITY` message to SDK.
+         */
+        const isMissingL1Entities = (entityLinks) => {
+            const { missingAssetIds, missingEntryIds } = entityStore.getMissingEntityIds(entityLinks);
+            return Boolean(missingAssetIds.length) || Boolean(missingEntryIds.length);
+        };
+        /**
+         * PRECONDITION: all L1 entities are fetched
+         */
+        const isMissingL2Entities = (deepReferences) => {
+            const referentLinks = deepReferences
+                .map((deepReference) => deepReference.extractReferent(entityStore))
+                .filter(isLink$1);
+            const { missingAssetIds, missingEntryIds } = entityStore.getMissingEntityIds(referentLinks);
+            return Boolean(missingAssetIds.length) || Boolean(missingEntryIds.length);
+        };
+        /**
+         * POST_CONDITION: entityStore is has all L1 entities (aka headEntities)
+         */
+        const fillupL1 = async ({ entityLinksL1, }) => {
+            const { missingAssetIds, missingEntryIds } = entityStore.getMissingEntityIds(entityLinksL1);
+            await entityStore.fetchEntities({ missingAssetIds, missingEntryIds });
+        };
+        /**
+         * PRECONDITION: all L1 entites are fetched
+         */
+        const fillupL2 = async ({ deepReferences }) => {
+            const referentLinks = deepReferences
+                .map((deepReference) => deepReference.extractReferent(entityStore))
+                .filter(isLink$1);
+            const { missingAssetIds, missingEntryIds } = entityStore.getMissingEntityIds(referentLinks);
+            await entityStore.fetchEntities({ missingAssetIds, missingEntryIds });
+        };
+        try {
+            if (isMissingL1Entities(entityLinksL1)) {
+                startFetching();
+                await fillupL1({ entityLinksL1 });
+            }
+            const deepReferences = gatherDeepReferencesFromTree(tree.root, newDataSource, entityStore.getEntityFromLink.bind(entityStore));
+            if (isMissingL2Entities(deepReferences)) {
+                startFetching();
+                await fillupL2({ deepReferences });
+            }
+        }
+        catch (error) {
+            debug$1.error('[experiences-visual-editor-react::useEditorSubscriber] Failed fetching entities', { error });
+            throw error; // TODO: The original catch didn't let's rethrow; for the moment throw to see if we have any errors
+        }
+        finally {
+            endFetching();
+        }
+    }, [setEntitiesFetched]);
+    useEffect(() => {
+        const onMessage = async (event) => {
+            let reason;
+            if ((reason = doesMismatchMessageSchema(event))) {
+                if (event.origin.startsWith('http://localhost') &&
+                    `${event.data}`.includes('webpackHotUpdate')) {
+                    reloadApp();
+                }
+                else {
+                    debug$1.warn(`[experiences-visual-editor-react::onMessage] Ignoring alien incoming message from origin [${event.origin}], due to: [${reason}]`, event);
+                }
+                return;
+            }
+            const eventData = tryParseMessage(event);
+            debug$1.debug(`[experiences-visual-editor-react::onMessage] Received message [${eventData.eventType}]`, eventData);
+            if (eventData.eventType === PostMessageMethods$2.REQUESTED_ENTITIES) {
+                // Expected message: This message is handled in the EntityStore to store fetched entities
+                return;
+            }
+            switch (eventData.eventType) {
+                case INCOMING_EVENTS.ExperienceUpdated: {
+                    const { tree, locale, changedNode, changedValueType } = eventData.payload;
+                    let newEntityStore = entityStore;
+                    if (entityStore.locale !== locale) {
+                        newEntityStore = new EditorModeEntityStore({ locale, entities: [] });
+                        setLocale(locale);
+                        resetEntityStore(newEntityStore);
+                    }
+                    // Below are mutually exclusive cases
+                    if (changedNode) {
+                        /**
+                         * On single node updates, we want to skip the process of getting the data (datasource and unbound values)
+                         * from tree. Since we know the updated node, we can skip that recursion everytime the tree updates and
+                         * just update the relevant data we need from the relevant node.
+                         *
+                         * We still update the tree here so we don't have a stale "tree"
+                         */
+                        if (changedValueType === 'BoundValue') {
+                            const newDataSource = { ...dataSource, ...changedNode.data.dataSource };
+                            setDataSource(newDataSource);
+                            await fetchMissingEntities(newEntityStore, newDataSource, tree);
+                        }
+                        else if (changedValueType === 'UnboundValue') {
+                            setUnboundValues({
+                                ...unboundValues,
+                                ...changedNode.data.unboundValues,
+                            });
+                        }
+                    }
+                    else {
+                        const { dataSource, unboundValues } = getDataFromTree(tree);
+                        setDataSource(dataSource);
+                        setUnboundValues(unboundValues);
+                        await fetchMissingEntities(newEntityStore, dataSource, tree);
+                    }
+                    // Update the tree when all necessary data is fetched and ready for rendering.
+                    updateTree(tree);
+                    break;
+                }
+                case INCOMING_EVENTS.AssembliesRegistered: {
+                    // Not necessary anymore since `patternResolution` which was introduced in 2024.
+                    break;
+                }
+                case INCOMING_EVENTS.AssembliesAdded: {
+                    // Not necessary anymore since `patternResolution` which was introduced in 2024.
+                    break;
+                }
+                case INCOMING_EVENTS.UpdatedEntity: {
+                    const { entity: updatedEntity, shouldRerender } = eventData.payload;
+                    if (updatedEntity) {
+                        const storedEntity = entityStore.entities.find((entity) => entity.sys.id === updatedEntity.sys.id);
+                        const didEntityChange = storedEntity?.sys.version !== updatedEntity.sys.version;
+                        entityStore.updateEntity(updatedEntity);
+                        // We traverse the whole tree, so this is a opt-in feature to only use it when required.
+                        if (shouldRerender && didEntityChange) {
+                            updateNodesByUpdatedEntity(updatedEntity.sys.id);
+                        }
+                    }
+                    break;
+                }
+                case INCOMING_EVENTS.RequestEditorMode: {
+                    break;
+                }
+                default: {
+                    const knownEvents = Object.values(INCOMING_EVENTS);
+                    const isDeprecatedMessage = knownEvents.includes(eventData.eventType);
+                    if (!isDeprecatedMessage) {
+                        debug$1.error(`[experiences-visual-editor-react::onMessage] Logic error, unsupported eventType: [${eventData.eventType}]`);
+                    }
+                }
+            }
+        };
+        window.addEventListener('message', onMessage);
+        return () => {
+            window.removeEventListener('message', onMessage);
+        };
+    }, [
+        entityStore,
+        setDataSource,
+        setLocale,
+        dataSource,
+        areEntitiesFetched,
+        fetchMissingEntities,
+        setUnboundValues,
+        unboundValues,
+        updateTree,
+        updateNodesByUpdatedEntity,
+        resetEntityStore,
+    ]);
+}
+
+const CircularDependencyErrorPlaceholder = ({ wrappingPatternIds, ...props }) => {
+    return (React.createElement("div", { ...props, "data-cf-node-error": "circular-pattern-dependency", style: {
+            border: '1px solid red',
+            background: 'rgba(255, 0, 0, 0.1)',
+            padding: '1rem 1rem 0 1rem',
+            width: '100%',
+            height: '100%',
+        } },
+        "Circular usage of patterns detected:",
+        React.createElement("ul", null, Array.from(wrappingPatternIds).map((patternId) => {
+            const entryLink = { sys: { type: 'Link', linkType: 'Entry', id: patternId } };
+            const entry = inMemoryEntities.maybeResolveLink(entryLink);
+            const entryTitle = entry?.fields?.title;
+            const text = entryTitle ? `${entryTitle} (${patternId})` : patternId;
+            return React.createElement("li", { key: patternId }, text);
+        }))));
+};
+
+class ImportedComponentError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = 'ImportedComponentError';
+    }
+}
+class ExperienceSDKError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = 'ExperienceSDKError';
+    }
+}
+class ImportedComponentErrorBoundary extends React.Component {
+    componentDidCatch(error, _errorInfo) {
+        if (error.name === 'ImportedComponentError' || error.name === 'ExperienceSDKError') {
+            // This error was already handled by a nested error boundary and should be passed upwards
+            // We have to do this as we wrap every component on every layer with this error boundary and
+            // thus an error deep in the tree bubbles through many layers of error boundaries.
+            throw error;
+        }
+        // Differentiate between custom and SDK-provided components for error tracking
+        const ErrorClass = isContentfulComponent(this.props.componentId)
+            ? ExperienceSDKError
+            : ImportedComponentError;
+        const err = new ErrorClass(error.message);
+        err.stack = error.stack;
+        throw err;
+    }
+    render() {
+        return this.props.children;
+    }
+}
+
+const MissingComponentPlaceholder = ({ blockId }) => {
+    return (React.createElement("div", { style: {
+            border: '1px solid red',
+            width: '100%',
+            height: '100%',
+        } },
+        "Missing component '",
+        blockId,
+        "'"));
+};
+
+var css_248z$a = ".EditorBlock-module_emptySlot__za-Bi {\n  min-height: 80px;\n  min-width: 80px;\n}\n";
+var styles$1 = {"emptySlot":"EditorBlock-module_emptySlot__za-Bi"};
+styleInject(css_248z$a);
+
+var css_248z$8 = ":root{--cf-color-white:#fff;--cf-color-black:#000;--cf-color-gray100:#f7f9fa;--cf-color-gray400:#aec1cc;--cf-color-gray400-rgb:174,193,204;--cf-spacing-0:0rem;--cf-spacing-1:0.125rem;--cf-spacing-2:0.25rem;--cf-spacing-3:0.375rem;--cf-spacing-4:0.5rem;--cf-spacing-5:0.625rem;--cf-spacing-6:0.75rem;--cf-spacing-7:0.875rem;--cf-spacing-8:1rem;--cf-spacing-9:1.25rem;--cf-spacing-10:1.5rem;--cf-spacing-11:1.75rem;--cf-spacing-12:2rem;--cf-spacing-13:2.25rem;--cf-text-xs:0.75rem;--cf-text-sm:0.875rem;--cf-text-base:1rem;--cf-text-lg:1.125rem;--cf-text-xl:1.25rem;--cf-text-2xl:1.5rem;--cf-text-3xl:2rem;--cf-text-4xl:2.75rem;--cf-font-light:300;--cf-font-normal:400;--cf-font-medium:500;--cf-font-semibold:600;--cf-font-bold:700;--cf-font-extra-bold:800;--cf-font-black:900;--cf-border-radius-none:0px;--cf-border-radius-sm:0.125rem;--cf-border-radius:0.25rem;--cf-border-radius-md:0.375rem;--cf-border-radius-lg:0.5rem;--cf-border-radius-xl:0.75rem;--cf-border-radius-2xl:1rem;--cf-border-radius-3xl:1.5rem;--cf-border-radius-full:9999px;--cf-max-width-full:100%;--cf-button-bg:var(--cf-color-black);--cf-button-color:var(--cf-color-white);--cf-text-color:var(--cf-color-black)}*{box-sizing:border-box}";
+styleInject(css_248z$8);
+
+/** @deprecated will be removed when dropping backward compatibility for old DND */
+/**
+ * These modes are ONLY intended to be internally used within the context of
+ * editing an experience inside of Contentful Studio. i.e. these modes
+ * intentionally do not include preview/delivery modes.
+ */
+var StudioCanvasMode$1;
+(function (StudioCanvasMode) {
+    StudioCanvasMode["READ_ONLY"] = "readOnlyMode";
+    StudioCanvasMode["EDITOR"] = "editorMode";
+    StudioCanvasMode["NONE"] = "none";
+})(StudioCanvasMode$1 || (StudioCanvasMode$1 = {}));
+var PostMessageMethods$1;
+(function (PostMessageMethods) {
+    PostMessageMethods["REQUEST_ENTITIES"] = "REQUEST_ENTITIES";
+    PostMessageMethods["REQUESTED_ENTITIES"] = "REQUESTED_ENTITIES";
+})(PostMessageMethods$1 || (PostMessageMethods$1 = {}));
+
+var css_248z$7 = ".cf-button:empty:before{content:\"\";display:inline-block}";
+styleInject(css_248z$7);
+
+var css_248z$6 = ".cf-heading{white-space:pre-line}";
+styleInject(css_248z$6);
+
+var css_248z$5 = ".cf-richtext{white-space:pre-line}.cf-richtext>:first-child{margin-top:0}.cf-richtext>:last-child{margin-bottom:0}";
+styleInject(css_248z$5);
+
+var css_248z$4 = ".cf-text{white-space:pre-line}.cf-text-link .cf-text{margin:0}";
+styleInject(css_248z$4);
+
+var css_248z$3 = "div.cf-placeholder-wrapper{outline:2px solid rgba(var(--cf-color-gray400-rgb),.5);outline-offset:-2px;overflow:hidden;position:relative}img.cf-placeholder-image{background-color:var(--cf-color-gray100);height:100%;width:100%}svg.cf-placeholder-icon{height:var(--cf-text-3xl);left:50%;max-height:100%;max-width:100%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--cf-text-3xl)}svg.cf-placeholder-icon path{fill:var(--cf-color-gray400)}";
+styleInject(css_248z$3);
+
+/**
+ * These modes are ONLY intended to be internally used within the context of
+ * editing an experience inside of Contentful Studio. i.e. these modes
+ * intentionally do not include preview/delivery modes.
+ */
+var StudioCanvasMode;
+(function (StudioCanvasMode) {
+    StudioCanvasMode["READ_ONLY"] = "readOnlyMode";
+    StudioCanvasMode["EDITOR"] = "editorMode";
+    StudioCanvasMode["NONE"] = "none";
+})(StudioCanvasMode || (StudioCanvasMode = {}));
+const CONTENTFUL_COMPONENTS = {
+    section: {
+        id: 'contentful-section',
+        name: 'Section',
+    },
+    container: {
+        id: 'contentful-container',
+        name: 'Container',
+    },
+    columns: {
+        id: 'contentful-columns',
+        name: 'Columns',
+    },
+    singleColumn: {
+        id: 'contentful-single-column',
+        name: 'Column',
+    },
+    button: {
+        id: 'contentful-button',
+        name: 'Button',
+    },
+    heading: {
+        id: 'contentful-heading',
+        name: 'Heading',
+    },
+    image: {
+        id: 'contentful-image',
+        name: 'Image',
+    },
+    richText: {
+        id: 'contentful-richText',
+        name: 'Rich Text',
+    },
+    text: {
+        id: 'contentful-text',
+        name: 'Text',
+    },
+    divider: {
+        id: 'contentful-divider',
+        name: 'Divider',
+    },
+    carousel: {
+        id: 'contentful-carousel',
+        name: 'Carousel',
+    },
+};
+var PostMessageMethods;
+(function (PostMessageMethods) {
+    PostMessageMethods["REQUEST_ENTITIES"] = "REQUEST_ENTITIES";
+    PostMessageMethods["REQUESTED_ENTITIES"] = "REQUESTED_ENTITIES";
+})(PostMessageMethods || (PostMessageMethods = {}));
+new Set(Object.values(CONTENTFUL_COMPONENTS).map((component) => component.id));
+
+// If more than one version is supported, use z.union
+const SchemaVersions = z.literal('2023-09-28');
+// Keep deprecated versions here just for reference
+z.union([
+    z.literal('2023-08-23'),
+    z.literal('2023-07-26'),
+    z.literal('2023-06-27'),
+]);
+
+const DefinitionPropertyTypeSchema = z.enum([
+    'Text',
+    'RichText',
+    'Number',
+    'Date',
+    'Boolean',
+    'Location',
+    'Media',
+    'Object',
+    'Hyperlink',
+    'Array',
+    'Link',
+]);
+const DefinitionPropertyKeySchema = z
+    .string()
+    .regex(/^[a-zA-Z0-9-_]{1,32}$/, { message: 'Property needs to match: /^[a-zA-Z0-9-_]{1,32}$/' });
+const PrimitiveValueSchema = z.union([
+    z.string(),
+    z.boolean(),
+    z.number(),
+    z.record(z.any(), z.any()),
+    z.undefined(),
+]);
+const UsedComponentsSchema = z.array(z.object({
+    sys: z.object({
+        type: z.literal('Link'),
+        id: z.string(),
+        linkType: z.literal('Entry'),
+    }),
+}));
+const uuidKeySchema = z
+    .string()
+    .regex(/^[a-zA-Z0-9-_]{1,21}$/, { message: 'Does not match /^[a-zA-Z0-9-_]{1,21}$/' });
+const DataSourceSchema = z.record(uuidKeySchema, z.object({
+    sys: z.object({
+        type: z.literal('Link'),
+        id: z.string(),
+        linkType: z.enum(['Entry', 'Asset']),
+    }),
+}));
+const UnboundValuesSchema = z.record(uuidKeySchema, z.object({
+    value: PrimitiveValueSchema,
+}));
+/**
+ * Property keys for imported components have a limit of 32 characters (to be implemented) while
+ * property keys for patterns have a limit of 54 characters (<32-char-variable-name>_<21-char-nanoid-id>).
+ * Because we cannot distinguish between the two in the componentTree, we will use the larger limit for both.
+ */
+const propertyKeySchema = z
+    .string()
+    .regex(/^[a-zA-Z0-9-_]{1,54}$/, { message: 'Does not match /^[a-zA-Z0-9-_]{1,54}$/' });
+const ComponentTreeNodeIdSchema = z
+    .string()
+    .regex(/^[a-zA-Z0-9]{1,8}$/, { message: 'Does not match /^[a-zA-Z0-9]{1,8}$/' });
+const breakpointsRefinement = (value, ctx) => {
+    if (!value.length || value[0].query !== '*') {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
             message: `The first breakpoint should include the following attributes: { "query": "*" }`,
         });
         return;
@@ -3615,7 +3996,7 @@ const BreakpointSchema = z
     id: propertyKeySchema,
     // Can be replace with z.templateLiteral when upgrading to zod v4
     query: z.string().refine((s) => BREAKPOINT_QUERY_REGEX.test(s)),
-    previewSize: z.string(),
+    previewSize: z.string().optional(),
     displayName: z.string(),
     displayIcon: z.enum(['desktop', 'tablet', 'mobile']).optional(),
 })
@@ -3652,19 +4033,6 @@ const ComponentVariableSchema = z.object({
 });
 const ComponentTreeNodeSchema = BaseComponentTreeNodeSchema.extend({
     children: z.lazy(() => ComponentTreeNodeSchema.array()),
-}).superRefine(({ id, prebindingId, parameters }, ctx) => {
-    if (prebindingId && !parameters) {
-        ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: `Found "prebindingId" but no "parameters" for node with id: "${id}"`,
-        });
-    }
-    if (parameters && !prebindingId) {
-        ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: `Found "parameters" but no "prebindingId" for node with id: "${id}"`,
-        });
-    }
 });
 const ComponentTreeSchema = z
     .object({
@@ -3682,6 +4050,25 @@ z.object({
     usedComponents: localeWrapper(UsedComponentsSchema).optional(),
 });
 
+function treeVisit$1(initialNode, onNode) {
+    const _treeVisit = (currentNode) => {
+        const children = [...currentNode.children];
+        onNode(currentNode);
+        for (const child of children) {
+            _treeVisit(child);
+        }
+    };
+    if (Array.isArray(initialNode)) {
+        for (const node of initialNode) {
+            _treeVisit(node);
+        }
+    }
+    else {
+        _treeVisit(initialNode);
+    }
+}
+
+const MAX_ALLOWED_PATHS = 200;
 const THUMBNAIL_IDS = [
     'columns',
     'columnsPlusRight',
@@ -3712,7 +4099,17 @@ const THUMBNAIL_IDS = [
 const VariableMappingSchema = z.object({
     parameterId: propertyKeySchema,
     type: z.literal('ContentTypeMapping'),
-    pathsByContentType: z.record(z.string(), z.object({ path: z.string() })),
+    pathsByContentType: z
+        .record(z.string(), z.object({ path: z.string() }))
+        .superRefine((paths, ctx) => {
+        const variableId = ctx.path[ctx.path.length - 2];
+        if (Object.keys(paths).length > MAX_ALLOWED_PATHS) {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: `Too many paths defined for variable mapping with id "${variableId}", maximum allowed is ${MAX_ALLOWED_PATHS}`,
+            });
+        }
+    }),
 });
 const PassToNodeSchema = z
     .object({
@@ -3736,7 +4133,10 @@ const ParameterDefinitionSchema = z.object({
     })
         .optional(),
     contentTypes: z.array(z.string()).min(1),
-    passToNodes: z.array(PassToNodeSchema).optional(),
+    passToNodes: z
+        .array(PassToNodeSchema)
+        .max(1, 'At most one "passToNodes" element is allowed per parameter definition.')
+        .optional(), // we might change this to be empty array for native parameter definitions, that's why we don't use .length(1)
 });
 const ParameterDefinitionsSchema = z.record(propertyKeySchema, ParameterDefinitionSchema);
 const VariableMappingsSchema = z.record(propertyKeySchema, VariableMappingSchema);
@@ -3757,14 +4157,108 @@ const ComponentSettingsSchema = z
     category: z.string().max(50, 'Category must contain at most 50 characters').optional(),
     prebindingDefinitions: z.array(PrebindingDefinitionSchema).length(1).optional(),
 })
-    .strict();
-z.object({
+    .strict()
+    .superRefine((componentSettings, ctx) => {
+    const { variableDefinitions, prebindingDefinitions } = componentSettings;
+    if (!prebindingDefinitions || prebindingDefinitions.length === 0) {
+        return;
+    }
+    const { parameterDefinitions, variableMappings, allowedVariableOverrides } = prebindingDefinitions[0];
+    validateAtMostOneNativeParameterDefinition(parameterDefinitions, ctx);
+    validateNoOverlapBetweenMappingAndOverrides(variableMappings, allowedVariableOverrides, ctx);
+    validateMappingsAgainstVariableDefinitions(variableMappings, allowedVariableOverrides, variableDefinitions, ctx);
+    validateMappingsAgainstParameterDefinitions(variableMappings, parameterDefinitions, ctx);
+});
+z
+    .object({
     componentTree: localeWrapper(ComponentTreeSchema),
     dataSource: localeWrapper(DataSourceSchema),
     unboundValues: localeWrapper(UnboundValuesSchema),
     usedComponents: localeWrapper(UsedComponentsSchema).optional(),
     componentSettings: localeWrapper(ComponentSettingsSchema),
+})
+    .superRefine((patternFields, ctx) => {
+    const { componentTree, componentSettings } = patternFields;
+    // values at this point are wrapped under locale code
+    const nonLocalisedComponentTree = Object.values(componentTree)[0];
+    const nonLocalisedComponentSettings = Object.values(componentSettings)[0];
+    if (!nonLocalisedComponentSettings || !nonLocalisedComponentTree) {
+        return;
+    }
+    validatePassToNodes(nonLocalisedComponentTree.children || [], nonLocalisedComponentSettings || {}, ctx);
 });
+const validateAtMostOneNativeParameterDefinition = (parameterDefinitions, ctx) => {
+    const nativeParamDefinitions = Object.values(parameterDefinitions).filter((paramDefinition) => !(paramDefinition.passToNodes && paramDefinition.passToNodes.length > 0));
+    if (nativeParamDefinitions.length > 1) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `Only one native parameter definition (parameter definition without passToNodes) is allowed per prebinding definition.`,
+        });
+    }
+};
+const validateNoOverlapBetweenMappingAndOverrides = (variableMappings, allowedVariableOverrides, ctx) => {
+    const variableMappingKeys = Object.keys(variableMappings || {});
+    const overridesSet = new Set(allowedVariableOverrides || []);
+    const overlap = variableMappingKeys.filter((key) => overridesSet.has(key));
+    if (overlap.length > 0) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `Found both variable mapping and allowed override for the following keys: ${overlap.map((key) => `"${key}"`).join(', ')}.`,
+        });
+    }
+};
+const validateMappingsAgainstVariableDefinitions = (variableMappings, allowedVariableOverrides, variableDefinitions, ctx) => {
+    const nonDesignVariableDefinitionKeys = Object.entries(variableDefinitions)
+        .filter(([_, def]) => def.group !== 'style')
+        .map(([key]) => key);
+    const variableMappingKeys = Object.keys(variableMappings || {});
+    const allKeys = [...variableMappingKeys, ...(allowedVariableOverrides || [])];
+    const invalidMappings = allKeys.filter((key) => !nonDesignVariableDefinitionKeys.includes(key));
+    if (invalidMappings.length > 0) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `The following variable mappings or overrides are missing from the variable definitions: ${invalidMappings.map((key) => `"${key}"`).join(', ')}.`,
+        });
+    }
+};
+const validateMappingsAgainstParameterDefinitions = (variableMappings, parameterDefinitions, ctx) => {
+    const parameterDefinitionKeys = Object.keys(parameterDefinitions || {});
+    for (const [mappingKey, mappingValue] of Object.entries(variableMappings || {})) {
+        if (!parameterDefinitionKeys.includes(mappingValue.parameterId)) {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: `The variable mapping with id "${mappingKey}" references a non-existing parameterId "${mappingValue.parameterId}".`,
+            });
+        }
+    }
+};
+const validatePassToNodes = (rootChildren, componentSettings, ctx) => {
+    if (!componentSettings.prebindingDefinitions ||
+        componentSettings.prebindingDefinitions.length === 0) {
+        return;
+    }
+    const { parameterDefinitions } = componentSettings.prebindingDefinitions[0];
+    let nodeIds = new Set();
+    for (const paramDef of Object.values(parameterDefinitions || {})) {
+        paramDef.passToNodes?.forEach((n) => nodeIds.add(n.nodeId));
+    }
+    treeVisit$1(rootChildren, (node) => {
+        if (!node.id)
+            return;
+        if (nodeIds.has(node.id)) {
+            nodeIds.delete(node.id);
+        }
+    });
+    if (nodeIds.size > 0) {
+        const stringifiedNodeIds = Array.from(nodeIds)
+            .map((id) => `"${id}"`)
+            .join(', ');
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `The following node IDs referenced in passToNodes are not present in the component tree: ${stringifiedNodeIds}.`,
+        });
+    }
+};
 
 z
     .object({
@@ -4062,707 +4556,408 @@ const parseDeepPath = (deepPathCandidate) => {
     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) {
-                debug.warn(`[experiences-core::EntityStoreBase] 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(`[experiences-core::EntityStoreBase] 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
-            debug.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) {
-            debug.warn(`[experiences-core::EntityStoreBase] Experience references unresolved entity: ${JSON.stringify(link)}`);
-            return;
-        }
-        return resolvedEntity;
-    }
-    getAssetById(assetId) {
-        const asset = this.assetMap.get(assetId);
-        if (!asset) {
-            debug.warn(`[experiences-core::EntityStoreBase] Asset with ID "${assetId}" is not found in the store`);
-            return;
-        }
-        return asset;
-    }
-    getEntryById(entryId) {
-        const entry = this.entryMap.get(entryId);
-        if (!entry) {
-            debug.warn(`[experiences-core::EntityStoreBase] 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(cloneDeep(entity)));
-        }
-        else if (isEntry(entity)) {
-            // cloned and frozen
-            this.entryMap.set(entity.sys.id, deepFreeze(cloneDeep(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
-            debug.warn(`[experiences-core::EntityStoreBase] 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
-            debug.warn(`[experiences-core::EntityStoreBase] Entry "${id}" is not in the store`);
-            return;
-        }
-        return resolved[0];
+    // With 3+ chunks we can now check for deep path correctness
+    const [initialChunk, ...fieldChunks] = chunks;
+    if (!isValidInitialChunk(initialChunk)) {
+        return null;
     }
-    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;
+    if (!fieldChunks.every(isValidFieldChunk)) {
+        return null;
     }
-    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;
+    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];
         }
-        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) {
-            if (reason) {
-                debug.log(`[experiences-core::EntityStoreBase] Deep path wasn't resolved till leaf node, falling back to undefined, because: ${reason}`);
-            }
-            return;
+        else if (isSegmentBeginningOfChunk(segment)) {
+            chunks.push(currentChunk);
+            currentChunk = [segment];
         }
-        const [leafEntity] = resolvedFieldset[resolvedFieldset.length - 1];
-        return leafEntity;
-    }
-    getEntity(type, id) {
-        if (type === 'Asset') {
-            return this.assetMap.get(id);
+        else {
+            currentChunk.push(segment);
         }
-        return this.entryMap.get(id);
     }
-    toJSON() {
-        return {
-            entryMap: Object.fromEntries(this.entryMap),
-            assetMap: Object.fromEntries(this.assetMap),
-            locale: this.locale,
-        };
+    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');
+};
 
-class UninitializedEntityStore extends EntityStoreBase {
-    constructor() {
-        super({ entities: [], locale: 'uninitialized-locale-in-uninitialized-entity-store' });
+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);
 }
 
-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-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}";
-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{position:relative}.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 assemblyStyle = { display: 'contents' };
-const Assembly = (props) => {
-    // 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 });
-};
-
-function useEditorSubscriber(inMemoryEntitiesStore) {
-    const entityStore = inMemoryEntitiesStore((state) => state.entityStore);
-    const areEntitiesFetched = inMemoryEntitiesStore((state) => state.areEntitiesFetched);
-    const setEntitiesFetched = inMemoryEntitiesStore((state) => state.setEntitiesFetched);
-    const resetEntityStore = inMemoryEntitiesStore((state) => state.resetEntityStore);
-    const { updateTree, updateNodesByUpdatedEntity } = useTreeStore((state) => ({
-        updateTree: state.updateTree,
-        updateNodesByUpdatedEntity: state.updateNodesByUpdatedEntity,
-    }));
-    const unboundValues = useEditorStore((state) => state.unboundValues);
-    const dataSource = useEditorStore((state) => state.dataSource);
-    const setLocale = useEditorStore((state) => state.setLocale);
-    const setUnboundValues = useEditorStore((state) => state.setUnboundValues);
-    const setDataSource = useEditorStore((state) => state.setDataSource);
-    const reloadApp = () => {
-        sendMessage(OUTGOING_EVENTS.CanvasReload, undefined);
-        // Wait a moment to ensure that the message was sent
-        setTimeout(() => {
-            // Received a hot reload message from webpack dev server -> reload the canvas
-            window.location.reload();
-        }, 50);
-    };
-    useEffect(() => {
-        sendMessage(OUTGOING_EVENTS.RequestComponentTreeUpdate, undefined);
-    }, []);
+/**
+ * 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) {
+                debug.warn(`[experiences-core::EntityStoreBase] 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(`[experiences-core::EntityStoreBase] Unexpected object when resolving entity: ${JSON.stringify(linkOrEntryOrAsset)}`);
+        }
+        return entity;
+    }
     /**
-     * Fills up entityStore with entities from newDataSource and from the tree.
-     * Also manages "entity status" variables (areEntitiesFetched, isFetchingEntities)
+     * @deprecated in the base class this should be simply an abstract method
+     * @param entityLink
+     * @param path
+     * @returns
      */
-    const fetchMissingEntities = useCallback(async (entityStore, newDataSource, tree) => {
-        // if we realize that there's nothing missing and nothing to fill-fetch before we do any async call,
-        // then we can simply return and not lock the EntityStore at all.
-        const startFetching = () => {
-            setEntitiesFetched(false);
-        };
-        const endFetching = () => {
-            setEntitiesFetched(true);
-        };
-        // Prepare L1 entities and deepReferences
-        const entityLinksL1 = [
-            ...Object.values(newDataSource),
-            ...assembliesRegistry.values(), // we count assemblies here as "L1 entities", for convenience. Even though they're not headEntities.
-        ];
-        /**
-         * Checks only for _missing_ L1 entities
-         * WARNING: Does NOT check for entity staleness/versions. If an entity is stale, it will NOT be considered missing.
-         *          If ExperienceBuilder wants to update stale entities, it should post  `▼UPDATED_ENTITY` message to SDK.
-         */
-        const isMissingL1Entities = (entityLinks) => {
-            const { missingAssetIds, missingEntryIds } = entityStore.getMissingEntityIds(entityLinks);
-            return Boolean(missingAssetIds.length) || Boolean(missingEntryIds.length);
-        };
-        /**
-         * PRECONDITION: all L1 entities are fetched
-         */
-        const isMissingL2Entities = (deepReferences) => {
-            const referentLinks = deepReferences
-                .map((deepReference) => deepReference.extractReferent(entityStore))
-                .filter(isLink$1);
-            const { missingAssetIds, missingEntryIds } = entityStore.getMissingEntityIds(referentLinks);
-            return Boolean(missingAssetIds.length) || Boolean(missingEntryIds.length);
-        };
-        /**
-         * POST_CONDITION: entityStore is has all L1 entities (aka headEntities)
-         */
-        const fillupL1 = async ({ entityLinksL1, }) => {
-            const { missingAssetIds, missingEntryIds } = entityStore.getMissingEntityIds(entityLinksL1);
-            await entityStore.fetchEntities({ missingAssetIds, missingEntryIds });
-        };
-        /**
-         * PRECONDITION: all L1 entites are fetched
-         */
-        const fillupL2 = async ({ deepReferences }) => {
-            const referentLinks = deepReferences
-                .map((deepReference) => deepReference.extractReferent(entityStore))
-                .filter(isLink$1);
-            const { missingAssetIds, missingEntryIds } = entityStore.getMissingEntityIds(referentLinks);
-            await entityStore.fetchEntities({ missingAssetIds, missingEntryIds });
-        };
-        try {
-            if (isMissingL1Entities(entityLinksL1)) {
-                startFetching();
-                await fillupL1({ entityLinksL1 });
-            }
-            const deepReferences = gatherDeepReferencesFromTree(tree.root, newDataSource, entityStore.getEntityFromLink.bind(entityStore));
-            if (isMissingL2Entities(deepReferences)) {
-                startFetching();
-                await fillupL2({ deepReferences });
-            }
+    getValue(entityLink, path) {
+        const entity = this.getEntity(entityLink.sys.linkType, entityLink.sys.id);
+        if (!entity) {
+            // TODO: move to `debug` utils once it is extracted
+            debug.warn(`Unresolved entity reference: ${entityLink.sys.linkType} with ID ${entityLink.sys.id}`);
+            return;
         }
-        catch (error) {
-            debug$1.error('[experiences-visual-editor-react::useEditorSubscriber] Failed fetching entities', { error });
-            throw error; // TODO: The original catch didn't let's rethrow; for the moment throw to see if we have any errors
+        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) {
+            debug.warn(`[experiences-core::EntityStoreBase] Experience references unresolved entity: ${JSON.stringify(link)}`);
+            return;
         }
-        finally {
-            endFetching();
+        return resolvedEntity;
+    }
+    getAssetById(assetId) {
+        const asset = this.assetMap.get(assetId);
+        if (!asset) {
+            debug.warn(`[experiences-core::EntityStoreBase] Asset with ID "${assetId}" is not found in the store`);
+            return;
         }
-    }, [setEntitiesFetched /* setFetchingEntities, assembliesRegistry */]);
-    useEffect(() => {
-        const onMessage = async (event) => {
-            let reason;
-            if ((reason = doesMismatchMessageSchema(event))) {
-                if (event.origin.startsWith('http://localhost') &&
-                    `${event.data}`.includes('webpackHotUpdate')) {
-                    reloadApp();
-                }
-                else {
-                    debug$1.warn(`[experiences-visual-editor-react::onMessage] Ignoring alien incoming message from origin [${event.origin}], due to: [${reason}]`, event);
-                }
-                return;
+        return asset;
+    }
+    getEntryById(entryId) {
+        const entry = this.entryMap.get(entryId);
+        if (!entry) {
+            debug.warn(`[experiences-core::EntityStoreBase] 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);
             }
-            const eventData = tryParseMessage(event);
-            debug$1.debug(`[experiences-visual-editor-react::onMessage] Received message [${eventData.eventType}]`, eventData);
-            if (eventData.eventType === PostMessageMethods$2.REQUESTED_ENTITIES) {
-                // Expected message: This message is handled in the EntityStore to store fetched entities
-                return;
+            else {
+                missing.push(id);
             }
-            switch (eventData.eventType) {
-                case INCOMING_EVENTS.ExperienceUpdated: {
-                    const { tree, locale, changedNode, changedValueType, assemblies } = eventData.payload;
-                    // Make sure to first store the assemblies before setting the tree and thus triggering a rerender
-                    if (assemblies) {
-                        setAssemblies(assemblies);
-                        // If the assemblyEntry is not yet fetched, this will be done below by
-                        // the imperative calls to fetchMissingEntities.
-                    }
-                    let newEntityStore = entityStore;
-                    if (entityStore.locale !== locale) {
-                        newEntityStore = new EditorModeEntityStore({ locale, entities: [] });
-                        setLocale(locale);
-                        resetEntityStore(newEntityStore);
-                    }
-                    // Below are mutually exclusive cases
-                    if (changedNode) {
-                        /**
-                         * On single node updates, we want to skip the process of getting the data (datasource and unbound values)
-                         * from tree. Since we know the updated node, we can skip that recursion everytime the tree updates and
-                         * just update the relevant data we need from the relevant node.
-                         *
-                         * We still update the tree here so we don't have a stale "tree"
-                         */
-                        if (changedValueType === 'BoundValue') {
-                            const newDataSource = { ...dataSource, ...changedNode.data.dataSource };
-                            setDataSource(newDataSource);
-                            await fetchMissingEntities(newEntityStore, newDataSource, tree);
-                        }
-                        else if (changedValueType === 'UnboundValue') {
-                            setUnboundValues({
-                                ...unboundValues,
-                                ...changedNode.data.unboundValues,
-                            });
-                        }
-                    }
-                    else {
-                        const { dataSource, unboundValues } = getDataFromTree(tree);
-                        setDataSource(dataSource);
-                        setUnboundValues(unboundValues);
-                        await fetchMissingEntities(newEntityStore, dataSource, tree);
-                    }
-                    // Update the tree when all necessary data is fetched and ready for rendering.
-                    updateTree(tree);
-                    break;
+        }
+        return {
+            resolved,
+            missing,
+        };
+    }
+    addEntity(entity) {
+        if (isAsset(entity)) {
+            // cloned and frozen
+            this.assetMap.set(entity.sys.id, deepFreeze(cloneDeep(entity)));
+        }
+        else if (isEntry(entity)) {
+            // cloned and frozen
+            this.entryMap.set(entity.sys.id, deepFreeze(cloneDeep(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
+            debug.warn(`[experiences-core::EntityStoreBase] 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
+            debug.warn(`[experiences-core::EntityStoreBase] 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.`);
                 }
-                case INCOMING_EVENTS.AssembliesRegistered: {
-                    const { assemblies } = eventData.payload;
-                    assemblies.forEach((definition) => {
-                        addComponentRegistration({
-                            component: Assembly,
-                            definition,
-                        });
-                    });
+                if (isLeaf) {
+                    resolvedFieldset.push([entityToResolveFieldsFrom, field, _localeQualifier]);
                     break;
                 }
-                case INCOMING_EVENTS.AssembliesAdded: {
-                    const { assembly, assemblyDefinition, } = eventData.payload;
-                    entityStore.updateEntity(assembly);
-                    // Using a Map here to avoid setting state and rerending all existing assemblies when a new assembly is added
-                    // TODO: Figure out if we can extend this love to data source and unbound values. Maybe that'll solve the blink
-                    // of all bound and unbound values when new values are added
-                    assembliesRegistry.set(assembly.sys.id, {
-                        sys: { id: assembly.sys.id, linkType: 'Entry', type: 'Link' },
-                    });
-                    if (assemblyDefinition) {
-                        addComponentRegistration({
-                            component: Assembly,
-                            definition: assemblyDefinition,
-                        });
-                    }
-                    break;
+                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`,
+                    };
                 }
-                case INCOMING_EVENTS.UpdatedEntity: {
-                    const { entity: updatedEntity, shouldRerender } = eventData.payload;
-                    if (updatedEntity) {
-                        const storedEntity = entityStore.entities.find((entity) => entity.sys.id === updatedEntity.sys.id);
-                        const didEntityChange = storedEntity?.sys.version !== updatedEntity.sys.version;
-                        entityStore.updateEntity(updatedEntity);
-                        // We traverse the whole tree, so this is a opt-in feature to only use it when required.
-                        if (shouldRerender && didEntityChange) {
-                            updateNodesByUpdatedEntity(updatedEntity.sys.id);
-                        }
+                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...`,
+                        };
                     }
-                    break;
+                    resolvedFieldset.push([entityToResolveFieldsFrom, field, _localeQualifier]);
+                    entityToResolveFieldsFrom = entity; // we move up
                 }
-                case INCOMING_EVENTS.RequestEditorMode: {
-                    break;
+                else if (isAsset(fieldValue) || isEntry(fieldValue)) {
+                    resolvedFieldset.push([entityToResolveFieldsFrom, field, _localeQualifier]);
+                    entityToResolveFieldsFrom = fieldValue; // we move up
                 }
-                default: {
-                    const knownEvents = Object.values(INCOMING_EVENTS);
-                    const isDeprecatedMessage = knownEvents.includes(eventData.eventType);
-                    if (!isDeprecatedMessage) {
-                        debug$1.error(`[experiences-visual-editor-react::onMessage] Logic error, unsupported eventType: [${eventData.eventType}]`);
-                    }
+                else {
+                    return {
+                        resolvedFieldset,
+                        isFullyResolved: false,
+                        reason: `Deep path points to an invalid field value of type '${typeof fieldValue}' (value=${fieldValue})`,
+                    };
                 }
             }
+            return {
+                resolvedFieldset,
+                isFullyResolved: true,
+            };
         };
-        window.addEventListener('message', onMessage);
-        return () => {
-            window.removeEventListener('message', onMessage);
-        };
-    }, [
-        entityStore,
-        setDataSource,
-        setLocale,
-        dataSource,
-        areEntitiesFetched,
-        fetchMissingEntities,
-        setUnboundValues,
-        unboundValues,
-        updateTree,
-        updateNodesByUpdatedEntity,
-        resetEntityStore,
-    ]);
-}
-
-const CircularDependencyErrorPlaceholder = ({ wrappingPatternIds, ...props }) => {
-    return (React.createElement("div", { ...props, "data-cf-node-error": "circular-pattern-dependency", style: {
-            border: '1px solid red',
-            background: 'rgba(255, 0, 0, 0.1)',
-            padding: '1rem 1rem 0 1rem',
-            width: '100%',
-            height: '100%',
-        } },
-        "Circular usage of patterns detected:",
-        React.createElement("ul", null, Array.from(wrappingPatternIds).map((patternId) => {
-            const entryLink = { sys: { type: 'Link', linkType: 'Entry', id: patternId } };
-            const entry = inMemoryEntities.maybeResolveLink(entryLink);
-            const entryTitle = entry?.fields?.title;
-            const text = entryTitle ? `${entryTitle} (${patternId})` : patternId;
-            return React.createElement("li", { key: patternId }, text);
-        }))));
-};
-
-class ImportedComponentError extends Error {
-    constructor(message) {
-        super(message);
-        this.name = 'ImportedComponentError';
-    }
-}
-class ExperienceSDKError extends Error {
-    constructor(message) {
-        super(message);
-        this.name = 'ExperienceSDKError';
+        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) {
+            if (reason) {
+                debug.log(`[experiences-core::EntityStoreBase] Deep path wasn't resolved till leaf node, falling back to undefined, because: ${reason}`);
+            }
+            return;
+        }
+        const [leafEntity] = resolvedFieldset[resolvedFieldset.length - 1];
+        return leafEntity;
     }
-}
-class ImportedComponentErrorBoundary extends React.Component {
-    componentDidCatch(error, _errorInfo) {
-        if (error.name === 'ImportedComponentError' || error.name === 'ExperienceSDKError') {
-            // This error was already handled by a nested error boundary and should be passed upwards
-            // We have to do this as we wrap every component on every layer with this error boundary and
-            // thus an error deep in the tree bubbles through many layers of error boundaries.
-            throw error;
+    getEntity(type, id) {
+        if (type === 'Asset') {
+            return this.assetMap.get(id);
         }
-        // Differentiate between custom and SDK-provided components for error tracking
-        const ErrorClass = isContentfulComponent(this.props.componentId)
-            ? ExperienceSDKError
-            : ImportedComponentError;
-        const err = new ErrorClass(error.message);
-        err.stack = error.stack;
-        throw err;
+        return this.entryMap.get(id);
     }
-    render() {
-        return this.props.children;
+    toJSON() {
+        return {
+            entryMap: Object.fromEntries(this.entryMap),
+            assetMap: Object.fromEntries(this.assetMap),
+            locale: this.locale,
+        };
     }
 }
 
-const MissingComponentPlaceholder = ({ blockId }) => {
-    return (React.createElement("div", { style: {
-            border: '1px solid red',
-            width: '100%',
-            height: '100%',
-        } },
-        "Missing component '",
-        blockId,
-        "'"));
-};
+class UninitializedEntityStore extends EntityStoreBase {
+    constructor() {
+        super({ entities: [], locale: 'uninitialized-locale-in-uninitialized-entity-store' });
+    }
+}
 
-var css_248z$2 = ".EditorBlock-module_emptySlot__za-Bi {\n  min-height: 80px;\n  min-width: 80px;\n}\n";
-var styles$1 = {"emptySlot":"EditorBlock-module_emptySlot__za-Bi"};
+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 = ".contentful-container{display:flex;pointer-events:all;position:relative}.contentful-container::-webkit-scrollbar{display:none}.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);
 
+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}";
+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{position:relative}.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 assemblyStyle = { display: 'contents' };
+const Assembly = (props) => {
+    // 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 useComponentRegistration = (node) => {
     return useMemo(() => {
-        let registration = componentRegistry.get(node.data.blockId);
-        if (node.type === ASSEMBLY_NODE_TYPE && !registration) {
-            registration = createAssemblyRegistration({
-                definitionId: node.data.blockId,
+        if (node.type === ASSEMBLY_NODE_TYPE) {
+            // The definition and component are the same for all assemblies
+            return {
                 component: Assembly,
-            });
+                definition: createAssemblyDefinition(node.data.blockId),
+            };
         }
+        const registration = componentRegistry.get(node.data.blockId);
         if (!registration) {
             debug$1.warn(`[experiences-visual-editor-react::useComponentRegistration] Component registration not found for component with id: "${node.data.blockId}". The registered component might have been removed from the code. To proceed, remove the component manually from the layers tab.`);
             return undefined;
@@ -4854,7 +5049,9 @@ const checkIsNodeVisible = (node, resolveDesignValue) => {
         return node.children.some((childNode) => checkIsNodeVisible(childNode, resolveDesignValue));
     }
     // Check if the current node is visible (`cfVisibility` is enforced on all nodes)
-    return !!resolveDesignValue(node.data.props['cfVisibility'].valuesByBreakpoint);
+    // Check explicitly for false, as `undefined` is treated as `true`. It could become undefined when the breakpoint IDs changed.
+    return (resolveDesignValue(node.data.props['cfVisibility'].valuesByBreakpoint) !==
+        false);
 };
 
 const useComponentProps = ({ node, entityStore, areEntitiesFetched, resolveDesignValue, definition, options, }) => {