@elementor/editor-canvas 4.3.0-992 → 4.3.0-994

package/dist/index.js

@@ -195,7 +195,7 @@ var convertCssToAtomic = async (style) => {
 
 // src/init.tsx
 var import_editor = require("@elementor/editor");
-var import_editor_mcp6 = require("@elementor/editor-mcp");
+var import_editor_mcp4 = require("@elementor/editor-mcp");
 
 // src/components/classes-rename.tsx
 var import_react = require("react");
@@ -1854,46 +1854,6 @@ function clipboardRootsAreAtomicForms(elements) {
   }
   return elements.every((el) => getClipboardElementType(el) === FORM_ELEMENT_TYPE);
 }
-function hasFormAncestor(node) {
-  return node.closest(FORM_ELEMENT_TYPE) !== null;
-}
-function collectFormAncestorErrors(xml) {
-  const errors = [];
-  for (const node of xml.querySelectorAll("*")) {
-    if (!FORM_FIELD_ELEMENT_TYPES.has(node.tagName.toLowerCase())) {
-      continue;
-    }
-    if (hasFormAncestor(node)) {
-      continue;
-    }
-    const id = node.getAttribute("configuration-id");
-    errors.push(
-      `<${node.tagName}${id ? ` configuration-id="${id}"` : ""}> must be nested inside <e-form> (any ancestor depth is allowed).`
-    );
-  }
-  return errors;
-}
-function collectSubmitButtonErrors(xml) {
-  const errors = [];
-  for (const form of xml.querySelectorAll("e-form")) {
-    const submitButtons = form.querySelectorAll("e-form-submit-button");
-    if (submitButtons.length === 0) {
-      errors.push(`<e-form> has no <e-form-submit-button>.`);
-    } else if (submitButtons.length > 1) {
-      errors.push(`<e-form> has ${submitButtons.length} submit buttons \u2014 only 1 is allowed.`);
-    }
-  }
-  return errors;
-}
-function collectEmptyMessageErrors(xml) {
-  const errors = [];
-  for (const node of xml.querySelectorAll("e-form-success-message, e-form-error-message")) {
-    if (node.children.length === 0) {
-      errors.push(`<${node.tagName}> must have at least one child element (e.g. <e-atomic-paragraph>).`);
-    }
-  }
-  return errors;
-}
 
 // src/form-structure/enforce-form-ancestor-commands.ts
 var FORM_FIELDS_OUTSIDE_ALERT = {
@@ -4520,15 +4480,103 @@ function getElementDisplayName(container) {
 }
 
 // src/mcp/tools/build-composition/tool.ts
-var import_editor_documents3 = require("@elementor/editor-documents");
-var import_editor_elements15 = require("@elementor/editor-elements");
-var import_editor_mcp3 = require("@elementor/editor-mcp");
+var import_editor_documents2 = require("@elementor/editor-documents");
+var import_editor_elements11 = require("@elementor/editor-elements");
+var import_http_client6 = require("@elementor/http-client");
+var import_schema = require("@elementor/schema");
+var MCP_PROXY_URL5 = "elementor/v1/mcp-proxy";
+var initBuildCompositionTool = (reg) => {
+  const { addTool } = reg;
+  addTool({
+    name: "build-composition",
+    description: "Build a V4 element composition on the Elementor canvas via the server-side MCP ability. Pass the raw XML tags directly as xmlStructure \u2014 do NOT wrap the value in <![CDATA[ ... ]]>, code fences, or quotes. The document is saved as a draft. Reload the editor after calling this tool to see the result.",
+    schema: {
+      xmlStructure: import_schema.z.string().describe(
+        'Valid XML structure with custom Elementor widget tags. Every element MUST have a unique configuration-id attribute (e.g. <e-heading configuration-id="hero-title"></e-heading>). No attributes, classes, IDs, or text nodes in XML. Pass raw XML \u2014 do not wrap in CDATA.'
+      ),
+      elementConfig: import_schema.z.record(
+        import_schema.z.string().describe("configuration-id"),
+        import_schema.z.record(import_schema.z.string().describe("property name"), import_schema.z.any().describe("PropValue"))
+      ).optional().describe("Map configuration-id \u2192 widget PropValues ($$type + value)."),
+      style: import_schema.z.record(
+        import_schema.z.string().describe("configuration-id"),
+        import_schema.z.record(import_schema.z.string().describe("CSS property name"), import_schema.z.string().describe("CSS value"))
+      ).optional().describe(
+        "Map configuration-id \u2192 raw CSS declarations (property \u2192 value strings; no selectors). Server converts to native styles; unconvertible declarations become the element custom CSS."
+      ),
+      parentId: import_schema.z.string().optional().describe("ID of the parent container. Omit or pass 'document' to insert at document root."),
+      dryRun: import_schema.z.boolean().optional().describe("If true, validate and return the resolved tree without persisting.")
+    },
+    outputSchema: {
+      rootElementIds: import_schema.z.array(import_schema.z.string()),
+      previewUrl: import_schema.z.string(),
+      version: import_schema.z.string(),
+      resolvedXml: import_schema.z.string(),
+      llmInstructions: import_schema.z.string(),
+      warnings: import_schema.z.array(import_schema.z.string()).optional()
+    },
+    handler: async ({ xmlStructure, elementConfig, style, parentId, dryRun }) => {
+      const document2 = (0, import_editor_documents2.getCurrentDocument)();
+      if (!document2?.id) {
+        throw new Error("No active document found.");
+      }
+      try {
+        const { data } = await (0, import_http_client6.httpService)().post(MCP_PROXY_URL5, {
+          tool: "build-composition",
+          input: {
+            post_id: document2.id,
+            xml_structure: xmlStructure,
+            element_config: elementConfig ?? {},
+            style: style ?? {},
+            parent_id: parentId ?? "document",
+            dry_run: dryRun ?? false
+          }
+        });
+        if (!dryRun) {
+          await (0, import_editor_documents2.reloadCurrentDocument)();
+          const [firstRootId] = data.data.root_element_ids;
+          if (firstRootId) {
+            (0, import_editor_elements11.selectElement)(firstRootId);
+            (0, import_editor_elements11.getContainer)(firstRootId)?.view?.el?.scrollIntoView({
+              behavior: "smooth",
+              block: "center"
+            });
+          }
+        }
+        return {
+          rootElementIds: data.data.root_element_ids,
+          previewUrl: data.data.preview_url,
+          version: data.data.version,
+          resolvedXml: data.data.resolved_xml,
+          llmInstructions: data.data.llm_instructions,
+          warnings: data.data.warnings
+        };
+      } catch (error) {
+        throw new Error(getErrorMessage(error));
+      }
+    }
+  });
+};
+function getErrorMessage(error) {
+  if (error instanceof import_http_client6.AxiosError) {
+    const data = error.response?.data;
+    if (data?.message) {
+      return data.code ? `${data.code}: ${data.message}` : data.message;
+    }
+  }
+  if (error instanceof Error) {
+    return error.message;
+  }
+  return "build-composition failed with an unknown error.";
+}
 
-// src/composition-builder/composition-builder.ts
-var import_editor_elements13 = require("@elementor/editor-elements");
+// src/mcp/tools/configure-element/tool.ts
+var import_editor_elements14 = require("@elementor/editor-elements");
+var import_editor_mcp3 = require("@elementor/editor-mcp");
+var import_editor_props7 = require("@elementor/editor-props");
 
 // src/mcp/utils/do-update-element-property.ts
-var import_editor_elements12 = require("@elementor/editor-elements");
+var import_editor_elements13 = require("@elementor/editor-elements");
 var import_editor_props6 = require("@elementor/editor-props");
 var import_editor_styles4 = require("@elementor/editor-styles");
 var import_editor_v1_adapters20 = require("@elementor/editor-v1-adapters");
@@ -4548,7 +4596,7 @@ var readStoredCustomCssText = (raw) => {
 };
 
 // src/mcp/utils/resolve-canonical-prop-name.ts
-var import_editor_elements11 = require("@elementor/editor-elements");
+var import_editor_elements12 = require("@elementor/editor-elements");
 function buildAliasToCanonicalMap(schema2) {
   const aliasToCanonical = {};
   for (const [canonical, propType] of Object.entries(schema2)) {
@@ -4565,14 +4613,14 @@ function buildAliasToCanonicalMap(schema2) {
   return aliasToCanonical;
 }
 function resolveCanonicalPropName(elementType, propertyName) {
-  const schema2 = (0, import_editor_elements11.getWidgetsCache)()?.[elementType]?.atomic_props_schema;
+  const schema2 = (0, import_editor_elements12.getWidgetsCache)()?.[elementType]?.atomic_props_schema;
   if (!schema2 || schema2[propertyName]) {
     return propertyName;
   }
   return buildAliasToCanonicalMap(schema2)[propertyName] ?? propertyName;
 }
 function resolveCanonicalPropKeys(elementType, props) {
-  const schema2 = (0, import_editor_elements11.getWidgetsCache)()?.[elementType]?.atomic_props_schema;
+  const schema2 = (0, import_editor_elements12.getWidgetsCache)()?.[elementType]?.atomic_props_schema;
   if (!schema2) {
     return { ...props };
   }
@@ -4680,7 +4728,7 @@ var doUpdateElementProperty = (params) => {
   const { elementId, propertyValue, elementType, customCssWriteMode = "replace" } = params;
   const propertyName = params.propertyName === "_styles" ? params.propertyName : resolveCanonicalPropName(elementType, params.propertyName);
   if (propertyName === "_styles") {
-    const elementStyles = (0, import_editor_elements12.getElementStyles)(elementId) || {};
+    const elementStyles = (0, import_editor_elements13.getElementStyles)(elementId) || {};
     const propertyMapValue = propertyValue;
     const styleSchema = (0, import_editor_styles4.getStylesSchema)();
     const transformedStyleValues = Object.fromEntries(
@@ -4737,7 +4785,7 @@ var doUpdateElementProperty = (params) => {
     });
     delete transformedStyleValues.custom_css;
     if (!localStyle) {
-      (0, import_editor_elements12.createElementStyle)({
+      (0, import_editor_elements13.createElementStyle)({
         elementId,
         ...typeof customCss !== "undefined" ? { custom_css: customCss } : {},
         classesProp: "classes",
@@ -4751,7 +4799,7 @@ var doUpdateElementProperty = (params) => {
         }
       });
     } else {
-      (0, import_editor_elements12.updateElementStyle)({
+      (0, import_editor_elements13.updateElementStyle)({
         elementId,
         styleId: localStyle.id,
         meta: {
@@ -4766,7 +4814,7 @@ var doUpdateElementProperty = (params) => {
     }
     return;
   }
-  const elementPropSchema = (0, import_editor_elements12.getWidgetsCache)()?.[elementType]?.atomic_props_schema;
+  const elementPropSchema = (0, import_editor_elements13.getWidgetsCache)()?.[elementType]?.atomic_props_schema;
   if (!elementPropSchema) {
     throw new Error(`No prop schema found for element type: ${elementType}`);
   }
@@ -4789,7 +4837,7 @@ var doUpdateElementProperty = (params) => {
 Expected Schema: ${jsonSchema}`
     );
   }
-  (0, import_editor_elements12.updateElementSettings)({
+  (0, import_editor_elements13.updateElementSettings)({
     id: elementId,
     props: {
       [propertyName]: value
@@ -4799,782 +4847,11 @@ Expected Schema: ${jsonSchema}`
   (0, import_editor_v1_adapters20.__privateRunCommandSync)("document/save/set-is-modified", { status: true }, { internal: true });
 };
 
-// src/composition-builder/utils/required-default-child-tags.ts
-function getRequiredDefaultChildTemplates(elementConfig) {
-  const defaultChildren = elementConfig?.default_children;
-  if (!Array.isArray(defaultChildren)) {
-    return [];
-  }
-  return defaultChildren.filter((child) => child?.meta?.required ?? false);
-}
-
-// src/composition-builder/utils/required-children-enforcer.ts
-var REQUIRED_CHILD_SCHEMA_HINT = "Use the widget schema resource; under llm_guidance.required_direct_children for V4 widgets.";
-var RequiredChildrenEnforcer = class {
-  elementType;
-  requiredTemplates;
-  constructor(elementType, widgetsCache) {
-    this.elementType = elementType;
-    this.requiredTemplates = getRequiredDefaultChildTemplates(widgetsCache[elementType]);
-  }
-  enforce(xml) {
-    if (this.requiredTemplates.length === 0) {
-      return;
-    }
-    const errors = [];
-    for (const rootNode of Array.from(xml.children)) {
-      this.collectMissingRequiredErrors(rootNode, errors);
-    }
-    if (errors.length) {
-      throw new Error(`${errors.join("\n")}
-${REQUIRED_CHILD_SCHEMA_HINT}`);
-    }
-  }
-  collectMissingRequiredErrors(node, errors) {
-    if (node.tagName === this.elementType) {
-      const existingChildTags = new Set(Array.from(node.children).map((child) => child.tagName));
-      const missingTags = this.requiredTemplates.map((child) => child.widgetType ?? child.elType ?? "").filter((type) => type && !existingChildTags.has(type));
-      if (missingTags.length) {
-        const configurationId = node.getAttribute("configuration-id");
-        const location2 = configurationId ? `<${node.tagName} configuration-id="${configurationId}">` : `<${node.tagName}>`;
-        errors.push(
-          `${location2} Missing required direct child element tag(s): ${missingTags.join(", ")}.`
-        );
-      }
-    }
-    for (const childNode of Array.from(node.children)) {
-      this.collectMissingRequiredErrors(childNode, errors);
-    }
-  }
-};
-
-// src/composition-builder/composition-builder.ts
-var CREATE_ELEMENT_INVALID_CONTAINER_MESSAGE = "createElement did not return an element container with a model.";
-var CompositionBuilder = class _CompositionBuilder {
-  elementConfig = {};
-  elementStylesConfig = {};
-  elementCustomCSS = {};
-  rootContainers = [];
-  api = {
-    createElement: import_editor_elements13.createElement,
-    deleteElement: import_editor_elements13.deleteElement,
-    getWidgetsCache: import_editor_elements13.getWidgetsCache,
-    generateElementId: import_editor_elements13.generateElementId,
-    getContainer: import_editor_elements13.getContainer,
-    doUpdateElementProperty
-  };
-  xml;
-  static fromXMLString(xmlString, api = {}) {
-    const parser = new DOMParser();
-    const xmlDoc = parser.parseFromString(xmlString, "application/xml");
-    const errorNode = xmlDoc.querySelector("parsererror");
-    if (errorNode) {
-      throw new Error("Failed to parse XML string: " + errorNode.textContent);
-    }
-    return new _CompositionBuilder({
-      xml: xmlDoc,
-      api
-    });
-  }
-  constructor(opts) {
-    const { api = {}, elementConfig = {}, stylesConfig = {}, customCSS = {}, xml } = opts;
-    this.xml = xml;
-    Object.assign(this.api, api);
-    this.setElementConfig(elementConfig);
-    this.setStylesConfig(stylesConfig);
-    this.setCustomCSS(customCSS);
-  }
-  setElementConfig(config) {
-    this.elementConfig = config;
-  }
-  setStylesConfig(config) {
-    this.elementStylesConfig = config;
-  }
-  setCustomCSS(config) {
-    this.elementCustomCSS = config;
-  }
-  getXML() {
-    return this.xml;
-  }
-  buildModelTree(node, widgetsCache) {
-    const elementTag = node.tagName;
-    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
-      },
-      elType: "widget"
-    };
-    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(", ")}`
-          );
-        }
-      }
-    }
-    for (const child of Array.from(node.children)) {
-      errors.push(...this.validateChildTypes(child, widgetsCache));
-    }
-    return errors;
-  }
-  matchNodeByConfigId(configId) {
-    const node = this.xml.querySelector(`[configuration-id="${configId}"]`);
-    if (!node) {
-      throw new Error(`Configuration id "${configId}" does not have target node.`);
-    }
-    const id = node.getAttribute("id");
-    if (!id) {
-      throw new Error(`Node with configuration id "${configId}" does not have element id.`);
-    }
-    const element = this.api.getContainer(id);
-    if (!element) {
-      throw new Error(`Element with id "${id}" not found but should exist.`);
-    }
-    return {
-      element,
-      node
-    };
-  }
-  async applyProperties() {
-    const configErrors = [];
-    const styleErrors = [];
-    const allConfigIds = /* @__PURE__ */ new Set([
-      ...Object.keys(this.elementConfig),
-      ...Object.keys(this.elementStylesConfig),
-      ...Object.keys(this.elementCustomCSS)
-    ]);
-    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.elementCustomCSS[configId]) {
-          styleErrors.push(msg);
-        }
-        continue;
-      }
-      const config = this.elementConfig[configId];
-      if (config) {
-        for (const [propertyName, propertyValue] of Object.entries(config)) {
-          try {
-            this.api.doUpdateElementProperty({
-              elementId: element.id,
-              propertyName,
-              propertyValue,
-              elementType: node.tagName
-            });
-          } catch (error) {
-            configErrors.push(error.message);
-          }
-        }
-      }
-      const styleConfig = this.elementStylesConfig[configId];
-      const hasInvalidStyles = false;
-      if (styleConfig) {
-        const validStylesPropValues = {};
-        for (const [styleName, stylePropValue] of Object.entries(styleConfig)) {
-          if (styleName === "$intention") {
-            continue;
-          } 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 intentionCss = typeof styleConfig?.$intention === "string" ? styleConfig.$intention.trim() : "";
-      const fallbackCss = hasInvalidStyles && intentionCss ? intentionCss : "";
-      const mergedCustomCss = mergeCustomCssText(this.elementCustomCSS[configId], fallbackCss);
-      if (mergedCustomCss) {
-        try {
-          this.api.doUpdateElementProperty({
-            elementId: element.id,
-            propertyName: "_styles",
-            propertyValue: { custom_css: mergedCustomCss },
-            elementType: node.tagName
-          });
-        } catch (cssErr) {
-          styleErrors.push(String(cssErr));
-        }
-      }
-      await this.awaitViewRender(element);
-    }
-    return { configErrors, styleErrors };
-  }
-  async build(rootContainer) {
-    const widgetsCache = this.api.getWidgetsCache() || {};
-    new Set(this.xml.querySelectorAll("*")).forEach((node) => {
-      if (!widgetsCache[node.tagName]) {
-        throw new Error(`Unknown widget type: ${node.tagName}`);
-      }
-    });
-    const typesWithRequiredChildren = Object.keys(widgetsCache).filter(
-      (elementType) => getRequiredDefaultChildTemplates(widgetsCache[elementType]).length > 0
-    );
-    typesWithRequiredChildren.forEach((elementType) => {
-      new RequiredChildrenEnforcer(elementType, widgetsCache).enforce(this.xml);
-    });
-    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 formErrors = [
-      ...collectFormAncestorErrors(this.xml),
-      ...collectSubmitButtonErrors(this.xml),
-      ...collectEmptyMessageErrors(this.xml)
-    ];
-    const children = Array.from(this.xml.children);
-    for (const childNode of children) {
-      const modelTree = this.buildModelTree(childNode, widgetsCache);
-      try {
-        const newElement = this.api.createElement({
-          container: rootContainer,
-          model: modelTree,
-          options: { useHistory: false }
-        });
-        if (!newElement?.model) {
-          throw new Error(CREATE_ELEMENT_INVALID_CONTAINER_MESSAGE);
-        }
-        this.rootContainers.push(newElement);
-        await this.awaitViewRender(newElement);
-      } catch (e) {
-        const attempToRestoreInvalidContainer = this.api.getContainer(modelTree.id);
-        if (attempToRestoreInvalidContainer) {
-          this.api.deleteElement({ container: attempToRestoreInvalidContainer });
-        }
-        throw e;
-      }
-    }
-    const { configErrors, styleErrors } = await this.applyProperties();
-    if (typeof window !== "undefined") {
-      const targetWindow = window.top || window;
-      targetWindow.dispatchEvent(
-        new CustomEvent("elementor/composition/built", {
-          detail: { rootContainers: this.rootContainers.map((c) => c.id) }
-        })
-      );
-    }
-    return {
-      configErrors,
-      styleErrors,
-      formErrors,
-      rootContainers: [...this.rootContainers]
-    };
-  }
-};
-
-// src/utils/tracking.ts
-var import_events = require("@elementor/events");
-var trackCanvasEvent = (data) => {
-  (0, import_events.trackEvent)(data);
-};
-
-// src/mcp/utils/element-data-util.ts
-var import_editor_elements14 = require("@elementor/editor-elements");
-function hasV3Controls(controls) {
-  return typeof controls === "object" && controls !== null && Object.keys(controls).length > 0;
-}
-function isWidgetAvailableForLLM(config) {
-  if (!config) {
-    return false;
-  }
-  if (config.meta?.llm_support === false) {
-    return false;
-  }
-  if (config.title === "Component") {
-    return false;
-  }
-  if (config.atomic_props_schema) {
-    return true;
-  }
-  return hasV3Controls(config.controls);
-}
-
-// src/mcp/utils/get-composition-target-container.ts
-var import_editor_documents2 = require("@elementor/editor-documents");
-function getCompositionTargetContainer(documentContainer, documentType) {
-  const firstChild = documentContainer.children?.[0];
-  if (documentType === import_editor_documents2.COMPONENT_DOCUMENT_TYPE && firstChild) {
-    return firstChild;
-  }
-  return documentContainer;
-}
-
-// src/mcp/tools/build-composition/prompt.ts
-var import_editor_mcp2 = require("@elementor/editor-mcp");
-var BUILD_COMPOSITIONS_GUIDE_URI = "elementor://canvas/tools/build-compositions-guide";
-var generatePrompt = () => {
-  const buildCompositionsToolPrompt = (0, import_editor_mcp2.toolPrompts)("build-compositions");
-  buildCompositionsToolPrompt.description(`
-# RESOURCES (Read before use)
-- [elementor://global-classes] - Check FIRST for reusable classes
-- [elementor://global-variables] - ONLY use variables defined here
-- [${AVAILABLE_WIDGETS_URI}/v4]
-
-# TOOL SUPPORT
-This tool support v4 elements only
-
-# WORKFLOW
-1. Check/create global classes via "manage-global-classes" tool
-2. Build composition (THIS TOOL) - minimal inline styles
-3. Apply classes via "apply-global-class" tool
-
-# XML STRUCTURE
-- Use widget tags: \`<e-button configuration-id="btn1"></e-button>\`
-- Containers: "e-flexbox", "e-div-block", "e-tabs"
-- 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
-- \`llm_guidance.required_direct_children\` lists element types that must appear as direct child tags in XML (from widget defaults)
-- \`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) + style (raw CSS declarations)
-- elementConfig PropValues require \`$$type\` matching schema
-- style is raw CSS (property \u2192 value strings); the server converts it to native styles and stores any unconvertible declarations as the element custom CSS
-- NO LINKS in configuration
-- Retry on errors up to 10x
-- Check \`llm_guidance.default_settings\` in widget schemas \u2014 omit only keys listed there from elementConfig unless the user explicitly asks to change them
-
-# DYNAMIC TAGS
-- A value can be made dynamic wherever its schema exposes a \`"$$type": "dynamic"\` variant. This may be the property root OR a NESTED field (e.g. an image's \`src\`, not the whole \`image\`).
-- Put the dynamic object EXACTLY at that node, in place of the static variant. The variant's \`name\` lists the allowed tags; read [${DYNAMIC_TAGS_URI}] for each tag's settings schema.
-- Provide at that node: \`{ "$$type": "dynamic", "value": { "name": "<allowed tag>", "settings": { ... } } }\`
-- Example (image): \`{ "$$type": "image", "value": { "src": { "$$type": "dynamic", "value": { "name": "<image tag>", "settings": { ... } } } } }\`
-- Do NOT send \`group\` (it is resolved automatically). Populate \`settings\` strictly per the tag's schema; use \`{}\` only when it has none.
-
-Note about configuration ids: These names are visible to the end-user, make sure they make sense, related and relevant.
-
-# DESIGN PHILOSOPHY: CONTEXT-DRIVEN CREATIVITY
-
-**Use the user's context aggressively.** Business type, brand personality, target audience, and purpose should drive every design decision. A law firm needs gravitas; a children's app needs playfulness. Don't default to generic.
-
-## SIZING: DEFAULT IS NO SIZE (CRITICAL)
-
-**DO NOT specify height or width unless you have a specific visual reason.**
-
-Flexbox and CSS already handle sizing automatically:
-- Containers grow to fit their content
-- Flex children distribute space via flex properties, not width/height
-- Text elements size to their content
-
-WHEN TO SPECIFY SIZE:
-- min-height on ROOT section for viewport-spanning hero (use min-height, NOT height)
-- max-width for contained content areas (e.g., max-width: 60rem)
-- Explicit aspect ratios for media containers
-
-NEVER SPECIFY:
-- height on nested containers (causes overflow)
-- width on flex children (use flex-basis or gap instead)
-- 100vh on anything except root-level sections
-- Any size "just to be safe" - if unsure, OMIT IT
-
-vh units are VIEWPORT-relative. Nested 100vh inside 100vh = 200vh overflow.
-
-GOOD: \`<e-flexbox>content naturally sizes</e-flexbox>\`
-BAD: \`<e-flexbox style="height:100vh"><e-div-block style="height:100vh">overflow</e-div-block></e-flexbox>\`
-
-## Layout Variety (Break the Template)
-- AVOID: Full-width 100vh hero \u2192 three columns \u2192 testimonials \u2192 CTA (every AI does this)
-- VARY heights: Use auto-height sections with generous padding (6rem+). Let content breathe
-- VARY widths: Not everything spans full width. Use contained sections (max-width: 960px) mixed with edge-to-edge
-- ASYMMETRIC grids: 2:1, 1:3, offset layouts. Avoid equal column widths
-- Negative space as design element: Large margins create focus and sophistication
-- Break alignment intentionally: Offset headings, overlapping elements, broken grids
-
-## Visual Depth & Effects
-- Layer elements: Overlapping cards, text over images, floating elements
-- Subtle shadows with color tint (not pure black): \`box-shadow: 0 20px 60px rgba(<brand-color-here>, 0.15)\`
-- Gradient overlays on images for text readability
-- Border radius variation: Mix sharp (0) and soft (1rem+) corners purposefully
-- Backdrop blur for glassmorphism where appropriate
-- Micro-interactions via CSS: hover transforms, transitions (0.3s ease)
-
-## Typography with Character
-- Display fonts for headlines (from user's brand or contextually appropriate)
-- Size contrast: 4rem+ headlines vs 1rem body. Make hierarchy unmistakable
-- Letter-spacing: Tight for large headlines (-0.02em), loose for small caps (0.1em)
-- Line-height: Tight for headlines (1.1), generous for body (1.6-1.8)
-- Text decoration: Underlines, highlights, gradient text for emphasis
-
-## Color with Purpose
-- Extract palette from user context (brand colors, industry norms, mood)
-- 60-30-10 rule: dominant, secondary, accent
-- Tinted neutrals over pure grays: warm (#faf8f5, #2d2a26) or cool (#f5f7fa, #1e2430)
-- Color blocking: Large colored sections create visual rhythm
-- Gradient directions: Diagonal (135deg, 225deg) feel more dynamic than vertical
-
-## Spacing Strategy
-- Section padding: 6rem-10rem vertical, creating breathing room
-- Rhythm variation: Tight groups (2rem) with generous gaps between (6rem)
-- Use rem/em exclusively for responsive scaling
-- Generous padding on CTAs: min 1rem 2.5rem
-
-# HARD CONSTRAINTS
-- Variables ONLY from [elementor://global-variables] (others throw errors)
-- Avoid SVG widgets unless assets are pre-uploaded
-- Check \`llm_guidance\` in widget schemas (\`default_styles\`, nesting, required children)
-
-# PARAMETERS
-- **xmlStructure**: Valid XML with configuration-id attributes
-- **elementConfig**: configuration-id \u2192 widget PropValues
-- **style**: configuration-id \u2192 raw CSS declarations (property \u2192 value strings; no selectors)
-  `);
-  buildCompositionsToolPrompt.example(`
-Section with heading + button (NO explicit heights - content sizes naturally):
-{
-  xmlStructure: "<e-flexbox configuration-id="Main Section"><e-heading configuration-id="Section Title"></e-heading><e-button configuration-id="Call to Action"></e-button></e-flexbox>",
-  elementConfig: {
-    "section1": { "tag": { "$$type": "string", "value": "section" } }
-  },
-  style: {
-    "Section Title": {
-      "padding": "6rem 4rem",
-      "background": "linear-gradient(135deg, #faf8f5 0%, #f0ebe4 100%)",
-      "font-size": "3.5rem",
-      "color": "#2d2a26"
-    }
-  }
-}
-Note: No height/width specified on any element - flexbox handles layout automatically.
-`);
-  buildCompositionsToolPrompt.parameter(
-    "xmlStructure",
-    `Valid XML structure with custom elementor tags and configuration-id attributes.`
-  );
-  buildCompositionsToolPrompt.parameter("elementConfig", `Record mapping configuration IDs to widget PropValues.`);
-  buildCompositionsToolPrompt.parameter(
-    "style",
-    `Record mapping configuration IDs to raw CSS declarations (property \u2192 value strings).`
-  );
-  buildCompositionsToolPrompt.instruction(
-    `Element IDs in the returned XML represent actual widgets. Use these IDs for subsequent styling or configuration changes.`
-  );
-  return buildCompositionsToolPrompt.prompt();
-};
-
-// src/mcp/tools/build-composition/schema.ts
-var import_schema = require("@elementor/schema");
-var inputSchema = {
-  xmlStructure: import_schema.z.string().describe("The XML structure representing the composition to be built"),
-  elementConfig: import_schema.z.record(
-    import_schema.z.string().describe("The configuration id"),
-    import_schema.z.record(
-      import_schema.z.string().describe("property name"),
-      import_schema.z.any().describe(`The PropValue for the property, refer to ${WIDGET_SCHEMA_URI}`)
-    )
-  ).describe("A record mapping element IDs to their configuration objects. REQUIRED"),
-  style: import_schema.z.record(
-    import_schema.z.string().describe("The configuration id"),
-    import_schema.z.record(
-      import_schema.z.string().describe('A CSS property name, e.g. "color", "padding".'),
-      import_schema.z.string().describe('A CSS value, e.g. "6rem 4rem", "#2d2a26".')
-    )
-  ).describe(
-    "A record mapping element configuration IDs to their raw CSS declarations (property\u2192value). Converted to native styles server-side; any declaration that cannot be converted is stored as the element custom CSS."
-  ).default({})
-};
-var outputSchema = {
-  errors: import_schema.z.string().describe("Error message if the composition building failed").optional(),
-  xmlStructure: import_schema.z.string().describe(
-    "The built XML structure as a string. Must use this XML after completion of building the composition, it contains real IDs."
-  ).optional(),
-  llm_instructions: import_schema.z.string().describe("Instructions what to do next, Important to follow these instructions!").optional()
-};
-
-// src/mcp/tools/build-composition/xml-leaf-wrapper.ts
-var DIV_BLOCK_TAG = "e-div-block";
-var ZERO_SPACING = {
-  $$type: "size",
-  value: {
-    size: {
-      $$type: "number",
-      value: 0
-    },
-    unit: {
-      $$type: "string",
-      value: "px"
-    }
-  }
-};
-function adaptLeafRootParams(params) {
-  const doc = new DOMParser().parseFromString(params.xmlStructure, "application/xml");
-  const rootElement = doc.documentElement;
-  if (!isLeafWidget(rootElement.tagName, params.widgetsCache)) {
-    return params;
-  }
-  const wrapperConfigId = getDivBlockWrapperConfigId(params.widgetsCache);
-  return {
-    ...params,
-    xmlStructure: serializeWrapped(doc, rootElement, wrapperConfigId),
-    stylesConfig: {
-      ...params.stylesConfig,
-      [wrapperConfigId]: {
-        margin: ZERO_SPACING,
-        padding: ZERO_SPACING,
-        ...params.stylesConfig[wrapperConfigId]
-      }
-    }
-  };
-}
-function getDivBlockWrapperConfigId(widgetsCache) {
-  return widgetsCache[DIV_BLOCK_TAG]?.title ?? DIV_BLOCK_TAG;
-}
-function isLeafWidget(tagName, widgetsCache) {
-  return widgetsCache[tagName]?.elType === "widget";
-}
-function serializeWrapped(doc, rootElement, wrapperConfigId) {
-  const wrapper = doc.createElement(DIV_BLOCK_TAG);
-  wrapper.setAttribute("configuration-id", wrapperConfigId);
-  wrapper.appendChild(rootElement.cloneNode(true));
-  const wrappedDoc = new DOMParser().parseFromString(`<${DIV_BLOCK_TAG} />`, "application/xml");
-  wrappedDoc.replaceChild(wrapper, wrappedDoc.documentElement);
-  return new XMLSerializer().serializeToString(wrappedDoc);
-}
-
-// src/mcp/tools/build-composition/tool.ts
-var ELEMENT_ADDED_EVENT = "elementor/canvas/element-added";
-var initBuildCompositionsTool = (reg) => {
-  const { addTool, resource } = reg;
-  resource(
-    "build-compositions-guide",
-    BUILD_COMPOSITIONS_GUIDE_URI,
-    {
-      title: "Build Compositions Guide",
-      description: "Detailed guide for using the build-compositions tool",
-      mimeType: "text/plain"
-    },
-    async (uri) => ({
-      contents: [{ uri: uri.href, mimeType: "text/plain", text: generatePrompt() }]
-    })
-  );
-  addTool({
-    name: "build-compositions",
-    description: "Build V4 element compositions on the Elementor canvas. Read the guide resource before use.",
-    schema: inputSchema,
-    requiredResources: [
-      { description: "Build compositions guide", uri: BUILD_COMPOSITIONS_GUIDE_URI },
-      { description: "Widgets schema", uri: WIDGET_SCHEMA_URI },
-      { description: "Global Classes", uri: "elementor://global-classes" },
-      { description: "Global Variables", uri: "elementor://global-variables" },
-      { description: "Styles best practices", uri: BEST_PRACTICES_URI },
-      { description: "Available widgets for this tool", uri: AVAILABLE_WIDGETS_URI_V4 },
-      { description: "Dynamic tags catalog", uri: DYNAMIC_TAGS_URI }
-    ],
-    outputSchema,
-    handler: async (rawParams) => {
-      assertCompositionXmlUsesV4WidgetsOnly(rawParams.xmlStructure);
-      const { stylesConfig: convertedStyles, customCSS } = await convertCompositionStyles(rawParams.style);
-      const { xmlStructure, elementConfig, stylesConfig } = adaptLeafRootParams({
-        ...rawParams,
-        stylesConfig: convertedStyles,
-        widgetsCache: (0, import_editor_elements15.getWidgetsCache)() ?? {}
-      });
-      let generatedXML = "";
-      const errors = [];
-      const rootContainers = [];
-      const documentContainer = (0, import_editor_elements15.getContainer)("document");
-      const currentDocument = (0, import_editor_documents3.getCurrentDocument)();
-      const targetContainer = getCompositionTargetContainer(documentContainer, currentDocument?.type.value);
-      try {
-        const compositionBuilder = CompositionBuilder.fromXMLString(xmlStructure, {
-          createElement: import_editor_elements15.createElement,
-          deleteElement: import_editor_elements15.deleteElement,
-          getWidgetsCache: import_editor_elements15.getWidgetsCache
-        });
-        compositionBuilder.setElementConfig(elementConfig);
-        compositionBuilder.setStylesConfig(stylesConfig);
-        compositionBuilder.setCustomCSS(customCSS);
-        const {
-          configErrors,
-          formErrors,
-          rootContainers: generatedRootContainers
-        } = await compositionBuilder.build(targetContainer);
-        rootContainers.push(...generatedRootContainers);
-        generatedXML = new XMLSerializer().serializeToString(compositionBuilder.getXML());
-        rootContainers.forEach((container) => {
-          const elementData = container.model?.toJSON();
-          if (elementData) {
-            onElementAdded(elementData);
-          }
-        });
-        Object.values(stylesConfig).forEach((styleValue) => {
-          (0, import_editor_mcp3.dispatchMcpStylesAppliedEvent)({ styleValue });
-        });
-        if (configErrors.length) {
-          errors.push(...configErrors.map((msg) => new Error(msg)));
-        }
-        if (formErrors.length) {
-          errors.push(...formErrors.map((msg) => new Error(msg)));
-        }
-      } catch (error) {
-        errors.push(error);
-      }
-      if (errors.length) {
-        rootContainers.forEach((rootContainer) => {
-          (0, import_editor_elements15.deleteElement)({
-            container: rootContainer,
-            options: { useHistory: false }
-          });
-        });
-        const errorMessages = errors.map((e) => {
-          if (typeof e === "string") {
-            return e;
-          }
-          if (e instanceof Error) {
-            return e.message || String(e);
-          }
-          if (typeof e === "object" && e !== null) {
-            return JSON.stringify(e);
-          }
-          return String(e);
-        }).filter(
-          (msg) => msg && msg.trim() !== "" && msg !== "{}" && msg !== "null" && msg !== "undefined"
-        );
-        if (errorMessages.length === 0) {
-          throw new Error(
-            "Failed to build composition: Unknown error occurred. No error details available."
-          );
-        }
-        const errorText = `Failed to build composition with the following errors:
-
-${errorMessages.join(
-          "\n\n"
-        )}`;
-        throw new Error(errorText);
-      }
-      return {
-        xmlStructure: generatedXML,
-        errors: errors?.length ? errors.map((e) => typeof e === "string" ? e : e.message).join("\n\n") : void 0,
-        llm_instructions: `The composition was built successfully with element IDs embedded in the XML.
-
-**CRITICAL NEXT STEPS** (Follow in order):
-1. **Apply Global Classes**: Use "apply-global-class" tool to apply the global classes you created BEFORE building this composition
-   - Check the created element IDs in the returned XML
-   - Apply semantic classes (heading-primary, button-cta, etc.) to appropriate elements
-
-2. **Fine-tune if needed**: Use "configure-element" tool only for element-specific adjustments that don't warrant global classes
-
-Remember: Global classes ensure design consistency and reusability. Don't skip applying them!
-`
-      };
-    }
-  });
-};
-async function convertCompositionStyles(style) {
-  const stylesConfig = {};
-  const customCSS = {};
-  if (!style || Object.keys(style).length === 0) {
-    return { stylesConfig, customCSS };
-  }
-  const results = await convertStyleBlocksToAtomic(style);
-  for (const [configId, { props, customCss }] of Object.entries(results)) {
-    stylesConfig[configId] = props;
-    if (customCss) {
-      customCSS[configId] = customCss;
-    }
-  }
-  return { stylesConfig, customCSS };
-}
-function assertCompositionXmlUsesV4WidgetsOnly(xmlStructure) {
-  const doc = new DOMParser().parseFromString(xmlStructure, "application/xml");
-  if (doc.querySelector("parsererror")) {
-    throw new Error("Failed to parse XML string: " + doc);
-  }
-  const widgetsCache = (0, import_editor_elements15.getWidgetsCache)() ?? {};
-  for (const node of doc.querySelectorAll("*")) {
-    const type = node.tagName;
-    const widgetData = widgetsCache[type];
-    if (!widgetData) {
-      continue;
-    }
-    if (widgetData.elType !== "widget") {
-      continue;
-    }
-    if (!isWidgetAvailableForLLM(widgetData) || !widgetData.atomic_props_schema) {
-      throw new Error(`This tool does not support element type: ${type}`);
-    }
-  }
-}
-function onElementAdded(element) {
-  const elType = element.elType ?? "";
-  const widgetType = element.widgetType ?? "";
-  const elementName = elType === "widget" ? widgetType : elType;
-  trackCanvasEvent({
-    eventName: "add_element",
-    executed_by: "mcp_tool",
-    element_name: elementName,
-    element_type: elType,
-    widget_type: widgetType
-  });
-  const event = {
-    element,
-    executedBy: "mcp_tool"
-  };
-  window.dispatchEvent(new CustomEvent(ELEMENT_ADDED_EVENT, { detail: event }));
-  if (element.elements?.length) {
-    element.elements?.forEach((childElement) => {
-      onElementAdded(childElement);
-    });
-  }
-}
-
-// src/mcp/tools/configure-element/tool.ts
-var import_editor_elements16 = require("@elementor/editor-elements");
-var import_editor_mcp5 = require("@elementor/editor-mcp");
-var import_editor_props7 = require("@elementor/editor-props");
-
 // src/mcp/tools/configure-element/prompt.ts
-var import_editor_mcp4 = require("@elementor/editor-mcp");
+var import_editor_mcp2 = require("@elementor/editor-mcp");
 var CONFIGURE_ELEMENT_GUIDE_URI = "elementor://canvas/tools/configure-element-guide";
-var generatePrompt2 = () => {
-  const configureElementToolPrompt = (0, import_editor_mcp4.toolPrompts)("configure-element");
+var generatePrompt = () => {
+  const configureElementToolPrompt = (0, import_editor_mcp2.toolPrompts)("configure-element");
   configureElementToolPrompt.description(`
 Configure an existing element on the page.
 
@@ -5682,29 +4959,29 @@ NO Advanced tab. Never mention Advanced tab.
 `);
   return configureElementToolPrompt.prompt();
 };
-var CONFIGURE_ELEMENT_GUIDE_TEXT = generatePrompt2();
+var CONFIGURE_ELEMENT_GUIDE_TEXT = generatePrompt();
 
 // src/mcp/tools/configure-element/schema.ts
-var import_schema3 = require("@elementor/schema");
-var inputSchema2 = {
-  propertiesToChange: import_schema3.z.record(
-    import_schema3.z.string().describe("The property name."),
-    import_schema3.z.any().describe(`PropValue, refer to [${WIDGET_SCHEMA_URI}] by correct type, as appears in elementType`),
-    import_schema3.z.any()
+var import_schema2 = require("@elementor/schema");
+var inputSchema = {
+  propertiesToChange: import_schema2.z.record(
+    import_schema2.z.string().describe("The property name."),
+    import_schema2.z.any().describe(`PropValue, refer to [${WIDGET_SCHEMA_URI}] by correct type, as appears in elementType`),
+    import_schema2.z.any()
   ).describe("An object record containing property names and their new values to be set on the element"),
-  style: import_schema3.z.record(
-    import_schema3.z.string().describe('A CSS property name, e.g. "color", "margin-top".'),
-    import_schema3.z.string().nullable().describe(
+  style: import_schema2.z.record(
+    import_schema2.z.string().describe('A CSS property name, e.g. "color", "margin-top".'),
+    import_schema2.z.string().nullable().describe(
       'A CSS value, e.g. "red", "10px", "1px solid #000". Use null to reset the property to its default.'
     )
   ).describe(
     "Raw CSS declarations as a flat property\u2192value map. Converted to native styles server-side; any declaration that cannot be converted is stored as the element custom CSS. A null value resets that property to its default."
   ).default({}),
-  elementType: import_schema3.z.string().describe("The type of the element to retrieve the schema"),
-  elementId: import_schema3.z.string().describe("The unique id of the element to configure")
+  elementType: import_schema2.z.string().describe("The type of the element to retrieve the schema"),
+  elementId: import_schema2.z.string().describe("The unique id of the element to configure")
 };
-var outputSchema2 = {
-  success: import_schema3.z.boolean().describe(
+var outputSchema = {
+  success: import_schema2.z.boolean().describe(
     "Whether the configuration change was successful, only if propertyName and propertyValue are provided"
   )
 };
@@ -5721,27 +4998,27 @@ var initConfigureElementTool = (reg) => {
       mimeType: "text/plain"
     },
     async (uri) => ({
-      contents: [{ uri: uri.href, mimeType: "text/plain", text: generatePrompt2() }]
+      contents: [{ uri: uri.href, mimeType: "text/plain", text: generatePrompt() }]
     })
   );
   addTool({
     name: "configure-element",
     description: "Configure an existing V4 element's properties and styles. Read the guide resource before use.",
-    schema: inputSchema2,
-    outputSchema: outputSchema2,
+    schema: inputSchema,
+    outputSchema,
     requiredResources: [
       { description: "Widgets schema", uri: WIDGET_SCHEMA_URI },
       { description: "Configure element guide", uri: CONFIGURE_ELEMENT_GUIDE_URI },
       { description: "Dynamic tags catalog", uri: DYNAMIC_TAGS_URI }
     ],
     handler: async ({ elementId, propertiesToChange, elementType, style }) => {
-      const widgetData = (0, import_editor_elements16.getWidgetsCache)()?.[elementType];
+      const widgetData = (0, import_editor_elements14.getWidgetsCache)()?.[elementType];
       if (!widgetData) {
         throw new Error(
           `Unknown element type: ${elementType}. Check the available-widgets resource for valid types.`
         );
       }
-      const container = (0, import_editor_elements16.getContainer)(elementId);
+      const container = (0, import_editor_elements14.getContainer)(elementId);
       if (!container) {
         throw new Error(`Element with id ${elementId} not found`);
       }
@@ -5806,7 +5083,7 @@ async function applyStyleFromCss(opts) {
       propertyValue: styleValue,
       customCssWriteMode: "merge-with-stored"
     });
-    (0, import_editor_mcp5.dispatchMcpStylesAppliedEvent)({ styleValue });
+    (0, import_editor_mcp3.dispatchMcpStylesAppliedEvent)({ styleValue });
   } catch (error) {
     throw new Error(
       createUpdateErrorMessage({
@@ -5833,30 +5110,30 @@ Provide styling as raw CSS via the "style" parameter (a flat map of CSS property
 }
 
 // src/mcp/tools/create-element/tool.ts
-var import_editor_documents4 = require("@elementor/editor-documents");
-var import_http_client6 = require("@elementor/http-client");
-var import_schema5 = require("@elementor/schema");
-var MCP_PROXY_URL5 = "elementor/v1/mcp-proxy";
+var import_editor_documents3 = require("@elementor/editor-documents");
+var import_http_client7 = require("@elementor/http-client");
+var import_schema4 = require("@elementor/schema");
+var MCP_PROXY_URL6 = "elementor/v1/mcp-proxy";
 var initCreateElementTool = (reg) => {
   const { addTool } = reg;
   addTool({
     name: "create-element",
     description: "Insert a new element into the current Elementor document via the server-side MCP ability. The document is saved as a draft. Reload the editor after calling this tool to see the result.",
     schema: {
-      elementType: import_schema5.z.string().describe("Registry identifier of the element to create, e.g. 'e-heading', 'e-flexbox'."),
-      parentId: import_schema5.z.string().optional().describe("ID of the parent container. Omit or pass 'document' to insert at the document root.")
+      elementType: import_schema4.z.string().describe("Registry identifier of the element to create, e.g. 'e-heading', 'e-flexbox'."),
+      parentId: import_schema4.z.string().optional().describe("ID of the parent container. Omit or pass 'document' to insert at the document root.")
     },
     outputSchema: {
-      elementId: import_schema5.z.string(),
-      previewUrl: import_schema5.z.string(),
-      version: import_schema5.z.string()
+      elementId: import_schema4.z.string(),
+      previewUrl: import_schema4.z.string(),
+      version: import_schema4.z.string()
     },
     handler: async ({ elementType, parentId }) => {
-      const document2 = (0, import_editor_documents4.getCurrentDocument)();
+      const document2 = (0, import_editor_documents3.getCurrentDocument)();
       if (!document2?.id) {
         throw new Error("No active document found.");
       }
-      const { data } = await (0, import_http_client6.httpService)().post(MCP_PROXY_URL5, {
+      const { data } = await (0, import_http_client7.httpService)().post(MCP_PROXY_URL6, {
         tool: "create-element",
         input: {
           parent_id: parentId ?? "document",
@@ -5874,20 +5151,20 @@ var initCreateElementTool = (reg) => {
 };
 
 // src/mcp/tools/get-element-config/tool.ts
-var import_editor_elements17 = require("@elementor/editor-elements");
+var import_editor_elements15 = require("@elementor/editor-elements");
 var import_editor_props8 = require("@elementor/editor-props");
-var import_schema6 = require("@elementor/schema");
+var import_schema5 = require("@elementor/schema");
 var schema = {
-  elementId: import_schema6.z.string()
+  elementId: import_schema5.z.string()
 };
-var outputSchema3 = {
-  properties: import_schema6.z.record(import_schema6.z.string(), import_schema6.z.any()).describe("A record mapping PropTypes to their corresponding PropValues"),
-  style: import_schema6.z.record(import_schema6.z.string(), import_schema6.z.any()).describe("A record mapping StyleSchema properties to their corresponding PropValues"),
-  childElements: import_schema6.z.array(
-    import_schema6.z.object({
-      id: import_schema6.z.string(),
-      elementType: import_schema6.z.string(),
-      childElements: import_schema6.z.array(import_schema6.z.any()).describe("An array of child element IDs, when applicable, same structure recursively")
+var outputSchema2 = {
+  properties: import_schema5.z.record(import_schema5.z.string(), import_schema5.z.any()).describe("A record mapping PropTypes to their corresponding PropValues"),
+  style: import_schema5.z.record(import_schema5.z.string(), import_schema5.z.any()).describe("A record mapping StyleSchema properties to their corresponding PropValues"),
+  childElements: import_schema5.z.array(
+    import_schema5.z.object({
+      id: import_schema5.z.string(),
+      elementType: import_schema5.z.string(),
+      childElements: import_schema5.z.array(import_schema5.z.any()).describe("An array of child element IDs, when applicable, same structure recursively")
     })
   ).describe("An array of child element IDs, when applicable, with recursive structure")
 };
@@ -5907,14 +5184,14 @@ var initGetElementConfigTool = (reg) => {
     name: "get-element-configuration-values",
     description: "Retrieve the element's configuration PropValues for a specific element by unique ID.",
     schema,
-    outputSchema: outputSchema3,
+    outputSchema: outputSchema2,
     handler: async ({ elementId }) => {
-      const element = (0, import_editor_elements17.getContainer)(elementId);
+      const element = (0, import_editor_elements15.getContainer)(elementId);
       if (!element) {
         throw new Error(`Element with ID ${elementId} not found.`);
       }
       const elementType = element.model.get("widgetType") || element.model.get("elType") || "";
-      const widgetData = (0, import_editor_elements17.getWidgetsCache)()?.[elementType];
+      const widgetData = (0, import_editor_elements15.getWidgetsCache)()?.[elementType];
       if (!widgetData) {
         throw new Error(
           `Unknown element type: ${elementType}. Check the available-widgets resource for valid types.`
@@ -5926,7 +5203,7 @@ var initGetElementConfigTool = (reg) => {
         );
       }
       const elementRawSettings = element.settings;
-      const propSchema = (0, import_editor_elements17.getWidgetsCache)()?.[elementType]?.atomic_props_schema;
+      const propSchema = (0, import_editor_elements15.getWidgetsCache)()?.[elementType]?.atomic_props_schema;
       if (!elementRawSettings || !propSchema) {
         throw new Error(`No settings or prop schema found for element ID: ${elementId}`);
       }
@@ -5935,7 +5212,7 @@ var initGetElementConfigTool = (reg) => {
       import_editor_props8.Schema.configurableKeys(propSchema).forEach((key) => {
         propValues[key] = structuredClone(elementRawSettings.get(key));
       });
-      const elementStyles = (0, import_editor_elements17.getElementStyles)(elementId) || {};
+      const elementStyles = (0, import_editor_elements15.getElementStyles)(elementId) || {};
       const localStyle = Object.values(elementStyles).find((style) => style.label === "local");
       if (localStyle) {
         const defaultVariant = localStyle.variants.find(
@@ -5977,10 +5254,10 @@ var initCanvasMcp = (reg) => {
   initEditorStateResource(reg);
   initGeneralContextResource(reg);
   initBestPracticesResource(reg);
-  initBuildCompositionsTool(reg);
   initGetElementConfigTool(reg);
   initConfigureElementTool(reg);
   initCreateElementTool(reg);
+  initBuildCompositionTool(reg);
   initBreakpointsResource(reg);
 };
 
@@ -6093,7 +5370,7 @@ Note: The "size" property controls image resolution/loading, not visual size. Se
 `;
 
 // src/prevent-link-in-link-commands.ts
-var import_editor_elements18 = require("@elementor/editor-elements");
+var import_editor_elements16 = require("@elementor/editor-elements");
 var import_editor_notifications3 = require("@elementor/editor-notifications");
 var import_editor_v1_adapters21 = require("@elementor/editor-v1-adapters");
 var import_i18n4 = require("@wordpress/i18n");
@@ -6164,24 +5441,24 @@ function shouldBlock(sourceElements, targetElements) {
     return false;
   }
   const isSourceContainsAnAnchor = sourceElements.some((src) => {
-    return src?.id ? (0, import_editor_elements18.isElementAnchored)(src.id) || !!(0, import_editor_elements18.getAnchoredDescendantId)(src.id) : false;
+    return src?.id ? (0, import_editor_elements16.isElementAnchored)(src.id) || !!(0, import_editor_elements16.getAnchoredDescendantId)(src.id) : false;
   });
   if (!isSourceContainsAnAnchor) {
     return false;
   }
   const isTargetContainsAnAnchor = targetElements.some((target) => {
-    return target?.id ? (0, import_editor_elements18.isElementAnchored)(target.id) || !!(0, import_editor_elements18.getAnchoredAncestorId)(target.id) : false;
+    return target?.id ? (0, import_editor_elements16.isElementAnchored)(target.id) || !!(0, import_editor_elements16.getAnchoredAncestorId)(target.id) : false;
   });
   return isTargetContainsAnAnchor;
 }
 
 // src/style-commands/paste-style.ts
-var import_editor_elements21 = require("@elementor/editor-elements");
+var import_editor_elements19 = require("@elementor/editor-elements");
 var import_editor_props11 = require("@elementor/editor-props");
 var import_editor_v1_adapters23 = require("@elementor/editor-v1-adapters");
 
 // src/utils/command-utils.ts
-var import_editor_elements19 = require("@elementor/editor-elements");
+var import_editor_elements17 = require("@elementor/editor-elements");
 var import_editor_props10 = require("@elementor/editor-props");
 var import_i18n5 = require("@wordpress/i18n");
 function hasAtomicWidgets(args) {
@@ -6206,7 +5483,7 @@ function getClassesProp(container) {
 }
 function getContainerSchema(container) {
   const type = container?.model.get("widgetType") || container?.model.get("elType");
-  const widgetsCache = (0, import_editor_elements19.getWidgetsCache)();
+  const widgetsCache = (0, import_editor_elements17.getWidgetsCache)();
   const elementType = widgetsCache?.[type];
   return elementType?.atomic_props_schema ?? null;
 }
@@ -6219,11 +5496,11 @@ function getClipboardElements(storageKey = "clipboard") {
   }
 }
 function getTitleForContainers(containers) {
-  return containers.length > 1 ? (0, import_i18n5.__)("Elements", "elementor") : (0, import_editor_elements19.getElementLabel)(containers[0].id);
+  return containers.length > 1 ? (0, import_i18n5.__)("Elements", "elementor") : (0, import_editor_elements17.getElementLabel)(containers[0].id);
 }
 
 // src/style-commands/undoable-actions/paste-element-style.ts
-var import_editor_elements20 = require("@elementor/editor-elements");
+var import_editor_elements18 = require("@elementor/editor-elements");
 var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters22 = require("@elementor/editor-v1-adapters");
 var import_i18n6 = require("@wordpress/i18n");
@@ -6236,7 +5513,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters22.undoable)(
         if (!classesProp) {
           return null;
         }
-        const originalStyles = (0, import_editor_elements20.getElementStyles)(container.id);
+        const originalStyles = (0, import_editor_elements18.getElementStyles)(container.id);
         const [styleId, styleDef] = Object.entries(originalStyles ?? {})[0] ?? [];
         const originalStyle = Object.keys(styleDef ?? {}).length ? styleDef : null;
         const revertData = {
@@ -6245,7 +5522,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters22.undoable)(
         };
         if (styleId) {
           newStyle.variants.forEach(({ meta, props, custom_css: customCss }) => {
-            (0, import_editor_elements20.updateElementStyle)({
+            (0, import_editor_elements18.updateElementStyle)({
               elementId,
               styleId,
               meta,
@@ -6256,7 +5533,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters22.undoable)(
         } else {
           const [firstVariant] = newStyle.variants;
           const additionalVariants = newStyle.variants.slice(1);
-          revertData.styleId = (0, import_editor_elements20.createElementStyle)({
+          revertData.styleId = (0, import_editor_elements18.createElementStyle)({
             elementId,
             classesProp,
             label: import_editor_styles_repository4.ELEMENTS_STYLES_RESERVED_LABEL,
@@ -6274,7 +5551,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters22.undoable)(
           return;
         }
         if (!revertData.originalStyle) {
-          (0, import_editor_elements20.deleteElementStyle)(container.id, revertData.styleId);
+          (0, import_editor_elements18.deleteElementStyle)(container.id, revertData.styleId);
           return;
         }
         const classesProp = getClassesProp(container);
@@ -6283,7 +5560,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters22.undoable)(
         }
         const [firstVariant] = revertData.originalStyle.variants;
         const additionalVariants = revertData.originalStyle.variants.slice(1);
-        (0, import_editor_elements20.createElementStyle)({
+        (0, import_editor_elements18.createElementStyle)({
           elementId: container.id,
           classesProp,
           label: import_editor_styles_repository4.ELEMENTS_STYLES_RESERVED_LABEL,
@@ -6320,7 +5597,7 @@ function pasteStyles(args, pasteLocalStyle) {
   }
   const clipboardElements = getClipboardElements(storageKey);
   const [clipboardElement] = clipboardElements ?? [];
-  const clipboardContainer = (0, import_editor_elements21.getContainer)(clipboardElement.id);
+  const clipboardContainer = (0, import_editor_elements19.getContainer)(clipboardElement.id);
   if (!clipboardElement || !clipboardContainer || !isAtomicWidget(clipboardContainer)) {
     return;
   }
@@ -6339,7 +5616,7 @@ function getClassesWithoutLocalStyle(clipboardContainer, style) {
   if (!classesProp) {
     return [];
   }
-  const classesSetting = (0, import_editor_elements21.getElementSetting)(clipboardContainer.id, classesProp);
+  const classesSetting = (0, import_editor_elements19.getElementSetting)(clipboardContainer.id, classesProp);
   return classesSetting?.value.filter((styleId) => styleId !== style?.id) ?? [];
 }
 function pasteClasses(containers, classes) {
@@ -6348,10 +5625,10 @@ function pasteClasses(containers, classes) {
     if (!classesProp) {
       return;
     }
-    const classesSetting = (0, import_editor_elements21.getElementSetting)(container.id, classesProp);
+    const classesSetting = (0, import_editor_elements19.getElementSetting)(container.id, classesProp);
     const currentClasses = import_editor_props11.classesPropTypeUtil.extract(classesSetting) ?? [];
     const newClasses = import_editor_props11.classesPropTypeUtil.create(Array.from(/* @__PURE__ */ new Set([...classes, ...currentClasses])));
-    (0, import_editor_elements21.updateElementSettings)({
+    (0, import_editor_elements19.updateElementSettings)({
       id: container.id,
       props: { [classesProp]: newClasses }
     });
@@ -6362,7 +5639,7 @@ function pasteClasses(containers, classes) {
 var import_editor_v1_adapters25 = require("@elementor/editor-v1-adapters");
 
 // src/style-commands/undoable-actions/reset-element-style.ts
-var import_editor_elements22 = require("@elementor/editor-elements");
+var import_editor_elements20 = require("@elementor/editor-elements");
 var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters24 = require("@elementor/editor-v1-adapters");
 var import_i18n7 = require("@wordpress/i18n");
@@ -6371,9 +5648,9 @@ var undoableResetElementStyle = () => (0, import_editor_v1_adapters24.undoable)(
     do: ({ containers }) => {
       return containers.map((container) => {
         const elementId = container.model.get("id");
-        const containerStyles = (0, import_editor_elements22.getElementStyles)(elementId);
+        const containerStyles = (0, import_editor_elements20.getElementStyles)(elementId);
         Object.keys(containerStyles ?? {}).forEach(
-          (styleId) => (0, import_editor_elements22.deleteElementStyle)(elementId, styleId)
+          (styleId) => (0, import_editor_elements20.deleteElementStyle)(elementId, styleId)
         );
         return containerStyles;
       });
@@ -6389,7 +5666,7 @@ var undoableResetElementStyle = () => (0, import_editor_v1_adapters24.undoable)(
         Object.entries(containerStyles ?? {}).forEach(([styleId, style]) => {
           const [firstVariant] = style.variants;
           const additionalVariants = style.variants.slice(1);
-          (0, import_editor_elements22.createElementStyle)({
+          (0, import_editor_elements20.createElementStyle)({
             elementId,
             classesProp,
             styleId,
@@ -6461,7 +5738,7 @@ function init() {
     component: ClassesRename
   });
   initCanvasMcp(
-    (0, import_editor_mcp6.getMCPByDomain)("canvas", {
+    (0, import_editor_mcp4.getMCPByDomain)("canvas", {
       instructions: `Everything related to V4 ( Atomic ) canvas.
 # Canvas workflow for new compositions
 - Configure elements settings and styles
@@ -6589,10 +5866,10 @@ function useEscapeOnCanvas(canvasDocument, onEscape) {
 }
 
 // src/utils/after-render.ts
-var import_editor_elements23 = require("@elementor/editor-elements");
+var import_editor_elements21 = require("@elementor/editor-elements");
 function doAfterRender(elementIds, callback) {
   const pending = elementIds.map((elementId) => {
-    const view = (0, import_editor_elements23.getContainer)(elementId)?.view;
+    const view = (0, import_editor_elements21.getContainer)(elementId)?.view;
     if (!view || !hasDoAfterRender(view)) {
       return void 0;
     }
@@ -6607,6 +5884,9 @@ function doAfterRender(elementIds, callback) {
 function hasDoAfterRender(view) {
   return typeof view?._doAfterRender === "function";
 }
+
+// src/sync/element-added-event.ts
+var ELEMENT_ADDED_EVENT = "elementor/canvas/element-added";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BREAKPOINTS_SCHEMA_FULL_URI,