@elementor/editor-canvas 4.2.0-924 → 4.2.0-925

package/dist/index.js

@@ -3830,6 +3830,9 @@ function initTabsModelExtensions() {
   registerModelExtensions("e-tab", tabModelExtensions);
 }
 
+// src/mcp/canvas-mcp.ts
+var import_editor_props11 = require("@elementor/editor-props");
+
 // src/mcp/resources/available-widgets-resource.ts
 var import_editor_v1_adapters15 = require("@elementor/editor-v1-adapters");
 var AVAILABLE_WIDGETS_URI = "elementor://context/available-widgets";
@@ -3979,8 +3982,109 @@ function extractElementData(element) {
   return result;
 }
 
-// src/mcp/resources/editor-state-resource.ts
+// src/mcp/resources/dynamic-tags-resource.ts
+var import_editor_props7 = require("@elementor/editor-props");
+
+// src/mcp/utils/resolve-dynamic-tag.ts
 var import_editor_v1_adapters17 = require("@elementor/editor-v1-adapters");
+var DYNAMIC_PROP_TYPE_KEY = "dynamic";
+var OMITTED_DYNAMIC_SETTING_KEYS = ["fallback"];
+var getAtomicDynamicTags = () => {
+  const config = (0, import_editor_v1_adapters17.getElementorConfig)();
+  return config.atomicDynamicTags?.tags ?? {};
+};
+var getDynamicTagNamesByCategories = (categories) => {
+  if (!categories.length) {
+    return [];
+  }
+  const wanted = new Set(categories);
+  return Object.values(getAtomicDynamicTags()).filter((tag) => tag.categories?.some((category) => wanted.has(category))).map((tag) => tag.name);
+};
+var dynamicTagLLMResolver = (value) => {
+  const input = value ?? {};
+  const tag = input.name ? getAtomicDynamicTags()[input.name] : void 0;
+  if (!tag) {
+    return {
+      $$type: DYNAMIC_PROP_TYPE_KEY,
+      value: { name: input.name ?? "", group: "", settings: {} }
+    };
+  }
+  return {
+    $$type: DYNAMIC_PROP_TYPE_KEY,
+    value: {
+      name: tag.name,
+      group: tag.group,
+      settings: buildStrictSettings(tag.props_schema ?? {}, input.settings ?? {})
+    }
+  };
+};
+var buildStrictSettings = (schema2, provided) => {
+  const settings = {};
+  for (const [key, propType] of Object.entries(schema2)) {
+    if (OMITTED_DYNAMIC_SETTING_KEYS.includes(key)) {
+      continue;
+    }
+    const resolved = provided[key] !== void 0 ? wrapSettingValue(provided[key], propType) : defaultSettingValue(propType);
+    if (resolved !== void 0 && resolved !== null) {
+      settings[key] = resolved;
+    }
+  }
+  return settings;
+};
+var wrapSettingValue = (raw, propType) => {
+  if (raw !== null && typeof raw === "object") {
+    return raw;
+  }
+  return propType.key ? { $$type: propType.key, value: raw } : raw;
+};
+var defaultSettingValue = (propType) => {
+  if (propType.initial_value !== null && propType.initial_value !== void 0) {
+    return propType.initial_value;
+  }
+  if (propType.default !== null && propType.default !== void 0) {
+    return wrapSettingValue(propType.default, propType);
+  }
+  return void 0;
+};
+
+// src/mcp/resources/dynamic-tags-resource.ts
+var DYNAMIC_TAGS_URI = "elementor://dynamic-tags";
+var settingsSchema = (propsSchema) => {
+  return Object.fromEntries(
+    Object.entries(propsSchema ?? {}).filter(([key]) => !OMITTED_DYNAMIC_SETTING_KEYS.includes(key)).map(([key, propType]) => [key, import_editor_props7.Schema.propTypeToJsonSchema(propType)])
+  );
+};
+var buildDynamicTagsList = () => {
+  return Object.values(getAtomicDynamicTags()).map((tag) => ({
+    name: tag.name,
+    label: tag.label,
+    categories: tag.categories,
+    settings: settingsSchema(tag.props_schema)
+  }));
+};
+var initDynamicTagsResource = (reg) => {
+  const { resource } = reg;
+  resource(
+    "dynamic-tags",
+    DYNAMIC_TAGS_URI,
+    {
+      description: `List of available dynamic tags. To bind a property to a dynamic source, set its value to { "$$type": "dynamic", "value": { "name": <tag name>, "settings": { ... } } } using a tag whose name appears in that property's allowed list, and populate "settings" per the tag entry here.`,
+      mimeType: "application/json"
+    },
+    async (uri) => ({
+      contents: [
+        {
+          uri: uri.href,
+          mimeType: "application/json",
+          text: JSON.stringify(buildDynamicTagsList())
+        }
+      ]
+    })
+  );
+};
+
+// src/mcp/resources/editor-state-resource.ts
+var import_editor_v1_adapters18 = require("@elementor/editor-v1-adapters");
 var CURRENTLY_VIEWED_SCREEN = "The user is currently viewing the Elementor editor";
 var PAGE_CONTENT_CHARACTER_LIMIT = 500;
 var PREVIEW_TEXT_NODE_MIN_LENGTH = 2;
@@ -4001,8 +4105,8 @@ var initEditorStateResource = (reg) => {
     lastSerializedState = serialized;
     sendResourceUpdated({ uri: EDITOR_STATE_URI });
   };
-  (0, import_editor_v1_adapters17.__privateListenTo)(
-    [(0, import_editor_v1_adapters17.commandEndEvent)("editor/documents/switch"), (0, import_editor_v1_adapters17.commandEndEvent)("editor/documents/attach-preview")],
+  (0, import_editor_v1_adapters18.__privateListenTo)(
+    [(0, import_editor_v1_adapters18.commandEndEvent)("editor/documents/switch"), (0, import_editor_v1_adapters18.commandEndEvent)("editor/documents/attach-preview")],
     notifyIfChanged
   );
   lastSerializedState = JSON.stringify(buildState());
@@ -4076,7 +4180,7 @@ function getPageTitle() {
 }
 
 // src/mcp/resources/general-context-resource.ts
-var import_editor_v1_adapters18 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters19 = require("@elementor/editor-v1-adapters");
 var GENERAL_CONTEXT_URI = "elementor://context/general";
 var initGeneralContextResource = (reg) => {
   const { resource, sendResourceUpdated } = reg;
@@ -4137,11 +4241,11 @@ var initGeneralContextResource = (reg) => {
       };
     }
   );
-  (0, import_editor_v1_adapters18.__privateListenTo)(
+  (0, import_editor_v1_adapters19.__privateListenTo)(
     [
-      (0, import_editor_v1_adapters18.commandEndEvent)("editor/documents/switch"),
-      (0, import_editor_v1_adapters18.commandEndEvent)("editor/documents/attach-preview"),
-      (0, import_editor_v1_adapters18.commandEndEvent)("document/elements/settings")
+      (0, import_editor_v1_adapters19.commandEndEvent)("editor/documents/switch"),
+      (0, import_editor_v1_adapters19.commandEndEvent)("editor/documents/attach-preview"),
+      (0, import_editor_v1_adapters19.commandEndEvent)("document/elements/settings")
     ],
     pushUpdateIfChanged
   );
@@ -4150,7 +4254,7 @@ var initGeneralContextResource = (reg) => {
 
 // src/mcp/resources/selected-element-resource.ts
 var import_editor_elements12 = require("@elementor/editor-elements");
-var import_editor_v1_adapters19 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters20 = require("@elementor/editor-v1-adapters");
 var SELECTED_ELEMENT_URI = "elementor://context/selected-element";
 var initSelectedElementResource = (reg) => {
   const { resource, sendResourceUpdated } = reg;
@@ -4181,11 +4285,11 @@ var initSelectedElementResource = (reg) => {
     }
     publishIfChanged(readSelectionFromEditor());
   };
-  (0, import_editor_v1_adapters19.__privateListenTo)(
+  (0, import_editor_v1_adapters20.__privateListenTo)(
     [
-      (0, import_editor_v1_adapters19.commandEndEvent)("document/elements/select"),
-      (0, import_editor_v1_adapters19.commandEndEvent)("document/elements/deselect-all"),
-      (0, import_editor_v1_adapters19.commandEndEvent)("document/elements/settings")
+      (0, import_editor_v1_adapters20.commandEndEvent)("document/elements/select"),
+      (0, import_editor_v1_adapters20.commandEndEvent)("document/elements/deselect-all"),
+      (0, import_editor_v1_adapters20.commandEndEvent)("document/elements/settings")
     ],
     onCommand
   );
@@ -4303,9 +4407,9 @@ var import_editor_elements15 = require("@elementor/editor-elements");
 
 // src/mcp/utils/do-update-element-property.ts
 var import_editor_elements13 = require("@elementor/editor-elements");
-var import_editor_props7 = require("@elementor/editor-props");
+var import_editor_props8 = require("@elementor/editor-props");
 var import_editor_styles5 = require("@elementor/editor-styles");
-var import_editor_v1_adapters20 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters21 = require("@elementor/editor-v1-adapters");
 
 // src/mcp/utils/merge-custom-css.ts
 var CUSTOM_CSS_SEPARATOR = "\n";
@@ -4328,9 +4432,12 @@ var LOCAL_STYLE_META = {
 };
 function resolvePropValue(value, forceKey) {
   const Utils = window.elementorV2.editorVariables.Utils;
-  return import_editor_props7.Schema.adjustLlmPropValueSchema(value, {
+  return import_editor_props8.Schema.adjustLlmPropValueSchema(value, {
     forceKey,
-    transformers: Utils.globalVariablesLLMResolvers
+    transformers: {
+      ...Utils.globalVariablesLLMResolvers,
+      [DYNAMIC_PROP_TYPE_KEY]: dynamicTagLLMResolver
+    }
   });
 }
 var doUpdateElementProperty = (params) => {
@@ -4380,7 +4487,7 @@ var doUpdateElementProperty = (params) => {
       }
       if (propertyRawSchema.kind === "plain") {
         if (typeof propertyMapValue[stylePropName] !== "object") {
-          const propUtil = (0, import_editor_props7.getPropSchemaFromCache)(propertyRawSchema.key);
+          const propUtil = (0, import_editor_props8.getPropSchemaFromCache)(propertyRawSchema.key);
           if (propUtil) {
             const plainValue = propUtil.create(propertyMapValue[stylePropName]);
             propertyMapValue[stylePropName] = plainValue;
@@ -4433,7 +4540,7 @@ var doUpdateElementProperty = (params) => {
   }
   const propKey = elementPropSchema[propertyName].key;
   const value = resolvePropValue(propertyValue, propKey);
-  const { valid, jsonSchema } = import_editor_props7.Schema.validatePropValue(elementPropSchema[propertyName], propertyValue);
+  const { valid, jsonSchema } = import_editor_props8.Schema.validatePropValue(elementPropSchema[propertyName], propertyValue);
   if (!valid) {
     throw new Error(
       `Invalid PropValue for elementId: ${elementId}. PropKey: ${propKey}, PropValue: ${JSON.stringify(
@@ -4449,12 +4556,12 @@ Expected Schema: ${jsonSchema}`
     },
     withHistory: false
   });
-  (0, import_editor_v1_adapters20.__privateRunCommandSync)("document/save/set-is-modified", { status: true }, { internal: true });
+  (0, import_editor_v1_adapters21.__privateRunCommandSync)("document/save/set-is-modified", { status: true }, { internal: true });
 };
 
 // src/mcp/utils/validate-input.ts
 var import_editor_elements14 = require("@elementor/editor-elements");
-var import_editor_props8 = require("@elementor/editor-props");
+var import_editor_props9 = require("@elementor/editor-props");
 var import_editor_styles6 = require("@elementor/editor-styles");
 var _widgetsSchema = null;
 var validateInput = {
@@ -4488,10 +4595,10 @@ var validateInput = {
       if (!propSchema) {
         errors.push(`Property "${propName}" is not defined in the schema.`);
         hasInvalidKey = true;
-      } else if (!import_editor_props8.Schema.isPropKeyConfigurable(propName, propSchema)) {
+      } else if (!import_editor_props9.Schema.isPropKeyConfigurable(propName, propSchema)) {
         errors.push(`Property "${propName}" is not configurable.`);
       } else {
-        const { valid } = import_editor_props8.Schema.validatePropValue(propSchema, propValue);
+        const { valid } = import_editor_props9.Schema.validatePropValue(propSchema, propValue);
         if (!valid) {
           errors.push(
             `Invalid property "${propName}". Validate input with resource [${STYLE_SCHEMA_URI.replace(
@@ -4875,6 +4982,13 @@ Some elements have internal tree structures (nesting). When using these elements
 - NO LINKS in configuration
 - Retry on errors up to 10x
 
+# 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
@@ -5096,7 +5210,8 @@ var initBuildCompositionsTool = (reg) => {
       { 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: "Available widgets for this tool", uri: AVAILABLE_WIDGETS_URI_V4 },
+      { description: "Dynamic tags catalog", uri: DYNAMIC_TAGS_URI }
     ],
     outputSchema,
     handler: async (rawParams) => {
@@ -5261,6 +5376,21 @@ For styleProperties, use the style schema provided, as it also uses the PropType
 For all non-primitive types, provide the key property as defined in the schema as $$type in the generated object, as it is MANDATORY for parsing.
 
 Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property from the original configuration for every property you are changing.
+
+# Dynamic tags
+A value can be made dynamic wherever its schema exposes a variant with "$$type": "dynamic". This may be the property root OR a NESTED field: for example an image is made dynamic on its "src" (the root stays "image"), NOT on the whole "image" value.
+Put the dynamic object EXACTLY at the node whose schema offers the "dynamic" variant, in place of the static variant. The variant's "name" enumerates the tags allowed at that node.
+1. Read the [${DYNAMIC_TAGS_URI}] resource for each allowed tag's settings schema.
+2. Provide, at that node:
+{
+  "$$type": "dynamic",
+  "value": {
+    "name": "<allowed tag name>",
+    "settings": { /* strictly per the tag's settings schema */ }
+  }
+}
+Image example: { "$$type": "image", "value": { "src": { "$$type": "dynamic", "value": { "name": "<image tag>", "settings": { ... } } } } }
+Do NOT send "group" (it is resolved automatically). Use { "settings": {} } only when the tag has no settings.
 `);
   configureElementToolPrompt.parameter("elementId", "The ID of the element to configure. MANDATORY.");
   configureElementToolPrompt.parameter(
@@ -5368,7 +5498,8 @@ var initConfigureElementTool = (reg) => {
     requiredResources: [
       { description: "Widgets schema", uri: WIDGET_SCHEMA_URI },
       { description: "Styles schema", uri: STYLE_SCHEMA_URI },
-      { description: "Configure element guide", uri: CONFIGURE_ELEMENT_GUIDE_URI }
+      { description: "Configure element guide", uri: CONFIGURE_ELEMENT_GUIDE_URI },
+      { description: "Dynamic tags catalog", uri: DYNAMIC_TAGS_URI }
     ],
     handler: ({ elementId, propertiesToChange, elementType, stylePropertiesToChange }) => {
       const widgetData = (0, import_editor_elements17.getWidgetsCache)()?.[elementType];
@@ -5464,7 +5595,7 @@ Check the styles schema at the resource [${STYLE_SCHEMA_URI.replace(
 
 // src/mcp/tools/get-element-config/tool.ts
 var import_editor_elements18 = require("@elementor/editor-elements");
-var import_editor_props9 = require("@elementor/editor-props");
+var import_editor_props10 = require("@elementor/editor-props");
 var import_schema5 = require("@elementor/schema");
 var schema = {
   elementId: import_schema5.z.string()
@@ -5521,7 +5652,7 @@ var initGetElementConfigTool = (reg) => {
       }
       const propValues = {};
       const stylePropValues = {};
-      import_editor_props9.Schema.configurableKeys(propSchema).forEach((key) => {
+      import_editor_props10.Schema.configurableKeys(propSchema).forEach((key) => {
         propValues[key] = structuredClone(elementRawSettings.get(key));
       });
       const elementStyles = (0, import_editor_elements18.getElementStyles)(elementId) || {};
@@ -5557,9 +5688,11 @@ var initGetElementConfigTool = (reg) => {
 
 // src/mcp/canvas-mcp.ts
 var initCanvasMcp = (reg) => {
+  import_editor_props11.Schema.setDynamicTagNamesResolver(getDynamicTagNamesByCategories);
   initWidgetsSchemaResource(reg);
   initAvailableWidgetsResource(reg);
   initDocumentStructureResource(reg);
+  initDynamicTagsResource(reg);
   initSelectedElementResource(reg);
   initEditorStateResource(reg);
   initGeneralContextResource(reg);
@@ -5684,14 +5817,14 @@ Note: The "size" property controls image resolution/loading, not visual size. Se
 // src/prevent-link-in-link-commands.ts
 var import_editor_elements19 = require("@elementor/editor-elements");
 var import_editor_notifications3 = require("@elementor/editor-notifications");
-var import_editor_v1_adapters21 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters22 = require("@elementor/editor-v1-adapters");
 var import_i18n4 = require("@wordpress/i18n");
 function initLinkInLinkPrevention() {
-  (0, import_editor_v1_adapters21.blockCommand)({
+  (0, import_editor_v1_adapters22.blockCommand)({
     command: "document/elements/paste",
     condition: blockLinkInLinkPaste
   });
-  (0, import_editor_v1_adapters21.blockCommand)({
+  (0, import_editor_v1_adapters22.blockCommand)({
     command: "document/elements/move",
     condition: blockLinkInLinkMove
   });
@@ -5766,12 +5899,12 @@ function shouldBlock(sourceElements, targetElements) {
 
 // src/style-commands/paste-style.ts
 var import_editor_elements22 = require("@elementor/editor-elements");
-var import_editor_props11 = require("@elementor/editor-props");
-var import_editor_v1_adapters23 = require("@elementor/editor-v1-adapters");
+var import_editor_props13 = require("@elementor/editor-props");
+var import_editor_v1_adapters24 = require("@elementor/editor-v1-adapters");
 
 // src/utils/command-utils.ts
 var import_editor_elements20 = require("@elementor/editor-elements");
-var import_editor_props10 = require("@elementor/editor-props");
+var import_editor_props12 = require("@elementor/editor-props");
 var import_i18n5 = require("@wordpress/i18n");
 function hasAtomicWidgets(args) {
   const { containers = [args.container] } = args;
@@ -5789,7 +5922,7 @@ function getClassesProp(container) {
     return null;
   }
   const [propKey] = Object.entries(propsSchema).find(
-    ([, propType]) => propType.kind === "plain" && propType.key === import_editor_props10.CLASSES_PROP_KEY
+    ([, propType]) => propType.kind === "plain" && propType.key === import_editor_props12.CLASSES_PROP_KEY
   ) ?? [];
   return propKey ?? null;
 }
@@ -5814,9 +5947,9 @@ function getTitleForContainers(containers) {
 // src/style-commands/undoable-actions/paste-element-style.ts
 var import_editor_elements21 = 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_editor_v1_adapters23 = require("@elementor/editor-v1-adapters");
 var import_i18n6 = require("@wordpress/i18n");
-var undoablePasteElementStyle = () => (0, import_editor_v1_adapters22.undoable)(
+var undoablePasteElementStyle = () => (0, import_editor_v1_adapters23.undoable)(
   {
     do: ({ containers, newStyle }) => {
       return containers.map((container) => {
@@ -5892,12 +6025,12 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters22.undoable)(
 // src/style-commands/paste-style.ts
 function initPasteStyleCommand() {
   const pasteElementStyleCommand = undoablePasteElementStyle();
-  (0, import_editor_v1_adapters23.blockCommand)({
+  (0, import_editor_v1_adapters24.blockCommand)({
     command: "document/elements/paste-style",
     condition: hasAtomicWidgets
   });
-  (0, import_editor_v1_adapters23.__privateListenTo)(
-    (0, import_editor_v1_adapters23.commandStartEvent)("document/elements/paste-style"),
+  (0, import_editor_v1_adapters24.__privateListenTo)(
+    (0, import_editor_v1_adapters24.commandStartEvent)("document/elements/paste-style"),
     (e) => pasteStyles(e.args, pasteElementStyleCommand)
   );
 }
@@ -5938,8 +6071,8 @@ function pasteClasses(containers, classes) {
       return;
     }
     const classesSetting = (0, import_editor_elements22.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])));
+    const currentClasses = import_editor_props13.classesPropTypeUtil.extract(classesSetting) ?? [];
+    const newClasses = import_editor_props13.classesPropTypeUtil.create(Array.from(/* @__PURE__ */ new Set([...classes, ...currentClasses])));
     (0, import_editor_elements22.updateElementSettings)({
       id: container.id,
       props: { [classesProp]: newClasses }
@@ -5948,14 +6081,14 @@ function pasteClasses(containers, classes) {
 }
 
 // src/style-commands/reset-style.ts
-var import_editor_v1_adapters25 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters26 = require("@elementor/editor-v1-adapters");
 
 // src/style-commands/undoable-actions/reset-element-style.ts
 var import_editor_elements23 = 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_editor_v1_adapters25 = require("@elementor/editor-v1-adapters");
 var import_i18n7 = require("@wordpress/i18n");
-var undoableResetElementStyle = () => (0, import_editor_v1_adapters24.undoable)(
+var undoableResetElementStyle = () => (0, import_editor_v1_adapters25.undoable)(
   {
     do: ({ containers }) => {
       return containers.map((container) => {
@@ -5999,12 +6132,12 @@ var undoableResetElementStyle = () => (0, import_editor_v1_adapters24.undoable)(
 // src/style-commands/reset-style.ts
 function initResetStyleCommand() {
   const resetElementStyles = undoableResetElementStyle();
-  (0, import_editor_v1_adapters25.blockCommand)({
+  (0, import_editor_v1_adapters26.blockCommand)({
     command: "document/elements/reset-style",
     condition: hasAtomicWidgets
   });
-  (0, import_editor_v1_adapters25.__privateListenTo)(
-    (0, import_editor_v1_adapters25.commandStartEvent)("document/elements/reset-style"),
+  (0, import_editor_v1_adapters26.__privateListenTo)(
+    (0, import_editor_v1_adapters26.commandStartEvent)("document/elements/reset-style"),
     (e) => resetStyles(e.args, resetElementStyles)
   );
 }
@@ -6153,9 +6286,9 @@ function getRectClipPath(rect, viewport) {
 }
 
 // src/hooks/use-canvas-document.ts
-var import_editor_v1_adapters26 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters27 = require("@elementor/editor-v1-adapters");
 function useCanvasDocument() {
-  return (0, import_editor_v1_adapters26.__privateUseListenTo)((0, import_editor_v1_adapters26.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_v1_adapters26.getCanvasIframeDocument)());
+  return (0, import_editor_v1_adapters27.__privateUseListenTo)((0, import_editor_v1_adapters27.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_v1_adapters27.getCanvasIframeDocument)());
 }
 
 // src/hooks/use-escape-on-canvas.ts

package/dist/index.mjs

@@ -3794,6 +3794,9 @@ function initTabsModelExtensions() {
   registerModelExtensions("e-tab", tabModelExtensions);
 }
 
+// src/mcp/canvas-mcp.ts
+import { Schema as Schema6 } from "@elementor/editor-props";
+
 // src/mcp/resources/available-widgets-resource.ts
 import { v1ReadyEvent as v1ReadyEvent3 } from "@elementor/editor-v1-adapters";
 var AVAILABLE_WIDGETS_URI = "elementor://context/available-widgets";
@@ -3945,6 +3948,107 @@ function extractElementData(element) {
   return result;
 }
 
+// src/mcp/resources/dynamic-tags-resource.ts
+import { Schema as Schema2 } from "@elementor/editor-props";
+
+// src/mcp/utils/resolve-dynamic-tag.ts
+import { getElementorConfig } from "@elementor/editor-v1-adapters";
+var DYNAMIC_PROP_TYPE_KEY = "dynamic";
+var OMITTED_DYNAMIC_SETTING_KEYS = ["fallback"];
+var getAtomicDynamicTags = () => {
+  const config = getElementorConfig();
+  return config.atomicDynamicTags?.tags ?? {};
+};
+var getDynamicTagNamesByCategories = (categories) => {
+  if (!categories.length) {
+    return [];
+  }
+  const wanted = new Set(categories);
+  return Object.values(getAtomicDynamicTags()).filter((tag) => tag.categories?.some((category) => wanted.has(category))).map((tag) => tag.name);
+};
+var dynamicTagLLMResolver = (value) => {
+  const input = value ?? {};
+  const tag = input.name ? getAtomicDynamicTags()[input.name] : void 0;
+  if (!tag) {
+    return {
+      $$type: DYNAMIC_PROP_TYPE_KEY,
+      value: { name: input.name ?? "", group: "", settings: {} }
+    };
+  }
+  return {
+    $$type: DYNAMIC_PROP_TYPE_KEY,
+    value: {
+      name: tag.name,
+      group: tag.group,
+      settings: buildStrictSettings(tag.props_schema ?? {}, input.settings ?? {})
+    }
+  };
+};
+var buildStrictSettings = (schema2, provided) => {
+  const settings = {};
+  for (const [key, propType] of Object.entries(schema2)) {
+    if (OMITTED_DYNAMIC_SETTING_KEYS.includes(key)) {
+      continue;
+    }
+    const resolved = provided[key] !== void 0 ? wrapSettingValue(provided[key], propType) : defaultSettingValue(propType);
+    if (resolved !== void 0 && resolved !== null) {
+      settings[key] = resolved;
+    }
+  }
+  return settings;
+};
+var wrapSettingValue = (raw, propType) => {
+  if (raw !== null && typeof raw === "object") {
+    return raw;
+  }
+  return propType.key ? { $$type: propType.key, value: raw } : raw;
+};
+var defaultSettingValue = (propType) => {
+  if (propType.initial_value !== null && propType.initial_value !== void 0) {
+    return propType.initial_value;
+  }
+  if (propType.default !== null && propType.default !== void 0) {
+    return wrapSettingValue(propType.default, propType);
+  }
+  return void 0;
+};
+
+// src/mcp/resources/dynamic-tags-resource.ts
+var DYNAMIC_TAGS_URI = "elementor://dynamic-tags";
+var settingsSchema = (propsSchema) => {
+  return Object.fromEntries(
+    Object.entries(propsSchema ?? {}).filter(([key]) => !OMITTED_DYNAMIC_SETTING_KEYS.includes(key)).map(([key, propType]) => [key, Schema2.propTypeToJsonSchema(propType)])
+  );
+};
+var buildDynamicTagsList = () => {
+  return Object.values(getAtomicDynamicTags()).map((tag) => ({
+    name: tag.name,
+    label: tag.label,
+    categories: tag.categories,
+    settings: settingsSchema(tag.props_schema)
+  }));
+};
+var initDynamicTagsResource = (reg) => {
+  const { resource } = reg;
+  resource(
+    "dynamic-tags",
+    DYNAMIC_TAGS_URI,
+    {
+      description: `List of available dynamic tags. To bind a property to a dynamic source, set its value to { "$$type": "dynamic", "value": { "name": <tag name>, "settings": { ... } } } using a tag whose name appears in that property's allowed list, and populate "settings" per the tag entry here.`,
+      mimeType: "application/json"
+    },
+    async (uri) => ({
+      contents: [
+        {
+          uri: uri.href,
+          mimeType: "application/json",
+          text: JSON.stringify(buildDynamicTagsList())
+        }
+      ]
+    })
+  );
+};
+
 // src/mcp/resources/editor-state-resource.ts
 import { __privateListenTo as listenTo2, commandEndEvent as commandEndEvent5 } from "@elementor/editor-v1-adapters";
 var CURRENTLY_VIEWED_SCREEN = "The user is currently viewing the Elementor editor";
@@ -4289,7 +4393,7 @@ import {
   updateElementSettings,
   updateElementStyle
 } from "@elementor/editor-elements";
-import { getPropSchemaFromCache, Schema as Schema2 } from "@elementor/editor-props";
+import { getPropSchemaFromCache, Schema as Schema3 } from "@elementor/editor-props";
 import { getStylesSchema as getStylesSchema3, getVariantByMeta } from "@elementor/editor-styles";
 import { __privateRunCommandSync as runCommandSync2 } from "@elementor/editor-v1-adapters";
 
@@ -4314,9 +4418,12 @@ var LOCAL_STYLE_META = {
 };
 function resolvePropValue(value, forceKey) {
   const Utils = window.elementorV2.editorVariables.Utils;
-  return Schema2.adjustLlmPropValueSchema(value, {
+  return Schema3.adjustLlmPropValueSchema(value, {
     forceKey,
-    transformers: Utils.globalVariablesLLMResolvers
+    transformers: {
+      ...Utils.globalVariablesLLMResolvers,
+      [DYNAMIC_PROP_TYPE_KEY]: dynamicTagLLMResolver
+    }
   });
 }
 var doUpdateElementProperty = (params) => {
@@ -4419,7 +4526,7 @@ var doUpdateElementProperty = (params) => {
   }
   const propKey = elementPropSchema[propertyName].key;
   const value = resolvePropValue(propertyValue, propKey);
-  const { valid, jsonSchema } = Schema2.validatePropValue(elementPropSchema[propertyName], propertyValue);
+  const { valid, jsonSchema } = Schema3.validatePropValue(elementPropSchema[propertyName], propertyValue);
   if (!valid) {
     throw new Error(
       `Invalid PropValue for elementId: ${elementId}. PropKey: ${propKey}, PropValue: ${JSON.stringify(
@@ -4440,7 +4547,7 @@ Expected Schema: ${jsonSchema}`
 
 // src/mcp/utils/validate-input.ts
 import { getWidgetsCache as getWidgetsCache7 } from "@elementor/editor-elements";
-import { Schema as Schema3 } from "@elementor/editor-props";
+import { Schema as Schema4 } from "@elementor/editor-props";
 import { getStylesSchema as getStylesSchema4 } from "@elementor/editor-styles";
 var _widgetsSchema = null;
 var validateInput = {
@@ -4474,10 +4581,10 @@ var validateInput = {
       if (!propSchema) {
         errors.push(`Property "${propName}" is not defined in the schema.`);
         hasInvalidKey = true;
-      } else if (!Schema3.isPropKeyConfigurable(propName, propSchema)) {
+      } else if (!Schema4.isPropKeyConfigurable(propName, propSchema)) {
         errors.push(`Property "${propName}" is not configurable.`);
       } else {
-        const { valid } = Schema3.validatePropValue(propSchema, propValue);
+        const { valid } = Schema4.validatePropValue(propSchema, propValue);
         if (!valid) {
           errors.push(
             `Invalid property "${propName}". Validate input with resource [${STYLE_SCHEMA_URI.replace(
@@ -4861,6 +4968,13 @@ Some elements have internal tree structures (nesting). When using these elements
 - NO LINKS in configuration
 - Retry on errors up to 10x
 
+# 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
@@ -5082,7 +5196,8 @@ var initBuildCompositionsTool = (reg) => {
       { 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: "Available widgets for this tool", uri: AVAILABLE_WIDGETS_URI_V4 },
+      { description: "Dynamic tags catalog", uri: DYNAMIC_TAGS_URI }
     ],
     outputSchema,
     handler: async (rawParams) => {
@@ -5247,6 +5362,21 @@ For styleProperties, use the style schema provided, as it also uses the PropType
 For all non-primitive types, provide the key property as defined in the schema as $$type in the generated object, as it is MANDATORY for parsing.
 
 Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property from the original configuration for every property you are changing.
+
+# Dynamic tags
+A value can be made dynamic wherever its schema exposes a variant with "$$type": "dynamic". This may be the property root OR a NESTED field: for example an image is made dynamic on its "src" (the root stays "image"), NOT on the whole "image" value.
+Put the dynamic object EXACTLY at the node whose schema offers the "dynamic" variant, in place of the static variant. The variant's "name" enumerates the tags allowed at that node.
+1. Read the [${DYNAMIC_TAGS_URI}] resource for each allowed tag's settings schema.
+2. Provide, at that node:
+{
+  "$$type": "dynamic",
+  "value": {
+    "name": "<allowed tag name>",
+    "settings": { /* strictly per the tag's settings schema */ }
+  }
+}
+Image example: { "$$type": "image", "value": { "src": { "$$type": "dynamic", "value": { "name": "<image tag>", "settings": { ... } } } } }
+Do NOT send "group" (it is resolved automatically). Use { "settings": {} } only when the tag has no settings.
 `);
   configureElementToolPrompt.parameter("elementId", "The ID of the element to configure. MANDATORY.");
   configureElementToolPrompt.parameter(
@@ -5354,7 +5484,8 @@ var initConfigureElementTool = (reg) => {
     requiredResources: [
       { description: "Widgets schema", uri: WIDGET_SCHEMA_URI },
       { description: "Styles schema", uri: STYLE_SCHEMA_URI },
-      { description: "Configure element guide", uri: CONFIGURE_ELEMENT_GUIDE_URI }
+      { description: "Configure element guide", uri: CONFIGURE_ELEMENT_GUIDE_URI },
+      { description: "Dynamic tags catalog", uri: DYNAMIC_TAGS_URI }
     ],
     handler: ({ elementId, propertiesToChange, elementType, stylePropertiesToChange }) => {
       const widgetData = getWidgetsCache10()?.[elementType];
@@ -5450,7 +5581,7 @@ Check the styles schema at the resource [${STYLE_SCHEMA_URI.replace(
 
 // src/mcp/tools/get-element-config/tool.ts
 import { getContainer as getContainer6, getElementStyles as getElementStyles2, getWidgetsCache as getWidgetsCache11 } from "@elementor/editor-elements";
-import { Schema as Schema4 } from "@elementor/editor-props";
+import { Schema as Schema5 } from "@elementor/editor-props";
 import { z as z3 } from "@elementor/schema";
 var schema = {
   elementId: z3.string()
@@ -5507,7 +5638,7 @@ var initGetElementConfigTool = (reg) => {
       }
       const propValues = {};
       const stylePropValues = {};
-      Schema4.configurableKeys(propSchema).forEach((key) => {
+      Schema5.configurableKeys(propSchema).forEach((key) => {
         propValues[key] = structuredClone(elementRawSettings.get(key));
       });
       const elementStyles = getElementStyles2(elementId) || {};
@@ -5543,9 +5674,11 @@ var initGetElementConfigTool = (reg) => {
 
 // src/mcp/canvas-mcp.ts
 var initCanvasMcp = (reg) => {
+  Schema6.setDynamicTagNamesResolver(getDynamicTagNamesByCategories);
   initWidgetsSchemaResource(reg);
   initAvailableWidgetsResource(reg);
   initDocumentStructureResource(reg);
+  initDynamicTagsResource(reg);
   initSelectedElementResource(reg);
   initEditorStateResource(reg);
   initGeneralContextResource(reg);

package/package.json

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

package/src/mcp/canvas-mcp.ts

@@ -1,8 +1,10 @@
 import { type MCPRegistryEntry } from '@elementor/editor-mcp';
+import { Schema } from '@elementor/editor-props';
 
 import { initAvailableWidgetsResource } from './resources/available-widgets-resource';
 import { initBreakpointsResource } from './resources/breakpoints-resource';
 import { initDocumentStructureResource } from './resources/document-structure-resource';
+import { initDynamicTagsResource } from './resources/dynamic-tags-resource';
 import { initEditorStateResource } from './resources/editor-state-resource';
 import { initGeneralContextResource } from './resources/general-context-resource';
 import { initSelectedElementResource } from './resources/selected-element-resource';
@@ -10,11 +12,14 @@ import { initWidgetsSchemaResource } from './resources/widgets-schema-resource';
 import { initBuildCompositionsTool } from './tools/build-composition/tool';
 import { initConfigureElementTool } from './tools/configure-element/tool';
 import { initGetElementConfigTool } from './tools/get-element-config/tool';
+import { getDynamicTagNamesByCategories } from './utils/resolve-dynamic-tag';
 
 export const initCanvasMcp = ( reg: MCPRegistryEntry ) => {
+	Schema.setDynamicTagNamesResolver( getDynamicTagNamesByCategories );
 	initWidgetsSchemaResource( reg );
 	initAvailableWidgetsResource( reg );
 	initDocumentStructureResource( reg );
+	initDynamicTagsResource( reg );
 	initSelectedElementResource( reg );
 	initEditorStateResource( reg );
 	initGeneralContextResource( reg );

package/src/mcp/resources/__tests__/dynamic-tags-resource.test.ts

@@ -0,0 +1,85 @@
+import { Schema } from '@elementor/editor-props';
+import { getElementorConfig } from '@elementor/editor-v1-adapters';
+
+import { DYNAMIC_TAGS_URI, initDynamicTagsResource } from '../dynamic-tags-resource';
+
+jest.mock( '@elementor/editor-props', () => ( {
+	Schema: {
+		propTypeToJsonSchema: jest.fn( () => ( { mocked: true } ) ),
+	},
+} ) );
+
+jest.mock( '@elementor/editor-v1-adapters', () => ( {
+	getElementorConfig: jest.fn(),
+} ) );
+
+const mockedGetElementorConfig = getElementorConfig as jest.MockedFunction< typeof getElementorConfig >;
+
+type ResourceHandler = ( uri: URL ) => Promise< { contents: { text: string }[] } >;
+
+const captureHandler = (): ResourceHandler => {
+	const resource = jest.fn();
+	initDynamicTagsResource( { resource } as never );
+	return resource.mock.calls[ 0 ][ 3 ] as ResourceHandler;
+};
+
+const readCatalog = async () => {
+	const handler = captureHandler();
+	const result = await handler( new URL( DYNAMIC_TAGS_URI ) );
+	return JSON.parse( result.contents[ 0 ].text );
+};
+
+describe( 'dynamic-tags-resource', () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'returns a flat tag list with categories and omits the fallback setting', async () => {
+		// Arrange
+		mockedGetElementorConfig.mockReturnValue( {
+			atomicDynamicTags: {
+				tags: {
+					'post-custom-field': {
+						name: 'post-custom-field',
+						label: 'Post Custom Field',
+						group: 'post',
+						categories: [ 'text', 'url' ],
+						props_schema: {
+							key: { kind: 'string', key: 'string' },
+							before: { kind: 'string', key: 'string' },
+							fallback: { kind: 'string', key: 'string' },
+						},
+					},
+				},
+				groups: { post: { title: 'Post' } },
+			},
+		} as never );
+
+		// Act
+		const catalog = await readCatalog();
+
+		// Assert
+		expect( Array.isArray( catalog ) ).toBe( true );
+		expect( catalog ).toHaveLength( 1 );
+		expect( catalog[ 0 ] ).toMatchObject( {
+			name: 'post-custom-field',
+			label: 'Post Custom Field',
+			categories: [ 'text', 'url' ],
+		} );
+		expect( catalog[ 0 ] ).not.toHaveProperty( 'group' );
+		expect( Object.keys( catalog[ 0 ].settings ) ).toEqual( [ 'key', 'before' ] );
+		expect( catalog[ 0 ].settings ).not.toHaveProperty( 'fallback' );
+	} );
+
+	it( 'returns an empty list when dynamic tags are unavailable', async () => {
+		// Arrange
+		mockedGetElementorConfig.mockReturnValue( {} as never );
+
+		// Act
+		const catalog = await readCatalog();
+
+		// Assert
+		expect( catalog ).toEqual( [] );
+		expect( Schema.propTypeToJsonSchema ).not.toHaveBeenCalled();
+	} );
+} );

package/src/mcp/resources/dynamic-tags-resource.ts

@@ -0,0 +1,52 @@
+import { type MCPRegistryEntry } from '@elementor/editor-mcp';
+import { type PropType, Schema } from '@elementor/editor-props';
+
+import {
+	type AtomicDynamicTag,
+	getAtomicDynamicTags,
+	OMITTED_DYNAMIC_SETTING_KEYS,
+} from '../utils/resolve-dynamic-tag';
+
+export const DYNAMIC_TAGS_URI = 'elementor://dynamic-tags';
+
+const settingsSchema = ( propsSchema: AtomicDynamicTag[ 'props_schema' ] ): Record< string, unknown > => {
+	return Object.fromEntries(
+		Object.entries( propsSchema ?? {} )
+			.filter( ( [ key ] ) => ! ( OMITTED_DYNAMIC_SETTING_KEYS as readonly string[] ).includes( key ) )
+			.map( ( [ key, propType ] ) => [ key, Schema.propTypeToJsonSchema( propType as PropType ) ] )
+	);
+};
+
+const buildDynamicTagsList = () => {
+	return Object.values( getAtomicDynamicTags() ).map( ( tag ) => ( {
+		name: tag.name,
+		label: tag.label,
+		categories: tag.categories,
+		settings: settingsSchema( tag.props_schema ),
+	} ) );
+};
+
+export const initDynamicTagsResource = ( reg: MCPRegistryEntry ) => {
+	const { resource } = reg;
+
+	resource(
+		'dynamic-tags',
+		DYNAMIC_TAGS_URI,
+		{
+			description:
+				'List of available dynamic tags. To bind a property to a dynamic source, set its value to ' +
+				'{ "$$type": "dynamic", "value": { "name": <tag name>, "settings": { ... } } } using a tag whose ' +
+				'name appears in that property\'s allowed list, and populate "settings" per the tag entry here.',
+			mimeType: 'application/json',
+		},
+		async ( uri: URL ) => ( {
+			contents: [
+				{
+					uri: uri.href,
+					mimeType: 'application/json',
+					text: JSON.stringify( buildDynamicTagsList() ),
+				},
+			],
+		} )
+	);
+};

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

@@ -1,6 +1,7 @@
 import { toolPrompts } from '@elementor/editor-mcp';
 
 import { AVAILABLE_WIDGETS_URI } from '../../resources/available-widgets-resource';
+import { DYNAMIC_TAGS_URI } from '../../resources/dynamic-tags-resource';
 
 export const BUILD_COMPOSITIONS_GUIDE_URI = 'elementor://canvas/tools/build-compositions-guide';
 
@@ -40,6 +41,13 @@ Some elements have internal tree structures (nesting). When using these elements
 - NO LINKS in configuration
 - Retry on errors up to 10x
 
+# 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

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

@@ -10,6 +10,7 @@ import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 
 import { CompositionBuilder } from '../../../composition-builder/composition-builder';
 import { AVAILABLE_WIDGETS_URI_V4 } from '../../resources/available-widgets-resource';
+import { DYNAMIC_TAGS_URI } from '../../resources/dynamic-tags-resource';
 import { BEST_PRACTICES_URI, STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
 import { isWidgetAvailableForLLM } from '../../utils/element-data-util';
 import { getCompositionTargetContainer } from '../../utils/get-composition-target-container';
@@ -45,6 +46,7 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 			{ 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 ) => {

package/src/mcp/tools/configure-element/prompt.ts

@@ -1,5 +1,6 @@
 import { toolPrompts } from '@elementor/editor-mcp';
 
+import { DYNAMIC_TAGS_URI } from '../../resources/dynamic-tags-resource';
 import { STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
 
 export const CONFIGURE_ELEMENT_GUIDE_URI = 'elementor://canvas/tools/configure-element-guide';
@@ -59,6 +60,21 @@ For styleProperties, use the style schema provided, as it also uses the PropType
 For all non-primitive types, provide the key property as defined in the schema as $$type in the generated object, as it is MANDATORY for parsing.
 
 Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property from the original configuration for every property you are changing.
+
+# Dynamic tags
+A value can be made dynamic wherever its schema exposes a variant with "$$type": "dynamic". This may be the property root OR a NESTED field: for example an image is made dynamic on its "src" (the root stays "image"), NOT on the whole "image" value.
+Put the dynamic object EXACTLY at the node whose schema offers the "dynamic" variant, in place of the static variant. The variant's "name" enumerates the tags allowed at that node.
+1. Read the [${ DYNAMIC_TAGS_URI }] resource for each allowed tag's settings schema.
+2. Provide, at that node:
+{
+  "$$type": "dynamic",
+  "value": {
+    "name": "<allowed tag name>",
+    "settings": { /* strictly per the tag's settings schema */ }
+  }
+}
+Image example: { "$$type": "image", "value": { "src": { "$$type": "dynamic", "value": { "name": "<image tag>", "settings": { ... } } } } }
+Do NOT send "group" (it is resolved automatically). Use { "settings": {} } only when the tag has no settings.
 ` );
 
 	configureElementToolPrompt.parameter( 'elementId', 'The ID of the element to configure. MANDATORY.' );

package/src/mcp/tools/configure-element/tool.ts

@@ -1,6 +1,7 @@
 import { getWidgetsCache } from '@elementor/editor-elements';
 import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 
+import { DYNAMIC_TAGS_URI } from '../../resources/dynamic-tags-resource';
 import { STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
 import { doUpdateElementProperty } from '../../utils/do-update-element-property';
 import { validateInput } from '../../utils/validate-input';
@@ -32,6 +33,7 @@ export const initConfigureElementTool = ( reg: MCPRegistryEntry ) => {
 			{ description: 'Widgets schema', uri: WIDGET_SCHEMA_URI },
 			{ description: 'Styles schema', uri: STYLE_SCHEMA_URI },
 			{ description: 'Configure element guide', uri: CONFIGURE_ELEMENT_GUIDE_URI },
+			{ description: 'Dynamic tags catalog', uri: DYNAMIC_TAGS_URI },
 		],
 		handler: ( { elementId, propertiesToChange, elementType, stylePropertiesToChange } ) => {
 			const widgetData = getWidgetsCache()?.[ elementType ];

package/src/mcp/utils/__tests__/resolve-dynamic-tag.test.ts

@@ -0,0 +1,102 @@
+import { getElementorConfig } from '@elementor/editor-v1-adapters';
+
+import { dynamicTagLLMResolver, getDynamicTagNamesByCategories } from '../resolve-dynamic-tag';
+
+jest.mock( '@elementor/editor-v1-adapters', () => ( {
+	getElementorConfig: jest.fn(),
+} ) );
+
+const mockedGetElementorConfig = getElementorConfig as jest.MockedFunction< typeof getElementorConfig >;
+
+const givenTags = () =>
+	mockedGetElementorConfig.mockReturnValue( {
+		atomicDynamicTags: {
+			tags: {
+				'post-custom-field': {
+					name: 'post-custom-field',
+					label: 'Post Custom Field',
+					group: 'post',
+					categories: [ 'text', 'url' ],
+					props_schema: {
+						key: { kind: 'plain', key: 'string', default: '' },
+						before: { kind: 'plain', key: 'string', default: 'prefix' },
+						fallback: { kind: 'plain', key: 'string', default: '' },
+					},
+				},
+				'site-title': {
+					name: 'site-title',
+					label: 'Site Title',
+					group: 'site',
+					categories: [ 'text' ],
+					props_schema: {},
+				},
+			},
+		},
+	} as never );
+
+describe( 'resolve-dynamic-tag', () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+		givenTags();
+	} );
+
+	describe( 'getDynamicTagNamesByCategories', () => {
+		it( 'returns only the tags whose categories intersect the prop categories', () => {
+			// Act
+			const names = getDynamicTagNamesByCategories( [ 'url' ] );
+
+			// Assert
+			expect( names ).toEqual( [ 'post-custom-field' ] );
+		} );
+
+		it( 'returns an empty list when no categories are requested', () => {
+			// Act & Assert
+			expect( getDynamicTagNamesByCategories( [] ) ).toEqual( [] );
+		} );
+	} );
+
+	describe( 'dynamicTagLLMResolver', () => {
+		it( 'fills the group from the registry and wraps provided scalar settings', () => {
+			// Act
+			const resolved = dynamicTagLLMResolver( {
+				name: 'post-custom-field',
+				settings: { key: 'price' },
+			} );
+
+			// Assert
+			expect( resolved ).toEqual( {
+				$$type: 'dynamic',
+				value: {
+					name: 'post-custom-field',
+					group: 'post',
+					settings: {
+						key: { $$type: 'string', value: 'price' },
+						before: { $$type: 'string', value: 'prefix' },
+					},
+				},
+			} );
+		} );
+
+		it( 'keeps already-wrapped settings values untouched', () => {
+			// Act
+			const resolved = dynamicTagLLMResolver( {
+				name: 'post-custom-field',
+				settings: { key: { $$type: 'string', value: 'price' } },
+			} ) as { value: { settings: Record< string, unknown > } };
+
+			// Assert
+			expect( resolved.value.settings.key ).toEqual( { $$type: 'string', value: 'price' } );
+		} );
+
+		it( 'returns a structurally complete value for unknown tags', () => {
+			// Act
+			const resolved = dynamicTagLLMResolver( { name: 'does-not-exist' } );
+
+			// Assert
+			expect( resolved ).toEqual( {
+				$$type: 'dynamic',
+				value: { name: 'does-not-exist', group: '', settings: {} },
+			} );
+		} );
+	} );
+} );

package/src/mcp/utils/do-update-element-property.ts

@@ -12,6 +12,7 @@ import { type Utils as IUtils } from '@elementor/editor-variables';
 import { type z } from '@elementor/schema';
 
 import { mergeCustomCssText, readStoredCustomCssText } from './merge-custom-css';
+import { DYNAMIC_PROP_TYPE_KEY, dynamicTagLLMResolver } from './resolve-dynamic-tag';
 
 // TODO: see https://elementor.atlassian.net/browse/ED-22513 for better cross-module access
 type XElementor = z.infer< z.ZodAny >;
@@ -34,7 +35,10 @@ export function resolvePropValue( value: unknown, forceKey?: string ): PropValue
 		.Utils as typeof IUtils;
 	return Schema.adjustLlmPropValueSchema( value as PropValue, {
 		forceKey,
-		transformers: Utils.globalVariablesLLMResolvers,
+		transformers: {
+			...Utils.globalVariablesLLMResolvers,
+			[ DYNAMIC_PROP_TYPE_KEY ]: dynamicTagLLMResolver,
+		},
 	} );
 }
 

package/src/mcp/utils/resolve-dynamic-tag.ts

@@ -0,0 +1,102 @@
+import { type PropType, type PropValue } from '@elementor/editor-props';
+import { getElementorConfig } from '@elementor/editor-v1-adapters';
+
+export const DYNAMIC_PROP_TYPE_KEY = 'dynamic';
+
+// `fallback` is a generic render-time default added to every tag; it is noise for configuration.
+export const OMITTED_DYNAMIC_SETTING_KEYS = [ 'fallback' ] as const;
+
+type SettingPropType = PropType & { key?: string };
+
+export type AtomicDynamicTag = {
+	name: string;
+	label: string;
+	group: string;
+	categories: string[];
+	props_schema: Record< string, SettingPropType >;
+};
+
+type LlmDynamicValue = {
+	name?: string;
+	settings?: Record< string, unknown >;
+};
+
+export const getAtomicDynamicTags = (): Record< string, AtomicDynamicTag > => {
+	const config = getElementorConfig() as { atomicDynamicTags?: { tags?: Record< string, AtomicDynamicTag > } };
+	return config.atomicDynamicTags?.tags ?? {};
+};
+
+export const getDynamicTagNamesByCategories = ( categories: string[] ): string[] => {
+	if ( ! categories.length ) {
+		return [];
+	}
+	const wanted = new Set( categories );
+	return Object.values( getAtomicDynamicTags() )
+		.filter( ( tag ) => tag.categories?.some( ( category ) => wanted.has( category ) ) )
+		.map( ( tag ) => tag.name );
+};
+
+// Reconstructs an intact dynamic PropValue from whatever the LLM produced: the authoritative `group`
+// is taken from the registry (never trusted from the model) and `settings` are rebuilt strictly from
+// the tag's props schema (provided values are wrapped, omitted ones fall back to their defaults).
+export const dynamicTagLLMResolver = ( value: unknown ): PropValue => {
+	const input = ( value ?? {} ) as LlmDynamicValue;
+	const tag = input.name ? getAtomicDynamicTags()[ input.name ] : undefined;
+
+	if ( ! tag ) {
+		return {
+			$$type: DYNAMIC_PROP_TYPE_KEY,
+			value: { name: input.name ?? '', group: '', settings: {} },
+		} as PropValue;
+	}
+
+	return {
+		$$type: DYNAMIC_PROP_TYPE_KEY,
+		value: {
+			name: tag.name,
+			group: tag.group,
+			settings: buildStrictSettings( tag.props_schema ?? {}, input.settings ?? {} ),
+		},
+	} as PropValue;
+};
+
+const buildStrictSettings = (
+	schema: Record< string, SettingPropType >,
+	provided: Record< string, unknown >
+): Record< string, unknown > => {
+	const settings: Record< string, unknown > = {};
+
+	for ( const [ key, propType ] of Object.entries( schema ) ) {
+		if ( ( OMITTED_DYNAMIC_SETTING_KEYS as readonly string[] ).includes( key ) ) {
+			continue;
+		}
+
+		const resolved =
+			provided[ key ] !== undefined
+				? wrapSettingValue( provided[ key ], propType )
+				: defaultSettingValue( propType );
+
+		if ( resolved !== undefined && resolved !== null ) {
+			settings[ key ] = resolved;
+		}
+	}
+
+	return settings;
+};
+
+const wrapSettingValue = ( raw: unknown, propType: SettingPropType ): unknown => {
+	if ( raw !== null && typeof raw === 'object' ) {
+		return raw;
+	}
+	return propType.key ? { $$type: propType.key, value: raw } : raw;
+};
+
+const defaultSettingValue = ( propType: SettingPropType ): unknown => {
+	if ( propType.initial_value !== null && propType.initial_value !== undefined ) {
+		return propType.initial_value;
+	}
+	if ( propType.default !== null && propType.default !== undefined ) {
+		return wrapSettingValue( propType.default, propType );
+	}
+	return undefined;
+};