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

package/dist/index.mjs

@@ -1806,46 +1806,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 = {
@@ -4486,23 +4446,100 @@ function getElementDisplayName(container) {
 }
 
 // src/mcp/tools/build-composition/tool.ts
-import { getCurrentDocument } from "@elementor/editor-documents";
-import {
-  createElement as createElement13,
-  deleteElement as deleteElement2,
-  getContainer as getContainer5,
-  getWidgetsCache as getWidgetsCache8
-} from "@elementor/editor-elements";
-import { dispatchMcpStylesAppliedEvent } from "@elementor/editor-mcp";
+import { getCurrentDocument, reloadCurrentDocument } from "@elementor/editor-documents";
+import { getContainer as getContainer4, selectElement } from "@elementor/editor-elements";
+import { AxiosError, httpService as httpService6 } from "@elementor/http-client";
+import { z } from "@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: 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: z.record(
+        z.string().describe("configuration-id"),
+        z.record(z.string().describe("property name"), z.any().describe("PropValue"))
+      ).optional().describe("Map configuration-id \u2192 widget PropValues ($$type + value)."),
+      style: z.record(
+        z.string().describe("configuration-id"),
+        z.record(z.string().describe("CSS property name"), 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: z.string().optional().describe("ID of the parent container. Omit or pass 'document' to insert at document root."),
+      dryRun: z.boolean().optional().describe("If true, validate and return the resolved tree without persisting.")
+    },
+    outputSchema: {
+      rootElementIds: z.array(z.string()),
+      previewUrl: z.string(),
+      version: z.string(),
+      resolvedXml: z.string(),
+      llmInstructions: z.string(),
+      warnings: z.array(z.string()).optional()
+    },
+    handler: async ({ xmlStructure, elementConfig, style, parentId, dryRun }) => {
+      const document2 = getCurrentDocument();
+      if (!document2?.id) {
+        throw new Error("No active document found.");
+      }
+      try {
+        const { data } = await httpService6().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 reloadCurrentDocument();
+          const [firstRootId] = data.data.root_element_ids;
+          if (firstRootId) {
+            selectElement(firstRootId);
+            getContainer4(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 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
-import {
-  createElement as createElement12,
-  deleteElement,
-  generateElementId as generateElementId2,
-  getContainer as getContainer4,
-  getWidgetsCache as getWidgetsCache6
-} from "@elementor/editor-elements";
+// src/mcp/tools/configure-element/tool.ts
+import { getContainer as getContainer5, getWidgetsCache as getWidgetsCache6 } from "@elementor/editor-elements";
+import { dispatchMcpStylesAppliedEvent } from "@elementor/editor-mcp";
+import { Schema as Schema2 } from "@elementor/editor-props";
 
 // src/mcp/utils/do-update-element-property.ts
 import {
@@ -4782,782 +4819,11 @@ Expected Schema: ${jsonSchema}`
   runCommandSync2("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: createElement12,
-    deleteElement,
-    getWidgetsCache: getWidgetsCache6,
-    generateElementId: generateElementId2,
-    getContainer: getContainer4,
-    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
-import { trackEvent } from "@elementor/events";
-var trackCanvasEvent = (data) => {
-  trackEvent(data);
-};
-
-// src/mcp/utils/element-data-util.ts
-import { getWidgetsCache as getWidgetsCache7 } from "@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
-import { COMPONENT_DOCUMENT_TYPE } from "@elementor/editor-documents";
-function getCompositionTargetContainer(documentContainer, documentType) {
-  const firstChild = documentContainer.children?.[0];
-  if (documentType === COMPONENT_DOCUMENT_TYPE && firstChild) {
-    return firstChild;
-  }
-  return documentContainer;
-}
-
-// src/mcp/tools/build-composition/prompt.ts
-import { toolPrompts } from "@elementor/editor-mcp";
-var BUILD_COMPOSITIONS_GUIDE_URI = "elementor://canvas/tools/build-compositions-guide";
-var generatePrompt = () => {
-  const buildCompositionsToolPrompt = 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
-import { z } from "@elementor/schema";
-var inputSchema = {
-  xmlStructure: z.string().describe("The XML structure representing the composition to be built"),
-  elementConfig: z.record(
-    z.string().describe("The configuration id"),
-    z.record(
-      z.string().describe("property name"),
-      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: z.record(
-    z.string().describe("The configuration id"),
-    z.record(
-      z.string().describe('A CSS property name, e.g. "color", "padding".'),
-      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: z.string().describe("Error message if the composition building failed").optional(),
-  xmlStructure: 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: 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: getWidgetsCache8() ?? {}
-      });
-      let generatedXML = "";
-      const errors = [];
-      const rootContainers = [];
-      const documentContainer = getContainer5("document");
-      const currentDocument = getCurrentDocument();
-      const targetContainer = getCompositionTargetContainer(documentContainer, currentDocument?.type.value);
-      try {
-        const compositionBuilder = CompositionBuilder.fromXMLString(xmlStructure, {
-          createElement: createElement13,
-          deleteElement: deleteElement2,
-          getWidgetsCache: getWidgetsCache8
-        });
-        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) => {
-          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) => {
-          deleteElement2({
-            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 = getWidgetsCache8() ?? {};
-  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
-import { getContainer as getContainer6, getWidgetsCache as getWidgetsCache9 } from "@elementor/editor-elements";
-import { dispatchMcpStylesAppliedEvent as dispatchMcpStylesAppliedEvent2 } from "@elementor/editor-mcp";
-import { Schema as Schema2 } from "@elementor/editor-props";
-
 // src/mcp/tools/configure-element/prompt.ts
-import { toolPrompts as toolPrompts2 } from "@elementor/editor-mcp";
+import { toolPrompts } from "@elementor/editor-mcp";
 var CONFIGURE_ELEMENT_GUIDE_URI = "elementor://canvas/tools/configure-element-guide";
-var generatePrompt2 = () => {
-  const configureElementToolPrompt = toolPrompts2("configure-element");
+var generatePrompt = () => {
+  const configureElementToolPrompt = toolPrompts("configure-element");
   configureElementToolPrompt.description(`
 Configure an existing element on the page.
 
@@ -5665,11 +4931,11 @@ 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
 import { z as z2 } from "@elementor/schema";
-var inputSchema2 = {
+var inputSchema = {
   propertiesToChange: z2.record(
     z2.string().describe("The property name."),
     z2.any().describe(`PropValue, refer to [${WIDGET_SCHEMA_URI}] by correct type, as appears in elementType`),
@@ -5686,7 +4952,7 @@ var inputSchema2 = {
   elementType: z2.string().describe("The type of the element to retrieve the schema"),
   elementId: z2.string().describe("The unique id of the element to configure")
 };
-var outputSchema2 = {
+var outputSchema = {
   success: z2.boolean().describe(
     "Whether the configuration change was successful, only if propertyName and propertyValue are provided"
   )
@@ -5704,27 +4970,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 = getWidgetsCache9()?.[elementType];
+      const widgetData = getWidgetsCache6()?.[elementType];
       if (!widgetData) {
         throw new Error(
           `Unknown element type: ${elementType}. Check the available-widgets resource for valid types.`
         );
       }
-      const container = getContainer6(elementId);
+      const container = getContainer5(elementId);
       if (!container) {
         throw new Error(`Element with id ${elementId} not found`);
       }
@@ -5789,7 +5055,7 @@ async function applyStyleFromCss(opts) {
       propertyValue: styleValue,
       customCssWriteMode: "merge-with-stored"
     });
-    dispatchMcpStylesAppliedEvent2({ styleValue });
+    dispatchMcpStylesAppliedEvent({ styleValue });
   } catch (error) {
     throw new Error(
       createUpdateErrorMessage({
@@ -5817,9 +5083,9 @@ Provide styling as raw CSS via the "style" parameter (a flat map of CSS property
 
 // src/mcp/tools/create-element/tool.ts
 import { getCurrentDocument as getCurrentDocument2 } from "@elementor/editor-documents";
-import { httpService as httpService6 } from "@elementor/http-client";
+import { httpService as httpService7 } from "@elementor/http-client";
 import { z as z3 } from "@elementor/schema";
-var MCP_PROXY_URL5 = "elementor/v1/mcp-proxy";
+var MCP_PROXY_URL6 = "elementor/v1/mcp-proxy";
 var initCreateElementTool = (reg) => {
   const { addTool } = reg;
   addTool({
@@ -5839,7 +5105,7 @@ var initCreateElementTool = (reg) => {
       if (!document2?.id) {
         throw new Error("No active document found.");
       }
-      const { data } = await httpService6().post(MCP_PROXY_URL5, {
+      const { data } = await httpService7().post(MCP_PROXY_URL6, {
         tool: "create-element",
         input: {
           parent_id: parentId ?? "document",
@@ -5857,13 +5123,13 @@ var initCreateElementTool = (reg) => {
 };
 
 // src/mcp/tools/get-element-config/tool.ts
-import { getContainer as getContainer7, getElementStyles as getElementStyles2, getWidgetsCache as getWidgetsCache10 } from "@elementor/editor-elements";
+import { getContainer as getContainer6, getElementStyles as getElementStyles2, getWidgetsCache as getWidgetsCache7 } from "@elementor/editor-elements";
 import { Schema as Schema3 } from "@elementor/editor-props";
 import { z as z4 } from "@elementor/schema";
 var schema = {
   elementId: z4.string()
 };
-var outputSchema3 = {
+var outputSchema2 = {
   properties: z4.record(z4.string(), z4.any()).describe("A record mapping PropTypes to their corresponding PropValues"),
   style: z4.record(z4.string(), z4.any()).describe("A record mapping StyleSchema properties to their corresponding PropValues"),
   childElements: z4.array(
@@ -5890,14 +5156,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 = getContainer7(elementId);
+      const element = getContainer6(elementId);
       if (!element) {
         throw new Error(`Element with ID ${elementId} not found.`);
       }
       const elementType = element.model.get("widgetType") || element.model.get("elType") || "";
-      const widgetData = getWidgetsCache10()?.[elementType];
+      const widgetData = getWidgetsCache7()?.[elementType];
       if (!widgetData) {
         throw new Error(
           `Unknown element type: ${elementType}. Check the available-widgets resource for valid types.`
@@ -5909,7 +5175,7 @@ var initGetElementConfigTool = (reg) => {
         );
       }
       const elementRawSettings = element.settings;
-      const propSchema = getWidgetsCache10()?.[elementType]?.atomic_props_schema;
+      const propSchema = getWidgetsCache7()?.[elementType]?.atomic_props_schema;
       if (!elementRawSettings || !propSchema) {
         throw new Error(`No settings or prop schema found for element ID: ${elementId}`);
       }
@@ -5960,10 +5226,10 @@ var initCanvasMcp = (reg) => {
   initEditorStateResource(reg);
   initGeneralContextResource(reg);
   initBestPracticesResource(reg);
-  initBuildCompositionsTool(reg);
   initGetElementConfigTool(reg);
   initConfigureElementTool(reg);
   initCreateElementTool(reg);
+  initBuildCompositionTool(reg);
   initBreakpointsResource(reg);
 };
 
@@ -6163,7 +5429,7 @@ function shouldBlock(sourceElements, targetElements) {
 }
 
 // src/style-commands/paste-style.ts
-import { getContainer as getContainer8, getElementSetting, updateElementSettings as updateElementSettings2 } from "@elementor/editor-elements";
+import { getContainer as getContainer7, getElementSetting, updateElementSettings as updateElementSettings2 } from "@elementor/editor-elements";
 import { classesPropTypeUtil } from "@elementor/editor-props";
 import {
   __privateListenTo as listenTo5,
@@ -6172,7 +5438,7 @@ import {
 } from "@elementor/editor-v1-adapters";
 
 // src/utils/command-utils.ts
-import { getElementLabel as getElementLabel2, getWidgetsCache as getWidgetsCache11 } from "@elementor/editor-elements";
+import { getElementLabel as getElementLabel2, getWidgetsCache as getWidgetsCache8 } from "@elementor/editor-elements";
 import { CLASSES_PROP_KEY } from "@elementor/editor-props";
 import { __ as __5 } from "@wordpress/i18n";
 function hasAtomicWidgets(args) {
@@ -6197,7 +5463,7 @@ function getClassesProp(container) {
 }
 function getContainerSchema(container) {
   const type = container?.model.get("widgetType") || container?.model.get("elType");
-  const widgetsCache = getWidgetsCache11();
+  const widgetsCache = getWidgetsCache8();
   const elementType = widgetsCache?.[type];
   return elementType?.atomic_props_schema ?? null;
 }
@@ -6316,7 +5582,7 @@ function pasteStyles(args, pasteLocalStyle) {
   }
   const clipboardElements = getClipboardElements(storageKey);
   const [clipboardElement] = clipboardElements ?? [];
-  const clipboardContainer = getContainer8(clipboardElement.id);
+  const clipboardContainer = getContainer7(clipboardElement.id);
   if (!clipboardElement || !clipboardContainer || !isAtomicWidget(clipboardContainer)) {
     return;
   }
@@ -6593,10 +5859,10 @@ function useEscapeOnCanvas(canvasDocument, onEscape) {
 }
 
 // src/utils/after-render.ts
-import { getContainer as getContainer9 } from "@elementor/editor-elements";
+import { getContainer as getContainer8 } from "@elementor/editor-elements";
 function doAfterRender(elementIds, callback) {
   const pending = elementIds.map((elementId) => {
-    const view = getContainer9(elementId)?.view;
+    const view = getContainer8(elementId)?.view;
     if (!view || !hasDoAfterRender(view)) {
       return void 0;
     }
@@ -6611,6 +5877,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";
 export {
   BREAKPOINTS_SCHEMA_FULL_URI,
   BREAKPOINTS_SCHEMA_URI,