@contentful/experiences-visual-editor-react 3.7.0-dev-20250919T0822-6a47406.0 → 3.7.0-dev-20250919T1400-8d76591.0

package/dist/index.js

@@ -9,8 +9,8 @@ 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 = {
@@ -34,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',
@@ -97,6 +99,7 @@ const CONTENTFUL_COMPONENTS$1 = {
         name: 'Carousel',
     },
 };
+const ASSEMBLY_DEFAULT_CATEGORY = 'Assemblies';
 const CF_STYLE_ATTRIBUTES = [
     'cfVisibility',
     'cfHorizontalAlignment',
@@ -2282,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) {
@@ -3190,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',
@@ -3215,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}/`;
@@ -3374,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: {},
@@ -3441,41 +3431,313 @@ 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);
+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,
+    ]);
+}
 
-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);
+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
@@ -4648,8 +4910,8 @@ var VisualEditorMode;
     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);
+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: {
@@ -4686,315 +4948,16 @@ const Assembly = (props) => {
     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);
-    }, []);
-    /**
-     * 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),
-            ...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 });
-            }
-        }
-        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 /* 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;
-            }
-            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, 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;
-                }
-                case INCOMING_EVENTS.AssembliesRegistered: {
-                    const { assemblies } = eventData.payload;
-                    assemblies.forEach((definition) => {
-                        addComponentRegistration({
-                            component: Assembly,
-                            definition,
-                        });
-                    });
-                    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;
-                }
-                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$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"};
-styleInject(css_248z$2);
-
 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;