@elementor/editor-canvas 4.1.0-761 → 4.1.0-763

package/dist/index.js

@@ -221,6 +221,15 @@ Variables from the user context ARE NOT SUPPORTED AND WILL RESOLVE IN ERROR.
         llmGuidance.instructions = "These are the default styles applied to the widget. Override only when necessary.";
         llmGuidance.default_styles = defaultStyles;
       }
+      const allowedChildTypes = widgetData.allowed_child_types;
+      const allWidgets = (0, import_editor_elements.getWidgetsCache)() || {};
+      const allowedParents = Object.entries(allWidgets).filter(([, parentConfig]) => parentConfig.allowed_child_types?.includes(widgetType)).map(([parentType]) => parentType);
+      if (allowedChildTypes?.length || allowedParents.length) {
+        llmGuidance.nesting = {
+          ...allowedChildTypes?.length ? { allowed_child_types: allowedChildTypes } : {},
+          ...allowedParents.length ? { allowed_parents: allowedParents } : {}
+        };
+      }
       return {
         contents: [
           {
@@ -3502,7 +3511,6 @@ var CompositionBuilder = class _CompositionBuilder {
   elementStylesConfig = {};
   elementCusomCSS = {};
   rootContainers = [];
-  containerElements = [];
   api = {
     createElement: import_editor_elements9.createElement,
     getWidgetsCache: import_editor_elements9.getWidgetsCache,
@@ -3543,45 +3551,49 @@ var CompositionBuilder = class _CompositionBuilder {
   getXML() {
     return this.xml;
   }
-  iterateBuild(node, containerElement, childIndex) {
+  buildModelTree(node, widgetsCache) {
     const elementTag = node.tagName;
-    const isContainer = this.containerElements.includes(elementTag);
-    const parentElType = containerElement.model.get("elType");
-    let targetContainer = parentElType === "e-tabs" ? containerElement.children?.[1].children?.[childIndex] || containerElement.children?.[1] : containerElement;
-    if (!targetContainer) {
-      targetContainer = containerElement;
-    }
-    const newElement = isContainer ? this.api.createElement({
-      container: targetContainer,
-      model: {
-        elType: elementTag,
-        id: (0, import_editor_elements9.generateElementId)(),
-        editor_settings: {
-          title: node.getAttribute("configuration-id") ?? void 0
-        }
-      },
-      options: { useHistory: false }
-    }) : this.api.createElement({
-      container: targetContainer,
-      model: {
-        elType: "widget",
-        widgetType: elementTag,
-        id: (0, import_editor_elements9.generateElementId)(),
-        editor_settings: {
-          title: node.getAttribute("configuration-id") ?? void 0
+    const isWidget = widgetsCache[elementTag]?.elType === "widget";
+    const id = this.api.generateElementId();
+    const children = Array.from(node.children).map((child) => this.buildModelTree(child, widgetsCache));
+    node.setAttribute("id", id);
+    const base = {
+      id,
+      skipDefaultChildren: true,
+      elements: children,
+      editor_settings: {
+        title: node.getAttribute("configuration-id") ?? void 0
+      }
+    };
+    if (isWidget) {
+      return { ...base, elType: "widget", widgetType: elementTag };
+    }
+    return { ...base, elType: elementTag };
+  }
+  async awaitViewRender(element) {
+    const view = element.view;
+    if (view?._currentRenderPromise instanceof Promise) {
+      await view._currentRenderPromise;
+    } else {
+      await Promise.resolve();
+    }
+  }
+  validateChildTypes(node, widgetsCache) {
+    const errors = [];
+    const allowedChildTypes = widgetsCache[node.tagName]?.allowed_child_types;
+    if (allowedChildTypes?.length) {
+      for (const child of Array.from(node.children)) {
+        if (!allowedChildTypes.includes(child.tagName)) {
+          errors.push(
+            `"${child.tagName}" is not allowed as a child of "${node.tagName}". Allowed: ${allowedChildTypes.join(", ")}`
+          );
         }
-      },
-      options: { useHistory: false }
-    });
-    if (containerElement.id === "document") {
-      this.rootContainers.push(newElement);
+      }
     }
-    node.setAttribute("id", newElement.id);
-    let currentChild = 0;
-    for (const childNode of Array.from(node.children)) {
-      this.iterateBuild(childNode, newElement, currentChild);
-      currentChild++;
+    for (const child of Array.from(node.children)) {
+      errors.push(...this.validateChildTypes(child, widgetsCache));
     }
+    return errors;
   }
   findSchemaForNode(node) {
     const widgetsCache = this.api.getWidgetsCache() || {};
@@ -3607,63 +3619,31 @@ var CompositionBuilder = class _CompositionBuilder {
       node
     };
   }
-  applyStyles() {
-    const errors = [];
+  async applyProperties() {
+    const configErrors = [];
+    const styleErrors = [];
     const invalidStyles = {};
-    for (const [styleId, styleConfig] of Object.entries(this.elementStylesConfig)) {
-      const { element, node } = this.matchNodeByConfigId(styleId);
-      const validStylesPropValues = {};
-      for (const [styleName, stylePropValue] of Object.entries(styleConfig)) {
-        const { valid, errors: validationErrors } = validateInput.validateStyles({
-          [styleName]: stylePropValue
-        });
-        if (!valid) {
-          if (styleConfig.$intention) {
-            invalidStyles[element.id] = invalidStyles[element.id] || [];
-            invalidStyles[element.id].push(styleName);
-          }
-          errors.push(...validationErrors || []);
-        } else {
-          validStylesPropValues[styleName] = stylePropValue;
+    const allConfigIds = /* @__PURE__ */ new Set([
+      ...Object.keys(this.elementConfig),
+      ...Object.keys(this.elementStylesConfig),
+      ...Object.keys(this.elementCusomCSS)
+    ]);
+    for (const configId of allConfigIds) {
+      let element, node;
+      try {
+        ({ element, node } = this.matchNodeByConfigId(configId));
+      } catch (matchErr) {
+        const msg = matchErr.message;
+        if (this.elementConfig[configId]) {
+          configErrors.push(msg);
+        }
+        if (this.elementStylesConfig[configId] || this.elementCusomCSS[configId]) {
+          styleErrors.push(msg);
         }
-      }
-      if (Object.keys(validStylesPropValues).length === 0) {
         continue;
       }
-      try {
-        this.api.doUpdateElementProperty({
-          elementId: element.id,
-          propertyName: "_styles",
-          propertyValue: validStylesPropValues,
-          elementType: node.tagName
-        });
-      } catch (error) {
-        errors.push(String(error));
-      }
-    }
-    for (const [customCSSId, customCSS] of Object.entries(this.elementCusomCSS)) {
-      const { element, node } = this.matchNodeByConfigId(customCSSId);
-      this.api.doUpdateElementProperty({
-        elementId: element.id,
-        propertyName: "_styles",
-        propertyValue: { custom_css: customCSS },
-        elementType: node.tagName
-      });
-    }
-    return {
-      errors,
-      invalidStyles
-    };
-  }
-  applyConfigs() {
-    const errors = [];
-    for (const [configId, config] of Object.entries(this.elementConfig)) {
-      const { element, node } = this.matchNodeByConfigId(configId);
-      const propSchema = this.findSchemaForNode(node);
-      const result = validateInput.validateProps(propSchema, config);
-      if (!result.valid && result.errors?.length) {
-        errors.push(...result.errors);
-      } else {
+      const config = this.elementConfig[configId];
+      if (config) {
         for (const [propertyName, propertyValue] of Object.entries(config)) {
           try {
             this.api.doUpdateElementProperty({
@@ -3673,30 +3653,84 @@ var CompositionBuilder = class _CompositionBuilder {
               elementType: node.tagName
             });
           } catch (error) {
-            errors.push(error.message);
+            configErrors.push(error.message);
+          }
+        }
+      }
+      const styleConfig = this.elementStylesConfig[configId];
+      if (styleConfig) {
+        const validStylesPropValues = {};
+        for (const [styleName, stylePropValue] of Object.entries(styleConfig)) {
+          const { valid, errors: validationErrors } = validateInput.validateStyles({
+            [styleName]: stylePropValue
+          });
+          if (!valid) {
+            if (styleConfig.$intention) {
+              invalidStyles[element.id] = invalidStyles[element.id] || [];
+              invalidStyles[element.id].push(styleName);
+            }
+            styleErrors.push(...validationErrors || []);
+          } else {
+            validStylesPropValues[styleName] = stylePropValue;
+          }
+        }
+        if (Object.keys(validStylesPropValues).length > 0) {
+          try {
+            this.api.doUpdateElementProperty({
+              elementId: element.id,
+              propertyName: "_styles",
+              propertyValue: validStylesPropValues,
+              elementType: node.tagName
+            });
+          } catch (error) {
+            styleErrors.push(String(error));
           }
         }
       }
+      const customCSS = this.elementCusomCSS[configId];
+      if (customCSS) {
+        try {
+          this.api.doUpdateElementProperty({
+            elementId: element.id,
+            propertyName: "_styles",
+            propertyValue: { custom_css: customCSS },
+            elementType: node.tagName
+          });
+        } catch (cssErr) {
+          styleErrors.push(String(cssErr));
+        }
+      }
+      await this.awaitViewRender(element);
     }
-    return errors;
+    return { configErrors, styleErrors, invalidStyles };
   }
-  build(rootContainer) {
+  async build(rootContainer) {
     const widgetsCache = this.api.getWidgetsCache() || {};
-    const CONTAINER_ELEMENTS = Object.values(widgetsCache).filter((widget) => widget.meta?.is_container).map((widget) => widget.elType).filter((x) => typeof x === "string");
-    this.containerElements = CONTAINER_ELEMENTS;
     new Set(this.xml.querySelectorAll("*")).forEach((node) => {
       if (!widgetsCache[node.tagName]) {
         throw new Error(`Unknown widget type: ${node.tagName}`);
       }
     });
+    const childTypeErrors = [];
+    for (const rootChild of Array.from(this.xml.children)) {
+      childTypeErrors.push(...this.validateChildTypes(rootChild, widgetsCache));
+    }
+    if (childTypeErrors.length) {
+      throw new Error(`Invalid element structure:
+${childTypeErrors.join("\n")}`);
+    }
     const children = Array.from(this.xml.children);
-    let currentChild = 0;
     for (const childNode of children) {
-      this.iterateBuild(childNode, rootContainer, currentChild);
-      currentChild++;
+      const modelTree = this.buildModelTree(childNode, widgetsCache);
+      const newElement = this.api.createElement({
+        container: rootContainer,
+        model: modelTree,
+        options: { useHistory: false }
+      });
+      this.rootContainers.push(newElement);
+      await this.awaitViewRender(newElement);
     }
-    const { errors: styleErrors, invalidStyles } = this.applyStyles();
-    const configErrors = this.applyConfigs();
+    const { configErrors, styleErrors, invalidStyles } = await this.applyProperties();
     return {
       configErrors,
       styleErrors,
@@ -3736,6 +3770,12 @@ var generatePrompt = () => {
 - Every element needs unique "configuration-id"
 - No attributes, classes, IDs, or text nodes in XML
 
+## NESTED ELEMENTS
+Some elements have internal tree structures (nesting). When using these elements, you MUST build the FULL tree in XML.
+- Check \`llm_guidance.nesting\` in widget schemas for structure requirements
+- \`allowed_child_types\` lists which element types can be nested inside
+- \`allowed_parents\` lists which element types this element can be placed inside
+
 # CONFIGURATION
 - Map configuration-id \u2192 elementConfig (props) + stylesConfig (layout only)
 - All PropValues require \`$$type\` matching schema
@@ -3921,17 +3961,9 @@ var initBuildCompositionsTool = (reg) => {
         compositionBuilder.setElementConfig(elementConfig);
         compositionBuilder.setStylesConfig(stylesConfig);
         compositionBuilder.setCustomCSS(customCSS);
-        const {
-          configErrors,
-          invalidStyles,
-          rootContainers: generatedRootContainers
-        } = compositionBuilder.build(targetContainer);
+        const { invalidStyles, rootContainers: generatedRootContainers } = await compositionBuilder.build(targetContainer);
         rootContainers.push(...generatedRootContainers);
         generatedXML = new XMLSerializer().serializeToString(compositionBuilder.getXML());
-        if (configErrors.length) {
-          errors.push(...configErrors.map((e) => new Error(e)));
-          throw new Error("Configuration errors occurred during composition building.");
-        }
         Object.entries(invalidStyles).forEach(([elementId, rawCssRules]) => {
           const customCss = {
             value: rawCssRules.join(";\n")

package/dist/index.mjs

@@ -166,6 +166,15 @@ Variables from the user context ARE NOT SUPPORTED AND WILL RESOLVE IN ERROR.
         llmGuidance.instructions = "These are the default styles applied to the widget. Override only when necessary.";
         llmGuidance.default_styles = defaultStyles;
       }
+      const allowedChildTypes = widgetData.allowed_child_types;
+      const allWidgets = getWidgetsCache() || {};
+      const allowedParents = Object.entries(allWidgets).filter(([, parentConfig]) => parentConfig.allowed_child_types?.includes(widgetType)).map(([parentType]) => parentType);
+      if (allowedChildTypes?.length || allowedParents.length) {
+        llmGuidance.nesting = {
+          ...allowedChildTypes?.length ? { allowed_child_types: allowedChildTypes } : {},
+          ...allowedParents.length ? { allowed_parents: allowedParents } : {}
+        };
+      }
       return {
         contents: [
           {
@@ -3488,7 +3497,6 @@ var CompositionBuilder = class _CompositionBuilder {
   elementStylesConfig = {};
   elementCusomCSS = {};
   rootContainers = [];
-  containerElements = [];
   api = {
     createElement: createElement7,
     getWidgetsCache: getWidgetsCache5,
@@ -3529,45 +3537,49 @@ var CompositionBuilder = class _CompositionBuilder {
   getXML() {
     return this.xml;
   }
-  iterateBuild(node, containerElement, childIndex) {
+  buildModelTree(node, widgetsCache) {
     const elementTag = node.tagName;
-    const isContainer = this.containerElements.includes(elementTag);
-    const parentElType = containerElement.model.get("elType");
-    let targetContainer = parentElType === "e-tabs" ? containerElement.children?.[1].children?.[childIndex] || containerElement.children?.[1] : containerElement;
-    if (!targetContainer) {
-      targetContainer = containerElement;
-    }
-    const newElement = isContainer ? this.api.createElement({
-      container: targetContainer,
-      model: {
-        elType: elementTag,
-        id: generateElementId(),
-        editor_settings: {
-          title: node.getAttribute("configuration-id") ?? void 0
-        }
-      },
-      options: { useHistory: false }
-    }) : this.api.createElement({
-      container: targetContainer,
-      model: {
-        elType: "widget",
-        widgetType: elementTag,
-        id: generateElementId(),
-        editor_settings: {
-          title: node.getAttribute("configuration-id") ?? void 0
+    const isWidget = widgetsCache[elementTag]?.elType === "widget";
+    const id = this.api.generateElementId();
+    const children = Array.from(node.children).map((child) => this.buildModelTree(child, widgetsCache));
+    node.setAttribute("id", id);
+    const base = {
+      id,
+      skipDefaultChildren: true,
+      elements: children,
+      editor_settings: {
+        title: node.getAttribute("configuration-id") ?? void 0
+      }
+    };
+    if (isWidget) {
+      return { ...base, elType: "widget", widgetType: elementTag };
+    }
+    return { ...base, elType: elementTag };
+  }
+  async awaitViewRender(element) {
+    const view = element.view;
+    if (view?._currentRenderPromise instanceof Promise) {
+      await view._currentRenderPromise;
+    } else {
+      await Promise.resolve();
+    }
+  }
+  validateChildTypes(node, widgetsCache) {
+    const errors = [];
+    const allowedChildTypes = widgetsCache[node.tagName]?.allowed_child_types;
+    if (allowedChildTypes?.length) {
+      for (const child of Array.from(node.children)) {
+        if (!allowedChildTypes.includes(child.tagName)) {
+          errors.push(
+            `"${child.tagName}" is not allowed as a child of "${node.tagName}". Allowed: ${allowedChildTypes.join(", ")}`
+          );
         }
-      },
-      options: { useHistory: false }
-    });
-    if (containerElement.id === "document") {
-      this.rootContainers.push(newElement);
+      }
     }
-    node.setAttribute("id", newElement.id);
-    let currentChild = 0;
-    for (const childNode of Array.from(node.children)) {
-      this.iterateBuild(childNode, newElement, currentChild);
-      currentChild++;
+    for (const child of Array.from(node.children)) {
+      errors.push(...this.validateChildTypes(child, widgetsCache));
     }
+    return errors;
   }
   findSchemaForNode(node) {
     const widgetsCache = this.api.getWidgetsCache() || {};
@@ -3593,63 +3605,31 @@ var CompositionBuilder = class _CompositionBuilder {
       node
     };
   }
-  applyStyles() {
-    const errors = [];
+  async applyProperties() {
+    const configErrors = [];
+    const styleErrors = [];
     const invalidStyles = {};
-    for (const [styleId, styleConfig] of Object.entries(this.elementStylesConfig)) {
-      const { element, node } = this.matchNodeByConfigId(styleId);
-      const validStylesPropValues = {};
-      for (const [styleName, stylePropValue] of Object.entries(styleConfig)) {
-        const { valid, errors: validationErrors } = validateInput.validateStyles({
-          [styleName]: stylePropValue
-        });
-        if (!valid) {
-          if (styleConfig.$intention) {
-            invalidStyles[element.id] = invalidStyles[element.id] || [];
-            invalidStyles[element.id].push(styleName);
-          }
-          errors.push(...validationErrors || []);
-        } else {
-          validStylesPropValues[styleName] = stylePropValue;
+    const allConfigIds = /* @__PURE__ */ new Set([
+      ...Object.keys(this.elementConfig),
+      ...Object.keys(this.elementStylesConfig),
+      ...Object.keys(this.elementCusomCSS)
+    ]);
+    for (const configId of allConfigIds) {
+      let element, node;
+      try {
+        ({ element, node } = this.matchNodeByConfigId(configId));
+      } catch (matchErr) {
+        const msg = matchErr.message;
+        if (this.elementConfig[configId]) {
+          configErrors.push(msg);
+        }
+        if (this.elementStylesConfig[configId] || this.elementCusomCSS[configId]) {
+          styleErrors.push(msg);
         }
-      }
-      if (Object.keys(validStylesPropValues).length === 0) {
         continue;
       }
-      try {
-        this.api.doUpdateElementProperty({
-          elementId: element.id,
-          propertyName: "_styles",
-          propertyValue: validStylesPropValues,
-          elementType: node.tagName
-        });
-      } catch (error) {
-        errors.push(String(error));
-      }
-    }
-    for (const [customCSSId, customCSS] of Object.entries(this.elementCusomCSS)) {
-      const { element, node } = this.matchNodeByConfigId(customCSSId);
-      this.api.doUpdateElementProperty({
-        elementId: element.id,
-        propertyName: "_styles",
-        propertyValue: { custom_css: customCSS },
-        elementType: node.tagName
-      });
-    }
-    return {
-      errors,
-      invalidStyles
-    };
-  }
-  applyConfigs() {
-    const errors = [];
-    for (const [configId, config] of Object.entries(this.elementConfig)) {
-      const { element, node } = this.matchNodeByConfigId(configId);
-      const propSchema = this.findSchemaForNode(node);
-      const result = validateInput.validateProps(propSchema, config);
-      if (!result.valid && result.errors?.length) {
-        errors.push(...result.errors);
-      } else {
+      const config = this.elementConfig[configId];
+      if (config) {
         for (const [propertyName, propertyValue] of Object.entries(config)) {
           try {
             this.api.doUpdateElementProperty({
@@ -3659,30 +3639,84 @@ var CompositionBuilder = class _CompositionBuilder {
               elementType: node.tagName
             });
           } catch (error) {
-            errors.push(error.message);
+            configErrors.push(error.message);
+          }
+        }
+      }
+      const styleConfig = this.elementStylesConfig[configId];
+      if (styleConfig) {
+        const validStylesPropValues = {};
+        for (const [styleName, stylePropValue] of Object.entries(styleConfig)) {
+          const { valid, errors: validationErrors } = validateInput.validateStyles({
+            [styleName]: stylePropValue
+          });
+          if (!valid) {
+            if (styleConfig.$intention) {
+              invalidStyles[element.id] = invalidStyles[element.id] || [];
+              invalidStyles[element.id].push(styleName);
+            }
+            styleErrors.push(...validationErrors || []);
+          } else {
+            validStylesPropValues[styleName] = stylePropValue;
+          }
+        }
+        if (Object.keys(validStylesPropValues).length > 0) {
+          try {
+            this.api.doUpdateElementProperty({
+              elementId: element.id,
+              propertyName: "_styles",
+              propertyValue: validStylesPropValues,
+              elementType: node.tagName
+            });
+          } catch (error) {
+            styleErrors.push(String(error));
           }
         }
       }
+      const customCSS = this.elementCusomCSS[configId];
+      if (customCSS) {
+        try {
+          this.api.doUpdateElementProperty({
+            elementId: element.id,
+            propertyName: "_styles",
+            propertyValue: { custom_css: customCSS },
+            elementType: node.tagName
+          });
+        } catch (cssErr) {
+          styleErrors.push(String(cssErr));
+        }
+      }
+      await this.awaitViewRender(element);
     }
-    return errors;
+    return { configErrors, styleErrors, invalidStyles };
   }
-  build(rootContainer) {
+  async build(rootContainer) {
     const widgetsCache = this.api.getWidgetsCache() || {};
-    const CONTAINER_ELEMENTS = Object.values(widgetsCache).filter((widget) => widget.meta?.is_container).map((widget) => widget.elType).filter((x) => typeof x === "string");
-    this.containerElements = CONTAINER_ELEMENTS;
     new Set(this.xml.querySelectorAll("*")).forEach((node) => {
       if (!widgetsCache[node.tagName]) {
         throw new Error(`Unknown widget type: ${node.tagName}`);
       }
     });
+    const childTypeErrors = [];
+    for (const rootChild of Array.from(this.xml.children)) {
+      childTypeErrors.push(...this.validateChildTypes(rootChild, widgetsCache));
+    }
+    if (childTypeErrors.length) {
+      throw new Error(`Invalid element structure:
+${childTypeErrors.join("\n")}`);
+    }
     const children = Array.from(this.xml.children);
-    let currentChild = 0;
     for (const childNode of children) {
-      this.iterateBuild(childNode, rootContainer, currentChild);
-      currentChild++;
+      const modelTree = this.buildModelTree(childNode, widgetsCache);
+      const newElement = this.api.createElement({
+        container: rootContainer,
+        model: modelTree,
+        options: { useHistory: false }
+      });
+      this.rootContainers.push(newElement);
+      await this.awaitViewRender(newElement);
     }
-    const { errors: styleErrors, invalidStyles } = this.applyStyles();
-    const configErrors = this.applyConfigs();
+    const { configErrors, styleErrors, invalidStyles } = await this.applyProperties();
     return {
       configErrors,
       styleErrors,
@@ -3722,6 +3756,12 @@ var generatePrompt = () => {
 - Every element needs unique "configuration-id"
 - No attributes, classes, IDs, or text nodes in XML
 
+## NESTED ELEMENTS
+Some elements have internal tree structures (nesting). When using these elements, you MUST build the FULL tree in XML.
+- Check \`llm_guidance.nesting\` in widget schemas for structure requirements
+- \`allowed_child_types\` lists which element types can be nested inside
+- \`allowed_parents\` lists which element types this element can be placed inside
+
 # CONFIGURATION
 - Map configuration-id \u2192 elementConfig (props) + stylesConfig (layout only)
 - All PropValues require \`$$type\` matching schema
@@ -3907,17 +3947,9 @@ var initBuildCompositionsTool = (reg) => {
         compositionBuilder.setElementConfig(elementConfig);
         compositionBuilder.setStylesConfig(stylesConfig);
         compositionBuilder.setCustomCSS(customCSS);
-        const {
-          configErrors,
-          invalidStyles,
-          rootContainers: generatedRootContainers
-        } = compositionBuilder.build(targetContainer);
+        const { invalidStyles, rootContainers: generatedRootContainers } = await compositionBuilder.build(targetContainer);
         rootContainers.push(...generatedRootContainers);
         generatedXML = new XMLSerializer().serializeToString(compositionBuilder.getXML());
-        if (configErrors.length) {
-          errors.push(...configErrors.map((e) => new Error(e)));
-          throw new Error("Configuration errors occurred during composition building.");
-        }
         Object.entries(invalidStyles).forEach(([elementId, rawCssRules]) => {
           const customCss = {
             value: rawCssRules.join(";\n")

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "4.1.0-761",
+  "version": "4.1.0-763",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,25 +37,25 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "4.1.0-761",
+    "@elementor/editor": "4.1.0-763",
     "dompurify": "^3.2.6",
-    "@elementor/editor-controls": "4.1.0-761",
-    "@elementor/editor-documents": "4.1.0-761",
-    "@elementor/editor-elements": "4.1.0-761",
-    "@elementor/editor-interactions": "4.1.0-761",
-    "@elementor/editor-mcp": "4.1.0-761",
-    "@elementor/editor-notifications": "4.1.0-761",
-    "@elementor/editor-props": "4.1.0-761",
-    "@elementor/editor-responsive": "4.1.0-761",
-    "@elementor/editor-styles": "4.1.0-761",
-    "@elementor/editor-styles-repository": "4.1.0-761",
-    "@elementor/editor-ui": "4.1.0-761",
-    "@elementor/editor-v1-adapters": "4.1.0-761",
-    "@elementor/schema": "4.1.0-761",
-    "@elementor/twing": "4.1.0-761",
+    "@elementor/editor-controls": "4.1.0-763",
+    "@elementor/editor-documents": "4.1.0-763",
+    "@elementor/editor-elements": "4.1.0-763",
+    "@elementor/editor-interactions": "4.1.0-763",
+    "@elementor/editor-mcp": "4.1.0-763",
+    "@elementor/editor-notifications": "4.1.0-763",
+    "@elementor/editor-props": "4.1.0-763",
+    "@elementor/editor-responsive": "4.1.0-763",
+    "@elementor/editor-styles": "4.1.0-763",
+    "@elementor/editor-styles-repository": "4.1.0-763",
+    "@elementor/editor-ui": "4.1.0-763",
+    "@elementor/editor-v1-adapters": "4.1.0-763",
+    "@elementor/schema": "4.1.0-763",
+    "@elementor/twing": "4.1.0-763",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.1.0-761",
-    "@elementor/wp-media": "4.1.0-761",
+    "@elementor/utils": "4.1.0-763",
+    "@elementor/wp-media": "4.1.0-763",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/composition-builder/composition-builder.ts

@@ -1,9 +1,11 @@
 import {
 	createElement,
+	type CreateElementParams,
 	generateElementId,
 	getContainer,
 	getWidgetsCache,
 	type V1Element,
+	type V1ElementConfig,
 } from '@elementor/editor-elements';
 import { type z } from '@elementor/schema';
 
@@ -34,7 +36,6 @@ export class CompositionBuilder {
 	private elementStylesConfig: Record< string, Record< string, AnyValue > > = {};
 	private elementCusomCSS: Record< string, string > = {};
 	private rootContainers: V1Element[] = [];
-	private containerElements: string[] = [];
 	private api: API = {
 		createElement,
 		getWidgetsCache,
@@ -82,50 +83,63 @@ export class CompositionBuilder {
 		return this.xml;
 	}
 
-	private iterateBuild( node: Element, containerElement: V1Element, childIndex: number ) {
+	private buildModelTree(
+		node: Element,
+		widgetsCache: Record< string, V1ElementConfig >
+	): Record< string, unknown > {
 		const elementTag = node.tagName;
-		const isContainer = this.containerElements.includes( elementTag );
-		const parentElType = containerElement.model.get( 'elType' );
-		let targetContainer =
-			parentElType === 'e-tabs'
-				? containerElement.children?.[ 1 ].children?.[ childIndex ] || containerElement.children?.[ 1 ]
-				: containerElement;
-		if ( ! targetContainer ) {
-			targetContainer = containerElement;
+		const isWidget = widgetsCache[ elementTag ]?.elType === 'widget';
+		const id = this.api.generateElementId();
+		const children = Array.from( node.children ).map( ( child ) => this.buildModelTree( child, widgetsCache ) );
+
+		node.setAttribute( 'id', id );
+
+		const base = {
+			id,
+			skipDefaultChildren: true,
+			elements: children,
+			editor_settings: {
+				title: node.getAttribute( 'configuration-id' ) ?? undefined,
+			},
+		};
+
+		if ( isWidget ) {
+			return { ...base, elType: 'widget' as const, widgetType: elementTag };
 		}
-		const newElement = isContainer
-			? this.api.createElement( {
-					container: targetContainer,
-					model: {
-						elType: elementTag,
-						id: generateElementId(),
-						editor_settings: {
-							title: node.getAttribute( 'configuration-id' ) ?? undefined,
-						},
-					},
-					options: { useHistory: false },
-			  } )
-			: this.api.createElement( {
-					container: targetContainer,
-					model: {
-						elType: 'widget',
-						widgetType: elementTag,
-						id: generateElementId(),
-						editor_settings: {
-							title: node.getAttribute( 'configuration-id' ) ?? undefined,
-						},
-					},
-					options: { useHistory: false },
-			  } );
-		if ( containerElement.id === 'document' ) {
-			this.rootContainers.push( newElement );
+
+		return { ...base, elType: elementTag };
+	}
+
+	private async awaitViewRender( element: V1Element ) {
+		const view = element.view as Record< string, unknown > | undefined;
+		if ( view?._currentRenderPromise instanceof Promise ) {
+			await view._currentRenderPromise;
+		} else {
+			await Promise.resolve();
 		}
-		node.setAttribute( 'id', newElement.id );
-		let currentChild = 0;
-		for ( const childNode of Array.from( node.children ) ) {
-			this.iterateBuild( childNode, newElement, currentChild );
-			currentChild++;
+	}
+
+	private validateChildTypes( node: Element, widgetsCache: Record< string, V1ElementConfig > ): string[] {
+		const errors: string[] = [];
+		const allowedChildTypes = widgetsCache[ node.tagName ]?.allowed_child_types;
+
+		if ( allowedChildTypes?.length ) {
+			for ( const child of Array.from( node.children ) ) {
+				if ( ! allowedChildTypes.includes( child.tagName ) ) {
+					errors.push(
+						`"${ child.tagName }" is not allowed as a child of "${
+							node.tagName
+						}". Allowed: ${ allowedChildTypes.join( ', ' ) }`
+					);
+				}
+			}
+		}
+
+		for ( const child of Array.from( node.children ) ) {
+			errors.push( ...this.validateChildTypes( child, widgetsCache ) );
 		}
+
+		return errors;
 	}
 
 	private findSchemaForNode( node: Element ) {
@@ -154,64 +168,34 @@ export class CompositionBuilder {
 		};
 	}
 
-	applyStyles() {
-		const errors: string[] = [];
+	private async applyProperties() {
+		const configErrors: string[] = [];
+		const styleErrors: string[] = [];
 		const invalidStyles: Record< string, string[] > = {};
-		for ( const [ styleId, styleConfig ] of Object.entries( this.elementStylesConfig ) ) {
-			const { element, node } = this.matchNodeByConfigId( styleId );
-			const validStylesPropValues: Record< string, AnyValue > = {};
-			for ( const [ styleName, stylePropValue ] of Object.entries( styleConfig ) ) {
-				const { valid, errors: validationErrors } = validateInput.validateStyles( {
-					[ styleName ]: stylePropValue,
-				} );
-				if ( ! valid ) {
-					if ( styleConfig.$intention ) {
-						invalidStyles[ element.id ] = invalidStyles[ element.id ] || [];
-						invalidStyles[ element.id ].push( styleName );
-					}
-					errors.push( ...( validationErrors || [] ) );
-				} else {
-					validStylesPropValues[ styleName ] = stylePropValue;
+
+		const allConfigIds = new Set( [
+			...Object.keys( this.elementConfig ),
+			...Object.keys( this.elementStylesConfig ),
+			...Object.keys( this.elementCusomCSS ),
+		] );
+
+		for ( const configId of allConfigIds ) {
+			let element, node;
+			try {
+				( { element, node } = this.matchNodeByConfigId( configId ) );
+			} catch ( matchErr ) {
+				const msg = ( matchErr as Error ).message;
+				if ( this.elementConfig[ configId ] ) {
+					configErrors.push( msg );
+				}
+				if ( this.elementStylesConfig[ configId ] || this.elementCusomCSS[ configId ] ) {
+					styleErrors.push( msg );
 				}
-			}
-			if ( Object.keys( validStylesPropValues ).length === 0 ) {
 				continue;
 			}
-			try {
-				this.api.doUpdateElementProperty( {
-					elementId: element.id,
-					propertyName: '_styles',
-					propertyValue: validStylesPropValues,
-					elementType: node.tagName,
-				} );
-			} catch ( error ) {
-				errors.push( String( error ) );
-			}
-		}
-		for ( const [ customCSSId, customCSS ] of Object.entries( this.elementCusomCSS ) ) {
-			const { element, node } = this.matchNodeByConfigId( customCSSId );
-			this.api.doUpdateElementProperty( {
-				elementId: element.id,
-				propertyName: '_styles',
-				propertyValue: { custom_css: customCSS },
-				elementType: node.tagName,
-			} );
-		}
-		return {
-			errors,
-			invalidStyles,
-		};
-	}
 
-	applyConfigs() {
-		const errors: string[] = [];
-		for ( const [ configId, config ] of Object.entries( this.elementConfig ) ) {
-			const { element, node } = this.matchNodeByConfigId( configId );
-			const propSchema = this.findSchemaForNode( node );
-			const result = validateInput.validateProps( propSchema, config );
-			if ( ! result.valid && result.errors?.length ) {
-				errors.push( ...result.errors );
-			} else {
+			const config = this.elementConfig[ configId ];
+			if ( config ) {
 				for ( const [ propertyName, propertyValue ] of Object.entries( config ) ) {
 					try {
 						this.api.doUpdateElementProperty( {
@@ -221,36 +205,95 @@ export class CompositionBuilder {
 							elementType: node.tagName,
 						} );
 					} catch ( error ) {
-						errors.push( ( error as Error ).message );
+						configErrors.push( ( error as Error ).message );
+					}
+				}
+			}
+
+			const styleConfig = this.elementStylesConfig[ configId ];
+			if ( styleConfig ) {
+				const validStylesPropValues: Record< string, AnyValue > = {};
+				for ( const [ styleName, stylePropValue ] of Object.entries( styleConfig ) ) {
+					const { valid, errors: validationErrors } = validateInput.validateStyles( {
+						[ styleName ]: stylePropValue,
+					} );
+					if ( ! valid ) {
+						if ( styleConfig.$intention ) {
+							invalidStyles[ element.id ] = invalidStyles[ element.id ] || [];
+							invalidStyles[ element.id ].push( styleName );
+						}
+						styleErrors.push( ...( validationErrors || [] ) );
+					} else {
+						validStylesPropValues[ styleName ] = stylePropValue;
+					}
+				}
+				if ( Object.keys( validStylesPropValues ).length > 0 ) {
+					try {
+						this.api.doUpdateElementProperty( {
+							elementId: element.id,
+							propertyName: '_styles',
+							propertyValue: validStylesPropValues,
+							elementType: node.tagName,
+						} );
+					} catch ( error ) {
+						styleErrors.push( String( error ) );
 					}
 				}
 			}
+
+			const customCSS = this.elementCusomCSS[ configId ];
+			if ( customCSS ) {
+				try {
+					this.api.doUpdateElementProperty( {
+						elementId: element.id,
+						propertyName: '_styles',
+						propertyValue: { custom_css: customCSS },
+						elementType: node.tagName,
+					} );
+				} catch ( cssErr ) {
+					styleErrors.push( String( cssErr ) );
+				}
+			}
+
+			await this.awaitViewRender( element );
 		}
-		return errors;
+
+		return { configErrors, styleErrors, invalidStyles };
 	}
 
-	build( rootContainer: V1Element ) {
+	async build( rootContainer: V1Element ) {
 		const widgetsCache = this.api.getWidgetsCache() || {};
-		const CONTAINER_ELEMENTS = Object.values( widgetsCache )
-			.filter( ( widget ) => widget.meta?.is_container )
-			.map( ( widget ) => widget.elType )
-			.filter( ( x ) => typeof x === 'string' );
-		this.containerElements = CONTAINER_ELEMENTS;
+
 		new Set( this.xml.querySelectorAll( '*' ) ).forEach( ( node ) => {
 			if ( ! widgetsCache[ node.tagName ] ) {
 				throw new Error( `Unknown widget type: ${ node.tagName }` );
 			}
 		} );
 
+		const childTypeErrors: string[] = [];
+		for ( const rootChild of Array.from( this.xml.children ) ) {
+			childTypeErrors.push( ...this.validateChildTypes( rootChild, widgetsCache ) );
+		}
+		if ( childTypeErrors.length ) {
+			throw new Error( `Invalid element structure:\n${ childTypeErrors.join( '\n' ) }` );
+		}
+
 		const children = Array.from( this.xml.children );
-		let currentChild = 0;
 		for ( const childNode of children ) {
-			this.iterateBuild( childNode, rootContainer, currentChild );
-			currentChild++;
+			const modelTree = this.buildModelTree( childNode, widgetsCache );
+
+			const newElement = this.api.createElement( {
+				container: rootContainer,
+				model: modelTree as CreateElementParams[ 'model' ],
+				options: { useHistory: false },
+			} );
+
+			this.rootContainers.push( newElement );
+
+			await this.awaitViewRender( newElement );
 		}
 
-		const { errors: styleErrors, invalidStyles } = this.applyStyles();
-		const configErrors = this.applyConfigs();
+		const { configErrors, styleErrors, invalidStyles } = await this.applyProperties();
 
 		return {
 			configErrors,

package/src/mcp/resources/widgets-schema-resource.ts

@@ -141,6 +141,20 @@ Variables from the user context ARE NOT SUPPORTED AND WILL RESOLVE IN ERROR.
 				llmGuidance.default_styles = defaultStyles;
 			}
 
+			const allowedChildTypes = widgetData.allowed_child_types;
+
+			const allWidgets = getWidgetsCache() || {};
+			const allowedParents = Object.entries( allWidgets )
+				.filter( ( [ , parentConfig ] ) => parentConfig.allowed_child_types?.includes( widgetType ) )
+				.map( ( [ parentType ] ) => parentType );
+
+			if ( allowedChildTypes?.length || allowedParents.length ) {
+				llmGuidance.nesting = {
+					...( allowedChildTypes?.length ? { allowed_child_types: allowedChildTypes } : {} ),
+					...( allowedParents.length ? { allowed_parents: allowedParents } : {} ),
+				};
+			}
+
 			return {
 				contents: [
 					{

package/src/mcp/tools/build-composition/prompt.ts

@@ -19,6 +19,12 @@ export const generatePrompt = () => {
 - Every element needs unique "configuration-id"
 - No attributes, classes, IDs, or text nodes in XML
 
+## NESTED ELEMENTS
+Some elements have internal tree structures (nesting). When using these elements, you MUST build the FULL tree in XML.
+- Check \`llm_guidance.nesting\` in widget schemas for structure requirements
+- \`allowed_child_types\` lists which element types can be nested inside
+- \`allowed_parents\` lists which element types this element can be placed inside
+
 # CONFIGURATION
 - Map configuration-id → elementConfig (props) + stylesConfig (layout only)
 - All PropValues require \`$$type\` matching schema

package/src/mcp/tools/build-composition/tool.ts

@@ -50,20 +50,12 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 				compositionBuilder.setStylesConfig( stylesConfig );
 				compositionBuilder.setCustomCSS( customCSS );
 
-				const {
-					configErrors,
-					invalidStyles,
-					rootContainers: generatedRootContainers,
-				} = compositionBuilder.build( targetContainer );
+				const { invalidStyles, rootContainers: generatedRootContainers } =
+					await compositionBuilder.build( targetContainer );
 
 				rootContainers.push( ...generatedRootContainers );
 				generatedXML = new XMLSerializer().serializeToString( compositionBuilder.getXML() );
 
-				if ( configErrors.length ) {
-					errors.push( ...configErrors.map( ( e ) => new Error( e ) ) );
-					throw new Error( 'Configuration errors occurred during composition building.' );
-				}
-
 				Object.entries( invalidStyles ).forEach( ( [ elementId, rawCssRules ] ) => {
 					const customCss = {
 						value: rawCssRules.join( ';\n' ),