@contentful/experiences-sdk-react 3.8.0-beta.1 → 3.8.0-beta.3

package/dist/core/preview/assemblyUtils.js

@@ -1,29 +1,34 @@
-import { mergeDesignValuesByBreakpoint } from '@contentful/experiences-core';
-import md5 from 'md5';
+import { mergeDesignValuesByBreakpoint, checkIsAssemblyNode } from '@contentful/experiences-core';
 import { shouldUsePrebinding, resolvePrebindingPath } from '../../utils/prebindingUtils.js';
-import { PATTERN_PROPERTY_DIVIDER } from '@contentful/experiences-core/constants';
+import { PrebindingManager } from './PrebindingManager.js';
 
 /** While unfolding the pattern definition on the instance, this function will replace all
  * ComponentValue in the definitions tree with the actual value on the instance. */
-const deserializePatternNode = ({ node, componentInstanceVariables, componentSettings, parameters, entityStore, }) => {
+const deserializePatternNode = ({ node, rootPatternVariables, componentSettings, entityStore, rootPatternParameters, parentPatternRootNodeIdsChain, }) => {
     const variables = {};
+    let parentPatternNodeId = parentPatternRootNodeIdsChain.slice(-1)[0];
+    if (parentPatternNodeId === node.id) {
+        parentPatternNodeId = parentPatternRootNodeIdsChain.slice(-2)[0];
+    }
     for (const [variableName, variable] of Object.entries(node.variables)) {
         variables[variableName] = variable;
         if (variable.type === 'ComponentValue') {
             const componentValueKey = variable.key;
-            const instanceProperty = componentInstanceVariables[componentValueKey];
+            const instanceProperty = rootPatternVariables[componentValueKey];
             const variableDefinition = componentSettings.variableDefinitions?.[componentValueKey];
             const defaultValue = variableDefinition?.defaultValue;
             const usePrebinding = shouldUsePrebinding({
                 componentSettings,
                 componentValueKey,
-                parameters: parameters,
+                parameters: rootPatternParameters,
+                patternRootNodeIdsChain: parentPatternRootNodeIdsChain,
             });
             const path = resolvePrebindingPath({
                 componentSettings,
                 componentValueKey,
-                parameters: parameters,
+                parameters: rootPatternParameters,
                 entityStore,
+                patternRootNodeIdsChain: parentPatternRootNodeIdsChain,
             });
             if (usePrebinding && path) {
                 variables[variableName] = {
@@ -59,6 +64,12 @@ const deserializePatternNode = ({ node, componentInstanceVariables, componentSet
             else if (instanceProperty?.type === 'DesignValue') {
                 variables[variableName] = mergeDesignValuesByBreakpoint(defaultValue, instanceProperty);
             }
+            else if (instanceProperty?.type === 'ComponentValue') {
+                if (!usePrebinding) {
+                    // @ts-expect-error ignore for now
+                    variables[variableName] = defaultValue;
+                }
+            }
             else if (!instanceProperty && defaultValue) {
                 // So far, we only automatically fallback to the defaultValue for design properties
                 if (variableDefinition.group === 'style') {
@@ -70,60 +81,85 @@ const deserializePatternNode = ({ node, componentInstanceVariables, componentSet
             }
         }
     }
-    const children = node.children.map((child) => deserializePatternNode({
-        node: child,
-        componentInstanceVariables,
-        componentSettings,
-        parameters,
-        entityStore,
-    }));
+    const children = node.children.map((child) => {
+        const isPatternNode = checkIsAssemblyNode({
+            componentId: child.definitionId,
+            usedComponents: entityStore.usedComponents,
+        });
+        if (isPatternNode) {
+            return deserializePatternNode({
+                node: child,
+                rootPatternVariables,
+                componentSettings,
+                entityStore,
+                rootPatternParameters,
+                parentPatternRootNodeIdsChain,
+            });
+        }
+        return deserializePatternNode({
+            node: child,
+            rootPatternVariables,
+            componentSettings,
+            entityStore,
+            rootPatternParameters,
+            parentPatternRootNodeIdsChain,
+        });
+    });
+    const patternsChain = parentPatternRootNodeIdsChain.join('---');
+    const indexedNodeId = patternsChain ? [patternsChain, node.id].join('-') : node.id;
     return {
         definitionId: node.definitionId,
         id: node.id,
         variables,
         children,
+        pattern: {
+            nodeIdOnPattern: node.id,
+            parentPatternNodeId,
+            prefixedNodeId: indexedNodeId,
+        },
         slotId: node.slotId,
         displayName: node.displayName,
         parameters: node.parameters,
     };
 };
-const resolvePattern = ({ node, parentParameters, patternRootNodeIdsChain, entityStore, }) => {
+const resolvePattern = ({ node, entityStore, parentPatternRootNodeIdsChain, rootPatternParameters, }) => {
     const componentId = node.definitionId;
-    const assembly = entityStore.usedComponents?.find((component) => component.sys.id === componentId);
-    if (!assembly || !('fields' in assembly)) {
+    const patternEntry = entityStore.usedComponents?.find((component) => component.sys.id === componentId);
+    if (!patternEntry || !('fields' in patternEntry)) {
         return node;
     }
-    const parameters = {};
-    const allParameters = {
-        ...parentParameters,
-        ...(node.parameters || {}),
-    };
-    for (const [parameterKey, parameter] of Object.entries(allParameters)) {
-        /**
-         * Bubbled up pattern properties are a concatenation of the node id
-         * and the pattern property definition id. We need to split them so
-         * that the node only uses the pattern property definition id.
-         */
-        const [hashKey, parameterId] = parameterKey.split(PATTERN_PROPERTY_DIVIDER);
-        const hashedNodeChain = md5(patternRootNodeIdsChain || '');
-        const isMatchingNode = hashKey === hashedNodeChain;
-        if (!isMatchingNode)
-            continue;
-        parameters[parameterId] = parameter;
+    const componentFields = patternEntry.fields;
+    const parameters = rootPatternParameters;
+    let nodeParameters;
+    if (rootPatternParameters) {
+        nodeParameters = {};
+        const prebindingDefinitions = componentFields.componentSettings?.prebindingDefinitions ?? [];
+        const indexedNodeId = parentPatternRootNodeIdsChain.join('---');
+        PrebindingManager.linkOriginalNodeIds(indexedNodeId, node.id);
+        PrebindingManager.storePrebindingDefinitions(indexedNodeId, componentId, prebindingDefinitions);
+        const prebindingDefinition = prebindingDefinitions[0];
+        if (prebindingDefinition && prebindingDefinition.parameterDefinitions) {
+            for (const [parameterId] of Object.entries(prebindingDefinition.parameterDefinitions)) {
+                const hoistedParameterId = PrebindingManager.getHoistedIdForParameterId(parameterId, indexedNodeId);
+                if (rootPatternParameters[hoistedParameterId]) {
+                    nodeParameters[parameterId] = rootPatternParameters[hoistedParameterId];
+                }
+            }
+        }
     }
-    const componentFields = assembly.fields;
     const deserializedNode = deserializePatternNode({
         node: {
             definitionId: node.definitionId,
             id: node.id,
             variables: node.variables,
             children: componentFields.componentTree.children,
-            parameters: parameters,
+            parameters: nodeParameters,
         },
-        componentInstanceVariables: node.variables,
+        rootPatternVariables: node.variables,
         componentSettings: componentFields.componentSettings,
-        parameters: parameters,
         entityStore,
+        rootPatternParameters: parameters,
+        parentPatternRootNodeIdsChain,
     });
     entityStore.addAssemblyUnboundValues(componentFields.unboundValues);
     return deserializedNode;

package/dist/core/preview/assemblyUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"assemblyUtils.js","sources":["../../../../src/core/preview/assemblyUtils.ts"],"sourcesContent":["import { EntityStore, mergeDesignValuesByBreakpoint } from '@contentful/experiences-core';\nimport md5 from 'md5';\nimport type {\n  ComponentPropertyValue,\n  ComponentTreeNode,\n  DesignValue,\n  ExperienceComponentSettings,\n  Parameter,\n} from '@contentful/experiences-core/types';\nimport { resolvePrebindingPath, shouldUsePrebinding } from '../../utils/prebindingUtils';\nimport { PATTERN_PROPERTY_DIVIDER } from '@contentful/experiences-core/constants';\n\n/** While unfolding the pattern definition on the instance, this function will replace all\n * ComponentValue in the definitions tree with the actual value on the instance. */\nexport const deserializePatternNode = ({\n  node,\n  componentInstanceVariables,\n  componentSettings,\n  parameters,\n  entityStore,\n}: {\n  node: ComponentTreeNode;\n  componentInstanceVariables: ComponentTreeNode['variables'];\n  componentSettings: ExperienceComponentSettings;\n  parameters: Record<string, Parameter>;\n  entityStore: EntityStore;\n}): ComponentTreeNode => {\n  const variables: Record<string, ComponentPropertyValue> = {};\n\n  for (const [variableName, variable] of Object.entries(node.variables)) {\n    variables[variableName] = variable;\n    if (variable.type === 'ComponentValue') {\n      const componentValueKey = variable.key;\n      const instanceProperty = componentInstanceVariables[componentValueKey];\n      const variableDefinition = componentSettings.variableDefinitions?.[componentValueKey];\n      const defaultValue = variableDefinition?.defaultValue;\n\n      const usePrebinding = shouldUsePrebinding({\n        componentSettings,\n        componentValueKey,\n        parameters: parameters,\n      });\n      const path = resolvePrebindingPath({\n        componentSettings,\n        componentValueKey,\n        parameters: parameters,\n        entityStore,\n      });\n\n      if (usePrebinding && path) {\n        variables[variableName] = {\n          type: 'BoundValue',\n          path,\n        };\n\n        // For assembly, we look up the variable in the assembly instance and\n        // replace the ComponentValue with that one.\n      } else if (instanceProperty?.type === 'UnboundValue') {\n        variables[variableName] = {\n          type: 'UnboundValue',\n          key: instanceProperty.key,\n        };\n      } else if (instanceProperty?.type === 'NoValue') {\n        throw new Error(\n          `Unexpected NoValue for variable \"${variableName}\" when deserializing pattern \"${node.definitionId}\". ` +\n            `This can only happen if you created experience in pre-release version of prebinding and experience contains NoValue properties. ` +\n            `Resave experience to fix this issue.`,\n        );\n      } else if (instanceProperty?.type === 'BoundValue') {\n        variables[variableName] = {\n          type: 'BoundValue',\n          path: instanceProperty.path,\n        };\n      } else if (instanceProperty?.type === 'HyperlinkValue') {\n        variables[variableName] = {\n          type: 'HyperlinkValue',\n          linkTargetKey: instanceProperty.linkTargetKey,\n        };\n      } else if (instanceProperty?.type === 'DesignValue') {\n        variables[variableName] = mergeDesignValuesByBreakpoint(\n          defaultValue as DesignValue | undefined,\n          instanceProperty,\n        );\n      } else if (!instanceProperty && defaultValue) {\n        // So far, we only automatically fallback to the defaultValue for design properties\n        if (variableDefinition.group === 'style') {\n          variables[variableName] = {\n            type: 'DesignValue',\n            valuesByBreakpoint: (defaultValue as DesignValue).valuesByBreakpoint,\n          };\n        }\n      }\n    }\n  }\n\n  const children: ComponentTreeNode[] = node.children.map((child) =>\n    deserializePatternNode({\n      node: child,\n      componentInstanceVariables,\n      componentSettings,\n      parameters,\n      entityStore,\n    }),\n  );\n\n  return {\n    definitionId: node.definitionId,\n    id: node.id,\n    variables,\n    children,\n    slotId: node.slotId,\n    displayName: node.displayName,\n    parameters: node.parameters,\n  };\n};\n\nexport const resolvePattern = ({\n  node,\n  parentParameters,\n  patternRootNodeIdsChain,\n  entityStore,\n}: {\n  node: ComponentTreeNode;\n  entityStore: EntityStore;\n  parentParameters: Record<string, Parameter>;\n  patternRootNodeIdsChain: string;\n}) => {\n  const componentId = node.definitionId as string;\n  const assembly = entityStore.usedComponents?.find(\n    (component) => component.sys.id === componentId,\n  );\n\n  if (!assembly || !('fields' in assembly)) {\n    return node;\n  }\n\n  const parameters: Record<string, Parameter> = {};\n\n  const allParameters = {\n    ...parentParameters,\n    ...(node.parameters || {}),\n  };\n\n  for (const [parameterKey, parameter] of Object.entries(allParameters)) {\n    /**\n     * Bubbled up pattern properties are a concatenation of the node id\n     * and the pattern property definition id. We need to split them so\n     * that the node only uses the pattern property definition id.\n     */\n    const [hashKey, parameterId] = parameterKey.split(PATTERN_PROPERTY_DIVIDER);\n\n    const hashedNodeChain = md5(patternRootNodeIdsChain || '');\n\n    const isMatchingNode = hashKey === hashedNodeChain;\n\n    if (!isMatchingNode) continue;\n\n    parameters[parameterId] = parameter;\n  }\n\n  const componentFields = assembly.fields;\n\n  const deserializedNode = deserializePatternNode({\n    node: {\n      definitionId: node.definitionId,\n      id: node.id,\n      variables: node.variables,\n      children: componentFields.componentTree.children,\n      parameters: parameters,\n    },\n    componentInstanceVariables: node.variables,\n    componentSettings: componentFields.componentSettings!,\n    parameters: parameters,\n    entityStore,\n  });\n\n  entityStore.addAssemblyUnboundValues(componentFields.unboundValues);\n\n  return deserializedNode;\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"assemblyUtils.js","sources":["../../../../src/core/preview/assemblyUtils.ts"],"sourcesContent":["import {\n  checkIsAssemblyNode,\n  EntityStore,\n  mergeDesignValuesByBreakpoint,\n} from '@contentful/experiences-core';\nimport type {\n  ComponentPropertyValue,\n  ComponentTreeNode,\n  DesignValue,\n  ExperienceComponentSettings,\n  Parameter,\n} from '@contentful/experiences-core/types';\nimport { resolvePrebindingPath, shouldUsePrebinding } from '../../utils/prebindingUtils';\nimport { PrebindingManager } from './PrebindingManager';\n\ntype ComponentTreeNodeWithPatternInformation = ComponentTreeNode & {\n  pattern?: {\n    parentPatternNodeId: string;\n    nodeIdOnPattern: string;\n    prefixedNodeId: string;\n  };\n};\n\n/** While unfolding the pattern definition on the instance, this function will replace all\n * ComponentValue in the definitions tree with the actual value on the instance. */\nexport const deserializePatternNode = ({\n  node,\n  rootPatternVariables,\n  componentSettings,\n  entityStore,\n  rootPatternParameters,\n  parentPatternRootNodeIdsChain,\n}: {\n  node: ComponentTreeNode;\n  rootPatternVariables: ComponentTreeNode['variables'];\n  componentSettings: ExperienceComponentSettings;\n  entityStore: EntityStore;\n  rootPatternParameters: Record<string, Parameter>;\n  parentPatternRootNodeIdsChain: string[];\n}): ComponentTreeNodeWithPatternInformation => {\n  const variables: Record<string, ComponentPropertyValue> = {};\n\n  let parentPatternNodeId = parentPatternRootNodeIdsChain.slice(-1)[0];\n  if (parentPatternNodeId === node.id) {\n    parentPatternNodeId = parentPatternRootNodeIdsChain.slice(-2)[0];\n  }\n\n  for (const [variableName, variable] of Object.entries(node.variables)) {\n    variables[variableName] = variable;\n    if (variable.type === 'ComponentValue') {\n      const componentValueKey = variable.key;\n      const instanceProperty = rootPatternVariables[componentValueKey];\n      const variableDefinition = componentSettings.variableDefinitions?.[componentValueKey];\n      const defaultValue = variableDefinition?.defaultValue;\n\n      const usePrebinding = shouldUsePrebinding({\n        componentSettings,\n        componentValueKey,\n        parameters: rootPatternParameters,\n        patternRootNodeIdsChain: parentPatternRootNodeIdsChain,\n      });\n      const path = resolvePrebindingPath({\n        componentSettings,\n        componentValueKey,\n        parameters: rootPatternParameters,\n        entityStore,\n        patternRootNodeIdsChain: parentPatternRootNodeIdsChain,\n      });\n\n      if (usePrebinding && path) {\n        variables[variableName] = {\n          type: 'BoundValue',\n          path,\n        };\n\n        // For assembly, we look up the variable in the assembly instance and\n        // replace the ComponentValue with that one.\n      } else if (instanceProperty?.type === 'UnboundValue') {\n        variables[variableName] = {\n          type: 'UnboundValue',\n          key: instanceProperty.key,\n        };\n      } else if (instanceProperty?.type === 'NoValue') {\n        throw new Error(\n          `Unexpected NoValue for variable \"${variableName}\" when deserializing pattern \"${node.definitionId}\". ` +\n            `This can only happen if you created experience in pre-release version of prebinding and experience contains NoValue properties. ` +\n            `Resave experience to fix this issue.`,\n        );\n      } else if (instanceProperty?.type === 'BoundValue') {\n        variables[variableName] = {\n          type: 'BoundValue',\n          path: instanceProperty.path,\n        };\n      } else if (instanceProperty?.type === 'HyperlinkValue') {\n        variables[variableName] = {\n          type: 'HyperlinkValue',\n          linkTargetKey: instanceProperty.linkTargetKey,\n        };\n      } else if (instanceProperty?.type === 'DesignValue') {\n        variables[variableName] = mergeDesignValuesByBreakpoint(\n          defaultValue as DesignValue | undefined,\n          instanceProperty,\n        );\n      } else if (instanceProperty?.type === 'ComponentValue') {\n        if (!usePrebinding) {\n          // @ts-expect-error ignore for now\n          variables[variableName] = defaultValue;\n        }\n      } else if (!instanceProperty && defaultValue) {\n        // So far, we only automatically fallback to the defaultValue for design properties\n        if (variableDefinition.group === 'style') {\n          variables[variableName] = {\n            type: 'DesignValue',\n            valuesByBreakpoint: (defaultValue as DesignValue).valuesByBreakpoint,\n          };\n        }\n      }\n    }\n  }\n\n  const children: ComponentTreeNode[] = node.children.map((child) => {\n    const isPatternNode = checkIsAssemblyNode({\n      componentId: child.definitionId,\n      usedComponents: entityStore.usedComponents,\n    });\n\n    if (isPatternNode) {\n      return deserializePatternNode({\n        node: child,\n        rootPatternVariables,\n        componentSettings,\n        entityStore,\n        rootPatternParameters,\n        parentPatternRootNodeIdsChain,\n      });\n    }\n\n    return deserializePatternNode({\n      node: child,\n      rootPatternVariables,\n      componentSettings,\n      entityStore,\n      rootPatternParameters,\n      parentPatternRootNodeIdsChain,\n    });\n  });\n\n  const patternsChain = parentPatternRootNodeIdsChain.join('---');\n  const indexedNodeId = patternsChain ? [patternsChain, node.id!].join('-') : node.id!;\n\n  return {\n    definitionId: node.definitionId,\n    id: node.id,\n    variables,\n    children,\n    pattern: {\n      nodeIdOnPattern: node.id!,\n      parentPatternNodeId,\n      prefixedNodeId: indexedNodeId,\n    },\n    slotId: node.slotId,\n    displayName: node.displayName,\n    parameters: node.parameters,\n  };\n};\n\nexport const resolvePattern = ({\n  node,\n  entityStore,\n  parentPatternRootNodeIdsChain,\n  rootPatternParameters,\n}: {\n  node: ComponentTreeNode;\n  entityStore: EntityStore;\n  parentPatternRootNodeIdsChain: string[];\n  rootPatternParameters: Record<string, Parameter>;\n}): ComponentTreeNodeWithPatternInformation => {\n  const componentId = node.definitionId as string;\n  const patternEntry = entityStore.usedComponents?.find(\n    (component) => component.sys.id === componentId,\n  );\n\n  if (!patternEntry || !('fields' in patternEntry)) {\n    return node;\n  }\n\n  const componentFields = patternEntry.fields;\n  const parameters = rootPatternParameters;\n  let nodeParameters: Record<string, Parameter> | undefined;\n\n  if (rootPatternParameters) {\n    nodeParameters = {};\n    const prebindingDefinitions = componentFields.componentSettings?.prebindingDefinitions ?? [];\n    const indexedNodeId = parentPatternRootNodeIdsChain.join('---');\n    PrebindingManager.linkOriginalNodeIds(indexedNodeId, node.id!);\n    PrebindingManager.storePrebindingDefinitions(indexedNodeId, componentId, prebindingDefinitions);\n\n    const prebindingDefinition = prebindingDefinitions[0];\n\n    if (prebindingDefinition && prebindingDefinition.parameterDefinitions) {\n      for (const [parameterId] of Object.entries(prebindingDefinition.parameterDefinitions)) {\n        const hoistedParameterId = PrebindingManager.getHoistedIdForParameterId(\n          parameterId,\n          indexedNodeId,\n        );\n        if (rootPatternParameters[hoistedParameterId]) {\n          nodeParameters[parameterId] = rootPatternParameters[hoistedParameterId];\n        }\n      }\n    }\n  }\n\n  const deserializedNode = deserializePatternNode({\n    node: {\n      definitionId: node.definitionId,\n      id: node.id,\n      variables: node.variables,\n      children: componentFields.componentTree.children,\n      parameters: nodeParameters,\n    },\n    rootPatternVariables: node.variables,\n    componentSettings: componentFields.componentSettings!,\n    entityStore,\n    rootPatternParameters: parameters,\n    parentPatternRootNodeIdsChain,\n  });\n\n  entityStore.addAssemblyUnboundValues(componentFields.unboundValues);\n\n  return deserializedNode;\n};\n"],"names":[],"mappings":"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"}

package/dist/core/sdkFeatures.js

@@ -8,6 +8,7 @@ const sdkFeatures = {
     patternBreakpointDesignValues: true,
     // DND is moving to the host application enabling smoother native event handling
     dndMigration: true,
+    hasPrebinding: true,
 };
 
 export { sdkFeatures };

package/dist/core/sdkFeatures.js.map

@@ -1 +1 @@
-{"version":3,"file":"sdkFeatures.js","sources":["../../../src/core/sdkFeatures.ts"],"sourcesContent":["// Object to store the SDK features that are enabled/disabled\nexport const sdkFeatures: Record<string, unknown> = {\n  hasSDKVersionUI: true,\n  hasVersionHistory: true,\n  cfVisibility: true,\n  patternResolution: true,\n  // [SPA-2602] allow merging the default and overwriting design values for patterns by breakpoint\n  patternBreakpointDesignValues: true,\n  // DND is moving to the host application enabling smoother native event handling\n  dndMigration: true,\n};\n"],"names":[],"mappings":"AAAA;AACa,MAAA,WAAW,GAA4B;AAClD,IAAA,eAAe,EAAE,IAAI;AACrB,IAAA,iBAAiB,EAAE,IAAI;AACvB,IAAA,YAAY,EAAE,IAAI;AAClB,IAAA,iBAAiB,EAAE,IAAI;;AAEvB,IAAA,6BAA6B,EAAE,IAAI;;AAEnC,IAAA,YAAY,EAAE,IAAI;;;;;"}
+{"version":3,"file":"sdkFeatures.js","sources":["../../../src/core/sdkFeatures.ts"],"sourcesContent":["// Object to store the SDK features that are enabled/disabled\nexport const sdkFeatures: Record<string, unknown> = {\n  hasSDKVersionUI: true,\n  hasVersionHistory: true,\n  cfVisibility: true,\n  patternResolution: true,\n  // [SPA-2602] allow merging the default and overwriting design values for patterns by breakpoint\n  patternBreakpointDesignValues: true,\n  // DND is moving to the host application enabling smoother native event handling\n  dndMigration: true,\n  hasPrebinding: true,\n};\n"],"names":[],"mappings":"AAAA;AACa,MAAA,WAAW,GAA4B;AAClD,IAAA,eAAe,EAAE,IAAI;AACrB,IAAA,iBAAiB,EAAE,IAAI;AACvB,IAAA,YAAY,EAAE,IAAI;AAClB,IAAA,iBAAiB,EAAE,IAAI;;AAEvB,IAAA,6BAA6B,EAAE,IAAI;;AAEnC,IAAA,YAAY,EAAE,IAAI;AAClB,IAAA,aAAa,EAAE,IAAI;;;;;"}

package/dist/core/styles/createStylesheetsForBuiltInStyles.js

@@ -59,7 +59,7 @@ const createStylesheetsForBuiltInStyles = ({ designPropertiesByBreakpoint, break
          */
         // Create a hash ensuring stability across nodes (and breakpoints between nodes)
         const styleHash = patternRootNodeIdsChain
-            ? md5(`${patternRootNodeIdsChain}-${node.id}}-${breakpointCss}`)
+            ? md5([...patternRootNodeIdsChain, node.id, breakpointCss].join('-'))
             : md5(`${node.id}-${breakpointCss}`);
         // Create a CSS className with internal prefix to make sure the value can be processed
         const className = `cfstyles-${styleHash}`;

package/dist/core/styles/createStylesheetsForBuiltInStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"createStylesheetsForBuiltInStyles.js","sources":["../../../../src/core/styles/createStylesheetsForBuiltInStyles.ts"],"sourcesContent":["import {\n  addMinHeightForEmptyStructures,\n  designTokensRegistry,\n  flattenDesignTokenRegistry,\n  maybePopulateDesignTokenValue,\n  stringifyCssProperties,\n  buildCfStyles,\n  transformVisibility,\n} from '@contentful/experiences-core';\nimport { Breakpoint, ComponentTreeNode, PrimitiveValue } from '@contentful/experiences-core/types';\nimport md5 from 'md5';\n\nexport type ResolvedStylesheetData = Array<{\n  className: string;\n  breakpointCondition: string;\n  css: string;\n  visibilityCss?: string;\n}>;\n\n/**\n * For each provided breakpoint, create the CSS code and a unique class name.\n *\n * **Example Output:**\n * ```\n * [\n *   { className: 'cfstyles-123', breakpointCondition: '*', css: 'margin:42px;' },\n *   { className: 'cfstyles-456', breakpointCondition: '<768px', css: 'margin:13px;' },\n * ]\n * ```\n */\nexport const createStylesheetsForBuiltInStyles = ({\n  designPropertiesByBreakpoint,\n  breakpoints,\n  node,\n  patternRootNodeIdsChain,\n}: {\n  designPropertiesByBreakpoint: Record<string, Record<string, PrimitiveValue>>;\n  breakpoints: Breakpoint[];\n  node: ComponentTreeNode;\n  patternRootNodeIdsChain?: string;\n}): ResolvedStylesheetData => {\n  const flattenedDesignTokens = flattenDesignTokenRegistry(designTokensRegistry);\n\n  // When the node is hidden for any breakpoint, we need to handle this separately with a disjunct media query.\n  const isAnyVisibilityValueHidden = Object.values(designPropertiesByBreakpoint).some(\n    (designProperties) => designProperties.cfVisibility === false,\n  );\n  // We always need an explicit value when using disjunct media queries\n  // Example: desktop uses \"false\" and tablet is undefined -> we need to set `display: none` for tablet as well.\n  let previousVisibilityValue: boolean | undefined;\n\n  const result: Array<{\n    className: string;\n    breakpointCondition: string;\n    css: string;\n    visibilityCss?: string;\n  }> = [];\n\n  for (const breakpoint of breakpoints) {\n    let visibilityCss: string | undefined;\n    const designProperties = designPropertiesByBreakpoint[breakpoint.id];\n    if (!designProperties) {\n      continue;\n    }\n\n    const designPropertiesWithResolvedDesignTokens = Object.entries(designProperties).reduce(\n      (acc, [propertyName, value]) => ({\n        ...acc,\n        [propertyName]: maybePopulateDesignTokenValue(\n          propertyName,\n          value,\n          flattenedDesignTokens,\n        ) as string,\n      }),\n      {} as Record<string, PrimitiveValue>,\n    );\n    /* [Data Format] `designPropertiesWithResolvedDesignTokens` is a map of property name to plain design value:\n     * designPropertiesWithResolvedDesignTokens = {\n     *   cfMargin: '42px',\n     *   cfBackgroundColor: 'rgba(246, 246, 246, 1)',\n     * }\n     */\n\n    // Special case for visibility to override any custom `display` values but only for a specific breakpoint.\n    if (isAnyVisibilityValueHidden) {\n      const visibilityValue =\n        (designPropertiesWithResolvedDesignTokens.cfVisibility as boolean | undefined) ??\n        previousVisibilityValue;\n      previousVisibilityValue = visibilityValue;\n      const visibilityStyles = transformVisibility(visibilityValue);\n      visibilityCss = stringifyCssProperties(visibilityStyles);\n    }\n\n    // Convert CF-specific property names to CSS variables, e.g. `cfMargin` -> `margin`\n    const cfStyles = addMinHeightForEmptyStructures(\n      buildCfStyles(designPropertiesWithResolvedDesignTokens),\n      node,\n    );\n    /* [Data Format] `cfStyles` follows the shape of CSSProperties (camelCased CSS property names):\n     * cfStyles = {\n     *   margin: '42px',\n     *   backgroundColor: 'rgba(246, 246, 246, 1)',\n     * }\n     */\n\n    // Translate the map of CSSProperties into the final shape of CSS code for this specific breakpoint\n    const breakpointCss = stringifyCssProperties(cfStyles);\n    /* [Data Format] `breakpointCss`:\n     * breakpointCss = \"margin:42px;background-color:rgba(246, 246, 246, 1);\"\n     */\n\n    // Create a hash ensuring stability across nodes (and breakpoints between nodes)\n    const styleHash = patternRootNodeIdsChain\n      ? md5(`${patternRootNodeIdsChain}-${node.id}}-${breakpointCss}`)\n      : md5(`${node.id}-${breakpointCss}`);\n\n    // Create a CSS className with internal prefix to make sure the value can be processed\n    const className = `cfstyles-${styleHash}`;\n\n    result.push({\n      className,\n      breakpointCondition: breakpoint.query,\n      css: breakpointCss,\n      visibilityCss,\n    });\n  }\n\n  return result;\n};\n"],"names":[],"mappings":";;;AAmBA;;;;;;;;;;AAUG;AACI,MAAM,iCAAiC,GAAG,CAAC,EAChD,4BAA4B,EAC5B,WAAW,EACX,IAAI,EACJ,uBAAuB,GAMxB,KAA4B;AAC3B,IAAA,MAAM,qBAAqB,GAAG,0BAA0B,CAAC,oBAAoB,CAAC,CAAC;;IAG/E,MAAM,0BAA0B,GAAG,MAAM,CAAC,MAAM,CAAC,4BAA4B,CAAC,CAAC,IAAI,CACjF,CAAC,gBAAgB,KAAK,gBAAgB,CAAC,YAAY,KAAK,KAAK,CAC9D,CAAC;;;AAGF,IAAA,IAAI,uBAA4C,CAAC;IAEjD,MAAM,MAAM,GAKP,EAAE,CAAC;AAER,IAAA,KAAK,MAAM,UAAU,IAAI,WAAW,EAAE;AACpC,QAAA,IAAI,aAAiC,CAAC;QACtC,MAAM,gBAAgB,GAAG,4BAA4B,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;QACrE,IAAI,CAAC,gBAAgB,EAAE;YACrB,SAAS;SACV;QAED,MAAM,wCAAwC,GAAG,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,MAAM,CACtF,CAAC,GAAG,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,MAAM;AAC/B,YAAA,GAAG,GAAG;YACN,CAAC,YAAY,GAAG,6BAA6B,CAC3C,YAAY,EACZ,KAAK,EACL,qBAAqB,CACZ;SACZ,CAAC,EACF,EAAoC,CACrC,CAAC;AACF;;;;;AAKG;;QAGH,IAAI,0BAA0B,EAAE;AAC9B,YAAA,MAAM,eAAe,GAClB,wCAAwC,CAAC,YAAoC;AAC9E,gBAAA,uBAAuB,CAAC;YAC1B,uBAAuB,GAAG,eAAe,CAAC;AAC1C,YAAA,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,eAAe,CAAC,CAAC;AAC9D,YAAA,aAAa,GAAG,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;SAC1D;;QAGD,MAAM,QAAQ,GAAG,8BAA8B,CAC7C,aAAa,CAAC,wCAAwC,CAAC,EACvD,IAAI,CACL,CAAC;AACF;;;;;AAKG;;AAGH,QAAA,MAAM,aAAa,GAAG,sBAAsB,CAAC,QAAQ,CAAC,CAAC;AACvD;;AAEG;;QAGH,MAAM,SAAS,GAAG,uBAAuB;AACvC,cAAE,GAAG,CAAC,CAAA,EAAG,uBAAuB,CAAA,CAAA,EAAI,IAAI,CAAC,EAAE,CAAA,EAAA,EAAK,aAAa,CAAA,CAAE,CAAC;cAC9D,GAAG,CAAC,CAAG,EAAA,IAAI,CAAC,EAAE,CAAI,CAAA,EAAA,aAAa,CAAE,CAAA,CAAC,CAAC;;AAGvC,QAAA,MAAM,SAAS,GAAG,CAAY,SAAA,EAAA,SAAS,EAAE,CAAC;QAE1C,MAAM,CAAC,IAAI,CAAC;YACV,SAAS;YACT,mBAAmB,EAAE,UAAU,CAAC,KAAK;AACrC,YAAA,GAAG,EAAE,aAAa;YAClB,aAAa;AACd,SAAA,CAAC,CAAC;KACJ;AAED,IAAA,OAAO,MAAM,CAAC;AAChB;;;;"}
+{"version":3,"file":"createStylesheetsForBuiltInStyles.js","sources":["../../../../src/core/styles/createStylesheetsForBuiltInStyles.ts"],"sourcesContent":["import {\n  addMinHeightForEmptyStructures,\n  designTokensRegistry,\n  flattenDesignTokenRegistry,\n  maybePopulateDesignTokenValue,\n  stringifyCssProperties,\n  buildCfStyles,\n  transformVisibility,\n} from '@contentful/experiences-core';\nimport { Breakpoint, ComponentTreeNode, PrimitiveValue } from '@contentful/experiences-core/types';\nimport md5 from 'md5';\n\nexport type ResolvedStylesheetData = Array<{\n  className: string;\n  breakpointCondition: string;\n  css: string;\n  visibilityCss?: string;\n}>;\n\n/**\n * For each provided breakpoint, create the CSS code and a unique class name.\n *\n * **Example Output:**\n * ```\n * [\n *   { className: 'cfstyles-123', breakpointCondition: '*', css: 'margin:42px;' },\n *   { className: 'cfstyles-456', breakpointCondition: '<768px', css: 'margin:13px;' },\n * ]\n * ```\n */\nexport const createStylesheetsForBuiltInStyles = ({\n  designPropertiesByBreakpoint,\n  breakpoints,\n  node,\n  patternRootNodeIdsChain,\n}: {\n  designPropertiesByBreakpoint: Record<string, Record<string, PrimitiveValue>>;\n  breakpoints: Breakpoint[];\n  node: ComponentTreeNode;\n  patternRootNodeIdsChain?: Array<string>;\n}): ResolvedStylesheetData => {\n  const flattenedDesignTokens = flattenDesignTokenRegistry(designTokensRegistry);\n\n  // When the node is hidden for any breakpoint, we need to handle this separately with a disjunct media query.\n  const isAnyVisibilityValueHidden = Object.values(designPropertiesByBreakpoint).some(\n    (designProperties) => designProperties.cfVisibility === false,\n  );\n  // We always need an explicit value when using disjunct media queries\n  // Example: desktop uses \"false\" and tablet is undefined -> we need to set `display: none` for tablet as well.\n  let previousVisibilityValue: boolean | undefined;\n\n  const result: Array<{\n    className: string;\n    breakpointCondition: string;\n    css: string;\n    visibilityCss?: string;\n  }> = [];\n\n  for (const breakpoint of breakpoints) {\n    let visibilityCss: string | undefined;\n    const designProperties = designPropertiesByBreakpoint[breakpoint.id];\n    if (!designProperties) {\n      continue;\n    }\n\n    const designPropertiesWithResolvedDesignTokens = Object.entries(designProperties).reduce(\n      (acc, [propertyName, value]) => ({\n        ...acc,\n        [propertyName]: maybePopulateDesignTokenValue(\n          propertyName,\n          value,\n          flattenedDesignTokens,\n        ) as string,\n      }),\n      {} as Record<string, PrimitiveValue>,\n    );\n    /* [Data Format] `designPropertiesWithResolvedDesignTokens` is a map of property name to plain design value:\n     * designPropertiesWithResolvedDesignTokens = {\n     *   cfMargin: '42px',\n     *   cfBackgroundColor: 'rgba(246, 246, 246, 1)',\n     * }\n     */\n\n    // Special case for visibility to override any custom `display` values but only for a specific breakpoint.\n    if (isAnyVisibilityValueHidden) {\n      const visibilityValue =\n        (designPropertiesWithResolvedDesignTokens.cfVisibility as boolean | undefined) ??\n        previousVisibilityValue;\n      previousVisibilityValue = visibilityValue;\n      const visibilityStyles = transformVisibility(visibilityValue);\n      visibilityCss = stringifyCssProperties(visibilityStyles);\n    }\n\n    // Convert CF-specific property names to CSS variables, e.g. `cfMargin` -> `margin`\n    const cfStyles = addMinHeightForEmptyStructures(\n      buildCfStyles(designPropertiesWithResolvedDesignTokens),\n      node,\n    );\n    /* [Data Format] `cfStyles` follows the shape of CSSProperties (camelCased CSS property names):\n     * cfStyles = {\n     *   margin: '42px',\n     *   backgroundColor: 'rgba(246, 246, 246, 1)',\n     * }\n     */\n\n    // Translate the map of CSSProperties into the final shape of CSS code for this specific breakpoint\n    const breakpointCss = stringifyCssProperties(cfStyles);\n    /* [Data Format] `breakpointCss`:\n     * breakpointCss = \"margin:42px;background-color:rgba(246, 246, 246, 1);\"\n     */\n\n    // Create a hash ensuring stability across nodes (and breakpoints between nodes)\n    const styleHash = patternRootNodeIdsChain\n      ? md5([...patternRootNodeIdsChain, node.id, breakpointCss].join('-'))\n      : md5(`${node.id}-${breakpointCss}`);\n\n    // Create a CSS className with internal prefix to make sure the value can be processed\n    const className = `cfstyles-${styleHash}`;\n\n    result.push({\n      className,\n      breakpointCondition: breakpoint.query,\n      css: breakpointCss,\n      visibilityCss,\n    });\n  }\n\n  return result;\n};\n"],"names":[],"mappings":";;;AAmBA;;;;;;;;;;AAUG;AACI,MAAM,iCAAiC,GAAG,CAAC,EAChD,4BAA4B,EAC5B,WAAW,EACX,IAAI,EACJ,uBAAuB,GAMxB,KAA4B;AAC3B,IAAA,MAAM,qBAAqB,GAAG,0BAA0B,CAAC,oBAAoB,CAAC,CAAC;;IAG/E,MAAM,0BAA0B,GAAG,MAAM,CAAC,MAAM,CAAC,4BAA4B,CAAC,CAAC,IAAI,CACjF,CAAC,gBAAgB,KAAK,gBAAgB,CAAC,YAAY,KAAK,KAAK,CAC9D,CAAC;;;AAGF,IAAA,IAAI,uBAA4C,CAAC;IAEjD,MAAM,MAAM,GAKP,EAAE,CAAC;AAER,IAAA,KAAK,MAAM,UAAU,IAAI,WAAW,EAAE;AACpC,QAAA,IAAI,aAAiC,CAAC;QACtC,MAAM,gBAAgB,GAAG,4BAA4B,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;QACrE,IAAI,CAAC,gBAAgB,EAAE;YACrB,SAAS;SACV;QAED,MAAM,wCAAwC,GAAG,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,MAAM,CACtF,CAAC,GAAG,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,MAAM;AAC/B,YAAA,GAAG,GAAG;YACN,CAAC,YAAY,GAAG,6BAA6B,CAC3C,YAAY,EACZ,KAAK,EACL,qBAAqB,CACZ;SACZ,CAAC,EACF,EAAoC,CACrC,CAAC;AACF;;;;;AAKG;;QAGH,IAAI,0BAA0B,EAAE;AAC9B,YAAA,MAAM,eAAe,GAClB,wCAAwC,CAAC,YAAoC;AAC9E,gBAAA,uBAAuB,CAAC;YAC1B,uBAAuB,GAAG,eAAe,CAAC;AAC1C,YAAA,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,eAAe,CAAC,CAAC;AAC9D,YAAA,aAAa,GAAG,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;SAC1D;;QAGD,MAAM,QAAQ,GAAG,8BAA8B,CAC7C,aAAa,CAAC,wCAAwC,CAAC,EACvD,IAAI,CACL,CAAC;AACF;;;;;AAKG;;AAGH,QAAA,MAAM,aAAa,GAAG,sBAAsB,CAAC,QAAQ,CAAC,CAAC;AACvD;;AAEG;;QAGH,MAAM,SAAS,GAAG,uBAAuB;AACvC,cAAE,GAAG,CAAC,CAAC,GAAG,uBAAuB,EAAE,IAAI,CAAC,EAAE,EAAE,aAAa,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;cACnE,GAAG,CAAC,CAAG,EAAA,IAAI,CAAC,EAAE,CAAI,CAAA,EAAA,aAAa,CAAE,CAAA,CAAC,CAAC;;AAGvC,QAAA,MAAM,SAAS,GAAG,CAAY,SAAA,EAAA,SAAS,EAAE,CAAC;QAE1C,MAAM,CAAC,IAAI,CAAC;YACV,SAAS;YACT,mBAAmB,EAAE,UAAU,CAAC,KAAK;AACrC,YAAA,GAAG,EAAE,aAAa;YAClB,aAAa;AACd,SAAA,CAAC,CAAC;KACJ;AAED,IAAA,OAAO,MAAM,CAAC;AAChB;;;;"}

package/dist/index.d.ts

@@ -9,7 +9,7 @@ import * as _contentful_experiences_core_constants from '@contentful/experiences
 export { CF_STYLE_ATTRIBUTES, CONTENTFUL_COMPONENTS, LATEST_SCHEMA_VERSION } from '@contentful/experiences-core/constants';
 import { ContentfulClientApi } from 'contentful';
 
-declare const SDK_VERSION = "3.8.0-beta.1";
+declare const SDK_VERSION = "3.8.0-beta.3";
 
 type ExperienceRootProps = {
     experience?: Experience<EntityStore> | string | null;

package/dist/sdkVersion.js

@@ -1,4 +1,4 @@
-const SDK_VERSION = '3.8.0-beta.1';
+const SDK_VERSION = '3.8.0-beta.3';
 
 export { SDK_VERSION };
 //# sourceMappingURL=sdkVersion.js.map

package/dist/sdkVersion.js.map

@@ -1 +1 @@
-{"version":3,"file":"sdkVersion.js","sources":["../../src/sdkVersion.ts"],"sourcesContent":["export const SDK_VERSION = '3.8.0-beta.1';\n"],"names":[],"mappings":"AAAO,MAAM,WAAW,GAAG;;;;"}
+{"version":3,"file":"sdkVersion.js","sources":["../../src/sdkVersion.ts"],"sourcesContent":["export const SDK_VERSION = '3.8.0-beta.3';\n"],"names":[],"mappings":"AAAO,MAAM,WAAW,GAAG;;;;"}

package/dist/src/blocks/preview/CompositionBlock.d.ts

@@ -9,12 +9,12 @@ type CompositionBlockProps = {
     getPatternChildNodeClassName?: (childNodeId: string) => string | undefined;
     /** Set of definition IDs of wrapping patterns to prevent circular dependencies. */
     wrappingPatternIds?: Set<string>;
+    rootPatternParameters?: Record<string, Parameter>;
     /**
      * Chained IDs to ensure uniqueness across multiple instances of the same pattern
      * when storing & accessing cfSsrClassName.
      */
-    patternRootNodeIdsChain?: string;
-    wrappingParameters?: Record<string, Parameter>;
+    patternRootNodeIdsChain?: Array<string>;
 };
-export declare const CompositionBlock: ({ node: rawNode, locale, entityStore, hyperlinkPattern, resolveDesignValue, getPatternChildNodeClassName, wrappingPatternIds: parentWrappingPatternIds, wrappingParameters: parentWrappingParameters, patternRootNodeIdsChain: parentPatternRootNodeIdsChain, }: CompositionBlockProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const CompositionBlock: ({ node: rawNode, locale, entityStore, hyperlinkPattern, resolveDesignValue, getPatternChildNodeClassName, wrappingPatternIds: parentWrappingPatternIds, patternRootNodeIdsChain: parentPatternRootNodeIdsChain, rootPatternParameters, }: CompositionBlockProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/src/blocks/preview/PreviewDeliveryRoot.d.ts

@@ -4,5 +4,5 @@ type DeliveryRootProps = {
     experience: Experience<EntityStore>;
     locale: string;
 };
-export declare const PreviewDeliveryRoot: ({ locale, experience }: DeliveryRootProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const PreviewDeliveryRoot: ({ locale, experience }: DeliveryRootProps) => import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[] | null;
 export {};

package/dist/src/core/preview/PrebindingManager.d.ts

@@ -0,0 +1,152 @@
+import { ExperienceComponentSettings, ParameterDefinition } from '@contentful/experiences-core/types';
+export type ParameterDefinitionWithParameterId = {
+    parameterId: string;
+    parameter: ParameterDefinition;
+};
+/**
+ * PrebindingManager utility class for resolving parameter bindings across nested patterns.
+ *
+ * The core approach is to first resolve the top-level parameterId using `getParameterIdByNodeId`,
+ * which uses the paramIdToOverwriteIdMap, set when storing pre-binding based on the passToNodes chain to determine which parameter in the parent pattern
+ * overrides a given parameterId (with some additionally workaround due to node ID renaming for patterns).
+ * Once the owning top-level `parameterId` is found, we can follow the `passToNodes` chain back
+ * down to retrieve all nested overrides — including parameter definitions, allowed content types,
+ * and default sources — up to three levels deep.
+ *
+ * ## Lifecycle
+ * This utility class currently uses static state, with Zustand stores supplementing the “latest” data
+ * for root-level patterns data — for example, when overwriting content types on nested patterns or binding
+ * fields on simple patterns. If we need the override mappings to be reactive, we could easily move
+ * the full override chain tracking into Zustand but currently we can rely on the pattern definition
+ * stores we have currently.
+ *
+ * The state is populated during deserialization, where we call `storePrebindingDefinitions` for each
+ * pattern node. It is ready to be consumed at each level as nodes are deserialized top-down:
+ * 1. Pattern C (Template Pattern)
+ * 2. Pattern B (Nested Pattern)
+ * 3. Pattern A (Simple Pattern)
+ *
+ * At each level, accessing overrides is possible:
+ * - Pattern C has everything it needs once deserialized with its own parameters
+ * - Pattern B has everything it needs once deserialized, with its own parameters possibly overridden by C
+ * - Pattern A has its own parameters and possiblle overrites by B and/or C
+ *
+ * After actions that modify patterns without re-deserializing the tree — such as duplication,
+ * deletion, or detachment — this state must be kept up to date via storePrebindingDefinitions
+ * or storeParameterDefinitions if only parameter definitions are updated.
+ *
+ * ## Core Data Structures
+ *
+ *  - prebindingDefinitions           - A collection of all prebinding definitions aggregated
+ *                                       from the parent pattern down to all nested patterns.
+ *
+ *  - prebindingDefinitionIdsByNodeId - Same as above, but indexed by `nodeId`. This allows us
+ *                                       to easily find the prebinding definition id for a given node ID.
+ *
+ *  - parameterDefinitionsById        - A collection of all parameter definitions aggregated
+ *                                       from the parent pattern down to nested patterns.
+ *
+ *  - variableMappingByPatternId      - A collection of all variable mappings aggregated from
+ *                                       the parent pattern down to nested patterns, indexed by
+ *                                       `patternId` for efficient access.
+ *
+ *  - newToOriginalNodeIdMap          - When deserializing pattern child nodes, we replace their
+ *                                       node IDs with new ones based on their location inside the
+ *                                       pattern. This prevents conflicts when multiple instances
+ *                                       of the same pattern exist. The issue is that prebinding
+ *                                       `passToNodes` resolution requires the original node ID.
+ *                                       This map allows us to retrieve it to follow the chain.
+ *
+ *  - paramIdToOverwriteIdMap         - Tracks parameter ID overrides through the `passToNodes`
+ *                                       chain, allowing us to resolve overrides correctly from
+ *                                       the top-level parameter down to the lowest-level.
+ */
+export declare class PrebindingManager {
+    private static prebindingDefinitions;
+    private static prebindingDefinitionIdsByNodeId;
+    private static parameterDefinitionsById;
+    private static parameterDefinitionsByNodeId;
+    private static variableMappingByPatternId;
+    private static newToOriginalNodeIdMap;
+    private static paramIdToOverwriteIdMap;
+    /**
+     * Links new node IDs to original node IDs
+     * - This is used to track the original node IDs for pattern instances as we change them when deserializing pattern nodes.
+     * @param newNodeId
+     * @param originalNodeId
+     */
+    static linkOriginalNodeIds(newNodeId: string, originalNodeId: string): void;
+    /**
+     * Initializes the pattern editor manager by storing the definitions during deserialization
+     * for the root pattern and all nested patterns.
+     *
+     * @param nodeId - The ID of the pattern node.
+     * @param patternEntryId - The ID of the pattern entry from the patterns store.
+     * @param prebindingDefinitions - The prebinding definitions from the current pattern's component settings.
+     */
+    static storePrebindingDefinitions(nodeId: string, patternEntryId: string, prebindingDefinitions: NonNullable<ExperienceComponentSettings['prebindingDefinitions']>): void;
+    /**
+     * Stores parameter definitions for a given nodeId.
+     * @param nodeId - The ID of the node to store parameter definitions for.
+     * @param parameterDefinitions - The parameter definitions to store.
+     */
+    static storeParameterDefinitions(nodeId: string, parameterDefinitions?: Record<string, ParameterDefinition>): void;
+    /**
+     * Resolves the top-level parameterId for a given nodeId.
+     *
+     * @param nodeId - The nodeId to resolve the parameterId for
+     * @param useStoreParameters - Whether to use the zustand store parameters or not
+     * @returns string | undefined - The resolved parameterId or undefined if not found
+     **/
+    static getParameterIdByNodeId(nodeId: string): string | undefined;
+    static getParameterDefinitionsByParameterId(parameterId: string): (ParameterDefinitionWithParameterId | undefined)[] | undefined;
+    /**
+     * Returns all parameter definitions defined on the pattern of the given nodeId OR the pattern, wrapping the given nodeId
+     */
+    static getAllParameterDefinitionsForNodeId(nodeId: string): {
+        [k: string]: {
+            contentTypes: string[];
+            passToNodes: {
+                prebindingId: string;
+                parameterId: string;
+                nodeId: string;
+            }[];
+            defaultSource?: {
+                type: "Entry";
+                contentTypeId: string;
+                link: {
+                    sys: {
+                        type: "Link";
+                        id: string;
+                        linkType: "Entry";
+                    };
+                };
+            } | undefined;
+        };
+    };
+    /**
+     * Return all parameter ID's on a pattern by NodeId
+     * @param nodeId - The nodeId to return params for
+     * @returns string[] An array of parameter IDs or undefined
+     */
+    static getAllParameterIdsByNodeId(nodeId: string): string[] | undefined;
+    /**
+     * Get the highest level overriding parameterId for a given parameterId + nodeId combination
+     * @param parameterId - The parameter to resolve
+     * @param indexedNodeId - The indexed node ID to resolve the parameterId for
+     * @returns string - The resolved parameterId - will be from "root" in patterns or the parent pattern node in experiences
+     */
+    static getHoistedIdForParameterId(parameterId: string, indexedNodeId: string): string;
+    /**
+     * Retrieves the native parameter definition for a given nodeId. ie one without passToNodes on the node.
+     * @param nodeId - The nodeId to retrieve the native parameter definition for
+     * @returns The native parameter definition for the given nodeId, or undefined if not found
+     */
+    static getNativeParameterDefinitionByNodeId(nodeId: string): ParameterDefinitionWithParameterId | undefined;
+    private static extractNativeParameterDefinition;
+    /**
+     * Resets all properties of the PrebindingManager class
+     * triggered when we leave ExperienceBuilder back to experience folder view.
+     **/
+    static reset(): void;
+}

package/dist/src/core/preview/PrebindingManager.test.d.ts

@@ -0,0 +1 @@
+export {};