@uniformdev/canvas 19.49.1 → 19.49.4-alpha.67

package/dist/index.mjs

@@ -922,13 +922,93 @@ function isPromise(obj) {
   return !!obj && (typeof obj === "object" || typeof obj === "function") && typeof obj.then === "function";
 }
 
-// src/enhancement/walkComponentTree.ts
-function walkComponentTree(component, visitor, initialContext) {
-  var _a;
+// src/enhancement/getComponentPath.ts
+function getComponentPath(ancestorsAndSelf) {
+  const path = [];
+  for (let i = ancestorsAndSelf.length - 1; i >= 0; i--) {
+    const currentLocation = ancestorsAndSelf[i];
+    const parentLocation = ancestorsAndSelf[i + 1];
+    if ("type" in currentLocation && currentLocation.type !== "slot") {
+      if (currentLocation.type === "block") {
+        const { fieldName, blockIndex } = currentLocation;
+        if (fieldName && blockIndex !== void 0) {
+          const noun = parentLocation && "type" in parentLocation && parentLocation.type === "block" ? "fields" : "parameters";
+          path.push(`${noun}.${fieldName}.value[${blockIndex}]`);
+        }
+      } else {
+      }
+      continue;
+    }
+    const { parentSlot, parentSlotIndex } = currentLocation;
+    if (parentSlot && parentSlotIndex !== void 0) {
+      path.push(`${parentSlot}[${parentSlotIndex}]`);
+    }
+  }
+  return `.${path.join(".")}`;
+}
+
+// src/utils/constants.ts
+var CANVAS_PERSONALIZE_TYPE = "$personalization";
+var CANVAS_TEST_TYPE = "$test";
+var CANVAS_LOCALIZATION_TYPE = "$localization";
+var CANVAS_INTENT_TAG_PARAM = "intentTag";
+var CANVAS_LOCALE_TAG_PARAM = "locale";
+var CANVAS_BLOCK_PARAM_TYPE = "$block";
+var CANVAS_PERSONALIZE_SLOT = "pz";
+var CANVAS_TEST_SLOT = "test";
+var CANVAS_LOCALIZATION_SLOT = "localized";
+var CANVAS_DRAFT_STATE = 0;
+var CANVAS_PUBLISHED_STATE = 64;
+var CANVAS_EDITOR_STATE = 63;
+var CANVAS_PERSONALIZATION_PARAM = "$pzCrit";
+var CANVAS_TEST_VARIANT_PARAM = "$tstVrnt";
+var CANVAS_ENRICHMENT_TAG_PARAM = "$enr";
+var IN_CONTEXT_EDITOR_QUERY_STRING_PARAM = "is_incontext_editing_mode";
+var IN_CONTEXT_EDITOR_PLAYGROUND_QUERY_STRING_PARAM = "is_incontext_editing_playground";
+var IN_CONTEXT_EDITOR_CONFIG_CHECK_QUERY_STRING_PARAM = "is_config_check";
+var IN_CONTEXT_EDITOR_COMPONENT_START_ROLE = "uniform-component-start";
+var IN_CONTEXT_EDITOR_COMPONENT_END_ROLE = "uniform-component-end";
+var IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID = "uniform-canvas-preview-script";
+var IS_RENDERED_BY_UNIFORM_ATTRIBUTE = "data-is-rendered-by-uniform";
+var PLACEHOLDER_ID = "placeholder";
+var EMPTY_COMPOSITION = {
+  _id: "_empty_composition_id",
+  _name: "An empty composition used for contextual editing",
+  type: "_empty_composition_type"
+};
+var EDGE_MIN_CACHE_TTL = 15;
+var EDGE_MAX_CACHE_TTL = 600;
+var EDGE_DEFAULT_CACHE_TTL = 30;
+var EDGE_CACHE_DISABLED = -1;
+var EDGE_MIN_L2_CACHE_TTL_IN_HOURS = 1;
+var EDGE_MAX_L2_CACHE_TTL_IN_HOURS = 4 * 7 * 24;
+var EDGE_DEFAULT_L2_CACHE_TTL_IN_HOURS = 24;
+
+// src/utils/entryConverter.ts
+function convertEntryToPutEntry(entry) {
+  return {
+    entry: {
+      type: entry.entry.type,
+      _dataResources: entry.entry._dataResources,
+      _id: entry.entry._id,
+      _slug: entry.entry._slug,
+      fields: entry.entry.fields
+    },
+    state: entry.state,
+    projectId: entry.projectId
+  };
+}
+function getPropertiesValue(entity) {
+  return "parameters" in entity && entity.parameters ? entity.parameters : "fields" in entity && entity.fields ? entity.fields : void 0;
+}
+
+// src/enhancement/walkNodeTree.ts
+function walkNodeTree(node, visitor, options) {
+  var _a, _b;
   const componentQueue = [
     {
-      ancestorsAndSelf: [{ component, parentSlot: void 0, parentSlotIndex: void 0 }],
-      context: initialContext
+      ancestorsAndSelf: Array.isArray(node) ? node : [{ node, type: "root" }],
+      context: options == null ? void 0 : options.initialContext
     }
   ];
   const childContexts = /* @__PURE__ */ new Map();
@@ -938,81 +1018,182 @@ function walkComponentTree(component, visitor, initialContext) {
       continue;
     const currentComponent = currentQueueEntry.ancestorsAndSelf[0];
     let visitDescendants = true;
-    let descendantContext = (_a = childContexts.get(currentComponent.component)) != null ? _a : currentQueueEntry.context;
-    visitor(
-      currentComponent.component,
-      currentQueueEntry.ancestorsAndSelf,
-      {
-        replaceComponent: (replacementComponent) => {
-          Object.assign(currentComponent.component, replacementComponent);
-          const propertiesToCheck = [
-            "parameters",
-            "variant",
-            "slots",
-            "data",
-            "_pattern",
-            "_patternError"
-          ];
-          propertiesToCheck.forEach((property) => {
-            if (!replacementComponent[property]) {
-              delete currentComponent.component[property];
+    let descendantContext = (_a = childContexts.get(currentComponent.node)) != null ? _a : currentQueueEntry.context;
+    let visitorInfo;
+    if (currentComponent.type === "root" || currentComponent.type === "slot") {
+      visitorInfo = {
+        type: "component",
+        node: currentComponent.node,
+        ancestorsAndSelf: currentQueueEntry.ancestorsAndSelf,
+        actions: {
+          replace: (replacementComponent) => {
+            Object.assign(currentComponent.node, replacementComponent);
+            const propertiesToCheck = [
+              "parameters",
+              "variant",
+              "slots",
+              "data",
+              "_pattern",
+              "_patternError",
+              "_dataResources",
+              "_overridability",
+              "_overrides",
+              "_patternDataResources"
+            ];
+            propertiesToCheck.forEach((property) => {
+              if (!replacementComponent[property]) {
+                delete currentComponent.node[property];
+              }
+            });
+          },
+          remove: () => {
+            const currentComponentLocation = currentQueueEntry.ancestorsAndSelf[0];
+            const parentComponent = currentQueueEntry.ancestorsAndSelf[1];
+            if (currentComponentLocation.type === "root") {
+              throw new Error("Unable to delete root node.");
             }
-          });
-        },
-        removeComponent: () => {
-          const { parentSlot, parentSlotIndex } = currentQueueEntry.ancestorsAndSelf[0];
-          const parentComponent = currentQueueEntry.ancestorsAndSelf[1];
-          if (parentSlot && typeof parentSlotIndex !== "undefined") {
-            parentComponent.component.slots[parentSlot].splice(parentSlotIndex, 1);
-          } else {
-            throw new Error("Unable to delete composition.");
+            if (currentComponentLocation.type === "slot") {
+              const { parentSlot, parentSlotIndex } = currentComponentLocation;
+              parentComponent.node.slots[parentSlot].splice(parentSlotIndex, 1);
+            } else {
+              throw new Error("Unknown node type");
+            }
+          },
+          insertAfter: (nodes) => {
+            const nodesToInsert = Array.isArray(nodes) ? nodes : [nodes];
+            const currentNodeInfo = currentQueueEntry.ancestorsAndSelf[0];
+            if (currentNodeInfo.type === "root") {
+              throw new Error("Unable to insert after root node.");
+            }
+            if (currentNodeInfo.type === "slot") {
+              const { parentSlot, parentSlotIndex } = currentNodeInfo;
+              const parentComponent = currentQueueEntry.ancestorsAndSelf[1];
+              if (parentSlot && typeof parentSlotIndex !== "undefined") {
+                parentComponent.node.slots[parentSlot].splice(
+                  parentSlotIndex + 1,
+                  0,
+                  ...nodesToInsert
+                );
+                componentQueue.unshift(
+                  ...nodesToInsert.map((enqueueingComponent) => ({
+                    type: "slot",
+                    ancestorsAndSelf: [
+                      {
+                        type: "slot",
+                        node: enqueueingComponent,
+                        parentSlot,
+                        get parentSlotIndex() {
+                          return parentComponent.node.slots[parentSlot].findIndex(
+                            (x) => x === enqueueingComponent
+                          );
+                        }
+                      },
+                      // slice removes 'self' since we are inserting a peer of self
+                      ...currentQueueEntry.ancestorsAndSelf.slice(1)
+                    ],
+                    context: descendantContext
+                  }))
+                );
+              }
+            } else {
+              throw new Error("Unknown type");
+            }
+          },
+          stopProcessingDescendants() {
+            visitDescendants = false;
+          },
+          setDescendantsContext(context) {
+            descendantContext = context;
+          },
+          setChildContext(child, context) {
+            childContexts.set(child, context);
           }
         },
-        insertAfter: (components) => {
-          const componentsToInsert = Array.isArray(components) ? components : [components];
-          const { parentSlot, parentSlotIndex } = currentQueueEntry.ancestorsAndSelf[0];
-          const parentComponent = currentQueueEntry.ancestorsAndSelf[1];
-          if (parentSlot && typeof parentSlotIndex !== "undefined") {
-            parentComponent.component.slots[parentSlot].splice(
-              parentSlotIndex + 1,
-              0,
-              ...componentsToInsert
-            );
-            componentQueue.unshift(
-              ...componentsToInsert.map((enqueueingComponent) => ({
-                ancestorsAndSelf: [
-                  {
-                    component: enqueueingComponent,
-                    parentSlot,
-                    get parentSlotIndex() {
-                      return parentComponent.component.slots[parentSlot].findIndex(
-                        (x) => x === enqueueingComponent
-                      );
-                    }
-                  },
-                  ...currentQueueEntry.ancestorsAndSelf
-                ],
-                context: descendantContext
-              }))
-            );
-          } else {
-            throw new Error("Unable to insert after a component not in a slot.");
+        context: descendantContext
+      };
+    } else {
+      visitorInfo = {
+        type: "entry",
+        node: currentComponent.node,
+        ancestorsAndSelf: currentQueueEntry.ancestorsAndSelf,
+        actions: {
+          replace: (replacementNode) => {
+            Object.assign(currentComponent.node, replacementNode);
+            const propertiesToCheck = ["fields", "_dataResources", "_author"];
+            propertiesToCheck.forEach((property) => {
+              if (!replacementNode[property]) {
+                delete currentComponent.node[property];
+              }
+            });
+          },
+          remove: () => {
+            const currentComponentLocation = currentQueueEntry.ancestorsAndSelf[0];
+            const parentComponent = currentQueueEntry.ancestorsAndSelf[1];
+            if (currentComponentLocation.type === "block") {
+              const { fieldName, blockIndex } = currentComponentLocation;
+              const blockValue = getBlockValue(parentComponent.node, fieldName);
+              blockValue.splice(blockIndex, 1);
+              if (blockValue.length === 0) {
+                const properties2 = getPropertiesValue(parentComponent.node);
+                delete properties2[fieldName];
+              }
+            } else {
+              throw new Error("Unknown node type");
+            }
+          },
+          insertAfter: (nodes) => {
+            const currentNodeInfo = currentQueueEntry.ancestorsAndSelf[0];
+            if (currentNodeInfo.type !== "block") {
+              throw new Error("Unknown type");
+            }
+            const { fieldName, blockIndex } = currentNodeInfo;
+            const parentComponent = currentQueueEntry.ancestorsAndSelf[1];
+            const nodesToInsert = Array.isArray(nodes) ? nodes : [nodes];
+            if (fieldName && typeof blockIndex !== "undefined") {
+              getPropertiesValue(parentComponent.node)[fieldName].value.splice(
+                blockIndex + 1,
+                0,
+                ...nodesToInsert
+              );
+              componentQueue.unshift(
+                ...nodesToInsert.map((enqueueingComponent) => ({
+                  ancestorsAndSelf: [
+                    {
+                      type: "block",
+                      node: enqueueingComponent,
+                      fieldName,
+                      get blockIndex() {
+                        const parentArray = getPropertiesValue(parentComponent.node)[fieldName].value;
+                        return parentArray.findIndex((x) => x === enqueueingComponent);
+                      }
+                    },
+                    // slice removes 'self' since we are inserting a peer of self
+                    ...currentQueueEntry.ancestorsAndSelf.slice(1)
+                  ],
+                  context: descendantContext
+                }))
+              );
+            }
+          },
+          stopProcessingDescendants() {
+            visitDescendants = false;
+          },
+          setDescendantsContext(context) {
+            descendantContext = context;
+          },
+          setChildContext(child, context) {
+            childContexts.set(child, context);
           }
         },
-        stopProcessingDescendants() {
-          visitDescendants = false;
-        },
-        setDescendantsContext(context) {
-          descendantContext = context;
-        },
-        setChildContext(child, context) {
-          childContexts.set(child, context);
-        }
-      },
-      descendantContext
-    );
-    const slots = currentComponent.component.slots;
-    if (visitDescendants && slots) {
+        context: descendantContext
+      };
+    }
+    visitor(visitorInfo);
+    if (!visitDescendants) {
+      continue;
+    }
+    const slots = "slots" in currentComponent.node && currentComponent.node.slots;
+    if (slots) {
       const slotKeys = Object.keys(slots);
       for (let slotIndex = slotKeys.length - 1; slotIndex >= 0; slotIndex--) {
         const slotKey = slotKeys[slotIndex];
@@ -1022,10 +1203,11 @@ function walkComponentTree(component, visitor, initialContext) {
           componentQueue.push({
             ancestorsAndSelf: [
               {
-                component: enqueueingComponent,
+                type: "slot",
+                node: enqueueingComponent,
                 parentSlot: slotKey,
                 get parentSlotIndex() {
-                  return currentComponent.component.slots[slotKey].findIndex(
+                  return currentComponent.node.slots[slotKey].findIndex(
                     (x) => x === enqueueingComponent
                   );
                 }
@@ -1037,27 +1219,44 @@ function walkComponentTree(component, visitor, initialContext) {
         }
       }
     }
-  } while (componentQueue.length > 0);
-}
-function getComponentPath(ancestorsAndSelf) {
-  const path = [];
-  for (let i = ancestorsAndSelf.length - 1; i >= 0; i--) {
-    const { parentSlot, parentSlotIndex } = ancestorsAndSelf[i];
-    if (parentSlot && parentSlotIndex !== void 0) {
-      path.push(`${parentSlot}[${parentSlotIndex}]`);
+    const properties = getPropertiesValue(currentComponent.node);
+    if (properties) {
+      const propertyEntries = Object.entries(properties);
+      for (let propIndex = propertyEntries.length - 1; propIndex >= 0; propIndex--) {
+        const [propKey, propObject] = propertyEntries[propIndex];
+        if (propObject.type !== CANVAS_BLOCK_PARAM_TYPE)
+          continue;
+        const blocks = (_b = propObject.value) != null ? _b : [];
+        for (let blockIndex = blocks.length - 1; blockIndex >= 0; blockIndex--) {
+          const enqueueingBlock = blocks[blockIndex];
+          componentQueue.push({
+            ancestorsAndSelf: [
+              {
+                type: "block",
+                node: enqueueingBlock,
+                fieldName: propKey,
+                get blockIndex() {
+                  return getBlockValue(currentComponent.node, propKey).findIndex(
+                    (x) => x === enqueueingBlock
+                  );
+                }
+              },
+              ...currentQueueEntry.ancestorsAndSelf
+            ],
+            context: descendantContext
+          });
+        }
+      }
     }
-  }
-  return `.${path.join(".")}`;
+  } while (componentQueue.length > 0);
 }
-function getComponentJsonPointer(ancestorsAndSelf, { withSlots = false } = {}) {
-  const path = [];
-  for (let i = ancestorsAndSelf.length - 1; i >= 0; i--) {
-    const { parentSlot, parentSlotIndex } = ancestorsAndSelf[i];
-    if (parentSlot && parentSlotIndex !== void 0) {
-      path.push(`${parentSlot}/${parentSlotIndex}`);
-    }
+function getBlockValue(component, parameterName) {
+  var _a;
+  const parameter = (_a = getPropertiesValue(component)) == null ? void 0 : _a[parameterName];
+  if ((parameter == null ? void 0 : parameter.value) && parameter.type === CANVAS_BLOCK_PARAM_TYPE && Array.isArray(parameter.value)) {
+    return parameter.value;
   }
-  return withSlots ? `/slots/${path.join("/slots/")}` : `/${path.join("/")}`;
+  return [];
 }
 
 // src/enhancement/enhance.ts
@@ -1077,19 +1276,21 @@ async function enhance({
   const promises = [];
   const usedComponentEnhancers = /* @__PURE__ */ new Set();
   const usedParameterEnhancers = /* @__PURE__ */ new Set();
-  walkComponentTree(composition, (currentComponent, componentContext) => {
+  walkNodeTree(composition, ({ type, node, ancestorsAndSelf, actions }) => {
     var _a;
-    Object.entries((_a = currentComponent.parameters) != null ? _a : {}).forEach(([paramName, paramValue]) => {
-      const enhancer = enhancers.resolveParameterEnhancer(currentComponent, paramName, paramValue);
+    if (type !== "component") {
+      actions.stopProcessingDescendants();
+      return;
+    }
+    Object.entries((_a = node.parameters) != null ? _a : {}).forEach(([paramName, paramValue]) => {
+      const enhancer = enhancers.resolveParameterEnhancer(node, paramName, paramValue);
       if (enhancer) {
         usedParameterEnhancers.add(enhancer);
-        promises.push(
-          enhanceParameter(currentComponent, componentContext, paramName, paramValue, enhancer, context)
-        );
+        promises.push(enhanceParameter(node, ancestorsAndSelf, paramName, paramValue, enhancer, context));
       }
     });
-    const componentEnhancers = enhancers.resolveComponentEnhancers(currentComponent);
-    promises.push(enhanceComponent(currentComponent, componentContext, componentEnhancers, context));
+    const componentEnhancers = enhancers.resolveComponentEnhancers(node);
+    promises.push(enhanceComponent(node, ancestorsAndSelf, componentEnhancers, context));
     usedComponentEnhancers.add(componentEnhancers);
   });
   promises.push(
@@ -1307,41 +1508,30 @@ var EnhancerBuilder = class {
   }
 };
 
-// src/utils/constants.ts
-var CANVAS_PERSONALIZE_TYPE = "$personalization";
-var CANVAS_TEST_TYPE = "$test";
-var CANVAS_LOCALIZATION_TYPE = "$localization";
-var CANVAS_INTENT_TAG_PARAM = "intentTag";
-var CANVAS_LOCALE_TAG_PARAM = "locale";
-var CANVAS_PERSONALIZE_SLOT = "pz";
-var CANVAS_TEST_SLOT = "test";
-var CANVAS_LOCALIZATION_SLOT = "localized";
-var CANVAS_DRAFT_STATE = 0;
-var CANVAS_PUBLISHED_STATE = 64;
-var CANVAS_EDITOR_STATE = 63;
-var CANVAS_PERSONALIZATION_PARAM = "$pzCrit";
-var CANVAS_TEST_VARIANT_PARAM = "$tstVrnt";
-var CANVAS_ENRICHMENT_TAG_PARAM = "$enr";
-var IN_CONTEXT_EDITOR_QUERY_STRING_PARAM = "is_incontext_editing_mode";
-var IN_CONTEXT_EDITOR_PLAYGROUND_QUERY_STRING_PARAM = "is_incontext_editing_playground";
-var IN_CONTEXT_EDITOR_CONFIG_CHECK_QUERY_STRING_PARAM = "is_config_check";
-var IN_CONTEXT_EDITOR_COMPONENT_START_ROLE = "uniform-component-start";
-var IN_CONTEXT_EDITOR_COMPONENT_END_ROLE = "uniform-component-end";
-var IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID = "uniform-canvas-preview-script";
-var IS_RENDERED_BY_UNIFORM_ATTRIBUTE = "data-is-rendered-by-uniform";
-var PLACEHOLDER_ID = "placeholder";
-var EMPTY_COMPOSITION = {
-  _id: "_empty_composition_id",
-  _name: "An empty composition used for contextual editing",
-  type: "_empty_composition_type"
-};
-var EDGE_MIN_CACHE_TTL = 15;
-var EDGE_MAX_CACHE_TTL = 600;
-var EDGE_DEFAULT_CACHE_TTL = 30;
-var EDGE_CACHE_DISABLED = -1;
-var EDGE_MIN_L2_CACHE_TTL_IN_HOURS = 1;
-var EDGE_MAX_L2_CACHE_TTL_IN_HOURS = 4 * 7 * 24;
-var EDGE_DEFAULT_L2_CACHE_TTL_IN_HOURS = 24;
+// src/enhancement/getComponentJsonPointer.ts
+function getComponentJsonPointer(ancestorsAndSelf) {
+  const path = [];
+  for (let i = ancestorsAndSelf.length - 1; i >= 0; i--) {
+    const currentLocation = ancestorsAndSelf[i];
+    const parentLocation = ancestorsAndSelf[i + 1];
+    if ("type" in currentLocation && currentLocation.type !== "slot") {
+      if (currentLocation.type === "block") {
+        const { fieldName: parameterName, blockIndex } = currentLocation;
+        if (parameterName && blockIndex !== void 0) {
+          const noun = parentLocation && "type" in parentLocation && parentLocation.type === "block" ? "fields" : "parameters";
+          path.push(`${noun}/${parameterName}/value/${blockIndex}`);
+        }
+      } else {
+      }
+      continue;
+    }
+    const { parentSlot, parentSlotIndex } = currentLocation;
+    if (parentSlot && parentSlotIndex !== void 0) {
+      path.push(`slots/${parentSlot}/${parentSlotIndex}`);
+    }
+  }
+  return `/${path.join("/")}`;
+}
 
 // src/enhancement/localize.ts
 function extractLocales({ component }) {
@@ -1362,22 +1552,26 @@ function localize({
   composition,
   locale
 }) {
-  walkComponentTree(composition, (currentComponent, _componentContext, actions) => {
-    if (currentComponent.type === CANVAS_LOCALIZATION_TYPE) {
-      const locales = extractLocales({ component: currentComponent });
-      const resolvedLocale = typeof locale === "string" ? locale : locale({ component: currentComponent, locales });
+  walkNodeTree(composition, ({ type, node, actions }) => {
+    if (type !== "component") {
+      actions.stopProcessingDescendants();
+      return;
+    }
+    if (node.type === CANVAS_LOCALIZATION_TYPE) {
+      const locales = extractLocales({ component: node });
+      const resolvedLocale = typeof locale === "string" ? locale : locale({ component: node, locales });
       let replaceComponent;
       if (resolvedLocale) {
         replaceComponent = locales[resolvedLocale];
       }
       if (replaceComponent == null ? void 0 : replaceComponent.length) {
         const [first, ...rest] = replaceComponent;
-        actions.replaceComponent(first);
+        actions.replace(first);
         if (rest.length) {
           actions.insertAfter(rest);
         }
       } else {
-        actions.removeComponent();
+        actions.remove();
       }
     }
   });
@@ -1410,6 +1604,124 @@ var UniqueBatchEntries = class {
   }
 };
 
+// src/enhancement/walkComponentTree.ts
+function walkComponentTree(component, visitor, initialContext) {
+  var _a;
+  const componentQueue = [
+    {
+      ancestorsAndSelf: [{ component, parentSlot: void 0, parentSlotIndex: void 0 }],
+      context: initialContext
+    }
+  ];
+  const childContexts = /* @__PURE__ */ new Map();
+  do {
+    const currentQueueEntry = componentQueue.pop();
+    if (!currentQueueEntry)
+      continue;
+    const currentComponent = currentQueueEntry.ancestorsAndSelf[0];
+    let visitDescendants = true;
+    let descendantContext = (_a = childContexts.get(currentComponent.component)) != null ? _a : currentQueueEntry.context;
+    visitor(
+      currentComponent.component,
+      currentQueueEntry.ancestorsAndSelf,
+      {
+        replaceComponent: (replacementComponent) => {
+          Object.assign(currentComponent.component, replacementComponent);
+          const propertiesToCheck = [
+            "parameters",
+            "variant",
+            "slots",
+            "data",
+            "_pattern",
+            "_patternError"
+          ];
+          propertiesToCheck.forEach((property) => {
+            if (!replacementComponent[property]) {
+              delete currentComponent.component[property];
+            }
+          });
+        },
+        removeComponent: () => {
+          const { parentSlot, parentSlotIndex } = currentQueueEntry.ancestorsAndSelf[0];
+          const parentComponent = currentQueueEntry.ancestorsAndSelf[1];
+          if (parentSlot && typeof parentSlotIndex !== "undefined") {
+            parentComponent.component.slots[parentSlot].splice(parentSlotIndex, 1);
+          } else {
+            throw new Error("Unable to delete composition.");
+          }
+        },
+        insertAfter: (components) => {
+          const componentsToInsert = Array.isArray(components) ? components : [components];
+          const { parentSlot, parentSlotIndex } = currentQueueEntry.ancestorsAndSelf[0];
+          const parentComponent = currentQueueEntry.ancestorsAndSelf[1];
+          if (parentSlot && typeof parentSlotIndex !== "undefined") {
+            parentComponent.component.slots[parentSlot].splice(
+              parentSlotIndex + 1,
+              0,
+              ...componentsToInsert
+            );
+            componentQueue.unshift(
+              ...componentsToInsert.map((enqueueingComponent) => ({
+                ancestorsAndSelf: [
+                  {
+                    component: enqueueingComponent,
+                    parentSlot,
+                    get parentSlotIndex() {
+                      return parentComponent.component.slots[parentSlot].findIndex(
+                        (x) => x === enqueueingComponent
+                      );
+                    }
+                  },
+                  ...currentQueueEntry.ancestorsAndSelf
+                ],
+                context: descendantContext
+              }))
+            );
+          } else {
+            throw new Error("Unable to insert after a component not in a slot.");
+          }
+        },
+        stopProcessingDescendants() {
+          visitDescendants = false;
+        },
+        setDescendantsContext(context) {
+          descendantContext = context;
+        },
+        setChildContext(child, context) {
+          childContexts.set(child, context);
+        }
+      },
+      descendantContext
+    );
+    const slots = currentComponent.component.slots;
+    if (visitDescendants && slots) {
+      const slotKeys = Object.keys(slots);
+      for (let slotIndex = slotKeys.length - 1; slotIndex >= 0; slotIndex--) {
+        const slotKey = slotKeys[slotIndex];
+        const components = slots[slotKey];
+        for (let componentIndex = components.length - 1; componentIndex >= 0; componentIndex--) {
+          const enqueueingComponent = components[componentIndex];
+          componentQueue.push({
+            ancestorsAndSelf: [
+              {
+                component: enqueueingComponent,
+                parentSlot: slotKey,
+                get parentSlotIndex() {
+                  return currentComponent.component.slots[slotKey].findIndex(
+                    (x) => x === enqueueingComponent
+                  );
+                }
+              },
+              ...currentQueueEntry.ancestorsAndSelf
+            ],
+            context: descendantContext
+          });
+        }
+      }
+    }
+  } while (componentQueue.length > 0);
+}
+
 // src/utils/hash.ts
 var generateHash = ({
   composition,
@@ -1435,6 +1747,9 @@ var isSelectComponentMessage = (message) => {
 var isReadyMessage = (message) => {
   return message.type === "ready";
 };
+var isComponentActionMessage = (message) => {
+  return message.type === "trigger-component-action";
+};
 var isUpdateCompositionMessage = (message) => {
   return message.type === "update-composition";
 };
@@ -1468,6 +1783,12 @@ var isReportRenderedCompositionsMessage = (message) => {
 var isSelectParameterMessage = (message) => {
   return message.type === "select-parameter";
 };
+var isOpenParameterEditorMessage = (message) => {
+  return message.type === "open-parameter-editor";
+};
+var isUpdateComponentReferencesMessage = (message) => {
+  return message.type === "update-component-references";
+};
 var createCanvasChannel = ({
   listenTo,
   broadcastTo
@@ -1528,6 +1849,13 @@ var createCanvasChannel = ({
     };
     postMessage(message);
   };
+  const triggerComponentAction = (options) => {
+    const message = {
+      ...options,
+      type: "trigger-component-action"
+    };
+    postMessage(message);
+  };
   const addComponent = (options) => {
     const message = {
       ...options,
@@ -1570,12 +1898,7 @@ var createCanvasChannel = ({
     };
     postMessage(message);
   };
-  const updateContextualEditingStateInternal = (options) => {
-    const message = {
-      ...options,
-      type: "update-contextual-editing-state-internal"
-    };
-    postMessage(message);
+  const updateContextualEditingStateInternal = () => {
   };
   const reportRenderedCompositions = (options) => {
     const message = {
@@ -1591,12 +1914,26 @@ var createCanvasChannel = ({
     };
     postMessage(message);
   };
+  const openParameterEditor = (options) => {
+    const message = {
+      ...options,
+      type: "open-parameter-editor"
+    };
+    postMessage(message);
+  };
   const editorStateUpdated = () => {
     const message = {
       type: "editor-state-updated"
     };
     postMessage(message);
   };
+  const updateComponentReferences = (options) => {
+    const message = {
+      ...options,
+      type: "update-component-references"
+    };
+    postMessage(message);
+  };
   const messageEventListener = (event) => {
     if (typeof event.data !== "string") {
       return;
@@ -1626,6 +1963,7 @@ var createCanvasChannel = ({
   return {
     ready,
     destroy,
+    triggerComponentAction,
     selectComponent,
     updateComposition,
     updateCompositionInternal,
@@ -1638,8 +1976,10 @@ var createCanvasChannel = ({
     updatePreviewSettings,
     updateContextualEditingStateInternal,
     selectParameter,
+    openParameterEditor,
     reportRenderedCompositions,
-    editorStateUpdated
+    editorStateUpdated,
+    updateComponentReferences
   };
 };
 
@@ -1830,6 +2170,17 @@ function mapSlotToTestVariations(slot) {
   });
 }
 
+// src/utils/placeholder.ts
+var isComponentPlaceholderId = (id) => {
+  if (id === PLACEHOLDER_ID) {
+    return true;
+  }
+  return id == null ? void 0 : id.startsWith(PLACEHOLDER_ID);
+};
+var generateComponentPlaceholderId = (randomId) => {
+  return `${PLACEHOLDER_ID}_${randomId}`;
+};
+
 // src/utils/variables/parseVariableExpression.ts
 var escapeCharacter = "\\";
 var variablePrefix = "${";
@@ -1965,7 +2316,15 @@ function bindVariablesToObjectRecursive({
           boundCount += bindResult.boundCount;
           draft[property] = bindResult.result;
           if (bindResult.errors) {
-            errors.push(...bindResult.errors.map((e) => `${currentObjectPath}: ${e}`));
+            errors.push(
+              ...bindResult.errors.map((e) => {
+                if (typeof e === "string") {
+                  return `${currentObjectPath}: ${e}`;
+                }
+                e.message = `${currentObjectPath}: ${e.message}`;
+                return e;
+              })
+            );
           }
         }
         return;
@@ -2016,6 +2375,7 @@ export {
   ATTRIBUTE_PLACEHOLDER,
   ApiClientError2 as ApiClientError,
   BatchEntry,
+  CANVAS_BLOCK_PARAM_TYPE,
   CANVAS_DRAFT_STATE,
   CANVAS_EDITOR_STATE,
   CANVAS_ENRICHMENT_TAG_PARAM,
@@ -2062,6 +2422,7 @@ export {
   bindVariables,
   bindVariablesToObject,
   compose,
+  convertEntryToPutEntry,
   createBatchEnhancer,
   createCanvasChannel,
   createEventBus,
@@ -2070,14 +2431,20 @@ export {
   createVariableReference,
   enhance,
   extractLocales,
+  generateComponentPlaceholderId,
   generateHash,
+  getBlockValue,
   getChannelName,
   getComponentJsonPointer,
   getComponentPath,
   getParameterAttributes,
+  getPropertiesValue,
   isAddComponentMessage,
+  isComponentActionMessage,
+  isComponentPlaceholderId,
   isDismissPlaceholderMessage,
   isMovingComponentMessage,
+  isOpenParameterEditorMessage,
   isReadyMessage,
   isReportRenderedCompositionsMessage,
   isSelectComponentMessage,
@@ -2085,6 +2452,7 @@ export {
   isSystemComponentDefinition,
   isTriggerCompositionActionMessage,
   isUpdateComponentParameterMessage,
+  isUpdateComponentReferencesMessage,
   isUpdateCompositionInternalMessage,
   isUpdateCompositionMessage,
   isUpdateContextualEditingStateInternalMessage,
@@ -2096,5 +2464,6 @@ export {
   parseVariableExpression,
   subscribeToComposition,
   unstable_CompositionRelationshipClient,
-  walkComponentTree
+  walkComponentTree,
+  walkNodeTree
 };